/* ========================= AVAL FOOTER (CLEAN) ========================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- Base ---------- */
footer.aval-footer{
  color:#fff;
  width:100%;
  font-family:'Plus Jakarta Sans', Arial, sans-serif;
  background:#1A356C;
  box-sizing:border-box;
  overflow:visible;
}

/* Wrapper principal */
footer.aval-footer .aval-footer__content{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  box-sizing:border-box;
  justify-content:space-between;
  margin:0 auto;
  padding:50px 50px 40px; /* +10px abajo para que nunca “toque” la franja */
  align-items:flex-start;
}

/* Columnas */
.aval-footer__col-left{   flex:0 0 24%; margin-bottom:25px; }
.aval-footer__col-center{ flex:0 0 28%; }
.aval-footer__col-right{
  display:flex; flex-direction:column; align-items:center;
  margin-top:0; padding-top:0;
}

/* Títulos de sección */
.aval-footer__section h4{
  font-weight:700; font-size:14px; line-height:1.1; letter-spacing:0;
  margin:0 0 24px; color:#fff; display:block;
}

/* Listas */
.aval-footer__section ul{
  list-style:none; padding:0; margin:6px 0 18px; color:#fff;
}
.aval-footer__section ul li{
  font-size:14px; line-height:1.5; margin-bottom:12px; cursor:pointer; color:#fff;
}
.aval-footer__section ul li:hover{ text-decoration:underline; }

/* Contacto (bloques) */
.aval-footer__section.aval-footer__contact p{ font-size:14px; line-height:1.5; margin:0 0 12px; }
.aval-footer__section.aval-footer__contact .aval-footer__contact-block + .aval-footer__contact-block{ margin-top:12px; }

