/* Breadcrumb: por defecto para fondo claro; .page-hero lo pisa para fondo oscuro.
   Vive acá (no en nosotros.css) porque ya la usa más de una página interna
   —Nosotros y Marcas— vía template-parts/breadcrumbs.php. */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-body-sm);
    color: var(--color-muted);
}

.breadcrumbs a:hover {
    color: var(--color-brand-red);
}

/* En mobile, si las migas son largas (más de 3 en total: Inicio + intermedias
   + título), el título actual ya se repite como <h1> justo debajo, así que
   ocultarlo evita que las migas se compriman con textos largos (nombre de
   categoría + nombre de producto, por ejemplo). Las cortas (Inicio > Novedades)
   se muestran completas: sin el título quedaría solo «Inicio». */
@media (max-width: 640px) {
    .breadcrumbs--larga .breadcrumbs-actual-separador,
    .breadcrumbs--larga .breadcrumbs-actual {
        display: none;
    }
}

/* Banner superior de página interna (breadcrumb + título [+ botones]):
   tarjeta contenida en el container, no a todo el ancho de la ventana.
   Compartido por Nosotros y Marcas (template-parts/{página}/hero.php). */
.page-hero-section {
    padding-block: 2rem 0;
}

.page-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-large);
    min-height: 26rem;
    display: flex;
    align-items: flex-end;
    background-color: var(--color-ink);
    background-size: cover;
    background-position: center;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.5) 0%, rgba(18, 18, 18, 0.78) 100%);
}

.page-hero-inner {
    position: relative;
    z-index: 1;
    padding: 3rem 2rem;
}

@media (max-width: 767px) {
    .page-hero-inner {
        padding: 1.5rem;
    }
}

.page-hero .breadcrumbs {
    color: rgba(255, 255, 255, 0.75);
}

.page-hero .breadcrumbs a {
    color: var(--color-white);
}

.page-hero-title {
    margin-top: 1rem;
    color: var(--color-white);
}

.page-hero-copy {
    margin-top: 0.75rem;
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.85);
}

.page-hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.page-hero-botones .btn {
    text-transform: uppercase;
}

/* Topbar */
.topbar {
    position: relative;
    /* .site-header ahora vive en 99 (por encima), así que en la práctica
       este z-index solo importa entre la topbar y el resto del contenido
       normal de la página, no contra el header. */
    z-index: 46;
    background: var(--color-ink);
    color: var(--color-white);
    font-size: 0.75rem;
}

.topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    padding-block: 0.625rem;
}

.topbar-inner a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 500;
}

.topbar-inner a:hover,
.topbar-inner a.is-active {
    color: var(--color-brand-red-sobre-oscuro);
}

.topbar-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

/* Header / nav */
.site-header {
    position: relative;
    z-index: 99;
    background: var(--color-white);
}

/* Header fijo al hacer scroll, solo mobile/tablet (<1024px, ver .sticky-bar
   más abajo para el equivalente de desktop): el JS agrega/saca .is-sticky
   (app.js) al pasar el alto de la topbar, así el nav-bar de siempre —ya de
   una sola fila acá porque el menú vive detrás del botón hamburguesa— queda
   clavado arriba en vez de irse con el scroll. z-index 90: por debajo del
   canvas de mobile (100, ver .primary-nav) para que lo siga tapando al
   abrirse, por encima de la topbar (46) y el mega menú (30/35).
   El spacer de más abajo (mismo alto vía --header-h, medido en app.js)
   evita que el contenido salte al sacar el header del flujo normal. */
@media (max-width: 1023px) {
    .site-header.is-sticky {
        position: fixed;
        /* var(--adminbar-h): sin esto, logueado, el header clavado queda
           tapado por los primeros px de la admin bar de WP (#wpadminbar,
           position:fixed con más z-index) — 0 en la mayoría de las visitas
           reales (sin sesión), así que no cambia nada para el público. */
        top: var(--adminbar-h, 0px);
        left: 0;
        right: 0;
        z-index: 90;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        animation: header-fijo-in 0.2s ease;
    }

    .site-header.is-sticky .nav-bar {
        padding-block: 0.65rem;
    }

    .site-header.is-sticky ~ .site-header-spacer {
        display: block;
        height: var(--header-h, 0px);
    }

    /* .primary-nav (el drawer, ver más abajo) arranca en --topbar-h porque
       esa es su posición normal: justo debajo de la topbar, tapando el
       nav-bar con su propio logo+cerrar. Pero con el header clavado la
       topbar ya no está a la vista y el nav-bar fijo (.is-sticky) ocupa esos
       mismos px desde el top con SU logo — sin este ajuste el drawer no lo
       cubre y asoma esa franja encima, dando logo duplicado. */
    .site-header.is-sticky .primary-nav {
        top: var(--adminbar-h, 0px);
    }
}

.site-header-spacer {
    display: none;
}

@keyframes header-fijo-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Barra fija compacta de desktop (≥1024px): una sola fila con logo a la
   izquierda y menú + Iniciar Sesión + Cotiza Aquí a la derecha — no es el
   .site-header de siempre clavado (eso pasaba de 2 filas y quedaba muy
   alto), sino un componente propio (template-parts/sticky-bar.php) que solo
   existe para este momento. Reusa el mismo <ul class="primary-menu"> (con
   el walker del mega menú) y los mismos .nav-login/.nav-cotiza del nav-bar
   para heredar sus estilos sin duplicarlos. position:fixed acá mismo (no en
   .sticky-bar-nav) es a propósito: es el ancestro posicionado que necesita
   .mega-menu (position:absolute; left:0; right:0) para desplegarse borde a
   borde, igual que .primary-nav se lo da al mega menú del header normal.
   Sin spacer: al ser un overlay angosto (no el header entero) alcanza con
   que se monte encima del contenido, como cualquier sticky-nav chico. */
.sticky-bar {
    display: none;
}

@media (min-width: 1024px) {
    /* Siempre montada y fija (no display:none) para poder animar la salida:
       fuera de pantalla vía transform, no display, así al perder .is-sticky
       (volviendo hacia el top) se puede deslizar hacia arriba en vez de
       desaparecer de golpe. visibility acompaña al transform con delay
       cruzado (0s al mostrar, 0.25s al ocultar) para que quede afuera del
       tab order y de lectores de pantalla recién cuando termina de irse —
       mientras se desliza sigue "visible" a propósito. */
    .sticky-bar {
        display: block;
        position: fixed;
        top: var(--adminbar-h, 0px);
        left: 0;
        right: 0;
        z-index: 90;
        background: var(--color-white);
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform 0.25s ease, box-shadow 0.25s ease, visibility 0s linear 0.25s;
    }

    .sticky-bar.is-sticky {
        transform: translateY(0);
        visibility: visible;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transition: transform 0.25s ease, box-shadow 0.25s ease, visibility 0s linear 0s;
    }

    .sticky-bar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding-block: 0.65rem;
    }

    .sticky-bar-brand img {
        height: 2rem;
        width: auto;
    }

    .sticky-bar-nav .primary-menu {
        padding-block: 0;
    }
}

/* Portátiles chicos (1024–1189px): logo + 7 links + Mi panel + Cotiza en una
   sola fila no caben con el aire de 1200px+. Se compacta: menos separación y
   letra un punto más chica en el menú, y «Mi panel»/«Iniciar Sesión» pasan a
   solo ícono (mantiene su aria-label / title del enlace). */
