/* =============================================================================
   ZARINNA — seções da home
   -----------------------------------------------------------------------------
   As 16 seções do briefing, na ordem. Composição assimétrica, fotografia grande,
   muito espaço negativo, texto sempre sobre superfície sólida.
   Depende de tokens.css, base.css e componentes.css.
   ========================================================================== */

/* ── 03 · HERO ────────────────────────────────────────────────────────────── */
.z-hero {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--z-bg);
  border-bottom: var(--z-hairline);
}
@media (min-width: 900px) {
  .z-hero {
    grid-template-columns: 46fr 54fr;
    min-height: min(88vh, 54rem);
  }
}

.z-hero__midia {
  position: relative;
  order: -1;
  overflow: hidden;
  background-color: var(--z-bg-sunken);
  aspect-ratio: 3 / 4;
}
@media (min-width: 900px) {
  .z-hero__midia { order: 0; aspect-ratio: auto; height: 100%; }
}
.z-hero__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* A escala dá folga para o parallax (--z-py, publicado pelo JS) sem abrir
     borda na moldura. */
  transform: translate3d(0, var(--z-py, 0px), 0) scale(1.1);
  will-change: transform;
}

/* Véu suave só para ancorar a citação — nunca sobre texto laranja */
.z-hero__midia::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, var(--z-orange-deep-α45), var(--z-orange-deep-α00));
}

/* Crédito sobre a foto. Amarelo sólido, sem transparência: é o único texto do
   site que não fica sobre uma cor plana, então não há folga de contraste. */
.z-hero__credito {
  position: absolute;
  left: var(--z-sp-5);
  bottom: var(--z-sp-5);
  z-index: 1;
  color: var(--z-yellow);
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
}

.z-hero__painel {
  display: grid;
  align-content: center;
  gap: var(--z-sp-5);
  padding: var(--z-section-y) var(--z-gutter);
  justify-items: start;
}
@media (min-width: 900px) {
  .z-hero__painel { padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 4.5rem); }
}

.z-hero__titulo {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-mega);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: var(--z-ls-mega);
  color: var(--z-text-display);
  text-transform: none;
  max-width: 14ch;
}
.z-hero__sub {
  font-family: var(--z-font-script);
  font-size: var(--z-fs-script);
  color: var(--z-text-display);
  max-width: 30ch;
}
.z-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-sp-3) var(--z-sp-5);
  padding-top: var(--z-sp-4);
  border-top: var(--z-hairline);
  width: 100%;
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text-muted);
}

/* ── 04 · CATEGORIAS ──────────────────────────────────────────────────────── */
.z-categorias { background-color: var(--z-bg); }

/* ── 05 · EDITORIAL ASSIMÉTRICO ───────────────────────────────────────────── */
.z-editorial {
  background-color: var(--z-bg);
  overflow: hidden;
}
/* Duas colunas reais no desktop: o bloco de texto (à esquerda) e a fotografia
   (à direita). Cada coluna cuida da própria altura — sem vão acidental. */
.z-editorial__grade {
  display: grid;
  gap: var(--z-sp-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .z-editorial__grade {
    grid-template-columns: 5fr 6fr;
    gap: var(--z-sp-8);
  }
}

/* Empilha eyebrow, título, texto e citação como um único bloco editorial. */
.z-editorial__bloco {
  display: grid;
  gap: var(--z-sp-5);
  align-content: start;
  order: 2;
}

.z-editorial__titulo {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h1);
  line-height: 0.98;
  letter-spacing: var(--z-ls-mega);
  color: var(--z-text-display);
  max-width: 16ch;
}

.z-editorial__texto {
  font-size: var(--z-fs-body-lg);
  color: var(--z-text);
  max-width: 44ch;
}

.z-editorial__midia {
  position: relative;
  overflow: hidden;
  background-color: var(--z-bg-sunken);
  aspect-ratio: 4 / 5;
  order: 1;
}
@media (min-width: 900px) {
  .z-editorial__midia { order: 0; }
}
.z-editorial__midia img { width: 100%; height: 100%; object-fit: cover; }

/* Citação manuscrita, em painel amarelo sólido dentro do bloco de texto */
.z-editorial__citacao {
  position: relative;
  background-color: var(--z-yellow-soft);
  border: var(--z-hairline);
  padding: var(--z-sp-5) var(--z-sp-6);
}
.z-editorial__citacao p {
  font-family: var(--z-font-script);
  font-size: var(--z-fs-script);
  color: var(--z-text-display);
  max-width: 26ch;
}
.z-editorial__citacao cite {
  display: block;
  margin-top: var(--z-sp-3);
  font-family: var(--z-font-body);
  font-style: normal;
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text-muted);
}

/* ── 06 · VITRINE / COLEÇÃO ───────────────────────────────────────────────── */
.z-colecao { background-color: var(--z-bg-sunken); }
.z-colecao .z-sec-head { margin-bottom: var(--z-sp-8); }
.z-colecao__pe {
  margin-top: var(--z-sp-8);
  display: flex;
  justify-content: center;
}

