/* ============================================================
   Hortus — site v2
   Componentes do design system "Hortus — Lúdico" reescritos em CSS
   puro (o kit original é React). Mesmas medidas, mesmos tokens,
   mesmos estados de hover/press. Nada de cor hardcoded fora de
   tokens.css.

   Uma folha só pro site inteiro: a home e as cinco páginas internas
   compartilham header, footer e a maior parte dos blocos, e duplicar
   isso em arquivos por página só criaria divergência.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* o header é fixo: as âncoras precisam parar abaixo dele */
section[id],main[id]{scroll-margin-top:88px}

body{
  margin:0;
  /* o header é fixo (fora do fluxo) — este padding é o lugar dele.
     Vale a altura do header ALTO e nunca muda: se encolhesse junto com o
     header, o documento reflowava a cada scroll e o scroll anchoring do
     Chrome devolvia a página pro topo, num loop que piscava. */
  padding-top:var(--header-h);
  background:var(--bg-app);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

/* height:auto é obrigatório: os atributos width/height do <img> entram como
   presentational hints e, com os dois presentes, o aspect-ratio do CSS é
   ignorado — o packshot herdava 1300px de altura. */
img{max-width:100%;height:auto;display:block}

a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}

:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-inline:40px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
  font-family:var(--font-rounded);font-weight:600;
}
.skip:focus{left:0;color:#fff}

/* ---------- Tipografia ---------- */

.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);
  color:var(--text-strong);
  margin:0;
  font-weight:400;
}
.display-1{font-size:clamp(52px,7.4vw,var(--fs-display-1))}
.display-2{font-size:clamp(40px,5.4vw,var(--fs-display-2))}
/* --lh-tight (0.94) é calibrado pro display gigante; nos tamanhos menores,
   que quase sempre quebram em 2 linhas, os acentos de PROCEDÊNCIA/TRÊS
   encostam na linha de cima. Só esses dois degraus respiram um pouco mais. */
.display-3{font-size:clamp(32px,4vw,var(--fs-display-3));line-height:.99}
.display-4{font-size:clamp(26px,2.8vw,var(--fs-h1));line-height:1.08}

.script{
  font-family:var(--font-script);
  font-weight:400;
  line-height:1.3;
}

.eyebrow{
  font-family:var(--font-rounded);
  font-weight:var(--fw-medium);
  font-size:var(--fs-caption);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--text-muted);
}

.lede{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text-body);
  margin:0;
}

.on-dark{color:var(--text-on-inverse)}
.on-dark .display,
.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lede{color:rgba(255,255,255,.82)}
.on-dark .eyebrow{color:rgba(255,255,255,.66)}
/* badge-soon, note e tag--soon nascem pro fundo creme (--text-muted +
   --border): sobre o verde do badge davam ~1,4:1. .72 de alfa mede
   5,6:1 aqui — mesma lógica dos alfas do footer (.68/.76). */