@media (min-width: 1024px) and (max-width: 1189px) {
    .sticky-bar-inner {
        gap: 1rem;
    }

    .sticky-bar-nav .primary-menu {
        gap: 1rem;
        font-size: 0.875rem;
    }

    .sticky-bar-inner .nav-actions {
        gap: 0.5rem;
    }

    .sticky-bar-inner .nav-login .nav-actions-text {
        display: none;
    }

    .sticky-bar-inner .nav-cotiza {
        padding: 0.5rem 0.9rem;
    }
}

.nav-bar {
    /* Propio y no heredado de .site-header: el fondo del elemento que arma
       el stacking context (.site-header) pinta ANTES que sus hijos con
       z-index negativo (el overlay del mega menú), así que sin este fondo
       acá el overlay se veía a través de esta franja. */
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1rem;
}

.brand img {
    height: 2.4rem;
    width: auto;
    object-fit: contain;
}

/* Buscador del header. El desplegable cuelga de .site-header (position:
   relative ya puesto más arriba) y no de este elemento, a propósito: así se
   extiende borde a borde del header entero en vez de quedar acotado al ancho
   de la caja del input — mismo truco que .mega-menu (ver más abajo). */
.nav-search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-search-icon {
    position: absolute;
    top: 50%;
    left: 34px;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    color: #DE1A1C;
    pointer-events: none;
}

.nav-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 64px !important;
    border: 2px solid #DBDBDB !important;
    border-radius: 50px !important;
    background: linear-gradient(90deg, #F2F2F2 0%, #FFF 100%);
    font: inherit;
    color: inherit;
}

/* El input es type="search": sin esto Chrome/Safari dibujan su propia "x"
   nativa para vaciarlo, que se pisa con .nav-search-close (la X propia,
   ver más abajo) en el estado expandido de mobile. */
.nav-search-input::-webkit-search-cancel-button,
.nav-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.nav-search-input::placeholder {
    color: var(--color-gray-texto);
}

.nav-search-input:focus {
    outline: 2px solid var(--color-brand-red);
    outline-offset: 1px;
    background: var(--color-white);
}

/* Panel borde a borde del header entero (mismo truco que .mega-menu: cuelga
   de .site-header, no de .nav-search — ver comentario sobre .nav-search más
   arriba). El ancho de --container-width se lo da .nav-search-dropdown-inner,
   no este elemento, igual que .mega-menu-inner vive dentro de un .container. */
.nav-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    z-index: 40;
    background: var(--color-white);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 50px 45px rgba(0, 0, 0, 0.18);
    max-height: min(60rem, 95vh);
    overflow-y: auto;
}

.nav-search.is-open .nav-search-dropdown {
    display: block;
}

.nav-search-dropdown-inner {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding-block: 1.5rem 2rem;
}

.nav-search-section {
    margin-bottom: 1.25rem;
}

.nav-search-section[hidden] {
    display: none;
}

.nav-search-section-title {
    font-size: var(--text-title-h6);
    font-weight: 700;
}

h3.nav-search-section-title {
    margin-bottom: 0.5rem;
}

h4.nav-search-section-title {
    margin-bottom: 1.25rem;
}

.nav-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* Pastilla de selector/etiqueta: un solo estilo para las que existían por
   separado (.ax-hermanas__tag en subcategoria.css del plugin,
   .blog-filtro-tag en blog.css, .entry-tag en entrada.css, y esta) más
   .producto-categoria-tag (single-product.php, categoría debajo del
   título) — vive acá porque layout.css es la única de estas hojas que se
   carga siempre, no solo en la página donde aparece cada una. Mismo
   color/borde/hover/activo para todas, a pedido. */
.ax-hermanas__tag,
.nav-search-tag,
.blog-filtro-tag,
.entry-tag,
.producto-categoria-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-body);
    font-size: var(--text-body-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Si el texto es más largo que la fila, se corta con «…» en vez de
   sobresalir de la tarjeta. `display: block` porque text-overflow no actúa
   sobre un contenedor flex; `min-width: 0` en el <li> para que pueda
   encogerse por debajo del ancho de su texto. */
.ax-hermanas__tag,
.blog-filtro-tag,
.nav-search-tag,
.entry-tag,
.producto-categoria-tag {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ax-hermanas__lista > li,
li:has(> .entry-tag),
li:has(> .producto-categoria-tag) {
    min-width: 0;
    max-width: 100%;
}

/* Solo la primera letra: los términos de .nav-search-tag se guardan tal como
   se escribieron (localStorage de "recientes", conteo de "más buscados"),
   muchos en minúscula — text-transform:capitalize pondría en mayúscula cada
   palabra ("Anilox Y Mangas"), esto deja el resto del texto como está. */
.nav-search-tag::first-letter {
    text-transform: uppercase;
}

.ax-hermanas__tag:hover,
.nav-search-tag:hover,
.blog-filtro-tag:hover,
.entry-tag:hover,
.producto-categoria-tag:hover {
    background: var(--color-bg-muted);
    border-color: var(--color-gray-02);
}

.ax-hermanas__tag:focus-visible,
.nav-search-tag:focus-visible,
.blog-filtro-tag:focus-visible,
.entry-tag:focus-visible,
.producto-categoria-tag:focus-visible {
    outline: 2px solid var(--color-brand-red);
    outline-offset: 2px;
}

/* Activo: cada una llegó con el nombre de clase que ya ponía su plantilla
   (--activo vía PHP, .is-active vía PHP/JS) — se deja cada selector tal cual
   para no tocar ese lado, solo se empareja el resultado visual. .nav-search-tag
   y .entry-tag hoy nunca reciben .is-active (no existe un concepto de
   "activa" en esos dos contextos), pero queda listo si hiciera falta. */
.ax-hermanas__tag--activo,
.ax-hermanas__tag--activo:hover,
.nav-search-tag.is-active,
.nav-search-tag.is-active:hover,
.blog-filtro-tag.is-active,
.blog-filtro-tag.is-active:hover,
.entry-tag.is-active,
.entry-tag.is-active:hover {
    background: var(--color-brand-red);
    border-color: var(--color-brand-red);
    color: var(--color-white);
}

/* Acota el marco de la foto en las tarjetas de "Populares": .ax-producto__marco
   (carrusel.css del plugin) es sitewide, así que la baja acá y no ahí —
   el resto de las grillas que la usan (home, industria...) queda igual. */
.nav-search-dropdown .ax-producto__marco {
    max-height: 200px;
}

/* .ax-carrusel__pista (carrusel.css del plugin) trae 30px de padding-block
   pensados para un carrusel que se desliza de verdad, con aire arriba y
   abajo de la fila; acá adentro sobra abajo, mismo criterio de acotar solo
   dentro del desplegable que el resto de las reglas .nav-search-dropdown. */
.nav-search-dropdown ul.ax-carrusel__pista {
    padding-bottom: 0;
}

/* Título recortado a 2 líneas en las tarjetas de producto del buscador
   (Populares y Productos relacionados): algunos nombres son largos y sin
   esto estiran la tarjeta más que sus vecinas en la misma fila. Solo acá
   adentro, no en .ax-producto__titulo sitewide (carrusel.css del plugin). */
.nav-search-dropdown .ax-producto__titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Resultados "en vivo" (data-buscador-resultados): mismo criterio de grilla
   que .industria-catalogo-grid (industria.css) — tarjeta .ax-producto suelta,
   sin pasar por el shortcode del carrusel, así que redefine acá las mismas
   variables que esa tarjeta necesita y que .ax-carrusel normalmente aporta. */
.nav-search-productos {
    --ax-ratio: 5/6;
    --ax-rojo: var(--color-brand-red);
    --ax-marca-alto: 34px;
    --ax-marca-ancho: 42%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 767px) {
    .nav-search-productos {
        gap: 1rem;
    }
}

/* Mismo motivo que ".ax-carrusel .ax-producto__marca img" en carrusel.css
   (plugin) y ".industria-catalogo-grid .ax-producto__marca img" en
   industria.css: esa regla solo vive anidada bajo .ax-carrusel, y esta
   grilla no pasa por ahí (tarjeta suelta vía andexport_carrusel_producto(),
   no el shortcode) — sin repetirla acá el logo de marca sale sin tope de
   ancho/alto y se ve gigante. */
.nav-search-productos .ax-producto__marca img {
    width: auto;
    height: auto;
    max-width: var(--ax-marca-ancho);
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
}

.nav-search-resultados-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.nav-search-relacionados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
}

.nav-search-categorias,
.nav-search-marcas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* Tarjeta de marca: acá sí necesita el marco blanco (a diferencia de
   .ax-marca, la franja de logos suelta) porque convive al lado de las
   tarjetas de categoría, que sí tienen chrome propio (.mega-menu-sub). */
.nav-search-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    transition: box-shadow 0.2s ease;
}

