/* === RESET GLOBAL === */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
a{
    color:inherit;
    text-decoration:none;
}
ul{
    list-style:none;
}
img{
    max-width:100%;
    height:auto;
}

/* === BASE === */
body{
    font-family:Arial,sans-serif;
    line-height:1.6;
    background:#f9f9f9;
    color:#333;
}
html,body{
    height:100%;
}

/* === NAVEGACIÓN (ESCRITORIO) === */
.menu-navegacion{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#002f6c;
    padding:1rem 2rem;
    position:sticky;
    top:0;
    z-index:1000;
    flex-wrap:wrap;
}
.logo-menu{
    width:56px;
    height:56px;
    border-radius:50%;
    border:2px solid #fff;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.logo-menu img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.nav-links{
    display:flex;
    gap:1.5rem;
    flex-wrap:wrap;
    align-items:center;
    margin:0;
    padding-left:0;
}
.nav-links li{
    display:flex;
    align-items:center;
}
.nav-links li a{
    color:#fff;
    font-weight:bold;
    display:block;
    padding:.75rem 1rem;
}
.nav-links li a.activo{
    border-bottom:2px solid #f2d024;
}
.icono-redondo{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #fff;
    display:block;
}
.nav-links-iconos{
    display:flex;
    align-items:center;
    gap:.5rem;
}

/* Botón hamburguesa y iconos móviles: ocultos en desktop */
.btn-menu{
    display:none;
    width:48px;
    height:48px;
    border:2px solid rgba(255,255,255,.6);
    border-radius:10px;
    background:rgba(255,255,255,.08);
    cursor:pointer;
    align-items:center;
    justify-content:center;
}
.btn-menu span{
    display:block;
    width:26px;
    height:3px;
    background:#fff;
    margin:5px 0;
    transition:transform .25s ease,opacity .25s ease;
}
.mobile-icon{
    display:none;
}
.mobile-icon .icono-redondo{
    width:40px;
    height:40px;
}

/* === VIDEO INICIO === */
.video-cabecera{
    position:relative;
    width:100%;
    height:60vh;
    min-height:300px;
    overflow:hidden;
    background:#000;
}
.video-cabecera video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    background:#000;
}
.texto-superpuesto{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    text-align:center;
    background:rgba(0,0,0,.5);
    padding:1.5rem 2rem;
    border-radius:.5rem;
    z-index:1;
}
.texto-superpuesto h1,.texto-superpuesto h2{
    margin:.5rem 0;
    font-weight:bold;
}

/* === CABECERA CON LOGOS === */
.cabecera{
    background:#fff;
    padding:2rem 1rem;
    text-align:center;
    border-bottom:1px solid #ccc;
}
.titulo-con-logos{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    max-width:1200px;
    margin:0 auto;
}
.logo-lateral{
    width:80px;
    height:auto;
}
.titulos{
    flex:1;
    text-align:center;
}
.titulos h1{
    font-size:2rem;
}
.titulos h2{
    font-size:1.2rem;
    color:#666;
}

/* === CONTENIDO PRINCIPAL === */
main{
    padding:2rem 1rem;
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
.saludo h2,.saludo h3,.ubicacion h2{
    text-align:center;
    margin-bottom:1rem;
}
.saludo p,.saludo ul{
    margin-bottom:1rem;
    margin-left:auto;
    margin-right:auto;
}
.saludo ul li{
    list-style:disc;
    margin-left:1.5rem;
}

/* Bloque con imagen */
.bloque-con-imagen{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    gap:2rem;
    flex-wrap:wrap;
    margin-bottom:2rem;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
}
.bloque-con-imagen .imagen-saludo{
    max-width:300px;
    width:100%;
    height:auto;
    flex-shrink:0;
    border-radius:.5rem;
}
.bloque-con-imagen .texto-saludo{
    flex:1 1 0;
    min-width:250px;
}

/* === MAPA === */
.ubicacion .mapa{
    max-width:800px;
    margin:0 auto 1rem;
    border-radius:.5rem;
    overflow:hidden;
}
.mapa iframe{
    width:100%;
    height:450px;
    border:0;
    display:block;
    border-radius:.5rem;
}
.btn-mapa{
    display:block;
    text-align:center;
    margin:1rem auto;
    background:#002f6c;
    color:#fff;
    padding:.75rem 1.5rem;
    border-radius:.5rem;
    width:fit-content;
}

/* === PLANO E IMAGEN FINAL === */
.plano-general,.imagen-final{
    max-width:800px;
    margin:2rem auto;
    text-align:center;
}
.plano-general img,.imagen-final img{
    max-width:100%;
    border-radius:.5rem;
    cursor:pointer;
    transition:transform .3s ease;
    display:inline-block;
}
.plano-general img.ampliada{
    transform:scale(1.5);
}

/* === HISTORIA SIMPLE === */
.historia{
    padding:2rem 1rem;
    background:#fff;
    color:#333;
}
.contenedor-historia{
    max-width:1000px;
    margin:0 auto;
    line-height:1.7;
    font-size:1rem;
    text-align:justify;
    font-family:inherit;
}
.contenedor-historia h2{
    text-align:center;
    font-size:2rem;
    margin-bottom:1.5rem;
    color:#002f6c;
}
.imagen-centro{
    display:block;
    margin:2rem auto;
    max-width:300px;
    width:100%;
    height:auto;
}

/* === PATROCINADORES === */
.seccion-patrocinadores{
    padding:2rem 1rem;
    max-width:1200px;
    margin:0 auto;
}
.grid-patrocinadores{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:2rem;
    justify-items:center;
    align-items:center;
}
.grid-patrocinadores img{
    max-height:100px;
    object-fit:contain;
}
a.resaltado{
    font-weight:bold;
    text-decoration:underline;
    display:block;
    text-align:center;
    margin-bottom:.5rem;
    color:inherit;
}

/* === FICHAS EXHIBICIÓN === */
.fichas-aviones{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:2rem;
}
.ficha-avion{
    background:#f7f9fc;
    border:1px solid #ccc;
    border-radius:10px;
    display:flex;
    flex-direction:row;
    width:calc(50% - 1rem);
    max-width:550px;
    padding:1rem;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    flex:0 0 auto;
}
.ficha-avion:last-child:nth-child(odd){
    margin-left:auto;
    margin-right:auto;
}
.imagen-avion{
    margin-right:1rem;
}
.imagen-avion img{
    width:100px;
    border-radius:6px;
}
.info-avion h3{
    margin-top:0;
    color:#003366;
}
.acordeon button{
    width:100%;
    margin-top:.3rem;
    padding:.5rem;
    background:#003366;
    color:#fff;
    border:none;
    border-radius:5px;
    font-weight:bold;
    font-size:.9rem;
    cursor:pointer;
}
.contenido-acordeon{
    display:none;
    padding:.5rem;
    background:#e8f0fe;
    border-left:3px solid #003366;
    border-radius:4px;
    margin-bottom:.5rem;
    font-size:.9rem;
}

/* === FOOTER === */
.footer-completo{
    background:#002f6c;
    color:#fff;
    text-align:center;
    padding:1rem;
    margin-top:2rem;
    width:100%;
}
footer.footer-completo{
    flex-shrink:0;
    background:#003366;
    color:#fff;
    text-align:center;
    padding:1rem 0;
    position:relative;
}
#btnVolverArriba{
    position:fixed;
    bottom:20px;
    right:20px;
    padding:.75rem 1rem;
    font-size:1.2rem;
    background:#002f6c;
    color:#fff;
    border:none;
    border-radius:50%;
    cursor:pointer;
    display:none;
    z-index:999;
}

