/* --- 0b. FONTES LOCAIS --------------------------------------------------
   Baixadas do Google em 02/09 e servidas do proprio dominio. Duas razoes, as
   duas medidas neste site:

   1. CLS. Com o Google Fonts o titulo da home pintava na fonte de reserva, e a
      troca para a Fraunces mudava a altura do bloco. Como a hero e ancorada
      embaixo, o conteudo inteiro pulava: CLS 0,247 em rede lenta, que reprova.
      Comprovado por eliminacao — a mesma pagina sem o <link> do Google deu 0.
      Servidas daqui, chegam na mesma conexao do CSS e o salto some.
   2. Privacidade. Some o terceiro que via o IP de quem visita, e a CSP fecha
      font-src e style-src no proprio dominio.

   Sao as duas VARIAVEIS: um arquivo por familia cobre todos os pesos. O
   Google devolvia o mesmo binario para 400, 500 e 700 — tres downloads do
   mesmo arquivo. Aqui e um so, com o intervalo de peso declarado.
   Subset: apenas latin. O site e en-AU.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('../fonts/fraunces.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/karla.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   Neimiah Essences — design system
   Base: marca/brand-kit-master.md v1.1
   Regras travadas: sem gradiente · sem dourado metálico · um Ochre por tela
   Fraunces (display) + Karla (corpo) · corpo nunca abaixo de 15px
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root{
  /* paleta oficial */
  --eucalypt:#48513F;
  --sage:#7E8C72;
  /* 11/09: o Sage como COR DE TEXTO dava 3,3:1 sobre o Paper — reprova o AA
     nos rotulos pequenos em caixa alta (eyebrow, ficha do produto, "For rest").
     Foi o Lighthouse que achou, na revisao do "darker font" da Diane. Para
     texto usa-se este, um tom abaixo: 6,0 no Paper, 4,8 no Sand. O Sage
     continua nos fios, bordas e icones, onde nao ha leitura. */
  --sage-text:#56624A;
  --ochre:#C08A3E;
  --clay:#B4654A;
  --sand:#E8DCC8;
  --paper:#FAF6EF;
  --ink:#26261F;

  /* Verde claro entrou no lugar do rosa em 27/ago, a pedido da cliente:
     "change main colour on the site to pale green, pink too feminine".
       --fern       acento claro sobre fundo escuro (eyebrow, rodape, hero)
       --fern-light lavagem de secao inteira, onde antes era Blush Light */
  --fern:#D7E0CC;
  --fern-light:#E9EEE2;

  /* O blush sobrevive em dose pequena, por decisao da Dani em 27/ago.
     REGRA: nunca segura uma secao inteira nem um bloco grande — isso e o que
     a cliente chamou de feminino demais. So detalhe: selo, sinal, assinatura.
     Hoje aparece em exatamente tres lugares (procure por var(--blush)). */
  --blush:#E3BFB4;
  --blush-light:#F2DED6;

  /* papéis semânticos */
  --bg:var(--paper);
  --bg-alt:var(--sand);
  --bg-deep:var(--eucalypt);
  --text:var(--ink);
  /* 11/09: escureceu de #5A5A4E — "darker font to stand out", pedido da Diane.
     O cinza passava no WCAG (6,6:1) mas lia apagado para quem tem mais idade,
     que e exatamente o publico dela. */
  --text-soft:#403F36;
  --text-on-deep:var(--paper);
  --rule:rgba(72,81,63,.18);
  --rule-strong:rgba(72,81,63,.34);
  --accent:var(--ochre);

  /* tipografia */
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:"Karla","Segoe UI",system-ui,-apple-system,sans-serif;

  --step--1:0.9375rem;   /* 15px  — corpo pequeno, piso absoluto */
  --step-0:1.0625rem;    /* 17px  — corpo */
  --step-1:1.1875rem;    /* 19px  — lead */
  --step-2:1.5rem;       /* 24px  — h3 */
  --step-3:clamp(1.75rem,1.3rem + 1.9vw,2.25rem);   /* h2 */
  --step-4:clamp(2.25rem,1.4rem + 3.6vw,3.5rem);    /* h1 */
  --step-5:clamp(2.75rem,1.5rem + 5.2vw,4.5rem);    /* hero */

  /* ritmo 4/8 */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem;  --s6:4rem; --s7:6rem;   --s8:8rem;

  --measure:34rem;          /* ~68 caracteres */
  --measure-wide:44rem;
  --shell:76rem;
  --gutter:clamp(1.25rem,5vw,3rem);

  --radius:2px;             /* quase reto — apotecário, não app */
  --radius-arc:999px;

  --dur-fast:160ms;
  --dur:280ms;
  --dur-slow:640ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --z-nav:100; --z-overlay:200; --z-drawer:300;
}

/* --- 2. RESET ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

/* --- 3. TIPOGRAFIA ------------------------------------------------------- */
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 40;
  letter-spacing:-.01em;
  text-wrap:balance;
}
h1{font-size:var(--step-4);line-height:1.12}
h2{font-size:var(--step-3);line-height:1.2}
h3{font-size:var(--step-2);line-height:1.3;font-weight:500}
.hero__title{font-size:var(--step-5);line-height:1.05}

p{max-width:var(--measure);text-wrap:pretty}
.lead{font-size:var(--step-1);line-height:1.6;color:var(--text-soft);max-width:var(--measure-wide)}
.small{font-size:var(--step--1);line-height:1.6}
.muted{color:var(--text-soft)}

