/* ANAUÊ v3: réplica fiel do PDF "NOVO SITE ANAUE CONCEITO PAULO MARTINS".
   Desktop: cada .tela é uma tela do PDF (1440x810). Coordenadas em "u" = 1px da tela do PDF.
   Uso: <div class="abs" style="--x:85;--y:120;--w:500;--h:300">  font: style="--fs:64" */
:root {
  --marfim: #FCF8F1; --marfim-2: #FDF6E7; --branco: #FEFDF9; --travertino: #F3E0CA;
  --bege: #ECE4DA; --fio: #E0C4A2; --caramelo: #C68D51; --dourado: #A8743E;
  --terroso: #7F4D22; --ferrugem: #8A3D12; --tinta: #151513; --preto: #000;
  --f-titulo: "Newsreader", "Bodoni Moda", Georgia, serif;
  --f-texto: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-optima: "Tenor Sans", Optima, "Figtree", sans-serif;
  --f-cursiva: "Caveat", cursive;
  --nav-h: 64;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (min-width: 900px) { html { scroll-snap-type: y proximity; } }
body { margin: 0; background: var(--marfim); color: var(--tinta); font: 400 16px/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

/* ---------- tela ---------- */
.tela { container-type: inline-size; position: relative; background: var(--marfim); scroll-snap-align: start; overflow: hidden; }
.tela__in { position: relative; width: 100cqw; height: calc(100cqw * 810 / 1440); --u: calc(100cqw / 1440); }
.abs { position: absolute; left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); width: calc(var(--w) * var(--u)); }
.abs[style*="--h"] { height: calc(var(--h) * var(--u)); }
.abs > img, .cover { width: 100%; height: 100%; object-fit: cover; }
img.abs { object-fit: cover; }
.contain, img.abs.contain { object-fit: contain; }
[style*="--fs"] { font-size: calc(var(--fs) * var(--u)); }

/* tipografia */
.serif { font-family: var(--f-titulo); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; }
.caps { text-transform: uppercase; }
.optima { font-family: var(--f-optima); font-weight: 400; line-height: 1.08; }
.sans { font-family: var(--f-texto); }
.eyebrow { font-family: var(--f-texto); font-weight: 600; text-transform: uppercase; letter-spacing: .28em; color: var(--terroso); line-height: 1.2; }
.eyebrow--preto { color: var(--tinta); }
.corpo { font-family: var(--f-texto); line-height: 1.45; }
.legal { font-family: var(--f-texto); color: #6b6158; letter-spacing: .02em; }
.fio { display: block; height: 1px; background: var(--caramelo); }
.fio--cinza { background: #d9cfc3; }

/* botões (tamanhos em u) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; font-family: var(--f-texto); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; text-decoration: none; cursor: pointer; border: 1px solid var(--preto); transition: background .2s, color .2s; white-space: nowrap; }
.btn--cheio { background: var(--preto); color: #fff; }
.btn--cheio:hover { background: #2a2622; }
.btn--contorno { background: transparent; color: var(--tinta); }
.btn--contorno:hover { background: var(--preto); color: #fff; }
.btn--pilula { border-radius: 999px; }
.link-seta { font-family: var(--f-texto); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; text-decoration: none; color: var(--tinta); border-bottom: 1px solid currentColor; padding-bottom: .35em; display: inline-flex; gap: .6em; }
.bandeiras { pointer-events: none; }

/* ---------- nav fixa ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; container-type: inline-size; }
.nav__bar { --u: calc(100cqw / 1440); height: calc(var(--nav-h) * var(--u)); background: rgba(252, 248, 241, .94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,.06); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav__lado { display: flex; gap: calc(60 * var(--u)); }
.nav__lado--esq { justify-content: flex-end; padding-right: calc(80 * var(--u)); }
.nav__lado--dir { justify-content: flex-start; padding-left: calc(80 * var(--u)); }
.nav__item { font: 500 calc(12.5 * var(--u))/1 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--tinta); padding: calc(8 * var(--u)) 0; border-bottom: 1px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.nav__item:hover, .nav__item[aria-expanded="true"] { border-bottom-color: var(--ferrugem); }
.nav__logo img { width: calc(150 * var(--u)); height: calc(35 * var(--u)); object-fit: cover; }
.nav__burger { display: none; }

/* mega menu (tela p18) */
.mega { position: absolute; left: 0; right: 0; top: 100%; --u: calc(100cqw / 1440); background: var(--marfim-2); box-shadow: 0 20px 40px rgba(60,40,20,.12); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.mega.aberto { opacity: 1; visibility: visible; transform: none; }
.mega__in { position: relative; height: calc(258 * var(--u)); }

/* ---------- age gate (tela p01) ---------- */
.gate { position: fixed; inset: 0; z-index: 100; background: var(--marfim-2); overflow: auto; container-type: inline-size; }
.gate[hidden] { display: none; }
.gate .tela__in { min-height: 100vh; }
.gate__campo { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); }
.gate__campo input { width: 100%; height: calc(26 * var(--u)); border: 1px solid #cdbfae; background: transparent; text-align: center; font-size: calc(10 * var(--u)); letter-spacing: .1em; }
.gate__campo input::placeholder { color: #9a8f84; }
.gate__erro { color: var(--ferrugem); font-size: calc(10 * var(--u)); min-height: 1.3em; }
.selo18 { display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; border: 1px solid var(--terroso); border-radius: 50%; color: var(--terroso); font-weight: 600; }

/* ---------- modal de cadastro (tela p21) ---------- */
dialog.cad { padding: 0; border: 0; width: min(1100px, 94vw); max-height: 94vh; background: var(--marfim); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
dialog.cad::backdrop { background: rgba(30, 22, 14, .55); }

/* ---------- mobile ---------- */
@media (max-width: 899px) {
  .tela { padding: 72px 20px 44px; }
  .tela__in { height: auto; width: auto; --u: 1px; display: flex; flex-direction: column; gap: 14px; }
  .abs { position: relative; left: auto; top: auto; width: auto; height: auto !important; }
  .abs.m-full { margin-left: -20px; margin-right: -20px; }
  .abs > img, img.abs { height: auto; aspect-ratio: var(--w) / var(--h); }
  [style*="--fs"] { font-size: max(14px, calc(var(--fs) * .5px + 6px)); }
  .m-hide { display: none !important; }
  .btn { align-self: flex-start; padding: 14px 22px !important; font-size: 12px !important; }
  .nav__bar { --u: 1px; height: 58px; grid-template-columns: 48px 1fr 48px; }
  .nav__lado { display: none; }
  .nav__logo { justify-self: center; }
  .nav__logo img { width: 92px; height: 21px; }
  .nav__burger { display: grid; place-items: center; width: 48px; height: 48px; background: none; border: 0; grid-column: 3; }
  .nav.aberta .nav__lado { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; background: var(--marfim); padding: 12px 24px; gap: 4px; }
  .nav.aberta .nav__lado--esq { top: 58px; align-items: flex-start; }
  .nav.aberta .nav__lado--dir { top: calc(58px + 92px); align-items: flex-start; border-bottom: 1px solid var(--fio); }
  .nav.aberta .nav__item { font-size: 13px; padding: 12px 0; }
  .mega { display: none; }
  .gate .tela__in { min-height: 0; }
  .gate__campo input { height: 46px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }