/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Reiniciar Valores por Defecto del Navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Serif', serif;
    
}

/* Section */
section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    
}

/* Video Background */
.fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Asegúrate de que el video esté detrás del contenido */
}

/* Header */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 5vw;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: 00;
    text-shadow: 0 0.3rem 0.3rem rgba(255, 255, 255, 0.5);
    
}

header .menu {
    width: 3rem;
    height: auto; /* Ajusta la altura automáticamente */
}

header .menu img {
    width: 100%;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    filter: invert(1);
}

/* Contenido */
.contenido {
    position: relative;
    width: 80%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    overflow: auto;
}

.contenido h2 {
    color: #ffffff;
    font-size: 5vw;
    letter-spacing: 2px;
    text-shadow: 0 0.3rem 0.3rem rgb(0, 0, 0);
    margin-top: 5%;
}

.contenido p {
    color: #ffffff;
    font-size: 1.5vw;
    letter-spacing: 3px;
    text-shadow: 0 0.3rem 0.3rem rgb(0, 0, 0);
    margin: 5%;    
}

span {
    margin-left: 27%;
    font-size: 1.5em;
}

a {
    Text-decoration: none;
    color: #a7bcf7;
}

/* Ajustar imágenes en base a flexibilidad */
.audicion1
{
    width: 100%;
    margin-top: 10%;
    margin-left: 0%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    margin-bottom: 10%;
}

.carrera0 {   
    width: 100%;
    margin-top: 10%;
    margin-left: 0%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
  
}
.carrera1 {
    width: 100%;
    margin-top: 10%;
    margin-left: 0%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
  
}
.carrera2 {
    width: 100%;
    margin-top: 10%;
    margin-left: 0%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    margin-bottom: 10%;
}
.d62024 {   
    width: 70%;
    margin-top: 10%;
    margin-left: 15%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    border-radius: 10px;
}

.pick {
    width: 3rem;
    position: relative;
    top: 10px;
}

/* Cards */
.cards {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem;
}

.cards .card {
    display: flex;
    align-items: center;
    width: 80%;
    max-width: 350px;
    height: auto;
    margin: 1rem;
}

.cards .card img {
    width: 2.5rem;
    height: auto;
    filter: invert(1);
    margin-right: 1rem;
    text-shadow: 0 0.3rem 0.3rem rgba(255, 255, 255, 0.5);
}

.cards .card p {
    color: #fff;
    font-size: 1rem;
    text-shadow: 0 0.3rem 0.3rem rgba(255, 255, 255, 0.5);
}

/* Redes Sociales */
.redesSociales {
    position: absolute;
    top: 30%;
    left: 0;
    padding-left: 2rem;
}

.redesSociales ul {
    list-style: none;
}

.redesSociales ul li {
    margin-bottom: 1rem;
}

.redesSociales ul li a {
    color: #fff;
    font-size: 1.3rem;
    transition: color 0.3s;
}

.redesSociales ul li a:hover {
    color: #b7b7b7;
}

/* Breakpoints */
@media only screen and (max-width: 1200px) {
    .cards .card {
        width: 50%;
        height: auto;
    }
}

@media only screen and (max-width: 600px) {
	section header {
		padding: 20px 50px;
	}
	section .contenido {
		width: 100%;
		text-align: justify;
	}

	section .contenido h2 {
		font-size: 4em;
	}

	section .contenido p {
		font-size: 1.5em;
        width: 100%; /* Ajusta el ancho según tus necesidades */
        max-width: 600px; /* Establece un ancho máximo si es necesario */
	}

.audicion1
{
    width: 100%;
    margin-top: 10%;
    margin-left: 0%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    margin-bottom: 10%;
}

.carrera0 {   
    width: 100%;
    margin-top: 10%;
    margin-left: 0%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
  
}
.carrera1 {
    width: 100%;
    margin-top: 10%;
    margin-left: 0%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
  
}
.carrera2 {
    width: 100%;
    margin-top: 10%;
    margin-left: 0%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    margin-bottom: 10%;
}

span {
    margin-left: 3%;
    font-size: 1.5em;
}

.pick {
    width: 3rem;
    position: relative;
    top: 15px;
}
}