/* =====================================================
   BREAKPOINT PRINCIPAL – MOBILE (≤576px)
   ===================================================== */
@media (max-width: 576px) {
  .mobile-nav a{
    border: 0 !important;
    background-color: transparent !important;
    color: #003C84 !important;
    padding: 10px 20px !important;
  }
  .btn-login-divex, .btn-register-divex {
    width: auto !important;
    padding: 0.25rem 1rem !important;
    display: inline-block !important;
  }
  .fila-superior {
    flex-direction: column;
    margin: auto !important;
  }
  #logotipo {
    margin-left: 30px;
  }
  
  #logotipo img.logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
  }

  /*#logotipo img.logo-img {
      max-height: 50px;
      padding: 11px;
      width: 100% !important;
      height: 100% !important;
  }*/
  /* =====================================================
     HERO – ESTRUCTURA GENERAL
     ===================================================== */
  #hero {
    position: relative !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    padding-top: 1rem;
    min-height: auto !important;
    height: auto !important;
  }

  #hero .hero-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-right: 0;
  }

  .hero-left-col {
    width: 100%;
    order: 1;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
  }

  #hero .col-lg-6:not(.hero-left-col) {
    width: 100%;
    order: 2;
    margin-top: 0.2rem;
  }

  /* =====================================================
     BOTONES HERO
     ===================================================== */
  #hero .btn-contactanos {
    font-size: 0.85rem !important;
    margin: auto;
  }

  .btn-cambia-ahora {
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 12px !important;
    letter-spacing: -0.02em !important;
    position: relative !important;
    top: -2rem !important;
  }

  /* =====================================================
     TEXTOS HERO
     ===================================================== */
  .texto-rapido-seguro {
    font-size: 0.5rem;
    line-height: 1.3;
    margin-right: 0;
  }

  .tu-casa-texto {
    font-size: 2rem !important;
    line-height: 0.6 !important;
  }

  .tu-casa-texto br {
    display: none;
  }

  p.texto-tipo-cambio {
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
  }

  /* =====================================================
     CALCULADORA – LAYOUT Y ORDEN
     ===================================================== */
  #hero .row.g-0 {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0;
  }

  #hero .row.g-0 > .col-lg-6:nth-of-type(1) { order: 1; }
  #hero .row.g-0 > .col-lg-4:nth-of-type(2) { order: 2; }
  #hero .row.g-0 > .col-lg-6:nth-of-type(3) { order: 3; }
  #hero .row.g-0 > .col-lg-4:nth-of-type(4) { order: 4; }

  #hero .col-lg-6.col-md-6.col-sm-6 {
    flex: 0 0 45% !important;
    max-width: 45% !important;
  }

  #hero .col-lg-4.col-md-6.col-sm-6 {
    flex: 0 0 35% !important;
    max-width: 35% !important;
  }

