/* ============================================================
   Bete Deputada 15000 — estilos
   ============================================================ */

:root{
  --indigo:        #2911b4;   /* header + hero base — Figma "azul 1" */
  --indigo-deep:   #230faa;   /* seção bandeiras */
  --blue-hero:     #2f6fd6;   /* lado direito do hero */
  --pink:          #ff1e8b;   /* CTA principal — Figma "rosa 1" */
  --pink-dark:     #e00a7d;   /* hover CTA */
  --yellow:        #f7d31e;   /* banner CTA final — Figma "amarelo 1" */
  --gold:          #ebbe00;   /* botão amarelo bandeiras */
  --gold-dark:     #cfa500;
  --teal:          #2fece5;   /* ícone check — Figma "ciano 1" */
  --cream:         #faf2ea;   /* texto sobre rosa/azul — Figma */
  --ink:           #1c1340;   /* títulos escuros */
  --body:          #3f3f46;   /* texto corrido */
  --footer-bg:     #1f1f1f;
  --footer-text:   #9a9a9a;
  --ph-bg:         #e9e9ee;   /* placeholder de foto */
  --ph-fg:         #9aa0aa;
  --card-dark:     #141414;   /* caption dos cards de foto */
  --maxw:          1120px;
  --hero-zoom:     113%;   /* ampliação da arte do hero */
  --quem-gap:      8%;     /* respiro entre a foto e a copy em "Quem é Bete?" */

}

*,*::before,*::after{ box-sizing:border-box; }

/* Transição suave só de cores — troca de tema (escuro / alto contraste).
   Só background-color/color/border-color: não toca transform, opacity,
   box-shadow nem @keyframes, então hover dos cards, entrada do hero e
   carrossel continuam intactos. Elementos com transition própria
   (.btn, .foto-card, .a11y-pill...) mantêm a deles por especificidade.
   O media query prefers-reduced-motion já zera tudo isso. */
*,*::before,*::after{
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--body);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

.center{ text-align:center; }

