/*
Theme Name: Hello Elementor Child
Version: 1.0
Description: A child theme of Hello Elementor
Template: hello-elementor
Author: Amministratore
*/
@import url("../hello-elementor/style.css");
/* Your awesome customization starts here */

/* =========================================================================
   Dulac Farmaceutici — F4 · Home Nuova
   Página 19902 · slug "home-nuova" · construida el 2 ago 2026 por /engineering
   -------------------------------------------------------------------------
   ALCANCE: todas las reglas están scopeadas a clases "mz-*" que SÓLO existen
   en esa página. El archivo se carga en todo el sitio (enqueue en el
   functions.php del child), pero no puede alterar ninguna otra página.

   ORIGEN DE LOS VALORES — detalle en F4-mockup/README.md:
     [SITIO]      medido por computedStyle del demo (valor exacto del sitio)
     [MOCK]       medido por proporción sobre los JPG del cliente
     [PROVISORIO] decisión pendiente del cliente — NO asumir como definitivo
   ========================================================================= */


/* -------------------------------------------------------------------------
   🕳️ HUECO ABIERTO #1 y #2 — LA FRANJA DE LOS BOXES, EN UNA SOLA VARIABLE
   -------------------------------------------------------------------------
   El brief del cliente pide "franja gris uniforme", pero su propio mockup la
   dibuja BLANCA TRANSLÚCIDA (se ve la foto a través). Se contradicen y no lo
   resolvemos por criterio propio: queda pendiente de su respuesta del lunes.

   El provisorio de abajo es la variante que el cliente DIBUJÓ (translúcida).
   Para pasar a gris sólido, cambiar SOLO esta línea:
       --mz-band-bg: #EEEEEE;   <- gris más cercano del sitio actual
   El RGB exacto también está pendiente (el mockup muestrea #E9EAED).
   ------------------------------------------------------------------------- */
:root{
  /* [PROVISORIO] Sigue siendo blanca (hueco #1 sin decidir), pero se subió la
     opacidad de .82 → .96: en las cards chicas de mobile la .82 dejaba ver la
     foto a través y "quedaba sin overlay" (feedback Christian, 2 ago). Cuando el
     cliente decida gris uniforme vs translúcida + RGB, se cambia SOLO esta línea. */
  --mz-band-bg: rgba(255,255,255,.96);
}


/* -------------------------------------------------------------------------
   1. HERO — VIDEO A ANCHO COMPLETO Y PEGADO AL HEADER
   [MOCK] En el JPG el video va de x59 a x1980: exactamente el mismo ancho que
   el header, o sea NO entra en el contenedor de 1600px. Y el beige del header
   termina en y175 mientras el gris del video arranca en y176 → 0px de gap.
   Ratio 1915/610 ≈ 3,14:1 medido del mockup.
   ------------------------------------------------------------------------- */
.mz-hero-video{
  margin-block: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
}
.mz-hero-video > .e-con-inner{ padding: 0 !important; max-width: 100% !important; }
.mz-hero-video .mz-hero-video__player{ width: 100%; }
.mz-hero-video .elementor-widget-container{ line-height: 0; }

/* El ratio lo fija este CSS, no el widget: el control "aspect_ratio" que se le
   pasó al widget por el MCP no llegó a guardarse (el wrapper sale sin la clase
   .elementor-fit-aspect-ratio y sin el setting en data-settings), así que
   depender de él sería depender de algo que no está. Se apunta al wrapper
   genérico, que sí existe siempre. */
.mz-hero-video .elementor-widget-video .elementor-wrapper{
  position: relative;
  padding-bottom: 0 !important;
  height: auto !important;
  /* 28-ago-2026: llegó el video real del cliente y el ratio pasa a ser EL SUYO.
     Antes decía 1915/732 (≈2,62:1), que era la banda del mockup. El video real
     es 1920×634 = 3,028:1 — más panorámico —, así que con el ratio viejo se
     recortaba el 42% de los lados. Medido a 1920, 1440, 1024 y 390: los cuatro
     perdían lo mismo. Con el ratio del propio video no se recorta nada. */
  aspect-ratio: 1920 / 634;
  overflow: hidden;
}
/* El embed de YouTube es 16:9; el contenedor del mockup es ~3,14:1 (mucho más
   panorámico). Elementor le mete al iframe un `height:130% !important` anclado
   arriba (top:0) → el video quedaba MÁS ALTO que el contenedor y descentrado
   hacia abajo. Acá se lo hace "cover" de verdad: 16:9 del viewport (el video es
   full-bleed, así que 56,25vw = su alto 16:9) y CENTRADO con transform, para
   que el recorte sea parejo arriba y abajo. Cuando llegue el video real
   panorámico del cliente, encaja sin recorte.
   El selector lleva el id del post + `.elementor-video` para ganarle en
   especificidad al `!important` de Elementor. */
/* El iframe (embed) sigue necesitando el truco del "cover" a mano, porque
   YouTube entrega 16:9 sí o sí. */
.mz-hero-video .elementor-widget-video .elementor-wrapper iframe.elementor-video{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100% !important;
  height: 56.25vw !important;
  min-height: 100% !important;
  min-width: 100% !important;
}
/* El video subido, en cambio, YA tiene el ratio del contenedor: sólo tiene que
   llenarlo. Nada de 56.25vw ni de transform — eso era lo que lo estiraba a
   16:9 y hacía que se viera cortado. */
