/* ========================================================================= AJUSTES DE WORDPRESS ========================================================================= Lo mínimo que hace falta porque en WordPress algunos elementos cambian de etiqueta respecto al prototipo. css/style.css NO se toca: si se tocara, el diff contra el prototipo dejaría de decir la verdad. ====================================================================== */ /* Los chips del filtro eran muertos; ahora son enlaces de verdad (funcionan sin JS, cada categoría tiene su dirección y Google las indexa). */ a.filtro{text-decoration:none} a.filtro:hover{border-color:var(--azul-bright); color:var(--azul-bright)} a.filtro.is-on:hover{color:#fff} /* La etiqueta de categoría y el título de la tarjeta ahora llevan a algún lado. */ .bcard__tag{text-decoration:none} .bcard__t a{color:inherit; text-decoration:none} .bcard__t a:hover{color:var(--azul-bright)} /* ⚠️ La foto de la tarjeta ahora va envuelta en un para que se pueda picar. Ese ROMPE la cadena de altura: .bcard__img img pide height:100%, y un porcentaje contra un padre de altura automática no resuelve — la foto se pasaba 19px de su caja (402x268 dentro de 402x249) y el recorte del diseño dejaba de aplicar. El tiene que heredar la altura. */ /* ⚠️ SOLO el enlace de la foto: el tag de categoría también es un dentro de .bcard__img, y con el selector genérico se estiraba a los 249px de la tarjeta (Fer lo cazó en su PDF del 22-ago). */ .bcard__img a.bcard__foto{display:block; height:100%} /* Paginación del blog: no existía en el prototipo porque no había entradas. */ .pag{margin-top:56px} .pag ul{display:flex; gap:10px; justify-content:center; list-style:none; margin:0; padding:0; flex-wrap:wrap} .pag a,.pag span{ display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 12px; border-radius:11px; font-family:var(--display); font-size:15px; text-decoration:none; border:1.5px solid #D5E4F0; color:var(--azul); background:#fff; } .pag a:hover{border-color:var(--azul-bright); color:var(--azul-bright)} .pag .current{background:var(--azul-bright); border-color:var(--azul-bright); color:#fff} /* El enlace de categoría del hero de la entrada. */ a.eyebrow{text-decoration:none} /* ------------------------------------------------------------------------- Áreas táctiles del blog ------------------------------------------------------------------------- El corte va por PUNTERO, no por ancho de pantalla: un iPad mide 810px, cruza cualquier @media de ancho, y se toca con el dedo igual que un teléfono. (Lección de Dielec: el pie volvía a 28px en tableta por atarlo a `md:`.) Medido: los chips salían de 38px de alto y «Leer más» de 26. ---------------------------------------------------------------------- */ @media (pointer: coarse){ .filtro{height:44px} .bcard__l{min-height:44px; align-items:center} /* El tag de categoría mide 37px de alto a la vista; el toque de 44 lo pone un ::after invisible (mismo truco que los iconos sociales). */ .bcard__tag{position:relative} .bcard__tag::after{content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%)} } /* ------------------------------------------------------------------------- FORMULARIOS ---------------------------------------------------------------------- */ /* El campo trampa del anti-bot. ⚠️ NO se esconde con display:none ni con type="hidden": los bots decentes ya se saltan esos dos. Se saca de la pantalla, que sí lo deja "presente" para quien llena todos los inputs a ciegas. Y con aria-hidden + tabindex="-1" arriba, ni el teclado ni un lector de pantalla llegan a él — si un lector se lo dictara a una persona ciega, ella lo llenaría de buena fe y la trampa la dejaría fuera del sitio. */ .ilea-hp{position:absolute!important; left:-9999px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important} /* Respuesta del envío, dentro del propio formulario: quien lo llenó quiere ver qué pasó donde estaba, no en otra pantalla. */ .form__ok,.form__err{ border-radius:12px; padding:16px 18px; margin-bottom:22px; font-size:16px; line-height:1.5; } .form__ok{background:#E8F6EC; border:1.5px solid #A8DCB8; color:#14532D} .form__err{background:#FDECEC; border:1.5px solid #F3B9B9; color:#7F1D1D} .form__ok strong,.form__err strong{display:block; margin-bottom:3px} .form__ok b{font-family:var(--display); letter-spacing:.04em} /* ------------------------------------------------------------------------- Fachada del video ------------------------------------------------------------------------- Ocupa exactamente el hueco del iframe para que la página no salte cuando el reproductor lo reemplace. ---------------------------------------------------------------------- */ .nos-video__fachada{ display:block; width:100%; height:100%; position:relative; padding:0; border:0; cursor:pointer; background:#001A39; overflow:hidden; } .nos-video__fachada img{width:100%; height:100%; object-fit:cover; display:block} .nos-video__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; background:rgba(2,143,225,.94); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 40px rgba(0,10,24,.45); transition:transform .18s ease; } .nos-video__fachada:hover .nos-video__play{transform:translate(-50%,-50%) scale(1.07)} .nos-video__play svg{width:36px; height:36px; margin-left:5px} /* El CSS aprobado tiene `.hero--img .hero__foto > img` —selector de HIJO DIRECTO— y al envolver la foto en un deja de aplicar en silencio: el hero pierde su radio y su sombra. Se repone la regla para el nivel de más y así esas tres fotos también pueden servirse en WebP. */ .hero--img .hero__foto > picture{display:contents} .hero--img .hero__foto > picture > img{border-radius:var(--r-card); box-shadow:var(--sombra)} /* ------------------------------------------------------------------------- El no debe existir para la maquetación ------------------------------------------------------------------------- Al envolver las fotos para servir WebP, el se vuelve HIJO DIRECTO y le caen reglas que eran para la imagen o para los bloques de contenido: `.duo__c > *{position:relative;z-index:2}` le daba posición al , la de adentro quedaba absoluta contra una caja sin tamaño, y la foto del banner de Tráfico SCT DESAPARECIÓ dejando un degradado gris. Es la misma familia del `.linea-card > *` que ya se pagó en el prototipo. `display:contents` hace que el no genere caja: la vuelve a maquetar como si el envoltorio no estuviera. ---------------------------------------------------------------------- */ picture{display:contents} /* ------------------------------------------------------------------------- Áreas táctiles — medidas en iPhone, Pixel e iPad ------------------------------------------------------------------------- Lo que cazó telefonos.mjs y es real (no el menú cerrado, que era la prueba mintiendo): los enlaces del PIE van pegados uno encima de otro a 17px de alto, el teléfono de la barra superior mide 22 y los «Ver más» 24. El corte va por PUNTERO, no por ancho: en tableta se toca igual. ---------------------------------------------------------------------- */ @media (pointer: coarse){ .footer__nav a, .footer__c a{display:flex; align-items:center; min-height:44px} .footer__nav li{margin:0} /* El área táctil de 44px centraba el TEXTO pero el icono se quedaba pegado arriba (Fer lo vio chueco). En los renglones con enlace, el icono se centra con él; la dirección (sin enlace) se queda como el diseño. */ .footer__c li:has(a){align-items:center} .footer__c li:has(a) svg{margin-top:0} .topbar__item{min-height:44px; display:inline-flex; align-items:center} /* Los iconos de redes NO se agrandan: Fer los vio enormes en su iPhone. El icono se queda en los 19px del diseño y el área de toque de 44px la pone un ::after invisible centrado encima. */ .social a{position:relative} .social a::after{content:''; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%)} .caso__l,.bcard__l,.blog-card__l, a.ver-mas,.vent2__b a,.sistema__b a{min-height:44px; display:inline-flex; align-items:center} /* los «Ver más» de las tarjetas del inicio y de industrial */ .prod a,.casos a,.duo__c a.btn{min-height:44px; display:inline-flex; align-items:center} .legal a{display:inline-flex; align-items:center; min-height:44px} } @media (pointer: coarse){ /* El desplegable «¿Qué línea te interesa?» del formulario medía 23px de alto: es el control más difícil de acertar con el dedo de todo el sitio. */ /* ⚠️ WebKit ignora min-height en un