/* ---------- Títulos de seção ---------- */
.section-title{
  font-weight:800;
  font-size:clamp(1.8rem,3.5vw,2.4rem);
  color:var(--ink);
  letter-spacing:-.01em;
  margin:0 0 2.5rem;
}
.section-title.light{ color:#fff; }

/* ---------- Botões ---------- */
.btn{
  display:inline-block;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:16px 34px;
  border-radius:8px;
  cursor:pointer;
  border:none;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease, box-shadow .25s ease;
}
.btn-pink{ background:var(--pink); color:#fff; }
.btn-pink:hover{ background:var(--pink-dark); transform:scale(1.04); box-shadow:0 10px 24px rgba(255,30,139,.35); }
.btn-yellow{ background:var(--gold); color:var(--ink); }
.btn-yellow:hover{ background:var(--gold-dark); transform:scale(1.04); box-shadow:0 10px 24px rgba(235,190,0,.4); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  background:var(--indigo);
  position:relative;
  z-index:30;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
}

/* logo = lockup real do Figma (recortado de Frame 1171276178.png) */
.logo{ display:flex; align-items:center; }
.logo-img{ display:block; width:148px; height:auto; }

.site-nav{ display:flex; gap:34px; margin-left:auto; }
.site-nav a{
  color:#fff;
  font-size:.9rem;
  font-weight:500;
  transition:color .2s ease;
}
.site-nav a:hover{ color:var(--yellow); }

.header-right{ display:flex; align-items:center; gap:20px; }
.social{ display:flex; gap:12px; list-style:none; margin:0; padding:0; }
.social a{
  width:26px; height:26px;
  display:grid; place-items:center;
  color:#fff;
  border-radius:5px;
  transition:background-color .2s ease, transform .2s ease;
}
.social a:hover{ background:rgba(255,255,255,.15); transform:translateY(-2px); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:pointer;
  padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.25s; }

/* ============================================================
   HERO — arte do Figma (Frame 1171276176, 1916×610) com a copy
   removida da imagem. A copy é texto real sobreposto, medido em %
   e cqw a partir do PNG original, então acompanha a arte em qualquer
   largura. Assim ela anima, escala, é selecionável e indexável.
   ============================================================ */
.hero{
  position:relative;
  /* branco: na sobreposição a arte cobre tudo; quando a copy vira bloco
     (mobile / acessibilidade) ela cai sobre branco, como no desktop */
  background:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero-art{
  position:relative; display:block; line-height:0;
  container-type:inline-size;   /* cqw = % da largura da arte, não da janela
                                   (imune à barra de rolagem) */
  /* A arte é 3.14:1 — em tela larga ficaria uma faixa baixa. Amplia a
     composição inteira e sangra pelas laterais (o .hero corta). Como a
     copy é posicionada em % e cqw DESTA caixa, ela acompanha o zoom. */
  width:var(--hero-zoom);
  margin-left:calc((100% - var(--hero-zoom)) / 2);
}
/* --- camadas do hero ------------------------------------------------
   hl-bg define a altura da caixa; as outras duas flutuam por cima nas
   posições medidas. Todas entram encolhendo DE UM TAMANHO MAIOR para o
   final: assim a camada nunca descobre o fundo que fica atrás dela. */
.hero-layer{ display:block; opacity:0; }
.hl-bg{
  width:100%; height:auto;
  animation:layerFade .7s ease forwards;
}
/* --- deriva das nuvens ---------------------------------------------
   O céu está achatado dentro de hero-bg.png, então não há camada
   separada para animar. Esta é uma segunda cópia da MESMA imagem,
   alinhada em cima da original e mascarada ao triângulo do céu
   (vértices ~0,0 / 375,0 / 0,275 de 1916×610). A máscara desvanece
   antes da cunha branca, então o deslocamento não cria emenda dura.
   Desloca só para a ESQUERDA: assim a borda esquerda nunca descobre
   (sai da caixa, cortada pelo .hero) e a direita já é transparente. */
.hero-sky-drift{
  position:absolute;
  inset:0;
  background:url('assets/hero-bg.png') 0 0 / 100% 100% no-repeat;
  /* máscara gerada dos próprios pixels do céu, com borda esfumada em
     ~38px: a emenda entre a cópia deslocada e o fundo estático some */
  -webkit-mask:url('assets/hero-sky-mask.png') 0 0 / 100% 100% no-repeat;
          mask:url('assets/hero-sky-mask.png') 0 0 / 100% 100% no-repeat;
  will-change:transform;
  opacity:0;                       /* entra junto com o fundo */
  animation:layerFade .7s ease forwards,
            skyDrift 19s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes skyDrift{
  from{ transform:translateX(0); }
  to  { transform:translateX(-12px); }
}

/* o lockup "CUIDAR / me move" flutua de leve, como um selo solto */
.hl-map-wrap{
  position:absolute;
  left:61.900%; top:16.393%; width:22.182%;
  display:block; line-height:0;
  transform-origin:center center;
  animation:lockupSway 7.5s ease-in-out 1.2s infinite alternate;
}
@keyframes lockupSway{
  from{ transform:translateY(-3px) rotate(-.5deg); }
  to  { transform:translateY(3px)  rotate(.5deg);  }
}
.hl-map{
  width:100%; height:auto;
  transform-origin:center center;
  animation:layerIn .85s cubic-bezier(.22,.61,.36,1) .28s forwards;
}
.hl-bete{
  position:absolute;
  left:41.597%; top:2.623%; width:24.739%; height:auto;
  transform-origin:bottom center;
  animation:layerIn .85s cubic-bezier(.22,.61,.36,1) .12s forwards;
}
.hero-flat{ display:none; }

@keyframes layerFade{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes layerIn{
  from{ opacity:0; transform:scale(1.09); }
  to  { opacity:1; transform:scale(1); }
}

/* posições medidas no PNG: copy começa em x=360, título em y=106,
   parágrafo em y=257, botão em x 360–646 / y 345–406 */
.br-mob{ display:none; }   /* quebras do título mudam entre desktop e mobile */

.hero-copy{
  position:absolute;
  left:18.79%; top:15.72%;
  width:26.5%;
  line-height:1.6;
  color:#444343;          /* cor real do texto no Figma */
}
.hero-title{
  margin:0;
  font-size:2.296cqw;     /* 44px @1916 */
  line-height:1.159;      /* 51px */
  font-weight:700;
  letter-spacing:-.01em;
  color:#444343;
}
.hero-text{
  margin:.159cqw 0 1.409cqw;
  font-size:.887cqw;      /* 17px @1916 */
  line-height:1.294;      /* 22px */
  color:#444343;
}
.hero-cta{
  display:grid; place-items:center;
  width:14.93cqw; height:3.183cqw;   /* 286×61 @1916 */
  padding:0;
  font-size:.73cqw;
  border-radius:.42cqw;
}

/* --- entrada em sequência da copy ---------------------------------- */
.hero-title,.hero-text,.hero-cta{
  opacity:0;
  animation:heroIn .75s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-title{ animation-delay:.25s; }
.hero-text { animation-delay:.45s; }
.hero-cta  { animation-delay:.62s; }
@keyframes heroIn{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:translateY(0); }
}

/* --- Fallback acessível ---------------------------------------------
   Fonte aumentada, alto contraste ou modo escuro: a arte é decoração e
   as medidas em cqw não respondem a nenhum deles. Esconde a arte e deixa
   a copy virar um bloco normal, que escala e recolore. */
html[data-fontlevel]:not([data-fontlevel="0"]) .art-br,
html[data-contrast="high"] .art-br,
html[data-theme="dark"] .art-br,
html[data-fontlevel]:not([data-fontlevel="0"]) .br-desk,
html[data-contrast="high"] .br-desk,
html[data-theme="dark"] .br-desk,
html[data-fontlevel]:not([data-fontlevel="0"]) .br-mob,
html[data-contrast="high"] .br-mob,
html[data-theme="dark"] .br-mob{ display:none !important; }

html[data-fontlevel]:not([data-fontlevel="0"]) .hero-art img,
html[data-contrast="high"] .hero-art img,
html[data-theme="dark"] .hero-art img{ display:none; }

html[data-fontlevel]:not([data-fontlevel="0"]) .hero-copy,
html[data-contrast="high"] .hero-copy,
html[data-theme="dark"] .hero-copy{
  position:static;
  width:auto; max-width:var(--maxw);
  margin:0 auto;
  padding:70px 24px 90px;
}
html[data-fontlevel]:not([data-fontlevel="0"]) .hero-title,
html[data-contrast="high"] .hero-title,
html[data-theme="dark"] .hero-title{
  font-size:clamp(2rem,4vw,2.9rem); line-height:1.12; margin:0 0 1.1rem;
}
html[data-fontlevel]:not([data-fontlevel="0"]) .hero-text,
html[data-contrast="high"] .hero-text,
html[data-theme="dark"] .hero-text{
  font-size:.98rem; line-height:1.6; margin:0 0 2rem; max-width:44ch;
}
html[data-fontlevel]:not([data-fontlevel="0"]) .hero-cta,
html[data-contrast="high"] .hero-cta,
html[data-theme="dark"] .hero-cta{
  display:inline-block;
  width:auto; height:auto;
  padding:16px 34px;
  font-size:.78rem;
  border-radius:8px;
}

/* faixa de ícones colorida — asset real do Figma (assets/pattenr.png),
   1920×72 = 27 tiles. Repetida no eixo X e rolada continuamente. */
.hero-iconstrip{
  position:relative;
  height:48px;
  overflow:hidden;
  background:var(--indigo) url('assets/pattenr.png') repeat-x left center;
  background-size:auto 48px;   /* 1 ciclo = 1920 × 48/72 = 1280px */
  will-change:background-position;
  animation:strip-scroll 40s linear infinite;
  z-index:2;
}
@keyframes strip-scroll{
  from{ background-position-x:0; }
  to  { background-position-x:-1280px; }
}

/* ============================================================
   VÍDEO
   ============================================================ */
.video-section{ padding:70px 0; background:#fff; }
.video-embed{
  display:block;
  width:100%;
  max-width:945px;           /* tamanho do frame no Figma */
  margin:0 auto;
  aspect-ratio:945 / 504;    /* 1.875:1 — proporção medida no Figma */
  background:#000;
  border-radius:16px;
  object-fit:cover;          /* vídeo é 16:9, corte horizontal de ~5% */
}

/* ============================================================
   QUEM É BETE
   ============================================================ */
.quem-section{ padding:80px 0; background:#fff; }
/* proporções medidas na referência do Figma: foto 46% da área de
   conteúdo, respiro 5.4%, coluna de texto 48.6% */
.quem-inner{
  display:grid;
  grid-template-columns:46% 1fr;
  gap:var(--quem-gap);
  align-items:start;
}
/* slideshow: mesma caixa da foto única (proporção 1166/1096 e raio de
   2.7%). As fotos ficam empilhadas e trocam por cross-dissolve. */
.quem-slides{
  position:relative;
  width:100%;
  aspect-ratio:1166 / 1096;
  border-radius:2.7%;
  overflow:hidden;
}
.quem-slide{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.4s ease-in-out;
}
.quem-slide.is-active{ opacity:1; }
/* espaçamento calibrado para o bloco de texto fechar na mesma altura
   da foto (464px @1440): 19 linhas + 2 respiros entre parágrafos */
.quem-copy p{
  margin:0 0 14px;
  font-size:.95rem;
  line-height:1.45;
  color:#444343;          /* cor real do texto no Figma */
}
.quem-copy p:last-child{ margin-bottom:0; }
.quem-title{
  color:#444343;
  line-height:1.15;
  /* sobe o bloco para o topo do glifo encostar no topo da foto:
     compensa a meia-entrelinha + (ascendente − altura de caixa alta) */
  margin:-.195em 0 1.5rem;
}

/* ============================================================
   FOTOS
   ============================================================ */
.fotos-section{ padding:20px 0 90px; background:#fff; }
/* carrossel: a faixa desliza sem parar; a janela corta as sobras.
   As cópias dos cards são geradas no script.js até a trilha ter o
   dobro da largura visível — só assim a emenda fica invisível. */
.fotos-carousel{
  overflow:hidden;
  width:100%;              /* fica fora do .container: largura total */
  margin-bottom:44px;
  /* respiro para a sombra e o scale(1.05) do hover não serem cortados */
  padding:14px 0 20px;
}
.fotos-track{
  display:flex;
  width:max-content;
  gap:26px;
  will-change:transform;
  animation:fotosScroll var(--fotos-dur,46s) linear infinite;
}
.fotos-track .foto-card{
  flex:0 0 340px;      /* largura fixa: a trilha não pode encolher os cards */
}
@keyframes fotosScroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - 13px)); }   /* metade + meio gap */
}
/* pausa para dar tempo de ler e clicar */
.fotos-carousel:hover .fotos-track,
.fotos-carousel:focus-within .fotos-track{ animation-play-state:paused; }
.foto-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:var(--card-dark);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  backface-visibility:hidden;
  transition:box-shadow .27s ease-out;
}
/* "cresce" — só onde há hover real (não touch) */
@media (hover:hover) and (pointer:fine){
  /* `scale` em vez de `transform`: o .reveal usa transform na entrada */
  .fotos-track .foto-card{
    transition:opacity .6s ease, transform .6s ease,
               scale .27s ease-out, box-shadow .27s ease-out;
  }
  .fotos-track .foto-card:hover{
    scale:1.05;
    box-shadow:0 18px 40px rgba(0,0,0,.28);
    transition-delay:0s;              /* sem o atraso do escalonamento */
  }
}
.foto-thumb{
  width:100%; height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  display:block;
}
/* o link cobre o card inteiro (imagem + faixa), então o cursor vira
   pointer em qualquer ponto e o :hover do card continua disparando */
.foto-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.foto-link:focus-visible{ outline-offset:-4px; }

.foto-caption{ padding:18px 20px 22px; color:#fff; }
.foto-caption h3{ margin:0 0 4px; font-size:1.05rem; font-weight:700; }
.foto-caption p{ margin:0; font-size:.78rem; color:#c9c9c9; }

/* ============================================================
   MINHAS BANDEIRAS
   ============================================================ */
.bandeiras-section{ padding:80px 0; background:var(--indigo-deep); }
.bandeiras-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:44px;
}
.bandeira-card{
  position:relative;                  /* âncora da camada de cor interna */
  background:#fff;
  border-radius:14px;
  padding:26px 22px 30px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  backface-visibility:hidden;
  transition:box-shadow .27s ease-out;
}
/* camada de cor: preenche o INTERIOR do card (mesmo tamanho e raio),
   atrás do conteúdo e sobre o branco original */
.bandeira-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:#e8f8f8;                  /* tom claro do teal da paleta */
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:opacity .27s ease-out;
}
.bandeira-card > *{ position:relative; z-index:1; }   /* conteúdo acima da camada */
html[data-theme="dark"] .bandeira-card::before{ background:#20313a; }
html[data-contrast="high"] .bandeira-card::before{ display:none; }

/* "cresce e acende" — só onde há hover real (não touch) */
@media (hover:hover) and (pointer:fine){
  /* usa a propriedade `scale` (independente de `transform`, que o .reveal usa
     na entrada) e reescreve a transição sem alterar a animação de entrada */
  .bandeiras-grid .bandeira-card{
    transition:opacity .6s ease, transform .6s ease,
               scale .27s ease-out, box-shadow .27s ease-out;
  }
  .bandeiras-grid .bandeira-card:hover{
    scale:1.05;
    box-shadow:0 14px 34px rgba(0,0,0,.22);      /* neutra, só profundidade */
  }
  .bandeiras-grid .bandeira-card:hover::before{ opacity:1; }
  /* sem atraso do stagger ao passar o mouse */
  .bandeiras-grid .bandeira-card:hover,
  .bandeiras-grid .bandeira-card:hover::before{ transition-delay:0s; }
}
.check-icon{
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--teal);
  margin-bottom:16px;
}
.bandeira-card h3{
  margin:0 0 10px;
  font-size:.98rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
}
.bandeira-card p{ margin:0; font-size:.86rem; color:var(--body); }

/* ============================================================
   CTA FINAL
   ============================================================ */
/* Medidas do banner real do Figma (cta-banner.png, 1280×547):
   caixa ROSA y189–546 (358 alto), raio 21px; pill x215 y244 157×35;
   título x216 y302–402, 3 linhas de 35px; botão AZUL x215 y428 287×62;
   foto x702–1079 y72–546 — sobe 117px acima da caixa.
   Tudo em cqw (= % da largura do banner), como no hero, para a foto
   sangrar na proporção certa em qualquer largura. */
.cta-final{ padding:80px 0 90px; background:#fff; }
/* o contêiner de consulta é o pai: cqw dentro do banner não pode
   referenciar o próprio banner (dependência circular no padding) */
.cta-final > .container{ container-type:inline-size; }
.cta-banner{
  position:relative;
  background:var(--pink);
  border-radius:1.64cqw;        /* 21/1280 */
  min-height:27.97cqw;          /* 358/1280 */
  margin-top:9.14cqw;           /* sangria da foto: 117/1280 */
  padding:4.30cqw 34cqw 4.53cqw 16.80cqw;   /* 244-189 no topo, 546-489 embaixo */
}
.cta-copy{ position:relative; z-index:2; }
.cta-pill{
  display:inline-block;
  border:.078cqw solid var(--cream);
  color:var(--cream);
  font-size:1.09cqw;
  font-weight:600;
  line-height:1;
  padding:.74cqw 2.24cqw;
  border-radius:.59cqw;         /* rx 7.5 no SVG */
  margin:0 0 1.80cqw;           /* pill acaba em 278, título começa em 302 */
}
.cta-title{
  font-size:2.344cqw;           /* 30px @1280 */
  font-weight:400;              /* o negrito é só nos trechos com <strong> */
  color:var(--cream);
  line-height:1.167;            /* 35px */
  margin:0 0 1.64cqw;           /* título acaba em 411, botão começa em 428 */
}
.cta-title strong{ font-weight:800; }
.btn-cta{ background:var(--indigo); color:var(--cream); }
.btn-cta:hover{
  background:#1c0b8c;
  transform:scale(1.04);
  box-shadow:0 10px 24px rgba(41,17,180,.35);
}
.cta-banner .btn{
  width:22.42cqw; height:4.84cqw;   /* 287×62 */
  display:grid; place-items:center;
  padding:0;
  font-size:1.02cqw;
  border-radius:.63cqw;
}
.cta-photo{
  position:absolute;
  right:15.70cqw;               /* 1280-1079 = 201 */
  bottom:0;
  width:31.02cqw;               /* 397/1280 */
  height:auto;
  z-index:1;
}

/* acessibilidade: cqw não responde a fonte aumentada / contraste.
   Volta pra medidas em rem, caixa cresce sozinha. */
html[data-fontlevel]:not([data-fontlevel="0"]) .cta-banner,
html[data-contrast="high"] .cta-banner{
  min-height:0; margin-top:0;
  padding:44px 40px 0;
  border-radius:16px;
}
html[data-fontlevel]:not([data-fontlevel="0"]) .cta-pill,
html[data-contrast="high"] .cta-pill{
  font-size:.78rem; padding:9px 16px; border-width:1.5px;
  border-radius:8px; margin-bottom:16px;
}
html[data-fontlevel]:not([data-fontlevel="0"]) .cta-title,
html[data-contrast="high"] .cta-title{
  font-size:clamp(1.4rem,2.6vw,1.8rem); margin-bottom:22px;
}
html[data-fontlevel]:not([data-fontlevel="0"]) .cta-banner .btn,
html[data-contrast="high"] .cta-banner .btn{
  display:inline-block; width:auto; height:auto;
  padding:16px 34px; font-size:.78rem; border-radius:8px;
}
html[data-fontlevel]:not([data-fontlevel="0"]) .cta-photo,
html[data-contrast="high"] .cta-photo{
  position:static; width:230px; margin:26px auto 0; right:auto;
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.site-footer{
  background:var(--footer-bg);
  padding:34px 0;
  text-align:center;
}
.site-footer p{
  margin:4px 0;
  font-size:.82rem;
  color:var(--footer-text);
  letter-spacing:.04em;
}

/* ============================================================
   PLACEHOLDER DE FOTO
   ============================================================ */
.photo-placeholder{
  background:var(--ph-bg);
  color:var(--ph-fg);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:180px;
  border:1px dashed #c4c8d0;
}
.photo-placeholder span{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
}

/* ============================================================
   ANIMAÇÕES
   ============================================================ */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:translateY(0); }
}

/* entrada do header (a copy do hero anima no bloco HERO, com heroIn) */
.site-header .logo,
.site-nav a,
.social li,
.nav-toggle{
  opacity:0;
  animation:fadeUp .6s ease forwards;
}
/* cascata da esquerda para a direita: logo, menu, redes */
.site-header .logo    { animation-delay:.05s; }
.site-nav a:nth-child(1){ animation-delay:.15s; }
.site-nav a:nth-child(2){ animation-delay:.22s; }
.site-nav a:nth-child(3){ animation-delay:.29s; }
.site-nav a:nth-child(4){ animation-delay:.36s; }
.social li:nth-child(1) { animation-delay:.44s; }
.social li:nth-child(2) { animation-delay:.50s; }
.nav-toggle             { animation-delay:.44s; }

/* reveal por Intersection Observer */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal:nth-child(2){ transition-delay:.1s; }
.reveal:nth-child(3){ transition-delay:.2s; }
.reveal:nth-child(4){ transition-delay:.3s; }

/* "Quem é Bete?": título e parágrafos entram um de cada vez.
   Passos maiores que os genéricos (.1s) porque a transição dura .6s —
   com passo curto os blocos se sobrepõem e parecem entrar juntos. */
.quem-copy .reveal:nth-child(1){ transition-delay:0s;    }
.quem-copy .reveal:nth-child(2){ transition-delay:.18s;  }
.quem-copy .reveal:nth-child(3){ transition-delay:.36s;  }
.quem-copy .reveal:nth-child(4){ transition-delay:.54s;  }

/* --- entrada do CTA final ------------------------------------------
   Depois das regras genéricas de .reveal para vencer no empate de
   especificidade. Disparado pelo mesmo IntersectionObserver. */
.cta-banner .reveal{
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
.cta-banner .reveal.in-view{ transform:translateY(0); }
.cta-banner .cta-photo{ transform:translateY(34px); transition-delay:0s; }
.cta-banner .cta-photo.in-view{ transform:translateY(0); }
.cta-banner .cta-pill { transition-delay:.14s; }
.cta-banner .cta-title{ transition-delay:.26s; }
.cta-banner .btn-cta  { transition-delay:.38s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-title,.hero-text,.hero-cta,
  .hero-art,.hero-art img,
  .site-header .logo,.site-nav a,.social li,.nav-toggle{ opacity:1; }
  .hero-sky-drift{ display:none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:960px){
  .site-nav{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--indigo);
    flex-direction:column;
    gap:0;
    padding:0 24px;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease, padding .3s ease;
  }
  .site-nav.open{ max-height:320px; padding:12px 24px 20px; }
  .site-nav a{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* copy sai da sobreposição: a arte fica no topo, o texto abaixo dela.
     Nesse ponto o texto sobreposto seria ilegível de tão pequeno. */
  .br-desk{ display:none; }
  .br-mob { display:inline; }
  /* copy do mobile medida no Frame 1171276176 (720 de largura):
     título 49px/50.5px em y688; parágrafo 19px/24px em y885;
     botão 319×69 em y981. Tudo centralizado. */
  /* a arte é 1916×610: em telas estreitas viraria uma tira de ~120px.
     Recorta na Bete + lettering em vez de encolher tudo. */
  .hero-art{ width:100%; margin-left:0; }
  /* layout mobile do Figma: arte própria (720×590), não é recorte da
     versão desktop. As camadas separadas ficam só no desktop. */
  .hero-layer{ display:none; }
  .hero-flat{
    display:block;
    width:100%; height:auto;
    aspect-ratio:720 / 590;
    opacity:0;
    animation:layerFade .7s ease forwards;
  }
  .hero-copy{
    position:static;
    width:auto; max-width:none;
    margin:0 auto;
    padding:1.11vw 11.1vw 4.4vw;  /* 8px acima do título; conteúdo de 560px @720 */
    text-align:center;
  }
  .hero-title{
    font-size:6.81vw;             /* 49px @720 */
    line-height:1.03;             /* 50.5px */
    margin:0 0 7.08vw;            /* 51px até o parágrafo */
  }
  .hero-text{
    font-size:2.50vw;             /* 18px @720 */
    line-height:1.333;            /* 24px */
    margin:0 auto 4.44vw;         /* 32px até o botão */
    max-width:77.8vw;             /* 560px @720, igual ao título */
  }
  .hero-cta{
    display:inline-grid;
    width:44.31vw; height:9.58vw; /* 319×69 @720 */
    padding:0;
    font-size:2.22vw;             /* 16px @720 */
    white-space:nowrap;
    border-radius:.83vw;
  }

  /* faixa: tiles de 72px no layout de 720 do Figma */
  .hero-iconstrip{ height:10vw; background-size:auto 10vw; }
  @keyframes strip-scroll-mob{
    from{ background-position-x:0; }
    to  { background-position-x:-266.67vw; }   /* 1920 × 10/72 */
  }
  .hero-iconstrip{ animation-name:strip-scroll-mob; }

  /* empilha na ordem: título -> foto -> parágrafos.
     O <h2> vive dentro de .quem-copy, então display:contents solta os
     filhos como itens do grid e o `order` reordena só aqui. */
  .quem-inner{ grid-template-columns:1fr; gap:0; }
  .quem-copy{ display:contents; }
  .quem-title{
    order:1;
    margin:0 0 18px;          /* sem o recuo negativo do alinhamento desktop */
  }
  .quem-photo{ order:2; margin:0 0 22px; max-width:420px; }
  .quem-copy p{ order:3; }

  .bandeiras-grid{ grid-template-columns:repeat(2,1fr); }

  /* empilha: copy em cima, foto embaixo dentro da caixa */
  .cta-banner{
    text-align:center;
    padding:44px 30px 0;
    min-height:0;
    margin-top:0;
  }
  .cta-copy{ max-width:none; min-width:0; }
  /* cqw vira ilegível nessa largura: volta pra rem */
  .cta-pill{
    margin:0 0 16px;
    font-size:.78rem; padding:9px 16px;
    border-width:1.5px; border-radius:8px;
  }
  .cta-title{
    font-size:clamp(1.4rem,4.4vw,1.8rem);
    line-height:1.2; margin:0 0 22px;
  }
  .cta-banner .btn{
    display:inline-block;
    width:auto; height:auto;
    padding:16px 34px; font-size:.78rem;
    border-radius:8px; margin-inline:auto;
  }
  .cta-photo{
    position:static;
    width:230px;
    margin:26px auto 0;
    right:auto;
  }
}

@media (max-width:560px){
  .fotos-track .foto-card{ flex-basis:270px; }
  .bandeiras-grid{ grid-template-columns:1fr; }
  .header-inner{ min-height:64px; }
  .logo-img{ width:124px; }
  .btn{ padding:14px 26px; }
  .video-section{ padding:44px 0; }
  .quem-section,.bandeiras-section,.cta-final{ padding:56px 0; }
}

/* ============================================================
   CAMADA DE ACESSIBILIDADE
   (adicionada por cima — não altera o layout das seções)
   ============================================================ */

:root{
  --a11y-green:  #0B5D3B;
  --a11y-green-d:#08402a;
  --focus:       #0B5D3B;
}

/* garante que o texto base acompanhe o escalonamento da raiz */
body{ font-size:1rem; }

/* ---------- Escalonamento de fonte ---------- */
html{ font-size:100%; }
html[data-fontlevel="1"]{ font-size:115%; }
html[data-fontlevel="2"]{ font-size:130%; }

/* leve respiro ao pular por âncora */
[id]{ scroll-margin-top:16px; }

/* ---------- Foco visível (nunca remover sem substituir) ---------- */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}
a:focus-visible,
.btn:focus-visible,
.a11y-pill:focus-visible{ outline-offset:3px; }
.hero-iconstrip:focus-visible{ outline-offset:-3px; }

/* ---------- Skip link ---------- */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed;
  top:-80px; left:12px;
  z-index:1000;
  background:var(--a11y-green);
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  padding:10px 18px;
  border-radius:0 0 8px 8px;
  transition:top .2s ease;
}
.skip-link:focus{ top:0; }

/* Botões flutuantes por cima do texto (mobile): esmaecem enquanto
   cobrem a copy e voltam sozinhos. A classe é posta pelo script.js. */
.a11y-fab,
div[vw-access-button]{
  transition:opacity .45s ease;
}
.a11y-fab.fab-apagado,
div[vw-access-button].fab-apagado{
  opacity:.15;
}
/* com o painel aberto o botão nunca some */
.a11y-fab.is-open.fab-apagado{ opacity:1; }

/* ---------- Acessibilidade: botão flutuante + painel ---------- */
/* elemento independente do body — fixo, flutua por cima da página,
   logo acima do botão do VLibras (canto inferior direito) */
.a11y-fab{
  position:fixed;
  right:20px;
  bottom:96px;   /* deixa o VLibras livre logo abaixo */
  z-index:1000;
}
.a11y-fab-btn{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--a11y-green);
  color:#fff;
  border:2px solid #fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}
.a11y-fab-btn:hover{ background:var(--a11y-green-d); transform:scale(1.06); }
.a11y-fab-btn:active{ transform:scale(.98); }

.a11y-fab-panel{
  position:absolute;
  bottom:calc(100% + 10px);   /* abre para cima, a partir do botão */
  right:0;
  width:236px;
  background:#fff;
  border:1.5px solid var(--a11y-green);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  padding:14px;
  /* estado fechado — fade + leve slide (~200ms) */
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.a11y-fab.is-open .a11y-fab-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.a11y-fab-title{
  margin:0 0 10px;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--a11y-green);
}
.a11y-fab-panel .a11y-actions{ flex-direction:column; gap:8px; flex-wrap:nowrap; }
.a11y-fab-panel .a11y-pill{
  width:100%;
  justify-content:flex-start;
  padding:10px 14px;
  font-size:.8rem;
  white-space:normal;
}

.a11y-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.a11y-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  color:var(--a11y-green);
  border:1.5px solid var(--a11y-green);
  border-radius:999px;
  padding:6px 16px;
  font-family:inherit;
  font-weight:700;
  font-size:.78rem;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, transform .15s ease;
}
.a11y-pill .a11y-ico{ font-size:.9rem; font-weight:800; }
.a11y-pill:hover{ background:var(--a11y-green); color:#fff; transform:translateY(-1px); }
.a11y-pill[aria-pressed="true"]{ background:var(--a11y-green); color:#fff; }

/* ---------- Botão flutuante mais compacto no mobile ---------- */
@media (max-width:768px){
  .a11y-fab{ right:12px; bottom:88px; }
  .a11y-fab-btn{ width:42px; height:42px; }
  .a11y-fab-btn svg{ width:20px; height:20px; }
  /* painel nunca ultrapassa a largura da tela */
  .a11y-fab-panel{ width:min(240px, calc(100vw - 24px)); }
}

/* ============================================================
   MODO ESCURO  (independente do alto contraste)
   ============================================================ */
html[data-theme="dark"] body{ background:#101014; color:#c9c9d2; }
html[data-theme="dark"] .video-section,
html[data-theme="dark"] .quem-section,
html[data-theme="dark"] .fotos-section,
html[data-theme="dark"] .cta-final{ background:#101014; }

html[data-theme="dark"] .hero{ background:#101014; }
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .bandeira-card h3{ color:#f3f3f6; }
html[data-theme="dark"] .hero-text,
html[data-theme="dark"] .quem-copy p,
html[data-theme="dark"] .bandeira-card p{ color:#c4c4cf; }


html[data-theme="dark"] .photo-placeholder{
  background:#1e1e26; color:#8b8b9a; border-color:#34343f;
}
html[data-theme="dark"] .bandeira-card{ background:#1b1b22; box-shadow:0 10px 30px rgba(0,0,0,.5); }
html[data-theme="dark"] .video-embed{ background:#000; color:#9a9a9a; }
html[data-theme="dark"] .cta-final{ background:#101014; }

/* âncoras de brand (indigo header, azul do hero, amarelo do CTA,
   azul das bandeiras, preto dos cards de foto) permanecem iguais */

html[data-theme="dark"] :focus-visible{ outline-color:#ffe100; }

/* ============================================================
   ALTO CONTRASTE  (preto/branco puro, sem gradientes)
   ============================================================ */
html[data-contrast="high"] body{ background:#000; color:#fff; }

html[data-contrast="high"] .site-header,
html[data-contrast="high"] .hero,
html[data-contrast="high"] .video-section,
html[data-contrast="high"] .quem-section,
html[data-contrast="high"] .fotos-section,
html[data-contrast="high"] .bandeiras-section,
html[data-contrast="high"] .cta-final,
html[data-contrast="high"] .site-footer{ background:#000 !important; }

/* remove decorações/gradientes do hero */

html[data-contrast="high"] .hero-title,
html[data-contrast="high"] .hero-text,
html[data-contrast="high"] .section-title,
html[data-contrast="high"] .quem-copy p,
html[data-contrast="high"] .foto-caption h3,
html[data-contrast="high"] .foto-caption p,
html[data-contrast="high"] .bandeira-card h3,
html[data-contrast="high"] .bandeira-card p,
html[data-contrast="high"] .site-footer p,
html[data-contrast="high"] .site-nav a,
html[data-contrast="high"] .cta-title{ color:#fff !important; }


html[data-contrast="high"] .foto-card,
html[data-contrast="high"] .bandeira-card,
html[data-contrast="high"] .photo-placeholder,
html[data-contrast="high"] .video-embed,
html[data-contrast="high"] .cta-banner{
  background:#000 !important;
  border:2px solid #fff !important;
  color:#fff !important;
  box-shadow:none !important;
}
html[data-contrast="high"] .foto-caption{ background:#000; }

html[data-contrast="high"] .btn-pink{ background:#ff2ea6 !important; color:#000 !important; border:2px solid #fff; }
html[data-contrast="high"] .btn-yellow{ background:#ffe100 !important; color:#000 !important; border:2px solid #fff; }
html[data-contrast="high"] .btn-cta{ background:#fff !important; color:#000 !important; border:2px solid #fff; }
html[data-contrast="high"] .cta-pill{ color:#fff !important; border-color:#fff !important; }
html[data-contrast="high"] .check-icon{ background:#000 !important; border:2px solid #fff; }
html[data-contrast="high"] .check-icon svg{ stroke:#fff !important; }

html[data-contrast="high"] .hero-iconstrip{
  background:#000 !important;
  border-top:2px solid #fff;
  border-bottom:2px solid #fff;
  animation:none;
}

/* acessibilidade mantém a identidade UWT (verde + branco) */
html[data-contrast="high"] .a11y-fab-btn{ background:#000 !important; border:2px solid #fff; color:#fff; }
html[data-contrast="high"] .a11y-fab-panel{ background:#fff !important; border:3px solid #000; }
html[data-contrast="high"] .a11y-fab-title{ color:#000 !important; }
html[data-contrast="high"] .a11y-pill{ border-color:#000; color:#000; }
html[data-contrast="high"] .a11y-pill[aria-pressed="true"],
html[data-contrast="high"] .a11y-pill:hover{ background:#000; color:#fff; }

html[data-contrast="high"] :focus-visible{ outline-color:#ffe100 !important; }

/* ============================================================
   PÁGINAS LEGAIS (Política de Privacidade / Termos de Uso)
   ============================================================ */
.legal-page{ padding:64px 0 90px; background:#fff; }
.legal-content{ max-width:820px; }
.legal-title{
  font-size:clamp(1.9rem,4vw,2.6rem);
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.15;
  margin:0 0 .6rem;
}
.legal-updated{
  font-size:.9rem;
  color:var(--body);
  margin:0 0 2.2rem;
  padding-bottom:1.4rem;
  border-bottom:2px solid #ececf2;
}
.legal-content h2{
  font-size:1.18rem;
  font-weight:700;
  color:var(--ink);
  margin:2.2rem 0 .7rem;
}
.legal-content p,
.legal-content li{
  font-size:1rem;
  line-height:1.65;
  color:#444343;
}
.legal-content p{ margin:0 0 1rem; }
.legal-content ul{ margin:0 0 1rem; padding-left:1.3rem; }
.legal-content li{ margin-bottom:.55rem; }
.legal-content a{ color:var(--pink); text-decoration:underline; }
.legal-content a:hover{ color:var(--pink-dark); }
.legal-voltar{
  margin-top:2.6rem;
  padding-top:1.4rem;
  border-top:2px solid #ececf2;
  font-weight:600;
}

/* links legais no rodapé */
.footer-links{ margin-top:.5rem; }
.footer-links a{
  color:var(--footer-text);
  text-decoration:underline;
  transition:color .2s ease;
}
.footer-links a:hover{ color:#fff; }
.footer-links span{ margin:0 .5rem; opacity:.6; }

html[data-theme="dark"] .legal-page{ background:#101014; }
html[data-theme="dark"] .legal-title,
html[data-theme="dark"] .legal-content h2{ color:#f3f3f6; }
html[data-theme="dark"] .legal-content p,
html[data-theme="dark"] .legal-content li,
html[data-theme="dark"] .legal-updated{ color:#c4c4cf; }
html[data-theme="dark"] .legal-updated,
html[data-theme="dark"] .legal-voltar{ border-color:#2a2a33; }

html[data-contrast="high"] .legal-page{ background:#000 !important; }
html[data-contrast="high"] .legal-title,
html[data-contrast="high"] .legal-content h2,
html[data-contrast="high"] .legal-content p,
html[data-contrast="high"] .legal-content li,
html[data-contrast="high"] .legal-updated{ color:#fff !important; }
html[data-contrast="high"] .legal-content a,
html[data-contrast="high"] .footer-links a{ color:#ffe100 !important; }

/* ---------- Banner de cookies (desligado por padrão) ---------- */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1200;
  background:var(--indigo);
  color:#fff;
  padding:16px 20px;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
  transform:translateY(110%);
  transition:transform .4s ease;
}
.cookie-banner.is-open{ transform:translateY(0); }
.cookie-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.cookie-banner p{ margin:0; font-size:.9rem; line-height:1.5; flex:1 1 320px; }
.cookie-banner a{ color:#fff; text-decoration:underline; }
.cookie-banner .btn{ flex:0 0 auto; padding:12px 28px; }
@media (max-width:560px){
  .cookie-inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner .btn{ width:100%; text-align:center; }
}