/* ---------- Tokens (extraídos das variáveis do Figma) ---------- */
:root {
  --color-bg: #3e3e76;
  --color-pink: #ff7497;
  --color-teal: #46bdb9;
  --color-yellow: #ffbc23;
  --color-cream: #f2e2d3;
  --color-cream-text: #3e3e76;
  --color-flipbook-bg: #2c2c60;
  --color-footer-bar: #2d2d2d;
  --color-neutral-light: #858484;
  --color-white: #ffffff;
  /* Estados de hover, conforme o node "Style Guide" (6109:3925) do Figma */
  --color-pink-hover: #ff996f;

  --font-family-primary: 'Poppins', sans-serif;
  /* Não há token de fonte de display: o headline manuscrito ("Para as
     famílias...") usa a fonte real "Honey Burst" do Figma, mas como
     imagem (assets/img/hero-headline-*.webp, exportada do próprio node),
     não como texto — a fonte em si não está disponível como webfont
     livre/hospedável, então nunca é carregada no CSS. */

  --font-size-xxxs: 12px;
  --font-size-xxs: 14px;
  --font-size-xs: 16px;
  --font-size-sm: 18px;
  --font-size-md: 20px;

  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;
  --spacing-xxxl: 48px;

  --radius-small: 4px;
  --radius-huge: 24px;
  --radius-pill: 1000px;

  --container-max: 1366px;
  /* Em 390px o Figma usa ~17–19px de margem lateral; 5vw ≈ 19.5px nesse
     breakpoint (6vw ficava ~23px e estreita demais o card de créditos). */
  --container-pad: clamp(16px, 5vw, 125px);

  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  /* Easing mais suave pra hovers (botões e links) — 0.15s/ease linear
     ficava com uma sensação de "corte" seco; 0.25s + curva out
     desacelera no final, lê como mais macio. */
  --ease-hover: cubic-bezier(0.33, 1, 0.68, 1);
  --transition-hover: 0.25s var(--ease-hover);
}

/* ---------- Reset básico ---------- */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 3px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--color-white);
  color: var(--color-bg);
  padding: 12px 20px;
  border-radius: var(--radius-small);
  font-weight: 600;
  z-index: 100;
  transition: top 0.2s var(--ease-reveal);
}
.skip-link:focus {
  top: 16px;
}

/* ---------- Container ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Faixa decorativa do topo ---------- */
.decorative-strip {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.decorative-strip__img { width: 100%; height: auto; }
/* Os SVGs de origem têm `width="100%" height="100%" preserveAspectRatio="none"`
   no próprio arquivo — sem uma proporção intrínseca confiável pro navegador
   derivar do viewBox, `height:auto` não tinha uma razão certa pra calcular
   e o conteúdo esticava pra preencher a caixa errada (distorção visível).
   Forçar `aspect-ratio` aqui (a mesma do viewBox de cada arquivo) resolve
   sem precisar tocar nos SVGs. */
.decorative-strip__img--mobile { aspect-ratio: 390 / 35; }
.decorative-strip__img--desktop { aspect-ratio: 1366 / 62; display: none; }
@media (min-width: 960px) {
  .decorative-strip__img--mobile { display: none; }
  .decorative-strip__img--desktop { display: block; }
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: var(--color-pink);
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-family-primary);
  font-weight: 500;
  font-size: var(--font-size-xs);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-xl);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color var(--transition-hover), transform var(--transition-hover);
}
/* Cor de hover exata do node "Style Guide" (button-primary / mouse-hover),
   não é um brightness() genérico: o rosa vira laranja (#ff996f). */
.btn:hover { background: var(--color-pink-hover); }
.btn:active { transform: scale(0.98); }
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-teal);
  flex-shrink: 0;
}
.btn--center { align-self: center; }

.cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}
@media (min-width: 640px) {
  .cta-group { flex-direction: row; width: auto; }
}
.cta-group .btn { width: 100%; }
@media (min-width: 640px) {
  .cta-group .btn { width: auto; }
}

