/* ════════════════════════════════════════════════════════════════
EXANTE DESIGN SYSTEM v0.5.1 — Tokens inlinados desde
/Exante Design System/colors_and_type.css (fuente de verdad).
Inlinados (no linkeados) porque Netlify sólo sirve archivos
dentro de Front/. La declaración local :root de más abajo
alias-mapea sus tokens propios a estos var(--color-*).
════════════════════════════════════════════════════════════════ */
:root {
/* SURFACES — Cool white */
--color-bg: #FAFBFC;
--color-bg-subtle: #F2F4F6;
--color-surface: #FFFFFF;
--color-surface-warm: #F2F4F6;
--color-bg-inverse: #0F1419;
/* Borders */
--color-border-subtle: #E5E7EB;
--color-border-default: #D1D5DB;
--color-border-strong: #0F1419;
--color-hairline: var(--color-border-subtle);
--color-hairline-strong: var(--color-border-default);
/* Dark surfaces */
--color-bg-dark: #0F1419;
--color-surface-dark: #1A2026;
--color-surface-dark-2: #262E36;
--color-hairline-dark: rgba(255, 255, 255, 0.08);
/* TEXT — Cool ink */
--fg1: #0F1419;
--fg2: #4B5563;
--fg3: #8B92A1;
--fg4: #8B92A1; /* S84 handoff 2 §2 · homologado a --fg3 para que ningún texto gris sea más claro */
--fg-inverse: #FFFFFF;
--fg1-dark: #FFFFFF;
--fg2-dark: #B8BDC7;
--fg3-dark: #8B92A1;
--color-ink: var(--fg1);
--color-ink-700: var(--fg2);
--color-ink-muted: var(--fg3);
--color-ink-hint: var(--fg4);
/* ACTION */
--color-action-ink: #0F1419;
--color-action-ink-hover: #1F262E;
--color-action-ink-press: #1F262E;
--color-action-text-on: #FFFFFF;
/* ACCENT GREEN — brand + sales-CTA + success */
--color-accent-green: #1FAE5F;
--color-accent-green-deep: #16904E;
--color-accent-green-press: #0E7A3F;
--color-accent-green-on-dark: #5EE39E;
--color-accent-green-tint-8: rgba(31, 174, 95, 0.08);
--color-accent-green-tint-14: rgba(31, 174, 95, 0.14);
--color-accent-green-stroke: rgba(31, 174, 95, 0.18);
--color-accent-green-bg: #E6F7EE;
/* SEMANTIC */
--color-success: var(--color-accent-green);
--color-success-deep: var(--color-accent-green-deep);
--color-success-tint: #D8EEDF;
--color-warning: #E89B2A;
--color-warning-deep: #B07614;
--color-warning-tint: #FAE5CC;
--color-error: #B83227;
--color-error-deep: #8C2018;
--color-error-tint: #F4DCD7;
--color-info: #3A6FB5;
--color-info-deep: #265489;
--color-info-tint: #DCE6F1;
--color-notice: #6E7378;
--color-notice-deep: #0F1419;
--color-notice-tint: #E8E9EA;
--color-notice-stroke: rgba(110, 115, 120, 0.22);
/* EDITORIAL (landing only) */
--color-rose: #C42784;
--color-rose-bg: #F9DAEC;
--color-rose-deep: #8C1B5E;
--color-violet: #7A5BC2;
--color-violet-bg: #EBE3F6;
--color-volt: #5A6CE5;
--color-volt-bg: #E5E8FB;
--color-volt-deep: #3142B8;
--color-teal: #1A8B82;
--color-teal-bg: #DEEFEC;
--color-teal-deep: #0F6860;
--color-pine: #1A7A72;
--color-pine-bg: #D8EDEB;
--color-pine-deep: #0F5750;
/* TYPE — Inter + Playfair (cargados vía Google Fonts ) */
--font-sans: "Inter", -apple-system, "system-ui", sans-serif;
--font-display: "Playfair Display", "Iowan Old Style", "Apple Garamond", Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--fs-display-xl: 56px;
--fs-display-lg: 40px;
--fs-display-md: 32px;
--fs-display-sm: 24px;
--fs-h1: 24px;
--fs-h2: 18px;
--fs-h3: 16px;
--fs-body-lg: 16px;
--fs-body: 14px;
--fs-body-sm: 13px;
--fs-caption: 12px;
--fs-eyebrow: 11px;
--fs-button-lg: 15px;
--fs-button: 14px;
--fs-button-sm: 13px;
--fs-num-xl: 56px;
--fs-num-lg: 40px;
--fs-num-md: 24px;
--fs-num-data: 14px;
--lh-tight: 1.1;
--lh-snug: 1.2;
--lh-normal: 1.55;
--lh-relaxed: 1.6;
--tracking-eyebrow: 0.12em;
--tracking-tight: -0.005em;
--tracking-display: -0.02em;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
/* RADII */
--ds-radius-sm: 6px;
--ds-radius-md: 10px;
--ds-radius-lg: 16px;
--ds-radius-xl: 20px;
--ds-radius-pill: 999px;
/* SPACING */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px;
/* MOTION (handoff v0.6 · fuente de verdad) */
--motion-fast: 120ms;
--motion-base: 200ms;
--motion-slow: 320ms;
--motion-extra: 480ms;
--ease-default: cubic-bezier(0.32, 0.72, 0, 1);
--ease-emphasis: cubic-bezier(0.34, 1.26, 0.58, 1);
--ease-spring: linear(0, 0.006, 0.026 2.7%, 0.112 5.5%, 0.477 13.5%, 0.654, 0.793, 0.897 26.4%, 0.961, 0.997, 1.014, 1.02 38.6%, 1.018, 1.01, 1.002, 0.997, 0.997 56%, 1.0 70%, 1.0);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--ease-out: var(--ease-default);
/* GRADIENTS — verde family solamente */
--gradient-brand: linear-gradient(to right, #1A7A72, #1FAE5F);
--gradient-brand-reverse: linear-gradient(to right, #1FAE5F, #1A7A72);
--gradient-brand-diagonal: linear-gradient(135deg, #1A7A72, #1FAE5F);
--gradient-green-mint: linear-gradient(to right, #1FAE5F, #5EE39E);
--gradient-pine-green-mint: linear-gradient(to right, #1A7A72, #1FAE5F, #5EE39E);
--focus-ring: none; /* S111+ · sin halo/glow · solo cambio de borde en focus */
}
:root {
/* ══════════════════════════════════════════════════════
EXANTE — Tokens locales del index.html (alias bridge al DS v0.5.1).
Los nombres locales se preservan para no romper selectores existentes
pero sus VALORES vienen del DS arriba. Donde un token local no mapea
1:1 al DS, se documenta con un comentario "TODO mapping".
══════════════════════════════════════════════════════ */
/* ── Brand canonical tokens · ALIAS al DS v0.5.1 ──
Antes esta sección declaraba el legacy purple (--volt:#4F46E5) + Spring
colors (jade/lime/cypress) que el DS ya no soporta. Ahora todo es alias
al accent-green del DS para landing/ventas. */
--graphite: var(--fg1); /* #0F1419 */
--volt: var(--color-accent-green); /* legacy purple → verde DS */
--volt-dark: var(--color-accent-green-deep);
--volt-deeper: var(--color-accent-green-press);
--volt-soft: var(--color-accent-green-tint-8);
--volt-100: var(--color-accent-green-bg);
--volt-200: var(--color-accent-green-tint-14);
--pine: var(--color-pine); /* TODO mapping: pine DS = #1A7A72 (más sat) vs local #0F8181 */
--pine-dark: var(--color-pine-deep);
--pine-soft: var(--color-pine-bg);
--cypress: var(--color-pine-deep); /* legacy #0A4540 → pine-deep DS */
--jade: var(--color-accent-green); /* Spring color #10B981 fuera DS → accent-green */
--jade-dark: var(--color-accent-green-deep);
--jade-deeper: var(--color-accent-green-press);
--jade-soft: var(--color-success-tint);
--lime: var(--color-accent-green); /* TODO mapping: #D9F060 lime no existe en DS → accent-green provisional */
--lime-soft: var(--color-success-tint);
/* ── Core palette ── */
--black: #0F1419; /* ink-primary · única superficie dark · Graphite */
--white: #FFFFFF;
/* ── Neutral scale (Exante: ice/cloud/mist/steel) ── */
--grey-100: #F5F6F8; /* cloud · bg-secondary */
--grey-95: #FAFBFC; /* ice · bg-tertiary */
--grey-90: #EEF1F4; /* border default */
--grey-80: #A2ADB9; /* mist · border-strong */
--grey-70: #94A2B0; /* steel · ink-muted */
--grey-60: #5C6B7A; /* slate-400 · ink-tertiary */
--grey-50: #3A4654; /* slate-600 · ink-secondary */
--grey-40: #0F1419; /* graphite · ink-primary */
--grey-30: #0F1419;
--grey-20: #0F1419;
/* ── Neutral aliases (backward compat) ── */
--shark: var(--black);
--gray-50: var(--grey-100);
--gray-100: var(--grey-95);
--gray-150: var(--grey-90);
--gray-200: var(--grey-90);
--gray-300: var(--grey-80);
--gray-400: var(--grey-70);
--gray-500: var(--grey-60);
--gray-600: var(--grey-50);
--gray-700: var(--grey-40);
--gray-800: var(--black);
--gray-900: var(--black);
/* ── Action (Volt — canonical Exante) ── */
--action: #4F46E5; /* Volt */
--action-dark: #3730A3; /* Volt-deeper · pressed/active */
--action-hover: #4338CA; /* Volt-dark · hover */
--action-active: #3730A3;
--action-tint: rgba(79,70,229,0.10);
--action-tint-strong:rgba(79,70,229,0.16);
--action-ring: rgba(79,70,229,0.28);
--gradient-dark: var(--action); /* flat — Rule 1 (no gradient en UI funcional) */
/* Action aliases (backward compat) */
--brand: var(--action);
--brand-bright: var(--action);
--brand-tint: var(--action-tint);
--brand-surface: var(--action-tint);
--brand-dark: var(--action-dark);
--ink-brand-dark: var(--action);
--interact: var(--action);
/* ── Accent (Pine — highlights brand secundarios, never action) ── */
--accent: #0F8181; /* Pine */
--accent-hover: #0C6A6A; /* Pine-dark */
--accent-text: #095555; /* Pine-deeper */
--accent-tint: rgba(15,129,129,0.12);
--accent-bright: var(--accent);
--accent-light: var(--accent-tint);
/* ── Status semantics (fintech dual-tier: graphical + text) ──
AA verificado sobre blanco para tiers de texto. Patrón Stripe / Linear / Mercury.
Guía por tier:
*-bright → iconos, fills grandes, dots (decorativo; no cumple AA texto)
*-solid → bordes / controles UI (≥3:1 sobre blanco)
* → texto sobre blanco (AA 4.5:1+)
*-dark → texto sobre *-light (AAA, callouts y alerts)
*-light → background tint (alert/badge/toast)
*-border → borde decorativo de cards, alerts, left-accent */
/* Error (Red) — destructivo, validación dura, fallos */
--red-bright: #EF4444; /* red-500 · icons/fills */
--red: #B01E1E; /* text AA 6.88:1 */
--red-dark: #7F1D1D; /* AAA sobre red-light */
--red-light: rgba(239,68,68,0.10);
--red-border: rgba(239,68,68,0.28);
/* Success — alias al accent-green del DS v0.5.1 (antes era emerald
Spring fuera del DS: #10B981/#047857). */
--green-bright: var(--color-accent-green);
--green: var(--color-accent-green-deep);
--green-dark: var(--color-accent-green-press);
--green-light: var(--color-accent-green-tint-8);
--green-border: var(--color-accent-green-stroke);
/* Warning (Orange) — atención sin alarma, pendiente */
--amber-bright: #F59E0B; /* amber-500 · icons/fills (decorativo) */
--amber-solid: #D97706; /* amber-600 · bordes ≥3:1 */
--amber: #C2410C; /* text AA 5.18:1 · orange-700 */
--amber-dark: #7C2D12; /* AAA sobre amber-light */
--amber-light: rgba(245,158,11,0.14);
--amber-border: rgba(245,158,11,0.35);
/* Semantic role aliases — usar éstos en el CSS del producto */
--success: var(--green);
--success-bright: var(--green-bright);
--success-dark: var(--green-dark);
--success-light: var(--green-light);
--success-border: var(--green-border);
--error: var(--red);
--error-bright: var(--red-bright);
--error-dark: var(--red-dark);
--error-light: var(--red-light);
--error-border: var(--red-border);
--warning: var(--amber);
--warning-bright: var(--amber-bright);
--warning-solid: var(--amber-solid);
--warning-dark: var(--amber-dark);
--warning-light: var(--amber-light);
--warning-border: var(--amber-border);
--info: var(--accent);
--info-bright: var(--accent);
--info-dark: var(--accent-text);
--info-light: var(--accent-tint);
--info-border: rgba(20,107,188,0.28);
/* ── Semantic tokens (Exante canonical surfaces) ── */
--bg-primary: #FFFFFF;
--bg-secondary: #F5F6F8; /* cloud */
--bg-tertiary: #FAFBFC; /* ice */
--bg-elevated: #FFFFFF;
--surface-brand: var(--action);
--surface-deep: #0F1419; /* Graphite — ÚNICA superficie oscura permitida */
--tint-cyan: var(--volt-soft);
--text-primary: #0F1419;
--text-secondary:#3A4654;
--text-tertiary: #5C6B7A;
--text-inverse: #FFFFFF;
--ink: var(--text-secondary);
/* Ink tokens (Exante canonical) */
--ink-primary: #0F1419;
--ink-secondary: #3A4654;
--ink-tertiary: #5C6B7A;
--ink-muted: #94A2B0;
--ink-disabled: #A2ADB9;
--ink-inverse: #FFFFFF;
--border: #EEF1F4;
--border-default: #EEF1F4;
--border-strong: #A2ADB9;
--border-focus: var(--action);
--surface-hover: rgba(10,13,18,0.04);
--surface-active:rgba(10,13,18,0.06);
--backdrop: rgba(10,13,18,0.5);
/* Links */
--link: var(--action);
--link-hover: var(--action-active);
/* ── Pop system · LEGACY Spring colors (jade #10B981 + lime #D9F060)
fueron eliminados en DS v0.5.1. Aliasiamos al gradient-brand verde
del DS para que los selectores legacy no se rompan. El override
definitivo está en el tercer :root más abajo. */
--pop-mint: var(--color-accent-green);
--pop-lime: var(--color-accent-green);
--pop-gradient: var(--gradient-brand-diagonal);
--pop-gradient-soft: var(--color-accent-green-tint-8);
--pop-cool: var(--color-accent-green-deep);
--pop-shadow: 0 12px 32px var(--color-accent-green-stroke);
/* Spring gradient · alias al gradient brand del DS */
--gradient-spring: var(--gradient-pine-green-mint);
--gradient-spring-brief: var(--gradient-green-mint);
/* Volt halo · alias al focus-ring del DS (verde) */
--shadow-volt: 0 8px 24px var(--color-accent-green-stroke), 0 2px 6px var(--color-accent-green-tint-14);
/* Tipografía: Inter (UI/body/data) + Playfair Display (display/hero) */
--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-data: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font: var(--font-body);
/* ── Radii (Exante scale: 8/12/16/20/999) ── */
--radius-sm: 8px;
--radius-md: 10px;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
/* v0.6 — Action button radius. Concentric con cards 16 / inputs 8.
Pill (--r-pill / 999) reservado para chips, badges, segmented, avatars, dots, progress, FABs y search inline. */
--radius-button: 10px;
/* ── Shadows Exante (Graphite-tinted) ── */
--shadow-sm: 0 1px 2px rgba(10,13,18,0.05);
--shadow-md: 0 4px 16px rgba(10,13,18,0.08);
--shadow-lg: 0 10px 36px rgba(10,13,18,0.12);
--elev-1: 0 1px 2px rgba(10,13,18,0.04);
--elev-2: 0 2px 6px rgba(10,13,18,0.06);
--elev-3: 0 4px 12px rgba(10,13,18,0.08);
--elev-4: 0 8px 24px rgba(10,13,18,0.10), 0 2px 6px rgba(10,13,18,0.06);
--elev-5: 0 20px 60px rgba(10,13,18,0.12), 0 4px 16px rgba(10,13,18,0.06);
/* ── Motion ── */
--transition: all 0.3s var(--ease-default);
--ease-out: cubic-bezier(0.16,1,0.3,1);
--ease-in-out: cubic-bezier(0.4,0,0.2,1);
/* ── Type scale (7 levels) ── */
--type-title: 1.75rem; /* Step titles */
--type-display: 1.25rem; /* Prominent numeric values */
--type-lg: 1.0625rem;/* Card / row values */
--type-body: 0.875rem; /* Body, inputs, switches, pills */
--type-sm: 0.75rem; /* Buttons, hints, supporting text */
--type-label: 0.6875rem;/* Labels (uppercase) + micro text */
--type-xs: 0.625rem; /* Badges */
}
/* ══════════════════════════════════════════════════════════════════
v0.5.1 OVERRIDE · Phase 3 v.034 · Ventas context
El cotizador pasa de Volt morado #4F46E5 a Verde accent #1FAE5F
(paleta canónica v0.5.1 — coherente con resto del frontend cliente).
No cambiamos nombres de variables; solo sobreescribimos sus valores
para que toda la cascada de aliases siga funcionando.
══════════════════════════════════════════════════════════════════ */
:root {
/* ── Action / Brand · ALIAS al DS v0.5.1 (sin redefinir --volt,
ya viene de la primera declaración como alias del accent-green) ── */
--action: var(--color-accent-green);
--action-dark: var(--color-accent-green-deep);
--action-hover: var(--color-accent-green-deep);
--action-active: var(--color-accent-green-deep);
--action-tint: var(--color-accent-green-tint-8);
--action-tint-strong:var(--color-accent-green-tint-14);
--action-ring: var(--color-accent-green-stroke);
--gradient-dark: var(--color-accent-green); /* TODO: refactor con gradient real DS (--gradient-brand) */
/* --volt/--volt-* ya están aliased en la primera declaración :root.
Eliminada la duplicación contaminante (antes #1FAE5F literal). */
--brand: var(--color-accent-green);
--brand-bright: var(--color-accent-green);
--brand-tint: var(--color-accent-green-tint-8);
--brand-surface: var(--color-accent-green-tint-8);
--brand-dark: var(--color-accent-green-deep);
--ink-brand-dark: var(--color-accent-green);
--interact: var(--color-accent-green);
/* ── Cool white canvas v0.5.1 · alias al DS (grey scale conservado
local porque DS no tiene tokens 1:1 para todos los pasos) ── */
--grey-100: #F5F6F8;
--grey-95: var(--color-bg); /* #FAFBFC */
--grey-90: var(--color-border-subtle); /* #E5E7EB-equiv */
--grey-80: #A2ADB9;
--grey-70: #94A2B0;
--grey-60: var(--fg3); /* #8B92A1-equiv */
--grey-50: var(--fg3);
/* ── Ink ── */
--graphite: var(--fg1);
--black: var(--fg1);
/* ── Semánticos v0.5.1 base/deep/tint ── */
--jade: var(--color-accent-green);
--jade-dark: var(--color-accent-green-deep);
--jade-deeper: var(--color-accent-green-deep);
--jade-soft: var(--color-success-tint);
/* ── Heading font: ya viene del DS (primera :root) ── */
}
/* Hero principal: Playfair en lugar de Inter */
.page-hero-title,
h1.page-hero-title {
font-family: var(--font-display) !important;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
}
/* Título "Elige tu plan de pagos" en pantalla de plan cards: Playfair */
.results-hero .step-title {
font-family: var(--font-display) !important;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
}
/* ══════════════════════════════════════════════════════════════════
v0.5.1 OVERRIDE · Phase 3 v.035 · fondos planos + sin liquidglass
Reemplaza:
- Fondo body: cool white canvas #FAFBFC
- Gradientes radiales verdes de .results-page y .vertical-config-scroll
→ fondo plano cool white
- Liquid glass (rgba blanco + backdrop-filter blur) en cards
→ superficie blanca sólida + border subtle + shadow suave (v0.5.1 card)
- Navbar transparente con blur → blanco sólido + border-bottom 1px
══════════════════════════════════════════════════════════════════ */
/* Body: cool white canvas */
body { background: #FAFBFC !important; }
/* Vista resultados: fondo plano */
.results-page {
background: #FAFBFC !important;
min-height: 100vh; /* v.071: footer no se ve al abrir Step 4, solo al hacer scroll */
}
/* Hero de resultados: card sólida v0.5.1 (no glass) */
.results-hero {
background: #FFFFFF !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid #EEF1F4 !important;
box-shadow: 0 4px 12px -2px rgba(15,20,25,0.06) !important;
}
.results-hero::before,
.results-hero::after { display: none !important; }
/* Plan cards: superficie sólida v0.5.1 */
.plan-card {
background: #FFFFFF !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid #EEF1F4 !important;
box-shadow: 0 1px 2px rgba(15,20,25,0.04) !important;
}
.plan-card::before,
.plan-card::after { display: none !important; }
.plan-card:hover {
border-color: #1FAE5F !important;
box-shadow: 0 4px 16px -2px rgba(31,174,95,0.16) !important;
}
/* Legacy scroll oculto con !important */
.vertical-config-scroll { display: none !important; }
/* Cards del cotizador (vertical-section): superficie sólida v0.5.1 */
.vertical-section {
background: #FFFFFF !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid #EEF1F4 !important;
box-shadow: 0 1px 2px rgba(15,20,25,0.04) !important;
}
.vertical-section::before,
.vertical-section::after { display: none !important; }
/* Tokens de gradiente celebratory → solid verde accent (DS v0.5.1) */
:root {
--pop-gradient: var(--color-accent-green) !important;
--pop-gradient-soft: var(--color-success-tint) !important;
--gradient-spring: var(--color-accent-green) !important;
--gradient-spring-brief: var(--color-accent-green) !important;
}
/* Verify modal overlay: backdrop blur OK (es modal, no decorativo) — no se toca
Slider track gradient (line 653): es funcional (progress fill) — no se toca
Border-clip gradients en bordes (1929/1938): truco para borders — no se toca */
/* ══════════════════════════════════════════════════════════════════
v0.5.1 OVERRIDE · Phase 3 v.036 · footer corporativo homologado
Replica el footer de exante.mx (marketing site) pero con fondo
cool white (NO oscuro) según design system v0.5.1.
══════════════════════════════════════════════════════════════════ */
.site-footer {
background: #FAFBFC;
border-top: 1px solid #EEF1F4;
color: #5C6B7A;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 13px;
line-height: 1.55;
padding: 56px 0 32px;
margin-top: 64px;
}
.site-footer__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
.site-footer__top {
display: grid;
grid-template-columns: 320px 1fr;
gap: 48px;
padding-bottom: 40px;
border-bottom: 1px solid #EEF1F4;
}
@media (max-width: 1023px) {
.site-footer__top { grid-template-columns: 1fr; gap: 32px; }
}
/* Brand column */
.site-footer__brand {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: 28px;
letter-spacing: -0.02em;
color: #0F1419;
margin-bottom: 24px;
}
.site-footer__brand-img {
height: 32px; width: auto;
display: block;
/* Logo negro sobre footer claro #FAFBFC → sin filter, se ve negro como en el resto del DS */
}
.site-footer__regs {
display: flex; align-items: center; gap: 18px;
flex-wrap: wrap;
}
.site-footer__reg-logo {
display: inline-flex;
height: 32px;
opacity: 0.78;
transition: opacity var(--motion-base);
}
.site-footer__reg-logo:hover { opacity: 1; }
.site-footer__reg-logo img {
height: 32px; width: auto; display: block;
/* Logo regulador sobre footer claro — ya viene en escala de grises (muted), sin filter */
}
.site-footer__locale {
display: inline-flex; align-items: center;
}
.site-footer__addr {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 0 0 14px;
font-size: 13px;
color: #5C6B7A;
line-height: 1.55;
}
.site-footer__addr svg {
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 3px;
stroke-width: 1.6;
color: #94A2B0;
}
.site-footer__addr strong {
color: #0F1419;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 12px;
}
.site-footer__addr a {
color: #5C6B7A;
text-decoration: none;
}
.site-footer__addr a:hover { color: #1FAE5F; }
.site-footer__regs {
display: flex;
gap: 8px;
margin-top: 20px;
flex-wrap: wrap;
}
.site-footer__reg-pill {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border: 1px solid #A2ADB9;
border-radius: 999px;
background: #FFFFFF;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: #5C6B7A;
}
/* Cols grid */
.site-footer__cols {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
@media (max-width: 1023px) {
.site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
.site-footer__col h4 {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
color: #0F1419;
margin: 0 0 14px;
letter-spacing: -0.005em;
}
.site-footer__col a {
display: block;
font-size: 13px;
color: #5C6B7A;
text-decoration: none;
line-height: 1.5;
margin-bottom: 10px;
transition: color var(--motion-fast) var(--ease-default);
}
.site-footer__col a:hover { color: #1FAE5F; }
/* Bottom row */
.site-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 24px;
padding: 24px 0;
border-bottom: 1px solid #EEF1F4;
}
.site-footer__social {
display: inline-flex;
gap: 16px;
}
.site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #F5F6F8;
color: #5C6B7A;
text-decoration: none;
transition: background var(--motion-fast), color var(--motion-fast);
}
.site-footer__social a:hover {
/* v.077: hover neutro oscuro (era verde) — los iconos se ponen oscuros */
background: #0F1419;
color: #FFFFFF;
}
/* WhatsApp PNG inline — img filter para que tome el color del link parent + match icon style */
.site-footer__social-wa img {
width: 16px; height: 16px;
display: block;
/* PNG es negro → en estado base lo coloreamos al neutro hint con filter para
que matchee el color del SVG sibling (#5C6B7A muted) */
filter: invert(45%) sepia(8%) saturate(550%) hue-rotate(175deg) brightness(95%);
transition: filter var(--motion-fast);
}
.site-footer__social-wa:hover img {
/* Hover: PNG se vuelve blanco (#FFFFFF) sobre el bg dark del link */
filter: brightness(0) invert(1);
}
.site-footer__social svg {
width: 16px;
height: 16px;
stroke-width: 1.6;
}
.site-footer__meta {
display: inline-flex;
gap: 24px;
flex-wrap: wrap;
align-items: center;
font-size: 12px;
color: #94A2B0;
}
.site-footer__meta a {
color: #94A2B0;
text-decoration: none;
}
.site-footer__meta a:hover { color: #0F1419; }
.site-footer__locale {
color: #94A2B0;
}
.site-footer__disclaimer {
font-size: 11px;
color: #94A2B0;
line-height: 1.55;
margin: 24px 0 0;
}
/* ══════════════════════════════════════════════════════════════════
v0.5.1 OVERRIDE · Phase 3 v.037 · Plan cards screen redesign
Dark hero (#0F1419) con greeting + Playfair "Tres caminos al volante"
+ context card + segmented control. Carousel cool white.
══════════════════════════════════════════════════════════════════ */
/* Results page wrapper: sin background propio (heredan los hijos) */
.results-page {
background: transparent !important;
min-height: auto !important;
}
/* DARK HERO */
.results-hero {
background: #0F1419 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
max-width: none !important;
margin: 0 !important;
padding: 24px 32px 32px !important;
position: relative !important;
}
.results-hero::before, .results-hero::after { display: none !important; }
.results-hero-content {
max-width: 1080px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
}
/* Eyebrow */
.results-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #94A2B0;
margin: 0 0 16px;
}
/* Playfair big title — override v.036 + new dark hero rules
v.056: título es ahora 1 sola línea de copy ("Listo, NOMBRE. Estos son
los planes de pago para tu CRÉDITO/ARRENDAMIENTO.") en vez de un H1
corto. Bajamos el font-size para que respire bien sin eyebrow ni
subtitle. */
.results-hero .step-title {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 32px !important;
font-weight: 500 !important;
line-height: 1.18 !important;
letter-spacing: -0.015em !important;
color: #FFFFFF !important;
margin: 0 auto !important;
max-width: 720px !important;
text-transform: none !important;
}
.results-hero .step-title em {
font-style: italic;
}
.results-hero .step-title #resultsProduct {
/* Producto va en regular, no italic — el énfasis es el nombre del cliente */
font-style: normal;
}
@media (min-width: 768px) {
.results-hero .step-title { font-size: 38px !important; max-width: 820px !important; }
}
@media (min-width: 1100px) {
.results-hero .step-title { font-size: 42px !important; }
}
/* Sub-text */
.results-hero .step-subtitle {
font-family: 'Inter', sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
color: #A2ADB9 !important;
margin: 0 auto 28px !important;
max-width: 520px !important;
text-transform: none !important;
}
/* Context card (results-summary): dark inverse-soft pill horizontal */
.results-hero .results-summary {
display: inline-flex !important;
flex-wrap: wrap !important;
gap: 0 !important;
padding: 14px 24px !important;
background: #1A1F26 !important;
border-radius: 14px !important;
margin: 0 auto !important;
justify-content: center !important;
}
.results-hero .summary-item {
text-align: left !important;
padding: 0 24px !important;
position: relative !important;
}
.results-hero .summary-item::before { display: none !important; }
.results-hero .summary-item:first-child::before,
.results-hero .summary-item.vendor-only:not(.modo-vendedor *)::before {
display: none;
}
.results-hero .summary-item:first-child {
padding-left: 0 !important;
}
.results-hero .summary-item:last-child {
padding-right: 0 !important;
}
.results-hero .summary-label {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: #94A2B0 !important;
margin-bottom: 4px !important;
}
.results-hero .summary-value {
font-family: 'Inter', sans-serif !important;
font-size: 18px !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums !important;
color: #FFFFFF !important;
letter-spacing: -0.01em !important;
}
/* Plazo segmented control (.plazo-chips) inside dark hero */
.plans-section .plazo-chips {
display: inline-flex !important;
gap: 4px !important;
padding: 4px !important;
background: #1A1F26 !important;
border-radius: 999px !important;
margin: 0 auto 24px !important;
flex-wrap: nowrap !important;
}
.plans-section .plazo-chip {
padding: 8px 18px !important;
background: transparent !important;
border: 0 !important;
border-radius: 999px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #A2ADB9 !important;
cursor: pointer !important;
transition: all var(--motion-base) var(--ease-default) !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
.plans-section .plazo-chip:hover:not(.is-active) {
color: #FFFFFF !important;
border-color: transparent !important;
}
.plans-section .plazo-chip.is-active {
background: #FFFFFF !important;
color: #0F1419 !important;
font-weight: 600 !important;
border-color: transparent !important;
box-shadow: none !important;
}
.plans-section .plazo-chip.is-exceeded {
opacity: 0.55 !important;
}
/* Plans section: cool white canvas */
.plans-section {
background: #FAFBFC !important;
padding: 48px 0 32px !important;
margin: 0 auto !important;
max-width: 1280px !important;
position: relative !important;
}
/* Wrapper para que el segmented quede en el dark hero — lo movemos visualmente
con margin negativo arriba o lo centramos en su zona */
.plans-section .plazo-chips {
margin-top: -36px !important;
position: relative !important;
z-index: 4 !important;
display: inline-flex !important;
}
.plans-section {
text-align: center !important;
}
/* Carousel container (.plans-carousel) edges + arrows */
.plans-carousel {
position: relative !important;
max-width: 1140px !important;
margin: 32px auto 0 !important;
padding: 0 !important;
}
/* Edge fades */
.plans-carousel::before,
.plans-carousel::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.plans-carousel::before {
left: 0;
background: linear-gradient(90deg, #FAFBFC 0%, transparent 100%);
}
.plans-carousel::after {
right: 0;
background: linear-gradient(270deg, #FAFBFC 0%, transparent 100%);
}
/* Arrow buttons */
.plazo-arrow {
position: absolute !important;
top: 220px !important;
transform: none !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: #FFFFFF !important;
border: 1px solid #EEF1F4 !important;
box-shadow: 0 8px 24px -4px rgba(15,20,25,0.14) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #0F1419 !important;
z-index: 3 !important;
cursor: pointer !important;
font-size: 20px !important;
font-family: 'Inter', sans-serif !important;
transition: transform var(--motion-fast) var(--ease-default) !important;
padding: 0 !important;
}
.plazo-arrow.prev { left: 8px !important; }
.plazo-arrow.next { right: 8px !important; }
.plazo-arrow:hover {
transform: scale(1.05) !important;
}
.plazo-arrow:active {
transform: scale(0.96) !important;
}
.plazo-arrow:disabled {
opacity: 0.32 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* Plan cards in carousel: solid white, border verde for eligible */
.plan-card {
flex: 0 0 340px !important;
scroll-snap-align: center !important;
background: #FFFFFF !important;
border: 1px solid #1FAE5F !important;
border-radius: 20px !important;
padding: 32px 28px 24px !important;
box-shadow: 0 1px 2px rgba(15,20,25,0.04) !important;
position: relative !important;
transition: box-shadow var(--motion-base) var(--ease-default) !important;
display: flex !important;
flex-direction: column !important;
}
.plan-card.is-centered {
box-shadow:
0 24px 48px -16px rgba(15,20,25,0.12),
0 4px 12px -2px rgba(31,174,95,0.10) !important;
}
.plan-card.is-ineligible,
.plan-card[data-eligible="false"] {
border-color: #A2ADB9 !important;
}
.plan-card.is-ineligible.is-centered {
box-shadow: 0 24px 48px -16px rgba(15,20,25,0.10) !important;
}
/* Trust pill at footer (scan-inline-message) */
.scan-inline-message {
margin: 32px auto 0 !important;
}
.scan-inline-message-inner {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 16px !important;
background: #D8EEDF !important;
color: #16904E !important;
border-radius: 999px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
border: 0 !important;
}
.scan-inline-message-dot {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
color: #16904E !important;
width: auto !important;
height: auto !important;
}
.scan-inline-message-dot svg {
width: 16px !important;
height: 16px !important;
}
/* Plans disclaimer */
.plans-disclaimer {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: #94A2B0 !important;
max-width: 480px !important;
margin: 24px auto 0 !important;
text-align: center !important;
line-height: 1.55 !important;
}
/* ══════════════════════════════════════════════════════════════════
Plan card eligible/ineligible spec — header strip, ingreso block, CTAs
══════════════════════════════════════════════════════════════════ */
/* Card NO tiene overflow:hidden global porque recortaría el sticker
PRE-APROBADO que sobresale arriba. El clip del header strip se
logra con border-radius en el propio strip. */
.plan-card {
overflow: visible !important;
}
/* Plan card title: "N meses" sin "Plan" */
.plan-card .plan-card-title {
font-family: 'Inter', sans-serif !important;
font-size: 18px !important;
font-weight: 600 !important;
color: #0F1419 !important;
margin: 0 0 16px !important;
letter-spacing: -0.005em !important;
line-height: 1.3 !important;
}
/* Header strip "Este plan requiere mayor ingreso" — full bleed con
border-radius propio en las esquinas top (matching card radius 20px). */
.plan-status {
margin: -32px -28px 24px !important;
padding: 16px 28px !important;
background: #F5F6F8 !important;
border-bottom: 1px solid #EEF1F4 !important;
border-top-left-radius: 19px !important;
border-top-right-radius: 19px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #0F1419 !important;
line-height: 1.4 !important;
}
.plan-status svg {
color: #5C6B7A !important;
}
/* Price block */
.plan-card .plan-card-price-block {
margin-bottom: 6px !important;
}
.plan-card .plan-card-price {
font-family: 'Inter', sans-serif !important;
font-size: 40px !important;
font-weight: 600 !important;
color: #0F1419 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.01em !important;
line-height: 1.1 !important;
}
.plan-card .plan-card-price small {
font-size: 14px !important;
font-weight: 400 !important;
color: #5C6B7A !important;
letter-spacing: 0 !important;
margin-left: 4px !important;
}
.plan-card .plan-card-cat {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #94A2B0 !important;
margin-bottom: 24px !important;
}
.plan-card .plan-card-cat strong {
color: #0F1419 !important;
font-weight: 600 !important;
}
/* Benefits (eligible) */
.plan-card .plan-card-benefits {
list-style: none !important;
padding: 0 !important;
margin: 0 0 24px !important;
}
.plan-card .plan-card-benefit {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 6px 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
color: #5C6B7A !important;
line-height: 1.45 !important;
border-top: 0 !important;
}
.plan-card .plan-card-benefit-icon {
flex: 0 0 16px !important;
width: 16px !important;
height: 16px !important;
margin-top: 2px !important;
color: #1FAE5F !important;
background: transparent !important;
font-size: 13px !important;
font-weight: 700 !important;
}
/* Income block (ineligible) — sustituye a benefits */
.plan-income {
margin: 0 0 24px !important;
}
.plan-income-eyebrow {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: #94A2B0 !important;
margin-bottom: 6px !important;
line-height: 1.4 !important;
}
.plan-income-amount {
font-family: 'Inter', sans-serif !important;
font-size: 28px !important;
font-weight: 600 !important;
color: #0F1419 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.005em !important;
line-height: 1.1 !important;
}
/* Veu / Opción de compra row */
.plan-card .plan-card-veu {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
padding-top: 0 !important;
border-top: 0 !important;
margin-bottom: 16px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
color: #94A2B0 !important;
}
.plan-card .plan-card-veu strong {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #0F1419 !important;
font-variant-numeric: tabular-nums !important;
}
/* CTA primary "Elegir plan →" verde */
.plan-card .plan-cta--primary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
padding: 14px 20px !important;
border-radius: var(--radius-button) !important;
border: 1px solid transparent !important;
background: #1FAE5F !important;
color: #FFFFFF !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
cursor: pointer !important;
transition: background var(--motion-fast) var(--ease-default) !important;
text-align: center !important;
margin: 0 !important;
}
.plan-card .plan-cta--primary:hover {
background: #16904E !important;
}
/* CTA disabled (ineligible) */
.plan-card .plan-cta--disabled {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
padding: 14px 20px !important;
border-radius: var(--radius-button) !important;
border: 1px solid #EEF1F4 !important;
background: #F5F6F8 !important;
color: #94A2B0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
cursor: not-allowed !important;
text-align: center !important;
margin: 0 !important;
}
.plan-card .plan-cta--disabled:hover {
background: #F5F6F8 !important;
}
/* Sección 1: header (title + price + tasa) — agrupado tight */
.plan-card .plan-card-title {
margin: 0 0 14px !important;
}
.plan-card .plan-card-price-block {
margin-bottom: 0 !important;
padding-bottom: 24px !important;
border-bottom: 1px solid #F5F6F8 !important;
}
.plan-card .plan-card-cat {
margin-bottom: 0 !important;
margin-top: 4px !important;
}
/* Sección 2: features (eligible) — separada con padding */
.plan-card .plan-card-benefits {
margin: 24px 0 !important;
padding: 0 !important;
border-bottom: 1px solid #F5F6F8 !important;
padding-bottom: 24px !important;
}
.plan-card .plan-card-benefit {
padding: 5px 0 !important;
}
/* Sección 2b: ingreso mínimo (ineligible) — más sobrio que mensualidad */
.plan-income {
margin: 24px 0 !important;
padding-bottom: 24px !important;
border-bottom: 1px solid #F5F6F8 !important;
}
.plan-income-amount {
font-size: 22px !important;
letter-spacing: -0.005em !important;
color: #5C6B7A !important;
font-weight: 600 !important;
}
/* Sección 3: opción de compra — pequeño, justo arriba del CTA */
.plan-card .plan-card-veu {
margin-bottom: 20px !important;
}
/* Sección 4: actions (CTA + secondary) — al fondo */
.plan-card .plan-card-footer {
margin-top: auto !important;
}
/* Plan link "Ver plan de pagos" verde en ambos estados */
.plan-card .plan-link {
display: block !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #1FAE5F !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
width: 100% !important;
padding: 14px 12px 0 !important;
margin-top: 6px !important;
transition: color var(--motion-fast) !important;
}
.plan-card .plan-link:hover {
color: #1A9852 !important;
}
/* Footer del card: stack vertical */
.plan-card .plan-card-footer {
margin-top: auto !important;
display: flex !important;
flex-direction: column !important;
}
/* Ocultar elementos legacy que ya no necesitamos */
.plan-card .exceeded-top-bar,
.plan-card .exceeded-caption,
.plan-card .plan-cta-primary,
.plan-card .plan-card-divider {
display: none !important;
}
/* Card ineligible: opacidad full (override de .plan-card.ineligible viejo) */
.plan-card.exceeded {
opacity: 1 !important;
border-color: #A2ADB9 !important;
}
/* ══════════════════════════════════════════════════════════════════
v.039 polish: dark hero extiende sobre cards + fade fix + last card
══════════════════════════════════════════════════════════════════ */
/* Dark band extiende sobre la zona del segmented hasta el TOP de las cards.
Usa ::before en .plans-section con width:100vw para que sea full-viewport-width
sin importar el max-width del container. */
.results-hero {
position: relative !important;
overflow: visible !important;
}
.results-hero::after { display: none !important; }
.plans-section {
background: #FAFBFC !important;
padding-top: 0 !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important;
}
.plans-section::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100vw !important;
height: 370px !important;
background: #0F1419 !important;
z-index: 0 !important;
pointer-events: none !important;
}
.plans-section > * {
position: relative !important;
z-index: 1 !important;
}
.plans-section .plazo-chips {
margin-top: 24px !important;
margin-bottom: 56px !important;
position: relative !important;
z-index: 5 !important;
}
/* Carousel: padding superior para que las cards "salgan" desde la banda dark */
.plans-carousel {
padding-top: 0 !important;
position: relative !important;
z-index: 3 !important;
}
/* ELIMINADOS los edge fades: causaban que la primera/última card se
cortara visualmente. Las flechas son indicador suficiente de scroll. */
.plans-carousel::before,
.plans-carousel::after {
display: none !important;
}
/* Padding lateral del track: usa calc(50% - cardWidth/2) para que
el primer/último card pueda llegar al center via scroll-snap.
Card width 340px → padding ~ calc(50% - 170px). Mínimo 24px en mobile. */
.plans-track {
padding-left: max(24px, calc(50% - 170px)) !important;
padding-right: max(24px, calc(50% - 170px)) !important;
}
/* ══════════════════════════════════════════════════════════════════
v.043 polish: navbar dark + trust signal sobre dark + viewport
permite badge overhang + harmonización de spacings verticales
══════════════════════════════════════════════════════════════════ */
/* NAVBAR dark con isotipo blanco */
.navbar {
background: #0F1419 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.navbar .logo-svg img {
/* v.070: nuevo logo ya viene en blanco, no requiere filter */
filter: none !important;
}
/* Vendor badge "PORTAL DE VENTAS" sobre dark */
.navbar .vendor-badge {
background: rgba(255,255,255,0.08) !important;
color: #A2ADB9 !important;
border-color: rgba(255,255,255,0.12) !important;
}
/* Trust signal "Datos protegidos" sobre dark */
.navbar .trust-signal {
color: #A2ADB9 !important;
}
.navbar .trust-signal svg {
color: #A2ADB9 !important;
stroke: #A2ADB9 !important;
}
/* Progress bar sobre dark */
.navbar .progress-bar {
background: rgba(255,255,255,0.08) !important;
}
.navbar .progress-fill {
background: linear-gradient(to right, #1FAE5F, #5EE39E) !important;
}
/* Fix overflow del viewport para que el badge sticker no se recorte arriba */
.plans-viewport {
overflow-y: visible !important;
padding-top: 16px !important;
}
.plans-carousel {
overflow: visible !important;
}
/* Harmonización de spacings verticales
v.056: sin eyebrow ni subtitle, el hero queda más compacto. Reducimos
padding-top/bottom y damos breathing-room consistente entre el título
y el summary pill (que es ahora el único elemento debajo del título). */
.results-hero {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
.results-hero .results-summary {
margin-top: 24px !important;
margin-bottom: 0 !important;
}
/* Plazo chips: reducir gap inferior al inicio de cards */
.plans-section .plazo-chips {
margin-top: 32px !important;
margin-bottom: 28px !important;
}
/* Plans-section: padding-bottom suficiente para footer message */
.plans-section {
padding-bottom: 48px !important;
}
/* ══════════════════════════════════════════════════════════════════
v.044 polish: navbar liquid-glass on scroll + sparkle icon en stamp
══════════════════════════════════════════════════════════════════ */
/* Navbar transition on scroll handled by CSS only */
.navbar.is-scrolled {
/* v.070: liquid glass on scroll — más translúcido + saturación + brightness para feel premium */
background: rgba(15,20,25,0.55) !important;
backdrop-filter: saturate(220%) blur(28px) brightness(0.95) !important;
-webkit-backdrop-filter: saturate(220%) blur(28px) brightness(0.95) !important;
border-bottom: 1px solid rgba(255,255,255,0.10) !important;
box-shadow: 0 4px 24px -8px rgba(0,0,0,0.45) !important;
transition: background var(--motion-slow) var(--ease-default),
backdrop-filter var(--motion-slow) var(--ease-default),
box-shadow var(--motion-slow) var(--ease-default) !important;
}
.navbar { transition: background var(--motion-slow) var(--ease-default), backdrop-filter var(--motion-slow) var(--ease-default) !important; }
/* Stamp con icono — display flex para alinear svg + texto */
.plan-preapro-stamp {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 7px 14px !important;
}
.plan-preapro-stamp svg {
flex-shrink: 0 !important;
color: #FFFFFF !important;
}
.plan-preapro-stamp span {
display: inline-block !important;
line-height: 1 !important;
}
/* ══════════════════════════════════════════════════════════════════
v.045: fade corto en bordes + arrows fuera de cards + selected glow
══════════════════════════════════════════════════════════════════ */
/* Fade real con mask-image: oculta los bordes del viewport con transparencia
verdadera, así funciona sin importar el color de fondo (dark, light o mixed).
Es el único approach que funciona cuando el viewport cruza un boundary
dark/light (porque un fade de color simple no podría tapar ambos). */
.plans-carousel { position: relative !important; }
.plans-carousel::before,
.plans-carousel::after { display: none !important; }
.plans-viewport {
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 56px,
#000 calc(100% - 56px),
transparent 100%
) !important;
mask-image: linear-gradient(
90deg,
transparent 0,
#000 56px,
#000 calc(100% - 56px),
transparent 100%
) !important;
transition: -webkit-mask-image var(--motion-base), mask-image var(--motion-base) !important;
}
/* En extremos, eliminar el mask del lado correspondiente para que el primer/
último card se vea íntegro sin recorte. */
.plans-carousel.is-at-start .plans-viewport {
-webkit-mask-image: linear-gradient(
90deg,
#000 0,
#000 calc(100% - 56px),
transparent 100%
) !important;
mask-image: linear-gradient(
90deg,
#000 0,
#000 calc(100% - 56px),
transparent 100%
) !important;
}
.plans-carousel.is-at-end .plans-viewport {
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 56px,
#000 100%
) !important;
mask-image: linear-gradient(
90deg,
transparent 0,
#000 56px,
#000 100%
) !important;
}
/* Arrows del carousel afuera de las cards: posicionarlos con offset
negativo respecto al .plans-carousel, en los bordes laterales del viewport */
.plazo-arrow {
width: 44px !important;
height: 44px !important;
}
.plazo-arrow.prev { left: -56px !important; }
.plazo-arrow.next { right: -56px !important; }
/* En viewports angostos donde no hay espacio, los arrows vuelven a estar
pegados a las cards (fallback). */
@media (max-width: 1280px) {
.plazo-arrow.prev { left: -8px !important; }
.plazo-arrow.next { right: -8px !important; }
}
@media (max-width: 700px) {
.plazo-arrow.prev { left: 4px !important; }
.plazo-arrow.next { right: 4px !important; }
}
/* Card seleccionada (cuando se ve plan de pagos) — solo border + glow estático
v.054 fix: NO transform/scale ni animation. La animación selectedPulse
sobreescribía la animate-in inicial y dejaba el inline opacity:0 — la card
se volvía invisible. Ahora solo border + box-shadow estático. */
.plan-card.is-selected-plan {
border-width: 2px !important;
border-color: #1FAE5F !important;
opacity: 1 !important;
box-shadow:
0 0 0 5px rgba(31,174,95,0.16),
0 12px 24px -8px rgba(31,174,95,0.22),
0 4px 12px -2px rgba(15,20,25,0.06) !important;
transition: box-shadow var(--motion-base) var(--ease-default),
border-color var(--motion-base) var(--ease-default) !important;
}
/* ══════════════════════════════════════════════════════════════════
v.040: Polish del CTA "Modificar mis datos" + badge PRE-APROBADO
══════════════════════════════════════════════════════════════════ */
/* "Modificar mis datos" — homologado con btn-outline (mismo estilo que "Regresar")
v.054: mismo tamaño/peso/tipografía que el botón Regresar de Step 1B */
.btn-modify-data {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
height: 44px !important;
padding: 0 24px !important;
border-radius: var(--radius-button) !important;
border: 1px solid var(--border-strong) !important;
background: #FFFFFF !important;
color: var(--text-primary) !important;
font-family: var(--font-heading) !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1 !important;
cursor: pointer !important;
transition: background var(--motion-fast) var(--ease-default),
border-color var(--motion-fast) var(--ease-default),
transform var(--motion-fast) var(--ease-default) !important;
}
.btn-modify-data:hover {
background: var(--grey-100) !important;
}
.btn-modify-data:active {
transform: scale(0.98) !important;
}
.btn-modify-data:focus-visible {
outline: none !important;
}
/* "PRE-APROBADO" badge tipo "best choice" — solid pill verde con overhang top */
.plan-preapro-stamp {
position: absolute !important;
top: -12px !important;
right: 20px !important;
padding: 7px 16px !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #FFFFFF !important;
background: #1FAE5F !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 4px 12px -2px rgba(31,174,95,0.32) !important;
z-index: 5 !important;
}
.plan-preapro-stamp::before { display: none !important; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; height: 100%; overflow: hidden; }
body {
font-family: var(--font-body);
background: #FAFBFC; color: var(--text-primary); line-height: 1.5;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
overflow-wrap: break-word; word-break: break-word;
overflow: hidden; height: 100vh; height: 100dvh;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
.navbar, .nav-link, .trust-signal { font-family: var(--font-heading); }
/* ===== NAVBAR ===== */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: #0F1419;
border-bottom: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 8px 32px -8px rgba(0,0,0,0.5);
}
/* Nav inner container */
.nav-inner {
max-width: 1280px; margin: 0 auto;
padding: 0 24px; height: 56px;
display: flex; align-items: center; gap: 0;
position: relative;
}
@media (min-width: 1024px){ .nav-inner { padding: 0 40px; } }
/* Logo */
.logo-svg { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-svg img { height: 28px; }
/* Tabs — centradas */
.nav-tabs {
display: flex; align-items: center; gap: 2px;
position: absolute; left: 50%; transform: translateX(-50%);
}
@media (max-width: 767px){ .nav-tabs { display: none; } }
.nav-tab {
display: inline-flex; align-items: center; gap: 5px;
padding: 8px 20px; border-radius: 9999px;
font-size: 14px; font-weight: 500; font-family: inherit;
color: rgba(255,255,255,0.70);
background: transparent; border: none; cursor: pointer;
transition: all var(--motion-slow) var(--ease-default);
text-decoration: none; white-space: nowrap;
}
.nav-tab:hover, .nav-tab.active {
color: #FFFFFF;
background: rgba(255,255,255,0.10);
}
.nav-tab-chevron {
transition: transform var(--motion-slow) var(--ease-default);
flex-shrink: 0;
}
.nav-tab[aria-expanded="true"] .nav-tab-chevron { transform: rotate(180deg); }
.nav-tab-direct { text-decoration: none; }
/* Right actions */
.nav-actions {
display: flex; align-items: center; gap: 16px;
margin-left: auto;
}
@media (max-width: 767px){ .nav-actions { display: none; } }
.trust-signal {
display: flex; align-items: center; gap: 6px;
font-size: 0.6875rem; font-weight: 500; color: rgba(255,255,255,0.55);
letter-spacing: 0.2px; user-select: none;
}
.trust-signal svg { flex-shrink: 0; color: rgba(255,255,255,0.45); }
@media (max-width: 540px) { .trust-signal span { display: none; } }
/* CTA */
.nav-cta {
display: inline-flex; align-items: center; justify-content: center;
padding: 0 20px; height: 36px; border-radius: var(--radius-button);
background: #1FAE5F; color: #FFFFFF;
font-size: 14px; font-weight: 500; font-family: inherit;
text-decoration: none; white-space: nowrap;
transition: background var(--motion-base);
border: none; cursor: pointer;
}
.nav-cta:hover { background: #17914D; }
/* Hamburger */
.nav-hamburger {
display: none; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 8px;
background: transparent; border: none; color: #FFFFFF; cursor: pointer;
margin-left: auto;
}
@media (max-width: 767px){ .nav-hamburger { display: flex; } }
/* Dropdown mega-menu */
.nav-dropdown {
position: absolute; top: 56px; left: 0; right: 0;
background: #FFFFFF;
border-bottom: 1px solid #EEF1F4;
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
transform-origin: top;
transform: scaleY(0); opacity: 0;
pointer-events: none;
overflow: hidden;
transition: transform var(--motion-slow) var(--ease-default), opacity var(--motion-slow) var(--ease-default);
}
.nav-dropdown.open {
transform: scaleY(1); opacity: 1;
pointer-events: auto;
transition: transform var(--motion-slow) var(--ease-default), opacity var(--motion-slow) var(--ease-default);
}
@media (max-width: 767px){ .nav-dropdown { display: none; } }
.nav-dropdown-inner {
max-width: 1280px; margin: 0 auto;
padding: 40px 24px;
}
@media (min-width: 1024px){ .nav-dropdown-inner { padding: 40px 40px; } }
.nav-dropdown-panel { display: none; }
.nav-dropdown-panel.active {
display: block;
animation: navPanelIn var(--motion-slow) ease-out forwards;
}
@keyframes navPanelIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-dropdown-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
}
.nav-col-heading {
font-size: 14px; font-weight: 700; color: #0F172A;
margin: 0 0 16px; padding: 0;
}
.nav-link {
display: block; font-size: 14px; color: #5C6B7A;
line-height: 1.5; margin-bottom: 12px; text-decoration: none;
transition: color var(--motion-fast);
}
.nav-link:hover, .nav-col-heading:hover { color: #1FAE5F; }
/* Mobile menu */
.nav-mobile {
display: none;
background: #FFFFFF;
border-top: 1px solid #EEF1F4;
max-height: 0; overflow: hidden;
transition: max-height var(--motion-slow) var(--ease-default);
}
.nav-mobile.open { max-height: 80vh; overflow-y: auto; }
@media (max-width: 767px){ .nav-mobile { display: block; } }
.nav-mobile-inner { padding: 16px 24px 24px; }
.nav-mobile-section { border-bottom: 1px solid #EEF1F4; margin-bottom: 4px; }
.nav-mobile-toggle {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 14px 0; background: none; border: none;
font-size: 15px; font-weight: 500; color: #0F1419; cursor: pointer;
font-family: inherit;
}
.nav-mobile-chevron {
transition: transform var(--motion-slow) var(--ease-default);
flex-shrink: 0; color: #5C6B7A;
}
.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-chevron { transform: rotate(180deg); }
.nav-mobile-content { display: none; padding-bottom: 16px; }
.nav-mobile-content.open { display: block; }
.nav-mobile-col { margin-bottom: 16px; }
.nav-mobile-heading {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
font-weight: 700; color: #5C6B7A; margin: 0 0 8px;
}
.nav-mobile-direct {
display: block; padding: 14px 0;
font-size: 15px; font-weight: 500; color: #0F1419;
border-bottom: 1px solid #EEF1F4; margin-bottom: 4px;
}
.nav-cta-mobile {
display: inline-flex; margin-top: 16px;
width: 100%; justify-content: center;
}
/* Vendor badge */
.vendor-badge {
font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: rgba(255,255,255,0.55);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px; padding: 2px 8px; margin-left: 12px;
}
/* Old navbar progress bar — hidden */
.progress-bar { display: none; }
.progress-fill { display: none; }
.navbar-inner { display: none; }
/* ===== LAYOUT ===== */
.app { min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh; padding-top: 56px; overflow-x: hidden; overflow-y: hidden; position: relative; }
/* v.070: elimina franja blanca debajo de navbar — el padding-top:56px ahora tiene fondo dark
detrás del navbar fixed, evitando que el body bg #FAFBFC se vea cuando navbar es liquid-glass */
.app::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: 56px;
background: #0F1419;
z-index: 998;
pointer-events: none;
}
/* v.053 fix: cuando step4 (resultados) está activo, liberar el viewport-lock para que el plan cards + amortización scrolleen normalmente. Aplicado a html/body/app porque las 3 capas tienen overflow-y:hidden por el "no scroll" de splitA/splitB. */
html:has(#step4.active),
body:has(#step4.active),
body:has(#step4.active) .app,
.app:has(#step4.active) { max-height: none !important; min-height: auto !important; overflow-y: auto !important; }
.step-container { display: none; flex-direction: column; width: 100%; }
.step-container.active { display: flex; width: 100%; }
/* ── Tesla-style step transitions ── */
@keyframes tsla-step-in {
0% { opacity: 0; transform: translateY(24px) scale(0.982); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tsla-step-out {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-14px) scale(0.982); }
}
.step-container.tsla-exiting {
display: flex; pointer-events: none;
animation: tsla-step-out 0.26s var(--ease-exit) forwards;
}
.step-container.tsla-entering {
display: flex;
animation: tsla-step-in 0.46s var(--ease-default) forwards;
}
/* CENTERED CARD LAYOUT */
.step-split {
min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); width: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
background: var(--bg-secondary); padding: 32px 24px 32px;
}
.step-visual { display: none; }
.step-visual img { display: none; }
.step-visual-overlay { display: none; }
.step-form {
width: 100%; max-width: 600px; padding: 44px 44px 40px;
display: flex; flex-direction: column; justify-content: flex-start;
background: var(--bg-primary); border-radius: var(--radius-xl);
box-shadow: 0 4px 32px rgba(0,0,0,0.06);
border: 1px solid var(--border-default);
}
/* Progress zone below the card */
.step-progress-zone {
width: 100%; max-width: 600px; display: flex; flex-direction: column;
align-items: center; padding: 24px 0 32px; flex-shrink: 0;
}
.step-progress-bar {
width: 200px; height: 6px; border-radius: 3px;
background: var(--grey-95); overflow: hidden;
}
.step-progress-fill {
height: 100%; border-radius: 3px;
background: linear-gradient(to right, #1FAE5F, #5EE39E);
transition: width 0.5s var(--ease-out);
}
.step-indicator {
font-size: 0.6875rem; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--grey-70);
margin-top: 10px;
}
@media (max-width: 900px) {
.step-split { padding: 20px 16px 0; }
.step-form { max-width: 100%; padding: 28px 20px 24px; }
.step-progress-zone { padding: 20px 0 24px; }
}
.visual-text { display: none; }
.img-caption { display: none; }
/* ===== TYPOGRAPHY ===== */
.step-title { font-size: 1.75rem; font-weight: 600; font-family: var(--font-heading); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; color: var(--black); }
.step-subtitle { font-size: 0.88rem; color: var(--text-secondary); font-weight: 400; margin-bottom: 32px; max-width: 480px; line-height: 1.55; }
@media (max-width: 540px) { .step-title { font-size: 1.25rem; } .step-subtitle { font-size: 0.75rem; margin-bottom: 20px; } }
.form-section-label {
font-size: 0.6875rem; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--text-primary);
margin-bottom: 12px; margin-top: 32px;
}
.form-section-label:first-child { margin-top: 0; }
/* ===== FORM ELEMENTS ===== */
.field { margin-bottom: 14px; position: relative; }
/* Visual group break — used to separate conceptual groups within a section without adding headers */
.field.field-group-break { margin-top: 16px; }
.field label {
display: block; font-size: 0.75rem; font-weight: 500;
color: var(--text-secondary); margin-bottom: 6px; letter-spacing: 0.2px;
text-transform: none;
}
/* Asteriscos rojos suprimidos globalmente: el UI asume todos los campos
son obligatorios salvo los que dicen "(opcional)" explícitamente. */
.field label .req { display: none; }
.field input, .field select {
width: 100%; padding: 12px 16px; font-size: 0.88rem; font-family: inherit;
border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-primary);
color: var(--black); transition: var(--transition); outline: none;
appearance: none; -webkit-appearance: none;
}
.field input:focus, .field select:focus { outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none; } /* S111+ · ink neutro */
.field input::placeholder { color: var(--gray-300); font-size: 0.84rem; letter-spacing: 0; font-weight: 400; }
.field select:invalid, .field select option[value=""] { font-size: 0.84rem; }
.field input:read-only { background: var(--gray-50); color: var(--gray-500); cursor: default; }
.field input:read-only:focus { border-color: var(--gray-200); box-shadow: none; }
.field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23737373'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.field select:invalid { color: var(--gray-300); }
.field select option { color: var(--text-primary); }
.field select option[value=""] { color: var(--gray-300); }
.field-hint { font-size: 0.6875rem; color: var(--gray-400); margin-top: 4px; line-height: 1.4; }
/* VALIDATION */
.field-error { font-size: 0.6875rem; color: var(--amber); margin-top: 4px; line-height: 1.3; display: none; font-weight: 500; }
.field-error.visible { display: block; }
.field input.invalid, .field select.invalid { border-color: var(--warning-solid) !important; background: var(--amber-light); }
.field input.valid, .field select.valid { border-color: var(--green) !important; }
.field input.suspicious { border-color: var(--warning-solid) !important; background: var(--amber-light); }
.field-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.digit-counter { font-size: 0.6875rem; color: var(--gray-300); font-weight: 600; font-variant-numeric: tabular-nums; }
.digit-counter.complete { color: var(--green); }
.domain-hint { font-size: 0.6875rem; font-weight: 500; margin-top: 4px; }
.domain-hint.common { color: var(--green); }
.domain-hint.uncommon { color: var(--amber); }
/* PHONE PREFIX */
.phone-input-wrap { position: relative; }
.phone-prefix {
position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px;
padding: 0 12px; font-size: 0.88rem; color: var(--gray-400); font-weight: 600;
pointer-events: none; display: flex; align-items: center;
background: var(--gray-50); border-right: 1px solid var(--gray-200);
border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-family: inherit;
}
.phone-input-wrap input { padding-left: 62px; }
/* Honeypot — invisible para humanos, capturado por bots */
.hp-field {
position: absolute !important;
left: -10000px !important;
width: 1px !important; height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* OTP */
.otp-section { margin-top: 10px; display: none; }
.otp-section.visible { display: block; }
.otp-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.otp-row input {
flex: 1; padding: 11px 14px; font-size: 1rem; font-family: inherit;
border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--black);
letter-spacing: 6px; text-align: center; font-weight: 700; outline: none; transition: var(--transition);
}
.otp-row input:focus { outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none; } /* S111+ · ink neutro */
.btn-send-code {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 0 18px; height: 40px; font-size: 13px; font-weight: 500; font-family: inherit;
background: #0F1419; color: #FFFFFF; border: none; cursor: pointer;
border-radius: var(--radius-button); letter-spacing: 0; text-transform: none; transition: background var(--motion-fast) var(--ease-default); white-space: nowrap;
}
.btn-send-code:hover { background: #3A4654; }
.btn-send-code:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; }
.btn-resend {
background: none; border: none; color: var(--gray-400); font-size: 13px;
font-weight: 500; cursor: pointer; font-family: inherit; text-transform: none;
letter-spacing: 0; margin-top: 6px; transition: color var(--motion-fast) var(--ease-default);
}
.btn-resend:hover:not(:disabled) { color: var(--action); }
.btn-resend:disabled { cursor: not-allowed; opacity: 0.5; }
/* v.076: error pill mejorado — icono Lucide AlertCircle + bg + más prominente */
.otp-error {
display: none;
margin-top: 12px;
padding: 10px 14px;
background: #FEE2E2;
border: 1px solid rgba(176, 30, 30, 0.20);
border-radius: 10px;
color: #B01E1E;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
text-align: left;
align-items: center;
gap: 8px;
}
.otp-error.visible { display: inline-flex; animation: otp-error-fade-in var(--motion-base) var(--ease-default); }
.otp-error::before {
content: '';
flex-shrink: 0;
width: 16px; height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}
@keyframes otp-error-fade-in {
0% { opacity: 0; transform: translateY(-3px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.otp-error.visible { animation: none; }
}
/* VERIFIED BADGE */
.verified-badge {
display: none; align-items: center; gap: 5px; margin-top: 6px;
font-size: 0.6875rem; font-weight: 700; color: var(--green); letter-spacing: 0.5px; text-transform: uppercase;
}
.verified-badge.visible { display: inline-flex; }
/* INFO NOTE · regla dura DS v0.5.1: prohibido border-left decorativo.
Reemplazado por full border 1px del accent-green + radio simétrico. */
.info-note {
background: var(--action-tint);
border: 1px solid var(--action);
border-radius: var(--radius-sm);
padding: 12px 16px; margin-top: 10px; margin-bottom: 14px; font-size: 0.75rem;
color: var(--text-secondary); line-height: 1.5;
}
.info-note strong { color: var(--text-primary); }
/* RADIO CARDS - legacy, not used */
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 540px) { .radio-cards { grid-template-columns: 1fr; } }
.radio-card {
border: 1px solid transparent; padding: 14px 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 14px;
background: var(--grey-100); color: var(--text-primary);
border-radius: var(--radius);
transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.radio-card:hover { background: var(--grey-95); }
.radio-card:active { transform: scale(0.97); }
.radio-card.selected { background: var(--action-tint); border-color: var(--action); }
.radio-card .rc-content { text-align: center; }
.radio-card .rc-title { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
.radio-card input { display: none; }
/* CONTRACT SWITCH — neutral grey background */
.contract-type-switch {
display: flex; gap: 0; background: var(--grey-100); border-radius: 999px;
padding: 3px; margin-bottom: 0; width: 100%;
position: relative;
border: 1px solid var(--border-default);
}
.contract-type-switch-option {
flex: 1; padding: 10px 24px; font-size: 0.88rem; font-weight: 500; cursor: pointer;
color: var(--grey-60); background: transparent; border: none;
border-radius: 999px;
transition: color 0.3s var(--ease-out);
position: relative !important; z-index: 2 !important; font-family: inherit; text-align: center;
}
.contract-type-switch-option:hover {
color: var(--text-primary);
}
.contract-type-switch-slider {
position: absolute; top: 3px; bottom: 3px;
background: #0F1419; border-radius: 999px;
transition: left 0.35s var(--ease-default), width 0.35s var(--ease-default);
z-index: 1; pointer-events: none;
}
.contract-type-switch-option.active {
color: #FFFFFF;
font-weight: 600;
}
.contract-type-switch input[type="radio"] {
display: none;
}
/* BURO CARDS */
.buro-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 540px) { .buro-cards { grid-template-columns: 1fr; } }
.buro-rate { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 4px; font-weight: 500; }
.buro-card {
border: 1px solid transparent; padding: 22px 20px; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
text-align: center; background: var(--grey-100);
border-radius: var(--radius); font-size: 0.75rem; font-weight: 500; color: var(--grey-70);
line-height: 1.3; min-height: 100px;
transition: background var(--motion-base) ease, border-color var(--motion-base) ease, transform 0.15s ease;
}
.buro-card:hover { background: var(--grey-90); color: var(--text-primary); }
.buro-card:active { transform: scale(0.97); }
.buro-card.selected { background: var(--grey-100); border-color: #0F1419; border-width: 1.5px; color: #0F1419; }
.buro-card .buro-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 6px; }
.buro-card .buro-icon svg { width: 28px; height: 28px; display: block; color: var(--text-tertiary); transition: color 0.4s var(--ease-out); }
.buro-card:hover .buro-icon svg, .buro-card.selected .buro-icon svg { color: #0F1419; }
/* CHECKBOX ROW */
.checkbox-row {
display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
padding: 12px 14px; border: 1px solid var(--gray-150); background: var(--gray-50);
border-radius: var(--radius-sm);
}
.checkbox-row input[type="checkbox"] {
width: 18px; height: 18px; accent-color: #0F1419; /* v.054: neutral ink, no verde */
flex-shrink: 0; cursor: pointer; margin-top: 1px;
}
.checkbox-row label { font-size: 0.75rem; color: var(--gray-500); cursor: pointer; line-height: 1.4; }
.checkbox-row label a { color: var(--action); text-decoration: underline; } /* links sí siguen verdes */
/* ===== BUTTONS — Exante DS v0.5.1 ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 44px; padding: 0 24px; font-size: 14px; font-weight: 500; font-family: var(--font-heading);
border-radius: var(--radius-button); border: 0; cursor: pointer;
transition: background var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default), transform var(--motion-fast) var(--ease-default);
text-decoration: none; white-space: nowrap; letter-spacing: 0; text-transform: none;
}
/* Primary · ink (operativo — flujo de onboarding) */
.btn-primary { background: #0F1419; color: #FFFFFF; }
.btn-primary:hover { background: #3A4654; }
.btn-primary:active { background: #3A4654; transform: scale(0.98); }
.btn-primary:disabled { background: var(--grey-90); color: var(--grey-70); cursor: not-allowed; opacity: 1; }
.btn-primary:disabled:hover { background: var(--grey-90); transform: none; }
/* Accent · verde (sales CTA · plan cards · highlight) */
.btn-accent { background: #1FAE5F; color: #FFFFFF; }
.btn-accent:hover { background: #16904E; }
.btn-accent:active { background: #0E7A3F; transform: scale(0.98); }
.btn-accent:disabled { background: var(--grey-90); color: var(--grey-70); border: 1px solid var(--grey-90); cursor: not-allowed; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-spinner { animation: btn-spin 0.7s linear infinite; }
/* Secondary · outline (operativo — atrás, cancelar) */
.btn-outline { background: #FFFFFF; color: var(--text-primary); border: 1px solid var(--border-strong); padding: 0 24px; }
.btn-outline:hover { background: var(--grey-100); }
.btn-outline:active { transform: scale(0.98); }
/* Ghost · navegación suave */
.btn-ghost { background: none; color: var(--gray-600); padding: 0 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; transition: color var(--motion-fast) var(--ease-default); }
.btn-ghost:hover { color: var(--action); }
.btn-group { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
/* COUNTER */
.counter-field { display: flex; align-items: center; gap: 14px; }
.counter-btn {
width: 34px; height: 34px; border: none; background: var(--grey-100);
font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: var(--transition); flex-shrink: 0; color: var(--grey-50); border-radius: 50%;
}
.counter-btn:hover { background: var(--action-tint); color: var(--action); }
.counter-value { font-size: 2rem; font-weight: 700; font-family: var(--font-data); letter-spacing: -0.03em; width: 56px; text-align: center; border: none; background: transparent; padding: 0 2px; color: var(--black); outline: none; -moz-appearance: textfield; border-bottom: none; transition: var(--transition); }
.counter-value::-webkit-outer-spin-button, .counter-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.counter-value:hover { }
.counter-value:focus { }
/* SLIDER */
.slider-field { margin-bottom: 18px; }
.slider-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.slider-header label { font-size: 0.75rem; font-weight: 600; color: var(--gray-500); }
.slider-value { font-size: 1.1rem; font-weight: 700; font-family: var(--font-data); letter-spacing: -0.03em; color: var(--black); }
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--action) 0%, var(--grey-90) 0%); height: 6px; border-radius: 3px; }
input[type="range"]::-moz-range-track { background: var(--grey-90); height: 6px; border-radius: 3px; }
input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--gray-200); outline: none; }
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
background: var(--action); cursor: pointer; transition: transform 0.2s; box-shadow: 0 2px 8px var(--action-ring);
margin-top: -9px;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--action); cursor: pointer; border: none; box-shadow: 0 2px 8px var(--action-ring); }
/* ===== TESLA-STYLE PRICING CARD ===== */
.pricing-card {
background: var(--bg-primary);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
overflow: visible;
margin-bottom: 0;
box-shadow: 0 1px 2px rgba(15,20,25,0.04);
}
/* --- Contract type section (inside card) — DEPRECATED, kept for safety --- */
.pricing-section-contract {
padding: 20px 20px 8px;
}
/* --- Tabs row above the pricing card (switch lifted out of card) --- */
.contract-tabs-row {
margin-bottom: 12px;
}
.contract-tabs-row .contract-type-switch {
width: 100%;
/* Slightly elevated to read as a navigator above the card */
box-shadow: 0 1px 2px rgba(15,20,25,0.04);
}
/* Visually link active tab into the card below */
.contract-tabs-row + .pricing-card {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
/* --- Vehicle price section --- */
.pricing-section-vehicle {
padding: 20px;
border-top: none;
}
.pricing-section-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--grey-70);
margin-bottom: 8px;
}
.pricing-hero-value {
display: flex;
align-items: baseline;
justify-content: center;
}
.pricing-hero-input {
font-size: 2rem;
font-weight: 700;
font-family: inherit;
letter-spacing: -0.05em;
color: var(--gray-300);
border: none;
background: transparent;
outline: none;
width: 60px;
min-width: 60px;
text-align: center;
border-bottom: 2px solid transparent;
transition: var(--transition), width 0.3s ease;
padding: 0 2px;
caret-color: var(--action);
}
.pricing-hero-input.has-value { color: var(--black); width: 200px; }
.pricing-hero-input:hover { }
.pricing-hero-input:focus { color: var(--black); }
.pricing-hero-hint {
font-size: 0.6875rem;
color: var(--gray-400);
margin-top: 2px;
display: flex;
align-items: center;
gap: 6px;
}
.pricing-hint-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300); }
/* --- Contract collapsible panel (Exante mega-menu style) --- */
/* Contract collapsible — always open, no collapse animation */
.contract-collapsible {
height: auto; overflow: visible;
}
.contract-collapsible-inner {
opacity: 1;
}
/* Crossfade for contract-switch text changes */
.crossfade-out {
opacity: 0 !important;
transition: opacity 0.15s ease-out !important;
}
.crossfade-in {
opacity: 1;
transition: opacity 0.2s ease-in !important;
}
.pricing-hero-input.shake { animation: priceShake 0.4s ease; border-bottom-color: var(--amber); }
@keyframes priceShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(2px)} }
.pricing-error-hint {
font-size: 0.6875rem; color: var(--amber); font-weight: 500; margin-top: 6px;
opacity: 0; max-height: 0; overflow: hidden;
transition: opacity 0.3s ease, max-height 0.3s ease;
}
.pricing-error-hint.visible { opacity: 1; max-height: 30px; }
/* --- Enganche section --- */
.pricing-section-enganche {
padding: 20px;
border-top: 1px solid var(--border-default);
}
.pricing-enganche-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
margin-bottom: 8px;
}
/* Vehicle section: price + count side by side (grid proportions) */
.pricing-vehicle-row {
display: grid;
grid-template-columns: 1fr 1px 1fr;
border-top: 1px solid var(--border-default);
border-bottom: 1px solid var(--border-default);
padding: 20px 0;
margin: 0 -20px;
padding-left: 20px;
padding-right: 20px;
gap: 0;
align-items: stretch;
}
align-items: center;
}
.pricing-vehicle-col-price {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.pricing-vehicle-col-divider {
width: 1px;
background: var(--border-default);
align-self: center;
height: 56px;
}
.pricing-vehicle-col-count {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pricing-vehicle-col-count .pricing-section-label {
margin-bottom: 10px;
}
.pricing-vehicle-col-count .counter-field {
gap: 14px;
margin-top: 0;
}
.pricing-vehicle-col-count .counter-btn {
width: 40px; height: 40px;
font-size: 1.1rem;
}
.pricing-vehicle-col-count .counter-value {
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.03em;
width: 44px;
color: var(--black);
}
.pricing-fleet-label {
font-size: 0.75rem;
color: var(--gray-400);
margin-top: 6px;
text-align: center;
}
/* Mobile: keep grid but tighten */
@media (max-width: 540px) {
.pricing-section-vehicle { padding: 16px; }
.pricing-vehicle-row {
display: flex;
flex-direction: column;
}
.pricing-vehicle-col-divider {
height: 1px;
width: auto;
align-self: auto;
margin: 14px 0;
}
.pricing-vehicle-col-count {
flex-direction: row;
align-items: center;
gap: 12px;
}
.pricing-vehicle-col-count .pricing-section-label {
font-size: 0.625rem;
letter-spacing: 1.4px;
margin-bottom: 0;
margin-right: 4px;
}
.pricing-fleet-label {
font-size: 0.75rem;
margin-top: 0;
margin-left: 4px;
}
}
@media (max-width: 380px) {
.pricing-section-vehicle { padding: 14px; }
}
/* --- Prospect vehicle sub-block (Step 1 · client-only) --- */
.pricing-section-prospect-vehicle {
padding: 20px;
border-top: 1px solid var(--border-default);
background: transparent;
}
.pricing-section-prospect-vehicle > .pricing-enganche-label {
margin-bottom: 12px;
}
.prospect-vehicle-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
margin-bottom: 10px;
}
.prospect-vehicle-grid .field { margin: 0; }
.prospect-vehicle-grid .prospect-field-full { grid-column: 1 / -1; }
/* --- Typeable combobox (Marca, Versión) --- */
.combobox { position: relative; }
.combobox-input-wrap { position: relative; display: flex; }
.combobox-input {
flex: 1;
width: 100%; box-sizing: border-box;
padding: 10px 36px 10px 14px;
border: 1px solid var(--border-default);
border-radius: var(--radius);
font-family: Inter, sans-serif; font-size: 0.88rem;
color: var(--text-primary); background: var(--bg-primary);
transition: border-color 0.2s ease;
}
.combobox-input::placeholder {
color: var(--gray-300);
font-weight: 400;
letter-spacing: -0.01em;
}
.combobox-input:focus { outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none; } /* S111+ · ink neutro */
.combobox-input:disabled {
background: var(--grey-100);
color: var(--gray-300);
cursor: not-allowed;
}
/* Año select dentro del combobox-input-wrap: mismo look que un combobox
sin lista filtrable (solo 2 opciones, no necesita autocomplete). */
.prospect-year-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235C6B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px 14px;
cursor: pointer;
}
.combobox-toggle {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
background: transparent; border: 0; padding: 6px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.combobox-toggle svg {
width: 14px; height: 14px;
color: var(--grey-50);
transition: transform var(--motion-fast) ease;
}
.combobox[aria-expanded="true"] .combobox-toggle svg { transform: rotate(180deg); }
.combobox.is-freeform .combobox-toggle { display: none; }
.combobox.is-catalog-selected .combobox-input { padding-right: 58px; }
/* DS v0.5.1: prohibido emoji en UI (content: '✓'). Reemplazado por SVG
Lucide check inline (stroke 1.5 currentColor, mismo lenguaje icónico
que el resto del flow). */
.combobox.is-catalog-selected .combobox-input-wrap::before {
content: '';
display: inline-block;
position: absolute; right: 36px; top: 50%;
width: 14px; height: 14px;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
}
.combobox-list {
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
background: var(--bg-primary);
border: 1px solid var(--border-default);
border-radius: var(--radius);
max-height: 240px; overflow-y: auto;
list-style: none; margin: 0; padding: 4px;
box-shadow: 0 4px 12px rgba(15,20,25,0.08);
z-index: 20;
}
.combobox-list[hidden] { display: none; }
.combobox-option {
padding: 8px 12px;
font-family: Inter, sans-serif; font-size: 0.88rem;
color: var(--text-primary);
cursor: pointer;
border-radius: var(--radius-sm);
user-select: none;
}
.combobox-option:hover,
.combobox-option.is-highlighted { background: var(--grey-100); }
.combobox-option-separator {
height: 1px; background: var(--border-default);
margin: 4px 8px; list-style: none;
}
.combobox-option-other {
color: var(--grey-50);
}
.combobox-empty {
padding: 10px 12px;
font-family: Inter, sans-serif; font-size: 0.8rem;
color: var(--gray-300);
font-style: italic;
}
.prospect-year-radios {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.prospect-year-radio {
display: flex; align-items: center; justify-content: center;
text-align: center;
padding: 12px 6px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--grey-100);
cursor: pointer;
font-family: Inter, sans-serif; font-size: 0.88rem; font-weight: 600;
color: var(--grey-50);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.prospect-year-radio span { width: 100%; text-align: center; }
.prospect-year-radio input[type="radio"] { display: none; }
.prospect-year-radio:hover { background: var(--grey-90); border-color: var(--border-strong); }
.prospect-year-radio:has(input:checked) {
background: var(--grey-100);
border-color: #0F1419; border-width: 1.5px;
color: #0F1419; font-weight: 700;
}
.prospect-vehicle-note {
display: flex; align-items: flex-start; gap: 6px;
font-family: Inter, sans-serif; font-size: 0.6875rem;
color: var(--gray-300);
margin-top: 4px;
}
.prospect-vehicle-note svg { flex-shrink: 0; margin-top: 1px; }
@media (max-width: 480px) {
.prospect-vehicle-grid { grid-template-columns: 1fr; gap: 10px; }
.pricing-section-prospect-vehicle { padding: 16px; }
}
.enganche-pills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.enganche-pill {
padding: 14px 6px; text-align: center; cursor: pointer;
border: 1px solid transparent; border-radius: var(--radius-sm);
background: var(--grey-100);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.enganche-pill:hover { background: var(--grey-90); border-color: var(--border-strong); }
.enganche-pill:active { transform: scale(0.97); }
.enganche-pill.selected { background: var(--grey-100); border-color: #0F1419; border-width: 1.5px; }
.enganche-pill-pct {
font-size: 0.88rem; font-weight: 600; color: var(--grey-50);
line-height: 1;
transition: color 0.4s var(--ease-out);
}
.enganche-pill.selected .enganche-pill-pct { color: #0F1419; font-weight: 700; }
/* --- Enganche exact amount input --- */
.enganche-exact-wrapper {
position: relative; margin-top: 12px;
}
.enganche-exact-row {
position: relative;
}
.enganche-exact-input {
width: 100%; padding: 10px 14px; padding-right: 60px; border: 1px solid var(--border-default); box-sizing: border-box;
border-radius: var(--radius); font-size: 0.88rem; font-weight: 600;
color: var(--text-primary); background: var(--bg-primary);
font-family: var(--font-data); letter-spacing: -0.02em;
transition: border-color 0.25s ease, background 0.25s ease, color 0.2s ease;
}
.enganche-exact-input::placeholder { color: var(--gray-300); font-weight: 400; font-size: 0.84rem; letter-spacing: -0.02em; }
.enganche-exact-input.value-flash { animation: valueFade 0.6s ease; }
@keyframes valueFade {
0% { opacity: 0.4; }
100% { opacity: 1; }
}
.enganche-exact-input:focus { outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none; } /* S111+ · ink neutro */
.enganche-exact-input.invalid { border-color: var(--warning-solid); background: var(--amber-light); }
.enganche-exact-input.shake { animation: priceShake 0.4s ease; }
.enganche-exact-pct {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
font-size: 0.75rem; font-weight: 700; color: var(--action);
white-space: nowrap; pointer-events: none;
transition: color 0.25s ease, opacity 0.25s ease;
}
.enganche-exact-pct.pct-flash {
animation: pctPulse 0.6s ease;
}
@keyframes pctPulse {
0% { opacity: 0.3; transform: translateY(-50%) scale(0.95); }
50% { opacity: 1; transform: translateY(-50%) scale(1.05); }
100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* --- Enganche pill text cross-fade --- */
.enganche-pill-pct { transition: opacity 0.18s ease, color 0.4s var(--ease-out); }
.enganche-pill-pct.text-out { opacity: 0; }
.enganche-pill-pct.text-in { animation: pillTextIn 0.32s var(--ease-out) forwards; }
@keyframes pillTextIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.enganche-exact-pct.invalid { color: var(--amber); }
.enganche-exact-error {
font-size: 0.6875rem; color: var(--amber);
margin-top: 0; min-height: 0;
max-height: 0; opacity: 0; overflow: hidden;
transition: max-height 0.2s ease, opacity 0.18s ease, margin-top 0.2s ease;
}
.enganche-exact-error.visible {
max-height: 28px; opacity: 1; margin-top: 4px;
}
.enganche-exact-hint {
font-size: 0.6875rem; color: var(--gray-300);
margin-top: 6px;
}
/* --- Summary row (enganche $ vs a financiar $) --- */
.pricing-summary {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 0;
padding: 24px;
border-top: 1px solid var(--border-default);
background: transparent;
border-radius: 0 0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px);
align-items: center;
/* slide-down reveal for fleet (>1 vehicle) */
max-height: 200px;
opacity: 1;
overflow: visible;
transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, border-top-color 0.3s ease;
}
.pricing-summary.collapsed {
max-height: 0;
opacity: 0;
padding: 0;
border-top-color: transparent;
overflow: hidden;
}
.pricing-summary-divider {
background: var(--border-default);
align-self: stretch;
margin: -24px 0;
}
.pricing-summary-item {
text-align: center;
}
.pricing-summary-item:first-child {
border-right: none;
}
.pricing-summary-item-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--gray-400);
margin-bottom: 4px;
}
.pricing-summary-item-value {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.4px;
color: var(--black);
}
.pricing-summary-item-value.financed {
color: var(--gray-700);
}
/* TOOLTIPS */
.info-icon-wrapper {
position: relative; display: inline-flex; align-items: baseline; gap: 6px;
cursor: default;
}
.info-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; border-radius: 50%;
background: rgba(58,111,181,0.12); color: #3A6FB5;
font-size: 0.625rem; font-weight: 700; flex-shrink: 0;
transform: translateY(-1px);
line-height: 1; font-style: normal;
}
.info-icon:hover {
background: rgba(58,111,181,0.22);
}
.info-icon { position: relative; }
.tooltip {
position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
z-index: 9999;
/* Fondo dark ink (mismo color que el slider del switch arrendamiento/crédito)
+ texto blanco. Glow con doble sombra y un halo sutil para "lift" visible. */
background: #0F1419; color: #FFFFFF; font-weight: 400;
padding: 10px 14px; border-radius: var(--radius-sm);
font-size: 0.75rem; line-height: 1.45; white-space: normal;
min-width: 220px; max-width: 280px; text-align: left;
pointer-events: none;
box-shadow:
0 12px 28px rgba(15, 20, 25, 0.28),
0 4px 10px rgba(15, 20, 25, 0.20),
0 0 0 1px rgba(15, 20, 25, 0.06);
border: 0;
opacity: 0;
transition: opacity 0.2s ease;
}
.info-icon:hover .tooltip { opacity: 1; }
.info-icon.active .tooltip { opacity: 1; pointer-events: auto; }
@media (max-width: 540px) {
.tooltip { left: auto; right: -10px; transform: none; min-width: 200px; max-width: 260px; }
.tooltip::before, .tooltip::after { left: auto; right: 14px; transform: none; }
}
.tooltip::before {
/* Arrow exterior — mismo color de fondo para continuidad del bubble.
(Antes era el border del tooltip blanco; ahora es solo glow nativo.) */
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 7px solid transparent; border-top-color: #0F1419;
filter: drop-shadow(0 4px 6px rgba(15,20,25,0.20));
}
.tooltip::after {
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 6px solid transparent; border-top-color: #0F1419;
margin-top: -1px;
}
/* adelanto-optional-note removed */
/* COLLAPSIBLE */
.collapsible-toggle {
background: none; border: none; font-family: inherit; font-size: 0.6875rem;
font-weight: 600; color: var(--gray-500); cursor: pointer; letter-spacing: 1.8px;
text-transform: uppercase; padding: 8px 0; display: flex; align-items: center; gap: 6px;
transition: var(--transition);
}
.collapsible-toggle:hover { color: var(--action); }
.collapsible-toggle svg { transition: transform 0.3s ease; }
.collapsible-toggle.open svg { transform: rotate(180deg); }
.collapsible-content { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.35s var(--ease-out), opacity 0.3s var(--ease-out); }
.collapsible-content > div { overflow: hidden; }
.collapsible-content.open { grid-template-rows: 1fr; opacity: 1; }
/* ===== CENTERED STEP (Email Verification) ===== */
.step-centered {
min-height: calc(100vh - 56px); width: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: var(--bg-secondary); padding: 32px 24px 0;
}
.verify-card {
background: var(--bg-primary); border-radius: var(--radius-xl); padding: 44px 44px 40px;
max-width: 460px; width: 100%; box-shadow: 0 4px 32px rgba(0,0,0,0.06);
border: 1px solid var(--border-default);
}
.verify-icon {
width: 56px; height: 56px; border-radius: 50%; background: var(--bg-tertiary);
display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.verify-icon svg { color: var(--text-primary); }
@media (max-width: 540px) { .verify-card { padding: 28px 20px 24px; } }
/* ===== RESULTS ===== */
.results-page {
/* Background mantenido como gradient decorativo de la pantalla de
resultados (no es UI funcional). Spring colors legacy preservadas
porque cambiarlas requeriría rebalancear la ilustración completa;
TODO refactor con gradient-brand del DS cuando se rediseñe results. */
min-height: calc(100vh - 56px); width: 100%;
background:
radial-gradient(circle 380px at 12% 18%, rgba(15, 129, 129, 0.50), transparent 65%),
radial-gradient(circle 340px at 85% 32%, rgba(16, 185, 129, 0.45), transparent 65%),
radial-gradient(circle 420px at 25% 78%, rgba(217, 240, 96, 0.45), transparent 65%),
radial-gradient(circle 320px at 70% 88%, rgba(110, 231, 183, 0.40), transparent 60%),
linear-gradient(180deg, #D4ECDD 0%, #E0EFD6 50%, #ECF4DC 100%);
}
.results-hero {
position: relative; padding: 40px 32px 48px; text-align: center;
overflow: hidden;
background: rgba(255, 255, 255, 0.42);
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
max-width: 1112px; margin: 32px auto 0; border-radius: var(--radius-xl);
box-shadow:
0 12px 40px rgba(10, 13, 18, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.7);
}
.results-hero::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 35%);
pointer-events: none;
border-radius: inherit;
z-index: 1;
}
.results-hero::after {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
z-index: 2;
}
.results-hero-img { display: none; }
.results-hero-content { position: relative; z-index: 2; }
.results-hero .step-title { color: var(--black); text-transform: none; }
.results-hero .step-subtitle { color: var(--text-tertiary); margin: 8px auto 0; }
.results-summary { display: flex; justify-content: center; gap: 40px; margin-top: 32px; flex-wrap: wrap; }
.summary-item { text-align: center; position: relative; }
.summary-item + .summary-item::before { content: ''; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 1px; height: 32px; background: var(--grey-90); }
.summary-item.vendor-only + .summary-item::before { display: none; }
.modo-vendedor .summary-item.vendor-only + .summary-item::before { display: block; }
.summary-label { font-size: 0.6875rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey-70); margin-bottom: 4px; font-weight: 600; }
.summary-value { font-size: 1.3rem; font-weight: 700; font-family: var(--font-data); letter-spacing: -0.04em; color: var(--black); }
/* PLAN CARDS — Exante Design System (5 plazos: 12/24/36/48/60)
Layout: 3 cards visibles + 2 en carrusel (chips arriba + flechas a los lados)
Borde: gradiente 5px (#0F8181 → #10B981 → #D9F060) via ::before + mask-composite */
.plans-section { max-width: 1160px; margin: 24px auto 0; padding: 0 24px 16px; position: relative; z-index: 3; }
/* Chip selector arriba del carrusel */
.plazo-chips {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
margin: 0 0 22px;
}
.plazo-chip {
font-family: var(--font-heading);
background: transparent;
border: 1px solid var(--border-default);
color: var(--ink-secondary);
padding: 8px 16px;
border-radius: var(--r-pill);
font-size: 12.5px; font-weight: 600;
letter-spacing: 0.2px;
cursor: pointer;
transition: all 0.2s var(--ease-out);
white-space: nowrap;
}
.plazo-chip:hover { border-color: var(--volt); color: var(--volt); }
.plazo-chip.is-active {
background: var(--volt);
border-color: var(--volt);
color: #fff;
box-shadow: var(--shadow-volt);
}
.plazo-chip.is-exceeded { opacity: 0.55; }
.plazo-chip.is-exceeded::after {
content: '·';
margin-left: 4px;
color: var(--gray-400);
}
/* Carrusel wrapper (flechas + viewport) */
.plans-carousel {
position: relative;
display: flex; align-items: stretch; gap: 10px;
}
.plazo-arrow {
flex: 0 0 38px;
width: 38px; height: 38px;
align-self: center;
border-radius: 50%;
border: 1px solid var(--border-default);
background: var(--bg-primary);
color: var(--ink-primary);
cursor: pointer;
display: grid; place-items: center;
font-size: 18px; font-weight: 600; line-height: 1;
transition: all 0.2s var(--ease-out);
user-select: none;
font-family: var(--font-heading);
}
.plazo-arrow:hover:not(:disabled) {
border-color: var(--volt); color: var(--volt);
transform: translateY(-1px);
}
.plazo-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.plans-viewport {
flex: 1 1 0;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.plans-viewport::-webkit-scrollbar { display: none; }
.plans-track {
display: flex;
gap: 14px;
padding: 8px 4px 14px;
align-items: stretch;
}
.plan-card {
flex: 0 0 calc((100% - 28px) / 3);
background: rgba(255, 255, 255, 0.42);
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--r-lg);
padding: 26px 22px 22px;
position: relative;
display: flex; flex-direction: column;
text-align: left;
transition: all 0.35s var(--ease-default);
min-height: 100%;
overflow: hidden;
box-shadow:
0 12px 40px rgba(10, 13, 18, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.plan-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 35%);
pointer-events: none;
border-radius: inherit;
z-index: 0;
transition: opacity 0.25s var(--ease-out);
}
.plan-card::after {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
z-index: 1;
}
.plan-card > * { position: relative; z-index: 2; }
.plan-card:hover {
transform: translateY(-4px);
border-color: rgba(79, 70, 229, 0.30);
box-shadow:
0 20px 56px rgba(79, 70, 229, 0.16),
0 6px 18px rgba(10, 13, 18, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.plan-card-title {
font-family: var(--font-heading);
font-size: 15px; font-weight: 600;
color: var(--ink-primary);
letter-spacing: -0.01em; line-height: 1.2;
margin-bottom: 14px;
}
.plan-card-price-block { margin-bottom: 16px; }
.plan-card-price {
font-family: var(--font-data);
font-size: 30px; font-weight: 700; letter-spacing: -0.04em;
font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums;
color: var(--ink-primary);
margin: 0; line-height: 1;
}
.plan-card-price small {
font-family: var(--font-body);
font-size: 12px; color: var(--ink-secondary); font-weight: 500;
letter-spacing: 0; margin-left: 4px;
}
.plan-card-cat {
font-family: var(--font-data); font-variant-numeric: tabular-nums;
font-size: 12px; color: var(--accent-text); font-weight: 600;
letter-spacing: 0.2px;
margin-top: 6px;
}
.plan-card-divider {
border: none;
border-top: 1px solid var(--border-default);
margin: 0 0 14px;
}
.plan-card-benefits {
list-style: none;
padding: 0; margin: 0 0 14px;
display: flex; flex-direction: column; gap: 10px;
}
.plan-card-benefit {
display: flex; align-items: flex-start; gap: 10px;
font-family: var(--font-body);
font-size: 13px; color: var(--ink-secondary);
line-height: 1.45;
}
.plan-card-benefit-icon {
flex: 0 0 18px; width: 18px; height: 18px;
border-radius: 50%;
background: transparent;
color: #1FAE5F;
display: grid; place-items: center;
font-size: 12px; font-weight: 700;
margin-top: 1px;
}
.plan-card-veu {
display: flex; justify-content: space-between; align-items: baseline;
padding-top: 12px;
border-top: 1px solid var(--border-default);
font-family: var(--font-body);
font-size: 12px; color: var(--ink-secondary);
margin-bottom: 16px;
}
.plan-card-veu strong {
font-family: var(--font-data);
color: var(--ink-primary); font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: 13px;
}
.plan-card.ineligible { opacity: 0.5; }
.plan-card.ineligible .plan-cta-primary { display: none; }
.plan-card-footer { margin-top: auto; }
.plan-cta-primary .btn {
width: 100%; padding: 13px 14px; font-size: 12px;
letter-spacing: 0.6px;
}
.plan-link {
display: block; margin-top: 12px; font-size: 12.5px; font-weight: 600;
font-family: var(--font-heading);
color: var(--volt); cursor: pointer;
text-transform: none; letter-spacing: 0;
background: none; border: none;
width: 100%; text-align: center;
transition: var(--transition);
}
.plan-link:hover { color: var(--volt-dark); }
/* Mobile dots indicator */
.plans-dots {
display: none;
gap: 6px; justify-content: center;
margin-top: 14px;
}
.plans-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--gray-200); border: none;
cursor: pointer; padding: 0;
transition: all 0.2s var(--ease-out);
}
.plans-dot.is-active {
background: var(--volt);
width: 22px; border-radius: 4px;
}
/* EXCEDE state — glass desaturado + grayscale parcial */
.plan-card.exceeded {
background: rgba(255, 255, 255, 0.45);
border-color: rgba(127, 134, 141, 0.20);
box-shadow:
0 4px 16px rgba(10, 13, 18, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.plan-card.exceeded > *:not(.exceeded-top-bar) {
filter: grayscale(0.7) opacity(0.65);
}
.plan-card.exceeded:hover {
transform: none;
border-color: rgba(127, 134, 141, 0.20);
box-shadow:
0 4px 16px rgba(10, 13, 18, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.plan-card.exceeded .plan-cta-primary { display: none; }
.plan-card.exceeded .plan-card-benefits { display: none; }
.plan-card.exceeded .plan-card-divider { display: none; }
.plan-card.exceeded .plan-link { color: var(--volt); filter: none !important; }
/* v.048 fix: el footer del card ineligible no recibe grayscale */
.plan-card.exceeded > .plan-card-footer { filter: none !important; }
.plan-card.exceeded .plan-link { filter: none !important; opacity: 1 !important; }
.plan-card.exceeded.is-selected-plan { border-color: #1FAE5F !important; }
.plan-card.exceeded .plan-link:hover { color: var(--volt-dark); }
.exceeded-top-bar {
background: var(--gray-100);
color: var(--gray-500);
font-family: var(--font-heading);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
padding: 7px 16px;
border-radius: calc(var(--r-lg) - 5px) calc(var(--r-lg) - 5px) 0 0;
width: calc(100% + 44px - 10px);
margin: -26px -22px 18px;
align-self: stretch;
}
.exceeded-caption {
font-family: var(--font-body);
font-size: 0.75rem;
color: var(--gray-400);
line-height: 1.4;
margin: 12px 0 14px;
text-align: center;
}
.exceeded-caption strong {
font-family: var(--font-data);
font-weight: 700;
color: var(--gray-500);
}
/* Responsive: tablet — 3 cards still visible, smaller padding */
@media (max-width: 1100px) {
.plan-card { padding: 22px 18px 20px; }
.plan-card-price { font-size: 26px; }
.plazo-arrow { flex: 0 0 34px; width: 34px; height: 34px; }
}
/* Mobile: 1 card por viewport, scroll-snap, dots, sin chips ni flechas */
@media (max-width: 700px) {
.plazo-chips { display: none; }
.plazo-arrow { display: none; }
.plans-carousel { gap: 0; }
.plans-viewport { scroll-snap-type: x mandatory; }
.plans-track { padding: 8px 16px 14px; gap: 12px; }
.plan-card {
flex: 0 0 86%;
scroll-snap-align: center;
padding: 24px 20px 20px;
}
.plans-dots { display: flex; }
.exceeded-top-bar { width: calc(100% + 40px - 10px); margin: -24px -20px 18px; }
}
/* ============================================================ */
/* VENDOR MODE OVERRIDES */
/* ============================================================ */
.modo-vendedor .client-only { display: none !important; }
.vendor-only { display: none; }
.modo-vendedor .vendor-only { display: block; }
.modo-vendedor .vendor-only.flex { display: flex; }
.vendor-badge {
font-size: 0.625rem; font-weight: 700; letter-spacing: 1.8px;
text-transform: uppercase; color: var(--action); background: var(--action-tint);
padding: 4px 12px; border-radius: 20px; margin-left: 12px;
align-items: center; vertical-align: middle;
}
.modo-vendedor .vendor-badge { display: inline-flex; }
/* Vendor action bar */
.vendor-action-bar { max-width: 880px; margin: 0 auto; }
.vendor-disclaimer { font-size: 0.6875rem; color: var(--text-tertiary); text-align: center; padding: 0 24px 16px; line-height: 1.5; transition: color 0.35s; }
.vendor-share-card { background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: var(--radius); padding: 24px; margin: 0 24px 24px; transition: background 0.35s, border-color 0.35s; }
.vendor-share-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 16px; transition: color 0.35s; }
.vendor-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.vendor-share-hint { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 12px; text-align: center; transition: color 0.35s; }
.vendor-share-btn { background: var(--black); color: var(--white); border: none; padding: 12px 16px; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.vendor-client-section {
margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--gray-150);
}
.vendor-client-section .form-section-label {
margin-bottom: 8px;
}
.vendor-notes textarea {
width: 100%; min-height: 60px; border: 1px solid var(--gray-150);
border-radius: var(--radius); padding: 10px 12px; font-family: inherit;
font-size: 0.88rem; resize: vertical; background: var(--bg-primary);
transition: var(--transition); outline: none;
}
.vendor-notes textarea:focus { outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none; } /* S111+ · ink neutro */
.vendor-notes textarea::placeholder { color: var(--gray-300); font-size: 0.84rem; letter-spacing: 0; font-weight: 400; }
.vendor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.vendor-actions .btn { flex: 1; min-width: 140px; }
.vendor-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; margin: 0 auto; }
.vendor-btn-secondary { background: var(--grey-95); color: var(--text-primary); border: 1px solid var(--gray-200); }
.vendor-btn-secondary:hover { background: var(--gray-200); }
@media (max-width: 480px) { .vendor-action-grid { grid-template-columns: 1fr; } }
.btn-whatsapp { background: #25D366; color: white; }
.btn-whatsapp:hover { background: #1da851; }
.btn-email { background: var(--action); color: #fff; }
.btn-email:hover { filter: brightness(1.08); }
.btn-email:hover { background: var(--grey-80); }
/* VEHICLE DETAIL FIELDS */
.vehicle-detail-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-bottom: 18px;
}
@media (max-width: 540px) { .vehicle-detail-grid { grid-template-columns: 1fr; } }
.vehicle-detail-grid .field { margin-bottom: 0; }
.vehicle-detail-grid .field label {
font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2px;
text-transform: none; color: var(--text-tertiary); margin-bottom: 4px; display: block;
}
.vehicle-detail-grid .field select,
.vehicle-detail-grid .field input {
width: 100%; padding: 10px 12px; border: 1px solid var(--gray-150);
border-radius: var(--radius); font-family: inherit; font-size: 0.88rem;
background: var(--bg-primary); color: var(--text-primary);
transition: var(--transition); outline: none; appearance: none;
-webkit-appearance: none;
}
.vehicle-detail-grid .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.vehicle-detail-grid .field select:focus,
.vehicle-detail-grid .field input:focus { outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none; } /* S111+ · ink neutro */
.vehicle-detail-grid .field select.invalid,
.vehicle-detail-grid .field input.invalid { border-color: var(--warning-solid) !important; background: var(--amber-light); }
.vehicle-detail-grid .field select.valid,
.vehicle-detail-grid .field input.valid { border-color: var(--green) !important; }
.vehicle-detail-grid .field .field-error { font-size: 0.75rem; }
.veu-info-bar {
display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px;
background: var(--gray-50); border: 1px solid var(--border-default); border-radius: var(--radius-md);
font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5;
max-width: 680px; margin: 0 auto 16px; transition: opacity .35s, color .35s;
}
.veu-info-bar .veu-info-icon {
font-size: 1rem; color: var(--text-tertiary); flex-shrink: 0; line-height: 1.3;
}
.plans-disclaimer {
color: var(--gray-500);
text-align: center; font-size: 0.75rem;
margin-top: 10px; margin-bottom: 0; line-height: 1.5; max-width: 680px; margin-left: auto; margin-right: auto;
transition: color .35s;
}
.modo-vendedor .plans-disclaimer { display: none; }
.summary-item.vendor-only { display: none; }
.modo-vendedor .summary-item.vendor-only { display: block; }
.plans-disclaimer strong { color: var(--gray-600); }
/* CAT SECTION */
.cat-section {
display: none; grid-template-columns: auto 1fr; gap: 0;
margin: 28px 0 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
overflow: hidden; background: var(--bg-primary);
}
.cat-section.visible { display: grid; }
.cat-left {
padding: 28px 32px; text-align: center; display: flex; flex-direction: column;
align-items: center; justify-content: center;
border-right: 1px solid var(--border-default); min-width: 180px;
}
.cat-title { font-size: 0.88rem; font-weight: 900; letter-spacing: 1px; color: var(--text-primary); line-height: 1.1; }
.cat-subtitle { font-size: 0.6875rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-tertiary); margin-top: 2px; }
.cat-value { font-size: 2.6rem; font-weight: 700; font-family: var(--font-data); letter-spacing: -0.05em; color: var(--shark); margin-top: 6px; line-height: 1; }
.cat-iva { font-size: 0.6875rem; font-weight: 600; color: var(--text-tertiary); margin-top: 2px; }
.cat-desc { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 6px; line-height: 1.4; max-width: 140px; }
.cat-right {
padding: 28px 32px; display: flex; flex-direction: column; justify-content: center;
}
.cat-legal { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); line-height: 1.55; }
.cat-legal-sub { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.55; margin-top: 10px; }
@media (max-width: 640px) {
.cat-section { grid-template-columns: 1fr; }
.cat-left { border-right: none; border-bottom: 1px solid var(--border-default); padding: 20px; }
.cat-right { padding: 20px; }
}
/* AMORTIZATION */
/* VEU — Option A: Stack vertical centrado */
.veu-opcion-compra {
/* v.073: padding bottom aumentado tras quitar la note legal — mantiene respiro visual */
padding: 32px 32px 32px; text-align: center; transition: background .35s;
border: none; border-radius: 0; background: transparent;
}
.veu-opcion-label {
font-size: 0.6875rem; font-weight: 700; letter-spacing: 1.8px;
text-transform: uppercase; color: var(--gray-400); margin-bottom: 10px;
}
.veu-opcion-value {
font-size: 1.3rem; font-weight: 700; color: var(--black);
font-family: var(--font-data); letter-spacing: -0.04em; line-height: 1;
}
.veu-opcion-context {
font-size: 0.6875rem; color: var(--gray-400); margin-top: 8px; font-weight: 500;
}
/* v.073: .veu-opcion-note ya no se renderiza — clase legacy conservada por compatibilidad */
.veu-opcion-note { display: none; }
.amort-section { display: none; max-width: 880px; margin: 0 auto; padding: 0 24px 56px; opacity: 0; scroll-margin-top: 80px; }
.amort-section.visible { display: block; animation: amortFadeIn 0.3s ease forwards; }
@keyframes amortFadeIn { to { opacity: 1; } }
.amort-table td, .amort-table th { transition: color 0.28s ease; }
.amort-table-wrap.swapping .amort-table td,
.amort-table-wrap.swapping .amort-table th { color: transparent !important; }
.amort-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid var(--gray-100); }
.amort-action-btn {
width: 38px; height: 38px; border: 1px solid var(--gray-150); background: var(--white); border-radius: 50%;
display: flex; align-items: center; justify-content: center; cursor: pointer;
color: var(--gray-400); transition: var(--transition);
}
.amort-action-btn:hover { border-color: var(--action); background: var(--action-tint); color: var(--action); }
.modo-vendedor .amort-actions { display: none !important; }
.amort-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; text-transform: none; }
.amort-table-wrap { overflow: hidden; border-radius: 0; overflow-x: auto; }
.amort-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; empty-cells: hide; }
.amort-table thead th {
background: var(--graphite); color: #fff; padding: 12px 16px;
text-align: center; font-weight: 700; font-size: 0.6875rem; letter-spacing: 1.2px; text-transform: uppercase;
}
.amort-table thead th:first-child { border-radius: 8px 0 0 0; }
.amort-table thead th:last-child { border-radius: 0 8px 0 0; }
.amort-table tbody td {
padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--gray-100);
font-variant-numeric: tabular-nums; color: var(--gray-600);
}
.amort-table tbody td:first-child { color: var(--gray-400); font-weight: 700; }
.amort-table tbody tr:hover { background: var(--bg-secondary); }
.amort-table tfoot td {
padding: 12px 16px; text-align: center; font-weight: 700;
background: var(--bg-tertiary); border-top: 2px solid var(--border-strong); color: var(--text-primary);
}
.amort-table tfoot tr td:first-child { border-radius: 0 0 0 8px; }
.amort-table tfoot tr td:last-child { border-radius: 0 0 8px 0; }
.amort-table tbody tr.row-firma td {
color: var(--gray-600);
font-weight: 500;
background: transparent;
border-bottom: 1px solid var(--gray-100);
}
.amort-table tbody tr.row-firma td:last-child {
color: var(--black);
font-weight: 700;
}
.amort-table tbody tr.row-firma td:nth-child(2) {
font-weight: 600;
letter-spacing: 0.3px;
}
@media (max-width: 540px) {
.amort-section { padding: 0 16px 40px; }
.amort-table { font-size: 0.625rem; }
.amort-table thead th,
.amort-table tbody td,
.amort-table tfoot td { white-space: nowrap; }
.amort-table thead th { padding: 8px 5px; font-size: 0.6rem; letter-spacing: 0.3px; }
.amort-table tbody td { padding: 7px 5px; }
.amort-table tfoot td { padding: 9px 5px; }
.amort-header { gap: 10px; }
.amort-title { font-size: 0.75rem; }
}
/* MODAL */
.modal-overlay {
display: none; position: fixed; inset: 0; z-index: 2000;
background: rgba(0,0,0,0.5); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
justify-content: center; align-items: center; padding: 24px;
opacity: 0; transition: opacity 0.32s ease;
}
.modal-overlay.active { display: flex; }
.modal-overlay.tsla-visible { opacity: 1; }
.modal-box {
background: var(--white); width: 100%; max-width: 500px;
max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
padding: 36px 32px; position: relative;
border-radius: var(--radius-lg); box-shadow: 0 24px 80px rgba(0,0,0,0.25);
opacity: 0; transform: translateY(22px) scale(0.96);
transition: opacity 0.42s var(--ease-default),
transform 0.42s var(--ease-default);
}
.modal-overlay.tsla-visible .modal-box { opacity: 1; transform: translateY(0) scale(1); }
.modal-close {
position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
background: var(--gray-50); border: none; border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; color: var(--gray-500); transition: var(--transition);
}
.modal-close:hover { background: var(--gray-200); color: var(--black); }
.modal-plan-badge {
display: inline-block; padding: 5px 14px; font-size: 0.6875rem; font-weight: 700;
letter-spacing: 1.8px; text-transform: uppercase; background: var(--grey-95);
color: var(--text-secondary); margin-bottom: 14px; border-radius: 20px;
}
/* FOOTER */
.footer {
background: var(--shark); padding: 32px; text-align: center;
font-size: 0.75rem; color: var(--gray-300); letter-spacing: 0.3px; border-radius: 0; line-height: 1.6;
}
/* TOAST */
.toast-container { position: fixed; top: 72px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
background: var(--gray-900); color: var(--white); padding: 14px 20px;
font-size: 0.75rem; font-weight: 500; font-family: inherit;
box-shadow: 0 8px 32px rgba(0,0,0,0.2); max-width: 340px;
border-radius: var(--radius);
opacity: 0; transform: translateX(20px) scale(0.97);
transition: opacity 0.38s var(--ease-default),
transform 0.38s var(--ease-default);
line-height: 1.4;
}
.toast.show { opacity: 1; transform: translateX(0) scale(1); }
.toast .toast-code { font-weight: 800; letter-spacing: 4px; font-size: 1.1rem; display: block; margin-top: 4px; }
/* ===== PRE-APPROVAL CELEBRATION · Solo stamps =====
Cada card recibe su stamp "Pre-aprobado" con snap-in staggered.
Al terminar, mensaje inline bajo la grid. Pop permitido por ser
momento celebratory (DS v5.5 Rule 3). */
/* Stamp — snap spring, staggered por card en JS. Volt-themed (glass v6) */
.plan-preapro-stamp {
position: absolute; top: 12px; right: 12px;
padding: 4px 10px;
font-family: var(--font-heading);
font-size: 9px; font-weight: 800;
letter-spacing: 0.9px; text-transform: uppercase;
color: #16904E;
background: rgba(31, 174, 95, 0.10);
border: 1px solid rgba(31, 174, 95, 0.30);
border-radius: var(--r-pill);
opacity: 0;
transform: scale(0.7);
pointer-events: none;
z-index: 4;
}
.plan-preapro-stamp.in {
animation: stampSnap 400ms cubic-bezier(0.16, 1.2, 0.3, 1) forwards;
}
@keyframes stampSnap {
0% { opacity: 0; transform: scale(0.85) translateY(-4px); }
60% { opacity: 1; transform: scale(1.04) translateY(0); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.plan-card.exceeded .plan-preapro-stamp { display: none; }
/* "Solicitud enviada" stamp variant (se activa en el card submitted) */
.plan-card.submitted .plan-preapro-stamp {
background: var(--pop-gradient);
border-color: transparent;
font-size: 0;
}
.plan-card.submitted .plan-preapro-stamp::before {
content: 'Solicitud enviada'; font-size: 9px;
}
/* Mensaje inline estático bajo la grid */
.scan-inline-message {
max-width: 1112px; margin: 14px auto 0;
padding: 0 24px;
text-align: center;
opacity: 0; transform: translateY(6px);
transition: opacity var(--motion-extra) var(--ease-out), transform var(--motion-extra) var(--ease-out);
}
.scan-inline-message.visible { opacity: 1; transform: translateY(0); }
.scan-inline-message-inner {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; font-weight: 600;
color: var(--ink-secondary);
}
.scan-inline-message-dot {
display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
background: var(--pop-gradient);
align-items: center; justify-content: center;
color: var(--ink-primary); flex-shrink: 0;
}
.scan-inline-message-dot svg { width: 10px; height: 10px; }
@media (prefers-reduced-motion: reduce) {
.plan-preapro-stamp.in { animation: none; opacity: 1; transform: rotate(-2deg); }
.scan-inline-message { transition: opacity var(--motion-base) linear; transform: none; }
}
/* ===== SUBMIT SUCCESS · A.3 MODAL MORPH =====
El modal no se cierra al enviar: el form-stage se desvanece y
el success-stage morph-entra en el mismo contenedor. La altura
del modal-box se transiciona suave. */
.contact-form-stage {
transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}
.contact-form-stage.fading-out {
opacity: 0; transform: translateY(-8px); pointer-events: none;
}
.contact-form-stage.gone { display: none; } /* se saca del flow al terminar el morph */
.contact-success-stage {
display: none;
padding: 8px 0 4px;
text-align: center;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--motion-slow) var(--ease-out) var(--motion-base),
transform var(--motion-extra) var(--ease-out) var(--motion-base);
}
.contact-success-stage.active { display: block; }
.contact-success-stage.visible { opacity: 1; transform: translateY(0); }
.contact-seal {
position: relative;
width: 72px; height: 72px; border-radius: 50%;
background: var(--pop-gradient);
box-shadow: var(--pop-shadow);
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-primary);
margin: 4px auto 20px;
transform: scale(0.5);
opacity: 0;
transition:
transform 560ms cubic-bezier(0.16, 1.45, 0.3, 1) 380ms,
opacity var(--motion-slow) var(--ease-out) var(--motion-slow);
}
.contact-success-stage.visible .contact-seal {
transform: scale(1); opacity: 1;
}
.contact-seal svg { width: 34px; height: 34px; }
.contact-seal::before,
.contact-seal::after {
content: ''; position: absolute; inset: -3px; border-radius: 50%;
border: 1.5px solid rgba(69,205,181,0.55);
opacity: 0;
animation: contactSealHalo 2.2s ease-out infinite;
animation-play-state: paused;
}
.contact-seal::before {
border-color: rgba(168,224,99,0.50);
animation-delay: 0.7s;
}
.contact-success-stage.visible .contact-seal::before,
.contact-success-stage.visible .contact-seal::after {
opacity: 1;
animation-play-state: running;
transition: opacity var(--motion-base) linear 900ms;
}
@keyframes contactSealHalo {
0% { inset: -3px; opacity: 1; }
100% { inset: -22px; opacity: 0; }
}
.contact-success-title {
font-size: 22px; font-weight: 800; letter-spacing: -0.025em;
color: var(--ink-primary);
margin: 0 0 18px;
line-height: 1.15;
}
.contact-amount-label {
font-size: 11px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--ink-muted);
font-weight: 600; margin-bottom: 4px;
}
.contact-amount {
font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: var(--ink-primary);
line-height: 1;
margin-bottom: 4px;
}
.contact-amount small {
font-size: 13px; font-weight: 500;
color: var(--ink-secondary); letter-spacing: 0;
}
.contact-meta {
font-size: 12.5px; color: var(--ink-secondary);
margin-top: 14px;
}
.contact-meta strong {
color: var(--ink-primary); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.contact-followup {
font-size: 12px; color: var(--ink-tertiary);
margin: 6px 0 22px;
}
.contact-followup strong {
color: var(--ink-primary); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.contact-success-close {
width: 100%; padding: 13px 22px; font-size: 14px;
border-radius: var(--r-md);
}
/* ===== MODAL OTP · Inline status + ring countdown + 6-cell input =====
Sin pill (sobre blanco de la card). Ring SVG mint-lime como anclaje
visual. Border-left divider entre email y timer/resend. Todo en un
solo renglón, incluso cuando el timer se acaba. */
.otp-status {
display: flex; align-items: center; gap: 10px;
margin: 14px 0 0;
padding: 2px 0;
font-size: 12.5px; color: var(--ink-secondary);
opacity: 0; transform: translateY(-4px);
transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
line-height: 1.2;
min-width: 0;
}
.otp-status.visible { opacity: 1; transform: translateY(0); }
.otp-ring {
position: relative; flex-shrink: 0;
width: 22px; height: 22px;
}
.otp-ring svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.otp-ring-track { stroke: var(--border); stroke-width: 2.5; fill: none; }
.otp-ring-progress {
stroke: url(#otpRingMintGrad); stroke-width: 2.5; fill: none;
stroke-linecap: round;
transition: stroke-dashoffset 1s linear, stroke var(--motion-slow) linear;
}
.otp-ring.done .otp-ring-progress { stroke: var(--action); }
.otp-ring-icon {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--action); opacity: 0;
transition: opacity var(--motion-base) var(--ease-out);
}
.otp-ring-icon svg { width: 10px; height: 10px; transform: none; }
.otp-ring.done .otp-ring-icon { opacity: 1; }
.otp-status-text {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.otp-status-text strong {
color: var(--ink-primary); font-weight: 600;
font-variant-numeric: tabular-nums;
}
.otp-status-timer,
.otp-status-resend {
flex-shrink: 0;
padding-left: 10px;
line-height: 1.2;
font-family: inherit;
white-space: nowrap;
}
.otp-status-timer {
font-variant-numeric: tabular-nums;
color: var(--ink-tertiary);
font-size: 11.5px;
}
.otp-status-resend {
display: none;
background: none;
border: none;
padding: 0 0 0 10px;
color: var(--action); font-size: 12px; font-weight: 600; cursor: pointer;
transition: color var(--motion-base) var(--ease-out);
}
.otp-status-resend:hover { color: var(--action-active); text-decoration: underline; }
.otp-status.timer-done .otp-status-timer { display: none; }
.otp-status.timer-done .otp-status-resend { display: inline-block; }
.otp-cells {
display: flex; justify-content: center; gap: 10px;
margin-top: 14px;
}
.otp-cell {
flex: 0 0 52px;
width: 52px; height: 52px; aspect-ratio: 1 / 1;
box-sizing: border-box;
font-family: inherit; font-size: 20px; font-weight: 700;
text-align: center;
color: var(--ink-primary);
background: var(--bg-tertiary);
border: 2px solid transparent;
border-radius: var(--r-md);
outline: none;
padding: 0;
transition: box-shadow var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out);
}
.otp-cell:focus {
background:
linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) padding-box,
var(--pop-gradient) border-box;
box-shadow: 0 0 0 3px rgba(69,205,181,0.18);
}
.otp-cell.filled {
background: var(--bg-tertiary);
}
/* v.076: OTP error state — shake + borde rojo fuerte + bg tint + ring 4px (Opción A) */
.otp-cells.error .otp-cell {
background: #FEE2E2;
border: 2px solid #B01E1E !important;
color: #B01E1E;
box-shadow: 0 0 0 4px rgba(176, 30, 30, 0.18);
transition: background var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base), color var(--motion-base);
}
@keyframes otp-shake-cells {
0% { transform: translateX(0); }
15% { transform: translateX(-8px); }
30% { transform: translateX(8px); }
45% { transform: translateX(-6px); }
60% { transform: translateX(6px); }
75% { transform: translateX(-3px); }
90% { transform: translateX(3px); }
100% { transform: translateX(0); }
}
.otp-cells.is-shaking { animation: otp-shake-cells 420ms cubic-bezier(.36,.07,.19,.97); }
@media (prefers-reduced-motion: reduce) {
.otp-cells.is-shaking { animation: none; }
}
@media (max-width: 480px) {
.otp-cell { width: 44px; height: 44px; font-size: 18px; }
.otp-cells { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.otp-status { transition: opacity var(--motion-base) linear; transform: none; }
.otp-ring-progress { transition: none; }
.otp-ring-icon { transition: none; }
}
/* Modal box morph — la altura se interpola suave entre stages.
Importante: respetamos transitions de opacity/transform del .modal-box
(entrance animation) y el overflow-y:auto (scroll si el contenido es alto).
Solo AÑADIMOS la transición de height y activamos overflow:hidden durante
el morph (via .is-morphing) para evitar spillage durante el interpolado. */
#contactModalBox {
transition:
opacity 0.42s var(--ease-default),
transform 0.42s var(--ease-default),
height 560ms var(--ease-default);
}
#contactModalBox.is-morphing { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.contact-form-stage,
.contact-success-stage,
.contact-seal,
#contactModalBox { transition: opacity var(--motion-base) linear; }
.contact-success-stage.visible .contact-seal { transform: scale(1); }
.contact-seal::after { animation: none; }
}
/* ANIMATIONS */
@keyframes fadeInUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.animate-in { animation: fadeInUp 0.6s ease forwards; }
.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(2px)} }
@keyframes fieldShake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-8px)} 30%{transform:translateX(7px)} 45%{transform:translateX(-6px)} 60%{transform:translateX(5px)} 75%{transform:translateX(-2px)} 90%{transform:translateX(2px)} }
.field-shake { animation: fieldShake 0.5s ease !important; }
.field-shake input,
.field-shake select { border-color: var(--warning-solid) !important; background: var(--amber-light) !important; }
.field-hint {
font-size: 12px;
color: var(--amber);
line-height: 1.4;
max-height: 0;
margin-top: 0;
overflow: hidden;
opacity: 0;
transition: max-height var(--motion-base) var(--ease-out),
opacity var(--motion-base) var(--ease-out),
margin-top var(--motion-base) var(--ease-out);
}
.field-hint.visible {
max-height: 48px;
opacity: 1;
margin-top: 6px;
}
/* Focus-visible accessibility */
.btn-primary:focus-visible,
.plan-link:focus-visible,
.modify-link:focus-visible,
.amort-action-btn:focus-visible,
.btn-send-code:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible,
.enganche-pill:focus-visible,
.buro-card:focus-visible,
.contract-type-switch-option:focus-visible,
.counter-btn:focus-visible,
.nav-btn:focus-visible {
outline: none;
}
/* ═══════════════════════════════════════════════════════
MOBILE OPTIMIZATIONS — iPhone target (≤ 540px)
Min tap target: 44x44px (Apple HIG)
═══════════════════════════════════════════════════════ */
@media (max-width: 540px) {
/* ── Layout & spacing ── */
.step-form { padding: 20px 16px 20px; }
.navbar { padding: 0 16px; }
/* ── Pricing card sections ── */
.pricing-section-contract { padding: 16px; }
.pricing-section-enganche { padding: 16px; }
/* ── Switch: min 44px height, no text wrapping ── */
.contract-type-switch { padding: 3px; }
.contract-type-switch-option {
padding: 12px 10px;
font-size: 0.75rem;
min-height: 44px;
}
/* ── Hero price input ── */
.pricing-hero-input {
font-size: 1.5rem;
width: 100%;
max-width: 180px;
}
/* ── Section labels ── */
.pricing-section-label,
.pricing-enganche-label { font-size: 0.625rem; letter-spacing: 1.4px; }
/* ── Enganche pills: min 44px tap target ── */
.enganche-pills { gap: 6px; grid-template-columns: repeat(5, 1fr); }
.enganche-pill {
padding: 14px 4px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.enganche-pill-pct { font-size: 0.82rem; }
/* ── Enganche exact input: 16px font to prevent iOS auto-zoom ── */
.enganche-exact-input {
min-height: 44px;
padding: 10px 14px;
width: 100%;
font-size: 16px;
}
/* ── Counter buttons: 44px minimum ── */
.counter-btn {
width: 44px !important;
height: 44px !important;
font-size: 1.1rem !important;
}
.counter-value {
font-size: 1.15rem !important;
width: 32px !important;
}
.pricing-fleet-label { font-size: 0.6875rem; margin-top: 4px; }
/* ── Fleet summary ── */
.pricing-summary { padding: 16px; }
.pricing-summary-divider { margin: -16px 0; }
.pricing-summary-item-label { font-size: 0.625rem; }
.pricing-summary-item-value { font-size: 0.95rem; }
/* ── Primary buttons: full width, 48px tall ── */
.btn {
padding: 14px 20px;
font-size: 0.7rem;
min-height: 48px;
width: 100%;
}
.btn-outline {
padding: 14px 20px;
border-radius: var(--radius-button);
min-height: 48px;
width: 100%;
}
/* ── OTP send code button ── */
.btn-send-code {
padding: 12px 16px;
border-radius: var(--radius-button);
min-height: 44px;
font-size: 0.6875rem;
}
.btn-resend {
padding: 12px 0;
min-height: 44px;
}
/* ── Form fields: 44px+ height, 16px font to prevent iOS auto-zoom ── */
.form-section-label { margin-top: 24px; margin-bottom: 8px; }
.field label { font-size: 0.7rem; }
.field input, .field select {
padding: 12px 14px;
font-size: 16px;
min-height: 44px;
}
.field-hint { font-size: 0.625rem; }
textarea { font-size: 16px; }
/* ── Phone prefix: tighter on mobile ── */
.phone-prefix { padding: 0 10px; font-size: 0.82rem; }
.phone-input-wrap input { padding-left: 54px; }
/* ── OTP input: 16px font to prevent iOS auto-zoom ── */
.otp-row input {
padding: 12px 10px;
font-size: 16px;
min-height: 44px;
letter-spacing: 4px;
}
/* ── Buro cards ── */
.buro-card {
padding: 16px;
font-size: 0.75rem;
min-height: 44px;
}
/* ── Results / Plan cards ── */
.results-hero { padding: 24px 16px 20px; }
.plan-card { padding: 22px 16px 18px; }
.plan-card-price { font-size: 24px; }
.plan-cta-primary .btn {
padding: 14px 18px;
min-height: 48px;
width: 100%;
}
.plan-link {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Modal ── */
.modal-overlay { padding: 16px; }
.modal-box {
padding: 24px 18px;
max-width: 100%;
border-radius: var(--radius-lg);
}
.modal-close {
width: 44px;
height: 44px;
top: 10px;
right: 10px;
}
/* ── Amort table ── */
.amort-section { padding: 0 12px 32px; }
.amort-header { padding: 20px 16px 16px !important; }
.amort-title { font-size: 0.75rem; }
/* ── Vendor inline grids: force single column ── */
[style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* ── Vendor action buttons: ensure 48px ── */
.vendor-btn-secondary {
min-height: 48px;
padding: 14px 16px;
font-size: 0.7rem;
}
/* ── Tooltips: constrain to viewport ── */
.tooltip {
left: auto;
right: -10px;
transform: none;
min-width: 180px;
max-width: calc(100vw - 48px);
}
/* ── Footer ── */
.footer { padding: 24px 16px; font-size: 0.6875rem; }
/* ── Toast ── */
.toast-container { right: 12px; left: 12px; top: 60px; }
.toast { max-width: 100%; font-size: 0.7rem; padding: 12px 16px; }
}
/* ═══════════════════════════════════════════════════════
SMALL MOBILE (≤ 380px) — iPhone SE / compact
═══════════════════════════════════════════════════════ */
@media (max-width: 380px) {
/* Switch */
.contract-type-switch-option { font-size: 0.7rem; padding: 12px 6px; }
/* Hero price */
.pricing-hero-input { font-size: 1.3rem; max-width: 140px; }
/* Pills — siempre 5 en una sola fila (incluso en mobile chico) */
.enganche-pills { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.enganche-pill { padding: 12px 2px; }
.enganche-pill-pct { font-size: 0.7rem; }
/* Buttons stay 48px */
.btn { padding: 14px 14px; font-size: 0.6875rem; }
/* Plan cards */
.plan-card { padding: 20px 14px 18px; }
.plan-card .plan-monthly { font-size: 1.5rem; }
/* Modal */
.modal-box { padding: 20px 14px; }
/* Vehicle section tighter */
}
/* ═══════════════════════════════════════════════════════
SPLIT FLOW — 2-pantalla layout (Origin-style)
═══════════════════════════════════════════════════════ */
/* Sub-step switcher */
.split-step { display: none; width: 100%; }
.split-step.active { display: flex; width: 100%; }
/* Full-viewport split container with Origin-style outer margin */
.split-layout {
display: flex;
width: 100%;
min-height: calc(100vh - 56px);
min-height: calc(100dvh - 56px);
overflow: hidden;
margin-top: 0;
padding: 16px 24px 24px;
gap: 16px;
box-sizing: border-box;
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1600px) {
.split-layout { padding: 20px 40px 32px; gap: 20px; }
}
.split-form-pane {
flex: 0 1 720px;
max-width: 720px;
min-width: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
background: #FFFFFF;
box-sizing: border-box;
height: auto;
max-height: calc(100vh - 96px);
max-height: calc(100dvh - 96px);
border: 1px solid var(--border-default, #EEF1F4);
border-radius: 16px;
align-self: center;
box-shadow: 0 1px 2px rgba(15,20,25,0.04), 0 8px 24px rgba(15,20,25,0.06), 0 24px 60px rgba(15,20,25,0.06);
}
.split-form-inner {
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 28px 48px 32px;
box-sizing: border-box;
}
/* Wrapper for title+subtitle+card — groups them together */
.split-form-content {
display: flex;
flex-direction: column;
}
/* Security note below email field */
.field-security-note {
display: flex; align-items: center; gap: 5px;
margin-top: 6px;
font-size: 11px; color: var(--grey-70); font-weight: 400;
line-height: 1.4;
}
.field-security-note svg { flex-shrink: 0; color: var(--grey-70); }
/* Sub-nav bar inside left pane */
.split-subnav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 56px 0;
flex-shrink: 0;
box-sizing: border-box;
width: 100%;
}
/* .split-back-btn eliminado: ya no se usa en HTML (paso 1 nunca lo tuvo,
paso 2 lo movió al bottom como .cta-secondary). El override de overrides
más abajo también se purga abajo. */
.split-step-label {
font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--grey-70);
}
.split-progress-wrap {
padding: 10px 56px 0;
flex-shrink: 0;
box-sizing: border-box;
width: 100%;
}
.split-progress-track {
height: 3px; background: var(--grey-90); border-radius: 2px; overflow: hidden;
}
.split-progress-fill {
height: 100%; border-radius: 2px;
background: linear-gradient(to right, #1FAE5F, #5EE39E);
transition: width var(--motion-slow) var(--ease-default);
}
/* Split titles · margin-bottom ajustado de 6 → 18px tras eliminar subtítulo,
para que el título no quede comprimido contra las tabs/cards. */
.split-title {
font-family: var(--font-display);
font-size: 2rem; font-weight: 400;
letter-spacing: -0.02em; line-height: 1.1;
color: #0F1419; margin: 0 0 18px;
}
.split-subtitle {
font-size: 13px; color: var(--grey-70); font-weight: 400;
line-height: 1.55; margin: 0 0 24px;
}
/* Right pane — image: fixed, matches card height */
.split-image-pane {
flex: 1 1 0;
min-width: 0;
position: sticky;
top: 0;
height: calc(100vh - 96px);
height: calc(100dvh - 96px);
align-self: flex-start;
overflow: hidden;
background: #0F1419;
box-sizing: border-box;
z-index: 1;
border-radius: 16px;
}
.split-image-pane img {
width: 100%; height: 100%; object-fit: cover;
opacity: 0.82;
display: block;
}
.split-image-placeholder {
width: 100%; height: 100%;
background: linear-gradient(160deg, #1a2a1e 0%, #0a1a12 40%, #051009 100%);
display: flex; align-items: flex-end; padding: 40px;
}
.split-image-caption {
font-family: var(--font-display);
font-size: 1.75rem; font-weight: 400; font-style: italic;
color: rgba(255,255,255,0.55); line-height: 1.3;
max-width: 320px;
word-break: keep-all;
overflow-wrap: normal;
position: absolute;
bottom: 40px; left: 40px;
pointer-events: none;
z-index: 2;
}
/* Shader switcher */
.shader-switcher {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
gap: 2px;
z-index: 3;
background: rgba(15,20,25,0.65);
backdrop-filter: blur(12px);
border-radius: 999px;
padding: 4px;
border: 1px solid rgba(255,255,255,0.08);
}
.sw-btn {
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 500;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.45);
background: transparent; border: none;
border-radius: 999px;
padding: 6px 14px;
cursor: pointer;
transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
white-space: nowrap;
}
.sw-btn:hover { color: rgba(255,255,255,0.8); }
.sw-btn.active { background: rgba(255,255,255,0.12); color: #fff; }
/* Make image pane relative for absolute children */
.split-image-pane { position: relative; }
/* CTA row at bottom of form */
.split-cta-row {
margin-top: 16px;
padding-top: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
}
/* Wizard 2-pasos: CTA siempre centrado horizontalmente al pie del content */
.split-cta-row.is-centered { justify-content: center; }
/* ──────────────────────────────────────────────────────────────────────
WIZARD 2-PASOS (Origin-style) — overrides + patterns nuevos
Mapea tokens del spec a los tokens existentes del sistema Exante:
--bg-canvas ≈ #FAFBFC (ya es el body bg)
--bg-surface ≈ #FFFFFF
--bg-subtle ≈ var(--grey-100)
--bg-deeper ≈ var(--grey-90)
--border-subtle ≈ var(--border-default)
--accent (green) ≈ #1FAE5F (igual al btn-accent existente)
────────────────────────────────────────────────────────────────────── */
/* Wizard 2-pasos: layout natural-scroll. Quitamos el scroll interno del
pane (era max-height + overflow:auto) para que la página fluya como en el
spec: navbar → step-header strip → progress bar → contenido → footer.
El step-header y la progress-bar ahora son strips full-width al nivel
del .split-step (siblings del .split-layout).
IMPORTANTE: el shell (html/body/.app) tiene viewport-lock (overflow:hidden
+ max-height:100vh) para evitar scroll de la página. Eso era válido cuando
el pane tenía scroll interno, pero ahora el contenido fluye con la página.
Liberamos el lock para #step1.active igual que ya está hecho para #step4. */
html:has(#step1.active),
body:has(#step1.active) {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* CRÍTICO para que sticky funcione: .app debe tener overflow:visible en
AMBOS ejes. Asimétrico (overflow-x:hidden + overflow-y:visible) el spec
CSS lo convierte a overflow:auto, creando scroll-container interno que
rompe el position:sticky de los strips top-level. */
.app:has(#step1.active) {
max-height: none !important;
min-height: auto !important;
overflow: visible !important;
}
#step1.active ~ * { overflow: visible !important; }
/* Cuando step1 está activo, escondemos completamente la section-nav vacía
(antes usaba transform/opacity pero seguía ocupando ~20px de slot,
creando un gap arriba del step-header strip). */
#step1.active > .section-nav { display: none !important; }
/* Sombra del navbar transferida al step-header strip en step 1: el wrapper
sticky (subnav + progress) proyecta la sombra desde su borde inferior
(que coincide con el progress bar). En step 4 el navbar mantiene su
sombra original sin cambios. */
body:has(#step1.active) .navbar { box-shadow: none !important; }
body:has(#step1.active) .split-step-header {
box-shadow: 0 8px 32px -8px rgba(0,0,0,0.5);
}
/* Footer corporativo SOLO se muestra en paso 3 (resultados / #step4).
En pasos 1+2 queda oculto para que el wizard quepa above-the-fold. */
.site-footer { display: none; }
body:has(#step4.active) .site-footer { display: block; }
/* Forzamos flex-column para que los strips top-level (subnav, progress)
se apilen verticalmente arriba del layout. Usamos flex (no block) porque
las animaciones de transición setean `display: flex !important`. */
.split-step.active,
.split-step.is-entering-forward,
.split-step.is-entering-back,
.split-step.is-exiting-forward,
.split-step.is-exiting-back {
flex-direction: column !important;
}
.split-layout {
min-height: 0 !important;
overflow: visible !important;
padding: 0 !important;
max-width: none !important;
flex: 1 1 auto !important;
}
.split-form-pane {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
max-width: none !important;
width: 100% !important;
flex: 1 1 auto !important;
overflow: visible !important;
max-height: none !important;
height: auto !important;
margin: 0 !important;
}
.split-form-inner { padding: 0 0 48px; }
/* Step header strip · subnav + progress envueltos en .split-step-header
para que sean UN solo bloque sticky bajo el navbar (sin gap transparente
entre ellos por donde el contenido podía scrollear detrás).
Navbar es fixed top:0 height:56px z-index:1000 → sticky a top:56px con
z-index < 1000 + background opaco. */
.split-step-header {
position: sticky;
top: 56px;
z-index: 50;
background: #FAFBFC;
width: 100%;
}
.split-subnav {
padding: 10px 48px; /* 14→10 (TASK_002 Parte 1.3) */
align-items: center;
}
.split-progress-wrap { padding: 0; width: 100%; }
/* .split-back-btn overrides eliminados (clase huérfana, ver arriba) */
.split-step-label {
/* Cambio: del look uppercase tracked al spec Origin (normal case con número en bold).
Color gris (text-tertiary) — mismo gris que usan los eyebrow de los cards
"VEHÍCULO", "PAGO INICIAL", "PRECIO POR VEHÍCULO". */
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text-tertiary);
text-align: center;
}
.split-step-label strong { font-weight: 600; color: var(--text-tertiary); }
.split-progress-wrap {
padding: 0;
width: 100%;
}
.split-progress-track {
height: 4px;
background: #E8EAEE;
border-radius: 0;
}
.split-progress-fill {
background: linear-gradient(to right, #1FAE5F, #5EE39E);
border-radius: 0;
transition: width var(--motion-base) var(--ease-default);
}
@media (max-width: 540px) {
.split-subnav { padding: 12px 16px; }
}
/* Step content — 720px es el ancho canónico de form wizards fintech
(Stripe/Brex/Mercury/Origin). Da 656px de contenido interno tras los
32px de padding lateral, que es exactamente lo que necesitan:
- 2-col grid (Marca|Modelo, Versión|Año): ~310px por columna
- 5 chips de Pago inicial: ~125px cada uno
Más ancho dispersa la mirada y rompe la sensación "curada" del flujo.
Mismo ancho en paso 1 y paso 2 porque ambos usan .step-content. */
.step-content {
max-width: 720px !important;
margin: 0 auto !important;
/* Paddings optimizados para que el step 1 (3 cards + tabs + hero + CTA)
quepa above-the-fold en viewports ≥1024 sin sentirse apretado.
padding-bottom 24→20 tras quitar subtítulos (TASK_002 Parte 1.3). */
padding: 28px 32px 20px;
text-align: center;
width: 100%;
}
.split-subtitle { margin: 0 0 20px; }
.field-section { padding: 16px 20px; margin-bottom: 12px; }
.field-section-eyebrow { margin-bottom: 12px; }
.price-card { padding: 18px 20px; margin-bottom: 12px; }
.contract-tabs-row { margin-bottom: 12px; }
.prospect-vehicle-grid { gap: 10px 14px; margin-bottom: 8px; }
.split-cta-row { margin-top: 12px; }
@media (max-width: 540px) {
.step-content { padding: 24px 16px 24px; }
}
.split-form-content { text-align: center; }
.split-title em {
/* Sin italic en el keyword; conservamos el énfasis sólo vía font-display
+ color para que se vea como acento editorial Playfair regular. */
font-style: normal;
font-family: var(--font-display);
color: var(--text-primary);
}
.split-subtitle {
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 32px;
}
/* Field section card — patrón repetible para agrupar campos por sección */
.field-section {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 20px 24px;
margin-bottom: 16px;
text-align: left;
}
.field-section-eyebrow {
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--text-tertiary);
margin-bottom: 18px;
}
/* Tabs Arrendamiento/Crédito — pill segmented centered above Card 1 */
.contract-tabs-row {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.contract-tabs-row .contract-type-switch {
width: 100%;
max-width: 520px;
margin: 0;
}
/* Price card — 2 columnas con vdivider para Precio + Cantidad */
.price-card {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 24px;
margin-bottom: 16px;
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 24px;
align-items: center;
}
.price-card .pricing-vehicle-col-divider {
height: 44px;
width: 1px;
background: #E5E7EB;
}
/* Homologación visual con .field-section: el price-card tenía eyebrows
más pesados (700/1.8px/grey-70) y valores $0/1 a 32px que dominaban
visualmente sobre las demás secciones (eyebrows 500/0.14em/text-tertiary,
inputs 14px). Bajamos a una escala proporcional pero que conserva la
prominencia numérica de la card 1. */
.price-card .pricing-section-label {
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: var(--tracking-eyebrow) !important;
color: var(--text-tertiary) !important;
margin-bottom: 10px !important;
}
.price-card .pricing-hero-input {
font-size: 1.4rem !important; /* 22px (era 32px) */
letter-spacing: -0.02em !important;
}
.price-card .pricing-hero-input.has-value { width: 160px !important; }
.price-card .pricing-hero-hint {
font-size: 10.5px !important;
margin-top: 4px !important;
}
.price-card .pricing-vehicle-col-count .counter-value {
font-size: 1.4rem !important; /* 22px (era 32px) */
width: 36px !important;
}
.price-card .pricing-vehicle-col-count .counter-btn {
width: 30px !important;
height: 30px !important;
font-size: 0.95rem !important;
}
.price-card .pricing-fleet-label {
font-size: 10.5px !important;
margin-top: 4px !important;
}
/* CTA primario — verde pill centrado al pie del content */
.cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-button);
font: 500 15px/1 'Inter', sans-serif;
cursor: pointer;
border: 0;
color: #FFFFFF;
background: #1FAE5F;
transition: background var(--motion-fast) var(--ease-default), transform var(--motion-fast) var(--ease-default);
}
.cta-primary:hover { background: #1A9852; }
.cta-primary:active { transform: scale(0.98); }
.cta-primary:disabled { background: var(--grey-90); color: var(--grey-70); cursor: not-allowed; }
.cta-primary svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* CTA secundario · outlined neutral. Usado en paso 2 como botón "Regresar"
junto al CTA primario verde. Padding vertical 14px coincide con
.cta-primary para que ambos tengan la misma altura visual lado a lado. */
.cta-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
border-radius: var(--radius-button);
font: 500 14px/1 var(--font-sans);
cursor: pointer;
border: 1px solid var(--color-border-default);
background: var(--color-surface);
color: var(--fg1);
transition: background var(--motion-fast) var(--ease-default),
border-color var(--motion-fast) var(--ease-default);
}
.cta-secondary:hover {
background: var(--color-bg-subtle);
border-color: var(--fg3);
}
.cta-secondary svg {
width: 14px; height: 14px;
stroke: currentColor; stroke-width: 1.7;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* Scoped al paso 2 (splitB):
· subnav: label centrado (ya no hay back btn a la izquierda)
· cta-row: space-between (Regresar izq · CTA primary der) */
#splitB .split-subnav {
justify-content: center;
}
#splitB .split-cta-row {
justify-content: space-between !important;
gap: 16px;
}
/* Mobile: apilar verticalmente con CTA primario arriba (column-reverse
invierte el orden DOM Regresar→Primary, quedando Primary arriba). */
@media (max-width: 480px) {
#splitB .split-cta-row {
flex-direction: column-reverse;
align-items: stretch;
}
#splitB .split-cta-row .cta-secondary,
#splitB .split-cta-row .cta-primary {
width: 100%;
justify-content: center;
}
}
/* Fix doble botón en splitA/splitB: el `.cta-primary { display: inline-flex }`
definido arriba sobreescribía `.vendor-only { display: none }` por source
order, así que en modo cliente se veían los dos botones (client + vendor).
Estas rules tienen specificity (0,2,0) > (0,1,0), garantizando que
client-only/vendor-only ganen sobre cta-primary en el orden correcto. */
.cta-primary.vendor-only { display: none; }
.cta-primary.client-only { display: inline-flex; }
.modo-vendedor .cta-primary.vendor-only { display: inline-flex; }
.modo-vendedor .cta-primary.client-only { display: none; }
/* Navbar dual-button — "Iniciar sesión" text-link blanco sin chrome */
.nav-link-text {
font: 500 13px/1 'Inter', sans-serif;
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
padding: 4px 4px;
transition: opacity var(--motion-fast);
}
.nav-link-text:hover { opacity: 0.75; }
/* ════════════════════════════════════════════════════════════════
S85 · DRAWER · Plan de pagos · 1:1 según handoff "drawer pagos solicitar"
Shell flotante con esquinas redondeadas, KPI tiles, tabla grid 8 cols.
════════════════════════════════════════════════════════════════ */
.amort-drawer {
position: fixed; inset: 0;
z-index: 2000;
pointer-events: none;
}
.amort-drawer[aria-hidden="false"] { pointer-events: auto; }
.amort-drawer-overlay {
position: absolute; inset: 0;
background: rgba(15,20,25,0.32); /* handoff §3 backdrop */
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
opacity: 0;
transition: opacity var(--motion-slow) var(--ease-default);
}
.amort-drawer[aria-hidden="false"] .amort-drawer-overlay { opacity: 1; }
.amort-drawer-panel {
position: absolute;
/* handoff §3 · margen simétrico de 16px en top/bottom/right · 4 esquinas visibles */
top: 16px; bottom: 16px; right: 16px;
width: min(760px, calc(100vw - 32px));
background: #FFFFFF;
border-radius: 20px;
overflow: hidden;
display: flex; flex-direction: column;
/* sombra 2 capas (handoff §3) */
box-shadow:
-24px 0 64px -12px rgba(15,20,25,0.18),
0 40px 90px -28px rgba(15,20,25,0.30);
transform: translateX(calc(100% + 24px));
transition: transform var(--motion-slow) var(--ease-default);
}
.amort-drawer[aria-hidden="false"] .amort-drawer-panel { transform: translateX(0); }
/* ── HEADER ── padding 28px 30px 0 (handoff §4) ── */
.amort-drawer-head {
padding: 28px 30px 0;
flex-shrink: 0;
background: #FFFFFF;
}
.lz-drawer-headrow {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px;
}
.lz-drawer-titleblock { display: flex; flex-direction: column; min-width: 0; }
.amort-drawer-eyebrow {
font: 600 11px/1 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #8B92A1;
}
.amort-drawer-title {
/* Playfair 400 34px · margin-top 10 (handoff §4.1) */
font: 400 34px/1.05 'Playfair Display', 'Iowan Old Style', Georgia, serif;
letter-spacing: -0.02em;
color: #0F1419;
margin-top: 10px;
}
.amort-drawer-close {
/* X fantasma 40x40 (handoff §4.1) */
width: 40px; height: 40px;
background: transparent;
border: 0;
border-radius: 10px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #8B92A1;
flex-shrink: 0;
transition: background var(--motion-fast) var(--ease-default), color var(--motion-fast), border-color var(--motion-fast);
}
.amort-drawer-close:hover {
background: #FAFBFC;
color: #0F1419;
box-shadow: inset 0 0 0 1px #D1D5DB;
}
.amort-drawer-close:active {
background: #E8EBEF;
color: #0F1419;
transform: scale(0.96);
}
/* ── KPI tiles (handoff §4.2) ── */
.lz-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: #E5E7EB; /* gap 1px crea los divisores */
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
margin-top: 24px;
}
.lz-kpi-tile {
background: #FFFFFF;
padding: 16px 18px;
display: flex; flex-direction: column;
min-width: 0;
}
.lz-kpi-label {
font: 500 10px/1 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.11em;
color: #8B92A1;
margin-bottom: 7px;
}
.lz-kpi-value {
font: 600 21px/1 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: #0F1419;
}
.lz-kpi-value.is-green { color: #16904E; } /* Pago mensual en verde */
.lz-kpi-sub {
font: 400 11px/1 'Inter', sans-serif;
color: #8B92A1;
margin-top: 5px;
}
/* ── Fila Sección + icon-buttons (handoff §4.3) ── */
.lz-drawer-sectionrow {
margin: 26px 0 14px;
display: flex; justify-content: space-between; align-items: center;
}
.lz-drawer-sectionlabel {
font: 600 11px/1 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #8B92A1;
}
.lz-drawer-iconrow { display: flex; gap: 8px; }
.lz-drawer-iconbtn {
width: 34px; height: 34px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 10px;
color: #4B5563;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color var(--motion-fast) var(--ease-default),
box-shadow var(--motion-fast) var(--ease-default),
color var(--motion-fast);
}
.lz-drawer-iconbtn:hover {
background: #FFFFFF;
border-color: #D1D5DB;
/* efecto minicard elevado */
box-shadow:
0 1px 2px rgba(15,20,25,0.04),
0 6px 16px -4px rgba(15,20,25,0.12);
color: #0F1419;
}
.lz-drawer-iconbtn:active { transform: scale(0.96); }
.lz-drawer-iconbtn svg { width: 16px; height: 16px; }
/* ── BODY scrolleable (handoff §5) ── */
.amort-drawer-body {
flex: 1;
overflow-y: auto;
padding: 0;
background: #FFFFFF;
}
/* legacy #amortSection escondido (sigue poblándose para downloadPDF) */
.amort-drawer-body > #amortSection { display: none !important; }
/* ── Tabla amortización · grid 8 columnas (handoff §5) ── */
.lz-amort-grid {
border-top: 1px solid #E5E7EB;
}
.lz-amort-row {
display: grid;
grid-template-columns: 40px 1.1fr 1fr 1fr 1fr 1fr 0.8fr 1fr;
column-gap: 12px;
padding: 0 30px;
align-items: center;
}
/* Header sticky · gris sutil (NUNCA negro) */
.lz-amort-head {
position: sticky;
top: 0;
z-index: 1;
background: #F2F4F6;
height: 40px;
border-bottom: 1px solid #E5E7EB;
}
.lz-amort-head .lz-amort-cell {
font: 600 10px/1 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8B92A1;
text-align: center !important; /* S111+ · header y body centrados */
}
/* Filas de datos · 44px · borde inferior */
.lz-amort-body .lz-amort-row {
height: 44px;
border-bottom: 1px solid #E5E7EB;
background: transparent;
transition: background var(--motion-fast) var(--ease-default);
}
.lz-amort-body .lz-amort-row:hover { background: #F2F4F6; }
.lz-amort-cell {
font: 500 12px/1.2 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
color: #4B5563;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lz-amort-cell.is-no { color: #8B92A1; }
.lz-amort-cell.is-pago { font-weight: 600; color: #0F1419; }
/* S111+ · alineación de todas las celdas (header + body) al centro */
.lz-amort-row > .lz-amort-cell { text-align: center; }
/* ── FOOTER · 1 solo botón verde (handoff §7) ── */
.amort-drawer-foot {
padding: 16px 30px 22px;
border-top: 1px solid #E5E7EB;
background: #FFFFFF;
flex-shrink: 0;
}
.amort-drawer-solicitar {
width: 100%;
height: 54px;
display: inline-flex; align-items: center; justify-content: center;
gap: 10px;
background: #1FAE5F;
color: #FFFFFF;
border: 0;
border-radius: 10px;
font: 600 16px/1 'Inter', sans-serif;
letter-spacing: -0.01em;
cursor: pointer;
box-shadow: 0 10px 24px -10px rgba(31,174,95,0.5);
transition: background var(--motion-fast) var(--ease-default), transform var(--motion-fast);
}
.amort-drawer-solicitar:hover { background: #16904E; }
.amort-drawer-solicitar:hover svg { transform: translateX(4px); }
.amort-drawer-solicitar:active { transform: scale(0.99); }
.amort-drawer-solicitar svg {
width: 17px; height: 17px;
transition: transform var(--motion-fast) var(--ease-default);
}
/* Mobile · drawer ocupa todo */
@media (max-width: 767px) {
.amort-drawer-panel {
top: 0; bottom: 0; right: 0; left: 0;
width: 100%;
border-radius: 0;
}
.amort-drawer-head { padding: 20px 18px 0; }
.amort-drawer-foot { padding: 12px 18px 18px; }
.lz-amort-row { padding: 0 18px; }
.amort-drawer-title { font-size: 28px; }
.lz-kpi-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════
S86 · MODAL "Confirma tu cotización" (handoff_confirmar §3-§9)
════════════════════════════════════════════════════════════════ */
/* S91-fix · El overlay deja de hacer fade (antes opacity 0→1 var(--motion-base) hacía
que el backdrop-filter se renderizara progresivamente). Ahora alterna
visibilidad de forma binaria; el blur queda visible al instante.
La elegancia de entrada queda en .lzc-card (scale 0.96→1). */
.lzc-overlay {
position: fixed; inset: 0; z-index: 3000;
display: flex; align-items: center; justify-content: center;
padding: 28px;
pointer-events: none;
visibility: hidden;
}
.lzc-overlay[aria-hidden="false"] {
pointer-events: auto;
visibility: visible;
}
/* S91 · Liquid-glass · efecto de difuminado del fondo (portado del backup
index.html.bak-2026-06-01 .cm-backdrop · 1:1 blur 24px + saturate 180%
con gradient cinematográfico sutil encima). El backdrop NO transiciona
para que el blur aparezca instantáneo al abrir el modal. */
.lzc-backdrop {
position: absolute; inset: 0;
background: rgba(15,20,25,0.42);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
}
.lzc-backdrop::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at center top, rgba(15,20,25,0.18) 0%, rgba(15,20,25,0.02) 70%);
pointer-events: none;
}
.lzc-card {
position: relative;
/* S109-UI · ancho desktop 500px (era 560) · max-width preserva mobile */
width: 500px; max-width: 100%;
max-height: calc(100vh - 56px);
overflow-y: auto;
background: #FFFFFF;
border-radius: 22px;
box-shadow: 0 24px 64px -12px rgba(15,20,25,0.18);
padding: 30px 32px 28px;
transform: scale(0.96);
transition: transform var(--motion-base) var(--ease-default);
}
.lzc-overlay[aria-hidden="false"] .lzc-card { transform: scale(1); }
.lzc-close {
position: absolute;
top: 22px; right: 22px;
width: 40px; height: 40px;
border-radius: 50%;
border: 0;
background: transparent;
color: #4B5563; /* --fg2 */
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background var(--motion-fast) var(--ease-default), color var(--motion-fast) var(--ease-default);
}
.lzc-close:hover { background: #E5E7EB; color: #0F1419; }
.lzc-close svg { width: 18px; height: 18px; }
/* S100 · Sin subtítulo · margin más amplio para que respire (handoff: aire editorial) */
.lzc-head { margin-bottom: 32px; padding-right: 50px; }
.lzc-title {
font: 400 32px/1.1 'Playfair Display', 'Iowan Old Style', Georgia, serif;
letter-spacing: -0.02em;
color: #0F1419;
margin: 0 0 6px;
}
.lzc-sub {
font: 400 14px/1.45 'Inter', sans-serif;
color: #8B92A1;
margin: 0;
}
/* Step row · [rail | body] */
.lzc-step {
display: flex;
gap: 18px;
align-items: stretch;
}
.lzc-rail {
display: flex; flex-direction: column; align-items: center;
flex-shrink: 0;
}
.lzc-badge {
width: 28px; height: 28px;
border-radius: 50%;
background: #0F1419;
color: #FFFFFF;
font: 600 13px 'Inter', sans-serif;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.lzc-badge.lzc-up {
background: transparent;
color: #8B92A1;
border: 1.5px solid #D1D5DB;
}
.lzc-badge.lzc-done {
background: #1FAE5F;
color: #FFFFFF;
}
.lzc-badge.lzc-done .lzc-bnum { display: none; }
.lzc-badge.lzc-done::after {
content: '';
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.lzc-conn {
width: 3px; flex: 1; min-height: 22px;
border-radius: 999px;
background: #D1D5DB;
position: relative;
margin-top: 6px; margin-bottom: 6px;
overflow: hidden;
}
.lzc-conn-fill {
position: absolute; top: 0; left: 0;
width: 100%;
height: 0;
background: #0F1419;
border-radius: 999px;
transition: height var(--motion-slow) var(--ease-default);
}
.lzc-body { flex: 1; min-width: 0; padding-bottom: 14px; }
.lzc-row {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
min-height: 28px;
}
.lzc-h {
font: 500 16px/1.3 'Inter', sans-serif;
color: #0F1419;
margin: 0;
flex: 1; min-width: 0;
}
.lzc-step[data-locked="1"] .lzc-h { color: #8B92A1; }
/* S97 · Header del paso clickable cuando es alcanzable y no es el activo
(permite regresar libremente a pasos completados). */
.lzc-step[data-locked="0"] .lzc-row { cursor: pointer; }
.lzc-step[data-active="1"] .lzc-row { cursor: default; }
.lzc-step[data-locked="0"]:not([data-active="1"]) .lzc-row:hover .lzc-h { color: #16904E; }
.lzc-summary {
font: 400 13px/1.4 'Inter', sans-serif;
color: #8B92A1;
flex: 1; min-width: 0;
text-align: right;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lzc-edit {
background: transparent; border: 0; padding: 0;
font: 500 13px 'Inter', sans-serif;
color: #4B5563; cursor: pointer;
transition: color var(--motion-fast);
}
.lzc-edit:hover { color: #16904E; }
.lzc-lock {
font: 400 13px 'Inter', sans-serif;
color: #8B92A1;
display: inline-flex; align-items: center; gap: 6px;
}
.lzc-lock svg { width: 13px; height: 13px; }
.lzc-content { margin-top: 14px; }
/* Inputs · email */
.lzc-input {
display: flex; align-items: center;
height: 48px;
padding: 0 14px;
border: 1px solid #D1D5DB; /* --color-border-default */
border-radius: 10px;
gap: 10px;
background: #FFFFFF; /* --color-surface */
transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default);
}
/* S111 · Focus ring neutro (ink) homologado con inputs OTP */
.lzc-input:focus-within { /* --color-action-ink */
outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none;
}
.lzc-input-icon { width: 18px; height: 18px; color: #8B92A1; flex-shrink: 0; }
.lzc-input input {
flex: 1; min-width: 0;
border: 0; outline: none;
background: transparent;
font: 400 15px 'Inter', sans-serif;
color: #0F1419;
}
.lzc-input input::placeholder { color: #8B92A1; }
.lzc-help { font: 400 13px 'Inter', sans-serif; color: #8B92A1; margin: 12px 0 10px; }
/* ════════════════════════════════════════════════════════════════
S93 · EMAIL FIELD · Estados visuales con DS Exante v0.5.2
Tokens canónicos:
--color-border-default #D1D5DB · --color-accent-green #1FAE5F
--color-error #B83227 / -deep #8C2018 / -tint #F4DCD7
--color-accent-green-deep #16904E · -bg #E6F7EE · -tint-8 rgba(31,174,95,.08)
════════════════════════════════════════════════════════════════ */
.lzc-email-wrap { position: relative; }
/* ── S95 · Estados del campo (handoff design_handoff_avisos_inline v1.1)
Filosofía: peso visual mínimo. INFO y WARNING NO tiñen borde del campo.
Sólo ERROR lo tiñe suavemente (color-mix 45%). Ícono status a la derecha
en el color de la variante (18px). ── */
.lzc-email-status {
width: 18px; height: 18px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity var(--motion-fast) var(--ease-default);
}
.lzc-email-status svg { width: 18px; height: 18px; }
.lzc-input.is-info .lzc-email-status,
.lzc-input.is-warning .lzc-email-status,
.lzc-input.is-error .lzc-email-status,
.lzc-input.is-valid .lzc-email-status { opacity: 1; }
.lzc-input.is-info .lzc-email-status { color: #3A6FB5; } /* info base */
.lzc-input.is-warning .lzc-email-status { color: #E89B2A; } /* warning base */
.lzc-input.is-error .lzc-email-status { color: #B83227; } /* error base */
.lzc-input.is-valid .lzc-email-status { color: #1FAE5F; } /* accent green */
/* Borde del campo: info/warning NO tiñen · sólo error con mezcla 45% */
.lzc-input.is-valid { border-color: #1FAE5F; }
.lzc-input.is-error {
border-color: #C98981; /* fallback 45% mix de #B83227 sobre #D1D5DB */
border-color: color-mix(in srgb, #B83227 45%, #D1D5DB);
}
/* S113 · handoff_form_fields · Campo SEMÁNTICO en focus: SIN outline.
El border de color YA es el indicador. Añadir outline encima (aunque sea de
otro tono del mismo color) produce "delineado sobre delineado" — los dos
trazos de 1px se ven apilados como una línea gruesa. Decisión: foco neutral
= outline ink; foco semántico = idéntico a reposo. */
.lzc-input.is-error:focus-within,
.lzc-input.is-valid:focus-within,
.lzc-input.is-warning:focus-within,
.lzc-input.is-info:focus-within {
outline: none;
box-shadow: none;
}
/* S112 · Wrappers: el INPUT interno NO pinta su propio outline. El wrapper
es quien dibuja el outline (1px ink o semántico). Sin esto, el input pinta
un outline ink que se SUPERPONE al outline semántico del wrapper y los
campos en estado válido (verde) o error (rojo) se ven con halo negro. */
.lzc-phone input:focus,
.lzc-income input:focus,
.lzc-input input:focus,
.lzc-otp input:focus,
.otpv3-phone-group input:focus,
.phone-input-wrap input:focus,
.lz-prefix-input input:focus { outline: none; }
@keyframes lzcEmailShake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-3px); }
40%, 60% { transform: translateX(3px); }
}
.lzc-input.is-shake { animation: lzcEmailShake 380ms cubic-bezier(.36,.07,.19,.97); }
/* ── S95 · Aviso de una sola línea (.notice del handoff)
Sin borde, sin sombra. Tinte 8/9/7%. Cuerpo fg2 (#4B5563), strong fg1
(#0F1419) weight 600. Ícono+enlace en color *-deep.
S95-fix · Efecto "emergencia" desde el input: el aviso aparece como si
se deslizara desde detrás del campo (translateY -8 + max-height 0 +
opacity 0 → 0/auto/1), var(--motion-base) var(--ease-default). ── */
.lzc-email-msg {
display: flex;
align-items: center;
gap: 10px;
margin-top: 0;
padding: 0 12px;
border: 0;
border-radius: 6px;
font: 400 13.5px/1.5 'Inter', sans-serif;
color: #4B5563; /* fg2 */
/* Estado base · oculto detrás del input */
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-8px);
transform-origin: top center;
transition:
max-height var(--motion-base) var(--ease-default),
opacity var(--motion-base) var(--ease-default),
transform var(--motion-base) var(--ease-default),
margin-top var(--motion-base) var(--ease-default),
padding-top var(--motion-base) var(--ease-default),
padding-bottom var(--motion-base) var(--ease-default),
background-color var(--motion-base) var(--ease-default),
color var(--motion-base) var(--ease-default);
}
.lzc-email-msg.is-visible {
margin-top: 8px;
padding: 10px 12px;
max-height: 120px;
opacity: 1;
transform: translateY(0);
}
.lzc-email-msg .n-ico {
width: 16px; height: 16px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.lzc-email-msg .n-ico svg { width: 16px; height: 16px; }
.lzc-email-msg .n-body {
flex: 1; min-width: 0;
font: 400 13.5px/1.5 'Inter', sans-serif;
color: #4B5563;
}
.lzc-email-msg .n-body strong { color: #0F1419; font-weight: 600; }
.lzc-email-msg .n-action {
margin-left: 6px;
display: inline;
white-space: nowrap;
background: transparent;
border: 0;
padding: 0 0 1px;
border-bottom: 1px solid currentColor;
font: 500 13.5px 'Inter', sans-serif;
cursor: pointer;
text-decoration: none;
transition: opacity var(--motion-fast) var(--ease-default);
}
.lzc-email-msg .n-action:hover { opacity: 0.72; }
/* Variantes · tintes muy sutiles */
.lzc-email-msg.is-info {
background: rgba(58,111,181,0.08); /* fallback */
background: color-mix(in srgb, #3A6FB5 8%, transparent);
}
.lzc-email-msg.is-info .n-ico,
.lzc-email-msg.is-info .n-action { color: #265489; } /* info-deep */
.lzc-email-msg.is-warning {
background: rgba(232,155,42,0.09);
background: color-mix(in srgb, #E89B2A 9%, transparent);
}
.lzc-email-msg.is-warning .n-ico,
.lzc-email-msg.is-warning .n-action { color: #B07614; } /* warning-deep */
.lzc-email-msg.is-error {
background: rgba(184,50,39,0.07);
background: color-mix(in srgb, #B83227 7%, transparent);
}
.lzc-email-msg.is-error .n-ico,
.lzc-email-msg.is-error .n-action { color: #8C2018; } /* error-deep */
/* Popover sugerencias dominio · portalizado al body, posicionado con JS.
position: fixed evita ser recortado por el overflow del .lzc-card. */
.lzc-email-pop {
position: fixed;
z-index: 4000;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 10px;
box-shadow: 0 8px 20px -4px rgba(15,20,25,0.12);
padding: 5px;
max-height: 248px;
overflow-y: auto;
}
.lzc-email-pop[hidden] { display: none !important; }
.lzc-email-pop-item {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 11px;
font: 400 14px 'Inter', sans-serif;
color: #0F1419;
border-radius: 6px;
cursor: pointer;
transition: background var(--motion-fast);
}
.lzc-email-pop-item:hover,
.lzc-email-pop-item.focused { background: #F2F4F6; }
.lzc-email-pop-item .hl { font-weight: 600; }
.lzc-email-pop-item .lzc-em-local { color: #8B92A1; }
/* OTP */
.lzc-otp {
display: flex; justify-content: space-between;
gap: 8px;
margin-bottom: 18px;
}
.lzc-otp input {
width: 52px; height: 52px;
border: 1.5px solid #D1D5DB;
border-radius: 10px;
background: #FFFFFF;
text-align: center;
font: 600 22px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #0F1419;
outline: none;
transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.lzc-otp input:focus {
outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none;
}
/* S89 · Estado error tras verify_otp negativo (shake + borde rojo) */
.lzc-otp input.lzc-otp-err {
border-color: #DC2626;
background: rgba(220,38,38,0.06);
animation: lzcOtpShake 420ms cubic-bezier(.36,.07,.19,.97);
}
@keyframes lzcOtpShake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-3px); }
40%, 60% { transform: translateX(3px); }
}
/* Resend timer */
.lzc-resend {
display: flex; align-items: center; gap: 12px;
padding: 4px 0;
}
.lzc-timer { flex-shrink: 0; }
.lzc-resend-text {
display: flex; flex-direction: column;
gap: 2px;
font: 400 13px 'Inter', sans-serif;
color: #8B92A1;
}
.lzc-resend-btn {
align-self: flex-start;
background: transparent; border: 0; padding: 0;
font: 500 13px 'Inter', sans-serif;
color: #8B92A1;
cursor: not-allowed;
}
.lzc-resend-btn:not(:disabled) {
color: #16904E;
cursor: pointer;
}
/* Paso 2 · grid 2x2 */
.lzc-grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.lzc-field { display: flex; flex-direction: column; gap: 6px; }
.lzc-label {
font: 500 11px 'Inter', sans-serif;
color: #4B5563;
letter-spacing: 0.02em;
}
.lzc-label em {
font-style: normal;
font-weight: 400;
color: #8B92A1;
}
.lzc-select {
height: 46px;
border: 1px solid #D1D5DB;
border-radius: 10px;
padding: 0 36px 0 14px;
font: 400 14px 'Inter', sans-serif;
color: #0F1419;
outline: none;
background: #FFFFFF url("data:image/svg+xml;utf8,") no-repeat right 12px center / 16px;
transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
-webkit-appearance: none; appearance: none;
}
.lzc-select::-webkit-calendar-picker-indicator { display: none !important; }
.lzc-select:focus {
}
/* ════════════════════════════════════════════════════════════════
S90 · DS COMBOBOX LIGHT (design_handoff_combobox_light v1.0)
Tokens 1:1: borde D1D5DB, foco verde #1FAE5F + ring rgba(31,174,95,.18),
popover blanco con borde E5E7EB, item hover F2F4F6, check verde,
match resaltado weight 600, "Agregar X" verde profundo #16904E.
Usar .ex-combo en cualquier campo type-ahead (datalist sustituido).
════════════════════════════════════════════════════════════════ */
.ex-combo { position: relative; }
.ex-combo-inp {
width: 100%;
height: 46px;
padding: 11px 40px 11px 14px;
font: 400 14px 'Inter', sans-serif;
color: #0F1419;
background: #FFFFFF;
border: 1px solid #D1D5DB;
border-radius: 10px;
outline: none;
transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default);
}
.ex-combo-inp::placeholder { color: #8B92A1; }
.ex-combo-inp:focus,
.ex-combo-inp.open {
box-shadow: 0 0 0 3px rgba(15,20,25,0.08); /* S111+ · ink neutro */
}
.ex-combo-chev {
position: absolute;
right: 13px;
top: 50%;
width: 17px; height: 17px;
transform: translateY(-50%);
color: #8B92A1;
pointer-events: none;
transition: transform var(--motion-base) var(--ease-default), color var(--motion-fast);
}
.ex-combo.is-open .ex-combo-chev {
transform: translateY(-50%) rotate(180deg);
color: #4B5563;
}
.ex-combo-pop {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
z-index: 20;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 10px;
box-shadow: 0 4px 12px -2px rgba(15,20,25,0.06);
padding: 5px;
max-height: 248px;
overflow-y: auto;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity var(--motion-fast) var(--ease-default), transform var(--motion-fast) var(--ease-default);
}
.ex-combo.is-open .ex-combo-pop {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.ex-combo-item {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
padding: 9px 11px;
font: 400 14px 'Inter', sans-serif;
color: #0F1419;
border-radius: 6px;
cursor: pointer;
transition: background var(--motion-fast);
}
.ex-combo-item:hover,
.ex-combo-item.focused { background: #F2F4F6; }
.ex-combo-item.selected { font-weight: 500; }
.ex-combo-item.selected .ex-combo-check { opacity: 1; }
.ex-combo-item .hl { font-weight: 600; color: #0F1419; }
.ex-combo-check {
width: 16px; height: 16px;
color: #1FAE5F;
opacity: 0;
flex-shrink: 0;
}
.ex-combo-empty {
padding: 14px 11px;
font: 400 13px 'Inter', sans-serif;
color: #8B92A1;
text-align: center;
}
.ex-combo-add {
display: flex; align-items: center; gap: 8px;
padding: 9px 11px; margin-top: 2px;
font: 500 13.5px 'Inter', sans-serif;
color: #16904E;
border-top: 1px solid #E5E7EB;
border-radius: 0 0 6px 6px;
cursor: pointer;
transition: background var(--motion-fast);
}
.ex-combo-add:hover { background: rgba(31,174,95,0.08); }
.ex-combo-add svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Paso 3 · teléfono + consentimientos */
.lzc-phone-wrap { position: relative; margin-bottom: 16px; }
.lzc-phone {
display: flex; align-items: center;
height: 48px;
border: 1px solid #D1D5DB;
border-radius: 10px;
overflow: hidden;
background: #FFFFFF;
transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default);
}
.lzc-phone:focus-within { /* ink neutro */
outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none;
}
/* S99 · Estados (sólo válido/inválido · sin warning ni info) */
.lzc-phone.is-valid { border-color: #1FAE5F; }
.lzc-phone.is-error {
border-color: #C98981; /* fallback color-mix(#B83227 45%, #D1D5DB) */
border-color: color-mix(in srgb, #B83227 45%, #D1D5DB);
}
/* S113 · handoff_form_fields · semántico en focus = idéntico a reposo (SIN outline).
Si está en error, el border en focus queda en #B83227 puro (no mezcla). */
.lzc-phone.is-error:focus-within { border-color: #B83227; outline: none; box-shadow: none; }
.lzc-phone.is-valid:focus-within { outline: none; box-shadow: none; }
@keyframes lzcPhoneShake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-3px); }
40%, 60% { transform: translateX(3px); }
}
.lzc-phone.is-shake { animation: lzcPhoneShake 380ms cubic-bezier(.36,.07,.19,.97); }
/* Ícono status a la derecha · 18px · color por estado */
.lzc-phone-status {
width: 18px; height: 18px;
flex-shrink: 0;
margin: 0 14px 0 8px;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity var(--motion-fast) var(--ease-default);
}
.lzc-phone-status svg { width: 18px; height: 18px; }
.lzc-phone.is-valid .lzc-phone-status,
.lzc-phone.is-error .lzc-phone-status { opacity: 1; }
.lzc-phone.is-valid .lzc-phone-status { color: #1FAE5F; }
.lzc-phone.is-error .lzc-phone-status { color: #B83227; }
/* Aviso inline (mismo patrón que email · sólo variante error) */
.lzc-phone-msg {
display: flex;
align-items: center;
gap: 10px;
margin-top: 0;
padding: 0 12px;
border: 0;
border-radius: 6px;
font: 400 13.5px/1.5 'Inter', sans-serif;
color: #4B5563;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-8px);
transform-origin: top center;
background: rgba(184,50,39,0.07);
background: color-mix(in srgb, #B83227 7%, transparent);
transition:
max-height var(--motion-base) var(--ease-default),
opacity var(--motion-base) var(--ease-default),
transform var(--motion-base) var(--ease-default),
margin-top var(--motion-base) var(--ease-default),
padding-top var(--motion-base) var(--ease-default),
padding-bottom var(--motion-base) var(--ease-default);
}
.lzc-phone-msg.is-visible {
margin-top: 8px;
padding: 10px 12px;
max-height: 120px;
opacity: 1;
transform: translateY(0);
}
.lzc-phone-msg .n-ico { width: 16px; height: 16px; flex-shrink: 0; color: #8C2018; display: inline-flex; align-items: center; justify-content: center; }
.lzc-phone-msg .n-ico svg { width: 16px; height: 16px; }
.lzc-phone-msg .n-body { flex: 1; min-width: 0; color: #4B5563; }
.lzc-phone-msg .n-body strong { color: #0F1419; font-weight: 600; }
.lzc-phone-pre {
font: 500 14px 'Inter', sans-serif;
color: #4B5563;
padding: 0 12px;
border-right: 1px solid #E5E7EB;
height: 100%;
display: flex; align-items: center;
}
.lzc-phone input {
flex: 1; min-width: 0;
border: 0; outline: none;
padding: 0 14px;
font: 400 14px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #0F1419;
background: transparent;
}
.lzc-phone input::placeholder { color: #8B92A1; }
/* ────────────────────────────────────────────────────────────────────────
S108 · Campo "Ingreso comprobable mensual"
Patrón visual derivado de .lzc-phone (prefix + input + sufijo + status).
Estados: default-neutro / focus / valid (✓ accent-green) / error (rojo).
El recovery "Ajustar cotización →" sólo aparece bajo el bloque cuando
hay error.
──────────────────────────────────────────────────────────────────────── */
.lzc-income-wrap { position: relative; margin: 16px 0 0; }
.lzc-income-label {
display: block;
font: 500 13px/1 'Inter', sans-serif;
color: #4B5563;
margin-bottom: 6px;
}
.lzc-income {
display: flex; align-items: stretch;
height: 48px;
border: 1px solid #D1D5DB;
border-radius: 10px;
overflow: hidden;
background: #FFFFFF;
transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default);
}
.lzc-income:focus-within {
outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none;
}
.lzc-income.is-valid { border-color: #1FAE5F; }
.lzc-income.is-error {
border-color: color-mix(in srgb, #B83227 45%, #D1D5DB);
}
/* S113 · handoff_form_fields · semántico en focus = idéntico a reposo (SIN outline) */
.lzc-income.is-error:focus-within { border-color: #B83227; outline: none; box-shadow: none; }
.lzc-income.is-valid:focus-within { outline: none; box-shadow: none; }
.lzc-income-pre,
.lzc-income-suf {
flex-shrink: 0;
font: 500 14px 'Inter', sans-serif;
color: #8B92A1;
background: #F2F4F6;
padding: 0 14px;
display: flex; align-items: center; justify-content: center;
transition: background var(--motion-fast), color var(--motion-fast);
}
/* S119.3 · Homologar zona $ del prefix a la del pago inicial (.lz-mxn-prefix):
width 44px fijo + padding 0 para que ambos componentes tengan idéntico cuadro gris. */
.lzc-income-pre { width: 44px; padding: 0; }
.lzc-income.is-error .lzc-income-pre,
.lzc-income.is-error .lzc-income-suf {
color: #B83227;
background: color-mix(in srgb, #B83227 12%, transparent);
}
.lzc-income input {
flex: 1; min-width: 0;
border: 0; outline: none;
padding: 0 14px;
font: 400 14px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #0F1419;
background: transparent;
}
.lzc-income input::placeholder { color: #8B92A1; }
.lzc-income-check {
width: 22px; height: 22px;
flex-shrink: 0;
margin: 0 10px 0 4px;
display: inline-flex; align-items: center; justify-content: center;
align-self: center;
color: #1FAE5F;
opacity: 0;
transition: opacity var(--motion-fast) var(--ease-default);
}
.lzc-income-check svg { width: 20px; height: 20px; }
.lzc-income.is-valid .lzc-income-check { opacity: 1; }
/* Helper text default + error message · misma animación que phone-msg */
.lzc-income-msg {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 8px;
font: 400 13px/1.5 'Inter', sans-serif;
color: #6B7280;
}
.lzc-income-msg.is-error {
color: #8C2018;
}
.lzc-income-msg .lzc-income-msg-ico {
width: 16px; height: 16px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
margin-top: 2px;
color: #8C2018;
opacity: 0;
}
.lzc-income-msg.is-error .lzc-income-msg-ico { opacity: 1; }
.lzc-income-msg .lzc-income-msg-ico svg { width: 16px; height: 16px; }
.lzc-income-msg .lzc-income-msg-body { flex: 1; min-width: 0; }
/* Recovery secundario · sólo visible cuando hay error */
.lzc-income-adjust {
display: none;
align-items: center; gap: 6px;
margin-top: 10px;
background: transparent;
border: 0;
padding: 0;
font: 600 13.5px/1 'Inter', sans-serif;
color: #0F1419;
cursor: pointer;
transition: opacity var(--motion-fast);
}
.lzc-income-adjust:hover { opacity: 0.7; }
.lzc-income-adjust svg { width: 16px; height: 16px; }
.lzc-income-wrap.is-error .lzc-income-adjust { display: inline-flex; }
/* S110 · aire amplio entre el CTA recovery y el primer checkbox cuando hay error · mobile+desktop */
.lzc-income-wrap.is-error + .lzc-consent { margin-top: 22px; }
.lzc-consent {
display: flex; align-items: flex-start; gap: 10px;
padding: 8px 0;
cursor: pointer;
}
.lzc-consent input { position: absolute; opacity: 0; pointer-events: none; }
.lzc-check {
width: 20px; height: 20px;
border: 1.5px solid #D1D5DB;
border-radius: 6px;
background: #FFFFFF;
flex-shrink: 0;
position: relative;
transition: background var(--motion-fast), border-color var(--motion-fast);
}
.lzc-consent input:checked + .lzc-check {
background: #0F1419;
border-color: #0F1419;
}
.lzc-consent input:checked + .lzc-check::after {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml;utf8,") no-repeat center / 13px;
}
.lzc-consent-text {
font: 400 13.5px/1.45 'Inter', sans-serif;
color: #4B5563;
}
.lzc-consent-text a {
color: #0F1419;
text-decoration: underline;
}
/* Footer */
.lzc-foot { margin-top: 26px; }
.lzc-ssl {
font: 400 12px 'Inter', sans-serif;
color: #8B92A1;
margin: 0 0 16px;
display: flex; align-items: center; gap: 6px;
}
.lzc-ssl svg { width: 13px; height: 13px; }
/* S94 · Botón Guardar · estado disabled siguiendo patrón canónico DS
(.btn-primary[disabled] en references/06-COMPONENTS.md):
bg --color-bg-subtle (#F2F4F6) · text --fg4 (#B8BDC7)
border --color-border-subtle (#E5E7EB) · cursor not-allowed. */
.lzc-save {
width: 100%;
height: 54px;
border: 1px solid #E5E7EB;
border-radius: 10px;
background: #F2F4F6;
color: #B8BDC7;
font: 600 16px 'Inter', sans-serif;
cursor: not-allowed;
display: inline-flex; align-items: center; justify-content: center;
gap: 10px;
transition: background var(--motion-fast) var(--ease-default), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast), border-color var(--motion-fast);
}
.lzc-save:not(:disabled) {
background: #1FAE5F;
color: #FFFFFF;
border-color: #1FAE5F;
cursor: pointer;
box-shadow: 0 10px 24px -10px rgba(31,174,95,0.5);
}
.lzc-save:not(:disabled):hover { background: #16904E; border-color: #16904E; }
.lzc-save:not(:disabled):hover svg { transform: translateX(4px); }
.lzc-save svg { width: 18px; height: 18px; transition: transform var(--motion-fast); }
.lzc-save.is-saved { background: #16904E; color: #FFFFFF; border-color: #16904E; }
/* S150 · Botón "Enviar código" (Sección 1) · INK (el verde se reserva al CTA final) */
.lzc-sendcode {
width: 100%; height: 50px; margin-top: 18px;
border: 1px solid #E5E7EB; border-radius: 10px;
background: #F2F4F6; color: #B8BDC7;
font: 600 15px 'Inter', sans-serif; cursor: not-allowed;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
transition: background var(--motion-fast) var(--ease-default), color var(--motion-fast), transform var(--motion-fast), border-color var(--motion-fast);
}
.lzc-sendcode:not(:disabled) { background: #0F1419; color: #FFFFFF; border-color: #0F1419; cursor: pointer; }
.lzc-sendcode:not(:disabled):hover { background: #1F262E; border-color: #1F262E; }
.lzc-sendcode:not(:disabled):hover svg { transform: translateX(4px); }
.lzc-sendcode svg { width: 18px; height: 18px; transition: transform var(--motion-fast); }
.lzc-phone-wrap { margin-top: 12px; }
/* ════════════════════════════════════════════════════════════════
S103 · Stage congrats (handoff_congrats · VarSeal)
- Sello check 76px verde con animación pop + draw
- Título Playfair 30px (única excepción válida del modal · marca)
- Folio plain con copy
- Tabla resumen plain con divisores
- Timeline 3 pasos con nodos tint neutro + conector vertical
- CTA verde "Crear mi cuenta" → magic link
- Confeti canvas fiesta fuerte desde el sello (JS controla)
════════════════════════════════════════════════════════════════ */
.cg-stage {
padding: 40px 40px 36px;
text-align: center;
animation: cgIn var(--motion-slow) var(--ease-spring) both;
}
.cg-stage[hidden] { display: none !important; }
@keyframes cgIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
/* Encabezado · sello + título + folio */
.cg-head { padding: 0 0 32px; text-align: center; }
.cg-seal-wrap { display: flex; justify-content: center; margin-bottom: 22px; }
.cg-seal {
width: 76px; height: 76px;
border-radius: 50%;
background: #1FAE5F;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 12px 30px -8px rgba(31,174,95,0.55);
animation: cgPop var(--motion-extra) var(--ease-spring) both;
}
.cg-seal svg { width: 38px; height: 38px; }
.cg-tick { stroke-dasharray: 30; stroke-dashoffset: 30; animation: cgDraw var(--motion-extra) var(--ease-default) var(--motion-fast) forwards; }
@keyframes cgPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes cgDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
.cg-tick { stroke-dashoffset: 0; animation: none; }
.cg-seal, .cg-stage { animation: none; }
}
.cg-title {
font: 400 30px/1.1 'Playfair Display', 'Iowan Old Style', Georgia, serif;
color: #0F1419;
letter-spacing: -0.02em;
margin: 0;
}
.cg-folio {
display: inline-flex; align-items: center; gap: 9px;
margin-top: 22px;
}
.cg-folio-num {
font: 600 14px 'Inter', sans-serif;
color: #0F1419;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.cg-copy {
width: 30px; height: 30px;
padding: 0;
border-radius: 50%;
border: 0;
background: transparent;
color: #8B92A1;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--motion-fast) var(--ease-default), color var(--motion-fast);
flex-shrink: 0;
box-sizing: border-box;
}
/* S103-fix · SVG del copy forzado a 14×14 para que no expanda el botón */
.cg-copy svg, .cg-copy .cg-copy-ico { width: 14px; height: 14px; flex-shrink: 0; }
.cg-copy:hover { color: #16904E; background: #F2F4F6; }
.cg-copy.is-done { color: #16904E; }
.cg-copy.is-done .cg-copy-ico { display: none; }
.cg-copy.is-done::after {
content: '';
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Tabla resumen · plain con divisores */
.cg-summary { padding: 0; margin: 0 0 12px; text-align: left; }
.cg-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid #E5E7EB;
}
.cg-row.cg-row-last { border-bottom: 0; }
.cg-row-l { font: 400 13px 'Inter', sans-serif; color: #8B92A1; }
.cg-row-v {
font: 500 14px 'Inter', sans-serif;
color: #0F1419;
font-variant-numeric: tabular-nums;
}
/* Próximos pasos · timeline */
.cg-steps { padding: 28px 0 8px; text-align: left; }
.cg-eye {
font: 600 13px 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #8B92A1;
margin-bottom: 18px;
}
.cg-step { display: flex; gap: 14px; }
.cg-step-rail {
display: flex; flex-direction: column; align-items: center;
flex-shrink: 0;
}
/* S109 · outline default (handoff iconos cotización confirmada · 2026-06-03)
Antes: tint (bg #E8E9EA, icono #4B5563, conn #E5E7EB, stroke 1.7px).
Ahora: aro outline 2px slate claro + icono slate apenas más oscuro + línea = aro. */
.cg-node {
width: 30px; height: 30px;
border-radius: 50%;
background: #FFFFFF; /* --color-surface */
border: 1.5px solid #D1D5DB; /* --color-border-default (aro · grosor 1.5px) */
color: #8B92A1; /* --fg3 (icono apenas más oscuro que el aro) */
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; box-sizing: border-box;
}
.cg-conn {
width: 1.5px; flex: 1; min-height: 18px;
background: #D1D5DB; /* --color-border-default (consistente con grosor del aro) */
border-radius: 999px;
}
.cg-step-body { padding-bottom: 18px; }
.cg-step.cg-step-last .cg-step-body { padding-bottom: 0; }
.cg-step-t { font: 600 14px 'Inter', sans-serif; color: #0F1419; }
.cg-step-d { font: 400 13px/1.5 'Inter', sans-serif; color: #8B92A1; margin-top: 2px; }
/* CTA */
.cg-cta { padding: 20px 0 0; }
.cg-primary {
width: 100%;
height: 52px;
border: 0;
border-radius: 10px;
background: #1FAE5F;
color: #FFFFFF;
font: 600 15px 'Inter', sans-serif;
letter-spacing: -0.01em;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
gap: 9px;
text-decoration: none;
box-shadow: 0 10px 24px -10px rgba(31,174,95,0.5);
transition: background var(--motion-fast) var(--ease-default), transform var(--motion-fast) var(--ease-default);
}
.cg-primary:hover { background: #16904E; }
.cg-primary:hover svg { transform: translateX(4px); }
.cg-primary:active { transform: scale(0.99); }
.cg-primary svg { transition: transform var(--motion-fast) var(--ease-default); }
/* Cuando el stage congrats está visible, ocultar todo lo demás del modal */
.lzc-card.is-congrats > .lzc-close,
.lzc-card.is-congrats > .lzc-head,
.lzc-card.is-congrats > .lzc-step,
.lzc-card.is-congrats > .lzc-foot { display: none !important; }
.lzc-card.is-congrats { padding: 0; }
/* Canvas confeti · capa por encima del modal */
.cg-confetti {
position: fixed; inset: 0;
width: 100vw; height: 100vh;
pointer-events: none;
z-index: 4500;
}
/* Mobile */
@media (max-width: 600px) {
.lzc-card { padding: 24px 22px 22px; }
.lzc-title { font-size: 26px; }
.lzc-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.lzc-otp input { width: 100%; height: auto; aspect-ratio: 1 / 1; min-width: 0; padding: 0; font-size: 17px; }
.lzc-grid2 { grid-template-columns: 1fr; }
/* S111 · congrats mobile · padding del stage homologado al card normal +
ocultar descripciones de pasos para deck compacto. El padding 40/40/36
hacía que el botón "Crear mi cuenta" quedara desalineado (más estrecho
que el ancho útil del card) en viewports angostos. */
.cg-stage { padding: 28px 22px 22px; }
.cg-head { padding-bottom: 24px; }
.cg-step-d { display: none; }
.cg-step-body { padding-bottom: 14px; }
/* S111+ · alinear título inline con el centro del cg-node (30px) en móvil
porque sin descripción el texto quedaba top-aligned vs centro del icono */
.cg-step-t { min-height: 30px; display: flex; align-items: center; }
.cg-step-rail .cg-conn { min-height: 14px; }
}
/* ── v.056 · Transición entre sub-pasos splitA ↔ splitB ──
Misma familia de easing que el resto del sistema (var(--ease-default)
para entrada, (0.4,0,1,1) para salida). Direccional: hacia adelante (A→B)
sale por la izquierda + entra por la derecha; hacia atrás (B→A) viceversa.
Más sutil que las transiciones full-step (vertical-enter-up) — éstas son
sub-pasos dentro de la misma card, no un cambio de pantalla completo. */
@keyframes split-step-out-left {
0% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(-24px); }
}
@keyframes split-step-in-right {
0% { opacity: 0; transform: translateX(24px); }
100% { opacity: 1; transform: translateX(0); }
}
@keyframes split-step-out-right {
0% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(24px); }
}
@keyframes split-step-in-left {
0% { opacity: 0; transform: translateX(-24px); }
100% { opacity: 1; transform: translateX(0); }
}
.split-step.is-exiting-forward {
display: flex !important;
pointer-events: none;
animation: split-step-out-left var(--motion-base) var(--ease-exit) forwards;
}
.split-step.is-entering-forward {
display: flex !important;
animation: split-step-in-right var(--motion-slow) var(--ease-default) forwards;
}
.split-step.is-exiting-back {
display: flex !important;
pointer-events: none;
animation: split-step-out-right var(--motion-base) var(--ease-exit) forwards;
}
.split-step.is-entering-back {
display: flex !important;
animation: split-step-in-left var(--motion-slow) var(--ease-default) forwards;
}
@media (prefers-reduced-motion: reduce) {
.split-step.is-exiting-forward,
.split-step.is-entering-forward,
.split-step.is-exiting-back,
.split-step.is-entering-back { animation-duration: 0.var(--motion-fast) !important; }
}
/* Remove old vertical scroll styles from step1 */
#step1 .vertical-config-scroll { display: none !important; }
#step1 .sticky-cta-wrap { display: none !important; }
/* Split pane: no scroll en el layout completo */
.split-step { display: none; width: 100%; margin-top: 0; }
.split-step.active { display: flex; width: 100%; margin-top: 0; }
/* Left form pane: scroll interno si el contenido excede */
.split-form-pane {
overflow-y: auto;
overflow-x: hidden;
}
/* Prevent body scroll when split is active */
#step1.active ~ * { overflow: hidden; }
@media (max-width: 768px) {
.split-layout { flex-direction: column; padding: 8px 12px 12px; gap: 0; }
.split-image-pane { display: none; }
.split-form-pane { flex: 1; height: auto; min-height: calc(100vh - 80px); border-radius: 12px; }
.split-form-inner { padding: 32px 24px 40px; max-width: 100%; }
.split-subnav { padding: 16px 24px 0; }
.split-progress-wrap { padding: 12px 24px 0; }
.split-title { font-size: 1.75rem; }
}
/* ═══════════════════════════════════════════════════════
VERTICAL FLOW — Section nav, sticky CTA, transitions
═══════════════════════════════════════════════════════ */
.section-nav {
position: sticky; top: 56px; z-index: 900;
background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(0,0,0,0.06);
display: flex; justify-content: center; gap: 6px;
padding: 10px 16px;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.section-nav.hidden { opacity: 0; pointer-events: none; transform: translateY(-100%); }
.section-nav-pill {
padding: 6px 14px; font-size: 0.6875rem; font-weight: 600;
letter-spacing: 0.5px; color: var(--grey-70);
background: transparent; border: 1px solid transparent;
border-radius: 100px; cursor: pointer; transition: var(--transition);
font-family: inherit; white-space: nowrap;
}
.section-nav-pill:hover { color: var(--text-primary); background: var(--grey-100); }
.section-nav-pill.active {
color: var(--action); background: var(--action-tint);
border-color: var(--action-tint-strong);
}
@media (max-width: 540px) {
.section-nav { gap: 4px; padding: 8px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav-pill { padding: 5px 10px; font-size: 0.625rem; flex-shrink: 0; }
}
.vertical-config-scroll {
min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); width: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
padding: 32px 24px 120px;
position: relative;
background:
radial-gradient(circle 380px at 12% 18%, rgba(15, 129, 129, 0.50), transparent 65%),
radial-gradient(circle 340px at 85% 32%, rgba(16, 185, 129, 0.45), transparent 65%),
radial-gradient(circle 420px at 25% 78%, rgba(217, 240, 96, 0.45), transparent 65%),
radial-gradient(circle 320px at 70% 88%, rgba(110, 231, 183, 0.40), transparent 60%),
linear-gradient(180deg, #D4ECDD 0%, #E0EFD6 50%, #ECF4DC 100%);
}
/* ── Page hero (título de página fuera del stack de tarjetas) ── */
.page-hero {
width: 100%; max-width: 600px; margin: 0 auto 28px;
padding: 0; text-align: center;
}
.page-hero-title {
font-size: 2.25rem; font-weight: 700; font-family: var(--font-heading);
letter-spacing: -0.035em; line-height: 1.1;
margin-bottom: 8px;
color: var(--ink-primary); /* Rule 1: monocromático, sin gradient-text */
}
.page-hero-title .serif-accent {
font-style: italic;
font-family: var(--font-display);
color: inherit;
font-weight: inherit;
}
.page-hero-subtitle {
font-size: 0.9375rem; color: var(--text-secondary); font-weight: 400;
line-height: 1.5; margin: 0 auto;
}
/* ── Stack de tarjetas (contenedor con gap, sin fondo propio) ── */
.vertical-config-card {
width: 100%; max-width: 600px;
display: flex; flex-direction: column;
gap: 16px;
}
/* ── Cada sección es su propia tarjeta (Glass Panel · Medium DS spec) ── */
.vertical-section {
padding: 32px 40px;
position: relative;
background: rgba(255, 255, 255, 0.42);
backdrop-filter: blur(28px) saturate(1.6);
-webkit-backdrop-filter: blur(28px) saturate(1.6);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--radius-xl);
box-shadow:
0 12px 40px rgba(10, 13, 18, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
overflow: hidden;
}
.vertical-section::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 35%);
pointer-events: none;
border-radius: inherit;
}
.vertical-section::after {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
}
.vertical-section > * { position: relative; z-index: 1; }
/* ── Section titles (H2 dentro de cada tarjeta) ── */
.vertical-section-title {
font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em;
text-transform: none; color: var(--text-primary); margin-bottom: 6px;
line-height: 1.3;
}
/* ── Hero title/subtitle legacy classes (en caso de uso residual) ── */
.vertical-section-hero-title,
.vertical-section-hero-subtitle { display: none; }
.vertical-section-subtitle {
font-size: 0.8125rem; color: var(--text-secondary); font-weight: 400;
margin-bottom: 24px; line-height: 1.55;
}
/* ── Form section labels inside sections (sub-groups) ── */
.vertical-section .form-section-label {
margin-top: 24px; margin-bottom: 10px;
}
.vertical-section .form-section-label:first-child,
.vertical-section .form-section-label:first-of-type { margin-top: 0; }
/* ── Normalize last-element spacing so section padding-bottom is consistent ── */
.vertical-section > .field:last-child,
.vertical-section > *:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.vertical-config-scroll { padding: 20px 16px 120px; }
.vertical-config-card { max-width: 100%; gap: 12px; }
.vertical-section { padding: 24px 20px; }
.page-hero { max-width: 100%; padding: 0; margin-bottom: 20px; }
.page-hero-title { font-size: 1.75rem; }
.page-hero-subtitle { font-size: 0.875rem; }
}
/* ── Inline CTA (dentro de la tarjeta Contacto) ── */
.inline-cta-section { margin-top: 28px; }
.inline-cta-section .btn { width: 100%; }
/* ── CTA visual states: incomplete → complete ── */
.cta-btn {
transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.cta-btn.cta-incomplete {
opacity: 0.55;
box-shadow: none;
}
.cta-btn.cta-complete {
opacity: 1;
box-shadow: 0 4px 16px rgba(0, 102, 255, 0.3);
}
/* ── Sticky CTA: anchored to bottom edge, grows from the floor ── */
.sticky-cta-wrap {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 950;
display: flex; justify-content: center;
pointer-events: none;
transition: transform 0.35s var(--ease-default), opacity 0.3s ease;
}
.sticky-cta-wrap.hidden { transform: translateY(100%); opacity: 0; }
.sticky-cta-card {
width: 100%; max-width: 600px;
background: var(--bg-primary);
border: 1px solid var(--border-default);
border-bottom: none;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
padding: 16px 24px; padding-bottom: max(16px, env(safe-area-inset-bottom));
pointer-events: auto;
}
.sticky-cta-card .btn { width: 100%; }
@media (max-width: 540px) {
.inline-cta-section { padding: 8px 20px 24px; }
.sticky-cta-card { padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}
@keyframes vertical-exit-up {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-60px); }
}
@keyframes vertical-enter-up {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}
.step-container.vertical-exiting {
display: flex !important; pointer-events: none;
animation: vertical-exit-up 0.4s var(--ease-exit) forwards;
}
.step-container.vertical-entering {
display: flex !important;
animation: vertical-enter-up 0.55s var(--ease-default) forwards;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.var(--motion-fast) !important;
animation-iteration-count: 1 !important;
transition-duration: 0.var(--motion-fast) !important;
scroll-behavior: auto !important;
}
}
/* ═════════════════════════════════════════════════════════════════
v.055 · ConfirmationModal "Magic link enviado"
Spec: prompt-confirmation-modal.txt + confirmation-modal-final.html
Replica 100% exacta del spec del usuario.
═════════════════════════════════════════════════════════════════ */
/* Backdrop — efecto liquid glass / difuminado.
v.072: backdrop-filter blur 24px + saturate 180% para difuminar todo el contenido
detrás del modal cuando aparece la notificación de fin de proceso (folio).
El gradient queda sutil para que el blur del contenido del Step 4 sea protagonista. */
.cm-backdrop {
display: none;
position: fixed; inset: 0;
z-index: 99;
background: rgba(15, 20, 25, 0.42);
align-items: center; justify-content: center;
padding: 24px;
opacity: 0;
transition: opacity var(--motion-base) var(--ease-default);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
}
.cm-backdrop.is-open { display: flex; }
.cm-backdrop.is-visible { opacity: 1; }
.cm-backdrop::before {
content: '';
position: absolute; inset: 0;
/* Sutil gradient cinematográfico encima del blur — top más oscuro para
que el folio + check destaquen, bottom más translúcido. */
background: radial-gradient(ellipse at center top, rgba(15, 20, 25, 0.18) 0%, rgba(15, 20, 25, 0.02) 70%);
pointer-events: none;
}
/* v.070: efecto de cierre — iris-out + scale-down + fade.
Cuando el usuario cierra la ConfirmationModal de fin de flujo (✕ o "Seguir explorando" o ESC),
la card hace un "shrink + fade rápido" mientras el backdrop fade-out, dando una salida elegante. */
@keyframes cm-close-modal {
0% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
60% { opacity: 0.4; transform: scale(0.92) translateY(4px); filter: blur(2px); }
100% { opacity: 0; transform: scale(0.78) translateY(20px); filter: blur(8px); }
}
@keyframes cm-close-backdrop {
0% { opacity: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
100% { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
}
.cm-backdrop.is-closing { animation: cm-close-backdrop 320ms cubic-bezier(.4,0,.6,1) forwards; }
.cm-backdrop.is-closing .cm-modal { animation: cm-close-modal 320ms cubic-bezier(.4,0,.6,1) forwards; }
@media (prefers-reduced-motion: reduce) {
.cm-backdrop.is-closing,
.cm-backdrop.is-closing .cm-modal { animation: none !important; }
}
/* v.057: confetti CSS de "lluvia tenue" eliminado.
Ahora se usa canvas-confetti con boom efusivo desde el checkmark
(ver función _cmConfettiBoom en JS). Mantenemos el div .cm-confetti
en el HTML por compatibilidad pero ya no se renderiza. */
.cm-confetti { display: none !important; }
/* Modal frame — 480px / radius 24 / padding 40-40-32-40 */
.cm-modal {
position: relative;
z-index: 100;
background: #FFFFFF;
border: 0;
border-radius: 24px;
max-width: 480px;
width: 100%;
padding: 40px 40px 32px;
box-shadow: 0 24px 64px -12px rgba(15, 20, 25, 0.32);
opacity: 0;
transform: scale(0.96) translateY(8px);
transition: opacity var(--motion-base) var(--ease-default),
transform var(--motion-base) var(--ease-default);
}
.cm-backdrop.is-visible .cm-modal { opacity: 1; transform: scale(1) translateY(0); }
/* Close X — 36×36 circular top-right */
.cm-close {
position: absolute;
top: 16px; right: 16px;
width: 36px; height: 36px;
background: #F5F6F8;
border: 0;
border-radius: 50%;
color: #5C6B7A;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--motion-fast) var(--ease-default),
color var(--motion-fast) var(--ease-default);
}
.cm-close:hover { background: #EEF1F4; color: #0F1419; }
/* v.057: focus sin ring verde — solo el cambio de hover state es suficiente
indicador. Mantenemos accesibilidad sin el "halo" visual disruptivo. */
.cm-close:focus { outline: none; }
.cm-close:focus-visible {
outline: none;
background: #EEF1F4;
color: #0F1419;
}
.cm-close svg {
width: 16px; height: 16px;
stroke: currentColor; stroke-width: 1.5;
fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
/* Check accent — 48×48 con halos -8/-16 */
.cm-check {
position: relative;
width: 48px; height: 48px;
margin: 0 auto 20px;
border-radius: 50%;
background: #D8EEDF;
display: flex; align-items: center; justify-content: center;
}
.cm-check::before, .cm-check::after {
content: '';
position: absolute; inset: -8px;
border-radius: 50%;
border: 1px solid #1FAE5F;
opacity: 0.20;
}
.cm-check::after {
inset: -16px;
opacity: 0.08;
}
.cm-check svg {
width: 24px; height: 24px;
color: #16904E;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round; stroke-linejoin: round;
fill: none;
}
/* Title — Playfair 30px regular, em italic */
.cm-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 400;
font-size: 30px;
line-height: 1.2;
letter-spacing: -0.01em;
color: #0F1419;
text-align: center;
margin: 0 0 8px;
}
.cm-title em { font-style: italic; color: #1FAE5F; } /* v.082: nombre cliente en verde */
/* Description — Inter 14px párrafo único */
.cm-desc {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.55;
color: #5C6B7A;
text-align: center;
margin: 0 0 28px;
}
/* Summary grid — 2x2, gap 16, bg-canvas, border-subtle, radius 12 */
.cm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 16px;
background: #FAFBFC;
border: 1px solid #EEF1F4;
border-radius: 12px;
margin-bottom: 24px;
}
.cm-grid .cm-item-label {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 10px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #94A2B0;
margin-bottom: 4px;
}
.cm-grid .cm-item-value {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #0F1419;
}
.cm-grid .cm-item-value small {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 12px;
font-weight: 400;
color: #5C6B7A;
}
.cm-grid .cm-item-value.is-folio {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
}
/* Status pill — success-tint bg + success-deep text + dot */
.cm-status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: #D8EEDF;
color: #16904E;
border-radius: 999px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1;
}
.cm-status-pill .dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #1FAE5F;
flex-shrink: 0;
}
/* CTA primary — pill dark full-width */
.cm-cta {
display: inline-flex;
align-items: center; justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 20px;
border-radius: var(--radius-button);
border: 1px solid transparent;
background: #0F1419;
color: #FFFFFF;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background var(--motion-fast) var(--ease-default),
transform var(--motion-fast) var(--ease-default);
}
.cm-cta:hover { background: #3A4654; }
.cm-cta:active { background: #3A4654; transform: scale(0.98); }
.cm-cta:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(15, 20, 25, 0.08); /* ink neutro */
border-color: #1FAE5F;
}
/* CTA secondary — text-only sin shape, color text-primary neutro */
.cm-cta-text {
display: block;
width: 100%;
text-align: center;
background: transparent;
border: 0;
color: #0F1419;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1;
padding: 14px 12px 0;
margin-top: 6px;
cursor: pointer;
transition: color var(--motion-fast) var(--ease-default);
}
.cm-cta-text:hover { color: #5C6B7A; }
.cm-cta-text:active { color: #5C6B7A; }
.cm-cta-text:focus-visible {
outline: none;
border-radius: 8px;
box-shadow: 0 0 0 3px rgba(15, 20, 25, 0.08); /* S111+ · ink neutro */
}
/* ═════════════════════════════════════════════════════════════════
v.058 · B2 v3 plan cards screen — hero oscuro→canvas + main card + thumbs
Spec: prompt-plancards-adapt.md + plancards-b2-refinada-v3.html
MODIFICACIÓN del usuario: el border de la main card y del thumb activo
NO usa verde — usa INK (#0F1419) para distinguir bien de los thumbs
no seleccionados (border subtle).
═════════════════════════════════════════════════════════════════ */
/* HERO oscuro con gradient transition al canvas */
.b2-hero-dark {
/* v.073: hero ahora claro — toda la pantalla usa #FAFBFC consistente */
background: #FAFBFC;
color: #0F1419;
padding: 48px 0 200px;
position: relative;
}
.b2-hero-content {
max-width: 1080px; margin: 0 auto;
padding: 16px 48px 0;
text-align: center;
}
.b2-hero-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 400;
font-size: 36px;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0F1419; /* v.073: white → ink (sobre fondo claro) */
max-width: 720px;
margin: 0 auto 24px;
}
.b2-hero-title em { font-style: italic; color: #1FAE5F; } /* v.078: nombre cliente en verde */
@media (max-width: 640px) {
.b2-hero-title { font-size: 28px; }
.b2-hero-content { padding: 16px 24px 0; }
}
/* CTX-card pill: vehículo + pago inicial */
.b2-ctx-card {
display: inline-flex; gap: 32px;
padding: 12px 22px;
/* v.073: dark surface → light surface con border sutil de paleta */
background: #FFFFFF;
border: 1px solid #EEF1F4;
border-radius: 12px;
align-items: stretch;
box-shadow: 0 4px 12px -2px rgba(15, 20, 25, 0.04);
}
.b2-ctx-card > div {
text-align: center;
display: flex; flex-direction: column; justify-content: center;
}
.b2-ctx-label {
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 500; line-height: 1.4;
text-transform: uppercase; letter-spacing: 0.12em;
color: #94A2B0;
margin-bottom: 2px;
}
.b2-ctx-value {
font-family: 'Inter', sans-serif;
font-size: 16px; font-weight: 600; line-height: 1.2;
font-variant-numeric: tabular-nums;
color: #0F1419; /* v.073: white → ink */
}
.b2-ctx-sep {
width: 1px; align-self: stretch;
background: #EEF1F4; /* v.073: rgba white→ palette border */
}
/* Contract-name eyebrow debajo del ctx-card */
.b2-contract-name {
text-align: center;
padding: 22px 48px 0;
font-family: 'Inter', sans-serif;
font-size: 11px; font-weight: 500; line-height: 1.4;
text-transform: uppercase; letter-spacing: 0.18em;
color: #94A2B0;
}
/* Cards region — main card overlapping al hero */
.b2-cards-region {
position: relative;
z-index: 2;
margin-top: -180px;
padding: 0 48px;
display: flex; justify-content: center;
/* v.080: removido perspective (ya no hay flip 3D) */
}
/* Main b-card — v.060 USER REVERT: borde verde accent (no ink)
+ transición suave de altura cuando cambia entre eligible y ineligible */
.b-card {
background: #FFFFFF;
/* v.073: border neutro sutil + glow OSCURO (no verde tint) */
border: 1px solid #EEF1F4;
border-radius: 24px;
width: 100%; max-width: 760px;
min-height: 380px;
box-shadow:
/* v.108 (2026-05-20): bajado Y=40→28 y blur=80→56 (manteniendo opacidad para
conservar drama). Combinado con z-index:4 + isolation:isolate en
.b2-thumbs-section, el glow ya no tinta las minicards de plazo. */
0 28px 56px -16px rgba(15, 20, 25, 0.42), /* glow oscuro principal */
0 14px 28px -8px rgba(15, 20, 25, 0.18), /* glow oscuro medio */
0 0 0 1px rgba(15, 20, 25, 0.04); /* hairline ink sutil */
display: grid;
grid-template-columns: 1.4fr 1fr;
overflow: hidden;
position: relative;
z-index: 3;
/* v.080: removida backface-visibility — ya no hay flip 3D */
transition: box-shadow var(--motion-slow) var(--ease-default),
border-color var(--motion-slow) var(--ease-default),
min-height var(--motion-slow) var(--ease-default);
}
/* v.080: ELIMINADO el flip 3D entirely. El cambio entre mini-cards ahora se
visualiza con value tween (animateValue) en los montos solamente — el mismo patrón
que usa Step 1 en "Total" y "Pago Inicial". La card grande queda visualmente estática.
Razones: less cognitive load, mejor performance, coherencia con Step 1, elimina toda
una clase de bugs (mirrored, flicker, fade-in stagger, race conditions). */
/* v.060: animación cross-fade + scale al cambiar de plazo. Aplicado por JS */
/* v.070: efecto premium "morph" cuando se cambia de mini-card a big card.
Cuando el usuario clica un thumb diferente, la card grande hace un mini blur+scale+slide
antes de aparecer la nueva, dando feel de teletransporte/morph líquido. */
@keyframes b-card-morph-out {
0% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
60% { opacity: 0; transform: scale(0.965) translateY(-4px); filter: blur(6px); }
100% { opacity: 0; transform: scale(0.96) translateY(-6px); filter: blur(8px); }
}
@keyframes b-card-morph-in {
0% { opacity: 0; transform: scale(0.965) translateY(8px); filter: blur(8px); }
40% { opacity: 1; transform: scale(1.008) translateY(-1px); filter: blur(0.6px); }
100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.b-card.is-morph-out { animation: b-card-morph-out var(--motion-base) var(--ease-default) forwards; pointer-events: none; }
.b-card.is-morph-in { animation: b-card-morph-in var(--motion-slow) var(--ease-default) both; }
@media (prefers-reduced-motion: reduce) {
.b-card.is-morph-out, .b-card.is-morph-in { animation: none !important; }
}
/* También añadimos un sutil glow sweep cuando entra una mini-card activa (selecciona un plazo) */
@keyframes b-thumb-glow-sweep {
0% { box-shadow: 0 0 0 0 rgba(31,174,95,0.55); }
60% { box-shadow: 0 0 0 12px rgba(31,174,95,0); }
100% { box-shadow: 0 0 0 0 rgba(31,174,95,0); }
}
.b-thumb.is-active.is-just-activated { animation: b-thumb-glow-sweep 600ms var(--ease-default) forwards; }
@keyframes b-card-swap-in {
0% { opacity: 0; transform: translateY(8px) scale(0.985); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes b-card-swap-out {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-4px) scale(0.99); }
}
.b-card.is-swapping-out > * { animation: b-card-swap-out var(--motion-fast) var(--ease-exit) forwards; }
.b-card.is-swapping-in > * { animation: b-card-swap-in var(--motion-slow) var(--ease-default) forwards; }
/* Crecimiento sutil cuando se selecciona ineligible (es más alta) — wrapper outer pulse */
@keyframes b-card-grow {
0% { transform: scale(1); box-shadow: 0 32px 64px -16px rgba(15,20,25,0.32), 0 8px 16px -4px rgba(31,174,95,0.10); }
50% { transform: scale(1.012); box-shadow: 0 36px 72px -16px rgba(15,20,25,0.38), 0 12px 24px -4px rgba(31,174,95,0.16); }
100% { transform: scale(1); box-shadow: 0 32px 64px -16px rgba(15,20,25,0.32), 0 8px 16px -4px rgba(31,174,95,0.10); }
}
.b-card.is-growing { animation: b-card-grow var(--motion-extra) var(--ease-default); }
@media (prefers-reduced-motion: reduce) {
.b-card.is-swapping-out > *,
.b-card.is-swapping-in > *,
.b-card.is-growing { animation: none !important; }
}
@media (max-width: 640px) {
.b-card { grid-template-columns: 1fr; }
.b2-cards-region { padding: 0 16px; margin-top: -160px; }
}
/* Plan ineligible variant */
.b-card.is-ineligible {
border: 1.5px solid #A2ADB9;
box-shadow: 0 24px 48px -16px rgba(15, 20, 25, 0.18);
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.b-card.is-ineligible .b-status-strip {
grid-column: 1 / -1;
background: #EEF1F4;
color: #3A4654;
/* v.081: strip más delgado para que transición eligible↔ineligible sea menos disruptiva */
padding: 10px 32px; /* v.081: 18→10 — más slim */
font-family: 'Inter', sans-serif;
font-size: 13px; font-weight: 500; line-height: 1.4; /* v.081: 14→13, 600→500 */
letter-spacing: -0.003em;
display: flex; align-items: center; gap: 8px; /* v.081: 10→8 */
border-bottom: 1px solid #EEF1F4;
}
.b-card.is-ineligible .b-status-strip svg {
width: 14px; height: 14px; /* v.081: 18→14 acorde al texto más slim */
stroke: currentColor; stroke-width: 1.7;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.b-card.is-ineligible .b-grid-bottom {
display: grid;
grid-template-columns: 1.4fr 1fr;
/* v.088: descontar la altura del status-strip (~40px) para que el alto TOTAL
de la card ineligible sea igual al de la eligible (380px = strip + grid-bottom). */
min-height: 340px;
}
@media (max-width: 640px) {
.b-card.is-ineligible .b-grid-bottom {
grid-template-columns: 1fr;
/* v.088 mobile: cuando colapsa a 1 col las dos panels se apilan vertical;
descontamos el strip pero el contenido se extiende naturalmente */
min-height: calc(540px - 40px); /* match con .b-card mobile min-height = 540 */
}
/* v.088 mobile: forzar min-height idéntico para eligible e ineligible */
.b-card { min-height: 540px; }
}
.b-info {
/* v.071: padding más generoso + flex column para distribuir space-between */
padding: 36px 40px;
display: flex;
flex-direction: column;
/* v.077: removida backface-visibility de los children — solo .b-card root la lleva */
}
.b-eyebrow-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 18px; /* v.071: 12→18 más respiro vertical */
}
.b-eyebrow-icon {
width: 14px; height: 14px;
color: #0F1419; flex-shrink: 0;
}
.b-card.is-ineligible .b-eyebrow-icon { color: #94A2B0; }
.b-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px; font-weight: 500; line-height: 1;
text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
color: #94A2B0;
}
.b-eyebrow-divider { flex: 1; height: 1px; background: #EEF1F4; }
.b-name {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 400; font-size: 32px; line-height: 1.15; /* v.071: 28→32 más prominente */
margin: 0 0 18px; /* v.071: 14→18 */
letter-spacing: -0.005em;
color: #0F1419;
}
.b-name em { font-style: italic; }
.b-price-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } /* v.071: gap 8→10, mb 4→8 */
.b-amount {
font-family: 'Inter', sans-serif;
font-weight: 600; font-size: 40px; line-height: 1; /* v.071: 36→40 hierarchy */
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: #0F1419;
}
.b-unit {
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 15px; /* v.071: 13→15 más legible */
color: #5C6B7A;
letter-spacing: -0.005em;
}
.b-rate {
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 13px;
color: #94A2B0;
margin-bottom: 22px; /* v.071: 16→22 */
}
.b-rate strong { font-weight: 600; color: #0F1419; }
.b-features {
list-style: none; margin: 0; padding: 0;
margin-top: auto; /* v.071: empuja features al fondo del flex column */
padding-top: 8px;
display: flex; flex-direction: column; gap: 10px; /* v.071: gap explícito entre items */
}
.b-features li {
display: flex; gap: 12px; padding: 0; /* v.071: gap 10→12, sin padding individual */
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 14px; /* v.071: 13→14 más legible */
color: #5C6B7A;
align-items: flex-start;
line-height: 1.4;
}
.b-features .b-check-icon {
color: #1FAE5F;
width: 16px; height: 16px;
stroke: currentColor; stroke-width: 1.5;
fill: none; stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0;
}
/* Income block (replaces features in ineligible) */
.b-income {
background: #F5F6F8;
border-radius: 10px;
padding: 12px 14px;
margin-top: 4px;
}
.b-income-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 10px; font-weight: 500; line-height: 1;
text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
color: #94A2B0;
margin-bottom: 4px;
}
.b-income-amount {
font-family: 'Inter', sans-serif;
font-weight: 600; font-size: 16px; line-height: 1.2;
font-variant-numeric: tabular-nums;
color: #0F1419;
}
.b-income-amount span {
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 12px;
color: #5C6B7A;
font-variant-numeric: normal;
margin-left: 2px;
}
/* Action panel — buyout TOP + CTAs BOTTOM.
Regla dura DS v0.5.1: prohibido border-left. El divider entre paneles
se renderiza vía pseudo-element absoluto (hairline 1px) que en mobile
colapsa y se sustituye por border-top semántico. */
.b-action-panel {
position: relative;
background: var(--color-bg);
padding: 36px 32px; /* v.071: 28x24 → 36x32 más generoso */
display: flex; flex-direction: column;
justify-content: space-between;
gap: 24px; /* v.071: 16→24 */
}
.b-action-panel::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 1px;
background: var(--color-border-subtle);
}
.b-card.is-ineligible .b-action-panel { background: transparent; }
@media (max-width: 640px) {
.b-action-panel { border-top: 1px solid var(--color-border-subtle); }
.b-action-panel::before { display: none; }
}
.b-buyout-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px; font-weight: 500; line-height: 1;
text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
color: #94A2B0;
margin-bottom: 8px;
}
.b-buyout-amount {
font-family: 'Inter', sans-serif;
font-weight: 600; font-size: 22px; line-height: 1.15;
color: #0F1419;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* v.060: panel derecho mirror del izquierdo — eyebrow row + amount grande
en mismo Y que "36 meses" (paralelismo monto-monto) */
.b-eyebrow-row--mirror {
display: flex; align-items: center; gap: 8px;
margin-bottom: 18px; /* v.071: 12→18 match b-eyebrow-row */
}
.b-eyebrow-row--mirror .b-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px; font-weight: 500; line-height: 1;
text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
color: #94A2B0;
}
.b-eyebrow-row--mirror .b-eyebrow-divider {
flex: 1; height: 1px; background: #EEF1F4;
}
/* Headline grande en panel derecho — Inter 28px tabular para que su baseline
coincida con la "36" del plazo Playfair 28px del panel izquierdo */
.b-buyout-amount-display {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 32px; /* v.071: 28→32 paralelismo con b-name 32px Playfair */
line-height: 1.15;
letter-spacing: -0.015em;
color: #0F1419;
font-variant-numeric: tabular-nums;
margin: 0 0 8px; /* v.071: 14→8 (note va más cerca del amount) */
}
.b-buyout-note {
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 12px; line-height: 1.4; /* v.071: 11→12 */
color: #94A2B0;
margin-top: 0;
}
.b-ctas { display: flex; flex-direction: column; gap: 10px; } /* v.071: 4→10 más respiro */
/* CTAs específicos del b-card */
.b-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 15px 20px; border-radius: var(--radius-button); /* v.071: 13x18 → 15x20 más tap area · v0.6 radius */
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 15px; line-height: 1; /* v.071: 14→15 */
cursor: pointer;
border: 0; color: #FFFFFF;
transition: background var(--motion-fast), transform var(--motion-fast);
width: 100%;
}
.b-cta-accent { background: #1FAE5F; }
.b-cta-accent:hover { background: #1A9852; }
.b-cta-disabled {
background: #F5F6F8;
color: #94A2B0;
cursor: not-allowed;
}
.b-cta-disabled:hover { background: #F5F6F8; }
.b-cta-secondary {
background: transparent; border: 0; cursor: pointer;
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 13px;
color: #0F1419;
padding: 6px 0; width: 100%; text-align: center;
transition: color var(--motion-fast);
}
.b-cta-secondary:hover { color: #5C6B7A; }
.b-cta-icon {
width: 16px; height: 16px;
stroke: currentColor; stroke-width: 1.5;
fill: none; stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0;
}
/* THUMBS row — 5 columnas
v.108 (2026-05-20): elevar thumbs por encima del glow de .b-card.
La .b-card tiene shadow 0 40px 80px -16px rgba(15,20,25,0.42) y z-index:3 con
position:relative, lo que hacía que la sombra "tintara" los thumbs siguientes
en el flujo. Posicionamos la sección/fila con z-index >= 3 e isolation:isolate
para que cada thumb tenga su propio stacking context y muestre fondo blanco
limpio sobre la sombra de la card grande. */
.b2-thumbs-section { padding: 16px 48px 0; position: relative; z-index: 4; isolation: isolate; }
.b2-thumbs-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
max-width: 720px;
margin: 0 auto;
position: relative;
z-index: 4;
}
@media (max-width: 640px) {
/* v.087 mobile: thumbs en scroll horizontal con snap — cada uno con ancho fijo legible */
.b2-thumbs-row {
display: grid !important;
grid-template-columns: repeat(5, minmax(96px, 1fr)) !important;
gap: 6px !important;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
width: 100%;
}
.b2-thumbs-row::-webkit-scrollbar { height: 0; display: none; }
.b2-thumbs-section { padding: 16px 12px 0 !important; }
.b-thumb {
scroll-snap-align: center;
padding: 8px 6px 10px !important;
min-width: 88px;
}
.b-thumb-plazo { font-size: 11px !important; }
.b-thumb-amount { font-size: 13px !important; }
.b-thumb-pill {
font-size: 9px !important;
padding: 2px 6px !important;
letter-spacing: 0.04em !important;
}
.b-thumb-pill svg { width: 9px !important; height: 9px !important; }
}
.b-thumb {
background: #FFFFFF;
border: 1px solid #EEF1F4; /* v.072: subtle palette border (accent surface-cool) */
border-radius: 10px;
padding: 10px 8px 12px;
transition: border-color var(--motion-base) var(--ease-default),
transform var(--motion-base) var(--ease-default),
box-shadow var(--motion-base) var(--ease-default);
cursor: pointer; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 6px;
transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.b-thumb:hover { border-color: #94A2B0; transform: translateY(-1px); }
/* v.060 USER REVERT: thumb activo en VERDE accent (no ink) */
.b-thumb.is-active {
/* v.075: regresa el verde accent en la mini-card seleccionada (revierte v.073) */
border-color: #1FAE5F;
border-width: 1.5px;
background: #FFFFFF;
box-shadow: 0 0 0 1px rgba(31, 174, 95, 0.12),
0 8px 24px -6px rgba(31, 174, 95, 0.22);
}
.b-thumb.is-disabled {
background: #FAFBFC;
border-color: #EEF1F4;
/* v.075: sin cursor not-allowed — el cursor sigue normal (pointer) */
cursor: pointer;
opacity: 0.85;
}
.b-thumb.is-disabled:hover { transform: none; border-color: #EEF1F4; }
.b-thumb.is-disabled .b-thumb-amount,
.b-thumb.is-disabled .b-thumb-plazo { color: #94A2B0; }
/* Pill PRE-APROBADO en thumb (verde) */
.b-thumb-pill {
display: inline-flex; align-items: center; gap: 4px;
background: #D8EEDF;
color: #16904E;
font-family: 'Inter', sans-serif;
font-weight: 600; font-size: 8.5px; line-height: 1;
text-transform: uppercase; letter-spacing: 0.1em;
padding: 3px 6px; border-radius: 999px;
margin-bottom: 2px;
}
.b-thumb-pill svg {
width: 8px; height: 8px;
stroke: currentColor; stroke-width: 3;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.b-thumb-pill.is-ineligible {
background: #EEF1F4;
color: #5C6B7A;
}
.b-thumb-plazo {
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 10px; line-height: 1;
text-transform: uppercase; letter-spacing: 0.1em;
color: #94A2B0;
}
/* v.058 USER MOD: plazo del thumb activo en NEUTRO OSCURO 600 (no verde) */
.b-thumb.is-active .b-thumb-plazo {
color: #0F1419;
font-weight: 600;
}
.b-thumb-amount {
font-family: 'Inter', sans-serif;
font-weight: 600; font-size: 14px; line-height: 1;
font-variant-numeric: tabular-nums;
color: #0F1419;
}
.b-thumb-mes {
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 10px; line-height: 1;
color: #5C6B7A;
margin-left: 2px;
}
/* Foot — Modificar mis datos
v.061: padding-top grande para que el botón viva más cerca del footer
del sitio que de las cards de arriba. El espacio superior crea el
"respiro" entre el área de selección (cards/thumbs) y el CTA secundario. */
.b2-foot {
padding: 80px 48px 12px;
text-align: center;
}
.b2-modify-link {
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 13px;
color: #0F1419;
display: inline-flex; gap: 6px; align-items: center;
padding: 8px 14px; border-radius: var(--radius-button);
border: 1px solid #A2ADB9; background: #FFFFFF;
cursor: pointer;
transition: background var(--motion-fast), border-color var(--motion-fast);
}
.b2-modify-link:hover { background: #F5F6F8; border-color: #94A2B0; }
/* ═════════════════════════════════════════════════════════════════
v.059 · Modal OTP hybrid V3+V4 (852px · plan-side + form-side)
Spec: prompt-modal-otp-adapt.md + modal-otp-hybrid-v3v4.html
Reemplaza el modal "Solicitar financiamiento" preservando los IDs
JS existentes (modalEmail, modalOtpCells, clientPhone, etc.).
═════════════════════════════════════════════════════════════════ */
/* Override del .modal-box para el contactModal — 852px width fijo + 2 columnas */
#contactModal .modal-box {
width: 852px !important;
max-width: calc(100vw - 48px) !important;
padding: 0 !important;
border-radius: 24px !important;
box-shadow: 0 32px 80px -16px rgba(0,0,0,0.5),
0 8px 24px -8px rgba(0,0,0,0.2) !important;
overflow: hidden !important;
background: #FFFFFF !important;
}
#contactModal .modal-close {
position: absolute;
top: 18px; right: 18px;
width: 32px; height: 32px;
border-radius: 50%;
background: #F5F6F8;
border: 0;
color: #5C6B7A;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
z-index: 4;
transition: background var(--motion-fast);
}
#contactModal .modal-close:hover { background: #EEF1F4; color: #0F1419; }
/* contact-form-stage es el grid 2 columnas */
#contactModal .contact-form-stage {
display: grid;
grid-template-columns: 360px 1fr;
}
@media (max-width: 800px) {
#contactModal .modal-box {
width: 100% !important;
max-width: calc(100vw - 24px) !important;
/* v.087 mobile: max-height + scroll para que el usuario pueda llegar al botón Enviar abajo */
max-height: calc(100vh - 32px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
#contactModal .contact-form-stage {
grid-template-columns: 1fr;
/* en mobile, el stage es un solo column scrollable dentro del modal-box */
height: auto !important;
min-height: auto !important;
}
/* v.095: La modal-overlay centrada verticalmente en mobile (era flex-start).
Si el modal cabe → queda centrado; si no cabe → scroll natural respeta margen. */
#contactModal.modal-overlay {
overflow-y: auto !important;
align-items: center !important;
padding: 16px 12px !important;
}
/* v.095: Botón cerrar X visible sobre el pill mobile sticky.
El plan-side pill tiene z-index 5; subimos modal-close a z-index 50 con
fondo blanco + backdrop-blur para destacar sobre el pill. */
#contactModal .modal-close {
top: 12px !important;
right: 12px !important;
width: 34px !important;
height: 34px !important;
z-index: 50 !important;
background: rgba(255,255,255,0.96) !important;
backdrop-filter: blur(8px) saturate(180%) !important;
-webkit-backdrop-filter: blur(8px) saturate(180%) !important;
border: 1px solid rgba(28,26,24,0.10) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
color: #0F1419 !important;
font-size: 16px !important;
}
/* v.095: dejar espacio en el pill para que el chevron NO choque con la X */
.otpv3-mobile-pill { padding-right: 56px !important; }
}
/* PLAN SIDE (lateral izquierdo · 360px) */
.otpv3-plan-side {
background: linear-gradient(180deg, #FAFBFC 0%, #F5F6F8 100%);
padding: 44px 36px 32px;
border-right: 1px solid #EEF1F4;
display: flex; flex-direction: column;
gap: 28px;
}
/* v.090: mobile pill por default oculto (solo se muestra en mobile) */
.otpv3-mobile-pill { display: none; }
@media (max-width: 800px) {
/* v.090 — Mobile-native redesign: plan-side pasa a pill compacto sticky-top, form gana protagonismo */
/* Plan-side colapsado por defecto: solo muestra el pill compacto */
.otpv3-plan-side {
border-right: 0 !important;
border-bottom: 1px solid #EEF1F4 !important;
padding: 0 !important; /* sin padding por default — pill maneja su propio padding */
position: sticky;
top: 0;
z-index: 5;
background: #FAFBFC;
box-shadow: 0 1px 0 #EEF1F4;
}
/* Pill compacto — header sticky con plazo + monto + chevron */
.otpv3-mobile-pill {
display: flex !important;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: transparent;
border: 0;
cursor: pointer;
font-family: 'Inter', sans-serif;
color: #0F1419;
-webkit-tap-highlight-color: transparent;
}
.otpv3-mobile-pill-content {
display: flex; align-items: baseline; gap: 8px;
font-size: 14px; font-weight: 500;
}
.otpv3-mobile-pill-plazo {
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px; font-weight: 400; font-style: italic;
color: #0F1419;
}
.otpv3-mobile-pill-sep { color: #94A2B0; font-size: 14px; }
.otpv3-mobile-pill-amount { font-weight: 600; color: #0F1419; font-variant-numeric: tabular-nums; }
.otpv3-mobile-pill-chevron {
width: 16px; height: 16px;
color: #5C6B7A;
transition: transform var(--motion-base) var(--ease-default);
}
.otpv3-mobile-pill[aria-expanded="true"] .otpv3-mobile-pill-chevron { transform: rotate(180deg); }
/* Detalles del plan colapsados por default — se expanden cuando .is-expanded en plan-side */
.otpv3-plan-side > .otpv3-eyebrow-row,
.otpv3-plan-side > .otpv3-plazo,
.otpv3-plan-side > .otpv3-stats,
.otpv3-plan-side > .otpv3-features-section,
.otpv3-plan-side > .otpv3-trust {
display: none;
}
.otpv3-plan-side.is-expanded {
padding: 0 20px 20px !important;
}
.otpv3-plan-side.is-expanded > .otpv3-eyebrow-row,
.otpv3-plan-side.is-expanded > .otpv3-plazo,
.otpv3-plan-side.is-expanded > .otpv3-stats,
.otpv3-plan-side.is-expanded > .otpv3-features-section,
.otpv3-plan-side.is-expanded > .otpv3-trust {
display: block;
animation: otpv3-mobile-pill-fade-in var(--motion-base) var(--ease-default) both;
}
.otpv3-plan-side.is-expanded > .otpv3-eyebrow-row { display: flex; }
.otpv3-plan-side.is-expanded > .otpv3-stats { display: grid; }
.otpv3-plan-side.is-expanded > .otpv3-features-section { display: flex; }
.otpv3-plan-side.is-expanded > .otpv3-trust { display: flex; }
@keyframes otpv3-mobile-pill-fade-in {
0% { opacity: 0; transform: translateY(-4px); }
100% { opacity: 1; transform: translateY(0); }
}
/* v.091: stats alineados a la izquierda en mobile (era center por desktop) */
.otpv3-stats { grid-template-columns: 1fr !important; gap: 16px !important; text-align: left !important; }
.otpv3-stat { text-align: left !important; }
.otpv3-stat-vdivider { display: none !important; }
.otpv3-stat-amount { font-size: 22px !important; }
.otpv3-stat-eyebrow { margin-bottom: 6px !important; }
.otpv3-plan-side .otpv3-plazo { font-size: 26px !important; margin: 8px 0 12px !important; text-align: left !important; }
/* v.091: OTP cells dimensionadas para caber en viewport 360px con padding form-pane 16px×2 = 332px disponibles
6 cells × 40px + 5 gaps × 4px = 260px → cabe sobrado, deja respiro lateral */
.otp-cells {
gap: 6px !important;
justify-content: space-between !important;
width: 100% !important;
flex-wrap: nowrap !important;
}
.otp-cell {
flex: 1 1 0 !important; /* distribución equitativa para usar todo el width */
min-width: 0 !important;
max-width: 48px !important;
height: 48px !important;
aspect-ratio: 1 / 1 !important;
font-size: 18px !important;
padding: 0 !important;
}
/* v.095: Form pane mobile padding lateral 16→12 para ganar ancho horizontal
que permite OTP cells más cuadradas (combinado con step-card padding 12). */
.otpv3-form-pane { padding: 24px 12px 20px !important; }
/* Title "Confirma tu solicitud" más prominente en mobile */
.otpv3-form-h2 {
font-size: 22px !important;
margin-top: 4px !important;
}
.otpv3-form-subtitle { font-size: 13px !important; margin-bottom: 20px !important; }
/* v.091: asegurar que ningún hijo de form-pane overflow horizontalmente */
.otpv3-form-pane * { max-width: 100%; }
.otpv3-form-pane .otp-cells * { max-width: 48px; }
/* Phone input + checkboxes: full width con padding interno respetado */
.otpv3-step-content { width: 100%; box-sizing: border-box; }
/* v.095: step-card padding 16→12 mobile para que las 6 OTP cells queden
proporcionalmente cuadradas (con aspect-ratio:1 + flex 1 1 0). */
.otpv3-step-card { padding: 12px !important; }
/* === v.094 FIX REAL del overflow del modal mobile (validado en Chrome) ===
Bug raíz: .contact-form-stage usaba display:grid + grid-template-columns:1fr,
pero "1fr" = minmax(auto, 1fr) que NO permite shrink por debajo del min-content.
El plan-side con contenido intrínseco forzaba el grid a ~470px, desbordando el
modal-box de 380px en 90px → step cards salían cortados a la derecha. */
#contactModal .contact-form-stage {
display: block !important; /* ← evita el comportamiento de grid 1fr */
grid-template-columns: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
#contactModal .otpv3-plan-side,
#contactModal .otpv3-form-pane {
width: 100% !important;
box-sizing: border-box !important;
min-width: 0 !important;
max-width: 100% !important;
}
#contactModal .otpv3-step-card {
width: 100% !important;
box-sizing: border-box !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* Defensiva: TODO descendiente del modal con min-width:0 + max-width:100% para permitir shrink */
#contactModal .modal-box * {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/* Excepción: las OTP cells SÍ pueden tener max-width (es su tamaño cuadrado intencional) */
#contactModal .modal-box .otp-cell { max-width: 50px; }
/* v.095: FIX REAL OTP cells cuadradas en mobile.
El override #contactModal .otp-cell (specificity 1,1,0) pone width:52 height:52
fijos, lo que ignora el flex 1 1 0 + aspect-ratio:1 de las reglas .otp-cell mobile.
Aquí forzamos un override de igual o mayor specificity DENTRO del media query
para que en mobile las cells sean flex distribuidas con aspect-ratio cuadrado. */
#contactModal .otp-cell {
width: auto !important;
height: auto !important;
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: 50px !important;
aspect-ratio: 1 / 1 !important;
}
}
.otpv3-eyebrow-row {
display: flex; align-items: center; gap: 8px;
}
.otpv3-eyebrow-icon {
width: 14px; height: 14px;
color: #0F1419;
stroke-width: 1.7; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
.otpv3-eyebrow {
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 11px; line-height: 1;
text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
color: #94A2B0;
}
.otpv3-eyebrow-divider { flex: 1; height: 1px; background: #EEF1F4; }
.otpv3-plazo {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 400; font-size: 38px; line-height: 1.05;
margin: 0;
letter-spacing: -0.005em;
color: #0F1419;
}
.otpv3-plazo em { font-style: italic; }
.otpv3-stats {
display: grid;
grid-template-columns: 1fr 1px 1fr;
align-items: center;
gap: 18px;
}
.otpv3-stat { text-align: center; }
.otpv3-stat-vdivider {
width: 1px; height: 56px;
background: #EEF1F4;
align-self: center;
}
.otpv3-stat-eyebrow {
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 10px; line-height: 1;
text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
color: #94A2B0;
margin-bottom: 8px;
}
.otpv3-stat-amount {
font-family: 'Inter', sans-serif;
font-weight: 600; font-size: 22px; line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
color: #0F1419;
}
.otpv3-stat-note {
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 11px; line-height: 1.4;
color: #94A2B0;
margin-top: 6px;
}
.otpv3-features-section { display: flex; flex-direction: column; gap: 10px; }
.otpv3-features-eyebrow {
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 10px; line-height: 1;
text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
color: #94A2B0;
}
.otpv3-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.otpv3-features li {
display: flex; gap: 10px; align-items: flex-start;
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 13px; line-height: 1.45;
color: #5C6B7A;
}
.otpv3-features svg {
width: 14px; height: 14px;
stroke: #1FAE5F; stroke-width: 2.2;
fill: none; stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0; margin-top: 2px;
}
.otpv3-trust {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid #EEF1F4;
display: flex; align-items: center; gap: 8px;
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 11px; line-height: 1.4;
color: #94A2B0;
}
.otpv3-trust svg {
width: 14px; height: 14px;
stroke: currentColor; stroke-width: 1.5;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* FORM SIDE (lateral derecho) */
.otpv3-form-side {
padding: 36px 36px 30px;
display: flex; flex-direction: column;
}
.otpv3-form-h2 {
/* v.078: cambiado de Inter a Playfair Display para coherencia con hero/heading */
font-family: 'Playfair Display', Georgia, serif;
font-weight: 400; font-size: 26px; line-height: 1.25;
margin: 0 0 6px;
letter-spacing: -0.012em;
color: #0F1419;
}
.otpv3-form-subtitle {
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 13px; line-height: 1.55;
color: #5C6B7A;
margin: 0 0 24px;
}
/* STEP cards */
.otpv3-step {
background: #FAFBFC;
border: 1px solid #EEF1F4;
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 10px;
transition: all var(--motion-fast);
}
.otpv3-step.is-active {
background: #FFFFFF;
border-color: #94A2B0;
box-shadow: 0 4px 14px -4px rgba(15,20,25,0.08);
}
.otpv3-step.is-done {
background: #FAFBFC;
border-color: #EEF1F4;
}
.otpv3-step-head {
display: flex; align-items: center; gap: 10px;
}
.otpv3-num-circle {
width: 22px; height: 22px;
border-radius: 50%;
background: #0F1419;
color: #FFFFFF;
display: flex; align-items: center; justify-content: center;
font-family: 'Inter', sans-serif;
font-weight: 600; font-size: 11px; line-height: 1;
flex-shrink: 0;
transition: background var(--motion-fast);
}
.otpv3-step.is-done .otpv3-num-circle { background: #1FAE5F; }
.otpv3-step.is-done .otpv3-num-circle svg {
width: 11px; height: 11px;
stroke: #FFFFFF; stroke-width: 3;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.otpv3-step:not(.is-done) .otpv3-num-circle svg { display: none; }
.otpv3-step:not(.is-done) .otpv3-num-circle .otpv3-num-text { display: inline; }
.otpv3-step.is-done .otpv3-num-circle .otpv3-num-text { display: none; }
.otpv3-step-name {
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 13px; line-height: 1;
color: #0F1419;
}
.otpv3-step.is-done .otpv3-step-name { color: #5C6B7A; }
.otpv3-step-summary {
margin-left: auto;
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 12px; line-height: 1;
color: #94A2B0;
font-variant-numeric: tabular-nums;
}
.otpv3-step.is-done .otpv3-step-summary {
color: #16904E;
font-weight: 500;
}
.otpv3-step-body { padding: 14px 0 4px 32px; }
.otpv3-step:not(.is-active) .otpv3-step-body { display: none; }
/* Email display + edit link */
.otpv3-email-display {
background: #FAFBFC;
border: 1px solid #EEF1F4;
border-radius: 8px;
padding: 10px 12px;
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 13px; line-height: 1;
color: #0F1419;
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
word-break: break-all;
}
.otpv3-edit-link {
background: transparent; border: 0; cursor: pointer;
color: #94A2B0;
display: flex; align-items: center; gap: 4px;
padding: 4px 6px; border-radius: 6px;
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 11px; line-height: 1;
flex-shrink: 0;
transition: color var(--motion-fast), background var(--motion-fast);
}
.otpv3-edit-link:hover { color: #0F1419; background: #EEF1F4; }
.otpv3-edit-link svg {
width: 11px; height: 11px;
stroke: currentColor; stroke-width: 1.5;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* OTP boxes — 6 cuadrados 52×52 — dentro del modal contactModal usamos
override sobre las clases legacy .otp-cells/.otp-cell para preservar
los IDs JS sin tocar la lógica */
#contactModal .otp-cells {
display: flex !important;
gap: 8px !important;
margin: 0 !important;
}
#contactModal .otp-cell {
width: 52px !important; height: 52px !important;
border: 1.5px solid #A2ADB9 !important;
border-radius: 10px !important;
background: #FFFFFF !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important; font-size: 20px !important; line-height: 1 !important;
font-variant-numeric: tabular-nums !important;
color: #0F1419 !important;
padding: 0 !important;
transition: all var(--motion-fast) !important;
}
#contactModal .otp-cell:focus,
#contactModal .otp-cell.is-active {
outline: 1px solid #0F1419 !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
/* Resend zone con countdown ring nuevo */
.otpv3-resend-zone {
margin-top: 14px;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.otpv3-countdown-cluster { display: flex; align-items: center; gap: 10px; }
.otpv3-countdown-ring {
position: relative;
width: 34px; height: 34px;
flex-shrink: 0;
}
.otpv3-countdown-ring svg {
transform: rotate(-90deg);
width: 100%; height: 100%;
}
.otpv3-countdown-ring .otpv3-ring-bg {
fill: none;
stroke: #EEF1F4;
stroke-width: 2.5;
}
.otpv3-countdown-ring .otpv3-ring-progress {
fill: none;
stroke: #1FAE5F;
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 97.4;
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.95s linear;
}
.otpv3-countdown-time {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Inter', sans-serif;
font-weight: 600; font-size: 9px; line-height: 1;
font-variant-numeric: tabular-nums;
color: #0F1419;
letter-spacing: -0.02em;
}
.otpv3-countdown-label { display: flex; flex-direction: column; gap: 2px; }
.otpv3-lbl-main {
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 12px; line-height: 1.2;
color: #0F1419;
}
.otpv3-lbl-sub {
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 11px; line-height: 1;
color: #94A2B0;
}
.otpv3-resend-link {
background: transparent; border: 0; cursor: pointer;
color: #0F1419;
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 12px; line-height: 1;
padding: 6px 8px; border-radius: 6px;
text-decoration: underline;
text-decoration-color: #A2ADB9;
text-underline-offset: 2px;
transition: text-decoration-color var(--motion-fast), opacity var(--motion-fast);
}
.otpv3-resend-link:hover { text-decoration-color: #0F1419; }
.otpv3-resend-link[disabled] { opacity: 0.5; cursor: not-allowed; text-decoration: none; }
/* Phone field nuevo */
.otpv3-label-text {
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 12px; line-height: 1;
color: #5C6B7A;
margin-bottom: 8px; display: block;
}
.otpv3-field-block { margin-bottom: 18px; }
.otpv3-phone-group {
display: flex;
border: 1.5px solid #A2ADB9;
border-radius: 10px;
overflow: hidden;
transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.otpv3-phone-group:focus-within {
outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none;
}
/* S113 · handoff_form_fields · semántico en focus = idéntico a reposo (SIN outline) */
.otpv3-phone-group.is-valid:focus-within { outline: none; box-shadow: none; }
.otpv3-phone-group.is-error:focus-within { border-color: #B83227; outline: none; box-shadow: none; }
.otpv3-phone-prefix {
background: #F5F6F8;
color: #5C6B7A;
padding: 12px 14px;
font-family: 'Inter', sans-serif;
font-weight: 500; font-size: 14px; line-height: 1;
border-right: 1px solid #EEF1F4;
display: flex; align-items: center; gap: 6px;
}
#contactModal .phone-input-wrap {
/* Override del wrapper legacy del campo phone para usar el estilo otpv3 */
/* v.067: position static (legacy era relative) para que el flex layout
no compita con el position:absolute del prefijo legacy. */
position: static !important;
display: flex !important;
border: 1.5px solid #A2ADB9 !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #FFFFFF !important;
transition: border-color var(--motion-fast), box-shadow var(--motion-fast) !important;
padding: 0 !important;
}
#contactModal .phone-input-wrap:focus-within {
outline: 1px solid #0F1419 !important; outline-offset: 0; box-shadow: none !important;
}
/* S113 · handoff_form_fields · semántico en focus = idéntico a reposo (SIN outline) */
#contactModal .phone-input-wrap.is-valid:focus-within,
#contactModal .phone-input-wrap.has-success:focus-within {
outline: none !important; box-shadow: none !important;
}
#contactModal .phone-input-wrap.is-error:focus-within,
#contactModal .phone-input-wrap.has-error:focus-within {
border-color: #B83227 !important; outline: none !important; box-shadow: none !important;
}
#contactModal .phone-input-wrap .phone-prefix {
/* v.067: el legacy .phone-prefix usa position:absolute (queda flotando
sobre el input). Lo forzamos a static para que el flex layout
funcione y el +52 sea un flex item real, no un overlay. */
position: static !important;
left: auto !important; top: auto !important; bottom: auto !important;
pointer-events: auto !important;
border-radius: 0 !important;
background: #F5F6F8 !important;
color: #5C6B7A !important;
padding: 12px 16px 12px 14px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important; font-size: 14px !important; line-height: 1 !important;
border-right: 1px solid #EEF1F4 !important;
display: flex !important; align-items: center !important; gap: 6px !important;
flex-shrink: 0 !important;
}
#contactModal .phone-input-wrap input {
flex: 1 !important;
border: 0 !important; outline: none !important;
/* v.066: padding-left muy generoso (24px) para que el texto respire bien
del prefijo +52. Antes 16px no era suficiente — el placeholder se veía
pegado al border-right del prefix. */
padding: 12px 14px 12px 24px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 400 !important; font-size: 14px !important; line-height: 1 !important;
background: transparent !important;
color: #0F1419 !important;
width: auto !important;
}
#contactModal .phone-input-wrap input::placeholder { color: #94A2B0 !important; }
/* Checkboxes custom dentro del modal — override del .checkbox-row legacy */
#contactModal .otpv3-consents { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#contactModal .otpv3-check-wrap {
display: flex; gap: 12px; align-items: flex-start;
cursor: pointer; padding: 4px 0;
background: transparent;
border: 0;
margin: 0;
}
#contactModal .otpv3-check-wrap input[type="checkbox"] {
/* Visualmente oculto; usamos .otpv3-check-box */
position: absolute;
opacity: 0; pointer-events: none;
width: 0; height: 0; margin: 0;
}
#contactModal .otpv3-check-box {
width: 18px; height: 18px;
border: 1.5px solid #A2ADB9;
border-radius: 5px;
background: #FFFFFF;
flex-shrink: 0; margin-top: 1px;
display: flex; align-items: center; justify-content: center;
transition: all var(--motion-fast);
}
#contactModal .otpv3-check-box svg {
width: 12px; height: 12px;
stroke: #FFFFFF; stroke-width: 3;
fill: none; stroke-linecap: round; stroke-linejoin: round;
opacity: 0;
}
#contactModal .otpv3-check-wrap input[type="checkbox"]:checked ~ .otpv3-check-box {
background: #0F1419;
border-color: #0F1419;
}
#contactModal .otpv3-check-wrap input[type="checkbox"]:checked ~ .otpv3-check-box svg { opacity: 1; }
#contactModal .otpv3-check-label {
font-family: 'Inter', sans-serif;
font-weight: 400; font-size: 13px; line-height: 1.5;
color: #5C6B7A;
}
#contactModal .otpv3-check-label .otpv3-legal-link {
color: #0F1419;
text-decoration: underline;
text-decoration-color: #A2ADB9;
text-underline-offset: 2px;
}
#contactModal .otpv3-check-label .otpv3-legal-link:hover { text-decoration-color: #0F1419; }
#contactModal .otpv3-consent-optional .otpv3-check-label { color: #94A2B0; font-size: 12px; }
#contactModal .otpv3-required-mark { color: #B23E3E; margin-left: 2px; font-weight: 500; }
/* CTA primario nuevo (override del btn-primary del btnSubmitContact) */
#contactModal #btnSubmitContact {
width: 100% !important;
padding: 14px 20px !important;
border: 0 !important; border-radius: var(--radius-button) !important;
background: #1FAE5F !important;
color: #FFFFFF !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important; font-size: 15px !important; line-height: 1 !important;
cursor: pointer !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 8px !important;
margin-top: 18px !important;
transition: background var(--motion-fast) !important;
height: auto !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
#contactModal #btnSubmitContact:hover { background: #1A9852 !important; }
#contactModal #btnSubmitContact:disabled,
#contactModal #btnSubmitContact.is-disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
}
#contactModal #btnSubmitContact svg {
width: 16px; height: 16px;
stroke: currentColor; stroke-width: 1.7;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* Hide elementos legacy que el nuevo modal no usa */
#contactModal #modalPlanBadge,
#contactModal .modal-plan-badge,
#contactModal .verified-badge,
#contactModal .field > label,
#contactModal .field-meta,
#contactModal .field-hint,
#contactModal .otp-status,
#contactModal .otp-error,
#contactModal #btnSendModalEmailCode,
#contactModal .step-title,
#contactModal .step-subtitle,
#contactModal .btn-group,
#contactModal .checkbox-row { display: none !important; }
/* Pero NO ocultar las nuevas clases otpv3-* */
#contactModal .otpv3-form-h2,
#contactModal .otpv3-form-subtitle,
#contactModal .otpv3-step-name { display: block !important; }
/* ════════════════════════════════════════════════════════════════
FOOTER · tema DARK (TASK_002 · Parte 3)
Mismo fill que navbar (#0F1419). Texto blanco / light gray.
Estructura HTML, copy, layout y tamaños de fuente NO cambian.
════════════════════════════════════════════════════════════════ */
.site-footer {
background: #0F1419;
color: rgba(255,255,255,0.70);
border-top: none;
}
.site-footer__top,
.site-footer__cols,
.site-footer__bottom {
border-color: rgba(255,255,255,0.10) !important;
}
.site-footer h4,
.site-footer__brand strong,
.site-footer__col h4 {
color: #FFFFFF;
}
.site-footer a {
color: rgba(255,255,255,0.70);
}
.site-footer a:hover {
color: rgba(255,255,255,0.95);
}
.site-footer__addr,
.site-footer__disclaimer,
.site-footer__meta,
.site-footer__locale {
color: rgba(255,255,255,0.55);
}
.site-footer__addr svg { color: rgba(255,255,255,0.55); }
.site-footer__addr strong { color: rgba(255,255,255,0.85); }
.site-footer__addr a { color: rgba(255,255,255,0.85); }
.site-footer__reg-pill {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.75);
border-color: rgba(255,255,255,0.12);
}
/* Social icons en dark theme:
- bg circular sutil (rgba blanco) para que se distingan del navbar negro
- icon stroke en blanco translúcido; hover bg más visible + icon sólido
- PNG WA: filter para que se vea blanco translúcido y luego sólido en hover */
.site-footer__social a {
background: rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.85) !important;
border: 1px solid rgba(255,255,255,0.12);
}
.site-footer__social a:hover {
background: rgba(255,255,255,0.16) !important;
color: #FFFFFF !important;
border-color: rgba(255,255,255,0.24);
}
.site-footer__social-wa img {
filter: brightness(0) invert(1) !important;
opacity: 0.85;
}
.site-footer__social-wa:hover img { opacity: 1; }
.site-footer__meta a:hover { color: #FFFFFF; }
.site-footer__col a:hover { color: #FFFFFF; }
.site-footer__addr a:hover { color: #FFFFFF; }
/* Quitar la línea divisoria debajo de la fila de social icons / meta.
En light theme era `border-bottom: 1px solid #EEF1F4`. En dark queda
sin separador (más limpio, el espaciado vertical ya separa visualmente). */
.site-footer__bottom { border-bottom: 0 !important; }
/* Logos regulatorios (CNBV / CONDUSEF / Buró): no hay versión white en
assets aún. Aplicamos filter brightness/invert para mostrarlos blancos
sobre fondo dark. TODO: swap a versión white real cuando esté en /assets. */
.site-footer__reg-logo img {
filter: brightness(0) invert(1);
opacity: 0.85;
}
.site-footer__reg-logo:hover img { opacity: 1; }
/* ════════════════════════════════════════════════════════════
COTIZAR · CSS imported 1:1 from mi-exante.html (sprint S80.2)
Compat aliases — map mi-exante token names to existing index tokens.
════════════════════════════════════════════════════════════ */
:root {
--surface: var(--bg-primary, #FFFFFF);
--surface-2: var(--bg-secondary, #F5F6F8);
--bg: var(--bg-tertiary, #FAFBFC);
--ink: var(--ink-primary, #0F1419);
/* --border, --border-strong, --warning, --r-md, --r-sm, --r-xl,
--focus-ring, --radius-button already exist in index.html DS. */
--accent-go: #1FAE5F;
}
/* ========================================================================
COTIZAR VIEW · UI replica del mockup 🟡_MOCKUP_WIZARD_5_PASOS_v1.html
======================================================================== */
/* ────────────────────────────────────────────────────────────────
SOLICITAR · Design Handoff (S3.2k · design_handoff_solicitar)
2-col grid: config card (1fr) + summary card (292px sticky).
Solo HTML/CSS/orden visual — sin tocar cálculos ni backend.
──────────────────────────────────────────────────────────────── */
/* Page header */
.solpg-head { margin-bottom: 28px; max-width: 760px; }
.solpg-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 400; font-size: 32px;
line-height: 1.15; letter-spacing: -0.01em;
color: var(--fg1); margin: 0 0 8px;
}
.solpg-sub {
font: 400 14px/1.65 'Inter', sans-serif;
color: var(--fg2); max-width: 480px;
margin: 0;
}
/* Product cards (Arrendamiento / Crédito automotriz) — full width como Solicitudes */
.prod-cards {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-bottom: 20px;
}
.prod-card {
display: flex; flex-direction: column; gap: 6px;
padding: 16px 18px;
border-radius: 10px;
border: 1px solid var(--border-strong);
background: var(--surface);
cursor: pointer; text-align: left;
outline: none; font-family: inherit;
transition: border-color var(--motion-fast) var(--ease-default), background var(--motion-fast) var(--ease-default);
}
.prod-card:hover { border-color: var(--fg3); }
.prod-card.is-active {
border: 1.5px solid var(--ink);
background: var(--surface-2);
padding: 15.5px 17.5px;
}
.prod-card-head { display: flex; align-items: center; gap: 10px; }
.prod-card-radio {
width: 18px; height: 18px; border-radius: 50%;
background: transparent; border: 1.5px solid var(--border-strong);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background var(--motion-fast) var(--ease-default), border-color var(--motion-fast) var(--ease-default);
}
.prod-card-radio svg { width: 9px; height: 9px; color: transparent; }
.prod-card.is-active .prod-card-radio { background: var(--ink); border-color: var(--ink); }
.prod-card.is-active .prod-card-radio svg { color: white; }
.prod-card-title { font: 500 14px 'Inter', sans-serif; color: var(--fg1); }
.prod-card-desc {
/* S3.6-polish · sin padding-left para que el texto largo ocupe todo
el ancho de la card (antes estaba indentado bajo el título y
wrappeaba mostrándose hasta la mitad del card). */
font: 400 12px/1.55 'Inter', sans-serif;
color: var(--fg3);
}
/* 2-col grid · full width (matches Solicitudes / Expediente)
align-items default = stretch para que la summary-col alcance el alto de la
config card → CAT puede pegarse al borde inferior izquierdo vía margin-top auto. */
.sol-grid {
display: grid;
grid-template-columns: 1fr 292px;
gap: 20px;
padding-bottom: 80px;
}
/* ── Config card ──
justify-content: space-between distribuye el alto extra entre las 3 secciones
(Precio · Pago · Plazo) cuando la columna derecha es más alta. El gap 36px
actúa como gap MÍNIMO; cualquier alto sobrante se reparte equitativamente
entre las secciones, eliminando el "hueco" inferior. */
.config-card {
background: var(--surface);
border-radius: 16px;
border: 1px solid var(--border);
padding: 32px 28px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 36px;
min-width: 0;
min-height: 0;
}
.cfg-section { /* spacer */ }
.cfg-eyebrow-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 16px;
}
.cfg-eyebrow {
font: 500 10px/1 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--fg3);
}
.cfg-iva-hint {
font: 400 11px 'Inter', sans-serif;
color: var(--fg4);
}
/* Precio y flota row */
.cfg-precio-row {
display: grid; grid-template-columns: 2fr 1fr;
gap: 12px; align-items: end;
}
.cfg-precio-col, .cfg-cantidad-col { display: flex; flex-direction: column; min-width: 0; }
.cfg-mini-label {
font: 400 10px/1 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--fg3); margin-bottom: 6px;
}
.cfg-helper {
font: 400 11px 'Inter', sans-serif;
color: var(--fg3); margin-top: 6px; padding-left: 2px;
transition: color var(--motion-base) ease;
}
.cfg-helper.is-warn { color: var(--warning, #c2410c); font-weight: 500; }
@keyframes cot-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-3px); }
40% { transform: translateX(3px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
}
.cfg-prefix-input.shake, .cfg-prefix-input input.shake,
input.shake, .cfg-stepper.shake { animation: cot-shake 0.4s ease; }
/* Precio prefix + input · 41px tall */
.cfg-prefix-input { display: flex; height: 41px; }
.cfg-prefix {
padding: 0 13px;
border: 1px solid var(--border-strong);
border-right: none;
border-radius: 10px 0 0 10px;
background: var(--surface-2);
font: 500 14px 'Inter', sans-serif;
color: var(--fg3);
display: flex; align-items: center;
flex-shrink: 0;
}
.cfg-prefix-input input {
padding: 9px 12px;
font: 500 15px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: var(--fg1);
border: 1px solid var(--border-strong);
border-left: none;
border-radius: 0 10px 10px 0;
background: var(--surface);
flex: 1; min-width: 0; outline: none;
transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default);
}
.cfg-prefix-input input:focus {
box-shadow: none;
}
/* Stepper cantidad · 41px */
.cfg-stepper {
display: flex; align-items: center; gap: 6px;
height: 41px; padding: 9px 10px;
border: 1px solid var(--border-strong);
border-radius: 10px;
background: var(--surface);
}
.cfg-step-btn {
background: none; border: 0; cursor: pointer;
padding: 0 6px; display: flex; align-items: center;
color: var(--fg4); transition: color var(--motion-fast) var(--ease-default);
}
.cfg-step-btn:hover { color: var(--fg1); }
.cfg-step-btn svg { width: 15px; height: 15px; }
.cfg-step-value {
flex: 1; text-align: center;
font: 600 16px 'Inter', sans-serif;
font-variant-numeric: tabular-nums; color: var(--fg1);
}
/* Pago inicial · header solo con eyebrow (monto se editó abajo con input) */
.cfg-pago-head {
display: flex; justify-content: flex-start; align-items: center;
margin-bottom: 24px;
}
/* Monto manual editable + hint "= X% del total" (per handoff slider+$ variant) */
.cfg-pago-monto-row {
display: flex; align-items: center; gap: 12px;
width: 55%;
margin-top: 20px;
}
.cfg-pago-monto-input {
display: flex; flex: 1; min-width: 0;
height: 41px;
}
.cfg-pago-monto-input .cfg-prefix {
padding: 0 13px;
border: 1px solid var(--border-strong);
border-right: none;
border-radius: 10px 0 0 10px;
background: var(--surface-2);
font: 500 14px 'Inter', sans-serif;
color: var(--fg3);
display: flex; align-items: center;
}
.cfg-pago-monto-input input {
flex: 1; min-width: 0;
padding: 9px 12px;
font: 500 15px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: var(--fg1);
border: 1px solid var(--border-strong);
border-left: none;
border-radius: 0 10px 10px 0;
background: var(--surface);
outline: none;
transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast);
}
.cfg-pago-monto-input input:focus {
box-shadow: none;
}
.cfg-pago-eq-hint {
font: 400 11px 'Inter', sans-serif;
color: var(--fg3);
white-space: nowrap; flex-shrink: 0;
}
.cfg-pago-eq-hint strong {
font: 500 13px 'Inter', sans-serif;
color: var(--fg1);
font-variant-numeric: tabular-nums;
}
/* Slider native con tooltip flotante */
.cfg-slider-wrap { position: relative; padding-top: 26px; margin-bottom: 8px; }
.cfg-slider-tooltip {
position: absolute; top: 0;
background: var(--ink); color: white;
border-radius: 999px; padding: 5px 11px;
font: 500 12px/1 'Inter', sans-serif;
pointer-events: none; z-index: 10; white-space: nowrap;
transform: translateX(-50%);
font-variant-numeric: tabular-nums;
}
.cfg-slider {
-webkit-appearance: none; appearance: none;
width: 100%; height: 3px;
background: linear-gradient(to right, var(--ink) 22.2%, var(--border-strong) 22.2%);
border-radius: 999px; outline: none; margin: 0;
cursor: pointer;
}
.cfg-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 20px; height: 20px;
background: var(--ink); border-radius: 50%;
cursor: grab; border: 0;
box-shadow: 0 2px 6px rgba(15,20,25,0.20);
}
.cfg-slider::-moz-range-thumb {
width: 20px; height: 20px;
background: var(--ink); border-radius: 50%;
cursor: grab; border: 0;
box-shadow: 0 2px 6px rgba(15,20,25,0.20);
}
.cfg-slider:active::-webkit-slider-thumb { cursor: grabbing; }
/* Ticks · posicionadas con la MISMA fórmula que el thumb del slider:
left = ((v − min) / (max − min)) * (100% − 20px) + 10px
Esto hace que cada label se alinee exactamente con la posición del thumb
cuando alcanza ese valor (el 20px viene del ancho del thumb). */
.cfg-slider-ticks {
position: relative;
height: 14px;
margin-top: 2px;
}
.cfg-slider-ticks span {
position: absolute;
top: 0;
transform: translateX(-50%);
font: 400 11px 'Inter', sans-serif;
color: var(--fg4);
transition: color var(--motion-fast) var(--ease-default), font-weight var(--motion-fast);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Posiciones derivadas con la fórmula del thumb:
left = (v − min) / (max − min) × (100% − 20px) + 10px
con min=5, max=60, range=55. Los ticks son 5/20/35/50/60. */
.cfg-slider-ticks span[data-pct="5"] { left: calc(0% + 10px); }
.cfg-slider-ticks span[data-pct="20"] { left: calc(27.273% + 10px - 0.27273 * 20px); }
.cfg-slider-ticks span[data-pct="35"] { left: calc(54.545% + 10px - 0.54545 * 20px); }
.cfg-slider-ticks span[data-pct="50"] { left: calc(81.818% + 10px - 0.81818 * 20px); }
.cfg-slider-ticks span[data-pct="60"] { left: calc(100% + 10px - 1.00000 * 20px); }
.cfg-slider-ticks span.is-active {
color: var(--fg1); font-weight: 500;
}
/* Plazo cards (5 mini-cards) */
.cfg-section--plazo .cfg-eyebrow { display: block; margin-bottom: 14px; }
.plazo-cards { display: flex; gap: 8px; }
.plazo-card {
flex: 1; min-width: 0;
padding: 13px 14px;
border-radius: 13px;
border: 1.5px solid var(--border);
background: var(--surface);
cursor: pointer; text-align: left;
display: flex; flex-direction: column;
align-items: flex-start; gap: 4px;
font-family: inherit; outline: none;
transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.plazo-card:hover {
border-color: var(--fg4); background: var(--bg);
transform: translateY(-1px);
}
.plazo-card.is-active {
/* Active state per handoff: border ink + bg subtle grey (NO verde) */
border-color: var(--ink);
background: var(--surface-2);
transform: none;
}
.plazo-months {
font: 500 9px 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--fg1); white-space: nowrap;
margin-bottom: 5px;
}
.plazo-divider {
width: 100%; height: 1px;
background: var(--border); margin-bottom: 5px;
}
.plazo-card.is-active .plazo-divider { background: rgba(15,20,25,0.15); }
.plazo-amount {
font: 600 16px/1 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
color: var(--fg1); white-space: nowrap;
}
.plazo-mes {
font: 400 9px 'Inter', sans-serif;
color: var(--fg4); margin-top: 2px;
}
/* S108 · Ingreso mínimo recomendado dentro de cada minicard de plazo */
.plazo-min-income {
display: block;
font: 400 10px/1.3 'Inter', sans-serif;
color: var(--fg4);
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--border-subtle, #E5E7EB);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.plazo-card.is-active .plazo-min-income {
color: var(--fg3, #4B5563);
border-top-color: rgba(15,20,25,0.10);
}
/* S108 · Pulse al volver desde "Ajustar cotización" */
@keyframes plazoPulse {
0% { box-shadow: 0 0 0 0 rgba(31,174,95,0); }
35% { box-shadow: 0 0 0 6px rgba(31,174,95,0.18); }
100% { box-shadow: 0 0 0 0 rgba(31,174,95,0); }
}
.plazo-card.plazo-pulse { animation: plazoPulse 1.2s ease-out 1; }
/* ── Summary col + card (handoff: gradient border + shadow + bottom-aligned CAT) ──
.summary-col es flex column con summary-card al top (sticky) y CAT empujada al
bottom vía margin-top auto en .cat-disclaimer. La grid usa align-items default
(stretch) para que la columna derecha alcance el alto de la config card. */
.summary-col {
display: flex; flex-direction: column;
align-self: stretch;
}
.summary-card {
position: sticky; top: 84px;
/* Gradient border via padding-box / border-box · linear-gradient 135deg */
border: 3px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, #A3E635, #1FAE5F, #5EE39E) border-box;
border-radius: 16px;
box-shadow:
0 12px 40px -6px rgba(15,20,25,0.14),
0 2px 8px -2px rgba(15,20,25,0.06);
padding: 22px;
display: flex; flex-direction: column;
}
/* Summary header · split PLAZO + TASA ANUAL (eyebrow + value pair).
Per spec del handoff: eyebrow 9-10px, valor 18-20px (no 26). */
.sum-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.sum-header-block { display: flex; flex-direction: column; gap: 6px; }
.sum-header-block--right { text-align: right; align-items: flex-end; }
.sum-header-eye {
font: 500 10px/1 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--fg3);
}
.sum-header-val {
font: 600 20px/1 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
color: var(--fg1);
display: inline-flex; align-items: baseline; gap: 6px;
}
.sum-header-suffix {
font: 400 13px 'Inter', sans-serif;
color: var(--fg3);
letter-spacing: 0;
}
.sum-pmt-label {
font: 400 10px 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--fg3); margin-bottom: 6px;
}
.sum-pmt {
font: 600 46px/1 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em; color: var(--fg1);
margin-bottom: 3px;
}
.sum-pmt-mes {
font: 400 11px 'Inter', sans-serif;
color: var(--fg3);
margin-bottom: 22px;
}
.sum-rows { display: flex; flex-direction: column; margin-bottom: 18px; }
.sum-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 7px 0;
}
.sum-row-label {
font: 400 12px 'Inter', sans-serif; color: var(--fg3);
}
.sum-row-value {
font: 400 12px 'Inter', sans-serif;
color: var(--fg2);
font-variant-numeric: tabular-nums;
}
.sum-row.is-strong .sum-row-label { font-weight: 500; color: var(--fg1); }
.sum-row.is-strong .sum-row-value { font-weight: 600; color: var(--fg1); }
/* CTA principal + secondary */
.sum-cta {
width: 100%; height: 48px;
border: 0; border-radius: var(--radius-button);
background: var(--ink); color: white;
font: 500 14px 'Inter', sans-serif;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
margin-bottom: 4px;
transition: background var(--motion-fast) var(--ease-default);
}
.sum-cta:hover { background: #1F262E; }
.sum-cta:focus-visible { outline: none; box-shadow: none; }
.sum-cta svg { width: 14px; height: 14px; }
/* "Ver plan de pagos" · text-only ghost (sin border, sin background).
Altura compacta para que el aire abajo del link coincida con el aire
arriba del header (card padding simétrico 22px). */
.sum-secondary {
width: 100%; height: 26px;
border: 0; background: transparent;
font: 500 13px 'Inter', sans-serif;
color: var(--fg2);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 0;
transition: color var(--motion-fast) var(--ease-default);
}
.sum-secondary:hover { color: var(--fg1); }
.sum-secondary svg { width: 14px; height: 14px; }
/* CAT/VEU disclaimer · alinea su borde inferior con el de la config card
(izq) gracias a margin-top auto sobre stretch + flex column en .summary-col.
padding-top: 0 (antes 12px) para recortar ~20% del aire entre el borde
inferior de la summary-card y el contenido del disclaimer, sin tocar la
posición de la summary-card ni el alto de la config-card. */
.cat-disclaimer {
display: grid; grid-template-columns: 80px 1fr;
gap: 0; padding: 0;
margin-top: auto;
}
.cat-col {
padding-right: 14px;
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
}
.cat-label {
font: 600 10px 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--fg3); margin-bottom: 5px;
}
.cat-value {
font: 600 20px/1 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: var(--fg1); margin-bottom: 2px;
}
/* Override para Opción de compra: "$ 75,000" no cabe horizontalmente al
mismo tamaño que "30.6%" en la columna de 80px. Bajamos el tamaño y
forzamos una sola línea (sin wrap). */
#cotVeuDiscValue {
font-size: 14px;
letter-spacing: -0.01em;
white-space: nowrap;
}
.cat-iva {
font: 500 10px 'Inter', sans-serif;
color: var(--fg3);
}
.cat-legal {
padding-left: 14px;
font: 400 10px/1.55 'Inter', sans-serif;
color: var(--fg3);
display: flex; align-items: center;
text-align: justify;
}
/* ── Responsive ── */
/* Responsive: bajo 1024 colapsa a 1-col, summary debajo */
@media (max-width: 1024px) {
.sol-grid { grid-template-columns: 1fr; gap: 24px; }
.summary-col { position: static; top: auto; }
}
@media (max-width: 720px) {
.config-card { padding: 24px 20px; }
.cfg-precio-row { grid-template-columns: 1fr; }
.plazo-cards { flex-wrap: wrap; }
.plazo-card { flex: 0 0 calc(50% - 4px); }
.sol-modal-grid { grid-template-columns: 1fr; }
}
/* ── Dev-bar ── */
/* ════════════════════════════════════════════════════════════════════════
DEV-BAR-BEGIN · QA navegador de estados (S3.3f-A6 · 2026-05-24)
Compartido entre /expediente (#expDevBar) y /cotizar (#solDevBar).
ELIMINAR ANTES DE DEPLOY · ver memoria proj-dev-navegadores
════════════════════════════════════════════════════════════════════════ */
.dev-bar {
display: flex; align-items: center; gap: 12px;
margin: 0 0 20px;
padding: 10px 12px 10px 16px;
background: #1A2026;
color: rgba(255,255,255,0.92);
border-radius: var(--r-md);
font: 500 12px 'Inter', sans-serif;
flex-wrap: wrap;
}
.dev-bar-label {
display: inline-flex; align-items: center; gap: 8px;
font: 600 10px 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.6);
padding-right: 4px;
}
.dev-bar-label::before {
content: '';
width: 6px; height: 6px;
background: var(--accent-go);
border-radius: 50%;
display: inline-block;
}
.dev-bar .group {
display: inline-flex;
background: rgba(255,255,255,0.06);
border-radius: 999px;
padding: 3px;
gap: 2px;
flex-wrap: wrap;
}
.dev-bar .group button {
background: transparent;
border: 0;
color: rgba(255,255,255,0.72);
padding: 6px 12px;
border-radius: 999px;
font: 500 12px 'Inter', sans-serif;
cursor: pointer;
font-family: inherit;
transition: background var(--motion-fast), color var(--motion-fast);
}
.dev-bar .group button:hover { color: #fff; }
.dev-bar .group button.is-active {
background: rgba(255,255,255,0.14);
color: #fff;
}
.dev-bar .scope {
margin-left: auto;
display: inline-flex; align-items: center; gap: 6px;
font: 400 11px 'Inter', sans-serif;
color: rgba(255,255,255,0.6);
}
.dev-bar .scope select {
background: rgba(255,255,255,0.08);
color: #fff;
border: 1px solid rgba(255,255,255,0.16);
border-radius: var(--r-sm);
padding: 4px 8px;
font: 500 12px 'Inter', sans-serif;
font-family: inherit;
cursor: pointer;
}
.dev-bar .scope select option { background: #1A2026; color: #fff; }
/* DEV-BAR-END */
/* ════════════════════════════════════════════════════════════════
S82 · "Lienzo centrado" — cotizador rediseñado (handoff solicitar2)
Spec: /Handoffs Design/solicitar2/prompt.txt
Namespace: .lz-* para no chocar con el shell DS / topbar / sidebar.
Tokens del handoff resueltos a colores directos (#0F1419, #1FAE5F, …)
para fidelidad 1:1, no a aliases del DS legacy que mapean a grises.
════════════════════════════════════════════════════════════════ */
.lz-page {
width: 100%;
max-width: 1120px;
margin: 0 auto;
/* S83-fix5 · garantía de simetría arriba/abajo SIEMPRE.
min-height ocupa el alto del viewport menos el navbar fijo de 56px.
flex-column + justify-content: center centra verticalmente el contenido,
repartiendo el espacio sobrante por igual entre top y bottom. */
min-height: calc(100vh - 56px);
min-height: calc(100dvh - 56px);
display: flex;
flex-direction: column;
justify-content: center;
padding: 24px 4px; /* respiración mínima para evitar que el contenido toque navbar */
box-sizing: border-box;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
color: #0F1419;
}
/* S84-fix4 · FOUC guard · oculta el cotizador hasta que el JS termine de
hidratar PMT, ledger, plazo cards y CAT. Default = opacity 0; cuando el
init dispara lzMarkReady() el body recibe data-lz-ready y reaparece con
un fade corto. Evita que el usuario vea "$ 0" y tabla vacía mientras
carga el JS inline (que pesa por el shim legacy + cot* + lz*). */
.lz-page { opacity: 0; transition: opacity var(--motion-base) ease-out; }
body[data-lz-ready] .lz-page { opacity: 1; }
.lz-row {
display: flex;
gap: 36px;
align-items: flex-start;
}
.lz-config {
flex: 1 1 0;
min-width: 0;
/* S83-fix12 · Sin padding-top — el justify-content: center del .lz-page
centra verticalmente el row, así espacio arriba == espacio abajo. */
padding: 0;
}
.lz-big-wrap {
flex-shrink: 0;
/* S83-fix13 · padding-top sincronizado dinámicamente vía JS al alto real
del header (H1 + subtítulo) — funciona aunque el subtítulo envuelva en
2 líneas o más. Default inicial 99px (1 línea). */
padding: 99px 0 0;
}
/* ── H1 hero ── */
.lz-h1 {
font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
font-weight: 400;
font-size: 40px; /* S84 handoff 2 §4: Playfair 40 */
line-height: 1.08;
letter-spacing: -0.02em;
color: #0F1419;
margin: 0 0 22px; /* S84 handoff 2 §4: margin-bottom 22 */
}
/* S84 · Card contenedora del configurador (handoff 2 §4). Todo el configurador
queda dentro de UNA card blanca: product cards + precio/cantidad + pago inicial.
Subsecciones internas separadas por margin-bottom 48 (la última sin margen). */
.lz-config-card {
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 22px;
padding: 30px;
box-shadow:
0 1px 3px rgba(15,20,25,.04),
0 8px 24px -16px rgba(15,20,25,.12);
}
.lz-config-card > .lz-prod-grid,
.lz-config-card > .lz-section {
margin-bottom: 48px;
}
.lz-config-card > .lz-section:last-child { margin-bottom: 0; }
/* ── Product cards (grid 2 col, gap 12) ── */
.lz-prod-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 32px;
}
.lz-prod {
display: flex; flex-direction: column; gap: 6px;
padding: 18px 20px;
border-radius: 16px;
border: 1px solid #E5E7EB;
background: #FFFFFF;
cursor: pointer; text-align: left;
font-family: inherit; outline: none;
transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default);
}
.lz-prod:hover { border-color: #8B92A1; }
.lz-prod.is-active {
border: 1.5px solid #0F1419;
padding: 17.5px 19.5px;
box-shadow: 0 4px 12px -2px rgba(15,20,25,.06);
}
.lz-prod-head { display: flex; align-items: center; gap: 10px; }
.lz-prod-radio {
width: 19px; height: 19px;
border-radius: 50%;
background: transparent;
border: 1.5px solid #B8BDC7;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background var(--motion-fast) var(--ease-default), border-color var(--motion-fast);
}
.lz-prod-radio svg { width: 10px; height: 10px; color: transparent; }
.lz-prod.is-active .lz-prod-radio { background: #0F1419; border-color: #0F1419; }
.lz-prod.is-active .lz-prod-radio svg { color: #fff; }
.lz-prod-title {
font: 500 15px 'Inter', sans-serif;
color: #0F1419;
}
.lz-prod-desc {
font: 400 12.5px/1.55 'Inter', sans-serif;
color: #8B92A1;
}
/* ── Eyebrow común ── */
.lz-eyebrow {
font: 500 10.5px/1 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #8B92A1;
margin-bottom: 16px;
display: block;
}
/* ── Sección genérica ── */
.lz-section {
padding-top: 4px;
margin-bottom: 32px; /* S83-fix2 · 54 → 32 para compactar */
}
.lz-section:last-child { margin-bottom: 0; }
.lz-label {
font: 400 10px/1 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8B92A1;
margin-bottom: 8px;
display: block;
}
.lz-helper {
font: 400 11px/1.4 'Inter', sans-serif;
color: #8B92A1;
margin-top: 8px;
transition: color var(--motion-base) ease;
}
.lz-helper.is-warn { color: #B83227; font-weight: 500; }
/* ── Precio + cantidad grid ── */
.lz-precio-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 18px;
align-items: start;
}
.lz-prefix-input {
display: flex;
height: 48px;
}
.lz-prefix {
padding: 0 14px;
border: 1px solid #D1D5DB;
border-right: none;
border-radius: 10px 0 0 10px;
background: #F2F4F6;
font: 500 14px 'Inter', sans-serif;
color: #8B92A1;
display: flex; align-items: center;
flex-shrink: 0;
}
.lz-prefix-input input {
flex: 1; min-width: 0;
padding: 0 14px;
height: 48px;
font: 500 15px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #0F1419;
border: 1px solid #D1D5DB;
border-left: none;
border-radius: 0 10px 10px 0;
background: #FFFFFF;
outline: none;
transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.lz-prefix-input input:focus {
outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none;
}
/* ── Stepper cantidad ── */
.lz-stepper {
display: flex; align-items: center;
height: 48px;
border: 1px solid #D1D5DB;
border-radius: 10px;
background: #FFFFFF;
padding: 0 6px;
}
.lz-stepper button {
width: 30px; height: 30px;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
color: #4B5563;
transition: background var(--motion-fast), color var(--motion-fast);
font: 500 18px 'Inter', sans-serif;
padding: 0;
}
.lz-stepper button:hover { background: #F2F4F6; color: #0F1419; }
.lz-stepper > div {
flex: 1; text-align: center;
font: 600 16px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #0F1419;
}
/* ── Slider ── */
.lz-slider-wrap {
position: relative;
padding-top: 30px;
margin-bottom: 4px;
}
/* S83-fix13 · Vuelta al background gradient en el INPUT (sin divs auxiliares).
El browser dibuja track + thumb juntos auto-alineados verticalmente. El JS
solo setea el background con stops en px absolutos calculados desde offsetWidth. */
.lz-slider-track,
.lz-slider-fill { display: none !important; }
.lz-slider-tooltip {
position: absolute; top: 0;
background: #0F1419;
color: #fff;
border-radius: 999px;
padding: 5px 11px;
font: 500 12px/1 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
pointer-events: none;
white-space: nowrap;
transform: translateX(-50%);
}
/* S82-fix · selectores con mayor specificity para vencer la regla global
input[type="range"]::-webkit-slider-thumb (línea 2280) que pintaba el
thumb verde y a 22px. Bug daba 2 problemas: (1) tooltip desalineado
porque la fórmula asume thumb 20px, (2) thumb verde en lugar de negro. */
input.lz-slider[type="range"] {
-webkit-appearance: none !important; appearance: none !important;
width: 100% !important;
height: 3px !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: content-box !important;
/* S83-fix13 · background gradient se setea desde JS · default antes de
cargar JS (15% del default state). */
background: linear-gradient(to right, #0F1419 22.22%, #D1D5DB 22.22%);
border-radius: 999px;
border: 0 !important;
outline: none;
cursor: pointer;
overflow: visible !important;
accent-color: #0F1419;
}
input.lz-slider[type="range"]::-webkit-slider-runnable-track {
background: transparent !important;
height: 3px !important;
border-radius: 999px !important;
}
input.lz-slider[type="range"]::-moz-range-track {
background: transparent !important;
height: 3px !important;
border-radius: 999px !important;
}
/* S83-fix5 · thumb HARD-PINNED a 20px con !important para garantizar que la
fórmula calc(frac * (100% - 20px) + 10px) del JS (tooltip + fill stop)
alinea exacto con el centro óptico del thumb. La regla global
input[type="range"]::-webkit-slider-thumb (línea ~2280) pone 22px y en
algunos browsers gana a pesar de mi specificity (0,2,2 vs 0,1,2). */
input.lz-slider[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important; appearance: none !important;
width: 20px !important; height: 20px !important;
background: #0F1419 !important; /* thumb negro (ink) */
border-radius: 50% !important;
border: 0 !important;
cursor: grab !important;
box-shadow: 0 2px 6px rgba(15,20,25,.20) !important;
/* S83-fix13 · margin-top -8.5 centra el thumb 20px sobre el track 3px
dibujado por el linear-gradient del input. Webkit lo pone por default
en y=0 del input (top); -8.5 lo sube a y=-8.5, centro en y=1.5
(= centro vertical del input 3px). */
margin-top: -8.5px !important;
transition: none !important;
transform: none !important;
}
input.lz-slider[type="range"]::-webkit-slider-thumb:hover {
transform: none !important;
width: 20px !important; height: 20px !important;
}
input.lz-slider[type="range"]::-moz-range-thumb {
width: 20px !important; height: 20px !important;
background: #0F1419 !important;
border-radius: 50% !important;
border: 0 !important;
cursor: grab !important;
box-shadow: 0 2px 6px rgba(15,20,25,.20) !important;
}
input.lz-slider[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
/* Focus visible neutro (WCAG): ring gris discreto · ya no glow verde */
input.lz-slider[type="range"]:focus-visible::-webkit-slider-thumb {
box-shadow: 0 2px 6px rgba(15,20,25,.20), 0 0 0 4px rgba(15,20,25,.10);
}
input.lz-slider[type="range"]:focus-visible::-moz-range-thumb {
box-shadow: 0 2px 6px rgba(15,20,25,.20), 0 0 0 4px rgba(15,20,25,.10);
}
.lz-slider-ticks {
position: relative;
height: 16px;
margin-top: 10px;
}
.lz-tick {
position: absolute;
top: 0;
transform: translateX(-50%);
font: 400 11px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #8B92A1;
white-space: nowrap;
transition: color var(--motion-fast), font-weight var(--motion-fast);
}
.lz-tick.is-active {
color: #0F1419;
font-weight: 500;
}
/* ── Plazo minicards (tamaño L) ── */
.lz-plazo-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 11px;
}
.lz-plazo {
padding: 20px 13px;
border-radius: 12px;
border: 1.5px solid #E5E7EB;
background: #FFFFFF;
cursor: pointer; text-align: left;
display: flex; flex-direction: column;
align-items: flex-start;
font-family: inherit; outline: none;
transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.lz-plazo:hover {
border-color: #D1D5DB;
background: #FAFBFC;
}
.lz-plazo.is-active {
border-color: #0F1419;
background: #F2F4F6;
}
.lz-plazo-months {
font: 500 10px 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #8B92A1;
white-space: nowrap;
margin-bottom: 7px;
}
.lz-plazo-hair {
width: 100%;
height: 1px;
background: #E5E7EB;
margin-bottom: 7px;
}
.lz-plazo.is-active .lz-plazo-hair { background: rgba(15,20,25,0.14); }
.lz-plazo-amount {
font: 600 19px/1 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
color: #0F1419;
white-space: nowrap;
}
.lz-plazo-sub {
font: 400 9px 'Inter', sans-serif;
color: #8B92A1;
margin-top: 3px;
}
/* ── Big card (sticky two-zone) ── */
.lz-big {
width: 384px;
position: sticky;
top: 80px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 22px;
padding: 30px;
overflow: hidden;
box-shadow:
0 2px 4px rgba(15,20,25,.04),
0 18px 40px -14px rgba(15,20,25,.16),
0 50px 90px -44px rgba(15,20,25,.24);
/* S83-fix8 · Escala 85% proporcional al contenido de la card. */
zoom: 0.85;
}
.lz-big-split {
display: flex; justify-content: space-between;
align-items: center; /* S84-fix3 · PLAZO + "36 meses" centrados verticalmente */
}
.lz-big-block { display: flex; flex-direction: column; gap: 8px; }
.lz-big-block-right { text-align: right; align-items: flex-end; }
.lz-big-eye {
font: 500 10px/1 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #8B92A1;
display: block;
}
.lz-big-val {
font-variant-numeric: tabular-nums;
color: #0F1419;
letter-spacing: -0.01em;
}
.lz-big-val strong {
font: 600 27px/1 'Inter', sans-serif;
color: #0F1419;
}
.lz-big-block-right .lz-big-val strong {
font: 600 24px/1 'Inter', sans-serif;
}
.lz-big-suffix {
font: 400 13px 'Inter', sans-serif;
color: #8B92A1;
margin-left: 6px;
}
.lz-big-divider {
height: 1px;
background: #E5E7EB;
margin: 20px 0 22px;
}
.lz-big-pmt {
/* S84 handoff 2 §5d · cifra Inter 600 50px (con zoom 0.85 → ~43px renderizado). */
font: 600 50px/.98 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -0.035em;
color: #0F1419;
margin-top: 4px;
}
.lz-big-pmt-sub {
font: 400 12px 'Inter', sans-serif;
color: #8B92A1;
margin-top: 4px;
margin-bottom: 24px;
}
/* ── Ledger (4 rows label/value) ── */
.lz-big-ledger {
display: flex; flex-direction: column;
margin-bottom: 22px;
}
.lz-row-led {
display: flex; justify-content: space-between; align-items: baseline;
padding: 11px 0;
/* S111+ · sin líneas divisorias en el ledger del big card (ambas vistas) */
}
.lz-led-k {
font: 400 12.5px 'Inter', sans-serif;
color: #8B92A1;
}
.lz-led-v {
font: 400 13px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #4B5563;
}
.lz-led-strong .lz-led-k {
font-weight: 500;
color: #0F1419;
}
.lz-led-strong .lz-led-v {
font-weight: 600;
color: #0F1419;
}
/* ── CTA primario (Solicitar este plan) ── handoff 2 §6 · ctaSize=m / 18px */
.lz-solicitar {
width: 100%;
height: 52px; /* S84 handoff 2 §6 · ctaSize M = 52 */
padding: 0 22px;
border: 0;
border-radius: 12px;
background: #1FAE5F;
color: #FFFFFF;
font: 600 16px 'Inter', sans-serif; /* S84-fix2 · 16px */
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background var(--motion-fast) var(--ease-default), transform var(--motion-fast);
}
.lz-solicitar:hover { background: #16904E; }
.lz-solicitar:active { transform: scale(.98); }
.lz-solicitar:focus-visible {
outline: none;
}
.lz-solicitar svg { width: 20px; height: 20px; } /* S84-fix3 · 16→20 para acompañar texto 16px */
/* ── Ver plan de pagos (ghost link) ── handoff 2 §6 · ~18px */
.lz-ver-pdf {
width: 100%;
margin-top: 12px;
height: 44px; /* S84 espacio para 18px line-height */
border: 0;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font: 600 16px 'Inter', sans-serif; /* S84-fix2 · 16px */
color: #4B5563;
padding: 0;
transition: color var(--motion-fast);
}
.lz-ver-pdf:hover { color: #0F1419; }
.lz-ver-pdf svg { width: 20px; height: 20px; } /* S84-fix3 · 14→20 acompañando texto 16px */
/* ── Pago inicial · campo $ editable (paridad con jsx DownSliderFine) ── */
.lz-mxn-row {
margin-top: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.lz-mxn-input-wrap {
display: flex;
flex: 0 1 300px;
min-width: 0;
}
.lz-mxn-prefix {
width: 44px; height: 44px;
padding: 0 13px;
border: 1px solid #D1D5DB;
border-right: none;
border-radius: 10px 0 0 10px;
background: #F2F4F6;
font: 500 14px 'Inter', sans-serif;
color: #8B92A1;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.lz-mxn-input {
flex: 1; min-width: 0;
height: 44px;
padding: 0 12px;
font: 500 16px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #0F1419;
border: 1px solid #D1D5DB;
border-left: none;
border-radius: 0 10px 10px 0;
background: #FFFFFF;
outline: none;
transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.lz-mxn-input:focus {
outline: 1px solid #0F1419; outline-offset: 0; box-shadow: none;
}
.lz-mxn-equiv {
font: 400 12px 'Inter', sans-serif;
color: #8B92A1;
white-space: nowrap;
flex-shrink: 0;
}
.lz-mxn-equiv strong {
font: 500 13px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #0F1419;
}
/* ── Banda de plazos (full-width, debajo del row) ── */
.lz-band-section {
padding-top: 24px; /* S83-fix4 · solo gap entre row y banda; bottom va en .lz-page */
padding-bottom: 0;
}
.lz-band-eyebrow {
font: 500 10.5px/1 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.13em;
color: #8B92A1;
margin-bottom: 18px;
display: block;
}
.lz-band {
display: grid;
/* S119.4 · 4 plazos (12/24/36/48) tras eliminar 60m */
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.lz-band-card {
padding: 20px 22px 18px;
border-radius: 16px;
border: 1.5px solid #E5E7EB;
background: #FFFFFF;
cursor: pointer;
text-align: left;
outline: none;
display: flex;
flex-direction: column;
gap: 14px;
font-family: inherit;
transition: border-color var(--motion-fast) var(--ease-default), background var(--motion-fast) var(--ease-default);
}
.lz-band-card:hover {
border-color: #D1D5DB;
background: #FAFBFC;
}
.lz-band-card.is-active {
border-color: #0F1419;
background: #F2F4F6;
}
.lz-band-card:focus-visible {
outline: none;
}
.lz-band-head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%; /* S83-fix · forzar ancho completo dentro del button flex column */
gap: 12px; /* respiro mínimo entre eyebrow y radio */
}
.lz-band-eye { flex: 1 1 auto; min-width: 0; } /* S83-fix · el texto consume el espacio */
.lz-band-eye {
font: 500 11px 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #8B92A1;
white-space: nowrap;
}
.lz-band-radio {
width: 18px; height: 18px;
border-radius: 50%;
flex-shrink: 0;
border: 1.5px solid #D1D5DB;
background: transparent;
display: flex; align-items: center; justify-content: center;
transition: background var(--motion-fast), border-color var(--motion-fast);
}
.lz-band-radio svg { width: 10px; height: 10px; color: transparent; }
.lz-band-card.is-active .lz-band-radio {
background: #0F1419;
border-color: #0F1419;
}
.lz-band-card.is-active .lz-band-radio svg { color: #fff; }
.lz-band-pmt {
font: 600 24px/1 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: #0F1419;
white-space: nowrap;
}
.lz-band-mes {
font: 400 11px 'Inter', sans-serif;
color: #8B92A1;
margin-top: 5px;
}
.lz-band-hair {
height: 1px;
background: #E5E7EB;
}
.lz-band-card.is-active .lz-band-hair { background: rgba(15,20,25,0.14); }
.lz-band-feet {
display: flex;
justify-content: space-between;
gap: 10px;
}
.lz-band-foot-label {
font: 400 9px 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8B92A1;
margin-bottom: 4px;
}
.lz-band-foot-val {
font: 500 12.5px 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
color: #4B5563;
white-space: nowrap;
}
.lz-band-foot-right { text-align: right; }
/* ── CAT legal (handoff 2 §5i) ──
"CAT XX.X% sin IVA." Inter 600 14px --fg3 + texto restante 400 12px --fg3.
S84-fix3 · El espacio en blanco vivo va ARRIBA del ledger (no entre CTA y
CAT). Para eso: el ledger lleva margin-top:auto y el CAT queda pegado al
CTA secundario con solo padding-top de respiro (16px). */
.lz-big {
display: flex;
flex-direction: column;
}
.lz-big-ledger {
margin-top: auto !important; /* empuja ledger+CTA+CAT al bottom */
}
.lz-cat-legal {
font: 400 12px/1.55 'Inter', sans-serif;
color: #8B92A1;
text-align: justify;
text-align-last: left;
margin: 0;
padding: 16px 0 0; /* S84-fix3 · 24→16 para no alejar del CTA */
}
.lz-cat-legal .lz-cat-fuerte,
.lz-cat-legal #lzCatStrong,
.lz-cat-legal .lz-cat-strong,
.lz-cat-fuerte {
font-weight: 600 !important;
font-size: 14px !important;
color: #8B92A1 !important;
margin-right: 4px;
}
@media (max-width: 1024px) {
.lz-row { flex-direction: column; gap: 24px; }
.lz-big-wrap { padding-top: 0; width: 100%; }
.lz-big { width: 100%; position: static; top: auto; }
.lz-config { padding: 32px 0 48px; }
/* S119.4 · con 4 plazos, 2x2 en tablet es simétrico (3+1 quedaba desbalanceado) */
.lz-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.lz-precio-grid { grid-template-columns: 1fr; }
.lz-band { grid-template-columns: repeat(2, 1fr); }
.lz-h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.lz-prod, .lz-band-card, .lz-solicitar, .lz-mxn-input, .lz-prefix-input input { transition: none; }
}
/* ════════════════════════════════════════════════════════════════════
S110 · Rediseño cotizador (handoff "Solicitar flujo completo")
Solo UI: acordeón 4 pasos + big card sticky (escritorio) /
carrusel plazo + bottom sheet (móvil). Lógica y backend intactos.
Clases .cz-* nuevas. IDs internos (lzPlazo, lzPmt, lzLedger,
lzPlazoBand, cotPrecio…) se preservan para no romper render.
════════════════════════════════════════════════════════════════════ */
/* shell */
.cz-page { width: 100%; max-width: 1068px; margin: 0 auto; padding: 40px 24px 56px; box-sizing: border-box; }
.cz-h1 { font-family: var(--font-display); font-size: 34px; font-weight: 400; letter-spacing: -0.02em; color: var(--fg1); margin: 0 0 4px; line-height: 1.1; }
.cz-sub { display: none; } /* S111+ · subtítulo eliminado en ambas vistas (build marker queda en source) */
.cz-h1 { margin-bottom: 24px; }
.cz-layout { display: grid; grid-template-columns: 1fr 350px; gap: 32px; align-items: flex-start; }
.cz-config { min-width: 0; }
/* acordeón · cada fila es una CARD INDIVIDUAL según DS (06-COMPONENTS.md pattern ) */
.cz-acc { display: flex; flex-direction: column; gap: 10px; }
.cz-acc-row { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg, 16px); overflow: hidden; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.cz-acc-row[data-open="true"] { border-color: var(--color-border-default); box-shadow: 0 1px 3px rgba(15,20,25,0.04), 0 8px 24px -16px rgba(15,20,25,0.12); }
/* S110-fix5 · Paso 5 (PLAZO · COMPARA Y ELIGE) · eyebrow SIEMPRE visible.
Solo el grid de mini-cards se oculta cuando precio < min. */
.cz-plazo-section[data-empty="true"] .cz-plazo-grid,
.cz-plazo-section[data-empty="true"] .cz-plazo-rail { display: none !important; }
.cz-plazo-section[data-empty="true"]::after {
content: 'Ingresa el precio para ver tus planes.';
display: block;
padding: 18px 20px;
background: var(--color-bg-subtle);
border-radius: 10px;
font: 400 13px var(--font-sans);
color: #4B5563;
text-align: center;
}
/* S110-fix9 · Badge 5 activo (oscuro) cuando mini-cards están desplegadas */
.cz-plazo-section[data-empty="false"] .cz-plazo-eyebrow-badge {
background: var(--color-action-ink) !important;
border-color: var(--color-action-ink) !important;
color: #fff !important;
}
.cz-plazo-section[data-empty="false"] .cz-plazo-eyebrow {
color: var(--fg1) !important;
}
.cz-acc-header { width: 100%; display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: none; background: transparent; cursor: pointer; text-align: left; outline: none; box-sizing: border-box; }
.cz-acc-badge { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-sans); background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); color: var(--fg2); transition: all var(--motion-fast); }
.cz-acc-row[data-open="true"] .cz-acc-badge { background: var(--color-action-ink); border-color: var(--color-action-ink); color: #fff; }
.cz-acc-title { font: 500 14px var(--font-sans); color: var(--fg1); flex-shrink: 0; }
.cz-acc-summary { flex: 1; text-align: right; font: 400 13px var(--font-sans); color: var(--fg3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; transition: opacity var(--motion-fast); }
/* S114 · resumen del acordeón en estado de error (precio fuera de rango).
Solo cambia el color a error semántico · sin chip, sin relleno, sin border. */
.cz-acc-summary--err { color: #B83227; font-weight: 500; }
.cz-acc-row[data-open="true"]:not([data-keep-summary]) .cz-acc-summary { opacity: 0; }
.cz-acc-chev { flex-shrink: 0; display: flex; transform: rotate(0deg); transition: transform var(--motion-base) var(--ease-default); color: var(--fg3); }
.cz-acc-chev svg { transform: translateY(0.5px); }
.cz-acc-row[data-open="true"] .cz-acc-chev { transform: rotate(180deg); }
.cz-acc-body { max-height: 0; overflow: hidden; transition: max-height var(--motion-slow, var(--motion-slow)) var(--ease-default); }
.cz-acc-row[data-open="true"] .cz-acc-body { max-height: 600px; }
.cz-acc-body-inner { padding: 2px 18px 22px; box-sizing: border-box; }
/* producto cards · button.cz-prod gana en specificity sobre legacy .prod-card */
.cz-prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
button.cz-prod, .cz-prod { padding: 18px 20px !important; border-radius: 16px !important; border: 1.5px solid var(--color-border-subtle) !important; background: var(--color-surface) !important; cursor: pointer; text-align: left; outline: none; display: flex; flex-direction: column; gap: 7px; transition: border-color var(--motion-fast), background var(--motion-fast); box-sizing: border-box; font-family: var(--font-sans); box-shadow: none !important; }
button.cz-prod:hover, .cz-prod:hover { border-color: var(--color-border-default) !important; background: #FAFBFC !important; }
button.cz-prod[data-active="true"], .cz-prod[data-active="true"] { border-color: var(--color-action-ink) !important; background: var(--color-bg-subtle) !important; }
.cz-prod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cz-prod-title { font: 500 13px var(--font-sans); color: var(--fg1); letter-spacing: -0.005em; } /* S111+ · 15→13 para que "Arrendamiento" quepa en 1 línea en móvil */
.cz-prod-radio { width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--color-border-default); background: transparent; display: flex; align-items: center; justify-content: center; transition: all var(--motion-fast); }
.cz-prod[data-active="true"] .cz-prod-radio { border-color: var(--color-action-ink); background: var(--color-action-ink); }
.cz-prod-radio svg { width: 10px; height: 10px; color: #fff; opacity: 0; transition: opacity var(--motion-fast); transform: translateY(0.5px); }
.cz-prod[data-active="true"] .cz-prod-radio svg { opacity: 1; }
.cz-prod-desc { font: 400 12.5px/1.55 var(--font-sans); color: var(--fg3); text-wrap: pretty; }
/* flota grid */
.cz-flota-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
/* S111+ · validación semántica precio · sacudida + borde rojo + aviso inline */
.pf-row { border-radius: 10px; }
.pf-err { animation: pfShake 0.42s cubic-bezier(0.36,0.07,0.19,0.97); }
.pf-err .cz-prefix { background: #F4DCD7 !important; border-color: #B83227 !important; color: #8C2018 !important; }
.pf-err input.cz-input { border-color: #B83227 !important; box-shadow: none !important; }
.pf-err input.cz-input::placeholder { color: #B83227 !important; opacity: 0.85; }
.pf-msg { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 400 12.5px/1.4 var(--font-sans); color: #B83227; white-space: nowrap; animation: pfMsgIn var(--motion-base) var(--ease-default) both; }
.pf-msg[hidden] { display: none !important; } /* S111+ · respetar atributo hidden sobre el display:flex base */
.pf-msg svg { flex-shrink: 0; }
@keyframes pfShake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-5px); } 30% { transform: translateX(5px); }
45% { transform: translateX(-4px); } 60% { transform: translateX(4px); }
75% { transform: translateX(-2px); } 90% { transform: translateX(2px); }
}
@keyframes pfMsgIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf-err { animation: none; } .pf-msg { animation: none; } }
.cz-field-label { font: 400 11px var(--font-sans); color: var(--fg3); margin-bottom: 8px; }
.cz-prefix-input { display: flex; }
div.cz-prefix, .cz-prefix { padding: 0 14px !important; border: 1px solid var(--color-border-default) !important; border-right: none !important; border-radius: 10px 0 0 10px !important; background: var(--color-bg-subtle) !important; font: 500 14px var(--font-sans); color: var(--fg3); display: flex !important; align-items: center !important; flex-shrink: 0 !important; height: 48px !important; box-sizing: border-box !important; }
input.cz-input, .cz-input { display: block !important; width: 100% !important; border: 1px solid var(--color-border-default) !important; border-radius: 10px !important; background: var(--color-surface) !important; outline: none !important; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); padding: 0 14px !important; font: 500 16px var(--font-sans) !important; color: var(--fg1) !important; font-variant-numeric: tabular-nums; height: 48px !important; min-width: 0; box-sizing: border-box !important; }
.cz-prefix-input input.cz-input, .cz-prefix-input .cz-input { border-radius: 0 10px 10px 0 !important; border-left: none !important; flex: 1 !important; }
.cz-input:focus { box-shadow: none;!important; } /* S111+ · ink neutro */
.cz-prefix-input:focus-within .cz-prefix { } /* S111+ · ink neutro */
div.cz-stepper, .cz-stepper { display: flex !important; align-items: center !important; gap: 8px !important; border: 1px solid var(--color-border-default) !important; border-radius: 10px !important; background: var(--color-surface) !important; padding: 0 8px !important; height: 48px !important; box-sizing: border-box !important; }
.cz-stepper-btn { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--color-bg-subtle); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--fg2); font: 600 16px var(--font-sans); line-height: 1; transition: background var(--motion-fast); padding: 0; }
.cz-stepper-btn:hover { background: var(--color-border-subtle); }
.cz-stepper-val { flex: 1; text-align: center; font: 600 17px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--fg1); }
/* slider pago inicial */
.cz-slider-wrap { position: relative; padding-top: 28px; margin-bottom: 9px; }
.cz-slider-bubble { position: absolute; top: 0; transform: translateX(-50%); background: var(--color-action-ink); color: #fff; border-radius: 999px; padding: 5px 11px; font: 500 12px/1 var(--font-sans); pointer-events: none; z-index: 10; white-space: nowrap; }
/* Specificity alta (input.cz-slider) + !important para vencer reglas legacy
input[type="range"]::-webkit-slider-thumb que vienen con background verde. */
input.cz-slider[type="range"] { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; height: 3px !important; border-radius: 2px !important; outline: none; cursor: pointer; background: var(--color-border-default) !important; padding: 0 !important; margin: 0 !important; }
input.cz-slider[type="range"]::-webkit-slider-runnable-track { background: transparent !important; height: 3px !important; border-radius: 999px !important; }
input.cz-slider[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #0F1419 !important; cursor: pointer !important; box-shadow: 0 1px 4px rgba(15,20,25,0.18) !important; transition: transform var(--motion-fast); border: none !important; margin-top: -9.5px !important; }
input.cz-slider[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input.cz-slider[type="range"]::-moz-range-track { background: transparent !important; height: 3px !important; border-radius: 999px !important; }
input.cz-slider[type="range"]::-moz-range-thumb { width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #0F1419 !important; border: none !important; cursor: pointer !important; box-shadow: 0 1px 4px rgba(15,20,25,0.18) !important; }
/* S111-fix3 · position relative para que los .lz-tick absolutos se posicionen
contra ESTE container (coincide con el track del slider) · sin padding lateral. */
.cz-slider-ticks { position: relative; height: 16px; padding: 0; margin-top: 0; }
.cz-slider-ticks span { font: 400 11px var(--font-sans); color: var(--fg4); transition: color var(--motion-fast); }
.cz-slider-ticks span[data-active="true"] { font-weight: 500; color: var(--fg1); }
.cz-slider-equiv { margin-top: 16px; display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.cz-slider-equiv-lbl { font: 400 12px var(--font-sans); color: var(--fg3); }
.cz-slider-equiv-val { font: 600 16px var(--font-sans); color: var(--fg1); font-variant-numeric: tabular-nums; }
/* historial 3 pills */
/* Historial · cards estilo producto (no chips compactos) */
.cz-hist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
button.cz-hist, .cz-hist { padding: 18px 20px !important; border-radius: 16px !important; cursor: pointer; outline: none; display: flex !important; flex-direction: column !important; gap: 7px !important; text-align: left !important; white-space: normal !important; border: 1.5px solid var(--color-border-subtle) !important; background: var(--color-surface) !important; font-family: var(--font-sans) !important; color: var(--fg1) !important; height: auto !important; transition: border-color var(--motion-fast), background var(--motion-fast); box-sizing: border-box !important; box-shadow: none !important; }
.cz-hist:hover { border-color: var(--color-border-default) !important; background: #FAFBFC !important; }
button.cz-hist[data-active="true"], .cz-hist[data-active="true"] { border-color: var(--color-action-ink) !important; background: var(--color-bg-subtle) !important; }
.cz-hist-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; }
.cz-hist-title { font: 500 14px var(--font-sans) !important; color: var(--fg1) !important; }
.cz-hist-radio { width: 18px !important; height: 18px !important; border-radius: 50% !important; flex-shrink: 0 !important; border: 1.5px solid var(--color-border-default) !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all var(--motion-fast); }
.cz-hist[data-active="true"] .cz-hist-radio { border-color: var(--color-action-ink) !important; background: var(--color-action-ink) !important; }
.cz-hist-radio svg { width: 9px !important; height: 9px !important; color: transparent !important; transform: translateY(0.5px) !important; }
.cz-hist[data-active="true"] .cz-hist-radio svg { color: #fff !important; }
/* plazo · sección */
.cz-plazo-section { margin-top: 26px; }
/* S111+ · alinear badge + título con los acordeones 1-4 (padding-left 20px, badge 24×24, gap 12px) */
.cz-plazo-eyebrow-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-left: 20px; }
.cz-plazo-eyebrow-badge { width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-sans); color: var(--fg2); flex-shrink: 0; }
.cz-plazo-eyebrow { font: 500 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg3); }
/* plazo grid escritorio */
.cz-plazo-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.cz-plazo-card { padding: 16px 14px 14px; border-radius: var(--radius-lg, 16px); cursor: pointer; text-align: left; outline: none; border: 1.5px solid var(--color-border-subtle); background: var(--color-surface); transition: border-color var(--motion-fast), background var(--motion-fast); display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; font-family: var(--font-sans); }
.cz-plazo-card:hover { border-color: var(--color-border-default); background: #FAFBFC; }
.cz-plazo-card[data-active="true"] { border-color: var(--color-action-ink); background: var(--color-bg-subtle); }
.cz-plazo-head { display: flex; align-items: center; justify-content: space-between; }
.cz-plazo-mes { font: 600 12px var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg2); white-space: nowrap; }
.cz-plazo-radio { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--color-border-default); background: transparent; display: flex; align-items: center; justify-content: center; transition: all var(--motion-fast); box-sizing: border-box; }
.cz-plazo-card[data-active="true"] .cz-plazo-radio { border-color: var(--color-action-ink); background: var(--color-action-ink); }
.cz-plazo-radio svg { width: 10px; height: 10px; color: #fff; opacity: 0; transform: translateY(0.5px); }
.cz-plazo-card[data-active="true"] .cz-plazo-radio svg { opacity: 1; }
.cz-plazo-mes { font: 500 11px var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg3); white-space: nowrap; }
.cz-plazo-pmt { font: 600 22px/1 var(--font-sans); color: var(--fg1); font-variant-numeric: tabular-nums; letter-spacing: -0.025em; white-space: nowrap; }
.cz-plazo-mes-sub { font: 400 11px var(--font-sans); color: var(--fg3); margin-top: 4px; }
.cz-plazo-pmt { font: 600 19px/1 var(--font-sans); color: var(--fg1); font-variant-numeric: tabular-nums; letter-spacing: -0.025em; white-space: nowrap; }
.cz-plazo-mes-sub { font: 400 10px var(--font-sans); color: var(--fg3); margin-top: 4px; }
.cz-plazo-body { display: flex; flex-direction: column; }
.cz-plazo-hair { height: 1px; background: var(--color-border-subtle); margin: 4px 0; }
.cz-plazo-card[data-active="true"] .cz-plazo-hair { background: rgba(15,20,25,0.14); }
/* S108-fix · Ingreso mínimo recomendado dentro de cz-plazo-card */
.cz-plazo-min { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border-subtle, #E5E7EB); }
.cz-plazo-min-label { font: 500 9px/1.2 'Inter', sans-serif; color: var(--color-text-tertiary, #8B92A1); letter-spacing: 0.02em; }
.cz-plazo-min-val { font: 600 11px/1.2 'Inter', sans-serif; color: var(--color-text-secondary, #4B5563); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* S108-fix2 · "/mes" del ingreso mínimo homologado al estilo del .cz-plazo-mes-sub */
.cz-plazo-min-mes { font-weight: 400; color: var(--fg3, #6B7280); margin-left: 1px; }
.cz-plazo-card[data-active="true"] .cz-plazo-min-mes { color: var(--fg3, #6B7280); }
.cz-plazo-card[data-active="true"] .cz-plazo-min { border-top-color: rgba(15,20,25,0.10); }
.cz-plazo-card[data-active="true"] .cz-plazo-min-val { color: var(--color-text-primary, #0F1419); }
.cz-plazo-feet { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cz-plazo-foot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cz-plazo-foot-right { text-align: right; }
.cz-plazo-foot-lbl { font: 500 9px var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg4); white-space: nowrap; }
.cz-plazo-foot-val { font: 500 11px var(--font-sans); color: var(--fg2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* plazo carrusel móvil */
/* S114 · plazo rail alineado al padding del cz-page (sin margin negativo) */
.cz-plazo-rail { display: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 10px; margin: 0; -webkit-overflow-scrolling: touch; }
.cz-plazo-rail .cz-plazo-card { flex: 0 0 132px; width: 132px; scroll-snap-align: start; padding: 14px 15px; }
/* S115 · indicador "deslizable" al borde derecho del rail */
.cz-plazo-rail-wrap { position: relative; }
.cz-plazo-rail-cue {
position: absolute; right: 4px; top: 0; bottom: 6px;
display: none; align-items: center; justify-content: center;
width: 26px;
pointer-events: none;
opacity: 1;
transition: opacity var(--motion-base) var(--ease-default);
}
.cz-plazo-rail-cue::before {
content: '';
position: absolute; inset: 50% auto auto 50%;
width: 26px; height: 26px; margin: -13px 0 0 -13px;
border-radius: 50%;
background: #FFFFFF;
border: 1px solid #D1D5DB;
box-shadow: 0 1px 2px rgba(15,20,25,0.04);
}
.cz-plazo-rail-cue svg {
position: relative; z-index: 1;
animation: chevBob 1.4s var(--ease-default) infinite;
}
.cz-plazo-rail-cue[data-end="true"] { opacity: 0; }
/* S111+ · offset óptico +0.5px a la derecha (centrado visual del chevron-right) */
@keyframes chevBob { 0%, 100% { transform: translateX(0.5px); } 50% { transform: translateX(3.5px); } }
@media (prefers-reduced-motion: reduce) {
.cz-plazo-rail-cue svg { animation: none; transform: translateX(0.5px); }
}
/* big card sticky */
.cz-big-wrap { position: sticky; top: 24px; }
.cz-big { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: 20px; padding: 28px; box-shadow: 0 2px 4px rgba(15,20,25,0.04), 0 18px 40px -16px rgba(15,20,25,0.16); box-sizing: border-box; }
.cz-big-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.cz-big-eye { font: 500 11px var(--font-sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg3); }
.cz-big-plazo-val { display: flex; align-items: baseline; gap: 6px; }
.cz-big-plazo-num { font: 600 30px/1 var(--font-sans); color: var(--fg1); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cz-big-plazo-suf { font: 400 15px var(--font-sans); color: var(--fg3); }
.cz-big-divider { height: 1px; background: var(--color-border-subtle); margin-bottom: 20px; }
.cz-big-hero { margin-bottom: 22px; }
.cz-big-hero-eye { font: 500 11px var(--font-sans); text-transform: uppercase; letter-spacing: 0.13em; color: var(--fg3); margin-bottom: 8px; }
.cz-big-pmt { font: 600 48px/0.95 var(--font-sans); color: var(--fg1); font-variant-numeric: tabular-nums; letter-spacing: -0.035em; }
.cz-big-pmt-sub { font: 400 14px var(--font-sans); color: var(--fg3); margin-top: 4px; }
.cz-ledger { padding: 4px 0 0; }
.cz-ledger-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; }
.cz-ledger-row + .cz-ledger-row { border-top: 0; }
.cz-ledger-lbl { font: 400 13px var(--font-sans); color: var(--fg3); }
.cz-ledger-val { font: 500 14px var(--font-sans); color: var(--fg2); font-variant-numeric: tabular-nums; }
.cz-cta-group { margin-top: 22px; margin-bottom: 18px; }
/* button.cz-cta specificity contra legacy button {} y .lz-solicitar */
button.cz-cta, .cz-cta { width: 100% !important; border: none !important; border-radius: 12px !important; cursor: pointer; background: var(--color-accent-green) !important; color: #fff !important; letter-spacing: -0.01em; font: 600 16px var(--font-sans) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; box-shadow: 0 1px 2px rgba(15,20,25,0.05), 0 10px 24px -10px rgba(31,174,95,0.5) !important; transition: background var(--motion-fast), transform var(--motion-fast); height: 52px !important; padding: 0 !important; box-sizing: border-box; }
.cz-cta:hover { background: var(--color-accent-green-deep); }
.cz-cta:active { transform: scale(0.985); }
.cz-cta svg { width: 20px; height: 20px; transition: transform var(--motion-fast); }
.cz-cta:hover svg { transform: translateX(4px); }
.cz-ver { width: 100%; margin-top: 8px; cursor: pointer; height: 38px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 13px var(--font-sans); color: var(--fg2); transition: color var(--motion-fast); padding: 0; }
.cz-ver:hover { color: var(--fg1); }
.cz-ver svg { width: 18px; height: 18px; }
div.cz-cat, .cz-cat { background: var(--color-bg-subtle) !important; border-radius: 10px !important; padding: 10px 12px !important; font: 400 10.5px/1.5 var(--font-sans) !important; color: #4B5563 !important; text-align: left !important; }
.cz-cat p { font: inherit; color: #4B5563 !important; text-align: inherit; margin: 0; }
.cz-cat strong, .cz-cat .lz-cat-fuerte { font: 600 10.5px var(--font-sans) !important; color: #4B5563 !important; font-size: 10.5px !important; }
/* móvil · CTA full bajo PlazoRail (modo "swap") */
.cz-mob-cta-wrap { display: none; margin-top: 16px; }
/* móvil · peek (asa + texto) */
/* S112 · Peek bar móvil · esquinas redondeadas arriba + fondo blanco + compacto */
.cz-mob-peek-wrap { display: none; }
.cz-peek { width: 100%; padding: 10px 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; box-sizing: border-box; animation: peekBob 1.7s var(--ease-default) infinite; }
.cz-peek-handle { width: 40px; height: 5px; border-radius: 999px; background: var(--color-border-default); }
.cz-peek-label { font: 500 11px var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg3); }
/* S111+ · vaivén vertical hacia arriba (sugiere que el sheet emerge desde abajo) · asa + texto se mueven juntos */
@keyframes peekBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cz-peek { animation: none; } }
/* S114 · peek bar fixed full-width, blanco, anclado al borde inferior siempre */
.cz-mob-peek-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-top: 1px solid var(--color-border-subtle); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 24px -12px rgba(15,20,25,0.18); padding-bottom: env(safe-area-inset-bottom, 0); z-index: 30; }
/* Padding-bottom para que el contenido no quede oculto detrás del peek fixed */
.cz-mob-peek-wrap { height: 0; }
/* bottom sheet móvil */
.cz-sheet-overlay { position: fixed; inset: 0; background: rgba(15,20,25,0.32); opacity: 0; pointer-events: none; transition: opacity var(--motion-slow) ease; z-index: 40; }
.cz-sheet-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.cz-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--color-surface); border-top: 1px solid var(--color-border-subtle); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 24px -12px rgba(15,20,25,0.18); transform: translateY(101%); transition: transform var(--motion-slow) var(--ease-default); pointer-events: none; will-change: transform; z-index: 41; max-height: 92vh; overflow-y: auto; }
.cz-sheet[data-open="true"] { transform: translateY(0); pointer-events: auto; }
.cz-sheet-inner { padding: 8px 20px 30px; }
.cz-sheet-grip { display: flex; justify-content: center; padding: 2px 0 12px; cursor: pointer; }
.cz-sheet-grip-bar { width: 40px; height: 5px; border-radius: 999px; background: var(--color-border-default); }
.cz-sheet-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.cz-sheet-divider { height: 1px; background: var(--color-border-subtle); margin-bottom: 16px; }
.cz-sheet-hero-eye { font: 500 11px var(--font-sans); text-transform: uppercase; letter-spacing: 0.13em; color: var(--fg3); margin-bottom: 6px; }
.cz-sheet-pmt { font: 600 38px/0.95 var(--font-sans); color: var(--fg1); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.cz-sheet-pmt-sub { font: 400 13px var(--font-sans); color: var(--fg3); margin-top: 3px; margin-bottom: 18px; }
/* responsivo · móvil */
@media (max-width: 720px) {
.cz-page { padding: 24px 16px 88px; }
.cz-h1 { font-size: 30px; }
.cz-layout { grid-template-columns: 1fr; gap: 0; }
.cz-big-wrap { display: none; }
.cz-plazo-section { display: block; margin-top: 22px; }
.cz-plazo-grid { display: none; }
.cz-plazo-rail { display: flex; }
.cz-plazo-rail-cue { display: flex; }
.cz-mob-cta-wrap { display: block; }
.cz-mob-peek-wrap { display: block; }
.cz-prod-grid { grid-template-columns: 1fr 1fr; }
.cz-flota-grid { grid-template-columns: 1.5fr 1fr; gap: 12px; }
.cz-hist-grid { grid-template-columns: 1fr; gap: 8px; }
.cz-hist { height: 48px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.cz-acc-body, .cz-acc-chev, .cz-sheet, .cz-sheet-overlay, .cz-prod, .cz-hist, .cz-plazo-card, .cz-cta { transition: none; }
}