/* =============================================================================
   COLEGIO MONTANO — Hoja de estilos principal
   -----------------------------------------------------------------------------
   Estructura del archivo:
     1. TOKENS         → ÚNICA FUENTE DE VERDAD (colores, tipografías, espacios)
                         Cambiar aquí = cambia TODO el sitio.
     2. RESET / BASE   → reset suave, body, tipografía, links
     3. UTILIDADES     → helpers (cm-bg-soft, cm-pretitle, cm-accent…)
     4. COMPONENTES    → topbar, nav, footer, hero, cards, ctas, breadcrumbs…
     5. PÁGINAS        → overrides puntuales (vacío por ahora)
     6. RESPONSIVE     → breakpoints y ajustes específicos

   Convención de nombres: prefijo `cm-` (BEM ligero). Bootstrap se usa para
   layout (container, row, col-*, d-flex, gap-*) — los estilos visuales
   los define este archivo redefiniendo los tokens BS5.
   ========================================================================= */


/* =============================================================================
   1. TOKENS — variables de marca (ÚNICO LUGAR PARA CAMBIOS GLOBALES)
   ========================================================================= */
:root {

    /* ---------- Colores de marca ---------- */
    --cm-yellow:        #f9ce06;
    --cm-yellow-600:    #d6ae00;
    --cm-yellow-50:     #fff7c2;
    --cm-blue:          #00305b;
    --cm-blue-600:      #002240;
    --cm-blue-50:       #e8eef5;
    /* Azules del footer */
    --cm-blue-footer:   #0066a6;       /* azul medio del footer wrapper */
    --cm-blue-copy:     #003453;       /* azul oscuro del copyright */
    /* Tokens del menú dropdown */
    --cm-menu-bg:       #eeeeee;       /* gris claro del fondo de los submenús */
    --cm-menu-text:     #585858;       /* gris medio del texto de los items */
    --cm-menu-hover:    #0066a6;       /* azul claro institucional al hover/activo */
    --cm-menu-title:    #0066a8;       /* azul de los títulos de grupo (mega) */
    --cm-menu-border:   #dddddd;       /* línea entre items/secciones */

    /* Paleta DORADA tipo "hoja dorada / papel metálico" — más saturada,
       con brillos y reflejos. Ajustar estos hex para subir/bajar el tono. */
    --cm-gold-light:    #fae39c;       /* dorado claro brillante (extremo izquierdo del degradado) */
    --cm-gold-mid:      #e0bb55;       /* dorado intermedio metálico (centro) */
    --cm-gold-soft:     #d3a83b;       /* dorado suave (extremo derecho del degradado — más suave) */
    --cm-gold-deep:     #a47d22;       /* dorado oscuro (reservado para sombras/acentos) */
    --cm-gold-line:     rgba(85, 55, 0, .12);    /* trama metálica más visible */
    --cm-gold-edge:     rgba(85, 55, 0, .75);    /* línea decorativa nítida */
    --cm-gold-glow:     rgba(255, 235, 165, .85);/* brillo cálido fuerte */
    --cm-gold-shine:    rgba(255, 250, 220, .6); /* highlight blanco para reflejo */
    /* Degradado completo reutilizable — para aplicar el mismo fondo dorado
       a múltiples elementos (banda "modelo propio", cards, banners, etc.) */
    --cm-gold-gradient: linear-gradient(135deg, var(--cm-gold-light) 0%, var(--cm-gold-mid) 55%, var(--cm-gold-soft) 100%);

    /* Tokens de "Cards con icono arriba" (Razones, Features del home, etc.).
       Cambiar AQUÍ y se actualizan TODAS las cards del mismo estilo. */
    --cm-card-bg:           #ffffff;             /* fondo de la card */
    --cm-card-shadow:       var(--cm-shadow-sm); /* sombra normal */
    --cm-card-shadow-hover: var(--cm-shadow);    /* sombra al hover */
    --cm-card-icon-bg:      var(--cm-yellow-50); /* caja detrás del icono */
    --cm-card-icon-color:   var(--cm-yellow-600);/* color del icono cuando es font/svg */
    --cm-card-title:        var(--cm-blue);      /* título de la card */
    --cm-card-text:         var(--cm-text-soft); /* texto descriptivo */
    --cm-red:           #e63946;
    --cm-green:         #2a9d8f;

    /* ---------- Colores de UI ---------- */
    --cm-text:          #1f2937;   /* gris muy oscuro, mejor que negro puro */
    --cm-text-soft:     #4b5563;
    --cm-muted:         #6b7280;
    --cm-border:        #e5e7eb;
    --cm-border-soft:   #f1f3f5;
    --cm-bg:            #ffffff;
    --cm-bg-soft:       #f7f8fa;
    --cm-bg-dark:       #0f172a;

    /* ---------- Tipografía ---------- */
    --cm-font-heading:  "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cm-font-body:     "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --cm-fs-xs:         0.75rem;    /* 12 */
    --cm-fs-sm:         0.875rem;   /* 14 */
    --cm-fs-base:       1rem;       /* 16 */
    --cm-fs-md:         1.125rem;   /* 18 */
    --cm-fs-lg:         1.25rem;    /* 20 */
    --cm-fs-xl:         1.5rem;     /* 24 */
    --cm-fs-2xl:        2rem;       /* 32 */
    --cm-fs-3xl:        clamp(2rem, 4vw, 3rem);
    --cm-fs-4xl:        clamp(2.5rem, 5vw, 4rem);

    /* Tamaño del cuerpo (párrafos). Centralizado para poder reducirlo
       en móvil sin tocar componentes — ver media query al final. */
    --cm-fs-body:       var(--cm-fs-base);
    --cm-fs-body-md:    var(--cm-fs-md);

    --cm-lh-tight:      1.15;
    --cm-lh-snug:       1.35;
    --cm-lh-normal:     1.6;

    --cm-fw-light:      300;
    --cm-fw-normal:     400;
    --cm-fw-medium:     500;
    --cm-fw-semibold:   600;
    --cm-fw-bold:       700;

    /* ---------- Espaciado ---------- */
    --cm-space-1:       0.25rem;
    --cm-space-2:       0.5rem;
    --cm-space-3:       0.75rem;
    --cm-space-4:       1rem;
    --cm-space-5:       1.5rem;
    --cm-space-6:       2rem;
    --cm-space-8:       3rem;
    --cm-space-10:      4rem;
    --cm-space-12:      6rem;
    --cm-section-py:    clamp(3rem, 7vw, 6rem);

    /* ---------- Bordes y radios ---------- */
    --cm-radius-sm:     0.375rem;
    --cm-radius:        0.75rem;
    --cm-radius-lg:     1.25rem;
    --cm-radius-pill:   999px;

    /* ---------- Sombras ---------- */
    --cm-shadow-sm:     0 1px 2px rgba(15, 23, 42, .06);
    --cm-shadow:        0 4px 12px rgba(15, 23, 42, .08);
    --cm-shadow-lg:     0 12px 32px rgba(15, 23, 42, .12);

    /* ---------- Transiciones ---------- */
    --cm-ease:          cubic-bezier(.2, .8, .2, 1);
    --cm-t-fast:        .15s;
    --cm-t:             .25s;
    --cm-t-slow:        .4s;

    /* ---------- Layout ---------- */
    --cm-container-max: 1200px;
    --cm-nav-h:         118px;     /* altura del navbar (logo grande + padding generoso) */
    --cm-logo-h:        86px;      /* altura del logo en navbar */

    /* ---------- Bootstrap 5 — overrides ---------- */
    --bs-primary:               var(--cm-yellow);
    --bs-primary-rgb:           249, 206, 6;
    --bs-body-color:            var(--cm-text);
    --bs-body-color-rgb:        31, 41, 55;
    --bs-body-bg:               var(--cm-bg);
    --bs-body-font-family:      var(--cm-font-body);
    --bs-body-font-weight:      var(--cm-fw-normal);
    --bs-body-line-height:      var(--cm-lh-normal);
    --bs-link-color:            var(--cm-blue);
    --bs-link-hover-color:      var(--cm-yellow-600);
    --bs-border-color:          var(--cm-border);
    --bs-border-radius:         var(--cm-radius);
    --bs-border-radius-lg:      var(--cm-radius-lg);
    --bs-focus-ring-color:      rgba(249, 206, 6, .35);
}


/* =============================================================================
   2. RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body.cm-body {
    margin: 0;
    font-family: var(--cm-font-body);
    font-size: var(--cm-fs-body);
    line-height: var(--cm-lh-normal);
    color: var(--cm-text);
    background-color: var(--cm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cm-font-heading);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    color: var(--cm-text);
    margin: 0 0 var(--cm-space-4);
}

h1 { font-size: var(--cm-fs-4xl); }
h2 { font-size: var(--cm-fs-3xl); }
h3 { font-size: var(--cm-fs-2xl); }
h4 { font-size: var(--cm-fs-xl); }

p { margin: 0 0 var(--cm-space-4); }

a { color: var(--cm-blue); text-decoration: none; transition: color var(--cm-t) var(--cm-ease); }
a:hover { color: var(--cm-yellow-600); }

:focus-visible {
    outline: 3px solid var(--cm-yellow);
    outline-offset: 3px;
    border-radius: var(--cm-radius-sm);
}

ul, ol { margin: 0 0 var(--cm-space-4); padding-left: 1.25rem; }

.cm-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--cm-blue);
    color: #fff;
    padding: var(--cm-space-3) var(--cm-space-4);
    font-weight: var(--cm-fw-semibold);
}
.cm-skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

.cm-main { min-height: 60vh; }


/* =============================================================================
   3. UTILIDADES
   ========================================================================= */
.cm-bg-soft   { background-color: var(--cm-bg-soft); }
.cm-bg-dark   { background-color: var(--cm-bg-dark); color: #fff; }

.cm-pretitle {
    display: inline-block;
    font-size: var(--cm-fs-sm);
    font-weight: var(--cm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cm-yellow-600);
    margin-bottom: var(--cm-space-2);
}

.cm-accent { color: var(--cm-yellow-600); }

.cm-section { padding-block: var(--cm-section-py); }

.cm-section__title {
    font-size: var(--cm-fs-3xl);
    margin-bottom: var(--cm-space-2);
}

.cm-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: var(--cm-fw-semibold);
    color: var(--cm-blue);
}
.cm-link-arrow i { transition: transform var(--cm-t) var(--cm-ease); }
.cm-link-arrow:hover i { transform: translateX(4px); }


/* =============================================================================
   4. COMPONENTES
   ========================================================================= */

/* ---------- 4.1 Botones ---------- */
.cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border: 2px solid transparent;
    border-radius: var(--cm-radius-pill);
    font-family: var(--cm-font-body);
    font-weight: var(--cm-fw-semibold);
    font-size: var(--cm-fs-base);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--cm-t) var(--cm-ease),
                box-shadow var(--cm-t) var(--cm-ease),
                background-color var(--cm-t) var(--cm-ease),
                color var(--cm-t) var(--cm-ease);
}
.cm-btn:hover { transform: translateY(-1px); }
.cm-btn:active { transform: translateY(0); }

.cm-btn--primary {
    background: var(--cm-yellow);
    color: var(--cm-text);
    box-shadow: var(--cm-shadow-sm);
}
.cm-btn--primary:hover {
    background: var(--cm-yellow-600);
    color: var(--cm-text);
    box-shadow: var(--cm-shadow);
}

.cm-btn--ghost {
    background: transparent;
    color: var(--cm-blue);
    border-color: var(--cm-blue);
}
.cm-btn--ghost:hover {
    background: var(--cm-blue);
    color: #fff;
}

.cm-btn--lg { padding: .85rem 1.75rem; font-size: var(--cm-fs-md); }


/* ---------- 4.2 Top-bar (3 zonas: sedes / RRSS / enlaces) ---------- */
.cm-topbar {
    background: var(--cm-blue);
    color: #fff;
    font-size: var(--cm-fs-sm);
    padding: .55rem 0;
}
.cm-topbar a { color: #fff; }

.cm-topbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* --- Zona 1: sedes con teléfono + WA --- */
.cm-topbar__sedes { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.cm-topbar__sede  { display: inline-flex; align-items: center; gap: .35rem; }
.cm-topbar__link  { display: inline-flex; align-items: center; gap: .4rem; }
.cm-topbar__link:hover { color: var(--cm-yellow); }
.cm-topbar__label { color: var(--cm-yellow); font-weight: var(--cm-fw-semibold); }

.cm-topbar__wa {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px;
    background: #25D366;          /* verde oficial WhatsApp */
    color: #fff;
    border-radius: 50%;
    margin-left: .25rem;
    font-size: .85rem;
    transition: transform var(--cm-t) var(--cm-ease), background-color var(--cm-t) var(--cm-ease);
}
.cm-topbar__wa:hover { background: #1ebe5a; color: #fff; transform: scale(1.08); }

/* --- Zona 2: RRSS centrado --- */
.cm-topbar__social { display: flex; gap: .4rem; }
.cm-topbar__icon {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    transition: background-color var(--cm-t) var(--cm-ease);
}
.cm-topbar__icon:hover { background: var(--cm-yellow); color: var(--cm-text); }

/* --- Zona 3: enlaces a la derecha --- */
.cm-topbar__links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cm-topbar__cta {
    display: inline-flex; align-items: center; gap: .35rem;
    color: #fff;
    font-weight: var(--cm-fw-medium);
    padding: .15rem .25rem;
    border-bottom: 2px solid transparent;
    transition: color var(--cm-t) var(--cm-ease), border-color var(--cm-t) var(--cm-ease);
}
.cm-topbar__cta:hover { color: var(--cm-yellow); border-bottom-color: var(--cm-yellow); }
.cm-topbar__cta i     { color: var(--cm-yellow); font-size: .95rem; }

/* Pantallas entre xl y xxl (1200-1399px, ej. laptops 1280): comprimir topbar
   para evitar que las 3 zonas se encimen o se desborden. Además ampliamos
   el container para recuperar el espacio lateral que BS deja muerto en este rango. */
@media (max-width: 1399.98px) and (min-width: 992px) {
    .cm-topbar .container,
    .cm-nav    .container {
        max-width: calc(100% - 32px);   /* solo 16px de margen lateral, no el ~140px de BS */
    }
    .cm-topbar { font-size: var(--cm-fs-xs); padding: .45rem 0; }
    .cm-topbar__row    { gap: .85rem; }
    .cm-topbar__sedes  { gap: .85rem; }
    .cm-topbar__links  { gap: .65rem; }
    .cm-topbar__cta    { font-size: var(--cm-fs-xs); }
    .cm-topbar__wa     { width: 22px; height: 22px; font-size: .75rem; }
    .cm-topbar__icon   { width: 24px; height: 24px; font-size: .85rem; }
    /* Navbar más compacto: logo y altura más bajos, items con menos aire */
    :root { --cm-nav-h: 90px; --cm-logo-h: 64px; }
    .cm-nav__list { gap: 0; }
    .cm-nav__link { padding: 1.15rem .65rem; font-size: 14px; }
}

/* En pantallas medianas (lg) si no entra todo en 1 línea, distribuye en 2 */
@media (max-width: 1199.98px) {
    .cm-topbar__row { gap: .75rem; row-gap: .5rem; }
    .cm-topbar__cta { font-size: var(--cm-fs-xs); }
}


/* ---------- 4.3 Navbar desktop ---------- */
.cm-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #fff;
    border-bottom: 1px solid var(--cm-yellow);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
}
.cm-nav__inner {
    position: relative;            /* ancla del mega-menu — limita su ancho al contenedor */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: var(--cm-nav-h);
}
.cm-nav__brand { flex-shrink: 0; display: inline-flex; }
.cm-nav__brand img {
    height: var(--cm-logo-h);
    width: auto;
    max-width: 320px;
}

/* Cuando el navbar se hace sticky y el usuario scrollea, comprime ligeramente */
.cm-nav.is-scrolled .cm-nav__brand img { height: calc(var(--cm-logo-h) - 14px); transition: height var(--cm-t) var(--cm-ease); }
.cm-nav.is-scrolled .cm-nav__inner   { min-height: calc(var(--cm-nav-h) - 28px); transition: min-height var(--cm-t) var(--cm-ease); }

.cm-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .15rem;
    align-items: center;
}
.cm-nav__item { position: relative; }

.cm-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 1.65rem .9rem;     /* relleno vertical generoso para que el item ocupe todo el alto del navbar */
    color: var(--cm-text);
    font-family: var(--cm-font-body);
    font-weight: var(--cm-fw-medium);
    font-size: 15px;            /* tamaño reducido para que entren los 9 items en una sola línea */
    line-height: 1;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    transition: color var(--cm-t) var(--cm-ease), border-color var(--cm-t) var(--cm-ease);
}
.cm-nav__link:hover { color: var(--cm-blue-footer); border-bottom-color: var(--cm-blue-footer); }
.cm-nav__item.is-active > .cm-nav__link {
    color: var(--cm-blue-footer);
    border-bottom-color: var(--cm-blue-footer);
}

