/*
 * Theme Name: Hello Elementor Lacer Oral Health
 * Description: Tema hijo de Hello Elementor para el subsite Lacer Oral Health - OK
 * Template: hello-elementor
 * Version: 1.0.0
 * Author: Lacer
 */

/* Matches any element with a class starting with "marca-" regardless of position in the class list */
.single-productos .productos {
    padding-bottom: 60px;
}

[class^="marca-"] .elementor .boton-principal,
[class*=" marca-"] .elementor .boton-principal,
.tax-categoria_producto .elementor .boton-principal,
.page-template-default .elementor .boton-principal,
.page-template-default .elementor .form-contacto .elementor-button[type="submit"],
.tax-soluciones .elementor .boton-principal,
.blog .elementor .loadMore a {
    font-family: DIN;
    font-size: 18px;
    font-weight: 600;
    color: var(--Black);
    text-align: center;
    text-transform: uppercase;
    background-color: transparent;
    display: block;
    padding-block: 12px;
    padding-inline: 20px;
    border-style: solid;
    border-color: var(--Black);
    border-block-width: 1px;
    border-inline-width: 0;
    border-radius: 0;
    position: relative;
    z-index: 1;
    line-height: 22px;
    width: 100%;
}
.home.page-template-default .elementor .boton-principal {
    width: auto;
    min-width: 40%;
}
.page-template-default .elementor .form-contacto .elementor-button[type="submit"] {
    width: auto;
    flex-basis: auto;
}
.page-template-default .elementor .form-contacto .elementor-field-group.elementor-field-type-submit {
    margin-top: 12px;
    justify-content: center;
}
[class*=" marca-"].single-productos .elementor .boton-principal {
    padding-inline: 20px;
    width: auto;
}
[class^="marca-"] .elementor .hero-producto .boton-principal,
[class*=" marca-"] .elementor .hero-producto .boton-principal,
.page-template-default .elementor .hero-producto .boton-principal,
.page-template-default .elementor .form-contacto .elementor-button[type="submit"],
.tax-categoria_producto .elementor .hero-producto .boton-principal,
.tax-soluciones .elementor .hero-producto .boton-principal,
.blog .elementor .loadMore a {
    border-block-width: 2px;
}
[class^="marca-"] .elementor .boton-principal::before,
[class*=" marca-"] .elementor .boton-principal::before,
.tax-categoria_producto .elementor .boton-principal::before,
.page-template-default .elementor .boton-principal::before,
.page-template-default .elementor .form-contacto .elementor-button[type="submit"]::before,
.tax-soluciones .elementor .boton-principal::before,
.blog .elementor .loadMore a::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: #000;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.3s ease-out;
}
[class^="marca-"] .elementor .boton-principal:is(:active, :focus, :hover),
[class*=" marca-"] .elementor .boton-principal:is(:active, :focus, :hover),
.tax-categoria_producto .elementor .boton-principal:is(:active, :focus, :hover),
.page-template-default .elementor .boton-principal:is(:active, :focus, :hover),
.page-template-default .elementor .form-contacto .elementor-button[type="submit"]:is(:active, :focus, :hover),
.tax-soluciones .elementor .boton-principal:is(:active, :focus, :hover),
.blog .elementor .loadMore a:is(:active, :focus, :hover) {
    color: #fff;
}
[class^="marca-"] .elementor .boton-principal:is(:active, :focus, :hover)::before,
[class*=" marca-"] .elementor .boton-principal:is(:active, :focus, :hover)::before,
.tax-categoria_producto .elementor .boton-principal:is(:active, :focus, :hover)::before,
.page-template-default .elementor .boton-principal:is(:active, :focus, :hover)::before,
.page-template-default .elementor .form-contacto .elementor-button[type="submit"]:is(:active, :focus, :hover)::before,
.tax-soluciones .elementor .boton-principal:is(:active, :focus, :hover)::before,
.blog .elementor .loadMore a:is(:active, :focus, :hover)::before {
    transform: scaleY(1);
}

/* Botones "producto recomendado" en las paginas de Salud Oral (widget Button
   nativo de Elementor, mismo widget id `elementor-element-6472553` repetido
   en las 10 plantillas de tema/sintoma -- una sola fila del repeater ACF
   montada una vez en Elementor, reutilizada por todas). Reportado por Nico
   (13/08/2026) con capturas: en vez del barrido de color de abajo a arriba
   que usan TODOS los demas botones con borde arriba/abajo de la web
   (`.boton-principal`, con su `::before` de mas arriba en este archivo), este
   widget cambia a fondo negro DE GOLPE en :hover -- Elementor genera esa
   regla en su propio CSS por widget (background-color solido en :hover,
   configurado en el panel del editor, sin transicion) en vez del patron
   `::before` de este archivo, porque este boton NO tiene la clase
   `.boton-principal` (es un widget Button nativo suelto, no el que usan las
   demas plantillas). Verificado en vivo (ago/2026): es el UNICO widget de
   toda la web con este patron de borde sin el barrido -- no aparece en
   Single Marca, Single Producto ni Home. Se replica aqui el mismo `::before`
   ya usado para `.boton-principal`, y se neutraliza el `background-color`
   que Elementor ya inyecta en :hover/:focus (haria parpadear/competir con
   el barrido si no se anula).
   Sin `overflow: hidden` en el boton (a diferencia de un primer intento):
   el `::before` ya tiene `z-index: -1` e `inset: 0`, nunca se desborda del
   boton, asi que no hace falta recortarlo -- y recortarlo SI tenia un
   efecto secundario: el borde superior de 1px quedaba dentro del area de
   recorte, y al hacer scaleY el navegador podia perder ese borde en el
   frame donde el negro lo cubre (reportado por Nico en vivo: "el borde
   superior desaparece en hover, debe estar siempre"). Sin `overflow`, el
   borde del boton (por fuera, en su `border-box`) nunca depende del
   recorte y se mantiene visible en cualquier punto de la transicion. */
.elementor-element-6472553.elementor-widget-button .elementor-button {
    position: relative;
    z-index: 1;
}
.elementor-element-6472553.elementor-widget-button .elementor-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: #000;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.3s ease-out;
}
.elementor-element-6472553.elementor-widget-button .elementor-button:is(:active, :focus, :hover) {
    background-color: transparent !important;
}
.elementor-element-6472553.elementor-widget-button .elementor-button:is(:active, :focus, :hover)::before {
    transform: scaleY(1);
}

.elementor .loh-caracteristicas__texto {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    font-size: 1.29rem;
    line-height: 1.4rem;
}

/* Subtitulo del item (`<strong class="loh-caracteristicas__subtitulo">`,
   shortcode [loh_caracteristicas]) NO debe heredar el estilo del titulo --
   paridad con Origen (confirmado en vivo en
   https://laceroralhealth.com/productos/lacer-pasta-dentifrica/: el
   `<strong>` ahi va en color heredado del contenedor, SIN mayusculas y SIN
   negrita, `font-weight: 400`). Sin esta regla hereda mal el color: existe
   un `strong { color: var(--e-global-color-primary) !important; }` global
   del Kit de Elementor (rojo de marca) que pinta el texto en rojo sobre el
   fondo rojo del modulo (contraste roto) -- hace falta el propio
   `!important` aqui para poder ganarle, `color: inherit` normal no basta.
   El `text-transform: uppercase` y el bold que SI hereda bien de
   `.loh-caracteristicas__texto` (no llevan `!important` ahi) se anulan sin
   necesitar `!important`. Acotado a unicamente este `<strong>` dentro de
   este item -- no es un cambio global de `<strong>` en la web. */
.loh-caracteristicas__subtitulo {
    color: inherit !important;
    text-transform: none;
    font-weight: normal;
    font-size: 1rem;
}
.single-productos .descripcion {
    font-size: 1.14rem;
    line-height: 1.43rem;
}
.single-productos .descripcion .destacada {
    font-size: 2rem;
    line-height: 2.43rem;
}
/* Descripción producto: si un .flex-50 no tiene widgets, el otro ocupa 100% centrado.
   No usar :has() anidado (:has(...:has(...))) — el motor lo descarta como selector inválido. */
.productos-template-default .descripcion .prod-descripcion > .flex-50:not(:has(*)) {
    display: none;
}
.productos-template-default .descripcion .prod-descripcion > .flex-50:first-child:not(:has(~ .flex-50 *)),
.productos-template-default .descripcion .prod-descripcion > .flex-50:not(:has(*)) + .flex-50 {
    width: 100%;
    text-align: center;
}
.single-productos .formatos .elementor-heading-title {
    margin-bottom: 20px;
}
.single-productos .formatos .elementor-widget-text-editor {
    font-size: 14px;
}
.single-productos .formatos.e-con>.e-con-inner {
    padding: 0;
}

@media (max-width: 1024px) {
    .productos-template-default .elementor .hero-producto,
    .productos-template-default .prod-descripcion,
    .productos-template-default .flex-3col {
        flex-direction: column;
    }
    .productos-template-default .elementor .hero-producto .img-producto {
        position: relative;
        order: 3;
        right: 0;
        margin: 0 auto;
    }
    .productos-template-default .prod-descripcion {
        padding-inline: 24px;
    }
    .productos-template-default .prod-descripcion .flex-50 {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .productos-template-default .elementor .hero-producto .img-producto {
        order: inherit;
        bottom: 0;
    }
}

.loh-rep__track {
    gap: 0!important;
}

.loh-rep__track .elementor-location-single {
    padding: 0px 20px;
    position: relative;
}

.loh-rep__track .elementor-location-single + .elementor-location-single::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    background-color: #ccc;
}

.marca-lacernatur .elementor-widget-theme-post-content {
    color: #fff;
}

/* SVG en widget Image de Elementor: si el widget es flex item
   shrink-to-fit (align-items:center / width:initial) y el <img src="*.svg">
   no trae width/height HTML (típico Dynamic Tag ACF URL), el used size
   queda 0×0 (confirmado en /marcas/lacer-aligner/ con logo_orto.svg:
   natural 300×49, rendered 0×0, widget width 0px). Darle un ancho
   definido del contenedor padre rompe el ciclo. Tope visual: 80% del
   padre y nunca más de 440px (pedido Nico tras ver el logo Aligner
   demasiado grande a width:100%).
   `!important` necesario: Elementor pinta
   `.e-con.e-con > .e-con-inner > .elementor-widget { max-width: 100% }`
   (especificidad 0,4,0) y el CSS del Theme Builder
   `.elementor-246594 .elementor-element-f33c620 { max-width: 40%/50% }`
   — sin !important nuestro max-width:440px pierde y el logo crece con
   el 80% del padre (confirmado en vivo: computed max-width seguía en
   100% aunque la regla apareciera “activa” en DevTools).
   No aplica a PNG/WebP. Se excluye el Site Logo del header.
   REGRESIÓN (25/09/2026, reportada por Nico en /elige-lacer/): el
   selector original era `.elementor-widget-image:has(img[src$=".svg"])`
   SIN acotar — pescaba CUALQUIER widget Image con SVG de todo el site,
   no solo los logos de marca. En /elige-lacer/ forzó los iconos pequeños
   del bloque "Elige Lacer" (icono-elige-user.svg, -boca.svg, -award.svg,
   -grafico.svg, -quimico.svg, -handshake.svg, etc., normalmente ~90px)
   a 80%/440px de ancho + img width:100%, deformándolos e inflándolos
   (confirmado en vivo: icono-elige-quimico.svg pasó de su tamaño
   intrínseco a 182×257px). El hero (elige-lacer-white.svg, widget
   d016249) tampoco necesitaba el fix y quedó bien sin él.
   Fix: acotar el selector a los DOS widgets que de verdad sufren el
   colapso a 0×0 — `.elementor-element-f33c620` (logo dinámico de marca,
   plantilla Theme Builder 246594, reutilizado en las ~14 páginas
   /marcas/{slug}/) y `.elementor-element-cf9ba7f` (LacerBlanc, plantilla
   propia). Si aparece un logo nuevo con el mismo colapso, añadir su
   `elementor-element-XXXXXXX` aquí — NO volver a un selector global. */
