/* ============================================================================
   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 estável por
   faixa de tela: o conteúdo cresce em degraus previsíveis, sem títulos que tomam
   a página inteira em monitores largos. 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: #636363;           /* 5.46:1 sobre #F4F4F3 - 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: degraus estáveis, nunca proporcional ao viewport */
  --t-mega: 58px;
  --t-d1: 52px;
  --t-d2: 40px;
  --t-d3: 32px;
  --t-d4: 27px;
  --t-d45: 25px;
  --t-d5: 21px;
  --t-corpo: 16px;
  --t-peq: 14px;
  --t-mini: 12px;
  --t-label: 11px;
  --t-micro: 10.5px;

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

@media (min-width: 750px) {
  :root {
    --t-mega: 96px;
    --t-d1: 74px;
    --t-d2: 54px;
    --t-d3: 42px;
    --t-d4: 34px;
    --t-d45: 31px;
    --t-d5: 24px;
    --t-corpo: 17px;
    --t-peq: 15px;
    --t-mini: 13px;
    --t-label: 11.5px;
    --t-micro: 11px;
  }
}

@media (min-width: 1280px) {
  :root {
    --t-mega: 112px;
    --t-d1: 86px;
    --t-d2: 60px;
    --t-d3: 46px;
    --t-d4: 36px;
    --t-d45: 33px;
    --t-d5: 25px;
    --t-corpo: 18px;
    --t-peq: 16px;
    --t-mini: 13px;
    --t-label: 12px;
    --t-micro: 11px;
  }
}

*, *::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 desenho natural da fonte */
.d {
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0;
  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.14; letter-spacing: 0; }

/* 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; }
.marca-nome { font-family: 'Hanken Grotesk', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: 0; }
.busca-link { font-size: var(--t-label); }
.busca-catalogo { margin-bottom: var(--e6); max-width: 620px; }
.busca-catalogo input { width: 100%; min-height: 44px; }
@media (max-width: 500px) {
  .hdr .hdr-acts { gap: 8px; }
  .hdr .busca-link { display: none; }
  .marca-nome { font-size: 22px; }
}
@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; min-width: 44px; min-height: 44px;
  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; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; 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; 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: repeat(2, minmax(0, 1fr));
  gap: var(--e10) var(--e3);
}
@media (min-width: 750px)  { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e12) var(--e6); } }
@media (min-width: 1024px) { .grade { gap: var(--e16) var(--e8); } }
.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(--e3); min-height: 38px;
}
.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: 5 / 6; 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(--e4) var(--e3);
  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(--e3); min-height: 2.28em; }
.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);
}

@media (max-width: 500px) {
  .item { padding-top: var(--e2); }
  .item-topo { min-height: 22px; }
  .item-meta { display: none; }
  .palco { margin-top: var(--e2); }
  .palco img { padding: var(--e3) var(--e2); }
  .item-notas { gap: 5px; }
  .nota-chip { padding: 2px 5px; }
  .item-pe { align-items: flex-end; }
}
.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; }

.qtd { display: inline-flex; align-items: center; border: 1px solid var(--lv-regua-forte); }
.qtd button { width: 44px; height: 44px; 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; }

.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,46:1 sobre o papel, mas so 4,31: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; 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; 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; }
}