.cm-nav__link--cta {
    background: var(--cm-yellow);
    color: var(--cm-text) !important;
    font-weight: var(--cm-fw-semibold);
    padding: .6rem 1.1rem;
    border-radius: var(--cm-radius-pill);
    border-bottom: 0;
    margin-left: .5rem;
    align-self: center;
}
.cm-nav__link--cta:hover { background: var(--cm-yellow-600); border-bottom-color: transparent; }

.cm-nav__chevron { font-size: .8em; transition: transform var(--cm-t) var(--cm-ease); }
.cm-nav__item.has-children:hover .cm-nav__chevron { transform: rotate(180deg); }

/* ---------- Submenú simple (dropdown de 1 columna) ---------- */
.cm-nav__sub {
    list-style: none;
    margin: 0;
    padding: 0;                       /* sin padding interno: cada item ocupa todo */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 230px;
    background: var(--cm-menu-bg);    /* #eeeeee */
    border: 0;
    border-radius: 0;                 /* CUADRADO, sin esquinas redondas */
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--cm-t) var(--cm-ease),
                transform var(--cm-t) var(--cm-ease),
                visibility 0s var(--cm-t);
}
.cm-nav__item.has-children:hover > .cm-nav__sub,
.cm-nav__item.has-children:focus-within > .cm-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity var(--cm-t) var(--cm-ease),
                transform var(--cm-t) var(--cm-ease);
}
.cm-nav__sub li + li { border-top: 1px solid var(--cm-menu-border); }

.cm-nav__sublink {
    display: block;
    padding: .8rem 1.1rem;
    border-radius: 0;
    background: var(--cm-menu-bg);
    color: var(--cm-menu-text);       /* gris #585858 */
    font-family: var(--cm-font-body);
    font-size: 14px;
    font-weight: var(--cm-fw-medium);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    transition: color var(--cm-t) var(--cm-ease);
}
.cm-nav__sublink:hover,
.cm-nav__sublink.is-active {
    background: var(--cm-menu-bg);    /* mismo fondo en hover */
    color: var(--cm-menu-hover);      /* texto azul oscuro #223c6c */
}


/* ---------- Mega-menu (varios grupos lado a lado) ---------- */
/* `is-mega` con position: static deja que el mega-menu use al ancestro
   con position: relative más cercano, que es .cm-nav__inner (max 1200px). */
.cm-nav__item.is-mega { position: static; }

.cm-nav__mega {
    position: absolute;
    top: 100%;
    left: 0; right: 0;                /* ahora "0" del .cm-nav__inner = ancho del contenedor */
    background: var(--cm-menu-bg);    /* gris #eeeeee */
    border: 0;
    border-radius: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
    padding: 30px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--cm-t) var(--cm-ease),
                transform var(--cm-t) var(--cm-ease),
                visibility 0s var(--cm-t);
}
.cm-nav__item.is-mega:hover > .cm-nav__mega,
.cm-nav__item.is-mega:focus-within > .cm-nav__mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-nav__mega-inner {
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.cm-nav__mega-group {
    padding: 0 1.25rem;
    border-right: 1px solid var(--cm-menu-border);
}
.cm-nav__mega-group:last-child { border-right: 0; }

.cm-nav__mega-grouptitle {
    display: block;
    color: var(--cm-menu-title);      /* azul #0066a8 */
    font-family: var(--cm-font-body);
    font-size: 16px;
    font-weight: var(--cm-fw-semibold);
    padding-bottom: .5rem;
    margin: 0 0 .75rem;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 0;                 /* el título de grupo no lleva línea amarilla */
}
a.cm-nav__mega-grouptitle:hover { color: var(--cm-menu-hover); }

.cm-nav__mega-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 0;
}
.cm-nav__mega-list li + li { border-top: 1px solid rgba(0, 0, 0, .04); }
.cm-nav__mega-list .cm-nav__sublink {
    padding: .55rem 0;
    background: transparent;          /* sobre el fondo gris general */
    font-size: 14px;
}
.cm-nav__mega-list .cm-nav__sublink:hover,
.cm-nav__mega-list .cm-nav__sublink.is-active {
    background: transparent;
    color: var(--cm-menu-hover);
}


/* ---------- 4.4 Navbar móvil + offcanvas ---------- */
.cm-navmobile {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #fff;
    border-bottom: 1px solid var(--cm-yellow);
    box-shadow: var(--cm-shadow-sm);
    padding-block: var(--cm-space-2);
}
.cm-navmobile__brand { display: inline-flex; padding: var(--cm-space-2) 0; }
.cm-navmobile__brand img { height: 56px; width: auto; }
.cm-navmobile__toggle {
    background: var(--cm-bg-soft);
    color: var(--cm-blue);
    border: 1px solid var(--cm-border);
    width: 46px;
    height: 46px;
    border-radius: var(--cm-radius-sm);
    font-size: 1.55rem;
    display: inline-grid;
    place-items: center;
    transition: background-color var(--cm-t) var(--cm-ease), border-color var(--cm-t) var(--cm-ease);
}
.cm-navmobile__toggle:hover,
.cm-navmobile__toggle:focus-visible {
    background: #e9ecef;
    border-color: var(--cm-blue);
}

.cm-offcanvas { width: min(86vw, 360px); }

/* Header del offcanvas: logo en lugar de texto */
.cm-offcanvas__header {
    padding-block: var(--cm-space-3);
    border-bottom: 1px solid var(--cm-border-soft);
}
.cm-offcanvas__brand { display: inline-flex; padding: 0; }
.cm-offcanvas__brand img { height: 44px; width: auto; }

/* Items del menú móvil — compactos para que entren más opciones */
.cm-mobile__link {
    display: block;
    padding: .55rem 1.1rem;
    color: var(--cm-text);
    border-bottom: 1px solid var(--cm-border-soft);
    font-weight: var(--cm-fw-medium);
    font-size: var(--cm-fs-sm);
    line-height: 1.2;
}
.cm-mobile__link:hover, .cm-mobile__link.is-active { background: var(--cm-bg-soft); color: var(--cm-yellow-600); }
.cm-mobile__link--head { font-weight: var(--cm-fw-semibold); background: var(--cm-bg-soft); }
.cm-mobile__link--subhead {
    background: var(--cm-bg-soft);
    color: var(--cm-blue-footer);
    font-weight: var(--cm-fw-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: var(--cm-fs-xs);
    padding: .4rem 1.1rem;
}
.cm-mobile__link--child { padding-left: 1.85rem; font-size: var(--cm-fs-xs); }
.cm-mobile__link--cta {
    background: var(--cm-yellow);
    color: var(--cm-text);
    font-weight: var(--cm-fw-semibold);
}

/* Botón del acordeón (grupos de primer nivel) — más compacto */
.cm-mobile__group.accordion-button {
    padding: .65rem 1.1rem;
    font-size: var(--cm-fs-sm);
    line-height: 1.2;
}
.cm-mobile__megagroup + .cm-mobile__megagroup { border-top: 1px solid var(--cm-border-soft); }
.cm-mobile__group { font-weight: var(--cm-fw-semibold); }


/* ---------- 4.5 Footer (dos bandas de azul) ---------- */
.cm-footer {
    color: #fff;
    font-size: var(--cm-fs-body);   /* mismo tamaño que párrafos del sitio (auto-reduce en móvil) */
    line-height: 1.55;
}
.cm-footer a { color: #fff; }
.cm-footer a:hover { color: var(--cm-yellow); }

/* Bloque superior — azul medio (#0066a6) */
.cm-footer__top {
    background: var(--cm-blue-footer);
    padding-block: var(--cm-space-10) var(--cm-space-8);
    color: #fff;
}
.cm-footer__logo { width: 220px; height: auto; margin-bottom: var(--cm-space-4); }
.cm-footer__title {
    font-family: var(--cm-font-body);
    font-size: 1.0625rem;
    font-weight: var(--cm-fw-bold);
    color: #fff;
    margin-bottom: var(--cm-space-4);
    padding-bottom: var(--cm-space-2);
    border-bottom: 2px solid var(--cm-yellow);
    display: inline-block;
}
.cm-footer__list { list-style: none; padding: 0; margin: 0; }
.cm-footer__list li { margin-bottom: var(--cm-space-2); }
.cm-footer__list a { color: #fff; }
.cm-footer__list a:hover { color: var(--cm-yellow); }
.cm-footer__address {
    font-style: normal;
    margin-bottom: var(--cm-space-4);
    line-height: 1.65;
    color: #fff;
}
.cm-footer__address a { color: #fff; }
.cm-footer__address a:hover { color: var(--cm-yellow); }
.cm-footer__address strong {
    display: inline-block;
    color: #fff;
    font-weight: var(--cm-fw-bold);
    margin-bottom: .15rem;
}

/* Cabecera "Campus X" con botón de WhatsApp al lado */
.cm-footer__campus {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .15rem;
}
.cm-footer .cm-footer__wa,
.cm-footer .cm-footer__wa:hover {
    /* Icono blanco siempre — en hover NO debe heredar el amarillo del footer (.cm-footer a:hover) */
    color: #fff;
}
.cm-footer__wa {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px;
    background: #25D366;            /* verde oficial WhatsApp */
    border-radius: 50%;
    font-size: .8rem;
    text-decoration: none;
    transition: transform var(--cm-t) var(--cm-ease), background-color var(--cm-t) var(--cm-ease);
}
.cm-footer__wa:hover { background: #1ebe5a; transform: scale(1.1); }

/* Bloque inferior — azul oscuro (#003453) */
.cm-footer__bottom {
    background: var(--cm-blue-copy);
    padding-block: var(--cm-space-4);
    font-size: var(--cm-fs-sm);
    color: #cbd5e1;
}
.cm-footer__legal { color: #cbd5e1; line-height: 1.7; }
.cm-footer__legal a { color: var(--cm-yellow); text-decoration: none; }
.cm-footer__legal a:hover { color: #fff; }
.cm-footer__copy { color: var(--cm-yellow); font-weight: var(--cm-fw-bold); }
.cm-footer__credit { color: var(--cm-yellow); }

.cm-footer__rrss { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Sello "Colegio Recomendado" — usado en home (testimonios sidebar) */
.cm-testimonios__side { display: flex; flex-direction: column; gap: 0; }
.cm-recomendado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    padding: var(--cm-space-5) var(--cm-space-3);
    background: var(--cm-bg-soft);
    border: 1px solid var(--cm-border);
    border-top: 3px solid var(--cm-yellow);
    border-radius: 0;     /* sin esquinas redondas porque sigue de la card de admisiones */
    text-align: center;
}
.cm-recomendado__label {
    color: var(--cm-blue);
    font-size: var(--cm-fs-sm);
    font-weight: var(--cm-fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.cm-recomendado__img {
    width: 100%;
    max-width: 312px;   /* +20% sobre el punto medio anterior (260) */
    height: auto;
    display: block;
}
.cm-footer__rrss a {
    display: inline-block;
    line-height: 0;
    transition: transform var(--cm-t) var(--cm-ease), opacity var(--cm-t) var(--cm-ease);
    opacity: .9;
}
.cm-footer__rrss a:hover { transform: translateY(-2px); opacity: 1; }
.cm-footer__rrss img { width: 32px; height: 32px; display: block; }
.cm-footer__rrss-rounded { border-radius: 20px; }


/* ---------- 4.6 Hero genérico ---------- */
.cm-hero {
    background: var(--cm-blue);
    color: #fff;
    padding-block: var(--cm-space-10);
}
.cm-hero--bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
}
.cm-hero--bg::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0, 48, 91, .85), rgba(0, 48, 91, .55));
}
.cm-hero__content { position: relative; z-index: 1; max-width: 720px; }
.cm-hero__title {
    color: #fff;
    font-size: var(--cm-fs-3xl);
    margin-bottom: var(--cm-space-3);
}
.cm-hero__subtitle {
    color: rgba(255, 255, 255, .9);
    font-size: var(--cm-fs-md);
    margin: 0;
}


/* ---------- 4.7 Home hero específico ---------- */
.cm-home-hero { padding-block: var(--cm-space-10); }
.cm-home-hero__title {
    font-size: var(--cm-fs-4xl);
    line-height: var(--cm-lh-tight);
    margin-bottom: var(--cm-space-4);
}
.cm-home-hero__lead {
    font-size: var(--cm-fs-md);
    color: var(--cm-text-soft);
    max-width: 56ch;
}
.cm-home-hero__img {
    width: 100%;
    height: auto;
    border-radius: var(--cm-radius-lg);
    box-shadow: var(--cm-shadow-lg);
    object-fit: cover;
}

.cm-home-slider { border-radius: var(--cm-radius-lg); overflow: hidden; box-shadow: var(--cm-shadow-lg); }
.cm-home-slider__img { aspect-ratio: 4/3; object-fit: cover; }


/* ---------- 4.8 Feature card (4 elementos del home) ----------
   Usa los tokens --cm-card-* — cambiar en :root afecta a todas las cards. */
.cm-feature {
    background: var(--cm-card-bg);
    border: 1px solid var(--cm-border-soft);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-6);
    height: 100%;
    box-shadow: var(--cm-card-shadow);
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
}
.cm-feature:hover { transform: translateY(-4px); box-shadow: var(--cm-card-shadow-hover); }
.cm-feature__icon {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--cm-radius);
    background: var(--cm-card-icon-bg);
    color: var(--cm-card-icon-color);
    font-size: 1.75rem;
    margin-bottom: var(--cm-space-4);
}
.cm-feature__title {
    font-family: var(--cm-font-body);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-semibold);
    color: var(--cm-card-title);
    margin-bottom: var(--cm-space-2);
}
.cm-feature__text { color: var(--cm-card-text); font-size: var(--cm-fs-sm); margin: 0; }


/* ---------- 4.9 Card de blog ---------- */
.cm-card {
    background: #fff;
    border: 1px solid var(--cm-border-soft);
    border-radius: var(--cm-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
}
.cm-card:hover { transform: translateY(-4px); box-shadow: var(--cm-shadow); }
.cm-card__media { display: block; aspect-ratio: 16/9; overflow: hidden; }
.cm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cm-t-slow) var(--cm-ease); }
.cm-card:hover .cm-card__media img { transform: scale(1.05); }
.cm-card__body { padding: var(--cm-space-5); display: flex; flex-direction: column; gap: var(--cm-space-2); flex: 1; }
.cm-card__title {
    font-family: var(--cm-font-body);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-semibold);
    margin: 0;
    line-height: var(--cm-lh-snug);
}
.cm-card__title a { color: var(--cm-text); }
.cm-card__title a:hover { color: var(--cm-yellow-600); }
.cm-card__text { color: var(--cm-text-soft); font-size: var(--cm-fs-sm); margin: 0; }


