/* Nivio · web de lanzamiento.
 * Todo valor de color, tipo, radio y movimiento sale de los tokens de Nivio UI 2.2 (nivio-tokens.css).
 * La web va en tema oscuro (data-theme="dark"): «fondo grafito, una frase grande, la bola viva y un solo botón coral».
 * Las clases .nv-* reproducen en CSS las directivas de @nivio/ui (nvButton, nv-field, nv-card…) para una página sin Angular.
 */

/* ── Fuentes servidas en local (las mismas que trae @nivio/ui) ── */
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto Slab Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/roboto-slab-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Slab Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/roboto-slab-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Base (equivale a styles/base.css del paquete, sin el preflight de Tailwind) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-family: var(--nv-font-sans); background-color: var(--nv-canvas); color: var(--nv-fg);
  font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nv-header) + 1rem); scroll-behavior: smooth;
}
body {
  font-size: var(--nv-type-body-size); line-height: var(--nv-type-body-line);
  font-feature-settings: 'cv11', 'ss01'; background: var(--nv-canvas); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--nv-primary-ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: 2px; }
::selection { background-color: var(--nv-primary-tint); color: var(--nv-fg); }
button:not(:disabled), [role='button'], summary, label[for] { cursor: pointer; }
.tabular, table { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nv-icon { flex: none; }

/* Escala tipográfica de pantalla */
.type-display { font-family: var(--nv-font-display); font-size: var(--nv-type-display-size); line-height: var(--nv-type-display-line); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.type-title-1 { font-family: var(--nv-font-display); font-size: var(--nv-type-title-1-size); line-height: var(--nv-type-title-1-line); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.type-title-2 { font-family: var(--nv-font-display); font-size: var(--nv-type-title-2-size); line-height: var(--nv-type-title-2-line); font-weight: 600; text-wrap: balance; }
.type-title-3 { font-size: var(--nv-type-title-3-size); line-height: var(--nv-type-title-3-line); font-weight: 600; }
.type-lead { font-size: var(--nv-type-lead-size); line-height: var(--nv-type-lead-line); color: var(--nv-fg-muted); text-wrap: pretty; }
.type-small { font-size: var(--nv-type-small-size); line-height: var(--nv-type-small-line); }
.type-caption { font-size: var(--nv-type-caption-size); line-height: var(--nv-type-caption-line); }
.type-overline { font-size: var(--nv-type-overline-size); line-height: var(--nv-type-overline-line); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.type-figure { font-family: var(--nv-font-display); font-size: var(--nv-type-figure-size); line-height: var(--nv-type-figure-line); font-weight: 600; font-variant-numeric: tabular-nums; }
.muted { color: var(--nv-fg-muted); }
.ink { color: var(--nv-primary-ink); }
.nivio-ink { color: var(--nv-nivio); }

/* Utilidades de espacio (base 4 px) */
.mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.section-head.m-0 { margin: 0; } .section.pt-0 { padding-top: 0; }
.share-block { display: grid; gap: .75rem; width: 100%; }

/* ── Estructura ── */
.skip { position: fixed; left: 1rem; top: -4rem; z-index: var(--nv-z-skip); background: var(--nv-surface); color: var(--nv-fg); padding: .5rem 1rem; border-radius: var(--nv-radius-md); }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--nv-container-page); margin-inline: auto; padding-inline: var(--nv-gutter); }
.section { padding-block: clamp(4rem, 3rem + 6vw, 8rem); position: relative; }
.section-head { max-width: 46rem; display: grid; gap: var(--nv-space-4); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.overline-dot { display: inline-flex; align-items: center; gap: .5rem; color: var(--nv-primary-ink); }
.overline-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Botón (nvButton) ── */
.nv-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--nv-radius-pill); font-weight: 600; text-align: center; text-decoration: none; user-select: none;
  border: 1px solid transparent; min-height: var(--nv-control-md); padding: .5rem 1rem; font-size: var(--nv-type-small-size); line-height: 1.25rem;
  transition: background-color var(--nv-duration-fast) var(--nv-ease-enter), border-color var(--nv-duration-fast) var(--nv-ease-enter), transform var(--nv-duration-fast) var(--nv-ease-enter);
  white-space: nowrap;
}
.nv-btn--lg { min-height: var(--nv-control-lg); padding: .75rem 1.5rem; font-size: var(--nv-type-body-size); line-height: 1.5rem; }
@media (pointer: coarse) { .nv-btn { min-height: var(--nv-touch); } }
.nv-btn--primary { background: var(--nv-primary); color: var(--nv-on-primary); }
.nv-btn--primary:hover { background: var(--nv-primary-hover); }
.nv-btn--secondary { background: var(--nv-surface); color: var(--nv-fg); border-color: var(--nv-line-strong); }
.nv-btn--secondary:hover { background: var(--nv-surface-hover); }
.nv-btn--inverse { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }
.nv-btn--inverse:hover { background: rgb(255 255 255 / .1); }
.nv-btn--ghost { background: transparent; color: var(--nv-primary-ink); }
.nv-btn--ghost:hover { background: var(--nv-primary-tint); }
.nv-btn:active { transform: translateY(1px); }
.nv-btn[aria-busy='true'] { cursor: progress; opacity: .8; }
.nv-btn .spin { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nv-spin .8s linear infinite; }
.nv-link { color: var(--nv-primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; }

/* ── Tarjeta, insignias, avisos ── */
.nv-card { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius-lg); padding: var(--nv-space-6); }
.nv-badge { display: inline-flex; align-items: center; gap: .375rem; border-radius: var(--nv-radius-pill); padding: .125rem .625rem; font-size: var(--nv-type-caption-size); line-height: 1.25rem; font-weight: 600; white-space: nowrap; }
.nv-badge--nivio { background: var(--nv-nivio-tint); color: var(--nv-nivio); }
.nv-badge--neutral { background: var(--nv-surface-raised); color: var(--nv-fg-muted); border: 1px solid var(--nv-line); }
.nv-badge--warning { background: var(--nv-warning-tint); color: var(--nv-warning); }
.nv-badge--success { background: var(--nv-success-tint); color: var(--nv-success); }
.nv-badge--info { background: var(--nv-info-tint); color: var(--nv-info); }
.nv-alert { display: flex; gap: .75rem; align-items: flex-start; border-radius: var(--nv-radius-md); padding: .875rem 1rem; border: 1px solid; }
.nv-alert--danger { background: var(--nv-danger-tint); color: var(--nv-fg); border-color: var(--nv-danger); }
.nv-alert--danger .nv-icon { color: var(--nv-danger); margin-top: 2px; }
.nv-alert ul { margin: .25rem 0 0 1.1rem; }
.nv-alert a { color: var(--nv-fg); font-weight: 600; }

/* ── Campos (nv-field + nvInput) ── */
.nv-field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.nv-field > label, .nv-legend { font-size: var(--nv-type-small-size); line-height: var(--nv-type-small-line); font-weight: 600; color: var(--nv-fg); }
.nv-field .req { color: var(--nv-danger); }
.nv-field .opt { font-weight: 400; color: var(--nv-fg-muted); }
.nv-hint { font-size: var(--nv-type-small-size); line-height: var(--nv-type-small-line); color: var(--nv-fg-muted); }
.nv-error { display: flex; align-items: flex-start; gap: .375rem; font-size: var(--nv-type-small-size); line-height: var(--nv-type-small-line); font-weight: 500; color: var(--nv-danger); }
.nv-error .nv-icon { margin-top: 2px; }
.nv-input {
  display: block; width: 100%; min-width: 0; min-height: var(--nv-control-md); border-radius: var(--nv-radius-md);
  border: 1px solid var(--nv-line-strong); background: var(--nv-surface); color: var(--nv-fg); padding: .5rem .75rem;
  transition: border-color var(--nv-duration-fast) var(--nv-ease-enter);
}
@media (pointer: coarse) { .nv-input { min-height: var(--nv-touch); } }
.nv-input::placeholder { color: var(--nv-fg-muted); opacity: 1; }
.nv-input:hover { border-color: var(--nv-fg-muted); }
.nv-input[aria-invalid='true'] { border-color: var(--nv-danger); outline: 1px solid var(--nv-danger); }
.nv-input:focus-visible { outline: 2px solid var(--nv-focus); outline-offset: 2px; }
select.nv-input { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3A6B1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; }
.nv-prefix { display: flex; }
.nv-prefix span { display: grid; place-items: center; padding-inline: .75rem; border: 1px solid var(--nv-line-strong); border-right: 0; border-radius: var(--nv-radius-md) 0 0 var(--nv-radius-md); color: var(--nv-fg-muted); background: var(--nv-surface-sunken); }
.nv-prefix .nv-input { border-radius: 0 var(--nv-radius-md) var(--nv-radius-md) 0; }
fieldset { border: 0; min-width: 0; }
.nv-fieldset { display: flex; flex-direction: column; gap: .5rem; }
.nv-choice { display: flex; gap: .625rem; align-items: flex-start; font-size: var(--nv-type-small-size); line-height: var(--nv-type-small-line); }
/* Opciones en píldora (radios nativos, control segmentado) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: var(--nv-control-md); padding: .5rem 1rem; border-radius: var(--nv-radius-pill); border: 1px solid var(--nv-line-strong); font-size: var(--nv-type-small-size); font-weight: 500; transition: background-color var(--nv-duration-fast), border-color var(--nv-duration-fast); }
@media (pointer: coarse) { .chip span { min-height: var(--nv-touch); } }
.chip input:hover + span { border-color: var(--nv-fg-muted); }
.chip input:checked + span { background: var(--nv-primary-tint); border-color: var(--nv-primary-ink); color: var(--nv-fg); }
.chip input:checked + span::before { content: ''; width: 14px; height: 14px; margin-right: .5rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; color: var(--nv-primary-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--nv-focus); outline-offset: 2px; }
.chip input[aria-invalid='true'] + span { border-color: var(--nv-danger); }

/* ── Cabecera ── */
.site-header { position: fixed; inset: 0 0 auto; z-index: var(--nv-z-header); height: var(--nv-header); transition: background-color var(--nv-duration-slow), border-color var(--nv-duration-slow); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgb(11 12 16 / .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--nv-line); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 2rem; }
.logo { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; }
.logo b { font-family: var(--nv-font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 1.375rem; line-height: 1; }
.site-nav { display: flex; gap: .25rem; margin-left: auto; }
.site-nav a { color: var(--nv-fg-muted); text-decoration: none; font-size: var(--nv-type-small-size); font-weight: 500; padding: .5rem .75rem; border-radius: var(--nv-radius-pill); }
.site-nav a:hover { color: var(--nv-fg); background: rgb(255 255 255 / .06); }
@media (max-width: 52rem) { .site-nav { display: none; } .site-header .nv-btn { margin-left: auto; } }

/* ── Héroe ── */
.hero { min-height: 100svh; display: grid; align-items: center; padding-top: calc(var(--nv-header) + 2rem); padding-bottom: 4rem; position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px; background: radial-gradient(closest-side, rgb(139 92 246 / .16), transparent 70%); z-index: -1; }
.hero::after { content: ''; position: absolute; inset: auto auto -30% -20%; width: 60vw; height: 60vw; background: radial-gradient(closest-side, rgb(255 106 61 / .09), transparent 70%); z-index: -1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; }
.hero-copy { display: grid; gap: 1.5rem; }
.hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); line-height: 1.04; }
.hero h1 .soft { color: var(--nv-fg-muted); display: block; }
.hero .type-lead { max-width: 36rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.hero-note { display: flex; align-items: center; gap: .5rem; color: var(--nv-fg-muted); }
.hero-orb { display: grid; justify-items: center; gap: 1rem; position: relative; }
.orb-slot { width: min(440px, 80vw); aspect-ratio: 1; display: grid; place-items: center; }
.orb-slot nivio-esfera { transform-origin: center; }
/* La bola pinta su resplandor en un lienzo cuadrado y se corta en los bordes (sobre un fondo que no es negro puro
 * se ve el cuadrado). Se difumina en círculo, sin tocar el motor original. La esfera llega al 85 % del radio. */
nivio-esfera { -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 100%); mask-image: radial-gradient(closest-side, #000 84%, transparent 100%); }
.live-clock { display: inline-flex; align-items: center; gap: .625rem; color: var(--nv-fg-muted); font-variant-numeric: tabular-nums; }
.live-clock i { width: 8px; height: 8px; border-radius: 50%; background: var(--nv-primary); box-shadow: 0 0 0 0 rgb(255 106 61 / .6); animation: nv-live 2s infinite; }
@keyframes nv-live { 0% { box-shadow: 0 0 0 0 rgb(255 106 61 / .5); } 70% { box-shadow: 0 0 0 10px rgb(255 106 61 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 106 61 / 0); } }
.plazas { display: grid; gap: .5rem; max-width: 22rem; }
.plazas-bar { height: 4px; border-radius: 4px; background: var(--nv-line); overflow: hidden; }
.plazas-bar span { display: block; height: 100%; width: 0; background: var(--nv-gradient-brand); transition: width 1.2s var(--nv-ease-enter); }
.scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0; color: var(--nv-fg-muted); display: grid; justify-items: center; gap: .25rem; text-decoration: none; }
.scroll-cue .nv-icon { animation: nv-bob 2.4s var(--nv-ease-enter) infinite; }
@keyframes nv-bob { 50% { transform: translateY(5px); } }
@media (max-width: 52rem) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-orb { order: -1; }
  .orb-slot { width: 240px; }
  .scroll-cue { display: none; }
}