.eyebrow{
  font-size:.75rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage-text);
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:5rem}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:0 0 3rem;height:1px;background:var(--rule)}
.eyebrow--center::after{flex:0 0 3rem}

.price,.tabular{font-variant-numeric:tabular-nums;font-weight:500}

/* "How flower essences work in bold please" (Diane, 11/09). A Fraunces aqui
   so vai ate 500, entao o negrito de verdade vem da Karla 700. */
.h-bold{font-family:var(--font-body);font-weight:700;font-size:var(--step-1);
  letter-spacing:0;color:var(--ink);margin-top:var(--s4)}

/* O <picture> (WebP + JPEG, desde 11/09) nao pode virar caixa no layout:
   com display:contents a <img> continua filha direta do arco, do cartao e da
   miniatura, e todo o CSS que ja existia para ela segue valendo. */
picture{display:contents}
/* Sem isto o <source> vira item de grade vazio (conferido: as tres
   miniaturas do produto saiam fora de ordem). Esconder o <source> nao muda
   a escolha do arquivo — isso o navegador faz antes do CSS. */
picture>source{display:none}

/* --- 4. LAYOUT ----------------------------------------------------------- */
.shell{width:min(100% - var(--gutter)*2,var(--shell));margin-inline:auto}
.shell--narrow{width:min(100% - var(--gutter)*2,52rem)}
.section{padding-block:clamp(4rem,9vw,8rem);position:relative;overflow:clip}
.section--tight{padding-block:clamp(3rem,6vw,4rem)}
.section--sand{background:var(--bg-alt)}
.section--fern{background:var(--fern-light)}
.section--deep{background:var(--bg-deep);color:var(--text-on-deep)}
.section--deep .lead,.section--deep .muted{color:rgba(250,246,239,.86)}

/* 11/09: sprays em fundo escuro — "make background for sprays darker as
   looking washed out in beige". O frasco e claro e o fundo da foto e claro;
   sobre o Sand as duas coisas se fundiam. Sobre o Eucalypt o arco da foto
   vira a moldura que destaca o frasco. Tudo que no cartao era Sage ou
   Eucalypt some no escuro, dai as trocas abaixo. */
.section--deep .product-card__desc{color:var(--fern)}
.section--deep .product-card__name,.section--deep .price{color:var(--paper)}
.section--deep .product-card__cta{color:var(--paper);border-bottom-color:rgba(250,246,239,.45)}
.section--deep .product-card:hover .product-card__cta{border-bottom-color:var(--ochre)}
.section--deep .product-card__media{background:var(--fern-light)}
/* Na Shop e nos sprays a secao escura e a ultima antes do rodape, que tambem
   e Eucalypt: as duas emendavam numa faixa so. Um tom abaixo separa. */
