/* ═══════════════════════════════════════════════════════════════════════
   SANA VITA · PORTAL DEL MIEMBRO — TOKENS + PRIMITIVAS CINEMATOGRÁFICAS
   v1.0 · sirve a /assets/css/portal-tokens.css
   Codifica el "mismo aire" de _DESIGN_SYSTEM.md como CSS reutilizable.
   Adoptar en: mi-dia · mi-sendero · mi-club · mi-programa · mis-hacks · mi-historia
   CSP: style-src 'self' 'unsafe-inline' → <link rel=stylesheet> no requiere nonce.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── COLOR · navy / dorado / acentos ── */
  --bg:          #05060F;   /* el vacío que da peso */
  --bg2:         #070A18;   /* capa intermedia */
  --bg3:         #0B1024;   /* superficie elevada */
  --ink:         #F2ECDB;   /* texto principal */
  --ink-soft:    #C7BFA9;   /* texto secundario */
  --ink-mute:    #8A8FA8;   /* metadatos */

  --gold:        #C9A84C;   /* autoridad */
  --gold-bright: #E6CF8C;   /* calidez / énfasis */
  --gold-deep:   #9A7B33;   /* borde / separación */
  /* alias cortos usados por algunas páginas existentes */
  --gold-b:      var(--gold-bright);
  --gold-d:      var(--gold-deep);

  --teal:        #4ECDC4;   /* Guerrero · acción */
  --teal-soft:   rgba(78,205,196,.15);
  --teal-line:   rgba(78,205,196,.30);
  --rose:        #E8A4C0;   /* Diosa · flujo */
  --rose-soft:   rgba(232,164,192,.15);
  --rose-line:   rgba(232,164,192,.30);
  --lila:        #B8A4E8;   /* frecuencias · lo sutil */
  --lila-s:      rgba(184,164,232,.15);
  --lila-l:      rgba(184,164,232,.32);

  --line:        rgba(201,168,76,.15);   /* bordes / separadores */
  --line-strong: rgba(201,168,76,.30);
  --surf:        rgba(11,16,36,.92);

  /* Superficie de card canónica — gradiente con dirección intencional */
  --surf-card:   linear-gradient(160deg, rgba(11,16,36,.94), rgba(7,9,24,.97));
  --surf-card-hi:linear-gradient(160deg, rgba(13,18,40,.97), rgba(8,11,28,.99));

  /* Avatar — sobreescrito por JS (setAvatar). NO renombrar estas vars. */
  --avatar-accent:      var(--gold);
  --avatar-accent-soft: rgba(201,168,76,.15);
  --avatar-accent-line: rgba(201,168,76,.28);

  /* ── TIPO · escala fluida con clamp() (paso ≈1.25) ── */
  --font-head: 'Cinzel', Georgia, serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-ui:   'Raleway', system-ui, sans-serif;

  --text-eyebrow: clamp(.56rem, .52rem + .18vw, .64rem);
  --text-label:   clamp(.62rem, .58rem + .2vw,  .72rem);
  --text-body:    clamp(1rem,   .94rem + .4vw,  1.16rem);
  --text-lead:    clamp(1.12rem, 1rem + .8vw,   1.42rem);
  --text-h3:      clamp(1.1rem,  .94rem + 1vw,  1.5rem);
  --text-h2:      clamp(1.5rem,  1.2rem + 1.8vw, 2.4rem);
  --text-hero:    clamp(2.7rem,  1.1rem + 7.4vw, 5.4rem);
  --text-data:    clamp(2.8rem,  1.2rem + 7vw,  4rem);   /* el dato dominante */

  /* ── RITMO · espacio no uniforme ── */
  --space-section: clamp(40px, 5vw + 1rem, 88px);
  --space-block:   clamp(24px, 3vw + .5rem, 52px);
  --space-card:    clamp(20px, 2.6vw + .4rem, 32px);
  --gutter:        clamp(20px, 6vw, 60px);
  --wrap-max:      980px;

  /* ── MOTION ── */
  --ease:   cubic-bezier(.16, 1, .3, 1);     /* expo-out */
  --ease-b: cubic-bezier(.34, 1.56, .64, 1); /* leve overshoot */
  --dur-fast:   220ms;
  --dur-hover:  280ms;
  --dur-reveal: 900ms;
  --dur-ignite: 1600ms;

  /* ── PROFUNDIDAD · sombras tintadas (nunca negro puro plano) ── */
  --shadow-card:  0 12px 40px -16px rgba(0,0,0,.6);
  --shadow-lift:  0 22px 56px -20px rgba(201,168,76,.26), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-cta:   0 8px 30px -8px rgba(201,168,76,.5);
  --shadow-cta-h: 0 16px 44px -10px rgba(201,168,76,.72);

  /* Viñeta cinematográfica — centro respira, bordes anclan */
  --veil: radial-gradient(135% 105% at 50% 44%, transparent 30%, rgba(5,6,15,.74) 82%, rgba(7,9,20,.96) 100%);
}