.mz-hero-video .elementor-widget-video .elementor-wrapper video{
  position: absolute;
  inset: 0;
  transform: none;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: cover;
  /* 🔴 Hay CSS custom del sitio (inline, de la agencia anterior) con dos reglas
     hechas para el hero viejo:
         .elementor-widget-video .elementor-wrapper video { height: 130% !important }
         .elementor-widget-video .e-hosted-video .elementor-video { margin-top: -100px !important }
     La altura ya la ganábamos; el margen NO, y subía el video 100px: quedaba
     metido debajo del header y desalineado con la banda. Medido: el contenedor
     arrancaba en y=78 y el video se dibujaba en y=-22. Se anula acá. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* -------------------------------------------------------------------------
   2. TITULAR + PÁRRAFO
   [MOCK] 71px de aire entre el video y el titular (medido: 85px del mockup
   reescalado). El tamaño del titular es el ÚNICO valor derivado — ver abajo.
   ------------------------------------------------------------------------- */
.mz-lead .elementor-widget-container{ max-width: 1080px; margin-inline: auto; }

/* 🕳️ HUECO ABIERTO #3 — el titular va en 44px/600. Es el único tamaño que NO
   sale del sitio: se derivó midiendo su proporción contra el H2 de 35px del
   sitio real (ratio 1,27). Si se prefiere un valor del sistema, el candidato
   es 40px/600. El tamaño está seteado en el widget desde Elementor, no acá,
   para que se pueda cambiar sin tocar código. */


/* -------------------------------------------------------------------------
   3. LOS 3 BOXES
   [MOCK] ratio del box 634/414 = 1,53 · gap 9px · franja al 28% del alto.
   -------------------------------------------------------------------------
   ANCHO: van en el contenedor de 1600px (área útil 1576px con el gutter de
   12px), NO borde a borde. Decisión de Christian (31 jul, reconfirmada 2 ago):
   la coherencia con el resto del sitio pesa más que la fidelidad literal al
   JPG — todas las demás secciones del sitio usan ese contenedor.
   ------------------------------------------------------------------------- */
/* ═══ ANCHO ÚNICO DE LA PÁGINA — boxes, slider y banda comparten esta medida ═══
   Christian (2 ago): los 3 boxes, el slider y la banda "Vuoi acquistare" tienen
   que quedar EXACTAMENTE al mismo ancho y alineados. El problema anterior: los
   boxes tenían 12px de gutter (contenido 1576) mientras el slider llenaba los
   1600 completos → las cards terminaban 12px antes que la imagen del slider.
   Solución: los tres usan la MISMA fórmula de ancho — 1576px de contenido con
   12px de aire a cada lado en pantallas chicas, centrado. Mismo left/right en
   todo viewport. `--mz-col` es el ancho de columna de la página. */
:root{ --mz-col: min(1576px, 100% - 24px); }

/* El container es `e-con-full` (sin `.e-con-inner`): las 3 cards cuelgan
   directas, así que el ancho se limita en el propio grid. */
.mz-boxes{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  width: var(--mz-col) !important;
  max-width: none !important;
  padding-inline: 0 !important;
  margin-inline: auto !important;
}

/* Elementor le asigna width:33.33% a cada hijo de un container en fila; dentro
   de nuestro grid eso las dejaba en 156px en vez de 469px. Se pisa el ancho,
   no el grid (el grid ya calculaba bien las columnas). */
.mz-boxes > .mz-card{ width: 100% !important; max-width: 100% !important; }

.mz-card{
  position: relative;
  display: block !important;
  aspect-ratio: 634 / 414;
  overflow: hidden;
  border-radius: 12px 12px 0 0;          /* [MOCK] estimado del mockup */
  background-size: cover;
  background-position: center;
  transition: background-image .35s ease;
}

/* La franja: pegada abajo, superpuesta a la foto. */
.mz-card__bar{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 28%;                            /* [MOCK] */
  width: auto !important;
  background: var(--mz-band-bg);          /* 🕳️ hueco #1/#2 — variable única */
  border-radius: 28px 28px 0 0;           /* [MOCK] estimado */
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  backdrop-filter: blur(1px);
}
/* build-page envuelve cada widget del bar en su propio container; sin esto se
   repartirían el 50% cada uno y el título quedaría descentrado. */
.mz-card__bar > .e-con{
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}
.mz-card__title .elementor-heading-title{ margin: 0; }


/* -------------------------------------------------------------------------
   4. EL "BOTÓN" DE LA CARD
   La card entera es un <a>, así que el botón NO puede ser un <a> anidado
   (HTML inválido): es un <span> estilizado con las medidas exactas del botón
   real del sitio.
   [SITIO] .elementor-button de "Scopri i nostri prodotti":
     Lato 16/500 · padding 12px 24px · radius 100px · border 1px #000 · bg transparente
   [SITIO] hover: fondo #000 (--e-global-color-primary), texto #FFF (secondary)
   ------------------------------------------------------------------------- */
.mz-btn .elementor-heading-title{
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; margin: 0;
  padding: 12px 24px;
  border: 1px solid #000000;
  border-radius: 100px;
  background: transparent;
  color: #000000;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* El botón se invierte al pasar por CUALQUIER parte de la card, no sólo sobre
   el botón: en el mockup la imagen -over y el botón negro cambian juntos.
   (Este mismo detalle fue un bug real en el mockup — lo cazó la medición por
   píxel, no la lectura del CSS.) */
.mz-card:hover .mz-btn .elementor-heading-title,
.mz-card:focus-visible .mz-btn .elementor-heading-title{
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}


/* -------------------------------------------------------------------------
   5. SLIDER
   [MOCK] ratio nativo de las imágenes del cliente: 2560/909 = 2,82:1
   -------------------------------------------------------------------------
   ANCHO (Christian, 2 ago): el slider va FULL-BLEED (borde a borde, como el
   video de arriba y la banda beige), pero el TEXTO de cada slide queda alineado
   a la columna de la página (--mz-col), igual que la banda CTA.
   Se hace a ancho de CONTENIDO (width:100%), no 100vw: así queda como el video
   —full-bleed sin meter scroll horizontal por el ancho del scrollbar—. */
.mz-slider-wrap{
  padding-inline: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
.mz-slider-wrap > .e-con-inner{
  width: 100% !important;
  max-width: none !important;
  padding-bottom: 0 !important;   /* saca el aire blanco entre el slider y la banda beige */
}
/* El widget mete un padding lateral propio (9%) en el slide-inner; se anula, y
   el texto se centra en la columna (queda alineado al pixel con los boxes). */
.mz-slider .swiper-slide-inner{ padding-inline: 0 !important; }
.mz-slider .swiper-slide-contents{
  width: var(--mz-col) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
.mz-slider .elementor-slides .swiper-slide-bg{ background-size: cover; }
.mz-slider .elementor-slide-heading{ margin-bottom: 6px; }
.mz-slider .elementor-slide-description{ margin-bottom: 26px; }
/* El botón del slider arrastra el mismo gradiente negro que los otros CTA
   (ver §6-bis): sin esto queda un óvalo negro con el texto negro adentro. */
/* El "button_color" que se le pasó al widget quedó guardado pero Elementor no
   lo aplica al botón del slider: el texto salía BLANCO sobre fondo
   transparente, ilegible encima de una foto clara. Se fija acá junto al resto
   del CTA. */
.mz-slider .elementor-slide-button{
  background-image: none !important;
  background-color: transparent !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
/* El botón del slider usa el CTA del sitio: hover negro/blanco. */
.mz-slider .elementor-slide-button:hover,
.mz-slider .elementor-slide-button:focus-visible{
  background-image: none !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}


/* -------------------------------------------------------------------------
   6. BANDA "VUOI ACQUISTARE…"  ·  [SITIO] beige #EEEAE5, H2 35/500 centrado
   -------------------------------------------------------------------------
   ANCHO (Christian, 2 ago): el BEIGE va a ancho completo (full-bleed, como el
   sitio), pero el TEXTO se alinea a la columna de la página (--mz-col, 1600),
   igual que los boxes y el slider de arriba. Así la franja beige cruza toda la
   pantalla y el contenido queda en el mismo eje que el resto. */
/* El titular Y el botón del CTA van a la izquierda, arrancando en el mismo
   margen que el texto del slider (borde izq de la columna, L102). Christian
   (2 ago): "el texto del CTA con los mismos márgenes que el slider". */
.mz-band .mz-h2,
.mz-band .mz-cta{
  width: var(--mz-col) !important;
  max-width: none !important;
  margin-inline: auto !important;
}
.mz-band .mz-h2 .elementor-heading-title{ max-width: none; text-align: left !important; }
.mz-band .mz-cta{ margin-top: 26px; text-align: left !important; }
.mz-band .mz-cta .elementor-button-wrapper{ text-align: left !important; }


/* -------------------------------------------------------------------------
   6-bis. BOTONES CTA — anular el gradiente negro heredado
   -------------------------------------------------------------------------
   Elementor le aplica al botón un background-image
   "linear-gradient(#000 0%, #000 100%)" que NO se apaga poniendo el
   background-color en transparente: son dos propiedades distintas, y el
   gradiente se pinta por encima. El resultado era un botón negro sólido con
   el texto negro adentro (invisible en la banda, y en community se leía sólo
   porque ahí el texto es blanco). Lo cazó la captura del botón solo: el DOM
   informaba "transparente" mientras el píxel era negro.
   [SITIO] el CTA real del sitio es transparente con borde de 1px.
   ------------------------------------------------------------------------- */
.mz-cta .elementor-button{
  background-image: none !important;
  background-color: transparent !important;
  transition: background-color .25s ease, color .25s ease;
}
/* [SITIO] hover del CTA: fondo #000, texto #FFF */
.mz-cta .elementor-button:hover,
.mz-cta .elementor-button:focus-visible{
  background-image: none !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
}
/* Variante sobre foto (community): borde blanco e inversión al revés. */
.mz-cta--light .elementor-button:hover,
.mz-cta--light .elementor-button:focus-visible{
  background-color: #FFFFFF !important;
  color: #000000 !important;
}


/* -------------------------------------------------------------------------
   7. COMMUNITY
   [MOCK] el cliente recorta la foto a 2,84:1 — más panorámica que el ratio
   nativo del archivo (2500×1395 = 1,79:1). Se respeta el recorte del mockup.
   ------------------------------------------------------------------------- */
/* Los containers de Elementor son flex-direction:column, así que el centrado
   VERTICAL se pide con justify-content, no con align-items (con align-items el
   contenido quedaba pegado al borde superior y el logo se comía el recorte).
   Y el alto va por min-height, no por aspect-ratio: si el copy crece, la
   sección crece con él en vez de cortarlo. */
.mz-community{
  min-height: min(35.2vw, 563px);   /* [MOCK] ratio 1915/675 sobre 1600px */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-block: 48px !important;
  background-position: center 42%;
}
.mz-community > .e-con-inner{ max-width: 100% !important; padding: 0 !important; }
/* El contenido (logo, título, texto, botón) arranca en el MISMO eje que las
   secciones de arriba (borde izq de la columna, L102). Christian (2 ago): el
   community no estaba alineado con el resto. Antes tenía un padding-left del 9%
   (160px) que lo desalineaba; ahora el body es la columna --mz-col centrada y
   el contenido va a la izquierda. */
.mz-community__body{
  width: var(--mz-col) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.mz-community__logo .elementor-widget-container{ margin-bottom: 26px; }
/* Ajuste fino pedido por Christian (2 ago): el bloque va más compacto —
   menos aire título→texto, el texto un punto más bold, y el botón más cerca.
   Título y texto con ancho de lectura acotado, pero SIEMPRE arrancando en L102. */
.mz-community__title .elementor-heading-title{ margin: 0 0 8px; max-width: 620px; }
.mz-community__text .elementor-widget-container{ max-width: 520px; margin-bottom: 14px; }
.mz-community__text,
.mz-community__text .elementor-widget-container,
.mz-community__text p{ font-weight: 500 !important; }


/* -------------------------------------------------------------------------
   8. RESPONSIVE
   Los breakpoints replican los del mockup ya verificado (1024 / 640).
   ------------------------------------------------------------------------- */
@media (max-width: 1024px){
  .mz-boxes{ grid-template-columns: repeat(2, 1fr); }
  .mz-community__body{ max-width: 70%; }
  .mz-btn .elementor-heading-title{ padding: 11px 20px; font-size: 14px; }
}

@media (max-width: 640px){
  /* 28-ago-2026: este override pasaba el video a 16:9 en mobile, porque con el
     mockup 3,14:1 quedaba una franja muy fina. Con el video REAL no sirve:
     recorta el 41% de los lados y CORTA EL TEXTO del propio video — se vio
     «di rigore scientifico» partido al medio a 390px. Entre una franja más
     baja y un texto cortado, gana la franja. Se deja el ratio del video.
     Sólo aplica al video subido; el iframe conserva su 16:9 más abajo. */
  /* Se conserva la caja 16:9 —para que en el celular el hero tenga presencia—
     pero el video va COMPLETO adentro, con `contain`: así no se corta el texto.
     Quedan dos bandas, arriba y abajo, del gris claro del sitio. */
  .mz-hero-video .elementor-widget-video .elementor-wrapper{ aspect-ratio: 16 / 9; }
  .mz-hero-video .elementor-widget-video .elementor-wrapper:has(video){ background: #f7f7f7; }
  /* El fondo va en el PROPIO <video>: con `contain`, las bandas las pinta el
     elemento, y el navegador se lo pone NEGRO por defecto — se veía una franja
     negra bajo el video. El del wrapper no alcanza porque queda detrás. */
  .mz-hero-video .elementor-widget-video .elementor-wrapper video{
    object-fit: contain !important;
    background: #f7f7f7;
  }
  .mz-boxes{ grid-template-columns: 1fr; gap: 12px; }
  .mz-card{ aspect-ratio: 16 / 10; }
  /* En las cards chicas de mobile el radio de 28px de la franja deja ver foto en
     las esquinas superiores; se baja a 14px para un borde más limpio. */
  .mz-card__bar{ height: 32%; padding-inline: 16px !important; gap: 10px; border-radius: 14px 14px 0 0 !important; }
  .mz-btn .elementor-heading-title{ padding: 9px 16px; font-size: 13px; }
  .mz-community{ min-height: 460px; padding-block: 40px !important; }

  /* En mobile la foto ocupa el ancho completo y el texto negro se pierde
     encima. El mockup ya lo resolvía con un degradado blanco de izquierda a
     derecha: se replica igual, para no cambiar el diseño aprobado.
     Elementor además centra el contenido en mobile, que es justo donde el
     degradado se apaga — por eso el texto vuelve a la izquierda, como en el
     mockup, y el blanco llega más lejos antes de desvanecerse. */
  .mz-slider .swiper-slide-inner{
    background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,.35) 82%, rgba(255,255,255,0) 100%);
  }
  /* El slider arranca en el MISMO margen que la banda "Vuoi" (Christian, 2 ago):
     alineado a la izquierda, dentro de la columna --mz-col (mismo gutter). Se
     quita el max-width:74% que lo descuadraba respecto del CTA. */
  .mz-slider .swiper-slide-contents{
    text-align: left !important;
    align-items: flex-start !important;
    width: var(--mz-col) !important;
    max-width: var(--mz-col) !important;
  }
  .mz-slider .elementor-slide-heading,
  .mz-slider .elementor-slide-description{ text-align: left !important; }
  /* En mobile el encuadre por defecto (centro) deja el producto tapado por el
     texto. Se reencuadra cada slide a su producto, hacia la derecha (libre del
     texto). Por la clase del repeater de cada slide. */
  .mz-slider .elementor-repeater-item-1130d31 .swiper-slide-bg{ background-position: 88% 62% !important; } /* FormulaD: frasco en la mano */
  .mz-slider .elementor-repeater-item-3825da5 .swiper-slide-bg{ background-position: 30% 50% !important; } /* Amazon: caja + manos (foto muy clara, encuadre difícil en vertical) */
  .mz-slider .elementor-repeater-item-99fd220 .swiper-slide-bg{ background-position: 66% 50% !important; } /* Arnica: los tubos */
  /* La banda "Vuoi" ya trae su propio padding de 12px; si además el titular usa
     --mz-col (que resta otro gutter), el texto queda en 24 y no en 12 como el
     slider y los boxes. En mobile el contenido llena el ancho ya gutter-eado
     para arrancar en 12, consistente con todo. */
  .mz-band .mz-h2, .mz-band .mz-cta{ width: 100% !important; }

  /* En mobile el community también arranca en el gutter de la columna (no un 7%
     propio), para seguir alineado con el resto. --mz-col ya da el aire de 12px. */
  .mz-community__body{ padding-inline: 0 !important; }

  /* El footer global tiene un spacer transparente de 35px en su tope que SÓLO
     aparece en mobile (en desktop mide 0). Sobre la imagen del community se ve
     como una franja blanca. No se toca el footer (es compartido): se tira hacia
     arriba desde el community, que en sus últimos 35px es sólo padding (verde,
     sin contenido). */
  .mz-community{ margin-bottom: -35px !important; }
  .mz-community__title .elementor-heading-title,
  .mz-community__text .elementor-widget-container{ max-width: none; }
}

/* ============================================================
   Selector de idioma (WPML legacy dropdown) — HEADER GLOBAL
   Bug: el CSS propio de WPML le pone fondo BLANCO + borde al toggle.
   Sobre el header beige (#EEEAE5) queda un recuadro blanco de 50px
   con la banderita de 22px adentro → sobra blanco a la derecha.
   Medido igual en /it/, /it/chi-siamo/, /it/esigenze/ y /it/home-nuova/:
   toggle bg rgb(255,255,255), ancho 50px, bandera 22px.
   OJO: esto afecta a TODO el sitio, no sólo a la home nueva.
   ============================================================ */
.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-dropdown > ul > li,
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:hover,
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:focus,
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:visited{
  background: transparent !important;
  border: 0 !important;
}
/* el ancho fijo de WPML deja el sobrante blanco: que mida lo que ocupa */
.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle{ width: auto !important; }

/* El submenú SÍ necesita fondo propio para ser legible al desplegarse,
   y z-index por encima del header (que está en 999). */
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu{
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  z-index: 1001 !important;
}
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a{ background: transparent !important; }
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:hover{ background: rgba(0,0,0,.05) !important; }

/* Un submenú SIN idiomas no debe dibujar nada (pasa en páginas sin traducción:
   WPML igual imprime el <ul> vacío y su borde/fondo se ve como una barrita). */
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu:not(:has(li)){
  display: none !important;
  border: 0 !important;
  background: transparent !important;
}


/* =========================================================================
   10. FEEDBACK DEL CLIENTE — 5 ago 2026 (Cristoforo, mensaje sobre la HP)
   =========================================================================
   Va al final a propósito: son overrides de decisiones anteriores y así se
   ve de un vistazo qué pidió el cliente y qué se revirtió. Para deshacer
   cualquiera de los tres, borrar su bloque; lo de arriba vuelve a mandar.
   ------------------------------------------------------------------------- */

/* 10.1 — "1 cm de interspazio orizzontale" entre los boxes de la página.
   Los únicos boxes que conviven en horizontal son las 3 cards (FormulaD /
   Prodotti / Esigenze), así que el pedido se aplica ahí. Se toca SOLO el
   eje horizontal (column-gap): el row-gap de mobile/tablet queda como estaba.
   1cm = 37,8px a 96dpi; se escribe en cm para que sea literalmente lo pedido. */
.mz-boxes{ column-gap: 1cm !important; }

/* 10.2 — "centrare il contenuto del box Vuoi acquistare…"
   Revierte el alineado a la izquierda que había pedido Christian el 2 ago
   ("mismos márgenes que el slider"). El cliente pide centrado: gana el cliente.
   El ancho de columna (--mz-col) se mantiene, sólo cambia la alineación. */
.mz-band .mz-h2 .elementor-heading-title{ text-align: center !important; }
.mz-band .mz-cta{ text-align: center !important; }
.mz-band .mz-cta .elementor-button-wrapper{ text-align: center !important; }

/* 10.3 — CTA con color FIJO, sin inversión al hover.
   El cliente pide "mantenere sempre" esos colores, así que el hover deja de
   cambiar el fondo (queda sólo la transición del cursor). Si más adelante
   quiere recuperar el hover invertido, se borra este bloque.
     · CTA del slideshow  → negro, texto blanco
     · CTA PUNTI VENDITA  → negro, texto blanco
     · CTA RIMANIAMO IN CONTATTO → blanco, texto negro                        */
.mz-slider .elementor-slide-button,
.mz-slider .elementor-slide-button:hover,
.mz-slider .elementor-slide-button:focus-visible,
.mz-band .mz-cta .elementor-button,
.mz-band .mz-cta .elementor-button:hover,
.mz-band .mz-cta .elementor-button:focus-visible{
  background-image: none !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}
.mz-cta--light .elementor-button,
.mz-cta--light .elementor-button:hover,
.mz-cta--light .elementor-button:focus-visible{
  background-image: none !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
}


/* =========================================================================
   11. HEADER — "PUNTI VENDITA" como botón negro  ·  5 ago 2026
   =========================================================================
   Pedido del cliente: "'Punti vendita' vorrei che fosse gestito come tasto
   nero a destra della box di ricerca, a sinistra della bandierina."

   Cómo se resolvió:
   · Se agregó un widget `button` (id 6f46873, clase .mz-hdr-pv) en la fila
     desktop del template Header Menu (150), entre el buscador y el switcher.
   · El ítem "Punti Vendita" del menú (nav_menu_item 18749) NO se borró: se
     oculta SÓLO en la barra desktop. Motivo: el mismo menú alimenta el
     off-canvas de mobile, donde el buscador y el botón nuevo están ocultos
     (hidden-mobile) — borrarlo dejaría a mobile SIN acceso a Punti Vendita.
     Así el botón manda en desktop y el ítem sigue vivo en el menú de mobile.
   · Revertir = borrar este bloque (vuelve el ítem al menú desktop) y quitar
     el widget desde Elementor.
   ⚠️ OJO AL EDITAR EL MENÚ: si alguien no encuentra "Punti Vendita" en la
   barra desktop, no está borrado — está oculto acá.
   ------------------------------------------------------------------------- */
.mz-hdr-pv .elementor-button{
  background-image: none !important;
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
  white-space: nowrap;
}
.mz-hdr-pv .elementor-button-wrapper{ display: flex; align-items: center; }

/* El ítem del menú, oculto sólo donde vive el botón (barra desktop). */
@media (min-width: 1025px){
  li.menu-item-18749{ display: none !important; }
}

/* 11-bis · HOVER del botón del header (pedido de Christian, 5 ago).
   Invierte el estado normal: negro sólido → contorno con texto negro sobre el
   beige del header. Es el mismo patrón del sitio, al revés (acá el default ya
   es el negro, así que el hover es el que "abre"). */
.mz-hdr-pv .elementor-button:hover,
.mz-hdr-pv .elementor-button:focus-visible{
  background-color: transparent !important;
  color: #000000 !important;
  border-color: #000000 !important;
}


/* =========================================================================
   12. PRODOTTI — grilla de las 10 líneas  ·  5 ago 2026
   =========================================================================
   Valores replicados 1:1 de la grilla de Esigenze ya aprobada y online
   (medidos en el render, no leídos del código): card ratio 634/414 · franja
   26% · radius 12/28 · título 18/500 · botón 13/500 pad 9x18 r100 · gap 22.
   Molde HTML validado por Christian: F4-mockup/prodotti.html
   Informe: F4-prodotti-anatomia.md

   ⚠️ POR QUÉ ESTÁ ACÁ Y NO EN EL CUSTOM CSS DE LA PÁGINA (como Esigenze):
   el Custom CSS por página es una función de Elementor Pro — si Pro se cae,
   la grilla queda sin estilos — y además obliga a duplicarlo a mano en la
   versión inglesa. Acá no depende de ningún plugin y vale para los idiomas.
   Decidido con Christian el 5 ago 2026.

   DOS REGLAS DEL MARCADO (heredadas de Esigenze, no tocar):
   · el botón NO es un <a>: la card entera es el link (container html_tag=a),
     un <a> anidado lo auto-cierra el parser. Es un heading estilizado.
   · la -over NO es un widget imagen: es background-image de un container
     vacío (el dynamic tag post-custom-field no es Data_Tag).
   ------------------------------------------------------------------------- */

.prod-grid{ --prod-band: rgba(255,255,255,.80); --prod-dot: 14px; }

/* --- card --- */
.prod-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;
}
.prod-card > .e-con-inner{ height:100%; padding:0; display:block; }

/* --- las dos imágenes, superpuestas --- */
.prod-media{ position:absolute; inset:0; padding:0 !important; display:block; }
.prod-media > .e-con-inner{ height:100%; padding:0; display:block; }
.prod-img{ position:absolute; inset:0; margin:0 !important; width:100%; height:100%; }
.prod-img .elementor-widget-container, .prod-img figure, .prod-img img{
  width:100%; height:100%; margin:0; }
.prod-img img{ object-fit:cover; object-position:center; display:block; }
.prod-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; }
.prod-card:hover .prod-over,
.prod-card:focus-visible .prod-over{ opacity:1; }

/* --- franja --- SIN backdrop-filter: en Esigenze colapsaba la altura del
   contenedor y el footer se montaba sobre las cards. --- */
.prod-bar{
  position:absolute; left:0; right:0; bottom:0; height:28%; z-index:2;
  background:var(--prod-band); border-radius:28px 28px 0 0;
  padding:0 26px !important; min-height:0 !important;
}
.prod-bar > .e-con-inner{ height:100%; padding:0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-direction:row; }

.prod-name{ padding:0 !important; min-height:0 !important; width:auto !important; }
.prod-name > .e-con-inner{ padding:0; display:flex; flex-direction:row;
  align-items:center; gap:10px; }

/* --- el punto de color de la línea ---
   ⚠️ AUTORÍA: los 10 RGB y la frase «il colore va ripreso nell'iconcina di
   questa linea» son del cliente (4 ago). El CÍRCULO es NUESTRO: esa iconcina
   NO existe en el sitio — verificado en /it/prodotti/ y en las páginas de
   categoría, no hay ningún icono por línea al que cambiarle el color. Debe
   venir de su wireframe de FigJam, que nunca recibimos.
   Christian decidió dejarlo (5 ago). Si el cliente lo rechaza: borrar este
   bloque y quitar el container .prod-dot de las 10 cards. */
.prod-dot{
  width:var(--prod-dot) !important; height:var(--prod-dot) !important;
  min-height:var(--prod-dot) !important; max-width:var(--prod-dot) !important; padding:0 !important;
  border-radius:50%; flex:0 0 auto !important; align-self:center;
}
.prod-dot--arnica     { background:rgb(243,177,33)  !important; }
.prod-dot--artiglio   { background:rgb(224,0,91)    !important; }
.prod-dot--omniven    { background:rgb(114,141,175) !important; }
.prod-dot--formulad   { background:rgb(4,90,46)     !important; }
.prod-dot--nutrition  { background:rgb(0,0,0)       !important; }
.prod-dot--sorriso    { background:rgb(237,180,211) !important; }
.prod-dot--vivigermina{ background:rgb(0,133,75)    !important; }
.prod-dot--mioscrub   { background:rgb(0,144,141)   !important; }
.prod-dot--nozzz      { background:rgb(189,221,123) !important; }
/* blanco puro: sin borde no se vería sobre la franja blanca al 80% */
.prod-dot--tutti      { background:rgb(255,255,255) !important;
                        border:1px solid rgba(0,0,0,.25); }

.prod-title, .prod-title .elementor-widget-container{ margin:0; }
.prod-title .elementor-heading-title{
  font-size:22px; font-weight:500; line-height:1.15; color:#000; margin:0;
  /* SIN nowrap: en la home los titulos son cortos (FormulaD, Prodotti,
     Esigenze) pero aca hay nombres largos como «Artiglio del Diavolo», que
     a 30px se cortaban con puntos suspensivos. Se deja envolver a 2 lineas;
     la franja del 28% (81px) las aguanta. */
  overflow:hidden; }

/* --- botón --- !important obligatorio: el CSS por-elemento de Elementor
   tiene más especificidad que cualquier selector de clase (verificado en
   Esigenze midiendo el píxel, no el CSS). --- */
.prod-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; }
.prod-card:hover .prod-btn .elementor-heading-title,
.prod-card:focus-visible .prod-btn .elementor-heading-title{
  background-color:#000 !important; color:#fff !important;
  border-color:#000 !important; }

/* --- «Tutti i prodotti» a ancho completo, cerrando la grilla ---
   No es una línea más: es el acceso al catálogo. Y con 10 boxes en 3
   columnas la última fila quedaba 3+3+3+1 con un box huérfano. */
/* REVERTIDO 5 ago: el ancho completo obligaba a recortar 26-52% de la foto y
   cortaba los productos (ocupan toda la altura de la imagen). Christian lo vio
   en el render. La fila incompleta 3+3+3+1 es el mismo patron que Esigenze,
   que el cliente ya aprobo. Para destacarlo haria falta una imagen panoramica
   propia para ese box — pedirsela al cliente si se quiere recuperar la idea.
.prod-card--tutti{ grid-column:1 / -1; aspect-ratio:2.2/1; } */

@media (max-width:1024px){
  .prod-title .elementor-heading-title{ font-size:24px; }
  /* .prod-card--tutti{ aspect-ratio:1.9/1; } */
}

/* --- MOBILE (1 columna) — la franja sale del absoluto y va en flujo.
   No es preferencia: con TODOS los hijos en position:absolute la card no
   tiene altura intrínseca y el footer se monta encima (pasó en Esigenze). --- */
@media (max-width:640px){
  .prod-card{ aspect-ratio:auto; }
  .prod-media{ position:relative; inset:auto; width:100%; aspect-ratio:16/10; }
  .prod-bar{ position:static; height:auto; border-radius:0;
    padding:12px !important; }
  .prod-bar > .e-con-inner{ flex-direction:column !important;
    align-items:flex-start !important; gap:10px !important; }
  .prod-title .elementor-heading-title{ font-size:20px; line-height:1.25;
    white-space:normal; }
  .prod-btn .elementor-heading-title{ font-size:14px; padding:10px 18px; }
  /* .prod-card--tutti{ grid-column:auto; aspect-ratio:auto; } */
}

/* --- las 10 imágenes -over, una regla por línea --- */
.prod-over--arnica     { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-01-arnica-gel-98-over-884.jpg); }
.prod-over--artiglio   { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-02-artiglio-del-diavolo-over-884.jpg); }
.prod-over--omniven    { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-03-omniven-over-884.jpg); }
.prod-over--formulad   { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-04-formula-d-over-884.jpg); }
.prod-over--nutrition  { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-05-nutrition-over-884.jpg); }
.prod-over--sorriso    { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-06-Sorriso-over-884.jpg); }
.prod-over--vivigermina{ background-image:url(/wp-content/uploads/2026/08/linee-prodotto-07-vivigermina-over-884.jpg); }
.prod-over--mioscrub   { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-08-mioscrub-over-884.jpg); }
.prod-over--nozzz      { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-09-nozzz-over-884.jpg); }
.prod-over--tutti      { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-10-tutti-over-884.jpg); }

