/* =========================================================================
   CENAS — layout de cada secao.
   Regra que vale para o arquivo inteiro: o layout de PADRAO e o empilhado
   (vertical). O horizontal so existe dentro de "html.cinema", classe que o JS
   poe quando: tela larga + JS vivo + o usuario nao pediu menos animacao.
   Assim celular, leitor de tela e navegador sem JS caem no empilhado sozinhos.
   ========================================================================= */

/* ============================ 1. HERO ============================
   O hero NAO e uma imagem chapada: e a composicao do santinho remontada em
   camadas (ceu, formas, recorte da Maria, marca, slogan). Assim cada peca
   entra na resolucao dela e o conjunto fica nitido em tela retina, coisa que
   a capa achatada do PDF (300 dpi de impresso) nao conseguia.
   Referencia de layout: SANTINHO 2 no desktop, SANTINHO 1 no celular. */
.hero{
  position:relative;overflow:hidden;
  background:var(--azul-prof);
  min-height:100svh;
}

/* --- céu ---
   Duas camadas de propósito: a de fora (.hero-ceu) é quem o parallax move,
   a de dentro (i) é quem faz a entrada. Se fossem a mesma, uma transform
   apagaria a outra. Mesma regra vale para a foto e para o bloco de texto. */
.hero-ceu{position:absolute;inset:-8% -2%;z-index:0}
.hero-ceu i{
  display:block;width:100%;height:100%;
  background:url('../img/ceu.webp') center 34%/cover no-repeat;
}

/* --- formas coloridas da borda --- */
.hero-formas i{position:absolute;left:0;display:block}
.hero-formas .fa,
.hero-formas .fb{aspect-ratio:1/2;border-radius:0 999px 999px 0}

/* --- recorte da Maria ---
   A foto vem espelhada, então ela fica à DIREITA olhando para a marca, e a
   bandeira varre o meio da tela. A bandeira não bate numa borda reta: a
   moldura tem máscara em degradê e a ponta se dissolve no céu. */
.hero-foto{position:absolute;bottom:0;right:0;z-index:2;pointer-events:none}
.hero-maria{position:absolute;bottom:0;right:0;max-width:none;display:block}

/* --- bloco da marca --- */
.hero-txt{position:relative;z-index:3;display:flex;flex-direction:column}
.hero-marca{display:block;height:auto}
.hero-slogan{
  display:inline-block;align-self:flex-start;
  font-family:var(--disp);font-weight:700;color:#fff;
  background:rgba(28,82,157,.72);
  border:2px solid rgba(255,255,255,.55);
  border-radius:999px;padding:.55em 1.5em;line-height:1.25;
  backdrop-filter:blur(2px);
}
.hero-slogan b{color:var(--amarelo);font-weight:700}
.hero-acoes{display:flex;gap:.9rem;flex-wrap:wrap}

/* ------------- DESKTOP: marca a esquerda, Maria espelhada a direita ---------
   A foto vem espelhada do preparo, entao ela olha PARA a marca em vez de
   olhar para fora da pagina, e a bandeira varre o meio da tela. */