.nav-search-marca:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.nav-search-marca img {
    max-width: 80%;
    max-height: 55px;
    object-fit: contain;
}

.nav-search-marca-nombre {
    font-size: var(--text-body-sm);
    font-weight: 600;
    color: var(--color-muted);
    text-align: center;
}

@media (max-width: 1024px) {
    .nav-search-productos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Los 5 "Populares" de desktop (una sola fila) en mobile/tablet caían en
       2-3 filas de tarjetas altas — mucho scroll para llegar al resto del
       desplegable. Recortado a 3 (una fila entera acá, con las 3 columnas
       de arriba) en vez de tocar el límite en PHP: desktop se queda con 5. */
    .nav-search-productos > :nth-child(n+4) {
        display: none;
    }

    /* Mismo criterio para categorías/marcas relacionadas: el límite en PHP
       (andexport_buscador_terminos_relacionados) queda en 4 para desktop,
       acá se recorta a 3 (una fila entera con las 3 columnas de arriba). */
    .nav-search-categorias > :nth-child(n+4),
    .nav-search-marcas > :nth-child(n+4) {
        display: none;
    }
}

@media (max-width: 640px) {
    .nav-search-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Con 2 columnas, 3 productos dejaban uno solo en la segunda fila: se
       oculta el tercero para que quede una fila completa de 2. */
    .nav-search-productos > :nth-child(n+3) {
        display: none;
    }

    /* En mobile el desplegable ya es largo solo con los productos; las
       columnas de categorías/marcas relacionadas son un atajo de
       descubrimiento (no la respuesta directa a lo escrito) y esa misma
       marca/categoría sigue disponible como filtro en "Ver más". Se ocultan
       acá para no alargar más el scroll — desktop/tablet las mantienen. */
    .nav-search-relacionados {
        display: none;
    }

    /* "Más buscados"/"Búsquedas recientes": en mobile, una sola fila con
       scroll horizontal en vez de envolver en varias líneas (wrap apilaba
       3-4 filas de pastillas y empujaba el resto del desplegable). */
    .nav-search-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(var(--container-padding) * -1);
        padding-inline: var(--container-padding);
    }

    .nav-search-tags::-webkit-scrollbar {
        display: none;
    }

    .nav-search-tags .nav-search-tag {
        flex-shrink: 0;
    }
}

/* Una columna en pantallas muy angostas, igual que el resto de las grillas de
   productos. */
@media (max-width: 350px) {
    .nav-search-productos {
        grid-template-columns: 1fr;
    }
}

.nav-search-close {
    display: none;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    color: var(--color-muted);
}

.nav-search-close svg {
    width: 1rem;
    height: 1rem;
}

/* Visible también en desktop mientras el buscador está abierto: sin esto,
   la única forma de cerrar el desplegable era Escape o clic afuera de
   .nav-search — con "Populares" haciendo el panel más alto que la pantalla,
   ese "afuera" quedaba fuera de vista y obligaba a scrollear primero. El
   input ya reserva 64px de padding a cada lado (ver .nav-search-input), así
   que entra sin pisar el ícono de lupa de la izquierda. */
.nav-search.is-open .nav-search-close {
    display: flex;
}

/* Mobile/tablet (mismo corte que el hamburguesa, <1024px): la caja del
   buscador comparte fila con el logo, login, cotiza y el botón de menú —
   sin espacio para un input legible, el placeholder queda cortado a "Bu".
   En vez de seguir achicando el padding, colapsa a solo el ícono (mismo
   tamaño que .nav-login) y, al tocarlo, .is-open (JS ya la pone al hacer
   focus en el input) lo expande a lo ancho completo tapando al resto —
   mismo patrón que el buscador de apps de e-commerce en mobile. */
