/* ============================================================================
   BASE — reglas del mundo: reset, tipografía, materiales y los efectos
   globales (grano, cursor de luz, chispas, avisos).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img, canvas, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Nada se ensancha más que la pantalla: basta una palabra larga para romper
   un layout flex y sacar scroll horizontal en el móvil. */
:where(main, section, div, span, p, h1, h2, h3, button, label, li) { min-width: 0; }
:where(p, span, h1, h2, h3, li, .txt) { overflow-wrap: anywhere; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--abismo);
  color: var(--mist);
  font-family: var(--display);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

/* Los campos por debajo de 16 px hacen que Safari haga zoom al tocarlos y
   luego se quede torcido. */
input, textarea, select { font-size: max(16px, 1rem); }

body { overflow-x: hidden; }
body.con-hoja { overflow: hidden; }

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
a { color: var(--gold); text-underline-offset: 3px; }

::selection { background: rgba(233,199,132,.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── El cielo y el grano ─────────────────────────────────────────────────── */

#cielo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: radial-gradient(130% 90% at 50% 12%, #16122B 0%, #0A0814 55%, #05040B 100%);
}

/* Si no hay WebGL, el degradado se queda quieto pero con dos velos de color
   que se cruzan muy despacio: sigue estando vivo. */
.cielo-plano #cielo::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(45% 30% at 28% 32%, rgba(110,75,245,.30), transparent 70%),
    radial-gradient(40% 26% at 74% 62%, rgba(44,199,192,.22), transparent 70%),
    radial-gradient(36% 24% at 50% 88%, rgba(242,120,155,.18), transparent 70%);
  animation: velos 46s ease-in-out infinite alternate;
}
@keyframes velos {
  from { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.15); }
}

/* Grano de película: quita el aspecto de degradado digital y le da piel. */
#grano {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter>\
<rect width='100%' height='100%' filter='url(%23r)' opacity='.55'/></svg>");
  animation: granear 7s steps(6) infinite;
}
@keyframes granear {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(1%, -2%); }
  60%  { transform: translate(-1%, -1%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ── Materiales ──────────────────────────────────────────────────────────── */

.tarjeta {
  position: relative;
  background: var(--cristal);
  border: var(--cristal-borde);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-media);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  overflow: hidden;
  isolation: isolate;
}

/* Filo de luz arriba: el canto de una hoja de papel caro. */
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,226,190,.55), transparent);
  opacity: .8;
}

/* Brillo especular que sigue al puntero (lo alimenta data-inclina). */
.tarjeta[data-inclina] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: box-shadow var(--d-md) var(--ease-out);
  will-change: transform;
}
.tarjeta[data-inclina]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--brillo-x, 50%) var(--brillo-y, 0%),
              rgba(244,226,190,.16), transparent 55%);
  opacity: 0;
  transition: opacity var(--d-md) var(--ease-out);
}
.tarjeta[data-inclina].inclinada { box-shadow: var(--sombra-alta), var(--halo-oro); }
.tarjeta[data-inclina].inclinada::after { opacity: 1; }

/* ── Tipografía de la casa ───────────────────────────────────────────────── */

.display  { font-family: var(--display); font-style: italic; line-height: 1.04; }
.mano     { font-family: var(--mano); }
.rotulo {
  font-family: var(--util);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mist-faint);
}
.tenue { color: var(--mist-dim); }

/* Texto de oro líquido: el degradado se mueve lentísimo. */
.oro {
  background: linear-gradient(100deg, var(--gold-deep), var(--gold-soft) 35%, var(--gold) 55%, var(--gold-deep));
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: oro-corre 9s linear infinite;
}
@keyframes oro-corre { to { background-position: 260% 0; } }

/* ── Botones ─────────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px 20px;
  min-height: 46px;
  border: 1px solid rgba(233,199,132,.28);
  border-radius: var(--r-full);
  background: linear-gradient(180deg, rgba(34,29,60,.9), rgba(18,16,31,.9));
  color: var(--gold-soft);
  font-family: var(--util);
  font-size: var(--t-sm);
  letter-spacing: .04em;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--d-sm) var(--ease-back),
              border-color var(--d-sm), box-shadow var(--d-sm);
}
.btn:hover { border-color: rgba(233,199,132,.6); box-shadow: var(--halo-oro); }
.btn:active { transform: scale(.96); }

/* Barrido de luz al pasar por encima. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(244,226,190,.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--d-lg) var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

.btn.fantasma { background: transparent; border-color: rgba(214,207,228,.18); color: var(--mist); }
.btn.oro-solido {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
  color: #1A1206;
  border-color: transparent;
  font-weight: 600;
}

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5;
       stroke-linecap: round; stroke-linejoin: round; }

/* ── Aparecer al desplazar ───────────────────────────────────────────────── */

[data-revela] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(7px);
  transition: opacity var(--d-lg) var(--ease-out),
              transform var(--d-lg) var(--ease-out),
              filter var(--d-lg) var(--ease-out);
}
[data-revela].revelado { opacity: 1; transform: none; filter: blur(0); }

/* ── Cursor de luz (escritorio) ──────────────────────────────────────────── */

.cursor-luz {
  position: fixed;
  left: 0; top: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(233,199,132,.5);
  box-shadow: 0 0 22px rgba(233,199,132,.3), inset 0 0 12px rgba(233,199,132,.14);
  pointer-events: none;
  z-index: 9999;
  transition: width var(--d-sm) var(--ease-back), height var(--d-sm) var(--ease-back),
              border-color var(--d-sm), opacity var(--d-sm);
  mix-blend-mode: screen;
}
.cursor-luz.activo {
  width: 52px; height: 52px;
  border-color: rgba(242,120,155,.55);
  box-shadow: 0 0 34px rgba(242,120,155,.35);
}

/* ── Chispas ─────────────────────────────────────────────────────────────── */

.chispas { position: fixed; z-index: 9998; pointer-events: none; }
.chispas i {
  position: absolute;
  border-radius: 50%;
  background: rgb(var(--c));
  box-shadow: 0 0 8px rgb(var(--c));
  transform: translate(-50%, -50%);
}

/* ── Avisos ──────────────────────────────────────────────────────────────── */

#avisos {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--safe-b) + 18px);
  transform: translateX(-50%);
  z-index: 9000;
  display: grid;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}
.aviso {
  padding: 11px 18px;
  border-radius: var(--r-full);
  background: rgba(26,23,48,.92);
  border: 1px solid rgba(233,199,132,.22);
  backdrop-filter: var(--blur);
  box-shadow: var(--sombra-media);
  font-family: var(--util);
  font-size: var(--t-sm);
  text-align: center;
  color: var(--mist);
}
.aviso.oro { border-color: rgba(233,199,132,.5); color: var(--gold-soft); }
.aviso.rosa { border-color: rgba(242,120,155,.45); color: #FBD3DA; }

/* ── Estados globales ────────────────────────────────────────────────────── */

.sin-red #cabecera::after {
  content: "sin conexión · se guardará";
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rose);
}

.oculto { display: none !important; }