/* ---------- Hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xl);
  /* padding-top ~36px no Figma mobile (6081:1485→6081:1507); o token mais
     próximo já era --spacing-xxl (40px), mantido. Sem padding-bottom: os
     CTAs moram em .content e o gap hero→CTAs vem do padding-top do
     content (= --spacing-xl, igual ao gap interno do hero no Figma). */
  padding-block: var(--spacing-xxl) 0;
}
.hero__art { margin: 0; }
.hero__art img {
  /* Unidade `vw` de propósito, não `%`: `.hero__art` é item flex sem
     flex-grow (shrink-to-fit), então uma largura em `%` num descendente
     não tem um bloco de contenção definido para resolver contra — o
     navegador ignora a regra e cai no tamanho intrínseco do atributo
     width/height do HTML (336px), ignorando esta declaração por completo.
     `vw` resolve contra a viewport, não contra o container, então não
     sofre essa ambiguidade. Extremos calibrados para bater com o Figma:
     ~336px no frame mobile (390px), ~404px no frame desktop (1366px).
     aspect-ratio explícito pelo mesmo motivo do `.decorative-strip__img`
     (ver comentário lá): os SVGs de origem têm width/height="100%" +
     preserveAspectRatio="none", sem razão intrínseca confiável pro
     height:auto calcular sozinho. */
  width: clamp(260px, 7vw + 309px, 404px);
  height: auto;
  aspect-ratio: 336.012 / 219.729;
  transform: rotate(-2deg);
}
.hero__headline {
  /* Texto renderizado como imagem (assets/img/hero-headline-*.webp),
     exportada direto do node do Figma na fonte real "Honey Burst" — evita
     por completo o problema de fonte substituta ("Permanent Marker" é mais
     larga por caractere, quebrava em mais linhas que o Figma). Mesma nota
     de unidade `vw` do `.hero__art img`: o item flex real aqui é o
     <picture> sem classe, então `%` num descendente não resolveria.
     Calibrado para ~347px em 390px de viewport (mobile) e ~562px em
     1366px (desktop), batendo com o tamanho intrínseco de cada arquivo.
     aspect-ratio + height:auto explícitos: sem isso, a altura ficava
     travada no atributo HTML height="176" (proporção do arquivo mobile)
     mesmo quando o arquivo desktop (proporção diferente) estava sendo
     exibido via <picture>, distorcendo a imagem no desktop. */
  width: clamp(240px, 22vw + 261px, 562px);
  height: auto;
  aspect-ratio: 700 / 355;
  transform: rotate(-4deg);
}
@media (min-width: 960px) {
  .hero__headline { aspect-ratio: 1100 / 575; }
}
@media (min-width: 960px) {
  .hero {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: var(--spacing-lg);
    /* ~52px no Figma desktop (6021:214→6027:651→6021:188); --spacing-xxl
       (40px) ficava 12px curto, --spacing-xxxl (48px) é o token mais
       próximo disponível. */
    padding-top: var(--spacing-xxxl);
  }
  .hero__art img { transform: none; }
}

/* ---------- Conteúdo: parágrafos + CTA + mockup do livro ---------- */
.content {
  display: flex;
  flex-direction: column;
  /* Mobile Figma (6081:1776): gap lg (24) entre texto, livro e blocos. */
  gap: var(--spacing-lg);
  padding-block: var(--spacing-xl) 0;
}
.content__text-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.content__paragraphs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  /* Mobile Figma (6081:1778): font-size-xs (16px); sm (18) só no desktop. */
  font-size: var(--font-size-xs);
}
.content__book-col { display: flex; justify-content: center; }
.book-visual {
  /* Antes: engrenagem teal (SVG) + foto do livro como duas camadas
     posicionadas via CSS. Trocado pela composição já pronta do Figma
     (assets/img/guia-img.webp, node "guia-img" da seção de assets
     internos) — uma imagem só, no enquadramento exato do design. */
  width: 100%;
  max-width: 480px;
  height: auto;
  /* Rotação sutil no scroll (ver js/main.js); will-change + backface
     mantêm a camada no compositor (evita flicker no Safari mobile). Os
     dois prefixos (com e sem -webkit-) são o mesmo fix do projeto
     mcsv-mpi2026-lp — Safari/iOS mais antigo só reconhece o prefixado. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
@media (min-width: 960px) {
  .content {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xl);
    padding-block: var(--spacing-xxxl);
  }
  .content__text-col {
    flex: 1 1 0;
    /* CTA aparece antes do texto no mobile, mas depois no desktop —
       reordenado via flex `order` (mesmo grupo, sem duplicar elementos). */
  }
  .content__paragraphs { order: 1; font-size: var(--font-size-sm); }
  .cta-group { order: 2; }
  .content__book-col { flex: 1 1 0; }
  .book-visual { max-width: 611px; }
}

