/* ==========================================================================
   SKEENS — BLOCKS
   Os 8 blocos da home. Mobile-first: base = empilhado, breakpoint largo
   (min-width: 56em) reintroduz as colunas do mockup.
   ========================================================================== */

.block {
  padding-block: var(--block-padding-y);
  position: relative;
}

/* ---------- Reveal (scroll) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-standard),
              transform var(--dur-slow) var(--ease-standard);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   01 — HERO
   ========================================================================== */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: var(--skns-amarelo);
  color: var(--skns-preto);
  overflow: hidden;
  padding-top: calc(var(--block-padding-y) + 3rem);
}

.hero__grid {
  display: grid;
  gap: var(--space-lg);
  width: 100%;
  align-items: center;
}

.hero__title {
  color: var(--skns-vermelho);
}

.hero__lead {
  margin-top: var(--space-sm);
  font-size: 1.5rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* sem min-height fixo: reservava 22rem mas o grupo de mascotes ocupa 13rem
   no mobile, sobrando espaço morto. O padding-top era pra textura da fita
   (assets/img/fita-morango-macro.webp), que ainda não existe. */
.hero__visual {
  position: relative;
  padding-top: var(--space-sm);
}

.hero__fita {
  position: absolute;
  top: 0;
  left: -6%;
  width: 112%;
  z-index: 1;
}

.hero__mascotes {
  position: relative;
  z-index: 2;
  height: 13rem;
  max-width: 100%;
  margin-inline: auto;
}

.hero__mascote {
  position: absolute;
  bottom: 0;
  height: 88%;
  width: auto;
}

/* leque de personagens andando juntos — Morango na frente (maior/por
   cima), os outros escalonados atrás, igual referência anexada */
.hero__mascote--morango { left: 0%;  bottom: 0%;  height: 100%; z-index: 4; }
.hero__mascote--abacaxi { left: 23%; bottom: 5%;  height: 84%;  z-index: 3; }
.hero__mascote--manga   { left: 58%; bottom: -2%; height: 88%;  z-index: 2; }
.hero__mascote--kiwi    { left: 40%; bottom: 16%; height: 90%;  z-index: 1; }

/* ==========================================================================
   02 — MANIFESTO
   ========================================================================== */
.manifesto {
  background: var(--skns-vermelho);
  color: var(--skns-branco);
}

.manifesto__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.manifesto__title .accent {
  color: var(--skns-amarelo);
}

.manifesto__visual img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   03 — PROVOCAÇÃO
   ========================================================================== */
.provocacao {
  background: var(--skns-creme);
}

.provocacao__split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  text-align: center;
}

.provocacao__stat {
  font-family: var(--font-numeric);
  font-size: clamp(4.5rem, 15vw, 10rem);
  line-height: 0.9;
}

.provocacao__stat span {
  display: block;
  font-family: var(--font-numeric);
  font-size: 0.58em;
  line-height: 0.9;
  margin-top: -0.08em;
  text-transform: uppercase;
}

.provocacao__stat--fruta { color: var(--skns-vermelho); }
.provocacao__stat--firula { color: var(--skns-verde); }

.provocacao__divider {
  width: 4px;
  height: 9rem;
  background: currentColor;
  opacity: 0.2;
}

.provocacao__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  max-width: 13rem;
  text-align: left;
  font-size: 1.6rem;
}

.provocacao__note svg { width: 2.25rem; height: 2.25rem; }

/* ==========================================================================
   04 — SABORES (CMS-ready)
   ========================================================================== */
.sabores {
  background: var(--skns-verde);
  color: var(--skns-branco);
  overflow: hidden;
}

/* padronagem decorativa em marca d'água — puramente ornamental, trocável por asset final */
.sabores::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 26px);
  pointer-events: none;
}

.sabores__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* ---------- sabor-tabs: card grande do sabor ativo + abas + painel ----------
   Mobile: .sabor-preview mostra o card grande; as abas viram uma fileira de
   pills rolável embaixo. Desktop: as abas viram elas mesmas o card grande/
   as tiras estreitas (.sabor-preview some) — ver media query. */
.sabor-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sabor-preview {
  position: relative;
  min-height: 18rem;
  border-radius: var(--radius-card);
  background: var(--sabor-cor);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  overflow: hidden;
}