.section--sprays{background:#394032}
.section--sprays .step__num{background:#394032}
.section--deep .eyebrow{color:var(--fern)}
.section--deep .eyebrow::after,.section--deep .eyebrow::before{background:rgba(250,246,239,.28)}

.stack>*+*{margin-top:var(--s3)}
.stack-lg>*+*{margin-top:var(--s5)}
.grid{display:grid;gap:var(--s4)}
@media (min-width:52em){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,6rem);align-items:center}
  .grid--split-wide{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
@media (min-width:64em){ .grid--4{grid-template-columns:repeat(4,1fr)} }
@media (min-width:40em) and (max-width:63.99em){ .grid--4{grid-template-columns:repeat(2,1fr)} }

.center{text-align:center}
.center p,.center .lead{margin-inline:auto}
.flow-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* --- 5. O ARCO — motivo central do sistema ------------------------------- */
.arc-mark{
  position:absolute;pointer-events:none;color:var(--rule);
  opacity:.55;width:min(46vw,26rem);aspect-ratio:1;z-index:0;
}
.arc-mark--tr{top:-6rem;right:-8rem}
.arc-mark--bl{bottom:-8rem;left:-9rem}
.section>.shell,.pagehead>.shell{position:relative;z-index:1}
.section--deep .arc-mark{color:rgba(250,246,239,.16)}

.arcframe{position:relative}
.arcframe__media{
  border-radius:999px 999px var(--radius) var(--radius);
  overflow:hidden;background:var(--sand);
}
.arcframe__media>*{width:100%;height:100%;object-fit:cover}
.arcframe::before{
  content:"";position:absolute;inset:-.85rem -.85rem 40% -.85rem;
  border:1px solid var(--rule-strong);border-bottom:0;
  border-radius:999px 999px 0 0;
}

/* --- 6. PLACEHOLDER DE IMAGEM (nenhuma foto existe ainda) ---------------- */
.ph{
  position:relative;display:grid;place-items:center;
  background:var(--sand);
  background-image:repeating-linear-gradient(45deg,transparent 0 11px,rgba(72,81,63,.055) 11px 12px);
  color:var(--sage-text);text-align:center;padding:var(--s3);
  border:1px solid var(--rule);width:100%;height:100%;
}
.ph__label{
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  max-width:24ch;line-height:1.7;color:var(--eucalypt);opacity:.75;
}
.ph__icon{width:1.75rem;height:1.75rem;margin:0 auto .6rem;color:var(--sage-text)}
.ph--4x5{aspect-ratio:4/5}
.ph--1x1{aspect-ratio:1}
.ph--3x2{aspect-ratio:3/2}
.ph--16x9{aspect-ratio:16/9}
.ph--5x4{aspect-ratio:5/4}

/* --- 6b. FOTO REAL (entrou em 02/09) ------------------------------------
   Mesmas proporcoes do placeholder que substitui, para o layout nao mexer.
   O fundo em Sand cobre o quadro enquanto o JPEG carrega. */
.shot{
  display:block;width:100%;height:100%;object-fit:cover;
  background:var(--sand);border:0;
}
.shot--4x5{aspect-ratio:4/5}
.shot--1x1{aspect-ratio:1}
.shot--3x2{aspect-ratio:3/2}
.shot--16x9{aspect-ratio:16/9}
.shot--5x4{aspect-ratio:5/4}

/* --- 6c. HONEYPOT (Netlify Forms) ---------------------------------------
   Campo isca: tem que existir no DOM e ficar fora do alcance de gente e de
   leitor de tela. display:none nao serve — parte dos bots ignora campo oculto
   assim, e o Safari ja engoliu autofill nele. Fora da tela e o que funciona. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* O link do breadcrumb media 23px de altura no celular. Padding vertical
   em elemento INLINE aumenta a area de toque sem mexer na linha — o
   breadcrumb continua igual na tela e fica clicavel no dedo. */
.crumbs a{padding-block:.25rem}

/* --- 7. BOTÕES ----------------------------------------------------------- */
.btn{
  --btn-bg:var(--eucalypt); --btn-fg:var(--paper); --btn-bd:var(--eucalypt);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3rem;padding:.85rem 1.6rem;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  border-radius:var(--radius-arc);
  font-size:.9375rem;font-weight:500;letter-spacing:.04em;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn:hover{--btn-bg:#3B4334;--btn-bd:#3B4334}
.btn:active{transform:translateY(1px)}
/* Ochre é o único acento de ação — um por tela */
.btn--accent{--btn-bg:var(--ochre);--btn-fg:var(--ink);--btn-bd:var(--ochre)}
.btn--accent:hover{--btn-bg:#AD7A33;--btn-bd:#AD7A33}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--eucalypt);--btn-bd:var(--rule-strong)}
.btn--ghost:hover{--btn-bg:rgba(72,81,63,.06);--btn-bd:var(--eucalypt)}
.section--deep .btn--ghost,.hero .btn--ghost{--btn-fg:var(--paper);--btn-bd:rgba(250,246,239,.45)}
.section--deep .btn--ghost:hover,.hero .btn--ghost:hover{--btn-bg:rgba(250,246,239,.12)}
.btn--block{width:100%}

.arrow-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9375rem;font-weight:500;letter-spacing:.02em;
  color:var(--eucalypt);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  /* padding-top existe para chegar aos 44px de alvo de toque */
  padding:.85rem 0 .3rem;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.arrow-link svg{width:1rem;height:1rem;flex:0 0 auto;transition:transform var(--dur) var(--ease-out)}
.arrow-link:hover{border-color:var(--ochre);color:var(--ink)}
.arrow-link:hover svg{transform:translateX(.3rem)}
.section--deep .arrow-link{color:var(--paper);border-color:rgba(250,246,239,.4)}
.section--deep .arrow-link:hover{border-color:var(--fern);color:var(--paper)}

/* --- 8. FOCO E ACESSIBILIDADE ------------------------------------------- */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ochre);outline-offset:3px;border-radius:var(--radius);
}
.skip{
  position:absolute;left:var(--s2);top:var(--s2);z-index:400;
  padding:.75rem 1.25rem;background:var(--eucalypt);color:var(--paper);
  border-radius:var(--radius-arc);text-decoration:none;font-size:.875rem;
  transform:translateY(-250%);transition:transform var(--dur) var(--ease);
}
.skip:focus{transform:translateY(0)}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- 9. HEADER ----------------------------------------------------------- */
/* 11/09: saiu o backdrop-filter:blur. Desfocar o que passa por baixo do
   header fixo obriga o navegador a repintar essa faixa a CADA quadro de
   rolagem — e na home o que passa por baixo e um video. Em laptop modesto
   isso e o que a rolagem "arrastada" que a Diane sentiu. Fundo quase opaco
   da o mesmo resultado visual sem custo nenhum. */
.site-header{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(250,246,239,.97);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--rule);background:rgba(250,246,239,.97)}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:4.5rem;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto;padding-block:.35rem}
/* Logo real no header e no menu movel. Altura fixa, largura automatica:
   o arquivo e 546x192, a proporcao se resolve sozinha. */
.brand__img{height:2.9rem;width:auto;display:block}
@media (min-width:62em){.brand__img{height:3.5rem}}
.site-header__inner{min-height:5rem}
.brand__mark{width:2.4rem;height:2.4rem;color:var(--eucalypt);flex:0 0 auto}
.brand__name{font-family:var(--font-display);font-size:1.0625rem;letter-spacing:.02em;line-height:1.1;display:block}
.brand__sub{
  display:block;font-family:var(--font-body);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sage-text);margin-top:.15rem;
}
.nav{display:none}
@media (min-width:62em){
  .nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.9rem)}
}
.nav__link{
  position:relative;text-decoration:none;font-size:.9375rem;font-weight:600;
  padding-block:.4rem;color:var(--text);white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ochre);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--eucalypt)}
.header__actions{display:flex;align-items:center;gap:var(--s2)}
.header__cta{display:none}
@media (min-width:62em){.header__cta{display:inline-flex}}

.burger{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  background:none;border:1px solid var(--rule-strong);border-radius:var(--radius-arc);
  cursor:pointer;transition:border-color var(--dur) var(--ease);
}
.burger:hover{border-color:var(--eucalypt)}
@media (min-width:62em){.burger{display:none}}
.burger__bars{width:1.1rem;height:.7rem;position:relative}
.burger__bars span{
  position:absolute;left:0;right:0;height:1.5px;background:var(--eucalypt);
  transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease);
}
.burger__bars span:nth-child(1){top:0}
.burger__bars span:nth-child(2){top:50%;transform:translateY(-50%)}
.burger__bars span:nth-child(3){bottom:0}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.34rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.34rem) rotate(-45deg)}