/* ── El problema: un martes cualquiera ── */
.problem { background: var(--nv-graphite-950); }
.timeline { position: relative; max-width: 52rem; margin-inline: auto; display: grid; gap: 0; }
.timeline::before { content: ''; position: absolute; left: 5.5rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--nv-line); }
.timeline .fill { position: absolute; left: 5.5rem; top: .5rem; width: 1px; height: 0; background: linear-gradient(var(--nv-primary), var(--nv-violet-500)); transition: height .2s linear; }
.tl-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 2rem; padding-block: 1.5rem; opacity: .18; transition: opacity .6s var(--nv-ease-enter), transform .6s var(--nv-ease-enter); transform: translateY(12px); }
.tl-item.is-on { opacity: 1; transform: none; }
.tl-item time { font-family: var(--nv-font-display); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--nv-fg-muted); padding-top: .125rem; position: relative; }
.tl-item time::after { content: ''; position: absolute; right: -1.375rem; top: .7rem; width: 9px; height: 9px; border-radius: 50%; background: var(--nv-graphite-950); border: 2px solid var(--nv-line-strong); }
.tl-item.is-on time::after { border-color: var(--nv-primary); background: var(--nv-primary); }
.tl-item p { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.tl-item .nv-badge { margin-top: .5rem; }
.tl-item.last p { color: var(--nv-fg-muted); font-style: italic; }
.reveal-line { margin-top: 4rem; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.reveal-line .type-display { max-width: 20ch; }
@media (max-width: 40rem) {
  .timeline::before, .timeline .fill { left: 3.75rem; }
  .tl-item { grid-template-columns: 3rem 1fr; gap: 1.5rem; }
  .tl-item time { font-size: 1rem; }
  .tl-item time::after { right: -1.125rem; top: .45rem; }
}

/* ── Escenario de la demo ── */
.stage { background: #000; overflow: hidden; isolation: isolate; }
.stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 45%, rgb(139 92 246 / .14), transparent 70%); z-index: -1; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.stage-screen { position: relative; aspect-ratio: 16 / 10; border-radius: var(--nv-radius-xl); background: #050507; border: 1px solid var(--nv-line); overflow: hidden; display: grid; place-items: center; }
.stage-screen::before, .stage-screen::after { content: ''; position: absolute; left: 0; right: 0; height: 9%; background: #000; z-index: 2; }
.stage-screen::before { top: 0; } .stage-screen::after { bottom: 0; }
.stage-screen .caption { position: absolute; bottom: 14%; left: 0; right: 0; text-align: center; color: rgb(255 255 255 / .85); font-size: var(--nv-type-small-size); z-index: 3; padding-inline: 1rem; }
.stage-play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; background: transparent; border: 0; }
.stage-play span { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .1); backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / .3); color: #fff; transition: transform var(--nv-duration-base) var(--nv-ease-enter), background-color var(--nv-duration-base); }
.stage-play:hover span { transform: scale(1.06); background: rgb(255 255 255 / .16); }
.demo-form { display: grid; gap: 1.25rem; max-width: 30rem; }
.demo-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.demo-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
@media (max-width: 52rem) { .stage-grid { grid-template-columns: 1fr; } .stage-screen { order: -1; } }
@media (max-width: 30rem) { .demo-form .row { grid-template-columns: 1fr; } }

/* ── Así trabaja ── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: paso; }
.step { display: grid; gap: .75rem; align-content: start; position: relative; padding-top: 1.5rem; }
.step::before { counter-increment: paso; content: '0' counter(paso); font-family: var(--nv-font-display); font-weight: 600; font-size: .875rem; color: var(--nv-primary-ink); }
.step-icon { width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center; background: var(--nv-surface-raised); border: 1px solid var(--nv-line); color: var(--nv-fg); }
.step p { color: var(--nv-fg-muted); }
@media (max-width: 52rem) { .steps { grid-template-columns: 1fr; } }

/* ── Para quién ── */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.role { display: grid; gap: 1.25rem; align-content: start; }
.role h3 { display: flex; align-items: center; gap: .625rem; }
.role h3 .nv-icon { color: var(--nv-primary-ink); }
.bubble { border-radius: 14px; padding: .875rem 1.125rem; font-size: var(--nv-type-body-size); line-height: 1.5; max-width: 92%; }
.bubble--you { background: var(--nv-surface-raised); border: 1px solid var(--nv-line); justify-self: end; border-bottom-right-radius: 4px; }
.bubble--nivio { background: var(--nv-nivio-tint); border: 1px solid rgb(196 181 253 / .25); border-bottom-left-radius: 4px; }
.bubble small { display: flex; align-items: center; gap: .375rem; font-size: var(--nv-type-caption-size); font-weight: 600; margin-bottom: .25rem; color: var(--nv-fg-muted); }
.bubble--nivio small { color: var(--nv-nivio); }
.bubble--nivio small .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nv-gradient-brand); }
@media (max-width: 52rem) { .roles { grid-template-columns: 1fr; } }