.elementor-element-f33c620.elementor-widget-image,
.elementor-element-cf9ba7f.elementor-widget-image {
    width: 80% !important;
    max-width: 440px !important;
}
.elementor-element-f33c620.elementor-widget-image img,
.elementor-element-cf9ba7f.elementor-widget-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    .marca-lacernatur .elementor-widget-theme-post-content {
        color: #000;
    }
    /* Logo de marca (Single Marca, hero sobre el recuadro casi blanco): un
       único Theme Builder template reutilizado por 14 de las ~15 marcas
       (mismo elementor-element-f33c620 en cada `/marcas/{slug}/`; LacerBlanc
       es la única excepción, con plantilla individual propia —
       elementor-element-cf9ba7f, clase `lacerblanc-custom`— y su logo ya
       tiene un aspect ratio seguro de ~2.79:1, así que no necesita este fix).
       En la plantilla genérica, el dynamic tag pinta un logo distinto por
       marca, cada uno con su propio aspect ratio (auditado en vivo con las
       14: de 1.42:1 en SensiLacer, el único caso "cuadrado", hasta 10.54:1
       en Clorhexidina Lacer). Elementor solo fija el ANCHO del widget
       (`width`) dejando `height: auto` sin `max-height` — con ancho fijo,
       un logo "cuadrado" sale mucho más alto en px que uno panorámico, y en
       mobile puede acabar solapando la foto de fondo que queda justo por
       encima del recuadro (confirmado con SensiLacer: reportado por Nico
       con capturas). Ya había un parche puntual solo para
       `.marca-sensilacer` (ancho fijo al 20%/35% según breakpoint) que
       corregía ESE caso pero no protegía a una marca futura con un logo de
       proporción similar.
       Fix genérico (sin `body.marca-X`, aplica a las 14 marcas de la
       plantilla común por igual): en vez de fijar el ancho, se fija una
       altura máxima uniforme y se deja que el ancho se ajuste solo
       (`width: auto`) respetando esa altura — así el logo más "cuadrado"
       no crece más que el panorámico, cada uno ocupa el ancho que le
       corresponde a su aspect ratio real dentro de esa altura, y
       `object-fit: contain` evita cualquier recorte o distorsión si el
       navegador intenta forzar el bounding box del widget. */
    .elementor-element-f33c620.elementor-widget-image img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 70px;
        object-fit: contain;
    }
}

@media (max-width: 500px) {
    .elementor-element-f33c620.elementor-widget-image img {
        max-height: 56px;
    }
}

/* LacerNatur: logo blanco/script siempre sobre foto, <=1024px (reportado
   por Nico: "fuera de la caja blanca" en /marcas/lacernatur/). Único caso
   de las 14 marcas con este problema -- es la única con un logo blanco que
   DEBE ir siempre sobre la imagen de fondo; el resto tiene logos con su
   propio fondo o colores que no dependen de estar sobre foto. Por eso el
   fix NO toca la plantilla compartida (elementor-element-1b066a8c/
   b1e4775/fa85804 los reutilizan las otras 13 marcas) y se acota entero a
   `body.marca-lacernatur`.
   Causa raíz (auditada en vivo con iframe a varios anchos + inspección de
   document.styleSheets): el hero (b1e4775... no, 1b066a8c) usa
   `background-size: contain` con una altura fija por breakpoint
   (`--min-height`: 460px en <=1024px, 300px en <=767px, vía regla inline
   de Elementor `.elementor-246594 .elementor-element.elementor-element-
   1b066a8c`). La imagen de fondo mide 1920x743px (ratio ~2.58:1) y con
   `contain` no llega a cubrir esa altura en anchos estrechos, dejando un
   hueco vacío debajo de la foto -- ahí es donde el logo (posicionado por
   Elementor con flex dentro de .elementor-element-b1e4775, que comparte la
   MISMA altura que el recuadro casi-blanco `fa85804` que se solapa
   justo debajo) queda "fuera" de la zona con foto.
   Fix: `background-size: cover` (con `!important` porque Elementor pinta
   ese background-size con una regla igual de específica por breakpoint) y
   el contenedor del logo (`b1e4775`) se pasa a `position: absolute` cubriendo
   TODA la altura del hero (no solo la del recuadro fa85804), centrado con
   flex, para que el logo quede siempre centrado verticalmente sobre la foto
   ya "cover" en vez de compartir la franja del recuadro blanco.
   Importante: Elementor no usa `height`/`min-height` en línea recta -- el
   valor real que consume `.e-con` es la custom property `--min-height`
   (`min-height: var(--min-height)`), así que hay que pisar también la
   variable, no solo la propiedad, o gana el valor original de Elementor.
   Breakpoints igualados a los que ya usa Elementor para este mismo
   elemento (1024px y 767px, no 1024/768 -- confirmado en las reglas
   inline reales, no asumido).
   Verificado en vivo (iframe a 1024px, 763px y 371px + comparativa con
   SensiLacer en los mismos anchos, que queda intacto: sigue con
   `background-size: contain` y `min-height: 190/220px` sin cambios al no
   tener la clase `marca-lacernatur`). */
body.marca-lacernatur .elementor-element-1b066a8c {
    background-size: cover !important;
}

@media (max-width: 1024px) {
    body.marca-lacernatur .elementor-element-b1e4775 {
        --min-height: 460px !important;
        min-height: 460px !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    body.marca-lacernatur .elementor-element-b1e4775 {
        --min-height: 300px !important;
        min-height: 300px !important;
    }
}

/* LacerNatur: texto bajo el logo con fondo blanco, <=1024px (reportado por
   Nico tras el fix anterior: a 940px -- y también confirmado por él en
   360px, primera línea -- el párrafo "Pásate al cuidado bucal..." /
   "Start using complete..." queda directamente sobre la foto de fondo,
   sin contraste suficiente para leerse).
   Es consecuencia directa del fix de arriba: ese texto es el widget
   `elementor-element-eecbb61` (theme-post-content, contenido dinámico del
   post de marca), que vive DENTRO del mismo contenedor flex del logo
   (`elementor-element-b1e4775`, ver innerChildren: logo > este texto >
   icono Instagram, apilados en columna). Al absolutizar ese contenedor a
   toda la altura del hero para el fix del logo, el texto -- que antes
   quedaba pegado a la franja del recuadro casi-blanco `fa85804` -- ahora
   puede caer sobre el tramo de foto que hay por encima de ese recuadro,
   según cuántas líneas ocupe (varía con el idioma: EN más corto, ES más
   largo) y el ancho de viewport.
   Fix: fondo blanco sólido + padding solo en el propio widget de texto,
   acotado igual que todo lo demás a `body.marca-lacernatur` y <=1024px.
   No se toca `fa85804` ni el resto de la plantilla compartida.
   Verificado en vivo (iframe): 1024px, 940px (el ancho que reportó Nico),
   767px y 371px, en ES y EN -- en los 4 anchos el párrafo completo queda
   sobre fondo blanco, ninguna línea se solapa con la foto, incluida la
   primera línea a 371px. */
@media (max-width: 1024px) {
    body.marca-lacernatur .elementor-element-eecbb61 {
        background-color: #fff;
        padding: 10px 16px;
        border-radius: 4px;
    }
}

.elementor-widget-text-editor ul {
    list-style: none;
    padding-inline-start: 30px;
}

.elementor-widget-text-editor ul li {
    list-style: none;
    position: relative;
    display: block;
}

.elementor-widget-text-editor ul li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    flex-shrink: 0;
    margin-top: 0px;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15'%3E%3Cpath fill='%23cc0000' d='M4.366 7.51c0 1.427-1.853 3.593-3.73 5.093-.554.442-.831 1.133-.48 1.749.167.295.446.512.774.602.327.09.678.047.973-.122 2.46-1.39 4.562-3.333 6.14-5.676.375-.539.555-1.078.555-1.647-.002-.538-.163-1.064-.462-1.511C6.543 3.592 4.406 1.595 1.9.167 1.286-.181.506.033.156.645c-.35.616-.074 1.306.479 1.748 1.937 1.555 3.73 3.647 3.73 5.116z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    position: absolute;
    left: -15px;
    top: 8px;
}

.e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul {
    padding-inline-start: 15px;
}

.e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul li {
    list-style: none;
}

.e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul li a {
    /* min-height (no height fijo): con "height" fijo, un ítem cuyo texto envuelve
       a 2 líneas (ver mega-menu desktop de PRODUCTS → CATEGORIES, p.ej. "Toothbrush
       and interdental brushes") desbordaba hacia abajo con overflow visible y se
       superponía con el <li> siguiente. min-height mantiene el alto mínimo de 1
       línea sin recortar cuando el contenido necesita más (paridad con el fix ya
       aplicado en mobile, más abajo en este archivo). */
    list-style: none;
    position: relative;
    min-height: 26px;
    display: block;

}

.e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul li a:hover {
    font-weight: 600;
}

.e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul li a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    flex-shrink: 0;
    margin-top: 0px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15'%3E%3Cpath fill='%23cc0000' d='M4.366 7.51c0 1.427-1.853 3.593-3.73 5.093-.554.442-.831 1.133-.48 1.749.167.295.446.512.774.602.327.09.678.047.973-.122 2.46-1.39 4.562-3.333 6.14-5.676.375-.539.555-1.078.555-1.647-.002-.538-.163-1.064-.462-1.511C6.543 3.592 4.406 1.595 1.9.167 1.286-.181.506.033.156.645c-.35.616-.074 1.306.479 1.748 1.937 1.555 3.73 3.647 3.73 5.116z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    position: absolute;
    left: -15px;
    top: 8px;
}

.e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul li::before {
    content: none;
    opacity: 0;
}

.e-n-menu-heading .e-n-menu-content.e-active ul li a:hover::before {
    opacity: 1;
}

body.post-template-default .elementor-widget-text-editor h2 {
    color: #d12421;
    font-size: 2rem;
    line-height: 2.4rem;
    margin-top: 50px;

}
body.post-template-default .elementor-widget-text-editor h3 {
    color: #d12421;
    font-size: 1.37rem;
    line-height: 1.59rem;
    margin-top: 40px;
}

body.post-template-default .elementor-widget-text-editor ul {
    list-style: none;
    padding-inline-start: 30px;
}

body.post-template-default .elementor-widget-text-editor ul li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    flex-shrink: 0;
    margin-top: 0px;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15'%3E%3Cpath fill='%23cc0000' d='M4.366 7.51c0 1.427-1.853 3.593-3.73 5.093-.554.442-.831 1.133-.48 1.749.167.295.446.512.774.602.327.09.678.047.973-.122 2.46-1.39 4.562-3.333 6.14-5.676.375-.539.555-1.078.555-1.647-.002-.538-.163-1.064-.462-1.511C6.543 3.592 4.406 1.595 1.9.167 1.286-.181.506.033.156.645c-.35.616-.074 1.306.479 1.748 1.937 1.555 3.73 3.647 3.73 5.116z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    position: absolute;
    left: -15px;
    top: 8px;
}

body.post-template-default .elementor-widget-text-editor ul li {
    list-style: none;
    position: relative;
    display: block;
}

.page-content ol {
    list-style: none;
    counter-reset: mycounter;
    padding-left: 10px;
}

.page-content ol li {
    counter-increment: mycounter;
    /* display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; */
}
.page-content ol li:before {
    content: counter(mycounter) ".";
    font-size: 1.1rem;
    line-height: 1.70rem;
    color: #d12421;
    font-weight: 600;
    margin-right: 15px;
}


@media (max-width: 1024px) {
    .elementor .hero {
        min-height: 400px;
    }
}
/* Video home */
.video-home.e-con .elementor-widget {
    min-width: 100%;
}
.video-vimeo-fondo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
  
.video-vimeo-fondo iframe {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    pointer-events: none;
    border: 0;
    aspect-ratio: 16 / 9;
}
/* Video home */


/* Header home negativo con efecto scroll */

header .back_collapsed {
    display: none;
}


