/* //cambio (2026-08-13): estilos de la landing FAL 2 — rediseño del Figma "Propuesta nueva web 4" (frame 3553:1856). CSS PLANO: se sirve directo via wp_enqueue_style (gst_enqueue_fal2_assets), NO pasa por webpack — editarlo no requiere `npm run build`. Carga SOLO en page-fal2.php. fal.css NO se encola en esta página, así que este archivo es autosuficiente: incluye navbar (header-fal.php, compartido con la v1) y footer (footer-fal.php). Las clases coinciden con inc/fal2/*.php. Valores extraídos del Figma por API REST (medidos a 1920px y convertidos con clamp() acotado). DOCTRINA DEL 125% (FAL-ESTADO-Y-PENDIENTES.md, sección "El tema del 125%"): una notebook de 1920px físicos con escalado 125% reporta ~1536 CSS px, y para el CSS eso es una pantalla más chica. Por eso acá: html a 16px fijo, conversión sobre 1920, clamp() en vez de valores fijos, SUBGRID en lugar de min-height para emparejar alturas, y breakpoints -xl (no -xxl). Verificar SIEMPRE midiendo en 1920 / 1382 (=125% real del usuario) / 1200 / 768 / 486. */ /* //cambio: CRÍTICO — idéntico a fal.css:18. El tema escala el font-size del de forma fluida (app.css: a 1536px da ~18.4px, no 16) e infla TODOS los rem de la landing; y dist/css/app.css declara html{letter-spacing:-.04em}, que apretaba todo el cuerpo -0.8px por carácter. Como fal2.css solo carga en page-fal2.php, esto no afecta al resto del sitio. */ html { font-size: 16px; letter-spacing: normal; } /* //cambio (2026-08-20d): reportado en iPhone — una "barra blanca" a la derecha, en TODA la landing, tapando el contenido: es deriva horizontal de la pagina entera. Elementos que sobresalen del viewport (las elipses de blur del cronograma miden 516-570px con offsets negativos; en un viewport de 390 desbordan a la derecha) ensanchan la pagina y Safari deja arrastrarla hacia ese vacio blanco, que queda cubriendo el borde derecho de TODAS las secciones. overflow-x: clip corta cualquier desborde lateral SIN crear scroll container (position: sticky del header sigue funcionando, cosa que overflow hidden no garantiza). Soportado por iOS 16+/Chrome 90+. Solo afecta esta landing: fal2.css carga unicamente en page-fal2.php. */ html, body { overflow-x: clip; } /* ============================================================ TOKENS ============================================================ */ :root { /* --- Colores (los compartidos con la v1 conservan el nombre de variable) --- */ --color-text: #000000; --color-primary: #003da0; --color-cta: #003aac; /* botones pill — OJO: distinto de --color-primary (Figma) */ --color-accent: #1d68e2; --color-accent-cyan: #198fd9; /* títulos de beneficios y labels de gestión */ --color-navy: #27396a; --color-text-muted: #55585a; --color-text-soft: #41474f; --color-tab-inactive: #6b7280; --color-input-line: #216095; --color-checkbox-border: #a5a6a7; --color-bg: #ffffff; --color-card-soft: rgba(187, 202, 232, 0.3); --color-card-soft-10: rgba(187, 202, 232, 0.1); --color-card-soft-60: rgba(187, 202, 232, 0.6); --color-card-border: #bbcae8; --color-chip-border: rgba(194, 199, 208, 0.3); --color-bg-tint: rgba(187, 202, 232, 0.2); --color-bento-gray: #ececed; --color-bento-celeste: #bbcae8; --color-track: #d3daea; --overlay-form: rgba(0, 61, 160, 0.32); --gradient-hero-overlay: linear-gradient(180deg, rgba(43, 37, 35, 0.6) 0%, rgba(43, 37, 35, 0.45) 43%, rgba(0, 0, 0, 0.25) 100%); /* //cambio (2026-08-13): gradiente azul reproducido de la textura real del Figma (imageRef d0952902), muestreando sus colores: el foco de luz está ARRIBA A LA IZQUIERDA (#0064f8) y se apaga hacia abajo a la derecha (#000116). El valor anterior tenía el foco a la derecha y por eso no se parecía: radial-gradient(120% 160% at 85% 20%, #1d68e2 0%, #0a4ecf 38%, #003da0 72%, #002a70 100%); Se usa en la sección "¿Cómo funciona el FAL?" Y en el banner "¿Tenés dudas sobre la nueva ley?", que en el Figma comparten exactamente el mismo fondo. */ --gradient-como: radial-gradient(125% 130% at 24% 4%, #0064f8 0%, #0153db 15%, #0233b8 32%, #001ea2 50%, #001179 72%, #000a3d 89%, #000116 100%); --shadow-tile: 0 2px 4px -2px rgba(0, 0, 0, 0.06), 0 4px 8px -2px rgba(0, 0, 0, 0.1); --shadow-chip: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-form: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08); /* --- Tipografía --- */ --font-title: "Cocogoose Pro", sans-serif; --font-body: "Noto Sans", sans-serif; --font-dates: "Plus Jakarta Sans", sans-serif; /* fechas del cronograma (Figma) */ --fs-hero: clamp(2rem, 2.4vw, 2.875rem); /* 46px @1920 */ /* //cambio (2026-08-18d): mínimo 26->32 — el diseño mobile (Figma 4018:1273, canvas 540) usa los títulos de sección a 32px. Valor anterior: clamp(1.625rem, 1.875vw, 2.25rem). */ --fs-h2: clamp(2rem, 1.875vw, 2.25rem); /* 36 */ --fs-h3: clamp(1.5rem, 1.667vw, 2rem); /* 32 */ --fs-card-title: clamp(1.375rem, 1.458vw, 1.75rem); /* 28 */ --fs-num-card: clamp(1.25rem, 1.25vw, 1.5rem); /* 24 */ /* //cambio (2026-08-18d): mínimo 17->16 — las bajadas del mobile van a 16px en el Figma. Valor anterior: clamp(1.0625rem, 1.042vw, 1.25rem). */ --fs-body-lg: clamp(1rem, 1.042vw, 1.25rem);/* 20 */ --fs-body: 1rem; --fs-chip-date: clamp(1.5rem, 1.875vw, 2.25rem); /* 36 */ --fs-display-96: clamp(3rem, 5vw, 6rem); --fs-display-80: clamp(2.75rem, 4.167vw, 5rem); --fs-num-48: clamp(2rem, 2.5vw, 3rem); --fs-stat-64: clamp(2.25rem, 3.333vw, 4rem); /* --- Layout --- */ --radius-card: 12px; --radius-lg: 24px; --radius-hero: 40px; --radius-pill: 100px; --container: 1204px; --container-wide: 1444px; --pad-section-y: clamp(3rem, 4.167vw, 5rem); /* 80 @1920 */ --pad-section-x: clamp(1rem, 3.333vw, 4rem); /* 64 @1920 */ --site-header-height: 5.5rem; /* la actualiza fal2.js (initSiteHeaderOffset) */ } /* ============================================================ BASE ============================================================ */ body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); } .font-title { font-family: var(--font-title); } .fal2-container { max-width: var(--container); margin-inline: auto; } /* //cambio: compensa el header sticky al saltar por anchor. La altura real la escribe fal2.js. */ #hero, #reforma, #el-fal, #como-funciona, #gestion, #calculadora, #respaldo, #contacto { scroll-margin-top: calc(var(--site-header-height, 90px) + 1rem); } .fal2-section { padding: var(--pad-section-y) var(--pad-section-x); } .fal2-section-header { max-width: 1044px; margin-inline: auto; margin-bottom: clamp(2rem, 3.125vw, 3.75rem); } .fal2-header-left { margin-inline: 0; text-align: left; } .fal2-h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-primary); font-weight: 300; margin-bottom: 2rem; } /* //cambio: en el Figma el "resaltado" de los títulos NO es color: es peso (Cocogoose 350 sobre 300). Por eso los campos de título admiten y acá se traduce a font-weight. */ .fal2-h2 strong, .fal2-h3 strong { font-weight: 350; } .fal2-h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-primary); font-weight: 300; } .fal2-section-sub { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body-lg); line-height: 1.5; color: var(--color-text-muted); max-width: 682px; margin-inline: auto; } .fal2-sub-title { font-family: var(--font-title); } /* bajadas en Cocogoose (calculadora/respaldo) */ .fal2-sub-light { color: rgba(255, 255, 255, 0.95); } .fal2-eyebrow { font-weight: 300; font-size: var(--fs-body-lg); color: var(--color-primary); margin-bottom: 1rem; } .text-white { color: #fff; } /* ============================================================ BOTONES — pill + círculo blanco con flecha (Figma) ============================================================ */ .btn-fal2-primary, .btn-fal2-outline-light, .site-header .btn-fal-primary { display: inline-flex; align-items: center; gap: 12px; padding: 4px 4px 4px 24px; border-radius: var(--radius-pill); font-family: var(--font-title); font-weight: 350; font-size: 0.875rem; line-height: 20px; letter-spacing: -0.01em; text-decoration: none; transition: transform 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out; /* //cambio: fixes de la auditoría de la v1 (items 1-3): sin --bs-btn-active-* el botón quedaba invisible durante el click, y sin --bs-btn-focus-shadow-rgb no había anillo de foco. */ --bs-btn-focus-shadow-rgb: 0, 61, 160; } .btn-fal2-primary, .site-header .btn-fal-primary { background: var(--color-cta); color: #fff; border: 0; --bs-btn-active-bg: #00308f; --bs-btn-active-border-color: #00308f; --bs-btn-active-color: #fff; } .btn-fal2-outline-light { background: transparent; color: #fff; border: 1.5px solid #fff; --bs-btn-active-bg: rgba(255, 255, 255, 0.15); --bs-btn-active-border-color: #fff; --bs-btn-active-color: #fff; } /* //cambio: hover pedido en el comentario del Figma — "escala sutil (scale(1.03)), cambio de color de fondo y elevación de la sombra, con curva ease-out". */ .btn-fal2-primary:hover, .site-header .btn-fal-primary:hover { transform: scale(1.03); background: #0d4cc4; color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 58, 172, 0.55); } .btn-fal2-outline-light:hover { transform: scale(1.03); background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35); } .btn-fal2-primary:focus-visible, .btn-fal2-outline-light:focus-visible, .site-header .btn-fal-primary:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(0, 61, 160, 0.4); } .btn-icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--color-cta); flex: 0 0 auto; } /* //cambio (2026-08-20c): al hacer hover sobre los botones pill, la flecha diagonal gira 45 grados y queda apuntando a la DERECHA. Aplica a todos los pill de la landing (hero, CTAs de seccion, chip del cronograma) para que el gesto sea consistente. */ .btn-icon-circle svg, .fal2-chip-arrow svg { transition: transform 0.25s ease-out; } .btn-fal2-primary:hover .btn-icon-circle svg, .btn-fal2-outline-light:hover .btn-icon-circle svg, a.fal2-chip-date:hover .fal2-chip-arrow svg { transform: rotate(45deg); } .fal2-cta-row { display: flex; justify-content: center; margin-top: clamp(1.5rem, 2.083vw, 2.5rem); } /* ============================================================ NAVBAR — markup de layout/header-fal.php (compartido con la v1), re-estilizado como la card glass del Figma 3553:1867. ============================================================ */ .site-header { position: sticky; top: 0; z-index: 1030; padding: 0.5rem 24px; background: transparent; /* //cambio: comentario del Figma — "Revelado del Header (0.0s-0.3s): fade-in acompañado de un leve desplazamiento hacia abajo (translateY(-10px) -> 0)". */ animation: fal2-header-in 0.3s ease-out both; } .site-header .container { max-width: var(--container-wide); padding: 0; } .navbar-glass { /* //cambio (2026-08-20c): 0.4 -> 0.78. Reportado: el glass al 40% era demasiado transparente con el header sticky sobre el contenido. VERIFICADO en el Figma (3932:61): el diseno SIGUE en 40% — esta correccion es una decision del proyecto, NO viene del Figma. El blur se mantiene. */ /* background: rgba(255, 255, 255, 0.4); */ /* //cambio (2026-08-28): 0.78 -> 0.91, valor elegido por el usuario probando en DevTools ("dejemoslo en 0.91") — nav mas opaco/solido. Valor anterior: 0.78. */ /* background: rgba(255, 255, 255, 0.78); */ background: rgba(255, 255, 255, 0.91); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 8px; padding: 0.75rem 24px; } .navbar-brand img { width: 123px; height: 45px; } .nav-link-custom { font-family: var(--font-title); font-weight: 300; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; } .nav-link-custom:hover, .nav-link-custom.active { color: var(--color-primary); } /* //cambio: fix de la auditoría de la v1 (item 5) — los links del nav no tenían foco visible. */ .nav-link-custom:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(0, 61, 160, 0.4); border-radius: 4px; } .navbar-nav { gap: 20px; } /* //cambio: el CTA del header viene del markup de la v1 (.btn-fal-primary con un (rasters FA del Figma) — el ancho lo trae el atributo width de cada uno. Valor anterior: solo svg, flex 0 0 40px. */ .fal2-como-rate svg, .fal2-como-rate .fal2-como-ico { flex: 0 0 auto; height: auto; } .fal2-como-rate p { font-weight: 300; font-size: clamp(1rem, 0.938vw, 1.125rem); line-height: 1.5; color: var(--color-primary); margin: 0; } .fal2-como-rate p strong { font-weight: 350; } .fal2-como-box { background: var(--color-card-soft); border-radius: var(--radius-card); padding: 24px; } .fal2-como-box-title { font-weight: 350; font-size: 1rem; line-height: 1.5; color: var(--color-primary); margin: 0 0 1rem; } /* //cambio (2026-08-24c): 12 -> 16, el gap de la caja en el Figma */ .fal2-como-infobox { display: flex; gap: 16px; align-items: flex-start; } .fal2-como-infobox svg, .fal2-como-infobox .fal2-como-ico { flex: 0 0 auto; height: auto; } /* //cambio (2026-08-18): ídem íconos img. Antes: svg flex 0 0 40px */ .fal2-como-infobox .fal2-como-box-title { font-size: clamp(1rem, 0.938vw, 1.125rem); margin-bottom: 0.25rem; } .fal2-como-box-text { font-weight: 300; font-size: 0.875rem; line-height: 1.6; color: var(--color-primary); margin: 0; } .fal2-como-media { min-height: 300px; } .fal2-como-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ GESTIÓN — Figma 3673:4490 ============================================================ */ .fal2-gestion-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.25vw, 1.5rem); } /* //cambio (2026-08-28c): reportado — el banner "¿Queres conocer...?" y el bento se veian del MISMO largo que gestion, y en el layout nuevo (4518:72) NO lo son: gestion se ENSANCHO a 1494 (titulo + fila de 3 cards de 482 con gap 24 = 1494 exacto) mientras banner y bento siguen en 1204 — la jerarquia de anchos es parte del diseno. Solo desktop de 3 columnas (>=992); en mobile el carrusel no cambia. El gap pasa a 24 fijo dentro del override porque el container fijo de 1494 se llena a ~1600 de viewport y el clamp sobre 1920 lo dejaba corto. */ @media (min-width: 992px) { /* //cambio (2026-08-31): reportado — el tope pelado de 1494 en laptop (~1382/1536 de viewport) dejaba gestion casi edge-to-edge (solo quedaba el padding de seccion, ~46-51px por lado): misma trampa que el footer del 28d. Se aplica la forma correcta anotada en aquel revert: min() contra el ancho disponible. A 1920 sigue dando 1494 exacto (Figma 3932:554 y 4518:72 coinciden: contenido 1494 con 213 de margen); a 1536 da ~1354 (margen ~91/lado) y a 1382 da ~1210 (margen ~86/lado) — sigue mas ancha que banner/bento (1204), jerarquia intacta, pero ya no pegada a los bordes. Valor anterior: max-width: 1494px; */ #gestion .fal2-container { max-width: min(1494px, calc(100% - 5rem)); } #gestion .fal2-gestion-row { gap: 24px; } } .fal2-gestion-card { /* //cambio (2026-08-18): Figma v5 — las cards pasan a radius 24. Valor anterior: var(--radius-card) (12px). */ /* border-radius: var(--radius-card); */ border-radius: var(--radius-lg); border-color: rgba(22, 22, 22, 0.1); padding: clamp(1.5rem, 1.667vw, 2rem) clamp(1.25rem, 1.25vw, 1.5rem); row-gap: 1.25rem; } /* //cambio (2026-08-13): los números van en CYAN. Valor anterior: var(--color-primary) (#003da0). En el Figma hay dos versiones de estas cards: la oculta usa #003da0 y la VISIBLE usa #198fd9. Me había guiado por la oculta. */ .fal2-gestion-num { font-weight: 200; font-size: var(--fs-num-48); line-height: 1.16; letter-spacing: -0.02em; color: var(--color-accent-cyan); } .fal2-gestion-title { font-weight: 350; font-size: var(--fs-num-card); line-height: 1.2; letter-spacing: -0.03em; color: var(--color-primary); margin: 0 0 1rem; } .fal2-gestion-items { display: grid; gap: 10px; } .fal2-gestion-item { display: grid; gap: 2px; font-size: 1rem; line-height: 1.5; letter-spacing: -0.02em; color: var(--color-text-muted); } .fal2-gestion-item.has-label { font-size: 0.875rem; } /* //cambio: el label de las cards 2 y 3 sale acentuado en el render del Figma. Si al comparar contra el diseño se ve azul primario, cambiar --color-accent por --color-primary acá. */ /* //cambio (2026-08-27): el nodo nuevo de la card (4055:4281, "aplicar diseño a esa card") define las etiquetas de los pares en AZUL PRIMARIO #003da0 — la duda que el comentario de arriba dejo planteada desde el 13/08 ("si al comparar se ve azul primario, cambiar --color-accent por --color-primary") queda resuelta por la spec: era primario. Valor anterior: var(--color-accent). */ /* .fal2-gestion-item-label { font-weight: 300; font-size: 0.875rem; line-height: 1.5; color: var(--color-accent); } */ .fal2-gestion-item-label { font-weight: 300; font-size: 0.875rem; line-height: 1.5; color: var(--color-primary); } .fal2-gestion-cover { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 424 / 288; } .fal2-gestion-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .fal2-gestion-cover-empty { background: rgba(187, 202, 232, 0.45); } .fal2-gestion-foot { font-size: 0.625rem; line-height: 1.5; color: var(--color-text-muted); } /* //cambio (2026-08-21): pedido de diseño — mismo aire arriba y abajo en las cards. Medido en vivo (CDP, 1440): arriba 25px pero abajo 56/41/56. Dos causas, dos reglas: (a) el footnote viene de un WYSIWYG (wp_kses_post en gestion.php:56) que lo envuelve en
con margins default del navegador -> aire fantasma DENTRO del elemento. p{margin:0} lo elimina. (b) el footnote vive en la fila compartida del subgrid (la fija la card con el texto mas largo): en las otras cards el sobrante quedaba DEBAJO del texto. align-self:end lo apoya al fondo de su fila y el sobrante pasa arriba, donde hay aire natural. Las fotos siguen alineadas. Verificado post-fix: 25/25 arriba/abajo en las tres cards. */ .fal2-gestion-foot p { margin: 0; } /* //cambio (doctrina 125%): mismas 4 filas compartidas entre las 3 cards (número / cuerpo / foto / footnote) — el footnote de la card 2 tiene más líneas y sin subgrid las fotos quedaban a distinta altura. */ @media (min-width: 992px) { /* //cambio (2026-08-18): Figma v5 — sin los números 01/02/03 quedan 3 filas compartidas (cuerpo / foto / footnote). Valores anteriores: 4 filas y span 4. */ /* .fal2-gestion-row { grid-template-rows: auto auto auto auto; } */ /* .fal2-gestion-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; } */ .fal2-gestion-row { grid-template-rows: auto auto auto; } .fal2-gestion-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; } /* //cambio (2026-08-21): parte (b) del fix de aire parejo — ver nota en .fal2-gestion-foot. */ /* //cambio (2026-08-24j): anotacion de Vale (captura 16.41 + linea marcada) — "alinear los textos arriba": los 3 footnotes deben ARRANCAR en la misma linea (el de la card 2 quedaba mas arriba por el align-self end). Valor anterior: align-self: end. */ /* .fal2-gestion-foot { align-self: end; } */ .fal2-gestion-foot { align-self: start; } } /* ============================================================ CALCULADORA — Figma 3553:2629 ============================================================ */ /* //cambio (2026-08-28): la seccion CALCULADORA se OCULTA — en el diseno nuevo (4518:72) ya no existe: gestion pasa directo al banner "¿Queres conocer...?" y de ahi al respaldo. Se oculta por CSS (reversible con borrar una linea) en vez de tocar el contenido; la seccion sigue en el flexible content del admin por si vuelve. PENDIENTE del lado del admin: quitar el item "Calcula tu fondo" del nav_links (apunta a esta seccion oculta) y, si la decision es definitiva, sacar la seccion del flexible content. */ .fal2-calc { display: none; } .fal2-calc { background: linear-gradient(var(--color-bg-tint), var(--color-bg-tint)), #fff; padding-bottom: clamp(1.5rem, 2.083vw, 2.5rem); } .fal2-calc-card { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.125vw, 3.75rem); max-width: var(--container); margin-inline: auto; display: grid; gap: clamp(1.25rem, 1.667vw, 2rem); } .fal2-calc-panel { background: var(--color-card-soft-10); border: 1px solid var(--color-card-border); border-radius: var(--radius-card); padding: clamp(1.5rem, 2.083vw, 2.5rem) 1rem; display: grid; gap: clamp(1.5rem, 2.031vw, 2.44rem); justify-items: center; /* //cambio (2026-08-20c): en el Figma (3932:805) el panel de PyME/Grande mide 1020, IGUAL que la fila de stats de abajo: los bordes de ambos quedan alineados. El panel ocupaba todo el ancho de la card (1084) y arrancaba antes que las cajas (reportado). */ width: 100%; max-width: 1020px; justify-self: center; } .fal2-toggle { display: inline-flex; background: #fff; border: 1px solid var(--color-card-border); border-radius: var(--radius-pill); padding: 4px; } .fal2-toggle-btn { border: 0; background: transparent; border-radius: var(--radius-pill); padding: 12px 40px; font-weight: 500; font-size: 0.875rem; line-height: 20px; color: var(--color-tab-inactive); cursor: pointer; transition: background-color 0.25s ease-out, color 0.25s ease-out; } .fal2-toggle-btn.active { background: var(--color-primary); color: #fff; } .fal2-toggle-btn:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(0, 61, 160, 0.4); } .fal2-calc-display { display: flex; align-items: center; gap: 8px; } .fal2-calc-count { font-weight: 300; font-size: var(--fs-display-80); line-height: 1.1; color: var(--color-primary); } .fal2-calc-count-label { font-weight: 350; font-size: 1rem; line-height: 1.44; color: var(--color-primary); max-width: 201px; text-align: left; } .fal2-calc-slider { width: min(666px, 100%); } .fal2-range { width: 100%; height: 4px; appearance: none; -webkit-appearance: none; background: var(--color-track); border-radius: 2px; outline: none; } /* el relleno del track lo pinta fal2.js con un linear-gradient (patrón updateSliderFill de la v1) */ .fal2-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); border: 0; cursor: pointer; } .fal2-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); border: 0; cursor: pointer; } .fal2-range:focus-visible { box-shadow: 0 0 0 0.25rem rgba(0, 61, 160, 0.3); } .fal2-calc-sueldo { font-weight: 300; font-size: 0.875rem; line-height: 1.7; color: var(--color-primary); text-align: right; margin: 0.875rem 0 0; } .fal2-calc-sueldo span { color: var(--color-text-muted); } .fal2-calc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1020px; margin-inline: auto; width: 100%; } .fal2-calc-stat { background: var(--color-card-soft); border: 1px solid var(--color-card-border); border-radius: var(--radius-card); padding: 24px; display: grid; gap: 16px; align-content: center; text-align: left; } .fal2-calc-stat-label { font-weight: 300; font-size: 1rem; line-height: 1.4; color: var(--color-text-muted); } .fal2-calc-stat-value { font-weight: 300; font-size: var(--fs-h3); line-height: 1.4; letter-spacing: -0.02em; color: var(--color-primary); } .fal2-calc-disclaimer { font-size: 0.625rem; line-height: 1.79; color: var(--color-text-muted); max-width: 714px; margin-inline: auto; text-align: center; } /* ============================================================ BANNER FAQ — misma base visual que la calculadora para que se lean continuos ============================================================ */ /* //cambio (2026-08-28): con la calculadora oculta, el padding-top corto (40, pensado para pegarse a ella) dejaba el banner desbalanceado. El diseno nuevo (4518:72, seccion "6": 404 de alto con card de 244) pide 80/80 — el padding estandar de seccion, que ya es el del bottom. El FONDO se queda como esta: el nodo tiene el mismo tinte celeste al 20% sobre blanco que esta regla (verificado en los fills — NO es blanco puro, aunque en pantalla casi no se note). Valor anterior: padding-top clamp(1.5rem, 2.083vw, 2.5rem). */ .fal2-faqbanner-section { background: linear-gradient(var(--color-bg-tint), var(--color-bg-tint)), #fff; padding-top: var(--pad-section-y); } .fal2-faqbanner { /* //cambio (2026-08-13): el mismo fondo que la sección "¿Cómo funciona el FAL?". Valor anterior: `background: var(--color-primary)` (azul plano). En el Figma esta card es #003da0 CON la misma textura encima que la sección azul de arriba (el mismo imageRef), así que tienen que verse iguales. */ background-color: var(--color-primary); background-image: var(--gradient-como); border-radius: var(--radius-lg); padding: clamp(2rem, 2.5vw, 3rem) clamp(1.5rem, 5.99vw, 7.19rem); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; } /* //cambio (2026-08-28): reportado — con el texto nuevo ("¿Queres conocer como cubre el FAL tus pasivos laborales?") el corte dependia del zoom: a 1920 (fuente 32) partia dejando "laborales" colgado y a 125% (fuente 25.6) entraba en una linea — y el diseno (4518:846) lo corta en DOS lineas fijas: "...cubre el FAL / tus pasivos laborales?". Mismo mecanismo y fix que el hero: max-width en EM, que escala con la fuente y produce el MISMO corte en toda resolucion. Medido con la fuente real: la linea ancha pide 19.14em y sumarle "tus" 20.96em -> 20.05em fuerza el corte del diseno, con margen a ambos lados. Valor anterior: sin max-width. */ /* //cambio (2026-08-31c): pedido — el titulo del banner sube 4px SOLO aca: tope 32 -> 36 (y el minimo acompana, 24 -> 28; vw recalibrado a 36@1920). El corte en 2 lineas del 28 NO cambia: el max-width esta en EM y escala con la fuente. Mobile intacto (su override esta en el bloque del final). Valor anterior: var(--fs-h3) = clamp(1.5rem, 1.667vw, 2rem). */ .fal2-faqbanner-title { font-weight: 350; font-size: clamp(1.75rem, 1.875vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; color: #fff; margin: 0; max-width: 20.05em; margin-inline: auto; } .fal2-faqbanner-sub { font-weight: 300; font-size: var(--fs-body-lg); line-height: 1.5; color: #fff; } /* ============================================================ RESPALDO (BENTO) — Figma 3745:402 ============================================================ */ .fal2-respaldo .fal2-section-sub { max-width: 538px; } /* //cambio: el bento del Figma mide 1280, más ancho que el contenedor general de 1204 (la sección tiene padding lateral 72 en vez de 64). Sin esto quedaba recortado a 1204 y los tiles salían ~6% más angostos que el diseño. */ /* //cambio (2026-08-18): Figma v5 (3932:952) — el bento vuelve a 1204, alineado con el resto de las secciones. La regla de 1280 queda comentada. */ /* .fal2-respaldo .fal2-container { max-width: 1280px; } */ .fal2-bento { display: grid; /* //cambio (2026-08-18): Figma v5 — 1280 -> 1204 y gap 27 (@1920). Anteriores: 1280 / gap clamp(1rem, 1.5vw, 1.8rem). */ /* max-width: 1280px; */ /* gap: clamp(1rem, 1.5vw, 1.8rem); */ /* //cambio (2026-08-25h): pedido de Florencia (Slack, compartido por el usuario) — "que no sea de punta a punta": el bento usaba el MISMO ancho que el resto de las secciones (1204px), por eso se leia como un bloque de pared a pared en vez de una tarjeta contenida. Angostado a 1000px y centrado: deja aire visible a los costados dentro de la seccion. Junto con la escala al 85%% de abajo (mismo pedido, "un poco mas chico en general"). Valor anterior: max-width 1204px. */ /* //cambio (2026-08-28a): el diseno OFICIAL del bento "sutil" (4530:1766) vuelve a 1204 — el achique pasa por tiles mas bajos y tipografia menor, no por angostar el grid. Pisa el 1000px provisorio del 25h. Gap del nodo: 26-27. Valores anteriores: 1000px / minmax(170) / gap 85%. */ /* //cambio (2026-08-31b): TODO el bento al 80% (pedido: "bajar el de los numeros un 20%, fuentes incluidas"). Escala uniforme como el 25h pero bien hecha: extremos rem x0.8 y vw IGUAL (el contenedor tambien achica x0.8: la calibracion a "donde se llena la caja" se conserva sola). Valores anteriores en cada linea. */ max-width: 963px; /* antes: 1204px */ margin-inline: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); /* antes: minmax(150px, auto) */ gap: clamp(0.8rem, 1.406vw, 1.35rem); /* antes: clamp(1rem, 1.406vw, 1.6875rem) */ } .fal2-tile { /* //cambio (2026-08-18): Figma v5 — tiles a radius 24. Valor anterior: var(--radius-card) (12px). */ /* border-radius: var(--radius-card); */ /* //cambio (2026-08-28a): radius 16 en el nodo nuevo (antes 24); coincide con el 16 que mobile ya usaba — queda unificado. Valor anterior: var(--radius-lg). */ border-radius: 16px; box-shadow: var(--shadow-tile); /* //cambio (2026-08-20): 24px del Figma. El clamp anterior estaba calibrado sobre 1920 y a 1440 devolvia 20px. Ver la nota de calibracion abajo. Valor anterior: clamp(1.25rem, 1.25vw, 1.5rem). */ /* //cambio (2026-08-25h): escala al 85%% (pedido "un poco mas chico en general", junto con el angostado del contenedor de arriba). Valor anterior: clamp(1.25rem, 1.86vw, 1.5rem). */ /* //cambio (2026-08-28a): padding 24 del nodo (deshace el 85% del 25h) y contenido anclado ARRIBA: en el nodo nuevo todos los tiles arrancan su contenido en el tope (antes space-between repartia label arriba / valor abajo). Gap 40 del nodo entre titulo y bloque de valor (40@1290 = 3.1vw). Valores anteriores: padding 85% / space-between / gap 1.275rem. */ padding: clamp(1rem, 1.86vw, 1.2rem); /* //cambio (2026-08-31b): x0.8. Antes: clamp(1.25rem, 1.86vw, 1.5rem) */ display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(1.2rem, 3.1vw, 2rem); /* //cambio (2026-08-31b): x0.8. Antes: clamp(1.5rem, 3.1vw, 2.5rem) */ text-align: left; } .fal2-tile-ratings { grid-row: span 2; } /* //cambio (2026-08-20b): en el Figma el bloque Calificaciones+ratings va ANCLADO ABAJO del tile ("Calificaciones" arranca al 39% de la altura y el ultimo rating termina contra el padding inferior), no repartido con space-between como lo teniamos: el label quedaba flotando a media altura (reportado: "esta un poco mas abajo y mas junto"). El margin-top:auto del label empuja todo el bloque al fondo; 22px entre "Calificaciones" y el primer rating (medido en el diseno). */ .fal2-tile-ratings { justify-content: flex-start; gap: 0; } /* //cambio (2026-08-28a): en el nodo nuevo "Calificaciones" arranca en el TOPE del tile (el anclaje al fondo era del diseno viejo) y deja ~62 hasta el primer rating (62@1290 = 4.8vw). Valores anteriores: margin-top auto (fondo) / margin-bottom 85%. */ .fal2-tile-ratings .fal2-tile-label { margin-top: 0; margin-bottom: clamp(1.6rem, 4.8vw, 3.1rem); } /* //cambio (2026-08-31b): x0.8. Antes: clamp(2rem, 4.8vw, 3.875rem) */ .fal2-tile-wide { grid-column: span 2; } /* //cambio (2026-08-13, decision del proyecto): los tiles azules (Calificaciones y +600) llevan el mismo gradiente que la sección "¿Cómo funciona el FAL?" y el banner de preguntas frecuentes, para que todos los bloques azules de la landing se lean como un mismo material. OJO: en el Figma estos dos tiles son azul PLANO #003da0 (fills sólidos, sin imagen ni gradiente) — esto es una decisión posterior, no una corrección. Para volver al diseño original: `background: var(--color-primary)` y listo. //cambio (2026-08-18): en el Figma v5 estos tiles YA traen la textura azul (mismo imageRef d0952902 que la sección "¿Cómo funciona?" y el banner FAQ) — lo que era una decision del proyecto ahora es diseño oficial. No hay nada que revertir. */ .fal2-tile-azul { background-color: var(--color-primary); background-image: var(--gradient-como); color: #fff; } /* //cambio (2026-08-20): en el Figma el tile "+600" es el UNICO que invierte el orden: el numero va ARRIBA (padTop 82) y la bajada ABAJO (padTop 177); los demas tiles van label arriba / valor abajo. Se resuelve con column-reverse para no tocar el orden del DOM (label -> valor sigue siendo el orden correcto para lectores de pantalla). OJO: hoy el unico tile de stats azul es "+600", por eso alcanza con el selector de color. Si algun dia se agrega OTRO tile azul que no deba invertirse, hay que pasar el orden a un campo select de ACF en vez de deducirlo del color. */ /* //cambio (2026-08-20b): BUG FIX del cambio de ayer — con column-reverse el eje se invierte y flex-end pasa a ser ARRIBA: ancle el grupo al techo cuando el Figma lo tiene pegado ABAJO (reportado). flex-start en el eje invertido = abajo. Gap 16 del diseno (antes 32). */ /* //cambio (2026-08-25h): escala 85%%. Valor anterior: gap 1rem. */ /* //cambio (2026-08-28a): con column-reverse el eje esta invertido: para que el bloque quede ARRIBA (como todo el bento nuevo) el justify pasa a flex-end. Gap 32 del nodo (2.48vw@1290). Valores anteriores: flex-start (= abajo en eje invertido) / gap 85%. */ /* //cambio (2026-08-31c): pedido — en el +600 "lo mismo y centrarlo porque esta arriba": el bloque numero+bajada pasa a CENTRADO vertical en el tile (con column-reverse, flex-end anclaba arriba; center es center en cualquier eje) y el gap entre ambos baja a la mitad (tope 12.8, antes 25.6). Solo desktop: en mobile este tile es una fila (row-reverse, bloque propio al final del archivo). Valores anteriores: justify-content flex-end / gap clamp(0.8rem, 2.48vw, 1.6rem). */ .fal2-tile-stat.fal2-tile-azul { flex-direction: column-reverse; justify-content: center; gap: clamp(0.4rem, 1.24vw, 0.8rem); } .fal2-tile-navy { background: var(--color-navy); color: #fff; } /* //cambio (2026-08-20b): en el Figma "Trayectoria" y "23 anos" van JUNTOS (16px de gap), como un bloque arriba del tile; el space-between generico los separaba a techo y piso (reportado). Mismo aviso que el tile azul: hoy el unico tile navy es Trayectoria — si se agrega otro navy con otro anclaje, pasar esto a un select de ACF. */ /* //cambio (2026-08-25h): escala 85%%. Valor anterior: gap 1rem. */ /* //cambio (2026-08-28a): gap 32 del nodo. Valor anterior: 85%. */ .fal2-tile-stat.fal2-tile-navy { justify-content: flex-start; gap: clamp(0.8rem, 2.48vw, 1.6rem); } /* //cambio (2026-08-31b): x0.8. Antes: clamp(1rem, 2.48vw, 2rem) */ .fal2-tile-gris { background: var(--color-bento-gray); color: var(--color-primary); } .fal2-tile-celeste { background: var(--color-bento-celeste); color: var(--color-primary); } /* //cambio (2026-08-20): CALIBRACION DE LAS TIPOGRAFIAS DEL BENTO. Reportado: todo el bloque se veia mas chico que el Figma. Medido a 1440 contra el diseno: label 16 vs 20, valor ancho 72 vs 96, valor chico 60 vs 80, rating 36 vs 48 (todo ~25% abajo). CAUSA: las variables globales (--fs-body-lg, --fs-display-96, etc.) escalan con vw calibrado sobre 1920, PERO el bento tiene max-width 1204 FIJO: llega a su ancho maximo a ~1290px de viewport y de ahi en adelante no crece mas. Entre 1290 y 1920 el contenedor quedaba quieto y la tipografia seguia creciendo -> a cualquier ancho intermedio el texto quedaba chico para su caja. Regla general: dentro de un contenedor de ancho FIJO, el vw hay que calibrarlo al ancho donde ese contenedor se llena, no al viewport de diseno. Los valores de abajo dan EXACTO el Figma a 1290 y quedan capados de ahi para arriba; por debajo siguen escalando con la caja. Se declaran locales al bento a proposito: las variables globales las usan las otras secciones y NO se tocan. Valores anteriores: var(--fs-body-lg) / var(--fs-display-80) / var(--fs-display-96). */ /* //cambio (2026-08-28a): los titulos de tile SUBEN a 24 en el nodo nuevo (24@1290 = 1.86vw). Valores anteriores: 20 (pre-25h) / 85% (25h). */ .fal2-tile-label { font-weight: 300; font-size: clamp(0.9rem, 1.86vw, 1.2rem); line-height: 1.35; margin: 0; } /* //cambio (2026-08-31b): x0.8 (24 -> 19.2). Antes: clamp(1.125rem, 1.86vw, 1.5rem) */ /* //cambio (2026-08-28e): reportado — "Empresas confian sus patrimonios dia a dia" caia en TRES lineas y el nodo (4530:1766) lo corta en DOS. Ese texto es el unico .fal2-tile-label que en el diseno NO es titulo sino bajada: va en 20, no en 24 (la discrepancia ya estaba señalada en la verificacion contra el nodo). Medido con la fuente real: a 20 en la caja del tile (237px) corta "Empresas confian sus / patrimonios dia a dia", identico al Figma; a 24 daba 3 lineas. El selector es .fal2-tile-STAT.fal2-tile-azul a proposito: NO alcanza al titulo "Calificaciones" (tile-RATINGS azul), que si es titulo y queda en 24. El bloque mobile del final del archivo pisa esta regla en <768 — mobile intacto. */ .fal2-tile-stat.fal2-tile-azul .fal2-tile-label { font-size: clamp(0.75rem, 1.55vw, 1rem); line-height: 1.5; } /* //cambio (2026-08-31b): x0.8 (20 -> 16); el corte en 2 lineas del 28e se conserva (caja y fuente achican juntas). Antes: clamp(0.9375rem, 1.55vw, 1.25rem) */ /* //cambio (2026-08-28a): TODOS los numeros del bento a 64 en el nodo nuevo (64@1290 = 4.96vw) — ya no hay tamano distinto para los tiles anchos. Valores anteriores: 80/96 (pre-25h), 85% de eso (25h). */ .fal2-tile-value { font-weight: 300; line-height: 1.1; margin: 0; font-size: clamp(1.6rem, 4.96vw, 3.2rem); letter-spacing: -0.02em; } /* //cambio (2026-08-31b): x0.8 (64 -> 51.2). Antes: clamp(2rem, 4.96vw, 4rem) */ /* //cambio (2026-08-28a): sin tamano especial para los anchos — el nodo usa 64 parejo. Valores anteriores: 96 (pre-25h) / 85% (25h). .fal2-tile-wide .fal2-tile-value { font-size: clamp(2.55rem, 6.324vw, 5.1rem); } */ /* //cambio (2026-08-20): en el Figma los labels de los tiles anchos se parten en DOS lineas porque su caja de texto esta acotada (287px de un tile de 588 = 49%). Sin el limite salian en una sola linea y el bloque quedaba mas bajo que el diseno. */ /* //cambio (2026-08-28a): FUERA los topes de ancho — en el nodo nuevo el titulo va en UNA linea ("Activos bajo administracion") y el "AR $ MM" pasa a linea propia junto al numero (lo separa respaldo.php y lo estila .fal2-tile-curr). Los caps de 49/31% eran para forzar los cortes del diseno viejo. Valor anterior: max-width 49%. .fal2-tile-wide .fal2-tile-label { max-width: 49%; } */ /* //cambio (2026-08-20b): en el Figma cada label ancho tiene SU caja: Activos 287px (49%) y Patrimonio 183px (31%) — por eso Patrimonio parte en "Patrimonio total / AR $ MM" (reportado). El selector agarra al SEGUNDO tile ancho por posicion: si se reordenan los tiles en el admin, este ancho viaja con la posicion, no con el texto. */ /* //cambio (2026-08-28a): idem — ver nota de arriba. Valor anterior: max-width 31%. .fal2-tile-wide ~ .fal2-tile-wide .fal2-tile-label { max-width: 31%; } */ /* //cambio (2026-08-20b): ritmo del diseno = 96px entre el tope de un rating y el siguiente (pares de 80: valor 48 con lh 1 + 2 + descripcion 30, separados 16). Con lh 1.2 y gap 32 el bloque quedaba mas suelto que el Figma. Valores anteriores: gap 2rem / gap 4px / lh 1.2. */ /* //cambio (2026-08-28a): 40 entre pares en el nodo (3.1vw@1290). Anteriores: 16 / 85%. */ /* //cambio (2026-08-31c): pedido — "achicar el gap entre A.ar / Moody's Local / A+(arg)...": menos aire entre los pares de calificaciones (tope 24, antes 32) y, en la regla de abajo, entre el valor grande y su bajada (tope 6.4, antes 12.8). Solo desktop: el bloque mobile del final redefine ambos gaps. Valor anterior: clamp(1rem, 3.1vw, 2rem) (el x0.8 del 31b sobre los 40 del nodo). */ .fal2-ratings { display: grid; gap: clamp(0.75rem, 2.33vw, 1.5rem); } /* //cambio (2026-08-28a): 16 entre valor y descripcion en el nodo (1.24vw@1290). Antes: 2px. */ /* //cambio (2026-08-31c): a la mitad — ver nota en .fal2-ratings. Antes: clamp(0.3rem, 1.24vw, 0.8rem) */ .fal2-rating { display: grid; gap: clamp(0.15rem, 0.62vw, 0.4rem); } /* //cambio (2026-08-20): misma calibracion que arriba — 48px y 20px del Figma a partir de 1290. Valores anteriores: var(--fs-num-48) / var(--fs-body-lg). */ /* //cambio (2026-08-28a): el nodo mantiene 48 — se revierte el 85% del 25h. */ .fal2-rating-val { font-weight: 300; font-size: clamp(1.6rem, 3.72vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; } /* //cambio (2026-08-31b): x0.8 (48 -> 38.4). Antes: clamp(2rem, 3.72vw, 3rem) */ /* //cambio (2026-08-28a): el nodo mantiene 20 — se revierte el 85% del 25h. */ .fal2-rating-desc { font-weight: 300; font-size: clamp(0.8rem, 1.55vw, 1rem); line-height: 1.5; } /* //cambio (2026-08-31b): x0.8 (20 -> 16). Antes: clamp(1rem, 1.55vw, 1.25rem) */ /* //cambio (2026-08-18): Figma v5 — el tile Calificaciones lleva el logo GST BLANCO arriba del título (164x55 en el diseño). Mismo truco del footer: el SVG del tema es a color y se pasa a blanco con filtro (ver footer-fal.php / .logo-footer). */ /* //cambio (2026-08-20): en el Figma hay 60px de aire entre el logo y el bloque "Calificaciones" (gap del auto-layout); con 8px el logo quedaba pegado al titulo. Valor anterior: 0.5rem. */ /* //cambio (2026-08-20b): el ancho del logo tenia el MISMO bug de calibracion que las tipografias del bento (vw sobre 1920 en un contenedor capado a 1204): a 1440 daba 123px cuando el Figma pide 164 (58% del tile) — el tile se veia ralo y "corrido" (reportado). Calibrado a 1290 como el resto del bento. Valor anterior: clamp(120px, 8.54vw, 164px). */ /* //cambio (2026-08-25h): escala 85%%. Valor anterior: width clamp(120px, 12.71vw, 164px) / margin-bottom clamp(1.5rem, 4.65vw, 3.75rem). */ .fal2-tile-logo { width: clamp(102px, 10.804vw, 139px); height: auto; filter: invert(1) brightness(100); margin-bottom: clamp(1.275rem, 3.953vw, 3.1875rem); } /* //cambio (2026-08-28a): piezas nuevas del bento (nodo 4530:1766) — respaldo.php separa por codigo el sufijo "AR $ MM" del label y la palabra del valor ("23 anos" -> "23"+"anos") en spans INLINE, para que en MOBILE nada cambie (alli quedan en linea, como hoy — pedido: mobile no se toca). Solo en desktop los spans pasan a bloque con los tamanos del nodo: "AR $ MM" 36 (2.79vw@1290) como linea propia pegada al numero, y "anos" 36 debajo del 64. */ @media (min-width: 768px) { .fal2-tile-curr { display: block; font-family: var(--font-title); font-weight: 300; font-size: clamp(1.1rem, 2.79vw, 1.8rem); line-height: 1.1; margin-top: clamp(0.8rem, 2.48vw, 1.6rem); color: inherit; } /* //cambio (2026-08-31b): x0.8 (36 -> 28.8). Antes: fs clamp(1.375rem, 2.79vw, 2.25rem) / mt clamp(1rem, 2.48vw, 2rem) */ .fal2-val-word { display: block; font-size: clamp(1.1rem, 2.79vw, 1.8rem); line-height: 1.26; } /* //cambio (2026-08-31b): x0.8. Antes: clamp(1.375rem, 2.79vw, 2.25rem) */ /* con el AR $ MM al pie del label, el numero va pegado: el gap grande del tile queda entre titulo y bloque de valor via el margin del curr, no entre curr y numero */ .fal2-tile-wide { gap: 0.4rem; } /* //cambio (2026-08-31b): x0.8. Antes: 0.5rem */ } /* ============================================================ CONTACTO — Figma 3571:12819 ============================================================ */ .fal2-contacto { padding-bottom: 0; } .fal2-contacto-card { position: relative; /* //cambio (2026-08-31b): TODA la card de contacto al 80% (pedido: "bajar el contacto un 20%, fuentes incluidas"). La card se angosta (1204 -> 963, centrada; los background-size en % de la foto escalan solos) y el min-height y las fuentes/paddings internos van x0.8. Los fr del grid interno (578fr/626fr) y el overlay no cambian. EXCEPCIONES deliberadas (usabilidad, doctrina del bloque mobile): el boton Enviar (pill global) y el checkbox de terminos (10px ya es el piso de legibilidad, y los 18px del cuadradito son target de click) NO achican. Mobile intacto: el bloque del final del archivo pisa todo esto en <768. */ max-width: 963px; /* antes: sin max-width (llenaba el container de 1204) */ margin-inline: auto; border-radius: var(--radius-lg); background-color: var(--color-primary); background-size: cover; background-position: center; min-height: clamp(368px, 30.6vw, 470px); /* antes: clamp(460px, 30.6vw, 587px) */ display: grid; /* //cambio: proporción del Figma — card 1204 con el form de 626 a la derecha y el texto a la izquierda. MISMO cuidado que en .fal2-como-card: NO poner `1fr minmax(320px, 626fr)`, porque al comparar 1fr contra 626fr el form se lleva casi todo el ancho (medido: 903px en vez de 626px) y el bloque de texto queda espichado contra el borde. */ grid-template-columns: 578fr 626fr; /* //cambio: la card NO lleva padding y los items estiran. En el Figma el form ocupa la mitad derecha COMPLETA (626x587 = todo el alto de la card, pegado al borde) y el bloque de texto tiene su propio padding de 67px. Con padding en la card, el form perdía ~80px de ancho y no llegaba a los bordes: se veía como una cajita flotando en vez de media card. */ padding: 0; align-items: stretch; } .fal2-contacto-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--overlay-form); } /* //cambio (2026-08-20): la foto se veía MUY zoomeada respecto del Figma (reportado). El fill de la card en el diseño (3932:1262) es scaleMode CROP con imageTransform sx=1.6465 tx=0 | sy=0.6693 ty=0.3244, que traducido: - alto = 100/0.6693 = 149.4% del alto de la card -> se ve el 66,9% de la foto (nuestro `cover` mostraba apenas el 48,7%: de ahí el zoom). - ancho = 100/1.6465 = 60,7% de la card, anclado a la IZQUIERDA. En el diseño la foto NO llega al borde derecho a propósito: ahí está el form blanco (arranca al 48% del ancho), así que el hueco nunca se ve. Por eso `sx` daba >1, que como recorte no cerraba. - posición Y = ty/(1-sy) = 98,1% (la franja BAJA de la foto, no la central). Solo desde 992px, que es donde el layout es de 2 columnas; abajo de eso el contacto es blanco sin foto (mobile) o apilado, y ahi sigue valiendo el `cover` de la regla base. //cambio (2026-08-20, 2do intento): el primer intento uso `auto 149.4%` para NO deformar, pero quedaba mas zoomeada que el diseno (reportado). Comparado contra el render real del Figma con una simulacion en Pillow: el diseno SI comprime la foto horizontalmente (731px de ancho contra los 853 que da la proporcion natural, o sea -17%), y por eso entra mas fachada. Se usan los DOS ejes para replicarlo exacto. La deformacion no se nota: es una textura de vidrio. Valor anterior: background-size: auto 149.4%. */ @media (min-width: 992px) { .fal2-contacto-card { /* background-size: auto 149.4%; */ background-size: 60.73% 149.4%; background-position: 0% 98.1%; background-repeat: no-repeat; } } .fal2-contacto-info { position: relative; z-index: 1; max-width: 294px; /* //cambio (2026-08-31b): x0.8. Antes: 368px */ /* //cambio (2026-08-20): el tema aplica box-sizing:border-box global, asi que el max-width de 368 se comia el padding: el texto quedaba con 267px utiles en vez de los 368 del Figma (se veia "mas acotado", 4 lineas donde el diseno tiene 3). En el Figma el bloque de contenido mide 368 y los 67px de padding van POR FUERA. content-box replica eso. */ box-sizing: content-box; display: grid; gap: 1.4rem; /* //cambio (2026-08-31b): x0.8. Antes: 1.75rem */ align-content: center; /* Figma: el texto arranca a 67px del borde izquierdo de la card */ padding: clamp(1.2rem, 3.5vw, 3.36rem); /* //cambio (2026-08-31b): x0.8. Antes: clamp(1.5rem, 3.5vw, 4.2rem) */ } .fal2-contacto-title { font-weight: 300; font-size: clamp(1.6rem, 1.875vw, 1.8rem); line-height: 1.2; letter-spacing: -0.03em; color: #fff; margin: 0; } /* //cambio (2026-08-31b): x0.8 (36 -> 28.8). Antes: var(--fs-h2) = clamp(2rem, 1.875vw, 2.25rem) */ .fal2-contacto-text { font-weight: 300; font-size: clamp(0.8rem, 1.042vw, 1rem); line-height: 1.5; color: #fff; } /* //cambio (2026-08-31b): x0.8 (20 -> 16). Antes: var(--fs-body-lg) = clamp(1rem, 1.042vw, 1.25rem) */ .fal2-contacto-mail { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 300; font-size: 0.8rem; text-decoration: underline; } /* //cambio (2026-08-31b): x0.8 (16 -> 12.8). Antes: 1rem */ .fal2-contacto-mail:hover { color: #fff; opacity: 0.85; } /* //cambio (2026-08-18e): filas de teléfono y dirección (mobile v6). Mismo look del mail. */ .fal2-contacto-row { display: inline-flex; align-items: flex-start; gap: 8px; color: #fff; font-weight: 300; font-size: 1rem; line-height: 1.5; text-decoration: none; } .fal2-contacto-row svg { flex: 0 0 24px; margin-top: 1px; } a.fal2-contacto-row:hover { color: #fff; opacity: 0.85; } .fal2-form { position: relative; z-index: 1; background: #fff; border: 1px solid var(--color-card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-form); /* Figma: 70px arriba/abajo y 88px a los lados, dentro de los 626 del form */ padding: clamp(1.2rem, 3.6vw, 3.52rem) clamp(1.2rem, 4.6vw, 4.4rem); /* //cambio (2026-08-31b): x0.8. Antes: clamp(1.5rem, 3.6vw, 4.4rem) clamp(1.5rem, 4.6vw, 5.5rem) */ display: grid; gap: 1rem; /* //cambio (2026-08-31b): x0.8. Antes: 1.25rem */ align-content: center; } .fal2-form-fields { display: grid; gap: 1.4rem; } /* //cambio (2026-08-31b): x0.8. Antes: 1.75rem */ .fal2-input { width: 100%; height: 38px; /* //cambio (2026-08-31b): x0.8. Antes: 48px */ border: 0; border-bottom: 1px solid var(--color-input-line); border-radius: 0; padding: 10px 13px 10px 6px; /* //cambio (2026-08-31b): x0.8. Antes: 12px 16px 12px 8px */ font-size: 0.8rem; /* //cambio (2026-08-31b): x0.8 (16 -> 12.8) SOLO desktop. Antes: 1rem */ line-height: 1.5; color: var(--color-text); background: transparent; } .fal2-input::placeholder { color: var(--color-text-muted); } /* //cambio: fix de la auditoría de la v1 (item 4) — sin :focus propio el input heredaba el azul #0d6efd de Bootstrap, que no es ningún color de la paleta. */ .fal2-input:focus { outline: 0; border-bottom-color: var(--color-primary); box-shadow: 0 1px 0 0 var(--color-primary); } .fal2-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.625rem; line-height: 1.5; color: var(--color-text-muted); cursor: pointer; } /* //cambio (2026-08-13): el checkbox se tildaba pero NO se veía. dist/css/app.css del tema trae un reset `* { appearance: none }` que le saca la marca nativa a todos los checkboxes, y con eso `accent-color` deja de tener efecto: quedaba un cuadrado vacío aunque el input estuviera en `:checked`. Se dibuja el tilde a mano. Valor anterior: .fal2-checkbox input { width:18px; height:18px; border:1px solid var(--color-checkbox-border); border-radius:2px; accent-color: var(--color-primary); } */ .fal2-checkbox input { appearance: none; -webkit-appearance: none; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; border: 1px solid var(--color-checkbox-border); border-radius: 2px; background: #fff; cursor: pointer; display: grid; place-content: center; transition: background-color 0.15s ease-out, border-color 0.15s ease-out; } .fal2-checkbox input::before { content: ""; width: 11px; height: 11px; background: #fff; transform: scale(0); transition: transform 0.12s ease-out; clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 0, 40% 68%); } .fal2-checkbox input:checked { background: var(--color-primary); border-color: var(--color-primary); } .fal2-checkbox input:checked::before { transform: scale(1); } .fal2-checkbox input:focus-visible { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 61, 160, 0.35); } /* //cambio: "Términos y Condiciones" va subrayado SIEMPRE, como en el Figma. Antes solo se subrayaba si el campo `terminos_link` tenía una URL cargada, y sin URL salía texto pelado. */ .fal2-checkbox a, .fal2-checkbox .fal2-terminos { color: inherit; text-decoration: underline; } .fal2-checkbox a:hover { color: var(--color-primary); } .fal2-form-submit { justify-self: end; } /* //cambio (2026-08-24): mensaje inline del formulario (exito/error). Va en la MISMA card, sin navegar a otra pagina. Toma la tipografia de la landing: Cocogoose (font-title) al tamano del cuerpo del form, en el azul de la marca; el error usa un rojo sobrio, unico color fuera de paleta y solo para este caso. */ .fal2-form-msg { margin: 0.75rem 0 0; font-family: var(--font-title); font-weight: 300; font-size: 0.875rem; line-height: 1.5; color: var(--color-primary); text-align: right; } .fal2-form-msg[hidden] { display: none; } .fal2-form-msg.is-error { color: #b3261e; } /* ============================================================ MODAL TERMINOS Y CONDICIONES — //cambio (2026-08-20j): "sumar pop up con la info de la maqueta" (Ajustes desarrollo 4187:2069). Markup en contacto.php; fal2.js lo porta a (los transform de reveals/parallax atrapan al fixed) y maneja abrir/cerrar/ESC. Abre al tildar el checkbox de terminos. //cambio (2026-08-20l): reescrito contra el diseno real del modal (Figma 4174:1711): card 806x921 sobre 1920x1024 (42vw proporcional, capado a 806 — antes 720 FIJO, se veia mas grande que el diseno, reportado), radius 12, backdrop navy #27396A, header y footer FIJOS (el scroll es solo del cuerpo), titulos 20/600 y cuerpo 14/20 en Noto (el diseno usa la tipografia de UI, no Cocogoose), botones "Cerrar" ghost y "Aceptar y continuar" pill. ============================================================ */ .fal2-terminos { border: 0; padding: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; } .fal2-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .fal2-modal[hidden] { display: none; } .fal2-modal-backdrop { position: absolute; inset: 0; background: rgba(39, 57, 106, 0.6); } .fal2-modal-panel { position: relative; background: #fff; border-radius: 12px; box-shadow: var(--shadow-form); width: min(92vw, clamp(520px, 42vw, 806px)); max-height: min(90vh, 921px); display: flex; flex-direction: column; overflow: hidden; } .fal2-modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 16px 24px; border-bottom: 1px solid rgba(17, 28, 45, 0.08); } .fal2-modal-title { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; line-height: 1.4; color: #111c2d; margin: 0; } .fal2-modal-close { flex: 0 0 auto; border: 0; background: none; border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #434751; cursor: pointer; } .fal2-modal-close:hover { color: var(--color-primary); } .fal2-modal-close:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(0, 61, 160, 0.4); } .fal2-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 24px; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.43; color: #434751; } .fal2-modal-h { font-weight: 600; font-size: 0.875rem; line-height: 1.43; color: #111c2d; margin: 0 0 12px; } .fal2-modal-body p + .fal2-modal-h { margin-top: 24px; } .fal2-modal-body p { margin: 0 0 12px; } .fal2-modal-body ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; } .fal2-modal-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid rgba(17, 28, 45, 0.08); } .fal2-modal-cerrar { border: 0; background: none; cursor: pointer; border-radius: var(--radius-pill); padding: 12px 24px; font-weight: 350; font-size: 0.875rem; line-height: 20px; color: var(--color-primary); } .fal2-modal-cerrar:hover { background: var(--color-card-soft); } .fal2-modal-cerrar:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(0, 61, 160, 0.4); } @media (max-width: 767.98px) { .fal2-modal { padding: 1rem; } .fal2-modal-panel { width: 100%; max-height: 88dvh; } .fal2-modal-head, .fal2-modal-body, .fal2-modal-foot { padding-left: 16px; padding-right: 16px; } .fal2-modal-title { font-size: 1.0625rem; } .fal2-modal-foot { gap: 8px; } .fal2-modal-cerrar { padding: 12px 16px; } } /* ============================================================ FOOTER FAL — Figma 2895:3401. Markup en layout/footer-fal.php. //cambio (2026-08-13): bloque COPIADO TAL CUAL de fal.css (líneas 4189-4232 y 5040-5041) para que el footer de FAL 2 sea idéntico al ya deployado — acá no carga fal.css. ============================================================ */ .fal-footer { background: var(--color-primary); /* Figma: padding 40px 0 */ padding: 2.5rem 0; color: #fff; } /* //cambio (2026-08-28c): el layout nuevo lleva el footer a 1494 — REVERTIDO EL MISMO DIA (2026-08-28d): a 1920 funciona (213 de margen), pero en laptop/125% (~1536 de viewport) los 1494 dejaban el texto casi pegado al borde (reportado con captura, con razon). El tope de ~1320 de Bootstrap se ve bien en todos los anchos reales; si diseño insiste con 1494, la forma correcta seria max-width: min(1494px, calc(100% - 12rem)) — no un tope pelado. .fal-footer .container { max-width: 1494px; } */ .fal-footer-logo { display: inline-block; /* Figma: gap 32 entre logo y bloque legal */ margin-bottom: 2rem; } .fal-footer-logo img { display: block; width: 123px; height: auto; /* el asset del logo viene A COLOR (la opción ACF `logo_footer` o el fallback del navbar): se invierte por CSS, mismo filtro que usa el footer corporativo (_footer.scss:35) */ filter: invert(1) brightness(100); } .fal-footer-legal { /* Figma: Inter Extra Light 200, 10px, justificado, blanco, paragraphSpacing 2 */ font-family: "Inter", var(--font-body); font-weight: 200; font-size: 0.625rem; line-height: 1.5; text-align: justify; } .fal-footer-legal p { margin-bottom: 2px; } .fal-footer-legal p:last-child { margin-bottom: 0; } /* //cambio (2026-08-24j): anotacion de Vale (captura 17.27, CUITs marcados) — "sacar link, si tocas hace como una llamada telefonica. Dejar el texto en blanco": iOS detecta los CUIT (30-71212645-7) como telefonos y los convierte en celestes y tappeables. Cinturon doble: esta regla neutraliza el estilo y el tap de cualquier link tel: del footer, y head.php ademas emite solo en los templates FAL para que iOS ni siquiera los genere. */ .fal-footer-legal a[href^="tel"] { color: inherit !important; text-decoration: none !important; pointer-events: none; } /* ============================================================ PARALLAX — comentario del Figma "Parallax suave (en scroll)". Lo mueve fal2.js. ============================================================ */ [data-fal2-parallax] { will-change: transform; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .site-header, .fal2-anim, .fal2-reveal, .fal2-media-reveal, .fal2-tabpanel.active, .btn-fal2-primary, .btn-fal2-outline-light, .fal2-chip-pill { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } /* ============================================================ MOBILE / TABLET — al FINAL del archivo a propósito (convención de fal.css) ============================================================ */ @media (max-width: 991.98px) { .fal2-reforma-row { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .fal2-gestion-row { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .fal2-elfal-row { grid-template-columns: 1fr; } /* //cambio (2026-08-18f): reportado con capturas — la cabeza de la figura (sobresale ~17% del alto del recuadro) pisaba la bajada de la sección al apilar en 1 columna. El margen reserva ese espacio (17% del alto = ~15vw del ancho de la foto a 390). */ .fal2-elfal-media { margin-top: clamp(2.5rem, 15vw, 5rem); } /* //cambio (2026-08-24): reportado — en el Figma mobile (4018:2333) la figura va apoyada a la IZQUIERDA del recuadro (x=0, 91% de ancho), no a la derecha como en desktop. Los valores de desktop (left 30.89% / width 86.45%) quedan solo para la fila de 2 columnas. */ .fal2-elfal-figura { left: 0; width: 91%; } .fal2-como-card { grid-template-columns: 1fr; } /* //cambio (2026-08-18e): alto de la foto según mobile v6 (352 en canvas de 540, ~65vw). Valores anteriores: min-height 240 / max-height 320. */ .fal2-como-media { order: -1; min-height: 0; height: 65vw; max-height: 352px; } .fal2-calc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fal2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fal2-tile-wide { grid-column: span 2; } .fal2-contacto-card { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { /* //cambio (2026-08-18d): alto del hero mobile según Figma (640 en canvas de 540 = ~118vw, con tope 640). Valor anterior: min-height 480px. */ /* //cambio (2026-08-20d): la card del hero segun el Figma mobile (4018:1303): radius 16 (no 40) y padding 40/20 sobre canvas 540 = 7.4vw / 3.7vw. Con el padding anterior (8vw por lado) mas los botones sin escalar, los CTAs desbordaban la card ("Descargar guia" quedaba fuera de la imagen, reportado). Valor anterior: padding clamp(1.5rem, 8vw, 2.5rem) y radius heredado 40. */ /* //cambio (2026-08-20m): navbar mobile segun el Figma (4018:1273, frame Navbar 540x90) — reportado: "las puntas no alinean". En el diseno mobile NO hay card flotante: es una barra full-width sin esquinas redondeadas, con el logo y la hamburguesa a 40/540 del borde (7.4vw), ALINEADOS con las puntas del contenido de las secciones. Y el logo baja a 94/540 (17.3vw) — el fijo de 123x45 era el de desktop. Valores anteriores: .site-header padding 0.5rem 24px / .navbar-glass radius 8 padding 0.75rem 24px / logo 123x45 fijo. */ .site-header { padding: 0; } .navbar-glass { border-radius: 0; padding: 0.75rem 7.4vw; } .navbar-brand img { width: clamp(64px, 17.3vw, 123px); height: auto; } /* //cambio (2026-08-24d): reportado — el hero se ve "fijado abajo" y en el Figma no. Medido en el diseno (4018:1304): el Container es 460x560 con primaryAxisAlignItems=CENTER y el bloque de texto (365 de alto) arranca a 98 de 560 — o sea VERTICALMENTE CENTRADO, no anclado al pie. Ademas la card mide 560 sobre canvas 540 (103.7vw); nuestro 118vw salia de tomar el alto de la SECCION (640) en lugar del de la card, y por eso quedaba ~56px mas alta. OJO: el flex-end venia del 18f, cuando el texto tapaba la cara del video. Al centrarlo vuelve a subir; con el video definitivo hay que mirar la legibilidad y, si hace falta, ajustar el overlay (que hoy es mas oscuro abajo). Valores anteriores: min-height min(118vw, 640px) / align-items flex-end. */ /* //cambio (2026-08-24e): pedido — "estiralo un poco mas de arriba y abajo y baja el titulo y el sub un poquito". La card sube de 103.7vw (la medida exacta del diseno) a 112vw, que es un punto medio con los 118 que tenia antes: mas aire arriba y abajo del bloque de texto sin volver al alto anterior. El contenido sigue centrado como el Figma. */ /* //cambio (2026-08-24j): anotacion de Vale — "ver si se puede extender el alto del hero y bajar el bloque de texto y los CTAs", con frame mobile nuevo (4283:594): la card pasa a ~708 sobre canvas 540 (131vw) y el bloque de texto va ANCLADO ABAJO (los CTAs a ~40 del pie), ya no centrado. Valores anteriores: min-height min(112vw, 600px) / align-items center. */ .fal2-hero-card { padding: 7.4vw 3.7vw; min-height: min(131vw, 700px); align-items: flex-end; border-radius: 16px; } /* //cambio (2026-08-24j): el frame mobile nuevo corta el titulo "Como la / reforma laboral / se transforma / en el motor de / tu crecimiento". Medido con la fuente real: la linea mas ancha pide 8.65em y sumar la palabra siguiente 9.07em -> 8.86em reproduce ese corte a cualquier ancho (em escala con el clamp del titulo). Sin esto cortaba en otras 5 lineas ("Como la reforma / laboral se / ..."). Pisa el 14.3em de desktop solo en mobile. */ .fal2-hero-title { max-width: 8.86em; } .fal2-hero-content { max-width: none; } /* //cambio (2026-08-18f): reportado con capturas — el texto tapaba la cara del video. Tres cosas: título más chico (el 36 del Figma es sobre canvas 540: proporcional a 390 da ~26), overlay invertido (oscuro ABAJO, donde está el texto, y liviano arriba donde está la cara), y menos aire entre los elementos para que el bloque quede bajo. */ /* //cambio (2026-08-20d): titulo del hero al valor del Figma mobile: 36 sobre 540 con lh 1.16 (antes 6.7vw con lh 1.2). Queda alineado a la izquierda como el diseno (text-align ya es start). */ /* //cambio (2026-08-24e): titulo un escalon mas chico (7.74 -> 7.2vw, ~2px a 390) junto con la card mas alta. Medido con la fuente real: de 7.74 a 6.8vw el corte NO cambia (siguen las mismas 5 lineas que el diseno mobile), asi que achicar en ese rango no altera el dibujo del titulo — recien a 6.5vw pasaria a 4 lineas y ahi si cambiaria. Valor anterior: 7.74vw. */ .fal2-hero-title { font-size: clamp(1.375rem, 7.2vw, 2.25rem); line-height: 1.16; margin-bottom: 1.25rem; } .fal2-hero-sub { margin-bottom: 1.5rem; } .fal2-hero-card::before { background: linear-gradient(180deg, rgba(43, 37, 35, 0.15) 0%, rgba(43, 37, 35, 0.35) 55%, rgba(0, 0, 0, 0.6) 100%); } /* //cambio (2026-08-18f): reportado — los CTAs van UNO AL LADO DEL OTRO (Figma 4018:1303: fila con gap 16). Se achican para que entren los dos en 390: padding y tipografía menores y el círculo de flecha de 40 a 32. nowrap para que no vuelvan a apilarse. */ /* //cambio (2026-08-20d): los CTAs del hero se escalan PROPORCIONALES al canvas 540 (boton 48 de alto, label 14, circulo 40, pads 4/24, gap fila 16 -> todo /5.4 en vw). Con los valores fijos anteriores la fila media 327px y desbordaba la card (ancho util ~300); ahora mide ~280px a 390 y entra con aire, como en el diseno (fila de 392 en card de 420). Valores anteriores: padding 4/14, font 13px, circulo 32, gap 10. */ .fal2-hero-ctas { flex-wrap: nowrap; gap: 3.08vw; } /* //cambio (2026-08-20f): CTAs +4%, no +8%: con mas, la fila desborda la card */ .fal2-hero-ctas .btn-fal2-primary, .fal2-hero-ctas .btn-fal2-outline-light { padding: 0.77vw 0.77vw 0.77vw 4.62vw; font-size: clamp(0.625rem, 2.69vw, 0.875rem); gap: 2.31vw; white-space: nowrap; } .fal2-hero-ctas .btn-icon-circle { width: clamp(26px, 7.71vw, 40px); height: clamp(26px, 7.71vw, 40px); } .fal2-hero-ctas .btn-icon-circle svg { width: clamp(16px, 4.62vw, 24px); height: clamp(16px, 4.62vw, 24px); } /* //cambio (2026-08-18g): el encuadre del hero mobile según el Figma (4018:1303) — el diseño usa el MISMO video pero con la persona a la DERECHA y el texto a la izquierda, sobre el fondo. Con el center por defecto la cara caía justo abajo del título (reportado dos veces con capturas). El 22% muestra la franja izquierda del cuadro; probado en vivo contra el render del diseño. Aplica al video y al poster/imagen de fallback. OJO: está afinado para ESTE fragmento de video — si diseño entrega el mp4 definitivo con otro encuadre, retocar este número. */ /* //cambio (2026-08-25c): reportado — "en mobile la cara apenas se ve". El 22% estaba calibrado para la card de 112vw; al estirarla a 131vw (pedido de Vale, 24j) el zoom vertical crecio y la ventana horizontal visible bajo al 43% del video: con 22% la cara (que vive entre el 48%% y el 60%% del ancho del clip) quedaba CORTADA en el borde izquierdo. Verificado simulando el recorte real del cover sobre 4 momentos del video (scratchpad/sim_mobile.png): con 50%% la cara entra completa en todo el clip, sin rozar ningun borde. Valor anterior: 22%% 50%%. */ /* .fal2-hero-video { object-position: 22% 50%; } */ /* .fal2-hero-card { background-position: 22% 50%; } */ .fal2-hero-video { object-position: 50% 50%; } .fal2-hero-card { background-position: 50% 50%; } /* //cambio (2026-08-18g): BUG FIX — esta regla vieja del bloque mobile original quedaba DESPUÉS de la nueva de 18f y la pisaba (misma especificidad): el título volvía a 28-32px y seguía tapando la cara del video. */ /* .fal2-hero-title { font-size: clamp(1.75rem, 7.5vw, 2rem); } */ .fal2-hero-sub { max-width: none; } .fal2-section { padding-inline: 1rem; } /* //cambio (2026-08-20d): las elipses de blur acotadas al viewport en mobile (516-570px fijos sobre 390 desbordaban a la derecha — la causa fisica de la "barra blanca"; ver el overflow-x: clip del inicio del archivo, que es el cinturon de seguridad general). */ .fal2-elfal-blur-1 { width: 50vw; right: 0; } .fal2-elfal-blur-2 { width: 60vw; left: -10vw; } /* //cambio (2026-08-18d): gap fijo 16 en el stack (Figma mobile: KPI section gap=16). */ .fal2-chips { flex-direction: column; align-items: stretch; gap: 16px; } /* //cambio (2026-08-18f): BUG FIX mobile — el flex:1 1 0 de la base (pensado para la FILA de desktop) colapsaba las alturas al apilar en columna: las fechas desbordaban de las cards. flex 0 0 auto = cada card mide lo que mide su contenido. Valor anterior: sin flex override. */ .fal2-chip-date { flex: 0 0 auto; max-width: none; min-height: 0; padding: 20px 16px; } .fal2-chip-pill { justify-content: space-between; } .fal2-chip-pill-label { max-width: none; } /* //cambio (2026-08-18f): BUG FIX mobile — con flex:1 1 0 los 3 botones se apretaban y "Pago de indemnización" quedaba cortado. Ahora la barra scrollea horizontal y cada botón mide su contenido (el overflow-x:auto ya está en la base). Valores anteriores: btn flex 1 1 0, padding 12px 8px. */ .fal2-tabbar { display: flex; width: 100%; } /* //cambio (2026-08-20j): la barra de scroll del tabbar quedaba VISIBLE como una franja gris abajo de los botones (chequeo final mobile; en iOS es overlay y no se ve, pero en Android y desktop angosto si). El scroll horizontal sigue funcionando, solo se oculta el indicador. */ .fal2-tabbar { scrollbar-width: none; } .fal2-tabbar::-webkit-scrollbar { display: none; } /* //cambio (2026-08-24d): reportado — "Pago de indemnizacion" queda CORTADO. En el diseno mobile (4141:312) los tres tabs ENTRAN: la barra mide 482 sobre canvas 540 (89.3vw) y cada boton usa fuente 14 con padding 12/16 — todo sobre 540. Nosotros teniamos la fuente y el padding en px FIJOS de desktop (13px y 16px), que a 390 suman ~430px dentro de una barra de 332: por eso desbordaba y scrolleaba. Pasando ambos a su proporcion y dandole a la barra el ancho del diseno (sobresale 2vw por lado de la seccion, igual que en el Figma), los tres entran. Si en algun ancho no entraran, el overflow-x de la regla base sigue estando: degrada al scroll de antes, no se rompe. Valores anteriores: padding 12px 16px / font 0.8125rem. */ /* //cambio (2026-08-24e): seguia CORTADO. Rehecho con los anchos REALES del diseno en vez de estimar: en el Figma los tres botones suman 472 sobre una barra de 482 (canvas 540), o sea que a la proporcion exacta entran por 10px... pero nuestra barra de 89.3vw daba 348.9 necesarios contra 348 disponibles: se pasaba por 1px y volvia a scrollear. Se le da aire por los dos lados: barra a 92vw y padding lateral de los botones a 2.7vw (en vez de 2.96). Con eso la suma queda ~343 contra 359 disponibles: 16px de margen, que absorbe cualquier diferencia de redondeo entre navegadores. Valores anteriores: barra 89.3vw / padding 2.96vw. */ /* //cambio (2026-08-24j): anotacion de Vale (captura 17.00, marcas en los bordes) — "centrar botonera" y "ajustar padding, igual al otro extremo": los 3 botones quedaban apretados a la izquierda con el sobrante todo a la derecha. La barra ahora mide lo que miden sus botones (fit-content) y se centra; si en algun ancho no entraran, el max-width + overflow-x de la base los deja scrollear como antes. Valores anteriores: width 92vw; margin-inline -3.4vw. */ .fal2-tabbar { width: fit-content; max-width: 92vw; margin-inline: auto; } .fal2-tabbar-btn { flex: 0 0 auto; white-space: nowrap; padding: 2.22vw 2.7vw; font-size: clamp(0.5625rem, 2.59vw, 0.875rem); } /* //cambio (2026-08-25e): reportado — "ajustar padding igual al otro extremo" seguia viendose desparejo: la barra ES simetrica (4px + padding de boton en ambas puntas), pero el boton ACTIVO pinta su pastilla hasta 4px del borde mientras el inactivo es texto con padding invisible -> la punta con pastilla se ve al ras y la otra "con sobra", y se invierte segun el tab elegido. Fix optico: el primer/ultimo boton INACTIVO cede su padding exterior (queda 1vw) y el texto se acerca al borde como la pastilla; al activarse recupera el padding y la pastilla queda simetrica. Valor anterior: padding exterior siempre 2.7vw. */ .fal2-tabbar-btn:first-child:not(.active) { padding-left: 1vw; } .fal2-tabbar-btn:last-child:not(.active) { padding-right: 1vw; } /* //cambio (2026-08-18e): mobile v6 — las stats quedan 2x2 también en mobile (hereda la regla de <=991). Valor anterior: 1 columna. */ /* .fal2-calc-stats { grid-template-columns: 1fr; } */ /* //cambio (2026-08-18g): el valor de las stat-cards no entra con números largos (segmento Grande: "$3.005,1 M") y la "M" caía de línea (reportado con capturas). Tipografía fluida por ancho de pantalla + nowrap: nunca se parte, con cualquier número. Antes heredaba --fs-h3 (mínimo 24px). */ .fal2-calc-stat-value { font-size: clamp(1.125rem, 5.2vw, 1.5rem); white-space: nowrap; } /* //cambio (2026-08-24c): reportado — los labels de las 4 cards entran en TRES lineas y en el Figma son DOS. El padding de la card estaba en 24px FIJOS (heredado de desktop) mientras el diseno usa 24 sobre canvas 540 = 4.44vw (17.3px a 390): esos 13px de mas por lado dejaban la caja del texto en 112px, y "Capital acumulado" necesita 114 — por un pelo partia en "Capital / acumulado / en 3 anos". Con el padding proporcional la caja pasa a ~126px y el corte vuelve a ser el del diseno ("Capital acumulado / en 3 anos"), sin tocar la tipografia. Valor anterior: padding 24px (de la regla base). */ /* //cambio (2026-08-24e): con padding 4.44vw la caja quedaba en 123.5px y "Capital acumulado en 3 anos" seguia partiendo en TRES lineas (medido con la fuente real: Cocogoose Light a 13.4px necesita 134 para cortar en dos). Con 3vw la caja pasa a 134.7 y las cuatro cards cortan en dos lineas, sin achicar la tipografia. Es 1.4vw menos que el padding del diseno: se cede padding para respetar el corte de linea, que es lo que se ve. Valor anterior: padding 4.44vw. */ /* //cambio (2026-08-24g): seguia en TRES lineas. Medido al detalle: "Capital acumulado" mide 134.4px y la caja daba 134.7 — entraba por 0.3px, y en el navegador real (kerning + redondeo) se pasaba y partia. No alcanza con "que entre": hay que dejar MARGEN. Con padding 2.5vw y la fuente a 3.3vw la caja es 138.6 contra 129.3 de texto: 9.3px de aire, suficiente para absorber cualquier diferencia. Valores anteriores: padding 3vw / fuente 3.43vw. */ /* //cambio (2026-08-24h): TERCER intento, y ahora con la causa real. Las dos veces anteriores calcule la caja del label sobre el ancho de la SECCION, pero las stat-cards no cuelgan de la seccion: viven dentro de .fal2-calc-card, que en mobile tiene 24px FIJOS de padding por lado (el minimo de su clamp). O sea que la caja real era 114.6px, no 138 — 20px menos que lo que yo venia midiendo, y por eso "Capital acumulado" (129.3px) nunca entraba por mas que ajustara el padding de la card chica. Dos correcciones: (a) el padding de la card grande pasa a 2.5vw (9.75px a 390), que ademas es MUCHO mas cerca del diseno — en el Figma mobile (4064:5410) el contenedor mide 454 dentro de una card de 460, o sea ~3px de padding, no 24; (b) el label baja a 3vw. Resultado medido: caja 132.8 contra 117.5 de texto = 15.2px de margen, el mas holgado de todas las combinaciones probadas. Valores anteriores: card padding clamp(1.5rem,...) = 24px fijos / stat padding 2.5vw / label 3.3vw. */ .fal2-calc-card { padding: 6vw 2.5vw; } .fal2-calc-stat { padding: 2vw; } /* //cambio (2026-08-24): calculadora mobile segun el Figma (4064:5410) — reportado que no coincidia: el display es una FILA ("97" al lado de "Empleados en relacion de dependencia"), no una columna centrada, y el panel arranca desde la IZQUIERDA: toggle PyME/Grande alineado al principio (al ras de donde nace la bolita del slider), display a la izquierda. El sueldo conserva su alineacion derecha. Valores anteriores: display column centrado / label centrado max-width none / panel con justify-items center heredado. */ /* //cambio (2026-08-24j): anotacion de Vale (captura 17.01, marcas) — "centrar botonera": el toggle PyME/Grande va CENTRADO; el display y el slider conservan su alineacion izquierda (eso no lo marco). Valor anterior: todo el panel con justify-items start. */ .fal2-calc-panel { justify-items: start; } .fal2-calc-panel .fal2-toggle { justify-self: center; } .fal2-calc-display { flex-direction: row; align-items: center; text-align: left; gap: 2.22vw; } /* //cambio (2026-08-24j): anotacion de Vale (captura 17.01, palabra marcada) — "bajar la palabra marcada": el label corta "Empleados en relacion / de dependencia". Medido con la fuente real: sin "de" pide 12.3em y con "de" 14.0em -> 13.1em fuerza el corte. Valor anterior: max-width 14em (dejaba el "de" arriba). */ .fal2-calc-count-label { text-align: left; max-width: 13.1em; } /* //cambio (2026-08-20d): bento mobile al Figma 4089:534 (reportado: "todo el respaldo mal dimensionado y mal alineado"). En el diseno mobile los tiles son COMPACTOS (114-228 de alto; el minimo de 200px de la base los inflaba), los valores bajan a 64px (no 80/96), y dos tiles pasan a FILA horizontal: Trayectoria ("Trayectoria | 23 anos") y +600 ("+600 | Empresas..."). Calificaciones lleva el logo GST a la DERECHA del label (fila superior) y cada rating es una fila valor+descripcion alineada por linea de base. Los anclajes de desktop (margin-top auto del label, column-reverse del azul, max-width 49/31% de los labels anchos) se neutralizan aca. Valores anteriores: solo 1 columna, sin overrides. */ .fal2-bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; } .fal2-tile-wide { grid-column: auto; } .fal2-tile-ratings { grid-row: auto; } .fal2-tile { padding: clamp(1rem, 5.15vw, 1.5rem); gap: 0; justify-content: flex-start; } .fal2-tile-wide .fal2-tile-label, .fal2-tile-wide ~ .fal2-tile-wide .fal2-tile-label { max-width: none; } .fal2-tile-stat { gap: 1.25rem; } .fal2-tile-ratings { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } .fal2-tile-ratings .fal2-tile-label { order: 1; margin: 0; } .fal2-tile-logo { order: 2; width: clamp(80px, 22.4vw, 130px); margin: 0; } /* //cambio (2026-08-24c): reportado — "los titulos estan mas juntos en el Figma" (4089:553). El gap entre calificaciones y el aire hasta el label estaban en rem FIJOS (16 y 32) mientras el diseno los define sobre canvas 540: 16 -> 2.96vw (11.6px a 390) y 32 -> 5.93vw (23px). A 390 eso son 4.4px y 9px de mas por hueco, que es lo que se ve suelto. Valores anteriores: gap 1rem / margin-top 2rem. */ .fal2-ratings { order: 3; flex-basis: 100%; gap: 2.96vw; margin-top: 5.93vw; } /* //cambio (2026-08-24e): reportado que el tile de Calificaciones sigue distinto (4089:553). Dos desajustes de proporcion: (a) la columna del valor ocupaba 44% cuando en el diseno la descripcion arranca a 176 de 412 = 37%; (b) la descripcion estaba en 3.43vw mientras el valor iba en 6.88vw — relacion 2:1 cuando el diseno es 32:20 = 1.6:1, por eso el bloque se leia desbalanceado. Ahora columna 37% y descripcion 4.3vw (los 20 del diseno con el mismo x1.16 del valor). Verificado con la fuente real: la descripcion mas larga ("Largo Plazo | FixScr") mide 171.2px y la columna le deja 172. Valores anteriores: flex 44% / desc 3.43vw. */ .fal2-rating { display: flex; align-items: baseline; gap: 0.75rem; } .fal2-rating-val { flex: 0 0 37%; } /* //cambio (2026-08-20g): reportado — "23 anos" se partia en dos lineas (23 arriba, anos abajo): con el valor a 13.76vw la fila label+valor ya no entraba en el tile. El valor de los tiles-fila (Trayectoria y +600) baja a 11.5vw CON nowrap: nunca se parte y la fila entra. Es la unica pieza del bento que cede zoom a cambio de respetar el layout del Figma. */ .fal2-tile-stat.fal2-tile-navy { flex-direction: row; align-items: center; justify-content: flex-start; gap: 4.8vw; } .fal2-tile-stat.fal2-tile-navy .fal2-tile-value, .fal2-tile-stat.fal2-tile-azul .fal2-tile-value { font-size: clamp(1.625rem, 11.5vw, 2.75rem); white-space: nowrap; } .fal2-tile-stat.fal2-tile-azul { flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 3.2vw; } /* //cambio (2026-08-20g): reportado — el texto de +600 salia mal recortado: el tope rigido de 55% + el valor crecido no cerraban en el ancho del tile. El label ahora toma el espacio que queda (flex 1 + min-width 0) y parte donde necesite, como el diseno (2 lineas). Valor anterior: max-width 55%. */ .fal2-tile-azul .fal2-tile-label { max-width: none; flex: 1 1 auto; min-width: 0; } /* //cambio (2026-08-20k): cotejado contra el nodo 4089:677 — en el diseno el label del +600 corta en DOS lineas ("Empresas confian sus / patrimonios dia a dia"); con la fuente zoomeada (4.3vw) daba tres. Proporcion exacta (20/5.4), mismo criterio que los titulos: los cortes de linea disenados pesan mas que el zoom. */ .fal2-tile-azul .fal2-tile-label { font-size: clamp(0.75rem, 3.5vw, 1.25rem); } /* //cambio (2026-08-24f): 3.7 daba 3 lineas (medido con la fuente real); 3.5 corta en 2 como el diseno */ /* //cambio (2026-08-24c): reportado — "Activos bajo administracion AR $ MM" nos queda con el "MM" colgando y en el Figma (4089:631) corta en DOS lineas parejas: "Activos bajo administracion / AR $ MM". En el diseno la caja del label mide 287 dentro de un tile de 460 (69.7% del ancho util) y la fuente es 20. Replicando las dos cosas — caja al 69.7% y fuente proporcional — el corte sale identico al del Figma. Es el mismo criterio que ya se aplico al label del +600 (20k): donde el corte de linea es de diseno, el corte le gana al zoom. Valores anteriores: max-width none y fuente 4.3vw (heredada de .fal2-tile-label). */ .fal2-tile-wide .fal2-tile-label { max-width: 69.7%; font-size: clamp(0.75rem, 3.7vw, 1.25rem); } .fal2-form { padding: 1.5rem 1.25rem; } /* //cambio (2026-08-18d): orden del contacto en mobile según Figma 4018:1273 — título y texto arriba, FORM en el medio y el mail DEBAJO del form. display:contents "sube" los hijos de .fal2-contacto-info al flex de la card para poder intercalar el form; cada hijo recupera position:relative para quedar por encima del overlay (::before) de la card. */ /* //cambio (2026-08-20d): el contacto mobile vuelve al Figma vigente (4018:1874) — card CON foto de fondo y overlay azul, radius 16, contenido arriba (titulo 24 / texto 14 / MAIL antes del form, en blanco) y form blanco CON borde #bbcae8 y radius 16 al pie, full width de la card. Lo anterior ("mobile v6": seccion blanca sin foto y mail despues de Enviar) respondia a una version vieja del diseno (reportado: sin imagen de fondo, sin borde, mail desperdigado abajo de Enviar). Valores anteriores: title order -3 sin margen / mail order 1 margin-top 1.25rem / form sin radius propio. */ .fal2-contacto-card { display: flex; flex-direction: column; padding: 0; border-radius: 16px; overflow: hidden; } .fal2-contacto-info { display: contents; } .fal2-contacto-info > * { position: relative; z-index: 1; } .fal2-contacto-title { order: -3; margin: 3rem 1.5rem 0; } .fal2-contacto-text { order: -2; margin: 1.5rem 1.5rem 0; } .fal2-contacto-mail { order: -1; margin: 1.5rem; align-self: flex-start; } .fal2-contacto-row { order: -1; margin: 0 1.5rem 1.5rem; align-self: flex-start; } .fal2-form { order: 0; width: 100%; border-radius: 16px; } /* //cambio (2026-08-20d): ELIMINADO el bloque "mobile v6" de 18e (dejaba la seccion blanca: background-image none !important + textos azul/gris + form sin borde ni sombra). El Figma vigente (4018:1874) mantiene foto + overlay + textos blancos como en desktop, asi que esas sobrescrituras se quitan y solo se ajusta el padding del form (27px del canvas 540 -> 1.7rem laterales, 2.5rem arriba). El borde y la sombra del form vuelven a ser los de la base. */ .fal2-form { padding: 2.5rem 1.7rem; } /* //cambio (2026-08-31b): el achique x0.8 del contacto es SOLO desktop — aca se restauran los valores previos de la base para que mobile quede EXACTO como estaba: inputs de 48px con fuente 1rem (16px: con menos iOS zoomea al enfocar, excepcion de la doctrina) y los gaps del form. Sin estas lineas, el x0.8 de arriba se filtraba a mobile. */ .fal2-form { gap: 1.25rem; } .fal2-form-fields { gap: 1.75rem; } .fal2-input { height: 48px; padding: 12px 16px 12px 8px; font-size: 1rem; } /* //cambio (2026-08-24c): reportado — el banner "¿Tenes dudas sobre la nueva ley?" se ve CUADRADO y en el Figma es un RECTANGULO. Causa: estabamos usando los tamanos de desktop (titulo 32 / bajada 20) cuando el diseno mobile (4064:5410) los define en 24 y 16 — un 33% y 25% mas chicos. Con el x1.16 encima, el titulo daba 26.8px y partia en dos lineas, y la bajada en dos mas: cuatro lineas de texto inflaban la card hasta volverla cuadrada. Se vuelve a los valores del diseno (proporcion pura) y el padding lateral pasa a 4vw (~21.5 del canvas 540) para dar el ancho que el titulo necesita. Valores anteriores: padding 2rem 1.25rem; titulo 6.88vw; bajada 4.3vw. */ /* //cambio (2026-08-24e): BUG DE CASCADA — estas dos reglas NUNCA se aplicaron: el bloque de calibracion del final de este mismo media query vuelve a declarar .fal2-faqbanner-title y -sub con la misma especificidad, y al estar DESPUES gana el. Por eso el banner seguia cuadrado aunque el CSS estaba deployado. Los valores corregidos (y medidos) van ahora en ese bloque de abajo; aca queda solo el padding, que no compite con nadie. .fal2-faqbanner-title { font-size: clamp(1rem, 4.44vw, 1.5rem); } .fal2-faqbanner-sub { font-size: clamp(0.6875rem, 2.96vw, 1rem); } */ /* //cambio (2026-08-24g): seguia CUADRADO aunque titulo y bajada ya entraban en una linea. El problema que faltaba era el RITMO VERTICAL, todo en px fijos de desktop: padding 32, gap 24 y el boton de 48. Sumados dan 193px de alto contra 332 de ancho = 1.72:1, cuando el diseno (4064:5552) es 460x188 = 2.45:1. Pasando los tres a su proporcion sobre canvas 540 (32 -> 5.93vw, 24 -> 4.44vw, boton 48 -> circulo 7.4vw + pads 0.74vw) el alto baja a ~149 y el ratio a 2.23:1, que ya se lee como rectangulo. Valores anteriores: padding 2rem, gap 1.5rem (de la regla base) y boton con el pill de tamano fijo. */ /* //cambio (2026-08-24i): el padding lateral baja de 4.44vw a 2.5vw. Motivo: con 4.44 la caja de texto queda en 298px y el titulo, al tamano del Figma, necesita 309 -> partia en dos lineas. Con 2.5vw la caja pasa a 313 y entra en UNA linea al tamano del diseno, sin achicar nada. El gap tambien baja (4.44 -> 2.96vw): en el Figma el titulo, la bajada y el boton practicamente no tienen aire entre si (card 188 de alto = 48+48 de padding + 92 de contenido justo), y ese aire de mas era parte de lo que inflaba la card hacia el cuadrado. Valores anteriores: padding 5.93vw 4.44vw; gap 4.44vw. */ .fal2-faqbanner { padding: 5.93vw 2.5vw; gap: 2.96vw; border-radius: 12px; } /* //cambio (2026-08-18e): radius 24->12 en mobile (Figma v6) */ .fal2-faqbanner .btn-fal2-outline-light { padding: 0.74vw 0.74vw 0.74vw 4.44vw; font-size: clamp(0.625rem, 2.59vw, 0.875rem); gap: 2.22vw; } .fal2-faqbanner .btn-icon-circle { width: clamp(26px, 7.4vw, 40px); height: clamp(26px, 7.4vw, 40px); } .fal2-faqbanner .btn-icon-circle svg { width: clamp(16px, 4.44vw, 24px); height: clamp(16px, 4.44vw, 24px); } /* //cambio (2026-08-24j): anotacion de Vale (captura 17.01 del respaldo, esquina marcada en la card de contacto) — "todos los corners radius deben ser iguales a este": las cards grandes de mobile unifican en 16 (las que heredaban los 24 de desktop: tiles del bento, cards de reforma/gestion, card de tabs, card de la calculadora). Quedan en 12 los elementos chicos que el diseno mobile define asi (chips del cronograma, cajas internas, banner FAQ 4064:5552). Valor anterior: 24 heredado de --radius-lg en todos estos. */ .fal2-card, .fal2-como-card, .fal2-calc-card, .fal2-tile { border-radius: 16px; } .fal-footer { padding: 2.5rem 0; } .fal-footer .container { padding-inline: 1.875rem; } /* Figma: laterales 30px */ /* //cambio: en mobile las filas de cards pasan a carrusel Swiper (initResponsiveSwiper de fal2.js, mismo patrón que la v1: se instancia solo abajo de 768 y se destruye al volver a desktop). Cuando el carrusel está activo el JS agrega .is-swiper y el grid deja de aplicar. */ .fal2-reforma-row.is-swiper, .fal2-gestion-row.is-swiper { display: block; max-width: none; } /* //cambio (2026-08-20e): reportado en iPhone — "barra blanca vertical como una barrera" a la derecha en las secciones con carrusel: el overflow hidden del swiper cortaba la card vecina justo donde termina el padding lateral (7.4vw), dejando una columna blanca entre la card cortada y el borde del celu. Con overflow visible el carrusel sangra hasta el borde de la pantalla (la card que asoma se corta EN el borde, como en el diseno); el desborde lo contiene el overflow-x: clip de html/body declarado al inicio del archivo — van en pareja: sin ese clip esto ensancharia la pagina. Valor anterior: overflow hidden (del CSS de Swiper). */ .fal2-reforma-row.is-swiper, .fal2-gestion-row.is-swiper { overflow: visible; } /* //cambio (2026-08-18g): cards de los carruseles a la MISMA altura (en el Figma todas miden igual; cada slide tomaba el alto de su contenido y quedaban desparejas — reportado con capturas). El wrapper de Swiper es flex con stretch: slide flex + card al 100% lo resuelve. Valor anterior de la card: height: auto. */ .fal2-reforma-row.is-swiper .swiper-slide, .fal2-gestion-row.is-swiper .swiper-slide { display: flex; height: auto; } .fal2-reforma-row.is-swiper .fal2-reforma-card, .fal2-gestion-row.is-swiper .fal2-gestion-card { display: flex; flex-direction: column; height: 100%; width: 100%; } /* //cambio (2026-08-24b): mismo criterio que en desktop (Figma 4187:2073: Content align=CENTER). En el carrusel todas las cards miden lo del slide mas alto, asi que la de 3 checks tenia 23px arriba y 56 abajo (medido en vivo). Centrando el contenido, el sobrante se reparte y el padding interno queda igual arriba y abajo en las tres. */ /* //cambio (2026-08-24j): anotacion de Vale (captura mobile 16.21, lineas marcadas) — "alinear txt arriba" tambien en el carrusel: el contenido de las cards del swiper alinea por ARRIBA, no centrado. Deshace el centrado del 24b. Valor anterior: justify-content: center. */ .fal2-reforma-row.is-swiper .fal2-reforma-card { justify-content: flex-start; } /* //cambio (2026-08-20i): "dejar mismo margen arriba y abajo" (Ajustes 4187:2069) — en el carrusel las cards miden lo del slide mas alto y la card 1 quedaba con un vacio grande abajo del footnote. La foto absorbe el sobrante empujandose (junto al footnote) contra el pie: el margen inferior queda igual al superior en todas. */ .fal2-gestion-row.is-swiper .fal2-gestion-cover { margin-top: auto; } /* ============================================================ //cambio (2026-08-20c): CALIBRACION PROPORCIONAL DEL MOBILE. El canvas mobile del Figma es 540px y un telefono real ~390: los tamanos copiados LITERALES quedaban un 38% mas grandes que la proporcion del diseno. Conversion base: px_figma / 5.4 = vw. //cambio (2026-08-20d): +7.5% sobre la proporcion exacta (reportado en iPhone 15: "encaja pero lo veo chico"). //cambio (2026-08-20f): otro +8% general pedido tras probar en el telefono. Factor total = 1.075 * 1.08 = 1.16: todos los vw mobile (este bloque + hero/bento/contacto de arriba) = px_figma / 5.4 * 1.16 (ej: 32px -> 6.88vw -> 26.8px a 390). Es un zoom UNIFORME: las proporciones entre elementos no cambian. El padding lateral de seccion queda proporcional puro (7.4vw) para no comer ancho util. EXCEPCIONES: los CTAs del hero crecen solo +4% total (con +8% la fila desbordaria la card) y .fal2-calc-stat-value no crece (los importes del segmento Grande ya van justos en su caja). //cambio (2026-08-20h): los TITULOS vuelven a la proporcion EXACTA del Figma (px/5.4, sin el x1.16) — reportado: "los titulos quedaron todos mal". Con el zoom cortaban las lineas en otro lado que el diseno (los cortes de los titulos son disenados) y la jerarquia quedo inconsistente (H3 mas grande que H2). El x1.16 queda SOLO en el cuerpo: bajadas, listas, labels, footnotes — donde el corte de linea no es de diseno. Titulos revertidos: hero, H2, H3, titulos de cards (reforma/gestion/beneficios), eyebrow, fechas del cronograma, banner FAQ y titulo del contacto. Va AL FINAL del bloque mobile a proposito para ganar el cascade a las reglas de arriba. PISOS de legibilidad: cuerpo 11px, chico 10px, footnotes 9px — por debajo de eso se sacrifica fidelidad por lectura. EXCEPCIONES deliberadas (usabilidad, NO se achican): inputs del form (16px: iOS hace zoom automatico con menos), botones pill, tabs, toggle PyME/Grande y links del menu. Los line-height son ratios y escalan solos. ============================================================ */ /* //cambio (2026-08-20g): reportado — con el +8% (6.88vw) "El respaldo con el que Grupo ST administra tu FAL" pasaba a 3 lineas cuando el Figma lo corta en 2. La linea larga del diseno ("Grupo ST administra tu FAL") necesita <=6.2vw para entrar en el ancho util de 390. La paridad de lineas con el diseno pesa mas que el zoom en los titulos. Valor anterior: 6.88vw. */ /* //cambio (2026-08-24): UNIFICACION aprobada — los titulos toman el MISMO x1.16 del cuerpo (la mezcla exacto/zoomeado hacia sentir chica la landing). Guardas puntuales: el H2 del respaldo se capa a 6.2vw (debe cortar en 2 lineas) y el label del +600 queda en 3.7vw (2 lineas); el resto se verifico linea por linea contra el Figma. Valores anteriores: h2/h3/faqbanner 5.93, hero 6.67, eyebrow 3.7, reforma-card 5.19, chip 6.67, gestion/contacto 4.44. */ .fal2-h2 { font-size: clamp(1.25rem, 6.88vw, 2rem); } /* 32 @540 x1.16 */ /* //cambio (2026-08-24): guardas medidas EMPIRICAMENTE a 390 (binary search en vivo): estos tres titulos rozan el ancho y con 6.88 cambiaban su corte respecto del Figma (reforma y gestion pasaban de 1 a 2 lineas; respaldo de 2 a 3). Tope = maximo que conserva el corte, con 0.1vw de margen. Al estar todo en vw, la paridad vale en cualquier ancho de telefono. */ #reforma .fal2-h2 { font-size: clamp(1.25rem, 6vw, 2rem); } /* guarda: 1 linea */ #gestion .fal2-h2 { font-size: clamp(1.25rem, 6vw, 2rem); } /* guarda: 1 linea */ #respaldo .fal2-h2 { font-size: clamp(1.25rem, 5.9vw, 2rem); } /* guarda: 2 lineas */ /* //cambio (2026-08-24c): reportado — "El FAL como instrumento" no se ve como en el Figma: en el diseno (4018:2326) el titulo entra en 3 LINEAS (fs 32, caja 460 de 540) y con el x1.16 nos daba 4-5. Como nuestra caja es 85.2vw = la misma proporcion que la del diseno, con la fuente proporcional (32/5.4) el corte queda igual al del Figma por construccion. Cuarta guarda de titulos, misma logica que las tres de arriba. */ #el-fal .fal2-h2 { font-size: clamp(1.25rem, 5.93vw, 2rem); } /* guarda: 3 lineas */ /* //cambio (2026-08-24f): medido — "¿Como funciona el FAL?" partia en dos lineas y en el diseno mobile (4141:312) va en UNA (ahi el titulo es 36, mas grande que el resto, en una caja de 430). Quinta guarda de titulos. */ #como-funciona .fal2-h2 { font-size: clamp(1.25rem, 6.5vw, 2.25rem); } /* guarda: 1 linea */ .fal2-h3 { font-size: clamp(1.125rem, 6.88vw, 2rem); } /* 32 x1.16 */ /* //cambio (2026-08-24f): AUDITORIA CON LAS FUENTES REALES (fontTools sobre los .woff del tema, no estimando anchos de caracter). A 3.43vw las bajadas de reforma y de "El FAL como instrumento" caian en 4 lineas donde el diseno tiene 3, y la de la calculadora en 2 donde tiene 1. A 3.2vw las cuatro coinciden con el Figma. La unica que no cierra es la del respaldo (nos da 2 y el diseno 3), pero ahi el diseno tiene una linea DE MAS por un salto manual, no por ancho: no vale romper las otras cuatro por esa. Valor anterior: 3.43vw. */ /* //cambio (2026-08-24j): anotacion de Vale (capturas mobile 16.51 y 17.00 + refe 17.14) — "los textos de las bajadas quedaron muy chicos. Subir 2 ptos" y "aumentar el tamano de la bajada... aplicarlo en todos los titus y bajadas de este estilo". +2px a 390: 12.5 -> 14.5 (3.71vw). OJO: con esto las bajadas de reforma/el-fal/cronograma/respaldo ganan una linea respecto del Figma (medido con la fuente real: 3->4 y 2->3) — decision de Vale: la legibilidad le gana al corte. Valor anterior: 3.2vw (de la auditoria de cortes del 24f). */ .fal2-section-sub { font-size: clamp(0.75rem, 3.71vw, 1rem); } /* 16 +2px */ /* //cambio (2026-08-24j): la refe 17.14 fija 32 (sobre canvas 540 = 5.93vw) entre titulo y bajada. Los margenes estaban en rem fijos de desktop (32px reales a 390 en el h2 y 24 en el h3 del cronograma). Valores anteriores: h2 margin-bottom 2rem / h3 del cronograma 1.5rem. */ .fal2-h2 { margin-bottom: 5.93vw; } .fal2-cronograma .fal2-h3 { margin-bottom: 5.93vw; } .fal2-eyebrow { font-size: clamp(0.75rem, 4.3vw, 1.25rem); } /* 20 x1.16 */ .fal2-hero-sub { font-size: clamp(0.75rem, 3.9vw, 1.25rem); } /* 20 — //cambio (2026-08-24e): un escalon mas chico con el hero; sigue en 2 lineas */ .fal2-reforma-card-title { font-size: clamp(1rem, 6.03vw, 1.75rem); } /* 28 x1.16 */ .fal2-reforma-icon { min-height: 0; } .fal2-reforma-icon img { width: clamp(32px, 10.3vw, 48px); height: auto; } /* //cambio (2026-08-21): 48@540 proporcional */ /* //cambio (2026-08-24): el interior de la card, proporcional al diseno mobile (4018:2140: card 380 con padding 24/40 y aires de 40 icono->titulo y 47 bajada->lista, sobre canvas 540). En mobile estaban en rem fijos heredados del desktop (24/24, 32 y 39): mas apretado a los lados y mas suelto de arriba abajo que el diseno — el "angosto y espaciado" reportado. Junto con el ancho de card corregido en fal2.js, la card queda 1:1 con el Figma. */ .fal2-reforma-card { padding: 4.44vw 7.4vw; } .fal2-reforma-icon { margin-bottom: 7.4vw; } .fal2-reforma-card .fal2-checklist { margin-top: 8.7vw; } .fal2-reforma-card-sub { font-size: clamp(0.75rem, 3.87vw, 1.125rem); } /* 18 */ .fal2-checklist li, .fal2-checklist-lg li { font-size: clamp(0.6875rem, 3.43vw, 1rem); } /* 16 */ .fal2-checklist-xl li { font-size: clamp(0.75rem, 4.3vw, 1.25rem); } /* 20 */ /* //cambio (2026-08-24f): medido — a 4.3vw el cierre caia en 6 lineas y el diseno lo corta en 5. A 4vw coincide. */ .fal2-reforma-cierre { font-size: clamp(0.8125rem, 4vw, 1.25rem); } /* 20 */ /* //cambio (2026-08-20m): reportado — "Sin costo adicional" quedaba MAS CHICO que su texto (titulo en proporcion exacta 3.7vw vs texto zoomeado 4.3vw), y el Figma mobile los tiene IGUALES (20 y 20 sobre canvas 540; el heading 24). Se igualan al valor zoomeado del cuerpo y el heading conserva la relacion 24/20 del diseno (4.3 x 1.2 = 5.16). Estos titulos son cortos y no tienen corte de linea disenado, asi que el zoom no rompe nada. Valores anteriores: heading 4.44vw / titulo 3.7vw / texto 4.3vw. */ .fal2-benefits-title { font-size: clamp(0.875rem, 5.16vw, 1.5rem); } /* 24 (ratio 24/20 sobre el cuerpo) */ .fal2-benefit-title { font-size: clamp(0.75rem, 4.3vw, 1.25rem); } /* 20 — IGUAL que el texto (Figma mobile) */ .fal2-benefit-text { font-size: clamp(0.75rem, 4.3vw, 1.25rem); } /* 20 */ .fal2-chip-fecha { font-size: clamp(1.25rem, 7.74vw, 2.25rem); } /* 36 x1.16 */ /* //cambio (2026-08-25d): las descripciones de las cards de fecha del cronograma tambien reciben el "+2 ptos" de Vale (24j) — estan en la misma captura mobile (16.51) donde marco "los textos quedaron muy chicos" y habian quedado afuera del aumento: 11.7 -> 13.7px a 390. Sin riesgo de cortes: las descripciones largas traen sus saltos de linea MANUALES desde el campo ACF (new_lines br) y la linea mas larga entra holgada en la card. Los numeros de fecha no cambian (ya tenian su zoom x1.16). Valor anterior: 3vw. */ .fal2-chip-desc { font-size: clamp(0.6875rem, 3.51vw, 0.875rem); } /* 14 +2px */ .fal2-como-rate p { font-size: clamp(0.6875rem, 3.87vw, 1.125rem); } /* 18 */ .fal2-como-box-title { font-size: clamp(0.6875rem, 3.43vw, 1.125rem); } /* 16 */ /* //cambio (2026-08-24c): reportado — "Esquema de aportes" tiene que ir en UNA sola linea. En el diseno mobile (4141:311) el titulo de la card es 24, no 32 como en desktop: estabamos usando el .fal2-h3 general (6.88vw = 26.8px a 390) y el titulo mas largo del tab ("Pago de indemnizacion") no entraba en el ancho del cuerpo. Con el 24 del diseno los tres entran en una linea. */ .fal2-como-body .fal2-h3 { font-size: clamp(1rem, 4.44vw, 1.5rem); } /* 24 del diseno mobile */ /* //cambio (2026-08-24c): los items de "Condiciones" son 18 en el diseno (no 16 como el resto de las listas), tambien en mobile. Se separan de la regla generica de checklists. */ .fal2-checklist-lg li { font-size: clamp(0.75rem, 3.87vw, 1.125rem); } /* 18 */ .fal2-como-box-text { font-size: clamp(0.625rem, 3vw, 0.875rem); } /* 14 */ .fal2-gestion-title { font-size: clamp(0.875rem, 5.15vw, 1.5rem); } /* 24 x1.16 */ /* //cambio (2026-08-26): reportado — "Tu fondo se mueve con vos" dejaba el "vos" HUERFANO en su propia linea (medido: la caja del titulo en el carrusel da ~254px y "Tu fondo se mueve con" pide 248: entra por 6px y el "vos" cae solo). text-wrap: balance reparte las palabras en lineas parejas ("Tu fondo se / mueve con vos") y por especificacion NUNCA aumenta la cantidad de lineas — no puede romper los otros titulos ni ningun contenido futuro del ACF. Navegadores viejos sin soporte lo ignoran y queda como hoy (degrada, no rompe). */ .fal2-gestion-title { text-wrap: balance; } .fal2-gestion-item { font-size: clamp(0.6875rem, 3.43vw, 1rem); } /* 16 */ .fal2-gestion-item.has-label, .fal2-gestion-item-label { font-size: clamp(0.625rem, 3vw, 0.875rem); } /* 14 */ .fal2-gestion-foot { font-size: clamp(0.5625rem, 2.15vw, 0.6875rem); } /* 10 */ .fal2-calc-count { font-size: clamp(2.5rem, 17.18vw, 5rem); } /* 80 */ .fal2-calc-count-label { font-size: clamp(0.6875rem, 3.43vw, 1rem); } /* 16 */ .fal2-calc-sueldo { font-size: clamp(0.625rem, 3vw, 0.875rem); } /* 14 */ .fal2-calc-stat-label { font-size: clamp(0.6875rem, 3vw, 1rem); } /* 16 — //cambio (2026-08-24h): 3.3 -> 3, ver la nota de .fal2-calc-card */ .fal2-calc-stat-value { font-size: clamp(1rem, 6.37vw, 2rem); } /* 32 — pisa el 5.2vw de arriba. NO recibe el +8% de 20f: importes largos (Grande) justos en caja */ .fal2-calc-disclaimer { font-size: clamp(0.5625rem, 2.15vw, 0.6875rem); }/* 10 */ /* //cambio (2026-08-24e): el banner "¿Tenes dudas...?" es un RECTANGULO en el diseno (4064:5552: card 460x188 = 2.45:1) y nos quedaba cuadrado porque titulo y bajada partian en dos lineas cada uno. Medido con las fuentes reales del tema a 390: con la caja de la card (297px utiles) el titulo entra en una linea hasta 4.27vw y la bajada hasta ~2.87vw. Se toman 4vw y 2.7vw para dejar margen. El diseno los define en 24 y 16 sobre canvas 540 (4.44 y 2.96vw): quedamos apenas por debajo, que es el precio de que entren en una linea con el padding real de la card. Valores anteriores: 6.88vw (los 32 de DESKTOP) y 4.3vw. */ /* //cambio (2026-08-24i): reportado que el banner quedo TODO CHICO. Era culpa mia: para forzar la bajada en UNA linea la habia bajado a 2.55vw = 9.9px en un telefono de 390, el texto mas chico de toda la landing. Medido con las fuentes reales, esa linea unica era IMPOSIBLE: al tamano del Figma la bajada necesita 337px y la card entera mide 332 — no entra ni sacandole todo el padding. Y en el propio Figma tampoco entra: pide 467px dentro de un marco de 412, se desborda 55px; Figma deja el texto salirse del marco, un navegador no. Asi que se vuelve a los tamanos EXACTOS del diseno (24 y 16 sobre canvas 540 = 4.44 y 2.96vw). El titulo entra en una linea gracias al padding lateral mas chico de la regla de arriba; la bajada cae en dos, que es la unica forma real de mostrarla completa a su tamano. Valores anteriores: titulo 4vw, bajada 2.55vw. */ .fal2-faqbanner-title { font-size: clamp(1rem, 4.44vw, 1.5rem); } /* 24 del diseno mobile */ .fal2-faqbanner-sub { font-size: clamp(0.6875rem, 2.96vw, 1rem); } /* 16 del diseno mobile */ .fal2-tile-label { font-size: clamp(0.75rem, 4.3vw, 1.25rem); } /* 20 */ .fal2-tile-value { font-size: clamp(1.875rem, 13.76vw, 3.25rem); } /* 64 del bento mobile (4089:534) */ /* 80 */ .fal2-tile-wide .fal2-tile-value { font-size: clamp(1.875rem, 13.76vw, 3.25rem); } /* mobile: tambien 64 */ .fal2-rating-val { font-size: clamp(1.25rem, 6.88vw, 2rem); } /* 32 del bento mobile */ /* 48 */ .fal2-rating-desc { font-size: clamp(0.6875rem, 4.3vw, 1.25rem); } /* 20 x1.16 — relacion 32:20 del diseno */ /* .fal2-tile-logo: ancho mobile (104px, fila superior del tile) definido en el bloque bento de arriba */ .fal2-contacto-title { font-size: clamp(1.125rem, 5.15vw, 1.625rem); } /* 24 (4018:1874) x1.16 */ .fal2-contacto-text { font-size: clamp(0.6875rem, 3vw, 0.9375rem); } /* 14 (4018:1874) */ .fal2-contacto-mail span { font-size: clamp(0.6875rem, 3vw, 0.9375rem); } /* 14 */ /* padding lateral de secciones: 40 sobre canvas 540 = 7.4vw (28.9 a 390). Antes: 1rem fijo, que dejaba el contenido mas ancho que la proporcion del diseno. */ .fal2-section { padding-inline: 7.4vw; } .fal2-hero { padding-inline: 7.4vw; } }