/* body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: url('src/fondo7.jpg') no-repeat center center fixed; 
    background-size: cover;
    position: relative;
} */

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('src/lorca.jpg'), linear-gradient(to bottom, white, white);
    background-position: bottom center, top center;
    background-size: 100% auto, 100% calc(100% - 100vh);
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed;
    position: relative;
}





/* body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('src/lorca.jpg'), 
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M50,1 L50,10 M50,90 L50,99" stroke="black" stroke-width="2"/><path d="M1,50 L10,50 M90,50 L99,50" stroke="black" stroke-width="2"/></svg>');
    background-position: bottom center, center center;
    background-size: cover, contain;
    background-repeat: no-repeat;
    background-attachment: fixed, fixed;
    position: relative;
} */


main {
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
}

.panel-difuminado1 {
    background: rgba(255, 255, 255, 0.4); /* Fondo semitransparente para el panel */
    padding: 20px;
    border-radius: 10px;
    margin: 0 auto;
    width: auto;
    box-sizing: border-box;
}

.iniciales {
    text-align: center;
}

.iniciales h1 {
    font-family: 'Dancing Script', cursive;
    color: #3e8e41;
}

.casamos {
    font-family: 'Dancing Script', cursive;
    color: #333;
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
}

.cuenta {
    font-family: 'Dancing Script', cursive;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 55px;
    margin-top: 0px;
}


.contacto a i {
    font-size: 24px; /* Ajusta el tamaño del ícono */
}

.contacto a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Tamaño del botón */
    height: 40px; /* Tamaño del botón */
    border-radius: 50%; /* Hace que el botón sea circular */
    background-color: #fff; /* Fondo blanco para el botón */
    color: black; /* Color del ícono */
    text-decoration: none; /* Elimina el subrayado del enlace */
    margin: 5px; /* Espacio alrededor del botón */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra ligera para el botón */
}

.contacto .boton-telefono {
    background-color: #007bff; /* Fondo azul para el botón de teléfono */
    color: white; /* Color del ícono de teléfono */
}

.contacto .boton-whatsapp {
    background-color: #25D366; /* Fondo verde de WhatsApp para el botón de WhatsApp */
    color: white; /* Color del ícono de WhatsApp */
}


.frase {
    
    font-family: 'Dancing Script', cursive;
    color: #333;
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 0px;
    line-height: 1;
}

.frase-iglesia {
    
    font-family: 'Dancing Script', cursive;
    color: #333;
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 0px;
    line-height: 1;
}

.frase-celebracion {
    
    font-family: 'Dancing Script', cursive;
    color: #333;
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 0px;
    line-height: 1;
}


.frase-asistencia {
    
    font-family: 'Dancing Script', cursive;
    color: #333;
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 0px;
    line-height: 1;
}


.frase-asistencia-2 {
    
    font-family: 'Dancing Script', cursive;
    color: #333;
    font-size: 18px;
    margin-bottom: 10px;
    margin-top: 0px;
    line-height: 1;
}



.contactos-container {
    display: flex;
    justify-content: space-around; /* Espacia las columnas uniformemente */
    padding: 20px;
}

.contacto {
    flex-basis: 45%; /* Asigna un ancho a cada contacto para asegurar que ocupen dos columnas */
    text-align: center; /* Centra el contenido de cada contacto */
}

.contacto h3 span {
    font-weight: normal; /* Opcional: hace que el número de teléfono no se vea en negrita */
}
.boton-telefono, .boton-whatsapp {
    display: inline-flex; /* Utiliza flexbox para un mejor control de alineación */
    align-items: center; /* Centra los íconos verticalmente */
    justify-content: center; /* Centra los íconos horizontalmente */
    width: 30px; /* Ancho reducido del botón */
    height: 30px; /* Altura reducida del botón */
    padding: 5px; /* Padding reducido dentro del botón */
    border-radius: 50%; /* Bordes redondeados para un botón circular */
    background-color: #fff; /* Fondo del botón */
    color: #000; /* Color del ícono */
    text-decoration: none; /* Elimina el subrayado del enlace */
    margin: 5px; /* Espacio alrededor del botón */
    font-size: 16px; /* Tamaño reducido del ícono */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra ligera para el botón */
    transition: background-color 0.3s; /* Efecto suave al cambiar de color */
}
.boton-telefono {
    background-color: #007bff; /* Azul para el botón de llamar */
}

.boton-whatsapp {
    background-color: #25D366; /* Verde de WhatsApp */
}

.contacto h3 {
    font-family: 'Dancing Script', cursive; /* Especifica la fuente, si es necesario */
    font-size: 24px; /* Tamaño de letra más grande para el nombre */
    margin: 0; /* Elimina el margen superior e inferior */
    font-size: bold;
}

.contacto h3 span {
    font-family: 'Dancing Script', cursive; /* Especifica la fuente, si es necesario */
    font-size: 18px; /* Tamaño de letra más pequeño para el número */
    font-weight: 700; /* Opcional: hace el número más bold */
    display: inline-block; /* Opcional: puede ayudar con el control de estilo */
}



