/*
 * Skin · skin-corporative-2-instituto
 * Variante INSTITUTO / ACADEMIA del core corporative-2.
 *
 * Identidad: azul institucional + ámbar de logro. Comunica formación con salida
 * laboral, trayectoria, cercanía docente y modalidades flexibles.
 *
 * Paleta:  azul institucional #1E4C8A · azul profundo #0E2540 · azul claro #EAF1FA ·
 *          acento ámbar/logro #E8940C.
 * Fonts:   Poppins (titulares) + Inter (texto).
 *
 * Escala de tokens completa (patrón Porto: -100/-300 shades, -rgba-0..90,
 * inverse, greys) — TODAS derivadas de los hex base por script (trampa #12).
 */

/* General */
:root {
    --border-radius:   2px;
    --border-radius2x: 4px;
    --default:         #6b7280;
}

/* Skin Colors — Instituto (azul institucional + ámbar) */
:root {
    --primary:      #1E4C8A;
    --primary-rgb:  30, 76, 138;
    --primary-100:  #1a4379;
    --primary-200:  #173a69;
    --primary-300:  #133158;
    --primary--100: #476c9f;
    --primary--200: #6f8cb4;
    --primary--300: #98adc9;
    --primary-rgba-0:   rgba(30, 76, 138, 0);
    --primary-rgba-10:  rgba(30, 76, 138, 0.1);
    --primary-rgba-20:  rgba(30, 76, 138, 0.2);
    --primary-rgba-30:  rgba(30, 76, 138, 0.3);
    --primary-rgba-40:  rgba(30, 76, 138, 0.4);
    --primary-rgba-50:  rgba(30, 76, 138, 0.5);
    --primary-rgba-60:  rgba(30, 76, 138, 0.6);
    --primary-rgba-70:  rgba(30, 76, 138, 0.7);
    --primary-rgba-80:  rgba(30, 76, 138, 0.8);
    --primary-rgba-90:  rgba(30, 76, 138, 0.9);

    --secondary:      #E8940C;
    --secondary-rgb:  232, 148, 12;
    --secondary-100:  #cc820b;
    --secondary-200:  #b07009;
    --secondary-300:  #945f08;
    --secondary--100: #eca738;
    --secondary--200: #f0bb63;
    --secondary--300: #f4ce8f;
    --secondary-rgba-0:   rgba(232, 148, 12, 0);
    --secondary-rgba-10:  rgba(232, 148, 12, 0.1);
    --secondary-rgba-20:  rgba(232, 148, 12, 0.2);
    --secondary-rgba-30:  rgba(232, 148, 12, 0.3);
    --secondary-rgba-40:  rgba(232, 148, 12, 0.4);
    --secondary-rgba-50:  rgba(232, 148, 12, 0.5);
    --secondary-rgba-60:  rgba(232, 148, 12, 0.6);
    --secondary-rgba-70:  rgba(232, 148, 12, 0.7);
    --secondary-rgba-80:  rgba(232, 148, 12, 0.8);
    --secondary-rgba-90:  rgba(232, 148, 12, 0.9);

    --tertiary:      #5B7196;
    --tertiary-rgb:  91, 113, 150;
    --tertiary-100:  #506384;
    --tertiary-200:  #455672;
    --tertiary-300:  #3a4860;
    --tertiary--100: #798ba9;
    --tertiary--200: #96a4bc;
    --tertiary--300: #b4becf;
    --tertiary-rgba-0:   rgba(91, 113, 150, 0);
    --tertiary-rgba-10:  rgba(91, 113, 150, 0.1);
    --tertiary-rgba-20:  rgba(91, 113, 150, 0.2);
    --tertiary-rgba-30:  rgba(91, 113, 150, 0.3);
    --tertiary-rgba-40:  rgba(91, 113, 150, 0.4);
    --tertiary-rgba-50:  rgba(91, 113, 150, 0.5);
    --tertiary-rgba-60:  rgba(91, 113, 150, 0.6);
    --tertiary-rgba-70:  rgba(91, 113, 150, 0.7);
    --tertiary-rgba-80:  rgba(91, 113, 150, 0.8);
    --tertiary-rgba-90:  rgba(91, 113, 150, 0.9);

    --quaternary:      #EAF1FA;
    --quaternary-rgb:  234, 241, 250;
    --quaternary-100:  #ced4dc;
    --quaternary-200:  #b2b7be;
    --quaternary-300:  #969aa0;
    --quaternary--100: #eef4fb;
    --quaternary--200: #f2f6fc;
    --quaternary--300: #f5f9fd;
    --quaternary-rgba-0:   rgba(234, 241, 250, 0);
    --quaternary-rgba-10:  rgba(234, 241, 250, 0.1);
    --quaternary-rgba-20:  rgba(234, 241, 250, 0.2);
    --quaternary-rgba-30:  rgba(234, 241, 250, 0.3);
    --quaternary-rgba-40:  rgba(234, 241, 250, 0.4);
    --quaternary-rgba-50:  rgba(234, 241, 250, 0.5);
    --quaternary-rgba-60:  rgba(234, 241, 250, 0.6);
    --quaternary-rgba-70:  rgba(234, 241, 250, 0.7);
    --quaternary-rgba-80:  rgba(234, 241, 250, 0.8);
    --quaternary-rgba-90:  rgba(234, 241, 250, 0.9);

    --dark:      #0E2540;
    --dark-rgb:  14, 37, 64;
    --dark-100:  #0c2138;
    --dark-200:  #0b1c31;
    --dark-300:  #091829;
    --dark--100: #394c62;
    --dark--200: #657385;
    --dark--300: #909ba7;
    --dark-rgba-0:   rgba(14, 37, 64, 0);
    --dark-rgba-10:  rgba(14, 37, 64, 0.1);
    --dark-rgba-20:  rgba(14, 37, 64, 0.2);
    --dark-rgba-30:  rgba(14, 37, 64, 0.3);
    --dark-rgba-40:  rgba(14, 37, 64, 0.4);
    --dark-rgba-50:  rgba(14, 37, 64, 0.5);
    --dark-rgba-60:  rgba(14, 37, 64, 0.6);
    --dark-rgba-70:  rgba(14, 37, 64, 0.7);
    --dark-rgba-80:  rgba(14, 37, 64, 0.8);
    --dark-rgba-90:  rgba(14, 37, 64, 0.9);

    --light:      #FFFFFF;
    --light-rgb:  255, 255, 255;
    --light-100:  #e0e0e0;
    --light-200:  #c2c2c2;
    --light-300:  #a3a3a3;
    --light--100: #ffffff;
    --light--200: #ffffff;
    --light--300: #ffffff;
    --light-rgba-0:   rgba(255, 255, 255, 0);
    --light-rgba-10:  rgba(255, 255, 255, 0.1);
    --light-rgba-20:  rgba(255, 255, 255, 0.2);
    --light-rgba-30:  rgba(255, 255, 255, 0.3);
    --light-rgba-40:  rgba(255, 255, 255, 0.4);
    --light-rgba-50:  rgba(255, 255, 255, 0.5);
    --light-rgba-60:  rgba(255, 255, 255, 0.6);
    --light-rgba-70:  rgba(255, 255, 255, 0.7);
    --light-rgba-80:  rgba(255, 255, 255, 0.8);
    --light-rgba-90:  rgba(255, 255, 255, 0.9);
}

