/*Reset inicial*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
}

@font-face {
    font-family: 'KGHAPPYSolid';
    src: url('fonts/KGHAPPYSolid.ttf') format('truetype'); /* Ruta a tu archivo */
    font-weight: normal;
    font-style: normal;
}

h1, h2 {
    font-family: 'KGHAPPYSolid', sans-serif; /* Aplica la fuente */
    color: #000;
}

nav {
    width: 100%;
    height: 90px;
    background-color: rgb(0 0 0 / 62%);
    position: fixed;
    top: 0;   /* ← cambia -1px por 0 */
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* #encabezadoServicios {
    padding-top: 119px;  29px (barra) + 90px (nav) 
} */

/* Responsive para móvil */
@media (max-width: 768px) {
    .contenido-barra-info {
        font-size: 11px;
        padding: 0 10px;
    }
    
    /* nav {
       
        top: 40px!important;  Mantener debajo de la barra 
    } */
    
    /* .menu-izquierda {
                top: 130px!important; 29px (barra) + 89px (nav) 
    } */
    
    /* .menu-derecha {
       top: calc(142px + 149px)!important;  Ajustar según tu diseño actual
    } */
}

a {
    text-decoration: none;
    color: #22a29b;
}

.menu-izquierda, .menu-derecha {
    width: 100%;
}

.menu-izquierda ul, .menu-derecha ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.menu-izquierda ul {
    justify-content: flex-end;
    padding-right: 20px;
}

.menu-derecha ul {
    justify-content: flex-start;
    padding-left: 20px;
}

.logo-container {
    width: 15%;
    display: flex;
    justify-content: center;
}

#logo img {
    width: 75.5px;
    height: 66px;
}

.elementoMenu {
    margin: 0px 15px;
    line-height: 90px;
}

.elementoMenu > a {
    text-decoration: none;
    font-size: 14px;
    font-family: 'KGHAPPYSolid', sans-serif;
    color: white;
    transition: color 0.3s ease-in-out;
}

.elementoMenu > a:hover {
    color: #45b8b1;
}

/* Estilos adicionales para versión móvil */
.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: white;
    padding: 10px;
    z-index: 3;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    nav {
        position: fixed;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .menu-izquierda {
        position: fixed;
        top: 89px;
        left: 0;
        width: 100%;
        /* background-color: rgba(63, 62, 62, 0.95); */
        background-color: rgb(0 0 0 / 86%);
        display: none;
        z-index: 3;
    }
    
    .menu-derecha {
        position: fixed;
        /* Cambia esto para posicionar el menú derecho después del izquierdo */
        top: calc(142px + 109px);
        left: 0;
        width: 100%;
        /* background-color: rgba(63, 62, 62, 0.95); */
        background-color: rgb(0 0 0 / 86%);
        display: none;
        z-index: 3;
    }
    
    .menu-izquierda.active, .menu-derecha.active {
        display: block;
    }
    
    .menu-izquierda ul, .menu-derecha ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    
    .menu-izquierda ul {
        justify-content: center;
        padding-right: 0;
    }
    
    .menu-derecha ul {
        justify-content: center;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .logo-container {
        width: 100%;
        justify-content: center;
    }
    
    .elementoMenu {
        margin: 0;
        line-height: 53px;
        /* text-align: center; */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-left: 30px;
    }
    
    .elementoMenu:last-child {
        border-bottom: none;
    }
}

.contenedor-margen-top{
        margin: 120px auto 0 auto;
}

#encabezado {
    position: relative;
    width: 100%;
    height: 100vh; /* Ajusta según necesites */
    overflow: hidden;
}

.video-dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Negro con 40% de opacidad */
    z-index: -1;
}


#video-background {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    object-fit: cover;
}

.contenido-encabezado {
    position: relative;
    z-index: 1;
    color: white; /* Para que el texto sea visible sobre el video */
    text-align: center;
    padding-top: 50vh; /* Ajusta según necesites */
}

/* Añade sombras al texto para mejorar legibilidad */
#tituloEncabezado, #subtituloEncabezado {
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.7); */
    font-size: 34px;
    letter-spacing: 1px;
    color: white;
}

#subtituloEncabezado {
    margin-top: -11px; /* Ajusta el valor según necesites */
}