/* === TARJETAS / NOTICIAS === */
.tarjeta-noticia{
    display:flex;
    gap:1.5rem;
    flex-wrap:nowrap;
    background:#f8f9fa;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    overflow:hidden;
    padding:1.5rem;
    align-items:center;
}
.tarjeta-noticia>img{
    width:64px;
    height:64px;
    flex-shrink:0;
}
.imagen-entrevista{
    display:block;
    max-width:500px;
    width:100%;
    height:auto;
    margin:1.5rem auto;
    border-radius:8px;
    cursor:zoom-in;
}
.contenido-noticia{
    flex:1;
}
.reproductor-audio{
    width:100%;
    margin-top:1rem;
    outline:none;
}

/* === ALÍSTATE === */
.seccion-alistate{
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
    align-items:center;
    margin-bottom:2rem;
}
.imagen-folleto{
    flex:1 1 300px;
    text-align:center;
}
.imagen-folleto img{
    max-width:100%;
    height:auto;
    border-radius:8px;
}
.imagen-folleto p{
    margin-top:.5rem;
    font-style:italic;
    color:#002f6c;
}
.texto-alistate{
    flex:2 1 600px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.5rem;
}
.texto-alistate h2{
    color:#002f6c;
    margin-bottom:.5rem;
}
.texto-alistate ul{
    padding-left:1.2rem;
    list-style:disc;
}
.texto-alistate li{
    margin-bottom:.3rem;
}
.imagen-fondo-alistate{
    text-align:center;
    margin-top:3rem;
}
.imagen-fondo-alistate img{
    max-width:100%;
    height:auto;
    border-radius:8px;
}
.bloque-info{
    background:transparent;
    border:none;
    padding:0;
}
.bloque-info a{
    color:#0645ad;
    text-decoration:underline;
}
.bloque-info a:hover{
    color:#002f6c;
}

/* === GALERÍA === */
.galeria{
    padding:2rem;
    max-width:1200px;
    margin:0 auto;
    text-align:center;
}
.galeria h2{
    font-size:2rem;
    color:#002f6c;
    margin-bottom:1.5rem;
}
.grid-galeria{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:1rem;
}
.imagen-miniatura{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    transition:transform .2s ease;
}
.imagen-miniatura:hover{
    transform:scale(1.05);
}
.carrusel{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:1rem;
}
.carrusel img{
    max-height:80vh;
    max-width:90vw;
    margin-bottom:1rem;
    border-radius:10px;
}
.oculto{
    display:none;
}
.cerrar{
    position:absolute;
    top:20px;
    right:30px;
    font-size:2.5rem;
    color:#fff;
    cursor:pointer;
}
#descargarImagen{
    background:#f2d024;
    color:#002f6c;
    padding:.5rem 1rem;
    font-weight:bold;
    text-decoration:none;
    border-radius:6px;
    margin-bottom:1rem;
}
.controles button{
    background:none;
    border:none;
    font-size:3rem;
    color:#fff;
    cursor:pointer;
    margin:0 2rem;
}

/* === SECCIÓN EXHIBICIÓN === */
.seccion-exhibicion{
    max-width:1000px;
    margin:2rem auto;
    padding:0 1rem;
    background:#fff;
}
.titulo-seccion{
    font-size:1.8rem;
    color:#002f6c;
    margin-bottom:1.5rem;
    text-align:center;
    border-bottom:2px solid #ccc;
    padding-bottom:.5rem;
}
.presentacion-bloques,.participantes-bloques{
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
    justify-content:space-between;
    margin-bottom:2rem;
}
.bloque-info,.bloque-lista{
    flex:1 1 45%;
    background:#fff;
    padding:1.5rem;
    border:1px solid #ddd;
    border-radius:.5rem;
}
.bloque-lista h3{
    color:#002f6c;
    margin-top:1rem;
    margin-bottom:.5rem;
}
.bloque-lista ul{
    padding-left:1rem;
    list-style:none;
}
.bloque-lista ul li{
    margin-bottom:.3rem;
    padding-left:.5rem;
    position:relative;
}
.bloque-lista ul li::before{
    content:'';
    position:absolute;
    left:0;
    top:.6em;
    width:.4em;
    height:.4em;
    background:#002f6c;
    border-radius:50%;
}

