/* ============================================================ */
/* HOME.CSS — SUBALAB (reconstruido desde cero, v3)              */
/* ============================================================ */
/* CONVENCIÓN:
   - Todos los selectores llevan "body.path-frontpage" como
     prefijo, para que estas reglas NUNCA afecten otras páginas.
   - !important se reserva para overrides de librerías externas
     (Slick) o de clases de Bootstrap Barrio que compiten por la
     misma propiedad.
   - La red de seguridad genérica para cualquier Slick del sitio
     (contención de ancho, min-width:0 en layout__region) vive en
     style.css, no aquí, porque aplica a todo el sitio. */

/* ============================================================ */
/* 1. CARRUSEL SECUNDARIO HOME (ahora es el único hero)          */
/* ============================================================ */
/* Ya no existe el Easy Carousel: este bloque debe quedar pegado
   justo debajo del encabezado, a todo lo ancho, sin espacios. */

/* --sbw (ancho de la scrollbar) ahora es global: se define y se
   mide en style.css / js/scrollbar-width.js, no aquí, porque el
   mismo problema afecta al encabezado en todas las páginas. */

body.path-frontpage #main-content,
body.path-frontpage .region-content,
body.path-frontpage .layout__region--content,
body.path-frontpage .node__content,
body.path-frontpage .block-content-carrusel_secundario_home {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Drupal muestra por defecto la "Descripción del bloque" como <h2>. */
body.path-frontpage .block-content-carrusel_secundario_home > h2 {
    display: none;
}

/* Oculta la etiqueta visible "Imagen del banner" del campo. */
body.path-frontpage .block-content-carrusel_secundario_home .field--name-field-imagen-del-banner > .field__label {
    display: none;
}

/* Full-bleed: el bloque ocupa todo el ancho de la ventana sin
   importar el padding del layout que lo contiene. Se descuenta
   --sbw (ancho de la barra de scroll, ver home.js) para que el
   cálculo cuadre exacto en Windows/Chrome, no solo en sistemas
   con scrollbar superpuesta. */
body.path-frontpage .block-content-carrusel_secundario_home {
    width: calc(100vw - var(--sbw));
    max-width: calc(100vw - var(--sbw));
    margin-left: calc(50% - 50vw + (var(--sbw) / 2));
    margin-right: calc(50% - 50vw + (var(--sbw) / 2));
}

/* Cada slide: imagen de fondo + texto apilado al fondo con flex */
body.path-frontpage .block-content-carrusel_secundario_home .paragraph--type--slide-carrusel-secundario {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1920 / 600; /* proporción del diseño: nunca recorta, sin importar la altura de pantalla */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

body.path-frontpage .block-content-carrusel_secundario_home .field--name-field-imagen-del-banner {
    position: absolute;
    inset: 0;
    z-index: 1;
}
body.path-frontpage .block-content-carrusel_secundario_home .field--name-field-imagen-del-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* CAUSA RAÍZ DEL BUG "la imagen no llena el slide":
   el campo interno del Media referenciado (field--name-field-media-image,
   una clase genérica de Drupal, NO nuestra) trae "float: left" por
   defecto. Un elemento flotado se dimensiona por "shrink-to-fit"
   (toma el ancho de su contenido). Como la imagen aún no cargó su
   primer pixel, no tiene ancho propio que darle a ese contenedor —
   y como el <img> depende de "width:100%" DE ESE contenedor, los dos
   se quedan esperándose mutuamente en 0px, sin importar cuánto CSS
   le pongamos encima al <img>. Se anula el float solo aquí dentro
   del carrusel, sin tocar cómo se ven los Medios en el resto del
   sitio (donde ese float sí puede tener una razón de ser). */
body.path-frontpage .block-content-carrusel_secundario_home .field--name-field-media-image,
body.path-frontpage .block-content-carrusel_secundario_home .field--name-field-media-image .field__item {
    float: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Título y Descripción: presentes en el HTML (accesibilidad y
   transparencia .gov.co) pero SIEMPRE invisibles — decisión ya
   tomada: "que se vea solo la imagen". */
body.path-frontpage .block-content-carrusel_secundario_home .field--name-field-titulo-banner,
body.path-frontpage .block-content-carrusel_secundario_home .field--name-field-descripcion {
    position: relative;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

/* Enlace: cubre TODO el slide, siempre clicable. Texto oculto
   visualmente (color transparent) pero sigue accesible. */
body.path-frontpage .block-content-carrusel_secundario_home .field--name-field-enlace-a-la-pagina {
    position: absolute;
    inset: 0;
    z-index: 3;
}
body.path-frontpage .block-content-carrusel_secundario_home .field--name-field-enlace-a-la-pagina a {
    position: absolute;
    inset: 0;
    display: block;
    color: transparent;
    font-size: 0;
}

/* Flechas prev/next: círculo oscuro sobre la imagen, flecha blanca. */
body.path-frontpage .block-content-carrusel_secundario_home .slick-prev,
body.path-frontpage .block-content-carrusel_secundario_home .slick-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
    border: none !important;
    font-size: 0 !important;
    color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
body.path-frontpage .block-content-carrusel_secundario_home .slick-prev:hover,
body.path-frontpage .block-content-carrusel_secundario_home .slick-next:hover {
    background-color: rgba(0, 0, 0, 0.8) !important;
}
body.path-frontpage .block-content-carrusel_secundario_home .slick-prev { left: 20px !important; }
body.path-frontpage .block-content-carrusel_secundario_home .slick-next { right: 20px !important; }

body.path-frontpage .block-content-carrusel_secundario_home .slick-prev::before,
body.path-frontpage .block-content-carrusel_secundario_home .slick-next::before {
    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    display: block !important;
}
body.path-frontpage .block-content-carrusel_secundario_home .slick-prev::before { content: "❮" !important; }
body.path-frontpage .block-content-carrusel_secundario_home .slick-next::before { content: "❯" !important; }

/* ============================================================ */
/* 2. SÍGUENOS (tarjetas de redes sociales, formato 4:5)         */
/* ============================================================ */
/* Vista "tarjeta_home" (block_1): imagen + título + enlace.
   El "cuántas se muestran" y "cuáles son las más recientes" es
   configuración de la Vista (Views UI), no CSS — ver notas en la
   respuesta. Aquí solo se resuelve la parte visual: tarjetas
   parejas en formato 4:5 (1080x1350), pensado para las imágenes
   que se van a publicar también en redes sociales.

   Decisión: solo se ve la imagen — título y el texto del enlace
   quedan en el HTML (accesibilidad, lectores de pantalla) pero
   invisibles. La tarjeta entera es clicable porque el enlace se
   estira para cubrirla completa. */

/* Alinea el contenedor con el logo/menú del encabezado: misma
   fórmula exacta que usa "#header .navbar-expand-md" en style.css
   (max-width:1200px + mínimo 20px de aire), para que el borde
   quede pixel-perfecto sin importar el tamaño de pantalla. Con
   max-width + margin:auto solo, quedaba ~7px corrido porque el
   cálculo se hacía contra el ancho del contenedor padre, no
   contra el viewport real como hace el header. */
body.path-frontpage .block-views-blocktarjeta-home-block-1 {
    padding-left: max(20px, calc((100vw - 1200px) / 2));
    padding-right: max(20px, calc((100vw - 1200px) / 2));
    box-sizing: border-box;
    margin-top: 60px; /* aire entre el carrusel y esta sección */
}

/* Título "Síguenos": mismo rojo del logo (--color-primary-red de
   variables.css), más grande y con más peso. */
body.path-frontpage .block-views-blocktarjeta-home-block-1 > h2 {
    color: #f5333f;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 24px;
}

/* OJO — corrección: "rounded-4 shadow-sm overflow-hidden" viene
   configurado en la Vista SOLO como envoltorio del campo Imagen,
   no de la tarjeta completa (título y enlace quedan afuera, como
   hermanos de ese div, no hijos). La tarjeta real es ".views-row"
   — se le pone aquí el fondo/redondeado/sombra, y se neutraliza
   el estilo duplicado que trae la imagen para que no choquen. */
/* CORRECCIÓN: revisé y las clases "row"/"col-md-3"/"col-6" que
   trae esta vista NO tienen ninguna regla de Bootstrap real
   detrás en este sitio (lo confirmé buscando en todas las hojas
   de estilo cargadas) — están en el HTML pero no hacen nada. Es
   el mismo caso que ya nos pasó con "Lab en Movimiento": no se
   puede confiar en esas clases, hay que forzar la cuadrícula
   directamente con CSS Grid. */
body.path-frontpage .block-views-blocktarjeta-home-block-1 .view-content.row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 768px) {
    body.path-frontpage .block-views-blocktarjeta-home-block-1 .view-content.row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
body.path-frontpage .block-views-blocktarjeta-home-block-1 .views-row {
    position: relative; /* referencia para el enlace, que cubre toda la tarjeta */
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.path-frontpage .block-views-blocktarjeta-home-block-1 .views-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
body.path-frontpage .block-views-blocktarjeta-home-block-1 .rounded-4 {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Imagen: 4:5 siempre, sin importar el tamaño real subido — se
   recorta por CSS aquí, pero para que no se vea pixelada conviene
   además crear un Image Style 1080x1350 (igual al que ya existe
   para el carrusel) y usarlo en el campo de la vista en vez de
   "large" (361x480 hoy, se queda corto si la tarjeta crece). */
body.path-frontpage .block-views-blocktarjeta-home-block-1 .field--name-field-media-image {
    aspect-ratio: 1080 / 1350;
    width: 100%;
    overflow: hidden;
}
body.path-frontpage .block-views-blocktarjeta-home-block-1 .field--name-field-media-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Título: presente para accesibilidad, nunca visible. */
body.path-frontpage .block-views-blocktarjeta-home-block-1 .views-field-field-noticias-titulo {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Enlace: se estira para cubrir TODA la tarjeta (imagen incluida),
   así la tarjeta completa es clicable, no solo un texto pequeño.
   El texto del enlace ("Visita nuestra cuenta de Instagram") sigue
   ahí para lectores de pantalla, pero visualmente invisible. */
body.path-frontpage .block-views-blocktarjeta-home-block-1 .views-field-field-noticia-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
}
body.path-frontpage .block-views-blocktarjeta-home-block-1 .views-field-field-noticia-link .field-content,
body.path-frontpage .block-views-blocktarjeta-home-block-1 .views-field-field-noticia-link a {
    display: block;
    width: 100%;
    height: 100%;
    color: transparent;
    font-size: 0;
}

/* ============================================================ */
/* 3. EXPLORA — RECONSTRUIDA DESDE CERO                          */
/* ============================================================ */
/* La sección vieja (vista "carrusel_explora", dos displays Slick
   sincronizados en un layout de dos columnas) se borró por
   completo — tenía un bug irresoluble de ancho (~122.000px) en el
   carrusel de texto. Estructura nueva, más simple, en UNA sola
   sección de una columna (layout--onecol), con 3 bloques
   apilados:
     1. .explora-header: título + subtítulo (bloque de texto,
        ya montado — estilos abajo).
     2. Rotador de artículo destacado (Vista + Slick, PENDIENTE:
        ver tarea "Reconstruir carrusel de texto" — se prueba
        aislado antes de integrarlo aquí).
     3. Tarjetas de tema (bloque estático, sin Vista ni Slick,
        cada tarjeta enlaza a la página de categoría) — PENDIENTE.
   El bloque de título usa una clase propia (.explora-header)
   puesta a mano en el campo Cuerpo (formato "HTML completo"), NO
   la clase genérica de Layout Builder — esa se repite en todas
   las secciones de una columna del sitio y hubiera contaminado
   otras secciones. */

/* Título "Explora": mismo rojo que el botón "Haz Parte" de
   Construyendo Futuro (pedido explícito, para compartir acento
   entre ambas secciones). */
body.path-frontpage .explora-header h2 {
    color: #f5333f;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 8px;
}
/* Subtítulo ("Encuentra artículos..."): misma configuración medida
   en vivo en el párrafo de Lab en Movimiento (18px, #555555,
   line-height 1.6) — pedido explícito para unificar el "texto de
   introducción" de ambas secciones. */
body.path-frontpage .explora-header p {
    font-size: 18px;
    color: #555555;
    line-height: 1.6;
    /* Antes tenía 30px — sumado al "gap" del grid dejaba el título
       y el rotador de artículo demasiado separados, como si fueran
       de dos secciones distintas (reportado explícitamente). */
    margin-bottom: 0;
}

/* --- Rotador de artículo destacado: Vista "explora_articulo_destacado",
   bloque "block-views-blockexplora-articulo-destacado-block-1".
   Formato Slick con "Vanilla slick" activado + optionset
   "explora_rotador" (Filas=0 — el bug de 122.000px del carrusel
   viejo era por tener Filas=1, advertencia oficial del módulo
   Slick para versiones >1.9.0). Verificado en vivo: ancho del
   track exacto (9 slides × 1351px = 12.159px, sin corrupción). */

/* Layout de 2 columnas pedido explícitamente (mockup de
   referencia): título+rotador a la izquierda, tarjetas de tema a
   la derecha, ocupando las 2 filas. Layout Builder coloca los 3
   bloques como HERMANOS dentro de la misma región de una columna
   (".layout__region--content" — clase genérica reutilizada en
   todo el sitio), así que se usa ":has(.explora-header)" para
   convertir SOLO esa región específica en grid, sin tocar otras
   secciones de una columna. Requiere un navegador con soporte de
   :has() (Chrome/Firefox/Safari actuales lo soportan). */
body.path-frontpage .layout__region--content:has(.explora-header) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    align-items: start;
    /* Fila reducida a 12px (antes eran 30px, iguales a la de
       columna) — el título y el rotador se veían "de secciones
       distintas" por tanto espacio junto. La separación entre
       columna de texto y columna de imágenes sigue en 30px. */
    row-gap: 12px;
    /* Necesario para que ".explora-temas" (más abajo) se pueda
       centrar verticalmente con position:absolute + top:50%,
       tomando este elemento como referencia. */
    position: relative;
}
body.path-frontpage .layout__region--content:has(.explora-header) .explora-header,
body.path-frontpage .layout__region--content:has(.explora-header) .block-views-blockexplora-articulo-destacado-block-1 {
    max-width: none;
    margin: 0;
    padding: 0;
    grid-column: 1;
    /* CAUSA RAÍZ de un "grid blowout" que costó encontrar: por
       defecto un hijo de grid tiene "min-width: auto", que respeta
       el ancho MÁXIMO de su contenido intrínseco. El track de
       Slick trae un ancho fijo en píxeles altísimo (ver nota de
       arriba, ~12.000px) puesto por JS — sin este min-width:0, esa
       cifra se filtraba hacia arriba y la columna 1 del grid se
       inflaba a más de 8.000px de ancho real, aunque visualmente
       el overflow quedara oculto. Verificado en vivo antes/después
       con getComputedStyle(...).gridTemplateColumns. */
    min-width: 0;
}
body.path-frontpage .layout__region--content:has(.explora-header) .explora-header {
    grid-row: 1;
}
body.path-frontpage .layout__region--content:has(.explora-header) .block-views-blockexplora-articulo-destacado-block-1 {
    grid-row: 2;
}
/* Las tarjetas NO participan del grid (a propósito). Probamos
   primero "grid-column:2; grid-row:1/span 2; align-self:center" y
   NO funcionó: cuando un ítem de grid abarca 2 filas "auto", el
   navegador vuelca toda su altura en la PRIMERA fila en vez de
   repartirla — la fila 1 (título) terminaba con la altura exacta
   de la tarjeta más alta, sin margen para centrar nada dentro
   (verificado en vivo: cambiar align-self de "center" a "end" no
   movía ni un píxel la posición). Solución robusta: sacarlas del
   flujo de grid con position:absolute y centrarlas con
   top:50%/translateY(-50%) contra el contenedor completo — así
   no importa cuánto midan el título o el rotador. */
body.path-frontpage .layout__region--content:has(.explora-header) .explora-temas {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: calc(50% - 30px);
}
@media (max-width: 900px) {
    body.path-frontpage .layout__region--content:has(.explora-header) {
        grid-template-columns: 1fr;
    }
    body.path-frontpage .layout__region--content:has(.explora-header) .explora-header,
    body.path-frontpage .layout__region--content:has(.explora-header) .block-views-blockexplora-articulo-destacado-block-1 {
        grid-column: 1;
    }
    body.path-frontpage .layout__region--content:has(.explora-header) .explora-temas {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 20px;
    }
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 {
    margin-bottom: 60px;
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .views-field-title a {
    font-size: 28px;
    font-weight: 800;
    color: #f5333f;
    text-decoration: none;
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .views-field-title a:hover {
    color: #b8262f;
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .views-field-body {
    font-size: 16px;
    color: #555555;
    line-height: 1.5;
    margin-top: 8px;
    margin-bottom: 20px;
}
/* El wrapper que Slick necesita como "contenedor posicionado" para
   las flechas NO es ".slick-slider"/".slick__slider" (ahí solo
   vive el track) — las flechas (".slick__arrow") son HERMANAS de
   ese wrapper, ambas dentro de este elemento exterior. Verificado
   en vivo: sin este position:relative aquí, "bottom:0" de las
   flechas se calculaba contra el elemento raíz del documento
   completo y aparecían miles de píxeles fuera de pantalla. */
body.path-frontpage .slick--optionset--explora-rotador {
    position: relative;
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .slick-slider {
    padding-bottom: 55px;
}
/* Botones circulares con flecha dibujada en CSS (triángulo con
   border-trick, no depende de ninguna fuente de íconos). El texto
   "Previous/Next arrow" del optionset se dejó vacío a propósito
   (pedido explícito: quitar "Anterior"/"Siguiente") — font-size:0
   aquí es solo un respaldo por si ese campo se vuelve a llenar. */
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .slick-arrow {
    position: absolute;
    bottom: 0;
    top: auto;
    transform: none;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: #5add8b;
    cursor: pointer;
    font-size: 0;
    padding: 0;
    transition: background-color 0.2s ease;
    z-index: 10;
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .slick-arrow:hover {
    background-color: #6ee89c;
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .slick-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .slick-prev::before {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 9px solid #0b2214;
    transform: translate(-40%, -50%);
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .slick-next::before {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid #0b2214;
    transform: translate(-60%, -50%);
}
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .slick-prev { left: 0; }
body.path-frontpage .block-views-blockexplora-articulo-destacado-block-1 .slick-next { left: 54px; }

/* --- Tarjetas de tema: bloque estático (Basic block, HTML
   completo), clase ".explora-temas" puesta a mano. Cada tarjeta
   enlaza a la página real del término de taxonomía "Etiquetas"
   (ej. /taxonomy/term/2 = Cultura) — esa vista ya lista el
   contenido más reciente primero por defecto, sin desarrollo
   adicional. Las fotos ya traían el nombre de la categoría
   superpuesto (se reusaron las mismas imágenes de los artículos
   de prueba). NOTA de contenido, no de CSS: si hay dos tarjetas
   con el mismo href (dos fotos de "Cultura", por ejemplo), no las
   pongas una junto a la otra en el HTML — CKEditor fusiona en un
   solo <a> dos enlaces consecutivos con el mismo href al guardar.
   Sepáralas con otra tarjeta en medio. */
body.path-frontpage .explora-temas {
    display: flex;
    gap: 14px;
}
body.path-frontpage .explora-tema-tile {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Mismo placeholder que Lab en Movimiento (Sección 4): evita
       el hueco blanco mientras la imagen (loading lazy por
       defecto del navegador) todavía no ha pintado. */
    background-color: #1c2b23;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.path-frontpage .explora-tema-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
body.path-frontpage .explora-tema-tile img {
    aspect-ratio: 1080 / 1350;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================ */
/* 4. LAB EN MOVIMIENTO (dos columnas: texto | imágenes)         */
/* ============================================================ */
body.path-frontpage .layout--twocol-section--33-67 .layout__region--first {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}
body.path-frontpage .layout--twocol-section--33-67 .layout__region--first p {
    text-align: left;
}

/* Mismo aire que hay entre el carrusel y Síguenos. */
body.path-frontpage .layout--twocol-section--33-67 {
    margin-top: 60px;
}

/* Botón "Conoce Más": antes era un contorno pálido (border
   #a2ffaf puesto a mano en el contenido) que solo se rellenaba de
   verde al pasar el mouse. Pedido explícito: que se vea "más
   llamativo" y con aspecto 3D — se pasa a relleno sólido verde
   siempre (no solo en hover), con una sombra de "borde inferior"
   sólido (el truco clásico de botón 3D: una sombra sin difuminar,
   del mismo tono pero más oscuro, simulando el canto del botón) +
   una sombra difusa para profundidad. Al pasar el mouse se eleva;
   al hacer click se "presiona" (baja y pierde sombra). Esto
   sobrescribe el estilo en línea que trae el contenido — es un
   cambio de diseño real, no solo un ajuste de color. */
body.path-frontpage .layout--twocol-section--33-67 .layout__region--first a {
    background-color: #5add8b !important;
    border: 2px solid #5add8b !important;
    color: #0b2214 !important;
    font-weight: 800;
    box-shadow: 0 6px 0 #3f9b61, 0 10px 18px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
body.path-frontpage .layout--twocol-section--33-67 .layout__region--first a:hover {
    background-color: #6ee89c !important;
    border-color: #6ee89c !important;
    color: #0b2214 !important;
    transform: translateY(-3px);
    box-shadow: 0 9px 0 #3f9b61, 0 16px 24px rgba(0, 0, 0, 0.25);
}
body.path-frontpage .layout--twocol-section--33-67 .layout__region--first a:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #3f9b61, 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Fila de 4 (decisión: se ven más angostas que las de Síguenos
   porque esta columna es solo 67% del ancho de la página, no el
   100% — se aceptó ese trade-off en vez de rediseñar la sección).
   El grid se fuerza en ".view-content.row" (el contenedor real de
   las 4 filas), NO en ".row.d-inline-flex" — esa clase la trae
   CADA fila por separado (una por imagen), no es un contenedor
   compartido. Ponerlo ahí solo agrupaba 1 imagen a la vez. */
body.path-frontpage .seccion-lab-movimiento .view-content.row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
}
@media (max-width: 768px) {
    body.path-frontpage .seccion-lab-movimiento .view-content.row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
body.path-frontpage .seccion-lab-movimiento .row.d-inline-flex {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    /* CAUSA RAÍZ DEL BUG "30px de espacio en blanco arriba/abajo":
       este div es el item real del grid (hijo directo de
       ".view-content.row"). Como esa regla no fija "align-items",
       el navegador usa el valor por defecto ("stretch") y, al medir
       el contenido intrínseco anidado (la imagen con aspect-ratio,
       varios niveles más abajo), termina resolviendo la fila del
       grid en 270px en vez de 240px — estira las 4 tarjetas por
       igual a esa altura de más. "align-self: start" + "height:
       auto" evita que este contenedor dependa de esa medición del
       grid: se dimensiona por su propio contenido. */
    height: auto !important;
    align-self: start !important;
}
body.path-frontpage .seccion-lab-movimiento .row.d-inline-flex > * {
    max-width: 100% !important;
    flex: none !important;
    width: 100% !important;
    margin: 0 !important;
    /* Mismo lenguaje visual que las tarjetas de "Síguenos":
       redondeado + sombra + overflow:hidden para recortar la
       imagen dentro de esa forma. */
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Fija el alto de la TARJETA (no solo de la imagen) directamente
       por su propio ancho, en vez de depender de cómo el grid mide
       el contenido anidado — esto es lo que realmente cierra el
       espacio en blanco de 30px. */
    aspect-ratio: 1080 / 1350 !important;
    height: auto !important;
    /* Fondo placeholder mientras la imagen (loading="lazy") no ha
       terminado de descargar: sin esto, la tarjeta se ve blanca por
       completo hasta que la imagen pinta, dando la sensación de
       "recorte" o "espacio en blanco arriba" que se reportó. Con un
       fondo oscuro de marca, ese instante de espera se disimula en
       vez de verse como un error. */
    background-color: #1c2b23;
}
body.path-frontpage .seccion-lab-movimiento .row.d-inline-flex > *:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
/* Mismo bug que ya resolvimos en el carrusel: el campo interno
   del Media (field--name-field-media-image, clase genérica de
   Drupal) trae float:left por defecto. Un elemento flotado se
   dimensiona por shrink-to-fit — si la imagen no ha cargado su
   primer pixel, no tiene ancho propio, y como el <img> depende de
   "100%" DE ESE contenedor, ambos se quedan en 0px. Se anula el
   float solo aquí, sin tocar el resto del sitio. */
body.path-frontpage .seccion-lab-movimiento .field--name-field-media-image,
body.path-frontpage .seccion-lab-movimiento .field--name-field-media-image .field__item {
    float: none !important;
    width: 100% !important;
    height: 100% !important;
}
body.path-frontpage .seccion-lab-movimiento img {
    /* 4:5 — misma proporción que Síguenos, para que se vean
       "de la misma familia" aunque terminen más angostas. */
    aspect-ratio: 1080 / 1350;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Nota: esta vista ("carrusel_imagenes_inicio") hoy es una
   cuadrícula fija sin Slick — no tiene flechas ni las reordena.
   Para lograr "la última que se suba se ve primero" y que
   aparezcan flechas al pasar de 4 imágenes, hay que:
     1. Agregar un criterio de ordenación en la vista (Views UI):
        "Fecha de creación" (o "Fecha de cambio"), descendente.
     2. Cambiar el formato de la vista de cuadrícula a Slick,
        con "Slides to show: 4" — igual a como configuramos el
        carrusel de Explora.
   Esto no se puede resolver con CSS, es configuración de Views. */

/* ============================================================ */
/* 5. CURSOS SUBA-TIC                                            */
/* ============================================================ */
/* (Corrección de nombre: esta sección NO es "Construyendo Futuro"
   — ese es un bloque aparte, ver Sección 7. El nombre de aquí
   quedó mal puesto la primera vez que se migró este CSS.) */

/* Vista "vista-carrusel-cursos": el nombre dice "carrusel" pero
   revisé el DOM en vivo y NO es un Slick (no hay .slick-track) —
   son 7 ".views-row" sueltas dentro de ".view-content.row" (el
   mismo caso "row" inerte de Bootstrap que ya vimos en Síguenos y
   Lab en Movimiento: la clase no trae ninguna regla real detrás).
   Sin CSS, esas 7 tarjetas se apilan una debajo de otra a lo largo
   de casi 2.900px.

   Decisión: como no hay Slick configurado (ni flechas, ni
   "slides to show"), en vez de fingir un carrusel las acomodo en
   una cuadrícula fija de 4 columnas (pedido explícito: "4x4") —
   con 7 tarjetas queda en 2 filas (4 + 3). Si más adelante quieres
   que deslice con flechas de verdad, eso es igual que con Lab en
   Movimiento: hay que convertir la vista a formato Slick en Views
   UI, no se resuelve con CSS. */

/* Contenedor: mismo ancho/margen que "Construyendo Futuro"
   (max-width:1200px, centrado, padding lateral de 15px) — antes
   esta vista no tenía NINGÚN contenedor propio, por eso quedaba
   pegada (0px) contra la Franja Roja de abajo y con apenas 39px
   respecto a Construyendo Futuro arriba. El padding lateral de
   20px que tenían el encabezado y la cuadrícula se quita de ahí
   porque ahora ese espacio lo da este contenedor una sola vez —
   tenerlo en los dos niveles habría dejado un margen más ancho
   aquí que en el resto de secciones. */
body.path-frontpage .vista-carrusel-cursos {
    max-width: 1200px;
    margin: 80px auto 100px;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Encabezado "Cursos Suba-tic" + botón "Inscríbete aquí": el
   marcado YA existía en el DOM con .header-cursos-flex,
   h2.titulo-cursos y un enlace dentro. El enlace ya apunta a
   gerson.gov.co (dominio externo) y por eso el estándar sitewide
   de enlaces externos le pone target="_blank" automáticamente —
   no hace falta nada más para que abra en pestaña nueva.

   CORRECCIÓN: la primera versión de este CSS apuntaba solo a
   ".btn-inscribete-cyan" — cuando editaste el texto del encabezado
   en Views UI para cambiar "Suba-tic" por "Suba-Tech", el editor
   de Drupal renombró (o perdió) esa clase y el botón se quedó sin
   estilo (se veía como enlace de texto rojo). Se agrega el mismo
   selector de respaldo por estructura que ya usamos en "Haz Parte"
   (".header-cursos-flex a"), así que de ahora en adelante el botón
   se sigue viendo bien aunque la clase cambie otra vez al editar
   el contenido. */
body.path-frontpage .vista-carrusel-cursos .header-cursos-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    /* Espacio real entre el encabezado y la cuadrícula de cursos.
       OJO: el ícono de cada tarjeta se eleva -80px sobre el borde
       superior de su propia tarjeta (ver ".vista-carrusel-cursos
       img", más abajo) — con 50px de margen, el ícono terminaba
       subiendo 30px MÁS ARRIBA que el borde del encabezado y lo
       tocaba. Con 110px de margen, al ícono le sobran ~30px de
       aire real después de restar esos 80px que sube. */
    margin-bottom: 110px;
}
body.path-frontpage .vista-carrusel-cursos .titulo-cursos {
    margin: 0;
    text-align: left;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    color: #1a1a1a;
}
body.path-frontpage .vista-carrusel-cursos .titulo-cursos .cyan {
    color: #5add8b;
}
/* Botón 3D: relleno sólido + sombra de "borde inferior" sólido
   (mismo lenguaje que "Conoce Más" y "Haz Parte") para que se vea
   más llamativo, con efecto de elevar al pasar el mouse y de
   "presionarse" al hacer click. */
body.path-frontpage .btn-inscribete-cyan,
body.path-frontpage .vista-carrusel-cursos .header-cursos-flex a {
    background-color: #5add8b;
    color: #0b2214;
    padding: 12px 35px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 6px 0 #3f9b61, 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.25s ease;
    display: inline-block;
}
body.path-frontpage .btn-inscribete-cyan:hover,
body.path-frontpage .vista-carrusel-cursos .header-cursos-flex a:hover {
    background-color: #6ee89c;
    transform: translateY(-3px);
    box-shadow: 0 9px 0 #3f9b61, 0 16px 26px rgba(0, 0, 0, 0.25);
}
body.path-frontpage .btn-inscribete-cyan:active,
body.path-frontpage .vista-carrusel-cursos .header-cursos-flex a:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #3f9b61, 0 4px 10px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
    body.path-frontpage .vista-carrusel-cursos .header-cursos-flex {
        flex-direction: column;
        text-align: center;
    }
    body.path-frontpage .vista-carrusel-cursos .titulo-cursos {
        text-align: center;
    }
}

/* Cuadrícula de 4 columnas fijas ("4x4"). Con 7 tarjetas, la fila
   se completa en dos líneas (4 + 3); "justify-items:center" evita
   que la última fila incompleta se vea estirada de un lado. */
body.path-frontpage .vista-carrusel-cursos .view-content.row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    gap: 50px 24px;
}

/* Tarjeta — gris claro consistente con el resto de la paleta del
   sitio (mismo tono que se usaba en el diseño anterior, ahora
   escrito directo en hexadecimal: las variables "--pf-*" de las
   que venía este CSS NUNCA se movieron al home.css actual — vivían
   solo en un archivo viejo ("Nuevo grupo/css/home.css") que ya no
   se carga. Usarlas tal cual habría dejado las tarjetas sin fondo
   ni color de texto. */
/* CAUSA RAÍZ del "amontonamiento": faltaba box-sizing:border-box.
   Sin esto, "max-width:260px" solo mide el contenido — el padding
   (20px a cada lado = 40px) se SUMA por fuera, así que la tarjeta
   terminaba renderizando a 300px real, más ancha que su propia
   columna del grid (274.5px), y por eso se montaban unas encima
   de otras en vez de tener el "gap" de separación. Lo confirmé
   midiendo en vivo: computed width decía 260px, pero el
   getBoundingClientRect() real medía 300px — con box-sizing:
   border-box, el padding queda DENTRO de esos 260px. */
body.path-frontpage .vista-carrusel-cursos .views-row {
    box-sizing: border-box;
    background-color: #ebeaea;
    border-radius: 12px;
    padding: 20px 20px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    width: 100%;
    max-width: 260px;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}
body.path-frontpage .vista-carrusel-cursos .views-row:hover {
    transform: translateY(-8px);
    background-color: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Orden visual: ícono arriba, texto abajo. */
body.path-frontpage .vista-carrusel-cursos .views-field-field-icono-del-curso {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}
body.path-frontpage .vista-carrusel-cursos .views-field-title {
    order: 2;
    font-size: 16px;
    color: #1a1a1a;
    margin: 0;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    display: block;
}

/* "Cupo completo" — hallazgo al revisar el DOM en vivo: este campo
   viene en las 7 tarjetas (no estaba contemplado en el CSS
   anterior) y hoy se ve como un "0" suelto sin estilo en cada
   tarjeta, porque el valor es "0" en las 7 sin excepción — no
   parece un dato real de cupos disponibles, sino un campo sin
   configurar. Lo oculto por ahora para que no se vea ese "0"
   flotando; si el campo sí debe mostrar cupos reales, hay que
   revisar por qué siempre trae 0 antes de volver a mostrarlo. */
body.path-frontpage .vista-carrusel-cursos .views-field-field-cupo-completo {
    display: none;
}

/* Ícono flotante (se eleva sobre el borde superior de la tarjeta). */
body.path-frontpage .vista-carrusel-cursos img,
body.path-frontpage .vista-carrusel-cursos svg {
    height: 120px;
    width: 120px;
    object-fit: contain;
    margin: -80px auto 20px;
    display: block;
    position: relative;
    z-index: 5;
    padding: 10px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    filter: drop-shadow(0 0 5px rgba(0, 231, 255, 0.3));
    transition: all 0.4s ease;
}
body.path-frontpage .vista-carrusel-cursos .views-row:hover img,
body.path-frontpage .vista-carrusel-cursos .views-row:hover svg {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px #00e7ff) drop-shadow(0 0 15px rgba(0, 231, 255, 0.6));
}

/* Limpia nombres de archivo que Drupal puede meter junto al ícono. */
body.path-frontpage .vista-carrusel-cursos .field--name-name {
    display: none;
}

@media (max-width: 768px) {
    body.path-frontpage .vista-carrusel-cursos .view-content.row {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 16px;
        padding-top: 50px;
    }
    body.path-frontpage .vista-carrusel-cursos .views-row {
        width: 100%;
        max-width: 300px;
    }
}

/* ============================================================ */
/* 6. FRANJA ROJA                                                */
/* ============================================================ */
/* Mismo full-bleed que el carrusel y el encabezado: "100vw" solo
   (con o sin transform) incluye el ancho de la scrollbar vertical
   y reabre el scroll horizontal que ya cerramos en toda la web —
   por eso se usa "calc(100vw - var(--sbw))", igual que en
   style.css y en la Sección 1 de este archivo, en vez de la
   técnica anterior (translateX(-50%) sobre 100vw sin descontar). */
body.path-frontpage .franja-roja-subalab {
    background-color: #f5333f;
    color: #ffffff;
    width: calc(100vw - var(--sbw));
    max-width: calc(100vw - var(--sbw));
    margin-left: calc(50% - 50vw + (var(--sbw) / 2));
    margin-right: calc(50% - 50vw + (var(--sbw) / 2));
    padding: 15px 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 60px;
}

/* ============================================================ */
/* 7. CONSTRUYENDO FUTURO (imagen + texto)                       */
/* ============================================================ */
/* Este CSS es el que ya tenías (versión anterior), migrado tal
   cual a la convención actual (prefijo "body.path-frontpage",
   colores directos en vez de "var(--pf-*)" — esas variables
   nunca se movieron al home.css nuevo, solo existían en un
   archivo viejo que ya no se carga; usarlas tal cual habría
   dejado el fondo gris y el rojo sin color). Verifiqué en el DOM
   real: las clases existen todas (fondo, sección, contenedores,
   ambas imágenes), y las dos imágenes son PNG de 1000x800 —
   diseñadas para superponerse en el mismo lienzo. */

/* Fondo gris a todo el ancho de la ventana: técnica de "box-shadow
   expandido + clip-path", MEJOR que el "width:100vw + margin" que
   usamos en otras secciones — un box-shadow no cuenta como
   contenido desbordado para el navegador, así que no reabre el
   scroll horizontal que corregimos en el resto del sitio con
   --sbw. Se conserva igual porque ya estaba bien resuelto. */
body.path-frontpage .fondo-construyendo-futuro {
    background-color: #ebeaea;
    box-shadow: 0 0 0 100vmax #ebeaea;
    clip-path: inset(0 -100vmax);
    padding: 60px 0 100px;
    /* Más aire respecto a "Lab en Movimiento": antes el único
       espacio entre ambas secciones era este padding-top de 60px;
       se suma un margin-top para que la separación sea deliberada
       y no dependa de dónde termine el contenido de la sección
       anterior. */
    margin-top: 40px;
}

body.path-frontpage .seccion-construyendo-futuro {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

body.path-frontpage .contenedor-imagenes {
    position: relative;
    width: 55%;
    min-height: 600px;
}

/* "height: auto" es obligatorio aquí: ambas imágenes traen los
   atributos HTML width="1000" height="800" — sin esto, el
   navegador respeta el "800" literal del HTML y la imagen se
   estira verticalmente sin importar cuánto se angoste por CSS
   (lo confirmé en vivo: sin este ajuste, la imagen quedaba fija
   en 800px de alto aunque el ancho bajara a ~54px). */
body.path-frontpage .img-letras {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: auto;
    z-index: 2;
}

body.path-frontpage .img-señor {
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 88%;
    height: auto;
    z-index: 1;
}

body.path-frontpage .contenedor-texto {
    width: 45%;
    padding-left: 30px;
    padding-right: 30px;
}

body.path-frontpage .texto-futuro {
    font-size: 2.2rem;
    font-weight: 400;
    color: #444444;
    line-height: 1.4;
    margin-bottom: 15px;
}

body.path-frontpage .resaltado-rojo {
    background-color: #f5333f;
    color: #ffffff;
    padding: 2px 15px;
    display: inline-block;
    font-weight: bold;
    margin-top: 10px;
}

body.path-frontpage .parrafo-futuro {
    color: #555555;
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Botón "Haz parte": revisé el DOM real y hoy NO trae la clase
   "btn-haz-parte" (el editor no la aplicó), por eso se deja el
   selector de respaldo por estructura (".contenedor-texto a"),
   que sí resuelve el botón real. Apunta a gerson.gov.co (dominio
   externo) — ya abre en pestaña nueva solo por el estándar
   sitewide de enlaces externos, no hay que configurar nada más.

   3D + relleno sólido (mismo lenguaje que "Conoce Más" e
   "Inscríbete aquí"): este enlace trae estilo en línea puesto por
   quien redactó el contenido (border:2px solid rgb(211,47,47),
   color:rgb(85,85,85), sin !important) — como acá SÍ hace falta
   ganarle ese estilo para unificar el rojo exacto del sitio
   (#f5333f) y pasar a relleno sólido, se usa !important aquí,
   que es justamente el caso para el que reservamos esa regla. */
body.path-frontpage .btn-haz-parte,
body.path-frontpage .contenedor-texto a {
    display: inline-block;
    border: 2px solid #f5333f !important;
    color: #ffffff !important;
    background-color: #f5333f !important;
    padding: 10px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 6px 0 #b8262f, 0 10px 18px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
body.path-frontpage .btn-haz-parte:hover,
body.path-frontpage .contenedor-texto a:hover {
    background-color: #ff5c67 !important;
    border-color: #ff5c67 !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 9px 0 #b8262f, 0 16px 24px rgba(0, 0, 0, 0.25);
}
body.path-frontpage .btn-haz-parte:active,
body.path-frontpage .contenedor-texto a:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #b8262f, 0 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    body.path-frontpage .seccion-construyendo-futuro {
        flex-direction: column;
        text-align: center;
    }
    body.path-frontpage .contenedor-imagenes {
        width: 100%;
        min-height: auto;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    body.path-frontpage .img-letras {
        position: relative;
        width: 80%;
        margin: 0 auto;
    }
    body.path-frontpage .img-señor {
        position: relative;
        width: 100%;
        margin: -20px auto 0;
        bottom: auto;
        left: auto;
    }
    body.path-frontpage .contenedor-texto {
        width: 100%;
        padding: 0 15px;
    }
}

/* Fin de archivo — home.css v3 */