/* Fuentes propias (antes Google Fonts): solo el subconjunto latino; se descargan solo si la página usa cada una. */
@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/fonts/urbanist-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Urbanist';
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url('/fonts/urbanist-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/caveat.woff2') format('woff2');
}

@font-face {
    font-family: 'Water Brush';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/waterbrush.woff2') format('woff2');
}

/*
 * Ajustes propios de Grupo Geard.
 * Se carga DESPUÉS del CSS vendorizado del template — nunca editar los .css de arriba,
 * cualquier override de diseño va acá.
 *
 * Los selectores de logo/padding de abajo repiten el prefijo ".main-menu-with-bg"
 * porque el template define un override MÁS específico con ese mismo prefijo
 * (VBqgfbndhJ6Z.css ~L4547-4555) que le gana en especificidad a ".main-menu__logo"
 * a secas, sin importar el orden de carga — hay que igualar esa especificidad para
 * que el override de abajo realmente aplique.
 */

/* Color primario: el template trae el naranja (#F57005) como "--eduact-secondary"
   (el nombre es confuso, pero es el color que realmente se usa en botones/acentos/CTAs
   en toda la app — "--eduact-base" es un morado que casi no se ve). Redefinir la
   custom property acá alcanza para recolorear todo sin tocar el CSS vendorizado,
   ya que :root en site.css carga después del :root original y gana por orden de cascada. */
:root {
    --eduact-secondary: #1C89C2;
    --eduact-secondary-rgb: 28, 137, 194;
    --eduact-black: #1C89C2;
    --eduact-black-rgb: 28, 137, 194;
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

.page-wrapper {
    overflow-x: clip;
}

/* Header (barra superior + versión sticky, ambas usan estas clases) fijo a 80px: la fila
   flex del nav es la que realmente determina el alto visible, así que se fuerza ahí
   directo con min-height/max-height — más confiable que solo ajustar paddings de los
   hijos (que únicamente centran su contenido dentro de esta fila, ver abajo). */
/* .main-header no tiene alto propio en el vendorizado (su único hijo, .main-menu,
   es position:absolute y no ocupa espacio en el flujo) — así que cualquier sección
   siguiente arrancaba a la misma altura que el propio menú, quedando tapada por él
   apenas .main-menu dejó de ser transparente. Reservarle acá los mismos 80px fijos
   del menú resuelve esto para cualquier página, no solo la que tenga suficiente
   padding-top propio por casualidad. */
.main-header {
    height: 80px;
}

.main-menu {
    background: var(--eduact-white) !important;
}

.main-menu .container {
    min-height: 80px;
    max-height: 80px;
    background: var(--eduact-white);
}

.main-menu-with-bg .main-menu__logo {
    padding: 14px 0; /* 80px de header - 52px de logo */
}

.main-menu-with-bg .main-menu__logo img {
    height: 52px; /* +30% sobre los 40px originales */
    width: auto;
}

.main-menu-with-bg.main-menu .main-menu__list>li,
.main-menu-with-bg.stricky-header .main-menu__list>li {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* Con 8 ítems en el menú, el espaciado original (55px) no entra en una sola línea
   y el texto se envuelve a 2 líneas — lo que a su vez desborda el alto fijo de arriba. */
.main-menu .main-menu__list>li+li,
.stricky-header .main-menu__list>li+li {
    margin-left: 22px;
}

.main-menu__list>li>a {
    white-space: nowrap;
}

/* El template centra el <ul> del menú entre el logo y el botón (margin-left/right auto).
   Pedido: el menú va pegado (a la izquierda) justo antes del botón Ingreso, no centrado
   independientemente — se logra dejando solo el margin-left:auto (empuja todo el bloque
   nav+botón hacia la derecha) y sacando el margin-right:auto. */
.main-menu__nav {
    margin-left: auto;
    margin-right: 0;
}

/* Sección "Nosotros" del home: el botón "Conócenos más" va en la misma fila que el
   teléfono, pegado al extremo derecho — .about-three__info no es un contenedor flex
   por su cuenta (el template lo arma con padding-left para el ícono absoluto), así
   que se envuelve la fila en flex acá en vez de tocar esa clase compartida. */
.about-three__contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

/* Firma de la gerente, en el lugar donde antes iba "¿Necesitás más información?"
   (misma fila que el botón "Conócenos más", ver .about-three__contact-row) — imagen
   de firma apilada arriba del nombre y el cargo, todo alineado a la izquierda. */
.about-three__firma {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-three__firma img {
    height: 60px;
    width: auto;
    margin-bottom: 6px;
}

.about-three__firma__name {
    font-weight: 600;
    color: var(--eduact-black);
    font-size: 15px;
}

.about-three__firma__role {
    color: var(--eduact-text2);
    font-size: 13px;
}

/* Barra de país, arriba del header. El nav real (dentro de .main-header) va absoluto
   sobre el hero (ver el template), así que agregar esta barra en flujo normal no lo
   empuja solo — hay que correr el nav 40px para abajo a mano. La versión sticky
   (el clon que aparece fijo al hacer scroll) usa las mismas clases ".main-menu" pero
   NO está dentro de ".main-header", así que ".main-header .main-menu" no la toca —
   sigue pegada a top:0 cuando aparece, que es lo correcto (la topbar ya se scrolleó). */
.topbar {
    min-height: 40px;
    max-height: 40px;
    display: flex;
    align-items: center;
    background: var(--eduact-black);
    position: relative;
    z-index: 95;
}

.topbar .container {
    display: flex;
    justify-content: flex-end;
}

.main-header .main-menu {
    top: 40px;
}

.topbar__country {
    position: relative;
}

.topbar__country-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--eduact-white);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.topbar__flag {
    display: inline-flex;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.topbar__flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.topbar__chevron {
    font-size: 10px;
    transition: transform 200ms ease;
}

.topbar__country.is-open .topbar__chevron {
    transform: rotate(180deg);
}

.topbar__country-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--eduact-white);
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 6px;
    margin-left: 0;
    min-width: 170px;
    z-index: 999;
}

.topbar__country.is-open .topbar__country-list {
    display: block;
}

.topbar__country-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--eduact-black);
    text-align: left;
}

.topbar__country-option:hover,
.topbar__country-option.is-active {
    background: var(--eduact-soft2);
}

/* El horario ocupa 3 líneas (el resto de .main-footer-two__info-list son teléfonos de
   una sola línea) — achica fuente/interlineado para que no quede desproporcionado.
   Selector calcado del original (.main-footer-two__info-list li) + la clase propia
   para igualar esa especificidad sin necesitar !important. */
.main-footer-two__info-list li.main-footer-two__hours {
    font-size: 14px;
    line-height: 22px;
    padding-top: 2px;
}

/* El fondo del footer venía de var(--eduact-black) (VBqgfbndhJ6Z.css) — ahora que
   esa variable es el azul primario (ver override de --eduact-black más arriba), el
   footer necesita su propio color fijo para no heredar ese cambio. #1F1944 es el
   mismo tono que ya usa .copyright (la barra de abajo del todo), así quedan parejos. */
.main-footer-two {
    background-color: #1C89C2;
}

/* Página de post individual del blog (public/blog-post.php) — el template no trae
   una página de artículo propia (solo la preview .blog-three de la home), así que
   esto es CSS chico a mano siguiendo la misma paleta (--eduact-*) del resto del sitio. */
.blog-post__image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 24px;
}

.blog-post__date {
    color: #64748B;
    font-size: 14px;
    margin-bottom: 8px;
}

.blog-post__title {
    font-size: 34px;
    line-height: 1.25;
    color: var(--eduact-black);
    margin: 0 0 28px;
}

.blog-post__content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--eduact-text);
}

.blog-post__content p {
    margin: 0 0 20px;
}

.blog-post__content h2,
.blog-post__content h3,
.blog-post__content h4 {
    color: var(--eduact-black);
    margin: 32px 0 16px;
}

.blog-post__content ul,
.blog-post__content ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.blog-post__content img {
    max-width: 100%;
    border-radius: 6px;
}

.blog-post__content blockquote {
    border-left: 3px solid var(--eduact-secondary);
    padding-left: 18px;
    margin: 0 0 20px;
    color: var(--eduact-text2);
    font-style: italic;
}

.blog-post__content a {
    color: var(--eduact-secondary);
}

.blog-post__share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px solid var(--eduact-soft4);
    border-bottom: 1px solid var(--eduact-soft4);
}

.blog-post__share span {
    font-weight: 600;
    color: var(--eduact-black);
}

.blog-post__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--eduact-soft2);
    color: var(--eduact-black);
    transition: all 200ms ease;
}

.blog-post__share-btn:hover {
    background: var(--eduact-secondary);
    color: var(--eduact-white);
}

.blog-post__comments h3 {
    margin: 32px 0 16px;
    font-size: 20px;
}

.blog-post__comment {
    padding: 16px 0;
    border-bottom: 1px solid var(--eduact-soft4);
}

.blog-post__comment-author {
    font-weight: 600;
    color: var(--eduact-black);
    margin: 0 0 6px;
}

.blog-post__comment-date {
    font-weight: 400;
    color: var(--eduact-text2);
    font-size: 13px;
}

.blog-post__comment-text {
    margin: 0;
    color: var(--eduact-text);
}

.blog-post__flash {
    padding: 12px 16px;
    border-radius: 5px;
    margin-bottom: 16px;
    font-size: 14px;
}

.blog-post__flash--success {
    background: #e9f7ef;
    color: #1e7e34;
}

.blog-post__flash--error {
    background: #fdecea;
    color: #c0392b;
}

.blog-post__comments {
    width: 100%;
}

.blog-post__comment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: none;
}

.blog-post__comment-form-row {
    display: flex;
    gap: 12px;
}

.blog-post__comment-form-row input,
.blog-post__comment-form input[type="email"],
.blog-post__comment-form textarea {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--eduact-soft4);
    border-radius: 5px;
    font-family: inherit;
    font-size: 14px;
}

.blog-post__anon-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #000000;
    cursor: pointer;
}

/* Casilla en forma de interruptor (switch). */
.blog-post__anon-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    margin: 0;
    border-radius: 999px;
    background: #CBD5E1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.blog-post__anon-check input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .2s ease;
}

.blog-post__anon-check input[type="checkbox"]:checked {
    background: #1C89C2;
}

.blog-post__anon-check input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.blog-post__anon-check input[type="checkbox"]:focus-visible {
    outline: 2px solid #1C89C2;
    outline-offset: 2px;
}

/* Campo trampa para bots — invisible para una persona, un bot suele completar
   cualquier input que encuentre. Si llega con valor, el POST se ignora en silencio. */
.blog-post__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Tarjetas de "Nuestros cursos virtuales son:" (home) — los textos de cada tarjeta
   tienen longitud distinta, así que sin esto cada .service-three__item queda con su
   propio alto de contenido aunque la columna Bootstrap (.row flex, align-items:stretch)
   ya estire la columna pareja — hay que estirar el item/wrapper de adentro también. */
.service-three__item {
    height: 100%;
}

.service-three__wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-three__wrapper .service-three__text {
    flex: 1 0 auto;
}

/* Página /cursos.php — catálogo con sidebar de filtros + grilla de tarjetas.
   El template Eduact no trae ninguna página de este tipo (solo el carrusel
   "Featured Course" del home), así que es CSS a mano, siguiendo la misma
   paleta (--eduact-*) y radios/sombras suaves que el resto del sitio. Vive
   dentro de .blog-three (reusada tal cual por el padding/borde superior ya
   definidos ahí) para no repetir esas reglas de espaciado de sección. */
.cursos-catalog__layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.cursos-catalog__sidebar {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 96px;
    /* 80px del header fijo (.main-menu .container) + 16px de aire */
    align-self: flex-start;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
}

/* .page-wrapper (envoltorio global de app/partials/head.php) trae overflow:hidden
   en todo el sitio, para recortar formas decorativas que sangran fuera de sección —
   pero eso también invalida el position:sticky de arriba (un ancestro con overflow
   distinto de visible rompe el sticky, aunque no sea el que hace scroll). No se puede
   tocar esa regla global (rompería el recorte en el resto del sitio), así que se
   libera solo en esta página vía $bodyClass = 'page-cursos' (ver cursos.php). */
body.page-cursos .page-wrapper,
body.page-curso-detalle .page-wrapper {
    overflow-x: clip;
    overflow-y: visible;
}

body.page-curso-detalle,
body.page-curso-detalle .page-wrapper,
body.page-curso-detalle .blog-three {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
}

.cursos-catalog__card-box {
    background: var(--eduact-white);
    border: 1px solid var(--eduact-soft4);
    border-radius: 10px;
    padding: 18px;
}

.cursos-catalog__search {
    position: relative;
}

.cursos-catalog__search input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid var(--eduact-soft4);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
}

.cursos-catalog__search .icon-Search {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--eduact-text2);
    font-size: 14px;
}

.cursos-catalog__card-box h4 {
    font-size: 15px;
    color: var(--eduact-black);
    margin: 0 0 14px;
}

.cursos-catalog__topic-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cursos-catalog__topic-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--eduact-text);
    cursor: pointer;
}

.cursos-catalog__topic-list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--eduact-secondary);
    cursor: pointer;
}

.cursos-catalog__main {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 10px;
}

.cursos-catalog__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.cursos-catalog__toolbar p {
    margin: 0;
    color: var(--eduact-text2);
    font-size: 14px;
}

.cursos-catalog__sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cursos-catalog__sort label {
    font-size: 13px;
    color: var(--eduact-text2);
}

.cursos-catalog__sort select,
.cursos-catalog__field select {
    padding: 9px 14px;
    border: 1px solid var(--eduact-soft4);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background: var(--eduact-white);
}

.cursos-catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
    margin-top: 0;
}

@media (max-width: 1199px) {
    .cursos-catalog__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .cursos-catalog__layout {
        flex-direction: column;
    }

    .cursos-catalog__sidebar {
        flex: 1 1 auto;
        width: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 575px) {
    .cursos-catalog__grid {
        grid-template-columns: 1fr;
    }
}

.cursos-catalog__card {
    background: var(--eduact-white);
    border: 1px solid var(--eduact-soft4);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 400px;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.cursos-catalog__card:hover {
    box-shadow: 0 16px 40px rgba(var(--eduact-black2-rgb), 0.1);
    transform: translateY(-3px);
    cursor: pointer;
}

.cursos-catalog__card-image {
    position: relative;
    height: 170px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--eduact-secondary), #3296C8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cursos-catalog__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cursos-catalog__card-image .icon-education {
    font-size: 46px;
    color: rgba(255, 255, 255, 0.85);
}

.cursos-catalog__card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
}

.cursos-catalog__card-title {
    font-size: 17px;
    line-height: 1.35;
    margin: 0 0 8px;
}

.cursos-catalog__card-title a {
    color: var(--eduact-black);
}

.cursos-catalog__card-title a:hover {
    color: var(--eduact-secondary);
}

.cursos-catalog__card-desc {
    font-size: 13px;
    color: var(--eduact-text2);
    line-height: 1.6;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Categoría del curso, superpuesta sobre la imagen — extremo inferior derecho, 10px del borde. */
.cursos-catalog__card-tags {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.cursos-catalog__card-tag {
    display: inline-block;
    padding: 0px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 1px;
    background: var(--eduact-white);
    color: var(--eduact-secondary);
    white-space: nowrap;
}

.cursos-catalog__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--eduact-text2);
}

/* Página de detalle de un curso (public/curso.php) — misma idea de layout de dos
   columnas que el catálogo (.cursos-catalog__layout), pero acá la columna principal
   es contenido largo (descripción/requisitos/contenido) en vez de una grilla. El
   header con imagen/breadcrumb reusa el componente .page-header ya vendorizado
   (VBqgfbndhJ6Z.css), no es CSS nuevo. */
.curso-detalle__layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 0px 0;
}

.curso-detalle__main {
    flex: 1 1 auto;
    min-width: 0;
}

.curso-detalle__sidebar {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 96px;
}

@media (max-width: 991px) {
    .curso-detalle__layout {
        flex-direction: column;
    }

    .curso-detalle__sidebar {
        flex: 1 1 auto;
        width: 100%;
        position: static;
    }
}

.curso-detalle__image {
    position: relative;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--eduact-secondary), #3296C8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El título va arriba de la imagen (no superpuesto), alineado a la izquierda —
   pedido explícito del owner, reemplaza el .page-header con "container text-center"
   que tenía antes. */
.curso-detalle__title {
    margin: 0 0 20px;
    font-size: 30px;
    line-height: 1.25;
    color: var(--eduact-black);
    text-align: left;
}

@media (max-width: 480px) {
    .curso-detalle__title {
        font-size: 22px;
    }
}

.curso-detalle__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.curso-detalle__image .icon-education {
    font-size: 90px;
    color: rgba(255, 255, 255, 0.85);
}

.curso-detalle__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.curso-detalle__tags .cursos-catalog__card-tag {
    background: #eaf5fb;
}

.curso-detalle__section {
    margin-bottom: 32px;
}

.curso-detalle__section h3 {
    font-size: 20px;
    color: var(--eduact-black);
    margin: 0 0 14px;
}

.curso-detalle__section p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--eduact-text);
    margin: 0;
}

.curso-detalle__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.curso-detalle__list li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--eduact-text);
    padding-left: 24px;
    position: relative;
}

.curso-detalle__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--eduact-secondary);
}

.curso-detalle__precios {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.curso-detalle__precios li {
    display: flex;
    flex-direction: column;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--eduact-soft4);
}

.curso-detalle__precios li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.curso-detalle__precio-nombre {
    font-size: 13px;
    font-weight: 600;
    color: var(--eduact-text2);
}

.curso-detalle__precio-monto {
    font-size: 22px;
    font-weight: 700;
    color: var(--eduact-black);
}

.curso-detalle__precio-desc {
    font-size: 12px;
    color: var(--eduact-text2);
}

.curso-detalle__cta {
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* Hero de /cnsc.php — reemplaza el .page-header genérico (foto+overlay oscuro,
   pensado solo para un título corto + breadcrumb) por un bloque claro que sí
   tiene lugar para el tagline/título completos (.section-title, ya usado en el
   resto del sitio) más el párrafo introductorio, todo dentro del mismo
/* ==============================================================
   HERO CNSC 2026 (100% WIDTH SECTION + RIGHT ALIGNED BG FADING TO WHITE)
   ============================================================== */
.cnsc-hero-2026 {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    padding: 60px 0 70px;
    overflow: hidden;
    border-bottom: 1px solid #EEF2F6;
    display: flex;
    align-items: center;
    min-height: 540px;
    box-sizing: border-box;
}

/* Imagen de fondo de la sección alineada desde el extremo derecho que se degrada en blanco hacia la izquierda */
.cnsc-hero-2026__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    min-width: 620px;
    max-width: 1100px;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 18%, rgba(0, 0, 0, 0.95) 38%, #000000 55%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 18%, rgba(0, 0, 0, 0.95) 38%, #000000 55%);
}

.cnsc-hero-2026__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #FFFFFF 0%, rgba(255, 255, 255, 0.92) 8%, rgba(255, 255, 255, 0) 20%);
    pointer-events: none;
}

.cnsc-hero-2026 .container {
    max-width: 1320px;
    width: 100%;
    position: relative;
    z-index: 3;
}

.cnsc-hero-2026__cursive-corner {
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 10;
    text-align: right;
    transform: rotate(-3deg);
}

@media (max-width: 991px) {
    .cnsc-hero-2026__cursive-corner {
        display: none;
    }
}

.cnsc-hero-2026__content {
    max-width: 590px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    position: relative;
    z-index: 3;
}

.cnsc-hero-2026__title {
    font-family: 'Urbanist', 'Outfit', -apple-system, sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.05;
    color: #0E2744;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 22px 0;
}

.cnsc-hero-2026__desc {
    font-size: 17px;
    line-height: 1.55;
    color: #1E293B;
    margin: 0 0 24px 0;
    max-width: 530px;
    font-weight: 500;
}

/* Bloque de datos/facts en convocatoria.php (distancia exacta de 4px entre líneas) */
.convocatoria-hero-2026__facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 28px 0;
}

.convocatoria-hero-2026__facts p {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: #334155;
}

.convocatoria-hero-2026__facts p strong {
    color: #0F2744;
}

.cnsc-hero-2026__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

/* Botones de Acción */
.cnsc-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    cursor: pointer;
}

.cnsc-hero-btn--primary {
    background: linear-gradient(180deg, #3296C8 0%, #1C89C2 100%);
    box-shadow: 0 8px 24px rgba(28, 137, 194, 0.38);
    border: none;
    color: #FFFFFF;
}

.cnsc-hero-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(28, 137, 194, 0.48);
    color: #FFFFFF;
}

.cnsc-hero-btn__badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    color: #FFFFFF;
    flex-shrink: 0;
}

.cnsc-hero-btn__badge svg {
    width: 20px;
    height: 20px;
}

.cnsc-hero-btn__text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.15;
}

.cnsc-hero-btn__line1 {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cnsc-hero-btn__line2 {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cnsc-hero-btn__star {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* Botón Secundario: Sobre Nosotros */
.cnsc-hero-btn--secondary {
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    box-shadow: 0 4px 16px rgba(15, 39, 69, 0.07);
    color: #0F2744;
}

.cnsc-hero-btn--secondary:hover {
    transform: translateY(-2px);
    border-color: #94A3B8;
    box-shadow: 0 8px 22px rgba(15, 39, 69, 0.12);
    color: #0F2744;
}

.cnsc-hero-btn__badge--handshake {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 0;
}

.cnsc-hero-btn__badge--handshake svg {
    width: 28px;
    height: 28px;
}

.cnsc-hero-btn__doc {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cnsc-hero-btn__doc svg {
    width: 24px;
    height: 24px;
}

/* 5 Process Steps Icons Row */
.cnsc-hero-2026__steps {
    display: flex;
    font-size: 1.6rem;
    align-items: flex-start;
    gap: 34px;
    flex-wrap: wrap;
}

.cnsc-hero-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.cnsc-hero-step__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cnsc-hero-step__icon svg {
    width: 34px;
    height: 34px;
    stroke: #0F2744;
    transition: transform 0.22s ease;
}

.cnsc-hero-step:hover .cnsc-hero-step__icon svg {
    transform: scale(1.12);
}

.cnsc-hero-step__name {
    font-size: 12px;
    font-weight: 800;
    color: #0F2744;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Responsive */
@media (max-width: 1199px) {
    .cnsc-hero-2026__title {
        font-size: 44px;
    }

    .cnsc-hero-2026__steps {
        gap: 24px;
    }

    .cnsc-hero-2026__bg {
        width: 50%;
        min-width: 500px;
    }
}

@media (max-width: 991px) {
    .cnsc-hero-2026 {
        padding: 40px 0 45px;
        min-height: auto;
    }

    .cnsc-hero-2026__title {
        font-size: 38px;
    }

    .cnsc-hero-2026__content {
        max-width: 100%;
        margin-bottom: 0;
    }

    .cnsc-hero-2026__bg {
        position: relative;
        width: 100%;
        min-width: auto;
        max-width: 100%;
        height: 380px;
        margin-top: 30px;
        mask-image: none;
        -webkit-mask-image: none;
        order: 2;
    }
}

@media (max-width: 576px) {
    .cnsc-hero-2026__title {
        font-size: 28px;
    }

    .cnsc-hero-2026__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    .cnsc-hero-btn {
        justify-content: center;
    }

    .cnsc-hero-2026__steps {
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }

    .cnsc-hero-step__icon svg {
        width: 28px;
        height: 28px;
    }

    .cnsc-hero-step__name {
        font-size: 11px;
    }
}

/* Hero antiguo de /cnsc.php (compatibilidad) */
.cnsc-hero {
    position: relative;
    padding: 60px 0 120px;
    overflow: hidden;
}

.cnsc-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url(../images/PYu8xZeFJwBF.jpg);
    background-size: cover;
    background-position: center;
}

.cnsc-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 45, 66, 0.85);
}

.cnsc-hero .container {
    position: relative;
    z-index: 2;
}

.cnsc-hero .section-title__tagline,
.cnsc-hero .section-title__title {
    color: var(--eduact-white);
}

.cnsc-hero .section-title__tagline svg.arrow-svg {
    fill: var(--eduact-white);
}

.cnsc-hero__breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    font-size: 13px;
}

.cnsc-hero__breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.5);
}