@media(min-width:821px){
  /* o padding repete a conta do .wrap, entao a marca comeca na MESMA linha
     vertical do resto do site (os 180px do item 5 do HANDOFF) */
  .hero{
    display:grid;grid-template-columns:1fr 1fr;align-items:center;
    padding-block:2rem 0;
    padding-inline:max(var(--gutter), calc((100vw - var(--largura))/2 + var(--gutter)));
  }
  /* formas na borda DIREITA, acompanhando o espelhamento */
  .hero-formas i{left:auto;right:0}
  .hero-formas .fa{top:0;height:28.4%;background:var(--amarelo);border-radius:999px 0 0 999px}
  .hero-formas .fb{top:32.5%;height:22.6%;background:var(--azul-claro);border-radius:999px 0 0 999px}
  /* O disco verde do rodape SAIU do desktop em 15/08/2026 a pedido do Enrique.
     Medido: ele morava abaixo da dobra (top 915 numa tela de 900), entao no
     repouso nem aparecia; mas ao rolar subia atravessando a tela e sua borda
     virava uma "bolinha" verde solta no topo. Era a bolinha que ele via.
     Escondido so aqui: no celular o MESMO elemento .fc e a faixa azul da
     borda (mais abaixo neste arquivo), que continua intacta. */
  .hero-formas .fc{display:none}
  /* A moldura pega 66% da tela pela direita e a mascara dissolve a ponta da
     bandeira nos ultimos 26%, do lado esquerdo. A figura entra 18% maior que
     a moldura e ancorada pelo TOPO: o rosto fica na altura do santinho e o
     corte cai na perna, nunca na cabeca. */
  .hero-foto{
    width:66%;height:100%;
    -webkit-mask-image:linear-gradient(260deg,#000 0 52%,rgba(0,0,0,.4) 72%,transparent 88%);
    mask-image:linear-gradient(260deg,#000 0 52%,rgba(0,0,0,.4) 72%,transparent 88%);
    /* sem isto a máscara se REPETE fora da moldura e a bandeira reaparece
       atrás do "MARIA". Levei um susto com isso. */
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
  }
  .hero-maria{top:8%;bottom:auto;right:3%;height:118%;width:auto}
  .hero-txt{grid-column:1;gap:1.5rem;padding-bottom:5rem;justify-self:start}
  .hero-marca{width:min(100%,470px)}
  .hero-slogan{font-size:clamp(.95rem,1.35vw,1.2rem)}
}

/* ---------------- CELULAR: marca em cima, Maria embaixo ------------------- */
@media(max-width:820px){
  .hero{display:block;padding:0;min-height:100svh}
  .hero-formas .fa{top:0;height:19.3%;background:var(--verde)}
  .hero-formas .fb{top:19.3%;height:19.3%;background:var(--amarelo)}
  .hero-formas .fc{top:44%;bottom:0;width:5.5%;background:var(--azul-claro);
                   border-radius:0 26px 0 0}
  /* A coluna de texto ocupa a tela toda e empurra os botões para o fim com
     margin-top:auto. Nada de position:absolute aqui: os botões se ancorariam
     no próprio bloco de texto, e não no hero, e cairiam em cima da marca. */
  .hero{display:flex;flex-direction:column;padding:1.6rem 0 1.4rem}
  /* as formas ficam na borda esquerda no celular, então o texto anda para a
     direita para não bater nelas */
  .hero-txt{
    position:relative;z-index:3;flex:1;
    align-items:center;gap:.9rem;
    padding-left:calc(var(--gutter) + 10%);padding-right:var(--gutter);
  }
  .hero-marca{width:min(100%,290px)}
  .hero-slogan{align-self:center;font-size:.85rem;text-align:center}
  .hero-acoes{margin-top:auto;justify-content:center}
  .hero-acoes .btn{font-size:.85rem;padding:.8rem 1.2rem}
  /* o botão vazado fica sobre a foto: precisa de fundo para ler */
  .hero-acoes .btn--linha{background:rgba(12,36,68,.55);backdrop-filter:blur(3px)}
  /* No celular o santinho usa um retrato FECHADO: cabeça grande, corte no
     tronco, bandeira preenchendo a base. A moldura ocupa os 72% de baixo e a
     figura entra 50% maior que ela, ancorada pelo topo. Assim o rosto nunca é
     cortado e o corte cai no quadril. */
  /* a foto vem espelhada, então o corpo dela está do lado DIREITO do arquivo:
     ancorar pela direita é o que a deixa centralizada na tela */
  .hero-foto{left:0;right:auto;width:100%;height:72%}
  .hero-maria{top:0;bottom:auto;right:0;left:auto;height:150%;width:auto}
}

/* ============================ ENTRADA DO HERO ============================
   A primeira tela abre com uma sequência, não aparece pronta. Cada peça entra
   na sua vez: céu, formas, Maria, marca, slogan, botões.
   É CSS puro, então roda igual no celular sem baixar biblioteca nenhuma.
   As duas travas de sempre: sem JS nada disso se aplica e a página aparece
   inteira; quem pediu menos animação vê tudo parado.
   ATENÇÃO: a entrada mexe na camada de DENTRO e o parallax na de FORA. Se
   alguém juntar as duas na mesma camada, uma transform apaga a outra. */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-ceu i     {animation:heroCeu   2.2s cubic-bezier(.22,1,.36,1)      both}
  html.js .hero-formas i  {animation:heroForma 1.1s cubic-bezier(.34,1.28,.5,1)    both}
  html.js .hero-formas .fa{animation-delay:.10s}
  html.js .hero-formas .fb{animation-delay:.20s}
  html.js .hero-maria     {animation:heroFoto  1.3s cubic-bezier(.22,1,.36,1) .18s both}
  html.js .hero-marca     {animation:heroSobe  1.0s cubic-bezier(.22,1,.36,1) .52s both}
  html.js .hero-slogan    {animation:heroSobe   .9s cubic-bezier(.22,1,.36,1) .78s both}
  html.js .hero-acoes .btn{animation:heroSobe   .8s cubic-bezier(.22,1,.36,1) .94s both}
  html.js .hero-acoes .btn + .btn{animation-delay:1.04s}
  html.js .hero-formas .fc{animation-delay:.30s}
}
/* No desktop a forma verde é um disco que já vive deslocado para baixo, então
   ela sobe do próprio lugar em vez de entrar pela esquerda. No celular ela é
   a faixa azul da borda e continua entrando pela esquerda, como as outras. */
@media (prefers-reduced-motion:no-preference) and (min-width:821px){
  html.js .hero-formas .fc{animation-name:heroFormaBaixo}
  /* no desktop as formas estão na borda direita, então entram pela direita */
  html.js .hero-formas .fa,
  html.js .hero-formas .fb{animation-name:heroFormaDir}
}
@keyframes heroFormaDir{from{transform:translateX(104%)} to{transform:none}}
/* Rede de segurança: o JS põe .hero-pronto 4 segundos depois. Se a animação
   rodou, isto não muda nada. Se não rodou, impede que a primeira tela fique
   vazia, que é o pior defeito possível num site de campanha. */
html.hero-pronto .hero-ceu i,
html.hero-pronto .hero-maria,
html.hero-pronto .hero-marca,
html.hero-pronto .hero-slogan,
html.hero-pronto .hero-acoes .btn{opacity:1}

@keyframes heroCeu  {from{opacity:0;transform:scale(1.10)} to{opacity:1;transform:none}}
@keyframes heroFoto {from{opacity:0;transform:translate3d(0,58px,0) scale(1.03)} to{opacity:1;transform:none}}
@keyframes heroSobe {from{opacity:0;transform:translate3d(0,34px,0)} to{opacity:1;transform:none}}
@keyframes heroForma{from{transform:translateX(-104%)} to{transform:none}}
@keyframes heroFormaBaixo{from{transform:translateY(170%)} to{transform:translateY(72%)}}

/* ============================ 3. QUEM E (entra por baixo) ============================ */
.quem{padding:clamp(4rem,10vw,8rem) 0;background:var(--papel)}
.quem-grade{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.quem-txt>*+*{margin-top:1.15rem}
.quem-foto{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5}
.quem-foto picture{display:block;width:100%;height:100%}
.quem-foto img{width:100%;height:100%;object-fit:cover}
/* No desktop a foto e a do escritorio, deitada. A caixa acompanha (3/2 = 1,5,
   a mesma proporcao do arquivo 1024x683), entao o object-fit:cover nao corta a
   Maria. No celular a caixa continua 4/5 com o retrato em pe. */
@media(min-width:901px){.quem-foto{aspect-ratio:3/2}}
@media(max-width:900px){.quem-grade{grid-template-columns:1fr;align-items:stretch}}

/* ============================ 4. O AMAZONAS ============================
   O MAPA SAIU em 15/08/2026 a pedido do Enrique. A secao ficou sendo o titulo
   mais o carrossel das cidades. O CSS do mapa (.mapa-fig e .mapa-grade) foi
   apagado junto, e nao escondido: se o mapa voltar, volta em vetor e com
   layout proprio. */
.mapa{padding:clamp(3.5rem,8vw,6rem) 0 clamp(2rem,5vw,4rem);background:var(--papel)}
.mapa-cabeca{max-width:62ch;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.mapa-cabeca>*+*{margin-top:1.1rem}

/* ---------------- CARROSSEL DAS CIDADES ----------------
   Altura fixa, largura livre. Foto deitada fica larga, quadro de vídeo em pé
   fica estreito, e NENHUM rosto é cortado, que é a regra da casa. */
.carrossel{min-width:0}
.cid-pista{
  position:relative;      /* precisa: o calculo de rolagem usa esta caixa */
  display:flex;gap:clamp(14px,2vw,26px);
  overflow-x:auto;padding-bottom:4px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  /* a folga dos dois lados e o que deixa a foto ATIVA parar no meio da tela */
  padding-inline:max(var(--gutter), calc(50% - 34vw));
}
.cid-pista::-webkit-scrollbar{display:none}
.cid-pista:focus-visible{outline:3px solid var(--azul-claro);outline-offset:4px;border-radius:20px}

.cid{
  position:relative;margin:0;flex:0 0 auto;
  height:clamp(340px,52vw,640px);
  border-radius:18px;overflow:hidden;scroll-snap-align:center;
  background:var(--linha);
  opacity:.4;transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);
  transform:scale(.94);
}
.cid[data-ativo]{opacity:1;transform:none}
.cid img{display:block;height:100%;width:auto;max-width:none}
.cid figcaption{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:.5rem;
  padding:2.6rem 1.1rem .9rem;
  font-family:var(--disp);font-weight:700;font-size:1rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(12,36,68,.88));
}
.cid .pin{width:16px;height:16px;flex:none;fill:var(--amarelo)}

/* ---- setas: só a seta, sem botão redondo em volta ---- */
.cid-controle{display:flex;align-items:center;justify-content:center;gap:3.2rem;margin-top:1.6rem}
.cid-btn{
  width:40px;height:40px;position:relative;background:none;
  transition:opacity .25s ease;
}
.cid-btn::before{
  content:'';position:absolute;top:50%;left:50%;width:15px;height:15px;
  border-left:3px solid var(--azul);border-bottom:3px solid var(--azul);
  transform:translate(-50%,-50%) rotate(45deg);
  transform-origin:center;
}
.cid-btn--frente::before{transform:translate(-50%,-50%) rotate(-135deg)}
.cid-btn[disabled]{opacity:.2;pointer-events:none}
.cid-btn:hover::before{border-color:var(--verde)}

/* latejar: a seta pulsa para dizer que da para passar */
@media (prefers-reduced-motion:no-preference){
  html.js .cid-btn::before{animation:lateja 1.8s ease-in-out infinite}
  html.js .cid-btn--frente::before{animation-name:latejaFrente}
}
@keyframes lateja{
  0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:.55}
  50%    {transform:translate(-58%,-50%) rotate(45deg) scale(1.12);opacity:1}
}
@keyframes latejaFrente{
  0%,100%{transform:translate(-50%,-50%) rotate(-135deg) scale(1);opacity:.55}
  50%    {transform:translate(-42%,-50%) rotate(-135deg) scale(1.12);opacity:1}
}