/* ═══════ RESET COMPARTIDO ═══════ */
.sv-portal *,
.sv-portal *::before,
.sv-portal *::after { box-sizing: border-box; }

/* ═══════ ATMÓSFERA · capas z fijas (z0 fondo → z2 grano) ═══════ */
.sv-atmos {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80% 50% at 20% 18%, rgba(201,168,76,.045) 0%, transparent 60%),
    radial-gradient(60% 60% at 82% 82%, rgba(184,164,232,.045) 0%, transparent 60%),
    var(--veil),
    var(--bg);
}
/* Flor de la vida — atmósfera más poderosa, mix-blend screen */
.sv-flor {
  position: fixed; z-index: 1; pointer-events: none;
  top: -14%; left: 50%;
  width: min(120vw, 1100px); aspect-ratio: 1;
  transform: translateX(-50%);
  background: center / contain no-repeat;
  opacity: 0; mix-blend-mode: screen;
  transition: opacity 2.2s var(--ease);
  will-change: opacity;
}
.sv-flor.lit { opacity: .14; }
.sv-grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: .42; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/></svg>");
}

/* ═══════ SUPERFICIE CARD CANÓNICA ═══════ */
.sv-surface {
  background: var(--surf-card);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              transform var(--dur-fast) var(--ease);
}
/* top-line dorada atmosférica */
.sv-surface::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--avatar-accent-soft) 50%, transparent);
  transition: background .35s var(--ease);
}
/* sheen sweep en hover */
.sv-surface::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(230,207,140,.055) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform .55s var(--ease);
}
.sv-surface:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}
.sv-surface:hover::before { background: linear-gradient(90deg, transparent, rgba(201,168,76,.42) 50%, transparent); }
.sv-surface:hover::after  { transform: translateX(110%); }

/* ═══════ EYEBROW EDITORIAL (línea + texto + cola) ═══════ */
.sv-eyebrow {
  font-family: var(--font-head); font-size: var(--text-eyebrow); font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 12px;
}
.sv-eyebrow::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); flex: none; }
.sv-eyebrow::after  { content: ""; flex: 1; max-width: 70px; height: 1px; background: linear-gradient(90deg, rgba(201,168,76,.26), transparent); }

/* ═══════ CTA PRINCIPAL DORADO ═══════ */
.sv-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: var(--text-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #07091A; background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: none; padding: 14px 24px; cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: filter var(--dur-fast), transform .18s var(--ease), box-shadow var(--dur-fast);
}
.sv-cta:hover  { filter: brightness(1.08); transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-cta-h); }
.sv-cta:active { transform: translateY(0) scale(.996); transition-duration: 80ms; }
.sv-cta:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ═══════ FOCO VISIBLE — nunca outline:none sin reemplazo ═══════ */
.sv-portal :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ═══════ REVEAL AL ENTRAR ═══════ */
.sv-rv { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-reveal) var(--ease), transform 1s var(--ease); }
.sv-rv.in { opacity: 1; transform: none; }

/* ═══════ MOVIMIENTO REDUCIDO — respetado en TODA animación ═══════ */
@media (prefers-reduced-motion: reduce) {
  .sv-portal *,
  .sv-portal *::before,
  .sv-portal *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .sv-rv { opacity: 1 !important; transform: none !important; }
  .sv-flor { transition: none !important; }
}