/* ---------- 4.10 CTA grande ---------- */
.cm-cta {
    background: linear-gradient(135deg, var(--cm-blue) 0%, var(--cm-blue-600) 100%);
    color: #fff;
    padding-block: var(--cm-space-10);
}
.cm-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cm-space-6);
}
.cm-cta__title {
    color: #fff;
    margin-bottom: var(--cm-space-2);
}
.cm-cta__lead {
    color: rgba(255, 255, 255, .9);
    margin: 0;
}


/* ---------- 4.11 Breadcrumbs ---------- */
.cm-breadcrumb {
    background: var(--cm-bg-soft);
    padding-block: var(--cm-space-3);
    border-bottom: 1px solid var(--cm-border-soft);
    font-size: var(--cm-fs-sm);
}
.cm-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}
.cm-breadcrumb__item + .cm-breadcrumb__item::before {
    content: '/';
    color: var(--cm-muted);
    margin-inline: .35rem .35rem;
}
.cm-breadcrumb__item.is-current { color: var(--cm-text-soft); }


/* =============================================================================
   4.12 HOME — secciones específicas
   ========================================================================= */

/* ---------- Slider hero ---------- */
.cm-slider { position: relative; overflow: hidden; }
/* Imágenes nativas 1296×864 (3:2). Capamos en alto para evitar dominar pantallas anchas
   y mantenemos un mínimo razonable en móvil. */
.cm-slider .carousel-item { aspect-ratio: 3 / 2; min-height: 320px; max-height: 640px; }
@media (max-width: 575.98px) {
    .cm-slider .carousel-item { min-height: 280px; max-height: 65vh; }
}
.cm-slider__img { width: 100%; height: 100%; object-fit: cover; object-position: center calc(50% + 100px); }
@media (max-width: 575.98px) {
    /* En móvil el crop es lateral, no vertical → centrado clásico */
    .cm-slider__img { object-position: center; }
}
.cm-slider__overlay {
    position: absolute; inset: 0;
    /* Filtro negro muy suave: solo refuerza el lado izquierdo donde está el texto,
       el resto de la foto se ve con sus colores casi sin tinte. */
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .08) 55%, rgba(0, 0, 0, 0) 100%),
        rgba(0, 0, 0, .05);
}
.cm-slider__caption {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    color: #fff;
}
.cm-slider__sub {
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: var(--cm-fw-light);
    letter-spacing: 1px;
    margin: 0 0 .5rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.cm-slider__title {
    font-family: var(--cm-font-body);
    font-size: clamp(1.75rem, 5.5vw, 4.5rem);
    font-weight: var(--cm-fw-bold);
    line-height: 1.05;
    color: #fff;
    margin: 0;
    max-width: 14ch;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.cm-slider .carousel-indicators [data-bs-target] {
    width: 10px; height: 10px; border-radius: 50%;
    background-color: rgba(255, 255, 255, .55);
    border: 0;
    margin-inline: 4px;
}
.cm-slider .carousel-indicators .active { background-color: var(--cm-yellow); }


/* ---------- Banda amarilla "cuatro elementos" ---------- */
.cm-quattro {
    background: var(--cm-blue-footer);
    padding-block: var(--cm-space-8);
    color: #fff;
    border-top: 3px solid var(--cm-yellow);
    border-bottom: 3px solid var(--cm-yellow);
}
.cm-quattro__item {
    display: flex; gap: var(--cm-space-4);
    align-items: flex-start;
    padding: var(--cm-space-3) 0;
}
.cm-quattro__icon {
    flex-shrink: 0;
    display: inline-block;
    width: 44px; height: 44px;
    /* Pinta el PNG al MISMO amarillo del título (var(--cm-yellow)) usando mask-image,
       no es un filter aproximado: es exacto. */
    background-color: var(--cm-yellow);
    -webkit-mask: var(--cm-icon-url) center / contain no-repeat;
            mask: var(--cm-icon-url) center / contain no-repeat;
}
.cm-quattro__title {
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    color: var(--cm-yellow);
    margin: 0 0 .25rem;
}
.cm-quattro__caption { color: rgba(255, 255, 255, .9); font-size: var(--cm-fs-sm); margin: 0; }


/* ---------- Intro institucional ---------- */
.cm-intro {
    position: relative;
    padding-block: var(--cm-section-py);
    background-size: cover;
    background-position: center;
    color: #fff;
}
.cm-intro__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0, 48, 91, .92), rgba(0, 48, 91, .82)); }
.cm-intro__title {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    color: #fff;
    margin-bottom: var(--cm-space-3);
}
.cm-intro__rule {
    display: block; width: 60px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin-top: var(--cm-space-3);
}
.cm-intro__text { color: rgba(255, 255, 255, .95); text-align: justify; margin-bottom: 0; }
.cm-intro__claim {
    margin-top: var(--cm-space-8);
    text-align: center;
    color: var(--cm-yellow);
    font-weight: var(--cm-fw-semibold);
    max-width: 70ch;
    margin-inline: auto;
}


/* ---------- Colegio Faro (fondo blanco, branding Líder en Mí) ---------- */
.cm-faro {
    background: #fff;
    padding-block: var(--cm-space-6);   /* compacto: ~2rem arriba/abajo en lugar del section-py grande */
    color: var(--cm-text);
}
.cm-faro__logo {
    display: inline-block;
    width: 100%;
    max-width: 460px;
    height: auto;
}
@media (max-width: 575.98px) {
    .cm-faro__logo { max-width: 260px; }
    .cm-faro { padding-block: var(--cm-space-5); }
}
.cm-faro__pre {
    display: inline-block;
    color: var(--cm-yellow-600);
    font-size: var(--cm-fs-sm);
    font-weight: var(--cm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--cm-space-2);
}
.cm-faro__title {
    color: var(--cm-blue);
    font-size: var(--cm-fs-3xl);
    line-height: var(--cm-lh-tight);
    margin-bottom: var(--cm-space-3);
}
.cm-faro__rule {
    display: block; width: 60px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin-bottom: var(--cm-space-4);
}
.cm-faro__text {
    color: var(--cm-text);
    text-align: justify;
    margin-bottom: var(--cm-space-5);
}


/* ---------- Sobre nosotros (4 features blue circle) ---------- */
.cm-features {
    padding-block-start: var(--cm-space-6);   /* 2rem arriba */
    padding-block-end:   var(--cm-space-10);  /* 4rem abajo (más respiro hacia la sección siguiente) */
}
.cm-features__item {
    background: var(--cm-blue);
    color: #fff;
    border-radius: var(--cm-radius);
    padding: var(--cm-space-6);
    height: 100%;
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
}
.cm-features__item:hover { transform: translateY(-4px); box-shadow: var(--cm-shadow-lg); }
.cm-features__icon {
    display: inline-grid; place-items: center;
    width: 70px; height: 70px;
    background: #fff;
    border-radius: 50%;
    margin-bottom: var(--cm-space-4);
}
.cm-features__title {
    color: var(--cm-yellow);
    font-family: var(--cm-font-body);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-semibold);
    margin-bottom: var(--cm-space-2);
}
.cm-features__text { color: rgba(255, 255, 255, .92); font-size: var(--cm-fs-sm); margin-bottom: var(--cm-space-4); }
.cm-features__link { color: var(--cm-yellow); font-weight: var(--cm-fw-semibold); display: inline-flex; align-items: center; gap: .35rem; }
.cm-features__link:hover { color: #fff; }


/* ---------- Tabs por_que_elegirnos ---------- */
.cm-tabs__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    border: 0; padding: 0;
    border-radius: var(--cm-radius);
    overflow: hidden;
    cursor: pointer;
    background: #000;
    box-shadow: var(--cm-shadow);
}
.cm-tabs__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--cm-t-slow) var(--cm-ease), filter var(--cm-t) var(--cm-ease);
}
.cm-tabs__thumb-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 48, 91, .15), rgba(0, 48, 91, .55));
    transition: background-color var(--cm-t) var(--cm-ease);
}
.cm-tabs__thumb-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 3rem;
    text-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    transition: transform var(--cm-t) var(--cm-ease), color var(--cm-t) var(--cm-ease);
    pointer-events: none;
}
.cm-tabs__thumb:hover img { transform: scale(1.05); filter: brightness(.95); }
.cm-tabs__thumb:hover .cm-tabs__thumb-play { color: var(--cm-yellow); transform: translate(-50%, -50%) scale(1.1); }

.cm-tabs { gap: .4rem; flex-wrap: wrap; }
.cm-tabs__btn.nav-link {
    background: transparent;
    color: var(--cm-text);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-pill);
    padding: .45rem 1rem;
    font-size: var(--cm-fs-sm);
    font-weight: var(--cm-fw-medium);
    transition: background-color var(--cm-t) var(--cm-ease), border-color var(--cm-t) var(--cm-ease), color var(--cm-t) var(--cm-ease);
}
.cm-tabs__btn.nav-link:hover {
    border-color: var(--cm-yellow);
    color: var(--cm-blue);
}
.cm-tabs__btn.nav-link.active {
    background: var(--cm-yellow);
    color: var(--cm-text);
    border-color: var(--cm-yellow);
}

/* Móvil: pills más compactas + tira con scroll horizontal cuando no caben */
@media (max-width: 575.98px) {
    .cm-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start !important;
        padding-bottom: .35rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .cm-tabs::-webkit-scrollbar { height: 4px; }
    .cm-tabs::-webkit-scrollbar-thumb { background: var(--cm-border); border-radius: 4px; }
    .cm-tabs__btn.nav-link {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: .35rem .8rem;
        font-size: var(--cm-fs-xs);
    }
    .cm-tabs__content { padding: var(--cm-space-4); }
}
.cm-tabs__title { font-size: var(--cm-fs-2xl); margin-bottom: var(--cm-space-3); }
.cm-tabs__rule { display: block; width: 60px; height: 4px; background: var(--cm-yellow); border-radius: 2px; margin-bottom: var(--cm-space-5); }
.cm-tabs__p { text-align: justify; max-width: 80ch; }
.cm-tabs__content { background: #fff; border-radius: var(--cm-radius); padding: var(--cm-space-6); box-shadow: var(--cm-shadow-sm); }


/* ---------- Video institucional ---------- */
.cm-video {
    position: relative;
    padding-block: var(--cm-space-12);
    background-size: cover; background-position: center; background-attachment: fixed;
    text-align: center;
    color: #fff;
}
.cm-video__overlay { position: absolute; inset: 0; background: rgba(0, 48, 91, .78); }
.cm-video__play {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    transition: transform var(--cm-t) var(--cm-ease);
    margin-bottom: var(--cm-space-5);
}
.cm-video__play:hover { transform: scale(1.08); }
.cm-video__play img { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .35)); }
.cm-video__title { color: #fff; font-size: var(--cm-fs-3xl); margin-bottom: var(--cm-space-3); }
.cm-video__sub { color: var(--cm-yellow); font-weight: var(--cm-fw-semibold); margin: 0; }

.cm-video-modal__content { background: #000; }


/* ---------- Banda decorativa con logo ---------- */
.cm-band {
    background:
        linear-gradient(135deg, rgba(0, 48, 91, .88), rgba(0, 34, 64, .96)),
        url('../upload/fondo-azul.png') center/cover no-repeat;
    background-color: var(--cm-blue);
    padding-block: var(--cm-space-12);
    color: #fff;
    position: relative;
}
.cm-band::before {
    /* Detalle decorativo: barra amarilla en la parte superior */
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--cm-yellow);
}
.cm-band__inner { position: relative; z-index: 1; }
.cm-band__logo {
    display: inline-block;
    max-width: 240px;
    width: 60%;
    height: auto;
    margin-bottom: var(--cm-space-4);
}
.cm-band__claim {
    color: var(--cm-yellow);
    font-family: var(--cm-font-heading);
    font-weight: var(--cm-fw-bold);
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    margin: 0;
    letter-spacing: .02em;
}


/* ---------- Novedades + Accesos rápidos ---------- */
.cm-news { padding-block: var(--cm-section-py); }
.cm-news__header { text-align: center; margin-bottom: var(--cm-space-8); }
.cm-news__title { font-size: var(--cm-fs-3xl); color: var(--cm-blue); margin-bottom: var(--cm-space-2); }
.cm-news__rule { display: block; width: 80px; height: 4px; background: var(--cm-yellow); border-radius: 2px; margin: var(--cm-space-3) auto 0; }

.cm-news__date {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: var(--cm-fs-xs);
    color: var(--cm-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--cm-space-2);
}

/* ---------- Card destacada (1 grande arriba) ---------- */
.cm-news__featured {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: var(--cm-radius-lg);
    overflow: hidden;
    box-shadow: var(--cm-shadow);
    margin-bottom: var(--cm-space-8);
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-news__featured:hover { box-shadow: var(--cm-shadow-lg); transform: translateY(-4px); }

.cm-news__featured-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.cm-news__featured-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--cm-t-slow) var(--cm-ease);
}
.cm-news__featured:hover .cm-news__featured-media img { transform: scale(1.05); }
.cm-news__featured-badge {
    position: absolute;
    top: var(--cm-space-3);
    left: var(--cm-space-3);
    background: var(--cm-yellow);
    color: var(--cm-text);
    font-size: var(--cm-fs-xs);
    font-weight: var(--cm-fw-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .35rem .75rem;
    border-radius: var(--cm-radius-pill);
    box-shadow: var(--cm-shadow-sm);
}

.cm-news__featured-body {
    padding: var(--cm-space-8);
    display: flex; flex-direction: column;
    justify-content: center;
    gap: var(--cm-space-3);
}
.cm-news__featured-title {
    font-family: var(--cm-font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0;
}
.cm-news__featured-title a { color: var(--cm-text); }
.cm-news__featured-title a:hover { color: var(--cm-yellow-600); }
.cm-news__featured-text {
    color: var(--cm-text-soft);
    line-height: var(--cm-lh-normal);
    margin: 0 0 var(--cm-space-2);
}

/* ---------- Grid de 3 cards iguales ---------- */
.cm-news__card {
    background: #fff;
    border-radius: var(--cm-radius);
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
    box-shadow: var(--cm-shadow-sm);
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-news__card:hover { box-shadow: var(--cm-shadow); transform: translateY(-4px); }
.cm-news__card-media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.cm-news__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cm-t-slow) var(--cm-ease); }
.cm-news__card:hover .cm-news__card-media img { transform: scale(1.06); }
.cm-news__card-body {
    background: var(--cm-bg-soft);   /* gris muy suave para contrastar con el fondo blanco general */
    padding: var(--cm-space-5);
    display: flex; flex-direction: column;
    gap: var(--cm-space-2);
    flex: 1;
}
.cm-news__card-title {
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-snug);
    margin: 0;
}
.cm-news__card-title a { color: var(--cm-text); }
.cm-news__card-title a:hover { color: var(--cm-blue); }
.cm-news__card-text { color: var(--cm-text-soft); font-size: var(--cm-fs-sm); margin: 0; }
.cm-news__card-link {
    margin-top: auto;
    padding-top: var(--cm-space-3);
    align-self: flex-end;            /* enlace "Leer más" alineado a la derecha */
    color: var(--cm-blue);           /* azul de marca */
    font-weight: var(--cm-fw-semibold);
}
.cm-news__card-link:hover { color: var(--cm-blue-600); }

/* Responsive — featured se apila en columna ≤ 991px */
@media (max-width: 991.98px) {
    .cm-news__featured {
        grid-template-columns: 1fr;
    }
    .cm-news__featured-body {
        padding: var(--cm-space-5);
    }
}


