/*
   estilos_mobile.css
   Optimizado para pantallas hasta 768px (tabletas pequeñas y móviles).
   Creado a partir de estilos_desktop.css e index.html, asegurando la responsividad.
*/

/* --- Variables CSS --- */
/* Se replican las variables para consistencia. */
:root {
    --color-blanco: #ffffff;
    --color-marron-oscuro: #5C4033;
    --color-marron-claro: #A0522D;
    --color-gris-oscuro: #5C4033;
    --color-gris-claro: #F0F0F0;
    --color-acento: #FFD700;
    --color-whatsapp: #25D366;
    --color-sombra: rgba(0, 0, 0, 0.15);
    --color-sombra-hover: rgba(0, 0, 0, 0.3);

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;

    --transition-ease: all 0.3s ease;
}

/* --- Reset CSS y Estilos Base Generales para Mobile --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 14px; /* Tamaño de fuente base ajustado para pantallas más pequeñas */
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-gris-oscuro);
    background-color: var(--color-blanco);
    overflow-x: hidden; /* Evita el scroll horizontal en móviles */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en iOS */
}

body.no-scroll {
    overflow: hidden; /* Clase para evitar el scroll del body cuando el lightbox o menú están abiertos */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    margin-bottom: 0.8em;
    line-height: 1.2;
    color: var(--color-marron-oscuro);
}

p {
    margin-bottom: 1em;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: var(--transition-ease);
    -webkit-tap-highlight-color: transparent; /* Elimina el resaltado táctil en móviles */
}

a:hover {
    color: var(--color-acento);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.fas, .far, .fab {
    margin-right: 5px; /* Espacio para iconos más pequeño en mobile */
    color: inherit;
}

::selection {
    background-color: var(--color-acento);
    color: var(--color-blanco);
}

/* --- Animaciones y Secciones Base --- */
.seccion {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    padding: 60px 20px; /* Padding ajustado para mobile */
    max-width: 100%; /* Las secciones ocupan todo el ancho disponible */
    margin: 0 auto;
    text-align: center;
    min-height: auto; /* La altura se adapta al contenido, no 100vh */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- Estilos del Header para Mobile (Menú Hamburguesa) --- */
.main-header {
    background-color: var(--color-marron-oscuro);
    color: var(--color-blanco);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px var(--color-sombra);
    position: fixed; /* HACEMOS EL HEADER FIJO */
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
}

.main-header .logo a {
    font-size: 1.5rem; /* Tamaño del logo ajustado */
    font-weight: 700;
}

/* El menú principal (main-nav) NO debe mostrarse en desktop, solo en mobile */
/* Asegúrate de que en estilos_desktop.css, .main-nav tenga display: flex; y .menu-toggle tenga display: none; */
/* Para mobile, el .main-nav estará oculto y el .menu-toggle visible */
.main-nav {
    position: fixed; /* Menú desplegable también fijo */
    top: 0;
    right: -100%; /* Inicialmente oculto a la derecha, fuera de la pantalla */
    width: 75%; /* Ancho del menú desplegado */
    max-width: 300px; /* Limita el ancho en tabletas pequeñas si no quieres que sea demasiado grande */
    height: 100%; /* Ocupa toda la altura de la ventana */
    background-color: var(--color-marron-oscuro);
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada */
    transition: right 0.3s ease-out;
    padding-top: 80px; /* Espacio para que el contenido no quede debajo del header */
    z-index: 999;
    overflow-y: auto; /* Permite scroll si el contenido del menú es muy largo */
    display: block; /* Necesario para que flex no sobrescriba si lo ocultas con display: none; al principio */
}

.main-nav.active { /* Clase añadida por JS para mostrar el menú */
    right: 0;
}

.menu-toggle { /* Visible en mobile, el botón de hamburguesa */
    display: block; /* Aseguramos que se muestre en mobile */
    background: none;
    border: none;
    color: var(--color-blanco);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 5px;
    -webkit-tap-highlight-color: transparent;
}

.main-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column; /* Ítems apilados verticalmente */
    align-items: flex-start; /* Alinea los ítems a la izquierda del panel */
    padding: 0 20px;
    gap: 15px; /* Espacio entre los enlaces del menú */
}

.main-nav ul li {
    width: 100%; /* Asegura que cada li ocupe el ancho completo para facilitar el tap */
}

.main-nav ul li a {
    color: var(--color-blanco);
    font-size: 1.2rem;
    font-weight: 500;
    padding: 10px 0;
    display: block; /* Hace que el área de clic sea más grande */
}

.main-nav ul li a::after { /* Elimina la barra inferior en mobile */
    content: none;
}

.main-nav ul li a:hover,
.main-nav ul li a:active { /* Efecto de hover/tap */
    color: var(--color-acento);
    transform: translateX(5px);
}

/* Superposición oscura cuando el menú está abierto */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 997; /* Debe estar entre el header/nav y el resto del contenido */
    display: none; /* Oculto por defecto */
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none; /* No interactuable cuando oculto */
}

