/* ==========================================================================
   Menú de la web pública de ExpoISP
   --------------------------------------------------------------------------
   Lo pinta includes/web_header.php, que es el único sitio donde viven las
   opciones. Estos estilos estaban dentro de assets/css/style.css (el tema
   compartido, 230 KB) mezclados con el resto; aquí están aparte para poder
   tocarlos sin miedo.

   Tres cosas que arregla y conviene no deshacer:

   1. El menú no puede pisar el logo. El tema repartía el header en columnas
      fijas (col-lg-3 / col-lg-6 / col-lg-3) y seis opciones no caben en la
      mitad central: a 1280 px se montaban 30 px sobre el logo, a 992 px eran
      102 px. Ahora el logo ocupa lo suyo y la navegación es elástica.
   2. Por debajo de 1200 px se pasa a la hamburguesa. Antes aguantaba hasta
      992 px, que es justo donde peor se veía.
   3. La opción activa se marca con una línea, no con un fondo. Una píldora
      convierte el menú en una segunda botonera que compite con «Adquiere tu
      entrada»: dos botones en la misma barra y ninguno con prioridad clara.

   La paleta sale del logotipo, muestreada de la propia imagen: el navy del
   fondo (#003A6D), el azul de «ISP» (#066DFF) y el rojo de la «e» (#F50837).
   No se inventa ningún color: el azul claro que había antes (#0d9bd3) no
   aparecía en ninguna parte de la marca, y por eso desentonaba.
   ========================================================================== */

:root {
    --menu-navy: #003A6D;          /* fondo de la cabecera */
    --menu-logo: #066DFF;          /* el azul de «ISP», tal cual el logotipo */
    /* El azul puro da 2,54:1 sobre el navy y un indicador necesita 3:1:
       este es el mismo tono, aclarado lo justo (3,78:1). */
    --menu-senal: #4A93FF;
    /* El rojo de la «e» del logotipo. #F50837 con texto blanco da 4,22:1,
       por debajo de AA; este es el mismo rojo un punto más hondo (4,95:1). */
    --menu-rojo: #E00630;
    --menu-rojo-hondo: #BC0428;
    --menu-texto: #ffffff;
    --menu-texto-reposo: rgba(255, 255, 255, .68);   /* 6,1:1 sobre el navy */
    --menu-texto-sub: #1B3A56;
    --menu-panel: #ffffff;
    --menu-panel-movil: #002A50;   /* un navy más hondo que la cabecera */
    --menu-borde: rgba(0, 58, 109, .12);
    --menu-sombra: 0 10px 26px rgba(0, 26, 48, .18);
    --menu-transicion: .18s ease;
}

/* ── Reparto del header ───────────────────────────────────────────────────
   El logo ocupa su ancho natural y la navegación se queda con el resto,
   alineada a la derecha. min-width:0 es lo que impide que un menú largo
   empuje hacia la izquierda y acabe encima del logo. */
.meeta-header-section .header-middle .row {
    flex-wrap: nowrap;
}

/* El tema fija .header-logo en 350 px para un logo de 250: en móvil ese
   hueco empujaba la hamburguesa 54 px fuera de la pantalla */
.meeta-header-section .header-logo {
    flex: 0 0 auto;
    width: auto;
}

/* Al hacer scroll el tema fija la cabecera (.header-sticky.sticky) y la pinta
   en su morado #311a79, que no es de la marca: se queda en el mismo navy que
   en reposo. Una sombra suave la separa del contenido que pasa por debajo. */
.meeta-header-section .header-sticky.sticky {
    background-color: var(--menu-navy);
    border-bottom-color: rgba(255, 255, 255, .12);
    box-shadow: 0 4px 18px rgba(0, 26, 48, .28);
}

/* Con la navegación oculta (hamburguesa), el botón y la hamburguesa van al
   borde derecho, no pegados al logo */
.meeta-header-section .header-middle .row > .col-auto:last-child {
    margin-left: auto;
}

.meeta-header-section .header-logo img {
    max-height: 62px;
    width: auto;
}