@media (min-width: 1025px) {
    body.home header {
        height: 110px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 6;
    }
    body.home header .back_collapsed {
        position: absolute!important;
        top: -20px!important;
        width: 100%!important;
        height: 0;
        background-color: #fff;
        z-index: 1!important;
        -webkit-transition: all 250ms!important;
        transition: all 250ms!important;
        display: block!important;
    }
    
    body.home header.collapsed .back_collapsed {
        height: 110px!important;
        top: 0px !important;
    }
    
    body.home.scroll header .back_collapsed {
        height: 110px!important;
        top: 0px !important;
    }
    body.home header .elementor-element.elementor-element-42afe25a:not(.elementor-motion-effects-element-type-background), body.home header .elementor-element.menu-lacer {
        background-color: transparent;
    }
    
    body.home .elementor-45330 .elementor-element.elementor-element-2651801 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover:not( .e-current ) {
        background-color: transparent;
    }
    
    body.home header.collapsed .elementor-element.elementor-element-42afe25a:not(.elementor-motion-effects-element-type-background) {
        background-color: #fff;
    }
    
    body.home .site-main {
        position: relative;
        top: 0px;
    }
    
    body.home header .elementor-element .menu-lacer.elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text {
        color: #fff;
    }
    
    body.home .elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) a {
        color: #fff;
    }

    body.home header .elementor-button {
        background-color: #fff!important;
        fill: #857D7D!important;
        color: #857D7D!important;
    }

    body.home.scroll header .elementor-button, body.home header.collapsed .elementor-button {
        background-color: #666060!important;
        fill: #fff!important;
        color: #fff!important;
    }
    
    
    body.home header .elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-dropdown-icon svg, body.home .elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) .e-n-menu-dropdown-icon svg {
        fill: #fff;
    }
    body.home.scroll header .elementor-element .menu-lacer.elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text, body.home header.collapsed .elementor-element .menu-lacer.elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text {
        color: #857D7D;
    }
    body.home.scroll header .elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-dropdown-icon svg, body.home header.collapsed .elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-dropdown-icon svg {
        fill: #857D7D;
    }
    
    body.home.scroll .elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) .e-n-menu-dropdown-icon svg, body.home header.collapsed .elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) .e-n-menu-dropdown-icon svg {
        fill: #000;
    }
    
    body.home.scroll .elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) a, body.home header.collapsed .elementor-widget-n-menu .e-n-menu-title:hover:not(.e-current) a {
        color: #000;
    }
}





/* Header home negativo con efecto scroll */


/* Colores Marcas & Productos */
/* --Oros-Lacer */
.marca-laceroros .elementor h1 strong,
.marca-laceroros.single-productos .descripcion .destacada,
.marca-laceroros .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-laceroros .loh-video__titulo strong,
.marca-laceroros .sabias .elementor-heading-title,
.marca-laceroros .formatos .elementor-heading-title,
.marca-laceroros .loh-asociados .buy-button:hover,
.marca-laceroros .titulo-beneficios h2 strong,
.marca-laceroros .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Oros-Lacer);
}
.marca-laceroros .elementor .boton-principal {
    color: var(--Oros-Lacer);
    border-color: var(--Oros-Lacer);
}
.marca-laceroros .elementor .prod-caracteristicas,
.marca-laceroros .elementor .boton-principal::before {
    background: var(--Oros-Lacer);
}
.marca-laceroros .loh-asociados .buy-button svg path {
    fill: var(--Oros-Lacer);
}
/* --Rojo-Lacer */
.marca-lacer .elementor h1 strong,
.marca-lacer.single-productos .descripcion .destacada,
.marca-lacer .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacer .loh-video__titulo strong,
.marca-lacer .sabias .elementor-heading-title,
.marca-lacer .formatos .elementor-heading-title,
.marca-lacer .loh-asociados .buy-button:hover,
.marca-lacer .titulo-beneficios h2 strong,
.marca-lacer .asociados .elementor-widget-heading:nth-child(3) h3,
.marca-lacer-hidro .elementor h1 strong,
.marca-lacer-hidro.single-productos .descripcion .destacada,
.marca-lacer-hidro .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacer-hidro .loh-video__titulo strong,
.marca-lacer-hidro .sabias .elementor-heading-title,
.marca-lacer-hidro .formatos .elementor-heading-title,
.marca-lacer-hidro .loh-asociados .buy-button:hover,
.marca-lacer-hidro .titulo-beneficios h2 strong,
.marca-lacer-hidro .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Rojo-Lacer);
}
.marca-lacer .elementor .boton-principal,
.marca-lacer-hidro .elementor .boton-principal {
    color: var(--Rojo-Lacer);
    border-color: var(--Rojo-Lacer);
}
.marca-lacer .elementor .prod-caracteristicas,
.marca-lacer .elementor .boton-principal::before,
.marca-lacer-hidro .elementor .prod-caracteristicas,
.marca-lacer-hidro .elementor .boton-principal::before {
    background: var(--Rojo-Lacer);
}
.marca-lacer .loh-asociados .buy-button svg path,
.marca-lacer-hidro .loh-asociados .buy-button svg path {
    fill: var(--Rojo-Lacer);
}
/* --Afta-Lacer */
.marca-afta-lacer .elementor h1 strong,
.marca-afta-lacer.single-productos .descripcion .destacada,
.marca-afta-lacer .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-afta-lacer .loh-video__titulo strong,
.marca-afta-lacer .sabias .elementor-heading-title,
.marca-afta-lacer .formatos .elementor-heading-title,
.marca-afta-lacer .loh-asociados .buy-button:hover,
.marca-afta-lacer .titulo-beneficios h2 strong,
.marca-afta-lacer .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Afta-Lacer);
}
.marca-afta-lacer .elementor .boton-principal {
    color: var(--Afta-Lacer);
    border-color: var(--Afta-Lacer);
}
.marca-afta-lacer .elementor .prod-caracteristicas,
.marca-afta-lacer .elementor .boton-principal::before {
    background: var(--Afta-Lacer);
}
.marca-afta-lacer .loh-asociados .buy-button svg path {
    fill: var(--Afta-Lacer);
}
/* --Clorhexidina-Lacer */
.marca-clorhexidina-lacer .elementor h1 strong,
.marca-clorhexidina-lacer.single-productos .descripcion .destacada,
.marca-clorhexidina-lacer .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-clorhexidina-lacer .loh-video__titulo strong,
.marca-clorhexidina-lacer .sabias .elementor-heading-title,
.marca-clorhexidina-lacer .formatos .elementor-heading-title,
.marca-clorhexidina-lacer .loh-asociados .buy-button:hover,
.marca-clorhexidina-lacer .titulo-beneficios h2 strong,
.marca-clorhexidina-lacer .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Clorhexidina-Lacer);
}
.marca-clorhexidina-lacer .elementor .boton-principal {
    color: var(--Clorhexidina-Lacer);
    border-color: var(--Clorhexidina-Lacer);
}
.marca-clorhexidina-lacer .elementor .prod-caracteristicas,
.marca-clorhexidina-lacer .elementor .boton-principal::before {
    background: var(--Clorhexidina-Lacer);
}
.marca-clorhexidina-lacer .loh-asociados .buy-button svg path {
    fill: var(--Clorhexidina-Lacer);
}
/* --Junior-Lacer */
.marca-lacer-junior .elementor h1 strong,
.marca-lacer-junior.single-productos .descripcion .destacada,
.marca-lacer-junior .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacer-junior .loh-video__titulo strong,
.marca-lacer-junior .sabias .elementor-heading-title,
.marca-lacer-junior .formatos .elementor-heading-title,
.marca-lacer-junior .loh-asociados .buy-button:hover,
.marca-lacer-junior .titulo-beneficios h2 strong,
.marca-lacer-junior .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Junior-Lacer);
}
.marca-lacer-junior .elementor .boton-principal {
    color: var(--Junior-Lacer);
    border-color: var(--Junior-Lacer);
}
.marca-lacer-junior .elementor .prod-caracteristicas,
.marca-lacer-junior .elementor .boton-principal::before {
    background: var(--Junior-Lacer);
}
.marca-lacer-junior .loh-asociados .buy-button svg path {
    fill: var(--Junior-Lacer);
}
/* --Gingi-Lacer */
/* !important solo en h1/loh-video__titulo strong: la plantilla Elementor de
   este producto (GingiLacer Cepillo Dental, post 248318) tiene, por
   configuración accidental en el editor, una regla "strong { color:
   var(--e-global-color-primary) !important }" scopeada a esa página — pisaba
   el rosa de marca y el hero/título del vídeo salían en rojo (confirmado en
   vivo, ago/2026). Sin !important de este lado no hay forma de ganarle: la
   especificidad no importa frente a un !important del otro selector. El resto
   de selectores de este bloque no lo necesitan (no compiten con esa regla). */