@media(max-width:899px){
  .cid-pista{padding-inline:max(var(--gutter), calc(50% - 43vw))}
  .cid{
    opacity:1;transform:none;
    height:clamp(220px,42vw,360px);
    min-width:72vw;
  }
  .cid[data-ativo]{transform:none}
  .cid img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 30%;
  }
  .cid figcaption{
    font-size:.82rem;
    padding:1.6rem .8rem .6rem;
    gap:.3rem;
  }
}

/* ============================ VITRINE = PROPOSTAS ============================
   Esta é a ÚNICA seção horizontal do site. O ritmo continua vertical,
   horizontal, vertical.

   PADRÃO (celular, sem JS, movimento reduzido): tira que rola de lado com
   encaixe. O crescer e encolher só existe dentro de html.cinema. */
.vitrine{position:relative;background:var(--papel);padding-block:clamp(3rem,7vw,5rem)}
/* Mesma regra do .wrap. NAO somar aqui a conta
   max(gutter, (100vw - largura)/2 + gutter): ela serve para caixa de largura
   TOTAL, e junto com max-width ela desconta duas vezes. Numa tela de 2000px
   isso deixava 280px para o titulo, e ele quebrava uma palavra por linha. */
.vitrine-cabeca{
  max-width:var(--largura);
  margin:0 auto clamp(1.6rem,4vw,2.6rem);
  padding-inline:var(--gutter);
}
.vitrine-palco{position:relative}

