/* ============================================================
   SEÇÃO CARROSSEL + CELULAR (substitui o scroll-reveal)
   Escopo total: tudo prefixado cc- e aninhado em .cel-hero
   pra não colidir com design-system.css / index.css
   ============================================================ */

/* trava pan horizontal (os clones do carrossel estendem o layout) */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ============================================================
   REGISTRO DOS TOKENS DE TAMANHO — NÃO REMOVER
   Os tokens abaixo passaram a ser derivados por calc() a partir do
   --phone-w (autoajuste por altura de tela). O secao-carrossel.js lê
   três deles com parseFloat(getComputedStyle(...).getPropertyValue(...)):
   --card-w, --gap e --zone.
   Custom property NÃO registrada devolve a STRING LITERAL do calc
   ("calc(320px * 0.7375)") no getPropertyValue ⇒ parseFloat vira NaN
   ⇒ step NaN ⇒ o carrossel para de andar. Registrada como <length>, o
   valor computado resolve para px de verdade ("236px"). Medido no
   navegador antes de aplicar.
   ============================================================ */
@property --phone-w       { syntax: '<length>'; inherits: true; initial-value: 320px }
@property --card-w        { syntax: '<length>'; inherits: true; initial-value: 236px }
@property --gap           { syntax: '<length>'; inherits: true; initial-value: 48px }
@property --zone          { syntax: '<length>'; inherits: true; initial-value: 270px }
@property --card-offset-y { syntax: '<length>'; inherits: true; initial-value: 85px }
@property --pop-out       { syntax: '<length>'; inherits: true; initial-value: 170px }
@property --lift-max      { syntax: '<length>'; inherits: true; initial-value: 30px }

.cel-hero {
  /* tokens locais.
     ÚNICO controle de tamanho: --phone-w. Todo o resto deriva dele pelas
     proporções originais (236/320, 48/320, 270/320, 85/320, 170/320,
     30/320) — mexer só aqui reescala a composição inteira.

     Por que min(320px, 34vh): a seção tinha altura fixa de 889px e não
     cabia em notebook (viewport ~730-772px de altura), cortando os cards.
     O único breakpoint era por LARGURA, e notebook é largo e baixo — não
     entrava no mobile e levava o tamanho de desktop inteiro. Agora o
     tamanho responde à ALTURA, sem saltos: monitor alto (≥941px de
     viewport) fica idêntico ao que sempre foi, notebook encolhe o
     necessário. Medido: 1600×1000 → 320px (inalterado) · 1600×772 →
     262px · 1536×730 → 248px · 1366×640 → 218px. */
  --phone-w: min(320px, 34vh);
  --card-w:        calc(var(--phone-w) * 0.7375);
  --gap:           calc(var(--phone-w) * 0.15);
  --zone:          calc(var(--phone-w) * 0.84375);
  --scale-max: .10;
  --lift-max:      calc(var(--phone-w) * 0.09375);
  /* fileira de cards abaixo do centro do celular */
  --card-offset-y: calc(var(--phone-w) * 0.265625);
  /* quanto do celular salta pra fora do retângulo */
  --pop-out:       calc(var(--phone-w) * 0.53125);
  --cc-ink: #002E7F;
  --cc-accent: #005BFF;

  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  /* respiro também cede em tela baixa (64px fixos custavam 128px de altura) */
  padding: clamp(32px, 5.5vh, 64px) 24px;
  text-align: center;
}

.cc-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  /* o teto em vh entra junto com o autoajuste do palco: em tela baixa um
     título de 52px come 56px de altura que fazem falta aos cards */
  font-size: min(clamp(30px, 4.6vw, 52px), 6vh);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--cc-ink);
  max-width: 35ch;
  margin: 0 auto 14px;
}

.cc-title .cc-w {
  display: inline-block;
}

/* destaque oficial da marca: retângulo azul.
   Retângulo + texto branco vivem no ::after (texto duplicado via data-text)
   para a revelação estilo marca-texto varrer as letras de branco junto com
   o fundo. O em base fica na cor do título; o aria-label do h2 evita que
   leitores de tela leiam o texto duplicado. */
.cc-title em {
  position: relative;
  font-style: normal;
  padding: .02em .18em;
}

/* centrado com width:max-content (não inset:0): mesmo texto + mesmo padding
   ⇒ caixa idêntica à do em, alinhada independente de como o navegador
   resolve o containing block de um inline com position:relative.
   line-height 1.4 = ascent+descent da Poppins ⇒ mesma altura da área que o
   background inline pintava (retângulo original ~1.4em; "normal" daria 1.5
   por incluir line gap). */
