* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; scroll-behavior: smooth; }

/* PORTADA */
.pantalla-principal { height: 100vh; position: relative; overflow: hidden; }
.slider-fondo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; }
.diapositiva { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; animation: animacionSlider 15s infinite; }
.img1 { background-image: url('fotos_index/portada1.webp'); animation-delay: 0s; }
.img2 { background-image: url('fotos_index/portada2.webp'); animation-delay: 5s; }
.img3 { background-image: url('fotos_index/portada3.webp'); animation-delay: 10s; }

@keyframes animacionSlider { 0% { opacity: 0; transform: scale(1); } 10% { opacity: 1; } 33% { opacity: 1; } 43% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; } }

.capa-oscura { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.7)); z-index: -1; }
.enlace-galeria { position: absolute; top: 40px; right: 50px; color: white; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; font-weight: bold; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; }
.enlace-galeria:hover { border-bottom: 1px solid white; }
.contenido-texto { position: absolute; bottom: 50px; left: 50px; color: white; text-align: left; }
.contenido-texto h1 { font-size: 4rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 5px; }
.contenido-texto p { font-size: 1.2rem; font-weight: 300; letter-spacing: 2px; color: #cccccc; }

/* GALERÍA Y CARPETAS */
.cuerpo-galeria { background-color: #111; }
.seccion-galeria { min-height: 100vh; padding: 80px 50px; }
.cabecera-galeria { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
.cabecera-galeria h2 { color: white; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; font-size: 1.5rem; }
.controles-navegacion { display: flex; gap: 20px; align-items: center; }
.boton-volver { color: #888; text-decoration: none; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; transition: color 0.3s; }
.boton-volver:hover { color: white; }
#btn-volver-carpetas { background: none; border: 1px solid white; color: white; padding: 8px 15px; cursor: pointer; text-transform: uppercase; font-size: 0.8rem; transition: 0.3s; }
#btn-volver-carpetas:hover { background: white; color: black; }

.cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.foto-miniatura { width: 100%; height: 350px; object-fit: cover; cursor: pointer; transition: transform 0.4s ease, opacity 0.4s ease; }
.foto-miniatura:hover { transform: scale(1.02); opacity: 0.7; }

.tarjeta-carpeta { position: relative; cursor: pointer; overflow: hidden; }
.tarjeta-carpeta::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); transition: background 0.3s; pointer-events: none; }
.tarjeta-carpeta:hover::after { background: rgba(0,0,0,0.1); }
.titulo-carpeta { position: absolute; bottom: 20px; left: 20px; color: white; z-index: 10; font-size: 1.5rem; letter-spacing: 2px; text-transform: uppercase; }

/* LIGHTBOX (VISOR CON MARCO BLANCO) */
.lightbox-oculto { display: none; }
.lightbox-activo { display: flex; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); justify-content: center; align-items: center; }
#imagen-lightbox { max-width: 90%; max-height: 90%; border: 15px solid white; box-shadow: 0 0 40px rgba(0,0,0,0.8); animation: aparecerFoto 0.4s ease; }
@keyframes aparecerFoto { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#cerrar-lightbox { position: absolute; top: 30px; right: 40px; color: white; font-size: 4rem; cursor: pointer; font-weight: 300; transition: color 0.3s; }
#cerrar-lightbox:hover { color: #888; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .enlace-galeria { top: 25px; right: 25px; } .contenido-texto { bottom: 30px; left: 25px; } .contenido-texto h1 { font-size: 2.5rem; }
    .seccion-galeria { padding: 50px 20px; } .cuadricula { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .foto-miniatura { height: 200px; }
}