/* ==========================================================================
   HEADER CSS - INDUPOLI | Polimeros Industriales

   Estilos del header corporativo.
   Variables CSS definidas en global.css (no redeclarar aqui).

   INDICE:
   1. Header base (posicion, z-index)
   2. Barra superior (topbar)
   3. Barra principal (main header)
   4. Logo
   5. Navegacion desktop
   6. Submenus desktop
   7. Boton CTA
   8. Hamburguesa
   9. Menu movil (panel deslizante)
   10. Acordeon movil (submenus)
   11. Responsive

   @package HelloElementorChild_INDUPOLI
   @since   3.1.0
   ========================================================================== */


/* ==========================================================================
   1. HEADER BASE
   ========================================================================== */

.ip-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color var(--ip-transition-smooth),
                box-shadow var(--ip-transition-smooth);
}


/* ==========================================================================
   2. BARRA SUPERIOR (TOPBAR)
   Fondo verde profundo, datos de contacto y redes sociales.
   Se oculta en mobile (< 1024px).
   ========================================================================== */

.ip-header-topbar {
    background-color: var(--ip-verde-profundo);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--ip-font-body);
    font-size: var(--ip-text-small);
    line-height: 1;
}

.ip-header-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--ip-width-max);
    margin: 0 auto;
    padding: 8px var(--ip-space-section-x);
}

/* --- Contacto (izquierda) --- */

.ip-header-topbar__contact {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ip-header-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ip-gris-claro);
    text-decoration: none;
    transition: color var(--ip-transition-fast);
}

.ip-header-topbar__link:hover,
.ip-header-topbar__link:focus-visible {
    color: var(--ip-verde-limon);
}

.ip-header-topbar__icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.ip-header-topbar__link:hover .ip-header-topbar__icon {
    opacity: 1;
}

/* --- Redes sociales (derecha) --- */

.ip-header-topbar__social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ip-header-topbar__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ip-radius-full);
    color: var(--ip-gris-claro);
    text-decoration: none;
    transition: color var(--ip-transition-fast),
                background-color var(--ip-transition-fast);
}

.ip-header-topbar__social-link:hover,
.ip-header-topbar__social-link:focus-visible {
    color: var(--ip-verde-profundo);
    background-color: var(--ip-verde-limon);
}


/* ==========================================================================
   3. BARRA PRINCIPAL (MAIN HEADER)
   Transparente inicialmente, solido al hacer scroll (sticky).
   ========================================================================== */

.ip-header-main {
    background-color: transparent;
    transition: background-color var(--ip-transition-smooth),
                box-shadow var(--ip-transition-smooth);
}

.ip-header--scrolled .ip-header-main {
    background-color: rgba(0, 35, 42, 0.95);
    box-shadow: var(--ip-shadow-elevated);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Topbar siempre visible en desktop al hacer scroll.
   Solo se oculta en mobile via media query (seccion 11). */
.ip-header-topbar {
    transition: border-color var(--ip-transition-smooth);
}

.ip-header-main__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--ip-width-max);
    margin: 0 auto;
    padding: 16px var(--ip-space-section-x);
    gap: 32px;
}

.ip-header--scrolled .ip-header-main__inner {
    padding-top: 12px;
    padding-bottom: 12px;
}


/* ==========================================================================
   4. LOGO (imagen)
   ========================================================================== */

.ip-header-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
    transition: opacity var(--ip-transition-fast);
}

.ip-header-logo:hover {
    opacity: 0.9;
}

.ip-header-logo__img {
    height: 40px;
    width: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.ip-header--scrolled .ip-header-logo__img {
    height: 34px;
}

.ip-header-logo--mobile .ip-header-logo__img {
    height: 32px;
}

/* Footer logo */
.ip-footer-logo {
    display: inline-block;
    text-decoration: none;
}

.ip-footer-logo__img {
    height: 48px;
    width: auto;
    display: block;
}


/* ==========================================================================
   5. NAVEGACION DESKTOP
   ========================================================================== */

.ip-header-nav {
    display: none;
    flex: 1;
    justify-content: center;
}

.ip-header-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--ip-font-body);
    font-size: var(--ip-text-small);
    font-weight: var(--ip-weight-semibold);
}