.on-dark .badge-soon,.on-dark .note{color:rgba(255,255,255,.72)}
.on-dark .badge-soon,.on-dark .tag--soon{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.on-dark .tag--soon{color:rgba(255,255,255,.72)}
.on-dark .note svg{color:var(--accent-sun)}

/* ---------- Button ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-rounded);
  font-weight:var(--fw-medium);
  font-size:14px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  white-space:nowrap;
  border:none;
  border-radius:var(--r-pill);
  padding:13px 26px;
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-pop),
             filter var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:active{transform:scale(.96)}

/* min-height 44px: alvo de toque (o .btn-sm é o CTA do header em toda
   página, inclusive dentro do menu mobile aberto) — o padding sozinho
   dava só ~32px de altura */
.btn-sm{padding:9px 18px;min-height:44px;font-size:12px;gap:8px}
.btn-lg{padding:17px 34px;font-size:16px;gap:12px}

.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{color:#fff}
.btn-action{background:var(--tone-action-bg);color:var(--tone-action-fg)}
.btn-action:hover{background:var(--action-hover);color:var(--tone-action-fg)}
.btn-sun{background:var(--tone-sun-bg);color:var(--tone-sun-fg)}
.btn-sun:hover{color:var(--tone-sun-fg)}
.btn-ghost{background:transparent;color:var(--text-strong);box-shadow:inset 0 0 0 2px var(--text-strong)}
.btn-ghost:hover{color:var(--text-strong)}
.on-dark .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.on-dark .btn-ghost:hover{color:#fff}

/* Link com seta — companheiro do CTA primário. Dois pills lg lado a lado não
   cabem na coluna do hero, e empilhados brigam por atenção; o link resolve a
   hierarquia sem quebrar a linha. */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-rounded);
  font-weight:var(--fw-bold);
  font-size:14px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--text-strong);
  border-bottom:2px solid var(--action);
  padding-bottom:4px;
  transition:color var(--dur-fast) var(--ease-out);
}
.link-arrow:hover{color:var(--action)}
.link-arrow svg{width:16px;height:16px;transition:transform var(--dur-base) var(--ease-pop)}
.link-arrow:hover svg{transform:translateX(4px)}
.on-dark .link-arrow{color:#fff;border-color:var(--accent-sun)}
.on-dark .link-arrow:hover{color:var(--accent-sun)}

/* moeda amarela do botão primário (motivo assinatura do kit) */
.btn-coin{padding-left:8px}
.btn-coin .coin{
  width:34px;height:34px;flex:0 0 34px;
  border-radius:var(--r-pill);
  background:var(--tone-sun-bg);
  color:var(--tone-sun-fg);
  display:grid;place-items:center;
}
.btn-coin.btn-lg{padding-left:8px}
.btn-coin.btn-lg .coin{width:42px;height:42px;flex:0 0 42px}
.btn-coin .coin svg{width:18px;height:18px}

/* ---------- StickerBadge ---------- */

.sticker{
  display:inline-block;
  padding:7px 18px;
  font-family:var(--font-script);
  font-size:22px;
  line-height:1.1;
  border:var(--border-sticker);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-sticker);
  transform:rotate(-5deg);
  transition:transform var(--dur-base) var(--ease-pop);
}
.sticker--label{
  font-family:var(--font-rounded);
  font-weight:var(--fw-bold);
  font-size:13px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.sticker--sun{background:var(--tone-sun-bg);color:var(--tone-sun-fg)}
.sticker--action{background:var(--tone-action-bg);color:var(--tone-action-fg)}
.sticker--brand{background:var(--tone-brand-bg);color:var(--tone-brand-fg)}
.sticker--deep{background:var(--tone-deep-bg);color:var(--tone-deep-fg)}
.sticker--cream{background:var(--surface-card);color:var(--text-strong)}
.rot-l{transform:rotate(-8deg)}
.rot-r{transform:rotate(4deg)}
.rot-r2{transform:rotate(7deg)}
/* stickers dão uma sacudida no hover — motivo do kit */
.sticker:hover{transform:rotate(0deg) scale(1.04)}

/* ---------- Tag ---------- */

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  font-family:var(--font-rounded);
  font-weight:var(--fw-medium);
  font-size:12px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  border-radius:var(--r-pill);
  background:var(--bg-well);
  color:var(--text-body);
}
.tag--brand{background:var(--leaf-300);color:var(--surface-inverse-deep)}
.tag--sun{background:var(--tone-sun-bg);color:var(--tone-sun-fg)}
.tag--deep{background:var(--tone-deep-bg);color:var(--tone-deep-fg)}
.tag--soon{background:transparent;color:var(--text-muted);box-shadow:inset 0 0 0 1.5px var(--border)}

/* ---------- FeatureCoin ---------- */

.coin-row{display:flex;align-items:center;gap:14px}
/* o disco vive fora do coin-row também (cards, canais de contato), então o
   tamanho mora nele, não no pai */
