/* ========================================================
   ESTILOS PRINCIPALES (index.html) - Misión Morada de Paz
   ======================================================== */

/* --- REGLA UNIVERSAL PARA EVITAR DESBORDAMIENTOS --- */
*, *::before, *::after { box-sizing: border-box; }

/* --- COMPORTAMIENTO DE DESPLAZAMIENTO SUAVE --- */
html { scroll-behavior: smooth; scroll-padding-top: 70px; }

/* --- ESTILOS GENERALES --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0; padding: 0;
    background-color: #ffffff; color: #333;
    overflow-x: hidden;
}

/* --- FONDOS DE SECCIONES --- */
section { padding: 4.5rem 0; width: 100%; }
.fondo-blanco { background-color: #ffffff; }
.fondo-gris { background-color: #f4f7f6; }
.fondo-verde { background-color: #eef7ee; }
.fondo-oscuro { background-color: #1a1a1a; color: #ffffff; }

/* --- CONTENEDORES --- */
.contenedor { max-width: 900px; margin: 0 auto; padding: 0 1rem; }
.contenedor p { text-align: justify; line-height: 1.6; }
h2 { color: #4CAF50; border-bottom: 2px solid #ddd; padding-bottom: 0.5rem; margin-top: 0; }
.fondo-oscuro h2 { color: #4CAF50; }

/* --- MENÚ DE NAVEGACIÓN --- */
.barra-navegacion {
    position: sticky; top: 0;
    background-color: #ffffff;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.8rem 2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000;
}
.barra-navegacion .logo { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 1.2rem; color: #4CAF50; text-decoration: none; }
.logo-img { height: 60px; width: auto; object-fit: contain; }
.enlaces-menu { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.enlaces-menu a { text-decoration: none; color: #555; font-weight: 500; transition: color 0.3s ease; }
.enlaces-menu a:hover { color: #4CAF50; }

/* --- ENCABEZADO (BANNER) --- */
header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('img/banner.png');
    background-size: 100% 100%; 
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #1a1a1c; 
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15% 1rem; 
}

header h1 { display: block; margin: 0; font-size: 3.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
header p { display: block; text-align: center; font-size: 1.3rem; margin-top: 1rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); }

/* --- SECCIÓN DE ÁLBUMES (PORTADAS TIPO FACEBOOK) --- */
.cuadricula-albumes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 2rem;
}
.tarjeta-album {
    display: block; background-color: #ffffff; border-radius: 12px; overflow: hidden;
    text-decoration: none; color: inherit; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tarjeta-album:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }

.collage-3-fotos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 120px 120px; gap: 2px; background-color: #fff; }
.collage-3-fotos img { width: 100%; height: 100%; object-fit: cover; }
.foto-mayor { grid-row: span 2; }

.info-album { padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; }
.info-album h3 { margin: 0 0 5px 0; color: #333; font-size: 1.2rem; }
.info-album p { margin: 0 0 15px 0; color: #666; font-size: 0.9rem; }

/* --- ESTILOS DEL NUEVO BOTÓN --- */
.btn-ver-album {
    display: inline-block; /* Necesario ahora que es un enlace <a> */
    text-decoration: none; /* Quita la línea de subrayado típica de los enlaces */
    background-color: #4CAF50;
    color: white;
    padding: 8px 20px;
    border-radius: 25px; 
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto: El botón solo reacciona cuando pasas el ratón DIRECTAMENTE sobre él */
.btn-ver-album:hover {
    transform: scale(1.05); 
    background-color: #45a049;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* --- SECCIÓN DE CINE (DOCUMENTAL) --- */
.contenedor-video-cine { max-width: 800px; margin: 0 auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); background-color: #000; overflow: hidden; }
.video-local { width: 100%; height: auto; display: block; }

/* --- SECCIÓN DE NOTICIAS --- */
.cuadricula-noticias { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 2rem; }
.tarjeta-noticia { background-color: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 4px solid #4CAF50; transition: transform 0.3s ease; }
.tarjeta-noticia:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
.fecha-noticia { display: block; font-size: 0.85rem; color: #888; margin-bottom: 0.5rem; }
.tarjeta-noticia h3 { margin: 0 0 1rem 0; color: #333; font-size: 1.3rem; }
.tarjeta-noticia p { color: #555; margin-bottom: 1.5rem; text-align: left !important; }
.btn-leer { display: inline-block; padding: 0.5rem 1rem; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; font-size: 0.9rem; font-weight: bold; transition: background-color 0.3s; }
.btn-leer:hover { background-color: #45a049; }

/* --- CARRUSEL DE TESTIMONIOS AUTOMÁTICO --- */
.contenedor-testimonios-auto { overflow: hidden; width: 100%; position: relative; margin-top: 2rem; border-radius: 10px; }
.pista-testimonios-auto { display: flex; transition: transform 0.6s ease-in-out; }
.tarjeta-testimonio { min-width: 100%; background-color: #fff; padding: 3rem 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-left: 5px solid #4CAF50; position: relative; box-sizing: border-box; text-align: center; }
.tarjeta-testimonio::before { content: "“"; font-size: 5rem; color: #4CAF50; opacity: 0.2; position: absolute; top: -10px; left: 20px; font-family: serif; }
.cita { font-style: italic; color: #555; font-size: 1.2rem; text-align: center !important; max-width: 700px; margin: 0 auto; }
.autor-testimonio { font-weight: bold; color: #333; text-align: center !important; margin-top: 1.5rem; }

/* --- SECCIÓN CÓMO AYUDAR (DONACIONES) --- */
.seccion-ayuda { text-align: center; }
.caja-ayuda { background-color: #e8f5e9; padding: 3rem 2rem; border-radius: 12px; margin-top: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.caja-ayuda h3 { color: #2e7d32; font-size: 1.5rem; margin-top: 0; }
.caja-ayuda p { font-size: 1.1rem; color: #444; max-width: 700px; margin: 1rem auto 2rem auto; text-align: center !important; }
.metodos-donacion { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 700px; margin: 2.5rem auto; }
.tarjeta-donacion { background-color: #ffffff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 4px solid #4CAF50; }
.tarjeta-donacion h4 { margin: 0 0 10px 0; color: #2e7d32; font-size: 1.2rem; }
.numero-cuenta { font-size: 1.4rem; font-weight: bold; color: #333; margin: 10px 0; letter-spacing: 1px; }
.titular { font-size: 0.9rem; color: #666; margin: 0; }
.confirmacion-voucher { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #c8e6c9; }
.confirmacion-voucher p { font-weight: bold; color: #2e7d32; }
.btn-whatsapp { display: inline-block; background-color: #25D366; color: white; padding: 0.8rem 1.8rem; text-decoration: none; border-radius: 25px; font-weight: bold; font-size: 1.1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.btn-whatsapp:hover { transform: scale(1.05); box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4); }

/* --- PIE DE PÁGINA (ESTILO PROFESIONAL) --- */
footer { background-color: #1a1a1c; color: #ffffff; padding: 1rem 0; }
.footer-contenido { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1rem 0.5rem 1rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #333; }
.footer-izq { display: flex; align-items: center; gap: 15px; }
.footer-logo { height: 40px; width: auto; object-fit: contain; }
.footer-izq span { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.5px; }
.footer-der { text-align: right; }
.footer-der p { margin: 0; font-size: 0.9rem; color: #a0a0a0; line-height: 1.6; }

/* =========================================
   DISEÑO RESPONSIVO (PARA CELULARES)
   ========================================= */
@media (max-width: 768px) {
    .barra-navegacion { flex-direction: column; align-items: center; padding: 1rem 0.5rem; gap: 15px; }
    .barra-navegacion .logo { justify-content: center; width: 100%; margin-bottom: 5px; }
    .enlaces-menu { flex-wrap: wrap; justify-content: center; gap: 12px; font-size: 0.9rem; }
    html { scroll-padding-top: 150px; }
    
    header { background-size: cover; background-position: center; padding: 5rem 1rem; }
    header h1 { font-size: 2.5rem; }
    header p { font-size: 1.1rem; }
    h2 { font-size: 1.3rem; }
    
    .footer-contenido { flex-direction: column; gap: 1.5rem; text-align: center; }
    .footer-izq { justify-content: center; }
    .footer-der { text-align: center; }
}