/* Botón “Regístrate” */
.aval-footer__btn--registro{
  background:#D52B1E; color:#fff; border:none; border-radius:10px 0 10px 10px;
  padding:5px 40px 5px 15px; /* deja hueco a la flecha */
  font-weight:400; font-size:14px; line-height:1.1;
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  width:50%; min-width:170px; max-width:320px;
  margin:0 0 40px; box-shadow:0 2px 8px rgba(0,0,0,.2);
  position:relative; overflow:hidden; transition:.2s background-color ease;
}
.aval-footer__btn--registro:hover{ background:#f04c3f; }
.aval-footer__btn-icon{
  width:18px; height:18px; filter:brightness(0) invert(1);
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
}

/* Logos / Social */
.aval-footer__social{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  width:100%; gap:22px; margin:20px auto 0; padding:0; text-align:center;
}
.aval-footer__social > div{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex:0 0 40px;
}
.aval-footer__social a{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; text-decoration:none; }
.aval-footer__social img{ width:22px; height:22px; object-fit:contain; transition:opacity .2s ease; }
.aval-footer__social a:hover img{ opacity:.85; }

/* Franja inferior */
.aval-footer__bottom{
  width:100%;
  background:#0065C1;
  display:flex; align-items:center; justify-content:center;
  padding:20px 0; box-sizing:border-box;
}
.aval-footer__bottom p{
  margin:0; text-align:center; white-space:nowrap; line-height:1.1;
}

/* ---------------- Desktop layout exacto (sin alturas fijas) ---------------- */
@media (min-width:1200px){
  footer.aval-footer .aval-footer__content{
    max-width:1440px; margin:0 auto;
    padding:30px 65px 40px;      /* 30/65/40/65 → siempre deja aire antes de la franja */
    min-height:324px;            /* NUNCA height fija */
  }
  .aval-footer__bottom p{ max-width:1440px; padding:0 65px; }
}

/* ---------------- Tablet / Mobile ---------------- */
@media (max-width:992px){
  .aval-footer__content{ flex-direction:column; align-items:center; padding:30px 10px; }
  .aval-footer__col-left, .aval-footer__col-center, .aval-footer__col-right{
    flex:0 0 100% !important; max-width:100%; margin-bottom:28px; text-align:left;
  }
  .aval-footer__btn--registro{ width:100%; margin-left:0; margin-right:0; }
}

@media (max-width:674px){
  .aval-footer__social{ gap:20px; }
}

@media (max-width:576px){
  .aval-footer__content{ padding:18px 5px 26px; align-items:center; }
  .aval-footer__section{ width:100%; text-align:center; margin-bottom:22px; }
  .aval-footer__section h4{ font-size:15px; margin-bottom:18px; }
  .aval-footer__section ul{ margin:4px 0 16px; }
  .aval-footer__section ul li{ font-size:13px; margin-bottom:2px; }

  /* botón chico solicitado (105x34) */
  .aval-footer__col-left .aval-footer__btn--registro{
    width:105px; max-width:105px; height:34px; min-height:34px;
    font-size:11px; padding:5px 24px 5px 12px; margin:8px 0 14px 0;
    text-align:left; justify-content:center;
  }
  .aval-footer__col-left .aval-footer__btn--registro .aval-footer__btn-icon{
    right:8px; width:14px; height:14px;
  }

  /* Contacto alineado a la izquierda con inset */
  .aval-footer__section.aval-footer__contact{
    text-align:left !important; padding-left:38px !important; margin-top:18px !important;
  }
  .aval-footer__section.aval-footer__contact h4{ margin-bottom:14px !important; }
  .aval-footer__section.aval-footer__contact .aval-footer__contact-block,
  .aval-footer__section.aval-footer__contact p,
  .aval-footer__section.aval-footer__contact span{
    margin:0 0 8px 0 !important; line-height:1.45 !important; word-break:break-word;
  }

  /* copyright tipografía requerida */
  .aval-footer__bottom p{
    font-family:'Work Sans',sans-serif; font-weight:400; font-size:10px; letter-spacing:0;
  }

  /* safe-area iPhone */
  .aval-footer__bottom{ padding-bottom:calc(15px + env(safe-area-inset-bottom)); }
}

/* Pequeños refinamientos */
@media (max-width:390px){
  .aval-footer__col-left .aval-footer__btn--registro{ font-size:10.5px; }
}
@media (max-width:320px){
  .aval-footer__social{ gap:16px; }
  .aval-footer__social img{ width:18px; height:18px; }
}

/* Imagen vertical “Vigilado” si la usan en absoluto, que no interfiera */
.aval-footer__vertical{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:25px; padding:10px 0; z-index:1; pointer-events:none; }
.aval-footer__vertical img{ width:90%; height:auto; max-height:330px; }
/* ===================== PARCHE FINAL FOOTER ===================== */
/* 1) Fuerza color blanco coherente en todo el footer (incluye visited/hover) */
footer.aval-footer,
footer.aval-footer * { color:#fff !important; }
footer.aval-footer a:link,
footer.aval-footer a:visited,
footer.aval-footer a:hover,
footer.aval-footer a:active { color:#fff !important; text-decoration:none; }
footer.aval-footer .aval-footer__section ul li:hover a { text-decoration:underline; }

/* 2) Contenedor desktop: centrado 1440 y padding de diseño */
@media (min-width:1200px){
  footer.aval-footer .aval-footer__content{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:1440px !important;
    margin:0 auto !important;
    padding:30px 65px 56px 65px !important; /* +56px abajo para NO pisar el bottom */
    min-height:324.068px !important;
  }
}
/* En >=1440, coincide exacto con el mock */
@media (min-width:1440px){
  footer.aval-footer .aval-footer__content{
    width:1440px !important;
    height:324.068px !important;
  }
}

/* 3) Redes centradas siempre */
footer.aval-footer .aval-footer__col-right .aval-footer__social{
  width:100% !important; max-width:100% !important;
  display:flex !important; flex-wrap:wrap !important;
  justify-content:center !important; align-items:center !important;
  gap:22px !important; margin:20px auto 0 !important; padding:0 !important;
}
footer.aval-footer .aval-footer__col-right .aval-footer__social > div{
  width:40px !important; height:40px !important; flex:0 0 40px !important;
  display:flex !important; justify-content:center !important; align-items:center !important;
}
footer.aval-footer .aval-footer__col-right .aval-footer__social a{
  display:flex !important; width:100% !important; height:100% !important;
  justify-content:center !important; align-items:center !important;
}
footer.aval-footer .aval-footer__col-right .aval-footer__social img{
  width:22px !important; height:22px !important; object-fit:contain !important;
}

/* 4) Evitar desalineos entre columnas (por estilos externos) */
.aval-footer__content{ align-items:flex-start !important; }
.aval-footer__col-right{ margin-top:0 !important; padding-top:0 !important; }
.aval-footer__col-left, .aval-footer__col-center{ margin-top:0 !important; padding-top:0 !important; }
.aval-footer__section, .aval-footer__section h4{ margin-top:0 !important; }

/* 5) Más aire bajo los títulos (sin pegarse al primer <li>) */
footer.aval-footer .aval-footer__section h4{ margin:0 0 24px !important; line-height:1.1 !important; }
footer.aval-footer .aval-footer__section > ul{ margin-top:6px !important; }

/* 6) Barra inferior: centrada, una sola línea y sin recortes */
footer.aval-footer .aval-footer__bottom{
  display:flex !important; justify-content:center !important; align-items:center !important;
  padding:20px 0 !important; background-color:#0065C1 !important; position:relative;
}
footer.aval-footer .aval-footer__bottom p{
  margin:0 !important; text-align:center !important; white-space:nowrap !important; line-height:1.1 !important;
}

/* Tipografía exacta del bottom en móvil (según mock) */
@media (max-width:576px){
  footer.aval-footer .aval-footer__bottom p{
    font-family:'Work Sans', sans-serif !important; font-weight:400 !important;
    font-size:10px !important; letter-spacing:0 !important;
  }
}

/* 7) Botón “Regístrate” – EXACTO en móvil (105×34.07) */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* evita reescalado iOS/Android */
@media (max-width:576px){
  footer.aval-footer .aval-footer__col-left a.aval-footer__btn--registro{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    box-sizing:border-box !important; color:#fff !important;

    width:105px !important; max-width:105px !important;
    height:34.07px !important; min-height:34.07px !important;

    font-size:11px !important; line-height:1.1 !important; white-space:nowrap !important;

    padding:5px 24px 5px 12px !important;      /* deja hueco para la flecha */
    border-top-left-radius:10px !important;
    border-bottom-right-radius:10px !important;
    border-bottom-left-radius:10px !important;

    margin:8px 0 14px 0 !important; text-align:left !important;
    position:relative !important; overflow:hidden !important;
  }
  footer.aval-footer .aval-footer__col-left a.aval-footer__btn--registro .aval-footer__btn-icon{
    position:absolute !important; right:8px !important; top:50% !important;
    transform:translateY(-50%) !important; width:14px !important; height:14px !important; margin:0 !important;
    pointer-events:none;
  }
}

/* 8) Ajustes finos responsive */
@media (max-width:1200px){ footer.aval-footer .aval-footer__col-right .aval-footer__social{ gap:20px !important; } }
@media (max-width:768px){
  footer.aval-footer .aval-footer__col-right .aval-footer__social{ gap:18px !important; }
  footer.aval-footer .aval-footer__col-right .aval-footer__social img{ width:20px !important; height:20px !important; }
}
@media (max-width:480px){
  footer.aval-footer .aval-footer__col-right .aval-footer__social{ gap:16px !important; }
  footer.aval-footer .aval-footer__col-right .aval-footer__social img{ width:18px !important; height:18px !important; }
}

/* 9) Seguridad: evita que la barrita “Vigilado” interfiera */
footer.aval-footer .aval-footer__vertical{ pointer-events:none; }
/* ================== FIXES FINALES FOOTER ================== */

/* 0) Seguridad: todo en blanco dentro del footer */
footer.aval-footer,
footer.aval-footer * { color:#fff !important; }

/* 1) BOTÓN – móvil EXACTO: 105 × 34 px + radios y padding pedido */
@media (max-width: 576px){
  footer.aval-footer .aval-footer__col-left a.aval-footer__btn--registro{
    display:inline-flex !important;
    align-items:center !important;
    position:relative !important;
    box-sizing:border-box !important;

    width:105px !important;
    max-width:105px !important;
    min-width:105px !important;

    height:34px !important;               /* 34.07 redondeado */
    min-height:34px !important;

    font-size:11px !important;
    line-height:1.1 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;

    padding:5px 24px 5px 12px !important;  /* hueco para flecha a la derecha */

    border-top-left-radius:10px !important;
    border-bottom-right-radius:10px !important;
    border-bottom-left-radius:10px !important;

    margin:8px 0 14px 0 !important;        /* respiración con las listas */
    justify-content:flex-start !important;
    text-align:left !important;
  }
  /* Ícono/flecha dentro del botón */
  footer.aval-footer .aval-footer__col-left a.aval-footer__btn--registro .aval-footer__btn-icon{
    position:absolute !important;
    right:8px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:14px !important;
    height:14px !important;
    margin:0 !important;
    pointer-events:none !important;
  }
}

/* 2) MÁS AIRE debajo de “Ayuda del sitio” (centro, último bloque) */
footer.aval-footer .aval-footer__col-center .aval-footer__section:last-child{
  margin-bottom:28px !important;   
}

/* 3) RESPONSIVE – todo alineado a la IZQUIERDA como en el mock
      y “Contacto” con el mismo inset (no tan a la derecha) */
@media (max-width: 576px){
  /* mismo inset para TODAS las secciones en móvil */
  :root{ --footer-mobile-inset: 24px; }  

  footer.aval-footer .aval-footer__content{
    align-items:flex-start !important;
  }
  footer.aval-footer .aval-footer__col-left,
  footer.aval-footer .aval-footer__col-center,
  footer.aval-footer .aval-footer__col-right,
  footer.aval-footer .aval-footer__section{
    text-align:left !important;
    align-items:flex-start !important;
  }

  /* aplicamos el mismo inset a todas las secciones (incluye Contacto) */
  footer.aval-footer .aval-footer__section{
    padding-left:var(--footer-mobile-inset) !important;
    padding-right:0 !important;
  }

  /* títulos y listas sin centrados heredados */
  footer.aval-footer .aval-footer__section h4{
    margin:0 0 18px !important;
    text-align:left !important;
  }
  footer.aval-footer .aval-footer__section > ul{
    margin:4px 0 13px 0 !important;
    padding-left:0 !important;
  }

  /* Social centrado horizontalmente */
  footer.aval-footer .aval-footer__social{
    width:100% !important;
    justify-content:center !important;
    gap:18px !important;
    margin:16px auto 0 !important;
  }
}

/* 4) Copyright: una sola línea, centrado y sin salto “| 2025” */
footer.aval-footer .aval-footer__bottom{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding:20px 0 !important;
  background:#0065C1 !important;
}
footer.aval-footer .aval-footer__bottom p{
  margin:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  line-height:1.1 !important;
}

/* 5) Desktop: contenedor con medidas del mock y sin recortes */
@media (min-width: 1200px){
  footer.aval-footer .aval-footer__content{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:1440px !important;     
    margin:0 auto !important;
    padding:30px 65px !important;     
    min-height:324px !important;      
  }
}
@media (min-width: 1440px){
  footer.aval-footer .aval-footer__content{
    width:1440px !important;
    height:324px !important;         
  }
}
/* 1) BOTÓN "REGÍSTRATE" – tamaño exacto en todas las vistas */
footer.aval-footer a.aval-footer__btn--registro{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;

  width:105px !important;
  max-width:105px !important;
  height:34.07px !important;     /* Figma */
  min-height:34.07px !important;

  padding:5px 28px 5px 15px !important; /* deja espacio a la flecha */
  border-top-left-radius:10px !important;
  border-bottom-right-radius:10px !important;
  border-bottom-left-radius:10px !important;

  font-size:11px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}
footer.aval-footer a.aval-footer__btn--registro .aval-footer__btn-icon{
  position:absolute !important;
  right:8px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  pointer-events:none;
}

/* 2) “Ayuda del sitio” MÁS ABAJO (separa de “Tratamiento de Datos Personales”) */
footer.aval-footer .aval-footer__col-center .aval-footer__section + .aval-footer__section{
  margin-top:22px !important;   /* ajusta a 24 si lo quieres un pelín más */
}

/* 3) RESPONSIVE: alinear más a la IZQUIERDA texto e íconos y evitar que salte uno abajo */
@media (max-width:576px){
  /* mueve todo el contenido un poco a la izquierda */
  footer.aval-footer .aval-footer__section,
  footer.aval-footer .aval-footer__section.aval-footer__contact{
    padding-left:24px !important;          /* antes 38px */
    text-align:left !important;
  }

  /* fila de redes: un poco más compacta y a la izquierda */
  footer.aval-footer .aval-footer__social{
    justify-content:flex-start !important;
    gap:16px !important;                   /* reduce separación para que no baje un icono */
    margin-left:24px !important;           /* acompaña el nuevo inset */
  }

  /* por si “Contacto” quedaba muy cargado a la derecha en móvil */
  footer.aval-footer .aval-footer__col-right{
    align-items:flex-start !important;
  }
}
/* ====== ARREGLO: que el footer NUNCA se recorte ni se solape ====== */

/* El bloque de contenido no debe tener height fijo */
footer.aval-footer .aval-footer__content{
  height: auto !important;         /* evita cortes */
  min-height: 324px !important;    /* tu altura de diseño, pero flexible */
  padding-bottom: 18px !important; /* pequeño aire antes de la franja azul */
  position: relative !important;
  z-index: 1 !important;           /* por si la franja tuviera z-index alto */
}

/* En >=1440px algunos estilos ponen height fijo: neutralízalo */
@media (min-width: 1440px){
  footer.aval-footer .aval-footer__content{
    height: auto !important;
    min-height: 324px !important;
  }
}

/* La franja inferior (derechos) debe fluir debajo, no superponerse */
footer.aval-footer .aval-footer__bottom{
  position: relative !important;   /* nada de absolute/fixed */
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 0 !important;
  clear: both !important;          /* “empuja” debajo de cualquier float */
  z-index: 0 !important;
}
/* ===== Espaciado extra antes de "Ayuda del sitio" ===== */
footer.aval-footer .aval-footer__section h4 {
  margin-top: 0 !important; /* todos los títulos por defecto sin margen */
}

footer.aval-footer .aval-footer__section:nth-of-type(3) {
  margin-top: 28px !important; /* mueve el bloque "Ayuda del sitio" hacia abajo */
}
/* ===== FOOTER por debajo de cualquier popup ===== */
footer.aval-footer,
footer.custom-footer {
  position: relative !important;   /* crea contexto, pero bajo */
  z-index: 1 !important;           /* más bajo que los popups */
}

/* La barrita vertical del footer tampoco debe tapar modales */
footer.aval-footer .aval-footer__vertical,
.custom-footer .custom-footer-vertical-bar {
  z-index: 1 !important;           /* antes estaba altito (99) */
  pointer-events: none;            /* por si acaso */
}

/* ===== FOOTER: jamás sobre un popup ===== */
footer.aval-footer,
footer.custom-footer {
  position: relative !important;
  z-index: 0 !important;                 /* debajo de los popups */
}

/* La barrita/imagen lateral del footer tampoco debe tapar nada */
footer.aval-footer .aval-footer__vertical,
.custom-footer .custom-footer-vertical-bar {
  z-index: 0 !important;
  pointer-events: none !important;
}