/*
 * experiencia.css — Envoltorio común de las páginas de tarot gratis.
 *
 * Es SOLO el marco (fondo, barra, cabecera, pie): las cartas, la lectura y el CTA los
 * pinta `js/tiradas/mesa.js` con su propio CSS. Así una página nueva son 40 líneas de
 * HTML y ninguna de estilo.
 *
 * Mantiene exactamente la identidad ya existente —vino, dorado, crema, serif en titulares—
 * tomando los mismos valores que `index.html`. No se rediseña nada: se comparte.
 */

:root {
  --wine-950: #140309;
  --wine-900: #1d0710;
  --granate: #5E0F20;
  --rosa-osc: #A24B5A;
  --rosa-palo: #E9C3C9;
  --dorado: #C8A24B;
  --dorado-claro: #E7CE8E;
  --crema: #F4E9DD;
  --texto: var(--crema);
  --tenue: rgba(244, 233, 221, .78);
  --muy-tenue: rgba(244, 233, 221, .55);
  --linea: rgba(200, 162, 75, .26);
  --linea-fuerte: rgba(200, 162, 75, .5);
  --serif: "Playfair Display", "Bodoni 72", Didot, "Hoefler Text", Georgia, serif;
  --sans: "Poppins", "Century Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--texto);
  line-height: 1.6;
  background: #0e0207;
  -webkit-font-smoothing: antialiased;
}

/* Fondo fijo: mismo degradado que la home, sin canvas ni partículas.
   Las páginas de tirada deben abrir instantáneas desde un Reel. */
.fondo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(125% 80% at 50% -10%, #401326 0%, rgba(64, 19, 38, 0) 46%),
    radial-gradient(90% 55% at 82% 8%, rgba(162, 75, 90, .20) 0%, rgba(162, 75, 90, 0) 50%),
    linear-gradient(180deg, var(--wine-900) 0%, var(--wine-950) 58%, #0e0207 100%);
}

.env { width: min(100% - 2.2rem, var(--ancho)); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--serif); font-weight: 600; line-height: 1.1;
  letter-spacing: -.012em; text-wrap: balance; margin: 0;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--dorado); color: #241004; padding: .65rem 1.1rem;
  border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* Solo para lectores de pantalla (etiquetas de campos que se ven por su placeholder). */
.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Barra superior ───────────────────────────────────────────────────────────── */
.barra { border-bottom: 1px solid var(--linea); background: rgba(10, 2, 6, .5); position: relative; z-index: 2; }
.barra .env { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; }
.barra .marca { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--serif); font-size: 1.05rem; text-decoration: none; color: var(--crema); }
.barra .marca .luna { color: var(--dorado); }
/* El menú lo pinta js/nav.js (marcado y estilo propios, iguales en todas las páginas).
   Aquí ya no se define nada de la navegación: había una regla que en móvil apilaba la
   barra en columna y desplazaba el menú en horizontal, y chocaba con el desplegable. */

/* ── Cabecera de la experiencia ───────────────────────────────────────────────── */
.cabecera { padding: 2rem 0 .5rem; text-align: center; position: relative; z-index: 1; }
.cabecera .eyebrow {
  font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--dorado); font-weight: 600; display: block; margin-bottom: .55rem;
}
.cabecera h1 { font-size: clamp(1.7rem, 1.25rem + 2.1vw, 2.7rem); }
.cabecera .firma { font-family: "Sacramento", cursive; color: var(--dorado-claro); font-size: 1.5rem; line-height: 1; margin-top: .5rem; }

main { padding-bottom: 3rem; position: relative; z-index: 1; }

.orn { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--linea-fuerte); font-size: .8rem; margin: 1.6rem 0; }
.orn::before, .orn::after { content: ""; height: 1px; width: min(28vw, 120px); background: linear-gradient(90deg, transparent, var(--linea-fuerte)); }
.orn::after { background: linear-gradient(90deg, var(--linea-fuerte), transparent); }

/* ── Otras experiencias (navegación cruzada al pie de cada tirada) ─────────────── */
.otras { margin-top: 2.6rem; }
.otras h2 { font-size: 1.15rem; text-align: center; color: var(--dorado-claro); margin-bottom: 1rem; }
.otras-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; max-width: 720px; margin-inline: auto; }
.otras-lista a {
  display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem;
  border: 1px solid var(--linea); border-radius: 12px; text-decoration: none;
  background: rgba(20, 3, 9, .4); color: var(--crema); font-size: .9rem;
  transition: border-color .2s, transform .2s;
}
.otras-lista a:hover { border-color: var(--dorado); transform: translateY(-2px); }
.otras-lista .ico { font-size: 1.2rem; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .otras-lista a:hover { transform: none; } }