/* ============================================================================
   LOVIA Perfumes Árabes — folha de estilo única do site

   Sistema claro editorial: papel off-white em gradiente monocromático, tinta
   #121212, sem cor de acento na interface (o dourado da casa vive na fotografia
   do frasco). Raio 0. Base de espaçamento de 5px. Escala tipográfica fluida em
   vw, com piso calibrado para o mobile e teto para monitor grande — a rampa de
   baixo escala junto com o display, senão em tela grande o título cresce e o
   preço não. Newsreader (display serif) + Hanken Grotesk (rótulos e corpo).

   O estilo exclusivo de cada página vive na própria página, num <style> local.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,200;6..72,300;6..72,400;6..72,500&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* --- cor ------------------------------------------------------------- */
  --lv-papel: linear-gradient(178deg, #F7F7F6 0%, #F2F2F1 100%);
  --lv-papel-liso: #F4F4F3;      /* onde não cabe gradiente (borda, sombra) */
  --lv-tinta: #121212;
  --lv-tinta-2: #3A3A3A;
  --lv-cinza: #6B6B6B;           /* 5.4:1 sobre o papel — AA em texto normal */
  --lv-regua: rgba(18, 18, 18, 0.16);
  --lv-regua-forte: rgba(18, 18, 18, 0.42);
  --lv-noir: #0D0D0F;
  --lv-noir-2: #17171A;
  --lv-marfim: #F7F3EC;
  --lv-areia: #E0DACD;           /* o único calor do sistema, no statement */

  /* --- ritmo: todo espaçamento é múltiplo de 5px ------------------------ */
  --e1: 5px;   --e2: 10px;  --e3: 15px;  --e4: 20px;  --e5: 25px;
  --e6: 30px;  --e8: 40px;  --e10: 50px; --e12: 60px; --e16: 80px;
  --e20: 100px; --e24: 120px; --e32: 160px;

  /* --- escala tipográfica fluida em vw, com piso e teto ----------------- */
  --t-mega: clamp(56px, 13.87vw, 210px);   /* 13.87vw */
  --t-d1:   clamp(44px, 10vw, 150px);      /* 10vw    */
  --t-d2:   clamp(34px, 5.625vw, 86px);    /* 5.625vw */
  --t-d3:   clamp(27px, 4.167vw, 62px);    /* 4.167vw */
  --t-d4:   clamp(22px, 3.75vw, 46px);     /* 3.75vw  */
  --t-d45:  clamp(22px, 3.4vw, 42px);      /* o vao entre d4 e d5 */
  --t-d5:   clamp(19px, 1.875vw, 28px);    /* 1.875vw */
  /* A rampa DE BAIXO também é fluida, e por um motivo prático: um e-commerce
     tem preço, filtro, ficha técnica e nota olfativa para ler. Com teto fixo, em
     monitor grande o display escala com vw e o texto pequeno fica travado — dava
     150px de título contra 9px de meta a 2560px. Piso calibrado para o mobile,
     teto para 2560+. */
  --t-corpo: clamp(16px, 1.20vw, 21px);    /* era clamp(14px, 1.125vw, 17px) */
  --t-peq:  clamp(14px, 1.02vw, 17.5px);   /* era 13px fixo */
  --t-mini: clamp(12px, 0.88vw, 15px);     /* era 11px fixo */
  --t-label: clamp(11px, 0.80vw, 14px);    /* era 10px fixo */
  --t-micro: clamp(10.5px, 0.72vw, 13px);  /* substitui os 27 "9px" literais */

  --lv-mola: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lv-borda-max: 1600px;
}

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

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