.overlay.active {
    display: block; /* Muestra el overlay */
    opacity: 1;
    pointer-events: auto; /* Habilita interacciones (para cerrarlo al hacer clic fuera) */
}


/* --- Estilos de la Sección "Inicio" para Mobile --- */
/* Añade padding-top al body para compensar el header fijo */
body {
    padding-top: 55px; /* Ajusta según la altura de tu header móvil */
}
/* ... resto de la sección #inicio ... */
/* --- Estilos de la Sección "Inicio" para Mobile --- */
#inicio {
    /* Propiedades de fondo que quieres mantener */
    background-image: url('../images/hotel-inicio.jpg'); /* Sugerencia: una imagen de fondo más vertical */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; /* Aseguramos que no se repita */
    background-attachment: scroll; /* Generalmente se recomienda 'scroll' en móvil por rendimiento */

    /* Propiedades para la visualización del contenido */
    color: var(--color-blanco);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Sombra de texto base */
    min-height: 85vh; /* Ajustado para que el contenido sea más visible sin scroll inicial */
    
    /* Centrado del contenido con flexbox */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Importante para que el fondo se vea completo en móvil */
    padding: 0; /* Elimina cualquier padding horizontal de .seccion en el propio #inicio */
    padding-top: calc(40px + 55px); /* Mantén este padding-top para el header */
    max-width: 100%; /* Asegura que ocupe el 100% del ancho del viewport */
    width: 100%;     /* Fuerza a ocupar el 100% del ancho del viewport */
    margin: 0;        /* Elimina cualquier margen automático de .seccion */
    overflow: hidden; /* Evita barras de desplazamiento si hay un pequeño desbordamiento */
    position: relative; /* Necesario para el overlay si lo usas */
    z-index: 1; /* Asegura que el contenido esté sobre el fondo/overlay */
}

/* Opcional: Overlay oscuro para mejorar la legibilidad del texto (si tu imagen es clara) */
#inicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Capa semitransparente oscura (40% de opacidad) */
    z-index: -1; /* Coloca el overlay detrás del contenido pero delante de la imagen */
    /* Nueva adición: Para que el overlay también tenga una transición si #inicio se anima */
    transition: opacity 0.6s ease-out;
    pointer-events: none; /* Permite que los clics pasen a los elementos debajo del overlay */
}

/* Estilos para el contenedor del contenido de inicio */
.contenido-inicio {
    text-align: center; /* Centra el texto y el botón */
    max-width: 95%; /* Limita el ancho del contenido principal */
    margin: 0 auto; /* Centra el div .contenido-inicio */
    padding: 0 5px; /* Pequeño padding horizontal */

    /* Nueva adición: Efecto de animación al aparecer el contenido (replicado de desktop) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Asegúrate de que tu JavaScript añada la clase 'visible' a este elemento
       o al #inicio y luego maneje la visibilidad de .contenido-inicio */
}

/* Si tu JS añade 'visible' a #inicio, puedes hacer esto para que el contenido aparezca */
#inicio.visible .contenido-inicio {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para el título principal */
#inicio h1 {
    /* font-size: 2.8rem; */ /* Eliminamos el valor fijo */
    margin-bottom: 0.5em;
    line-height: 1.1;
    word-wrap: break-word; /* Rompe palabras largas si es necesario */
    color: var(--color-blanco); /* Aseguramos el color blanco para el título */
    text-transform: uppercase; /* Mantenemos mayúsculas */
    letter-spacing: 1px; /* Ajuste para móvil, un poco menos de espaciado */
    /* Nueva adición: responsividad de fuente con clamp() para móvil */
    font-size: clamp(2rem, 8vw, 3rem); /* Min 2rem, Max 3rem, escala con 8vw */
    /* Nueva adición: Una pequeña sombra de texto para mayor legibilidad */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* Estilos para el párrafo de descripción */
#inicio p {
    /* font-size: 1.1rem; */ /* Eliminamos el valor fijo */
    margin-bottom: 1.8em;
    max-width: 90%; /* Limita un poco más el ancho del párrafo */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    /* Nueva adición: responsividad de fuente con clamp() para móvil */
    font-size: clamp(0.9rem, 3.5vw, 1.2rem); /* Min 0.9rem, Max 1.2rem, escala con 3.5vw */
    /* Nueva adición: Una pequeña sombra de texto para mayor legibilidad */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Estilos para el botón de reserva */
.boton-reserva {
    background-color: var(--color-acento);
    color: var(--color-marron-oscuro);
    padding: 14px 30px; /* Padding del botón ajustado */
    border-radius: 6px; /* Bordes un poco menos redondeados */
    /* font-size: 1.1rem; */ /* Eliminamos el valor fijo */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Espaciado de letras reducido */
    transition: var(--transition-ease);
    box-shadow: 0 3px 8px var(--color-sombra);
    display: inline-block;
    /* Nueva adición: responsividad de fuente con clamp() para el botón */
    font-size: clamp(0.9rem, 3vw, 1.1rem); /* Min 0.9rem, Max 1.1rem, escala con 3vw */
    cursor: pointer; /* Aunque en móvil se usa el toque, es buena práctica */
    -webkit-tap-highlight-color: transparent; /* Elimina el resalte azul en iOS al tocar */
}

/* Efecto al tocar en móvil */
.boton-reserva:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px var(--color-sombra-hover);
    /* Nueva adición: Un pequeño cambio de color en el texto al activarse (opcional) */
    color: var(--color-blanco); /* ¡Este es el cambio clave para móviles! */
}

/* --- Estilos de las Secciones de Contenido, Contacto y Galería para Mobile --- */
.seccion h2 {
    font-size: 2.2rem; /* Tamaño de los títulos de sección para mobile */
    margin-bottom: 0.8em;
    line-height: 1.2;
}

#quienes-somos {
    background-color: var(--color-gris-claro);
    color: var(--color-gris-oscuro);
    padding: 50px 20px;
}

#contacto {
    background-color: var(--color-blanco);
    color: var(--color-gris-oscuro);
    padding: 50px 20px;
}

#links {
    background-color: var(--color-gris-claro);
    color: var(--color-gris-oscuro);
    padding: 50px 20px;}

/* Estilos para el grid de botones de contacto (en #contacto) */
.contact-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en mobile */
    gap: 15px; /* Espacio entre botones reducido */
    margin-top: 30px;
    margin-bottom: 40px;
    width: 100%;
    max-width: 600px; /* Un max-width para tabletas pequeñas */
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px; /* Padding interno */
}

.contact-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 10px; /* Padding del botón ajustado */
    background-color: var(--color-gris-claro);
    border-radius: 8px;
    box-shadow: 0 3px 8px var(--color-sombra);
    transition: var(--transition-ease);
    text-align: center;
    color: var(--color-marron-oscuro);
    font-weight: 600;
    min-height: 130px; /* Altura mínima ajustada */
}

.contact-button:active { /* Efecto al tocar */
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 5px var(--color-sombra-hover);
    background-color: var(--color-blanco);
}

.contact-button i {
    font-size: 2.8rem; /* Tamaño del icono ajustado */
    margin-bottom: 12px;
    color: var(--color-marron-claro);
}

.contact-button span {
    font-size: 0.95rem; /* Tamaño de texto para el botón */
    display: block;
    line-height: 1.2;
}