/* fundo: FAIXA. O grafismo se repete só na horizontal e a altura é a da
   faixa, não a da tela. Papel de parede em grade fica pesado demais.

   O arquivo é UM BLOCO do grafismo novo, recortado do original de 8192x2788
   (x=94, y=1088, 2163x1115). Esse é o período exato do desenho nos DOIS
   sentidos: medido, o erro na emenda é 0,000 na horizontal e 0,000 na
   vertical, contra 1,10 e 1,47 de diferença entre duas linhas ou colunas
   vizinhas quaisquer. NÃO recorte "no olho": qualquer outra medida quebra o
   ritmo do padrão a cada repetição.

   --tile manda no TAMANHO do desenho na tela, e é independente da altura da
   faixa. Com background-size:auto 100% (como era antes) o desenho ficava
   preso à altura da seção e saía 2,5 vezes maior do que na arte entregue.

   A largura e a posição de repouso valem para celular e para quem não tem JS.
   No desktop o cinema.js REESCREVE as duas, porque a faixa precisa ser larga o
   bastante para andar a seção inteira sem descobrir a borda. */
.vitrine-faixa{
  position:absolute;top:0;bottom:0;left:-25%;width:150%;z-index:0;
  --tile:clamp(360px,33vw,620px);
  background:url('../img/vitrine/faixa-m22.webp') repeat center;
  background-size:var(--tile) auto;
  will-change:transform;
}