/* ── Tu mañana (sección clara: así se ve Nivio en tu pantalla) ── */
.morning { background: var(--nv-graphite-fog); color: var(--nv-graphite-925); }
.morning .light { /* tokens del tema claro, solo dentro de esta sección */
  --nv-surface: #fff; --nv-surface-raised: #fff; --nv-surface-sunken: var(--nv-graphite-50); --nv-fg: var(--nv-graphite-925); --nv-fg-muted: var(--nv-graphite-500);
  --nv-line: var(--nv-graphite-100); --nv-line-strong: var(--nv-graphite-400); --nv-primary-ink: var(--nv-coral-700); --nv-nivio: var(--nv-violet-700); --nv-nivio-tint: var(--nv-violet-50);
  --nv-success: var(--nv-green-700); --nv-success-tint: var(--nv-green-50); --nv-warning: var(--nv-amber-700); --nv-warning-tint: var(--nv-amber-50);
  --nv-info: var(--nv-blue-700); --nv-info-tint: var(--nv-blue-50); --nv-focus: var(--nv-coral-700); --nv-surface-hover: var(--nv-graphite-50);
  color: var(--nv-fg);
}
.morning .type-lead { color: var(--nv-graphite-500); }
.morning .overline-dot { color: var(--nv-coral-700); }
.morning-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.brief { padding: 0; overflow: hidden; }
.brief-head { display: flex; align-items: center; gap: .875rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--nv-line); }
.brief-head p { color: var(--nv-fg-muted); font-size: var(--nv-type-small-size); }
.brief-list { list-style: none; }
.brief-list li { display: grid; grid-template-columns: auto 1fr auto; gap: .875rem; align-items: start; padding: 1rem 1.5rem; border-bottom: 1px solid var(--nv-line); }
.brief-list li:last-child { border-bottom: 0; }
.brief-list .ico { width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center; }
.brief-list .ico--warning { background: var(--nv-warning-tint); color: var(--nv-warning); }
.brief-list .ico--success { background: var(--nv-success-tint); color: var(--nv-success); }
.brief-list .ico--nivio { background: var(--nv-nivio-tint); color: var(--nv-nivio); }
.brief-list .ico--info { background: var(--nv-info-tint); color: var(--nv-info); }
.brief-list b { display: block; font-weight: 600; }
.brief-list span.t { color: var(--nv-fg-muted); font-size: var(--nv-type-small-size); }
.brief-list .amount { font-family: var(--nv-font-display); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.brief-foot { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: var(--nv-surface-sunken); }
@media (max-width: 52rem) {
  .morning-grid { grid-template-columns: 1fr; }
  .brief-list li { grid-template-columns: auto 1fr; }
  .brief-list li > :last-child { grid-column: 2; justify-self: start; }
  .brief-head, .brief-list li, .brief-foot { padding-inline: 1rem; }
}

/* ── Haz la cuenta ── */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.calc-inputs { display: grid; gap: 1.75rem; }
.range-row { display: flex; align-items: center; gap: 1rem; }
.range-row output { min-width: 3.5rem; text-align: right; font-family: var(--nv-font-display); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
input[type='range'] { flex: 1; appearance: none; height: 2.75rem; background: transparent; }
input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(var(--nv-primary-ink), var(--nv-primary-ink)) 0/var(--p, 50%) 100% no-repeat, var(--nv-line-strong); }
input[type='range']::-moz-range-track { height: 4px; border-radius: 4px; background: var(--nv-line-strong); }
input[type='range']::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--nv-primary-ink); }
input[type='range']::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--nv-primary-ink); margin-top: -9px; }
input[type='range']::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--nv-primary-ink); }
.calc-result { display: grid; align-content: center; gap: 1.25rem; background: var(--nv-surface-raised); position: relative; overflow: hidden; }
.calc-result::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--nv-gradient-brand); }
.calc-result::after { content: ''; position: absolute; right: -30%; top: -40%; width: 80%; aspect-ratio: 1; background: radial-gradient(closest-side, rgb(139 92 246 / .16), transparent 70%); pointer-events: none; }
.calc-result .big { font-family: var(--nv-font-display); font-weight: 600; font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #fff; }
.calc-result .big small { font-size: .4em; color: var(--nv-fg-muted); letter-spacing: 0; margin-left: .25rem; }
.calc-result .money { color: var(--nv-primary-ink); }
.calc-result .note { font-size: var(--nv-type-small-size); color: var(--nv-fg-muted); }
.calc-result .nv-btn { justify-self: start; }
@media (max-width: 52rem) { .calc { grid-template-columns: 1fr; } }

/* ── Confianza ── */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.trust .nv-card { display: grid; gap: .75rem; align-content: start; background: transparent; }
.trust .nv-icon { color: var(--nv-nivio); }
.trust p { color: var(--nv-fg-muted); font-size: var(--nv-type-small-size); line-height: var(--nv-type-small-line); }
@media (max-width: 64rem) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .trust { grid-template-columns: 1fr; } }