.cnsc-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.65);
}

.cnsc-hero__breadcrumb a:hover {
    color: var(--eduact-secondary);
}

.cnsc-hero__breadcrumb span {
    color: var(--eduact-white);
    font-weight: 600;
}

.cnsc-hero__text {
    max-width: 760px;
    margin: 0;
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
}

/* .cnsc-hero__text ahora envuelve HTML editable (Quill) en vez de un <p> fijo —
   resetea el margin del <p> que Quill siempre agrega, para no duplicar el margin:0
   de arriba con el margin por defecto del navegador. */
.cnsc-hero__text p {
    margin: 0;
}

/* "Bloque de productos" insertado dentro del contenido editable de Empleos
   Públicos (ver /4dmon/empleos-publicos/editar.php + empleos-publicos-productos.js)
   — cada tarjeta es un .course-two__item (componente ya vendorizado en
   VBqgfbndhJ6Z.css, mismo usado en la home del template original — antes era
   .cursos-catalog__card, que sigue siendo la propia de /cursos.php sin tocar),
   este bloque solo define su propio grid con la cantidad de columnas elegida en
   el modal. Clases fijas (no inline style) porque Sanitizer.php no permite el
   atributo style — ver el comentario en ALLOWED_ATTRS. */
.empleos-productos-block {
    display: grid;
    gap: 24px;
    margin: 30px 0;
    position: relative;
}

.empleos-productos-block--cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.empleos-productos-block--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.empleos-productos-block--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.empleos-productos-block--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.empleos-productos-block--cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.empleos-productos-block--cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 767px) {
    .empleos-productos-block {
        grid-template-columns: 1fr !important;
    }
}

/* .course-two__item ya trae su propio margin-bottom (pensado para un carrusel/lista
   suelta) — acá la separación entre tarjetas ya la da el gap del grid de arriba, así
   que se resetea para no duplicar el espaciado vertical. */
.empleos-productos-block .course-two__item {
    margin: 0;
}

/* Sin imagen (curso.foto vacío) — mismo fallback que .cursos-catalog__card-image ya
   usaba: degradé de marca + ícono centrado, en vez de un thumb vacío/aplastado. */
.course-two__thumb--sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    background: linear-gradient(135deg, var(--eduact-secondary), #3296C8);
}

.course-two__thumb--sin-foto .icon-education {
    font-size: 46px;
    color: rgba(255, 255, 255, 0.85);
}

/* Bloque genérico dentro del editor de Empleos Públicos (título, texto o bloque de
   productos — ver empleos-publicos-productos.js). Solo lo estructural/de layout que
   de verdad hace falta para un visitante real va acá — el hover con borde punteado,
   el handle y el botón de borrar son afordances del editor y NUNCA deben verse en
   producción (bug real reportado por el owner: se veían al pasar el mouse en la
   página pública), así que esos viven inyectados por JS dentro del propio <iframe>
   de vista previa (ver empleos-publicos-preview.js) — nunca acá. */
.epp-block {
    position: relative;
}

.epp-block--titulo,
.epp-block--texto {
    margin: 20px 0;
}

.epp-block--dragging {
    opacity: .4;
}

/* Bloque "columnas" (2 o 3) — cada .epp-columnas__col es a su vez un contenedor de
   bloques (título/texto/productos), ver wireContenedor() en
   empleos-publicos-productos.js. min-height chico para que una columna vacía nunca
   colapse a 0 y quede imposible de soltarle un bloque encima en el editor. */
.epp-columnas {
    display: grid;
    gap: 24px;
    margin: 20px 0;
}

.epp-columnas--2 {
    grid-template-columns: repeat(2, 1fr);
}

.epp-columnas--3 {
    grid-template-columns: repeat(3, 1fr);
}

.epp-columnas__col {
    min-height: 40px;
}

.epp-columnas__col>.epp-block--titulo:first-child,
.epp-columnas__col>.epp-block--texto:first-child {
    margin-top: 0;
}

@media (max-width: 767px) {

    .epp-columnas--2,
    .epp-columnas--3 {
        grid-template-columns: 1fr;
    }
}

/* Bloque "imagen" — dos variantes (ver /4dmon/empleos-publicos/editar.php):
   .epp-block--imagen es un <img> en línea (ancho/alineación/opacidad configurables,
   style ya permitido por Sanitizer::cleanStyleValue()); .epp-block--imagen-fondo es
   un <div> decorativo con la imagen como fondo (background-image/position/size,
   alto mínimo y opacidad, misma allowlist). */
.epp-block--imagen {
    margin: 20px 0;
}

.epp-block__img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.epp-block--imagen-fondo {
    margin: 20px 0;
    background-repeat: no-repeat;
    border-radius: 4px;
}

/* Bloque "Registro de lista" (ver /4dmon/empleos-publicos/editar.php,
   empleos-publicos-productos.js) — reusa el componente .cta-two ya vendorizado
   (VBqgfbndhJ6Z.css) tal cual para el título/fondo, y le agrega una imagen de fondo
   fija (misma foto que .cnsc-hero__bg, ya usada en el sitio — nunca una subida por
   el admin, así que no pasa por Sanitizer::cleanBackgroundImage()) + un overlay
   oscuro para que el título en blanco del template siga siendo legible sin
   depender de qué tan oscura sea la imagen. El <form> real (nombre + correo) lo
   inyecta public/js/suscripcion.js dentro de .cta-two__mail — nunca se guarda en
   el HTML sanitizado (mismo criterio que el handle/delete de cualquier bloque). */
.epp-block--suscripcion {
    margin: 20px 0;
}

.epp-block--suscripcion .cta-two__bg {
    background-image: url(../images/PYu8xZeFJwBF.jpg);
    position: relative;
}

.epp-block--suscripcion .cta-two__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 45, 66, .8);
    border-radius: inherit;
}

.epp-block--suscripcion .cta-two__bg>* {
    position: relative;
    z-index: 1;
}

.suscripcion-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.suscripcion-form input {
    width: 220px;
    max-width: 100%;
    height: 56px;
    border: none;
    border-radius: 6px;
    outline: none;
    background-color: var(--eduact-white);
    font-size: 15px;
    font-family: var(--eduact-font);
    color: var(--eduact-text);
    padding: 0 20px;
    font-weight: 500;
}

.suscripcion-form__response {
    margin-top: 12px;
    color: var(--eduact-white);
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .suscripcion-form input {
        width: 100%;
    }
}

/* Modal de confirmación tras enviar el formulario de suscripción (ver
   public/js/suscripcion.js) — el sitio público no tiene ningún componente modal
   propio todavía, así que este queda autocontenido acá (nunca reutiliza
   .admin-modal-overlay del panel, que ni siquiera está cargado en esta página). */
.suscripcion-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 45, 66, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.suscripcion-modal {
    background: #fff;
    border-radius: 10px;
    max-width: 380px;
    width: 100%;
    padding: 36px 30px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.suscripcion-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(28, 137, 194, .12);
    color: var(--eduact-secondary);
    margin-bottom: 18px;
}

.suscripcion-modal__icon--error {
    background: rgba(220, 53, 69, .12);
    color: #dc3545;
}

.suscripcion-modal__text {
    color: var(--eduact-text);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px;
}

/* Hero "Configura tu preparación" — solo en /curso.php?id=36 (ver ese archivo),
   pieza de campaña puntual ("Concurso Docente 2026"), no un componente reusable
   del catálogo. Paleta propia (navy/verde menta), scoped con su propio prefijo
   de clase — deliberadamente NO usa las custom properties --eduact-* del resto
   del sitio (esas son el azul de marca general; acá el pedido fue calcar el
   diseño de la imagen tal cual, igual que se decidió para el wave naranja del
   template original de .course-two__item). */
.curso-hero-2026,
.curso-hero-2026 * {
    box-sizing: border-box;
}

.curso-hero-2026 {
    --ch-navy: #142A43;
    --ch-navy-soft: #4B5C71;
    --ch-green: #1B5E43;
    --ch-green-bright: #1FA766;
    --ch-green-soft-bg: #DCF2E2;
    --ch-blue: #1C89C2;
    --ch-blue-bright: #1C89C2;
    --ch-blue-soft-bg: #E8F3F9;
    --ch-purple-bg: #E7E2FB;
    --ch-purple: #6C5CE7;
    --ch-orange-bg: #FBE6D2;
    --ch-orange: #DB8A34;
    --ch-border: #E4E7EC;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 620px;
    margin: 0 0 50px;
    box-shadow: 0 20px 60px rgba(20, 42, 67, .08);
    overflow: hidden;
    max-width: 100%;
}

.curso-hero-2026__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.curso-hero-2026__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: calc(55% + 30px) center;
    display: block;
}

.curso-hero-2026__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            #fff 0%,
            #fff 20%,
            rgba(255, 255, 255, 0) 45%,
            rgba(255, 255, 255, 0) 60%,
            rgba(255, 255, 255, .92) 75%,
            #fff 100%);
}

.curso-hero-2026__left-text {
    position: relative;
    top: 20px;
    z-index: 1;
    flex: 0 0 440px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 24px 40px 20px;
    min-width: 0;
    justify-content: center;
}

.curso-hero-2026__badge {
    display: inline-block;
    align-self: flex-start;
    background: var(--ch-green-soft-bg);
    color: var(--ch-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 30px;
}

.curso-hero-2026__title {
    font-size: 38px;
    line-height: 1;
    font-weight: 800;
    color: var(--ch-navy);
    margin: 0;
}

.curso-hero-2026__desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ch-navy-soft);
    margin: 0;
}

.curso-hero-2026__features {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.curso-hero-2026__feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 120px;
}

.curso-hero-2026__feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.curso-hero-2026__feature-icon svg {
    width: 22px;
    height: 22px;
}

.curso-hero-2026__feature-icon--green {
    background: var(--ch-green-soft-bg);
    color: var(--ch-green);
}

.curso-hero-2026__feature-icon--purple {
    background: var(--ch-purple-bg);
    color: var(--ch-purple);
}

.curso-hero-2026__feature-icon--orange {
    background: var(--ch-orange-bg);
    color: var(--ch-orange);
}

.curso-hero-2026__feature-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ch-navy);
    margin: 0 0 3px;
}

.curso-hero-2026__feature-desc {
    font-size: 0.8rem;
    margin-top: -8px;
    color: var(--ch-navy-soft);
    line-height: 1.4;
}

.curso-hero-2026__feature-note {
    font-size: 0.8rem;
    color: #9AA5B1;
    margin-top: -4px;
}

.curso-hero-2026__tagline {
    width: 260px;
    max-width: 100%;
    height: auto;
    align-self: flex-start;
}

/* Ambas flotan directo sobre la foto de fondo, en la franja que queda visible
   entre el bloque de texto (izquierda) y la tarjeta blanca (derecha) — ya no son
   hijas de .photo (esa caja no existe más), son hijas directas de la sección. */
.curso-hero-2026__note {
    position: absolute;
    z-index: 1;
    top: 28px;
    right: 450px;
    max-width: 150px;
    font-family: 'Brush Script MT', 'Segoe Script', cursive;
    font-size: 19px;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.curso-hero-2026__quote {
    position: absolute;
    z-index: 1;
    left: 470px;
    bottom: 28px;
    max-width: 240px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ch-navy);
    box-shadow: 0 12px 30px rgba(20, 42, 67, .18);
}

.curso-hero-2026__quote strong {
    font-weight: 700;
}

.curso-hero-2026__right {
    position: relative;
    z-index: 1;
    flex: 0 0 380px;
    max-width: 100%;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0px;
}

.curso-hero-2026__card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 16px 50px rgba(20, 42, 67, .14);
    padding: 20px;
}

.curso-hero-2026__card h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--ch-navy);
    margin: 0 0 4px;
}

.curso-hero-2026__card-subtitle {
    font-size: 12.5px;
    color: var(--ch-navy-soft);
    margin: 0 0 18px;
}

.curso-hero-2026__step {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 8px 0 10px;
}

.curso-hero-2026__step:first-of-type {
    margin-top: 4px;
}

.curso-hero-2026__step-num {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--ch-blue-bright);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.curso-hero-2026__step-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ch-navy);
    margin-top: 4px;
}

.curso-hero-2026__participante-opciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.curso-hero-2026__participante-opcion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--ch-border);
    background: #fff;
    border-radius: 10px;
    padding: 12px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ch-navy-soft);
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
    font-family: inherit;
}

.curso-hero-2026__participante-opcion svg {
    width: 20px;
    height: 20px;
}

.curso-hero-2026__participante-opcion.is-active {
    border-color: var(--ch-blue-bright);
    background: var(--ch-blue-soft-bg);
    color: var(--ch-blue);
}

.curso-hero-2026__radio {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: var(--ch-navy);
    cursor: pointer;
    padding: 5px 0;
}

.curso-hero-2026__radio input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--ch-blue-bright);
    flex: 0 0 auto;
}

/* Pedido explícito del owner: globo interactivo visible desde que carga la
   página, a la altura del buscador de OPEC (#heroOpecInput) — invita a
   ingresar el código, con su propio campo grande sincronizado en vivo con
   el buscador real (ver curso-hero-2026.js). Mientras está abierto, el
   resto de la página se atenúa con .curso-hero-2026__opec-tip-overlay
   (blanco 40%) — la tarjeta ".curso-hero-2026__card" se excluye subiendo
   su z-index por encima del overlay (position:relative ya lo hace su
   propio stacking context, así que TODO su contenido, incl. el globo que
   es descendiente suyo, pinta por encima del overlay sin necesitar tocar
   el z-index del globo por separado). Overlay y globo se posicionan con
   JS (position:fixed + coordenadas reales del input, mismo patrón que
   convocatoria-mapa.js) y se mueven a <body> al cargar — position:fixed
   dentro de un ancestro con overflow:hidden SÍ es válido (a diferencia de
   transform, que fue el bug real de la otra sección), pero moverlo igual
   es más robusto y consistente con el resto del sitio. */
.curso-hero-2026__opec-tip-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9000;
    display: none;
}

.curso-hero-2026__opec-tip-overlay.is-visible {
    display: block;
}

.curso-hero-2026__card {
    position: relative;
    z-index: 9001;
}

/* Tamaño al 200% (pedido explícito del owner) — todas las medidas de acá
   para abajo (ancho, padding, radios, flecha, tipografías) son el doble de
   las originales. El posicionamiento en curso-hero-2026.js lee
   tip.offsetWidth/offsetHeight en vivo, así que no necesitó ningún cambio:
   se re-centra solo contra las nuevas medidas reales. */
.curso-hero-2026__opec-tip {
    position: fixed;
    width: 600px;
    max-width: calc(100vw - 40px);
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.38);
    padding: 36px 40px;
    box-sizing: border-box;
    z-index: 9002;
    display: none;
}

.curso-hero-2026__opec-tip.is-visible {
    display: block;
}

.curso-hero-2026__opec-tip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 16px 0 16px 18px;
    border-style: solid;
    border-color: transparent transparent transparent #FFFFFF;
}

.curso-hero-2026__opec-tip.is-flipped::after {
    left: auto;
    right: 100%;
    border-width: 16px 18px 16px 0;
    border-color: transparent #FFFFFF transparent transparent;
}

.curso-hero-2026__opec-tip-text {
    margin: 0 0 24px;
    font-size: 27px;
    font-weight: 600;
    color: var(--ch-navy);
    line-height: 1.45;
}

.curso-hero-2026__opec-tip-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 44px;
    font-weight: 700;
    padding: 24px 28px;
    border-radius: 16px;
    border: 4px solid var(--ch-blue-bright);
    color: var(--ch-navy);
}

.curso-hero-2026__opec-tip-input:focus {
    outline: none;
    border-color: var(--ch-navy);
}

@media (max-width: 991px) {
    .curso-hero-2026__opec-tip {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    .curso-hero-2026__opec-tip::after {
        display: none;
    }
}

.curso-hero-2026__radio strong {
    font-weight: 700;
    display: block;
}

.curso-hero-2026__radio small {
    display: block;
    color: var(--ch-navy-soft);
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: 2px;
}

.curso-hero-2026__opec-buscador {
    margin: 4px 0 8px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

.curso-hero-2026__opec-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--ch-blue-bright);
    border-radius: 10px;
    padding: 9px 12px;
    width: 100%;
    box-sizing: border-box;
}

.curso-hero-2026__opec-input-wrap .icon-Search {
    font-size: 13px;
    color: var(--ch-navy-soft);
}

.curso-hero-2026__opec-input-wrap input,
#heroOpecInput {
    border: none;
    outline: none;
    flex: 1;
    width: 100%;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--ch-navy);
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
}

.curso-hero-2026__opec-resultados {
    border: 1.5px solid var(--ch-border);
    border-radius: 10px;
    overflow: hidden;
}

.curso-hero-2026__opec-resultados a {
    display: block;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--ch-navy);
    border-bottom: 1px solid var(--ch-border);
}

.curso-hero-2026__opec-resultados a:last-child {
    border-bottom: none;
}

.curso-hero-2026__opec-resultados a:hover {
    background: #F6F7F5;
}

.curso-hero-2026__opec-resultados p {
    margin: 0;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--ch-navy-soft);
}

.curso-hero-2026__opec-resultado {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--ch-border);
}

.curso-hero-2026__opec-resultado--ok {
    color: #1FA766;
    border-color: #1FA766;
    background: #F0FDF6;
}

.curso-hero-2026__opec-resultado--error {
    color: #B42318;
    border-color: #FDA29B;
    background: #FEF3F2;
}

.curso-hero-2026__aura-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ch-blue);
    align-self: flex-start;
}

.curso-hero-2026__aura-link svg {
    width: 12px;
    height: 12px;
}

.curso-hero-2026__select-wrap {
    position: relative;
    margin: 4px 0 10px;
}

.curso-hero-2026__select {
    width: 100%;
    border: 1.5px solid var(--ch-border);
    border-radius: 10px;
    padding: 10px 36px 10px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--ch-navy);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5C71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.curso-hero-2026__select:focus {
    border-color: var(--ch-blue-bright);
    box-shadow: 0 0 0 3px rgba(28, 137, 194, .15);
}

.curso-hero-2026__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: var(--ch-blue-bright);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    margin-top: 16px;
    transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.curso-hero-2026__cta:hover {
    background: var(--ch-navy);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(20, 42, 67, .18);
}

.curso-hero-2026__cta-col-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 0 0 auto;
}

.curso-hero-2026__cta-precio-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

.curso-hero-2026__cta .curso-hero-2026__precio-monto {
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-top: 2px;
}

.curso-hero-2026__cta-col-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-align: right;
    flex: 1;
    line-height: 1.25;
}

.curso-hero-2026__cta-col-right i,
.curso-hero-2026__cta-col-right svg {
    font-size: 13px;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.curso-hero-2026__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.curso-hero-2026__trust span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--ch-navy-soft);
    font-weight: 600;
}

.curso-hero-2026__trust svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

@media (max-width: 991px) {
    .curso-hero-2026 {
        flex-direction: column;
        border-radius: 18px;
    }

    /* Debajo de este ancho el texto y la tarjeta ya no entran lado a lado — se
       apilan. La foto sigue de fondo de toda la sección (position:absolute, no
       depende del flex-direction). */
    .curso-hero-2026 {
        min-height: 0;
    }

    .curso-hero-2026__left-text {
        flex-basis: auto;
        padding: 20px 24px 20px;
        justify-content: flex-start;
    }

    .curso-hero-2026__note {
        right: 24px;
        left: auto;
        max-width: 130px;
    }

    .curso-hero-2026__quote {
        left: 24px;
        right: 24px;
        max-width: none;
        bottom: 24px;
    }

    .curso-hero-2026__right {
        flex-basis: auto;
        margin-left: 0;
        padding: 24px;
    }

    .curso-hero-2026__title {
        font-size: 30px;
    }
}

@media (max-width: 575px) {
    .curso-hero-2026__features {
        gap: 18px;
    }

    .curso-hero-2026__participante-opciones {
        grid-template-columns: 1fr;
    }

    .curso-hero-2026__note {
        display: none;
    }
}

/* Reglas de contención para evitar desbordamientos en contenidos ricos */
.blog-post__content img,
.blog-post__content iframe,
.blog-post__content video {
    max-width: 100%;
    height: auto;
}

.blog-post__content table {
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    display: block;
}

/* ==============================================================
   SECCIÓN: MÉTODO Y PERSONALIZACIÓN 2026 (curso-metodo-2026)
   ============================================================== */
.curso-metodo-2026 {
    margin: 0 0 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 100%;
    box-sizing: border-box;
}

.curso-metodo-2026__block {
    background: none;
    padding: 36px 36px;
    box-sizing: border-box;
}

.curso-metodo-2026__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.curso-metodo-2026__header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.curso-metodo-2026__header-left {
    flex: 1;
    max-width: 440px;
}

.curso-metodo-2026__header-side-desc {
    font-size: 13.5px;
    color: #4B5C71;
    max-width: 360px;
    margin: 0;
    line-height: 1.5;
    text-align: right;
}

.curso-metodo-2026__kicker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1C89C2;
    margin-bottom: 6px;
    display: inline-block;
}

.curso-metodo-2026__title {
    font-size: 26px;
    font-weight: 800;
    color: #142A43;
    line-height: 1.18;
    margin: 0 0 10px;
    letter-spacing: -0.4px;
}

