/*
 Theme Name:  RBL Web Cert
 Theme URI:   https://rblweb.com
 Description: Theme de SIFE (Servicios Integrales y Formación Ejecutiva) —
              academia de preparación ejecutiva para certificaciones
              internacionales. Paleta azul/negro según brief de marca.
              Misma arquitectura de código que rbl-web-gcc/rbl-web-plugin.
 Version:     1.0.0
 Author:      RBL WEB
 Author URI:  https://rblweb.com
 Text Domain: rbl-web-cert
 Tags:        certifications, iso
*/

/*
 * ═══════════════════════════════════════════════════════
 * BASE: Variables CSS, Reset y Tipografía global
 *
 * Este archivo SE ENCOLA en functions.php como primer stylesheet.
 * brand-vars.php sobreescribe --color-* y --fuente-principal
 * dinámicamente con los valores guardados en Opciones del Sitio.
 * ═══════════════════════════════════════════════════════
 */

/* ── Variables CSS fallback — paleta de marca SIFE (brief
   "Identidad Corporativa SIFE": azul #14387F + negro #000000,
   gris platino/plomo como neutros). Se pueden reemplazar sin
   tocar CSS desde WP Admin → Opciones del Sitio → Identidad
   Visual. ──────────────────────────────────────────────── */
:root {
    --color-primario:     #14387F;
    --color-primario-lt:  #1E4FA8;
    --color-acento:       #000000;
    --color-acento-lt:    #EEF0F3;
    --color-texto:        #0D0D0D;
    --color-texto-claro:  #5B6472;
    --color-fondo:        #F5F6F8;
    --color-blanco:       #ffffff;
    --color-borde:        #E2E4E9;
    --color-card-shadow:  0 2px 16px rgba(13,13,13,0.08);
    --fuente-principal:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --radius-sm:    6px;
    --radius-md:   12px;
    --radius-lg:   24px;
    --container-max: 1280px;
    --container-pad:   24px;
}

/* ── Box-sizing universal ────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

/* ── Body base ───────────────────────────────────────── */
body {
    font-family: var(--fuente-principal);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-texto);
    background-color: var(--color-blanco);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Imágenes responsivas ────────────────────────────── */
img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Links base — azul de marca; el negro (--color-acento)
   queda reservado para CTAs/énfasis, no para links de texto. ── */
a {
    color: var(--color-primario);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { text-decoration: underline; }

/* ── Headings base — negro/casi negro, NO el color de marca
   (a diferencia de rbl-web-gcc: acá los títulos son neutros,
   el verde de marca queda reservado para acentos/CTAs/links). ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-principal);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-texto);
}

/* ── Listas sin estilos por defecto ─────────────────── */
ul, ol { list-style: none; }

/* ── Inputs y botones base ───────────────────────────── */
button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}