/* === RESPONSIVE 768px === */
@media (max-width:768px){
    .titulo-con-logos{
        flex-direction:column;
        align-items:center;
        gap:1rem;
    }
    .ficha-avion{
        width:100%;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .imagen-avion{
        margin:0 0 1rem 0;
    }
    .texto-superpuesto{
        font-size:1.2rem;
        padding:.4em .8em;
    }
    .presentacion-bloques,.participantes-bloques{
        flex-direction:column;
    }
    .seccion-alistate{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .texto-alistate{
        align-items:center;
    }
    .texto-alistate ul{
        text-align:left;
    }
    .tarjeta-noticia{
        flex-direction:column;
        align-items:center;
        gap:1rem;
    }
    .contenido-noticia{
        text-align:center;
    }
    .imagen-entrevista{
        max-width:90%;
    }
}

/* === RESPONSIVE 600px (MENÚ COLAPSABLE + ICONOS LATERALES) === */
@media (max-width:600px){
    /* Ocultar bloque de 3 iconos del UL */
    .nav-links-iconos{
        display:none !important;
    }

    /* Barra superior: [izqIcono][logo][hamb][derIcono] */
    .menu-navegacion{
        display:grid;
        grid-template-columns:auto 1fr auto auto;
        align-items:center;
        gap:.5rem;
        padding:.5rem .75rem;
    }

    /* Mostrar iconos laterales y botón */
    .mobile-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }
    .btn-menu{
        display:inline-flex;
    }

    .mobile-left{
        grid-column:1;
    }
    .logo-menu{
        grid-column:2;
        justify-self:center;
    }
    .btn-menu{
        grid-column:3;
    }
    .mobile-right{
        grid-column:4;
    }

    /* UL colapsable debajo */
    .nav-links{
        grid-column:1 / -1;
        display:block;
        max-height:0;
        overflow:hidden;
        opacity:0;
        transition:max-height .3s ease,opacity .25s ease;
        margin-top:.25rem;
    }
    .nav-links li{
        display:block;
    }
    .nav-links li a{
        display:block;
        text-align:center;
        padding:.9rem 0;
        border-top:1px solid rgba(255,255,255,.12);
    }

    /* Abierto */
    .menu-navegacion.abierto .nav-links{
        max-height:90vh;
        opacity:1;
    }

    /* Animación hamburguesa → X */
    .menu-navegacion.abierto .btn-menu span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }
    .menu-navegacion.abierto .btn-menu span:nth-child(2){
        opacity:0;
    }
    .menu-navegacion.abierto .btn-menu span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }
}

/* === LAYOUT GLOBAL === */
body{
    display:flex;
    flex-direction:column;
}
main{
    flex:1 0 auto;
    max-width:1000px;
    margin:2rem auto;
    padding:0 1rem;
    width:100%;
}

/* === OVERRIDES (PRIORIDAD) === */
main{
    text-align:justify;
    text-justify:inter-word;
}


/* Botón: sin borde ni fondo, 3 barras centradas */
.btn-menu{
    border: none !important;
    background: transparent !important;
    padding: 0;
    width: 48px;
    height: 48px;
    display: none;                 /* desktop oculto */
    align-items: center;
    justify-content: center;
    flex-direction: column;        /* apila las barras */
    gap: 6px;                      /* separación uniforme */
    cursor: pointer;
}
.btn-menu span{
    display: block;
    width: 26px;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
    margin: 0;                     /* sin márgenes extra */
}

/* MÓVIL: grid con logo *realmente centrado* y botón visible */
@media (max-width: 600px){
    .menu-navegacion{
        display: grid;
        grid-template-columns: 48px 1fr 48px 48px; /* [icono izq][LOGO][hamb][icono der] */
        align-items: center;
        gap: .5rem;
        padding: .5rem .75rem;
    }
    .mobile-icon{
        display: inline-flex;
        align-items:center;
        justify-content:center;
    }
    .mobile-left  {
        grid-column: 1;
        justify-self: start;
    }
    .logo-menu    {
        grid-column: 2;
        justify-self: center;
    }
    .btn-menu     {
        grid-column: 3;
        justify-self: center;
        display: inline-flex;
    }
    .mobile-right {
        grid-column: 4;
        justify-self: end;
    }

    /* Oculta el bloque de 3 iconos dentro del menú en móvil */
    .nav-links-iconos{
        display: none !important;
    }

    /* Menú desplegable (igual que antes) */
    .nav-links{
        grid-column: 1 / -1;
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .3s ease, opacity .25s ease;
        margin-top: .25rem;
    }
    .menu-navegacion.abierto .nav-links{
        max-height: 90vh;
        opacity: 1;
    }

    .nav-links li{
        display: block;
    }
    .nav-links li a{
        display: block;
        text-align: center;
        padding: .9rem 0;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    /* Animación a “X” */
    .menu-navegacion.abierto .btn-menu span:nth-child(1){
        transform: translateY(9px) rotate(45deg);
    }
    .menu-navegacion.abierto .btn-menu span:nth-child(2){
        opacity: 0;
    }
    .menu-navegacion.abierto .btn-menu span:nth-child(3){
        transform: translateY(-9px) rotate(-45deg);
    }
}
/* Centrado perfecto del logo en móvil: 5 columnas simétricas */
@media (max-width: 600px){
    /* [icono izq][espaciador 48][LOGO 1fr][hamb 48][icono der 48] */
    .menu-navegacion{
        display: grid;
        grid-template-columns: 48px 48px 1fr 48px 48px;
        align-items: center;
        gap: .5rem;
        padding: .5rem .75rem;
    }

    .mobile-left  {
        grid-column: 1;
        justify-self: start;
    }
    /* col 2 queda vacío como espaciador */
    .logo-menu    {
        grid-column: 3;
        justify-self: center;
    }
    .btn-menu     {
        grid-column: 4;
        justify-self: center;
        display: inline-flex;
    }
    .mobile-right {
        grid-column: 5;
        justify-self: end;
    }

    /* resto igual */
    .nav-links{
        grid-column: 1 / -1;
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .3s ease, opacity .25s ease;
        margin-top: .25rem;
    }
    .menu-navegacion.abierto .nav-links{
        max-height: 90vh;
        opacity: 1;
    }

    .nav-links-iconos{
        display: none !important;
    }
}

/* === MÓVIL ÚNICO: 2 iconos izq + logo centrado + hamburguesa dcha === */
@media (max-width:600px){
    .menu-navegacion{
        display:grid;
        grid-template-columns: 48px 48px 1fr 48px !important; /* left1 left2 logo hamb */
        grid-template-areas: "left1 left2 logo hamb";
        align-items:center;
        gap:.5rem;
        padding:.5rem .75rem;
    }

    /* Asegura que no haya márgenes que rompan la fila */
    .menu-navegacion > *{
        min-width:0;
        margin:0 !important;
    }

    .mobile-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }
    .mobile-left  {
        grid-area:left1;
        justify-self:start;
    }
    .mobile-right {
        grid-area:left2;
        justify-self:start;
    } /* segundo icono también a la izq */

    .logo-menu {
        grid-area:logo;
        justify-self:center;
    }
    .btn-menu  {
        grid-area:hamb;
        justify-self:end;
        display:inline-flex;
    }

    /* Oculta los 3 iconos del UL en móvil */
    .nav-links-iconos{
        display:none !important;
    }

    /* Menú desplegable */
    .nav-links{
        grid-column:1 / -1;
        display:block;
        max-height:0;
        overflow:hidden;
        opacity:0;
        transition:max-height .3s ease, opacity .25s ease;
        margin-top:.25rem;
    }
    .menu-navegacion.abierto .nav-links{
        max-height:90vh;
        opacity:1;
    }

    .nav-links li{
        display:block;
    }
    .nav-links li a{
        display:block;
        text-align:center;
        padding:.9rem 0;
        border-top:1px solid rgba(255,255,255,.12);
    }

    /* Animación hamburguesa → X */
    .menu-navegacion.abierto .btn-menu span:nth-child(1){
        transform:translateY(9px) rotate(45deg);
    }
    .menu-navegacion.abierto .btn-menu span:nth-child(2){
        opacity:0;
    }
    .menu-navegacion.abierto .btn-menu span:nth-child(3){
        transform:translateY(-9px) rotate(-45deg);
    }
}
/* Ajuste fino del centrado visual del logo SOLO en móvil */
@media (max-width:600px){
    .menu-navegacion{
        --cell:48px;
        --gap:.5rem;
    } /* igual que tus medidas */
    .logo-menu{
        /* desplaza a la izquierda aprox. medio icono + gap */
        transform: translateX(calc(-1 * (var(--cell) + var(--gap)) / 2));
    }
}

