/* Definimos variables*/
:root {
--fondo1: #803C1A; /* Marrón rojizo */
--fondo2: #CDC0B0; /* Gris calido */
--fondo3: #C29F7A; /* Beig oscuro */
--color1: #F5F5DC; /* Blanco hueso */
--color2: #F2E0C8; /* Beig rosado */
--color3: #000000; /* Negro puro */
--borde1: #808080; /* 50% gris */
--sombra1: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1); /* Sombra negra suave */
--borde2: #222222; /* Gris oscuro y apagado */
--sombra2: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* Sombra negra un poco más intensa */
}

/* Tipografía */
/* Fuente Cormorant normal */
@font-face {
font-family: 'Cormorant Unicase';
font-style: normal;
font-weight: 400;
src: url('fonts/CormorantUnicase-Regular.ttf') format('truetype');
font-display: swap; /* Mejora la carga para accesibilidad */
}
/* Fuente Cormorant negrita */
@font-face {
font-family: 'Cormorant Unicase';
font-style: normal;
font-weight: 700;
src: url('fonts/CormorantUnicase-Bold.ttf') format('truetype');
font-display: swap; /* Mejora la carga para accesibilidad */
}

/* Reseteo de estilos */
html, body {
margin: 0;
padding: 0;
min-height: 100%; /* Asegura que el body ocupe al menos toda la altura de la ventana */
}

/* Se aplica a todo el CSS*/
* {
border-radius: 0.5rem; 
box-sizing: border-box;
}

/* Establecemos el tamaño de fuente base para rem */
html {
font-size: 15px;
}

/* Estilos generales */

body {
font-family: Arial, sans-serif;
font-size: 1rem;
font-weight: normal;
font-style: normal;
text-align: center;
color: var(--color2);
background-color: var(--fondo2);
}

h1 {
/* Cormorant bold para H1 */
font-family: 'Cormorant Unicase', serif;
font-weight: 700; 
font-size: 2.5rem;
letter-spacing:0.1rem;
}
h2 {
/* Fuente Cormorant regular */
font-family: 'Cormorant Unicase', serif;
font-weight: 700; 
font-size: 1.5rem;
font-style: italic; 
letter-spacing:0.05rem;
}
h3 {
/* Fuente Cormorant regular */
font-family: 'Cormorant Unicase', serif;
font-weight: 400; 
font-size: 1.5rem;
font-style: italic; 
letter-spacing:0.05rem;
}
p {
font-size: 1rem;
text-align: justify;
padding: 0 2rem 0 2rem;
}
span {
color: var(--color3);
}

a, 
buttom, 
.submit,
.toggle-text-btn {
text-decoration: none;
/* evita el subrayado en los enlaces */
font-size:1.1rem;
color: var(--color2);
background-color:var(--fondo1);
padding: 0.5rem 1rem 0.5rem 1rem;
}
a:hover, 
buttom:hover, 
.submit:hover,
.toggle-text-btn:hover {
font-weight: bold;
color: var(--color3);
background-color: var(--fondo3);
/* Sombra del recuadro */
box-shadow: var(--sombra1);
}

/* menú */
nav ul {
width: 100%;
display: flex;
justify-content: center;
overflow-x: auto;
white-space: nowrap;
margin: 0 auto;
list-style: none;
padding: 2rem 0 2rem 0;
}
nav li {
display: inline-block; 
box-shadow: var(--sombra1);	);
}


/* Botones */ 
button {
display: inline-block;
transition: 0.3s;
border: 2px solid var(--borde1);
}
button:focus {
outline: none;
}



header {
background-image: linear-gradient(to bottom, var(--fondo1), var(--fondo2));
background-size: cover;
background-repeat: no-repeat;
margin-top: 0;
width: 100%;
height: auto;
padding: 0 0 4rem 0;
/* espacio abajo */
}
footer {
background-image: linear-gradient(to bottom, var(--fondo2), var(--fondo1));
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 0;
width: 100%;
height: auto;
padding: 2rem 0 4rem 0;
/* espacio arriba y abajo */
}

header,
footer {
width: 100%;
height: auto;
text-align: center;
margin: 0 auto;
display: block;
border:none;
}

/* Ancho de pantalla reducido */

main {
max-width: calc(660px + 6rem); 
/* 660px más 2rem de margin y 1 de padding por lado */
width: 100%; 
/* Asegura que el contenedor se ajuste al ancho disponible en pantallas pequeñas */
margin: 0 auto; 
padding: 0 1rem; 
/* Añade espacio a izquierda y derecha */
height: auto;
text-align: center;
}


section {
width: 100%;
height: auto;
text-align: center;
margin-bottom: 4rem;
padding: 2rem 0;
/* margen arriba y abajo de cada sección */
border: 2px solid var(--borde2);
box-shadow: var(--sombra1);
background-color: var(--fondo1);
}