/* ── Reserva ── */
.reserve { background: var(--nv-graphite-950); }
.reserve-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.perks { list-style: none; display: grid; gap: 1rem; margin-top: 2rem; }
.perks li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.perks .nv-icon { color: var(--nv-success); margin-top: 3px; }
.form-card { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; gap: 1.5rem; }
.form-progress { display: grid; gap: .625rem; }
.form-progress ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; }
.form-progress li { height: 4px; border-radius: 4px; background: var(--nv-line); }
.form-progress li.is-done { background: var(--nv-primary-ink); }
.form-step { display: grid; gap: 1.25rem; }
.form-step h3 { font-family: var(--nv-font-display); }
.form-nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding-top: .25rem; }
.form-nav .nv-btn--primary { margin-left: auto; }
.form-legal { font-size: var(--nv-type-caption-size); line-height: 1.125rem; color: var(--nv-fg-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.success { display: grid; gap: 1.25rem; justify-items: start; }
.success .ticket { width: 100%; border: 1px dashed var(--nv-line-strong); border-radius: var(--nv-radius-lg); padding: 1rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.success .ticket b { font-family: var(--nv-font-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.share { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 52rem) { .reserve-grid { grid-template-columns: 1fr; } }

/* ── Preguntas ── */
.faq { max-width: var(--nv-container-reading); margin-inline: auto; display: grid; }
.faq details { border-bottom: 1px solid var(--nv-line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-weight: 600; font-size: var(--nv-type-title-3-size); line-height: var(--nv-type-title-3-line); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .nv-icon { transition: transform var(--nv-duration-base) var(--nv-ease-enter); color: var(--nv-fg-muted); }
.faq details[open] summary .nv-icon { transform: rotate(180deg); }
.faq details p { padding-bottom: 1.25rem; color: var(--nv-fg-muted); max-width: 60ch; }

/* ── Cierre y pie ── */
.final { text-align: center; overflow: hidden; isolation: isolate; }
.final::before { content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; translate: -50% -50%; background: radial-gradient(closest-side, rgb(255 106 61 / .12), rgb(139 92 246 / .1) 50%, transparent 72%); z-index: -1; }
.final .wrap { display: grid; justify-items: center; gap: 1.5rem; }
.final .type-display { max-width: 22ch; }
.site-footer { border-top: 1px solid var(--nv-line); padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom)); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.site-footer a { color: var(--nv-fg-muted); font-size: var(--nv-type-small-size); }
.site-footer small { color: var(--nv-fg-muted); }

/* Botón fijo en móvil */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--nv-z-sticky); padding: .75rem var(--nv-gutter) calc(.75rem + env(safe-area-inset-bottom)); background: rgb(11 12 16 / .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--nv-line); transform: translateY(110%); transition: transform var(--nv-duration-slow) var(--nv-ease-enter); display: none; }
.mobile-cta .nv-btn { width: 100%; }
.mobile-cta.is-on { transform: none; }
@media (max-width: 52rem) { .mobile-cta { display: block; } }

/* Aparición al hacer scroll */
.rise { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--nv-ease-enter), transform .7s var(--nv-ease-enter); }
.rise.is-in { opacity: 1; transform: none; }
.no-js .rise { opacity: 1; transform: none; }

@keyframes nv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rise, .tl-item { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .nv-btn { border: 1px solid ButtonText; }
}

/* Leyenda de cada paso del formulario: separada de su primer campo */
.form-step > legend { margin-bottom: 1.25rem; }

/* Tras reservar: el primer paso de «Te queremos conocer» */
.success .ok-siguiente { width: 100%; display: grid; gap: .75rem; justify-items: start; padding: 1rem 1.25rem; border: 1px solid var(--nv-primary-ink); border-radius: var(--nv-radius-lg); background: var(--nv-primary-tint); }