.disc{
  width:46px;height:46px;flex:0 0 46px;
  border-radius:var(--r-pill);
  display:grid;place-items:center;
  box-shadow:var(--shadow-sm);
}
.disc svg{width:22px;height:22px}
.disc--action{background:var(--tone-action-bg);color:var(--tone-action-fg)}
.disc--brand{background:var(--tone-brand-bg);color:var(--tone-brand-fg)}
.disc--sun{background:var(--tone-sun-bg);color:var(--tone-sun-fg)}
.disc--orange{background:var(--accent-orange);color:#fff}
.coin-row .t{
  font-family:var(--font-rounded);
  font-weight:var(--fw-bold);
  font-size:14px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--text-strong);
}
.coin-row .d{
  font-size:13px;
  line-height:1.45;
  color:var(--text-muted);
  margin-top:3px;
  max-width:240px;
}

/* ---------- Header ---------- */

/* altura do header no estado alto — o padding-top do body espelha isto */
:root{--header-h:101px}

/* fixo, não sticky: encolher um elemento em fluxo movia todo o conteúdo
   abaixo e disparava o scroll anchoring, que travava a rolagem perto do
   topo. Fora do fluxo, encolher não reflowa nada. */
.header{
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:var(--bg-app);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.header.is-stuck{border-color:var(--border);box-shadow:var(--shadow-sm)}
.header .container{
  display:flex;align-items:center;gap:24px;
  padding-block:12px;
  transition:padding-block var(--dur-base) var(--ease-out);
}
.header.is-stuck .container{padding-block:8px}

/* O badge é o logo inteiro — traz o próprio wordmark e o endosso Igarashi.
   Por isso não vai wordmark de tipografia ao lado: seriam dois "Hortus"
   concorrentes. Em troca ele é grande o bastante pra se ler. */
.brand{display:flex;align-items:center;margin-right:auto}
/* grande no topo, pra o wordmark dentro do badge se ler; encolhe quando o
   header descola e vira barra de navegação */
.brand img{height:76px;width:auto;transition:height var(--dur-base) var(--ease-out)}
.header.is-stuck .brand img{height:50px}

.nav-links{display:flex;gap:28px;align-items:center}
/* :not(.btn) pra não roubar o padding/pill do CTA que mora dentro da nav */
.nav-links a:not(.btn){
  font-family:var(--font-rounded);
  font-weight:var(--fw-medium);
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-strong);
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast),border-color var(--dur-fast);
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="page"]{color:var(--brand);border-color:var(--brand)}

.hamburger{
  display:none;width:44px;height:44px;border:none;background:transparent;
  cursor:pointer;padding:10px;border-radius:var(--r-pill);
}
.hamburger span{display:block;height:2.5px;background:var(--ink);border-radius:2px;margin:4px 0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  padding-block:24px 72px;
  overflow:clip;
}
.hero .container{
  display:grid;
  grid-template-columns:1.25fr 1fr .85fr;
  gap:30px;
  align-items:center;
}
.hero-copy .sticker{margin-bottom:22px}
.hero h1{margin:0}
.hero-lede{max-width:360px;margin-top:20px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}

.hero-stage{
  position:relative;
  display:grid;place-items:center;
  min-height:440px;
}
.hero-stage .rays{
  position:absolute;width:420px;height:420px;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 72%);
          mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 72%);
}
.hero-stage .confetti{position:absolute;top:-6px;right:-34px;width:118px;pointer-events:none}

/* foto do produto flutuando, inclinada, com sombra dramática — o "packshot" do kit,
   só que com fotografia real no lugar do placeholder */
.packshot{position:relative}
.packshot img{
  width:clamp(220px,26vw,300px);
  aspect-ratio:1147/1300;
  object-fit:cover;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-product);
  transform:rotate(-6deg);
  animation:float 6s var(--ease-out) infinite;
}
@keyframes float{
  0%,100%{transform:rotate(-6deg) translateY(0)}
  50%    {transform:rotate(-5deg) translateY(-10px)}
}
.packshot .sticker{position:absolute;z-index:2}
.packshot .s1{top:26%;left:-52px}
.packshot .s2{top:44%;left:-30px}

