/* ---- Token de radius para CONTROLES (2026-10-02): botones, pills/chips de filtro, tabs, buscadores, inputs y selects. Un solo valor; los componentes del kit lo consumen con var(--bnsc-radius-control) en su regla de origen (sin !important de más). Para cambiarlo en todo el sitio, editar solo esta línea. NO aplica a círculos (50%: botón de lupa, radio-dots) ni a paneles/tarjetas contenedoras. Los botones nativos de Elementor siguen con el estándar de §17 del catálogo (5px). */ :root { --bnsc-radius-control: 5px; } /* Banesco Kit — comportamiento del navbar (Header). Los colores/tipografía/spacing ya vienen resueltos por Elementor (settings del template "Banesco Header"); esto solo agrega posicionamiento + show/hide. */ .bnsc-header { position: relative; } /* ---- Ancho boxed del navbar (calza con el ancho de las secciones del sitio) ---- Elementor le pone su propio flex-grow/margin por defecto a este contenedor, lo que lo hace "crecer" pegado a la izquierda en vez de centrarse. Forzamos flex-grow:0 (no se estira) + margin auto !important (gana el empate de cascada) para que quede centrado de verdad. */ .bnsc-boxed { flex-grow: 0 !important; width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; } .bnsc-boxed-1400 { width: 100% !important; max-width: 1400px !important; margin-inline: auto !important; } /* ---- Topbar / Mainbar: barras compactas. Sin esto, el padding por defecto de cada contenedor de Elementor (10px arriba/abajo por default, "--container-default-padding-top/bottom" del propio .e-con base de Elementor) se acumula en cada nivel anidado y las barras se ven más altas de lo diseñado. ---- */ .bnsc-header .bnsc-boxed, .bnsc-header .bnsc-dd, .bnsc-header .bnsc-dd-trigger, .bnsc-header .bnsc-desktop-nav, .bnsc-header .bnsc-nav-item, .bnsc-header .bnsc-actions, .bnsc-header .bnsc-mcompact { padding-top: 0 !important; padding-bottom: 0 !important; } /* Elementor le pone line-height:24px al wrapper de todo widget "icon" (view default) sin importar el "size" configurado — acá los chevrons/hamburger/cerrar miden 10-22px reales pero su wrapper medía 24px igual, inflando la altura de cada fila que los contiene (el trigger del dropdown, Personas/ Empresas, etc.). Se limita solo dentro del header para no tocar los widgets icon del resto del sitio. */ .bnsc-header .elementor-icon-wrapper { line-height: 1 !important; } /* padding-top/bottom:6px acá (la barra ya no acumula el padding oculto de .bnsc-dd, ni la altura inflada del ícono de arriba, así que esto ya alcanza para un topbar cómodo). */ .bnsc-topbar { padding-top: 6px !important; padding-bottom: 6px !important; } /* Elementor trae el grupo de dropdowns con flex-end por defecto, pero cada .bnsc-dd se estira y los separa a lo ancho de toda la barra; forzamos que se agrupen compactos pegados a la derecha. */ .bnsc-topbar .bnsc-boxed { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 28px !important; } .bnsc-topbar .bnsc-dd, .bnsc-topbar .bnsc-dd-trigger, .bnsc-actions .bnsc-dd, .bnsc-actions .bnsc-dd-trigger, .bnsc-mcompact .bnsc-dd, .bnsc-mcompact .bnsc-dd-trigger { flex: 0 0 auto !important; /* Elementor le pone width:100% (var(--width)) a todo .e-con por default; con flex-basis:auto ese width explícito se vuelve la base real del flex (100% = ancho completo de la barra), y como flex-shrink también quedó en 0 arriba, nunca se achica de vuelta. Sin este width:auto los 3 dropdowns del topbar (Contáctanos/Sucursales/país) terminan ocupando ~1180px cada uno y se amontonan fuera de pantalla. Mismo patrón ya usado en .bnsc-mainbar más abajo -- también se necesita en .bnsc-actions (2026-09-24: "Banca en Línea" pasó de botón simple a dropdown real con el mismo componente .bnsc-dd, mismo problema si no se acota el ancho). */ width: auto !important; } .bnsc-topbar .elementor-heading-title { font-size: 12px; line-height: 1.15; } .bnsc-topbar .elementor-icon svg { width: 9px; height: 9px; } .bnsc-mainbar { padding-top: 5px !important; padding-bottom: 7px !important; } .bnsc-actions { gap: 14px !important; } /* 2026-09-18 (ajuste de diseño): los botones del navbar (miA + Banca en Línea) dejan la forma de píldora y pasan a compartir el radio 5px del estándar sitewide (ver .elementor-button más abajo) -- ya no son una excepción de forma, solo de tamaño (siguen siendo chips compactos de navegación, no CTAs de contenido, así que mantienen su padding horizontal acotado para no inflar el header). padding-top/bottom:10px explícito (antes 7px, calibrado a mano contra miA -- ese calce ya no aplica porque miA también cambia de píldora a 5px con el mismo criterio, ver bloque siguiente). border-width:0 -- a diferencia del resto de los botones del sitio, ACÁ SÍ se anula el borde de 1px reservado por el estándar global: se pidió sacarlo porque ensanchaba el botón dentro del header (espacio ya acotado), y este chip no necesita calzar en alto contra un secundario con borde real al lado (no es un par primario+secundario como en los heroes). */ .bnsc-banca .elementor-button { padding: 10px 22px !important; font-size: 14px !important; border-radius: 5px !important; border-width: 0 !important; } /* ---- Botón miA: imagen real (marca "miA" en blanco, pensada para ir sobre fondo de color) montada sobre un chip con el azul de marca (mismo #173358 usado en headings/botones en todo el sitio) — la imagen sola es invisible sobre blanco porque es blanca con transparencia. 2026-09-18: radio 100px -> 5px + padding vertical 10px, mismo estándar que el resto de los botones del sitio (ver .bnsc-banca arriba). Sin borde (ver nota de border-width:0 en .bnsc-banca arriba -- mismo motivo, ensanchaba el chip dentro del header). ---- */ .bnsc-mia-logo, .bnsc-mia-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; background-color: #173358; border-radius: 5px; box-sizing: border-box; border: 0; } .bnsc-mia-logo { padding: 10px 18px !important; } .bnsc-mia-logo img { height: 17px; width: auto !important; object-fit: contain; display: block; } /* Versión compacta (mobile/hamburger row): más chica para no forzar scroll horizontal — la versión desktop (bnsc-mia-logo) es demasiado ancha para la fila compacta con el botón "Banca en Línea" + hamburger al lado. */ .bnsc-mia-icon { padding: 10px 16px !important; } .bnsc-mia-icon img { height: 16px; width: auto !important; object-fit: contain; display: block; } .bnsc-mcompact { gap: 8px !important; } /* padding-top/bottom:10px, mismo estándar sitewide -- ver .bnsc-banca arriba (era 9.5px, calibrado contra la píldora miA compacta, calce que ya no aplica porque ambas pasan al mismo estándar). border-width:0 -- mismo motivo que .bnsc-banca arriba, sin borde para no ensanchar el chip. */ .bnsc-mcompact .elementor-button { padding-left: 12px !important; padding-right: 12px !important; padding-top: 10px !important; padding-bottom: 10px !important; font-size: 13px !important; border-radius: 5px !important; border-width: 0 !important; } /* ---- Logo Banesco: símbolo chico en mobile en vez del isotipo completo (que fuerza más ancho del necesario); el isotipo completo se mantiene igual en tablet/desktop. ---- */ .bnsc-logo-mobile { display: none; flex: 0 0 auto !important; width: auto !important; } @media (max-width: 767px) { .bnsc-logo-mobile { display: flex !important; align-items: center !important; } .bnsc-logo-mobile img { height: 34px; width: auto !important; object-fit: contain; display: block; } } .bnsc-logo img { max-height: 38px; width: auto !important; object-fit: contain; } @media (max-width: 1024px) { .bnsc-logo img { max-height: 34px; } } /* En mobile "width: auto" de arriba escala el logo por altura y lo deja ~152px de ancho (su relación de aspecto real), ignorando el width_mobile:88px ya configurado en el widget de Elementor — eso solo era el culpable real del scroll horizontal del navbar en mobile. Se limita el ancho acá para que sí respete ese valor. */ @media (max-width: 767px) { .bnsc-logo img { max-height: none; width: 88px !important; height: auto; } } .bnsc-mainbar .bnsc-logo, .bnsc-mainbar .bnsc-desktop-nav, .bnsc-mainbar .bnsc-actions, .bnsc-mainbar .bnsc-mcompact { flex: 0 0 auto !important; width: auto !important; } .bnsc-flag img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: block; } /* ---- Topbar: 3 dropdowns (Contáctanos, Sucursales, selector de país) ---- */ .bnsc-dd { position: relative; } .bnsc-dd-trigger { cursor: pointer; } .bnsc-dd-panel { position: absolute; top: 100%; right: 0; z-index: 100; min-width: 220px; margin-top: 8px; background: #ffffff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } .bnsc-dd.is-open > .bnsc-dd-panel, .bnsc-dd:hover > .bnsc-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); } .bnsc-dd-panel .elementor-icon-list-items { margin: 0; } .bnsc-dd-panel .elementor-icon-list-item { padding: 8px 20px; white-space: nowrap; } /* ---- Selector de país: filas bandera + nombre dentro del panel (reemplaza el icon-list plano, Elementor no permite imagen por ítem dentro de un widget icon-list). ---- */ .bnsc-country-row { padding: 8px 20px !important; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease; } .bnsc-country-row:hover { background-color: #F6F6F6; } .bnsc-flag-item img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: block; } /* ---- Mega menú (Personas / Empresas / Internacional) ---- */ .bnsc-nav-item { position: relative; cursor: pointer; /* Sin esto, Elementor reparte el ancho de los 3 triggers del nav en partes iguales (mismo var(--width):100% + flex-shrink default que ya se documentó para .bnsc-dd más abajo) -- daba exactamente el mismo ancho a "Personas" y a "Internacional" pese a tener textos de largo distinto, y en "Internacional" (el texto más largo) el chevron quedaba encimado sobre la última letra en vez de con el gap de 6px real. Bug real detectado 2026-09-24 al agregarle el chevron a Internacional -- mismo patrón .bnsc-dd que ya se ve más abajo (línea 65 aprox). */ flex: 0 0 auto !important; width: auto !important; } /* Internacional ya no es un link plano suelto -- desde 2026-09-24 es un .bnsc-nav-item más (con su propio flyout Personas/Empresas). .bnsc-nav-link queda como fallback genérico por si algún trigger futuro necesita ser "solo link, sin abrir panel" sin volver a duplicar este bloque. */ .bnsc-header .bnsc-nav-link { padding-top: 0 !important; padding-bottom: 0 !important; } .bnsc-nav-link { position: relative; cursor: pointer; } .bnsc-nav-link a, .bnsc-nav-link a:hover { color: #173358; text-decoration: none; } .bnsc-megamenu { position: absolute; left: 0; right: 0; top: 100%; z-index: 90; background: #ffffff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } .bnsc-megamenu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* El contenedor del mega menú (bnscMega) trae 10px de padding default de Elementor por lado, y cada panel adentro trae otros 20px propios — se acumulan 60px de aire. Compactamos ambos. 2026-09-24 (ajuste de diseño): ese padding lateral de 10px dejaba un margen de "sangrado" visible en los bordes del panel -- el fondo de #bnscMega ya llegaba a los bordes de .bnsc-header (full width), pero .bnsc-panel/.bnsc-l3-panel heredaban ese padding y quedaban 10px adentro, dejando ver una franja del fondo de la página detrás. padding-left/right:0 acá para que el panel sea realmente edge-to-edge; el aire visual para el texto lo sigue dando el padding propio de .bnsc-panel (24px) y de .bnsc-l3-panel (28px 48px), que no se tocan. */ .bnsc-megamenu { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .bnsc-panel { display: none; padding-top: 12px !important; padding-bottom: 12px !important; /* padding-left/right propio del widget (24px, ver settings de Elementor) es el resto del "margen de sangrado" reportado 2026-09-24 -- .bnsc-l3-panel (abajo) se posiciona absolute contra ESTE contenedor, así que ese padding lateral es justo lo que dejaba la franja de fondo visible en los bordes del flyout. El aire para el texto de la fila de Nivel 2 ya lo da .bnsc-l2-row (centrada) + el padding propio de cada link, no hace falta que también lo dé el contenedor. */ padding-left: 0 !important; padding-right: 0 !important; } .bnsc-panel.is-active { display: block; } /* ---- Contenido del mega menú: horizontal en desktop (Elementor por defecto lo apila vertical) ---- */ .bnsc-megalinks .elementor-icon-list-items { display: flex !important; flex-wrap: wrap; gap: 6px 36px; justify-content: center; margin: 0; } .bnsc-megalinks .elementor-icon-list-item { margin: 0 !important; padding-block-end: 0 !important; } /* ---- Mobile: hamburger / panel off-canvas / tabs ---- */ .bnsc-hamburger, .bnsc-close { cursor: pointer; } /* El panel se reorganiza como columna flex (topbar / tabs / lista / footer) para que la lista sea la única zona que scrollea y el footer (Contáctanos/Sucursales/país + redes) quede siempre pegado abajo en vez de dejar un bloque de espacio en blanco cuando la lista es corta. */ .bnsc-mobile-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; z-index: 1000; background: #ffffff; display: flex !important; flex-direction: column !important; /* Elementor le pone flex-wrap:wrap por default a todo .e-con en mobile (--flex-wrap-mobile:wrap); sin este override el footer no entra en la "columna" disponible y salta a una segunda línea del wrap — que en un contenedor column-flex se dibuja como una columna aparte a la derecha, fuera del panel (overflow:hidden la esconde). Mismo tipo de bug ya visto con flex-basis en el topbar. */ flex-wrap: nowrap !important; overflow: hidden; /* Antes tenía box-shadow con blur negativo (-8px) en vez de borde — su desenfoque se filtraba hacia adentro del viewport incluso con el panel trasladado 100% fuera de pantalla (el blur se dibuja más allá del borde del elemento, y ese margen quedaba dentro de los 375px del viewport). Borde sólido en vez de sombra: no tiene ese problema porque no se dibuja fuera de los límites del elemento. */ border-left: 1px solid #DDE3EA; transform: translateX(100%); transition: transform 0.25s ease; /* Elementor le pone 10px de padding por default a TODO .e-con — el panel raíz (#bnscMobile) nunca lo había pisado, así que su contenido (tabs/listas/footer) quedaba inset 10px de cada borde en vez de ir a sangre. Ajuste de diseño 2026-09-22: que el panel cubra el 100% del ancho disponible. */ padding: 0 !important; } .bnsc-mobile-panel.is-open { transform: translateX(0); } body.bnsc-mobile-open { overflow: hidden; } .bnsc-mobile-search { cursor: pointer; } /* Topbar/tabs del panel a tamaño fijo (no se achican, flex-grow:0 por default ya alcanza); la lista en medio es la única con flex-grow (ver .bnsc-mlists-wrap más abajo) — absorbe el espacio disponible y empuja el footer siempre pegado abajo. */ .bnsc-mtabs-row { flex: 0 0 auto !important; /* Mismo 10px default de Elementor que el panel raíz, apilado encima del suyo -- sin esto la fila de tabs quedaba con doble inset (panel + fila) y no llegaba a los bordes del panel ya a sangre. */ padding: 0 !important; } /* Tabs Personas/Empresas del panel mobile: el ancho fijo (50px) que trae el widget en Elementor no distribuye los tabs a lo largo de la barra — se fuerza a repartirse en partes iguales + estado activo con texto verde y borde inferior, en vez de solo un cambio de opacidad. Separador vertical fino entre tabs para que se lean como celdas de una misma barra, no textos sueltos. */ .bnsc-mtab { cursor: pointer; width: auto !important; flex: 1 1 0 !important; flex-direction: column !important; padding: 16px 0 14px !important; border-bottom: 3px solid transparent; border-right: 1px solid #EBF0F5; transition: border-color 0.15s ease; } .bnsc-mtabs-row > .elementor-element:last-child.bnsc-mtab { border-right: 0; } .bnsc-mtab .elementor-heading-title { color: #8A99A8; transition: color 0.15s ease; } .bnsc-mtab.is-active { border-bottom-color: #08543C; } .bnsc-mtab.is-active .elementor-heading-title { color: #08543C; } /* Zona de lista: única parte que scrollea dentro del panel — flex-grow para ocupar todo el espacio libre en vez de dejar un bloque en blanco cuando la lista activa es corta. */ .bnsc-mlists-wrap { flex: 1 1 auto !important; /* min-height:0 es necesario: los flex items no se encogen por debajo de la altura de su contenido por default (min-height:auto), así que sin esto la lista (8 items, ~540px) empuja el footer fuera del panel en vez de quedar scrolleable dentro del espacio que le sobra. */ min-height: 0; overflow-y: auto; padding-top: 4px !important; padding-bottom: 4px !important; } .bnsc-mlist { display: none; } .bnsc-mlist.is-active { display: block; } /* Filas de la lista con más aire + separador, en vez de quedar todas apretadas arriba. */ .bnsc-mlist .elementor-icon-list-item { padding: 14px 0 !important; border-bottom: 1px solid #EBF0F5; } .bnsc-mlist .elementor-icon-list-items > .elementor-icon-list-item:last-child { border-bottom: 0; } /* Footer del panel (Contáctanos / Sucursales / país) en fila, no apilado — y siempre al fondo por ser el último hijo de la columna flex del panel (el flex-grow de .bnsc-mlists-wrap empuja todo lo demás). */ .bnsc-mfoot-list .elementor-icon-list-items { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; column-gap: 12px; } .bnsc-mfoot-list .elementor-icon-list-item { flex: 0 0 auto !important; white-space: nowrap; } /* ---- Imagen a sangre (object-fit:cover) — usado en TODO el sitio, no solo el navbar: Cards Home, Servicios, Hero, Banner, Cards de producto (confirmado: 533 apariciones de .bnsc-img-fill en el contenido real). Faltaba por completo: el kit se armó scopeado solo al comportamiento del navbar, sin saber que el contenido también dependía de este patrón sitewide para el recorte de imágenes. ---- */ .bnsc-img-fill { display: flex !important; padding: 0 !important; } /* Cuando .bnsc-img-fill va directo en el CONTENEDOR que también se oculta por breakpoint (no en el widget de imagen adentro, ver el otro caso más abajo), el !important de arriba le gana siempre al "display:none" de Elementor (.elementor-hidden-desktop/tablet/mobile no llevan !important) sin importar la especificidad — un !important siempre gana contra uno que no lo es. Estas reglas restauran el ocultar solo dentro del breakpoint correspondiente, con más especificidad que la de arriba (2 clases pegadas, sin espacio) para no depender del orden de carga (bug real detectado 2026-07-22 en la sección "Realiza tus pagos y consultas donde estés" del Home — bnsc-img-fill puesto en el contenedor, no en el widget). Breakpoints iguales a los de Elementor (frontend.min.css). */ @media (max-width: 767px) { .bnsc-img-fill.elementor-hidden-mobile { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { .bnsc-img-fill.elementor-hidden-tablet { display: none !important; } } @media (min-width: 1025px) { .bnsc-img-fill.elementor-hidden-desktop { display: none !important; } } .bnsc-img-fill > .e-con-inner { width: 100%; height: 100%; display: flex; } /* :where() en .elementor-widget-image resta especificidad a esta regla a propósito: sin esto, "display:flex" empata en especificidad con las clases nativas de Elementor .elementor-hidden-desktop/tablet/mobile y gana por cargar último en el , dejando SIEMPRE visibles pares de imagen desktop/mobile que deberían alternar por breakpoint (bug real detectado 2026-07-22 en la card "Tenemos la tarjeta de crédito ideal para ti" del Home). Con :where(), esta regla pesa lo mismo que .bnsc-img-fill sola y el hide-on-breakpoint de Elementor gana siempre que está activo, sin perder el fill normal cuando no lo está. */ .bnsc-img-fill :where(.elementor-widget-image) { width: 100%; height: 100%; margin: 0; display: flex; /* flex-grow además de height:100% -- un contenedor .bnsc-img-fill con flex_direction:column y solo min-height (nunca height fijo, es el patrón real en toda la plantilla del sitio) deja la propiedad "height" en auto según spec; el porcentaje 100% de arriba entonces no resuelve y el widget colapsa a la altura intrínseca de la imagen -- visible como banda gris del background_color del contenedor debajo de la foto. Bug real detectado 2026-08-17 en el hero de "PYME: Soluciones para todas" en mobile (min_height_mobile), pero afecta a cualquier instancia con un solo widget de imagen sin flex-grow. flex:1 1 auto fuerza el crecimiento por el algoritmo de flexbox (no depende de resolución de porcentaje), sin afectar el comportamiento ya probado en los pares imagen desktop/mobile con hide_desktop/hide_mobile. */ flex: 1 1 auto; } .bnsc-img-fill .elementor-widget-image > .elementor-widget-container { width: 100%; height: 100%; } .bnsc-img-fill img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } /* Variante para fotos de producto de composición fija (ej. una tarjeta de crédito): "cover" las recorta mal (corta el logo/borde). ".bnsc-img-fill--contain" además de ".bnsc-img-fill" (no la reemplaza) muestra la imagen completa dentro del contenedor — necesita el fondo propio del contenedor (background_color) para no dejar espacio en blanco alrededor. */ .bnsc-img-fill.bnsc-img-fill--contain img { object-fit: contain; } /* Banners "bonus-*" (cross-sell "Mejora tus viajes con X y Banesco", "¿Por qué es ideal para ti?", etc.): SIN reglas CSS por imagen. El PNG viene con la silueta (círculo + arco) cortada por el canvas arriba y abajo: el corte plano debe coincidir con los bordes del card, o queda flotando sobre el gris. Se configura desde el editor de Elementor, con controles nativos (ver scripts/fix-bonus-object-fit-nativo.php): - Card (contenedor padre): Padding = 0 (si no, Elementor deja 10px de franja alrededor de la imagen). - Widget Imagen > Estilo: Alto = 100% + Object Fit = Fill en escritorio, Contain en móvil. (Object Fit solo aparece si el Alto está definido; "Fill" no recorta, deforma lo que desajuste la proporción: ok hasta ~5%; cover recortaría la curva lateral del círculo.) Un banner nuevo se arma igual; el selector del widget (.elementor-element-ID img) gana a las reglas genéricas de .bnsc-img-fill sin !important. */ /* Home "Somos la solución que estás buscando" — grid de 1 card grande + 2 cards chicas apiladas (.bnsc-eqcard, reporte 2026-09-24: "la card grande y las 2 chicas no se ven alineadas"). Diagnóstico: la columna derecha (contenedor de las 2 cards chicas) SÍ se estira correctamente a la misma altura que la card grande (align-items:stretch del grid ya funciona, 669px ambas columnas, confirmado midiendo el DOM) -- pero las 2 cards chicas adentro NO crecían para ocupar ese espacio, solo se apilaban por su alto de contenido natural (286px + gap 24px + 334px = 644px), dejando 25px muertos al fondo de la columna -- de ahí la sensación de desalineación con la card grande. La clase .bnsc-eqcard ya existía en el HTML (nombre sugiere "equal card") pero nunca tuvo CSS asociado. Fix: flex:1 1 0 reparte el espacio disponible de la columna en partes IGUALES entre las 2 cards -- quedan del mismo alto entre sí (antes 286 vs 334, una diferencia de 48px por texto de distinta longitud) Y la suma exacta llena la columna estirada, alineando el fondo con la card grande. La foto de cada card (bnsc-img-fill--cover-abs) absorbe el alto extra sin distorsión (object-fit:cover ya está pensado para llenar cualquier caja). min-height:0 evita que el alto de contenido natural le gane al flex-basis:0 (bug clásico de flexbox con contenido de texto largo). */ .bnsc-eqcard { flex: 1 1 0 !important; min-height: 0 !important; } /* .bnsc-f-cards — fila de N cards iguales dentro de un .bnsc-boxed (patrón "Elige tu cuenta de ahorro", "La cuenta/Niños/Planilla", grids de 2/3/4 del esqueleto "producto", etc.). Reporte 2026-09-24: comparando con el banner "Plazo Fijo" de abajo (que sí llega a los bordes reales del contenedor boxed), el grid de cards se ve angosto/descentrado -- pidió revisar si es un patrón repetido en otras landings de producto. Auditado sitewide: 224 contenedores con este patrón exacto (título "Cards" en el editor, fila de N hijos "Card" con el MISMO % de ancho cada uno) en 101 páginas -- TODOS con el mismo bug doble: 1. El contenedor de la fila nunca tuvo padding:0 explícito -> cae al default de Elementor (10px), igual que el bug ya encontrado hoy en Home y en el CTA "¿Necesitas ayuda?" (mismo patrón de raíz: un padding nunca seteado a propósito, no un valor de diseño real). 2. Cada card tiene un % de ancho fijo que se estimó a ojo para 100%/N sin descontar los gaps (ej. 3 cards a 31% = 93%, o 4 cards a 22% = 88%) -- el 7-12% sobrante, con flex-justify-content casi siempre "center", se reparte como margen invisible a ambos lados del grupo -- el efecto visual es "las cards no llegan a los bordes que sí toca el banner de abajo". Fix: mismo patrón que .bnsc-eqcard -- flex:1 1 0 en cada card reparte el 100% del ancho disponible (menos los gaps reales, que YA están bien seteados) sin depender de que el % a mano sea exacto, así nunca vuelve a desalinearse aunque cambie el gap o se agregue/quite una card. padding:0 en la fila mata el default de Elementor. Solo desktop (>=1025px, breakpoint estándar del kit) -- mobile/tablet ya apilan a 1 columna vía width_mobile:100% de Elementor, sin este bug (confirmado, no tocar). Clase aplicada automáticamente a las 224 instancias vía scripts/apply-bnsc-f-cards-class.php (no se tocó a mano el "Cards" de Home -- 2 hijos con % DISTINTO entre sí, 47/53 a propósito, no es este patrón). */ @media (min-width: 1025px) { .bnsc-f-cards { padding: 0 !important; } .bnsc-f-cards > .e-con { flex: 1 1 0 !important; } } /* Variante para un solo widget de imagen (sin el par desktop/mobile con hide_desktop/hide_mobile que usa el resto del sitio) dentro de un .bnsc-img-fill con flex_direction:column y solo min-height (nunca height fijo). En ese caso "height:100%" en cascada (contenedor > widget > img) no resuelve -- la propiedad "height" del padre queda en "auto" según spec aunque el flex-grow lo estire visualmente, y el img cae a su alto intrínseco (bug real: hero de "PYME: Soluciones para todas" en mobile, 2026-08-17). position:absolute + inset:0 rompe la cadena de porcentajes (se resuelve contra la caja ya calculada del contenedor posicionado, no contra su propiedad "height"). Opt-in explícito -- NO se aplicó a .bnsc-img-fill en general para no arriesgar las 533 apariciones existentes del patrón de a pares. */ .bnsc-img-fill--cover-abs { position: relative; } .bnsc-img-fill--cover-abs img { position: absolute !important; inset: 0 !important; } /* ==== Mejora global 2026-09-07: banners de tope de página (héroes) y banner de pagos/contacto ==== Auditado con un script sobre las 97 páginas publicadas con .bnsc-hero-bg + las 103 instancias sitewide del patrón "Banner pagos" (banda pagos/contacto, ej. post 179/415/427): en AMBOS casos la imagen deja un hueco de color de fondo visible entre la foto y el borde del contenedor en mobile (reportado en /prestamos/prestamo-hipoteca/, pero reproducible en la mayoría de las 200 instancias auditadas). Causa raíz confirmada: es exactamente el bug de ".bnsc-img-fill--cover-abs" de arriba (min-height sin height fijo + flex_direction:column en mobile → height:100% no resuelve → el cae a su alto intrínseco, más chico que el min-height, y el min-height igual fuerza la caja del contenedor a ser más alta → el background_color del contenedor de "Imagen" se ve como una franja sólida debajo de la foto). En desktop (flex_direction:row) no se nota porque el stretch de flexbox le da una altura definida al contenedor y el 100% sí resuelve — por eso pasó desapercibido hasta ahora. A diferencia de la nota de arriba (2026-08-17, dejada opt-in por prudencia sobre las 533 apariciones sitewide de .bnsc-img-fill sin acotar), acá SÍ se aplica el mismo fix de forma incondicional pero ACOTADO a los dos selectores de abajo — auditados 1 por 1, ningún caso con min-height:0 en ninguno de los dos grupos (ver auditoría), así que no hay riesgo de que la imagen colapse a 0px. NO se toca .bnsc-img-fill en general (esa preocupación original sigue vigente para el resto de apariciones no auditadas: cards de producto, carruseles, etc.). ---- */ /* Grupo 1: imagen dentro de cualquier hero de tope de página (.bnsc-hero-bg), sea el patrón de UN contenedor con 2 widgets de imagen (desktop/mobile) o el de 2 contenedores .bnsc-img-fill hermanos (ver Grupo 2) anidado dentro de un hero — post 591 "Cuentas" usa esta segunda variante en su hero. */ .bnsc-hero-bg .bnsc-img-fill { position: relative; overflow: hidden; } .bnsc-hero-bg .bnsc-img-fill img { position: absolute !important; inset: 0 !important; } /* Grupo 2: banner "Banner pagos" (pagos/contacto/"¿Necesitas ayuda?"). Este patrón arma el par desktop/mobile con DOS .bnsc-img-fill hermanos completos (no 2 widgets adentro de 1 solo como el hero) -- cada uno se autooculta por breakpoint con las clases nativas de Elementor (.elementor-hidden-tablet.elementor-hidden-mobile = versión desktop, .elementor-hidden-desktop = versión mobile/tablet). Selector específico a esa combinación de clases para NO alcanzar ningún otro uso de .bnsc-img-fill que no sea este patrón exacto. */ .bnsc-img-fill.elementor-hidden-tablet.elementor-hidden-mobile, .bnsc-img-fill.elementor-hidden-desktop { position: relative; overflow: hidden; } .bnsc-img-fill.elementor-hidden-tablet.elementor-hidden-mobile img, .bnsc-img-fill.elementor-hidden-desktop img { position: absolute !important; inset: 0 !important; } /* Héroes — ajustes de escritorio (2026-09-08, ajuste de diseño, sitewide sobre .bnsc-hero-bg, cubre las 97 páginas con hero + cualquiera nueva): columnas fijas 47% contenido / 53% imagen (ambas explícitas a propósito -- primer intento fue al revés, 53% contenido / 47% imagen, se confirmó que quería la proporción invertida: la imagen más grande que el texto), en vez de depender del % que cada página tenga configurado en Elementor (mismo motivo que ya forzó el NIVEL 2 de "imagen junto a contenido" más abajo, evitar accidentes de flex-shrink por página). Alto mínimo garantizado (442px -- `max()` respeta cualquier `--min-height` mayor ya configurado a propósito, nunca lo reduce) y la imagen con `object-fit:fill` (llena la caja exacta sin recortar ni dejar hueco, acepta una leve distorsión si la proporción del asset no calza 1:1 -- decisión explícita solo para heroes; el resto del sitio sigue con `cover`). Escritorio únicamente (`min-width:1025px`, mismo breakpoint que el resto del kit) -- mobile/tablet quedan sin tocar. `.e-con:not(.bnsc-img-fill)` identifica el lado de contenido sin depender de que tenga `bnsc-b-content` (el hero de TDC post 776, por ejemplo, no la usa). */ @media (min-width: 1025px) { .bnsc-hero-bg > .bnsc-boxed { min-height: max(var(--min-height, 0px), 442px) !important; } .bnsc-hero-bg > .bnsc-boxed > .e-con:not(.bnsc-img-fill) { flex: 0 0 47% !important; width: 47% !important; } .bnsc-hero-bg .bnsc-img-fill { flex: 0 0 53% !important; width: 53% !important; } .bnsc-hero-bg .bnsc-img-fill img, .bnsc-img-fill.elementor-hidden-tablet.elementor-hidden-mobile img { object-fit: fill; } } /* Hero "que respira" — opt-in .bnsc-hero-air (prueba 2026-09-21, ajuste de diseño, arranca en Stevens Onix Clásica post 934 antes de escalar sitewide). Problema que resuelve: el bloque de arriba fuerza object-fit:fill sobre la imagen del hero, lo que DISTORSIONA la foto de la tarjeta (se ve "presionada") y la encierra exacta en el recuadro del 53% de su columna. Como las fotos de cada página tienen proporciones distintas, ese recuadro fijo no le sirve a todas por igual. Fix (solo desktop, solo donde esté la clase): la imagen se ancla al borde izquierdo de su columna (donde arranca) pero se dimensiona por su ALTO real (height:100%, width:auto) y se le permite salir de la columna a lo ancho (overflow:visible) hasta un tope prudente (max-width), sin recortar ni deformar -- así cada foto usa exactamente el ancho que necesita para verse bien. Mayor especificidad (.bnsc-hero-air ... = misma cuenta de clases que las reglas de arriba pero cargada después) + !important para ganarle al object-fit:fill / position:absolute / width:100% del bloque global. */ @media (min-width: 1025px) { /* Alto mínimo del hero: baja de 442px (regla global de arriba) a 400px -- ajuste de diseño 2026-09-21. 3 clases (.bnsc-hero-bg.bnsc-hero-air) para ganarle en especificidad a la regla global de 442px. */ .bnsc-hero-bg.bnsc-hero-air > .bnsc-boxed { min-height: max(var(--min-height, 0px), 400px) !important; } /* max-height (reporte 2026-09-26, 2da vuelta): el fix de max-width de abajo (122%→160%) resolvió el hueco vacío en la foto, pero de rebote infló el ALTO de la fila entera en páginas donde la foto tiene proporción ancha -- .bnsc-img-fill queda con height:auto (para poder hacer stretch), y el tamaño HIPOTÉTICO (pre-stretch) de un con height:100% sin padre de alto definido cae al tamaño INTRÍNSECO de la foto (capado solo por max-width) -- con el tope en 160% eso podía dar hasta 678px de alto "deseado" por la foto sola, y como .bnsc-img-fill hace stretch dentro de la fila, ESA fila entera crecía a 678px aunque el texto no lo pidiera (confirmado quitando el padding del texto: la fila no bajaba ni 1px -- la foto era la culpable, no el texto). Boletín: 69 de 112 héroes medían más de 410px, muchos 500-680px, la mayoría con la foto como única causa. Fix: max-height tope a la foto en el mismo piso que la fila (max(var(--min-height,0px),400px)) -- ya no puede "pedir" más alto que eso para el cálculo de stretch, así que la fila vuelve a depender SOLO de min-height (piso) y del texto real. Resultado auditado en las 106 páginas .bnsc-hero-air: 82 quedan en ~400px exactas; de las ~24 que superan el piso, casi todas por 11-30px (texto real: encabezado 2 líneas + párrafo + botones) y 1 outlier real (/tarjetas/baneskin/, párrafo de 5 oraciones, 302px de texto -- candidato a acortar copy, no bug de CSS). En esos ~24 casos la foto queda short e anclada arriba (align-items default, sin gap raro) con el sobrante abajo -- se ve intencional, no roto (verificado visualmente). */ .bnsc-hero-air .bnsc-img-fill { overflow: visible !important; justify-content: center; max-height: max(var(--min-height, 0px), 400px) !important; } .bnsc-hero-air .bnsc-img-fill .elementor-widget-image, .bnsc-hero-air .bnsc-img-fill .elementor-widget-image > .elementor-widget-container { overflow: visible !important; } /* max-width subido de 122% a 160% (reporte 2026-09-26, 1ra vuelta): con la fila ya anclada a 400px por la regla de arriba, este tope casi nunca se activa (400px de alto solo pide ~640-800px de ancho según la proporción de la foto, bien por debajo del tope) -- se deja en 160% como margen de seguridad para fotos futuras más anchas o páginas con --min-height custom más alto, sin costo para las que ya están bien. */ .bnsc-hero-air .bnsc-img-fill img { position: static !important; inset: auto !important; width: auto !important; height: 100% !important; max-width: 160% !important; object-fit: contain !important; margin: 0 auto !important; } } /* Hero con foto APAISADA — opt-in .bnsc-hero-wide (2026-10-02; Blog, Promociones y Bienes Reposeídos). Problema: el tratamiento .bnsc-hero-air dimensiona la imagen por su ALTO (400px) y la deja desbordar hacia la derecha desde el borde izquierdo de su columna. Con un render de tarjeta (proporción ~1.75) eso cabe; con estas fotos (lienzo 1575x800, proporción 1.97, el óvalo + arco ocupan casi todo el lienzo) la imagen mide 788px (859 en Promociones) y se CORTABA por el borde derecho de la pantalla: 52/123px a 1440, 132/203px a 1280, 225/296px a 1100 (a 1920 cabe completa). Fix: se limita el ancho de la foto al espacio que queda hasta el borde derecho de la pantalla. La columna de imagen arranca en ≈ 50vw - 16px, así que el tope es 50vw + 16px (medido en 7 anchos entre 1100 y 1920). Con object-fit:contain la foto se reduce proporcionalmente (sin deformar ni recortar) y queda centrada en vertical; a partir de ~1600px no se activa y todo queda igual. */ @media (min-width: 1025px) { .bnsc-hero-air.bnsc-hero-wide .bnsc-img-fill img { max-width: min(160%, calc(50vw + 16px)) !important; } } /* Hero a sangre completa SITEWIDE (ajuste de diseño 2026-09-21, escalado a desktop 2026-09-26): el hero debe ir de borde a borde, sin el margen blanco alrededor ni las esquinas redondeadas. El margen lo genera el padding (20/40/24/24) del contenedor EXTERIOR que envuelve al .bnsc-hero-bg; las esquinas, su border-radius 24px. `:has(> .bnsc-hero-bg)` alcanza ese contenedor exterior sin depender de un ID de Elementor (que se regenera por clon) -- mismo recurso :has() que ya usa el kit para las filas imagen+contenido. Selector en `.bnsc-hero-bg` (no `.bnsc-hero-air`) para cubrir también los 7 héroes que todavía no tienen el tratamiento "que respira" (Préstamo Goleador, PYME Financiación, Compras a Cuotas, Google Pay, Click to Pay, Capital Humano, Somos Banesco Panamá). Antes solo mobile (≤767px); ahora sin media query -- desktop/tablet ya no conservan la tarjeta redondeada con margen, igual que mobile desde 2026-09-21. Home queda afuera (su hero es `.bnsc-hero-carrusel`, un componente distinto, no `.bnsc-hero-bg`). */ .e-con:has(> .bnsc-hero-bg) { padding: 0 !important; } .bnsc-hero-bg { border-radius: 0 !important; /* Separación mínima con la sección de abajo (reporte 2026-09-27): al quitar el padding del contenedor exterior de arriba, el hero quedó pegado al contenido siguiente sin ningún respiro. margin-bottom en vez de padding-bottom en el wrapper para no reabrir el padding lateral (izquierda/derecha) que justamente se acaba de quitar arriba -- el contexto flex del wrapper no colapsa este margin. */ margin-bottom: 32px !important; } /* CTA de cierre "¿Necesitas ayuda?" (2026-09-08, ajuste de diseño): ancho de columna de contenido a 62% en escritorio, SOLO en este componente -- no usa `.bnsc-hero-bg` (confirmado auditando 3 instancias reales: no lo tiene en ningún nivel de su cadena de ancestros), así que las reglas de héroe de arriba nunca lo tocan y hace falta una regla aparte. Etiquetado por script (scripts/tag-cta-necesitas-ayuda.php, detecta por el texto exacto del heading "¿Necesitas ayuda?" — mismo criterio que tag-info-portrait.php) porque el widget ID se regenera en cada clon (scripts/sync-cta-necesitas-ayuda.php), nunca es estable entre páginas. Solo el ancho de contenido -- no se toca alto mínimo, object-fit, ni el lado de imagen (queda con lo que ya tenía). */ @media (min-width: 1025px) { /* 2026-09-22: se pidió más espacio para la foto ("se ve apretada a lo ancho") -- reducido de 62% a 42% (imagen pasa de 38% a 58% real). Esta es la regla que de verdad manda el ancho (selector compuesto .bnsc-cta-ayuda > .bnsc-b-content, más específico que cualquier clase suelta) -- los intentos previos de ajustar el ancho vía el control nativo `width` de Elementor o vía una clase simple nueva no tenían ningún efecto visual porque esta regla los pisaba silenciosamente. */ .bnsc-cta-ayuda > .bnsc-b-content { flex: 0 0 42% !important; width: 42% !important; } } /* CTA "¿Necesitas ayuda?" — foto mobile (.bnsc-img-fill--contain) con franjas de fondo verde a los costados, "sensación de que está cortada" (reporte 2026-09-24). Sitewide en las 117 páginas que usan este componente (incluye Home). Causa raíz: el widget quedó con min_height:195px (config original), pero la foto compartida actual (adjunto 1273, Group-2-contact.png, la que se subió en el swap de imagen de 2026-08) mide 390x250px real -- proporción 1.56:1. La caja (ancho 100% x 195px) da proporción 2:1 a 390px de viewport -- con object-fit:contain esa diferencia de proporción dejaba la foto "flotando" más angosta que la caja, con el verde de fondo visible a los costados (no es un recorte real, es letterboxing horizontal, pero se lee igual de roto). Fix ORIGINAL (390/250 hardcodeado acá mismo) SUPERSEDIDO 2026-09-24 por el mecanismo genérico "Aspect ratio real por imagen" (ver bloque más abajo, mu-plugin banesco-image-natural-ratio.php) que generalizó este mismo fix a las 408 instancias cover-abs/contain del sitio -- mantener las dos reglas en paralelo (misma especificidad, .bnsc-cta-ayuda .bnsc-img-fill--contain = 2 clases = igual peso que .elementor .bnsc-img-fill--contain del bloque genérico) hizo que la que cargaba después ganara la guerra de cascada, y esa calculaba la proporción de un widget de imagen MUERTO (remanente invisible del swap de foto anterior) en vez de la foto real -- rompió las 117 páginas de este componente hasta que se corrigió la función que elige la imagen. No duplicar: el bloque genérico ya cubre este caso. */ /* ==================================================================================================== Imagen junto a contenido (fila con .bnsc-img-fill + .bnsc-b-content hermanos) — DOS NIVELES. Historia (todo esta sesión, 2026-09-08, iterando): primero se intentó un tratamiento único para TODAS estas filas (align-self + max-height cap, luego clamp, luego aspect-ratio 10/11 global). Se descartó ese camino: auditado el árbol real, el selector `:has(> .bnsc-img-fill):has(> .bnsc-b-content)` cubre **1392 filas con imágenes de proporciones dispares** (ratios de 0.66 a 2.38) — no es un patrón único. Incluye, entre otros, el banner ancho "Realiza tus pagos" (665x280, r=2.38, 522 instancias) y banners landscape de producto (795x468, etc.). Forzar una proporción retrato a todos recortaba la mayoría. Confirmado además que 0 héroes (.bnsc-hero-bg) matchean este selector. NIVEL 1 (baseline, todas las filas MENOS las retrato): solo un tope de altura para que la imagen no se estire a lo alto del texto cuando el lado de contenido es muy alto (caso acordeón Beneficios/ Condiciones abierto). NO toca el ancho: cada imagen conserva el width% que tiene configurado en Elementor, y el recorte lo maneja la regla general de .bnsc-img-fill img (object-fit:cover). Esto deja los banners anchos/landscape exactamente como estaban. NIVEL 2 (opt-in .bnsc-info-portrait): SOLO las filas cuya imagen es realmente vertical (retrato, ~500x550 = 10/11 — "Condiciones y características", "¿Cómo obtener...?"). Se etiquetan por script (scripts/tag-info-portrait.php, detecta imagen retrato en la fila) porque CSS no puede consultar la proporción intrínseca de la imagen para distinguirlas de los banners landscape de una sola imagen. A estas se les da el layout del prototipo: imagen ~42% / texto ~58%, con aspect-ratio 10/11 en el contenedor (= la proporción real del asset, así object-fit:cover NO recorta) para que el TAMAÑO de la imagen dependa de su ancho de columna (predecible) y no de un accidente de flex-shrink por página. Ver ESTADO-PROYECTO.md para el diagnóstico completo. ==================================================== */ /* NIVEL 1 — baseline, excluye las retrato (que llevan su propio tratamiento abajo). */ /* align-self:stretch (antes flex-start, 2026-10-02): con flex-start la altura de la columna de imagen es INDEFINIDA y el height:100% del (y su object-fit nativo) no se resuelve -- caía a su alto intrínseco y dejaba huecos (Home "Promociones y descuentos", "¿Necesitas ayuda?" 195 vs fila 238), lo que obligaba a parches por ID de widget. Con stretch la altura es definida y el tope max-height de abajo sigue acotando (acordeón abierto: la columna no pasa de ese tope). Medido sitewide: de 157 filas solo 7 cambian en escritorio (todas mejoran), 0 en tablet/móvil. Para un card cuyo texto sea más alto que el tope, subir el "Alto mínimo" nativo de la columna de imagen: alimenta --min-height de la fórmula. */ .e-con:not(.bnsc-info-portrait):has(> .bnsc-img-fill):has(> .bnsc-b-content) > .bnsc-img-fill { align-self: stretch; max-height: max(var(--min-height), clamp(380px, 26vw, 550px)) !important; } /* NIVEL 2 — info-banner de imagen vertical (opt-in por clase en la fila). */ /* Filo de color expuesto detrás de la imagen (encontrado en el barrido sitewide, 2026-09-08): 39 de las 75 filas etiquetadas traen su propio `background_color` en la fila (confirmado en el CSS compilado, ej. post 896 "Requisitos para tu Visa Corporate ConnectMiles": `background-color:var(--e-global-color-surface_soft)`) -- color que ANTES de este tratamiento nunca se veía, porque la imagen siempre se estiraba al 100% del alto de la fila y lo tapaba por completo. Ahora que la imagen ya NO se estira (para no perder su proporción), ese color queda expuesto como un filo visible cuando el lado de texto es más alto que la imagen (ej. una lista larga de "Requisitos"). No es un color "muerto" intencional -- es un remanente de un ajuste de Elementor que nunca debía ser visible. Se neutraliza para las filas etiquetadas específicamente (no toca el resto del sitio). */ .bnsc-info-portrait { background: transparent !important; } @media (min-width: 1025px) { .bnsc-info-portrait > .bnsc-img-fill { flex: 0 0 42% !important; width: 42% !important; max-width: 500px; aspect-ratio: 10 / 11; max-height: none !important; /* el aspect-ratio define el alto a partir del ancho de columna */ align-self: flex-start; } .bnsc-info-portrait > .bnsc-b-content { flex: 1 1 auto !important; width: auto !important; } } /* Fuera del media query para que el fill correcto valga también en el stack mobile. object-fit:contain !important (2026-10-02): ajuste del equipo del banco en DEV (CSS adicional del Personalizador, incorporado acá en vez de dejarlo suelto). Antes era cover; con contain la imagen portrait se ve entera, sin recorte, aunque el asset no calce 10/11 exacto. */ .bnsc-info-portrait > .bnsc-img-fill img { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* Padding vertical mínimo GARANTIZADO en las secciones info-portrait (2026-09-08, ajuste de diseño: varias secciones traían el padding vertical en 0 -- confirmado por auditoría: préstamo-auto 743 en 0/0, mientras niños=30, Seguros=60, etc. -- inconsistente). Elementor pinta el padding-block real en el .e-con-inner del contenedor boxed (ver `.e-con-full,.e-con>.e-con-inner{padding-block-*}` en frontend.css), y --padding-block-start/end se heredan desde la sección. Se pone un PISO con max() que NO reduce las que ya traen más (60px de Seguros queda en 60) y sube a 48px las que están por debajo (0 y 30 → 48). El selector :has(> .e-con-inner > .bnsc-info-portrait) apunta SOLO a la sección boxed que envuelve la fila etiquetada (el combinador > exige la ruta exacta, no matchea ancestros más arriba). Desktop-only, igual que el resto del tratamiento portrait; mobile conserva su padding. NO aplica a banners (no llevan .bnsc-info-portrait) -- su espaciado ya está resuelto aparte. */ @media (min-width: 1025px) { .e-con:has(> .e-con-inner > .bnsc-info-portrait) > .e-con-inner { padding-block-start: max(var(--padding-block-start, 0px), 48px) !important; padding-block-end: max(var(--padding-block-end, 0px), 48px) !important; } } /* Orden tablet/móvil de los héroes: es el control NATIVO de la fila del hero (Diseño → Dirección, tablet). Texto primero en el HTML (lector de pantalla/SEO); "Columna invertida" = imagen arriba (foto ovalada, 109 héroes) y "Columna" = imagen abajo pegada al borde (figura recortada con fondo horneado: /cuentas/, /prestamos/, /tarjetas/, /seguros/, landings de Empresas, etc., 13 páginas). 2026-10-04: se quitó la regla que forzaba column-reverse !important a todos (impedía elegirlo por página); las 122 filas ya traían el valor nativo. Un hero nuevo clonado de uno existente hereda su dirección. */ /* Padding default de Elementor (10px por lado en un container sin "padding" explícito, mismo "--container-default-padding" ya documentado arriba para el header) filtrándose en el hero: se acumula en DOS niveles anidados (.bnsc-hero-bg Y el .bnsc-boxed de adentro, 10px + 10px = 20px) y deja un marco de color visible entre el borde del banner y la imagen/texto -- reportado en /prestamos/prestamo-hipoteca/ 2026-09-07. Auditadas las 97 páginas con hero: 69 ya traían "padding":0 puesto a mano en ambos niveles (ningún caso con otro valor, cero riesgo de pisar algo intencional); las ~28 restantes -- entre ellas prestamo-hipoteca -- simplemente no lo tenían seteado y heredaban el default. Mismo criterio que "flex-direction" arriba: en vez de corregir página por página, se fuerza acá para las 97 actuales y cualquier hero nuevo. */ .bnsc-hero-bg, .bnsc-hero-bg > .bnsc-boxed { padding: 0 !important; } /* ---- Cards de producto: imagen a sangre pegada al fondo de la card ---- */ .bnsc-card-img { line-height: 0; margin-top: auto; } .bnsc-card-img .elementor-widget-container, .bnsc-card-img img { margin: 0; padding: 0; } /* Fila de 2 botones dentro de una card de producto (hermana de .bnsc-card-img, ej. "Local"/ "Internacional" en las cards de Cuentas) -- en mobile la card queda angosta pero el design system sitewide de botones (36px de padding horizontal + 16px de fuente, ver ".elementor-button" más abajo en este archivo) no deja espacio para 2 botones en fila; el resultado es que se solapan (medido con Playwright: -7px de gap real entre "Local" e "Internacional" en /cuentas/, en vez de los 12px que pide el JSON) en vez de solo "verse apretados". Scopeado con :has() a la card real (no toca botones de hero/CTA a todo el ancho, que sí tienen lugar de sobra) -- reportado 2026-09-24. Apilar full-width en mobile es más robusto que forzar un padding/fuente más chicos: no depende de qué tan largo sea el texto del botón (hay pares bastante más largos que "Local/Internacional" en otras páginas, ej. "Canales de atención"/"Ver tarifario internacional"). */ @media (max-width: 767px) { .e-con:has(> .bnsc-card-img) .e-con:has(> .elementor-widget-button + .elementor-widget-button) { flex-wrap: wrap !important; } .e-con:has(> .bnsc-card-img) .e-con:has(> .elementor-widget-button + .elementor-widget-button) > .elementor-widget-button { flex: 1 1 100% !important; width: 100% !important; } .e-con:has(> .bnsc-card-img) .e-con:has(> .elementor-widget-button + .elementor-widget-button) > .elementor-widget-button .elementor-button { width: 100%; justify-content: center; } } .bnsc-card-img img { display: block; width: 100%; height: auto; } /* ---- Sección "Otras tarjetas que se pueden adaptar a tus necesidades" (33 páginas /tarjetas/, 2026-09-18) -- capa ADITIVA sobre .bnsc-card-img (no se toca esa clase, la usan ~350 posts con gráficas ya compuestas que sí quieren el sangrado). Acá el asset es una foto cruda de la tarjeta física: si es horizontal queda pegada a los bordes, si es vertical se desborda mucho más alta que la card vecina. Marco de tamaño fijo + object-fit:contain -- misma caja para ambas orientaciones, con aire alrededor en vez de sangrado. scripts/fix-tarjeta-crosssell-image-frame.php agregó esta clase (aditiva, junto a bnsc-card-img) a las 67 imágenes de esta sección en las 33 páginas. */ .bnsc-tarj-crosssell-img { width: 50% !important; height: 210px !important; display: flex !important; align-items: center; justify-content: center; padding: 18px !important; box-sizing: border-box; flex-shrink: 0; /* .bnsc-card-img (clase base) trae margin-top:auto -- empuja la imagen al fondo de la card pensado para su uso original (imagen a sangre pegada abajo). Acá se quiere centrada verticalmente contra la columna de texto, más alta -- align-self:center la centra en el cross-axis de la fila sin pelear con ese margin-top:auto heredado. */ align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important; } .bnsc-tarj-crosssell-img img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; } @media (max-width: 767px) { .bnsc-tarj-crosssell-img { width: 100% !important; height: 160px !important; } } /* ---- Grid de Promociones (shortcode bnsc_promociones_grid) ---- */ .bnsc-promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 1024px) { .bnsc-promo-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .bnsc-promo-grid { grid-template-columns: 1fr; } } /* Card de Promoción (template Elementor 541): mismo criterio de alineación solicitado 2026-09-24 aplicado a Tarjetas/Blog/Bienes. La imagen (id 6772cc7) usa la clase compartida .bnsc-card-img (~350 usos sitewide, pensada para foto "a sangre" al pie de card de producto) -- se va por ID acá para no tocar esa clase global, solo esta instancia puntual. Fotos reales de promoción ya vienen consistentes (~2.7:1 confirmado en las publicadas), pero se fija igual para no depender de que la próxima que suba alguien respete esa proporción a ojo. */ .elementor-element-6772cc7 { aspect-ratio: 2.7 / 1 !important; overflow: hidden !important; } .elementor-element-6772cc7 .elementor-widget-container { height: 100% !important; } .elementor-element-6772cc7 img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Root (e45f580): mismo hallazgo que en Blog/Bienes -- el item real estirado por el grid es ".e-loop-item", un nivel arriba; sin height:100% acá el estirado no llega adentro de la card. Con las promociones publicadas hoy no se nota (títulos de largo similar), pero queda igual de expuesto al bug apenas una promoción tenga un título más largo que sus vecinas de fila -- se corrige preventivo. */ .elementor-element-e45f580 { height: 100% !important; } /* Body (bcc19c4) crece para llenar la card ya estirada por el grid; botón (c7ae0bb) ancla al fondo -- mismo mecanismo que Tarjetas/Blog/Bienes, ver esas secciones para el detalle completo. */ .elementor-element-bcc19c4 { flex: 1 1 auto !important; min-height: 0 !important; } .elementor-element-c7ae0bb { margin-top: auto !important; } .bnsc-promo-grid-footer { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; } .bnsc-promo-grid-count { color: #5A6B7B; font-family: 'Lato', sans-serif; font-size: 14px; margin: 0; } .bnsc-promo-grid-load-more { display: inline-block; background: #F0F2F4; color: #33475B; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 16px; text-decoration: none; padding: 13px 36px; border-radius: 5px; } .bnsc-promo-grid-load-more:hover { background: #E2E9EF; } /* ---- Pills de filtro de Promociones (shortcode bnsc_promociones_pills) ---- */ .bnsc-promo-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 40px 24px 20px; } .bnsc-promo-pill { display: inline-block; background: #F0F2F4; color: #33475B; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 14px; text-decoration: none; padding: 10px 22px; border-radius: 5px; /* 2026-10-02: radio 5px del design system (el banco lo ajustó en DEV; antes 100px) */ transition: background-color 0.15s ease, color 0.15s ease; } .bnsc-promo-pill:hover { background: #E2E9EF; } .bnsc-promo-pill.is-active { background: #08543C; color: #FFFFFF; } .bnsc-promo-pill.is-active:hover { background: #0C3A28; } /* ---- Badge de categoría dentro de la card de Promoción ---- Elementor no dejó fijar el ancho "a medida del contenido" de forma confiable por sus propios controles (varias combinaciones probadas seguían estirando el pill a 100% del ancho de la card). Se fuerza acá, mismo patrón ya usado para el navbar. */ .bnsc-card-badge { display: inline-flex !important; width: fit-content !important; flex: 0 0 auto !important; align-self: flex-start !important; } /* ---- Blog: buscador, pills, grid (shortcodes bnsc_blog_*) ---- */ .bnsc-blog-search { display: flex; align-items: center; max-width: 700px; margin: 0 auto; background: #F6F6F6; border-radius: var(--bnsc-radius-control); padding: 6px 8px 6px 24px; } /* El theme trae un selector genérico "input[type=search], input[type=text], ... { border: 1px solid #666 }" con más especificidad (elemento+atributo) que una clase sola — border:0 sin !important no le ganaba. */ .bnsc-blog-search-input { flex: 1 1 auto; -webkit-appearance: none; appearance: none; border: 0 !important; border-radius: 0 !important; background: transparent; font-family: 'Lato', sans-serif; font-size: 16px; color: #5A6B8A; outline: none; box-shadow: none; padding: 10px 0; } .bnsc-blog-search-input:focus, .bnsc-blog-search-input:focus-visible { border: 0 !important; outline: none; box-shadow: none; } .bnsc-blog-search-input::placeholder { color: #5A6B8A; } /* El navegador dibuja sus propios controles (lupa/tacha) para type="search" — se ocultan para quedarnos solo con el ícono propio del botón. */ .bnsc-blog-search-input::-webkit-search-decoration, .bnsc-blog-search-input::-webkit-search-cancel-button, .bnsc-blog-search-input::-webkit-search-results-button, .bnsc-blog-search-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .bnsc-blog-search-btn, .bnsc-blog-search-btn:hover, .bnsc-blog-search-btn:focus, .bnsc-blog-search-btn:active, .bnsc-blog-search-btn:visited { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: #08543C; cursor: pointer; outline: none; box-shadow: none; } .bnsc-blog-pills-wrap { text-align: center; padding: 24px 24px 8px; } .bnsc-blog-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .bnsc-blog-pill { display: inline-block; background: #F6F6F6 !important; color: #5A6B8A !important; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; padding: 12px 26px; border-radius: var(--bnsc-radius-control); border: 1px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .bnsc-blog-pill:hover { background: #E6EDEB !important; color: #08543C !important; } .bnsc-blog-pill.is-active { background: #E6EDEB !important; color: #08543C !important; border-color: #08543C; } .bnsc-blog-pill-extra { display: none; } .bnsc-blog-pills-wrap.is-expanded .bnsc-blog-pill-extra { display: inline-block; } .bnsc-blog-vermas-row { display: flex; align-items: center; gap: 16px; max-width: 720px; margin: 20px auto 0; padding: 0 24px; } .bnsc-blog-vermas-line { flex: 1 1 auto; height: 1px; background: #DDE3EA; } /* !important en bg/color: el theme trae un estilo genérico de botón con hover rosado que le ganaba por especificidad a estas reglas sin marcar. */ .bnsc-blog-pill-vermas, .bnsc-blog-pill-vermas:hover, .bnsc-blog-pill-vermas:focus, .bnsc-blog-pill-vermas:active, .bnsc-blog-pill-vermas:visited { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: #F6F6F6 !important; border: 0 !important; border-radius: var(--bnsc-radius-control); color: #08543C !important; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 14px; padding: 10px 20px; cursor: pointer; white-space: nowrap; outline: none; box-shadow: none; } .bnsc-blog-pill-vermas:hover { background: #E6EDEB !important; } .bnsc-blog-vermas-chevron { transition: transform 0.2s ease; } .bnsc-blog-pill-vermas.is-expanded .bnsc-blog-vermas-chevron { transform: rotate(180deg); } .bnsc-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 24px; } /* "Otros posts que podrían interesarte" (plantilla 559, contenedor f890a61): el gutter lo da el relleno nativo de la sección (24px, "En caja"); sin esto se sumaban 24 + 24 por lado y en móvil la tarjeta quedaba en 246px de 390 (2026-10-04). */ .bnsc-blog-related-grid { padding: 0; } /* Fondo blanco del cuerpo de la card 557: desde 2026-10-04 es el control NATIVO del contenedor b14ad51 (antes se forzaba aquí con !important porque el contenedor seguía vinculado al color global surface_base #F6F6F6). El listado /blog/ mantiene su variante gris con la regla de contexto .bnsc-blog-main-grid más abajo. */ /* El item REAL de la grilla (align-items:stretch) es ".e-loop-item" (wrapper que genera el Loop Grid de Elementor, un nivel arriba de 170a170) -- confirmado midiendo el DOM: los 3 ".e-loop-item" de una fila SÍ quedan a la misma altura, pero 170a170 (display:flex de Elementor, sin height propio) no heredaba ese estirado y se quedaba en su alto de contenido natural. height:100% acá es lo que faltaba para que el estirado del grid llegue hasta adentro de la card. */ .elementor-557 .elementor-element.elementor-element-170a170 { height: 100% !important; } .elementor-557 .elementor-element.elementor-element-b14ad51 { /* 2026-09-24 (ajuste de diseño): alinear imagen/contenedor/botón entre cards de la misma fila -- el body (fecha+título+extracto+botón) no crecía para llenar la altura ya estirada por el grid (align-items:stretch de .bnsc-blog-grid), así que el botón "Ir al artículo" quedaba a distinta altura según cuánto texto tuviera el extracto. flex:1 lo hace crecer hasta ocupar el resto de la card; min-height:0 evita que el contenido de texto largo le gane al flex-basis (bug clásico). */ flex: 1 1 auto !important; min-height: 0 !important; } /* Botón "Ir al artículo" (c5a39f1): margin-top:auto lo empuja al fondo del body ya crecido de arriba, así queda a la misma altura en toda la fila sin importar cuánto texto tenga el extracto de al lado. */ .elementor-557 .elementor-element.elementor-element-c5a39f1 { margin-top: auto !important; } /* Título (edbee69): tope de 2 líneas -- antes títulos largos desalineaban la altura entre cards vecinas de la misma fila (una card con título de 1 línea vs otra de 3). */ .elementor-557 .elementor-element.elementor-element-edbee69 .elementor-heading-title { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; } /* Imagen destacada (179338d): la card fuente solo trae `width:100%` (alto natural según el aspect ratio real de cada foto subida). Detectado 2026-09-22 -- dos posts con fotos de distinta relación (800x534 vs 550x310) generaban cards de altura distinta en la misma fila del grid. Aspect ratio fijo + cover normaliza la altura de la imagen sin importar la foto que suba cada artículo. */ .elementor-557 .elementor-element.elementor-element-179338d img { aspect-ratio: 3 / 2 !important; object-fit: cover !important; height: auto !important; } /* Fecha (c2b0db8): verde de marca, peso 400 y sin mayúsculas son controles NATIVOS del widget desde 2026-10-04 (antes forzado aquí). */ /* Acordeón "Nested Accordion" de Elementor (Beneficios/Condiciones/Programa de lealtad en /tarjetas/, 2026-09-23): además del borde propio del widget (control "content_border", ya desactivado en el JSON de las 65 instancias -- ver scripts de la sesión), el CSS nativo de Elementor (widget-nested-accordion.min.css) aplica un borde gris de FALLBACK al contenedor de contenido vía un selector `:where()` de especificidad cero (`--n-accordion-border-color`, ~#D5D8DC) -- queda expuesto igual aunque el control del widget esté vacío. Se quita sitewide, no hace falta !important porque :where() ya parte de especificidad 0. */ .e-n-accordion-item > .e-con { border: none; } /* Botón "Ir al artículo" (agregado 2026-09-18, scripts/add-blog-card-readmore-button.php): link de texto + chevron, no el botón "caja" del estándar sitewide -- se anulan radio/padding/borde/fondo heredados de la regla global .elementor-button (ver más abajo en el archivo). El widget button no tiene control propio `css_classes` (ese es específico del widget imagen) -- usa el genérico `_css_classes` del tab Advanced, que va al div.elementor-element exterior, NO al interno. Por eso el selector es descendiente, no compuesto. */ .bnsc-blog-readmore .elementor-button { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; color: #08543C !important; /* Elementor trae `.elementor-button{fill:#fff}` de fábrica (pensado para ícono blanco sobre botón sólido de color) -- fill es heredable en SVG, así que sin este override el chevron queda blanco e invisible sobre esta card blanca. */ fill: #08543C !important; font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 600; } .bnsc-blog-readmore .elementor-button-icon { color: #08543C; font-size: 12px; } .bnsc-blog-readmore:hover, .bnsc-blog-readmore:hover .elementor-button-icon { color: #003B2E !important; fill: #003B2E !important; } @media (max-width: 1024px) { .bnsc-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .bnsc-blog-grid { grid-template-columns: 1fr; } /* Listado /blog/: el gutter móvil lo da la sección (pase global móvil); sin esto se sumaban 24+24 (2026-10-04). Solo el grid principal: el teaser del Home (bnsc-blog-latest-grid) no lleva el pase global y conserva su margen. */ .bnsc-blog-main-grid { padding: 0; } } /* Variante angosta (ej. "Noticias que podrían interesarte" del Home): la grilla vive en una columna del ~52% del boxed, no en el ancho completo del listado de blog — 3 columnas ahí dejan cada card en ~180px y el texto se amontona. */ .bnsc-blog-latest-grid { grid-template-columns: repeat(2, 1fr); } /* Teaser del Home: la card completa del blog trae badge de categoría + extracto (correcto en /blog/), pero el diseño de "Noticias que podrían interesarte" del Figma es más minimal — solo fecha + título, sin badge ni extracto. No tocar la card compartida (557): ocultar acá nomás. */ .bnsc-blog-latest-grid .bnsc-card-badge, .bnsc-blog-latest-grid .elementor-widget-text-editor { /* !important: la card 557 imprime su CSS en un