:root {
    --Very-dark-desaturated-blue:           hsl(238, 29%, 16%); /*Text*/
    --Soft-red:                             hsl(14, 88%, 65%);  /*Text*/
    
    --Soft-violet:                          hsl(273, 75%, 66%); /*Background gradient*/
    --Soft-blue:                            hsl(240, 73%, 65%); /*Background gradient*/
   

    --Very-dark-grayish-blue:               hsl(237, 12%, 33%);  /* Neutral Text*/
    --Dark-grayish-blue:                    hsl(240, 6%, 50%);  /* Neutral Text*/
    
    --Light-grayish-blue:                   hsl(240, 5%, 91%);  /*Dividers*/
    

}


* {

  box-sizing: border-box; 
}

a  {
    color: black;
    text-decoration: none;
    background-color: none;
}

a:link  {
   
    text-decoration: none;
    background-color: none;
    color: black;
    
}


html {

font-size: 12px;
font-family: 'Kumbh Sans 400' cursive;
font-family: 'Kumbh Sans 700', sans-serif;
}



body {
    margin: 0;
    background: linear-gradient(hsl(273, 75%, 66%),hsl(240, 73%, 65%));
    width: 100vw;
    height: 100vh;
    font-size: 12px;
    display: grid;
    justify-content: center;
    align-items: center;
}



.container {
    background: white url(images/bg-pattern-desktop.svg) no-repeat 1250% 55%; /* Tmb Sombra en negativo */
    border-radius: 30px;
    height: 509px;
    width: 920px; 
    display: grid;
    grid-template-columns: 450px 1fr;
    grid-gap: 5rem;

/*
  position: absolute;
  background-color: white;
  background-image:
  url(../images/illustration-woman-online-desktop.svg),
  url(../images/bg-pattern-desktop.svg);
  background-repeat: no-repeat;
 */
}


.accordion {

  /* position: absolute;
    width: 18%;
    right: 32%;
    top: 30%; Asi no */
   
   margin-top: -202px;
   display: flex;
   flex-direction: column;
   margin-left: -28px;
}



.accordion-button:not(.collapsed) {
    color: #060606;
    background-color: white; 
    /* box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%); */
}


.accordion-button {
    color: var(--Very-dark-grayish-blue);
    background-color: white; 
    box-shadow: none; 
}


.accordion-item {
    background-color: #fff;
    border: none;
} 


.title_accordion {
    font-size: 3rem;
    margin-top: 33px;
    display: flex;
  /*  display: block; */
    margin-block-start: 2.2em;
    margin-inline-start: 504px;
    font-weight: bold;
}


.woman { 
    display: block;
    margin-top: 4.7rem;
    margin-left: -47.5rem;
 }

.box {    
    display: block;
    margin-left: -50.5rem;
    margin-top: -18.7rem;
}

/*  Esto se me mueveee, así no! Solución rem!

.woman {    
    position: absolute;
    left: 15%;
    top: 16%;
          
}
.box {
    position: absolute;
    left: 13%;
    top: 34%;
    height: 15%;
}  */

.svg {
    top: 56%;
    left: 66%;
    height: 70%;
    margin-top: 0;
  
}

.attribution {
    text-align: center;
    margin-top: -10rem;
    font-size: 11px;
    text-decoration: none;
    background-color: none;
    
}


@media screen and (max-width: 993px) {


    .accordion {
       margin-top: -18rem;
       margin-left: -14rem;
      
    }
    
    .woman {
      margin-top: 5.7rem;
      margin-left: -57rem;
      /* left: 30%;*/
    }
    .box {
        display: none;
    }
    }
    

@media screen and (max-width: 766px) {


    .container {
        width: 350px;
        grid-template-columns: 1fr;
        grid-template-rows: 100px 1fr;
        grid-gap: 0.5rem;
        position: relative;
        height: 530px;
        padding: 1rem;
        display: grid;

    }

    h3.title_accordion {
        text-align: center;
        margin-inline-start: 123px;
        margin-top: 121px;
        
      }
     
    .accordion {
         width: 90%;
         margin-top: 7rem; /*rem*/
         margin-left: 12px;
       
        }

    .box {
       display: none;
    }

    .woman {
        width: 70%;  
        margin-top: -5rem; /*rem*/
        margin-left: 4rem; /*rem*/
    }

    .images {

        position: absolute;
        background-image: url(./images/bg-pattern-mobile.svg);
        background-repeat: no-repeat;

        background-position: center -900%; 
        width: 100%;
        height: 101px;
    }
    .attribution {
        margin-top: -140px;
    }
   
}


 /* @media (min-width: 2000px) and (max-width: 3000px) { 
    
    .accordion {
        position: absolute;
         margin-top: rem;
         margin-right: rem;
        
    }
      
    .woman {
        margin-top: 5.7rem;
        margin-left: 4rem;

    }

    .box {
        top: 29%;
        left: 27%;
    } 
         
    .svg {
        top: 56%;
        left: 66%;
        height: 70%;
        margin-top: 0;
          
        }
        
    .attribution {
        text-align: center;
        margin-top: -500px;
        font-size: 11px;
        
        }

}   */