/* ==========================================================================
   ENFOQUE NEWS — HEADER, ronda de correcciones + modo oscuro global
   ========================================================================== */

:root {
    --enf-negro: #000000;
    --enf-blanco: #ffffff;
    --enf-rojo: #C70302;
    --enf-panel-oscuro: #0d0d0d;
    --enf-gris-texto: #b8b8b8;
    --enf-container: 1290px;
    --enf-divisor-header: rgba(255,255,255,0.20);

    --enf-bg: #ffffff;
    --enf-superficie: #f5f5f5;
    --enf-texto: #111111;
    --enf-texto-sec: #555555;
    --enf-borde: rgba(0,0,0,.12);
    --enf-rojo-texto: var(--enf-rojo);
    --enf-rojo-hover: #a30202;   /* rojo institucional más oscuro: hover de botones sobre fondo rojo */

    /* Barra pegada: altura de la banda del logo; duración y curva solo para la barra mobile */
    /* Logo pequeño de la barra pegada: el mismo espacio libre sobre el logo y entre el logo y las letras
       del menú. Las letras empiezan --enf-pegado-texto por debajo del borde superior de la fila del
       menú (relleno de la fila y del enlace, más el interlineado de Blocksy); si cambian esos valores,
       se ajusta solo esa variable. El alto de la banda se calcula a partir de las otras tres. */
    --enf-pegado-logo: 32px;     /* alto del logo pequeño */
    --enf-pegado-aire: 20px;     /* espacio libre sobre el logo y bajo él */
    --enf-pegado-texto: 26px;    /* distancia del borde superior de la fila del menú a las letras */
    --enf-pegado-banda: calc(2 * var(--enf-pegado-aire) + var(--enf-pegado-logo) - var(--enf-pegado-texto));
    --enf-recorrido: 240px;  /* scroll (px) que tarda la barra en extenderse del todo; más = más gradual */
    --enf-pegado-dur: .45s;
    --enf-pegado-curva: cubic-bezier(.4, 0, .2, 1);
    --enf-adminbar: 0px;
}
/* Con sesión iniciada: la barra de administración de WordPress es fija (32px en
   pantallas anchas, 46px entre 601 y 782px) y por debajo de 600px se desplaza con
   la página. Las barras pegadas se colocan debajo de ella. */
body.admin-bar { --enf-adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar { --enf-adminbar: 46px; } }
@media (max-width: 600px) { body.admin-bar { --enf-adminbar: 0px; } }
:root[data-tema="oscuro"] {
    --enf-bg: #0F0F10;
    --enf-superficie: #1A1A1C;
    --enf-texto: #EAEAEA;
    --enf-texto-sec: #A8A8A8;
    --enf-borde: rgba(255,255,255,.14);
    --enf-rojo-texto: #FF4D4A;
}
body { background: var(--enf-bg); color: var(--enf-texto); }

/* --------------------------------------------------------------------
   MODO OSCURO — contenido de Blocksy.
   Causa medida en el sitio: Blocksy pinta títulos, fecha, autor y categoría
   con variables propias (--theme-headings-color, --theme-text-color,
   --theme-link-initial-color). Se redefinen aquí, en los contenedores donde
   Blocksy las usa (.hero-section = título de post/página/archivo y
   .entry-meta = autor, categoría, fecha; .entry-content = subtítulos;
   .comment-respond y #comments = formulario de comentarios), en vez de forzar colores con
   !important elemento por elemento. Las reglas con !important de más abajo
   (.entry-title, .excerpt, .entry-content...) son anteriores y se mantienen.
   -------------------------------------------------------------------- */
:root[data-tema="oscuro"] {
    --theme-link-initial-color: var(--enf-blanco);
}
:root[data-tema="oscuro"] .entry-title,
:root[data-tema="oscuro"] .entry-title a,
:root[data-tema="oscuro"] h1.entry-title,
:root[data-tema="oscuro"] h2.entry-title,
:root[data-tema="oscuro"] h3.entry-title {
    color: var(--enf-blanco) !important;
    font-weight: 700;
}
:root[data-tema="oscuro"] .excerpt,
:root[data-tema="oscuro"] .entry-content,
/* Los <p> de los bloques Enfoque (clases enf-* / eh-sh-*) traen su propio color y peso: se excluyen
   para que el modo oscuro no los fuerce a blanco. Los párrafos normales del post no cambian. */