.marca-gingilacer .elementor h1 strong,
.marca-gingilacer .loh-video__titulo strong {
    color: var(--Gingi-Lacer) !important;
}
.marca-gingilacer.single-productos .descripcion .destacada,
.marca-gingilacer .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-gingilacer .sabias .elementor-heading-title,
.marca-gingilacer .formatos .elementor-heading-title,
.marca-gingilacer .loh-asociados .buy-button:hover,
.marca-gingilacer .titulo-beneficios h2 strong,
.marca-gingilacer .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Gingi-Lacer);
}
.marca-gingilacer .elementor .boton-principal {
    color: var(--Gingi-Lacer);
    border-color: var(--Gingi-Lacer);
}
.marca-gingilacer .elementor .prod-caracteristicas,
.marca-gingilacer .elementor .boton-principal::before {
    background: var(--Gingi-Lacer);
}
.marca-gingilacer .loh-asociados .buy-button svg path {
    fill: var(--Gingi-Lacer);
}
/* --Infantil-Lacer */
.marca-lacer-infantil .elementor h1 strong,
.marca-lacer-infantil.single-productos .descripcion .destacada,
.marca-lacer-infantil .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacer-infantil .loh-video__titulo strong,
.marca-lacer-infantil .sabias .elementor-heading-title,
.marca-lacer-infantil .formatos .elementor-heading-title,
.marca-lacer-infantil .loh-asociados .buy-button:hover,
.marca-lacer-infantil .titulo-beneficios h2 strong,
.marca-lacer-infantil .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Infantil-Lacer);
}
.marca-lacer-infantil .elementor .boton-principal {
    color: var(--Infantil-Lacer);
    border-color: var(--Infantil-Lacer);
}
.marca-lacer-infantil .elementor .prod-caracteristicas,
.marca-lacer-infantil .elementor .boton-principal::before {
    background: var(--Infantil-Lacer);
}
.marca-lacer-infantil .loh-asociados .buy-button svg path {
    fill: var(--Infantil-Lacer);
}
/* --Muco-Lacer */
.marca-lacer-mucorepair .elementor h1 strong,
.marca-lacer-mucorepair.single-productos .descripcion .destacada,
.marca-lacer-mucorepair .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacer-mucorepair .loh-video__titulo strong,
.marca-lacer-mucorepair .sabias .elementor-heading-title,
.marca-lacer-mucorepair .formatos .elementor-heading-title,
.marca-lacer-mucorepair .loh-asociados .buy-button:hover,
.marca-lacer-mucorepair .titulo-beneficios h2 strong,
.marca-lacer-mucorepair .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Muco-Lacer);
}
.marca-lacer-mucorepair .elementor .boton-principal {
    color: var(--Muco-Lacer);
    border-color: var(--Muco-Lacer);
}
.marca-lacer-mucorepair .elementor .prod-caracteristicas,
.marca-lacer-mucorepair .elementor .boton-principal::before {
    background: var(--Muco-Lacer);
}
.marca-lacer-mucorepair .loh-asociados .buy-button svg path {
    fill: var(--Muco-Lacer);
}
/* --Blanc-Lacer */
.marca-lacerblanc .elementor h1 strong,
.marca-lacerblanc.single-productos .descripcion .destacada,
.marca-lacerblanc .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacerblanc .loh-video__titulo strong,
.marca-lacerblanc .sabias .elementor-heading-title,
.marca-lacerblanc .formatos .elementor-heading-title,
.marca-lacerblanc .loh-asociados .buy-button:hover,
.marca-lacerblanc .titulo-beneficios h2 strong,
.marca-lacerblanc .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Blanc-Lacer);
}
.marca-lacerblanc .elementor .boton-principal {
    color: var(--Blanc-Lacer);
    border-color: var(--Blanc-Lacer);
}
.marca-lacerblanc .elementor .prod-caracteristicas,
.marca-lacerblanc .elementor .boton-principal::before {
    background: var(--Blanc-Lacer);
}
.marca-lacerblanc .loh-asociados .buy-button svg path {
    fill: var(--Blanc-Lacer);
}
/* --Natur-Lacer */
.marca-lacernatur .elementor h1 strong,
.marca-lacernatur.single-productos .descripcion .destacada,
.marca-lacernatur .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacernatur .loh-video__titulo strong,
.marca-lacernatur .sabias .elementor-heading-title,
.marca-lacernatur .formatos .elementor-heading-title,
.marca-lacernatur .loh-asociados .buy-button:hover,
.marca-lacernatur .titulo-beneficios h2 strong,
.marca-lacernatur .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Natur-Lacer);
}
.marca-lacernatur .elementor .boton-principal {
    color: var(--Natur-Lacer);
    border-color: var(--Natur-Lacer);
}
.marca-lacernatur .elementor .prod-caracteristicas,
.marca-lacernatur .elementor .boton-principal::before {
    background: var(--Natur-Lacer);
}
.marca-lacernatur .loh-asociados .buy-button svg path {
    fill: var(--Natur-Lacer);
}
/* --Fresh-Lacer */
.marca-lacerfresh .elementor h1 strong,
.marca-lacerfresh.single-productos .descripcion .destacada,
.marca-lacerfresh .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacerfresh .loh-video__titulo strong,
.marca-lacerfresh .sabias .elementor-heading-title,
.marca-lacerfresh .formatos .elementor-heading-title,
.marca-lacerfresh .loh-asociados .buy-button:hover,
.marca-lacerfresh .titulo-beneficios h2 strong,
.marca-lacerfresh .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Fresh-Lacer);
}
.marca-lacerfresh .elementor .boton-principal {
    color: var(--Fresh-Lacer);
    border-color: var(--Fresh-Lacer);
}
.marca-lacerfresh .elementor .prod-caracteristicas,
.marca-lacerfresh .elementor .boton-principal::before {
    background: var(--Fresh-Lacer);
}
.marca-lacerfresh .loh-asociados .buy-button svg path {
    fill: var(--Fresh-Lacer);
}
/* --Pro-Lacer */
.marca-lacerpro .elementor h1 strong,
.marca-lacerpro.single-productos .descripcion .destacada,
.marca-lacerpro .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacerpro .loh-video__titulo strong,
.marca-lacerpro .sabias .elementor-heading-title,
.marca-lacerpro .formatos .elementor-heading-title,
.marca-lacerpro .loh-asociados .buy-button:hover,
.marca-lacerpro .titulo-beneficios h2 strong,
.marca-lacerpro .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Pro-Lacer);
}
.marca-lacerpro .elementor .boton-principal {
    color: var(--Pro-Lacer);
    border-color: var(--Pro-Lacer);
}
.marca-lacerpro .elementor .prod-caracteristicas,
.marca-lacerpro .elementor .boton-principal::before {
    background: var(--Pro-Lacer);
}
.marca-lacerpro .loh-asociados .buy-button svg path {
    fill: var(--Pro-Lacer);
}
/* --Aligner-Lacer */
.marca-lacer-aligner .elementor h1 strong,
.marca-lacer-aligner.single-productos .descripcion .destacada,
.marca-lacer-aligner .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-lacer-aligner .loh-video__titulo strong,
.marca-lacer-aligner .sabias .elementor-heading-title,
.marca-lacer-aligner .formatos .elementor-heading-title,
.marca-lacer-aligner .loh-asociados .buy-button:hover,
.marca-lacer-aligner .titulo-beneficios h2 strong,
.marca-lacer-aligner .asociados .elementor-widget-heading:nth-child(3) h3,
.marca-ortolacer .elementor h1 strong,
.marca-ortolacer.single-productos .descripcion .destacada,
.marca-ortolacer .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-ortolacer .loh-video__titulo strong,
.marca-ortolacer .sabias .elementor-heading-title,
.marca-ortolacer .formatos .elementor-heading-title,
.marca-ortolacer .loh-asociados .buy-button:hover,
.marca-ortolacer .titulo-beneficios h2 strong,
.marca-ortolacer .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Aligner-Lacer);
}
.marca-lacer-aligner .elementor .boton-principal,
.marca-ortolacer .elementor .boton-principal {
    color: var(--Aligner-Lacer);
    border-color: var(--Aligner-Lacer);
}
.marca-lacer-aligner .elementor .prod-caracteristicas,
.marca-lacer-aligner .elementor .boton-principal::before,
.marca-ortolacer .elementor .prod-caracteristicas,
.marca-ortolacer .elementor .boton-principal::before {
    background: var(--Aligner-Lacer);
}
.marca-lacer-aligner .loh-asociados .buy-button svg path,
.marca-ortolacer .loh-asociados .buy-button svg path {
    fill: var(--Aligner-Lacer);
}
/* --Sensi-Lacer */
.marca-sensilacer .elementor h1 strong,
.marca-sensilacer.single-productos .descripcion .destacada,
.marca-sensilacer .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-sensilacer .loh-video__titulo strong,
.marca-sensilacer .sabias .elementor-heading-title,
.marca-sensilacer .formatos .elementor-heading-title,
.marca-sensilacer .loh-asociados .buy-button:hover,
.marca-sensilacer .titulo-beneficios h2 strong,
.marca-sensilacer .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Sensi-Lacer);
}
.marca-sensilacer .elementor .boton-principal {
    color: var(--Sensi-Lacer);
    border-color: var(--Sensi-Lacer);
}
.marca-sensilacer .elementor .prod-caracteristicas,
.marca-sensilacer .elementor .boton-principal::before {
    background: var(--Sensi-Lacer);
}
.marca-sensilacer .loh-asociados .buy-button svg path {
    fill: var(--Sensi-Lacer);
}
/* --Xero-Lacer */
.marca-xerolacer .elementor h1 strong,
.marca-xerolacer.single-productos .descripcion .destacada,
.marca-xerolacer .elementor .hero-producto .elementor-widget-text-editor strong,
.marca-xerolacer .loh-video__titulo strong,
.marca-xerolacer .sabias .elementor-heading-title,
.marca-xerolacer .formatos .elementor-heading-title,
.marca-xerolacer .loh-asociados .buy-button:hover,
.marca-xerolacer .titulo-beneficios h2 strong,
.marca-xerolacer .asociados .elementor-widget-heading:nth-child(3) h3 {
    color: var(--Xero-Lacer);
}
.marca-xerolacer .elementor .boton-principal {
    color: var(--Xero-Lacer);
    border-color: var(--Xero-Lacer);
}
.marca-xerolacer .elementor .prod-caracteristicas,
.marca-xerolacer .elementor .boton-principal::before {
    background: var(--Xero-Lacer);
}
.marca-xerolacer .loh-asociados .buy-button svg path {
    fill: var(--Xero-Lacer);
}

/* ── [loh_video] ─────────────────────────────────────────────────── */
.loh-video__contenido {
    display: flex;
    height: 640px;
    background: #fff;
}
@media (max-width: 1024px) {
    .loh-video__contenido {
        padding-bottom: 40px;
    }
}
.loh-video__information {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loh-video__texto {
    text-align: center;
    width: 90%;
}
.loh-video__titulo {
    font-size: 3rem;
    line-height: 1;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
}
.loh-video__responsive { display: none; }
.loh-video__invideo {
    flex: 0 0 600px;
    padding: 20px;
}
.loh-video__invideo iframe,
.loh-video__responsive iframe { width: 100%; height: 100%; border: 0; }
.loh-video__instrucciones {
    color: #fff;
    font-size: 1.14rem;
    line-height: 1.43rem;
    text-align: right;
    padding-top: 20px;
}

@media (max-width: 1200px) {
    .loh-video__contenido { height: auto; flex-direction: column; }
    .loh-video__invideo { display: none; }
    .loh-video__responsive { display: inline-block; width: 400px; height: 400px; margin-top: 40px; }
}
@media (max-width: 730px) {
    .loh-video__titulo { font-size: 1.64rem; line-height: 1.4; padding: 40px 5%; }
    .loh-video__responsive { width: 90%; height: auto; aspect-ratio: 1 / 1; margin: 0 auto 15px; }
}

/* Modificador [loh_video sin_texto="1"]: producto puntual (LacerBlanc White Flash
   Kit) sin el panel de texto — el vídeo pasa a ocupar el 100% del ancho de la
   caja blanca en vez del layout a dos columnas por defecto. No afecta a ningún
   otro producto: solo aplica cuando el shortcode recibe el atributo. */
.loh-video__contenido--sin-texto .loh-video__invideo {
    flex: 1 1 100%;
}
@media (max-width: 1200px) {
    .loh-video__contenido--sin-texto .loh-video__invideo {
        display: block;
    }
    .loh-video__contenido--sin-texto .loh-video__responsive {
        display: none;
    }
}

/* ── [loh_productos_asociados] ──────────────────────────────────────── */
.loh-asociados {
    --loh-asoc-w: 240px;
    --loh-asoc-gap: 42px;
    position: relative;
}
.loh-asociados__stage {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.loh-asociados__viewport {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}
.loh-asociados__track {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease;
    will-change: transform;
}
.loh-asociados__item {
    flex: 0 0 var(--loh-asoc-w);
    width: var(--loh-asoc-w);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
}
.loh-asociados__enlace {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    gap: 15px;
}
.loh-asociados__imagen {
    width: 100%;
}
.loh-asociados__imagen .loh-asociados__img {
    width: 100%;
    height: auto;
    display: block;
}
/* Arrows */
.loh-asociados__arrow {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--loh-arrow-bg, #222);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.loh-asociados__arrow--prev svg {
    transform: rotate(180deg);
}
.loh-asociados__arrow.is-disabled {
    opacity: 0.25;
    pointer-events: none;
}
.loh-asociados[data-fits="1"] .loh-asociados__arrow {
    display: none;
}
.loh-asociados[data-fits="1"] .loh-asociados__track {
    justify-content: center;
}
/* Dots */
.loh-asociados__dots {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 16px;
}
.loh-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background 0.2s;
}
.loh-slider-dot.is-active {
    background: var(--Black, #000);
}
.single-productos .elementor .loh-asociados .boton-principal {
    font-size: 18px;
    padding-inline: 12px;
    min-width: 100%;
}
/* Buy button — reset estilos browser/Elementor + estilos propios */
.loh-asociados .buy-button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    outline: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    margin-left: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    align-self: flex-end;
    color: #000;
}
.loh-asociados .buy-button svg {
    width: 5px;
    height: 8px;
    margin-top: 3px;
}
/* Desktop ≥768px: fila única, máximo 3 ítems, sin slider */
@media (min-width: 768px) {
    .loh-asociados__arrow { display: none; }
    .loh-asociados__dots { display: none; }
    .loh-asociados__stage { gap: 0; }
    .loh-asociados__viewport { overflow: visible; }
    .loh-asociados__track {
        transform: none !important;
        justify-content: center;
        flex-wrap: nowrap;
        gap: var(--loh-asoc-gap);
    }
    .loh-asociados__item {
        flex: 1 1 0;
        max-width: calc((100% - var(--loh-asoc-gap) * 2) / 3);
        width: auto;
    }
}

/* Modificador .loh-prodmarca: grid wrap (marca + asociados producto).
 * Tablet 2 col / desktop 3 col. Gap/center = look live de marca. */
.loh-prodmarca {
    width: 100%;
}

@media (min-width: 768px) {
    .loh-prodmarca .loh-asociados__track {
        flex-wrap: wrap;
        justify-content: center;
        gap: 23px;
        transform: none !important;
    }
    .loh-prodmarca .loh-asociados__item {
        flex: 0 0 calc((100% - 23px) / 2);
        max-width: calc((100% - 23px) / 2);
        width: auto;
    }
}

@media (min-width: 1025px) {
    .loh-prodmarca .loh-asociados__item {
        flex: 0 0 calc((100% - 23px * 2) / 3);
        max-width: calc((100% - 23px * 2) / 3);
    }
}


/* ── [blog archive] ──────────────────────────────────────────────────── */
/*
 * Los selectores de Elementor para este widget usan 4 clases:
 *   .elementor-245963 .elementor-element.elementor-element-7ebf5cf .elementor-posts-container .elementor-post__thumbnail
 * Para ganarles en especificidad usamos los mismos IDs de plantilla y widget.
 * IDs estables: 245963 = post de la plantilla "Archivo Blog - OralHealth"
 *               7ebf5cf = ID del widget Archive Posts dentro de esa plantilla
 */

/* --- Título del blog --- */
.elementor-location-archive .elementor-widget-archive-title .elementor-heading-title {
    font-family: DIN, sans-serif;
    font-weight: 700;
    font-size: 1.71rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #000;
}

/* --- Cards: layout horizontal (imagen izq + texto der) --- */

/* 1. La card pasa a flex row */
.elementor-245963 .elementor-element-7ebf5cf .elementor-post__card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    background: #fff;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: hidden;
    gap: 0;
}