.sabor-preview img {
  position: absolute;
  left: 50%;
  bottom: 26%;
  transform: translateX(-50%);
  height: 62%;
  width: auto;
}

.sabor-preview__nome {
  position: relative;
  color: var(--skns-branco);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.sabor-tabs__cards {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: var(--space-2xs);
}

.sabor-tab {
  position: relative;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--sabor-cor);
  color: var(--skns-branco);
  cursor: pointer;
  padding: 0.6em 1em;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.sabor-tab[aria-expanded="true"] { opacity: 1; }

.sabor-tab__mascote { display: none; } /* usada só no desktop, ver media query */

.sabor-tab__nome {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.sabor-tab__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--skns-branco);
  color: var(--skns-preto);
  flex-shrink: 0;
}

.sabor-tab__arrow svg { width: 0.9rem; height: 0.9rem; }

.sabor-tabs__panel {
  color: var(--skns-branco);
}

.sabor-tabs__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: 2px solid var(--skns-branco);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.sabor-tabs__panel-head h3 {
  font-family: var(--font-subtitle);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.sabor-tabs__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  background: var(--skns-branco);
  border-radius: var(--radius-card);
  padding: 0.5rem;
}

.sabor-tabs__icon img { width: 100%; height: 100%; }

.sabor-tabs__descricao { max-width: 52ch; }

.sabor-tabs__fatos {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-sm);
  max-width: 52ch;
}

.sabor-tabs__fatos li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}

.sabor-tabs__fatos span {
  font-family: var(--font-subtitle);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
  opacity: 0.85;
  flex-shrink: 0;
  padding-top: 0.2em;
}

.sabor-tabs__fatos strong {
  text-align: right;
  font-weight: 700;
}

.sabor-tabs__fatos em { font-style: normal; opacity: 0.85; }

.sabor-tabs__fuga {
  margin-top: var(--space-lg);
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

.sabores__cta {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ==========================================================================
   05 — TIPOGRAFRUTA
   ========================================================================== */
.tipografruta {
  background: var(--skns-amarelo);
}

.tipografruta__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.tipografruta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.tipografruta__title .vermelho { color: var(--skns-vermelho); }
.tipografruta__title .preto { color: var(--skns-preto); }

.tipografruta__note { font-size: 1.5rem; }

.tipografruta__preview {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.tipografruta__preview img { width: 100%; height: auto; }

/* ==========================================================================
   06 — FRUTÍVOROS
   ========================================================================== */
.frutivoros {
  background: var(--skns-vermelho);
  color: var(--skns-branco);
  overflow: hidden;
}

.frutivoros::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 26px);
  pointer-events: none;
}

.frutivoros__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.frutivoros__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.frutivoros__title .amarelo { color: var(--skns-amarelo); }

/* Mobile: carrossel de cards com swipe — as 3 fotos lado a lado ficavam
   com ~110px cada numa tela de 390px. No desktop volta a ser a fileira
   de 3 (ver media query). */
.frutivoros__photos {
  position: relative;
  display: flex;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* o respiro lateral tem que ser padding do scroller, senão a última
     foto encosta na borda ao chegar no fim */
  scroll-padding-inline: var(--container-pad);
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scrollbar-width: none;
}

.frutivoros__photos::-webkit-scrollbar { display: none; }

.frutivoros__photos li {
  flex: 0 0 76%;
  scroll-snap-align: center;
  background: var(--skns-branco);
  border-radius: var(--radius-card);
  padding: var(--space-xs);
  box-shadow: var(--shadow-card);
}

.frutivoro-card {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.frutivoros__photos img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius-card) - var(--space-xs));
}

/* ==========================================================================
   07 — UNIVERSO
   ========================================================================== */
.universo {
  background: var(--skns-creme);
}

.universo__note { font-size: 1.45rem; }

.universo__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.universo__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.universo__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.universo__mosaic .card {
  overflow: hidden;
  position: relative;
  min-height: 9rem;
}

.universo__mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.universo__card-label {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
}

.universo__card-cta {
  background: var(--skns-vermelho);
  color: var(--skns-branco);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 9rem;
}

.universo__card-cta--verde { background: var(--skns-verde); }

/* ==========================================================================
   08 — FOOTER
   ========================================================================== */
.footer {
  background: var(--skns-preto);
  color: var(--skns-creme);
}

