/* color1   #66FA61 
   color2   #69FAD9
   color3   #69ADFA
   color4   #9269FA
   color 5  #FA1BE4
   color 6  #FA96F0 

*/

/* Estilos Generales y Resets */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6; /* Espaciado entre líneas */
    margin: 0; 
    padding: 0;
    background-color: #f4f4f4;
    color: #333; 
}

.container { 
    width: 80%;
    margin: auto;
    overflow: hidden; /* Para contener flotantes si los usamos más adelante */
    padding: 0 20px;
}

/* Contenedor de la navegación dentro de la cabecera */
.nav-container {
    display: flex;
    justify-content: space-between; /* Espacio entre logo y menú/botón-hamburguesa */
    align-items: center;
    max-width: 1200px; /* Ancho máximo del contenido del menú */
    margin: 0 auto;    /* Centra el contenido del menú */
    padding: 0 20px;   /* Espaciado interno */
    height: 90px;      /* Altura fija para la cabecera */
}

/* Cabecera Fija (Sticky Header) */
#main-header {
    background-color: rgba(26, 26, 26, 0.8); /* Color de fondo de la cabecera */
    color: #fff;
    position: fixed;         /* Fija la cabecera */
    top: 0;
    left: 0;
    margin-top: -15px;      /* margen para la transparencia del menú con el body inicial */
    width: 100%; 
    z-index: 1000;           /* Asegura que esté por encima de otros contenidos */
    box-shadow: none; /* Sombra sutil */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}



/* Añadir padding al body para compensar la cabecera fija */
body {
    padding-top: 70px; /* Debe coincidir con la altura de #main-header */
    /* Mantén tus otros estilos de body (font-family, margin, etc.) */
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0; 
    background-color: #f4f4f4;
    color: #333;
}

/* Logo */
#main-header .logo img{
    height: 80px;
    width: auto;
    vertical-align: middle;
    transition: all 0.3s ease;
}
#main-header .logo a {
    color: #fff;
    text-decoration: none;
    font-size: 24px; /* Ajusta según tu logo/nombre */
    font-weight: bold;
    transition: color 0.3s ease;
}
#main-header .logo a:hover {
    color: #9269FA; /* Color de acento al pasar el ratón */
}
#main-header.header-scrolled {
    background-color: #333; /* Fondo sólido oscuro al hacer scroll */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* Sombra sutil para darle profundidad */
}


/* Menú de Navegación para Escritorio */
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Alinea los ítems del menú horizontalmente */
    
}

.nav-menu li {
    margin-left: 25px; /* Espacio entre ítems del menú */
}

.nav-menu .nav-link {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Sombra de texto sutil para mejorar la legibilidad sobre fondos de imagen */
    /* ... el resto de tus estilos para .nav-link ... */
    text-decoration: none;
    font-size: 16px;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
}

.nav-menu .nav-link:hover {
    color: #9269FA; /* Color de acento al pasar el ratón */
}

/* Efecto de subrayado animado para el menú de escritorio */
.nav-menu .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #9269FA;
    transition: width 0.3s ease-in-out;
}

.nav-menu .nav-link:hover::after {
    width: 100%;
}

/* Botón Hamburguesa (nav-toggle) */
.nav-toggle {
    display: none; /* Oculto en escritorio */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Por encima del menú overlay si es necesario */
}