/* ---------- Testimonios + tarjeta admisiones ---------- */
.cm-testimonios { background: var(--cm-bg-soft); padding-block: var(--cm-section-py); }
.cm-testimonios__row { background: #fff; border-radius: var(--cm-radius-lg); overflow: hidden; box-shadow: var(--cm-shadow); }
.cm-testimonios__panel { padding: var(--cm-space-8); height: 100%; display: flex; align-items: center; }
.cm-testimonios__quote { margin: 0; }
.cm-testimonios__qicon { font-size: 2.5rem; color: var(--cm-yellow); display: block; margin-bottom: var(--cm-space-3); line-height: 1; }
.cm-testimonios__quote p { font-size: var(--cm-fs-md); color: var(--cm-text); text-align: justify; margin-bottom: var(--cm-space-4); }
.cm-testimonios__autor a { color: var(--cm-blue); font-weight: var(--cm-fw-semibold); }
.cm-testimonios__nav { display: flex; gap: .5rem; margin-top: var(--cm-space-4); }
.cm-testimonios__btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cm-border); background: #fff; color: var(--cm-text); transition: background-color var(--cm-t) var(--cm-ease); }
.cm-testimonios__btn:hover { background: var(--cm-yellow); border-color: var(--cm-yellow); }

.cm-admisiones-card {
    background: var(--cm-yellow);
    color: var(--cm-text);
    height: 100%;
    padding: var(--cm-space-6);
    display: flex; align-items: center; gap: var(--cm-space-4);
    text-decoration: none;
    transition: background-color var(--cm-t) var(--cm-ease);
}
.cm-admisiones-card:hover { background: var(--cm-yellow-600); color: var(--cm-text); }
.cm-admisiones-card__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; background: rgba(255, 255, 255, .35); border-radius: 50%; flex-shrink: 0; }
.cm-admisiones-card__pre { display: block; font-size: var(--cm-fs-xs); text-transform: uppercase; letter-spacing: .1em; color: rgba(0, 0, 0, .65); }
.cm-admisiones-card__text strong { display: block; font-size: var(--cm-fs-md); font-weight: var(--cm-fw-bold); }
.cm-admisiones-card__arrow { margin-left: auto; font-size: 1.4rem; }


/* =============================================================================
   4.13 PAGE HEADER (hero + breadcrumbs) — reutilizable en todas las internas
   ========================================================================= */
.cm-pageheader {
    position: relative;
    padding-block: clamp(4rem, 10vw, 8rem);
    background-color: var(--cm-blue);
    background-size: cover;
    /* En desktop el crop superior recorta más, así que bajamos la imagen
       ~100px para que el sujeto principal quede mejor encuadrado.
       En móvil (overrideado abajo) se mantiene el centrado clásico. */
    background-position: center calc(50% + 100px);
    color: #fff;
    /* Hero secundario coherente con slider (ratio 3:2) pero más bajo
       para no competir visualmente con el contenido. Capamos por arriba y abajo. */
    min-height: 360px;
    max-height: 520px;
    display: flex;
    align-items: center;
}
@media (max-width: 575.98px) {
    .cm-pageheader {
        min-height: 240px;
        padding-block: clamp(2.5rem, 8vw, 4rem);
        /* En móvil el crop es lateral, no vertical → volvemos al centro clásico */
        background-position: center;
    }
}
.cm-pageheader__overlay {
    position: absolute; inset: 0;
    /* Overlay neutro (negro suave) en lugar del azul saturado: deja vivos los colores
       de la foto y solo aporta contraste para que el texto blanco se lea.
       Top muy transparente · centro medio · bottom un poco más oscuro detrás del título. */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, .12) 0%,
        rgba(0, 0, 0, .35) 55%,
        rgba(0, 0, 0, .60) 100%
    );
}
.cm-pageheader__caption {
    color: var(--cm-yellow);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 .75rem;
}
.cm-pageheader__title {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: var(--cm-lh-tight);
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.cm-pageheader__bc {
    background: var(--cm-bg-soft);
    padding-block: var(--cm-space-3);
    border-bottom: 1px solid var(--cm-border-soft);
    font-size: var(--cm-fs-sm);
}
.cm-pageheader__bc-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .25rem; align-items: center;
}
.cm-pageheader__bc-item + .cm-pageheader__bc-item::before {
    content: '/'; color: var(--cm-muted); margin-inline: .35rem;
}
.cm-pageheader__bc-item.is-current { color: var(--cm-text-soft); }
.cm-pageheader__bc-item a { color: var(--cm-blue); }
.cm-pageheader__bc-item a:hover { color: var(--cm-yellow-600); }


/* =============================================================================
   5. PÁGINAS — overrides puntuales
   ========================================================================= */

/* ---------- Información del colegio ---------- */
.cm-info-intro__img {
    max-width: 100%;
    height: auto;
}
.cm-info-intro__title {
    color: var(--cm-blue);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 var(--cm-space-3);
}
.cm-info-intro__rule,
.cm-block__rule,
.cm-monti__rule {
    display: block;
    width: 60px;
    height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin-bottom: var(--cm-space-4);
}
.cm-info-intro p { text-align: justify; line-height: var(--cm-lh-normal); }

/* Cards "Propósito / Visión" + "Misión" — lado a lado en col-lg-6.
   Usan el mismo fondo dorado que la sección "modelo propio" (token reusable). */
.cm-mv__card {
    background: var(--cm-gold-gradient);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-6);
    height: 100%;
    box-shadow: var(--cm-card-shadow);
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-mv__card:hover {
    box-shadow: var(--cm-card-shadow-hover);
    transform: translateY(-3px);
}
.cm-mv__header {
    display: flex;
    align-items: center;
    gap: var(--cm-space-3);
    margin-bottom: var(--cm-space-3);
}
.cm-mv__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    padding: 10px;
    background: #fff;
    border-radius: var(--cm-radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(255, 255, 255, .5);
    object-fit: contain;
}
.cm-mv__title {
    color: var(--cm-card-title);
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: var(--cm-fw-bold);
    margin: 0;
    line-height: var(--cm-lh-snug);
}
.cm-mv__rule {
    display: block; width: 60px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin-bottom: var(--cm-space-4);
}
.cm-mv p { text-align: justify; line-height: var(--cm-lh-normal); margin-bottom: var(--cm-space-3); }
.cm-mv__lead {
    font-family: var(--cm-font-heading);
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    font-weight: var(--cm-fw-bold);
    color: var(--cm-blue);
    text-align: left !important;
    line-height: 1.05;                 /* extra pegado — frase de impacto */
}

/* Banner de cita azul (#192f59) con frase aleatoria */
.cm-quote-banner {
    background: #192f59;
    padding-block: var(--cm-space-8);
    text-align: center;
}
.cm-quote-banner__text {
    color: var(--cm-yellow);
    font-family: var(--cm-font-heading);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-snug);
    margin: 0 auto;
    max-width: 60ch;
}

/* ---------- Galería de videos reutilizable (Valores, Historias…) ---------- */
.cm-galvid__item {
    background: var(--cm-card-bg);
    border-radius: var(--cm-radius);
    overflow: hidden;
    box-shadow: var(--cm-card-shadow);
    height: 100%;
    display: flex; flex-direction: column;
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
}
.cm-galvid__item:hover { transform: translateY(-4px); box-shadow: var(--cm-card-shadow-hover); }

.cm-galvid__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    border: 0; padding: 0;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}
.cm-galvid__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--cm-t-slow) var(--cm-ease), filter var(--cm-t) var(--cm-ease);
}
.cm-galvid__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 48, 91, .15), rgba(0, 48, 91, .55));
    transition: background-color var(--cm-t) var(--cm-ease);
}
.cm-galvid__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 3.5rem;
    text-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    transition: transform var(--cm-t) var(--cm-ease), color var(--cm-t) var(--cm-ease);
    pointer-events: none;
}
.cm-galvid__thumb:hover img { transform: scale(1.06); filter: brightness(.95); }
.cm-galvid__thumb:hover .cm-galvid__play { color: var(--cm-yellow); transform: translate(-50%, -50%) scale(1.1); }

.cm-galvid__body {
    padding: var(--cm-space-4) var(--cm-space-5) var(--cm-space-5);
    flex: 1;
    display: flex; flex-direction: column;
    gap: var(--cm-space-2);
}
.cm-galvid__title {
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    color: var(--cm-card-title);
    line-height: var(--cm-lh-snug);
    margin: 0;
}
.cm-galvid__desc {
    color: var(--cm-card-text);
    font-size: var(--cm-fs-sm);
    line-height: 1.5;
    margin: 0;
}


/* ---------- Página de Contacto por campus ---------- */
.cm-contacto__title {
    color: var(--cm-blue);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 var(--cm-space-3);
}
.cm-contacto__rule {
    display: block; width: 60px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin-bottom: var(--cm-space-4);
}
.cm-contacto__lead { color: var(--cm-text-soft); margin-bottom: var(--cm-space-5); }
.cm-contacto__form { background: var(--cm-card-bg); padding: var(--cm-space-6); border-radius: var(--cm-radius); box-shadow: var(--cm-card-shadow); }
.cm-contacto__legal {
    margin-top: var(--cm-space-3);
    color: var(--cm-muted);
    font-size: var(--cm-fs-xs);
    line-height: 1.5;
}
.cm-contacto__legal i { color: var(--cm-blue); margin-right: .25rem; }
.cm-contacto__legal a { color: var(--cm-blue); text-decoration: underline; }
.cm-contacto__form .form-label { font-weight: var(--cm-fw-semibold); color: var(--cm-text); margin-bottom: .35rem; }
.cm-contacto__form .form-control { border-radius: var(--cm-radius-sm); border-color: var(--cm-border); }
.cm-contacto__form .form-control:focus {
    border-color: var(--cm-yellow);
    box-shadow: 0 0 0 0.2rem rgba(249, 206, 6, .15);
}
.cm-req { color: var(--cm-red); }

/* ---------- Sistema de formularios global (.cm-form) ----------
   Validación visual con Bootstrap (no alerts) + spinner en submit. */
.cm-form .form-control,
.cm-form .form-select {
    padding-block: .65rem;
    min-height: calc(1.5em + 1.3rem + 2px);
}
.cm-form textarea.form-control {
    min-height: 7rem;
}
.cm-form .form-label {
    font-weight: var(--cm-fw-semibold);
    color: var(--cm-text);
    margin-bottom: .35rem;
}
.cm-form .form-control.is-invalid,
.cm-form .form-select.is-invalid,
.cm-form textarea.is-invalid {
    border-color: var(--cm-red);
    background-image: none;
    padding-right: .75rem;
}
.cm-form .form-control.is-valid,
.cm-form .form-select.is-valid,
.cm-form textarea.is-valid {
    border-color: var(--cm-green);
    background-image: none;
    padding-right: .75rem;
}
.cm-form .form-control:focus.is-invalid {
    box-shadow: 0 0 0 .2rem rgba(230, 57, 70, .15);
}
.cm-form .invalid-feedback {
    color: var(--cm-red);
    font-size: var(--cm-fs-xs);
    font-weight: var(--cm-fw-medium);
    margin-top: .35rem;
    display: none;
}
.cm-form .form-control.is-invalid ~ .invalid-feedback,
.cm-form textarea.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Botón submit en estado "Enviando…" */
.cm-form__submit.is-sending {
    opacity: .85;
    cursor: progress;
    pointer-events: none;
}
.cm-form__submit.is-sending .spinner-border {
    width: 1rem; height: 1rem;
    vertical-align: -.15em;
}

.cm-contacto__info {
    background: var(--cm-blue);
    color: #fff;
    padding: var(--cm-space-6);
    border-radius: var(--cm-radius);
    border-left: 4px solid var(--cm-yellow);
}
.cm-contacto__info-title { color: var(--cm-yellow); font-weight: var(--cm-fw-bold); margin-bottom: var(--cm-space-4); }
.cm-contacto__info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cm-space-3); }
.cm-contacto__info-list li { display: flex; gap: var(--cm-space-3); align-items: flex-start; }
.cm-contacto__info-list i { color: var(--cm-yellow); font-size: 1.1rem; flex-shrink: 0; margin-top: .15rem; }
.cm-contacto__info-list a { color: #fff; }
.cm-contacto__info-list a:hover { color: var(--cm-yellow); }
.cm-contacto__map iframe { border: 0; border-radius: var(--cm-radius); }


/* ---------- Página Testimonios (Opiniones de padres) ---------- */
.cm-testimonios-intro__title {
    color: var(--cm-blue);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 var(--cm-space-3);
}
.cm-testimonios-intro__rule {
    display: block; width: 60px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
}
/* ---------- Página Admisiones ---------- */
.cm-admisiones-videos { padding-block: var(--cm-section-py) var(--cm-space-6); }

/* Banda con 3 banners horizontales (FICHA · PRUEBA · INSCRIPCIÓN) — sección sin fondo,
   cada card mantiene el look azul institucional. */
.cm-admisiones-pasos--blue {
    background: transparent;
    padding-block: var(--cm-space-8);
}
.cm-paso-banner {
    display: flex;
    align-items: center;
    gap: var(--cm-space-4);
    background: linear-gradient(135deg, var(--cm-blue), var(--cm-blue-footer));
    border: 1px solid rgba(255, 255, 255, .15);
    border-left: 5px solid var(--cm-yellow);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-4) var(--cm-space-5);
    color: #fff;
    box-shadow: var(--cm-shadow-sm);
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
    height: 100%;
}
.cm-paso-banner:hover {
    box-shadow: var(--cm-shadow);
    transform: translateY(-2px);
}
.cm-paso-banner__num {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    background: var(--cm-yellow);
    color: var(--cm-text);
    border-radius: 50%;
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-xl);
    font-weight: var(--cm-fw-bold);
}
.cm-paso-banner__circle {
    flex-shrink: 0;
    display: inline-grid; place-items: center;
    width: 80px; height: 80px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--cm-shadow-sm);
}
.cm-paso-banner__circle img { max-width: 52px; max-height: 52px; }
.cm-paso-banner__content { flex: 1; }
.cm-paso-banner__title {
    color: #fff;
    font-family: var(--cm-font-heading);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: var(--cm-fw-bold);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 .25rem;
}
.cm-paso-banner__subtitle {
    color: rgba(255, 255, 255, .85);
    font-size: var(--cm-fs-sm);
    margin: 0;
}
.cm-paso-banner__arrow {
    color: var(--cm-yellow);
    font-size: 2rem;
    flex-shrink: 0;
    opacity: .7;
}
.cm-paso-banner:last-child .cm-paso-banner__arrow { display: none; }

/* En layout col-md-4 (3 en línea) reducimos un poquito el tamaño del círculo
   para que entren los 3 banners cómodos. */
@media (min-width: 768px) {
    .cm-paso-banner__circle { width: 64px; height: 64px; }
    .cm-paso-banner__circle img { max-width: 40px; max-height: 40px; }
    .cm-paso-banner__num { width: 40px; height: 40px; font-size: var(--cm-fs-md); }
}

@media (max-width: 575.98px) {
    .cm-paso-banner { flex-wrap: wrap; }
    .cm-paso-banner__circle { width: 60px; height: 60px; }
    .cm-paso-banner__circle img { max-width: 38px; max-height: 38px; }
}