body.loja {
  margin: 0;
  background: var(--lv-papel);
  background-attachment: fixed;
  color: var(--lv-tinta);
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: var(--t-corpo);
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.loja img { max-width: 100%; display: block; }
.loja a { color: inherit; text-decoration: none; }
.loja button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.loja input, .loja select, .loja textarea { font: inherit; color: inherit; }
.loja :focus-visible { outline: 2px solid var(--lv-tinta); outline-offset: 3px; }
.loja ul { list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------- tipografia */

.d, .serif { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; }

/* display: leve e contrastado, com tracking negativo */
.d {
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0;
}
.d-mega { font-size: var(--t-mega); }
.d1 { font-size: var(--t-d1); }
.d2 { font-size: var(--t-d2); }
.d3 { font-size: var(--t-d3); line-height: 1.02; }
.d4 { font-size: var(--t-d4); line-height: 1.06; }
.d5 { font-size: var(--t-d5); line-height: 1.12; letter-spacing: -0.01em; }

/* label: uppercase com tracking largo — o outro polo do sistema */
.label {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4;
  color: var(--lv-cinza);
}
.label-tinta { color: var(--lv-tinta); font-weight: 600; }

.p  { font-size: var(--t-corpo); line-height: 1.5; margin: 0; }
.p-peq { font-size: var(--t-peq); line-height: 1.55; margin: 0; }
.p-mudo { color: var(--lv-cinza); }
.medida { max-width: 46ch; }        /* coluna curta: linha confortável de ler */

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--lv-borda-max);
  margin: 0 auto;
  padding: 0 var(--e5);
}
@media (min-width: 750px)  { .wrap { padding: 0 var(--e10); } }
@media (min-width: 1280px) { .wrap { padding: 0 var(--e16); } }

.sec { padding: var(--e16) 0; }
@media (min-width: 750px) { .sec { padding: var(--e24) 0; } }
.sec-curta { padding: var(--e12) 0; }

.regua { height: 1px; background: var(--lv-regua-forte); border: 0; margin: 0; }
.regua-fina { height: 1px; background: var(--lv-regua); border: 0; margin: 0; }

/* duas colunas assimétricas, a segunda deslocada para baixo */
.duas-col { display: grid; gap: var(--e8); }
@media (min-width: 750px) {
  .duas-col { grid-template-columns: 1fr 1fr; gap: var(--e12); }
  .duas-col-desloca { grid-template-columns: 1fr 1fr; }
  .duas-col-desloca > :last-child { padding-top: var(--e16); }
}

.sec-topo {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--e4);
  padding-bottom: var(--e4);
}

/* --------------------------------------------------------------- header */

.hdr {
  position: sticky; top: 0; z-index: 80;
  background: rgba(244, 244, 243, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .5s ease, background .5s ease;
}
.hdr.rolado { border-bottom-color: var(--lv-regua); }
.hdr-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); min-height: 74px;
}
.marca img { width: 118px; height: auto; }
@media (min-width: 750px) { .marca img { width: 132px; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--e6); }
}
/* nav numerada — "01. INÍCIO" — com a régua que cresce no hover */
.nav a {
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; color: var(--lv-tinta); position: relative; padding-bottom: 3px;
}
.nav a .n { color: var(--lv-cinza); margin-right: 5px; }
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--lv-tinta); transition: width .5s var(--lv-mola);
}
.nav a:hover::after, .nav a.on::after { width: 100%; }
.nav a.on .n { color: var(--lv-tinta); }

.hdr-acts { display: flex; align-items: center; gap: var(--e4); }

.sacola-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500;
}
.sacola-n {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lv-tinta); color: var(--lv-marfim);
  font-size: var(--t-label); letter-spacing: 0; font-weight: 600;
}
.sacola-n[hidden] { display: none; }

/* --------------------------------------------------------- som ambiente

   Quatro barras que só se movem quando o som está ligado — o estado é visível
   sem depender de cor. Desligado, ficam paradas e baixas: um ícone quieto. */