.ip-header-nav__list .menu-item > a {
    display: block;
    padding: 8px 14px;
    color: var(--ip-white);
    text-decoration: none;
    border-radius: var(--ip-radius-sm);
    transition: color var(--ip-transition-fast),
                background-color var(--ip-transition-fast);
    white-space: nowrap;
}

.ip-header-nav__list .menu-item > a:hover,
.ip-header-nav__list .menu-item > a:focus-visible {
    color: var(--ip-verde-limon);
    background-color: rgba(218, 246, 64, 0.08);
}

/* Item activo (WordPress agrega .current-menu-item) */
.ip-header-nav__list .current-menu-item > a,
.ip-header-nav__list .current-menu-ancestor > a {
    color: var(--ip-verde-limon);
}

/* Indicador de submenu (flecha) */
.ip-header-nav__list .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    transition: transform var(--ip-transition-fast);
}


/* ==========================================================================
   6. SUBMENUS DESKTOP
   ========================================================================== */

.ip-header-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: 8px 0;
    background-color: var(--ip-verde-profundo);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ip-radius-md);
    box-shadow: var(--ip-shadow-elevated);
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--ip-transition-fast),
                visibility var(--ip-transition-fast),
                transform var(--ip-transition-fast);
    z-index: 1001;
}

/* Posicionar items padre como relativos */
.ip-header-nav__list .menu-item-has-children {
    position: relative;
}

/* Mostrar submenu con hover */
.ip-header-nav__list .menu-item-has-children:hover > .sub-menu,
.ip-header-nav__list .menu-item-has-children.ip-header-nav__item--open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Rotar flecha cuando esta abierto */
.ip-header-nav__list .menu-item-has-children:hover > a::after,
.ip-header-nav__list .menu-item-has-children.ip-header-nav__item--open > a::after {
    transform: rotate(180deg);
}

/* Items del submenu */
.ip-header-nav__list .sub-menu .menu-item > a {
    padding: 10px 20px;
    font-size: var(--ip-text-small);
    font-weight: var(--ip-weight-medium);
    border-radius: 0;
}

.ip-header-nav__list .sub-menu .menu-item > a:hover,
.ip-header-nav__list .sub-menu .menu-item > a:focus-visible {
    background-color: rgba(218, 246, 64, 0.1);
    color: var(--ip-verde-limon);
}

/* Submenus de segundo nivel (tercer nivel) */
.ip-header-nav__list .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-top: -8px;
}


/* ==========================================================================
   7. BOTON CTA
   ========================================================================== */

.ip-header-cta {
    display: none;
    flex-shrink: 0;
}

.ip-header-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-family: var(--ip-font-body);
    font-size: var(--ip-text-small);
    font-weight: var(--ip-weight-bold);
    line-height: 1;
    text-decoration: none;
    border-radius: var(--ip-radius-sm);
    transition: all var(--ip-transition-fast);
    white-space: nowrap;
}

/* Estilo del boton primario (.ip-btn--primary) */
.ip-btn--primary {
    background-color: var(--ip-verde-limon);
    color: var(--ip-verde-profundo);
    border: 2px solid var(--ip-verde-limon);
}

.ip-btn--primary:hover,
.ip-btn--primary:focus-visible {
    background-color: transparent;
    color: var(--ip-verde-limon);
    border-color: var(--ip-verde-limon);
}


/* ==========================================================================
   8. HAMBURGUESA (MOVIL)
   Tres lineas que se transforman en X al activarse.
   ========================================================================== */

.ip-header-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
    position: relative;
    flex-shrink: 0;
    margin-right: 0;
}

.ip-header-hamburger__line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--ip-white);
    border-radius: 2px;
    transition: transform var(--ip-transition-fast),
                opacity var(--ip-transition-fast);
    transform-origin: center;
}

