/* ═══════════════════════════════════════════════════════ Hola Casa Clara — Sistema de diseño LATAM (CL · CO · BR) Espejo de la identidad AR: crema cálido + navy + mostaza, Fraunces (display) + Inter (sans). Un solo archivo para las 3 páginas país — mantener acá, no inline. ═══════════════════════════════════════════════════════ */ :root{ /* Brand — country-overridable via html[data-country="XX"] below (identical today across AR/CL/CO/BR by design; scaffold kept ready for the day a market needs its own --pri/--accent). */ --pri:#1e3a8a;--pri2:#172e6e; --dark:#0c1730;--dark2:#16213e; /* footer oscuro — FIX: faltaba y el fondo caía transparente */ --accent:#f5b841;--accent2:#c19a5b; --light:#faf6ee;--card:rgba(255,255,255,.94); --border:rgba(30,58,138,.10);--glass:rgba(30,58,138,.06); --font-display:'Fraunces','Newsreader','Georgia',serif; --font-sans:'Inter',system-ui,-apple-system,sans-serif; --font-mono:ui-monospace,'Cascadia Code','Fira Code',monospace; /* Text — WCAG AA on white (aligned with AR master; --text-muted/--text-inv-* were missing here entirely, so any AR component pasted in silently lost them) */ --text-primary:#111827;--text-secondary:#4b5563;--text-tertiary:#6b7280; --text-muted:#9ca3af; --text-inv-primary:rgba(255,255,255,.96);--text-inv-secondary:rgba(255,255,255,.72);--text-inv-muted:rgba(255,255,255,.5); /* Status */ --green:#047857;--green-bg:#ecfdf5;--green-light:#4ade80; --red:#b91c1c;--red-bg:#fef2f2;--red-tint:#fee2e2; --orange:#b45309;--orange-bg:#fffbeb; --info:#0369a1;--info-bg:#e0f2fe; --violet:#6d28d9;--violet-bg:#ede9fe; --mustard-text:#3a2c07; /* dark text on --accent buttons/badges */ --shadow:0 6px 20px rgba(15,15,35,.06); --shadow-lg:0 18px 48px rgba(15,15,35,.10); /* Spacing — 4pt base, 8pt major (was missing entirely — now matches AR) */ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px; /* Radius — CORRECTED to match AR canonical values (was 18/12, AR is 20/10) */ --radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px; --radius:var(--radius-lg); } /* ─── Country brand overrides ─────────────────────────────────────────── Wired via the data-country attribute already present on (CO/CL/BR). No overrides needed today — brand is intentionally shared — kept empty and documented so a future market-specific tint doesn't require touching any component rule above. html[data-country="MX"]{ --pri:#00693e; --accent:#ce1126; } ────────────────────────────────────────────────────────────────────── */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font-sans);background:var(--light);color:var(--text-primary);line-height:1.6;overflow-x:hidden} h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em} a{color:var(--pri)} .wrap{max-width:1120px;margin:0 auto;padding:0 22px} /* ─── Nav ─── */ /* QA fix: los items jamás se parten a mitad ("Modo avançado · Ferramentas") y la barra envuelve como bloque completo, no por palabra — paridad con AR. */ .nav{display:flex;align-items:center;justify-content:space-between;gap:14px;row-gap:10px;padding:18px 0;flex-wrap:wrap} .nav-links a{white-space:nowrap} .nav-links{flex-wrap:wrap;row-gap:6px} @media(max-width:1120px){.nav-links{gap:18px}.nav-links a{font-size:14px}} .nav .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--pri);text-decoration:none;font-family:var(--font-sans);white-space:nowrap} .nav .logo b{color:var(--pri)}.nav .logo span{color:var(--green)} /* Emoji de marca por país (AR 🧉 · CL 🥑 · CO ☕ · BR 🧀): hereda tamaño/peso del logo, margen explícito para que no se pegue ni se corte en mobile. Los emoji son glifos de color propios → idénticos en modo claro/oscuro del sistema. */ .logo-emoji{margin-left:6px;font-weight:400} .nav-links{display:flex;gap:26px;align-items:center} .nav-links a{font-size:15px;font-weight:600;color:var(--text-primary);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .chip{background:#fff;border:1px solid var(--border);border-radius:100px;padding:7px 16px;font-size:13px;font-weight:700;color:var(--pri);font-variant-numeric:tabular-nums;white-space:nowrap} /* Pill de idioma (paridad AR: ES|EN / PT|EN) */ .lang-pill{display:flex;background:#fff;border:1px solid var(--border);border-radius:100px;padding:3px;gap:2px} .lang-pill button{border:none;background:transparent;border-radius:100px;padding:6px 14px;font-size:13px;font-weight:800;cursor:pointer;color:var(--text-secondary);font-family:inherit} .lang-pill button.on{background:var(--pri);color:#fff} @media(max-width:760px){.nav-links{display:none}} /* ─── Nav móvil (patrón exacto del master AR: hamburguesa → drawer navy) ─── FIX regresión: en ≤760px los links desaparecían SIN reemplazo. */ .nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;align-items:center;justify-content:center;min-width:44px;min-height:44px} .hbg-line{width:22px;height:2.5px;background:var(--pri);border-radius:2px;transition:all .25s} .nav-hamburger.open .hbg-line:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .nav-hamburger.open .hbg-line:nth-child(2){opacity:0} .nav-hamburger.open .hbg-line:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} @media(max-width:760px){.nav-hamburger{display:flex}} #mob-nav-menu{display:none;position:fixed;inset:0;background:var(--dark);z-index:10001;flex-direction:column;padding:24px 28px calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch} #mob-nav-menu.mob-open{display:flex!important} .mob-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px} .mob-brand{font-weight:800;font-size:18px;color:#fff;white-space:nowrap} .mob-brand span{color:var(--accent)} .mob-close{background:rgba(255,255,255,.12);border:none;cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;line-height:1} .mob-cat{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);margin:18px 0 6px;opacity:.85} .mob-nav-link{color:#fff;text-decoration:none;font-size:19px;font-weight:700;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);display:block;transition:color .2s} .mob-nav-link:active{color:var(--accent)} .mob-countries{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:rgba(255,255,255,.7)} .mob-countries a{color:rgba(255,255,255,.9);font-weight:700;text-decoration:none;margin-right:12px} body.mob-lock{overflow:hidden} /* ─── Banner "Retomá tu simulación" (patrón AR: persistencia del wizard) ─── */ .resume-band{display:flex;flex-direction:column;gap:12px;align-items:center;background:rgba(17,24,39,.06);border-radius:var(--radius);padding:22px 24px;margin:14px 0 0;text-align:center} .resume-band p{font-size:16px;font-weight:700;margin:0} /* ─── WhatsApp FAB (patrón AR: acompaña todo el scroll) ─── */ .whatsapp-fab{position:fixed;right:20px;bottom:max(24px,env(safe-area-inset-bottom,24px));z-index:9999;display:inline-flex;align-items:center;gap:10px;background:#22c55e;color:#fff;font-weight:800;font-size:15px;border-radius:100px;padding:14px 22px;text-decoration:none;box-shadow:0 10px 30px rgba(12,23,48,.25)} .whatsapp-fab:active{transform:scale(.97)} @media(max-width:480px){.whatsapp-fab{bottom:calc(74px + env(safe-area-inset-bottom,0px));right:14px;padding:13px 18px}} @media print{.whatsapp-fab,#mob-tabbar,#mob-nav-menu,.nav-hamburger{display:none!important}} /* ─── Tab bar inferior móvil (patrón exacto del master AR, zona del pulgar, ≤480px) ─── */ #mob-tabbar{display:none} @media(max-width:480px){ #mob-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10000;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(30,58,138,.12);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 20px rgba(12,23,48,.08)} .mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;font-family:inherit;font-size:10px;font-weight:700;color:var(--text-tertiary);cursor:pointer;padding:4px 2px;border-radius:10px;min-height:48px;justify-content:center} .mob-tab .mob-tab-ic{font-size:19px;line-height:1} .mob-tab.active{color:var(--pri);background:rgba(30,58,138,.07)} /* aire para que el tabbar jamás tape el final del footer (mismo enfoque que AR) */ body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))} } /* ─── Hero ─── */ .hero{display:grid;grid-template-columns:1.25fr .95fr;gap:48px;align-items:center;padding:44px 0 30px} @media(max-width:900px){.hero{grid-template-columns:1fr;gap:28px}} .badges{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px} /* Badges — paridad EXACTA con el master AR (.badge-purple/.badge-indep): pill chica 12px sentence-case CON fuente de datos, no chip mono uppercase gritón (era la diferencia visible #1 del hero en mobile). */ .badge-mono{display:inline-flex;align-items:center;gap:8px;background:rgba(30,58,138,.08);color:var(--pri);font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:none;border-radius:100px;padding:7px 16px} .badge-mono::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0} .badge-green{display:inline-flex;align-items:center;gap:7px;background:rgba(4,120,87,.08);border:1px solid rgba(4,120,87,.22);color:#047857;font-size:12px;font-weight:700;letter-spacing:.3px;border-radius:100px;padding:7px 16px} .kicker{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pri);margin-bottom:14px} .hero h1{font-size:clamp(42px,6.5vw,68px);line-height:1.04;color:var(--text-primary);margin-bottom:20px} .hero h1 em{font-style:italic;color:var(--pri)} .hero .sub{font-size:19px;color:var(--text-secondary);max-width:56ch;margin-bottom:26px} .hero .sub b{color:var(--text-primary)} .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px} /* Escalera de CTAs — copiada verbatim del master AR (.cta-ladder/.cta-secondary): primario arriba, secundarios como pill-links en fila, micro-copy abajo. Reemplaza la fila horizontal de 3 botones que competían entre sí. */ .cta-ladder{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-bottom:14px} .cta-secondary{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .cta-secondary a{font-size:14px;font-weight:700;color:var(--pri);text-decoration:none;padding:9px 16px;border-radius:100px;border:1.5px solid rgba(30,58,138,.20);background:rgba(30,58,138,.04);transition:all .2s;min-height:40px;display:inline-flex;align-items:center;gap:6px} .cta-secondary a:hover{background:rgba(30,58,138,.09);border-color:rgba(30,58,138,.38)} .cta-ladder .micro{margin:0} /* Proof strip — paridad con el master AR (banda mostaza con dato del programa + 2 stats vivos calculados de la propia tabla de entidades; nada inventado). */ .proof-strip{margin-top:24px;background:rgba(245,184,65,.10);border-radius:16px;padding:22px 24px} .ps-head{font-size:12px;color:#7a5a18;font-weight:700;letter-spacing:.4px;margin-bottom:10px;display:flex;align-items:flex-start;gap:7px;line-height:1.5} .ps-head::before{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--green);margin-top:5px} .ps-stats{display:flex;flex-wrap:wrap;border-top:1px solid rgba(245,184,65,.25);padding-top:16px} .ps-stat{flex:1;min-width:110px;padding-right:18px} .ps-stat+.ps-stat{padding-left:18px;padding-right:0;border-left:1px solid rgba(245,184,65,.25)} .ps-num{font-size:28px;font-weight:800;color:var(--pri);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap} .ps-num.alt{color:#7a5a18} .ps-lbl{font-size:11px;color:var(--text-tertiary);font-weight:600;margin-top:3px;text-transform:uppercase;letter-spacing:.4px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;cursor:pointer;border:none;font-family:inherit;text-decoration:none;transition:all .25s cubic-bezier(.16,1,.3,1)} .btn-pri{background:var(--pri);color:#fff} .btn-pri:hover{background:var(--pri2);transform:translateY(-1px)} .btn-sec{background:transparent;color:var(--text-primary);border:1.5px solid rgba(30,58,138,.25)} .btn-block{width:100%} .micro{font-size:13.5px;color:var(--text-tertiary)} .trustline{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-top:18px} .trustline a{color:var(--pri);font-weight:700} /* ─── TOP 3 card ─── */ .top3{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border:1px solid var(--border)} .t3-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px} .t3-src{color:var(--green);font-weight:700;letter-spacing:0;text-transform:none;font-family:var(--font-sans);font-size:13px} .t3-row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid rgba(17,24,39,.06)} .t3-badge{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0} .t3-name{font-size:15px;font-weight:700} .t3-meta{font-size:12.5px;color:var(--text-secondary)} /* QA fix: la columna de tasa nunca se fractura ("10,5 % + TR" en dos líneas, "A.A." huérfano) */ .t3-rate{margin-left:auto;text-align:right;flex-shrink:0} .t3-rate b{font-size:19px;color:var(--pri);font-variant-numeric:tabular-nums;white-space:nowrap} .t3-rate span{display:block;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap} .t3-name{line-height:1.25} .t3-meta{line-height:1.35} .top3 .btn{margin-top:16px} .t3-foot{text-align:center;font-size:12.5px;color:var(--text-tertiary);margin-top:12px} /* ─── Banda BETA + stats ─── */ .beta-band{background:var(--orange-bg);border:1px solid rgba(180,83,9,.25);border-radius:var(--radius-sm);padding:10px 18px;font-size:13px;font-weight:700;color:var(--orange);margin:8px 0 26px;display:inline-block} .stats-band{background:rgba(245,184,65,.10);border:1px solid rgba(245,184,65,.35);border-radius:var(--radius);padding:20px 26px;margin:6px 0 34px;font-size:15px;color:var(--text-primary)} .stats-band b{color:var(--pri)} /* ─── Simulador ─── */ .sec-title{font-size:clamp(26px,4vw,36px);margin:8px 0 6px} .sec-sub{font-size:15.5px;color:var(--text-secondary);margin-bottom:20px;max-width:70ch} #bar{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);background:rgba(250,246,238,.92);border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:14px;padding:12px 22px;margin:0 -22px 18px} #bar .l{font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)} #bar .v{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;min-width:9ch;color:var(--text-primary)} #bar .r{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums} .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;margin-bottom:18px;box-shadow:var(--shadow)} .sl{margin-bottom:18px} .sl .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;gap:12px} .sl label{font-size:13.5px;font-weight:600;color:var(--text-secondary)} .sl output{font-size:18px;font-weight:800;color:var(--pri);font-variant-numeric:tabular-nums;text-align:right} /* Canonical range slider — promoted verbatim from the AR master (was a bare accent-color:var(--pri), which meant CO/CL/BR got the browser's default thumb shape while AR had a hand-tuned one; brand color matched, physical widget didn't). */ input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:100px;background:var(--border);outline:none;cursor:pointer;transition:all .2s} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 1px 4px rgba(30,58,138,.25),0 0 0 3px rgba(245,184,65,.30);border:2px solid var(--pri);transition:all .2s} input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 2px 8px rgba(30,58,138,.30),0 0 0 5px rgba(245,184,65,.20);transform:scale(1.05)} input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 1px 4px rgba(30,58,138,.25),0 0 0 3px rgba(245,184,65,.30);border:2px solid var(--pri)} @media(pointer:coarse){ input[type=range]{height:44px;background:transparent} input[type=range]::-webkit-slider-thumb{width:28px;height:28px;box-shadow:0 1px 4px rgba(30,58,138,.25),0 0 0 9px rgba(245,184,65,.18)} input[type=range]::-moz-range-thumb{width:28px;height:28px} } select{padding:10px 14px;border-radius:10px;border:1.5px solid var(--border);font-size:14px;font-weight:600;font-family:inherit;background:#fff} /* ─── Resultados ─── */ .bank{border-bottom:1px solid rgba(17,24,39,.06);padding:15px 0} .bank:last-child{border-bottom:none} .bh{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .bh b{font-size:15px} .tag{font-size:10px;font-weight:800;text-transform:uppercase;border-radius:100px;padding:3px 9px;letter-spacing:.03em} .tag.mut,.tag.uvr,.tag.ipca{background:var(--violet-bg);color:var(--violet)} .tag.bco,.tag.cop,.tag.tr{background:var(--info-bg);color:var(--info)} .tag.poupanca{background:var(--green-bg);color:var(--green)} .ver{font-size:12.5px;font-weight:800;margin-left:auto} .ver.si{color:var(--green)}.ver.no{color:var(--red)} .pmt{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums} .pmts{font-size:11.5px;color:var(--text-tertiary)} .bank details{margin-top:7px} .bank summary{font-size:12.5px;color:var(--pri);font-weight:700;cursor:pointer} .bank details li{font-size:13px;color:var(--text-secondary);margin:4px 0 0 18px} .note{font-size:12.5px;color:var(--text-tertiary);margin-top:14px} /* ─── Toggle SAC/PRICE (BR) ─── */ .amort{display:flex;background:var(--glass);border-radius:var(--radius-sm);padding:4px;margin-bottom:6px} .amort button{flex:1;border:none;border-radius:9px;padding:11px;font-size:14px;font-weight:800;cursor:pointer;background:transparent;color:var(--pri);font-family:inherit} .amort button.on{background:var(--pri);color:#fff} .amort-note{font-size:12.5px;color:var(--text-tertiary);margin-bottom:16px} /* ─── Subsidios ─── */ .subsidy{border-radius:var(--radius-sm);padding:13px 17px;font-size:13.5px;font-weight:600;margin-top:12px;display:none} .subsidy.si{display:block;background:var(--green-bg);border:1px solid rgba(4,120,87,.25);color:#065f46} .subsidy.no{display:block;background:var(--glass);border:1px solid var(--border);color:var(--text-secondary)} /* ─── FAQ + metodología ─── */ .faq details{margin:0 0 12px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px} .faq summary{font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font-sans)} .faq p{font-size:14px;color:var(--text-secondary);margin-top:8px} .metod{font-size:13px;color:var(--text-secondary)} /* ─── Waitlist ─── */ .wait{background:var(--pri);border-radius:var(--radius);padding:30px 26px;margin-top:26px;color:#fff} .wait h2{font-size:22px;margin-bottom:6px;color:#fff} .wait p{font-size:14px;opacity:.85;margin-bottom:16px} form.wl{display:flex;gap:10px;flex-wrap:wrap} .wl input[type=email]{flex:1;min-width:200px;padding:14px 16px;border-radius:10px;border:none;font-size:15px;font-family:inherit} .wl button{background:var(--accent);color:var(--mustard-text);border:none;border-radius:10px;padding:14px 24px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit} .wl button:disabled{opacity:.6} .hp{position:absolute;left:-9999px} #ok{display:none;font-weight:700;font-size:15px} /* ─── Herramientas — diseño AR: categorías numeradas + cards grandes ─── */ .tools-head{text-align:center;font-size:19px;color:var(--text-secondary);margin:10px auto 30px;max-width:60ch;line-height:1.5} .tcat{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pri);margin:26px 0 12px} .tcat i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:var(--glass);font-weight:800} .tool2-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:760px){.tool2-grid{grid-template-columns:1fr}} /* .tool-big hardened to match AR's .calc-card pattern: tokenized radius (was 16px hardcoded, now var(--radius-md) = 14px, matching AR), and min-width:0 + line-clamp on the text column so longer localized copy (CO/BR descriptions run longer than AR's) can't blow out the card width or produce uneven row heights across the grid. */ .tool-big{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid rgba(17,24,39,.06);border-radius:var(--radius-md);padding:20px 22px;text-decoration:none;color:var(--text-primary);box-shadow:var(--shadow);transition:all .2s;width:100%} .tool-big:hover{transform:translateY(-2px);border-color:rgba(30,58,138,.25)} .tool-big .ico{width:48px;height:48px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0} .ico.g{background:var(--green-bg)}.ico.b{background:var(--info-bg)}.ico.y{background:rgba(245,184,65,.18)}.ico.p{background:var(--violet-bg)}.ico.r{background:var(--red-tint)}.ico.gr{background:var(--glass)} .tool-big .tt{flex:1;min-width:0} .tool-big .tt b{font-size:16.5px;display:block;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tool-big .tt p{font-size:13.5px;color:var(--text-secondary);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tool-big .chev{color:var(--text-tertiary);font-size:18px;flex-shrink:0} .tools-rule{border:none;border-top:2px solid var(--accent);margin:30px 0 4px;opacity:.7} /* Secciones de herramienta COLAPSADAS (comportamiento AR): ocultas hasta que el usuario abre su card. [hidden] es nativo; el back-link devuelve al índice. */ section[hidden]{display:none!important} .tool-back{display:inline-block;font-size:13px;font-weight:700;color:var(--pri);text-decoration:none;margin-bottom:4px} .tool-back::before{content:'← '} /* ─── Escenarios ─── */ .scen-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .scen-chip{border:1.5px solid rgba(30,58,138,.2);background:#fff;border-radius:100px;padding:9px 18px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--text-primary)} .scen-chip.on{background:var(--pri);color:#fff;border-color:var(--pri)} .trow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid rgba(17,24,39,.06);font-size:14px} .trow:last-child{border-bottom:none} .trow b{font-variant-numeric:tabular-nums} .trow .sem{font-weight:800} .verdict-box{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;font-size:14.5px;margin-top:14px} .verdict-box b{color:var(--pri)} /* ─── Tabla de gastos ─── */ .gtable{width:100%;border-collapse:collapse;font-size:13.5px} .gtable th{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);text-align:left;padding:8px 6px;border-bottom:1.5px solid var(--border)} .gtable td{padding:10px 6px;border-bottom:1px solid rgba(17,24,39,.05);font-variant-numeric:tabular-nums} .gtable tr.best td{background:var(--green-bg);font-weight:700} .gtable .num{text-align:right} /* ─── Wizard del simulador (paridad AR) ─── */ .aprb{display:flex;justify-content:center;margin:0 0 16px} .aprb span{background:var(--green-bg);border:1px solid rgba(4,120,87,.25);color:#166534;border-radius:100px;padding:10px 22px;font-size:14.5px;font-weight:700} .mm{display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary);margin-top:4px} .chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px} .chips button{border:1.5px solid rgba(30,58,138,.2);background:#fff;border-radius:12px;padding:11px 20px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;color:var(--text-primary)} .chips button.on{background:var(--pri);color:#fff;border-color:var(--pri)} .stepk{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:14px} .sumchip{display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:12px 16px;font-size:14.5px;font-weight:700;margin-bottom:16px} .sumchip a{margin-left:auto;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer} .pareja{border:1.5px dashed rgba(30,58,138,.3);border-radius:12px;padding:12px 16px;font-size:14px;font-weight:700;color:var(--pri);cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin:14px 0} .trustrow{text-align:center;font-size:13px;color:var(--text-secondary);margin:14px 0 10px} .trustrow .dot{color:#16a34a} .btn-cta{width:100%;font-size:16.5px;padding:17px} .simh3{font-family:var(--font-display);font-size:22px;color:var(--pri);margin:2px 0 4px} .simsub{font-size:14px;color:var(--text-secondary);margin-bottom:16px} .backstep{font-size:13px;font-weight:700;color:var(--pri);cursor:pointer;text-decoration:none;display:inline-block;margin-bottom:10px} /* ─── Bloques inferiores estilo AR: banda ratio + widget arriendo + duo cards ─── */ .ratio-band{display:flex;align-items:center;gap:26px;background:rgba(245,184,65,.12);border:1px solid rgba(245,184,65,.4);border-radius:var(--radius);padding:24px 28px;margin:26px 0 18px;flex-wrap:wrap} .rb-num{text-align:center;min-width:150px} .rb-num b{font-family:var(--font-display);font-style:italic;font-size:40px;color:var(--pri);display:block;line-height:1.05;font-variant-numeric:tabular-nums} .rb-num span{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)} .rb-txt{flex:1;min-width:260px} .rb-txt b{font-size:17px;display:block;margin-bottom:4px} .rb-txt p{font-size:14px;color:var(--text-secondary)} .ratio-band .btn{white-space:nowrap} .rent-widget{background:var(--green-bg);border:1px solid rgba(4,120,87,.2);border-radius:var(--radius);padding:24px 28px;margin-bottom:18px} .rent-widget h3{font-family:var(--font-sans);font-size:18px;font-weight:800;margin-bottom:6px} .rent-widget p{font-size:14px;color:var(--text-secondary);max-width:64ch;margin-bottom:14px} .rw-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .rw-row input{background:#fff;border:1.5px solid rgba(17,24,39,.15);border-radius:12px;padding:14px 18px;font-size:19px;font-weight:800;color:var(--text-primary);width:210px;font-family:inherit;font-variant-numeric:tabular-nums} .rw-row .rw-l{font-size:14.5px;color:var(--text-secondary)} .duo-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:8px} @media(max-width:760px){.duo-cards{grid-template-columns:1fr}} .duo{border-radius:var(--radius);padding:26px;border:1px solid rgba(17,24,39,.08)} .duo.white{background:#fff;box-shadow:var(--shadow)} .duo.cream{background:rgba(245,184,65,.10);border-color:rgba(245,184,65,.4)} .duo .ic{font-size:26px;display:block;margin-bottom:12px} .duo b{font-size:18px;font-family:var(--font-sans);display:block;margin-bottom:8px} .duo p{font-size:14px;color:var(--text-secondary);margin-bottom:12px} .duo a{font-size:14.5px;font-weight:700;text-decoration:none;cursor:pointer} .duo.cream a{color:#7a5a18} /* ─── Índice / mercado hoy ─── */ .mkt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px} .mkt{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px} .mkt .k{font-family:var(--font-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);margin-bottom:4px} .mkt .v{font-size:21px;font-weight:800;color:var(--pri);font-variant-numeric:tabular-nums} .mkt .s{font-size:11.5px;color:var(--text-tertiary)} /* ─── Footer oscuro (paridad AR) ─── */ /* FIX: el footer vive FUERA de .wrap → sin márgenes negativos, ancho completo real */ .foot2{background:var(--dark);color:rgba(255,255,255,.72);margin:44px 0 0;width:100%;padding:52px 32px 26px} /* 3 columns (brand | Herramientas+Recursos | Difusión y prensa+Legal) — mirrors the AR master footer's grouping instead of 4 flat columns. */ .f2-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1.3fr 1fr;gap:34px} @media(max-width:860px){.f2-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.f2-grid{grid-template-columns:1fr}} .f2-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:#fff;margin-bottom:14px} .f2-desc{font-size:13.5px;line-height:1.7;margin-bottom:16px} .f2-meta{font-size:12.5px;line-height:2} .f2-meta .dot{color:var(--green-light)} .f2 h4{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 12px} .f2 h4:not(:first-child){margin-top:22px} .f2 a{display:block;color:rgba(255,255,255,.82);text-decoration:none;font-size:13.5px;padding:4px 0;font-weight:500} .f2 a:hover{color:#fff} /* 2-col link grid for Herramientas/Recursos — mirrors AR's .footer-res-grid so 6 tools read as 3 tidy rows instead of one long vertical list. */ .footer-res-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px} .footer-res-grid a{display:flex;align-items:center;gap:8px} .footer-res-grid .fic{flex-shrink:0;width:16px;text-align:center;font-size:13px} @media(max-width:640px){.footer-res-grid{grid-template-columns:1fr}} .f2-src{max-width:1120px;margin:30px auto 0;font-size:12.5px;border-top:1px solid rgba(255,255,255,.08);padding-top:18px} .f2-src a{color:rgba(255,255,255,.85);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-right:14px} .f2-bottom{max-width:1120px;margin:16px auto 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.5)} .f2-bottom b{color:rgba(255,255,255,.85)} /* ═══ QA pre-live: mobile footer + safe-area + tap targets + fluidez 320-1920 ═══ */ /* FIX footer móvil: padding inferior con safe-area (requiere viewport-fit=cover en el meta viewport — agregado en las páginas) para que el chrome dinámico de iOS/Android jamás tape las últimas filas. */ .foot2{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))} @media(max-width:560px){ .foot2{padding:38px 20px calc(30px + env(safe-area-inset-bottom,0px))} .f2-grid{gap:24px} .f2-bottom{flex-direction:column;gap:8px} .f2-src a{display:inline-block;margin:2px 14px 2px 0} .cta-row .btn{width:100%;justify-content:center} .cta-ladder .btn-pri{width:100%;justify-content:center} .proof-strip{padding:18px 18px} .ps-num{font-size:24px} .ratio-band{padding:20px 18px;gap:16px} .wrap{padding:0 16px} #bar{margin:0 -16px 18px;padding:10px 16px} } /* Tap targets ≥ 44-48px en móvil (chips de anticipo/plazo, escenarios, idioma) */ .chips button{min-height:48px} .scen-chip{min-height:44px} .lang-pill button{min-height:38px;min-width:44px} input[type=range]{height:32px} /* Estados activos (feedback táctil) */ .btn:active,.tool-big:active,.chips button:active{transform:scale(.985)} /* Anti-CLS/overflow con contenido localizado largo (pt-BR corre ~15% más largo) */ .hero h1,.hero .sub,.tt b,.tt p{overflow-wrap:break-word} .bank .bh{min-width:0} /* ═══ FIX top móvil: nav + hero + top3 entran en 320-430px sin recortes ═══ */ @media(max-width:560px){ .nav .logo{font-size:16px;gap:6px} .logo-emoji{margin-left:4px} .chip{font-size:11.5px;padding:6px 11px;max-width:100%;overflow:hidden;text-overflow:ellipsis} .lang-pill button{padding:5px 11px;font-size:12px} /* Las badges largas ("No trabajamos para ningún banco ni mutuaria") envuelven en vez de desbordar el viewport */ .badge-green,.badge-mono{white-space:normal;line-height:1.35;text-align:left} .kicker{font-size:11.5px;letter-spacing:.06em} .hero{padding:26px 0 16px;gap:22px} .hero h1{font-size:clamp(34px,10.5vw,44px)} .hero .sub{font-size:16px} .micro{font-size:12.5px} .pressbar{flex-wrap:wrap;row-gap:2px} .top3{padding:18px;min-width:0} .t3-badge{width:38px;height:38px;font-size:12px;border-radius:10px} .t3-name{font-size:14px} .t3-meta{font-size:11.5px} .t3-rate b{font-size:16.5px} .stats-band{padding:16px 18px;font-size:14px} .sumchip{flex-wrap:wrap;row-gap:4px} } @media(max-width:380px){ .nav .logo span:first-of-type{display:none} /* 320px: solo "Clara 🇧🇷🧀" + controles */ .t3-rate b{font-size:15px} } /* ═══════════════════════════════════════════════════════ PREMIUM PASS — minimalismo de peso: una señal por superficie Regla: sombra = flota, hairline = plano. Nunca las dos. ═══════════════════════════════════════════════════════ */ :root{ /* Escala tipográfica deliberada (6 pasos, fluida) — reemplaza los 18 tamaños ad-hoc. Uso: superficies nuevas y titulares; el resto migra gradualmente. */ --fs-0:clamp(11px,.7vw,12px); /* mono/labels */ --fs-1:clamp(13px,.85vw,14px); /* soporte */ --fs-2:clamp(14.5px,1vw,16px); /* cuerpo */ --fs-3:clamp(17px,1.3vw,19px); /* lead */ --fs-4:clamp(22px,2.2vw,28px); /* h3/h2 menores */ --fs-5:clamp(28px,3.6vw,40px); /* sec-title */ --fs-6:clamp(42px,6.5vw,68px); /* hero */ /* Elevación con tinte de marca (sombras grises = plástico; tinte navy = papel) */ --elev-1:0 1px 2px rgba(30,58,138,.05),0 4px 14px rgba(30,58,138,.05); --elev-2:0 2px 6px rgba(30,58,138,.06),0 14px 36px rgba(30,58,138,.09); } /* 1 · Dieta de bordes: las superficies con sombra pierden el borde */ .panel,.top3,.tool-big,.duo.white,.mkt,.faq details{border:none;box-shadow:var(--elev-1)} .top3{box-shadow:var(--elev-2)} .tool-big:hover{box-shadow:var(--elev-2);border:none} /* Las superficies TINTADAS (ya tienen contraste de fondo) pierden borde Y sombra */ .stats-band,.ratio-band,.rent-widget,.duo.cream,.verdict-box,.subsidy.si,.subsidy.no,.badge-green,.aprb span{border:none} /* 2 · Silencio cromático: la beta-band deja de gritar en naranja */ .beta-band{background:transparent;border:none;padding:6px 0;color:var(--text-tertiary);font-weight:600;font-size:12.5px} .beta-band::before{content:'●';color:var(--orange);margin-right:8px;font-size:9px;vertical-align:1px} /* 3 · Ritmo del hero: jerarquía por espacio, no por igualdad */ .badges{margin-bottom:18px} .kicker{margin-bottom:10px;opacity:.85} .hero h1{margin-bottom:22px} .hero .sub{margin-bottom:30px;line-height:1.55;max-width:52ch} .cta-row{margin-bottom:10px} /* WhatsApp como acción terciaria (link fantasma), no tercer botón bordeado */ .btn-ghost{background:transparent;border:none;color:var(--pri);font-weight:700;padding:15px 10px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px} .btn-ghost:hover{color:var(--pri2);transform:none} /* 4 · Accesibilidad: anillo de foco de marca en TODO lo interactivo */ :focus-visible{outline:2.5px solid var(--pri);outline-offset:3px;border-radius:4px} .btn:focus-visible,.chips button:focus-visible,.scen-chip:focus-visible{outline-offset:2px} /* 5 · Gramática de movimiento */ .tool-big .chev{transition:transform .25s cubic-bezier(.16,1,.3,1)} .tool-big:hover .chev{transform:translateX(4px);color:var(--pri)} .faq summary{list-style:none;position:relative;padding-right:28px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:400;color:var(--pri);transition:transform .25s} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq details{padding:16px 20px;transition:box-shadow .2s} .faq details[open]{box-shadow:var(--elev-2)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important} } /* 6 · Toques finales: selección de marca + titulares en escala */ ::selection{background:rgba(245,184,65,.35);color:var(--text-primary)} .sec-title{font-size:var(--fs-5);letter-spacing:-.025em} .tools-head{font-size:var(--fs-3)} .simh3{font-size:var(--fs-4)} .hero h1{font-size:var(--fs-6)} /* Hairlines más finas donde sí van (tablas, filas) */ .bank,.t3-row,.trow{border-bottom-color:rgba(17,24,39,.05)}