.som {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; color: var(--lv-cinza); padding: 4px 0;
  transition: color .5s ease;
}
.som:hover, .som.on { color: var(--lv-tinta); }
.som[hidden] { display: none; }
.som-ondas { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.som-ondas i {
  width: 2px; height: 3px; background: currentColor; display: block;
  transition: height .4s var(--lv-mola);
}
.som.on .som-ondas i { animation: som-pulsa 1.9s ease-in-out infinite; }
.som.on .som-ondas i:nth-child(2) { animation-delay: .35s; }
.som.on .som-ondas i:nth-child(3) { animation-delay: .7s; }
.som.on .som-ondas i:nth-child(4) { animation-delay: .18s; }
@keyframes som-pulsa {
  0%, 100% { height: 3px; }
  50%      { height: 12px; }
}
/* o rótulo é dispensável no aperto do mobile; o ícone e o aria-label bastam */
@media (max-width: 500px) { .som-rotulo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .som.on .som-ondas i { animation: none; height: 8px; }
}

.burger { display: inline-flex; padding: 6px; margin-right: -6px; }
@media (min-width: 1024px) { .burger { display: none; } }
.burger svg { width: 22px; height: 22px; }

.menu-mob {
  display: none; border-top: 1px solid var(--lv-regua);
  padding: var(--e5) 0 var(--e8);
}
.menu-mob.aberto { display: block; }
@media (min-width: 1024px) { .menu-mob, .menu-mob.aberto { display: none; } }
.menu-mob a {
  display: block; padding: var(--e3) 0;
  font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: 28px; letter-spacing: -0.01em; line-height: 1.2;
  border-bottom: 1px solid var(--lv-regua);
}
.menu-mob a .n {
  font-family: 'Hanken Grotesk', sans-serif; font-size: var(--t-label);
  letter-spacing: 0.16em; color: var(--lv-cinza); margin-right: var(--e2);
  vertical-align: middle;
}

/* o seletor precisa do `a`: `.loja a { color: inherit }` tem especificidade
   maior que `.pular` e pintava o link de tinta preta sobre o fundo preto dele
   mesmo — 1:1 de contraste no PRIMEIRO elemento tabulável de toda página. Pelo
   mesmo motivo o outline tem de ser marfim aqui: o global é preto. */
.loja a.pular {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lv-tinta); color: var(--lv-marfim);
  padding: 12px 22px; font-size: var(--t-mini); letter-spacing: 0.16em;
  text-transform: uppercase;
}
.loja a.pular:focus-visible { left: 0; outline-color: var(--lv-marfim); }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- botões: a elipse */

/* a assinatura visual do sistema: o rótulo dentro de uma elipse desenhada,
   que gira devagar no hover em vez de mudar de cor */
.elipse {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; padding: var(--e3) var(--e8);
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--lv-tinta); background: none;
}
.elipse svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.elipse ellipse {
  fill: none; stroke: currentColor; stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: transform .8s var(--lv-mola), opacity .5s ease;
  transform-origin: 50% 50%;
}
.elipse:hover ellipse { transform: rotate(-7deg) scale(1.04); }
.elipse[disabled] { opacity: .4; pointer-events: none; }
.elipse-grande { padding: var(--e5) var(--e12); font-size: var(--t-mini); }

/* sólido: só onde a ação é a principal da tela (comprar, finalizar) */
.btn-solido {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: var(--e4) var(--e8); background: var(--lv-tinta); color: var(--lv-marfim);
  font-size: var(--t-mini); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; border: 1px solid var(--lv-tinta);
  transition: background .5s ease, color .5s ease;
}
.btn-solido:hover { background: transparent; color: var(--lv-tinta); }
.btn-solido[disabled] { opacity: .35; pointer-events: none; }

/* linha: o link com seta e régua que corre */
.btn-linha {
  display: inline-flex; align-items: center; gap: var(--e3);
  font-size: var(--t-mini); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--lv-regua-forte);
  transition: border-color .5s ease, gap .5s var(--lv-mola);
}
.btn-linha:hover { border-color: var(--lv-tinta); gap: var(--e5); }
.btn-linha svg { width: 26px; height: 8px; flex: none; }

/* -------------------------------------------------------------- hero */

.hero { padding: var(--e16) 0 var(--e12); }
@media (min-width: 750px) { .hero { padding: var(--e24) 0 var(--e16); } }
.hero-titulo { max-width: 15ch; }
.hero-sub { margin-top: var(--e8); max-width: 44ch; color: var(--lv-tinta-2); }
.hero-acoes { margin-top: var(--e8); display: flex; flex-wrap: wrap; gap: var(--e5); align-items: center; }

/* --------------------------------------------- item de catálogo (o "work") */

/* régua no topo, título à esquerda, meta à direita, mídia abaixo — o padrão
   sem moldura e sem raio — quem separa um item do outro é a régua */
.grade {
  display: grid; grid-template-columns: 1fr; gap: var(--e12) var(--e10);
}
@media (min-width: 501px)  { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade { grid-template-columns: repeat(3, 1fr); gap: var(--e16) var(--e10); } }
.grade-2 { grid-template-columns: 1fr; }
@media (min-width: 750px) { .grade-2 { grid-template-columns: repeat(2, 1fr); gap: var(--e16) var(--e12); } }
/* desnível vertical alternado: quebra a leitura em fileiras rígidas */
@media (min-width: 750px) { .grade-2 > :nth-child(even) { margin-top: var(--e16); } }

