/* ============================================================
   CoopVencer · Landing (Inicio) — estilos de la página
   Todo deriva de los design tokens (tokens/*.css vía styles.css).
   Los valores propios de esta página viven aquí, no en los tokens.
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: #14201E; font-family: var(--cv-font-body); color: var(--cv-foreground); font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-thumb { background: var(--cv-green-300); border-radius: 999px; border: 3px solid #F1EADD; background-clip: padding-box; }
a { color: var(--cv-green-700); text-decoration: none; }
a:hover { color: var(--cv-green-800); }
:root {
  --ln-amber: #E0A94E; --ln-amber-soft: #F0BE63;
  --ln-sage: #BFE0CC; --ln-sage-2: #CDE8D4;
  --ln-cream: #FBF8F2; --ln-cream-2: #F1EADD;
  --ln-ink: #14201E; --ln-ink-2: #1B2A28;
  --ln-nav-h: 76px;
  /* radios más curvos / orgánicos (override local, solo landing) */
  --cv-radius-lg: 26px; --cv-radius-xl: 36px;
  /* la serif del logo (Inverserif) para titulares */
  --ln-logo: "Inverserif", "Gotham", serif;
  /* superficie verde inmersiva (misma familia que el login) */
  --ln-green-grad:
    radial-gradient(120% 74% at 22% -10%, #5E827D 0%, rgba(94,130,125,0) 54%),
    radial-gradient(88% 68% at 108% 6%, #4F6F6B 0%, rgba(79,111,107,0) 50%),
    linear-gradient(160deg, #33514D 0%, #22403C 48%, #14201E 100%);
}

/* ============================================================
   BLOQUES · verde inmersivo ↔ crema que respira
   ============================================================ */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.blk { position: relative; }
.blk-green { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--ln-green-grad); }
.blk-ink { background:
    radial-gradient(120% 80% at 80% -12%, #2C4A46 0%, rgba(44,74,70,0) 56%),
    linear-gradient(162deg, #1D302C 0%, #14201E 60%, #0F1917 100%); }
.blk-cream { position: relative; background: linear-gradient(180deg, var(--ln-cream) 0%, #F3ECE0 100%); color: var(--cv-neutral-900); }
.blk-cream-2 { background: var(--ln-cream-2); }
.pad { padding: 140px 0; }
.pad-sm { padding: 84px 0; }
.blk-ink.pad { padding: 112px 0 122px; }
.blk-ink.pad-sm { padding-top: 100px; }
.blk-green .grain, .blk-ink .grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: soft-light; background-image: url("assets/grain.png"); background-size: 160px 160px; }
.amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.amb .cvbg { background: transparent; isolation: auto; z-index: auto; --sage: var(--ln-sage); --sage-2: var(--ln-sage-2); --green: #E7F2EA; --amber: var(--ln-amber-soft); }
.amb[data-amb="faint"] { opacity: 0.42; }
.halftone { position: absolute; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(191,224,204,0.5) 1.2px, transparent 1.4px); background-size: 15px 15px; }
.z { position: relative; z-index: 2; }

/* cortes orgánicos entre bloques (SVG, no líneas rectas) */
.curve { position: absolute; left: 0; width: 100%; z-index: 3; line-height: 0; pointer-events: none; }
.curve svg { display: block; width: 100%; height: 100%; }
.curve-top { top: -1px; height: 90px; }
.curve-bot { bottom: -1px; height: 90px; }
@media (max-width: 760px) { .curve-top, .curve-bot { height: 54px; } }

/* ============================================================
   TIPOGRAFÍA editorial
   ============================================================ */
.kick { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cv-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cv-green-600); }
.kick.lite { color: var(--ln-sage); }
.kick::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.7; }
.disp { font-family: var(--cv-font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; color: var(--cv-neutral-900); text-wrap: balance; }
.lite .disp, .disp.lite { color: #fff; }
.disp em { font-style: normal; color: var(--cv-green-600); }
.lite .disp em, .disp.lite em { color: var(--ln-sage); }
.lead { font-family: var(--cv-font-body); font-size: 18.5px; line-height: 1.62; color: var(--cv-neutral-600); text-wrap: pretty; }
.lite .lead, .lead.lite { color: rgba(255,255,255,0.82); }

.head { max-width: 730px; margin-bottom: 56px; }
.head.ctr { margin-left: auto; margin-right: auto; text-align: center; }
.head .disp { font-family: var(--ln-logo); font-size: clamp(31px, 4.2vw, 50px); font-weight: 400; letter-spacing: 0.01em; margin: 16px 0 0; }
.head .lead { margin: 20px 0 0; }

/* ============================================================
   NAV — transparente sobre hero (blanco) → píldora glass al scroll
   ============================================================ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; justify-content: center; padding: 18px 22px; transition: padding 360ms var(--cv-ease-settle); }
.nav-inner { width: 100%; max-width: 1180px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 18px; height: 60px; border-radius: 999px; background: rgba(18,28,26,0.22); border: 1px solid rgba(191,224,204,0.12); backdrop-filter: blur(9px) saturate(120%); -webkit-backdrop-filter: blur(9px) saturate(120%); transition: max-width 420ms var(--cv-ease-settle), background 320ms, box-shadow 320ms, border-color 320ms, backdrop-filter 320ms, padding 320ms; }
.nav.solid { padding: 12px 22px; }
.nav.solid .nav-inner { max-width: 860px; background: rgba(20,32,30,0.72); border-color: rgba(191,224,204,0.18); box-shadow: 0 12px 34px rgba(10,18,16,0.4), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
.nav-brand { display: inline-flex; align-items: center; gap: 12px; }
.nav-seed { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.nav.solid .nav-seed { display: none; }
.nav-mark { width: 34px; height: 34px; border-radius: 10px; background: url("assets/logo-mark.svg") center/cover; flex-shrink: 0; display: none; transition: width 320ms var(--cv-ease-settle), height 320ms; }
.nav.solid .nav-mark { display: block; width: 30px; height: 30px; }
.nav-word { width: 128px; height: 17px; background: url("assets/logo-wordmark-white.svg") left center/contain no-repeat; transition: width 320ms var(--cv-ease-settle), opacity 320ms; }
.nav.solid .nav-word { width: 108px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link { padding: 9px 14px; border-radius: 999px; font-family: var(--cv-font-body); font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; transition: background 160ms, color 160ms; }
.nav-link:hover { background: rgba(255,255,255,0.14); color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--cv-green-500); color: #14201E !important; font-family: var(--cv-font-display); font-weight: 700; font-size: 14.5px; box-shadow: 0 6px 16px rgba(126,158,146,0.4); transition: background 160ms, transform 160ms, box-shadow 160ms; white-space: nowrap; }
.nav-cta:hover { background: var(--ln-sage); transform: translateY(-1px); }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.1); color: #fff; align-items: center; justify-content: center; cursor: pointer; }
/* Menú móvil desplegable (se muestra al pulsar el burger) */
.nav-menu { position: absolute; top: 78px; left: 22px; right: 22px; background: rgba(20,32,30,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 20px; box-shadow: 0 16px 36px rgba(10,18,16,0.5); padding: 10px 18px 16px; }
.nav-menu[hidden] { display: none; }
.nav-menu a { display: block; padding: 13px 4px; color: rgba(255,255,255,0.9); font-family: var(--cv-font-body); font-size: 17px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav-menu a:last-child { border-bottom: none; }

/* ============================================================
   LIVING VEIN — una sola vid vertical continua que baja por la página
   (la construye landing.js por sección; ver README §Movimiento)
   ============================================================ */
.svein { position: absolute; top: 0; bottom: 0; left: 6%; width: 200px; z-index: 0; pointer-events: none; color: rgb(79,111,107); }
.svein svg { display: block; width: 100%; height: 100%; overflow: visible; }
.svein .vstem { stroke: currentColor; }
.svein .vlf { transition: opacity 0.5s ease; }
.svein .vlf path { fill: currentColor; }
.blk-cream, .blk-cream-2, .blk-ink { overflow: clip; }
.blk-cream .svein, .blk-cream-2 .svein { mix-blend-mode: multiply; opacity: 0.2; }
.blk-green .svein, .blk-ink .svein { mix-blend-mode: screen; opacity: 0.22; }
@media (max-width: 820px) { .svein { display: none; } }

/* ============================================================
   BOTONES
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; border: none; cursor: pointer; font-family: var(--cv-font-display); font-weight: 700; font-size: 16px; transition: background 160ms var(--cv-ease-soft), transform 160ms, box-shadow 160ms, color 160ms; text-decoration: none; }
.btn-lg { height: 58px; padding: 0 30px; font-size: 17px; }
.btn-primary { background: var(--cv-green-600); color: #fff; box-shadow: var(--cv-shadow-md); }
.btn-primary:hover { background: var(--cv-green-700); color: #fff; transform: translateY(-2px); box-shadow: var(--cv-shadow-lg); }
.btn-seed { background: var(--cv-green-500); color: #14201E; box-shadow: 0 8px 22px rgba(126,158,146,0.44); }
.btn-seed:hover { background: var(--ln-sage); color: #14201E; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--cv-green-700); border: 1.5px solid var(--cv-green-200); }
.btn-ghost:hover { background: var(--cv-green-50); color: var(--cv-green-800); }
.btn-ghost-lite { background: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.36); }
.btn-ghost-lite:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ============================================================
   VIDRIO + TARJETAS
   ============================================================ */
.glass { background: rgba(255,255,255,0.78); backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%); border: 1px solid var(--cv-glass-border); box-shadow: var(--cv-glass-shadow-lg), var(--cv-glass-hairline); border-radius: var(--cv-radius-xl); }
.glass-d { background: rgba(30,46,42,0.55); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(191,224,204,0.2); box-shadow: 0 20px 54px rgba(10,18,16,0.46), inset 0 1px 0 rgba(255,255,255,0.1); border-radius: var(--cv-radius-xl); }
.card { position: relative; background: #fff; border: 1px solid var(--cv-neutral-200); border-radius: var(--cv-radius-lg); box-shadow: var(--cv-shadow-sm); transition: transform 240ms var(--cv-ease-settle), box-shadow 240ms, border-color 240ms; }
.lift:hover { transform: translateY(-6px); box-shadow: var(--cv-shadow-lg); border-color: var(--cv-green-200); }

/* ============================================================
   FOTO DUOTONO — emerge del verde
   ============================================================ */
.duo-wrap { position: absolute; inset: 0; overflow: hidden; }
.duo-fallback { position: absolute; inset: 0; background:
    radial-gradient(76% 58% at 68% 26%, rgba(233,180,76,0.18) 0%, rgba(233,180,76,0) 58%),
    radial-gradient(92% 82% at 74% 50%, rgba(126,158,146,0.34) 0%, rgba(126,158,146,0) 62%),
    linear-gradient(180deg, rgba(46,67,65,0) 0%, rgba(16,26,24,0.5) 100%); }
.duo { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.mask-b { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 94%); mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 94%); }
.mask-l { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to bottom, transparent 0%, #000 20%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to bottom, transparent 0%, #000 20%); mask-composite: intersect; }
.ph-caribe { background-position: 58% 20%; background-image: url("assets/hero-3perfiles-v2.png"); }
.ph-a { background-position: 50% 22%; background-image: url("assets/docente.png"); }
.ph-b { background-position: 58% 28%; background-image: url("assets/pensionada-joven.png"); }
.ph-c { background-position: 50% 22%; background-image: url("assets/fuerzas.png"); }
.ph-pareja { background-position: 50% 30%; background-image: url("assets/historia-11anios.png"); }
.ph-libranza { background-position: 50% 30%; background-image: url("assets/que-necesitas.png"); }

/* ============================================================
   HERO inmersivo (verde profundo, tarjeta flotando, foto humana)
   ============================================================ */
.hero { position: relative; z-index: 3; min-height: auto; display: flex; align-items: center; overflow: visible; padding: calc(var(--ln-nav-h) + 76px) 0 118px;
  background:
    radial-gradient(126% 92% at 80% 2%, #45675F 0%, rgba(69,103,95,0) 52%),
    radial-gradient(86% 68% at 6% 110%, #2B4A45 0%, rgba(43,74,69,0) 60%),
    linear-gradient(168deg, #335651 0%, #234642 54%, #162927 100%); }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero .grain { opacity: 0.16; }
.hero-aura { position: absolute; top: -12%; right: -8%; width: 86%; height: 82%; z-index: 0; pointer-events: none; filter: blur(26px);
  background: radial-gradient(closest-side, rgba(150,196,174,0.5) 0%, rgba(150,196,174,0.14) 44%, rgba(150,196,174,0) 74%); animation: aura 15s ease-in-out infinite; }
.hero-halftone { top: 12%; right: -60px; width: 420px; height: 420px; -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 70%); mask-image: radial-gradient(circle at center, #000 30%, transparent 70%); }
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 40px; align-items: center; width: 100%; }
.hero .curve { z-index: 1; }
.hero-eyebrow { margin-bottom: 22px; }
.hero-title { font-family: var(--ln-logo); font-weight: 400; letter-spacing: 0.01em; font-size: clamp(38px, 5.1vw, 70px); filter: blur(7px); }
.hero-title.in { filter: blur(0); }
.hero-sub { margin: 24px 0 0; max-width: 470px; }
/* Versión corta del subtítulo (nuevo elemento): oculta por defecto; el @media móvil la muestra */
.hero-sub-short { display: none; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 0; }
.hero-feats { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 0; }
.hero-feat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-family: var(--cv-font-display); font-weight: 600; font-size: 13px; white-space: nowrap; }
.hero-feat svg { color: var(--ln-amber); width: 14px; height: 14px; flex-shrink: 0; }
@keyframes ctaPulse { 0%, 100% { box-shadow: 0 14px 30px -12px rgba(224,169,78,.55), 0 0 0 0 rgba(224,169,78,.45); } 50% { box-shadow: 0 16px 38px -12px rgba(224,169,78,.7), 0 0 0 10px rgba(224,169,78,0); } }
.cta-pulse { animation: ctaPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cta-pulse { animation: none; } }
.hero-seals { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 38px 0 0; }
.seal { display: inline-flex; align-items: center; gap: 9px; font-family: var(--cv-font-body); font-size: 12.5px; line-height: 1.3; font-weight: 600; color: rgba(255,255,255,0.7); max-width: 210px; }
.seal-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(191,224,204,0.12); border: 1px solid rgba(191,224,204,0.24); color: var(--ln-sage); }

/* héroe visual: UNA foto que emerge del verde + UNA tarjeta */
.hero-stage { position: relative; height: 520px; }
.hero-photo { position: absolute; top: 0; right: 0; width: 88%; height: 100%; z-index: 1; }
.hero-duo { background-position: 50% 26%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 33%), linear-gradient(to bottom, #000 56%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 33%), linear-gradient(to bottom, #000 56%, transparent 98%);
  mask-composite: intersect; animation: kenburns 24s ease-in-out infinite alternate; will-change: scale; }
.hero-photo-cap { position: absolute; right: 8px; bottom: 30px; z-index: 5; max-width: 182px; text-align: left; padding: 13px 15px; border-radius: 15px; background: rgba(16,26,24,0.5); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(191,224,204,0.22); box-shadow: 0 12px 32px rgba(10,18,16,0.34); }
.hero-photo-cap p { margin: 0 0 8px; font-family: var(--cv-font-body); font-size: 13px; line-height: 1.42; font-style: italic; color: rgba(255,255,255,0.92); }
.hero-photo-cap h4 { margin: 0; font-family: var(--cv-font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; color: var(--ln-sage); }
.hero-calc { position: absolute; left: -6px; bottom: 40px; width: 264px; z-index: 6; padding: 22px 24px;
  box-shadow: 0 2px 4px rgba(10,20,18,0.12), 0 12px 26px rgba(10,20,18,0.16), 0 34px 66px rgba(10,20,18,0.26); }

.mini-h { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.mini-h .t { font-family: var(--cv-font-display); font-weight: 700; font-size: 14.5px; color: var(--cv-neutral-900); }
.mini-h .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--cv-green-50); color: var(--cv-green-700); display: grid; place-items: center; }
.calc-row-top { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; }
.calc-label { font-family: var(--cv-font-body); font-size: 13px; font-weight: 700; color: var(--cv-neutral-600); }
.calc-val { font-family: var(--cv-font-display); font-weight: 700; font-size: 15.5px; color: var(--cv-green-700); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 7px; border-radius: 999px; background: var(--cv-green-100); outline: none; margin-bottom: 15px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--cv-green-600); border: 3px solid #fff; box-shadow: var(--cv-shadow-sm); cursor: pointer; }
.slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--cv-green-600); border: 3px solid #fff; box-shadow: var(--cv-shadow-sm); cursor: pointer; }
.slider:focus-visible { box-shadow: 0 0 0 3px rgba(79,111,107,0.4); }
.calc-out { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--cv-neutral-300); }
.calc-out .lbl { font-family: var(--cv-font-body); font-size: 11.5px; font-weight: 700; color: var(--cv-neutral-500); }
.calc-out .amt { font-family: var(--cv-font-display); font-weight: 600; font-size: 27px; letter-spacing: -0.02em; color: var(--cv-neutral-900); line-height: 1.1; font-feature-settings: "tnum" 1, "lnum" 1; }

/* ============================================================
   CIFRAS
   ============================================================ */
.cifras { position: relative; z-index: 1; padding-top: 118px; padding-bottom: 110px; }
.cifras-head { max-width: 620px; margin: 0 auto 46px; text-align: center; }
.cifras-head .kick { justify-content: center; }
.cifras-title { font-family: var(--ln-logo); font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; letter-spacing: 0.01em; margin: 16px 0 0; }
.cifras-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 24px; align-items: stretch; }
.stat-feature { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--cv-radius-xl); background: var(--ln-green-grad); color: #fff; box-shadow: var(--cv-shadow-md); }
.stat-feature .grain { opacity: 0.4; }
.stat-feature-in { display: flex; flex-direction: column; height: 100%; padding: 38px 38px 34px; min-height: 260px; }
.stat-feature-ic { width: 52px; height: 52px; border-radius: 16px; background: rgba(191,224,204,0.16); color: var(--ln-sage); display: grid; place-items: center; }
.stat-feature-body { margin-top: auto; }
.stat-feature-eyb { display: block; margin: 26px 0 12px; font-family: var(--cv-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ln-sage); }
.stat-feature-n { font-family: var(--cv-font-display); font-weight: 500; font-size: clamp(48px, 5.2vw, 68px); line-height: 0.96; letter-spacing: -0.03em; white-space: nowrap; font-feature-settings: "tnum" 1, "lnum" 1; }
.stat-feature-n .u { color: var(--ln-amber); }
.stat-feature-l { margin: 16px 0 0; font-family: var(--cv-font-body); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.84); max-width: 320px; }
.stat-list { display: flex; flex-direction: column; border-radius: var(--cv-radius-xl); background: #fff; border: 1px solid var(--cv-neutral-200); box-shadow: var(--cv-shadow-sm); overflow: hidden; }
.stat-row { display: flex; align-items: center; gap: 22px; padding: 0 32px; flex: 1; }
.stat-row + .stat-row { border-top: 1px solid var(--cv-neutral-200); }
.stat-row-ic { flex-shrink: 0; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--cv-green-50); color: var(--cv-green-700); }
.stat-row-ic.amber { background: rgba(224,169,78,0.16); color: #8A5E12; }
.stat-row-n { flex-shrink: 0; min-width: 168px; display: flex; align-items: baseline; gap: 8px; font-family: var(--cv-font-display); font-weight: 500; font-size: clamp(30px, 3.1vw, 40px); line-height: 1; letter-spacing: -0.02em; color: var(--cv-green-700); white-space: nowrap; font-feature-settings: "tnum" 1, "lnum" 1; }
.stat-row-n .u { color: var(--ln-amber); }
.stat-row-n .unit { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--cv-neutral-500); }
.stat-row-l { font-family: var(--cv-font-body); font-size: 14.5px; line-height: 1.4; color: var(--cv-neutral-600); }

/* ============================================================
   BENEFICIOS (asimétrico)
   ============================================================ */
.ben { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 20px; }
.ben-card { padding: 30px 30px; display: flex; flex-direction: column; border-radius: var(--cv-radius-xl); min-height: 210px; }
.ben-hero { position: relative; grid-column: 1; grid-row: 1 / span 2; background: var(--ln-green-grad); color: #fff; overflow: hidden; isolation: isolate; justify-content: flex-end; }
.ben-hero .grain { opacity: 0.4; }
.ben-hero .ben-photo { position: absolute; top: 0; left: 0; right: 0; height: 50%; z-index: 0; overflow: hidden; }
.ben-hero .ben-photo .duo { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%); }
.ben-side { background: var(--cv-cream-50); border: 1px solid var(--cv-neutral-200); box-shadow: var(--cv-shadow-sm); transition: transform 240ms var(--cv-ease-settle), box-shadow 240ms, border-color 240ms; }
.ben-side:hover { transform: translateY(-6px); box-shadow: var(--cv-shadow-lg); border-color: var(--cv-green-200); }
.ben-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--cv-green-50); color: var(--cv-green-700); display: grid; place-items: center; margin-bottom: 18px; flex-shrink: 0; }
.ben-ic.amber { background: rgba(224,169,78,0.18); color: #8A5E12; }
.ben-hero .ben-ic { background: rgba(191,224,204,0.16); color: var(--ln-sage); }
.ben-card h3 { margin: 0 0 10px; font-family: var(--cv-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--cv-neutral-900); }
.ben-hero h3 { color: #fff; font-size: 25px; }
.ben-card p { margin: 0; font-family: var(--cv-font-body); font-size: 15.5px; line-height: 1.55; color: var(--cv-neutral-600); }
.ben-hero p { color: rgba(255,255,255,0.82); }
.ben-pill { margin-top: 18px; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-family: var(--cv-font-body); font-size: 13px; font-weight: 700; }
.ben-pill.sage { background: rgba(191,224,204,0.16); color: var(--ln-sage); }
.ben-pill.green { background: var(--cv-green-50); color: var(--cv-green-700); }
.ben-pill.amber { background: rgba(224,169,78,0.18); color: #8A5E12; }

/* ============================================================
   PARA QUIÉN
   ============================================================ */
.segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.seg { position: relative; height: 476px; border-radius: var(--cv-radius-xl); overflow: hidden; isolation: isolate; color: #fff; background: var(--ln-green-grad); box-shadow: var(--cv-shadow-md); transition: transform 260ms var(--cv-ease-settle), box-shadow 260ms; }
.seg:hover { transform: translateY(-8px); box-shadow: 0 24px 52px rgba(16,26,24,0.34); }
.seg .duo { top: -6%; height: 118%; }
.seg-grain { position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: soft-light; background: url("assets/grain.png"); background-size: 160px; z-index: 2; pointer-events: none; }
.seg-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 26px 28px; background: linear-gradient(180deg, rgba(16,26,24,0) 0%, rgba(13,21,19,0.9) 66%); }
.seg-body h3 { margin: 0 0 7px; font-family: var(--cv-font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; }
.seg-body p { margin: 0; font-family: var(--cv-font-body); font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.seg-chip { position: absolute; top: 20px; left: 20px; z-index: 3; padding: 8px 14px; border-radius: 999px; font-family: var(--cv-font-body); font-size: 12.5px; font-weight: 700; background: var(--ln-amber); color: #2A1A00; box-shadow: 0 6px 16px rgba(16,26,24,0.28); }

/* ============================================================
   CÓMO FUNCIONA — pasos que florecen sobre el tallo
   ============================================================ */
.flow { position: relative; margin-top: 4px; }
.flow-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; z-index: 1; }
.flow-vine { position: absolute; top: 3px; left: 0; right: 0; height: 60px; z-index: 0; pointer-events: none; }
.flow-vine svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flow-step { position: relative; display: flex; flex-direction: column; }
.flow-node { align-self: center; position: relative; width: 66px; height: 66px; border-radius: 50%; background: var(--cv-green-600); color: #fff; display: grid; place-items: center; font-family: var(--cv-font-display); font-weight: 800; font-size: 23px; box-shadow: 0 8px 20px rgba(31,45,43,0.26), 0 0 0 9px var(--ln-cream); margin-bottom: 24px; }
.flow-card { flex: 1; background: #fff; border: 1px solid var(--cv-neutral-200); border-radius: var(--cv-radius-lg); box-shadow: var(--cv-shadow-sm); padding: 26px 24px; display: flex; flex-direction: column; transition: transform 240ms var(--cv-ease-settle), box-shadow 240ms, border-color 240ms; }
.flow-card:hover { transform: translateY(-6px); box-shadow: var(--cv-shadow-lg); border-color: var(--cv-green-200); }
.flow-ic { width: 46px; height: 46px; border-radius: 15px; background: var(--cv-green-50); color: var(--cv-green-700); display: grid; place-items: center; margin-bottom: 16px; flex-shrink: 0; }
.flow-card h3 { margin: 0 0 8px; font-family: var(--cv-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--cv-neutral-900); }
.flow-card p { margin: 0; font-family: var(--cv-font-body); font-size: 14.5px; line-height: 1.5; color: var(--cv-neutral-600); }
.flow-eta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cv-neutral-200); display: inline-flex; align-items: center; gap: 7px; font-family: var(--cv-font-body); font-size: 12.5px; font-weight: 700; color: #8A5E12; }

.req { margin-top: 62px; padding: 38px 40px; overflow: hidden; isolation: isolate; border-radius: var(--cv-radius-xl); }
.req .grain { opacity: 0.4; }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; margin: 24px 0 0; }
.req-item { display: flex; align-items: flex-start; gap: 12px; font-family: var(--cv-font-body); font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.9); }
.req-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(191,224,204,0.18); color: var(--ln-sage); display: grid; place-items: center; margin-top: 1px; }

/* ============================================================
   TRANSPARENCIA
   ============================================================ */
.cost { max-width: 760px; margin: 0 auto; padding: 40px 42px; }
.cost-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.cost-top .n { font-family: var(--cv-font-display); font-weight: 500; font-size: 40px; letter-spacing: -0.02em; color: #fff; margin-left: auto; font-feature-settings: "tnum" 1, "lnum" 1; }
.cost-bar { display: flex; width: 100%; height: 26px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.12); }
.cost-seg { height: 100%; width: 0; flex: 0 0 auto; transition: width 1.1s var(--cv-ease-settle); }
.cost-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 26px; }
.cost-li { display: flex; align-items: center; gap: 11px; font-family: var(--cv-font-body); font-size: 15.5px; color: rgba(255,255,255,0.86); }
.cost-dot { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }
.cost-li b { color: #fff; margin-left: auto; font-variant-numeric: tabular-nums; }

/* ============================================================
   TIPOS (bento)
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(180px, auto); gap: 22px; }
.bento-card { position: relative; overflow: hidden; padding: 28px 30px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--cv-radius-lg); }
.bento-need { justify-content: flex-start; gap: 18px; }
.bento-need .bento-ic { width: 50px; height: 50px; border-radius: 15px; background: var(--cv-green-50); color: var(--cv-green-700); display: grid; place-items: center; flex-shrink: 0; }
.bento-need .bento-need-t h3 { margin: 0 0 9px; }
.bento-hero { grid-column: 1 / -1; min-height: 300px; color: #fff; isolation: isolate; overflow: hidden; background: var(--ln-green-grad); transition: transform 240ms var(--cv-ease-settle), box-shadow 240ms; }
.bento-photo { position: absolute; inset: 0; z-index: 0; }
.bento-photo .duo { position: absolute; inset: 0; }
.bento-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(14,22,20,0.93) 0%, rgba(14,22,20,0.72) 44%, rgba(14,22,20,0.32) 100%), linear-gradient(0deg, rgba(14,22,20,0.85) 0%, rgba(14,22,20,0) 60%); }
.bento-hero > .z, .bento-hero > .bento-tag { z-index: 2; }
.bento-hero:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(16,26,24,0.32); }
.bento-hero .grain { opacity: 0.4; }
.bento-hero .halftone { top: -30px; right: -30px; width: 260px; height: 260px; -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.bento-num { font-family: var(--cv-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--cv-green-300); margin-bottom: auto; }
.bento-hero .bento-num { color: rgba(255,255,255,0.42); }
.bento-card h3 { margin: 10px 0 8px; font-family: var(--cv-font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--cv-neutral-900); }
.bento-hero h3 { color: #fff; font-size: 30px; }
.bento-card:not(.bento-hero) h3 { font-size: 19px; }
.bento-card p { margin: 0; font-family: var(--cv-font-body); font-size: 15px; line-height: 1.5; color: var(--cv-neutral-600); }
.bento-hero p { color: rgba(255,255,255,0.82); font-size: 16.5px; max-width: 400px; }
.bento-card:not(.bento-hero) { background: #fff; border: 1px solid var(--cv-neutral-200); box-shadow: var(--cv-shadow-sm); transition: transform 220ms var(--cv-ease-settle), box-shadow 220ms, border-color 220ms; }
.bento-card:not(.bento-hero):hover { transform: translateY(-6px); box-shadow: var(--cv-shadow-lg); border-color: var(--cv-green-200); }
.bento-tag { position: absolute; top: 26px; right: 28px; z-index: 2; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.16); color: #fff; font-family: var(--cv-font-body); font-size: 12.5px; font-weight: 700; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { border-radius: var(--cv-radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--cv-neutral-200); box-shadow: var(--cv-shadow-sm); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border: none; background: transparent; cursor: pointer; text-align: left; font-family: var(--cv-font-display); font-weight: 600; font-size: 18.5px; color: var(--cv-neutral-900); }
.faq-q:hover { background: var(--cv-green-50); }
.faq-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--cv-green-50); color: var(--cv-green-700); display: grid; place-items: center; transition: transform 280ms var(--cv-ease-settle), background 220ms, color 220ms; }
.faq-item.open .faq-ic { transform: rotate(45deg); background: var(--ln-amber); color: #14201E; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 340ms var(--cv-ease-settle); }
.faq-a-in { padding: 0 26px 24px; font-family: var(--cv-font-body); font-size: 16.5px; line-height: 1.62; color: var(--cv-neutral-600); max-width: 680px; }

/* ============================================================
   CONSULTAR
   ============================================================ */
.consult { max-width: 640px; margin: 0 auto; padding: 42px 42px; text-align: center; }
.consult .disp { font-weight: 700; }
.consult-form { display: flex; gap: 12px; margin: 26px 0 0; }
.consult-in { flex: 1; height: 56px; padding: 0 18px; border-radius: var(--cv-radius-md); border: 1.5px solid var(--cv-neutral-300); background: #fff; font-family: var(--cv-font-body); font-size: 16.5px; color: var(--cv-neutral-900); outline: none; transition: border-color 150ms, box-shadow 200ms; }
.consult-in:focus { border-color: var(--cv-green-600); box-shadow: 0 0 0 4px rgba(79,111,107,0.16); }
.consult-res { margin: 22px 0 0; padding: 20px 22px; border-radius: var(--cv-radius-lg); background: var(--cv-success-bg); border: 1px solid color-mix(in srgb, var(--cv-success) 26%, transparent); display: flex; align-items: center; gap: 14px; text-align: left; }
.consult-res[hidden] { display: none; }
.consult-stage { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.consult-stage .consult { position: relative; z-index: 2; margin: 0 auto; }
.consult-amb .cvbg { --sage: var(--cv-green-400); --sage-2: var(--cv-green-500); }
.consult-amb .cvbg .bloom, .consult-amb .cvbg .sun, .consult-amb .cvbg .sprout, .consult-amb .cvbg .drift, .consult-amb .cvbg .seed { display: none; }
.consult-amb .vine-left { left: auto; right: calc(50% + 232px); }
.consult-amb .vine-right { right: auto; left: calc(50% + 232px); }
/* Formulario de contacto — campos con icono, botón grande, nota de confianza */
.cta-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; max-width: 500px; margin: 30px auto 0; text-align: left; }
.cta-form .full { grid-column: 1 / -1; }
.cta-field { position: relative; display: flex; align-items: center; }
.cta-field .ic { position: absolute; left: 15px; display: inline-flex; color: var(--cv-green-600); pointer-events: none; }
.cta-in { width: 100%; height: 54px; padding: 0 16px 0 44px; border-radius: var(--cv-radius-md); border: 1.5px solid var(--cv-neutral-300); background: #fff; font-family: var(--cv-font-body); font-size: 16px; color: var(--cv-neutral-900); outline: none; transition: border-color 150ms, box-shadow 200ms; }
.cta-in::placeholder { color: var(--cv-neutral-400); }
.cta-in:focus { border-color: var(--cv-green-600); box-shadow: 0 0 0 4px rgba(79,111,107,0.14); }
.cta-btn { grid-column: 1 / -1; width: 100%; height: 56px; margin-top: 2px; }
.cta-note { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--cv-font-body); font-size: 13px; color: var(--cv-neutral-500); }
.cta-note svg { color: var(--cv-green-600); flex-shrink: 0; }
@media (max-width: 560px) { .cta-form { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER (cosecha)
   ============================================================ */
.foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-word { width: 188px; aspect-ratio: 300/39; background: url("assets/logo-wordmark-white.svg") left center/contain no-repeat; margin-bottom: 20px; }
.foot-col h4 { margin: 0 0 16px; font-family: var(--cv-font-display); font-weight: 700; font-size: 15px; color: #fff; }
.foot-col a, .foot-col p { display: block; margin: 0 0 11px; font-family: var(--cv-font-body); font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.7); }
.foot-col a:hover { color: #fff; }
.foot-legal { margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--cv-font-body); font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.5); }

/* ============================================================
   REVEAL + carga (la clase .in la añade landing.js al entrar en vista)
   ============================================================ */
.rev { opacity: 0; transform: translateY(26px); transition: opacity 0.72s var(--cv-ease-settle), transform 0.72s var(--cv-ease-settle), filter 0.72s var(--cv-ease-settle); transition-delay: calc(var(--i, 0) * 85ms); }
.rev.in { opacity: 1; transform: none; }
.rev.is-scale { transform: translateY(24px) scale(0.965); }
.rev.is-scale.in { transform: none; }
@keyframes hero-emerge { from { opacity: 0; transform: translateX(30px) scale(1.045); } to { opacity: 1; transform: none; } }
@keyframes fade-set { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-anim { animation: none; }
.float-in { animation: fade-set 0.9s var(--cv-ease-settle) both; }
@keyframes aura { 0%, 100% { opacity: 0.55; transform: translate(0, 0) scale(1); } 50% { opacity: 0.85; transform: translate(-3%, 2%) scale(1.06); } }
@keyframes kenburns { from { scale: 1.02; } to { scale: 1.09; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .ben { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .ben-hero { grid-row: auto; grid-column: 1 / -1; }
  .cifras-grid { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* [TABLET] Ajustes a ≤1024px */
@media (max-width: 1024px) {
  /* Enredaderas (.svein / .flow-vine): son position:absolute con z-index:0, y las
     tarjetas son estáticas → por apilamiento el elemento posicionado se pintaba
     ENCIMA de las tarjetas (cruzándolas feo). Las mandamos al FONDO real (z-index:-1)
     para que queden como textura sutil DETRÁS de los elementos, no por delante. */
  .svein { z-index: -1; }
  .flow-vine { z-index: -1; }
  /* KPIs (Cifras): las filas miden 50px con los íconos de 48px → quedaban apretadas
     (los símbolos casi tocando los bordes). Les damos aire vertical. */
  .stat-row { padding-top: 15px; padding-bottom: 15px; }
  .stat-list { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 880px) {
  .pad { padding: 84px 0; } .pad-sm { padding: 64px 0; }
  .wrap { padding: 0 22px; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav.solid .nav-inner { max-width: 1180px; }
  /* Las reglas de COLAPSO del hero a 1-columna se movieron a @media (max-width:767px)
     (solo teléfonos). En tablet 768–880px el hero usa el layout de escritorio 2-col. */
  .segs { grid-template-columns: 1fr; }
  .seg { height: 420px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-hero { grid-column: auto; grid-row: auto; min-height: 240px; }
  .bento-card:not(.bento-hero) { min-height: 170px; }
  .flow-track { grid-template-columns: 1fr; gap: 16px; }
  .flow-vine { display: none; }
  .flow-step { flex-direction: row; align-items: stretch; gap: 18px; }
  .flow-node { align-self: flex-start; margin-bottom: 0; width: 54px; height: 54px; font-size: 19px; box-shadow: 0 6px 16px rgba(31,45,43,0.24), 0 0 0 6px var(--ln-cream); }
  .flow-eta { margin-top: 14px; }
  .req-grid { grid-template-columns: 1fr; }
  .cost-legend { grid-template-columns: 1fr; }
  .consult-form { flex-direction: column; }
}
/* Nav compacto: bajo ~600px el wordmark + CTA + burger no caben en la píldora;
   dejamos solo el logomark (marca), CTA "Ingresar" y burger, todos visibles. */
@media (max-width: 600px) {
  .nav { padding: 14px 12px; }
  .nav-inner { padding: 0 14px; gap: 12px; }
  .nav.solid .nav-inner { padding: 0 14px; }
  .nav-word, .nav.solid .nav-word { display: none; }
}
@media (max-width: 520px) {
  .ben { grid-template-columns: 1fr; }
  .stat-row { flex-wrap: wrap; gap: 4px 16px; padding: 22px 24px; }
  .stat-row-ic { margin-bottom: 6px; }
  .stat-row-n { min-width: 0; }
  .stat-row-l { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev, .rev.is-scale { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hero-anim, .float-in, .hero-duo, .hero-media { animation: none !important; }
  .svein .vlf { transition: none !important; }
  .hero-calc { transform: translateY(0) !important; }
  .lift:hover, .seg:hover, .bento-card:hover, .bento-hero:hover { transform: none !important; }
}

/* === Riqueza de color: acentos cálidos (ámbar/terracota) para dar calidez === */
:root{ --ln-green-grad:
    radial-gradient(72% 62% at 90% 96%, rgba(224,169,78,0.26) 0%, rgba(224,169,78,0) 56%),
    radial-gradient(120% 74% at 22% -10%, #5E827D 0%, rgba(94,130,125,0) 54%),
    radial-gradient(88% 68% at 108% 6%, #4F6F6B 0%, rgba(79,111,107,0) 50%),
    linear-gradient(160deg, #33514D 0%, #22403C 48%, #14201E 100%); }
.blk-cream{ background:
    radial-gradient(88% 58% at 90% -8%, rgba(224,169,78,0.13) 0%, rgba(224,169,78,0) 52%),
    radial-gradient(70% 50% at 6% 10%, rgba(194,104,62,0.07) 0%, rgba(194,104,62,0) 46%),
    linear-gradient(180deg, var(--ln-cream) 0%, #F3ECE0 100%); }
.blk-cream-2{ background:
    radial-gradient(80% 54% at 12% 34%, rgba(224,169,78,0.12) 0%, rgba(224,169,78,0) 50%),
    radial-gradient(64% 46% at 96% 100%, rgba(194,104,62,0.06) 0%, rgba(194,104,62,0) 48%),
    var(--ln-cream-2); }
.blk-ink{ background:
    radial-gradient(60% 58% at 12% 108%, rgba(224,169,78,0.18) 0%, rgba(224,169,78,0) 54%),
    radial-gradient(120% 80% at 80% -12%, #2C4A46 0%, rgba(44,74,70,0) 56%),
    linear-gradient(162deg, #1D302C 0%, #14201E 60%, #0F1917 100%); }
.hero{ background:
    radial-gradient(58% 54% at 92% 94%, rgba(224,169,78,0.22) 0%, rgba(224,169,78,0) 52%),
    radial-gradient(126% 92% at 80% 2%, #45675F 0%, rgba(69,103,95,0) 52%),
    radial-gradient(86% 68% at 6% 110%, #2B4A45 0%, rgba(43,74,69,0) 60%),
    linear-gradient(168deg, #335651 0%, #234642 54%, #162927 100%); }
.kick::before{ background: var(--ln-amber); opacity: 1; }
.flow-ic, .mini-h .ic { background: rgba(224,169,78,0.16); color: #8A5E12; }
/* Botones con más color */
.btn-primary{ background: linear-gradient(135deg, var(--cv-green-600) 0%, #3C5A55 100%); box-shadow: 0 10px 24px rgba(79,111,107,0.34), 0 2px 7px rgba(224,169,78,0.20); }
.btn-primary:hover{ background: linear-gradient(135deg, var(--cv-green-700) 0%, #33514D 100%); box-shadow: 0 14px 30px rgba(79,111,107,0.42), 0 3px 9px rgba(224,169,78,0.24); }
.btn-seed{ background: linear-gradient(135deg, var(--ln-amber-soft) 0%, var(--ln-amber) 100%); color: #2A1A00; box-shadow: 0 10px 24px rgba(224,169,78,0.45); }
.btn-seed:hover{ background: linear-gradient(135deg, #F5C877 0%, #E7B257 100%); color: #2A1A00; box-shadow: 0 14px 30px rgba(224,169,78,0.52); }
.nav-cta{ background: linear-gradient(135deg, var(--ln-amber-soft) 0%, var(--ln-amber) 100%); color: #2A1A00 !important; box-shadow: 0 6px 16px rgba(224,169,78,0.42); }
.nav-cta:hover{ background: linear-gradient(135deg, #F5C877 0%, #E7B257 100%); }
/* Calculadora del hero — más presencia y contraste */
.hero-calc{ width: 300px; padding: 24px 26px 22px; background: rgba(255,255,255,0.95); border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 6px 14px rgba(10,20,18,0.18), 0 26px 62px rgba(10,20,18,0.36), inset 0 1px 0 rgba(255,255,255,0.7); }
.hero-calc .mini-h .t{ font-size: 16px; }
.hero-calc .calc-val{ font-size: 16.5px; color: var(--cv-green-800); }
.hero-calc .slider{ height: 8px; background: linear-gradient(90deg, var(--cv-green-500), var(--cv-green-200)); }
.hero-calc .slider::-webkit-slider-thumb{ width: 26px; height: 26px; background: var(--cv-green-600); border: 4px solid #fff; box-shadow: 0 3px 9px rgba(10,20,18,0.32); }
.hero-calc .slider::-moz-range-thumb{ width: 26px; height: 26px; background: var(--cv-green-600); border: 4px solid #fff; box-shadow: 0 3px 9px rgba(10,20,18,0.32); }
.hero-calc .calc-out{ margin-top: 10px; padding: 13px 16px; border-top: none; border-radius: 16px; background: linear-gradient(135deg, rgba(224,169,78,0.20), rgba(191,224,204,0.30)); }
.hero-calc .calc-out .lbl{ color: var(--cv-green-800); }
.hero-calc .calc-out .amt{ font-size: 33px; color: var(--cv-green-800); }
/* Hero: foto APAISADA 3:2 (grupo completo, nadie recortado), centrada a la derecha; card cruza su esquina */
/* Hero: imagen FULL-BLEED que emerge del verde (borde izq. disuelto con curva orgánica) */
.hero{ overflow: hidden; }
.hero-media{ position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 1; overflow: hidden; pointer-events: none; animation: hero-emerge 1.3s var(--cv-ease-settle) 0.2s both; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.hero-media .hero-duo{ position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: none; mask-image: none; background-size: cover; background-position: 50% 62%; filter: none; animation: none; transform: none !important; }
.hero-media-grain{ position: absolute; inset: 0; background-image: url("assets/grain.png"); background-size: 160px 160px; mix-blend-mode: soft-light; opacity: 0.38; }
.hero .curve{ z-index: 4; }
.hero-stage{ position: relative; min-height: 500px; display: block; }
.hero-calc{ position: absolute; left: 0; right: auto; bottom: 4px; width: 246px; padding: 20px 22px 16px; z-index: 6; }
@media (max-width: 767px){
  .hero-media{ width: 100%; top: auto; height: 60%; bottom: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 44%); mask-image: linear-gradient(180deg, transparent 0%, #000 44%); }
  .hero-stage{ min-height: 300px; }
  .hero-calc{ left: auto; right: 0; bottom: 10px; width: 100%; max-width: 320px; }
}
/* Calculadora: proporciones premium con aire */
.hero-calc{ width: 324px; padding: 30px 30px 26px; bottom: 8px; box-shadow: 0 2px 6px rgba(10,20,18,0.10), 0 14px 30px rgba(10,20,18,0.20), 0 40px 82px rgba(10,20,18,0.42); }
.hero-calc .mini-h{ margin-bottom: 24px; gap: 11px; }
.hero-calc .mini-h .t{ font-size: 17px; }
.hero-calc .mini-h .ic{ width: 34px; height: 34px; }
.hero-calc .calc-row-top{ margin-bottom: 14px; }
.hero-calc .calc-label{ font-size: 14px; }
.hero-calc .calc-val{ font-size: 17px; color: var(--cv-green-800); }
.hero-calc .slider{ height: 8px; margin-bottom: 22px; }
.hero-calc .slider::-webkit-slider-thumb{ width: 28px; height: 28px; }
.hero-calc .slider::-moz-range-thumb{ width: 28px; height: 28px; }
.hero-calc .calc-out{ margin-top: 4px; padding: 18px 22px; border-radius: 18px; }
.hero-calc .calc-out .lbl{ font-size: 12.5px; margin-bottom: 5px; }
.hero-calc .calc-out .amt{ font-size: 40px; }
@media (max-width: 767px){ .hero-calc{ width: 100%; max-width: 340px; padding: 26px 24px 22px; } }

/* ==================================================================
   CAPA MÓVIL / TABLET · rama diseno/mobile-landing-login
   SOLO @media — no modifica ninguna regla base de escritorio.
   Registro de cambios en MOBILE-REFINEMENTS.md
   ================================================================== */

/* [M1] HERO móvil: la foto se queda ABAJO (fondo original) y la calculadora pasa a
   POPUP — un botón llamativo "Simula tu crédito" que abre un modal. Antes la calc
   inline tapaba a las personas. Implementado con checkbox puro (sin JS). */

/* Escritorio: los elementos del popup NO existen (la calc va inline como siempre) */
@media (min-width: 768px) {
  /* Popup del simulador SOLO en teléfonos (<768px). En tablet/escritorio (≥768px)
     va la calculadora inline de escritorio. */
  .calc-toggle, .calc-fab, .calc-backdrop, .calc-close { display: none !important; }
}

@media (max-width: 767px) {
  /* [BREAKPOINT] Hero 1-columna SOLO en teléfonos (<768px). En tablet (768–880px)
     el hero usa el layout de escritorio 2-columnas (calc inline + foto pareja). */
  .hero { padding-top: calc(var(--ln-nav-h) + 20px); }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  /* La foto vuelve a su fondo inferior original (no se reestructura). */
  .hero-stage { position: static; min-height: 0; height: auto; max-width: none; margin: 0; }

  /* Botón llamativo (abre el simulador) */
  .calc-fab {
    display: flex; align-items: center; gap: 12px; width: 100%; max-width: 380px;
    margin: 6px auto 0; height: 62px; padding: 0 20px; border: none; border-radius: 18px; cursor: pointer;
    background: linear-gradient(135deg, var(--ln-amber-soft) 0%, var(--ln-amber) 100%); color: #2A1A00;
    font-family: var(--cv-font-display); font-weight: 700; font-size: 16.5px;
    box-shadow: 0 12px 30px rgba(224,169,78,0.44); transition: transform 160ms, box-shadow 160ms;
  }
  .calc-fab:active { transform: translateY(1px); }
  .calc-fab-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,0.5); display: grid; place-items: center; }
  .calc-fab-t { text-align: left; }
  .calc-fab-go { margin-left: auto; display: inline-flex; }

  /* Fondo oscuro del modal — velo denso (0.85) para OCULTAR la página detrás:
     con 0.55 se transparentaba el borde recto de la sección Cifras tras el velo
     ("cuadriculado feo"). Un modal debe tapar parejo lo de atrás. */
  .calc-backdrop {
    display: block; position: fixed; inset: 0; z-index: 80; border: 0; padding: 0; cursor: pointer;
    background: rgba(10,17,15,0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity 260ms var(--cv-ease-settle), visibility 260ms;
  }

  /* La calculadora se vuelve un MODAL centrado, oculto hasta abrir */
  .hero-calc {
    position: fixed; left: 50%; top: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -44%) scale(0.98);
    width: calc(100% - 40px); max-width: 380px; z-index: 90;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 280ms var(--cv-ease-settle), transform 280ms var(--cv-ease-settle), visibility 280ms;
    animation: none !important;
  }
  .calc-close {
    display: grid; place-items: center; position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%; background: var(--cv-neutral-100);
    color: var(--cv-neutral-600); cursor: pointer; z-index: 3;
  }
  .calc-close:active { background: var(--cv-neutral-200); }

  /* Abierto */
  .calc-toggle:checked ~ .calc-backdrop { opacity: 1; visibility: visible; }
  .calc-toggle:checked ~ .hero-calc { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

  /* [M1.0] FIX apilamiento (dos contextos atrapaban al modal position:fixed):
     (a) El modal vive dentro del hero (z-index:3); las secciones siguientes
         (Cifras, footer…) pintaban encima en ciertos scrolls. → Al abrir elevamos
         TODO el hero por encima de las demás secciones.
     (b) DENTRO del hero, el modal cuelga de .wrap (position:relative; z-index:2),
         que crea su propio contexto de apilamiento; la onda .curve-bot (z-index:4)
         es hermana de .wrap, así que 4 > 2 la pintaba SOBRE todo el .wrap (incluido
         el modal, sin importar su z-90 interno) → banda crema cortando la calculadora.
         → Al abrir elevamos .wrap por encima de la onda.
     Solo móvil; el backdrop denso tapa el resto del hero, sin efecto colateral. */
  .hero:has(.calc-toggle:checked) { z-index: 200; }
  .hero:has(.calc-toggle:checked) .wrap { z-index: 90; }
  /* Bloquea el scroll del fondo mientras el modal está abierto (comportamiento
     estándar de modal): el contenedor de scroll es <html>. Así el fondo no se
     mueve y el modal siempre queda sobre el hero. */
  html:has(.calc-toggle:checked) { overflow: hidden; }

  /* [M1.1] El botón del simulador en VERDE (no ámbar) para no chocar con el CTA
     principal "Solicita tu crédito". Jerarquía: ámbar = acción principal, verde = simular. */
  .calc-fab { background: linear-gradient(135deg, var(--cv-green-600) 0%, #3C5A55 100%); color: #fff; box-shadow: 0 12px 30px rgba(31,45,43,0.42); }
  .calc-fab-ic { background: rgba(255,255,255,0.18); }

  /* [M1.2] Sellos legibles sobre la foto: chips con velo oscuro (antes: blanco sobre foto clara = invisible),
     ambos del MISMO ancho (full-width) para que queden alineados y parejos. */
  .hero-seals { flex-direction: column; align-items: stretch; gap: 10px; max-width: 380px; }
  .seal { width: 100%; max-width: none; background: rgba(12,20,18,0.46); padding: 12px 14px; border-radius: 13px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

  /* [M1.3] CTAs del hero: FULL-WIDTH apilados (patrón móvil) en vez de auto-width flotando.
     Botón cómodo al tacto y ancho consistente con el de "Simula tu crédito". */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; max-width: 380px; }
  .hero-ctas .btn { width: 100%; }
  /* pills más compactas en móvil para no densificar el hero */
  .hero-feats { gap: 8px; margin: 16px 0 0; }
  .hero-feat { font-size: 12.5px; padding: 6px 11px; }

  /* [M4] "Ingresar" SALE de la barra del nav (evitaba 3 botones amontonados a la derecha
     = desbalanceado) y pasa a ser un ítem DESTACADO en ÁMBAR dentro del menú hamburguesa.
     Nav queda limpio: logo (izq) + menú (der). */
  .nav-cta { display: none; }
  .nav-menu-cta {
    display: flex !important; align-items: center; justify-content: center; gap: 9px;
    margin-top: 10px; padding: 15px 4px !important; border-bottom: none !important;
    border-radius: 13px; font-family: var(--cv-font-display); font-weight: 700; font-size: 16px;
    background: linear-gradient(135deg, var(--ln-amber-soft) 0%, var(--ln-amber) 100%);
    color: #2A1A00 !important; box-shadow: 0 8px 20px rgba(224,169,78,0.4);
  }

  /* [M5] Hero móvil: copy CORTO en móvil (el largo quitaba imagen). Desktop conserva
     el copy completo vía hero-sub-full. Sin "Conoce más" ni sellos. */
  .hero-sub-full { display: none; }
  .hero-sub-short { display: inline; }
  .hero-sub { font-size: 16.5px; line-height: 1.5; margin-top: 14px; color: rgba(255,255,255,0.78); max-width: 340px; }
  .hero-ctas .btn-ghost-lite { display: none; }   /* fuera "Conoce más" */
  .hero-seals { display: none; }                    /* sellos → viven en el footer */

  /* [M6] Estructura del hero móvil: kicker chico y MUY pegado al título; CTAs
     compactos, JUNTOS entre sí y BAJADOS al pie de la foto (sobre las piernas, no
     sobre las caras). La imagen sube para dejar las caras despejadas arriba. */
  .hero-eyebrow.kick { margin-bottom: 4px; font-size: 11px; letter-spacing: 0.1em; gap: 8px; }
  .hero-eyebrow.kick::before { width: 15px; }
  /* [M7] Los dos botones en UNA fila, al PIE de la foto (sobre las piernas).
     "Solicita" (columna de texto) y "Simula" (stage) están en contenedores
     distintos, así que los anclo en absoluto al fondo del hero-grid, lado a lado.
     La columna de texto reserva altura para que la foto (las caras) se vea encima. */
  .hero-grid { position: relative; gap: 0; }
  .hero-grid > *:first-child { padding-bottom: 210px; }   /* reserva foto + fila de botones */
  .hero-stage { position: static; min-height: 0; }
  .hero { padding-bottom: 24px; }
  /* Botones POR ENCIMA de la onda (que mide ~60px): bottom 66px los deja sobre las
     piernas visibles, sin que la curva crema los corte. */
  .hero-ctas, .calc-fab {
    position: absolute; bottom: 66px; margin: 0; width: calc(50% - 5px); height: 60px; z-index: 5;
  }
  /* Ambos botones: texto centrado a 2 líneas, SIN iconos (compactos y simétricos). */
  .hero-ctas { left: 0; gap: 0; }
  .hero-ctas .btn-lg { width: 100%; height: 60px; padding: 0 10px; gap: 0;
    justify-content: center; text-align: center; white-space: normal; line-height: 1.14; font-size: 13.5px; }
  .hero-ctas .btn-lg svg { display: none; }                /* fuera la flecha */
  .calc-fab { right: 0; left: auto; max-width: none; padding: 0 10px;
    justify-content: center; text-align: center; line-height: 1.14; font-size: 13.5px; }
  .calc-fab-t { text-align: center; }
  .calc-fab-ic, .calc-fab-go { display: none; }            /* fuera iconos */
  /* Foto MÓVIL: imagen GENERAL de comunidad (muchas personas) — SOLO en móvil.
     Enmascarada: arriba verde (texto nítido), la foto aparece abajo (el grupo). */
  .ph-caribe { background-image: url("assets/hero-3perfiles-v2.png"); }
  .hero-media { height: 94%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, #000 66%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, #000 66%); }
  .hero-media .hero-duo { background-position: 50% 100%; }

  /* [M5.1] LA ONDA ES PARTE DE CIFRAS (no del hero). Antes la onda era un crema
     PLANO y el borde de Cifras es crema + tintes ámbar/terracota → costura de color
     inevitable. Ahora Cifras recorta su propio borde superior en onda con una máscara
     y se monta sobre la foto: la curva tiene EXACTAMENTE el mismo fondo tintado que la
     sección → imposible que haya costura. Ocultamos la onda del hero en móvil. */
  .hero > .curve-bot { display: none; }
  .cifras {
    position: relative; z-index: 5;      /* por encima del hero (z3) → se monta sobre la foto */
    margin-top: -66px;                    /* sube y solapa el filo de la foto */
    padding-top: 82px;                    /* contenido justo bajo la curva (sin espacio muerto) */
    -webkit-mask:
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,40%20C300,6%20520,6%20760,38%20C1010,72%201220,72%201440,38%20L1440,90%20L0,90%20Z'%20fill='%23fff'/%3E%3C/svg%3E") top/100% 66px no-repeat,
      linear-gradient(#000,#000) bottom/100% calc(100% - 64px) no-repeat;
    -webkit-mask-composite: source-over;
    mask:
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,40%20C300,6%20520,6%20760,38%20C1010,72%201220,72%201440,38%20L1440,90%20L0,90%20Z'%20fill='%23fff'/%3E%3C/svg%3E") top/100% 66px no-repeat,
      linear-gradient(#000,#000) bottom/100% calc(100% - 64px) no-repeat;
    mask-composite: add;
  }
}

/* ===== TABLET (768–880px) = layout de ESCRITORIO 2-columnas =====
   Decisión: en tablet el hero usa el 2-columnas de escritorio (calc inline + foto
   pareja + sellos), no el 1-columna móvil. Se logró bajando el punto de colapso del
   hero de 880px a 767px (ver reglas [BREAKPOINT] arriba y el ocultar-popup a ≥768px).
   No hace falta un bloque propio: ≥768px hereda todo el diseño de escritorio. */

/* ============================================================
   HERO CLARO — giro de colorimetría (crema cálido) + estructura
   (foto enmarcada + calculadora al lado + selector de grupos).
   Bloque autoritativo: va al final para ganar en cascada a las
   reglas del hero verde antiguo. Alcance: SOLO el hero.
   ============================================================ */
.hero.hero-light {
  position: relative; isolation: isolate; overflow: hidden; color: var(--ln-ink);
  background:
    radial-gradient(72% 60% at 90% -6%, rgba(224,169,78,0.16) 0%, rgba(224,169,78,0) 56%),
    radial-gradient(64% 62% at 2% 104%, rgba(150,196,174,0.34) 0%, rgba(150,196,174,0) 60%),
    linear-gradient(168deg, #FEFCF8 0%, var(--ln-cream) 46%, #F2ECDF 100%);
}
.hero-light .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-light .hero-glow { position: absolute; top: -14%; right: -6%; width: 60%; height: 78%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(191,224,204,0.5) 0%, rgba(191,224,204,0.12) 46%, rgba(191,224,204,0) 74%);
  filter: blur(30px); animation: aura 16s ease-in-out infinite; }

/* Texto oscuro sobre claro */
.hero-light .hero-eyebrow.kick { color: var(--cv-green-700); }
.hero-light .hero-title { color: var(--ln-ink); }
.hero-light .hero-title em { color: var(--cv-green-600); }
.hero-light .hero-sub { color: var(--cv-neutral-700); }

/* Píldoras de features → glass claro */
.hero-light .hero-feat { background: #fff; border: 1px solid rgba(20,50,44,0.10);
  color: var(--cv-green-800); box-shadow: 0 2px 8px rgba(20,45,38,0.06); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-light .hero-feat svg { color: var(--cv-green-500); }

/* Botón fantasma "Conoce más" para fondo claro */
.hero-light .btn-ghost-lite { background: #fff; color: var(--cv-green-800); border: 1.5px solid rgba(20,50,44,0.16); box-shadow: 0 2px 8px rgba(20,45,38,0.06); }
.hero-light .btn-ghost-lite:hover { background: var(--ln-cream); color: var(--cv-green-900); border-color: rgba(20,50,44,0.26); }

/* Sellos legibles sobre claro */
.hero-light .seal { color: var(--cv-neutral-600); }
.hero-light .seal-ic { background: var(--cv-green-50); border: 1px solid rgba(20,50,44,0.10); color: var(--cv-green-700); }

/* Selector de grupos (aire de la referencia) */
.hero-groups { margin: 24px 0 0; }
.hero-groups-q { display: block; font-family: var(--cv-font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.01em; color: var(--cv-neutral-600); margin: 0 0 11px; }
.hero-group-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.hgroup-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hgroup { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px;
  border-radius: 14px; background: #fff; border: 1.5px solid rgba(20,50,44,0.12); color: var(--cv-neutral-700);
  font-family: var(--cv-font-display); font-weight: 600; font-size: 14px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(20,45,38,0.05);
  transition: border-color 170ms var(--cv-ease-settle), background 170ms, color 170ms, box-shadow 200ms, transform 170ms; }
.hgroup svg { color: var(--cv-green-500); flex-shrink: 0; transition: color 170ms; }
.hgroup:hover { border-color: rgba(20,50,44,0.26); transform: translateY(-1px); }
.hgroup-in:checked + .hgroup { background: var(--cv-green-600); border-color: var(--cv-green-600); color: #fff; box-shadow: 0 10px 22px rgba(31,74,66,0.26); }
.hgroup-in:checked + .hgroup svg { color: var(--ln-sage); }
.hgroup-in:focus-visible + .hgroup { outline: 3px solid rgba(79,111,107,0.45); outline-offset: 2px; }

/* Escenario derecho: foto ENMARCADA (contenida) + calculadora al lado */
.hero-light .hero-stage { position: relative; min-height: 0; display: block; }
.hero-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 600px; border-radius: 26px;
  overflow: hidden; isolation: isolate; box-shadow: 0 2px 6px rgba(20,45,38,0.10), 0 26px 60px rgba(20,45,38,0.22);
  background: var(--ln-cream-2); }
.hero-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  background: linear-gradient(180deg, rgba(20,40,35,0) 58%, rgba(20,40,35,0.14) 100%); }
.hero-frame-img { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: 50% 20%;
  animation: kenburns 26s ease-in-out infinite alternate; will-change: transform; }
.hero-frame-badge { position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; font-family: var(--cv-font-display); font-weight: 700; font-size: 12.5px;
  color: var(--cv-green-900); background: rgba(255,255,255,0.86); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 8px 22px rgba(20,45,38,0.18); }
.hero-frame-badge svg { color: var(--cv-green-600); }

/* Calculadora: FUERA del personaje — flota en la esquina inferior izquierda, sobre la crema.
   SOLO escritorio (≥768px): en móvil la calculadora es un modal (position:fixed) y no debe
   heredar este posicionamiento absoluto, que rompía el centrado del popup. */
@media (min-width: 768px) {
  .hero-light .hero-calc { position: absolute; left: -40px; right: auto; top: auto; bottom: -58px; width: 292px;
    padding: 24px 26px 22px; z-index: 6; background: rgba(255,255,255,0.96); border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 10px rgba(20,45,38,0.12), 0 22px 54px rgba(20,45,38,0.28), inset 0 1px 0 rgba(255,255,255,0.7); }
}

/* Nav sobre hero claro: la píldora translúcida oscura sube de opacidad para que el
   texto blanco y el wordmark sigan legibles sobre crema (el estado .solid no cambia). */
.nav:not(.solid) .nav-inner { background: rgba(22,52,46,0.55); border-color: rgba(191,224,204,0.26);
  backdrop-filter: blur(13px) saturate(135%); -webkit-backdrop-filter: blur(13px) saturate(135%); box-shadow: 0 10px 30px rgba(15,32,27,0.20); }

/* ---------- MÓVIL: stack limpio (texto → selector → foto → CTAs) ---------- */
@media (max-width: 767px) {
  .hero.hero-light { padding: calc(var(--ln-nav-h) + 40px) 0 40px; }
  .hero-light .hero-grid { grid-template-columns: 1fr; gap: 24px; position: static; }
  .hero-light .hero-grid > .hero-copy { padding-bottom: 0; }
  .hero-light .hero-sub { color: var(--cv-neutral-700); max-width: none; }
  .hero-light .hero-groups { margin-top: 18px; }
  .hero-light .hero-group-opts { gap: 8px; }
  .hero-light .hgroup { font-size: 13px; padding: 8px 13px; min-height: 42px; }

  .hero-light .hero-stage { position: relative; min-height: 0; }
  .hero-light .hero-frame { aspect-ratio: 3 / 4; max-height: 400px; }
  .hero-light .hero-frame-img { background-position: 50% 24%; }

  /* CTAs y el botón "Simula" vuelven al flujo normal, apilados a lo ancho */
  .hero-light .hero-ctas { position: static; flex-direction: column; align-items: stretch; gap: 12px;
    width: auto; height: auto; margin: 20px 0 0; max-width: none; }
  .hero-light .hero-ctas .btn-lg { width: 100%; height: auto; padding: 16px 18px; font-size: 15px; line-height: 1.2; white-space: normal; }
  .hero-light .hero-ctas .btn-lg svg { display: inline; }
  .hero-light .hero-ctas .btn-ghost-lite { display: none; }
  .hero-light .calc-fab { position: static; width: 100%; max-width: none; height: auto; margin: 12px 0 0;
    padding: 15px 18px; justify-content: center; z-index: auto; }
  .hero-light .calc-fab-ic, .hero-light .calc-fab-go { display: inline-flex; }
  .hero-light .calc-fab-t { text-align: left; }
  .hero-light .hero-seals { display: none; }
}

/* ============================================================
   COSTURA hero→Cifras (ESCRITORIO): la onda deja de ser un elemento aparte
   del hero (cuyo relleno crema puro creaba una franja brillante = "salto blanco")
   y pasa a ser el BORDE SUPERIOR de Cifras, recortado en onda con máscara. Así la
   onda es EXACTAMENTE del mismo color/tinte que la sección → cero costura.
   (Mismo criterio que el bloque móvil M5.1.)
   ============================================================ */
@media (min-width: 768px) {
  .hero-light > .curve-bot { display: none; }
  .cifras {
    position: relative; z-index: 5;
    margin-top: -60px;
    -webkit-mask:
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,42%20C300,92%20560,4%20760,34%20C980,66%201180,96%201440,44%20L1440,90%20L0,90%20Z'%20fill='%23fff'/%3E%3C/svg%3E") top/100% 60px no-repeat,
      linear-gradient(#000,#000) bottom/100% calc(100% - 58px) no-repeat;
    -webkit-mask-composite: source-over;
    mask:
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,42%20C300,92%20560,4%20760,34%20C980,66%201180,96%201440,44%20L1440,90%20L0,90%20Z'%20fill='%23fff'/%3E%3C/svg%3E") top/100% 60px no-repeat,
      linear-gradient(#000,#000) bottom/100% calc(100% - 58px) no-repeat;
    mask-composite: add;
  }
}

/* ============================================================
   HERO CLARO v2 — FOTO PROTAGONISTA (referencia): foto grande centrada-derecha,
   calculadora arriba-derecha (fuera de las personas) con CTAs dentro, y selector
   de grupos flotante abajo-centro. Va al final = autoritativo.
   SOLO ESCRITORIO real (≥1024): en tablet/móvil hay poco ancho para 3 columnas
   (texto+calc+grupos) → se usa el stack limpio de abajo. */
@media (min-width: 1024px) {
  .hero.hero-light { padding: calc(var(--ln-nav-h) + 44px) 0 0; overflow: hidden; }
  .hero-light .hero-wrap { position: relative; min-height: 612px; }

  /* Foto FULL-BLEED de borde a borde: la nueva imagen ya trae a las 3 personas al
     CENTRO con aire a los lados → el texto va sobre el vacío izq. y la calc sobre el
     vacío der. Un velo crema a la izquierda asegura la legibilidad del texto. */
  /* Foto anclada a ~43% del contenedor (NO a todo el viewport): así SIEMPRE empieza a
     la derecha del texto → las caras nunca se montan sobre el texto, en cualquier ancho.
     Sangra a la derecha (borde viewport). Borde izq. disuelto en la crema. */
  .hero-light .hero-photo { position: absolute;
    top: calc(-1 * (var(--ln-nav-h) + 44px)); bottom: -76px;
    left: 43%; right: calc(50% - 50vw); width: auto; margin-left: 0; height: auto;
    z-index: 1; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%); animation: none; }
  .hero-light .hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%;
    background-size: cover; background-position: 52% 24%; filter: none; animation: none; transform: none !important; }
  .hero-light .hero-photo::after { display: none; }

  /* Copy izquierda — compacta, cabe por encima de la tarjeta de grupos */
  .hero-light .hero-copy { position: relative; z-index: 3; max-width: 392px; padding-top: 6px; }
  .hero-light .hero-title { font-size: clamp(33px, 3.5vw, 50px); }
  .hero-light .hero-sub { margin-top: 16px; max-width: 368px; }
  .hero-light .hero-feats { margin-top: 18px; }

  /* Calculadora arriba-derecha. En pantallas anchas SANGRA a la derecha (sobre la
     recepción/plantas), para no caer sobre el militar. En ≤1180 queda al borde del wrap. */
  .hero-light .hero-stage { position: absolute; top: 0; right: min(0px, calc(50% - 50vw + 30px));
    z-index: 6; width: 326px; min-height: 0; display: block; }
  .hero-light .hero-calc { position: static; left: auto; right: auto; top: auto; bottom: auto; width: 100%;
    padding: 22px 24px 20px; background: rgba(255,255,255,0.97); border: 1px solid rgba(255,255,255,0.92);
    box-shadow: 0 4px 12px rgba(20,45,38,0.12), 0 24px 60px rgba(20,45,38,0.26), inset 0 1px 0 rgba(255,255,255,0.7); }
  .hero-light .hero-calc .mini-h { justify-content: center; }

  /* Selector de grupos flotante abajo-centro — POR ENCIMA de la onda (bottom > 60px),
     a la DERECHA del texto (sobre la foto, sin tocar features) y sin chocar con la calc. */
  .hero-light .hero-groups-card { position: absolute; left: 40%; right: 344px; bottom: 84px; z-index: 5; width: auto; }
  .hero-light .hero-groups-card .hero-groups-q { margin-bottom: 11px; font-size: 14px; }
  .hero-light .hero-groups-card .hero-group-opts { gap: 9px; }
  .hero-light .hero-groups-card .hgroup { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 12px; }
  .hero-light .hero-groups-card .hgroup-go { position: absolute; top: 12px; right: 11px; }
  .hero-light .hero-groups-card .hgroup { position: relative; }
  .hero-light .hero-groups-card .hgroup-ic { width: 34px; height: 34px; border-radius: 10px; }
  .hero-light .hero-groups-card .hgroup-t { font-size: 12.5px; line-height: 1.16; }
}

/* Calc: fila de acciones (Solicitar + Conoce más) — todas las anchuras */
.calc-actions { margin-top: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.calc-actions .btn { width: 100%; }
.calc-more { text-align: center; font-family: var(--cv-font-display); font-weight: 700; font-size: 14px;
  color: var(--cv-green-700); padding: 4px; transition: color 160ms; }
.calc-more:hover { color: var(--cv-green-900); text-decoration: underline; }

/* Tarjeta del selector de grupos */
.hero-groups-card { padding: 18px 20px; background: rgba(255,255,255,0.9);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.8); border-radius: 20px; box-shadow: 0 18px 46px rgba(20,45,38,0.20); }
.hero-groups-card .hero-groups-q { display: block; text-align: center; font-family: var(--cv-font-display);
  font-weight: 700; font-size: 15px; letter-spacing: 0; color: var(--cv-neutral-800); margin: 0 0 14px; text-transform: none; }
.hero-groups-card .hero-group-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Opciones de grupo como tarjetas (icono + label + chevron) */
.hero-groups-card .hgroup-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hero-groups-card .hgroup { display: flex; align-items: center; gap: 11px; min-height: 0; padding: 12px 13px;
  border-radius: 14px; background: #fff; border: 1.5px solid rgba(20,50,44,0.12); cursor: pointer; white-space: normal;
  box-shadow: 0 1px 3px rgba(20,45,38,0.05);
  transition: border-color 170ms var(--cv-ease-settle), box-shadow 200ms, transform 170ms, background 170ms; font-family: var(--cv-font-display); }
.hero-groups-card .hgroup:hover { border-color: rgba(20,50,44,0.28); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20,45,38,0.12); }
.hero-groups-card .hgroup svg { color: inherit; }
.hero-groups-card .hgroup-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--cv-green-50); color: var(--cv-green-700); }
.hero-groups-card .hgroup-t { flex: 1; font-weight: 600; font-size: 13.5px; line-height: 1.2; color: var(--cv-neutral-800); }
.hero-groups-card .hgroup-go { flex-shrink: 0; color: var(--cv-neutral-400); display: inline-flex; }
.hero-groups-card .hgroup-in:checked + .hgroup { border-color: var(--cv-green-600); background: var(--cv-green-50); box-shadow: 0 8px 22px rgba(31,74,66,0.18); }
.hero-groups-card .hgroup-in:checked + .hgroup .hgroup-ic { background: var(--cv-green-600); color: #fff; }
.hero-groups-card .hgroup-in:checked + .hgroup .hgroup-go { color: var(--cv-green-600); }
.hero-groups-card .hgroup-in:focus-visible + .hgroup { outline: 3px solid rgba(79,111,107,0.45); outline-offset: 2px; }

/* ---------- MÓVIL + TABLET v2: stack (texto → foto → calc/botón → grupos) ----------
   Hasta 1023px se apila (en tablet no cabe la composición de 3 columnas del hero).
   El padding inferior (86px) evita que la onda de Cifras corte la última tarjeta. */
@media (max-width: 1023px) {
  .hero.hero-light { padding: calc(var(--ln-nav-h) + 34px) 0 86px; }
  .hero-light .hero-wrap { display: flex; flex-direction: column; position: static; }
  .hero-light .hero-copy { order: 0; max-width: none; }
  .hero-light .hero-photo { order: 1; position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: 100%; height: auto; aspect-ratio: 4 / 3; margin-top: 22px; border-radius: 20px; overflow: hidden;
    -webkit-mask-image: none; mask-image: none; box-shadow: 0 20px 46px rgba(20,45,38,0.18); }
  .hero-light .hero-photo-img { background-position: 50% 20%; }
  .hero-light .hero-stage { order: 2; position: static; width: auto; margin-top: 18px; min-height: 0; }
  .hero-light .hero-groups-card { order: 3; position: static; width: auto; margin-top: 18px; left: auto; bottom: auto; background: #fff; }
  .hero-light .hero-groups-card .hero-group-opts { grid-template-columns: 1fr; }
}

/* TABLET (768–1023): la calculadora va INLINE (el fab/​modal está oculto a ≥768). */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-light .hero-calc { position: static; left: auto; top: auto; right: auto; bottom: auto; transform: none !important;
    opacity: 1 !important; visibility: visible !important; width: auto; max-width: none; margin: 0;
    background: #fff; border: 1px solid rgba(20,50,44,0.10); box-shadow: 0 14px 34px rgba(20,45,38,0.14);
    animation: none !important; }
}

/* MÓVIL (<768): se conserva el concepto ORIGINAL — botón "Simula tu crédito" que
   abre la calculadora como MODAL. (El bloque de modal más arriba, a ≤767px, sigue
   mandando; aquí solo aseguramos que el botón quede centrado y ancho en el stack.) */
@media (max-width: 767px) {
  .hero-light .hero-stage { display: flex; }
  .hero-light .calc-fab { margin: 4px auto 0; }
}

/* ============================================================
   REBALANCE (Opción A): CTA principal EN LA IZQUIERDA (ancla que contrapesa la
   calc y llena el pie), calc = simulador puro (CTA fuera), grupos centrados y
   separados. Corrige: derecha sobrecargada, pila de 18px, vacío inferior-izq.
   ============================================================ */
/* Botón fantasma para fondo CLARO ("Conoce más") */
.btn-ghost-cv { background: rgba(255,255,255,0.60); color: var(--cv-green-800);
  border: 1.5px solid rgba(20,50,44,0.20); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: background 160ms, border-color 160ms, transform 160ms; }
.btn-ghost-cv:hover { background: rgba(255,255,255,0.86); border-color: rgba(20,50,44,0.34); transform: translateY(-1px); }

.hero-light .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-more-link { align-self: center; color: var(--cv-green-800); font-family: var(--cv-font-display);
  font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
  transition: color 160ms, transform 160ms; }
.hero-more-link:hover { color: var(--cv-green-900); transform: translateY(-1px); }

@media (min-width: 1024px) {
  .hero-light .hero-copy { max-width: 436px; }
  .hero-light .hero-ctas { margin-top: 24px; }
  /* Grupos: bajo la gente y por DEBAJO de la calc (ahora más corta), con aire real.
     Empiezan a la derecha del CTA izquierdo (con separación cómoda). */
  .hero-light .hero-groups-card { left: 43.5%; right: 164px; bottom: 34px; }
}

/* Móvil + tablet: CTAs a lo ancho, apilados (el principal queda visible sin abrir el modal) */
@media (max-width: 1023px) {
  .hero-light .hero-ctas { flex-direction: column; align-items: stretch; margin-top: 20px; }
  .hero-light .hero-ctas .btn-lg { width: 100%; }
  .hero-light .hero-ctas .hero-more-link { align-self: center; padding: 6px 10px; }
}

@media (max-width: 1023px) { .hero-light .hero-tools { display: contents; } }


/* ============================================================
   Selector de grupo COMPACTO y sutil DENTRO del simulador (parte de la calc).
   ============================================================ */
.calc-groups { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--cv-neutral-300); }
.calc-groups-q { display: block; font-family: var(--cv-font-body); font-size: 11.5px; font-weight: 700;
  color: var(--cv-neutral-500); margin-bottom: 8px; }
.calc-group-opts { display: flex; gap: 6px; }
.calc-groups .hgroup-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hgpill { flex: 1 1 0; text-align: center; padding: 7px 6px; border-radius: 9px; cursor: pointer;
  background: var(--cv-neutral-100); border: 1px solid transparent; color: var(--cv-neutral-600);
  font-family: var(--cv-font-display); font-weight: 600; font-size: 12px; white-space: nowrap;
  transition: background 150ms, color 150ms, border-color 150ms; }
.hgpill:hover { background: var(--cv-neutral-200); }
.calc-groups .hgroup-in:checked + .hgpill { background: var(--cv-green-50); color: var(--cv-green-800); border-color: var(--cv-green-500); }
.calc-groups .hgroup-in:focus-visible + .hgpill { outline: 2px solid rgba(79,111,107,0.5); outline-offset: 1px; }

/* ============================================================
   CALCULADORA HORIZONTAL DESPLEGABLE al pie del hero (bajo las personas).
   Colapsada = barra (marca + cuota + Personalizar). Expandida = panel arriba
   (sliders + grupos). Checkbox puro (#calc-expand), sin JS para el toggle.
   ============================================================ */
.calc-bar { border-radius: 20px; overflow: hidden; display: block; }
.calc-bar .cbar-head { display: flex; align-items: center; gap: 18px; padding: 13px 20px; cursor: pointer; user-select: none; }
.cbar-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cv-font-display); font-weight: 700; font-size: 14.5px; color: var(--cv-neutral-900); white-space: nowrap; }
.cbar-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--cv-green-50); color: var(--cv-green-700); display: grid; place-items: center; flex-shrink: 0; }
.cbar-est { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; text-align: right; }
.cbar-est-lbl { font-family: var(--cv-font-body); font-size: 10px; font-weight: 700; color: var(--cv-neutral-500); text-transform: uppercase; letter-spacing: 0.05em; }
.cbar-est-amt { font-family: var(--cv-font-display); font-weight: 700; font-size: 21px; color: var(--cv-green-800); letter-spacing: -0.01em; font-feature-settings: "tnum" 1; }
.cbar-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; background: var(--cv-green-600); color: #fff; font-family: var(--cv-font-display); font-weight: 700; font-size: 13px; white-space: nowrap; flex-shrink: 0; transition: background 160ms; }
.calc-bar .cbar-head:hover .cbar-toggle { background: var(--cv-green-700); }
.cbar-chev { transition: transform 320ms var(--cv-ease-settle); }
.cbar-toggle-t.t-close { display: none; }
.calc-expand:checked ~ .cbar-head .cbar-chev { transform: rotate(180deg); }
.calc-expand:checked ~ .cbar-head .t-open { display: none; }
.calc-expand:checked ~ .cbar-head .t-close { display: inline; }
.calc-expand:checked ~ .cbar-head { border-top: 1px solid rgba(20,50,44,0.10); }

/* Panel desplegable (arriba de la cabecera) */
.cbar-panel { max-height: 0; overflow: hidden; transition: max-height 440ms var(--cv-ease-settle); }
.calc-expand:checked ~ .cbar-panel { max-height: 220px; }
.cbar-fields { display: flex; gap: 26px; padding: 18px 22px 6px; }
.cbar-field { flex: 1 1 0; }
.cbar-field-top { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 7px; }
.cbar-field .calc-label { font-family: var(--cv-font-body); font-size: 12.5px; font-weight: 700; color: var(--cv-neutral-600); }
.cbar-field .calc-val { font-family: var(--cv-font-display); font-weight: 700; font-size: 14.5px; color: var(--cv-green-700); }
.cbar-field .slider { width: 100%; margin: 0; }
.cbar-groups { display: flex; align-items: center; gap: 12px; padding: 6px 22px 16px; }
.cbar-groups-q { font-family: var(--cv-font-body); font-size: 12px; font-weight: 700; color: var(--cv-neutral-500); white-space: nowrap; flex-shrink: 0; }
.cbar-groups .calc-group-opts { flex: 1 1 auto; }

/* Posición: barra al PIE, bajo las personas (columna derecha). Se ancla abajo y
   se expande hacia ARRIBA (el panel crece sobre las piernas, no sobre las caras). */
@media (min-width: 1024px) {
  /* bottom: 84px → sube la barra FUERA de la franja de ~60px donde Cifras dibuja su
     ola (seam). Así la cremita ya no le recorta el borde inferior y queda menos "abajo". */
  .hero-light .hero-tools { position: absolute; left: 44%; right: 0; bottom: 84px; z-index: 6; display: block; }
  .hero-light .calc-bar { width: 100%; }
}

/* Piezas SOLO del modal móvil: ocultas en escritorio (la barra desplegable manda) */
.cbar-backdrop, .cbar-modal-top, .cbar-modal-est { display: none; }

/* ============================================================
   MÓVIL/TABLET (≤1023): la calc vuelve a ser BOTÓN + MODAL (pop-up), IDÉNTICO a antes.
   La cabecera = botón verde "Simula tu crédito"; el panel = modal centrado con velo.
   ============================================================ */
@media (max-width: 1023px) {
  .hero-light .hero-tools .calc-bar { order: 2; }
  .calc-bar { overflow: visible; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }

  /* Cabecera → botón "Simula tu crédito" (fab verde), como antes */
  .calc-bar .cbar-head { display: flex; align-items: center; width: 100%; max-width: 380px; margin: 4px auto 0; height: 60px;
    padding: 0 22px; border-radius: 18px; background: linear-gradient(135deg, var(--cv-green-600) 0%, #3C5A55 100%);
    color: #fff; box-shadow: 0 12px 30px rgba(31,45,43,0.42); border-top: 0; }
  .calc-bar .cbar-brand { color: #fff; font-size: 16px; }
  .calc-bar .cbar-ic { background: rgba(255,255,255,0.18); color: #fff; }
  .calc-bar .cbar-est { display: none; }
  .calc-bar .cbar-toggle { margin-left: auto; background: none; padding: 0; color: #fff; }
  .calc-bar .cbar-toggle-t { display: none !important; }
  .calc-bar .cbar-chev { transform: rotate(90deg); width: 20px; height: 20px; }
  .calc-expand:checked ~ .cbar-head .cbar-chev { transform: rotate(90deg); }

  /* Velo del modal */
  .cbar-backdrop { display: block; position: fixed; inset: 0; z-index: 200; border: 0; cursor: pointer;
    background: rgba(10,17,15,0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity 260ms var(--cv-ease-settle), visibility 260ms; }
  .calc-expand:checked ~ .cbar-backdrop { opacity: 1; visibility: visible; }

  /* Panel → MODAL centrado (pop-up), vertical */
  .cbar-panel { position: fixed; left: 50%; top: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -44%) scale(0.98); width: calc(100% - 40px); max-width: 380px; max-height: none !important;
    z-index: 210; background: #fff; border-radius: 22px; box-shadow: 0 30px 70px rgba(10,18,16,0.5);
    opacity: 0; visibility: hidden; pointer-events: none; overflow: visible; padding: 4px 6px 10px;
    transition: opacity 280ms var(--cv-ease-settle), transform 280ms var(--cv-ease-settle), visibility 280ms; }
  .calc-expand:checked ~ .cbar-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
  html:has(.calc-expand:checked) { overflow: hidden; }

  /* Contenido del modal */
  .cbar-modal-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 4px; }
  .cbar-modal-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--cv-font-display); font-weight: 700; font-size: 15.5px; color: var(--cv-neutral-900); }
  .cbar-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cv-neutral-100); color: var(--cv-neutral-600); cursor: pointer; }
  .cbar-panel .cbar-fields { flex-direction: column; gap: 2px; padding: 10px 18px 4px; }
  .cbar-panel .cbar-groups { flex-wrap: wrap; padding: 6px 18px 10px; }
  .cbar-panel .cbar-groups-q { width: 100%; margin-bottom: 4px; }
  .cbar-modal-est { display: block; text-align: center; padding: 13px 16px; margin: 2px 14px 6px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(224,169,78,0.18), rgba(191,224,204,0.30)); }
  .cbar-modal-est-lbl { display: block; font-family: var(--cv-font-body); font-size: 11.5px; font-weight: 700; color: var(--cv-green-800); }
  .cbar-modal-est-amt { font-family: var(--cv-font-display); font-weight: 700; font-size: 31px; color: var(--cv-green-800); line-height: 1.1; }
}

/* FIX móvil: la barra no debe tener transform (float-in) o el modal fixed se ancla a
   ella en vez del viewport. Sin transform → el modal se centra en la pantalla. */
@media (max-width: 1023px) {
  .calc-bar.float-in, .calc-bar { animation: none !important; transform: none !important; }
}

/* FIX apilamiento móvil: el hero es isolation:isolate con z-index:3, y .cifras es z5,
   así que la 2ª sección se pintaba ENCIMA del modal (que vive DENTRO del hero, aunque
   sea position:fixed su orden de pintado queda atrapado en el contexto del hero).
   Al abrir el modal elevamos TODO el hero por encima del resto (mismo patrón que ya
   usaba el código original), para que la card + el velo queden sobre toda la página y
   todo lo demás quede bajo el blur. Cerrado vuelve a z3 → el seam con Cifras queda intacto. */
@media (max-width: 1023px) {
  .hero.hero-light:has(.calc-expand:checked) { z-index: 300; }
}

/* ============================================================
   POLISH v2 — pulidos móvil/tablet + desktop CTAs en 1 línea + foto con "alma".
   ============================================================ */

/* (1) DESKTOP: los dos CTAs del hero en UNA sola línea (lado a lado, no apilados).
   Se compactan un poco (16px / padding 22) para caber en la columna del copy. */
@media (min-width: 1024px) {
  .hero-light .hero-ctas { flex-wrap: nowrap; align-items: center; gap: 12px; }
  .hero-light .hero-ctas .btn-lg { white-space: nowrap; height: 56px; padding: 0 22px; font-size: 16px; }
}

/* (2) FOTO INTEGRADA en MÓVIL + TABLET: NO es una tarjeta. Igual que en desktop, la foto
   se DESVANECE en el fondo (máscara de degradado en los bordes) para que fluya con la crema
   y parezca PARTE de la composición, no una imagen "pegada". Sin bordes, sin aro, sin sombra
   (una sombra rectangular delataría el recorte). El desvanecido ES la integración.
   Doble degradado: vertical (arriba+abajo) ∩ horizontal (lados); el borde inferior se
   disuelve más para fluir hacia el botón / la siguiente sección. */
@media (max-width: 1023px) {
  .hero-light .hero-photo {
    margin-top: 12px; border-radius: 0; box-shadow: none;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, #000 15%, #000 60%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 15%, #000 60%, transparent 100%),
      linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
  }
  /* Sin velo ni aro: la integración viene del desvanecido, no de un marco. */
  .hero-light .hero-photo::after { display: none; }
  /* Encuadre: las caras quedan dentro de la zona nítida (no en la parte que se disuelve). */
  .hero-light .hero-photo-img { background-position: 50% 30%; }
}

/* (3) FOOTER en TELÉFONO: a 2 columnas el logo (ancho fijo 188px) forzaba desborde y el
   texto salía CORTADO. Lo pasamos a 1 columna limpia (marca → Productos → Cooperativa →
   Contacto), con el logo acotado para que nunca desborde. */
@media (max-width: 640px) {
  .foot { grid-template-columns: 1fr; gap: 30px; }
  .foot-word { width: min(188px, 62%); margin-bottom: 14px; }
  .foot-col h4 { margin-bottom: 12px; }
  .foot-legal { margin-top: 34px; }
}