/* =====================================================================
   Site da campanha — Andréa Castro 55670
   Espelho 1:1 do Figma "Andréa Castro - Identidade" › 🌐 Site da campanha
   Desktop 1440 (3647:27611) · 1920 (3660:31622) · 2560 (3660:32489) · Mobile 440 (3647:26069)

   Estratégia: um único layout desktop parametrizado por variáveis (--pg e as
   posições que mudam entre os frames). Entre os breakpoints o layout anterior
   fica centrado com os fundos sangrando a tela; abaixo de 1440 a página é
   escalada (zoom) a partir do 1440.
   ===================================================================== */

:root{
  --roxo:#6B1DE8; --roxo-escuro:#600DE5; --roxo-noite:#330E6D;
  --rosa:#F3248F; --rosa2:#F32477; --amarelo:#F7C624;
  --gelo:#E1EEFC; --fundo:#F2F5F9; --creme:#F4F2E8;
  --titulo:#756A86; --texto:#666666; --tinta:#252525; --sub:#565064;
  --marquee:#FFF587; --marquee-m:#FFF082;
  --rosa-claro:#FFE4F2; --roxo-claro:#F4EEFF; --check:#FF6D99;
  --linha:#E1EEFC;
  --manrope:"Manrope","Helvetica Neue",Arial,sans-serif;
  --mona:"Mona Sans","Manrope","Helvetica Neue",Arial,sans-serif;
  --inter:"Inter","Manrope","Helvetica Neue",Arial,sans-serif;

  /* ---- valores do frame Desktop 1440 (sobrescritos em 1920 e 2560) ---- */
  --pg:1440px;
  --hero-h:876px;
  --barra-h:170px;
  --logo-x:61px; --logo-y:44px; --nav-y:56px; --nav-dir:61px;
  --foto-x:574px; --foto-y:-40px; --foto-w:895px; --foto-h:892px;
  --foto-corte-esq:28px; --foto-corte-dir:82px;
  --tag-x:105px; --tag-y:232px; --tag-w:583px; --tag-h:331px;
  --sub-x:140px; --sub-y:603px; --sub-w:510px;
  /* marquee do hero (no 1440 o Figma mantém a faixa antiga: 1572 de largura, centro em 758) */
  --mq-hero-top:770px; --mq-hero-alt:165px; --mq-hero-origem:4038px; --mq-hero-off:46.7px;
  /* marquee do meio (faixa nova: 2619 de largura, centro em 1288,5) */
  --mq-alt:229px; --mq-origem:4568.5px; --mq-off:78.5px;
  --h1x:86px; --h2x:86px; --hgap:60px; --hist-top:198px;
  --band-x:167px; --band-y:112px; --band-w:865px; --band-h:1332px; --band-rot:-12.8deg;
  --tband-top:496px; --cards-mt:110px; --mq-meio-mt:78px;
  --san-bloco:962px; --san-texto-w:455px; --san-titulo-y:107px; --san-card-x:565px; --btn-y:527px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--manrope);font-size:16px;line-height:1.7;overflow-x:clip}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
b{font-weight:600}

/* estado inicial das animações (só com JS ligado) */
.js [data-hero],.js [data-reveal]{opacity:0}
.js [data-reveal="titulo"]{opacity:1}
.js [data-reveal="titulo"] .w{opacity:0}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;will-change:transform}
.js [data-reveal="titulo"].pronto .w{opacity:1}
.js [data-reveal="titulo"].pronto .w>span{transform:translateY(112%)}
@media (prefers-reduced-motion:reduce){.js [data-hero],.js [data-reveal]{opacity:1}}

.pg{position:relative;width:var(--pg);margin:0 auto}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;height:var(--hero-h)}
/* céu: cobre o hero inteiro e se dissolve no fundo da página (nada de borda reta) */
.hero-fundo{position:absolute;left:50%;top:0;width:100vw;height:calc(var(--hero-h) + 80px);transform:translateX(-50%);
  background:linear-gradient(137deg,#B0D1FA -12%,#F8F9FC 78%);z-index:0;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 160px),transparent);mask-image:linear-gradient(#000 calc(100% - 160px),transparent)}
.hero-barra{position:absolute;left:50%;top:0;width:100vw;height:var(--barra-h);transform:translateX(-50%);z-index:1;pointer-events:none;display:none}
.barra-1440{display:block}
.hero-foto{position:absolute;left:var(--foto-x);top:var(--foto-y);width:var(--foto-w);height:var(--foto-h);z-index:2;pointer-events:none;user-select:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--foto-corte-dir)),0 calc(100% - var(--foto-corte-esq)))}
.hero-foto img{width:var(--foto-w);height:var(--foto-h)}

