/* =========================
   GENERAL
   Configuración básica de toda la página
   ========================= */
body {
    margin: 0;
    color: white;
    background-color: rgb(7, 7, 7);
    background-image: url(assets/logoblurreado\ de\ paciente.png);
    background-position: center;
    background-size: contain;
}

/* =========================
   HEADER
   Contenedor principal del encabezado
   ========================= */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(7, 7, 7);
    padding: 10px 20px;
}

/* Logo de la banda */
.logopaciente {
    width: 80px;
    height: auto;
}

/* =========================
   TÍTULO DEL HEADER
   Centra el nombre y subtítulo
   ========================= */
header section {
    text-align: center;
}

header h1 {
    margin: 0;
}

header h2 {
    margin: 0;
    font-size: 16px;
}

/* =========================
   REDES SOCIALES
   Tamaño y separación de los íconos
   ========================= */
header section img {
    width: 30px;
    height: auto;
    margin-left: 10px;
}

/* =========================
   MENÚ DE NAVEGACIÓN
   ========================= */
nav {
    background-color: #222;
}

/* Efecto al pasar el mouse */
nav a:hover {
    background-color: red;
    color: rgb(7, 7, 7);
    border-radius: 5px;
    padding: 3px;
    border: 1px rgb(7, 7, 7) solid;
}

/* Lista del menú */
nav ul {
    margin: 0;
    padding: 10px;
    list-style: none;
    display: flex;
    justify-content: center;
}

/* Separación entre opciones */
nav li {
    margin: 0 15px;
}

/* Estilo de los enlaces */
nav a {
    color: white;
    text-decoration: none;
}

/* =========================
   SECCIÓN INICIO
   ========================= */
#inicio {
    padding: 20px;
}

/* Imagen principal de inicio */
#inicio section {
    background-image: url(assets/espalda\ remera\ paciente.jpg);
    height: 700px;
    background-position: top;
    background-size: cover;
    border: #fff solid;
}

/* Sección de contacto */
#inicio .contacto {
    background-image: url(assets/publico\ bari\ 4.jpg);
    height: 1100px;
    background-position: center;
    background-size: cover;
    margin-top: 0.5em;
    text-align: center;
}

/* =========================
   FORMULARIO
   ========================= */
section form {
    width: 400px;
    height: auto;
    margin: 50px auto;
    background-color: rgba(7, 7, 7, 0.67);
    padding: 20px;
    border-radius: 10px;
}

/* Campos de texto */
input {
    width: 100%;
    padding: 8px;
    margin: 5px 0 15px 0;
}

/* Lista desplegable */
select {
    width: 100%;
    padding: 8px;
    margin: 5px 0 15px 0;
}

/* Área de texto */
textarea {
    width: 100%;
    padding: 8px;
    margin: 5px 0 15px 0;
}

/* Botón enviar */
input[type="submit"] {
    background-color: red;
    color: white;
    border: none;
}

/* Hover del botón */
input[type="submit"]:hover {
    background-color: rgb(60, 8, 8);
}

/* =========================
   PRÓXIMAS FECHAS
   ========================= */
.proximasfechas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

/* Títulos principales */
main section h3 {
    font-size: 4em;
    color: rgb(7, 7, 7);
    background-color: #fff;
}

/* Horario destacado */
.horario {
    font-size: 5em;
    color: red;
    background-color: rgb(7, 7, 7);
}

/* Centra los párrafos dentro de div */
div p {
    display: flex;
    justify-content: center;
}

/* =========================
   SECCIÓN INTEGRANTES
   ========================= */
#integrantes {
    width: 1500px;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}

/* Título de la sección */
main h3 {
    background-color: #fff;
    color: black;
    font-size: 4em;
    text-align: center;
}

/* Cada integrante */
#integrantes article {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3em;
    border-bottom: 3px #fff solid;
    border-style: dashed;
}

/* Nombre del integrante */
#integrantes article h4 {
    font-size: 2em;
}

/* Descripción */
#integrantes article p {
    background-color: rgb(7, 7, 7);
    font-size: 1.5em;
}

/* Foto del integrante */
#integrantes article img {
    height: 400px;
    width: auto;
}

/* =========================
   ENTREVISTA
   ========================= */
#entrevista {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3em;
    border-bottom: 3px #fff solid;
    border-style: dashed;
}

/* Borde del video */
#entrevista video {
    border: 3px #fff solid;
}

/* =========================
   HISTORIA
   ========================= */