.boton-regresar {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: transparent; /* Hace el fondo del botón transparente */
    color: #333; /* Ajusta el color del texto según sea necesario para tu diseño */
    padding: 10px 15px;
    text-decoration: none; /* Remueve el subrayado del enlace */
    font-family: 'Roboto', sans-serif;
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: none; /* Elimina la sombra para un look completamente transparente */
    border: 2px solid #333; /* Opcional: añade un borde para definir el botón */
    z-index: 1000; /* Asegura que el botón esté sobre otros elementos */
}




.header-logo {
    width: 150px;
    height: auto; 
    display: block;
    margin: 0 auto 10px; 
} 


.imagen-iglesia {
    width: auto; /* Ajusta el ancho automáticamente basado en la altura para mantener la relación de aspecto */
    height: 30vh; /* Usa el menor valor entre 30% y 80% de la altura del viewport */
    display: block;
    margin: 0 auto 10px; /* Centra la imagen horizontalmente y añade un margen inferior de 10px */
    border-radius: 20px; /* Redondea las esquinas de la imagen */
}

.imagen-celebracion {
    width: 80vw; /* Establece el ancho al 50% del ancho del viewport */
    height: auto; /* Ajusta la altura automáticamente para mantener la relación de aspecto */
    display: block;
    margin: 0 auto 10px; /* Centra la imagen horizontalmente y añade un margen inferior de 10px */
    border-radius: 20px; /* Redondea las esquinas de la imagen */
    max-height: min(80vh, 30vh); /* Redondea las esquinas de la imagen */
}





nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

nav a {
    text-decoration: none;
    color: #3e8e41;
    margin: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
}

nav a i {
    font-size: 25px; /* Cambia este valor para ajustar el tamaño del icono */
}


.boton-ubicacion, .boton-parking {
    display: flex;
    align-items: center;
    gap: 8px; /* Añade un poco de espacio entre el ícono y el texto */
    text-decoration: none;
}

.boton-ubicacion i, .boton-parking i {
    width: 24px; /* Asegúrate de que el ícono tenga un tamaño fijo */
    text-align: center;
}

/* Aquí puedes añadir los estilos de color y tamaño que ya se discutieron previamente. */




nav a i {
    margin-right: 8px; /* Añade un poco de espacio entre el icono y el texto */
    color: #000000; /* Cambia el color del icono, ajusta según tu esquema de color */
}

nav a {
    display: flex;
    align-items: center; /* Alinea verticalmente el icono con el texto */
    text-decoration: none;
    color: black; /* O cualquier color que prefieras para el texto */
}

/* Ajustes adicionales según sea necesario */


nav img {
    height: 30px;
    margin-bottom: 5px;
}

nav a:nth-child(1) { grid-area: 1 / 1 / 2 / 2; } /* Iglesia */
nav a:nth-child(2) { grid-area: 2 / 1 / 3 / 2; } /* Confirmación de asistencia */
nav a:nth-child(3) { grid-area: 1 / 2 / 2 / 3; } /* Banquete */
nav a:nth-child(4) { grid-area: 2 / 2 / 3 / 3; } /* Alojamiento */

@media (max-width: 600px) {
    nav {
        grid-template-columns: 1fr;
    }
    nav a {
        grid-area: auto;
    }
}

.iglesia-info, .banquete-info {
    background: rgba(255, 255, 255, 0.6);
    padding: 20px;
    border-radius: 10px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    max-width: 1000px;
}

.iglesia-info h2, .banquete-info h2 {
    font-family: 'Dancing Script', cursive;
    font-size: 24px;
    color: #333;
}

.iglesia-info img, .banquete-img {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
    border-radius: 15px;
}

.iglesia-info a, .boton-ubicacion, .boton-parking {
    display: inline-block;
    padding: 10px 20px;
    background-color: #9dd0df;
    color: white;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}


.botones-container {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 10px; /* Añade espacio entre los botones */
}


@media (max-width: 768px) {
    .banquete-info h2 {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .banquete-info {
        padding: 15px;
    }
    .banquete-info h2, .iglesia-info h2 {
        font-size: 1em;
    }
    .boton-ubicacion, .boton-parking {
        font-size: 0.9em;
    }
}



.boton-ubicacion {
    font-size: 17px;
    display: inline-block;
    color: #000000; /* Rojo para el ícono de ubicación */
    text-decoration: none;
    padding: 5px;
    margin: 5px;
    /* Añade propiedades adicionales de estilo si es necesario */
}

.boton-parking {
    font-size: 17px;
    display: inline-block;
    color: #000000; /* Verde para el ícono de estacionamiento */
    text-decoration: none;
    padding: 5px;
    margin: 5px;
    /* Añade propiedades adicionales de estilo si es necesario */
}

/* Estilos para el estado hover del botón */
.boton-ubicacion:hover {
    color: rgb(32, 32, 32); /* Un tono más oscuro de rojo para el hover */
}

.boton-parking:hover {
    color: #000000; /* Un tono más oscuro de verde para el hover */
}


.boton-musica {
    font-size: 24px; /* Tamaño del ícono */
    position: fixed; /* Posición fija en la pantalla */
    top: 20px; /* Desde la parte superior de la ventana */
    right: 20px; /* Desde el lado derecho de la ventana, en lugar de left */
    background: none; /* Sin fondo para que solo se muestre el ícono */
    border: none; /* Sin bordes */
    cursor: pointer; /* Cursor en forma de mano al pasar el ratón sobre el botón */
    color: #000000; /* Color del ícono */
}