/* ============================================================
   design-system.css — Sistema de Diseño · Miguel Tello
   Versión 1.0
   Incluir en TODOS los archivos HTML del sistema.
   NUNCA modificar valores de :root sin actualizar DESIGN_SYSTEM.md
   ============================================================ */


/* ── 1. VARIABLES GLOBALES ──────────────────────────────── */
:root {

    /* Fondos */
    --c-dark:        #0F1923;   /* Fondo principal oscuro */
    --c-dark2:       #1A2633;   /* Fondo secundario / cards */
    --c-cream:       #F5F2EE;   /* Fondo claro (index.php panel derecho) */

    /* Texto */
    --c-ivory:       #E8E0D4;   /* Texto principal sobre fondo oscuro */
    --c-ink:         #1A2633;   /* Texto principal sobre fondo claro */
    --c-muted:       rgba(232, 224, 212, 0.6);   /* Texto secundario oscuro */
    --c-muted-light: #5A6B7A;   /* Texto secundario claro */

    /* Acento dorado */
    --c-gold:        #C4A97D;   /* Dorado principal */
    --c-gold-dim:    rgba(196, 169, 125, 0.6);   /* Dorado atenuado */
    --c-gold-hover:  #B89A6C;   /* Dorado hover botones */

    /* Acentos secundarios */
    --c-olive:       #4A6741;   /* Verde olivo (uso muy controlado) */
    --c-verde:       #69f0ae;   /* Verde éxito / completado */

    /* Bordes */
    --borde:         rgba(196, 169, 125, 0.2);   /* Borde estándar dorado */
    --borde-light:   #D8D0C8;   /* Borde sobre fondo claro */
    --borde-form:    rgba(196, 169, 125, 0.14);  /* Borde focus forms */

    /* Tipografías */
    --font-brand:    'Syncopate', sans-serif;          /* MIGUEL TELLO · logo · monograma */
    --font-serif:    'Cormorant Garamond', Georgia, serif; /* Títulos editoriales */
    --font-body:     'Inter', sans-serif;              /* Cuerpo, UI, botones */

    /* Espaciado base */
    --sp-xs:   4px;
    --sp-sm:   8px;
    --sp-md:   16px;
    --sp-lg:   24px;
    --sp-xl:   32px;
    --sp-2xl:  48px;

    /* Bordes redondeados */
    --radius-sm:  3px;
    --radius-md:  4px;
    --radius-lg:  6px;
    --radius-full: 50%;

    /* Transiciones */
    --transition: 0.2s ease;
    --transition-slow: 0.6s ease;

    /* Sombras */
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-card:     0 4px 16px rgba(0, 0, 0, 0.2);

    /* Ancho máximo de contenido */
    --max-width: 700px;
}


/* ── 2. RESET BASE ──────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}


/* ── 3. BODY BASE (fondo oscuro — páginas días y pago) ──── */
body {
    font-family: var(--font-body);
    background: var(--c-dark);
    color: var(--c-ivory);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Overlay de gradiente ambiental — presente en días 1, 2, 3 y pago */
/* Cada página puede sobreescribir body::before con su gradiente específico */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 10% 0%,  rgba(74, 20, 140, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 100%, rgba(26, 35, 126, 0.25) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Variante DÍA 2 — añadir clase .gradiente-dia2 al body */
body.gradiente-dia2::before {
    background:
        radial-gradient(ellipse 70% 50% at 90% 0%,  rgba(26, 38, 51, 0.8) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 100%, rgba(15, 25, 35, 0.9) 0%, transparent 60%);
}

/* Variante DÍA 3 — añadir clase .gradiente-dia3 al body */
body.gradiente-dia3::before {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%,  rgba(26, 38, 51, 0.9) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 80% 100%, rgba(15, 25, 35, 0.8) 0%, transparent 60%);
}

/* Variante PAGO — añadir clase .gradiente-pago al body */
body.gradiente-pago::before {
    background:
        radial-gradient(ellipse 70% 50% at 20% 0%,  rgba(26, 38, 51, 0.9) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 100%, rgba(15, 25, 35, 0.8) 0%, transparent 60%);
}

/* Body claro — solo index.php usa panel dividido, no necesita esta clase */
body.body-claro {
    background: var(--c-cream);
    color: var(--c-ink);
}
body.body-claro::before {
    display: none;
}


/* ── 4. CONTENEDOR PRINCIPAL ────────────────────────────── */
.contenedor {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px 80px;
}


/* ── 5. TIPOGRAFÍA BASE ─────────────────────────────────── */

/* Eyebrow — etiqueta pequeña uppercase dorada */
.eyebrow {
    font-family: var(--font-brand);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: var(--sp-md);
    display: block;
}

/* Título serif principal */
.titulo-serif {
    font-family: var(--font-serif);
    font-size: clamp(26px, 5vw, 42px);
    font-weight: 300;
    line-height: 1.15;
    color: var(--c-ivory);
}

/* Texto muted */
.texto-muted {
    font-size: 14px;
    color: var(--c-muted);
    line-height: 1.65;
}


/* ── 6. ANIMACIONES GLOBALES ────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.anim-fadeup  { animation: fadeUp  0.5s ease both; }
.anim-fadein  { animation: fadeIn  0.5s ease both; }
.anim-slidein { animation: slideIn 0.5s ease 0.1s both; }


/* ── 7. UTILIDADES ──────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-gold   { color: var(--c-gold); }
.text-ivory  { color: var(--c-ivory); }
.text-muted  { color: var(--c-muted); }

.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }
.mt-xl  { margin-top: var(--sp-xl); }
.mb-sm  { margin-bottom: var(--sp-sm); }
.mb-md  { margin-bottom: var(--sp-md); }
.mb-lg  { margin-bottom: var(--sp-lg); }
.mb-xl  { margin-bottom: var(--sp-xl); }


/* ── 8. RESPONSIVE — Mobile first ──────────────────────── */
@media (max-width: 640px) {
    .contenedor {
        padding: 0 16px 60px;
    }
}