/* InTerms · landing v3: móvil + señales → dentro del móvil → cómo se eligió → resultados */
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/fonts/EBGaramond-var.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('/fonts/EBGaramond-Italic-var.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
  --cream: #FAFAF8; --paper: #F3F2EE; --ink: #141413; --ink2: #4A4A46; --ink3: #8A8984;
  --green: #1B4332; --deep: #0D271C; --mint: #7ED696;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --brand: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; /* el nombre «InTerms», igual en web, correos y periódico */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); }
html.lenis, html.lenis body { height: auto; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; letter-spacing: -0.015em; }
svg.mk { fill: currentColor; display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* nav translúcida */
.nav { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: rgba(243,242,238,.62); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-family: var(--brand); font-weight: 650; font-size: 18px; letter-spacing: -0.015em; }
.brand svg { width: 22px; height: 22px; color: var(--ink); }
.nav-links { display: flex; gap: 28px; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-links a { color: var(--ink2); text-decoration: none; font-size: 14px; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav-links { display: none; } }
.nav-cta { background: var(--ink); color: var(--cream); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px; }

.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* ───────── 1 · hero ───────── */
.hero { height: 560vh; background: radial-gradient(120% 90% at 50% 42%, #F8F7F3 0%, #ECEAE4 55%, #DEDCD5 100%); }
.h-frame { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; perspective: 2200px; }
.h-title { position: absolute; left: 0; right: 0; top: 13vh; text-align: center; padding: 0 20px; z-index: 5; }
.h-title h1 { font-size: clamp(2.6rem, 6.2vw, 5.6rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.02; }
.h-title h1 span { color: var(--green); }
.h-title p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--ink2); margin-top: 18px; }
.sub { display: flex; gap: 6px; max-width: 440px; margin: 26px auto 0; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(20,20,19,.08), 0 10px 30px rgba(20,40,30,.08); }
.sub input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 0 16px; outline: none; color: var(--ink); }
.sub button { border: 0; background: var(--green); color: var(--cream); font: inherit; font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.sub button:active { transform: scale(.97); }
.sub button:disabled { opacity: .6; cursor: progress; }
.form-msg { min-height: 20px; margin-top: 10px; font-size: 14px; color: #b4532a; }
.form-msg.on-dark { color: #ffc9a8; }
.form-success { display: none; max-width: 440px; margin: 26px auto 0; padding: 14px 20px; border-radius: 999px; background: rgba(255,255,255,.75); font-size: 16px; color: var(--ink2); }
.form-success b { color: var(--green); }
.form-success.on-dark { background: rgba(255,255,255,.12); color: var(--cream); } .form-success.on-dark b { color: var(--mint); }
.form-success.visible { display: block; animation: fin .5s cubic-bezier(.2,.8,.2,1); }
@keyframes fin { from { opacity: 0; transform: translateY(8px); } }
.h-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 13px; color: var(--ink3); letter-spacing: .02em; }
.h-white { position: absolute; inset: 0; background: var(--cream); opacity: 0; pointer-events: none; z-index: 20; }

/* móvil (unidades del marco de diseño) */
.phone { position: absolute; left: 0; top: 0; width: 320px; height: 660px; margin: -330px 0 0 -160px; border-radius: 56px; background: #0b0b0b; box-shadow: 0 0 0 2px #2c2c2c, inset 0 0 0 1px #3a3a3a, 0 60px 120px rgba(20,30,25,.32), 0 20px 40px rgba(20,30,25,.18); transform-origin: 50% 50%; will-change: transform; z-index: 2; }
.screen { position: absolute; inset: 11px; border-radius: 46px; overflow: hidden; color: #fff; text-align: center; isolation: isolate; }
.s-wall { position: absolute; inset: 0; background: radial-gradient(90% 60% at 28% 10%, #4b8a6a 0%, #1b4332 46%, #07140d 100%); }
.s-island { position: absolute; left: 50%; top: 11px; width: 92px; height: 27px; margin-left: -46px; border-radius: 16px; background: #000; z-index: 4; }
.s-date { position: absolute; left: 0; right: 0; top: 74px; font-size: 16px; font-weight: 500; opacity: .9; }
.s-time { position: absolute; left: 0; right: 0; top: 92px; font-size: 86px; line-height: 86px; font-weight: 600; letter-spacing: -.04em; display: flex; justify-content: center; font-variant-numeric: tabular-nums; }
.s-win { display: inline-block; height: 86px; overflow: hidden; }
.s-roll { display: block; } .s-roll span { display: block; height: 86px; }
.s-colon { display: inline-block; transform: translateY(-5px); }
.s-notif { position: absolute; left: 10px; right: 10px; top: 248px; display: flex; gap: 10px; align-items: center; text-align: left; padding: 11px 12px; border-radius: 22px; background: rgba(235,242,237,.22); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); transform-origin: 50% 0; }
.s-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--green); display: grid; place-items: center; color: var(--cream); }
.s-ic svg { width: 22px; height: 22px; }
.s-r1 { display: flex; justify-content: space-between; font-size: 12px; } .s-r1 b { font-weight: 600; } .s-r1 span { opacity: .65; }
.s-r2 { font-size: 12.5px; font-weight: 600; margin-top: 1px; } .s-r3 { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-dim { position: absolute; inset: 0; background: #000; opacity: .55; pointer-events: none; }
.s-mail { position: absolute; inset: 0; background: var(--cream); color: var(--ink); transform: translateY(100%); z-index: 3; text-align: left; }
.s-mailbar { height: 58px; padding: 32px 0 0 18px; font-size: 13px; color: var(--green); font-weight: 500; border-bottom: 1px solid #ebe8e0; }
.s-mailbody { position: absolute; left: 0; right: 0; top: 58px; }
.s-mailbody .nl { zoom: .4625; }

/* variante con mano (foto Pixabay #5682222, fondo recortado): la pantalla HTML tapa la cara del móvil de la foto */
.hand-img { display: none; }
.phone.hand { width: 1000px; height: 1247px; margin: -523.5px 0 0 -496.7px; background: none; box-shadow: none; border-radius: 0; transform-origin: 496.7px 523.5px; }
.phone.hand .hand-img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 30px 40px rgba(30,40,35,.18)); }
.phone.hand .screen { inset: auto; left: 347.7px; top: 197.7px; width: 298px; height: 651.6px; border-radius: 42px; box-shadow: 0 0 0 3px #0c0c0c; }

/* tarjetas de cristal */
.card { position: absolute; left: 0; top: 0; will-change: transform, opacity; opacity: 0; z-index: 3; }
.glass { background: rgba(255,255,255,.56); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: 0 0 0 1px rgba(255,255,255,.75) inset, 0 24px 60px rgba(30,45,38,.13), 0 4px 14px rgba(30,45,38,.06); }
.c-text { border-radius: 28px; padding: 30px 30px 32px; }
.c-icon { width: 64px; height: 66px; display: block; margin-bottom: 64px; fill: none; stroke: var(--ink); stroke-width: 3; }
.c-text h3 { font-size: 29px; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.c-text p { font-size: 17px; line-height: 1.45; color: var(--ink2); margin-top: 12px; }
.c-app { height: 140px; border-radius: 36px; background: #fff; display: grid; place-items: center; color: var(--green); box-shadow: 0 24px 60px rgba(30,45,38,.14), 0 0 0 1px rgba(20,20,19,.04); }
.c-app svg { width: 46%; height: 46%; }
.notif { border-radius: 24px; padding: 14px 16px; display: flex; gap: 13px; align-items: center; }
.n-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--green); color: var(--cream); display: grid; place-items: center; }
.n-ic svg { width: 26px; height: 27px; }
.n-tx { flex: 1; min-width: 0; }
.n-r1 { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink2); } .n-r1 b { color: var(--ink); font-weight: 600; }
.n-r2 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; } .n-r2 em { font-style: normal; color: var(--green); }
.n-r3 { font-size: 14px; color: var(--ink2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-quote { border-radius: 28px; padding: 26px 30px 30px; color: #fff; background: rgba(27,67,50,.78); backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); box-shadow: 0 24px 60px rgba(30,45,38,.16); }
.q-eye { display: flex; align-items: center; gap: 9px; font-size: 14px; opacity: .85; }
.q-eye i { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); }
.q-txt { font-size: 28px; font-weight: 550; letter-spacing: -.025em; line-height: 1.18; margin-top: 18px; }
.c-stat { border-radius: 28px; padding: 26px 30px; background: linear-gradient(135deg, #DDF6E5 0%, #E3F1EE 50%, #D8ECF5 100%); box-shadow: 0 24px 60px rgba(30,45,38,.12); text-align: center; }
.c-stat b { display: block; font-size: 64px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.c-stat span { display: block; font-size: 17px; color: var(--ink2); margin-top: 10px; }

/* ───────── 2 · el correo explicado ───────── */
.mail { position: relative; background: var(--cream); padding: 120px 20px 140px; }
.mail-head { text-align: center; max-width: 760px; margin: 0 auto 70px; }
.eyebrow { font-size: 15px; font-weight: 600; color: var(--green); }
.mail-head h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.03; margin-top: 10px; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink2); margin-top: 14px; }
.mail-wrap { position: relative; width: 720px; max-width: 100%; margin: 0 auto; }
.mail-wrap .nl { zoom: 1.125; box-shadow: 0 30px 80px rgba(30,45,38,.12), 0 0 0 1px rgba(20,20,19,.05); border-radius: 18px; overflow: hidden; }
.note { position: absolute; width: 280px; display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.38; font-weight: 500; color: var(--ink); opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.note::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(126,214,150,.25); margin-top: 6px; }
.note.l { right: calc(100% + 44px); flex-direction: row-reverse; text-align: right; transform: translateX(-16px); }
.note.r { left: calc(100% + 44px); transform: translateX(16px); }
.note::after { content: ''; position: absolute; top: 10px; width: 34px; height: 1px; background: rgba(27,67,50,.35); }
.note.l::after { right: -40px; } .note.r::after { left: -40px; }
.note.on { opacity: 1; transform: none; }
@media (max-width: 1340px) {
  .note { position: absolute; width: auto; left: 12px !important; right: 12px !important; font-size: 13.5px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); padding: 8px 12px; border-radius: 12px; box-shadow: 0 8px 24px rgba(30,45,38,.14); flex-direction: row !important; text-align: left !important; transform: translateY(8px); z-index: 2; }
  .note::after { display: none; }
}

/* ───────── 3 · cómo se eligió ───────── */
.how { height: 820vh; background: #0b0c0b; }
.how-host { position: absolute; inset: 0; }
.how .layer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.how-cap { position: absolute; right: 32px; top: 72px; align-items: flex-end; text-align: right; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 12px 18px 14px; border-radius: 18px; background: rgba(20,22,21,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #f3f2ee; transition: opacity .3s; }
.how-cap span { font-size: 13px; color: var(--mint); font-weight: 600; }
.how-cap b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.how-bar { position: absolute; left: 32px; right: 32px; bottom: 26px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); z-index: 5; }
.how-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--mint); }

/* ───────── 4 · resultados ───────── */
.results { background: var(--cream); padding: clamp(96px, 12vw, 160px) 20px clamp(80px, 10vw, 130px); }
.r-inner { max-width: 1180px; margin: 0 auto; }
.r-h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.03; margin: 10px 0 clamp(36px, 5vw, 64px); max-width: 820px; }
.record-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.record-lead { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.38; margin-bottom: 34px; }
.record-lead strong { font-weight: 600; }
.returns { margin-bottom: 28px; }
.returns-bars { position: relative; height: 168px; display: grid; grid-template-columns: repeat(var(--n, 46), minmax(0, 1fr)); gap: 1px; align-items: stretch; }
.returns-bars::after { content: ''; position: absolute; left: 0; right: 0; top: var(--zero); height: 1px; background: rgba(20,20,19,.25); }
.bar { position: relative; }
.bar i { position: absolute; left: 0; right: 0; border-radius: 1px; transform: scaleY(0); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.bar.pos i { bottom: calc(100% - var(--zero)); background: var(--green); transform-origin: 50% 100%; }
.bar.neg i { top: var(--zero); background: var(--ink); opacity: .78; transform-origin: 50% 0; }
.returns-bars.in .bar i { transform: scaleY(1); }
.returns figcaption { margin-top: 14px; font-size: 14px; color: var(--ink3); }
.record-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { padding: 20px 20px 18px; border-radius: 22px; background: var(--paper); }
.stat-value { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--green); font-variant-numeric: tabular-nums; }
.stat-value span { font-size: .5em; font-weight: 500; margin-left: 3px; }
.stat-label { margin-top: 8px; font-size: 14.5px; line-height: 1.3; color: var(--ink2); }
.sim-card { padding: clamp(24px, 3vw, 38px); border-radius: 28px; background: #fff; box-shadow: 0 1px 0 rgba(20,20,19,.04), 0 30px 70px rgba(30,45,38,.10); position: sticky; top: 90px; }
.sim-card .eyebrow { margin-bottom: 18px; }
.sim-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.sim-buttons button { padding: 9px 18px; border-radius: 999px; background: var(--paper); border: 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; }
.sim-buttons button:active { transform: scale(.96); }
.sim-buttons button.on { background: var(--green); color: var(--cream); }
.sim-rows { border-top: 1px solid rgba(20,20,19,.18); }
.sim-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(20,20,19,.08); }
.sim-row-label { font-size: 15px; color: var(--ink3); font-weight: 500; }
.sim-row-value { font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.sim-row-value.accent { color: var(--green); }
.sim-note { margin-top: 20px; font-size: 13.5px; line-height: 1.6; color: var(--ink3); }
.sim-note strong { color: var(--ink2); font-weight: 600; }
.record-foot { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid rgba(20,20,19,.08); font-size: 1.0625rem; color: var(--ink2); max-width: 820px; }
.record-foot strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .record-grid { grid-template-columns: 1fr; } .sim-card { position: static; } .record-stats { gap: 8px; } .stat { padding: 16px 14px; } .returns-bars { height: 130px; gap: .5px; } }

/* ───────── pie ───────── */
.footer { background: var(--paper); padding: 56px 20px 40px; }
.f-inner { max-width: 1180px; margin: 0 auto; }
.f-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.footer .brand svg { width: 22px; height: 22px; }
.f-tag { margin-top: 8px; font-size: 14px; color: var(--ink3); }
.f-links { display: flex; gap: 22px; } .f-links a { font-size: 14px; color: var(--ink2); text-decoration: none; } .f-links a:hover { color: var(--ink); }
.f-legal { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(20,20,19,.1); font-size: 12.5px; line-height: 1.6; color: var(--ink3); max-width: 760px; }
.f-copy { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--ink3); }

/* ───────── 5 · cierre ───────── */
.end { background: var(--green); color: var(--cream); text-align: center; padding: 160px 20px 120px; }
.end-lock { display: flex; justify-content: center; align-items: center; gap: 24px; }
.end-lock svg { width: clamp(70px, 9vw, 130px); height: auto; color: var(--cream); }
.end-lock span { font-size: clamp(3.6rem, 10vw, 8.5rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.end-tag { font-size: clamp(1.2rem, 2.4vw, 2rem); font-weight: 500; opacity: .86; margin-top: 30px; letter-spacing: -.02em; }
.sub.on-dark { background: rgba(255,255,255,.1); box-shadow: 0 0 0 1px rgba(255,255,255,.18); margin-top: 40px; }
.sub.on-dark input { color: var(--cream); } .sub.on-dark input::placeholder { color: rgba(250,250,248,.55); }
.sub.on-dark button { background: var(--cream); color: var(--green); }
.end-note { font-size: 13px; opacity: .6; margin-top: 18px; }

/* ───────── escenas del vídeo (lienzo 1920×1080) ───────── */
.stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; font-family: 'Inter', sans-serif; color: #1A1A1A; letter-spacing: -.01em; line-height: 1.25; }
.stage * { box-sizing: border-box; }
/* réplica del correo real */
.nl { position: relative; width: 640px; background: #FAFAF8; color: #1A1A1A; font-family: 'EB Garamond', Georgia, serif; padding: 40px 46px 70px; letter-spacing: 0; line-height: 1.4; text-align: left; }
.nl .sc { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #77756f; }
.nl .nl-g { color: #1B4332; }
.nl-top { display: flex; justify-content: space-between; align-items: flex-start; }
.nl-brand { font-size: 50px; font-weight: 700; letter-spacing: -.025em; line-height: 1; margin-top: 8px; }
.nl-tagl { font-style: italic; font-size: 14px; color: #4A4A46; margin-top: 10px; }
.nl-ed { text-align: right; }
.nl-badge { display: inline-block; margin-top: 6px; background: #1B4332; color: #FAFAF8; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; font-weight: 600; }
.nl-date { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #d9d5cc; margin-top: 26px; padding: 16px 0 12px; border-bottom: 2px solid #1A1A1A; }
.nl-date > span:first-child { font-style: italic; font-size: 22px; }
.nl-cov { font-size: 12px; color: #6b6a65; padding: 10px 0; border-bottom: 1px solid #e5e1d8; }
.nl-ctx { font-size: 17px; line-height: 1.62; margin-top: 12px; padding-bottom: 22px; border-bottom: 1px solid #e5e1d8; }
.nl-sig { padding: 26px 0 24px; border-bottom: 1px solid #e5e1d8; }
.nl-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.nl-tk { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.nl-sc { font-size: 14px; color: #8a8984; } .nl-sc b { font-size: 30px; color: #1B4332; }
.nl-co { font-style: italic; font-size: 15px; color: #4A4A46; margin-top: 4px; }
.nl-pill { display: inline-block; margin-top: 14px; background: #e7efe9; color: #1B4332; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; }
.nl-m { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #e5e1d8; border-bottom: 1px solid #e5e1d8; margin-top: 18px; }
.nl-m > div { padding: 12px 0; } .nl-m > div + div { border-left: 1px solid #e5e1d8; padding-left: 14px; }
.nl-m .sc { font-size: 10px; } .nl-m b { display: block; font-size: 15px; margin-top: 6px; }
.nl-th { font-size: 16px; line-height: 1.6; margin-top: 16px; }
.nl-inv { border-left: 3px solid #cdc7bb; padding: 2px 0 2px 16px; margin-top: 16px; font-size: 14px; line-height: 1.5; }
.nl-inv .sc { font-size: 10px; margin-bottom: 4px; }
.nl-foot { display: flex; justify-content: space-between; margin-top: 18px; font-size: 12px; color: #6b6a65; }
.nl-foot em { font-style: italic; color: #1B4332; }
.nl-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9a978f; margin-right: 6px; vertical-align: middle; }
.nl-wild { padding: 26px 0 24px; border-bottom: 1px solid #e5e1d8; }
.nl-cover { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin-top: 18px; }
.nl-cover b { display: block; font-size: 26px; color: #1B4332; }
/* E · log */
.e-top { position: absolute; left: 120px; right: 120px; top: 64px; display: flex; justify-content: space-between; font: 500 22px/1 'Inter', sans-serif; color: #6f706b; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.09); }
.e-view { position: absolute; left: 120px; right: 120px; top: 120px; height: 850px; overflow: hidden; }
.e-lines { position: absolute; left: 0; right: 0; bottom: 0; }
.e-l { height: 50px; font: 500 30px/50px 'Inter', sans-serif; font-variant-numeric: tabular-nums; white-space: pre; color: #8d8e88; letter-spacing: 0; padding-left: 14px; border-radius: 8px; display: grid; grid-template-columns: 150px 56px 1fr; }
.e-l.e-h, .e-l.e-i, .e-l.e-done { display: block; }
.e-l .tk { font-weight: 600; letter-spacing: .02em; }
.e-l.e-h { color: #f3f2ee; } .e-l.e-i { color: #c9c8c2; }
.e-l.e-x { color: #5e5f5a; } .e-l.e-x b { color: #a55a3a; font-weight: 600; } .e-l.e-x .tk { color: #8d8e88; }
.e-l.e-w { color: #8a8466; } .e-l.e-w b { color: #c9a24a; font-weight: 500; }
.e-l.e-ok { color: #7ED696; font-weight: 700; background: rgba(126,214,150,.10); }
.e-l.e-done { color: #7ED696; font-weight: 700; font-size: 34px; margin-top: 8px; }
/* D · embudo */
.d-p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.d-n { font-size: 360px; font-weight: 650; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.d-l { font-size: 58px; font-weight: 500; letter-spacing: -.02em; margin-top: 34px; }
/* H · tarjeta */
.h-card { position: absolute; left: 370px; top: 235px; width: 1180px; height: 740px; border-radius: 44px; background: #FAFAF8; padding: 60px 70px; box-shadow: 0 60px 160px rgba(0,0,0,.55); overflow: hidden; }
.h-row1 { display: flex; justify-content: space-between; font-size: 26px; font-weight: 600; color: #1B4332; } .h-row1 span:last-child { color: #8a8984; font-weight: 500; }
.h-main { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; }
.h-tk { font-size: 150px; font-weight: 700; letter-spacing: -.045em; line-height: 1; display: flex; overflow: hidden; padding-bottom: 6px; }
.h-tk span { display: inline-block; }
.h-co { font-size: 34px; color: #6b6a65; margin-top: 6px; }
.h-score { display: flex; align-items: baseline; color: #1B4332; }
.h-roll { height: 190px; overflow: hidden; font-size: 190px; font-weight: 700; line-height: 190px; letter-spacing: -.05em; }
.h-roll div span { display: block; height: 190px; }
.h-score > span { font-size: 54px; color: #9a978f; font-weight: 600; margin-left: 6px; }
.h-pill { display: inline-block; margin-top: 26px; background: #e4eee7; color: #1B4332; font-size: 26px; font-weight: 600; padding: 9px 22px; border-radius: 999px; }
.h-m { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; border-top: 1px solid #e6e2d9; }
.h-m > div { padding: 22px 0 0; } .h-m > div + div { padding-left: 34px; border-left: 1px solid #e6e2d9; }
.h-m small { display: block; font-size: 20px; color: #8a8984; } .h-m b { display: block; font-size: 44px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; }
.h-inv { position: relative; margin-top: 34px; padding-left: 26px; }
.h-inv i { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 3px; background: #c4652a; transform-origin: 50% 0; }
.h-inv small { display: block; font-size: 20px; font-weight: 600; color: #c4652a; } .h-inv p { font-size: 27px; color: #33322f; margin-top: 4px; }
/* J · descartes */
.j-p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.j-tk { position: relative; font-size: 270px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.j-tk i { position: absolute; left: -3%; right: -3%; top: 52%; height: 16px; border-radius: 8px; background: #c4652a; transform-origin: 0 50%; }
.j-why { margin-top: 40px; font-size: 48px; font-weight: 500; padding: 12px 34px; border-radius: 999px; }
/* K · calendario */
.k-wrap { position: absolute; inset: 0; }
.k-big { position: absolute; left: 150px; top: 110px; }
.k-big b { display: block; font-size: 230px; font-weight: 650; letter-spacing: -.05em; line-height: .9; color: #1B4332; font-variant-numeric: tabular-nums; }
.k-big span { display: block; font-size: 48px; font-weight: 500; margin-top: 18px; letter-spacing: -.02em; }
.k-grid { position: absolute; left: 150px; top: 510px; }
.k-c { position: absolute; width: 62px; height: 62px; border-radius: 14px; background: #e3e0d7; }
.k-m { position: absolute; top: -44px; font-size: 22px; font-weight: 600; color: #8a8984; }

/* ───────── escenas en vertical (móvil) ───────── */
.how.portrait .how-cap { top: auto; bottom: 44px; left: 16px; right: 16px; align-items: flex-start; text-align: left; }
.stage.v .e-top { left: 70px; right: 70px; top: 190px; font-size: 30px; }
.stage.v .e-view { left: 70px; right: 70px; top: 260px; bottom: 340px; height: auto; }
.stage.v .e-l { height: 66px; font-size: 40px; line-height: 66px; grid-template-columns: 170px 60px 1fr; }
.stage.v .e-l.e-done { font-size: 42px; }
.stage.v .d-n { font-size: 300px; }
.stage.v .d-l { font-size: 64px; text-align: center; padding: 0 60px; }
.stage.v .h-card { left: 60px; right: 60px; width: auto; top: calc(50% - 640px); height: 1280px; padding: 64px 60px; }
.stage.v .h-row1 { font-size: 30px; }
.stage.v .h-main { flex-direction: column; align-items: flex-start; gap: 18px; }
.stage.v .h-tk { font-size: 170px; } .stage.v .h-co { font-size: 38px; }
.stage.v .h-pill { font-size: 30px; }
.stage.v .h-m { grid-template-columns: 1fr; }
.stage.v .h-m > div { padding: 20px 0; } .stage.v .h-m > div + div { padding-left: 0; border-left: 0; border-top: 1px solid #e6e2d9; }
.stage.v .h-m small { font-size: 26px; } .stage.v .h-m b { font-size: 52px; }
.stage.v .h-inv small { font-size: 26px; } .stage.v .h-inv p { font-size: 34px; }
.stage.v .j-tk { font-size: 210px; }
.stage.v .j-why { font-size: 50px; text-align: center; margin: 40px 50px 0; }
.stage.v .k-big { left: 90px; top: 12%; }
.stage.v .k-big b { font-size: 260px; } .stage.v .k-big span { font-size: 52px; max-width: 900px; }
.stage.v .k-grid { left: 300px; top: 37%; }
.stage.v .k-m { font-size: 30px; }

/* ───────── páginas: archivo y privacidad ───────── */
body.page { background: var(--cream); }
.doc { max-width: 900px; margin: 0 auto; padding: 130px 20px 90px; }
.doc h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.02; margin-top: 8px; }
.doc .lede { margin-top: 16px; max-width: 660px; }
.doc-date { margin-top: 14px; font-size: 14px; color: var(--ink3); }
.legal { max-width: 760px; }
.legal h2 { font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; margin: 44px 0 10px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; color: var(--ink2); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 8px 0 0 20px; display: grid; gap: 8px; }
.legal a { color: var(--green); }
.legal b { color: var(--ink); font-weight: 600; }
.archive { margin-top: 40px; }
.a-mes { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; margin: 44px 0 10px; }
.a-list { list-style: none; border-top: 1px solid rgba(20,20,19,.1); }
.a-list li { display: grid; grid-template-columns: 104px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(20,20,19,.08); }
.a-list time { font-size: 15px; font-weight: 600; }
.a-sigs { display: flex; flex-wrap: wrap; gap: 6px; }
.a-sig { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--paper); font-size: 14px; font-variant-numeric: tabular-nums; }
.a-sig b { font-weight: 650; } .a-sig small { color: var(--ink3); font-size: 12.5px; }
.a-sig.wild { background: transparent; box-shadow: inset 0 0 0 1px rgba(20,20,19,.12); }
.a-ver { font-size: 14px; color: var(--green); text-decoration: none; white-space: nowrap; font-weight: 500; }
.doc-note { margin-top: 40px; font-size: 13px; color: var(--ink3); }
@media (max-width: 700px) { .a-list li { grid-template-columns: 1fr; gap: 8px; } .a-sig small { display: none; } }

@media (max-width: 760px) {
  .mail { padding: 96px 12px 100px; }
  .mail-wrap { width: 100%; }
  .mail-wrap .nl { zoom: 1; width: 100%; padding: 28px 18px 50px; }
  .nl-m { grid-template-columns: repeat(2, 1fr); }
  .nl-m > div:nth-child(3) { border-left: 0; padding-left: 0; }
}
body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { .note { transition: none; } }