/* ============================================================
   ui.css · sistema de diseño compartido de "Manu & Rocío"
   ------------------------------------------------------------
   Tokens (tipografía, color, líneas, sombras, movimiento) y unas
   pocas primitivas con todos sus estados. Cada página conserva su
   propia ESCENA (fondo, ambientación, acento) redefiniendo en su
   :root --accent-rgb / --accent-hi / --bg-* ; todo lo demás se
   hereda de aquí para que el sitio se sienta una sola pieza.

   Reglas de oro
   · Nada de `transition: all` ni curvas lineales: usa los --ease-*.
   · Hover 150–200 ms · pulsación 80–120 ms · paneles 250–400 ms.
   · Bordes translúcidos (--line-*), sombras multicapa (--shadow-*).
   · Todo lo interactivo: hover · active (scale .98) · focus-visible · disabled.
   · Mínimo 12 px de texto; contraste AA (ver --ink-*).
   ============================================================ */

:root {
    color-scheme: dark;

    /* ── Tipografía ─────────────────────────────────────────── */
    --font-ui: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-script: 'Great Vibes', 'Snell Roundhand', cursive;

    --fs-label: 0.75rem;                                   /* 12px · suelo absoluto */
    --fs-xs: 0.8125rem;                                    /* 13px */
    --fs-sm: 0.875rem;                                     /* 14px */
    --fs-base: 1rem;                                       /* 16px */
    --fs-md: 1.125rem;                                     /* 18px */
    --fs-lg: 1.375rem;                                     /* 22px */
    --fs-xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
    --fs-2xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    --fs-3xl: clamp(3rem, 1.6rem + 6vw, 6rem);

    --tr-tight: -0.02em;                                   /* titulares grandes */
    --tr-snug: -0.01em;                                    /* titulares medianos */
    --tr-label: 0.12em;                                    /* etiquetas en mayúsculas */
    --tr-caps: 0.16em;                                     /* tope: nunca más de esto en micro-etiquetas */

    --lh-tight: 1.08;
    --lh-snug: 1.25;
    --lh-body: 1.65;
    --lh-prose: 1.75;

    /* ── Color · neutros cálidos (todos AA sobre --bg-0…--bg-3) ── */
    --bg-0: #09050a;
    --bg-1: #120a0e;
    --bg-2: #1b1217;
    --bg-3: #241920;

    --ink-1: #f6ece4;                                      /* texto principal   · 15–17 : 1 */
    --ink-2: #d2c5bd;                                      /* texto secundario  · 10–12 : 1 */
    --ink-3: #a99c94;                                      /* texto terciario   ·  6–7  : 1 */
    --ink-4: #8f827b;                                      /* el más tenue AA   · 4.6–5.4 : 1 (no bajar de aquí para texto) */

    --gold-300: #f0d58b;
    --gold-400: #dcbc66;                                   /* texto dorado sobre oscuro · 10–11 : 1 */
    --gold-500: #c9a84c;                                   /* iconos, líneas, rellenos */
    --gold-600: #9a7f35;                                   /* solo decorativo */
    --wine-400: #e8695b;                                   /* texto rojo suave sobre oscuro · 5.3–6.4 : 1 */
    --wine-500: #c0392b;                                   /* corazones, rellenos */
    --rose-400: #f09ab0;
    --danger: #ff8f80;
    --success: #8fd3a4;

    /* ── Acento de la escena (cada página lo redefine) ── */
    --accent-rgb: 201 168 76;                              /* canales separados por espacios → rgb(var(--accent-rgb) / .2) */
    --accent: rgb(var(--accent-rgb));
    --accent-hi: #f0d58b;                                  /* hover / texto sobre oscuro con acento */
    --accent-ink: #1a1306;                                 /* texto sobre relleno sólido de acento */

    /* ── Líneas translúcidas y superficies ── */
    --line-1: rgb(255 255 255 / 0.08);
    --line-2: rgb(255 255 255 / 0.14);
    --line-3: rgb(255 255 255 / 0.22);
    --line-accent: rgb(var(--accent-rgb) / 0.24);
    --line-accent-hi: rgb(var(--accent-rgb) / 0.5);
    --surface-1: rgb(255 255 255 / 0.035);
    --surface-2: rgb(255 255 255 / 0.06);
    --highlight: inset 0 1px 0 rgb(255 255 255 / 0.07);    /* luz directa en el borde superior */

    /* ── Radios ── */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* ── Sombras multicapa: luz ambiente + luz directa ── */
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 1px rgb(0 0 0 / 0.22), 0 2px 6px rgb(0 0 0 / 0.26);
    --shadow-md: 0 1px 1px rgb(0 0 0 / 0.2), 0 4px 10px rgb(0 0 0 / 0.24), 0 16px 32px -8px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 2px 2px rgb(0 0 0 / 0.18), 0 8px 18px rgb(0 0 0 / 0.26), 0 32px 64px -16px rgb(0 0 0 / 0.65);
    --glow: 0 0 0 1px rgb(var(--accent-rgb) / 0.28), 0 12px 40px -12px rgb(var(--accent-rgb) / 0.32);

    /* ── Movimiento ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);             /* entradas y hovers: arranque vivo, aterrizaje suave */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);         /* movimientos que van y vuelven */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);      /* rebote corto: pops, iconos, soltar un botón */
    --dur-press: 120ms;
    --dur-hover: 180ms;
    --dur-base: 250ms;
    --dur-panel: 350ms;
    --dur-enter: 650ms;
    --dur-scene: 1000ms;                                    /* solo transiciones cinemáticas de escena */

    --focus: var(--accent-hi);
}