/* 2. El link de la imagen: 187×243px fijos (portrait, dimensiones del origen) */
.elementor-245963 .elementor-element.elementor-element-7ebf5cf .elementor-post__thumbnail__link {
    flex: 0 0 186px !important;
    width: 186px !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    aspect-ratio: 0.77;
}

/* 3. El thumbnail: resetea el padding-bottom trick de Elementor, llena el link */
.elementor-245963 .elementor-element.elementor-element-7ebf5cf .elementor-post__card .elementor-post__thumbnail {
    padding-bottom: 0 !important;
    width: 100%;
    height: 100%;
}

/* 4. La imagen: cubre el contenedor */
.elementor-245963 .elementor-element.elementor-element-7ebf5cf .elementor-post__card .elementor-post__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* 5. El bloque de texto: flex, resetea margin-top que pone Elementor */
.elementor-245963 .elementor-element.elementor-element-7ebf5cf .elementor-post__text {
    flex: 1 !important;
    padding: 20px 24px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0 !important;
    min-width: 0;
}

/* --- Tipografía de las cards --- */

.elementor-245963 .elementor-element-7ebf5cf .elementor-post__title {
    font-family: DIN, sans-serif;
    font-weight: 700;
    font-size: 1.38rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-bottom: 10px;
}
.elementor-245963 .elementor-element-7ebf5cf .elementor-post__title a {
    color: #000;
    text-decoration: none;
}
.elementor-245963 .elementor-element-7ebf5cf .elementor-post__title a:hover {
    color: var(--Rojo-Lacer, #d0021b);
}

.elementor-245963 .elementor-element-7ebf5cf .elementor-post__excerpt {
    font-size: 0.86rem;
    line-height: 1.5;
    color: #333;
    margin-bottom: 12px;
}
.elementor-245963 .elementor-element-7ebf5cf .elementor-post__excerpt p {
    margin: 0;
}

.elementor-245963 .elementor-element-7ebf5cf .elementor-post__read-more {
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-top: auto;
    text-transform: capitalize;
    font-weight: 400;
    color: black;
    margin-bottom: 0;
}
.elementor-245963 .elementor-element-7ebf5cf .elementor-post__read-more:hover {
    text-decoration: underline;
}

/* --- Botón "Cargar más artículos" ---
   Solo fuente y formato — sin tocar background, color ni decoration */
.elementor-245963 .elementor-element-7ebf5cf .elementor-button {
    font-family: DIN, sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

/* --- Mobile: vuelve a layout vertical --- */
@media (max-width: 767px) {
    .elementor-245963 .elementor-element-7ebf5cf .elementor-post__card {
        flex-direction: column !important;
    }
    .elementor-245963 .elementor-element.elementor-element-7ebf5cf .elementor-post__thumbnail__link {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 200px !important;
    }
}

/* ── [blog archive — filtro de categorías] ───────────────────────────── */
.loh-blog-filter {
    font-family: DIN, sans-serif;
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #000;
    display: block;
    user-select: none;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 30px;
}
.loh-blog-filter__toggle {
    font-size: 14px;
    cursor: pointer;
    display: block;
    width: 100%;
    font-weight: 400;
    padding-top: 12px;
    padding-bottom: 10px;
    position: relative;
}
.loh-blog-filter__arrow {
    display: inline-block;
    position: relative;
    top: 2px;
    transition: transform 0.2s ease;
    line-height: 1;
}
.loh-blog-filter.is-open .loh-blog-filter__arrow {
    transform: rotate(180deg);
}
.loh-blog-filter .loh-blog-filter__arrow svg {
    transform: rotate(90deg);
    width: 6px;
    margin-left: 3px;
}
.loh-blog-filter.is-open .loh-blog-filter__arrow svg {
    transform: rotate(270deg);
}
.loh-blog-filter__dropdown {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.4s ease;
}
.loh-blog-filter.is-open .loh-blog-filter__dropdown {
    grid-template-rows: 1fr;
}
.loh-blog-filter__dropdown-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, padding 0.4s ease;
}
.loh-blog-filter.is-open .loh-blog-filter__dropdown-inner {
    padding: 20px 24px;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.35s ease 0.08s, padding 0.4s ease;
}
.loh-blog-filter__columns {
    display: flex;
    align-items: flex-start;
    gap: 8px 16px;
}
.loh-blog-filter__column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.loh-blog-filter__dropdown a {
    font-family: DIN, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    white-space: normal;
    line-height: 1.25;
    min-width: 0;
    padding: 2px 0;
}
.loh-blog-filter__dropdown a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    flex-shrink: 0;
    margin-top: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15'%3E%3Cpath fill='%23000' d='M4.366 7.51c0 1.427-1.853 3.593-3.73 5.093-.554.442-.831 1.133-.48 1.749.167.295.446.512.774.602.327.09.678.047.973-.122 2.46-1.39 4.562-3.333 6.14-5.676.375-.539.555-1.078.555-1.647-.002-.538-.163-1.064-.462-1.511C6.543 3.592 4.406 1.595 1.9.167 1.286-.181.506.033.156.645c-.35.616-.074 1.306.479 1.748 1.937 1.555 3.73 3.647 3.73 5.116z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}