.curso-metodo-2026__desc {
    font-size: 13px;
    color: #4B5C71;
    line-height: 1.5;
    margin: 0;
}

/* Letras cursivas decorativas */
.curso-metodo-2026__handwritten {
    font-family: 'Water Brush', 'Brush Script MT', 'Caveat', cursive, sans-serif;
    font-size: 25px;
    line-height: 1.1;
    color: #1C89C2;
    text-align: center;
    transform: rotate(-4deg);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.curso-metodo-2026__handwritten-highlight {
    font-size: 28px;
    font-weight: bold;
}

.curso-metodo-2026__handwritten-curve {
    width: 85px;
    height: 16px;
    margin-top: -4px;
}

.curso-metodo-2026__handwritten-metodo {
    font-family: 'Water Brush', 'Brush Script MT', 'Caveat', cursive, sans-serif;
    font-size: 26px;
    line-height: 1.1;
    color: #1C89C2;
    text-align: center;
    transform: rotate(-6deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.curso-metodo-2026__hm-1 {
    color: #1C89C2;
}

.curso-metodo-2026__hm-2 {
    color: #1C89C2;
}

.curso-metodo-2026__hm-3 {
    color: #10B981;
    font-weight: bold;
}

/* Tarjeta verde de alerta / llamado rápido */
.curso-metodo-2026__alert-card {
    background: #EBF8F2;
    border: 1px solid #CEEEDD;
    border-radius: 16px;
    padding: 16px 18px;
    max-width: 310px;
    flex-shrink: 0;
}

.curso-metodo-2026__alert-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.curso-metodo-2026__alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(31, 167, 102, .16);
    color: #1FA766;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.curso-metodo-2026__alert-icon svg {
    width: 18px;
    height: 18px;
}

.curso-metodo-2026__alert-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #142A43;
    margin: 0;
    line-height: 1.25;
}

.curso-metodo-2026__alert-text {
    font-size: 11.5px;
    color: #4B5C71;
    line-height: 1.45;
    margin: 8px 0;
}

.curso-metodo-2026__alert-link {
    font-size: 12px;
    font-weight: 700;
    color: #1C89C2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.curso-metodo-2026__alert-link svg {
    width: 13px;
    height: 13px;
}

.curso-metodo-2026__alert-link:hover {
    text-decoration: underline;
}

/* 3 Pasos de Personalización */
.curso-metodo-2026__steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 12px;
    margin-top: 28px;
}

.curso-metodo-2026__step-card {
    background: #F8FAFC;
    border: 1.5px solid #EBF0F5;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    box-sizing: border-box;
}

.curso-metodo-2026__step-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.curso-metodo-2026__step-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #6C5CE7;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.curso-metodo-2026__step-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #142A43;
    margin: 0 0 2px;
    line-height: 1.25;
}

.curso-metodo-2026__step-sub {
    font-size: 11px;
    color: #64748B;
    margin: 0;
    line-height: 1.35;
}

.curso-metodo-2026__step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
}

.curso-metodo-2026__step-arrow svg {
    width: 20px;
    height: 20px;
}

/* Paso 1: Tarjetas de profesores */
.curso-metodo-2026__teachers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: auto;
}

.curso-metodo-2026__teacher-item {
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    padding: 6px 4px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.curso-metodo-2026__teacher-item:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.curso-metodo-2026__teacher-item.is-active {
    border-color: #1FA766;
    background: #F0FDF4;
    box-shadow: 0 4px 14px rgba(31, 167, 102, .15);
}

.curso-metodo-2026__teacher-img {
    width: 100%;
    height: 76px;
    border-radius: 6px;
    overflow: hidden;
}

.curso-metodo-2026__teacher-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.curso-metodo-2026__teacher-name {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.15;
    color: #4B5C71;
}

.curso-metodo-2026__teacher-item.is-active .curso-metodo-2026__teacher-name {
    color: #15803D;
}

/* Paso 2: Contexto y checks */
.curso-metodo-2026__context-box {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 10px;
    margin-top: auto;
    min-height: 110px;
    box-sizing: border-box;
}

.curso-metodo-2026__context-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #F1F5F9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.curso-metodo-2026__context-icon svg {
    width: 20px;
    height: 20px;
}

.curso-metodo-2026__context-pills {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.curso-metodo-2026__context-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: #334155;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 3px 7px;
    border-radius: 14px;
    line-height: 1.2;
}

.curso-metodo-2026__check {
    color: #10B981;
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0;
}

/* Paso 3: Tarjeta OPEC */
.curso-metodo-2026__opec-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: auto;
    min-height: 110px;
    box-sizing: border-box;
}

.curso-metodo-2026__opec-info {
    flex: 1;
}

.curso-metodo-2026__opec-tag {
    font-size: 10px;
    font-weight: 800;
    background: #DCF2E2;
    color: #166534;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 6px;
}

.curso-metodo-2026__opec-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.curso-metodo-2026__opec-list li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #4B5C71;
    font-weight: 600;
    line-height: 1.2;
}

.curso-metodo-2026__opec-list li svg {
    width: 12px;
    height: 12px;
    color: #64748B;
    flex-shrink: 0;
}

.curso-metodo-2026__opec-photo {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.curso-metodo-2026__opec-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* BLOQUE 2: Componentes */
.curso-metodo-2026__componentes-grid {
    display: grid;
    grid-template-columns: repeat(var(--comp-cols, 5), 1fr) 1.2fr;
    gap: 12px;
    margin-top: 24px;
}

.curso-metodo-2026__componente-card {
    background: #FFFFFF;
    border: 1.5px solid #EBF0F5;
    border-radius: 14px;
    padding: 20px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.curso-metodo-2026__componente-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(20, 42, 67, .06);
}

.curso-metodo-2026__comp-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.curso-metodo-2026__comp-icon svg {
    width: 22px;
    height: 22px;
}

.curso-metodo-2026__comp-icon--teal {
    background: #DCF2E2;
    color: #15803D;
}

.curso-metodo-2026__comp-icon--purple {
    background: #EDE9FE;
    color: #7C3AED;
}

.curso-metodo-2026__comp-icon--orange {
    background: #FEF3C7;
    color: #D97706;
}

.curso-metodo-2026__comp-icon--blue {
    background: #E8F3F9;
    color: #1C89C2;
}

.curso-metodo-2026__comp-icon--coral {
    background: #FEE2E2;
    color: #E11D48;
}

.curso-metodo-2026__comp-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #142A43;
    margin: 0;
    line-height: 1.2;
}

.curso-metodo-2026__comp-desc {
    font-size: 11px;
    color: #64748B;
    margin: 0;
    line-height: 1.35;
}

/* Tarjeta de Stats a la derecha */
.curso-metodo-2026__stats-card {
    background: #FFFFFF;
    border: 1.5px solid #EBF0F5;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.curso-metodo-2026__stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.curso-metodo-2026__stat-icon {
    width: 28px;
    height: 28px;
    color: #1C89C2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.curso-metodo-2026__stat-icon svg {
    width: 20px;
    height: 20px;
}

.curso-metodo-2026__stat-icon--infinity svg {
    width: 22px;
    height: 22px;
    color: #142A43;
}

.curso-metodo-2026__stat-text {
    font-size: 11.5px;
    color: #4B5C71;
    line-height: 1.2;
}

.curso-metodo-2026__stat-text strong {
    font-size: 14px;
    color: #142A43;
    font-weight: 800;
    display: block;
}

.curso-metodo-2026__stat-growth {
    font-size: 11px;
    font-weight: 700;
    color: #142A43;
}

/* BLOQUE 3: Método y Flujo */
.curso-metodo-2026__cta-wrapper {
    flex-shrink: 0;
}

.curso-metodo-2026__btn-metodo {
    background: #0E2A47;
    color: #FFFFFF;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color .2s ease;
}

.curso-metodo-2026__btn-metodo svg {
    width: 14px;
    height: 14px;
}

.curso-metodo-2026__btn-metodo:hover {
    background: #1C89C2;
    color: #FFFFFF;
}

.curso-metodo-2026__flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 28px;
    background: #F8FAFC;
    border: 1.5px solid #EBF0F5;
    border-radius: 16px;
    padding: 22px 18px;
}

.curso-metodo-2026__flow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex: 1 1 110px;
}

/* Más de 5 componentes: las tarjetas pasan a otra fila y la de cifras ocupa todo el ancho. */
.curso-metodo-2026__componentes-grid--muchos .curso-metodo-2026__stats-card {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-around;
}

.curso-metodo-2026__flow-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.curso-metodo-2026__flow-icon svg {
    width: 20px;
    height: 20px;
}

.curso-metodo-2026__flow-icon--green {
    background: #10B981;
}

.curso-metodo-2026__flow-icon--purple {
    background: #8B5CF6;
}

.curso-metodo-2026__flow-icon--orange {
    background: #F59E0B;
}

.curso-metodo-2026__flow-icon--blue {
    background: #3296C8;
}

.curso-metodo-2026__flow-icon--red {
    background: #EF4444;
}

.curso-metodo-2026__flow-icon--teal {
    background: #0D9488;
}

.curso-metodo-2026__flow-title {
    font-size: 13px;
    font-weight: 800;
    color: #142A43;
    margin: 0;
    line-height: 1.2;
}

.curso-metodo-2026__flow-desc {
    font-size: 10.5px;
    color: #64748B;
    margin: 0;
    line-height: 1.3;
    max-width: 120px;
}

.curso-metodo-2026__flow-arrow {
    font-size: 16px;
    color: #94A3B8;
    font-weight: bold;
    flex-shrink: 0;
}

/* Responsividad para la nueva sección */
@media (max-width: 991px) {

    .curso-metodo-2026__header,
    .curso-metodo-2026__header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .curso-metodo-2026__header-side-desc {
        text-align: left;
    }

    .curso-metodo-2026__handwritten,
    .curso-metodo-2026__handwritten-metodo {
        align-self: center;
        margin: 10px 0;
    }

    .curso-metodo-2026__alert-card {
        max-width: 100%;
        width: 100%;
    }

    .curso-metodo-2026__steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .curso-metodo-2026__step-arrow {
        transform: rotate(90deg);
        padding: 6px 0;
    }

    .curso-metodo-2026__componentes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .curso-metodo-2026__stats-card {
        grid-column: span 2;
    }

    .curso-metodo-2026__flow {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .curso-metodo-2026__flow-arrow {
        display: none;
    }

    .curso-metodo-2026__flow-item {
        flex: 0 0 calc(33.333% - 16px);
    }
}

@media (max-width: 991px) {
    .curso-metodo-2026__componentes-grid--muchos .curso-metodo-2026__stats-card {
        flex-direction: column;
    }
}

@media (max-width: 575px) {
    .curso-metodo-2026__block {
        padding: 24px 18px;
    }

    .curso-metodo-2026__componentes-grid {
        grid-template-columns: 1fr;
    }

    .curso-metodo-2026__stats-card {
        grid-column: span 1;
    }

    .curso-metodo-2026__flow-item {
        flex: 0 0 calc(50% - 12px);
    }
}

/* ==============================================================
   SECCIÓN: PREGUNTAS FRECUENTES Y CIERRE 2026 (curso-faq-2026)
   ============================================================== */
.curso-faq-2026 {
    margin: 50px 0 60px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: 100%;
    box-sizing: border-box;
}

.curso-faq-2026__block {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 36px 36px;
    box-sizing: border-box;
}

.curso-faq-2026__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.curso-faq-2026__header-left {
    flex: 1;
    max-width: 480px;
}

.curso-faq-2026__kicker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1C89C2;
    margin-bottom: 6px;
    display: inline-block;
}

.curso-faq-2026__title {
    font-size: 26px;
    font-weight: 800;
    color: #142A43;
    line-height: 1.18;
    margin: 0 0 10px;
    letter-spacing: -0.4px;
}

.curso-faq-2026__desc {
    font-size: 13px;
    color: #4B5C71;
    line-height: 1.5;
    margin: 0;
}

/* Header derecho: globo de diálogo y foto */
.curso-faq-2026__header-right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.curso-faq-2026__speech-bubble {
    background: #EAF4FD;
    border-radius: 18px;
    padding: 12px 18px;
    text-align: center;
    position: relative;
    border: 1px solid #DDEDF6;
}

.curso-faq-2026__speech-text {
    font-family: 'Caveat', 'Water Brush', cursive, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: #142A43;
    display: block;
}

.curso-faq-2026__flag-lines,
.curso-cta-final-2026__flag-lines {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 6px;
}

.flag-yellow {
    width: 18px;
    height: 3px;
    background: #FFD700;
    border-radius: 2px;
}

.flag-blue {
    width: 18px;
    height: 3px;
    background: #0056B3;
    border-radius: 2px;
}

.flag-red {
    width: 18px;
    height: 3px;
    background: #DC3545;
    border-radius: 2px;
}

.curso-faq-2026__person-wrap {
    position: relative;
    width: 90px;
    height: 90px;
}

.curso-faq-2026__person-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 18px rgba(20, 42, 67, .12);
    display: block;
}

.curso-faq-2026__floating-note {
    position: absolute;
    top: -6px;
    right: -72px;
    font-family: 'Water Brush', 'Brush Script MT', 'Caveat', cursive, sans-serif;
    font-size: 15px;
    line-height: 1.05;
    color: #64748B;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.curso-faq-2026__heart {
    font-size: 16px;
    color: #94A3B8;
    margin-top: 2px;
}

/* Grilla de Acordeones 3 Columnas */
.curso-faq-2026__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 32px;
}

.curso-faq-2026__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.curso-faq-2026__item {
    background: #FFFFFF;
    border: 1.5px solid #EBF0F5;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.curso-faq-2026__item[open] {
    border-color: #1C89C2;
    box-shadow: 0 4px 16px rgba(28, 137, 194, .08);
}

.curso-faq-2026__summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    min-height: 76px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

.curso-faq-2026__summary::-webkit-details-marker {
    display: none;
}

.curso-faq-2026__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.curso-faq-2026__icon svg {
    width: 16px;
    height: 16px;
}

.curso-faq-2026__icon--blue {
    background: #E8F3F9;
    color: #1C89C2;
}

.curso-faq-2026__icon--green {
    background: #DCF2E2;
    color: #15803D;
}

.curso-faq-2026__icon--purple {
    background: #EDE9FE;
    color: #7C3AED;
}

.curso-faq-2026__icon--orange {
    background: #FEF3C7;
    color: #D97706;
}

.curso-faq-2026__icon--coral {
    background: #FEE2E2;
    color: #E11D48;
}

.curso-faq-2026__icon--teal {
    background: #CCFBF1;
    color: #0F766E;
}

.curso-faq-2026__question {
    font-size: 1rem;
    font-weight: 200;
    color: #142A43;
    flex: 1;
    line-height: 1.35;
}

.curso-faq-2026__chevron {
    color: #94A3B8;
    transition: transform .2s ease, color .2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.curso-faq-2026__chevron svg {
    width: 14px;
    height: 14px;
}

.curso-faq-2026__item[open] .curso-faq-2026__chevron {
    transform: rotate(180deg);
    color: #1C89C2;
}

.curso-faq-2026__answer {
    padding: 0 14px 14px 56px;
    font-size: 11.5px;
    color: #4B5C71;
    line-height: 1.5;
}

.curso-faq-2026__answer p {
    margin: 0;
}

/* Barra de Contacto */
.curso-faq-2026__contact-bar {
    background: #F8FAFC;
    border: 1.5px solid #EBF0F5;
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    gap: 16px;
}

.curso-faq-2026__contact-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.curso-faq-2026__contact-bubble-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #1C89C2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.curso-faq-2026__contact-bubble-icon svg {
    width: 18px;
    height: 18px;
}

.curso-faq-2026__contact-title {
    font-size: 12.5px;
    font-weight: 800;
    color: #142A43;
    display: block;
    line-height: 1.25;
}

.curso-faq-2026__contact-sub {
    font-size: 1rem;
    color: #64748B;
}

.curso-faq-2026__contact-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.curso-faq-2026__contact-btn {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 11.5px;
    font-weight: 700;
    color: #142A43;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all .2s ease;
}

.curso-faq-2026__contact-btn:hover {
    border-color: #1C89C2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 42, 67, .06);
    color: #1C89C2;
}

.curso-faq-2026__c-icon--green {
    width: 14px;
    height: 14px;
    color: #25D366;
}

.curso-faq-2026__c-icon--blue {
    width: 14px;
    height: 14px;
    color: #1C89C2;
}

.curso-faq-2026__c-icon--navy {
    width: 14px;
    height: 14px;
    color: #0E2A47;
}

.curso-faq-2026__arrow-icon {
    width: 12px;
    height: 12px;
    color: #94A3B8;
}

/* ==============================================================
   CARD DE CIERRE / CTA INSPIRACIONAL (.curso-cta-final-2026)
   ============================================================== */
/* Pedido explícito del owner: la sección .bannercurso (envuelve la tarjeta
   de cierre .curso-cta-final-2026) debe verse amarillo claro — mismo
   #FEF3C7 ya usado en otras secciones de esta página (íconos de
   .curso-faq-2026__icon--orange, .curso-metodo-2026__comp-icon--orange,
   etc.). Padding agregado (antes 0) para que el amarillo se note como
   marco alrededor de la tarjeta blanca — sin esto, la tarjeta (blanca,
   bordes redondeados) tapa el 100% de la sección y el color de fondo
   nunca llega a verse. */
.bannercurso {
    background: #FEF3C7;
    padding: 50px 0;
}

/* Pedido explícito del owner: "sacar el contenido del card y eliminar el
   card y centrar el contenido" — .curso-cta-final-2026 también se usa tal
   cual (con su look de tarjeta blanca) en curso.php, así que esto NO toca
   la clase base — solo la pisa quitándole el look de tarjeta y centrando
   el contenido cuando vive dentro de .bannercurso. */
.bannercurso .curso-cta-final-2026 {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    min-height: auto;
    padding: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

.bannercurso .curso-cta-final-2026__center {
    flex: none;
    padding: 0;
    text-align: center;
}

.bannercurso .curso-cta-final-2026__actions {
    justify-content: center;
}

.bannercurso .curso-cta-final-2026__right {
    padding-left: 0;
}

.curso-cta-final-2026 {
    background: none;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 25px rgba(15, 39, 69, .06);
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    padding: 20px 32px 20px 0;
    min-height: 180px;
    box-sizing: border-box;
    gap: 150px;
}

.curso-cta-final-2026__left {
    display: flex;
    align-items: center;
    position: relative;
    height: 180px;
    width: 330px;
    flex-shrink: 0;
}

.curso-cta-final-2026__photo-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 220px;
    overflow: hidden;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);
}

.curso-cta-final-2026__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

.curso-cta-final-2026__note-left {
    position: relative;
    z-index: 2;
    margin-left: auto;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: rotate(-3deg);
}

.curso-cta-final-2026__cursive-text {
    font-family: 'Caveat', 'Water Brush', cursive, sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.08;
    color: #0F2744;
    display: block;
}

.curso-cta-final-2026__center {
    flex: 1;
    padding: 0 10px;
    text-align: left;
}

.curso-cta-final-2026__title {
    font-size: 26px;
    font-weight: 800;
    color: #0F2744;
    line-height: 1.2;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}

.curso-cta-final-2026__desc {
    font-size: 13.5px;
    color: #475569;
    margin: 0 0 18px 0;
    line-height: 1.45;
}

.curso-cta-final-2026__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.curso-cta-final-2026__btn-primary {
    background: #00875A;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 9px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color .2s ease, transform .15s ease;
    box-shadow: 0 2px 8px rgba(0, 135, 90, .2);
}

.curso-cta-final-2026__btn-primary:hover {
    background: #00704A;
    transform: translateY(-1px);
    color: #FFFFFF !important;
}

.curso-cta-final-2026__btn-primary svg {
    width: 15px;
    height: 15px;
}

.curso-cta-final-2026__btn-secondary {
    border: 1.5px solid #0F2744;
    color: #0F2744 !important;
    background: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    padding: 10.5px 22px;
    border-radius: 9px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .2s ease;
}

.curso-cta-final-2026__btn-secondary:hover {
    background: #F1F5F9;
    border-color: #0F2744;
    color: #0F2744 !important;
}

.curso-cta-final-2026__btn-secondary svg {
    width: 15px;
    height: 15px;
}

.curso-cta-final-2026__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    flex-shrink: 0;
    width: 220px;
    padding-left: 10px;
}

.curso-cta-final-2026__book-icon {
    width: 36px;
    height: 36px;
    color: #0F2744;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.curso-cta-final-2026__book-icon svg {
    width: 28px;
    height: 28px;
}

.curso-cta-final-2026__quote-cursive {
    font-family: 'Caveat', 'Water Brush', cursive, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #0F2744;
    display: block;
}

/* Responsividad para FAQ y CTA Final */
@media (max-width: 1100px) {
    .curso-cta-final-2026 {
        flex-wrap: wrap;
        padding: 24px;
    }

    .curso-cta-final-2026__left {
        width: 100%;
        justify-content: flex-start;
        height: 140px;
    }

    .curso-cta-final-2026__photo-bg {
        width: 160px;
    }

    .curso-cta-final-2026__note-left {
        margin-left: 180px;
    }

    .curso-cta-final-2026__center {
        width: 100%;
        padding: 10px 0;
    }

    .curso-cta-final-2026__right {
        width: 100%;
        padding-left: 0;
        margin-top: 10px;
    }
}

@media (max-width: 991px) {
    .curso-faq-2026__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .curso-faq-2026__header-right {
        align-self: center;
    }

    .curso-faq-2026__grid {
        grid-template-columns: 1fr;
    }

    .curso-faq-2026__contact-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .curso-faq-2026__contact-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    .curso-cta-final-2026 {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        padding: 24px;
    }

    .curso-cta-final-2026__left {
        justify-content: center;
        height: auto;
    }

    .curso-cta-final-2026__photo-bg {
        position: static;
        width: 100px;
        height: 100px;
        border-radius: 12px;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .curso-cta-final-2026__note-left {
        margin-left: 14px;
        transform: none;
    }

    .curso-cta-final-2026__center {
        text-align: center;
        max-width: 100%;
    }

    .curso-cta-final-2026__actions {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .curso-faq-2026__block {
        padding: 24px 18px;
    }

    .curso-faq-2026__header-right {
        flex-direction: column;
        gap: 16px;
    }

    .curso-faq-2026__contact-actions {
        flex-direction: column;
    }

    .curso-faq-2026__contact-btn {
        width: 100%;
        justify-content: center;
    }

    .curso-cta-final-2026__actions {
        flex-direction: column;
        width: 100%;
    }

    .curso-cta-final-2026__btn-primary,
    .curso-cta-final-2026__btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .curso-cta-final-2026__left {
        flex-direction: column;
        gap: 10px;
    }

    .curso-cta-final-2026__note-left {
        margin-left: 0;
    }
}

/* ==============================================================
   BARRA DE CONFIANZA / ESTADÍSTICAS (.curso-stats-bar-2026)
   ============================================================== */
.curso-stats-bar-2026 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 10px 10px;
    margin-top: 24px;
    border-top: 1px solid #F1F5F9;
    flex-wrap: wrap;
    gap: 20px;
}

.curso-stats-bar-2026__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.curso-stats-bar-2026__icon {
    width: 26px;
    height: 26px;
    color: #142A43;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.curso-stats-bar-2026__icon svg {
    width: 22px;
    height: 22px;
}

.curso-stats-bar-2026__item strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #142A43;
    line-height: 1.2;
}

