/* ============================================================================================
   Landing pública (wwwroot/landing.html) — módulo 27, fase 27.1.
   NO forma parte de la SPA: esta hoja no la usa ningún componente Blazor, y la página que la
   consume no descarga el runtime de WebAssembly (R5 del spec). Por eso no puede referenciar
   MudBlazor ni las custom properties `--mud-palette-*`: no existen fuera de la app.
   ============================================================================================ */

/* Espejo de Core/Theme/NutriFlowTheme.cs — sincronizar a mano si cambia la marca.
   Es el único lugar de este archivo donde puede aparecer un hex de marca (R6 del spec):
   si necesitas un color, sale de acá o no sale. */
:root {
    /* Marca */
    --nf-primary: #0F9D74;
    --nf-primary-deep: #0A6B4E;
    --nf-primary-light: #34D399;
    --nf-tertiary: #F59E0B;

    /* Texto sobre color: `PrimaryContrastText` y `TextPrimary` del tema. No se invierten en oscuro —
       el botón primario y la píldora ámbar mantienen el mismo fondo en los dos temas. */
    --nf-on-primary: #FFFFFF;
    --nf-on-tertiary: #1F2937;

    /* Neutros — sesgados a verde, no gris puro */
    --nf-ground: #F4F7F5;
    --nf-surface: #FFFFFF;
    --nf-surface-2: #EBF1EE;
    --nf-ink: #14201B;
    --nf-ink-2: #3F5148;
    --nf-muted: #6B7D75;
    --nf-line: #DCE6E0;
    --nf-line-strong: #C3D2CA;

    /* Cristal */
    --nf-glass: rgba(255, 255, 255, 0.72);
    --nf-glass-hi: rgba(255, 255, 255, 0.90);
    --nf-glass-lo: rgba(255, 255, 255, 0.28);

    /* Elevación */
    --nf-lift-1: 0 1px 2px rgba(10, 45, 33, 0.05), 0 6px 20px rgba(10, 45, 33, 0.05);
    --nf-lift-2: 0 2px 6px rgba(10, 45, 33, 0.08), 0 24px 56px -14px rgba(10, 45, 33, 0.22);

    --nf-radius: 10px;
    --nf-radius-lg: 18px;
    --nf-maxw: 1140px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --nf-primary: #34D399;
        --nf-primary-deep: #0F9D74;
        --nf-primary-light: #6EE7B7;
        --nf-tertiary: #FBBF24;

        --nf-ground: #0B100E;
        --nf-surface: #131B18;
        --nf-surface-2: #1A241F;
        --nf-ink: #E9F1ED;
        --nf-ink-2: #B4C3BB;
        --nf-muted: #7F918A;
        --nf-line: #1F2B26;
        --nf-line-strong: #2D3C35;

        --nf-glass: rgba(19, 27, 24, 0.66);
        --nf-glass-hi: rgba(255, 255, 255, 0.14);
        --nf-glass-lo: rgba(255, 255, 255, 0.02);

        --nf-lift-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.32);
        --nf-lift-2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 28px 64px -16px rgba(0, 0, 0, 0.6);
    }
}

/* ── Revelado al hacer scroll ─────────────────────────────────────────────────────────────── */

/* El estado oculto depende de `.js-reveal`, que un script en el <head> pone sobre <html> antes del
   primer pintado: sin JavaScript la clase nunca aparece y todo se ve desde el principio. La
   transición vive en `.is-visible` y no en el estado inicial, para que al cargar no haya destello.
   Solo se animan `opacity` y `transform`, que no fuerzan relayout. */
.js-reveal [data-reveal],
.js-reveal [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
}

.js-reveal [data-reveal].is-visible,
.js-reveal [data-reveal-stagger] > .is-visible {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--nf-delay, 0ms);
}

/* La tarjeta del hero entra desde el otro lado: es el objeto, no el texto que lo describe. */
.js-reveal .nf-dossier[data-reveal] { transform: translateY(26px) scale(0.985); }

