﻿/* ================================================
   VERBO FRIDAY
   Estilos exclusivos da pagina VerboFriday.aspx
   ================================================ */

.key-detail--friday {
    --key-accent: #F5D390;
    background: radial-gradient(circle at 82% 37%, rgba(245,211,144,.032) 0 1px, transparent 2px) 0 0 / 58px 58px, radial-gradient(ellipse 50% 34% at 88% 36%, rgba(94,66,18,.13), transparent 66%), #030303;
}

.key-detail--friday::before {
    background: radial-gradient(ellipse 45% 40% at 87% 47%, rgba(245,211,144,.045), transparent 62%), radial-gradient(ellipse 34% 28% at 66% 42%, rgba(216,169,74,.06), transparent 70%);
}

.key-hero-bg-friday {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background: radial-gradient(ellipse 70% 55% at 75% 40%, rgba(18,18,18,.66) 0%, transparent 66%), radial-gradient(ellipse 48% 42% at 56% 46%, rgba(216,169,74,.2), transparent 68%);
}

.glow-friday {
    background: #d8a94a;
}

.strip-friday,
.pill-star-friday,
.savings-circle-friday {
    color: var(--gold-100);
}

.savings-circle-friday {
    border-color: var(--gold-100);
}

.key-detail--friday .key-video {
    filter: sepia(.2) saturate(1.28) hue-rotate(-10deg) contrast(1.12) brightness(1.18) drop-shadow(0 22px 36px rgba(216,169,74,.26));
}

.key-detail--friday .key-page-visual .key-render {
    width: 420px !important;
    transform: translateX(-18px) translateY(-8px);
    --key-glow-soft: rgba(216,169,74,.36);
    --key-glow-strong: rgba(255,214,122,.62);
}

.key-detail--friday .key-page-visual .key-render::before {
    inset: 2%;
    background: radial-gradient(ellipse 42% 35% at 50% 50%, rgba(255,238,182,.58), rgba(255,190,72,.25) 38%, transparent 68%), radial-gradient(ellipse 78% 58% at 50% 52%, rgba(216,169,74,.25), transparent 72%), radial-gradient(ellipse 108% 80% at 50% 52%, rgba(12,12,12,.42), transparent 76%);
    filter: blur(24px);
    opacity: 1;
    transform: scale(1.08);
}

.key-detail--friday .key-page-visual .key-render::after {
    background: radial-gradient(ellipse 46% 36% at 50% 50%, rgba(255,214,122,.14), transparent 56%), radial-gradient(ellipse 72% 56% at 50% 52%, transparent 58%, rgba(12,12,12,.22) 76%, rgba(3,3,3,.5) 100%);
    opacity: .6;
}