.hero-features{display:flex;flex-direction:column;gap:24px}

/* ---------- Faixa de confiança ---------- */

.trust{background:var(--bg-well);border-block:1px solid var(--border)}
.trust .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding-block:22px;
}
.trust .item{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-rounded);
  font-weight:var(--fw-medium);
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--text-strong);
}
.trust .item svg{width:20px;height:20px;flex:0 0 20px;color:var(--brand)}

/* ---------- Seções ---------- */

.section{padding-block:var(--sp-9)}
.section--tight{padding-block:var(--sp-8)}
.section--well{background:var(--bg-well);border-block:1px solid var(--border)}

/* visível só pra leitor de tela — legenda de tabela, rótulos redundantes */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Promessa */
.promise{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.promise .hi{color:var(--action)}
.promise .ingredients{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.promise .ingredients .tag{font-size:13px;padding:8px 16px}
.promise .ingredients .dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--brand-bright)}

/* ---------- Poço de linhas (rail) ---------- */

.rail-well{
  position:relative;
  background:var(--surface-inverse);
  border-radius:var(--r-xl);
  padding:48px 40px;
  overflow:hidden;
}
.rail-well .rays{position:absolute;bottom:-140px;right:-70px;width:380px;opacity:.6;pointer-events:none}
.rail-head{
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.rail-head .script{color:var(--accent-sun-soft);font-size:26px}
.rail-head h2{margin:4px 0 0}

.rail{
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}

.line-card{
  display:flex;flex-direction:column;
  background:var(--surface-card);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  color:var(--text-body);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.line-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:var(--text-body)}
.line-card .shot{
  position:relative;
  background:var(--bg-well);
  aspect-ratio:4/3;
  display:grid;place-items:center;
  overflow:hidden;
}
.line-card .shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.line-card:hover .shot img{transform:scale(1.04)}
.line-card .shot .sticker{position:absolute;top:12px;left:12px;z-index:2}
.line-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.line-card h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:24px;
  line-height:1;
  margin:0;
  color:var(--text-strong);
}
.line-card p{margin:0;font-size:14px;line-height:1.5;color:var(--text-muted);flex:1}
.line-card .go{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-rounded);
  font-weight:var(--fw-bold);
  font-size:12px;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--action);
  margin-top:4px;
}
.line-card .go svg{width:16px;height:16px;transition:transform var(--dur-base) var(--ease-pop)}
.line-card:hover .go svg{transform:translateX(4px)}

/* ---------- Bloco editorial ---------- */

.editorial{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:stretch}
.editorial .shot{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  min-height:420px;
}
.editorial .shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.editorial .shot .sticker{position:absolute;bottom:24px;left:24px;z-index:2}
.editorial .panel{
  background:var(--surface-warm);
  color:#F4EFE1;
  border-radius:var(--r-xl);
  padding:44px 38px;
  display:flex;flex-direction:column;justify-content:center;
}
.editorial .panel h2{color:#fff;margin:16px 0 0}
.editorial .panel .lede{color:rgba(244,239,225,.84);margin-top:16px;max-width:360px}
.editorial .panel .tag{align-self:flex-start}

.stats{display:grid;grid-template-columns:repeat(3,auto);gap:18px;margin-top:28px;justify-content:start}
.stats .n{
  font-family:var(--font-display);
  font-size:38px;
  line-height:1;
  color:var(--accent-sun);
}
.stats .l{
  font-size:11.5px;
  line-height:1.35;
  color:rgba(244,239,225,.78);
  max-width:112px;
  margin-top:6px;
}

/* ---------- Split varejo ---------- */

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* mesma técnica do bloco editorial: a imagem sai do fluxo pra que o
   aspect-ratio do container mande de verdade, em vez de a altura vir do
   tamanho natural da foto */
.split .media{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  aspect-ratio:4/3;
}
.split .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Faixa CTA (newsletter do kit, virada em portfólio B2B) ---------- */

.cta-band{
  background:var(--ink);
  border-radius:var(--r-xl);
  padding:40px 44px;
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;margin:0}
.cta-band .lede{color:rgba(255,255,255,.8)}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.cta-band .cta-form{flex:1;min-width:340px;max-width:480px}
.cta-band .form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* o aviso de protótipo ocupa a linha inteira embaixo do campo */
.cta-band .form-ok{flex-basis:100%;margin-top:0}
.field{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  background:var(--surface-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-pill);
  padding-inline:18px;
  height:48px;
  transition:border-color var(--dur-base),box-shadow var(--dur-base);
}
.field:focus-within{border-color:var(--focus-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus-ring) 30%,transparent)}
.field svg{width:18px;height:18px;color:var(--text-muted);flex:0 0 18px}
.field input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:16px;color:var(--ink);
}