.curso-stats-bar-2026__item span {
    font-size: 12px;
    color: #64748B;
    line-height: 1.2;
}

.curso-stats-bar-2026__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 20px;
    border-left: 1.5px solid #E2E8F0;
}

.curso-stats-bar-2026__geard-logo {
    font-size: 26px;
    font-weight: 900;
    color: #142A43;
    letter-spacing: -0.5px;
}

.curso-stats-bar-2026__geard-tagline {
    font-size: 11px;
    color: #64748B;
    line-height: 1.25;
}

@media (max-width: 991px) {
    .curso-stats-bar-2026 {
        justify-content: center;
        gap: 20px 30px;
    }

    .curso-stats-bar-2026__brand {
        border-left: none;
        padding-left: 0;
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

/* ==============================================================
   HOME 2026: NUESTRO EQUIPO, HISTORIAS REALES Y PROPÓSITO
   ============================================================== */
.home-social-proof-2026 {
    background: #FFFFFF;
    padding: 60px 0 40px;
    box-sizing: border-box;
}

/* BLOQUE 1: NUESTRO EQUIPO */
.home-team-2026 {
    margin-bottom: 50px;
}

.home-team-2026__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.home-team-2026__header-left {
    flex: 1;
    max-width: 440px;
}

.home-team-2026__kicker {
    font-size: 11.5px;
    font-weight: 700;
    color: #1C89C2;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}

.home-team-2026__title {
    font-size: 32px;
    font-weight: 800;
    color: #142A43;
    line-height: 1.15;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

.home-team-2026__desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.45;
    margin: 0;
}

.home-team-2026__header-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-team-2026__cursive-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: rotate(-3deg);
}

.home-team-2026__cursive-text {
    font-family: 'Caveat', 'Water Brush', cursive, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.05;
    color: #142A43;
    display: block;
}

.home-team-2026__flag-lines,
.home-banner-proposito-2026__flag-lines {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
}

.home-team-2026__header-right {
    flex-shrink: 0;
}

.home-team-2026__stats-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 14px 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

.home-team-2026__stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-team-2026__stat-icon {
    width: 22px;
    height: 22px;
    color: #142A43;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-team-2026__stat-icon svg {
    width: 18px;
    height: 18px;
}

.home-team-2026__stat-item strong {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: #142A43;
    line-height: 1.15;
}

.home-team-2026__stat-item span {
    font-size: 11px;
    color: #64748B;
    line-height: 1.15;
}

/* GRID DE EQUIPO */
.home-team-2026__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.home-team-2026__card {
    background: #FFFFFF;
    border: 1px solid #EBF0F5;
    border-radius: 16px;
    padding: 10px 10px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 15px rgba(20, 42, 67, .03);
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-team-2026__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(20, 42, 67, .08);
}

.home-team-2026__avatar-wrap {
    width: 100%;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.home-team-2026__avatar-wrap--green {
    background: #E8F5E9;
}

.home-team-2026__avatar-wrap--blue {
    background: #E8F3F9;
}

.home-team-2026__avatar-wrap--warm {
    background: #FFF8E1;
}

.home-team-2026__avatar-wrap--lightblue {
    background: #DDEDF6;
}

.home-team-2026__avatar-wrap--mint {
    background: #E0F2F1;
}

.home-team-2026__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Miembro sin foto cargada (talento_humano.foto es opcional, ver
   /4dmon/talento-humano/) — iniciales centradas en vez de dejar el recuadro
   pastel vacío. */
.home-team-2026__avatar--sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--eduact-secondary);
    font-size: 32px;
    font-weight: 800;
}

.home-team-2026__member-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #142A43;
    margin: 0 0 2px;
    line-height: 1.2;
}

.home-team-2026__member-role {
    font-size: 9.5px;
    font-weight: 700;
    color: #1C89C2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.home-team-2026__member-desc {
    font-size: 11px;
    color: #64748B;
    line-height: 1.35;
    margin: 0;
}

/* CARD 6: DETRÁS DE ELLOS */
.home-team-2026__more-card {
    background: #F0F7FD;
    border: 1px solid #DDEDF6;
    border-radius: 16px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    box-sizing: border-box;
}

.home-team-2026__more-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #142A43;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.home-team-2026__more-icon svg {
    width: 16px;
    height: 16px;
}

.home-team-2026__more-title {
    font-size: 14px;
    font-weight: 800;
    color: #142A43;
    margin: 0 0 6px;
    line-height: 1.2;
}

.home-team-2026__more-desc {
    font-size: 10.5px;
    color: #475569;
    line-height: 1.35;
    margin: 0 0 12px;
}

.home-team-2026__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #142A43;
    background: #FFFFFF;
    border: 1.5px solid #142A43;
    border-radius: 20px;
    padding: 6px 12px;
    text-decoration: none;
    transition: all .2s ease;
    align-self: stretch;
    justify-content: center;
}

.home-team-2026__more-btn:hover {
    background: #142A43;
    color: #FFFFFF;
}

.home-team-2026__more-btn svg {
    width: 12px;
    height: 12px;
}

/* BLOQUE 2: HISTORIAS REALES */
.home-testimonials-2026 {
    margin-bottom: 45px;
}

.home-testimonials-2026__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.home-testimonials-2026__kicker {
    font-size: 11.5px;
    font-weight: 700;
    color: #1C89C2;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.home-testimonials-2026__title {
    font-size: 26px;
    font-weight: 800;
    color: #142A43;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.4px;
}

.home-testimonials-2026__header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-testimonials-2026__subnote {
    font-size: 12.5px;
    color: #64748B;
}

.home-testimonials-2026__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-testimonials-2026__nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #142A43;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    padding: 0;
}

.home-testimonials-2026__nav-btn:hover {
    border-color: #142A43;
    background: #F8FAFC;
}

.home-testimonials-2026__nav-btn svg {
    width: 14px;
    height: 14px;
}

.home-testimonials-2026__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.home-testimonials-2026__card {
    background: #FFFFFF;
    border: 1px solid #EBF0F5;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 14px;
    box-shadow: 0 4px 15px rgba(20, 42, 67, .03);
    box-sizing: border-box;
}

.home-testimonials-2026__photo-wrap {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.home-testimonials-2026__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Historia sin foto cargada (historias_reales.foto es opcional, ver
   /4dmon/historias-reales/) — iniciales sobre un fondo de marca en vez de dejar
   el recuadro vacío o mostrar la foto de otra persona. */
.home-testimonials-2026__photo--sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--eduact-secondary), #3296C8);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

.home-testimonials-2026__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-testimonials-2026__quote {
    font-size: 12px;
    color: #334155;
    line-height: 1.45;
    margin: 0 0 10px;
}

.home-testimonials-2026__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #F1F5F9;
    padding-top: 8px;
}

.home-testimonials-2026__name {
    font-size: 12.5px;
    font-weight: 800;
    color: #142A43;
    margin: 0;
    line-height: 1.1;
}

.home-testimonials-2026__role {
    font-size: 11px;
    color: #64748B;
}

.home-testimonials-2026__stars {
    color: #F59E0B;
    font-size: 13px;
    letter-spacing: 1px;
}

/* BLOQUE 3: BANNER FINAL PROPÓSITO (100% WIDTH) */
.home-proposito-full-2026 {
    width: 100%;
    background-color: #FFFFFF;
    background-image: url('../images/home-2026/home_banner_estudiante.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-top: 1px solid #EBF0F5;
    border-bottom: 1px solid #EBF0F5;
    box-shadow: 0 4px 20px rgba(15, 39, 69, .04);
    padding: 18px 0;
    min-height: 200px;
    box-sizing: border-box;
}

.home-banner-proposito-2026 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 140px;
    box-sizing: border-box;
    gap: 16px;
}

.home-banner-proposito-2026__left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 310px;
    flex-shrink: 0;
    padding-right: 15px;
    box-sizing: border-box;
}

.home-banner-proposito-2026__note-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: rotate(-3deg);
}

.home-banner-proposito-2026__cursive-text {
    font-family: 'Caveat', 'Water Brush', cursive, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    color: #0F2744;
    display: block;
}

.home-banner-proposito-2026__heart {
    font-size: 18px;
    color: #0F2744;
    display: block;
    margin-top: 2px;
}

.home-banner-proposito-2026__center {
    flex: 1;
    padding: 0 16px;
    text-align: left;
}

.home-banner-proposito-2026__kicker {
    font-size: 11px;
    font-weight: 700;
    color: #1C89C2;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.home-banner-proposito-2026__title {
    font-size: 24px;
    font-weight: 800;
    color: #0F2744;
    line-height: 1.2;
    margin: 0 0 6px 0;
    letter-spacing: -0.4px;
}

.home-banner-proposito-2026__desc {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.45;
}

.home-banner-proposito-2026__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.home-banner-proposito-2026__btn {
    background: #0F2744;
    color: #FFFFFF !important;
    font-size: 13.5px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 9px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color .2s ease, transform .15s ease;
}

.home-banner-proposito-2026__btn:hover {
    background: #1C89C2;
    transform: translateY(-1px);
}

.home-banner-proposito-2026__btn svg {
    width: 14px;
    height: 14px;
}

