/* Lure Digital - Midnight Navy & Gold Theme */
:root {
    --bg-dark: #050711;
    --bg-navy: #0D172A;
    --bg-card: rgba(13, 19, 33, 0.85);
    --primary-gold: #DFB566;
    --gold-mid: #DFB566;      /* faltava: usada 8x no quiz */
    --gold-bright: #F5D38A;
    --gold-dark: #A07B23;
    --gold-gradient: linear-gradient(135deg, #F5D38A 0%, #DFB566 50%, #B88E3E 100%);
    --gold-glow: rgba(223, 181, 102, 0.45);
    --text-light: #FFFFFF;
    --text-muted: #8A96A8;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-gold: rgba(223, 181, 102, 0.25);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 50% 35%, #182946 0%, #0D172A 45%, #050711 85%),
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 44px 44px, 44px 44px;
    background-attachment: fixed;
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Floating Capsule Navbar */
.navbar-wrapper {
    position: sticky;
    top: 20px;
    z-index: 100;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    margin-bottom: -70px;
    pointer-events: none;
}

.navbar-container {
    pointer-events: auto;
    width: 100%;
    max-width: 1100px;
    background: rgba(11, 16, 28, 0.88);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 8px 12px 8px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(223, 181, 102, 0.06);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-logo-mark {
    height: 26px;
    width: auto;
    object-fit: contain;
}

.nav-brand-text {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 2px;
    color: #FFFFFF;
}

.text-gold-light {
    color: #DFB566;
    font-weight: 400;
}

.nav-links {
    display: flex;
    gap: 36px;
}

.nav-links a {
    color: #A0ABC0;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #FFFFFF;
}

.nav-btn-gold {
    font-family: inherit;
    border: none;
    cursor: pointer;
    padding: 10px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, #F5D38A 0%, #C89B3C 100%);
    color: #060913;
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
    box-shadow: 0 0 25px var(--gold-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(223, 181, 102, 0.75);
}

/* Color Accents & Gradients */
.text-gold {
    color: var(--primary-gold);
}

.text-gold-gradient {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.gold-highlight-box {
    display: inline-block;
    background: linear-gradient(135deg, #F5D38A 0%, #D4AF37 50%, #B88E3E 100%);
    color: #060913;
    padding: 2px 14px;
    border-radius: 10px;
    font-weight: 900;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
    -webkit-text-fill-color: initial;
}

.text-gray-dim {
    color: #4b5563; /* dimmed gray */
    font-weight: 800;
}

/* Audience Gold Badge */
.gold-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border-radius: 99px;
    border: 1px solid rgba(223, 181, 102, 0.35);
    background: rgba(223, 181, 102, 0.08);
    color: var(--primary-gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 28px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.badge-dot {
    color: var(--gold-bright);
}

/* Hero Section */
.hero {
    position: relative;
    padding: 160px 0 80px;
    text-align: center;
}

.hero-dual-photos {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 560px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    padding: 0 20px;
    overflow: hidden;
}

.speaker-photo-box {
    position: relative;
    flex: 1;
    height: 100%;
    max-width: 450px;
    overflow: hidden;
    mix-blend-mode: screen;
}

.speaker-photo-box .hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: contrast(1.25) brightness(0.95);
    -webkit-mask-image: radial-gradient(ellipse at center 40%, black 50%, transparent 88%), linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: radial-gradient(ellipse at center 40%, black 50%, transparent 88%), linear-gradient(to bottom, black 60%, transparent 100%);
}

.photo-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75%;
    background: linear-gradient(to bottom, transparent 0%, rgba(5, 7, 17, 0.85) 60%, #050711 100%);
    pointer-events: none;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 2;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-title {
    font-size: clamp(24px, 3.8vw, 44px);
    font-weight: 800;
    line-height: 1.28;
    color: #FFFFFF;
    max-width: 920px;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
    text-align: center;
}

.hero-subtitle {
    font-size: clamp(14.5px, 1.8vw, 17px);
    color: var(--text-muted);
    max-width: 660px;
    margin-bottom: 36px;
    line-height: 1.65;
    text-align: center;
}

.hero-cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Gold Pill Button */
.btn-gold-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    padding: 19px 36px;
    border-radius: 50px;
    background: linear-gradient(135deg, #F5D38A 0%, #C89B3C 100%);
    color: #060913;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 0 35px var(--gold-glow);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: none;
    cursor: pointer;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

.btn-gold-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: rotate(30deg);
    animation: btnShine 4s infinite;
}

@keyframes btnShine {
    0% { transform: translateX(-100%) rotate(30deg); }
    35%, 100% { transform: translateX(100%) rotate(30deg); }
}

.btn-gold-glow:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 0 45px rgba(223, 181, 102, 0.7);
}

.btn-gold-glow:active {
    transform: scale(0.98);
}

.btn-subtext {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 14px;
    max-width: 460px;
    text-align: center;
    line-height: 1.5;
}

/* Foto dos sócios: fundo do hero no desktop, faixa no celular ----------
   É o MESMO elemento nos dois casos. No desktop ele sai do fluxo
   (position:absolute) e vira o fundo da primeira tela; no celular volta pro
   fluxo e aparece depois do CTA, como uma faixa. A ordem no HTML já é a certa
   pro celular, e no desktop o absolute ignora essa ordem.

   As bordas somem por máscara, não por véu de cor: o fundo da página é um
   gradiente radial, então cor chapada deixaria emenda onde a página é mais
   clara. Com máscara o próprio fundo aparece através da transparência. */
.hero-band {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 24px;
    line-height: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
}

.hero-band img {
    display: block;
    width: 100%;
    height: auto;
}

/* Celular: na proporção original (2.37:1) os rostos ficariam com ~60px de
   altura. Recorta pro miolo direito, onde os dois estão. */
@media (max-width: 992px) {
    .hero-band img {
        aspect-ratio: 15 / 11;
        object-fit: cover;
        object-position: 55% 42%;
    }
}

@media (min-width: 993px) {
    /* Foto do time ocupando a metade direita, dissolvendo no navy à esquerda
       — mesmo tratamento da assessorialure.com. A dissolução é por máscara,
       não por véu de cor: o fundo da página é gradiente radial, e cor chapada
       deixaria emenda justamente onde a página é mais clara. */
    .hero-band {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 34%;
        width: auto;
        margin: 0;
        transform: none;
        -webkit-mask-image:
            linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 18%, #000 44%, #000 93%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, #000 10%, #000 72%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 18%, #000 44%, #000 93%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, #000 10%, #000 72%, transparent 100%);
        mask-composite: intersect;
    }

    .hero-band img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 52% 46%;
    }

    /* sombra sobre a foto: garante contraste da headline e mantém o clima escuro */
    .hero-band::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to right,
                rgba(5, 7, 17, 0.92) 0%,
                rgba(5, 7, 17, 0.6) 22%,
                rgba(5, 7, 17, 0.38) 45%,
                rgba(5, 7, 17, 0.34) 100%),
            linear-gradient(to bottom,
                rgba(5, 7, 17, 0.5) 0%,
                rgba(5, 7, 17, 0) 30%,
                rgba(5, 7, 17, 0) 62%,
                rgba(5, 7, 17, 0.9) 100%);
    }

    .hero {
        position: relative;
        overflow: hidden;
        min-height: 700px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 170px 0 0;
    }

    .hero-content {
        width: 100%;
        align-items: flex-start;
        text-align: left;
        z-index: 2;
    }

    .hero-title,
    .hero-subtitle,
    .btn-subtext { text-align: left; }

    .hero-title { max-width: 660px; }
    /* pretty evita a última linha com uma palavra só ("meses." sozinho) */
    .hero-subtitle { max-width: 560px; text-wrap: pretty; }
    .hero-cta { align-items: flex-start; }
    .btn-gold-glow { max-width: 380px; }
    .btn-subtext { max-width: 380px; }

    .slanted-marquees { margin-top: 90px; }
}

/* Slanted Double Gold Marquees */
.slanted-marquees {
    position: relative;
    margin-top: 70px;
    padding: 30px 0;
    overflow: hidden;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.marquee-stripe {
    width: 140vw;
    margin-left: -20vw;
    padding: 13px 0;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 900;
    font-size: 13.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.marquee-stripe-1 {
    background: linear-gradient(90deg, #F5D38A 0%, #D4AF37 50%, #F5D38A 100%);
    color: #060913;
    transform: rotate(-3deg);
    margin-bottom: -18px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

.marquee-stripe-1 .diamond {
    color: #7A5B15;
    margin: 0 8px;
}

.marquee-stripe-2 {
    background: rgba(212, 175, 55, 0.12);
    border-top: 1px solid rgba(212, 175, 55, 0.4);
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
    color: #F5D38A;
    transform: rotate(2deg);
    position: relative;
    z-index: 1;
    backdrop-filter: blur(8px);
}

.marquee-stripe-2 .diamond {
    color: #D4AF37;
    margin: 0 8px;
}

.marquee-content-stripe {
    display: flex;
    gap: 16px;
    align-items: center;
    animation: marqueeLoop 25s linear infinite;
    will-change: transform;
}

.marquee-content-stripe.stripe-reverse {
    animation: marqueeLoopReverse 25s linear infinite;
}

@keyframes marqueeLoop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marqueeLoopReverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Section 2: Os 4 Pilares (Midnight Navy & Gold Theme) */
.pilares-section {
    padding: 90px 0 70px;
    background: transparent;
    text-align: center;
}

.pilares-title {
    font-size: clamp(26px, 3.8vw, 42px);
    font-weight: 900;
    line-height: 1.25;
    color: #FFFFFF;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

.pilares-subtitle {
    font-size: 16.5px;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 60px;
    line-height: 1.65;
}

.pilares-subtitle strong {
    color: #FFFFFF;
    font-weight: 700;
}

.pilares-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 50px;
    text-align: left;
}

.pilares-track {
    display: contents;
}

.mobile-dup {
    display: none;
}

.pillar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: 20px;
    padding: 34px 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
}

.pillar-card:hover {
    transform: translateY(-5px);
    border-color: rgba(223, 181, 102, 0.6);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(223, 181, 102, 0.2);
}

.pillar-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(223, 181, 102, 0.12);
    border: 1px solid rgba(223, 181, 102, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(223, 181, 102, 0.15);
}

.pillar-content {
    display: flex;
    flex-direction: column;
}

.pillar-category {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--primary-gold);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.pillar-card h3 {
    font-size: 21px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.pillar-card p {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* About Section */
.about-section {
    padding: 90px 0;
    background: rgba(11, 16, 32, 0.7);
    border-top: 1px solid var(--border-subtle);
    backdrop-filter: blur(8px);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 50px;
    align-items: center;
}

.about-text-only {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin: 0 auto;
}

/* About Section Dual Speaker Photos */
.about-images-dual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 480px;
    align-items: center;
}

.about-speaker-box {
    position: absolute;
    overflow: hidden;
}

.about-speaker-box:first-child {
    bottom: 0;
    left: -20px;
    width: 68%;
    height: 80%;
    z-index: 2;
}

.about-speaker-box:last-child {
    top: 0;
    right: -20px;
    width: 60%;
    height: 70%;
    z-index: 1;
}

.about-speaker-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    mix-blend-mode: luminosity;
    filter: contrast(1.2) brightness(0.9);
    -webkit-mask-image:
        radial-gradient(ellipse at 50% 35%, black 40%, transparent 80%),
        linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image:
        radial-gradient(ellipse at 50% 35%, black 40%, transparent 80%),
        linear-gradient(to bottom, black 50%, transparent 100%);
}

.about-speaker-dark {
    mix-blend-mode: screen !important;
    filter: contrast(1.35) brightness(1.05) !important;
}

.about-content {
    text-align: left;
}

.text-left {
    text-align: left;
}

.about-text {
    font-size: 15.5px;
    color: #CBD5E1;
    margin-bottom: 18px;
    line-height: 1.7;
}

.about-text strong {
    color: #FFFFFF;
    font-weight: 700;
}

.brand-logo-wrapper {
    margin-top: 24px;
}

.brand-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
    filter: invert(1) brightness(2);
}

/* Footer */
footer {
    padding: 36px 0;
    text-align: center;
    border-top: 1px solid var(--border-subtle);
    color: #556275;
    font-size: 13.5px;
    background: #04060C;
}

/* Responsive Media Queries */
@media (max-width: 992px) {
    .nav-links {
        display: none;
    }

    /* Navbar de uma linha só.
       Ela é sticky e o wrapper puxa o conteúdo pra cima com margem negativa;
       se a barra cresce de altura, ela passa a cobrir o conteúdo. Por isso
       tudo aqui existe pra manter a altura fixa: nada pode quebrar linha. */
    .navbar-wrapper { top: 12px; padding: 0 14px; margin-bottom: -62px; }
    .navbar-container { padding: 7px 7px 7px 15px; border-radius: 18px; gap: 10px; }
    .nav-logo-mark { height: 23px; }
    .nav-brand { gap: 8px; }
    .nav-brand-text { font-size: 13.5px; letter-spacing: 1.4px; white-space: nowrap; }
    .nav-btn-gold { padding: 10px 17px; font-size: 12.5px; white-space: nowrap; }

    /* No celular a foto abre o hero, igual à assessorialure: ela sangra no
       topo, a navbar flutua por cima e o texto vem embaixo.
       A ordem no HTML continua a do desktop (texto, foto, fitas) — aqui só
       o `order` do flex reposiciona, sem duplicar marcação. */
    .hero {
        display: flex;
        flex-direction: column;
        padding: 0 0 0;
    }
    .hero-band { order: -1; margin-top: 0; }
    .hero-content { padding-top: 30px; }

    /* no topo da página o esmaecimento superior mostraria o fundo acima da
       foto; aqui ela encosta na borda e só a base dissolve */
    .hero-band {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
    }
    .hero-band img { aspect-ratio: 15 / 12; object-position: 55% 38%; }

    /* fitas mais baixas e menos sobrepostas: em tela estreita a inclinação
       de 3° come muito mais altura proporcionalmente */
    .slanted-marquees { margin-top: 34px; padding: 18px 0; }
    .marquee-stripe { padding: 10px 0; }
    .marquee-stripe-1 { transform: rotate(-2deg); margin-bottom: -12px; }
    .marquee-stripe-2 { transform: rotate(1.4deg); }



    .pilares-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 10px 20px 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
    }

    .pilares-grid::-webkit-scrollbar {
        display: none;
    }

    .pillar-card {
        flex: 0 0 78vw;
        max-width: 320px;
        scroll-snap-align: center;
        padding: 24px 20px;
    }

    /* o vão depois do carrossel vinha desta margem, pensada pro grid 2x2 */
    .pilares-grid { margin-bottom: 8px; }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about-images-dual {
        height: 360px;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .about-content {
        text-align: center;
    }

    .text-left {
        text-align: center;
    }
}

@media (max-width: 600px) {
    /* `.hero-content { margin-top: -100px }` morava aqui e vinha de um layout
       antigo com foto acima do texto. Sem aquela foto, ela só puxava o badge
       e a headline pra debaixo da navbar. Removida. */

    /* só o símbolo na navbar: libera espaço pro botão caber inteiro numa linha */
    .nav-brand-text { display: none; }
    .navbar-container { padding: 7px 7px 7px 12px; }
    .nav-logo-mark { height: 26px; }
    .nav-btn-gold { padding: 11px 20px; font-size: 13px; }

    .gold-badge {
        font-size: 9.5px;
        letter-spacing: 1px;
        padding: 7px 15px;
        margin-bottom: 22px;
    }

    .hero-content { padding-top: 26px; }
    .hero-title {
        font-size: 23px;
        line-height: 1.32;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .btn-gold-glow {
        font-size: 15.5px;
        padding: 17px 26px;
    }

    .slanted-marquees {
        margin-top: 40px;
    }

    .marquee-stripe {
        font-size: 12px;
        letter-spacing: 1.5px;
        padding: 11px 0;
    }

    .pilares-section, .about-section {
        padding: 44px 0 56px;
    }

    /* o card seguinte espia na borda: mostra que a fileira arrasta */

    .pilares-title {
        font-size: 22px;
        margin-bottom: 14px;
    }
}

/* ===== QUIZ MODAL — mesmo padrão do pop-up da assessorialure.com =====
   Card claro sobre fundo escurecido, barra de progresso no topo e uma
   pergunta por vez. As opções são cartões com marcador circular dourado. */
.quiz-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 20, 34, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}
.quiz-overlay.active { display: flex; }

.quiz-modal {
    position: relative;
    background: #fff;
    border: 1px solid #CFCFCF;
    border-radius: 10px;
    width: 100%;
    max-width: 520px;
    margin: auto;
    padding: 40px;
    box-shadow: 0 24px 60px rgba(2, 20, 34, 0.45);
    animation: quizSobe .3s cubic-bezier(.2, .8, .2, 1);
    scrollbar-width: none;
}
.quiz-modal::-webkit-scrollbar { display: none; }
@keyframes quizSobe {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.quiz-header { margin-bottom: 4px; }
.quiz-brand {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #0B1120;
}
.quiz-brand span {
    background: linear-gradient(-45deg, var(--gold-bright), var(--gold-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quiz-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9aa2b1;
    font-size: 22px;
    line-height: 0;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.quiz-close:hover { background: rgba(223, 181, 102, .16); color: var(--gold-dark); }

/* ---------- barra de progresso ---------- */
.quiz-progresso { margin: 22px 0 26px; }
.quiz-progresso__trilho {
    height: 6px;
    border-radius: 99px;
    background: #EAEAEA;
    overflow: hidden;
}
.quiz-progresso__barra {
    display: block;
    height: 100%;
    width: 20%;
    border-radius: 99px;
    background-image: linear-gradient(-45deg, var(--gold-bright), var(--gold-dark));
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.quiz-progresso__texto {
    margin: 9px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .3px;
    color: #8A93A6;
}

/* ---------- passos ---------- */
.quiz-passo { display: none; }
.quiz-passo.active { display: block; animation: quizPasso .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes quizPasso {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
}

.quiz-passo-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gold-dark);
    margin-bottom: 10px;
    text-transform: uppercase;
}
.quiz-passo h2 {
    font-size: 21px;
    font-weight: 700;
    color: #0B1120;
    margin-bottom: 6px;
    line-height: 1.3;
}
.quiz-passo-sub {
    font-size: 14px;
    color: #6a7280;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ---------- opções: cartão + marcador circular ---------- */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.quiz-option {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    margin: 0;
    border: 1.5px solid #E4E4E4;
    border-radius: 10px;
    background: #fff;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.35;
    color: #0B1120;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.quiz-option:hover { border-color: var(--gold-bright); background: #FDFAF3; }

/* o input real some da vista mas continua acessível pelo teclado */
.quiz-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.quiz-mark {
    display: block;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    border: 2px solid #CFCFCF;
    border-radius: 50%;
    position: relative;
    transition: border-color .18s ease;
}
.quiz-mark::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: linear-gradient(-45deg, var(--gold-bright), var(--gold-dark));
    transform: scale(0);
    transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.quiz-option:has(input:checked) {
    border-color: var(--gold-bright);
    background: #FBF5E9;
    box-shadow: 0 0 0 3px rgba(223, 181, 102, .18);
}
.quiz-option:has(input:checked) .quiz-mark { border-color: var(--gold-dark); }
.quiz-option:has(input:checked) .quiz-mark::after { transform: scale(1); }
.quiz-option:has(input:focus-visible) {
    border-color: var(--gold-dark);
    box-shadow: 0 0 0 3px rgba(223, 181, 102, .3);
}
/* navegadores sem :has() — o JS aplica esta classe */
.quiz-option.escolhida {
    border-color: var(--gold-bright);
    background: #FBF5E9;
    box-shadow: 0 0 0 3px rgba(223, 181, 102, .18);
}
.quiz-option.escolhida .quiz-mark { border-color: var(--gold-dark); }
.quiz-option.escolhida .quiz-mark::after { transform: scale(1); }

/* ---------- campos ---------- */
.quiz-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.quiz-input {
    width: 100%;
    background: #F4F5F7;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 16px;
    color: #0B1120;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.quiz-input::placeholder { color: #8b8b8b; }
.quiz-input:focus {
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 3px rgba(223, 181, 102, .22);
}

/* ---------- navegação ---------- */
.quiz-nav { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.quiz-next-btn {
    flex: 1 1 190px;
    min-width: 0;
    border: 0;
    padding: 17px 22px;
    border-radius: 5px;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    background-image: linear-gradient(-45deg, #DBB25C, #A88945, #DBB25C, #A88945, #DBB25C, #A88945);
    background-size: 300% 300%;
    box-shadow: 0 6px 20px rgba(219, 178, 92, .28);
    transition: background-position .5s ease, filter .2s ease, transform .15s ease;
}
.quiz-next-btn:hover { background-position: 100% 50%; filter: brightness(1.06); }
.quiz-next-btn:active { transform: translateY(1px); }
.quiz-back-btn {
    flex: 0 0 auto;
    padding: 17px 22px;
    border: 1px solid #DDD;
    border-radius: 5px;
    background: #fff;
    color: #6a7280;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.quiz-back-btn:hover { border-color: var(--gold-bright); color: #0B1120; background: #FCF8F0; }
.quiz-submit-btn {
    background-image: linear-gradient(-45deg, #22c55e, #16a34a, #22c55e, #16a34a) !important;
    background-size: 300% 300% !important;
    box-shadow: 0 6px 20px rgba(34, 197, 94, .3) !important;
}

/* ---------- confirmação ---------- */
.quiz-final { text-align: center; padding: 12px 0; }
.quiz-check {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(-45deg, var(--gold-bright), var(--gold-dark));
    color: #fff; font-size: 30px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.quiz-final h2 { margin-bottom: 12px; color: #0B1120; }
.quiz-final p { color: #6a7280; font-size: 15px; margin-bottom: 24px; line-height: 1.6; }
.quiz-footer-info { font-size: 12px; color: #98A0AE; text-align: center; margin-top: 24px; }

@media (max-width: 600px) {
    .quiz-modal { padding: 28px 20px; }
    .quiz-passo h2 { font-size: 19px; }
    .quiz-brand { font-size: 22px; }
}

/* ---------------------------------------------------------------------
   Telas estreitas (iPhone SE e similares, 320-360px).
   Aqui o problema não é layout, é texto que não cabe: o rótulo do CTA
   quebrava deixando a seta sozinha na segunda linha, e o badge partia
   em duas deixando o ponto dourado órfão na lateral.
   --------------------------------------------------------------------- */
@media (max-width: 380px) {
    .btn-gold-glow {
        font-size: 14px;
        padding: 16px 20px;
        letter-spacing: 0;
    }

    .gold-badge {
        font-size: 8.8px;
        letter-spacing: .7px;
        padding: 7px 13px;
    }
    /* em duas linhas o ponto fica solto no meio da lateral esquerda */
    .badge-dot { display: none; }

    .hero-title { font-size: 21px; }
    .nav-btn-gold { padding: 10px 16px; font-size: 12px; }
    .pillar-card { flex-basis: 82vw; }
}