/* Estilos específicos para el video en móvil */
@media (max-width: 768px) {
    /* .contenido-encabezado {
        padding-top: 40vh; Ajustar la posición vertical del texto en móvil
    }
     */
    #tituloEncabezado {
        font-size: 15px; /* Reducir el tamaño para móvil */
    }
    
    #subtituloEncabezado {
        font-size: 15px; /* Reducir el tamaño para móvil */
        margin-top: -1px;
    }


    #video-background {
        max-width: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/*Fin del header */

#presentacion {
    width: 1462px;
    /* height: 776px; */
    margin: 0 auto; /* Centra horizontalmente */
    overflow: hidden;
}

.tituloPresentacion {
    font-size: 55px;
    text-align: center;
    display: inline-block;
    position: relative;
}

.tituloPresentacion span {
    position: relative;
}

.tituloPresentacion .o,
.tituloInstagram .o,
.tituloServicios .o,
.tituloEncuentranos .o,
.tituloHorario .o {
    display: inline-block;
    width: 48px;  /* Ajusta según la imagen */
    height: 60px; /* Ajusta según la imagen */
    background-image: url('../img/Otexto.webp'); /* Imagen de la "O" */
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    text-indent: -9999px; /* Oculta la "O" textual pero mantiene el SEO */
    margin: 0 5px; /* Agrega espacio a los lados */
}


.tituloOpiniones {
    font-size: 55px;
    text-align: center;
    /* display: inline-block; */
    position: relative;
    color:white;
    margin-top: 10px;
}

.tituloOpiniones span {
    position: relative;
}

.tituloOpiniones .o {
    display: inline-block;
    width: 50px;  /* Ajusta según la imagen */
    height: 60px; /* Ajusta según la imagen */
    background-image: url('../img/o-white.webp'); /* Imagen de la "O" */
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    text-indent: -9999px; /* Oculta la "O" textual pero mantiene el SEO */
    margin: 0 5px; /* Agrega espacio a los lados */
}

.tituloInstagram {
    font-size: 55px;
    text-align: center;
    margin-top: 110px;
}

#contenedorPresentacion {
    width: 1297px;
    /* height: 707px; */
    margin-left: auto;
    margin-right: auto;
    margin-top:96px;
    overflow: hidden;
}

.colPresen.izquierda {
    width: 40%; /* Menos espacio para la izquierda */
    height: 768px;
    float: left;
}

.colPresen.derecha {
    width: 60%; /* Más espacio para la derecha */
    /* height: 768px; */
    float: left;
    padding-left: 20px; /* Añade un poco más de separación a la izquierda */
}

.colPresen >p {
    font-size: 1em;
    line-height: 158%;
    margin-bottom: 15px; /* Espacio entre párrafos */   
}

.contenido-presentacion {
    line-height: 1.6;
    font-size: 16px;
}

.contenido-presentacion p {
    font-size: 1em;
    line-height: 158%;
    margin-bottom: 15px;
}

#logoPresen {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logoPresen img {
    width: 500px;
    height: 501px;
}

#gifPresen {
    width: 315px;
    height: 131px;
    margin: 20px auto; /* Centra horizontalmente y agrega espacio arriba */
    display: flex;
    justify-content: center;
    align-items: center;
}

#gifPresen img {
    max-width: 100%; /* Para que el GIF se ajuste bien */
    height: auto;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    #presentacion {
        width: 100%; /* Ancho completo en lugar de fijo */
        height: auto; /* Altura automática según el contenido */
        padding: 20px; /* Añadir algo de padding */
        box-sizing: border-box; /* Para que el padding no afecte al ancho total */
    }
    
    #contenedorPresentacion {
        width: 100%; /* Ancho completo */
        height: auto; /* Altura automática */
        margin-top: 60px; /* Reducir el margen superior */
        /* Cambiamos la estructura para poder reordenar los elementos */
        display: flex;
        flex-direction: column;
    }
    
    .colPresen.izquierda {
        width: 100%; /* Ocupa todo el ancho */
        float: none; /* Eliminar float */
        height: auto; /* Altura automática */
        /* Cambiar la estructura para poder reordenar los elementos */
        display: flex;
        flex-direction: column;
    }
    
    .colPresen.derecha {
        width: 100%; /* Ocupa todo el ancho */
        float: none; /* Eliminar float */
        height: auto; /* Altura automática */
        padding: 0 15px; /* Añadir padding horizontal */
        margin-top: 0; /* Reducir margen superior para acercar al logo */
        order: 2; /* Colocamos el texto en segundo lugar */
    }
    
    #logoPresen {
        height: auto; /* Altura automática */
        padding: 20px 0 0 0; /* Solo padding superior */
        order: 1; /* Primero el logo */
    }
    
    #logoPresen img {
        width: 200px; /* Reducir tamaño */
        height: 200px; /* Mantener proporción */
    }
    
    #gifPresen {
        width: 200px; /* Reducir tamaño */
        height: auto; /* Mantener proporción */
        margin: 20px auto; /* Reducir margen */
        order: 3; /* Colocamos el GIF al final */
        /* Mover el GIF fuera del contenedor izquierdo */
        align-self: center;
    }
    
    /* Extraer el GIF del contenedor izquierdo y ponerlo al final */
    .colPresen.izquierda #gifPresen {
        display: none; /* Ocultamos el GIF en su posición original */
    }
    
    /* Añadir un nuevo contenedor para el GIF al final */
    #contenedorPresentacion::after {
        content: "";
        display: block;
        width: 100%;
        order: 4;
    }
    
    /* Clonar el GIF y ponerlo al final */
    #contenedorPresentacion #gifPresen-mobile {
        width: 150px; /* Reducir de 200px a 150px */
        height: auto;
        margin: 20px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        order: 5;
    }

    #gifPresen-mobile img {
        max-width: 100%; /* Para que la imagen se ajuste al contenedor */
        height: auto;
    }

    /* Para dispositivos muy pequeños, reducir aún más */