/* VÉU: escurece o grafismo à medida que a foto do centro abre, para o olho ir
   na foto e não no fundo. Quem manda na opacidade é o cinema.js, pela
   distância da peça até o centro da tela. Sem JS ele fica no valor de repouso,
   que só tira o excesso de brilho. Fica ENTRE a faixa e a pista: a faixa é
   z-index 0 e vem antes no HTML, a pista é z-index 1. */
.vitrine-veu{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--tinta);opacity:.28;   /* = VEU_MIN do cinema.js */
}

.vitrine-pista{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:clamp(1.4rem,3vw,2.4rem) var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none;
}
.vitrine-pista::-webkit-scrollbar{display:none}

.vit{
  position:relative;margin:0;flex:0 0 auto;scroll-snap-align:center;
  width:min(88vw,880px);
}
/* <picture> para as propostas que ja tem versao EM PE para o celular.
   Sem display:block o <picture> e inline e sobra uma tira embaixo da foto. */
.vit picture{display:block}
.vit img{display:block;width:100%;height:auto;border-radius:6px}
.vit figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:3.5rem 1.4rem 1.2rem;
  background:linear-gradient(180deg,transparent,rgba(12,36,68,.9));
  border-radius:0 0 6px 6px;color:#fff;
}
.vit-n{
  display:inline-block;font-family:var(--disp);font-weight:900;font-size:.78rem;
  letter-spacing:.16em;color:var(--amarelo);margin-bottom:.4rem;
}
.vit-tit{
  font-family:var(--disp);font-weight:900;color:#fff;margin:0;
  font-size:clamp(1.2rem,2.4vw,2rem);line-height:1.06;letter-spacing:-.015em;
}
.vit-txt{margin:.5rem 0 0;font-size:.98rem;line-height:1.55;max-width:44ch;color:rgba(255,255,255,.92)}

/* O card de fecho (.vit--fecho / .vit-fecho) foi removido a pedido em
   15/08/2026, e o CSS dele apagado junto, nao escondido. Se um dia voltar um
   card de encerramento na vitrine, reconstroi. */

.vitrine-barra{display:none}

/* ---- com JS no desktop: a seção gruda e as peças crescem e somem ----
   O overflow:hidden fica no PALCO, nunca na seção: a seção é quem recebe o
   espaçador do pin, e cortá-la esconderia o próprio palco. */
html.cinema .vitrine{padding-bottom:0}
html.cinema .vitrine-palco{
  height:100svh;overflow:hidden;display:flex;align-items:center;
}
html.cinema .vitrine-pista{
  overflow:visible;scroll-snap-type:none;padding:0;
  gap:clamp(2rem,5vw,4rem);
  will-change:transform;
}
/* No ápice a foto ocupa a LARGURA INTEIRA da tela. Com 16:9 numa tela 16:10
   sobra só uma tira fina de grafismo em cima e embaixo. */
html.cinema .vit{
  width:100vw;
  display:flex;align-items:center;justify-content:center;
  will-change:transform,opacity;transform-origin:center center;
}
/* SEM sombra na borda da foto (pedido em 15/08). A separação entre foto e
   fundo passou a ser feita pelo véu que escurece o grafismo. */
html.cinema .vit img{
  width:100%;height:auto;max-height:92svh;object-fit:contain;
}
/* O LETREIRO.
   Fica embaixo por padrão e vai para o alto da foto com data-pos="topo" no
   HTML. A escolha é foto a foto: onde está o rosto e onde a própria imagem já
   tem texto. O véu escuro em degradê morre antes da borda direita da caixa,
   senão apareceria um retângulo com corte reto no meio da foto. */