/* --- 10. MENU MÓVEL ------------------------------------------------------ */
.mobile-nav{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:var(--paper);display:flex;flex-direction:column;
  padding:var(--s3) var(--gutter) var(--s5);overflow-y:auto;
  visibility:hidden;opacity:0;
  transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease);
}
.mobile-nav[data-open="true"]{visibility:visible;opacity:1}
.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;min-height:4.5rem}
.mobile-nav__list{margin-top:var(--s3);display:flex;flex-direction:column}
.mobile-nav__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  padding:var(--s3) 0;border-bottom:1px solid var(--rule);
  font-family:var(--font-display);font-size:1.4rem;text-decoration:none;
  opacity:0;transform:translateY(.75rem);
}
.mobile-nav[data-open="true"] .mobile-nav__list a{
  animation:menuIn var(--dur-slow) var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * 45ms + 80ms);
}
.mobile-nav__list a span{
  font-family:var(--font-body);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage-text);
}
@keyframes menuIn{to{opacity:1;transform:none}}
.mobile-nav__foot{margin-top:var(--s4);padding-top:var(--s3)}
body[data-lock="true"]{overflow:hidden}

/* --- 11. HERO ------------------------------------------------------------ */
.hero{position:relative;min-height:min(92svh,50rem);display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0;background:var(--eucalypt);overflow:hidden}
/* object-position a esquerda: e onde o video tem folhagem escura, e e onde
   o texto da hero cai. Medido, nao chutado: rende ~0.6 de contraste a mais
   do que o enquadramento centralizado. */
.hero__media>*{width:100%;height:100%;object-fit:cover;object-position:0% center}
/* O placeholder da hero encosta no canto para nao brigar com o titulo.
   Ele some sozinho quando a <img> ou o <video> reais entrarem no lugar. */
.hero__media .ph{
  background:var(--eucalypt);border:0;
  background-image:repeating-linear-gradient(45deg,transparent 0 16px,rgba(250,246,239,.05) 16px 17px);
  /* canto superior direito: e a unica area da hero que fica vazia
     tanto no desktop quanto no celular */
  place-items:start end;padding:var(--gutter);
}
.hero__media .ph>div{display:flex;align-items:center;gap:.7rem;text-align:right}
.hero__media .ph__icon{margin:0;width:1.25rem;height:1.25rem;flex:0 0 auto}
.hero__media .ph__label,.hero__media .ph__icon{color:var(--fern);opacity:.7}
.hero__media .ph__label{max-width:20ch;font-size:.625rem;line-height:1.6}
/* Veu chapado, nunca gradiente (regra 5 da paleta). Subiu de .46 para .58
   em 27/ago, quando o video entrou: a .46 o pior quadro dava contraste 2.63,
   que reprova em AA ate para texto grande. A .58 da 3.57. */
.hero__veil{position:absolute;inset:0;background:rgba(38,38,31,.58)}
/* 11/09 — "more colour in the waratah flower, shadow on right". O veu chapado
   escurecia a tela INTEIRA para proteger um texto que so ocupa a esquerda, e
   a flor, que fica a direita, saia marrom. A partir de tablet o veu segura a
   forca so onde o texto cai e se abre sobre a flor.
   E a unica excecao a regra 5 da paleta (sem gradiente), e e funcional: nao
   e enfeite, e a sombra que segura o contraste do texto. No celular o texto
   ocupa a largura toda, entao la o veu segue chapado.
   A conta do fim da zona forte: inicio do texto (margem do shell) + 38rem,
   que e a largura maxima do bloco de texto. Contraste remedido em 11/09. */
@media (min-width:48em){
  .hero__veil{
    --text-end:calc(max(var(--gutter),(100% - var(--shell)) / 2) + 38rem);
    background:linear-gradient(90deg,
      rgba(38,38,31,.62) 0,
      rgba(38,38,31,.58) var(--text-end),
      rgba(38,38,31,.14) calc(var(--text-end) + 20rem),
      rgba(38,38,31,.10) 100%);
  }
}
.hero__inner{
  position:relative;width:min(100% - var(--gutter)*2,var(--shell));
  margin-inline:auto;padding-block:clamp(3rem,9vw,6rem);
}
.hero__body{max-width:38rem;color:var(--paper)}
.hero__body .eyebrow{color:var(--fern)}
.hero__body .eyebrow::after{background:rgba(250,246,239,.35)}
/* 24px nao e capricho: acima de 24px o WCAG trata como texto grande, que
   exige 3.0 em vez de 4.5. Sobre video em movimento e a unica forma de o
   subtitulo passar sem escurecer o video a ponto de matar a imagem. */
.hero__sub{font-size:var(--step-2);line-height:1.5;color:var(--paper);margin-top:var(--s3);max-width:34rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);align-items:center}
.hero__actions .arrow-link{color:var(--paper);border-color:rgba(250,246,239,.45)}
.hero__actions .arrow-link:hover{border-color:var(--fern);color:var(--paper)}
.hero__scroll{
  position:absolute;bottom:var(--s3);right:var(--gutter);
  display:none;align-items:center;gap:.6rem;
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,246,239,.72);
}
@media (min-width:62em){.hero__scroll{display:flex}}
.hero__scroll i{display:block;width:1px;height:2.5rem;background:rgba(250,246,239,.35);position:relative;overflow:hidden}
/* BLUSH 2 de 3 — o fio que desce na dica de scroll */
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--blush);animation:scrollHint 2.6s var(--ease) infinite}
@keyframes scrollHint{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.pagehead{padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem);position:relative;overflow:clip}
.pagehead--sand{background:var(--bg-alt)}
.pagehead--fern{background:var(--fern-light)}
.pagehead .lead{margin-top:var(--s3)}