.home-banner-proposito-2026__slogan {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.home-banner-proposito-2026__slogan span {
    font-size: 11px;
    color: #64748B;
    font-weight: 500;
}

/* RESPONSIVE DESIGN PARA HOME */
@media (max-width: 1199px) {
    .home-team-2026__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-team-2026__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-team-2026__header-center {
        align-self: center;
    }

    .home-team-2026__header-right {
        width: 100%;
    }

    .home-team-2026__stats-card {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .home-testimonials-2026__grid {
        grid-template-columns: 1fr;
    }

    .home-banner-proposito-2026 {
        flex-direction: column;
        text-align: center;
        padding: 24px;
        gap: 20px;
    }

    .home-banner-proposito-2026__left {
        justify-content: center;
        height: auto;
        width: 100%;
    }

    .home-banner-proposito-2026__photo-bg {
        position: static;
        width: 100px;
        height: 100px;
        border-radius: 12px;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .home-banner-proposito-2026__note-left {
        margin-left: 14px;
        transform: none;
    }

    .home-banner-proposito-2026__center {
        text-align: center;
    }

    .home-team-2026__stats-card {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .home-team-2026__grid {
        grid-template-columns: 1fr;
    }

    .home-testimonials-2026__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-testimonials-2026__card {
        flex-direction: column;
    }

    .home-testimonials-2026__photo-wrap {
        width: 100%;
        height: 140px;
    }

    .home-banner-proposito-2026__left {
        flex-direction: column;
        gap: 10px;
    }

    .home-banner-proposito-2026__note-left {
        margin-left: 0;
    }

    .home-banner-proposito-2026__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==============================================================
   CAMPUS GEARD SHOWCASE 2026 (.campus-showcase-2026)
   ============================================================== */
.campus-showcase-2026 {
    background: #FFFFFF;
    padding: 60px 0 70px;
    box-sizing: border-box;
}

.campus-showcase-2026__top {
    position: relative;
    background-image: url('../images/campus-2026/campus_laptop_showcase.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 690px auto;
    min-height: 430px;
    display: flex;
    align-items: center;
    margin-bottom: 45px;
    box-sizing: border-box;
}

.campus-showcase-2026__left {
    flex: 0 0 340px;
    max-width: 340px;
    position: relative;
    z-index: 2;
}

.campus-showcase-2026__kicker {
    font-size: 11.5px;
    font-weight: 700;
    color: #1C89C2;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.campus-showcase-2026__title {
    font-size: 34px;
    font-weight: 800;
    color: #142A43;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.6px;
}

.campus-showcase-2026__desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 24px;
}

.campus-showcase-2026__features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.campus-showcase-2026__feat-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.campus-showcase-2026__feat-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.campus-showcase-2026__feat-icon svg {
    width: 18px;
    height: 18px;
}

.campus-showcase-2026__feat-icon--green {
    background: #DCFCE7;
    color: #16A34A;
}

.campus-showcase-2026__feat-icon--purple {
    background: #F3E8FF;
    color: #9333EA;
}

.campus-showcase-2026__feat-icon--yellow {
    background: #FEF3C7;
    color: #D97706;
}

.campus-showcase-2026__feat-icon--blue {
    background: #E8F3F9;
    color: #1C89C2;
}

.campus-showcase-2026__feat-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #142A43;
    margin: 0 0 2px;
    line-height: 1.2;
}

.campus-showcase-2026__feat-desc {
    font-size: 11.5px;
    color: #64748B;
    margin: 0;
    line-height: 1.35;
}

.campus-showcase-2026__note-bottom {
    position: absolute;
    left: 45%;
    bottom: -16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: rotate(-2deg);
    z-index: 3;
}

.campus-showcase-2026__curved-arrow {
    width: 32px;
    height: 20px;
    color: #1C89C2;
    flex-shrink: 0;
}

.campus-showcase-2026__cursive-text {
    font-family: 'Caveat', 'Water Brush', cursive, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
    color: #142A43;
}

/* PARTE INFERIOR: 5 TARJETAS */
.campus-showcase-2026__bottom-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.campus-showcase-2026__card {
    background: #FFFFFF;
    border: 1px solid #EBF0F5;
    border-radius: 16px;
    padding: 12px 12px 14px;
    box-shadow: 0 4px 16px rgba(20, 42, 67, .03);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.campus-showcase-2026__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(20, 42, 67, .08);
}

.campus-showcase-2026__card--green-badge {
    background: #F0FDF4;
    border-color: #DCFCE7;
    justify-content: center;
    padding: 20px 16px;
}

.campus-showcase-2026__device-icon {
    width: 36px;
    height: 36px;
    color: #059669;
    margin-bottom: 12px;
}

.campus-showcase-2026__device-icon svg {
    width: 34px;
    height: 34px;
}

.campus-showcase-2026__card-thumb {
    width: 100%;
    height: 95px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
}

.campus-showcase-2026__card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.campus-showcase-2026__card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #142A43;
    margin: 0 0 4px;
    line-height: 1.2;
}

.campus-showcase-2026__card-desc {
    font-size: 11px;
    color: #64748B;
    line-height: 1.35;
    margin: 0;
}

/* RESPONSIVIDAD PARA CAMPUS SHOWCASE */
@media (max-width: 1199px) {
    .campus-showcase-2026__top {
        background-size: 560px auto;
        min-height: 390px;
    }

    .campus-showcase-2026__bottom-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .campus-showcase-2026__top {
        background-position: center bottom;
        background-size: 100% auto;
        padding-bottom: 350px;
        flex-direction: column;
        align-items: flex-start;
    }

    .campus-showcase-2026__left {
        max-width: 100%;
        width: 100%;
    }

    .campus-showcase-2026__features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .campus-showcase-2026__note-bottom {
        left: 50%;
        transform: translateX(-50%);
        bottom: -25px;
    }
}

@media (max-width: 768px) {
    .campus-showcase-2026__features {
        grid-template-columns: 1fr;
    }

    .campus-showcase-2026__bottom-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .campus-showcase-2026__note-bottom {
        position: static;
        margin-top: 14px;
        justify-content: center;
        transform: none;
    }
}

@media (max-width: 575px) {
    .campus-showcase-2026__bottom-grid {
        grid-template-columns: 1fr;
    }

    .campus-showcase-2026 {
        padding: 40px 0;
    }
}

/* ==============================================================
   RUTA DE ACOMPAÑAMIENTO 2026 (.ruta-camino-2026)
   ============================================================== */
.ruta-camino-2026 {
    position: relative;
    width: 100%;
    min-height: 720px;
    background-color: #EDF5FA;
    background-image: url('../images/home-2026/ruta_camino_fondo_escenico.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    padding: 70px 0 0;
    overflow: visible;
    box-sizing: border-box;
}

@media (min-width: 1400px) {
    .ruta-camino-2026 {
        background-size: cover;
        background-position: right bottom;
    }
}

.ruta-camino-2026__container {
    position: relative;
    z-index: 5;
    min-height: 620px;
}

.ruta-camino-2026__header {
    display: grid;
    grid-template-columns: 1.25fr 1fr auto;
    gap: 24px;
    align-items: center;
    margin-bottom: 25px;
    padding-right: 280px;
    /* Espacio para que no tape el letrero y la estudiante a la derecha */
    position: relative;
    z-index: 10;
}

.ruta-camino-2026__header-main {
    max-width: 440px;
}

.ruta-camino-2026__eyebrow {
    font-size: 11px;
    font-weight: 800;
    color: #1C89C2;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.ruta-camino-2026__title {
    font-size: 26px;
    font-weight: 800;
    color: #0F2744;
    line-height: 1.18;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.ruta-camino-2026__subtitle {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.45;
    margin: 0;
}

/* Tarjeta flotante de actualización (Fondo oscuro con texto e ícono blancos) */
.ruta-camino-2026__update-box {
    background: linear-gradient(135deg, #0F2744 0%, #17385E 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 25px rgba(15, 39, 69, 0.22);
    padding: 16px 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ruta-camino-2026__update-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ruta-camino-2026__update-icon svg {
    width: 20px;
    height: 20px;
}

.ruta-camino-2026__update-info {
    flex: 1;
}

.ruta-camino-2026__update-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.ruta-camino-2026__update-desc {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.4;
    margin: 0 0 8px 0;
}

.ruta-camino-2026__update-link {
    font-size: 12px;
    font-weight: 700;
    color: #9ECFE6;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.ruta-camino-2026__update-link:hover {
    color: #FFFFFF;
    transform: translateX(2px);
}

.ruta-camino-2026__update-link svg {
    width: 13px;
    height: 13px;
}

/* Slogan gráfico */
.ruta-camino-2026__header-slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.ruta-camino-2026__slogan-img {
    max-height: 110px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(15, 39, 69, 0.08));
}

/* ==============================================================
   CARRETERA Y PASOS INTERACTIVOS (9 NODOS CON DIALOG TOOLTIP)
   ============================================================== */
.ruta-camino-2026__road-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 160px;
    margin: 0;
}

.ruta-camino-2026__steps-track {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 15;
}

.ruta-camino-2026__step-item {
    position: static;
    outline: none;
}

/* Posicionamiento exacto de cada botón sobre la carretera del fondo y colores del paso */
.ruta-camino-2026__step-item--1 {
    --step-theme-color: #0D9488;
    --step-theme-bg: rgba(230, 255, 250, 0.80);
    --step-theme-border: #14B8A6;
}

.ruta-camino-2026__step-item--1 .ruta-camino-2026__node-btn {
    left: 8.8%;
    top: 76%;
}

.ruta-camino-2026__step-item--2 {
    --step-theme-color: #1C89C2;
    --step-theme-bg: rgba(232, 243, 249, 0.80);
    --step-theme-border: #9ECFE6;
}

.ruta-camino-2026__step-item--2 .ruta-camino-2026__node-btn {
    left: 18.5%;
    top: 76%;
}

.ruta-camino-2026__step-item--3 {
    --step-theme-color: #D97706;
    --step-theme-bg: rgba(254, 243, 199, 0.80);
    --step-theme-border: #FBBF24;
}

.ruta-camino-2026__step-item--3 .ruta-camino-2026__node-btn {
    left: 28.8%;
    top: 78%;
}

.ruta-camino-2026__step-item--4 {
    --step-theme-color: #E11D48;
    --step-theme-bg: rgba(255, 228, 230, 0.80);
    --step-theme-border: #FB7185;
}

.ruta-camino-2026__step-item--4 .ruta-camino-2026__node-btn {
    left: 39.0%;
    top: 78%;
}

.ruta-camino-2026__step-item--5 {
    --step-theme-color: #059669;
    --step-theme-bg: rgba(209, 250, 229, 0.80);
    --step-theme-border: #34D399;
}

.ruta-camino-2026__step-item--5 .ruta-camino-2026__node-btn {
    left: 49.3%;
    top: 70%;
}

.ruta-camino-2026__step-item--6 {
    --step-theme-color: #1C89C2;
    --step-theme-bg: rgba(232, 243, 249, 0.80);
    --step-theme-border: #3296C8;
}

.ruta-camino-2026__step-item--6 .ruta-camino-2026__node-btn {
    left: 59.5%;
    top: 82%;
}

.ruta-camino-2026__step-item--7 {
    --step-theme-color: #1C89C2;
    --step-theme-bg: rgba(232, 243, 249, 0.80);
    --step-theme-border: #3296C8;
}

.ruta-camino-2026__step-item--7 .ruta-camino-2026__node-btn {
    left: 69.8%;
    top: 84%;
}

.ruta-camino-2026__step-item--8 {
    --step-theme-color: #0F766E;
    --step-theme-bg: rgba(204, 251, 241, 0.80);
    --step-theme-border: #2DD4BF;
}

.ruta-camino-2026__step-item--8 .ruta-camino-2026__node-btn {
    left: 79.5%;
    top: 74%;
}

/* Botón circular del nodo */
.ruta-camino-2026__node-btn {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--node-bg);
    border: 2.5px solid var(--node-border);
    box-shadow: 0 4px 14px rgba(15, 39, 69, 0.16), 0 0 0 4px rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--node-color);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

.ruta-camino-2026__step-item:hover .ruta-camino-2026__node-btn,
.ruta-camino-2026__step-item:focus .ruta-camino-2026__node-btn,
.ruta-camino-2026__step-item.is-active .ruta-camino-2026__node-btn {
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow: 0 8px 24px rgba(15, 39, 69, 0.28), 0 0 0 6px rgba(255, 255, 255, 0.98);
    border-color: var(--node-color);
    z-index: 110;
}

.ruta-camino-2026__node-badge {
    position: absolute;
    top: -5px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--node-color);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 1.5px solid #FFFFFF;
}

.ruta-camino-2026__node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ruta-camino-2026__node-icon svg {
    width: 22px;
    height: 22px;
}

/* ==============================================================
   GLOBO DEL TOOLTIP (ANCHO 100% DE LA SECCIÓN Y ALTO MÍNIMO 320PX)
   ============================================================== */
.ruta-camino-2026__dialog-tooltip {
    position: absolute;
    bottom: calc(100% - 66px);
    left: 0;
    right: 0;
    width: 100%;
    height: 320px;
    min-height: 320px;
    max-height: 320px;
    background: var(--step-theme-bg, rgba(255, 255, 255, 0.80));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 8px;
    padding: 30px;
    border: 1.5px solid var(--step-theme-border, rgba(203, 213, 225, 0.7));
    box-shadow: 0 20px 45px -8px rgba(15, 39, 69, 0.16), 0 6px 18px rgba(15, 39, 69, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    transform: translateY(-8px);
    z-index: 70;
    text-align: left;
    box-sizing: border-box;
}

/* Contenedor desplazable con alineación superior izquierda y scrollbar de 5px */
.ruta-camino-2026__dialog-scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding-right: 12px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--step-theme-color, #1C89C2) transparent;
}

.ruta-camino-2026__dialog-scroll::-webkit-scrollbar {
    width: 5px;
}

.ruta-camino-2026__dialog-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.ruta-camino-2026__dialog-scroll::-webkit-scrollbar-thumb {
    background-color: var(--step-theme-color, #1C89C2);
    border-radius: 4px;
}

/* Puntero triangular hacia abajo apuntando exactamente al ícono */
.ruta-camino-2026__dialog-tooltip::before {
    content: '';
    position: absolute;
    bottom: -11px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid var(--step-theme-bg, rgba(255, 255, 255, 0.80));
    border-bottom: none;
    z-index: 2;
}

.ruta-camino-2026__dialog-tooltip::after {
    content: '';
    position: absolute;
    bottom: -13px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 13px solid var(--step-theme-border, #CBD5E1);
    border-bottom: none;
    z-index: 1;
}

/* Ubicación de la punta del globo según cada paso */
.ruta-camino-2026__step-item--1 .ruta-camino-2026__dialog-tooltip::before,
.ruta-camino-2026__step-item--1 .ruta-camino-2026__dialog-tooltip::after {
    left: 8.8%;
}

.ruta-camino-2026__step-item--2 .ruta-camino-2026__dialog-tooltip::before,
.ruta-camino-2026__step-item--2 .ruta-camino-2026__dialog-tooltip::after {
    left: 18.5%;
}

.ruta-camino-2026__step-item--3 .ruta-camino-2026__dialog-tooltip::before,
.ruta-camino-2026__step-item--3 .ruta-camino-2026__dialog-tooltip::after {
    left: 28.8%;
}

.ruta-camino-2026__step-item--4 .ruta-camino-2026__dialog-tooltip::before,
.ruta-camino-2026__step-item--4 .ruta-camino-2026__dialog-tooltip::after {
    left: 39.0%;
}

.ruta-camino-2026__step-item--5 .ruta-camino-2026__dialog-tooltip::before,
.ruta-camino-2026__step-item--5 .ruta-camino-2026__dialog-tooltip::after {
    left: 49.3%;
}

.ruta-camino-2026__step-item--6 .ruta-camino-2026__dialog-tooltip::before,
.ruta-camino-2026__step-item--6 .ruta-camino-2026__dialog-tooltip::after {
    left: 59.5%;
}

.ruta-camino-2026__step-item--7 .ruta-camino-2026__dialog-tooltip::before,
.ruta-camino-2026__step-item--7 .ruta-camino-2026__dialog-tooltip::after {
    left: 69.8%;
}

.ruta-camino-2026__step-item--8 .ruta-camino-2026__dialog-tooltip::before,
.ruta-camino-2026__step-item--8 .ruta-camino-2026__dialog-tooltip::after {
    left: 79.5%;
}

/* Despliegue únicamente cuando el paso tiene la clase .is-active (controlado por clic) */
.ruta-camino-2026__step-item.is-active .ruta-camino-2026__dialog-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Contenido del cuadro de diálogo */
.ruta-camino-2026__dialog-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
    border-radius: 50%;
    margin-bottom: 12px;
}

.ruta-camino-2026__dialog-title {
    font-size: 22px;
    font-weight: 800;
    color: #000000 !important;
    margin: 0 0 10px 0;
    line-height: 1.25;
    width: 100%;
    opacity: 1 !important;
}

.ruta-camino-2026__dialog-text {
    font-size: 15.5px;
    color: #000000 !important;
    margin: 0;
    line-height: 1.55;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    opacity: 1 !important;
}

.ruta-camino-2026__dialog-text,
.ruta-camino-2026__dialog-text *,
.ruta-camino-2026__dialog-text p,
.ruta-camino-2026__dialog-text span,
.ruta-camino-2026__dialog-text div,
.ruta-camino-2026__dialog-text li,
.ruta-camino-2026__dialog-text strong,
.ruta-camino-2026__dialog-text em {
    color: #000000 !important;
    opacity: 1 !important;
    max-width: 100%;
}

/* ==============================================================
   RESPONSIVE PARA RUTA DE ACOMPAÑAMIENTO 2026
   ============================================================== */
@media (max-width: 1199px) {
    .ruta-camino-2026__header {
        grid-template-columns: 1fr 1fr;
        padding-right: 0;
    }

    .ruta-camino-2026__header-slogan {
        grid-column: span 2;
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .ruta-camino-2026__road-container {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        overflow-x: auto;
        overflow-y: visible;
        margin-top: 30px;
        padding-bottom: 120px;
    }

    .ruta-camino-2026__steps-track {
        min-width: 960px;
    }
}

@media (max-width: 768px) {
    .ruta-camino-2026__header {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
        padding-right: 0;
    }

    .ruta-camino-2026__header-main {
        max-width: 100%;
    }

    .ruta-camino-2026__dialog-tooltip {
        padding: 24px 20px;
        min-height: 240px;
    }

    .ruta-camino-2026__dialog-title {
        font-size: 18px;
    }

    .ruta-camino-2026__dialog-text {
        font-size: 14px;
    }
}

/* ==============================================================
   TARJETAS DE CURSOS DESTACADOS 2026 (.course-card-2026)
   ============================================================== */
.course-three .row {
    row-gap: 20px;
}

.course-card-2026 {
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 18px rgba(15, 39, 69, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 20px;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card-2026:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(15, 39, 69, 0.12);
}

.course-card-2026__thumb {
    width: 100%;
    height: 155px;
    overflow: hidden;
    position: relative;
    background: #F1F5F9;
}

.course-card-2026__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.course-card-2026:hover .course-card-2026__img {
    transform: scale(1.04);
}

.course-card-2026__content {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.course-card-2026__title {
    font-size: 15.5px;
    font-weight: 800;
    color: #0F2744;
    line-height: 1.3;
    margin: 0 0 8px 0;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-2026__title a {
    color: #0F2744;
    text-decoration: none;
    transition: color 0.15s ease;
}

.course-card-2026__title a:hover {
    color: #1C89C2;
}

.course-card-2026__tags-group {
    margin-bottom: 4px;
}

.course-card-2026__pill-tag {
    display: inline-block;
    background: #E8F3F9;
    color: #1C89C2;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 5px;
    width: fit-content;
}

.course-card-2026__subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
    margin: 6px 0 5px 0;
    line-height: 1.3;
}

.course-card-2026__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0px 0 4px 0;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.course-card-2026__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.course-card-2026__meta-icon {
    width: 14px;
    height: 14px;
    color: #1E293B;
    flex-shrink: 0;
}

.course-card-2026__instructor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px 0;
    padding-top: 12px;
    border-top: 1px solid #F1F5F9;
}

.course-card-2026__instructor {
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-card-2026__instructor-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
}

.course-card-2026__instructor-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #0F2744;
}

.course-card-2026__progress-circle {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.course-card-2026__circular-chart {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.course-card-2026__circle-bg {
    fill: none;
    stroke: #E2E8F0;
    stroke-width: 3.5;
}

.course-card-2026__circle {
    fill: none;
    stroke: #092648;
    stroke-width: 3.5;
    stroke-linecap: round;
}

.course-card-2026__progress-text {
    position: absolute;
    font-size: 10px;
    font-weight: 800;
    color: #0F2744;
}

.course-card-2026__btn {
    background: #092648;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    border-radius: 30px;
    padding: 10px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s ease, transform 0.2s ease;
    margin-top: auto;
}

.course-card-2026__btn:hover {
    background: #1C89C2;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.course-card-2026__btn-icon {
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.course-card-2026__btn:hover .course-card-2026__btn-icon {
    transform: translateX(3px);
}

/* ==============================================================
   TARJETA DE GUÍA/TUTORIAL, 100% ANCHO, UNA POR FILA (.guia-card-2026)
   Mismo lenguaje visual que .course-card-2026 (colores, radios, sombra)
   pero horizontal — pedido explícito del owner.
   ============================================================== */
.guia-card-2026 {
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 18px rgba(15, 39, 69, 0.05);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 120px;
    max-height: 120px;
    margin-bottom: 20px;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.guia-card-2026:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 39, 69, 0.12);
}

.guia-card-2026__thumb {
    flex: 0 0 140px;
    overflow: hidden;
    position: relative;
    background: #F1F5F9;
}

.guia-card-2026__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.guia-card-2026:hover .guia-card-2026__img {
    transform: scale(1.04);
}

.guia-card-2026__content {
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex: 1;
    text-align: left;
    min-width: 0;
}

.guia-card-2026__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}

.guia-card-2026__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0F2744;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guia-card-2026__title a {
    color: #0F2744;
    text-decoration: none;
    transition: color 0.15s ease;
}

.guia-card-2026__title a:hover {
    color: #1C89C2;
}

.guia-card-2026__excerpt {
    font-size: 1rem;
    color: #475569;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.guia-card-2026__btn {
    background: #092648;
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 30px;
    padding: 5px 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    flex-shrink: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.guia-card-2026__btn:hover {
    background: #1C89C2;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.guia-card-2026__btn-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.guia-card-2026__btn:hover .guia-card-2026__btn-icon {
    transform: translateX(3px);
}

@media (max-width: 767px) {
    .guia-card-2026__thumb {
        flex: 0 0 90px;
    }

    .guia-card-2026__content {
        padding: 8px 14px;
    }
}

/* ==============================================================
   LÍNEA DE TIEMPO DE "ÚLTIMOS AVISOS INFORMATIVOS" (.aviso-timeline-2026)
   Sin tarjetas — un marcador por registro conectado por una línea vertical,
   del más nuevo (arriba) al más antiguo (abajo). Pedido explícito del owner.
   ============================================================== */
.aviso-timeline-2026 {
    position: relative;
}

.aviso-timeline-2026__item {
    position: relative;
    padding-left: 34px;
    padding-bottom: 32px;
}

.aviso-timeline-2026__item:last-child {
    padding-bottom: 0;
}

.aviso-timeline-2026__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 18px;
    bottom: -14px;
    width: 2px;
    background: #E2E8F0;
}

.aviso-timeline-2026__marker {
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1C89C2;
    border: 3px solid #E8F3F9;
    box-sizing: border-box;
}

.aviso-timeline-2026__date {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1C89C2;
    margin-bottom: 6px;
}

.aviso-timeline-2026__title {
    font-size: 17px;
    font-weight: 800;
    color: #0F2744;
    line-height: 1.3;
    margin: 0 0 6px 0;
}

.aviso-timeline-2026__desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

.aviso-timeline-2026__desc p:last-child {
    margin-bottom: 0;
}

/* ==============================================================
   HERO DE CONVOCATORIA (convocatoria.php) — reusa .cnsc-hero-2026/
   .cnsc-hero-btn (sección 100% ancho, imagen de fondo enmascarada,
   contenido en columna legible) para la cabecera; estos son los
   componentes propios de la ficha (datos clave + tarjetas de detalle),
   pedido explícito del owner.
   ============================================================== */
.convocatoria-hero-2026__facts {
    margin: 0 0 26px;
    font-size: 14.5px;
    color: #1E293B;
    line-height: 1.9;
}

.convocatoria-hero-2026__facts strong {
    color: #0E2744;
}

.convocatoria-detalle-2026 {
    margin-top: 8px;
    max-width: 720px;
    background: #F4EEDF;
    border: 1px solid #E6DAC4;
    border-radius: 10px;
    padding: 22px 26px;
    box-shadow: 0 4px 18px rgba(15, 39, 69, 0.06);
    box-sizing: border-box;
}

.convocatoria-detalle-2026__card-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0E2744;
    margin: 0 0 22px;
}

/* Gráfica de pasos atada a convocatorias.estado_convocatoria (Divulgación /
   Inscripción / Verificación de requisitos mínimos / Pruebas) — pasos +
   conectores intercalados como flex items, sin posicionamiento absoluto:
   cada .step tiene ancho fijo (punto + etiqueta centrados), cada .connector
   se reparte el espacio restante entre dos puntos consecutivos. */
.convocatoria-estado-steps__track {
    display: flex;
    align-items: flex-start;
}

.convocatoria-estado-steps__step {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    text-align: center;
}

.convocatoria-estado-steps__connector {
    flex: 1 1 auto;
    height: 2px;
    min-width: 16px;
    margin-top: 13px;
    background: #E2D9C5;
}

.convocatoria-estado-steps__connector.is-filled {
    background: #D97706;
}

.convocatoria-estado-steps__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F4EEDF;
    border: 2px solid #CBBFA0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94836A;
    font-size: 12px;
    font-weight: 800;
    box-sizing: border-box;
    flex-shrink: 0;
}

.convocatoria-estado-steps__dot svg {
    width: 14px;
    height: 14px;
}

.convocatoria-estado-steps__step.is-done .convocatoria-estado-steps__dot {
    background: #D97706;
    border-color: #D97706;
    color: #FFFFFF;
}

.convocatoria-estado-steps__step.is-active .convocatoria-estado-steps__dot {
    background: #FFFFFF;
    border-color: #D97706;
    color: #D97706;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15);
}

.convocatoria-estado-steps__label {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #94836A;
    line-height: 1.3;
}

.convocatoria-estado-steps__step.is-done .convocatoria-estado-steps__label,
.convocatoria-estado-steps__step.is-active .convocatoria-estado-steps__label {
    color: #0E2744;
}

.convocatoria-estado-steps__empty {
    margin: 0;
    font-size: 12.5px;
    color: #94A3B8;
}

@media (max-width: 767px) {
    .convocatoria-detalle-2026 {
        max-width: 100%;
        padding: 18px 16px;
    }

    .convocatoria-estado-steps__step {
        width: 72px;
    }

    .convocatoria-estado-steps__label {
        font-size: 9.5px;
    }
}

/* ==============================================================
   SECCIÓN "¿QUÉ ES LA CONVOCATORIA X?" (convocatoria.php, debajo del
   hero) — pedido explícito del owner con imagen de referencia: sección
   100% ancho con la foto de la convocatoria como fondo (alineada desde
   la esquina superior derecha), una tarjeta blanca flotando encima con
   el ancho legible de siempre (misma .container que el resto del sitio)
   — a diferencia de .cnsc-hero-2026__bg (60% ancho, degradado a blanco),
   acá la tarjeta cubre casi todo el ancho, así que la foto solo necesita
   cubrir la sección completa: el padding de la sección es lo que deja
   verla como marco alrededor de la tarjeta, sin degradado adicional.
   ============================================================== */
.convocatoria-resumen-2026 {
    position: relative;
    width: 100%;
    padding: 40px 0;
    overflow: hidden;
    background-color: #F1F5F9;
}

.convocatoria-resumen-2026 .container {
    position: relative;
    z-index: 1;
    max-width: 1140px;
}

.convocatoria-resumen-2026__card {
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 16px 45px rgba(15, 39, 69, 0.14);
    padding: 34px 40px 28px;
    position: relative;
    box-sizing: border-box;
}

.convocatoria-resumen-2026__star {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 2px rgba(229, 168, 36, 0.3));
}

.convocatoria-resumen-2026__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 26px;
}

.convocatoria-resumen-2026__head-left {
    flex: 1 1 100%;
    max-width: 95%;
}

.convocatoria-resumen-2026__title {
    font-size: 23px;
    font-weight: 800;
    color: #0B2545;
    margin: 0 0 10px;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

.convocatoria-resumen-2026__desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: #334155;
    margin: 0;
}

.convocatoria-resumen-2026__middle {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr 1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 26px;
}

.convocatoria-resumen-2026__card-item {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 16px rgba(15, 39, 69, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.convocatoria-resumen-2026__card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 39, 69, 0.1);
}

.convocatoria-resumen-2026__card-head {
    padding: 10px 8px;
    text-align: center;
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
}

.convocatoria-resumen-2026__card-head--gold {
    background: linear-gradient(180deg, #D4AF67 0%, #BA9042 100%);
}

.convocatoria-resumen-2026__card-head--blue {
    background: linear-gradient(180deg, #3296C8 0%, #1C89C2 100%);
}

.convocatoria-resumen-2026__card-body {
    flex: 1;
    padding: 14px 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.convocatoria-resumen-2026__card-number {
    font-size: 64px;
    font-weight: 800;
    color: #BA9042;
    line-height: 1;
    margin-top: 4px;
    letter-spacing: -0.02em;
}

.convocatoria-resumen-2026__card-number--blue {
    color: #0E2744;
}

.convocatoria-resumen-2026__card-text {
    font-size: 11.5px;
    line-height: 1.4;
    color: #334155;
    margin: 0;
}

.convocatoria-resumen-2026__niveles-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1 1 auto;
    margin: 2px 0 6px;
    gap: 3px;
    overflow: hidden;
    box-sizing: border-box;
}

.convocatoria-resumen-2026__nivel-item {
    display: block;
    width: 100%;
    font-weight: 700;
    color: #0E2744;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 13.5px;
}

/* Auto sizing based on count so content never exceeds the card container */
.convocatoria-resumen-2026__niveles-list--count-1 .convocatoria-resumen-2026__nivel-item {
    font-size: 18px;
    line-height: 1.3;
}

.convocatoria-resumen-2026__niveles-list--count-2 .convocatoria-resumen-2026__nivel-item {
    font-size: 16px;
    line-height: 1.3;
}

.convocatoria-resumen-2026__niveles-list--count-2 {
    gap: 6px;
}

.convocatoria-resumen-2026__niveles-list--count-3 .convocatoria-resumen-2026__nivel-item {
    font-size: 14.5px;
    line-height: 1.28;
}

.convocatoria-resumen-2026__niveles-list--count-3 {
    gap: 4px;
}

.convocatoria-resumen-2026__niveles-list--count-4 .convocatoria-resumen-2026__nivel-item {
    font-size: 13px;
    line-height: 1.25;
}

.convocatoria-resumen-2026__niveles-list--count-4 {
    gap: 3px;
}

.convocatoria-resumen-2026__niveles-list--count-5 .convocatoria-resumen-2026__nivel-item {
    font-size: 12px;
    line-height: 1.2;
}

.convocatoria-resumen-2026__niveles-list--count-5 {
    gap: 2px;
}

.convocatoria-resumen-2026__niveles-list--count-6 .convocatoria-resumen-2026__nivel-item {
    font-size: 11px;
    line-height: 1.15;
}

.convocatoria-resumen-2026__niveles-list--count-6 {
    gap: 1px;
}

.convocatoria-resumen-2026__card-icon {
    width: 48px;
    height: 48px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.convocatoria-resumen-2026__card-icon svg {
    width: 100%;
    height: 100%;
}

.convocatoria-resumen-2026__map-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    position: relative;
}

.convocatoria-resumen-2026__map-image {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(11, 37, 69, 0.12));
}

.convocatoria-resumen-2026__footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.convocatoria-resumen-2026__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, #3296C8 0%, #1C89C2 100%);
    color: #FFFFFF !important;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 11px 26px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(28, 137, 194, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.convocatoria-resumen-2026__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(28, 137, 194, 0.45);
    color: #FFFFFF !important;
}

.convocatoria-resumen-2026__cta-star {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .convocatoria-resumen-2026__middle {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .convocatoria-resumen-2026__card-number {
        font-size: 52px;
    }

    .convocatoria-resumen-2026__map-item {
        grid-column: 1 / -1;
        order: -1;
        max-height: 180px;
    }
}

@media (max-width: 767px) {
    .convocatoria-resumen-2026 {
        padding: 30px 0;
    }

    .convocatoria-resumen-2026__card {
        padding: 24px 18px 20px;
    }

    .convocatoria-resumen-2026__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .convocatoria-resumen-2026__title {
        font-size: 20px;
    }

    .convocatoria-resumen-2026__middle {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .convocatoria-resumen-2026__card-item {
        max-width: 380px;
        margin: 0 auto;
        width: 100%;
    }

    .convocatoria-resumen-2026__card-number {
        font-size: 48px;
    }

    .convocatoria-resumen-2026__cta {
        width: 100%;
        max-width: 340px;
        box-sizing: border-box;
    }
}

/* ==============================================================
   TERCERA SECCIÓN: MAPA DE COLOMBIA CON UBICACIONES DE LA
   CONVOCATORIA (convocatoria.php) — pedido explícito del owner con
   imagen de referencia: mapa a la izquierda con un punto por cada
   ciudad real (convocatoria_opecs.ciudad, ver $vCiudadesConPin en
   convocatoria.php), leyenda numerada + contacto a la derecha,
   fecha de última actualización abajo. Mismo lenguaje visual que
   .convocatoria-resumen-2026 (tarjeta blanca, navy/dorado), no el
   de la imagen de referencia (esa es de un mockup genérico ajeno).
   ============================================================== */
.convocatoria-mapa-2026 {
    width: 100%;
    padding: 10px 0 50px;
    background: #FFFFFF;
}

.convocatoria-mapa-2026__card {
    display: flex;
    gap: 34px;
    background: #FFF;
    padding: 30px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.convocatoria-mapa-2026__map-col {
    flex: 1.3 1 380px;
    min-width: 300px;
}

.convocatoria-mapa-2026__map-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    transform: translate(5px, 10px);
    aspect-ratio: 1063 / 1432;
}

.convocatoria-mapa-2026__map-wrap .hero-home-2026__slogan {
    position: absolute;
    top: 25px;
    left: -155px;
    right: auto;
    z-index: 4;
    pointer-events: none;
    max-width: 155px;
}

.convocatoria-mapa-2026__map-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 1;
}

.convocatoria-mapa-2026__overlay-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: auto;
    overflow: visible;
    transform: translate(5px, 7px);
}

.convocatoria-mapa-2026__dept-path {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), fill-opacity 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1);
    fill-opacity: 0.5;
}

.convocatoria-mapa-2026__dept-path.is-active {
    filter: drop-shadow(0 2px 8px rgba(15, 39, 69, 0.2));
}

.convocatoria-mapa-2026__dept-path:hover,
.convocatoria-mapa-2026__dept-path.is-hovered {
    transform: scale(1.1) !important;
    fill-opacity: 1 !important;
    stroke: #000000 !important;
    stroke-width: 1px !important;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)) !important;
}

.convocatoria-mapa-2026__empty {
    margin: 0;
    font-size: 13px;
    color: #94A3B8;
}

