/*
Theme Name: Crediexpres Child
Theme URI: https://crediexpres.com
Description: Child theme de Astra con engine cinematográfico (Lenis + GSAP + ScrollTrigger). Paleta y tipografías del brand kit Crediexpres.
Author: Luis Valades
Author URI: https://crediexpres.com
Template: astra
Version: 1.0.0
Text Domain: crediexpres-child
*/
/* =========================================================
BRAND TOKENS — variables del Brand Kit
Disponibles para cinematic.css y cualquier custom CSS
========================================================= */
:root {
/* === Color de marca === */
--azul-electrico: #1E5FFF;
--azul-electrico-hover: #0A4FE0;
--azul-marino: #0A1733;
--azul-suave: #E8F0FF;
/* === Diferenciación de producto === */
--hip-accent: #1E5FFF; /* Hipotecario = azul */
--pyme-accent: #10B981; /* PyME = verde */
/* === Spot color cálido === */
--coral: #FF6B47;
--coral-suave: #FFE4DC;
--coral-hover: #E54E2A;
/* === Neutros === */
--gris-texto: #475569; /* +contraste, antes #64748B */
--gris-claro: #F5F7FB;
--gris-borde: #E5E7EB;
--blanco: #FFFFFF;
/* === Estado === */
--verde-exito: #10B981;
/* Tipografía */
--font-titulo: 'Plus Jakarta Sans', sans-serif;
--font-cuerpo: 'Inter', sans-serif;
/* Sombras */
--shadow-sm: 0 1px 2px rgba(10, 23, 51, .06), 0 2px 4px rgba(10, 23, 51, .04);
--shadow-md: 0 4px 8px rgba(10, 23, 51, .06), 0 8px 24px rgba(10, 23, 51, .08);
--shadow-lg: 0 10px 20px rgba(10, 23, 51, .08), 0 24px 60px -20px rgba(10, 23, 51, .18);
--shadow-glow: 0 0 32px rgba(30, 95, 255, .25);
/* Radios */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
/* Easing */
--spring: cubic-bezier(.34, 1.56, .64, 1);
--expo: cubic-bezier(.16, 1, .3, 1);
}
/* =========================================================
Body base — overrides Astra para tipografía premium
========================================================= */
body {
font-family: var(--font-cuerpo);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* =========================================================
FIX RAÍZ — Astra aplica .ast-container { display:flex } sin
flex-direction → secciones lado a lado. Forzamos vertical.
overflow-x: clip evita scroll horizontal SIN romper sticky.
========================================================= */
html { overflow-x: clip; }
body { overflow-x: clip; }
.ast-container,
body.is-home .ast-container,
body.home .ast-container,
body.page .ast-container {
flex-direction: column !important;
}
body.is-home .entry-content,
body.home .entry-content,
body.page .entry-content {
display: block !important;
}
body.is-home .entry-content > *,
body.home .entry-content > *,
body.page .entry-content > * {
display: block;
clear: both;
position: relative; /* establece stacking context para que GSAP pin no se salga */
}
/* =========================================================
MOBILE EDGE PADDING — espacio en los bordes izq/der
Aplica a TODAS las secciones, cards, contenedores en móvil
para que el contenido nunca toque los bordes de la pantalla.
========================================================= */
@media (max-width: 768px) {
/* Container universal */
.container,
body .container,
body section .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Sections con padding lateral */
body section.hero-cinematic,
body section.product-hero,
body section.brand-statement,
body section.stat-ticker,
body section.cta-cinematic,
body section.product-section,
body section.bank-marquee,
body section.h-scroll-stage,
body section.calc-stage,
body section.retrato-stage {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Hero — más padding interno mobile */
body section.hero-cinematic,
body section.product-hero {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Cards (h-scroll, banks, services, etc) — margen interior */
body .h-scroll-card,
body .bank-logo-card,
body .service-card,
body .calc-card,
body .step,
body .yt-card {
margin-left: 4px !important;
margin-right: 4px !important;
}
/* Grids de cards — gap reducido para que quepan con el padding */
body .banks-grid,
body .yt-grid,
body .services-grid {
gap: 12px !important;
}
/* Footer + header containers */
body .ce-footer-grid,
body .ce-footer-bottom,
body .site-header .ast-container,
body .main-header-bar-wrap .ast-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Buttons no full-width en mobile (se quedaba pegado a bordes) */
body .wp-block-button__link,
body .ast-custom-button {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: calc(100% - 8px) !important;
}
/* Text blocks (post-body, blog content) */
body .post-body,
body .entry-content > *:not(section):not(header):not(footer) {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
/* MOBILE PEQUEÑO (≤480px) — un poco más de respiración en bordes */
@media (max-width: 480px) {
body section.hero-cinematic,
body section.product-hero,
body section.brand-statement,
body section.stat-ticker,
body section.cta-cinematic,
body section.product-section,
body section.bank-marquee,
body section.calc-stage,
body section.retrato-stage {
padding-left: 14px !important;
padding-right: 14px !important;
}
.container,
body .container,
body section .container {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* STAT-TICKER ahora sin recuadro navy — texto limpio sobre bg de página */
body section.stat-ticker:not(.section--marino) {
padding-top: clamp(96px, 12vw, 160px) !important; /* bordes generosos arriba */
padding-bottom: clamp(96px, 12vw, 160px) !important; /* bordes generosos abajo */
}
/* En modo light: el contador num-xl mantiene gradient azul, label en gris-texto */
body section.stat-ticker:not(.section--marino) .label-xl {
color: var(--gris-texto) !important;
}
body section.stat-ticker:not(.section--marino) .stat-ticker-item {
border-color: rgba(10, 23, 51, .08);
}
/* H-SCROLL-STAGE — restaurado con scroll horizontal GSAP, overflow defensivo */
/* Sección que sigue al h-scroll: z-index mayor + bg sólido (evita leak del pin) */
/* Brand-statement: contención del pin para evitar leak */
body.is-home .brand-statement,
body.home .brand-statement {
overflow: clip;
contain: layout;
z-index: 1;
}
/* CTA-CINEMATIC — fondo navy premium UNIVERSAL (todas las páginas, todas las clases body)
2026-06-25: rule canónica más universal para garantizar navy en TODAS las páginas
sin depender de body.page (algunos templates Astra no lo agregan) */
html body section.cta-cinematic,
body.is-home section.cta-cinematic,
body.home section.cta-cinematic,
body.page section.cta-cinematic,
body.has-dark-hero section.cta-cinematic,
body.ast-page-builder-template section.cta-cinematic,
body.single section.cta-cinematic,
body.page-template-default section.cta-cinematic {
background: #0A1733 !important;
background-color: #0A1733 !important;
color: white !important;
padding: clamp(36px, 3vw, 48px) 0 !important;
position: relative;
overflow: hidden;
isolation: isolate;
z-index: 3;
}
body.is-home section.cta-cinematic h2,
body.home section.cta-cinematic h2,
body.page section.cta-cinematic h2 {
color: white !important;
}
body.is-home section.cta-cinematic p,
body.home section.cta-cinematic p,
body.page section.cta-cinematic p {
color: rgba(255, 255, 255, .82) !important;
}
/* Texto gigante "CREDIEXPRES" del CTA — controlar tamaño para que no rompa layout */
body section.cta-cinematic [class*="brand-bg"],
body section.cta-cinematic [data-brand-bg],
body section.cta-cinematic .brand-text-bg {
font-size: clamp(8rem, 18vw, 16rem) !important;
opacity: .04 !important;
font-weight: 900 !important;
letter-spacing: -.05em !important;
position: absolute !important;
bottom: -20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
white-space: nowrap !important;
pointer-events: none !important;
z-index: 0 !important;
color: white !important;
}
/* Ocultar el widget demo "Let Me Help You Overshoot..." */
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.site-title {
font-family: var(--font-titulo);
letter-spacing: -.02em;
}
h1 { font-weight: 800; }
/* Links suaves */
a {
transition: color .2s var(--expo);
}
/* Botones Spectra y Astra — un poco más premium */
.wp-block-button__link,
.ast-custom-button,
.elementor-button {
border-radius: var(--radius-md) !important;
transition: transform .2s var(--spring), box-shadow .25s ease, background-color .25s ease;
font-family: var(--font-titulo);
font-weight: 700;
letter-spacing: -.005em;
}
.wp-block-button__link:hover,
.ast-custom-button:hover,
.elementor-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Selección de texto con color de marca */
::selection {
background: var(--azul-electrico);
color: white;
}
/* Scrollbar coherente */
* {
scrollbar-width: thin;
scrollbar-color: var(--azul-electrico) var(--gris-claro);
}
/* Skip link accesible (a11y) */
.skip-link:focus {
background: var(--azul-electrico);
color: white;
padding: 12px 20px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-glow);
}
/* =========================================================
FRONT PAGE + PRODUCT PAGES — sin h1 redundante, full-width
El hero cinematográfico ya tiene su propio título
Aplica a HOME y a cualquier página con hero cinematográfico
========================================================= */
body.is-home .entry-header,
body.is-home .ast-archive-description,
body.home .entry-header,
body.page-template-default.home .entry-header,
body.has-dark-hero .entry-header,
body.page .entry-content > .wp-block-html:first-child + * .entry-header {
display: none !important;
}
/* Para product pages, ocultar el page-title de Astra que se muestra arriba */
.page .entry-content > h1.entry-title,
.page > .entry-header { display: none !important; }
/* =========================================================
SINGLE POST (blog) — full-width sin sidebar + cinematográfico
El hero del contenido reemplaza el entry-title default
========================================================= */
body.crediexpres-blog-single .entry-header,
body.crediexpres-blog-single .ast-archive-description,
body.crediexpres-blog-single .ast-single-post-header,
body.crediexpres-blog-single .post-thumbnail {
display: none !important;
}
/* Quitar sidebar y forzar full width */
body.crediexpres-blog-single #secondary,
body.crediexpres-blog-single .widget-area,
body.crediexpres-blog-single .ast-secondary-builder-page-content,
body.crediexpres-blog-hub #secondary,
body.crediexpres-blog-hub .widget-area {
display: none !important;
}
body.crediexpres-blog-single #primary,
body.crediexpres-blog-single .site-content,
body.crediexpres-blog-single .ast-container,
body.crediexpres-blog-single .ast-article-single,
body.crediexpres-blog-single .entry-content,
body.crediexpres-blog-hub #primary,
body.crediexpres-blog-hub .site-content,
body.crediexpres-blog-hub .ast-container,
body.crediexpres-blog-hub .entry-content {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Las secciones del post-content full-viewport-width */
body.crediexpres-blog-single .entry-content > *,
body.crediexpres-blog-hub .entry-content > * {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
width: 100vw !important;
max-width: 100vw !important;
}
/* Ocultar metadata default de Astra (categorías, autor, fecha) en single post */
body.crediexpres-blog-single .ast-blog-meta-container,
body.crediexpres-blog-single .post-meta,
body.crediexpres-blog-single .ast-author-details,
body.crediexpres-blog-single .ast-tags-and-comment-related-wrap,
body.crediexpres-blog-single .post-navigation,
body.crediexpres-blog-single .nav-links,
body.crediexpres-blog-single .ast-related-posts-wrapper,
body.crediexpres-blog-single .comments-area {
display: none !important;
}
/* Blog hub — quitar el "Sin categoría" y meta basura */
body.crediexpres-blog-hub .ast-blog-meta-container,
body.crediexpres-blog-hub .ast-archive-description,
body.crediexpres-blog-hub .post-meta {
display: none !important;
}
/* OCULTAR title default y meta del single post (Astra usa varios selectores) */
body.crediexpres-blog-single .entry-title,
body.crediexpres-blog-single .post-meta,
body.crediexpres-blog-single .ast-blog-meta-container,
body.crediexpres-blog-single .ast-blog-single-element,
body.crediexpres-blog-single .ast-author-details,
body.crediexpres-blog-single .ast-meta-data,
body.crediexpres-blog-single .ast-blog-featured-section,
body.crediexpres-blog-single header.entry-header,
body.crediexpres-blog-single .single-layout-1 .entry-header,
body.crediexpres-blog-single .ast-single-related-posts-container {
display: none !important;
}
/* =========================================================
SINGLE POST GRID — sidebar izq sticky + main content
========================================================= */
.blog-single-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 40px;
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 1024px) {
.blog-single-grid {
grid-template-columns: 1fr;
gap: 0;
padding: 0;
}
}
/* Sidebar izquierdo */
.blog-sidebar {
position: sticky;
top: 120px;
align-self: start;
height: fit-content;
margin-top: 80px; /* separar del hero arriba */
}
@media (max-width: 1024px) {
.blog-sidebar {
position: static;
margin: 40px 24px;
}
}
.blog-sidebar-inner {
background: white;
border: 1px solid var(--gris-borde);
border-radius: var(--radius-xl);
padding: 28px 24px;
box-shadow: 0 8px 24px -8px rgba(10, 23, 51, .08);
}
.blog-sidebar-eyebrow {
display: inline-block;
font-size: .6875rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--azul-electrico);
font-weight: 700;
margin-bottom: 8px;
}
.blog-sidebar-title {
font-family: var(--font-titulo);
font-weight: 800;
font-size: 1.25rem;
letter-spacing: -.02em;
color: var(--azul-marino);
margin: 0 0 20px;
line-height: 1.2;
}
.blog-sidebar-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 4px;
}
.blog-sidebar-list li {
margin: 0;
}
.blog-sidebar-list li a {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
padding: 14px 12px;
border-radius: 12px;
text-decoration: none;
transition: background .25s var(--expo), transform .25s var(--expo);
align-items: start;
border-left: 3px solid transparent;
}
.blog-sidebar-list li a:hover {
background: var(--azul-suave);
transform: translateX(3px);
border-left-color: var(--azul-electrico);
}
.bs-num {
font-family: var(--font-titulo);
font-weight: 800;
font-size: .875rem;
color: var(--azul-electrico);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.bs-content {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.bs-title {
font-family: var(--font-titulo);
font-weight: 700;
font-size: .8125rem;
color: var(--azul-marino);
line-height: 1.3;
letter-spacing: -.015em;
}
.bs-excerpt {
font-size: .6875rem;
color: var(--gris-texto);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-sidebar-cta {
display: inline-block;
font-family: var(--font-titulo);
font-weight: 700;
font-size: .8125rem;
color: var(--azul-electrico);
text-decoration: none;
padding: 10px 0;
transition: padding-left .25s var(--expo);
border-top: 1px solid var(--gris-borde);
width: 100%;
padding-top: 14px;
}
.blog-sidebar-cta:hover {
padding-left: 6px;
}
/* Main content — el cinematográfico */
.blog-main {
min-width: 0; /* prevent flex/grid overflow */
}
/* Override del full-width injection para el blog grid (que NO sea full-viewport) */
body.crediexpres-blog-single .entry-content > .blog-single-grid {
position: static !important;
left: auto !important;
right: auto !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 1320px !important;
}
/* BODY del single post — fondo blanco TOTAL (overrides agresivo de Astra) */
html body.crediexpres-blog-single,
html body.crediexpres-blog-single .site,
html body.crediexpres-blog-single #content,
html body.crediexpres-blog-single #page,
html body.crediexpres-blog-single .ast-container,
html body.crediexpres-blog-single .site-content,
html body.crediexpres-blog-single .site-content > .ast-container {
background: #FFFFFF !important;
background-color: #FFFFFF !important;
background-image: none !important;
}
/* HEADER del single post — SOLID con MAX especificidad
Triple selector para ganarle a body.has-dark-hero .site-header { transparent } */
html body.crediexpres-blog-single.has-dark-hero .site-header,
html body.has-dark-hero.crediexpres-blog-single .site-header {
background: rgba(10, 23, 51, .96) !important;
background-color: rgba(10, 23, 51, .96) !important;
backdrop-filter: blur(20px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .25) !important;
}
html body.crediexpres-blog-single.has-dark-hero .ast-main-header-wrap,
html body.crediexpres-blog-single.has-dark-hero .main-header-bar,
html body.crediexpres-blog-single.has-dark-hero .main-header-bar-wrap {
background: transparent !important;
}
/* Logo + menú en BLANCO (heredado de body.has-dark-hero — confirmamos) */
html body.crediexpres-blog-single.has-dark-hero .site-title,
html body.crediexpres-blog-single.has-dark-hero .site-title a {
color: #FFFFFF !important;
}
html body.crediexpres-blog-single.has-dark-hero .ast-builder-menu .menu-link,
html body.crediexpres-blog-single.has-dark-hero .main-header-menu .menu-link {
color: rgba(255, 255, 255, .92) !important;
}
/* Las secciones internas del blog-main SE QUEDAN dentro del grid */
body.crediexpres-blog-single .blog-main > * {
position: static !important;
left: auto !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* HERO del post — mantiene su azul marino oscuro original sin border-radius */
body.crediexpres-blog-single .blog-main > section.hero-cinematic,
body.crediexpres-blog-single .blog-main > section.product-hero,
body.crediexpres-blog-single .blog-main > section:first-child {
background: var(--azul-marino) !important;
color: white !important;
border-radius: var(--radius-xl) !important;
overflow: hidden !important;
margin-top: 100px !important;
min-height: 380px !important;
padding: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 56px) !important;
display: block !important;
position: relative !important;
isolation: isolate !important;
}
body.crediexpres-blog-single .blog-main > section:first-child h1 {
font-size: clamp(1.75rem, 3.6vw, 2.75rem) !important;
color: white !important;
}
body.crediexpres-blog-single .blog-main > section:first-child p {
color: rgba(255, 255, 255, .82) !important;
}
body.crediexpres-blog-single .blog-main > section:first-child .container {
max-width: 100% !important;
padding: 0 !important;
}
/* Body content (post-body) — fondo blanco limpio con padding generoso */
body.crediexpres-blog-single .blog-main > section.post-body {
background: white !important;
border-radius: var(--radius-xl);
margin-top: 24px !important;
padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 40px) !important;
border: 1px solid var(--gris-borde);
}
body.crediexpres-blog-single .blog-main > section.post-body > div {
max-width: 100% !important;
padding: 0 !important;
}
/* CTA cinematic mantiene su azul oscuro */
body.crediexpres-blog-single .blog-main > section.cta-cinematic {
margin-top: 24px !important;
border-radius: var(--radius-xl);
overflow: hidden;
padding: clamp(48px, 7vw, 90px) clamp(24px, 4vw, 48px) !important;
}
/* HEADER siempre con contraste fuerte en single post — solid desde el inicio */
body.crediexpres-blog-single .site-header {
background: rgba(10, 23, 51, .92) !important;
backdrop-filter: blur(20px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .25) !important;
}
@media (max-width: 1024px) {
body.crediexpres-blog-single .blog-main > section:first-child,
body.crediexpres-blog-single .blog-main > section.post-body,
body.crediexpres-blog-single .blog-main > section.cta-cinematic {
margin-top: 0 !important;
border-radius: 0 !important;
border: none !important;
}
body.crediexpres-blog-single .blog-main > section:first-child {
margin-top: 60px !important;
border-radius: 0 !important;
}
}
/* Reset paddings de Astra layout en home */
body.is-home #primary,
body.is-home .site-content,
body.is-home .site-content > .ast-container,
body.is-home .site-main,
body.is-home .ast-article-single,
body.is-home .entry-content,
body.home #primary,
body.home .site-content,
body.home .site-content > .ast-container,
body.home .site-main,
body.home .ast-article-single,
body.home .entry-content,
body.page #primary,
body.page .site-content,
body.page .site-content > .ast-container,
body.page .site-main,
body.page .ast-article-single,
body.page .entry-content {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Las secciones cinematográficas SIEMPRE full-viewport-width
Aunque estén dentro de wrappers limitados de Astra */
body.is-home .entry-content > *,
body.home .entry-content > *,
body.page .entry-content > *,
body.single-page .entry-content > * {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
width: 100vw !important;
max-width: 100vw !important;
}
body.is-home .entry-content section,
body.home .entry-content section,
body.page .entry-content section,
body.single-page .entry-content section {
width: 100% !important;
max-width: 100% !important;
}
/* Hero h1 — escala más equilibrada en pantallas grandes */
.hero-cinematic h1 {
font-size: clamp(2.25rem, 5.5vw, 4.75rem) !important;
line-height: 1.05 !important;
}
.hero-cinematic .container,
.product-hero .container,
.brand-statement .container,
.cta-cinematic .container,
.stat-ticker .container,
.product-section .container,
.calc-stage .container {
max-width: 1320px !important;
margin: 0 auto !important;
padding: 0 clamp(24px, 5vw, 64px) !important;
width: 100% !important;
}
.hero-cinematic .container {
position: relative;
z-index: 5;
}
/* =========================================================
HEADER — site title con tipografía premium
========================================================= */
.site-title {
font-family: var(--font-titulo) !important;
font-weight: 800 !important;
letter-spacing: -.025em !important;
font-size: 1.5rem !important;
}
.site-title a {
color: var(--azul-marino) !important;
text-decoration: none !important;
}
.site-title a::before {
content: '';
display: inline-block;
width: 28px;
height: 28px;
margin-right: 10px;
vertical-align: -7px;
border-radius: 8px;
background: linear-gradient(135deg, var(--azul-electrico), #6B95FF);
box-shadow: 0 4px 12px -2px rgba(30,95,255,.4);
position: relative;
}
/* Menu items con tipografía y hover premium + underline animado */
.main-header-menu .menu-link,
.ast-builder-menu .menu-link,
.ast-header-navigation .menu-link {
font-family: var(--font-titulo) !important;
font-weight: 600 !important;
font-size: .9375rem !important;
color: var(--azul-marino) !important;
letter-spacing: .005em !important;
transition: color .25s var(--expo, cubic-bezier(.16,1,.3,1));
padding: 10px 6px !important;
position: relative;
}
/* Gap horizontal real entre items (separación más limpia que padding excesivo) */
.main-header-menu > .menu-item,
.ast-builder-menu > .menu-item,
.ast-header-navigation .menu > .menu-item {
margin: 0 12px !important;
}
.main-header-menu > .menu-item:first-child,
.ast-builder-menu > .menu-item:first-child { margin-left: 0 !important; }
.main-header-menu > .menu-item:last-child,
.ast-builder-menu > .menu-item:last-child { margin-right: 0 !important; }
/* Underline animado bajo el link */
.main-header-menu > .menu-item > .menu-link::after,
.ast-builder-menu > .menu-item > .menu-link::after {
content: '';
position: absolute;
left: 6px;
right: 6px;
bottom: 4px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--azul-electrico), #6B95FF);
transform: scaleX(0);
transform-origin: left center;
transition: transform .35s var(--expo, cubic-bezier(.16,1,.3,1));
pointer-events: none;
}
.main-header-menu > .menu-item > .menu-link:hover::after,
.ast-builder-menu > .menu-item > .menu-link:hover::after,
.main-header-menu > .menu-item.current-menu-item > .menu-link::after,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link::after,
.ast-builder-menu > .menu-item.current-menu-item > .menu-link::after,
.ast-builder-menu > .menu-item.current-menu-ancestor > .menu-link::after {
transform: scaleX(1);
}
/* Hover y current state — color azul */
.main-header-menu .menu-link:hover,
.ast-builder-menu .menu-link:hover,
.ast-header-navigation .menu-link:hover,
.main-header-menu .menu-item.current-menu-item > .menu-link,
.ast-builder-menu .menu-item.current-menu-item > .menu-link,
.main-header-menu .menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu .menu-item.current-menu-ancestor > .menu-link {
color: var(--azul-electrico) !important;
}
/* Header container más ancho */
.site-header .ast-container,
.main-header-bar-wrap .ast-container,
.main-header-bar-wrap .main-header-container {
max-width: 1380px !important;
padding-left: 28px !important;
padding-right: 28px !important;
}
/* Permitir menú horizontal sin wrap */
.main-header-menu,
.ast-header-navigation .menu {
flex-wrap: nowrap !important;
white-space: nowrap;
align-items: center;
}
/* Gap entre logo y nav (header-builder) */
.ast-builder-grid-row {
column-gap: 32px !important;
}
/* Submenús (Hipotecario ▾, PyME ▾, Calculadora ▾) — flecha más visible */
.main-header-menu .menu-item-has-children > .menu-link::before,
.ast-builder-menu .menu-item-has-children > .menu-link::before {
content: '';
}
/* Mobile: revertir espaciado horizontal — items en stack vertical no necesitan margin lateral */
@media (max-width: 920px) {
.main-header-menu > .menu-item,
.ast-builder-menu > .menu-item {
margin: 0 !important;
}
.main-header-menu > .menu-item > .menu-link::after,
.ast-builder-menu > .menu-item > .menu-link::after {
display: none;
}
}
/* =========================================================
★ RESIZE CINEMATIC — escala equilibrada para WP/Astra
Basado en medidas reales del Astra Starter Template
(hero 250px desktop / 130px tablet, sections 100px, container 1140px)
========================================================= */
/* ---------- PRODUCT HERO = HERO CINEMATIC (mismas medidas/estilos) ---------- */
.product-hero,
.hero-cinematic {
position: relative;
min-height: 78dvh !important;
padding: clamp(160px, 18vh, 200px) 0 clamp(70px, 9vh, 110px) !important;
background: var(--azul-marino) !important;
color: white !important;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: flex-start;
}
.product-hero h1,
.hero-cinematic h1 {
font-size: clamp(2.25rem, 5vw, 4.5rem) !important;
line-height: 1.05 !important;
letter-spacing: -.03em !important;
color: white !important;
margin-bottom: 28px !important;
text-wrap: balance;
}
.product-hero p {
font-size: clamp(1rem, 1.3vw, 1.125rem) !important;
line-height: 1.55 !important;
max-width: 580px !important;
}
/* Quick stats del product hero */
/* Product hero — mismas layers que hero-cinematic (4 capas paralax) */
.product-hero .hero-layer,
.hero-cinematic .hero-layer {
position: absolute !important;
inset: 0;
pointer-events: none;
will-change: transform;
}
.product-hero .layer-grid,
.hero-cinematic .layer-grid {
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.product-hero .layer-particles,
.hero-cinematic .layer-particles {
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 1px, transparent 2px),
radial-gradient(circle at 70% 60%, rgba(255,255,255,.5) 1px, transparent 2px),
radial-gradient(circle at 40% 80%, rgba(147,180,255,.7) 1px, transparent 2px),
radial-gradient(circle at 85% 25%, rgba(255,255,255,.4) 1px, transparent 2px);
background-size: 220px 220px, 280px 280px, 320px 320px, 240px 240px;
background-position: 0 0, 30px 30px, 60px 60px, 90px 90px;
}
.product-hero .layer-orb-1,
.hero-cinematic .layer-orb-1 {
width: 600px !important;
height: 600px !important;
right: -150px !important;
top: -100px !important;
background: radial-gradient(circle, rgba(30,95,255,.45), transparent 60%) !important;
filter: blur(40px) !important;
inset: auto !important;
position: absolute !important;
}
.product-hero .layer-orb-2,
.hero-cinematic .layer-orb-2 {
width: 480px !important;
height: 480px !important;
left: -120px !important;
bottom: -120px !important;
background: radial-gradient(circle, rgba(75,127,255,.32), transparent 60%) !important;
filter: blur(50px) !important;
inset: auto !important;
position: absolute !important;
}
/* Auto-injection de layers + scroll-cue al product-hero (PHP haría esto, CSS fallback) */
.product-hero { container-type: inline-size; }
/* ---------- PRODUCT SECTIONS ---------- */
.product-section {
padding: clamp(56px, 6.4vw, 96px) 0 !important; /* 2026-06-24 F2: ritmo unificado al del home (~92px) */
}
.product-section--alt {
background: var(--gris-claro) !important;
}
/* 2026-07-01 Luis: dos .product-section consecutivas plain (sin --alt) generan
~160px de whitespace apilando padding-bottom + padding-top. Colapsar padding-top
del segundo para dejar solo ~80px de gap visual. */
.product-section:not(.product-section--alt) + .product-section:not(.product-section--alt) {
padding-top: 0 !important;
}
.product-section .container,
.product-section--alt .container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 24px !important;
width: 100% !important;
}
.product-section h2 {
font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
line-height: 1.15 !important;
letter-spacing: -.025em !important;
text-wrap: balance;
}
.product-section .section-eyebrow {
display: inline-block;
font-size: .75rem !important;
color: var(--azul-electrico) !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
margin-bottom: 14px !important;
}
.product-section .section-subtitle {
color: var(--gris-texto) !important;
font-size: 1rem !important;
max-width: 640px;
margin: 14px auto 0 !important;
line-height: 1.55;
}
/* ---------- STEPS — GRID 4 COLUMNAS PREMIUM ----------
2026-07-01 Luis: 4 cards en 1 fila desktop, 2 en tablet, 1 en mobile
Selector con especificidad (0,1,2) para vencer a `section.product-section .steps`
que estaba en cinematic.css con repeat(3, 1fr) */
html body .steps,
html body section .steps,
html body section.product-section .steps {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: clamp(14px, 1.5vw, 20px) !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0;
}
/* 2026-07-01 Luis: cols dinámicas por count · 6 items → 3+3, 5 items → 3+2, 3 items → 3 cols */
html body .steps.steps-3,
html body section .steps.steps-3,
html body section.product-section .steps.steps-3,
html body .steps.steps-5,
html body section .steps.steps-5,
html body section.product-section .steps.steps-5,
html body .steps.steps-6,
html body section .steps.steps-6,
html body section.product-section .steps.steps-6 {
grid-template-columns: repeat(3, 1fr) !important;
}
/* mobile overrides con especificidad ≥ (0,3,3) para vencer la regla base
`html body section.product-section .steps.steps-6` que si no gana en móvil */
@media (max-width: 1024px) {
html body section.product-section .steps,
html body section.product-section .steps.steps-3,
html body section.product-section .steps.steps-4,
html body section.product-section .steps.steps-5,
html body section.product-section .steps.steps-6 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
html body section.product-section .steps,
html body section.product-section .steps.steps-3,
html body section.product-section .steps.steps-4,
html body section.product-section .steps.steps-5,
html body section.product-section .steps.steps-6 {
grid-template-columns: 1fr !important;
}
}
.step {
display: grid !important;
grid-template-columns: 56px 1fr !important;
gap: 16px !important;
padding: clamp(20px, 2vw, 26px) !important;
background: white !important;
border: 1px solid var(--gris-borde) !important;
border-radius: var(--radius-xl) !important;
position: relative !important;
align-items: start;
isolation: isolate;
overflow: hidden;
box-shadow:
0 1px 0 rgba(30, 95, 255, .04),
0 8px 24px -8px rgba(10, 23, 51, .08) !important;
transition:
transform .4s var(--spring),
box-shadow .35s ease,
border-color .25s ease;
top: auto !important;
z-index: 1;
}
/* Desktop 4-col: layout vertical más compacto */
@media (min-width: 1025px) {
.step {
grid-template-columns: 1fr !important;
padding: clamp(18px, 1.8vw, 24px) !important;
gap: 12px !important;
}
}
/* Spotlight gradient sutil arriba-izquierda */
.step::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 60% at 0% 0%, rgba(30, 95, 255, .05), transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity .35s ease;
z-index: 0;
}
/* Línea acento gradient en la parte superior — premium feel */
.step::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
var(--azul-electrico) 0%,
#6B95FF 50%,
transparent 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform .5s var(--expo);
z-index: 1;
}
.step > * { position: relative; z-index: 2; }
.step:hover {
transform: translateY(-6px) !important;
border-color: rgba(30, 95, 255, .25) !important;
box-shadow:
0 1px 0 rgba(30, 95, 255, .12),
0 16px 40px -8px rgba(30, 95, 255, .15),
0 28px 70px -20px rgba(10, 23, 51, .20) !important;
}
.step:hover::before { opacity: 1; }
.step:hover::after { transform: scaleX(1); }
.step:hover .step-num {
transform: scale(1.08);
box-shadow:
0 14px 30px -6px rgba(30, 95, 255, .55),
0 0 0 8px rgba(30, 95, 255, .12),
0 0 0 1px rgba(255, 255, 255, .6) inset !important;
}
/* MOBILE — 1 columna en mobile pequeño */
@media (max-width: 640px) {
.steps {
grid-template-columns: 1fr !important;
gap: 14px !important;
padding-bottom: 0 !important;
}
}
/* Número grande en círculo con glow + ring */
.step-num {
display: grid !important;
place-items: center !important;
width: 64px !important;
height: 64px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, var(--azul-electrico) 0%, #4B7FFF 100%) !important;
color: white !important;
font-family: var(--font-titulo) !important;
font-weight: 800 !important;
font-size: 1.5rem !important;
margin-bottom: 0 !important;
margin-left: auto !important;
margin-right: 14px !important;
box-shadow:
0 10px 24px -6px rgba(30,95,255,.5),
0 0 0 6px rgba(30,95,255,.08),
0 0 0 1px rgba(255,255,255,.5) inset !important;
position: relative;
z-index: 2;
transition: transform .3s var(--spring), box-shadow .3s ease;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.step:hover .step-num {
transform: scale(1.08) !important;
box-shadow:
0 14px 32px -6px rgba(30,95,255,.6),
0 0 0 10px rgba(30,95,255,.12),
0 0 0 1px rgba(255,255,255,.6) inset !important;
}
/* Contenido del paso */
.step > h4,
.step > p {
margin: 0;
}
.step h4 {
font-family: var(--font-titulo) !important;
font-size: 1.125rem !important;
font-weight: 700 !important;
letter-spacing: -.015em !important;
color: var(--azul-marino) !important;
margin-bottom: 6px !important;
margin-top: 14px !important;
line-height: 1.3 !important;
}
.step p {
font-size: .9375rem !important;
line-height: 1.55 !important;
color: var(--gris-texto) !important;
margin: 0 !important;
margin-top: 2px !important;
}
/* Wrapper para h4 + p (en grid) */
.step h4 + p,
.step p {
grid-column: 2;
}
.step h4 {
grid-column: 2;
}
.step .step-num {
grid-row: 1 / span 2;
margin-top: 4px !important;
}
/* 2026-07-05 Luis "utiliza todo el espacio": en desktop el layout era
1 columna pero h4/p seguían forzados a `grid-column:2` (columna implícita)
→ dejaban un hueco vacío debajo del número. Ahora: fila 1 = número + título,
fila 2 = descripción a ancho completo. Aprovecha toda la card. */
@media (min-width: 1025px) {
.step {
grid-template-columns: auto 1fr !important;
column-gap: 16px !important;
row-gap: 10px !important;
padding: clamp(20px, 1.9vw, 26px) !important;
align-items: center;
}
.step .step-num {
grid-row: 1 !important;
grid-column: 1 !important;
margin: 0 !important;
align-self: center !important;
}
.step > h4 {
grid-column: 2 !important;
grid-row: 1 !important;
margin: 0 !important;
align-self: center !important;
}
.step > p,
.step h4 + p {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
margin: 0 !important;
}
}
/* Ocultar SVG path drawing (era para steps horizontales) */
.steps-svg { display: none !important; }
.steps::before { display: none !important; }
/* MOBILE: stack más compacto, offsets más chicos */
@media (max-width: 768px) {
.steps {
gap: 16px !important;
/* 2026-07-01 Luis: era 80px, dejaba whitespace grande antes de la próxima
sección. Reducido a 0 — el section padding-bottom ya da el aire. */
padding-bottom: 0 !important;
}
.step {
grid-template-columns: 56px 1fr !important;
gap: 14px !important;
padding: 22px 18px !important;
border-radius: 18px !important;
}
/* 2026-07-01 Luis: estos `top: NNpx` en position:relative empujan cada card
hacia abajo dejando espacio vacío detrás (sin sticky no tiene efecto de stack).
Neutralizados en mobile para eliminar el gap fantasma entre Disposición y la siguiente sección. */
.step:nth-child(1),
.step:nth-child(2),
.step:nth-child(3),
.step:nth-child(4),
.step:nth-child(5),
.step:nth-child(6),
.step:nth-child(7),
.step:nth-child(8) { top: 0 !important; }
.step-num {
width: 44px !important;
height: 44px !important;
font-size: 1.0625rem !important;
margin-right: 0 !important;
}
.step h4 {
font-size: 1rem !important;
margin-top: 4px !important;
}
.step p {
font-size: .875rem !important;
}
}
/* ---------- PRODUCT GRID 2-COL (comparativa) ---------- */
.product-grid-2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: clamp(40px, 6vw, 80px) !important;
align-items: center;
}
@media (max-width: 900px) {
.product-grid-2 { grid-template-columns: 1fr !important; }
}
.product-info-list {
list-style: none !important;
display: grid;
gap: 12px;
padding: 0;
}
.product-info-list li {
display: grid;
grid-template-columns: 24px 1fr;
gap: 12px;
font-size: .9375rem;
line-height: 1.5;
align-items: start;
color: var(--gris-texto);
}
.product-info-list li::before {
content: '';
width: 22px; height: 22px;
margin-top: 2px;
border-radius: 50%;
background: var(--verde-exito) url("data:image/svg+xml;utf8,") center/14px no-repeat;
flex-shrink: 0;
}
.product-info-card {
background: white !important;
border-radius: var(--radius-lg) !important;
padding: clamp(24px, 3vw, 36px) !important;
box-shadow: var(--shadow-md) !important;
border: 1px solid var(--gris-borde) !important;
}
.product-info-card h3 {
margin-bottom: 16px !important;
font-size: 1.125rem !important;
}
.product-table {
width: 100% !important;
border-collapse: collapse !important;
font-size: .9375rem !important;
}
.product-table th {
padding: 12px 14px;
text-align: left;
font-family: var(--font-titulo);
font-weight: 700;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--azul-marino);
background: var(--gris-claro);
}
.product-table td {
padding: 12px 14px;
border-top: 1px solid var(--gris-borde);
color: var(--gris-texto);
}
.product-table tr:hover td { background: var(--azul-suave); }
.product-table td:first-child { font-weight: 600; color: var(--azul-marino); }
/* ---------- USE CASES GRID ---------- */
.grid-3 {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 24px !important;
}
.card {
background: white;
border: 1px solid var(--gris-borde);
border-radius: var(--radius-lg);
padding: 28px 24px;
transition: transform .3s var(--spring), border-color .25s ease, box-shadow .25s ease;
}
.card:hover {
transform: translateY(-4px);
border-color: var(--azul-electrico);
box-shadow: var(--shadow-md);
}
.card h3 {
font-size: 1.0625rem !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
letter-spacing: -.01em;
}
.card p {
font-size: .875rem !important;
line-height: 1.5 !important;
color: var(--gris-texto);
margin: 0;
}
/* ---------- HERO CINEMATIC (home) ---------- */
.hero-cinematic {
padding: clamp(140px, 18vh, 200px) 0 clamp(80px, 10vh, 120px) !important;
min-height: 88dvh !important;
}
.hero-cinematic h1 {
font-size: clamp(2.25rem, 5vw, 4.5rem) !important;
line-height: 1.05 !important;
letter-spacing: -.03em !important;
margin-bottom: 28px !important;
}
.hero-cinematic .kicker {
font-size: .8125rem !important;
margin-bottom: 24px !important;
gap: 14px !important;
}
.hero-cinematic .kicker .num {
font-size: 1.875rem !important;
font-weight: 800 !important;
}
.hero-cinematic p {
font-size: clamp(1rem, 1.3vw, 1.125rem) !important;
line-height: 1.55 !important;
margin-bottom: 32px !important;
max-width: 580px !important;
}
/* ---------- VELOCITY TEXT (bancos) — REDUCIDO ~50% ---------- */
/* ---------- BRAND STATEMENT — display XXL ----------
Altura controlada — flex center para que el contenido SIEMPRE quede
en el centro vertical mientras el usuario scrollea por la sección. */
.brand-statement {
height: auto !important;
min-height: auto !important;
display: block !important;
padding: 0 !important;
}
.brand-statement-pin {
width: 100%;
height: auto !important;
min-height: auto !important;
padding: clamp(48px, 5vw, 80px) 16px !important;
display: block !important;
place-items: unset !important;
}
.brand-statement-headline {
font-size: clamp(6.5rem, 18vw, 16rem) !important; /* hasta 256px en pantallas grandes */
line-height: .94 !important;
gap: clamp(2px, 0.3vw, 8px) !important;
letter-spacing: -.06em !important; /* MUY tight para texto display gigante */
font-weight: 800 !important; /* máximo cargado en Plus Jakarta Sans */
}
.brand-statement-headline .reveal-row {
gap: clamp(8px, 0.9vw, 18px) !important; /* gap entre palabras tight */
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
}
.brand-statement-sub {
font-size: clamp(1.5rem, 1.8vw, 1.75rem) !important; /* +33% sub para acompañar headline gigante */
margin-top: clamp(40px, 4.5vw, 60px) !important;
max-width: 760px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
}
/* ---------- STAT TICKER (números) ---------- */
.stat-ticker {
padding: 0 !important;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
gap: clamp(20px, 3vw, 48px) !important;
}
.stat-ticker-item .num-xl {
font-size: clamp(2.25rem, 4vw, 3.5rem) !important;
margin-bottom: 8px !important;
}
.stat-ticker-item .label-xl {
font-size: .875rem !important;
line-height: 1.45 !important;
}
/* ---------- HORIZONTAL SCROLL CARDS (10 productos) ---------- */
/* ---------- SERVICES GRID (4 razones) ---------- */
.service-card {
padding: 28px 24px !important;
min-height: auto !important;
}
.service-card h3 {
font-size: 1.0625rem !important;
}
.service-card p {
font-size: .875rem !important;
line-height: 1.5 !important;
}
/* ---------- CTA CINEMATIC (final) ---------- */
.cta-cinematic {
padding: clamp(70px, 10vw, 130px) 0 !important;
}
.cta-cinematic h2 {
font-size: clamp(1.75rem, 3.8vw, 3rem) !important;
line-height: 1.1 !important;
margin-bottom: 20px !important;
}
.cta-cinematic .cta-bg-text {
font-size: clamp(3.5rem, 9vw, 8rem) !important;
bottom: -1.5vw !important;
}
.cta-cinematic p {
font-size: 1rem !important;
margin-bottom: 32px !important;
}
/* ---------- SECCIONES GENERALES (paddings unificados) ---------- */
body.is-home .entry-content > section,
body.home .entry-content > section {
/* Override del full-width injection con padding interno consistente */
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Eyebrow / kicker labels (Por qué Crediexpres, Resultados reales, etc.) */
body.is-home .entry-content section [style*="text-transform:uppercase"] {
font-size: .75rem !important;
letter-spacing: .14em !important;
}
/* Titles de sección H2 (encima de stat ticker, services, etc.) */
body.is-home .entry-content section h2 {
font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
line-height: 1.15 !important;
letter-spacing: -.025em !important;
}
/* CTAs (botones primarios y ghost) — medida estándar Spectra */
body.is-home .entry-content a[class*="wp-block-button__link"] {
padding: 14px 28px !important;
font-size: .9375rem !important;
border-radius: 10px !important;
font-family: var(--font-titulo) !important;
font-weight: 700 !important;
letter-spacing: -.005em !important;
}
body.is-home .entry-content a[class*="wp-block-button__link"][style*="background:#1E5FFF"]:hover {
background: #0A4FE0 !important;
}
/* =========================================================
HEADER STICKY — transparent over hero, solid on scroll
Animación premium con backdrop-blur + reducción de altura
========================================================= */
body.is-home .site-header,
body.home .site-header,
body.has-dark-hero .site-header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: transparent !important;
border-bottom: 1px solid transparent !important;
box-shadow: none !important;
transition:
background-color .35s var(--expo),
backdrop-filter .35s var(--expo),
border-color .35s var(--expo),
box-shadow .35s var(--expo),
padding .35s var(--expo) !important;
will-change: background-color, backdrop-filter;
}
/* Estado SCROLLED — minimal, blur sutil sin saturar la pantalla */
body.is-home.is-scrolled .site-header,
body.home.is-scrolled .site-header,
body.has-dark-hero.is-scrolled .site-header,
body.is-scrolled .site-header {
background: rgba(10, 23, 51, .85) !important;
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .4) !important;
}
/* Menu items scrolled — blanco con peso correcto */
body.is-scrolled .ast-builder-menu > .menu-item > .menu-link,
body.is-scrolled .main-header-menu > .menu-item > .menu-link {
color: rgba(255, 255, 255, .9) !important;
font-weight: 500 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* 2026-07-03 Luis (bug 4): al scrollear el header es glass BLANCO — hover blanco
dejaba la palabra invisible (el pill de fondo se quitó en un sprint anterior
pero este color quedó). Ahora hover = azul eléctrico. */
body.is-scrolled .ast-builder-menu > .menu-item > .menu-link:hover,
body.is-scrolled .main-header-menu > .menu-item > .menu-link:hover {
color: #1E5FFF !important;
}
/* Item activo: solo color azul claro y peso semibold (sin pill, sin background) */
body.is-scrolled .ast-builder-menu > .menu-item.current-menu-item > .menu-link,
body.is-scrolled .main-header-menu > .menu-item.current-menu-item > .menu-link,
body.is-scrolled .ast-builder-menu > .menu-item.current-menu-ancestor > .menu-link {
color: #6B95FF !important;
font-weight: 600 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: inherit !important;
}
/* Logo en scrolled */
body.is-scrolled .site-title,
body.is-scrolled .site-title a {
color: #FFFFFF !important;
}
/* Línea de luz sutil debajo del header al scrollear */
body.is-home.is-scrolled .site-header::after,
body.home.is-scrolled .site-header::after,
body.has-dark-hero.is-scrolled .site-header::after {
content: '';
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(30, 95, 255, .35) 25%,
rgba(147, 180, 255, .55) 50%,
rgba(30, 95, 255, .35) 75%,
transparent 100%
);
opacity: 0;
animation: headerLineFadeIn .8s ease forwards;
pointer-events: none;
}
@keyframes headerLineFadeIn {
to { opacity: 1; }
}
/* Efecto liquid glass — gradient blob sutil que se mueve detrás del header */
body.is-home.is-scrolled .site-header::before,
body.home.is-scrolled .site-header::before,
body.has-dark-hero.is-scrolled .site-header::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 100% at 20% 50%, rgba(30, 95, 255, .12), transparent 60%),
radial-gradient(ellipse 50% 100% at 80% 50%, rgba(75, 127, 255, .08), transparent 60%);
opacity: 0;
animation: headerGlowFadeIn .6s ease forwards;
pointer-events: none;
z-index: -1;
}
@keyframes headerGlowFadeIn {
to { opacity: 1; }
}
/* Reducir altura del header cuando hace scroll */
body.is-home.is-scrolled .main-header-bar,
body.home.is-scrolled .main-header-bar,
body.has-dark-hero.is-scrolled .main-header-bar {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* Logo más chico cuando scrolled */
body.is-home.is-scrolled .site-title,
body.home.is-scrolled .site-title,
body.has-dark-hero.is-scrolled .site-title {
font-size: 1.25rem !important;
transition: font-size .3s var(--expo);
}
body.is-home .site-title,
body.home .site-title,
body.has-dark-hero .site-title {
transition: font-size .3s var(--expo);
}
/* Páginas SIN dark-hero (excluye blog single/hub) — header normal sticky */
body.crediexpres-child:not(.is-home):not(.has-dark-hero):not(.crediexpres-blog-single):not(.crediexpres-blog-hub) .site-header {
position: sticky !important;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, .92) !important;
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
border-bottom: 1px solid rgba(0, 0, 0, .05) !important;
transition: box-shadow .3s var(--expo) !important;
}
body.crediexpres-child:not(.is-home):not(.has-dark-hero):not(.crediexpres-blog-single):not(.crediexpres-blog-hub).is-scrolled .site-header {
box-shadow: 0 4px 16px -4px rgba(10, 23, 51, .12) !important;
}
/* BLOG SINGLE/HUB header — solid azul marino permanente con MAX especificidad */
body.crediexpres-blog-single .site-header,
body.crediexpres-blog-single.is-scrolled .site-header,
body.crediexpres-blog-hub .site-header,
body.crediexpres-blog-hub.is-scrolled .site-header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(10, 23, 51, .96) !important;
background-color: rgba(10, 23, 51, .96) !important;
backdrop-filter: blur(20px) saturate(1.4) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .25) !important;
}
body.crediexpres-blog-single .ast-main-header-wrap,
body.crediexpres-blog-single .main-header-bar,
body.crediexpres-blog-hub .ast-main-header-wrap,
body.crediexpres-blog-hub .main-header-bar {
background: transparent !important;
background-color: transparent !important;
}
body.crediexpres-blog-single .site-title,
body.crediexpres-blog-single .site-title a,
body.crediexpres-blog-hub .site-title,
body.crediexpres-blog-hub .site-title a {
color: #FFFFFF !important;
}
body.crediexpres-blog-single .ast-builder-menu .menu-link,
body.crediexpres-blog-single .main-header-menu .menu-link,
body.crediexpres-blog-hub .ast-builder-menu .menu-link,
body.crediexpres-blog-hub .main-header-menu .menu-link {
color: rgba(255, 255, 255, .92) !important;
}
body.crediexpres-blog-single .ast-builder-menu .menu-link:hover,
body.crediexpres-blog-hub .ast-builder-menu .menu-link:hover {
color: #FFFFFF !important;
}
body.is-home .ast-main-header-wrap,
body.home .ast-main-header-wrap,
body.has-dark-hero .ast-main-header-wrap,
body.is-home .main-header-bar,
body.home .main-header-bar,
body.has-dark-hero .main-header-bar {
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
transition: padding .35s var(--expo);
}
/* Site title + logo en blanco */
body.is-home .site-title a,
body.home .site-title a,
body.has-dark-hero .site-title a {
color: white !important;
}
body.is-home .site-title a::before,
body.home .site-title a::before,
body.has-dark-hero .site-title a::before {
background: linear-gradient(135deg, #FFFFFF, #C9D9FF) !important;
box-shadow: 0 4px 12px -2px rgba(255,255,255,.4) !important;
}
/* Menu items en blanco */
body.is-home .ast-builder-menu .menu-link,
body.is-home .main-header-menu .menu-link,
body.home .ast-builder-menu .menu-link,
body.home .main-header-menu .menu-link,
body.has-dark-hero .ast-builder-menu .menu-link,
body.has-dark-hero .main-header-menu .menu-link {
color: rgba(255, 255, 255, .85) !important;
}
body.is-home .ast-builder-menu .menu-link:hover,
body.is-home .ast-builder-menu .menu-item.current-menu-item .menu-link,
body.home .ast-builder-menu .menu-link:hover,
body.has-dark-hero .ast-builder-menu .menu-link:hover {
color: white !important;
}
/* =========================================================
MENU PREMIUM — pill activo + shine + underline animado
========================================================= */
body.has-dark-hero .ast-builder-menu .menu-item,
body.is-home .ast-builder-menu .menu-item,
body.home .ast-builder-menu .menu-item {
position: relative;
}
body.has-dark-hero .ast-builder-menu > .menu-item > .menu-link,
body.is-home .ast-builder-menu > .menu-item > .menu-link,
body.home .ast-builder-menu > .menu-item > .menu-link {
position: relative !important;
z-index: 1;
border-radius: 999px !important;
overflow: hidden;
transition: color .25s var(--expo), background .25s var(--expo) !important;
}
/* Pill background expandiéndose desde el centro al hover (no-active) */
body.has-dark-hero .ast-builder-menu > .menu-item > .menu-link::before,
body.is-home .ast-builder-menu > .menu-item > .menu-link::before,
body.home .ast-builder-menu > .menu-item > .menu-link::before {
content: '';
position: absolute;
inset: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
transform: scale(.7);
opacity: 0;
transition: transform .35s var(--spring), opacity .25s var(--expo);
z-index: -1;
pointer-events: none;
}
body.has-dark-hero .ast-builder-menu > .menu-item > .menu-link:hover::before,
body.is-home .ast-builder-menu > .menu-item > .menu-link:hover::before,
body.home .ast-builder-menu > .menu-item > .menu-link:hover::before {
transform: scale(1);
opacity: 1;
}
/* SHINE — barrido luminoso al hover (encima del pill) */
body.has-dark-hero .ast-builder-menu > .menu-item > .menu-link::after,
body.is-home .ast-builder-menu > .menu-item > .menu-link::after,
body.home .ast-builder-menu > .menu-item > .menu-link::after {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 80%;
height: 100%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255,255,255,.20) 45%,
rgba(255,255,255,.30) 50%,
rgba(255,255,255,.20) 55%,
transparent 100%);
transform: skewX(-12deg);
transition: left .9s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
border-radius: 999px;
z-index: 0;
}
body.has-dark-hero .ast-builder-menu > .menu-item > .menu-link:hover::after,
body.is-home .ast-builder-menu > .menu-item > .menu-link:hover::after,
body.home .ast-builder-menu > .menu-item > .menu-link:hover::after {
left: 130%;
}
/* ACTIVO / current page — pill azul eléctrico con glow */
body.has-dark-hero .ast-builder-menu > .menu-item.current-menu-item > .menu-link,
body.has-dark-hero .ast-builder-menu > .menu-item.current-menu-ancestor > .menu-link,
body.is-home .ast-builder-menu > .menu-item.current-menu-item > .menu-link,
body.home .ast-builder-menu > .menu-item.current-menu-item > .menu-link {
color: white !important;
background: linear-gradient(135deg, var(--azul-electrico), #4B7FFF) !important;
box-shadow: 0 6px 20px -4px rgba(30, 95, 255, .55), 0 0 0 1px rgba(255,255,255,.08) inset;
font-weight: 700 !important;
}
body.has-dark-hero .ast-builder-menu > .menu-item.current-menu-item > .menu-link::before,
body.is-home .ast-builder-menu > .menu-item.current-menu-item > .menu-link::before,
body.home .ast-builder-menu > .menu-item.current-menu-item > .menu-link::before {
display: none;
}
/* Pulse sutil en el item activo (cada 4s) */
body.has-dark-hero .ast-builder-menu > .menu-item.current-menu-item,
body.is-home .ast-builder-menu > .menu-item.current-menu-item {
animation: navActiveGlow 4s ease-in-out infinite;
}
@keyframes navActiveGlow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(30,95,255,0)); }
50% { filter: drop-shadow(0 0 14px rgba(30,95,255,.55)); }
}
/* Indicador ▼ en items con dropdown — chevron animado */
body.has-dark-hero .ast-builder-menu .menu-item-has-children > .menu-link,
body.is-home .ast-builder-menu .menu-item-has-children > .menu-link,
body.home .ast-builder-menu .menu-item-has-children > .menu-link {
padding-right: 26px !important;
}
/* Hamburguesa móvil en blanco */
body.is-home .menu-toggle,
body.home .menu-toggle {
color: white !important;
border-color: rgba(255, 255, 255, .3) !important;
}
/* Hero — agregar padding-top extra porque header ahora flota encima */
body.is-home .hero-cinematic,
body.home .hero-cinematic {
padding-top: clamp(180px, 22vh, 240px) !important;
}
/* =========================================================
DROPDOWN SUBMENUS — glass dark con hover bridge (no gap)
Aplica a sub-menus de Hipotecario y PyME en el nav
========================================================= */
.ast-builder-menu .sub-menu,
.main-header-menu .sub-menu,
.main-navigation .sub-menu {
background: rgba(10, 23, 51, .94) !important;
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
border: 1px solid rgba(255, 255, 255, .08) !important;
border-radius: 14px !important;
/* padding-top extra crea HOVER BRIDGE (no gap vacío entre padre y dropdown) */
padding: 18px 0 10px 0 !important;
margin-top: -10px !important;
min-width: 280px !important;
max-width: 320px !important;
box-shadow: 0 24px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(30,95,255,.08) !important;
overflow: hidden;
/* DELAY al cerrar — evita que se cierre instantáneo al perder hover por un instante */
transition: opacity .25s var(--expo), visibility 0s linear .25s, transform .25s var(--expo) !important;
transform: translateY(-4px);
pointer-events: none;
}
/* Bridge invisible adicional sobre el padding-top — captura el hover en la zona "vacía" */
.ast-builder-menu .menu-item-has-children > .sub-menu::before,
.main-header-menu .menu-item-has-children > .sub-menu::before,
.main-navigation .menu-item-has-children > .sub-menu::before {
content: '';
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 24px;
background: transparent;
}
/* Hover activo: delay 300ms antes de abrir + fade-in 400ms (efecto premium "considerado") */
.ast-builder-menu .menu-item-has-children:hover > .sub-menu,
.ast-builder-menu .menu-item-has-children:focus-within > .sub-menu,
.main-header-menu .menu-item-has-children:hover > .sub-menu,
.main-header-menu .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children:hover > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
transition:
opacity .4s var(--expo) .3s,
visibility 0s linear .3s,
transform .4s var(--spring) .3s !important;
}
/* Asegurar que el item padre mantiene posición relativa */
.ast-builder-menu .menu-item-has-children,
.main-header-menu .menu-item-has-children {
position: relative !important;
}
/* Sub-menu items */
.ast-builder-menu .sub-menu .menu-item .menu-link,
.main-header-menu .sub-menu .menu-item a,
.main-navigation .sub-menu .menu-item a {
color: rgba(255, 255, 255, .82) !important;
padding: 10px 18px !important;
font-size: .875rem !important;
font-weight: 500 !important;
white-space: normal !important;
line-height: 1.35 !important;
display: block;
transition: background .2s var(--expo), color .2s var(--expo), padding-left .25s var(--expo);
border-left: 2px solid transparent;
}
.ast-builder-menu .sub-menu .menu-item .menu-link:hover,
.main-header-menu .sub-menu .menu-item a:hover,
.main-navigation .sub-menu .menu-item a:hover {
color: white !important;
background: rgba(30, 95, 255, .15) !important;
border-left-color: var(--azul-electrico);
padding-left: 24px !important;
}
/* Underline animado del padre se queda visible cuando submenu abierto */
.ast-builder-menu .menu-item-has-children:hover > .menu-link::after,
.main-header-menu .menu-item-has-children:hover > .menu-link::after {
transform: scaleX(1) !important;
}
/* Indicador ▼ del padre — más sutil */
.ast-builder-menu .menu-item-has-children > .menu-link::before {
display: none;
}
.ast-builder-menu .ast-arrow-icon,
.ast-builder-menu .ast-mm-megamenu-toggle,
.menu-item-has-children .dropdown-menu-toggle {
color: inherit !important;
opacity: .6;
transition: transform .25s var(--expo);
}
.menu-item-has-children:hover .dropdown-menu-toggle {
transform: rotate(180deg);
opacity: 1;
}
/* Asegurar que el submenu NO se sale del viewport por la derecha */
.ast-builder-menu .menu-item:nth-last-child(-n+3) > .sub-menu {
right: 0 !important;
left: auto !important;
}
/* Quitar separadores horizontales feos entre items */
.ast-builder-menu .sub-menu .menu-item {
border-bottom: none !important;
}
/* Mobile: el sub-menu no flota — se queda inline en el drawer */
@media (max-width: 1024px) {
.ast-builder-menu .sub-menu,
.main-header-menu .sub-menu {
background: rgba(255, 255, 255, .04) !important;
backdrop-filter: none;
border: none !important;
border-radius: 0 !important;
padding: 4px 0 !important;
min-width: auto !important;
max-width: none !important;
margin-top: 0 !important;
box-shadow: none !important;
}
}
/* =========================================================
BLOG — tamaños premium uniformes (post body + hub)
Override de inline styles para mantener escala consistente
========================================================= */
/* Hub blog cards (grid 3) */
.entry-content section .grid-3 .card {
padding: 28px 24px !important;
min-height: auto !important;
}
.entry-content section .grid-3 .card h3 {
font-size: 1.0625rem !important;
line-height: 1.3 !important;
margin-bottom: 10px !important;
letter-spacing: -.015em !important;
}
.entry-content section .grid-3 .card p {
font-size: .875rem !important;
line-height: 1.5 !important;
color: var(--gris-texto) !important;
margin-bottom: 14px !important;
flex: 1;
}
/* Post body — content article */
.post-body, .single-post .entry-content > section {
font-family: var(--font-cuerpo);
}
.post-body p,
.single-post .post-body p {
font-size: 1.0625rem !important;
line-height: 1.7 !important;
color: #374151 !important;
margin-bottom: 22px !important;
max-width: 100% !important;
}
.post-body h2,
.single-post .post-body h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: -.025em !important;
color: var(--azul-marino) !important;
margin: 48px 0 18px !important;
}
.post-body h3,
.single-post .post-body h3 {
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: -.015em !important;
color: var(--azul-marino) !important;
margin: 28px 0 12px !important;
}
.post-body ul,
.single-post .post-body ul {
margin: 20px 0 28px !important;
padding-left: 22px !important;
font-size: 1rem !important;
}
.post-body ul li,
.single-post .post-body ul li {
margin-bottom: 10px !important;
line-height: 1.65 !important;
color: #374151 !important;
padding-left: 4px;
}
.post-body ul li::marker {
color: var(--azul-electrico);
}
/* Callout boxes en posts */
.post-body div[style*="background:#E8F0FF"] {
background: linear-gradient(135deg, #E8F0FF 0%, #F5F7FB 100%) !important;
border-left: 4px solid var(--azul-electrico) !important;
padding: 22px 24px !important;
border-radius: 0 14px 14px 0 !important;
margin: 28px 0 !important;
font-size: .9375rem !important;
}
.post-body div[style*="background:#E8F0FF"] strong {
display: block !important;
margin-bottom: 8px !important;
font-family: var(--font-titulo) !important;
color: var(--azul-marino) !important;
}
/* Quotes */
.post-body blockquote {
border-left: 3px solid var(--azul-electrico) !important;
margin: 32px 0 !important;
padding: 8px 0 8px 24px !important;
font-family: var(--font-titulo) !important;
font-style: italic !important;
font-size: 1.1875rem !important;
line-height: 1.5 !important;
color: var(--azul-marino) !important;
}
/* Strong en posts */
.post-body strong, .post-body b {
font-weight: 700 !important;
color: var(--azul-marino) !important;
}
/* Hub blog hero más compacto */
.entry-content > section:first-child.hero-cinematic {
/* mantener consistencia con el resto */
}
/* =========================================================
CALCULADORAS — UX premium con sliders + cards live results
========================================================= */
.calc-stage {
position: relative;
background: white;
padding: clamp(60px, 8vw, 100px) 0;
}
.calc-stage::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 40% at 15% 20%, rgba(30,95,255,.06), transparent 60%),
radial-gradient(ellipse 40% 35% at 85% 80%, rgba(75,127,255,.08), transparent 60%);
pointer-events: none;
z-index: 0;
}
.calc-stage > .container { position: relative; z-index: 1; }
.calc-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(32px, 4vw, 56px);
align-items: start;
}
@media (max-width: 900px) {
.calc-grid { grid-template-columns: 1fr; }
}
/* Form panel (left) */
.calc-panel {
background: white;
border: 1px solid var(--gris-borde);
border-radius: var(--radius-xl);
padding: clamp(28px, 3vw, 40px);
box-shadow: var(--shadow-md);
position: sticky;
top: 100px;
}
@media (max-width: 900px) {
.calc-panel { position: static; }
}
.calc-panel-eyebrow {
display: inline-block;
font-size: .6875rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--azul-electrico);
font-weight: 700;
margin-bottom: 8px;
}
.calc-panel-title {
font-family: var(--font-titulo);
font-weight: 800;
font-size: 1.5rem;
color: var(--azul-marino);
margin: 0 0 6px;
letter-spacing: -.02em;
}
.calc-panel-sub {
font-size: .9375rem;
color: var(--gris-texto);
margin: 0 0 28px;
line-height: 1.5;
}
/* Field group */
.calc-field {
margin-bottom: 24px;
}
.calc-field-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.calc-field-label {
font-family: var(--font-titulo);
font-weight: 700;
font-size: .8125rem;
color: var(--azul-marino);
letter-spacing: -.005em;
}
.calc-field-value {
font-family: var(--font-titulo);
font-weight: 800;
font-size: 1.0625rem;
color: var(--azul-electrico);
font-variant-numeric: tabular-nums;
}
/* Native range slider — totalmente custom */
input[type="range"].calc-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background: linear-gradient(to right,
var(--azul-electrico) 0%,
var(--azul-electrico) var(--p, 50%),
var(--gris-claro) var(--p, 50%),
var(--gris-claro) 100%);
outline: none;
cursor: pointer;
margin: 0;
transition: background-image .1s linear;
}
input[type="range"].calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: white;
border: 3px solid var(--azul-electrico);
cursor: grab;
box-shadow: 0 4px 12px -2px rgba(30,95,255,.4), 0 0 0 6px rgba(30,95,255,0);
transition: box-shadow .25s var(--expo), transform .15s var(--spring);
}
input[type="range"].calc-slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: white;
border: 3px solid var(--azul-electrico);
cursor: grab;
box-shadow: 0 4px 12px -2px rgba(30,95,255,.4);
transition: box-shadow .25s var(--expo), transform .15s var(--spring);
}
input[type="range"].calc-slider:hover::-webkit-slider-thumb {
box-shadow: 0 4px 12px -2px rgba(30,95,255,.5), 0 0 0 8px rgba(30,95,255,.12);
transform: scale(1.1);
}
input[type="range"].calc-slider:active::-webkit-slider-thumb {
cursor: grabbing;
transform: scale(1.15);
}
.calc-field-meta {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: .6875rem;
color: var(--gris-texto);
font-weight: 500;
}
/* Type selector (radio buttons como pills) */
.calc-type-group {
display: flex;
gap: 8px;
background: var(--gris-claro);
padding: 4px;
border-radius: 12px;
margin-bottom: 24px;
}
.calc-type-option {
flex: 1;
position: relative;
}
.calc-type-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.calc-type-option label {
display: block;
padding: 10px 14px;
text-align: center;
font-family: var(--font-titulo);
font-weight: 600;
font-size: .8125rem;
color: var(--gris-texto);
cursor: pointer;
border-radius: 8px;
transition: all .25s var(--expo);
letter-spacing: -.005em;
}
.calc-type-option input:checked + label {
background: white;
color: var(--azul-electrico);
box-shadow: 0 2px 8px -2px rgba(10,23,51,.12);
font-weight: 700;
}
/* Result panel (right) */
.calc-result {
background: linear-gradient(135deg, var(--azul-marino) 0%, #122149 100%);
border-radius: var(--radius-xl);
padding: clamp(28px, 3vw, 40px);
color: white;
position: relative;
overflow: hidden;
isolation: isolate;
}
.calc-result::before {
content: '';
position: absolute;
inset: -20%;
z-index: 0;
background:
radial-gradient(ellipse 50% 40% at 18% 32%, rgba(30,95,255,.45), transparent 50%),
radial-gradient(ellipse 40% 35% at 82% 78%, rgba(75,127,255,.32), transparent 55%);
filter: blur(60px);
animation: auroraDrift 22s ease-in-out infinite alternate;
}
.calc-result > * { position: relative; z-index: 1; }
.calc-result-eyebrow {
display: inline-block;
font-size: .6875rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.6);
font-weight: 700;
margin-bottom: 14px;
}
/* HERO RESULT — mensualidad gigante */
.calc-result-hero {
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.calc-result-hero-label {
font-size: .8125rem;
color: rgba(255,255,255,.65);
margin-bottom: 6px;
}
.calc-result-hero-value {
font-family: var(--font-titulo);
font-weight: 800;
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
letter-spacing: -.04em;
line-height: 1;
background: linear-gradient(135deg, #FFFFFF 0%, #C9D9FF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-variant-numeric: tabular-nums;
transition: opacity .15s linear;
}
.calc-result-hero-sub {
font-size: .8125rem;
color: rgba(255,255,255,.55);
margin-top: 6px;
}
/* Result rows (4 metrics) */
.calc-result-rows {
display: grid;
gap: 14px;
margin-bottom: 24px;
}
.calc-result-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.calc-result-row:last-child { border: none; }
.calc-result-row .lbl {
font-size: .875rem;
color: rgba(255,255,255,.7);
}
.calc-result-row .val {
font-family: var(--font-titulo);
font-weight: 700;
font-size: 1.0625rem;
color: white;
font-variant-numeric: tabular-nums;
transition: opacity .15s linear;
}
/* Visual bar (capital vs intereses) */
.calc-bar-stage {
margin: 22px 0;
}
.calc-bar-label {
display: flex;
justify-content: space-between;
font-size: .6875rem;
color: rgba(255,255,255,.6);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 8px;
font-weight: 600;
}
.calc-bar {
display: flex;
height: 10px;
border-radius: 999px;
overflow: hidden;
background: rgba(255,255,255,.08);
}
.calc-bar-capital {
background: linear-gradient(90deg, #4B7FFF, #93B4FF);
transition: flex-basis .35s var(--expo);
}
.calc-bar-interest {
background: linear-gradient(90deg, #6B95FF, #1E5FFF);
transition: flex-basis .35s var(--expo);
}
.calc-bar-legend {
display: flex;
gap: 18px;
margin-top: 10px;
font-size: .75rem;
color: rgba(255,255,255,.7);
}
.calc-bar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calc-bar-legend span::before {
content: '';
width: 10px; height: 10px;
border-radius: 3px;
display: inline-block;
}
.calc-bar-legend .lg-cap::before { background: #93B4FF; }
.calc-bar-legend .lg-int::before { background: #1E5FFF; }
/* Result CTA */
.calc-result-cta {
display: flex;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
}
.calc-result-cta a {
flex: 1;
min-width: 140px;
text-align: center;
padding: 14px 18px !important;
border-radius: 10px;
font-family: var(--font-titulo);
font-weight: 700;
font-size: .875rem;
text-decoration: none;
transition: transform .2s var(--spring), box-shadow .25s ease;
}
.calc-result-cta a:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px -4px rgba(30,95,255,.5);
}
.calc-result-cta a.primary {
background: var(--azul-electrico);
color: white !important;
}
.calc-result-cta a.ghost {
background: rgba(255,255,255,.08);
color: white !important;
border: 1px solid rgba(255,255,255,.18);
}
/* Number animation */
@keyframes calcPulse {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
/* Field highlight — destaca el campo principal "Monto del crédito" */
.calc-field-highlight {
background: linear-gradient(135deg, rgba(30, 95, 255, .04) 0%, rgba(30, 95, 255, .02) 100%);
border-radius: 14px;
padding: 16px;
margin: 24px -16px !important;
border-left: 3px solid var(--azul-electrico);
}
.calc-field-highlight .calc-field-label {
color: var(--azul-electrico) !important;
}
.calc-field-hint {
font-size: .6875rem;
color: var(--gris-texto);
margin: 6px 0 0 !important;
font-style: italic;
}
/* =========================================================
BANNER POST single — featured image arriba del hero
========================================================= */
.post-banner {
position: relative;
width: 100vw;
height: clamp(280px, 36vh, 420px);
margin-left: calc(-50vw + 50%);
margin-bottom: -120px;
overflow: hidden;
isolation: isolate;
background: var(--azul-marino);
}
.post-banner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10, 23, 51, .3) 0%,
rgba(10, 23, 51, .6) 50%,
rgba(10, 23, 51, 1) 100%);
z-index: 1;
}
.post-banner img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(0) saturate(1.1);
transform: scale(1.05);
}
/* =========================================================
YOUTUBE VIDEOS SECTION — cards con thumbnail + play overlay
========================================================= */
.videos-section { background: var(--gris-claro); }
.yt-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: clamp(16px, 2vw, 24px) !important;
}
/* 2026-07-01 Luis: MOBILE — slider horizontal premium. Cards 78vw con snap,
peek del siguiente, edge fades. Scroll táctil natural. */
@media (max-width: 768px) {
.videos-section .container {
padding-right: 0 !important;
}
.yt-grid {
display: flex !important;
grid-template-columns: none !important;
gap: 14px !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding: 8px 24px 24px 0 !important;
margin-left: 0 !important;
scroll-padding-left: 0 !important;
/* mask fade en el edge derecho para hint del scroll */
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
}
.yt-grid::-webkit-scrollbar { display: none !important; }
.yt-grid .yt-card {
flex: 0 0 78% !important;
max-width: 78% !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
/* premium shadow más marcado en mobile */
box-shadow: 0 8px 28px -12px rgba(10, 23, 51, .18), 0 2px 6px rgba(10, 23, 51, .06) !important;
transform: none !important;
}
.yt-grid .yt-card:first-child { margin-left: 0 !important; }
.yt-grid .yt-card:last-child {
/* Extra scroll-margin para que el último quede centrado si se hace snap */
flex-basis: 82% !important;
max-width: 82% !important;
margin-right: 24px !important;
}
}
/* 2026-07-01 Luis: DOTS para .yt-grid slider auto-rotate 2.5s */
.ce-slider-dots {
display: none;
}
@media (max-width: 768px) {
.ce-slider-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 16px 0 4px;
padding: 0 24px;
}
.ce-slider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(10, 23, 51, .18);
border: 0;
padding: 0;
cursor: pointer;
transition: background .3s ease, width .3s cubic-bezier(.4, 0, .2, 1), transform .3s ease;
-webkit-tap-highlight-color: transparent;
}
.ce-slider-dot:hover {
background: rgba(30, 95, 255, .5);
}
.ce-slider-dot.is-active {
background: #1E5FFF;
width: 24px;
border-radius: 4px;
}
}
/* Dark sections (videos-section podría estar en dark bg — no en Adq, pero futuro-proof) */
.videos-section.videos-section--dark .ce-slider-dot,
[class*="dark-bg"] .ce-slider-dot {
background: rgba(255, 255, 255, .22);
}
.videos-section.videos-section--dark .ce-slider-dot.is-active,
[class*="dark-bg"] .ce-slider-dot.is-active {
background: #fff;
}
.yt-card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
border: 1px solid var(--gris-borde);
transition: transform .35s var(--spring), box-shadow .25s ease, border-color .25s ease;
position: relative;
isolation: isolate;
}
.yt-card:hover {
transform: translateY(-6px);
border-color: rgba(255, 0, 0, .25);
box-shadow: 0 16px 40px -12px rgba(255, 0, 0, .15), 0 24px 60px -20px rgba(10, 23, 51, .15);
}
.yt-card-thumb {
position: relative;
aspect-ratio: 16/9;
background-size: cover;
background-position: center;
background-color: var(--azul-marino);
overflow: hidden;
}
.yt-card-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.4));
transition: opacity .25s ease;
}
.yt-card:hover .yt-card-thumb::after { opacity: .7; }
.yt-card-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.9);
width: 44px;
height: 44px;
background: rgba(255, 0, 0, .92);
border-radius: 50%;
display: grid;
place-items: center;
box-shadow: 0 8px 24px -4px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1) inset;
z-index: 2;
transition: transform .35s var(--spring), background .25s ease;
}
.yt-card:hover .yt-card-play {
transform: translate(-50%, -50%) scale(1.1);
background: #FF0000;
box-shadow: 0 12px 32px -4px rgba(255,0,0,.6);
}
.yt-card-play svg { margin-left: 3px; }
.yt-card-body {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.yt-card-body h4 {
font-family: var(--font-titulo);
font-weight: 700;
font-size: .9375rem;
line-height: 1.35;
letter-spacing: -.015em;
color: var(--azul-marino);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.yt-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: .75rem;
color: var(--gris-texto);
margin-top: auto;
}
.yt-card-channel {
font-family: var(--font-titulo);
font-weight: 600;
color: #FF0000;
}
@media (max-width: 768px) {
.yt-grid { grid-template-columns: 1fr !important; }
.yt-card-body h4 { -webkit-line-clamp: 2; }
}
/* =========================================================
HUB GRID — Servicios Hipotecario / PyME (5 productos cards)
========================================================= */
.hub-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: clamp(16px, 2vw, 24px) !important;
max-width: 1200px;
margin: 0 auto;
}
.hub-card {
display: flex;
flex-direction: column;
background: white;
border: 1px solid var(--gris-borde);
border-radius: var(--radius-xl);
padding: clamp(24px, 2.8vw, 32px);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
isolation: isolate;
min-height: 340px;
transition: transform .4s var(--expo),
box-shadow .4s var(--expo),
border-color .25s ease;
}
.hub-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--azul-electrico), #6B95FF, transparent);
transform: scaleX(0);
transform-origin: left center;
transition: transform .5s var(--expo);
z-index: 1;
}
.hub-card > * { position: relative; z-index: 2; }
.hub-card:hover {
transform: translateY(-6px);
border-color: rgba(30, 95, 255, .25);
box-shadow:
0 24px 60px -20px rgba(10, 23, 51, .5),
0 0 0 1px rgba(107, 149, 255, .25),
0 0 60px -10px rgba(30, 95, 255, .35);
}
.hub-card:hover::after { transform: scaleX(1); }
.hub-card h3 {
font-family: var(--font-titulo);
font-weight: 800;
font-size: 1.25rem;
letter-spacing: -.02em;
color: var(--azul-marino);
margin: 0 0 10px;
line-height: 1.2;
}
.hub-card p {
font-size: .9375rem;
line-height: 1.5;
color: var(--gris-texto);
margin: 0 0 18px;
flex: 1;
}
/* CTA con neón estático azul — base sin animación */
/* Destello viajando por el contorno — recortado al ring de 2px con mask-composite */
@property --hub-spark-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
/* Delays distintos por hub-card para desincronizar las chispas */
@keyframes hubCtaSparkOrbit {
to { --hub-spark-angle: 360deg; }
}
@media (max-width: 768px) {
.hub-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.hub-card { padding: 22px 18px !important; min-height: auto !important; }
}
/* =========================================================
REQUIREMENTS SECTION — 3 cards con icono + listas
========================================================= */
.requirements-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: clamp(16px, 2vw, 24px) !important;
}
@media (max-width: 900px) {
.requirements-grid { grid-template-columns: 1fr !important; }
}
.req-card {
background: white;
border: 1px solid var(--gris-borde);
border-radius: var(--radius-xl);
padding: clamp(24px, 2.8vw, 32px);
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform .35s var(--spring), box-shadow .25s ease, border-color .2s ease;
}
.req-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--azul-electrico), #6B95FF);
transform: scaleX(0);
transform-origin: left center;
transition: transform .5s var(--expo);
}
.req-card:hover {
transform: translateY(-4px);
border-color: rgba(30, 95, 255, .25);
box-shadow: 0 16px 40px -12px rgba(30, 95, 255, .15), 0 24px 60px -20px rgba(10, 23, 51, .15);
}
.req-card:hover::before { transform: scaleX(1); }
.req-card-icon {
font-size: 2rem;
width: 56px;
height: 56px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--azul-suave), #F0F5FF);
border-radius: 16px;
margin-bottom: 18px;
}
.req-card h3 {
font-family: var(--font-titulo);
font-weight: 800;
font-size: 1.125rem;
letter-spacing: -.02em;
color: var(--azul-marino);
margin: 0 0 4px;
line-height: 1.25;
}
.req-card-sub {
font-size: .75rem;
color: var(--azul-electrico);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin: 0 0 16px;
}
.req-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.req-list li {
position: relative;
padding-left: 24px;
font-size: .875rem;
line-height: 1.5;
color: var(--gris-texto);
}
.req-list li::before {
content: '';
position: absolute;
left: 0;
top: 7px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--verde-exito) url("data:image/svg+xml;utf8,") center/11px no-repeat;
flex-shrink: 0;
}
/* =========================================================
BANKS SECTION — Grid de bancos con mark monogram
========================================================= */
.banks-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: clamp(12px, 1.4vw, 18px) !important;
align-items: stretch;
}
/* Variante 4+3 centrada para exactamente 7 bancos */
/* Cards 5, 6, 7 — centradas en fila 2 (offset 1 col) */
@media (max-width: 640px) {
.banks-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}
/* Logo card — diseño plata premium con micro-gradient + glow azul al hover
Logos ya tienen fondo transparente (procesados con GD) → card limpio. */
.bank-logo-card {
background: linear-gradient(180deg, #FAFBFD 0%, #F0F2F7 100%);
border: 1px solid rgba(203, 213, 225, .6);
border-radius: var(--radius-lg);
padding: 24px 20px;
min-height: 120px;
display: grid;
place-items: center;
transition: transform .35s var(--spring), border-color .3s ease, box-shadow .35s ease, background .35s ease;
position: relative;
isolation: isolate;
overflow: hidden;
opacity: 1 !important;
transform: none;
box-shadow:
0 1px 0 rgba(255, 255, 255, .9) inset,
0 1px 2px rgba(15, 23, 42, .04);
}
.bank-logo-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top, rgba(30, 95, 255, .08) 0%, transparent 60%);
opacity: 0;
transition: opacity .4s ease;
z-index: 0;
pointer-events: none;
}
.bank-logo-card::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, transparent 0%, rgba(30, 95, 255, .35) 50%, transparent 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
z-index: 0;
}
.bank-logo-card:hover {
transform: translateY(-5px);
background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FF 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 1) inset,
0 20px 40px -12px rgba(30, 95, 255, .25),
0 4px 8px rgba(15, 23, 42, .06);
}
.bank-logo-card:hover::before { opacity: 1; }
.bank-logo-card:hover::after { opacity: 1; }
.bank-logo-card img {
max-width: 80%;
max-height: 78px;
width: auto;
height: auto;
object-fit: contain;
transition: transform .5s var(--spring, cubic-bezier(.34, 1.56, .64, 1)),
filter .35s ease;
position: relative;
z-index: 1;
filter: grayscale(.15) saturate(.9);
}
.bank-logo-card:hover img {
transform: scale(1.12) rotate(-1.5deg);
filter: grayscale(0) saturate(1.1) drop-shadow(0 4px 12px rgba(30, 95, 255, .25));
animation: bankLogoBounce .6s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes bankLogoBounce {
0% { transform: scale(1) rotate(0); }
40% { transform: scale(1.18) rotate(-2deg); }
70% { transform: scale(1.08) rotate(1deg); }
100% { transform: scale(1.12) rotate(-1.5deg); }
}
.bank-logo-card {
min-height: 140px !important;
padding: 28px 22px !important;
filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .08));
}
.bank-logo-card:hover img {
transform: scale(1.08);
filter: drop-shadow(0 4px 12px rgba(30, 95, 255, .25));
}
/* =========================================================
HOME LOGO MARQUEE — strip infinito con fade en bordes
========================================================= */
.bank-marquee {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #FAFBFD 0%, #F5F7FB 100%);
padding: 56px 0;
border-top: 1px solid rgba(203, 213, 225, .4);
border-bottom: 1px solid rgba(203, 213, 225, .4);
}
.bank-marquee::before,
.bank-marquee::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.bank-marquee::before {
left: 0;
background: linear-gradient(90deg, #FAFBFD 0%, transparent 100%);
}
.bank-marquee::after {
right: 0;
background: linear-gradient(270deg, #F5F7FB 0%, transparent 100%);
}
.bank-marquee-eyebrow {
text-align: center;
font-size: .75rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gris-texto);
font-weight: 700;
margin-bottom: 28px;
}
/* Wrapper de las 2 tiras */
.bank-marquee-rows {
display: flex;
flex-direction: column;
gap: 28px;
}
.bank-marquee-track {
display: flex;
gap: 48px;
width: max-content;
align-items: center;
animation: bank-marquee-scroll-left 170s linear infinite;
/* iOS GPU compositing — sin esto Safari hace pixel-by-pixel software render */
will-change: transform;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.bank-marquee-track--reverse {
animation: bank-marquee-scroll-right 170s linear infinite;
}
.bank-marquee:hover .bank-marquee-track {
animation-play-state: paused;
}
.bank-marquee-track img {
height: 64px;
width: auto;
max-width: 200px;
object-fit: contain;
flex-shrink: 0;
filter: none;
opacity: 1;
transition: transform .3s var(--spring);
}
.bank-marquee-track img:hover {
transform: scale(1.1);
}
@keyframes bank-marquee-scroll-left {
0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
@keyframes bank-marquee-scroll-right {
0% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@media (max-width: 768px) {
.bank-marquee { padding: 40px 0; }
.bank-marquee-rows { gap: 18px; }
.bank-marquee-track {
gap: 36px;
animation-duration: 95s; /* mobile: más lento (110→170 desktop, 60→95 mobile) por pedido de Luis 2026-07-04 */
}
.bank-marquee-track--reverse { animation-duration: 95s; }
.bank-marquee-track img { height: 44px; max-width: 140px; }
.bank-marquee::before, .bank-marquee::after { width: 60px; }
}
/* =========================================================
MOBILE MENU CUSTOM — botón hamburguesa + drawer overlay
Sustituye al de Astra que daba problemas
========================================================= */
/* Botón hamburguesa flotante en mobile */
.ce-mobile-toggle {
display: none;
position: fixed;
top: 14px;
right: 14px;
z-index: 9998;
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, .2);
background: rgba(10, 23, 51, .65);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: white;
border-radius: 12px;
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
transition: background .25s, transform .2s, border-color .25s;
}
.ce-mobile-toggle:hover {
background: rgba(30, 95, 255, .9);
border-color: rgba(255, 255, 255, .3);
transform: scale(1.05);
}
.ce-mobile-toggle svg { display: block; }
/* En páginas con header light (no dark hero), botón con tema oscuro */
body.crediexpres-child:not(.is-home):not(.has-dark-hero) .ce-mobile-toggle {
background: white;
color: var(--azul-marino);
border-color: rgba(10, 23, 51, .12);
box-shadow: 0 4px 12px -4px rgba(10, 23, 51, .15);
}
/* Overlay (fondo) — display:flex SOLO cuando NO está [hidden] */
.ce-mobile-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(10, 23, 51, .92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
justify-content: flex-end;
animation: ceMobileFadeIn .25s ease;
}
/* CRITICAL: el atributo HTML5 hidden necesita override explícito porque display:flex lo gana */
.ce-mobile-overlay[hidden],
.ce-mobile-overlay.ce-hidden {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
@keyframes ceMobileFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Drawer (panel del menú) */
.ce-mobile-drawer {
width: min(360px, 88vw);
height: 100%;
background: linear-gradient(180deg, #0A1733 0%, #122149 100%);
padding: 80px 28px 32px;
overflow-y: auto;
position: relative;
isolation: isolate;
animation: ceMobileSlideIn .35s cubic-bezier(.16, 1, .3, 1);
display: flex;
flex-direction: column;
}
.ce-mobile-drawer::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 100% 0%, rgba(30, 95, 255, .25), transparent 60%),
radial-gradient(ellipse 40% 30% at 0% 100%, rgba(75, 127, 255, .15), transparent 60%);
pointer-events: none;
z-index: -1;
}
@keyframes ceMobileSlideIn {
from { transform: translateX(20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.ce-mobile-close {
position: absolute;
top: 18px;
right: 18px;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, .15);
background: rgba(255, 255, 255, .06);
color: white;
border-radius: 10px;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
transition: background .2s;
}
.ce-mobile-close:hover {
background: rgba(255, 255, 255, .15);
}
.ce-mobile-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ce-mobile-logo-mark {
width: 32px;
height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, #FFFFFF, #C9D9FF);
flex-shrink: 0;
box-shadow: 0 4px 12px -2px rgba(255, 255, 255, .3);
}
.ce-mobile-logo-text {
font-family: var(--font-titulo);
font-weight: 800;
font-size: 1.25rem;
color: white;
letter-spacing: -.02em;
}
/* Lista del menú */
.ce-mobile-menu-list {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.ce-mobile-menu-list li {
margin: 0;
}
/* 2026-06-24 — Acordeón: el chevron ahora es un botón aparte (.ce-submenu-toggle) */
.ce-mobile-menu-list .menu-item-has-children > a::after { content: none; }
.ce-mobile-menu-list .menu-item-has-children { position: relative; }
.ce-submenu-toggle {
position: absolute; top: 4px; right: 4px; width: 44px; height: 44px;
display: grid; place-items: center; background: transparent; border: 0;
color: rgba(255,255,255,.6); cursor: pointer; border-radius: 10px; z-index: 2;
}
.ce-submenu-toggle:hover, .ce-submenu-toggle:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.ce-submenu-toggle svg { transition: transform .3s var(--expo, cubic-bezier(.16,1,.3,1)); }
.menu-item-has-children.is-open > .ce-submenu-toggle svg { transform: rotate(180deg); }
.ce-mobile-menu-list a,
.ce-mobile-menu-list .menu-link {
display: block;
padding: 14px 16px;
color: rgba(255, 255, 255, .85);
text-decoration: none;
font-family: var(--font-titulo);
font-weight: 600;
font-size: 1rem;
border-radius: 10px;
transition: background .2s, color .2s, padding-left .25s var(--expo);
border-left: 3px solid transparent;
}
.ce-mobile-menu-list a:hover,
.ce-mobile-menu-list .current-menu-item > a {
background: rgba(30, 95, 255, .15);
color: white;
border-left-color: var(--azul-electrico);
padding-left: 22px;
}
/* Sub-menus en mobile drawer — COLAPSADOS por default (acordeón) */
.ce-mobile-menu-list .sub-menu {
list-style: none;
padding: 0 0 0 16px;
margin: 0 0 0 16px;
display: flex;
flex-direction: column;
gap: 2px;
border-left: 1px solid rgba(255, 255, 255, .08);
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .32s var(--expo, cubic-bezier(.16,1,.3,1)), opacity .25s ease, padding .25s ease;
}
.ce-mobile-menu-list .menu-item-has-children.is-open > .sub-menu {
max-height: 520px;
opacity: 1;
padding: 4px 0 10px 16px;
}
.ce-mobile-menu-list .sub-menu a {
font-size: .875rem;
font-weight: 500;
color: rgba(255, 255, 255, .65);
padding: 8px 14px;
}
.ce-mobile-menu-list .sub-menu a:hover {
color: white;
}
/* CTAs del drawer al fondo */
.ce-mobile-cta {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.ce-mobile-cta-primary {
background: var(--azul-electrico);
color: white !important;
padding: 14px 18px;
border-radius: 10px;
text-align: center;
font-family: var(--font-titulo);
font-weight: 700;
text-decoration: none;
font-size: .9375rem;
transition: background .2s;
}
.ce-mobile-cta-primary:hover { background: var(--azul-electrico-hover); }
.ce-mobile-cta-wa {
background: var(--verde-exito);
color: white !important;
padding: 14px 18px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-titulo);
font-weight: 700;
text-decoration: none;
font-size: .9375rem;
}
/* Lock body cuando drawer abierto */
body.ce-mobile-open {
overflow: hidden !important;
}
/* MOSTRAR el toggle solo en mobile/tablet */
@media (max-width: 1024px) {
.ce-mobile-toggle { display: inline-flex !important; }
/* OCULTAR menú desktop + toggle de Astra default */
.main-header-menu,
.ast-builder-menu,
.ast-mobile-header-wrap,
.ast-mobile-menu-buttons,
.menu-toggle.main-header-menu-toggle,
.ast-button-wrap,
button.menu-toggle {
display: none !important;
}
}
@media (min-width: 1025px) {
.ce-mobile-toggle, .ce-mobile-overlay { display: none !important; }
}
/* =========================================================
FOOTER CREDIEXPRES — 4 cols + brand + WhatsApp + copyright
========================================================= */
.ce-footer {
background: var(--azul-marino);
color: rgba(255, 255, 255, .8);
padding: clamp(64px, 8vw, 100px) 24px clamp(32px, 4vw, 48px);
position: relative;
isolation: isolate;
font-family: var(--font-cuerpo);
margin-top: 0;
}
.ce-footer::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 20% 10%, rgba(30,95,255,.15), transparent 50%),
radial-gradient(ellipse 50% 35% at 90% 80%, rgba(75,127,255,.10), transparent 60%);
pointer-events: none;
z-index: -1;
}
.ce-footer-inner {
max-width: 1320px;
margin: 0 auto;
}
.ce-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: clamp(32px, 4vw, 64px);
margin-bottom: 48px;
}
@media (max-width: 900px) {
.ce-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.ce-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.ce-footer-grid { grid-template-columns: 1fr; }
}
/* Brand col */
.ce-footer-logo {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
margin-bottom: 18px;
}
.ce-footer-logo-mark {
width: 36px;
height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, #FFFFFF 0%, #C9D9FF 100%);
box-shadow: 0 8px 20px -6px rgba(255,255,255,.3);
flex-shrink: 0;
}
.ce-footer-logo-text {
font-family: var(--font-titulo);
font-weight: 800;
font-size: 1.5rem;
letter-spacing: -.025em;
color: white;
}
.ce-footer-tag {
font-size: .9375rem;
line-height: 1.55;
color: rgba(255, 255, 255, .65);
margin: 0 0 24px;
max-width: 380px;
}
.ce-footer-contact {
display: flex;
flex-direction: column;
gap: 12px;
}
.ce-footer-wa, .ce-footer-mail {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, .85) !important;
text-decoration: none;
font-family: var(--font-titulo);
font-weight: 600;
font-size: .9375rem;
transition: color .2s var(--expo);
}
.ce-footer-wa svg { color: var(--verde-exito); }
.ce-footer-mail svg { color: var(--azul-electrico); }
.ce-footer-wa:hover, .ce-footer-mail:hover {
color: white !important;
}
/* Sígueme en redes — iconos sociales */
.ce-footer-social {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.ce-footer-social-label {
font-family: var(--font-titulo);
font-weight: 700;
font-size: .8125rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .65);
}
.ce-footer-social-icons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.ce-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .85) !important;
border: 1px solid rgba(255, 255, 255, .12);
text-decoration: none;
transition: transform .25s var(--expo, cubic-bezier(.16,1,.3,1)),
background .25s ease,
border-color .25s ease,
color .25s ease,
box-shadow .25s ease;
}
.ce-social-link:hover {
transform: translateY(-2px);
color: #ffffff !important;
}
.ce-social-ig:hover {
background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
border-color: rgba(255, 255, 255, .3);
box-shadow: 0 6px 18px -6px rgba(253, 29, 29, .55);
}
.ce-social-fb:hover {
background: #1877F2;
border-color: #1877F2;
box-shadow: 0 6px 18px -6px rgba(24, 119, 242, .55);
}
.ce-social-li:hover {
background: #0A66C2;
border-color: #0A66C2;
box-shadow: 0 6px 18px -6px rgba(10, 102, 194, .55);
}
.ce-social-tt:hover {
background: #000000;
border-color: #25F4EE;
color: #25F4EE !important;
box-shadow: 0 6px 18px -6px rgba(37, 244, 238, .55);
}
/* Cols */
.ce-footer-col h4 {
font-family: var(--font-titulo);
font-weight: 700;
font-size: .8125rem;
letter-spacing: .12em;
text-transform: uppercase;
color: white;
margin: 0 0 18px;
}
.ce-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ce-footer-col ul li a {
color: rgba(255, 255, 255, .65);
text-decoration: none;
font-size: .9375rem;
font-weight: 400;
transition: color .2s var(--expo), padding-left .25s var(--expo);
display: inline-block;
}
.ce-footer-col ul li a:hover {
color: white;
padding-left: 6px;
}
/* Bottom row */
.ce-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, .08);
font-size: .8125rem;
color: rgba(255, 255, 255, .55);
flex-wrap: wrap;
gap: 16px;
}
.ce-footer-cta {
background: var(--azul-electrico);
color: white !important;
padding: 12px 24px;
border-radius: 10px;
text-decoration: none;
font-family: var(--font-titulo);
font-weight: 700;
font-size: .875rem;
transition: background .2s var(--expo), transform .2s var(--spring);
display: inline-block;
}
.ce-footer-cta:hover {
background: var(--azul-electrico-hover);
transform: translateY(-2px);
}
.ce-footer-disclaimer {
margin: 24px 0 0;
font-size: .75rem;
color: rgba(255, 255, 255, .4);
font-style: italic;
}
/* Chat FAB (clase legacy ce-fab-whatsapp + ce-fab-chat) — 2026-06-30: cambió a chat bubble + label "Chatear" */
.ce-fab-whatsapp {
position: fixed;
bottom: 24px;
right: 24px;
height: 56px;
min-width: 56px;
padding: 0 8px;
border-radius: 100px;
background: linear-gradient(135deg, #1E5FFF 0%, #0A4FE0 100%);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 12px 32px -8px rgba(30,95,255,.5), 0 0 0 1px rgba(255,255,255,.1);
z-index: 999;
transition: transform .3s var(--spring), box-shadow .25s ease;
text-decoration: none;
font-weight: 700;
font-size: .9375rem;
}
.ce-fab-whatsapp .ce-fab-label {
display: inline-block;
padding-right: 8px;
letter-spacing: .01em;
}
.ce-fab-whatsapp:hover {
transform: scale(1.08);
box-shadow: 0 16px 40px -8px rgba(30,95,255,.6);
}
.ce-fab-whatsapp::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 100px;
background: #1E5FFF;
opacity: .25;
animation: fabPulse 2s ease-out infinite;
z-index: -1;
}
@keyframes fabPulse {
0% { transform: scale(1); opacity: .35; }
100% { transform: scale(1.6); opacity: 0; }
}
/* =========================================================
★★★ MOBILE RESPONSIVE — basado en demo Astra Starter
sm breakpoint: 130px hero · 64px sections · container 425px · stack
========================================================= */
/* ---------- TABLET (768–1024px) ---------- */
@media (max-width: 1024px) {
/* Hero medio: 130px top/bottom, 32px lados (medida demo Astra md) */
.hero-cinematic, .product-hero {
padding: 130px 0 90px !important;
min-height: 72vh !important;
}
.hero-cinematic h1, .product-hero h1 {
font-size: clamp(2rem, 5.5vw, 3rem) !important;
}
.hero-cinematic p, .product-hero p {
font-size: 1rem !important;
}
.hero-cinematic .container, .product-hero .container,
.product-section .container, .cta-cinematic .container {
padding: 0 32px !important;
}
.product-section { padding: 70px 0 !important; }
.stat-ticker { grid-template-columns: repeat(2, 1fr) !important; }
.product-grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
/* Header — centrar y reducir gap */
.ast-builder-grid-row { column-gap: 8px !important; }
}
/* ---------- MOBILE (≤ 768px) ---------- */
@media (max-width: 768px) {
/* Hero — medidas mobile demo Astra: 130px top, 70px bottom, 24px lados */
.hero-cinematic, .product-hero {
padding: 130px 0 70px !important;
min-height: 75vh !important;
}
.hero-cinematic h1, .product-hero h1 {
font-size: clamp(1.875rem, 7.5vw, 2.5rem) !important;
line-height: 1.1 !important;
}
.hero-cinematic p, .product-hero p {
font-size: .9375rem !important;
margin-bottom: 24px !important;
}
.hero-cinematic .container, .product-hero .container {
padding: 0 24px !important;
}
.hero-cinematic .kicker .num {
font-size: 1.5rem !important;
}
.hero-cinematic .kicker {
font-size: .6875rem !important;
margin-bottom: 18px !important;
}
/* Sections regulares: 64px (medida demo Astra sm) */
.product-section {
padding: 64px 0 !important;
}
.product-section .container,
.product-section--alt .container,
.cta-cinematic .container {
padding: 0 24px !important;
}
.product-section h2,
body .entry-content section h2 {
font-size: 1.625rem !important;
line-height: 1.2 !important;
}
.product-section .section-eyebrow {
font-size: .6875rem !important;
}
/* Velocity text muy chico mobile */
/* Brand statement mobile */
.brand-statement {
height: auto !important;
}
.brand-statement-pin {
height: auto !important;
min-height: 60vh !important;
padding: 64px 0 !important;
}
.brand-statement-headline {
font-size: 1.875rem !important;
line-height: 1.1 !important;
gap: 4px !important;
}
.brand-statement-headline .reveal-row { gap: 8px !important; }
.brand-statement-headline .reveal-word {
clip-path: inset(0 0 0 0) !important;
}
.brand-statement-sub {
font-size: .9375rem !important;
margin-top: 24px !important;
opacity: 1 !important;
transform: none !important;
}
/* Stat ticker mobile: 1 col */
.stat-ticker {
grid-template-columns: 1fr !important;
gap: 28px !important;
padding: 0 !important;
}
.stat-ticker-item {
padding-left: 18px !important;
text-align: left;
}
.stat-ticker-item .num-xl {
font-size: 2.5rem !important;
}
.stat-ticker-item .label-xl {
font-size: .8125rem !important;
}
/* Product hero quick stats: 2 cols → 1 si necesario */
/* H-scroll cards: stack vertical sin pin */
/* Service cards 1 col */
.grid-3 { grid-template-columns: 1fr !important; }
.card { padding: 24px 20px !important; }
/* Steps stack */
.steps { grid-template-columns: 1fr !important; gap: 14px !important; }
.step { padding: 22px 20px !important; }
/* Callout fit 1 col */
.callout-fit { grid-template-columns: 1fr !important; }
/* CTA cinematic mobile */
.cta-cinematic {
padding: 60px 0 !important;
}
.cta-cinematic h2 {
font-size: 1.625rem !important;
line-height: 1.15 !important;
}
.cta-cinematic .cta-bg-text {
font-size: 5rem !important;
bottom: 0 !important;
}
.cta-cinematic p { font-size: .9375rem !important; }
/* Botones full width en mobile */
.hero-cinematic a[class*="wp-block-button__link"],
.product-hero a[class*="wp-block-button__link"],
.cta-cinematic a[class*="wp-block-button__link"] {
width: 100% !important;
text-align: center !important;
padding: 14px 20px !important;
font-size: .9375rem !important;
}
.hero-cinematic > div > div[style*="display:flex"],
.product-hero > div > div[style*="display:flex"] {
flex-direction: column !important;
width: 100% !important;
max-width: 320px;
}
/* Footer mobile */
.ce-footer { padding: 48px 24px 28px !important; }
.ce-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; margin-bottom: 32px !important; }
.ce-footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
.ce-footer-cta { width: 100%; text-align: center; }
/* Header mobile — site title más chico */
.site-title { font-size: 1.125rem !important; }
.site-title a::before { width: 22px !important; height: 22px !important; vertical-align: -5px !important; }
/* WhatsApp FAB más pequeño y posición segura — SUBIDO encima del bottom cta bar + safe-area */
.ce-fab-whatsapp {
width: 50px !important;
height: 50px !important;
bottom: calc(88px + env(safe-area-inset-bottom)) !important; /* respeta home indicator iPhone */
right: 16px !important;
}
/* Retrato (Conócenos) — stack vertical */
.retrato-story {
gap: 48px !important;
}
.retrato-story-block h2 {
font-size: 1.5rem !important;
}
/* Post body: padding más cómodo */
.post-body div[style*="max-width:760px"] {
padding: 0 20px !important;
}
.post-body p {
font-size: 1rem !important;
}
.post-body h2 {
font-size: 1.5rem !important;
}
}
/* ---------- MOBILE PEQUEÑO (≤ 480px) ---------- */
@media (max-width: 480px) {
.hero-cinematic h1, .product-hero h1 {
font-size: 1.875rem !important;
line-height: 1.1 !important;
}
.product-section h2 {
font-size: 1.5rem !important;
}
.brand-statement-headline {
font-size: 1.5rem !important;
}
.stat-ticker-item .num-xl {
font-size: 2.25rem !important;
}
.ce-footer-logo-text { font-size: 1.25rem !important; }
}
/* =========================================================
★ MOBILE GLOBAL ENFORCEMENT — basado en demo Astra Spectra
Estos overrides aplican a TODAS las páginas, sin filtros de body
y derrotan inline styles con !important + selectores específicos.
Medidas exactas:
- Hero desktop: 250/40px · tablet: 130/32px · mobile: 130/70/24px
- Section: 150/40 · 100/32 · 64/24
========================================================= */
/* ---------- TABLET (≤ 1024px) — TODAS las páginas ---------- */
@media (max-width: 1024px) {
/* Heroes */
section.hero-cinematic,
section.product-hero,
body section[class*="hero"][style*="padding"] {
padding: 130px 32px !important;
min-height: auto !important;
}
/* Override inline styles del entry-content > section[style*="padding"] */
body .entry-content > section[style*="min-height"],
body .entry-content > section[style*="padding"] {
min-height: auto !important;
}
/* Section regular */
body .product-section,
body .calc-stage,
body .entry-content > section.product-section,
body section[class*="section"][style*="padding"] {
padding: 80px 32px !important;
}
/* Containers */
.hero-cinematic .container,
.product-hero .container,
.product-section .container,
.calc-stage .container,
.cta-cinematic .container,
.brand-statement .container,
body .entry-content section .container[style*="max-width"] {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
/* Grid 2 cols → stack */
.product-grid-2,
.calc-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.calc-panel { position: static !important; }
}
/* ---------- MOBILE (≤ 768px) — APLICA A TODO ---------- */
@media (max-width: 768px) {
/* HEROES — medida demo Astra: 130/70/24 */
section.hero-cinematic,
section.product-hero,
body .entry-content > section.hero-cinematic,
body .entry-content > section.product-hero {
padding: 110px 20px 60px !important;
min-height: 70vh !important;
}
.hero-cinematic h1,
.product-hero h1,
body .entry-content section h1 {
font-size: clamp(1.625rem, 7vw, 2rem) !important;
line-height: 1.1 !important;
margin-bottom: 16px !important;
}
.hero-cinematic p,
.product-hero p,
body .entry-content section.hero-cinematic p,
body .entry-content section.product-hero p {
font-size: .9375rem !important;
line-height: 1.55 !important;
margin-bottom: 20px !important;
}
.hero-cinematic .kicker,
.product-hero .product-eyebrow {
font-size: .625rem !important;
margin-bottom: 14px !important;
gap: 10px !important;
}
.hero-cinematic .kicker .num {
font-size: 1.25rem !important;
}
/* SECCIONES — medida demo: 64/24 */
body .product-section,
body .product-section--alt,
body .calc-stage,
body section.cta-cinematic,
body section.velocity-section,
body section.brand-statement,
body section[class*="section"][style*="padding:120px"],
body section[class*="section"][style*="padding:140px"] {
padding: 56px 20px !important;
}
/* Containers — sin padding, 100% width */
body .entry-content section .container,
body .entry-content section div[style*="max-width:1200px"],
body .entry-content section div[style*="max-width:1100px"],
body .entry-content section div[style*="max-width:900px"] {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
/* TÍTULOS H2 de sección */
body .entry-content section h2,
body .product-section h2 {
font-size: 1.5rem !important;
line-height: 1.2 !important;
letter-spacing: -.02em !important;
margin-bottom: 14px !important;
}
body .entry-content section h3,
body .product-section h3 {
font-size: 1.125rem !important;
line-height: 1.3 !important;
}
body .entry-content section .section-eyebrow,
body .entry-content section span[style*="text-transform:uppercase"] {
font-size: .625rem !important;
margin-bottom: 12px !important;
letter-spacing: .12em !important;
}
body .entry-content section .section-subtitle,
body .entry-content section p[style*="max-width:640px"] {
font-size: .9375rem !important;
margin: 12px 0 0 !important;
}
/* TODOS los GRIDS a 1 col en mobile */
body .grid-3,
body div[style*="grid-template-columns:repeat(auto-fit"],
body div[style*="display:grid"][style*="repeat(auto-fit,minmax(280px"],
body div[style*="display:grid"][style*="repeat(auto-fit,minmax(320px"],
body .callout-fit,
body .product-grid-2 {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
/* CARDS uniformes */
body .card,
body .step,
body .h-scroll-card,
body .product-info-card,
body .callout-card,
body .service-card,
body a.card[style] {
padding: 22px 18px !important;
border-radius: 16px !important;
min-height: auto !important;
}
body .card h3,
body .step h4 {
font-size: 1rem !important;
margin-bottom: 8px !important;
}
body .card p,
body .step p {
font-size: .875rem !important;
line-height: 1.5 !important;
}
/* HERO CINEMATIC h-scroll desactivar pin/horizontal */
/* VELOCITY TEXT MOBIL */
/* BRAND STATEMENT mobile sin pin */
.brand-statement {
height: auto !important;
padding: 0 !important;
}
.brand-statement-pin {
height: auto !important;
min-height: 50vh !important;
padding: 56px 20px !important;
padding-bottom: 56px !important;
}
.brand-statement-headline {
font-size: 1.625rem !important;
line-height: 1.1 !important;
gap: 4px !important;
}
.brand-statement-headline .reveal-row { gap: 6px !important; }
.brand-statement-headline .reveal-word {
clip-path: inset(0 0 0 0) !important;
display: inline-block !important;
}
.brand-statement-sub {
font-size: .875rem !important;
margin-top: 18px !important;
opacity: 1 !important;
transform: none !important;
}
/* STAT TICKER mobile: 1 col */
body .stat-ticker {
grid-template-columns: 1fr !important;
gap: 22px !important;
padding: 0 !important;
}
.stat-ticker-item .num-xl {
font-size: 2rem !important;
}
.stat-ticker-item .label-xl {
font-size: .8125rem !important;
}
/* PRODUCT QUICK STATS mobile */
/* CTA CINEMATIC mobile */
.cta-cinematic {
padding: 56px 20px !important;
}
.cta-cinematic h2 {
font-size: 1.5rem !important;
line-height: 1.2 !important;
margin-bottom: 14px !important;
}
.cta-cinematic .cta-bg-text {
font-size: 4rem !important;
bottom: 0 !important;
}
.cta-cinematic p {
font-size: .9375rem !important;
margin-bottom: 24px !important;
}
/* BOTONES mobile — auto width, centrados, no full-width */
body .entry-content a[class*="wp-block-button__link"] {
width: auto !important;
max-width: 100% !important;
text-align: center !important;
padding: 12px 22px !important;
font-size: .875rem !important;
box-sizing: border-box;
display: inline-flex !important;
align-items: center;
justify-content: center;
white-space: nowrap;
}
/* Hero buttons row → mantienen horizontal con wrap si caben, sino stack centrado */
body .hero-cinematic > div > div[style*="display:flex"][style*="gap"],
body .product-hero > div > div[style*="display:flex"][style*="gap"],
body .cta-cinematic > div > div[style*="display:flex"][style*="gap"] {
flex-direction: row !important;
flex-wrap: wrap !important;
width: auto !important;
max-width: 100% !important;
gap: 8px !important;
justify-content: flex-start !important;
}
body .cta-cinematic > div > div[style*="display:flex"][style*="gap"] {
justify-content: center !important;
}
/* Botones del calc result panel — vertical stack solo ahí porque cabrían apretados */
.calc-result-cta {
flex-direction: row !important;
flex-wrap: wrap !important;
}
.calc-result-cta a {
flex: 1 1 auto !important;
min-width: 130px !important;
width: auto !important;
}
/* HEADER mobile — solid permanente para legibilidad */
body.is-home .site-header,
body.has-dark-hero .site-header {
background: rgba(10, 23, 51, .78) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
.site-title {
font-size: 1.0625rem !important;
}
.site-title a::before {
width: 22px !important;
height: 22px !important;
vertical-align: -5px !important;
}
/* WhatsApp FAB mobile — compacto y SUBIDO encima del bottom cta bar + safe-area iPhone */
.ce-fab-whatsapp {
width: 50px !important;
height: 50px !important;
bottom: calc(88px + env(safe-area-inset-bottom)) !important; /* respeta home indicator iPhone */
right: 16px !important;
}
.ce-fab-whatsapp svg {
width: 24px !important;
height: 24px !important;
}
.ce-fab-whatsapp .ce-fab-label {
display: none !important; /* en mobile solo el icono */
}
/* FOOTER mobile */
.ce-footer {
padding: 48px 20px 28px !important;
}
.ce-footer-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
margin-bottom: 32px !important;
}
.ce-footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.ce-footer-cta {
width: 100%;
text-align: center;
}
/* CONÓCENOS pin retrato → stack */
.retrato-story { gap: 36px !important; padding: 0 !important; }
.retrato-story-block { padding: 0 !important; }
.retrato-story-block h2 {
font-size: 1.5rem !important;
}
.retrato-story-block p {
font-size: .9375rem !important;
}
/* CALCULADORAS mobile */
.calc-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.calc-panel,
.calc-result {
padding: 24px 20px !important;
border-radius: 18px !important;
}
.calc-panel-title { font-size: 1.25rem !important; }
.calc-result-hero-value { font-size: 2rem !important; }
.calc-field-value { font-size: .9375rem !important; }
.calc-result-cta { flex-direction: column; }
.calc-result-cta a { flex: none !important; width: 100% !important; }
/* BLOG POST body mobile */
body.single-post .post-body div[style*="max-width:760px"],
body.single-post section.post-body > div {
padding: 0 20px !important;
max-width: 100% !important;
}
body.single-post .post-body p {
font-size: 1rem !important;
line-height: 1.65 !important;
margin-bottom: 18px !important;
}
body.single-post .post-body h2 {
font-size: 1.375rem !important;
margin: 32px 0 14px !important;
}
body.single-post .post-body h3 {
font-size: 1.125rem !important;
margin: 22px 0 10px !important;
}
body.single-post .post-body ul {
padding-left: 20px !important;
font-size: .9375rem !important;
}
body.single-post .post-body blockquote {
font-size: 1.0625rem !important;
padding-left: 18px !important;
margin: 24px 0 !important;
}
body.single-post .post-body div[style*="background:#E8F0FF"] {
padding: 18px 20px !important;
margin: 22px 0 !important;
}
/* =========================================================
★ MOBILE FIXES — single post + hubs + blog hub + spacing
========================================================= */
/* Blog SINGLE — sidebar y main 1 col, sidebar abajo del contenido */
body.crediexpres-blog-single .blog-single-grid {
grid-template-columns: 1fr !important;
gap: 0 !important;
padding: 0 !important;
}
body.crediexpres-blog-single .blog-sidebar {
order: 2 !important;
position: static !important;
margin: 24px 16px 0 !important;
top: auto !important;
}
body.crediexpres-blog-single .blog-main {
order: 1 !important;
}
body.crediexpres-blog-single .blog-sidebar-inner {
padding: 22px 18px !important;
}
body.crediexpres-blog-single .blog-sidebar-list li a {
grid-template-columns: 24px 1fr !important;
padding: 12px 10px !important;
}
body.crediexpres-blog-single .blog-main > section:first-child {
margin: 70px 16px 0 !important;
padding: clamp(40px, 6vw, 60px) clamp(20px, 4vw, 32px) !important;
border-radius: 18px !important;
}
body.crediexpres-blog-single .blog-main > section.post-body {
margin: 16px 16px 0 !important;
padding: 32px 20px !important;
border-radius: 18px !important;
}
body.crediexpres-blog-single .blog-main > section.cta-cinematic {
margin: 16px 16px 0 !important;
border-radius: 18px !important;
padding: 48px 20px !important;
}
body.crediexpres-blog-single .blog-main > section:first-child h1 {
font-size: clamp(1.5rem, 6vw, 2rem) !important;
line-height: 1.15 !important;
}
/* Blog HUB 3 secciones — header de cada sección en stack */
body.crediexpres-blog-hub .blog-cat-section > div > div[style*="display:flex"][style*="justify-between"],
body.crediexpres-blog-hub .blog-cat-section > .container > div:first-child {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
body.crediexpres-blog-hub .blog-cat-section h2 {
font-size: 1.5rem !important;
}
body.crediexpres-blog-hub .hero-cinematic > div > div[style*="display:flex"][style*="gap:12px"] {
gap: 6px !important;
}
body.crediexpres-blog-hub .hero-cinematic > div > div[style*="display:flex"] a {
font-size: .6875rem !important;
padding: 6px 10px !important;
}
/* HUB cards (Hipotecario/PyME) — stack 1 col, padding apretado */
.hub-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.hub-card {
padding: 22px 18px !important;
min-height: auto !important;
}
.hub-card h3 { font-size: 1.0625rem !important; }
.hub-card p { font-size: .875rem !important; margin-bottom: 14px !important; }
/* REQUIREMENTS + BANKS — 1 col + padding compacto */
.requirements-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.req-card { padding: 22px 18px !important; }
.req-card-icon { width: 44px !important; height: 44px !important; font-size: 1.5rem !important; }
.req-card h3 { font-size: 1rem !important; }
.req-list li { font-size: .8125rem !important; }
.banks-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
/* YOUTUBE videos — 1 col */
.yt-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.yt-card-body { padding: 14px 16px !important; }
.yt-card-body h4 { font-size: .875rem !important; -webkit-line-clamp: 2 !important; }
/* Header fixed compensación: dar padding-top a body para que no tape contenido */
body.crediexpres-blog-single,
body.crediexpres-blog-hub {
padding-top: 0 !important; /* el primer hero ya tiene margin-top */
}
/* CALCULADORAS — sliders y cards de result */
.calc-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
.calc-panel, .calc-result { padding: 22px 18px !important; }
.calc-panel-title { font-size: 1.125rem !important; }
.calc-result-hero-value { font-size: 1.875rem !important; }
.calc-field-highlight { padding: 12px !important; margin: 18px -10px !important; }
.calc-result-cta a { font-size: .8125rem !important; padding: 12px 14px !important; }
/* Steps grid — ya tiene 1 col en 640 pero forzar para 768 */
.steps { grid-template-columns: 1fr !important; gap: 12px !important; }
.step { padding: 22px 18px !important; }
/* MENU móvil — fuerza visibilidad del toggle hamburguesa */
.ast-builder-menu-mobile,
.ast-mobile-menu-buttons-toggle,
.menu-toggle.main-header-menu-toggle,
.ast-menu-toggle,
button.menu-toggle {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
color: white !important;
background: rgba(255, 255, 255, .08) !important;
border: 1px solid rgba(255, 255, 255, .15) !important;
border-radius: 10px !important;
width: 44px !important;
height: 44px !important;
padding: 0 !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
pointer-events: auto !important;
z-index: 1010 !important;
}
body.is-home .menu-toggle,
body.has-dark-hero .menu-toggle {
color: white !important;
}
body.crediexpres-child:not(.is-home):not(.has-dark-hero) .menu-toggle {
color: var(--azul-marino) !important;
background: rgba(10, 23, 51, .06) !important;
border-color: rgba(10, 23, 51, .12) !important;
}
.menu-toggle .mobile-menu-toggle-icon,
.menu-toggle svg,
.ast-mobile-svg {
display: block !important;
width: 22px !important;
height: 22px !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Mobile drawer — visible cuando se abre */
.main-header-menu.toggle-on,
.ast-mobile-menu-wrap,
.main-navigation .main-navigation,
body.ast-header-break-point .main-header-bar-navigation {
display: block !important;
}
/* Drawer styles cuando está abierto */
body.toggled .main-header-bar-navigation,
.ast-mobile-popup-content,
.ast-mobile-popup-overlay,
#ast-mobile-popup {
background: rgba(10, 23, 51, .98) !important;
backdrop-filter: blur(20px) !important;
}
/* Items del drawer en blanco */
.ast-mobile-popup-content .menu-link,
body.toggled .main-navigation .menu-link,
.ast-mobile-menu-wrap .menu-link {
color: rgba(255, 255, 255, .85) !important;
padding: 14px 20px !important;
font-family: var(--font-titulo) !important;
font-weight: 600 !important;
font-size: 1rem !important;
border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
/* En mobile QUITAR los efectos de pill/shine del menu desktop que pueden bloquear taps */
.ast-builder-menu .menu-link::before,
.ast-builder-menu .menu-link::after {
display: none !important;
}
/* Site title en mobile cuando hay drawer */
body.toggled .site-title,
body.ast-header-break-point .site-title {
color: white !important;
}
}
/* ---------- MOBILE MUY PEQUEÑO (≤ 480px) ---------- */
@media (max-width: 480px) {
section.hero-cinematic,
section.product-hero {
padding: 100px 16px 50px !important;
}
.hero-cinematic h1,
.product-hero h1 {
font-size: 1.5rem !important;
}
body .entry-content section h2 {
font-size: 1.375rem !important;
}
body .product-section,
body .calc-stage,
body .cta-cinematic {
padding: 48px 16px !important;
}
.stat-ticker-item .num-xl { font-size: 1.875rem !important; }
.brand-statement-headline { font-size: 1.375rem !important; }
.ce-footer-logo-text { font-size: 1.125rem !important; }
}
/* ---------- TOUCH DEVICES — disable hover effects pesados ---------- */
@media (hover: none) {
.ast-builder-menu .menu-link::before,
.ast-builder-menu .menu-link::after,
body.is-home .ast-builder-menu .menu-link::after {
display: none !important;
}
.h-scroll-card:hover,
.step:hover,
.card:hover,
.service-card:hover {
transform: none !important;
}
/* Header solid en touch (no transparent que confunde) */
body.is-home .site-header,
body.has-dark-hero .site-header {
background: rgba(10, 23, 51, .92) !important;
backdrop-filter: blur(12px);
}
}
/* =========================================================
BLOG SINGLE — REDISEÑO CONTRASTE FINAL (v1.2.8)
Sidebar navy oscuro premium + área del post 100% blanco
garantiza contraste sobre CUALQUIER fondo heredado de Astra
========================================================= */
/* 1) FONDO BLANCO TOTAL — todos los wrappers de Astra que pudieran
meter un linear-gradient o azul-suave heredado */
html body.single-post,
html body.single-post .site,
html body.single-post #page,
html body.single-post #content,
html body.single-post .site-content,
html body.single-post .ast-container,
html body.single-post .site-content > .ast-container,
html body.single-post .ast-article-single,
html body.single-post .entry-content,
html body.single-post .blog-single-grid,
html body.crediexpres-blog-single,
html body.crediexpres-blog-single .site,
html body.crediexpres-blog-single #page,
html body.crediexpres-blog-single #content,
html body.crediexpres-blog-single .site-content,
html body.crediexpres-blog-single .ast-container,
html body.crediexpres-blog-single .site-content > .ast-container,
html body.crediexpres-blog-single .entry-content,
html body.crediexpres-blog-single .blog-single-grid {
background: #FFFFFF !important;
background-color: #FFFFFF !important;
background-image: none !important;
}
/* 2) SIDEBAR REDISEÑADO — card NAVY oscuro premium con glow azul
Texto blanco/azul claro: contraste garantizado sin importar el bg */
html body.single-post .blog-sidebar-inner,
html body.crediexpres-blog-single .blog-sidebar-inner {
background: linear-gradient(160deg, #0A1733 0%, #122149 100%) !important;
border: 1px solid rgba(30, 95, 255, .25) !important;
box-shadow:
0 24px 60px -20px rgba(10, 23, 51, .4),
0 0 0 1px rgba(255, 255, 255, .04) inset,
0 1px 0 rgba(255, 255, 255, .08) inset !important;
padding: 32px 26px !important;
position: relative;
overflow: hidden;
}
/* Glow sutil top-right del sidebar */
html body.single-post .blog-sidebar-inner::before,
html body.crediexpres-blog-single .blog-sidebar-inner::before {
content: '';
position: absolute;
top: -40%;
right: -20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(30,95,255,.25) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
html body.single-post .blog-sidebar-inner > *,
html body.crediexpres-blog-single .blog-sidebar-inner > * {
position: relative;
z-index: 1;
}
/* Eyebrow del sidebar — azul claro brillante */
html body.single-post .blog-sidebar-eyebrow,
html body.crediexpres-blog-single .blog-sidebar-eyebrow {
color: #6B95FF !important;
font-weight: 700;
letter-spacing: .16em;
}
/* Título "Sigue aprendiendo" — blanco puro */
html body.single-post .blog-sidebar-title,
html body.crediexpres-blog-single .blog-sidebar-title {
color: #FFFFFF !important;
font-size: 1.375rem !important;
margin-bottom: 24px !important;
}
/* Items de lista — fondo translúcido + borde */
html body.single-post .blog-sidebar-list li a,
html body.crediexpres-blog-single .blog-sidebar-list li a {
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .06);
border-left: 3px solid transparent;
padding: 14px 14px !important;
}
html body.single-post .blog-sidebar-list li a:hover,
html body.crediexpres-blog-single .blog-sidebar-list li a:hover {
background: rgba(30, 95, 255, .14) !important;
border-color: rgba(30, 95, 255, .35) !important;
border-left-color: #6B95FF !important;
transform: translateX(4px);
}
/* Numeración — azul claro brillante */
html body.single-post .bs-num,
html body.crediexpres-blog-single .bs-num {
color: #6B95FF !important;
font-size: .9375rem !important;
}
/* Título del artículo en sidebar — blanco */
html body.single-post .bs-title,
html body.crediexpres-blog-single .bs-title {
color: #FFFFFF !important;
font-size: .875rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
}
/* Excerpt — gris claro legible */
html body.single-post .bs-excerpt,
html body.crediexpres-blog-single .bs-excerpt {
color: rgba(255, 255, 255, .6) !important;
font-size: .75rem !important;
}
/* CTA "Ver todos los artículos" */
html body.single-post .blog-sidebar-cta,
html body.crediexpres-blog-single .blog-sidebar-cta {
color: #6B95FF !important;
border-top: 1px solid rgba(255, 255, 255, .1) !important;
font-weight: 700;
margin-top: 8px;
}
html body.single-post .blog-sidebar-cta:hover,
html body.crediexpres-blog-single .blog-sidebar-cta:hover {
color: #FFFFFF !important;
}
/* 3) BODY DEL POST — todos los bloques internos en blanco con buena tipografía */
html body.single-post .blog-main,
html body.crediexpres-blog-single .blog-main {
background: transparent !important;
}
html body.single-post .blog-main p,
html body.single-post .blog-main li,
html body.crediexpres-blog-single .blog-main p,
html body.crediexpres-blog-single .blog-main li {
color: #1F2937 !important;
font-size: 1.0625rem !important;
line-height: 1.75 !important;
}
html body.single-post .blog-main h2,
html body.crediexpres-blog-single .blog-main h2 {
color: var(--azul-marino) !important;
}
html body.single-post .blog-main h3,
html body.crediexpres-blog-single .blog-main h3 {
color: var(--azul-marino) !important;
}
/* Cajas decorativas (background:#E8F0FF inline) — texto navy fuerte */
html body.single-post .blog-main div[style*="background:#E8F0FF"],
html body.crediexpres-blog-single .blog-main div[style*="background:#E8F0FF"] {
background: linear-gradient(135deg, #F0F5FF 0%, #FFFFFF 100%) !important;
border: 1px solid rgba(30, 95, 255, .15);
border-left: 4px solid var(--azul-electrico) !important;
border-radius: var(--radius-lg) !important;
padding: 24px 28px !important;
color: var(--azul-marino) !important;
}
html body.single-post .blog-main div[style*="background:#E8F0FF"] *,
html body.crediexpres-blog-single .blog-main div[style*="background:#E8F0FF"] * {
color: var(--azul-marino) !important;
}
html body.single-post .blog-main div[style*="background:#E8F0FF"] strong,
html body.crediexpres-blog-single .blog-main div[style*="background:#E8F0FF"] strong {
color: var(--azul-electrico) !important;
}
/* 4) Mobile: sidebar full-width pero compacta */
@media (max-width: 1024px) {
html body.single-post .blog-sidebar,
html body.crediexpres-blog-single .blog-sidebar {
margin: 24px 16px !important;
}
html body.single-post .blog-sidebar-inner,
html body.crediexpres-blog-single .blog-sidebar-inner {
padding: 24px 20px !important;
}
}
/* =====================================================================
2026-05-12 — RESTORE: Append de TODOS los cambios de sesión 2026-05-11
===================================================================== */
/* =====================================================================
2026-05-11 — APPEND-ONLY MOBILE FIX (winning block)
===================================================================== */
@media (max-width: 768px) {
body .brand-statement {
padding: 0 !important;
margin: 0 !important;
height: auto !important;
min-height: 0 !important;
background: #ffffff !important;
}
body .brand-statement-pin {
padding: 12px 24px !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
place-items: center !important;
background: #ffffff !important;
}
body .brand-statement-pin::before {
display: none !important;
}
body .brand-statement-headline,
html body .brand-statement-headline {
font-size: 2.5rem !important;
line-height: 1.05 !important;
letter-spacing: -.025em !important;
}
body .brand-statement-sub {
margin-bottom: 0 !important;
}
body section.bank-marquee {
padding: 8px 24px !important;
margin: 0 !important;
background: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
}
body section.stat-ticker {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
body section.stat-ticker > .container,
body section.stat-ticker .container {
background: transparent !important;
border: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
body .stat-ticker-item {
background: transparent !important;
border: 0 !important;
border-left: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
body .entry-content,
body .site-content,
body .ast-container {
background: #ffffff !important;
}
body .hero-slide h1,
body .entry-content section .hero-slide h1 {
font-size: 54px !important;
line-height: 0.96 !important;
}
}
body,
html body,
html body.home,
html body.page-id-2848 {
background: #ffffff !important;
}
/* =====================================================================
2026-05-11 — DESKTOP brand-statement scale-up + white bg
===================================================================== */
@media (min-width: 769px) {
body .brand-statement,
html body .brand-statement {
background: #ffffff !important;
}
body .brand-statement-pin,
html body .brand-statement-pin {
background: #ffffff !important;
}
body .brand-statement-pin::before,
html body .brand-statement-pin::before {
display: none !important;
}
body .brand-statement-headline,
html body .brand-statement-headline,
body .entry-content section .brand-statement-headline {
font-size: clamp(2.8rem, 5vw, 5rem) !important;
line-height: 1.02 !important;
letter-spacing: -.04em !important;
}
}
@media (min-width: 1200px) {
body .brand-statement-headline,
html body .brand-statement-headline,
body .entry-content section .brand-statement-headline {
font-size: clamp(3.5rem, 5vw, 6rem) !important;
}
}
@media (min-width: 1600px) {
body .brand-statement-headline,
html body .brand-statement-headline,
body .entry-content section .brand-statement-headline {
font-size: clamp(4.5rem, 5vw, 7.5rem) !important;
}
}
@media (min-width: 769px) {
html body.home main article .entry-content section.brand-statement h2.brand-statement-headline,
html body.page-id-2848 .brand-statement-headline {
font-size: clamp(1.98rem, 3.6vw, 3.6rem) !important;
line-height: 1.05 !important;
letter-spacing: -.045em !important;
}
}
@media (min-width: 1200px) {
html body.home main article .entry-content section.brand-statement h2.brand-statement-headline,
html body.page-id-2848 .brand-statement-headline {
font-size: clamp(2.52rem, 3.6vw, 4.32rem) !important;
}
}
@media (min-width: 1600px) {
html body.home main article .entry-content section.brand-statement h2.brand-statement-headline,
html body.page-id-2848 .brand-statement-headline {
font-size: clamp(3.24rem, 3.6vw, 5.4rem) !important;
}
}
/* =====================================================================
2026-05-11 — Padding lateral 32px secciones mobile
===================================================================== */
@media (max-width: 768px) {
html body section.compare-stair-stage,
html body section.trust-stage,
html body section.testimonios-stage,
html body section.faq-stage,
html body section.cta-cinematic {
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
}
body .compare-stair-container,
body .trust-container,
body .testimonios-container,
body .faq-container,
html body .compare-stair-container,
html body .trust-container,
html body .testimonios-container,
html body .faq-container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
}
/* =====================================================================
2026-05-11 — compare-stair mobile: colapsar espacio entre paso 04 y footer
===================================================================== */
@media (max-width: 1024px) {
html body .compare-stair-grid {
padding-bottom: 0 !important;
}
html body .compare-stair-footer {
margin-top: 20px !important;
}
}
/* =====================================================================
2026-05-11 — Hero responsive para pantallas con altura limitada
===================================================================== */
@media (max-height: 820px) and (min-width: 769px) {
body .hero-slide h1,
html body .entry-content section .hero-slide h1 {
font-size: clamp(2.5rem, 4.5vw, 4rem) !important;
line-height: 1.02 !important;
}
body .hero-slide .kicker {
margin-bottom: 14px !important;
font-size: 0.75rem !important;
}
body .hero-slide .kicker .num {
font-size: 1.8rem !important;
}
}
@media (max-height: 700px) and (min-width: 769px) {
body .hero-slide h1,
html body .entry-content section .hero-slide h1 {
font-size: clamp(2rem, 4vw, 3rem) !important;
}
}
/* =====================================================================
2026-05-11 — Mobile header logo (site-title) visible
===================================================================== */
@media (max-width: 920px) {
html body #ast-mobile-header,
html body #ast-mobile-header .ast-main-header-wrap,
html body #ast-mobile-header .ast-primary-header-bar,
html body #ast-mobile-header .ast-builder-grid-row,
html body #ast-mobile-header .site-header-primary-section-left,
html body #ast-mobile-header .ast-builder-layout-element,
html body #ast-mobile-header .site-branding,
html body #ast-mobile-header .ast-site-identity,
html body #ast-mobile-header .ast-site-title-wrap,
html body #ast-mobile-header .site-title {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
}
html body #ast-mobile-header .site-title {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
}
html body #ast-mobile-header .site-title a,
html body #ast-mobile-header .ast-site-identity a {
color: var(--azul-marino) !important;
background: transparent !important;
font-family: var(--font-titulo, "Plus Jakarta Sans", sans-serif) !important;
font-size: 1.35rem !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
text-decoration: none !important;
text-transform: none !important;
line-height: 1 !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 2026-06-24 — Fix A: blob azul real en mobile (override del gradiente pálido
de body.has-dark-hero que lo volvía blanco→invisible sobre el header glass) */
html body #ast-mobile-header .site-title a::before {
background: linear-gradient(135deg, var(--azul-electrico), #6B95FF) !important;
box-shadow: 0 4px 12px -2px rgba(30, 95, 255, .35) !important;
}
}
/* =====================================================================
2026-05-11 — Portafolio cards premium (Hipotecario + PyME)
===================================================================== */
.portafolio-cards {
padding: clamp(60px, 8vw, 120px) clamp(24px, 8vw, 140px);
background: #fff;
position: relative;
}
.portafolio-eyebrow {
font-size: 0.85rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #1E5FFF;
font-weight: 700;
margin-bottom: 14px;
text-align: center;
}
.portafolio-title {
font-family: var(--font-titulo, "Plus Jakarta Sans", sans-serif);
font-size: clamp(2.2rem, 5.5vw, 4.5rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
color: #0A1733;
text-align: center;
margin: 0 auto 16px;
max-width: 900px;
text-wrap: balance;
}
.portafolio-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 64px);
max-width: 1100px;
margin: 0 auto;
justify-content: center;
}
@media (min-width: 1400px) {
.portafolio-grid {
max-width: 1180px;
}
}
.portafolio-card {
position: relative;
display: block;
border-radius: 28px;
overflow: hidden;
text-decoration: none;
aspect-ratio: 5 / 4;
min-height: 360px;
max-height: 440px;
transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease;
box-shadow: 0 12px 40px -16px rgba(10,23,51,.2);
}
.portafolio-card:hover {
transform: translateY(-6px) scale(1.005);
box-shadow: 0 24px 60px -16px rgba(10,23,51,.35);
}
.portafolio-card h3 {
font-family: var(--font-titulo, "Plus Jakarta Sans", sans-serif);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.03em;
color: #fff;
margin: 0 0 10px;
}
.portafolio-card p {
font-size: 0.92rem;
line-height: 1.55;
color: rgba(255,255,255,0.88);
margin: 0 0 16px;
max-width: 90%;
}
@media (max-width: 768px) {
.portafolio-cards {
padding: 40px 16px !important;
}
.portafolio-title {
font-size: clamp(2rem, 8vw, 2.8rem);
margin-bottom: 12px;
}
.portafolio-grid {
grid-template-columns: 1fr;
gap: 14px;
max-width: 100%;
}
.portafolio-card {
aspect-ratio: auto !important;
min-height: 320px !important;
max-height: 380px !important;
border-radius: 22px;
}
.portafolio-card h3 {
font-size: 1.9rem !important;
margin-bottom: 6px !important;
}
.portafolio-card p {
font-size: 0.85rem !important;
margin-bottom: 12px !important;
line-height: 1.4 !important;
}
}
/* =====================================================================
2026-05-11 — BORDER GLOW (vanilla port of React Bits BorderGlow)
===================================================================== */
/* =====================================================================
2026-05-11 — Testimonios: sombra + reducir 20% mobile + carrusel padding
===================================================================== */
body .testimonio-card,
html body .testimonio-card {
box-shadow: 0 12px 36px -8px rgba(10, 23, 51, 0.18), 0 4px 12px -2px rgba(10, 23, 51, 0.08) !important;
}
body .testimonio-card:hover {
box-shadow: 0 20px 50px -10px rgba(10, 23, 51, 0.28), 0 8px 18px -4px rgba(10, 23, 51, 0.12) !important;
}
@media (max-width: 1024px) {
html body .testimonio-card {
flex: 0 0 68vw !important;
max-width: 288px !important;
padding: 22px 20px !important;
}
html body .testimonio-photo-wrap,
html body .testimonio-photo {
width: 88px !important;
height: 88px !important;
}
html body .testimonio-name { font-size: 1.15rem !important; }
html body .testimonio-tag {
font-size: 0.7rem !important;
padding: 4px 10px !important;
}
html body .testimonio-quote {
font-size: 0.88rem !important;
line-height: 1.5 !important;
}
html body .testimonios-grid {
padding-left: 20px !important;
padding-right: 20px !important;
scroll-padding-left: 20px !important;
box-sizing: border-box !important;
}
.testimonios-dots {
display: flex !important;
gap: 8px !important;
justify-content: center !important;
margin-top: 24px !important;
}
.testimonios-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(10, 23, 51, 0.2);
border: 0;
padding: 0;
cursor: pointer;
transition: background 0.3s ease, width 0.3s ease;
}
.testimonios-dot.is-active {
background: #1E5FFF;
width: 24px;
border-radius: 4px;
}
}
/* =====================================================================
2026-05-11 — Footer accordion mobile (ce-footer-col)
===================================================================== */
@media (max-width: 768px) {
html body .ce-footer-col ul {
display: none !important;
overflow: hidden;
}
html body .ce-footer-col.is-open ul {
display: block !important;
animation: ceFooterSlide 0.35s cubic-bezier(.2,.7,.2,1);
}
html body .ce-footer-col h4 {
cursor: pointer !important;
position: relative;
padding-right: 32px !important;
user-select: none !important;
-webkit-tap-highlight-color: rgba(30, 95, 255, 0.2);
}
html body .ce-footer-col h4::after {
content: "+";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-weight: 300;
transition: transform 0.3s ease;
}
html body .ce-footer-col.is-open h4::after {
content: "−";
}
/* Ocultar botón Agendar del footer en mobile (ya está en fixed bar) */
html body .ce-footer-bottom-right,
html body .ce-footer-cta {
display: none !important;
}
}
@keyframes ceFooterSlide {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* =====================================================================
2026-05-12 — stat-ticker transparente desktop + mobile (sin recuadro)
===================================================================== */
body section.stat-ticker,
html body section.stat-ticker {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
body section.stat-ticker .container,
html body section.stat-ticker .container {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body .stat-ticker-item,
html body .stat-ticker-item {
background: transparent !important;
border: 0 !important;
border-left: 0 !important;
box-shadow: none !important;
}
/* =====================================================================
2026-05-13 — Portafolio cards MOBILE: bordes laterales + cards más pequeñas
Append-only. Sobrescribe valores previos por orden de cascada.
===================================================================== */
@media (max-width: 768px) {
html body .portafolio-cards {
padding: 36px 28px !important;
}
html body .portafolio-grid {
gap: 18px !important;
}
html body .portafolio-card {
min-height: 270px !important;
max-height: 320px !important;
border-radius: 20px !important;
}
html body .portafolio-card h3 {
font-size: 1.65rem !important;
margin-bottom: 5px !important;
}
html body .portafolio-card p {
font-size: 0.78rem !important;
margin-bottom: 10px !important;
}
}
/* =====================================================================
2026-05-13 — Copia (page 3121) — fixes específicos
SCOPED a body.is-home-mirror para NO afectar la home (page 2848)
===================================================================== */
/* ====== HERO: forzar full viewport height ====== */
html body.is-home-mirror .hero-slider,
html body.is-home-mirror .hero-slides,
html body.is-home-mirror .hero-slide {
min-height: 100dvh !important;
height: 100dvh !important;
}
html body.is-home-mirror .site-content,
html body.is-home-mirror #primary,
html body.is-home-mirror .entry-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ====== HEADER: forzar bg navy SIEMPRE (visible aunque no haya scroll) ====== */
html body.is-home-mirror .site-header,
html body.is-home-mirror.is-scrolled .site-header {
background: rgba(10, 23, 51, .92) !important;
backdrop-filter: blur(18px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .4) !important;
}
/* Menu items blancos siempre legibles */
html body.is-home-mirror .ast-builder-menu > .menu-item > .menu-link,
html body.is-home-mirror .site-title a,
html body.is-home-mirror .ast-mobile-menu-buttons-button {
color: #ffffff !important;
}
/* =====================================================================
2026-05-13 — Copia (page 3121) — Hero full viewport + rate-ticker overlay
===================================================================== */
/* Parents del hero — sin padding/margin que empujen hacia abajo */
html body.is-home-mirror #page,
html body.is-home-mirror #content,
html body.is-home-mirror #primary,
html body.is-home-mirror article,
html body.is-home-mirror .entry-content,
html body.is-home-mirror .site-content,
html body.is-home-mirror .ast-container {
padding-top: 0 !important;
margin-top: 0 !important;
position: relative !important;
}
/* Hero — 100dvh garantizado */
html body.is-home-mirror section.hero-cinematic,
html body.is-home-mirror section.hero-slider,
html body.is-home-mirror .hero-slider,
html body.is-home-mirror .hero-slides,
html body.is-home-mirror .hero-slide {
min-height: 100dvh !important;
height: 100dvh !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Rate-ticker overlay sobre el hero (no en flujo) */
html body.is-home-mirror .rate-ticker-wrap {
position: absolute !important;
top: 80px !important;
left: 0 !important;
right: 0 !important;
z-index: 50 !important;
width: 100% !important;
}
/* Hero-slider track también full height */
/* =====================================================================
2026-05-13 — Copia (page 3121) — Hero TRULY full-screen (agressive)
===================================================================== */
/* Ocultar entry-header vacío que Astra agrega */
html body.is-home-mirror .entry-header,
html body.is-home-mirror header.entry-header {
display: none !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Cero padding/margin en TODA la cadena de wrappers hasta el hero */
html body.is-home-mirror #page,
html body.is-home-mirror #content,
html body.is-home-mirror #content.site-content,
html body.is-home-mirror .site-content,
html body.is-home-mirror .ast-container,
html body.is-home-mirror #primary,
html body.is-home-mirror #primary.content-area,
html body.is-home-mirror .site-main,
html body.is-home-mirror #main,
html body.is-home-mirror article,
html body.is-home-mirror article.page,
html body.is-home-mirror .entry-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Hero — fuerza 100vh exacto */
html body.is-home-mirror .entry-content > section.hero-slider:first-child,
html body.is-home-mirror section.hero-slider,
html body.is-home-mirror .hero-slider {
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
margin: 0 !important;
padding-top: 0 !important;
}
/* =====================================================================
2026-05-13 — Copia (page 3121) — FIX flex layout que cortaba el hero
===================================================================== */
html body.is-home-mirror #page,
html body.is-home-mirror #content.site-content,
html body.is-home-mirror #content > .ast-container,
html body.is-home-mirror #content .ast-container,
html body.is-home-mirror #primary,
html body.is-home-mirror #primary.content-area,
html body.is-home-mirror .site-main,
html body.is-home-mirror article,
html body.is-home-mirror article.page,
html body.is-home-mirror .entry-content,
html body.is-home-mirror section.hero-slider {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
flex: 0 0 100% !important;
float: none !important;
}
/* =====================================================================
2026-05-13 — DIAGNOSTIC marker (eliminar despues): outline en wrappers
===================================================================== */
html body.is-home-mirror #content { outline: 4px solid lime !important; }
html body.is-home-mirror #content > .ast-container { outline: 4px solid red !important; }
html body.is-home-mirror #primary { outline: 4px solid blue !important; }
html body.is-home-mirror .site-main { outline: 4px solid yellow !important; }
html body.is-home-mirror section.hero-slider { outline: 4px solid magenta !important; }
/* =====================================================================
2026-05-13 — COPIA — Viewport escape para hero (rompe cualquier container)
===================================================================== */
/* QUITAR los outlines de diagnostico */
html body.is-home-mirror #content,
html body.is-home-mirror #content > .ast-container,
html body.is-home-mirror #primary,
html body.is-home-mirror .site-main {
outline: 0 !important;
}
html body.is-home-mirror section.hero-slider {
outline: 0 !important;
}
/* Hero rompe el container — siempre full viewport */
html body.is-home-mirror section.hero-slider,
html body.is-home-mirror .hero-slider {
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
min-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: 0 !important;
left: 0 !important;
height: 100vh !important;
min-height: 100vh !important;
}
/* =====================================================================
2026-05-13 — COPIA — DEBUG bg + overflow visible + alternative escape
===================================================================== */
/* Test bg: si vemos rojo a los lados, el body es lo que veo */
html body.is-home-mirror {
background: red !important;
}
/* Liberar overflow en TODOS los ancestors */
html, body,
html body.is-home-mirror,
html body.is-home-mirror #page,
html body.is-home-mirror #content,
html body.is-home-mirror #content.site-content,
html body.is-home-mirror #content > .ast-container,
html body.is-home-mirror .ast-container,
html body.is-home-mirror #primary,
html body.is-home-mirror .site-main,
html body.is-home-mirror article,
html body.is-home-mirror article.page,
html body.is-home-mirror .entry-content {
overflow: visible !important;
overflow-x: visible !important;
contain: none !important;
transform: none !important;
}
/* Hero — técnica alternativa: translateX(-50%) */
html body.is-home-mirror section.hero-slider,
html body.is-home-mirror .hero-slider {
position: relative !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: 0 !important;
margin-right: 0 !important;
height: 100vh !important;
min-height: 100vh !important;
}
/* =====================================================================
2026-05-13 — COPIA — Quitar bg rojo de diagnostico
===================================================================== */
html body.is-home-mirror {
background: #ffffff !important;
}
/* =====================================================================
2026-05-13 — TEST: bg lime al .hero-slider para verificar width real
===================================================================== */
html body.is-home-mirror section.hero-slider {
background: lime !important;
}
/* =====================================================================
2026-05-13 — COPIA — Quitar lime test + forzar descendants del hero a 100%
===================================================================== */
/* Quitar el bg lime de test */
html body.is-home-mirror section.hero-slider {
background: #050912 !important;
}
/* Forzar TODOS los descendants del hero a cubrir todo el slider */
html body.is-home-mirror .hero-slider-track,
html body.is-home-mirror .hero-slide,
html body.is-home-mirror .hero-slide-bg,
html body.is-home-mirror .hero-slide-overlay {
position: absolute !important;
inset: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* La imagen del slide (bg-image) en cover */
/* El Ken Burns scale + translate sigue funcionando solo en :is-active */
/* =====================================================================
2026-05-13 — COPIA — Stat-ticker mobile: bordes laterales 32px
===================================================================== */
@media (max-width: 768px) {
html body.is-home-mirror section.stat-ticker {
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
}
html body.is-home-mirror section.stat-ticker > .container,
html body.is-home-mirror section.stat-ticker .container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
html body.is-home-mirror section.stat-ticker .stat-ticker {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* =====================================================================
2026-05-13 — HOME OFICIAL (page 2848) — Builder Template fixes
Aplicar lecciones aprendidas de la copia (is-home-mirror)
===================================================================== */
/* Ocultar entry-header vacío inyectado por Astra Builder Template */
html body.home .entry-header,
html body.home header.entry-header.ast-no-title {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Wrappers sin padding/margin top */
html body.home #page,
html body.home #content,
html body.home #content.site-content,
html body.home #content > .ast-container,
html body.home #primary,
html body.home #primary.content-area,
html body.home .site-main,
html body.home article,
html body.home .entry-content {
padding-top: 0 !important;
margin-top: 0 !important;
position: relative !important;
}
/* Liberar overflow para que el viewport escape funcione */
html, body,
html body.home,
html body.home #page,
html body.home #content,
html body.home .ast-container,
html body.home #primary,
html body.home .site-main,
html body.home article,
html body.home .entry-content {
overflow: visible !important;
overflow-x: visible !important;
contain: none !important;
}
/* Hero — viewport escape para full 100vw */
html body.home section.hero-slider,
html body.home .hero-slider {
position: relative !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
min-height: 100vh !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Descendants del hero a inset 0 / 100%
* 2026-05-20: Removido `transform: none !important` — bloqueaba Ken Burns
* y zoom+fade entre slides. El transform es necesario para los efectos del hero.
*/
html body.home .hero-slider-track,
html body.home .hero-slide,
html body.home .hero-slide-bg,
html body.home .hero-slide-overlay {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Rate-ticker overlay sobre el hero
* 2026-05-20: top sin !important — el JS adjustRateTicker() lo sobreescribe
* dinámicamente con la altura REAL del header (123px desktop, 60px mobile).
* Antes con !important el ticker se solapaba con el menú.
*/
html body.home .rate-ticker-wrap {
position: absolute !important;
top: 80px; /* fallback — JS pone la altura real */
left: 0 !important;
right: 0 !important;
z-index: 50 !important;
width: 100% !important;
}
/* Stat-ticker padding lateral mobile (ya no hay container Astra dando esos bordes) */
@media (max-width: 768px) {
html body.home section.stat-ticker {
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
}
html body.home section.stat-ticker > .container,
html body.home section.stat-ticker .container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
}
/* =====================================================================
2026-05-14 — Conócenos finishing CLEAN — dots only + reusar viewport del home
===================================================================== */
/* Extender el viewport escape del home a Conocenos (mismo selector adicional) */
html body.page-id-2869 section.hero-slider,
html body.page-id-2869 .hero-slider {
position: relative !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
min-height: 100vh !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html body.page-id-2869 .hero-slider-track,
html body.page-id-2869 .hero-slide,
html body.page-id-2869 .hero-slide-bg,
html body.page-id-2869 .hero-slide-overlay {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* =====================================================================
* 2026-05-20 — CLEANUP: 8 reglas duplicadas de .hero-dots (Conócenos) borradas.
* Root cause real era `.hero-slider-controls { position: absolute; inset: 0 }`
* en hero-slider.css que recortaba el contexto a 1240px (Astra page-builder).
* Fix: `.hero-slider-controls { position: static }` aplicado al default →
* dots ahora se posicionan respecto a `.hero-slider` (full viewport) en
* AMBAS páginas (Home + Conócenos) con `right: 120px; bottom: 140px`.
* Verificado pixel-perfect con Playwright en (1788, 940) ambas pages.
* Backup: BACKUPS/20260520-cleanup-hero-dots-conocenos/hero-dots-conocenos-duplicates-borrados-20260520.css
* ===================================================================== */
/* =====================================================================
2026-05-14 — Conócenos — FORZAR el .hero-slide visible siempre
Default tiene opacity:0 visibility:hidden, solo se anima si is-active
Como data-slide-count=1 el JS slider puede quitar is-active
===================================================================== */
html body.page-id-2869 .hero-slide,
html body.page-id-2869 .hero-slide.is-active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* =====================================================================
2026-05-14 — Conócenos — animation lock después de la entrada
Cuando JS agrega body.conocenos-anim-locked (2.5s después de cargar):
- Las animations del content se desactivan (animation: none)
- El texto queda en su estado final (opacity 1, transform 0)
- Si is-active se toggle, NO se reanima
===================================================================== */
/* =====================================================================
2026-05-14 — Conócenos — Ken Burns en bg + smooth transitions
===================================================================== */
@keyframes ce-conocenos-kenburns {
0% {
transform: scale(1.04) translateX(0);
}
100% {
transform: scale(1.10) translateX(-1%);
}
}
/* =====================================================================
2026-05-14 — Conócenos Ken Burns FIX — !important para vencer transform:none anterior
===================================================================== */
@keyframes ce-conocenos-kenburns {
0% {
transform: scale(1.04) translateX(0) !important;
}
100% {
transform: scale(1.10) translateX(-1%) !important;
}
}
/* =====================================================================
2026-05-14 — Conócenos Ken Burns linear — movimiento constante visible
===================================================================== */
@keyframes ce-conocenos-kenburns {
0% {
transform: scale(1.0) translateX(0) !important;
}
100% {
transform: scale(1.15) translateX(-2%) !important;
}
}
/* =====================================================================
2026-05-14 — Conócenos — SOBREESCRIBIR el hero-kenburns del hero-slider.css
Selector exacto: .hero-slide.is-active .hero-slide-bg
Linear infinite con 6s — para que se vea zoom constante sin parar
===================================================================== */
@keyframes ce-conocenos-kenburns {
0% {
transform: scale(1.0) translateX(0);
}
100% {
transform: scale(1.15) translateX(-2%);
}
}
/* =====================================================================
2026-05-14 — Conócenos zoom keyframe (JS lo aplica inline para vencer CSS)
===================================================================== */
@keyframes ce-conocenos-zoom {
from { transform: scale(1.0); }
to { transform: scale(1.15); }
}
/* =====================================================================
2026-05-19 — Conócenos MOBILE FIX — hero text sizing + spacing
Las reglas de dots mobile (position, size, color) fueron borradas
el 2026-05-20 — el default en hero-slider.css ya las maneja idéntico.
Backup en BACKUPS/20260520-cleanup-hero-dots-conocenos/
===================================================================== */
@media (max-width: 768px) {
/* HERO CONTENT mobile: padding consistente + espacio para dots abajo */
/* KICKER mobile */
html body.page-id-2869 .hero-slide .kicker {
font-size: .72rem !important;
letter-spacing: .2em !important;
margin-bottom: 18px !important;
}
html body.page-id-2869 .hero-slide .kicker .num {
font-size: 1.7rem !important;
}
/* H1 mobile: tamaño más manejable */
html body.page-id-2869 .hero-slide h1 {
font-size: clamp(2.3rem, 9.2vw, 3.2rem) !important;
line-height: 1.04 !important;
letter-spacing: -.03em !important;
margin-bottom: 18px !important;
}
/* Sub mobile */
}
/* =====================================================================
2026-05-19 — Ocultar número editorial "01/02/03..." del kicker del hero
Aplica a TODAS las páginas con .hero-slide (home, Conócenos, etc).
Solo afecta el .num del hero. Los .num de cards de hubs (Hipotecario/PyME)
tienen su propia regla HUB-NUM-OFF y no se ven afectados.
===================================================================== */
.hero-slide .kicker .num,
section.hero-slider .kicker .num,
.hero-slide-content .kicker .num,
.hero-fixed-content .kicker .num {
display: none !important;
}
/* =====================================================================
2026-05-19 — Conócenos MOBILE FIX V2 — revert H1 size + force .num hide
Mantiene dots horizontal abajo + padding, pero deja H1 default del hero-slider.css
===================================================================== */
@media (max-width: 768px) {
/* H1 default mobile — vuelve al tamaño grande original */
html body.page-id-2869 .hero-slide h1 {
font-size: clamp(2.9rem, 12vw, 4.2rem) !important;
line-height: 1 !important;
letter-spacing: -.035em !important;
margin-bottom: 20px !important;
}
/* Kicker mobile original */
html body.page-id-2869 .hero-slide .kicker {
font-size: .78rem !important;
letter-spacing: .22em !important;
margin-bottom: 16px !important;
}
/* Sub mobile original */
}
/* Forzar ocultar .num del hero — MAX specificity por si hay cache */
html body section.hero-slider .kicker .num,
html body .hero-slide .kicker .num,
html body .hero-slide-content .kicker .num {
display: none !important;
visibility: hidden !important;
}
/* =====================================================================
2026-05-19 — Foto Conócenos sticky (reemplaza GSAP pin que brincaba)
===================================================================== */
/* =====================================================================
2026-05-19 — Conócenos cards mobile padding (visual breathing room)
Las cards .retrato-story-block en mobile tenían padding:0 (texto pegado al borde).
Le damos padding interno + margen extra del viewport.
===================================================================== */
@media (max-width: 768px) {
html body.page-id-2869 .retrato-stage .retrato-story {
gap: 18px !important;
}
html body.page-id-2869 .retrato-stage .retrato-story-block {
padding: 28px 22px 26px !important;
background: #ffffff !important;
border-radius: 18px !important;
box-shadow:
0 12px 30px -12px rgba(15, 23, 42, .14),
0 2px 6px -1px rgba(15, 23, 42, .06),
0 0 0 1px rgba(15, 23, 42, .05) !important;
}
html body.page-id-2869 .retrato-stage .retrato-story-block h2 {
margin-top: 6px !important;
margin-bottom: 12px !important;
}
html body.page-id-2869 .retrato-stage .retrato-story-block p {
margin-top: 0 !important;
margin-bottom: 10px !important;
}
html body.page-id-2869 .retrato-stage .retrato-story-block p:last-child {
margin-bottom: 0 !important;
}
}
/* =====================================================================
2026-06-25 — Conócenos rediseño equipo (3 cards Luis+Saúl+Osman)
Mobile-first: 1 col mobile, 2 col tablet (Luis full width), 3 col desktop
===================================================================== */
/* Mobile: 1 columna, max-width centrada para no estirar las cards */
@media (max-width: 599px) {
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child {
padding: 16px 18px !important;
}
}
/* Tablet 600-899: 3 cols iguales (mismo aspect 4:5) — Luis se diferencia solo por role azul */
@media (min-width: 600px) and (max-width: 899px) {
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child {
padding: 14px 16px !important;
}
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child > div:first-child {
font-size: 1rem !important;
}
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child > div:last-child {
font-size: 0.75rem !important;
}
}
/* Hover lift en desktop (subtle) */
@media (hover: hover) and (min-width: 900px) {
html body.page-id-2869 .retrato-stage .equipo-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 20px 40px -12px rgba(10,23,51,.18) !important;
}
}
/* 2026-06-25 — Fotos más chicas (user feedback): aspect 4/5 → 1/1 square + grid max-width reducido */
/* =====================================================================
2026-06-25 — PROCESO "Cómo trabajamos" pinned scrollytelling
Sticky pin con 4 steps que transicionan por scroll
===================================================================== */
.ce-process-stage {
background: linear-gradient(180deg, #ffffff 0%, #F8FAFC 100%);
padding: clamp(60px, 8vw, 100px) 0 0;
position: relative;
/* overflow visible para que position:sticky del pin funcione */
}
.ce-process-header {
max-width: 760px;
margin: 0 auto;
/* 2026-07-05 Luis "mucho espacio": el pin sticky ya aporta (100vh−grid)/2 de aire
arriba del contenido → el header no necesita padding-bottom grande */
padding: 0 24px 8px;
text-align: center;
}
.ce-process-eyebrow {
display: inline-block;
font-size: .75rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #1E5FFF;
margin-bottom: 16px;
}
.ce-process-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.15;
color: #0A1733;
margin: 0 0 18px;
}
.ce-process-title-accent {
background: linear-gradient(135deg, #1E5FFF 0%, #0A4FE0 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ce-process-sub {
font-size: 1.0625rem;
color: #64748B;
margin: 0;
line-height: 1.5;
}
.ce-process-pin-container {
position: relative;
height: 240vh; /* 60vh por step en lugar de 100vh: scroll 40% más corto */
/* 2026-07-05: sube el arranque del pin para comerse el aire muerto del centrado
100vh (colchón centrado ≈22vh en 900px de alto). Luis pidió apretar 2 veces:
-21vh; verificado sin encime en 900 y 768 de alto */
margin-top: -21vh;
}
.ce-process-pin {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.ce-process-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
width: 100%;
align-items: center;
}
.ce-process-visual {
position: relative;
height: 360px; /* -25% para acompañar reducción del número */
display: flex;
align-items: center;
justify-content: center;
}
.ce-process-num {
position: absolute;
top: 20px;
left: 0;
font-size: clamp(5rem, 11vw, 12rem); /* -40% más pequeño */
font-weight: 900;
letter-spacing: -.05em;
line-height: .85;
background: linear-gradient(135deg, rgba(30,95,255,.18) 0%, rgba(30,95,255,.6) 60%, rgba(30,95,255,.05) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
pointer-events: none;
user-select: none;
}
.ce-process-icon-wrap {
position: relative;
width: 160px; /* -27% acompañando reducción */
height: 160px;
margin-left: 55%;
margin-top: 60px;
}
.ce-process-icon {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: #1E5FFF;
opacity: 0;
transform: scale(.85) translateY(20px);
transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
filter: drop-shadow(0 12px 30px rgba(30,95,255,.25));
}
.ce-process-icon.is-active {
opacity: 1;
transform: scale(1) translateY(0);
}
/* 2026-06-25 — Iconos v2: draw stagger + hover pulse + active continuous float */
.ce-process-icon.ce-icon-v2 .ce-icon-shape,
.ce-process-icon.ce-icon-v2 .ce-icon-line {
stroke-dasharray: 200;
stroke-dashoffset: 200;
transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1);
}
.ce-process-icon.ce-icon-v2 .ce-icon-accent,
.ce-process-icon.ce-icon-v2 .ce-icon-accent-line {
opacity: 0;
transform: scale(.4);
transform-origin: center;
transition: opacity .55s cubic-bezier(.34, 1.56, .64, 1) .65s,
transform .55s cubic-bezier(.34, 1.56, .64, 1) .65s;
}
/* Active state: draw + accent reveal con stagger */
.ce-process-icon.ce-icon-v2.is-active .ce-icon-shape,
.ce-process-icon.ce-icon-v2.is-active .ce-icon-line {
stroke-dashoffset: 0;
}
.ce-process-icon.ce-icon-v2.is-active .ce-icon-line:nth-of-type(2) { transition-delay: .08s; }
.ce-process-icon.ce-icon-v2.is-active .ce-icon-line:nth-of-type(3) { transition-delay: .16s; }
.ce-process-icon.ce-icon-v2.is-active .ce-icon-line:nth-of-type(4) { transition-delay: .24s; }
.ce-process-icon.ce-icon-v2.is-active .ce-icon-line:nth-of-type(5) { transition-delay: .32s; }
.ce-process-icon.ce-icon-v2.is-active .ce-icon-accent,
.ce-process-icon.ce-icon-v2.is-active .ce-icon-accent-line {
opacity: 1;
transform: scale(1);
}
/* Active icon: continuous subtle float */
.ce-process-icon.ce-icon-v2.is-active {
animation: ce-icon-float 4s ease-in-out infinite;
}
@keyframes ce-icon-float {
0%, 100% { transform: scale(1) translateY(0); }
50% { transform: scale(1) translateY(-8px); }
}
/* Hover on icon area (when active): pulse accent + lift más */
.ce-process-icon-wrap:hover .ce-process-icon.ce-icon-v2.is-active {
animation-play-state: paused;
transform: scale(1.06) translateY(-10px);
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.ce-process-icon-wrap:hover .ce-process-icon.ce-icon-v2.is-active .ce-icon-accent {
animation: ce-icon-accent-pulse 1.2s ease-in-out infinite;
}
@keyframes ce-icon-accent-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
/* Dots animation paso 4 (signature progress) */
.ce-process-icon.ce-icon-v2.is-active .ce-icon-dot {
animation: ce-icon-dot-fade 2.4s ease-in-out infinite;
}
.ce-process-icon.ce-icon-v2.is-active .ce-icon-dot:nth-of-type(7) { animation-delay: .15s; }
.ce-process-icon.ce-icon-v2.is-active .ce-icon-dot:nth-of-type(8) { animation-delay: .3s; }
@keyframes ce-icon-dot-fade {
0%, 70%, 100% { opacity: var(--dot-base, 1); }
35% { opacity: .15; }
}
@media (prefers-reduced-motion: reduce) {
.ce-process-icon.ce-icon-v2 .ce-icon-shape,
.ce-process-icon.ce-icon-v2 .ce-icon-line { stroke-dashoffset: 0 !important; transition: none !important; }
.ce-process-icon.ce-icon-v2 .ce-icon-accent,
.ce-process-icon.ce-icon-v2 .ce-icon-accent-line { opacity: 1 !important; transform: none !important; transition: none !important; }
.ce-process-icon.ce-icon-v2.is-active,
.ce-process-icon.ce-icon-v2.is-active .ce-icon-dot { animation: none !important; }
}
.ce-process-content {
position: relative;
min-height: 360px;
}
html body.home .ce-process-content article.ce-process-step,
html body .ce-process-content article.ce-process-step {
position: absolute !important;
inset: 0 !important;
opacity: 0;
transform: translateY(20px);
transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
pointer-events: none;
margin: 0 !important;
}
html body.home .ce-process-content article.ce-process-step.is-active,
html body .ce-process-content article.ce-process-step.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.ce-process-step-tag {
display: inline-block;
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #1E5FFF;
background: rgba(30,95,255,.1);
padding: 7px 14px;
border-radius: 100px;
margin-bottom: 18px;
}
.ce-process-step h3 {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 800;
margin: 0 0 18px;
letter-spacing: -.025em;
color: #0A1733;
line-height: 1.15;
}
.ce-process-step p {
font-size: 1.0625rem;
line-height: 1.55;
color: #475569;
margin: 0 0 28px;
}
.ce-process-step ul {
list-style: none;
padding: 0;
margin: 0;
}
.ce-process-step ul li {
display: flex;
gap: 16px;
align-items: baseline;
padding: 11px 0;
border-bottom: 1px solid #F1F5F9;
font-size: .9375rem;
}
.ce-process-step ul li:last-child { border-bottom: 0; }
.ce-process-step ul li strong {
color: #0A1733;
font-weight: 700;
min-width: 110px;
font-size: .8125rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.ce-process-step ul li span { color: #475569; flex: 1; }
.ce-process-progress {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 36px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.ce-process-bar {
width: 240px;
height: 3px;
background: rgba(30,95,255,.15);
border-radius: 100px;
overflow: hidden;
position: relative;
}
.ce-process-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #1E5FFF, #0A4FE0);
transition: width .3s ease;
border-radius: 100px;
}
.ce-process-dots {
display: flex;
gap: 18px;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .12em;
color: #94A3B8;
}
.ce-process-dot { transition: color .3s; }
.ce-process-dot.is-active { color: #1E5FFF; }
/* Mobile: skip pin, stack as cards */
@media (max-width: 900px) {
/* margin-top:0 — el -12vh desktop solo compensa el centrado del pin sticky, aquí no hay pin */
.ce-process-pin-container { height: auto; margin-top: 0; }
.ce-process-pin {
position: relative;
height: auto;
padding: 20px 0 60px;
}
.ce-process-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.ce-process-visual {
height: 160px;
margin-bottom: 0;
}
.ce-process-num {
font-size: 8rem;
position: relative;
top: 0;
left: 0;
}
.ce-process-icon-wrap {
width: 100px;
height: 100px;
margin: 0;
position: absolute;
bottom: 0;
right: 0;
}
.ce-process-icon {
position: relative;
opacity: 0;
}
.ce-process-icon.is-active { opacity: 1; transform: scale(1) translateY(0); }
.ce-process-content {
position: relative;
min-height: auto;
}
.ce-process-step {
position: relative;
opacity: 1;
transform: none;
padding: 30px 0 50px;
border-bottom: 1px solid #E2E8F0;
}
.ce-process-step:last-child { border-bottom: 0; }
.ce-process-progress { display: none; }
/* En mobile mostrar TODOS los steps stacked.
2026-07-05: specificity (0,5,4) — el bloque "mobile pin" de abajo llega a
(0,4,4) important (`html body.home.has-dark-hero section.ce-process-stage
article.ce-process-step {position:absolute!important}`), hay que superarlo */
/* 2026-07-08: el apilado quedó SOLO para prefers-reduced-motion (el pin
scrollytelling volvió a móvil). En apilado todo visible, sin animación. */
html body.home section.ce-process-stage[data-mobile-stacked] .ce-process-content article.ce-process-step,
html body section.ce-process-stage[data-mobile-stacked] .ce-process-content article.ce-process-step {
position: relative !important;
inset: auto !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
padding: 26px 0 40px !important;
border-bottom: 1px solid #E2E8F0 !important;
}
html body.home section.ce-process-stage[data-mobile-stacked] .ce-process-content article.ce-process-step:last-child,
html body section.ce-process-stage[data-mobile-stacked] .ce-process-content article.ce-process-step:last-child {
border-bottom: 0 !important;
}
html body.home section.ce-process-stage[data-mobile-stacked] .ce-process-content,
html body section.ce-process-stage[data-mobile-stacked] .ce-process-content {
min-height: auto !important;
height: auto !important;
}
html body section.ce-process-stage[data-mobile-stacked] .ce-process-pin-container { height: auto !important; }
/* El pin del bloque "mobile pin" traía height ~92vh !important + overflow:hidden → recortaba pasos 3-4 */
html body section.ce-process-stage[data-mobile-stacked] .ce-process-pin {
position: relative !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
display: block !important;
padding: 12px 0 48px !important;
}
/* El visual gigante (01 + iconos superpuestos) sobra en apilado — cada step trae su tag "Paso N" */
html body section.ce-process-stage[data-mobile-stacked] .ce-process-visual { display: none !important; }
html body section.ce-process-stage[data-mobile-stacked] .ce-process-progress { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.ce-process-pin-container { height: auto !important; margin-top: 0 !important; }
.ce-process-pin { position: relative !important; height: auto !important; padding: 40px 0; }
.ce-process-step { position: relative !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.ce-process-icon { position: relative !important; opacity: 1 !important; transform: none !important; }
}
/* =====================================================================
2026-06-25 — COMPARATIVA V2 "Bróker vs banco"
A2 (aligned cards) + B1 (SVG line icons) + C1 (directional reveal) +
C2 (banco grayscale vs crediexpres glow) + C5 (badge shine) +
D2 (footer stats) + E1 (palette gris vs azul soft)
===================================================================== */
.ce-compare-v2-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
max-width: 1100px;
margin: 48px auto 0;
align-items: stretch;
padding: 0 24px;
}
.ce-compare-v2-card {
position: relative;
border-radius: 24px;
padding: 36px 32px 32px;
display: flex;
flex-direction: column;
transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease, filter .55s ease, opacity .55s ease;
will-change: transform, opacity;
}
.ce-compare-v2-card--neg {
background: #F8FAFC;
border: 1px solid #E2E8F0;
filter: grayscale(35%);
}
.ce-compare-v2-card--pos {
background: linear-gradient(160deg, #F5F8FF 0%, #FFFFFF 75%);
border: 1.5px solid rgba(30, 95, 255, .22);
box-shadow: 0 24px 60px -20px rgba(30, 95, 255, .22), 0 0 0 1px rgba(30, 95, 255, .04);
}
.ce-compare-v2-card--neg:hover {
filter: grayscale(15%);
transform: translateY(-3px);
}
.ce-compare-v2-card--pos:hover {
transform: translateY(-6px);
box-shadow: 0 32px 80px -20px rgba(30, 95, 255, .35);
}
/* C5: Badge "Mejor opción" con shine animado */
.ce-compare-v2-badge {
position: absolute;
top: -16px;
right: 28px;
background: linear-gradient(135deg, #1E5FFF 0%, #0A4FE0 100%);
color: #fff;
font-size: .6875rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: 9px 18px;
border-radius: 100px;
box-shadow: 0 10px 24px -6px rgba(30, 95, 255, .45);
overflow: hidden;
}
.ce-compare-v2-badge > span { position: relative; z-index: 2; }
.ce-compare-v2-badge::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
transform: translateX(-120%);
animation: ce-compare-v2-shine 3s ease-in-out infinite;
animation-delay: 1.4s;
}
@keyframes ce-compare-v2-shine {
0%, 60% { transform: translateX(-120%); }
85%, 100% { transform: translateX(120%); }
}
/* Card head */
.ce-compare-v2-card-head { margin-bottom: 22px; }
.ce-compare-v2-tag {
display: inline-block;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 6px;
margin-bottom: 10px;
}
.ce-compare-v2-tag--neg { background: #E2E8F0; color: #64748B; }
.ce-compare-v2-tag--pos { background: rgba(30, 95, 255, .12); color: #1E5FFF; }
.ce-compare-v2-card-head h3 {
font-size: 1.375rem;
font-weight: 800;
margin: 0;
letter-spacing: -.02em;
line-height: 1.2;
}
.ce-compare-v2-card--neg .ce-compare-v2-card-head h3 { color: #64748B; }
.ce-compare-v2-card--pos .ce-compare-v2-card-head h3 { color: #0A1733; }
/* List */
.ce-compare-v2-list {
list-style: none;
padding: 0;
margin: 0 0 28px;
flex: 1;
}
.ce-compare-v2-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid rgba(15, 23, 42, .05);
font-size: .9375rem;
line-height: 1.45;
}
.ce-compare-v2-list li:last-child { border-bottom: 0; }
.ce-compare-v2-card--neg .ce-compare-v2-list li { color: #64748B; }
.ce-compare-v2-card--pos .ce-compare-v2-list li { color: #0F172A; font-weight: 500; }
/* B1: SVG icons line-style con draw animation */
.ce-compare-v2-icon {
width: 26px;
height: 26px;
flex-shrink: 0;
padding: 4px;
border-radius: 8px;
margin-top: 1px;
stroke-dasharray: 32;
stroke-dashoffset: 32;
transition: stroke-dashoffset .8s cubic-bezier(.65, 0, .35, 1);
}
.ce-compare-v2-icon--neg { background: rgba(239, 68, 68, .1); color: #EF4444; }
.ce-compare-v2-icon--pos { background: rgba(34, 197, 94, .14); color: #16A34A; }
.ce-compare-v2-card.is-revealed .ce-compare-v2-icon { stroke-dashoffset: 0; }
.ce-compare-v2-card.is-revealed .ce-compare-v2-list li:nth-child(2) .ce-compare-v2-icon { transition-delay: .08s; }
.ce-compare-v2-card.is-revealed .ce-compare-v2-list li:nth-child(3) .ce-compare-v2-icon { transition-delay: .16s; }
.ce-compare-v2-card.is-revealed .ce-compare-v2-list li:nth-child(4) .ce-compare-v2-icon { transition-delay: .24s; }
.ce-compare-v2-card.is-revealed .ce-compare-v2-list li:nth-child(5) .ce-compare-v2-icon { transition-delay: .32s; }
.ce-compare-v2-card.is-revealed .ce-compare-v2-list li:nth-child(6) .ce-compare-v2-icon { transition-delay: .40s; }
/* D2: Footer stats */
.ce-compare-v2-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding-top: 22px;
border-top: 1px solid rgba(15, 23, 42, .08);
}
.ce-compare-v2-stat {
text-align: center;
display: flex;
flex-direction: column;
gap: 4px;
}
.ce-compare-v2-stat strong {
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1;
}
.ce-compare-v2-stat span {
font-size: .6875rem;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
}
.ce-compare-v2-card--neg .ce-compare-v2-stat strong { color: #94A3B8; }
.ce-compare-v2-card--neg .ce-compare-v2-stat span { color: #94A3B8; }
.ce-compare-v2-card--pos .ce-compare-v2-stat strong { color: #1E5FFF; }
.ce-compare-v2-card--pos .ce-compare-v2-stat span { color: #475569; }
/* C1: Stagger reveal direccional */
.ce-compare-v2-card[data-side="left"] {
opacity: 0;
transform: translateX(-32px);
}
.ce-compare-v2-card[data-side="right"] {
opacity: 0;
transform: translateX(32px);
}
.ce-compare-v2-card[data-side].is-revealed {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 768px) {
.ce-compare-v2-grid { grid-template-columns: 1fr; gap: 32px; padding: 0 16px; }
.ce-compare-v2-card { padding: 30px 22px 26px; }
.ce-compare-v2-card[data-side="left"],
.ce-compare-v2-card[data-side="right"] { transform: translateY(24px); }
.ce-compare-v2-card[data-side].is-revealed { transform: translateY(0); }
.ce-compare-v2-badge { right: 16px; top: -14px; font-size: .625rem; padding: 7px 14px; }
.ce-compare-v2-card-head h3 { font-size: 1.125rem; }
.ce-compare-v2-footer { gap: 8px; padding-top: 18px; }
.ce-compare-v2-stat strong { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
.ce-compare-v2-card[data-side="left"],
.ce-compare-v2-card[data-side="right"] { opacity: 1 !important; transform: none !important; }
.ce-compare-v2-icon { stroke-dashoffset: 0 !important; }
.ce-compare-v2-badge::after { animation: none !important; }
}
/* =====================================================================
2026-06-25 — E: Blog Featured Post (banner 2-col del último post)
===================================================================== */
.ce-blog-featured-stage {
padding: clamp(40px, 6vw, 70px) 0 0;
background: #ffffff;
}
.ce-blog-featured-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.ce-blog-featured-eyebrow {
display: inline-block;
font-size: .75rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #1E5FFF;
margin-bottom: 22px;
}
.ce-blog-featured-card {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 0;
background: #ffffff;
border: 1px solid #E2E8F0;
border-radius: 24px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
box-shadow: 0 12px 40px -16px rgba(15,23,42,.1);
}
.ce-blog-featured-card:hover {
transform: translateY(-4px);
box-shadow: 0 28px 60px -20px rgba(15,23,42,.18);
}
.ce-blog-featured-visual {
position: relative;
min-height: 380px;
background: #F5F8FF;
overflow: hidden;
}
.ce-blog-featured-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.ce-blog-featured-card:hover .ce-blog-featured-img { transform: scale(1.04); }
.ce-blog-featured-img--empty {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.ce-blog-featured-img--empty::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, currentColor 0%, transparent 50%),
radial-gradient(circle at 80% 70%, currentColor 0%, transparent 55%);
opacity: .08;
}
.ce-blog-featured-img--empty::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .07) 1px, transparent 0);
background-size: 24px 24px;
opacity: .5;
}
.ce-blog-featured-img-emoji {
font-size: 7rem;
line-height: 1;
opacity: .92;
filter: drop-shadow(0 8px 20px rgba(15, 23, 42, .15));
position: relative;
z-index: 2;
transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.ce-blog-featured-card:hover .ce-blog-featured-img-emoji {
transform: scale(1.1) rotate(-4deg);
}
.ce-blog-featured-body {
padding: clamp(28px, 4vw, 44px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.ce-blog-featured-tag {
display: inline-flex;
align-items: center;
gap: 6px;
width: max-content;
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
padding: 6px 12px;
border-radius: 100px;
border: 1px solid;
}
.ce-blog-featured-title {
font-size: clamp(1.5rem, 2.5vw, 2.125rem);
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.15;
color: #0A1733;
margin: 0;
}
.ce-blog-featured-excerpt {
font-size: 1rem;
line-height: 1.55;
color: #475569;
margin: 0;
}
.ce-blog-featured-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: .8125rem;
color: #94A3B8;
font-weight: 600;
}
.ce-blog-featured-dot { opacity: .5; }
.ce-blog-featured-cta {
display: inline-flex;
align-items: center;
gap: 8px;
width: max-content;
padding: 12px 22px;
border-radius: 100px;
color: #fff !important;
font-size: .875rem;
font-weight: 700;
letter-spacing: .01em;
margin-top: 6px;
transition: gap .25s, padding .25s, box-shadow .25s;
box-shadow: 0 8px 20px -6px rgba(30,95,255,.4);
}
.ce-blog-featured-card:hover .ce-blog-featured-cta {
gap: 14px;
padding-left: 26px;
padding-right: 22px;
box-shadow: 0 12px 28px -8px rgba(30,95,255,.55);
}
@media (max-width: 800px) {
.ce-blog-featured-card { grid-template-columns: 1fr; }
.ce-blog-featured-visual { min-height: 220px; aspect-ratio: 16/9; }
.ce-blog-featured-img-emoji { font-size: 5rem; }
.ce-blog-featured-title { font-size: 1.375rem; }
}
/* =====================================================================
2026-07-01 Luis: Bank marquee FULL-BLEED universal (desktop + mobile)
Antes: solo mobile. Ahora: en desktop también sale al 100vw sin márgenes
del container. Viewport-escape con `margin-left: calc(50% - 50vw)`.
===================================================================== */
html body .bank-marquee,
html body section.bank-marquee {
background: #ffffff !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
max-width: 100vw !important;
position: relative !important;
overflow: hidden !important;
}
html body section.product-section.banks-section,
html body section.banks-section {
padding-left: 0 !important;
padding-right: 0 !important;
}
html body section.banks-section > .container,
html body section.product-section.banks-section > .container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =====================================================================
2026-06-25 — MOBILE FIXES batch 2 (user feedback)
1. Scroll delay ticker → transition rápida (150ms)
2. Bank marquee full-bleed mobile
3. Animaciones reveal timing más notorio mobile
4. Proceso 4 pasos: steps stacked vertical real (no overlap)
===================================================================== */
@media (max-width: 900px) {
/* 1. TICKER scroll delay → instant hide */
html body.has-dark-hero .rate-ticker-wrap {
transition: opacity .15s ease, transform .15s ease !important;
}
html body.has-dark-hero.is-scrolled .rate-ticker-wrap {
transition: opacity .12s ease, transform .12s ease !important;
}
/* 2. BANK MARQUEE: mantener viewport-escape (left:50% + margin-left:-50vw)
pero quitar padding interno + reducir eyebrow letter-spacing */
html body section.bank-marquee {
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
width: 100vw !important;
max-width: 100vw !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow: hidden !important;
transform: none !important;
}
html body section.bank-marquee .container,
html body section.bank-marquee .bank-marquee-rows {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2026-06-30 — full width REAL universal: target `.bank-marquee` (no solo section,
en páginas internas es DIV dentro de section.banks-section con padding 32px) */
html body .bank-marquee,
html body section.bank-marquee {
background: #ffffff !important;
border-top: 0 !important;
border-bottom: 0 !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
max-width: 100vw !important;
position: relative !important;
}
/* Override parent .banks-section/.container padding cuando contiene bank-marquee */
html body section.product-section.banks-section,
html body section.banks-section {
padding-left: 0 !important;
padding-right: 0 !important;
}
html body section.banks-section .container,
html body section.product-section.banks-section .container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Quitar fades laterales en mobile — ocultan logos */
html body .bank-marquee::before,
html body .bank-marquee::after,
html body section.bank-marquee::before,
html body section.bank-marquee::after {
display: none !important;
width: 0 !important;
background: transparent !important;
}
/* Asegurar 2 filas visibles con gap suficiente */
html body section.bank-marquee .bank-marquee-rows {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
html body section.bank-marquee .bank-marquee-track {
width: max-content !important;
flex-wrap: nowrap !important;
}
html body section.bank-marquee .bank-marquee-track img {
height: 36px !important;
max-width: 110px !important;
flex-shrink: 0 !important;
}
/* Eyebrow: letter-spacing 0 + font ajustado para caber 1 línea en mobile */
html body section.bank-marquee .bank-marquee-eyebrow {
letter-spacing: .02em !important;
font-size: .625rem !important;
padding: 0 20px !important;
max-width: 100% !important;
line-height: 1.4 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* 3. REVEAL animations mobile: MÁS notorio
- duration 1.1s (era ~.6s)
- translate inicial 32px (default ~12px)
- stagger 150ms perceptible
- cubic-bezier suave + dramatic */
/* 2026-06-30 Luis: receta unificada brand-statement aplicada a todo:
duration 1.4s, ease cubic-bezier(.25,.46,.45,.94), translateY 18px, stagger 260ms */
html body [data-cinema-stagger] > *,
html body .reveal-on-scroll {
transition: opacity 1.4s cubic-bezier(.25, .46, .45, .94),
transform 1.4s cubic-bezier(.25, .46, .45, .94) !important;
}
html body [data-cinema-stagger] > *:not(.is-revealed):not(.in),
html body .reveal-on-scroll:not(.is-revealed):not(.in) {
transform: translateY(18px) !important;
}
html body [data-cinema-stagger] > *:nth-child(1) { transition-delay: 0ms !important; }
html body [data-cinema-stagger] > *:nth-child(2) { transition-delay: 260ms !important; }
html body [data-cinema-stagger] > *:nth-child(3) { transition-delay: 520ms !important; }
html body [data-cinema-stagger] > *:nth-child(4) { transition-delay: 780ms !important; }
html body [data-cinema-stagger] > *:nth-child(5) { transition-delay: 1040ms !important; }
html body [data-cinema-stagger] > *:nth-child(6) { transition-delay: 1300ms !important; }
/* Split-word reveals (hero titles) — misma receta */
html body .split-word {
transition: opacity 1.4s cubic-bezier(.25, .46, .45, .94),
transform 1.4s cubic-bezier(.25, .46, .45, .94),
filter 1.4s cubic-bezier(.25, .46, .45, .94) !important;
}
/* BRAND-STATEMENT "No vendemos crédito" — reveal MUY notorio
Override inline style:opacity:0 cuando section.is-revealed */
html body.home section.brand-statement.is-revealed .reveal-word,
html body section.brand-statement.is-revealed .reveal-word {
opacity: 1 !important;
transform: translateY(0) !important;
}
html body.home section.brand-statement .reveal-word,
html body section.brand-statement .reveal-word {
/* 2026-06-30 Luis: anim "un poco más suave". Easing más gradual + transform inicial menor */
transition: opacity 1.4s cubic-bezier(.25, .46, .45, .94),
transform 1.4s cubic-bezier(.25, .46, .45, .94) !important;
}
/* Estado inicial menos brusco — translateY 18px (era 32px) */
html body.home section.brand-statement:not(.is-revealed) .reveal-word,
html body section.brand-statement:not(.is-revealed) .reveal-word {
transform: translateY(18px) !important;
}
/* Stagger más amplio entre palabras para sensación más fluida */
html body section.brand-statement .reveal-word:nth-of-type(1) { transition-delay: 0ms !important; }
html body section.brand-statement .reveal-word:nth-of-type(2) { transition-delay: 260ms !important; }
html body section.brand-statement .reveal-word:nth-of-type(3) { transition-delay: 520ms !important; }
html body section.brand-statement .reveal-word:nth-of-type(4) { transition-delay: 780ms !important; }
html body section.brand-statement .reveal-word:nth-of-type(5) { transition-delay: 1040ms !important; }
html body section.brand-statement .reveal-word:nth-of-type(6) { transition-delay: 1300ms !important; }
html body section.brand-statement .reveal-word:nth-of-type(7) { transition-delay: 1560ms !important; }
html body section.brand-statement .reveal-word:nth-of-type(8) { transition-delay: 1820ms !important; }
/* TRUST STATS PREMIUM CARDS — +5/9/2500+/0%/30+ */
html body section.stat-ticker .stat-ticker {
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
padding: 8px 0 !important;
background: transparent !important;
}
html body section.stat-ticker .stat-ticker-item {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, .08) !important;
border-radius: 16px !important;
padding: 22px 16px !important;
box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .06),
0 1px 2px rgba(15, 23, 42, .04) !important;
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1),
box-shadow .35s ease !important;
position: relative !important;
overflow: hidden !important;
text-align: center !important;
}
html body section.stat-ticker .stat-ticker-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #1E5FFF 0%, #0A4FE0 100%);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
html body section.stat-ticker .stat-ticker-item:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 28px -8px rgba(30, 95, 255, .25),
0 4px 8px rgba(15, 23, 42, .08) !important;
}
/* Stat 5 (30+ marcas) — sola en última row, span 2 cols */
html body section.stat-ticker .stat-ticker-item:nth-child(5) {
grid-column: 1 / -1 !important;
background: linear-gradient(135deg, #F5F8FF 0%, #ffffff 100%) !important;
border-color: rgba(30, 95, 255, .15) !important;
}
html body section.stat-ticker .num-xl {
font-size: 1.625rem !important;
font-weight: 800 !important;
color: #1E5FFF !important;
letter-spacing: -.03em !important;
line-height: 1 !important;
margin-bottom: 8px !important;
white-space: nowrap !important;
}
/* 5to item (30+ marcas) span 2 cols — puede aceptar font más grande */
html body section.stat-ticker .stat-ticker-item:nth-child(5) .num-xl {
font-size: 2rem !important;
}
html body section.stat-ticker .label-xl {
font-size: .6875rem !important;
text-transform: uppercase !important;
letter-spacing: .1em !important;
color: #64748B !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
/* 4. PROCESO 4 PASOS MOBILE: PINNED scrollytelling (mismo efecto que desktop)
- pin-container 240vh (60vh per step)
- layout stacked vertical dentro del pin (visual arriba + content abajo)
- solo 1 step visible a la vez con scrub */
html body section.ce-process-stage .ce-process-pin-container {
height: 240vh !important;
}
html body section.ce-process-stage .ce-process-pin {
position: sticky !important;
top: 70px !important; /* respeta header sticky */
height: calc(100vh - 70px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* 2026-06-30 Luis: contenido centrado vertical */
align-items: stretch !important;
padding-top: 0 !important;
padding-bottom: 24px !important;
overflow: hidden !important;
}
/* Progress bar+dots: que fluyan con el content en lugar de absolute bottom */
html body section.ce-process-stage .ce-process-progress {
position: static !important;
transform: none !important;
left: auto !important;
bottom: auto !important;
margin-top: 24px !important;
align-self: center !important;
}
/* Grid: 1col stack (visual arriba, content abajo) */
html body section.ce-process-stage .ce-process-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
gap: 16px !important;
padding: 0 28px !important;
max-width: 100% !important;
}
/* Stage padding lateral extra para "respiro" */
html body section.ce-process-stage {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Visual mobile: número izquierda + icon animado derecha (sin overlap con título) */
html body section.ce-process-stage .ce-process-visual {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 130px !important;
position: relative !important;
margin: 0 !important;
padding: 0 8px !important;
}
html body section.ce-process-stage .ce-process-num {
font-size: 5.5rem !important;
position: relative !important;
top: auto !important;
left: auto !important;
line-height: 1 !important;
}
html body section.ce-process-stage .ce-process-icon-wrap {
display: block !important;
width: 80px !important;
height: 80px !important;
margin: 0 !important;
position: relative !important;
right: auto !important;
top: auto !important;
flex-shrink: 0 !important;
}
html body section.ce-process-stage .ce-process-icon {
position: absolute !important;
inset: 0 !important;
width: 80px !important;
height: 80px !important;
top: 0 !important;
left: 0 !important;
}
/* Content area: steps absolute (uno visible a la vez con .is-active) */
html body.home.has-dark-hero section.ce-process-stage article.ce-process-step,
html body.home section.ce-process-content article.ce-process-step,
html body section.ce-process-stage article.ce-process-step {
position: absolute !important;
inset: 0 !important;
opacity: 0 !important;
transform: translateY(20px) !important;
transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1) !important;
pointer-events: none !important;
padding: 0 !important;
border-bottom: 0 !important;
}
html body.home.has-dark-hero section.ce-process-stage article.ce-process-step.is-active,
html body.home section.ce-process-stage article.ce-process-step.is-active,
html body section.ce-process-stage article.ce-process-step.is-active {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
html body section.ce-process-stage .ce-process-content {
position: relative !important;
min-height: 320px !important;
height: 320px !important;
}
/* Step typography compact mobile */
html body section.ce-process-stage .ce-process-step h3 {
font-size: 1.5rem !important;
line-height: 1.2 !important;
margin-bottom: 12px !important;
}
html body section.ce-process-stage .ce-process-step p {
font-size: .9375rem !important;
line-height: 1.5 !important;
margin-bottom: 16px !important;
}
html body section.ce-process-stage .ce-process-step ul li {
padding: 8px 0 !important;
font-size: .8125rem !important;
}
html body section.ce-process-stage .ce-process-step ul li strong {
min-width: 90px !important;
font-size: .75rem !important;
}
/* Progress bar visible en mobile */
html body section.ce-process-stage .ce-process-progress {
display: flex !important;
bottom: 20px !important;
}
html body section.ce-process-stage .ce-process-bar {
width: 160px !important;
}
/* 2026-07-05: REMOVIDO el bloque "vamos con pin real" que forzaba
position:absolute/opacity:0 en [data-mobile-stacked] — el pin móvil nunca
funcionó (el sticky se desactiva en <=900) y dejaba 240vh de scroll muerto.
Móvil vuelve a modo apilado (reglas en el @media 900 de arriba). */
/* Progress bar era del pin — en apilado no aplica */
html body section.ce-process-stage[data-mobile-stacked] .ce-process-progress {
display: none !important;
}
}
/* =====================================================================
2026-06-25 — iPhone 17 Pro hero fix: "doble encimada"
Bug real: ticker es sibling del hero,
con position:fixed top:118px (.has-dark-hero rule). En mobile el gap
header→ticker queda blanco (~47px) y el bg translúcido del ticker hace
que el texto sea ilegible sobre el blanco. Fix: bg sólido + top correcto
+ safe-area-inset-top para iPhone Dynamic Island.
===================================================================== */
@media (max-width: 900px) {
/* Override has-dark-hero rule (line 7577 → top:118px) con specificity superior
2026-06-25: ticker DEBAJO del header con gap visual + box-shadow para separar */
html body.home.has-dark-hero section.rate-ticker-wrap,
html body.has-dark-hero.is-home section.rate-ticker-wrap,
html body.has-dark-hero section.rate-ticker-wrap.rate-ticker-wrap {
top: 71px !important; /* pegado al bottom del header mobile */
box-shadow: 0 4px 12px -2px rgba(10, 23, 51, .18) !important; /* sombra abajo para que NO se vea encimado */
}
/* Header con border-bottom más visible para separar del ticker */
html body.home .site-header,
html body.home header.site-header,
html body.home #masthead {
border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .12) !important;
}
/* REVERTIDO 2026-06-25: mantener bg translúcido original (glass blur) — usuario lo prefiere */
/* Safe-area-inset para iPhone 17 Pro Dynamic Island + notch */
@supports (padding-top: env(safe-area-inset-top)) {
html body.home.has-dark-hero section.rate-ticker-wrap,
html body.has-dark-hero.is-home section.rate-ticker-wrap,
html body.has-dark-hero section.rate-ticker-wrap.rate-ticker-wrap {
top: calc(71px + env(safe-area-inset-top, 0px)) !important;
}
html body.home .site-header,
html body.home header.site-header,
html body.home #masthead {
padding-top: env(safe-area-inset-top, 0px) !important;
box-sizing: border-box !important;
}
}
/* Margin-top sobre la foto del hero para que no toque al ticker */
html body.home section.hero-slider .hero-static-grid,
html body.home section.hero-slider .hero-static-text {
padding-top: 12px !important;
}
}
/* =====================================================================
2026-06-25 — MOBILE FIXES (audit 2-pass)
Font sizes tiny + touch targets pequeños + ticker bug entrada
===================================================================== */
@media (max-width: 600px) {
/* Footer disclaimer "Crediexpres es intermediario..." 10px → 12px */
html body .site-footer p,
html body footer.site-footer p,
html body footer p[class*="disclaimer"],
html body footer .site-info p,
html body footer small {
font-size: 12px !important;
line-height: 1.55 !important;
}
/* Footer touch targets: phone, email, links — min 44px tap area */
html body footer a[href^="tel:"],
html body footer a[href^="mailto:"],
html body footer .footer-contact a,
html body footer a[href*="@"] {
display: inline-block !important;
padding: 10px 4px !important;
min-height: 44px !important;
line-height: 1.4 !important;
font-size: 14px !important;
}
/* Blog post sidebar related cards: eyebrow/meta 10px → 12px */
/* Privacidad: meta pills mobile más legibles */
html body.page-id-2871 .legal-meta-pill {
font-size: 12px !important;
padding: 6px 12px !important;
}
html body.page-id-2871 .legal-eyebrow,
html body.page-id-2871 .legal-section-eyebrow {
font-size: 12px !important;
}
/* Privacidad TOC: touch targets ≥ 44px */
html body.page-id-2871 .legal-toc a,
html body.page-id-2871 .legal-toc-link {
display: block !important;
padding: 10px 8px !important;
min-height: 44px !important;
line-height: 1.3 !important;
}
/* Blog index "Ver todas →" links: touch target padding */
html body.page-id-2894 .blog-cat-section a[href*="/category/"] {
display: inline-block !important;
padding: 10px 6px !important;
min-height: 40px !important;
}
}
/* 2026-06-25 — B1: Logos respaldados mobile 2×2 grid (en lugar de 3+1 flex-wrap) */
@media (max-width: 600px) {
html body.page-id-2869 .cert-respaldos > div {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 18px 14px !important;
justify-items: center !important;
align-items: center !important;
}
html body.page-id-2869 .cert-respaldos img {
height: 44px !important;
max-width: 100% !important;
}
}
/* 2026-06-25 — D: Stat chip en cards portafolio (entre sub y CTA) */
html body.home .portafolio-card-v2 .portafolio-card-stat {
display: inline-block;
margin-top: 10px;
padding: 5px 11px;
border-radius: 6px;
background: rgba(30, 95, 255, .08);
color: #1E5FFF;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.2;
}
html body.home .portafolio-card-v2[data-tipo="pyme"] .portafolio-card-stat {
background: rgba(16, 185, 129, .1);
color: #0E9E6E;
}
/* 2026-06-25 — Cert respaldos: hover bounce + grayscale → color transition */
html body.page-id-2869 .cert-respaldos img {
filter: grayscale(60%) !important;
opacity: .68 !important;
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease, opacity .3s ease !important;
cursor: pointer;
}
html body.page-id-2869 .cert-respaldos img:hover {
filter: grayscale(0%) !important;
opacity: 1 !important;
animation: ceLogoBounce .6s cubic-bezier(.34, 1.56, .64, 1) !important;
}
@keyframes ceLogoBounce {
0% { transform: translateY(0) scale(1); }
30% { transform: translateY(-12px) scale(1.08); }
55% { transform: translateY(-4px) scale(1.04); }
80% { transform: translateY(-8px) scale(1.06); }
100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
html body.page-id-2869 .cert-respaldos img:hover {
animation: none !important;
transform: translateY(-2px) !important;
}
}
/* 2026-06-25 v4 — Alianzas: logos GIGANTES llenando el wrap (fix espacios vacíos visibles) */
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-logo-wrap {
min-height: 160px !important;
padding: 16px 24px !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-logo {
max-height: 130px !important;
max-width: 95% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
@media (max-width: 600px) {
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-logo-wrap {
min-height: 120px !important;
padding: 14px 20px !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-logo {
max-height: 95px !important;
}
}
/* 2026-07-01 Luis v3: TIGHTNESS AGRESIVA — eliminar TODO espacio superfluo.
Body gap 14→6, tag mb 12→0, wrap padding + min-height eliminados,
wrap margin bottom reducido, card padding reducido. Logo mantiene 100px. */
@media (max-width: 600px) {
html body.page-id-2869 .alianzas-stage .alianza-card {
padding: 0 !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-card-body {
padding: 14px 20px 20px !important;
gap: 6px !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-tag {
margin-bottom: 0 !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-logo-wrap {
min-height: 0 !important;
padding: 0 !important;
margin: 4px 0 6px !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-logo {
max-height: 90px !important;
max-width: 200px !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-card-title {
margin-top: 2px !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-card-text {
margin-bottom: 0 !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-meta-inline {
margin-top: 6px !important;
}
html body.page-id-2869 .alianzas-stage .alianza-card .alianza-cta-link {
margin-top: 10px !important;
}
}
/* 2026-06-25 — Equipo v4 2-col layout (LEFT 3 cards horizontal / RIGHT Cómo cobramos)
Responsive: en mobile/tablet pasa a 1-col stack */
@media (max-width: 768px) {
html body.page-id-2869 .retrato-stage .equipo-2col {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child {
padding: 10px 12px !important;
}
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child > div:first-child {
font-size: .8125rem !important;
}
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child > div:last-child {
font-size: .625rem !important;
}
}
html body.page-id-2869 .retrato-stage .equipo-card > div:first-child {
aspect-ratio: 1 / 1 !important;
}
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child {
padding: 16px 18px !important;
}
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child > div:first-child {
font-size: 1rem !important;
}
html body.page-id-2869 .retrato-stage .equipo-card > div:last-child > div:last-child {
font-size: 0.75rem !important;
}
/* =====================================================================
2026-05-20 — Trust cards padding-top FIX
El reset `html body.home article { padding-top: 0 !important }` (línea ~6038)
estaba pegando los iconos al borde superior de las .trust-card. Restauramos
el padding original del .trust-card con specificity mayor.
===================================================================== */
html body.home article.trust-card,
html body article.trust-card {
padding-top: clamp(24px, 2.5vw, 32px) !important;
}
/* =====================================================================
2026-06-18 — ETAPA 3 PREP: Normalización de paddings verticales (Opción A)
Sistema unificado para todas las "content sections" del home.
Bank marquee con su escala propia (strip más fino).
Hero y rate-ticker NO afectados (lógica propia).
===================================================================== */
html body.home section.bank-marquee {
padding-top: clamp(56px, 6vw, 96px) !important;
padding-bottom: clamp(56px, 6vw, 96px) !important;
}
html body.home section.stat-ticker,
html body.home section.portafolio-cards,
html body.home section.compare-stair-stage,
html body.home section.trust-stage,
html body.home section.testimonios-stage,
html body.home section.faq-stage,
html body.home section.cta-cinematic {
padding-top: clamp(72px, 8vw, 120px) !important;
padding-bottom: clamp(72px, 8vw, 120px) !important;
}
/* =====================================================================
2026-06-18 — ETAPA 3: Stat ticker estilo mockup blanco editorial
Quita aurora drift + grid pattern + gradient + border-left.
Cifras azul eléctrico sólido, fondo blanco plano, separador gris arriba.
Scopeado a body.home para no afectar otras páginas.
===================================================================== */
html body.home section.stat-ticker {
background: #fff !important;
}
html body.home section.stat-ticker::before,
html body.home section.stat-ticker::after,
html body.home section.stat-ticker .stat-ticker::before,
html body.home section.stat-ticker .stat-ticker::after,
html body.home section.stat-ticker div.stat-ticker::before,
html body.home section.stat-ticker div.stat-ticker::after {
display: none !important;
background: none !important;
background-image: none !important;
}
html body.home section.stat-ticker > .ast-container,
html body.home section.stat-ticker > div {
position: relative;
}
/* Separador gris arriba del stat ticker — REMOVIDO por petición del user */
html body.home section.stat-ticker > .ast-container::before,
html body.home section.stat-ticker > div:first-child::before {
display: none !important;
content: none !important;
}
html body.home .stat-ticker-item {
border-left: none !important;
padding-left: 0 !important;
text-align: center;
}
html body.home .stat-ticker-item .num-xl {
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: #1E5FFF !important;
color: #1E5FFF !important;
font-weight: 800;
}
html body.home .stat-ticker-item .label-xl {
color: #64748B !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
font-size: 0.6875rem !important;
line-height: 1.4 !important;
margin-top: 8px !important;
}
/* =====================================================================
2026-06-22 — FIX VISUAL header+ticker: continuidad cromática (Opción A)
Header en home era transparent → mostraba la porción oscura del hero
creando un "strip vacío" entre logo/menu y el rate-ticker.
Fix: dar al header un gradient que FLUYE hacia el del ticker.
- Header bottom (y=122): rgba(5,9,18,.78) ┐
- Ticker top (y=122): rgba(5,9,18,.78) ┘ ← matched
- Ticker bottom (y=166): rgba(10,19,38,.55)
Header y ticker se ven como UNA SOLA BARRA navy continua.
NO toca dimensiones, padding ni line-height. Solo bg.
===================================================================== */
html body.is-home .site-header,
html body.home .site-header,
html body.has-dark-hero .site-header {
background: linear-gradient(180deg, rgba(5,9,18,.55) 0%, rgba(5,9,18,.78) 100%) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
/* Subir el rate-ticker a la banda vacía debajo del menu (sube ~42px).
- top:118 = un pelo abajo del logo+menu.
- z-index 1001 = encima del header (z=1000) para ser visible.
- position fixed = anclado al viewport.
- Astra agrega body.is-scrolled cuando user scrollea > umbral → ahí lo OCULTAMOS
para que no quede sticky permanente cubriendo otras secciones. */
html body.home .rate-ticker-wrap,
html body.is-home .rate-ticker-wrap,
html body.has-dark-hero .rate-ticker-wrap {
position: fixed !important;
top: 118px !important;
z-index: 1001 !important;
transition: opacity .35s var(--expo, ease), transform .35s var(--expo, ease);
}
html body.home.is-scrolled .rate-ticker-wrap,
html body.is-home.is-scrolled .rate-ticker-wrap,
html body.has-dark-hero.is-scrolled .rate-ticker-wrap {
opacity: 0 !important;
transform: translateY(-100%) !important;
pointer-events: none !important;
}
/* =====================================================================
2026-06-22 — Mover hero text 3cm (~114px) hacia el centro (home only)
Original padding-left: clamp(40px, 6vw, 120px) → @1440 = 86px
Nuevo padding-left: clamp(154px, 14vw, 234px) → @1440 = ~202px (+115px)
Scope: solo body.home (no afecta Conócenos page-id-2869).
===================================================================== */
/* =====================================================================
2026-06-22 — ETAPA 3+4 MOCKUP MATCH (home only)
===================================================================== */
/* 1) Brand statement: "decisión" en azul gradient (override coral del default) */
html body.home .brand-statement-headline .reveal-row:last-child .reveal-accent {
background: linear-gradient(135deg, #1E5FFF 0%, #6B95FF 50%, #1E5FFF 100%) !important;
background-size: 200% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* 2) Stat ticker: forzar 5 columnas + quitar eyebrow+headline */
html body.home section.stat-ticker .container > div[data-cinema]:first-child {
display: none !important;
}
html body.home section.stat-ticker > .container > div.stat-ticker,
html body.home section.stat-ticker > div > div.stat-ticker {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: clamp(20px, 3vw, 48px) !important;
padding: 0 !important;
}
@media (max-width: 900px) {
html body.home section.stat-ticker > .container > div.stat-ticker,
html body.home section.stat-ticker > div > div.stat-ticker {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 14px !important;
}
html body.home .stat-ticker-item .num-xl {
font-size: clamp(1.5rem, 5vw, 2.4rem) !important;
}
html body.home .stat-ticker-item .label-xl {
font-size: 0.55rem !important;
letter-spacing: .06em !important;
}
}
@media (max-width: 560px) {
html body.home section.stat-ticker > .container > div.stat-ticker,
html body.home section.stat-ticker > div > div.stat-ticker {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* 3) Portafolio rediseño V2 — 6 cards 2x3, badges, line icons */
html body.home section.portafolio-cards {
background: #fff !important;
}
html body.home section.portafolio-cards::before,
html body.home section.portafolio-cards::after {
display: none !important;
}
html body.home .portafolio-eyebrow {
display: block !important;
text-align: center !important;
font-size: 0.8125rem !important;
font-weight: 700 !important;
color: #1E5FFF !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
margin: 0 0 16px !important;
background: none !important;
-webkit-text-fill-color: #1E5FFF !important;
}
html body.home .portafolio-title {
text-align: center !important;
font-size: clamp(1.75rem, 3.5vw, 2.625rem) !important;
line-height: 1.2 !important;
color: #1A2233 !important;
letter-spacing: -.02em !important;
font-weight: 700 !important;
margin: 0 auto clamp(48px, 6vw, 80px) !important;
max-width: 760px !important;
}
/* V2 grid */
html body.home .portafolio-grid-v2 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: clamp(16px, 2vw, 24px) !important;
max-width: 1240px !important;
margin: 0 auto !important;
padding: 0 24px !important;
}
@media (max-width: 900px) {
html body.home .portafolio-grid-v2 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 560px) {
html body.home .portafolio-grid-v2 {
grid-template-columns: 1fr !important;
}
}
html body.home .portafolio-card-v2 {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 28px 32px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
box-shadow: var(--shadow-sm); /* 2026-06-24 design-review L1: era .03 casi invisible → elevación real */
text-decoration: none;
color: inherit;
transition: transform .35s var(--expo, cubic-bezier(.16,1,.3,1)),
box-shadow .35s var(--expo, cubic-bezier(.16,1,.3,1)),
border-color .35s var(--expo, cubic-bezier(.16,1,.3,1));
overflow: hidden;
isolation: isolate;
}
html body.home .portafolio-card-v2:hover {
transform: translateY(-4px);
border-color: #C7D2FE;
box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 24px 48px -24px rgba(30,95,255,.18);
}
html body.home .portafolio-card-icon-box {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #F0F5FF 0%, #E0EAFF 100%);
display: flex;
align-items: center;
justify-content: center;
}
html body.home .portafolio-card-icon-box svg {
width: 30px;
height: 30px;
stroke: #1E5FFF;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
html body.home .portafolio-card-badge {
position: absolute;
top: 18px;
right: 18px;
padding: 4px 12px;
border-radius: 999px;
background: #EEF2FF;
color: #1E5FFF;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
html body.home .portafolio-card-title {
font-family: var(--font-titulo, 'Plus Jakarta Sans', sans-serif);
font-size: 1.375rem;
font-weight: 700;
color: #0A1733;
line-height: 1.2;
margin: 0;
}
html body.home .portafolio-card-sub {
font-size: 0.9375rem;
line-height: 1.5;
color: #64748B;
margin: 0;
font-weight: 400;
}
/* CTA pill "Conocer más →" en cada portafolio card — más pequeño */
html body.home .portafolio-card-cta {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 4px 10px !important;
margin-top: 12px !important;
background: #EEF2FF !important;
color: #1E5FFF !important;
border-radius: 999px !important;
font-size: 0.625rem !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
transition: background .3s ease, color .3s ease, gap .3s ease !important;
align-self: flex-start !important;
}
html body.home .portafolio-card-cta-arrow {
display: inline-block !important;
transition: transform .3s ease !important;
}
html body.home .portafolio-card-v2:hover .portafolio-card-cta {
background: #1E5FFF !important;
color: #fff !important;
gap: 10px !important;
}
html body.home .portafolio-card-v2:hover .portafolio-card-cta-arrow {
transform: translateX(2px) !important;
}
/* =====================================================================
2026-06-22 — BANCOPPELIFICACIÓN (body.home, etapas 5-12)
Selecciones: B1 (blue line) · A2 (navy Coppel #0A1733) · A3 (Etapa 3 intacta)
Aplastar gradientes, bgs flat, cards limpias, H2 38-42px + línea azul.
===================================================================== */
html body.home {
--coppel-navy: #0A1733; /* 2026-06-24 design-review: consolidado a azul-marino brand (era #0A1733) */
--coppel-navy-deep: #060D1F; /* deep shade del nuevo navy (era #07215C) */
--coppel-bg-gray: #F5F7FA;
--coppel-text-dark: #1A2233;
--coppel-text-gray: #5C6470;
--coppel-border: #E5E7EB;
--coppel-accent: #1E5FFF;
}
/* ---------- 1) Flat bgs alternados (mata gradientes heredados) ---------- */
html body.home section.bank-marquee,
html body.home section.bank-marquee::before,
html body.home section.bank-marquee::after {
background: var(--coppel-bg-gray) !important;
background-image: none !important;
}
html body.home section.compare-stair-stage {
background: #ffffff !important;
background-image: none !important;
}
html body.home section.compare-stair-stage::before,
html body.home section.compare-stair-stage::after { display: none !important; }
html body.home section.trust-stage {
background: var(--coppel-navy) !important;
background-image: none !important;
}
html body.home section.trust-stage .trust-aurora,
html body.home section.trust-stage::before,
html body.home section.trust-stage::after { display: none !important; }
html body.home section.testimonios-stage {
background: var(--coppel-bg-gray) !important;
background-image: none !important;
}
html body.home section.testimonios-stage::before,
html body.home section.testimonios-stage::after { display: none !important; }
html body.home section.faq-stage {
background: #ffffff !important;
background-image: none !important;
}
html body.home section.faq-stage::before,
html body.home section.faq-stage::after { display: none !important; }
/* 2026-06-25 — CTA UNIVERSAL: navy puro + sin radial-gradients azules en TODAS las páginas
Antes solo aplicaba a body.home, dejando Conócenos/Hipotecario/PyME/Blog/etc con wash azul.
Fix: cobertura universal usando html body. */
html body section.cta-cinematic,
html body.home section.cta-cinematic,
html body.is-home section.cta-cinematic,
html body.page section.cta-cinematic,
html body.has-dark-hero section.cta-cinematic,
html body.ast-page-builder-template section.cta-cinematic,
html body.single section.cta-cinematic {
background: var(--coppel-navy, #0A1733) !important;
background-color: #0A1733 !important;
background-image: none !important;
}
/* 2026-06-30 Luis: regla disable ELIMINADA — los ::before/::after ahora se usan para
el efecto lava lamp universal (ver bloque al final del archivo). */
/* ---------- 2) H2 pattern Coppel: 38-42px centrado + línea azul ---------- */
html body.home section.compare-stair-stage .compare-stair-title,
html body.home section.testimonios-stage h2,
html body.home section.faq-stage h2,
html body.home section.cta-cinematic h2 {
font-size: clamp(2rem, 3.5vw, 2.625rem) !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1.2 !important;
letter-spacing: -.02em !important;
color: var(--coppel-text-dark) !important;
margin-bottom: 16px !important;
}
html body.home section.trust-stage .trust-title {
font-size: clamp(2rem, 3.5vw, 2.625rem) !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1.2 !important;
letter-spacing: -.02em !important;
color: #fff !important;
margin-bottom: 16px !important;
}
html body.home section.cta-cinematic h2 {
color: #fff !important;
}
html body.home section.trust-stage .trust-title .trust-accent,
html body.home section.trust-stage .trust-title span {
color: #fff !important;
background: none !important;
-webkit-text-fill-color: #fff !important;
}
/* Línea azul decorativa debajo del H2 — patrón Coppel pero azul */
html body.home section.compare-stair-stage .compare-stair-header,
html body.home section.testimonios-stage [class*="header"],
html body.home section.faq-stage [class*="header"],
html body.home section.cta-cinematic [class*="header"],
html body.home section.trust-stage .trust-header {
position: relative;
text-align: center;
margin-bottom: clamp(40px, 5vw, 64px) !important;
}
html body.home section.compare-stair-stage .compare-stair-header::after,
html body.home section.testimonios-stage .testimonios-header::after,
html body.home section.faq-stage .faq-header::after,
html body.home section.trust-stage .trust-header::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: var(--coppel-accent);
border-radius: 2px;
margin: 12px auto 0;
}
/* Eyebrows uniformes Coppel — display:inline-block + margin:auto para centrar y NO estirar */
html body.home .compare-stair-eyebrow,
html body.home section.testimonios-stage [class*="eyebrow"],
html body.home section.faq-stage [class*="eyebrow"],
html body.home section.trust-stage .trust-eyebrow {
display: inline-block !important;
width: fit-content !important;
font-size: 0.8125rem !important;
font-weight: 700 !important;
color: var(--coppel-accent) !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
text-align: center !important;
margin: 0 auto 16px !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
-webkit-text-fill-color: var(--coppel-accent) !important;
}
/* Asegurar parent centra el eyebrow */
html body.home section.trust-stage .trust-header {
text-align: center !important;
}
html body.home section.trust-stage .trust-eyebrow {
color: #93B4FF !important;
-webkit-text-fill-color: #93B4FF !important;
}
/* OCULTAR el dot verde pulsante (el "parpadeo") — no encaja con Coppel limpio */
html body.home section.trust-stage .trust-eyebrow-dot {
display: none !important;
}
/* Testimonios avatar: cuadrado redondeado limpio (sin halo oval blue) */
html body.home section.testimonios-stage .testimonio-photo-wrap {
width: 96px !important;
height: 96px !important;
border-radius: 16px !important;
background: transparent !important;
border: 1px solid #E5E7EB !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
overflow: hidden !important;
}
html body.home section.testimonios-stage .testimonio-photo {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
border-radius: 14px !important;
display: block !important;
}
/* FAQ Cofinavit-style REVERTIDO por petición del user — vuelve a accordion original */
/* FAQ: reducir espacio interno de las cajas (entre texto y borde) — versión compacta */
/* El .faq-item raíz tenía padding 22px 24px (root cause) — lo aplastamos */
html body.home section.faq-stage .faq-item {
padding: 0 !important;
}
html body.home section.faq-stage .faq-item summary {
padding: 10px 16px !important;
font-size: 0.875rem !important;
line-height: 1.35 !important;
gap: 10px !important;
min-height: 0 !important;
}
html body.home section.faq-stage .faq-item .faq-body,
html body.home section.faq-stage .faq-item[open] > div {
padding: 0 16px 12px !important;
font-size: 0.8125rem !important;
line-height: 1.5 !important;
}
/* Toggle icon +/- más compacto */
html body.home section.faq-stage .faq-item summary > *:last-child {
flex-shrink: 0 !important;
width: 22px !important;
height: 22px !important;
}
/* Gap entre items reducido también */
html body.home section.faq-stage .faq-col {
gap: 8px !important;
}
/* =====================================================================
2026-06-22 — SECCIÓN broker-explainer (texto + video YT) entre brand y stats
===================================================================== */
html body.home section.broker-explainer {
background: #fff !important;
padding-top: clamp(48px, 5.5vw, 80px) !important;
padding-bottom: clamp(48px, 5.5vw, 80px) !important;
margin-top: -100px !important;
position: relative !important;
z-index: 3 !important;
}
html body.home section.broker-explainer .broker-explainer-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 clamp(24px, 4vw, 40px) !important;
}
html body.home section.broker-explainer .broker-explainer-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: clamp(28px, 4vw, 56px) !important;
align-items: center !important;
}
@media (max-width: 900px) {
html body.home section.broker-explainer .broker-explainer-grid {
grid-template-columns: 1fr !important;
}
}
html body.home section.broker-explainer .broker-explainer-eyebrow {
display: inline-block !important;
font-size: 0.6875rem !important;
font-weight: 700 !important;
color: #1E5FFF !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
margin: 0 0 12px !important;
}
html body.home section.broker-explainer .broker-explainer-title {
font-size: clamp(1.5rem, 2.8vw, 2.125rem) !important;
font-weight: 700 !important;
color: #1A2233 !important;
margin: 0 0 14px !important;
line-height: 1.2 !important;
letter-spacing: -.02em !important;
}
html body.home section.broker-explainer .broker-explainer-sub {
font-size: 0.9375rem !important;
line-height: 1.55 !important;
color: #5C6470 !important;
margin: 0 0 20px !important;
}
html body.home section.broker-explainer .broker-explainer-list {
list-style: none !important;
padding: 0 !important;
margin: 0 0 24px !important;
}
html body.home section.broker-explainer .broker-explainer-list li {
position: relative;
padding-left: 30px !important;
margin-bottom: 10px !important;
font-size: 0.9375rem !important;
color: #1A2233 !important;
line-height: 1.5 !important;
}
html body.home section.broker-explainer .broker-explainer-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #EEF2FF;
color: #1E5FFF;
font-weight: 700;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
html body.home section.broker-explainer .broker-explainer-cta {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 14px 28px !important; /* 2026-06-24 design-review: unificado al primario canónico (hero pill) */
background: #1E5FFF !important;
color: #fff !important;
border-radius: 999px !important; /* era 10px → pill */
font-size: 0.9375rem !important;
font-weight: 700 !important; /* era 600 */
text-decoration: none !important;
transition: all .3s ease !important;
}
html body.home section.broker-explainer .broker-explainer-cta:hover {
background: #0A4FE0 !important;
gap: 12px !important;
}
html body.home section.broker-explainer .broker-explainer-video-frame {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 40px -10px rgba(15,23,42,.18);
background: #000;
}
html body.home section.broker-explainer .broker-explainer-video-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ---------- 3) Cards pattern Coppel: flat blanco + border + 12px radius ---------- */
html body.home .compare-stair-card,
html body.home section.testimonios-stage [class*="testimon"][class*="card"],
html body.home .testimonio-card,
html body.home .faq-item {
background: #ffffff !important;
border: 1px solid var(--coppel-border) !important;
border-radius: 12px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
padding: 28px 32px !important;
}
html body.home .compare-stair-card::before,
html body.home .compare-stair-card::after { display: none !important; }
/* Trust cards en navy: bg blanco/translúcido sobre navy.
SELECTOR EXACTO `.trust-card` solamente — NO `[class*="trust"][class*="card"]`
porque eso matchea trust-card-body / trust-card-title / etc. y crea cajas
anidadas. */
html body.home section.trust-stage article.trust-card {
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 12px !important;
box-shadow: none !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
padding: 28px !important;
}
/* RESET de inner boxes — quitar bg/border/radius/padding que tomaron por error */
html body.home section.trust-stage .trust-card-body,
html body.home section.trust-stage .trust-card-title,
html body.home section.trust-stage .trust-card-text,
html body.home section.trust-stage .trust-card-tag,
html body.home section.trust-stage .trust-card-desc {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Spacing entre elementos internos del card */
html body.home section.trust-stage .trust-card-title {
margin-top: 18px !important;
margin-bottom: 12px !important;
color: #fff !important;
font-size: 1.125rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
html body.home section.trust-stage .trust-card-text,
html body.home section.trust-stage .trust-card p {
color: rgba(255,255,255,.78) !important;
font-size: 0.9375rem !important;
line-height: 1.55 !important;
margin: 0 0 16px !important;
}
html body.home section.trust-stage .trust-card-tag {
margin-top: auto !important;
font-size: 0.6875rem !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.6) !important;
}
/* ---------- 4) CTA cinematic — banner navy Coppel ---------- */
html body.home section.cta-cinematic [class*="container"],
html body.home section.cta-cinematic [class*="wrap"] {
text-align: center !important;
}
html body.home section.cta-cinematic h2 {
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
}
html body.home section.cta-cinematic a,
html body.home section.cta-cinematic button,
html body.home section.cta-cinematic .cta-btn,
html body.home section.cta-cinematic [class*="btn-primary"] {
background: #ffffff !important;
color: var(--coppel-navy) !important;
border: none !important;
}
html body.home section.cta-cinematic a:hover,
html body.home section.cta-cinematic button:hover {
background: #F0F5FF !important;
}
/* ---------- 5) Footer Coppel ---------- */
html body.home footer.site-footer,
html body.home #colophon {
background: var(--coppel-navy) !important;
background-image: none !important;
color: rgba(255,255,255,.78) !important;
}
html body.home footer.site-footer a {
color: rgba(255,255,255,.78) !important;
}
html body.home footer.site-footer a:hover {
color: #ffffff !important;
}
/* ---------- 6) Borrar efectos heavy heredados ---------- */
html body.home section.compare-stair-stage [class*="aurora"],
html body.home section.testimonios-stage [class*="aurora"],
html body.home section.faq-stage [class*="aurora"],
html body.home section.cta-cinematic [class*="aurora"] {
display: none !important;
}
/* Sub-text Coppel uniforme bajo H2 */
html body.home section.compare-stair-stage .compare-stair-sub,
html body.home section.testimonios-stage [class*="sub"]:not([class*="eyebrow"]),
html body.home section.faq-stage [class*="sub"]:not([class*="eyebrow"]),
html body.home section.cta-cinematic [class*="sub"]:not([class*="eyebrow"]) {
font-size: 1rem !important;
font-weight: 400 !important;
color: var(--coppel-text-gray) !important;
text-align: center !important;
max-width: 640px !important;
margin: 16px auto 0 !important;
line-height: 1.6 !important;
}
html body.home section.trust-stage .trust-sub,
html body.home section.trust-stage [class*="sub"]:not([class*="eyebrow"]) {
color: rgba(255,255,255,.78) !important;
}
/* =====================================================================
2026-06-22 — BANCOPPEL CONTAINERS uniformes
Cada sección tenía su propio max-width (1200, 1240, 1280, 1320).
Estandarizar a 1200px centrado con padding-x consistente.
===================================================================== */
/* Sections — quitar padding-x del propio section (lo pone el container) */
html body.home section.brand-statement,
html body.home section.stat-ticker,
html body.home section.portafolio-cards,
html body.home section.compare-stair-stage,
html body.home section.trust-stage,
html body.home section.testimonios-stage,
html body.home section.faq-stage,
html body.home section.cta-cinematic {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Container UNIVERSAL: 1200px max, centrado, padding-x 24-40px */
html body.home section.brand-statement > .brand-statement-pin > .container,
html body.home section.brand-statement > .container,
html body.home section.stat-ticker > .container,
html body.home section.portafolio-cards > .portafolio-grid-v2,
html body.home section.compare-stair-stage > .compare-stair-container,
html body.home section.trust-stage > .trust-container,
html body.home section.testimonios-stage > .testimonios-container,
html body.home section.testimonios-stage > [class*="container"],
html body.home section.faq-stage > .faq-container,
html body.home section.faq-stage > [class*="container"],
html body.home section.cta-cinematic > [class*="container"],
html body.home section.cta-cinematic > .cta-cinematic-container,
html body.home section.cta-cinematic > .ast-container {
max-width: 1200px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(24px, 4vw, 40px) !important;
padding-right: clamp(24px, 4vw, 40px) !important;
box-sizing: border-box !important;
}
/* Eyebrow + headline + sub también dentro del container del header del section */
html body.home section.compare-stair-stage .compare-stair-header,
html body.home section.testimonios-stage [class*="testimonios-header"],
html body.home section.faq-stage [class*="faq-header"],
html body.home section.trust-stage .trust-header,
html body.home section.cta-cinematic [class*="cta-header"] {
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Fix brand statement: que "decisión." no se salga del container + 20% reduce */
html body.home .brand-statement-headline {
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
font-size: clamp(1.9rem, 4vw, 3.6rem) !important;
line-height: 1.12 !important;
letter-spacing: -.025em !important;
text-wrap: balance !important;
overflow-wrap: break-word !important;
word-break: keep-all !important;
}
/* Trust grid: forzar 4 columnas EXACTAMENTE iguales.
`minmax(0, 1fr)` permite que la columna ignore el min-content del card y
se ajuste a 1/4 exacto. Sin esto, el contenido intrínseco hace cols
asimétricas (eg 284 / 287 / 382 / 256). */
html body.home section.trust-stage .trust-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(16px, 2vw, 24px) !important;
align-items: stretch !important;
}
html body.home section.trust-stage .trust-card {
min-width: 0 !important;
}
@media (max-width: 900px) {
html body.home section.trust-stage .trust-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* 2026-07-01 — Unificación iOS/Android: 1 columna hasta 560px.
Motorola Edge 50 Pro reporta ~443 CSS px (DPR 2.75) → antes veía 2 cols mientras
iPhone Pro (393 CSS px) veía 1 col. Ahora ambos muestran layout idéntico. */
@media (max-width: 560px) {
html body.home section.trust-stage .trust-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
html body.home section.trust-stage .trust-card {
padding: 22px 20px !important;
}
}
/* Stat ticker: respetar el max-width del container (no 5 cols full-bleed) */
html body.home section.stat-ticker > .container > div.stat-ticker {
max-width: 1120px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* =====================================================================
2026-06-22 — TIPOGRAFÍAS BANCOPPEL ALIGNMENT (body.home, etapas 4-12)
Ajustes finos para que cada texto matche tamaños Coppel.
Etapa 3 (Brand + Stats) intocada.
===================================================================== */
/* Compare-stair: bajar números "01 02 03 04" de 101px a 56-64px */
html body.home .compare-stair-num {
font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
line-height: 1 !important;
margin-bottom: 16px !important;
}
/* Card titles uniformes: weight 600 (no 700-800) */
html body.home .compare-stair-card .compare-stair-h3,
html body.home .compare-stair-card h3,
html body.home section.testimonios-stage .testimonio-card h3,
html body.home section.testimonios-stage .testimonio-card [class*="name"],
html body.home section.faq-stage .faq-item h3,
html body.home section.faq-stage .faq-item button,
html body.home section.faq-stage .faq-question,
html body.home section.faq-stage .faq-col-title {
font-weight: 600 !important;
font-size: clamp(1rem, 1.4vw, 1.125rem) !important;
line-height: 1.4 !important;
letter-spacing: -.005em !important;
color: #1A2233 !important;
}
/* Trust sub: 19px → 16px */
html body.home section.trust-stage .trust-sub {
font-size: 1rem !important;
line-height: 1.55 !important;
}
/* Sub-texts uniformes Coppel a 16px */
html body.home .compare-stair-sub,
html body.home section.testimonios-stage .testimonios-sub,
html body.home section.cta-cinematic [class*="sub"] {
font-size: 1rem !important;
line-height: 1.55 !important;
color: #5C6470 !important;
}
/* Stair eyebrow + pill consistency con Coppel: 13px */
html body.home .compare-stair-eyebrow,
html body.home section.testimonios-stage .testimonios-eyebrow,
html body.home section.faq-stage .faq-eyebrow,
html body.home section.trust-stage .trust-eyebrow {
font-size: 0.8125rem !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
}
/* CTA buttons Coppel: 16px weight 600 */
html body.home section.cta-cinematic a,
html body.home section.cta-cinematic button {
font-size: 1rem !important;
font-weight: 600 !important;
padding: 14px 28px !important;
border-radius: 8px !important;
}
/* =====================================================================
2026-06-22 — REDUCCIÓN 20% en TODAS las secciones BAJO HERO
Aplica a: brand, stats, portafolio, compare-stair, trust, testimonios, FAQ, CTA, footer.
Hero + Header NO se tocan.
===================================================================== */
/* ---------- Section paddings: 115 → 92px (-20%) ---------- */
/* Bank marquee: RESTAURADO a tamaño original (sin -20%) por petición del user.
Los logos vuelven a su altura natural sin max-height cap. */
html body.home section.bank-marquee {
padding-top: clamp(56px, 6vw, 96px) !important;
padding-bottom: clamp(56px, 6vw, 96px) !important;
}
/* Brand statement: RECORTE EXTRA top+bottom por petición del user. */
html body.home section.brand-statement {
padding-top: clamp(20px, 2.4vw, 40px) !important;
padding-bottom: clamp(20px, 2.4vw, 40px) !important;
}
html body.home section.trust-stage,
html body.home section.testimonios-stage,
html body.home section.faq-stage {
padding-top: clamp(58px, 6.4vw, 96px) !important;
padding-bottom: clamp(58px, 6.4vw, 96px) !important;
}
/* 2026-07-01 Luis v5: CTA compacto agresivo */
html body.home section.cta-cinematic {
padding-top: clamp(36px, 3vw, 48px) !important;
padding-bottom: clamp(36px, 3vw, 48px) !important;
}
/* Compare stair: padding-bottom + footer margin reducidos -4cm */
html body.home section.compare-stair-stage {
padding-top: clamp(58px, 6.4vw, 96px) !important;
padding-bottom: 24px !important;
}
html body.home section.compare-stair-stage .compare-stair-footer {
margin-top: -60px !important;
position: relative !important;
z-index: 5 !important;
}
/* Portafolio: padding-bottom RECORTADO 4cm (~152px) por petición del user */
html body.home section.portafolio-cards {
padding-top: clamp(58px, 6.4vw, 96px) !important;
padding-bottom: 0 !important;
margin-bottom: -56px !important;
}
/* Stat ticker: SUBIDO 4cm + ahora 2cm más (= -176px total ~6cm) por petición. */
html body.home section.stat-ticker {
padding-top: 0 !important;
padding-bottom: clamp(58px, 6.4vw, 96px) !important;
margin-top: -176px !important;
position: relative !important;
z-index: 2 !important;
}
/* ---------- Brand statement: 72→58, sub 26→21 ---------- */
html body.home .brand-statement-headline {
font-size: clamp(1.9rem, 4vw, 3.6rem) !important;
line-height: 1.12 !important;
}
html body.home .brand-statement-sub {
font-size: clamp(0.95rem, 1.5vw, 1.3rem) !important;
line-height: 1.5 !important;
}
/* ---------- Stat ticker num: 56→45, label 11→9 ---------- */
html body.home .stat-ticker-item .num-xl {
font-size: clamp(2.25rem, 4.5vw, 2.8rem) !important;
line-height: 1.05 !important;
}
html body.home .stat-ticker-item .label-xl {
font-size: 0.55rem !important;
letter-spacing: .08em !important;
margin-top: 6px !important;
}
/* ---------- Section H2: 42→34 — especificidad alta para vencer overrides previos ---------- */
html body.home section.portafolio-cards .portafolio-title,
html body.home section.compare-stair-stage .compare-stair-title,
html body.home section.testimonios-stage h2,
html body.home section.testimonios-stage .testimonios-title,
html body.home section.faq-stage .faq-title,
html body.home section.faq-stage h2,
html body.home section.trust-stage .trust-title,
html body.home section.trust-stage h2 {
font-size: clamp(1.5rem, 2.8vw, 2.125rem) !important;
line-height: 1.2 !important;
margin-bottom: 12px !important;
}
/* 2026-07-03 Luis: CTA h2 home usa el token site-wide (--fs-section-h2 = 34px desktop). */
html body.home section.cta-cinematic h2 {
font-size: var(--fs-section-h2) !important;
line-height: 1.2 !important;
margin-bottom: 12px !important;
}
/* Brand H2: necesita especificidad máxima */
html body.home section.brand-statement .brand-statement-headline {
font-size: clamp(1.9rem, 4vw, 3.6rem) !important;
line-height: 1.12 !important;
}
/* ---------- Eyebrows: 13→11 — especificidad alta ---------- */
html body.home section.portafolio-cards .portafolio-eyebrow,
html body.home section.compare-stair-stage .compare-stair-eyebrow,
html body.home section.testimonios-stage .testimonios-eyebrow,
html body.home section.faq-stage .faq-eyebrow,
html body.home section.trust-stage .trust-eyebrow {
font-size: 0.6875rem !important;
margin-bottom: 12px !important;
}
/* ---------- Sub-texts under H2: 16→13 ---------- */
html body.home .compare-stair-sub,
html body.home .testimonios-sub,
html body.home .trust-sub,
html body.home section.cta-cinematic [class*="sub"] {
font-size: 0.8125rem !important;
line-height: 1.5 !important;
margin-top: 12px !important;
}
/* ---------- Header de cada sección: margin reduce ---------- */
html body.home section.compare-stair-stage .compare-stair-header,
html body.home section.testimonios-stage [class*="testimonios-header"],
html body.home section.faq-stage [class*="faq-header"],
html body.home section.trust-stage .trust-header,
html body.home section.portafolio-cards {
margin-bottom: clamp(32px, 4vw, 52px) !important;
}
/* ---------- Card titles: 18→14, 22→18 ---------- */
html body.home .portafolio-card-title {
font-size: 1.125rem !important;
}
html body.home .compare-stair-card .compare-stair-h3,
html body.home .compare-stair-card h3,
html body.home section.testimonios-stage .testimonio-card h3,
html body.home section.testimonios-stage .testimonio-card [class*="name"],
html body.home section.faq-stage .faq-item h3,
html body.home section.faq-stage .faq-item button,
html body.home section.faq-stage .faq-question,
html body.home section.faq-stage .faq-col-title,
html body.home section.trust-stage .trust-card-title {
font-size: 0.9375rem !important;
line-height: 1.35 !important;
}
/* ---------- Card body text: 15-16 → 12-13 ---------- */
html body.home .portafolio-card-sub,
html body.home .compare-stair-card .compare-stair-p,
html body.home .compare-stair-card p,
html body.home section.testimonios-stage .testimonio-card p,
html body.home section.faq-stage .faq-item p,
html body.home section.trust-stage .trust-card-text,
html body.home section.trust-stage .trust-card p {
font-size: 0.8125rem !important;
line-height: 1.5 !important;
}
/* ---------- Compare-stair num: 56→45 ---------- */
html body.home .compare-stair-num {
font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
}
/* ---------- Cards padding: 28-32 → 22-26 ---------- */
html body.home .portafolio-card-v2 {
padding: 22px 24px !important;
border-radius: 10px !important;
gap: 12px !important;
}
html body.home .compare-stair-card,
html body.home section.testimonios-stage .testimonio-card,
html body.home section.trust-stage article.trust-card {
padding: 22px 24px !important;
border-radius: 10px !important;
}
/* FAQ items: padding 0 — el espacio interno lo controla summary y body */
html body.home section.faq-stage .faq-item {
padding: 0 !important;
border-radius: 10px !important;
}
/* Footer: reducir altura aún más */
html body .ce-footer,
html body.home .ce-footer {
padding-top: 28px !important;
padding-bottom: 14px !important;
}
/* 2026-07-09 COMPACTO: el hueco muerto entre columnas y bottom bar
venía del margin-bottom:48px del grid */
html body .ce-footer .ce-footer-grid,
html body.home .ce-footer .ce-footer-grid {
margin-bottom: 18px !important;
}
/* Copyright + disclaimer fusionados en una columna (una sola fila bottom) */
html body .ce-footer .ce-footer-legal {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
html body .ce-footer .ce-footer-legal .ce-footer-disclaimer {
margin: 0 !important;
}
/* Brand col: menos aire interno */
html body .ce-footer .ce-footer-logo { margin-bottom: 10px !important; }
html body .ce-footer .ce-footer-tag { margin-bottom: 12px !important; font-size: .875rem !important; }
/* ============================================================
DESPLEGABLE UNIVERSAL (2026-07-09, pedido Luis): Hipotecario /
PyME / Crediexpres colapsados con chevron +/− en TODAS las
resoluciones. Specificity (0,4,1): gana a las reglas base h4
(0,3,1) y al bloque acordeón móvil legacy de 2026-05-11.
============================================================ */
html body .ce-footer .ce-footer-links-col .ce-footer-col > ul {
display: none !important;
}
html body .ce-footer .ce-footer-links-col .ce-footer-col.is-open > ul {
display: block !important;
padding-top: 12px !important;
animation: ceFooterSlide .35s cubic-bezier(.2, .7, .2, 1);
}
html body .ce-footer .ce-footer-links-col .ce-footer-col h4 {
cursor: pointer !important;
position: relative;
margin: 0 !important;
padding: 12px 32px 12px 0 !important;
border-bottom: 0 !important; /* el hairline lo lleva la fila (.ce-footer-col) */
user-select: none;
-webkit-tap-highlight-color: rgba(30, 95, 255, .2);
font-size: 0.9375rem !important;
transition: color .2s ease;
}
html body .ce-footer .ce-footer-links-col .ce-footer-col h4:hover {
color: #9DBBFF !important;
}
html body .ce-footer .ce-footer-links-col .ce-footer-col h4::after {
content: "+";
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25rem;
font-weight: 300;
color: rgba(255, 255, 255, .65);
transition: color .2s ease;
}
html body .ce-footer .ce-footer-links-col .ce-footer-col.is-open h4::after {
content: "−";
}
html body .ce-footer .ce-footer-links-col ul li + li { margin-top: 8px !important; }
html body .ce-footer .ce-footer-links-col ul li a { font-size: 0.8125rem !important; }
html body .ce-footer .ce-footer-links-col .ce-footer-col.is-open > ul {
padding-bottom: 12px !important;
}
/* Ocultar la barra Astra "Copyright / Powered by" arriba del ce-footer */
html body .ast-builder-grid-row-container.site-below-footer-wrap,
html body .ast-small-footer,
html body .ast-below-footer-wrap {
display: none !important;
}
/* Bottom row del ce-footer: copyright + CTA — compactar */
html body .ce-footer-bottom,
html body.home .ce-footer-bottom {
padding-top: 12px !important;
padding-bottom: 0 !important;
margin-top: 12px !important;
}
/* Disclaimer ultra compacto */
html body .ce-footer-disclaimer,
html body.home .ce-footer-disclaimer {
margin-top: 6px !important;
padding-bottom: 0 !important;
font-size: 0.6875rem !important;
line-height: 1.4 !important;
}
/* CTA pill bottom-right más pequeño */
html body .ce-footer-cta,
html body.home .ce-footer-cta {
padding: 8px 18px !important;
font-size: 0.8125rem !important;
}
/* Reducir gap entre items de contact + social */
html body .ce-footer-contact,
html body.home .ce-footer-contact {
gap: 6px !important;
}
html body .ce-footer-contact a,
html body.home .ce-footer-contact a {
margin-bottom: 0 !important;
}
html body .ce-footer-social,
html body.home .ce-footer-social {
margin-top: 10px !important;
}
html body .ce-footer-social-label,
html body.home .ce-footer-social-label {
margin-bottom: 6px !important;
}
/* Iconos sociales un poco más pequeños */
html body .ce-footer-social-icons a.ce-social-link,
html body.home .ce-footer-social-icons a.ce-social-link {
width: 32px !important;
height: 32px !important;
}
html body .ce-footer-social-icons a.ce-social-link svg,
html body.home .ce-footer-social-icons a.ce-social-link svg {
width: 16px !important;
height: 16px !important;
}
/* Footer 3-COL layout (brand / contact / 3 sub-listas) */
html body .ce-footer .ce-footer-grid--3col {
display: grid !important;
grid-template-columns: 1fr 1fr 1.5fr !important;
gap: clamp(24px, 3vw, 48px) !important;
align-items: start !important;
}
@media (max-width: 900px) {
html body .ce-footer .ce-footer-grid--3col {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 640px) {
html body .ce-footer .ce-footer-grid--3col {
grid-template-columns: 1fr !important;
}
}
/* Col 3: filas desplegables APILADAS que llenan todo el alto de la col
(2026-07-09 — antes eran 3 columnas lado a lado y dejaban hueco muerto) */
html body .ce-footer .ce-footer-links-col {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
align-self: stretch !important;
}
html body .ce-footer .ce-footer-links-col .ce-footer-col {
flex: 1 1 0;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid rgba(255, 255, 255, .10);
}
html body .ce-footer .ce-footer-links-col .ce-footer-col:last-child {
border-bottom: 0;
}
/* TITULOS columna links: tamaño "texto 1" (más grande) */
html body .ce-footer .ce-footer-links-col h4 {
font-size: 0.9375rem !important;
font-weight: 700 !important;
margin-bottom: 12px !important;
color: #fff !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* LINK ITEMS más pequeños — espacio entre items reducido */
html body .ce-footer .ce-footer-links-col ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body .ce-footer .ce-footer-links-col ul li {
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
}
html body .ce-footer .ce-footer-links-col ul li + li {
margin-top: 4px !important;
}
html body .ce-footer .ce-footer-links-col ul li a {
font-size: 0.75rem !important;
font-weight: 400 !important;
line-height: 1.2 !important;
padding: 0 !important;
display: inline-block !important;
}
/* ---------- Icon box: 56→45, radius reduced ---------- */
html body.home .portafolio-card-icon-box {
width: 46px !important;
height: 46px !important;
border-radius: 11px !important;
}
html body.home .portafolio-card-icon-box svg {
width: 24px !important;
height: 24px !important;
}
/* Emoji dentro del icon-box: grande + animado */
html body.home .portafolio-card-icon-box .portafolio-card-emoji {
font-size: 32px !important;
line-height: 1 !important;
display: inline-block !important;
transform-origin: center !important;
animation: emojiFloat 3.6s ease-in-out infinite !important;
filter: drop-shadow(0 2px 4px rgba(15,23,42,.08));
}
/* Stagger por nth-child para que cada card empiece la animación con offset */
html body.home .portafolio-card-v2:nth-child(1) .portafolio-card-emoji { animation-delay: 0s !important; }
html body.home .portafolio-card-v2:nth-child(2) .portafolio-card-emoji { animation-delay: -0.5s !important; }
html body.home .portafolio-card-v2:nth-child(3) .portafolio-card-emoji { animation-delay: -1s !important; }
html body.home .portafolio-card-v2:nth-child(4) .portafolio-card-emoji { animation-delay: -1.5s !important; }
html body.home .portafolio-card-v2:nth-child(5) .portafolio-card-emoji { animation-delay: -2s !important; }
html body.home .portafolio-card-v2:nth-child(6) .portafolio-card-emoji { animation-delay: -2.5s !important; }
/* Bounce on hover sobre la card */
html body.home .portafolio-card-v2:hover .portafolio-card-emoji {
animation: emojiBounce 0.6s cubic-bezier(.34, 1.56, .64, 1) !important;
}
@keyframes emojiFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-4px) rotate(-2deg); }
}
@keyframes emojiBounce {
0% { transform: translateY(0) scale(1); }
30% { transform: translateY(-10px) scale(1.15) rotate(-8deg); }
60% { transform: translateY(2px) scale(.95); }
100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
html body.home .portafolio-card-icon-box .portafolio-card-emoji {
animation: none !important;
}
}
html body.home section.trust-stage .trust-icon {
width: 46px !important;
height: 46px !important;
border-radius: 13px !important;
}
html body.home section.trust-stage .trust-icon svg {
width: 26px !important;
height: 26px !important;
}
/* ---------- Card badge: smaller ---------- */
html body.home .portafolio-card-badge {
padding: 3px 10px !important;
font-size: 0.5625rem !important;
top: 14px !important;
right: 14px !important;
}
/* ---------- CTA buttons: 14px padding 11px ---------- */
html body.home section.cta-cinematic a,
html body.home section.cta-cinematic button {
font-size: 0.875rem !important;
padding: 11px 22px !important;
}
/* ---------- Gaps between cards: 24→20 ---------- */
html body.home .portafolio-grid-v2 {
gap: 20px !important;
}
html body.home section.trust-stage .trust-grid,
html body.home .compare-stair-grid {
gap: clamp(14px, 1.6vw, 20px) !important;
}
/* ---------- Imágenes / fotos: reduce 20% --- pero NO romper testimonio-photo ---------- */
/* (removido — el max-width 80% + height auto rompía el aspect 96x96 del avatar) */
/* Si necesitas reducir alguna otra imagen, hazlo selector-específico. */
/* Bank marquee logos: RESTAURADOS a su altura original (sin cap 32px) */
/* html body.home section.bank-marquee img — sin override, natural size */
/* =====================================================================
2026-06-22 — HERO STATIC (2-col: texto izq + imagen circular der)
Reemplaza el slider GSAP de 4 slides por un layout fijo blanco editorial.
===================================================================== */
html body section.hero-slider.hero-static {
background: #ffffff !important;
background-image: none !important;
min-height: auto !important;
height: auto !important;
/* padding-top: 180px clearance para header(83) + ticker(44) + 50 respiro */
padding: clamp(160px, 14vw, 200px) clamp(24px, 4vw, 40px) clamp(60px, 7vw, 100px) !important;
position: relative !important;
z-index: 1 !important;
}
html body section.hero-slider.hero-static .hero-static-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
}
@media (max-width: 900px) {
html body section.hero-slider.hero-static .hero-static-grid {
grid-template-columns: 1fr;
gap: 40px;
}
html body section.hero-slider.hero-static .hero-static-image-wrap {
order: -1;
}
}
/* Texto izq — RECORRIDO 3cm hacia la derecha */
html body .hero-static-text {
max-width: 580px;
padding-left: clamp(40px, 8vw, 114px);
}
@media (max-width: 900px) {
html body .hero-static-text { padding-left: 0; }
}
html body .hero-static-eyebrow {
display: inline-block;
font-size: 0.875rem;
font-weight: 700;
color: #0A1733;
letter-spacing: -.005em;
margin: 0 0 24px;
}
html body .hero-static-title {
font-family: var(--font-titulo, 'Plus Jakarta Sans', sans-serif);
font-size: clamp(32px, 4.2vw, 3.4rem) !important; /* min en px → congruente home/conócenos sin depender del root mobile */
font-weight: 700;
color: #0A1733;
line-height: 1.12;
letter-spacing: -.025em;
margin: 0 0 32px;
text-wrap: balance;
}
html body .hero-static-accent {
color: #1E5FFF;
font-weight: 800;
}
/* Subtítulo bajo el headline — 2026-07-05 Luis */
html body .hero-static-sub {
font-size: 1.0625rem;
color: #4A5568;
line-height: 1.6;
font-weight: 500;
margin: 0 0 30px;
max-width: 540px;
}
html body .hero-static-title + .hero-static-sub { margin-top: -14px; }
@media (max-width: 640px) {
html body .hero-static-title + .hero-static-sub { margin-top: 0; }
}
/* Mini-slider de logos socios junto al botón del hero — 2026-07-05 Luis (Crédito Simple).
Marquee corto en COLOR: track con 2 sets idénticos animado a -50% = loop perfecto */
html body .hero-static-cta-row .hero-partner-logos {
flex: 1 1 260px;
min-width: 0;
max-width: 520px;
align-self: center;
overflow: hidden;
/* contain: el track width:max-content (~1300px) inflaba el min-content de toda
la columna del hero en móvil (scrollWidth 612 vs 393) */
contain: inline-size;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
html body .hero-static-cta-row .hpl-track {
display: flex;
width: max-content;
animation: heroLogoSlide 22s linear infinite;
}
html body .hero-static-cta-row .hpl-set {
display: flex;
align-items: center;
gap: 34px;
padding-right: 34px;
}
html body .hero-static-cta-row .hero-partner-logos img {
height: 42px; /* +50% (Luis 2026-07-05) */
width: auto;
max-width: 165px;
object-fit: contain;
}
@keyframes heroLogoSlide {
to { transform: translateX(-50%); }
}
/* Variante FIJA (pocos logos, sin animación) — Factoraje y Crédito Auto */
html body .hero-static-cta-row .hero-partner-logos--static {
-webkit-mask-image: none;
mask-image: none;
}
html body .hero-static-cta-row .hero-partner-logos--static .hpl-track {
animation: none;
width: auto;
}
html body .hero-static-cta-row .hero-partner-logos--static .hpl-set {
padding-right: 0;
}
html body .hero-static-cta-row .hero-partner-logos:hover .hpl-track {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
html body .hero-static-cta-row .hpl-track { animation: none; }
}
@media (max-width: 640px) {
html body .hero-static-cta-row .hero-partner-logos {
flex-basis: 100%;
max-width: 100%;
margin-top: 10px;
}
html body .hero-static-cta-row .hero-partner-logos img { height: 30px; }
}
/* Bajada editorial (deck) — 2026-07-05 Luis: jerarquía h1 corto + frase de apoyo
más grande que un sub normal, más ligera que el h1 */
html body .hero-static-deck {
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
color: #334155;
line-height: 1.4;
font-weight: 500;
letter-spacing: -.012em;
margin: 0 0 30px;
max-width: none;
text-wrap: balance;
}
html body .hero-static-title + .hero-static-deck { margin-top: -16px; }
@media (max-width: 640px) {
html body .hero-static-title + .hero-static-deck { margin-top: -4px; }
}
/* Escala home: h1 a 2 líneas ("Analizamos tu perfil / en +5 bancos.") en vez de 3,
checks un punto arriba para acompañar la bajada más grande */
html body.home .hero-static-title {
font-size: clamp(34px, 3.1vw, 2.8rem) !important;
margin-bottom: 26px;
}
html body.home .hero-static-checks li {
font-size: 1.0625rem;
}
/* Línea corta bajo la barra de bancos — 2026-07-05 Luis */
html body .bank-marquee-tagline {
text-align: center;
font-size: .8125rem;
font-weight: 600;
color: #64748B;
letter-spacing: .04em;
margin-top: 18px;
padding: 0 24px;
}
/* Checks */
html body .hero-static-checks {
list-style: none;
padding: 0;
margin: 0 0 36px;
display: flex;
flex-direction: column;
gap: 14px;
}
html body .hero-static-checks li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 1rem;
color: #1A2233;
line-height: 1.4;
font-weight: 500;
}
html body .hero-static-check {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: #EEF2FF;
color: #1E5FFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 800;
margin-top: 1px;
}
/* CTA row */
html body .hero-static-cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
html body .hero-static-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: #1E5FFF;
color: #fff;
border-radius: 999px;
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
transition: all .25s ease;
box-shadow: 0 4px 16px -6px rgba(30,95,255,.4);
}
html body .hero-static-cta:hover {
background: #0A4FE0;
transform: translateY(-1px);
box-shadow: 0 8px 22px -6px rgba(30,95,255,.5);
}
html body .hero-static-cta-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
background: transparent;
color: #0A1733;
border: 1px solid #E5E7EB;
border-radius: 999px;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
transition: all .25s ease;
}
html body .hero-static-cta-secondary:hover {
background: #F5F7FA;
border-color: #C7D2FE;
}
/* Imagen derecha */
html body .hero-static-image-wrap {
display: flex;
align-items: center;
justify-content: center;
}
html body .hero-static-image-circle {
position: relative;
width: clamp(320px, 36vw, 480px);
height: clamp(320px, 36vw, 480px);
border-radius: 50%;
overflow: hidden;
background: #F5F7FA;
box-shadow:
0 20px 60px -20px rgba(15,23,42,.25),
0 8px 24px -8px rgba(30,95,255,.12);
}
/* 2026-07-01 Luis: en Android narrow (320-380px), min 320px del clamp desborda el
container y se ve la circle cortada a la derecha. Fluid con gutter 32px cada lado. */
@media (max-width: 500px) {
html body .hero-static-image-circle {
width: min(320px, calc(100vw - 64px)) !important;
height: min(320px, calc(100vw - 64px)) !important;
}
}
html body .hero-static-image-circle img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Cuando hero static está activo, ocultar TODO lo del slider viejo (por si queda algo) */
html body section.hero-slider.hero-static .hero-slide,
html body section.hero-slider.hero-static .hero-slider-controls,
html body section.hero-slider.hero-static .hero-dots,
html body section.hero-slider.hero-static .hero-arrow,
html body section.hero-slider.hero-static .hero-progress {
display: none !important;
}
/* =====================================================================
2026-06-23 — Opción B: MENU + TICKER glass blanco translúcido
(Hero ahora es blanco — el navy gradient pesaba demasiado)
===================================================================== */
/* HEADER: glass blanco translúcido (overrride del navy gradient anterior) */
html body.home .site-header,
html body.is-home .site-header,
html body.has-dark-hero .site-header {
background: rgba(255,255,255,.85) !important;
background-image: none !important;
backdrop-filter: blur(14px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
border-bottom: 1px solid rgba(15,23,42,.06) !important;
z-index: 1010 !important; /* arriba del rate-ticker (1001) para que el dropdown sea visible */
}
/* Menu items: texto navy en vez de white */
html body .site-header .main-header-menu a,
html body.home .site-header .ast-builder-menu .menu-link,
html body.home .site-header .menu-item > a,
html body.is-home .site-header .main-header-menu a,
html body.is-home .site-header .ast-builder-menu .menu-link,
html body.is-home .site-header .menu-item > a,
html body.has-dark-hero .site-header .main-header-menu a,
html body.has-dark-hero .site-header .ast-builder-menu .menu-link,
html body.has-dark-hero .site-header .menu-item > a {
color: #0A1733 !important;
text-shadow: none !important;
}
/* Hover */
html body .site-header .main-header-menu a:hover,
html body.home .site-header .ast-builder-menu .menu-link:hover,
html body.is-home .site-header .main-header-menu a:hover,
html body.has-dark-hero .site-header .main-header-menu a:hover {
color: #1E5FFF !important;
}
/* Submenu arrows + chevron */
html body.home .site-header .ast-builder-menu .menu-item > a > svg,
html body .site-header .menu-item-has-children > a::after {
color: #0A1733 !important;
fill: #0A1733 !important;
}
/* ============================================================
FIX BUG: Inicio (current page) text era white sobre header glass blanco = invisible
Regla Astra-builder le mete white !important al current-menu-item con specificity (0,5,2)
Fix con specificity (0,6,3) y mostrar Inicio en azul (azul electric) + bold como "estás aquí"
============================================================ */
html body .site-header .main-header-menu .menu-item.current-menu-item > .menu-link,
html body.is-home .site-header .main-header-menu .menu-item.current-menu-item > .menu-link,
html body.has-dark-hero .site-header .main-header-menu .menu-item.current-menu-item > .menu-link,
html body.home.is-scrolled .site-header .main-header-menu .menu-item.current-menu-item > .menu-link,
html body.is-home.is-scrolled .site-header .main-header-menu .menu-item.current-menu-item > .menu-link,
html body .site-header .main-header-menu .menu-item.current-menu-ancestor > .menu-link,
html body.is-home .site-header .main-header-menu .menu-item.current-menu-ancestor > .menu-link {
color: #1E5FFF !important;
font-weight: 700 !important;
background: transparent !important;
}
/* ============================================================
FIX BUG: Dropdown submenu navy-on-navy invisible
Submenu ahora glass blanco con items navy + hover azul
Aplica top + sticky (todos los estados)
============================================================ */
html body .site-header .sub-menu,
html body .site-header .main-header-menu .sub-menu,
html body.is-home .site-header .sub-menu,
html body.has-dark-hero .site-header .sub-menu,
html body.home.is-scrolled .site-header .sub-menu,
html body.is-home.is-scrolled .site-header .sub-menu,
html body.has-dark-hero.is-scrolled .site-header .sub-menu {
background: rgba(255, 255, 255, 0.98) !important;
background-color: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
border-radius: 12px !important;
box-shadow:
0 12px 40px -10px rgba(15, 23, 42, 0.18),
0 4px 12px -4px rgba(15, 23, 42, 0.08) !important;
padding: 10px 0 !important;
overflow: hidden !important;
}
/* Items del submenu: texto navy */
html body .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta),
html body.is-home .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta),
html body.has-dark-hero .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta),
html body.home.is-scrolled .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta),
html body.is-home.is-scrolled .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta),
html body.has-dark-hero.is-scrolled .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta) {
color: #0A1733 !important;
background: transparent !important;
padding: 10px 22px !important;
font-weight: 500 !important;
font-size: 0.9375rem !important;
transition: background-color .2s ease, color .2s ease, padding-left .2s ease !important;
display: block !important;
}
/* Hover */
html body .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta):hover,
html body .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta):focus,
html body.is-home .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta):hover,
html body.has-dark-hero .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta):hover,
html body.home.is-scrolled .site-header .sub-menu li > a:not(.ce-menu-enhanced):not(.ce-menu-cta):not(.ce-dd-precalif-cta):hover {
background: #F5F8FF !important;
color: #1E5FFF !important;
padding-left: 26px !important;
}
/* Separador sutil entre items */
html body .site-header .sub-menu li {
border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
}
html body .site-header .sub-menu li:last-child {
border-bottom: 0 !important;
}
/* ============================================================
DROPDOWN ENHANCEMENTS: iconos + descs + arrow hover + slide-down
============================================================ */
/* Wider dropdown para que cabe descripción */
html body .site-header .sub-menu {
min-width: 320px !important;
padding: 8px !important;
transform-origin: top center;
/* Slide-down animation (CSS show via :hover/:focus-within on parent) */
}
/* ============================================================
MEGA DROPDOWN 2-COL (items izq + stats panel ABSOLUTE derecha)
Stats panel position:absolute → ocupa toda la altura SIN crear filas extra
============================================================ */
html body .site-header .sub-menu.ce-dd-mega {
display: block !important;
/* NO position:relative — el submenu ya es position:absolute por Astra,
y eso crea el contexto para que stats panel position:absolute funcione. */
width: 870px !important;
min-width: 870px !important;
max-width: 92vw !important;
padding: 16px !important;
padding-right: 312px !important;
}
/* Right-align cuando el JS detecta overflow */
html body .site-header .menu-item-has-children.dd-align-right > .sub-menu.ce-dd-mega {
left: auto !important;
right: 0 !important;
}
/* Items (left col) — display block normal en flujo */
html body .site-header .sub-menu.ce-dd-mega > li:not(.ce-dd-stats-panel) {
display: block;
}
/* Stats panel (right col) — POSITION ABSOLUTE para ocupar toda la altura */
html body .site-header .sub-menu.ce-dd-mega > li.ce-dd-stats-panel {
position: absolute !important;
top: 16px !important;
right: 16px !important;
width: 280px !important;
bottom: 16px !important;
background: linear-gradient(180deg, #F5F8FF 0%, #E5EEFF 55%, #CFDEFF 100%);
border: 1px solid #D6E2FB;
border-radius: 12px;
padding: 20px 18px 16px;
display: flex !important;
flex-direction: column;
gap: 10px;
list-style: none;
overflow: hidden;
}
/* Top accent gradient line — diferenciador visual premium */
html body .site-header .sub-menu.ce-dd-mega > li.ce-dd-stats-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #0A1733 0%, #1E5FFF 50%, #4A86FF 100%);
}
html body .site-header .ce-dd-panel-label {
font-size: 0.625rem;
font-weight: 800;
color: #1E5FFF;
letter-spacing: .16em;
text-transform: uppercase;
margin-bottom: 6px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(30, 95, 255, 0.12);
display: block;
}
/* Stats grid — SE ESTIRA para llenar el panel a cualquier altura.
El panel es absolute top/bottom → su alto sigue al nº de items del menú
(PyME 6 items = más alto). flex:1 + filas flex:1 reparten el sobrante
entre las 4 stats en vez de acumularlo como hueco antes del CTA. */
html body .site-header .ce-dd-stats-grid {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
gap: 0;
}
html body .site-header .ce-dd-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
flex: 1 1 0;
padding: 8px 0;
border-bottom: 1px solid rgba(15,23,42,.07);
}
html body .site-header .ce-dd-stat:first-child {
padding-top: 4px;
}
html body .site-header .ce-dd-stat:last-child {
border-bottom: 0;
padding-bottom: 4px;
}
html body .site-header .ce-dd-stat-num {
font-family: var(--font-titulo, 'Plus Jakarta Sans', sans-serif);
font-size: 1.5rem;
font-weight: 800;
color: #0A1733;
background: linear-gradient(135deg, #0A1733 0%, #1E5FFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
letter-spacing: -.025em;
min-width: 0;
}
html body .site-header .ce-dd-stat-lbl {
font-size: 0.625rem;
color: #5C6470;
font-weight: 600;
line-height: 1.3;
letter-spacing: .04em;
text-transform: uppercase;
}
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta,
html body.home.is-scrolled .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta,
html body.is-home.is-scrolled .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta,
html body.has-dark-hero.is-scrolled .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta {
margin-top: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 11px 16px !important;
background: linear-gradient(135deg, #1E5FFF 0%, #0A4FE0 100%) !important;
background-color: #1E5FFF !important;
color: #ffffff !important;
border-radius: 8px !important;
font-size: 0.75rem !important;
box-shadow: 0 4px 12px -2px rgba(30, 95, 255, 0.35) !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: background-color .25s, gap .25s, transform .2s !important;
text-align: center !important;
width: auto !important;
letter-spacing: .01em !important;
}
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta:hover,
html body.home.is-scrolled .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta:hover {
background: #0A4FE0 !important;
background-color: #0A4FE0 !important;
color: #ffffff !important;
gap: 10px !important;
}
html body .site-header .ce-dd-precalif-cta:hover {
background: #0A4FE0 !important;
gap: 10px !important;
color: #fff !important;
}
/* En mega: NO border-bottom entre items en col 1 (ya hay gap visual) */
html body .site-header .sub-menu.ce-dd-mega > li {
border-bottom: 0 !important;
}
/* Responsive: en móvil cambia a 1 col, stats panel debajo */
@media (max-width: 920px) {
html body .site-header .sub-menu.ce-dd-mega {
grid-template-columns: 1fr !important;
min-width: 320px !important;
}
html body .site-header .sub-menu.ce-dd-mega > li.ce-dd-stats-panel {
grid-column: 1;
grid-row: auto;
}
}
/* Estado inicial del dropdown (escondido con transform) */
html body .site-header .menu-item-has-children > .sub-menu {
opacity: 0;
transform: translateY(-8px);
visibility: hidden;
transition: opacity .25s cubic-bezier(.16,1,.3,1),
transform .25s cubic-bezier(.16,1,.3,1),
visibility 0s linear .25s;
pointer-events: none;
}
/* Abierto */
html body .site-header .menu-item-has-children:hover > .sub-menu,
html body .site-header .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
transform: translateY(0);
visibility: visible;
transition: opacity .3s cubic-bezier(.16,1,.3,1),
transform .3s cubic-bezier(.16,1,.3,1),
visibility 0s linear 0s;
pointer-events: auto;
}
/* Items enhanced: layout icon + body + arrow — aplicar en TOP y SCROLLED */
html body .site-header .sub-menu a.ce-menu-enhanced,
html body.home.is-scrolled .site-header .sub-menu a.ce-menu-enhanced,
html body.is-home.is-scrolled .site-header .sub-menu a.ce-menu-enhanced,
html body.has-dark-hero.is-scrolled .site-header .sub-menu a.ce-menu-enhanced {
display: flex !important;
align-items: flex-start !important;
gap: 13px !important;
padding: 13px 14px !important;
border-radius: 8px !important;
}
html body .site-header .sub-menu .ce-menu-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: linear-gradient(135deg, #F0F5FF 0%, #E5EEFF 100%);
border-radius: 10px;
border: 1px solid rgba(30, 95, 255, 0.08);
}
html body .site-header .sub-menu .ce-menu-body {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}
html body .site-header .sub-menu .ce-menu-title {
font-weight: 600;
color: #0A1733;
font-size: 0.9375rem;
line-height: 1.3;
letter-spacing: -.005em;
}
html body .site-header .sub-menu .ce-menu-desc {
font-size: 0.75rem;
color: #5C6470;
line-height: 1.45;
font-weight: 400;
}
html body .site-header .sub-menu .ce-menu-arrow {
flex-shrink: 0;
align-self: center;
font-size: 1rem;
color: #C7D2FE;
opacity: 0.45;
}
/* Hover row — solo color/background (sin transforms = "no animar") */
html body .site-header .sub-menu a.ce-menu-enhanced {
position: relative;
border-left: 3px solid transparent !important;
padding-left: 11px !important;
}
html body .site-header .sub-menu a.ce-menu-enhanced:hover {
background: linear-gradient(90deg, #F0F5FF 0%, #FAFCFF 100%) !important;
border-left-color: #1E5FFF !important;
}
html body .site-header .sub-menu a.ce-menu-enhanced:hover .ce-menu-icon {
background: linear-gradient(135deg, #DCE7FF 0%, #C7D6FF 100%);
border-color: rgba(30, 95, 255, 0.18);
}
html body .site-header .sub-menu a.ce-menu-enhanced:hover .ce-menu-arrow {
opacity: 1;
color: #1E5FFF;
}
html body .site-header .sub-menu a.ce-menu-enhanced:hover .ce-menu-title {
color: #1E5FFF;
}
/* Override del separador entre items cuando son enhanced */
html body .site-header .sub-menu li {
border-bottom: 0 !important;
}
/* CTA item al fondo del dropdown */
html body .site-header .sub-menu .ce-menu-cta-item {
margin-top: 8px !important;
padding: 8px 4px 0 !important;
border-top: 1px solid rgba(15,23,42,.06) !important;
}
/* "Ver todos" = link GHOST sutil (secundario). El azul sólido se reserva
para el CTA de conversión Precalifícate (jerarquía visual clara). */
html body .site-header .sub-menu .ce-menu-cta {
position: relative !important;
overflow: hidden !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 9px 6px !important;
background: transparent !important;
background-color: transparent !important;
color: #1E5FFF !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.8125rem !important;
text-decoration: none !important;
box-shadow: none !important;
transition: gap .25s, color .2s !important;
}
html body .site-header .sub-menu .ce-menu-cta:hover {
background: transparent !important;
background-color: transparent !important;
gap: 12px !important;
color: #0A4FE0 !important;
box-shadow: none !important;
}
/* ============================================================
SHINE SWEEP ON DROPDOWN OPEN — efecto barrilo metálico
Banda blanca diagonal cruza ambos CTAs automáticamente cuando se abre el dropdown
(NO al hover del botón — se dispara al hover del menu padre)
============================================================ */
@keyframes ceShineSweepLR {
0% { left: -75%; }
100% { left: 130%; }
}
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta::before {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.18) 35%,
rgba(255, 255, 255, 0.65) 50%,
rgba(255, 255, 255, 0.18) 65%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-22deg);
pointer-events: none;
z-index: 1;
}
/* Trigger: al hover/focus-within del menu padre → dropdown abre → shine corre lento */
/* Delay 0.95s = espera a que el submenu termine de abrir (300ms delay + 400ms fade) */
html body .site-header .menu-item-has-children:hover .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta::before,
html body .site-header .menu-item-has-children:focus-within .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta::before {
animation: ceShineSweepLR 1.7s cubic-bezier(.16, 1, .3, 1) .95s 1 both;
}
/* Asegurar que el contenido (texto + flecha) quede sobre el shine */
html body .site-header .sub-menu .ce-menu-cta > *,
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta > * {
position: relative;
z-index: 2;
}
/* Precalif CTA: garantizar overflow hidden + position relative para el ::before */
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta {
position: relative !important;
overflow: hidden !important;
}
/* ============================================================
CTA TEXTO BLANCO FORZADO (todos estados) — Ver todos + Precalifícate
============================================================ */
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta,
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta:link,
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta:visited,
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta:hover,
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta:focus,
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta:active {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body .site-header .sub-menu li.ce-dd-stats-panel a.ce-dd-precalif-cta > * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* "Ver todos" ghost link: texto + flecha en azul (todos los estados) */
html body .site-header .sub-menu a.ce-menu-cta,
html body .site-header .sub-menu a.ce-menu-cta:link,
html body .site-header .sub-menu a.ce-menu-cta:visited,
html body .site-header .sub-menu a.ce-menu-cta:focus,
html body .site-header .sub-menu a.ce-menu-cta:active,
html body .site-header .sub-menu a.ce-menu-cta > * {
color: #1E5FFF !important;
-webkit-text-fill-color: #1E5FFF !important;
}
html body .site-header .sub-menu a.ce-menu-cta:hover,
html body .site-header .sub-menu a.ce-menu-cta:hover > * {
color: #0A4FE0 !important;
-webkit-text-fill-color: #0A4FE0 !important;
}
/* ============================================================
CALCULADORA SUBMENU: sin stats panel (segunda columna)
Solo items + CTA "Ir a calculadora completa", layout compacto 1-col
============================================================ */
html body .site-header li.menu-item-2886 .sub-menu li.ce-dd-stats-panel {
display: none !important;
}
html body .site-header li.menu-item-2886 .sub-menu.ce-dd-mega {
width: 360px !important;
min-width: 360px !important;
padding: 14px !important;
padding-right: 14px !important;
}
/* Chevron flip en el menu padre cuando está abierto */
html body .site-header .menu-item-has-children > a > svg,
html body .site-header .menu-item-has-children > a::after {
transition: transform .25s cubic-bezier(.16,1,.3,1) !important;
}
html body .site-header .menu-item-has-children:hover > a > svg,
html body .site-header .menu-item-has-children:focus-within > a > svg,
html body .site-header .menu-item-has-children:hover > a::after,
html body .site-header .menu-item-has-children:focus-within > a::after {
transform: rotate(180deg) !important;
}
/* Logo "Crediexpres" — texto navy */
html body.home .site-header .site-title,
html body.home .site-header .site-title a,
html body.home .site-header .ast-logo-svg-text,
html body.home .site-header .ce-footer-logo-text,
html body.is-home .site-header .site-title,
html body.is-home .site-header .site-title a,
html body.has-dark-hero .site-header .site-title,
html body.has-dark-hero .site-header .site-title a {
color: #0A1733 !important;
text-shadow: none !important;
}
/* 2026-06-24 — Fix blob DESKTOP: el ::before del logo salía pálido (white→#C9D9FF
del rule body.has-dark-hero línea ~1799) en >=993px. Mismo azul que el mobile
header (#ast-mobile-header). Specificity (0,3,4) gana sobre (0,2,3). */
html body.home .site-header .site-title a::before,
html body.is-home .site-header .site-title a::before,
html body.has-dark-hero .site-header .site-title a::before {
background: linear-gradient(135deg, var(--azul-electrico), #6B95FF) !important;
box-shadow: 0 4px 12px -2px rgba(30,95,255,.35) !important;
}
/* RATE TICKER: glass blanco translúcido + texto navy */
html body.home .rate-ticker,
html body.is-home .rate-ticker,
html body.has-dark-hero .rate-ticker {
background: rgba(255,255,255,.80) !important;
background-image: none !important;
backdrop-filter: blur(14px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
border-top: 1px solid rgba(15,23,42,.04) !important;
border-bottom: 1px solid rgba(15,23,42,.06) !important;
}
/* Texto del ticker navy */
html body.home .rate-ticker-track,
html body.is-home .rate-ticker-track,
html body.has-dark-hero .rate-ticker-track {
color: #0A1733 !important;
}
/* Acentos (nombres de bancos): azul electric */
html body.home .rate-ticker-track strong,
html body.home .rate-ticker .rate-bank,
html body.home .rate-item strong,
html body.home .rate-item .rate-bank-name,
html body.home .rate-ticker [data-bank] {
color: #1E5FFF !important;
}
/* Separadores */
html body.home .rate-ticker-sep {
color: rgba(15,23,42,.18) !important;
}
/* SCROLLED STATE (Opción D): glass más opaco + shadow + border al scrollear */
html body.home.is-scrolled .site-header,
html body.is-home.is-scrolled .site-header,
html body.has-dark-hero.is-scrolled .site-header {
background: rgba(255,255,255,.96) !important;
background-image: none !important;
backdrop-filter: blur(18px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
border-bottom: 1px solid rgba(15,23,42,.08) !important;
box-shadow: 0 4px 20px -10px rgba(15,23,42,.12) !important;
transition:
background-color .35s cubic-bezier(.16,1,.3,1),
backdrop-filter .35s cubic-bezier(.16,1,.3,1),
box-shadow .35s cubic-bezier(.16,1,.3,1) !important;
}
/* Mantener texto navy en scrolled state también */
html body.home.is-scrolled .site-header .main-header-menu a,
html body.home.is-scrolled .site-header .ast-builder-menu .menu-link,
html body.home.is-scrolled .site-header .menu-item > a,
html body.is-home.is-scrolled .site-header .main-header-menu a,
html body.has-dark-hero.is-scrolled .site-header .main-header-menu a {
color: #0A1733 !important;
}
/* Cancelar el ::before "liquid glass blob" y ::after "línea de luz" del tema viejo
(eran efectos sobre el bg navy original — no encajan con glass blanco) */
html body.home.is-scrolled .site-header::before,
html body.home.is-scrolled .site-header::after,
html body.is-home.is-scrolled .site-header::before,
html body.is-home.is-scrolled .site-header::after,
html body.has-dark-hero.is-scrolled .site-header::before,
html body.has-dark-hero.is-scrolled .site-header::after {
display: none !important;
}
/* =====================================================================
2026-06-22 — SELLO AHMEX / Crediteria / Bróker certificado (strip)
===================================================================== */
html body.home section.ce-sello-strip {
background: linear-gradient(180deg, #F0F5FF 0%, #E6EEFD 100%) !important;
padding: 26px 24px !important;
margin-top: 32px !important; /* Aire arriba — separar del brand-statement */
border-top: 1px solid #C7D7F5 !important;
border-bottom: 1px solid #C7D7F5 !important;
position: relative !important;
z-index: 5 !important; /* Por encima de broker-explainer que sube con margin-top: -100px */
box-shadow: 0 1px 0 rgba(30, 95, 255, .04), 0 8px 24px -12px rgba(30, 95, 255, .12) !important;
}
html body.home .ce-sello-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 2vw, 32px);
flex-wrap: wrap;
}
html body.home .ce-sello-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9375rem !important;
color: #0A1733 !important;
font-weight: 600 !important;
letter-spacing: -.005em;
}
html body.home .ce-sello-item strong {
font-weight: 800 !important;
color: #0A1733 !important;
}
html body.home .ce-sello-item::before {
content: "✓";
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
background: #1E5FFF;
color: #fff;
border-radius: 50%;
font-size: 11px;
font-weight: 800;
margin-right: 4px;
flex-shrink: 0;
}
html body.home .ce-sello-dot {
color: #1E5FFF !important;
font-weight: 800;
opacity: .6;
}
@media (max-width: 640px) {
html body.home section.ce-sello-strip {
padding: 24px 16px !important;
margin-top: 24px !important;
}
html body.home .ce-sello-container {
flex-direction: column;
gap: 12px !important;
}
/* Empujar broker-explainer "Cómo te ayuda un bróker hipotecario" abajo del sello en mobile */
html body.home section.broker-explainer {
padding-top: 120px !important;
margin-top: 0 !important; /* sin overlap negativo en mobile */
}
html body.home .ce-sello-dot { display: none !important; }
html body.home .ce-sello-item {
font-size: 0.9375rem !important;
color: #0A1733 !important;
}
}
html body.home .ce-sello-item svg {
color: #1E5FFF;
flex-shrink: 0;
}
html body.home .ce-sello-dot {
color: #C7D2FE;
font-weight: 700;
}
@media (max-width: 640px) {
html body.home .ce-sello-dot { display: none; }
html body.home .ce-sello-container { flex-direction: column; gap: 8px; }
}
/* =====================================================================
2026-06-22 — COMPARISON TABLE Bróker vs Banco
===================================================================== */
html body.home section.ce-comparison-stage {
background: #ffffff !important;
padding-top: clamp(58px, 6.4vw, 96px) !important;
padding-bottom: clamp(58px, 6.4vw, 96px) !important;
}
html body.home .ce-comparison-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(24px, 4vw, 40px);
}
html body.home .ce-comparison-header {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(40px, 5vw, 64px);
}
html body.home .ce-comparison-eyebrow {
display: inline-block;
font-size: 0.6875rem;
font-weight: 700;
color: #1E5FFF;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 12px;
}
html body.home .ce-comparison-title {
font-size: clamp(1.5rem, 2.8vw, 2.125rem);
font-weight: 700;
color: #1A2233;
line-height: 1.2;
letter-spacing: -.02em;
margin: 0 0 12px;
}
html body.home .ce-comparison-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: #1E5FFF;
border-radius: 2px;
margin: 12px auto 0;
}
html body.home .ce-comparison-sub {
font-size: 1rem;
color: #5C6470;
line-height: 1.55;
margin: 0;
}
html body.home .ce-comparison-table {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(16px, 2.5vw, 28px);
}
@media (max-width: 768px) {
html body.home .ce-comparison-table { grid-template-columns: 1fr; }
}
html body.home .ce-comparison-col {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 24px 28px;
box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
html body.home .ce-comparison-col--pos {
background: linear-gradient(180deg, #F5F8FF 0%, #fff 100%);
border-color: #C7D2FE;
box-shadow: 0 4px 20px -10px rgba(30,95,255,.18);
}
html body.home .ce-comparison-col h3 {
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 16px;
letter-spacing: -.01em;
}
html body.home .ce-comparison-col--neg h3 { color: #94A3B8; }
html body.home .ce-comparison-col--pos h3 { color: #1E5FFF; }
html body.home .ce-comparison-col ul {
list-style: none;
padding: 0;
margin: 0;
}
html body.home .ce-comparison-col li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
font-size: 0.9375rem;
color: #1A2233;
line-height: 1.4;
border-top: 1px solid rgba(15,23,42,.04);
}
html body.home .ce-comparison-col li:first-child { border-top: 0; }
html body.home .ce-comparison-col--neg li { color: #64748B; }
html body.home .ce-comparison-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 700;
margin-top: 0;
}
html body.home .ce-comparison-icon.ce-neg {
background: #F1F5F9;
color: #94A3B8;
}
html body.home .ce-comparison-icon.ce-pos {
background: #1E5FFF;
color: #fff;
}
/* =====================================================================
2026-06-22 — LEAD FORM en CTA cinematic (debajo de los 2 botones)
===================================================================== */
html body section.cta-cinematic .ce-lead-form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
gap: 10px;
max-width: 880px;
width: 100%;
box-sizing: border-box;
margin: 24px auto 0;
padding: 14px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
html body section.cta-cinematic .ce-lead-form input,
html body section.cta-cinematic .ce-lead-form select {
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Tablet: 2 cols, botón en su propia fila full-width */
@media (max-width: 920px) {
html body section.cta-cinematic .ce-lead-form {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
html body section.cta-cinematic .ce-lead-form button {
grid-column: 1 / -1;
}
}
/* Mobile: 1 col */
@media (max-width: 560px) {
html body section.cta-cinematic .ce-lead-form {
grid-template-columns: 1fr;
}
}
html body section.cta-cinematic .ce-lead-form input,
html body section.cta-cinematic .ce-lead-form select {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.18);
border-radius: 8px;
padding: 10px 14px;
color: #fff;
font-family: var(--font-titulo, 'Plus Jakarta Sans', sans-serif);
font-size: 0.875rem;
outline: none;
transition: background .25s, border-color .25s;
}
html body section.cta-cinematic .ce-lead-form input::placeholder {
color: rgba(255,255,255,.72); /* 2026-06-24 design-review L3: era .55 tenue → +legible sobre navy */
}
html body section.cta-cinematic .ce-lead-form input:focus,
html body section.cta-cinematic .ce-lead-form select:focus {
background: rgba(255,255,255,.18);
border-color: rgba(255,255,255,.4);
}
html body section.cta-cinematic .ce-lead-form select option {
color: #1A2233;
background: #fff;
}
html body section.cta-cinematic .ce-lead-form button {
background: #fff !important;
color: #0A1733 !important;
border: 0 !important;
border-radius: 8px !important;
padding: 10px 22px !important;
font-weight: 700 !important;
font-size: 0.875rem !important;
cursor: pointer;
transition: background .25s, transform .25s;
white-space: nowrap;
}
html body section.cta-cinematic .ce-lead-form button:hover {
background: #F0F5FF !important;
transform: translateY(-1px);
}
html body section.cta-cinematic .ce-lead-form .ce-lead-ok {
display: none;
grid-column: 1 / -1;
color: #6EE7B7;
font-size: 0.875rem;
text-align: center;
padding: 6px 0 0;
}
/* =====================================================================
2026-06-22 — SIMULADOR INLINE (entre bank-marquee y portafolio)
===================================================================== */
html body.home section.ce-simulator-stage {
background: #F5F7FA !important;
padding-top: clamp(58px, 6.4vw, 96px) !important;
padding-bottom: clamp(58px, 6.4vw, 96px) !important;
}
html body.home .ce-simulator-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(24px, 4vw, 40px);
}
html body.home .ce-simulator-header {
text-align: center;
max-width: 640px;
margin: 0 auto clamp(32px, 4vw, 48px);
}
html body.home .ce-simulator-eyebrow {
display: inline-block;
font-size: 0.6875rem;
font-weight: 700;
color: #1E5FFF;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 12px;
}
html body.home .ce-simulator-title {
font-size: clamp(1.5rem, 2.8vw, 2.125rem);
font-weight: 700;
color: #1A2233;
line-height: 1.2;
letter-spacing: -.02em;
margin: 0 0 12px;
}
html body.home .ce-simulator-sub {
font-size: 0.9375rem;
color: #5C6470;
line-height: 1.55;
margin: 0;
}
html body.home .ce-simulator-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3vw, 40px);
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: clamp(20px, 3vw, 36px);
box-shadow: 0 4px 20px -10px rgba(15,23,42,.08);
}
@media (max-width: 768px) {
html body.home .ce-simulator-grid { grid-template-columns: 1fr; }
}
html body.home .ce-simulator-controls {
display: flex;
flex-direction: column;
gap: 28px;
justify-content: center;
}
/* Strip logos bancos arriba del simulador */
html body.home .ce-sim-banks {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 0 18px;
border-bottom: 1px solid #E5E7EB;
margin-bottom: 8px;
}
html body.home .ce-sim-banks-label {
font-size: 0.6875rem;
font-weight: 700;
color: #64748B;
letter-spacing: .12em;
text-transform: uppercase;
}
html body.home .ce-sim-banks-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 18px 32px;
}
html body.home .ce-sim-banks-list img {
height: 30px;
width: auto;
max-width: 100%;
object-fit: contain;
opacity: 1;
filter: none;
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease;
}
html body.home .ce-sim-banks-list img:hover {
transform: translateY(-3px) scale(1.05);
filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .12));
}
@media (max-width: 600px) {
html body.home .ce-sim-banks-list {
gap: 14px 22px;
}
html body.home .ce-sim-banks-list img { height: 24px; }
}
html body.home .ce-sim-banks-label {
font-size: 0.8125rem !important;
}
html body.home .ce-simulator-field-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
html body.home .ce-simulator-field label {
font-size: 0.875rem;
font-weight: 700;
color: #64748B;
letter-spacing: .08em;
text-transform: uppercase;
}
html body.home .ce-simulator-value {
font-family: var(--font-titulo, 'Plus Jakarta Sans', sans-serif);
font-size: 1.75rem;
font-weight: 700;
color: #1E5FFF;
letter-spacing: -.01em;
}
html body.home .ce-simulator-range {
display: flex;
justify-content: space-between;
font-size: 0.8125rem;
color: #94A3B8;
margin-top: 6px;
}
html body.home .ce-simulator-field input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, #1E5FFF 0%, #1E5FFF var(--p,30%), #E2E8F0 var(--p,30%), #E2E8F0 100%);
outline: none;
cursor: pointer;
}
html body.home .ce-simulator-field input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: #1E5FFF;
border: 3px solid #fff;
cursor: pointer;
box-shadow: 0 2px 8px rgba(30,95,255,.4);
transition: transform .2s;
}
html body.home .ce-simulator-field input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
html body.home .ce-simulator-field input[type="range"]::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: #1E5FFF;
border: 3px solid #fff;
cursor: pointer;
box-shadow: 0 2px 8px rgba(30,95,255,.4);
}
html body.home .ce-simulator-result {
background: linear-gradient(135deg, #0A1733 0%, #1E5FFF 100%);
border-radius: 14px;
padding: clamp(24px, 3vw, 36px);
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
}
html body.home .ce-simulator-result-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
}
html body.home .ce-simulator-result-amount {
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-titulo, 'Plus Jakarta Sans', sans-serif);
font-weight: 800;
font-size: clamp(2.2rem, 4vw, 3.2rem);
letter-spacing: -.025em;
color: #fff;
line-height: 1;
margin: 4px 0 12px;
}
html body.home .ce-simulator-period {
font-size: 0.9375rem;
font-weight: 500;
color: rgba(255,255,255,.65);
letter-spacing: 0;
}
html body.home .ce-simulator-disclaimer {
font-size: 0.75rem;
color: rgba(255,255,255,.7);
line-height: 1.5;
margin: 0 0 16px;
max-width: 320px;
}
/* LTV meter + Warning 90% */
html body.home .ce-simulator-ltv-meter {
margin-top: 8px;
font-size: 0.75rem;
color: #5C6470;
}
html body.home .ce-simulator-ltv-label strong {
color: #1E5FFF;
font-weight: 700;
}
html body.home .ce-simulator-ltv-label strong.ltv-exceeded {
color: #E11D48 !important;
}
html body.home .ce-simulator-warning {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 10px;
padding: 10px 12px;
background: rgba(225, 29, 72, 0.06);
border: 1px solid rgba(225, 29, 72, 0.2);
border-radius: 8px;
color: #BE123C;
font-size: 0.8125rem;
line-height: 1.4;
animation: ceWarningShake .4s cubic-bezier(.36,.07,.19,.97);
}
/* IMPORTANTE: el atributo hidden debe FORZAR display:none sobre el flex */
html body.home .ce-simulator-warning[hidden] {
display: none !important;
}
@keyframes ceWarningShake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-4px); }
40%, 80% { transform: translateX(4px); }
}
html body.home .ce-simulator-warning svg {
flex-shrink: 0;
margin-top: 2px;
}
html body.home .ce-simulator-warning strong {
font-weight: 700;
}
/* Visual feedback en el wrap cuando excede LTV */
html body.home .ce-simulator-grid.ltv-exceeded {
/* Sin cambio dramático — el warning ya es suficiente */
}
/* Breakdown desglose seguros */
html body.home .ce-simulator-breakdown {
list-style: none;
padding: 0;
margin: 0 0 14px;
width: 100%;
max-width: 280px;
display: flex;
flex-direction: column;
gap: 6px;
}
html body.home .ce-simulator-breakdown li {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.8125rem;
color: rgba(255,255,255,.78);
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,.08);
}
html body.home .ce-simulator-breakdown li:last-child {
border-bottom: 0;
}
html body.home .ce-simulator-breakdown li span:last-child {
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
}
/* Divider visual entre seguros y metadatos (CAT/enganche) */
html body.home .ce-simulator-breakdown li.ce-sim-divider {
height: 8px;
padding: 0;
border-bottom: 0;
position: relative;
}
html body.home .ce-simulator-breakdown li.ce-sim-divider::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 40%;
height: 1px;
background: rgba(255,255,255,.15);
transform: translate(-50%, -50%);
}
/* CAT y Enganche: estilo metadato (más pequeño) */
html body.home .ce-simulator-breakdown li.ce-sim-meta {
font-size: 0.75rem;
color: rgba(255,255,255,.65);
padding: 4px 0;
border-bottom: 0;
}
html body.home .ce-simulator-breakdown li.ce-sim-meta span:last-child {
color: rgba(255,255,255,.9);
font-weight: 600;
}
/* ===== Plazo pills (reemplaza el slider) ===== */
html body.home .ce-simulator-plazos {
position: relative;
display: flex;
gap: 6px;
background: #F1F5F9;
border-radius: 999px;
padding: 4px;
width: fit-content;
margin-top: 4px;
}
html body.home .ce-sim-pill {
position: relative;
z-index: 2;
background: transparent;
border: 0;
padding: 9px 22px;
border-radius: 999px;
font-family: var(--font-titulo, 'Plus Jakarta Sans', sans-serif);
font-size: 0.875rem;
font-weight: 600;
color: #64748B;
cursor: pointer;
transition: color .25s cubic-bezier(.16,1,.3,1);
white-space: nowrap;
}
html body.home .ce-sim-pill:hover { color: #1E5FFF; }
html body.home .ce-sim-pill.is-active {
color: #fff;
}
/* Indicator animado que se desliza detrás del pill activo */
html body.home .ce-sim-pill-indicator {
position: absolute;
z-index: 1;
top: 4px;
left: 0;
height: calc(100% - 8px);
background: #1E5FFF;
border-radius: 999px;
transition: transform .35s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1);
will-change: transform, width;
box-shadow: 0 4px 12px -4px rgba(30,95,255,.5);
}
/* ===== Botón Reset ===== */
html body.home .ce-simulator-grid {
position: relative;
}
html body.home .ce-sim-reset {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: 1px solid #E5E7EB;
border-radius: 999px;
padding: 5px 11px;
font-size: 0.6875rem;
font-weight: 600;
color: #64748B;
cursor: pointer;
transition: all .25s ease;
z-index: 10;
letter-spacing: 0.04em;
text-transform: uppercase;
}
html body.home .ce-sim-reset:hover {
background: #F5F7FA;
color: #1E5FFF;
border-color: #C7D2FE;
}
html body.home .ce-sim-reset svg {
transition: transform .6s cubic-bezier(.16,1,.3,1);
}
html body.home .ce-sim-reset.is-spinning svg {
transform: rotate(-360deg);
}
/* Animación sutil del result amount cuando cambia */
html body.home .ce-simulator-result-amount #ceSimMonthly {
transition: color .3s ease;
}
html body.home .ce-simulator-grid.ltv-exceeded #ceSimMonthly {
color: rgba(255,255,255,.5);
}
html body.home .ce-simulator-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: #fff;
color: #0A1733;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
transition: all .25s;
}
html body.home .ce-simulator-cta:hover {
background: #F0F5FF;
transform: translateY(-1px);
}
/* =====================================================================
2026-06-22 — PAQUETE 1-6: ANIMACIONES DE SCROLL (body.home)
1. Section fade-up al entrar viewport
2. Stagger en cards de cada grid
3. Trust cards reveal sequential
4. Compare stair línea conectora animada
5. Scroll progress bar arriba (fixed)
6. Hero scroll indicator (flecha pulsante)
prefers-reduced-motion respetado — todo se vuelve estático.
===================================================================== */
/* (1) Section fade-up base */
html body.home .reveal-on-scroll {
opacity: 0;
transform: translateY(28px);
transition:
opacity .9s cubic-bezier(.16,1,.3,1),
transform .9s cubic-bezier(.16,1,.3,1);
will-change: opacity, transform;
}
html body.home .reveal-on-scroll.is-revealed {
opacity: 1;
transform: none;
}
/* (2/3) Stagger children: cada hijo aparece con offset */
html body.home .stagger-children > * {
opacity: 0;
transform: translateY(20px) scale(.98);
transition:
opacity .7s cubic-bezier(.16,1,.3,1),
transform .7s cubic-bezier(.16,1,.3,1);
will-change: opacity, transform;
}
html body.home .stagger-children.is-revealed > * {
opacity: 1;
transform: none;
}
html body.home .stagger-children.is-revealed > *:nth-child(1) { transition-delay: 0s; }
html body.home .stagger-children.is-revealed > *:nth-child(2) { transition-delay: .08s; }
html body.home .stagger-children.is-revealed > *:nth-child(3) { transition-delay: .16s; }
html body.home .stagger-children.is-revealed > *:nth-child(4) { transition-delay: .24s; }
html body.home .stagger-children.is-revealed > *:nth-child(5) { transition-delay: .32s; }
html body.home .stagger-children.is-revealed > *:nth-child(6) { transition-delay: .40s; }
html body.home .stagger-children.is-revealed > *:nth-child(7) { transition-delay: .48s; }
html body.home .stagger-children.is-revealed > *:nth-child(8) { transition-delay: .56s; }
/* (4) Compare stair: línea conectora horizontal entre las 4 cards */
html body.home section.compare-stair-stage .compare-stair-grid {
position: relative;
}
html body.home section.compare-stair-stage .compare-stair-grid::before {
content: '';
position: absolute;
top: 36px;
left: 8%;
right: 8%;
height: 2px;
background: linear-gradient(90deg,
rgba(30,95,255,.15) 0%,
#1E5FFF 25%,
#6B95FF 60%,
#FF6B47 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.6s cubic-bezier(.16,1,.3,1) .25s;
z-index: 0;
pointer-events: none;
}
html body.home section.compare-stair-stage .compare-stair-grid.is-revealed::before {
transform: scaleX(1);
}
@media (max-width: 768px) {
html body.home section.compare-stair-stage .compare-stair-grid::before { display: none !important; }
}
/* (5) Scroll progress bar — pinned top, fills as user scrolls */
.ce-scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: transparent;
z-index: 10000;
pointer-events: none;
}
.ce-scroll-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #1E5FFF 0%, #6B95FF 50%, #1E5FFF 100%);
background-size: 200% 100%;
animation: progressShimmer 3s linear infinite;
transition: width .12s linear;
}
@keyframes progressShimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* (6) Hero scroll indicator — flecha pulsante abajo del hero (SOLO si NO es static) */
html body.home section.hero-slider:not(.hero-static)::after {
content: '';
position: absolute;
bottom: 28px;
left: 50%;
width: 28px;
height: 28px;
border-right: 2px solid rgba(255,255,255,.55);
border-bottom: 2px solid rgba(255,255,255,.55);
transform: translateX(-50%) rotate(45deg);
animation: heroScrollPulse 2.4s ease-in-out infinite;
z-index: 8;
pointer-events: none;
}
@keyframes heroScrollPulse {
0%, 100% { transform: translate(-50%, 0) rotate(45deg); opacity: .35; }
50% { transform: translate(-50%, 10px) rotate(45deg); opacity: 1; }
}
@media (max-width: 768px) {
html body.home section.hero-slider::after { bottom: 16px; width: 20px; height: 20px; }
}
/* Reduce-motion: cortar todo */
@media (prefers-reduced-motion: reduce) {
html body.home .reveal-on-scroll,
html body.home .stagger-children > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
html body.home section.compare-stair-stage .compare-stair-grid::before {
transform: scaleX(1) !important;
transition: none !important;
}
html body.home section.hero-slider::after { animation: none !important; }
.ce-scroll-progress-fill { animation: none !important; }
}
/* =====================================================================
2026-06-24 — DESIGN REVIEW · fixes Medium (botones · cards · ritmo)
Reporte: .jez/artifacts/design-review.md · DESIGN-SYSTEM.md v2.0
(Navy ya consolidado en token --coppel-navy ~línea 6802.
Íconos portafolio: revertidos emoji→SVG vía script aparte.)
===================================================================== */
/* (M1) Botones: 1 primario canónico = solid pill #1E5FFF.
testimonio-cta era gradient → solid (hero y broker ya unificados en origen). */
html body.home .testimonio-cta {
background: #1E5FFF !important;
background-image: none !important;
border-radius: 999px !important;
font-weight: 700 !important;
}
html body.home .testimonio-cta:hover {
background: #0A4FE0 !important;
background-image: none !important;
}
/* (Nota: el submit del lead-form se deja en su radio 8px a propósito —
debe igualar a los inputs de su fila, no ser un pill suelto.) */
/* (M2) Radio de cards unificado a 12px (DESIGN-SYSTEM §5 corregido: decía 20px,
la realidad era 10/11/12 mezclados). testimonio-card ya era 12. */
html body.home section.portafolio-cards .portafolio-card-v2,
html body.home section.portafolio-cards .portafolio-card-icon-box,
html body.home section.compare-stair-stage .compare-stair-card,
html body.home section.faq-stage .faq-item,
html body.home section.trust-stage article.trust-card {
border-radius: 12px !important;
}
/* (M3) Ritmo vertical: bank-marquee (era 86.4) + broker-explainer (era 79.2)
normalizados a la cadencia dominante ~92px @1440 (clamp 6.4vw). */
html body.home section.bank-marquee,
html body.home section.broker-explainer {
padding-top: clamp(56px, 6.4vw, 96px) !important;
padding-bottom: clamp(56px, 6.4vw, 96px) !important;
}
/* =====================================================================
2026-06-24 — CONÓCENOS (page-id-2869): hero FIJO + sección certificado AHMEX
Scoped a .page-id-2869 / clases propias (NO body.home). Tokens del DESIGN-SYSTEM.
===================================================================== */
/* --- TAREA A: hero fijo retrato de Luis --- */
/* bg-image fija (gana sobre el inline de post_content que apunta al slide viejo) */
html body.page-id-2869 #conocenos-rotating-bg {
background-image: url(/wp-content/uploads/hero-conocenos/conocenos-hero-desktop.jpg) !important;
}
@media (max-width: 768px) {
html body.page-id-2869 #conocenos-rotating-bg {
background-image: url(/wp-content/uploads/hero-conocenos/conocenos-hero-mobile.jpg) !important;
}
}
/* Overlay legibilidad: oscuro a la IZQ (texto) → claro a la DER (cara de Luis) */
/* Hero fijo = sin dots */
/* --- TAREA B: sección certificado AHMEX (2-col + lightbox CSS-only) --- */
.conocenos-cert-stage {
background: #ffffff;
padding: clamp(56px, 7vw, 96px) 0;
}
.conocenos-cert-stage .cert-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.conocenos-cert-stage .cert-visual {
position: relative;
display: block;
border-radius: 20px;
overflow: hidden;
border: 1px solid #E5E7EB;
box-shadow: var(--shadow-lg);
background: #0A1733;
transition: transform .35s var(--expo, cubic-bezier(.16,1,.3,1)), box-shadow .35s var(--expo, cubic-bezier(.16,1,.3,1));
}
.conocenos-cert-stage .cert-visual:hover {
transform: translateY(-4px);
box-shadow: 0 28px 64px -24px rgba(10,23,51,.42);
}
.conocenos-cert-stage .cert-visual img { display: block; width: 100%; height: auto; }
.conocenos-cert-stage .cert-zoom-hint {
position: absolute; bottom: 14px; right: 14px;
background: rgba(10,23,51,.82); color: #fff;
font-size: .75rem; font-weight: 700; letter-spacing: .02em;
padding: 7px 12px; border-radius: 999px; backdrop-filter: blur(6px);
}
.conocenos-cert-stage .cert-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
font-weight: 700; color: #1E5FFF; margin-bottom: 16px;
}
.conocenos-cert-stage .cert-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #1E5FFF; }
.conocenos-cert-stage .cert-title {
font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.15;
letter-spacing: -.025em; color: #0A1733; margin: 0 0 16px; text-wrap: balance;
}
.conocenos-cert-stage .cert-text { font-size: 1.0625rem; line-height: 1.6; color: #475569; margin: 0 0 20px; }
.conocenos-cert-stage .cert-bullets { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.conocenos-cert-stage .cert-bullets li { position: relative; padding-left: 30px; font-size: 1rem; color: #0A1733; line-height: 1.45; }
.conocenos-cert-stage .cert-bullets li::before {
content: '✓'; position: absolute; left: 0; top: 1px;
width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800; color: #1E5FFF; background: #E8F0FF; border-radius: 50%;
}
/* Lightbox CSS-only (:target) — 2026-07-10: el JS lo portalea a
(dentro de secciones con transform el fixed se anclaba mal) */
.cert-lightbox {
position: fixed; inset: 0; z-index: 999999; display: none;
align-items: center; justify-content: center;
background: rgba(5,12,30,.94); padding: 24px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.cert-lightbox:target { display: flex; }
.cert-lightbox img {
max-width: min(92vw, 820px); max-height: 90vh; width: auto; height: auto;
border-radius: 12px; box-shadow: 0 40px 100px -20px rgba(0,0,0,.6);
}
.cert-lightbox-close {
/* 2026-07-10: absolute DENTRO del overlay (ya portaleado a body) —
siempre sobre el fondo oscuro, nunca cortada ni sobre el header. */
position: absolute !important;
top: calc(16px + env(safe-area-inset-top, 0px)) !important;
right: calc(16px + env(safe-area-inset-right, 0px)) !important;
width: 48px !important; height: 48px !important;
min-width: 48px !important; padding: 0 !important;
display: flex !important; align-items: center; justify-content: center;
font-size: 2rem; font-weight: 400; line-height: 1 !important;
color: #fff !important; text-decoration: none !important;
border-radius: 50% !important;
background: rgba(10, 15, 30, .82) !important;
border: 1.5px solid rgba(255, 255, 255, .55) !important;
box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .5);
z-index: 2;
transition: background .2s ease, transform .2s ease;
-webkit-tap-highlight-color: transparent;
}
.cert-lightbox-close:hover,
.cert-lightbox-close:active {
background: rgba(255, 60, 60, .92) !important;
border-color: rgba(255, 255, 255, .8) !important;
transform: scale(1.06);
}
@media (max-width: 768px) {
.conocenos-cert-stage .cert-container { grid-template-columns: 1fr; gap: 28px; }
}
/* =====================================================================
2026-06-24 — CONGRUENCIA DE HEROS: toda hero h1 = base del HOME
(.hero-static-title: clamp(2.2rem,4.2vw,3.4rem) / 700 / -.025em / lh 1.12).
Aplica a conócenos (.hero-slide h1) y product pages (.product-hero / .hero-cinematic).
NO se toca color: los heros sobre foto siguen blancos. Gana por specificity + orden.
===================================================================== */
html body.page-id-2869 .hero-slide h1,
html body .product-hero h1,
html body .hero-cinematic h1 {
font-size: clamp(2.2rem, 4.2vw, 3.4rem) !important;
font-weight: 700 !important;
letter-spacing: -0.025em !important;
line-height: 1.12 !important;
}
/* =====================================================================
2026-06-24 — CONÓCENOS hero congruente con HOME: botones pill + columna texto
===================================================================== */
/* CTAs = pill 999px del home (se mantienen sobre foto: borde claro en secundario) */
/* Texto en columna izquierda como el home (desktop) → misma ubicación/apilado.
Luis queda visible a la derecha de la foto. */
@media (min-width: 769px) {
html body.page-id-2869 .hero-slide h1,
html body.page-id-2869 .hero-slide .hero-slide-sub {
max-width: 560px !important;
}
}
/* =====================================================================
2026-06-24 — Sección "Nuestros asesores" (conócenos), tokens DESIGN-SYSTEM
===================================================================== */
/* =====================================================================
2026-06-24 — Animación de entrada hero conócenos (stagger fade-up).
Scoped a page-id-2869 (no afecta home). Respeta prefers-reduced-motion.
===================================================================== */
@media (prefers-reduced-motion: no-preference) {
html body.page-id-2869 .hero-static-text > * {
opacity: 0;
transform: translateY(20px);
animation: ceHeroIn .8s cubic-bezier(.2,.7,.2,1) forwards;
}
html body.page-id-2869 .hero-static-eyebrow { animation-delay: .10s; }
html body.page-id-2869 .hero-static-title { animation-delay: .22s; }
html body.page-id-2869 .hero-static-checks { animation-delay: .36s; }
html body.page-id-2869 .hero-static-cta-row { animation-delay: .50s; }
html body.page-id-2869 .hero-static-image-wrap {
opacity: 0;
transform: scale(.96);
animation: ceHeroImgIn 1s cubic-bezier(.2,.7,.2,1) .30s forwards;
}
}
@keyframes ceHeroIn { to { opacity: 1; transform: translateY(0); } }
@keyframes ceHeroImgIn { to { opacity: 1; transform: scale(1); } }
/* =====================================================================
2026-06-24 — Animación de entrada SITE-WIDE en TODOS los heros hero-static
(antes solo conócenos). Stagger fade-up + zoom de imagen. FOUC-safe:
solo en prefers-reduced-motion:no-preference (reduced-motion = visible sin anim).
===================================================================== */
@media (prefers-reduced-motion: no-preference) {
html body section.hero-slider.hero-static .hero-static-text > *,
html body section.hero-slider.hero-static .hec-inner > * {
opacity: 0;
transform: translateY(20px);
animation: ceHeroIn .8s cubic-bezier(.2,.7,.2,1) forwards;
}
html body section.hero-slider.hero-static .hero-static-eyebrow { animation-delay: .08s; }
html body section.hero-slider.hero-static .hero-static-title { animation-delay: .20s; }
html body section.hero-slider.hero-static .hero-static-sub,
html body section.hero-slider.hero-static .hec-sub { animation-delay: .32s; }
html body section.hero-slider.hero-static .hero-static-checks { animation-delay: .40s; }
html body section.hero-slider.hero-static .hero-static-cta-row,
html body section.hero-slider.hero-static .ce-lead-form { animation-delay: .48s; }
html body section.hero-slider.hero-static .hero-static-image-wrap,
html body section.hero-slider.hero-static .hero-static-image-circle {
opacity: 0;
transform: scale(.96);
animation: ceHeroImgIn 1s cubic-bezier(.2,.7,.2,1) .25s forwards;
}
}
/* =====================================================================
2026-06-24 — F1 · TOKENS TIPOGRÁFICOS ÚNICOS (reestructura "como el home")
Unifica H2 de sección + eyebrow en TODAS las páginas a la escala del home.
Root-independiente (px+vw). Excepciones: brand-statement (gigante) y heros (h1).
===================================================================== */
:root {
--fs-section-h2: clamp(26px, 3.2vw, 34px); /* = home (34px desktop) */
--fs-eyebrow: clamp(12px, 0.9vw, 14px); /* = home (14px desktop) */
}
/* H2 de sección — unificado (excluye brand-statement gigante) */
html body section h2:not(.brand-statement-headline):not(.brand-statement-title) {
font-size: var(--fs-section-h2) !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
line-height: 1.18 !important;
}
/* Brand statement conserva su escala editorial gigante */
html body .brand-statement h2,
html body .brand-statement-headline {
font-size: clamp(6.5rem, 18vw, 16rem) !important;
}
/* Eyebrow — tamaño/peso unificado (se respeta case/tracking propio de cada uno) */
html body .section-eyebrow,
html body .product-eyebrow,
html body .alianzas-eyebrow,
html body .trust-eyebrow,
html body .testimonios-eyebrow,
html body .faq-eyebrow,
html body .portafolio-eyebrow,
html body .bank-marquee-eyebrow,
html body .calc-panel-eyebrow,
html body .calc-result-eyebrow,
html body .equipo-eyebrow,
html body .cert-eyebrow,
html body .broker-explainer-eyebrow,
html body .hero-static-eyebrow {
font-size: var(--fs-eyebrow) !important;
font-weight: 700 !important;
}
/* =====================================================================
2026-06-24 — F7 · H1 hero mobile congruente (todos = escala del home ~26px @375)
Desktop ya está unificado en 54px; esto alinea SOLO mobile (product 32→26).
===================================================================== */
@media (max-width: 768px) {
html body .hero-static-title,
html body .product-hero h1,
html body .hero-cinematic h1,
html body.page-id-2869 .hero-slide h1 {
font-size: clamp(24px, 6.9vw, 30px) !important;
line-height: 1.12 !important;
letter-spacing: -0.02em !important;
}
}
/* =====================================================================
2026-06-24 — HUBS: foto-card grid (productos) — patrón editorial
===================================================================== */
.hub-grid-v2 {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: clamp(20px, 2.4vw, 28px);
max-width: 1100px;
margin: 0 auto;
}
.hub-card-v2 {
display: flex; flex-direction: column;
background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
overflow: hidden; box-shadow: var(--shadow-sm);
text-decoration: none; color: inherit;
transition: transform .35s var(--expo, cubic-bezier(.16,1,.3,1)), box-shadow .35s var(--expo, cubic-bezier(.16,1,.3,1));
}
.hub-card-v2:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hub-card-v2 .hcv-photo { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.hub-card-v2 .hcv-body { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hub-card-v2 .hcv-tag { align-self: flex-start; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1E5FFF; background: #EEF2FF; padding: 4px 10px; border-radius: 999px; }
.hub-card-v2 .hcv-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.125rem; color: #0A1733; letter-spacing: -.01em; margin: 2px 0 0; line-height: 1.2; }
.hub-card-v2 .hcv-desc { font-size: .9rem; line-height: 1.5; color: #475569; flex: 1; margin: 0; }
.hub-card-v2 .hcv-cta { font-size: .8125rem; font-weight: 700; color: #1E5FFF; margin-top: 4px; }
.hub-card-v2 .hcv-cta span { display: inline-block; transition: transform .25s ease; }
.hub-card-v2:hover .hcv-cta span { transform: translateX(3px); }
@media (max-width: 900px) { .hub-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hub-grid-v2 { grid-template-columns: 1fr; max-width: 360px; } }
/* =====================================================================
2026-06-24 — CONGRUENCIA PREMIUM (design-review): cards · sombras · botones · eyebrow
===================================================================== */
/* (1) Radio de cards de CONTENIDO unificado a 12px (NO frames de imagen: retrato/cert/círculo) */
html body .card,
html body .step,
html body .callout-card,
html body .req-card,
html body .req-phase-card,
html body .bank-logo-card,
html body .yt-card,
html body .adq-esquema-card,
html body .blog-card {
border-radius: 12px !important;
}
/* (2) Sombras de card unificadas (reposo shadow-sm, hover shadow-md) */
html body .card,
html body .step,
html body .callout-card,
html body .req-card,
html body .req-phase-card,
html body .adq-esquema-card,
html body .yt-card,
html body .blog-card {
box-shadow: var(--shadow-sm) !important;
}
html body .card:hover,
html body .step:hover,
html body .callout-card:hover,
html body .adq-esquema-card:hover,
html body .yt-card:hover,
html body .blog-card:hover {
box-shadow: var(--shadow-md) !important;
}
/* (3) CTAs azules de página (Gutenberg buttons) → pill 999px */
html body .wp-block-button__link {
border-radius: 999px !important;
}
/* (5) Eyebrow unificado: heros a UPPERCASE + tracking (igualan a las secciones) */
html body .hero-static-eyebrow {
text-transform: uppercase !important;
letter-spacing: .12em !important;
}
/* =====================================================================
2026-06-24 — FASE 1A · Calculadora: cards editoriales (entrada a calc)
===================================================================== */
.calc-entries { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; }
.calc-entry-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 32px 28px; text-decoration: none; color: inherit; transition: transform .35s var(--expo, cubic-bezier(.16,1,.3,1)), box-shadow .35s var(--expo, cubic-bezier(.16,1,.3,1)); }
.calc-entry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.calc-entry-card .cec-icon { font-size: 2rem; margin-bottom: 10px; }
.calc-entry-card .cec-eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1E5FFF; margin-bottom: 12px; }
.calc-entry-card.is-pyme .cec-eyebrow { color: #10B981; }
.calc-entry-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.02em; color: #0A1733; margin: 0 0 12px; }
.calc-entry-card p { font-size: .9375rem; line-height: 1.55; color: #475569; margin: 0 0 18px; }
.calc-entry-card .cec-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.calc-entry-card .cec-tags span { padding: 5px 12px; background: #EEF2FF; border-radius: 999px; font-size: .75rem; color: #1E5FFF; font-weight: 600; }
.calc-entry-card.is-pyme .cec-tags span { background: #E7F8F1; color: #10B981; }
.calc-entry-card .cec-cta { margin-top: auto; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: #1E5FFF; font-size: .9375rem; }
.calc-entry-card.is-pyme .cec-cta { color: #10B981; }
/* hero centrado (calc/blog): reusa la sección hero-static (bg blanco + clearance) sin grid */
.hero-editorial-center { text-align: center; }
.hero-editorial-center .hec-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.hero-editorial-center .hero-static-title { max-width: none !important; }
.hero-editorial-center .hec-sub { font-size: 1.0625rem; line-height: 1.6; color: #475569; max-width: 580px; margin: 14px auto 0; }
@media (max-width: 680px) { .calc-entries { grid-template-columns: 1fr; } }
/* 2026-06-24 — Hero COMPACTO sub-calculadoras (/calculadora/hipotecaria · /pyme).
Mismo lenguaje editorial que /calculadora/ pero slim → no repetir el hero grande. */
html body section.hero-slider.hero-static.is-calc-sub {
padding: clamp(138px, 13vw, 168px) clamp(24px, 4vw, 40px) clamp(28px, 4vw, 44px) !important;
}
.hero-editorial-center.is-calc-sub .hec-inner { max-width: 680px; }
.hero-editorial-center.is-calc-sub .hero-static-title { font-size: clamp(26px, 3.2vw, 38px) !important; }
.hero-editorial-center.is-calc-sub .hec-sub { font-size: .9875rem; margin-top: 10px; }
@media (max-width: 768px) {
html body section.hero-slider.hero-static.is-calc-sub {
padding: clamp(116px, 26vw, 140px) 20px clamp(22px, 6vw, 32px) !important;
}
.hero-editorial-center.is-calc-sub .hero-static-title { font-size: clamp(22px, 6.2vw, 28px) !important; }
}
/* 2026-06-25 — FASE 1B · Blog placeholder mejorado: emoji visible + radial accent + pattern */
.blog-card-thumb--empty {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.blog-card-thumb--empty::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, currentColor 0%, transparent 45%),
radial-gradient(circle at 80% 70%, currentColor 0%, transparent 50%);
opacity: .08;
pointer-events: none;
}
.blog-card-thumb--empty::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .07) 1px, transparent 0);
background-size: 20px 20px;
opacity: .6;
pointer-events: none;
}
.blog-card-thumb-emoji {
font-size: 4.5rem;
line-height: 1;
opacity: .92;
filter: drop-shadow(0 6px 18px rgba(15, 23, 42, .15));
position: relative;
z-index: 2;
transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.blog-card:hover .blog-card-thumb-emoji {
transform: scale(1.12) rotate(-3deg);
}
/* =====================================================================
2026-06-24 — FASE 5 POLISH
(A) Reveals on-scroll páginas internas — FOUC-safe: el estado oculto
SOLO existe cuando el JS marca body.ce-reveal-on. Sin JS = visible.
(B) Accesibilidad — focus ring azul SOLO en navegación por teclado.
===================================================================== */
/* (A) Reveals internos */
html body.ce-reveal-on .ce-reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity .8s cubic-bezier(.16,1,.3,1),
transform .8s cubic-bezier(.16,1,.3,1);
will-change: opacity, transform;
}
html body.ce-reveal-on .ce-reveal.is-revealed {
opacity: 1;
transform: none;
will-change: auto;
}
/* 2026-07-01 Luis: fast-scroll → instant reveal, sin animación
Cuando body tiene .ce-fast-scrolling, cualquier reveal se muestra sin transition.
El JS agrega/quita esta clase según la velocidad del scroll (>700px/s). */
html body.ce-fast-scrolling .ce-reveal,
html body.ce-fast-scrolling [data-cinema],
html body.ce-fast-scrolling [data-cinema-stagger] > * {
transition: none !important;
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: inset(0 0 0 0) !important;
}
/* =====================================================================
2026-07-01 Luis: Emoji en .grid-3 .card + hover animation premium
Inyectado por JS (ceInjectCardEmojis). Anima al hover con bounce scale.
===================================================================== */
html body .grid-3 .card .card-emoji {
font-size: clamp(2.25rem, 3vw, 2.75rem);
line-height: 1;
margin-bottom: 14px;
display: inline-block;
transform-origin: center;
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
filter: drop-shadow(0 4px 8px rgba(10, 23, 51, .12));
}
/* Card hover: emoji bounces + scales up */
html body .grid-3 .card:hover .card-emoji {
transform: scale(1.15) translateY(-2px) rotate(-4deg);
}
/* Refuerzo del hover en .card (ya existe base pero uniformo con .step) */
html body .grid-3 .card {
transition:
transform .4s cubic-bezier(.16, 1, .3, 1),
box-shadow .35s ease,
border-color .25s ease !important;
position: relative;
overflow: hidden;
}
html body .grid-3 .card:hover {
transform: translateY(-6px) !important;
border-color: rgba(30, 95, 255, .28) !important;
box-shadow:
0 16px 40px -8px rgba(30, 95, 255, .18),
0 28px 70px -20px rgba(10, 23, 51, .20) !important;
}
/* Gradient accent bar top (subtle premium touch) */
html body .grid-3 .card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg,
var(--azul-electrico) 0%,
#6B95FF 55%,
transparent 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform .5s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
html body .grid-3 .card:hover::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
html body .grid-3 .card .card-emoji,
html body .grid-3 .card,
html body .grid-3 .card::after {
transition: none !important;
}
html body .grid-3 .card:hover .card-emoji {
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
html body.ce-reveal-on .ce-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* (B) Focus-visible accesible (teclado). No afecta a usuarios con mouse. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [tabindex]:focus-visible,
html body .wp-block-button__link:focus-visible,
html body .hub-card-v2:focus-visible,
html body .calc-entry-card:focus-visible,
html body .asesor-card:focus-visible {
outline: 3px solid #1E5FFF !important;
outline-offset: 3px !important;
}
/* Quita el outline por defecto cuando el foco NO viene de teclado (mouse/touch) */
html body a:focus:not(:focus-visible),
html body button:focus:not(:focus-visible),
html body .wp-block-button__link:focus:not(:focus-visible) {
outline: none;
}
/* =====================================================================
2026-06-24 — FIXES AUDITORÍA TOTAL (HIGH + MEDIUM)
===================================================================== */
/* [HIGH] Ocultar