:root{
    --blue:#0649a0;
    --blue-deep:#003b86;
    --blue-dark:#07327d;
    --blue-footer:#063b8d;
    --navy:#102d86;
    --green:#4c9638;
    --green-dark:#367f27;
    --green-light:#f2f8ec;
    --yellow:#ffda16;
    --orange:#f26b22;
    --red:#e5433e;
    --text:#15315e;
    --muted:#5b6c82;
    --line:#d9dfdf;
    --white:#ffffff;
    --soft:#f7f8fa;
    --shell:1180px;
    --radius:16px;
    --shadow:0 14px 32px rgba(0,39,96,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,Arial,Helvetica,sans-serif;
    background:#fff;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}
.shell{width:min(calc(100% - 36px),var(--shell));margin-inline:auto}

/* HEADER */
.site-header{
    height:80px;
    background:#fff;
    border-bottom:1px solid #e6ebf0;
    position:sticky;
    top:0;
    z-index:100;
}
.header-inner{
    height:100%;
    display:flex;
    align-items:center;
    gap:24px;
}
.brand-lockup{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:255px;
}
.brand-logo{
    width:117px;
    height:60px;
    object-fit:contain;
}
.brand-divider{
    width:1px;
    height:42px;
    background:#d7dce3;
}
.official-product{
    display:flex;
    flex-direction:column;
    gap:2px;
    color:#21458f;
    line-height:1.05;
}
.official-product small{
    color:#667893;
    font-size:9px;
}
.official-product strong{
    font-size:10px;
    text-transform:uppercase;
}
.official-product img{
    width:95px;
    max-height:40px;
    object-fit:contain;
}

.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    margin-left:auto;
}
.main-nav a{
    height:80px;
    display:flex;
    align-items:center;
    position:relative;
    font-size:13px;
    font-weight:600;
    color:#24354d;
    white-space:nowrap;
}
.main-nav a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:19px;
    height:2px;
    background:transparent;
}
.main-nav a:hover::after,
.main-nav a.is-active::after{background:#70af44}

.header-actions{
    display:flex;
    gap:12px;
    margin-left:18px;
}
.btn{
    border:0;
    border-radius:8px;
    min-height:42px;
    padding:0 17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:800;
    font-size:13px;
    transition:.18s ease;
    cursor:pointer;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.02)}
