/* ============================================================
   FOLHA 2026 — a transição da capa para o conteúdo
   A capa fica parada ao fundo e tudo o que vem depois dela sobe por
   cima como uma folha branca de cantos arredondados: a próxima lâmina
   de uma apresentação. Enquanto a folha sobe, a capa recua (encolhe
   um pouco, sobe um pouco e apaga).

   Carrega por último, depois da mescla-2026.css.
   HTML: <div class="folha" id="folha"> embrulha do +400 até o fim do
   <main>. JS: assets/folha.js escreve --hero-top e --cover na capa
   (#hero) e põe .folha-on / .capa-coberta no <html> (sem JS, a página
   fica como uma folha estática, sem recuo nem contagem).
   ============================================================ */

:root { --folha-r: 36px; }

/* ---------- 1. A folha ---------- */
.folha {
  position: relative;
  z-index: 3;
  background: #FFFFFF;
  border-radius: var(--folha-r) var(--folha-r) 0 0;
  /* sombra só para cima: é ela que descola a folha da capa */
  box-shadow: 0 -28px 70px -18px rgba(4, 5, 8, 0.62);
}

/* ---------- 2. A capa fica parada (≥768; no celular a cena da sede
   ocupa esse papel e é dirigida pelo GSAP, não mexer nela) ---------- */
@media (min-width: 768px) {
  #hero.hero-v2 {
    position: sticky;
    /* capa mais alta que a tela gruda pelo pé (--hero-top negativo),
       para o fim dela ficar visível enquanto a folha sobe */
    top: var(--hero-top, 0px);
    z-index: 1;
  }
  /* coberta de todo, a capa não precisa mais ser pintada */
  .capa-coberta #hero.hero-v2 { visibility: hidden; }
}

/* A capa recua conforme a folha sobe: encolhe 6%, sobe 6vh e apaga.
   Só transform e opacidade, e a opacidade vai na FOTO, não no painel
   (o painel tem transição de opacidade de 0,9 s da entrada).
   A foto recua presa à borda direita: continua sangrando para fora. */
@media (min-width: 768px) {
  #hero .hero-shell { transform-origin: 50% 40%; }
  #hero .hero-panel { transform-origin: 100% 45%; }
}

/* Caminho 1 (Chrome, Edge, Safari 26+): animação ligada à rolagem.
   Quem calcula é o compositor, na mesma thread da rolagem: o recuo
   acompanha a folha quadro a quadro, sem esperar JavaScript e sem
   redesenhar a capa. "entry 0% → entry 100%" = do topo da folha
   entrando pelo pé da tela até ele encostar no topo. */
@supports (animation-timeline: view()) and (timeline-scope: --folha) {
  #main { timeline-scope: --folha; }
  .folha { view-timeline: --folha block; }

  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    #hero .hero-shell,
    #hero .hero-panel,
    #hero .hero-panel-img,
    #hero .hero-panel-cap {
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --folha;
      animation-range: entry 0% entry 100%;
    }
    #hero .hero-shell { animation-name: capa-recua-e-apaga; }
    #hero .hero-panel { animation-name: capa-recua; }
    #hero .hero-panel-img,
    #hero .hero-panel-cap { animation-name: capa-apaga; }
  }
}
@keyframes capa-recua {
  to { transform: translate3d(0, -6vh, 0) scale(0.94); }
}
@keyframes capa-apaga {
  to { opacity: 0.28; }
}
@keyframes capa-recua-e-apaga {
  to { transform: translate3d(0, -6vh, 0) scale(0.94); opacity: 0.28; }
}

/* Caminho 2 (navegadores sem animação por rolagem): o folha.js escreve
   --cover na capa. will-change põe cada peça numa camada própria, para
   mudar só a composição, sem redesenhar a capa a cada quadro. */
@supports not ((animation-timeline: view()) and (timeline-scope: --folha)) {
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .folha-on #hero .hero-shell,
    .folha-on #hero .hero-panel {
      transform: translate3d(0, calc(var(--cover, 0) * -6vh), 0) scale(calc(1 - var(--cover, 0) * 0.06));
      will-change: transform;
    }
    .folha-on #hero .hero-shell,
    .folha-on #hero .hero-panel-img,
    .folha-on #hero .hero-panel-cap {
      opacity: calc(1 - var(--cover, 0) * 0.72);
    }
    .folha-on #hero .hero-shell { will-change: transform, opacity; }
    .folha-on #hero .hero-panel-img,
    .folha-on #hero .hero-panel-cap { will-change: opacity; }
  }
}

/* ---------- 3. Celular: a folha encosta por cima do fim da cena da
   sede, com os cantos arredondados mostrando o escuro por trás ---------- */
