/* --- IMPORTACIÓN DE FUENTES EXTERNAS --- */
/* Cargamos Montserrat para textos generales y Poiret One para un look artístico/minimalista */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&family=Poiret+One&display=swap');

/* --- 1. RESET & BASE: Limpieza de estilos por defecto del navegador --- */
* { 
    margin: 0;                   /* Quita márgenes externos automáticos */
    padding: 0;                  /* Quita espacios internos automáticos */
    box-sizing: border-box;      /* Asegura que el padding no ensanche los elementos */
}

html { 
    scroll-behavior: smooth;     /* Hace que al hacer clic en el menú, la web baje suavemente */
}

body {
    font-family: 'Montserrat', sans-serif; /* Fuente por defecto para todo el sitio */
    background-color: #000;      /* Fondo negro total */
    color: #fff;                 /* Texto blanco por defecto */
    line-height: 1.6;            /* Altura de línea para que el texto no se vea apretado */
    overflow-x: hidden;          /* Evita que aparezca una barra de desplazamiento horizontal */
}

/* --- 2. NAVEGACIÓN: Barra de menú superior --- */
.navbar {
    position: fixed;             /* Se mantiene visible aunque el usuario baje en la web */
    top: 0;                      /* Pegada al borde superior */
    width: 100%;                 /* Ocupa todo el ancho de la pantalla */
    background: rgba(0, 0, 0, 0.95); /* Negro casi sólido (95%) para dejar ver un poco el fondo */
    padding: 25px 0;             /* Espaciado interno arriba y abajo */
    z-index: 2000;               /* Prioridad alta para que nada tape el menú */
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Línea divisoria muy tenue */
}

.nav-container {
    display: flex;               /* Activa alineación flexible */
    justify-content: space-between; /* Logo a la izquierda, menú a la derecha */
    align-items: center;         /* Centra los elementos verticalmente */
    max-width: 1200px;           /* Limita el ancho en pantallas muy grandes */
    margin: 0 auto;              /* Centra el contenedor horizontalmente */
    padding: 0 30px;             /* Margen interno a los lados */
}

.logo { 
    font-size: 14px;             /* Tamaño pequeño para elegancia */
    letter-spacing: 4px;         /* Espacio entre letras tipo marca de lujo */
    font-weight: 400;            /* Grosor de letra normal */
    text-transform: uppercase;   /* Siempre en mayúsculas */
}

.nav-menu ul { 
    display: flex;               /* Los enlaces se ponen uno al lado del otro */
    list-style: none;            /* Quita los puntos de la lista */
}

.nav-menu ul li { margin-left: 30px; } /* Separación entre botones del menú */

.nav-menu ul li a {
    text-decoration: none;       /* Quita el subrayado de los enlaces */
    color: #fff;                 /* Texto blanco */
    font-size: 11px;             /* Menú pequeño y minimalista */
    letter-spacing: 2px;         /* Espacio entre letras */
    transition: 0.3s;            /* Suaviza cualquier cambio (como el hover) */
}

.nav-menu ul li a:hover { opacity: 0.5; } /* El enlace se vuelve traslúcido al pasar el mouse */

/* --- 3. SECCIÓN HERO: Portada principal --- */
.hero-section {
    min-height: 100vh;           /* La portada ocupa siempre el 100% del alto de pantalla */
    width: 100%;
    background-image: url('img/inicio.jpg'); /* Imagen de fondo */
    background-repeat: no-repeat;
    background-position: center center; /* Centra la imagen para que no se corte el motivo principal */
    background-size: cover;      /* La imagen cubre todo el espacio sin deformarse */
    display: flex;               /* Para centrar el contenido (el nombre de la banda) */
    align-items: center; 
    justify-content: center;
    position: relative;
    overflow: hidden;            /* Corta cualquier elemento que sobresalga (como el video) */
    background-color: #000;
}

.hero-overlay {
    position: absolute;          /* Capa que va justo encima de la imagen/video */
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); /* Oscurece el fondo un 50% para que el texto sea legible */
}