/* ── 07 · ARTESANAL ───────────────────────────────────────────────────────── */
/* As cores de texto sobre o bloco laranja vêm de `.z-block` (base.css) —
   a seção carrega as duas classes no markup, sem duplicar regra. */
.z-artesanal .z-sec-head { margin-bottom: var(--z-sp-8); }

.z-artesanal__grade {
  display: grid;
  gap: var(--z-sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.z-artesanal__item {
  position: relative;
  overflow: hidden;
  background-color: var(--z-yellow-α12);
  aspect-ratio: 1 / 1;
}
/* Mosaico editorial deliberado: um bloco grande à esquerda, dois médios
   empilhados à direita e uma faixa de três pequenos embaixo. */
@media (min-width: 900px) {
  .z-artesanal__grade {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(10rem, 19vw, 19rem);
    gap: var(--z-sp-5);
  }
  .z-artesanal__item { aspect-ratio: auto; }
  .z-artesanal__item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .z-artesanal__item:nth-child(2),
  .z-artesanal__item:nth-child(3) { grid-column: span 3; }
  .z-artesanal__item:nth-child(n + 4) { grid-column: span 2; }
}

.z-artesanal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--z-dur-reveal) var(--z-ease-out);
}
.z-artesanal__item:hover img { transform: scale(1.04); }

/* Legenda em faixa sólida: cobre o texto que já vem impresso na foto e
   garante contraste real (amarelo sobre o tom profundo do laranja). */
.z-artesanal__legenda {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--z-sp-4);
  background-color: var(--z-orange-deep);
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h4);
  line-height: 1.2;
  color: var(--z-yellow);
}
.z-artesanal__preco {
  display: block;
  margin-top: var(--z-sp-1);
  font-family: var(--z-font-body);
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-yellow);
  opacity: 0.9;
}

/* ── 08 · GALERIA ASSIMÉTRICA ─────────────────────────────────────────────── */
/* Cada faixa é uma grelha própria: dentro da faixa todas as fotos têm a MESMA
   proporção, então alinham à perfeição e não sobra vão. De faixa para faixa a
   proporção muda — é daí que vem a assimetria editorial. */
.z-galeria { background-color: var(--z-bg); overflow: hidden; }
.z-galeria__grade {
  display: grid;
  gap: var(--z-sp-4);
}
.z-galeria__banda {
  display: grid;
  gap: var(--z-sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.z-galeria__item {
  position: relative;
  overflow: hidden;
  background-color: var(--z-bg-sunken);
  aspect-ratio: 4 / 5;
}
/* Faixa com número ímpar de fotos: a última ocupa a largura toda, em paisagem. */
.z-galeria__banda > .z-galeria__item:last-child:nth-child(odd) {
  grid-column: span 2;
  aspect-ratio: 3 / 2;
}
.z-galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--z-dur-slow) var(--z-ease-out);
}
.z-galeria__item:hover img { transform: scale(1.03); }

@media (min-width: 900px) {
  .z-galeria__banda { grid-template-columns: repeat(12, 1fr); gap: var(--z-sp-4); }
  .z-galeria__banda:nth-child(1) .z-galeria__item { grid-column: span 6; aspect-ratio: 6 / 7; }
  .z-galeria__banda:nth-child(2) .z-galeria__item { grid-column: span 4; aspect-ratio: 4 / 5; }
  .z-galeria__banda:nth-child(3) .z-galeria__item { grid-column: span 4; aspect-ratio: 1 / 1; }
  .z-galeria__banda > .z-galeria__item:last-child:nth-child(odd) { grid-column: auto; aspect-ratio: auto; }
}

/* ── 09 · BANNER DE CONVERSÃO ─────────────────────────────────────────────── */
.z-conversao {
  position: relative;
  background-color: var(--z-block);
  color: var(--z-text-on-block);
  text-align: center;
  padding-block: clamp(5rem, 13vw, 11rem);
  overflow: hidden;
}
.z-conversao__ornamento {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.14;
}
.z-conversao__ornamento img {
  width: min(78vw, 34rem);
  height: auto;
  opacity: 0.9;
}
.z-conversao__corpo {
  position: relative;
  display: grid;
  gap: var(--z-sp-6);
  justify-items: center;
}
.z-conversao__titulo {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h1);
  line-height: 0.98;
  letter-spacing: var(--z-ls-mega);
  color: var(--z-yellow);
  max-width: 18ch;
}
.z-conversao__sub {
  color: var(--z-yellow);
  max-width: 40ch;
  font-size: var(--z-fs-body-lg);
}