.cc-title em::after {
  content: attr(data-text);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  line-height: 1.4;
  padding: inherit;
  color: #fff;
  background: var(--cc-accent);
  border-radius: .14em;
  /* --cc-mark = quanto do retângulo já foi "pintado" (0% → 100%).
     Pseudo-elemento não é animável pelo GSAP: o JS anima a variável no
     <em> e o clip-path aqui a consome. Sem clip a 100% ⇒ o border-radius
     do retângulo reaparece inteiro no fim da varredura. */
  clip-path: inset(0 calc(100% - var(--cc-mark, 100%)) 0 0);
}

/* estado inicial (só com JS): retângulo vazio, "Multi" na cor do título.
   Sem JS o default 100% do var() mantém o marca-texto preenchido. */
.js .cc-title em {
  --cc-mark: 0%;
}

/* ============ PALCO ============ */
.cc-stage {
  position: relative;
  height: calc(var(--phone-w) * 974 / 479 + 40px);
}

/* retângulo de fundo: começa abaixo do topo do celular (pop-out).
   Full-bleed horizontal: sai do container de 1240px e cobre a viewport
   inteira (o overflow-x: clip do body corta a sobra do 100vw). */
.cc-stage-bg {
  position: absolute;
  left: calc(50% - 46vw);
  right: calc(50% - 46vw);
  border-radius: 35px;
  top: var(--pop-out);
  bottom: -24px;
  overflow: hidden;
  background: linear-gradient(160deg, #00296B, #001E50 55%, #001233);
  z-index: 0;
}

/* canvas do Grainient: gradiente WebGL animado (substitui a aurora de blobs).
   Fica no fundo do retângulo; o celular (z:1) e os cards (z:2+) passam por cima.
   Se o WebGL2 falhar, o background linear-gradient do .cc-stage-bg aparece. */
.cc-grainient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* ============ CELULAR ============ */
.cc-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: var(--phone-w);
  aspect-ratio: 479 / 974;
  z-index: 1;
  /* base; cards (z ≥ 2) passam por cima */
}

/* sombra de chão (evita bandas retangulares de drop-shadow) */
.cc-phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3%;
  width: 78%;
  height: 9%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 18, 51, .30), transparent 72%);
  filter: blur(14px);
  z-index: -1;
}

.cc-phone .cc-phone-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ============ CARROSSEL ============ */
.cc-track {
  position: absolute;
  /* full-bleed igual ao retângulo: o fade agora é relativo à viewport */
  left: calc(50% - 43vw);
  right: calc(50% - 43vw);
  top: 0;
  bottom: 0;
  z-index: 2;
  /* mask cria stacking context — z-index explícito acima do celular.
     8% / 92% = fade começa rente às bordas do retângulo; aumente o par
     (ex. 12/88) pra um fade mais largo */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}

.cc-card {
  --e: 0;
  /* destaque 0→1, setado via JS */
  --i: 0;
  /* índice na fila, setado via JS */
  position: absolute;
  top: 50%;
  left: calc(var(--i) * (var(--card-w) + var(--gap)));
  width: var(--card-w);
  /* moments card em escala ~51% (original 460×620) */
  aspect-ratio: 460 / 620;
  padding: 7px 7px 0;
  border-radius: 24px;
  overflow: hidden;
  text-align: left;
  /* topo branco meio transparente (deixa o fundo azul da seção atravessar);
     ajuste a opacidade nos dois primeiros stops (.45/.15) */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .45) 0%,
      rgba(255, 255, 255, .15) 38%,
      rgba(20, 48, 110, .6) 52%,
      #0A46C8 66%,
      #0D53EE 76%,
      var(--cc-accent) 100%);
  transform: translate3d(var(--x, 0px), calc(-50% + var(--card-offset-y)), 0) translateY(calc(var(--e) * var(--lift-max) * -1)) scale(calc(1 + var(--e) * var(--scale-max)));
  box-shadow:
    0 10px 24px rgba(0, 46, 127, calc(.06 + var(--e) * .28)),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
  will-change: transform;
}

/* painel de imagem que derrete no gradiente do card */
.cc-card-panel {
  position: relative;
  height: 76%;
  border-radius: 17px;
  background: #EDE8DC; /* placeholder cream enquanto a imagem não existe */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .6) 74%, rgba(0, 0, 0, .18) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .6) 74%, rgba(0, 0, 0, .18) 90%, transparent 100%);
}

.cc-card-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* legenda sobre o gradiente */
.cc-card-caption {
  position: absolute;
  left: 18px;
  right: 12px;
  bottom: 16px;
  color: #fff;
}

.cc-card-caption h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0;
}

.cc-card-caption p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  opacity: .95;
  margin: 2px 0 0;
}

/* destaque do card Personalizado: retângulo da marca invertido
   (fundo branco + texto azul — o azul puro some no gradiente do card) */
.cc-card-caption em {
  font-style: normal;
  color: var(--cc-accent);
  background: #fff;
  padding: .02em .18em;
  border-radius: .30em;
}