/* === CÓMO LLEGAR (bloque) === */
#como-llegar .intro{
    margin:.25rem 0 1rem;
    color:#334155
}
#como-llegar .grid-opciones{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin:16px 0 6px;
}
#como-llegar .card-opcion{
    padding:18px
}
#como-llegar .card-header h3{
    margin:0 0 .25rem;
    color:#0b2a5a
}
#como-llegar .muted{
    color:#64748b;
    font-size:.95rem
}
#como-llegar .subcard{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:14px 16px;
    margin:14px 0
}
#como-llegar h4{
    margin:0 0 .4rem;
    color:#133a7a;
    font-size:1.05rem
}
#como-llegar .cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin:.6rem 0 .4rem
}
#como-llegar .btn-primario,
#como-llegar .btn-secundario{
    display:inline-block;
    padding:.6rem .9rem;
    border-radius:10px;
    font-weight:700;
    font-size:.95rem;
    line-height:1;
}
#como-llegar .btn-primario{
    background:#002f6c;
    color:#fff
}
#como-llegar .btn-primario:hover{
    filter:brightness(1.1)
}
#como-llegar .btn-secundario{
    background:#e8eefc;
    color:#0b2a5a
}
#como-llegar .mapa{
    border-radius:10px;
    overflow:hidden;
    margin:.6rem 0;
    border:1px solid #e5e7eb
}
#como-llegar .mapa iframe{
    width:100%;
    height:320px;
    border:0;
    display:block
}
#como-llegar .info-operativa{
    margin:.6rem 0 0
}
#como-llegar .notas{
    margin-top:.6rem
}
@media (max-width:900px){
    #como-llegar .grid-opciones{
        grid-template-columns:1fr
    }
}

/* Menú flotante lateral / barra móvil */
.menu-flotante-llegar{
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    width: 220px;
    background: #ffffffcc;
    backdrop-filter: blur(6px);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(10,35,80,.12);
    padding: 12px;
}
.menu-flotante-llegar .pregunta{
    margin:0 0 8px;
    font-weight:700;
    color:#0b2a5a;
    font-size:.95rem
}
.menu-flotante-llegar .opciones{
    display:grid;
    gap:8px
}
.menu-flotante-llegar .btn-ml{
    display:grid;
    grid-template-columns:28px 1fr;
    align-items:center;
    gap:10px;
    width:100%;
    border:1px solid #e5e7eb;
    background:#f8fafc;
    color:#0b1b3a;
    border-radius:12px;
    padding:10px 12px;
    font-weight:700;
    cursor:pointer;
    transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.menu-flotante-llegar .btn-ml:hover{
    transform: translateY(-1px);
    box-shadow:0 6px 16px rgba(10,35,80,.08);
}
.menu-flotante-llegar .btn-ml svg{
    width:22px;
    height:22px;
    fill:currentColor;
    opacity:.9
}
.menu-flotante-llegar .btn-ml.activo{
    background:#002f6c;
    color:#fff;
    border-color:#002a5a
}

/* Evita solaparse con el contenido en desktop */
@media (min-width:901px){
    .contenido-historia .container{
        margin-left: max(260px, 8vw);
    }
}

/* Móvil/Tablet: barra inferior fija */
@media (max-width:900px){
    .menu-flotante-llegar{
        left:0;
        right:0;
        bottom:0;
        top:auto;
        transform:none;
        width:100%;
        border-radius:16px 16px 0 0;
        padding:10px 12px 12px;
    }
    .menu-flotante-llegar .pregunta{
        text-align:center;
        margin-bottom:8px
    }
    .menu-flotante-llegar .opciones{
        grid-template-columns:1fr 1fr
    }
    body{
        padding-bottom:84px;
    } /* hueco para la barra */
}

/* Resaltado breve al hacer scroll */
#op-bus.resaltado, #op-coche.resaltado{
    box-shadow:0 0 0 3px rgba(0,47,108,.15) inset;
}

