/* ============================================================
   DESIGN SYSTEM — Elisabeth Rodriguez
   Variables, reset, tipografía, layout base
   ============================================================ */

:root {
    /* ----------------------------------------------------------
       PALETA DE MARCA — Elisabeth Rodriguez
       Background #FAFAFA · Text #001D2A · Primary #22D3EE
       Accent #004C5E · Surface #FFFFFF · Border #7EE6FA
       ---------------------------------------------------------- */

    /* Fondos / superficies */
    --color-bg:         #fafafa;   /* Background */
    --color-bg-soft:    #f1f5f6;   /* sección alterna (tinte teal muy sutil) */
    --color-bg-card:    #ffffff;   /* Surface */
    --color-surface:    #ffffff;   /* alias semántico */

    /* Bordes: neutro sutil para divisores + cian de marca para acentos */
    --color-border:       rgba(0,29,42,0.10);
    --color-border-hover: rgba(0,29,42,0.22);
    --color-border-brand: #7ee6fa;  /* Border de marca: focus, estados activos */

    /* Texto (basado en navy #001D2A) */
    --color-text:       #001d2a;   /* Text */
    --color-text-muted: #4a5b63;
    --color-text-dim:   #8a979d;

    /* Acción y acentos
       primary = cian brillante (fondos de botón / glows)
       accent  = teal oscuro (texto de acento, enlaces — buen contraste) */
    --color-primary:       #22d3ee;   /* Primary */
    --color-primary-hover: #0fbcd8;
    --color-accent:        #004c5e;   /* Accent */
    --color-accent-hover:  #00677e;
    --color-accent-dark:   #e6faff;   /* tinte cian muy claro (fondos suaves) */

    --color-white:      #ffffff;

    /* Tipografía — Montserrat (titulares) + Nunito (cuerpo) */
    --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sans:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --text-xs:   clamp(0.7rem,  1.2vw, 0.75rem);
    --text-sm:   clamp(0.8rem,  1.4vw, 0.875rem);
    --text-base: clamp(0.9rem,  1.6vw, 1rem);
    --text-md:   clamp(1rem,    1.8vw, 1.125rem);
    --text-lg:   clamp(1.1rem,  2vw,   1.25rem);
    --text-xl:   clamp(1.3rem,  2.5vw, 1.5rem);
    --text-2xl:  clamp(1.6rem,  3vw,   2rem);
    --text-3xl:  clamp(2rem,    4vw,   2.75rem);
    --text-4xl:  clamp(2.5rem,  5vw,   3.5rem);
    --text-5xl:  clamp(3rem,    6vw,   4.5rem);

    /* Espaciado */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Layout */
    --max-width: 1100px;
    --max-width-narrow: 720px;

    /* Border radius */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Sombras */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --shadow:     0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 40px rgba(34,211,238,0.22);

    /* Transiciones */
    --transition: 0.2s ease;
    --transition-slow: 0.35s ease;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button, input, textarea, select {
    font: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
    color: var(--color-text-muted);
    line-height: 1.7;
}

strong {
    color: var(--color-text);
    font-weight: 600;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container--narrow {
    max-width: var(--max-width-narrow);
}

section {
    padding: var(--space-24) 0;
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.text-accent   { color: var(--color-accent); }
.text-muted    { color: var(--color-text-muted); }
.text-center   { text-align: center; }
.text-white    { color: var(--color-white); }

.font-mono     { font-family: var(--font-mono); }

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

.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-16) 0;
}

/* Animación de entrada */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Las fuentes (Montserrat + Nunito) se cargan con <link> en components/head.php
   para no bloquear el render. No usar @import aquí. */

/* ============================================================
   Accesibilidad móvil: texto de lectura más grande
   Sube el tamaño de párrafos y texto base en pantallas pequeñas
   (pensado para personas con vista cansada / presbicia).
   No afecta a escritorio ni a los titulares.
   ============================================================ */
@media (max-width: 640px) {
    :root {
        --text-xs:   0.8125rem;  /* ~13px (antes ~12px)   */
        --text-sm:   0.9375rem;  /* ~15px (antes ~13px)   */
        --text-base: 1.0625rem;  /* ~17px (antes ~14.4px) */
        --text-md:   1.1875rem;  /* ~19px (antes ~16px)   */
        --text-lg:   1.3125rem;  /* ~21px (antes ~17.6px) */
    }
    body { line-height: 1.65; }   /* algo más de aire entre líneas */
    p    { line-height: 1.7; }
}