.item { display: block; padding-top: var(--e3); border-top: 1px solid var(--lv-tinta); }
.item-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); min-height: 30px;
}
.item-marca {
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
}
.item-meta {
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  text-align: right; color: var(--lv-cinza); max-width: 55%; line-height: 1.5;
}

/* palco: o frasco flutua no papel. As derivadas têm ponto branco puro, então
   multiply apaga o fundo do JPG sem recorte — o mesmo truque da versão noir,
   que aqui cai ainda melhor porque o palco já é claro */
.palco {
  position: relative; margin-top: var(--e4);
  aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(170deg, #FAFAF9, #EFEFEE);
}
.palco img {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%; object-fit: contain;
  padding: var(--e6) var(--e5);
  mix-blend-mode: multiply;
  transition: transform 1.8s var(--lv-mola);
}
.item:hover .palco img { transform: scale(1.045); }
.palco-alto { aspect-ratio: 3 / 4; }

.selo {
  position: absolute; top: var(--e3); left: var(--e3); z-index: 2;
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; padding: 4px 8px; background: var(--lv-tinta);
  color: var(--lv-marfim);
}
.selo-vazio { background: none; color: var(--lv-cinza); border: 1px solid var(--lv-regua-forte); }

.item-nome { margin-top: var(--e4); }
.item-notas {
  margin-top: var(--e2); display: flex; flex-wrap: wrap; gap: var(--e2);
}
.nota-chip {
  font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lv-cinza); padding: 3px 8px; border: 1px solid var(--lv-regua);
}
.item-pe {
  margin-top: var(--e3); padding-top: var(--e2);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); border-top: 1px solid var(--lv-regua);
}
.item-preco { font-size: var(--t-peq); font-weight: 600; letter-spacing: 0.02em; }
.item-preco-mudo { color: var(--lv-cinza); font-weight: 400; text-transform: uppercase;
  font-size: var(--t-micro); letter-spacing: 0.14em; }
.item-ver {
  font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lv-cinza); transition: color .5s ease;
}
.item:hover .item-ver { color: var(--lv-tinta); }

/* destaque: o item que ocupa a largura toda, com a mídia ao lado */
.destaque { border-top: 1px solid var(--lv-tinta); padding-top: var(--e4); }
@media (min-width: 750px) {
  .destaque-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e12); align-items: center; }
  .destaque .palco { aspect-ratio: 1 / 1; margin-top: 0; }
}
.destaque-texto > * + * { margin-top: var(--e4); }

/* ------------------------------------------------------- filtros (catálogo) */

.filtros { display: grid; gap: var(--e5); }
@media (min-width: 750px) { .filtros { grid-template-columns: repeat(4, 1fr); gap: var(--e8); } }
.campo { display: block; }
.campo > .label { display: block; margin-bottom: var(--e2); }
.campo select, .campo input[type="search"], .campo input[type="text"] {
  width: 100%; padding: var(--e2) 0 var(--e2);
  background: none; border: 0; border-bottom: 1px solid var(--lv-regua-forte);
  font-size: var(--t-peq); letter-spacing: 0.02em;
  border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color .5s ease;
}
.campo select { background-image: none; padding-right: var(--e5); }
.campo select:focus, .campo input:focus { outline: none; border-bottom-color: var(--lv-tinta); }
.campo-seta { position: relative; }
.campo-seta::after {
  content: ''; position: absolute; right: 2px; bottom: 12px; width: 7px; height: 7px;
  border-right: 1px solid var(--lv-tinta); border-bottom: 1px solid var(--lv-tinta);
  transform: rotate(45deg); pointer-events: none;
}

.fichas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ficha {
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--lv-regua-forte);
  transition: background .5s ease, color .5s ease, border-color .5s ease;
}
.ficha:hover { border-color: var(--lv-tinta); }
/* o reset `.loja button { border: 0 }` tem especificidade maior que .ficha */
.loja button.ficha { border: 1px solid var(--lv-regua-forte); }
.loja button.ficha:hover { border-color: var(--lv-tinta); }
.loja button.ficha.on { border-color: var(--lv-tinta); }
.ficha.on { background: var(--lv-tinta); color: var(--lv-marfim); border-color: var(--lv-tinta); }

