.container {
      max-width: 1544px;
      width: 100%;
      margin: 0 auto;    /* centra horizontalmente */
      padding: 0 15px;   /* evita que pegue a los bordes */      
  }

  .slider {
      margin-bottom: 50px;
  }

  .splide__slide {
    background: #003C83;
    padding: 2rem;
    border-radius: 43.922px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    width: 1124px !important;
    height: 216px;
    letter-spacing: -0.035em;
  
    display: flex;              /* habilita flex en el contenedor grande */
    justify-content: center;    /* centra horizontalmente el contenido */
    align-items: center;        /* centra verticalmente el contenido */
  }

  .splide__slide.two .slide-content {
    margin-left: 50px; /* Ajusta el valor a tu gusto */
  }
    /* Texto del número de WhatsApp */
  .whatsapp-text {
    display: inline-flex !important;      /* pone imagen y texto en línea */
    align-items: center !important;       /* centra verticalmente */
    gap: 2px !important;                  /* espacio mínimo entre icono y número */
  }
  
  .whatsapp-text .img-left {
      width: 40px !important;               /* tamaño del icono */
      margin: 0 !important;                 /* elimina cualquier margen extra */
      vertical-align: middle !important;
  }
  


  .p-0 {
      padding: 0 !important;
      margin-top: 0;
      margin-bottom: 0;
  }

  .splide__slide .text {
      font-weight: 200;
  }

  .splide__slide .bold {
      font-weight: bold;
  }

  .splide__slide.two {
      display: flex;
  }

  .text-center {
      text-align: center;
  }

  .splide__slide p {
      margin: 0;
  }

  .text-inline {
      display: flex;
      justify-content: center;
  }

  .splide__slide .button_link {
      color: #003D88;
      background-color: #fff;
      border-radius: 20px;
      padding: 15px;
  }

  /* Estilo de los bullets de Splide */
  #slidersection .splide__pagination__page {
    width: 12px;            /* Tamaño del bullet */
    height: 12px;
    margin: 0 6px;          /* Espaciado entre bullets */
    border-radius: 50%;     /* Forma circular */
  }

  /* Estilo cuando el bullet está activo */
  #slidersection .splide__pagination__page.is-active {
    background: #222;       /* Gris más oscuro */
    transform: scale(1.2);  /* (Opcional) Agranda el activo */
  }


  .img-left {
    padding: 0 !important;
  }

  .splide__slide .text {
      flex: 1;
  }

  
  .splide__slide.two .button_link .bold {
      font-weight: bold;
  }

  .bloque-contenido {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* mantiene alineación relativa interna */
  }

  .fila-superior {
    display: flex;
    align-items: center; 
    gap: 10px; 
    margin: 0;
  }
  
  .texto-izquierda {
    margin: 0;
    margin-left: 25px  !important;       /* mantiene alineación relativa al párrafo */
  }
  
  .texto-izquierda2 {
    margin: 0;
    margin-left: 35px  !important;       /* mantiene alineación relativa al párrafo */
  }


  body {
      margin: 0;
      background: #f4f4f4;
      height: 100vh;
      background-size: auto;          /* Muestra la imagen en su tamaño original */
      background-position: top left;  /* La ubica en la esquina superior izquierda */
      background-repeat: no-repeat;   /* Evita que se repita */      
  }

  #text-carousel {
      width: 100%;
  }

  footer {
      background-color: #003D88;
      font-family: "Montserrat";
      color: #fff;
      display: flex;
  }

  footer ul {
      display: flex;
      flex-direction: row;
      list-style: none;
      padding-left: 0;
  }

  footer ul li {
      flex: 1;
  }

  footer .title {
      font-size: 21px;
      font-weight: 500;
  }

  footer p {
      font-size: 17px;
      font-weight: 300;
  }

  .initial .fa-facebook,
  .initial .fa-instagram {
      padding: 12px 20px;
      font-size: 30px;
  }

  .fa-instagram {
      padding: 12px 17px;
  }

  .fa {
      background-color: #00D900;
      border-radius: 50%;
  }

  .fa-whatsapp {
      padding: 4px 6px;
  }

  footer .bold {
      font-weight: 500;
  }

  .fa-clock-o {
      padding: 1px 3.5px 2.5px 4px;
      margin-right: 5px;
  }

  .libro {
      display: flex;
      align-items: center;
      justify-content: center;
      border: solid 1.5px #fff;
      border-radius: 15px;
      max-width: 190px;
      font-size: 15px;
      font-weight: 500;
      line-height: 1;
      padding: 4px 25px;
      margin-top: 5px; /* 👈 desplaza todo el bloque hacia abajo */
      color: white; /* 👈 texto en blanco */
  }

  
  .libro img {
      padding: 0;
  }

  .img-left-libro-reclamaciones {
    margin-top: 5px;   /* 👈 baja la imagen */
    margin-left: -5px; /* 👈 la mueve un poco a la izquierda */
  }

  footer hr {
      margin: 90px 0px 0px;
  }

  .footer-text {
    padding-bottom: 60px;
    position: relative;
    left: 0px; /* desplaza todo el bloque hacia la izquierda */
    text-align: center; /* mantiene el centrado interno del logo y textos */
  }
  
  .footer-shift-left {
    position: relative;
    left: -60px !important; /* mueve todo el contenido 20px a la izquierda */
  }
  

  .logo {
      position: relative;
      top: -10px;
  }

  .instruction {
      font-family: "Montserrat";
      padding: 50px 0;
  }

  .title-section {
      text-align: center;
      color: #383838;
  }

  .content-two {
      display: flex;
      justify-content: center;
  }

  .text-left-grap {
      max-width: 150px;
      color: #003D88;
      font-weight: 600;
      font-size: 30px;
      line-height: 1;
  }

  .items {
      list-style: none;
      line-height: 0.8;
      color: #555555;
  }

  .midle {
    padding: 110px;
  }