/* Skin Colors — Inverse */
:root {
    --primary-inverse:    #FFFFFF;
    --secondary-inverse:  #0E2540;
    --tertiary-inverse:   #FFFFFF;
    --quaternary-inverse: #0E2540;
    --dark-inverse:       #FFFFFF;
    --light-inverse:      #0E2540;
}

/* Grey Colors */
:root {
    --grey:      #969696;
    --grey-100:  #f4f4f4;
    --grey-200:  #eaeaea;
    --grey-300:  #e5e5e5;
    --grey-400:  #e0e0e0;
    --grey-500:  #dbdbdb;
    --grey-600:  #cecece;
    --grey-700:  #c1c1c1;
    --grey-800:  #a8a8a8;
    --grey-900:  #8e8e8e;
    --grey-1000: #757575;
}

/* === Corp vocabulario propio (lo consumen .corp-* del demo compartido) === */
:root {
    --corp-navy:        #1E4C8A;   /* azul institucional = color dominante */
    --corp-navy-rgb:    30, 76, 138;
    --corp-navy-soft:   rgba(30, 76, 138, 0.92);
    --corp-graphite:    #0E2540;   /* azul muy oscuro */
    --corp-bone:        #EAF1FA;   /* azul muy claro = fondos de sección */
    --corp-paper:       #FFFFFF;
    --corp-gold:        #E8940C;   /* ámbar/logro = acento decorativo */
    --corp-gold-rgb:    232, 148, 12;
    --corp-gold-soft:   #F5C173;
    --corp-stone:       #D3E2F5;
    --corp-ink:         #0E2540;
    --corp-muted:       #5A6472;   /* gris con contraste AA sobre bone */
    --corp-accent-ink:  #17406F;   /* acento para TEXTO sobre fondo claro (AA) */
    --corp-rule:        rgba(30, 76, 138, 0.14);
    --corp-rule-light:  rgba(255, 255, 255, 0.16);

    /* Sombras tintadas con el azul de marca */
    --corp-shadow-sm:   0 6px 24px -12px rgba(14, 37, 64, 0.28);
    --corp-shadow-md:   0 12px 40px -16px rgba(14, 37, 64, 0.22);

    /* Radios y contenedor */
    --corp-radius:      2px;
    --corp-radius-pill: 1.25rem;
    --corp-container:   1320px;
    --corp-track-label: 0.14em;

    /* Escala tipográfica */
    --fs-eyebrow: 0.75rem;
    --fs-label:   0.8rem;
    --fs-sm:      0.9rem;
    --fs-body:    1rem;
    --fs-lead:    1.15rem;
    --fs-h3:      1.35rem;
    --fs-h2:      clamp(1.9rem, 3vw, 2.6rem);
    --fs-display: clamp(2.4rem, 5vw, 4.2rem);

    /* Ritmo vertical / gaps */
    --corp-gap:      clamp(4rem, 8vw, 7rem);
    --corp-grid-gap: 1.75rem;
}