@media (max-width: 576px) {

    .conversion-box {
        width: 100% !important;
        height: 70px !important;
        min-height: 70px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }




  .conversion-box .bg-light-gray {
    padding: 15px 0 0 6px !important;
  }

  .texto-etiqueta-importe {
    font-size: 12px !important;
    height: 10px !important;
    margin-bottom: 4px !important;
  }

  .input-texto-importe {
    height: 20px !important;
    padding: 5px 0 0 6px !important;
    font-size: 20px !important;
    margin-top: 24px !important;
  }

  #valini,
  #valfin {
    margin-top: 20px !important;
  }

  .moneda-grande {
    font-size: 1rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #btnIntercambiar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
    top: 42% !important;
    left: 55% !important;   /* 👈 mueve hacia la izquierda */    
   }
  /* =====================================================
     IMÁGENES BANCOS
     ===================================================== */
  .intersection-images {
    width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 4px 0 !important;
    position: relative;
  }

  .intersection-images img {
    width: 95% !important;
    max-width: 320px !important;
    min-width: 200px !important;
    margin: 4px auto !important;
  }

  /* =====================================================
     SLIDER
     ===================================================== */
  





  #slidersection {
    margin-top: -32px !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
  }

  /* ===============================
     CONTENEDOR DEL SLIDER
     =============================== */
  #slidersection .slider {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 0;
  }

  #slidersection .splide {
    width: 100% !important;
    padding: 0 !important;
    margin-top: 30px;
  }

  #slidersection .splide__track {
    width: 100% !important;
    overflow: hidden !important;
  }

  /* ===============================
     SLIDES (UNO A LA VEZ)
     =============================== */
  #slidersection .splide__slide {
    width: 100% !important;
    flex: 0 0 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    padding: 6px !important;
    box-sizing: border-box !important;
  }

  /* ===============================
     CONTENIDO INTERNO (MÁS ANCHO)
     =============================== */
  #slidersection .slide-content,
  #slidersection .bloque-contenido {
    width: 100% !important;
    max-width: 460px !important;   /* ancho óptimo mobile */
    padding-left: 2px !important;
    padding-right: 8px !important;

    margin: 0 auto !important;
    text-align: center !important;
  }

  /* ===============================
     TEXTOS
     =============================== */
  .texto-34 {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .texto-44 {
    font-size: 14px !important;
  }

  .texto-35 {
    font-size: 18px !important;
  }

  .texto-25 {
    font-size: 12px !important;
    line-height: 0.85 !important;
  }

  .texto-24 {
    font-size: 11px !important;
    line-height: 0.85 !important;
  }  

  .texto-16 {
    font-size: 11px !important;
  }
  
  .texto-17 {
    font-size: 11px !important;
  }
  /* ===============================
     IMÁGENES
     =============================== */
  #slidersection img {
    max-width: 85% !important;
    height: auto !important;
    display: block !important;
    margin: 1px auto !important;
  }

  /* Imagen grande (fintech) */
  #slidersection .splide__slide:last-child img {
    max-width: 90% !important;
  }

  /* ===============================
     LIMPIEZA DE ESPACIADOS BOOTSTRAP
     =============================== */
  #slidersection .mt-4 {
    margin-top: 8px !important;
  }

  #slidersection .mt-3 {
    margin-top: 6px !important;
  }

  #slidersection .mt-2 {
    margin-top: 4px !important;
  }

/* Contenedor del bloque WhatsApp */
  .button_link_div {
    text-align: left !important;
  }

  /* Línea del número + ícono */
  .whatsapp-text {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;

    margin-left: 0 !important;    /* CLAVE */
    padding-left: 0 !important;   /* CLAVE */
  }

  /* Ícono WhatsApp */
  .whatsapp-text img,
  .img-left {
    margin-left: 0px !important;    /* CLAVE */
    margin-right: 1px !important; /* separación mínima */
    padding: 1px !important;
  }

  #slidersection .container {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Slide específico de "Registrados" */
  #slidersection .splide__slide.text-inline {
    display: flex !important;
    flex-direction: column !important;   /* CLAVE */
    align-items: center !important;      /* centra horizontal */
    justify-content: center !important;
    text-align: center !important;
  }

  /* Texto "Registrados en:" */
  #slidersection .splide__slide.text-inline p {
    margin-bottom: 6px !important;       /* pequeño espacio */
  }

  /* Imagen SUNAT debajo del texto */
  #slidersection .splide__slide.text-inline img {
    display: block !important;
    max-width: 80% !important;           /* tamaño mobile */
    height: auto !important;

    margin: 0 auto !important;           /* centrado real */
  }

  /* SLIDE FINTECH – solo este */
  #slide-fintech {
    width: 100vw !important;
    flex: 0 0 100vw !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Permitir que no se recorte */
  #slidersection .splide__track {
    overflow: visible !important;
  }

  /* IMAGEN FINTECH GRANDE */
  #slide-fintech .img-fintech {
    width: 100vw !important;       /* casi todo el ancho del móvil */
    max-width: 100vw !important;
    height: auto !important;

    display: block !important;
    margin: 0 auto !important;
  }

    /* Slider principal */
    #slidersection {
        padding-top: 1rem !important;   /* reduce espacio superior */
        padding-bottom: 2rem !important; /* reduce espacio inferior */
        min-height: auto !important;     /* evita que la sección tenga altura forzada */
    }

    /* Contenido del slider */
    #slidersection .slide-content {
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
    }