/* ── Base ─────────────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* La cabecera es sticky y mide 64px: sin esto, saltar a un ancla deja el título debajo de la barra. */
section[id] { scroll-margin-top: 84px; }

body {
    margin: 0;
    background: var(--nf-ground);
    color: var(--nf-ink);
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
    font-weight: 600;
}

p { margin: 0; }
img, svg { max-width: 100%; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--nf-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

.nf-wrap {
    width: 100%;
    max-width: var(--nf-maxw);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

.nf-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nf-primary-deep);
}

.nf-muted { color: var(--nf-muted); font-weight: 400; }

.nf-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Botones ──────────────────────────────────────────────────────────────────────────────── */

.nf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--nf-radius);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.nf-btn--primary {
    color: var(--nf-on-primary);
    background: linear-gradient(135deg, var(--nf-primary), var(--nf-primary-deep));
    box-shadow: 0 8px 20px -8px rgba(10, 107, 78, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.nf-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -8px rgba(10, 107, 78, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.nf-btn--ghost {
    color: var(--nf-ink);
    background: var(--nf-surface);
    border-color: var(--nf-line-strong);
    box-shadow: var(--nf-lift-1);
}

.nf-btn--ghost:hover {
    border-color: var(--nf-primary);
    color: var(--nf-primary-deep);
}

.nf-btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }

/* ── Encabezado ───────────────────────────────────────────────────────────────────────────── */

.nf-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--nf-ground) 84%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Al despegarse del tope la cabecera se separa del contenido. Es información —"ya no estás arriba"—
   y no adorno: sin esto, la barra translúcida flota sobre el texto sin borde que la delimite. */
.nf-header.is-scrolled {
    background: color-mix(in srgb, var(--nf-ground) 92%, transparent);
    border-bottom-color: var(--nf-line);
    box-shadow: 0 10px 30px -22px rgba(10, 45, 33, 0.7);
}

.nf-header .nf-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 64px;
}

.nf-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
}

.nf-brand-badge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--nf-primary-light), var(--nf-primary) 55%, var(--nf-primary-deep));
    box-shadow: 0 6px 16px -6px rgba(15, 157, 116, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nf-brand-badge svg { width: 17px; height: 17px; fill: var(--nf-on-primary); }

.nf-header-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.nf-header-nav a {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--nf-ink-2);
    text-decoration: none;
}

.nf-header-nav a:hover { background: var(--nf-surface-2); color: var(--nf-ink); }

/* Sección visible ahora mismo. Dice dónde estás, que en una página larga es lo que más se agradece. */
.nf-header-nav a.is-active {
    color: var(--nf-primary-deep);
    background: color-mix(in srgb, var(--nf-primary) 11%, transparent);
}

@media (max-width: 720px) {
    .nf-header-nav { display: none; }
    .nf-header .nf-wrap > .nf-btn { margin-left: auto; }
}

/* ── Fondo atmosférico ────────────────────────────────────────────────────────────────────── */

.nf-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.nf-mesh {
    position: absolute;
    inset: -25% -10%;
    background:
        radial-gradient(38% 42% at 14% 8%, rgba(52, 211, 153, 0.30), transparent 62%),
        radial-gradient(34% 38% at 86% 4%, rgba(37, 99, 235, 0.16), transparent 60%),
        radial-gradient(42% 46% at 76% 78%, rgba(15, 157, 116, 0.24), transparent 62%),
        radial-gradient(26% 30% at 28% 88%, rgba(245, 158, 11, 0.13), transparent 60%);
    filter: blur(20px);
    animation: nf-drift 30s ease-in-out infinite alternate;
}

@keyframes nf-drift {
    from { transform: translate3d(-1%, -0.8%, 0) scale(1.02); }
    to   { transform: translate3d(1.4%, 1.2%, 0) scale(1.06); }
}