/* Utilidad accesible (si no la tienes ya) */
.sr-only{
    position:absolute!important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
/* ===== Enfoque escritorio: mostrar solo una opción ===== */
@media (min-width: 901px){
    /* Estado “solo bus” */
    #como-llegar.solo-bus .grid-opciones{
        grid-template-columns:1fr; /* una sola columna */
    }
    #como-llegar.solo-bus #op-coche{
        display:none;
    }
    #como-llegar.solo-bus #op-bus{
        animation: popIn .18s ease;
    }

    /* Estado “solo coche” */
    #como-llegar.solo-coche .grid-opciones{
        grid-template-columns:1fr;
    }
    #como-llegar.solo-coche #op-bus{
        display:none;
    }
    #como-llegar.solo-coche #op-coche{
        animation: popIn .18s ease;
    }

    /* Botón “Ver ambas” visible en desktop cuando hay enfoque */
    .btn-reset-vista{
        margin-top:10px;
        width:100%;
        background:#e8eefc;
        color:#0b2a5a;
        border:1px solid #dbe3ff;
        border-radius:10px;
        padding:.55rem .8rem;
        font-weight:700;
        cursor:pointer;
    }
    #como-llegar.solo-bus  .btn-reset-vista,
    #como-llegar.solo-coche .btn-reset-vista{
        display:block;
    }
}

/* Móvil: ocultamos el botón de reset para no cambiar el comportamiento */
@media (max-width:900px){
    .btn-reset-vista{
        display:none !important;
    }
}

/* Animación suave al enfocar */
@keyframes popIn{
    from{
        transform:scale(.99);
        opacity:.96
    }
    to{
        transform:scale(1);
        opacity:1
    }
}


/* FIx imagen logo final azul */

/* FIX imagen-final: mismo ancho y offset que el contenido */
.imagen-final .container{
    width:min(980px,92vw);
    margin:36px auto 10px;
}
.imagen-final .container img{
    width:100% !important;
    max-width:none !important;
    height:auto;
    display:block;
    border-radius:14px;
    box-shadow:0 8px 30px rgba(10,35,80,.08);
}
@media (min-width:901px){
    .imagen-final .container{
        margin-left:max(260px,8vw);
    }
}

/* -----------------------------------------------------*/
/* --- Móvil / tablet: barra inferior más relevante --- */
/* -----------------------------------------------------*/

@media (max-width:900px){
    #cta-triptico{
        left:12px !important;
        right:12px !important;
        bottom:12px;
        top:auto !important;
        width:auto;
        max-width:none;
        border-radius:16px;
        padding:12px 12px;
    }
    #cta-triptico .cta-content{
        gap:10px;
    }
    #cta-triptico .cta-text h3{
        font-size:1rem;
    }
    #cta-triptico .cta-text .cta-desc{
        display:block;
    }
    #cta-triptico .btn-descargar{
        flex-shrink:0;
    }
    body{
        padding-bottom:88px;
    } /* hueco para que no tape contenido */
}

/* Contenedor responsivo del vídeo */
.video-wrap{
    width:100%;              /* <- que respete el ancho del contenedor */
    max-width:1000px;        /* igual que el contenido */
    margin:0 auto;           /* centrado */
    aspect-ratio:16/9;
    position:relative;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(10,35,80,.08);
    background:#000;
}
.video-wrap iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}
/* Fallback sin aspect-ratio (mantener) */
@supports not (aspect-ratio: 1 / 1){
    .video-wrap{
        height:0;
        padding-bottom:56.25%;
    }
    .video-wrap iframe{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
}


/* Ajustes menores para integrarlo con tu grid y cards */
#video-presentacion .card-header h3{
    margin-bottom: .25rem;
}
#video-presentacion .muted{
    color:#576b8f;
    margin:0;
}