/* --- 12. BREADCRUMB ------------------------------------------------------ */
.crumbs{font-size:.8125rem;color:var(--text-soft);margin-bottom:var(--s3)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.45rem}
.crumbs li{display:flex;gap:.45rem}
.crumbs li+li::before{content:"/";color:var(--sage-text)}
.crumbs a{text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:var(--rule-strong)}

/* --- 13. CARTÕES E PRODUTOS ---------------------------------------------- */
.card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--rule);transition:border-color var(--dur) var(--ease);
}
.card:hover{border-color:var(--rule-strong)}
.card__body{padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.card__foot{margin-top:auto;padding-top:var(--s3)}

.product-card{position:relative;display:flex;flex-direction:column;text-decoration:none}
.product-card__media{
  position:relative;overflow:hidden;background:var(--sand);
  border-radius:999px 999px var(--radius) var(--radius);
}
.product-card__media .ph,.product-card__media img,.product-card__media .shot{transition:transform var(--dur-slow) var(--ease-out)}
.product-card:hover .ph,.product-card:hover img{transform:scale(1.035)}
.product-card__botanical{
  position:absolute;bottom:var(--s2);right:var(--s2);width:4rem;height:4rem;
  color:var(--eucalypt);opacity:.3;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__botanical{opacity:.55;transform:rotate(-5deg)}
.product-card__body{padding-top:var(--s3);display:flex;flex-direction:column;gap:.35rem;flex:1}
.product-card__name{font-family:var(--font-display);font-size:1.25rem;line-height:1.3}
.product-card__desc{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-text);font-weight:500}
.product-card__foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-top:auto;padding-top:var(--s2)}
.product-card__cta{font-size:.875rem;font-weight:500;color:var(--eucalypt);border-bottom:1px solid var(--rule-strong);padding-bottom:.15rem;transition:border-color var(--dur) var(--ease)}
.product-card:hover .product-card__cta{border-bottom-color:var(--ochre)}
.product-card--feature{grid-column:1/-1;background:var(--fern-light);padding:clamp(1.5rem,3vw,3rem)}
@media (min-width:52em){
  .product-card--feature{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(2rem,4vw,4rem);align-items:center;
  }
  .product-card--feature .product-card__body{padding-top:0}
}
/* BLUSH 1 de 3 — o selo. Ink sobre Blush Light da 11.7:1, passa folgado. */
.tag{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  padding:.35rem .8rem;border-radius:var(--radius-arc);
  background:var(--blush-light);border:1px solid var(--blush);
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink);
}
.tag--clay{border-color:var(--clay);color:var(--clay)}

/* --- 14. PÁGINA DE PRODUTO ----------------------------------------------- */
.pdp{display:grid;gap:var(--s5)}
@media (min-width:62em){
  .pdp{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(3rem,5vw,6rem);align-items:start}
  .pdp__gallery{position:sticky;top:6.5rem}
}
.pdp p+p{margin-top:var(--s3)}
.pdp__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s2)}
.pdp__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s2);font-size:var(--step-2);margin-block:var(--s2)}
.pdp__price .small{color:var(--text-soft)}
.pdp__buy{margin-block:var(--s3)}
.pdp__reassure{display:flex;flex-direction:column;gap:.7rem;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule)}
.pdp__reassure li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--step--1);color:var(--text-soft)}
.pdp__reassure svg{width:1.05rem;height:1.05rem;flex:0 0 auto;margin-top:.32rem;color:var(--sage-text)}
.spec{border-top:1px solid var(--rule);padding-top:var(--s3);margin-top:var(--s4)}
.spec dt{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-text);font-weight:500}
.spec dd{margin:.4rem 0 var(--s3);font-size:var(--step--1);max-width:var(--measure)}
.spec dd:last-child{margin-bottom:0}

