/* Fuente Montserrat desde Google Fonts */
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* nav */

nav{
    background-color: #17012F;
    font-family: 'Montserrat', sans-serif;

    transition: all 2s;

    display: grid;
    grid-template-columns: auto auto auto auto auto;
    padding: 2px;
    
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
   
    display: block;

    justify-self: end;
}

nav ul{
    align-items: center;
}

nav ul li{
    display: inline-block;
    
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;

    align-items: center;

    margin-left: 48px;
    margin-right: 48px;
}

a{
    font-size: 18px;
    font-weight: 500;
    color: #C292F8;
    text-decoration: none;
    text-align: center;
}

a:webkit-any-link{
    cursor: pointer;
}

/* body general */
body {
    background-color: #17012F;
    font-family: 'Montserrat', sans-serif;
    transition: all 2s;
}

/* estilo header */

header {
    background-color: #C292F8;
    text-align: center;
    
    padding-top: 3%;
    padding-bottom: 1.5%;
    
    width: 100%;
    background-size: cover;
    
    display: block;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

}

/* estilo imagen */
.avatar {
    width: 400px;
    height: 400px;
    border-radius: 32%;
}

/* estilo h1 _nombre sofi */
h1 {
    color: #17012F;
    font-size: 36px;
    font-weight: 800;
    
    margin-top: 0px;
    margin-bottom: 0px;
}

/*estilo h3 _ detalle sofi */
h3 {
    color: #17012F;
    font-size: 22px;
    font-weight: 400;
    text-align: center; 
    
    margin-top: 12px;
    margin-bottom: 32px;
}

/* estilo main */
main {
    background-color: #17012F
}

/* estilo h2 _ titulos secciones */
h2 {
    background-color: #F9F4F9;
    
    /* interior componente */
    padding-top: 24px;
    padding-bottom: 24px;

    /*exterior componente */
    margin-bottom: 0px;
    margin-top: 0px;

    /*typo del componente */
    color: #17012F;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
}

/* estilo h4 _ bajada secciones */
h4 {
    background-color: #090909;

    /* interior componente */
    padding-top: 16px;
    padding-bottom: 16px;

    /*exterior componente */
    margin-top: 24px;
    margin-bottom: 16px;

    /*typo del componente */
    color: #C292F8;
    font-size: 24px;
    font-weight: 600;
    text-align: center; 
}

/*estilo p _ detalle secciones */
p {
    background-color: #69479D;
    border-radius: 24%;

    /* typo del listado */
    color: #F9F4F9;
    font-size: 16px;
    font-weight: 500;
    text-align: center;

    /* interior componente */
    padding-top: 16px;
    padding-bottom: 16px;

    /*exterior componente */
    margin-top: 0px;
    margin-bottom: 0px;
}

/* estilo grid */
.grid{
    display: grid;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;

    height: 500px;

    justify-content: center;

    grid-template-columns: auto auto auto;

    gap: 32px;

    margin-top: 24px;
}



/* grid de las secciones */
.grid1{
    grid: n1;
    background-color: #69479D;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
}

.grid2{
    grid: n2;
    background-color: #69479D;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
}

.grid3{
    grid: n3;
    background-color: #69479D;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
}

/*estilo h6 _ titulo compañeras */
h6{
    color: #17012F;
    background-color: #F9F4F9;
    font-size: 20px;
    font-weight: 600;
    padding: 16px;
    text-align: center;

    margin-bottom: 24px;
    margin-top: 8px;
}

/*estilo a2 _ nombres compañeras */
a2 {
    color: #C292F8;
    font-size: 18px;
    font-weight: 600;
    text-align: center; 
    
    display: inline-block;

    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 0px;

    align-self: center;
}

.detalle {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    justify-content: center;
    width: 60%;

    margin-left: 20%;
    margin-right: 20%;
}

/* estilo p1 */
p1{
    color: #C292F8;
    font-size: 18px;
    font-weight: 500;

    text-align: center;
}

/* estilo p2 */

p2 {
    color: #F9F4F9;
    font-size: 12px; 
    font-weight: 600;
    text-align: center;

    margin-top: 16px;
    margin-bottom: 16px;
}

contenido03{
    background-color: #090909;

    display: grid;
    width: 70%;

    margin-top: 24px;
    margin-bottom: 0px;

    padding-left: 15%;
    padding-right: 15%;
    padding-top: 24px;
    padding-bottom: 24px;

    align-items: center;
}

/* footer */
footer { 
    background-color: #F9F4F9;  
    display: block;
   
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 15%;
    padding-right: 15%;

    text-align: center; 
}

/* estilo p3 */
p3 {
    color: #17012F;
    font-size: 14px; 
    font-weight:700;
    text-align: center;

    width: 60%;
}

/* estilo main */
main{
    display: grid;
    width: 100%;

    justify-content: center;

    grid-template-rows: auto auto auto;

    gap: 24px;
}



/*responsive */
@media(max-width:40rem){
    section{display: grid;grid-template-columns: 100%;}
    
    nav{display: grid; 
        grid-template-columns: auto auto auto auto auto;
        padding: 2px;
        width: 80%; margin-left: 10%; margin-right: 10%;
    }

        
    header {padding-top: 3%;
            padding-bottom: 1.5%;
            
            width: 100%;
            background-size: cover;
            
            display: block;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
    }


    .avatar {width: 150px;
            height: 150px;
            border-radius: 32%;
        
    }    
            
    h1 {font-size: 30px;}
    a{font-size: 12px;}
    h2 {font-size: 22px;}
    h3 {font-size: 18px;}
    h4 {font-size: 20px;}
    p {font-size: 14px;}

    .grid{display: grid;
        grid-template-columns:auto;
        justify-content: center;
        margin-left: 10%;
        margin-right: 10%;
    }

    h6{font-size: 16px;}
    
    .a2{font-size: 14px;
    margin: 8px;}
    
    .p1{font-size: 14px;}
    .p2 {font-size: 8px;}
    .p3 {font-size: 10px;}

    .contenido03 {margin-top: 0px}

    .detalle {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(4,1fr);
        justify-content: center;
        width: 60%;
        
        padding: 24px;
        
        margin-left: 20%;
        margin-right: 20%;
    }
    
    main{
        display: grid;
        width: 100%;
    
        justify-content: center;
    
        grid-template-rows: auto auto auto;
    
        gap: 32px;
    }
    
}