:root{
    --claro: #fdfcce;
    --oscuro: #290016;
    --principal: #ff9c98;
    --secundario: #82eeaf;
}

* {
    margin: 0;
    padding: 0;

    font-family: 'Jersey 20', sans-serif;
}

body {
    background: var(--principal);
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, 
            transparent 25%, 
            rgba(168, 0, 90, 0.03) 25%, 
            rgba(168, 0, 90, 0.03) 50%, 
            transparent 50%, 
            transparent 75%, 
            rgba(168, 0, 90, 0.03) 75%
        );
    background-size: 80px 80px;
    z-index: -1;
}

/*NAVEGADOR*/
header {
    height: 10vh;
    display: flex;
    justify-content: space-between;
    padding: 1% 2%;
    position: fixed; 
    top: 0;    
    left: 0;  
    right: 0;      
    z-index: 1000; 

    background-color: transparent;
}

.nav-izquierda, .nav-derecha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-nav-main {
    width: 5rem;
    height: 3rem;

    background-color: var(--claro);
    color: var(--oscuro);
    border: var(--oscuro) solid 0.2rem;
    font-size: larger;
    font-weight: 400;
    box-shadow: 2px 2px 0 var(--oscuro);
}

.btn-nav{
    width: 3rem;
    height: 3rem;
    padding: 0.5rem;
    display: flex;
    align-content: center;

    background-color: var(--claro);
    color: var(--oscuro);
    border: var(--oscuro) solid 0.2rem;
    box-shadow: 2px 2px 0 var(--oscuro);
}

.btn-nav svg {
    width: 100%;
    height: 100%;
    display: block;

    color: var(--oscuro);
}

.btn-nav:hover, .btn-nav-main:hover, .btn-clases:hover {
    transform: translateY(-3px);
    box-shadow: 5px 5px 0 var(--oscuro);
    cursor: pointer;
}

.btn-nav:active, .btn-nav-main:active, .btn-clases:active {
    transform: translateY(0);
    box-shadow: 0 2px 0 var(--oscuro);
  }

/*CUERPO*/
main{
    margin-top: 15vh;
}

.titulo {
    font-size: xxx-large;
}

/*DIVISOR*/
.divisor {
    width: 100%;  
    height: 40px;
    overflow: hidden; 
    display: flex;
    align-items: center;
    margin-top: 5%;

    transform: rotate(-1deg);
    background-color: var(--oscuro);
}

.divisor-opuesto {
    width: 100%;  
    height: 40px;
    overflow: hidden; 
    display: flex;
    align-items: center;
    z-index: 1000; 

    transform: rotate(1deg);
    background-color: var(--oscuro);
}

.texto-divisor {
    color: var(--claro);
    white-space: nowrap;
}


/*PERFIL*/
.perfil{
    min-height: 90vh;
    height: auto;
    padding: 2% 0%;
}

.perfil-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    padding: 3%; 
}

.perfil-card{
    background-color: var(--secundario);
    margin: 0% 10%;
    height: 40rem;
    width: 30rem;
    display: grid;
    grid-template-rows: 10% 80% 10%;

    box-shadow: 0.6rem -0.6rem 0 var(--oscuro);
}

.perfil-num{
    height: 100%;
    grid-row: 1;
    display: flex;
    padding-left: 5%;
    align-items: center;

    border: var(--oscuro) solid 0.4rem;
    background-color: var(--claro);
    font-size: x-large;
    font-weight: 900;
}

.perfil-icono {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
}

.perfil-icono svg {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--oscuro);
}

.perfil-perfil{
    height: 100%;
    grid-row: 2;
    padding: 0% 1%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border: var(--oscuro) solid 0.4rem;
    background-color: var(--secundario);
}

.perfil-perfil img{
    width: 17rem;
    height: 17rem;
    border: var(--oscuro) solid 0.4rem;
    margin-bottom: 1rem;

    object-fit: cover;
}

.perfil-perfil h1{
    font-size: xxx-large;
}

.perfil-perfil h3{
    font-size: x-large;
    font-weight: 100;
}

.perfil-descripcion{
    height: 100%;
    grid-row: 3;
    padding: 0% 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border: var(--oscuro) solid 0.4rem;
    background-color: var(--claro);
    text-align: center;
}

