. Ese párrafo era un hijo más del flex de acciones: vacío en escritorio, se llevaba un hueco de gap y el botón de cita previa terminaba 32 px antes del margen (23-sep-2026). Con `contents` el párrafo no cuenta para el layout y la lupa, que va fija, sigue igual. */ .vis-principal__acciones > p:has(> .vis-buscar-movil) { display: contents; } /* Por encima del umbral manda la barra institucional, que ya tiene su enlace. */ @media (min-width: 1280px) { .vis-buscar-movil { display: none; } } /* --- Sin arrastre lateral en móvil --------------------------------------- El panel del menú espera cerrado FUERA de la pantalla (fixed a inset:0 y desplazado su propio ancho con transform), y un elemento fijo desplazado sí alarga el documento: la página se arrastraba 300 px a los lados y la barra horizontal salía en todas las vistas estrechas. Se recorta el propio panel mientras está cerrado, y no con overflow en la raíz ni en el body: `hidden` deja la cabecera sticky sin pegarse y `clip` en el body no alcanza a un elemento fijo. `scaleX(0)` sobre el desplazamiento deja el panel sin área que desbordar; al abrirlo el plugin escribe su propio transform y la entrada lateral se ve igual. */ html:not(:has(.zgn-nav-toggle--unico[aria-expanded="true"])) .zgn-nav { transform: translateX(100%) scaleX(0); } /* --- La cabecera se pega de verdad ---------------------------------------- La cabecera declara `sticky` desde el volcado, pero no se pegaba: WordPress envuelve cada part en un

y un elemento sticky no puede salir de su padre, que aquí mide exactamente lo mismo que la cabecera. El envoltorio se disuelve con `display: contents` y la cabecera pasa a pegarse contra el viewport, que es lo que se pedía. */ .wp-site-blocks > header.wp-block-template-part, .wp-site-blocks > div.wp-block-template-part:first-child { display: contents; } /* --- Secciones sin antetítulo --------------------------------------------- El rótulo en caja alta sobre el titular («VIVIENDA PÚBLICA EN CANARIAS», «HISTORIA», «NUESTROS SERVICIOS») se retira de todas las secciones de contenido: repetía en pequeño lo que el titular dice entero, y la portada ya había prescindido de él. Con una sola línea por sección la entrada se lee de un golpe. NO alcanza al chrome —pie, menú y buscador— ni a los rótulos que nombran una lista («Relacionadas», los filtros de actualidad, la ficha de promoción): ahí el rótulo no repite el titular, es el único encabezado que hay. */ .vis-nosotros__rotulo, .vis-promos__rotulo, .vis-contacto__rotulo, .vis-actualidad__rotulo, .vis-inquilino__rotulo { display: none; } /* --- La X de cerrar, por encima del panel (movil y tableta) ---------------- El panel no tiene cierre propio: cierra la misma hamburguesa de la barra, que muda a aspa. Pero ese boton vive dentro de `.vis-principal`, que es `sticky` con z-index 40 y por tanto ABRE UN CONTEXTO DE APILAMIENTO: su 9010 se resuelve dentro de ese contexto y el panel, a 9000 y en el contexto raiz, le pasa por encima. El aspa quedaba debajo del panel y no habia salida visible. Se sube la cabecera entera mientras el panel esta abierto: asi se ve el aspa y, de paso, la marca; y el panel reserva su alto para que el primer enlace no quede debajo. La medida es la del cierre del buscador: 23 px de aire, 46 de boton y la escala. */ body.zgn-nav-abierto .vis-principal { z-index: 9010; } body.zgn-nav-abierto .zgn-nav__panel { padding-block-start: calc(23px + 46px + var(--wp--custom--space-5)); } /* --- Pie en el teléfono: ritmo entre grupos (9-nov-2026) --------------------- Apilados, los cuatro grupos de enlaces quedaban a 34 px entre el rótulo y su primer enlace y a 44 entre un grupo y el siguiente: casi lo mismo, así que no se leía dónde acababa uno y empezaba otro. El rótulo se pega a su lista (8 px más los 10 de relleno del enlace) y los grupos se separan 48. El alto total del pie no cambia: los enlaces siguen a 42 px para el dedo. */ @media (max-width: 599px) { html body .vis-pie__columnas { row-gap: var(--wp--custom--space-7); } html body .vis-pie__rotulo { margin-block-end: var(--wp--custom--space-2); } } /* --- Marco en pantallas muy anchas (13-nov-2026) -------------------------- Por encima de 1920 px la cabecera y los heros a dos columnas (portada y ficha de promoción) se iban a los bordes de la pantalla, mientras las secciones de contenido se quedan en wideSize: en un monitor de 2560 o 4K el logo, el menú y las fotos quedaban lejísimos del resto. Se encuadran en un marco de 1920 px centrado. Los fondos siguen a sangre: se mete padding, no max-width. Hasta 1920 px no cambia nada. Con 100vw y no con 100%: el hero de la promoción cuelga de un contenedor estrecho y sale a sangre con márgenes negativos, así que su 100% no es la pantalla. */ :root { --vis-marco: 1920px; --vis-marco-margen: max(0px, (100vw - var(--vis-marco)) / 2); } @media (min-width: 1921px) { .vis-institucional .vis-institucional__barra, .vis-principal .vis-principal__barra { padding-inline: calc(var(--vis-marco-margen) + var(--vis-gutter)); } /* Con `html body` delante: inicio.css se carga después y su `.vis-hero { padding: 0 }` ganaría a igual especificidad. */ html body .vis-hero { padding-inline: var(--vis-marco-margen); } /* !important: el bloque del hero lleva padding 0 en línea (style=""). */ .vis-promo > .vis-promo__hero { padding-inline: var(--vis-marco-margen) !important; } } /* componentes.css */ /* Piezas compartidas entre páginas: lo que no es cabecera ni pie pero tampoco * es de una sola página. * * QUÉ HAY AQUÍ * * El hero interior (migas, titular a dos pesos y entradilla) que abre todas las * páginas menos la portada; la portada con foto y su cuadrado; el índice de * accesos rápidos (vis-faq-indice) que usan Conócenos, Servicios, Acceso, * Portal del inquilino y Preguntas frecuentes; el acordeón de preguntas * (vis-faq) y las filas de documentos (vis-recursos), que aparecen en cuatro * páginas cada uno; los mandos de las pistas deslizables y el botón terciario. * * Se encola en todas las páginas, justo detrás de chrome.css: son piezas de * varias plantillas y condicionarlas por página es una lista que se desactualiza * sola. Cuando una pieza pase a usarse en una sola página, su sitio es la hoja * de esa página. * * Nació el 23-sep-2026 al vaciar chrome.css, que había acumulado todo esto * bajo el rótulo «cabecera y pie». Las reglas se movieron tal cual y en su * orden; la consolidación de las redefiniciones es un paso aparte. * * @package zaguan */ /* --- Botón terciario del sistema ----------------------------------------- Texto sin caja y la flecha en una celda de 32px sobre gris nube; al posarse la celda se tiñe de azul y el icono pasa a blanco, en 520ms. La flecha gira con el morph y no se desplaza, igual que en el principal. ------------------------------------------------------------------------ */ .vis-terciario { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--wp--preset--font-size--vis-mini); font-weight: var(--wp--custom--fw-semibold); letter-spacing: var(--wp--custom--tracking-nav); text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--wp--preset--color--vis-color-texto); transition: color 520ms cubic-bezier(0.33, 1, 0.68, 1); } .vis-terciario:hover, .vis-terciario:focus-visible { color: var(--wp--preset--color--vis-kit-azul-profundo); } .vis-terciario__celda { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; } .vis-terciario:hover .vis-terciario__celda, .vis-terciario:focus-visible .vis-terciario__celda { color: var(--wp--preset--color--vis-color-texto-inv); background-color: var(--wp--preset--color--vis-kit-azul-profundo); } /* ---------------------------------------------------------------- mandos */ /* Flechas de las pistas deslizables (portada) y de la cronología (Conócenos). Son core/button con tagName button: el texto («Anterior», «Siguiente») queda para el editor y la flecha la pinta una máscara, como en el artboard. El aria-label y el data-zgn-pista los añade zaguan_mandos_a11y() al renderizar. Ocultas hasta que su JavaScript marca el grupo: una flecha muerta no se ofrece. */ .vis-mando { margin: 0; } .vis-mando .wp-block-button__link { display: none; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 0; font-size: 0; color: var(--wp--preset--color--vis-color-texto); transition: background-color 120ms cubic-bezier(0.2, 0, 0.2, 1), color 120ms cubic-bezier(0.2, 0, 0.2, 1), opacity 160ms; } .zgn-pista-lista .vis-mando .wp-block-button__link, .vis-cronologia-lista .vis-mando .wp-block-button__link { display: flex; } .vis-mando .wp-block-button__link::before { content: ""; display: block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } .vis-mando--anterior .wp-block-button__link::before { transform: scaleX(-1); } .vis-mando--relleno .wp-block-button__link { color: var(--wp--preset--color--vis-color-texto-inv); box-shadow: none; } .vis-mando .wp-block-button__link[aria-disabled="true"] { cursor: default; opacity: 0.35; } /* ---------------------------------------------------------- hero interior */ /* Hero común a todas las páginas interiores: migas, titular en DOS líneas (la última parte en , en bloque) y entradilla de DOS líneas. Mismo espaciado y tipografía en todas, así que miden lo mismo; lo propio de cada página —color del acento, icono decorativo, foto de debajo— sigue en su hoja. La clase se repite en el selector (especificidad 0,2,0) para ganar a las reglas tipográficas antiguas de cada hoja de página sin !important. */ .vis-hero-interior.vis-hero-interior { position: relative; overflow: hidden; padding-inline: max(var(--vis-gutter), (100% - var(--wp--style--global--wide-size)) / 2); padding-block: var(--wp--custom--space-7) var(--wp--custom--space-8); } .vis-hero-interior.vis-hero-interior > *, .vis-hero-interior__cabecera.vis-hero-interior__cabecera > * { position: relative; z-index: 1; margin-block: 0; } .vis-hero-interior.vis-hero-interior .zgn-migas { font-size: var(--wp--preset--font-size--vis-xs); font-weight: var(--wp--custom--fw-semibold); letter-spacing: var(--wp--custom--tracking-etiqueta); text-transform: uppercase; color: var(--wp--preset--color--vis-kit-texto-piedra); padding-block-end: var(--wp--custom--space-7); } .vis-hero-interior__titulo.vis-hero-interior__titulo { margin: 0; max-width: none; font-size: clamp(2.5rem, 5.6vw, 5.5rem); line-height: 0.9; letter-spacing: -0.045em; font-weight: 300; text-wrap: balance; } .vis-hero-interior__titulo.vis-hero-interior__titulo strong { display: block; font-weight: 500; } /* En escritorio cada mitad del titular ocupa exactamente una línea. */ @media (min-width: 782px) { .vis-hero-interior__titulo.vis-hero-interior__titulo { white-space: nowrap; } } .vis-hero-interior__entradilla.vis-hero-interior__entradilla { display: -webkit-box; margin: 0; margin-block-start: var(--wp--custom--space-7); max-width: 52ch; min-height: 3em; overflow: hidden; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.5; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* La entradilla es el extracto de la página (core/post-excerpt): el bloque lleva las clases y pinta el texto en su propio párrafo. Con `contents` el texto vuelve a ser hijo directo de la caja que recorta a dos líneas. */ .wp-block-post-excerpt:is(.vis-hero-interior__entradilla, .vis-hero__entradilla) > .wp-block-post-excerpt__excerpt { display: contents; } /* Variante de las páginas servidas por plantilla (page.html, page-legal.html): mismo acento azul e icono de la marca que Conócenos. El acento es el de la sección (chrome.css): azul petróleo en las páginas genéricas y rojo en Servicios y Promociones (28-sep-2026). */ .vis-hero-interior--pagina .vis-hero-interior__titulo strong, .vis-hero-interior--pagina .zgn-migas a { color: var(--vis-acento-texto, var(--wp--preset--color--vis-kit-azul-petroleo)); text-decoration: none; } .vis-hero-interior--pagina .zgn-migas a:hover, .vis-hero-interior--pagina .zgn-migas a:focus-visible { color: var(--wp--preset--color--vis-kit-tinta-calida); } .vis-hero-interior--pagina::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-end: -140px; width: min(520px, 40vw); aspect-ratio: 1; background: url("https://visocan.es/wp-content/themes/visocan/assets/img/icono-05-azul.svg") right bottom / contain no-repeat; pointer-events: none; z-index: 0; } /* En las secciones en rojo (las mismas de chrome.css) el icono toma el acento: el SVG hace de máscara y el color lo pone el fondo. */ :is(body.vis-pagina--servicios, body.vis-pagina-hija--servicios, body.vis-pagina--promociones) .vis-hero-interior--pagina::after { background: var(--vis-acento-texto); -webkit-mask: url("https://visocan.es/wp-content/themes/visocan/assets/img/icono-05-azul.svg") right bottom / contain no-repeat; mask: url("https://visocan.es/wp-content/themes/visocan/assets/img/icono-05-azul.svg") right bottom / contain no-repeat; } /* --- Hero interior en móvil ---------------------------------------------------- Con foto, el hero y la foto llenan juntos la pantalla (100svh menos la cabecera, que mide fichas-morph.js): mitad texto, mitad foto. El icono decorativo va a plena tinta y sin tocar el texto: 220 px de alto, abajo a la derecha, con 180 px sobre la foto y 40 dentro del padding inferior del hero, que mide 96: no alcanza la entradilla en ningún móvil, por bajo que sea, porque el hueco lo reserva el padding y no el alto. Migas, titular y entradilla van arriba con el ritmo del resto de la web: 24 px entre cada pieza. El titular, al mayor tamaño con el que la palabra más larga de todos los heros («transparencia», en negrita) cabe sin partirse. El cuadrado de la foto se quita: chocaba con el icono. Sin foto (plantillas de página) el icono queda dentro del hero, con su hueco reservado en el padding inferior. */ @media (max-width: 781px) { .vis-hero-interior.vis-hero-interior:not(.vis-hero-interior--pagina) { box-sizing: border-box; min-height: calc((100svh - var(--vis-cabecera-alto, 89px)) / 2); padding-block-end: 96px; overflow: visible; z-index: 2; } .vis-hero-interior + .wp-block-image img { height: calc((100svh - var(--vis-cabecera-alto, 89px)) / 2); } .vis-hero-interior + .wp-block-image::after { display: none; } .vis-hero-interior.vis-hero-interior::after { inset-inline-end: 0; width: 220px; height: 220px; aspect-ratio: auto; background-position: right bottom; background-size: contain; opacity: 1; } .vis-hero-interior.vis-hero-interior:not(.vis-hero-interior--pagina)::after { inset-block-end: -180px; } .vis-hero-interior--pagina.vis-hero-interior--pagina { padding-block-end: calc(220px + var(--wp--custom--space-5)); } .vis-hero-interior__titulo.vis-hero-interior__titulo { font-size: 13vw; } .vis-hero-interior.vis-hero-interior .zgn-migas { padding-block-end: var(--wp--custom--space-5); } .vis-hero-interior__entradilla.vis-hero-interior__entradilla { margin-block-start: var(--wp--custom--space-5); } } /* --- Preguntas frecuentes ---------------------------------------------------- Acordeón sobre core/details, agrupado por temas. El comportamiento (apertura animada, schema FAQPage, enlace por hash) es del módulo FAQ de Zaguán FSE Core, que engancha la clase `zgn-faq` de cada lista. Aquí solo el aspecto. */ .vis-faq { margin-block: 0 var(--wp--custom--space-8); } .vis-faq > *, .vis-faq__lista > * { margin-block: 0; } .vis-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--custom--space-5); padding-block: var(--wp--custom--space-5); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--wp--preset--color--vis-color-texto); transition: color 120ms cubic-bezier(0.2, 0, 0.2, 1); } /* El «+» que gira a «×» al abrir, en azul profundo sobre un disco azul muy claro: el mando se ve sin competir con la pregunta. El signo es una imagen de fondo y no una máscara porque el disco ya ocupa el fondo del pseudoelemento, así que su color va literal en el SVG y no sale de un preset. */ .vis-faq__item > summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background-color: var(--wp--custom--vsc-azul-cielo-050); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6488' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 18px 18px; transition: rotate 200ms cubic-bezier(0.2, 0, 0.2, 1); } .vis-faq__item[open] > summary::after { rotate: 45deg; } /* Al pasar, al enfocar y con la pregunta abierta, el disco se llena de azul corporativo y el signo pasa a blanco. El color va literal en el SVG por el mismo motivo que arriba: es una imagen de fondo, no una máscara. */ .vis-faq__item > summary:hover::after, .vis-faq__item > summary:focus-visible::after, .vis-faq__item[open] > summary::after { background-color: var(--wp--preset--color--vis-vsc-azul); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .vis-faq__item > summary:hover, .vis-faq__item > summary:focus-visible, .vis-faq__item[open] > summary { color: var(--vis-acento-texto); } .vis-faq__item p { max-width: 70ch; margin: 0; padding-block-end: var(--wp--custom--space-5); line-height: 1.6; color: var(--wp--preset--color--vis-color-texto); } .vis-faq__item p a { color: var(--vis-acento-texto); } /* --- Preguntas frecuentes: portada, índice y cuerpo -------------------------- Página con plantilla page-landing: hero interior con foto, índice de temas con anclas y el acordeón alineado a la izquierda del ancho de la web. */ .vis-faq-portada::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-end: -140px; width: min(520px, 40vw); aspect-ratio: 1; background: url("https://visocan.es/wp-content/themes/visocan/assets/img/icono-05-azul.svg") right bottom / contain no-repeat; pointer-events: none; z-index: 0; } .vis-faq-portada .vis-hero-interior__titulo strong, .vis-faq-portada .zgn-migas a { color: var(--wp--preset--color--vis-kit-azul-petroleo); text-decoration: none; } .vis-faq-portada__imagen { position: relative; margin: 0; } .vis-faq-portada__imagen img { width: 100%; height: clamp(240px, 32vw, 440px); object-fit: cover; object-position: center 62%; display: block; } .vis-faq-portada__imagen::after { content: ""; position: absolute; inset-block-start: -1px; inset-inline-end: 0; width: 80px; height: 81px; background-color: var(--wp--preset--color--vis-kit-azul-profundo); pointer-events: none; } /* Índice: cuatro celdas enjauladas, como la barra institucional. Toda la celda es pulsable (el ::after del enlace la cubre). */ .vis-faq-indice { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; } .vis-faq-indice > * { margin-block: 0; } .vis-faq-indice__item { position: relative; color: var(--wp--preset--color--vis-color-texto); transition: background-color 160ms cubic-bezier(0.2, 0, 0.2, 1), color 160ms cubic-bezier(0.2, 0, 0.2, 1); } .vis-faq-indice__item > * { margin-block: 0; } .vis-faq-indice__item::before { content: ""; width: 32px; height: 32px; margin-block-end: var(--wp--custom--space-4); background-color: var(--vis-acento-texto); -webkit-mask: var(--vis-faq-icono) center / contain no-repeat; mask: var(--vis-faq-icono) center / contain no-repeat; transition: background-color 160ms cubic-bezier(0.2, 0, 0.2, 1); } .vis-faq-indice__titulo { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); font-weight: var(--wp--custom--fw-semibold); line-height: 1.25; letter-spacing: -0.01em; } .vis-faq-indice__titulo a { color: inherit; text-decoration: none; } .vis-faq-indice__titulo a::after { content: ""; position: absolute; inset: 0; } .vis-faq-indice__item:hover, .vis-faq-indice__item:focus-within { color: var(--wp--preset--color--vis-vsc-blanco); background-color: var(--wp--preset--color--vis-kit-azul-profundo); } .vis-faq-indice__item:hover::before, .vis-faq-indice__item:focus-within::before { background-color: var(--wp--preset--color--vis-vsc-blanco); } .vis-faq-indice__item--vivienda { --vis-faq-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .vis-faq-indice__item--alquiler { --vis-faq-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'/%3E%3Ccircle cx='16.5' cy='7.5' r='1' fill='%23000'/%3E%3C/svg%3E"); } .vis-faq-indice__item--venta { --vis-faq-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1' fill='%23000'/%3E%3C/svg%3E"); } .vis-faq-indice__item--mantenimiento { --vis-faq-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); } .vis-faq-cuerpo > .vis-faq:last-child { margin-block-end: 0; } /* Fundido al abrir y al cerrar. `::details-content` con allow-discrete retrasa el ocultado del contenido hasta que termina el fundido de salida; sin soporte, al menos entra con fundido. */ .vis-faq__item::details-content { opacity: 0; transition: opacity 300ms ease, content-visibility 300ms allow-discrete; } .vis-faq__item[open]::details-content { opacity: 1; } @supports not selector(::details-content) { .vis-faq__item[open] > .zgn-faq__cuerpo { animation: vis-faq-fundido 300ms ease both; } } @keyframes vis-faq-fundido { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .vis-faq__item::details-content { transition-duration: 0.01ms; } } @media (max-width: 1023px) { .vis-faq-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 519px) { .vis-faq-indice { grid-template-columns: 1fr; } } .vis-faq-indice { display: grid; padding-inline: max(var(--vis-gutter), (100% - var(--wp--style--global--wide-size)) / 2); border-block-end: var(--vis-filete); } .vis-faq-indice__item { display: flex; flex-direction: column; gap: var(--wp--custom--space-2); padding: var(--wp--custom--space-6) var(--wp--custom--space-5); border-inline-start: var(--vis-filete); } .vis-faq-indice__item:last-child { border-inline-end: var(--vis-filete); } .vis-faq__item { border-block-start: var(--vis-filete); } .vis-faq__item:last-child { border-block-end: var(--vis-filete); } /* Cada tema de la FAQ es una sección con su propio filete a ancho completo. El padding lateral pasa del contenedor a cada sección para que el filete llegue de borde a borde; el contenido sigue a la izquierda, a 880 px. */ .vis-faq-cuerpo { padding-inline: max(var(--vis-gutter), (100% - var(--wp--style--global--wide-size)) / 2); padding-block: var(--wp--custom--space-8); padding: 0; } .vis-faq-cuerpo > .vis-faq { scroll-margin-block-start: calc(var(--vis-cabecera-alto, 135px) + var(--wp--custom--space-5)); max-width: none; margin: 0; padding: var(--wp--custom--space-8) max(var(--vis-gutter), (100% - var(--wp--style--global--wide-size)) / 2); } .vis-faq-cuerpo > .vis-faq + .vis-faq { border-block-start: var(--vis-filete); } .vis-faq-cuerpo > .vis-faq > * { max-width: 880px; } .vis-faq .vis-faq__rotulo { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-transform: none; color: var(--wp--preset--color--vis-color-texto); } @media (max-width: 1023px) { .vis-faq-indice { border-block-end: 0; } .vis-faq-indice__item { border-block-end: var(--vis-filete); } .vis-faq-indice__item:nth-child(2n) { border-inline-end: var(--vis-filete); } } @media (max-width: 519px) { .vis-faq-indice__item { border-inline-end: var(--vis-filete); } } /* --- Recursos: lista de descargas ---------------------------------------------- Misma sección que la FAQ (vis-faq-cuerpo + vis-faq: rótulo grande, contenido a la izquierda a 880 px). Cada documento es una fila con el filete estándar; toda la fila es pulsable y al pasar se pone en azul con texto blanco. */ .vis-recursos__lista > * { margin-block: 0; } .vis-recursos__item { position: relative; column-gap: var(--wp--custom--space-5); border-block-start: var(--vis-filete); color: var(--wp--preset--color--vis-color-texto); transition: background-color 160ms cubic-bezier(0.2, 0, 0.2, 1), color 160ms cubic-bezier(0.2, 0, 0.2, 1); } .vis-recursos__item:last-child { border-block-end: var(--vis-filete); } .vis-recursos__item > * { margin: 0; } .vis-recursos__item::before, .vis-recursos__item::after { content: ""; background-color: var(--vis-acento-texto); transition: background-color 160ms cubic-bezier(0.2, 0, 0.2, 1); } .vis-recursos__item::before { grid-column: 1; width: 24px; height: 24px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat; } .vis-recursos__item::after { grid-column: 4; grid-row: 1; } .vis-recursos__titulo { grid-column: 2; grid-row: 1; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: var(--wp--custom--fw-semibold); line-height: 1.35; letter-spacing: -0.01em; } .vis-recursos__titulo a { color: inherit; } /* Toda la fila es el enlace. */ .vis-recursos__titulo a::after { content: ""; position: absolute; inset: 0; } .vis-recursos__item:hover, .vis-recursos__item:focus-within { color: var(--wp--preset--color--vis-vsc-blanco); background-color: var(--wp--preset--color--vis-kit-azul-profundo); } .vis-recursos__item:hover::before, .vis-recursos__item:hover::after, .vis-recursos__item:focus-within::before, .vis-recursos__item:focus-within::after { background-color: var(--wp--preset--color--vis-vsc-blanco); } @media (max-width: 599px) { .vis-recursos__item { row-gap: var(--wp--custom--space-1); } .vis-recursos__item::after { grid-column: 3; } } /* Recursos sin metadatos: icono de documento + título, y a la derecha el icono morph de descarga dentro del propio enlace (zaguan_recursos_icono). Al pasar se transforma en «download» y baja un poco con rebote. */ .vis-recursos__item { display: grid; align-items: center; padding: var(--wp--custom--space-5) var(--wp--custom--space-4); grid-template-columns: 24px minmax(0, 1fr); } .vis-recursos__item::after { width: 20px; height: 20px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat; content: none; } .vis-recursos__titulo a { text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: var(--wp--custom--space-5); } .vis-recursos__icono { flex: none; width: 22px; height: 22px; color: var(--vis-acento-texto); } .vis-recursos__item:hover .vis-recursos__icono, .vis-recursos__item:focus-within .vis-recursos__icono { translate: 0 3px; color: var(--wp--preset--color--vis-vsc-blanco); } @media (prefers-reduced-motion: reduce) { .vis-recursos__icono { transition: none; } } @media (max-width: 599px) { .vis-recursos__item { grid-template-columns: 24px minmax(0, 1fr); } } /* Filas de documento con subtítulo (Perfil del contratante): el subtítulo va bajo el título, en la misma columna, y el icono se centra en las dos filas. */ .vis-recursos__item::before { grid-row: 1 / span 2; align-self: center; } /* Las flechas de las pistas, a color sólido y sin filete: la de retroceso llevaba fondo blanco con un borde de 1px y la de avance ya era sólida, así que el par no se leía como un par. */ .vis-mando .wp-block-button__link { cursor: pointer; background-color: var(--wp--preset--color--vis-vsc-superficie); box-shadow: none; } /* El mando de avance conserva su tinta: la regla de arriba va después en la hoja que la de `--relleno` y se la llevaba por delante, dejando el par en el mismo gris. */ .vis-mando--relleno .wp-block-button__link { background-color: var(--wp--preset--color--vis-color-texto); } /* En móvil la entradilla del hero interior deja de recortarse a dos líneas: con la columna estrecha, en «Conócenos» la frase pide tres y se servía cortada a media palabra. El recorte existe para que todas las cabeceras midan igual, y eso solo importa en escritorio. */ @media (max-width: 781px) { .vis-hero-interior__entradilla.vis-hero-interior__entradilla { -webkit-line-clamp: none; line-clamp: none; overflow: visible; min-height: 0; } } /* Mandos de la pista de actualidad, en ámbar al pasar: la sección es ámbar desde hoy y las flechas eran lo único que seguía virando a pizarra. */ .vis-mando .wp-block-button__link:hover:not([aria-disabled="true"]), .vis-mando .wp-block-button__link:focus-visible, .vis-mando--relleno .wp-block-button__link:hover:not([aria-disabled="true"]), .vis-mando--relleno .wp-block-button__link:focus-visible { color: var(--wp--preset--color--vis-color-texto); background-color: var(--wp--preset--color--vis-vsc-amarillo); } /* --- Accesos rápidos sobre el hero: tamaño del título (23-sep-2026) --------- Una sola medida para las tarjetas de cristal de todas las páginas (Conócenos, Servicios, Acceso a vivienda protegida, Portal del inquilino y Preguntas frecuentes). Cada hoja de página la aplica con su selector. Escritorio: 4px menos que la medida anterior, clamp(19px, 1.3vw + 2px, 22px). Móvil: la tarjeta mide un 36 % del ancho y una palabra larga («Mantenimiento») no cabía a 15px, así que el título escala con el ancho de la ventana. Las tarjetas reservan siempre dos líneas (`min-height: 2lh`) y reparten el texto con `balance`; el guionado es la última red si una palabra no cabe. */ :root { --vis-acceso-titulo: clamp(0.9375rem, 1.3vw - 2px, 1.125rem); --vis-acceso-titulo-movil: clamp(0.75rem, 3.4vw, 0.9375rem); } /* --- Accesos rápidos: sin palabras partidas (23-sep-2026) ------------------ El guionado automático partía «Mantenimiento» o «demandantes». Fuera: la palabra más larga fija el ancho mínimo de la línea y el título reparte el resto con `balance`. La especificidad gana a las reglas de cada página. */ html body .vis-faq-indice.vis-faq-indice .vis-faq-indice__titulo a { min-width: min-content; hyphens: manual; overflow-wrap: normal; word-break: normal; } /* --- Recursos: qué es cada fila ------------------------------------------------ El icono de la izquierda dice QUÉ es el recurso; el de la derecha (morph, lo pone zaguan_recursos_icono) dice QUÉ PASA al pulsar. Tres tipos, por clase del item: --documento (por defecto, documento de texto · descarga), --externo (globo: sitio web ajeno, se abre en ventana nueva) y --portal (enlace: página del propio portal). Sin línea de apoyo: el título basta. */ .vis-recursos__item--externo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); } .vis-recursos__item--portal::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); } /* Las filas con tipo (las de la página de Recursos) van sin filete arriba ni abajo: el aire y el fondo azul del hover ya separan. Se cuelga del modificador y no del contenedor .vis-recursos, que Empleo público también usa: sus listas conservan el filete. */ .vis-recursos__item[class*="vis-recursos__item--"], .vis-recursos__item[class*="vis-recursos__item--"]:last-child { border-block-start: 0; border-block-end: 0; } /* En los recursos del portal la flecha no cambia de forma (arrow-right → arrow-right): el gesto es el desplazamiento, 3 px a la derecha, el mismo que la descarga hace hacia abajo. */ .vis-recursos__item--portal:hover .vis-recursos__icono, .vis-recursos__item--portal:focus-within .vis-recursos__icono { translate: 3px 0; } /* Titulares de sección a una sola medida (28-sep-2026). Conócenos, Contacto, Actualidad y las notas y destacadas de la portada ya usaban clamp(2.3125rem, 4vw, 3.5rem) —37 px en móvil, 56 px en escritorio—; el resto de las páginas principales llevaba cada una la suya, de 44 a 62 px. Se igualan aquí y no en cada hoja de página porque esas hojas cargan después: el `body h2.wp-block-heading` da la especificidad para ganar a sus reglas de sección y de media query sin !important. Solo los titulares de sección: los de tarjetas, diapositivas y listas conservan su tamaño. 13-oct-2026: la medida pasa a ser un token, `--vis-titular-seccion`, que usan esta regla y las hojas de página en vez de repetir el clamp. En móvil sube 5 px: 42 px en lugar de 37. */ :root { --vis-titular-seccion: clamp(2.3125rem, 4vw, 3.5rem); /* Aire vertical de cada sección, arriba y abajo (13-oct-2026): 64 px en móvil, 96 px desde 1200 px y fluido entre medias. Lo usan las secciones de la portada en lugar de su par space-8/9/10 propio. */ --vis-espacio-seccion: clamp(4rem, 2.6667rem + 4.4444vw, 6rem); /* Hueco entre la cabecera de una sección (titular y, si la hay, entradilla o enlace) y su contenido: 32 px en móvil, 48 desde 1200. */ --vis-espacio-titular: clamp(2rem, 1.3333rem + 2.2222vw, 3rem); /* Relleno inferior de una sección con cuadrado de firma en su borde de abajo, en móvil (9-nov-2026): el lado del cuadrado (68 px por debajo de 782, medirLado() en cuadro-fisico.js) más 32 px de aire hasta el último texto o botón. Lo usan las hojas de cada sección en (max-width: 781px). */ --vis-reserva-cuadro: calc(68px + var(--wp--custom--space-6)); } @media (max-width: 47.9375rem) { :root { /* 42 px, y menos solo por debajo de unos 365 px de ancho (9-nov-2026): a 320 «información» o «demandantes» no cabían en la columna a 42 px y el titular se salía de la pantalla. */ --vis-titular-seccion: min(2.625rem, 11.5vw); } } body h2.wp-block-heading:is( .vis-tramites__titular, .vis-tram-titulo, .vis-promos__titulo, .vis-inquilino__titulo, .vis-servicios__titular, .vis-relacionadas__titulo ) { font-size: var(--vis-titular-seccion); } /* --- Cursor propio y su etiqueta (30-sep-2026) ------------------------------ Los pinta assets/js/cursor-etiqueta.js en el vídeo de portada, el vídeo del single y las tarjetas del slider de noticias. En esas zonas el cursor del sistema se cambia por una flecha pequeña en el acento de la sección (`vis-cursor-propio` en ), y a su lado va la etiqueta que dice qué hace el clic: rótulo de la casa, versalitas y sin redondeo, que entra con un escalado suave. Azul por defecto; `data-variante="amarillo"` en las noticias. */ html.vis-cursor-propio, html.vis-cursor-propio * { cursor: none !important; } /* La flecha mide 18 px y su punta está en (4, 4) del viewBox de 24: se adelanta 3 px para que caiga justo donde está el ratón. */ .vis-cursor-punta { position: fixed; z-index: 10000; inset-block-start: -3px; inset-inline-start: -3px; width: 18px; height: 18px; color: var(--wp--preset--color--vis-kit-azul-profundo); pointer-events: none; opacity: 0; scale: 0.4; transform-origin: 3px 3px; transition: opacity 0.15s ease, scale 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .vis-cursor-punta svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; stroke: var(--wp--preset--color--vis-vsc-blanco); stroke-width: 1.75; stroke-linejoin: round; } .vis-cursor-punta[data-variante="amarillo"] { color: var(--wp--preset--color--vis-vsc-amarillo); } .vis-cursor-punta[data-variante="amarillo"] svg { stroke: var(--wp--preset--color--vis-vsc-pizarra); } html.vis-cursor-propio .vis-cursor-punta { opacity: 1; scale: 1; } .vis-cursor-etiqueta { position: fixed; z-index: 9999; inset-block-start: 0; inset-inline-start: 0; padding: var(--wp--custom--space-3) var(--wp--custom--space-4); font-size: 0.8125rem; font-weight: var(--wp--custom--fw-bold); line-height: 1; letter-spacing: var(--wp--custom--tracking-etiqueta); text-transform: uppercase; white-space: nowrap; color: var(--wp--preset--color--vis-vsc-blanco); background-color: var(--wp--preset--color--vis-kit-azul-profundo); pointer-events: none; opacity: 0; scale: 0.4; transform-origin: 0 0; transition: opacity 0.25s ease, scale 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .vis-cursor-etiqueta[data-variante="amarillo"] { color: var(--wp--preset--color--vis-vsc-pizarra); background-color: var(--wp--preset--color--vis-vsc-amarillo); } .vis-cursor-etiqueta.es-visible { opacity: 1; scale: 1; } @media (prefers-reduced-motion: reduce) { .vis-cursor-etiqueta, .vis-cursor-punta { scale: 1; transition: none; } } /* Subapartados de cada sección (Logotipos…): rótulo pequeño en versalitas. */ .vis-medios .vis-medios__subrotulo { margin-block: var(--wp--custom--space-7) var(--wp--custom--space-4); font-size: var(--wp--preset--font-size--vis-xs); font-weight: var(--wp--custom--fw-semibold); line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--vis-kit-texto-piedra); } .vis-medios .vis-faq__rotulo + .vis-medios__subrotulo { margin-block-start: 0; } /* Contacto de prensa al final de Sala de comunicación: ficha en azul profundo con el nombre en grande a la izquierda y, a la derecha, teléfono y correos como filas con su icono en un disco azul cielo. En móvil, una columna. */ .vis-medios--contacto .vis-medios__prensa { display: grid; gap: var(--wp--custom--space-6); padding: var(--wp--custom--space-7) var(--wp--custom--space-6); color: var(--wp--preset--color--vis-vsc-blanco); background-color: var(--wp--preset--color--vis-kit-azul-profundo); } .vis-medios--contacto .vis-medios__prensa > *, .vis-medios--contacto .vis-medios__prensa-quien > *, .vis-medios--contacto .vis-medios__prensa-vias > * { margin: 0; } .vis-medios--contacto .vis-medios__prensa .vis-medios__subrotulo { margin-block: 0 var(--wp--custom--space-3); color: inherit; } .vis-medios--contacto .vis-medios__persona { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; } .vis-medios--contacto .vis-medios__prensa-vias { display: grid; gap: var(--wp--custom--space-4); align-content: center; } .vis-medios--contacto .vis-medios__via a { display: inline-flex; align-items: center; gap: var(--wp--custom--space-4); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem); font-weight: 500; color: inherit; text-decoration: none; overflow-wrap: anywhere; } .vis-medios--contacto .vis-medios__via a::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 50%; background-color: var(--wp--preset--color--vis-vsc-azul-cielo); background-image: var(--vis-prensa-icono); background-position: center; background-repeat: no-repeat; background-size: 22px 22px; } .vis-medios--contacto .vis-medios__via--telefono { --vis-prensa-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6488' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); } .vis-medios--contacto .vis-medios__via--correo { --vis-prensa-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6488' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } .vis-medios--contacto .vis-medios__via a:hover, .vis-medios--contacto .vis-medios__via a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } .vis-medios--contacto .vis-medios__via a:focus-visible { outline: 2px solid var(--wp--preset--color--vis-vsc-azul-cielo); outline-offset: 4px; } @media (min-width: 782px) { .vis-medios--contacto .vis-medios__prensa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: var(--wp--custom--space-8) var(--wp--custom--space-8); } } /* Dos tipos más de fila de Recursos: vídeo e imagen (logotipos). */ .vis-recursos__item--video::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E"); } .vis-recursos__item--imagen::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); } /* Audio: cortes de voz y cuñas. */ .vis-recursos__item--audio::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10v3M6 6v11M10 3v18M14 8v7M18 5v13M22 10v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10v3M6 6v11M10 3v18M14 8v7M18 5v13M22 10v3'/%3E%3C/svg%3E"); } /* Sala de comunicación a todo el ancho de la web: las secciones de la FAQ y Recursos limitan el contenido a 880 px. */ .vis-faq-cuerpo > .vis-faq.vis-medios > * { max-width: none; } /* Accesos rápidos de Sala de comunicación sobre la foto del hero (el montaje es el de la FAQ, en faq.css): un icono por sección. */ .vis-faq-indice__item--multimedia { --vis-faq-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); } .vis-faq-indice__item--publicidad { --vis-faq-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); } /* --- Aire vertical de sección con el token común (13-oct-2026) -------------- `--vis-espacio-seccion` (componentes.css): 64 px en móvil y 96 desde 1200, arriba y abajo, en lugar de la medida propia de cada sección. Va al final para ganar a las reglas y media queries anteriores de esta hoja. Los grupos de preguntas, documentos y empleo (vis-faq dentro de vis-faq-cuerpo). */ .vis-faq-cuerpo > .vis-faq { padding-block: var(--vis-espacio-seccion); } /* --- Titular → contenido con el token común (13-oct-2026) ------------------- `--vis-espacio-titular` (componentes.css): 32 px en móvil, 48 desde 1200, entre la cabecera de cada sección (titular y su entradilla o enlace) y el contenido que va debajo. Rótulos de los grupos de preguntas, documentos y medios. */ .vis-faq .vis-faq__rotulo { margin-block-end: var(--vis-espacio-titular); } /* --- Hero interior: tokens únicos (13-oct-2026) ------------------------------ Todas las páginas principales con cabecera (migas, titular, entradilla, icono en ::after e imagen destacada debajo) usan las mismas medidas: --vis-hero-titulo cuerpo del titular --vis-hero-ritmo migas → titular y titular → entradilla --vis-hero-icono lado de la caja del icono (el SVG se encaja dentro, centrado y abajo, así que el icono alto de Servicios y Acceso mide lo mismo de alto que el cuadrado de los demás y no se pierde fuera del borde) --vis-hero-icono-x desplazamiento del icono fuera del borde derecho --vis-hero-imagen alto de la imagen destacada Cada hoja de página solo decide qué icono y de qué color. Las reglas van con `html body` para ganar a las de las hojas de página, que cargan después y traían cada una su medida. */ :root { --vis-hero-titulo: clamp(2.5rem, 5.6vw, 5.5rem); --vis-hero-ritmo: var(--wp--custom--space-7); --vis-hero-icono: min(520px, 40vw); --vis-hero-icono-x: -140px; --vis-hero-imagen: 440px; } @media (max-width: 781px) { :root { --vis-hero-titulo: 13vw; --vis-hero-ritmo: var(--wp--custom--space-5); --vis-hero-icono: 220px; --vis-hero-icono-x: 0px; --vis-hero-imagen: calc((100svh - var(--vis-cabecera-alto, 89px)) / 2); } } html body .vis-hero-interior.vis-hero-interior .vis-hero-interior__titulo { font-size: var(--vis-hero-titulo); } html body .vis-hero-interior.vis-hero-interior .zgn-migas { padding-block-end: var(--vis-hero-ritmo); } /* Algunas páginas llevan una copia del pattern de migas con un margen inferior escrito en el bloque (atributo style): solo !important lo anula. */ html body .vis-hero-interior.vis-hero-interior > .wp-block-group:has(> .zgn-migas) { margin-block-end: 0 !important; } html body .vis-hero-interior.vis-hero-interior .vis-hero-interior__entradilla { margin-block-start: var(--vis-hero-ritmo); } html body .vis-hero-interior.vis-hero-interior::after { inset-block-end: 0; inset-inline-end: var(--vis-hero-icono-x); width: var(--vis-hero-icono); height: var(--vis-hero-icono); aspect-ratio: auto; background-position: center bottom; background-size: contain; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-size: contain; mask-size: contain; } html body .vis-hero-interior + .wp-block-image img, html body .vis-promos__imagen img { width: 100%; height: var(--vis-hero-imagen); object-fit: cover; } /* En móvil el icono cuelga 180 px sobre la imagen, como en el sistema común. Promociones también: su hero sale de la plantilla y la imagen del contenido, pero es el mismo conjunto, así que deja de reservar el hueco del icono. */ @media (max-width: 781px) { html body .vis-hero-interior.vis-hero-interior:not(.vis-hero-interior--pagina)::after, html body:has(.vis-promos__imagen) .vis-hero-interior--pagina.vis-hero-interior--pagina::after { inset-block-end: -180px; } html body:has(.vis-promos__imagen) .vis-hero-interior--pagina.vis-hero-interior--pagina { box-sizing: border-box; min-height: calc((100svh - var(--vis-cabecera-alto, 89px)) / 2); padding-block-end: 96px; overflow: visible; z-index: 2; } } /* ---------------------------------------------------------- ampliar imagen */ /* Imágenes ampliables (lightbox de core): el contenido de las notas y la galería de la ficha de promoción. El botón de core aparece solo al pasar el ratón y con un icono de «expandir» poco reconocible: se deja siempre visible y con una lupa, para que se vea de un vistazo que la imagen se amplía. */ /* Core da al botón z-index: 100, por encima de la cabecera sticky (40): al hacer scroll la lupa pasaba por encima. isolation encierra ese z-index dentro de la figura; el overlay del lightbox va al final del body. */ .wp-lightbox-container { isolation: isolate; cursor: zoom-in; } .wp-lightbox-container button.lightbox-trigger, .wp-lightbox-container:hover button.lightbox-trigger, .wp-lightbox-container button.lightbox-trigger:focus { opacity: 1; } /* Core pinta el fondo con button:not(:hover):not(:active):not(.active): se repite la cadena para ganarle sin !important. */ .wp-lightbox-container button.lightbox-trigger, .wp-lightbox-container button.lightbox-trigger:not(:hover):not(:active):not(.active) { inset-block-start: var(--wp--custom--space-3); inset-inline-start: var(--wp--custom--space-3); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; color: var(--wp--preset--color--vis-color-texto-inv); background-color: var(--wp--preset--color--vis-kit-tinta-calida); transition: background-color 180ms, transform 180ms cubic-bezier(0.16, 1, 0.3, 1); } .wp-lightbox-container button.lightbox-trigger svg { display: none; } .wp-lightbox-container button.lightbox-trigger::before { content: ""; display: block; width: 20px; height: 20px; margin: auto; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat; } .wp-lightbox-container:hover button.lightbox-trigger:not(:active):not(.active), .wp-lightbox-container button.lightbox-trigger:hover, .wp-lightbox-container button.lightbox-trigger:focus-visible { background-color: var(--wp--preset--color--vis-kit-azul-profundo); transform: scale(1.06); } /* ------------------------------------------------- desplegable de filtro */ /* Desplegable de filtro: lo pinta inc/notas.php en la sala de prensa y lo construye assets/js/promociones.js en Promociones. Venía de actualidad.css. */ /* Cada taxonomia es un
: el boton dice que filtro esta puesto y la lista se despliega sobre los resultados. Con siete islas y siete categorias las pastillas sueltas ocupaban dos tercios de la pantalla; asi el listado empieza donde empieza la pagina. Sin filetes: el grupo no se enmarca. */ .vis-filtros { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--wp--custom--space-3); padding-block: var(--wp--custom--space-6); } .vis-filtros__grupo { position: relative; flex: none; } .vis-filtros__boton { display: inline-flex; align-items: baseline; gap: var(--wp--custom--space-3); min-height: 44px; padding-block: 10px; padding-inline: 18px; list-style: none; cursor: pointer; color: var(--wp--preset--color--vis-kit-tinta-calida); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--vis-kit-gris-frio) 55%, transparent); transition: box-shadow 180ms, background-color 180ms; } .vis-filtros__boton::-webkit-details-marker { display: none; } .vis-filtros__boton:hover, .vis-filtros__boton:focus-visible { box-shadow: inset 0 0 0 1px var(--wp--preset--color--vis-kit-tinta-calida); } .vis-filtros__grupo[open] > .vis-filtros__boton, .vis-filtros__grupo.is-filtrado > .vis-filtros__boton { box-shadow: inset 0 0 0 1px var(--wp--preset--color--vis-kit-tinta-calida); } .vis-filtros__rotulo { margin: 0; font-size: var(--wp--preset--font-size--vis-xs); font-weight: var(--wp--custom--fw-semibold); letter-spacing: var(--wp--custom--tracking-etiqueta); text-transform: uppercase; color: var(--wp--preset--color--vis-kit-texto-piedra); } .vis-filtros__valor { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; } /* El signo del catalogo de servicios, para que los desplegables del sitio se lean igual: mas cerrado, menos abierto. */ .vis-filtros__boton::after { content: "+"; margin-inline-start: var(--wp--custom--space-2); font-size: clamp(1.0125rem, 0.9707rem + 0.1714vw, 1.125rem); line-height: 1; font-weight: 200; color: var(--wp--preset--color--vis-kit-texto-piedra); } .vis-filtros__grupo[open] > .vis-filtros__boton::after { content: "\2013"; } .vis-filtros__lista { position: absolute; z-index: 20; inset-inline-start: 0; inset-block-start: calc(100% + 6px); display: flex; flex-direction: column; min-width: 100%; max-width: min(22rem, 86vw); max-height: 60vh; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background-color: var(--wp--preset--color--vis-color-fondo, #fff); box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--vis-kit-gris-frio) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--vis-kit-gris-frio) 55%, transparent), 0 18px 40px -24px rgba(0, 0, 0, 0.35); } .vis-filtros__opcion { display: flex; align-items: center; min-height: 40px; padding-inline: 12px; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; color: var(--wp--preset--color--vis-kit-tinta-calida); background-color: transparent; transition: background-color 160ms, color 160ms; } .vis-filtros__opcion:hover, .vis-filtros__opcion:focus-visible { background-color: color-mix(in srgb, var(--wp--preset--color--vis-kit-gris-frio) 30%, transparent); } /* Opciones sin notas con el otro filtro: no se muestran. */ .vis-filtros__lista li:has(> .vis-filtros__opcion[aria-disabled="true"]) { display: none; } .vis-filtros__opcion[aria-current="true"] { color: var(--wp--preset--color--vis-color-texto-inv); background-color: var(--wp--preset--color--vis-kit-tinta-calida); } @media (max-width: 781px) { /* En movil los dos desplegables ocupan el ancho y el panel se abre debajo de cada uno, sin salirse por el lado. */ .vis-filtros__grupo { flex: 1 1 100%; } .vis-filtros__boton { justify-content: space-between; width: 100%; } /* El valor y el «+» juntos contra el borde derecho: con space-between y tres piezas el valor quedaba a media caja, y a distinta altura en cada desplegable según lo largo del rótulo. */ .vis-filtros__valor { margin-inline-start: auto; } .vis-filtros__lista { max-width: 100%; } } /* --- Móvil: margen lateral y campos (9-nov-2026) ----------------------------- MARGEN LATERAL. El padding raíz de theme.json, clamp(1rem, 2vw, 1.5rem), da 16 px en el teléfono, y lo usan los grupos con `has-global-padding` que no ponen el suyo: el portal de transparencia y sus fichas, las páginas legales, perfil del contratante y canal interno. El resto del sitio va a `--vis-gutter`, 24 px, así que al pasar de una página a otra el texto cambiaba de sitio. Por debajo de 782 px el padding raíz es el gutter. */ @media (max-width: 781px) { html body { --wp--style--root--padding-left: var(--vis-gutter); --wp--style--root--padding-right: var(--vis-gutter); } } /* CAMPOS A 16 PX. Safari en iOS amplía la página al enfocar un campo con letra de menos de 16 px, y no la devuelve a su escala al salir: el buscador de promociones (13 px), el del portal (15 px) y los de Gravity Forms (15 px) lo provocaban. El selector cuenta cinco atributos para ganar a los del tema Orbital de Gravity Forms sin !important. */ @media (max-width: 47.9375rem) { html body :is( input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea ) { font-size: max(16px, 1em); } } /* TEXTO DE LECTURA EN LA ESCALA. En el teléfono convivían ocho tamaños de texto corrido entre 13 y 16 px, la mayoría fuera de la escala de theme.json. Aquí cada uno vuelve a su escalón: cuerpo `vis-base` (16 px), texto de tarjeta o de paso `vis-sm` (15) y letra menuda `vis-mini` (14). Los 13 px (`vis-xs`) quedan para rótulos en mayúsculas, fechas y migas, que no se leen seguidos. `html body` gana a las hojas de página, que cargan después. */ @media (max-width: 781px) { html body .vis-tram-texto { font-size: var(--wp--preset--font-size--vis-base); } html body :is( .vis-promos__tarjeta-extracto, .vis-tram-comprobacion__texto, .vis-inquilino__clausula-texto, .vis-inquilino__paso-texto, .vis-nosotros__hito-texto ) { font-size: var(--wp--preset--font-size--vis-sm); } html body .vis-contacto__formulario-hueco .vis-form__legal { font-size: var(--wp--preset--font-size--vis-mini); } /* Opciones de los filtros de Actualidad y Promociones: 44 px de alto, el mínimo cómodo para el dedo; con 40 quedaban justas. */ html body .vis-filtros__opcion { min-height: 44px; } } /* nav-mega.css */ /* --- Mega menú de escritorio (patterns/nav-escritorio.php) ----------------- Hoja aparte de chrome.css, y no por capricho: el mega menú es una pieza en revisión y separarla deja el chrome estable mientras se pule. Depende de chrome.css —toma de ahí --vis-gutter, --vis-acento y --vis-filete— y se encola después, así que a igual especificidad gana esta. La mecánica es la de reflexai.com: un solo escenario compartido que cambia de alto y funde un panel en el otro. El alto lo mide y lo escribe el JS en --vis-mega-alto; aquí solo se define cómo se mueve. Por debajo de 1280 la cabecera se queda en logo y hamburguesa: el menú entero lo oculta chrome.css y el escenario no llega a existir. El panel de móvil sigue siendo el de zaguan/nav y de momento es plano. */ .vis-mega { gap: var(--wp--custom--space-6); align-items: center; } /* Sin `position`: el escenario se ancla a .vis-cabecera, y un item posicionado lo capturaría y lo dejaría colgando de un rótulo de 90 px de ancho. */ .vis-mega__item { display: flex; align-items: center; } /* --- Rótulos -------------------------------------------------------------- Mismo tratamiento que tenía el menú del core, más el atenuado de los no activos mientras hay un panel abierto: es lo que en reflexai.com dirige la mirada al panel y deja claro de qué rótulo ha salido. */ .vis-mega__rotulo { margin: 0; } .vis-mega__rotulo a { display: flex; align-items: center; min-height: 44px; padding: var(--wp--custom--space-3) 2px; line-height: 1.3; letter-spacing: -0.01em; font-size: var(--wp--preset--font-size--vis-base); font-weight: var(--wp--custom--fw-semibold); white-space: nowrap; color: var(--wp--preset--color--vis-color-texto); text-decoration: none; box-shadow: inset 0 -2px 0 0 transparent; transition: box-shadow 160ms cubic-bezier(0.2, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); } .vis-mega__rotulo a:hover, .vis-mega__rotulo a:focus-visible, .vis-mega__item--abierto > .vis-mega__rotulo a, .vis-mega__item.current-menu-item > .vis-mega__rotulo a { box-shadow: inset 0 -2px 0 0 var(--vis-acento); } .vis-mega--activo .vis-mega__item:not(.vis-mega__item--abierto) > .vis-mega__rotulo a { opacity: 0.45; } /* --- El escenario --------------------------------------------------------- Cuelga del borde inferior de la cabecera y ocupa el ancho del contenedor, de gutter a gutter. A ancho completo el morph es solo de alto, que es el único que se puede medir sin reflows raros; y a sangre de los márgenes encaja con el resto del sistema, que es recto y sin tarjetas flotantes —de ahí que aquí no haya ni radio ni separación respecto a la cabecera, a diferencia de la referencia. `overflow: hidden` es lo que hace posible el morph: el panel entrante ya está maquetado a su alto real y el escenario lo recorta mientras crece. */ .vis-mega__escenario { position: absolute; inset-block-start: 100%; inset-inline: 0; /* Tope de ancho: el wideSize del tema, el mismo que mide el pie y el cuerpo de las páginas. De gutter a gutter el panel crecía con la ventana y en una pantalla ancha dejaba las listas separadas por medio metro de blanco. El ancho va calculado, no en `auto`: entre left y right, un `auto` recortado por max-inline-size deja el sobrante entero a la derecha y el panel se pega a la izquierda. Con una medida concreta y los dos insets a cero, el margen automático sí reparte. El gutter se descuenta aquí para que en pantallas medianas siga alineado con la barra. */ inline-size: min(calc(100% - 2 * var(--vis-gutter)), var(--wp--style--global--wide-size, 1280px)); margin-inline: auto; z-index: 30; overflow: hidden; height: 0; background-color: var(--wp--preset--color--vis-color-fondo); border-inline: var(--vis-filete); border-block-end: var(--vis-filete); box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--wp--preset--color--vis-color-texto) 30%, transparent); visibility: hidden; transition: height 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 320ms; } .vis-mega__escenario--abierto { height: var(--vis-mega-alto, auto); visibility: visible; transition: height 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } /* --- Los paneles ---------------------------------------------------------- Superpuestos en la misma celda, no apilados: el que entra y el que sale ocupan el mismo sitio y se cruzan en opacidad. */ .vis-mega__panel { position: absolute; inset-block-start: 0; inset-inline: 0; padding: var(--wp--custom--space-7) 0 0; opacity: 0; visibility: hidden; transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 260ms; } .vis-mega__panel--visible { opacity: 1; visibility: visible; transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } @media (prefers-reduced-motion: reduce) { .vis-mega__escenario, .vis-mega__panel { transition-duration: 0s; } } /* Sin JS el escenario nunca abre. Que el menú siga siendo navegable en ese caso lo garantizan los rótulos, que son enlaces a su propia página. */ /* --- Rejilla interior ----------------------------------------------------- Tres columnas en los dos paneles, con la tercera reservada al bloque de refuerzo. Compartir rejilla es lo que evita que dos paneles abiertos uno tras otro se lean como dos sistemas distintos. */ .vis-mega__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--custom--space-7); align-items: start; padding-inline: var(--wp--custom--space-7); padding-block-end: var(--wp--custom--space-7); } .vis-mega__columna { display: flex; flex-direction: column; gap: var(--wp--custom--space-4); } .vis-mega__grupo { margin: 0; padding-block-end: var(--wp--custom--space-3); border-block-end: var(--vis-filete); font-size: var(--wp--preset--font-size--vis-xs); font-weight: var(--wp--custom--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--vis-color-enlace); } /* --- Entradas ------------------------------------------------------------- Sin viñeta y sin sangría: dentro del panel la lista es navegación, no texto corrido. El realce del hover es una banda a sangre de la celda, más legible que un subrayado cuando hay varias entradas apiladas. */ .vis-mega__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .vis-mega__lista li { margin: 0; } .vis-mega__lista a, .vis-mega__pendiente { display: block; padding: 9px 10px; margin-inline: -10px; line-height: 1.35; font-size: var(--wp--preset--font-size--vis-sm); font-weight: 500; color: var(--wp--preset--color--vis-color-texto); text-decoration: none; transition: color 120ms cubic-bezier(0.2, 0, 0.2, 1); } /* El realce es solo de color: la banda de fondo convertía cada entrada en un botón y una lista de cinco parecía una botonera. */ .vis-mega__lista a:hover, .vis-mega__lista a:focus-visible { color: var(--wp--preset--color--vis-color-enlace); } /* Entrada sin página publicada. Va con el mismo color que el resto: dos columnas del mismo panel, una en negro y otra en gris, se leían como dos tratamientos distintos y no como una lista. Lo que la distingue es que no responde al puntero y no tiene destino, no un color más flojo. */ .vis-mega__pendiente { cursor: default; } /* --- Flecha de los rótulos desplegables ------------------------------------ Por máscara y no por carácter: es decoración, no tiene que llegar al lector de pantalla, y con currentColor sigue al rótulo en cada estado. Gira al abrir, que es lo que dice que el panel está desplegado. */ .vis-mega__item--panel .vis-mega__rotulo a::after { content: ""; width: 14px; height: 14px; margin-inline-start: 6px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; } /* --- Velo sobre la página ------------------------------------------------- Cuelga de la cabecera, que ya crea contexto de apilado con su z-index 40: con z-index -1 queda por detrás de todo lo que hay dentro de la cabecera —incluido su fondo, que lo recorta— y por delante del resto de la página. Fixed y no absolute para que cubra el viewport entero al hacer scroll. El :has evita tener que tocar el JS: el estado ya vive en .vis-mega--activo. */ .vis-cabecera::after { content: ""; position: fixed; inset: 0; z-index: -1; background-color: color-mix(in srgb, var(--wp--preset--color--vis-color-texto) 38%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 260ms; } .vis-cabecera:has(.vis-mega--activo)::after { opacity: 1; visibility: visible; transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } @media (prefers-reduced-motion: reduce) { .vis-cabecera::after, .vis-mega__item--panel .vis-mega__rotulo a::after { transition-duration: 0s; } } /* --- Alineación de las columnas ------------------------------------------- WordPress da a los hijos que no son el primero el margen del blockGap. En una rejilla eso no separa nada: empuja cada celda hacia abajo, y las columnas 2 a 4 arrancaban 24 px por debajo de la primera. Sus reglas van con :where(), especificidad cero, así que basta con nombrar las clases. Y el alto lo iguala el JS midiendo el panel más alto: los dos paneles abren con la misma caja. */ .vis-mega__panel > .vis-mega__rejilla > * { margin-block: 0; } /* El centrado, con el padre delante ---------------------------------------- WordPress imprime en el las reglas de layout de cada contenedor, y ese \3c style> va después de esta hoja: a igual especificidad ganaban ellas y el margen automático se quedaba en cero, con el panel pegado al borde izquierdo en pantallas anchas. Con el padre delante, la regla pesa más y no hace falta un !important. */ .vis-mega > .vis-mega__escenario { /* Centrado bajo la cabecera. El sobrante se reparte a los dos lados: con todo el hueco a la derecha, el panel se leía descolgado hacia ese lado en pantallas anchas. */ margin-inline: auto; } /* --- Ilustraciones de los paneles ----------------------------------------- Sustituyen a los bloques de refuerzo que había antes en la última columna. El dibujo lo inyecta assets/js/nav-mega-ilustracion.js; aquí está cómo se ve y cómo se mueve. Los colores salen de la paleta del tema y no de los literales del boceto: el azul del boceto (#2C6B8A) y el del sistema (#3F7799) no son el mismo, y dos azules de marca en la misma pantalla se notan. */ .vis-mega-ilu { position: relative; grid-column: 4; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 232px; padding: var(--wp--custom--space-6); overflow: hidden; } /* «Conócenos» sobre el azul del sistema; «Servicios» sobre el amarillo, con la tinta en negro porque sobre amarillo el blanco no llega al contraste. */ .vis-mega-ilu--conocenos { background-color: var(--wp--preset--color--vis-color-enlace); color: var(--wp--preset--color--vis-color-texto-inv); } .vis-mega-ilu--servicios { background-color: var(--wp--preset--color--vis-vsc-amarillo); color: var(--wp--preset--color--vis-color-texto); } /* --- El texto, por encima del dibujo --- */ .vis-mega-ilu__copy { position: relative; z-index: 1; } .vis-mega-ilu__rotulo { margin: 0 0 6px; font-size: var(--wp--preset--font-size--vis-xs); font-weight: var(--wp--custom--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: inherit; } .vis-mega-ilu--conocenos .vis-mega-ilu__rotulo { color: var(--wp--preset--color--vis-vsc-amarillo); } .vis-mega-ilu__dato { margin: 0; font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .vis-mega-ilu__unidad { margin-inline-start: 6px; font-size: var(--wp--preset--font-size--vis-base); font-weight: var(--wp--custom--fw-semibold); letter-spacing: 0; } .vis-mega-ilu__pie { margin: 8px 0 0; max-width: 22ch; font-size: var(--wp--preset--font-size--vis-sm); line-height: 1.35; } /* --- Flecha de los subitems ----------------------------------------------- En reposo apunta abajo a la derecha y al posarse gira hasta la horizontal. Es un solo icono rotando, no dos iconos cruzándose: girar 45 grados una flecha diagonal DA la flecha a la derecha, así que el morph sale exacto y sin cargar un segundo dibujo. La curva es la del muelle de los iconos morph del plugin, para que el gesto sea el mismo que el de las fichas y los botones. Va solo en los enlaces: una entrada pendiente no lleva a ninguna parte y una flecha ahí promete lo que no hay. */ .vis-mega__lista a { display: flex; align-items: center; gap: 8px; } .vis-mega__lista a::after { content: ""; width: 15px; height: 15px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* Al posarse solo gira: el color lo hereda del enlace, que ya pasa a azul. */ .vis-mega__lista a:hover::after, .vis-mega__lista a:focus-visible::after { transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .vis-mega__lista a::after { transition-duration: 0s; } } /* --- Foto del panel ------------------------------------------------------- Ocupa la tercera columna, entre las listas y el recuadro de color: es la que da aire al panel ahora que el recuadro ya no lleva dibujo. Recortada a la altura de la caja, no escalada: la rejilla manda y la foto se adapta. */ .vis-mega__foto { margin: 0; width: auto; margin-inline-end: calc(-1 * var(--wp--custom--space-7)); } .vis-mega__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Los dos paneles, en el mismo punto de partida ---------------------------- Los dos están en `top: 0` dentro del escenario, pero WordPress emite `.wp-container-… > * + * { margin-block-start: … }` en el , después de esta hoja, y el segundo panel se llevaba 24 px de margen: «Servicios» arrancaba más abajo que «Conócenos» y sus rótulos no casaban. Con el padre delante la regla pesa más y no hace falta un !important; a igual especificidad ganaba la de WordPress por ir la última. */ .vis-mega > .vis-mega__escenario > * { margin-block: 0; } /* Recuadro sobre la foto --------------------------------------------------- Un cuadrado del color de la caja vecina, encajado en la esquina superior derecha: enlaza las dos piezas, que están pegadas pero son de materiales distintos, y repite el motivo de cuadrados del isotipo y del hero. Va en la esquina que toca al recuadro, no en otra: en la izquierda quedaría como una mancha suelta en vez de como la continuación del color. `figure` recorta por su overflow, así que no hace falta más contención. */ .vis-mega__foto { grid-column: 3; overflow: hidden; align-self: stretch; justify-self: end; aspect-ratio: 1 / 1; max-width: 100%; position: relative; } .vis-mega__foto::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 56px; height: 56px; } .vis-mega__panel--conocenos .vis-mega__foto::after { background-color: var(--wp--preset--color--vis-color-enlace); } /* En «Servicios» baja a la esquina inferior: los dos paneles se abren uno detrás de otro y con el cuadrado siempre arriba el gesto se volvía mecánico. Sigue tocando el borde que da a la caja, que es lo que le da sentido. */ .vis-mega__panel--servicios .vis-mega__foto::after { inset-block-start: auto; inset-block-end: 0; background-color: var(--wp--preset--color--vis-vsc-amarillo); } /* --- Flecha de los rótulos desplegables (23-sep-2026) ---------------------- En reposo apunta hacia abajo, que es el dibujo del SVG tal cual; al posarse, con foco o con el panel abierto gira media vuelta y apunta hacia arriba. */ .vis-mega__item--panel .vis-mega__rotulo a::after { transition: transform 200ms cubic-bezier(0.2, 0, 0.2, 1); } .vis-mega__item--panel .vis-mega__rotulo a:hover::after, .vis-mega__item--panel .vis-mega__rotulo a:focus-visible::after, .vis-mega__item--abierto .vis-mega__rotulo a::after { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .vis-mega__item--panel .vis-mega__rotulo a::after { transition: none; } } /* cuadro-fisico.css */ /* * Cuadrados de la firma gráfica con física (assets/js/cuadro-fisico.js). * * El JS pone un real en lugar del pseudoelemento, que no se puede * agarrar, y lo mueve con transform dentro de su sección. El color lo pone el * JS en línea. Sin JS, o con prefers-reduced-motion, no se añaden las clases y * se quedan los pseudoelementos de cada hoja. */ /* Dos clases a propósito: esta hoja se carga en todo el sitio, ANTES que inicio.css y las hojas de cada página, y con una sola clase empataba en especificidad con `.vis-hero__foto::after` y perdía por orden. El pseudoelemento seguía debajo y reaparecía al arrastrar el cuadrado. */ .is-mundo-fisico.is-fisico-before::before, .is-mundo-fisico.is-fisico-after::after { content: none; } /* El mundo recorta: un cuadrado girado no asoma fuera de su sección. */ .is-mundo-fisico { overflow: clip; } .vis-cuadro-fisico { position: absolute; top: 0; left: 0; z-index: 2; width: 80px; height: 80px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; } .vis-cuadro-fisico.is-agarrado { cursor: grabbing; } /* buscador.css */ /** * Panel del buscador. * * Mismo lenguaje que el resto del chrome: superficie clara, filete estándar * (--vis-filete) en toda línea, rótulos en caja alta con el tracking de * etiqueta y el acento solo en lo que responde al puntero. * * El panel es un overlay `fixed` al final del : no cuelga de la cabecera * a propósito, porque un antecesor con transform le pondría techo. */ .vis-buscador { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; } .vis-buscador[hidden] { display: none; } .vis-buscador__caja { animation: vis-buscador-entra 320ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* El panel baja desde el borde superior mientras aparece: el gesto dice de dónde viene —del enlace de la barra institucional— y a dónde vuelve al cerrarse. El recorrido es de 40 px y no del alto de la caja: un slide completo en un panel a pantalla entera se lee como un cambio de página. */ @keyframes vis-buscador-entra { from { transform: translateY(-12px); opacity: 0; } } /* Salida simétrica y más rápida: al cerrar nadie quiere esperar lo mismo que al abrir. La curva acelera (al contrario que la de entrada, que frena): lo que se va gana velocidad al irse, y así el cierre no se siente pegajoso. Una ease-in más pronunciada dejaba el panel casi quieto los primeros 60 ms de los 180, que se leen como una pulsación que no ha respondido. */ @keyframes vis-buscador-sale { to { transform: translateY(-12px); opacity: 0; } } .vis-buscador.is-cerrando .vis-buscador__caja { animation: vis-buscador-sale 320ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* El velo solo funde: si se desplazara con la caja, el fondo de la web asomaría por el borde de arriba durante la transición. */ @keyframes vis-buscador-funde { from { opacity: 0; } } .vis-buscador__fondo { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--wp--preset--color--vis-color-texto) 38%, transparent); animation: vis-buscador-funde 260ms cubic-bezier(0.4, 0, 0.2, 1) both; } .vis-buscador.is-cerrando .vis-buscador__fondo { animation: vis-buscador-funde 260ms cubic-bezier(0.4, 0, 0.2, 1) reverse both; } /* Sin movimiento: aparece y desaparece. El JS detecta la misma preferencia y oculta el panel sin esperar un animationend que no va a llegar. */ @media (prefers-reduced-motion: reduce) { .vis-buscador__caja, .vis-buscador__fondo, .vis-buscador.is-cerrando .vis-buscador__caja, .vis-buscador.is-cerrando .vis-buscador__fondo { animation: none; } } /* Barra superior: el campo manda y ocupa el ancho de contenido del sitio. El aire de arriba iguala al que deja el cuerpo por abajo: con el padding corto el campo quedaba pegado al borde de la ventana y el panel parecía descolgado, con todo el respiro al final. */ .vis-buscador__barra { display: flex; align-items: center; gap: var(--wp--custom--space-4); max-width: var(--wp--style--global--wide-size); margin-inline: auto; width: 100%; padding: var(--wp--custom--space-7) var(--vis-gutter) var(--wp--custom--space-5); } /* Caja sólida en azul muy claro (vis-color-info-fondo, el mismo de los avisos informativos del sitio) en vez del subrayado: la línea sola, con el campo a este cuerpo, no delimitaba nada y el buscador no se leía como un sitio donde escribir. El color ya está en la paleta; no se inventa un tono. */ .vis-buscador__form { flex: 1; display: flex; align-items: center; gap: var(--wp--custom--space-3); background-color: var(--wp--preset--color--vis-color-info-fondo); /* Un filete azulado (vis-kit-borde-azulado, de la paleta) para que la caja tenga contorno sobre el blanco del panel: el relleno solo, tan claro, dejaba el campo sin límite definido contra el fondo. */ border: 1px solid var(--wp--preset--color--vis-kit-borde-azulado); padding: var(--wp--custom--space-3) var(--wp--custom--space-4); } /* El foco se marca en la caja entera y no en el input: el input no tiene borde propio, así que un outline suyo flotaría dentro del relleno. */ .vis-buscador__form:focus-within { /* Sin anillo: el panel enfoca el campo nada mas abrirse, asi que el outline no senalaba una accion del usuario, salia siempre. La caja ya tiene su filete azulado y es el unico sitio donde se escribe. */ outline: 0; } /* El campo sin caja: la línea de abajo ya lo delimita, y a este cuerpo una caja con borde lo haría parecer un formulario más de la web. */ .vis-buscador__campo { flex: 1; border: 0; background: none; padding: 0; font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.2; color: var(--wp--preset--color--vis-color-texto); } .vis-buscador__campo:focus { outline: none; } .vis-buscador__campo::placeholder { color: var(--wp--preset--color--vis-color-texto-suave); } /* El nativo de Chrome duplica la cruz de borrar junto a la del panel. */ .vis-buscador__campo::-webkit-search-cancel-button { appearance: none; } /* Solo el icono, y a la derecha: el rótulo «Buscar» en un botón macizo competía con el propio campo, que es lo único que hay que mirar. El área pulsable se mantiene en 44 px (WCAG 2.5.5) aunque el icono mida 22. */ .vis-buscador__enviar { border: 0; background: none; color: var(--wp--preset--color--vis-kit-azul-profundo); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer; transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1); } .vis-buscador__enviar svg { width: 22px; height: 22px; } .vis-buscador__enviar:hover, .vis-buscador__enviar:focus-visible { color: var(--vis-acento-texto); } /* Con el campo vacío no hay nada que enviar: el icono se apaga pero no desaparece, así se sigue leyendo dónde está el mando. */ .vis-buscador__enviar[disabled] { opacity: 0.4; cursor: default; } /* El cerrar no va junto al campo sino en la esquina inferior derecha del panel, como cuadrado macizo: el mismo componente que los cuadrados de redes de la barra institucional, con su hover amarillo. Al lado del campo competia con el boton de enviar —dos mandos del mismo tamano y peso, uno al lado del otro, para acciones opuestas. Sale del flujo de la barra, asi que el formulario ocupa el ancho entero. Sigue siendo el primer tabulable despues del campo porque en el DOM no se ha movido. */ .vis-buscador__caja { position: relative; background-color: var(--wp--preset--color--vis-color-fondo); max-height: 100dvh; display: flex; flex-direction: column; --vis-cerrar: 72px; --vis-cerrar-icono: 44px; } .vis-buscador__cerrar { position: absolute; z-index: 1; inset-block-end: 0; inset-inline-end: 0; margin-block-end: env(safe-area-inset-bottom, 0px); border: 0; display: flex; align-items: center; justify-content: center; width: var(--vis-cerrar); height: var(--vis-cerrar); flex: none; cursor: pointer; background-color: var(--wp--preset--color--vis-kit-azul-profundo); color: var(--wp--preset--color--vis-vsc-blanco); transition: background-color 120ms cubic-bezier(0.2, 0, 0.2, 1), color 120ms cubic-bezier(0.2, 0, 0.2, 1); } .vis-buscador__cerrar:hover, .vis-buscador__cerrar:focus-visible { background-color: var(--wp--preset--color--vis-vsc-amarillo); color: var(--wp--preset--color--vis-kit-azul-profundo); } /* La X se lee de lejos: es el unico mando del panel que no esta junto al campo, y a 22 px se perdia dentro del cuadrado. La caja crece con ella para conservarle el aire alrededor. */ .vis-buscador__cerrar svg { width: var(--vis-cerrar-icono); height: var(--vis-cerrar-icono); } /* El hueco de abajo reserva el cuadrado de cerrar. Sin el, en una ventana estrecha —donde el contenido llega hasta el filo— el cuadrado se comia la ultima pildora de accesos o el ultimo resultado, y con el cuerpo en scroll no habia manera de sacarlo de debajo. */ .vis-buscador__cuerpo { max-width: var(--wp--style--global--wide-size); margin-inline: auto; width: 100%; padding: 0 var(--vis-gutter) calc(var(--vis-cerrar) + var(--wp--custom--space-5)); overflow-y: auto; scroll-padding-block-end: var(--vis-cerrar); } .vis-buscador__rotulo { font-size: var(--wp--preset--font-size--vis-xs); font-weight: var(--wp--custom--fw-semibold); text-transform: uppercase; letter-spacing: var(--wp--custom--tracking-etiqueta); color: var(--vis-acento-texto); margin-block: var(--wp--custom--space-5) var(--wp--custom--space-3); } /* Accesos frecuentes: píldoras, el mismo componente que los chips de isla de Actualidad. No se inventa una variante. */ .vis-buscador__accesos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wp--custom--space-2); } .vis-buscador__acceso { display: block; border: var(--vis-filete); padding: var(--wp--custom--space-2) var(--wp--custom--space-4); font-size: var(--wp--preset--font-size--vis-sm); color: var(--wp--preset--color--vis-color-texto); text-decoration: none; transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms cubic-bezier(0.16, 1, 0.3, 1); } .vis-buscador__acceso:hover, .vis-buscador__acceso:focus-visible { background-color: var(--vis-acento); color: var(--vis-acento-tinta); } .vis-buscador__grupo + .vis-buscador__grupo { margin-block-start: var(--wp--custom--space-5); } .vis-buscador__lista { list-style: none; margin: 0; padding: 0; } /* Cada sugerencia, una fila con filete: el título en regular y en negrita solo la parte ya escrita, que es lo que hace legible el emparejamiento. */ .vis-buscador__item { display: block; padding: var(--wp--custom--space-3) 0; border-block-start: var(--vis-filete); text-decoration: none; color: var(--wp--preset--color--vis-color-texto); } .vis-buscador__lista li:last-child .vis-buscador__item { border-block-end: var(--vis-filete); } .vis-buscador__item:hover .vis-buscador__item-titulo, .vis-buscador__item:focus-visible .vis-buscador__item-titulo { color: var(--vis-acento-texto); } .vis-buscador__item-titulo { display: block; font-size: var(--wp--preset--font-size--vis-base); line-height: 1.3; } .vis-buscador__item-titulo strong { font-weight: var(--wp--custom--fw-semibold); } .vis-buscador__item-apoyo { display: block; font-size: var(--wp--preset--font-size--vis-sm); color: var(--wp--preset--color--vis-color-texto-suave); margin-block-start: 2px; } .vis-buscador__mas { display: inline-block; margin-block-start: var(--wp--custom--space-3); font-size: var(--wp--preset--font-size--vis-sm); color: var(--vis-acento-texto); } .vis-buscador__estado { font-size: var(--wp--preset--font-size--vis-sm); color: var(--wp--preset--color--vis-color-texto-suave); margin-block-start: var(--wp--custom--space-4); } /* Con el panel abierto la página de detrás no se desplaza. */ .vis-buscador-abierto, .vis-buscador-abierto body { overflow: hidden; } @media (max-width: 781px) { /* Mismo criterio que en escritorio: más aire arriba que abajo, para que el campo no salga pegado al borde de la pantalla. */ .vis-buscador__barra { padding-block: var(--wp--custom--space-5) var(--wp--custom--space-4); gap: var(--wp--custom--space-2); } .vis-buscador__campo { font-size: 1.125rem; } /* 48 px: sigue por encima del minimo de 44 de la WCAG 2.5.5 y deja mas sitio a la ultima fila del cuerpo en una pantalla corta. */ .vis-buscador__caja { height: 100dvh; --vis-cerrar: 60px; --vis-cerrar-icono: 36px; } } /* El campo del hero: la misma línea baja que el panel, sin caja. */ .vis-busqueda__campo { max-width: 34rem; } .vis-busqueda__campo .wp-block-search__input { border: 0; border-block-end: 1px solid var(--wp--preset--color--vis-color-texto); background: none; padding: var(--wp--custom--space-2) 0; font-size: var(--wp--preset--font-size--vis-base); } .vis-busqueda__campo .wp-block-search__button { background-color: var(--vis-acento); color: var(--vis-acento-tinta); border: 0; padding: var(--wp--custom--space-2) var(--wp--custom--space-4); font-size: var(--wp--preset--font-size--vis-sm); } .vis-resultados__cuenta { font-size: var(--wp--preset--font-size--vis-base); color: var(--wp--preset--color--vis-color-texto-suave); margin-block-end: var(--wp--custom--space-7); } .vis-resultados__grupo + .vis-resultados__grupo { margin-block-start: var(--wp--custom--space-8); } /* El recuento junto al rótulo, en cuerpo pequeño: es un dato, no un título. */ .vis-resultados__rotulo { display: flex; align-items: baseline; gap: var(--wp--custom--space-2); font-size: var(--wp--preset--font-size--vis-xs); font-weight: var(--wp--custom--fw-semibold); text-transform: uppercase; letter-spacing: var(--wp--custom--tracking-etiqueta); color: var(--vis-acento-texto); padding-block-end: var(--wp--custom--space-3); border-block-end: var(--vis-filete); margin-block: 0 0; } .vis-resultados__cuantos { color: var(--wp--preset--color--vis-color-texto-suave); font-weight: var(--wp--custom--fw-semibold); } .vis-resultados__lista { list-style: none; margin: 0; padding: 0; } .vis-resultados__item { padding-block: var(--wp--custom--space-4); border-block-end: var(--vis-filete); } .vis-resultados__item-titulo { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.3; margin: 0; font-weight: var(--wp--custom--fw-regular); } .vis-resultados__item-titulo a { color: var(--wp--preset--color--vis-color-texto); text-decoration: none; } .vis-resultados__item-titulo a:hover, .vis-resultados__item-titulo a:focus-visible { color: var(--vis-acento-texto); } .vis-resultados__item-apoyo { font-size: var(--wp--preset--font-size--vis-sm); color: var(--wp--preset--color--vis-color-texto-suave); margin-block: var(--wp--custom--space-1) 0; } .vis-resultados__mas { display: inline-block; margin-block-start: var(--wp--custom--space-4); font-size: var(--wp--preset--font-size--vis-sm); color: var(--vis-acento-texto); } .vis-busqueda__cuerpo { max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding: var(--wp--custom--space-7) var(--vis-gutter) var(--wp--custom--space-8); padding-block-start: var(--wp--custom--space-5); } /* core/search pinta input y botón como hermanos sueltos: se alinean por la línea inferior del campo, que es la que hace de base. */ .vis-busqueda__campo .wp-block-search__inside-wrapper { display: flex; align-items: flex-end; gap: var(--wp--custom--space-3); border: 0; } /* --- El cierre, donde el del menú (móvil y tableta) ----------------------- En escritorio el cuadrado macizo de abajo a la derecha funciona: el panel ocupa media pantalla y el ratón llega a cualquier esquina. En un móvil no: quien acaba de abrir el buscador desde la lupa de arriba busca la salida donde la deja el menú, arriba a la derecha, y no en la esquina contraria. Un solo sitio para cerrar en toda la web, y con la misma medida y el mismo eje: los tokens son los del menú. El campo baja por debajo de esa esquina, que ahora la ocupa la X. */ @media (max-width: 1279px) { .vis-buscador__cerrar { inset-block-start: var(--zgn-nav-arriba, 23px); inset-block-end: auto; inset-inline-end: var(--vis-gutter); margin-block-end: 0; width: 46px; height: 46px; padding: 8px; box-sizing: border-box; background-color: transparent; color: var(--wp--preset--color--vis-color-texto); } .vis-buscador__cerrar:hover, .vis-buscador__cerrar:focus-visible { background-color: transparent; color: var(--vis-acento-texto); } .vis-buscador__cerrar svg { width: 100%; height: 100%; } /* El campo, por debajo de la X: la barra reserva su alto entero más el aire de la escala. */ .vis-buscador__barra { padding-block-start: calc(23px + 46px + var(--wp--custom--space-5)); } /* Sin cuadrado abajo no hay nada que esquivar al final del cuerpo. */ .vis-buscador__cuerpo { padding-block-end: var(--wp--custom--space-6); scroll-padding-block-end: 0; } } /* --- El buscador entra como el menú (móvil y tableta) --------------------- Los dos paneles salen de la misma barra y a dos dedos de distancia: si uno baja desde arriba y el otro entra por el lado, se leen como dos sitios distintos. Aquí el buscador copia el gesto del menú —entrada lateral desde la derecha— con SUS tokens: la misma duración (--zgn-nav-dur) y la misma curva. Se mantienen los nombres de animación propios porque el JS del buscador espera el `animationend` de la caja para ocultarla; el del menú va por transición y no dispara ese evento. */ @media (max-width: 1279px) { .vis-buscador__caja { height: 100dvh; margin-inline-start: auto; width: 100%; animation: vis-buscador-entra-lateral var(--zgn-nav-dur, 0.34s) cubic-bezier(0.22, 1, 0.36, 1) both; } .vis-buscador.is-cerrando .vis-buscador__caja { animation: vis-buscador-sale-lateral var(--zgn-nav-dur, 0.34s) cubic-bezier(0.22, 1, 0.36, 1) both; } /* El velo acompaña al panel en vez de fundir a su propio ritmo. */ .vis-buscador__fondo, .vis-buscador.is-cerrando .vis-buscador__fondo { animation-duration: var(--zgn-nav-dur, 0.34s); } @keyframes vis-buscador-entra-lateral { from { transform: translateX(100%); } } @keyframes vis-buscador-sale-lateral { to { transform: translateX(100%); } } }