.nf-grid {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        linear-gradient(var(--nf-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--nf-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(72% 60% at 50% 30%, #000 15%, transparent 78%);
    mask-image: radial-gradient(72% 60% at 50% 30%, #000 15%, transparent 78%);
}

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────── */

.nf-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 88px);
    border-bottom: 1px solid var(--nf-line);
}

.nf-hero .nf-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

/* `minmax(0, 1fr)` y no `1fr`, por lo mismo que en .nf-step: el piso min-content de la pista incluía
   los dos botones del hero, que llevan `white-space: nowrap` y suman ~410px. La pista crecía a ese
   ancho, los botones nunca llegaban a envolver y el documento entero scrolleaba en horizontal a 390px. */
@media (max-width: 900px) {
    .nf-hero .nf-wrap { grid-template-columns: minmax(0, 1fr); }
}

.nf-hero h1 {
    font-size: clamp(36px, 5.6vw, 60px);
    margin-top: 16px;
}

.nf-hero h1 em { font-style: normal; color: var(--nf-primary-deep); }

.nf-hero-lede {
    margin-top: 20px;
    font-size: clamp(16.5px, 1.6vw, 19px);
    color: var(--nf-ink-2);
    max-width: 52ch;
}

.nf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.nf-hero-note {
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--nf-muted);
}

/* Tarjeta de expediente — el objeto real del producto, no una captura inventada */
.nf-dossier {
    position: relative;
    border-radius: 22px;
    padding: 2px;
    background: linear-gradient(150deg, var(--nf-glass-hi), var(--nf-glass-lo) 45%, transparent 72%);
    box-shadow: var(--nf-lift-2);
}

.nf-dossier-inner {
    border-radius: 20px;
    padding: 22px;
    background: var(--nf-glass);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: inset 0 1px 0 var(--nf-glass-hi);
}

.nf-dossier-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nf-line);
}

.nf-dossier-head strong { font-size: 15px; font-weight: 600; }

.nf-dossier-head span { font-size: 12.5px; color: var(--nf-muted); }

.nf-chip-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--nf-line-strong);
    font-size: 12px;
    color: var(--nf-ink-2);
    background: var(--nf-surface);
}

.nf-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nf-primary);
    flex: 0 0 auto;
}

.nf-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 16px;
    counter-reset: nf-step;
}

/* `minmax(0, 1fr)`, no `1fr`: el mínimo por defecto de una pista de grid es min-content, así que una
   etiqueta larga ensanchaba la tarjeta, y con ella el hero y el documento entero — la página scrolleaba
   en horizontal a 390px. El `minmax(0, …)` deja que la pista se encoja de verdad. */
.nf-step {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 4px;
    border-bottom: 1px solid var(--nf-line);
}

.nf-step:last-child { border-bottom: none; }

.nf-step-n {
    counter-increment: nf-step;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--nf-primary-deep);
    background: color-mix(in srgb, var(--nf-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--nf-primary) 32%, transparent);
}

.nf-step-n::before { content: counter(nf-step); }

.nf-step-label { font-size: 14px; font-weight: 500; }

.nf-step-meta { font-size: 12.5px; color: var(--nf-muted); font-variant-numeric: tabular-nums; }

/* En pantallas angostas el dato de contexto se va: la secuencia de pasos es lo que hay que leer, y
   apretar las dos columnas produce dos líneas rotas por fila. */
@media (max-width: 560px) {
    .nf-step { grid-template-columns: 26px minmax(0, 1fr); }
    .nf-step-meta { display: none; }
}

/* ── Secciones ────────────────────────────────────────────────────────────────────────────── */

.nf-section { padding: clamp(56px, 7vw, 92px) 0; border-bottom: 1px solid var(--nf-line); }

.nf-section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 44px); }

.nf-section-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin-top: 12px; }

.nf-section-head p { margin-top: 14px; font-size: 16.5px; color: var(--nf-ink-2); }

.nf-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

/* Los seis módulos entran en 3×2. Con el auto-fit genérico caían en 4+2 y las dos últimas quedaban
   huérfanas en una fila a medio llenar. */