.contagem { font-size: var(--t-mini); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lv-cinza); }

/* ---------------------------------------------------------- ficha do produto */

.ficha-produto { display: grid; gap: var(--e10); }
@media (min-width: 1024px) {
  .ficha-produto { grid-template-columns: 1.05fr 1fr; gap: var(--e16); align-items: start; }
  .ficha-galeria { position: sticky; top: 104px; }
}
.galeria-palco {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(170deg, #FAFAF9, #EEEEED);
}
.galeria-palco img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: var(--e10); mix-blend-mode: multiply;
}
.galeria-minis { margin-top: var(--e3); display: flex; flex-wrap: wrap; gap: var(--e2); }
.mini {
  width: 64px; height: 74px; padding: 4px; border: 1px solid transparent;
  background: linear-gradient(170deg, #FAFAF9, #EFEFEE);
  transition: border-color .5s ease;
}
.mini img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mini.on { border-color: var(--lv-tinta); }
.mini:hover { border-color: var(--lv-regua-forte); }

.compra { margin-top: var(--e8); padding-top: var(--e5); border-top: 1px solid var(--lv-tinta); }
.compra-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e5); margin-top: var(--e5); }
.preco-grande { font-size: var(--t-d5); font-weight: 500; letter-spacing: -0.01em; }

.qtd { display: inline-flex; align-items: center; border: 1px solid var(--lv-regua-forte); }
.qtd button { width: 38px; height: 38px; font-size: 15px; line-height: 1; }
.qtd button:hover { background: rgba(18,18,18,.05); }
.qtd input {
  width: 44px; height: 38px; text-align: center; border: 0;
  background: none; font-size: var(--t-peq); font-weight: 600;
  -moz-appearance: textfield;
}
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* pirâmide olfativa: três degraus com régua, no ritmo de 5px */
.piramide { margin-top: var(--e10); }
.piramide-degrau { padding: var(--e4) 0; border-top: 1px solid var(--lv-regua); display: grid; gap: var(--e2); }
@media (min-width: 501px) { .piramide-degrau { grid-template-columns: 130px 1fr; gap: var(--e5); align-items: baseline; } }
.piramide-notas { font-size: var(--t-peq); line-height: 1.6; color: var(--lv-tinta-2); }

.dados { margin-top: var(--e8); }
.dado {
  display: flex; justify-content: space-between; gap: var(--e4);
  padding: var(--e3) 0; border-top: 1px solid var(--lv-regua);
  font-size: var(--t-peq);
}
.dado dt { color: var(--lv-cinza); text-transform: uppercase; font-size: var(--t-micro);
  letter-spacing: 0.14em; padding-top: 3px; }
.dado dd { margin: 0; text-align: right; }

/* --------------------------------------------------------- sacola / pedido */

.linha-item {
  display: grid; grid-template-columns: 76px 1fr; gap: var(--e4);
  padding: var(--e5) 0; border-top: 1px solid var(--lv-regua);
  align-items: start;
}
@media (min-width: 750px) {
  .linha-item { grid-template-columns: 92px 1fr auto auto; gap: var(--e6); align-items: center; }
}
.linha-foto {
  aspect-ratio: 3 / 4; background: linear-gradient(170deg, #FAFAF9, #EFEFEE);
  position: relative; overflow: hidden;
}
.linha-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 6px; mix-blend-mode: multiply;
}
.linha-acoes { display: flex; align-items: center; gap: var(--e4); }
.remover {
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lv-cinza); border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .5s ease, border-color .5s ease;
}
.remover:hover { color: var(--lv-tinta); border-bottom-color: var(--lv-tinta); }

.resumo { border-top: 1px solid var(--lv-tinta); padding-top: var(--e5); }
.resumo-linha {
  display: flex; justify-content: space-between; gap: var(--e4);
  padding: var(--e2) 0; font-size: var(--t-peq);
}
.resumo-linha .label { color: var(--lv-cinza); }
.resumo-total {
  margin-top: var(--e3); padding-top: var(--e4); border-top: 1px solid var(--lv-regua-forte);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4);
}
.resumo-total b { font-size: var(--t-d5); font-weight: 500; letter-spacing: -0.01em; }