.btn-green{background:#4c933a;color:#fff}
.btn-navy{background:#102d86;color:#fff}
.btn-yellow{background:var(--yellow);color:#183369;box-shadow:0 5px 12px rgba(255,218,22,.23)}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.55);color:#fff}
.btn-lg{min-height:52px;padding-inline:28px;font-size:15px}
.nav-toggle{display:none}

/* ATALHO DA CONTA no cabeçalho (27/08/2026).
   No computador é ícone + rótulo; no celular sobra só o ícone (a regra fica na
   faixa de 920px, mais abaixo), porque ao lado do "Comprar cartela" não cabem
   dois botões escritos. */
.btn-conta{gap:8px}
.btn-conta__icone{
    display:inline-flex;
    width:17px;height:17px;
    flex:0 0 auto;
}
.btn-conta__icone svg{width:100%;height:100%}

/* HERO */
.hero{
    min-height:462px;
    color:#fff;
    background:
        linear-gradient(90deg,rgba(0,57,137,.10),rgba(0,57,137,.04)),
        url("../backgrounds/hero-background.png") center/cover no-repeat;
}
.hero-grid{
    min-height:462px;
    display:grid;
    grid-template-columns:43% 57%;
    align-items:center;
}
.hero-copy{
    padding:36px 44px 32px 0;
}
.hero-copy h1{
    margin:0 0 18px;
    max-width:440px;
    color:#fff;
    font-size:46px;
    line-height:1.04;
    letter-spacing:-1.6px;
    font-weight:900;
}
.hero-copy h1 span{display:block;color:var(--yellow)}
.hero-copy>p{
    margin:0;
    max-width:440px;
    font-size:17px;
    line-height:1.65;
    color:#f2f7ff;
}
.hero-benefits{
    margin-top:24px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:rgba(0,50,129,.42);
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    overflow:hidden;
}
.hero-benefit{
    min-height:66px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 13px;
    border-right:1px solid rgba(255,255,255,.10);
}
.hero-benefit:last-child{border-right:0}
.hero-benefit strong{font-size:11px;line-height:1.35}
.hero-benefit-icon{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    color:#fff;
    flex:0 0 auto;
}
.hero-benefit-icon img{
    width:28px;
    height:28px;
    filter:brightness(0) invert(1);
}
.hero-benefit-icon--clover{
    font-size:29px;
}
.hero-actions{
    display:flex;
    gap:15px;
    margin-top:28px;
}
.age-note{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:24px;
    font-size:12px;
    color:#eaf2ff;
}
.shield-mini{
    width:20px;
    height:22px;
    display:grid;
    place-items:center;
    border:1.5px solid #fff;
    border-radius:6px 6px 9px 9px;
    font-size:11px;
}
.hero-campaign{
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:14px 0 14px 20px;
}
.campaign-card{
    width:auto;
    height:430px;
    max-width:100%;
    object-fit:contain;
    border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

/* GLOBAL SECTIONS */
.section{padding:28px 0 38px}
.section-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:0 0 20px;
}
.section-title h2{
    margin:0;
    color:#123681;
    font-size:28px;
    line-height:1.1;
    letter-spacing:-.6px;
    text-align:center;
}
.section-title-line{
    width:35px;
    height:2px;
    background:#6ab144;
}
.section-intro{
    margin:-9px auto 20px;
    text-align:center;
    font-size:13px;
    color:#30445d;
}

/* COMO FUNCIONA */
.how-section{background:#fff;padding-top:30px}
.how-grid{
    display:grid;
    grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;
    gap:13px;
    align-items:center;
}
.how-card{
    min-height:132px;
    border:1px solid #d8ddd9;
    border-radius:12px;
    padding:14px 13px 13px;
    position:relative;
    text-align:center;
    background:#fff;
}
.how-number{
    position:absolute;
    left:11px;
    top:10px;
    width:23px;
    height:23px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#3d8d2d;
    color:#fff;
    font-size:11px;
    font-weight:900;
}
.how-icon{
    width:50px;
    height:50px;
    margin:2px auto 7px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#eff7e8;
}
.how-icon img{
    width:27px;
    height:27px;
    opacity:.95;
}
.how-card h3{
    margin:0 0 5px;
    font-size:13px;
    color:#173886;
}
.how-card p{
    margin:0;
    font-size:10.5px;
    line-height:1.35;
    color:#26364c;
}
.step-arrow{
    color:#61ae37;
    font-size:38px;
    font-weight:300;
    text-align:center;
}

/* SONHOS */
.dreams-section{
    background:
        radial-gradient(circle at 8% 15%,rgba(94,174,55,.08),transparent 16%),
        radial-gradient(circle at 95% 75%,rgba(94,174,55,.08),transparent 18%),
        #f5faef;
    padding-top:18px;
}
.dream-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.dream-card{text-align:center}
.dream-media{
    position:relative;
    border-radius:14px;
    overflow:visible;
}
.dream-media picture,
.dream-media picture img{
    width:100%;
    display:block;
}
.dream-media picture img{
    width:100%;
    aspect-ratio:7 / 4;
    height:auto;
    object-fit:cover;
    border-radius:14px;
    border:3px solid #fff;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.dream-icon{
    position:absolute;
    left:50%;
    bottom:-23px;
    transform:translateX(-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:4px solid #f5faef;
}
.dream-icon img{
    width:25px;
    height:25px;
    filter:brightness(0) invert(1);
}
.dream-icon--green{background:#69b832}
.dream-icon--yellow{background:#f2b928}
.dream-icon--blue{background:#24a0d9}
.dream-icon--red{background:#e54848}
.dream-card h3{
    margin:31px 0 4px;
    color:#143a88;
    font-size:15px;
}
.dream-card p{
    margin:0 auto;
    max-width:235px;
    min-height:44px;
    color:#24384c;
    font-size:10.5px;
    line-height:1.42;
}

/* PREMIAÇÃO */
.prizes-section{background:#fff;padding-top:21px}
.prizes-board{
    display:grid;
    grid-template-columns:3.7fr 1.15fr 1.15fr 1.1fr 1.15fr 1.2fr;
    min-height:190px;
    border:1px solid #d8dde4;
    border-radius:13px;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(18,51,103,.04);
}
.first-prize{
    position:relative;
    min-width:0;
    background:linear-gradient(180deg,#fff,#fbfbfb);
    display:grid;
    grid-template-columns:44% 56%;
    align-items:end;
    padding:25px 8px 0 14px;
    overflow:hidden;
}
.prize-ribbon{
    position:absolute;
    left:0;
    top:0;
    background:#173d98;
    color:#fff;
    padding:7px 20px 7px 14px;
    font-weight:900;
    font-size:13px;
    transform:skewX(-10deg);
    transform-origin:left top;
}
.first-prize-copy{
    align-self:center;
    z-index:2;
    padding-top:10px;
}
.first-prize-copy h3{
    margin:0 0 12px;
    color:#173b8e;
    font-size:22px;
    line-height:1.08;
}
.first-prize-copy p{
    margin:0;
    color:#18325d;
    font-size:10.5px;
    line-height:1.4;
}
.first-prize-copy p strong{font-size:12px}
.first-prize-car{
    align-self:end;
    justify-self:end;
    width:100%;
    max-width:365px;
    height:155px;
    object-fit:contain;
    object-position:center bottom;
    margin-bottom:-1px;
}
.mini-prize{
    position:relative;
    min-width:0;
    padding:46px 9px 12px;
    border-left:1px solid #d9dfe7;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#fff;
}
.mini-prize-head{
    position:absolute;
    top:0;
    left:0;
    right:0;
    min-height:34px;
    padding:8px 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1d2f91;
    color:#fff;
    font-size:10px;
    font-weight:900;
}
.mini-prize>strong{
    color:#123b8c;
    font-size:23px;
    line-height:1.05;
    text-transform:uppercase;
}
.plus-extra{
    margin-top:8px;
    color:#66a637;
    font-size:12px;
    font-weight:900;
    line-height:1.05;
}
.mini-prize small{
    margin-top:2px;
    font-size:8px;
    font-weight:900;
    color:#263c77;
}
.mini-prize--extra{
    color:#fff;
    background:#13368e;
}
.mini-prize--extra .mini-prize-head{background:#24238c}
.mini-prize--extra>strong{
    color:#fff;
    font-size:18px;
}
.money-art{
    font-size:31px;
    margin-top:8px;
}
.giro-mark{
    margin-bottom:7px;
    color:#149cd3;
    font-size:15px;
    line-height:.84;
    font-weight:1000;
    text-shadow:0 1px #fff;
}
.bolada-icon{
    width:44px;
    height:44px;
    margin-bottom:5px;
    border:3px solid #e5a83f;
    color:#e5a83f;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:22px;
}
.mini-prize:last-child small{
    color:#223862;
    font-size:8px;
    line-height:1.2;
    font-weight:700;
}

/* RAZÕES */
.reasons-section{
    background:#fafafa;
    padding-top:23px;
    padding-bottom:27px;
}
.reasons-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
}
.reason-item{
    min-height:126px;
    padding:0 24px;
    text-align:center;
    border-right:1px solid #e1e4e8;
}
.reason-item:last-child{border-right:0}
.reason-icon{
    width:47px;
    height:47px;
    margin:0 auto 5px;
    display:grid;
    place-items:center;
}
.reason-icon img{width:42px;height:42px}
.reason-item:nth-child(2) .reason-icon img{filter:hue-rotate(25deg) saturate(1.8)}
.reason-item:nth-child(3) .reason-icon img{filter:hue-rotate(115deg) saturate(2)}
.reason-item:nth-child(4) .reason-icon img{filter:hue-rotate(310deg) saturate(2)}
.reason-item h3{
    margin:0 0 5px;
    color:#4e9a38;
    font-size:13px;
}
.reason-item p{
    margin:0;
    color:#314258;
    font-size:10px;
    line-height:1.45;
}

/* HISTÓRIAS */
.stories-section{
    position:relative;
    background:#073d95;
    color:#fff;
    padding:17px 0 0;
    border-radius:38px 38px 0 0;
}
.stories-section h2{
    text-align:center;
    margin:0 0 14px;
    font-size:25px;
    letter-spacing:-.4px;
}
.stories-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
}
.story-card{
    min-height:91px;
    background:#fff;
    color:#1e355b;
    border-radius:22px;
    padding:11px 16px 11px 12px;
    display:grid;
    grid-template-columns:62px 1fr;
    gap:13px;
    align-items:center;
}
.story-avatar{
    width:57px;
    height:57px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#f1c8a3,#805448);
    color:#fff;
    font-size:25px;
    font-weight:900;
}
.story-card p{
    margin:0 0 4px;
    font-size:10.5px;
    line-height:1.35;
}
.story-card strong{
    color:#133780;
    font-size:9.5px;
}
.stories-cta{
    min-height:62px;
    margin-top:16px;
    border-radius:9px 9px 0 0;
    padding:8px 14px;
    background:linear-gradient(90deg,#4b9a36,#70aa2d);
    display:grid;
    grid-template-columns:55px 1fr auto;
    gap:12px;
    align-items:center;
}
.stories-cta-icon{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:#5cad3b;
    font-size:24px;
}
.stories-cta strong{
    display:block;
    margin-bottom:2px;
    font-size:15px;
}
.stories-cta span{
    display:block;
    font-size:11px;
    color:#eef9e8;
}

/* FOOTER */
.site-footer{
    background:#06398a;
    color:#fff;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.55fr repeat(4,1fr);
    gap:34px;
    padding:27px 0 22px;
}
.footer-brand>img{
    width:112px;
    margin-bottom:7px;
}
.footer-brand p{
    max-width:210px;
    margin:0 0 10px;
    color:#dce7fb;
    font-size:9px;
    line-height:1.5;
}
.social-row{display:flex;gap:9px}
.social-row a{
    width:27px;
    height:27px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    color:#0b3d8c;
    font-size:13px;
    font-weight:900;
}
.footer-col strong{
    display:block;
    margin-bottom:8px;
    font-size:12px;
}
.footer-col a,
.footer-col span{
    display:block;
    margin:5px 0;
    color:#dce7fb;
    font-size:9px;
    line-height:1.35;
}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.18);
    padding:10px 0;
}
.footer-bottom .shell{
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#d6e1f4;
    font-size:8.5px;
}

/* RESPONSIVO */
@media (max-width:1080px){
    .main-nav{gap:17px}
    .main-nav a{font-size:11px}
    .header-actions{margin-left:6px}
    .btn{padding-inline:12px}
    .hero-copy h1{font-size:40px}
    .hero-copy>p{font-size:15px}
    .campaign-card{height:390px}
}

@media (max-width:920px){
    .site-header{height:70px}
    .header-inner{height:70px}
    .brand-lockup{min-width:0}
    .brand-logo{width:96px;height:52px}
    .brand-divider,.official-product{display:none}
    .header-actions{margin-left:auto;gap:8px}

    /* O atalho da conta NÃO some mais no celular (pedido dele, 27/08/2026):
       ele encolhe para um quadrado só com o ícone. Antes era `display:none`, e
       o cliente logado tinha de rolar a página inteira até o rodapé para voltar
       à conta dele. */
    .header-actions .btn-navy{
        width:40px;
        min-height:40px;
        padding-inline:0;
    }
    .btn-conta__rotulo{display:none}
    .btn-conta__icone{width:19px;height:19px}

    .nav-toggle{
        width:42px;height:42px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        order:3;
        border:0;
        background:transparent;
        padding:7px;
    }
    .nav-toggle span{height:2px;width:25px;background:#123a82;margin-inline:auto}

    .main-nav{
        position:absolute;
        left:0;right:0;top:70px;
        display:none;
        padding:16px 18px;
        background:#fff;
        box-shadow:0 15px 24px rgba(0,0,0,.08);
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }
    .main-nav.is-open{display:flex}
    .main-nav a{
        height:auto;
        padding:12px 5px;
        border-bottom:1px solid #edf0f3;
    }
    .main-nav a::after{display:none}

    .hero-grid{
        grid-template-columns:1fr;
        padding-block:28px;
    }
    .hero-copy{
        padding:5px 0 18px;
        text-align:center;
    }
    .hero-copy h1,.hero-copy>p{margin-inline:auto}
    .hero-benefits{max-width:540px;margin-inline:auto}
    .hero-actions{justify-content:center}
    .age-note{justify-content:center}
    .hero-campaign{padding:5px 0 15px;justify-content:center}
    .campaign-card{height:auto;max-height:620px;width:min(720px,100%)}

    .how-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }
    .step-arrow{display:none}

    .dream-grid{grid-template-columns:repeat(2,1fr)}
    .dream-media picture img{height:auto}

    .prizes-board{
        grid-template-columns:repeat(2,1fr);
        border:0;
        gap:13px;
        box-shadow:none;
        overflow:visible;
    }
    .first-prize{
        grid-column:1/-1;
        min-height:250px;
        border:1px solid #d8dde4;
        border-radius:13px;
    }
    .mini-prize{
        min-height:185px;
        border:1px solid #d8dde4;
        border-radius:13px;
        overflow:hidden;
    }

    .reasons-grid{grid-template-columns:repeat(3,1fr);gap:22px 0}
    .reason-item:nth-child(3){border-right:0}
    .reason-item:nth-child(4){border-right:1px solid #e1e4e8}

    .stories-grid{grid-template-columns:1fr}
    .story-card{min-height:78px}
    .footer-grid{grid-template-columns:1.5fr repeat(2,1fr)}
}

@media (max-width:620px){
    .shell{width:min(calc(100% - 26px),var(--shell))}
    .header-actions .btn-green{min-height:38px;font-size:11px;padding-inline:10px}
    .header-actions .btn-icon{display:none}

    /* Mesma altura do "Comprar cartela" — dois botões vizinhos de alturas
       diferentes ficam tortos na faixa do cabeçalho. */
    .header-actions .btn-navy{width:38px;min-height:38px}

    .hero-copy h1{
        font-size:37px;
        letter-spacing:-1.1px;
    }
    .hero-copy>p{font-size:14px}
    .hero-benefits{grid-template-columns:1fr}
    .hero-benefit{justify-content:center;border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
    .hero-benefit:last-child{border-bottom:0}
    .hero-actions{flex-direction:column}
    .btn-lg{width:100%}

    .section{padding:27px 0 34px}
    .section-title h2{font-size:24px}
    .section-title-line{width:22px}

    .how-grid{grid-template-columns:1fr}
    .how-card{min-height:125px}

    .dream-grid{grid-template-columns:1fr}
    .dream-media picture img{height:auto}

    .prizes-board{grid-template-columns:1fr}
    .first-prize{
        display:flex;
        flex-direction:column;
        padding:52px 14px 0;
        text-align:center;
    }
    .first-prize-copy{align-self:center}
    .first-prize-car{
        height:auto;
        max-height:200px;
        margin:12px auto 0;
    }

    .reasons-grid{grid-template-columns:1fr}
    .reason-item{
        min-height:auto;
        border-right:0!important;
        padding:12px 0;
        border-bottom:1px solid #e1e4e8;
    }
    .reason-item:last-child{border-bottom:0}

    .stories-section{border-radius:24px 24px 0 0}
    .stories-section h2{font-size:21px}
    .story-card{
        grid-template-columns:50px 1fr;
        border-radius:16px;
    }
    .story-avatar{width:47px;height:47px}
    .stories-cta{
        grid-template-columns:45px 1fr;
        padding:12px;
    }
    .stories-cta .btn{grid-column:1/-1;width:100%}

    .footer-grid{grid-template-columns:1fr 1fr;gap:25px}
    .footer-brand{grid-column:1/-1}
    .footer-bottom .shell{flex-direction:column;text-align:center;gap:5px}
}
/* ==========================================================================
   ACRÉSCIMOS DO SISTEMA (16/08/2026)

   O CSS acima é o do PACOTE DE ARTE V5 e está intacto — mexer nele faria a
   próxima versão do pacote entrar em conflito com o que escrevemos. Daqui
   para baixo ficam só os blocos que o pacote não traz, escritos no mesmo
   vocabulário de classes:

     · a tarja de PRÉVIA da sede;
     · os vídeos dos GANHADORES (o pacote trazia depoimentos em texto);
     · os dois caminhos de COMPRA;
     · o botão "Minha conta" no cabeçalho.
   ========================================================================== */

/* --- Tarja da prévia ---------------------------------------------------- */
.previa{
    background:#12224a;
    color:#dbe6f7;
    font-size:13px;
}
.previa .shell{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:9px 0;
}
.previa b{color:var(--yellow)}
.previa a{
    margin-left:auto;
    color:#fff;
    text-decoration:underline;
}

/* --- Ganhadores em vídeo ------------------------------------------------
   O card do pacote é um depoimento em texto. Aqui ele vira um vídeo do
   YouTube: mesma moldura, mesma grade, mesmo espaçamento — o que muda é o
   miolo. A proporção 16:9 é fixa porque é a do próprio YouTube; sem ela o
   quadro deforma no celular.                                              */
.winner-card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    /* Em fundo branco a sombra pesada some: quem separa o card agora é a
       borda, com uma sombra leve só para dar relevo. */
    border:1px solid var(--line);
    box-shadow:0 6px 18px rgba(0,39,96,.07);
    display:flex;
    flex-direction:column;
}
.winner-video{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#0b1c3d;
}
.winner-video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}
.winner-body{padding:14px 16px 16px}
.winner-body strong{
    display:block;
    color:var(--text);
    font-size:15px;
}
.winner-body span{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:13px;
}
/* Sem vídeo cadastrado o bloco inteiro some — moldura vazia na home é pior
   do que seção a menos. */
.winners-vazio{
    text-align:center;
    color:#cfdcf3;
    font-size:14px;
    padding:6px 0 2px;
}

/* --- Faixa de prêmios sem prêmio extra -----------------------------------
   A grade do pacote tem 6 colunas (1º prêmio + cinco). Quando a extração não
   tem premio extra sao cinco cards, e sem isto sobraria um vao em branco no
   fim da faixa.                                                            */
.prizes-board--sem-extra{grid-template-columns:3.7fr 1.3fr 1.3fr 1.35fr 1.4fr}

@media(max-width:1000px){
    .prizes-board--sem-extra{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
    .prizes-board--sem-extra{grid-template-columns:1fr}
}

/* --- Faixa de premiação: a arte oficial (17/08/2026) ---------------------

   O CSS do pacote está intacto acima; aqui a faixa é acertada pela arte que
   ele mandou de referência:

     1. o CARRO à esquerda e o texto à direita (estava invertido);
     2. o SACO DE DINHEIRO no miolo dos quatro cards de valor;
     3. todos os cards com o mesmo cartão branco — nenhum "selecionado";
     4. a quantidade de giros subiu para o título ("15 GIROS DA SORTE");
     5. a BOLADA com as bolas coloridas de sorteio, a 19 na frente.
   ------------------------------------------------------------------------ */

/* 1. O card do 1º prêmio: prêmio em cima, CARRO GRANDE embaixo.

      Ele marcou os dois quadrantes na tela (17/08): o texto do prêmio na faixa
      que sobra ao lado da tarja "1º PRÊMIO", e o carro ocupando o retângulo
      inteiro debaixo. O carro é o que vende a extração — encolhido na metade
      do card ele não aparecia.

      A grade de duas colunas do pacote sai de cena aqui; vira uma pilha. */
.first-prize{
    display:flex;
    flex-direction:column;
    /* O `align-items:end` do pacote era para a grade de duas colunas; numa
       pilha ele jogaria tudo para a direita. */
    align-items:stretch;
    gap:2px;
    padding:12px 12px 0;
}
.first-prize-copy{
    /* Recuo à esquerda do tamanho da tarja, senão o título passa por baixo
       dela. A tarja é `position:absolute` e não empurra nada. */
    align-self:stretch;
    padding:5px 4px 0 118px;
    text-align:center;
}
.first-prize-copy h3{
    margin:0;
    /* Cabe em uma linha no prêmio típico ("01 HB20 Sedan + 50 mil reais");
       prêmio mais comprido quebra em duas, e o carro acompanha. */
    font-size:20px;
    line-height:1.15;
}
.first-prize-car{
    align-self:center;
    justify-self:center;
    width:100%;
    max-width:none;
    height:auto;
    max-height:172px;
    margin-top:auto;
    object-fit:contain;
    object-position:center bottom;
}

/* 2. O saco de dinheiro.

      É a mesma imagem nos quatro cards — o navegador baixa uma vez. Entra como
      `aria-hidden`: quem usa leitor de tela ouve o rótulo e o valor, e não
      "imagem de saco de dinheiro" quatro vezes seguidas.

      A altura é fixa para os quatro cards fecharem a mesma linha de base, com
      `object-fit:contain` para o desenho nunca deformar. */
.prize-bag{
    width:auto;
    max-width:96%;
    height:92px;
    margin-bottom:7px;
    object-fit:contain;
}

/* 3. A faixa fica um pouco mais alta: agora cada card tem título, arte e
      valor. Sem isto o saco espremeria o número. */
.prizes-board{min-height:232px}
.mini-prize{padding:44px 7px 16px}

/* Títulos como "15 GIROS DA SORTE" e "BOLADA DA SORTE" são longos: apertar o
   espaçamento os mantém em uma linha só, como na arte. */
.mini-prize-head{
    padding-inline:3px;
    letter-spacing:-.1px;
    line-height:1.1;
}

/* 4. Nenhum card destacado: o prêmio extra usa o mesmo cartão dos vizinhos.
      O azul chapado que tinha antes lia como "selecionado", e não como
      prêmio maior. */
.mini-prize--extra{
    color:inherit;
    background:#fff;
    box-shadow:none;
}
.mini-prize--extra .mini-prize-head{background:#1d2f91}
.mini-prize--extra>strong{color:#123b8c}

/* 5. Bolas de sorteio da Bolada — do tamanho do saco dos vizinhos, para a
      linha de base dos valores fechar igual nos cinco cards. */
.bolada-bolas{
    width:auto;
    height:92px;
    margin-bottom:7px;
}

@media(max-width:1000px){
    /* Nos cards largos do tablet sobra altura — a arte pode crescer. */
    .prize-bag,
    .bolada-bolas{height:104px}

    .first-prize-car{max-height:230px}
}

@media(max-width:620px){
    /* No celular a tarja ocupa o canto sozinha: o título desce inteiro para
       baixo dela, sem o recuo lateral que o desktop precisa. */
    .first-prize{padding:44px 14px 0}
    .first-prize-copy{padding:0}
    .first-prize-copy h3{font-size:21px}
    .first-prize-car{max-height:200px}
}

/* --- Ganhadores: a faixa clara -------------------------------------------
   O pacote desenha esta faixa em AZUL PESADO. Na página inteira isso quebra o
   ritmo: azul (hero) → branco → verde claro → branco → cinza → **azul** →
   branco → azul (rodapé). Dois azuis fortes separados por uma faixa branca
   fina brigam entre si, e o da faixa ainda encosta no do rodapé.

   Aqui ela vira um tom de BRANCO, como as demais seções de conteúdo. A cor
   forte da faixa continua existindo — é a barra verde da chamada, que ganha
   destaque justamente por ser a única coisa colorida do bloco.             */
.stories-section.winners-section{
    background:#fff;
    color:var(--text);
    padding:30px 0 0;
    border-radius:0;
}
.stories-section.winners-section h2{
    text-align:center;
    font-size:29px;
    margin:0 0 6px;
    color:var(--text);
}
.winners-intro{
    text-align:center;
    color:var(--muted);
    font-size:14px;
    margin:0 0 22px;
}
.winners-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

@media(max-width:900px){
    .winners-grid{grid-template-columns:1fr}
}

/* --- Como comprar -------------------------------------------------------- */
/* 🔑 17/08/2026: passaram a ser TRÊS cartões — entrou "Quero comprar agora",
   a primeira compra pelo vendedor do site. `auto-fit` com faixa mínima em vez
   de número fixo de colunas: com três cabe três, e se um dia o cartão do site
   sumir (sem vendedor configurado) os dois restantes voltam a dividir a linha
   sozinhos, sem regra nova. O `minmax` é o que impede o cartão de espremer o
   rótulo do botão em tela média. */
.buy-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
    max-width:1020px;
    margin-inline:auto;
}
.buy-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    padding:24px 20px;
    text-align:center;
    box-shadow:var(--shadow);
}
.buy-card h3{margin:12px 0 6px;color:var(--text);font-size:18px}
.buy-card p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.5}
.buy-card small{display:block;margin-top:12px;color:var(--muted);font-size:12px;line-height:1.5}
.buy-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin:0 auto;
    background:var(--green-light);
}
.buy-icon img{width:26px;height:26px}
.btn-blue{background:var(--navy);color:#fff}

@media(max-width:700px){
    .buy-grid{grid-template-columns:1fr}
    .previa .shell a{margin-left:0}
}

/* --- Botões do hero em uma linha só (17/08/2026) --------------------------
   "Comprar minha cartela" e "Ver a premiação" quebravam em duas linhas
   dentro do botão — o texto era maior do que a largura que o flex ia
   sobrando para cada um. Encurtamos o texto no blade ("Comprar cartela" /
   "Ver premiação") e travamos aqui: `white-space:nowrap` impede a quebra e
   `min-width` dá folga para o texto + ícone respirarem, no desktop e no
   celular (onde a pilha vira coluna e cada botão ocupa a linha toda). */
.hero-actions .btn{
    white-space:nowrap;
    min-width:216px;
}

/* --- Botão "Baixar app" no cabeçalho (17/08/2026) -------------------------
   Fica ANTES do "Minha conta", pedido do dono do projeto para dar lugar de
   destaque à instalação do PWA. Nasce com `hidden` no HTML — quem tira o
   atributo é o JavaScript de instalação (outro agente), no clique certo do
   navegador; aqui só existe a casca visual.

   O cabeçalho é branco, e já tem um botão sólido azul (Minha conta) e um
   verde (Comprar cartela) — um terceiro botão cheio brigaria com os dois.
   Por isso este é em CONTORNO, no mesmo vocabulário do `.btn-outline` do
   hero, mas em tom escuro para funcionar sobre fundo claro. */
.btn-outline-navy{
    background:#fff;
    border:2px solid var(--navy);
    color:var(--navy);
}
.btn-outline-navy:hover{background:var(--navy);color:#fff}

/* O `hidden` do HTML não estava valendo: `.btn` declara `display:inline-flex`
   e uma classe ganha do `display:none` que o navegador dá ao atributo. Sem
   esta linha o botão de instalar aparecia para todo mundo, inclusive para
   quem já tem o app instalado. */
.btn[hidden]{display:none}

@media(max-width:620px){
    /* Mesmo aperto que o `.btn-green` já leva aqui ao lado — sem isso o
       trio de botões do cabeçalho não cabe na tela do celular. */
    .header-actions .btn-outline-navy{min-height:38px;font-size:11px;padding-inline:10px}
}

/* ==========================================================================
   O CELULAR TEM LAYOUT PRÓPRIO (17/08/2026)

   Até aqui o celular era o desktop espremido: tudo virava uma coluna só, com
   os mesmos textos e a mesma escala de tipo. Na mão, isso vira rolagem longa
   de parágrafo pequeno — e quem abre pelo aplicativo quer ver a CARTELA, o
   PRÊMIO e o botão de comprar, nessa ordem.

   O que muda daqui para baixo (e SÓ abaixo de 620px, o corte de celular que o
   pacote já usava — o desktop e o tablet ficam exatamente como estão):

     · hero remontado: título menor, arte da cartela logo abaixo dele, os três
       benefícios lado a lado e os dois botões dividindo a mesma linha;
     · faixa de premiação em duas colunas, com 1º prêmio e Bolada da Sorte
       ocupando a linha inteira;
     · "Como funciona" com card deitado (ícone à esquerda, texto à direita);
     · "Por que o Totolec Show Digital" em dois tiles por linha, com corpo de
       texto que dá para ler;
     · rodapé refeito: colunas lado a lado, tipo maior, grupos separados;
     · o texto que só repete o que a imagem já diz sai de cena por
       `display:none` — o HTML continua inteiro, porque o desktop usa.

   Ganhadores, "Sou cliente" e "Sou vendedor" continuam 100% por card, como
   ele pediu: ali cada card é uma decisão, não um item de lista.
   ========================================================================== */

/* Emparelha a faixa SEM prêmio extra com a normal na faixa de 621–640px: o
   bloco lá em cima joga ela para uma coluna em 640, e as duas ficavam com
   layout diferente na mesma largura de tela. */
@media(max-width:640px){
    .prizes-board--sem-extra{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:620px){

    /* --- 1. HERO ---------------------------------------------------------
       A ordem na tela do celular é: título → cartela → benefícios → botões.
       Como o título mora dentro do `.hero-copy` e a arte é irmã dele, o
       `display:contents` dissolve essa caixa e devolve os filhos direto para
       a pilha do hero — aí `order` consegue colocar a arte no meio deles.
       Navegador antigo que não entenda `contents` só mostra a ordem de hoje;
       nada quebra.                                                          */
    /* Pedido dele (27/08): no hero o respiro lateral cai para 5px de cada
       lado — a arte, os benefícios e os botões usam a tela toda. O resto da
       página continua com a margem normal do `.shell` (13px). */
    .hero .shell{width:calc(100% - 10px)}

    .hero-grid{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        min-height:0;
        padding-block:20px 26px;
        text-align:center;
    }
    .hero-copy{display:contents}

    /* Escala de celular, não a do desktop encolhida: a chamada precisa caber
       em duas linhas confortáveis sem empurrar a cartela para baixo da
       dobra. */
    .hero-copy h1{
        order:1;
        margin:0 auto 14px;
        font-size:29px;
        letter-spacing:-.7px;
        line-height:1.06;
    }

    .hero-campaign{
        order:2;
        padding:0;
    }
    /* Pedido dele (27/08): a arte passa a mandar na LARGURA — ocupa a faixa
       inteira do hero, que já vem com 5px de cada lado. O teto de altura
       continua existindo, mas só para celular baixo (tela curta), onde a
       cartela 4:5 (1080×1350) empurraria os botões para fora da dobra; nesse
       caso ela encolhe proporcionalmente em vez de ser cortada. */
    .campaign-card{
        width:100%;
        height:auto;
        max-width:100%;
        max-height:70vh;
        margin-inline:auto;
        border-radius:14px;
    }

    /* Os três benefícios voltam para UMA LINHA (o pacote empilhava): com o
       ícone em cima do rótulo cada um cabe em um terço da tela. */
    .hero-benefits{
        order:3;
        width:100%;
        max-width:none;
        margin:18px auto 0;
        grid-template-columns:repeat(3,1fr);
    }
    .hero-benefit{
        flex-direction:column;
        justify-content:center;
        gap:6px;
        min-height:0;
        padding:11px 4px;
        border-right:1px solid rgba(255,255,255,.10);
        border-bottom:0;
    }
    .hero-benefit:last-child{border-right:0}
    .hero-benefit-icon{width:26px;height:26px}
    .hero-benefit-icon img{width:24px;height:24px}

    /* Pedido dele (27/08): o rótulo fica RETO, numa linha só — "Compre sua
       cartela" quebrado no meio deixava os três cards espremidos. O `<br>`
       do HTML é desligado aqui (ele existe para o desktop) e a fonte é
       elástica: acompanha a largura da tela para nunca estourar o card. */
    .hero-benefit strong br{display:none}
    .hero-benefit strong{
        font-size:clamp(8px,2.5vw,11px);
        line-height:1.25;
        white-space:nowrap;
    }

    /* Os dois botões dividem a linha em METADE para cada um (pedido dele,
       27/08). O `min-width:216px` que trava a quebra de texto no desktop
       precisa cair aqui, senão eles não cabem juntos. */
    .hero-actions{
        order:4;
        width:100%;
        flex-direction:row;
        gap:10px;
        margin-top:17px;
    }
    .hero-actions .btn{
        flex:1 1 50%;
        max-width:50%;
        min-width:0;
        padding-inline:9px;
        font-size:13px;
    }
    .hero-actions .btn-lg{width:auto;min-height:48px}
    .hero-actions .btn img{width:16px;height:16px}

    /* O aviso de 18 anos NÃO sai: é obrigação, não enfeite. */
    .age-note{order:5;margin-top:16px;font-size:11px}

    /* --- 2. PREMIAÇÃO ----------------------------------------------------
       Duas colunas, com duas exceções que ocupam a linha inteira: o 1º prêmio
       (é o que vende a extração) e a BOLADA DA SORTE, que é o último card —
       em meia largura ela ficaria sozinha na última linha, com um buraco ao
       lado.                                                                 */
    .prizes-board,
    .prizes-board--sem-extra{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
    .first-prize{grid-column:1/-1}
    .mini-prize:last-child{grid-column:1/-1}

    /* Sem prêmio extra sobram três cards de meia largura (2º, 3º e GIROS) e a
       conta volta a dar ímpar — então o de GIROS, o penúltimo, também abre a
       linha inteira. */
    .prizes-board--sem-extra .mini-prize:nth-last-child(2){grid-column:1/-1}

    .mini-prize{
        min-height:0;
        padding:40px 8px 15px;
    }
    .mini-prize-head{min-height:30px;font-size:9.5px}
    .mini-prize>strong{font-size:19px}
    .prize-bag,
    .bolada-bolas{height:72px;margin-bottom:6px}

    /* Quem ficou com a linha inteira tem espaço de sobra: arte e valor
       crescem, e a hierarquia da faixa continua legível. */
    .mini-prize:last-child .bolada-bolas,
    .prizes-board--sem-extra .mini-prize:nth-last-child(2) .prize-bag{height:90px}
    .mini-prize:last-child>strong,
    .prizes-board--sem-extra .mini-prize:nth-last-child(2)>strong{font-size:26px}

    /* --- 3. COMO FUNCIONA ------------------------------------------------
       Card DEITADO: ícone à esquerda, título e texto à direita. Empilhado e
       centralizado, cada passo gastava meia tela; deitado, os quatro passos
       cabem quase de uma vez e continuam se lendo como sequência.           */
    .how-grid{grid-template-columns:1fr;gap:10px}
    .how-card{
        min-height:0;
        display:grid;
        grid-template-columns:46px 1fr;
        column-gap:12px;
        align-items:center;
        text-align:left;
        padding:13px 14px 13px 38px;
    }
    /* O número sai do canto e centraliza na lateral, junto da linha do card. */
    .how-number{
        top:50%;
        left:8px;
        transform:translateY(-50%);
    }
    .how-icon{
        grid-row:1/3;
        width:46px;
        height:46px;
        margin:0;
    }
    .how-card h3{align-self:end;margin:0 0 3px;font-size:13.5px}
    .how-card p{align-self:start;font-size:11.5px;line-height:1.4}

    /* --- 4. REALIZE SEUS SONHOS ------------------------------------------
       Aqui a foto é o argumento. Fica uma por linha, grande, com o título
       logo abaixo — a legenda explicando a foto some (veja o bloco 7).      */
    .dream-grid{gap:26px}
    .dream-card h3{margin:31px 0 0;font-size:16px}

    /* --- 5. POR QUE O TOTOLEC SHOW DIGITAL -------------------------------
       Dois tiles por linha em vez de cinco blocos empilhados de 10px. São
       cinco motivos: o quinto abre a linha inteira para não sobrar meio
       espaço vazio no fim.                                                  */
    .reasons-grid{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }
    .reason-item{
        min-height:0;
        padding:16px 10px 15px;
        border-bottom:0;
        border-radius:14px;
        background:#fff;
        /* O pacote crava `border-right:0!important` nesta largura; em vez de
           brigar com o `!important`, a moldura do tile vem de um anel de
           sombra — que ainda por cima não ocupa espaço na grade. */
        box-shadow:0 0 0 1px #e6eaf0,0 2px 8px rgba(18,51,103,.05);
    }
    .reason-item:nth-child(5){grid-column:1/-1}
    .reason-icon{width:42px;height:42px;margin:0 auto 7px}
    .reason-icon img{width:38px;height:38px}
    .reason-item h3{margin:0 0 5px;font-size:13px}
    .reason-item p{font-size:11.5px;line-height:1.45}

    /* --- 6. RODAPÉ -------------------------------------------------------
       Era o pior pedaço do celular: dois blocos de links de 9px colados um no
       outro. Agora a marca abre o rodapé sozinha, com um fio separando, e os
       dois grupos ficam lado a lado com tipo de tamanho de gente e alvo de
       toque decente.                                                        */
    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:20px 16px;
        padding:24px 0 22px;
        text-align:left;
    }
    .footer-brand{
        grid-column:1/-1;
        padding-bottom:18px;
        border-bottom:1px solid rgba(255,255,255,.16);
        text-align:center;
    }
    .footer-brand>img{width:132px;margin:0 auto}

    /* O título do grupo ganha um fio amarelo curto — é o que separa
       "Navegação" de "Atendimento" quando os dois estão lado a lado. */
    .footer-col strong{
        position:relative;
        margin-bottom:14px;
        padding-bottom:8px;
        font-size:14px;
    }
    .footer-col strong::after{
        content:"";
        position:absolute;
        left:0;
        bottom:0;
        width:26px;
        height:2px;
        background:var(--yellow);
    }
    .footer-col a,
    .footer-col span{
        margin:0 0 11px;
        color:#e8effc;
        font-size:13px;
        line-height:1.4;
    }
    /* Link de rodapé no celular é alvo de dedo, não de mouse. */
    .footer-col a{padding:3px 0}
    .footer-bottom{padding:14px 0}
    .footer-bottom .shell{font-size:11px;line-height:1.5;gap:7px}

    /* --- 7. O QUE NÃO APARECE NO CELULAR ---------------------------------
       Nada disso sai do HTML: o desktop continua usando tudo. São só os
       textos que, na mão, repetem o que o título ou a foto ao lado já
       dizem — e que empurravam prêmio e botão para baixo da dobra.          */
    .hero-copy>p{display:none}                    /* a chamada longa do hero */
    .dreams-section .section-intro{display:none}  /* repete o título da seção */
    .dream-card p{display:none}                   /* legenda do que a foto mostra */
    .footer-brand p{display:none}                 /* repete a frase do hero */
}


/* =============================================================================
 * 🏆 HERO COM PÓDIO — 04/10/2026 (pedido dele)
 * -----------------------------------------------------------------------------
 * Fundo novo (moedas, trevos e um pódio) e a cartela EM CIMA do pódio,
 * centralizada nele.
 *
 * 🔑 O TRUQUE QUE SEGURA O ALINHAMENTO EM QUALQUER LARGURA: com
 *    `background-size: cover` e `background-position` em PORCENTAGEM, o ponto
 *    da imagem que fica em X% × Y% dela cai sempre em X% × Y% da seção. O topo
 *    do pódio mede 70,8% × 78% no arquivo (1920×640: x 1360, y 500) — então a
 *    BASE da cartela é ancorada nesses mesmos 70,8% × 78% da seção.
 *    ⚠️ Trocar o fundo = medir o pódio de novo e mudar os DOIS pares de números.
 *
 * 📱 Só do tablet para cima (≥ 921px), onde o hero tem duas colunas. No
 *    celular a cartela fica no meio da pilha de texto, em largura cheia, e não
 *    cabe sobre pódio nenhum — lá continua o fundo antigo.
 * ========================================================================== */
@media (min-width:921px){
    .hero{
        position:relative;
        min-height:580px;
        background:#0a3fbf url("../backgrounds/hero-podio.webp") 70.8% 78% / cover no-repeat;
    }
    .hero-grid{min-height:580px}
    .hero .hero-campaign{
        position:absolute;
        left:70.8%;
        top:78%;
        height:72%;
        padding:0;
        display:block;
        transform:translate(-50%,-100%);
    }
    .hero .campaign-card{
        display:block;
        height:100%;
        width:auto;
        max-width:none;
    }
}
/* -----------------------------------------------------------------------------
 * 🔹 LEITURA SOBRE O FUNDO NOVO (04/10/2026, pedido dele): o fundo do pódio é
 *    claro e cheio de brilho; o que era translúcido ficou difícil de ler.
 *    Escurecidos: a faixa dos três benefícios e o "Ver premiação" (era
 *    transparente). Vale em todas as larguras — no celular também ajuda.
 * -------------------------------------------------------------------------- */
.hero .hero-benefits{
    background:rgba(0,22,82,.78);
    border-color:rgba(140,200,255,.22);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
.hero .btn-outline{
    background:rgba(0,22,82,.78);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
}
.hero .btn-outline:hover{background:rgba(0,22,82,.92)}

/* -----------------------------------------------------------------------------
 * ✨ A CARTELA NO PÓDIO COMO PEÇA DE VIDRO (04/10/2026, pedido dele): borda de
 *    luz azul, brilho, sombra e reflexo de vidro, no mesmo tom do fundo.
 *    • a borda e o brilho são `box-shadow` na imagem (não ocupam espaço);
 *    • o vidro é o `::after` da caixa da cartela — reflexo diagonal + fio claro
 *      por dentro; `pointer-events:none` para não atrapalhar nada;
 *    • "mais vibrante": saturação +12% e contraste +4%, sem mudar a arte.
 *    Só no computador, onde a cartela está sobre o pódio.
 * -------------------------------------------------------------------------- */
@media (min-width:921px){
    .hero .campaign-card{
        border-radius:18px;
        filter:saturate(1.12) contrast(1.04);
        box-shadow:
            0 0 0 2px rgba(150,210,255,.85),
            0 0 18px 2px rgba(70,160,255,.75),
            0 0 48px 6px rgba(30,120,255,.45),
            0 26px 40px -10px rgba(0,10,50,.65);
    }
    .hero .hero-campaign::after{
        content:"";
        position:absolute;
        inset:0;
        border-radius:18px;
        pointer-events:none;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
        background:linear-gradient(
            125deg,
            rgba(255,255,255,.38) 0%,
            rgba(255,255,255,.12) 22%,
            rgba(255,255,255,0) 40%,
            rgba(255,255,255,0) 72%,
            rgba(255,255,255,.10) 100%
        );
    }
}
/* -----------------------------------------------------------------------------
 * 📱 FUNDO DO HERO POR APARELHO (05/10/2026, pedido dele): cada faixa de tela
 *    com a arte desenhada para ela. Mesmos pontos de quebra do resto da home:
 *      • computador (≥ 921px) → `hero-podio.webp`, com a cartela no pódio;
 *      • tablet (621–920px)   → `hero-tablet.webp` (768×600);
 *      • celular (≤ 620px)    → `hero-celular.webp` (1080×1920, em pé).
 *    `top center` porque a luz das duas artes nasce no alto, no meio.
 *    ⚠️ `?v=2`: as artes foram trocadas em 05/10 (sem o brilho no alto). A
 *    hospedagem guarda imagem por 7 dias — trocar o arquivo exige subir o número.
 * -------------------------------------------------------------------------- */
@media (min-width:621px) and (max-width:920px){
    .hero{
        background:#0a3fbf url("../backgrounds/hero-tablet.webp?v=2") top center / cover no-repeat;
    }
}
@media (max-width:620px){
    .hero{
        background:#0a3fbf url("../backgrounds/hero-celular.webp?v=2") top center / cover no-repeat;
    }
}
/* -----------------------------------------------------------------------------
 * 📐 OS DOIS BOTÕES DO HERO NA LARGURA DA FAIXA DE CIMA (06/10/2026, ordem dele):
 *    "Comprar cartela" e "Ver premiação" agora dividem exatamente a largura da
 *    faixa dos três benefícios, meio a meio — antes paravam antes da borda
 *    direita dela (dois `min-width:216px` + vão não somavam a largura).
 *    No tablet a faixa tem teto de 540px e fica no meio: os botões também.
 *    O celular já estava alinhado e não muda.
 * -------------------------------------------------------------------------- */
@media (min-width:621px){
    .hero .hero-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
    }
    .hero .hero-actions .btn{
        width:100%;
        min-width:0;
    }
}
@media (min-width:621px) and (max-width:920px){
    .hero .hero-actions{
        max-width:540px;
        margin-inline:auto;
    }
}
/* -----------------------------------------------------------------------------
 * 🦶 RODAPÉ NO COMPUTADOR (06/10/2026, ordem dele: "letras miúdas e alinhamento
 *    errado").
 *    • A grade do pacote tinha CINCO colunas (1,55fr + 4×1fr) para TRÊS blocos —
 *      marca, Navegação e Atendimento —, então sobravam duas vazias à direita e
 *      tudo ficava espremido à esquerda. Agora são três, ocupando a largura.
 *    • Letras de 8,5–12px subiram para 13–16px, como o resto da página.
 *    O tablet e o celular têm regras próprias mais abaixo/acima e não mudam.
 * -------------------------------------------------------------------------- */
@media (min-width:921px){
    .footer-grid{
        grid-template-columns:1.4fr 1fr 1fr;
        gap:56px;
        padding:44px 0 36px;
        align-items:start;
    }
    .footer-brand>img{width:140px;margin-bottom:14px}
    .footer-brand p{max-width:340px;font-size:14px;line-height:1.6}
    .footer-col strong{margin-bottom:14px;font-size:16px}
    .footer-col a,
    .footer-col span{margin:9px 0;font-size:14px;line-height:1.5}
    .footer-col a:hover{color:#fff;text-decoration:underline}
    .footer-bottom{padding:16px 0}
    .footer-bottom .shell{align-items:center;font-size:13px}
}
/* -----------------------------------------------------------------------------
 * 📱 CABEÇALHO E MENU NO CELULAR/TABLET (08/10/2026, pedido dele)
 *    • "Minha conta" volta a ter o TEXTO (era só o ícone desde 27/08).
 *    • O "Baixar app" sai do cabeçalho e vira "Baixar aplicativo" DENTRO do
 *      menu — é o que abre espaço para o texto do "Minha conta".
 *    • No computador nada muda: o item do menu nunca aparece lá.
 * -------------------------------------------------------------------------- */
.main-nav a[hidden]{display:none}

/* 08/10: no tablet DEITADO (largura de computador) o menu é a faixa de cima,
   e o item tem de aparecer lá também — quem esconde no computador é o JS. */

@media (max-width:920px){
    .header-actions [data-instalar-app]{display:none !important}
    .header-actions .btn-navy{width:auto;padding-inline:12px}
    .btn-conta__rotulo{display:inline}
    .btn-conta__icone{width:17px;height:17px}
    .main-nav .main-nav__app{color:#1d5ca8;font-weight:800}
}

@media (max-width:620px){
    .header-actions .btn-navy{width:auto;min-height:38px;font-size:11px;padding-inline:10px}
    .header-actions .btn-conta{gap:6px}
}
/* -----------------------------------------------------------------------------
 * ✂️ RÓTULOS CURTOS NO CELULAR/TABLET (08/10/2026, pedido dele): "Minha conta"
 *    e "Comprar cartela" quebravam em duas linhas. Lá viram "Entrar" (ou
 *    "Conta", para quem já está logado) com o bonequinho, e "Comprar" com o
 *    carrinho. No computador continuam os textos inteiros.
 * -------------------------------------------------------------------------- */
.btn-curto{display:none}

@media (max-width:920px){
    .header-actions .btn-conta__rotulo,
    .header-actions .btn-longo{display:none}
    .header-actions .btn-curto{display:inline}
    .header-actions .btn{white-space:nowrap}
    .header-actions .btn-green .btn-icon{display:inline-flex}
    .header-actions .btn-green{gap:6px}
}
/* -----------------------------------------------------------------------------
 * 📐 A FAIXA DO CABEÇALHO NO CELULAR/TABLET (08/10/2026, pedido dele): os dois
 *    botões estavam apertados e o menu, apagado.
 *    • a logo fica com a largura dela; "Entrar" e "Comprar" DIVIDEM IGUALMENTE
 *      o que sobra (até 170px cada, para não virarem tarja no tablet);
 *    • o menu vira botão sólido azul-escuro, mesma altura dos outros, com os
 *      tracinhos BRANCOS;
 *    • o carrinho do "Comprar" fica branco.
 * -------------------------------------------------------------------------- */
@media (max-width:920px){
    .header-actions{flex:1 1 auto;justify-content:flex-end;margin-left:12px;gap:8px}
    .header-actions .btn-navy,
    .header-actions .btn-green{
        flex:1 1 0;
        max-width:170px;
        justify-content:center;
        min-height:40px;
        font-size:13px;
        padding-inline:8px;
    }
    .header-actions .btn-green .btn-icon img{filter:brightness(0) invert(1)}

    .nav-toggle{
        width:44px;height:40px;
        margin-left:8px;
        flex:none;
        border-radius:10px;
        background:#0b2a6f;
        box-shadow:0 3px 8px rgba(11,42,111,.28);
    }
    .nav-toggle span{background:#fff;width:20px}
}

@media (max-width:620px){
    .header-actions .btn-navy,
    .header-actions .btn-green{min-height:40px;font-size:13px}
}
/* O carrinho era espremido até largura ZERO pelo flex do botão (08/10). */
@media (max-width:920px){
    .header-actions .btn-green .btn-icon{flex:none;width:16px;height:16px}
    .header-actions .btn-green .btn-icon img{width:16px;height:16px}
}
/* -----------------------------------------------------------------------------
 * 📏 CABEÇALHO DO CELULAR, 2ª RODADA (08/10/2026, pedido dele): os dois botões
 *    ocupam TODO o espaço entre a logo e o menu, com a MESMA largura.
 *    • o vão de 24px do cabeçalho (mais as margens) comia 36px antes dos botões
 *      e 32px depois — zerado, fica só 10px de respiro de cada lado;
 *    • `min-width:0`: sem isso cada botão crescia pelo próprio texto
 *      ("Comprar" saía mais largo que "Entrar");
 *    • o carrinho de arquivo (traço fino) dá lugar a um SVG de traço grosso.
 * -------------------------------------------------------------------------- */
.btn-carrinho-forte{display:none}

@media (max-width:920px){
    .header-inner{gap:0}
    .header-actions{margin:0 10px;gap:8px}
    .header-actions .btn-navy,
    .header-actions .btn-green{flex:1 1 0;min-width:0}
    .nav-toggle{margin-left:0}

    .header-actions .btn-green .btn-icon{display:none}
    .btn-carrinho-forte{display:block;flex:none;width:18px;height:18px;color:#fff}
}

@media (max-width:620px){
    .header-actions .btn-navy,
    .header-actions .btn-green{max-width:none}
}
/* 🔠 MENU DO CELULAR/TABLET COM LETRA DE 18px (08/10/2026, ordem dele: "no
   mínimo 18 pixels" — os 11px eram ruins de ler). Mais respiro entre os itens
   para o dedo acertar. */
@media (max-width:920px){
    .main-nav a{
        font-size:18px;
        font-weight:700;
        padding:15px 6px;
        line-height:1.25;
    }
}
/* 📱 HERO NO CELULAR/TABLET (08/10/2026, ordem dele): sai a faixa dos três
   benefícios ("Compre sua cartela", "Acredite na sua sorte", "Realize seus
   sonhos") — ficam só "Comprar cartela" e "Ver premiação", com letra maior e o
   carrinho maior. No computador a faixa continua. */
@media (max-width:920px){
    .hero .hero-benefits{display:none}
    .hero .hero-actions{margin-top:18px}
    .hero .hero-actions .btn{font-size:18px;min-height:56px}
    .hero .hero-actions .btn img{width:24px;height:24px}
}
/* 08/10 (2ª): ele quer os dois LADO A LADO no celular, 50% cada (a versão um
   embaixo do outro foi recusada). Para "Comprar cartela" + carrinho caber em
   meia tela, lá a letra fica em 16px (era 13px antes da rodada) e o carrinho
   em 22px; no tablet seguem 18px e 24px.
   ⚠️ `max-width:none` e `flex:none`: uma regra antiga do celular travava cada
   botão em 50% via flex, e brigava com a grade. */
@media (max-width:620px){
    .hero .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .hero .hero-actions .btn{
        width:100%;max-width:none;flex:none;
        /* acompanha a tela: 16px a partir de ~390px, até 14,5px nos estreitos */
        font-size:clamp(14.5px, 4.1vw, 16px);min-height:54px;
        padding-inline:6px;gap:6px;
    }
    .hero .hero-actions .btn img{width:clamp(19px, 5.6vw, 22px);height:auto}
}
/* 📱 CARTELA DO HERO 30% MENOR SÓ NO CELULAR (08/10/2026, pedido dele, para
   testar outro fundo). Tablet e computador não mudam. */
@media (max-width:620px){
    .hero .campaign-card{
        width:70%;
        max-width:70%;
        height:auto;
        margin-inline:auto;
    }
}
/* =============================================================================
 * 🏆 CELULAR COM PÓDIO (08/10/2026, teste dele)
 * -----------------------------------------------------------------------------
 * • A seção do topo ocupa a TELA INTEIRA abaixo do cabeçalho (70px), com
 *   `svh` (altura visível, que não pula quando a barra do navegador some) —
 *   antes, com a cartela menor, a "Premiação da semana" já aparecia junto.
 * • Fundo `hero-celular-podio-2.webp` (693×1230, trocado em 08/10). Mesmo truque
 *   do computador: com `cover` e posição em %, o topo do pódio (50% × 71,5% do
 *   arquivo) cai sempre em 50% × 71,5% da seção — e a BASE da cartela é presa ali.
 * • A cartela encolhe para caber entre o título e o pódio em tela baixa.
 * • Título em cima; botões embaixo do pódio.
 * ⚠️ Trocar o fundo = medir o pódio de novo e mudar os dois pares de números.
 * ========================================================================== */
@media (max-width:620px){
    .hero{
        position:relative;
        min-height:calc(100svh - 70px);
        background:#0a3fbf url("../backgrounds/hero-celular-podio-2.webp") 50% 71.5% / cover no-repeat;
    }
    .hero .shell,
    .hero-grid{min-height:inherit}
    .hero-grid{padding-block:22px 18px}
    .hero .hero-actions{margin-top:auto}

    .hero .hero-campaign{
        position:absolute;
        left:50%;
        top:71.5%;
        transform:translate(-50%,-100%);
        padding:0;
        line-height:0;
    }
    .hero .campaign-card{
        width:auto;
        max-width:none;
        max-height:none;
        /* 70% da largura da tela, ou o que cabe entre o título e o pódio */
        height:min(calc(70vw * 1.25), calc((100svh - 70px) * .715 - 150px));
        margin:0;
        box-shadow:0 10px 24px rgba(0,10,50,.45), 0 0 0 2px rgba(150,210,255,.7);
    }
}
/* -----------------------------------------------------------------------------
 * ☀️ CELULAR COM PÓDIO — 2ª rodada (08/10/2026, marcação dele):
 *    • o título DESCE para o meio do vão acima da cartela;
 *    • os botões SOBEM um pouco do pé da tela;
 *    • a cartela sobe 2px;
 *    • a borda azul vira BRILHO DE SOL: raios girando devagar atrás da cartela
 *      (`::before`, cônico) e o contorno pulsando. Quem pediu menos movimento
 *      no sistema vê o brilho parado.
 *    As folgas são proporcionais à altura da tela: valem do celular baixo ao alto.
 * -------------------------------------------------------------------------- */
@media (max-width:620px){
    .hero-grid{
        padding-top:max(22px, calc((100svh - 70px) * .20 - 80px));
        padding-bottom:clamp(18px, calc((100svh - 70px) * .10 - 20px), 70px);
    }

    .hero .hero-campaign{transform:translate(-50%, calc(-100% - 2px))}

    .hero .campaign-card{
        position:relative;
        z-index:1;
        border-radius:14px;
        animation:cartela-brilho 2.6s ease-in-out infinite;
    }

    .hero .hero-campaign::before{
        content:"";
        position:absolute;
        inset:-26% -36%;
        z-index:0;
        pointer-events:none;
        background:repeating-conic-gradient(
            from 0deg,
            rgba(235,248,255,.85) 0deg 5deg,
            rgba(160,215,255,0) 5deg 15deg
        );
        -webkit-mask:radial-gradient(closest-side, #000 52%, transparent 100%);
        mask:radial-gradient(closest-side, #000 52%, transparent 100%);
        filter:blur(1px);
        mix-blend-mode:screen;
        animation:cartela-raios 22s linear infinite;
    }
}

@keyframes cartela-brilho{
    0%,100%{box-shadow:
        0 0 0 2px rgba(170,220,255,.85),
        0 0 14px 3px rgba(90,170,255,.75),
        0 0 34px 8px rgba(40,130,255,.45),
        0 12px 26px rgba(0,10,50,.45)}
    50%{box-shadow:
        0 0 0 2px rgba(225,245,255,1),
        0 0 22px 6px rgba(130,200,255,.95),
        0 0 56px 16px rgba(60,150,255,.6),
        0 12px 26px rgba(0,10,50,.45)}
}
@keyframes cartela-raios{to{transform:rotate(360deg)}}

@media (max-width:620px) and (prefers-reduced-motion:reduce){
    .hero .campaign-card,
    .hero .hero-campaign::before{animation:none}
}
/* 🔴 08/10/2026 — OS RAIOS DE SOL VAZAVAM PARA FORA DA TELA. O `::before` da
   cartela passa das laterais; com a página mais larga que a tela (545px num
   celular de 390) o celular AFASTA a página inteira — e foi isso que tirou a
   abertura animada do app do alinhamento com o ícone do Android. Recortar na
   borda da seção resolve sem perder o brilho. `clip` (e não `hidden`) para não
   criar rolagem dentro da seção. */
.hero{overflow-x:clip}
@supports not (overflow:clip){ .hero{overflow-x:hidden} }

/* 🟩 FAIXA VERDE "NÃO DEIXE A SORTE PASSAR" (08/10/2026, pedido dele): sem a
   linha de baixo, a chamada cresce e fica BRANCA para destacar no verde. */
.stories-cta strong{
    margin:0;
    font-size:20px;
    line-height:1.25;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,40,0,.25);
}
@media (max-width:620px){
    .stories-cta strong{font-size:17px}
}

/* 🦶 RODAPÉ: logo e frase da marca CENTRALIZADAS na coluna delas (08/10/2026,
   pedido dele). Vale em todas as larguras. */
.footer-brand{text-align:center}
.footer-brand>img{margin-inline:auto}
.footer-brand p{margin-inline:auto}
/* 👆 A CARTELA DO TOPO É CLICÁVEL (08/10/2026) e leva à vitrine de compra.
   O link é `display:contents` para não mexer no encaixe no pódio; o retorno
   visual fica na própria imagem: cresce um pouco no hover e afunda no toque. */
.campaign-link{display:contents}
.campaign-link .campaign-card{cursor:pointer;transition:scale .25s ease}
.campaign-link:hover .campaign-card{scale:1.03}
.campaign-link:active .campaign-card{scale:.97}
.campaign-link:focus-visible .campaign-card{outline:3px solid #f5c518;outline-offset:4px}
@media (prefers-reduced-motion:reduce){ .campaign-link .campaign-card{transition:none} }

/* 🛒 CARRINHO NO MENU (09/10/2026): bolinha vermelha no botão do menu e o item
   "Carrinho (N)" no topo da lista — só quando há cartela no carrinho. */
.nav-toggle{position:relative}
.nav-toggle__aviso{
    position:absolute;
    top:-4px;
    right:-4px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:#e5252a;
    border:2px solid #fff;
    box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.main-nav .main-nav__carrinho{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#1d5ca8;
    font-weight:800;
}
.main-nav__carrinho svg{width:20px;height:20px;flex:none}
.main-nav__qtd{
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:99px;
    background:#e5252a;
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:22px;
    text-align:center;
}
@media (max-width:920px){
    .main-nav .main-nav__carrinho{display:flex}
}

/* =============================================================================
 * 🏆 TABLET COM PÓDIO (12/10/2026, pedido dele) — o mesmo esquema do celular
 *    com pódio, com a arte própria do tablet (`hero-tablet-podio.webp`, 800×1280).
 * • A seção ocupa a tela inteira abaixo do cabeçalho (70px), em `svh`.
 * • `cover` + posição em %: o topo do pódio (50% × 71,5% do arquivo, medido)
 *   cai sempre em 50% × 71,5% da seção — e a BASE da cartela é presa ali.
 * • Texto e botões continuam em cima (como já era no tablet); a cartela encolhe
 *   para caber entre eles e o pódio.
 * • Brilho de sol e contorno pulsando iguais aos do celular.
 * ⚠️ Trocar o fundo = medir o pódio de novo e mudar os dois pares de números.
 * ========================================================================== */
@media (min-width:621px) and (max-width:920px){
    .hero{
        position:relative;
        min-height:calc(100svh - 70px);
        background:#0a3fbf url("../backgrounds/hero-tablet-podio.webp") 50% 71.5% / cover no-repeat;
    }
    .hero .shell,
    .hero-grid{min-height:inherit}
    /* com a seção alta, a grade centralizava o texto e ele caía atrás da cartela */
    .hero-grid{align-content:start}

    .hero .hero-campaign{
        position:absolute;
        left:50%;
        top:71.5%;
        transform:translate(-50%, calc(-100% - 2px));
        padding:0;
        line-height:0;
    }
    .hero .campaign-card{
        position:relative;
        z-index:1;
        width:auto;
        max-width:none;
        max-height:none;
        /* 60% da largura da tela, ou o que cabe entre os botões e o pódio */
        height:min(calc(60vw * 1.25), calc((100svh - 70px) * .715 - 320px));
        margin:0;
        border-radius:14px;
        animation:cartela-brilho 2.6s ease-in-out infinite;
    }
    .hero .hero-campaign::before{
        content:"";
        position:absolute;
        inset:-26% -36%;
        z-index:0;
        pointer-events:none;
        background:repeating-conic-gradient(
            from 0deg,
            rgba(235,248,255,.85) 0deg 5deg,
            rgba(160,215,255,0) 5deg 15deg
        );
        -webkit-mask:radial-gradient(closest-side, #000 52%, transparent 100%);
        mask:radial-gradient(closest-side, #000 52%, transparent 100%);
        filter:blur(1px);
        mix-blend-mode:screen;
        animation:cartela-raios 22s linear infinite;
    }
}
@media (min-width:621px) and (max-width:920px) and (prefers-reduced-motion:reduce){
    .hero .campaign-card,
    .hero .hero-campaign::before{animation:none}
}
/* -----------------------------------------------------------------------------
 * 🏆 TABLET COM PÓDIO — 2ª rodada (12/10/2026, marcação dele):
 *    • sai o texto "Toda semana, o Totolec Show Digital…" (só no tablet);
 *    • o título "Transforme sonhos em realidade" desce um pouco;
 *    • os botões vão para BAIXO do pódio. A frente do pódio termina ~8,2% da
 *      altura da arte abaixo do topo dele; com a arte cobrindo pela largura
 *      (altura = 160vw), isso é 13,1vw abaixo dos 71,5% — os botões vêm logo depois;
 *    • a cartela cresce no espaço que sobrou em cima.
 * -------------------------------------------------------------------------- */
@media (min-width:621px) and (max-width:920px){
    .hero-copy>p{display:none}
    .hero-copy h1{margin-top:28px}

    .hero .hero-actions{
        position:absolute;
        left:50%;
        top:calc(71.5% + 13.1vw + 44px); /* +20px, pedido dele */
        width:calc(100% - 40px);
        max-width:540px;
        margin:0;
        transform:translateX(-50%);
    }

    .hero .campaign-card{
        height:min(calc(60vw * 1.25), calc((100svh - 70px) * .715 - 230px));
    }
}