@media (max-width: 480px) {
    #contenedorPresentacion #gifPresen-mobile {
        width: 120px; /* Aún más pequeño para dispositivos muy pequeños */
    }
}
    
    .tituloPresentacion {
        font-size: 36px; /* Reducir tamaño de fuente */
        margin-bottom: 15px; /* Añadir espacio debajo del título */
        text-align: center; /* Centrar en móvil */
    }

    .tituloOpiniones {
        font-size: 36px; /* Reducir tamaño de fuente */
        margin-bottom: 15px; /* Añadir espacio debajo del título */
        text-align: center; /* Centrar en móvil */
    }
    
    .tituloPresentacion .o,
    .tituloInstagram .o,
    .tituloServicios .o,
    .tituloEncuentranos .o,
    .tituloHorario .o {
        width: 39px; /* Reducir tamaño */
        height: 50px; /* Reducir tamaño */
    }


    .tituloOpiniones .o {
        width: 39px; /* Reducir tamaño */
        height: 50px; /* Reducir tamaño */
    }
    
    .colPresen > p {
        font-size: 0.9em; /* Reducir ligeramente el tamaño del texto */
        line-height: 150%; /* Ajustar interlineado */
    }
}


#postsInstagram {
    width: 1296px;
    height: 862px;
    margin-left: auto;
    margin-right: auto;
    /* background-color: grey; */
    overflow: visible;
}

#contenedorEtiquetaInsta {
    width: 404px;
    height: 104px;
    display: flex;  /* Activa Flexbox */
    align-items: center;  /* Centra verticalmente */
    gap: 10px;  /* Espacio entre elementos */
}

#logoInsta {
    width: 90px;
    height: 90px;
}

.textoInsta {
    display: flex;
    flex-direction: column; /* Apila los textos */
    justify-content: center;
}


#nombreLogoInsta {
    width: 149px;
    height: 51px;
    display: block; /* Evita espacios extra */
}

.etiquetaPerfil {
    margin: 0; /* Elimina márgenes extra */
    font-size: 1em;
    font-weight: 600;
}

.etiquetaPerfil, .textoInsta p {
    margin-left: 10px; /* Ajusta el valor según necesites */
}


.btnFollow {
    width: 124px;
    height: 38px;
    border-radius: 24px;
    margin-left: auto; /* Empuja el botón a la derecha */
}

#contenedorDatos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas por fila */
    gap: 16px; /* Espacio entre platos */
    width: 1296px;
    margin-top: 40px;
    /* background-color: lightgreen; */
    margin-left: auto;
    margin-right: auto;
}

.postInsta {
    background-color: rgb(155, 155, 155);
    /* border-style: solid; */
    width: 312px;
    height: 312px;
}

.verMasInsta {
    font-size: 20px;
    font-weight: semibold;
    color: #414141;
    margin-top: 20px;
}