/* Acordeón de Inscripción (3 pasos con formularios) */
.cm-inscripcion__title {
    color: var(--cm-blue);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--cm-fw-bold);
    margin: var(--cm-space-2) 0 0;
}
.cm-inscripcion__rule {
    display: block; width: 80px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin: var(--cm-space-3) auto 0;
}
.cm-inscripcion__accordion { display: flex; flex-direction: column; gap: var(--cm-space-3); }
.cm-inscripcion__accordion .accordion-item {
    background: var(--cm-card-bg);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    overflow: hidden;
    box-shadow: var(--cm-shadow-sm);
}
.cm-inscripcion__btn.accordion-button {
    background: var(--cm-card-bg);
    color: var(--cm-blue-footer);
    padding: var(--cm-space-4) var(--cm-space-5);
    box-shadow: none;
    gap: var(--cm-space-3);
    align-items: flex-start;
}
.cm-inscripcion__btn.accordion-button:not(.collapsed) {
    background: var(--cm-blue-footer);
    color: #fff;
    box-shadow: none;
}
.cm-inscripcion__btn.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}
.cm-inscripcion__btn.accordion-button:focus {
    border-color: var(--cm-yellow);
    box-shadow: 0 0 0 .2rem rgba(249, 206, 6, .15);
}
.cm-inscripcion__btn-icon {
    background: #fff;
    border-radius: 50%;
    padding: 4px;
    flex-shrink: 0;
    object-fit: contain;
}
.cm-inscripcion__btn-content {
    display: flex; flex-direction: column;
    gap: .15rem;
    text-align: left;
}
.cm-inscripcion__btn-content strong {
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
}
.cm-inscripcion__btn-content small { font-weight: var(--cm-fw-normal); font-size: var(--cm-fs-sm); }
.cm-inscripcion__paso3 .cm-inscripcion__firmas { margin-top: var(--cm-space-4); }
.cm-inscripcion__paso3 .cm-inscripcion__firmas img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-card-shadow);
}

/* Form Ficha de Datos (cm-fi) — bloques con título azul */
.cm-fi__block {
    margin-bottom: var(--cm-space-6);
    padding-bottom: var(--cm-space-5);
    border-bottom: 1px solid var(--cm-border);
}
.cm-fi__block:last-of-type { border-bottom: 0; }
.cm-fi__block-title {
    color: var(--cm-blue);
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-lg);
    font-weight: var(--cm-fw-bold);
    margin-bottom: var(--cm-space-4);
    padding-bottom: var(--cm-space-2);
    border-bottom: 3px solid var(--cm-yellow);
    display: inline-block;
}
.cm-fi__fields {
    transition: opacity var(--cm-t) var(--cm-ease);
}
.cm-fi__submit {
    text-align: center;
    padding-top: var(--cm-space-5);
}

/* Sección Finanzas */
.cm-finanzas__title,
.cm-beneficios__title,
.cm-descuentos__title {
    color: var(--cm-blue-footer);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--cm-fw-bold);
    margin: 0;
}
.cm-finanzas__rule,
.cm-beneficios__rule,
.cm-descuentos__rule {
    display: block; width: 80px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin: var(--cm-space-3) auto 0;
}
.cm-finanzas__card {
    background: var(--cm-card-bg);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-5);
    height: 100%;
    border-left: 4px solid var(--cm-yellow);
    box-shadow: var(--cm-card-shadow);
}
.cm-finanzas__card-title {
    color: var(--cm-blue-footer);
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    margin-bottom: var(--cm-space-2);
}
.cm-finanzas__card ul { padding-left: 1.25rem; margin-bottom: 0; }
.cm-finanzas__card li { margin-bottom: .35rem; }

/* Beneficios */
.cm-beneficios__list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 800px;
    display: flex; flex-direction: column;
    gap: var(--cm-space-2);
}
.cm-beneficios__list li {
    display: flex; gap: var(--cm-space-3);
    align-items: flex-start;
    padding: var(--cm-space-3);
    background: var(--cm-bg-soft);
    border-radius: var(--cm-radius-sm);
    line-height: 1.55;
}
.cm-beneficios__list i {
    color: var(--cm-blue-footer);
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: .15rem;
}

/* Descuentos */
.cm-descuentos__card {
    display: flex;
    gap: var(--cm-space-4);
    background: var(--cm-card-bg);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-5);
    box-shadow: var(--cm-card-shadow);
    height: 100%;
    align-items: flex-start;
}
.cm-descuentos__icon { flex-shrink: 0; }
.cm-descuentos__card-title {
    color: var(--cm-blue-footer);
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    margin-bottom: var(--cm-space-2);
}
.cm-descuentos__card-text { color: var(--cm-text-soft); font-size: var(--cm-fs-sm); margin: 0; }
.cm-descuentos__subtitle {
    color: var(--cm-blue);
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    margin-top: var(--cm-space-6);
    margin-bottom: var(--cm-space-3);
}
.cm-descuentos__table thead th {
    background: var(--cm-blue-footer);
    color: #fff;
    border: 0;
}
.cm-descuentos__table td { vertical-align: middle; }
.cm-descuentos__nota { color: var(--cm-muted); margin-top: var(--cm-space-2); }


.cm-admisiones-intro__title {
    color: var(--cm-blue);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--cm-fw-bold);
    margin: var(--cm-space-2) 0 0;
}
.cm-admisiones-intro__rule {
    display: block; width: 80px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin: var(--cm-space-3) auto var(--cm-space-5);
}
.cm-admisiones-intro p { text-align: justify; line-height: var(--cm-lh-normal); }

.cm-admisiones-pasos__title {
    color: var(--cm-blue);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--cm-fw-bold);
    margin: var(--cm-space-2) 0 0;
}
.cm-admisiones-pasos__rule {
    display: block; width: 80px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin: var(--cm-space-3) auto 0;
}

/* Cards de pasos */
.cm-paso {
    position: relative;
    background: var(--cm-card-bg);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-7) var(--cm-space-5) var(--cm-space-5);
    height: 100%;
    box-shadow: var(--cm-card-shadow);
    text-align: center;
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
}
.cm-paso:hover { transform: translateY(-4px); box-shadow: var(--cm-card-shadow-hover); }
.cm-paso__num {
    position: absolute;
    top: -22px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 44px;
    background: var(--cm-yellow);
    color: var(--cm-text);
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--cm-font-heading);
    font-weight: var(--cm-fw-bold);
    font-size: var(--cm-fs-md);
    box-shadow: var(--cm-shadow);
}
.cm-paso__icon {
    color: var(--cm-blue);
    font-size: 2.5rem;
    margin-bottom: var(--cm-space-3);
}
.cm-paso__title {
    color: var(--cm-blue);
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    margin-bottom: var(--cm-space-2);
}
.cm-paso__text {
    color: var(--cm-text-soft);
    font-size: var(--cm-fs-sm);
    margin-bottom: var(--cm-space-4);
}
.cm-paso__cta {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--cm-blue);
    font-weight: var(--cm-fw-semibold);
    text-decoration: none;
}
.cm-paso__cta:hover { color: var(--cm-yellow-600); }


/* ---------- Página Preguntas Frecuentes ---------- */
.cm-faq__title {
    color: var(--cm-blue);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--cm-fw-bold);
    margin: var(--cm-space-2) 0 0;
}
.cm-faq__rule {
    display: block; width: 80px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin: var(--cm-space-3) auto 0;
}
.cm-faq__video {
    aspect-ratio: 16/9;
}
.cm-faq__list { display: flex; flex-direction: column; gap: var(--cm-space-2); }
.cm-faq__item {
    background: var(--cm-card-bg);
    border-radius: var(--cm-radius);
    border: 1px solid var(--cm-border);
    overflow: hidden;
    box-shadow: var(--cm-shadow-sm);
}
.cm-faq__btn.accordion-button {
    background: var(--cm-card-bg);
    color: var(--cm-blue-footer);     /* #0066a8 */
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    padding: var(--cm-space-4) var(--cm-space-5);
    box-shadow: none;
}
.cm-faq__btn.accordion-button:not(.collapsed) {
    background: var(--cm-blue-footer);
    color: #fff;
    box-shadow: none;
}
.cm-faq__btn.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);  /* flecha blanca cuando está abierto */
}
.cm-faq__btn.accordion-button:focus {
    border-color: var(--cm-yellow);
    box-shadow: 0 0 0 .2rem rgba(249, 206, 6, .15);
}
.cm-faq__body {
    padding: var(--cm-space-5);
    color: var(--cm-text);
    line-height: var(--cm-lh-normal);
}
.cm-faq__body p { margin-bottom: var(--cm-space-3); }
.cm-faq__body p:last-child { margin-bottom: 0; }
.cm-faq__body ul { margin-bottom: var(--cm-space-3); padding-left: 1.25rem; }
.cm-faq__body ul ul { margin-block: .35rem; }
.cm-faq__body strong { color: var(--cm-blue); }
.cm-faq__body a { color: var(--cm-blue); text-decoration: underline; text-underline-offset: 3px; }


.cm-testimonios-intro__lead {
    color: var(--cm-blue);
    font-size: var(--cm-fs-md);
    margin-bottom: var(--cm-space-2);
}
.cm-testimonios-intro p { text-align: justify; line-height: var(--cm-lh-normal); }

.cm-testimonios-grid { padding-block: var(--cm-section-py); }

/* ---------- Cards de testimonios (componente reutilizable) ---------- */
.cm-testig__card {
    background: var(--cm-card-bg);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-6) var(--cm-space-5);
    height: 100%;
    box-shadow: var(--cm-card-shadow);
    border-top: 4px solid var(--cm-yellow);
    display: flex; flex-direction: column;
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
}
.cm-testig__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cm-card-shadow-hover);
}

/* Header con avatar + icono comillas */
.cm-testig__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--cm-space-3);
}
.cm-testig__avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--cm-yellow);
    background: var(--cm-bg-soft);
}
.cm-testig__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cm-testig__avatar--placeholder {
    display: grid; place-items: center;
    background: var(--cm-blue);
    color: var(--cm-yellow);
    font-family: var(--cm-font-heading);
    font-weight: var(--cm-fw-bold);
    font-size: 1.5rem;
    letter-spacing: .05em;
}
.cm-testig__icon {
    color: var(--cm-yellow);
    font-size: 2.5rem;
    line-height: 1;
    opacity: .85;
}
.cm-testig__quote {
    margin: 0;
    flex: 1;
}
.cm-testig__quote p {
    color: var(--cm-text);
    font-size: var(--cm-fs-base);
    line-height: 1.65;
    text-align: justify;
    margin: 0;
}
.cm-testig__footer {
    margin-top: var(--cm-space-4);
    padding-top: var(--cm-space-3);
    border-top: 1px solid var(--cm-border);
    display: flex; flex-direction: column;
    gap: .15rem;
}
.cm-testig__autor {
    color: var(--cm-blue);
    font-family: var(--cm-font-heading);
    font-weight: var(--cm-fw-bold);
    font-size: var(--cm-fs-md);
}
.cm-testig__role {
    color: var(--cm-muted);
    font-size: var(--cm-fs-sm);
}


/* ---------- Páginas de Niveles (componente reutilizable) ---------- */
.cm-nivel__title {
    color: var(--cm-blue);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0;
}
.cm-nivel__rule {
    display: block; width: 80px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin: var(--cm-space-3) 0 var(--cm-space-4);
}
.cm-nivel__intro {
    color: var(--cm-text-soft);
    font-size: var(--cm-fs-md);
    line-height: var(--cm-lh-normal);
    margin-bottom: var(--cm-space-5);
}

/* Subniveles (cada subnivel es una columna con materias) */
.cm-nivel__subgrid { margin-bottom: var(--cm-space-6); }
.cm-nivel__sub {
    background: var(--cm-card-bg);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-5);
    height: 100%;
    box-shadow: var(--cm-card-shadow);
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-nivel__sub:hover { box-shadow: var(--cm-card-shadow-hover); transform: translateY(-2px); }
.cm-nivel__sub-title {
    color: #fff;
    background: var(--cm-blue-footer);    /* #0066a8 */
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-base);
    font-weight: var(--cm-fw-bold);
    text-align: center;
    padding: var(--cm-space-2) var(--cm-space-3);
    margin: calc(-1 * var(--cm-space-5)) calc(-1 * var(--cm-space-5)) var(--cm-space-4);
    border-radius: var(--cm-radius) var(--cm-radius) 0 0;
}
.cm-nivel__sub-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: .35rem;
}
.cm-nivel__sub-list li {
    display: flex; align-items: flex-start;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--cm-border-soft);
    color: var(--cm-text);
    font-size: var(--cm-fs-sm);
    line-height: 1.4;
}
.cm-nivel__sub-list li:last-child { border-bottom: 0; }
.cm-nivel__sub-list i { color: var(--cm-yellow); flex-shrink: 0; margin-top: .15rem; }

.cm-nivel__nota {
    background: var(--cm-bg-soft);
    border-left: 4px solid var(--cm-yellow);
    padding: var(--cm-space-3) var(--cm-space-4);
    color: var(--cm-text);
    font-size: var(--cm-fs-sm);
    line-height: var(--cm-lh-normal);
    margin: var(--cm-space-5) 0;
    border-radius: 0 var(--cm-radius) var(--cm-radius) 0;
}

.cm-nivel__actions {
    display: flex; flex-wrap: wrap; gap: var(--cm-space-3);
    align-items: center;
}


/* ---------- Páginas de Campus (Cortijo / Los Álamos) ---------- */
.cm-campus__title {
    color: var(--cm-blue);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 var(--cm-space-4);
}
.cm-campus p { line-height: var(--cm-lh-normal); }
.cm-campus__heading {
    color: var(--cm-blue);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: var(--cm-fw-bold);
    border-bottom: 3px solid var(--cm-yellow);
    padding-bottom: var(--cm-space-2);
    margin: var(--cm-space-6) 0 var(--cm-space-4);
    display: inline-block;
}
.cm-campus__highlight { color: var(--cm-blue-footer); font-weight: var(--cm-fw-bold); }
.cm-campus__block { margin-block: var(--cm-space-5); }
.cm-campus__sep { border-color: var(--cm-yellow); border-top-width: 3px; opacity: .7; max-width: 200px; margin: var(--cm-space-6) 0; }

/* Grid de niveles: 2 col móvil, 5 col desktop (incluye HighSchool) */
.cm-campus__levels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cm-space-3);
}
@media (min-width: 768px) {
    .cm-campus__levels { grid-template-columns: repeat(5, 1fr); }
}

/* Cards de niveles */
.cm-campus__level {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    border-radius: var(--cm-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    box-shadow: var(--cm-card-shadow);
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
}
.cm-campus__level:hover { transform: translateY(-3px); box-shadow: var(--cm-card-shadow-hover); }
.cm-campus__level-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 48, 91, .15), rgba(0, 48, 91, .8));
}
.cm-campus__level-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--cm-space-3);
    color: #fff;
    font-family: var(--cm-font-heading);
    font-weight: var(--cm-fw-bold);
    font-size: var(--cm-fs-md);
    text-align: center;
    z-index: 1;
}

/* Lista de bachilleratos */
.cm-campus__bachilleratos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; flex-direction: column;
    gap: var(--cm-space-2);
}
.cm-campus__bachilleratos a {
    display: flex; align-items: center; gap: var(--cm-space-2);
    padding: var(--cm-space-3) var(--cm-space-4);
    background: var(--cm-bg-soft);
    border-radius: var(--cm-radius);
    color: var(--cm-text);
    text-decoration: none;
    font-weight: var(--cm-fw-medium);
    transition: background-color var(--cm-t) var(--cm-ease), color var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-campus__bachilleratos a:hover {
    background: var(--cm-blue);
    color: #fff;
    transform: translateX(4px);
}
.cm-campus__bachilleratos i { color: var(--cm-yellow); font-size: 1.2rem; flex-shrink: 0; }
.cm-campus__bachilleratos a:hover i { color: var(--cm-yellow); }


/* ---------- Sidebar de Campus (componente reutilizable) ---------- */
.cm-aside {
    position: sticky;
    top: calc(var(--cm-nav-h) + var(--cm-space-4));
}
.cm-aside__title {
    color: var(--cm-blue);
    font-size: var(--cm-fs-lg);
    font-weight: var(--cm-fw-bold);
    text-align: center;
    margin: 0 0 var(--cm-space-3);
}
.cm-aside__virtual {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border: 0; padding: 0;
    border-radius: var(--cm-radius);
    overflow: hidden;
    background: #000;
    cursor: pointer;
    box-shadow: var(--cm-card-shadow);
    margin-bottom: var(--cm-space-5);
}
.cm-aside__virtual img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cm-t-slow) var(--cm-ease); }
.cm-aside__virtual-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 48, 91, .15), rgba(0, 48, 91, .55)); }
.cm-aside__virtual-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 3rem;
    text-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    pointer-events: none;
    transition: color var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-aside__virtual:hover img { transform: scale(1.05); }