.footer__top {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* align-self impede que o flex estique o <img> até a largura da coluna —
   o SVG se centralizaria dentro da caixa e o logo sairia desalinhado
   do texto abaixo */
.footer__brand img { height: 4rem; width: auto; align-self: flex-start; }

.footer__tagline { max-width: 22ch; font-size: 0.9rem; }

.footer__follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.footer__note {
  font-size: 1.6rem;
  color: var(--skns-amarelo);
}

/* ==========================================================================
   DESKTOP (min-width: 56em) — reintroduz as colunas do mockup
   ========================================================================== */
@media (min-width: 56em) {
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
  }

  .hero__mascotes {
    height: 26rem;
    max-width: 34rem;
  }

  .manifesto__grid,
  .tipografruta__grid,
  .frutivoros__grid,
  .universo__grid {
    grid-template-columns: 1fr 1fr;
  }

  .frutivoros__grid { grid-template-columns: 0.8fr 1.2fr; }
  .universo__grid { grid-template-columns: 0.9fr 1.1fr; }

  /* Desktop: leque sobreposto, mesmo princípio dos sabores — as 3 fotos
     ocupam 74% cada e ficam escalonadas a 13%, então a da frente aparece
     grande e as outras viram tiras. Sem texto: só a foto.
     O 1º card fica no fluxo pra ditar a altura do container; os demais
     são absolutos por cima. 74 + 26 = 100%, então nada vaza. */
  .frutivoros__photos {
    display: block;
    position: relative;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .frutivoros__photos li {
    width: 74%;
    transition: transform var(--dur-base) var(--ease-standard);
    /* sombra puxada pra esquerda: as 3 fotos têm o mesmo fundo amarelo, e
       sem isso as tiras de trás viram uma faixa só */
    box-shadow: -12px 0 22px rgba(10, 10, 10, 0.3);
  }

  /* top acompanha o padding-block do container: "top: 0" ancoraria na borda
     do padding e deixaria estes dois 40px acima do card do fluxo */
  .frutivoros__photos li:nth-child(1) { position: relative; left: 0; }
  .frutivoros__photos li:nth-child(2) { position: absolute; top: var(--space-lg); left: 13%; }
  .frutivoros__photos li:nth-child(3) { position: absolute; top: var(--space-lg); left: 26%; }

  .frutivoros__photos li:has(.frutivoro-card[aria-pressed="false"]:hover) {
    transform: translateY(-6px);
  }

  .universo__mosaic { grid-template-columns: 1.3fr 1fr 1fr; }
  .universo__card-big { grid-row: span 2; }

  .footer__top {
    grid-template-columns: 1fr 1.4fr 1fr;
  }

  /* sabor-tabs: no desktop o card de preview do mobile some — as próprias
     abas viram o card grande / as tiras estreitas com texto vertical.
     Medido a partir do arquivo de referência (assets/svgs/ref 1/2 layout
     sabores.svg): os 4 cards têm o MESMO tamanho e ficam em 4 posições
     ("slots") fixas, sempre nessa ordem — o que muda ao clicar é só qual
     fica por cima (z-index), não a posição de nenhum deles. */
  .sabor-preview { display: none; }

  .sabor-tabs { flex-direction: row; align-items: stretch; }

  .sabor-tabs__cards {
    position: relative;
    flex: 1.15;
    height: 26rem;
  }

  .sabor-tab {
    position: absolute;
    top: 0;
    height: 100%;
    width: 59.5%;
    border-radius: var(--radius-card);
    padding: var(--space-md);
    opacity: 1;
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
  }

  /* slots fixos — mesma ordem sempre (Morango, Manga, Kiwi, Abacaxi).
     z-index é calculado e aplicado via JS (main.js), não fica fixo aqui,
     porque a camada certa depende de QUAL está ativo (ver comentário lá). */
  .sabor-tab:nth-child(1) { left: 0%; }
  .sabor-tab:nth-child(2) { left: 13.8%; }
  .sabor-tab:nth-child(3) { left: 27.1%; }
  .sabor-tab:nth-child(4) { left: 40.6%; }

  .sabor-tab__nome { font-size: 1.7rem; }
  .sabor-tab__arrow { width: 3rem; height: 3rem; }
  .sabor-tab__arrow svg { width: 1.6rem; height: 1.6rem; }

  .sabor-tab[aria-expanded="true"] {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--space-sm);
  }

  .sabor-tab[aria-expanded="true"] .sabor-tab__mascote {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 28%;
    transform: translateX(-50%);
    height: 62%;
  }

  /* seta + nome: tirados do fluxo e centralizados no pedacinho visível da
     tira (que é sempre ~11.6% da largura do card, medido a partir da
     borda direita) — por isso o calc() soma/subtrai metade do próprio
     tamanho de cada um, pra centralizar de verdade em vez de só encostar
     na borda. */
  .sabor-tab[aria-expanded="false"] .sabor-tab__arrow {
    position: absolute;
    top: 1.2rem;
    right: calc(11.6% - 1.5rem);
  }

  /* card à ESQUERDA do ativo: o pedacinho visível é na borda ESQUERDA
     dele (quem cobre é o vizinho da direita) — sem isso o nome/seta ficam
     escondidos embaixo do próprio card ativo */
  .sabor-tab[data-side="left"] .sabor-tab__arrow {
    right: auto;
    left: calc(11.6% - 1.5rem);
  }

  .sabor-tab[aria-expanded="false"] .sabor-tab__nome {
    position: absolute;
    bottom: 1rem;
    right: calc(11.6% - 0.85rem);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
  }

  .sabor-tab[data-side="left"] .sabor-tab__nome {
    right: auto;
    left: calc(11.6% - 0.85rem);
  }

  /* trava a altura do painel igual à dos cards (26rem) e deixa a
     ilustração ocupar o espaço que sobrar (flex:1) — assim ela sempre
     termina exatamente na mesma altura dos cards, não importa se o
     texto daquele sabor é mais curto ou mais longo */
  .sabor-tabs__cards { overflow-x: visible; }
  .sabor-tabs__panel { flex: 1; height: 26rem; overflow: hidden; display: flex; flex-direction: column; }
  .sabor-tabs__fuga {
    flex: 1;
    min-height: 0;
    height: auto;
    margin-top: var(--space-sm);
    /* cover (não contain): a ilustração sempre ocupa a largura toda,
       cortando o topo (céu vazio) se precisar em vez de encolher */
    object-fit: cover;
    object-position: center bottom;
  }
}