#historia {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 50px;
    height: 480px;
    border: 2px #fff solid;
    background-position: center;
    background-size: cover;
}

/* Texto de historia */
#historia p {
    background-color: #ffffff99;
    color: rgb(0, 0, 0);
    padding: 15px;
    margin: 15px;
    font-size: 1.2em;
}

/* =========================
   RECUERDOS - FECHA NEUQUÉN
   ========================= */
#recuerdos .fechanqn {
    display: flex;
    margin: 50px;
    border: 2px #fff solid;
    align-items: center;
    background-position: center;
    block-size: cover;
}

#recuerdos .fechanqn p {
    background-color: #ffffff99;
    color: black;
    font-size: 1.2em;
    margin: 1em;
}

/* Videos de la fecha */
#recuerdos .videofechanqn {
    display: flex;
    margin: 50px;
    border: 2px #fff solid;
    align-items: center;
    justify-content: center;
    background-position: center;
    block-size: cover;
}

/* Imagen de la fecha */
#recuerdos .fechanqn img {
    width: 350px;
    height: 400px;
}

/* =========================
   RECUERDOS - CUMPLEAÑOS
   ========================= */
#recuerdos .cumpleaños {
    display: flex;
    margin: 50px;
    border: 2px #fff solid;
    align-items: center;
    background-position: center;
    block-size: cover;
}

#recuerdos .cumpleaños img {
    width: 300px;
    height: 400px;
}

#recuerdos .cumpleaños p {
    background-color: #ffffff99;
    color: black;
    font-size: 1.2em;
    margin: 1em;
}

/* =========================
   RECUERDOS - POXIA TENTADO
   ========================= */
#recuerdos .poxiatentado {
    display: flex;
    margin: 50px;
    border: 2px #fff solid;
    align-items: center;
    background-position: center;
    block-size: cover;
}

#recuerdos .poxiatentado img {
    width: 300px;
    height: 400px;
}

#recuerdos .poxiatentado p {
    background-color: #ffffff99;
    color: black;
    font-size: 1.2em;
    margin: 1em;
}

/* Videos de Poxia Tentado */
#recuerdos .videospoxi {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    margin: 50px auto;
    border: 2px #fff solid;
    background-position: center;
    block-size: cover;
}

#recuerdos .videospoxi video {
    width: 30%;
    height: auto;
}

/* =========================
   RECUERDOS - BARILOCHE
   ========================= */
#recuerdos .fechabari {
    display: flex;
    margin: 50px;
    border: 2px #fff solid;
    align-items: center;
    background-position: center;
    block-size: cover;
}

#recuerdos .fechabari img {
    width: 300px;
    height: 400px;
}

#recuerdos .fechabari p {
    background-color: #ffffff99;
    color: black;
    font-size: 1.2em;
    margin: 1em;
}

/* Videos de Bariloche */
#recuerdos .videosbari {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 50px;
    border: 2px solid white;
    padding: 20px;
}

#recuerdos .videosbari video {
    width: 50%;
    height: auto;
}

/* =========================
   CONTENIDO
   ========================= */
.contenido .texto {
    margin: 50px;
    border: 2px #fff solid;
    padding: 25px;
    font-size: 1.2em;
    background-position: center;
    background-size: contain;
}

/* Párrafos del contenido */
.contenido .texto p {
    background-color: #ffffff99;
    color: black;
    padding: 15px;
}

/* Subtítulos */
.contenido h4 {
    text-align: center;
    font-size: 2em;
}

/* =========================
   GALERÍA DE FOTOS
   ========================= */
.galeria {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 50px;
    border: 2px #fff solid;
    padding: 25px;
}

/* Cada fila de imágenes */
.fila {
    display: flex;
    justify-content: space-between;
}

/* Imágenes de la galería */
.fila img {
    width: 23%;
    height: 180px;
}

/* Sección Letras */

#letras {
    background-image: url(assets/logoblurreado\ de\ paciente.png);
    background-position: center;
    background-size: contain;
    padding: 50px 0;
}

#letras h2 {
    background-color: white;
    color: black;
    text-align: center;
    font-size: 70px;
    margin: 0 0 50px 0;
    padding: 10px;
}

.canciones {
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.cancion {
    background-color: rgba(185, 185, 185, 0.66);
    color: black;
    padding: 30px;
    border: 2px solid white;
}

.cancion h3 {
    margin-top: 0;
    font-size: 35px;
}

.cancion p {
    font-size: 22px;
    line-height: 35px;
    text-align: justify;
    
}