.content-two > div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor en columna (opcional) */
.button_link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.button_link_div {
  height: 85px; /* Ajusta este valor según necesites */
  padding: 5px 0; /* opcional: reduce el padding interno si quieres más control */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra el contenido verticalmente */
  margin-top: -1px !important;
  padding-left: 12px !important;
  padding-right: 20px !important;
}


/* Texto dentro del botón */
.button_link p.texto-16,
.button_link p.texto-28 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2;
}

/* Párrafo con ícono */
.button_link p.texto-28 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px !important;
}



  /* Quita márgenes por defecto de ambos <p> sí o sí */
  .button_link p.texto-16,
  .button_link p.texto-28 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
  }
  
  /* Deja un espacio MUY corto entre ellos */
  .button_link p.texto-28 {
    margin-top: 2px !important;   /* ajústalo: 1px, 3px, etc. */
  }
  
  /* Si el segundo lleva ícono, que alinee bien */
  .button_link p.texto-28 {
    display: inline-flex;
    align-items: center;
    gap: 6px;                      /* espacio entre ícono y número */
  }

  .slide-content {
    display: flex;
    justify-content: space-between; /* separa los dos divs al máximo posible */
    align-items: flex-start;        /* alinea por arriba */
    width: 100%;
    padding: 0 20px;                /* opcional: espacio desde los bordes */
    box-sizing: border-box;         /* para que el padding no afecte ancho */
  }
  
  .slide-content > .texto-35 {
    max-width: 60%;                 /* opcional: limita ancho del texto */
  }
  
  .slide-content > .button_link {
    display: flex;
    flex-direction: column;
    align-items: flex-end;          /* alinea texto del botón a la derecha */
  }

  /* AQUI COMIENZA LA MIGRACIÓN*/
     /* Estilo personalizado para radios cuadrados con check */
  button.active {
    background-color: #003C84 !important;
    color: white !important;
  }

   .custom-radio .form-check-input {
    width: 18px;
    height: 18px;
    /*border-radius: 2px;*/
    border: 2px solid #003C84;
    margin-top: 0.2rem;
    position: relative;
    /*background-color: white; Asegura que el fondo sea blanco */
    }

    /* Estilo para cuando el radio está seleccionado */
    .custom-radio .form-check-input:checked {
    background-color: #003C84;
    border-color: #003C84;
    }

    /* Cambiar el símbolo por ✓ en lugar del punto */
    .custom-radio .form-check-input:checked::after {
    content: "✓";
    color: white;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 3px;
    }

    .custom-radio .form-check-label {
    color: #003C84;
    font-weight: 500;
    }

    .entrelineas {
        line-height: 1.0 !important; /* ajusta el número para que sea más pequeño o más grande */
    }

    /* Ajustar la disposición de los radio buttons a horizontal */
    .custom-radio .form-check {
    display: inline-block;
    margin-right: 15px;
    }
  
    .tipo-cambio-box {
        background-color: #ffffff;
        border: 0px solid #00B6FF;
        /*border-radius: 10px;*/
        padding: 10px 15px;
        box-shadow: none;
        display: inline-block;
      }
    
      .text-tipotitulo {
        color: #003C84;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
      }
    
      .text-compra,
      .text-venta {
        color: #003C84;
      }
    
      .valor-tipo {
        font-weight: bold;
        font-size: 1rem;
        color: #2c3e50;
      }
  
      .form-check-input[type="radio"] {
        border: 2px solid #003C84; /* Borde anaranjado */
      }
  
      .form-check-input[type="radio"]:checked {
        background-color: #003C84;
        border-color: #003C84;
      }
  
      .form-check-label {
        color: #003C84;
        font-weight: normal;
      }
  
      /* Negrita al label del radio seleccionado */
      .form-check-input[type="radio"]:checked + .form-check-label {
        font-weight: bold;
      }

      .btn-modern {
        background: linear-gradient(135deg, #00D61E, #003C84);
        color: white;
        font-weight: bold;
        border: none;
        border-radius: 12px;
        padding: 8px 16px; /* Ajuste de padding */
        box-shadow: none;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-block; /* Hace que el botón no ocupe todo el ancho */
        width: auto; /* Ancho ajustable */
        margin: 0 auto; /* Centra el botón */
      }
    
      .btn-modern:hover {
        background: linear-gradient(135deg, #003C84, #00D61E);
        box-shadow: none;
        transform: translateY(-2px);
      }
    
      .btn-modern:active {
        transform: scale(0.98);
        box-shadow: none;
      }
      .input-modern {
        border: 2px solid #e67e22 !important; /* Borde anaranjado fuerte */
        box-shadow: none; /* Sombra anaranjada suave */
        background-color: #fdfdfd;
        transition: box-shadow 0.0s ease, border-color 0.0s ease;
      }
  
      .input-modern:focus {
        border-color: #003C84 !important;
        box-shadow: none; /* Sombra más fuerte al enfocar */
      }
  
      .input-addon {
        font-weight: 600;
        border: none;
        border-left: 2px solid #e67e22;
        background-color: #000 !important;
        color: black;
      }
      .text-label {
        font-size: 0.85rem !important;   /* tamaño pequeño del texto */
        font-weight: bold !important;     /* texto en negrita */
        color: #003C84 !important;        /* azul oscuro */
      }
    
      .custom-input-group {
        border: 0px solid #002F6C;
        /*border-radius: 12px;*/
        box-shadow: none;
        overflow: hidden;
        background-color: #fffdf8;
      }
    
      .custom-input {
      border: none;
      /*border-radius: 0;*/
      padding: 10px 12px;
      font-weight: 500;
      background-color: transparent;
      color: #c75a00; /* Mismo color que "Compra" */
      font-size: 0.95rem;
      }
    
      .custom-input::placeholder {
        color: #c97c1d; /* Anaranjado suave para el placeholder */
        opacity: 0.7;
      }
    
      .custom-input:focus {
        box-shadow: none;
        outline: none;
        background-color: #E5E5E5;
        color: #4a2500; /* Aún más intenso al enfocar */
      }
    
    
      .custom-input:focus {
        box-shadow: none;
        outline: none;
        background-color: #E5E5E5;
      }
    
      .custom-addon {
        background-color: #fff0d9;
        color: #003C84;
        font-weight: bold;
        border: none;
      }
    
      .input-compra::placeholder {
        color: #1C2631; /* un tono más claro del mismo color */
        font-weight: normal;
        opacity: 0.7;
      }
    
      .btn-sin-borde {
      border: none !important;
      box-shadow: none !important;
      background-color: transparent !important;
      }
    
      .hero-bottom-waves {
        overflow: hidden;
        position: relative;
        z-index: 1;
      }
      .hero-bottom-waves img {
        filter: grayscale(20%);
        transition: all 0.3s ease;
      }
      .hero-bottom-waves img:hover {
        filter: none;
        transform: scale(1.05);
      }
            
      /* =========================
        CALCULADORA – BASE (Mobile / Tablet)
      ========================= */
      .calculadora {
        font-size: 1.1rem;
        box-shadow: 0 1px 18px rgba(0, 0, 0, 0.12),
                    0 1px 10px rgba(0, 0, 0, 0.1);
        border: 0;
        z-index: 2;
        margin-top: 2.5rem;
        padding: 0;

        width: 100%;
        max-width: 100%;
        height: auto;

        border-radius: 2rem;
        overflow: hidden;
      }
      /* =========================
        CALCULADORA – LAPTOP+
      ========================= */
      @media (min-width: 992px) {
        .calculadora {
          width: 652.256px;
          height: 326.134px;
          max-width: none;
          border-radius: 31.289px;
        }
      }
    
      
      .calculadora .tipo-cambio-box button {
        font-size: 1.1rem;
      }
    
      .calculadora label {
        font-size: 1rem;
        font-weight: bold;
      }
    
      .calculadora input.form-control {
        font-size: 1.2rem;
      }
    
      .calculadora .btn-modern {
        font-size: 1rem;
        font-weight: 600;
      }
      .btn-lima {
        background-color: #7CFC00 !important;
        color: #000 !important;
        border: none;
        font-weight: bold;
      }
    
      .btn-lima:hover {
        background-color: #6be000 !important;
        color: #000 !important;
      }
    
      @media (max-width: 576px) {
        .calculadora {
          margin-top: 0.1rem !important; /* o incluso 1rem */
        }
      }

        /* Altura base de #hero */
      #hero {
          /* Si quieres altura fija en desktop, pon aquí (ejemplo 600px), si no, auto */
          min-height: 750px;
      }

      /* Solo para pantallas pequeñas (celulares) */
      @media (max-width: 767px) {
          #hero {
          /* Aumenta la altura en 50% sobre la altura base (por ejemplo 600px) */
          /* Si no tienes altura base fija, puedes poner un valor aproximado */

          min-height: 750px; /* ejemplo: 600px * 1.5 = 900px */
          }
      }
      
      #header {
          margin-top: 0 !important;
          padding-top: 0 !important;
          top: 0px;
          box-shadow: 0px 2px 15px rgba(0, 0, 0, 0) !important;
          width: 100%;
      }

      .bg-gris-input {
          background-color: #ffffff; /* gris claro */
          padding: 0.75rem;          /* opcional, para espacio interno */
          /*border-radius: 0.375rem;*/   /* opcional, para esquinas redondeadas */
      }  

      .input-addon-fixed {
          width: 150px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      /* Opcional: adapta en móviles */
      @media (max-width: 767px) {
          .input-addon-fixed {
          width: 120px;  /* o el valor que prefieras para móvil */
          }
      }
      

      /* styles.css */
      .nav-menu {
        margin-left: auto !important;  /* Esto empuja el menú lo más a la derecha posible */
        margin-right: 120px !important;  /* margen definido desde el borde derecho */
      }
      
      .nav-menu ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu ul li {
      margin: 0 8px; /* separación entre ítems */
      }

      /* Estilos para el menú de navegación */
      .nav-menu ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .nav-menu ul li a {
        padding: 6px 10px; /* más compacto que el padding por defecto */
      }
      .nav-menu a {
        text-decoration: none;
        color: #000; /* cambia según tu diseño */
        font-weight: 500;
      }
      /* Pantallas medianas y menores (o zoom pequeño) */
      @media (max-width: 1200px) {
        #header .container {
          justify-content: center; /* logo y menú se centran juntos */
          gap: 20px;              /* separación entre logo y menú */
        }

        .nav-menu ul {
          justify-content: center;
        }
      }

      .btn-cambio {
          font-size: 10.9px !important;
          padding: 0 !important; /* eliminamos padding para controlar altura exacta */
          width: 132.110px !important;
          height: 28.575px !important;
          border-width: 0px !important;
          min-width: 80px !important;
          border-radius: 0 !important;
          border: 1px solid #003C84 !important;
          color: #003C84 !important;
          margin: 0 !important;
          text-align: center !important;
      
          padding-top: 2px !important;
          padding-bottom: 2px !important;
          line-height: 1.1 !important;
          vertical-align: middle;
      }
      
      /* Hover cuando NO está activo */
      .btn-cambio:hover:not(.active) {
          background-color: #e0e0e0 !important; /* Gris claro */
          color: black !important;
      }

      /* Hover cuando SÍ está activo */
      .btn-cambio.active,
      .btn-cambio.active:hover {
          background-color: #003C84 !important;
          color: white !important;
      }

      .btn-cambia-ahora {
          border: 3px solid #003C84 !important;
          background-color: #003C84 !important;
          color: white !important;
          border-radius: 20px !important; /* Menos curva */
          font-size: 26px !important;
          text-decoration: none !important;
          width: 257px !important;
          height: 55px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          box-sizing: border-box !important;
          margin: 20px auto 0 auto !important; /* Margen superior para separar de la cal_culadora y centrado */
          position: relative !important; /* Para controlar el z-index */
          z-index: 5 !important; /* Asegura que esté sobre la cal_culadora */
          letter-spacing: -0.035em !important;
      }




      .btn-contactanos {
          border: 3px solid #00D61E !important;
          color: #00D61E !important;
          border-radius: 17px !important;          /* Curvatura ajustada */
          font-size: 24.83px !important;
          padding: 0 !important;                   /* Quitamos padding vertical/horizontal extra */
          display: flex !important;
          align-items: center !important;          /* Centra verticalmente */
          justify-content: center !important;      /* Centra horizontalmente */
          width: 205px !important;                 /* Ancho ajustado */
          height: 47px !important;                 /* Alto ajustado */
          text-decoration: none !important;
          margin-top: 1.5rem !important;           /* Para el mt-4 */
          letter-spacing: -0.035em !important;
      }

      .btn-cambio:first-child {
          border-top-left-radius: 4.797px !important;
          border-bottom-left-radius: 4.797px !important;
      }

      .btn-cambio:last-child {
          border-top-right-radius: 4.797px !important;
          border-bottom-right-radius: 4.797px !important;
      }
      .btn-cambio.active {
          background-color: #003C84 !important;
          border-color: #003C84 !important;
          color: white !important;
      }

      .menu-link { 
          color: #003C84 !important;
          font-size: 19px !important;
          text-decoration: none !important;
          letter-spacing: -0.035em !important;
      }


      .menu-link:hover {
          color: #002b5c !important; /* Un tono más oscuro al pasar el cursor, opcional */
      }

      /* Elimina cualquier margen y padding entre filas */
  .no-gap {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Bordes de referencia (si los necesitas) */
  .border-blue {
    border: 2px solid blue;
    border-radius: 12px;
  }

  .border-green {
    border: 2px solid green;
    border-radius: 12px;
  }

  .border-purple {
    border: 2px solid purple;
    border-radius: 12px;
  }

  /* Layout y caja correcta */
  .row,
  .col-12 {
    box-sizing: border-box;
  }

  /* Fondo plomo oscuro para inputs y cajas */
  .bg-light-gray {
    background-color: #E7E7E7 !important;
    color: #000 !important;
    /*border-radius: 16px !important;*/
  }

  /* Fondo negro elegante para sección de moneda */
  .bg-black-all,
  .bg-black-all * {
    background-color: #121212 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    /*border-radius: 16px !important;*/
  }

  /* Input estilizado */
  input.form-control.input-compra {
    background-color: #E7E7E7 !important;
    color: #000 !important;
    font-weight: bold;
    font-size: 1.2rem;
    border: none;
    /*border-radius: 12px !important;*/
  }

  /* Ajustes tipográficos y eliminación de bordes */
  .moneda-grande {
    font-size: 33.99px !important; /* Tamaño de letra */
    color: #000000 !important; /* Color negro */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    background-color: transparent !important;
    letter-spacing: -0.035em !important;
  }


  /* Espaciado interior para contenedores */
  .p-2-custom {
    padding: 1rem !important;
  }

  /* Sombra para diseño moderno */
  .shadow-soft {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Redondeo en extremos */
  .rounded-start {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
  }

  .rounded-end {
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
  }

  #monedaEnvias {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #000 !important;
    padding: 0 1rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100%;
    text-align: center !important;
    line-height: normal !important;
    font-size: 1.8rem;
  }

  #monedaRecibes {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #000 !important;
    padding: 0 1rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100%;
    text-align: center !important;
    line-height: normal !important;
    font-size: 1.8rem;
  }  

  .conversion-box {
    width: 403.935px;     /* Ancho exacto */
    height: 100.965px;    /* Alto exacto */
  }

  .texto-etiqueta-importe {
    font-size: 17.72px !important; /* Tamaño de letra */
    color: #000000; /* Negro */
    margin-bottom: 0;
    margin-top: -0.5rem;
    border: 0px solid #ccc;
    padding: 2px 6px;
    display: inline-block;
    background-color: transparent !important;
    position: relative;
    top: -0.5rem;
    letter-spacing: -0.035em !important;
  }


  .texto-etiqueta-token {
    font-size: 0.9rem;
    margin-bottom: 0;               /* Elimina espacio inferior */
    margin-top: -0.5rem;            /* Súbelo más */
    border: 0px solid #ccc;
    padding: 2px 6px;
    /*border-radius: 0.375rem 0.375rem 0 0;*/ /* Redondeo arriba */
    display: inline-block;
    background-color: transparent !important;
    position: relative;
    top: -0.5rem;                  /* Subirlo visualmente */
  }

  .input-texto-importe {
    font-size: 40.43px !important; /* Tamaño de letra */
    color: #000000 !important; /* Color negro */
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 70px !important;
    top: -1.5rem;
    outline: none !important;
    letter-spacing: -0.035em !important;
  }

  .input-texto-importe:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .curva-izquierda {
    border-top-left-radius: 13.633px;
    border-bottom-left-radius: 13.633px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .curva-derecha {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 13.633px;
    border-bottom-right-radius: 13.633px;
  }

  .input-texto-importe::placeholder {
    color: #000 !important;        /* negro sólido */
    font-weight: 700 !important;   /* completamente en negrita */
    opacity: 1 !important;         /* sin transparencia */
  }  
  .valor-resaltado {
    font-weight: 700 !important;        /* Negrita */
    font-size: 13.18px !important;          /* Tamaño de letra 15px */
    color: inherit !important;           /* Mantiene el color del botón */
    letter-spacing: -0.035em !important;
  }

  .btn-intercambio {
    position: absolute;
    top: 46%;
    left: 60%;
    transform: translate(-50%, -60%);
    transition: transform 0.3s ease;
    padding: 0;
    width: 60px !important;
    height: 60px !important;
    border: 6px solid #cccccc !important; /* Gris plomo claro */
    border-radius: 50% !important;
    background-color: #00D61E !important;
    color: #ffffff;
    font-weight: bold !important;  
    font-size: 1.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.4) !important; /* Sombra más hacia arriba */
    cursor: pointer;
    z-index: 10;
    padding-top: 0px !important;
  }

  .btn-intercambio:hover {
    transform: translate(-50%, -60%) rotate(180deg);
    color: #ffffff; 
  }

  /* ✅ Cuando el botón está activo: quitar borde, mantener fondo y color */
  .btn-cambio.active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .texto-tipo-cambio {
    color: #000000;
    font-size: 15.82px;
    margin: 0;
    letter-spacing: -0.035em !important;
  }

  .tu-casa-texto {
    color: #00D61E !important;
    font-size: 105px !important;
    letter-spacing: 0em !important;
  }

  .texto-rapido-seguro {
    color: #003C84 !important;
    font-size: 16px !important;
    margin-top: 1rem !important; /* equivalente a mt-3 */
    letter-spacing: -0.035em !important;
  }

  .btn-login-divex {
      border: 3px solid #003C84 !important;
      background-color: white !important;
      color: #003C84 !important;
      border-radius: 14px !important;         /* Curvatura ajustada */
      text-decoration: none !important;
      padding: 0.25rem 1rem !important;
      display: inline-block !important;
      width: 169px !important;                /* Ancho ajustado */
      height: 39px !important;                /* Alto ajustado */
      letter-spacing: -0.035em !important;   /* Tracking aproximado -35 */
      text-align: center;                     /* Asegura que el texto esté centrado */
      line-height: 25px !important;           /* Centra verticalmente el texto dentro del botón */
  }

  .btn-login-divex:hover {
    background-color: #003C84 !important;
    color: white !important;
  }

  .btn-register-divex {
    width: 169px !important;                /* Ancho ajustado */
    height: 39px !important;                /* Alto ajustado */
    background-color: #003C84 !important;
    color: white !important;
    border: 3px solid #003C84 !important;
    border-radius: 14px !important;         /* Curvatura ajustada */
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;         /* Centra verticalmente */
    justify-content: center !important;     /* Centra horizontalmente */
    padding: 0 !important;
    text-align: center !important;
    letter-spacing: -0.035em !important;   /* Tracking aproximado -35 */
    line-height: 25px !important;           /* Centra texto verticalmente */
  }

  .btn-register-divex:hover {
    background-color: white !important;
    color: #003C84 !important;
  }

  .nav-link::before,
  .nav-link:hover::before,
  .nav-link.active::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .nav-link {
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .custom-container {
    max-width: 95%; /* o 1200px, 1400px, según lo necesites */
  }

  .linea-visible {
    position: relative;
    z-index: 1;               /* debajo del header si es necesario */
    margin-top: 100px;        /* deja espacio por el header fixed */
    width: 100%;
    height: 8px;              /* grosor de la línea */
    background-color: black;  /* color negro sólido */
  }
  .whatsapp-float {
    position: fixed !important;
    bottom: 10px !important; /* 20px original + 2 cm (75.6px) */
    right: 20px !important;
    width: 66.813px !important;
    height: 66.813px !important;
    background-color: #25D366 !important; /* verde WhatsApp */
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000 !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .whatsapp-float img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  .logo-img {
    width: 141.325px !important;   /* le dices el ancho que quieres */
    height: 45.482px !important;    /* la altura se calcula sola */
  }

  #header .container {
    display: flex;
    justify-content: space-between; /* Logo a la izq, menú a la der */
    align-items: center;
    width: 100%;
  }

  #logotipo {
    margin-left: 145.359px;
    padding-left: 0 !important;
  }

  /* Logo Configuración Probada*/
  #logotipo img {
    width: 140px !important;   /* ancho fijo */
    height: auto;              /* mantiene la proporción */
    max-height: 40px;          /* opcional: límite de altura si quieres */
  }


  #logotipo img.logo-img {
    max-height: 50px; /* ajusta según tu diseño */
    height: auto;
  }

  #logotipo,
  .nav-menu {
      display: flex;
      justify-content: center;
  }


  #header {
    margin: 0;
    padding: 0;
  }

  #header .container {
    margin: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important; /* Importante para que no se centre */
  }
  
  .hero-section {
      padding-top: 80px;
      padding-left: 0px !important;
      margin-left: 0;
      background-image: url("/assets/img/fondos/fondo-web.png") !important;
      background-position: center 80%; /* mueve el fondo hacia abajo */
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-attachment: scroll !important;
      min-height: 110vh !important;
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      position: relative;
  }
  /* Imágenes que “cruzan” entre secciones */
  /* Contenedor principal */
  .hero-container {
    margin-top: 1cm; /* lo puedes mantener si lo quieres */
  
    /* En lugar de pegarlo a la izquierda, centramos */
    margin-left: auto !important;
    margin-right: auto !important;
  
    /* Mejor usar un ancho controlado (igual al footer) */
    max-width: 1250px; /* o 95% como tu .custom-container */
    padding-left: 15px;  /* no quitarlo, para mantener alineación bootstrap */
    padding-right: 15px;
  }
  
  /* Fila flex */
  .hero-row {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Columna izquierda texto y botón */
  .hero-left-col {
    margin-left: 0 !important; /* Elimina el margin-left: 2rem inline */
    padding-left: 0 !important;
  }



  .intersection-images {
    position: absolute;
    bottom: -5%;              /* quedan saliendo un poco del hero */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2vw;
    z-index: 9999;
  
    height: 150px;            /* altura del bloque */
    width: auto;
    pointer-events: none;     /* evita que bloqueen clics */
    overflow: hidden;         /* seguridad extra */
  }
  
  .intersection-images img {
    height: 80%;              /* ajusta proporción vertical */
    width: auto;              /* mantiene proporción horizontal */
    object-fit: contain;      /* evita deformación */
  }
    
  #header nav.nav-menu {
    margin: 0 auto; /* elimina el margin fijo que empujaba */
    display: flex;
    justify-content: center; /* centra el nav dentro del header */
  }

  footer .container {
    padding-left: 2.5cm;
    padding-top: 1.5cm;
  }

  .footer-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-text::before {
    content: "";
    position: absolute;
  
    /* mantiene tu posición vertical original */
    top: 0;
    transform: translateY(calc(50% + 15px)) !important;
  
    /* centro horizontal perfecto */
    left: 0;
    right: 0;
    width: 95%;        /* ajusta aquí la longitud de la línea (px o %) */
    margin: 0 auto;    /* esto centra la línea con márgenes iguales a izquierda/derecha */
    margin-left: -15px;
    height: 1px;
    background-color: #ccc;
    z-index: 1;
  }
  
  html, body {
    overflow-x: hidden;
  }

  .footer-text .logo {
    position: relative;
    z-index: 2;
    /* Eliminamos fondo blanco y padding */
  }

  p.title {
    margin-bottom: 4px; /* o 0 si quieres que estén muy juntos */
  }

  p.title + p {
    margin-top: 0;
  }

  .footer-heading {
    font-size: 21px;
    color: #FFFFFF;
    letter-spacing: -0.035em; /* tracking 35 */
    margin-bottom: 4px; /* espacio con el siguiente párrafo */
  }  

  .footer-subtext {
    font-size: 17px;
    color: #FFFFFF;           /* Pantone FFFFFF = blanco puro */
    letter-spacing: -0.035em;  /* tracking 35 */
    margin: 0;                /* opcional: evitar espacios innecesarios */
  }

  .footer-bottom-divex {
    font-size: 15px;
    color: #FFFFFF;           /* Pantone FFFFFF = blanco puro */
    letter-spacing: -0.035em;  /* tracking 35 */
    margin: 0;                /* opcional: evitar espacios innecesarios */
  }  

  #hero {
    position: relative;
    z-index: 30;
    overflow: visible; /* Permite que se vean fuera */
  }

  #slidersection {
    position: relative;
    z-index: 1;
    overflow: visible;   /* evita que recorte las imágenes */
    display: flex;
    justify-content: center; /* centra horizontalmente */
    align-items: center;     /* centra verticalmente si quieres */
    /*background: transparent;*/ /* fondo transparente */
    background: rgba(255, 255, 255, 0.6);
  }


 

  /* Contenedor de la sección */
  #instruccionnew {
    background: #ffffff !important;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin: 0 !important;              /* ❌ eliminamos márgenes laterales */
    width: 100vw !important;           /* ocupa todo el ancho de la ventana */
    min-height: 110vh !important;      /* Sección ocupa toda la altura */
    background: rgba(255, 255, 255, 0.6) !important;   
  }


  /* Contenedor principal interno */
  .instructionnew .container {
      border: 0px solid red;
      /*background: transparent;*/
      padding-left: 3rem;
      padding-right: 3rem;
  }

  /* Filas comunes */
  .fila-comun {
      height: 200px;
      margin-bottom: 1rem;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /* Fila 1 */
  #row1 {
      height: 120px;
  }

  /* Columnas comunes */
  .columna-comun {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  #row2-col2 {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }


  #row2-col2-div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* mantiene los textos arriba dentro del div */
    align-items: flex-start !important;
    height: auto !important;                /* 👈 evita forzar altura */
    padding-left: 0 !important;
    padding-top: -40px !important;          /* 👈 mueve todo el bloque hacia abajo */
    margin: 0 !important;
    gap: 0 !important;
  }
  

  
  #row4-col2-div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* 👈 cámbialo a flex-start */
    align-items: flex-start !important;
    height: auto !important;               /* 👈 evita que tome todo el alto */
    padding-left: 10px !important;
    padding-top: 170px !important;         /* 👈 ahora sí los baja */
    gap: 2px !important;
  }
  
  

  #row4-col2 {
    display: block !important; /* Quitamos el flex y centrado del padre */
    padding: 0 !important;     /* Opcional: elimina padding interno */
  }
  /* Aplica a todos los spans dentro del div */
  #row2-col2-div span {
      margin: 0 !important;       /* Elimina márgenes por defecto */
      line-height: 1 !important;  /* Reduce el espacio vertical */
  }
  /* Aplica a todos los spans dentro del div */
  #row3-col2 {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #row3-col2-div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    padding-left: 106px !important; /* O la cantidad que necesites */
    padding-top: 80px !important;   /* 👇 Mueve hacia abajo */
  }
  
  #row3-col2-div span {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }



  
    /* Aplica a todos los spans dentro del div */
  #row4-col2-div span {
    margin: 0 !important;       /* Elimina márgenes por defecto */
    line-height: 1 !important;  /* Reduce el espacio vertical */
  }
  /* Estilos de color y tamaño */
  .text-green {
      color: #00D51E !important;
      font-weight: bold !important;
      font-size: 63px !important;
      letter-spacing: -0.035em !important;
  }

  .text-plomo {
    color: #7f817f;
    font-weight: bold !important;
    font-size: 63px !important;
    letter-spacing: -0.035em !important;
  }

  .img-custom-nosotros {
    border-radius: 30px !important;       /* 👈 redondea esquinas */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important; /* 👈 sombra elegante */
    max-width: 800px !important;           /* 👈 ancho máximo */
    width: 100% !important;               /* 👈 responsive */
    height: auto !important;               /* mantiene proporción */
  }
  

  #row2-col2-div .text-green,
  #row4-col2-div .text-green {
      display: inline-block !important;       /* Para que funcione transform */
      transform: translateX(0.5cm) !important; /* Desplaza 0.5cm a la derecha */
  }

  #row2-col2-div .text-plomo,
  #row4-col2-div .text-plomo {
      display: inline-block !important;       /* Para que funcione transform */
      transform: translateX(0.5cm) !important; /* Desplaza 0.5cm a la derecha */
  }

  .text-grey {
      color: #808080 !important;
      font-size: 63px !important;
      letter-spacing: -0.035em !important;
      font-weight: 300;
      font-size: 40px;
      display: block;
  
    }

  /* Inicialmente los spans grises están ocultos */
  #row2-col2 .text-grey,
  #row3-col2 .text-grey,
  #row4-col2 .text-grey {
      opacity: 0 !important;
      transition: opacity 0.3s ease;
  }

  /* Fila 2: aparece al pasar mouse por la primera columna */
  #row2-col1:hover ~ #row2-col2 #row2-col2-div .text-grey {
      opacity: 1 !important;
  }

  /* Fila 3: aparece al pasar mouse por la primera columna */
  #row3-col1:hover ~ #row3-col2 #row3-col2-div .text-grey {
      opacity: 1 !important;
  }

  /* Fila 4: aparece al pasar mouse por la primera columna */
  #row4-col1:hover ~ #row4-col2 #row4-col2-div .text-grey {
      opacity: 1 !important;
  }

 /* Mostrar cuando paso sobre Cotiza */
  #row2-col2-div span.text-green:hover + span.text-grey {
    opacity: 1 !important;
  }
  #row2-col2-div span.text-plomo:hover + span.text-grey {
    opacity: 1 !important;
  }

   /* Mostrar cuando paso sobre Cotiza */
   #row3-col2-div span.text-green:hover + span.text-grey {
    opacity: 1 !important;
  }

  #row3-col2-div span.text-plomo:hover + span.text-grey {
    opacity: 1 !important;
  }  

   /* Mostrar cuando paso sobre Cotiza */
   #row4-col2-div span.text-green:hover + span.text-grey {
    opacity: 1 !important;
  }  

  .instructionnew {
    transform: scale(0.85);   /* Reduce al 70% */
    transform-origin: top center; /* Desde dónde se "encoge" (ajústalo según necesites) */
  }
  
  .slidersection-section {
    padding-top: 40px;      /* Más espacio arriba */
    padding-bottom: 40px;   /* Más espacio abajo */
    min-height: 600px;     /* Altura mínima (crecerá si el contenido es mayor) */
    border-radius: 8px;     /* Opcional: esquinas redondeadas */
  }
  
  /* Baja los slides dentro de la sección */
  #slidersection .splide {
    margin-top: 90px;   /* Ajusta este valor según lo que necesites */
  }
  
    footer .container {
    padding-left: 2.5cm;
    padding-top: 1.5cm;
  }

  .footer-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-text::before {
    content: "";
    position: absolute;

    /* Línea centrada verticalmente con respecto al logo, no al footer */
    top: 0; /* iniciamos en la parte superior del contenedor */
    transform: translateY(calc(50% - 8px)); /* ajustar para alinearse al centro del logo */
    
    left: 0;
    right: 0;
    height: 1px;
    background-color: #ccc;
    z-index: 1;
  }

  .footer-text .logo {
    position: relative;
    z-index: 2;
    /* Eliminamos fondo blanco y padding */
  }

  p.title {
    margin-bottom: 4px; /* o 0 si quieres que estén muy juntos */
  }

  p.title + p {
    margin-top: 0;
  }

  .footer-heading {
    font-size: 21px;
    color: #FFFFFF;
    letter-spacing: -0.035em; /* tracking 35 */
    margin-bottom: 4px; /* espacio con el siguiente párrafo */
  }  

  .footer-subtext {
    font-size: 17px;
    color: #FFFFFF;           /* Pantone FFFFFF = blanco puro */
    letter-spacing: -0.035em;  /* tracking 35 */
    margin: 0;                /* opcional: evitar espacios innecesarios */
  }

  .footer-bottom-divex {
    font-size: 15px;
    color: #FFFFFF;           /* Pantone FFFFFF = blanco puro */
    letter-spacing: -0.035em;  /* tracking 35 */
    margin: 0;                /* opcional: evitar espacios innecesarios */
  }  

  #hero {
    position: relative;
    z-index: 30;
    overflow: visible; /* Permite que se vean fuera */
  }

  #slidersection {
    position: relative;
    z-index: 1;
    overflow: visible; /* Evita que recorte las imágenes */
  }

  .footer-espacios-vertical {
    margin-bottom: 12px; /* aprox. 3 mm en pantalla */
  }
  .footer-espacios-botoom {
    margin-bottom: 2mm !important; /* espacio entre los dos <p> */
  }
  .slide-espacios-botoom {
    margin-bottom: 2mm !important; /* espacio entre los dos <p> */
  }

  .fila-superior-slide {
    margin-bottom: 2mm; /* espacio debajo del primer <p> */
  }

  .texto-slide-25 {
    margin-top: 0; /* eliminamos espacio extra arriba */
  }
  
  .text-derecha-espacio {
    display: inline-block;
    transform: translateX(6mm);
  }


  /* Espaciado normal para desktop/laptop */
  footer ul li:nth-child(4) .footer-subtext,
  footer ul li:nth-child(5) .footer-subtext {
      display: inline-block;       /* para que los enlaces queden separados en desktop */
      margin-bottom: 8px;          /* espacio vertical que antes daba el <br> */
  }

  #footer-bottom .logo{
      max-width: 120px;
      width: 100%;
      height: auto;
  }