/* ---------- Footer ---------- */

.footer{background:var(--surface-inverse-deep);color:rgba(244,239,225,.82)}
.footer .container{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;
  padding-block:60px 32px;
}
.footer .brand img{height:84px}
.footer p{font-size:14px;line-height:1.6;max-width:260px;margin:16px 0 18px}
.footer h4{
  font-family:var(--font-rounded);
  font-weight:var(--fw-medium);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
  color:#fff;
  margin:0 0 14px;
}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer a{color:rgba(244,239,225,.82);font-size:14px}
.footer a:hover{color:var(--accent-sun)}
.footer .endorse{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-rounded);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(244,239,225,.76);
}
.footer .endorse svg{width:16px;height:16px;color:var(--accent-sun)}
.social{display:flex;gap:10px;margin-top:14px}
.social a{
  width:36px;height:36px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);
  display:grid;place-items:center;color:#fff;
  transition:transform var(--dur-fast) var(--ease-pop),background var(--dur-fast);
}
.social a:hover{background:var(--accent-sun);color:var(--ink);transform:translateY(-2px)}
.social svg{width:17px;height:17px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;
  color:rgba(244,239,225,.68);
}
.footer-bottom .container{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:18px;
}

/* ============================================================
   PÁGINAS INTERNAS
   Tudo daqui pra baixo entrou junto com Produtos / Origem / Varejo /
   Contato / Blog. Nada aqui é novo componente inventado: são os
   mesmos do kit (Card, Input, Tag, StickerBadge) em arranjos novos.
   ============================================================ */

/* ---------- Topo de página ----------
   A home abre com o pôster inteiro; as internas abrem com uma faixa
   curta sobre o creme fundo, pra não competir com o conteúdo. */

.page-hero{
  position:relative;
  background:var(--bg-well);
  border-bottom:1px solid var(--border);
  padding-block:44px 52px;
  overflow:clip;
}
.page-hero .rays{
  position:absolute;top:-190px;right:-120px;width:400px;opacity:.28;
  pointer-events:none;
}
.page-hero .container{position:relative;max-width:920px;margin-inline:auto}
.page-hero h1{margin:14px 0 0}
.page-hero .lede{margin-top:18px;max-width:640px;font-size:17px}
.page-hero .hero-actions{margin-top:28px}
.page-hero .sticker{position:absolute;right:40px;bottom:-18px;z-index:2}

.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0;
  font-family:var(--font-rounded);
  font-weight:var(--fw-medium);
  font-size:var(--fs-caption);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--text-muted);
}
.crumbs a{color:var(--text-muted)}
.crumbs a:hover{color:var(--brand)}
.crumbs [aria-current]{color:var(--text-strong)}

/* ---------- Cabeçalho de seção centralizado ---------- */

.section-head{max-width:640px;margin:0 auto 44px;text-align:center}
.section-head .eyebrow{display:block;margin-bottom:10px}
.section-head .lede{margin-top:16px}
.center{text-align:center}