.header-navigation-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    /* Aire garantizado contra el logo: sin esto el menú llega a rozarlo
       justo antes de recogerse en la hamburguesa */
    padding-left: 24px;
}

.header-navigation .main-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.meeta-header-section .header-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

/* ── El botón de entradas ─────────────────────────────────────────────────
   Va en el rojo de la «e» del logotipo, no en el morado del tema: ese morado
   no está en la marca y, con el menú ya en silencio, era lo más ruidoso de la
   barra. Acotado a la cabecera; .btn-primary se usa en todo el sitio y
   repintarlo entero es otra conversación. */
.meeta-header-section .header-meta .btn-primary {
    background-color: var(--menu-rojo);
    border-color: var(--menu-rojo);
    border-radius: 2px;
    font-weight: 500;
    letter-spacing: .01em;
    transition: background-color var(--menu-transicion), border-color var(--menu-transicion);
}

.meeta-header-section .header-meta .btn-primary:hover,
.meeta-header-section .header-meta .btn-primary:focus,
.meeta-header-section .header-meta .btn-primary:active {
    background-color: var(--menu-rojo-hondo);
    border-color: var(--menu-rojo-hondo);
}

/* ── Opciones del menú ────────────────────────────────────────────────────
   Caja baja de 15 px en vez de versalitas de 11,5 px muy espaciadas: es lo
   que más pesa en que la barra se lea serena en vez de apretada. Sin fondo,
   sin borde y sin redondeos; la posición la marca una línea, no una caja. */
.header-navigation .enhanced-menu > li {
    position: relative;
    list-style: none;
}

.header-navigation .enhanced-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;         /* si envuelve, la flecha cae debajo del texto */
    min-height: 44px;          /* área cómoda para tocar y para el ratón */
    padding: 8px 16px;
    border-radius: 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    color: var(--menu-texto-reposo);
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: color var(--menu-transicion);
}

/* La regla que marca la posición. Nace escondida bajo el texto y se despliega
   hacia los lados; no mueve la opción de sitio, que descuadraría la fila.
   El segundo selector es para empatar con la regla del tema que mete su propia
   flecha (un glifo de la fuente flaticon) en los ítems con desplegable: si no,
   esa flecha sustituye a la regla y cae suelta debajo del texto. */
.header-navigation .enhanced-menu > li > a::after,
.header-navigation .enhanced-menu > li.menu-item-has-children > a::after {
    content: "";
    font-family: inherit;
    font-size: 0;
    margin-left: 0;
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 12px;
    height: 2px;
    border-radius: 0;
    background: transparent;
    transition: left var(--menu-transicion), right var(--menu-transicion), background-color var(--menu-transicion);
}

/* Al pasar por encima, la regla se insinúa en blanco tenue */
.header-navigation .enhanced-menu > li:hover > a::after,
.header-navigation .enhanced-menu > li:focus-within > a::after,
.header-navigation .enhanced-menu > li.menu-item-has-children:hover > a::after {
    left: 16px;
    right: 16px;
    background: rgba(255, 255, 255, .45);
}

.header-navigation .enhanced-menu > li:hover > a,
.header-navigation .enhanced-menu > li:focus-within > a {
    background: transparent;
    color: var(--menu-texto);
}

/* Donde estás: texto en blanco pleno y la regla en el azul del logotipo */
.header-navigation .enhanced-menu > li.active > a {
    background: transparent;
    color: var(--menu-texto);
}

.header-navigation .enhanced-menu > li.active > a::after,
.header-navigation .enhanced-menu > li.active:hover > a::after {
    left: 16px;
    right: 16px;
    background: var(--menu-senal);
}

/* Se ve con el teclado, no solo con el ratón */
.header-navigation .enhanced-menu > li > a:focus-visible,
.header-navigation .enhanced-submenu li a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Flecha de los que tienen desplegable */
.header-navigation .enhanced-menu > li:has(.enhanced-submenu) > a::before {
    content: "";
    order: 2;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--menu-transicion);
}

.header-navigation .enhanced-menu > li:has(.enhanced-submenu):hover > a::before {
    transform: rotate(225deg) translateY(-2px);
}