@media (max-width: 1023px) {
    /* Con .nav-search ya reducido a un ícono, space-between (puesto para el
       buscador ancho de desktop, ver .nav-bar más arriba) reparte el sobrante
       en partes iguales entre los 4 hijos y deja la lupa flotando sola en
       medio del logo y el resto — se cambia a flex-start + este margin-left:
       auto en el primer ícono, así todo el grupo lupa/login/cotiza/hamburguesa
       queda pegado a la derecha y el logo a la izquierda, con un solo hueco
       entre ambos. */
    .nav-bar {
        justify-content: flex-start;
    }

    .nav-search {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .nav-search-box {
        width: 1.75rem;
        height: 1.75rem;
        overflow: hidden;
    }

    .nav-search-input {
        width: 1.75rem;
        height: 1.75rem;
        padding: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        background: transparent;
        cursor: pointer;
    }

    .nav-search-input::placeholder {
        color: transparent;
    }

    .nav-search-icon {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* .nav-bar:has(...) en vez de .nav-search.is-open ~ .brand porque el
       logo va ANTES del buscador en el marcado (el combinador ~ solo agarra
       hermanos que vienen después) — mismo truco que .site:has(.nav-search.
       is-open) más abajo para el fondo oscuro. */
    .nav-bar:has(.nav-search.is-open) .brand,
    .nav-bar:has(.nav-search.is-open) .nav-actions,
    .nav-bar:has(.nav-search.is-open) .nav-toggle {
        display: none;
    }

    .nav-search.is-open {
        flex: 1 1 auto;
    }

    .nav-search.is-open .nav-search-box,
    .nav-search.is-open .nav-search-input {
        width: 100%;
        height: auto;
    }

    .nav-search.is-open .nav-search-box {
        overflow: visible;
    }

    .nav-search.is-open .nav-search-input {
        padding: 10px 42px 10px 38px !important;
        border: 2px solid #DBDBDB !important;
        border-radius: 50px !important;
        background: linear-gradient(90deg, #F2F2F2 0%, #FFF 100%);
        cursor: text;
    }

    .nav-search.is-open .nav-search-input::placeholder {
        color: var(--color-gray-texto);
    }

    .nav-search.is-open .nav-search-icon {
        left: 12px;
        transform: translateY(-50%);
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-login {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-red);
    flex-shrink: 0;
}

/* Mobile: solo el ícono (círculo rojo, mismo criterio que .floating-btn--top)
   — el texto de ambos links (.nav-actions-text) se pisa a íconos completos
   recién en el breakpoint de desktop, más abajo. */
.nav-cotiza {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Con el contador visible (insignia que agrega andexport-cotizador/assets/js/cotizador.js
   junto al ícono) el círculo de solo-ícono se estira a pill con un poco de aire — sin esto
   el ícono y el "(N)" quedaban pegados uno contra el otro dentro de los 2.5rem fijos.
   Acotado a mobile/tablet (<1024px, mismo corte que el breakpoint de desktop más abajo):
   sin este límite, al tener más especificidad por el :has(), esta regla le pisaba el
   padding de verdad (0.5rem 1.2rem) a la versión pill de desktop en vez de sumarse a ella. */
@media (max-width: 1023px) {
    .nav-cotiza:has(.ax-cotiz-nav-contador:not([hidden])) {
        width: auto;
        padding: 0 0.65rem;
        gap: 0.3rem;
        border-radius: var(--radius-btn, 999px);
    }
}

.nav-actions-text {
    display: none;
}

.nav-login:hover {
    color: var(--color-brand-red-dark);
}

.nav-toggle {
    display: block;
}

.nav-toggle svg {
    width: 1.75rem;
    height: 1.75rem;
}

.primary-nav {
    display: none;
    position: fixed;
    top: var(--topbar-h, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: var(--color-fondo);
    overflow-y: auto;
}

.primary-nav.is-open {
    display: block;
}

body.nav-open,
body.mega-menu-open {
    overflow: hidden;
}

.primary-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--container-padding, 1rem);
    border-bottom: 1px solid var(--color-border);
}

.primary-nav-brand img {
    height: 2.4rem;
    width: auto;
}

/* app.js (igualarLogoMenu) fija --logo-menu-ancho con el ancho real del logo del
   header al abrir el menú; sin JS queda la regla de arriba. */
@media (max-width: 1023px) {
    html[style*="--logo-menu-ancho"] .primary-nav-brand img {
        width: var(--logo-menu-ancho);
        height: auto;
    }

    /* +1px por el borde inferior de la franja, para que el centro del logo coincida. */
    html[style*="--nav-bar-alto"] .primary-nav-head {
        min-height: calc(var(--nav-bar-alto) + 1px);
    }
}

.primary-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-ink);
}

.primary-nav-close svg {
    width: 1rem;
    height: 1rem;
}

.primary-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
}

/* Solo el link de primer nivel: con `.primary-menu a` a secas esto también le
   ganaba (misma especificidad, clase + tag) al padding propio de cualquier
   botón dentro de un mega menú —el de "Descargar PDF" del carrusel de
   Catálogos quedaba con 0 de relleno vertical en vez del suyo (ver
   .ax-catalogo__cta en carrusel.css del plugin)—, porque ese botón vive
   varios niveles adentro del mismo <li>. */
.primary-menu > li > a {
    display: block;
    padding: 0.875rem 0;
    font-weight: 400;
}

.primary-menu a:hover {
    color: var(--color-brand-red);
}

/* Página actual: mismo color que el hover, vía las clases que WordPress ya
   agrega solo (current-menu-item/current-menu-ancestor) al link cuyo href
   coincide con la URL actual — no hace falta detectarlo a mano acá. */
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a,
.primary-menu .current_page_item > a,
.primary-menu .current_page_ancestor > a {
    color: var(--color-brand-red);
}

.primary-menu li {
    position: relative;
    border-bottom: 1px solid var(--color-border);
}

.primary-menu li:last-child {
    border-bottom: none;
}

/* `.primary-menu > li.menu-item-has-children > a` y no `.menu-item-has-children
   > a` a secas: con esa forma corta, la misma especificidad de clase+tag que
   `.primary-menu > li > a` de arriba (que además trae un tag más, "li") le
   ganaba por especificidad y el `display: block` de ahí pisaba el
   `inline-flex` de acá, dejando la flechita como un trazo suelto en vez de
   la V rotada de siempre. */
.primary-menu > li.menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 400;
}

.primary-menu > li.menu-item-has-children > a::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-top: -0.15rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.sub-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0.25rem 0 0.5rem 1rem;
    padding: 0;
    gap: 0.25rem;
}

.sub-menu a {
    padding: 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-muted);
}

.sub-menu a:hover {
    color: var(--color-brand-red);
}

.sub-menu .current-menu-item > a,
.sub-menu .current_page_item > a {
    color: var(--color-brand-red);
}

/* Mega menú: Soluciones */
.mega-menu {
    display: none;
    position: relative;
    z-index: 36;
    background: var(--color-fondo);
    border-radius: 0 0 20px 20px;
}

.mega-menu.is-open {
    display: block;
}

/* El link se queda "activo" (mismo color que el hover) mientras el mega
   menú esté abierto, no solo cuando el mouse está justo encima del texto:
   :hover/:focus-within cubren desktop (se sostienen aunque el mouse baje
   al panel), .is-open cubre el acordeón de mobile/tablet.

   `.primary-menu >` adelante y no ".mega-menu-item:hover > a" a secas: con
   esa forma corta empataba en especificidad con ".primary-menu > li > a" de
   más arriba (mismo peso de clase, y esta ganaba antes solo por venir
   después en el archivo) y el font-weight: 400 de ahí pisaba el 600 de acá,
   dejando el link sin negrita al pasar el mouse. */
.primary-menu > .mega-menu-item:hover > a,
.primary-menu > .mega-menu-item:focus-within > a,
.primary-menu > .mega-menu-item.is-open > a {
    color: var(--color-brand-red);
    font-weight: 600;
}

/* Reserva por adelantado el ancho que ocupa el texto en negrita (mismo
   truco de siempre: una copia invisible del texto ya en negrita, apilada
   debajo con height: 0) para que pasar a font-weight: 600 arriba no cambie
   el ancho real del <li> y no empuje al resto de los ítems del menú. */
.mega-menu-item-label {
    display: inline-block;
}

.mega-menu-item-label::after {
    content: attr(data-text);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 600;
}

.mega-menu-inner,
.mega-menu-flat-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block: 1rem;
}

.mega-menu-categories {
    /* Sangrado: rompe el padding-inline de .container para que la fila
       llegue borde a borde y no se corte a mitad de pestaña al hacer
       scroll; el resto de .mega-menu-inner (título, grilla) se queda con
       el padding normal, así que el margen negativo se repone acá mismo
       como padding para no perder el respiro contra el borde en reposo.

       padding-block de 2rem + margin-block de -2rem: overflow-x: auto deja
       el eje Y en "auto" también (así lo define la spec, no hay forma de
       pedir solo scroll horizontal), así que sin esto el box-shadow del
       botón activo/hover (bastante grande, 12px 12px 39px) se recortaba en
       una línea recta arriba y abajo de la fila. El padding le da lugar
       para pintarse completo; el margin negativo lo compensa para que la
       fila no empuje al título y a la grilla de abajo. */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    list-style: none;
    margin-inline: calc(-1 * var(--container-padding, 1rem));
    margin-block: -2rem;
    padding: 2rem var(--container-padding, 1rem);
    overflow-x: auto;
    scrollbar-width: none;
}

.mega-menu-categories::-webkit-scrollbar {
    display: none;
}