.nf-cards--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Los cinco pasos del cierre son una secuencia y se leen de corrido: tienen que caber en una sola
   fila en escritorio (con el auto-fit genérico salían 4+1, que hace parecer que falta un paso). */
.nf-cards--5 { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }

.nf-cards--5 .nf-card { padding: 20px 18px; }

.nf-cards--5 .nf-card h3 { font-size: 16px; }

.nf-cards--5 .nf-card p { font-size: 13.5px; }

/* En el paso, el número ES el ícono: mismo cuadro, tipografía tabular y peso de dato. */
.nf-step-badge {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.nf-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: var(--nf-surface);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-lg);
    box-shadow: var(--nf-lift-1);
}

.nf-card-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--nf-primary-deep);
    background: color-mix(in srgb, var(--nf-primary) 12%, transparent);
}

.nf-card-icon svg { width: 19px; height: 19px; fill: currentColor; }

.nf-card h3 { font-size: 17px; }

.nf-card p { font-size: 14.5px; color: var(--nf-ink-2); }

/* ── Planes ───────────────────────────────────────────────────────────────────────────────── */

.nf-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.nf-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    background: var(--nf-surface);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-lg);
    box-shadow: var(--nf-lift-1);
}

.nf-plan--best {
    border-color: color-mix(in srgb, var(--nf-tertiary) 55%, transparent);
    box-shadow: var(--nf-lift-2);
}

.nf-plan-badge {
    position: absolute;
    top: -11px;
    right: 20px;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--nf-tertiary);
    color: var(--nf-on-tertiary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nf-plan-tier { display: flex; align-items: center; gap: 5px; }

.nf-plan-tier i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nf-line-strong);
}

.nf-plan-tier i.on { background: var(--nf-tertiary); }

.nf-plan-tier span {
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nf-muted);
}

.nf-plan h3 { font-size: 22px; margin-top: 12px; }

.nf-plan-desc { margin-top: 8px; font-size: 14.5px; color: var(--nf-ink-2); min-height: 44px; }

.nf-plan-price {
    margin-top: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--nf-line);
    border-bottom: 1px solid var(--nf-line);
}

.nf-plan-amount {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.nf-plan-amount small { font-size: 14px; font-weight: 500; color: var(--nf-muted); letter-spacing: 0; }

.nf-plan-price-note { margin-top: 3px; font-size: 12.5px; color: var(--nf-muted); }

/* Estado de carga del precio: barra neutra, sin cifra inventada */
.nf-plan-amount.is-loading {
    display: inline-block;
    width: 148px;
    height: 27px;
    border-radius: 6px;
    background: var(--nf-surface-2);
    animation: nf-pulse 1.4s ease-in-out infinite;
}

@keyframes nf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.nf-plan-features {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.nf-plan-features li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14.5px;
    color: var(--nf-ink-2);
}

.nf-plan-features svg {
    width: 15px;
    height: 15px;
    margin-top: 4px;
    flex: 0 0 auto;
    fill: var(--nf-primary);
}

.nf-plan .nf-btn { margin-top: 22px; width: 100%; }

.nf-plans-note {
    margin-top: 22px;
    font-size: 13px;
    color: var(--nf-muted);
    max-width: 78ch;
}

/* ── Contacto por WhatsApp ────────────────────────────────────────────────────────────────── */

.nf-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

@media (max-width: 880px) {
    .nf-contact { grid-template-columns: minmax(0, 1fr); }
}

.nf-contact-aside p { font-size: 15.5px; color: var(--nf-ink-2); margin-top: 14px; }

.nf-contact-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 10px 16px;
    border: 1px solid var(--nf-line-strong);
    border-radius: 999px;
    background: var(--nf-surface);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.nf-contact-phone svg { width: 18px; height: 18px; fill: var(--nf-primary); flex: 0 0 auto; }

.nf-form {
    padding: clamp(20px, 3vw, 28px);
    background: var(--nf-surface);
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius-lg);
    box-shadow: var(--nf-lift-1);
}