/* Estado activo: X */
.ip-header-hamburger--active .ip-header-hamburger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ip-header-hamburger--active .ip-header-hamburger__line:nth-child(2) {
    opacity: 0;
}

.ip-header-hamburger--active .ip-header-hamburger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================================
   9. MENU MOVIL — Panel deslizante desde la derecha
   ========================================================================== */

.ip-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    pointer-events: none;
    overflow: hidden;
}

.ip-mobile-menu--open {
    pointer-events: auto;
}

/* Overlay oscuro */
.ip-mobile-menu__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--ip-transition-smooth);
}

.ip-mobile-menu--open .ip-mobile-menu__overlay {
    opacity: 1;
}

/* Panel */
.ip-mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background-color: var(--ip-verde-profundo);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--ip-transition-smooth);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ip-mobile-menu--open .ip-mobile-menu__panel {
    transform: translateX(0);
}

/* Cabecera del panel */
.ip-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ip-header-logo--mobile {
    font-size: 1.25rem;
}

/* Boton cerrar */
.ip-mobile-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ip-radius-sm);
    color: var(--ip-gris-claro);
    cursor: pointer;
    transition: color var(--ip-transition-fast),
                border-color var(--ip-transition-fast),
                background-color var(--ip-transition-fast);
}

.ip-mobile-menu__close:hover,
.ip-mobile-menu__close:focus-visible {
    color: var(--ip-verde-limon);
    border-color: var(--ip-verde-limon);
    background-color: rgba(218, 246, 64, 0.08);
}

/* Navegacion movil */
.ip-mobile-menu__nav {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
}

.ip-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--ip-font-body);
}

.ip-mobile-menu__list .menu-item > a {
    display: block;
    padding: 14px 20px;
    color: var(--ip-white);
    text-decoration: none;
    font-size: var(--ip-text-body);
    font-weight: var(--ip-weight-semibold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: color var(--ip-transition-fast),
                background-color var(--ip-transition-fast);
}

.ip-mobile-menu__list .menu-item > a:hover,
.ip-mobile-menu__list .menu-item > a:focus-visible {
    color: var(--ip-verde-limon);
    background-color: rgba(218, 246, 64, 0.05);
}

/* Item activo en movil */
.ip-mobile-menu__list .current-menu-item > a,
.ip-mobile-menu__list .current-menu-ancestor > a {
    color: var(--ip-verde-limon);
}

/* Items de submenu movil */
.ip-mobile-menu__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ip-mobile-menu__list .sub-menu .menu-item > a {
    padding-left: 40px;
    font-size: var(--ip-text-small);
    font-weight: var(--ip-weight-medium);
    color: var(--ip-gris-claro);
}

.ip-mobile-menu__list .sub-menu .sub-menu .menu-item > a {
    padding-left: 56px;
    font-size: var(--ip-text-small);
}

/* Items padres con submenu: layout flex para boton toggle */
.ip-mobile-menu__list .menu-item-has-children {
    position: relative;
}

.ip-mobile-menu__list .menu-item-has-children > a {
    padding-right: 52px;
}


/* ==========================================================================
   10. ACORDEON MOVIL — Boton toggle de submenus
   ========================================================================== */

.ip-mobile-menu__toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--ip-gris-claro);
    cursor: pointer;
    transition: color var(--ip-transition-fast),
                background-color var(--ip-transition-fast);
}

.ip-mobile-menu__toggle:hover,
.ip-mobile-menu__toggle:focus-visible {
    color: var(--ip-verde-limon);
    background-color: rgba(218, 246, 64, 0.05);
}

.ip-mobile-menu__toggle svg {
    transition: transform var(--ip-transition-fast);
}

.ip-mobile-menu__toggle--open svg {
    transform: rotate(180deg);
}


/* ==========================================================================
   FOOTER DEL PANEL MOVIL — CTA, contacto y redes
   ========================================================================== */

.ip-mobile-menu__footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