.convocatoria-mapa-2026__tooltip {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -100%) scale(0.92);
    transform-origin: bottom center;
    background: #FFFFFF;
    color: #1E293B;
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 210px;
    max-width: 290px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18), 0 3px 8px rgba(15, 23, 42, 0.1);
    border: 1px solid #E5E7EB;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.18s ease;
    box-sizing: border-box;
}

.convocatoria-mapa-2026__tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -100%) scale(1);
}

.convocatoria-mapa-2026__tooltip.is-flipped {
    transform: translate(-50%, 0) scale(0.92);
    transform-origin: top center;
}

.convocatoria-mapa-2026__tooltip.is-flipped.is-visible {
    transform: translate(-50%, 0) scale(1);
}

.convocatoria-mapa-2026__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 7px 7px 0 7px;
    border-style: solid;
    border-color: #FFFFFF transparent transparent transparent;
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.12));
}

.convocatoria-mapa-2026__tooltip.is-flipped::after {
    top: auto;
    bottom: 100%;
    border-width: 0 7px 7px 7px;
    border-color: transparent transparent #FFFFFF transparent;
}

.convocatoria-mapa-2026__tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 8px;
}

.convocatoria-mapa-2026__tooltip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.convocatoria-mapa-2026__tooltip-title {
    font-size: 13px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: 0.02em;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.convocatoria-mapa-2026__tooltip-badge {
    font-size: 10.5px;
    font-weight: 700;
    background: #FEF3C7;
    color: #B45309;
    border: 1px solid #FDE68A;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Scroll vertical solo visible si el contenido no cabe en max-height (pedido
   explícito del owner) — gris claro y delgado, mismo patrón de scrollbar
   custom ya usado en .ruta-camino-2026__dialog-scroll (track transparente,
   thumb con radio, versión Firefox vía scrollbar-width/scrollbar-color). */
.convocatoria-mapa-2026__tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #D1D5DB transparent;
}

.convocatoria-mapa-2026__tooltip-body::-webkit-scrollbar {
    width: 5px;
}

.convocatoria-mapa-2026__tooltip-body::-webkit-scrollbar-track {
    background: transparent;
}

.convocatoria-mapa-2026__tooltip-body::-webkit-scrollbar-thumb {
    background-color: #D1D5DB;
    border-radius: 4px;
}

.convocatoria-mapa-2026__tooltip-city {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #1E293B;
    line-height: 1.3;
}

.convocatoria-mapa-2026__tooltip-city-name {
    font-weight: 600;
}

.convocatoria-mapa-2026__tooltip-city-vacantes {
    font-size: 11px;
    color: #64748B;
    white-space: nowrap;
}

.convocatoria-mapa-2026__pin {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    cursor: default;
    transition: transform 0.2s ease, z-index 0.2s ease;
}

.convocatoria-mapa-2026__pin:hover,
.convocatoria-mapa-2026__pin.is-hovered {
    transform: translate(-50%, -110%) scale(1.15);
    z-index: 10;
}

.convocatoria-mapa-2026__pin-dot {
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(15, 39, 69, 0.3);
    border: 2px solid #FFFFFF;
    position: relative;
}

.convocatoria-mapa-2026__pin-dot span {
    display: inline-block;
    transform: rotate(-45deg);
}

.convocatoria-mapa-2026__pin-label {
    display: none;
}

.convocatoria-mapa-2026__pin:hover .convocatoria-mapa-2026__pin-label,
.convocatoria-mapa-2026__pin.is-hovered .convocatoria-mapa-2026__pin-label {
    display: block;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translate(-50%, -100%);
    background: #0E2744;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.convocatoria-mapa-2026__legend-col {
    flex: 1 1 280px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
}

.convocatoria-mapa-2026__legend-kicker {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #D97706;
    margin-bottom: 4px;
}

.convocatoria-mapa-2026__legend-title {
    font-size: 15px;
    font-weight: 800;
    color: #0E2744;
    margin: 0 0 14px;
}

.convocatoria-mapa-2026__legend-list {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    max-height: 520px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
}

.convocatoria-mapa-2026__legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: #334155;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: -4px;
}

.convocatoria-mapa-2026__legend-item:hover,
.convocatoria-mapa-2026__legend-item.is-hovered {
    background-color: #EDE9FE;
    transform: none;
}

.convocatoria-mapa-2026__legend-item small {
    color: #94A3B8;
    font-size: 11px;
}

.convocatoria-mapa-2026__legend-dot {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
}

.convocatoria-mapa-2026__updated {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #94A3B8;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid #E2E8F0;
}

.convocatoria-mapa-2026__updated svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 767px) {
    .convocatoria-mapa-2026__card {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .convocatoria-mapa-2026__map-wrap .hero-home-2026__slogan {
        left: 0;
        max-width: 120px;
    }
}

/* ==============================================================
   PROMO CURSO VIRTUAL (convocatoria.php, debajo del mapa) —
   pedido explícito del owner con imagen de referencia (esa venía en
   azul, acá en verde claro a pedido) — sección 100% ancho, contenido
   con el ancho legible de siempre vía .container, silueta de Colombia
   de fondo (mismo asset que .convocatoria-resumen-2026, ver ese
   comentario para la fuente) y olas decorativas abajo (mismo criterio
   que la imagen: dos tonos superpuestos dan sensación de profundidad).
   ============================================================== */
.curso-promo-2026 {
    position: relative;
    width: 100%;
    padding: 60px 0 70px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(111, 207, 151, 0.5) 0%, rgba(62, 155, 108, 0.5) 60%, rgba(47, 143, 95, 0.5) 100%);
}

.curso-promo-2026__map-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/colombia-map.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
    opacity: 0.12;
    pointer-events: none;
}

.curso-promo-2026 .container {
    position: relative;
    z-index: 1;
}

.curso-promo-2026__content {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.curso-promo-2026__kicker {
    font-size: 13px;
    font-weight: 700;
    color: #E7FCEF;
    margin-bottom: 10px;
}

.curso-promo-2026__title {
    font-size: 28px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.3;
    margin: 0 0 22px;
    text-shadow: 0 2px 10px rgba(15, 39, 69, 0.15);
}

.curso-promo-2026__icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 26px;
}

.curso-promo-2026__icon {
    width: 46px;
    height: 46px;
    border-radius: 5px;
    background: #FFFFFF;
    box-shadow: 0 6px 16px rgba(15, 39, 69, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.curso-promo-2026__icon svg {
    width: 24px;
    height: 24px;
}

.curso-promo-2026__actions {
    position: relative;
    z-index: 1;
}

.curso-promo-2026__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    .curso-promo-2026 {
        padding: 44px 0 60px;
    }

    .curso-promo-2026__title {
        font-size: 22px;
    }

    .curso-promo-2026__icons {
        gap: 10px;
    }
}

/* ==============================================================
   REDESIGN HERO HOME 2026 (.hero-home-2026)
   ============================================================== */
.hero-home-2026 {
    position: relative;
    background: #FFFFFF;
    padding: 40px 0 0 0;
    overflow: hidden;
}

.hero-home-2026__content {
    padding-right: 15px;
    z-index: 5;
    position: relative;
}

.hero-home-2026__badge {
    display: inline-flex;
    align-items: center;
    background: #0D9488;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-home-2026__title {
    font-size: 48px;
    font-weight: 800;
    color: #0F2744;
    line-height: 1.15;
    margin: 0 0 16px 0;
    letter-spacing: -0.6px;
}

.hero-home-2026__subtitle {
    font-size: 17px;
    font-weight: 500;
    color: #334155;
    line-height: 1.5;
    margin: 0 0 32px 0;
    max-width: 480px;
}

.hero-home-2026__features {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 34px;
}

.hero-home-2026__feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.hero-home-2026__feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.hero-home-2026__feature-item:hover .hero-home-2026__feature-icon {
    transform: scale(1.08);
}

.hero-home-2026__feature-icon--green {
    background: #D1FAE5;
    color: #059669;
}

.hero-home-2026__feature-icon--purple {
    background: #EDE9FE;
    color: #7C3AED;
}

.hero-home-2026__feature-icon--orange {
    background: #FEF3C7;
    color: #D97706;
}

.hero-home-2026__feature-icon svg {
    width: 20px;
    height: 20px;
}

.hero-home-2026__feature-label {
    font-size: 10px;
    font-weight: 800;
    color: #1E293B;
    line-height: 1.25;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.hero-home-2026__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #0F2744;
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 14px 26px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 18px rgba(15, 39, 69, 0.16);
}

.hero-home-2026__btn:hover {
    background: #1C89C2;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(28, 137, 194, 0.25);
}

.hero-home-2026__btn-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.hero-home-2026__btn:hover .hero-home-2026__btn-arrow {
    transform: translateX(4px);
}

/* Columna visual derecha */
.hero-home-2026__visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 720px;
    padding-bottom: 0;
}

.hero-home-2026__slogan {
    position: absolute;
    top: 15px;
    right: 0px;
    z-index: 10;
    pointer-events: none;
    max-width: 220px;
}

.hero-home-2026__slogan-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Frase como texto (configurable en el constructor: tipo de letra, tamaño, color y desplazamiento en línea). */
.hero-home-2026__slogan--texto {
    max-width: 62%;
}

.hero-home-2026__slogan-texto {
    margin: 0;
    line-height: 1.05;
    text-align: right;
    transform: rotate(-4deg);
    overflow-wrap: break-word;
}

.hero-home-2026__blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-46%, -46%);
    width: 720px;
    height: 650px;
    background: #FEE8BE;
    border-radius: 56% 44% 48% 52% / 60% 54% 46% 40%;
    opacity: 0.95;
    z-index: 1;
    pointer-events: none;
}

.hero-home-2026__photo-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 660px;
    display: flex;
    justify-content: center;
}

.hero-home-2026__photo {
    width: 100%;
    height: auto;
    max-height: 740px;
    object-fit: contain;
    display: block;
}

/* Responsive */
@media (max-width: 991px) {
    .hero-home-2026 {
        padding: 40px 0 10px 0;
    }

    .hero-home-2026__title {
        font-size: 34px;
    }

    .hero-home-2026__visual {
        min-height: 440px;
        margin-top: 30px;
    }

    .hero-home-2026__blob {
        width: 380px;
        height: 360px;
    }

    .hero-home-2026__slogan {
        font-size: 22px;
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 576px) {
    .hero-home-2026__title {
        font-size: 28px;
    }

    .hero-home-2026__features {
        gap: 16px;
    }

    .hero-home-2026__btn {
        width: 100%;
        font-size: 12px;
        padding: 12px 16px;
    }

    .hero-home-2026__blob {
        width: 300px;
        height: 290px;
    }
}

/* Color de fondo figura decorativa Nosotros (about-three) */
.about-three__thumb__shape-one {
    border-color: #F8F0E4 !important;
    animation: border-background-custom 2s ease infinite !important;
}

@keyframes border-background-custom {

    0%,
    100% {
        border-color: #F8F0E4;
        transform: translateX(0px) translateY(0px);
    }

    50% {
        border-color: #F8F0E4;
        transform: translateX(10px) translateY(10px);
    }
}

.about-three__thumb__shape-two {
    background-color: #EAF3E1 !important;
    animation: bg2-background-custom 3s ease infinite !important;
}

@keyframes bg2-background-custom {

    0%,
    100% {
        background-color: #EAF3E1;
        transform: translateY(0);
    }

    50% {
        background-color: #EAF3E1;
        transform: translateY(-20px);
    }
}

/* ==============================================================
   FRANJA DE CIFRAS / TRUST STRIP HERO (120px)
   ============================================================== */
.home-stats-strip-2026 {
    background: #FFFFFF;
    border-top: 1px solid #EBF0F5;
    border-bottom: 1px solid #EBF0F5;
    min-height: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(15, 39, 69, .02);
    box-sizing: border-box;
}

.home-stats-strip-2026__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
}

.home-stats-strip-2026__item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.home-stats-strip-2026__icon-wrap {
    color: #0F2744;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-stats-strip-2026__icon {
    width: 36px;
    height: 36px;
    display: block;
}

.home-stats-strip-2026__texts {
    display: flex;
    flex-direction: column;
}

.home-stats-strip-2026__number {
    font-size: 16.5px;
    font-weight: 800;
    color: #0F2744;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.home-stats-strip-2026__label {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    line-height: 1.3;
    margin-top: 3px;
    white-space: nowrap;
}

@media (max-width: 1250px) {
    .home-stats-strip-2026 {
        height: auto;
        min-height: 120px;
    }

    .home-stats-strip-2026__container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px 28px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .home-stats-strip-2026 {
        height: auto;
        min-height: auto;
    }

    .home-stats-strip-2026__container {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 15px;
        gap: 16px;
    }

    .home-stats-strip-2026__label {
        white-space: normal;
    }
}
/* ============================================================================
 * Unificación de azules (2026-10-07): todo azul del sitio debe ser uno de los tonos
 * del fondo de marca — base #1C89C2, alterno #1A8DC4, claro #3296C8 — o un tinte de
 * ese mismo azul con blanco (#9ECFE6 del logo, #C6E2F0, #DDEDF6, #E8F3F9, #EDF5FA).
 * El template traía un índigo (#4F5DE4) como --eduact-base (color de <a> y bordes),
 * un lavanda (#B3ADE1) para textos del footer y un morado oscuro (#1F1944) de fondo
 * en footer/copyright; Bootstrap aporta su propio azul (#0d6efd) en focos de inputs.
 * Se redefinen acá sin tocar el CSS vendorizado.
 * ========================================================================== */
:root {
    --eduact-base: #1C89C2;
    --eduact-base-rgb: 28, 137, 194;
    --eduact-text2: #F2F8FC;
    --eduact-soft3: #E8F3F9;
    --eduact-soft: #EDF5FA;
}

/* Footer y copyright sobre el azul de marca (antes morado oscuro #1F1944). Los hovers
   del template usan --eduact-secondary (el mismo azul), que sobre este fondo sería
   invisible: pasan a blanco con subrayado. */
.main-footer-two,
.copyright {
    background-color: #1C89C2;
}

.copyright {
    background-color: #1A8DC4;
}

.main-footer-two__navmenu ul li a:hover,
.main-footer-two__info-list li a:hover,
.copyright__text a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.main-footer-two__info-list li span {
    color: #FFFFFF;
}

.main-footer-two__social a {
    border-color: rgba(255, 255, 255, 0.55);
}

.main-footer-two__social a:hover {
    background-color: #FFFFFF;
    color: #1C89C2;
}

/* Bootstrap 5.0: anillos de foco y checks en su azul #0d6efd → azul de marca. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #9ECFE6;
    box-shadow: 0 0 0 .25rem rgba(28, 137, 194, 0.25);
}

.form-check-input:checked {
    background-color: #1C89C2;
    border-color: #1C89C2;
}

.form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239ECFE6'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
    background-color: #1C89C2;
}

/* Preloader: logo blanco nuevo (ver head.php) un 50% más grande que los 100px del template. */
.preloader__image {
    background-size: 150px auto;
}

/* Cabecera de "Cursos virtuales destacados": título a la izquierda y buscador de OPEC a la
   derecha (envía a cursos.php?q=…, que ya filtra por código OPEC). En móvil se apilan. */
.course-three__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 25px;
    text-align: left;
}

.course-three__header .home-team-2026__title {
    margin-bottom: 0;
}

.home-opec-search {
    flex: 0 0 auto;
    width: 400px;
    max-width: 100%;
}

.home-opec-search__label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #142A43;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.home-opec-search__row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.home-opec-search__input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 0 14px;
    height: 46px;
    box-shadow: 0 2px 8px rgba(20, 42, 67, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-opec-search__input-wrap:focus-within {
    border-color: #1C89C2;
    box-shadow: 0 0 0 3px rgba(28, 137, 194, 0.18);
}

.home-opec-search__input-wrap svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #142A43;
}

.home-opec-search__input-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 0;
    height: 100%;
    font-size: 14px;
    font-family: inherit;
    color: #142A43;
}

.home-opec-search__input-wrap input::placeholder {
    color: #94A3B8;
}

.home-opec-search__btn {
    flex: 0 0 auto;
    border: none;
    border-radius: 10px;
    padding: 0 26px;
    height: 46px;
    background: #1C89C2;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.home-opec-search__btn:hover {
    background: #3296C8;
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .course-three__header {
        flex-direction: column;
        align-items: stretch;
    }

    .home-opec-search {
        width: 100%;
    }
}

/* ============================================================================
 * RUTA DE ACOMPAÑAMIENTO v2 (.ruta-v2) — portada. Réplica del mock "Mucho más que una
 * prueba": cabecera con tarjeta "Todo incluido", camino ondulado con los pasos alternando
 * altura, frases manuscritas (fuente Caveat, ya cargada en head.php) y franja de 4 pilares.
 * cnsc.php y fiscalia.php conservan la versión anterior (.ruta-camino-2026, más arriba).
 * ========================================================================== */
.ruta-v2 {
    position: relative;
    overflow: hidden;
    padding: 70px 0 60px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 100%);
}

.ruta-v2__bg-mountains {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46%;
    height: 72%;
    pointer-events: none;
}

.ruta-v2__bg-road {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 48%;
    pointer-events: none;
    opacity: 0.9;
}

.ruta-v2__wide {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Cabecera --- */
.ruta-v2__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px 190px;
    align-items: start;
    gap: 32px;
    margin-bottom: 36px;
}

.ruta-v2__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #142A43;
    margin-bottom: 10px;
}

.ruta-v2__title {
    font-size: 54px;
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -1.5px;
    color: #142A43;
    margin: 0 0 16px;
}

.ruta-v2__subtitle {
    font-size: 17px;
    line-height: 1.5;
    color: #475569;
    max-width: 580px;
    margin: 0;
}

.ruta-v2__included {
    background: #EEF6FB;
    border-radius: 18px;
    padding: 24px 26px;
    box-shadow: 0 10px 30px rgba(20, 42, 67, 0.06);
}

.ruta-v2__included-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.ruta-v2__included-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1C89C2;
}

.ruta-v2__included-icon svg {
    width: 34px;
    height: 34px;
}

.ruta-v2__included-title {
    font-size: 19px;
    line-height: 1.15;
    font-weight: 800;
    color: #142A43;
    margin: 0;
}

.ruta-v2__included-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    margin: 0;
}

.ruta-v2__handwritten {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    color: #142A43;
    line-height: 1;
    position: relative;
}

.ruta-v2__handwritten--right {
    font-size: 30px;
    text-align: center;
    transform: rotate(-8deg);
    margin-top: 48px;
}

.ruta-v2__handwritten--right::after,
.ruta-v2__handwritten--left::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    border-radius: 2px;
    background: #FFD700;
    margin: 8px auto 0;
    transform: rotate(-4deg);
}

/* --- Camino con pasos --- */
.ruta-v2__track {
    position: relative;
    padding-top: 10px;
    margin-bottom: 44px;
}

.ruta-v2__wave {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    width: 100%;
    height: 220px;
    pointer-events: none;
}

.ruta-v2__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--ruta-steps, 8), minmax(0, 1fr));
    gap: 0 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ruta-v2__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

.ruta-v2__step--low {
    padding-top: 70px;
}

.ruta-v2__step-num {
    display: block;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
    font-weight: 800;
    color: var(--step-color);
    margin-bottom: 6px;
}

.ruta-v2__step-node {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--step-bg);
    color: var(--step-color);
    box-shadow: 0 0 0 6px #FFFFFF, 0 10px 24px rgba(20, 42, 67, 0.10);
}

.ruta-v2__step-node svg {
    width: 26px;
    height: 26px;
}

.ruta-v2__step-line {
    display: block;
    width: 2px;
    height: 26px;
    background: var(--step-color);
    margin: 6px 0 0;
}

.ruta-v2__step-card {
    width: 100%;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 14px 14px 16px;
    box-shadow: 0 10px 28px rgba(20, 42, 67, 0.08);
}

.ruta-v2__step-title {
    font-size: 13.5px;
    line-height: 1.2;
    font-weight: 800;
    color: #142A43;
    margin: 0 0 8px;
}

.ruta-v2__step-desc {
    font-size: 12px;
    line-height: 1.45;
    color: #475569;
    margin: 0;
}

.ruta-v2__handwritten--left {
    position: absolute;
    left: 70px;
    bottom: 34px; /* hueco a la izquierda de la franja de pilares (margin-left: 240px) */
    font-size: 30px;
    transform: rotate(-10deg);
    color: #142A43;
}

/* --- Franja de pilares --- */
.ruta-v2__pillars {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: rgba(238, 246, 251, 0.85);
    border-radius: 22px;
    padding: 22px 16px;
    margin-left: 240px;
    backdrop-filter: blur(2px);
}

.ruta-v2__pillar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 18px;
}

.ruta-v2__pillar + .ruta-v2__pillar {
    border-left: 1px solid rgba(20, 42, 67, 0.08);
}

.ruta-v2__pillar-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #1C89C2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(20, 42, 67, 0.08);
}

.ruta-v2__pillar-icon svg {
    width: 24px;
    height: 24px;
}

.ruta-v2__pillar-title {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    color: #142A43;
    margin: 0 0 6px;
}

.ruta-v2__pillar-desc {
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 1399px) {
    .ruta-v2__title { font-size: 46px; }
    .ruta-v2__header { grid-template-columns: minmax(0, 1fr) 290px 160px; }
    .ruta-v2__pillars { margin-left: 0; }
    .ruta-v2__handwritten--left { display: none; }
}

@media (max-width: 1199px) {
    .ruta-v2__wave { display: none; }
    .ruta-v2__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
    .ruta-v2__step--low { padding-top: 0; }
    .ruta-v2__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
    .ruta-v2__pillar:nth-child(3) { border-left: none; }
}

@media (max-width: 991px) {
    .ruta-v2__header { grid-template-columns: minmax(0, 1fr); }
    .ruta-v2__handwritten--right { display: none; }
    .ruta-v2__included { max-width: 420px; }
    .ruta-v2__bg-mountains { opacity: 0.6; }
}

@media (max-width: 767px) {
    .ruta-v2 { padding: 50px 0 40px; }
    .ruta-v2__wide { padding: 0 16px; }
    .ruta-v2__title { font-size: 36px; }
    .ruta-v2__subtitle { font-size: 15px; }
    .ruta-v2__steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ruta-v2__step { flex-direction: row; align-items: flex-start; gap: 12px; }
    .ruta-v2__step-num { display: none; }
    .ruta-v2__step-node { width: 52px; height: 52px; flex: 0 0 52px; box-shadow: none; }
    .ruta-v2__step-line { display: none; }
    .ruta-v2__pillars { grid-template-columns: minmax(0, 1fr); padding: 14px 6px; }
    .ruta-v2__pillar + .ruta-v2__pillar { border-left: none; border-top: 1px solid rgba(20, 42, 67, 0.08); padding-top: 16px; }
    .ruta-v2__bg-road { display: none; }
}