/* Media queries solo para móvil */
@media screen and (max-width: 768px) {
    #postsInstagram {
      width: 100%;
      max-width: 100%;
      height: auto;
      padding: 0 15px;
    }
    
    #contenedorEtiquetaInsta {
      width: 100%;
      max-width: 100%;
      height: auto;
    }
    
    #logoInsta {
      width: 70px;
      height: 70px;
    }
    
    #nombreLogoInsta {
      width: 120px;
      height: auto;
    }
    
    .btnFollow {
      width: 100px;
      height: 34px;
      font-size: 0.9em;
    }
    
    #contenedorDatos {
      grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
      gap: 10px;
      width: 100%;
      max-width: 100%;
    }
    
    .postInsta {
      width: 100%;
      height: 0;
      padding-bottom: 100%; /* Mantiene proporción cuadrada */
      position: relative;
    }
    
    .imagenPostInstagram {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .nombreTest {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 5px;
      margin: 0;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
    }
    
    .tituloInstagram {
        font-size: 44px;
        text-align: center;
        margin-top: 10px;
    }
    
    .verMasInsta {
      font-size: 16px;
      margin-top: 15px;
    }
  }
  
  /* Para teléfonos más pequeños */
  @media screen and (max-width: 480px) {
    #logoInsta {
      width: 60px;
      height: 60px;
    }
    
    .etiquetaPerfil {
      font-size: 0.8em;
    }
    
    .btnFollow {
      width: 90px;
      height: 30px;
      font-size: 0.8em;
    }
  }
/* ===== Contenedor general ===== */
#servicios {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    padding: 0 5px;
}

.tituloServicios {
    font-size: 55px;
    text-align: center;
    margin-top: 80px;
}

/* ===== Carrusel ===== */
#carouselServicios {
    display: flex;
    gap: 18px;
    transition: transform 0.5s ease-in-out;
    overflow: visible;
    padding: 0;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    margin-left: -20px;
}

/* ===== Botones de navegación ===== */
.carousel-buttons {
    position: absolute;
    top: 60%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 10;
    left: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.carousel-button {
    background-color: rgba(7, 58, 53, 0.7);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    pointer-events: auto;
    margin: 0 10px;
    transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    opacity: 1;
    visibility: visible;
}

.carousel-button:hover {
    background-color: rgba(7, 58, 53, 1);
}

.prev-button {
    left: 10px;
}

.next-button {
    right: 10px;
}

/* ===== Indicadores ===== */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.carousel-indicator.active {
    background-color: #073A35;
}

/* ===== Ítems del carrusel ===== */
.itemServicio {
    width: 453px;
    height: 453px;
    position: relative;
    overflow: hidden;
    background-color: grey;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.imagenServicio {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(217, 217, 217, 0.8);
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tituloServicio {
    font-size: 16px;
    color: #505050;
    font-weight: 500;
    text-align: center;
    line-height: 140%;
    text-transform: uppercase;
}

.itemServicio:hover .overlay {
    opacity: 1;
}

.itemServicio:hover .imagenServicio {
    transform: scale(1.1);
}

/* ===== Ajustes para versión móvil ===== */
@media (max-width: 768px) {
    #servicios {
        padding: 0 0; /* sin padding lateral para centrar bien */
    }

     #carouselServicios {
        margin-left: 0;
        justify-content: flex-start;  /* mejor alineación para scroll */
        scroll-snap-type: none;
        overflow-x: auto;              /* permitir scroll horizontal */
        -webkit-overflow-scrolling: touch; /* suavizado para iOS */
        gap: 18px;
        scroll-behavior: smooth;       /* opcional */
    }

      .overlay {
        background: transparent !important; /* quitar fondo */
        justify-content: flex-end;
        padding: 10px 0;
        opacity: 1 !important; /* que siempre esté visible */
    }

    .tituloServicio {
        background: rgba(217, 217, 217, 0.8);
        padding: 5px 15px;
        display: inline-block;
        width: auto;
        margin: 0 auto 10px auto;
        border-radius: 5px;
        color: black;
        text-align: center;
    }

    .itemServicio {
        width: 80%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }

    /* Ocultamos botones si no se quieren en móvil */
    .carousel-buttons {
        display: none;
    }

    /* Mostrar siempre overlay en móvil */
    .overlay {
        opacity: 1 !important;
    }

    .imagenServicio {
        transform: none !important;
    }

    .carousel-indicators {
        margin-top: 40px;
    }

    .tituloServicios {
        font-size: 38px;
        margin-top: 30px;
    }
}



#encuentranos {
    width: 100%;
    height: 736px;
    margin-left: auto;
    margin-right: auto;
    /* background-color: grey; */
    overflow: visible;
}

.tituloEncuentranos {
    font-size: 55px;
    text-align: center;
    margin-top: 41px;
}