:root[data-tema="oscuro"] .entry-content p:not([class*="enf-"], [class*="eh-sh"]),
:root[data-tema="oscuro"] .entry-summary,
:root[data-tema="oscuro"] .archive-description,
:root[data-tema="oscuro"] .term-description {
    color: var(--enf-blanco) !important;
    font-weight: 400;
}
:root[data-tema="oscuro"] .entry-title a:hover,
:root[data-tema="oscuro"] .entry-title a:focus {
    color: var(--enf-rojo-texto) !important;
}

/* Título y texto del encabezado de post, página y archivo (h1.page-title usa
   --theme-headings-color, declarada por Blocksy en :root). */
:root[data-tema="oscuro"] .hero-section {
    --theme-headings-color: var(--enf-blanco);
    --theme-text-color: var(--enf-texto);
}
/* Metadatos: Blocksy iguala el color de los enlaces al del texto dentro de
   .entry-meta; aquí se fijan ambos y el hover en rojo. */
:root[data-tema="oscuro"] .entry-meta {
    --theme-text-color: var(--enf-texto);
    --theme-link-initial-color: var(--enf-texto);
}
:root[data-tema="oscuro"] .entry-meta a:hover,
:root[data-tema="oscuro"] .entry-meta a:focus {
    color: var(--enf-rojo-texto);
}

/* Subtítulos del contenido del post. Blocksy pinta h1-h6 con la cadena
   var(--theme-heading-color, var(--theme-heading-N-color, var(--theme-headings-color))), donde
   --theme-headings-color es un azul muy oscuro (#192a3d) y --theme-heading-N-color puede traer un
   color propio por nivel si se configuró en el Personalizador. Fijar --theme-heading-color, que es
   el primer eslabón de la cadena, cubre h1-h6 sea cual sea el resto. Solo dentro del contenido: los
   enlaces y el resto de elementos de Blocksy no cambian. */
:root[data-tema="oscuro"] .entry-content {
    --theme-heading-color: var(--enf-blanco);
    --theme-headings-color: var(--enf-blanco);
}
/* Formulario de comentarios (y lista de comentarios, si existe #comments). Blocksy pinta etiquetas y
   campos con --theme-form-text-initial-color / --theme-form-text-focus-color (sin valor en este
   sitio, por lo que caen al color de texto #3A4F66) y el título con --theme-headings-color. Se
   definen aquí, y también color, porque lo que no pinta una variable (por ejemplo el texto del
   consentimiento de cookies) lo hereda del contenedor. El borde de foco pasa del azul de Blocksy
   al rojo del tema. */
:root[data-tema="oscuro"] .comment-respond,
:root[data-tema="oscuro"] #comments {
    color: var(--enf-texto);
    --theme-heading-color: var(--enf-blanco);
    --theme-headings-color: var(--enf-blanco);
    --theme-text-color: var(--enf-texto);
    --theme-form-text-initial-color: var(--enf-texto);
    --theme-form-text-focus-color: var(--enf-blanco);
    --theme-form-field-border-focus-color: var(--enf-rojo-texto);
}

/* Botón "Publicar el comentario" (modo claro y oscuro): Blocksy lo pinta con --theme-button-*
   (fondo azul #2872fa, hover #1559ed). Se redefinen dentro del formulario con el rojo institucional,
   sin tocar los demás botones del sitio. El anillo de foco de teclado también pasa de azul a rojo. */
.comment-respond {
    --theme-button-background-initial-color: var(--enf-rojo);
    --theme-button-background-hover-color: var(--enf-rojo-hover);
    --theme-button-text-initial-color: var(--enf-blanco);
    --theme-button-text-hover-color: var(--enf-blanco);
}
.comment-respond .form-submit button:focus-visible,
.comment-respond .form-submit input:focus-visible { outline-color: var(--enf-rojo); }