/* ── 10 · DEPOIMENTOS (oculto enquanto vazio) ─────────────────────────────── */
.z-depoimentos { background-color: var(--z-bg-sunken); }
.z-depoimentos__grade {
  display: grid;
  gap: var(--z-sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .z-depoimentos__grade { grid-template-columns: repeat(3, 1fr); }
}
.z-depoimento {
  display: grid;
  gap: var(--z-sp-4);
  align-content: start;
  padding: var(--z-sp-6);
  background-color: var(--z-yellow-soft);
  border: var(--z-hairline);
}
.z-depoimento__texto {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h4);
  line-height: 1.5;
  color: var(--z-text-display);
}
.z-depoimento__autor {
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text-muted);
}

/* ── 11 · NOSSA HISTÓRIA ──────────────────────────────────────────────────── */
.z-historia { background-color: var(--z-bg); }
.z-historia__grade {
  display: grid;
  gap: var(--z-sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .z-historia__grade { grid-template-columns: 5fr 6fr; gap: var(--z-sp-9); }
}
.z-historia__midia {
  position: relative;
  overflow: hidden;
  background-color: var(--z-bg-sunken);
  aspect-ratio: 4 / 5;
}
.z-historia__midia img { width: 100%; height: 100%; object-fit: cover; }
.z-historia__selo {
  position: absolute;
  right: calc(-1 * var(--z-sp-3));
  bottom: var(--z-sp-6);
  max-width: 8rem;
  background-color: var(--z-yellow);
  padding: var(--z-sp-2) var(--z-sp-3);
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-orange-ink);
  border: var(--z-hairline);
}
.z-historia__corpo { display: grid; gap: var(--z-sp-5); justify-items: start; }
.z-historia__titulo {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h2);
  line-height: 1.02;
  letter-spacing: var(--z-ls-mega);
  color: var(--z-text-display);
  max-width: 18ch;
}
.z-historia__assinatura {
  font-family: var(--z-font-script);
  font-size: var(--z-fs-script);
  color: var(--z-text-display);
}

/* ── 12 · CUIDADOS E EMBALAGEM ────────────────────────────────────────────── */
.z-cuidados { background-color: var(--z-bg-sunken); }
.z-cuidados__grade {
  display: grid;
  gap: var(--z-sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .z-cuidados__grade { grid-template-columns: 6fr 5fr; gap: var(--z-sp-8); align-items: center; }
}
.z-cuidados__lista { display: grid; gap: var(--z-sp-3); }
.z-cuidados__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--z-sp-4);
  align-items: baseline;
  padding-block: var(--z-sp-3);
  border-bottom: var(--z-hairline);
  font-size: var(--z-fs-small);
}
.z-cuidados__num {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h4);
  color: var(--z-text);
  font-variant-numeric: tabular-nums;
}
.z-cuidados__titulo {
  display: block;
  font-family: var(--z-font-body);
  font-size: var(--z-fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text);
  margin-bottom: 0.25rem;
}
.z-cuidados__midia {
  position: relative;
  overflow: hidden;
  background-color: var(--z-bg);
  aspect-ratio: 4 / 5;
}
.z-cuidados__midia img { width: 100%; height: 100%; object-fit: cover; }

/* ── 13 · INFORMAÇÕES (pagamento / entrega / atendimento) ─────────────────── */
.z-informacoes { background-color: var(--z-bg); }

/* ── 14 · CONTATO / NOVIDADES ─────────────────────────────────────────────── */
.z-contato { background-color: var(--z-bg); }
.z-contato__grade {
  display: grid;
  gap: var(--z-sp-7);
  grid-template-columns: 1fr;
  border-top: var(--z-hairline);
  padding-top: var(--z-section-y);
}
@media (min-width: 900px) {
  .z-contato__grade { grid-template-columns: 5fr 6fr; gap: var(--z-sp-9); }
}
.z-contato__form {
  display: grid;
  gap: var(--z-sp-4);
  grid-template-columns: 1fr;
  align-content: start;
}
@media (min-width: 600px) {
  .z-contato__form { grid-template-columns: 1fr 1fr; }
  .z-contato__form .z-campo--largo { grid-column: 1 / -1; }
}
.z-contato__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-sp-4);
  margin-top: var(--z-sp-5);
}

/* ── Utilidades de revelação (animadas por JS) ────────────────────────────── */
/* Estado inicial só existe quando o JS está ativo (`html.z-js`, marcado por um
   script inline no <head>). Sem JS, ou com ele quebrado, NADA fica invisível:
   o conteúdo é a regra, a animação é o enfeite. */
.z-js .z-revelar {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity var(--z-dur-reveal) var(--z-ease-out),
              transform var(--z-dur-reveal) var(--z-ease-out);
}
.z-js .z-revelar[data-visivel="true"] { opacity: 1; transform: none; }

.z-js .z-revelar-mascara {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--z-dur-reveal) var(--z-ease-out);
}
.z-js .z-revelar-mascara[data-visivel="true"] { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .z-revelar, .z-revelar-mascara { opacity: 1; transform: none; clip-path: none; }
}