.mega-menu-category {
    flex: 0 0 auto;
}

.mega-menu-category-btn {
    display: block;
    width: 85%;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: var(--text-body-sm);
    font-weight: 600 !important;
    text-align: left;
    white-space: nowrap;
    transition: all .3s;
    margin-left: auto ;
}

.mega-menu-category.is-active .mega-menu-category-btn, .mega-menu-category-btn:hover {
    background: var(--color-brand-red);
    box-shadow: 12px 12px 39px 0 rgba(158, 158, 158, 0.22), 5px 10px 10px 0 rgba(233, 233, 233, 0.25) inset, -6px -8px 10px 0 rgba(248, 248, 248, 0.25) inset;
    color: var(--color-white) !important;
    text-align: right;
    width: 100%;
}

/* El 85%/100% al hover es un efecto pensado para el mouse: en el canvas de
   mobile/tablet (mismo corte que el hamburguesa, <1024px) no hay hover y el
   botón siempre debe ocupar toda la fila. */
@media (max-width: 1023px) {
    .mega-menu-category-btn {
        width: 100%;
        margin-left: 0;
    }

    /* Sin esto el panel crecía en el flujo normal tanto como su contenido
       (podía superar el alto de la pantalla) y verlo completo exigía
       scrollear la página — pero ese scroll es justo lo que el listener de
       scroll en app.js usa para cerrar el mega menú (pensado para el hover
       de desktop), así que nunca llegaba a verse entero: se cerraba solo.
       Overlay fijo con scroll propio, mismo patrón que .primary-nav, para
       que mostrarlo completo ya no dependa de mover la página. */
    .mega-menu {
        position: fixed;
        /* --adminbar-h: la admin bar de WP (#wpadminbar) es position:fixed y
           solo empuja el contenido normal hacia abajo, un position:fixed
           propio no la hereda solo — logueado, el panel quedaba tapando la
           parte de abajo del header por exactamente ese alto (32px/46px). */
        top: calc(var(--adminbar-h, 0px) + var(--topbar-h, 0px) + var(--header-h, 0px));
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0;
        /* overflow-y: auto fuerza overflow-x: auto; la pista del carrusel de
           Catálogos sobresale unos px (márgenes negativos) y dibujaba una
           barra de scroll horizontal gris al pie del panel. */
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Con el header clavado (.is-sticky) la topbar ya se fue con el scroll,
       así que el panel debe arrancar justo debajo del header nomás — sumarle
       --topbar-h acá dejaría un hueco vacío del alto de la topbar.

       body.header-sticky (puesta por JS junto con .site-header.is-sticky) y
       no ".site-header.is-sticky + .mega-menu": la sticky-bar reusa el mismo
       <ul class="primary-menu"> (mismo comentario más arriba sobre
       .sticky-bar), así que hay más de un .mega-menu de sobra compitiendo
       por ser "el hermano justo después del header" — casi nunca es el que
       el usuario realmente abre, y esa regla terminaba sin efecto real. Una
       clase en <body> no depende del orden en el DOM. */
    body.header-sticky .mega-menu {
        /* --header-h-sticky y no --header-h: ese mide el header normal (2
           filas, para el spacer que evita el salto de contenido), y el
           header clavado es más bajo (padding reducido) — usar --header-h
           acá dejaba un hueco del tamaño de esa diferencia. */
        top: calc(var(--adminbar-h, 0px) + var(--header-h-sticky, var(--header-h, 0px)));
    }
}

.mega-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mega-menu-title {
    font-size: var(--text-body-lg);
    font-weight: 700;
}

.mega-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-ink);
}

.mega-menu-close svg {
    width: 1rem;
    height: 1rem;
}

.mega-menu-panel {
    display: none;
}

.mega-menu-panel.is-active {
    display: block;
    animation: mega-menu-fade 0.2s ease;
}

@keyframes mega-menu-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fondo oscuro detrás del mega menú, sobre el resto de la página. Cuelga de
   .site (el wrapper de toda la página), no de .site-header: un z-index
   negativo anidado DENTRO de .site-header pierde contra el propio fondo de
   .site-header por spec (el fondo del elemento que arma el stacking context
   siempre pinta antes que sus hijos negativos), así que en pantallas más
   anchas que el .container el fondo se colaba por el margen y tapaba el
   header. Como hermano real de .site-header (con su propio z-index más
   alto) y de <main>, no tiene ese problema.

   Sin media query a propósito: en desktop el disparador es el hover/focus
   del link (ver .site:has(.mega-menu-item:hover) más abajo); en mobile/
   tablet no hay hover, así que el disparador es la clase que pone el JS al
   abrir el panel (.mega-menu.is-open). */
.site::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, 0.44);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.site:has(.mega-menu.is-open)::before,
.site:has(.nav-search.is-open)::before {
    opacity: 1;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 350px) {
    .mega-menu-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 600px) {
    .mega-menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mega-menu-sub {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--color-bg-muted);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mega-menu-sub:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

/* Imagen arriba, entera (contain, sin recortar), sobre fondo blanco. */
.mega-menu-sub-media {
    display: block;
    height: 120px;
    background: var(--color-white);
}

.mega-menu-sub-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.mega-menu-flat .mega-menu-sub-media img {
    object-fit: cover;
}

.mega-menu-sub:hover .mega-menu-sub-media img {
    transform: scale(1.04);
}

/* Nombre abajo sobre el gris del sistema. */
.mega-menu-sub-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 2.75rem;
    padding: 0.4rem 0.75rem;
    background: var(--color-bg-muted);
    color: var(--color-ink);
    font-size: var(--text-body-sm);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.mega-menu-empty {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-btn);
    background: var(--color-bg-muted);
    color: var(--color-ink);
    font-weight: 600;
}

/* "Descargar PDF" del carrusel de Catálogos (.ax-catalogo__cta, carrusel.css
   del plugin) ya es rojo con texto blanco en reposo — mismo motivo que las
   flechas del carrusel (ver comentario en carrusel.css): algo con más
   especificidad le pinta el texto de rojo en hover/focus, sobre fondo rojo,
   dejándolo casi ilegible. Fijado acá, no en el plugin, porque solo pasa
   dentro del mega menú. */
.mega-menu-catalogos .ax-catalogo__cta,
.mega-menu-catalogos .ax-catalogo__cta:hover,
.mega-menu-catalogos .ax-catalogo__cta:focus,
.mega-menu-catalogos .ax-catalogo__cta:active {
    color: #fff;
}

/* Catálogos en mobile: que quepa en una pantalla; el carrusel se mueve con
   las flechas y también deslizando con el dedo. Las flechas suben a la
   fila del título, al lado de la X, y la ficha se compacta. */
