.materias{
        width:100%;
        justify-content:center;
        /*background-color:brown;*/
        display:flex;
        background: linear-gradient(to bottom, #E3E3E3, #BEBEBE);
      }
      
      .materias .left{
        width:40%;
        padding:111px 60px 80px 40px;
        display:flex;
        justify-content:flex-end;
      }
      
     
      .materias .aspectos{
        width:100%;
        max-width:395px;
        display:flex;
        flex-direction:column;
        /*background-color:lightblue;*/
      }
      
      
      .materias .pleca{
        padding:16px 20px;
        display:flex;
        gap:15px;
        background:linear-gradient(to right, #8F948D, #717170);
        color:white;
        border-radius:9px;
        margin-top:10px;
        margin-bottom:20px;
        letter-spacing:0.01em;
      }
      
      .materias .pleca.oscura{
        background:linear-gradient(to right, #5E655B, #323231);
      }
      
      .materias .vinetaleft{
        width:14.08px;
        height:15.02px;
        /*background-color:black;*/
        flex-shrink:0;
        margin-top:2px;
      }
      
      
      .materias .right{
        display:flex;
        width:60%;
        padding:111px 40px 80px 40px;
        background-color:grey;
        justify-content:center;
        background: linear-gradient(to right,  #BEBEBE, #E3E3E3);
      }
      
      .materias .lista{
        width:100%;
        max-width:670px;
        display:flex;
        flex-direction:column;
        /*background-color:darkred;*/
        gap:24px;
      }
      
      .materias .caja{
        width:100%;
        display:flex;
        flex-direction:column;
        /*background-color:lightgreen;*/
      }
      
     .materias .seleccion{
        width:100%;
        display:flex;
        flex-direction:column;
        position:relative;
      }
      
      
      .materias .titular{
        width:100%;
        padding:14px 26px;
        background-color:white;
        border-radius:20px 20px 0 0;
        display:flex;
        gap:27px;
        align-items:center;
        justify-content:space-between;
        transition:all 0.5s ease;
      }
      
      .materias .flecha{
        all: unset;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        cursor:pointer;
        width:22px;
        height:13px;
        flex-shrink:0;
      }
      
      .materias .fraseMateria{
        width:100%;
        display:flex;
        gap:14px;
        background-color:#EDEDEE;
        align-items:flex-start;
        padding:18px 20px 18px 51px;
      }
      
      .materias .fraseMateria.colorClaro{
        background-color:white;
      }
      
      .materias .vineta{
        width:9px;
        height:9px;
        border-radius:100px;
        background-color:#741040;
        flex-shrink:0;
        margin-top: 4px;
      }
      
      .materias .finalRedondo{
        border-radius:0 0 20px 20px;
      }

      
      
      .materias h2{
        margin-bottom:28px;
      }
      
      .materias img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
      }
      
      
      .materias .wrapper{
        width:100%;
        display:flex;
        flex-direction:column;
        height: 0;
        overflow: hidden;
        transition: height .5s ease;
     }
      
      
      .materias .titular.dark{
        border-radius:15px;
        background-color:#9D9D9E;
        color:white;
      }

      .materias .white{
        display:none;
      }
      
      .materias .red{
        display:none;
      }
      
      .materias .showFlecha{
        display:flex;
      }
      
      
      .materias h2{
        font-size:40px;
        line-height:43px;
      }
      
      .materias h3{
        font-size:22px;
        line-height:26px;
      }
      
      .materias .left p{
        font-size:17px;
        line-height:22px;
      }
      
     .materias h4{
        font-size:18px;
        line-height:21px;
      }
      
      .materias .right p{
        font-size:16px;
        line-height:20px;
      }
      
      
      .materias .remarcado{
        color:#75003E;  
      }


      @media(max-width:900px){

        .materias{
          flex-direction:column;
        }

        .materias .left,
        .materias .right{
          width:100%;
          padding:72px 30px 0 30px;
          justify-content:center;
        }

        .materias .right{
          padding:30px 30px 84px 30px;
        }

        .materias .aspectos,
        .materias .lista{
          max-width:100%;
        }

        .materias .lista{
          gap:20px;
        }

        .materias .titular{
          padding:14px 20px;
          gap:20px;
        }

        .materias .fraseMateria{
          align-items: flex-start;
          padding:16px 18px 16px 28px;
        }

        .materias h2{
          font-size:30px;
          line-height:32px;
        }

        .materias h3{
          font-size:16px;
          line-height:20px;
        }

        .materias .left p{
          font-size:16px;
          line-height:20px;
        }

        .materias h4{
          font-size:16px;
          line-height:19px;
        }

        .materias .right p{
          font-size:16px;
          line-height:19px;
        }

      }


      @media (max-width:700px){

        .materias .left{
          padding:60px 28px 0 28px;
        }

        .materias .right{
          padding:24px 28px 64px 28px;
        }

        .materias .lista{
          gap:16px;
        }

        .materias .titular{
          padding:12px 16px;
          gap:14px;
          border-radius:16px 16px 0 0;
        }

        .materias .titular.dark{
          border-radius:14px;
        }

        .materias .flecha{
          width:18px;
          height:11px;
        }

        .materias .fraseMateria{
          padding:14px 16px 14px 20px;
          gap:12px;
        }

        .materias .vineta{
          width:8px;
          height:8px;
          margin-top: 5px;
        }

        .materias .finalRedondo{
          border-radius:0 0 16px 16px;
        }

        .materias h2{
          font-size:30px;
          line-height:32.25px;
          margin-bottom:22px;
        }

        .materias h3{
          font-size:16px;
          line-height:18.75px;
        }

        .materias .left p{
          font-size:16px;
          line-height:21px;
        }

        .materias h4{
          font-size:16px;
          line-height:15.75px;
        }

        .materias .right p{
          font-size:16px;
          line-height:19px;
        }

      }