.enf-nivel-3          { z-index: 500; }
.enf-megamenu         { z-index: 500; }
.enf-cta-wa            { z-index: 520; }
.enf-panel-mobile-fondo{ z-index: 590; }
.enf-panel-mobile      { z-index: 600; }
.enf-buscador-overlay  { z-index: 700; }

* { box-sizing: border-box; }
.enf-header { background: var(--enf-negro); color: var(--enf-blanco); position: relative; }
.enf-header__container { max-width: var(--enf-container); margin: 0 auto; padding: 0 20px; }

.enf-toggle-tema { background: none; border: 0; cursor: pointer; color: var(--enf-blanco); display: flex; align-items: center; }
.enf-toggle-tema svg { width: 18px; height: 18px; }
.enf-toggle-tema, .enf-toggle-tema:hover, .enf-toggle-tema:focus, .enf-toggle-tema:focus-visible, .enf-toggle-tema:active { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; }
.enf-icono-luna { display: none; }
:root[data-tema="oscuro"] .enf-icono-sol { display: none; }
:root[data-tema="oscuro"] .enf-icono-luna { display: block; }

.enf-cotizacion { background: #141414; }
.enf-cotizacion__inner { display: flex; align-items: center; gap: 14px; padding: 7px 20px; font-size: 12.5px; flex-wrap: wrap; }
.enf-cotizacion__label { color: var(--enf-gris-texto); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.enf-cotizacion__valor { font-weight: 800; font-size: 14px; color: var(--enf-blanco); }
.enf-cotizacion__meta { color: var(--enf-gris-texto); font-size: 11.5px; margin-left: auto; }

.enf-nivel-1__inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--enf-divisor-header); }
.enf-nivel-1__izq { display: flex; align-items: center; gap: 14px; }
.enf-fecha { font-size: 12.5px; color: var(--enf-gris-texto); }
.enf-hamburguesa { display: none; background: none; border: 0; cursor: pointer; }
.enf-hamburguesa svg { width: 20px; height: 20px; stroke: var(--enf-blanco); }

.enf-redes { display: flex; align-items: center; gap: 11px; }
.enf-redes a { color: var(--enf-blanco); opacity: .85; display: flex; }
.enf-redes a:hover, .enf-redes a:focus { opacity: 1; color: var(--enf-rojo); }
.enf-redes svg { width: 18px; height: 18px; fill: currentColor; }

.enf-nivel-2 { display: flex; align-items: center; justify-content: center; padding: 14px 20px; position: relative; }
.enf-nivel-2::after { content:""; display:block; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:var(--enf-container); border-bottom:1px solid var(--enf-divisor-header); }
.enf-nivel-2__logo img { height: clamp(48px, 4.5vw, 72px); width: auto; display: block; }

#enf-nivel-3-sentinela { height: 0; }
/* Niveles 3 y 4 ya no están dentro de .enf-header: se fija aquí el color que antes heredaban. */
.enf-nivel-3, .enf-nivel-4 { color: var(--enf-blanco); }

/* Nivel 3 pegado (desktop).
   La altura del nivel 3 en el flujo NO cambia nunca. Al pegarse, la fila del menú baja y
   aparece encima la banda del logo, y esa extensión es una función de la POSICIÓN del
   scroll, no del tiempo: con progreso 0 la barra es idéntica a su estado normal y llega a
   progreso 1 a --enf-recorrido px de scroll después de pegarse. Como vuelve a 0 justo cuando
   el nivel 3 se despega, nunca queda nada extendido dentro del flujo de la página.
   - Navegadores con animaciones guiadas por scroll (Chrome, Edge, Safari reciente): el propio
     navegador anima (animation-timeline), en el hilo de composición, sin retraso ni tirones.
     header.js solo indica en --enf-ini el scroll exacto en que el nivel 3 se pega.
   - Resto de navegadores: header.js escribe el progreso en --enf-p (valor de respaldo). */