.hamburger-icon {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    background-color: #fff;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.hamburguer-icon,
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

.hamburger-icon::before {
    top: -9px;
}

.hamburger-icon::after {
    bottom: -9px;
}

/* --- Estilos para el Menú Móvil (cuando está activo) --- */
@media (max-width: 768px) {
    .nav-menu {
        display: none; /* Oculta el menú de escritorio en móviles */
        flex-direction: column; /* Apila los ítems verticalmente */
        position: fixed; /* Ocupa toda la pantalla */
        top: 0; /* Desde la altura de la cabecera */
        left: 0;
        width: 100%;
        height: 100vh; /* Alto completo de la vista */
        background-color: rgba(30, 30, 30, 0.98); /* Fondo oscuro semitransparente */
        padding-top: 80px; /* Espacio para no solapar con la cabecera si esta fuera transparente */
        text-align: center;
        overflow-y: auto; /* Permite scroll si hay muchos ítems */
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        transform: translateY(-100%); /* Inicia fuera de la pantalla (arriba) */
        opacity: 0;
        z-index: 999; /* Debajo de la cabecera pero encima del contenido */
    }

    .nav-menu.is-active {
        display: flex;
        transform: translateY(0); /* Desliza hacia adentro */
        opacity: 1;
    }

    .nav-menu li {
        margin: 0;
    }

    .nav-menu .nav-link {
        display: block; /* Ocupa todo el ancho */
        padding: 20px;  /* Más espacio táctil */
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Separador sutil */
    }
    .nav-menu .nav-link:hover {
        background-color: rgba(7, 121, 228, 0.2); /* Fondo al pasar el ratón */
        color: #fff;
    }
    .nav-menu .nav-link::after { /* Ocultar subrayado en móvil */
        display: none;
    }
    
    .nav-toggle {
        display: block; /* Muestra el botón hamburguesa en móviles */
    }

    /* Transformación del icono hamburguesa a 'X' */
    .nav-toggle.is-active .hamburger-icon {
        background-color: transparent; /* Línea central desaparece */
    }
    .nav-toggle.is-active .hamburger-icon::before {
        top: 0;
        transform: rotate(45deg);
    }
    .nav-toggle.is-active .hamburger-icon::after {
        bottom: 0;
        transform: rotate(-45deg);
    }
}
/* Sección Hero (Bienvenida) */
.hero {
    background: #69ADFA; /* Color de fondo azul para la sección hero */
    color: #fff; /* Texto blanco */
    padding: 60px 20px; /* Relleno amplio */
    text-align: center; /* Texto centrado */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block; /* Para que el padding y margin funcionen bien */
    background: #ff8c00; /* Color naranja para el botón */
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px; /* Bordes redondeados */
    font-size: 18px;
    transition: background-color 0.3s ease; /* Transición suave para el hover */
}

.cta-button:hover {
    background: #e67e00; /* Color más oscuro al pasar el ratón */
}

/* Secciones de Introducción (Servicios, Reseñas) */
.intro-servicios, .intro-resenas {
    padding: 40px 20px;
    text-align: center;
}

.intro-servicios h2, .intro-resenas h2 {
    font-size: 32px;
    margin-bottom: 30px;
    color: #333;
}

.servicio-item {
    margin-bottom: 20px;
    background: #fff; /* Fondo blanco para cada item */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra sutil */
}

.servicio-item h3 {
    color: #9269FA;
    margin-bottom: 10px;
}

.intro-servicios a, .intro-resenas a {
    display: inline-block;
    margin-top: 20px;
    color: #9269FA;
    text-decoration: none;
    font-weight: bold;
}

.intro-servicios a:hover, .intro-resenas a:hover {
    text-decoration: underline;
}

.intro-resenas blockquote {
    font-style: italic;
    color: #555;
    max-width: 600px;
    margin: 0 auto 20px auto; /* Centrar el bloque de cita */
    padding: 10px;
    border-left: 3px solid #9269FA; /* Línea decorativa a la izquierda */
    background-color: #e9ecef; /* Un fondo ligeramente diferente para la cita */
}

/* Pie de Página (Footer) */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 30px; /* Espacio antes del footer */
}

footer p {
    margin: 5px 0;
}

