.banner{
        width:100%;
        display:flex;
        background-color:#2f2b2b;
        padding:94px 81px 0 81px;
        min-height:707px;
        position:relative;
        align-items:center;
        justify-content:flex-start;
        overflow:hidden;
      }

      .banner .content{
        display:flex;
        width:100%;
        height:fit-content;
        max-width:1602px;
        z-index:1;
        position:relative;
      }

      .banner .textos{
        display:flex;
        width:100%;
        max-width:670px;
        flex-direction:column;
        height:fit-content;
      }

      .banner h4{
        color:#fff;
        font-size:25px;
        line-height:normal;
        margin-bottom:11px;
      }

      .banner h1{
        color:#fff;
        font-size:60px;
        line-height:55px;
        letter-spacing:-1.2px;
        margin-bottom:41px;
      }


      .banner a.button{
        text-decoration:none;
        color:#000;
        height:43px;
        padding:0 19px 0 25px;
        display:flex;
        width:fit-content;
        gap:12px;
        cursor:pointer;
        background-color:#fff;
        border:none;
        align-items:center;
        justify-content:center;
        font-size:15px;
        line-height:17px;
        transition:
          background-color 0.3s ease,
          color 0.3s ease,
          box-shadow 0.3s ease,
          transform 0.3s ease;
      }

      .banner .flecha{
        width:21px;
        height:20px;
        flex-shrink:0;
        overflow:hidden;
      }

      .banner .flecha img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:transform 0.3s ease;
      }


      .banner .imagenFondo{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:0;
        overflow:hidden;
      }

      .banner .imagenFondo::after{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
        pointer-events:none;
        z-index:1;
      }

      .banner .imagenFondo picture,
      .banner .imagenFondo img{
        width:100%;
        height:100%;
      }

      .banner .imagenFondo picture{
        display:block;
      }

      .banner .imagenFondo img{
        display:block;
        object-fit:cover;
        object-position:right;
        transition:transform 0.6s ease;
      }

      .banner:hover .imagenFondo img{
        transform:scale(1.03);
      }

      .banner a.button:hover,
      .banner a.button:focus-visible{
        background-color:#fff;
        color:#750b04;
        box-shadow:0 10px 24px rgba(0,0,0,0.16);
        transform:translateY(-2px);
      }

      .banner a.button:hover .flecha img,
      .banner a.button:focus-visible .flecha img{
        transform:translateX(2px);
      }

      @media (max-width: 1000px){
        .banner{
          min-height:640px;
          padding:148px 32px;
          align-items: flex-start;
        }

        .banner .textos{
          max-width:600px;
        }

        .banner h4{
          font-size:22px;
        }

        .banner h1{
          font-size:52px;
          line-height:52px;
        }
       .banner .imagenFondo img{
        display:block;
        object-fit:cover;
        object-position:right -600px;
      }

      @media (prefers-reduced-motion: reduce){
        .banner .imagenFondo img,
        .banner a.button,
        .banner .flecha img{
          transition:none;
        }

        .banner:hover .imagenFondo img,
        .banner a.button:hover,
        .banner a.button:focus-visible,
        .banner a.button:hover .flecha img,
        .banner a.button:focus-visible .flecha img{
          transform:none;
        }
      }

      }

      @media (max-width: 900px){
      .banner .imagenFondo img{
        display:block;
        object-fit:cover;
        object-position:right -500px;
      }
      }

       @media (max-width: 800px){
      .banner .imagenFondo img{
        display:block;
        object-fit:cover;
        object-position:right -270px;
      }
      }

     @media (max-width: 650px){

      .banner .imagenFondo img{
        display:block;
        object-fit:cover;
        object-position:right -150px;
      }
      }

      @media (max-width: 560px){
        .banner{
          min-height:690px;
          height: 100vh;
          padding:152px 20px;
        }

        .banner h4{
          font-size:20px;
        }

        .banner h1{
          font-size:40px;
          line-height:41px;
          margin-bottom:32px;
        }

       .banner .imagenFondo img{
        object-position:right bottom;
      }

        
      }

/* Large viewport proportional scaling */
@media (min-width: 1765px){
  .banner{
        width:100%;
        display:flex;
        background-color:#2f2b2b;
        padding:5.3288vw 4.5918vw 0 4.5918vw;
        min-height:40.0794vw;
        position:relative;
        align-items:center;
        justify-content:flex-start;
        overflow:hidden;
      }
  .banner .content{
        display:flex;
        width:100%;
        height:fit-content;
        max-width:90.8163vw;
        z-index:1;
        position:relative;
      }
  .banner .textos{
        display:flex;
        width:100%;
        max-width:37.9819vw;
        flex-direction:column;
        height:fit-content;
      }
  .banner h4{
        color:#fff;
        font-size:1.4172vw;
        line-height:normal;
        margin-bottom:0.6236vw;
      }
  .banner h1{
        color:#fff;
        font-size:3.4014vw;
        line-height:3.1179vw;
        letter-spacing:-0.068vw;
        margin-bottom:2.3243vw;
      }
  .banner a.button{
        text-decoration:none;
        color:#000;
        height:2.4376vw;
        padding:0 1.0771vw 0 1.4172vw;
        display:flex;
        width:fit-content;
        gap:0.6803vw;
        cursor:pointer;
        background-color:#fff;
        border:none;
        align-items:center;
        justify-content:center;
        font-size:0.8503vw;
        line-height:0.9637vw;
        transition:
          background-color 0.3s ease,
          color 0.3s ease,
          box-shadow 0.3s ease,
          transform 0.3s ease;
      }
  .banner .flecha{
        width:1.1905vw;
        height:1.1338vw;
        flex-shrink:0;
        overflow:hidden;
      }
  .banner a.button:hover,
      .banner a.button:focus-visible{
        background-color:#fff;
        color:#750b04;
        box-shadow:0 0.5669vw 1.3605vw rgba(0,0,0,0.16);
        transform:translateY(-0.1134vw);
      }
  .banner a.button:hover .flecha img,
      .banner a.button:focus-visible .flecha img{
        transform:translateX(0.1134vw);
      }
}
/* End large viewport proportional scaling */