/* === Sección de descarga (en línea) === */
.seccion-descarga{
  max-width:1000px;
  margin:24px auto 32px;
  padding:0 1rem;
}
.descarga-card{
  display:flex;
  align-items:center;
  gap:16px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px 20px;
  box-shadow:0 10px 28px rgba(10,35,80,.08);
}
.descarga-ico{
  width:44px;
  height:44px;
  border-radius:10px;
  background:#002f6c;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.descarga-content h2{
  margin:0 0 4px;
  font-size:1.25rem;
  line-height:1.2;
  color:#0b2a5a;
  font-weight:800;
}
.descarga-desc{
  margin:.1rem 0 .6rem;
  color:#475569;
}
.descarga-acciones{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.btn-descargar{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.6rem .9rem;
  border-radius:10px;
  text-decoration:none;
  background:#002f6c;
  color:#fff;
  font-weight:800;
  white-space:nowrap;
}
.btn-descargar:hover{ filter:brightness(1.08); }
.meta{ color:#6b7280; font-size:.95rem; }

@media (max-width:700px){
  .descarga-card{ flex-direction:row; align-items:flex-start; }
  .descarga-content h2{ font-size:1.15rem; }
}
/* ============================================================
   INDEX — POLISH VISUAL (solo estilos; no cambia tu HTML)
   ============================================================ */
/* =========================================================
   INDEX — Modern Look (override final, sin tocar el HTML)
   ========================================================= */
body.index{
  /* Paleta y tokens */
  --container: 1000px;
  --gutter: 18px;
  --ink: #0e1025;
  --muted: #6c738b;
  --brand: #123e8a;
  --brand-2: #0b2a5a;
  --brand-acc: #2f7df4;          /* acento */
  --card: #ffffff;
  --border: color-mix(in srgb, #1e293b 12%, #fff 88%);
  --radius: 18px;
  --radius-lg: 22px;
  --shadow-1: 0 6px 18px rgba(14,35,90,.10);
  --shadow-2: 0 14px 34px rgba(14,35,90,.14);
  --ring: 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent);
  background:
    radial-gradient(1200px 600px at 90% -10%, #e6f0ff 0%, transparent 60%),
    radial-gradient(1000px 500px at -10% 20%, #f3f7ff 0%, transparent 55%),
    linear-gradient(#f6f8fc, #eef2f8);
  color: var(--ink);
}

/* Contenedor único y ritmo vertical */
body.index main,
body.index .cabecera .titulo-con-logos,
body.index #video-presentacion,
body.index .imagen-final{
  max-width: var(--container) !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
}
body.index main{ margin-block: 34px 52px !important; }

/* ---------------- NAV: subrayado “fluid” para activo/hover ---------------- */
body.index .nav-links li a{
  position:relative;
  font-weight:700;
}
body.index .nav-links li a::after{
  content:""; position:absolute; left:12%; right:12%; bottom:8px; height:2px;
  background: linear-gradient(90deg, transparent, var(--brand-acc), transparent);
  transform: scaleX(0); transform-origin:center;
  transition: transform .25s ease;
}
body.index .nav-links li a:hover::after,
body.index .nav-links li a.activo::after{
  transform: scaleX(1);
}

/* ---------------- Hero cabecera (glass) ---------------- */
body.index .cabecera{
  position:relative;
  padding: 30px var(--gutter) 24px;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #ffffff 80%, #f7fbff 20%);
  backdrop-filter: saturate(120%) blur(4px);
  box-shadow: var(--shadow-1);
}
body.index .cabecera .titulo-con-logos{
  display:flex; align-items:center; justify-content:space-between; gap:22px;
}
body.index .cabecera .logo-lateral{
  height:74px; width:auto; filter: drop-shadow(0 2px 7px rgba(0,0,0,.08));
}
body.index .cabecera .titulos h1{
  margin:0; letter-spacing:.2px; text-align:center;
  font-size: clamp(1.8rem, 2.2vw + 1.2rem, 2.3rem);
  color: var(--ink);
}
body.index .cabecera .titulos h2{
  margin:.4rem 0 0; font-size:1.05rem; color:var(--muted); text-align:center;
}

/* ---------------- SALUDO: card “soft” con título píldora ---------------- */
body.index .saludo{
  position:relative;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 26px 22px 28px;
  isolation:isolate;            /* para blobs decorativos */
}
body.index .saludo::before{
  /* blob suave decorativo detrás de la foto */
  content:""; position:absolute; inset:auto auto 12% -6%;
  width:280px; height:280px; z-index:-1; filter:blur(42px);
  background: radial-gradient(closest-side, #bcd6ff 0%, transparent 70%);
  opacity:.6;
}
body.index .saludo h2{
  margin:0 0 4px; text-align:center;
  font-size:1.35rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--brand-2);
}
body.index .saludo h3{
  margin:0 0 18px; text-align:center; color:#8a93a5; font-size:1rem;
}

/* Píldora debajo del título */
body.index .saludo h2 + h3::after{
  content:""; display:block; height:10px; width:120px; margin:10px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--brand-acc), transparent);
  opacity:.55;
}

body.index .saludo > p{
  max-width: 70ch; margin-inline:auto; color:#2a3150;
}
body.index .bloque-con-imagen{
  display:grid !important;
  grid-template-columns: 260px 1fr;
  gap: 26px; align-items:start;
  margin: 14px auto 16px; max-width: 920px;
  display: block !important; /* rompe el grid y deja flotar la imagen */

}
body.index .imagen-saludo{
  width:100%; border-radius:16px;
  border:1px solid var(--border);
  box-shadow: 0 12px 28px rgba(12,30,70,.14);
}
body.index .texto-saludo p{ margin:0 0 12px; }

/* ---------------- VIDEO CARD: header degradado + micro-interacción -------- */
body.index #video-presentacion{ margin-top: 30px; }
body.index #video-presentacion .video-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .22s ease;
}
body.index #video-presentacion .video-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(12,35,90,.16);
}
body.index #video-presentacion .card-header{
  display:flex; align-items:center; gap:12px;
  padding: 14px 18px;
  background:
    linear-gradient(180deg, #f8fbff 0, #eff5ff 55%, #eaf2ff 100%);
  border-bottom:1px solid var(--border);
}
body.index #video-presentacion .card-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background: radial-gradient(60% 60% at 30% 30%, #3a8bff, #1f51c6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.18);
}
body.index #video-presentacion .card-titles h3{
  margin:0; font-size:1.12rem; color:var(--brand-2); font-weight:800;
}
body.index #video-presentacion .card-titles .muted{
  margin:0; color:#7d879a; font-size:.92rem;
}
body.index #video-presentacion .card-body{ padding:0; }

/* Player 16:9 perfecto */
body.index #video-presentacion .player{
  position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;
}
/* brillos sutiles en borde del player */
body.index #video-presentacion .player::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}
body.index #video-presentacion .player iframe{
  position:absolute; inset:0; width:100% !important; height:100% !important; border:0;
}

/* Cinturón extra */
body.index #video-presentacion iframe{
  display:block; width:100% !important; height:auto !important; aspect-ratio:16/9; border:0;
}
@supports not (aspect-ratio:1/1){
  body.index #video-presentacion .player{ height:0; padding-bottom:56.25%; }
  body.index #video-presentacion .player iframe{ position:absolute; top:0; left:0; width:100% !important; height:100% !important; }
}