footer a {
    color: #9269FA;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Media Queries para Responsividad (Ejemplo básico) */
@media(max-width: 768px) {
    header nav {
        flex-direction: column; /* Apila logo y menú en pantallas pequeñas */
        text-align: center;
    }

    header ul {
        margin-top: 15px;
    }

    header ul li {
        display: block; /* Elementos del menú en bloque */
        margin: 10px 0; /* Espacio vertical entre ellos */
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero p {
        font-size: 18px;
    }
}

/* Añade esto al final de tu archivo style.css */

/* Estilos para la página de Servicios */
.pagina-titulo {
    background-color: #e9ecef; /* Un fondo ligeramente diferente para el título de la página */
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 30px;
}

.pagina-titulo h1 {
    font-size: 36px;
    color: #333;
}

.lista-servicios {
    max-width: 1000px; /* Limita el ancho de la lista de servicios */
    margin: 0 auto; /* Centra la lista */
    padding: 0 20px; /* Espaciado interno */
}

.servicio-individual {
    background-color: #fff; /* Fondo blanco para cada servicio */
    border: 1px solid #ddd; /* Borde sutil */
    border-radius: 5px; /* Bordes redondeados */
    padding: 25px; /* Relleno interno */
    margin-bottom: 25px; /* Espacio entre servicios */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra muy ligera */
}

.servicio-individual h2 {
    color: #9269FA; /* Color azul para los títulos de servicio */
    margin-top: 0; /* Quita el margen superior por defecto del h2 */
    margin-bottom: 15px;
}

.servicio-individual p {
    font-size: 16px;
    line-height: 1.7;
}

.llamada-accion-servicios {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9; /* Un fondo suave */
    margin-top: 30px;
}

.llamada-accion-servicios h2 {
    font-size: 28px;
    margin-bottom: 15px;
}

/* Añade esto al final de tu archivo style.css */

/* Estilos para la Página de Trabajos Realizados (Galería) */

/* Contenedor principal de la galería */
.galeria-trabajos {
    display: flex;              /* Habilita Flexbox para alinear los ítems */
    flex-wrap: wrap;            /* Permite que los elementos pasen a la siguiente línea si no caben */
    gap: 20px;                  /* Espacio uniforme entre los elementos de la galería (horizontal y vertical) */
    padding: 20px;              /* Espaciado interno alrededor de la galería */
    max-width: 1200px;          /* Ancho máximo para la galería en la página */
    margin: 0 auto;             /* Centra la galería en la página */
    justify-content: center;    /* Centra los ítems en la fila si hay espacio extra (útil para la última fila si no está completa) */
}

/* Cada ítem individual del proyecto */
.proyecto-item {
    background-color: #fff;                     /* Fondo blanco para la tarjeta del proyecto */
    border: 1px solid #ddd;                 /* Borde sutil alrededor de la tarjeta */
    border-radius: 5px;                     /* Bordes redondeados para la tarjeta */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* Sombra suave para dar profundidad */
    overflow: hidden;                       /* Asegura que la imagen no sobresalga de los bordes redondeados */
    width: calc(33.333% - 20px);            /* Objetivo de ~3 ítems por fila en escritorio. Ajustado por el 'gap'. */
                                            /* Explicación del cálculo: 100% / 3 ítems = 33.333% por ítem. */
                                            /* El 'gap' de 20px se distribuye. Con Flexbox 'gap', este cálculo se simplifica, */
                                            /* pero para asegurar consistencia si 'gap' no es totalmente soportado o para control más fino: */
                                            /* (100% / 3) - ( (2/3) * 20px_gap ) = 33.333% - 13.33px. */
                                            /* Usar 'calc(100% / 3 - 20px)' es una aproximación común que funciona bien con flex-basis o cuando los márgenes se usaban para el gap */
                                            /* Para 'gap:20px' y 3 columnas, 'calc( (100% - 40px) / 3 )' sería más exacto si no se usara 'flex-grow' */
                                            /* Mantendremos el cálculo anterior que funciona bien como base flexible. */
    margin-bottom: 0; /* No es necesario si 'gap' maneja el espaciado vertical, pero no hace daño */
    display: flex;                          /* Usa Flexbox para la estructura interna del ítem */
    flex-direction: column;                 /* Apila la imagen y la información del proyecto verticalmente */
}

/* Estilos para el enlace que envuelve la imagen (para GLightbox) */
.proyecto-item a.portfolio-lightbox {
    display: block; /* Asegura que el enlace ocupe el espacio de la imagen */
    position: relative; /* Para posibles efectos futuros o superposiciones */
}

.proyecto-item a.portfolio-lightbox:hover img {
    opacity: 0.85;                      /* Reduce la opacidad de la imagen al pasar el ratón */
    transition: opacity 0.3s ease-in-out; /* Transición suave para el efecto de opacidad */
}

/* Estilos para la imagen del proyecto (miniatura) */
.proyecto-item img { /* Este selector se aplica a la img dentro de .proyecto-item (sea directa o dentro del enlace) */
    width: 100%;                        /* La imagen ocupa todo el ancho de su contenedor (.proyecto-item o a.portfolio-lightbox) */
    height: 220px;                      /* Altura fija para las imágenes. Ajusta según tus necesidades y la proporción de tus imágenes. */
    object-fit: cover;                  /* Escala la imagen para llenar el contenedor manteniendo la proporción; recorta si es necesario. */
    display: block;                     /* Elimina cualquier espacio extra debajo de la imagen (comportamiento de inline). */
    border: none;                       /* Asegura que no haya bordes por defecto, especialmente si está en un enlace. */
}

/* Contenedor para la información textual del proyecto */
.proyecto-info {
    padding: 20px;                      /* Espaciado interno para el texto */
    flex-grow: 1;                       /* Permite que esta sección crezca si hay espacio vertical extra (útil si los ítems tienen alturas variables por texto) */
    display: flex;                      /* Usa Flexbox para la estructura interna de la info */
    flex-direction: column;             /* Apila los elementos de texto verticalmente */
}

/* Título del proyecto */
.proyecto-info h3 {
    color: #9269FA;                     /* Color de acento para el título */
    margin-top: 0;                      /* Elimina el margen superior por defecto del h3 */
    margin-bottom: 10px;                /* Espacio debajo del título */
    font-size: 1.3em;                   /* Tamaño de fuente para el título */
}

/* Descripción del proyecto */
.proyecto-descripcion {
    font-size: 0.95em;                  /* Tamaño de fuente para la descripción */
    color: #555;                        /* Color de texto para la descripción */
    line-height: 1.6;                   /* Altura de línea para mejor legibilidad */
    flex-grow: 1;                       /* Ayuda a que las descripciones ocupen espacio y empujen los detalles hacia abajo si es necesario */
    margin-bottom: 15px;                /* Espacio debajo de la descripción */
}

/* Detalles adicionales del proyecto (ubicación, año) */
.proyecto-detalles {
    font-size: 0.85em;                  /* Tamaño de fuente más pequeño para los detalles */
    color: #777;                        /* Color de texto más claro para los detalles */
    margin-top: auto;                   /* Empuja los detalles al final del contenedor .proyecto-info si hay espacio */
}

/* --- Media Queries para Responsividad --- */

/* Tablets y pantallas medianas (ej. iPads en vertical, pantallas pequeñas de laptop) */
@media (max-width: 992px) {
    .proyecto-item {
        width: calc(50% - 10px);        /* 2 ítems por fila. (100% / 2) - ( (1/2) * 20px_gap ) = 50% - 10px */
    }
    .proyecto-item img {
        height: 240px; /* Puedes ajustar la altura de la imagen para este tamaño si es necesario */
    }
}

/* Móviles (pantallas más pequeñas) */
@media (max-width: 768px) {
    .galeria-trabajos {
        padding: 15px;                  /* Menos padding en la galería en móviles */
        gap: 15px;                      /* Menos espacio entre ítems en móviles */
    }
    .proyecto-item {
        width: 100%;                    /* 1 ítem por fila, ocupa todo el ancho disponible */
    }
    .proyecto-item img {
        height: 250px; /* O la altura que consideres adecuada para vista de 1 columna */
    }
    .proyecto-info h3 {
        font-size: 1.2em;
    }
    .proyecto-descripcion {
        font-size: 0.9em;
    }
}
/* Estilos para la Página de Reseñas */
.lista-resenas {
    max-width: 900px; /* Ancho máximo para la lista de reseñas */
    margin: 0 auto 40px auto; /* Centra la lista y añade margen inferior */
    padding: 0 20px; /* Espaciado interno */
}

.resena-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    position: relative; /* Para posicionar elementos decorativos si se quisiera */
}

/* Opcional: Añadir comillas decorativas */
.resena-item blockquote::before {
    content: '“'; /* Comilla de apertura */
    font-family: Georgia, serif;
    font-size: 50px;
    color: #9269FA; /* Color de acento */
    position: absolute;
    left: 15px;
    top: 15px;
    opacity: 0.8;
}

.resena-item blockquote {
    margin: 0; /* Quitamos margen por defecto del blockquote */
    padding-left: 30px; /* Espacio para no solapar con la comilla decorativa si la usas */
    font-style: italic;
    color: #444;
    line-height: 1.7;
    font-size: 1.05em; /* Un poco más grande para la cita */
    text-indent: 10px; /* Pequeña sangría para la primera línea después de la comilla */
}

.resena-item blockquote p {
    margin-bottom: 15px; /* Espacio después del párrafo de la cita */
}

.resena-item cite {
    display: block; /* Para que ocupe su propia línea */
    text-align: right; /* Alinea la firma a la derecha */
    margin-top: 15px;
    font-style: normal; /* El navegador suele poner <cite> en cursiva, lo quitamos */
}

.resena-item .cliente-nombre {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
}

.resena-item .cliente-proyecto {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
    display: block; /* Para asegurar que esté en una nueva línea */
}

.llamada-accion-resenas {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9;
    margin-top: 30px;
}

.llamada-accion-resenas h2 {
    font-size: 28px;
    margin-bottom: 15px;
}

/* Ajuste para las comillas decorativas en móviles si se solapan */
@media (max-width: 480px) {
    .resena-item blockquote::before {
        font-size: 40px; /* Más pequeñas */
        left: 10px;
        top: 10px;
    }
    .resena-item blockquote {
        padding-left: 20px; /* Menos padding */
    }
}

/* Añade esto al final de tu archivo style.css */

/* Estilos para la Página de Contacto */
.contenido-contacto {
    display: flex;
    flex-wrap: wrap; /* Para que se apilen en pantallas pequeñas */
    gap: 30px; /* Espacio entre info y formulario */
    padding: 20px;
    max-width: 1100px;
    margin: 20px auto;
}

.info-contacto, .formulario-contacto {
    flex: 1; /* Ambos ocuparán el espacio disponible */
    min-width: 300px; /* Ancho mínimo antes de apilarse */
}

.info-contacto h2, .formulario-contacto h2 {
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.info-contacto p {
    margin-bottom: 15px;
    line-height: 1.7;
}

.info-contacto a {
    color: #9269FA;
}

.info-contacto h3 {
    margin-top: 30px;
    margin-bottom: 10px;
    color: #9269FA;
    font-size: 1.4em;
}

/* Estilos del Formulario */
.form-grupo {
    margin-bottom: 20px;
}

.form-grupo label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

.form-grupo input[type="text"],
.form-grupo input[type="email"],
.form-grupo input[type="tel"],
.form-grupo textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Para que el padding no afecte el ancho total */
    font-size: 1em;
}

.form-grupo input[type="text"]:focus,
.form-grupo input[type="email"]:focus,
.form-grupo input[type="tel"]:focus,
.form-grupo textarea:focus {
    border-color: #9269FA;
    outline: none;
    box-shadow: 0 0 5px rgba(7, 121, 228, 0.3);
}

.form-grupo textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
}