.materias-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row: 10% 40% 40% 5% 5%;
    gap: 2rem;
    justify-content: center;
}

.materias-titulo {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 4;
    padding-bottom: 1%;
    border-bottom: var(--oscuro) solid 0.3rem;
}

.materias-1 {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.materias-2 {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.materias-3 {
    grid-row: 2;
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.materias-4 {
    grid-row: 3;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.materias-5 {
    grid-row: 3;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;    
    justify-content: flex-start;
}

.materias-6 {
    grid-row: 3;
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.materias-lista {
display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 10%;
}

.materias-lista li{
    list-style-type: none;
}
.materias-bajada {
    grid-row: 4;
    grid-column-start: 1;
    grid-column-end: 4;
    padding: 10% 0%;

    padding-top: 1%;
    border-top: var(--oscuro) solid 0.3rem;
}

.materia-inactiva {
    color:#925c5c;
}

/*INTEGRANTES*/
.integrantes{
    padding: 3%;
}

.perfiles-integrantes{
    margin-top: 2%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

.card-integrantes {
    display: grid;
    grid-template-rows: 10% 75% 15%;
    width: 16rem;
    height: 28rem;
    margin-top: 3%;

    box-shadow: 0.6rem -0.6rem 0 var(--oscuro);
}

.card-integrantes-icono {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
}

.card-integrantes-icono svg {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--oscuro);
}

.card-integrantes-num {
    height: 100%;
    grid-row: 1;
    display: flex;
    padding-left: 5%;
    align-items: center;

    border: var(--oscuro) solid 0.4rem;
    background-color: var(--secundario);
}

.card-integrantes-perfil{
    height: 100%;
    grid-row: 2;
    padding: 0% 1%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border: var(--oscuro) solid 0.4rem;
    background-color: var(--claro);
}

.card-integrantes-perfil img{
    width: 12rem;
    height: 12rem;
    border: var(--oscuro) solid 0.4rem;
    margin-bottom: 1rem;

    object-fit: cover;
    }

.card-integrantes-perfil h5{
font-weight: 100;
font-size: medium;
}

.card-integrantes-cta{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    grid-row: 3;
    padding: 0% 1%;

    border: var(--oscuro) solid 0.4rem;
    background-color: var(--secundario);
}

.card-integrantes-cta a{
    text-decoration: none;
    color: var(--oscuro);
}

.card-integrantes:hover, .perfil-card:hover {
    transform: scale(1.03);
}

/*PROYECTO*/
.proyecto{
    height: 50vh;
    padding: 5% 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.app button {
    margin-top: 5%;
    background-color: var(--secundario);
    height: 3rem;
    width: 20rem;
    font-weight: bold;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.contenedor-proyecto {
    gap: 2rem;
}

/*CLASES*/
.clases {
    height: 30vh;
    padding: 3%;
}

.contenedor-clases {
    margin-top: 2%;
    display: flex;
    flex-wrap: wrap;
    align-items: center; 
    justify-content: center;
    gap: 2rem;
}

.btn-clases {
    width: 8rem;
    height: 2rem;

    background-color: var(--claro);
    color: var(--oscuro);
    border: var(--oscuro) solid 0.2rem;
    box-shadow: 2px 2px 0 var(--oscuro);
    font-size: medium;
    font-weight: 100
}

/*DATOS*/
.datos{
    height: 30vh;
    padding: 3%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/*PIE*/
footer{
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: last baseline;

    background-color: var(--oscuro);
    color:  var(--claro);
}

footer p{
    padding: 0% 10%;

    font-size: medium;
    text-align: center;
}

/*RESPONSIVE*/
/*ESCRITORIO*/
/*NAVEGADOR*/
button[data-telefono="show"] {
    display: none;
}

/* Menú de redes sociales para móvil */
.menu-redes-mobile {
    position: fixed;
    top: 12vh;
    right: 2%;
    background-color: var(--principal);
    border: var(--oscuro) solid 0.2rem;
    box-shadow: 5px 5px 0 var(--oscuro);
    padding: 0.5rem;
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1001;
    opacity: 0;
    transform: translateY(-10px);
}

.menu-redes-mobile.activo {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.menu-redes-mobile .btn-red-mobile {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--claro);
    color: var(--oscuro);
    border: var(--oscuro) solid 0.2rem;
    box-shadow: 2px 2px 0 var(--oscuro);
    text-decoration: none;
}

.menu-redes-mobile .btn-red-mobile:hover {
    transform: translateY(-2px);
    box-shadow: 3px 3px 0 var(--oscuro);
}

.menu-redes-mobile .btn-red-mobile:active {
    transform: translateY(0);
    box-shadow: 1px 1px 0 var(--oscuro);
}

.menu-redes-mobile .btn-red-mobile svg,
.menu-redes-mobile .btn-red-mobile img {
    width: 100%;
    height: 100%;
    color: var(--oscuro);
}

/*TELÉFONO*/
@media screen and (max-width: 768px) {
    /*NAVEGADOR*/
    button[data-telefono="hide"] {
        display: none;
    }

    button[data-telefono="show"] {
        display: block;
    }

    header {
        padding: 2% 4%;
        height: 12vh;
    }

    .btn-nav-main {
        width: 4rem;
        height: 2.5rem;
        font-size: medium;
    }

    .btn-nav {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.3rem;
    }

    /*CUERPO*/
    main {
        margin-top: 18vh;
    }

    .titulo {
        font-size: xx-large;
        text-align: center;
    }

    /*DIVISORES*/
    .divisor, .divisor-opuesto {
        height: 30px;
        margin-top: 3%;
    }

    .texto-divisor {
        font-size: small;
    }

    /*PERFIL*/
    .perfil {
        padding: 5% 0%;
        margin-top: 5%;
    }

    .perfil-container {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding: 5%;
    }

    .perfil-card {
        margin: 0;
        width: 100%;
        height: auto;
        min-height: 35rem;
    }

    .perfil-perfil img {
        width: 18rem;
        height: 18rem;
    }

    .perfil-perfil h1 {
        font-size: xx-large;
        text-align: center;
    }

    .perfil-perfil h3 {
        font-size: large;
        text-align: center;
    }

    .perfil-descripcion h4 {
        font-size: small;
    }

    .materias-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .materias-titulo {
        grid-column: 1;
        font-size: x-large;
        text-align: center;
    }

    .materias-1, .materias-2, .materias-3, .materias-4, .materias-5, .materias-6 {
        grid-column: 1;
    }

    .materias-1 { grid-row: 2; }
    .materias-2 { grid-row: 3; }
    .materias-3 { grid-row: 4; }
    .materias-4 { grid-row: 5; }
    .materias-5 { grid-row: 6; }
    .materias-6 { grid-row: 7; }

    .materias-bajada {
        grid-row: 8;
        grid-column: 1;
        text-align: center;
    }

    .materias-lista {
        padding: 5%;
    }

    /*INTEGRANTES*/
    .integrantes {
        padding: 5%;
        margin-bottom: 10%;
        margin-top: 5%;
    }

    .perfiles-integrantes {
        gap: 2rem;
        justify-content: center;
    }

    .card-integrantes {
        width: 14rem;
        height: 24rem;
        margin-top: 5%;
    }

    .card-integrantes-perfil img {
        width: 10rem;
        height: 10rem;
    }

    .card-integrantes-perfil h3 {
        font-size: medium;
        text-align: center;
    }

    /*PROYECTO*/
    .proyecto {
        height: 40vh;
        padding: 5%;
    }

    /*CLASES*/
    .clases {
        height: auto;
        padding: 5%;
        margin-bottom: 10%;
        margin-top: 5%;
    }

    .contenedor-clases {
        gap: 1rem;
    }

    .btn-clases {
        width: 6rem;
        height: 2rem;
        font-size: small;
    }

    /*DATOS*/
    .datos {
        height: auto;
        padding: 5%;
        text-align: center;
    }

    .datos h1 {
        font-size: x-large;
    }

    .datos h3 {
        font-size: medium;
    }

    /*PIE*/
    footer {
        height: auto;
        padding: 5%;
    }

    footer p {
        padding: 0% 5%;
        font-size: small;
    }
}