/* ============ ENTRADA FASEADA ============
   Título: SplitText (GSAP) revela palavra por palavra e, no fim, o
   marca-texto do "Multi" varre esq→dir — ver secao-carrossel.js.
   Só transform + opacity + clip-path (a entrada BlurText antiga animava
   `filter: blur` em 7 spans, repaint de camada a cada frame, e era uma das
   causas do travamento — não voltar a isso). Depois entra o palco → celular. */

/* ============ LEGENDAS DOS CARDS ============
   Legendas estáticas: sempre nítidas e visíveis. A entrada/saída BlurText
   por palavra foi removida a pedido. O JS ainda divide o texto em .cap-w
   (spans inertes) — ponytail: split mantido só porque embrulha o <em> do
   card "Personalizado"; some junto se o highlight mudar de forma. */
.cc-card-caption .cap-w {
  display: inline-block;
}

.js .cel-hero .cc-stage {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease 450ms, transform .6s cubic-bezier(.23, 1, .32, 1) 450ms;
}

.cel-hero.is-visible .cc-stage {
  opacity: 1;
  transform: none;
}

.js .cel-hero .cc-phone {
  opacity: 0;
  translate: -50% calc(-50% + 48px);
  transition: opacity .5s ease 550ms, translate .7s cubic-bezier(.16, 1, .3, 1) 550ms;
}

.cel-hero.is-visible .cc-phone {
  opacity: 1;
  translate: -50% -50%;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {

  /* marca-texto já preenchido: sem varredura (o JS também sai antes de
     tocar no título) */
  .js .cc-title em {
    --cc-mark: 100%;
  }

  .js .cel-hero .cc-stage,
  .js .cel-hero .cc-stage-bg {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
    filter: none;
    clip-path: none;
  }

  .js .cel-hero .cc-phone {
    opacity: 1;
    translate: -50% -50%;
    transition: none;
  }
}

/* ============ MOBILE ============
   Mantém os 7 tokens em px literais DE PROPÓSITO: as proporções do
   celular são diferentes das do desktop (card 170/240 = .71 contra .7375;
   gap 24/240 = .10 contra .15), então este bloco não pode herdar as
   derivações de cima — precisa sobrescrever todos, inclusive os que
   parecem redundantes. */
@media (max-width: 640px) {
  .cel-hero {
    --phone-w: 240px;
    --card-w: 170px;
    --gap: 24px;
    --zone: 160px;
    --lift-max: 16px;
    --card-offset-y: 55px;
    --pop-out: 110px;
  }
}

/* ============================================================
   AJUSTES DA PÁGINA (valem só nesta cópia, que carrega este CSS)
   ============================================================ */

/* logoloop (logos NutriCard repetidas): fundo branco igual à seção
   do carrossel logo abaixo — sem degrau de cor entre as duas */
.clients-section {
  background-color: #fff;
}


/* emenda contato→footer: a própria seção de contato (branca) termina com
   cantos inferiores arredondados POR CIMA do footer — assim a imagem da
   pessoa continua encostada no fundo da seção, sem aba cobrindo os pés */
.contact-section {
  z-index: 11;
  /* acima do footer (z:10) só na faixa de sobreposição */
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  overflow: hidden;
  /* corta a imagem rente ao fundo arredondado da seção */
}

.site-footer {
  margin-top: -32px;
  /* devolve o respiro que a sobreposição comeu */
  padding-top: 32px;
}

/* emenda hero→carrossel: a seção branca sobe 32px por cima do fim do vídeo
   com os cantos SUPERIORES arredondados, mesmo padrão das outras emendas.
   Duas particularidades desta:
   1. a .cel-hero é um container de 1240px centrado e SEM fundo próprio (o
      branco vem do body), então um border-radius nela não pintaria nada —
      daí o ::before de 100vw, que é quem desenha a aba branca;
   2. o .hero-section tem z-index: 10, então aqui precisa ser MAIOR que 10
      (nas outras emendas um z-index: 2 basta). */
.cel-hero {
  position: relative;
  z-index: 11;
  margin-top: -32px;
  /* devolve o respiro que a sobreposição comeu */
  padding-top: calc(clamp(32px, 5.5vh, 64px) + 32px);
}

.cel-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 32px;
  background: #fff;
  border-radius: 32px 32px 0 0;
  z-index: -1;
  pointer-events: none;
}

/* emenda azul→branco na saída: "Simples para começar..." (branca) sobe
   por cima do fim da seção azul com os cantos SUPERIORES arredondados */
.how-it-works-section {
  position: relative;
  z-index: 2;
  margin-top: -32px;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}

/* emenda branco→azul: a seção BRANCA termina com cantos arredondados
   por cima do azul (o azul fica reto, atrás) — "aba" branca sobre a
   borda superior da seção do RH (.stack-section substituiu a antiga
   .rh-stage-section; z-index baixo pra ficar sob os cards sticky) */
.stack-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: #fff;
  border-radius: 0 0 32px 32px;
  z-index: 1;
  pointer-events: none;
}