@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');


*{
box-sizing:border-box;
}

body{
margin:0;
background-color:#17463b;
font-family:"Archivo", sans-serif;
}

header{
padding:12px;
color:white;
}

header h6{
margin:0;
}

.presentacion{
width:94%;
margin:0 auto 18px auto;
}

.presentacion iframe{
width:100%;
height:220px;
border:0;
}

.pila{
width:77%;
margin:40px auto 24px auto;
display:grid;
padding-bottom:174px;
}

.carpeta{
width:100%;
grid-area:1 / 1;
transition:transform .55s ease;
}

.pestana{
height:40px;
display:grid;
place-items:center;
padding-right:20px;
font-size:15px;
font-weight:bold;
box-shadow:0 -15px 12px #0003;
clip-path:polygon(
100% 100%,
0% 100%,
0% 22%,
0.6% 13.5%,
2.2% 6.5%,
4.6% 1.7%,
7.5% 0%,
67.5% 0%,
71.4% 1%,
75.2% 4.1%,
78.8% 9%,
82% 15.7%,
84.8% 24.1%,
98% 71.1%,
98.9% 74.8%,
99.5% 78.8%,
99.9% 83%,
100% 87.4%
);
}

.cuerpo{
width:100%;
min-height:560px;
padding:24px;
border-radius:0 24px 24px 24px;
box-shadow:0 -8px 12px #0003;
}

.cuerpo h1,
.cuerpo h2,
.cuerpo h3{
margin-top:0;
}

.cuerpo p{
line-height:1.4;
}

.foto-fede{
display:block;
width:72%;
margin:0 auto 22px auto;
}

.cuerpo a{
color:inherit;
}

.sobre .pestana{
width: 30%;
margin-left:0;
}

.intereses .pestana{
width: 30%;
margin-left:20%;
}

.archivo .pestana{
width:30%;
margin-left:40%;
}

.diseno .pestana{
width:30%;
margin-left:60%;
}

.sobre .pestana,
.sobre .cuerpo{
background-color:#eee38d;
}

.intereses .pestana,
.intereses .cuerpo{
background-color:#68c77d;
}

.archivo .pestana,
.archivo .cuerpo{
background-color:#4967ad;
color:white;
}

.diseno .pestana,
.diseno .cuerpo{
background-color:#ea985a;
}


footer{
padding:24px;
color:#4c6e66;
font-size:10px;
}

footer p{
margin:0;
line-height:1.4;
font-style:italic;
text-align:justify;
}

.archivo .cuerpo,
.diseno .cuerpo{
grid-template-columns:1fr 1fr;
gap:16px;
}

.archivo .cuerpo img,
.archivo .cuerpo video,
.diseno .cuerpo img,
.diseno .cuerpo video{
width:100%;
height:auto;
}

.diseno .cuerpo h2,
.diseno .cuerpo p{
grid-column:1 / -1;
}


.selector{
display:none;
}


#sobre:checked ~ .pila .diseno{
transform:translateY(0);
z-index:1;
}

#sobre:checked ~ .pila .archivo{
transform:translateY(58px);
z-index:2;
}

#sobre:checked ~ .pila .intereses{
transform:translateY(116px);
z-index:3;
}

#sobre:checked ~ .pila .sobre{
transform:translateY(174px);
z-index:20;
}


#intereses:checked ~ .pila .diseno{
transform:translateY(0);
z-index:1;
}

#intereses:checked ~ .pila .archivo{
transform:translateY(58px);
z-index:2;
}

#intereses:checked ~ .pila .sobre{
transform:translateY(116px);
z-index:3;
}

#intereses:checked ~ .pila .intereses{
transform:translateY(174px);
z-index:20;
}


#archivo:checked ~ .pila .diseno{
transform:translateY(0);
z-index:1;
}

#archivo:checked ~ .pila .intereses{
transform:translateY(58px);
z-index:2;
}

#archivo:checked ~ .pila .sobre{
transform:translateY(116px);
z-index:3;
}

#archivo:checked ~ .pila .archivo{
transform:translateY(174px);
z-index:20;
}


#diseno:checked ~ .pila .archivo{
transform:translateY(0);
z-index:1;
}

#diseno:checked ~ .pila .intereses{
transform:translateY(58px);
z-index:2;
}

#diseno:checked ~ .pila .sobre{
transform:translateY(116px);
z-index:3;
}

#diseno:checked ~ .pila .diseno{
transform:translateY(174px);
z-index:20;
}


.carpeta .cuerpo{
display:block;
height:560px;
min-height:px;
padding:0;
overflow:hidden;
}

.carpeta .cuerpo > *{
display:none;
}

#sobre:checked ~ .pila .sobre .cuerpo,
#intereses:checked ~ .pila .intereses .cuerpo{
display:block;
height:auto;
min-height:560px;
padding:24px;
overflow:visible;
}

#sobre:checked ~ .pila .sobre .cuerpo > *,
#intereses:checked ~ .pila .intereses .cuerpo > *{
display:block;
}

#archivo:checked ~ .pila .archivo .cuerpo,
#diseno:checked ~ .pila .diseno .cuerpo{
display:grid;
height:auto;
min-height:560px;
padding:24px;
overflow:visible;
}

#archivo:checked ~ .pila .archivo .cuerpo > *,
#diseno:checked ~ .pila .diseno .cuerpo > *{
display:block;
}

#diseno:checked ~ .pila .diseno .cuerpo h2,
#diseno:checked ~ .pila .diseno .cuerpo p{
grid-column:1 / -1;
}

.historia{
    font-weight:300;
    font-style:italic;
}

.intro-intereses{
    font-weight:600;
    font-style:italic;
    font-size:25px;
    line-height:0.5em;
}

#intereses:checked ~ .pila .intereses .cuerpo .artistas{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.artista img{
    width:100%;
    height:auto;
}

.cuerpo h3 {
    grid-column: 1 / -1;
}