/*
 Theme Name:  RBL Web Cert
 Theme URI:   https://rblweb.com
 Description: Theme de Global Certification Center.
              Diseñado para mostrar el catálogo de certificaciones ISO,
              páginas de detalle con formularios de compra y verificador.
 Version:     1.0.1
 Author:      RBL WEB
 Author URI:  https://rblweb.com
 Text Domain: rbl-web-cert
 Tags:        certifications, iso, e-commerce
*/

/*
 * ═══════════════════════════════════════════════════════
 * 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 ──────────────────────────── */
:root {
    --color-primario:     #1B3A6B;
    --color-primario-lt:  #2a5298;
    --color-acento:       #CC1B1B;
    --color-acento-lt:    #fdf0f0;
    --color-texto:        #1D2327;
    --color-texto-claro:  #6c757d;
    --color-fondo:        #F8F9FA;
    --color-blanco:       #ffffff;
    --color-borde:        #DEE2E6;
    --color-card-shadow:  0 2px 12px rgba(0,0,0,0.08);
    --fuente-principal:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:   16px;
    --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-fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* ── Links base ──────────────────────────────────────── */
a {
    color: var(--color-primario);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { text-decoration: underline; }

/* ── Headings base ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-principal);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primario);
}

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

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


/*
 * VARIABLES GLOBALES DE COLOR Y TIPOGRAFÍA
 *
 * ⚠️  NO edites los valores aquí directamente.
 *     Cámbialos en: WP Admin → Opciones del Sitio → Identidad Visual
 *
 * Las variables --color-* y --fuente-principal son inyectadas
 * dinámicamente por inc/brand-vars.php desde las opciones del plugin.
 *
 * Las variables de layout (radius, container) SÍ se pueden editar aquí.
 */
:root {
    /* Las siguientes son solo FALLBACKS en caso de que brand-vars.php no cargue */
    --color-primario:     #1B3A6B;
    --color-primario-lt:  #2a5298;
    --color-acento:       #CC1B1B;
    --color-acento-lt:    #fdf0f0;
    --color-texto:        #1D2327;
    --color-texto-claro:  #6c757d;
    --color-fondo:        #F8F9FA;
    --color-blanco:       #ffffff;
    --color-borde:        #DEE2E6;
    --color-card-shadow:  0 2px 12px rgba(0,0,0,0.08);
    --fuente-principal:   'Plus Jakarta Sans', system-ui, sans-serif;

    /* Layout — estos SÍ se pueden editar aquí */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:   16px;
    --container-max: 1280px;
    --container-pad:   24px;
}

/* ─────────────────────────────────────────────────────────
   RESET MÍNIMO
   ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--fuente-principal);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-texto);
    background: var(--color-fondo);
}

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

a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4,h5 {
    font-family: var(--fuente-principal);
    line-height: 1.3;
    color: var(--color-primario);
}