.nf-fieldset { border: 0; padding: 0; margin: 0 0 20px; }

.nf-fieldset legend,
.nf-field label {
    display: block;
    padding: 0;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nf-ink-2);
}

.nf-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }

.nf-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--nf-line-strong);
    border-radius: var(--nf-radius);
    background: var(--nf-ground);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.nf-choice input {
    accent-color: var(--nf-primary);
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
}

.nf-choice:hover { border-color: var(--nf-primary); }

.nf-choice:has(input:checked) {
    border-color: var(--nf-primary);
    background: color-mix(in srgb, var(--nf-primary) 9%, transparent);
}

.nf-choice:has(input:focus-visible) { outline: 2px solid var(--nf-primary); outline-offset: 2px; }

.nf-field { margin-bottom: 18px; }

.nf-field input,
.nf-field select,
.nf-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--nf-line-strong);
    border-radius: var(--nf-radius);
    background: var(--nf-ground);
    color: var(--nf-ink);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nf-field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }

.nf-field input:focus,
.nf-field select:focus,
.nf-field textarea:focus {
    outline: none;
    border-color: var(--nf-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-primary) 20%, transparent);
}

.nf-field-hint { margin-top: 7px; font-size: 12.5px; color: var(--nf-muted); }

.nf-edit-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: 7px;
    padding: 8px 11px;
    border-radius: var(--nf-radius);
    background: color-mix(in srgb, var(--nf-tertiary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--nf-tertiary) 34%, transparent);
    font-size: 12.5px;
    color: var(--nf-ink-2);
}

/* `[hidden]` tiene que ganarle al `display: flex` de arriba. */
.nf-edit-note[hidden] { display: none; }

.nf-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--nf-primary-deep);
    text-decoration: underline;
    cursor: pointer;
}

.nf-linkbtn:hover { color: var(--nf-primary); }

.nf-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }

.nf-form-actions .nf-btn { flex: 1 1 auto; }

.nf-form-note { margin-top: 12px; font-size: 12.5px; color: var(--nf-muted); }

/* El campo de plan solo aparece cuando el motivo elegido lo necesita. */
.nf-field[hidden] { display: none; }

/* ── Confianza ────────────────────────────────────────────────────────────────────────────── */

.nf-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.nf-trust-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-left: 16px;
    border-left: 2px solid color-mix(in srgb, var(--nf-primary) 45%, transparent);
}

.nf-trust-item h3 { font-size: 15.5px; }

.nf-trust-item p { font-size: 14px; color: var(--nf-ink-2); }

/* ── Cierre ───────────────────────────────────────────────────────────────────────────────── */

.nf-closing {
    position: relative;
    isolation: isolate;
    padding: clamp(56px, 7vw, 92px) 0;
    text-align: center;
    border-bottom: 1px solid var(--nf-line);
}

.nf-closing h2 { font-size: clamp(26px, 3.4vw, 38px); }

.nf-closing p {
    margin: 16px auto 0;
    max-width: 54ch;
    font-size: 16.5px;
    color: var(--nf-ink-2);
}

.nf-closing .nf-hero-actions { justify-content: center; }

/* ── Pie ──────────────────────────────────────────────────────────────────────────────────── */

.nf-footer { padding: 40px 0 56px; }

.nf-footer .nf-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    align-items: center;
}

.nf-footer-legal { font-size: 13px; color: var(--nf-muted); }

.nf-footer-links { display: flex; gap: 18px; margin-left: auto; font-size: 13.5px; }

.nf-footer-links a { color: var(--nf-ink-2); text-decoration: none; }

.nf-footer-links a:hover { color: var(--nf-primary-deep); }

/* ── Movimiento reducido ──────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /* Con movimiento reducido no se difiere nada: todo visible desde el primer pintado, sin esperar a
       que el observador llegue. Que el contenido dependa del scroll sería peor que animarlo. */
    .js-reveal [data-reveal],
    .js-reveal [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}