.form-grupo input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle; /* Alinea mejor el checkbox con el texto */
}
.form-grupo .label-checkbox { /* Estilo específico para el label del checkbox */
    font-weight: normal;
    display: inline; /* Para que esté al lado del checkbox */
}
.form-grupo .label-checkbox a {
    color: #9269FA;
    text-decoration: underline;
}

/* El botón .cta-button ya tiene estilos generales, pero podemos asegurar margen superior si es necesario */
.formulario-contacto .cta-button {
    margin-top: 10px;
    width: 100%; /* Opcional: hacer el botón de ancho completo */
    padding: 15px; /* Más padding para el botón de envío */
}
/* Estilos para el Contenedor del Mapa de Google en la página de contacto */
.mapa-contenedor {
    margin-top: 30px;  /* Espacio arriba del mapa */
    margin-bottom: 30px; /* Espacio debajo del mapa */
}

.mapa-contenedor h3 { /* Estilo para el título "Nuestra Ubicación" */
    margin-bottom: 15px;
    font-size: 1.4em;
    color: #333;
}

.mapa-contenedor iframe {
    width: 100%;      /* Hace que el mapa ocupe todo el ancho de su contenedor */
    height: 350px;    /* Ajusta esta altura según tus preferencias. Para hacerlo totalmente responsivo con ratio, ver nota abajo. */
    border: 1px solid #ddd; /* Un borde sutil alrededor del mapa */
    border-radius: 4px; /* Bordes redondeados si te gusta */
}

/* Opcional: Técnica avanzada para mantener la proporción (aspect ratio) del mapa responsivo */
/* Si quieres usar esto, envuelve el iframe en otro div, por ejemplo:
   <div class="mapa-aspect-ratio">
       <iframe>...</iframe>
   </div>
   Y luego usa estas clases en tu CSS en lugar de la regla .mapa-contenedor iframe de arriba:
*/
/*
.mapa-aspect-ratio {
    position: relative;
    padding-bottom: 60%; /* Para un ratio 16:9 sería 56.25%. Para 4:3 sería 75%. Ajusta 60% según necesites. */
    /* height: 0; Dejar height en 0 aquí */
/* overflow: hidden;
}

.mapa-aspect-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
}
*/

/* Clase para ocultar los enlaces adicionales de la galería de GLightbox */
.hidden-gallery-link {
    display: none;
}