/* ---------- Bloco de produto ----------
   Reaproveita o .split da home. .split--rev troca só o lado da foto; a
   ordem do DOM segue igual em todos os blocos (foto, depois texto), pra
   que a leitura por voz não mude de padrão no meio da página. */

.split--rev .media{order:2}
/* dois pacotes lado a lado num poço, em vez de foto sangrada: os
   packshots de congelado têm fundo branco e não recortam bem */
.split .media--pad{
  background:var(--bg-well);
  display:grid;place-items:center;
  padding:34px;
  gap:18px;
  grid-auto-flow:column;
  box-shadow:none;
  /* sem o 4/3 travado do .media: aqui não há foto pra cortar, e com a
     altura fixa o segundo pacote sumia quando os dois empilhavam */
  aspect-ratio:auto;
}
.split .media--pad img{
  position:static;min-width:0;width:auto;height:auto;max-height:340px;
  object-fit:contain;
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-md);
}

.prod-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.prod-meta .tag{font-size:13px;padding:8px 16px}
.prod-meta .dot{width:9px;height:9px;border-radius:var(--r-pill);flex:0 0 9px}

/* nota de rodapé do produto — selo legal, dado de caixa, temperatura.
   O ícone fica fora do fluxo em vez de virar item de flex: assim um link
   no meio da frase continua sendo texto corrido, e não uma coluna. */
.note{
  position:relative;
  margin-top:22px;padding-left:26px;
  font-size:13px;line-height:1.5;
  color:var(--text-muted);
}
.note svg{position:absolute;left:0;top:2px;width:17px;height:17px;color:var(--brand)}

.badge-soon{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--border);
  font-family:var(--font-rounded);
  font-weight:var(--fw-medium);
  font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-muted);
}
.badge-soon svg{width:15px;height:15px}

/* ---------- Card (o Card do kit) ---------- */

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card-grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--surface-card);
  border-radius:var(--r-lg);
  padding:28px 26px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card h3,.card h4{
  font-family:var(--font-rounded);
  font-weight:var(--fw-bold);
  font-size:17px;
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--text-strong);
  margin:16px 0 0;
}
.card p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--text-muted)}
.card .disc{box-shadow:none}

.on-dark .card{
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.on-dark .card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.on-dark .card h3,.on-dark .card h4{color:#fff}
.on-dark .card p{color:rgba(255,255,255,.78)}

/* ---------- Faixa escura de seção ---------- */

.band{background:var(--surface-inverse);position:relative;overflow:clip}
.band .rays{
  position:absolute;bottom:-180px;left:-90px;width:420px;opacity:.5;
  pointer-events:none;
}
.band .container{position:relative}

/* ---------- Números ----------
   .stats já existe no bloco editorial (painel terra). Aqui só as duas
   variantes de fundo que faltavam. */

.stats--row{grid-template-columns:repeat(3,1fr);justify-content:stretch;text-align:center;gap:28px}
.stats--light .n{color:var(--brand)}
.stats--light .l{color:var(--text-muted)}
.stats--row .l{max-width:16ch;margin-inline:auto}

/* ---------- Tabela de SKU ---------- */

.spec-wrap{
  background:var(--surface-card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow-x:auto;            /* a tabela rola sozinha; a página não */
  -webkit-overflow-scrolling:touch;
}
.spec{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.spec th,.spec td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--border)}
.spec th{
  font-family:var(--font-rounded);
  font-weight:var(--fw-bold);
  font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-strong);
  background:var(--bg-well);
  white-space:nowrap;
}
.spec tbody tr:last-child td{border-bottom:none}
.spec tbody tr:hover{background:var(--red-100)}
.spec td:first-child{font-weight:600;color:var(--text-strong)}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}

/* ---------- Formulário (o Input do kit, em coluna) ---------- */

