/* SPELLORA · sistema de diseño (ADR-0006). Única fuente de color, letra y componentes comunes.
   Letras: Plus Jakarta Sans (interfaz) + Instrument Serif cursiva (el gesto de titular). */
:root {
  /* color */
  --noche: #0d0913;
  --noche-2: #120c1c;
  --ciruela: #1a0f2e;
  --ciruela-2: #2a1846;
  --oro: #e8c06a;
  --champan: #f5dfae;
  --lavanda: #b69bcb;
  --violeta: #7e5bd6;
  --brasa: #f2875a;
  --marfil: #f7f2ea;
  --niebla: #a69db4;
  --tenue: #8a809c; /* 5,3:1 sobre la noche (antes #6f6680, 3,6:1: no llegaba al mínimo de lectura) */
  --vidrio: rgba(255, 255, 255, 0.06);
  --vidrio-2: rgba(255, 255, 255, 0.09);
  --borde: rgba(255, 255, 255, 0.10);
  --borde-2: rgba(255, 255, 255, 0.16);
  --ok: #8fd6a8;
  --error: #ff9b8f;

  --grad-oro: linear-gradient(135deg, #f8e7c0 0%, #e8c06a 55%, #d9a94a 100%);
  --grad-violeta: linear-gradient(135deg, #b8a2f2 0%, #7e5bd6 100%);
  --grad-velo: linear-gradient(180deg, rgba(13, 9, 19, 0) 0%, rgba(13, 9, 19, .55) 55%, rgba(13, 9, 19, .96) 100%);

  /* letra */
  --fuente: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  /* compatibilidad con las hojas antiguas */
  --fuente-titulo: var(--fuente);
  --fuente-texto: var(--fuente);
  --oro-suave: var(--champan);
  --oro-claro: #f8e7c0;
  --marfil-texto: var(--marfil);

  /* forma */
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 30px;
  --sombra: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  --sombra-oro: 0 18px 40px -18px rgba(232, 192, 106, 0.55);
  color-scheme: dark;
}

html { background-color: var(--noche); -webkit-text-size-adjust: 100%; }
body { font-family: var(--fuente); }

/* Lo marcado «hidden» no se ve ni se puede pulsar aunque una hoja le dé display (p. ej. #modal con display:flex). */
[hidden]:not([hidden=until-found i]) { display: none !important; }
img { max-width: 100%; }

/* ---------- tipografía ---------- */
.serif { font-family: var(--fuente-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.oro-texto { background: var(--grad-oro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.etiqueta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--niebla); }

/* ---------- botones (píldora) ---------- */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 52px; padding: 0 1.5rem;
  border-radius: 999px; border: 1px solid transparent; font: 600 0.98rem/1 var(--fuente); letter-spacing: -0.005em;
  cursor: pointer; text-decoration: none; transition: transform .18s ease, box-shadow .25s ease, background-color .2s, opacity .2s; }
.b:active { transform: scale(0.98); }
.b:disabled, .b[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.b-oro { background: var(--grad-oro); color: #1a0f2e; box-shadow: var(--sombra-oro); }
.b-oro:hover { box-shadow: 0 22px 48px -18px rgba(232, 192, 106, 0.75); }
.b-claro { background: var(--marfil); color: #140c20; }
.b-vidrio { background: var(--vidrio-2); color: var(--marfil); border-color: var(--borde-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.b-vidrio:hover { background: rgba(255, 255, 255, 0.13); }
.b-texto { background: transparent; color: var(--niebla); min-height: 44px; }
.b-texto:hover { color: var(--marfil); }
.b-bloque { width: 100%; }
.b-flecha { width: 34px; height: 34px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(26, 15, 46, .14); margin-right: -0.9rem; }

/* ---------- superficies ---------- */
.vidrio { background: var(--vidrio); border: 1px solid var(--borde); border-radius: var(--r-m); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.foto-tarjeta { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--ciruela) center/cover no-repeat; isolation: isolate; }
.foto-tarjeta::after { content: ""; position: absolute; inset: 0; background: var(--grad-velo); z-index: -1; }
.foto-tarjeta > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

/* ---------- campos ---------- */
.campo { display: flex; align-items: center; gap: 0.7rem; min-height: 56px; padding: 0 1.1rem; border-radius: 18px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borde); transition: border-color .2s, background-color .2s; }
.campo:focus-within { border-color: rgba(232, 192, 106, 0.7); background: rgba(255, 255, 255, 0.07); }
.campo svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--niebla); }
.campo input { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; color: var(--marfil); font: 500 1rem var(--fuente); outline: none; }
.campo input::placeholder { color: var(--tenue); }
.campo.error { border-color: rgba(255, 155, 143, 0.7); }

/* ---------- chips y pestañas ---------- */
.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--borde-2);
  background: var(--vidrio); color: var(--marfil); font: 500 .88rem var(--fuente); cursor: pointer; }
.chip.on, .chip[aria-pressed="true"] { background: var(--marfil); color: #140c20; border-color: transparent; }
.segmento { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borde); }
.segmento button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--niebla); font: 600 .95rem var(--fuente); cursor: pointer; }
.segmento button.on { background: var(--marfil); color: #140c20; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); }

/* ---------- el orbe (firma de SPELLORA) ---------- */
.orbe { position: relative; width: 168px; aspect-ratio: 1; border-radius: 50%; margin-inline: auto;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 250, 238, .95) 0 6%, rgba(255, 238, 205, .55) 16%, transparent 38%),
    radial-gradient(circle at 62% 70%, rgba(126, 91, 214, .65), transparent 55%),
    radial-gradient(circle at 50% 50%, #f5dfae 0%, #e8c06a 34%, #b07fd6 70%, #3a2160 100%);
  box-shadow: 0 0 0 1px rgba(255, 240, 210, .25), 0 0 60px 6px rgba(232, 192, 106, .35), 0 0 140px 30px rgba(126, 91, 214, .35),
    inset -18px -24px 50px rgba(26, 15, 46, .55);
  animation: orbe-respira 5.5s ease-in-out infinite; }
.orbe::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1px solid rgba(245, 223, 174, .22);
  animation: orbe-gira 18s linear infinite; mask: conic-gradient(#000 0 30%, transparent 30% 55%, #000 55% 70%, transparent 70%); -webkit-mask: conic-gradient(#000 0 30%, transparent 30% 55%, #000 55% 70%, transparent 70%); }
.orbe.peque { width: 46px; }
.orbe.peque::before { display: none; }
@keyframes orbe-respira { 0%, 100% { transform: scale(1); filter: saturate(1); } 50% { transform: scale(1.04); filter: saturate(1.15); } }
@keyframes orbe-gira { to { transform: rotate(360deg); } }

/* ---------- carta del tarot (imagen RWS real) ---------- */
.carta { position: relative; width: 132px; aspect-ratio: 420 / 720; border-radius: 14px; overflow: hidden; background: #241536;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(245, 223, 174, .35); }
.carta img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- foco visible y movimiento reducido ---------- */
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* selector de idioma (portada y app) */
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--borde); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lang button { min-width: 38px; min-height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--niebla); font: 600 .74rem var(--fuente); letter-spacing: .04em; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--marfil); color: #140c20; }