.ip-mobile-menu__cta {
    display: block;
    width: 100%;
    padding: 14px 24px;
    text-align: center;
    font-family: var(--ip-font-body);
    font-size: var(--ip-text-body);
    font-weight: var(--ip-weight-bold);
    border-radius: var(--ip-radius-sm);
    text-decoration: none;
    margin-bottom: 20px;
}

/* Datos de contacto movil */
.ip-mobile-menu__contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.ip-mobile-menu__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ip-gris-claro);
    text-decoration: none;
    font-family: var(--ip-font-body);
    font-size: var(--ip-text-small);
    transition: color var(--ip-transition-fast);
}

.ip-mobile-menu__contact-link:hover,
.ip-mobile-menu__contact-link:focus-visible {
    color: var(--ip-verde-limon);
}

.ip-mobile-menu__contact-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Redes sociales movil */
.ip-mobile-menu__social {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ip-mobile-menu__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ip-radius-full);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--ip-gris-claro);
    text-decoration: none;
    transition: color var(--ip-transition-fast),
                background-color var(--ip-transition-fast),
                border-color var(--ip-transition-fast);
}

.ip-mobile-menu__social-link:hover,
.ip-mobile-menu__social-link:focus-visible {
    color: var(--ip-verde-profundo);
    background-color: var(--ip-verde-limon);
    border-color: var(--ip-verde-limon);
}


/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

/* --- Ocultar topbar en mobile --- */
@media (max-width: 1024px) {
    .ip-header-topbar {
        display: none;
    }

    /* En mobile/tablet, header siempre con fondo sólido para contraste del logo */
    .ip-header-main {
        background-color: var(--ip-verde-profundo) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .ip-header-main .ip-header-main__inner {
        padding-right: 16px;
    }
}

/* --- Desktop: mostrar nav y CTA, ocultar hamburguesa --- */
@media (min-width: 1025px) {
    .ip-header-nav {
        display: flex;
    }

    .ip-header-cta {
        display: flex;
    }

    .ip-header-hamburger {
        display: none;
    }
}

/* --- Tablets: ajustar espaciado del nav --- */
@media (min-width: 1025px) and (max-width: 1280px) {
    .ip-header-nav__list {
        gap: 0;
    }

    .ip-header-nav__list .menu-item > a {
        padding: 8px 10px;
        font-size: 0.8125rem;
    }

    .ip-header-main__inner {
        gap: 16px;
    }
}

/* --- Mobile pequeno --- */
@media (max-width: 480px) {
    .ip-mobile-menu__panel {
        width: 100%;
        max-width: 100vw;
    }

    .ip-header-logo__img {
        height: 28px;
    }
}

@media (max-width: 767px) {
    .ip-header-logo__img {
        height: 32px;
    }

    .ip-footer-logo__img {
        height: 40px;
    }
}

/* --- Offset del body para compensar header fijo --- */
body {
    padding-top: 0; /* Elementor maneja su propio espaciado */
}

/* Clase de utilidad para agregar el offset correcto */
.ip-header-offset {
    padding-top: 100px;
}

.ip-header--scrolled ~ .ip-header-offset,
.ip-header--scrolled + main {
    padding-top: 68px;
}


/* ==========================================================================
   12. EFECTOS PREMIUM DEL HEADER
   Transiciones avanzadas, backdrop blur, linea decorativa
   ========================================================================== */

/* --- Estado transparente del header (sobre hero) --- */
.ip-header--transparent .ip-header-main {
    background-color: transparent;
    box-shadow: none;
}

/* --- Estado scrolled: vidrio esmerilado premium --- */
.ip-header--scrolled .ip-header-main {
    background-color: rgba(0, 35, 42, 0.88);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(218, 246, 64, 0.06);
}

/* --- Linea decorativa verde limon bajo el header --- */
.ip-header-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(218, 246, 64, 0) 10%,
        rgba(218, 246, 64, 0.4) 50%,
        rgba(218, 246, 64, 0) 90%,
        transparent 100%);
    opacity: 0;
    transition: opacity var(--ip-transition-smooth);
}

.ip-header--scrolled .ip-header-main::after {
    opacity: 1;
}

