.elementor-kit-4{--e-global-color-primary:#004970;--e-global-color-secondary:#91BA15;--e-global-color-text:#292728;--e-global-color-accent:#78B6D6;--e-global-color-92850e7:#EEEEE4;--e-global-color-6a9cd59:#FFFFFF;--e-global-color-a1e5b74:#5B740D;--e-global-typography-primary-font-family:"Source Sans 3";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Source Sans 3";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Source Sans 3";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Source Sans 3";--e-global-typography-accent-font-weight:500;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-primary );}.elementor-kit-4 a:hover{color:var( --e-global-color-a1e5b74 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* =========================================================================== HOSPITAL J. J. DE URQUIZA — Ajustes de interfaz Vive en: Elementor > Ajustes del sitio > CSS personalizado (kit, post 4) Por que aca y no en cada pagina: el cliente edita las paginas a mano en Elementor. Lo que se guarda en el kit no se pisa cuando el guarda una pagina, asi que estas reglas sobreviven a las ediciones. Colores: los seis del Manual de Identidad Visual (pag. 19). El unico agregado es --hjju-verde-texto, que es el mismo Verde 1 con identico matiz (H75) y saturacion (80%), solo mas oscuro, para poder usarlo como LETRA sobre fondo claro sin bajar de 4,5:1. El verde de marca no se toca: sigue siendo el de los fondos, bordes, iconos y subrayados. =========================================================================== */ :root{ --hjju-azul: #004970; /* Azul del manual */ --hjju-verde: #91BA15; /* Verde 1 del manual */ --hjju-verde-texto: #5B740D; /* Verde 1 oscurecido: 5,30:1 blanco / 4,54:1 beige */ --hjju-celeste: #78B6D6; /* Celeste del manual */ --hjju-beige: #EEEEE4; /* Beige del manual */ --hjju-negro: #292728; /* Negro del manual */ --hjju-radio: 14px; /* tarjetas */ --hjju-radio-boton: 10px; /* botones */ --hjju-sombra: 0 6px 22px rgba(0,73,112,.10); --hjju-sombra-alta: 0 10px 28px rgba(0,73,112,.16); --hjju-sombra-boton: 0 2px 8px rgba(0,73,112,.18); --hjju-t: 150ms; /* interacciones frecuentes: hover, foco */ --hjju-t-lenta: 200ms; /* superficies: tarjetas */ } /* --------------------------------------------------------------------------- 1. RENDER DEL TEXTO balance en titulos (reparte las lineas parejas), pretty en el cuerpo (evita que la ultima linea quede con una sola palabra colgando). --------------------------------------------------------------------------- */ html{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, .elementor-heading-title, .elementor-icon-box-title, .elementor-post__title{ text-wrap: balance; } p, li, figcaption, blockquote, .elementor-icon-box-description, .elementor-post__excerpt p{ text-wrap: pretty; } /* --------------------------------------------------------------------------- 2. FOCO VISIBLE Elementor deja el anillo con el color del texto (outline: 3px auto). Eso hace que en "SACAR TURNO ONLINE" el anillo salga blanco sobre beige (1,17:1) y en el item activo del menu salga verde sobre beige (1,95:1): invisible. El anillo pasa a ser fijo y de dos aros: el azul resuelve los fondos claros (4,22 a 9,60:1) y el halo blanco resuelve el fondo azul (9,60:1). Entre los dos cubren los seis fondos del sitio. :focus-visible y no :focus, para que no aparezca al hacer clic con el mouse. --------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, .elementor-button:focus-visible, .elementor-item:focus-visible, .elementor-menu-toggle:focus-visible, .elementor-swiper-button:focus-visible, .swiper-pagination-bullet:focus-visible{ outline: 3px solid #004970 !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px rgba(255,255,255,.95) !important; border-radius: 3px; } /* el anillo del navegador solo al navegar con teclado */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), .elementor-button:focus:not(:focus-visible), .elementor-item:focus:not(:focus-visible){ outline: none; box-shadow: none; } /* Los botones traen su propia box-shadow generada por Elementor por elemento, que le gana a la regla de arriba. Se repite el halo con mas especificidad para que el aro blanco tambien aparezca en los botones sobre foto (TURNOS y GUARDIA estan sobre el slideshow del hero, donde el aro azul solo no basta). */ html body .elementor-element .elementor-button:focus-visible{ box-shadow: 0 0 0 3px rgba(255,255,255,.95) !important; } /* --------------------------------------------------------------------------- 3. ENLACES SUELTOS DENTRO DE TEXTO Criterio del cliente: enlaces SIN subrayado por defecto. Los botones se identifican por su forma, las listas de contacto por su icono y los correos por el arroba, asi que el color no es la unica senal y el subrayado sobra. Unico caso que si lleva subrayado: un enlace suelto en medio de un parrafo, donde nada mas indica que es accionable. Se le pone la clase "enlace-en-texto". --------------------------------------------------------------------------- */ .elementor-widget-text-editor a.enlace-en-texto, .elementor-widget-theme-post-content a.enlace-en-texto{ text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------------------------- 4. BOTONES Antes: ninguno de los 9 estilos respondia al puntero ni al clic. El hover usa filter en vez de un color fijo: asi el mismo gesto sirve para los botones azules, el verde del hero y los de contorno, sin tener que escribir una regla por variante ni pelear con la especificidad del CSS que genera Elementor por elemento. La escala al presionar es 0,96 exacto. Por debajo de 0,95 se siente exagerado. --------------------------------------------------------------------------- */ .elementor-button{ border-radius: 10px; min-height: 48px; /* area tactil comoda */ display: inline-flex; align-items: center; justify-content: center; transition-property: filter, box-shadow, scale; transition-duration: 150ms; transition-timing-function: ease-out; } .elementor-button:hover{ filter: brightness(.92); box-shadow: 0 2px 8px rgba(0,73,112,.18); } .elementor-button:active{ scale: .96; } /* El boton TURNOS del hero conserva su forma de pildora: es el unico con jerarquia propia y el cliente lo definio asi. */ .elementor-element-016ce9b .elementor-button, .elementor-element-e72240e .elementor-button{ border-radius: 50px; } /* --------------------------------------------------------------------------- 5. TARJETAS Las de Noticias y Publicaciones venian con radio 3px y sombra gris neutra (rgba(0,0,0,.15)), mientras el resto del sitio usa radio 14px y sombra azul. Eran las unicas que parecian de otro sitio. Ahora comparten superficie. --------------------------------------------------------------------------- */ .elementor-post__card{ border-radius: 14px; overflow: hidden; box-shadow: 0 6px 22px rgba(0,73,112,.10); transition-property: box-shadow, transform; transition-duration: 200ms; transition-timing-function: ease-out; } .elementor-post__card:hover{ box-shadow: 0 10px 28px rgba(0,73,112,.16); transform: translateY(-2px); } /* la miniatura sigue el radio de la tarjeta por arriba */ .elementor-post__card .elementor-post__thumbnail{ border-radius: 0; } /* --------------------------------------------------------------------------- 6. NADA DE transition: all Venia "all 0.4s" en el menu, "all 0.3s" en botones y "all 0.25s" en tarjetas. all obliga al navegador a vigilar cada propiedad y anima cosas que nadie quiso animar. Ademas 400ms en el hover del menu (la interaccion mas frecuente del sitio) llega despues del ojo. Los !important son para ganarle al CSS que Elementor genera por elemento; es la unica forma de corregirlo sin editar widget por widget. --------------------------------------------------------------------------- */ .elementor-nav-menu .elementor-item{ transition-property: color !important; transition-duration: 150ms !important; transition-timing-function: ease-out !important; } .elementor-post__card, .elementor-button{ transition-property: filter, box-shadow, scale, transform !important; } /* Elementor pone "transition: all .3s" en el icono de cada icon-box, para efectos de hover que aca no se usan. Son 54 elementos vigilando cada propiedad para nada. */ .elementor-icon{ transition-property: color, background-color, border-color, fill !important; transition-duration: 150ms !important; transition-timing-function: ease-out !important; } /* --------------------------------------------------------------------------- 7. AREAS TACTILES Se agrandan con pseudo-elementos: el area de toque crece, el dibujo no se mueve de lugar. Las flechas del carrusel median 25x25 y los puntos 6x6 (por debajo incluso del minimo de 24x24 que pide WCAG 2.5.8). --------------------------------------------------------------------------- */ .elementor-swiper-button, .elementor-menu-toggle{ position: relative; transition-property: color, opacity !important; /* venian con "all .25s" */ transition-duration: 150ms !important; transition-timing-function: ease-out !important; } .elementor-swiper-button::after, .elementor-menu-toggle::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } /* Los puntos del carrusel se separan a 24px de paso para que las areas de toque queden pegadas pero sin superponerse (dos controles nunca deben compartir area). */ .swiper-pagination-bullet{ position: relative; margin-left: 9px !important; margin-right: 9px !important; } .swiper-pagination-bullet::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); } /* "Leer la noticia" / "Leer el articulo": 24px de alto -> 44px */ .elementor-post__read-more{ display: inline-flex; align-items: center; min-height: 44px; } /* Listas de contacto y accesos del pie: 25,5px de alto. En escritorio suben a ~37px (el minimo AA de WCAG 2.5.8 son 24px, ya se cumplia) y en telefono, donde se toca con el dedo, suben por encima de 44px. */ .elementor-widget-icon-list .elementor-icon-list-item > a{ padding-top: 6px; padding-bottom: 6px; } @media (max-width: 1024px){ .elementor-widget-icon-list .elementor-icon-list-item > a{ padding-top: 10px; padding-bottom: 10px; } } /* --------------------------------------------------------------------------- 8. CONTORNO DE IMAGENES 1px con muy poca opacidad para que las fotos no se fundan con el fondo blanco por los bordes claros. Negro puro a proposito: un gris de la paleta toma el color del fondo y se ve como suciedad en el borde. outline y no border: no ocupa espacio y no cambia el tamano de la imagen. Se excluyen los logos, que son PNG con transparencia y quedarian encajonados. --------------------------------------------------------------------------- */ .elementor-post__thumbnail img, .elementor-widget-theme-post-featured-image img, .elementor-widget-image img:not([src*="logo"]):not([src*="Signo"]){ outline: 1px solid rgba(0,0,0,.10); outline-offset: -1px; } /* --------------------------------------------------------------------------- 9. MOVIMIENTO REDUCIDO Si el sistema operativo pide reducir el movimiento, se apaga todo. La senal estatica (color, icono, etiqueta) se conserva siempre: el movimiento nunca es el unico canal de informacion. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .elementor-button:active{ scale: 1; } .elementor-post__card:hover{ transform: none; } } /* --------------------------------------------------------------------------- 10. COMPONENTES DEL REDISENO (2026-08-06) Criterio: todo lo que Elementor sabe expresar (fondos, rellenos, radios, sombras, colores) se define en los ajustes de cada elemento, para que el cliente lo vea y lo pueda cambiar desde el editor. Aca abajo queda SOLO lo que Elementor no puede hacer solo: la superposicion de las tarjetas de triaje sobre el hero y la linea de la cronologia. Las clases se agregan a cada elemento desde Avanzado > Clases CSS. --------------------------------------------------------------------------- */ /* --- portada: hero y tarjetas de triaje ----------------------------------- Dos medidas atadas por una formula, por eso viven juntas y no una aca y otra en los ajustes del elemento: 1) El margen negativo de las tarjetas tiene que comerse PRIMERO el relleno superior de la seccion y recien despues monta sobre el hero: margen = -(relleno de la seccion + solape) 2) El titulo tiene que quedar centrado entre el BORDE SUPERIOR de la foto y la LINEA DE LAS TARJETAS, no dentro de la caja entera del hero (la parte de abajo queda tapada). Para eso el relleno inferior del hero tiene que compensar el solape: relleno inferior = relleno superior + solape Cambiar el solape y las otras dos se acomodan solas. El solape se calcula sobre UNA tarjeta (no sobre el bloque): tres cuartos de la tarjeta quedan dentro de la foto y un cuarto asoma sobre el beige. En tablet y telefono las tarjetas se apilan en una columna, pero la cuenta sigue siendo por tarjeta, asi que la primera queda igual que en escritorio. Alturas medidas: 297 px en escritorio, 268 en tablet, 278 en telefono. El relleno superior del hero es libre: la formula lo compensa. Solo tiene que dejar sitio para el titulo dentro de la caja de 600 px. */ :root{ --hjju-solape: 223px; /* 75 % de una tarjeta de 297 */ --hjju-hero-pad: 80px; /* relleno superior del hero */ --hjju-sec-pad: 70px; /* relleno superior de la seccion */ /* flecha del hero (ver bloque siguiente) */ --hjju-flecha-caja: 48px; /* area sensible: nunca por debajo de 44 */ --hjju-flecha-dibujo: 34px; /* tamano del chevron dentro de esa caja */ --hjju-flecha-aire: 22px; /* separacion entre la flecha y las tarjetas */ --hjju-flecha-salto: 14px; /* cuanto sube en el rebote */ } @media (max-width:1024px){ :root{ --hjju-solape: 201px; --hjju-hero-pad: 80px; --hjju-sec-pad: 56px; } } @media (max-width:767px){ :root{ --hjju-solape: 209px; --hjju-hero-pad: 60px; --hjju-sec-pad: 48px; } /* En telefono la bajada ocupa hasta 5 renglones y la banda libre entre el texto y las tarjetas baja de 114 a 88 px: la flecha se achica y salta menos para no acercarse al texto en el pico del rebote. */ :root{ --hjju-flecha-caja: 44px; --hjju-flecha-dibujo: 30px; --hjju-flecha-aire: 18px; --hjju-flecha-salto: 10px; } } .elementor-element-29d2f1c > .e-con-inner{ padding-top: var(--hjju-hero-pad) !important; padding-bottom: calc(var(--hjju-hero-pad) + var(--hjju-solape)) !important; } .hjju-triaje{ margin-top: calc(-1 * (var(--hjju-sec-pad) + var(--hjju-solape))); position: relative; z-index: 2; } /* --- portada: flecha animada del hero ------------------------------------- Invita a seguir bajando: el hero mide 600 px y en un portatil ocupa la pantalla entera, asi que sin senal no se ve que abajo hay contenido. Va FUERA DEL FLUJO (position:absolute) a proposito. El hero centra su contenido en la caja que dejan los rellenos, asi que sumar un tercer elemento en el flujo subiria el titulo unos 28 px y desarmaria el encuadre que calcula la formula de arriba (titulo centrado entre el borde de la foto y la linea de las tarjetas). Absoluta, el titulo y la bajada no se mueven ni un pixel. Es tambien lo que hace el sitio de referencia. Se ancla a la LINEA DE LAS TARJETAS y no al borde del hero: asi conserva siempre el mismo aire por debajo aunque cambie el solape. Medido en la banda libre que queda entre la bajada y las tarjetas: 114 px en escritorio, 134 en tablet, 88 en telefono. El contenedor no recibe el clic (pointer-events) porque es una franja del ancho completo: solo la caja del chevron es sensible. */ .hjju-flecha-hero{ position: absolute; left: 0; right: 0; bottom: calc(var(--hjju-solape) + var(--hjju-flecha-aire)); width: auto !important; display: flex; justify-content: center; z-index: 1; pointer-events: none; } .hjju-flecha-hero .elementor-icon-wrapper{ line-height: 0; } /* El rebote va en el y no en el envoltorio del widget porque ese envoltorio ya lo usa la animacion de entrada de Elementor (fadeIn): dos animation-name sobre el mismo elemento y gana una sola. */ .hjju-flecha-hero .elementor-icon{ pointer-events: auto; display: flex; align-items: center; justify-content: center; width: var(--hjju-flecha-caja); height: var(--hjju-flecha-caja); color: #FFFFFF; opacity: .85; border-radius: 50%; animation: hjju-flecha-rebote 2.4s ease-in-out infinite; transition: opacity var(--hjju-t) linear; } .hjju-flecha-hero .elementor-icon svg{ width: var(--hjju-flecha-dibujo); height: var(--hjju-flecha-dibujo); fill: currentColor; } .hjju-flecha-hero .elementor-icon:hover, .hjju-flecha-hero .elementor-icon:focus-visible{ opacity: 1; } /* El anillo de foco general (bloque 2) es cuadrado con radio 3; aca la caja es redonda y el aro tiene que seguirla. */ .hjju-flecha-hero .elementor-icon:focus-visible{ border-radius: 50% !important; } /* Mismo reparto de tiempos que el rebote de la referencia: sube, cae, rebota a media altura y descansa. La pausa larga del final es la que lo vuelve un gesto y no un parpadeo continuo. La altura sale de la variable para poder bajarla en telefono sin tocar los fotogramas. Con "movimiento reducido" el bloque 9 la apaga y queda en translateY(0). */ @keyframes hjju-flecha-rebote{ 0%, 20%, 50%, 80%, 100%{ transform: translateY(0); } 40%{ transform: translateY(calc(-1 * var(--hjju-flecha-salto))); } 60%{ transform: translateY(calc(-.5 * var(--hjju-flecha-salto))); } } /* Destino del salto. El desplazamiento suave lo hace el scroll-behavior:smooth que ya trae el sitio. El ancla va en el bloque de tarjetas (#contenido = .hjju-triaje) y NO en la seccion que las contiene: como las tarjetas suben 223 px con margen negativo, apuntar a la seccion dejaba su borde superior 127 px por encima de la pantalla y las tarjetas llegaban cortadas. El margen tiene que descontar la cabecera fija: al desplazarse, el bloque 784d28e queda en position:fixed y mide 84 px (los mismos en escritorio, tablet y telefono). 84 de cabecera + 20 de aire = 104. Sin eso las tarjetas llegan por debajo de la cabecera y se ven cortadas. */ #contenido{ scroll-margin-top: 104px; } /* --- portada: los tres botones del triaje -------------------------------- Median 207, 187 y 120 px porque cada uno se ajustaba a su rotulo: tres botones del mismo rango que no se ven del mismo rango. Ahora comparten ancho. */ .hjju-triaje .elementor-button{ min-width: 240px; } /* --- LA FLECHA DE LOS BOTONES ------------------------------------------- CRITERIO (cambiado el 2026-08-19 a pedido del cliente): la flecha marca la accion que RESUELVE lo que el visitante vino a hacer, no el camino para llegar hasta ella. La llevan: "Sacar turnos online" (que efectivamente saca el turno) y "Leer la noticia" / "Leer el articulo" (que abre el contenido buscado). No la llevan: los tres botones del triaje de la portada, "Ver todas las noticias", "Conoce el hospital", "Como llegar", escribir un correo. Todos esos son navegacion: llevan a otra pantalla donde recien se decide algo. El criterio anterior era "la accion principal de cada pagina" y le daba la flecha a los tres botones del triaje, dejando sin ella justamente al unico boton que hace algo: el que sale al sistema de turnos. Marcaba la entrada al embudo y no su final. Se aplica con la clase hjju-flecha en el widget del boton. La flecha va como mascara y no como imagen para que tome el color del texto (currentColor): un solo dibujo sirve para el boton solido y para el de contorno, y sigue al color en hover y en foco. Trazo de 2,5 px porque el rotulo esta en 700; con 1,5 se veria endeble al lado de la letra. */ .hjju-flecha .elementor-button{ padding-right: 24px !important; /* alineacion optica: lado del icono -2 */ } .hjju-flecha .elementor-button .elementor-button-text{ display: inline-flex; align-items: center; justify-content: center; gap: .55em; } .hjju-flecha .elementor-button .elementor-button-text::after{ content: ""; flex: none; width: 1.05em; height: 1.05em; 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='M5 12h14M13 6l6 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='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } /* --- Institucional: cronologia ------------------------------------------ La linea vertical y el circulo del ano no se pueden armar con ajustes del editor. El resto del hito (textos, espaciados) si es editable. */ .hjju-cronologia{ position: relative; } /* OJO con el `left`: la linea se posiciona contra la CAJA DE RELLENO de .hjju-cronologia, pero los hitos (y con ellos los circulos) arrancan 10 px mas adentro, que es el relleno propio del contenedor. Por eso 33 y no 23: 10 (relleno) + 24 (centro del circulo de 48) - 1 (media linea). Medido: el centro de la linea y el del circulo caen los dos en el mismo pixel. */ .hjju-cronologia::before{ content:""; position:absolute; left:33px; top:12px; bottom:12px; width:2px; background:linear-gradient(#91BA15, rgba(145,186,21,.25)); } .hjju-hito{ position:relative; padding-left:74px !important; } .hjju-hito > .e-con-inner{ padding-left:0; } .hjju-hito .hjju-anio{ position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%; background:#004970; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; box-shadow:0 0 0 5px #EEEEE4; z-index:2; } .hjju-hito .hjju-anio .elementor-widget-container, .hjju-hito .hjju-anio p{ margin:0; } /* Red de seguridad: los ocho widgets del ano traian 27 px fijos para tablet y telefono (resto de una copia), asi que "1920" desbordaba 13 px el circulo de 44. Los ajustes ya se corrigieron, pero la medida del numero depende del diametro del circulo, que se define aca: van juntas. */ .hjju-hito .hjju-anio, .hjju-hito .hjju-anio .elementor-heading-title{ font-size: 14px !important; line-height: 1 !important; } @media (max-width:767px){ .hjju-cronologia::before{ left:31px; } /* 10 + 22 - 1, circulo de 44 */ .hjju-hito{ padding-left:62px !important; } .hjju-hito .hjju-anio{ width:44px; height:44px; } .hjju-hito .hjju-anio, .hjju-hito .hjju-anio .elementor-heading-title{ font-size: 13px !important; } } /* --- miga de pan de las paginas interiores ------------------------------- */ .hjju-miga{ font-size:14.5px; } .hjju-miga a{ display:inline-flex; align-items:center; min-height:26px; color:#DDEBF3; } .hjju-miga a:hover{ color:#fff; } /* --- cabecera que se achata al bajar -------------------------------------- Ya existia en el sitio. Se deja, pero con la transicion declarada sobre las propiedades exactas y apagada si el sistema pide menos movimiento: en las paginas largas (Servicios e Institucional pasan los 3.000 px) devuelve pantalla, y el gesto es suficientemente chico como para no distraer. */ header.elementor-location-header .elementor-sticky--effects{ transition-property: min-height, padding; transition-duration: 220ms; transition-timing-function: ease-out; } header.elementor-location-header .elementor-sticky--effects img{ transition-property: width; transition-duration: 220ms; transition-timing-function: ease-out; } @media (prefers-reduced-motion: reduce){ header.elementor-location-header .elementor-sticky--effects, header.elementor-location-header .elementor-sticky--effects img{ transition-duration: .01ms; } } /* --- barra de contacto: en tablet y telefono, solo iconos ----------------- La direccion completa entraba en tres renglones y empujaba todo hacia abajo. El texto no se borra: queda para el lector de pantalla. */ @media (max-width:1024px){ .hjju-barra-contacto .elementor-icon-list-items{ display:flex; justify-content:space-around; gap:0; } .hjju-barra-contacto .elementor-icon-list-item{ margin:0 !important; } .hjju-barra-contacto .elementor-icon-list-item > a, .hjju-barra-contacto .elementor-icon-list-item > span{ min-width:48px; min-height:44px; justify-content:center; } .hjju-barra-contacto .elementor-icon-list-text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .hjju-barra-contacto .elementor-icon-list-icon{ margin:0 !important; } .hjju-barra-contacto .elementor-icon-list-icon i{ font-size:19px !important; } } /* --- tarjetas de contenido: respuesta al puntero ------------------------- Los contenedores que hacen de tarjeta llevan la clase hjju-tarjeta. El aspecto (fondo, radio, sombra, relleno) se define en el editor; aca solo va el estado, que el editor no expone para contenedores. */ .hjju-tarjeta{ transition-property: box-shadow, transform; transition-duration: 200ms; transition-timing-function: ease-out; } .hjju-tarjeta:hover{ box-shadow: 0 10px 28px rgba(0,73,112,.16) !important; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce){ .hjju-tarjeta:hover{ transform:none; } } /* --------------------------------------------------------------------------- 11. BASE TIPOGRAFICA (2026-08-06) El tema traia 16px y #333. La maqueta usa 17px y el Negro del manual. Es el cambio que mas se percibe, porque toca todos los parrafos del sitio. --------------------------------------------------------------------------- */ body, .elementor-widget-text-editor, .elementor-widget-theme-post-content, .elementor-widget-icon-box .elementor-icon-box-description, .elementor-widget-icon-list .elementor-icon-list-text{ font-family:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:17px; line-height:1.55; color:#292728; } .elementor-widget-text-editor p, .elementor-widget-theme-post-content p{ font-size:17px; line-height:1.55; } /* --------------------------------------------------------------------------- 12. TARJETAS DE ENTRADAS (2026-08-06) El skin "cards" de Elementor trae radio 3px y sombra gris neutra desde su propio CSS, que se carga despues del kit. Por eso la regla suelta .elementor-post__card no ganaba: hace falta mas especificidad. El widget no expone control de radio, asi que este es el lugar correcto. --------------------------------------------------------------------------- */ .elementor-widget-archive-posts .elementor-post__card, .elementor-widget-posts .elementor-post__card, .elementor-widget-loop-grid .elementor-post__card{ border-radius:14px !important; box-shadow:0 6px 22px rgba(0,73,112,.10) !important; overflow:hidden; transition-property:box-shadow, transform !important; transition-duration:200ms !important; transition-timing-function:ease-out !important; } .elementor-widget-archive-posts .elementor-post__card:hover, .elementor-widget-posts .elementor-post__card:hover, .elementor-widget-loop-grid .elementor-post__card:hover{ box-shadow:0 10px 28px rgba(0,73,112,.16) !important; transform:translateY(-2px); } @media (prefers-reduced-motion: reduce){ .elementor-post__card:hover{ transform:none; } } /* =========================================================================== 13. HOMOGENEIDAD ENTRE PAGINAS (2026-08-06, segunda pasada) Medido en vivo con Playwright sobre las 8 vistas x 3 anchos. Cada pagina se habia construido por separado y cada una habia elegido sus propios tamanos: 6 tratamientos distintos para el H1, 5 tamanos para el titulo de seccion, 4 para el titulo de tarjeta. Ninguno esta "mal" por si solo; el problema es que juntos hacen que el sitio se sienta como cinco sitios. Se define UNA escala y se aplica por ROL, no por pagina. Las excepciones van por id de elemento cuando el rol no se puede expresar con un .elementor-kit-4 (por ejemplo "Fuentes", que es un h2 pero cumple el papel de subtitulo). Los !important son para ganarle al CSS que Elementor genera por elemento. =========================================================================== */ :root{ /* escala tipografica: 60 / 44 / 36 / 28 / 24 / 22 / 20 (razon ~1,22) */ --hjju-t-portada: 60px; /* h1 del hero de la portada */ --hjju-t-vista: 44px; /* h1 de cualquier otra vista */ --hjju-t-seccion: 36px; /* titulo de seccion */ --hjju-t-articulo: 28px; /* h2 dentro del cuerpo de un articulo*/ --hjju-t-bloque: 24px; /* subtitulo de bloque y tarjeta */ --hjju-t-tarjeta: 22px; /* titulo de tarjeta de listado */ --hjju-t-item: 20px; /* titulo de item */ --hjju-medida: 680px; /* ~78 caracteres: el maximo comodo */ --hjju-medida-c: 640px; /* texto centrado: mas corto aun */ } /* --- 13.1 H1: el titulo de la vista --------------------------------------- Estaba en 40, 44, 48, 54 y 72 px, con dos pesos (600 y 700), tres interlineados (1,0 / 1,15 / 1,2) y una italica suelta en la portada. La italica era el unico texto inclinado del sitio. Ahora hay dos tamanos y una sola razon de ser: la portada es el hero y pesa mas; todas las demas vistas comparten el mismo titulo. */ h1.elementor-heading-title, .elementor-widget-theme-post-title h1{ font-size: var(--hjju-t-vista) !important; font-weight: 700 !important; font-style: normal !important; /* fuera la italica de la portada */ line-height: 1.1 !important; text-wrap: balance; } body.home h1.elementor-heading-title{ font-size: var(--hjju-t-portada) !important; } @media (max-width:1024px){ h1.elementor-heading-title, .elementor-widget-theme-post-title h1{ font-size: 36px !important; } body.home h1.elementor-heading-title{ font-size: 44px !important; } } @media (max-width:767px){ h1.elementor-heading-title, .elementor-widget-theme-post-title h1{ font-size: 30px !important; } body.home h1.elementor-heading-title{ font-size: 36px !important; } } /* --- 13.2 H2: titulo de seccion ------------------------------------------- Estaba en 32 (Otras publicaciones), 34 (Otras noticias), 40 (interiores) y 42 (portada). Ademas 40 contra un H1 de 48 es un escalon demasiado corto: el ojo no distingue jerarquia. 44 -> 36 si se distingue. */ .elementor-widget-heading h2.elementor-heading-title{ font-size: var(--hjju-t-seccion) !important; line-height: 1.2 !important; } /* Excepcion: "Fuentes" (Institucional) es un h2 por semantica pero cumple el papel de subtitulo de un bloque menor. Se queda en la medida de bloque. */ .elementor-element-7b0003c h2.elementor-heading-title{ font-size: var(--hjju-t-bloque) !important; line-height: 1.25 !important; } @media (max-width:767px){ .elementor-widget-heading h2.elementor-heading-title{ font-size: 27px !important; } } /* --- 13.3 H3: subtitulo de bloque ----------------------------------------- 27 px en las areas de Servicios y 26 en las tarjetas de Contacto, contra los 24 que ya usaban los hitos de Institucional. Los tres son el mismo rol. */ .elementor-widget-heading h3.elementor-heading-title{ font-size: var(--hjju-t-bloque) !important; line-height: 1.25 !important; } /* Excepciones: las columnas del pie y los titulos de tarjeta de los grids relacionados, que son de otro rol y ya tenian su medida. */ .elementor-location-footer .elementor-widget-heading h3.elementor-heading-title{ font-size: var(--hjju-t-tarjeta) !important; line-height: 1 !important; } .e-loop-item .elementor-widget-heading h3.elementor-heading-title{ font-size: var(--hjju-t-item) !important; line-height: 1.3 !important; } /* --- 13.4 Titulos de tarjeta ---------------------------------------------- El mismo componente daba 21 px en la portada, 22 en Noticias y 24 en Publicaciones. Es literalmente la misma tarjeta. */ .elementor-post__title, .elementor-post__title a{ font-size: var(--hjju-t-tarjeta) !important; line-height: 1.3 !important; } /* Los icon-box de nivel tarjeta iban 23 / 24 / 26. Los h4 (los 30 servicios) son items, no tarjetas: se quedan en 20. */ .elementor-widget-icon-box h2.elementor-icon-box-title, .elementor-widget-icon-box h3.elementor-icon-box-title{ font-size: var(--hjju-t-bloque) !important; line-height: 1.25 !important; } .elementor-widget-icon-box h4.elementor-icon-box-title{ font-size: var(--hjju-t-item) !important; line-height: 1.25 !important; } /* --- 13.5 Cuerpo de los articulos ----------------------------------------- Los h2 internos iban 32 px en una noticia y 26 en una publicacion, y la regla verde de subrayado estaba en una si y en la otra no (y con 2 px en vez de los 3 que usa el resto del sitio). Ojo con el .elementor-kit-4: las paginas interiores tambien se pintan con theme-post-content (la plantilla PAG-SIMPLE), asi que hay que acotar a body.single o se les cambia el cuerpo entero a las paginas. */ body.single .elementor-widget-theme-post-content h2{ font-size: var(--hjju-t-articulo) !important; line-height: 1.25 !important; border-bottom: 3px solid var(--hjju-verde) !important; padding-bottom: 8px !important; } body.single .elementor-widget-theme-post-content h3{ font-size: 21px !important; line-height: 1.3 !important; } /* --- 13.6 MEDIDA DE LINEA ------------------------------------------------- El hallazgo mas grande de la auditoria: 131 caracteres por linea en el cuerpo de las noticias y las publicaciones, 124 en las tarjetas de Publicaciones, 120 en la historia de Institucional. Lo comodo son 45-85; a partir de ~90 el ojo pierde el renglon al volver a la izquierda, y esto es un sitio que leen personas mayores. Se acota el ancho del bloque, no el tamano de la letra. Los !important son obligatorios: Elementor emite width/max-width al 100 % por elemento y le gana a cualquier .elementor-kit-4 razonable de esta hoja. */ body.single .elementor-widget-theme-post-content{ max-width: var(--hjju-medida) !important; margin-inline: auto !important; } /* La imagen destacada acompana al texto en vez de sobresalir 120 px por lado */ body.single .elementor-widget-theme-post-featured-image img{ max-width: var(--hjju-medida) !important; } /* Bajada de seccion (el parrafo que sigue a un titulo): siempre centrado y corto. Es el patron que ya usaban la portada e Institucional. */ .elementor-widget-heading + .elementor-widget-text-editor{ max-width: var(--hjju-medida-c) !important; margin-inline: auto !important; } /* Historia de Institucional: alineada a la izquierda, no se centra el bloque */ .hjju-hito .elementor-widget-text-editor, .hjju-hito .elementor-widget-heading + .elementor-widget-text-editor{ max-width: var(--hjju-medida) !important; margin-inline: 0 !important; } /* Bajada de Servicios: no es hermana de un titulo, va por id */ .elementor-element-5c00001{ max-width: var(--hjju-medida-c) !important; margin-inline: auto !important; } /* Resumen de las tarjetas de Publicaciones (1.080 px de ancho) */ .elementor-post__excerpt{ max-width: var(--hjju-medida) !important; } /* --- 13.7 MENU EN TELEFONO ------------------------------------------------ El desplegable salia con los grises de fabrica de Elementor: texto #33373D y el item activo sobre #3F444B. Ni el azul ni el verde ni el beige del manual aparecian. Es la navegacion principal de la mayoria de las visitas y era lo unico del sitio que no parecia del hospital. Ademas los items median 40 px de alto, por debajo de los 44 que necesita un dedo. */ .elementor-nav-menu--dropdown{ background-color: #fff !important; border-radius: var(--hjju-radio); overflow: hidden; box-shadow: var(--hjju-sombra); } .elementor-nav-menu--dropdown a.elementor-item{ min-height: 52px; padding: 14px 20px !important; color: var(--hjju-azul) !important; background-color: transparent !important; font-weight: 600; border-bottom: 1px solid var(--hjju-beige); transition-property: color, background-color; transition-duration: var(--hjju-t); transition-timing-function: ease-out; } .elementor-nav-menu--dropdown li:last-child a.elementor-item{ border-bottom: 0; } .elementor-nav-menu--dropdown a.elementor-item:hover, .elementor-nav-menu--dropdown a.elementor-item.highlighted{ color: var(--hjju-azul) !important; background-color: var(--hjju-beige) !important; } /* El item de la pagina actual: el verde de marca como barra lateral, igual que el subrayado verde del menu de escritorio. El color no es la unica senal (tambien esta aria-current), pero es la que se ve. */ .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{ color: var(--hjju-azul) !important; background-color: var(--hjju-beige) !important; box-shadow: inset 4px 0 0 var(--hjju-verde); font-weight: 700; } /* --- 13.8 CABECERA EN TELEFONO ------------------------------------------- Ocupaba 256 px de los 844 de un telefono (el 30 % de la pantalla) antes de que empezara el contenido: el logo tomaba una fila entera de 370 px de ancho y la hamburguesa otra fila, centrada. Ahora van los dos en la misma fila, logo a la izquierda y hamburguesa a la derecha, que es donde el pulgar la encuentra. El corte es 1024 y no 767 porque el menu de Elementor ya pasa a hamburguesa en tablet ("dropdown-tablet"): de 768 a 1024 pasaba exactamente lo mismo. */ @media (max-width:1024px){ .elementor-element-784d28e > .e-con-inner{ grid-template-columns: 1fr auto !important; align-items: center; gap: 12px; } .elementor-element-f5d7b4d img{ max-width: 260px !important; } .elementor-element-ecd2858{ width: auto !important; /* static a proposito: Elementor le pone position:relative al widget, y con eso el desplegable (absolute) se anclaba al widget, que ahora mide lo que mide la hamburguesa. Quedaba una columna de 30 px. Anclandolo a la cabecera vuelve a ocupar el ancho completo. */ position: static !important; } .elementor-element-ecd2858 .elementor-menu-toggle{ margin: 0 !important; color: var(--hjju-azul) !important; background-color: transparent !important; width: 44px; height: 44px; } /* el desplegable ocupa el ancho completo, por debajo de logo y hamburguesa */ .elementor-element-ecd2858 .elementor-nav-menu--dropdown{ position: absolute; left: 10px; right: 10px; top: 100%; width: auto !important; margin-top: 0 !important; z-index: 20; } .elementor-element-784d28e{ position: relative; } } @media (max-width:767px){ .elementor-element-f5d7b4d img{ max-width: 220px !important; } } /* --- 13.9 SUPERFICIES ----------------------------------------------------- Un solo radio para todo lo que hace de tarjeta. Las de Servicios usaban 12 px, las relacionadas 14 y las de listado 14: la diferencia no se nota de a una, pero el token evita que vuelva a abrirse. */ .hjju-tarjeta, .elementor-post__card, .e-loop-item > .e-con{ border-radius: var(--hjju-radio) !important; } /* --- 13.10 TARJETA DE "OTRAS NOTICIAS" / "OTRAS PUBLICACIONES" ------------ Es la misma noticia que en el listado, pero contada de otra forma: la imagen iba enmarcada con 10 px de aire (y sin recortar, asi que cada tarjeta tenia una foto de distinto ancho, con huecos blancos a los lados), y la fecha iba ARRIBA del titulo cuando en el listado va al pie. Se alinea con el listado: foto a sangre, recortada al mismo alto, y la fecha despues del titulo. El radio de la foto es concentrico (14 - 10 = 4). */ .e-loop-item > .e-con{ overflow: hidden; } .e-loop-item .elementor-widget-image a, .e-loop-item .elementor-widget-image img{ display: block; width: 100%; border-radius: 4px; } .e-loop-item .elementor-widget-image img{ height: 190px; object-fit: cover; } /* la fecha baja debajo del titulo (el titulo es el unico h3 de la tarjeta) */ .e-loop-item .elementor-widget-heading:has(h3){ order: 1; } .e-loop-item .elementor-widget-heading:not(:has(h3)){ order: 2; } /* --- 13.11 BOTONES: una sola medida -------------------------------------- Convivian 17 px con relleno 13/26 y 18 px con relleno 14/30, asi que dos botones con el mismo papel median distinto segun la pagina. El letter-spacing de 1 px venia de cuando los rotulos estaban en mayusculas; con los rotulos en caja de oracion (ver el informe) sobra y separa de mas. */ .elementor-button{ font-size: 17px !important; padding: 13px 26px !important; letter-spacing: 0 !important; line-height: 1.25; } /* "Leer la noticia" / "Leer el articulo": el skin de Elementor los pone en VERSALITA DURA desde su propio CSS aunque el texto guardado este en caja de oracion. Con los botones ya unificados en caja de oracion, quedaban como el unico rotulo de accion a los gritos. */ .elementor-post__read-more{ text-transform: none !important; letter-spacing: 0 !important; } /* Flecha tambien en los enlaces de lectura ("Leer la noticia", "Leer el articulo"): en un listado, abrir el articulo ES la accion que resuelve la visita, asi que entra por el criterio de arriba. Es el mismo dibujo que el del boton, en escala del texto. */ .elementor-post__read-more::after{ content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .45em; vertical-align: -.13em; 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='M5 12h14M13 6l6 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='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } /* =========================================================================== 14. AJUSTES PEDIDOS POR EL CLIENTE (2026-08-06, tercera pasada) =========================================================================== */ /* --- 14.1 La barra azul de contacto ocupa una sola fila ------------------- Median 64 px: 44 del area tactil del icono mas 10+10 de relleno propio del contenedor. Con tres iconos de 19 px adentro, leia como si fueran dos renglones vacios. El relleno se va y el area tactil de 44 px se queda: la barra mide exactamente lo que mide el area de toque. */ @media (max-width:1024px){ .elementor-element-d1b08ad > .e-con-inner{ padding-top: 0 !important; padding-bottom: 0 !important; } /* Los iconos son SVG dentro de cajas flex con align-items en su valor inicial, asi que se apoyaban en el BORDE SUPERIOR de la barra y se veian cortados. El area tactil de 44 px ya estaba bien; lo que faltaba era centrar el dibujo dentro de ella. */ .hjju-barra-contacto .elementor-icon-list-item, .hjju-barra-contacto .elementor-icon-list-item > a, .hjju-barra-contacto .elementor-icon-list-item > span, .hjju-barra-contacto .elementor-icon-list-icon{ display: flex !important; align-items: center !important; } .hjju-barra-contacto .elementor-icon-list-icon svg{ width: 17px; height: 17px; margin: 0 !important; } } /* --- 14.2 La cabecera se alinea con el contenido (telefono y tablet) ------ La cabecera usaba 10 px de gotera y el contenido 16 (telefono) o 20 (tablet): el logo y el menu arrancaban antes que todo lo demas, y el desajuste se nota justo en el borde superior de la pantalla. */ @media (max-width:1024px){ .elementor-element-d1b08ad, .elementor-element-784d28e{ padding-inline: 20px !important; } .elementor-element-ecd2858 .elementor-nav-menu--dropdown{ left: 20px; right: 20px; } } @media (max-width:767px){ .elementor-element-d1b08ad, .elementor-element-784d28e{ padding-inline: 16px !important; } .elementor-element-ecd2858 .elementor-nav-menu--dropdown{ left: 16px; right: 16px; } } /* --- 14.2b Botones en fila: el mismo ancho -------------------------------- El mismo criterio que el triaje de la portada, aplicado donde hay dos o mas botones a la par: las tres tarjetas de Contacto (168 / 208 / 190 px) y el par de Servicios (208 / 190). Botones del mismo rango, anchos distintos. Sin flecha: ahi los destinos son mixtos (una guardia, un turno, un correo) y la flecha diria "seguir" tambien donde se abre el correo. */ .hjju-tarjeta .elementor-button, .elementor-element-5c00002 .elementor-button, .elementor-element-5c00003 .elementor-button{ min-width: 220px; } /* Las tarjetas del triaje TAMBIEN son .hjju-tarjeta, y esta regla viene despues, asi que le ganaba a los 240 de 14.1. Se le devuelve la prioridad. */ .hjju-triaje .hjju-tarjeta .elementor-button{ min-width: 240px; } @media (max-width:480px){ .hjju-tarjeta .elementor-button, .elementor-element-5c00002 .elementor-button, .elementor-element-5c00003 .elementor-button{ min-width: 0; width: 100%; } } /* --- 14.4 El menu, a la altura del logo ----------------------------------- Medido con el centroide de tinta sobre la captura: la tinta del menu llegaba 8 px mas abajo que la del logo. El culpable es el subrayado verde del item activo, que cuelga 13 px por debajo de la linea de base porque se apoya en el borde inferior del relleno del item. Se lo acerca al texto y se compensa la diferencia que queda con un empujon optico de 3 px. */ @media (min-width:1025px){ .elementor-nav-menu--main .elementor-item::after, .elementor-nav-menu--main .elementor-item::before{ bottom: 8px !important; } /* El empujon va con position y no con margin: Elementor emite el margen del widget por elemento y le gana a cualquier regla de esta hoja. Con position tampoco se toca el flujo, asi que el area de clic viaja con el texto. */ .elementor-element-ecd2858 .elementor-nav-menu--main{ position: relative; top: -4px; } } /* --- 14.6 Guion bajo el titulo de cada vista ------------------------------ Las bandas de titulo quedaban al aire, sobre todo las cuatro que no llevan bajada (Institucional, Servicios, Contacto y las dos vistas de detalle): una palabra sola en el medio de 250 px de azul. Es un guion suelto y NO un subrayado: va separado del texto y centrado con el, asi que cierra el bloque sin leerse como enlace. En Noticias y Publicaciones queda entre el titulo y la bajada, que es donde corresponde. La portada queda afuera a proposito: su hero ya tiene bajada y tres tarjetas montadas encima, no necesita nada mas. */ body:not(.home) h1.elementor-heading-title::after, body:not(.home) .elementor-widget-theme-post-title h1::after{ content: ""; display: block; width: 64px; height: 3px; margin: 20px auto 0; border-radius: 2px; background: var(--hjju-verde); } @media (max-width:767px){ body:not(.home) h1.elementor-heading-title::after, body:not(.home) .elementor-widget-theme-post-title h1::after{ width: 48px; margin-top: 16px; } } /* --- 14.7 Institucional: las fuentes, como lista ------------------------- Eran cuatro citas separadas por
dentro de un parrafo: un bloque de texto suelto al pie de la pagina, sin nada que dijera "esto es una lista de procedencias". Ahora es un