.hero-content { 
    position: relative;          /* Asegura que el texto esté por encima del overlay */
    text-align: center;          /* Centra el texto */
    z-index: 10;                 /* Nivel de capa intermedio */
}

.hero-content h1 {
    font-family: 'Poiret One', cursive; /* Fuente artística para el nombre */
    font-size: clamp(2rem, 5vw, 5rem);  /* Tamaño fluido (se achica en móvil, crece en PC) */
    letter-spacing: 15px;        /* Mucho aire entre letras para impacto visual */
    margin-bottom: 10px;
}

.subtitle { 
    letter-spacing: 6px;         /* Espaciado del subtítulo */
    font-size: 12px;
    /*text-transform: uppercase;*/   /* Mayúsculas */
    /*opacity: 0.8;*/                /* Un poco más tenue que el título principal */
}

/* --- 4. SECCIONES Y ESTRUCTURA GENERAL --- */
.section { 
    padding: 120px 20px;         /* Espaciado generoso para que la web "respire" */
    min-height: 80vh;            /* Altura mínima de cada bloque de contenido */
    display: flex; 
    align-items: center; 
}

.container { 
    max-width: 800px;           /* Ancho de lectura cómodo */
    margin: 0 auto;              /* Centrado horizontal */
    text-align: center;          /* Centra todo el contenido interno */
    width: 100%; 
}

.black { background-color: #000; } /* Clase para fondos negros */
.gray { background-color: #222; }  /* Clase para fondos gris grafito */

h2, h3 { 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 100;            /* Letra ultra delgada para elegancia */
    letter-spacing: 6px; 
    text-transform: uppercase;
}

h2 { font-size: 2.5rem; margin-bottom: 40px; }
h3 { font-size: 1.5rem; margin-bottom: 20px; }

h4 { 
    font-family: 'Poiret One', sans-serif; 
    font-weight: 100; 
    font-size: 4rem; 
    letter-spacing: 6px;
    margin-top: 50px;
}

/* --- 5. COMPONENTES: Elementos interactivos --- */

/* Animación de texto que cambia solo */
.cambiante {
    display: inline-flex;
    flex-direction: column;      /* Apila las palabras verticalmente */
    height: 1.2em;               /* Altura de una sola fila */
    overflow: hidden;            /* Esconde las palabras que están "en espera" */
}

.cambiante span {
    display: block;
    height: 100%;
    animation: cambio 9s infinite; /* El ciclo de animación dura 9 segundos */
}

@keyframes cambio {
    0%, 20% { transform: translateY(0); }       /* Muestra palabra 1 */
    33%, 53% { transform: translateY(-100%); }  /* Sube y muestra palabra 2 */
    66%, 86% { transform: translateY(-200%); }  /* Sube y muestra palabra 3 */
    100% { transform: translateY(0); }          /* Vuelve al inicio */
}

/* Galería de integrantes individuales */
.banda-contenedor {
    display: flex;
    justify-content: center;     /* Centra los integrantes */
    flex-wrap: wrap;             /* Si no caben, bajan a la siguiente fila */
    gap: 25px;                   /* Separación entre cada integrante */
    padding-top: 40px;
}

.integrante {
    text-align: center;
    width: 140px;                /* Ancho de cada tarjeta de músico */
}

.foto-marco {
    width: 100%;
    aspect-ratio: 1 / 1;         /* Cuadrado perfecto siempre */
    /*background-color: #222;*/ 
    overflow: hidden;            /* Corta la imagen si es más grande */
    margin-bottom: 15px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    /*border: 1px solid rgba(255,255,255,0.1);*/ /* Borde sutil */
}

.foto-marco:hover {
    transform: scale(1.1);       /* Zoom hacia afuera al pasar el mouse */
    border-color: rgba(255,255,255,0.5); /* El borde se ilumina */
}

.foto-marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* Rellena el marco sin estirarse */
    /*filter: grayscale(100%);*/     /* Look blanco y negro por defecto */
    transition: 0.5s;
}

.foto-marco img:hover { 
    filter: grayscale(0%);       /* Recupera el color al pasar el mouse */
}

.rol { 
    color: #666;                 /* Gris para el instrumento/rol */
    font-size: 0.8em; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    margin-top: 5px; 
}

/* Contenedor para videos de YouTube */
.video-wrapper {
    position: relative; 
    padding-bottom: 56.25%;      /* Proporción 16:9 (HD) */
    height: 0; 
    margin-top: 40px;
    border: 1px solid rgba(255,255,255,0.05);
}

.video-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* El video ocupa todo el contenedor */
}