.vazio { padding: var(--e20) 0; text-align: center; }
.vazio .d3 { margin-bottom: var(--e5); }

/* ------------------------------------------------------------- formulário */

.form-grade { display: grid; gap: var(--e8) var(--e10); }
@media (min-width: 750px) { .form-grade { grid-template-columns: 1fr 1fr; } }
.form-largo { grid-column: 1 / -1; }
.campo-linha { display: block; }
.campo-linha .label { display: block; margin-bottom: var(--e2); }
.campo-linha input, .campo-linha select, .campo-linha textarea {
  width: 100%; padding: var(--e2) 0 var(--e3); background: none;
  border: 0; border-bottom: 1px solid var(--lv-regua-forte);
  font-size: var(--t-peq); border-radius: 0;
  transition: border-color .5s ease;
}
.campo-linha input:focus, .campo-linha select:focus, .campo-linha textarea:focus {
  outline: none; border-bottom-color: var(--lv-tinta);
}
.campo-linha input::placeholder, .campo-linha textarea::placeholder { color: #A8A8A8; }

/* --------------------------------------------------- statement / areia */

/* o único calor do sistema: um sopro de areia atrás da frase */
.statement {
  position: relative; text-align: center;
  padding: var(--e24) 0 var(--e32);
  /* o calor tem de morrer ANTES da borda da seção: com o centro na borda, o
     corte do gradiente vira uma faixa dura contra o rodapé */
  background: radial-gradient(92% 72% at 50% 86%,
              var(--lv-areia) 0%, rgba(224,218,205,0.34) 46%, rgba(224,218,205,0) 78%);
  /* o rodapé encosta no statement: a respiração já está no padding daqui */
  margin-bottom: calc(-1 * var(--e16));
}
/* o --lv-cinza rende 5,4:1 sobre o papel, mas so 3,83:1 sobre a areia do
   gradiente: sobre este fundo o rotulo sobe para a tinta secundaria (8,2:1) */
.statement .label { margin-bottom: var(--e5); color: var(--lv-tinta-2); }
.statement .d2 { max-width: 20ch; margin: 0 auto; }

/* --------------------------------------------------------- depoimentos */

.depos { display: grid; gap: var(--e8); }
@media (min-width: 750px) { .depos { grid-template-columns: 90px 1fr; gap: var(--e12); } }
.depo-num {
  display: flex; gap: var(--e4); font-family: 'Newsreader', Georgia, serif;
  font-size: var(--t-d4); font-weight: 200; color: var(--lv-cinza);
}
@media (min-width: 750px) {
  .depo-num { flex-direction: column; gap: var(--e2); border-left: 1px solid var(--lv-regua); padding-left: var(--e5); }
}
.depo-num button { font: inherit; color: inherit; line-height: 1; transition: color .5s ease; }
.depo-num button.on { color: var(--lv-tinta); }
.depo-corpo { min-height: 190px; }
.depo-texto { font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: var(--t-d4); line-height: 1.18; letter-spacing: -0.01em; max-width: 22ch; }
.depo-quem { margin-top: var(--e5); }

/* --------------------------------------------------------------- rodapé */

.rodape {
  background: linear-gradient(180deg, var(--lv-noir-2) 0%, var(--lv-noir) 100%);
  color: var(--lv-marfim);
  padding: var(--e16) 0 var(--e8);
  margin-top: var(--e16);
}
.rodape .label { color: rgba(247, 243, 236, 0.55); }
.rodape a { color: rgba(247, 243, 236, 0.86); transition: color .5s ease; }
.rodape a:hover { color: var(--lv-marfim); }
.rodape-topo { display: grid; gap: var(--e10); }
@media (min-width: 750px) { .rodape-topo { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--e12); } }
.rodape-lista { margin-top: var(--e4); display: grid; gap: var(--e2); }
.rodape-lista a, .rodape-lista span {
  font-size: var(--t-mini); letter-spacing: 0.14em; text-transform: uppercase;
}
.rodape-lista span { color: rgba(247, 243, 236, 0.55); }  /* 0.42 dava 3,81:1 */
.rodape-frase { margin-top: var(--e4); color: rgba(247, 243, 236, 0.68); max-width: 40ch; }