/* logo y mariposa */
.logo img {
max-width: 100%; 
/* Asegurarnos que el logo nunca sea más ancho que su contenedor */
}
@media (min-width: 768px) { 
/* Para tablets y pantallas más grandes */
.logo img {
width: 50%;
}
}
@media (min-width: 1200px) { 
/* Para pantallas grandes */
.logo img {
width: 33%;
}
}
@media (max-width: 767px) { 
/* Para móviles y pantallas más pequeñas */.logo img {
max-width: 80%;
}
}
/* mariposa */
.mariposa img {
display: block; 
margin: 0 auto; 
width: 33%;
height: auto;
}

/* Descripción del grupo */

.extra-text {
display: none;
}
.extra-text.expanded {
display: block;
}


/* Galería de imágenes */

/* Visor de imágenes */
.gallery {
display: block; 
/* Asegura que el visor sea visible */
width: 100%; 
/* Ocupa todo el ancho del*/
margin: 4rem 0 4rem 0;
/* margen arriba y abajo */ 
/* Espacio debajo del visor */
margin: 0 auto;
}
.gallery img {
display: none; 
/* Oculta todas las imágenes inicialmente */
width: 100%; 
/* Asegura que ocupen todo el ancho del*/
height: auto; 
/* Suaviza el cambio de visibilidad */
transition: opacity 0.3s ease-in-out; 
padding-bottom: 4rem;
}
.gallery img.active {
display: block; 
/* Muestra solo la imagen activa */
}

/* Miniaturas */
/* Album-cover */
.thumbnails,
.album-cover {
display: flex; 
/* Flexbox para alinear las miniaturas en fila */
justify-content: center; 
/* Centra las miniaturas */
gap: 0.625rem; 
/* Espaciado entre miniaturas */
overflow-x: auto; 
/* Permite el scroll horizontal */
padding-bottom: 2rem; 
/* Espacio para evitar recorte visual */
scrollbar-width: thin; 
/* Personaliza el grosor del scroll para navegadores modernos */
}
.thumbnails img,
.album-cover img {
width: 5rem; 
/* Tamaño fijo para las miniaturas */
 height: 5rem; 
/* Asegura una proporción cuadrada */
object-fit: cover; 
/* Evita distorsión de las miniaturas */
cursor: pointer; /* Cambia el cursor al pasar sobre miniaturas */
transition: transform 0.2s ease-in-out; 
/* Animación de zoom */
}
/* Efecto de zoom al pasar el ratón */
.thumbnails img:hover,
.album-cover img:hover {
box-shadow: var(--sombra1);
transform: scale(1.1); 
}
/* Estilo para el scroll en pantallas pequeñas */
.thumbnails::-webkit-scrollbar,
.album-cover:-webkit-scrollbar {
height: 0.375rem; 
/* Grosor del scroll */
}
.thumbnails::-webkit-scrollbar-thumb,
-webkit-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2); 
/* Color del scroll */
}

/* Lightbox */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
z-index: 1000;
}
.lightbox-content {
position: relative;
}
.lightbox-img {
max-width: 100%;
max-height: 80vh;
/* sombra del recuadro */
box-shadow: var(--sombra1);
}

/* Botón CLOSE */
.close-btn {
position: absolute;
top: 0.625rem; 
/* Separación desde la parte superior */
right: 0.625rem; 
/* Separación desde el borde derecho */
padding: 0.5rem 1rem 0.5rem 1rem;
color: var(--fondo1);
background-color: var(--fondo2); 
border: none;
font-size: 1rem;
font-family: Arial, sans-serif; 
/* Asegura una tipografía clara */
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 1000; 
/* Garantiza que el botón esté por encima de otros elementos */
}
.close-btn:hover {
color: var(--fondo2);
background-color: var(--fondo1); 
/* Color más oscuro al pasar el ratón */
}

/* Responsive para la galería */
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
@media (max-width: 480px) {
.thumbnail {
width: 3.75rem;
height: 3.75rem;
}
}



/* Discografía */
.albums {
width: 100%;
height: auto;
display: block; 
margin: 0 auto;
margin: 2rem 0 2rem 0; 
/* Centra horizontalmente */
}


/* Youtube responsivo */

.video-responsive {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 1.875rem;
position: relative;
/* sombra del recuadro */
border:none;
}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
border:none;
padding-bottom: 4rem;
}


/* formulario */

form {
display: flex; 
flex-direction: column; 
gap: 1rem; 
padding: 1rem;
background-color: transparent;
}
form label {
flex: 1;
text-align: left;
font-size: 1.1rem;
width: 100%; 
}
form input,
form textarea {
flex: 2;
border: 0.25rem solid var(--borde1);
font-size: 1.1rem;
color: var(--color1);
background-color: transparent;
width: 100%; 
padding: 1rem;
}
form textarea {
resize: vertical; 
/* Permite redimensionar verticalmente el textarea */
min-height: 2rem; 
/* Altura mínima del textarea */
}
form input:focus,
form textarea:focus {
outline: none;
box-shadow: var(--sombra1); 
}
form button {
align-self: center; /* Centra el botón horizontalmente */
width: auto; 
/* Ajusta el ancho al contenido del botón */
border: 2px solid var(--borde1);

transition: 0.3s; /* Suaviza el cambio de estilos */
}
form button:hover {
color: var(--fondo1); 
background-color: var(--fondo2);
box-shadow: var(--sombra1); 
}
*/