@media (max-width: 767px) {
    .mega-menu-catalogos .mega-menu-flat-inner {
        position: relative;
    }

    /* .ax-carrusel es position: relative: sin esto las flechas se anclan a
       él y no a la fila del título. */
    .mega-menu-catalogos .ax-carrusel {
        position: static;
    }

    .mega-menu-catalogos .ax-carrusel__cabecera {
        position: absolute;
        top: 14px;
        right: 3rem;
        z-index: 1;
    }

    .mega-menu-catalogos .ax-carrusel__mando {
        gap: 8px;
    }

    .mega-menu-catalogos .ax-carrusel .ax-carrusel__flecha {
        width: 36px;
        height: 36px;
    }

    .mega-menu-catalogos .ax-carrusel__pista {
        padding-block: 15px;
    }

    .mega-menu-catalogos .ax-catalogo {
        padding: 14px;
    }

    .mega-menu-catalogos .ax-catalogo__titulo {
        margin-top: 10px;
        font-size: 0.8125rem;
    }

    .mega-menu-catalogos .ax-catalogo__lista {
        margin: 8px 0 12px;
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .mega-menu-catalogos .ax-catalogo__lista li + li {
        margin-top: 3px;
    }

    .mega-menu-catalogos .ax-catalogo__cta {
        padding: 0.7em 1em;
    }
}

@media (min-width: 1024px) {
    .nav-actions-text {
        display: inline;
    }

    .nav-cotiza {
        width: auto;
        height: auto;
        padding: 0.5rem 1.2rem;
        border-radius: var(--radius-btn);
        gap: 0.5rem;
    }

    .nav-toggle {
        display: none;
    }

    .primary-nav {
        display: block;
        position: relative;
        inset: auto;
        z-index: auto;
        overflow: visible;
    }

    .primary-nav-head {
        display: none;
    }

    .primary-menu {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        padding-block: 0.75rem;
    }

    .primary-menu > li > a {
        padding: 0;
    }

    .primary-menu li {
        border-bottom: none;
    }

    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 30;
        min-width: 260px;
        max-height: 60vh;
        margin: 0;
        padding: 0.5rem;
        overflow-y: auto;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        opacity: 0;
        pointer-events: none;
        transform: translateY(0.5rem);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .menu-item-has-children:hover > .sub-menu,
    .menu-item-has-children:focus-within > .sub-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .sub-menu a {
        padding: 0.5rem 0.75rem;
        border-radius: var(--radius-sm);
        white-space: normal;
    }

    .sub-menu a:hover,
    .sub-menu .current-menu-item > a,
    .sub-menu .current_page_item > a {
        background: var(--color-bg-muted);
    }

    /* Mega menú: full width, debajo de toda la barra de nav.
       Especificidad más alta a propósito: .primary-menu li ya puso
       position: relative y una sola clase no le habría ganado. */
    .primary-menu .mega-menu-item {
        position: static;
    }

    .mega-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 30;
        opacity: 0;
        pointer-events: none;
        transform: translateY(0.5rem);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    /* Puente invisible: el <li> del trigger solo mide lo que mide su texto,
       y el padding-bottom de .primary-menu (la franja entre el link y donde
       empieza el panel) no es parte de esa caja. Con el panel cerrado en
       pointer-events: none, esa franja era tierra de nadie —el mouse perdía
       el :hover a mitad de camino y el menú se cerraba antes de llegar—.
       Este puente cuelga solo del link (no del panel, que sigue full width),
       para no taparle nada a los demás ítems del nav. */
    .mega-menu-item > a {
        position: relative;
    }

    .mega-menu-item > a::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 2rem;
    }

    .mega-menu-item:hover > .mega-menu,
    .mega-menu-item:focus-within > .mega-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Soluciones e Industrias son dos .mega-menu-item independientes: si se
       hace clic en el trigger de uno (le queda el foco) y después se pasa el
       mouse al otro, :focus-within lo mantenía abierto aunque ya no tenga el
       hover, y los dos paneles quedaban superpuestos. Mientras cualquier
       mega-menu-item del nav esté en hover, se fuerza a cerrar el panel de
       cualquier otro que no lo esté, gane o no por :focus-within. */
    .primary-menu:has(.mega-menu-item:hover) .mega-menu-item:not(:hover) > .mega-menu {
        opacity: 0;
        pointer-events: none;
        transform: translateY(0.5rem);
    }

    .site:has(.mega-menu-item:hover)::before,
    .site:has(.mega-menu-item:focus-within)::before {
        opacity: 1;
    }

    /* JS agrega esta clase al hacer scroll con el panel abierto: sin ella el
       :hover/:focus-within de arriba lo mantiene abierto aunque el mouse no
       se haya movido, y el panel queda flotando desalineado del trigger
       mientras la página se desplaza debajo. Más específica a propósito
       para ganarle a esas reglas de :hover/:focus-within. */
    .mega-menu-item.mega-menu-cerrando > .mega-menu {
        opacity: 0;
        pointer-events: none;
        transform: translateY(0.5rem);
    }

    /* Tope de alto + scroll propio: si hay muchas categorías o un panel muy
       largo, el conjunto puede superar el viewport. No podemos dejar que
       rebalse y confiar en el scroll de la página para verlo completo,
       porque el listener de scroll en app.js cierra el mega menú apenas se
       mueve la página. overscroll-behavior evita que, al llegar al final de
       este scroll interno, el gesto siga encadenándose al scroll de la
       página (que sí dispara ese cierre). */
    .mega-menu-inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem;
        padding-block: 2rem;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mega-menu-head {
        display: none;
    }

    .mega-menu-categories {
        flex: 0 0 30%;
        max-width: 320px;
        flex-direction: column;
        overflow-x: visible;
    }

    .mega-menu-panels {
        background-color: var(--color-white);
        flex: 1;
        min-width: 0;
        padding: 3rem;
        box-shadow: 12px 12px 39px 0 rgba(158, 158, 158, 0.22), 5px 10px 10px 0 rgba(233, 233, 233, 0.25) inset, -6px -8px 10px 0 rgba(248, 248, 248, 0.25) inset;
        border-radius: var(--radius-pill);
    }

    .mega-menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .mega-menu-flat-inner {
        padding-block: 2rem;
    }

    .mega-menu-flat .mega-menu-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Footer */
.site-footer {
    background: var(--color-footer);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
}

.footer-grid {
    align-items: flex-end;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    padding-block: 3.5rem 2.5rem;
}

.footer-content {
    display: grid;
    align-items: flex-end;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.footer-offices {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

.footer-logo {
    height: 5.5rem;
    width: auto;
}

.social-list {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.social-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
}

.social-list a:hover {
    opacity: 0.5;
}

.social-list svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.footer-office h3,
.footer-hours h3 {
    color: var(--color-ink);
    font-size: var(--text-body-lg);
}

.footer-office ul,
.footer-hours ul {
    margin-top: 0.75rem;
    font-size: var(--text-body);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-office a,
.footer-hours li {
    color: var(--color-muted);
}

.footer-office a:hover {
    color: var(--color-brand-red);
}

.footer-bottom-inner {
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-block: 1.5rem;
    font-size: var(--text-body);
}

.footer-copy {
    color: var(--color-ink);
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.footer-menu a {
    color: var(--color-muted);
}

.footer-menu a:hover,
.footer-menu .current-menu-item a {
    color: var(--color-brand-red);
}


@media (max-width: 1024px) {
    .footer-bottom-inner {
        flex-direction: column-reverse;
    }

    .footer-menu {
        gap: 0.5rem;
        justify-content: flex-start;
        margin-right: auto;
        /* Deja libre el costado derecho, donde flotan los botones. */
        max-width: 85%;
    }
}

@media (min-width: 1024px) {
    .footer-bottom-inner {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Floating buttons */
.floating-buttons {
    position: fixed;
    inset-inline: 0;
    bottom: 5rem;
    z-index: 40;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-inline: 1.25rem;
    pointer-events: none;
}

.floating-btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.5rem;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    color: var(--color-white);
}

.floating-btn--whatsapp {
    background: var(--color-whatsapp);
    width: 3.5rem;
    justify-content: center;
    padding: 0;
    font-weight: 600;
}

.floating-btn--whatsapp span {
    display: none;
}

.floating-btn--whatsapp svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.floating-btn--top {
    width: 3.5rem;
    justify-content: center;
    background: var(--color-brand-red);
}

.floating-btn--top svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* En teléfono los botones son círculos: apilados ocupan una tira angosta
   pegada al borde derecho en vez de cubrir 124px de ancho del contenido. */
@media (max-width: 639px) {
    .floating-buttons {
        bottom: 1.2rem;
        flex-direction: column;
        align-items: flex-end;
    }
}

@media (min-width: 640px) {
    .floating-buttons {
        justify-content: flex-end;
    }

    .floating-btn--whatsapp {
        width: auto;
        justify-content: flex-start;
        padding-inline: 1.25rem;
    }

    .floating-btn--whatsapp span {
        display: inline;
    }
}

/* Campo de teléfono con selector de país (inc/telefono-pais.php,
   andexport_campo_telefono_pais(), assets/js/telefono-pais.js). Prefijo
   .ax-tel- propio y acá en layout.css (se encola siempre, sin condición de
   página) porque este campo aparece en formularios de lugares que no
   comparten ninguna otra hoja de estilos entre sí: el modal de acceso y el
   de WhatsApp del tema, pero también el cotizador y el modal de catálogo,
   que son de otros dos plugins. */
.ax-tel-grupo {
    display: grid;
    /* fr y no 40% 60%: los porcentajes ya suman el 100% y el gap se agregaba por
       fuera, desbordando el contenedor 0.4rem (generaba scroll horizontal). */
    grid-template-columns: 2fr 3fr;
    gap: 0.4rem;
}

.ax-tel-select,
.ax-tel-input {
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-standard);
    background: var(--color-surface-01);
    font-family: inherit;
    font-size: 12px;
    color: var(--color-ink);
}

.ax-tel-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626262' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
    padding-right: 1.5rem;
}

.ax-tel-input::placeholder {
    color: var(--color-gray-texto);
}

.ax-tel-select:focus,
.ax-tel-input:focus {
    outline: none;
    border-color: var(--color-brand-red);
}

.ax-tel-input.is-invalido {
    border-color: var(--color-brand-red);
}

.ax-tel-hint {
    margin: 0;
    font-size: 0.65rem;
    color: var(--color-gray-texto);
}

@media (max-width: 350px) {
    .ax-tel-grupo {
        grid-template-columns: 1fr;
    }
}

/* Eyebrow, Checklist y "Únete a nuestro equipo" (#empleos): vivían en
   nosotros.css, pero #empleos es una sección compartida activable desde el
   editor de CUALQUIER página (selector "Mostrar en esta página", ver
   inc/empleos-selector.php del plugin) — no solo Nosotros y Tecserchile, que
   son las únicas dos que cargaban nosotros.css. Acá, en layout.css (que se
   encola siempre, sin condición de página), la sección se ve bien la active
   quien la active. */

/* Eyebrow: etiqueta chica en rojo arriba de un h2 (Nuestra historia,
   Presencia internacional, Nuestro showroom, Trabaja en Andexport). */
.eyebrow {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--text-label-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Doble clase de contexto (.section .eyebrow) a propósito: le gana en
   especificidad a los "X p { color }" de cada sección (.historia-copy p,
   .showroom-copy p, .empleos-copy p, .section-head p más abajo) que si no
   pisan este color por venir después en la hoja de estilos. */
.section .eyebrow {
    color: var(--color-brand-red);
}

/* Checklist: usado en Showroom y Empleos. */
.checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.checklist svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    padding: 0.15rem;
    border-radius: 50%;
    background: var(--color-brand-red);
    color: var(--color-white);
}

.checklist span {
    color: var(--color-body);
}

/* Variante Showroom: el ícono ya trae su propio círculo (trazo), no el
   círculo relleno de fondo que usa el checklist de Empleos. */
.checklist--outline svg {
    padding: 0;
    background: none;
    color: var(--color-brand-red);
}

/* Únete a nuestro equipo */
.empleos-grid {
    align-items: center;
    border-radius: var(--radius-large);
    background: var(--color-white);
    box-shadow: 12px 12px 39px 0 rgba(158, 158, 158, 0.22), 5px 10px 10px 0 rgba(233, 233, 233, 0.25) inset, -6px -8px 10px 0 rgba(248, 248, 248, 0.25) inset;
    display: grid;
    gap: 3rem;
    padding: 4rem;
}

.empleos-copy p {
    margin-top: 0.75rem;
    color: var(--color-body);
}

.empleos-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.empleos-botones .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.empleos-botones .btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.empleos-cargos h3 {
    font-size: var(--text-title-h6);
}

.empleos-cargos ul {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cargo-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-large);
    transition: background-color 0.15s ease;
}

.cargo-item:hover {
    background-color: var(--color-border);
}

.cargo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cargo-chevron {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-gray-02);
}

.cargo-titulo {
    font-weight: 700;
    color: var(--color-ink);
}

.cargo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.cargo-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: rgba(222, 26, 28, 0.1);
    color: var(--color-brand-red);
}

.cargo-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-gray-texto);
}