/* =====================================================	
   SECCIÓN ¿CÓMO FUNCIONA? – MOBILE (OPTIMIZADA)
   ===================================================== */

  /* ===== SECCIÓN GENERAL ===== */
  #instruccionnew {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* ===== TÍTULO ===== */
  #instruccionnew .title-section {
    font-size: 32px !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  #imagencambio {
    height: 380px !important;               /* altura mobile */
    background-size: 85% auto !important;  /* tamaño imagen */
    background-position: -40% center !important; /* ← mueve a la izquierda */
  }

  /* ===== FILAS ===== */
  .fila-comun {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    margin-bottom: 8px !important;
  }

  /* ===== COLUMNAS ===== */
  .columna-comun {
    width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    text-align: center !important;
  }

  /* Ocultar columnas vacías */
  #row2-col1,
  #row3-col1,
  #row4-col1 {
    display: none !important;
  }

  /* ===== CONTENIDO DE TEXTO ===== */
  #row2-col2,
  #row3-col2,
  #row4-col2 {
    width: 100% !important;
  }

  #row2-col2-div,
  #row3-col2-div,
  #row4-col2-div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;   /* LIGERAMENTE A LA DERECHA */

    text-align: left !important;
    padding-left: 18% !important;         /* DESPLAZAMIENTO CONTROLADO */

    gap: 2px !important;
  }

  /* ===== POSICIÓN INDIVIDUAL DE CADA PASO ===== */

  /* COTIZA (ARRIBA) */
  #row2 {
    margin-top: -12px !important;
  }

  /* TRANSFIERE (SUBIDO) */
  #row3 {
    margin-top: -28px !important;
  }

  /* RECIBE (SUBIDO AÚN MÁS) */
  #row4 {
    margin-top: -44px !important;
  }

  /* ===== TEXTOS ===== */
  .texto-50 {
    font-size: 20px !important;
    line-height: 0.8 !important;
  }

  .text-derecha-espacio {
    margin-left: 0 !important;
  }
  /* ==================================
     AJUSTE FINO: COTIZA
     ================================== */
  #row2-col2-div {
    padding-left: 66% !important;   /* un poco más a la derecha */
    margin-top: -30px !important;    /* un poco más arriba */
  }

  /* ==================================
     AJUSTE FINO: TRANSFIERE
     ================================== */
  #row3-col2-div {
    padding-left: 112% !important;   /* a la derecha */
    margin-top: -140px !important;   /* sube más que Cotiza */
  }

  /* ==================================
     AJUSTE FINO: RECIBE
     ================================== */
  #row4-col2-div {
    padding-left: 66% !important;   /* a la derecha */
    margin-top: -250px !important;   /* sube aún más */
  }




    /* Sección de instrucciones */
    #instruccionnew .fila-comun {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Ajuste para imágenes grandes */
    #instruccionnew .columna-comun div img {
        max-width: 100% !important;
        height: auto !important;
    }

    img#whatsapp-icon {
        display: none !important;
    }




}

/* =====================================================
   BREAKPOINT TABLET (≤768px)
   ===================================================== */
@media (max-width: 768px) {

  .texto-rapido-seguro {
    font-size: 0.5rem;
  }

  #slidersection {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
    min-height: auto !important;
  }

  #instruccionnew {
    min-height: unset !important;
    max-height: 510px !important;
  }
}

/* Estilo para móviles */
@media (max-width: 768px) {

  #logotipo {
    display: flex;
    justify-content: center; /* centra horizontalmente */
    align-items: center;
    width: 100%;
  }

  #logotipo img {
    max-width: 100%;
    height: auto;
  }

}

@media (max-width: 991px) {

  #header {
    position: relative;
  }

  #logotipo {
    position: absolute !important;
    left: 50% !important;
    top: 4px !important;          /* 👈 baja el logo */
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  #logotipo img {
    display: block;
    margin: 0 auto !important;
  }

} 



}