html.cinema .vit figcaption{
  left:max(var(--gutter), calc((100vw - var(--largura))/2 + var(--gutter)));
  right:auto;max-width:min(46ch,52vw);
  padding:3.5rem 2rem 2rem 0;border-radius:0;background:none;
  text-shadow:0 2px 10px rgba(12,36,68,.92), 0 14px 46px rgba(12,36,68,.7);
  isolation:isolate;   /* prende o véu do ::before DENTRO do letreiro */
}
/* O véu por trás do letreiro é REDONDO e transborda a caixa nos quatro lados.
   Tentei um degradê retangular antes e a captura mostrou a quina da caixa
   desenhada por cima da foto. Degradê radial não tem quina. */
html.cinema .vit figcaption::before{
  content:'';position:absolute;z-index:-1;
  left:-10vw;right:-16vw;top:-3rem;bottom:-3rem;
  background:radial-gradient(58% 56% at 24% 50%,
             rgba(12,36,68,.80), rgba(12,36,68,0) 72%);
}
html.cinema .vit[data-pos="topo"] figcaption{
  top:0;bottom:auto;padding:2rem 2rem 3.5rem 0;
}
/* Foto de retrato fechado: a caixa fica estreita para o texto não encostar no
   rosto, que está no meio do quadro. */
html.cinema .vit[data-estreito] figcaption{max-width:min(32ch,38vw)}
/* Corpo do texto da proposta. Medido numa tela de 1424px: era rótulo 12,48px,
   título 32px e texto 15,68px, sobre uma foto que ocupa a tela inteira.
   Passou a 14,24 / 45,57 / 21,36 e agora a MAIS 50% a pedido, o que dá
   21,36 / 68,35 / 32,04. Os três clamps cresceram na mesma proporção, então
   a conta vale em qualquer largura. */
html.cinema .vit-n{
  font-size:clamp(1.29rem,1.5vw,1.58rem);letter-spacing:.18em;margin-bottom:.7rem;
}
html.cinema .vit-tit{font-size:clamp(3rem,4.8vw,5.1rem);line-height:1.02}
html.cinema .vit-txt{
  font-size:clamp(1.73rem,2.25vw,2.55rem);line-height:1.4;margin-top:.9rem;
}
/* barra de progresso da seção */
html.cinema .vitrine-barra{
  display:block;position:absolute;left:0;bottom:0;height:4px;width:100%;
  background:rgba(12,36,68,.14);z-index:3;
}
html.cinema .vitrine-barra i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--va1),var(--va6));
}

@media(max-width:820px){
  /* REFEITO em 15/08/2026. Antes o celular herdava o layout do desktop: a foto
     deitada com o texto SOBRE ela num degrade. Em tela estreita o texto nao
     cabia, sobrepunha a foto e cortava na borda (o "desastre").
     Agora cada proposta e um CARTAO: foto em cima na proporcao natural (nao
     corta rosto, regra 5 do HANDOFF), texto num bloco solido azul embaixo.
     Continua uma tira que rola de lado com encaixe. */
  /* flex-start, nao stretch: cada cartao tem a altura do proprio conteudo. Com
     stretch, a foto vertical da UTI puxava todos os cartoes para a altura dela
     e sobrava um vazio azul embaixo dos de foto deitada. */
  .vitrine-pista{
    align-items:flex-start;
    gap:clamp(.9rem,4vw,1.4rem);
    padding:clamp(1.1rem,4vw,1.8rem) var(--gutter);
  }
  .vit{
    width:80vw;max-width:380px;
    display:flex;flex-direction:column;
    background:var(--azul);border-radius:16px;overflow:hidden;
    box-shadow:0 14px 36px rgba(12,36,68,.24);
  }
  .vit picture{display:block}
  /* Todas as fotos do cartao na MESMA proporcao (3/2), para os cartoes ficarem
     uniformes na tira. Sem isto, a foto vertical da UTI virava um cartao
     gigante ao lado dos de foto deitada. As deitadas (1600x893) cortam pouco;
     a vertical mostra a faixa central. Enquadramento levemente acima do centro
     (45%) para nao cortar cabeca. Ver a nota das VERTICAIS no HANDOFF: quando
     as 5 chegarem, esta proporcao vira 4/5 e o mobile fica em formato retrato. */
  .vit img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 42%;border-radius:0}
  /* o texto deixa de flutuar sobre a foto: vira bloco solido abaixo dela */
  .vit figcaption{
    position:static;background:var(--azul);
    padding:1rem 1.15rem 1.3rem;border-radius:0;color:#fff;
  }
  .vit-n{color:var(--amarelo);font-size:.8rem;margin-bottom:.35rem}
  .vit-tit{font-size:clamp(1.3rem,5.5vw,1.6rem);line-height:1.1}
  .vit-txt{font-size:.96rem;line-height:1.5;max-width:none;margin-top:.55rem;color:rgba(255,255,255,.92)}
}