.topo{position:absolute;left:var(--logo-x);right:var(--nav-dir);top:var(--logo-y);height:55px;display:flex;align-items:flex-start;justify-content:space-between;z-index:5}
.topo-logo{display:block;height:55px}
.topo-logo img{height:55px;width:auto}
.logo-m{display:none}
.topo-nav{display:flex;gap:38px;align-items:center;margin-top:calc(var(--nav-y) - var(--logo-y))}
.topo-nav a{font:400 16px/30px var(--mona);color:var(--gelo);position:relative}
.topo-nav a.ativo{font-weight:600}
.topo-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;background:var(--amarelo);transition:right .35s cubic-bezier(.22,1,.36,1)}
.topo-nav a:hover::after{right:0}

.hero-tag{position:absolute;left:var(--tag-x);top:var(--tag-y);width:var(--tag-w);height:var(--tag-h);z-index:4}
/* a tag é montada em 5 peças (coordenadas do Figma) e escalada por breakpoint */
.tag-pecas{position:absolute;left:0;top:0;width:583px;height:331px;transform-origin:0 0;transform:scale(var(--tag-escala,1))}
.tag-pecas-m{display:none;width:310px;height:175px}
.tp{position:absolute;display:block;will-change:clip-path,transform,opacity}
.tp img{width:100%;height:100%}
.tag-pecas-d .tp-vamos{left:0;top:0;width:413px;height:94px}
.tag-pecas-d .tp-juntos{left:136px;top:93px;width:447px;height:82px}
.tag-pecas-d .tp-bahia{left:38px;top:175px;width:521px;height:157px}
.tag-pecas-d .tp-pela{left:0;top:218px;width:108px;height:69px}
.tag-pecas-d .tp-psd{left:462px;top:16px;width:97px;height:46px}
.tag-pecas-m .tp-vamos{left:31px;top:0;width:196px;height:49px}
.tag-pecas-m .tp-juntos{left:72px;top:49px;width:236px;height:43px}
.tag-pecas-m .tp-bahia{left:29px;top:92px;width:275px;height:82px}
.tag-pecas-m .tp-pela{left:0;top:115px;width:57px;height:36px}
.tag-pecas-m .tp-psd{left:250px;top:4px;width:54px;height:26px}
/* animação C (cortina): máscara em gradiente com borda macia, varrida da esquerda para a direita */
.js .tp{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 33.3%,transparent 37%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 33.3%,transparent 37%,transparent 100%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;opacity:0}
.js .tp-psd{-webkit-mask-image:none;mask-image:none;opacity:0}
@media (prefers-reduced-motion:reduce){.js .tp{-webkit-mask-image:none;mask-image:none;opacity:1}}
.hero-sub{position:absolute;left:var(--sub-x);top:var(--sub-y);width:var(--sub-w);z-index:4;font:400 24px/37px var(--manrope);color:var(--sub)}
.hero-sub b{font-weight:600}

/* =====================================================================
   MARQUEE — faixa roxa rotacionada −3,45° com "DEIXA COM ELA"
   O SVG do texto veio do Figma já inclinado (−3,14°): o img é desinclinado
   para que a faixa (rotacionada) leve o texto junto.
   ===================================================================== */
.marquee{position:relative;width:100%;z-index:6;pointer-events:none}
.marquee-hero{position:absolute;left:0;top:var(--mq-hero-top);height:var(--mq-hero-alt)}
.marquee-hero .marquee-faixa{top:var(--mq-hero-off);transform-origin:var(--mq-hero-origem) 50%}
.marquee-meio{height:var(--mq-alt);margin-top:var(--mq-meio-mt)}
.marquee-meio .marquee-faixa{top:var(--mq-off);transform-origin:var(--mq-origem) 50%}
.marquee-faixa{position:absolute;left:calc(50% - 4000px);width:8000px;height:61px;background:var(--roxo);border-radius:10px;
  transform:rotate(-3.454deg);overflow:hidden;
  box-shadow:inset -3px -16px 48px rgba(255,255,255,.25);display:flex;align-items:center;padding:2.5px 0}
.marquee-trilho{display:flex;align-items:center;gap:41.7px;width:max-content;will-change:transform;animation:marquee 46s linear infinite}
.marquee-trilho > *{flex:none}
.marquee-trilho img{height:56px;width:216px;transform:rotate(3.14deg)}
.marquee-trilho svg.estrela{width:43px;height:43px;color:var(--gelo)}
.marquee-trilho svg.coracao{width:44px;height:38px;color:var(--marquee)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--mq-loop,1200px)))}}
@media (prefers-reduced-motion:reduce){.marquee-trilho{animation:none}}

/* =====================================================================
   HISTÓRIA
   ===================================================================== */
.hist{position:relative;padding-top:var(--hist-top);z-index:3}
.hist-linha{position:relative;display:flex;align-items:center;gap:var(--hgap);height:589px}
.hist-1{padding-left:var(--h1x)}
.hist-2{margin-top:105px;padding-left:var(--h2x)}
.hist-foto{flex:none;width:518px;height:589px}
.hist-foto img{width:518px;height:589px}
.hist-texto{width:690px;flex:none;display:flex;flex-direction:column;gap:41px}
.t-hist{font:250 64px/68px var(--mona);letter-spacing:-2.73px;color:var(--titulo);width:605px}
.hist-2 .t-hist{width:690px}
.t-hist b{font-weight:500;display:block}
.hist-texto p{font:500 18px/30px var(--manrope);letter-spacing:.32px;color:var(--texto)}
.hist-texto p + p{margin-top:-21px}
.hist-texto .p-menor{font-size:16px;line-height:27.2px}