/* ── Desplegables ─────────────────────────────────────────────────────────
   Fondo sólido: el translúcido con backdrop-filter se leía mal sobre las
   fotos del hero. */
.header-navigation .enhanced-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: auto;               /* el tema lo fija en 270 px */
    min-width: 215px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--menu-panel);
    /* El tema remata el panel con una franja morada que no pega con el azul */
    border: 1px solid var(--menu-borde);
    border-bottom: 1px solid var(--menu-borde);
    border-radius: 4px;        /* apenas un matado de esquina, no una tarjeta */
    box-shadow: var(--menu-sombra);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--menu-transicion), transform var(--menu-transicion), visibility var(--menu-transicion);
}

/* Puente invisible entre la opción y su panel: sin esto el submenú se cierra
   al bajar el ratón porque hay un hueco de varios píxeles */
.header-navigation .enhanced-submenu::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

/* Punta que señala de qué opción cuelga */
.header-navigation .enhanced-submenu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 26px;
    width: 12px;
    height: 12px;
    background: var(--menu-panel);
    border-left: 1px solid var(--menu-borde);
    border-top: 1px solid var(--menu-borde);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

.header-navigation .enhanced-menu > li:hover > .enhanced-submenu,
.header-navigation .enhanced-menu > li:focus-within > .enhanced-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(6px);
}

.header-navigation .enhanced-submenu li {
    list-style: none;
}

.header-navigation .enhanced-submenu li a {
    display: block;
    padding: 9px 12px;
    border-radius: 0;
    border-left: 2px solid transparent;   /* la misma idea de regla, en vertical */
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    color: var(--menu-texto-sub);
    background: transparent;
    transition: background-color var(--menu-transicion), color var(--menu-transicion), border-color var(--menu-transicion);
}

.header-navigation .enhanced-submenu li a:hover {
    background: rgba(6, 109, 255, .06);
    border-left-color: var(--menu-logo);
    color: var(--menu-navy);
}

/* El tema pinta un punto antes de cada enlace de submenú; aquí estorba */
.header-navigation .enhanced-submenu li a::before,
.header-navigation .enhanced-submenu li a::after {
    display: none;
}

/* El último desplegable se abre hacia dentro para no salirse de la pantalla */
.header-navigation .enhanced-menu > li:last-child .enhanced-submenu {
    left: auto;
    right: 0;
}

.header-navigation .enhanced-menu > li:last-child .enhanced-submenu::before {
    left: auto;
    right: 26px;
}

/* ── Escritorio y hamburguesa ─────────────────────────────────────────────
   El corte está en 1200 px, medido con las siete opciones en caja baja de
   15 px (con «Expositores» y «Reservas stand» acortado a «Stands»): a 1200
   el menú entra en una fila con 78 px de aire sobre el logo. Por debajo se
   recoge en la hamburguesa. Si se añade otra opción, hay que volver a medir. */
@media (max-width: 1199.98px) {
    .header-navigation-wrap {
        display: none;
    }
}

@media (min-width: 1200px) {
    .header-toggle {
        display: none;
    }
}

/* Botón de la hamburguesa */
.header-toggle button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
    transition: background-color var(--menu-transicion), border-color var(--menu-transicion);
}

.header-toggle button:hover {
    background: var(--menu-senal);
    border-color: var(--menu-senal);
}

.header-toggle button span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #ffffff;
}

/* ── Menú móvil (offcanvas) ───────────────────────────────────────────────
   El panel del tema es morado (#311a79) y su hover, morado también, así que
   el texto activo casi no se leía. Aquí toma el azul marino de la cabecera y
   el azul de marca como acento. Va acotado a #offcanvasExample, el panel del
   menú, para no tocar otros offcanvas del sitio.
   Los submenús se pliegan con el botón «+» que añade el JS del tema; eso se
   respeta, solo se le da un aspecto acorde. */
#offcanvasExample {
    background: var(--menu-panel-movil);
    width: 330px;
    max-width: 88vw;
}

