hijo,
por eso forzamos también los descendientes. */
.sole-info .etiqueta-tiempo-2022,
.sole-info .etiqueta-tiempo-2023,
.sole-info .tab-preguntas-menu {
background-color: #fff !important;
border-radius: 10px !important;
transition: background-color .2s, color .2s;
-webkit-text-fill-color: currentColor;
}
.sole-info .etiqueta-tiempo-2022,
.sole-info .etiqueta-tiempo-2023,
.sole-info .etiqueta-tiempo-2022 *,
.sole-info .etiqueta-tiempo-2023 *,
.sole-info .tab-preguntas-menu,
.sole-info .tab-preguntas-menu * {
color: #000 !important;
}
/* Las pestañas de preguntas necesitan algo de aire para verse como píldora */
.sole-info .tab-preguntas-menu {
padding: 6px 14px !important;
margin: 0 6px 6px 0;
display: inline-block;
}
.sole-info .etiqueta-tiempo-2022:hover,
.sole-info .etiqueta-tiempo-2023:hover,
.sole-info .tab-preguntas-menu:hover,
.sole-info .etiqueta-tiempo-2022.w--current,
.sole-info .etiqueta-tiempo-2023.w--current,
.sole-info .tab-preguntas-menu.w--current {
background-color: #000 !important;
}
.sole-info .etiqueta-tiempo-2022:hover,
.sole-info .etiqueta-tiempo-2023:hover,
.sole-info .etiqueta-tiempo-2022:hover *,
.sole-info .etiqueta-tiempo-2023:hover *,
.sole-info .tab-preguntas-menu:hover,
.sole-info .tab-preguntas-menu:hover *,
.sole-info .etiqueta-tiempo-2022.w--current,
.sole-info .etiqueta-tiempo-2023.w--current,
.sole-info .etiqueta-tiempo-2022.w--current *,
.sole-info .etiqueta-tiempo-2023.w--current *,
.sole-info .tab-preguntas-menu.w--current,
.sole-info .tab-preguntas-menu.w--current * {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* --- B. Mapas (grandes-preguntas) que NO llegaban al borde en 2022/2023.
El diseño dejaba .mapa-comunidad.wlh al 75% del ancho de su celda grid;
lo llevamos al 100% para que el iframe ocupe hasta el borde como el 2024. */
.sole-info .mapa-comunidad.wlh { width: 100% !important; }
/* --- C. Flechas de TESTIMONIOS más grandes y del color del título (turquesa).
Solo dentro de .fs-section para no tocar el resto de sliders. */
.sole-info .fs-section .splide__arrow {
width: 4.4em;
height: 4.4em;
opacity: 1;
}
.sole-info .fs-section .splide__arrow svg {
width: 3.6em;
height: 3.6em;
fill: #26bfb8; /* --color-principal--turquesa (color de .fs-frase) */
filter: none;
}
.sole-info .fs-section .splide__arrow--prev { left: 4px; }
.sole-info .fs-section .splide__arrow--next { right: 4px; }
/* --- D. HABILIDADES: las fotos grandes (wlh-tecnologia / lightbox) salían a su
tamaño natural y se desbordaban, encimándose con las tarjetas vecinas. Se
recortan dentro de su contenedor (cover), igual que el diseño previsto. */
.sole-info .contenedor-habilidades { overflow: hidden; }
.sole-info .foto-comportamientos { overflow: hidden; }
.sole-info .foto-comportamientos .lightbox-link-3 {
display: block;
width: 100%;
height: 100%;
}
.sole-info .wlh-tecnologia {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
}
/* La nota "haz click sobre la foto" superpuesta abajo-izquierda de la foto */
.sole-info .foto-comportamientos { position: relative; }
.sole-info .foto-comportamientos .pie-de-pagina {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
}
/* Imágenes de contenido de habilidades (datos / pasos / celebración): nunca
se desbordan de su columna. */
.sole-info .image-223,
.sole-info .image-225,
.sole-info .image-222 {
display: block;
max-width: 100%;
height: auto;
}
/* --- E. HABILIDADES en MÓVIL: al pasar a columna (max-width:991) la
.foto-comportamientos va a ancho completo y, con object-fit:cover + height
heredado, crecía hasta ocupar la pantalla entera de arriba a abajo. Le damos
una altura contenida proporcional al ancho para que la foto se adapte al
espacio y no empuje el resto del contenido. */
/* --- F. HABILIDADES, slider de datos (2023/2022) — EN TODOS LOS ANCHOS.
Dos problemas:
1) El slider conserva .w-slider (height:300px fijo). Si Splide no monta,
queda el slider crudo a 300px y el párrafo se recorta/desborda del
bloque de color. Si Splide sí monta, lo hace con height:'100%' => 300px
igual. En ambos casos soltamos TODA la cadena de alturas a auto para que
la tarjeta crezca con el texto y el fondo de color cubra el párrafo.
2) Las flechas (Splide .splide__arrow o las nativas .w-slider-arrow) se
montan centradas en vertical y tapan el número grande. Como solo hay 2
slides, las ocultamos y dejamos los puntos de paginación para navegar. */
.sole-info .modulo-comportamientos .w-slider,
.sole-info .modulo-comportamientos .w-slider-mask,
.sole-info .modulo-comportamientos .sole-splide,
.sole-info .modulo-comportamientos .splide,
.sole-info .modulo-comportamientos .splide__track,
.sole-info .modulo-comportamientos .splide__list,
.sole-info .modulo-comportamientos .splide__slide,
.sole-info .modulo-comportamientos .w-slide,
.sole-info .modulo-comportamientos .comportamiento-datos {
height: auto !important;
}
.sole-info .modulo-comportamientos .w-slider-mask { white-space: normal; }
.sole-info .modulo-comportamientos .splide__track { overflow: hidden; }
/* matar flechas que tapan el número (Splide + nativas Webflow) */
.sole-info .modulo-comportamientos .splide__arrows,
.sole-info .modulo-comportamientos .splide__arrow,
.sole-info .modulo-comportamientos .w-slider-arrow-left,
.sole-info .modulo-comportamientos .w-slider-arrow-right {
display: none !important;
}
/* hueco para los puntos de paginación bajo el texto */
.sole-info .modulo-comportamientos { position: relative; padding-bottom: 48px; }
.sole-info .modulo-comportamientos .splide__pagination,
.sole-info .modulo-comportamientos .w-slider-nav { bottom: 12px; }
@media (max-width: 991px) {
.sole-info .contenedor-habilidades { height: auto; }
.sole-info .foto-comportamientos {
height: 60vw;
max-height: 360px;
}
.sole-info .foto-comportamientos .wlh-tecnologia { height: 100% !important; }
/* Lectura: .6em sobre la base hacía un párrafo ~11px, muy pequeño y
apretado. Lo subimos y damos interlineado. */
.sole-info .infowlh-parrafo-modulos { font-size: .8em; line-height: 1.45; }
}
@media (max-width: 479px) {
.sole-info .foto-comportamientos {
height: 64vw;
max-height: 280px;
}
}
/* --- G. CONTENCIÓN HORIZONTAL (v1.6.7) — EN TODOS LOS ANCHOS.
Los wrappers sin clase entre .modulo-comportamientos (flex) y el slider
convertido a Splide heredan el min-content del track (suma de TODOS los
slides, nowrap) y crecían a 850–1070px en un viewport de 390px: texto
cortado en el borde y scroll horizontal. Tres frenos:
1) contain:inline-size en el host => su tamaño intrínseco deja de
propagarse hacia arriba y el ancho baja del contenedor (376px).
2) min-width:0 en los flex items intermedios (los block div ya lo traen
por defecto; explícito por los que Webflow convierte en flex).
3) max-width:100% de seguridad en toda la cadena del slider. */
.sole-info .sole-splide-host {
width: 100%;
max-width: 100%;
min-width: 0;
contain: inline-size;
}
.sole-info .modulo-comportamientos > div,
.sole-info .div-block-276,
.sole-info .div-block-294 {
min-width: 0;
max-width: 100%;
}
.sole-info .w-slider { max-width: 100%; }
/* --- H. PORTADA en MÓVIL (v1.6.7). El slider de fotos (.slider-6) tomaba la
altura natural de las imágenes (655px) en vez de los ~253px del original
(la altura vivía en el .w-slider-mask que la conversión a Splide retira):
el bloque .flex-block-22 pasaba de 286px a 709px y la banda ESPECIAL
INFOGRÁFICO + logos flotaban encima de la sección del mapa. Replicamos la
proporción del original (253px en 376 de ancho ≈ 67vw) y contenemos el
bloque. */
@media (max-width: 767px) {
.sole-info--portada .flex-block-22 {
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.sole-info--portada .slider-6 {
height: 67vw !important;
max-height: 420px;
}
.sole-info--portada .slider-6 .sole-splide,
.sole-info--portada .slider-6 .splide__track,
.sole-info--portada .slider-6 .splide__list,
.sole-info--portada .slider-6 .splide__slide,
.sole-info--portada .slider-6 .w-slide {
height: 100% !important;
}
.sole-info--portada .slider-6 img {
width: 100%;
height: 100% !important;
object-fit: cover;
}
}
/* ============================================================
FIXES CFE (v1.6.9) — secciones propias de la infografía
"Conversando el futuro de la educación" (galería, frases,
visualización-1). Estas clases NO estaban cubiertas por la
capa WLH de arriba; heredaban el CSS Webflow crudo que asumía
interacciones IX2 (webflow.js) que aquí no corren -> desbordes.
============================================================ */
/* --- CFE-1. Galería "así lo vivimos" — collage contenido.
Las
![]()
son position:absolute (top/left % + rotate) relativas a
.outercontainer (position:relative). El diseño Webflow usaba 100vw/100vh
y los wrappers .item-* (flex, vacíos porque la img va absoluta) colapsan.
Dentro de Elementor el 100vw + los left:63%+ancho se salían del marco.
Mantenemos el collage rotado + arrastrable (initGallery sigue igual) y solo
contenemos el escenario. */
.sole-info--galeria .outercontainer {
width: 100%;
max-width: 100%;
height: 90vh;
min-height: 680px;
overflow: hidden;
}
.sole-info--galeria .container {
width: 100%;
max-width: 100%;
height: 100%;
position: relative;
padding: 0;
}
/* Los wrappers .item-* quedan vacíos (su img va absoluta); que no aporten
alto ni empujen layout. Las imágenes absolutas siguen visibles. */
.sole-info--galeria .container > div {
position: static;
width: 0;
height: 0;
margin: 0;
}
/* Título grande de fondo, las fotos por encima (z-index ya definidos arriba). */
.sole-info--galeria .tit-info-apertura.vivimos {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 0;
text-align: center;
}
@media (max-width: 767px) {
.sole-info--galeria .outercontainer {
height: auto;
min-height: 70vh;
}
}
/* --- CFE-2. Frases — flecha negra estilo Webflow.
initSliders() hace slider.innerHTML='' y destruye el .right-arrow original
(caja negra 10vh con chevron blanco); Splide inyecta su flecha pequeña
transparente. Reestilamos la flecha --next de Splide SOLO en frases para
recuperar la caja negra abajo-derecha; ocultamos --prev (el left-arrow
original era transparente). */
/* Selectores con .sole-splide (3 clases) para GANAR al tema base
.sole-info .sole-splide .splide__arrow (misma especificidad, va después). */
.sole-info--frases .sole-splide .splide__arrow--next {
top: auto;
bottom: 0;
right: 0;
left: auto;
transform: none;
width: 10vh;
height: 10vh;
max-width: 80px;
max-height: 80px;
background: #000;
opacity: 1;
border-radius: 0;
}
.sole-info--frases .sole-splide .splide__arrow--next svg {
fill: #fff;
width: 2.6em;
height: 2.6em;
filter: none;
}
.sole-info--frases .sole-splide .splide__arrow--prev {
display: none;
}
/* --- CFE-3. visualización-1 — contener el ancho SIN estirar el contenedor.
NO tocamos la altura del .modulo-visualizacion (el diseño Webflow ya le da la
proporción correcta: en desktop el chart Flourish entra en el bloque azul).
Solo evitamos que el iframe propague su min-content y fuerce scroll/desborde
horizontal en la cadena del grid; el chart se redimensiona al ancho de su
celda como en el original, sin que el azul crezca para "taparlo". */
.sole-info .visualizacion-1 > * {
min-width: 0;
}
.sole-info .dataviz-1,
.sole-info .dataviz-1 .flourish-embed,
.sole-info .dataviz-1 iframe {
max-width: 100%;
min-width: 0;
}