/*
 * Palafé — página previa a la apertura (palafe.com). Estática, sin JavaScript, sin cookies.
 * Toma la identidad de docs/launch/primera-visita (tokens de packages/ui): grafito con sesgo azul, luz fría,
 * latón. Si la marca cambia allí, se cambia aquí.
 */

@font-face { font-family: Archivo; src: url('fuentes/archivo-latin-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fuentes/plex-mono-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fuentes/plex-mono-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --ink-950: #080a10; --ink-900: #0d1017; --ink-850: #12161f; --ink-800: #181d28; --ink-700: #2a3140;
  --ink-600: #364052; --ink-400: #6e7891; --ink-300: #8b94a7; --ink-200: #bfc6d3; --ink-050: #eef1f5;
  --volt-200: #d6ecff; --volt-400: #8fcbff; --volt-500: #5cb3ff;
  --brass-200: #f3e2b8; --brass-400: #e2c078; --brass-500: #c9a254; --brass-700: #8a6a2e;

  --texto: var(--ink-050); --texto-2: var(--ink-200); --texto-3: var(--ink-300);
  --papel-1: #1c2029; --papel-2: #161a22;
  --laton: linear-gradient(135deg, var(--brass-200), var(--brass-400) 38%, var(--brass-500) 64%, var(--brass-700));
  --font: Archivo, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  color-scheme: dark;
  font-family: var(--font);
  color: var(--texto);
  background: var(--ink-950);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  line-height: 1.55;
  min-height: 100vh;
  background:
    radial-gradient(44rem 34rem at 88% 10rem, rgba(226, 192, 120, .08), transparent 70%),
    radial-gradient(40rem 30rem at -6% 60%, rgba(92, 179, 255, .06), transparent 70%),
    linear-gradient(180deg, #0b0e15, var(--ink-950) 38rem);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url('grano.svg');
  opacity: .6;
}
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 650; font-stretch: 115%; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
p { max-width: 60ch; }
a { color: var(--volt-400); text-underline-offset: .22em; }
a:hover { text-decoration-thickness: .12em; }
:focus-visible { outline: 3px solid var(--volt-400); outline-offset: 3px; border-radius: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1; font-stretch: 100%; }
.envoltura { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.saltar { position: absolute; left: 1rem; top: -5rem; z-index: 5; padding: .75rem 1rem; background: var(--ink-800); color: var(--texto); }
.saltar:focus { top: 1rem; }

/* ── Cabecera ── */
.cabecera { display: flex; align-items: center; justify-content: space-between; padding-block: 1.5rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--texto); text-decoration: none; font-weight: 700; font-stretch: 125%; letter-spacing: .08em; }
.marca img { width: 1.75rem; height: 1.75rem; }
.estado {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid rgba(226, 192, 120, .35);
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--brass-200);
  background: rgba(226, 192, 120, .06);
}
.punto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brass-400); box-shadow: 0 0 0 4px rgba(226, 192, 120, .15); }

/* ── Portada ── */
.portada { padding-block: clamp(3rem, 9vw, 6.5rem) 3rem; }
.rotulo { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
h1 { margin-top: 1rem; font-size: clamp(2.4rem, 6.4vw, 4.6rem); max-width: 16ch; }
h1 em {
  font-style: normal;
  background: var(--laton);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.entrada { margin-top: 1.5rem; font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--texto-2); }
.entrada strong { color: var(--texto); }

.aviso {
  margin-top: 2.25rem; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: start;
  max-width: 44rem; padding: 1rem 1.25rem;
  border-left: 3px solid var(--brass-400);
  background: linear-gradient(90deg, rgba(226, 192, 120, .09), rgba(226, 192, 120, 0));
  border-radius: 0 .5rem .5rem 0;
}
.aviso-rotulo { font-size: .75rem; font-weight: 500; letter-spacing: .16em; color: var(--brass-400); padding-top: .2rem; }
.aviso p:last-child { color: var(--texto-2); }
.aviso strong { color: var(--texto); }

/* ── El recibo: tres pasos en papel grafito con borde dentado ── */
.recibo { padding-block: 2rem 4rem; }
.hoja {
  --diente: .7rem;
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(160deg, var(--papel-1), var(--papel-2));
  border-radius: .75rem .75rem 0 0;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-mask: radial-gradient(var(--diente) at 50% 100%, transparent 98%, #000) 50% 100% / calc(var(--diente) * 2.2) 100% repeat-x;
          mask: radial-gradient(var(--diente) at 50% 100%, transparent 98%, #000) 50% 100% / calc(var(--diente) * 2.2) 100% repeat-x;
  padding-bottom: calc(clamp(1.5rem, 4vw, 2.5rem) + var(--diente));
}
.hoja-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px dashed rgba(191, 198, 211, .22); }
.hoja-cabeza h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.folio { font-size: .75rem; letter-spacing: .12em; color: var(--texto-3); }
.pasos { display: grid; gap: 0; }
.paso { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding-block: 1.4rem; border-bottom: 1px dashed rgba(191, 198, 211, .14); }
.paso:last-child { border-bottom: 0; }
.numero {
  font-size: 1.05rem; font-weight: 500; letter-spacing: .06em;
  background: var(--laton); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.paso h3 { font-size: 1.2rem; }
.paso p { margin-top: .35rem; color: var(--texto-2); }

/* ── Las tres nunca ── */
.nunca { padding-block: 1rem 4rem; }
.nunca h2, .contacto h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
.nunca h2 em { font-style: normal; color: var(--brass-400); }
.lista-nunca { margin-top: 1.75rem; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.lista-nunca li {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.1rem 1.2rem; border-radius: .6rem;
  background: rgba(24, 29, 40, .7); border: 1px solid rgba(191, 198, 211, .1);
  color: var(--texto-2); font-weight: 500;
}
.sello {
  flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem; border-radius: 50%;
  border: 2px solid var(--brass-500);
  background: radial-gradient(circle at 50% 50%, transparent 46%, rgba(226, 192, 120, .25) 48%, transparent 64%);
  position: relative;
}
.sello::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; margin-top: -1px; background: var(--brass-400); transform: rotate(-45deg); }
.oficial { margin-top: 1.5rem; color: var(--texto-2); }
.oficial strong { color: var(--volt-200); font-weight: 500; }

/* ── Contacto ── */
.contacto { padding-block: 1rem 4rem; }
.datos { margin-top: 1.5rem; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.datos div { padding: 1rem 1.2rem; border-radius: .6rem; border: 1px solid rgba(191, 198, 211, .1); background: rgba(18, 22, 31, .6); }
.datos dt { font-size: .8125rem; color: var(--texto-3); }
.datos dd { margin-top: .3rem; word-break: break-all; }
.privacidad { margin-top: 1.25rem; font-size: .9rem; color: var(--texto-3); }

/* ── Pie ── */
.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 2rem 3rem; border-top: 1px solid rgba(191, 198, 211, .1); font-size: .875rem; color: var(--texto-3); }

@media (prefers-reduced-motion: no-preference) {
  .portada > * { animation: subir .8s cubic-bezier(.16, 1, .3, 1) both; }
  .portada > :nth-child(2) { animation-delay: .06s; }
  .portada > :nth-child(3) { animation-delay: .12s; }
  .portada > :nth-child(4) { animation-delay: .18s; }
}
@keyframes subir { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }