body {
    background-image: url('../images/bg.png'); /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta a tu imagen */
    background-repeat: repeat; /* Esto hará que la imagen se repita en el eje X y Y */
    text-align: center;
    font-family: 'Roboto Slab', serif;
    padding: 1%;
    font-size: 16px; /* Tamaño de fuente para escritorio */
}

.container {
    width: 80%; /* Ajusta este valor a tus necesidades */
    margin: 0 auto;
}

.logo {
    width: 30%; /* Ajusta este valor a tus necesidades */
    height: auto;
    border-radius: 30%; /* Esto hace que el logo sea redondo */
}

/* Cuando la pantalla es de 600px o menos, aumenta el tamaño del logo en un 50% y añade un margen superior de 15px */
@media screen and (max-width: 600px) {
    .logo {
        width: 50%; /* 50% más grande que el 30% original */
        margin-top: 20px; /* Añade un margen superior de 15px */
    }
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px; /* Ajusta este valor a tus necesidades */
}

.social-icons img {
    width: 24px;
    height: 24px;
}

/* Aquí es donde colocas el CSS del mapa responsivo */
.map-container {
    position: relative;
    padding-bottom: 35%; 
    height: 0;
    overflow: hidden;
    border-bottom: 15px solid #000; 
}

/* Si la pantalla tiene 600px o menos, el borde inferior será de 10px */
@media (max-width: 600px) {
  .map-container {
    border-bottom: 10px solid #000;
  }
}

.map-container iframe {
    position: absolute;
    top: 10px; /* Ajusta este valor a tus necesidades */
    left: 10px; /* Ajusta este valor a tus necesidades */
    width: calc(100% - 20px); /* Ajusta este valor a tus necesidades */
    height: calc(100% - 20px); /* Ajusta este valor a tus necesidades */
    border-radius: 0.8em; /* Suavizado de borde de 0.8 */
}
/* Fin del CSS del mapa responsivo */

/* Cuando la pantalla es de 600px o menos, aumenta el tamaño de la fuente */
@media (max-width: 600px) {
    body {
        font-size: 20px; /* Tamaño de fuente para móviles y tabletas */
        padding: 5%;
    }
}

/* CSS para el pie de página */
footer {
background-color: #333333; /* Gris oscuro */
color: #ffffff; /* Texto blanco para contraste */
text-align: center;

position: fixed;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid #ffffff; /* Línea horizontal delgada en la parte superior */
display: flex;
justify-content: center;
align-items: center;
font-family: 'Courier New', monospace; /* Tipografía de máquina de escribir */
flex-direction: column; /* Añade esta línea para dividir el texto en dos líneas */
white-space: pre-line; /* Permite que el texto se divida automáticamente en dos líneas */
font-size: calc(3em + 2vw); /* Tamaño de fuente escalable en modo responsivo */
}

/* Consultas de medios para adaptar el pie de página a diferentes tamaños de pantalla */
@media (max-width: 600px) { footer { font-size: 16px; } }
@media (min-width: 601px) and (max-width: 1024px) { footer { font-size: 16px; } }
@media (min-width: 1025px) { footer { font-size: 18px; } }

/* Aquí es donde colocas el CSS para el fondo y el borde */
.parent-container {
    background-color: rgba(255, 209, 220, 0.5); /* Rosa palo con opacidad al 50% */
    border: 2px solid #FFD1DC; /* Borde rosa palo sólido para que sea visible */
    border-radius: 0.8em; /* Suavizado de borde de 0.8 */
    width: 90%; /* Ajusta este valor a tus necesidades */
    margin: 0 auto;
}

/* Cuando la pantalla es de 600px o menos, aumenta el ancho del fondo */
@media (max-width: 600px) {
  .parent-container {
    width: 100%; /* Ajusta este valor a tus necesidades */
  }
}