/* ── Base ─────────────────────────────────────────────────── */
:where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--accent-rgb) / 0.35) transparent;
}

:where(body) {
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4) {
    letter-spacing: var(--tr-snug);
    text-wrap: balance;
}

:where(p, li, blockquote, figcaption) {
    text-wrap: pretty;
}

::selection {
    background: rgb(var(--accent-rgb) / 0.35);
    color: var(--ink-1);
}

:where(a, button, input, select, textarea, summary, [role='button'], label[for]) {
    -webkit-tap-highlight-color: transparent;
}

:where(a, button, summary, [role='button'], label[for]) {
    touch-action: manipulation;
}

/* Foco accesible: aparece con teclado, no con ratón/táctil.
   Especificidad baja a propósito: una página puede afinarlo, pero nunca quitarlo sin sustituirlo. */
:where(a, button, input, select, textarea, summary, [role='button'], [tabindex]):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

:where(a, button, input, select, textarea, summary, [role='button'], [tabindex]):focus:not(:focus-visible) {
    outline: none;
}

/* Números que cambian (contadores, temporizadores): sin que "baile" el ancho */
.ui-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* ── Etiqueta / eyebrow ───────────────────────────────────── */
.ui-label {
    font: 500 var(--fs-label) / 1.3 var(--font-ui);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ── Superficie (tarjeta de cristal oscuro) ───────────────── */
.ui-surface {
    position: relative;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.02));
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: var(--highlight), var(--shadow-md);
}

/* ── Separador de filo con degradado ──────────────────────── */
.ui-rule {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--line-accent-hi), transparent);
}

/* ── Botón de referencia: todos sus estados ───────────────── */
.ui-btn {
    --_bg: var(--surface-1);
    --_bd: var(--line-accent);
    --_fg: var(--ink-1);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 44px;
    padding: 0.75em 1.35em;
    font: 500 var(--fs-sm) / 1 var(--font-ui);
    letter-spacing: 0.01em;
    color: var(--_fg);
    background-color: var(--_bg);
    border: 1px solid var(--_bd);
    border-radius: var(--r-md);
    box-shadow: var(--highlight), var(--shadow-sm);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    transition:
        transform var(--dur-press) var(--ease-out),
        background-color var(--dur-hover) var(--ease-out),
        border-color var(--dur-hover) var(--ease-out),
        color var(--dur-hover) var(--ease-out),
        box-shadow var(--dur-hover) var(--ease-out);
}

@media (hover: hover) {
    .ui-btn:hover:not(:disabled, [aria-disabled='true']) {
        --_bg: rgb(var(--accent-rgb) / 0.1);
        --_bd: var(--line-accent-hi);
        --_fg: var(--accent-hi);
        box-shadow: var(--highlight), var(--shadow-md);
    }
}

.ui-btn:active:not(:disabled, [aria-disabled='true']) {
    transform: scale(0.98);
    transition-duration: 80ms;
}

.ui-btn:disabled,
.ui-btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.ui-btn--primary {
    --_bg: var(--accent);
    --_bd: transparent;
    --_fg: var(--accent-ink);
    font-weight: 600;
}

@media (hover: hover) {
    .ui-btn--primary:hover:not(:disabled, [aria-disabled='true']) {
        --_bg: var(--accent-hi);
        --_bd: transparent;
        --_fg: var(--accent-ink);
        box-shadow: var(--highlight), var(--shadow-md), var(--glow);
    }
}

.ui-btn--ghost {
    --_bg: transparent;
    --_bd: var(--line-2);
    box-shadow: none;
}

/* Estado de carga: sustituye al spinner genérico por un barrido de luz */
.ui-btn.is-loading {
    pointer-events: none;
    color: transparent;
    overflow: hidden;
}

.ui-btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgb(var(--accent-rgb) / 0.22) 50%, transparent 80%);
    background-size: 220% 100%;
    animation: ui-shimmer 1.2s var(--ease-in-out) infinite;
}

/* ── Skeleton ─────────────────────────────────────────────── */
.ui-skeleton {
    border-radius: var(--r-sm);
    background: linear-gradient(100deg, rgb(255 255 255 / 0.035) 30%, rgb(255 255 255 / 0.09) 50%, rgb(255 255 255 / 0.035) 70%);
    background-size: 220% 100%;
    animation: ui-shimmer 1.4s linear infinite;
}

@keyframes ui-shimmer {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

/* ── Entrada escalonada: <div class="ui-reveal" style="--i:2"> ── */
.ui-reveal {
    animation: ui-reveal var(--dur-enter) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes ui-reveal {
    from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
    to   { opacity: 1; transform: none;              filter: none; }
}

/* ── Máscaras para guiar la atención ──────────────────────── */
.ui-mask-y {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.ui-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Transición suave entre páginas (mejora progresiva) ───── */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--dur-panel);
    animation-timing-function: var(--ease-out);
}

/* ── Movimiento reducido: sin bucles ni retardos; el estado final se conserva ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}