/* ==========================================================================
   override.css — Grupo Financial Life (copia estática)
   - Redefine las familias 'lato-*' del tema (los .ttf originales no existían)
     apuntando a archivos Lato woff2 locales descargados de Google Fonts.
   - Sustituye las imágenes de marca que NO pudieron recuperarse del archivo
     (banner, ilustraciones de crédito, fondos de sección, línea amarilla)
     por degradados/colores y gráficos recreados que respetan el diseño.
   ========================================================================== */

/* ---- Fuentes Lato (sustituyen los @font-face del tema, que apuntaban a
        fonts/lato/*.ttf inexistentes). Mismo nombre de familia => ganan. ---- */
@font-face { font-family:'lato-thin';            src:url('../fonts/lato/lato-100-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'lato-regular';         src:url('../fonts/lato/lato-400-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'lato-semibold';        src:url('../fonts/lato/lato-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'lato-bold';            src:url('../fonts/lato/lato-700-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'lato-black';           src:url('../fonts/lato/lato-900-normal.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'lato-blackitalic';     src:url('../fonts/lato/lato-900-italic.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'lato-heavyitalic';     src:url('../fonts/lato/lato-900-italic.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'lato-semibolditalic';  src:url('../fonts/lato/lato-700-italic.woff2') format('woff2'); font-display:swap; }

/* ---- Colores de fondo vc_custom_* (estaban en el <style> embebido del
        sitio original, no en js_composer.min.css). Reproducidos aquí. ---- */
.vc_custom_1571193358468{background-color:#fafafa !important;}
.vc_custom_1585852788375{background-color:#1e234d !important;}   /* franja azul oscuro */
.vc_custom_1585852601440{background-color:#e9e9ed !important;}   /* sección costos */
.vc_custom_1585854328707{background-color:#4985b4 !important;}   /* tarjeta personal */
.vc_custom_1585854334207{background-color:#0077c0 !important;}   /* tarjeta pymes */
.vc_custom_1585854339894{background-color:#006bbb !important;}   /* tarjeta hipotecario */

/* ============================ BANNER / SLIDER ============================ */
/* Reemplaza al Slider Revolution + BANNER.jpg (recreado con foto corporativa). */
.gfl-banner{
    position:relative;
    background:linear-gradient(120deg,rgba(11,42,82,.93) 0%,rgba(14,118,188,.70) 55%,rgba(11,40,70,.55) 100%),
               url('../img/banner.png');
    background-size:cover;
    background-position:center right;
    overflow:hidden;
}
.gfl-banner:after{ /* sutil patrón de luz */
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 82% 25%,rgba(255,255,255,.16),transparent 48%);
    pointer-events:none;
}
.gfl-banner-inner{
    position:relative;z-index:2;
    max-width:1170px;margin:0 auto;
    /* padding-top amplio para librar la barra fija superior */
    padding:150px 20px 70px;
    display:flex;align-items:center;justify-content:space-between;gap:48px;
    color:#fff;
}
.gfl-banner-copy{flex:1 1 auto;max-width:620px;}
.gfl-banner h1{
    font-family:'lato-black','Lato',sans-serif;
    font-size:44px;line-height:1.08;margin:0;color:#fff;
}
.gfl-banner h1 small{display:block;font-family:'lato-thin','Lato',sans-serif;font-size:21px;color:#cfe6f7;margin-top:10px;}
.gfl-banner .gfl-phones{margin:28px 0 20px;}
.gfl-banner .gfl-phones a{
    display:inline-flex;align-items:center;color:#fff;font-size:32px;
    font-family:'lato-thin','Lato',sans-serif;text-decoration:none;line-height:1.5;
}
.gfl-banner .gfl-phones a{display:flex;}
.gfl-banner .gfl-phones .fa{
    color:#4cd964;font-size:28px;margin-right:14px;width:36px;text-align:center;
}
.gfl-banner .gfl-tagline{
    font-family:'Open Sans','Lato',sans-serif;font-size:17px;line-height:1.6;color:#eaf4fb;margin:0;
}

/* ---- Formulario del banner (limpio, anclado en la columna derecha) ---- */
.gfl-banner-form{
    flex:0 0 360px;width:360px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(2px);
    padding:28px;border-radius:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.22);
}
.gfl-banner-form h3{
    margin:0 0 16px;color:#fff;text-align:center;
    font-family:'lato-bold','Lato',sans-serif;font-size:22px;
}
.gfl-banner-form input{
    display:block;width:100%;height:42px;margin-bottom:12px;
    padding:0 14px;border:0;border-radius:8px;background:#fff;
    font-family:'Open Sans','Lato',sans-serif;font-size:14px;color:#333;
}
.gfl-banner-form input::placeholder{color:#0e76bc;}
.gfl-banner-form input[type="submit"]{
    height:46px;margin:6px 0 0;background:#599c2d;color:#fff;cursor:pointer;
    font-family:'lato-bold','Lato',sans-serif;font-size:17px;letter-spacing:.3px;
    transition:background .15s ease;
}
.gfl-banner-form input[type="submit"]:hover{background:#4a8525;}

@media(max-width:991px){
    .gfl-banner-inner{
        flex-direction:column;align-items:stretch;text-align:center;
        padding:130px 18px 50px;gap:30px;
    }
    .gfl-banner-copy{max-width:none;}
    .gfl-banner h1{font-size:32px;}
    .gfl-banner .gfl-phones a{justify-content:center;font-size:26px;}
    .gfl-banner-form{flex:none;width:100%;max-width:420px;margin:0 auto;}
}

/* ====================== FONDOS DE SECCIÓN PERDIDOS ====================== */
/* NOSOTROS.jpg -> foto corporativa con velo azul para legibilidad del texto */
.vc_custom_1585851352706{
    background-image:linear-gradient(120deg,rgba(16,24,63,.30) 0%,rgba(30,35,77,.72) 50%,rgba(40,58,115,.92) 100%),
                     url('../img/nosotros.png') !important;
    background-size:cover !important;
    background-position:center !important;
    min-height:360px;display:flex;align-items:center;
}
/* FORMULARIO-IMAGEN.jpg (parallax) -> foto skyline con velo azul */
#formulario-contacto{
    background:linear-gradient(120deg,rgba(11,42,82,.90) 0%,rgba(14,118,188,.84) 100%),
               url('../img/formulario.png') !important;
    background-size:cover !important;
    background-position:center !important;
    background-attachment:fixed !important;
}
#formulario-contacto .vc_parallax-inner{display:none !important;}

/* ===================== "¿QUÉ NECESITAS?" — PASOS ===================== */
/* IDENTIFICACION / COMPROBANTE / LLENAR FORMULARIO / AGENDAR CITA */
.gfl-step{
    text-align:center;padding:18px 10px;color:#1e234d;
}
.gfl-step .gfl-step-ico{
    width:96px;height:96px;line-height:96px;margin:0 auto 14px;border-radius:50%;
    background:#0178c0;color:#fff;font-size:42px;
    box-shadow:0 8px 18px rgba(1,120,192,.25);
}
.gfl-step p{
    font-family:'lato-bold','Lato',sans-serif;font-size:15px;text-transform:uppercase;
    letter-spacing:.5px;margin:0;color:#1e234d;
}

/* ===================== TARJETAS DE CRÉDITO ===================== */
/* personal.png / pymes.png / hipotecario.png (ilustraciones recreadas) */
.gfl-credit-ico{
    text-align:center;padding:38px 0 18px;
}
.gfl-credit-ico img{
    display:block;height:140px;width:auto;max-width:80%;margin:0 auto;
    opacity:.97;
}
.gfl-credit-ico .fa{
    font-size:96px;color:#fff;opacity:.95;
}

/* Línea amarilla decorativa (LINEA-AMARILLA.png) */
.gfl-line{
    width:69px;height:3px;background:#e9c400;border:0;margin:14px auto;
}

/* Pequeños ajustes para que el banner respire bajo la barra fija */
body{padding-top:0;}

/* ============== FORMULARIOS: LABELS FLOTANTES + VALIDACIÓN ============== */
/* Etiqueta que se ve como placeholder y "flota" arriba al enfocar/escribir.
   Aplica a los 4 formularios del sitio. Los inputs llevan placeholder=" " (un
   espacio) para que :placeholder-shown detecte si están vacíos. Reemplaza el
   markup .input-fixed/.contact-form1 con un estilo unificado y legible
   (esto también corrige los placeholders "thin" del formulario Contáctanos). */
.gfl-float{
    position:relative;
    display:block;
    margin-bottom:12px;
    text-align:left;
}
.gfl-float > input{
    width:100%;
    height:48px;
    margin:0;
    padding:20px 14px 6px;
    border:1px solid #d4dde6;
    border-radius:8px;
    background:#fff;
    box-sizing:border-box;
    font-family:'lato-regular','Open Sans',sans-serif;
    font-size:15px;
    color:#333;
    line-height:1.2;
}
.gfl-float > input:focus{
    outline:none;
    border-color:#0e76bc;
    box-shadow:0 0 0 2px rgba(14,118,188,.15);
}
.gfl-float-label{
    position:absolute;
    left:15px;
    top:0;
    height:48px;
    display:flex;
    align-items:center;
    color:#0e76bc;
    font-family:'lato-regular','Open Sans',sans-serif;
    font-size:15px;
    line-height:1;
    pointer-events:none;
    transform-origin:left center;
    transform:translateY(0) scale(1);
    transition:transform .18s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}
.gfl-float > input:focus + .gfl-float-label,
.gfl-float > input:not(:placeholder-shown) + .gfl-float-label{
    transform:translateY(-13px) scale(.72);
    font-weight:700;
}
/* Refuerzo por si algún placeholder quedara visible (Contáctanos usaba la
   fuente 'lato-thin', que se veía demasiado fina). */
.contact-form1 input::placeholder{
    color:#0e76bc !important;
    font-family:'lato-regular','Open Sans',sans-serif !important;
    opacity:1;
}

/* ===================== BARRA SUPERIOR FIJA ===================== */
/* #banner es position:fixed pero no tenía width ni left/right, así que se
   encogía al ancho de su contenido en vez de ocupar todo el ancho. Lo fijamos
   al ancho completo del viewport para que la barra blanca y el contenido
   (logo + botón de WhatsApp) abarquen toda la pantalla. */
#banner{
    width:100%!important;
    left:0!important;
    right:0!important;
    top:0!important;
}

/* ===================== EVITAR SCROLL HORIZONTAL ===================== */
/* El mapa de Google embebía con width="600" fijo y, en columnas más angostas,
   desbordaba el ancho del viewport (provocaba scroll horizontal). Lo hacemos
   responsivo y añadimos una red de seguridad para cualquier medio embebido. */
.mapa iframe{
    width:100%!important;
    max-width:100%;
    height:450px;
    border:0;
}
img,
iframe{
    max-width:100%;
}
/* Corrige el margen de la barra superior fija y contiene el desbordamiento
   horizontal dentro del wrapper de contenido. */
.wpb-content-wrapper{
    overflow:hidden;
}
div#banner{
    margin:0;
}
.gfl-banner h1 small{
    font-family:'Lato',sans-serif;
}
.gfl-banner .gfl-phones a{
    display:flex;
    font-family:'Lato',sans-serif;
}