.key-detail--friday .key-page-visual .friday-header-video {
    transform: scale(1.24) rotate(-72deg);
    filter: sepia(.26) saturate(1.48) hue-rotate(-12deg) contrast(1.12) brightness(1.24) drop-shadow(0 18px 28px rgba(255,190,72,.22)) drop-shadow(0 0 34px rgba(216,169,74,.34));
    -webkit-mask-image: radial-gradient(ellipse 48% 44% at 50% 50%, #000 0 48%, rgba(0,0,0,.82) 58%, rgba(0,0,0,.28) 68%, transparent 78%);
    mask-image: radial-gradient(ellipse 48% 37% at 50% 50%, #000 0 48%, rgba(0,0,0,.82) 58%, rgba(0,0,0,.28) 68%, transparent 78%);
}

.key-detail--friday .key-page-hero-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}

.key-detail--friday .key-page-text {
    min-width: 0;
    padding-top: 64px;
}

.key-detail--friday .key-page-toprow {
    max-width: 650px;
    gap: 24px;
    justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 28px;
    border-bottom-color: rgba(245,211,144,.13);
}

.key-detail--friday .key-page-toprow .breadcrumb {
    white-space: nowrap;
}

.key-detail--friday .key-page-text h1 {
    max-width: 650px;
    font-size: 2rem;
    line-height: 1.18;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 26px;
}

.key-detail--friday .key-page-text h1 strong {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.key-detail--friday .key-page-description {
    max-width: 590px;
    margin-top: 0;
    color: rgba(239,237,232,.78);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: 0;
}

.key-detail--friday .key-page-hero-inner,
.key-detail--friday .key-strip,
.key-detail--friday .key-section-title,
.key-detail--friday .key-benefits-layout,
.key-detail--friday .key-offer {
    max-width: 1220px;
}

.key-detail--friday .benefit-pill {
    border-color: rgba(245,211,144,.2);
    background: linear-gradient(90deg, rgba(245,211,144,.075), rgba(255,255,255,.03));
    color: rgba(248,223,168,.95);
}

.key-detail--friday .key-benefits-visual .key-render {
    width: 275px !important;
    --key-glow-soft: rgba(216,169,74,.38);
    --key-glow-strong: rgba(255,214,122,.62);
}

.key-detail--friday .key-benefits-visual {
    background: radial-gradient(ellipse 44% 40% at 50% 45%, rgba(255,232,166,.24), transparent 62%), radial-gradient(ellipse 72% 62% at 50% 50%, rgba(216,169,74,.16), transparent 74%), rgba(3,3,3,.68);
    border-color: rgba(245,211,144,.18);
    box-shadow: inset 0 0 42px rgba(216,169,74,.07), 0 18px 50px rgba(0,0,0,.24);
}

.key-detail--friday .key-benefits-visual .key-render::before {
    inset: 0;
    background: radial-gradient(ellipse 42% 46% at 50% 50%, rgba(255,238,182,.46), rgba(255,190,72,.22) 42%, transparent 70%), radial-gradient(ellipse 78% 70% at 50% 52%, rgba(216,169,74,.24), transparent 74%);
    filter: blur(22px);
    opacity: 1;
    transform: scale(1.06);
}

.key-detail--friday .key-benefits-visual .key-render::after {
    background: radial-gradient(ellipse 48% 54% at 50% 50%, rgba(255,214,122,.13), transparent 58%), radial-gradient(ellipse 76% 72% at 50% 52%, transparent 58%, rgba(12,12,12,.18) 78%, rgba(3,3,3,.46) 100%);
    opacity: .58;
}

.key-detail--friday .key-benefits-visual .friday-body-video {
    transform: scale(.86);
    filter: sepia(.22) saturate(1.42) hue-rotate(-12deg) contrast(1.1) brightness(1.2) drop-shadow(0 18px 28px rgba(255,190,72,.18)) drop-shadow(0 0 30px rgba(216,169,74,.3));
    -webkit-mask-image: radial-gradient(ellipse 48% 44% at 50% 50%, #000 0 48%, rgba(0,0,0,.82) 58%, rgba(0,0,0,.28) 68%, transparent 78%);
    mask-image: radial-gradient(ellipse 48% 64% at 50% 50%, #000 0 48%, rgba(0,0,0,.82) 58%, rgba(0,0,0,.28) 68%, transparent 78%);
}

.key-detail--friday .key-price-label {
    background: radial-gradient(ellipse 80% 110% at 100% 100%, rgba(245,211,144,.1), transparent 70%), linear-gradient(135deg, rgba(8,8,8,.88), rgba(22,18,12,.72));
    border-color: rgba(245,211,144,.2);
}

.key-detail--friday .key-price-value {
    background: radial-gradient(ellipse 72% 96% at 10% 100%, rgba(255,231,166,.28), transparent 64%), radial-gradient(ellipse 95% 120% at 100% 0%, rgba(216,169,74,.18), transparent 68%), linear-gradient(135deg, rgba(8,8,8,.98), rgba(54,40,12,.9));
    border-color: rgba(255,231,166,.3);
    box-shadow: inset 0 0 38px rgba(255,231,166,.07), 0 18px 46px rgba(0,0,0,.24), 0 0 34px rgba(216,169,74,.07);
}

.key-detail--friday .payment-card {
    border-color: rgba(245,211,144,.18);
    background: radial-gradient(ellipse 86% 118% at 50% 100%, rgba(245,211,144,.1), transparent 70%), linear-gradient(145deg, rgba(7,7,7,.9), rgba(24,19,11,.7));
}

.key-detail--friday .payment-card--featured {
    border-color: rgba(255,231,166,.48);
    background: radial-gradient(ellipse 92% 128% at 50% 100%, rgba(255,231,166,.26), transparent 70%), radial-gradient(ellipse 82% 90% at 0% 0%, rgba(216,169,74,.18), transparent 70%), linear-gradient(145deg, rgba(7,7,7,.96), rgba(62,46,14,.8));
    box-shadow: inset 0 0 38px rgba(255,231,166,.09), 0 18px 46px rgba(0,0,0,.24), 0 0 34px rgba(216,169,74,.08);
}

.key-detail--friday .payment-card span {
    color: #F5D390;
}

.key-detail--friday .payment-card small,
.key-detail--friday .key-price-label small {
    color: rgba(245,211,144,.58);
}

.key-payment-options--friday {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 610px;
    margin-left: auto;
    margin-right: auto;
}

.key-detail--friday .key-economy-row {
    border-color: rgba(245,211,144,.16);
    background: radial-gradient(ellipse 90% 140% at 100% 50%, rgba(245,211,144,.08), transparent 72%), rgba(7,7,7,.58);
}

.btn-friday {
    background: linear-gradient(135deg, #f5d390 16%, #fff1c8 49%, #d8a94a 85%);
    color: #050505;
    box-shadow: inset 0 0 18px rgba(255,255,255,.9), 0 0 0 4px rgba(255,255,255,.18), 0 0 0 7px rgba(22,22,26,.9), 0 18px 36px rgba(216,169,74,.16);
    border: 1px solid rgba(255,255,255,.32);
}

.btn-friday:hover,
.btn-friday:active,
.btn-friday:focus,
.btn-friday:visited {
    color: #050505;
}

@media (min-width: 901px) {
    .key-detail--friday .key-benefits-visual .key-render {
        width: 100% !important;
        --key-glow-soft: rgba(216,169,74,.38);
        --key-glow-strong: rgba(255,214,122,.62);
    }
}

@media (max-width: 900px) {
    .key-detail--friday .key-page-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        max-width: 520px;
    }

    .key-detail--friday .key-page-text {
        padding-top: 0;
        text-align: center;
    }

    .key-detail--friday .key-page-visual .key-render {
        width: 260px !important;
        max-width: 100%;
        transform: none;
    }

    .key-detail--friday .key-page-toprow {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }

    .key-detail--friday .key-page-description {
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .key-detail--friday .key-page-hero-inner {
        width: 100%;
    }

    .key-detail--friday .key-page-visual .key-render {
        width: 205px !important;
    }

    .key-detail--friday .key-page-text h1 {
        font-size: 1.375rem;
        line-height: 1.3;
        margin-bottom: 18px;
    }

    .key-detail--friday .key-page-description {
        font-size: .875rem;
        line-height: 1.5;
    }

    .key-detail--friday .benefit-pill {
        font-size: .8125rem;
        line-height: 1.45;
    }

    .key-detail--friday .benefit-pill-featured {
        flex-wrap: wrap;
        align-items: center;
        min-height: 34px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .key-detail--friday .benefit-pill small {
        flex-basis: 100%;
        max-width: none;
        margin: 0;
        font-size: .75rem;
        line-height: 1.45;
        text-align: center;
    }

    .key-detail--friday .key-benefits-visual .key-render {
        width: 180px !important;
    }

    .key-detail--friday .key-payment-options--friday {
        grid-template-columns: minmax(0, 1fr);
    }

    .key-detail--friday .payment-card {
        text-align: center;
    }

    .key-detail--friday .key-price-label,
    .key-detail--friday .payment-card span,
    .key-detail--friday .payment-card small,
    .key-detail--friday .key-value-note p,
    .key-detail--friday .key-economy-row p {
        font-size: .8125rem;
        line-height: 1.45;
    }

    .key-detail--friday .payment-card strong {
        font-size: 1.125rem;
    }

    .key-detail--friday .key-detail-actions .btn {
        font-size: .8125rem;
        line-height: 1.4;
        white-space: normal;
        height: auto;
        min-height: 48px;
    }
}
