.valor{
        width:100%;
        display:flex;
        flex-direction:column;
        background-color:#f0efee;
        align-items:center;
        position:relative;
        overflow:hidden;
      }

      .valor .back{
        width:100%;
        display:flex;
        height:532px;
        position:relative;
        overflow:hidden;
      }

      .valor .imagen{
        width:100%;
        height:100%;
        position:relative;
      }

      .valor .imagen::after{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(170deg, rgba(2,2,2,0.15) 20%, rgba(1,1,1,0.4) 50%, rgba(0,0,0,0.8) 100%);
        pointer-events:none;
      }

      .valor .imagen img{
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
        object-position:left top;
        transition:transform 0.55s ease;
      }

      .valor:hover .imagen img{
        transform:scale(1.03);
      }
      

      .valor .bottom{
        width:100%;
        display:flex;
        justify-content:flex-end;
        max-width:1764px;
        margin-top:-253px;
        padding-right:127px;
        position:relative;
        z-index:1;
      }

      .valor .info{
        width:100%;
        max-width:666px;
        display:flex;
        flex-direction:column;
      }

      .valor h4{
        color:#fff;
        font-size:22px;
        line-height:normal;
        margin-bottom:28px;
      }

      .valor h2{
        color:#fff;
        font-size:40px;
        line-height:38px;
        letter-spacing:-0.3px;
        max-width:611px;
        margin-bottom:36px;
      }

      .valor .tarjeta{
        width:100%;
        display:flex;
        background-color:#f0efee;
        flex-direction:column;
        padding:37px 58px 36px 58px;
        border-left:1px solid #cecece;
        border-right:1px solid #cecece;
        gap:8px;
      }

      .valor .rasgo{
        width:100%;
        display:grid;
        grid-template-columns:minmax(120px, auto) 188px minmax(150px, auto);
        gap:12px;
        align-items:center;
      }

      .valor .rasgo p{
        font-size:18.4px;
        line-height:27.6px;
        white-space:nowrap;
      }

      .valor .rasgo p:first-child{
        color:#888;
      }

      .valor .rasgo p:last-child{
        color:#343434;
        justify-self:start;
        padding-left: 7px;
      }

      .valor .flecha{
        width:187.89px;
        height:12.97px;
        flex-shrink:0;
      }

      .valor .flecha img{
        width:100%;
        height:100%;
        display:block;
        object-fit:contain;
        transition:transform 0.3s ease;
      }

      .valor .rasgo:hover .flecha .desktop{
        transform:translateX(2px);
      }

      .valor .flecha .mobile{
        display:none;
      }

      @media (max-width: 980px){
        .valor .back{
          height:420px;
        }
      .valor .imagen::after{
         background:linear-gradient(-180deg, rgba(2,2,2,0.15) 20%, rgba(1,1,1,0.4) 50%, rgba(0,0,0,0.8) 100%);
      }
        .valor .bottom{
          justify-content:center;
          margin-top:-200px;
          padding:0 24px 72px;
        }

        .valor .info{
          max-width:666px;
        }

        .valor h4{
          font-size:20px;
          margin-bottom:22px;
        }

        .valor h2{
          font-size:34px;
          line-height:37px;
          margin-bottom:32px;
        }
      }

      @media (max-width: 680px){
        .valor .back{
          height:540px;
        }

        .valor .bottom{
          margin-top:-270px;
          padding:0 18px 56px;
        }

         .valor .imagen img{
          object-position: -300px center;
         }

        .valor .info{
          align-items: center;
          text-align: center;
        }

        .valor h4{
          font-size:18px;
          margin-bottom:18px;
        }

        .valor h2{
          font-size:28px;
          line-height:31px;
          margin-bottom:26px;
        }

        .valor .tarjeta{
          padding:28px 22px;
          gap: 30px;
          width: fit-content;
          min-width: 350px;
        }

        .valor .rasgo{
          display:flex;
          flex-direction:column;
          align-items:center;
          text-align: center;
          gap:5px;
        }

        .valor .rasgo p{
          white-space:normal;
        }

        .valor .rasgo p:last-child{
          justify-self:start;
          padding-left: 0;
        }

        .valor .flecha{
          width:13px;
          height:12.97px;
          display:flex;
          align-items:center;
          justify-content:center;
          margin-left:10px;
        }

        .valor .flecha .desktop{
          display:none;
        }

        .valor .flecha .mobile{
          display:block;
          width:13px;
          height:72px;
          transform:none;
        }

        .valor .rasgo:hover .flecha .mobile{
          transform:translateY(2px);
        }

      .valor .imagen::after{
         background:linear-gradient(-180deg, rgba(2,2,2,0.15) 20%, rgba(1,1,1,0.4) 50%, rgba(0,0,0,0.8) 100%);
      }


      }

      @media (max-width: 480px){
        .valor .tarjeta{
          min-width: 250px;
        }
      }

      @media (prefers-reduced-motion: reduce){
        .valor .imagen img,
        .valor .flecha img{
          transition:none;
        }

        .valor:hover .imagen img,
        .valor .rasgo:hover .flecha .desktop,
        .valor .rasgo:hover .flecha .mobile{
          transform:none;
        }
      }

/* Large viewport proportional scaling */
@media (min-width: 1765px){
  .valor .back{
        width:100%;
        display:flex;
        height:30.1587vw;
        position:relative;
        overflow:hidden;
      }
  .valor .bottom{
        width:100%;
        display:flex;
        justify-content:flex-end;
        max-width:100vw;
        margin-top:-14.3424vw;
        padding-right:7.1995vw;
        position:relative;
        z-index:1;
      }
  .valor .info{
        width:100%;
        max-width:37.7551vw;
        display:flex;
        flex-direction:column;
      }
  .valor h4{
        color:#fff;
        font-size:1.2472vw;
        line-height:normal;
        margin-bottom:1.5873vw;
      }
  .valor h2{
        color:#fff;
        font-size:2.2676vw;
        line-height:2.1542vw;
        letter-spacing:-0.017vw;
        max-width:34.6372vw;
        margin-bottom:2.0408vw;
      }
  .valor .tarjeta{
        width:100%;
        display:flex;
        background-color:#f0efee;
        flex-direction:column;
        padding:2.0975vw 3.288vw 2.0408vw 3.288vw;
        border-left:0.0567vw solid #cecece;
        border-right:0.0567vw solid #cecece;
        gap:0.4535vw;
      }
  .valor .rasgo{
        width:100%;
        display:grid;
        grid-template-columns:minmax(6.8027vw, auto) 10.6576vw minmax(8.5034vw, auto);
        gap:0.6803vw;
        align-items:center;
      }
  .valor .rasgo p{
        font-size:1.0431vw;
        line-height:1.5646vw;
        white-space:nowrap;
      }
  .valor .rasgo p:last-child{
        color:#343434;
        justify-self:start;
        padding-left: 0.3968vw;
      }
  .valor .flecha{
        width:10.6514vw;
        height:0.7353vw;
        flex-shrink:0;
      }
  .valor .rasgo:hover .flecha .desktop{
        transform:translateX(0.1134vw);
      }
}
/* End large viewport proportional scaling */