/*
 * 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: #188CC3;
    --eduact-secondary-rgb: 24, 140, 195;
    --eduact-black: #188CC3;
    --eduact-black-rgb: 24, 140, 195;
}

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: 20px 0;
}

.main-menu-with-bg .main-menu__logo img {
    height: 40px;
    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: #1F1944;
}

/* 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: var(--eduact-text2);
    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__comment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 560px;
}

.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: 8px;
    font-size: 14px;
    color: var(--eduact-text2);
}

/* 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;
}

.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;
    margin-top: 50px;
}

@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), #0d5a7d);
    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), #0d5a7d);
    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, #124F8F 0%, #0B2F5D 100%);
    box-shadow: 0 8px 24px rgba(11, 47, 93, 0.38);
    border: none;
    color: #FFFFFF;
}

.cnsc-hero-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(11, 47, 93, 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), #0d5a7d);
}

.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(24, 140, 195, .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: #188CC3;
    --ch-blue-bright: #188CC3;
    --ch-blue-soft-bg: #E8F4FA;
    --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(24, 140, 195, .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: #188CC3;
    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: #164E63;
    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: #188CC3;
    text-align: center;
    transform: rotate(-6deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

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

.curso-metodo-2026__hm-2 {
    color: #0284C7;
}

.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: #188CC3;
    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(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: #E0F2FE;
    color: #0284C7;
}

.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: #188CC3;
    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: #188CC3;
    color: #FFFFFF;
}

.curso-metodo-2026__flow {
    display: flex;
    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;
}

.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: #0EA5E9;
}

.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: 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: #188CC3;
    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 #D5E8F8;
}

.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: #188CC3;
    box-shadow: 0 4px 16px rgba(24, 140, 195, .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: #E0F2FE;
    color: #0284C7;
}

.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: #188CC3;
}

.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: #188CC3;
    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: #188CC3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 42, 67, .06);
    color: #188CC3;
}

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

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

.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: #188CC3;
    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: #E1F5FE;
}

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

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

.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: #188CC3;
    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 #D5E8F8;
    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: #188CC3;
    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), #0d5a7d);
    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;
    margin-bottom: 40px;
}

.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: #188CC3;
    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: #188CC3;
    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: #188CC3;
    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: #E0F2FE;
    color: #0284C7;
}

.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: #188CC3;
    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: #EAF2F8;
    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: #188CC3;
    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: #38BDF8;
    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: #0284C7;
    --step-theme-bg: rgba(224, 242, 254, 0.80);
    --step-theme-border: #38BDF8;
}

.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: #6366F1;
    --step-theme-bg: rgba(238, 242, 255, 0.80);
    --step-theme-border: #818CF8;
}

.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: #2563EB;
    --step-theme-bg: rgba(219, 234, 254, 0.80);
    --step-theme-border: #60A5FA;
}

.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, #188CC3) 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, #188CC3);
    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: 175px;
    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: #188CC3;
}

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

.course-card-2026__pill-tag {
    display: inline-block;
    background: #E0F2FE;
    color: #0284C7;
    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: #188CC3;
    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: #188CC3;
}

.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: #188CC3;
    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: #0284C7;
    border: 3px solid #E0F2FE;
    box-sizing: border-box;
}

.aviso-timeline-2026__date {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0284C7;
    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, #114B8E 0%, #082F62 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, #124B8E 0%, #082F62 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(8, 47, 98, 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(8, 47, 98, 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: #188CC3;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(24, 140, 195, 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;
}

.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;
    }
}