@media screen and (max-width: 768px) { /* Ajuste para pantallas más pequeñas */
    .tituloEncuentranos {
        font-size: 38px;
    }
}


#googleMap {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    margin-top: 31px;
}

#opiniones {
    width: 100%;
    height: auto;
    min-height: 563px;
    margin-left: auto;
    margin-right: auto;
    background-color: #1c1c1c;
    overflow: hidden;
    padding-bottom: 60px;
}

.tituloOpinones {
    font-size: 55px;
    text-align: center;
    margin-top: 91px;
    color: white;
    margin-bottom: 50px;
}

#contenedorOpiniones {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-start;
}

.calificacion {
    width: 15%;
    min-width: 160px;
    margin-right: 30px;
}

.textoOpiniones {
    font-size: 25px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

#estrellasOpiniones {
    margin-bottom: 10px;
}

.estrella {
    color: #FFD700;
    font-size: 24px;
}

#cantidadOpiniones {
    color: white;
    margin-bottom: 15px;
    font-size: 14px;
}

.logoGoogle img {
    height: 65px;
    width: auto;
}

.itemOpinion {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 20px;
    margin-right: 20px;
    width: 25%;
    box-sizing: border-box;
}

.imagenPerfil {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ccc;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
}

.nombrePerfil {
    font-weight: bold;
    margin: 0;
    font-size: 14px;
}

.fechaOpinion {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.estrellasOpinionPerfil {
    margin: 10px 0;
}

.estrellasOpinionPerfil .estrella {
    font-size: 14px;
}

.comentarioOpinion {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

#pie {
    width: 100%;
    height: 25px; /* Aumenta la altura para que sea más visible */
    background-color: #E2E2E2;
    display: flex; /* Usa flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.textoFooter {
    font-size: 14px;
    color: #3F3E3E;
    letter-spacing: 1px;
    font-weight: 300;
    margin: 0;
    display: flex; /* Usa flexbox para alinear los elementos dentro */
    justify-content: center; /* Alinea los elementos en el centro */
    gap: 10px; /* Espacio entre los elementos */
}

.textoFooter span {
    display: inline-block; /* Mantiene los elementos en línea */
}

@media screen and (max-width: 480px) { /* Ajuste para móviles */
    #pie {
        height: auto; /* Permite ajuste si es necesario */
        padding: 10px 0;
    }

    .textoFooter {
        font-size: 12px; /* Reduce el tamaño del texto */
        flex-wrap: wrap; /* Permite que el contenido se ajuste en una sola línea */
        justify-content: center; /* Centra el contenido */
        text-align: center;
        gap: 5px; /* Espacio más compacto entre elementos */
        padding: 0 10px; /* Margen lateral para evitar que el texto toque los bordes */
    }

    .textoFooter span {
        white-space: nowrap; /* Evita saltos de línea dentro de cada elemento */
    }
}



/* Responsive styling */
@media (max-width: 900px) {
    #contenedorOpiniones {
        flex-direction: column;
    }
    
    .calificacion {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .itemOpinion {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* ========================================
   BARRA DE INFORMACIÓN SUPERIOR
   ======================================== */

.barra-info {
    background-color: #000000;
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
    text-align: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}

.contenido-barra-info {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.contenido-barra-info span {
    color: #fff;
}

.contenido-barra-info .separador {
    margin: 0 8px;
    opacity: 0.6;
}
.flotante {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    background: white;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 0 25px rgba(0,0,0,0.45);
    z-index: 9999;
    opacity: 0;
    pointer-events: none; /* 👈 AÑADE ESTO */
    transition: opacity 0.4s ease;
}

.flotante.movil {
    width: 85vw;
}

/* Mostrar */
.flotante.active,
.flotante.movil.active {
    opacity: 1;
    pointer-events: auto; /* 👈 AÑADE ESTO */
}

#overlayPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: none;
    z-index: 9990;
}


.flotante.active,
#overlayPopup.active {
    display: block;
}

/* Ocultar escritorio en móvil */
@media (max-width: 768px) {
    #flotanteBox { display: none; }
}

/* Ocultar móvil en escritorio */
@media (min-width: 769px) {
    #flotanteBoxMovil { display: none; }
}

/* Imagen dentro */
.flotante img {
    width: 100%;
    display: block;
}

/* Botón X */
.flotante .cerrar {
    position: absolute;
    top: -10px;
    right: -10px;
    background: black;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}