/* ---------- Leia o guia online (flipbook) ---------- */
.flipbook {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Mobile Figma (6087:2026): gap md (16) título→painel; o gap lg (24)
     até o botão PDF vem do gap do frame pai (6081:1776). */
  gap: var(--spacing-md);
  padding-block: var(--spacing-lg);
  text-align: center;
}
.flipbook h2 {
  font-size: var(--font-size-md);
  font-weight: 500;
  width: 100%;
  /* Mobile Figma: text-center; desktop alinha à esquerda. */
  text-align: center;
}
.flipbook__panel {
  /* Fundo #2c2c60 opaco, sem raio de borda nem sombra — pedido explícito,
     mesmo o projeto de referência (mcsv-mpi2026-lp) usando border-radius
     ali. Altura reservada no painel (aspect-ratio), como no mpi2026. */
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-flipbook-bg);
  /*
    Altura final reservada no painel (sem depender do iframe).
    --fb-panel-ratio é single (1/1.113) ou spread (2/1.19), sincronizado no JS
    e reforçado por media query abaixo.
  */
  aspect-ratio: var(--fb-panel-ratio, 1 / 1.113);
}

/* Viewport ≥ ~732px ≈ painel ≥ 700px (container com padding lateral). */
@media (min-width: 732px) {
  .flipbook__panel {
    --fb-panel-ratio: 2 / 1.19;
  }
}

@media (max-width: 731px) {
  .flipbook__panel {
    --fb-panel-ratio: 1 / 1.113;
  }
}

.flipbook__loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--color-flipbook-bg);
  color: var(--color-white);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.flipbook__panel.is-loading .flipbook__loader {
  opacity: 1;
  visibility: visible;
}
.flipbook__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--color-yellow);
  animation: flipbook-spin 0.85s linear infinite;
}
@keyframes flipbook-spin {
  to { transform: rotate(360deg); }
}
.flipbook__embed {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.flipbook__panel.is-ready .flipbook__embed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .flipbook__spinner { animation: none; }
}
@media (min-width: 960px) {
  .flipbook {
    gap: var(--spacing-lg);
    padding-block: var(--spacing-xl);
  }
  .flipbook h2 { text-align: left; }
}

