.cta{
        width:100%;
        display:flex;
        padding:80px 40px 121px;
        background-color:#f0efee;
        justify-content:center;
      }

      .cta .content{
        width:100%;
        max-width:1332px;
        min-height:402px;
        background-color:#f0efee;
        border:1px solid #b7b7b7;
        display:flex;
        padding:7px 20px 7px 5px;
        gap:70px;
        align-items:center;
        position:relative;
        overflow:hidden;
      }

      .cta .leon{
        height:100%;
        width:262.587px;
        position:absolute;
        top:0;
        right:0;
        z-index:0;
        mix-blend-mode: multiply;
      }

      .cta .leon img{
        display:block;
        object-position:right center;
        object-fit:contain;
        width:100%;
        height:100%;
      }

      .cta .foto{
        width:468px;
        height:387px;
        background-color:#d9d9d9;
        flex-shrink:0;
        overflow:hidden;
      }

      .cta .foto img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
        transition:transform 0.45s ease;
      }

      .cta .foto:hover img{
        transform:scale(1.04);
      }
      
      .cta .textos{
        display:flex;
        width: 100%;
        flex-direction:column;
        z-index:1;
        position:relative;
        justify-content:center;
        align-items:flex-start;
      }

      .cta h2{
        max-width:499px;
        margin:0 0 25px;
        color:#000;
        font-size:40px;
        line-height:38px;
      }

      .cta h2 span{
        color:#b72323;
      }

      .cta .abajo{
        display:flex;
        width:100%;
        gap:29px;
        align-items:center;
        margin-bottom:32px;
      }

      .cta .precios{
        display:flex;
        flex-direction:column;
        width:160px;
        flex-shrink:0;
      }

      .cta .precios p:first-child{
        color:#7b7a7a;
        font-size:16px;
        line-height:18px;
        letter-spacing:1.8px;
        margin-bottom:6px;
        text-transform:uppercase;
      }

      .cta .precios p:last-child{
        color:#111;
        font-size:48px;
        line-height:48px;
        white-space:nowrap;
      }

      .cta .precios p:last-child span{
        color:#666;
        font-size:16px;
        line-height:16px;
        margin-left:5px;
      }

      .cta .line{
        height:74px;
        width:2px;
        background-color:#d9d9d9;
        flex-shrink:0;
      }

      .cta .textitos{
        display:flex;
        flex-direction:column;
        gap:3px;
        color:#3b3b3b;
        font-size:16px;
        line-height:20px;
      }

      .cta .textitos p:last-child{
        color:#6e6a62;
      }

      .cta a.button{
        text-decoration:none;
        color:#000;
        height:43px;
        padding:0 21px 0 25px;
        display:flex;
        width:fit-content;
        gap:13px;
        cursor:pointer;
        border:1px solid #c4c4c4;
        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;
      }

      .cta .flecha{
        width:21px;
        height:20px;
        flex-shrink:0;
      }

      .cta .flecha img{
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
        object-position:center;
        transition:transform 0.3s ease;
      }

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

      .cta a.button:hover .flecha img,
      .cta a.button:focus-visible .flecha img{
        transform:translateX(2px);
      }
      
@media (max-width: 1200px){

  .cta .foto{
    max-width:300px;
  }
  
}

      @media (max-width: 1003px){
        .cta{
          padding:72px 24px;
        }

        .cta .content{
          flex-direction:column;
          align-items:flex-start;
          padding:7px 7px 36px;
          gap:32px;
          max-width:600px;
        }

        .cta .foto{
          max-width:10000px;
          width:100%;
          height:auto;
          max-height:300px;
          aspect-ratio:468 / 387;
        }

        .cta .textos{
          width:100%;
          min-height:0;
          padding:0 28px;
        }

        .cta h2{
          font-size:34px;
          line-height:37px;
          max-width:380px;
        }

        .cta .abajo{
          flex-wrap:wrap;
        }

        .cta .line{
          display:none;
        }

        .cta .leon{
          width:150px;
          height:282px;
          top:auto;
          bottom:0;
        }
      }

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

        .cta .textos{
          padding:0 16px;
        }

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

        .cta .abajo{
          gap:16px;
          margin-bottom:26px;
        }

        .cta .precios{
          width:100%;
        }

        .cta .precios p:last-child{
          font-size:42px;
          line-height:44px;
        }

        .cta .textitos{
          font-size:14px;
          line-height:19px;
        }
      }

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

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

/* Large viewport proportional scaling */
@media (min-width: 1765px){
  .cta{
        width:100%;
        display:flex;
        padding:4.5351vw 2.2676vw 6.8594vw;
        background-color:#f0efee;
        justify-content:center;
      }
  .cta .content{
        width:100%;
        max-width:75.5102vw;
        min-height:22.7891vw;
        background-color:#f0efee;
        border:0.0567vw solid #b7b7b7;
        display:flex;
        padding:0.3968vw 1.1338vw 0.3968vw 0.2834vw;
        gap:3.9683vw;
        align-items:center;
        position:relative;
        overflow:hidden;
      }
  .cta .leon{
        height:100%;
        width:14.8859vw;
        position:absolute;
        top:0;
        right:0;
        z-index:0;
        mix-blend-mode: multiply;
      }
  .cta .foto{
        width:26.5306vw;
        height:21.9388vw;
        background-color:#d9d9d9;
        flex-shrink:0;
        overflow:hidden;
      }
  .cta h2{
        max-width:28.288vw;
        margin:0 0 1.4172vw;
        color:#000;
        font-size:2.2676vw;
        line-height:2.1542vw;
      }
  .cta .abajo{
        display:flex;
        width:100%;
        gap:1.644vw;
        align-items:center;
        margin-bottom:1.8141vw;
      }
  .cta .precios{
        display:flex;
        flex-direction:column;
        width:9.0703vw;
        flex-shrink:0;
      }
  .cta .precios p:first-child{
        color:#7b7a7a;
        font-size:0.907vw;
        line-height:1.0204vw;
        letter-spacing:0.102vw;
        margin-bottom:0.3401vw;
        text-transform:uppercase;
      }
  .cta .precios p:last-child{
        color:#111;
        font-size:2.7211vw;
        line-height:2.7211vw;
        white-space:nowrap;
      }
  .cta .precios p:last-child span{
        color:#666;
        font-size:0.907vw;
        line-height:0.907vw;
        margin-left:0.2834vw;
      }
  .cta .line{
        height:4.195vw;
        width:0.1134vw;
        background-color:#d9d9d9;
        flex-shrink:0;
      }
  .cta .textitos{
        display:flex;
        flex-direction:column;
        gap:0.1701vw;
        color:#3b3b3b;
        font-size:0.907vw;
        line-height:1.1338vw;
      }
  .cta a.button{
        text-decoration:none;
        color:#000;
        height:2.4376vw;
        padding:0 1.1905vw 0 1.4172vw;
        display:flex;
        width:fit-content;
        gap:0.737vw;
        cursor:pointer;
        border:0.0567vw solid #c4c4c4;
        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;
      }
  .cta .flecha{
        width:1.1905vw;
        height:1.1338vw;
        flex-shrink:0;
      }
  .cta a.button:hover,
      .cta 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);
      }
  .cta a.button:hover .flecha img,
      .cta a.button:focus-visible .flecha img{
        transform:translateX(0.1134vw);
      }
}
/* End large viewport proportional scaling */