.cm-aside__virtual:hover .cm-aside__virtual-play { color: var(--cm-yellow); transform: translate(-50%, -50%) scale(1.1); }

/* Caja de Admisiones */
.cm-aside__box {
    position: relative;
    border-radius: var(--cm-radius);
    overflow: hidden;
    background-size: cover;
    background-position: right center;
    box-shadow: var(--cm-card-shadow);
}
.cm-aside__box-overlay {
    position: absolute; inset: 0;
    /* Overlay azul más liviano para que el diseño del fondo se aprecie,
       pero conservando legibilidad del texto blanco encima. */
    background: linear-gradient(135deg, rgba(0, 48, 91, .68), rgba(0, 34, 64, .55));
}
.cm-aside__box-content {
    position: relative;
    padding: var(--cm-space-6);
    color: #fff;
}
.cm-aside__box-title {
    color: #fff;
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    margin: 0 0 .35rem;
}
.cm-aside__box-sub {
    color: var(--cm-yellow);
    font-weight: var(--cm-fw-semibold);
    font-size: var(--cm-fs-sm);
    margin: 0 0 var(--cm-space-3);
}
.cm-aside__box-address { color: rgba(255, 255, 255, .9); font-size: var(--cm-fs-sm); margin: 0 0 var(--cm-space-3); line-height: 1.5; }
.cm-aside__box-info {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--cm-space-3);
    font-size: var(--cm-fs-sm);
}
.cm-aside__box-info li { margin-bottom: .25rem; line-height: 1.5; }
.cm-aside__box-info strong { color: var(--cm-yellow); margin-right: .25rem; }
.cm-aside__box-info a { color: #fff; text-decoration: none; }
.cm-aside__box-info a:hover { color: var(--cm-yellow); text-decoration: underline; }
.cm-aside__box-hours {
    color: var(--cm-yellow);
    font-size: var(--cm-fs-sm);
    font-weight: var(--cm-fw-semibold);
    margin: 0 0 var(--cm-space-4);
}
.cm-aside__box-subtitle {
    color: #fff;
    font-size: var(--cm-fs-base);
    font-weight: var(--cm-fw-bold);
    margin: 0 0 var(--cm-space-2);
}
.cm-aside__box-social {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--cm-space-4);
    display: flex; gap: .5rem;
}
.cm-aside__box-social a {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: var(--cm-yellow);
    transition: background-color var(--cm-t) var(--cm-ease), color var(--cm-t) var(--cm-ease);
}
.cm-aside__box-social a:hover { background: var(--cm-yellow); color: var(--cm-blue); }


/* ---------- Tabs de servicios del campus ---------- */
.cm-services-tabs__img {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-card-shadow);
    margin-inline: auto;
    display: block;
}
/* Modificador para logos / iconos: tamaño compacto y sin sombra ni borde */
.cm-services-tabs__img--logo {
    max-width: 240px;
    box-shadow: none;
    border-radius: 0;
}


/* ---------- Página Historias de éxito ---------- */
.cm-historias-intro__title {
    color: var(--cm-blue);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: var(--cm-space-2) 0 0;
}
.cm-historias-intro__rule {
    display: block; width: 80px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin: var(--cm-space-3) auto var(--cm-space-4);
}
.cm-historias-intro__text {
    color: var(--cm-text-soft);
    font-size: var(--cm-fs-md);
    line-height: var(--cm-lh-normal);
    max-width: 65ch;
    margin: 0 auto;
}
.cm-historias-grid { padding-block: var(--cm-section-py); }


/* ---------- Página Nuestros Valores ---------- */
.cm-valores-intro__title {
    color: var(--cm-blue);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: var(--cm-space-2) 0 0;
}
.cm-valores-intro__rule {
    display: block; width: 80px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin: var(--cm-space-3) auto var(--cm-space-4);
}
.cm-valores-intro__text {
    color: var(--cm-text-soft);
    font-size: var(--cm-fs-md);
    line-height: var(--cm-lh-normal);
    max-width: 65ch;
    margin: 0 auto;
}
.cm-valores-grid { padding-block: var(--cm-section-py); }


/* ---------- Historia del colegio (timeline) ---------- */
.cm-historia-intro { padding-block: var(--cm-space-10) var(--cm-space-6); text-align: center; }
.cm-historia-intro__rule {
    display: block; width: 305px; max-width: 80%;
    height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin: 0 auto var(--cm-space-5);
}
.cm-historia-intro__title {
    color: var(--cm-blue-footer);   /* #0066a8 */
    font-family: var(--cm-font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-snug);
    margin: 0 auto var(--cm-space-4);
    max-width: 60ch;
}
.cm-historia-intro__text {
    color: var(--cm-text-soft);
    font-size: var(--cm-fs-md);
    line-height: var(--cm-lh-normal);
    max-width: 75ch;
    margin: 0 auto var(--cm-space-4);
    text-align: justify;
}

.cm-timeline-wrap {
    background: var(--cm-bg-soft);
    padding-block: var(--cm-space-10);
}

/* Línea vertical de la timeline */
.cm-timeline {
    list-style: none;
    margin: 0; padding: 0;
    position: relative;
    max-width: 1100px;
    margin-inline: auto;
}
.cm-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
}

/* Items: alternados a la izquierda y la derecha */
.cm-timeline__item {
    position: relative;
    width: 50%;
    padding: var(--cm-space-3) var(--cm-space-6);
    box-sizing: border-box;
}
.cm-timeline__item--left  { left: 0; padding-right: var(--cm-space-8); text-align: right; }
.cm-timeline__item--right { left: 50%; padding-left: var(--cm-space-8); }

/* Punto azul en la timeline */
.cm-timeline__dot {
    position: absolute;
    top: 1.5rem;
    width: 22px; height: 22px;
    background: var(--cm-blue);
    border: 4px solid var(--cm-yellow);
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--cm-bg-soft);  /* halo del fondo de la sección */
}
.cm-timeline__item--left  .cm-timeline__dot { right: -11px; }
.cm-timeline__item--right .cm-timeline__dot { left:  -11px; }

/* Card del hito */
.cm-timeline__card {
    background: var(--cm-card-bg);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-5);
    box-shadow: var(--cm-card-shadow);
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
    position: relative;
}
.cm-timeline__card:hover { transform: translateY(-3px); box-shadow: var(--cm-card-shadow-hover); }

/* Flecha del card apuntando a la línea */
.cm-timeline__card::before {
    content: '';
    position: absolute;
    top: 1.6rem;
    width: 0; height: 0;
    border: 10px solid transparent;
}
.cm-timeline__item--left  .cm-timeline__card::before { right: -20px; border-left-color:  var(--cm-card-bg); }
.cm-timeline__item--right .cm-timeline__card::before { left:  -20px; border-right-color: var(--cm-card-bg); }

.cm-timeline__head {
    display: flex; align-items: baseline; gap: .5rem;
    margin-bottom: var(--cm-space-2);
}
.cm-timeline__item--left .cm-timeline__head { justify-content: flex-end; }

.cm-timeline__year {
    font-family: var(--cm-font-heading);
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    font-weight: var(--cm-fw-bold);
    color: var(--cm-blue-footer);    /* #0066a8 */
    line-height: 1;
}
.cm-timeline__sep   { color: var(--cm-muted); }
.cm-timeline__label { color: var(--cm-blue-footer); font-weight: var(--cm-fw-bold); }

.cm-timeline__text {
    color: var(--cm-text);
    line-height: var(--cm-lh-normal);
    margin: 0;
    text-align: justify;
}
.cm-timeline__item--left .cm-timeline__text { text-align: justify; }

.cm-timeline__closing,
.cm-timeline__lead {
    text-align: center;
    color: var(--cm-blue);
    font-style: italic;
    font-size: var(--cm-fs-md);
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}
.cm-timeline__closing { margin-top: var(--cm-space-8); }
.cm-timeline__lead    { margin-bottom: var(--cm-space-8); }

/* Móvil: timeline a un solo lado */
@media (max-width: 767.98px) {
    .cm-timeline::before { left: 20px; transform: none; }
    .cm-timeline__item,
    .cm-timeline__item--left,
    .cm-timeline__item--right {
        width: 100%;
        left: 0;
        padding: var(--cm-space-3) 0 var(--cm-space-3) 50px;
        text-align: left;
    }
    .cm-timeline__item--left  .cm-timeline__dot,
    .cm-timeline__item--right .cm-timeline__dot { left: 9px; right: auto; }
    .cm-timeline__item--left  .cm-timeline__head,
    .cm-timeline__item--left  .cm-timeline__text { text-align: left; justify-content: flex-start; }
    .cm-timeline__item--left  .cm-timeline__card::before,
    .cm-timeline__item--right .cm-timeline__card::before {
        left: -20px; right: auto;
        border: 10px solid transparent;
        border-right-color: var(--cm-card-bg);
        border-left-color: transparent;
    }
}


/* ---------- Razones para elegir CM ---------- */
.cm-razones-intro__title {
    color: var(--cm-blue);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 var(--cm-space-3);
}
.cm-razones-intro__rule {
    display: block; width: 60px; height: 4px;
    background: var(--cm-yellow);
    border-radius: 2px;
    margin-bottom: var(--cm-space-4);
}
.cm-razones-intro p { text-align: justify; line-height: var(--cm-lh-normal); }
.cm-razones-intro__claim {
    margin-top: var(--cm-space-5);
    color: var(--cm-blue);
    font-family: var(--cm-font-heading);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: var(--cm-fw-bold);
    font-style: italic;
    text-align: center;
    line-height: var(--cm-lh-snug);
}

/* Sección "Un Colegio con un modelo propio" — fondo dorado tramado elegante */
.cm-modelo {
    position: relative;
    padding-block: var(--cm-space-12);
    /* Degradado dorado limpio — usa el token reutilizable --cm-gold-gradient.
       Para cambiar el tono dorado en TODO el sitio, ajustar --cm-gold-light /
       --cm-gold-mid / --cm-gold-soft en :root. */
    background: var(--cm-gold-gradient);
    color: var(--cm-text);
    overflow: hidden;
}
.cm-modelo::before,
.cm-modelo::after {
    /* Líneas decorativas doradas arriba y abajo (token --cm-gold-edge) */
    content: '';
    position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--cm-gold-edge) 50%, transparent 100%);
}
.cm-modelo::before { top: 0; }
.cm-modelo::after  { bottom: 0; }
.cm-modelo__overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    /* Brillo sutil al centro para dar elegancia */
    background: radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, .25) 0%, transparent 70%);
}
.cm-modelo__title {
    color: #0f6fa9;
    font-family: var(--cm-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 var(--cm-space-4);
}
.cm-modelo__lead {
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    color: var(--cm-text);
    margin-bottom: var(--cm-space-3);
}
.cm-modelo__list {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.7;
    color: var(--cm-text);
}
.cm-modelo__list li { margin-bottom: .25rem; }
.cm-modelo__diagrama {
    max-width: 100%;
    width: min(90%, 520px);
    height: auto;
}

@media (max-width: 575.98px) {
    .cm-modelo { background-attachment: scroll; padding-block: var(--cm-space-8); }
}

/* Grid de 12 razones — fondo gris suave + tarjetas blancas */
.cm-razones-grid {
    background: var(--cm-bg-soft);
    padding-block: var(--cm-section-py);
}
.cm-razones-grid__item {
    background: var(--cm-card-bg);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-5);
    height: 100%;
    box-shadow: var(--cm-card-shadow);
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
}
.cm-razones-grid__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--cm-card-shadow-hover);
}
.cm-razones-grid__icon {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px;
    background: var(--cm-card-icon-bg);
    border-radius: var(--cm-radius);
    margin-bottom: var(--cm-space-4);
}
.cm-razones-grid__icon img { width: 36px; height: 36px; object-fit: contain; }
.cm-razones-grid__title {
    font-family: var(--cm-font-heading);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    color: var(--cm-card-title);
    margin: 0 0 var(--cm-space-2);
}
.cm-razones-grid__text {
    color: var(--cm-card-text);
    font-size: var(--cm-fs-sm);
    line-height: 1.55;
    margin: 0;
}

/* Monti la mascota */
.cm-monti__img {
    max-width: 100%;
    height: auto;
    border-radius: var(--cm-radius);
}
.cm-monti__title {
    color: var(--cm-blue);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin-bottom: var(--cm-space-4);
}
.cm-monti p { text-align: justify; line-height: 1.55; }
.cm-monti__list {
    list-style: none;
    padding: 0;
    margin-block: var(--cm-space-4);
    display: flex; flex-direction: column;
    gap: var(--cm-space-3);
}
.cm-monti__list li {
    padding-left: 1.5rem;
    text-align: justify;
    line-height: 1.55;
    position: relative;
}
.cm-monti__list li::before {
    content: '';
    position: absolute;
    left: 0; top: .55rem;
    width: 8px; height: 8px;
    background: var(--cm-yellow);
    border-radius: 50%;
}
.cm-monti__list strong { color: var(--cm-blue-footer); }   /* azul oscuro #0066a6 */
.cm-monti__highlight { color: var(--cm-blue-footer); font-size: var(--cm-fs-md); }

/* ---------- Tipografía rica de contenido HTML editable (vista _default) ---------- */
.cm-prose {
    max-width: 72ch;
    margin-inline: auto;
    color: var(--cm-text);
    font-size: var(--cm-fs-md);
    line-height: var(--cm-lh-normal);
}
.cm-prose h2 { font-size: var(--cm-fs-2xl); margin-top: var(--cm-space-8); }
.cm-prose h3 { font-size: var(--cm-fs-xl); margin-top: var(--cm-space-6); }
.cm-prose img { border-radius: var(--cm-radius); margin-block: var(--cm-space-4); }
.cm-prose ul, .cm-prose ol { padding-left: 1.5rem; }
.cm-prose blockquote {
    border-left: 4px solid var(--cm-yellow);
    padding: var(--cm-space-3) var(--cm-space-5);
    background: var(--cm-bg-soft);
    border-radius: 0 var(--cm-radius) var(--cm-radius) 0;
    color: var(--cm-text-soft);
    font-style: italic;
}
.cm-prose a { color: var(--cm-blue); text-decoration: underline; text-underline-offset: 3px; }
.cm-prose a:hover { color: var(--cm-yellow-600); }


/* =============================================================================
   FLOATING CTA — botón flotante con Monti (en todas las páginas)
   ========================================================================= */
.cm-fab {
    position: fixed;
    right: clamp(.75rem, 2vw, 1.5rem);
    bottom: clamp(.75rem, 2vw, 1.5rem);
    z-index: 1050;                    /* por encima del nav sticky pero bajo modales BS */
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: transform var(--cm-t) var(--cm-ease);
}
.cm-fab:hover { transform: translateY(-4px); }
.cm-fab:focus-visible { outline: 0; }
.cm-fab:focus-visible .cm-fab__img { outline: 3px solid var(--cm-yellow); outline-offset: 4px; }

/* Imagen de Monti — animación sutil en loop */
.cm-fab__img {
    width: clamp(96px, 12vw, 140px);
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .25));
    animation: cm-fab-bounce 3s ease-in-out infinite;
}
@keyframes cm-fab-bounce {
    0%, 100% { transform: translateY(0)    rotate(0); }
    50%      { transform: translateY(-6px) rotate(-3deg); }
}

/* Burbuja de invitación */
.cm-fab__bubble {
    position: relative;
    background: var(--cm-yellow);
    color: var(--cm-text);
    font-family: var(--cm-font-heading);
    font-weight: var(--cm-fw-bold);
    font-size: var(--cm-fs-sm);
    line-height: 1.2;
    padding: .55rem .9rem;
    border-radius: var(--cm-radius-pill);
    box-shadow: var(--cm-shadow);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
/* Punta de la burbuja apuntando a Monti */
.cm-fab__bubble::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: var(--cm-yellow);
}