/* === Fonts — Poppins (titulares) + Inter (texto) === */
:root {
    --font-family-primary:   'Poppins', system-ui, -apple-system, sans-serif;
    --font-family-secondary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-tertiary:  'Poppins', system-ui, -apple-system, sans-serif;
    --font-primary:          var(--font-family-primary);
    --font-secondary:        var(--font-family-secondary);

    --bs-font-sans-serif:  'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-color:       #0E2540;
    --bs-body-bg:          #FFFFFF;
    --bs-link-color:       #1E4C8A;
    --bs-link-hover-color: #E8940C;
}

/* === Helpers custom-color-* (convención Porto) === */
.custom-bg-color-1 { background-color: var(--corp-bone) !important; }
.custom-bg-color-2 { background-color: var(--corp-navy) !important; }
.custom-bg-color-3 { background-color: var(--corp-graphite) !important; }
.custom-bg-color-4 { background-color: var(--corp-stone) !important; }

.custom-text-color-1 { color: var(--corp-ink) !important; }
.custom-text-color-2 { color: var(--corp-accent-ink) !important; }
.custom-text-color-3 { color: var(--corp-muted) !important; }

/* === Buttons — azul institucional con acento ámbar en hover === */
.btn-primary {
    background-color: var(--corp-navy);
    border-color: var(--corp-navy);
    color: var(--corp-paper);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--corp-graphite);
    border-color: var(--corp-gold);
    color: var(--corp-paper);
}
.btn-secondary {
    background-color: var(--corp-gold);
    border-color: var(--corp-gold);
    color: var(--corp-graphite);
}
.btn-secondary:hover {
    background-color: var(--corp-gold-soft);
    border-color: var(--corp-gold-soft);
    color: var(--corp-graphite);
}
.btn-outline-primary {
    color: var(--corp-navy);
    border-color: var(--corp-navy);
}
.btn-outline-primary:hover {
    background-color: var(--corp-navy);
    border-color: var(--corp-navy);
    color: var(--corp-paper);
}

/* === Headings — Poppins sobre páginas del demo === */
h1, h2, h3, h4, h5, h6,
.font-primary, .heading-primary {
    font-family: var(--font-family-primary);
    font-weight: 600;
    color: var(--corp-ink);
    letter-spacing: -0.015em;
}

/* === Body — Inter === */
body {
    font-family: var(--font-family-secondary);
    color: var(--corp-graphite);
    background: var(--corp-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}