/* ============================================================
QUETZAL — Sistema visual estilo Kashly
Premium, minimalista, foco hipotecario
============================================================ */
:root{
--teal-50:#F0F9FA;
--teal-100:#DCF1F3;
--teal-200:#B5E3E7;
--teal-300:#84CFD6;
--teal-400:#4AB5BF;
--teal-500:#188B92;
--teal-600:#177B8B;
--teal-700:#0E4A60;
--teal-900:#08323F;
--coral-50:#FEF2F2;
--coral-400:#F47373;
--coral-500:#E94545;
--coral-cta:#D23636; /* coral solo para botones con texto blanco encima (AA 4.86:1); el brand sigue siendo #E94545 */
--coral-600:#C13030;
--mint:#C8F2D6;
--mint-soft:#E1F8E8;
--mint-deep:#9DE8B5;
--ink:#121111;
--ink-2:#2A2828;
--ink-soft:#4A5568;
--ink-faint:#6A727D; /* antes #8B95A1 (3.0:1, fallaba AA); #6A727D clears 4.81:1 white / 4.66:1 cream */
--ink-muted:#B8BEC6;
--cream:#FBFAF7;
--cream-soft:#F5F4F0;
--cream-warm:#FFFAF5;
/* tint toward brand hue, evita pure white plano */
--white:#FCFEFE;
--pure-white:#FFFFFF;
--border:rgba(18,17,17,0.08);
--border-soft:rgba(18,17,17,0.05);
--shadow-sm:0 1px 2px rgba(18,17,17,0.06);
--shadow-md:0 8px 28px -8px rgba(18,17,17,0.12);
--shadow-lg:0 24px 60px -16px rgba(18,17,17,0.18);
/* Easings — SKILL.md (Emil Kowalski) */
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
/* Alias legacy: el ease genérico debería ser el de entrada (ease-out-quart) */
--ease: var(--ease-out-quart);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{
font-family:'Switzer',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
background:var(--cream);
color:var(--ink);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-feature-settings:'ss01','ss02','cv01';
text-rendering:optimizeLegibility;
}
a{ text-decoration:none; color:inherit; }
/* Force-disable italic anywhere — branding sin cursivas */
em, i, .italic{ font-style: normal; }
/* ============================================================
CONTAINER
============================================================ */
.kx-container{
width:100%;
max-width:1240px;
margin:0 auto;
padding:0 28px;
}
@media (max-width: 700px){ .kx-container{ padding:0 20px; } }
/* ============================================================
NAV — pill flotante
============================================================ */
.kx-nav{
position:fixed;
top:14px;
left:0;
right:0;
margin-inline:auto;
width:max-content;
max-width:calc(100vw - 24px);
z-index:60;
display:flex;
align-items:center;
gap:6px;
padding:6px 6px 6px 12px;
background: rgba(251,250,247,0.96);
border:1px solid var(--border-soft);
border-radius:999px;
box-shadow:0 14px 36px -16px rgba(18,17,17,0.18), 0 2px 8px -2px rgba(18,17,17,0.06);
transition: transform .5s var(--ease), opacity .35s var(--ease);
}
@supports (backdrop-filter: blur(8px)){
.kx-nav{
background: rgba(255,255,255,0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
}
.kx-nav.is-hidden{ transform:translateY(-140%); opacity:0; }
.kx-nav-logo{ display:flex; align-items:center; }
.kx-nav-logo img{ height:34px; width:auto; display:block; }
.kx-nav-links{ display:flex; align-items:center; gap:2px; padding:0 8px; }
.kx-nav-links a{
font-size:13px; font-weight:500; color:var(--ink-soft);
padding:7px 12px; border-radius:999px;
white-space: nowrap;
transition: color .2s var(--ease), background .2s var(--ease);
}
.kx-nav-links a:hover{ color:var(--ink); background:rgba(18,17,17,0.04); }
.kx-nav-links a.is-active{ color:var(--ink); font-weight:600; }
/* Nav dropdown (Hipotecas) */
.kx-nav-dd{ position: relative; }
.kx-nav-dd-btn{
display: inline-flex; align-items: center; gap: 5px;
font-size: 13px; font-weight: 500; color: var(--ink-soft);
padding: 7px 12px; border-radius: 999px;
background: transparent; border: 0; cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: color 200ms var(--ease-out-quart), background 200ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.kx-nav-dd-btn:hover{ color: var(--ink); background: rgba(18,17,17,0.04); }
}
.kx-nav-dd-btn svg{
transition: transform 220ms var(--ease-out-quart);
color: var(--ink-faint);
}
.kx-nav-dd.is-open .kx-nav-dd-btn{ color: var(--ink); background: rgba(18,17,17,0.04); }
.kx-nav-dd.is-open .kx-nav-dd-btn svg{ transform: rotate(180deg); color: var(--teal-600); }
.kx-nav-dd-panel{
position: absolute; top: calc(100% + 14px); left: 50%;
transform: translateX(-50%) translateY(-8px) scale(0.98);
width: 360px; max-width: calc(100vw - 32px);
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 18px;
box-shadow: 0 28px 70px -12px rgba(18,17,17,0.2), 0 2px 8px -2px rgba(18,17,17,0.06);
padding: 8px;
display: flex; flex-direction: column; gap: 2px;
opacity: 0; pointer-events: none;
transition: opacity 220ms var(--ease-out-quart), transform 220ms var(--ease-out-quart);
z-index: 70;
}
.kx-nav-dd.is-open .kx-nav-dd-panel{
opacity: 1; pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
}
.kx-nav-dd-panel a[role="menuitem"]{
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 12px;
transition: background 180ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.kx-nav-dd-panel a[role="menuitem"]:hover{ background: var(--cream-soft); }
}
.kx-dd-ic{
flex: none;
width: 34px; height: 34px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.kx-dd-ic.teal{ background: var(--mint-soft); color: var(--teal-700); }
.kx-dd-ic.coral{ background: var(--coral-50); color: var(--coral-500); }
.kx-dd-t{ display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.kx-dd-s{ display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.kx-dd-foot{
margin-top: 6px; padding: 12px;
background: var(--cream-soft);
border-radius: 12px;
text-align: center;
}
.kx-dd-foot a{
font-size: 12.5px; font-weight: 600;
color: var(--coral-500);
}
.kx-nav-cta{
display:inline-flex; align-items:center; gap:5px;
background:var(--coral-cta); color:var(--white);
padding:8px 14px; border-radius:999px;
font-size:12.5px; font-weight:600;
white-space: nowrap;
flex: none;
transition: transform 120ms var(--ease-out-quart), background 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart);
box-shadow:0 8px 22px -6px rgba(233,69,69,0.45);
}
.kx-nav-cta:active{ transform: scale(0.97); }
.kx-nav-cta svg{ transition: transform 200ms var(--ease-out-quart); }
@media (hover: hover) and (pointer: fine){
.kx-nav-cta:hover{ background:var(--coral-600); box-shadow:0 12px 28px -6px rgba(233,69,69,0.55); }
.kx-nav-cta:hover svg{ transform: translateX(2px); }
}
/* Mobile header */
.kx-mobile-header{
position:fixed; top:0; left:0; right:0; z-index:60;
display:flex; align-items:center; justify-content:space-between;
padding:12px 18px;
background:rgba(251,250,247,0.96);
border-bottom:1px solid var(--border-soft);
transition: transform .35s var(--ease);
}
@supports (backdrop-filter: blur(8px)){
.kx-mobile-header{
background: rgba(251,250,247,0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
}
.kx-mobile-header.is-hidden{ transform:translateY(-100%); }
.kx-mobile-cta{
background:var(--coral-500); color:var(--white);
padding:9px 14px; border-radius:999px;
font-size:12.5px; font-weight:600;
box-shadow:0 8px 22px -6px rgba(233,69,69,0.4);
transition: transform 120ms var(--ease-out-quart);
}
.kx-mobile-cta:active{ transform: scale(0.97); }
/* ============================================================
TYPOGRAPHY
============================================================ */
.kx-eyebrow{
display:inline-flex; align-items:center; gap:8px;
padding:7px 14px;
background:var(--white);
border:1px solid var(--border);
border-radius:999px;
font-size:12.5px; font-weight:500;
letter-spacing:0.01em;
color:var(--ink-soft);
box-shadow:var(--shadow-sm);
}
.kx-eyebrow .dot{
width:6px; height:6px; border-radius:50%;
background:var(--teal-500);
box-shadow:0 0 0 4px rgba(24,139,146,0.18);
}
.kx-eyebrow.is-dark{
background:rgba(255,255,255,0.06);
border-color:rgba(255,255,255,0.12);
color:rgba(255,255,255,0.85);
}
.kx-eyebrow.is-dark .dot{
background:var(--mint-deep);
box-shadow:0 0 0 4px rgba(157,232,181,0.2);
}
.kx-hero-title{
font-size: clamp(44px, 7vw, 88px);
line-height: 0.98;
letter-spacing:-0.055em;
font-weight:700;
color:var(--ink);
}
.kx-hero-title em{ font-style:normal; color:var(--teal-600); font-weight:600; }
.kx-h2{
font-size: clamp(36px, 5vw, 62px);
line-height: 1;
letter-spacing:-0.05em;
font-weight:700;
color:var(--ink);
}
.kx-h2 em{ font-style:normal; color:var(--teal-600); font-weight:600; }
.kx-h3{
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.15;
letter-spacing:-0.025em;
font-weight:600;
color:var(--ink);
}
.kx-hero-sub{
font-size: clamp(16px, 1.25vw, 18.5px);
line-height:1.55;
color:var(--ink-soft);
font-weight:400;
}
.kx-lead{
font-size: clamp(15.5px, 1.15vw, 17px);
line-height:1.6;
color:var(--ink-soft);
}
.kx-lead-sm{
font-size: 16px;
line-height:1.6;
color:var(--ink-soft);
}
/* ============================================================
BUTTONS
============================================================ */
.kx-btn-primary{
display:inline-flex; align-items:center; gap:8px;
background:var(--coral-cta); color:var(--white);
padding:14px 24px; border-radius:999px;
font-size:14.5px; font-weight:600;
transition: background 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart), transform 120ms var(--ease-out-quart);
box-shadow:0 12px 26px -8px rgba(233,69,69,0.45);
}
.kx-btn-primary svg{ transition: transform 200ms var(--ease-out-quart); }
.kx-btn-primary:active{ transform: scale(0.97); }
@media (hover: hover) and (pointer: fine){
.kx-btn-primary:hover{ background:var(--coral-600); box-shadow:0 16px 32px -8px rgba(233,69,69,0.55); }
.kx-btn-primary:hover svg{ transform: translateX(3px); }
}
.kx-btn-ghost{
display:inline-flex; align-items:center; gap:9px;
background:var(--white); color:var(--ink);
padding:14px 22px; border-radius:999px;
font-size:14.5px; font-weight:600;
border:1px solid var(--border);
box-shadow:var(--shadow-sm);
transition: background 200ms var(--ease-out-quart), transform 120ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart);
}
.kx-btn-ghost:active{ transform: scale(0.97); }
@media (hover: hover) and (pointer: fine){
.kx-btn-ghost:hover{ background:var(--cream-soft); border-color: rgba(18,17,17,0.14); }
}
.kx-btn-ghost .kx-play{
display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; border-radius:50%;
background:var(--teal-600); color:var(--white);
}
.kx-btn-link{
display:inline-flex; align-items:center; gap:6px;
font-size:14.5px; font-weight:600;
color:var(--teal-600);
padding:8px 0;
transition: color .2s var(--ease), gap .25s var(--ease);
}
.kx-btn-link:hover{ color:var(--teal-700); gap:10px; }
.kx-btn-link svg{ transition: transform .25s var(--ease); }
.kx-btn-mint{
display:inline-flex; align-items:center; gap:9px;
background:var(--mint); color:var(--ink);
padding:16px 28px; border-radius:999px;
font-size:15.5px; font-weight:700;
transition: background .25s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease);
box-shadow: 0 20px 40px -10px rgba(157,232,181,0.45);
}
.kx-btn-mint:hover{ background:var(--mint-deep); box-shadow:0 24px 52px -8px rgba(157,232,181,0.55); }
.kx-btn-mint svg{ transition: transform .25s var(--ease); }
.kx-btn-mint:hover svg{ transform:translateX(3px); }
/* ============================================================
HERO
============================================================ */
.kx-hero{
position:relative;
padding: 0 0 90px;
overflow:hidden;
background:var(--cream);
}
.kx-hero-aurora{
position:absolute; inset:-10% -5% 30% -5%;
background:
radial-gradient(ellipse at 18% 20%, rgba(24,139,146,0.18), transparent 50%),
radial-gradient(ellipse at 80% 28%, rgba(233,69,69,0.09), transparent 50%),
radial-gradient(ellipse at 50% 60%, rgba(200,242,214,0.5), transparent 50%);
pointer-events:none;
z-index:0;
}
.kx-hero-grain{
position:absolute; inset:0;
background-image:
radial-gradient(circle at 1px 1px, rgba(18,17,17,0.05) 1px, transparent 0);
background-size:24px 24px;
opacity:0.4;
pointer-events:none;
mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 70%);
z-index:0;
}
.kx-hero-ctas{
display:flex; align-items:center; justify-content:center; gap:14px;
flex-wrap:wrap;
}
/* ----- Hero stage with phone ----- */
.kx-hero-stage{
position:relative;
height: 620px;
display:flex; align-items:center; justify-content:center;
}
@media (max-width: 900px){ .kx-hero-stage{ height:520px; } }
@media (max-width: 600px){ .kx-hero-stage{ height:440px; } }
.kx-phone-wrap{
position:relative;
filter: drop-shadow(0 50px 80px rgba(18,17,17,0.25));
}
@keyframes phoneFloat{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-12px); }
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine){
/* Float sólo en desktop con pointer fino y sin reduced-motion */
.kx-phone-wrap{ animation: phoneFloat 6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce){
.kx-phone-wrap{ animation: none !important; }
}
.kx-phone{
width: 300px; height: 600px;
background:#1a1a1a;
border-radius:42px;
padding:11px;
position:relative;
border:1.5px solid #2a2a2a;
}
@media (max-width: 600px){ .kx-phone{ width: 240px; height: 480px; padding:9px; border-radius:34px; } }
.kx-phone-notch{
position:absolute; top:11px; left:50%; transform:translateX(-50%);
width:108px; height:24px; background:#1a1a1a; border-radius:0 0 16px 16px;
z-index:5;
}
.kx-phone-screen{
width:100%; height:100%;
background:linear-gradient(180deg,#FBFAF7 0%, #F2F0EA 100%);
border-radius:32px;
padding:38px 16px 14px;
overflow:hidden;
position:relative;
display:flex; flex-direction:column; gap:10px;
}
.ks-top{ display:flex; justify-content:space-between; align-items:center; padding:0 6px; }
.ks-time{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; }
.ks-status{ display:flex; gap:3px; }
.ks-status span{ width:4px; height:4px; background:var(--ink); border-radius:50%; }
.ks-greet{ padding: 4px 4px 0; }
.ks-greet-hi{ font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; }
.ks-greet-sub{ font-size:11px; color:var(--ink-faint); margin-top:1px; }
.ks-balance{
background:var(--ink); color:var(--white);
border-radius:18px; padding:12px;
position:relative; overflow:hidden;
}
.ks-balance::before{
content:''; position:absolute; right:-30px; top:-30px;
width:100px; height:100px; border-radius:50%;
background: radial-gradient(circle, rgba(200,242,214,0.25), transparent 70%);
}
.ks-bal-label{ font-size:10px; opacity:0.7; }
.ks-bal-val{ font-size:22px; font-weight:700; letter-spacing:-0.025em; margin-top:2px; }
.ks-bal-progress{ height:5px; background:rgba(255,255,255,0.15); border-radius:99px; margin-top:9px; overflow:hidden; }
.ks-bal-fill{ height:100%; background:linear-gradient(90deg, var(--teal-300), var(--mint)); border-radius:99px; }
.ks-bal-meta{ display:flex; justify-content:space-between; margin-top:5px; font-size:9.5px; opacity:0.65; }
.ks-tiles{
display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
padding: 2px 0;
}
.ks-tile{
background:var(--white);
border:1px solid var(--border-soft);
border-radius:12px;
padding:8px 6px;
text-align:center;
}
.ks-tile-ic{ width:18px; height:18px; border-radius:50%; margin:0 auto 4px; background:var(--teal-100); position:relative; }
.ks-tile-ic.ic-fija{ background:var(--mint); }
.ks-tile-ic.ic-var{ background:var(--teal-200); }
.ks-tile-ic.ic-mix{ background:var(--coral-50); }
.ks-tile-ic.ic-sub{ background:var(--cream-soft); }
.ks-tile-l{ font-size:9px; color:var(--ink-faint); }
.ks-tile-v{ font-size:10.5px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; margin-top:1px; }
.ks-list-h{ font-size:10.5px; font-weight:600; color:var(--ink-soft); padding:6px 4px 2px; }
.ks-row{
display:flex; justify-content:space-between; align-items:center;
background:var(--white);
border:1px solid var(--border-soft);
border-radius:14px;
padding:9px 11px;
}
.ks-row-l{ display:flex; align-items:center; gap:9px; }
.ks-row-ic{
width:30px; height:30px; border-radius:9px;
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:12px;
}
.ks-row-t{ font-size:11px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.ks-row-s{ font-size:9.5px; color:var(--ink-faint); margin-top:1px; }
.ks-row-r{ font-size:12.5px; font-weight:800; letter-spacing:-0.02em; }
.ks-row-r.is-pos{ color:var(--teal-600); }
.ks-cta{
margin-top:auto;
background:var(--ink); color:var(--white);
border-radius:14px; padding:11px 0;
text-align:center;
font-size:12px; font-weight:700;
letter-spacing:-0.01em;
}
/* ----- Floating hero cards ----- */
.kx-float-card{
position:absolute;
background:var(--white);
border:1px solid var(--border-soft);
border-radius:18px;
padding:14px 16px;
box-shadow: 0 30px 60px -20px rgba(18,17,17,0.18), 0 2px 6px -1px rgba(18,17,17,0.06);
z-index:2;
transform: rotate(var(--rot, 0deg));
}
@keyframes floatCard{
0%,100%{ transform:translateY(0) rotate(var(--rot, 0deg)); }
50%{ transform:translateY(-9px) rotate(var(--rot, 0deg)); }
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine){
.kx-float-card{ animation: floatCard 6.5s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce){
.kx-float-card{ animation: none !important; }
}
.kx-fc-left{ left:8%; top:14%; --rot:-3deg; width:200px; }
.kx-fc-left-2{ left:10%; top:62%; --rot:-1.5deg; width:185px; animation-delay:-1.5s; }
.kx-fc-right{ right:6%; top:18%; --rot:3deg; width:230px; animation-delay:-2.5s; }
.kx-fc-right-2{ right:9%; top:64%; --rot:1.5deg; width:200px; animation-delay:-1s; }
@media (max-width: 900px){
.kx-fc-left, .kx-fc-left-2{ left:-3%; }
.kx-fc-right, .kx-fc-right-2{ right:-3%; }
}
@media (max-width: 600px){
.kx-fc-left{ top:6%; width:155px; padding:11px 12px; }
.kx-fc-left-2{ top:70%; width:150px; padding:10px 12px; }
.kx-fc-right{ top:8%; width:170px; padding:11px 12px; }
.kx-fc-right-2{ top:74%; width:160px; padding:10px 12px; }
}
.fc-label{ font-size:11px; color:var(--ink-faint); font-weight:500; }
.fc-label-sm{ font-size:10.5px; color:var(--ink-faint); }
.fc-value{ font-size:24px; font-weight:700; letter-spacing:-0.03em; color:var(--ink); margin-top:2px; line-height:1.05; }
.fc-value-sm{ font-size:16px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
.fc-currency{ font-size:14px; color:var(--ink-faint); font-weight:600; margin-right:1px; }
.fc-decimal{ font-size:14px; color:var(--ink-faint); font-weight:600; }
.fc-meta{ display:flex; align-items:center; gap:6px; margin-top:6px; }
.fc-chip{
display:inline-flex; padding:3px 7px; border-radius:999px;
font-size:10.5px; font-weight:700;
background:var(--mint-soft); color:var(--teal-700);
}
.fc-chip.is-good{ background:var(--mint); color:var(--teal-700); }
.fc-sub{ font-size:10.5px; color:var(--ink-faint); }
.fc-banks{ display:flex; margin-top:8px; }
.b-dot{
display:flex; align-items:center; justify-content:center;
width:24px; height:24px; border-radius:50%;
color:#fff; font-size:11px; font-weight:800;
border:2px solid #fff;
margin-left:-6px;
}
.b-dot:first-child{ margin-left:0; }
.b-dot.is-more{ background:var(--cream-soft); color:var(--ink-soft); }
.fc-trend{
display:inline-block; margin-left:6px;
font-size:12px; font-weight:700;
color:var(--teal-600);
}
.fc-row{ display:flex; align-items:center; justify-content:space-between; }
.fc-spark{ display:block; width:100%; height:40px; margin-top:6px; }
.fc-users-stack{ display:flex; align-items:center; margin-bottom:6px; }
.u-av{
width:22px; height:22px; border-radius:50%;
border:2px solid #fff;
margin-left:-6px;
}
.u-av:first-child{ margin-left:0; }
/* ============================================================
BANK STRIP — marquee
============================================================ */
.kx-strip{
padding: 40px 0 56px;
background:transparent;
}
.kx-strip-label{
font-size:12.5px; font-weight:500;
color:var(--ink-faint);
text-align:center;
letter-spacing:0.04em;
text-transform:uppercase;
margin-bottom:30px;
}
.kx-marquee{
overflow:hidden;
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.kx-marquee-track{
display:inline-flex;
align-items:center;
white-space:nowrap;
animation: marqueeScroll 42s linear infinite;
}
.kx-marquee-track img{
height:34px; width:auto;
flex:0 0 auto;
object-fit:contain;
display:block;
margin-right:58px;
}
@media (max-width:600px){
.kx-marquee-track img{ height:28px; margin-right:42px; }
}
@keyframes marqueeScroll{
0%{ transform:translateX(0); }
100%{ transform:translateX(-25%); }
}
/* El marquee de entidades sigue desplazándose (lento, sin parpadeo) aun con
prefers-reduced-motion: scroll continuo a la izquierda, decisión del cliente. */
/* ============================================================
SECTIONS — fondos con profundidad
`content-visibility: auto` evita repintar secciones offscreen
============================================================ */
.kx-section{
position: relative;
padding: 110px 0;
background:
radial-gradient(ellipse at 80% 0%, rgba(24,139,146,0.06) 0%, transparent 45%),
radial-gradient(ellipse at 0% 100%, rgba(233,69,69,0.04) 0%, transparent 45%),
var(--cream);
overflow: hidden;
}
.kx-section::before{
content:''; position:absolute; inset:0; z-index:0;
background-image:
radial-gradient(circle at 1px 1px, rgba(18,17,17,0.035) 1px, transparent 0);
background-size: 22px 22px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
pointer-events: none;
opacity: 0.6;
}
.kx-section > *{ position: relative; z-index: 1; }
.kx-section-soft{
background:
radial-gradient(ellipse at 20% 0%, rgba(200,242,214,0.35) 0%, transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(24,139,146,0.08) 0%, transparent 50%),
var(--cream-soft);
}
@media (max-width: 900px){ .kx-section{ padding: 80px 0; } }
@media (max-width: 600px){ .kx-section{ padding: 64px 0; } }
/* ============================================================
EVERYTHING / FEATURES GRID
============================================================ */
.kx-grid-features{
display:grid;
grid-template-columns: 1.5fr 1fr 1fr;
grid-template-rows: auto auto;
gap:20px;
}
.kx-grid-features > :nth-child(1){ grid-row: span 1; }
.kx-grid-features > :nth-child(4){ grid-column: span 1; }
.kx-grid-features > :nth-child(5){ grid-column: span 2; }
@media (max-width: 900px){
.kx-grid-features{ grid-template-columns: 1fr 1fr; }
.kx-grid-features > :nth-child(5){ grid-column: span 2; }
}
@media (max-width: 600px){
.kx-grid-features{ grid-template-columns: 1fr; }
.kx-grid-features > :nth-child(5){ grid-column: span 1; }
}
.kx-card{
position:relative;
background:var(--white);
border:1px solid var(--border-soft);
border-radius:24px;
padding:28px;
display:flex; flex-direction:column;
transition: transform 240ms var(--ease-out-quart), box-shadow 240ms var(--ease-out-quart), border-color 240ms var(--ease-out-quart);
}
.kx-card:hover{
box-shadow:0 24px 60px -20px rgba(18,17,17,0.16);
border-color:rgba(18,17,17,0.1);
}
.kx-card-ic{
width:42px; height:42px;
display:flex; align-items:center; justify-content:center;
border-radius:12px;
background:var(--mint-soft); color:var(--teal-700);
}
.kx-card-head{ margin-bottom:18px; }
.kx-card-title{
font-size:21px; font-weight:600;
letter-spacing:-0.02em;
color:var(--ink);
line-height:1.2;
}
.kx-card-desc{
font-size:14.5px; line-height:1.55;
color:var(--ink-soft);
margin-top:8px;
}
.kx-card-bullets{
list-style: none;
padding: 0;
margin: 0;
display: flex; flex-direction: column;
gap: 9px;
}
.kx-card-bullets li{
position: relative;
padding-left: 24px;
font-size: 13.5px;
line-height: 1.4;
color: var(--ink-soft);
font-weight: 500;
}
.kx-card-bullets li::before{
content: '';
position: absolute;
left: 0; top: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--teal-50);
background-image: url("data:image/svg+xml;utf8,");
background-size: 10px 10px;
background-position: center;
background-repeat: no-repeat;
}
.kx-card-link{
display:inline-flex; align-items:center; gap:6px;
margin-top:auto; padding-top:18px;
font-size:13.5px; font-weight:600;
color:var(--teal-600);
transition: gap .25s var(--ease);
}
.kx-card-link:hover{ gap:10px; }
.kx-card-link svg{ transition: transform .25s var(--ease); }
/* Chart card */
.kx-card-chart-wrap{
margin-top:6px;
background:var(--mint-soft);
border-radius:18px;
padding:18px 16px 12px;
position:relative;
overflow:hidden;
}
.kxc-title{ font-size:11.5px; font-weight:600; color:var(--teal-700); letter-spacing:0.02em; }
.kxc-value{ font-size:30px; font-weight:700; letter-spacing:-0.03em; color:var(--ink); margin-top:2px; }
.kxc-value span{ font-size:18px; color:var(--ink-faint); font-weight:600; margin-left:1px; }
.kxc-svg{ display:block; width:100%; height:110px; margin-top:10px; }
.kxc-x{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--ink-faint); margin-top:4px; padding: 0 2px; }
/* Stat cards */
.kx-card-stat, .kx-card-spark{ background:var(--white); }
.kx-card-mini-label{ font-size:13px; color:var(--ink-faint); font-weight:500; line-height:1.35; }
.kx-card-mini-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:6px; line-height:1.4; }
.kx-card-mini-val{
display:flex; align-items:baseline; gap:2px;
font-size:32px; font-weight:700;
letter-spacing:-0.03em; color:var(--ink);
margin-top:6px;
}
.kx-card-mini-val > span:first-child{ font-size:22px; color:var(--ink-faint); font-weight:600; margin-right:3px; }
.kxs-decimal{ font-size:20px; color:var(--ink-faint); font-weight:600; }
.kxs-mini{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.kxs-chip{
font-size:11.5px; font-weight:700;
padding:4px 9px; border-radius:999px;
background:var(--mint-soft); color:var(--teal-700);
}
.kxs-chip.is-good{ background:var(--mint); color:var(--teal-700); }
.kxs-meta{ font-size:12px; color:var(--ink-faint); }
.kxs-bars{
display:grid; grid-template-columns:repeat(8,1fr); gap:6px;
align-items:end;
height:90px;
margin-top:auto;
padding-top:24px;
}
.kxs-bars span{
background:var(--mint-soft); border-radius:6px;
transition: background .3s var(--ease);
}
.kxs-bars span.is-active{ background:var(--teal-600); }
.kxs-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.kxs-spark{ display:block; width:100%; height:80px; margin-top:18px; }
/* ============================================================
BUILT TO PROTECT
============================================================ */
.kx-protect-grid{
display:grid;
grid-template-columns: 1.1fr 0.9fr;
gap:48px;
align-items:center;
}
@media (max-width: 900px){
.kx-protect-grid{ grid-template-columns:1fr; gap:36px; }
}
.kx-protect-list{ display:flex; flex-direction:column; gap:10px; }
.kx-protect-row{
display:flex; gap:18px; align-items:flex-start;
padding: 24px;
background:var(--white);
border:1px solid var(--border-soft);
border-radius:20px;
transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart);
}
.kx-protect-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kx-protect-ic{
flex:none;
width:46px; height:46px;
display:flex; align-items:center; justify-content:center;
border-radius:12px;
background:var(--mint-soft); color:var(--teal-700);
}
.kx-protect-title{ font-size:18px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.kx-protect-desc{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin-top:6px; }
.kx-protect-card{
background:var(--white);
border:1px solid var(--border-soft);
border-radius:24px;
padding:30px;
box-shadow:var(--shadow-md);
position:relative;
}
.kpc-head{
padding-bottom:22px; border-bottom:1px dashed var(--border);
margin-bottom:22px;
}
.kpc-label{ font-size:13px; color:var(--ink-faint); }
.kpc-val{ font-size:42px; font-weight:700; letter-spacing:-0.035em; color:var(--ink); margin-top:4px; font-variant-numeric: tabular-nums; line-height:1.05; }
.kpc-vunit{
font-size:13px; font-weight:500;
letter-spacing:0;
color:var(--ink-faint);
margin-top:6px;
}
.kpc-rows{ display:flex; flex-direction:column; gap:18px; }
.kpc-row{
display:grid; grid-template-columns: 1fr auto auto;
gap:14px; align-items:center;
}
.kpc-bar{
display:block;
height:8px; background:var(--mint-soft);
border-radius:999px; overflow:hidden;
min-width:130px;
}
.kpc-bar span{
display:block; height:100%;
background: linear-gradient(90deg, var(--teal-400), var(--teal-600));
border-radius:999px;
}
.kpc-rownum{ font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; }
.kpc-rowtag{ font-size:12.5px; color:var(--ink-faint); }
.kpc-foot{
margin-top:24px; padding-top:18px;
border-top:1px dashed var(--border);
font-size:12px; color:var(--ink-faint);
}
/* ============================================================
SPLIT (mock+text)
============================================================ */
.kx-split{
display:flex; flex-direction:column; gap:36px;
}
.kx-split-block{
display:grid;
grid-template-columns: 1fr 1fr;
gap:48px;
align-items:center;
background:var(--white);
border:1px solid var(--border-soft);
border-radius:28px;
padding:48px;
}
.kx-split-reverse{ direction:rtl; }
.kx-split-reverse > *{ direction:ltr; }
@media (max-width: 900px){
.kx-split-block{ grid-template-columns:1fr; gap:32px; padding:32px; }
.kx-split-reverse{ direction:ltr; }
}
.kx-bullets{ display:flex; flex-direction:column; gap:10px; }
.kxb{
display:flex; align-items:center; gap:10px;
font-size:14.5px; color:var(--ink);
}
.kxb-c{
flex:none;
width:18px; height:18px; border-radius:50%;
background:var(--mint); position:relative;
}
.kxb-c::after{
content:''; position:absolute;
left:5px; top:8px; width:8px; height:4px;
border-left:2px solid var(--teal-700);
border-bottom:2px solid var(--teal-700);
transform:rotate(-45deg);
}
/* Mock revenue */
.kx-mock-revenue{
background:var(--cream-soft);
border-radius:22px;
padding:24px;
position:relative;
}
.kxm-head{ display:flex; justify-content:space-between; align-items:center; }
.kxm-title{ font-size:13px; color:var(--ink-faint); font-weight:500; }
.kxm-pill{
font-size:11px; font-weight:700;
background:var(--ink); color:var(--white);
padding:3px 10px; border-radius:999px;
}
.kxm-val{ font-size:34px; font-weight:700; letter-spacing:-0.035em; margin-top:6px; }
.kxm-val span{ font-size:22px; color:var(--ink-faint); font-weight:600; }
.kxm-bars-svg{ display:block; width:100%; height:140px; margin-top:12px; }
.kxm-card-mini{
background:var(--white); border:1px solid var(--border-soft);
border-radius:14px; padding:14px;
margin-top:14px;
}
.kxm-mini-l{ font-size:11.5px; color:var(--ink-faint); }
.kxm-mini-v{ font-size:18px; font-weight:700; letter-spacing:-0.02em; margin-top:2px; }
.kxm-mini-progress{
height:6px; background:var(--cream-soft); border-radius:99px;
margin-top:8px; overflow:hidden;
}
.kxm-mini-progress span{
display:block; height:100%;
background:linear-gradient(90deg, var(--teal-400), var(--teal-600));
}
/* Mock card */
.kx-mock-card{
display:flex; align-items:center; justify-content:center;
background:var(--cream-soft);
border-radius:22px;
padding:38px 24px;
}
.kxm-card-real{
width:100%; max-width:340px;
background: linear-gradient(135deg, var(--teal-600), var(--teal-700));
color:var(--white);
border-radius:20px;
padding:24px;
box-shadow: 0 30px 60px -20px rgba(23,123,139,0.4);
position:relative;
overflow:hidden;
}
.kxm-card-real::before{
content:''; position:absolute;
right:-40px; top:-40px;
width:140px; height:140px; border-radius:50%;
background: radial-gradient(circle, rgba(200,242,214,0.4), transparent 70%);
}
.kxm-cr-head{ display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
.kxm-cr-label{ font-size:13px; opacity:0.8; font-weight:500; }
.kxm-cr-bank{ font-size:11px; font-weight:700; background:rgba(255,255,255,0.18); padding:3px 9px; border-radius:999px; }
.kxm-cr-num{ font-size:42px; font-weight:700; letter-spacing:-0.035em; margin-top:14px; }
.kxm-cr-num span{ font-size:24px; opacity:0.7; font-weight:600; }
.kxm-cr-meta{ display:flex; justify-content:space-between; font-size:11px; opacity:0.65; margin-top:2px; }
.kxm-cr-progress{ margin-top:18px; }
.kxm-cr-pr-l{ display:flex; justify-content:space-between; font-size:11px; opacity:0.8; }
.kxm-cr-pr-bar{ height:5px; background:rgba(255,255,255,0.18); border-radius:99px; margin-top:5px; overflow:hidden; }
.kxm-cr-pr-bar span{ display:block; height:100%; background:var(--mint); border-radius:99px; }
.kxm-cr-stripe{
display:grid; grid-template-columns:repeat(3,1fr);
gap:8px; margin-top:18px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,0.12);
}
.cr-s-l{ font-size:9.5px; opacity:0.65; }
.cr-s-v{ font-size:12.5px; font-weight:700; letter-spacing:-0.01em; margin-top:1px; }
/* Estudio mockup — comparativa de 3 bancos (split block derecha) */
.kxm-study{
width:100%; max-width:360px;
background: var(--white);
border:1px solid var(--border-soft);
border-radius:20px;
padding:22px 22px 20px;
box-shadow:
0 1px 2px rgba(18,17,17,0.04),
0 30px 60px -24px rgba(14,74,96,0.22);
position:relative;
}
.kxm-study-head{
display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
padding-bottom:18px;
border-bottom:1px solid var(--border-soft);
}
.kxm-study-eyebrow{
font-size:10.5px; font-weight:700;
letter-spacing:0.14em; text-transform:uppercase;
color: var(--teal-600);
}
.kxm-study-title{
font-size:15px; font-weight:700;
letter-spacing:-0.01em;
color: var(--ink);
margin-top:4px;
}
.kxm-study-status{
display:inline-flex; align-items:center; gap:6px;
font-size:11px; font-weight:700;
padding:4px 10px;
border-radius:999px;
background: var(--mint-soft);
color: var(--teal-700);
letter-spacing:0.02em;
}
.kxm-study-status::before{
content:''; width:6px; height:6px; border-radius:50%;
background: var(--mint-deep);
box-shadow: 0 0 0 3px rgba(157,232,181,0.4);
}
.kxm-study-rows{ display:flex; flex-direction:column; margin-top:8px; }
.kxm-study-row{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding: 12px 0;
border-bottom:1px dashed rgba(18,17,17,0.06);
}
.kxm-study-row:last-child{ border-bottom:0; }
.kxm-study-row.is-top{
margin: 6px -10px 0;
padding: 12px 12px;
background: var(--teal-50);
border-radius: 12px;
border:1px solid rgba(24,139,146,0.15);
border-bottom: 1px solid rgba(24,139,146,0.15);
}
.kxm-study-row.is-top + .kxm-study-row{ padding-top:14px; }
.kxm-study-bank{ display:flex; align-items:center; gap:10px; min-width:0; }
.kxm-study-rank{
flex:0 0 24px;
width:24px; height:24px;
display:grid; place-items:center;
border-radius:50%;
background: var(--cream);
border:1px solid var(--border-soft);
font-size:11.5px; font-weight:700;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.kxm-study-row.is-top .kxm-study-rank{
background: var(--teal-600);
border-color: var(--teal-600);
color: #FFFFFF;
}
.kxm-study-bank-info{ min-width:0; }
.kxm-study-bank-n{
font-size:13.5px; font-weight:600;
color: var(--ink);
letter-spacing:-0.005em;
line-height:1.2;
}
.kxm-study-bank-t{
font-size:11px;
color: var(--ink-faint);
margin-top:1px;
}
.kxm-study-tae{ text-align:right; }
.kxm-study-tae-l{
font-size:9.5px; font-weight:700;
letter-spacing:0.14em; text-transform:uppercase;
color: var(--ink-faint);
}
.kxm-study-tae-v{
font-size:15px; font-weight:700;
letter-spacing:-0.01em;
color: var(--ink);
font-variant-numeric: tabular-nums;
margin-top:1px;
}
.kxm-study-row.is-top .kxm-study-tae-v{ color: var(--teal-700); }
.kxm-study-saving{
margin-top:14px;
padding:12px 14px;
background: rgba(24,139,146,0.06);
border-radius:12px;
display:flex; align-items:center; justify-content:space-between; gap:10px;
font-size:12px;
color: var(--ink-soft);
}
.kxm-study-saving strong{
font-size:14px;
font-weight:700;
color: var(--teal-700);
letter-spacing:-0.01em;
font-variant-numeric: tabular-nums;
}
.kxm-study-note{
margin: 14px 0 0;
padding: 12px 14px 0;
border-top: 1px dashed var(--border-soft);
font-size: 10.5px;
line-height: 1.5;
color: var(--ink-faint);
letter-spacing: 0;
}
/* ============================================================
PROCESO
============================================================ */
.kx-process-grid{
display:grid;
grid-template-columns: 1fr 1.15fr;
gap:60px;
align-items:center;
}
@media (max-width: 900px){
.kx-process-grid{ grid-template-columns:1fr; gap:40px; }
}
.kx-process-photo{
position:relative;
border-radius:28px;
overflow:hidden;
aspect-ratio: 4/5;
background:var(--cream-soft);
}
.kx-process-photo img{
width:100%; height:100%; object-fit:cover;
transition: transform 1s var(--ease);
}
.kx-process-photo:hover img{ transform:scale(1.03); }
.kx-pp-card{
position:absolute;
left:18px; bottom:18px;
display:flex; align-items:center; gap:12px;
background:var(--white);
border-radius:16px;
padding:12px 16px;
box-shadow:var(--shadow-md);
}
.kx-pp-ic{
width:36px; height:36px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
background:var(--mint); color:var(--teal-700);
}
.kx-pp-l{ font-size:11.5px; color:var(--ink-faint); }
.kx-pp-v{ font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
.kx-pp-v span{ font-size:12.5px; color:var(--ink-faint); font-weight:500; }
.kx-process-steps{ display:flex; flex-direction:column; gap:14px; }
.kx-step{
display:flex; gap:24px; align-items:flex-start;
padding:24px;
background:var(--white);
border:1px solid var(--border-soft);
border-radius:20px;
transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart);
}
.kx-step:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kx-step-num{
flex:none;
font-size:14px; font-weight:700; letter-spacing:-0.01em;
color:var(--teal-600);
background:var(--mint-soft);
padding:6px 12px; border-radius:10px;
}
.kx-step-t{ font-size:18px; font-weight:600; letter-spacing:-0.02em; }
.kx-step-d{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin-top:6px; }
/* ============================================================
PRICING
============================================================ */
.kx-pricing-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
align-items:stretch;
}
@media (max-width: 900px){ .kx-pricing-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } }
.kx-price-card{
background:var(--white);
border:1px solid var(--border-soft);
border-radius:24px;
padding:32px;
display:flex; flex-direction:column;
transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart);
position:relative;
}
.kx-price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.kx-pc-tag{
display:inline-block;
font-size:13px; font-weight:700;
letter-spacing:0.02em; color:var(--ink-soft);
padding-bottom:6px;
}
.kx-pc-sub{ font-size:13.5px; color:var(--ink-faint); }
.kx-pc-price{ margin-top:22px; padding-bottom:22px; border-bottom:1px dashed var(--border); }
.kx-pc-currency{ font-size:12px; color:var(--ink-faint); font-weight:600; letter-spacing:0.02em; text-transform:uppercase; }
.kx-pc-num{ display:block; font-size:50px; font-weight:700; letter-spacing:-0.045em; color:var(--ink); line-height:1; margin-top:6px; }
.kx-pc-dec{ font-size:30px; color:var(--ink-faint); font-weight:600; }
.kx-pc-unit{ display:block; font-size:12px; color:var(--ink-faint); margin-top:6px; }
.kx-pc-list{ list-style:none; padding:22px 0 0; margin:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.kx-pc-list li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); }
.kx-pc-c{
flex:none;
width:18px; height:18px; border-radius:50%;
background:var(--mint); position:relative;
}
.kx-pc-c::after{
content:''; position:absolute;
left:5px; top:8px; width:8px; height:4px;
border-left:2px solid var(--teal-700);
border-bottom:2px solid var(--teal-700);
transform:rotate(-45deg);
}
.kx-pc-btn{
display:flex; align-items:center; justify-content:center;
margin-top:24px;
padding:14px;
background:var(--cream-soft);
border-radius:14px;
font-size:14.5px; font-weight:600;
color:var(--ink);
transition: background .25s var(--ease), color .25s var(--ease);
}
.kx-pc-btn:hover{ background:var(--ink); color:var(--white); }
.kx-pc-btn-primary{ background:var(--ink); color:var(--white); }
.kx-pc-btn-primary:hover{ background:var(--teal-600); }
/* Popular variant — CORAL premium */
.kx-price-popular{
position:relative;
background: linear-gradient(180deg, var(--coral-500) 0%, var(--coral-600) 100%);
border-color:transparent;
color: var(--white);
transform: scale(1.02);
box-shadow: 0 36px 80px -20px rgba(233,69,69,0.55), 0 2px 6px -1px rgba(0,0,0,0.08);
}
.kx-price-popular::before{
content:''; position:absolute; inset:0;
border-radius: inherit;
background:
radial-gradient(circle at 80% 0%, rgba(255,255,255,0.22), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(0,0,0,0.18), transparent 55%);
pointer-events:none;
}
.kx-price-popular > *{ position:relative; z-index:1; }
.kx-price-popular .kx-pc-tag{ color: rgba(255,255,255,0.92); }
.kx-price-popular .kx-pc-sub{ color: rgba(255,255,255,0.78); }
.kx-price-popular .kx-pc-num,
.kx-price-popular .kx-pc-currency,
.kx-price-popular .kx-pc-unit,
.kx-price-popular .kx-pc-dec{ color: var(--white); }
.kx-price-popular .kx-pc-currency,
.kx-price-popular .kx-pc-unit,
.kx-price-popular .kx-pc-dec{ opacity: 0.78; }
.kx-price-popular .kx-pc-price{ border-bottom-color: rgba(255,255,255,0.22); }
.kx-price-popular .kx-pc-list li{ color: var(--white); }
.kx-price-popular .kx-pc-c{ background: rgba(255,255,255,0.22); }
.kx-price-popular .kx-pc-c::after{ border-color: var(--white); }
.kx-price-popular .kx-pc-btn-primary{
background: var(--white); color: var(--coral-600);
}
.kx-price-popular .kx-pc-btn-primary:hover{ background: var(--ink); color: var(--white); }
@media (hover: hover) and (pointer: fine){
.kx-price-popular:hover{ transform: scale(1.02) translateY(-6px); }
}
.kx-pc-badge{
position:absolute;
top:-12px; left:50%; transform:translateX(-50%);
background:var(--ink); color:var(--white);
font-size:11.5px; font-weight:700;
padding:6px 14px; border-radius:999px;
letter-spacing:0.01em;
z-index: 2;
}
.kx-price-popular .kx-pc-badge{
background: var(--white); color: var(--coral-600);
}
/* ============================================================
TESTIMONIOS
============================================================ */
/* Legacy grid (compat) */
.kx-testi-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media (max-width: 1000px){ .kx-testi-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .kx-testi-grid{ grid-template-columns:1fr; } }
/* Slider scroll-snap */
.kx-testi-slider{
position: relative;
}
.kx-testi-track{
display: flex;
gap: 18px;
overflow-x: auto;
/* scroll-snap-type se activa SOLO tras la 1ª interacción (.snap-ready).
Presente en el primer paint suprime los candidatos LCP de Chrome → NO_LCP
y casca el motor de trazas de Lighthouse. La navegación por flechas/dots usa
scrollTo() en JS, no depende del snap nativo. */
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 4px 4px 12px;
margin: -4px -4px;
}
.kx-testi-track.snap-ready{ scroll-snap-type: x mandatory; }
.kx-testi-track::-webkit-scrollbar{ display: none; }
.kx-testi-slider .kx-testi{
flex: 0 0 calc((100% - 36px) / 3);
scroll-snap-align: start;
}
@media (max-width: 900px){
.kx-testi-slider .kx-testi{ flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 600px){
.kx-testi-slider .kx-testi{ flex: 0 0 calc(100% - 8px); }
}
.kx-testi-nav{
position: absolute;
top: 50%; transform: translateY(-50%);
width: 44px; height: 44px;
display: grid; place-items: center;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 50%;
cursor: pointer;
color: var(--ink);
box-shadow: 0 8px 24px -8px rgba(18,17,17,0.18), 0 1px 2px rgba(18,17,17,0.04);
z-index: 5;
transition: background 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart), color 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart);
}
.kx-testi-nav.kx-testi-prev{ left: -16px; }
.kx-testi-nav.kx-testi-next{ right: -16px; }
@media (hover: hover) and (pointer: fine){
.kx-testi-nav:hover{
background: var(--teal-600);
border-color: var(--teal-600);
color: #FFFFFF;
}
}
.kx-testi-nav:active{ transform: translateY(-50%) scale(0.96); }
.kx-testi-nav[disabled]{
opacity: 0; pointer-events: none;
}
@media (max-width: 700px){
.kx-testi-nav{ display: none; }
}
.kx-testi-dots{
display: flex; justify-content: center; gap: 8px;
margin-top: 18px;
}
.kx-testi-dots span{
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-muted);
opacity: 0.35;
cursor: pointer;
transition: background 220ms var(--ease-out-quart), opacity 220ms var(--ease-out-quart), transform 220ms var(--ease-out-quart);
}
.kx-testi-dots span.is-on{
background: var(--teal-600);
opacity: 1;
transform: scale(1.2);
}
.kx-testi{
background:var(--white);
border:1px solid var(--border-soft);
border-radius:20px;
padding:24px;
display:flex; flex-direction:column; gap:24px;
transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart);
min-height: 240px;
}
.kx-testi:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.kx-testi-quote{
font-size:15px; line-height:1.55;
color:var(--ink);
letter-spacing:-0.01em;
flex:1;
}
.kx-testi-foot{
display:flex; align-items:center; gap:12px;
padding-top:18px; border-top:1px solid var(--border-soft);
}
.kx-testi-av{
width:38px; height:38px; border-radius:50%;
}
.kx-testi-name{ font-size:13.5px; font-weight:700; color:var(--ink); }
.kx-testi-role{ font-size:11.5px; color:var(--ink-faint); margin-top:1px; }
/* ============================================================
BLOG
============================================================ */
.kx-blog-head{
display:flex; justify-content:space-between; align-items:flex-end;
margin-bottom:44px;
flex-wrap:wrap; gap:18px;
}
.kx-blog-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media (max-width: 900px){ .kx-blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .kx-blog-grid{ grid-template-columns:1fr; } }
.kx-blog{
background:var(--white);
border:1px solid var(--border-soft);
border-radius:22px;
overflow:hidden;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.kx-blog:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.kx-blog-img{
width:100%; aspect-ratio: 16/10;
background-size:cover; background-position:center;
transition: transform 500ms var(--ease-out-quart);
}
.kx-blog:hover .kx-blog-img{ transform:scale(1.04); }
.kx-blog-body{ padding:22px; }
.kx-blog-meta{ display:flex; align-items:center; gap:12px; }
.kx-blog-tag{
font-size:11px; font-weight:700;
background:var(--mint-soft); color:var(--teal-700);
padding:3px 9px; border-radius:999px;
letter-spacing:0.02em;
}
.kx-blog-date{ font-size:12px; color:var(--ink-faint); }
.kx-blog-title{
font-size:19px; line-height:1.3; letter-spacing:-0.02em;
font-weight:600; color:var(--ink);
margin-top:14px;
}
.kx-blog-link{
display:inline-flex; align-items:center; gap:6px;
margin-top:18px;
font-size:13.5px; font-weight:600;
color:var(--teal-600);
}
/* ============================================================
FAQ
============================================================ */
.kx-faq-grid{
display:grid; grid-template-columns: 1fr 1.3fr; gap:60px;
align-items:start;
}
@media (max-width: 900px){ .kx-faq-grid{ grid-template-columns:1fr; gap:36px; } }
.kx-faq-list{ display:flex; flex-direction:column; gap:10px; }
.kx-faq{
background:var(--white);
border:1px solid var(--border-soft);
border-radius:18px;
overflow:hidden;
transition: border-color .25s var(--ease);
}
.kx-faq[open]{ border-color: rgba(23,123,139,0.2); box-shadow:0 8px 28px -10px rgba(18,17,17,0.08); }
.kx-faq summary{
list-style:none; cursor:pointer;
display:flex; justify-content:space-between; align-items:center; gap:18px;
padding:20px 22px;
font-size:16px; font-weight:600; letter-spacing:-0.01em;
color:var(--ink);
}
.kx-faq summary::-webkit-details-marker{ display:none; }
.kx-faq-ic{
flex:none;
width:30px; height:30px; border-radius:50%;
background:var(--cream-soft);
display:flex; align-items:center; justify-content:center;
position:relative;
transition: background .25s var(--ease), transform .35s var(--ease);
}
.kx-faq-ic::before, .kx-faq-ic::after{
content:''; position:absolute;
background:var(--ink);
transition: transform .35s var(--ease);
}
.kx-faq-ic::before{ width:12px; height:2px; border-radius:2px; }
.kx-faq-ic::after{ width:2px; height:12px; border-radius:2px; }
.kx-faq[open] .kx-faq-ic{ background:var(--mint); transform:rotate(180deg); }
.kx-faq[open] .kx-faq-ic::after{ transform:scaleY(0); }
.kx-faq-body{
padding: 0 22px 20px;
font-size:14.5px; line-height:1.6;
color:var(--ink-soft);
}
/* ============================================================
CTA DARK
============================================================ */
.kx-cta-dark{
background:var(--ink);
color:var(--white);
border-radius: 28px;
margin: 30px;
padding: 90px 0 100px;
position:relative;
overflow:hidden;
}
@media (max-width: 700px){ .kx-cta-dark{ margin:16px; padding: 60px 0; border-radius:22px; } }
.kx-cta-dark::before{
content:'';
position:absolute; inset:0;
background:
radial-gradient(circle at 20% 30%, rgba(200,242,214,0.15), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(23,123,139,0.18), transparent 50%);
pointer-events:none;
}
.kx-ctad-wrap{
display:grid; grid-template-columns: 1.1fr 0.9fr;
gap:60px; align-items:center;
position:relative; z-index:1;
}
@media (max-width: 900px){ .kx-ctad-wrap{ grid-template-columns:1fr; gap:50px; } }
.kx-ctad-title{
font-size: clamp(34px, 4.5vw, 56px);
line-height: 1.05;
letter-spacing:-0.04em;
font-weight:600;
color:var(--white);
}
.kx-ctad-title em{ font-style:normal; color:var(--coral-500); font-weight:600; }
.kx-ctad-sub{
font-size:16.5px; line-height:1.55;
color:rgba(255,255,255,0.7);
max-width:480px;
}
.kx-ctad-mocks{
position:relative;
height:340px;
}
@media (max-width: 900px){ .kx-ctad-mocks{ height:300px; } }
.kx-ctad-mock{
position:absolute;
background:var(--white);
color:var(--ink);
border-radius:18px;
padding:16px 18px;
box-shadow: 0 30px 60px -10px rgba(0,0,0,0.5);
}
.kx-ctad-mock-1{
top:30px; right:60px;
width:240px;
transform: rotate(-3deg);
animation: floatCard 6s ease-in-out infinite;
}
.kx-ctad-mock-2{
bottom:30px; right:0;
width:280px;
transform: rotate(2.5deg);
animation: floatCard 6.5s ease-in-out infinite;
animation-delay:-2s;
}
.kxcm-l{ font-size:11.5px; color:var(--ink-faint); }
.kxcm-v{ font-size:26px; font-weight:700; letter-spacing:-0.03em; color:var(--ink); margin-top:2px; }
.kxcm-v span{ font-size:18px; color:var(--ink-faint); font-weight:600; }
.kxcm-v.small{ font-size:20px; }
.kxcm-v.small span{ font-size:14px; }
.kxcm-spark{ display:block; width:100%; height:38px; margin-top:6px; }
.kxcm-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kxcm-chip{ font-size:11.5px; font-weight:700; background:var(--teal-50); color:var(--teal-700); padding:3px 9px; border-radius:999px; border:1px solid rgba(24,139,146,0.18); }
.kxcm-bars{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; align-items:end; height:50px; margin-top:10px; }
.kxcm-bars span{ background:var(--cream-soft); border-radius:4px; }
.kxcm-bars span.is-on{ background:var(--teal-600); }
/* ============================================================
FOOTER — teal premium con gradiente y brillo
============================================================ */
.kx-footer{
position:relative;
background:
radial-gradient(ellipse at 20% 0%, rgba(74,181,191,0.35), transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(8,50,63,0.5), transparent 60%),
linear-gradient(160deg, var(--teal-600) 0%, var(--teal-700) 55%, var(--teal-900) 100%);
color: var(--white);
padding: 70px 0 0;
overflow:hidden;
isolation: isolate;
}
.kx-footer::before{
content:''; position:absolute; inset:0; z-index:-1;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
background-size: 24px 24px;
mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
opacity: 0.7;
}
.kx-footer-top{
display:grid; grid-template-columns: 1.2fr 2.4fr; gap:48px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 900px){ .kx-footer-top{ grid-template-columns:1fr; gap:36px; } }
.kx-footer-brand{ max-width: 380px; }
.kx-footer-logo{
height:62px; width:auto; display:block;
}
.kx-footer-tag{
font-size:14.5px; line-height:1.55;
color: rgba(255,255,255,0.72);
margin-top:18px;
}
.kx-footer-social{ display:flex; gap:10px; margin-top:22px; }
.kx-footer-social a{
width:38px; height:38px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,0.1);
color: var(--white);
transition: background 220ms var(--ease-out-quart), color 220ms var(--ease-out-quart), transform 220ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.kx-footer-social a:hover{ background: var(--white); color: var(--teal-700); transform: translateY(-2px); }
}
.kx-footer-cols{
display:grid; grid-template-columns: repeat(4,1fr); gap:36px;
}
@media (max-width: 700px){ .kx-footer-cols{ grid-template-columns: repeat(2,1fr); gap:28px; } }
.kx-footer-h{
font-size:11.5px; font-weight:700;
letter-spacing:0.05em; text-transform:uppercase;
color: var(--mint);
margin-bottom:16px;
}
.kx-footer-cols a{
display:block;
font-size:14.5px; color: rgba(255,255,255,0.75);
padding: 5px 0;
transition: color 200ms var(--ease-out-quart), transform 220ms var(--ease-out-quart);
}
.kx-footer-cols a:hover{ color: var(--white); transform: translateX(3px); }
.kx-footer-fineline{
display:flex; justify-content:space-between;
padding: 22px 0;
font-size:12.5px; color: rgba(255,255,255,0.55);
flex-wrap:wrap; gap:10px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.kx-footer-admin{
display:inline-flex; align-items:center; gap:5px;
margin-left:8px; padding:3px 10px;
border:1px solid rgba(255,255,255,0.2); border-radius:999px;
color: rgba(255,255,255,0.6); text-decoration:none; font-weight:500;
transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.kx-footer-admin svg{ opacity:0.85; }
@media (hover:hover) and (pointer:fine){
.kx-footer-admin:hover{ color:#fff; border-color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.1); }
}
/* ============================================================
FLOATING CTA
============================================================ */
.kx-floating-cta{
position:fixed;
bottom:18px; right:18px;
z-index:55;
display:flex; align-items:center; gap:8px;
background:var(--coral-500); color:var(--white);
padding:14px 22px;
border-radius:999px;
font-size:14px; font-weight:600;
box-shadow:0 16px 40px -8px rgba(233,69,69,0.45);
opacity:0; pointer-events:none;
transform: translateY(20px) scale(0.95);
transition: opacity 240ms var(--ease-out-quart), transform 240ms var(--ease-out-quart), background 200ms var(--ease-out-quart);
}
.kx-floating-cta.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.kx-floating-cta:active{ transform: scale(0.97); }
@media (hover: hover) and (pointer: fine){
.kx-floating-cta:hover{ background:var(--coral-600); }
}
.kx-fc-ic{
width:24px; height:24px; border-radius:50%;
background: rgba(255,255,255,0.22); color:var(--white);
display:flex; align-items:center; justify-content:center;
}
@media (max-width: 600px){
.kx-floating-cta{ bottom:14px; right:14px; padding:12px 18px; font-size:13px; }
}
/* ============================================================
ANIMATIONS — Reveal on scroll
Marketing surface: longer durations OK, ease-out (entrance)
Más visibles: travel 36px, scale 0.94 para .reveal-scale
============================================================ */
.reveal-up, .reveal-left, .reveal-right, .reveal-scale, .kx-eyebrow{
opacity:0;
transform: translate3d(0, 36px, 0);
transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart);
}
/* Solo activamos will-change durante la transición de entrada */
.reveal-up:not(.is-revealed),
.reveal-left:not(.is-revealed),
.reveal-right:not(.is-revealed),
.reveal-scale:not(.is-revealed){
will-change: opacity, transform;
}
.reveal-left{ transform: translate3d(-36px, 0, 0); }
.reveal-right{ transform: translate3d(36px, 0, 0); }
.reveal-scale{ transform: scale(0.94); }
.is-revealed{ opacity:1 !important; transform: translate3d(0,0,0) scale(1) !important; }
/* Headline word stagger — entrance ease-out */
.headline-words{ display:inline-block; }
.headline-words .word{
display:inline-block;
opacity:0;
transition: opacity 600ms var(--ease-out-quart);
}
.headline-words:not(.is-revealed) .word{ will-change: opacity, transform; }
.headline-words.is-revealed .word{ opacity:1; transform: translate3d(0,0,0); }
/* ============================================================
SCROLL PROGRESS BAR
============================================================ */
.kx-progress{
position: fixed; top:0; left:0; right:0; height:3px;
background: transparent;
z-index: 200;
pointer-events:none;
}
.kx-progress-fill{
height:100%; width:100%;
background: linear-gradient(90deg, var(--coral-500) 0%, var(--coral-400) 50%, var(--teal-500) 100%);
transform: scaleX(0);
transform-origin: left center;
}
@media (prefers-reduced-motion: reduce){
.kx-progress-fill{ background: var(--coral-500); }
}
/* ============================================================
EYEBROW DOT PULSE — más vivo
============================================================ */
.kx-eyebrow .dot, .fx-eyebrow::before, .hero-pill .dot{
position:relative;
}
/* dotPulse desactivado por rendimiento (causaba paint en cada eyebrow visible) */
/* ============================================================
AMBIENT — hero blobs slow rotation (no parallax pesado)
============================================================ */
.kx-hero-aurora{
/* ambientShift desactivado por rendimiento (causaba repintar el gradiente cada frame) */
}
@keyframes ambientShift{
0%, 100%{ transform: translate3d(0,0,0) rotate(0deg); }
50%{ transform: translate3d(2%,-1%,0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce){
.kx-hero-aurora{ animation: none; }
}
/* ============================================================
SVG draw-in para charts (cuando entran)
Aplica a .kxc-line, .kpc-bar span, .kxm-mini-progress span
============================================================ */
.kxc-line{
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset 1400ms var(--ease-out-quart);
}
.is-revealed .kxc-line,
.kx-card.is-revealed .kxc-line,
.is-revealed.kxc-line{ stroke-dashoffset: 0; }
/* Activar también para el spark de hero */
.fc-spark path[stroke]{
stroke-dasharray: 400;
stroke-dashoffset: 400;
transition: stroke-dashoffset 1600ms var(--ease-out-quart) 200ms;
}
.is-revealed .fc-spark path[stroke]{ stroke-dashoffset: 0; }
/* Bars en kpc grow */
.kpc-bar span{
transform: scaleX(0);
transform-origin: left center;
transition: transform 1200ms var(--ease-out-quart);
}
.is-revealed .kpc-bar span,
.kx-protect-card.is-revealed .kpc-bar span{ transform: scaleX(1); }
/* kxs-bars grow up */
.kxs-bars span{
transform: scaleY(0.05);
transform-origin: bottom center;
transition: transform 900ms var(--ease-out-quart);
}
.kx-card.is-revealed .kxs-bars span{ transform: scaleY(1); }
.kx-card .kxs-bars span:nth-child(2){ transition-delay: 60ms; }
.kx-card .kxs-bars span:nth-child(3){ transition-delay: 120ms; }
.kx-card .kxs-bars span:nth-child(4){ transition-delay: 180ms; }
.kx-card .kxs-bars span:nth-child(5){ transition-delay: 240ms; }
.kx-card .kxs-bars span:nth-child(6){ transition-delay: 300ms; }
.kx-card .kxs-bars span:nth-child(7){ transition-delay: 360ms; }
.kx-card .kxs-bars span:nth-child(8){ transition-delay: 420ms; }
@media (prefers-reduced-motion: reduce){
.kxc-line, .fc-spark path[stroke], .kpc-bar span, .kxs-bars span{
stroke-dashoffset: 0 !important;
transform: scaleX(1) scaleY(1) !important;
transition: none !important;
}
}
/* ============================================================
CARD HOVER LIFT — más visible (premium feel)
============================================================ */
@media (hover: hover) and (pointer: fine){
.kx-card:hover{
transform: translateY(-6px);
box-shadow: 0 36px 70px -20px rgba(18,17,17,0.22);
border-color: rgba(18,17,17,0.12);
}
.kx-protect-row:hover{ transform: translateY(-4px); }
.kx-testi:hover{ transform: translateY(-5px); }
.kx-blog:hover{ transform: translateY(-6px); box-shadow: 0 36px 70px -20px rgba(18,17,17,0.22); }
.kx-price-card:hover{ transform: translateY(-6px); }
.kx-price-popular:hover{ transform: scale(1.02) translateY(-6px); }
.pros-card:hover{ transform: translateY(-5px); box-shadow: 0 30px 60px -20px rgba(18,17,17,0.18); }
}
/* Tilt card base */
.tilt-card{ transform-style: preserve-3d; transition: transform 200ms var(--ease-out-quart); }
@media (hover: hover) and (pointer: fine){
.tilt-card:hover{ will-change: transform; }
}
/* ============================================================
UTIL
============================================================ */
.kx-section .kx-eyebrow + h2, .kx-section .kx-eyebrow + .kx-h2{ margin-top:18px; }
/* Reduce motion — surgical, NOT blanket.
Disable ALL infinite loops + parallax floats + 3D tilts. */
@media (prefers-reduced-motion: reduce){
.kx-phone-wrap,
.kx-float-card,
.kx-ctad-mock-1,
.kx-ctad-mock-2,
.kx-hero-aurora,
.sim-section::before,
.kx-eyebrow .dot::after,
.hero-pill .dot::after{
animation: none !important;
}
.reveal-up, .reveal-left, .reveal-right{
transform: translate3d(0,8px,0);
transition: opacity 320ms var(--ease-out-quart), transform 320ms var(--ease-out-quart);
}
.headline-words .word{
transform: translateY(8%);
transition: opacity 280ms var(--ease-out-quart), transform 280ms var(--ease-out-quart);
}
}
/* ============================================================
COMPAT — clases legacy de páginas internas (fx-*, deco-blob, form)
============================================================ */
.fx-container{ width:100%; max-width:1240px; margin:0 auto; padding:0 28px; }
@media (max-width: 700px){ .fx-container{ padding:0 20px; } }
.fx-aurora{
position:relative; overflow:hidden;
}
.fx-aurora::before{
content:''; position:absolute; inset:-10% -5% 30% -5%;
background:
radial-gradient(circle at 18% 20%, rgba(24,139,146,0.22), transparent 55%),
radial-gradient(circle at 80% 28%, rgba(233,69,69,0.10), transparent 55%),
radial-gradient(circle at 50% 60%, rgba(200,242,214,0.55), transparent 55%);
filter: blur(8px);
pointer-events:none;
z-index:0;
}
.fx-aurora > *{ position:relative; z-index:1; }
.deco-blob{
position:absolute; border-radius:50%;
filter: blur(60px);
pointer-events:none; z-index:0;
}
.deco-blob.teal{ background: radial-gradient(circle, rgba(24,139,146,0.55), transparent 70%); }
.deco-blob.coral{ background: radial-gradient(circle, rgba(233,69,69,0.45), transparent 70%); }
.fx-eyebrow{
display:flex; width:fit-content; align-items:center; gap:8px;
padding:7px 14px;
background:var(--white);
border:1px solid var(--border);
border-radius:999px;
font-size:12.5px; font-weight:500;
letter-spacing:0.01em;
color:var(--ink-soft);
box-shadow:var(--shadow-sm);
}
/* Variants with explicit Tailwind .inline-flex (centered in text-center parents) */
.fx-eyebrow.inline-flex{ display:inline-flex; width:auto; }
.fx-eyebrow::before{
content:''; width:6px; height:6px; border-radius:50%;
background:var(--teal-500);
box-shadow:0 0 0 4px rgba(24,139,146,0.18);
}
.fx-btn-accent{
display:inline-flex; align-items:center; gap:8px;
background:var(--coral-500); color:var(--white);
padding:14px 24px; border-radius:999px;
font-size:14.5px; font-weight:600;
transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease);
box-shadow:0 12px 26px -8px rgba(233,69,69,0.45);
position:relative; overflow:hidden;
}
.fx-btn-accent:hover{ background:var(--coral-600); transform:translateY(-2px); }
.fx-btn-accent > *{ position:relative; z-index:1; }
.fx-btn-primary{
display:inline-flex; align-items:center; gap:8px;
background:var(--ink); color:var(--white);
padding:14px 24px; border-radius:999px;
font-size:14.5px; font-weight:600;
transition: background .25s var(--ease), transform .15s var(--ease);
box-shadow:0 12px 26px -8px rgba(18,17,17,0.35);
}
.fx-btn-primary:hover{ background:var(--teal-700); transform:translateY(-2px); }
.fx-btn-primary > *{ position:relative; z-index:1; }
.fx-btn-ghost{
display:inline-flex; align-items:center; gap:9px;
background:var(--white); color:var(--ink);
padding:14px 22px; border-radius:999px;
font-size:14.5px; font-weight:600;
border:1px solid var(--border);
box-shadow:var(--shadow-sm);
transition: background .25s var(--ease);
}
.fx-btn-ghost:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.font-display{
font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
letter-spacing: -0.04em;
}
/* Service / hipoteca cards */
.fx-service-card{
display:block;
background:var(--white);
border:1px solid var(--border-soft);
border-radius:24px;
padding:32px;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.fx-service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(18,17,17,0.1); }
/* Contact form */
.contact-form-card{
background:var(--white);
border:1px solid var(--border-soft);
border-radius:24px;
padding:36px;
box-shadow:var(--shadow-md);
}
@media (max-width: 600px){ .contact-form-card{ padding:24px; border-radius:20px; } }
.form-label{
display:block;
font-size:12.5px; font-weight:600;
letter-spacing:0.02em; text-transform:uppercase;
color:var(--ink-soft);
margin-bottom:8px;
}
.form-input, .form-textarea, .form-select, .fx-input, .fx-textarea, .fx-select-source{
width:100%;
background:var(--cream);
border:1px solid var(--border);
border-radius:12px;
padding:14px 16px;
font-size:15px;
font-family:inherit;
color:var(--ink);
transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.form-input:focus, .form-textarea:focus, .form-select:focus, .fx-input:focus, .fx-textarea:focus, .fx-select-source:focus{
outline:none;
border-color: var(--teal-500);
background:var(--white);
box-shadow: 0 0 0 4px rgba(24,139,146,0.12);
}
.form-textarea, .fx-textarea{ resize:vertical; min-height:120px; }
/* Form radio group como pills (¿Qué necesitas?) */
.form-radios{
display:flex; flex-wrap:wrap; gap:8px;
margin-top:2px;
}
.form-radio{
position:relative;
display:inline-flex; align-items:center;
cursor:pointer;
}
.form-radio input[type="radio"]{
position:absolute;
opacity:0; width:1px; height:1px;
pointer-events:none;
}
.form-radio > span{
display:inline-flex; align-items:center;
padding:9px 16px;
background: var(--cream);
border:1px solid var(--border);
border-radius:999px;
font-size:13.5px; font-weight:500;
color: var(--ink-soft);
letter-spacing:-0.005em;
transition: background 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart), color 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart), transform 150ms var(--ease-out-quart);
user-select:none;
}
@media (hover:hover) and (pointer:fine){
.form-radio:hover > span{
background: var(--white);
border-color: rgba(24,139,146,0.35);
color: var(--ink);
}
}
.form-radio input[type="radio"]:checked + span{
background: var(--teal-700);
border-color: var(--teal-700);
color:#FFFFFF;
font-weight:600;
box-shadow: 0 6px 16px -8px rgba(14,74,96,0.4);
}
.form-radio input[type="radio"]:focus-visible + span{
outline:2px solid var(--teal-500);
outline-offset:3px;
}
.form-radio:active > span{ transform: scale(0.97); }
/* Custom checkbox (LOPD) */
.form-check{
display:flex; align-items:flex-start; gap:10px;
}
.form-check input[type="checkbox"]{
appearance:none; -webkit-appearance:none;
flex:0 0 18px;
width:18px; height:18px;
margin-top:2px;
background: var(--white);
border:1.5px solid var(--border);
border-radius:5px;
cursor:pointer;
display:grid; place-items:center;
transition: background 180ms var(--ease-out-quart), border-color 180ms var(--ease-out-quart);
position:relative;
}
.form-check input[type="checkbox"]:hover{ border-color: var(--teal-500); }
.form-check input[type="checkbox"]:checked{
background: var(--teal-600);
border-color: var(--teal-600);
}
.form-check input[type="checkbox"]:checked::after{
content:"";
width:10px; height:10px;
background-image: url("data:image/svg+xml;utf8,");
background-size:contain; background-repeat:no-repeat;
}
.form-check input[type="checkbox"]:focus-visible{
outline:2px solid var(--teal-500);
outline-offset:2px;
}
.form-check label{
font-size:13px; line-height:1.45;
color: var(--ink-soft);
cursor:pointer;
}
.form-check label a{ color: var(--teal-700); text-decoration:underline; text-underline-offset:2px; }
/* ============================================================
SIMULADOR V2 — Result panel con tabs Fija/Mixta/Variable,
barra de composición apilada, breakdown más limpio
============================================================ */
.sim-result-v2{
position:relative;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 28px;
padding: 26px 26px 22px;
box-shadow:
0 1px 2px rgba(18,17,17,0.04),
0 24px 60px -28px rgba(18,17,17,0.18);
display:flex; flex-direction:column;
gap:22px;
}
@media (max-width: 700px){ .sim-result-v2{ padding: 22px; border-radius: 22px; } }
/* Tabs Fija / Mixta / Variable */
.sim-modo-tabs{
display:grid; grid-template-columns: 1fr 1fr 1fr;
gap:6px;
padding:5px;
background: var(--cream);
border:1px solid var(--border-soft);
border-radius:14px;
}
.sim-modo-tab{
position:relative;
display:flex; align-items:center; justify-content:center;
cursor:pointer;
padding:9px 8px;
border-radius:10px;
font-size:14px; font-weight:600;
color: var(--ink-soft);
letter-spacing:-0.005em;
transition: background 220ms var(--ease-out-quart), color 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart), transform 150ms var(--ease-out-quart);
user-select:none;
}
.sim-modo-tab input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
@media (hover:hover) and (pointer:fine){
.sim-modo-tab:not(.is-on):hover{ color: var(--ink); background: rgba(255,255,255,0.6); }
}
.sim-modo-tab:active{ transform: scale(0.98); }
.sim-modo-tab.is-on{
background: var(--white);
color: var(--teal-700);
box-shadow:
0 1px 3px rgba(18,17,17,0.08),
0 4px 12px -4px rgba(14,74,96,0.15),
inset 0 0 0 1px rgba(24,139,146,0.18);
}
.sim-modo-tab.is-on::after{
content:''; position:absolute; bottom:-5px; left:50%;
transform: translateX(-50%);
width:24px; height:2px;
background: var(--teal-600);
border-radius:2px;
}
.sim-modo-hint-v2{
margin:-6px 4px 0;
font-size:13px;
color: var(--ink-soft);
line-height:1.45;
}
/* Big cuota block */
.sim-cuota-block{
padding: 2px 4px 8px;
border-bottom: 1px dashed var(--border);
}
.sim-cuota-label{
font-size:11px; font-weight:700;
letter-spacing:0.16em; text-transform:uppercase;
color: var(--ink-faint);
}
.sim-cuota-num{
margin-top:6px;
font-size: clamp(40px, 6vw, 60px);
font-weight:700;
letter-spacing:-0.045em;
line-height:0.98;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.sim-cuota-num .unit{
font-size: 0.4em;
font-weight:600;
color: var(--ink-faint);
margin-left: 4px;
letter-spacing:-0.02em;
}
.sim-cuota-meta{
margin-top:10px;
font-size:13px;
color: var(--ink-soft);
}
.sim-cuota-meta strong{ color: var(--ink); font-weight:600; font-variant-numeric: tabular-nums; }
/* Composition stacked bar */
.sim-composition{ padding: 0 4px; }
.sim-composition-h{
font-size:11px; font-weight:700;
letter-spacing:0.14em; text-transform:uppercase;
color: var(--ink-faint);
margin-bottom:10px;
}
.sim-composition-bar{
display:flex;
width:100%;
height:12px;
background: var(--cream-soft);
border-radius:999px;
overflow:hidden;
gap:2px;
}
.sim-comp-seg{
height:100%;
transition: width 360ms var(--ease-out-quart);
display:block;
}
.sim-comp-seg.sim-comp-entrada{ background: var(--coral-500); }
.sim-comp-seg.sim-comp-prestamo{ background: var(--teal-600); }
.sim-comp-seg.sim-comp-gastos{ background: var(--mint-deep); }
.sim-composition-legend{
display:flex; flex-wrap:wrap; gap: 8px 16px;
margin-top:12px;
}
.sim-legend-item{
display:inline-flex; align-items:center; gap:7px;
font-size:12.5px;
color: var(--ink-soft);
}
.sim-legend-item strong{
color: var(--ink);
font-weight:600;
font-variant-numeric: tabular-nums;
margin-left:2px;
}
.sim-legend-item .dot{
width:9px; height:9px; border-radius:50%;
display:inline-block;
flex:0 0 auto;
}
.sim-legend-item .dot.sim-comp-entrada{ background: var(--coral-500); }
.sim-legend-item .dot.sim-comp-prestamo{ background: var(--teal-600); }
.sim-legend-item .dot.sim-comp-gastos{ background: var(--mint-deep); }
/* Breakdown rows */
.sim-breakdown{
background: var(--cream);
border:1px solid var(--border-soft);
border-radius:16px;
padding:18px 18px 8px;
}
.sim-breakdown-h{
display:flex; align-items:baseline; justify-content:space-between; gap:10px;
padding-bottom:14px;
border-bottom:1px solid var(--border-soft);
}
.sim-breakdown-h > span:first-child{
font-size:11px; font-weight:700;
letter-spacing:0.14em; text-transform:uppercase;
color: var(--ink-faint);
}
.sim-breakdown-h-v{
font-size:18px;
font-weight:700;
letter-spacing:-0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.sim-bd-rows{ display:flex; flex-direction:column; }
.sim-bd-row{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:11px 0;
border-bottom:1px solid var(--border-soft);
font-size:14px;
}
.sim-bd-row:last-child{ border-bottom:0; }
.sim-bd-l{
display:inline-flex; align-items:center; gap:9px;
color: var(--ink-soft);
min-width:0;
}
.sim-bd-l .dot{
width:8px; height:8px; border-radius:50%;
flex:0 0 auto;
display:inline-block;
}
.sim-bd-l .dot.sim-comp-entrada{ background: var(--coral-500); }
.sim-bd-l .dot.sim-comp-gastos{ background: var(--mint-deep); }
/* ============================================================
COMPARATIVA — Quetzal vs Tu banco
============================================================ */
.kx-vs{
position: relative;
max-width: 880px;
margin: 0 auto;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 24px;
box-shadow:
0 1px 2px rgba(18,17,17,0.04),
0 30px 70px -28px rgba(14,74,96,0.22);
overflow: hidden;
}
.kx-vs-head{
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
align-items: center;
padding: 20px 26px;
background:
radial-gradient(ellipse at 50% 50%, rgba(24,139,146,0.06), transparent 65%),
linear-gradient(180deg, var(--cream-soft), var(--white));
border-bottom: 1px solid var(--border-soft);
}
.kx-vs-col{
text-align: center;
font-size: 15px;
letter-spacing: -0.01em;
}
.kx-vs-col-q{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 700;
color: var(--teal-700);
position: relative;
letter-spacing: -0.015em;
}
.kx-vs-col-q::before{
content: '';
width: 9px; height: 9px;
border-radius: 50%;
background: var(--teal-600);
box-shadow: 0 0 0 4px rgba(24,139,146,0.2), 0 0 0 8px rgba(24,139,146,0.06);
}
.kx-vs-col-b{
font-weight: 500;
color: var(--ink-faint);
}
.kx-vs-rows{ display: flex; flex-direction: column; }
.kx-vs-row{
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
align-items: center;
padding: 18px 24px;
border-bottom: 1px solid var(--border-soft);
transition: background 220ms var(--ease-out-quart);
}
.kx-vs-row:last-child{ border-bottom: 0; }
@media (hover: hover) and (pointer: fine){
.kx-vs-row:hover{ background: rgba(24,139,146,0.03); }
}
.kx-vs-row-l{
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.35;
padding-right: 12px;
}
.kx-vs-cell{
width: 36px; height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0 auto;
transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart);
}
.kx-vs-row:hover .kx-vs-cell.kx-vs-yes{
transform: scale(1.08);
box-shadow: 0 8px 20px -6px rgba(14,74,96,0.45), inset 0 1px 0 rgba(255,255,255,0.22);
}
.kx-vs-cell.kx-vs-yes{
background: linear-gradient(140deg, var(--teal-500) 0%, var(--teal-600) 60%, var(--teal-700) 100%);
color: #FFFFFF;
box-shadow:
0 4px 14px -4px rgba(14,74,96,0.4),
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 -1px 0 rgba(0,0,0,0.08);
}
.kx-vs-cell.kx-vs-no{
background: var(--cream-soft);
color: var(--ink-muted, #B8BEC6);
border: 1px solid var(--border-soft);
}
.kx-vs-cell svg{
display: block;
width: 14px;
height: 14px;
margin: auto;
}
.kx-vs-cell.kx-vs-no svg{
width: 12px;
height: 12px;
}
/* Mobile: compact header + tighter rows */
@media (max-width: 700px){
.kx-vs-head,
.kx-vs-row{
grid-template-columns: 1fr 56px 56px;
gap: 12px;
padding: 14px 18px;
}
.kx-vs-col{ font-size: 12.5px; }
.kx-vs-col-q::before{
width: 6px; height: 6px;
box-shadow: 0 0 0 3px rgba(24,139,146,0.18);
}
.kx-vs-row-l{
font-size: 14px;
padding-right: 0;
line-height: 1.35;
}
.kx-vs-cell{ width: 30px; height: 30px; }
}
@media (max-width: 500px){
.kx-vs-head,
.kx-vs-row{ padding: 14px 16px; gap: 10px; grid-template-columns: 1fr 48px 48px; }
.kx-vs-row-l{ font-size: 13.5px; line-height: 1.3; }
}
.sim-bd-tag{
font-size:11.5px;
color: var(--ink-faint);
margin-left:2px;
font-weight:500;
}
.sim-bd-v{
font-weight:600;
color: var(--ink);
font-variant-numeric: tabular-nums;
font-size:14px;
white-space:nowrap;
}
/* Total a devolver al banco */
.sim-total-row{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding: 4px 4px 0;
}
.sim-total-l{
font-size:13px;
color: var(--ink-soft);
font-weight:500;
}
.sim-total-v{
font-size:18px;
font-weight:700;
letter-spacing:-0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
/* CTA */
.sim-cta-btn{
display:inline-flex; align-items:center; justify-content:center;
gap:8px;
width:100%;
padding:15px 22px;
background: var(--coral-500);
color:#FFFFFF;
font-size:15px; font-weight:600;
letter-spacing:-0.005em;
border-radius:14px;
text-decoration:none;
box-shadow: 0 14px 30px -10px rgba(233,69,69,0.45), 0 1px 2px rgba(193,48,48,0.18);
transition: background 220ms var(--ease-out-quart), transform 200ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart);
}
.sim-cta-btn svg{ transition: transform 220ms var(--ease-out-quart); }
@media (hover:hover) and (pointer:fine){
.sim-cta-btn:hover{
background: var(--coral-600);
transform: translateY(-2px);
box-shadow: 0 20px 40px -10px rgba(233,69,69,0.55), 0 1px 2px rgba(193,48,48,0.2);
}
.sim-cta-btn:hover svg{ transform: translateX(3px); }
}
.sim-cta-btn:active{ transform: scale(0.98); }
.sim-disclaimer-v2{
font-size:11.5px;
color: var(--ink-faint);
line-height:1.5;
padding: 0 4px;
}
/* Hero pill (legacy) */
.hero-pill{
display:inline-flex; align-items:center; gap:8px;
padding:7px 14px;
background:var(--white);
border:1px solid var(--border);
border-radius:999px;
font-size:12.5px; font-weight:500;
color:var(--ink-soft);
box-shadow:var(--shadow-sm);
}
.hero-pill .dot{
width:6px; height:6px; border-radius:50%;
background:var(--teal-500);
box-shadow:0 0 0 4px rgba(24,139,146,0.18);
}
/* Hero grain / grid legacy */
.hero-grain, .hero-grid{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-grain{
background-image: radial-gradient(circle at 1px 1px, rgba(18,17,17,0.05) 1px, transparent 0);
background-size:24px 24px; opacity:0.4;
mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 70%);
}
.hero-grid{
background-image:
linear-gradient(to right, rgba(18,17,17,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(18,17,17,0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.4) 30%, transparent);
}
/* Stagger helpers */
.stagger-1{ transition-delay:.08s; }
.stagger-2{ transition-delay:.16s; }
.stagger-3{ transition-delay:.24s; }
.stagger-4{ transition-delay:.32s; }
/* Section + hero spacings */
.hero-section{ padding: 110px 0 70px; position:relative; overflow:hidden; }
@media (max-width: 700px){ .hero-section{ padding: 80px 0 50px; } }
.fx-section{ padding: 100px 0; position:relative; overflow:hidden; }
@media (max-width: 700px){ .fx-section{ padding: 70px 0; } }
/* Back link */
.back-link{
display:flex; width:fit-content; align-items:center; gap:6px;
font-size:13px; font-weight:600; color:var(--ink-faint);
padding:7px 12px; border-radius:999px;
background: var(--white); border: 1px solid var(--border-soft);
transition: color 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart), background 200ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.back-link:hover{ color: var(--teal-600); border-color: var(--teal-200); background: var(--teal-50); }
}
/* Subpage hero photo */
.subpage-hero-photo{
position:relative;
border-radius: 28px;
overflow:hidden;
aspect-ratio: 4/5;
background: var(--cream-soft);
box-shadow: 0 30px 80px -20px rgba(18,17,17,0.18);
}
.subpage-hero-photo img{
width:100%; height:100%; object-fit:cover; display:block;
transition: transform 600ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.subpage-hero-photo:hover img{ transform: scale(1.04); }
}
.hero-photo-tag{
position:absolute; top:18px; left:18px; z-index:2;
font-size:11px; font-weight:700;
background: var(--mint); color: var(--teal-700);
padding: 6px 11px; border-radius: 999px;
letter-spacing: 0.01em;
}
/* Pros / feature card */
.pros-card{
background: var(--white);
border:1px solid var(--border-soft);
border-radius: 22px;
padding: 28px 26px;
transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart), border-color 220ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.pros-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(18,17,17,0.1); }
}
.pros-icon{
width: 46px; height: 46px;
border-radius: 12px;
display:flex; align-items:center; justify-content:center;
margin-bottom: 16px;
}
.pros-icon.teal{ background: var(--mint-soft); color: var(--teal-700); }
.pros-icon.coral{ background: var(--coral-50); color: var(--coral-500); }
.pros-title{
font-size: 18px; font-weight: 600;
letter-spacing: -0.02em; color: var(--ink);
margin-bottom: 6px;
}
.pros-desc{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
/* Checklist (para quién) */
.checklist{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column; gap:14px;
}
.checklist li{
display:flex; align-items:flex-start; gap: 14px;
padding: 16px 18px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 16px;
font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
}
.checklist li > div strong{ color: var(--ink); font-weight: 600; }
.checklist li .dot{
flex:none;
width: 22px; height: 22px; border-radius:50%;
background: var(--mint);
position: relative;
margin-top: 1px;
}
.checklist li .dot::after{
content:''; position:absolute;
left:6px; top:9px; width:10px; height:5px;
border-left: 2px solid var(--teal-700);
border-bottom: 2px solid var(--teal-700);
transform: rotate(-45deg);
}
/* ============================================================
NOSOTROS — valores, equipo, números
============================================================ */
.valor-card{
position:relative;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 22px;
padding: 30px 28px;
overflow:hidden;
transition: transform 240ms var(--ease-out-quart), box-shadow 240ms var(--ease-out-quart), border-color 240ms var(--ease-out-quart);
}
.valor-card::before{
content:''; position:absolute; inset:0;
background: radial-gradient(circle at 100% 0%, rgba(24,139,146,0.06), transparent 60%);
pointer-events:none;
}
@media (hover: hover) and (pointer: fine){
.valor-card:hover{ transform: translateY(-6px); box-shadow: 0 32px 70px -20px rgba(18,17,17,0.18); border-color: rgba(18,17,17,0.1); }
}
.valor-icon{
width: 46px; height: 46px;
border-radius: 12px;
display:flex; align-items:center; justify-content:center;
margin-bottom: 18px;
position:relative;
}
.valor-icon.teal{ background: var(--mint-soft); color: var(--teal-700); }
.valor-icon.coral{ background: var(--coral-50); color: var(--coral-500); }
.valor-title{
font-size: 19px; font-weight: 600;
letter-spacing: -0.02em; color: var(--ink);
margin-bottom: 8px;
}
.valor-desc{ font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
/* Equipo */
.team-card{
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 24px;
overflow:hidden;
transition: transform 240ms var(--ease-out-quart), box-shadow 240ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.team-card:hover{ transform: translateY(-6px); box-shadow: 0 32px 70px -20px rgba(18,17,17,0.18); }
}
.team-photo{
position:relative;
aspect-ratio: 4 / 3;
background: var(--cream-soft);
overflow:hidden;
}
.team-photo img{
width:100%; height:100%; object-fit:cover; display:block;
transition: transform 600ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.team-card:hover .team-photo img{ transform: scale(1.04); }
}
.team-body{ padding: 22px 24px 26px; }
.team-name{ font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.team-role{
display:inline-block;
font-size: 11.5px; font-weight: 600;
background: var(--mint-soft); color: var(--teal-700);
padding: 3px 9px; border-radius: 999px;
margin-top: 6px;
letter-spacing: 0.01em;
}
.team-bio{ font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; }
/* Números */
.num-card{
position:relative; overflow:hidden;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 22px;
padding: 30px 24px;
text-align: left;
transition: transform 240ms var(--ease-out-quart), box-shadow 240ms var(--ease-out-quart);
}
.num-card::after{
content:''; position:absolute; left:-30px; bottom:-30px;
width: 120px; height: 120px; border-radius:50%;
background: radial-gradient(circle, rgba(200,242,214,0.5), transparent 70%);
pointer-events:none;
}
.num-card:nth-child(even)::after{
background: radial-gradient(circle, rgba(233,69,69,0.10), transparent 70%);
}
@media (hover: hover) and (pointer: fine){
.num-card:hover{ transform: translateY(-4px); box-shadow: 0 28px 60px -20px rgba(18,17,17,0.18); }
}
.num-value{
font-size: clamp(40px, 5vw, 60px);
font-weight: 700;
letter-spacing: -0.045em;
color: var(--ink);
line-height: 1;
position:relative; z-index:1;
}
.num-value span{ font-size: 0.6em; color: var(--teal-600); margin-left: 2px; }
.num-label{
font-size: 13px; color: var(--ink-soft);
margin-top: 12px; line-height: 1.45;
position:relative; z-index:1;
}
/* Q&A blocks — button-based (.faq-q + .faq-a, toggled via .is-open) */
.faq-item{
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 18px;
overflow: hidden;
margin-bottom: 10px;
transition: border-color 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart);
}
.faq-item.is-open{
border-color: rgba(23,123,139,0.2);
box-shadow: 0 8px 28px -10px rgba(18,17,17,0.08);
}
.faq-q{
width: 100%;
display: flex; justify-content: space-between; align-items: center; gap: 18px;
padding: 20px 22px;
font-size: 15.5px; font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: color 200ms var(--ease-out-quart);
}
.faq-q svg{
flex: none;
color: var(--ink-faint);
background: var(--cream-soft);
border-radius: 50%;
padding: 7px;
width: 30px; height: 30px;
box-sizing: border-box;
transition: transform 280ms var(--ease-out-quart), background 220ms var(--ease-out-quart), color 220ms var(--ease-out-quart);
}
.faq-item.is-open .faq-q svg{
transform: rotate(180deg);
background: var(--mint);
color: var(--teal-700);
}
.faq-a{
max-height: 0;
overflow: hidden;
padding: 0 22px;
font-size: 14.5px; line-height: 1.6;
color: var(--ink-soft);
transition: max-height 350ms var(--ease-out-quart), padding 200ms var(--ease-out-quart);
}
.faq-item.is-open .faq-a{
max-height: 600px;
padding: 0 22px 20px;
}
.faq-a a{ color: var(--teal-600); text-decoration: underline; }
.faq-a a:hover{ color: var(--teal-700); }
/* ============================================================
SIMULADOR — kx-style premium
============================================================ */
/* ============================================================
SIMULADOR — fondo cream + aurora (idéntico al hero del index)
============================================================ */
.sim-section{
position:relative;
background: var(--cream);
color: var(--ink);
overflow:hidden;
isolation: isolate;
}
.sim-section::before{
content:''; position:absolute; inset:-10% -5% 0 -5%; z-index:-2;
background:
radial-gradient(circle at 18% 20%, rgba(24,139,146,0.22), transparent 55%),
radial-gradient(circle at 80% 28%, rgba(233,69,69,0.10), transparent 55%),
radial-gradient(circle at 50% 60%, rgba(200,242,214,0.55), transparent 55%);
filter: blur(8px);
pointer-events:none;
/* ambientShift desactivado por rendimiento (causaba repintar el gradiente cada frame) */
}
.sim-section::after{
content:''; position:absolute; inset:0; z-index:-1;
background-image:
radial-gradient(circle at 1px 1px, rgba(18,17,17,0.05) 1px, transparent 0);
background-size:24px 24px;
opacity:0.4;
pointer-events:none;
mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 70%);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 70%);
}
.sim-section .deco-blob{ display: none; }
.sim-section .fx-container{ position:relative; z-index:1; }
/* Hero del simulador igual que el del index — ink + teal */
.sim-section .sim-hero-title{ color: var(--ink); }
.sim-section .sim-hero-title em{ color: var(--teal-600); font-weight: 500; font-style: normal; }
.sim-section .sim-hero-sub{ color: var(--ink-soft); }
.sim-section .sim-hero-sub strong{ color: var(--ink); font-weight: 700; }
.sim-section .kx-eyebrow.is-dark{
background: var(--white);
border-color: var(--border);
color: var(--ink-soft);
box-shadow: var(--shadow-sm);
}
.sim-section .kx-eyebrow.is-dark .dot{
background: var(--teal-500);
box-shadow: 0 0 0 4px rgba(24,139,146,0.18);
}
.sim-header{
display:flex; align-items:center; justify-content:space-between; gap:18px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 22px;
padding: 16px 20px;
flex-wrap:wrap;
box-shadow: 0 8px 24px -8px rgba(18,17,17,0.08);
}
.sim-header-brand{ display:flex; align-items:center; gap:14px; }
.sim-header-icon{
width:44px; height:44px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
background: var(--mint-soft); color: var(--teal-700);
}
.sim-header-title{ font-size:15px; font-weight:700; letter-spacing:-0.01em; color: var(--ink); }
.sim-header-sub{ font-size:12px; color: var(--ink-faint); margin-top:2px; }
.sim-header-links{
display:inline-flex; flex-wrap:wrap; gap:6px;
}
.sim-header-link{
display:inline-flex; align-items:center;
padding:9px 14px;
border-radius:999px;
font-size:12.5px; font-weight:600;
color: var(--ink-soft);
background: var(--cream-soft);
border:1px solid var(--border-soft);
text-decoration:none;
transition: background 200ms var(--ease-out-quart), color 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.sim-header-link:hover{
background: var(--white);
color: var(--teal-700);
border-color: rgba(24,139,146,0.3);
}
}
/* Card principal de la calculadora — soft, blanca con sombra elevada */
.sim-card{
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 28px;
padding: 36px;
box-shadow: 0 32px 80px -24px rgba(18,17,17,0.18), 0 4px 12px -4px rgba(18,17,17,0.06);
color: var(--ink);
}
@media (max-width: 700px){ .sim-card{ padding: 24px; border-radius: 22px; } }
/* Cada bloque del form como sub-card sutil */
.sim-field{
background: var(--cream);
border: 1px solid var(--border-soft);
border-radius: 18px;
padding: 18px 20px;
transition: border-color 220ms var(--ease-out-quart), background 220ms var(--ease-out-quart);
}
.sim-field:focus-within{
border-color: var(--teal-300);
background: var(--white);
}
/* Labels más limpias */
.sim-label{
display:flex; align-items:center; justify-content:space-between;
gap: 12px;
margin-bottom: 12px;
}
.sim-label-l{
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-faint);
}
.sim-label-v{
font-size: 18px; font-weight: 700;
letter-spacing: -0.025em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.sim-label-v .accent{ color: var(--teal-600); }
.sim-card .text-ink-faint{ color: var(--ink-faint); }
.sim-card .text-ink{ color: var(--ink); }
.sim-card .text-coral{ color: var(--coral-500); }
.sim-card .text-quetzal{ color: var(--teal-600); }
/* Range slider — track con gradient, thumb premium */
.sim-range{
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: transparent;
outline: none;
margin: 4px 0 0;
cursor: pointer;
--val: 50%;
}
.sim-range::-webkit-slider-runnable-track{
height: 8px; border-radius: 99px;
background:
linear-gradient(90deg, var(--teal-500) 0%, var(--teal-600) var(--val), transparent var(--val)),
var(--cream-soft);
}
.sim-range::-moz-range-track{ height: 8px; border-radius: 99px; background: var(--cream-soft); }
.sim-range::-moz-range-progress{ height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--teal-500), var(--teal-600)); }
.sim-range::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width: 24px; height: 24px;
background: var(--white);
border: 3px solid var(--teal-600);
border-radius: 50%;
margin-top: -8px;
box-shadow: 0 6px 16px -2px rgba(23,123,139,0.45);
transition: transform 140ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart);
cursor: grab;
}
.sim-range::-webkit-slider-thumb:hover{ box-shadow: 0 8px 22px -2px rgba(23,123,139,0.55); }
.sim-range::-webkit-slider-thumb:active{ transform: scale(1.15); cursor: grabbing; }
.sim-range::-moz-range-thumb{
width: 24px; height: 24px;
background: var(--white);
border: 3px solid var(--teal-600);
border-radius: 50%;
box-shadow: 0 6px 16px -2px rgba(23,123,139,0.45);
cursor: grab;
}
.sim-range-meta{
display:flex; justify-content:space-between;
font-size: 11px; color: var(--ink-faint);
margin-top: 10px;
font-variant-numeric: tabular-nums;
}
/* Number input refinado */
.sim-num{
width: 100%;
background: var(--white);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 40px 12px 14px;
font-size: 14.5px;
font-weight: 600;
color: var(--ink);
font-family: inherit;
font-variant-numeric: tabular-nums;
transition: border-color 200ms var(--ease-out-quart), background 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart);
}
.sim-num:focus{ outline:none; border-color: var(--teal-500); box-shadow:0 0 0 4px rgba(24,139,146,0.12); }
.sim-suffix{ position: relative; display:block; }
.sim-suffix .suff{
position:absolute; right:14px; top:50%; transform:translateY(-50%);
font-size:13px; color: var(--ink-faint); font-weight: 700;
pointer-events:none;
}
/* Segmented control (Radio pills) */
.sim-pills{
display:inline-flex;
padding: 4px;
background: var(--cream-soft);
border-radius: 12px;
border: 1px solid var(--border-soft);
width: 100%;
}
.sim-pill{
flex: 1;
display:inline-flex; align-items:center; justify-content:center;
padding: 9px 14px;
border-radius: 9px;
font-size: 13px; font-weight: 600;
color: var(--ink-soft);
cursor: pointer;
position: relative;
transition: color 200ms var(--ease-out-quart), background 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart);
text-align: center;
}
.sim-pill input{ position: absolute; opacity: 0; pointer-events: none; }
.sim-pill:active{ transform: scale(0.98); }
.sim-pill.is-on{
background: var(--white);
color: var(--teal-700);
box-shadow: 0 2px 8px -2px rgba(18,17,17,0.12);
}
@media (hover: hover) and (pointer: fine){
.sim-pill:hover:not(.is-on){ color: var(--ink); }
}
/* Hint debajo de pills */
.sim-hint{
font-size: 12.5px;
color: var(--ink-faint);
margin-top: 10px;
line-height: 1.5;
}
/* Warning de entrada baja */
.sim-warn{
display:flex; gap: 10px; align-items:flex-start;
margin-top: 12px;
padding: 12px 14px;
background: linear-gradient(180deg, #FFF7E6 0%, #FFF0CC 100%);
border: 1px solid #FCD981;
border-radius: 12px;
font-size: 12.5px;
line-height: 1.5;
color: #7A5A00;
}
.sim-warn strong{ color: #5A4200; }
/* Result HERO card — gran cuota mensual */
.sim-result-card{
position:relative; overflow:hidden;
background:
radial-gradient(ellipse at 80% 0%, rgba(255,255,255,0.22), transparent 55%),
linear-gradient(140deg, var(--coral-500) 0%, var(--coral-600) 60%, #9B2828 100%);
color: var(--white);
border-radius: 28px;
padding: 32px;
box-shadow: 0 36px 80px -20px rgba(193,48,48,0.55), 0 4px 12px -4px rgba(193,48,48,0.2);
}
.sim-result-card::after{
content:''; position:absolute; left:-30px; bottom:-30px;
width: 200px; height: 200px; border-radius:50%;
background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 65%);
pointer-events:none;
}
.sim-result-label{
font-size: 11px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.7);
position: relative;
}
.sim-result-cuota{
font-size: clamp(44px, 5.5vw, 64px);
font-weight: 700;
letter-spacing: -0.045em;
line-height: 1;
margin-top: 8px;
font-variant-numeric: tabular-nums;
position: relative;
}
.sim-result-cuota .unit{
font-size: 0.45em;
font-weight: 600;
opacity: 0.7;
margin-left: 4px;
}
.sim-result-block{
margin-top: 22px;
padding: 16px 18px;
background: rgba(255,255,255,0.12);
border-radius: 16px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
position: relative;
}
.sim-result-block-l{ font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }
.sim-result-block-v{ font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Sub-result cards (necesitas al inicio, total) */
.sim-sub-card{
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 22px;
padding: 24px;
transition: transform 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine){
.sim-sub-card:hover{ transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(18,17,17,0.14); }
}
.sim-sub-eyebrow{
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--coral-500);
}
.sim-sub-eyebrow::before{
content:''; width:5px; height:5px; border-radius:50%;
background: var(--coral-500);
box-shadow: 0 0 0 3px rgba(233,69,69,0.18);
}
.sim-sub-eyebrow.teal{ color: var(--teal-600); }
.sim-sub-eyebrow.teal::before{ background: var(--teal-500); box-shadow: 0 0 0 3px rgba(24,139,146,0.18); }
.sim-sub-num{
font-size: 32px; font-weight: 700; letter-spacing: -0.035em;
color: var(--ink); margin-top: 10px;
font-variant-numeric: tabular-nums;
}
.sim-sub-row{
display:flex; justify-content:space-between; align-items:center;
padding: 9px 0;
font-size: 13.5px;
border-top: 1px dashed var(--border);
}
.sim-sub-row:first-of-type{ border-top: 0; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--border-soft); }
.sim-sub-row span:first-child{ color: var(--ink-soft); }
.sim-sub-row span:last-child{ color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-disclaimer{
position: relative;
font-size: 12.5px; line-height: 1.55;
color: var(--ink-soft);
padding: 14px 16px 14px 44px;
background: var(--cream-soft);
border: 1px solid var(--border-soft);
border-radius: 14px;
}
.sim-disclaimer::before{
content: 'i';
position: absolute; left: 14px; top: 14px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--teal-600); color: var(--white);
font-size: 11px; font-weight: 700; line-height: 20px;
text-align: center;
font-family: Georgia, serif;
font-style: italic;
}
.sim-disclaimer strong{ color: var(--ink); font-weight: 700; }
/* Custom dropdown (qz-dropdown) */
.qz-dropdown{ position: relative; }
.qz-dropdown-native{
position:absolute; opacity:0; pointer-events:none;
width:1px; height:1px; overflow:hidden;
}
.qz-dropdown-btn{
width:100%;
display:flex; align-items:center; justify-content:space-between; gap:8px;
background: var(--cream);
border: 1px solid var(--border);
border-radius: 12px;
padding: 13px 14px;
font-size: 14px; font-weight: 600;
color: var(--ink);
font-family: inherit;
cursor: pointer;
transition: border-color 200ms var(--ease-out-quart), background 200ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart);
text-align:left;
}
.qz-dropdown-btn:focus, .qz-dropdown.is-open .qz-dropdown-btn{
outline:none; border-color: var(--teal-500); background:var(--white);
box-shadow: 0 0 0 4px rgba(24,139,146,0.12);
}
.qz-dropdown-arrow{
flex:none; color: var(--ink-faint);
transition: transform 200ms var(--ease-out-quart);
}
.qz-dropdown.is-open .qz-dropdown-arrow{ transform: rotate(180deg); color: var(--teal-600); }
.qz-dropdown-menu{
position:absolute; top: calc(100% + 6px); left:0; right:0; z-index: 30;
list-style: none; margin:0; padding: 6px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 14px;
box-shadow: 0 20px 60px -10px rgba(18,17,17,0.2);
max-height: 280px; overflow:auto;
opacity: 0; transform: translateY(-6px) scale(0.98);
pointer-events:none;
transition: opacity 180ms var(--ease-out-quart), transform 180ms var(--ease-out-quart);
}
.qz-dropdown.is-open .qz-dropdown-menu{
opacity:1; transform: translateY(0) scale(1); pointer-events:auto;
}
.qz-dropdown-menu li{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding: 9px 12px;
border-radius: 9px;
font-size: 13.5px; color: var(--ink);
cursor: pointer;
transition: background 150ms var(--ease-out-quart), color 150ms var(--ease-out-quart);
}
.qz-dropdown-menu li span{ font-size:11.5px; color: var(--ink-faint); font-weight:500; }
.qz-dropdown-menu li:hover{ background: var(--cream-soft); }
.qz-dropdown-menu li.is-selected{ background: var(--mint-soft); color: var(--teal-700); font-weight: 600; }
.qz-dropdown-menu li.is-selected span{ color: var(--teal-600); }
/* Result text colour helpers */
.sim-card .text-coral{ color: var(--coral-500); }
.sim-card .text-quetzal{ color: var(--teal-600); }
/* Section page for simulador with darker background */
.sim-section-page{ min-height: 80vh; }
/* Spacing helpers usados en el simulador */
.space-y-7 > * + *{ margin-top: 1.75rem; }
.space-y-4 > * + *{ margin-top: 1rem; }
.space-y-2\\.5 > * + *{ margin-top: 0.625rem; }
/* ============================================================
CONTACTO — info cards lateral + promesa
============================================================ */
.contact-info-card{
display:flex; align-items:flex-start; gap:16px;
padding:20px 22px;
background:var(--white);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow-sm);
transition: border-color 220ms var(--ease-out-quart), box-shadow 220ms var(--ease-out-quart), transform 220ms var(--ease-out-quart);
}
@media (hover:hover) and (pointer:fine){
.contact-info-card:hover{
border-color: rgba(24,139,146,0.25);
box-shadow: 0 10px 32px -16px rgba(14,74,96,0.18);
transform: translateY(-2px);
}
}
.contact-info-card .info-icon{
flex:0 0 auto;
width:44px; height:44px;
display:grid; place-items:center;
border-radius:13px;
}
.contact-info-card .info-icon svg{ display:block; }
.contact-info-card .info-icon.teal{
background: var(--teal-50);
color: var(--teal-700);
}
.contact-info-card .info-icon.coral{
background: rgba(233,69,69,0.09);
color: var(--coral-600, #d63b3b);
}
.contact-info-card > div:last-child{ min-width:0; flex:1; }
.info-label{
font-size:11px; text-transform:uppercase;
letter-spacing:0.1em; font-weight:600;
color: var(--ink-faint);
margin-bottom:6px;
}
.info-value{
display:block;
font-size:16px; font-weight:600;
color: var(--ink);
text-decoration:none;
letter-spacing:-0.01em;
word-break: break-word;
transition: color 180ms var(--ease-out-quart);
}
a.info-value:hover{ color: var(--teal-600); }
.info-sub{
font-size:13px;
color: var(--ink-soft);
margin-top:4px;
line-height:1.45;
}
.contact-promise{
padding:22px 24px;
background: var(--mint-soft);
border:1px solid rgba(157,232,181,0.55);
border-radius:18px;
}
.promise-eyebrow{
font-size:11px; text-transform:uppercase;
letter-spacing:0.1em; font-weight:700;
color: var(--teal-700);
margin-bottom:14px;
}
.promise-list{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:11px;
}
.promise-list li{
display:flex; align-items:center; gap:10px;
font-size:14px;
color: var(--ink);
line-height:1.4;
}
.promise-list li svg{
flex:0 0 16px; width:16px; height:16px;
color: var(--teal-600);
display:block;
padding:3px;
background: rgba(24,139,146,0.12);
border-radius:50%;
box-sizing: content-box;
}
/* ============================================================
BLOG — índice + artículo (kx-blog-* / kx-article-* / kx-prose)
============================================================ */
.kx-blog{ display:block; text-decoration:none; color:inherit; }
.kx-blog-title{ transition: color .2s var(--ease); }
@media (hover:hover) and (pointer:fine){
.kx-blog:hover .kx-blog-title{ color:var(--teal-600); }
}
/* --- Índice del blog --- */
.kx-blog-hero{ padding-top:148px; padding-bottom:6px; text-align:center; }
@media (max-width:767px){ .kx-blog-hero{ padding-top:108px; } }
.kx-blog-cats{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:34px; }
.kx-blog-cat{
font-size:13px; font-weight:600; letter-spacing:-0.01em;
padding:8px 17px; border-radius:999px;
background:var(--white); border:1px solid var(--border-soft);
color:var(--ink-soft); cursor:pointer;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.kx-blog-cat:active{ transform:scale(0.97); }
.kx-blog-cat.is-active{ background:var(--ink); color:var(--white); border-color:var(--ink); }
@media (hover:hover) and (pointer:fine){
.kx-blog-cat:hover{ border-color:var(--ink-muted); color:var(--ink); }
.kx-blog-cat.is-active:hover{ color:var(--white); }
}
/* artículo destacado (grande) */
.kx-blog-feat{
display:grid; grid-template-columns:1.05fr 1fr; gap:0;
background:var(--white); border:1px solid var(--border-soft);
border-radius:26px; overflow:hidden; margin-bottom:28px;
text-decoration:none; color:inherit;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover:hover) and (pointer:fine){
.kx-blog-feat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.kx-blog-feat:hover .kx-blog-feat-title{ color:var(--teal-600); }
}
.kx-blog-feat-img{ background-size:cover; background-position:center; min-height:340px; }
.kx-blog-feat-body{ padding:42px; display:flex; flex-direction:column; justify-content:center; }
.kx-blog-feat-title{ font-size:31px; line-height:1.16; letter-spacing:-0.038em; font-weight:600; color:var(--ink); margin-top:16px; transition:color .2s var(--ease); }
.kx-blog-feat-ex{ margin-top:15px; font-size:16px; line-height:1.6; color:var(--ink-soft); }
.kx-blog-feat-link{ display:inline-flex; align-items:center; gap:7px; margin-top:24px; font-size:14px; font-weight:600; color:var(--teal-600); }
@media (max-width:860px){
.kx-blog-feat{ grid-template-columns:1fr; }
.kx-blog-feat-img{ min-height:220px; }
.kx-blog-feat-body{ padding:28px; }
.kx-blog-feat-title{ font-size:24px; }
}
.kx-blog-read::before{ content:'·'; margin-right:12px; color:var(--ink-muted); }
.kx-blog-read{ font-size:12px; color:var(--ink-faint); }
.kx-blog.is-hidden, .kx-blog-feat.is-hidden{ display:none; }
/* --- Página de artículo --- */
.kx-article-head{ padding-top:132px; text-align:center; max-width:760px; margin:0 auto; }
@media (max-width:767px){ .kx-article-head{ padding-top:98px; } }
.kx-article-meta{ display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; font-size:13px; color:var(--ink-faint); }
.kx-article-meta .kx-blog-tag{ margin-right:12px; }
.kx-article-h1{ font-size:clamp(30px,4.6vw,46px); line-height:1.08; letter-spacing:-0.042em; font-weight:600; color:var(--ink); margin-top:22px; }
.kx-article-lede{ font-size:19px; line-height:1.55; color:var(--ink-soft); margin-top:22px; }
.kx-article-author{ display:inline-flex; align-items:center; gap:11px; margin-top:28px; font-size:13.5px; color:var(--ink-soft); }
.kx-article-author img{ width:40px; height:40px; border-radius:999px; object-fit:cover; }
.kx-article-author .av{ width:40px; height:40px; border-radius:999px; background:var(--teal-600); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; letter-spacing:-0.02em; }
.kx-article-author b{ color:var(--ink); font-weight:600; }
.kx-article-author span{ display:block; text-align:left; line-height:1.3; }
.kx-article-cover{ width:100%; max-width:1040px; margin:46px auto 0; aspect-ratio:16/8; border-radius:24px; background-size:cover; background-position:center; }
@media (max-width:767px){ .kx-article-cover{ border-radius:16px; aspect-ratio:16/10; margin-top:32px; } }
.kx-article-wrap{ max-width:728px; margin:0 auto; padding:0 24px; }
/* prosa de artículo */
.kx-prose{ font-size:17.5px; line-height:1.75; color:var(--ink-soft); }
.kx-prose > * + *{ margin-top:22px; }
.kx-prose h2{ font-size:27px; line-height:1.2; letter-spacing:-0.03em; font-weight:600; color:var(--ink); margin-top:50px; }
.kx-prose h3{ font-size:20px; line-height:1.3; letter-spacing:-0.02em; font-weight:600; color:var(--ink); margin-top:36px; }
.kx-prose strong{ color:var(--ink); font-weight:600; }
.kx-prose em{ font-style:italic; }
.kx-prose a{ color:var(--teal-600); font-weight:500; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(23,123,139,0.35); transition:text-decoration-color .2s var(--ease); }
.kx-prose a:hover{ text-decoration-color:var(--teal-600); }
.kx-prose ul, .kx-prose ol{ padding-left:2px; }
.kx-prose li{ position:relative; padding-left:30px; margin-top:13px; list-style:none; }
.kx-prose ul li::before{ content:''; position:absolute; left:5px; top:11px; width:7px; height:7px; border-radius:2px; background:var(--teal-500); transform:rotate(45deg); }
.kx-prose ol{ counter-reset:li; }
.kx-prose ol li{ counter-increment:li; padding-left:38px; }
.kx-prose ol li::before{ content:counter(li); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:999px; background:var(--mint-soft); color:var(--teal-700); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
/* callout / consejo */
.kx-callout{ background:var(--mint-soft); border:1px solid var(--mint-deep); border-radius:18px; padding:22px 24px; }
.kx-callout-h{ display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:0.04em; color:var(--teal-700); text-transform:uppercase; }
.kx-callout-h svg{ flex:0 0 16px; }
.kx-callout p{ margin-top:11px; font-size:16px; line-height:1.65; color:var(--ink-2); }
/* tabla en prosa */
.kx-prose-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kx-prose-table{ width:100%; border-collapse:collapse; font-size:15px; border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; min-width:480px; }
.kx-prose-table th, .kx-prose-table td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--border-soft); }
.kx-prose-table thead th{ background:var(--cream-soft); font-weight:600; color:var(--ink); font-size:12.5px; letter-spacing:0.01em; }
.kx-prose-table td{ color:var(--ink-soft); }
.kx-prose-table td:first-child{ color:var(--ink); font-weight:500; }
.kx-prose-table tbody tr:last-child td{ border-bottom:none; }
/* CTA dentro del artículo */
.kx-article-cta{ background:var(--teal-700); color:var(--white); border-radius:24px; padding:40px 40px; text-align:center; }
.kx-article-cta h3{ font-size:25px; line-height:1.18; letter-spacing:-0.03em; font-weight:600; color:var(--white); }
.kx-article-cta p{ margin-top:11px; font-size:16px; line-height:1.55; color:rgba(255,255,255,0.82); max-width:440px; margin-left:auto; margin-right:auto; }
.kx-article-cta .kx-btn-primary{ margin-top:24px; }
@media (max-width:767px){ .kx-article-cta{ padding:30px 22px; } }
/* pie de artículo / divisor */
.kx-article-rule{ border:none; border-top:1px solid var(--border-soft); margin:0; }