/* La burbuja aparece al hover, en idle pulsa cada cierto tiempo */
.cm-fab:hover .cm-fab__bubble,
.cm-fab:focus-visible .cm-fab__bubble {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 575.98px) {
    /* En móvil ocultamos la burbuja para no estorbar el contenido */
    .cm-fab__bubble { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-fab__img { animation: none; }
}


/* =============================================================================
   6. RESPONSIVE
   ========================================================================= */

@media (max-width: 991.98px) {
    .cm-home-hero__title { font-size: var(--cm-fs-3xl); }
    .cm-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575.98px) {
    h1 { font-size: var(--cm-fs-2xl); }
    .cm-section { padding-block: var(--cm-space-8); }
}


/* =============================================================================
   SERVICIOS DE SOPORTE — Excelencia · HighSchool · Líder en Mí · Certificaciones
   ========================================================================= */

/* Títulos compartidos del bloque */
.cm-excelencia__title,
.cm-hscm__title,
.cm-lider__title,
.cm-cert__title {
    color: var(--cm-blue);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 var(--cm-space-3);
}
.cm-excelencia__rule,
.cm-hscm__rule,
.cm-lider__rule,
.cm-cert__rule {
    display: inline-block;
    width: 60px; height: 3px;
    background: var(--cm-yellow);
    border-radius: 3px;
    margin: 0 auto var(--cm-space-3);
}
.cm-excelencia__subtitle {
    color: var(--cm-blue);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: var(--cm-fw-bold);
    margin: 0 0 var(--cm-space-4);
}
.cm-excelencia__intro {
    max-width: 760px;
    margin: var(--cm-space-3) auto 0;
    color: var(--cm-text-soft);
}

/* ---------- Excelencia Académica: Nav rápido por anchors (banda dorada) ---------- */
.cm-excelencia-nav-section {
    background:
        radial-gradient(ellipse at top left, rgba(255,255,255,.35), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(0,0,0,.06), transparent 60%),
        var(--cm-gold-gradient);
    padding-block: var(--cm-space-8);
    border-top: 1px solid rgba(0,0,0,.04);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.cm-excelencia-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cm-space-4);
}
@media (max-width: 767.98px) {
    .cm-excelencia-nav { grid-template-columns: 1fr; }
}
.cm-excelencia-nav__pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cm-space-4);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-6) var(--cm-space-5);
    color: var(--cm-blue);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(120, 90, 30, .18), inset 0 0 0 1px rgba(255,255,255,.6);
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease), background var(--cm-t) var(--cm-ease);
    overflow: hidden;
}
.cm-excelencia-nav__pill::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--cm-blue), var(--cm-blue-footer));
}
.cm-excelencia-nav__pill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(140deg, rgba(255,255,255,.0) 60%, rgba(255,255,255,.55));
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--cm-t) var(--cm-ease);
}
.cm-excelencia-nav__pill:hover {
    transform: translateY(-4px);
    background: #fff;
    box-shadow: 0 14px 30px rgba(120, 90, 30, .25), inset 0 0 0 1px rgba(255,255,255,.8);
    color: var(--cm-blue);
}
.cm-excelencia-nav__pill:hover::after { opacity: 1; }
.cm-excelencia-nav__num {
    position: relative;
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 64px; height: 64px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 55%),
        linear-gradient(135deg, var(--cm-blue), var(--cm-blue-footer));
    color: #fff;
    border-radius: 50%;
    font-family: var(--cm-font-heading);
    font-weight: var(--cm-fw-bold);
    font-size: 1.85rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.20), inset 0 0 0 2px rgba(255,255,255,.18);
}
.cm-excelencia-nav__text {
    display: flex; flex-direction: column; line-height: 1.1;
    flex: 1;
}
.cm-excelencia-nav__text small {
    font-size: var(--cm-fs-sm);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--cm-text-soft);
    margin-bottom: .15rem;
}
.cm-excelencia-nav__text strong {
    font-family: var(--cm-font-heading);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: var(--cm-fw-bold);
    color: var(--cm-blue);
}
.cm-excelencia-nav__arrow {
    color: var(--cm-blue);
    font-size: 1.6rem;
    opacity: .75;
    transition: transform var(--cm-t) var(--cm-ease);
}
.cm-excelencia-nav__pill:hover .cm-excelencia-nav__arrow {
    transform: translateY(3px);
    opacity: 1;
}

/* ---------- Excelencia Humana: lista de valores ---------- */
.cm-excelencia__valores {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cm-space-2);
}
.cm-excelencia__valores li {
    display: flex;
    align-items: flex-start;
    gap: var(--cm-space-2);
    line-height: var(--cm-lh);
}
.cm-excelencia__valores i {
    color: var(--cm-yellow-600, var(--cm-blue));
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: .15rem;
}
.cm-excelencia__media img {
    width: 100%;
    height: auto;
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow);
}

/* ---------- "Como Alumnos" — 4 cards ---------- */
.cm-alumno-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    overflow: hidden;
    box-shadow: var(--cm-shadow-sm);
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-alumno-card:hover {
    box-shadow: var(--cm-shadow);
    transform: translateY(-3px);
}
.cm-alumno-card__media {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--cm-bg-soft);
}
.cm-alumno-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--cm-t-slow) var(--cm-ease);
}
.cm-alumno-card:hover .cm-alumno-card__media img {
    transform: scale(1.05);
}
.cm-alumno-card__body { padding: var(--cm-space-4); flex: 1; }
.cm-alumno-card__title {
    color: var(--cm-blue);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 var(--cm-space-2);
}
.cm-alumno-card__text {
    color: var(--cm-text-soft);
    font-size: var(--cm-fs-sm);
    margin: 0;
}

/* ---------- Excelencia Académica: cards con ícono ---------- */
.cm-acad-card {
    background: #fff;
    border: 1px solid var(--cm-border);
    border-top: 4px solid var(--cm-yellow);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-5);
    height: 100%;
    box-shadow: var(--cm-shadow-sm);
}
.cm-acad-card__header {
    display: flex;
    align-items: center;
    gap: var(--cm-space-3);
    margin-bottom: var(--cm-space-3);
}
.cm-acad-card__icon {
    flex-shrink: 0;
    display: inline-grid; place-items: center;
    width: 72px; height: 72px;
    background: var(--cm-bg-soft);
    border-radius: 50%;
}
.cm-acad-card__icon img { width: 56px; height: 56px; object-fit: contain; }
.cm-acad-card__title {
    color: var(--cm-blue);
    font-size: var(--cm-fs-lg);
    font-weight: var(--cm-fw-bold);
    margin: 0;
}
.cm-acad-card__body { color: var(--cm-text); }
.cm-acad-card__body p { margin: 0 0 var(--cm-space-3); }
.cm-acad-card__body p:last-child { margin-bottom: 0; }
.cm-excelencia__sublabel {
    color: var(--cm-blue);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-semibold);
    margin: var(--cm-space-3) 0 var(--cm-space-2);
}

/* ---------- HighSchool CM ---------- */
.cm-hscm__lead { font-size: var(--cm-fs-md); line-height: var(--cm-lh); margin-bottom: var(--cm-space-3); }
.cm-hscm-logos__item {
    max-width: 100%; height: 80px; object-fit: contain;
    filter: grayscale(20%); opacity: .9;
    transition: filter var(--cm-t) var(--cm-ease), opacity var(--cm-t) var(--cm-ease);
}
.cm-hscm-logos__item:hover { filter: none; opacity: 1; }
.cm-hscm__acred-text { color: var(--cm-text-soft); margin-bottom: var(--cm-space-5); line-height: var(--cm-lh); }
.cm-hscm__brochure-btn { padding: .9rem 1.6rem; font-weight: var(--cm-fw-semibold); }

/* HighSchool: video trigger */
.cm-hscm-video__trigger {
    position: relative; display: block; width: 100%;
    border: 0; padding: 0;
    border-radius: var(--cm-radius);
    overflow: hidden;
    background: #000;
    cursor: pointer;
    box-shadow: var(--cm-shadow);
    aspect-ratio: 16/9;
}
.cm-hscm-video__trigger img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cm-t-slow) var(--cm-ease); }
.cm-hscm-video__trigger:hover img { transform: scale(1.04); }
.cm-hscm-video__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: grid; place-items: center;
    width: 84px; height: 84px;
    background: var(--cm-yellow);
    color: var(--cm-text);
    border-radius: 50%;
    font-size: 2.4rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    transition: transform var(--cm-t) var(--cm-ease);
}
.cm-hscm-video__trigger:hover .cm-hscm-video__play { transform: translate(-50%, -50%) scale(1.08); }
.cm-hscm-video__caption {
    text-align: center;
    margin: var(--cm-space-6) 0 var(--cm-space-5);
    font-size: var(--cm-fs-md);
    color: var(--cm-text);
    line-height: var(--cm-lh);
}
.cm-hscm-info {
    display: flex; flex-direction: column; gap: var(--cm-space-4);
    align-items: center;
}
.cm-hscm-info img { max-width: 100%; height: auto; border-radius: var(--cm-radius-sm); }

/* Modal de video reutilizable */
.cm-video-modal { background: #000; border: 0; }
.cm-video-modal__close {
    position: absolute; top: -2.5rem; right: 0;
    background: #fff; opacity: 1; padding: .5rem;
    border-radius: 50%; z-index: 10;
}

/* ---------- Programa Líder en Mí ---------- */
.cm-lider__btn { padding: .9rem 1.4rem; font-weight: var(--cm-fw-semibold); }

/* Botón "light" reutilizable — fondo blanco con borde azul, hover relleno azul.
   Pensado para acciones secundarias o sobre fondos grises/claros. */
.cm-btn-light {
    --bs-btn-bg:                  #fff;
    --bs-btn-border-color:        var(--cm-blue);
    --bs-btn-color:               var(--cm-blue);
    --bs-btn-hover-bg:            var(--cm-blue);
    --bs-btn-hover-border-color:  var(--cm-blue);
    --bs-btn-hover-color:         #fff;
    --bs-btn-active-bg:           var(--cm-blue-footer);
    --bs-btn-active-border-color: var(--cm-blue-footer);
    --bs-btn-active-color:        #fff;
    border-width: 1.5px;
    font-weight: var(--cm-fw-semibold);
}
.cm-lider__habitos-img { max-width: 100%; height: auto; border-radius: var(--cm-radius); box-shadow: var(--cm-shadow-sm); }

.cm-lider-eje {
    background: #fff;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-6);
    box-shadow: var(--cm-shadow-sm);
}
.cm-lider-eje__header {
    display: flex;
    align-items: center;
    gap: var(--cm-space-3);
    margin-bottom: var(--cm-space-3);
    padding-bottom: var(--cm-space-3);
    border-bottom: 1px solid var(--cm-border-soft);
}
.cm-lider-eje__title {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: var(--cm-fw-bold);
    margin: 0;
}
.cm-lider-eje--lider     .cm-lider-eje__title { color: #c0392b; }
.cm-lider-eje--cultura   .cm-lider-eje__title { color: #2e7d32; }
.cm-lider-eje--academico .cm-lider-eje__title { color: #0f6fa9; }

.cm-lider-eje--lider     { border-top: 4px solid #c0392b; }
.cm-lider-eje--cultura   { border-top: 4px solid #2e7d32; }
.cm-lider-eje--academico { border-top: 4px solid #0f6fa9; }

.cm-lider-eje__text { color: var(--cm-text); margin-bottom: var(--cm-space-4); line-height: var(--cm-lh); }

.cm-lider-eje__foto {
    overflow: hidden;
    border-radius: var(--cm-radius-sm);
    aspect-ratio: 4/3;
    box-shadow: var(--cm-shadow-sm);
}
.cm-lider-eje__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cm-t-slow) var(--cm-ease); }
.cm-lider-eje__foto:hover img { transform: scale(1.08); }

/* ---------- Certificaciones y Programas ---------- */
.cm-cert-grid { --cm-cert-card-radius: var(--cm-radius); }
.cm-cert-card {
    display: flex; flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--cm-border);
    border-top: 3px solid var(--cm-yellow);
    border-radius: var(--cm-cert-card-radius, var(--cm-radius));
    overflow: hidden;
    text-decoration: none;
    color: var(--cm-text);
    box-shadow: var(--cm-shadow-sm);
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease), border-color var(--cm-t) var(--cm-ease);
}
.cm-cert-card:hover {
    box-shadow: var(--cm-shadow);
    transform: translateY(-4px);
    color: var(--cm-text);
}
.cm-cert-card__media {
    aspect-ratio: 4/3;
    background: var(--cm-bg-soft);
    display: grid; place-items: center;
    padding: var(--cm-space-3);
    overflow: hidden;
}
.cm-cert-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform var(--cm-t-slow) var(--cm-ease); }
.cm-cert-card:hover .cm-cert-card__media img { transform: scale(1.05); }
.cm-cert-card__body {
    padding: var(--cm-space-3) var(--cm-space-3) var(--cm-space-3);
    flex: 1; display: flex; flex-direction: column;
    text-align: center;
}
.cm-cert-card__title {
    color: var(--cm-blue);
    font-size: var(--cm-fs-sm);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 .25rem;
    min-height: 2.5em; /* 2 líneas */
    display: flex; align-items: center; justify-content: center;
}
.cm-cert-card__subtitle {
    color: var(--cm-text-soft);
    font-size: var(--cm-fs-xs);
    margin: 0 0 var(--cm-space-2);
    line-height: 1.3;
}
.cm-cert-card__cta {
    margin-top: auto;
    color: var(--cm-blue);
    font-weight: var(--cm-fw-semibold);
    font-size: var(--cm-fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding-top: var(--cm-space-2);
    border-top: 1px solid var(--cm-border-soft);
}
.cm-cert-card__cta i { transition: transform var(--cm-t) var(--cm-ease); }
.cm-cert-card:hover .cm-cert-card__cta i { transform: translateX(3px); }

/* En anchos pequeños (1-2 cards/línea) las cards se sienten mejor con el body un poco más generoso */
@media (max-width: 767.98px) {
    .cm-cert-card__title { font-size: var(--cm-fs-md); min-height: 0; }
    .cm-cert-card__subtitle { font-size: var(--cm-fs-sm); }
}

/* ---------- Centro Autorizado de Certificación: 2 diplomas grandes por línea ---------- */
.cm-catc__lead { max-width: 740px; margin: var(--cm-space-3) auto 0; color: var(--cm-text-soft); }
.cm-catc__logo {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}
.cm-catc-grid { max-width: 1100px; margin-inline: auto; }
.cm-catc-card {
    background: #fff;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-5);
    box-shadow: var(--cm-shadow-sm);
    height: 100%;
    display: grid; place-items: center;
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-catc-card:hover {
    box-shadow: var(--cm-shadow);
    transform: translateY(-3px);
}
.cm-catc-card img { max-width: 100%; height: auto; }


/* =============================================================================
   PAGOS · FORO · BLOG · PAGINADOR
   ========================================================================= */

/* ---------- Pagos en línea ---------- */
.cm-pagos-intro { padding-block: var(--cm-space-5); }
.cm-pagos-bloques { padding-block: var(--cm-space-6) var(--cm-section-py); }
.cm-pagos__title { color: var(--cm-blue); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: var(--cm-fw-bold); margin: 0 0 var(--cm-space-3); }
.cm-pagos__rule {
    display: inline-block; width: 60px; height: 3px;
    background: var(--cm-yellow); border-radius: 3px;
    margin: 0 auto var(--cm-space-3);
}
.cm-pagos__claim { display: block; max-width: 100%; height: auto; margin: var(--cm-space-4) auto 0; }

.cm-pago-card {
    max-width: 920px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--cm-border);
    border-top: 4px solid var(--cm-yellow);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-8) var(--cm-space-7);
    box-shadow: var(--cm-shadow-sm);
    text-align: center;
}
.cm-pago-card__header {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--cm-space-3);
    margin-bottom: var(--cm-space-5);
}
.cm-pago-card__icon {
    display: inline-grid; place-items: center;
    width: 110px; height: 110px;
    background: var(--cm-bg-soft);
    border-radius: 50%;
    box-shadow: inset 0 0 0 6px #fff, 0 4px 14px rgba(0,0,0,.06);
}
.cm-pago-card__icon img { max-width: 70px; max-height: 70px; object-fit: contain; }
.cm-pago-card__icon--bi i {
    font-size: 3.2rem;
    color: var(--cm-blue);
    line-height: 1;
}
.cm-pago-card__heading { display: flex; flex-direction: column; gap: .25rem; }
.cm-pago-card__tag {
    align-self: center;
    color: var(--cm-blue);
    font-size: var(--cm-fs-xs);
    font-weight: var(--cm-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .12em;
    background: var(--cm-bg-soft);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-pill);
    padding: .25rem .75rem;
}
.cm-pago-card__title {
    color: var(--cm-blue);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: var(--cm-fw-bold);
    margin: 0;
}
.cm-pago-card__subtitle {
    color: var(--cm-text-soft);
    font-size: var(--cm-fs-sm);
    margin: 0;
}
.cm-pago-card__text {
    color: var(--cm-text);
    line-height: var(--cm-lh);
    max-width: 640px;
    margin: 0 auto var(--cm-space-6);
}

/* Botones de pago — BS5 Button con doble línea (sede + acción) */
.cm-pago-card__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cm-space-4);
    padding: var(--cm-space-5) var(--cm-space-3) 0;
    margin-top: var(--cm-space-3);
    border-top: 1px solid var(--cm-border-soft);
}
.cm-pago-btn {
    --bs-btn-bg:           var(--cm-blue);
    --bs-btn-border-color: var(--cm-blue);
    --bs-btn-hover-bg:     var(--cm-blue-footer);
    --bs-btn-hover-border-color: var(--cm-blue-footer);
    --bs-btn-active-bg:    var(--cm-blue-footer);
    --bs-btn-active-border-color: var(--cm-blue-footer);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    min-width: 240px;
    padding: .85rem 1.5rem;
    border-radius: var(--cm-radius);
    font-weight: var(--cm-fw-semibold);
    border-left: 4px solid var(--cm-yellow);
    box-shadow: 0 4px 12px rgba(0, 32, 75, .18);
    transition: transform var(--cm-t) var(--cm-ease), box-shadow var(--cm-t) var(--cm-ease);
}
.cm-pago-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 32, 75, .25);
}
.cm-pago-btn__sede {
    font-size: var(--cm-fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cm-yellow);
    font-weight: var(--cm-fw-semibold);
}
.cm-pago-btn__cta {
    font-size: var(--cm-fs-md);
    display: inline-flex; align-items: center; gap: .5rem;
}
.cm-pago-btn__cta i { font-size: 1.1em; }