#offcanvasExample .offcanvas-header {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

#offcanvasExample .offcanvas-header .close-btn {
    color: #ffffff;
}

.offcanvas-menu .enhanced-menu-mobile {
    margin: 0;
    padding: 0;
    list-style: none;
}

.offcanvas-menu .enhanced-menu-mobile > li {
    position: relative;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.offcanvas-menu .enhanced-menu-mobile > li:last-child {
    border-bottom: 0;
}

.offcanvas-menu .enhanced-menu-mobile > li > a {
    display: block;
    padding: 14px 44px 14px 12px;   /* hueco a la derecha para el botón «+» */
    border-radius: 0;
    border-left: 2px solid transparent;   /* la misma regla del escritorio, en vertical */
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--menu-texto-reposo);
    background: transparent;
    transition: color var(--menu-transicion), border-color var(--menu-transicion);
}

.offcanvas-menu .enhanced-menu-mobile > li > a:hover {
    color: #ffffff;
    border-left-color: rgba(255, 255, 255, .45);
}

.offcanvas-menu .enhanced-menu-mobile > li.active > a {
    color: #ffffff;
    border-left-color: var(--menu-senal);
}

/* El botón «+» que pliega cada submenú */
.offcanvas-menu .enhanced-menu-mobile > li .mobile-menu-expand {
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
}

/* El submenú cuelga con una guía tenue; la regla azul queda reservada para
   marcar dónde estás, que si no pierde su significado */
.offcanvas-menu .enhanced-submenu-mobile {
    margin: 0 0 10px;
    padding: 4px 0 4px 26px;
    list-style: none;
    border-left: 2px solid rgba(255, 255, 255, .14);
    margin-left: 12px;
}

.offcanvas-menu .enhanced-submenu-mobile li a {
    display: block;
    padding: 9px 6px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: rgba(255, 255, 255, .82);
    transition: background-color var(--menu-transicion), color var(--menu-transicion);
}

.offcanvas-menu .enhanced-submenu-mobile li a:hover {
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.offcanvas-menu .enhanced-submenu-mobile li a::before,
.offcanvas-menu .enhanced-submenu-mobile li a::after {
    display: none;
}

/* Quien prefiere menos movimiento, que no lo tenga */
@media (prefers-reduced-motion: reduce) {

    .enhanced-menu > li > a,
    .header-navigation .enhanced-menu > li > a::after,
    .header-navigation .enhanced-submenu,
    .header-navigation .enhanced-submenu li a {
        transition: none;
    }
}

/* ── Botón flotante de WhatsApp ───────────────────────────────────────────
   Vive aquí porque es la hoja que cargan todas las páginas públicas. Antes
   sus estilos estaban solo dentro de index.php y entradas.php, y en el resto
   (expositores, noticias, hoteles, agenda, entradas-2026) el botón salía
   como un icono suelto, sin fondo, sobre una franja blanca antes del pie.
   Va en la misma columna que el botón de volver arriba (.progress-wrap,
   45 px a 50 px del borde), centrado sobre él. */
.whatsapp {
    position: fixed;
    right: 40px;             /* 50 + 45/2 − 64/2: mismo eje que volver arriba */
    bottom: 111px;           /* 50 + 45 + 16 de aire */
    z-index: 100;
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    transition: transform var(--menu-transicion), background-color var(--menu-transicion);
}

.whatsapp a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
}

.whatsapp a i {
    font-size: 36px;
    line-height: 1;
}

.whatsapp:hover {
    transform: scale(1.08);
    background: #1ebe5a;
}

.whatsapp a:focus-visible {
    outline: 3px solid var(--menu-senal);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    /* Volver arriba no se mueve en móvil (50 px): se mantiene el mismo eje */
    .whatsapp {
        right: 44px;         /* 50 + 45/2 − 56/2 */
        bottom: 107px;       /* 50 + 45 + 12 de aire */
        width: 56px;
        height: 56px;
    }

    .whatsapp a i {
        font-size: 30px;
    }
}

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

    .whatsapp:hover {
        transform: none;
    }
}