/* =========================================================
   CECATI 106 — SISTEMA DE DISEÑO (capa aditiva)
   ---------------------------------------------------------
   Refina tokens, tipografía, elevación y movimiento SIN
   modificar las hojas existentes (style / chatbot / a11y).
   Se carga DESPUÉS de todas las demás.

   100% REVERSIBLE: si se quita este archivo y su <link> en
   index.html, el sitio vuelve EXACTAMENTE a como estaba.
   No borra ni reescribe nada; solo añade y pule.
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS — se redefinen al final del cascade, así que
   todas las reglas existentes que ya usan var(--shadow-card),
   etc. heredan automáticamente los valores mejorados.
   --------------------------------------------------------- */
:root {
    /* — Escala de espaciado (ritmo consistente) — */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* — Radios — */
    --radius-sm: 8px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* — Elevación por capas (sombras suaves y modernas) — */
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.10);
    --shadow-card: 0 2px 4px rgba(17, 24, 39, 0.04), 0 8px 24px -6px rgba(17, 24, 39, 0.12);
    --shadow-hover: 0 10px 24px -8px rgba(17, 24, 39, 0.18), 0 18px 44px -14px rgba(196, 18, 48, 0.22);
    --shadow-lg: 0 24px 56px -16px rgba(17, 24, 39, 0.30);

    /* — Color: tintes de marca y neutros extra — */
    --primary-tint: #fcebee;   /* rojo muy claro para fondos suaves */
    --gold-tint: #fff8e7;
    --border-soft: #ececf0;
    --surface: #ffffff;

    /* — Tipografía fluida (escala con el ancho de pantalla) — */
    --font-head: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
    --fs-h1: clamp(2.3rem, 1.3rem + 3.4vw, 3.5rem);
    --fs-h2: clamp(1.7rem, 1.25rem + 1.5vw, 2.3rem);
    --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);

    /* — Movimiento — */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-fast: all 0.18s ease;
}

/* ---------------------------------------------------------
   2. BASE — render de texto más nítido, mejor equilibrio de
   líneas en títulos y transición suave al cambiar de tema.
   --------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Evita "viudas" (palabras sueltas) en titulares y mejora párrafos */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------------------------------------------------------
   3. TIPOGRAFÍA FLUIDA aplicada a los títulos clave.
   (El override móvil con !important de style.css sigue
   mandando en celulares, así que no se rompe nada.)
   --------------------------------------------------------- */
.hero-content h1 {
    font-size: var(--fs-h1);
    letter-spacing: -0.5px;
}
.section-header h2 { font-size: var(--fs-h2); }
.hero-content .lead,
.lead { font-size: var(--fs-lead); }

/* Subrayado de sección con degradado de marca (más vivo).
   Nota: #vinculacion .divider conserva su color blanco por
   mayor especificidad, así que esa sección no cambia. */
.section-header .divider {
    height: 4px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--accent-gold), var(--primary-red));
}

/* ---------------------------------------------------------
   4. ELEVACIÓN coherente en las tarjetas blancas.
   --------------------------------------------------------- */
.content-card,
.download-card,
.location-card,
.quiz-card,
.req-card {
    box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------
   5. .content-card — RESTAURADA.
   El HTML la usa en "¿Qué es un CECATI?" y el modo oscuro ya
   la trataba como tarjeta, pero faltaba su definición base.
   --------------------------------------------------------- */
.content-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 4vw, 48px);
    max-width: 1080px;
    margin: 40px auto 0;
}

/* ---------------------------------------------------------
   6. UTILIDADES DE ESPACIADO — el HTML ya las usa (mb-5, mb-4,
   mt-2, my-5...) pero no estaban definidas. Escala Bootstrap.
   --------------------------------------------------------- */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }

/* ---------------------------------------------------------
   7. BOTONES — pulido: elevación al pasar el cursor, sombra
   de marca y micro-feedback al pulsar.
   --------------------------------------------------------- */
.btn {
    transition: transform 0.2s var(--ease-out),
                box-shadow 0.2s var(--ease-out),
                background-color 0.2s ease,
                color 0.2s ease;
}
.btn-primary {
    box-shadow: 0 4px 12px -2px rgba(196, 18, 48, 0.35);
}
.btn-primary:hover {
    box-shadow: 0 9px 22px -5px rgba(196, 18, 48, 0.45);
}
.btn:active { transform: translateY(0) scale(0.985); }

/* En alto contraste, los botones no llevan halo de color */
body.a11y-contrast .btn-primary,
body.a11y-contrast .btn-primary:hover { box-shadow: none !important; }

/* ---------------------------------------------------------
   8. DETALLES — selección de texto y foco coherentes.
   --------------------------------------------------------- */
::selection {
    background: var(--accent-gold);
    color: var(--primary-dark);
}

:focus-visible {
    outline: 3px solid var(--accent-gold);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   9. ACCESIBILIDAD — respeta "reducir movimiento" del SO.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}