/* ============================ VÍDEO DE ABERTURA (popup) ============================
   Cobre a tela na abertura. Fica FORA das travas de movimento (nao usa .js nem
   prefers-reduced-motion), porque precisa aparecer mesmo sem GSAP e antes do
   app.js. z-index altissimo para ficar sobre tudo, inclusive o hero. */
html.intro-aberta{overflow:hidden}
.intro{
  position:fixed;inset:0;z-index:9999;
  background:#0C2444;
  display:flex;align-items:center;justify-content:center;
}
.intro[hidden]{display:none}
.intro-video{
  max-width:100%;max-height:100%;width:auto;height:auto;
  background:#0C2444;cursor:pointer;
}
/* X discreto no canto: quase invisivel parado, aparece no hover/toque */
.intro-x{
  position:absolute;top:14px;right:16px;z-index:2;
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(12,36,68,.35);color:rgba(255,255,255,.55);
  font-size:1.9rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,transform .2s;
}
.intro-x:hover,.intro-x:focus-visible{background:rgba(12,36,68,.8);color:#fff;transform:scale(1.08)}
/* botao de som, discreto no rodape do video */
.intro-som{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;
  border:0;border-radius:999px;padding:.7rem 1.3rem;
  background:var(--amarelo);color:var(--tinta);
  font-family:var(--disp);font-weight:700;font-size:.9rem;cursor:pointer;
  box-shadow:0 6px 24px rgba(12,36,68,.4);
}
.intro-som--off{display:none}
.intro--saindo{opacity:0;transition:opacity .4s ease}
@media(prefers-reduced-motion:no-preference){
  .intro{animation:introEntra .4s ease both}
}
@keyframes introEntra{from{opacity:0}to{opacity:1}}

/* ============================ 5. GALERIA (parallax leve) ============================ */
/* FUNDO: gradiente da rampa oficial AZUL -> VERDE (a rampa e o maior ativo da
   paleta). Escolhido pelo Enrique em 15/08/2026 no lugar do creme, que deixava
   as fotos boiando num branco chapado. O gradiente da profundidade e faz as
   fotos saltarem. Diagonal 135deg: azul-claro no topo-esquerda, verde no
   rodape-direita. */
.galeria{
  padding:clamp(4rem,10vw,8rem) 0;
  background:linear-gradient(135deg,#2F97D3,#339CB7,#389F99,#3EA37B,#45A75B,#4CAB3B);
}
/* Sobre o fundo de cor o texto vira claro. DECISAO DO ENRIQUE que contraria a
   recomendacao tecnica, igual a do hero (ver HANDOFF secao 11): no ponto mais
   claro do gradiente o titulo branco fica em ~2,9:1 e o rotulo amarelo em
   ~2,1:1, abaixo do minimo. Funciona porque a tipografia e enorme; a sombra
   reforca a leitura. Se um dia precisar passar em auditoria, escureca o
   gradiente, nao troque o texto. */
.galeria .titulo{color:#fff;text-shadow:0 2px 16px rgba(12,36,68,.55)}
.galeria .rotulo{color:var(--amarelo);text-shadow:0 1px 10px rgba(12,36,68,.5)}
.galeria-cabeca{margin-bottom:clamp(2rem,5vw,3.5rem)}
/* Cada moldura recebe a proporcao DA PROPRIA FOTO pela variavel --prop,
   escrita no HTML a partir do tamanho real do arquivo. Com a moldura e a foto
   na mesma proporcao, o object-fit:cover NAO corta nada: o unico corte e o
   1,08 de escala, que e a folga que o parallax consome (4% por borda).
   E por isso que nenhum rosto e decepado, nem no celular. */
.galeria-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;align-items:start}
.moldura{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:var(--prop,3/2)}
.moldura img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.moldura--larga{grid-column:span 2}
.moldura-cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.2rem .95rem;
  font-family:var(--disp);font-weight:700;font-size:.82rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(12,36,68,.78));
}
@media(max-width:760px){
  .galeria-grade{grid-template-columns:1fr;gap:.8rem}
  .moldura--larga{grid-column:span 1}
  /* sem parallax no celular, entao sem folga: a foto entra 100% inteira */
  .moldura img{transform:none}
}