/* ---------------- Imagen final: tilt sutil y profundidad ------------------ */
body.index .imagen-final{ margin-top: 28px; }
body.index .imagen-final img{
  width:100%; border-radius: var(--radius-lg);
  border:1px solid var(--border);
  box-shadow: var(--shadow-2);
  transform: perspective(1200px) rotateX(0deg);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
body.index .imagen-final img:hover{
  transform: perspective(1200px) rotateX(1.2deg);
  box-shadow: 0 22px 60px rgba(12,35,90,.18);
  filter: saturate(1.04);
}

/* ---------------- Footer alineado y limpio ------------------------------- */
body.index footer.footer-completo{
  padding-inline: var(--gutter) !important;
  overflow-x: clip;
}

/* ---------------- Accesibilidad y motion ------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------------- Responsive tweaks ------------------------------------- */
@media (max-width: 920px){
  body.index .bloque-con-imagen{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  body.index .cabecera .titulo-con-logos{ flex-direction:column; gap:12px; }
  body.index .cabecera .logo-lateral{ height:64px; }
}
/* =========================================================
   SALUDO — split-card: foto + texto perfectamente integrados
   (no requiere cambios de HTML)
   ========================================================= */
/* ============================
   SALUDO — split-card limpio
   (sin card envolvente; imagen 4:5)
   ============================ */

/* 1) Quitar el card superior de la sección */
body.index .saludo{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px !important;
}

/* ===== SALUDO: split-card con figure/figcaption (sin huecos) ===== */
/* ===== SALUDO: imagen arriba-izquierda y texto fluido ===== */
/* ===== SALUDO: imagen arriba-izquierda con texto fluido alrededor ===== */
body.index .saludo .bloque-con-imagen {
  display: block;
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(12, 30, 70, .10);
  padding: 16px;
  max-width: 980px;
  margin: 8px auto 16px;
  overflow: hidden;
}

/* Imagen flotada a la izquierda */
body.index .saludo .retrato-autor {
  float: left;
  margin: 0 18px 12px 0; /* margen a la derecha e inferior */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e9edf4;
  background: #fff;
  box-shadow: 0 6px 16px rgba(10,25,60,.08);
  width: auto;            /* mantiene tamaño natural */
  max-width: 270px;       /* opcional para evitar exceso de ancho */
}

/* Imagen dentro del figure */
body.index .saludo .imagen-saludo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  border: 0 !important;
}

/* Pie de foto */
body.index .saludo .retrato-autor figcaption {
  padding: 10px 12px 12px;
  background: linear-gradient(180deg,#f8fbff 0,#eef3fb 100%);
  border-top: 1px solid #e6ebf5;
  font-size: .92rem;
  line-height: 1.25;
  color: #14213d;
  text-align: center;
}
body.index .saludo .retrato-autor figcaption strong {
  display: block;
  font-weight: 800;
  color: #0b2a5a;
}
body.index .saludo .retrato-autor figcaption span {
  display: block;
  color: #5e6b84;
  font-size: .88rem;
}

/* Texto fluido alrededor (sin cortar el float) */
body.index .saludo .texto-saludo {
  display: block;
}
body.index .saludo .texto-saludo p {
  margin: 0 0 12px;
  color: #1f2942;
  line-height: 1.72;
}
body.index .saludo .texto-saludo p:last-child {
  margin-bottom: 0;
}

/* Limpieza después del float para evitar solapamientos */
body.index .saludo .bloque-con-imagen::after {
  content: "";
  display: block;
  clear: both;
}

/* Responsive: imagen centrada arriba en móvil */
@media (max-width: 900px) {
  body.index .saludo .retrato-autor {
    float: none;
    margin: 0 auto 16px;
    max-width: 100%;
    display: block;
  }
  body.index .saludo .imagen-saludo {
    width: 100%;
    height: auto;
  }
}

/* ================= NAV — HOTFIX ================= */
/* Evita que el UL se parta en 2 líneas en desktop */
.nav-links{ flex-wrap: nowrap; }

/* Punto de corte único (ajusta 820→900 si quieres colapsar antes) */
@media (max-width: 820px){

  /* Barra superior: [icono izq opcional][LOGO centrado][hamburguesa] */
  .menu-navegacion{
    display: grid !important;
    grid-template-columns: 48px 1fr 48px !important;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
  }

  /* Iconos laterales: ocúltalos o déjalos solo el izquierdo */
  .mobile-left,
  .mobile-right{
    display: none !important;
  }

  .logo-menu{
    grid-column: 2 !important;
    justify-self: center !important;
  }

  .btn-menu{
    grid-column: 3 !important;
    justify-self: end !important;
    display: inline-flex !important;
    border: none !important;
    background: transparent !important;
  }
  .btn-menu span{
    margin: 0; height: 3px; width: 26px;
  }

  /* Oculta los 3 iconos dentro del UL en móvil */
  .nav-links-iconos{ display: none !important; }

  /* Menú plegable debajo de la barra */
  .nav-links{
    grid-column: 1 / -1 !important;
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease;
    margin-top: .25rem;
  }
  .nav-links li{ display: block !important; }
  .nav-links li a{
    display: block;
    text-align: center;
    padding: .9rem 0;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  /* Estado abierto */
  .menu-navegacion.abierto .nav-links{
    max-height: 90vh;
    opacity: 1;
  }

  /* Animación hamburguesa → X */
  .menu-navegacion.abierto .btn-menu span:nth-child(1){
    transform: translateY(9px) rotate(45deg);
  }
  .menu-navegacion.abierto .btn-menu span:nth-child(2){
    opacity: 0;
  }
  .menu-navegacion.abierto .btn-menu span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
  }
}
/* =============================================== */
/* ====== FIX SALUDO MOBILE ====== */
@media (max-width: 700px){

  /* el card ocupa todo el ancho de forma segura */
  body.index .saludo .bloque-con-imagen{
    /* fuerza realmente 1 sola columna en móvil */
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: 10px auto 16px !important;
    width: min(100%, 96vw) !important;
    box-sizing: border-box;
  }

  /* figure apila: imagen + pie; sin desbordes */
  body.index .saludo .retrato-autor{
    border-radius: 12px !important;
    overflow: hidden !important;
    height: auto !important;
  }

  /* imagen responsiva con alto controlado (no se estira raro) */
  body.index .saludo .retrato-autor .imagen-saludo{
    width: 100% !important;
    height: auto !important;                 /* preferible */
    aspect-ratio: 4 / 5;                     /* mantiene proporción agradable */
    object-fit: cover !important;
    object-position: center top;
    display: block;
  }

  /* pie de foto centrado y compacto */
  body.index .saludo .retrato-autor figcaption{
    text-align: center;
    font-size: .9rem;
    padding: 10px 12px 12px !important;
  }

  /* columna de texto: evita que “empuje” el grid */
  body.index .saludo .texto-saludo{
    min-width: 0;            /* CLAVE para que no cree overflow */
    padding: 2px 2px 6px !important;
  }
  body.index .saludo .texto-saludo p{
    margin: 0 0 12px;
    font-size: .965rem;
    line-height: 1.7;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* separador sutil antes del párrafo final */
  body.index .saludo .bloque-con-imagen + p{
    padding-top: 10px !important;
    margin-top: 6px !important;
  }
}

/* también ayuda en todos los anchos: el texto no fuerza anchura */
body.index .saludo .texto-saludo{ min-width: 0; }

/* === Saludo: centrar la imagen del retrato === */
body.index .saludo .retrato-autor{
  float: none !important;          /* anula el float que la empuja a la izq. */
  justify-self: center;            /* centra dentro de la celda del grid */
  margin: 0 auto !important;       /* fallback extra por si cambia el layout */
  max-width: 320px;                /* opcional: un ancho cómodo para centrar */
}

body.index .saludo .retrato-autor .imagen-saludo{
  display: block;                  /* evita inline gaps */
  margin: 0 auto;                  /* centra la propia imagen si tuviera width auto */
}

/* Si quieres que la columna de la foto se ajuste a su contenido */
body.index .saludo .bloque-con-imagen{
  grid-template-columns: auto 1fr; /* foto se dimensiona por su contenido */
}

/* En móvil mantiene el centrado y limita un poco el ancho */
@media (max-width: 900px){
  body.index .saludo .retrato-autor{ max-width: 300px; }
  body.index .saludo .retrato-autor figcaption{ text-align: center; }
}

/* =========================================
   NAV — FIX PACK (pegar al FINAL del CSS)
   Normaliza estados y recupera iconos/logos
   ========================================= */

/* Base (desktop por defecto) */
.menu-navegacion{
  position: sticky; top: 0; z-index: 1000;
  display: flex !important;
  align-items: center; justify-content: space-between;
  gap: 1rem;
}
.logo-menu{ transform: none !important; }          /* anula desplazamientos previos */
.nav-links{ display: flex !important; gap: 1.5rem; flex-wrap: nowrap; }
.nav-links li{ display: flex; align-items: center; }
.nav-links li a{ color: #fff; font-weight: 700; padding: .75rem 1rem; }
.btn-menu, .mobile-icon{ display: none !important; } /* oculto en desktop */
.nav-links-iconos{ display: flex !important; gap: .5rem; } /* ¡vuelven los 3 logos! */

/* MÓVIL / TABLET */
@media (max-width: 820px){
  .menu-navegacion{
    display: grid !important;
    grid-template-columns: 1fr 48px;               /* [logo centrado][hamb] */
    align-items: center; gap: .5rem; padding: .5rem .75rem;
  }
  .logo-menu{ grid-column: 1; justify-self: center; }
  .btn-menu{
    grid-column: 2; justify-self: end;
    display: inline-flex !important;
    width: 48px; height: 48px; padding: 0;
    border: none; background: transparent;
  }
  .btn-menu span{
    width: 26px; height: 3px; background: #fff; border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* Iconos laterales y los 3 redondos del UL: ocultos en móvil */
  .mobile-icon{ display: none !important; }
  .nav-links-iconos{ display: none !important; }

  /* Menú colapsable debajo */
  .nav-links{
    grid-column: 1 / -1 !important;
    display: block !important;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .3s ease, opacity .25s ease;
    margin-top: .25rem;
  }
  .nav-links li{ display: block !important; }
  .nav-links li a{
    display: block; text-align: center; padding: .9rem 0;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  /* Estado abierto */
  .menu-navegacion.abierto .nav-links{ max-height: 90vh; opacity: 1; }
  .menu-navegacion.abierto .btn-menu span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
  .menu-navegacion.abierto .btn-menu span:nth-child(2){ opacity: 0; }
  .menu-navegacion.abierto .btn-menu span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }
}

/* Asegura que nada lo tape (vídeos, parallax, etc.) */
.menu-navegacion{ z-index: 2000 !important; }

/* --- NAV móvil: 2 logos + logo centrado + hamburguesa --- */
@media (max-width:600px){
  .menu-navegacion{
    display:grid !important;
    grid-template-columns: 48px 1fr 48px 48px; /* [icono izq][LOGO][hamb][icono der] */
    align-items:center;
    gap:.5rem;
    padding:.5rem .75rem;
  }
  /* ¡mostrar los iconos laterales en móvil! */
  .mobile-icon{ display:inline-flex !important; }
  .mobile-left{ grid-column:1; justify-self:start; }
  .logo-menu{ grid-column:2; justify-self:center; transform:none !important; }
  .btn-menu{ grid-column:3; justify-self:center; display:inline-flex !important; }
  .mobile-right{ grid-column:4; justify-self:end; }
}
/* Fallback: cuando el nav lleva la clase .fixed, se comporta fijo */
.menu-navegacion.fixed{
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:2000;
}
body.has-fixed-nav{
  /* evita “salto” del contenido cuando el nav pasa a fixed */
  padding-top:64px;   /* ajusta a la altura real del nav */
}
/* --- NAV móvil: dos logos juntos a la izquierda + logo centrado + hamburguesa derecha --- */
@media (max-width:600px){
  .menu-navegacion{
    display:grid !important;
    grid-template-columns: 48px 48px 1fr 48px;   /* [logo1][logo2][LOGO centrado][hamb] */
    align-items:center;
    gap:.5rem;
    padding:.5rem .75rem;
    position:sticky; top:0; z-index:2000;        /* sticky en móvil */
  }

  /* mostrar los iconos laterales y colocarlos juntos */
  .mobile-icon{ display:inline-flex !important; }
  .mobile-left{  grid-column:1; justify-self:start; }
  .mobile-right{ grid-column:2; justify-self:start; } /* van pegados */

  /* logo central y botón hamburguesa a la derecha */
  .logo-menu{ grid-column:3; justify-self:center; transform:none !important; }
  .btn-menu{
    grid-column:4; justify-self:end;
    display:inline-flex !important;
    border:none; background:transparent; padding:0; width:48px; height:48px;
  }
  .btn-menu span{ width:26px; height:3px; background:#fff; border-radius:2px; transition:transform .25s,opacity .25s; }

  /* menú plegable */
  .nav-links{
    grid-column:1 / -1 !important;
    display:block !important;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .3s ease, opacity .25s ease;
    margin-top:.25rem;
  }
  .nav-links li{ display:block !important; }
  .nav-links li a{ display:block; text-align:center; padding:.9rem 0; border-top:1px solid rgba(255,255,255,.12); }

  /* oculta los 3 iconos del UL en móvil para no duplicar */
  .nav-links-iconos{ display:none !important; }

  /* animación hamburguesa → X */
  .menu-navegacion.abierto .nav-links{ max-height:90vh; opacity:1; }
  .menu-navegacion.abierto .btn-menu span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  .menu-navegacion.abierto .btn-menu span:nth-child(2){ opacity:0; }
  .menu-navegacion.abierto .btn-menu span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
}