/* =====================================================================
   BANDEIRAS — título + trilho horizontal preso ao scroll
   ===================================================================== */
.bandeiras{position:relative;margin-top:13px;z-index:2}
.bandeira-img{position:absolute;left:var(--band-x);top:var(--band-y);width:var(--band-w);height:var(--band-h);pointer-events:none;user-select:none}
.bandeira-img img{width:var(--band-w);height:var(--band-h);transform:rotate(var(--band-rot));transform-origin:center}
.t-bandeiras{position:relative;margin:0 auto;padding-top:var(--tband-top);width:742px;text-align:center;
  font:400 58px/66px var(--manrope);letter-spacing:-1px;color:var(--titulo)}
.t-bandeiras b{font-weight:700;color:var(--roxo)}

/* o embrulho é alto (326 + percurso); o miolo gruda no meio da tela e o trilho desliza em X */
.cards-pin{position:relative;margin-top:var(--cards-mt);height:calc(326px + var(--cards-percurso,0px));overflow-x:clip;overflow-y:visible}
.cards-fixo{position:sticky;top:max(90px,calc(50vh - 260px));height:326px}
.cards{position:relative;display:flex;gap:24px;padding:0 60px;height:326px;width:max-content;will-change:transform}
.card{position:relative;flex:none;width:408px;height:330px;border-radius:22px;background:var(--roxo);overflow:hidden;
  box-shadow:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.card:nth-child(even){margin-top:71px}
.card:hover{transform:translateY(-8px)}
.card.aberto{z-index:5;transform:none}
.c-rosa,.c-roxo{background:var(--roxo)}
.card-topo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;width:100%;height:330px;padding:0 26px 30px;
  border-radius:22px;overflow:hidden;text-align:center}
/* onda do Figma: painel 382×209 com raio 240 (o CSS reduz o raio como o Figma), gradiente branco 5% → 22%, sangrando os lados e o pé do card */
.card-topo::before{content:"";position:absolute;left:-9.7%;width:119.4%;bottom:-17px;height:209px;border-radius:240px;
  background:linear-gradient(180deg,rgba(255,255,255,.05) 40%,rgba(255,255,255,.22) 100%);pointer-events:none}