/* Colores específicos para iconos en active/hover para móvil */
.contact-button.whatsapp:active i { color: var(--color-whatsapp); }
.contact-button.instagram:active i { color: #E1306C; }
.contact-button.facebook:active i { color: #1877F2; }
.contact-button.phone:active i { color: #007bff; }
.contact-button.email:active i { color: #dc3545; }


/* Estilos para la lista de contacto escrita (en #links) - Más Elegante */
.contact-info-list {
    margin-top: 30px;
    max-width: 800px; /* Mantener un ancho máximo para legibilidad */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Alinea el contenido de la lista a la izquierda */
}

.contact-info-list h3 {
    font-family: var(--font-heading);
    color: var(--color-marron-oscuro);
    font-size: 1.8rem;
    margin-bottom: 1em;
    text-align: center; /* Centra el título de la lista */
}

.contact-info-list ul {
    list-style: none; /* Asegura que no haya viñetas por defecto */
    padding: 0;
    margin: 0;
}

.contact-info-list ul li {
    font-size: 1.1rem; /* Tamaño de fuente del texto */
    padding: 10px 0; /* Añade padding interno a cada item para más espacio vertical */
    margin-bottom: 5px; /* Reduce el margen inferior para que el border-bottom se vea mejor, o elimínalo si el padding es suficiente */
    display: flex;
    align-items: flex-start; /* Alinea los ítems al inicio. Importante si el texto envuelve */
    color: var(--color-gris-oscuro);
    border-bottom: 1px solid var(--color-gris-claro); /* Borde sutil en la parte inferior para separar */
    transition: background-color 0.3s ease; /* Suave transición para el hover */
}

.contact-info-list ul li:last-child {
    border-bottom: none; /* Elimina el borde del último elemento para un acabado limpio */
    margin-bottom: 0; /* Asegura que no haya margen extra al final */
}

.contact-info-list ul li:hover {
    background-color: var(--color-gris-claro); /* Fondo sutil al pasar el ratón */
    cursor: pointer; /* Indica que es interactivo aunque no todo sea un enlace */
}

.contact-info-list ul li i {
    font-size: 1.4rem; /* Tamaño del icono */
    color: var(--color-marron-claro); /* Color de acento para los iconos */
    margin-right: 15px; /* Espacio entre el icono y el texto */
    width: 30px; /* Ancho fijo para alinear iconos verticalmente */
    text-align: center;
    flex-shrink: 0; /* Evita que el icono se encoja en pantallas pequeñas */
    padding-top: 2px; /* Pequeño ajuste vertical para alinear el icono con el texto */
}

.contact-info-list ul li strong {
    font-weight: 600; /* Puedes hacer el texto "Consultas:" un poco más negrita si quieres */
    white-space: nowrap; /* Evita que "Consultas:" se rompa en varias líneas */
}

.contact-info-list ul li strong + a { /* ESTILO PARA EL ESPACIO DESPUÉS DE "Consultas:" */
    margin-left: 5px; /* Pequeño espacio horizontal después del label fuerte */
}

.contact-info-list ul li a {
    color: var(--color-gris-oscuro); /* Color del texto del enlace */
    text-decoration: none; /* Sin subrayado por defecto */
    transition: var(--transition-ease);
    word-break: break-word; /* Permite que el texto largo (ej. emails) se rompa */
    flex-grow: 1; /* Permite que el enlace ocupe el espacio restante */
}

.contact-info-list ul li a:hover {
    color: var(--color-marron-claro); /* Color de acento al pasar el ratón */
    /* text-decoration: underline; */ /* Puedes eliminar el subrayado en hover para un look más limpio */
}


#galeria {
    background-color: var(--color-gris-claro);
    padding: 50px 20px;
}

/* --- Estilos del Carrusel para Mobile --- */
#galeria {
    background-color: var(--color-gris-claro);
    padding: 50px 0; /* Padding horizontal 0 para que el carrusel ocupe todo el ancho */
    overflow: hidden; /* Importante para el carrusel */
}

.carousel-container {
    position: relative;
    width: 95%; /* Un poco de margen en los lados */
    max-width: 600px; /* Limita el ancho en tabletas */
    margin: 30px auto 0; /* Centrar y margen superior */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px var(--color-sombra-hover);
    aspect-ratio: 4 / 3; /* Relación de aspecto 4:3 para móviles, más compacta */
}

.carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--color-blanco);
    border: none;
    padding: 10px 15px; /* Padding más pequeño para botones móviles */
    cursor: pointer;
    font-size: 2rem; /* Tamaño de flecha ajustado */
    z-index: 10;
    border-radius: 5px;
    transition: var(--transition-ease);
    -webkit-tap-highlight-color: transparent;
}