/* --- 15. PASSOS ---------------------------------------------------------- */
.steps{display:grid;gap:var(--s4);position:relative}
@media (min-width:52em){.steps--3{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}
.step{position:relative;padding-top:3.6rem}
.step__num{
  position:absolute;top:0;left:0;
  width:2.6rem;height:2.6rem;display:grid;place-items:center;
  border:1px solid var(--rule-strong);border-radius:var(--radius-arc);
  font-family:var(--font-display);font-size:1rem;color:var(--eucalypt);
  background:var(--bg);
}
.step h3{margin-bottom:.5rem}
.section--sand .step__num{background:var(--bg-alt)}
.steps__line{position:absolute;top:1.3rem;left:1.3rem;right:1.3rem;height:1px;background:var(--rule);display:none}
@media (min-width:52em){.steps--3 .steps__line{display:block}}
.steps__line i{display:block;height:100%;background:var(--sage);transform-origin:left;transition:transform 1.4s var(--ease-out)}
/* scaleX(0) só com JS vivo — ver a nota da seção 24 */
.js .steps__line i{transform:scaleX(0)}
.steps.is-in .steps__line i{transform:scaleX(1)}
.section--deep .step__num{background:var(--bg-deep);border-color:rgba(250,246,239,.35);color:var(--paper)}
.section--deep .steps__line{background:rgba(250,246,239,.22)}
.section--deep .steps__line i{background:var(--fern)}

/* --- 16. SELETOR INTERATIVO DE ESSÊNCIA ---------------------------------- */
.chooser{display:grid;gap:var(--s4)}
@media (min-width:62em){.chooser{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:center}}
.chooser__options{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s3)}
.chooser__opt{
  min-height:2.75rem;padding:.7rem 1.15rem;
  background:transparent;border:1px solid var(--rule-strong);border-radius:var(--radius-arc);
  font-size:.9375rem;cursor:pointer;color:var(--text);text-align:left;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.chooser__opt:hover{border-color:var(--eucalypt)}
.chooser__opt[aria-pressed="true"]{background:var(--eucalypt);border-color:var(--eucalypt);color:var(--paper)}
.chooser__result{
  position:relative;border:1px solid var(--rule);background:var(--paper);
  padding:clamp(1.5rem,3vw,3rem);display:grid;align-content:center;min-height:19rem;
}
.chooser__panel{display:none}
.chooser__panel[data-active="true"]{display:grid;gap:var(--s3);animation:fadeUp var(--dur-slow) var(--ease-out)}
@media (min-width:40em){
  .chooser__panel[data-active="true"]{grid-template-columns:13rem minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
}
/* A foto do frasco entrou em 27/ago a pedido da Dani. A ilustracao botanica
   nao sumiu: virou selo no canto da foto, que e o mesmo tratamento do
   cartao de produto. */
.chooser__shot{position:relative;border-radius:999px 999px var(--radius) var(--radius);overflow:hidden}
.chooser__art{
  position:absolute;bottom:.6rem;right:.6rem;width:3.5rem;height:3.5rem;
  color:var(--eucalypt);opacity:.4;pointer-events:none;
}
.chooser__copy{display:grid;gap:.6rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(.9rem)}to{opacity:1;transform:none}}

/* --- 17. TABELAS --------------------------------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule)}
table{border-collapse:collapse;width:100%;font-size:var(--step--1);min-width:24rem}
th,td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
thead th{
  font-family:var(--font-body);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage-text);font-weight:500;background:var(--bg-alt);
}
.table--facts th{width:38%;font-weight:500;color:var(--text-soft);text-transform:none;letter-spacing:0;font-size:var(--step--1);background:none}
.table--isnt td:first-child{color:var(--eucalypt);font-weight:500}
.table--isnt td:last-child{color:var(--text-soft)}

/* --- 18. FAQ / ACCORDION ------------------------------------------------- */
.faq{border-top:1px solid var(--rule);max-width:var(--measure-wide)}
.faq--wide{max-width:none}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:1.125rem;line-height:1.4;color:var(--text);
  min-height:3rem;transition:color var(--dur) var(--ease);
}
.faq__q:hover{color:var(--eucalypt)}
.faq__sign{position:relative;flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.3rem}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;top:50%;left:0;right:0;height:1.5px;background:var(--sage);
  transition:transform var(--dur) var(--ease);
}
.faq__sign::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__sign::after{transform:rotate(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.faq__a>div{overflow:hidden}
.faq__item[data-open="true"] .faq__a{grid-template-rows:1fr}
.faq__a .inner{padding-bottom:var(--s3);display:grid;gap:var(--s2)}
.faq__a p{color:var(--text-soft);max-width:var(--measure-wide)}

/* --- 19. PROSA ----------------------------------------------------------- */
.prose{max-width:var(--measure-wide)}
.prose>*+*{margin-top:var(--s3)}
.prose h2{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule);scroll-margin-top:6.5rem}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{margin-top:var(--s4)}
.prose ul{display:grid;gap:.75rem}
.prose ul li{position:relative;padding-left:1.5rem;max-width:var(--measure-wide)}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  border:1px solid var(--sage);border-radius:var(--radius-arc);
}
.prose ol{counter-reset:n;display:grid;gap:var(--s2)}
.prose ol li{counter-increment:n;position:relative;padding-left:2.6rem;max-width:var(--measure-wide)}
.prose ol li::before{
  content:counter(n);position:absolute;left:0;top:0;
  width:1.8rem;height:1.8rem;display:grid;place-items:center;
  border:1px solid var(--rule-strong);border-radius:var(--radius-arc);
  font-family:var(--font-display);font-size:.8125rem;color:var(--eucalypt);
}
.prose a:not(.btn):not(.arrow-link){color:var(--eucalypt);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--rule-strong)}
.prose a:not(.btn):not(.arrow-link):hover{text-decoration-color:var(--ochre)}
.prose strong{font-weight:700}
.prose hr{border:0;border-top:1px solid var(--rule);margin-block:var(--s5)}

/* bloco pensado para extração por IA */
.answer{background:var(--bg-alt);border-left:2px solid var(--ochre);padding:clamp(1.5rem,3vw,2rem)}
.answer p{max-width:none;font-size:var(--step-1);line-height:1.6}
.answer__label{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-text);font-weight:500;margin-bottom:.6rem}

.note{border:1px solid var(--rule);padding:var(--s3);font-size:var(--step--1);color:var(--text-soft)}
.note p{max-width:none}
.note strong{color:var(--text)}
.byline{font-size:var(--step--1);color:var(--text-soft);font-style:italic;border-top:1px solid var(--rule);padding-top:var(--s3)}