/* --- IMAGEN NORMAL por background-image, igual que la home ---
   El widget image de WP arma un srcset y termina sirviendo el -1536x939
   REDIMENSIONADO: una pérdida de calidad extra ANTES del WebP. La home carga
   sus box por background-image y sirve el archivo completo — por eso ahí los
   packshots se leen y acá no. Verificado comparando las dos al mismo zoom.
   Las URLs apuntan al archivo original (sin sufijo de tamaño): Converter for
   Media negocia el .webp por Accept, así que el peso sigue optimizado. */
.prod-media{ background-size:cover; background-position:center;
             background-repeat:no-repeat; }
.prod-media--arnica     { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-01-arnica-gel-98-884.jpg); }
.prod-media--artiglio   { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-02-artiglio-del-diavolo-884.jpg); }
.prod-media--omniven    { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-03-omniven-884.jpg); }
.prod-media--formulad   { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-04-formula-d-884.jpg); }
.prod-media--nutrition  { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-05-nutrition-884.jpg); }
.prod-media--sorriso    { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-06-Sorriso-884.jpg); }
.prod-media--vivigermina{ background-image:url(/wp-content/uploads/2026/08/linee-prodotto-07-vivigermina-884.jpg); }
.prod-media--mioscrub   { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-08-mioscrub-884.jpg); }
.prod-media--nozzz      { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-09-nozzz-884.jpg); }
.prod-media--tutti      { background-image:url(/wp-content/uploads/2026/08/linee-prodotto-10-tutti-884.jpg); }