/* ---------- Créditos ---------- */
.credits {
  /* Blob amarelo + laço laranja "sangram" por trás do card.
     No mobile a decoração (390×237) define a altura do bloco; o card
     sobrepõe absolute na base (com 42px de folga, como no Figma 6087:2009
     + 6081:1824) e pode sobrar para cima sobre o fundo roxo — assim o
     fundo mantém a proporção certa e acompanha o bloco, sem cover que
     cortava as laterais do blob. */
  position: relative;
  overflow: visible;
  display: block;
  /* Reserva o trecho em que o card sobra acima da decoração
     (Figma: card 267px + 42px de folga − faixa 237px ≈ 72px). */
  padding-top: 72px;
}
@media (min-width: 960px) {
  .credits {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    /* Desktop: card cabe centrado dentro da faixa (1366×301). */
    aspect-ratio: 1366 / 301;
  }
}
.credits__decorative {
  /* Composição já pronta do Figma (assets/img/credits-decorative-*.webp,
     node "footer-img-desktop/mobile" da seção de assets internos). */
  position: relative;
  display: block;
  z-index: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 237;
  pointer-events: none;
}
@media (min-width: 960px) {
  .credits__decorative {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }
}
.credits__inner {
  /* Fica separado de .credits__card de propósito: .container define
     max-width/padding-inline/margin, e .credits__card define padding
     (todos os lados, para o texto por dentro) — combinar as duas classes
     no mesmo elemento fazia o `padding` (shorthand) do card sobrescrever
     o `padding-inline` do container, e o card acabava ocupando a viewport
     inteira (sem nenhuma margem lateral) em vez da largura do container. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42px;
  z-index: 1;
  width: 100%;
}
@media (min-width: 960px) {
  .credits__inner {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
  }
}
.credits__card {
  background: var(--color-cream);
  color: var(--color-cream-text);
  border-radius: var(--radius-huge);
  /* Mobile Figma (6087:2009): padding xl (32) — altura vem do texto,
     sem aspect-ratio (ele inflava o box e criava folga interna extra). */
  padding: var(--spacing-xl);
  text-align: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
}
.credits__card a {
  color: var(--color-teal);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-hover);
}
.credits__card a:hover { color: #1a6b73; text-decoration: underline; }
@media (min-width: 960px) {
  .credits__card {
    padding: var(--spacing-xl) var(--spacing-xxl);
    /* Rotação medida direto na referência (figma/telas/Desktop.png): ~2°,
       só no desktop — no mobile o card fica reto. */
    transform: rotate(2deg);
  }
}

/* ---------- Nelson, o Nenê ---------- */
.nelson { background: var(--color-teal); overflow: hidden; }
.nelson__inner {
  display: flex;
  flex-direction: column;
  /* Mobile Figma (6081:1842): conteúdo com pt-48 / pb-16, arte colada na
     base da seção (sem padding-bottom no wrapper). */
  gap: 0;
  padding-block: 0;
}
.nelson__art {
  /* Antes: engrenagem rosa + rabisco branco (SVGs) + foto do personagem
     como três camadas posicionadas via insets percentuais — o PNG do
     personagem baixado era o canvas bruto de exportação (2000x2000, com
     margem transparente enorme), diferente do recorte real do Figma, o
     que fazia o personagem renderizar pequeno/"achatado" dentro do
     quadro. Trocado pela composição já pronta do Figma
     (assets/img/nelson-art.webp, node "img-nelson" da seção de assets
     internos) — engrenagem + personagem juntos numa imagem só, no
     enquadramento exato do design. */
  order: 2;
  /* Full-bleed: no Figma a arte tem 394px num frame de 390 e cola na
     base; o .container do inner não pode insetar a imagem. */
  width: 100vw;
  max-width: none;
  height: auto;
  margin-inline: calc(50% - 50vw);
  display: block;
  /* Parallax horizontal no scroll (ver js/main.js) — eixo X, não Y, porque
     o personagem está "de pé" (ancorado visualmente no chão do quadro);
     parallax vertical abriria um vão entre os pés e a base. will-change
     + backface mantêm a animação no compositor sem flicker no iOS. */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.nelson__content {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
  text-align: center;
  padding-top: var(--spacing-xxxl);
  padding-bottom: var(--spacing-md);
}
.nelson__logo img { width: 190px; height: auto; aspect-ratio: 190 / 80; }
@media (min-width: 960px) {
  .nelson__inner {
    flex-direction: row;
    align-items: stretch;
    text-align: left;
    /* Desktop (6081:1426): arte 547×425 cola no topo e na base da seção. */
    min-height: 425px;
  }
  .nelson__art {
    order: 1;
    width: auto;
    max-width: 547px;
    flex: 1 1 0;
    margin-inline: 0;
    align-self: flex-end;
    object-fit: contain;
    object-position: left bottom;
  }
  .nelson__content {
    order: 2;
    flex: 1 1 0;
    align-items: flex-start;
    text-align: left;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .nelson__content .btn { align-self: flex-start; }
}

/* ---------- Rodapé ---------- */
.site-footer { background: var(--color-bg); padding-top: var(--spacing-xxl); }
.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Mobile Figma (6081:1897): gap xxl (40) entre logo e links. */
  gap: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
  text-align: center;
}
.site-footer__logo { width: 190px; height: auto; aspect-ratio: 190 / 81; }
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-xxs);
  font-weight: 500;
}
.site-footer__links a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: color var(--transition-hover);
}
/* Estado de hover exato do node "Style Guide" (footer-item / mouse-hover):
   texto vira amarelo e ganha sublinhado, não é só um underline genérico. */
.site-footer__links a:hover {
  color: var(--color-yellow);
  text-decoration: underline;
}
.site-footer__bottom { background: var(--color-footer-bar); padding-block: var(--spacing-lg); }
.site-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  text-align: center;
}
.site-footer__bottom-inner p {
  font-size: var(--font-size-xxxs);
  font-weight: 400;
}
@media (min-width: 960px) {
  .site-footer__top { flex-direction: row; justify-content: space-between; text-align: left; }
  .site-footer__links { flex-direction: row; gap: var(--spacing-xl); }
  .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------- Scroll-reveal (sempre visível sem JS) ---------- */
[data-reveal] { opacity: 1; transform: none; }
.reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 0.8s var(--ease-reveal), transform 0.8s var(--ease-reveal);
}
.reveal-armed [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .btn,
  [data-reveal] {
    transition: none !important;
  }
}