:root {
    /* ============================================================
       PALETA BASE
       ============================================================ */
    --navy: #0A2540;
    --teal: #00A88F;
    --offwhite: #F8FAFC;
    --gold: #e2b627;
    --gold-rbg: rgb(226, 182, 39);
    --light-blue: #38bdf8;
    --light-gray: #dce3ee;

    /* ============================================================
       FONDOS
       ============================================================ */
    --bg-body: var(--offwhite);
    --bg-header: var(--navy);
    --bg-footer-old: #164A70;
    --bg-footer: #003B4D;
    --bg-card: #ffffff;
    --bg-sidebar: var(--navy);
    --bg-overlay: rgba(10, 37, 64, 0.4);
    --bg-main:#F0F4F8;
    --bg-nosotros: #0A2540;
    --bg-cursos: #1A3550;
    /* --bg-index: rgb(197, 222, 248); */
    --bg-index: #4A6580;
    --bg-dashboard-curso: 67, 156, 245;
    

    /* ============================================================
       TEXTOS
       ============================================================ */
    --text-primary: var(--navy);
    --text-secondary: rgba(10, 37, 64, 0.65);
    --text-muted: rgba(10, 37, 64, 0.45);
    --text-inverse: var(--offwhite);
    --text-label: #dce3ee;

    /* ============================================================
       HEADER - TEXTOS
       ============================================================ */
    --text-header: #FFFFFF;
    --text-header-secondary: rgba(255, 255, 255, 0.75);
    --text-header-muted: rgba(255, 255, 255, 0.5);

    /* ============================================================
       HEADER - MENÚ
       ============================================================ */
    --header-link-color: rgba(255, 255, 255, 0.75);
    --header-link-hover: #FFFFFF;
    --header-link-active: var(--teal);
    --header-link-active-border: var(--teal);
    --header-height: 6rem;
    --header-padding-x: 20px;
    --header-logo-height: 5rem;
    --header-border: rgba(255, 255, 255, 0.1);
    --shadow-header: 0 4px 20px rgba(10, 37, 64, 0.25);

    /* ============================================================
       FOOTER
       ============================================================ */
    /* --bg-footer: #164A70; */
    --text-footer: var(--offwhite);
    --text-footer-secondary: var(--offwhite);
    --text-footer-muted: rgba(255, 255, 255, 0.5);
    --footer-link-color: var(--offwhite);
    --footer-link-hover: var(--light-blue);
    --footer-border: rgba(255, 255, 255, 0.1);
    --footer-padding-y: 40px;
    --footer-padding-x: 20px;

    /* ============================================================
       ACENTOS FUNCIONALES
       ============================================================ */
    --accent-action: var(--teal);
    --accent-highlight: var(--gold);
    --accent-hover: #008F7A;

    /* ============================================================
       BORDES Y SEPARADORES
       ============================================================ */
    --border-subtle: rgba(10, 37, 64, 0.08);
    --border-medium: rgba(10, 37, 64, 0.15);
    --border-focus: var(--teal);

    /* ============================================================
       SOMBRAS
       ============================================================ */
    --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.05);
    --shadow-md: 0 4px 6px rgba(10, 37, 64, 0.08);
    --shadow-lg: 0 10px 25px rgba(10, 37, 64, 0.12);

    /* ============================================================
       TIPOGRAFÍA
       ============================================================ */
    --font-family: 'Poppins', sans-serif;
    --font-size-base: 16px;
    --font-size-sx: 0.5rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
      --font-size-4xl: 3rem;
    --line-height-base: 1.6;
    --line-height-tight: 1.2;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* ============================================================
       ESPACIADOS
       ============================================================ */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ============================================================
       BORDES (RADIO)
       ============================================================ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ============================================================
       TRANSICIONES
       ============================================================ */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================================
   FUENTES
   ============================================================ */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-body);
    color: var(--text-primary);
    line-height: var(--line-height-base);
}

/* Barra con fondo normal (gold) */
.barra span {
    width: 25rem;
    height: 2px;
    background-color: var(--gold);
    display: block;
    margin: 0.5rem auto;
}

.barra span em {
    width: 12rem;
    height: 3px;
    position: relative;
    top:-1px;
    border-radius: 1px;
    background-color: var(--navy);
    display: block;
    margin: auto;
}

/* Barra con fondo navy (el em cambia a gold o teal) */
.barra-navy span {
    background-color: var(--gold);
}

.barra-navy span em {
    background-color: var(--light-gray);  /* o var(--teal) */
}