.loh-blog-filter__dropdown a:hover {
    color: var(--Rojo-Lacer, #d0021b);
}
.loh-blog-filter__dropdown a.current-cat {
    font-weight: 700;
}

@media (min-width: 768px) {
    .loh-blog-filter__columns {
        gap: 8px 16px;
    }
    .loh-blog-filter__column {
        gap: 8px;
    }
    .loh-blog-filter__dropdown a {
        white-space: nowrap;
        align-items: center;
        line-height: 1;
    }
    .loh-blog-filter__dropdown a::before {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .loh-blog-filter__dropdown-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .loh-blog-filter.is-open .loh-blog-filter__dropdown-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .loh-blog-filter__columns {
        display: block;
        columns: 2;
        column-gap: 12px;
    }
    .loh-blog-filter__column {
        display: contents;
    }
    .loh-blog-filter__dropdown a {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin-bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loh-blog-filter__dropdown,
    .loh-blog-filter__dropdown-inner {
        transition: none;
    }
}

/* Producto Volver a marca */
.elementor-shortcode .loh-volver-marca {
    font-weight: 400;
    font-size: 18px;
    text-decoration: underline;
    color: var(--Rojo-Lacer) !important;
}
.elementor-shortcode .loh-volver-marca:hover {
    text-decoration: none;
}
.elementor-shortcode .loh-volver-marca svg {
    transform: rotate(-180deg);
    width: 6px;
    height: 10px;
    margin-right: 9px;
    display: block;
    float: left;
    margin-top: 8px;
}

/* Producto — tamaño de imagen del hero por tipo_producto
 * La clase de tipo la inyecta [loh_clase_tipo_producto] sobre el contenedor .img-producto.
 * Solo se conserva ancho/alto del tema antiguo (el posicionamiento right/bottom lo
 * gestiona el layout de Elementor). El <img> hereda el límite del contenedor. */
.productos-template-default .img-producto.pastas {
    max-width: 704px !important;
    max-height: 355px;
}
.productos-template-default .img-producto.pastas_anchas {
    max-width: 635px !important;
    max-height: 368px;
}
.productos-template-default .img-producto.cuadrado {
    max-width: 450px !important;
    max-height: 450px;
}
.productos-template-default .img-producto.colutorios {
    max-width: 400px !important;
    max-height: 512px;
}
.productos-template-default .img-producto.cepillos {
    max-width: 238px !important;
    max-height: 520px;
}
.productos-template-default .img-producto.bodegones {
    max-width: 552px !important;
    max-height: 450px;
}
.productos-template-default .img-producto img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

/* ── [loh_archivo_productos] — archivo categoria_producto / soluciones ── */
.loh-archivo {
    width: 100%;
}
.loh-archivo__title-wrap {
    margin: 32px 0 24px;
}
.loh-archivo .loh-archivo__title {
    margin: 0;
    font-size: 2.5rem;
    line-height: 1.1;
    text-transform: uppercase;
}
.loh-archivo .loh-archivo__count {
    font-weight: 400;
    font-size: 1.25rem;
    color: #9b9b9b;
    text-transform: capitalize;
}
.loh-archivo__texto {
    margin: 24px 0;
}
.loh-archivo__list {
    margin: 32px 0;
    transition: opacity 0.2s ease;
}
.loh-archivo__list.is-loading {
    opacity: 0.45;
    pointer-events: none;
}
.loh-archivo__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 24px;
}
.loh-archivo__item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    min-height: 100%;
}
.loh-archivo__marca {
    margin-bottom: 14px;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2px;
}
.loh-archivo__logo {
    max-width: 311px;
    max-height: 58px;
    width: auto;
    height: auto;
    display: block;
}
.loh-archivo__frase-gama {
    font-size: 0.875rem;
    line-height: 1.3;
    color: #9b9b9b;
    text-align: left;
}
.loh-archivo__card {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #f3f3f3;
    padding: 0;
    box-sizing: border-box;
}
.loh-archivo__imagen {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}
.loh-archivo__img {
    width: 100%;
    height: auto;
    display: block;
}
.loh-archivo__footer {
    width: 100%;
    margin-top: auto;
    padding: 14px 16px 16px;
    box-sizing: border-box;
}
.loh-archivo__titulo {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    text-align: left;
    line-height: 1.35;
}
.loh-archivo__buy {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.loh-archivo__buy .buy-button {
    margin-top: 0;
    margin-left: 0;
    flex-shrink: 0;
    align-self: center;
}
.loh-archivo__buy .buy-button:hover {
    color: var(--Rojo-Lacer) !important;
}
.loh-archivo__buy .buy-button svg path {
    fill: var(--Rojo-Lacer) !important;
}
.loh-archivo__cpsp {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    font-style: italic;
    text-align: left;
}
.loh-archivo__cpsp .loh-frase-cpsp {
    font-style: inherit;
}
.loh-archivo__no-results {
    margin: 16px 0;
    text-align: center;
}

/* Filtro taxonomía hermana (checkboxes, AJAX) — toggle igual que blog */
.loh-tax-filter {
    font-family: DIN, sans-serif;
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #000;
    display: block;
    user-select: none;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 30px;
}
.loh-tax-filter__toggle {
    font-size: 14px;
    cursor: pointer;
    display: block;
    width: 100%;
    font-weight: 400;
    padding-top: 12px;
    padding-bottom: 10px;
    position: relative;
}
.loh-tax-filter__arrow {
    display: inline-block;
    position: relative;
    top: 2px;
    line-height: 1;
}
.loh-tax-filter .loh-tax-filter__arrow svg {
    transform: rotate(90deg);
    width: 6px;
    margin-left: 3px;
    transition: transform 0.2s ease;
}
.loh-tax-filter.is-open .loh-tax-filter__arrow svg {
    transform: rotate(270deg);
}
.loh-tax-filter__dropdown {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.4s ease;
}
.loh-tax-filter.is-open .loh-tax-filter__dropdown {
    grid-template-rows: 1fr;
}
.loh-tax-filter__dropdown-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, padding 0.4s ease;
}
.loh-tax-filter.is-open .loh-tax-filter__dropdown-inner {
    padding: 20px 24px;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.35s ease 0.08s, padding 0.4s ease;
}
.loh-tax-filter__list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.loh-tax-filter__item {
    margin: 0;
    min-width: 0;
}
.loh-tax-filter__label {
    font-family: DIN, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    color: #000;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    white-space: normal;
    line-height: 1.25;
    min-width: 0;
    padding: 2px 0;
}
.loh-tax-filter__label:hover .loh-tax-filter__name {
    color: var(--Rojo-Lacer, #d0021b);
}
.loh-tax-filter__checkbox {
    margin: 3px 0 0;
    flex-shrink: 0;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: #000;
}
.loh-tax-filter__name {
    font-weight: 400;
}
.loh-tax-filter__checkbox:checked + .loh-tax-filter__name {
    font-weight: 700;
}
.loh-tax-filter__clear {
    font-family: DIN, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.03em;
    background: none !important;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    color: #000;
}
.loh-archivo .loh-tax-filter__clear:hover {
    text-decoration: underline !important;
    color: var(--Rojo-Lacer, #d0021b);
    background: none !important;
}

@media (min-width: 768px) {
    .loh-tax-filter__label {
        white-space: nowrap;
        align-items: center;
        line-height: 1;
    }
    .loh-tax-filter__checkbox {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .loh-tax-filter__dropdown-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .loh-tax-filter.is-open .loh-tax-filter__dropdown-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .loh-tax-filter__list {
        display: block;
        columns: 2;
        column-gap: 12px;
    }
    .loh-tax-filter__item {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin-bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loh-tax-filter__dropdown,
    .loh-tax-filter__dropdown-inner {
        transition: none;
    }
}

@media (max-width: 1024px) {
    .loh-archivo__items {
        grid-template-columns: repeat(2, 1fr);
    }
    .archive .hero-cat-prod {
        display: none;
    }
    .loh-archivo .loh-archivo__title {
        font-size: 2rem;
        display: flex;
        gap: 8px;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .loh-archivo__items {
        grid-template-columns: 1fr;
    }
    .loh-archivo__buy {
        flex-direction: column;
        align-items: flex-start;
    }
    .loh-archivo__buy .buy-button {
        align-self: flex-end;
    }
}

.loh-frase-cpsp.loh-frase-cpsp--soluciones,
.cpsp {
    font-size: 0.75rem;
    text-align: center;
    font-style: normal;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* CPSP en cards de [loh_productos_marca] y [loh_productos_asociados] — clase literal .cpsp (excepción BEM intencional) */
.cpsp {
    margin-top: 12px;
}

.cajita-mapa {
    display: flex;
    flex-direction: column;
}
.cajita-mapa .cerrar {
    align-self: flex-end;
}

/* ============================================================
   Mapa "Encuéntranos por todo el mundo" — listado de países
   Generado por js/loh-mapa-click.js bajo .map_wrapper.
   Solo visible en móvil (≤768px); en desktop los popups se
   abren clicando los puntos del mapa.
   ============================================================ */
.loh-mapa-lista {
    display: none;
}

@media (max-width: 768px) {
    .loh-mapa-lista {
        display: block;
        columns: 2;
        column-gap: 16px;
        padding: 24px 16px;
    }

    /* button.loh-… : especificidad por encima del reset de botones
       del kit de Elementor (.elementor-kit-N button) */
    .loh-mapa-lista button.loh-mapa-lista__item {
        display: block;
        width: 100%;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 10px 0;
        font-family: inherit;
        font-size: 17px;
        font-weight: 400;
        line-height: 1.3;
        color: inherit;
        text-align: center;
        white-space: normal;
        cursor: pointer;
        break-inside: avoid;
    }

    .loh-mapa-lista button.loh-mapa-lista__item:hover,
    .loh-mapa-lista button.loh-mapa-lista__item:focus {
        background: transparent;
        color: var(--Rojo-Lacer, #d0021b);
    }

    .loh-mapa-lista button.loh-mapa-lista__item.is-active {
        color: var(--Rojo-Lacer, #d0021b);
        font-weight: 700;
    }
}
/* Página Compra — [loh_compra_productos]: doble filtro + banners de marca */
.loh-compra .loh-compra__filter {
    margin-bottom: 0;
    border-bottom: 0;
}
.loh-compra .loh-compra__filter[data-loh-compra-filter="soluciones"] {
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 30px;
}

/* Banner de marca: ocupa un slot del grid, imagen a sangre enlazada a la marca */
.loh-compra__banner {
    box-sizing: border-box;
    display: flex;
    align-self: stretch;
    min-height: 100%;
}
.loh-compra__link {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 280px;
}
.loh-compra__img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
}

/* ─── Menú mobile: overlay a pantalla completa (paridad con Origen) ──────────
   El widget Nav Menu / Mega Menu de Elementor Pro no tiene modo "full screen"
   nativo en mobile: abre como dropdown en flujo. El posicionamiento real
   (top/left/width/height del overlay) se hace en JS —
   `js/loh-menu-mobile-overlay.js` — porque Elementor Pro gestiona ese dropdown
   con su propio motor (custom properties + un ajuste fino adicional) que una
   regla CSS, incluso con !important, no consigue ganar de forma fiable
   (confirmado en vivo contra Destino). Solo el scroll-lock del body queda en
   CSS puro (no hace falta JS para eso). Detalle completo en tasks/lessons.md.

   Scroll-lock del body mientras el menú mobile está abierto. :has() tiene
   soporte universal en navegadores evergreen desde 2023 — no hace falta JS
   para esto (menor superficie, nada que mantener sincronizado a mano). */
body:has(.e-n-menu-toggle[aria-expanded="true"]) {
    overflow: hidden;
}

/* ─── "PRODUCTOS" en el menú mobile: tabs deslizantes (paridad con Origen) ───
   En Origen, el submenú "Productos" no es un acordeón simple: despliega tabs
   (Marcas/Categorías/Soluciones) que deslizan contenido distinto (JS propio
   de origen: showSubMenuMobile()/moveProductosContextual() en lacer.js). No
   existe un equivalente configurable en el editor de Elementor para esto.
   js/loh-menu-productos-tabs.js decora las columnas que Elementor ya renderiza
   (MARCAS/CATEGORÍAS/SOLUCIONES) con cabeceras de tab + esta capa visual; el
   acordeón que las contiene lo sigue abriendo/cerrando Elementor, sin tocar.
   Se auto-limita a items con 2+ columnas: hoy solo aplica a "Productos"
   ("Salud Oral" tiene una sola columna y se ignora automáticamente). */
.loh-menu-tabs-header {
    display: flex;
    position: relative;
}
.loh-menu-tabs-tab {
    flex: 1 1 0;
    background: none;
    border: 0;
    padding: 10px 4px;
    font: inherit;
    text-align: center;
    cursor: pointer;
    color: #b9b9b9; /* coincide con Origen (tab inactiva) */
    -webkit-tap-highlight-color: transparent; /* si no, el navegador pinta un recuadro de color al tocar en móvil */
}
.loh-menu-tabs-tab:focus {
    outline: none;
}
/* Dos resets distintos pintaban este botón de rosa al tocar en móvil, y hay
   que anular los tres estados explícitamente (más específicos que sus
   selectores por tag/atributo, así que ganan sin necesitar !important):
   1) reset.css ([type="button"]:focus, button:hover) — fondo #c36 + blanco.
      El botón lleva type="button", así que el selector por atributo aplica.
      Un click dejaba el botón en :focus (foco nativo del navegador al
      clicar un <button>), y ahí se veía el rosa aunque :hover/:active ya
      estuvieran cubiertos.
   2) el kit de Elementor, background-color en :active (rgba(204,51,102,.98)).
   En móvil, tocar deja el botón en :hover "pegado" hasta el siguiente tap en
   otro punto (no hay mouseleave real), por eso :hover importa tanto como
   :active/:focus aquí. */
.loh-menu-tabs-tab:hover,
.loh-menu-tabs-tab:focus,
.loh-menu-tabs-tab:active {
    background: none;
    text-decoration: none;
}
.loh-menu-tabs-tab:hover,
.loh-menu-tabs-tab:focus {
    color: #b9b9b9;
}
.loh-menu-tabs-tab[aria-selected="true"]:hover,
.loh-menu-tabs-tab[aria-selected="true"]:focus {
    color: #636066;
}
.loh-menu-tabs-tab[aria-selected="true"] {
    color: #636066; /* coincide con Origen (tab activa) */
    font-weight: 600;
}
/* Ancho/posición en % sobre el nº de tabs (--loh-tab-count) y el índice activo
   (--loh-tab-active-index, ambos puestos por JS): no depende de medir
   offsetWidth/offsetLeft, así que funciona aunque el indicador se posicione
   por primera vez con el acordeón todavía cerrado (oculto). */
.loh-menu-tabs-indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% / var(--loh-tab-count, 1));
    height: 2px;
    background: currentColor;
    transform: translateX(calc(100% * var(--loh-tab-active-index, 0)));
    transition: transform .25s ease;
}
@media (max-width: 1024px) {
    .loh-menu-tabs-header {
        border-bottom: 1px solid rgba(0, 0, 0, .08);
        margin-bottom: 10px;
    }
    /* Tamaño de las tabs (Marcas/Categorías/Soluciones) igualado a Origen. */
    .elementor-location-header .e-n-menu-layout-horizontal.elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-content>.e-con {
        margin-block-start: 0;
        padding: 0;
    }
    .loh-menu-tabs-tab {
        font-size: 14.85px;
    }
    .loh-menu-tabs-viewport {
        position: relative;
        overflow: hidden;
    }
    .loh-menu-tabs-viewport .elementor-spacer {
        display: none;
    }
    .loh-menu-tabs-viewport > .e-con-full.e-con.e-child {
        position: absolute;
        inset: 0;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s ease;
    }
    .loh-menu-tabs-viewport > .e-con-full.e-con.e-child.loh-tab-active {
        position: relative;
        transform: translateX(0);
        visibility: visible;
        /* La columna trae align-items:flex-start (pensado para el layout de
           escritorio, donde cada columna es angosta): sin stretch, el widget
           de la lista queda del ancho de su contenido y pegado a la
           izquierda, y el text-align:center de más abajo centra el texto
           DENTRO de esa caja angosta, no dentro del panel — se ve
           descentrado. */
        align-items: stretch;
    }
    .loh-menu-tabs-viewport > .e-con-full.e-con.e-child.loh-tab-before {
        transform: translateX(-100%);
    }
    /* Elementor fija un `height` en px por JS (inline, en el contenedor del
       acordeón `#e-n-menu-content-...`) igualando el alto disponible del
       menú hasta el borde de la pantalla (no el alto real del contenido) y
       le pone su propio `overflow-y: scroll`. Con las columnas normales
       (sin JS de tabs) el contenido nunca desborda ese scroll porque
       Elementor gestiona el acordeón contando con esa métrica; con estas
       tabs, la columna activa usa `position: absolute` dentro de
       `.loh-menu-tabs-viewport` (arriba) para poder deslizar entre
       columnas, así que nunca "empuja" la altura de su contenedor — el
       acordeón cree que el contenido mide justo esos px fijos y lo recorta
       en la 1ª carga (confirmado en vivo: contenido real ~710px vs.
       `height: 388px` fijo por Elementor). Fix: ignorar esa altura fija en
       el acordeón activo y dejar que mida su contenido real; el scroll para
       ver el listado completo lo sigue gestionando `.e-n-menu-wrapper`
       (nivel superior, ya tiene su propio `overflow-y: auto` sin tocar). */
    .e-n-menu-content.e-active > [id^="e-n-menu-content-"] {
        height: auto !important;
        overflow: visible !important;
    }
}
/* En desktop, el mega-menu ya muestra las columnas lado a lado (comportamiento
   nativo de Elementor sin cambios): ocultamos solo la cabecera de tabs. */
@media (min-width: 1025px) {
    .loh-menu-tabs-header {
        display: none;
    }
}

/* ─── Menú mobile: tamaño de texto y detalles igualados a Origen ───────────── */
@media (max-width: 1024px) {
    /* Items de primer nivel (Elige Lacer/Productos/Salud Oral/Blog/...): en
       Origen miden 22px; el widget de Elementor los trae más pequeños. */
    .e-n-menu-wrapper .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title .e-n-menu-title-text {
        font-size: 22px;
    }
    /* Listados dentro del contenido del mega-menu (columnas de "Productos" y
       la de "Salud Oral"): en Origen miden ~18.8px. */
    .e-n-menu-wrapper .e-n-menu-content .elementor-widget-text-editor ul li a {
        font-size: 18.81px;
    }
    /* La altura fija de esta regla (style.css:220, pensada para el hover del
       mega-menu de escritorio, donde el texto nunca envuelve) hace que un
       ítem de 2 líneas (ej. "Cuidado bucodental infantil y júnior") se
       superponga con el siguiente — confirmado en vivo. En mobile el ancho
       de columna es menor y el texto sí puede envolver. */
    .e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul li a {
        height: auto;
        min-height: 26px;
    }
    /* "COMPRA" ya trae fondo/radio de botón propios (configurado en el
       editor); solo hace falta que no se estire a todo el ancho, como en
       Origen (pill centrado, no barra completa). */
    #btn-compra {
        width: fit-content;
        margin: 0 auto;
    }

    /* Estado inicial (nada desplegado): la lista de primer nivel se centra
       verticalmente en el espacio disponible, como en Origen. En cuanto se
       despliega "Productos"/"Salud Oral" se vuelve a un flujo normal (arriba)
       — con contenido largo, centrar verticalmente lo cortaría por arriba. */
    .e-n-menu-wrapper:not(:has(.e-n-menu-dropdown-icon[aria-expanded="true"])) {
        justify-content: center;
    }

    /* Contenido de cualquier item desplegado (Productos y Salud Oral): fondo
       rojo + texto blanco centrado, paridad con Origen. `.e-con-inner` es el
       área de contenido en sí (excluye la cabecera de tabs, que en Productos
       se inserta como hermana de `.e-con-inner`, no dentro). */
    .e-n-menu-heading .e-n-menu-content.e-active .e-con-inner {
        background: #d12421;
    }
    /* El propio contenedor .e-active trae, por defecto, margin-top y
       padding lateral (heredados del Container de Elementor, configurados
       en el editor para el layout general del mega-menu) que en Origen no
       existen: el panel rojo queda con un hueco blanco arriba y a los
       lados en vez de llegar a los bordes. Confirmado en vivo — no hay
       ninguna regla en este archivo fijando esos valores, así que ganan
       sin necesitar !important. */
    .e-n-menu-heading .e-n-menu-content.e-active {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* El widget de texto con el <ul> no ocupa el 100% del ancho de su
       columna por defecto (es un hijo flex sin flex-grow): aunque el <ul>
       tenga text-align:center, el bloque completo queda pegado a la
       izquierda dentro del panel rojo — más visible en "Salud Oral" (una
       sola columna, sin las tabs de "Productos" que ya fuerzan
       align-items:stretch en su viewport). Confirmado en vivo. */
    .e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor:has(ul) {
        width: 100%;
    }
    .e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul {
        text-align: center;
        width: 100%;
        /* Este padding reservaba espacio para la flechita ::before (oculta
           abajo); sin ella, solo desplazaba la lista hacia la izquierda en
           vez de quedar centrada dentro del panel rojo. */
        padding-inline-start: 0;
    }
    .e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul li::before {
        display: none;
    }
    .e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor ul li a {
        color: #fff;
        /* Espaciado vertical entre items: por defecto solo separa el
           line-height (~26px), sin ningún hueco real entre enlaces — se ven
           muy pegados frente a Origen. Padding en el <a> (no margin en el
           <li>) para que el área clicable crezca también, más cómodo en
           mobile. Confirmado en vivo contra la referencia de producción. */
        display: block;
        padding: 6px 0;
    }

    /* Heading/divisor duplicado dentro de CUALQUIER item desplegado
       ("Productos": la cabecera de tabs ya muestra Marcas/Categorías/
       Soluciones; "Salud Oral": el propio acordeón ya muestra su título) —
       se oculta para no repetirlo, igual que Origen. Solo en mobile: en
       desktop el mega-menu de escritorio sí necesita este heading. */
    .e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-divider {
        display: none;
    }
    .e-n-menu-heading .e-n-menu-content.e-active .elementor-widget-text-editor:not(:has(ul)) {
        display: none;
    }
}


/* -------------------------------------------------------------------------
 * [loh_resultados_busqueda] — Resultados de Búsqueda (?s=...): dos secciones
 * "PRODUCTOS" (carrusel, motor compartido loh_shared_slider_js()) / "BLOG"
 * (grid clásico), paridad tipográfica con Origen (ver docs build-spec §2.2b
 * y tasks/lessons.md — valores tomados de wp-content/themes/lacer/style.css
 * de Origen, `.search .site-main h1/.lista_blogs/.lista_productos`, con su
 * html{font-size:14px} ya convertido a px absolutos; DIN/--Black ya son la
 * convención de fuente/color de este child theme, no de Origen).
 * ---------------------------------------------------------------------- */

.loh-resultados-busqueda {
    display: flex;
    flex-direction: column;
}

.loh-resultados-busqueda__titulo {
    font-family: DIN, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 39px;
    text-transform: uppercase;
    color: var(--Black);
    width: 100%;
    margin: 60px 0 55px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e2e2e2;
}

.loh-resultados-busqueda__contador {
    display: inline-block;
    margin-left: 10px;
    font-family: DIN, sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-transform: lowercase;
    color: #9b9b9b;
}

@media (max-width: 730px) {
    .loh-resultados-busqueda__contador {
        display: block;
        margin-left: 0;
    }
}

.loh-resultados-busqueda__sin-resultados {
    font-family: DIN, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 40px;
    text-transform: uppercase;
    color: var(--Black);
    margin: 0 0 55px;
    padding-bottom: 18px;
}

/* --- PRODUCTOS: carrusel --- */

.loh-resultados-busqueda__carousel {
    --loh-resultados-item-w: 320px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 415px) {
    .loh-resultados-busqueda__carousel {
        --loh-resultados-item-w: 240px;
    }
}

.loh-resultados-busqueda__viewport {
    overflow: hidden;
    flex: 1 1 auto;
}

.loh-resultados-busqueda__track {
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.5s ease;
    will-change: transform;
}

.loh-resultados-busqueda__item {
    flex: 0 0 var(--loh-resultados-item-w);
    width: var(--loh-resultados-item-w);
    box-sizing: border-box;
    padding-bottom: 40px;
}

.loh-resultados-busqueda__producto-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.loh-resultados-busqueda__producto-imagen {
    display: block;
    width: 93%;
    max-width: 340px;
    margin: 0 auto;
    padding-top: 7px;
}

.loh-resultados-busqueda__imagen {
    display: block;
    width: 100%;
    height: auto;
}

.loh-resultados-busqueda__producto-nombre {
    position: relative;
    z-index: 1;
    display: block;
    width: 80%;
    max-width: 300px;
    margin-top: 20px;
    padding: 11px 0;
    border-top: 1px solid var(--Black);
    border-bottom: 1px solid var(--Black);
    font-family: DIN, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    text-transform: uppercase;
    text-align: center;
    color: var(--Black);
    transition: color 0.3s ease-out;
}

/* Rollover: mismo patrón "sweep" (fondo negro sube desde abajo) que .boton-principal
   ya usa en el resto del tema; redefinido aquí porque ese selector está scoped a
   contextos marca/tax-* que no aplican en Resultados de Búsqueda. */
.loh-resultados-busqueda__producto-nombre::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: #000;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.3s ease-out;
}

.loh-resultados-busqueda__producto-link:is(:hover, :focus, :active) .loh-resultados-busqueda__producto-nombre {
    color: #fff;
}

.loh-resultados-busqueda__producto-link:is(:hover, :focus, :active) .loh-resultados-busqueda__producto-nombre::before {
    transform: scaleY(1);
}

.loh-resultados-busqueda__arrow {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    color: var(--Black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.5s;
}

.loh-resultados-busqueda__arrow:hover {
    background: rgba(0, 0, 0, 0.15);
}

.loh-resultados-busqueda__arrow--prev svg {
    transform: rotate(180deg);
}

.loh-resultados-busqueda__arrow.is-disabled {
    opacity: 0.25;
    pointer-events: none;
}

.loh-resultados-busqueda__carousel[data-fits="1"] .loh-resultados-busqueda__arrow {
    display: none;
}

.loh-resultados-busqueda__carousel[data-fits="1"] .loh-resultados-busqueda__track {
    justify-content: center;
}

@media (max-width: 1400px) {
    .loh-resultados-busqueda__arrow {
        width: 40px;
        height: 40px;
    }
}

/* --- BLOG: grid 2 columnas --- */

.loh-resultados-busqueda__blog-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
    row-gap: 36px;
}

@media (max-width: 1024px) {
    .loh-resultados-busqueda__blog-lista {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }
}

.loh-resultados-busqueda__blog-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: #f3f3f3;
}

@media (max-width: 730px) {
    .loh-resultados-busqueda__blog-item {
        flex-direction: column;
    }
}

.loh-resultados-busqueda__blog-imagen {
    display: block;
    flex: 0 0 187px;
    width: 187px;
    min-height: 243px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.5s;
}

.loh-resultados-busqueda__blog-imagen:hover {
    opacity: 0.6;
}

@media (max-width: 730px) {
    .loh-resultados-busqueda__blog-imagen {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

.loh-resultados-busqueda__blog-contenido {
    flex: 1 1 auto;
    margin-left: 30px;
    padding-bottom: 20px;
}

@media (max-width: 730px) {
    .loh-resultados-busqueda__blog-contenido {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 30px;
    }
}

.loh-resultados-busqueda__blog-titulo {
    font-family: DIN, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 23px;
    text-transform: uppercase;
    width: 90%;
    margin: 20px 0 0;
}

.loh-resultados-busqueda__blog-titulo a {
    color: inherit;
    text-decoration: none;
}

.loh-resultados-busqueda__blog-extracto {
    width: 90%;
    font-size: 14px;
    line-height: 17px;
    margin-top: 10px;
}

.loh-resultados-busqueda__blog-extracto p + p {
    margin-top: 10px;
}

@media (max-width: 730px) {
    .loh-resultados-busqueda__blog-extracto {
        width: 100%;
    }
}

.loh-resultados-busqueda__blog-leer-mas {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Header: selector de idiomas WPML (clase ".idiomas-header" puesta en el
 * widget desde el editor de Elementor) + rollover de los iconos junto a él
 * (globo "Lacer en el mundo" y lupa buscador). Agosto 2026.
 *
 * Estructura real del widget "WPML Language Switcher" (confirmada en vivo,
 * staging y producción):
 *   .idiomas-header
 *     .wpml-ls (wrapper)
 *       ul
 *         li.wpml-ls-item(-en|-es)[.wpml-ls-current-language]   ← activo
 *           a.wpml-ls-link
 *             span.wpml-ls-native                                ← texto completo
 *
 * Decisión (Nico, ago 2026): mostrar SOLO el idioma al que se puede cambiar
 * (no el activo) — a diferencia de producción, que muestra ambos (ES/EN).
 * Con ambos <li> presentes en el DOM (necesario: WPML no permite quitar el
 * idioma activo desde el editor sin tocar la config del widget), se oculta
 * el activo por CSS y solo queda visible+clicable el otro.
 * ------------------------------------------------------------------------ */

/* !important: el propio <li> activo lleva TAMBIÉN la clase .wpml-ls-item (que
   más abajo se pone en display:flex para el layout), así que sin !important
   esta regla y esa compiten con la misma especificidad y gana la que esté
   declarada después en la cascada — comprobado en vivo: sin !important el
   idioma activo seguía visible, apilado encima del otro. */
.idiomas-header .wpml-ls-current-language {
    display: none !important;
}

.idiomas-header .wpml-ls {
    display: flex;
}

.idiomas-header .wpml-ls-item {
    display: flex;
}

/* !important en background-color: Elementor imprime por cada página un
   bloque de CSS propio del widget con selector de mayor especificidad
   (".elementor-{id_pagina} .elementor-element-851e320 ... .wpml-ls-link",
   con el fondo en var(--e-global-color-secondary), gris oscuro) que carga
   después de este archivo — sin !important esa regla ganaba siempre,
   independientemente del estado del header (confirmado en vivo).

   Estado por defecto: fondo GRIS (paridad con el icono globo/lupa cuando el
   header tiene fondo sólido — toda página que no sea Home, y Home en
   scroll/collapsed). El pill pasa a BLANCO solo cuando el header está en su
   estado "top" transparente de Home (mismo condicional `body.home header`
   que ya usan los iconos, más arriba en este archivo). */
.idiomas-header .wpml-ls-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 23px;
    padding: 0 10px;
    border-radius: 13px;
    background-color: #666060 !important;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.idiomas-header .wpml-ls-link:hover {
    background-color: #4d4848 !important;
}

@media (min-width: 1025px) {
    body.home header .idiomas-header .wpml-ls-link {
        background-color: #fff !important;
    }

    body.home header .idiomas-header .wpml-ls-link:hover {
        background-color: #f2f2f2 !important;
    }

    body.home.scroll header .idiomas-header .wpml-ls-link,
    body.home header.collapsed .idiomas-header .wpml-ls-link {
        background-color: #666060 !important;
    }

    body.home.scroll header .idiomas-header .wpml-ls-link:hover,
    body.home header.collapsed .idiomas-header .wpml-ls-link:hover {
        background-color: #4d4848 !important;
    }
}

/* Texto corto (ENG/ES) en vez de "English"/"Español": WPML expone el nombre
   nativo completo en el DOM (span.wpml-ls-native) y no hay forma de acortarlo
   desde el editor sin tocar la traducción del propio widget (fuera del
   alcance de este archivo). Se oculta el texto real de forma accesible
   (screen-reader lo sigue leyendo) y se pinta el código de idioma corto con
   un pseudo-elemento, igual de accesible porque el <a> ya lleva
   hreflang/aria-label con el idioma destino. */
.idiomas-header .wpml-ls-native,
.idiomas-header .wpml-ls-display {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.idiomas-header li.wpml-ls-item-en .wpml-ls-link::after {
    content: "ENG";
}

.idiomas-header li.wpml-ls-item-es .wpml-ls-link::after {
    content: "ESP";
}

/* Color de texto por defecto: claro, para contraste sobre el pill gris
   (#666060, estado por defecto de arriba). En el estado pill-blanco de Home
   (header transparente en "top") se oscurece — ver @media más abajo —
   mismo criterio de contraste que el resto del bloque. */
.idiomas-header .wpml-ls-link::after {
    font-family: DIN, sans-serif;
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
}

@media (min-width: 1025px) {
    body.home header .idiomas-header .wpml-ls-link::after {
        color: #857D7D;
    }

    body.home.scroll header .idiomas-header .wpml-ls-link::after,
    body.home header.collapsed .idiomas-header .wpml-ls-link::after {
        color: #fff;
    }
}

/* ─── Mobile: alinear verticalmente los iconos globo/lupa con el pill de
   idiomas (misma fila del header) ───
   Causa raíz: la fila que contiene los 3 widgets (globo, lupa, selector de
   idiomas) usa `align-items: flex-end` (configurado en Elementor a nivel de
   fila) y el widget del selector de idiomas es intrínsecamente más alto
   (~38px, el `.wpml-ls` de WPML trae su propia caja) que el de los botones
   (~26.5px) — al alinearse ambos por su borde INFERIOR compartido, los
   iconos globo/lupa (26px, centrados dentro de sus ~26.5px) quedan ~6px más
   abajo que el centro real del pill de idiomas. Confirmado en vivo
   (capturas de Nico, ago 2026): los círculos globo/lupa se ven por debajo
   de "ENG". El pill de idiomas es la posición correcta a igualar (no al
   revés): un primer intento igualó la altura del widget de idiomas a la de
   los botones, pero eso desplazaba el pill hacia abajo en vez de subir los
   botones. Fix correcto: igualar la altura de los widgets de botón
   (globo/lupa) a la del widget del selector de idiomas (~38.33px, medido
   en vivo) y centrar el icono dentro de esa altura — así ambos wrappers
   comparten el mismo centro vertical dentro del `flex-end` de la fila, sin
   tocar el widget de idiomas (que ya estaba bien). `align-self` no sirve
   aquí: la fila ya mide lo que mide su hijo más alto, así que ese hijo no
   tiene "espacio libre" que centrar. Solo mobile (`max-width: 1024px`), a
   petición explícita de Nico — en desktop no se toca nada. */
@media (max-width: 1024px) {
    header .elementor-widget-button {
        height: 38.33px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ─── Rollover de los iconos de herramientas junto al selector de idiomas ───
 * Los iconos globo/lupa del header son widgets Button de Elementor
 * (elementor-button). En Home, `body.home header .elementor-button` (más
 * arriba en este archivo) fija fondo/color con !important tanto en estado
 * "top" (fondo transparente del header: fondo #fff / icono #857D7D) como en
 * "scroll"/"collapsed" (fondo #666060 / icono #fff) — pero ninguna de esas
 * dos reglas tiene variante :hover, así que un !important sin pseudo-clase
 * pisa cualquier estado de hover nativo de Elementor y el botón nunca
 * cambia visualmente al pasar el ratón (confirmado en vivo: capturas de
 * Nico, agosto 2026 — con fondo de header transparente el rollover no se
 * ve en absoluto). Se añade aquí el estado :hover explícito para ambos
 * casos, con la misma especificidad (!important) para poder ganarle a las
 * reglas base de arriba.
 *
 * Corrección (13/08/2026): en "scroll"/"collapsed" (header con fondo
 * blanco) el hover invertía a `background-color: #fff` — el MISMO blanco
 * del header, así que el botón perdía su silueta y "desaparecía" visualmente
 * (reportado por Nico con capturas). Ese invertir-a-blanco solo funciona
 * cuando el header está transparente (el botón blanco resalta contra la
 * foto de fondo); con el header ya blanco no hay contraste posible ahí.
 * Mismo criterio que ya usa el pill de idiomas de al lado
 * (`.idiomas-header .wpml-ls-link` / `body.home.scroll ... :hover`, más
 * arriba en este archivo): en vez de invertir a blanco, oscurecer el MISMO
 * fondo oscuro (`#666060` → `#4d4848`), manteniendo el icono blanco — el
 * botón sigue siendo oscuro sobre el header blanco, solo un tono más oscuro
 * al pasar el ratón, igual que el selector de idiomas. */
@media (min-width: 1025px) {
    body.home header .elementor-button:hover {
        background-color: #857D7D!important;
        fill: #fff!important;
        color: #fff!important;
    }

    body.home.scroll header .elementor-button:hover,
    body.home header.collapsed .elementor-button:hover {
        background-color: #4d4848!important;
        fill: #fff!important;
        color: #fff!important;
    }
}

.loh-resultados-busqueda__blog-leer-mas:hover {
    text-decoration: none;
}

/* Página "Children and Young Adult's Oral Care" (EN, page-id 248643): a
   petición de Nico (ago/2026), ocultar solo en esta versión de idioma el
   widget imagen con Motion Effects "Fixed" (elementor-fixed) que actúa como
   banner flotante/picture-in-picture del vídeo "CEPILLARSE LOS DIENTES ES
   DIVERTIDO" al hacer scroll. La versión ES de la misma página (page-id
   245685, "Cuidado bucodental infantil y júnior") mantiene el banner sin
   cambios — el selector va acotado por page-id, no por la clase del widget,
   para no afectar a esa ni a ninguna otra página. */
body.page-id-248643 .elementor-element-231d04b.elementor-fixed {
    display: none !important;
}

/* ------------------------------------------------------------------------
 * Item de primer nivel del menu (PRODUCTOS, SALUD ORAL, y desde 13/08/2026
 * tambien Elige Lacer / Blog / Test Bucodental / Compra) resaltado en la
 * pagina/seccion actual -- paridad con Origen (lacer.js anadia `active` al
 * <a> de primer nivel segun la URL real; wp_nav_menu clasico ademas pone
 * `current_page_item`/`current_page_parent`/`current_page_ancestor` de forma
 * nativa). La clase `e-current` la pone en runtime `js/loh-menu-current-item.js`
 * (Elementor Pro no la marca solo -- ver ese archivo).
 *
 * Las reglas `body.home ... .e-current` de mas arriba en este archivo ya
 * cubren el color en Home (blanco/gris segun header transparente u opaco);
 * las de aqui cubren el resto de paginas (fuera de Home, donde el color
 * base es #857D7D) y el estado mobile con el panel desplegado en rojo.
 * ------------------------------------------------------------------------ */

/* BOLD del item actual, en cualquier contexto (Home/resto de paginas,
   desktop/mobile) -- a peticion explicita de Nico (13/08/2026): "la pagina
   donde estoy en ese momento se quede en BOLD", con el mismo criterio para
   la "pagina padre" (aqui: la seccion Productos/Salud Oral cuando la pagina
   actual es una de sus paginas hijas -- ver logica en el JS). Regla unica,
   sin depender de las variantes de color de mas arriba/abajo, para no tener
   que repetir `font-weight` en cada bloque `body.home` / `body:not(.home)`. */
.e-n-menu-title.e-current .e-n-menu-title-text {
    font-weight: 700;
}

/* BOLD del enlace HIJO dentro del mega-menu desplegable (p.ej. "ORTODONCIA"
   dentro de la lista de Salud Oral) cuando es la pagina actual -- a peticion
   de Nico (13/08/2026, ronda 2): ademas del "padre" (Salud Oral, ya en bold
   con la regla de arriba), el hijo real tambien debe quedar en bold, paridad
   con Origen marcando `current_page_parent` + `current_page_item` a la vez.
   La clase `loh-menu-hijo-actual` la pone en runtime `js/loh-menu-current-item.js`
   directamente en el <a> (son enlaces sueltos de un widget Editor de texto,
   sin clase propia -- ver ese archivo). No depende de Home/breakpoint. */
.loh-menu-hijo-actual {
    font-weight: 700;
}

/* Fuera de Home: gris oscuro igual que Origen (#636066), en vez del gris
   claro (#857D7D) del resto de items -- confirmado contra
   https://laceroralhealth.com/ con un producto/pagina de esa seccion
   abierto. body.home tiene su propio bloque de arriba con mas
   especificidad (body.home ... .e-current), asi que esta regla no lo
   pisa. */
body:not(.home) .e-n-menu-title.e-current .e-n-menu-title-text {
    color: #636066;
}

@media (max-width: 1024px) {
    /* Menu mobile: mientras el panel de "Productos"/"Salud Oral" esta
       desplegado (.e-active), su titulo pasa a rojo de marca -- paridad
       exacta con Origen (confirmado en vivo en mobile: el titulo del item
       desplegado se pinta en #d12421, el mismo rojo que ya usa el fondo
       del panel en este archivo). El selector se acota a
       `.e-n-menu-heading .e-n-menu-item` para no afectar a otros widgets
       ajenos al menu que puedan usar `.e-active` con otro significado. */
    .e-n-menu-heading .e-n-menu-item:has(> .e-n-menu-content.e-active) > .e-n-menu-title .e-n-menu-title-text {
        color: #d12421;
    }
}

/* ------------------------------------------------------------------------
 * Modulo "DESCUBRE NUESTROS CEPILLOS DENTALES" (pagina Lacer Cepillos
 * Dentales, ES post 510 / EN post 42082): las 3 imagenes panoramicas de
 * cepillo (widgets elementor-element-1211ad03/5f4276ea/334fbc92) las mueve
 * en runtime `js/loh-cepillos-tabs.js` desde su posicion original (apiladas
 * antes del acordeon, unico sitio donde Elementor permitia soltarlas) hasta
 * el <summary> de su fila correspondiente del N-Accordion
 * (elementor-element-6e68227c), anadiendoles la clase `loh-cepillo-img`.
 * Aqui solo se posicionan dentro de esa fila y se replica el efecto de
 * Origen -- confirmado leyendo su document.styleSheets en
 * https://laceroralhealth.com/productos/lacer-cepillos-dentales:
 * `.acordeon li:not(.active):hover .click img { transform: scale(1.1) }`.
 *
 * Solo desktop (a peticion explicita de Nico, "animacion en vista
 * desktop"): fuera de ese breakpoint la imagen queda oculta -- el script
 * SI mueve el nodo en todos los anchos (sin coste), pero sin esta regla de
 * posicionamiento absoluto la imagen (573px de ancho natural) se renderiza
 * en flujo dentro del <summary> (que es display:flex) y desborda/deforma
 * la fila del titulo en mobile; ocultarla aqui evita eso y mantiene el
 * comportamiento mobile sin cambios visibles.
 * Verificado en vivo (inyeccion temporal en el navegador antes de escribir
 * esta regla): posicion correcta, zoom en hover solo con la fila cerrada,
 * sin zoom con la fila abierta (paridad exacta con Origen).
 * ------------------------------------------------------------------------ */
.loh-cepillo-img {
    display: none;
}

@media (min-width: 1025px) {
    /* La fila (<summary>) necesita position:relative para servir de
       contenedor al posicionamiento absoluto de la imagen; overflow:visible
       porque el diseno original deja la imagen asomar ligeramente sobre el
       borde inferior de la fila en algunas resoluciones (igual que Origen,
       que tampoco recorta `.col-xs-12.col-sm-4`). */
    .elementor-element-6e68227c .e-n-accordion-item-title {
        position: relative;
        overflow: visible;
    }

    .loh-cepillo-img {
        display: block;
        position: absolute;
        top: 50%;
        right: 24px;
        left: auto;
        width: auto;
        max-width: 260px;
        margin: 0;
        transform: translateY(-50%);
        z-index: 1;
        /* La fila entera sigue siendo clicable para abrir/cerrar -- la
           imagen es puramente decorativa, igual que en Origen. */
        pointer-events: none;
    }

    .loh-cepillo-img img {
        display: block;
        width: 100%;
        height: auto;
        transition: transform 0.2s ease-out;
    }

    /* Zoom solo si la fila esta CERRADA -- equivalente a `:not(.active)`
       en Origen. Con la fila abierta (<details open>) la imagen se queda
       quieta, igual que en produccion. */
    .elementor-element-6e68227c .e-n-accordion-item:not([open]):hover .loh-cepillo-img img {
        transform: scale(1.1);
    }
}