/* =========================================================================
   13. FOOTER — botón «Contattaci»  ·  6 ago 2026 (IT-07)
   =========================================================================
   Reemplaza al viejo «Compila il form», que abría el popup de newsletter.
   ⚠️ MISMO GOTCHA QUE EN LA HOME (§6-bis): Elementor le aplica al botón un
   background-image `linear-gradient(#000 0%, #000 100%)`. Es una propiedad
   DISTINTA de background-color, así que poner el fondo en blanco NO lo apaga:
   el gradiente se pinta encima y, con el texto negro, el botón quedaba como un
   rectángulo negro invisible sobre el footer negro. Lo vio Christian en el
   render; el getComputedStyle informaba `background-color: rgb(255,255,255)`
   mientras el píxel era negro.
   Sobre fondo #121212 el botón va blanco con texto negro; al hover se invierte.
   ------------------------------------------------------------------------- */
.mz-footer-cta .elementor-button{
  background-image: none !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
  transition: background-color .25s ease, color .25s ease;
}
.mz-footer-cta .elementor-button:hover,
.mz-footer-cta .elementor-button:focus-visible{
  background-image: none !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* =========================================================================
   § 14 · FORMULARIO DE CONTACTO — desplegable «Oggetto» (IT-14 / US-04)
   -------------------------------------------------------------------------
   El desplegable arranca sin elegir, con una primera opción vacía que hace
   de placeholder. Un <select> pinta ese texto en negro pleno, mientras que
   los placeholders de los demás campos del formulario son negro al 60%.
   Se iguala mientras el campo siga vacío — el campo es required, así que
   :invalid es exactamente «todavía no eligió». Se toca sólo el color del
   texto y no la opacidad, para no aclarar también el borde del campo.
   ========================================================================= */
.form-contatto select:invalid{
  color: rgba(0, 0, 0, .6);
}

/* =========================================================================
   § 15 · NEWS — botón «Visualizza altre News» ilegible (IT-11)
   -------------------------------------------------------------------------
   El cliente lo reportó como «bollino completamente nero e poco leggibile».
   Se veía como un rectángulo negro sin texto por dos cosas sumadas:
     · Elementor le pone background-image: linear-gradient(#000,#000), que
       tapa el background-color gris que el botón YA tenía configurado, y
     · el texto era negro.
   Apagando el gradiente reaparece el gris #505050 original — no se inventa
   un color nuevo — y el texto pasa a blanco. El radio se lleva a 20px para
   igualar los filtros de categoría que están justo encima, que son los
   únicos botones vecinos. Al pasar el mouse invierte, como el resto del
   sitio. El spinner de carga acompaña al texto.
   ========================================================================= */
.e-loop__load-more .elementor-button{
  background-image: none !important;
  background-color: #505050 !important;
  color: #FFFFFF !important;
  border: 1px solid #505050 !important;
  border-radius: 20px !important;
  transition: background-color .25s ease, color .25s ease;
}
.e-loop__load-more .elementor-button:hover,
.e-loop__load-more .elementor-button:focus-visible{
  background-image: none !important;
  background-color: #FFFFFF !important;
  color: #505050 !important;
}
.e-loop__load-more .elementor-button .e-load-more-spinner,
.e-loop__load-more .elementor-button svg{
  color: currentColor;
  fill: currentColor;
}


/* ============================================================================
   § 16 · PÁGINAS DE LÍNEA (archivo de categoría) — armonización con Esigenze
   y «Le nostre linee» (pedido de Christian, 7 ago 2026)

   Antes: H1 a la izquierda a 30px + descripción centrada en la fuente del
   sistema a 16px + breadcrumb. Tres criterios distintos en la misma pantalla.

   ⚠️ Va acá y no en el widget porque «Descrizione Archivio» NO TIENE controles
   de tipografía ni de alineación — se le pueden guardar, pero no los aplica.
   Los valores son los MEDIDOS sobre /it/esigenze/ (iguales a 1440 y a 390).
   ========================================================================== */

.elementor-4771 .elementor-element-cea7b71,
.elementor-4771 .elementor-element-cea7b71 .elementor-heading-title {
	font-family: "Lato", sans-serif;
	font-size: 35px;
	font-weight: 500;
	line-height: 35px;
	text-align: center;
}

.elementor-4771 .term-description {
	font-family: "Lato", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	text-align: center;
	margin: 0;
}

.elementor-4771 .term-description > *:last-child { margin-bottom: 0; }

.elementor-4771 .term-description p {
	font: inherit;
	text-align: inherit;
	margin: 0;
}
/* La grilla se separa del texto con 40px propios: así una categoría sin
   descripción conserva los 60px de separación que ya tenía (20 de gap + 40).
   Va acá y no en el `_margin` del widget porque desde el widget no se aplica. */
.elementor-4771 .elementor-element-77c977e { margin-top: 12px; }


/* ---------------------------------------------------------------------------
   § 16-bis · el tramo descripción → fichas, igual en las tres secciones (24px)

   La página de línea ya lo tenía: <p> sin margen + 12 de gap + 12 de la grilla.
   Esigenze y Le nostre linee arrastraban los 14,4px del margen por defecto del
   <p>, que daban 26 y 14. Se anula ahí y se arma el tramo explícito.

   Por id de widget a propósito: las fichas de las dos grillas tienen sus
   propios text-editor y una regla amplia les cambiaría el margen a todas.
   ------------------------------------------------------------------------- */

.elementor-element-a7c31f0 p,
.elementor-element-mzlin001 p,
.elementor-element-mzlin002 p { margin-bottom: 0; }

/* Esigenze: el widget queda a 12 de gap → +12 = 24 */
.elementor-element-68330eb { margin-top: 44px; }

/* Le nostre linee (IT y EN): la grilla es un container hermano, sin gap → 24 */
body .elementor-19984 .elementor-element.elementor-element-57f28cf > .e-con-inner,
body .elementor-19985 .elementor-element.elementor-element-57f28cf > .e-con-inner { padding-top: 56px; }


/* ---------------------------------------------------------------------------
   § 16-ter · las descripciones no van a todo el ancho

   A 1440 el texto ocupaba los 1401px del container: líneas de ~150 caracteres,
   demasiado largas para leer de un tirón. Se corta en 900px centrado (~64% del
   ancho de contenido, ~85 caracteres por línea).

   En px y no en %: por debajo de 900 de viewport la regla no interviene, así
   que en tablet y móvil el texto sigue usando todo el ancho disponible.
   Para afinarlo, es este único número.
   ------------------------------------------------------------------------- */

.elementor-4771 .term-description,
.elementor-element-a7c31f0,
.elementor-element-mzlin001,
.elementor-element-mzlin002 {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* § 16-quater · el ancho, al <p> — ver fix-ancho-2.php:
   limitar el widget no alcanza, Elementor le genera una regla que pesa más. */
.elementor-element-a7c31f0 p,
.elementor-element-mzlin001 p,
.elementor-element-mzlin002 p {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}


/* ============================================================================
   § 17 · FOOTER — las 4 columnas alineadas POR LO QUE SE VE (8 ago 2026)

   Las cajas de las columnas ya terminan en el mismo borde (`align-items:
   flex-end` en la fila). Lo que las desalineaba es el espacio final que cada una
   arrastra por debajo del contenido: 15px del margen del último párrafo, 24px de
   padding en la columna del botón y 6px de los iconos.

   Verificado midiendo el bottom del último elemento VISIBLE de cada columna, no
   el de la caja — que era el error de la primera vuelta.
   ========================================================================== */

footer .elementor-widget-text-editor .elementor-widget-container > *:last-child { margin-bottom: 0; }

/* el padding está en la columna misma, no en un `.e-con-inner` — esas columnas
   no lo tienen. Y `body footer` para ganarle a la regla por elemento de Elementor. */
/* padding COMPLETO, no sólo el de abajo: con la columna centrada, el padding
   superior corre el botón la mitad de su valor (medido: 12px de 24,2). */
body footer .elementor-element.elementor-element-418b6cd,
body footer .elementor-element.elementor-element-91c0708 { padding: 0; }

footer .elementor-widget-icon .elementor-icon-wrapper,
footer .elementor-widget-icon .elementor-icon { line-height: 1; display: block; }

/* --- § 17-bis · botón y redes centrados verticalmente (Christian, 8 ago) ---
   Las dos columnas de texto siguen apoyadas abajo; estas dos van al medio, así
   el botón y los iconos quedan a la misma altura entre sí. */

body footer .elementor-element.elementor-element-418b6cd,   /* botón IT   */
body footer .elementor-element.elementor-element-91c0708,   /* botón EN   */
body footer .elementor-element.elementor-element-9214daa,   /* redes IT   */
body footer .elementor-element.elementor-element-9e86430,   /* redes EN   */
body footer .elementor-element.elementor-element-b9f80f3 {  /* redes US   */
	align-self: center;
}

/* dentro de la columna de redes, los iconos también al medio */
body footer .elementor-element.elementor-element-9214daa,
body footer .elementor-element.elementor-element-9e86430,
body footer .elementor-element.elementor-element-b9f80f3 { align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   §18 · FLECHAS DEL SLIDER DE LA HOME — pedido del cliente (14-ago-2026)
   ═══════════════════════════════════════════════════════════════════════════
   «Mancano le freccette nei tre Box in homepage (…) l'utente cambia pagina solo
   cliccando nei pallini e non va bene.» Las flechas se activaron en el widget
   (navigation: both).

   PERO Elementor las coloca centradas verticalmente sobre los bordes izquierdo
   y derecho, y ahí PISAN el texto de la slide. Medido en el demo: el texto
   arranca en x=12 y la flecha ocupa x=10-50, en la misma banda vertical —
   choca en 1600, 1440, 1280, 1024, 768 y 390; sólo en 1920 no, porque ahí la
   columna deja margen.

   NO se corre el texto: está alineado al pixel con los boxes de arriba (los dos
   usan --mz-col, verificado midiendo ambos). Se mueven las flechas a la esquina
   inferior derecha, fuera de la banda del texto. Los puntitos siguen centrados
   abajo, así que no se tocan entre sí. */
.mz-slider .elementor-swiper-button{
  top: auto !important;
  bottom: 10px !important;
  transform: none !important;
}
.mz-slider .elementor-swiper-button-prev{ left: auto !important; right: 62px !important; }
.mz-slider .elementor-swiper-button-next{ left: auto !important; right: 14px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   §19 · FLECHAS DE LAS SCHEDE PRODOTTO, IN NERO — pedido del cliente (26-ago-2026)
   ═══════════════════════════════════════════════════════════════════════════
   «Le frecce ti chiedono di usare un colore più visibile (è possibile nero?)»

   Tenía razón y se puede medir: el color por defecto de Elementor para estas
   flechas es rgba(237,237,237,.9) — un gris casi blanco — y el fondo de las
   fotos de producto es #F7F7F7. Dos claros casi idénticos: la flecha existía
   pero no se veía.

   Se acota por [data-widget_type^="nested-carousel"], que en este sitio son
   SOLO las galerías de las fichas de producto (medido: el widget no aparece en
   ningún otro tipo de contenido). El slideshow de la home usa el widget
   «slides» y su propio bloque §18, así que no se toca.

   OJO con el selector: el widget NO lleva la clase elementor-widget-nested-carousel.
   Su div es «elementor-element elementor-element-<id> elementor-pagination-type-»,
   así que hay que engancharse al ATRIBUTO data-widget_type. Se intentó primero
   con la clase y no aplicaba nada.

   El SVG hereda el color del contenedor (fill: currentColor), por eso alcanza
   con «color» — pero se deja el fill explícito por si alguna versión de
   Elementor cambia esa herencia. */
[data-widget_type^="nested-carousel"] .elementor-swiper-button{
  color: #000 !important;
}

/* Elementor las deja en left:0 / right:0, o sea PEGADAS al borde de la foto
   (medido: distancia 0 a los dos lados). En gris casi no se notaba; en negro
   queda mal. Se meten 16px hacia adentro. */
[data-widget_type^="nested-carousel"] .elementor-swiper-button-prev{ left: 16px !important; right: auto !important; }
[data-widget_type^="nested-carousel"] .elementor-swiper-button-next{ right: 16px !important; left: auto !important; }
[data-widget_type^="nested-carousel"] .elementor-swiper-button svg,
[data-widget_type^="nested-carousel"] .elementor-swiper-button svg *{
  fill: currentColor !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §20 · GRILLA DE LÍNEAS: SUBIR LAS FOTOS SOBRE LA FRANJA — cliente (26-ago-2026)
   ═══════════════════════════════════════════════════════════════════════════
   «Sarebbe possibile alzare tutte le immagini in modo tale da dare maggiore
   visibilità ai prodotti di linea, senza che questi vengano in parte coperti
   dalla fascia Scopri?» — con una captura marcada a mano sobre Artiglio.

   Medido antes de tocar: el box es 442×289 (ratio 1,53), la foto 884×540
   (ratio 1,64) y va en background-size: cover. Como la foto es MÁS ANCHA en
   proporción, «cover» la escala por la ALTURA: entra justa de arriba a abajo y
   el sobrante se va por los lados. O sea NO hay desborde vertical, y por eso
   background-position-y en % (0%, 50%, 100%) da exactamente lo mismo — no
   mueve nada. Hay que desplazar en PÍXELES.

   La franja «Scopri» es blanca al 80% y arranca al 72% del box (y=208 de 289).
   Los productos de la foto llegan hasta ~85% de su altura, así que caían
   dentro de la franja. Subiendo 35px quedan por encima.

   El relleno que queda abajo NO se ve: el fondo de estas fotos es
   perfectamente uniforme —muestreados los 8 bordes de la imagen de Artiglio,
   los 8 dan rgb(238,240,239)— así que se pinta el container de ese mismo color
   y la unión es invisible. Además esa banda cae detrás de la franja.

   Se probaron -35 y -50 comparando capturas: con -50 los productos quedan
   pegados al borde superior; -35 resuelve el problema y mantiene el aire.

   Va sobre .prod-media, la clase propia de estos boxes. */
/* OJO — son DOS capas: .prod-media es la foto en reposo y .prod-over la que
   aparece al pasar el mouse. NO comparten clase, asi que si se desplaza sola
   una, al hacer hover la imagen SALTA 35px. Pasó: se corrigió tras el reporte
   de Christian. Las dos van siempre juntas. */
.prod-media,
.prod-over{
  background-position: center -35px !important;
  background-color: #eef0ef !important;
}

/* En pantallas chicas el box es más bajo y el desplazamiento tiene que
   achicarse en la misma proporción, o se comería los productos por arriba. */
@media (max-width: 767px){
  .prod-media,
  .prod-over{ background-position: center -22px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §21 · EL HOVER DE LAS CARDS NO LLEGABA HASTA ABAJO — Christian (30-ago-2026)
   ═══════════════════════════════════════════════════════════════════════════
   Al pasar el mouse, la foto cambiaba a su versión «-over» pero la franja
   blanca de abajo se quedaba igual: quedaba un corte horizontal marcado a
   dos tercios de la card.

   La causa NO era que el overlay no cubriera: medido, `.prod-over` mide
   exactamente lo mismo que la card (442×289). Es un tema de CAPAS — la franja
   va en z-index 2, por delante del overlay, así que se lo tapa.

   Y no se arregla subiendo el overlay por encima: la franja CONTIENE el
   nombre de la línea y el botón «Scopri», así que taparla los taparía.

   Lo que se hace es integrarla: en hover baja su opacidad de .8 a .35, deja
   ver la foto tratada por detrás y el corte desaparece. Probado a .35, .5 y
   .92 (este último no cambiaba nada), y verificado que el texto siga legible
   en las cards de foto oscura (Nutrition, Formula D).

   El selector se apoya en «el div que sigue a la foto», porque la franja no
   tiene clase propia: es un contenedor de Elementor sin nombre. */
.prod-card:hover .prod-media + div,
.prod-card:focus-visible .prod-media + div{
  background: rgba(255,255,255,.35) !important;
  transition: background .35s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §22 · EL COLOR DEL HOVER SE CORTABA ANTES DEL PIE — cliente (31-ago-2026)
   ═══════════════════════════════════════════════════════════════════════════
   «Il colore non prende tutto il box ma si interrompe al termine del box
   Scopri» — en la lista de modificaciones del 31 de agosto.

   ES LA CONSECUENCIA DIRECTA DE §20, y su comentario tiene el error:
   ahí se dio por bueno que «el relleno que queda abajo NO se ve, porque el
   fondo de estas fotos es uniforme #eef0ef». Eso vale para .prod-media (la
   foto en reposo, de fondo claro) pero NO para .prod-over, que es la versión
   tratada en NARANJA. Al subir la imagen 35px queda una franja del container
   sin foto; en reposo es gris sobre gris y no se nota, en hover es gris
   contra naranja y corta el color en seco.

   MEDIDO, no mirado: capturando la card con y sin hover y comparando fila
   por fila, el tinte moría en y=256 de 289 → 32 px de franja muerta. Con
   este fix: 2 px. El pie pasa de rgb(242,244,243) a rgb(249,200,129).

   Por qué NO se resolvió cambiando background-position a center: cubre, pero
   deshace §20 — los productos vuelven a caer detrás de la franja «Scopri»,
   que es exactamente lo que el cliente había pedido corregir el 26-ago.
   Y por qué NO se resolvió pintando el relleno del color de cada -over: son
   10 líneas con 10 tintes distintos, y sigue siendo una franja falsa.

   La solución es que no haya franja: se escala la foto 35px MÁS ALTA que el
   box, así el desplazamiento de §20 se absorbe y sigue cubriendo.
   `auto` en el ancho es seguro acá: la foto es 884×540 (ratio 1,64) contra un
   box de ratio 1,53 — al escalar por altura, el ancho SIEMPRE sobra.
   Verificado que no aparezca hueco lateral, en desktop y en 390px. */
.prod-media,
.prod-over{ background-size: auto calc(100% + 35px) !important; }

/* El desplazamiento de §20 baja a 22px en mobile: el escalado lo acompaña. */
@media (max-width: 767px){
  .prod-media,
  .prod-over{ background-size: auto calc(100% + 22px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §23 · HERO EN MOBILE: SACAR LAS BANDAS DE ARRIBA Y ABAJO — cliente (31-ago)
   ═══════════════════════════════════════════════════════════════════════════
   «Sarebbe possibile sfruttare un formato senza le barre orizzontali sopra e
   sotto?» — pedido del 31-ago.

   NO son barras del archivo: cropdetect da el frame completo en los tres
   videos. Y en desktop no existen: contenedor 3,03 y video 3,03, medido.
   Son SOLO mobile, y las pone el bloque de §8 (max-width:640px), que fija la
   caja en 16:9 y dibuja el video con `contain`: entra entero y sobran 87px
   repartidos arriba y abajo, del gris #f7f7f7.

   🔴 LO QUE NO SE PUEDE HACER, Y YA ESTÁ DOCUMENTADO ARRIBA (28-ago): pasar a
   `object-fit: cover`. Recorta el 41% del ancho y CORTA EL TEXTO QUEMADO EN EL
   VIDEO — se vio «di rigore scientifico» partido al medio a 390px. Se probó de
   nuevo hoy y se descartó de nuevo: el comentario de §8 lo salvó.

   Lo que sí: bajar la CAJA al ratio del video. Cero recorte, cero bandas.
   Costo: el hero mide 375x124 en vez de 375x211 — más bajo. Se elige esto
   porque el cliente pidió explícitamente sacar las bandas, y en la disyuntiva
   del 28-ago («entre franja baja y texto cortado, gana la franja») ahora hay
   un tercer dato: él prefiere la franja baja SIN bandas.

   📌 Si lo quieren alto Y sin bandas, no hay CSS que lo resuelva: hace falta
   un CORTE MOBILE del spot (formato más cuadrado, con el texto en el centro
   seguro). Eso es material de ellos. */
@media (max-width: 640px){
  .mz-hero-video .elementor-widget-video .elementor-wrapper{
    aspect-ratio: 1920 / 634 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §24 · «Iscriviti per..» NO SE LEÍA SOBRE LA FOTO — cliente (31-ago-2026)
   ═══════════════════════════════════════════════════════════════════════════
   «Modificare leggermente in CSS questa immagine in home page per far si che
   si legga meglio quell'"Iscriviti per.."».

   MEDIDO, no estimado. Muestreando el fondo real bajo el párrafo (descartando
   los píxeles del propio texto) y calculando el contraste WCAG contra blanco:
       antes  -> mediana 6,11:1  ·  zonas claras del pasto (p90) 3,30:1
   AA pide 4,5:1 para texto normal, y el párrafo es 21px/500 → sobre las matas
   iluminadas NO pasaba. El título aguanta mejor porque es más grueso.

   Se descartó subir el peso o el tamaño (cambia el diseño aprobado) y bajar el
   brillo de toda la foto (se apaga la mano, que es el foco de la imagen).
   Va un velo en degradado SOLO del lado del texto: se apaga el pasto de la
   izquierda y la mano de la derecha queda intacta.
       después -> mediana 12,35:1  ·  zonas claras 8,03:1
   Comparado sobre EL MISMO elemento y el mismo recorte: la primera medición
   comparaba `.mz-community__body` contra `.mz-community` (399px vs 508px de
   alto) y no servía.

   En mobile el texto ocupa todo el ancho, así que el degradado horizontal no
   alcanza: ahí el velo va de arriba abajo. */
.mz-community{ position: relative; isolation: isolate; }
.mz-community::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
              rgba(0,0,0,.52) 0%,
              rgba(0,0,0,.44) 30%,
              rgba(0,0,0,0)   64%);
  pointer-events: none;
  z-index: 0;
}
.mz-community > .e-con-inner{ position: relative; z-index: 1; }

@media (max-width: 767px){
  .mz-community::before{
    background: linear-gradient(180deg,
                rgba(0,0,0,.30) 0%,
                rgba(0,0,0,.50) 45%,
                rgba(0,0,0,.55) 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §25 · EL HERO DE LA HOME USA — cliente (1-sep-2026)
   ═══════════════════════════════════════════════════════════════════════════
   «Non capisco però come mai si veda malissimo in quella americana, potresti
   controllare? Probabilmente il contenitore andrebbe modificato.» — y tenía razón.

   CAUSA: los 2 widgets de video de la USA no tenían la clase
   `mz-hero-video__player`, así que TODO el bloque §7 —que es el que fija el ratio
   del wrapper y el `object-fit`— nunca les llegó. Y el `aspect_ratio: 219` del
   propio widget no salva nada: el comentario de §7 ya documenta que ese control
   no se guarda (el wrapper sale sin `.elementor-fit-aspect-ratio`).
   Resultado medido antes del fix: caja en ratio 1,79 (16:9) con un video de 3,03:1
   y `cover` → se comía ~41% del ancho. En IT y EN la caja daba 3,03, igual al video.

   POR QUÉ NO SE LE PUSO LA CLASE AL CONTENEDOR: en la USA ese contenedor tiene
   TAMBIÉN el slideshow (`a1191aa`: slides + video). `.mz-hero-video` trae
   min-height, flex y padding pensados para un contenedor que sólo lleva el video;
   aplicárselo ahí habría movido el slider. Se le puso la clase a los widgets y se
   repiten acá las 2 reglas del wrapper, sin nada de layout de contenedor.

   Aplica también a IT y EN (llevan la misma clase) con valores idénticos a los de
   §7: no cambia nada allá.
   🔑 CORRECCIÓN (misma sesión): el primer intento usaba `.mz-hero-video__player`
   a secas y NO ganaba. Elementor aplica `height:130% !important` con
   `.elementor-widget-video .elementor-wrapper video` — misma especificidad que la
   mía (0,2,1) y su CSS carga DESPUÉS, así que ganaba él: el video quedaba 1425x612
   dentro de un wrapper de 471, desplazado -100px. Se ve AMPLIADO, no cortado, y el
   wrapper medía bien — por eso la primera medición dio 	odo igual\.
   §7 no tenía el problema porque su selector lleva 3 clases. Acá se encadena
   `.elementor-widget-video` a la clase propia para llegar a (0,3,1).
*/
.elementor-widget-video.mz-hero-video__player .elementor-wrapper{
  position: relative;
  padding-bottom: 0 !important;
  height: auto !important;
  aspect-ratio: 1920 / 634;
  overflow: hidden;
}
.elementor-widget-video.mz-hero-video__player .elementor-wrapper video{
  position: absolute;
  inset: 0;
  transform: none;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: cover;
  /* Las MISMAS dos reglas inline de la agencia anterior que ya neutraliza el
     bloque de arriba (height:130% y margin-top:-100px sobre .e-hosted-video).
     Copiar solo la mitad del bloque dejaba el video 100px mas arriba del
     wrapper: la altura daba bien y seguia viendose corrido. Van las dos. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}