.elementor-18754 .elementor-element.elementor-element-c0beaab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:40px;--padding-bottom:40px;--padding-left:12px;--padding-right:12px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-18754 .elementor-element.elementor-element-bc6d854{text-align:center;}.elementor-18754 .elementor-element.elementor-element-bc6d854 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:35px;font-weight:500;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-18754 .elementor-element.elementor-element-a7c31f0{text-align:center;font-family:"Lato", Sans-serif;font-size:18px;font-weight:400;}.elementor-18754 .elementor-element.elementor-element-a184d1d{--spacer-size:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-18754 .elementor-element.elementor-element-68330eb{--grid-columns:3;--grid-row-gap:9px;--grid-column-gap:37.7953px;}@media(min-width:768px){.elementor-18754 .elementor-element.elementor-element-c0beaab{--content-width:1576px;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );}.elementor-18754 .elementor-element.elementor-element-68330eb{--grid-columns:2;}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );}.elementor-18754 .elementor-element.elementor-element-68330eb{--grid-columns:2;}}/* Start custom CSS *//* ==========================================================================
ESIGENZE — grilla F4. Valores replicados 1:1 de F4-mockup/assets/mockup.css
(mockup aprobado por Christian el 31 jul). El hover NO se reproduce con
filter: las -over son la foto ya tratada por el cliente -> swap de imagen.
==========================================================================
COLOR DE LA FRANJA — CONFIRMADO por el cliente el 4 ago 2026: blanco 80%.
El brief del cliente dice "gris uniforme"; su propio mockup la dibuja
blanca translucida. Se deja la variante que EL dibujo. Cuando mande el RGB
se cambia UNA SOLA LINEA: la de --esig-band.
alternativa gris del sitio actual: #EEEEEE
========================================================================== */
.esig-grid { --esig-band: rgba(255,255,255,.80); }
/* --- card --- [MOCK] ratio 634/414 · radius 12px --- */
.esig-card { position:relative; overflow:hidden; background:#fff;
text-decoration:none; color:inherit; display:block;
border-radius:12px 12px 0 0; aspect-ratio:634/414; padding:0 !important; }
.esig-card > .e-con-inner { height:100%; padding:0; display:block; }
/* --- las dos imagenes, superpuestas --- */
.esig-media { position:absolute; inset:0; padding:0 !important; display:block; }
.esig-media > .e-con-inner { height:100%; padding:0; display:block; }
.esig-img { position:absolute; inset:0; margin:0 !important; width:100%; height:100%; }
.esig-img .elementor-widget-container, .esig-img figure, .esig-img img {
width:100%; height:100%; margin:0; }
.esig-img img { object-fit:cover; object-position:center; display:block; }
.esig-over { position:absolute; inset:0; padding:0 !important; min-height:0 !important;
background-size:cover; background-position:center; background-repeat:no-repeat;
opacity:0; transition:opacity .35s ease; }
.esig-card:hover .esig-over,
.esig-card:focus-visible .esig-over { opacity:1; }
/* --- franja --- [MOCK] alto 26% · radius 28px · padding 0 20px --- */
.esig-bar { position:absolute; left:0; right:0; bottom:0; height:28%; z-index:2;
background:var(--esig-band);
border-radius:28px 28px 0 0; padding:0 26px !important; min-height:0 !important; }
/* SIN backdrop-filter a proposito. El mockup lo usaba (blur 1px), pero aqui
colapsaba la altura del contenedor de la grilla: el elemento se vuelve
containing block y, combinado con aspect-ratio + hijos absolutos, dejaba el
contenedor raiz en 550px con 4.080px de contenido -> el footer se montaba
encima de las cards en mobile. Aislado quitando reglas de a una y midiendo.
Con --esig-band en rgba(...,.80) el efecto visual es equivalente. */
.esig-bar > .e-con-inner { height:100%; padding:0;
display:flex; align-items:center; justify-content:space-between; gap:16px;
flex-direction:row; }
.esig-title, .esig-title .elementor-widget-container { margin:0; }
.esig-title .elementor-heading-title { /* [SITIO] typography secondary 20/500 */
font-size:22px; font-weight:500; line-height:1.15; color:#000; margin:0; overflow:hidden; }
/* --- boton --- [SITIO] radius 100px · border 1px #000 · fondo transparente ---
NO es un : el link es la card entera (container con html_tag=a). Un
aca dentro seria un link anidado y el parser lo auto-cerraria. Es un heading
estilizado como boton, igual que el del mockup. */
.esig-btn .elementor-heading-title {
display:inline-flex; align-items:center; justify-content:center;
font-size:16px; font-weight:500; letter-spacing:.02em; line-height:1;
padding:12px 24px; white-space:nowrap;
border-radius:100px; border:1px solid #000; background:transparent; color:#000;
transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
/* El boton se invierte al pasar por CUALQUIER parte de la card, no solo sobre
el boton: en el mockup la imagen -over y el boton negro cambian juntos. */
/* !important obligatorio: el CSS por-elemento que genera Elementor para el
widget button tiene mas especificidad que cualquier body.elementor-page-18754 de clase.
Sin esto el boton NO se invierte — verificado midiendo el pixel, no el CSS. */
.esig-card:hover .esig-btn .elementor-heading-title,
.esig-card:focus-visible .esig-btn .elementor-heading-title {
background-color:#000 !important; color:#fff !important;
border-color:#000 !important; }
@media (max-width:1024px) { .esig-title .elementor-heading-title { font-size:24px; } }
/* --------------------------------------------------------------------------
MOBILE (1 columna) — la franja va DEBAJO de la imagen, no superpuesta.
No es una preferencia: a 1 columna, una card cuyos hijos son TODOS
position:absolute deja al grid del Loop Grid sin altura intrinseca y el
contenedor se queda en 550px con 4.080px de contenido -> el footer se monta
encima de las cards. Verificado: solo falla a <=640px (768/1024/1440 ok) y
solo con la franja absoluta. Con la franja en flujo la card mide de verdad.
Efecto secundario: en mobile el titulo se lee sobre fondo propio, mas legible.
-------------------------------------------------------------------------- */
@media (max-width:640px) {
.esig-card { aspect-ratio:auto; }
.esig-media { position:relative; inset:auto; width:100%; aspect-ratio:16/10; }
.esig-bar { position:static; height:auto; border-radius:0;
padding:12px 12px !important; }
.esig-bar > .e-con-inner, .esig-bar {
flex-direction:column !important; align-items:flex-start !important;
gap:10px !important; }
.esig-title .elementor-heading-title { font-size:20px; line-height:1.25; }
.esig-btn .elementor-heading-title { font-size:14px; padding:10px 18px; }
}
/* ==========================================================================
BLOQUE GENERADO — imagen -over de cada card, una regla por esigenza.
Por que esta aca y no en el loop item: el dynamic tag `post-custom-field`
de Elementor Pro NO es un Data_Tag, asi que no puede alimentar un widget
imagen (verificado: el widget no renderiza nada). La URL vive en el campo
personalizado `esigenza_over` de cada pagina; estas reglas la vuelcan al CSS.
AL AGREGAR UNA ESIGENZA NUEVA hay que sumar aqui su linea, salvo que se
active el snippet PHP `esigenze-dinamicas` (ver informe F4-esigenze-build.md),
que hace esto solo y ademas resuelve la query por pagina padre.
========================================================================== */
.e-loop-item-19851 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-01-infortuni-over.jpg); }
.e-loop-item-19852 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-02-tensioni-over.jpg); }
.e-loop-item-19853 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-03-integratori-over.jpg); }
.e-loop-item-19854 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-04-imicrocircolo-over.jpg); }
.e-loop-item-19850 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-05-emorroidi-over.jpg); }
.e-loop-item-19855 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-06-supporto-sport-over.jpg); }
.e-loop-item-19856 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-07-memoria-over.jpg); }
.e-loop-item-19857 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-08-repellenti-over.jpg); }
.e-loop-item-19858 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-09-flora-batterica-over.jpg); }
.e-loop-item-19859 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-10-igiene-orale-over.jpg); }
.e-loop-item-19860 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-11-cura-corpo-over.jpg); }
.e-loop-item-19861 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-12-vie-respiratorie-over.jpg); }
.e-loop-item-19862 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-13-cura-bambini-over.jpg); }
.e-loop-item-19863 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-14-longevita-over.jpg); }
.e-loop-item-19864 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-15-benessere-cardio-over.jpg); }
.e-loop-item-19865 .esig-over { background-image:url(https://www.dulacfarmaceutici.com/wp-content/uploads/2026/08/esigenze-16-vie-urinarie-over.jpg); }/* End custom CSS */