/* o display gigante do rodapé, com a régua embaixo */
.rodape-assinatura { margin-top: var(--e20); }
.rodape-assinatura .d1 { display: inline-block; padding-bottom: var(--e4); }
.rodape-assinatura .regua { background: rgba(247, 243, 236, 0.30); }
.rodape-base {
  margin-top: var(--e5); display: flex; flex-wrap: wrap; gap: var(--e4);
  justify-content: space-between;
}
.rodape-base .label { color: rgba(247, 243, 236, 0.55); }  /* idem */
.rodape .elipse { color: var(--lv-marfim); }
.rodape .btn-linha { border-bottom-color: rgba(247, 243, 236, 0.32); }
.rodape .btn-linha:hover { border-bottom-color: var(--lv-marfim); }

.aviso-precos {
  margin-top: var(--e5); font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(247, 243, 236, 0.55);
}

/* ------------------------------------------------------- avisos e estados */

.aviso-demo {
  border: 1px solid var(--lv-regua-forte); padding: var(--e4) var(--e5);
  font-size: var(--t-peq); line-height: 1.6; margin-bottom: var(--e8);
  background: rgba(224, 218, 205, 0.28);
}
.erro-carga {
  border: 1px solid var(--lv-tinta); padding: var(--e5);
  margin: var(--e8) 0; font-size: var(--t-peq); line-height: 1.6;
}

/* ------------------------------------------------------------- painel adm */

.metricas { display: grid; gap: var(--e5); }
@media (min-width: 501px) { .metricas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .metricas { grid-template-columns: repeat(4, 1fr); } }
.metrica { border-top: 1px solid var(--lv-tinta); padding-top: var(--e3); }
.metrica-n { font-family: 'Newsreader', Georgia, serif; font-weight: 300;
  font-size: var(--t-d3); line-height: 1; letter-spacing: -0.02em; margin-top: var(--e2); }

.tabela-rolo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-peq); min-width: 620px; }
table.tabela th {
  text-align: left; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--lv-cinza); padding: var(--e2) var(--e3) var(--e2) 0;
  border-bottom: 1px solid var(--lv-tinta);
}
table.tabela td { padding: var(--e3) var(--e3) var(--e3) 0; border-bottom: 1px solid var(--lv-regua); }
table.tabela td.dir, table.tabela th.dir { text-align: right; padding-right: 0; }

/* ------------------------------------------------------------- reveal */

/* a entrada do conteúdo: a linha sobe de dentro de uma máscara.
   Sem JS ou com movimento reduzido, tudo nasce visível — nunca em branco. */
/* display:block é requisito, não estilo: em <span> inline o overflow:hidden é
   ignorado e a máscara não mascara nada. E como o display roda com line-height
   0.94, a caixa corta o ç de "herança" e a perna do g — daí o padding embaixo,
   devolvido por uma margem negativa de igual valor para não mexer no ritmo. */
.revela {
  display: block; overflow: hidden;
  /* a folga tem de existir NOS DOIS lados: com line-height 0.94 a caixa da linha
     é menor que o glifo, então embaixo ela come o ç e a perna do g, e em cima
     achata o overshoot do O e corta o pingo do i (eram 7px em 200px). A folga
     de cima é maior porque precisa caber maiúscula acentuada — Á, Ê, Ó sobem bem
     acima da altura das maiúsculas, e isto aqui é um site em português. */
  padding-top: 0.22em; margin-top: -0.22em;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.revela > .revela-in {
  display: block;
  transform: translateY(118%);   /* 105% deixava um fiapo dentro do padding */
  transition: transform 1.1s var(--lv-mola);
}
.revela.vista > .revela-in { transform: translateY(0); }
.sobe { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s var(--lv-mola); }
.sobe.vista { opacity: 1; transform: none; }
.sobe-2 { transition-delay: .1s; }
.sobe-3 { transition-delay: .2s; }
.sobe-4 { transition-delay: .3s; }

html.sem-js .revela > .revela-in, .revela.pronta > .revela-in { transform: none; }
html.sem-js .sobe { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .loja *, .loja *::before, .loja *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .revela > .revela-in { transform: none; }
  .sobe { opacity: 1; transform: none; }
  .palco img, .item:hover .palco img { transform: none; }
}

/* -------------------------------------------------------------- impressão */

@media print {
  .hdr, .rodape, .burger, .menu-mob { display: none; }
  body.loja { background: #fff; }
}