.card-painel::before{content:"";position:absolute;left:108px;top:-280px;width:480px;height:480px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.05) 40%,rgba(255,255,255,.22) 100%);pointer-events:none}
.card-icone{position:absolute;left:calc(50% - 35.5px);top:34px;width:71px;height:71px}
.card-seta{position:absolute;right:26px;top:28px;width:20px;height:20px;color:#fff;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.card:hover .card-seta{transform:translate(4px,-4px)}
.card.aberto .card-seta{transform:rotate(90deg)}
.card-topo h3{position:relative;z-index:1;font:600 22px/30px var(--manrope);color:#fff}
.card-topo p{position:relative;z-index:1;font:500 14px/22px var(--manrope);letter-spacing:.3px;color:#fff}
/* painel de pautas: dropdown que abre sob o card sem empurrar o trilho */
.card-painel{position:absolute;left:0;top:330px;width:100%;height:387px;border-radius:16px;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-14px);pointer-events:none;
  box-shadow:0 30px 60px -20px rgba(41,10,95,.35);
  transition:opacity .4s,transform .55s cubic-bezier(.22,1,.36,1),visibility 0s .4s}
.card.aberto .card-painel{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.c-rosa .card-painel,.c-roxo .card-painel{background:var(--roxo-claro)}
.card-painel-in{position:relative;padding:21px 24px 0 26px}
.card-painel h4{font:600 16px/36px var(--manrope);color:var(--texto)}
.card-painel ul{margin:21px 0 0 -2px;display:flex;flex-direction:column;gap:9px}
.card-painel li{display:flex;align-items:center;gap:8px;height:27px;font:500 14px/27.2px var(--manrope);letter-spacing:.32px;color:var(--texto);white-space:nowrap}
.card-painel li svg{flex:none;width:20px;height:20px;color:var(--check)}

/* =====================================================================
   BANDEIRAS EM LEQUE (desktop) — card ativo no centro, vizinhos abertos
   em leque atrás; pautas do card ativo embaixo; setas + pontos
   ===================================================================== */
.leque-pautas,.leque-nav{display:none}
@media (min-width:1024px){
  .cards-pin{height:auto;margin-top:110px;overflow-x:clip;overflow-y:visible}
  .cards-fixo{position:static;height:auto}
  /* sem máscara nenhuma: os cards aparecem inteiros, com as bordas à vista, como no Figma */
  .cards{position:relative;display:block;width:100%;height:470px;padding:0;perspective:1600px;transform:none!important}
  .card{position:absolute;left:calc(50% - 160px);top:40px;width:320px;height:390px;margin:0!important;border-radius:22px;overflow:hidden;
    transform-origin:50% 100%;will-change:transform;cursor:pointer;
    box-shadow:none;transition:none}
  .card:hover{transform:none;box-shadow:none}
  .card.ativa{cursor:default;z-index:10}
  .card-topo{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:0 26px 30px;cursor:inherit}
  .card-seta{display:none}
  .card-icone{left:calc(50% - 35.5px);top:120px;width:71px;height:71px;transition:top .55s cubic-bezier(.22,1,.36,1)}
  .card.ativa .card-icone{top:72px}
  .card-topo h3,.card-topo p{width:auto;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1)}
  .card-topo h3{font:600 22px/30px var(--manrope)}
  .card-topo p{font:500 14px/22px var(--manrope);letter-spacing:.3px;transition-delay:.08s}
  .card.ativa .card-topo h3,.card.ativa .card-topo p{opacity:1;transform:none}
  .card-painel{display:none}

  .leque-pautas{display:block;position:relative;max-width:760px;margin:6px auto 0;text-align:center;min-height:190px}
  .leque-pautas .selo{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 10px 30px -12px rgba(41,10,95,.35);display:grid;place-items:center;margin:0 auto 18px;color:var(--roxo)}
  .leque-pautas .selo svg{width:22px;height:22px}
  .leque-pautas h4{margin:0 0 14px;font:600 16px/1 var(--manrope);letter-spacing:.2px;color:var(--titulo)}
  .leque-pautas ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
  .leque-pautas li{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;background:#fff;font:500 14px/1 var(--manrope);color:var(--texto);
    box-shadow:0 8px 24px -14px rgba(41,10,95,.25)}
  .leque-pautas li svg{width:18px;height:18px;color:var(--check)}
  .leque-pautas.rosa li{background:var(--rosa-claro)}
  .leque-pautas.roxo li{background:var(--roxo-claro)}

  .leque-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
  .leque-seta{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(107,29,232,.22);background:#fff;color:var(--roxo);display:grid;place-items:center;transition:transform .3s,background .3s,color .3s}
  .leque-seta:hover{background:var(--roxo);color:#fff;transform:scale(1.06)}
  .leque-seta svg{width:18px;height:18px}
  .leque-pontos{display:flex;align-items:center;gap:8px}
  .leque-pontos span{width:7px;height:7px;border-radius:999px;background:rgba(117,106,134,.35);transition:width .45s cubic-bezier(.22,1,.36,1),background .3s;cursor:pointer}
  .leque-pontos span.on{width:26px;background:var(--roxo)}
}

/* =====================================================================
   NOTÍCIAS (mesmo desenho aplicado no site.html do Worker)
   ===================================================================== */
.noticias{position:relative;width:1200px;margin:23px auto 0;padding:56px 24px 72px;z-index:2}
.not-cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;height:75px}
.not-cabeca h2{font:400 58px/60.3px var(--manrope);letter-spacing:-2.49px;color:var(--titulo);padding-top:14px}
.not-todas{font:600 14px/14px var(--inter);color:var(--roxo-escuro);padding-bottom:6px;white-space:nowrap;transition:transform .3s}
.not-todas:hover{transform:translateX(4px)}
.not-grade{display:grid;grid-template-columns:646px 462px;gap:44px;margin-top:38px;align-items:start}
.ph{position:relative;display:block;overflow:hidden;background:linear-gradient(150deg,#D5E2F2,#BFD0E5);border:1px solid var(--linha)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.ph svg.icf{position:absolute;inset:0;margin:auto;width:32px;height:32px;color:#8FA3BF}
.ph img.enq{inset:auto;object-fit:fill;max-width:none}
.not-destaque{display:block;width:646px}
.not-destaque:hover .ph img{transform:scale(1.04)}
.not-capa{width:646px;height:404px;border-radius:14px;margin-bottom:20px}
.not-selo{position:absolute;right:6px;bottom:6px;width:321px;height:42px;pointer-events:none}
.not-selo img{position:static;width:321px;height:42px;object-fit:fill}
.not-tag{display:inline-block;font:600 11px/11px var(--inter);letter-spacing:1.1px;text-transform:uppercase;color:var(--gelo);padding:6px 10px;border-radius:6px}
.t-roxo{background:var(--roxo)}
.t-rosa{background:var(--rosa)}
.not-titulo{display:block;margin-top:14px;width:589px;font:400 38px/43.3px var(--manrope);color:var(--tinta);transition:color .2s}
.not-destaque:hover .not-titulo{color:var(--roxo)}
.not-resumo{display:block;margin-top:10px;width:496px;font:400 16.5px/26.4px var(--inter);color:var(--tinta);opacity:.7}
.not-meta{display:block;margin-top:13px;padding-bottom:10px;font:500 13px/19.5px var(--inter);color:var(--tinta);opacity:.5}
.not-meta b{font-weight:600}
.not-lista{display:flex;flex-direction:column;width:462px}
.not-item{display:flex;gap:18px;padding:20px 0;height:178px;border-bottom:1px solid var(--linha)}
.not-item:last-child{border-bottom:0}
.not-item:hover .ph img{transform:scale(1.06)}
.not-thumb{flex:none;width:96px;height:96px;border-radius:10px}
.not-thumb svg.icf{width:22px;height:22px}
.not-item-txt{display:block;width:348px;padding-top:4px}
.not-item .not-tag{font-size:10px;line-height:10px;letter-spacing:1px;padding:5px 8px}
.not-item-titulo{display:block;margin-top:10px;font:400 18.5px/24px var(--manrope);letter-spacing:-.28px;color:var(--tinta);transition:color .2s}
.not-item:hover .not-item-titulo{color:var(--roxo)}
.not-data{display:block;margin-top:6px;font:500 13px/19.5px var(--inter);color:var(--tinta);opacity:.5}

/* =====================================================================
   BANNER INSTAGRAM
   ===================================================================== */
.banner{position:relative;display:block;width:1270px;height:294px;margin:48px auto 0;border-radius:60px;overflow:hidden;
  background:var(--roxo);z-index:2;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.banner:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(41,10,95,.45)}
.banner-barra{position:absolute;left:-425px;top:-473px;width:1471px;height:1394px;pointer-events:none}
.banner-perfil{position:absolute;left:45px;top:74px;display:flex;align-items:center;gap:27px}
.banner-avatar{width:125px;height:125px;border-radius:33px;object-fit:cover}
.banner-nome{display:flex;flex-direction:column;width:199px}
.banner-nome b{font:500 29.4px/40.4px var(--manrope);color:var(--tinta)}
.banner-nome i{font:400 19.6px/40.4px var(--manrope);font-style:normal;color:var(--tinta);opacity:.6;margin-top:-8.5px}
.banner-seguir{position:relative;display:block;width:88px;height:48px;margin-top:7px}
.banner-seguir .cursor{position:absolute;left:0;top:1px;width:32px;height:32px;transform-origin:70% 70%;animation:cursor-toque 4.2s ease-in-out 2s infinite}
@keyframes cursor-toque{0%,58%,100%{translate:0 0;scale:1}66%{translate:-4px -4px;scale:1}74%{translate:2px 2px;scale:.88}82%{translate:0 0;scale:1}}
@media (prefers-reduced-motion:reduce){.banner-seguir .cursor{animation:none}}
.banner-seguir span{position:absolute;left:27px;top:26px;width:61px;height:22px;border-radius:6.5px;background:var(--rosa);
  font:700 10.8px/22px var(--manrope);letter-spacing:1.08px;color:var(--gelo);text-align:center;transition:transform .3s}
.banner:hover .banner-seguir span{transform:scale(1.06)}
.banner-foto{position:absolute;left:363px;top:0;width:329px;height:436px;object-fit:cover;pointer-events:none}
.banner-texto{position:absolute;left:674px;top:64px;width:461px;font:400 32px/38px var(--manrope);color:var(--fundo)}
.banner-texto b{font-weight:600}
.banner-prova{position:absolute;left:735px;top:210px;display:flex;align-items:center;gap:5px;height:44px}
.banner-avatares{display:flex;gap:4px;padding:2px;height:44px;border-radius:22px;background:var(--roxo-noite);backdrop-filter:blur(10px)}
.banner-avatares img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.banner-prova-txt{width:226px;font:400 15px/20px var(--manrope);letter-spacing:-.16px;color:#fff}
.banner-prova-txt b{font-weight:600}

/* =====================================================================
   SANTINHO + RODAPÉ (fundo roxo escuro, sangra a tela toda)
   ===================================================================== */
.santinho{position:relative;margin-top:100px;height:949px;color:var(--gelo);z-index:1}
.santinho::before{content:"";position:absolute;left:50%;top:0;width:100vw;height:100%;transform:translateX(-50%);background:var(--roxo-escuro);z-index:-1}
.san-bloco{position:absolute;left:calc(50% - var(--san-bloco) / 2);top:0;width:var(--san-bloco);height:100%}
.san-texto{position:absolute;left:0;top:var(--san-titulo-y);width:var(--san-texto-w)}
.san-texto h2{font:400 64px/68px var(--manrope);letter-spacing:-2.73px;color:var(--gelo)}
.san-texto h2 b{font-weight:600}
.san-texto p{margin-top:26px;width:440px;font:500 18px/30px var(--manrope);letter-spacing:.32px;color:var(--gelo)}
.san-card{position:absolute;left:var(--san-card-x);top:101px;width:397px;height:496px;border-radius:30px;display:block;
  filter:drop-shadow(0 46px 60px rgba(23,6,52,.35));transform-style:preserve-3d;will-change:transform}
.san-card img{width:397px;height:496px;border-radius:30px}
.btn-amarelo{position:absolute;left:0;top:var(--btn-y);display:flex;align-items:center;justify-content:space-between;
  width:323px;height:64px;padding:0 14px 0 26px;border-radius:999px;background:var(--amarelo);
  box-shadow:0 65px 65px rgba(247,198,36,.14),0 35.7px 35.7px rgba(247,198,36,.10),0 20.7px 20.7px rgba(247,198,36,.09),
    0 12.7px 12.7px rgba(247,198,36,.08),0 7.8px 7.8px rgba(247,198,36,.07),0 4.7px 4.7px rgba(247,198,36,.07),
    0 2.6px 2.6px rgba(247,198,36,.06),0 1.1px 1.1px rgba(247,198,36,.06);
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.btn-amarelo:hover{transform:translateY(-3px)}
.btn-amarelo > span:first-child{font:700 16px/27.2px var(--manrope);letter-spacing:.32px;color:rgba(0,0,0,.6)}
.btn-circ{width:36px;height:36px;border-radius:50%;background:#000;display:grid;place-items:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.btn-circ svg{width:20px;height:20px;color:var(--amarelo)}
.btn-amarelo:hover .btn-circ{transform:rotate(45deg)}

.rodape{position:absolute;left:calc(50% - 531.5px);top:690px;width:1063px;height:259px}
.rod-linha{position:absolute;left:50%;top:0;width:1440px;max-width:100vw;height:1px;transform:translateX(-50%);background:rgba(225,238,252,.5)}
.rod-marca{position:absolute;left:0;top:51px;width:331px;display:flex;flex-direction:column;align-items:center;gap:18px}
.rod-logos{display:flex;align-items:center;gap:16px;height:69px}
.rod-logos img:first-child{width:212px;height:70px}
.rod-div{width:1px;height:42px;background:#116FDA}
.rod-logos img:last-child{width:86px;height:42px}
.rod-legal{width:278px;text-align:center;font:500 12px/20.4px var(--manrope);letter-spacing:.36px;color:var(--gelo)}
.rod-baixo{position:absolute;left:0;top:202px;display:flex;gap:16px;font:500 12px/20.4px var(--manrope);letter-spacing:.36px;color:var(--gelo);white-space:nowrap}
.rod-baixo span{opacity:.6}
.rod-baixo .rod-links{opacity:1}
.rod-baixo a:hover{text-decoration:underline}
.rod-nav{position:absolute;left:901px;top:47px;display:flex;flex-direction:column;gap:11px}
.rod-nav a{display:flex;align-items:center;gap:4px;height:27px;font:500 16px/27.2px var(--manrope);letter-spacing:.32px;color:var(--gelo);transition:transform .3s}
.rod-nav a svg{width:20px;height:20px;color:var(--gelo);transition:transform .3s}
.rod-nav a:hover{transform:translateX(3px)}
.rod-nav a:hover svg{transform:translate(2px,-2px)}
.rod-linha-m,.rod-legal-m,.so-m{display:none}

/* =====================================================================
   1920 (frame 3660:31622) — a partir de 1920 de largura
   ===================================================================== */
@media (min-width:1920px){
  :root{
    --pg:1920px; --barra-h:200px;
    --logo-x:146px; --nav-dir:146px;
    --foto-x:814px; --foto-corte-esq:6px; --foto-corte-dir:60px;
    --tag-x:165px; --tag-y:261px;
    --sub-x:200px; --sub-y:632px;
    --mq-hero-top:743px; --mq-hero-alt:229px; --mq-hero-origem:4328.5px; --mq-hero-off:78.5px; --mq-origem:4328.5px;
    --h1x:77px; --h2x:501px; --hgap:140px;
    --band-x:403px; --band-y:75px;
    --tband-top:495px; --cards-mt:169px; --mq-meio-mt:51px;
    --san-bloco:1140px; --san-texto-w:633px; --san-titulo-y:141px; --san-card-x:743px; --btn-y:493px;
  }
  .barra-1440{display:none}
  .barra-1920{display:block}
}

/* =====================================================================
   2560 (frame 3660:32489) — a partir de 2560 de largura
   ===================================================================== */
@media (min-width:2560px){
  :root{
    --pg:2560px; --hero-h:937px; --barra-h:217px;
    --logo-x:311px; --logo-y:54px; --nav-y:66px; --nav-dir:311px;
    --foto-x:1111px; --foto-y:55px; --foto-w:942px; --foto-h:797px; --foto-corte-esq:24px; --foto-corte-dir:81px;
    --tag-x:310px; --tag-y:234px; --tag-w:678px; --tag-h:385px; --tag-escala:1.163;
    --sub-x:345px; --sub-y:678px; --sub-w:570px;
    --h1x:302px; --h2x:907px; --hist-top:137px;
    --mq-hero-origem:4008.5px; --mq-origem:4008.5px;
    --band-x:666px; --band-y:75px;
  }
  .barra-1920{display:none}
  .barra-2560{display:block}
}

/* =====================================================================
   TELAS ENTRE 1024 E 1440 — escala a página toda a partir do 1440
   ===================================================================== */
@media (min-width:1024px) and (max-width:1439px){
  body{--escala:calc(100vw / 1440)}
  .pg{zoom:var(--escala)}
}

/* =====================================================================
   MOBILE 440 (frame 3647:26069)
   ===================================================================== */
@media (max-width:1023px){
  :root{--pg:100%}
  .pg{width:100%}

  /* hero */
  .hero{height:967px;overflow:hidden}
  .hero-fundo{height:912px;-webkit-mask-image:none;mask-image:none}
  .barra-1440,.barra-1920,.barra-2560{display:none}
  .barra-m{display:block;height:132px}
  .hero-foto{left:calc(50% - 208px);top:449px;width:416px;height:439px;overflow:hidden;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 31px),0 calc(100% - 14px))}
  .hero-foto img{width:416px;height:439px}
  .topo{left:0;right:0;top:36px;height:37px;justify-content:center}
  .topo-logo{height:37px}
  .logo-d{display:none}
  .topo-logo .logo-m{display:block;height:37px;width:287px}
  .topo-nav{display:none}
  .hero-tag{left:calc(50% - 167px);top:152px;width:310px;height:175px}
  .tag-pecas-d{display:none}
  .tag-pecas-m{display:block}
  .hero-sub{left:calc(50% - 157.5px);top:347px;width:315px;font:400 18px/27px var(--manrope);text-align:center}
  .marquee-hero{top:844px;height:87px}
  .marquee-meio{height:87px;margin-top:71px}
  .marquee-faixa{left:calc(50% - 900px)!important;top:18.5px!important;width:1800px;height:44px;border-radius:7.5px;transform:rotate(-2.35deg);
    transform-origin:900px 50%!important;padding:11.5px 0;box-shadow:inset -2px -12px 36px rgba(255,255,255,.25)}
  .marquee-trilho{gap:30.7px;animation-duration:30s}
  .marquee-trilho img{height:20px;width:157px;transform:rotate(2.16deg)}
  .marquee-trilho svg.estrela{width:32px;height:32px;color:var(--gelo)}
  .marquee-trilho svg.coracao{width:31px;height:27px;color:var(--marquee-m)}

  /* história: 1008 · foto 1132 · texto 1581 · foto 2 1875 · texto 2329 */
  .hist{padding:41px 45px 0}
  .hist-linha{flex-direction:column;align-items:center;gap:40px;height:auto;padding-left:0}
  .hist-1 .hist-texto{margin:0;display:contents}
  .hist-1 .t-hist{order:-1}
  .hist-2{margin-top:49px;flex-direction:column-reverse}
  .hist-2 .hist-texto{margin:0;gap:30px}
  .hist-2 .t-hist{display:none}
  .hist-foto{width:370px;height:408px;margin:0 -10px}
  .hist-foto img{width:370px;height:408px}
  .hist-2 .hist-foto{width:376px;height:414px;margin:0 -13px}
  .hist-2 .hist-foto img{width:376px;height:414px}
  .hist-texto{width:100%;max-width:350px}
  .t-hist{width:100%;max-width:350px;text-align:center;font:500 36px/42px var(--mona);letter-spacing:-1px}
  .t-hist b{font-weight:600;display:inline}
  .hist-texto p,.hist-texto .p-menor{font:500 16px/27.2px var(--manrope);letter-spacing:.32px}
  .hist-texto p + p{margin-top:0}

  /* bandeira cola no fim do texto (2847); título +268; cards +50 */
  .bandeiras{margin-top:-2px}
  .bandeira-img{left:calc(50% - 417px);top:48px;width:553px;height:851px}
  .bandeira-img img{width:553px;height:851px;transform:rotate(17deg)}
  .t-bandeiras{padding-top:268px;width:100%;max-width:408px;font:400 36px/42px var(--manrope);letter-spacing:-1px}
  .cards-pin{margin-top:50px;height:auto}
  .marquee-meio{margin-top:71px}
  .cards-fixo{position:static;height:auto}
  .cards{flex-direction:column;align-items:center;gap:30px;padding:0 16px;height:auto;width:100%;transform:none!important}
  .card{width:408px;max-width:100%;transition:height .55s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
  .card:nth-child(even){margin-top:0}
  .card:hover{transform:none}
  .card.aberto{height:717px}
  .card-painel{position:absolute;box-shadow:none;transform:translateY(20px)}
  .card-painel li{white-space:normal;height:auto;min-height:27px}

  /* notícias */
  .noticias{width:100%;margin:36px 0 0;padding:14px 46px 0}
  .not-cabeca{flex-direction:column;align-items:flex-start;height:auto;gap:9px}
  .not-cabeca h2{font:500 36px/42px var(--manrope);letter-spacing:-1px;color:var(--roxo);padding-top:12px}
  .not-todas{font:600 12.35px/12.35px var(--manrope);padding-bottom:5px}
  .not-grade{grid-template-columns:1fr;gap:11px;margin-top:42px}
  .not-destaque{width:100%}
  .not-capa{width:100%;height:216px;border-radius:12px;margin-bottom:18px}
  .not-selo{display:none}
  .not-tag{font:600 9.7px/9.7px var(--manrope);letter-spacing:.97px;color:var(--fundo);padding:5px 8px;border-radius:5px}
  .not-titulo{width:100%;margin-top:11px;font:400 22.9px/31px var(--manrope);letter-spacing:-.69px;color:#1F1618}
  .not-resumo{width:100%;margin-top:9px;font:400 14.6px/23.3px var(--manrope);color:#5A6270;opacity:1}
  .not-meta{margin-top:11px;padding-bottom:11px;font:500 11.5px/17.2px var(--manrope);color:#5A6270;opacity:1}
  .not-lista{width:100%}
  .not-item{gap:16px;padding:18px 0;height:auto;min-height:158px;border-color:#EFF6FD}
  .not-thumb{width:85px;height:85px;border-radius:9px;border-color:#EFF6FD}
  .not-item-txt{width:auto;flex:1;padding-top:4px}
  .not-item .not-tag{font:600 8.8px/8.8px var(--manrope);letter-spacing:.88px;padding:4.5px 8px}
  .not-item-titulo{margin-top:8px;font:400 14px/20px var(--manrope);letter-spacing:-.24px;color:#1F1618}
  .not-data{margin-top:9px;font:500 11.5px/17.2px var(--manrope);color:#8C96A6;opacity:1}

  /* banner: componente mobile do Figma (3674:41719) — 408×560, área clara em curva no topo
     (banner-clara-m.svg), perfil em cima, chamada no meio, prova social embaixo, foto à direita */
  .banner{width:calc(100% - 32px);max-width:408px;height:560px;margin:0 auto;border-radius:40px;background:var(--roxo-escuro);overflow:hidden}
  .banner::before{content:"";position:absolute;left:0;top:0;width:490px;height:233px;
    background:url(../assets/svg/banner-clara-m.svg) no-repeat 0 0/490px 233px;pointer-events:none}
  .banner-barra{display:none}
  .banner-perfil{left:44px;top:41px;gap:24px}
  .banner-avatar{width:110px;height:110px;border-radius:29px}
  .banner-nome{width:178px}
  .banner-nome b{font:600 25.9px/38.4px var(--manrope)}
  .banner-nome i{font:500 16.2px/38.4px var(--manrope);margin-top:-12.4px}
  .banner-seguir{display:none}
  .banner-foto{left:154px;top:148px;right:auto;bottom:auto;width:329px;height:436px;object-fit:cover}
  .banner-texto{left:23px;top:207px;width:208px;font:400 20px/29px var(--manrope)}
  .banner-prova{left:23px;top:374px;bottom:auto;height:auto;flex-direction:column;align-items:flex-start;gap:8px}
  .banner-prova-txt{width:146px;font-size:14px;line-height:19px;letter-spacing:0}

  /* santinho 27px depois do banner; rodapé na ordem do Figma */
  .santinho{margin-top:27px;height:auto;padding:56px 0 48px}
  .san-bloco{position:relative;left:auto;width:auto;height:auto}
  .san-texto{position:relative;left:auto;top:auto;width:auto;margin:0 42px;text-align:center}
  .san-texto h2{font:400 34px/38px var(--manrope);letter-spacing:-1.2px;color:var(--creme)}
  .so-d{display:none}
  .so-m{display:inline}
  .san-texto p{width:auto;margin:18px 10px 0;font:400 16px/26px var(--manrope);letter-spacing:0;color:var(--creme);opacity:.86}
  .san-card{position:relative;left:auto;top:auto;width:296px;height:370px;margin:15px auto 0;border-radius:23px;filter:drop-shadow(0 34.7px 46px rgba(23,6,52,.35))}
  .san-card img{width:296px;height:370px;border-radius:23px}
  .btn-amarelo{position:relative;left:auto;top:auto;width:296px;margin:29px auto 0}
  .rodape{position:relative;left:auto;top:auto;width:auto;height:auto;margin-top:58px;display:flex;flex-direction:column;align-items:stretch}
  .rod-linha{display:none}
  .rod-marca{position:relative;left:auto;top:auto;width:auto;margin:0 auto;gap:0;order:1}
  .rod-legal{display:none}
  .rod-nav{position:relative;left:auto;top:auto;margin:35px 16px 0;gap:16px;order:2}
  .rod-nav a{justify-content:space-between;width:100%}
  .rod-baixo{position:relative;left:auto;top:auto;flex-direction:column;align-items:center;gap:0;margin-top:34px;text-align:center;white-space:normal;order:3}
  .rod-linha-m{display:block;height:1px;background:rgba(225,238,252,.5);margin:21px -20px 0;order:4}
  .rod-legal-m{display:block;margin:21px auto 0;width:278px;text-align:center;font:500 12px/20.4px var(--manrope);letter-spacing:.36px;color:var(--gelo);order:5}
}