.form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.form-field label{
  font-family:var(--font-rounded);
  font-weight:var(--fw-medium);
  font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-strong);
}
.form-field input,
.form-field select,
.form-field textarea{
  font-family:var(--font-body);
  font-size:16px;
  color:var(--ink);
  background:var(--surface-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  padding:13px 16px;
  width:100%;
  transition:border-color var(--dur-base),box-shadow var(--dur-base);
}
.form-field textarea{min-height:130px;resize:vertical;line-height:1.5}
.form-field select{appearance:none;cursor:pointer;
  /* seta desenhada no próprio campo pra não depender de imagem */
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
                   linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;
  background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-repeat:no-repeat;
  padding-right:44px;
}
.form-field :is(input,select,textarea):focus{
  outline:none;
  border-color:var(--focus-ring);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus-ring) 26%,transparent);
}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--text-muted)}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--text-muted)}
.form-ok{
  margin-top:16px;
  background:var(--red-100);
  border-radius:var(--r-sm);
  padding:14px 18px;
  font-size:14px;
  color:var(--surface-inverse-deep);
  box-shadow:inset 0 0 0 1.5px var(--leaf-300);
}
.form-ok[hidden]{display:none}

/* ---------- Cartões de canal (contato) ---------- */

.channel{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface-card);
  border-radius:var(--r-lg);
  padding:22px 24px;
  box-shadow:var(--shadow-sm);
}
.channel + .channel{margin-top:14px}
.channel h3{
  font-family:var(--font-rounded);font-weight:var(--fw-bold);
  font-size:15px;margin:0;color:var(--text-strong);
}
.channel p{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--text-muted)}
.channel a{font-size:14px}

/* ---------- Blog ----------
   Mesmo card das linhas de produto; muda só que não é link ainda. */

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{cursor:default}
.post-card:hover{transform:none;box-shadow:var(--shadow-md)}
.post-card:hover .shot img{transform:none}
/* título de matéria não é pôster: a Anton em caixa alta funciona pra
   "CHIPS", não pra uma frase de dez palavras */
.post-card h3{
  font-family:var(--font-rounded);
  font-weight:var(--fw-bold);
  font-size:18px;
  line-height:1.3;
  text-transform:none;
  letter-spacing:0;
}
.post-card .when{
  font-family:var(--font-rounded);font-weight:var(--fw-medium);
  font-size:11px;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-muted);
}

.blog-empty{
  margin-top:34px;
  background:var(--bg-well);
  border:2px dashed var(--border);
  border-radius:var(--r-lg);
  padding:36px 32px;
  text-align:center;
}
.blog-empty p{margin:0 auto;max-width:46ch;color:var(--text-body)}

/* ---------- Endosso Igarashi ----------
   Único lugar em que o vermelho do mon aparece. Vem exato do vetor e
   não espalha pro resto da paleta. */

.endorse-block{
  display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center;
  background:var(--bg-well);
  border-radius:var(--r-xl);
  padding:clamp(30px,4vw,52px);
}
.endorse-block .mon{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-rounded);font-weight:var(--fw-bold);
  font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--igarashi-red);
  margin-bottom:16px;
}
.endorse-block .mon svg{width:20px;height:20px}

/* ---------- Reveal ---------- */

.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsivo ---------- */

@media (max-width:1080px){
  /* cinco itens + o pill do CTA: com 28px o menu encostava no logo antes
     de o hamburger entrar (860px) */
  .nav-links{gap:20px}
  .hero .container{grid-template-columns:1fr 1fr;gap:28px}
  /* auto-fit em vez de flex-wrap: assim os três coins viram 3 colunas no
     tablet e 2 mais abaixo, sem deixar um órfão numa linha sozinha */
  .hero-features{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
    gap:24px 28px;
  }
  .coin-row .d{max-width:none}
  .promise,.split,.editorial{grid-template-columns:1fr;gap:32px}
  .editorial .shot{min-height:300px}
  .footer .container{grid-template-columns:1fr 1fr}

  /* empilhado, a ordem invertida deixa de fazer sentido: a foto volta
     pro lugar dela no DOM, depois do texto */
  .split--rev .media{order:0}
  /* auto-fit em vez de 2 colunas fixas: com três cards, duas colunas
     deixavam o terceiro sozinho numa linha */
  .card-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .card-grid--4,.post-grid{grid-template-columns:repeat(2,1fr)}
  .endorse-block{grid-template-columns:1fr;gap:30px}
}

