/* ==========================================================================
   AKACHI SOCCER CAMP 2026 — folha de estilos única
   --------------------------------------------------------------------------
   Todo o visual do site está aqui. O index.html não tem nenhum style="" inline.
   Organização: segue a ordem das seções na página (01 Hero → 15 Rodapé).

   PALETA
     #1100be  azul principal (fundo)      #101650  azul escuro (cards)
     #0d3d47  petróleo                    #dee983  verde-limão (destaque)
     #eef3b3  creme                       #ff3602  laranja (CTA)
     #fe8124  laranja claro (hover)       #e5dfef  lilás claro (texto)
     #03bfa6  turquesa                    #ffffff  branco
   ========================================================================== */


/* ==========================================================================
   1. FONTES
   ========================================================================== */
/* A Vorge tem um peso só. O "font-weight:100 900" diz ao navegador que esta
   face atende QUALQUER peso pedido — sem isso, os títulos (h1/h2/h3 são bold
   por padrão) não achavam uma face bold e o navegador engrossava o desenho
   artificialmente, fechando os vazados das letras. */
@font-face{font-family:'Vorge';src:url('assets/fonts/Vorge.otf') format('opentype');font-weight:100 900}
@font-face{font-family:'Hames';src:url('assets/fonts/Hames.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Hames';src:url('assets/fonts/Hames-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Hames';src:url('assets/fonts/Hames-Light.otf') format('opentype');font-weight:300;font-display:swap}


/* ==========================================================================
   2. BASE
   ========================================================================== */
/* --------------------------------------------------------------------------
   UNIDADE PROPORCIONAL (--u)
   Toda a diagramacao mobile e desenhada para 440px de largura (iPhone 16 Pro
   Max). --u vale 1% dessa largura: acompanha telas menores e trava em 4.4px
   acima de 440px. Assim as proporcoes - e portanto as quebras de linha e os
   espacamentos - ficam iguais em qualquer aparelho, em vez de mudarem quando
   o clamp batia no minimo ou no maximo.
   Ex.: calc(4 * var(--u)) = 17,6px em 440px e 14,4px em 360px.
   -------------------------------------------------------------------------- */
:root{--u:min(1vw,4.4px)}

html{scroll-behavior:smooth;scroll-padding-top:90px;background:#1100be}
body{margin:0;background:#1100be;color:#e5dfef;font-family:'Hames',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#dee983;text-decoration:none}
a:hover{color:#fe8124}

/* Precisa ser 700 explícito. O padrão do navegador para <b> é "bolder", que é
   RELATIVO ao peso do pai: dentro de um texto em Hames Light (300), "bolder"
   resolve para 400 e o destaque some. Como vários blocos do site usam 300,
   sem esta linha nenhum negrito da página aparece de fato. */
b,strong{font-weight:700}

.page{position:relative;width:100%;overflow-x:clip}


/* ==========================================================================
   3. ANIMAÇÕES DE ENTRADA (scroll-driven)
   --------------------------------------------------------------------------
   .reveal liga a animação ao scroll. Cada elemento escolhe o efeito e o
   trecho de rolagem pelas próprias propriedades animation-name/animation-range,
   declaradas junto da sua classe lá embaixo.
   ========================================================================== */
@keyframes rise   {from{opacity:0;transform:translateY(46px)} to{opacity:1;transform:none}}
@keyframes riseSm {from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none}}
@keyframes fadein {from{opacity:0}                            to{opacity:1}}
@keyframes zoomin {from{opacity:0;transform:scale(.9)}        to{opacity:1;transform:none}}
@keyframes slideL {from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes slideR {from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:none}}
/* fade que NÃO começa do zero: o texto já aparece legível, porém apagado, e
   vai ao opaco conforme rola (usado no título "Uma semana para fortalecer") */
@keyframes fadeSoft{from{opacity:.18} to{opacity:1}}

.reveal{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view()}


/* ==========================================================================
   4. BOTÃO CTA (reaproveitado em 8 lugares)
   ========================================================================== */
.btn-cta{
  display:inline-block;
  background:#ff3602;
  color:#e5dfef;
  font-family:'bebas-neue-pro', sans-serif;
  font-style:normal;
  text-transform:uppercase;
  font-size:calc(5.2 * var(--u));
  letter-spacing:calc(0.114 * var(--u));
  margin-bottom:calc(6.818 * var(--u));
  padding:calc(2.273 * var(--u)) calc(2.727 * var(--u));
  transition:transform .25s ease,background .25s ease;
}
.btn-cta:hover{background:#fe8124;color:#ffffff;transform:translateY(-3px)}

/* Variante do hero: um pouco maior */
.btn-cta--hero{font-size:calc(5.6 * var(--u))}

/* Variante creme da seção Inscreva-se */
.btn-cta--light{background:#eef3b3;color:#101650;font-size:calc(6.0 * var(--u));padding:calc(4.091 * var(--u)) calc(7.0 * var(--u))}
.btn-cta--light:hover{background:#dee983;color:#101650}

/* Centraliza o botão quando ele é filho de um flex column */
.btn-cta--center{align-self:center}


/* ==========================================================================
   5. UTILITÁRIOS DE TEXTO
   ========================================================================== */
.italic{font-style:italic}
.accent{color:#dee983}
.accent-italic{color:#dee983;font-style:italic;display:inline-block}
.accent-strong{color:#dee983}

/* Quebras de linha que dependem do tamanho da tela. Aqui vale o celular:
   br-mob quebra, br-desk fica desligado. A seção DESKTOP inverte os dois. */
.br-mob{display:inline}
.br-desk{display:none}


/* ==========================================================================
   6. IMAGEM DE SOBREPOSIÇÃO DAS SEÇÕES
   ========================================================================== */
.section-overlay{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  pointer-events:none;
  opacity:.9;
}
.section-overlay--soft{opacity:.85}


/* ==========================================================================
   7. LOGO FIXO (aparece ao rolar)
   ========================================================================== */
/* Barra do topo: logo à esquerda, menu à direita, dentro de 80% da largura
   (o resto vira respiro nas laterais). Antes cada um era um position:fixed
   solto grudado nos cantos da tela. */
.topbar{
  position:fixed;top:calc(6.364 * var(--u));left:50%;transform:translateX(-50%);
  width:80%;max-width:1600px;z-index:80;
  display:flex;align-items:flex-start;justify-content:space-between;
  pointer-events:none;               /* a barra em si não bloqueia cliques */
}
.topbar > *{pointer-events:auto}

/* Logo: escondida no topo da página, entra deslizando quando rola. */
.brand{
  height:calc(11.818 * var(--u));
  display:flex;align-items:center;
  opacity:0;transform:translateX(-16px);pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.page.is-scrolled .brand{opacity:1;transform:translateX(0);pointer-events:auto}
.brand:hover{opacity:.75}
.page.is-scrolled .brand:hover{opacity:.75}

.brand-img{display:block;height:calc(6.364 * var(--u));width:auto}


/* ==========================================================================
   8. MENU FLUTUANTE
   ========================================================================== */
/* O menu vive dentro da .topbar (por isso não tem mais position:fixed).
   No topo da página ele fica centralizado na tela; ao rolar volta para a ponta
   direita da barra. O -40vw leva a borda direita da barra (que está em 90vw,
   por causa dos 80% de largura) até o meio da tela. */
.menu{
  position:relative;                 /* âncora do painel, que é absolute */
  display:flex;flex-direction:column;align-items:flex-end;
  /* os 5.909u equivalem a metade do botão (que agora escala junto) — se este
     valor ficasse fixo em px, o botão sairia do centro nas telas menores */
  transform:translateX(calc(-40vw + 5.909 * var(--u)));
  transition:transform .6s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.page.is-scrolled .menu,
.page.is-open     .menu{transform:translateX(0)}

/* --- botão hambúrguer --- */
.menu-toggle{
  appearance:none;border:0;cursor:pointer;
  width:calc(11.818 * var(--u));height:calc(11.818 * var(--u));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(1.364 * var(--u));padding:0;
  background:transparent;box-shadow:none;
  transition:background .45s ease,box-shadow .45s ease;
}
.page.is-scrolled .menu-toggle,
.page.is-open     .menu-toggle{
  background:transparent;
   }

.menu-bar{
  display:block;
  width:calc(10.227 * var(--u));
  height:calc(1.136 * var(--u));
  background:#e5dfef;
  transition:transform .4s
  cubic-bezier(.65,0,.35,1),opacity .25s ease;
}
/* vira um "X" com o menu aberto */
.page.is-open .menu-bar:nth-child(1){transform:translateY(11px) rotate(45deg)}
.page.is-open .menu-bar:nth-child(2){opacity:0}
.page.is-open .menu-bar:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

/* --- painel ---
   Fora do fluxo de propósito: no fluxo, seus 340px entravam na conta da
   largura do menu e, somados à logo, estouravam a barra de 80% — o botão era
   empurrado para fora da tela no celular. Solto, o menu mede só o botão. */
.menu-panel{
  position:absolute;top:calc(100% + 2.727 * var(--u));right:0;
  /* 77.273u = os mesmos 340px de 440px de largura. Antes era min(84vw,340px),
     que dava 84% da tela nos aparelhos menores e 77% no 440 — o painel mudava
     de proporção conforme o celular. */
  width:calc(77.273 * var(--u));aspect-ratio:1/1;
  background:#1100be;border:2px solid #dee983;
  transform-origin:top right;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(5.0 * var(--u));
  transform:scale(.06);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.34,1.4,.64,1),opacity .32s ease;
}
.page.is-open .menu-panel{transform:scale(1);opacity:1;pointer-events:auto}

.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(2.4 * var(--u))}

.menu-link{
  font-family:'bebas-neue-pro', sans-serif;
  font-weight:600;
  font-style:normal;
  text-transform:uppercase;
  font-size:calc(4.0 * var(--u));letter-spacing:calc(0.136 * var(--u));
  color:#e5dfef;display:block;
}
.menu-link:hover{color:#dee983}
.menu-link--cta{color:#dee983}
.menu-link--cta:hover{color:#fe8124}

.menu-social{display:flex;align-items:center;gap:calc(4.091 * var(--u));border-top:1px solid rgba(229,223,239,.28);padding-top:calc(3.182 * var(--u))}
.menu-social-link{display:block}
.menu-social-link:hover{opacity:.7}
.menu-social-ic{display:block;height:calc(5.0 * var(--u));width:auto}
.menu-social-ic--mail{height:calc(3.864 * var(--u))}


/* ==========================================================================
   9. SEÇÃO 01 — HERO
   ========================================================================== */
.hero{
  position:relative;
  width:100%;
  height:95vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:calc(4.545 * var(--u));
  background-image:url('assets/hero-bg.png');
  background-size:cover;
  background-position:center bottom;
  overflow:hidden;
}
.hero-title{
  position:relative;width:min(100%,900px);margin:0;
  text-align:center;font-family:'Vorge';text-transform:uppercase;
  line-height:.86;color:#ffffff;
  animation-name:zoomin;animation-range:entry 0% entry 30%;
}
.hero-logo{
  display:block;
  width:min(75%);
  height:auto;
  margin:0 auto;
 margin-top:calc(20.455 * var(--u));
}
 

.hero-body{
  position:relative;
  width:min(100%,620px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(4.0 * var(--u))
}

.hero-date{
  margin:calc(2.273 * var(--u));
  font-family:'Vorge';
  text-transform:uppercase;color:#ffffff;
  font-size:clamp(calc(6.818 * var(--u)),min(3.4vw,7.4vh),calc(6.818 * var(--u)));
  line-height:1;
  letter-spacing:0px
}

.hero-date-alt{
  font-family:'Hames';
  font-weight:700;
  letter-spacing:-2px;
}

.hero-lead{
  color:#ffffff;
  font-size:calc(4.0 * var(--u));
  line-height:1.2;
  margin:calc(4.545 * var(--u));
  font-weight:300;
  }


/* ==========================================================================
   10. SEÇÃO 02 — CONTAGEM REGRESSIVA
   ========================================================================== */
.countdown{
  position:relative;width:100%;
  background:#1100be url('assets/countdown-bg.png') center/cover no-repeat;
  padding:calc(10.455 * var(--u)) calc(4.545 * var(--u));
  display:flex;justify-content:center;
}
.countdown-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(2.4 * var(--u));width:min(100%,760px);
  animation-name:riseSm;animation-range:entry 10% entry 55%;
}
.countdown-cell{
  background:#0d057d;
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0px;
  padding:0px
}
.countdown-num{
  font-family:'Vorge';
  color:#e5dfef;
  font-size:calc(13.182 * var(--u));
  line-height:1;
  letter-spacing:-2px;
}
.countdown-label{
  color:#e5dfef;
  font-size:calc(3.1 * var(--u))}


/* ==========================================================================
   11. SEÇÃO 03 — VÍDEO
   ========================================================================== */
.video{
  position:relative;
  width:100%;
  background:#1100be;
  display:flex;
  justify-content:center
}
/* Largura total: o vídeo sangra de borda a borda, sem teto de 1180px. */
.video-frame{
  position:relative;
  width:100%;
  animation-name:fadein;animation-range:entry 0% entry 40%;
}
.video-player{
  display:block;
  width:100%;
  height:auto;
  /* enquanto o arquivo carrega, o poster segura o espaço no lugar de um salto */
  aspect-ratio:16/9;
  object-fit:cover;
  background:#101650;
}


/* ==========================================================================
   12. SEÇÃO 04 — O QUE VOCÊ VAI VIVENCIAR
   ========================================================================== */
.experience{
  position:relative;
  width:100%;
  background:#1100be;
  padding:calc(13.636 * var(--u)) calc(4.545 * var(--u)) calc(11.364 * var(--u));
  overflow:hidden
}

.experience-inner{
  position:relative;
  width:min(100%,1100px);
  margin:0 auto;display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(7.273 * var(--u))
}

.experience-title{
  margin:0;
  text-align:center;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.9;
  font-size:calc(13.0 * var(--u));
  color:#e5dfef;
  animation-name:rise;animation-range:entry 5% entry 45%;
}
.experience-grid{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(300px,1fr));
  gap:calc(4.545 * var(--u));width:100%

}

.experience-card{
  background:#101650;
  border:1.7px solid #dee983;
  border-radius:calc(9.091 * var(--u)) 0 calc(9.091 * var(--u)) 0;
  padding:calc(5.455 * var(--u));
  animation-name:rise;animation-range:entry 8% entry 48%;
}
.experience-card-title{
  margin:0 0 calc(2.727 * var(--u));
  font-family:'Vorge';
  text-transform:uppercase;
  color:#dee983;
  font-size:calc(6.545 * var(--u));
  text-align:center;
}
.experience-card-text{
  margin:0;
  color:#ffffff;
  font-weight:100;
  letter-spacing:0em;
  font-size:calc(3.636 * var(--u));
  line-height:1.1;
  text-align:center;
  text-wrap:pretty}


/* ==========================================================================
   13. SEÇÃO 05 — UMA SEMANA PARA FORTALECER
   ========================================================================== */
.strengthen{
  position:relative;
  width:100%;
  background:#1100be;
  padding:calc(11.364 * var(--u)) calc(4.545 * var(--u)) calc(15.909 * var(--u));
  display:flex;flex-direction:column;
  align-items:center;gap:calc(6.818 * var(--u))}

.strengthen-title{
  margin:0;
  text-align:center;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:1;
  font-size:calc(10.0 * var(--u));color:#e5dfef;width:min(100%,900px);
  margin-top:-50px;
}
/* Revelação letra a letra: cada <span class="ch"> (criada pelo splitLetters()
   no app.js) recebe um índice --i, e o índice desloca a faixa de scroll em que
   aquela letra acende. Resultado: o texto vai "preenchendo" conforme rola.
   O passo de 0.45% por letra define a defasagem entre uma e outra. */
.strengthen-title .ch{
  animation-name:fadeSoft;
  animation-timing-function:linear;
  animation-fill-mode:both;
  animation-timeline:view();
  animation-range:
    entry calc(12% + var(--i) * .45%)
    entry calc(46% + var(--i) * .45%);
}


/* ==========================================================================
   14. SEÇÃO 06 — CRONOGRAMA
   ========================================================================== */
.schedule{
  position:relative;
  width:100%;
  background:#e5dfef;
  padding:calc(11.364 * var(--u)) 0 0;
  overflow:hidden}
/* Arco + risco no alto da seção. Fica limitado a 720px para o arco não crescer
   demais em telas largas. */
.schedule-overlay{position:absolute;left:0;top:clamp(calc(11.364 * var(--u)),24%,360px);width:min(100%,720px);height:auto;pointer-events:none}

/* A mesma arte (05-overlay.png) traz, no seu rodapé, uma segunda faixa
   inclinada: é a "elevação" na quebra entre esta seção e a próxima. Ela não
   aparecia porque o <img> acima recorta só o topo do arquivo. Aqui o arquivo é
   reaproveitado ancorado na base — background-position:bottom mostra apenas o
   trecho final da arte, e o aspect-ratio reserva exatamente a altura dessa
   faixa (113px para 1080 de largura), preservando o ângulo original. */
.schedule::after{
  content:'';
  position:absolute;left:0;bottom:0;width:100%;
  aspect-ratio:1080/113;
  background:url('assets/05-overlay.png') left bottom / 100% auto no-repeat;
  pointer-events:none;
}
.schedule-head{
  position:relative;
  width:min(100%,1180px);
  margin:0 auto;
  padding:0 calc(4.545 * var(--u));
  text-align:center;
}

.schedule-title{
  margin:0;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.70;
  color:#1100be;
  font-size:calc(12.0 * var(--u));
  animation-name:slideL;animation-range:entry 5% entry 45%;
}

.schedule-sub{
  margin:calc(3.182 * var(--u)) 0 0;
  display:inline-block;
  font-size:calc(3.8 * var(--u));
  color:#e5dfef;
  line-height:1.1
}

.schedule-sub-mark{
  background:#101650;
  padding:calc(0.682 * var(--u)) calc(2.273 * var(--u));
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.schedule-body{
  /* Duas colunas SEMPRE: lista à esquerda, foto à direita — inclusive no
     mobile. (Antes era repeat(auto-fit,minmax(300px,1fr)), que abaixo de
     ~640px colapsava para uma coluna e empilhava a foto embaixo da lista.)
     O minmax(0,…) deixa o texto quebrar em vez de esticar a coluna. */
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;gap:calc(3.0 * var(--u));
  width:min(100%,1180px);margin:calc(6.818 * var(--u)) auto 0;
  padding:0 0 0 calc(4.545 * var(--u));position:relative;overflow:hidden;
}
.schedule-list{
  list-style:none;
  margin-top:calc(29.545 * var(--u));
  margin-bottom:calc(6.818 * var(--u));
  padding:0 0 calc(6.818 * var(--u));
  display:flex;
  flex-direction:column;gap:calc(3.4 * var(--u));
  animation-name:riseSm;animation-range:entry 10% entry 50%;
}
.schedule-item{
  display:flex;
  align-items:baseline;
  gap:calc(2.273 * var(--u));
  cursor:pointer
}
.schedule-mark{
  width:calc(3.182 * var(--u));
  flex:none;color:#ff3602;
  font-size:calc(2.955 * var(--u));
  line-height:1.4
}

.schedule-label{
  font-family:'Hames';
  font-size:calc(3.636 * var(--u));
  margin-top:calc(1.136 * var(--u));
  text-transform:uppercase;
  color:rgba(16,22,80,.28);
  transition:color .3s ease,font-weight .2s ease;
}
/* item da lista: inativo x ativo (a classe .is-on é aplicada pelo app.js) */
.schedule-label-text{color:rgba(16,22,80,.28);font-weight:400}
.schedule-label-text.is-on{color:#101650;font-weight:700}

.schedule-photo{
  position:relative;min-height:calc(72.727 * var(--u));height:100%;
  background:url('assets/cronograma-foto.png') center/cover no-repeat;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);
  animation-name:slideR;animation-range:entry 5% entry 50%;
}


/* ==========================================================================
   15. SEÇÃO 07 — ESTRUTURA (carrossel)
   ========================================================================== */
.structure{
  position:relative;
  width:100%;
  background:#1100be;
  padding:calc(12.727 * var(--u)) calc(4.545 * var(--u));
  overflow:hidden
}

.structure-inner{
  width:min(100%,1100px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(5.909 * var(--u))
}

.structure-title{
  margin:0;
  text-align:center;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.9;
  color:#dee983;
  font-size:calc(13.0 * var(--u));
  animation-name:rise;animation-range:entry 5% entry 45%;
}
.structure-lead{
  margin:0;
  text-align:center;
  color:#ffffff;
  font-size:calc(4.3 * var(--u));
  line-height:1.0;
  width:min(100%,620px);
  text-wrap:pretty;
  font-weight:300;
}


.carousel{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  gap:calc(2.0 * var(--u))
}

.carousel-nav{
  appearance:none;
  border:0;
  cursor:pointer;
  flex:none;
  width:calc(11.0 * var(--u));
  height:calc(11.0 * var(--u));
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease,opacity .25s ease;
}
.carousel-nav:hover{
  opacity:.85;
  transform:scale(1.06)
}

.carousel-nav-ic{
  width:100%;
  height:auto
}

.carousel-nav-ic--flip{
  transform:rotate(180deg)
}

/* --------------------------------------------------------------------------
   CARROSSEL NO CELULAR — pilha com profundidade
   Os cards ficam sobrepostos no mesmo lugar: o em foco à frente, inteiro, e os
   vizinhos atrás — menores, inclinados, desbotados e fora de foco. Quem manda
   é a classe (is-active / is-prev / is-next) que o app.js calcula a partir do
   índice; as setas e o toque no card lateral trocam o foco.
   No desktop isso é substituído por três cards lado a lado (seção 24).
   -------------------------------------------------------------------------- */
.carousel-track{
  flex:1;
  min-width:0;
  position:relative;
  aspect-ratio:81/83;
  padding:calc(0.909 * var(--u)) 0;
  perspective:1000px;
}

.carousel-card{
  margin:0;
  position:absolute;
  inset:0;
  overflow:hidden;
  aspect-ratio:81/83;
  cursor:pointer;
  transform-origin:center;
  transition:transform .55s cubic-bezier(.22,1,.36,1),
             opacity .45s ease,
             filter .45s ease;
}
.carousel-card.is-active{
  transform:translateX(0) scale(1) rotate(0deg);
  opacity:1;z-index:3;filter:none;
}
.carousel-card.is-prev{
  transform:translateX(-22%) scale(.85) rotate(-3deg);
  opacity:.4;z-index:2;filter:grayscale(1) blur(2px) brightness(.75);
}
.carousel-card.is-next{
  transform:translateX(22%) scale(.85) rotate(3deg);
  opacity:.4;z-index:2;filter:grayscale(1) blur(2px) brightness(.75);
}
.carousel-card.is-far{
  transform:scale(.7);
  opacity:0;z-index:1;pointer-events:none;
}
/* só o card em foco mostra a legenda */
.carousel-card:not(.is-active) .carousel-caption{opacity:0}
.carousel-caption{transition:opacity .35s ease}

.carousel-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

.carousel-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:calc(4.0 * var(--u));
  /* sem o degradê escuro que subia da base do card */
}

.carousel-caption-title{
  margin:0;
  font-weight:700;
  color:#ffffff;
  text-transform:uppercase;
  font-size:calc(3.636 * var(--u));
  line-height:1.15
}

.carousel-caption-sub{
  margin:calc(0.909 * var(--u)) 0 0;
  color:#ffffff;
  font-weight:300;
  font-size:calc(3.8 * var(--u));
  line-height:1;
}


/* ==========================================================================
   16. SEÇÃO 08 — QUEM VAI ESTAR NO EVENTO
   ========================================================================== */
.people{
  position:relative;
  width:100%;
  background:#0d3d47;
  padding:calc(12.727 * var(--u)) calc(4.545 * var(--u));
  overflow:hidden
}

.people-inner{
  width:min(100%,1000px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:calc(6.364 * var(--u))
}

.people-head{
  display:flex;
  flex-direction:column;
  gap:calc(2.273 * var(--u));
  animation-name:rise;animation-range:entry 5% entry 45%;
}
.people-title{
  margin:0;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.9;
  color:#dee983;
  font-size:calc(10.4 * var(--u));
  text-align:center;

}

.people-sub{
  margin:0;
  color:#dee983;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:calc(0.114 * var(--u));
  font-size:calc(4.0 * var(--u));
  line-height:1.2;
  text-align:center;

}

.people-list{
  display:flex;
  flex-direction:column;
  gap:calc(5.909 * var(--u))
}

.people-item{
  display:flex;gap:calc(3.4 * var(--u));
  animation-name:riseSm;animation-range:entry 8% entry 48%;
}
.people-num{
  flex:none;
  width:calc(10.455 * var(--u));
  height:calc(10.455 * var(--u));
  border-radius:calc(1.136 * var(--u));
  background:#03bfa6;
  color:#0d3d47;
  font-family:'Vorge';
  font-size:calc(10.909 * var(--u));
  display:flex;align-items:center;justify-content:center;
}
.people-item-title{
  margin:0 0 calc(1.364 * var(--u));
  font-weight:700;
  color:#ffffff;
  font-size:calc(5.6 * var(--u));
  line-height:1.1
}

.people-item-text{
  margin:0;
  color:#e5dfef;
  font-size:calc(3.636 * var(--u));
  line-height:1.15;
  font-weight:300;
  text-wrap:pretty;
}


/* ==========================================================================
   17. SEÇÃO 09 — ESSA SEMANA É PRA VOCÊ SE / NÃO É PRA VOCÊ SE
   ========================================================================== */
.fit{
  position:relative;
  width:100%;
  background:#1100be;
  padding:calc(12.727 * var(--u)) calc(4.545 * var(--u));
  overflow:hidden
}

.fit-grid{
  width:min(100%,1080px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:calc(8.182 * var(--u))
}

.fit-col{
  display:flex;
  flex-direction:column;
  gap:calc(3.6 * var(--u));
  animation-name:rise;animation-range:entry 5% entry 45%;
}
.fit-title{
  margin:0;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.9;
  margin-left:calc(6.818 * var(--u));
  color:#dee983;
  font-size:calc(10.909 * var(--u));
  margin-bottom:calc(9.091 * var(--u));
}

.fit-title--no{color:#fe8124}

.fit-badge-wrap{
  position:relative;
  display:flex;
  align-items:flex-start
}

.fit-badge{
  position:absolute;
  left:-10%;
  top:-15%;
  width:calc(40.0 * var(--u));
  height:auto;
  pointer-events:none
}

.fit-badge--x{
  left:auto;
  right:-20%;
  top:-40%;
  width:calc(56.818 * var(--u))}

.fit-list{
  list-style:none;
  margin:0 0 0 auto;
  padding:calc(4.545 * var(--u));
  width:min(78%,420px);
  background:#101650;
  border:1px solid #dee983;
  border-radius:calc(4.545 * var(--u));
  display:flex;
  flex-direction:column;
  gap:calc(3.182 * var(--u));
}
.fit-list--no{
  margin:0;
  z-index:1;
}

.fit-item{
  display:flex;
  gap:calc(2.727 * var(--u));
  color:#e5dfef;
  font-size:calc(3.273 * var(--u));
  font-weight:300;
  line-height:1.4
}

.fit-bullet{
  color:#dee983;
  flex:none
}

.fit-bullet--no{
  color:#ff3602
}

.fit-cta{
  display:flex;
  justify-content:center;
  margin-top:calc(7.727 * var(--u))
}


/* ==========================================================================
   18. SEÇÃO 10 — QUEM ESTÁ POR TRÁS
   ========================================================================== */
.behind{
  position:relative;
  width:100%;
  background:#0d3d47 url('assets/09-bg.png') center/cover no-repeat;
  padding: calc(11.364 * var(--u));overflow:hidden;
}
.behind-inner{
  position:relative;
  width:min(100%,760px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(5.0 * var(--u))
}

.behind-title{
  margin:0;
  text-align:center;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.8;
  color:#e5dfef;
  font-size:calc(10.4 * var(--u));
  animation-name:rise;animation-range:entry 5% entry 45%;
}
.behind-logo{
  display:block;width:min(45%,340px);
  height:auto;
  animation-name:zoomin;animation-range:entry 8% entry 48%;
}
.behind-banner{
  margin:0;
  background:#dee983;
  color:#101650;
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
  font-size:calc(3.9 * var(--u));
  padding:calc(2.273 * var(--u)) calc(1.136 * var(--u));
  width:100%;
}

.behind-text{
  display:flex;
  flex-direction:column;
  gap:calc(3.636 * var(--u));
  color:#ffffff;
  font-size:calc(4.1 * var(--u));
  line-height:1.2;
  font-weight: 300;
  text-align:center;
  margin-bottom:calc(4.545 * var(--u));
  text-wrap:pretty}
.behind-text p{margin:0}


/* ==========================================================================
   19. SEÇÃO 11 — PROCESSO DE ADMISSÃO
   ========================================================================== */
.admission{
  position:relative;
  width:100%;
  background:#101650;
  padding:calc(9.091 * var(--u));
  overflow:hidden
}

.admission-inner{
  position:relative;
  width:min(100%,900px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(6.818 * var(--u))
}

.admission-title{
  margin:0;
  text-align:center;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.9;
  color:#e5dfef;
  font-size:calc(10.4 * var(--u));
  animation-name:rise;animation-range:entry 5% entry 45%;
}
/* Os 4 passos ficam sempre em 2x2, como na arte mobile. Antes era
   repeat(auto-fit,minmax(240px,1fr)): no celular virava uma coluna só (4
   empilhados) e em telas médias caía num 3+1 torto. */
/* Os quatro passos empilhados, um por linha (antes era uma grade 2x2). */
.admission-steps{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:calc(3.0 * var(--u));
  width:100%;
}
.admission-step{
  display:flex;
  gap:calc(2.0 * var(--u));
  animation-name:riseSm;animation-range:entry 8% entry 50%;
}
.admission-step-num{
  flex:none;
  width:calc(11.0 * var(--u));
  border:1px solid #e5dfef;
  border-radius:calc(2.273 * var(--u));
  display:flex;align-items:center;
  justify-content:center;
  color:#dee983;font-family:'Vorge';
  font-size:calc(10.909 * var(--u));
}
.admission-step-label{
  flex:1;
  border:1px solid #e5dfef;
  border-radius:calc(2.273 * var(--u));
  padding:calc(2.273 * var(--u)) calc(3.182 * var(--u));
  color:#e5dfef;
  font-weight:700;
  /* mesmo corpo do texto da seção (.admission-text) */
  font-size:calc(4.1 * var(--u));
  line-height:1.15;
  display:flex;align-items:center;
}
/* Corpo em Hames Light: o contraste da seção vem dos <b>, que continuam 700. */
.admission-text{
  display:flex;
  flex-direction:column;
  gap:calc(3.636 * var(--u));
  text-align:center;
  color:#e5dfef;font-weight:300;
  font-size:calc(4.1 * var(--u));
  line-height:1.2;
  width:min(100%,700px);text-wrap:pretty;
}
.admission-text p{margin:0}


/* ==========================================================================
   20. SEÇÃO 12 — DATA E LOCAL
   ========================================================================== */
.where{
  position:relative;
  width:100%;
  background:#0d3d47 url('assets/11-bg.png') center/cover no-repeat;
  padding:calc(12.727 * var(--u)) calc(4.545 * var(--u));
  overflow:hidden;
}
.where-inner{
  position:relative;
  width:min(100%,860px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(4.545 * var(--u))
}

.where-title{
  margin:0;
  text-align:center;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.9;
  color:#dee983;
  font-size:calc(12.0 * var(--u));
  animation-name:rise;animation-range:entry 5% entry 45%;
}
.where-sub{
  margin:0;
  text-align:center;
  color:#ffffff;
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(3.636 * var(--u));
  line-height:1.25;
  letter-spacing:calc(0.114 * var(--u))
}

.where-rows{
  display:flex;
  flex-direction:column;
  gap:calc(2.727 * var(--u));
  width:100%;
  align-items:center
}

.where-row{
  margin:0;
  background:#1100be;
  color:#ffffff;
  padding:calc(3.182 * var(--u)) calc(4.545 * var(--u));
  font-size:calc(3.636 * var(--u));
  font-weight:300;
  line-height:1.35;
  width:100%;
  text-align:center;
  animation-name:slideL;animation-range:entry 8% entry 50%;
}
.where-alert{
  margin:calc(6.818 * var(--u)) calc(2.273 * var(--u));
  background:#eef3b3;
  color:#101650;
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
  font-size:calc(3.273 * var(--u));
  padding:calc(1.136 * var(--u)) calc(1.136 * var(--u));
  transform:rotate(-3deg);
  width:100%}


/* ==========================================================================
   21. SEÇÃO 13 — INSCREVA-SE
   ========================================================================== */
.signup{
  position:relative;
  width:100%;
  background:#1100be url('assets/12-bg.png') center/cover no-repeat;
  padding:calc(11.364 * var(--u));
  display:flex;
  justify-content:center;
}
.signup-inner{
  width:min(100%,720px);
  display:flex;flex-direction:column;
  align-items:center;
  gap:calc(5.0 * var(--u));
  text-align:center
}

.signup-title{
  margin:0;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.9;
  color:#e5dfef;
  font-size:calc(10.909 * var(--u));
  animation-name:zoomin;animation-range:entry 5% entry 45%;
}
.signup-lead{
  margin:0;
  color:#ffffff;
  font-size:calc(3.636 * var(--u));
  font-weight:300;
  line-height:1.45
}
.signup-note{
  margin:0;
  color:#e5dfef;
  font-weight:300;
  font-size:calc(3.9 * var(--u));
  line-height:1.2;
  margin-top:-30px;
}


/* ==========================================================================
   22. SEÇÃO 14 — FAQ
   ========================================================================== */
.faq{
  position:relative;
  width:100%;
  background:#101650;
  padding:calc(12.727 * var(--u)) calc(4.545 * var(--u));
  overflow:hidden;
}
.faq-inner{
  position:relative;
  width:min(100%,900px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(5.909 * var(--u))
}

.faq-head{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  animation-name:zoomin;animation-range:entry 5% entry 45%;
}

.faq-title{
  margin:0;
  font-family:'Vorge';
  text-transform:uppercase;
  line-height:.82;
  color:#e5dfef;
  font-size:calc(36.364 * var(--u));
}

.faq-tag{
  position:absolute;
  right:-8%;
  bottom:16%;
  transform:rotate(-8deg);
  background:#dee983;
  color:#1100be;
  font-weight:700;
  text-transform:uppercase;
  font-size:calc(3.0 * var(--u));
  letter-spacing:calc(0.114 * var(--u));
  padding:calc(1.136 * var(--u)) calc(2.273 * var(--u));
  white-space:nowrap;
}

.faq-list{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:calc(2.2 * var(--u))
}

.faq-item{
  background:#195764;
  border-radius:calc(2.273 * var(--u));
  overflow:hidden;
  animation-name:riseSm;animation-range:entry 6% entry 46%;
}
.faq-q{
  appearance:none;
  border:0;
  background:transparent;
  width:100%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(3.636 * var(--u));
  text-align:left;
  padding:calc(3.6 * var(--u))
  calc(4.0 * var(--u));
}
.faq-q-text{
  font-weight:700;
  font-size:calc(4.1 * var(--u));
  line-height:1.2;
  color:#e5dfef
}
/* pergunta fechada x aberta (a classe .is-on é aplicada pelo app.js) */
.faq-q-label{
  color:#e5dfef
}

.faq-q-label.is-on{
  color:#dee983
}

.faq-icon{
  flex:none;
  font-size:calc(4.6 * var(--u));
  color:#e5dfef;
  line-height:1
}

.faq-answer{
  padding:0 calc(4.0 * var(--u)) calc(4.0 * var(--u));
  border-top:1px solid #dee983;
  margin-top:-1px
}

.faq-answer-text{
  margin:calc(3.182 * var(--u)) 0 0;
  color:#e5dfef;
  font-weight:300;
  font-size:calc(3.8 * var(--u));
  line-height:1.5;
  text-wrap:pretty;
  /* Respeita as quebras de linha escritas no app.js (a resposta sobre
     cancelamento tem três parágrafos). Espaços continuam sendo colapsados. */
  white-space:pre-line;
}


/* ==========================================================================
   23. SEÇÃO 15 — RODAPÉ
   ========================================================================== */
.footer{
  position:relative;
  width:100%;
  background:#f56a03;
  padding:calc(11.364 * var(--u)) calc(4.545 * var(--u)) calc(7.727 * var(--u));
  display:flex;flex-direction:column;
  align-items:center;
  gap:calc(6.364 * var(--u))
}

.footer-logo{
  display:block;
  width:min(62%,300px);
  height:auto;
  margin-top: calc(4.545 * var(--u));
}
.footer-contacts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:calc(4.0 * var(--u))
}

.footer-contact{
  display:flex;
  align-items:center;
  gap:calc(2.273 * var(--u));
  font-weight: 300;
  color:#ffffff;
  font-size:calc(4.4 * var(--u))}
.footer-contact:hover{color:#eef3b3}
.footer-ic{height:calc(5.909 * var(--u));width:auto}
.footer-ic--wa{height:calc(5.455 * var(--u))}
.footer-ic--mail{height:calc(4.318 * var(--u))}
.footer-legal{display:flex;flex-direction:column;align-items:center;gap:calc(0.909 * var(--u));color:#ffffff;font-weight:300;font-size:calc(3.8 * var(--u))}
.footer-link{color:#ffffff}
.footer-link:hover{color:#eef3b3}


/* ==========================================================================
   24. DESKTOP  (telas a partir de 1000px)
   --------------------------------------------------------------------------
   Todo o resto da folha é escrito para o celular. Esta seção — e SÓ ela —
   adapta o layout para telas grandes, então dá para mexer aqui sem risco de
   afetar o mobile.
   ========================================================================== */
@media (min-width:1000px){

  /* --- quebras de linha que mudam entre celular e desktop --- */
  .br-mob{display:none}
  .br-desk{display:inline}

  /* ===== DOBRA 1 — HERO: conteúdo e logo alinhados à esquerda ===== */
  .hero{
    /* arte própria de desktop: o jogador fica à direita e a área livre da
       esquerda é onde entra o conteúdo */
    background-image:url('assets/desktop/bg dobra 1.png');
    background-size:cover;
    background-position:center top;
    align-items:flex-start;
    justify-content:center;
    gap:clamp(26px,3vw,44px);
    padding:clamp(90px,9vw,140px) clamp(48px,7vw,120px);
    text-align:left;
  }
  .hero-title{width:min(100%,640px);margin:0;text-align:left}
  .hero-logo{width:min(100%,580px);margin:0}
  .hero-body{
    width:min(100%,560px);
    align-items:flex-start;
    text-align:left;
  }
  .hero-date{font-size:clamp(38px,3.6vw,54px)}
  .hero-lead{margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.45}

  /* ===== DOBRA 3 — VIVENCIAR: 2 cards em cima, 2 embaixo ===== */
  .experience{padding:clamp(80px,7vw,130px) clamp(48px,6vw,110px)}
  .experience-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.4vw,36px)}
  .experience-inner{width:min(100%,1040px)}
  .experience-card{padding:clamp(30px,2.6vw,42px)}
  .experience-card-text{font-size:clamp(16px,1.2vw,18px);line-height:1.55}

  /* ===== DOBRA 5 — CRONOGRAMA ===== */
  /* Sem as faixas azuis sobrepostas nesta largura: elas cruzavam a foto. */
  .schedule-overlay{display:none}
  .schedule::after{display:none}

  /* Layout da arte de desktop: todo o texto numa coluna à esquerda e a foto
     ocupando a altura inteira da seção, colada na borda direita. */
  .schedule{padding:clamp(56px,6vw,100px) 0 clamp(70px,7vw,120px)}

  .schedule-head{
    position:relative;z-index:1;
    width:min(62%,780px);margin:0;
    padding:0 0 0 clamp(48px,7vw,130px);
    text-align:left;                 /* era centralizado */
  }

  /* position:static solta a foto para se ancorar na SEÇÃO, não nesta grade. */
  .schedule-body{
    position:static;
    display:block;
    width:100%;max-width:none;
    padding:0 0 0 clamp(48px,7vw,130px);
    margin-top:clamp(18px,1.8vw,28px);
  }

  /* Os 6 tempos em 3 colunas x 2 linhas. O auto-flow em coluna mantém a
     sequência original descendo antes de saltar para a coluna seguinte. */
  .schedule-list{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(2,auto);
    /* cada coluna com a largura do seu próprio texto: é o que evita
       "MINISTRAÇÕES E LOUVOR" quebrar em duas linhas, como na arte */
    grid-auto-columns:max-content;
    gap:clamp(10px,1.1vw,16px) clamp(18px,2.2vw,36px);
    width:auto;max-width:56%;      /* folga até a borda diagonal da foto */
    /* zera o margin-top:130px da versão mobile (lá ele desce a lista para
       alinhar com a foto ao lado; aqui virava um vão enorme sob o subtítulo) */
    margin:0;
    padding:0;
    justify-content:start;
  }
  .schedule-label{font-size:clamp(15px,1.3vw,19px);letter-spacing:1.1px}
  .schedule-item{align-items:center}
  .schedule-mark{width:14px;font-size:13px}

  /* Foto sangrando de topo a base, com o corte diagonal da arte. */
  .schedule-photo{
    position:absolute;top:0;right:0;bottom:0;
    width:36%;height:auto;min-height:0;
    background-position:center top;
    clip-path:polygon(16% 0,100% 0,100% 100%,0 100%);
  }

  /* ===== DOBRA 6 — ESTRUTURA: os 3 cards lado a lado ===== */
  /* Sem setas no desktop (só no celular) — aqui os três aparecem de uma vez. */
  .carousel-nav{display:none}
  .carousel{--gap:26px}

  /* desfaz a pilha do celular: volta a ser uma fileira normal */
  .carousel-track{
    display:flex;
    position:static;
    aspect-ratio:auto;
    perspective:none;
    gap:var(--gap);
  }
  .carousel-card{
    position:relative;
    inset:auto;
    width:auto;
    flex:0 0 calc((100% - 2 * var(--gap)) / 3);
    max-width:none;
    cursor:default;
  }
  /* Precisa repetir as classes de estado: .carousel-card.is-prev tem
     especificidade maior que .carousel-card e venceria mesmo aqui dentro. */
  .carousel-card.is-active,
  .carousel-card.is-prev,
  .carousel-card.is-next,
  .carousel-card.is-far{
    transform:none;
    opacity:1;
    filter:none;
    z-index:auto;
    pointer-events:auto;
  }
  .carousel-card:not(.is-active) .carousel-caption{opacity:1}
  .structure{padding:clamp(80px,7vw,130px) clamp(48px,6vw,110px)}
  .structure-inner{width:min(100%,1240px)}

  /* ===== DOBRA 14 — FAQ EM DUAS COLUNAS (4 perguntas de cada lado) ===== */
  .faq-inner{width:min(100%,1240px)}
  .faq-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    /* auto-flow em coluna + 4 linhas = perguntas 1-4 à esquerda, 5-8 à direita
       (com o fluxo padrão elas alternariam: 1,3,5,7 | 2,4,6,8) */
    grid-auto-flow:column;
    grid-template-rows:repeat(4,min-content);
    gap:clamp(12px,1.2vw,18px) clamp(20px,2vw,32px);
    align-items:start;
  }
  .faq-item{align-self:start}

  /* ===== AJUSTES GERAIS DE RESPIRO E ESCALA DE TEXTO ===== */
  .countdown{
    /* arte própria de desktop */
    background:#1100be url('assets/desktop/bg dobra 2.png') center/cover no-repeat;
    padding:clamp(60px,6vw,96px) clamp(48px,6vw,110px);
  }
  .strengthen{padding:clamp(70px,7vw,120px) clamp(48px,6vw,110px) clamp(90px,9vw,140px)}
  .people{padding:clamp(80px,7vw,130px) clamp(48px,6vw,110px)}
  .fit{padding:clamp(80px,7vw,130px) clamp(48px,6vw,110px)}
  .behind{padding:clamp(80px,7vw,130px) clamp(48px,6vw,110px)}
  .admission{padding:clamp(80px,7vw,130px) clamp(48px,6vw,110px)}
  .where{padding:clamp(80px,7vw,130px) clamp(48px,6vw,110px)}
  .signup{padding:clamp(90px,8vw,140px) clamp(48px,6vw,110px)}
  .faq{padding:clamp(80px,7vw,130px) clamp(48px,6vw,110px)}
  .footer{padding:clamp(70px,7vw,110px) clamp(48px,6vw,110px) clamp(40px,4vw,60px)}

  /* ===== DOBRA "QUEM VAI ESTAR NO EVENTO": os 3 pontos lado a lado ===== */
  .people-inner{width:min(100%,1240px)}
  .people-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(24px,2.4vw,40px);
    align-items:start;
  }
  /* em coluna estreita o número fica em cima do texto, não ao lado */
  .people-item{flex-direction:column;gap:clamp(12px,1.2vw,18px)}

  /* corpo de texto, com largura de leitura controlada.
     Escala 15% maior que o ajuste anterior. */
  .structure-lead{font-size:clamp(16px,1.2vw,18px)}
  .people-item-text{font-size:clamp(15px,1.15vw,17px);line-height:1.5}
  .admission-text{font-size:clamp(15px,1.15vw,17px);width:min(100%,760px)}
  .behind-text{font-size:clamp(15px,1.15vw,17px)}
  .fit-item{font-size:clamp(15px,1.1vw,16px)}
  .faq-q-text{font-size:clamp(16px,1.2vw,18px)}
  .faq-answer-text{font-size:clamp(14px,1.05vw,16px)}
  .signup-lead{font-size:clamp(16px,1.4vw,21px)}
  .hero-lead{font-size:clamp(16px,1.4vw,21px)}
  .experience-card-text{font-size:clamp(15px,1.1vw,16px)}
}