/* Cursos destacados (portada): nombre del curso a 1.2rem y botón secundario con contorno. */
.course-three .course-card-2026__title {
    font-size: 1.2rem;
}

.course-card-2026__btn--outline {
    background: #FFFFFF;
    color: #1C89C2;
    border: 2px solid #1C89C2;
    margin-top: 8px;
}

.course-card-2026__btn--outline:hover {
    background: #1C89C2;
    color: #FFFFFF;
}

/* Ruta v2: la tarjeta de cada paso se expande a 500x300 al pasar el cursor (o con foco de
   teclado), animada, por encima del resto, y muestra la descripción completa del paso.
   El wrap conserva el alto original (--card-h, medido en js/home-2026.js) para que la
   expansión no desplace el camino ni la franja de pilares. Solo en escritorio ancho. */
.ruta-v2 {
    z-index: 5; /* por encima de la sección siguiente, para que la tarjeta expandida no quede tapada */
}

.ruta-v2__step-cardwrap {
    position: relative;
    width: 100%;
    height: var(--card-h, auto);
}

.ruta-v2__step-card {
    position: relative;
    height: var(--card-h, auto);
    overflow: hidden;
    outline: none;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                padding 0.3s ease, box-shadow 0.3s ease;
}

.ruta-v2__step-full {
    display: none;
    font-size: 13px;
    line-height: 1.55;
    color: #475569;
    opacity: 0;
    transition: opacity 0.25s ease 0.2s;
}

.ruta-v2__step-full h3,
.ruta-v2__step-full h4 {
    display: none; /* el título ya va arriba */
}

.ruta-v2__step-full p {
    margin: 0 0 8px;
}

.ruta-v2__step-full p:last-child {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .ruta-v2__step.is-open .ruta-v2__step-card,
    .ruta-v2__step-cardwrap:hover .ruta-v2__step-card,
    .ruta-v2__step-cardwrap:focus-within .ruta-v2__step-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 500px;
        height: 300px;
        z-index: 30;
        overflow: auto;
        padding: 20px 24px;
        box-shadow: 0 26px 60px rgba(20, 42, 67, 0.22);
        scrollbar-width: thin;
    }

    /* Pasos cercanos al borde derecho: la tarjeta se abre hacia la izquierda. */
    .ruta-v2__step.is-open .ruta-v2__step-cardwrap--flip .ruta-v2__step-card,
    .ruta-v2__step-cardwrap--flip:hover .ruta-v2__step-card,
    .ruta-v2__step-cardwrap--flip:focus-within .ruta-v2__step-card {
        left: auto;
        right: 0;
    }

    .ruta-v2__step.is-open .ruta-v2__step-title,
    .ruta-v2__step-cardwrap:hover .ruta-v2__step-title,
    .ruta-v2__step-cardwrap:focus-within .ruta-v2__step-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .ruta-v2__step.is-open .ruta-v2__step-desc,
    .ruta-v2__step-cardwrap:hover .ruta-v2__step-desc,
    .ruta-v2__step-cardwrap:focus-within .ruta-v2__step-desc {
        display: none;
    }

    .ruta-v2__step.is-open .ruta-v2__step-full,
    .ruta-v2__step-cardwrap:hover .ruta-v2__step-full,
    .ruta-v2__step-cardwrap:focus-within .ruta-v2__step-full {
        display: block;
        opacity: 1;
    }
}

/* La tarjeta expandida debe verse por encima de todo lo demás de la sección: el camino
   (track) sube sobre la franja de pilares y la frase manuscrita (que, al llevar transform
   o animación wow, crean su propio contexto de apilamiento y se pintaban encima). */
.ruta-v2__track {
    z-index: 20;
}

.ruta-v2__step.is-open,
.ruta-v2__step:has(.ruta-v2__step-cardwrap:hover),
.ruta-v2__step:has(.ruta-v2__step-cardwrap:focus-within) {
    position: relative;
    z-index: 40;
}

@media (min-width: 1200px) {
    .ruta-v2__step.is-open .ruta-v2__step-card,
    .ruta-v2__step-cardwrap:hover .ruta-v2__step-card,
    .ruta-v2__step-cardwrap:focus-within .ruta-v2__step-card {
        z-index: 100;
    }
}

/* El círculo del icono también abre la tarjeta de su paso (clase .is-open, ver home-2026.js). */
.ruta-v2__step-node {
    cursor: pointer;
    transition: transform 0.25s ease;
}

.ruta-v2__step.is-open .ruta-v2__step-node {
    transform: scale(1.08);
}

/* Catálogo /cursos.php: las tarjetas usan el mismo diseño que "Cursos virtuales destacados"
   de la portada (.course-card-2026). Ajustes mínimos para la grilla del catálogo. */
.cursos-catalog__grid .course-card-2026 {
    height: 100%;
}

.cursos-catalog__grid .course-card-2026__title {
    font-size: 1.2rem;
}

.cursos-catalog__grid .course-card-2026__thumb {
    display: block;
}

.course-card-2026__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1C89C2, #3296C8);
    color: rgba(255, 255, 255, 0.85);
    font-size: 46px;
}

/* Tarjetas de curso (portada y catálogo): nota "Incluye certificados" bajo la insignia. */
.course-card-2026__note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    margin: 2px 0 12px;
}

.course-card-2026__note svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #1C89C2;
}

/* Carrusel de "Cursos virtuales destacados" (portada): 4 visibles por vez, flechas que
   aparecen al pasar el cursor por la sección, desplazamiento circular (ver js/home-2026.js). */
.course-carousel {
    position: relative;
    --per-view: 4;
}

.course-carousel__viewport {
    overflow: hidden;
    margin: 0 -12px;
}

.course-carousel__track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.course-carousel__track.is-jumping {
    transition: none;
}

.course-carousel__slide {
    flex: 0 0 calc(100% / var(--per-view));
    max-width: calc(100% / var(--per-view));
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
}

.course-carousel__slide .course-card-2026 {
    width: 100%;
}

/* Sin carrusel (4 cursos o menos, "Cursos docente"): las tarjetas se acomodan en filas y quedan centradas; no hay desplazamiento. */
.course-carousel--estatico .course-carousel__track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
    transform: none;
    transition: none;
}

.course-carousel__arrow {
    position: absolute;
    top: 42%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #1C89C2;
    background: #FFFFFF;
    color: #1C89C2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 8px 22px rgba(20, 42, 67, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease, visibility 0s linear 0.25s;
}

.course-carousel__arrow svg {
    width: 22px;
    height: 22px;
}

.course-carousel__arrow--prev { left: -22px; }
.course-carousel__arrow--next { right: -22px; }

.course-three:hover .course-carousel__arrow,
.course-carousel:focus-within .course-carousel__arrow {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease, visibility 0s;
}

.course-carousel__arrow:hover {
    background: #1C89C2;
    color: #FFFFFF;
}

@media (max-width: 991px) {
    .course-carousel { --per-view: 2; }
    .course-carousel__arrow--prev { left: -6px; }
    .course-carousel__arrow--next { right: -6px; }
}

@media (max-width: 767px) {
    .course-carousel { --per-view: 1; }
    .course-carousel__arrow { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
}

/* Catálogo /cursos.php: el selector de orden vive en la columna izquierda, a todo el ancho. */
.cursos-catalog__sort--sidebar {
    display: block;
}

.cursos-catalog__sort--sidebar select {
    width: 100%;
}

/* Badge amarillo "PRÓXIMAMENTE" en la esquina superior izquierda de la tarjeta de convocatoria
   (cnsc.php: próximas convocatorias dentro de la grilla de abiertas). */
.course-card-2026__thumb {
    position: relative;
}

.course-card-2026__badge-soon {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: #FFD700;
    color: #142A43;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    line-height: 1;
    padding: 7px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(20, 42, 67, 0.18);
}

/* "Estado de la convocatoria" (convocatoria.php): 7 etapas en pista deslizable, 5 visibles
   (3 en móvil), etapa en curso centrada y flechas laterales (js/convocatoria-estado.js).
   Reutiliza __dot y __label de arriba; el conector se dibuja con ::before/::after de cada ítem. */
.convocatoria-estado-steps {
    position: relative;
    padding: 0 32px;
    --visible: 5;
}

.convocatoria-estado-steps__viewport {
    overflow: hidden;
}

.convocatoria-estado-steps__track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.35s ease;
    will-change: transform;
}

.convocatoria-estado-steps__item {
    position: relative;
    flex: 0 0 calc(100% / var(--visible));
    max-width: calc(100% / var(--visible));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
}

.convocatoria-estado-steps__item::before,
.convocatoria-estado-steps__item::after {
    content: "";
    position: absolute;
    top: 13px;
    width: 50%;
    height: 2px;
    background: #E2D9C5;
}

.convocatoria-estado-steps__item::before { left: 0; }
.convocatoria-estado-steps__item::after { right: 0; }
.convocatoria-estado-steps__item:first-child::before,
.convocatoria-estado-steps__item:last-child::after { display: none; }

.convocatoria-estado-steps__item.is-done::before,
.convocatoria-estado-steps__item.is-done::after,
.convocatoria-estado-steps__item.is-active::before {
    background: #D97706;
}

.convocatoria-estado-steps__item .convocatoria-estado-steps__dot {
    position: relative;
    z-index: 1;
}

.convocatoria-estado-steps__item.is-done .convocatoria-estado-steps__dot {
    background: #D97706;
    border-color: #D97706;
    color: #FFFFFF;
}

.convocatoria-estado-steps__item.is-active .convocatoria-estado-steps__dot {
    background: #FFFFFF;
    border-color: #D97706;
    color: #D97706;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15);
}

.convocatoria-estado-steps__item.is-done .convocatoria-estado-steps__label,
.convocatoria-estado-steps__item.is-active .convocatoria-estado-steps__label {
    color: #0E2744;
}

.convocatoria-estado-steps__arrow {
    position: absolute;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #CBBFA0;
    background: #FFFFFF;
    color: #94836A;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.convocatoria-estado-steps__arrow--prev { left: 0; }
.convocatoria-estado-steps__arrow--next { right: 0; }

.convocatoria-estado-steps__arrow svg {
    width: 14px;
    height: 14px;
}

.convocatoria-estado-steps__arrow:not(:disabled):hover {
    border-color: #D97706;
    color: #D97706;
}

.convocatoria-estado-steps__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 575px) {
    .convocatoria-estado-steps { --visible: 3; }
}

/* Modo "solo una sección" (?seccion=<clave>, usado por el panel en /4dmon/secciones/): se muestra
   únicamente la sección pedida, sin cabecera, menú, preloader ni pie. */
body.solo-seccion .preloader,
body.solo-seccion .topbar,
body.solo-seccion .main-header,
body.solo-seccion .stricky-header,
body.solo-seccion footer.main-footer-two,
body.solo-seccion .copyright,
body.solo-seccion .scroll-to-top {
    display: none !important;
}

/* En modo solo-seccion (vista previa del constructor /4dmon/home/) las animaciones de entrada
   (wow.js) no aplican: todo se ve de inmediato y completo, sin depender del scroll. */
body.solo-seccion .wow {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
}

/* Catálogo /cursos.php: contador y botón "Cargar más" bajo la cuadrícula (se cargan 9 cursos por vez). */
.cursos-catalog__more-wrap {
    margin-top: 28px;
    text-align: center;
}

.cursos-catalog__shown {
    margin: 0 0 14px;
    font-size: 14px;
    color: #64748B;
}

.cursos-catalog__more-btn {
    display: inline-block;
    min-width: 200px;
    padding: 13px 34px;
    border-radius: 999px;
    background: #1C89C2;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cursos-catalog__more-btn:hover,
.cursos-catalog__more-btn:focus-visible {
    background: #1A8DC4;
    color: #fff;
    transform: translateY(-1px);
}

.cursos-catalog__more-btn[aria-busy="true"] {
    opacity: 0.7;
    pointer-events: none;
}

/* Blog público (/blog.php): paginador numerado, 12 entradas por página. */
.blog-paginador {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 36px 0 8px;
}

.blog-paginador a,
.blog-paginador__actual,
.blog-paginador__puntos {
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.blog-paginador a {
    background: #fff;
    color: #1C89C2;
    border: 1px solid #C6E2F0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-paginador a:hover,
.blog-paginador a:focus-visible {
    background: #1C89C2;
    color: #fff;
    border-color: #1C89C2;
}

.blog-paginador__actual {
    background: #1C89C2;
    color: #fff;
}

.blog-paginador__puntos {
    color: #64748B;
    padding: 0 2px;
    min-width: 0;
}

/* Listado del blog (/blog.php): todas las tarjetas del mismo ancho y alto; la foto mide 416×235 px (a ancho completo
   de la tarjeta en pantallas más angostas) y se recorta para llenar el marco sin deformarse. */
.blog-listado > [class*="col-"] {
    display: flex;
    margin-bottom: 36px;
}

.blog-listado .blog-three__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
}

.blog-listado .blog-three__image {
    flex: 0 0 auto;
    width: 100%;
    height: 235px;
    background: #EEF2F6;
}

.blog-listado .blog-three__image img {
    display: block;
    width: 100%;
    height: 235px;
    object-fit: cover;
    object-position: center;
}

.blog-listado .blog-three__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.blog-listado .blog-three__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-listado .blog-three__content > p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-listado .blog-three__meta {
    margin-top: auto;
}

/* Listado del blog: tarjetas con esquinas de 6px. */
.blog-listado .blog-three__item {
    border-radius: 6px;
}

.blog-listado .blog-three__image {
    border-radius: 6px 6px 0 0;
}

/* Página de un artículo (/blog-post.php): a la izquierda la lista de artículos relacionados y a la derecha el artículo
   (foto grande, fecha, título, contenido, compartir y comentarios). En pantallas angostas los relacionados pasan abajo. */
.blog-post {
    background: #F5F7FA;
}

.blog-post__container {
    max-width: 1400px;
    padding-top: 50px;
    padding-bottom: 60px;
}

.blog-post__layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 920px);
    justify-content: center;
    gap: 36px;
    align-items: start;
}

.blog-post__principal {
    min-width: 0;
    width: 100%;
    max-width: 920px;
}

.blog-post__principal .blog-post__image {
    max-height: none;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
}

.blog-post__relacionados {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
}

.blog-post__relacionados-titulo {
    background: #1C89C2;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    padding: 26px 22px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.blog-post__relacionado {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #E2E8F0;
    text-decoration: none;
    color: inherit;
}

.blog-post__relacionado-img {
    flex: 0 0 112px;
    width: 112px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #E2E8F0;
}

.blog-post__relacionado-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post__relacionado-texto {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.blog-post__relacionado-titulo {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--eduact-black);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-post__relacionado:hover .blog-post__relacionado-titulo {
    color: #1C89C2;
}

.blog-post__relacionado-fecha {
    font-size: 12.5px;
    color: #64748B;
}

.blog-post__relacionados-todos {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #1C89C2;
}

@media (max-width: 991px) {
    .blog-post__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .blog-post__relacionados {
        position: static;
        order: 2;
    }

    .blog-post__principal {
        max-width: none;
    }
}

/* Último artículo del blog a todo el ancho (12 columnas): foto grande a la izquierda y texto a la derecha. */
.blog-destacado {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    margin-bottom: 36px;
    background: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0px 0px 60px 0px rgba(2, 2, 2, 0.07);
    overflow: hidden;
}

.blog-destacado__imagen {
    display: block;
    min-height: 380px;
    background: #EEF2F6;
}

.blog-destacado__imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blog-destacado__contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 40px 44px;
}

.blog-destacado__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.blog-destacado__etiqueta {
    background: #E8F3FA;
    color: #1C89C2;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 6px;
}

.blog-destacado__fecha {
    font-size: 14px;
    color: #64748B;
}

.blog-destacado__titulo {
    margin: 0;
    font-size: 32px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-destacado__titulo a {
    color: var(--eduact-black);
}

.blog-destacado__titulo a:hover {
    color: #1C89C2;
}

.blog-destacado__resumen {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-destacado__leer {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #1C89C2;
}

@media (max-width: 991px) {
    .blog-destacado {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-destacado__imagen {
        min-height: 0;
        height: 260px;
    }

    .blog-destacado__contenido {
        padding: 28px 24px;
    }

    .blog-destacado__titulo {
        font-size: 24px;
    }
}


/* Botón "volver arriba" sobre el footer (fondo oscuro): se pinta de blanco (lo activa js/scroll-top-footer.js). */
.scroll-top--sobre-footer {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.scroll-top--sobre-footer::after {
    color: #FFFFFF;
}

.scroll-top--sobre-footer .scroll-top__circle path {
    stroke: #FFFFFF;
}

/* Línea de fuente del artículo: solo al imprimir o guardar en PDF. */
.blog-post__fuente-impresion {
    display: none;
}

/* Impresión / "Descargar en PDF" del artículo: solo el contenido (sin menú, relacionados, compartir, comentarios ni footer). */
@media print {
    .topbar,
    .main-header,
    .stricky-header,
    .main-footer-two,
    .copyright,
    .scroll-top,
    .preloader,
    .mobile-nav__wrapper,
    .search-popup,
    .blog-post__relacionados,
    .blog-post__share,
    .blog-post__comments {
        display: none !important;
    }

    .blog-post,
    .blog-post__container {
        background: #FFFFFF !important;
        padding: 0 !important;
        max-width: none !important;
    }

    .blog-post__layout {
        display: block !important;
    }

    .blog-post__principal {
        max-width: none !important;
    }

    .blog-post__principal .blog-post__image {
        aspect-ratio: auto;
        max-height: 9cm;
        object-fit: cover;
    }

    .blog-post__content img {
        max-width: 100%;
        height: auto;
        page-break-inside: avoid;
    }

    .blog-post__fuente-impresion {
        display: block;
        margin-top: 24px;
        padding-top: 10px;
        border-top: 1px solid #CBD5E1;
        font-size: 12px;
        color: #475569;
    }
}

/* "Nuestro equipo": a la izquierda el carrusel de integrantes (5 por vista, flechas, avance automático) y a la derecha la
   tarjeta "Y detrás de ellos todo un equipo", fija: no se mueve con el carrusel. */
.home-team-2026__layout {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.home-team-2026__layout > .home-team-2026__more-card {
    flex: 0 0 230px;
    width: 230px;
}

.team-carousel {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    --per-view: 4;
}

.team-carousel__viewport {
    overflow: hidden;
    margin: 0 -7px;
    padding: 6px 0 14px;
    height: 100%;
    box-sizing: border-box;
}

.team-carousel__track {
    display: flex;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.team-carousel__track.is-jumping {
    transition: none;
}

.team-carousel__slide {
    flex: 0 0 calc(100% / var(--per-view));
    max-width: calc(100% / var(--per-view));
    padding: 0 7px;
    box-sizing: border-box;
    display: flex;
}

.team-carousel__slide .home-team-2026__card {
    width: 100%;
}

.team-carousel .home-team-2026__avatar-wrap {
    height: 150px;
}

/* Con pocos integrantes (caben todos en la vista) no hay carrusel: sin flechas ni copias. */
.team-carousel.is-static .team-carousel__slide[aria-hidden="true"],
.team-carousel.is-static .team-carousel__arrow {
    display: none;
}

.team-carousel__arrow {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #1C89C2;
    background: #FFFFFF;
    color: #1C89C2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 8px 22px rgba(20, 42, 67, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease, visibility 0s linear 0.25s;
}

.team-carousel__arrow svg {
    width: 20px;
    height: 20px;
}

.team-carousel__arrow--prev { left: -16px; }
.team-carousel__arrow--next { right: -16px; }

.team-carousel:hover .team-carousel__arrow,
.team-carousel:focus-within .team-carousel__arrow {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease, visibility 0s;
}

.team-carousel__arrow:hover {
    background: #1C89C2;
    color: #FFFFFF;
}

@media (max-width: 1199px) {
    .home-team-2026__layout {
        flex-direction: column;
    }

    .home-team-2026__layout > .home-team-2026__more-card {
        flex: 0 0 auto;
        width: auto;
    }

    .team-carousel { --per-view: 4; }
}

@media (max-width: 991px) {
    .team-carousel { --per-view: 3; }
}

@media (max-width: 767px) {
    .team-carousel { --per-view: 2; }
    .team-carousel__arrow { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
    .team-carousel__arrow--prev { left: -8px; }
    .team-carousel__arrow--next { right: -8px; }
}

@media (max-width: 479px) {
    .team-carousel { --per-view: 1; }
}

/* Insignias sobre la foto de la tarjeta de curso (catálogo y portada), en la esquina inferior izquierda a 4px del borde:
   abajo "PERSONALÍZALO CON TU OPEC" y, encima, la nota del certificado en amarillo con letra negra (si el curso la tiene). */
.course-card-2026__badges {
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: calc(100% - 8px);
    pointer-events: none;
}

.course-card-2026__badges .course-card-2026__pill-tag {
    box-shadow: 0 1px 4px rgba(15, 39, 69, 0.25);
}

.course-card-2026__badge-cert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFD700;
    color: #000000;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.2;
    padding: 3px 8px;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(15, 39, 69, 0.25);
}

.course-card-2026__badge-cert svg {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
}

/* Catálogo /cursos.php: el botón de cada tarjeta lleva esquinas de 8px y sin margen propio; el contenido de la tarjeta, 10px de padding inferior y lleva esquinas de 8px. Sin el margen
   inferior de la tarjeta (la separación entre filas ya la da la grilla) la altura de las tarjetas no cambia. */
.cursos-catalog__grid .course-card-2026 {
    margin-bottom: 0;
}

.cursos-catalog__grid .course-card-2026__content {
    padding-bottom: 10px;
}

.cursos-catalog__grid .course-card-2026__btn {
    margin-bottom: 0;
    border-radius: 8px;
}

/* Cinta diagonal "Destacado" en la esquina superior derecha de la foto de la tarjeta (catálogo /cursos.php). */
.course-card-2026__cinta {
    position: absolute;
    top: 17px;
    right: -37px;
    z-index: 3;
    width: 135px;
    padding: 4px 0;
    text-align: center;
    transform: rotate(45deg);
    background: #1C89C2;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    line-height: 1.2;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(15, 39, 69, 0.3);
    pointer-events: none;
}

/* Descuento vigente: insignia en la esquina superior izquierda de la foto de la tarjeta (catálogo /cursos.php). */
.course-card-2026__descuento {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #D92D3A;
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 6px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(15, 39, 69, 0.3);
    pointer-events: none;
}

.course-card-2026__descuento strong {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.course-card-2026__descuento span {
    font-size: 9.5px;
    font-weight: 600;
    opacity: 0.95;
}

/* Personalizar el curso: total, total con descuento y ahorro. */
.curso-hero-2026__precio-antes {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
    text-decoration: line-through;
    line-height: 1.2;
}

.curso-hero-2026__precio-ahorro {
    font-size: 10.5px;
    font-weight: 700;
    color: #FFD700;
    line-height: 1.2;
    margin-top: 2px;
}

.curso-niveles-selector__total--antes {
    margin-top: 12px;
    color: #6b7280;
}

.curso-niveles-selector__total--antes s {
    font-size: 16px;
    font-weight: 600;
}

.curso-niveles-selector__total--antes[hidden],
.curso-niveles-selector__ahorro[hidden] {
    display: none;
}

.curso-niveles-selector__ahorro {
    margin: 6px 0 0;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: #D92D3A;
}

/* Frase manuscrita editable del hero del curso (cuando no es la imagen por defecto): mismo azul y trazo inclinado de la imagen. */
.curso-hero-2026__tagline--texto {
    font-family: 'Water Brush', 'Brush Script MT', 'Caveat', cursive, sans-serif;
    font-size: 46px;
    line-height: 1.05;
    color: #0B2D6B;
    margin: 0;
    padding: 6px 0 14px;
    transform: rotate(-6deg);
    transform-origin: left center;
    overflow-wrap: anywhere;
}

/* Niveles del curso como "tipo de participación" del método de preparación: icono dentro de un círculo en vez de la foto. */
.curso-metodo-2026__teacher-img--icono {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8F3FA;
    color: #1C89C2;
}

.curso-metodo-2026__teacher-img--icono svg {
    width: 38%;
    height: 38%;
}

.curso-metodo-2026__teacher-item.is-active .curso-metodo-2026__teacher-img--icono {
    background: #1C89C2;
    color: #FFFFFF;
}

/* ====== Matrícula (matricula.php y matricula-gracias.php): formulario a la izquierda y resumen de la compra a la derecha ====== */
.matricula {
    background: #F5F7FA;
    padding: 50px 0 80px;
}

.matricula__titulo {
    font-size: 34px;
    margin: 0 0 6px;
    color: #142A43;
}

.matricula__sub {
    margin: 0 0 26px;
    color: #475569;
}

.matricula__vacio {
    text-align: center;
    padding: 70px 0;
}

.matricula__alerta {
    background: #FDE8EA;
    color: #B42318;
    border: 1px solid #F7C2C8;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-weight: 600;
}

.matricula__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.matricula__tarjeta {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 26px;
    margin-bottom: 22px;
    box-shadow: 0 4px 18px rgba(15, 39, 69, 0.05);
}

.matricula__tarjeta h2 {
    font-size: 20px;
    margin: 0 0 18px;
    color: #142A43;
}

.matricula__trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.matricula__fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.matricula__campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #142A43;
    margin-bottom: 14px;
}

.matricula__campo[hidden],
.matricula__campo input[hidden],
.matricula select[hidden] {
    display: none;
}

.matricula__campo input,
.matricula__campo select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    color: #142A43;
    background: #FFFFFF;
}

.matricula__campo input:focus,
.matricula__campo select:focus {
    outline: 2px solid #1C89C2;
    outline-offset: 1px;
    border-color: #1C89C2;
}

.matricula__aviso {
    background: #E8F3FA;
    border: 1px solid #BBDDF0;
    color: #0F5C85;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
}

.matricula__aviso[hidden] {
    display: none;
}

.matricula__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
}

.matricula__check input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.matricula__check--datos {
    margin: 20px 0;
}

.matricula__nota {
    font-size: 14px;
    color: #475569;
    margin: 10px 0;
}

.matricula__metodos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.matricula__metodo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
}

.matricula__metodo:has(input:checked) {
    border-color: #1C89C2;
    background: #F2F8FC;
}

/* El nombre y la descripción del medio van en una sola línea; el logo de bancos queda a la derecha (en pantallas angostas baja a otra línea). */
.matricula__metodo-texto {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.matricula__metodo-logos {
    margin-left: auto;
    max-width: 100%;
    height: 26px;
    width: auto;
}

.matricula__metodo small {
    color: #64748B;
}

.matricula__panel[hidden],
.matricula__nota[hidden],
.matricula__cuenta[hidden],
.matricula__cuenta-datos [hidden] {
    display: none;
}

.matricula__sub-metodos {
    display: flex;
    gap: 22px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #142A43;
}

.matricula__sub-metodos label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    cursor: pointer;
}

.matricula__cuentas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0;
}

.matricula__cuenta {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
}

.matricula__cuenta:has(input:checked),
.matricula__cuenta--fija {
    border-color: #1C89C2;
    background: #F2F8FC;
}

.matricula__cuenta--fija {
    cursor: default;
}

.matricula__cuenta-datos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    color: #334155;
}

.matricula__cuenta-datos strong {
    color: #142A43;
    font-size: 15px;
}

.matricula__enviar {
    width: 100%;
    justify-content: center;
}

.matricula__col--resumen {
    position: sticky;
    top: 100px;
}

.matricula__foto {
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 260;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 14px;
    background: #E2E8F0;
}

.matricula__curso {
    font-size: 18px;
    margin: 0 0 14px;
    color: #142A43;
}

.matricula__detalle {
    margin: 0;
}

.matricula__detalle > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid #EEF2F6;
    font-size: 14.5px;
}