@media (max-width:860px){
  .container{padding-inline:24px}
  .header .container{gap:12px}
  .hamburger{display:block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-app);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-md);
    padding:8px 24px 20px;
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){padding:12px 0;border-bottom:1px solid var(--border)}
  .nav-links a:not(.btn)[aria-current="page"]{border-color:var(--border)}
  .nav-links .btn{margin-top:14px;align-self:flex-start}

  .hero .container{grid-template-columns:1fr}
  .hero-stage{min-height:380px;order:-1}
  .hero-stage .rays{width:320px;height:320px}
  /* empilhado sobra largura: o packshot cresce pra que os stickers voltem a
     ser um acento na borda em vez de cobrirem a embalagem */
  .packshot img{width:min(300px,64vw)}
  .hero-lede{max-width:none}
  .trust .container{grid-template-columns:1fr 1fr}
  .section{padding-block:var(--sp-8)}
  .rail{grid-template-columns:1fr}
  .rail-well{padding:32px 24px;border-radius:var(--r-lg)}
  /* empilhado: lado a lado, o h2 (que não encolhe além da palavra mais
     longa) não deixava largura pro formulário, e o campo + botão vazavam
     pra fora da faixa escura */
  .cta-band{
    padding:32px 26px;border-radius:var(--r-lg);
    flex-direction:column;align-items:stretch;gap:24px;
  }
  .cta-band h2,.cta-band .lede{min-width:0}
  .cta-band .cta-form{flex:none;min-width:0;max-width:none;width:100%}
  .editorial .panel{padding:32px 26px}
  .footer .container{grid-template-columns:1fr;gap:28px}
  .footer p{max-width:none}

  .page-hero{padding-block:32px 40px}
  .page-hero .rays{width:280px;top:-140px;right:-90px}
  /* o sticker do topo de página fica pendurado na quina; sem largura
     sobrando ele cobria o próprio título */
  .page-hero .sticker{display:none}
  .post-grid{grid-template-columns:1fr}
  .section-head{margin-bottom:32px}
}

@media (max-width:520px){
  :root{--header-h:81px}
  .brand img{height:56px}
  .header.is-stuck .brand img{height:44px}
  .footer .brand img{height:72px}
  .hero-features{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,auto);gap:22px}
  /* só aqui o packshot fica sem folga à esquerda: os stickers vão pros
     cantos opostos em vez de cobrir a embalagem — s1 em cima, s2 embaixo,
     pra frase continuar lendo na ordem ("Só batata," → "óleo e sal") */
  .packshot .s1{top:-16px;bottom:auto;left:-22px}
  .packshot .s2{top:auto;bottom:6px;left:auto;right:-18px}
  .trust .container{grid-template-columns:1fr}
  .cta-band .form{flex-direction:column;align-items:stretch}
  .cta-band .form .btn{justify-content:center}
  /* o botão em coluna herda a largura da faixa: sem isto o padding fixo
     do .btn deixava a pílula maior que o campo em telas estreitas */
  .cta-band .form .btn{width:100%;padding-inline:18px}

  .card-grid,.card-grid--4{grid-template-columns:1fr}
  .stats--row{grid-template-columns:1fr;gap:22px}
  .form-row{grid-template-columns:1fr;gap:0}
  /* dois pacotes lado a lado não cabem: viram um embaixo do outro */
  .split .media--pad{grid-auto-flow:row;padding:24px}
  .split .media--pad img{max-height:260px}
  .channel{padding:18px 18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}