.cargo-meta-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.cargos-nota {
    margin-top: 1.25rem;
    color: var(--color-muted);
}

/* Reemplaza la lista de cargos cuando no hay ninguno publicado. */
.empleos-cargos--imagen img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 24rem;
    object-fit: cover;
    border-radius: var(--radius-large);
}

/* 4rem de padding y 3rem de separación son de escritorio: en un teléfono la
   tarjeta se comía casi la mitad del ancho. */
@media (max-width: 1023px) {
    .empleos-grid {
        gap: 2rem;
        padding: 2rem;
    }
}

@media (max-width: 767px) {
    .empleos-grid {
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .empleos-grid {
        grid-template-columns: 1.1fr 1fr;
    }
}

/* Preguntas frecuentes (.linea-faq-*): vivían en micrositio.css, pero
   "Preguntas frecuentes" es activable desde el editor de CUALQUIER página
   (selector "Mostrar en esta página", ver
   inc/preguntas-frecuentes-selector.php del plugin) — no solo las 4 líneas
   con field group propio. Acá, en layout.css, la sección se ve bien la
   active quien la active. */
.linea-faq {
    background-color: var(--color-white);
}

.linea-faq-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.linea-faq-titulo.section-head {
    margin: 0;
    max-width: 42rem;
}

.linea-faq-cta {
    flex-shrink: 0;
}

.linea-faq-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.linea-faq-item {
    border-bottom: 1px solid var(--color-border);
    padding: 1.25rem 0;
}

.linea-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    color: var(--color-ink);
}

.linea-faq-item summary::-webkit-details-marker {
    display: none;
}

/* Etiqueta opcional (campo ACF "etiqueta" del repeater de preguntas):
   reusa .eyebrow (mayúsculas + rojo corporativo), solo que apilada sobre el
   texto de la pregunta en vez de sobre un h2, y con un peso/tamaño más
   liviano que el eyebrow normal (a pedido de Claudia). */
.linea-faq-pregunta {
    display: flex;
    flex-direction: column;
}

.linea-faq-etiqueta {
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    font-weight: 400;
}

.linea-faq-chevron {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-brand-red);
    transition: transform 0.2s ease;
}