.matricula__detalle dt {
    font-weight: 600;
    color: #334155;
}

.matricula__detalle dt small {
    display: block;
    font-weight: 500;
    color: #64748B;
}

.matricula__detalle dd {
    margin: 0;
    font-weight: 700;
    color: #142A43;
    white-space: nowrap;
}

.matricula__descuento dd,
.matricula__descuento dt {
    color: #D92D3A;
}

.matricula__total {
    border-bottom: 0 !important;
    font-size: 19px !important;
}

.matricula__total dd {
    color: #1C89C2;
}

.matricula__ahorro {
    margin: 4px 0 0;
    color: #D92D3A;
    font-weight: 700;
    font-size: 14px;
}

@media (max-width: 991px) {
    .matricula__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .matricula__col--resumen {
        position: static;
        order: -1;
    }
}

@media (max-width: 575px) {
    .matricula__fila,
    .matricula__metodos {
        grid-template-columns: 1fr;
    }
}

/* ==============================================================
   CURSO: ¿QUÉ SE EVALÚA? (.curso-eval-2026, app/partials/curso/evaluacion.php)
   Título + descripción y una tarjeta por fase con anillo de porcentaje, tipo (con enlace a su guía) y descripción.
   ============================================================== */
.curso-eval-2026 {
    margin: 0 0 60px;
    padding: 36px;
    box-sizing: border-box;
    max-width: 100%;
}

.curso-eval-2026__header {
    max-width: 820px;
    margin-bottom: 28px;
}

.curso-eval-2026__kicker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1C89C2;
    margin-bottom: 6px;
    display: inline-block;
}

.curso-eval-2026__title {
    font-size: 28px;
    font-weight: 800;
    color: #142A43;
    line-height: 1.18;
    margin: 0 0 14px;
    letter-spacing: -0.4px;
}

.curso-eval-2026__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 10px;
}

.curso-eval-2026__fases {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 100%; /* cada fase ocupa todo el ancho del contenedor */
    gap: 18px;
}

.curso-eval-2026__fase {
    --eval-color: #1C89C2; /* azul de la gama de la página: progreso, porcentaje y tipo */
    --eval-fondo: #DCEEF8;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(15, 39, 69, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.curso-eval-2026__fase:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(15, 39, 69, 0.1);
}

.curso-eval-2026__anillo {
    position: relative;
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
}

.curso-eval-2026__anillo svg {
    width: 100%;
    height: 100%;
    display: block;
}

.curso-eval-2026__pista,
.curso-eval-2026__avance {
    fill: none;
    stroke-width: 9;
}

.curso-eval-2026__pista {
    stroke: var(--eval-fondo);
}

.curso-eval-2026__avance {
    stroke: var(--eval-color);
    stroke-linecap: round;
}

.curso-eval-2026__pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #142A43;
    letter-spacing: -0.5px;
}

.curso-eval-2026__pct small {
    font-size: 11px;
    font-weight: 800;
    margin-left: 1px;
    align-self: center;
    transform: translateY(-7px); /* "%" a modo de superíndice junto al número */
    color: var(--eval-color);
}

.curso-eval-2026__cuerpo {
    min-width: 0;
    flex: 1;
}

.curso-eval-2026__nombre {
    font-size: 17px;
    font-weight: 800;
    color: #142A43;
    line-height: 1.25;
    margin: 2px 0 8px;
}

.curso-eval-2026__tipo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--eval-color);
    background: var(--eval-fondo);
    padding: 4px 10px;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 10px;
}

.curso-eval-2026__tipo:hover {
    filter: brightness(0.95);
    text-decoration: underline;
}

.curso-eval-2026__texto {
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
    margin: 0;
}

@media (max-width: 991px) {
    .curso-eval-2026 {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .curso-eval-2026__fase {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Menú principal: el elemento que solo agrupa un submenú (sin enlace) conserva el cursor de enlace. */
.main-menu__list > li.dropdown > a:not([href]) {
    cursor: pointer;
}

/* Grupos de fases como pestañas (.curso-eval-2026__tabs, public/js/convocatoria-evaluacion.js): botones blancos con letra azul, sin bordes redondeados, de 30px
   de alto como máximo; el seleccionado solo lleva un borde inferior azul de 2px. */
.curso-eval-2026__tablist {
    display: none;
}

.curso-eval-2026__tabs.is-tabs .curso-eval-2026__tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.curso-eval-2026__tab {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    max-height: 30px;
    height: 30px;
    padding: 0 14px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    color: #1C89C2;
    background: #FFFFFF;
    border: 0;
    border-bottom: 2px solid transparent; /* reserva el borde inferior para que el seleccionado no desplace a los demás */
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.curso-eval-2026__tab:hover {
    border-bottom-color: #DCEEF8;
}

.curso-eval-2026__tab:focus-visible {
    outline: 3px solid rgba(28, 137, 194, 0.35);
    outline-offset: 2px;
}

.curso-eval-2026__tab.is-active {
    border-bottom: 2px solid #1C89C2;
}

.curso-eval-2026__panel[hidden] {
    display: none;
}

/* Método de preparación → "1. Tu tipo de participación": 3 opciones visibles, la elegida primero; con más de 3, carrusel con flechas
   (public/js/curso-metodo-participacion.js). Sin JS se ven todas en la cuadrícula de siempre. */
.curso-metodo-2026__teacher-item.is-oculto { display: none; }
.curso-metodo-2026__teachers-carousel { position: relative; margin-top: auto; padding: 0 14px; }
.curso-metodo-2026__teachers-carousel .curso-metodo-2026__teachers-grid { margin-top: 0; }
.curso-metodo-2026__teachers-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #1C89C2;
    border-radius: 50%;
    background: #fff;
    color: #1C89C2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background .2s ease, color .2s ease;
}
.curso-metodo-2026__teachers-arrow:hover { background: #1C89C2; color: #fff; }
.curso-metodo-2026__teachers-arrow svg { width: 14px; height: 14px; }
.curso-metodo-2026__teachers-arrow--prev { left: -4px; }
.curso-metodo-2026__teachers-arrow--next { right: -4px; }

/* Tarjeta del hero del curso para cursos del grupo Estudiantes: mensaje en lugar de los pasos 1, 2 y 3. */
.curso-hero-2026__mensaje {
    margin: 4px 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
}

/* Resultado de la consulta del documento en la matrícula (matricula.js): consultando, encontrado, no encontrado, no se pudo consultar. */
.matricula__estado {
    margin: -6px 0 14px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #475569;
}
.matricula__estado[hidden] { display: none; }
.matricula__estado--ok { background: #E8F3FA; border-color: #BBDDF0; color: #0F5C85; }
.matricula__estado--ok::before { content: "✓ "; }
.matricula__estado--buscando { font-weight: 500; }

/* ==============================================================
   MATRÍCULA: interruptores (casillas tipo switch), ventana del medio de pago y comprobante de pago
   ============================================================== */
.matricula__check[hidden] { display: none; }
.matricula__check--switch {
    position: relative;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.matricula__check--switch input {
    position: absolute;
    opacity: 0;
    width: 44px;
    height: 24px;
    margin: 0;
    cursor: pointer;
}
.matricula__switch {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #CBD5E1;
    transition: background-color .15s ease;
}
.matricula__switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .15s ease;
}
.matricula__check--switch input:checked + .matricula__switch { background: #1C89C2; }
.matricula__check--switch input:checked + .matricula__switch::before { transform: translateX(20px); }
.matricula__check--switch input:focus-visible + .matricula__switch { outline: 2px solid #1C89C2; outline-offset: 2px; }
.matricula__check--switch .matricula__check-texto { flex: 1 1 auto; }

.matricula__nota--medio { margin-top: -4px; font-size: 13px; color: #64748B; }

body.matricula-modal-abierto { overflow: hidden; }
.matricula__modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
}
.matricula__modal[hidden] { display: none; }
.matricula__modal-caja {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 26px 24px 22px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
}
.matricula__modal-caja:focus { outline: none; }
.matricula__modal-caja h3 { margin: 0 0 14px; font-size: 20px; color: #142A43; }
.matricula__modal-caja [data-modal-medio][hidden] { display: none; }
.matricula__modal-cerrar {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #64748B;
    cursor: pointer;
}
.matricula__modal-cerrar:hover { color: #142A43; }
.matricula__modal-logos { max-width: 100%; height: 30px; width: auto; }
.matricula__modal-ok { margin-top: 10px; width: 100%; }
.matricula__estado--error { background: #FDE8EA; border-color: #F7C2C8; color: #B42318; }
.matricula__estado--error::before { content: none; }

.matricula__comprobante-aviso {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1.5px dashed #1C89C2;
    border-radius: 10px;
    background: #F2F8FC;
}
.matricula__comprobante-aviso h2 { margin-top: 0; }
.matricula__enlace { word-break: break-all; font-size: 14px; margin: 8px 0 12px; }
.matricula__enlace a { color: #1C89C2; font-weight: 600; }

.matricula__comprobante { margin-top: 14px; }
.matricula__archivo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 74px;
    padding: 14px;
    border: 2px dashed #94A3B8;
    border-radius: 10px;
    background: #F8FAFC;
    color: #334155;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.matricula__archivo:hover,
.matricula__archivo:focus-within { border-color: #1C89C2; background: #F2F8FC; }
.matricula__archivo input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.matricula__comprobante-vista { display: block; max-width: 100%; max-height: 320px; margin: 14px auto 0; border-radius: 8px; border: 1px solid #E2E8F0; }
.matricula__comprobante-vista[hidden] { display: none; }
.matricula__comprobante .matricula__estado { margin: 14px 0 0; }
.matricula__comprobante .matricula__enviar { margin-top: 16px; }
.matricula__resultado--pagado h1 { color: #0F5C85; }

/* Pantalla de progreso al confirmar la matrícula (matricula.js) */
.matricula__proceso {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .6);
}
.matricula__proceso[hidden] { display: none; }
.matricula__proceso-caja {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    padding: 28px 26px 22px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
}
.matricula__proceso-caja > strong { display: block; margin: 14px 0 12px; font-size: 18px; color: #142A43; }
.matricula__spinner {
    display: inline-block;
    width: 42px;
    height: 42px;
    border: 4px solid #D7E9F4;
    border-top-color: #1C89C2;
    border-radius: 50%;
    animation: matricula-giro .9s linear infinite;
}
@keyframes matricula-giro { to { transform: rotate(360deg); } }
.matricula__pasos { list-style: none; margin: 0 0 8px; padding: 0; text-align: left; }
.matricula__pasos li {
    position: relative;
    padding: 6px 0 6px 28px;
    font-size: 14px;
    color: #94A3B8;
}
.matricula__pasos li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
}
.matricula__pasos li.es-actual { color: #142A43; font-weight: 600; }
.matricula__pasos li.es-actual::before { border-color: #1C89C2; background: #1C89C2; animation: matricula-pulso 1s ease-in-out infinite; }
.matricula__pasos li.es-hecho { color: #0F5C85; }
.matricula__pasos li.es-hecho::before { content: '✓'; border: 0; background: #1C89C2; color: #fff; font-size: 9px; line-height: 12px; text-align: center; }
@keyframes matricula-pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .matricula__spinner, .matricula__pasos li.es-actual::before { animation: none; } }
.matricula__enviar[disabled] { opacity: .7; cursor: progress; }

/* Comprobante de pago: un solo control del ancho de la pantalla (arrastrar, pegar o elegir) con vista previa (comprobante.js) */
.matricula__pasos-pago { margin: 12px 0 8px 20px; padding: 0; color: #334155; font-size: 15px; line-height: 1.6; }
.matricula__pasos-pago li { margin: 4px 0; }
.matricula__zona {
    position: relative;
    width: 100%;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    border: 2px dashed #94A3B8;
    border-radius: 12px;
    background: #F8FAFC;
    color: #334155;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.matricula__zona:hover,
.matricula__zona:focus-within,
.matricula__zona.arrastrando { border-color: #1C89C2; background: #F2F8FC; }
.matricula__zona.tiene-archivo { border-style: solid; border-color: #1C89C2; }
.matricula__zona-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.matricula__zona.tiene-archivo .matricula__zona-input { pointer-events: none; }
.matricula__zona-vacia { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; color: #1C89C2; }
.matricula__zona-vacia strong { color: #142A43; font-size: 16px; }
.matricula__zona-vacia span { color: #64748B; font-size: 13px; }
.matricula__zona-vista { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 2; width: 100%; }
.matricula__zona-vista[hidden], .matricula__zona-vacia[hidden] { display: none; }
.matricula__zona-vista img { max-width: 100%; max-height: 420px; border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; }
.matricula__zona-vista img[hidden], .matricula__zona-pdf[hidden] { display: none; }
.matricula__zona-pdf { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 36px; border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; color: #B42318; }
.matricula__zona-nombre { margin: 0; color: #475569; font-size: 13px; word-break: break-all; }
.matricula__zona-quitar { border: 0; background: transparent; color: #1C89C2; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; }

/* ==============================================================
   PÁGINAS LEGALES (privacidad.php): Términos y Condiciones de Servicio y Política de Privacidad
   ============================================================== */
.legal { padding: 56px 0 72px; background: #F5F8FB; }
.legal .container { max-width: 900px; }
.legal__encabezado { margin-bottom: 26px; }
.legal__encabezado h1 { margin: 0 0 6px; font-size: 34px; line-height: 1.2; color: #142A43; }
.legal__encabezado p { margin: 0; color: #64748B; font-size: 14px; }
.legal__pestanas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.legal__pestanas a { padding: 10px 18px; border: 1.5px solid #1C89C2; border-radius: 999px; background: #fff; color: #1C89C2; font-weight: 700; font-size: 14px; text-decoration: none; }
.legal__pestanas a:hover { background: #1C89C2; color: #fff; }
.legal__doc { background: #fff; border-radius: 12px; padding: 34px 38px; margin-bottom: 28px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); scroll-margin-top: 110px; }
.legal__titulo { margin: 0 0 12px; font-size: 26px; line-height: 1.25; color: #1C89C2; }
.legal__intro { margin: 0 0 20px; font-size: 16px; line-height: 1.7; color: #334155; }
.legal__indice { margin: 0 0 24px; padding: 18px 22px; border: 1px solid #D7E9F4; border-radius: 10px; background: #F2F8FC; }
.legal__indice strong { display: block; margin-bottom: 8px; color: #142A43; }
.legal__indice ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; font-size: 14px; line-height: 1.7; }
.legal__indice li { break-inside: avoid; }
.legal__indice a { color: #1C89C2; text-decoration: none; }
.legal__indice a:hover { text-decoration: underline; }
.legal__doc h3 { margin: 28px 0 8px; font-size: 18px; line-height: 1.35; color: #142A43; scroll-margin-top: 110px; }
.legal__doc p, .legal__doc li { font-size: 15px; line-height: 1.75; color: #334155; }
.legal__doc p { margin: 0 0 12px; }
.legal__doc ul, .legal__doc ol { margin: 0 0 14px; padding-left: 24px; }
.legal__doc li { margin: 4px 0; }
.legal__doc a { color: #1C89C2; }
.legal__volver { margin: 0; }
@media (max-width: 640px) {
    .legal { padding: 36px 0 52px; }
    .legal__encabezado h1 { font-size: 26px; }
    .legal__doc { padding: 22px 18px; }
    .legal__indice ol { columns: 1; }
}
@media print {
    .legal__pestanas, .legal__indice { display: none; }
    .legal__doc { box-shadow: none; padding: 0; }
}

/* Comprobante recibido (comprobante-recibido.php) */
.matricula__recibido { text-align: center; padding: 38px 34px; }
.matricula__recibido-icono { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: #E8F3FA; color: #1C89C2; margin-bottom: 14px; }
.matricula__recibido .matricula__sub { max-width: 560px; margin-left: auto; margin-right: auto; }
.matricula__recibido-texto { max-width: 580px; margin: 6px auto 14px; font-size: 17px; line-height: 1.7; color: #334155; }
.matricula__recibido .matricula__nota { max-width: 580px; margin-left: auto; margin-right: auto; }
.matricula__recibido .matricula__detalle { text-align: left; margin-top: 22px; }
.matricula__recibido-acciones { margin: 26px 0 0; }
@media (max-width: 575px) { .matricula__recibido { padding: 28px 18px; } }

/* Botón flotante de WhatsApp (abajo a la derecha, en todas las páginas del sitio; app/partials/footer.php) */
.whatsapp-flotante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.whatsapp-flotante__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-flotante:hover .whatsapp-flotante__icono,
.whatsapp-flotante:focus-visible .whatsapp-flotante__icono { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, .34); }
.whatsapp-flotante:focus-visible .whatsapp-flotante__icono { outline: 3px solid #142A43; outline-offset: 3px; }
.whatsapp-flotante__texto {
    order: -1;
    padding: 9px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #142A43;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.whatsapp-flotante:hover .whatsapp-flotante__texto,
.whatsapp-flotante:focus-visible .whatsapp-flotante__texto { opacity: 1; transform: translateX(0); }
.whatsapp-flotante__icono::before {
    content: '';
    position: absolute;
    right: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: whatsapp-pulso 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes whatsapp-pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-flotante__icono::before { animation: none; display: none; } }
@media (max-width: 575px) {
    .whatsapp-flotante { right: 16px; bottom: 16px; }
    .whatsapp-flotante__icono, .whatsapp-flotante__icono::before { width: 54px; height: 54px; }
    .whatsapp-flotante__texto { display: none; }
}
/* El botón «volver arriba» queda justo encima del de WhatsApp para que no se tapen. */
.scroll-top { bottom: 96px; right: 28px; }
@media (max-width: 575px) { .scroll-top { bottom: 84px; right: 20px; } }
@media print { .whatsapp-flotante { display: none; } }