.carousel-button:active { /* Efecto al tocar */
    background-color: var(--color-marron-oscuro);
    transform: translateY(-50%) scale(0.95);
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

/* --- Estilos para los Indicadores del Carrusel --- */
.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Espacio entre el carrusel y los puntos */
    gap: 8px; /* Espacio entre los puntos */
}

.indicator-dot {
    width: 10px; /* Tamaño del punto */
    height: 10px; /* Tamaño del punto */
    background-color: var(--color-marron-claro); /* Color de los puntos inactivos */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator-dot.active {
    background-color: var(--color-acento); /* Color del punto activo */
    transform: scale(1.2); /* Ligeramente más grande el punto activo */
}

.indicator-dot:hover {
    background-color: var(--color-acento); /* Efecto hover */
}

/* --- Estilos del Lightbox Actualizado para Mobile --- */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden; /* Oculto por defecto, controlado por JS */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 95%; /* Más ancho en móvil */
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); /* Sombra más fuerte */
    border-radius: 8px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox.active .lightbox-content {
    transform: scale(1);
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 8px;
}

.close-button {
    position: absolute;
    top: -25px; /* Ajusta la posición para que quede fuera o cerca de la esquina */
    right: -25px; /* Ajusta la posición */
    color: var(--color-blanco);
    font-size: 2.5rem; /* Tamaño más grande para fácil toque */
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    transition: var(--transition-ease);
    -webkit-tap-highlight-color: transparent;
}

.close-button:active {
    background-color: var(--color-acento);
    color: var(--color-marron-oscuro);
    transform: rotate(90deg) scale(0.9);
}

.lightbox .nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: var(--color-blanco);
    border: none;
    padding: 10px; /* Padding más pequeño */
    cursor: pointer;
    font-size: 2rem; /* Tamaño de flecha ajustado */
    z-index: 10;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 50%;
    width: 40px; /* Tamaño más pequeño */
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.lightbox .nav-button:active {
    background: var(--color-acento);
    color: var(--color-marron-oscuro);
    transform: translateY(-50%) scale(0.95);
}

.lightbox .prev-button {
    left: -50px; /* Ajusta la posición fuera de la imagen pero visible */
}

.lightbox .next-button {
    right: -50px; /* Ajusta la posición fuera de la imagen pero visible */
}

/* Medias queries adicionales para pantallas muy pequeñas si es necesario */
@media (max-width: 400px) {
    .lightbox .prev-button {
        left: 5px; /* Mueve los botones dentro si el espacio es muy reducido */
    }

    .lightbox .next-button {
        right: 5px;
    }

    .close-button {
        top: 5px;
        right: 5px;
    }
}

/* --- Estilos del Mapa de Ubicación y el Pie de Página para Mobile --- */
#ubicacion {
    background-color: var(--color-blanco);
    color: var(--color-gris-oscuro);
    padding: 50px 20px 0; /* Padding inferior 0 para que el mapa llegue al borde */
}

.mapa-contenedor {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Relación de aspecto 4:3 para móviles, más adecuada */
    height: 0;
    overflow: hidden;
    margin-top: 30px;
    box-shadow: 0 3px 8px var(--color-sombra);
    border-radius: 8px; /* Bordes redondeados */
}

.mapa-contenedor iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

footer {
    background-color: var(--color-gris-oscuro);
    color: var(--color-blanco);
    text-align: center;
    padding: 20px 15px; /* Padding ajustado */
    font-size: 0.85rem; /* Tamaño de fuente ajustado */
    display: flex;
    flex-direction: column; /* Apila el contenido si hay varios elementos */
    justify-content: center;
    align-items: center;
    width: 100%;
}

footer p {
    margin: 0;
    line-height: 1.4;
}

footer i {
    margin-right: 5px;
}