/* ==========================================================================
   MOBILE (< 56em) — conteúdo centralizado
   No desktop os blocos são de duas colunas e o texto alinhado à esquerda
   faz sentido; empilhado numa tela estreita ele fica todo encostado numa
   borda só. Aqui centraliza tudo.
   ========================================================================== */
@media (max-width: 55.999em) {
  .hero__content,
  .manifesto__grid,
  .tipografruta__content,
  .frutivoros__content,
  .universo__content,
  .footer__brand,
  .footer-newsletter,
  .footer-cols > div,
  .footer-bottom {
    text-align: center;
  }

  /* nos flex-column o text-align centraliza o texto, mas botões e pills
     continuariam colados à esquerda — quem resolve isso é o align-items */
  .tipografruta__content,
  .frutivoros__content,
  .universo__content,
  .footer__brand,
  .footer-newsletter,
  .footer-cols ul {
    align-items: center;
  }

  /* o logo do rodapé tem align-self: flex-start pro desktop */
  .footer__brand img { align-self: center; }

  .hero__ctas,
  .footer-newsletter__form,
  .footer-bottom {
    justify-content: center;
  }

  /* p carrega max-width (60ch no base, 22ch/13rem em alguns blocos): sem
     margem automática o bloco encosta na esquerda e o texto centralizado
     dentro dele não fica no meio da tela */
  .hero__content p,
  .manifesto__grid p,
  .tipografruta__content p,
  .frutivoros__content p,
  .universo__content p,
  .footer__tagline,
  .provocacao__note {
    margin-inline: auto;
  }

  .provocacao__note { text-align: center; }

  /* cards de CTA do Universo: o conteúdo é um flex-column próprio */
  .universo__card-cta {
    align-items: center;
    text-align: center;
  }

  /* painel de sabor: título e descrição acompanham. A lista de fatos fica
     de fora — são pares rótulo/valor, e centralizar quebra a leitura. */
  .sabor-tabs__panel-head { justify-content: center; }

  .sabor-tabs__descricao {
    text-align: center;
    margin-inline: auto;
  }
}