@media (max-width: 767.98px) {
  :root { --folha-r: 26px; }
  .folha { margin-top: calc(var(--folha-r) * -1); }
}

/* ============================================================
   4. A FAIXA DO +400 (o começo da folha)
   Número grande em tinta com o "+" dourado, frase curta ao lado,
   e as logos num trilho cinza arredondado, separadas por fios.
   ============================================================ */
.folha .hero-proof {
  background: transparent;
  background-image: none;
  border: 0;
  padding: clamp(40px, 4.4vw, 60px) 0 0;
}
.folha .hero-proof-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4.4vw, 72px);
}
.folha .hero-proof-stat {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 22px);
  margin: 0;
  text-align: left;
}
.folha .hero-proof-num {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: clamp(3.1rem, 2.1rem + 2.4vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.055em;
  color: var(--cool-900);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.folha .hp-mais {
  align-self: flex-start;
  margin: 0.02em 0.06em 0 0;
  font-size: 0.62em;
  font-weight: 500;
  line-height: 1;
  color: var(--brand-500);
}
/* largura travada em 3 algarismos: a contagem 0 → 400 não empurra a frase */
.folha .hp-conta {
  display: inline-block;
  min-width: 1.86em;
}
.folha .hero-proof-label {
  max-width: 17.5em;
  text-wrap: balance;
  font-size: clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem);
  line-height: 1.4;
  color: var(--warm-600);
}

/* trilho das logos */
.folha .hero-proof-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 92px;
  padding: 0 6px;
  border-radius: 24px;
  background: var(--warm-50);
  box-shadow: inset 0 0 0 1px var(--warm-200);
}
.folha .hp-logo {
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px 10px;
}
.folha .hp-logo + .hp-logo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: var(--warm-300);
}
.folha .hero-proof-logos img,
.folha .hp-logo img {
  display: block;
  height: var(--lh, 28px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: opacity 0.35s ease, translate 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .folha .hp-logo:hover img { opacity: 1; translate: 0 -1px; }
}

/* As logos entram uma a uma quando a folha chega (só com JS) */
@media (prefers-reduced-motion: no-preference) {
  .folha-on .folha .hero-proof:not(.is-in) .hp-logo img {
    opacity: 0;
    translate: 0 10px;
  }
  .folha-on .folha .hero-proof.is-in:not(.is-done) .hp-logo img {
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .folha-on .folha .hero-proof.is-in:not(.is-done) .hp-logo:nth-child(2) img { transition-delay: 70ms; }
  .folha-on .folha .hero-proof.is-in:not(.is-done) .hp-logo:nth-child(3) img { transition-delay: 140ms; }
  .folha-on .folha .hero-proof.is-in:not(.is-done) .hp-logo:nth-child(4) img { transition-delay: 210ms; }
  .folha-on .folha .hero-proof.is-in:not(.is-done) .hp-logo:nth-child(5) img { transition-delay: 280ms; }
  .folha-on .folha .hero-proof.is-in:not(.is-done) .hp-logo:nth-child(6) img { transition-delay: 350ms; }
}

/* ---------- respiro até o Posicionamento ---------- */
.folha .hero-proof + #clinica { padding-top: clamp(80px, 8vw, 112px); }

/* ---------- responsivo da faixa ---------- */
@media (max-width: 1180px) {
  .folha .hero-proof-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .folha .hp-logo:nth-child(n+6) { display: none; }
}
@media (max-width: 1023.98px) {
  .folha .hero-proof-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .folha .hero-proof-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .folha .hp-logo:nth-child(n+6) { display: grid; }
  .folha .hero-proof-label { max-width: 22em; }
}
@media (max-width: 767.98px) {
  .folha .hero-proof { padding-top: 40px; }
  .folha .hero-proof-inner { justify-content: stretch; text-align: left; gap: 24px; }
  .folha .hero-proof-stat { flex-direction: row; align-items: center; }
  .folha .hero-proof-label { max-width: 14em; }
  /* no celular as logos voltam: 3 por linha, fios entre elas */
  .folha .hero-proof-logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* as duas linhas da mesma altura, mesmo com logo mais alta numa delas */
    min-height: 0;
    padding: 4px;
    border-radius: 20px;
  }
  .folha .hp-logo { padding: 20px 8px; }
  .folha .hp-logo img { height: calc(var(--lh, 28px) * 0.84); }
  .folha .hp-logo:nth-child(3n + 1)::before { display: none; }
  .folha .hp-logo:nth-child(n + 4)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 1px;
    background: var(--warm-300);
  }
  .folha .hero-proof + #clinica { padding-top: 72px; }
}