.enf-nivel-3 { --enf-p: 0; position: sticky; top: var(--enf-adminbar); background: var(--enf-negro); }
.enf-nivel-3::before { content: ""; position: absolute; inset: 0; background: var(--enf-negro); transform: translateY(calc(var(--enf-pegado-banda) * var(--enf-p))); }
.enf-nivel-3::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 15px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 100%); opacity: var(--enf-p); transform: translateY(calc(var(--enf-pegado-banda) * var(--enf-p))); }
.enf-nivel-3__logo-pegado { position: absolute; top: 0; left: 0; right: 0; height: var(--enf-pegado-banda); display: flex; align-items: flex-start; justify-content: center; padding-top: var(--enf-pegado-aire); background: var(--enf-negro); opacity: var(--enf-p); transform: translateY(calc((var(--enf-p) - 1) * var(--enf-pegado-banda))); visibility: hidden; pointer-events: none; }
.enf-nivel-3__logo-pegado a { display: flex; }
.enf-nivel-3__logo-pegado img { height: var(--enf-pegado-logo); width: auto; display: block; }
.enf-nivel-3__inner { transform: translateY(calc(var(--enf-pegado-banda) * var(--enf-p))); }
.enf-nivel-3.is-pegado .enf-nivel-3__logo-pegado { visibility: visible; pointer-events: auto; }

@keyframes enf-pegado-baja   { from { transform: translateY(0); } to { transform: translateY(var(--enf-pegado-banda)); } }
@keyframes enf-pegado-sombra { from { opacity: 0; transform: translateY(0); } to { opacity: 1; transform: translateY(var(--enf-pegado-banda)); } }
@keyframes enf-pegado-banda  { from { opacity: 0; transform: translateY(calc(-1 * var(--enf-pegado-banda))); } to { opacity: 1; transform: translateY(0); } }
@supports (animation-timeline: scroll()) {
    .enf-nivel-3::before, .enf-nivel-3__inner, .enf-cta-wa { animation-name: enf-pegado-baja; }
    .enf-nivel-3::after                       { animation-name: enf-pegado-sombra; }
    .enf-nivel-3__logo-pegado                 { animation-name: enf-pegado-banda; }
    .enf-nivel-3::before, .enf-nivel-3::after, .enf-nivel-3__inner, .enf-nivel-3__logo-pegado, .enf-cta-wa {
        animation-duration: auto; animation-timing-function: ease-in-out; animation-fill-mode: both;
        animation-timeline: scroll(root block);
        animation-range: var(--enf-ini, 99999px) calc(var(--enf-ini, 99999px) + var(--enf-recorrido));
    }
}