/* ============================ MATERIAL PARA BAIXAR ============================
   Cartoes de download dos santinhos e adesivos. Fundo creme, para separar da
   galeria colorida (antes) e da agenda (depois). Cada cartao e um <a download>:
   a miniatura em cima (aspect uniforme para alinhar apesar das proporcoes
   diferentes), o tipo/nome e o botao amarelo embaixo. */
.material{padding:clamp(4rem,10vw,8rem) 0;background:var(--papel)}
.material .lead{margin-top:1rem}
.material-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.6rem}
.mat{
  display:flex;flex-direction:column;
  background:#fff;border-radius:16px;overflow:hidden;
  text-decoration:none;color:var(--tinta);
  box-shadow:0 10px 28px rgba(12,36,68,.12);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.mat:hover,.mat:focus-visible{transform:translateY(-6px);box-shadow:0 18px 40px rgba(12,36,68,.2)}
.mat-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;background:var(--azul);display:block}
.mat-info{display:flex;flex-direction:column;gap:.12rem;padding:1rem 1.1rem 1.2rem}
.mat-tipo{font-family:var(--disp);font-weight:900;font-size:1.02rem;line-height:1.1}
.mat-nome{font-size:.88rem;color:#6A7C92}
.mat-baixar{
  margin-top:.85rem;align-self:flex-start;
  font-family:var(--disp);font-weight:700;font-size:.88rem;color:var(--tinta);
  background:var(--amarelo);padding:.5rem 1.05rem;border-radius:999px;
}
/* No celular: SEMPRE 2 por linha (nunca 1), e cartoes COMPACTOS, para caber
   varios por tela e nao virar um rolar infinito. Pedido em 15/08/2026:
   antes 2 cartoes enchiam a tela; agora sao pequenos. */
@media(max-width:820px){
  .material{padding:clamp(3rem,8vw,5rem) 0}
  .material-grade{grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.6rem}
  .mat{border-radius:12px}
  .mat-thumb{aspect-ratio:16/10}
  .mat-info{padding:.65rem .75rem .85rem;gap:.05rem}
  .mat-tipo{font-size:.86rem}
  .mat-nome{font-size:.72rem}
  .mat-baixar{font-size:.76rem;padding:.38rem .8rem;margin-top:.55rem}
}

/* ============================ 6. AGENDA ============================ */
.agenda{padding:clamp(4rem,10vw,8rem) 0;background:var(--papel);position:relative;overflow:hidden}
.agenda-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
.rede{
  display:flex;flex-direction:column;justify-content:space-between;gap:2.4rem;
  padding:1.5rem;border-radius:18px;min-height:190px;color:#fff;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.rede:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(12,36,68,.2)}
.rede-ig{background:linear-gradient(135deg,#FF4634,#FF3E8D,#C63ABD)}
.rede-fb{background:var(--azul)}
.rede-tt{background:var(--tinta)}
/* prontos para quando chegarem os endereços do YouTube, X e LinkedIn */
.rede-yt{background:#FF4634}
.rede-x{background:var(--azul-prof)}
.rede-in{background:var(--azul-claro)}
/* icone da rede no topo do cartao; o texto (rotulo + @) fica no rodape, porque
   o .rede e flex-column com space-between */
.rede-icone{width:40px;height:40px;color:#fff;flex:0 0 auto}
.rede-txt{display:flex;flex-direction:column;gap:.2rem}
.rede-rot{font-family:var(--disp);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.rede-nome{font-family:var(--disp);font-weight:900;font-size:1.2rem}
@media(max-width:760px){.agenda-grade{grid-template-columns:1fr}}

/* ============================ 7. RODAPE ============================ */
.rodape{background:var(--tinta);color:#fff;padding:clamp(3rem,7vw,5rem) 0 2rem}
.rodape-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
/* marca horizontal oficial, que rende mais no rodape que o M22 solto */
.rodape-marca{width:min(100%,230px);height:auto}
.rodape-links{display:flex;gap:1.6rem;font-family:var(--disp);font-weight:500;font-size:.92rem;flex-wrap:wrap}
.rodape-fim{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);
  font-size:.8rem;color:rgba(255,255,255,.62);line-height:1.6;
}

/* =========================================================================
   CELULAR: alivia o trabalho do navegador nas secoes longe da tela.
   Nao entra no desktop porque o ScrollTrigger precisa medir a pagina toda.
   ========================================================================= */
@media(max-width:1023px){
  .quem,.vitrine,.galeria,.agenda{content-visibility:auto;contain-intrinsic-size:1px 900px}
}