@media (max-width: 575.98px) {
    .cm-pago-btn { min-width: 100%; }
}

.cm-pagos-nota {
    max-width: 920px;
    margin: var(--cm-space-6) auto 0;
    background: var(--cm-bg-soft);
    border-left: 4px solid var(--cm-blue);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-4) var(--cm-space-5);
    display: flex; gap: var(--cm-space-3); align-items: flex-start;
    font-size: var(--cm-fs-sm); line-height: var(--cm-lh);
}
.cm-pagos-nota i { color: var(--cm-blue); font-size: 1.5rem; flex-shrink: 0; margin-top: .15rem; }
.cm-pagos-nota p { margin: 0; }
.cm-pagos-nota a { color: var(--cm-blue); font-weight: var(--cm-fw-semibold); }

/* ---------- Foro ---------- */
.cm-foro__title,
.cm-blog__title { color: var(--cm-blue); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: var(--cm-fw-bold); margin: 0 0 var(--cm-space-3); }
.cm-foro__rule,
.cm-blog__rule {
    display: inline-block; width: 60px; height: 3px;
    background: var(--cm-yellow); border-radius: 3px;
    margin: 0 auto var(--cm-space-3);
}

.cm-foro-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    overflow: hidden;
    box-shadow: var(--cm-shadow-sm);
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-foro-card:hover { box-shadow: var(--cm-shadow); transform: translateY(-3px); }
.cm-foro-card__media {
    display: block; aspect-ratio: 16/10; background: var(--cm-bg-soft); overflow: hidden;
}
.cm-foro-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--cm-t-slow) var(--cm-ease);
}
.cm-foro-card:hover .cm-foro-card__media img { transform: scale(1.05); }
.cm-foro-card__body {
    padding: var(--cm-space-4);
    flex: 1; display: flex; flex-direction: column;
    background: var(--cm-bg-soft);
    border-top: 1px solid var(--cm-border-soft);
}
.cm-foro-card__meta {
    display: flex; flex-wrap: wrap; gap: var(--cm-space-3);
    color: var(--cm-text-soft); font-size: var(--cm-fs-xs);
    margin-bottom: var(--cm-space-2);
}
.cm-foro-card__meta i { color: var(--cm-yellow-600, var(--cm-blue)); margin-right: .25rem; }
.cm-foro-card__title {
    color: var(--cm-blue); font-size: var(--cm-fs-md); font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight); margin: 0 0 var(--cm-space-3);
    flex: 1;
}
.cm-foro-card__title a { color: inherit; text-decoration: none; }
.cm-foro-card__title a:hover { color: var(--cm-yellow-600, var(--cm-yellow)); }
.cm-foro-card__cta {
    color: var(--cm-blue); font-weight: var(--cm-fw-semibold); font-size: var(--cm-fs-sm);
    text-decoration: none; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .35rem;
}
.cm-foro-card__cta:hover { color: var(--cm-yellow-600, var(--cm-yellow)); }
.cm-foro-card__cta i { transition: transform var(--cm-t) var(--cm-ease); }
.cm-foro-card:hover .cm-foro-card__cta i { transform: translateX(3px); }

.cm-foro-empty,
.cm-blog-empty { padding: var(--cm-space-8) 0; color: var(--cm-text-soft); }
.cm-foro-empty i,
.cm-blog-empty i { font-size: 3rem; color: var(--cm-border); display: block; margin-bottom: var(--cm-space-3); }

/* ---------- Blog (cards verticales 2 por línea, body gris claro como foro) ---------- */
.cm-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    overflow: hidden;
    box-shadow: var(--cm-shadow-sm);
    transition: box-shadow var(--cm-t) var(--cm-ease), transform var(--cm-t) var(--cm-ease);
}
.cm-blog-card:hover { box-shadow: var(--cm-shadow); transform: translateY(-3px); }
.cm-blog-card__media { display: block; overflow: hidden; aspect-ratio: 16/10; background: var(--cm-bg-soft); }
.cm-blog-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--cm-t-slow) var(--cm-ease);
}
.cm-blog-card:hover .cm-blog-card__media img { transform: scale(1.04); }
.cm-blog-card__body {
    padding: var(--cm-space-4);
    flex: 1; display: flex; flex-direction: column;
    background: var(--cm-bg-soft);
    border-top: 1px solid var(--cm-border-soft);
}
.cm-blog-card__title {
    color: var(--cm-blue); font-size: var(--cm-fs-md); font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight); margin: 0 0 var(--cm-space-2);
}
.cm-blog-card__title a { color: inherit; text-decoration: none; }
.cm-blog-card__title a:hover { color: var(--cm-yellow-600, var(--cm-yellow)); }
.cm-blog-card__meta {
    display: flex; flex-wrap: wrap; gap: var(--cm-space-3);
    color: var(--cm-text-soft); font-size: var(--cm-fs-xs);
    margin-bottom: var(--cm-space-3);
}
.cm-blog-card__meta i { color: var(--cm-yellow-600, var(--cm-blue)); margin-right: .25rem; }
.cm-blog-card__excerpt { color: var(--cm-text); margin-bottom: var(--cm-space-3); flex: 1; line-height: var(--cm-lh); }
.cm-blog-card__excerpt p { margin: 0 0 .5rem; }
.cm-blog-card__cta {
    color: var(--cm-blue); font-weight: var(--cm-fw-semibold); font-size: var(--cm-fs-sm);
    text-decoration: none; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .35rem;
}
.cm-blog-card__cta:hover { color: var(--cm-yellow-600, var(--cm-yellow)); }
.cm-blog-card__cta i { transition: transform var(--cm-t) var(--cm-ease); }
.cm-blog-card:hover .cm-blog-card__cta i { transform: translateX(3px); }

/* ---------- Sidebar widgets (foro, blog, single) ---------- */
.cm-aside-widget {
    background: var(--cm-bg-soft);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: var(--cm-space-5);
    margin-bottom: var(--cm-space-4);
}
.cm-aside-widget__title {
    color: var(--cm-blue);
    font-size: var(--cm-fs-md);
    font-weight: var(--cm-fw-bold);
    margin: 0 0 var(--cm-space-3);
    padding-bottom: var(--cm-space-3);
    border-bottom: 2px solid var(--cm-yellow);
}
.cm-aside-widget__text { color: var(--cm-text); margin: 0; font-size: var(--cm-fs-sm); line-height: var(--cm-lh); }

.cm-aside-links { list-style: none; padding: 0; margin: 0; }
.cm-aside-links li { border-bottom: 1px solid var(--cm-border-soft); }
.cm-aside-links li:last-child { border-bottom: 0; }
.cm-aside-links a {
    display: flex; align-items: center; gap: var(--cm-space-2);
    padding: .65rem 0;
    color: var(--cm-text);
    text-decoration: none;
    font-size: var(--cm-fs-sm);
    transition: color var(--cm-t) var(--cm-ease), padding-left var(--cm-t) var(--cm-ease);
}
.cm-aside-links a i { color: var(--cm-yellow); }
.cm-aside-links a:hover,
.cm-aside-links a.is-active { color: var(--cm-blue); padding-left: .25rem; font-weight: var(--cm-fw-semibold); }

.cm-aside-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cm-space-3); }
.cm-aside-list li { padding-bottom: var(--cm-space-3); border-bottom: 1px solid var(--cm-border-soft); }
.cm-aside-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cm-aside-list a {
    display: grid; grid-template-columns: 70px 1fr; gap: var(--cm-space-3);
    text-decoration: none; color: inherit;
    transition: opacity var(--cm-t) var(--cm-ease);
}
.cm-aside-list a:hover { opacity: .85; }
.cm-aside-list img {
    width: 70px; height: 70px; object-fit: cover; border-radius: var(--cm-radius-sm); background: var(--cm-bg-soft);
}
.cm-aside-list h4 { color: var(--cm-blue); font-size: var(--cm-fs-sm); font-weight: var(--cm-fw-semibold); line-height: 1.25; margin: 0 0 .35rem; }
.cm-aside-list small { color: var(--cm-text-soft); font-size: var(--cm-fs-xs); }
.cm-aside-list small i { color: var(--cm-yellow); margin-right: .2rem; }

/* ---------- Artículo single (foro / blog) ---------- */
.cm-articulo__meta {
    display: flex; flex-wrap: wrap; gap: var(--cm-space-3);
    color: var(--cm-text-soft); font-size: var(--cm-fs-sm);
    margin-bottom: var(--cm-space-3);
}
.cm-articulo__meta i { color: var(--cm-yellow); margin-right: .25rem; }
.cm-articulo__title {
    color: var(--cm-blue);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: var(--cm-fw-bold);
    line-height: var(--cm-lh-tight);
    margin: 0 0 var(--cm-space-4);
}
.cm-articulo__media {
    border-radius: var(--cm-radius);
    overflow: hidden;
    margin-bottom: var(--cm-space-5);
    box-shadow: var(--cm-shadow-sm);
}
.cm-articulo__media img { width: 100%; height: auto; display: block; }
.cm-articulo__body {
    color: var(--cm-text);
    line-height: var(--cm-lh);
    font-size: var(--cm-fs-md);
}
.cm-articulo__body p { margin: 0 0 var(--cm-space-4); }
.cm-articulo__body img { max-width: 100%; height: auto; border-radius: var(--cm-radius-sm); margin: var(--cm-space-3) 0; }
.cm-articulo__body h2,
.cm-articulo__body h3 { color: var(--cm-blue); margin-top: var(--cm-space-5); margin-bottom: var(--cm-space-3); }
.cm-articulo__footer { margin-top: var(--cm-space-6); padding-top: var(--cm-space-4); border-top: 1px solid var(--cm-border-soft); }

/* ---------- Paginador BS5 personalizado ---------- */
.cm-paginador .pagination { gap: .35rem; }
.cm-paginador .page-link {
    border-radius: var(--cm-radius-sm);
    color: var(--cm-blue);
    border-color: var(--cm-border);
    font-weight: var(--cm-fw-semibold);
    transition: background-color var(--cm-t) var(--cm-ease), color var(--cm-t) var(--cm-ease), border-color var(--cm-t) var(--cm-ease);
}
.cm-paginador .page-link:hover {
    background: var(--cm-bg-soft);
    color: var(--cm-blue);
    border-color: var(--cm-yellow);
}
.cm-paginador .page-item.active .page-link {
    background: var(--cm-blue);
    border-color: var(--cm-blue);
    color: #fff;
}
.cm-paginador .page-item.disabled .page-link { color: var(--cm-text-soft); }


/* =============================================================================
   PRINT
   ========================================================================= */
@media print {
    .cm-topbar, .cm-nav, .cm-navmobile, .cm-footer, .cm-cta { display: none !important; }
    a { color: inherit; text-decoration: underline; }
}


/* =============================================================================
   AJUSTES TIPOGRÁFICOS — MÓVIL
   Centralizado: redefinimos los tokens de cuerpo para que TODO el sitio
   reduzca proporciones automáticamente en pantallas pequeñas.
   ========================================================================= */
@media (max-width: 575.98px) {
    :root {
        --cm-fs-body:    0.9rem;     /* 14.4 — antes 16 */
        --cm-fs-body-md: 0.95rem;    /* 15.2 — antes 18 */
        --cm-fs-md:      0.95rem;    /* alinea párrafos de cards/secciones */
        --cm-fs-sm:      0.825rem;   /* 13.2 — antes 14 */

        /* Títulos: bajar la base mínima de los clamps + tokens fijos */
        --cm-fs-xl:      1.2rem;     /* 19.2  — antes 1.5rem (24) */
        --cm-fs-2xl:     1.45rem;    /* 23.2  — antes 2rem (32) */
        --cm-fs-3xl:     1.65rem;    /* 26.4  — antes clamp(2rem, 4vw, 3rem) */
        --cm-fs-4xl:     1.85rem;    /* 29.6  — antes clamp(2.5rem, 5vw, 4rem) */
    }
    /* Page header (h1): tiene su propio clamp, lo bajamos también */
    .cm-pageheader__title { font-size: 1.35rem; line-height: 1.2; }
    .cm-pageheader__caption { font-size: var(--cm-fs-xs); letter-spacing: .08em; margin-bottom: .35rem; }

    /* Slider hero — el título sí lo subimos en móvil para que tenga peso
       respecto al subtítulo (excepción a la regla general de bajar tamaños). */
    .cm-slider__title { font-size: 2rem; line-height: 1.1; }
    .cm-slider__sub   { font-size: var(--cm-fs-xs); letter-spacing: .5px; margin-bottom: .35rem; }
    /* Overlay más fuerte y uniforme en móvil para que el texto destaque
       sobre cualquier punto de la imagen (no solo a la izquierda). */
    .cm-slider__overlay {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .40) 100%),
            rgba(0, 0, 0, .10);
    }
}


/* =============================================================================
   PREFERS-REDUCED-MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}