.linea-faq-item[open] .linea-faq-chevron {
    transform: rotate(180deg);
}

/* Cuando JS anima el cierre, el <details> sigue "open" hasta que termina la
 * transición de alto (si no, el contenido se corta de golpe con display:none
 * nativo a mitad de camino) — por eso la flecha gira con esta clase, que JS
 * togglea en el instante del clic, en vez del atributo [open]. */
.linea-faq-item.is-cerrando .linea-faq-chevron {
    transform: none;
}

.linea-faq-item p {
    margin-top: 0.75rem;
    color: var(--color-body);
}

/* .section/.section-head: primitivos base de toda sección con título+texto
   centrado (padding vertical, ancho máximo, tipografía del h2). Vivían en
   home.css, pero tanto "Casos de éxito" (.casos-exito, ver
   plugins/andexport-core/inc/casos-exito-selector.php) como "Preguntas
   frecuentes" (.linea-faq-titulo más arriba) son activables desde CUALQUIER
   página vía su selector "Mostrar en esta página" — no solo las que cargan
   home.css. Acá, en layout.css, se ven bien la active quien la active. */
.section {
    padding-block: 5rem;
}

/* En teléfono cada sección suma su padding de arriba más el de la anterior:
   5rem + 5rem eran 160px de aire entre bloques. */
@media (max-width: 767px) {
    .section {
        padding-block: 3.5rem;
    }
}

.section-head {
    max-width: 55rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.section-head :where(h2, h1.ax-h1p) {
    font-size: 1.875rem;
    font-weight: 400;
}

.section-head p {
    margin-top: 0.75rem;
    color: var(--color-body);
}

@media (min-width: 640px) {
    .section-head :where(h2, h1.ax-h1p) {
        font-size: var(--text-header-h2);
    }
}

/* .intro-contenido: párrafo real después del hero (ver
   template-parts/shared/intro-contenido.php) — más angosto que
   .section-head porque es texto corrido, no un título+bajada centrado.
   section.intro-contenido (la mayoría de las páginas) usa .container >
   *; page-blog.php la mete directo dentro de su propio .container, sin
   volver a envolver, por eso el selector cubre los dos casos. */
section.intro-contenido {
    padding-block: 0 2.5rem;
}

.intro-contenido .container > *,
.intro-contenido > p {
    max-width: 48rem;
    color: var(--color-body);
}

/* Texto corrido dentro de .intro-contenido (subtítulos, listas, enlaces): sin esto el reset
   global deja los párrafos pegados, las listas sin viñetas y los enlaces sin marcar. */
.intro-contenido p:not(:first-child),
.intro-contenido ul,
.intro-contenido ol {
    margin-top: 0.75rem;
}

.intro-contenido :where(h2, h1.ax-h1p),
.intro-contenido h3 {
    margin-top: 1.5rem;
    max-width: 48rem;
}

.intro-contenido :where(h2, h1.ax-h1p):first-child,
.intro-contenido h3:first-child {
    margin-top: 0;
}

.intro-contenido ul,
.intro-contenido ol {
    padding-left: 1.25rem;
    max-width: 48rem;
}

.intro-contenido ul {
    list-style: disc;
}

.intro-contenido ol {
    list-style: decimal;
}

.intro-contenido li + li {
    margin-top: 0.25rem;
}

.intro-contenido a:not(.btn) {
    color: var(--color-brand-red-texto);
    text-decoration: underline;
}

/* .texto-ampliado: artículo de fondo al final de la página (ver
   template-parts/shared/texto-ampliado.php) — texto corrido a un ancho
   cómodo de lectura, con subtítulos, listas y foto. */
.texto-ampliado .container > * {
    max-width: 48rem;
    color: var(--color-body);
}

.texto-ampliado :where(h2, h1.ax-h1p) {
    margin-top: 2rem;
    font-size: 1.5rem;
}

.texto-ampliado :where(h2, h1.ax-h1p):first-child {
    margin-top: 0;
}

.texto-ampliado ul,
.texto-ampliado ol {
    padding-left: 1.25rem;
    margin-top: 0.75rem;
}

.texto-ampliado p {
    margin-top: 0.75rem;
}

.texto-ampliado figure {
    margin: 1.5rem 0;
}

.texto-ampliado img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

/* Índice de secciones (lo detecta Rank Math por esta clase) en fichas de
   producto y textos largos. */
.wp-block-rank-math-toc-block {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: #f5f5f5;
    border-radius: 0.5rem;
}

.wp-block-rank-math-toc-block h2 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}

/* Dentro de .entry-content (blog) o .producto-tabs-panel (ficha de producto)
   los h2 traen su propio margen superior con más especificidad que la regla
   de arriba: sin repetir el selector con el contenedor, el título del índice
   queda separado del borde de la caja. */
.entry-content .wp-block-rank-math-toc-block h2,
.producto-tabs-panel .wp-block-rank-math-toc-block h2 {
    margin-top: 0;
}

/* Lo mismo con la lista: `.entry-content ul` y `#tab-description ul` le suman
   margen inferior (y cada <li> el suyo), y la caja del índice queda con
   aire de más abajo. */
.entry-content .wp-block-rank-math-toc-block ul,
#tab-description .wp-block-rank-math-toc-block ul {
    margin-bottom: 0;
}

.entry-content .wp-block-rank-math-toc-block li:last-child,
#tab-description .wp-block-rank-math-toc-block li:last-child {
    margin-bottom: 0;
}

.wp-block-rank-math-toc-block ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* Alineación propia de "Casos de éxito": a la izquierda y no centrada como
   el resto de las secciones (ver home/casos-exito.php). */
.casos-exito .section-head {
    margin-left: 0;
    text-align: left;
}

/* Tablas del contenido (el div lo agrega el filtro the_content de
   inc/setup.php). Sin media query a propósito: el mínimo de 420px solo se
   nota cuando el espacio disponible es menor — en la práctica, mobile — y
   ahí la tabla se desplaza de lado dentro de su caja en vez de comprimir las
   celdas con mucho texto. */
.tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabla-scroll > table {
    min-width: 420px;
}

/* Campos de formulario a 16px en móvil/táctil: con menos, Safari de iPhone amplía la
   pantalla al enfocarlos y la página queda "saltada". Cada formulario (contacto,
   WhatsApp, cotizador, acceso, catálogo, teléfono con país, buscador) define su propio
   tamaño de 12–14px en su CSS, por eso va con !important en un solo lugar. */
@media (max-width: 767px), (pointer: coarse) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]),
  body select,
  body textarea {
    font-size: 16px !important;
  }
}

/* Imágenes del bloque de imagen de WordPress: mismo redondeo que el resto de las imágenes del sitio. */
.wp-block-image img {
    width: 100%;
    border-radius: var(--radius-large);
}


/* Fondo con imagen propia para celular (ver andexport_fondo_atributos()): el estilo en línea trae la de
   escritorio, y la de celular entra en --bg-movil. Vacío = no hay clase y se queda la de escritorio. */
@media (max-width: 767px) {
    .fondo-movil {
        background-image: var(--bg-movil) !important;
    }
}


/* Sección sin foto vista por el público (ver andexport_foto_pendiente()): el cuadro «Fotografía pendiente» solo lo ve quien
   edita, así que la grilla de texto + foto pasa a una sola columna para no dejar un hueco. */
.sin-foto {
    grid-template-columns: minmax(0, 1fr) !important;
}