.enf-nivel-3__inner { display: flex; align-items: center; justify-content: center; position: relative; padding: 12px 20px; }
.enf-nav { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.enf-nav__item { position: relative; }
.enf-nav__link { display: block; padding: 8px 14px; color: var(--enf-blanco) !important; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; border-bottom: 2px solid transparent; transition: border-color .15s ease, color .15s ease; }
.enf-nav__link:visited { color: var(--enf-blanco) !important; }
.enf-nav__item:hover > .enf-nav__link, .enf-nav__item.is-open > .enf-nav__link { border-bottom-color: var(--enf-rojo); color: var(--enf-rojo) !important; }
/* Pestaña activa (la página donde está el lector): SOLO la línea inferior en rojo; el texto no cambia de color. */
.enf-nav__item.is-activo > .enf-nav__link { border-bottom-color: var(--enf-rojo); }

.enf-buscador-abrir { position: absolute; right: 20px; background: none; border: 0; cursor: pointer; color: var(--enf-blanco); }
.enf-buscador-abrir svg { width: 17px; height: 17px; stroke: currentColor; }
.enf-buscador-abrir:hover { color: var(--enf-rojo); }

/* El desplegable va centrado bajo su pestaña (left: 50% y -50% de su ancho). header.js calcula en
   --enf-mega-dx cuánto desplazarlo en horizontal para que las pestañas cercanas a los bordes
   (primeras y últimas) no se salgan de la pantalla. */
.enf-megamenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(calc(-50% + var(--enf-mega-dx, 0px)), -8px); width: 760px; max-width: 92vw; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.enf-nav__item:hover .enf-megamenu, .enf-nav__item.is-open .enf-megamenu { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--enf-mega-dx, 0px)), 0); }
.enf-megamenu::before { content: ""; position: absolute; inset: 0; background: var(--enf-rojo); clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.enf-megamenu__inner { position: relative; margin: 2.5px; background: var(--enf-negro); color: var(--enf-blanco); padding: 22px; clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }

.enf-megamenu__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.enf-megamenu__subcats { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.enf-megamenu__subcats a { color: var(--enf-gris-texto) !important; text-decoration: none; font-size: 12.5px; }
.enf-megamenu__subcats a:hover, .enf-megamenu__subcats a:focus, .enf-megamenu__subcats a:visited { color: var(--enf-rojo) !important; }
.enf-megamenu__vertodo, .enf-megamenu__vertodo:visited { font-size: 12px; font-weight: 700; color: var(--enf-rojo) !important; text-decoration: none; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.enf-megamenu__vertodo:hover, .enf-megamenu__vertodo:focus { color: #ff3d3c !important; }
.enf-megamenu__grid-horizontal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.enf-megamenu__card, .enf-megamenu__card:visited { display: block; text-decoration: none; color: var(--enf-blanco) !important; }
.enf-megamenu__card-img { display: block; width: 100%; aspect-ratio: var(--enf-mega-ratio, 16/9); border-radius: 4px; overflow: hidden; background: #1a1a1a; margin-bottom: 8px; }
.enf-megamenu__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enf-megamenu__card-titulo { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: block; }
.enf-megamenu__card:hover .enf-megamenu__card-titulo, .enf-megamenu__card:focus .enf-megamenu__card-titulo { color: var(--enf-rojo) !important; }

.enf-nivel-4 { background: var(--enf-negro); position: relative; }
.enf-nivel-4::before { content:""; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--enf-container); border-top:1px solid var(--enf-divisor-header); }
.enf-verticales { display: flex; align-items: center; justify-content: center; gap: 28px; list-style: none; margin: 0; padding: 12px 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: var(--enf-container); margin-left: auto; margin-right: auto; }
.enf-verticales a { display: flex; align-items: center; }
.enf-verticales img { height: 20px; width: auto; filter: grayscale(100%) brightness(1.6); opacity: .75; transition: filter .15s ease, opacity .15s ease; }
.enf-verticales a:hover img { filter: none; opacity: 1; }
.enf-verticales__texto { color: var(--enf-gris-texto); font-size: 12px; font-weight: 700; text-transform: uppercase; }

/* ------------------------------------------------------------------------------------------------
   Banner flotante (CTA). Se gestiona en Apariencia → Personalizar → "Header — CTA flotante WhatsApp".
   Está oculto hasta que header.js lo activa (.enf-cta-activo): así no parpadea en quien ya lo cerró.
   - Desktop: position fixed, arriba a la izquierda, alineado con el borde izquierdo de las líneas de
     separación del header (el contenedor), 400 px de ancho como la referencia. Con el header en su posición normal
     va por encima de los niveles 1 y 2 (z-index 520). En cuanto el header empieza a salir de su posición, se desvanece,
     se acopla bajo el header (sin superponerse a él) y reaparece; después queda sticky bajo la barra del menú.
   - Hasta 1150 px: pegado al borde inferior del header (sticky de alto 0), para no tapar el logo; al
     hacer scroll queda pegado a la barra mobile, por debajo.
   ------------------------------------------------------------------------------------------------ */
.enf-cta-wa { --enf-cta-ancho: 400px; position: fixed; top: calc(var(--enf-adminbar) + 2px); left: max(20px, calc((100% - var(--enf-container)) / 2)); width: var(--enf-cta-ancho); max-width: calc(100% - 40px); display: none; --enf-p: 0; transform: translateY(calc(var(--enf-pegado-banda) * var(--enf-p))); }
.enf-cta-wa.enf-cta-activo { display: block; }
.enf-cta-wa.enf-oculto { display: none; }
/* Desktop, en cuanto el header empieza a salir de su posición normal (scroll > 6 px, lo decide header.js): el banner
   se "acopla" bajo el header. Pasa a ser un sticky de alto 0 situado después del nivel 4: acompaña al header mientras
   este sube, sin tapar nunca el menú ni la franja de verticales, y cuando la barra del menú se pega queda sticky
   justo bajo su borde inferior (--enf-cta-h3 = alto de la fila del menú, medido por header.js). El tramo que la
   barra sigue extendiéndose (la banda del logo que va apareciendo) lo sigue la misma animación guiada por scroll,
   de modo que queda siempre pegado a ella. */
@media (min-width: 1151px) {
    .enf-cta-wa.enf-cta-acoplado { position: sticky; top: calc(var(--enf-adminbar) + var(--enf-cta-h3, 63px)); left: auto; width: auto; max-width: none; height: 0; z-index: 480; }
    .enf-cta-wa.enf-cta-acoplado .enf-cta-wa__tarjeta { position: absolute; top: 0; left: max(20px, calc((100% - var(--enf-container)) / 2)); width: var(--enf-cta-ancho); max-width: calc(100% - 40px); }
}
.enf-cta-wa__tarjeta { position: relative; border-radius: 6px; overflow: hidden; background: var(--enf-negro); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25); transition: opacity .35s ease, transform .4s cubic-bezier(.4, 0, .2, 1); }
.enf-cta-wa__enlace { display: block; }
.enf-cta-wa__img { display: block; width: 100%; height: auto; }

/* Botón "Cerrar" dentro del banner: rótulo de texto sobre un fondo oscuro translúcido, legible sobre cualquier imagen. */
.enf-cta-wa .enf-cta-wa__cerrar { position: absolute; top: 8px; right: 8px; margin: 0; min-height: 0; padding: 6px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 3px; background: rgba(0,0,0,.62); box-shadow: none; color: var(--enf-blanco); font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background-color .2s ease, border-color .2s ease; }
.enf-cta-wa .enf-cta-wa__cerrar:hover, .enf-cta-wa .enf-cta-wa__cerrar:focus-visible { background: var(--enf-rojo); border-color: var(--enf-rojo); color: var(--enf-blanco); }
.enf-cta-wa .enf-cta-wa__cerrar:focus-visible { outline: 2px solid var(--enf-blanco); outline-offset: 2px; }

/* Entrada y salida suaves. La entrada termina soltando los estilos (fill-mode backwards) para no bloquear la salida. */
@keyframes enf-cta-entra { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.enf-cta-wa.enf-cta-entra .enf-cta-wa__tarjeta { animation: enf-cta-entra .55s cubic-bezier(.22, .61, .36, 1) backwards; }
.enf-cta-wa.enf-cta-sale .enf-cta-wa__tarjeta { opacity: 0; transform: translateY(-10px) scale(.97); }
/* Cambio de posición entre header normal y header pegado: se desvanece, se recoloca estando invisible y reaparece.
   Así el banner nunca atraviesa el header ni queda detrás de él. */
.enf-cta-wa.enf-cta-cambia .enf-cta-wa__tarjeta { opacity: 0; transition: opacity .18s ease; }

@media (max-width: 1150px) {
    .enf-cta-wa { position: sticky; top: calc(var(--enf-adminbar) + 52px); left: auto; width: auto; max-width: none; height: 0; animation: none; transform: none; }
    .enf-cta-wa__tarjeta { position: absolute; top: 0; left: 12px; width: min(calc(100vw - 24px), 340px); }
}
@media (prefers-reduced-motion: reduce) {
    .enf-cta-wa__tarjeta { transition: none; }
    .enf-cta-wa.enf-cta-entra .enf-cta-wa__tarjeta { animation: none; }
}

.enf-buscador-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; padding: 20px; }
.enf-buscador-overlay.enf-abierto { display: flex; }
.enf-buscador-overlay__cerrar { position: absolute; top: 24px; right: 28px; background: none; border: 0; color: var(--enf-blanco); font-size: 28px; cursor: pointer; }
.enf-buscador-form { width: 100%; max-width: 720px; display: flex; align-items: center; gap: 16px; border-bottom: 2px solid var(--enf-rojo); padding-bottom: 12px; }
/* Campo de búsqueda del overlay. El overlay es siempre oscuro (en modo claro y en oscuro), así que
   el texto va en blanco en ambos. Blocksy fija el color con input:is([type="search"], ...) (0,1,1),
   su :focus (0,2,1) y su ::placeholder { color: inherit } (0,1,2): una sola clase pierde contra
   los tres, por eso estas reglas se escopan al formulario y cubren cada estado. */
.enf-buscador-form .enf-buscador-form__input { flex: 1; font-size: 28px; }
.enf-buscador-form .enf-buscador-form__input,
.enf-buscador-form .enf-buscador-form__input:hover,
.enf-buscador-form .enf-buscador-form__input:focus,
.enf-buscador-form .enf-buscador-form__input:focus-visible,
.enf-buscador-form .enf-buscador-form__input:active { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; color: var(--enf-blanco); caret-color: var(--enf-blanco); }
.enf-buscador-form .enf-buscador-form__input::placeholder { color: var(--enf-gris-texto); opacity: 1; }
.enf-buscador-form .enf-buscador-form__input:-webkit-autofill,
.enf-buscador-form .enf-buscador-form__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--enf-blanco); caret-color: var(--enf-blanco); transition: background-color 9999s ease-in-out 0s; }
/* Lupa del overlay: Blocksy estiliza todo [type="submit"] (fondo azul, hover y ::before).
   Este botón es el único de búsqueda con type="submit"; se escopa al formulario para
   ganar por especificidad y cubrir también los estados. */
.enf-buscador-form .enf-buscador-form__submit,
.enf-buscador-form .enf-buscador-form__submit:hover,
.enf-buscador-form .enf-buscador-form__submit:focus,
.enf-buscador-form .enf-buscador-form__submit:active { background: transparent; background-color: transparent; border: 0; box-shadow: none; color: var(--enf-rojo); cursor: pointer; }
.enf-buscador-form .enf-buscador-form__submit:hover { color: #ff3d3c; }
.enf-buscador-form .enf-buscador-form__submit:focus-visible { outline: 2px solid var(--enf-rojo); outline-offset: 2px; }
.enf-buscador-form .enf-buscador-form__submit::before { background: transparent; }
.enf-buscador-form__submit svg { width: 26px; height: 26px; stroke: currentColor; }

.enf-panel-mobile { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; background: var(--enf-panel-oscuro); color: var(--enf-blanco); transform: translateX(-100%); transition: transform .2s ease; padding: 24px 20px; overflow-y: auto; }
.enf-panel-mobile.enf-abierto { transform: translateX(0); }
.enf-panel-mobile__cerrar { background: none; border: 0; color: var(--enf-blanco); font-size: 26px; cursor: pointer; margin-bottom: 12px; }
.enf-panel-mobile__buscar { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--enf-divisor-header); color: var(--enf-blanco); width: 100%; padding: 10px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; margin-bottom: 20px; }
.enf-panel-mobile__buscar svg { width: 15px; height: 15px; stroke: currentColor; }
.enf-panel-mobile__nav { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--enf-divisor-header); }
.enf-panel-mobile__nav li { border-bottom: 1px solid var(--enf-divisor-header); }
/* Cada ítem de primer nivel: enlace + botón ▾ en la misma fila, subcategorías debajo a ancho completo. */
.enf-panel-mobile__nav > li { display: flex; flex-wrap: wrap; align-items: stretch; }
.enf-panel-mobile__nav > li > a { flex: 1 1 0; min-width: 0; }
.enf-panel-mobile__nav > li > .enf-panel-mobile__subcats { flex: 0 0 100%; }
.enf-panel-mobile__nav a { display: block; padding: 12px 4px; color: var(--enf-blanco); text-decoration: none; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.enf-panel-mobile__nav a:hover, .enf-panel-mobile__nav a:focus { color: var(--enf-rojo); }
/* Menú móvil: entrada activa, solo subrayado rojo (el texto no cambia de color). */
.enf-panel-mobile__nav li.is-activo > a { text-decoration: underline; text-decoration-color: var(--enf-rojo); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.enf-panel-mobile__sub-toggle { background: none; border: 0; color: var(--enf-blanco); flex: 0 0 auto; cursor: pointer; font-size: 22px; line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.enf-panel-mobile__subcats { list-style: none; margin: 0 0 8px; padding: 0 0 0 14px; display: none; }
.enf-panel-mobile__subcats.enf-abierto { display: block; }
.enf-panel-mobile__subcats a { display: block; padding: 8px 4px; color: var(--enf-gris-texto); text-decoration: none; font-size: 12.5px; text-transform: none; font-weight: 400; }
.enf-panel-mobile__subcats a:hover { color: var(--enf-rojo); }
.enf-panel-mobile__verticales { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.enf-panel-mobile__verticales a { color: var(--enf-gris-texto); text-decoration: none; font-size: 12.5px; }
.enf-panel-mobile__verticales a:hover { color: var(--enf-rojo); }
.enf-panel-mobile__verticales { gap: 14px; }
.enf-panel-mobile__verticales a { display: flex; align-items: center; min-height: 28px; }
.enf-panel-mobile__verticales img { height: 20px; width: auto; filter: grayscale(100%) brightness(1.6); opacity: .75; transition: filter .15s ease, opacity .15s ease; }
.enf-panel-mobile__verticales a:hover img, .enf-panel-mobile__verticales a:focus img { filter: none; opacity: 1; }
.enf-panel-mobile__redes { flex-wrap: wrap; }
.enf-panel-mobile-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; }
.enf-panel-mobile-fondo.enf-abierto { display: block; }

/* Barra mobile pegada: hamburguesa a la izquierda y logo centrado. Fija arriba, escondida
   por encima de la pantalla; baja deslizándose cuando el header se pega y sube al volver. */
.enf-barra-movil { display: none; position: fixed; top: var(--enf-adminbar); left: 0; right: 0; z-index: 500; height: 52px; align-items: center; justify-content: center; background: var(--enf-negro); border-bottom: 1px solid var(--enf-divisor-header); box-shadow: 0 4px 14px rgba(0,0,0,.35); transform: translateY(-100%); visibility: hidden; transition: transform var(--enf-pegado-dur) var(--enf-pegado-curva), visibility 0s linear var(--enf-pegado-dur); }
.enf-barra-movil.is-pegado { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.enf-barra-movil .enf-hamburguesa { position: absolute; left: 8px; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; }
.enf-barra-movil__logo { display: flex; }
.enf-barra-movil__logo img { height: 32px; width: auto; display: block; }

@media (max-width: 768px) {
    .enf-hamburguesa { display: block; }
    .enf-nivel-1__inner { display: flex; align-items: center; }
    .enf-nivel-1__izq { display: contents; } /* saca hamburguesa/toggle/fecha de su div para poder reordenarlos como hijos directos */
    .enf-hamburguesa { order: 1; }
    .enf-fecha { order: 2; flex: 1; text-align: center; }
    .enf-toggle-tema { order: 3; }
    .enf-nivel-1__der { display: none; }
    .enf-nivel-3 { display: none; }
    .enf-nivel-4 { display: none; }
    .enf-cotizacion__meta { display: none; }
    .enf-buscador-form .enf-buscador-form__input { font-size: 18px; }
}

@media (min-width: 769px) and (max-width: 1150px) {
    .enf-hamburguesa { display: block; }
    .enf-nivel-3 { display: none; }
}

@media (max-width: 1150px) {
    .enf-barra-movil { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .enf-barra-movil { transition: none; }
}