/* --- Logo: brillo sutil al scrollear --- */
.ip-header--scrolled .ip-header-logo__img {
    filter: drop-shadow(0 0 6px rgba(218, 246, 64, 0.3));
}

/* --- Hover mejorado en items de navegacion --- */
.ip-header-nav__list .menu-item > a {
    position: relative;
}

.ip-header-nav__list .menu-item > a::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--ip-verde-limon);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ip-transition-fast);
}

.ip-header-nav__list .menu-item > a:hover::before,
.ip-header-nav__list .current-menu-item > a::before,
.ip-header-nav__list .current-menu-ancestor > a::before {
    transform: scaleX(1);
}

/* No aplicar en items con submenu la barra de current (evitar conflicto visual) */
.ip-header-nav__list .menu-item-has-children > a::before {
    bottom: 0;
}

/* --- Submenu: efecto de entrada mejorado --- */
.ip-header-nav__list .sub-menu {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(0, 35, 42, 0.95);
    border: 1px solid rgba(218, 246, 64, 0.08);
}

/* --- CTA del header: glow al scrollear --- */
.ip-header--scrolled .ip-header-cta__button.ip-btn--primary {
    box-shadow: 0 0 12px rgba(218, 246, 64, 0.25);
}

.ip-header--scrolled .ip-header-cta__button.ip-btn--primary:hover {
    box-shadow: 0 0 20px rgba(218, 246, 64, 0.4);
}

/* --- Menu movil: efecto de entrada de items escalonado --- */
.ip-mobile-menu--open .ip-mobile-menu__list .menu-item {
    animation: ip-mobile-item-enter 0.3s ease forwards;
    opacity: 0;
}

.ip-mobile-menu--open .ip-mobile-menu__list .menu-item:nth-child(1) { animation-delay: 0.05s; }
.ip-mobile-menu--open .ip-mobile-menu__list .menu-item:nth-child(2) { animation-delay: 0.1s; }
.ip-mobile-menu--open .ip-mobile-menu__list .menu-item:nth-child(3) { animation-delay: 0.15s; }
.ip-mobile-menu--open .ip-mobile-menu__list .menu-item:nth-child(4) { animation-delay: 0.2s; }
.ip-mobile-menu--open .ip-mobile-menu__list .menu-item:nth-child(5) { animation-delay: 0.25s; }
.ip-mobile-menu--open .ip-mobile-menu__list .menu-item:nth-child(6) { animation-delay: 0.3s; }
.ip-mobile-menu--open .ip-mobile-menu__list .menu-item:nth-child(7) { animation-delay: 0.35s; }
.ip-mobile-menu--open .ip-mobile-menu__list .menu-item:nth-child(8) { animation-delay: 0.4s; }

@keyframes ip-mobile-item-enter {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Panel movil: gradiente sutil en el fondo --- */
.ip-mobile-menu__panel {
    background: linear-gradient(180deg,
        var(--ip-verde-profundo) 0%,
        rgba(10, 51, 51, 0.98) 100%);
}

/* --- Linea decorativa en la cabecera del panel movil --- */
.ip-mobile-menu__header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(218, 246, 64, 0.3),
        transparent);
}

.ip-mobile-menu__header {
    position: relative;
}


/* ==========================================================================
   ACCESIBILIDAD — Focus visible
   ========================================================================== */

.ip-header a:focus-visible,
.ip-header button:focus-visible,
.ip-mobile-menu a:focus-visible,
.ip-mobile-menu button:focus-visible {
    outline: 2px solid var(--ip-verde-limon);
    outline-offset: 2px;
}

/* Quitar outline en click (solo mostrar con teclado) */
.ip-header a:focus:not(:focus-visible),
.ip-header button:focus:not(:focus-visible),
.ip-mobile-menu a:focus:not(:focus-visible),
.ip-mobile-menu button:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   13. OCULTAR MENU MOVIL EN DESKTOP
   ========================================================================== */

@media (min-width: 1025px) {
    .ip-mobile-menu { display: none; }
}