/* ============================================================================ PAGINAS DE DIVISION / SECTOR — hoja comun Tema hijo: theFox_child_theme/css/division.css Se encola solo en paginas con la plantilla "Division / Sector page" (page-division.php), que ademas anade la clase .ufm-division al (body). Ver ufm_es_division() en functions.php. Origen: CSS de pagina de "Economic Development and Employment" (249478), Figma UfM_1400px frame 2001:3. Migrado aqui el 2026-10-22 para que las paginas duplicadas hereden los estilos sin copiar CSS. AMBITO. Todo va bajo .ufm-division, de dos maneras: - body.ufm-division .x -> reglas que tienen que ganar a las .vc_custom_XXX con !important de WPBakery o a reglas globales del tema. Especificidad (0,1,1) extra, la misma que tenia body.page-id-249478. - :where(.ufm-division) .x -> el resto. :where() acota a estas paginas sin sumar especificidad, asi la cascada es identica a la original. Al anadir reglas, seguir el mismo criterio. CLASES (campo "Extra class name" de WPBakery). Las paginas nuevas se duplican desde una existente, asi que ya las traen: Filas: hero-cajas, barra-anclas, bloque-overview, iniciativas-destacadas, marco-politicas, tarjetas-plataformas, publicaciones, opinion-articulos, noticias-relacionadas, banner-stories, agenda-relacionada Dentro: hero-titulo (texto del H1), publicaciones-fila (fila interna), publicaciones-tarjeta / publicaciones-portadas (columnas), publicaciones-enlace (texto), banner-stories-contenido (texto), banner-stories-titulo (h2) y banner-stories-boton (a) en el HTML. El lienzo original mide 1900px y el contenido vive entre x=250 y x=1656, o sea 1406px. Las medidas horizontales van en % de ese contenedor para que escalen; las tipograficas y los huecos pequenos, en px. ============================================================================ */ /* --------------------------------------------------------------------------- 0. CONTENEDOR NO se toca. El sitio ya tiene el suyo y es responsive: .wrapper mide 1170px y pasa a 1380px a partir de 1450px de ventana (regla del rediseno en el CSS global). Todo lo de aqui se apoya en ese contenedor en vez de imponer el ancho del lienzo de Figma (1406), que solo vale para ese lienzo. Las bandas a sangre las resuelve el tema: sus filas full-width-section leen el ancho de .section_wrapper en tiempo de ejecucion y se sangran solas. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 1. TIPOGRAFIA DE LA MAQUETA Los pesos Lato 500/800 y Raleway 400/700/800 los encola el tema hijo solo en estas paginas (ufm_enqueue_division_fonts). Sin ellos el navegador los sintetiza y los titulos salen con el grosor equivocado. --------------------------------------------------------------------------- */ /* Cuerpo de texto: la maqueta usa Lato 500 17/23 en azul UfM, no el 400/16/24 negro por defecto del tema. Se acota a las secciones de texto propio para no pisar el markup que emiten las vistas. */ body.ufm-division .bloque-overview .wpb_text_column p, body.ufm-division .marco-politicas .wpb_text_column p{ font-family: 'Lato', sans-serif; font-weight: 500; font-size: 17px; line-height: 23px; color: #1f346d; } /* Enlaces "VIEW MORE / SEE MORE ..." de las cabeceras de seccion */ body.ufm-division .wpb_text_column p a strong{ font-family: 'Lato', sans-serif; font-weight: 900; font-size: 18px; line-height: 22px; text-transform: uppercase; color: #1f346d; } /* --------------------------------------------------------------------------- 1b. BREAKPOINTS DE LA PAGINA Y TOKENS POR BANDA El contenedor del tema es ESCALONADO, no fluido: 1380 / 1170 / 960 / 708 / 100%. Por eso la tipografia va en px por banda y no en vw: un tamano ligado al viewport se desincroniza de la caja en la que vive (al pasar de 1035 a 1036 el contenedor salta de 708 a 960 mientras una fuente en vw se mueve 0,1px). Solo el hero y el banner Stories usan clamp(), porque esos SI ocupan el ancho de la ventana. --------------------------------------------------------------------------- */ body.ufm-division{ --fs-h3: 29px; --lh-h3: 31px; /* titulos de tarjeta y acordeon */ --fs-body: 17px; --lh-body: 23px; --fs-card-lg: 22px; --lh-card-lg: 28px; /* titulo de iniciativa grande */ --fs-card-sm: 17px; --lh-card-sm: 22px; /* titulo de iniciativa pequena */ --fs-event: 29px; --lh-event: 31px; --clamp-card-sm: 4; --clamp-excerpt: 3; --gutter: 22px; --card-pad-x: 56px; --card-pad-y: 42px; } @media only screen and (max-width: 1214px) { body.ufm-division{ --fs-h3: 25px; --lh-h3: 28px; --fs-card-lg: 20px; --lh-card-lg: 25px; --fs-card-sm: 16px; --lh-card-sm: 20px; --fs-event: 21px; --lh-event: 26px; --card-pad-x: 40px; --card-pad-y: 32px; } } @media only screen and (max-width: 1035px) { body.ufm-division{ --fs-h3: 23px; --lh-h3: 26px; --fs-body: 16px; --lh-body: 22px; --fs-card-lg: 18px; --lh-card-lg: 23px; --fs-card-sm: 15px; --lh-card-sm: 19px; --clamp-card-sm: 3; --fs-event: 19px; --lh-event: 24px; --card-pad-x: 30px; --card-pad-y: 26px; } } @media only screen and (max-width: 767px) { body.ufm-division{ --fs-h3: 22px; --lh-h3: 26px; --fs-card-lg: 19px; --lh-card-lg: 25px; --fs-card-sm: 16px; --lh-card-sm: 21px; --clamp-card-sm: 4; --fs-event: 20px; --lh-event: 25px; --gutter: 16px; --card-pad-x: 24px; --card-pad-y: 22px; } } /* --------------------------------------------------------------------------- 2. HERO — el titulo en cajas, una por linea --------------------------------------------------------------------------- */ :where(.ufm-division) .hero-cajas{ position: relative; } /* La foto ocupa todo el ancho pero conserva la proporcion del original (3800x1422). Sin esto WordPress sirve el recorte "slide" (2560x710), mucho mas achatado, y el hero pierde la composicion de la maqueta. */ :where(.ufm-division) .hero-cajas .wpb_single_image, :where(.ufm-division) .hero-cajas .wpb_single_image .vc_figure, :where(.ufm-division) .hero-cajas .wpb_single_image .vc_single_image-wrapper{ display: block; width: 100%; margin: 0; } /* El titulo se alinea con el contenedor del sitio, no con el borde de la pantalla: el lado izquierdo de las cajas azules tiene que caer en la misma vertical que "OVERVIEW" y el resto de titulos de seccion. La fila va a sangre completa, asi que se centra una caja con LAS MISMAS medidas que usa el propio tema para .wrapper —1170px, y 1380px a partir de 1450px—, no un valor sacado del Figma. Si el sitio cambia su contenedor, se cambia aqui el mismo par de valores y sigue cuadrando. */ :where(.ufm-division) .hero-cajas .hero-titulo{ /* Centrado en los dos ejes: en la maqueta el bloque de cajas queda a media altura de la foto, no anclado abajo. */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1170px; max-width: 100%; box-sizing: border-box; padding: 0 20px; z-index: 3; margin: 0; } @media only screen and (min-width: 1450px) { :where(.ufm-division) .hero-cajas .hero-titulo{ width: 1380px; padding: 0; } } /* El centrado se hace con transform, asi que el h1 tiene que ser un bloque completo; en inline el alto medido para centrar no incluye las tres cajas. */ :where(.ufm-division) .hero-cajas .hero-titulo .wpb_wrapper{ display: block; } :where(.ufm-division) .hero-cajas .hero-titulo h1{ /* 3.29vw = 46/1400. La fila es full-width-content y el tema la dimensiona con el ancho de la ventana, asi que aqui si procede clamp(). */ display: inline; font-size: clamp(20px, 3.29vw, 46px); line-height: 1.55; font-weight: 800; font-family: 'Lato', sans-serif; text-transform: uppercase; color: #fff; margin: 0; /* Sin esto el fondo sale como un unico rectangulo tras el bloque, no por linea. */ -webkit-box-decoration-break: clone; box-decoration-break: clone; background: rgba(28, 44, 99, .82); padding: .12em .38em; } /* El h1 vive en una fila full-width-content, que el tema dimensiona con el ancho de la VENTANA: aqui si procede clamp(). 3.29vw = 46/1400. */ @media only screen and (max-width: 1214px) { /* .hero-titulo lleva width:1170px fijo: por debajo de 1215 era mas ancha que el contenedor y el titulo dejaba de alinear con "OVERVIEW". */ :where(.ufm-division) .hero-cajas .hero-titulo{ width: 960px; } } @media only screen and (max-width: 1035px) { :where(.ufm-division) .hero-cajas .hero-titulo{ width: 708px; } } @media only screen and (max-width: 767px) { :where(.ufm-division) .hero-cajas .hero-titulo{ width: 100%; padding: 0 10px; } /* MOVIL 1 — mas alto. La imagen es 2,67:1, asi que a 390px el hero medi­a 146px y el titulo (93px) casi lo llenaba. Con 16/9 pasa a 219px: un 50% mas. object-fit:cover ya estaba, asi que recorta por los lados en vez de deformar. */ :where(.ufm-division) .hero-cajas .wpb_single_image img{ aspect-ratio: 16 / 9; object-fit: cover; } } /* --------------------------------------------------------------------------- 3. BARRA DE ANCLAS En la maqueta va sobre blanco, no sobre la banda gris que tenia. El fondo gris viene de una .vc_custom_ con !important compartida: se gana por especificidad, no editando esa clase. El flex va en el (p), NO en el .wpb_wrapper. WordPress envuelve el contenido de un vc_column_text en un parrafo, asi que el wrapper tiene UN solo hijo: repartirlo con space-between no hace nada visible. --------------------------------------------------------------------------- */ body.ufm-division .barra-anclas{ background-color: #fff !important; } :where(.ufm-division) .barra-anclas .wpb_text_column{ margin-bottom: 0; } :where(.ufm-division) .barra-anclas .wpb_wrapper > p{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 26px; margin: 0; } :where(.ufm-division) .barra-anclas a{ font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 20px; line-height: 31px; text-transform: capitalize; color: #000; text-decoration: none; padding: 6px 0; display: inline-block; } :where(.ufm-division) .barra-anclas a:hover{ color: #1f346d; text-decoration: underline; } /* La barra sobresalia 2px del viewport en TODOS los anchos: el tema la monta con generate_fw_sections() (js/customjs.js), que calcula ((window.width - section_wrapper.width())/2) + 1 y aplica ese +1 como margen y padding. No se puede tocar un numero de JS desde CSS, pero esta fila no necesita sangrado a bordes: su fondo es blanco, el mismo de la pagina. Se le quita el full-width y desaparece el desborde. (Related Platforms y Related News SI lo necesitan: su banda es gris.) */ body.ufm-division .barra-anclas{ margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; box-sizing: border-box !important; } @media only screen and (max-width: 1035px) { :where(.ufm-division) .barra-anclas .wpb_wrapper > p{ justify-content: flex-start; gap: 6px 22px; } :where(.ufm-division) .barra-anclas a{ font-size: 15px; } } @media only screen and (max-width: 767px) { /* Cinco enlaces no caben en 355px sin partirse en tres filas irregulares. En una sola fila deslizable se leen y no rompen el ritmo vertical. */ :where(.ufm-division) .barra-anclas .wpb_wrapper > p{ flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0 18px; padding-bottom: 2px; } :where(.ufm-division) .barra-anclas .wpb_wrapper > p::-webkit-scrollbar{ display: none; } :where(.ufm-division) .barra-anclas a{ white-space: nowrap; font-size: 14px; } } /* --------------------------------------------------------------------------- 4. OVERVIEW Detras lleva una banda gris que degrada a blanco y se derrama por debajo, hasta la cabecera de sectores. Va a sangre completa: la fila no es full-width-section, asi que el sangrado se hace con un pseudo-elemento de 100vw en vez de depender del JS del tema. --------------------------------------------------------------------------- */ /* El .vc_row del tema trae overflow:hidden, que recortaba el sangrado del pseudo-elemento a los limites del contenedor. */ body.ufm-division .bloque-overview{ position: relative; z-index: 0; overflow: visible !important; } /* El bloque EXTERNO: 1900x894 a sangre completa con el degradado. Es el que envuelve a Overview y entra por detras de la parte alta de List of Sectors. La tarjeta blanca de sectores va encima (z-index 1). 894/1406 = 63,58% del ancho del contenedor, para que escale con el. */ body.ufm-division .bloque-overview::before{ content: ""; position: absolute; top: -36px; left: 50%; transform: translateX(-50%); width: 100vw; height: 63.58%; min-height: 100%; background: linear-gradient(180deg, #eaeaea 53%, #ffffff 89%); z-index: -1; pointer-events: none; } @supports (height: 1cqw) { body.ufm-division .bloque-overview{ container-type: inline-size; } body.ufm-division .bloque-overview::before{ height: 63.58cqw; } } /* Dos columnas de 691 sobre 1406 con canal de 22 */ body.ufm-division .bloque-overview .vc_row-fluid > .wpb_column{ width: 49.15%; } body.ufm-division .bloque-overview .vc_row-fluid > .wpb_column + .wpb_column{ margin-left: 1.7%; } body.ufm-division .bloque-overview .newtitleh2{ margin-bottom: 40px; } /* --------------------------------------------------------------------------- 6. FEATURED INITIATIVES La vista escupe .priority-area.projects con un .vc_span6 por proyecto. La maqueta pide 1 grande (930x682) + 3 pequenas (453x208) apiladas a la derecha, con 23px de canal y 29px entre las pequenas. La altura de la grande NO se fija: al ocupar las tres filas del grid la define la columna derecha, asi que ambas columnas casan siempre, sea cual sea el ancho del contenedor. --------------------------------------------------------------------------- */ /* El vc_column_text que envuelve la vista lleva .inline-block, que lo encoge al ancho de su contenido: la rejilla salia a 479px en vez de a los 1380 de la columna. Se devuelve a bloque solo aqui. */ :where(.ufm-division) .iniciativas-destacadas .wpb_text_column.inline-block{ display: block; width: 100%; } :where(.ufm-division) .iniciativas-destacadas .js-wpv-view-layout, :where(.ufm-division) .iniciativas-destacadas .priority-area.projects{ width: 100%; } /* Mismo aire entre el titulo de seccion y su contenido que en Opinion Articles: 25 del margen de la columna del titulo + 35 aqui = 60. */ :where(.ufm-division) .iniciativas-destacadas .priority-area.projects{ margin-top: 35px; } /* Tres filas iguales. La altura del conjunto la marca la imagen grande a traves de su aspect-ratio; las tres pequenas se limitan a rellenar su fila. Es la unica combinacion que casa las dos columnas a cualquier ancho: si se le pone aspect-ratio tambien a las pequenas, el alto que el tema fija al .vc_span6 manda sobre el ancho y la columna derecha se sale de su pista. */ :where(.ufm-division) .iniciativas-destacadas .priority-area.projects{ display: grid; grid-template-columns: 66.145% 32.219%; grid-template-rows: 1fr 1fr; column-gap: 1.636%; row-gap: 29px; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6{ width: auto !important; float: none !important; margin: 0 !important; position: relative; overflow: hidden; /* El tema fuerza content-box en varios sitios; sin esto el padding del .vc_span6 se suma al ancho de la pista y la columna derecha se sale. */ box-sizing: border-box; padding: 0; background-size: cover; background-position: center; } /* La grande marca la altura del conjunto; las pequenas se estiran a la fila que les toca, sin aspect-ratio propio. La maqueta la tiene en 930x682, pero con los titulos reales —mucho mas largos que el lorem— no cabian en las bandas azules. Ratio actual: 930/480. */ :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:first-child{ grid-column: 1; grid-row: 1 / -1; aspect-ratio: 930 / 480; height: auto; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:nth-child(n+2){ grid-column: 2; height: auto; min-height: 0; } /* La banda azul del pie de cada tarjeta */ :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6 .block{ position: absolute; left: 0; right: 0; bottom: 0; margin: 0; /* El tema le fija top:110px; con top y bottom a la vez gana top y la banda se quedaba a media altura de la tarjeta. */ top: auto !important; background: rgba(31, 52, 109, .88); display: flex; align-items: center; overflow: hidden; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6 .block span{ font-family: 'Lato', sans-serif; font-weight: 400; color: #fff; text-decoration: none; /* Los titulos reales son mucho mas largos que el lorem de la maqueta: sin recorte se salen de la banda azul. */ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:first-child .block span{ -webkit-line-clamp: 3; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:nth-child(n+2) .block span{ -webkit-line-clamp: var(--clamp-card-sm); } /* min-height y no height: con altura fija, un titulo de mas lineas se salia de la banda y quedaba cortado. Anclada a bottom:0, la banda crece hacia ARRIBA sobre la imagen, asi que no puede desbordar la tarjeta. */ :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:first-child .block{ height: auto; min-height: 24.34%; padding: 12px 7.42%; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:first-child .block span{ font-size: var(--fs-card-lg); line-height: var(--lh-card-lg); } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:nth-child(n+2) .block{ /* 50% de 230 = 115px: cuatro lineas de 22 mas aire. Con el 43,27% de la maqueta solo entraban dos y el tercer titulo se cortaba. min-height por lo mismo que la grande: que crezca en vez de cortar. */ height: auto; min-height: 50%; padding: 10px 6.4%; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:nth-child(n+2) .block span{ font-size: var(--fs-card-sm); line-height: var(--lh-card-sm); } /* La etiqueta del area sobra: la pagina entera ES de esta area. */ :where(.ufm-division) .iniciativas-destacadas .priority-area.projects .taxonomy{ display: none; } @media (max-width: 767px) { /* Hay que devolver grid-template-rows a auto: si se quedan las tres filas iguales del escritorio, las tarjetas pequenas —que no llevan aspect-ratio propio— se estiran a la altura de la grande. */ :where(.ufm-division) .iniciativas-destacadas .priority-area.projects{ grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 16px; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:first-child{ grid-row: auto; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:nth-child(n+2){ grid-column: 1; aspect-ratio: 453 / 208; } } @media only screen and (max-width: 1035px) { /* Dos columnas iguales: con la rejilla 66/32 de escritorio las tarjetas pequenas quedaban en 228px y el titulo no cabia. */ :where(.ufm-division) .iniciativas-destacadas .priority-area.projects{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; column-gap: var(--gutter); row-gap: var(--gutter); } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:first-child, :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:nth-child(n+2){ grid-column: auto; grid-row: auto; aspect-ratio: 453 / 260; height: auto !important; min-height: 0; } :where(.ufm-division) .iniciativas-destacadas .priority-area.projects > .vc_span6:first-child .block{ min-height: 38%; } } /* --------------------------------------------------------------------------- 7. POLICY FRAMEWORK Columnas 595 / 811 (42,3% y 57,7%), no los 1/3 + 2/3 que trae WPBakery. El acordeon deja de ser una pila de cajas: cada fila es solo el titulo, una regla fina debajo y un cuadrado azul de 32px con un chevron que gira al abrirse. --------------------------------------------------------------------------- */ /* Las columnas son hijas DIRECTAS de la fila: no hay ningun .vc_row-fluid intermedio (eso solo aparece cuando se usa vc_row_inner). El selector con `> .vc_row-fluid >` no casaba con nada y las columnas se quedaban en el 33/67 por defecto en vez del 42/58 de la maqueta. */ /* Aire igual arriba y abajo: la ultima regla del acordeon no puede quedar pegada al limite inferior de la seccion, y para que quede simetrica la entrada lleva la misma medida. */ body.ufm-division .marco-politicas{ padding-top: 117px; padding-bottom: 117px; } body.ufm-division .marco-politicas > .wpb_column:first-child{ width: 42.32%; margin-left: 0; } /* El grid del tema le pone a .vc_span8 un margin-left de gutter (35px). Sumado a los dos anchos pasaba de 100% y la columna saltaba de linea, quedando debajo y desplazada 35px. */ body.ufm-division .marco-politicas > .wpb_column:last-child{ width: 57.68%; margin-left: 0; } /* 60px, el mismo aire titulo->contenido que en Opinion Articles. */ body.ufm-division .marco-politicas .newtitleh2{ margin-bottom: 60px; } /* El parrafo de intro mide 454 de los 595 de su columna */ body.ufm-division .marco-politicas > .wpb_column:first-child .wpb_text_column p{ max-width: 76.3%; } /* Cascaron del acordeon: sin cajas, sin bordes, sin fondos */ body.ufm-division .marco-politicas .newaccordion, body.ufm-division .marco-politicas .wpb_accordion_section, body.ufm-division .marco-politicas .wpb_accordion_header, body.ufm-division .marco-politicas .wpb_accordion_content{ background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; } /* Las cuatro reglas, del mismo color. El tema dibuja un borde SUPERIOR oscuro en cada cabecera; encima de el caia el borde inferior que yo ponia a cada seccion, mas claro, y como quedaban superpuestos solo se notaba en el ultimo, que no tiene cabecera debajo: por eso la linea de abajo se veia mas clara que las tres de arriba. Ahora las dibuja todas esta hoja: una sobre cada cabecera y otra bajo la ultima. */ body.ufm-division .marco-politicas .wpb_accordion_header{ border-top: 1px solid #1F346D !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; } body.ufm-division .marco-politicas .wpb_accordion_section{ border-bottom: 0 !important; } body.ufm-division .marco-politicas .wpb_accordion_section:last-child{ border-bottom: 1px solid #1F346D !important; } body.ufm-division .marco-politicas .wpb_accordion_header > a{ display: flex; align-items: center; justify-content: space-between; font-family: 'Lato', sans-serif; font-weight: 900; font-size: 29px; line-height: 31px; color: #1f346d !important; padding: 14px 0 !important; text-decoration: none; background: transparent !important; } /* El cuadrado azul con el chevron */ body.ufm-division .marco-politicas .wpb_accordion_header > a::after{ content: ""; flex: 0 0 32px; width: 32px; height: 32px; background: #1f346d; /* chevron ">" blanco dibujado con el borde de un cuadrado girado */ background-image: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%); background-size: 9px 9px, 9px 9px; background-position: center calc(50% - 4px), center calc(50% + 4px); background-repeat: no-repeat; /* Cerrado apunta a la derecha, como en la maqueta; al abrirse gira a abajo. */ transform: rotate(0deg); transition: transform .25s ease; } body.ufm-division .marco-politicas .wpb_accordion_header[aria-expanded="true"] > a::after, body.ufm-division .marco-politicas .wpb_accordion_header.ui-state-active > a::after{ transform: rotate(90deg); } /* El tema pinta su propio icono de acordeon: es un (span) hijo del (h3), no del enlace, asi que hay que apuntarlo desde la cabecera. */ body.ufm-division .marco-politicas .wpb_accordion_header .ui-accordion-header-icon, body.ufm-division .marco-politicas .wpb_accordion_header > a::before{ display: none !important; content: none !important; } body.ufm-division .marco-politicas .wpb_accordion_content{ padding: 0 0 20px !important; } @media (prefers-reduced-motion: reduce) { body.ufm-division .marco-politicas .wpb_accordion_header > a::after{ transition: none; } } @media only screen and (max-width: 1035px) { /* Las dos columnas (42,3% / 57,7%) dejaban el acordeon en 408px. */ body.ufm-division .marco-politicas > .wpb_column{ width: 100% !important; float: none; } body.ufm-division .marco-politicas > .wpb_column:first-child{ margin-bottom: 28px; } body.ufm-division .marco-politicas .newaccordion .wpb_accordion_header > a{ font-size: var(--fs-h3); line-height: var(--lh-h3); } } /* --------------------------------------------------------------------------- 8. RELATED PLATFORMS Banda gris a sangre con tres tarjetas blancas de 454x260 y 22 de canal. La vista las emite apiladas; la rejilla se pone aqui. Los hijos directos de .platform_tab son (section), no los items: el grid actua sobre ellas. --------------------------------------------------------------------------- */ body.ufm-division .tarjetas-plataformas{ background-color: #eaeaea !important; } /* 60px, el mismo aire titulo->contenido que en Opinion Articles. */ :where(.ufm-division) .tarjetas-plataformas .newtitleh2{ margin-bottom: 60px; } /* EL ANCHO DE 951px QUE DESBORDABA EN TABLET. El `.wpb_text_column` de esta seccion es `inline-block` (regla global `.inline-block` del sitio), asi que hacia shrink-to-fit al min-content de la rejilla —951px— en vez de ceñirse al contenedor. Por debajo de 1036px el contenedor mide 708 y la 3a tarjeta quedaba recortada e invisible (body tiene overflow-x:hidden). Es el MISMO arreglo que ya llevan Featured Initiatives, Opinion Articles y Related News. */ body.ufm-division .tarjetas-plataformas .wpb_text_column.inline-block{ display: block; width: 100%; } body.ufm-division .tarjetas-plataformas .js-wpv-view-layout{ width: 100%; } :where(.ufm-division) .tarjetas-plataformas .platform_tab{ /* minmax(0, 1fr) y no 1fr: `1fr` es `minmax(auto, 1fr)`, y ese `auto` tiene por minimo el min-content de la tarjeta, que es justo lo que empujaba la rejilla a 951px. Con 0 las pistas pueden encogerse y la rejilla no puede exceder su contenedor por construccion. */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: 100%; } :where(.ufm-division) .tarjetas-plataformas .platform_policy-item{ min-width: 0; } /* Los items de la rejilla son los `section.wpb-content-wrapper` que envuelven la vista, no las tarjetas, y el tema les da 50px de margen superior: entre filas quedaban 64px (50 + el gap). El hueco lo debe fijar solo el gap. */ :where(.ufm-division) .tarjetas-plataformas .platform_tab > section.wpb-content-wrapper{ margin: 0; } body.ufm-division .tarjetas-plataformas .platform_policy-item h4.title a{ overflow-wrap: anywhere; } /* Solo las tres primeras: la vista devuelve bastantes mas. */ :where(.ufm-division) .tarjetas-plataformas .platform_policy-item:nth-child(n+4){ display: none; } /* Flujo normal en vez de posicionar el boton en absoluto: los titulos reales llevan el prefijo "UfM " y ocupan cuatro lineas, una mas que el lorem de la maqueta, y con el boton absoluto se solapaban. */ :where(.ufm-division) .tarjetas-plataformas .platform_policy-item{ background: #fff; padding: 49px 56px 40px; position: relative; /* Sin aspect-ratio: con el, la tarjeta se quedaba clavada en los 260 de la maqueta y el contenido real —cuatro lineas de titulo— no cabia con su separacion. La altura la da el contenido y el grid iguala las tres. */ height: auto; display: flex; flex-direction: column; } /* La vista envuelve el titulo en .vc_row > .vc_span11 > div, y esos tres traen margenes propios que sumaban 54px de aire muerto sobre la tarjeta. */ :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .vc_row, :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .vc_row > div, :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .vc_row > div > div, :where(.ufm-division) .tarjetas-plataformas .platform_policy-item h4.title{ margin: 0; padding: 0; } /* El titulo no alineaba con el icono de abajo: el CSS global trae `#platform_policy-list .platform_policy-item .vc_row { padding:10px 25px 30px }` y esos 25px sangraban SOLO el titulo, no el icono. El selector de ID (1,2,0) gana al de la pagina (0,3,0), asi que hace falta !important. */ body.ufm-division .tarjetas-plataformas .platform_policy-item .vc_row{ padding: 0 !important; margin: 0 !important; } /* La vista mete el titulo en un .vc_row con fondo gris propio. */ :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .vc_row, :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .vc_row > div{ background: transparent !important; } /* El tamano lo fija una regla con selector de ID en el CSS global (#platform_policy-list …), que gana por especificidad: hace falta !important para devolverlo a la maqueta. */ body.ufm-division .tarjetas-plataformas .platform_policy-item h4.title a{ font-family: 'Lato', sans-serif !important; font-weight: 400 !important; color: #1f346d !important; font-size: var(--fs-h3) !important; line-height: var(--lh-h3) !important; } /* La etiqueta del area sobra: la pagina entera ES de esta area. */ :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .taxonomy{ display: none; } /* El boton circular: el icono real "Group" de Figma (figma-ufm/index.html), como (a) de verdad -> es el enlace a la plataforma, no un adorno. Mismo hueco de 36px entre el bloque de titulo y el boton que antes. */ :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .platform-open{ margin-top: 36px; flex: 0 0 41px; width: 41px; height: 41px; color: #1f346d; display: block; } :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .platform-open svg{ display: block; width: 100%; height: 100%; } :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .platform-open:hover{ color: #29ABE2; } :where(.ufm-division) .tarjetas-plataformas .projects-pagination{ display: none; } @media only screen and (max-width: 1035px) { :where(.ufm-division) .tarjetas-plataformas .platform_tab{ grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(.ufm-division) .tarjetas-plataformas .platform_policy-item{ padding: var(--card-pad-y) var(--card-pad-x) 24px; } :where(.ufm-division) .tarjetas-plataformas .platform_policy-item .platform-open{ margin-top: 24px; flex-basis: 34px; width: 34px; height: 34px; } } @media only screen and (max-width: 767px) { :where(.ufm-division) .tarjetas-plataformas .platform_tab{ grid-template-columns: 1fr; } :where(.ufm-division) .tarjetas-plataformas .platform_policy-item{ aspect-ratio: auto; } } /* --------------------------------------------------------------------------- 9. PUBLICATIONS AND KEY DOCUMENTS Tarjeta gris de 452 a la izquierda y cuatro portadas de 215 a la derecha, todas de 311 de alto. La vista se llama con view_display='layout' para que no saque el bloque de filtros, que la maqueta no tiene. --------------------------------------------------------------------------- */ /* flex-start, no stretch: con stretch la tarjeta y las portadas se igualaban a la mas alta de las dos. Cada una lleva ahora la misma proporcion de la maqueta (452x311 y 215x311), asi que acaban a la misma altura por construccion, no por estirarse. */ /* LAS 2 COLUMNAS QUE DESBORDABAN NO SON PUBLICACIONES. La vista ya trae posts_per_page=4; su layout es `wrap="6" pad="true"`, asi que emite 6 columnas y rellena las 2 ultimas con `[wpv-item index=pad]` VACIAS. Se ocultan: no hay contenido detras. */ body.ufm-division .publicaciones .publications-list .row > [class*="col-"]:empty{ display: none; } body.ufm-division .publicaciones .publicaciones-fila{ display: flex; align-items: flex-start; } body.ufm-division .publicaciones .publicaciones-tarjeta{ width: 32.15%; background: #e8edf0; /* En px a proposito: un padding en % se resuelve contra el ancho del BLOQUE CONTENEDOR (la fila, 1380), no contra el de la tarjeta, y salian 171px por lado en vez de los 56 de la maqueta. */ padding: 42px 56px 44px; box-sizing: border-box; aspect-ratio: 452 / 311; display: flex; flex-direction: column; justify-content: space-between; } /* WPBakery mete un .vc_column-inner entre la columna y el contenido; como hijo de un flex se encogia a su contenido minimo (101px) y el titulo salia en cuatro lineas en vez de dos. */ body.ufm-division .publicaciones .publicaciones-tarjeta > .vc_column-inner{ width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; } body.ufm-division .publicaciones .publicaciones-tarjeta > .vc_column-inner > .wpb_wrapper{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } body.ufm-division .publicaciones .publicaciones-portadas{ width: 66.29%; margin-left: 1.56%; } body.ufm-division .publicaciones .publicaciones-tarjeta .newtitleh2{ margin: 0; } body.ufm-division .publicaciones .publicaciones-enlace{ margin: 0; } body.ufm-division .publicaciones .publicaciones-enlace p{ position: relative; margin: 0; display: flex; align-items: center; } /* La flecha larga que acompana al enlace */ body.ufm-division .publicaciones .publicaciones-enlace p::after{ content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 12px; margin-left: 14px; background-image: linear-gradient(#1f346d, #1f346d), linear-gradient(45deg, transparent 44%, #1f346d 44%, #1f346d 58%, transparent 58%), linear-gradient(-45deg, transparent 44%, #1f346d 44%, #1f346d 58%, transparent 58%); background-size: 24px 2px, 8px 8px, 8px 8px; background-position: left center, right calc(50% - 3px), right calc(50% + 3px); background-repeat: no-repeat; } /* view_display='layout' NO quita el bloque de filtros: la vista lo sigue emitiendo dentro de un .col-md-4 que, aun con el filtro oculto, seguia reservando 315px. Se elimina la columna entera y la de al lado pasa a ocupar todo el ancho. */ body.ufm-division .publicaciones .newhome-publications > .row > .col-md-4{ display: none !important; } body.ufm-division .publicaciones .newhome-publications > .row{ margin: 0; display: block; } body.ufm-division .publicaciones .newhome-publications > .row > .col-md-8{ width: 100%; float: none; padding: 0; } body.ufm-division .publicaciones .publication_all_view, body.ufm-division .publicaciones .js-wpv-view-layout, body.ufm-division .publicaciones .publications-list{ width: 100%; } /* Las portadas son un carrusel: la vista mete TODAS en la misma fila y las desplaza. Con flex normal se encogian a 83px. Se fija el ancho a un cuarto exacto y se recorta el sobrante, que es lo que hace de ventana del carrusel. */ body.ufm-division .publicaciones .publications-list{ overflow: hidden; } body.ufm-division .publicaciones .publications-list .row{ display: flex; flex-wrap: nowrap; margin: 0 -11px; } body.ufm-division .publicaciones .publications-list .row > [class*="col-"]{ flex: 0 0 25%; max-width: 25%; width: 25%; float: none; padding: 0 11px; margin: 0; } body.ufm-division .publicaciones .publications-list img{ width: 100%; height: auto; aspect-ratio: 215 / 311; object-fit: cover; display: block; } body.ufm-division .publicaciones .areafilter, body.ufm-division .publicaciones .dropdown{ display: none !important; } /* Prev / next: dos cuadrados azules de 34px arriba a la derecha del bloque. El markup lo emite la View division-publications; aqui solo se coloca. */ body.ufm-division .publicaciones .publication_all_view{ position: relative; } body.ufm-division .publicaciones .projects-pagination{ position: absolute; top: -56px; right: 0; display: flex; gap: 5px; z-index: 2; } body.ufm-division .publicaciones .projects-pagination a, body.ufm-division .publicaciones .projects-pagination::before{ /* Cuadrados de verdad: sin flex:none el enlace crecia con su texto ("Next", "Previous") y salia un rectangulo en vez de un cuadrado. */ flex: 0 0 34px; box-sizing: border-box; width: 34px; min-width: 34px; max-width: 34px; height: 34px; min-height: 34px; max-height: 34px; padding: 0; border: 0; border-radius: 0; line-height: 0; background-color: #1f346d; color: transparent; display: block; position: relative; overflow: hidden; font-size: 0; /* El chevron ">" dibujado con dos medias diagonales blancas. */ background-image: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 56%, transparent 56%), linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 56%, transparent 56%); background-size: 8px 8px, 8px 8px; background-position: center calc(50% - 4px), center calc(50% + 4px); background-repeat: no-repeat; } /* Se estilan por clase, no por posicion: en la pagina 1 Toolset no emite el enlace "anterior", asi que el unico (a) es el de "siguiente" y girarlo por ser :first-child lo dejaba apuntando al reves. */ body.ufm-division .publicaciones .projects-pagination .wpv-filter-previous-link{ transform: rotate(180deg); } /* La maqueta muestra siempre los dos cuadrados. Cuando no hay enlace anterior se pinta uno inerte y atenuado para no perder el par. */ body.ufm-division .publicaciones .projects-pagination:not(:has(.wpv-filter-previous-link))::before{ content: ""; transform: rotate(180deg); opacity: .35; order: -1; } body.ufm-division .publicaciones .projects-pagination i{ display: none; } @media only screen and (max-width: 1035px) { /* La tarjeta gris tiene aspect-ratio 452/311; a 228px de ancho el titulo de 29px se quedaba sin caja y se salia sobre las portadas. Apilada y sin ratio, la caja la define su contenido. */ body.ufm-division .publicaciones .publicaciones-fila{ display: block; } body.ufm-division .publicaciones .publicaciones-tarjeta{ width: 100%; aspect-ratio: auto; margin: 0 0 var(--gutter); padding: var(--card-pad-y) var(--card-pad-x); } body.ufm-division .publicaciones .publicaciones-portadas{ width: 100%; margin-left: 0; } /* La paginacion colgaba en absoluto sobre la tarjeta; apilada ya no hay hueco encima. */ body.ufm-division .publicaciones .projects-pagination{ position: static; justify-content: flex-end; margin: 0 0 12px; } } @media only screen and (max-width: 767px) { body.ufm-division .publicaciones .publications-list .row{ flex-wrap: wrap; } /* Las portadas se quedaban en 25% (miniaturas de 85px) porque la regla anterior solo tocaba width y no flex-basis/max-width. */ body.ufm-division .publicaciones .publications-list .row > [class*="col-"]{ flex: 0 0 50%; max-width: 50%; width: 50%; margin-bottom: 20px; } } /* --------------------------------------------------------------------------- 10. OPINION ARTICLES La vista maqueta a dos columnas (.col-sm-6). La maqueta pide tres. Se corrige aqui y no en la vista porque esa misma vista la usa la pagina de prensa. --------------------------------------------------------------------------- */ /* Rejilla de tres. La vista propia (division-opinion-articles) ya maqueta con wrap="3", asi que basta con la canaleta. CANALETA INTERNA: el hueco de 22px va como padding DENTRO de cada columna y se compensa con margen negativo en la fila. Asi el borde izquierdo de la primera tarjeta y el derecho de la ultima quedan a ras del titulo de la seccion, que es como esta en la maqueta. Con `gap` el ancho total se pasaba por redondeo y la tercera tarjeta saltaba de fila. */ body.ufm-division .opinion-articulos .wpb_text_column.inline-block{ display: block; width: 100%; } body.ufm-division .opinion-articulos .wpv-loop > .row{ display: flex; flex-wrap: nowrap; margin: 0 -11px 30px; } body.ufm-division .opinion-articulos .wpv-loop [class*="col-"]{ flex: 0 0 33.3333%; max-width: 33.3333%; width: 33.3333%; float: none; padding: 0 11px; margin: 0; } body.ufm-division .opinion-articulos img{ width: 100%; height: auto; aspect-ratio: 454 / 261; object-fit: cover; display: block; } body.ufm-division .opinion-articulos .press-title, body.ufm-division .opinion-articulos .press-title a{ font-family: 'Lato', sans-serif; font-weight: 700; font-size: 20px; line-height: 28px; color: #1f346d; } /* El tema pone `.press-body { padding: 16px 12px 20px }` en global: esos 12px laterales sacaban el texto fuera del borde de la imagen. Aqui el texto va a ras de la foto, como en Related News. */ body.ufm-division .opinion-articulos .press-body{ padding-left: 0; padding-right: 0; } body.ufm-division .opinion-articulos .press-body p, body.ufm-division .opinion-articulos .press-body{ font-family: 'Lato', sans-serif; font-weight: 500; font-size: 17px; line-height: 23px; color: #1f346d; } /* Los extractos reales son parrafos enteros (hasta 15 lineas) y descuadraban las tres columnas; la maqueta muestra tres lineas y corta. */ body.ufm-division .opinion-articulos .press-body p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; } /* Titulos a dos lineas para que las tres tarjetas empiecen el texto a la misma altura. */ body.ufm-division .opinion-articulos .press-title{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 62px; } /* La maqueta no lleva ni el icono de pluma ni el boton "Read here" */ body.ufm-division .opinion-articulos .press-btn, body.ufm-division .opinion-articulos .press-meta, body.ufm-division .opinion-articulos svg{ display: none !important; } @media (max-width: 767px) { body.ufm-division .opinion-articulos .wpv-loop > .row{ flex-wrap: wrap; } body.ufm-division .opinion-articulos .wpv-loop [class*="col-"]{ flex-basis: 100%; max-width: 100%; width: 100%; margin-bottom: 24px; } } @media only screen and (max-width: 1035px) { body.ufm-division .opinion-articulos .wpv-loop > .row{ flex-wrap: wrap; row-gap: 28px; } body.ufm-division .opinion-articulos .wpv-loop [class*="col-"]{ flex: 0 0 50%; max-width: 50%; width: 50%; } body.ufm-division .opinion-articulos .press-title, body.ufm-division .opinion-articulos .press-title a{ font-size: var(--fs-h3); line-height: var(--lh-h3); } body.ufm-division .opinion-articulos .press-title{ min-height: calc(var(--lh-h3) * 2); } body.ufm-division .opinion-articulos .press-body, body.ufm-division .opinion-articulos .press-body p{ font-size: var(--fs-body); line-height: var(--lh-body); } } /* --------------------------------------------------------------------------- 12. BANNER "STORIES OF EURO-MEDITERRANEAN" Antes era un rev_slider. La maqueta lo quiere como banner plano: imagen a sangre, titulo centrado en dos lineas y un boton blanco de 454x72. Se monta con el mismo patron que el hero: imagen + capa absoluta encima. --------------------------------------------------------------------------- */ /* La imagen ya trae el titulo y el boton dibujados, asi que va como fondo de la fila entera y no se le superpone ningun texto. URL relativa a la raiz para que siga valiendo al pasar a produccion. */ :where(.ufm-division) .banner-stories{ position: relative; /* El banner arranca justo donde acaba la banda gris de Related News: en la maqueta no hay ninguna franja blanca entre las dos. El hueco lo dejaba el margen inferior que WPBakery pone por defecto a la fila anterior. */ margin-top: 0; background-image: url(/wp-content/uploads/2026/08/people-scaled.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 1900 / 487; min-height: 200px; } /* La columna de WPBakery no puede crear contexto de posicionamiento propio: el contenido se ancla al .banner-stories, que es quien tiene el aspect-ratio. */ :where(.ufm-division) .banner-stories > .wpb_column, :where(.ufm-division) .banner-stories > .wpb_column > .vc_column-inner, :where(.ufm-division) .banner-stories > .wpb_column > .vc_column-inner > .wpb_wrapper{ position: static; width: 100%; } /* Capa que cubre el banner entero y centra en horizontal Y en vertical. */ :where(.ufm-division) .banner-stories .banner-stories-contenido{ position: absolute; inset: 0; margin: 0; z-index: 3; } :where(.ufm-division) .banner-stories .banner-stories-contenido .wpb_wrapper{ position: static; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* La imagen nueva (people.jpg) es SOLO el mosaico de caras: el titulo y el boton se maquetan aqui, con los valores de la maqueta de Figma. */ :where(.ufm-division) .banner-stories .banner-stories-titulo{ font-family: 'Lato', sans-serif; font-weight: 800; /* 59px sobre el lienzo de 1900: escala con el ancho y se frena en los extremos para que no se coma el banner en pantallas pequenas. */ font-size: clamp(26px, 3.105vw, 59px); line-height: 1.034; text-transform: uppercase; color: #fff; text-align: center; margin: 0 0 clamp(14px, 3.105vw, 59px); max-width: 90%; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); } /* El boton de la maqueta: 454x72 sobre 1900, fondo blanco y radio 10px. */ /* WordPress mete el enlace dentro de un (p). Como hijo de un flex centrado se encogia al contenido y el % del boton se resolvia contra el, no contra el banner. Con ancho completo el porcentaje vuelve a medir bien. */ :where(.ufm-division) .banner-stories .banner-stories-contenido .wpb_wrapper > p{ width: 100%; margin: 0; display: flex; justify-content: center; } body.ufm-division .banner-stories .banner-stories-boton{ display: flex; align-items: center; justify-content: center; /* 454/1900 del lienzo. El tema pone un ancho propio a los enlaces con aspecto de boton, de ahi el !important. */ width: 23.89% !important; min-width: 160px; max-width: 454px; aspect-ratio: 454 / 72; height: auto; padding: 0; background: #fff; text-decoration: none; /* El tema redondea estos enlaces en pastilla; la maqueta pide 10px. */ border-radius: 10px !important; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: clamp(15px, 1.526vw, 29px); line-height: 1.069; text-transform: uppercase; color: #1f346d; z-index: 3; } :where(.ufm-division) .banner-stories .banner-stories-boton:hover{ background: #eaeaea; color: #1f346d; } :where(.ufm-division) .banner-stories .banner-stories-boton:focus-visible{ outline: 3px solid #ffb703; outline-offset: 3px; } @media only screen and (max-width: 767px) { /* Con el ratio 1900/487, a 390px el banner mide 100px de alto: no caben dos lineas de titulo mas el boton. Se libera el ratio a favor de una altura minima. */ :where(.ufm-division) .banner-stories{ aspect-ratio: auto; min-height: 260px; padding: 34px 16px; } :where(.ufm-division) .banner-stories .banner-stories-contenido{ position: static; } :where(.ufm-division) .banner-stories .banner-stories-contenido .wpb_wrapper{ min-height: 192px; } :where(.ufm-division) .banner-stories .banner-stories-titulo{ max-width: 100%; } body.ufm-division .banner-stories .banner-stories-boton{ width: 84% !important; max-width: 320px; /* Sin aspect-ratio y con min-height: area tactil siempre >=48px. */ aspect-ratio: auto; min-height: 48px; padding: 12px 18px; } } /* --------------------------------------------------------------------------- 14. ORDEN DE CASCADA — movil re-afirmado Las secciones 6, 10, 11 y 13 ya traian su bloque de 767px ANTES del punto donde se anadio el de 1035px. Con la misma especificidad gana el ultimo que aparece, asi que en un movil de 390px se estaban aplicando las reglas de TABLET (dos columnas). Se re-afirman aqui, al final, que es donde la cascada los hace ganar. --------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { /* 6. Featured Initiatives: una columna */ body.ufm-division .iniciativas-destacadas .priority-area.projects{ grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 16px; } body.ufm-division .iniciativas-destacadas .priority-area.projects > .vc_span6:first-child, body.ufm-division .iniciativas-destacadas .priority-area.projects > .vc_span6:nth-child(n+2){ grid-column: 1; grid-row: auto; aspect-ratio: 453 / 208; /* height:auto es imprescindible: el tema fija una altura a estas tarjetas y, con aspect-ratio, el navegador derivaba el ANCHO de esa altura (479px dentro de una pista de 370). */ height: auto !important; min-height: 0; } /* 10. Opinion Articles: una columna */ body.ufm-division .opinion-articulos .wpv-loop > .row{ flex-wrap: wrap; } body.ufm-division .opinion-articulos .wpv-loop [class*="col-"]{ flex: 0 0 100%; max-width: 100%; width: 100%; margin-bottom: 24px; } /* 13. Related Agenda: una columna. Dos columnas de 174px no se leen. */ body.ufm-division .agenda-relacionada .home-event-list .row{ flex-wrap: wrap; } body.ufm-division .agenda-relacionada .home-event-list [class*="col-"]{ flex: 0 0 100%; max-width: 100%; width: 100%; margin-bottom: 30px; } } /* --------------------------------------------------------------------------- 15. AJUSTES DE MOVIL (revision sobre dispositivo) --------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { /* EL ENLACE DE CABECERA VA AL FINAL DEL LISTADO. En escritorio ("SEE ALL PROJECTS", "VIEW MORE", "MORE EVENTS") vive en una fila interna junto al titulo. En movil se lee mejor despues del listado, como cierre. `display: contents` en la fila interna disuelve esa caja y sube sus dos columnas a hijas directas del contenedor flex, que es lo que permite reordenarlas con `order` respecto al listado. */ body.ufm-division .iniciativas-destacadas .vc_column-inner .wpb_wrapper, body.ufm-division .opinion-articulos .vc_column-inner .wpb_wrapper, body.ufm-division .agenda-relacionada .vc_column-inner .wpb_wrapper{ display: flex; flex-direction: column; } body.ufm-division .iniciativas-destacadas .wpb_wrapper .vc_inner, body.ufm-division .opinion-articulos .wpb_wrapper .vc_inner, body.ufm-division .agenda-relacionada .wpb_wrapper .vc_inner{ display: contents; } body.ufm-division .iniciativas-destacadas .vc_inner .wpb_column:first-child, body.ufm-division .opinion-articulos .vc_inner .wpb_column:first-child, body.ufm-division .agenda-relacionada .vc_inner .wpb_column:first-child{ order: 1; } body.ufm-division .iniciativas-destacadas .wpb_wrapper .wpb_text_column, body.ufm-division .opinion-articulos .wpb_wrapper .wpb_text_column, body.ufm-division .agenda-relacionada .wpb_wrapper .wpb_text_column{ order: 2; } body.ufm-division .iniciativas-destacadas .vc_inner .wpb_column:last-child, body.ufm-division .opinion-articulos .vc_inner .wpb_column:last-child, body.ufm-division .agenda-relacionada .vc_inner .wpb_column:last-child{ order: 3; margin-top: 22px; } /* Ya no es una esquina superior derecha: alineado a la izquierda con el resto del contenido y la flecha pegada al texto. */ body.ufm-division .iniciativas-destacadas .vc_inner .wpb_column:last-child p, body.ufm-division .opinion-articulos .vc_inner .wpb_column:last-child p, body.ufm-division .agenda-relacionada .vc_inner .wpb_column:last-child p{ text-align: left !important; margin: 0; } /* La flecha y el texto, en una sola linea. El icono y el bloque de texto son dos elementos de WPBakery distintos, y la regla que pone la seccion en columna tambien les afectaba: salian uno debajo del otro. Aqui se le devuelve la fila a ese wrapper y se ordena texto + flecha. */ body.ufm-division .iniciativas-destacadas .vc_inner .wpb_column:last-child .wpb_wrapper, body.ufm-division .opinion-articulos .vc_inner .wpb_column:last-child .wpb_wrapper, body.ufm-division .agenda-relacionada .vc_inner .wpb_column:last-child .wpb_wrapper{ flex-direction: row; align-items: center; gap: 10px; } body.ufm-division .iniciativas-destacadas .vc_inner .wpb_column:last-child .wpb_text_column, body.ufm-division .opinion-articulos .vc_inner .wpb_column:last-child .wpb_text_column, body.ufm-division .agenda-relacionada .vc_inner .wpb_column:last-child .wpb_text_column{ order: 1; margin: 0; } /* El hijo flex es el contenedor del icono, no el .floated-arrow de dentro: el `order` hay que ponerlo ahi o la flecha se queda a la izquierda. */ body.ufm-division .iniciativas-destacadas .vc_inner .fourk-icon-container, body.ufm-division .opinion-articulos .vc_inner .fourk-icon-container, body.ufm-division .agenda-relacionada .vc_inner .fourk-icon-container{ order: 2; margin: 0 !important; } body.ufm-division .iniciativas-destacadas .vc_inner .floated-arrow, body.ufm-division .opinion-articulos .vc_inner .floated-arrow, body.ufm-division .agenda-relacionada .vc_inner .floated-arrow{ float: none !important; margin: 0 !important; display: flex; align-items: center; } /* El titulo y "SEE MORE PUBLICATIONS" se tocaban: la tarjeta usa space-between y en movil, sin aspect-ratio, no sobra alto que repartir, asi que el hueco era 0. */ body.ufm-division .publicaciones .publicaciones-tarjeta .newtitleh2{ margin-bottom: 18px; } /* El min-height del titulo reservaba dos lineas para igualar las tres tarjetas. En una sola columna no hay nada que igualar, y con titulos de una linea dejaba un hueco muerto bajo el titulo. */ body.ufm-division .opinion-articulos .press-title{ min-height: 0; margin-bottom: 6px; } /* margin-top:auto solo separa cuando sobra alto (varias columnas). En una sola columna la tarjeta mide lo que su contenido, asi que auto valia 0 y el boton quedaba pegado al extracto. */ body.ufm-division .agenda-relacionada .event-btn{ margin-top: 20px !important; } /* 72px entre tarjetas era demasiado: la rejilla suma su gap al margen inferior que el tema da a cada item. Se anula el margen y se baja el gap. */ body.ufm-division .tarjetas-plataformas .platform_tab{ gap: 14px; } body.ufm-division .tarjetas-plataformas .platform_policy-item{ margin: 0 !important; } } /* --------------------------------------------------------------------------- 16. AJUSTES POSTERIORES (anadidos tras la revision de septiembre) --------------------------------------------------------------------------- */ :where(.ufm-division) .newtitleh2 h2{ text-transform: uppercase !important; } :where(.ufm-division) .agenda-relacionada .home-event-list .event-title{ font-size: 23px; line-height: 28px; margin-bottom: 10px; font-weight: 700; } :where(.ufm-division) .agenda-relacionada .home-event-list .event-excerpt{ color: #1f346d; } /* ===== Barra de anclas (Overview / Sectors / ...) — Responsive ===== */ /* TABLET: permitir salto de línea y centrar, sin overflow */ @media (max-width: 1024px) and (min-width: 768px) { :where(.ufm-division) .barra-anclas .wpb_text_column p{ flex-wrap: wrap; /* mata el overflow horizontal */ justify-content: center; row-gap: 4px; column-gap: 22px; } :where(.ufm-division) .barra-anclas .wpb_text_column p a{ padding: 8px 4px; /* área táctil >= 40px de alto aprox */ } } /* MOVIL: varias lineas centradas. Anula la fila deslizable de la seccion 3 (se probo en staging y se descarto). */ @media (max-width: 767px) { :where(.ufm-division) .barra-anclas .wpb_wrapper > p{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; overflow-x: visible; padding: 6px 12px; } :where(.ufm-division) .barra-anclas .wpb_wrapper > p a{ white-space: nowrap; flex: 0 0 auto; font-size: 15px; padding: 6px 2px; } }