/* --- 20. ÍNDICE LATERAL -------------------------------------------------- */
.withtoc{display:grid;gap:var(--s5)}
.toc{display:none}
@media (min-width:66em){
  .withtoc{grid-template-columns:15rem minmax(0,1fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .toc{position:sticky;top:6.5rem;display:block}
}
.toc__title{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-text);font-weight:500;margin-bottom:var(--s2)}
.toc ol{display:grid;gap:.1rem;border-left:1px solid var(--rule)}
.toc a{
  display:block;padding:.5rem .9rem;font-size:.875rem;line-height:1.4;
  color:var(--text-soft);text-decoration:none;
  border-left:1px solid transparent;margin-left:-1px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.toc a:hover{color:var(--text)}
.toc a.is-current{color:var(--eucalypt);border-left-color:var(--ochre);font-weight:500}

.readbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:calc(var(--z-nav) + 1);pointer-events:none}
.readbar i{display:block;height:100%;background:var(--ochre);transform-origin:left;transform:scaleX(var(--p,0))}

/* --- 21. CITAÇÃO --------------------------------------------------------- */
.quote{font-family:var(--font-display);font-size:var(--step-2);line-height:1.45;max-width:32rem}
.quote__who{margin-top:var(--s2);font-family:var(--font-body);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-text)}

/* Depoimentos (11/09). Tamanhos muito diferentes — o da Cynthia tem quatro
   vezes o do Matt — entao a grade alinha pelo topo e cada um tem o seu fio
   de cima, em vez de cartao com altura forcada. */
.testimonials{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media (min-width:52em){.testimonials{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s5) clamp(2rem,4vw,4rem);align-items:start}}
.testimonial{border-top:1px solid var(--rule-strong);padding-top:var(--s3)}
.testimonial p{font-family:var(--font-display);font-size:1.25rem;line-height:1.55;color:var(--ink);max-width:none}
.testimonial figcaption{margin-top:var(--s2);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--eucalypt);font-weight:600}

/* --- 22. FORMULÁRIO ------------------------------------------------------ */
.form{max-width:34rem}
.field{display:grid;gap:.45rem;margin-bottom:var(--s3)}
.field label{font-size:.8125rem;font-weight:500;letter-spacing:.02em}
.field .hint{font-size:.8125rem;color:var(--text-soft)}
.field input,.field textarea{
  min-height:3rem;padding:.8rem 1rem;background:var(--paper);
  border:1px solid var(--rule-strong);border-radius:var(--radius);
  font-size:var(--step-0);width:100%;
  transition:border-color var(--dur) var(--ease);
}
.field textarea{min-height:9rem;resize:vertical;line-height:1.6}
.field input:hover,.field textarea:hover{border-color:var(--sage)}
.field input:focus,.field textarea:focus{border-color:var(--eucalypt)}
.field .req{color:var(--clay)}

/* --- 23. RODAPÉ ---------------------------------------------------------- */
.site-footer{background:var(--eucalypt);color:var(--paper);padding-block:clamp(3rem,6vw,4rem) var(--s4)}
.site-footer a{color:rgba(250,246,239,.82);text-decoration:none;transition:color var(--dur) var(--ease)}
.site-footer a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:.2em}
.footer__grid{display:grid;gap:var(--s4)}
@media (min-width:40em){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:66em){.footer__grid{grid-template-columns:1.5fr repeat(4,1fr);gap:var(--s5)}}
.footer__brand .brand__mark,.footer__brand .brand__name{color:var(--paper)}
/* BLUSH 3 de 3 — a assinatura "ESSENCES" no rodape */
.footer__brand .brand__sub{color:var(--blush)}
.footer__tagline{margin-top:var(--s2);font-size:var(--step--1);color:rgba(250,246,239,.72);max-width:22rem}
.footer__col h2{font-family:var(--font-body);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fern);font-weight:500;margin-bottom:var(--s2)}
.footer__col li+li{margin-top:.2rem}
/* O link do rodape media 18px de altura no celular — passa na regra de
   espacamento do WCAG 2.5.8, mas erra o toque na pratica. O padding
   vertical leva a area tocavel para ~30px sem afastar as linhas: o que
   era margem entre <li> virou padding DENTRO do link. O rodape nao
   cresceu, so ficou clicavel. */
.footer__col a{font-size:var(--step--1);display:inline-block;padding-block:.3rem}
.footer__legal{
  margin-top:clamp(2rem,5vw,3rem);padding-top:var(--s3);
  border-top:1px solid rgba(250,246,239,.2);
  font-size:.8125rem;color:rgba(250,246,239,.68);display:grid;gap:.5rem;
}
.footer__legal p{max-width:56rem;color:rgba(250,246,239,.68)}

/* --- 24. REVELAÇÃO NO SCROLL -------------------------------------------- */
/* Tudo aqui esconde conteúdo por padrão e conta com o JS para mostrar de volta.
   Por isso mora atrás de `html.js`, classe que o próprio neimiah.js coloca na
   PRIMEIRA linha que executa. Sem isso, um JS que não carrega — rede ruim,
   navegador que bloqueia script, erro em qualquer ponto do arquivo — deixaria
   19 das 20 seções da home invisíveis para sempre. Página em branco, sem erro.
   Com a classe, o pior caso vira o site inteiro visível e parado. */
/* 11/09: mais curto e mais cedo (era 640ms e 1.4rem, disparando so com 10%
   do bloco dentro da tela). Parte do "site lento" que a Diane sentiu era
   isto: o conteudo chegava rapido, mas so aparecia depois de uma animacao
   longa. Agora entra quase junto com a rolagem. */
.js [data-reveal]{
  opacity:0;transform:translateY(.6rem);
  transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}

