.materias{
        width:100%;
        display:flex;
        background-color:#f0efee;
        padding:10px 77px 153px;
        justify-content:center;
      }
      .materias .container{
        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:21px;
        max-width:1610px;
        justify-content: center;
      }

      .materias .box{
        display:flex;
        flex-direction:column;
        width:100%;
        min-height:544px;
        max-width:536px;
        flex:1 1 480px;
        color:#fff;
        position:relative;
        overflow:hidden;
        padding:0 35px 39px;
        justify-content:flex-end;
        transition:
          box-shadow 0.3s ease,
          transform 0.3s ease;
      }

      .materias .box::after{
        content:"";
        position:absolute;
        inset:0;
        background-color:rgba(72,73,80,.42);
        z-index:1;
        pointer-events:none;
      }

      .materias .box::before{
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:100%;
        background-color:rgba(32,32,36,.76);
        backdrop-filter:blur(30px);
        -webkit-backdrop-filter:blur(30px);
        mask-image:linear-gradient(190deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.8) 58%, rgba(0,0,0,1) 100%);
        -webkit-mask-image:linear-gradient(190deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.8) 58%, rgba(0,0,0,1) 100%);
        z-index:2;
        pointer-events:none;
      }

      .materias .box > img{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
        object-position:top;
        z-index:0;
        transition:transform 0.45s ease;
      }

      .materias .box:hover{
        box-shadow:0 10px 24px rgba(0,0,0,0.16);
        transform:translateY(-2px);
      }

      .materias .box:hover > img{
        transform:scale(1.04);
      }

      .materias .number{
        padding:18px 20px 13px;
        background-color:#961214;
        display:flex;
        flex-direction:column;
        gap:0;
        width:129px;
        height:124px;
        position:absolute;
        top:0;
        left:0;
        z-index:3;
        align-items:center;
      }

      .materias .number p:first-child{
        font-size:12px;
        line-height:16.8px;
        letter-spacing:1.68px;
        text-transform:uppercase;
      }

      .materias .number p:last-child{
        font-size:74px;
        line-height:74px;
        letter-spacing:-3.7px;
      }

      .materias .bottom{
        display:flex;
        flex-direction:column;
        position:relative;
        z-index:3;
      }

      .materias h3{
        max-width:443px;
        font-size:30px;
        line-height:36.389px;
        letter-spacing:-0.2426px;
        margin-bottom:20px;
      }

      .materias .ejeBase{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:7px;
        margin-bottom:17px;
      }

      .materias .ejeBase h5{
        font-size:15px;
        line-height:16.8px;
        letter-spacing:1.3px;
        text-transform:uppercase;
      }

      .materias .ejeBase p{
        font-size:16px;
        line-height:22px;
        letter-spacing: 2%;
      }

      .materias .line{
        width:100%;
        height:1px;
        background-color:rgba(255,255,255,.3);
        margin:0 0 18px;
      }

      .materias .carga{
        display:flex;
        flex-direction:column;
        gap:12px;
      }

      .materias .carga p{
        font-size:16px;
        line-height:22px;
        letter-spacing: 2%;
      }

      @media (max-width: 1150px){
        .materias{
          padding:10px 24px 72px;
        }

        .materias .container{
          gap:18px;
        }

        .materias .box{
          max-width:none;
          min-height:520px;
          flex-basis:100%;
          padding:0 30px 36px;
        }

        .materias h3{
          font-size:30px;
          line-height:34px;
        }
      }

      @media (max-width: 560px){
        .materias{
          padding:10px 18px 56px;
        }

        .materias .box{
          min-height:540px;
          padding:0 22px 32px;
        }

        .materias h3{
          font-size:28px;
          line-height:31px;
          margin-bottom:18px;
        }

        .materias .number{
          width:112px;
          height:108px;
          padding-top:14px;
        }

        .materias .number p:last-child{
          font-size:62px;
          line-height:62px;
        }
      }

      @media (prefers-reduced-motion: reduce){
        .materias .box,
        .materias .box > img{
          transition:none;
        }

        .materias .box:hover,
        .materias .box:hover > img{
          transform:none;
        }
      }

/* Large viewport proportional scaling */
@media (min-width: 1765px){
  .materias{
        width:100%;
        display:flex;
        background-color:#f0efee;
        padding:0.5669vw 4.3651vw 8.6735vw;
        justify-content:center;
      }
  .materias .container{
        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:1.1905vw;
        max-width:91.2698vw;
        justify-content: center;
      }
  .materias .box{
        display:flex;
        flex-direction:column;
        width:100%;
        min-height:30.839vw;
        max-width:30.3855vw;
        flex:1 1 27.2109vw;
        color:#fff;
        position:relative;
        overflow:hidden;
        padding:0 1.9841vw 2.2109vw;
        justify-content:flex-end;
        transition:
          box-shadow 0.3s ease,
          transform 0.3s ease;
      }
  .materias .box::before{
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:100%;
        background-color:rgba(32,32,36,.76);
        backdrop-filter:blur(1.7007vw);
        -webkit-backdrop-filter:blur(1.7007vw);
        mask-image:linear-gradient(190deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.8) 58%, rgba(0,0,0,1) 100%);
        -webkit-mask-image:linear-gradient(190deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 42%, rgba(0,0,0,0.8) 58%, rgba(0,0,0,1) 100%);
        z-index:2;
        pointer-events:none;
      }
  .materias .box:hover{
        box-shadow:0 0.5669vw 1.3605vw rgba(0,0,0,0.16);
        transform:translateY(-0.1134vw);
      }
  .materias .number{
        padding:1.0204vw 1.1338vw 0.737vw;
        background-color:#961214;
        display:flex;
        flex-direction:column;
        gap:0;
        width:7.3129vw;
        height:7.0295vw;
        position:absolute;
        top:0;
        left:0;
        z-index:3;
        align-items:center;
      }
  .materias .number p:first-child{
        font-size:0.6803vw;
        line-height:0.9524vw;
        letter-spacing:0.0952vw;
        text-transform:uppercase;
      }
  .materias .number p:last-child{
        font-size:4.195vw;
        line-height:4.195vw;
        letter-spacing:-0.2098vw;
      }
  .materias h3{
        max-width:25.1134vw;
        font-size:1.7007vw;
        line-height:2.0629vw;
        letter-spacing:-0.0138vw;
        margin-bottom:1.1338vw;
      }
  .materias .ejeBase{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:0.3968vw;
        margin-bottom:0.9637vw;
      }
  .materias .ejeBase h5{
        font-size:0.8503vw;
        line-height:0.9524vw;
        letter-spacing:0.0737vw;
        text-transform:uppercase;
      }
  .materias .ejeBase p{
        font-size:0.907vw;
        line-height:1.2472vw;
        letter-spacing: 2%;
      }
  .materias .line{
        width:100%;
        height:0.0567vw;
        background-color:rgba(255,255,255,.3);
        margin:0 0 1.0204vw;
      }
  .materias .carga{
        display:flex;
        flex-direction:column;
        gap:0.6803vw;
      }
  .materias .carga p{
        font-size:0.907vw;
        line-height:1.2472vw;
        letter-spacing: 2%;
      }
}
/* End large viewport proportional scaling */