/*
======================================================
  CONFIGURACIÓN BASE (body, html, párrafos)
======================================================
*/
html, body {
    /* Altura total necesaria para el scroll */
    height: 100%; 
    margin: 0;
}

body {
    /* 1. SOLUCIÓN AL PROBLEMA DEL SCROLL QUE SE DETIENE (Colapso de Márgenes) */
    /* Añadir un padding superior 'invisible' evita que el margen del primer hijo empuje al body. */
    padding-top: 1px; 
    background-color: #ffffff;
    /* Propiedades de Fondo */
    /*background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
    /*background-image: url('../img/fondo.jpg');
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    font-family: Arial, sans-serif;
}

/* Ocultar la barra de desplazamiento solo si es estrictamente necesario y sabiendo que no funciona igual en todos los navegadores */
html {
    scrollbar-width: none; /* Firefox */
}
/* Opcional: Para navegadores basados en WebKit (Chrome, Safari, Edge) */
body::-webkit-scrollbar {
    display: none;
}


p {
    white-space: pre-line; /* Mantiene saltos de línea y espacios múltiples en HTML */
}

/*
======================================================
  ESTRUCTURA Y LAYOUT PRINCIPAL
======================================================
*/

/* Selector 'main' - Lo he mantenido, pero no debe ser un contenedor principal de scroll */
main {
    background-color: rgb(216, 222, 236 0); /* Transparente */
    padding: 2.5rem 3.75rem;
    border-radius: 0; /* Lo cambié a 0 */
    text-align: center;
    /* La altura máxima aquí puede limitar el scroll de toda la página. 
       Asegúrate de que 'main' no contenga todo el contenido si no quieres que el scroll ocurra aquí. */
    max-height: 80vh; 
}
/* Clase .main - Estilo para un contenedor específico (parece redundante con 'main') */
.main {
    justify-content: center;
    background-color: transparent;
    /* Quitada la llave de cierre extra '}' que causaba error en el código original */
}

/* Estilos para el contenedor de la Galería */
.contenedor-galeria {
    /* El 'all: unset' aquí elimina todos los estilos, incluyendo 'display: flex' anterior. 
       Lo he reemplazado por estilos específicos para asegurar el layout. */
    max-width: 68.75rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.contenedor-imagenes {
    /* También limpiado de 'all: unset' y propiedades redundantes */
    width: 20rem;
    height: auto;
    background-color: transparent; 
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

/*
======================================================
  CONTENEDORES Y CAJAS REUTILIZABLES
======================================================
*/

/* Selectores de DIV genéricos - ¡PRECAUCIÓN! Esto afecta a *todos* los <div> */
/* Si solo quieres afectar cajas de contenido, usa una clase como .caja-contenido */
div {
    background-color: #ffffff;
    padding: 2.5rem 3.75rem;
    border-radius: 0;
    text-align: center;
    /* 2. SOLUCIÓN AL SCROLL EN CAJAS INTERNAS: */
    /* Usar overflow-y: auto es correcto, pero max-height: 100% necesita un padre con altura fija. 
       Si tu div está haciendo scroll, asegúrate de que su altura es limitada. */
    /*max-height: 100%;  ESTE ESTILO HACE QUE CUALQUIER DIV INTENTE SCROLLEAR INTERNAMENTE */
    /*overflow-y: auto;  ESTO FUERZA UN SCROLL DENTRO DEL DIV, NO EN EL BODY */
    margin-bottom: 2rem;
}
.lista-misas-caja, .poema-caja {
    background-color: #ffffff;
    padding: 2.5rem 3.75rem;
    border-radius: 0;
    text-align: center;
    
    /* Importante: Quita max-height y overflow-y: auto de aquí, 
       ya que estos contenedores ahora no necesitan scroll interno
       (crecerán con su contenido, y el body hará el scroll). */
    
    margin-bottom: 2rem;
}

.misa-card {
    background-color: rgb(218, 218, 218);
    padding: 2.5rem 3.75rem;
    border-radius: 0;
    text-align: center;
    
    /* Quita 'max-height: 100%;' para que crezcan con el contenido */
    overflow-y: auto; /* Muestra scroll interno solo si este div específico desborda */
    margin-bottom: 2rem;
}

.poema-caja {
    /* Mantenemos el estilo de caja del DIV global */
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(218, 218, 218);
}

.poema-caja p {
    text-align: center;
    line-height: 1.8;
}

.autor p {
    text-align: left;
}

.parrafo {
    text-align: left;
    white-space: pre-line;
}

/*
======================================================
  TÍTULOS Y CENTRADO
======================================================
*/

.centrado {
    /* Eliminada la redundancia de 'display: block' y 'margin: 0 auto' */
    color: black;
    text-align: center;
    margin: 0 auto; 
}

h1.centrado {
    font-size: 2em;
    margin-top: 0.625rem;
}

h2.centrado {
    font-size: 1.5em;
    margin-top: 0.625rem;
}

.titulo {
    text-align: center;
    color: #2b6e4d;
}
.sub-titulo {
    text-align: left;
    color: #2b6e4d;
}

/*
======================================================
  ESTILOS ESPECÍFICOS (Carrusel, Poema, Formularios, Imágenes)
======================================================
*/

.container-poema {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #ffffff;
    padding: 1.25rem;
    gap: 1.875rem;
    text-align: center;
    /* min-height: 125vh; - Esto puede forzar el scroll, asegúrate de que lo quieres */
    min-height: 100vh; 
}

.poema {
    width: 30%;
    /* min-height: 110vh; - También forzará scroll, revisa si es necesario */
    text-align: center;
    white-space: pre-line;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.9rem
}

.img {
    float: right;
    width: 20rem;
    border-radius: 0.4rem;
}
.imgs {
    float: left;
    width: 20rem;
    border-radius: 0.4rem;
}
.imagen-centro {
    width: 20.5rem;
    height: auto;
    align-self: center;
}

table {
    margin: 0 auto;
}
 
.result {
    border: 0.1rem solid;
}

/* Estilos de Botones/Inputs */
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background-color: #35845d;
    color: white;
    border: none;
    padding: 0.75rem 1.5625rem;
    font-size: 1em;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 0.625rem 0.5rem; /* Margen horizontal añadido para separarlos */
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: #2baa6b;
}

.form {
    text-align: left;
    float: left; /* Cuidado con float, puede sacarlo del flujo */
}

.input {
    width: 20rem;
    height: 1.2rem;
}

textarea {
    width: 20rem;
    height: 10rem;
}

.logo-header img {
    width: 12rem;
}
.imagen {
    /* Limpieza de 'all: unset' */
    width: 100%;
    border-radius: 0.2rem;
    box-shadow: 0.5rem 0rem 0.6rem rgba(0, 0, 0, 0.445);
}

/* Carrusel */
.carrusel {
    display: flex;
    flex-wrap: nowrap;
    border-radius: 0.8rem;
    background-color: rgba(0, 0, 0, 0.8); /* Quitada la llave de cierre extra aquí */
}

.slide {
    flex: 0 0 auto;
    color: white;
    margin: 0.5rem;
}
    .slide img {
        max-height: 10rem;
        border-radius: 0.5rem;
        object-fit: cover;
        margin-left: 2.5rem;
    }
.elemento {
    object-fit: cover;
    max-height: 20rem;
    border-radius: 0.5rem;
    object-fit: cover;
    margin-right: 0.5rem;
    flex: 0 0 auto;
    scroll-snap-align: center;
}