.js .draw [data-draw]{stroke-dasharray:900;stroke-dashoffset:900}
.draw.is-in [data-draw]{animation:draw 1.9s var(--ease-out) forwards}
.draw.is-in [data-draw]:nth-of-type(2){animation-delay:.18s}
.draw.is-in [data-draw]:nth-of-type(3){animation-delay:.36s}
.draw.is-in [data-draw]:nth-of-type(4){animation-delay:.54s}
.draw.is-in [data-draw]:nth-of-type(5){animation-delay:.72s}
@keyframes draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .draw [data-draw]{stroke-dashoffset:0}
  .steps__line i{transform:scaleX(1)}
  .hero__scroll i::after{display:none}
}

/* ==========================================================================
   25. EFEITOS — técnicas portadas do catálogo 21st.dev para vanilla
   O site é HTML estático, então nada de React/Framer aqui: só o mecanismo.
   Referências consultadas em 2026-08-26:
     · "Text Reveal (Mask)" por @soralabs      → revelação de título por linha
     · "Reveal Image Mask" por @daiwiikharihar → bloom da foto no scroll
     · "Interactive Image Gallery" por @ruixen.ui → foco na grade por hover
   Regra que mandou em todas: a marca é *unhurried*. Efeito que chama atenção
   para si mesmo foi descartado (tilt com brilho, glass, flip, gradiente).
   ========================================================================== */

/* --- 25.1 Revelação de título por linha ---------------------------------
   Cada linha vive numa janela com overflow:hidden e sobe de 110% até 0.
   Easing expo-out e stagger de 80ms vêm do componente de referência.
   A classe .is-split só entra depois que o JS mediu as linhas — sem ela
   nada é escondido, então falha de JS nunca engole um título. */
.sl{
  display:block;overflow:hidden;
  /* a janela cortaria acentos e descidas do "g" sem esta folga */
  padding-bottom:.14em;margin-bottom:-.14em;
}
.sli{display:block;will-change:transform}
[data-lines].is-split .sli{
  transform:translateY(110%);
  transition:transform .6s cubic-bezier(.19,1,.22,1);
  transition-delay:var(--d,0ms);
}
[data-lines].is-split.is-in .sli{transform:none}

/* --- 25.2 Bloom da foto no scroll — DESLIGADO em 11/09 -------------------
   Era um clip-path recalculado a cada quadro de rolagem, em cada foto de arco
   visivel. clip-path com borda arredondada nao vai para a GPU: cada quadro
   repintava a foto inteira. Bonito num computador bom, travado num laptop
   comum — e a queixa foi "a velocidade podia ser melhor". O arco continua
   (border-radius + overflow); so a abertura animada saiu. */

/* --- 25.2b Deriva lenta da foto do bush ---------------------------------
   A foto anda dentro do arco enquanto a pagina rola. A escala de 1.16 existe
   so para dar folga ao deslocamento: sem ela, mover a imagem abriria faixa
   vazia em cima ou embaixo. 8% de sobra de cada lado, e o JS nunca passa
   disso. Um lugar so do site usa — movimento que aparece em tudo vira ruido. */
.arcframe--drift .arcframe__media img{
  transform:scale(1.16);
  will-change:transform;
}

/* --- 25.3 Parallax da hero ----------------------------------------------
   Vale para imagem e para vídeo. A escala extra existe só para não abrir
   faixa vazia embaixo quando a mídia sobe. */
.hero__media{will-change:transform}
/* A escala precisa cobrir o deslocamento maximo do parallax, senao abre faixa
   vazia na base. Com fator 0.08 no JS, o excesso de 9% de scale(1.18) sobra. */
.hero--parallax .hero__media{transform:scale(1.18)}
/* O placeholder e o unico filho que nao deve escalar — o texto sairia do
   quadro. Contra-escala de 1/1.18. Some junto com o placeholder. */
.hero--parallax .hero__media .ph{transform:scale(.847)}

/* --- 25.4 Foco na grade por hover ---------------------------------------
   Passar o mouse num spray recolhe os outros. Só opacidade: blur sobre
   placeholder parece defeito, e sobre foto de produto suja o detalhe. */
@media (hover:hover) and (pointer:fine){
  .product-card{transition:opacity var(--dur) var(--ease)}
  .grid--4:hover .product-card:not(:hover),
  .grid--3:hover .product-card:not(:hover){opacity:.45}
}

@media (prefers-reduced-motion:reduce){
  [data-lines].is-split .sli{transform:none !important}
  .arcframe--drift .arcframe__media img{transform:none}
  .hero--parallax .hero__media{transform:none}
  .grid--4:hover .product-card:not(:hover),
  .grid--3:hover .product-card:not(:hover){opacity:1}
}

/* --- 26. PENDÊNCIAS VISÍVEIS -------------------------------------------- */
/* Tudo que ainda falta a cliente informar aparece marcado, para não ir ao ar
   por engano. Apagar esta regra quando não restar nenhum .tbc no HTML. */
.tbc{
  background:#E9C9BE;color:var(--ink);
  padding:.05em .4em;border-bottom:1px dashed var(--clay);
  font-size:.95em;white-space:nowrap;
}
.tbc::before{content:"⌁ ";color:var(--clay)}

/* --- 27. IMPRESSÃO ------------------------------------------------------- */
@media print{
  .site-header,.mobile-nav,.hero__scroll,.btn,.toc,.readbar{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  [data-reveal]{opacity:1;transform:none}
  [data-lines].is-split .sli{transform:none !important}
  .faq__a{grid-template-rows:1fr !important}
}