/* Enlaces de contacto y redes */
.contact-link { 
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    /*letter-spacing: 1px;*/
    color: #fff; 
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2); /* Subrayado elegante */
    transition: 0.3s;
}

.contact-link:hover { border-color: #fff; } /* El subrayado se ilumina al hover */

.social-links {
    margin-top: 50px;
    font-size: 10px;
    letter-spacing: 3px;
}

footer { 
    padding: 80px 20px; 
    text-align: center; 
    font-size: 9px; 
    opacity: 0.4;                /* Muy discreto */
    letter-spacing: 2px;
    border-top: 1px solid #111;  /* Línea de cierre */
}

/* --- 6. SECCIÓN QUIENES SOMOS (FOTO GRUPAL GRANDE) --- */
.section-title {
    font-family: 'Poiret One', cursive;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: 12px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.section-text {
    max-width: 650px;            /* Texto centrado y no muy ancho para leer mejor */
    margin: 0 auto 60px auto;
    font-size: 14px;
    letter-spacing: 2px;
    color: #aaa;                 /* Color gris claro */
    line-height: 1.8;
}

.grupal-photo-marco {
    position: relative;
    width: 100%;
    margin-top: 40px;
    background: #111; 
    overflow: hidden; 
    animation: fadeIn 1.5s ease-out; /* La foto aparece suavemente al cargar */
}

.quienes-somos-foto {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s;  /* Zoom lento y cinemático */
}

.grupal-photo-marco:hover .quienes-somos-foto {
    transform: scale(1.03);      /* Movimiento casi imperceptible al mouse */
}

.photo-overlay-text {
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 9px;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); } /* Empieza invisible y un poco abajo */
    to { opacity: 1; transform: translateY(0); }     /* Termina visible en su lugar */
}

/* --- 7. MEDIA QUERIES: Adaptación a Celulares (Responsive) --- */
@media (max-width: 768px) {
    .hero-section { min-height: 50vh; } /* En móvil la portada es más baja */
    
    .nav-container { padding: 0 20px; }
    
    .menu-toggle {
        display: flex; 
        flex-direction: column; 
        background: none; 
        border: none; 
        z-index: 2001;
        /*cursor: pointer;*/
    }

    .bar { width: 25px; height: 1px; background: white; margin: 4px 0; }

    .nav-menu {
        position: fixed;
        right: -100%;            /* Menú escondido fuera de pantalla a la derecha */
        top: 0;
        width: 100%;
        height: 100vh;
        background: #000;
        flex-direction: column;
        justify-content: center;
        transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0); /* Animación de apertura */
    }

    .nav-menu.active { right: 0; } /* Clase que se activa con JS para mostrar el menú */
    
    .nav-menu ul { flex-direction: column; align-items: center; } /* Lista vertical en móvil */
    .nav-menu ul li { margin: 20px 0; }
    .nav-menu ul li a { font-size: 1.2rem; } /* Botones más grandes para dedos */

    /* Animación del botón hamburguesa transformándose en X */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .section { padding: 80px 20px; } /* Menos espacio en móvil */
    h2 { font-size: 1.8rem; letter-spacing: 4px; }
    h4 { font-size: 3.2rem; }
    
    .integrante { width: 130px; } /* Integrantes más pequeños para que quepan de a dos */
}