/* ============================================================================
   Landing pública — mielinotes.com raíz "/"   ·   REDISEÑO premium/minimal
   ----------------------------------------------------------------------------
   Lenguaje visual: SaaS premium moderno (referencias Linear / Stripe / Vercel).
   Sans-serif (Inter) de punta a punta, jerarquía tipográfica fuerte, mucho aire,
   base neutra (blancos + gris muy claro + casi-negro) con teal (#199c82) usado
   con intención como acento. Ritmo por contraste de fondos: blanco / gris /
   BLOQUE TEAL OSCURO de impacto (seguridad) / blanco. Detalles precisos:
   hairlines, radios suaves, sombras discretas. Nada recargado.

   Página standalone: NO carga el shell admin (app.css). Se sirve vía @cssAsset
   con cache-bust por mtime (media queries CRUDAS, NO pasa por el build PostCSS)
   — mismo criterio que /seguridad-y-privacidad. Namespace `lp-`.

   Animaciones: aparición al scroll (fade + translateY) con stagger, activadas
   por IntersectionObserver (clase .is-in). 100% transform/opacity (GPU, sin
   reflow). Respetan prefers-reduced-motion. Responsive impecable: sin overflow
   horizontal en ningún ancho.
   ============================================================================ */

:root {
    /* Acento teal (anclado — no depende del branding global que podría ser azul). */
    --lp-primary:      #199c82;
    /* Rampa ALINEADA a la escala canónica de app.css (--teal-*). Antes esta
       página tenía tonos propios (#15866f / #10715d / #ecf7f3): era la única
       superficie pública fuera de la rampa del sistema — /seguridad-y-privacidad
       y /terminos-y-condiciones ya usaban los canónicos. */
    --lp-primary-600:  #168a73;   /* --teal-600 */
    --lp-primary-700:  #116d5b;   /* --teal-700 · = --primary-dark */
    --lp-primary-800:  #0d4239;   /* --teal-800 */
    --lp-primary-050:  #e6f7f3;   /* --primary-light */
    --lp-primary-100:  #d6efe7;
    --lp-primary-rgb:  25, 156, 130;

    /* Neutrales (base mayormente neutra, casi-negro para texto). */
    --lp-ink:     #0b1512;   /* títulos / texto fuerte */
    --lp-ink-2:   #3d4a46;   /* cuerpo */
    --lp-muted:   #667571;   /* secundario */
    --lp-faint:   #8a9591;   /* terciario */
    --lp-line:    #e9eeec;   /* hairline */
    --lp-line-2:  #dde4e1;
    --lp-bg:      #ffffff;
    --lp-bg-alt:  #f6f8f7;   /* gris muy claro con matiz teal */
    --lp-card:    #ffffff;

    /* Bloque oscuro de impacto (seguridad + footer). */
    --lp-dark:     #08201b;
    --lp-dark-2:   #0c3529;
    --lp-dark-ink: #eaf3f0;

    /* Forma. */
    --lp-r-sm:  10px;
    --lp-r:     14px;
    --lp-r-lg:  20px;
    --lp-r-xl:  26px;
    --lp-pill:  999px;

    /* Elevación (discreta, premium). */
    --lp-sh-xs: 0 1px 2px rgba(11, 21, 18, .05);
    --lp-sh-sm: 0 2px 6px rgba(11, 21, 18, .05), 0 1px 2px rgba(11, 21, 18, .04);
    --lp-sh-md: 0 12px 30px -12px rgba(11, 32, 27, .16), 0 3px 8px -4px rgba(11, 21, 18, .06);
    --lp-sh-lg: 0 40px 80px -28px rgba(9, 40, 33, .30), 0 12px 28px -14px rgba(11, 21, 18, .12);

    --lp-maxw: 1200px;

    /* Mínimo tocable con el dedo (se aplica solo bajo `pointer: coarse`). */
    --lp-touch: 44px;

    /* Error de formulario. 6.2:1 sobre blanco — cumple AA. */
    --lp-error: #b3261e;

    /* Tipografía — Inter, sans moderna, con carácter. */
    --lp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Escala fluida (jerarquía fuerte). */
    --lp-fs-eyebrow: 0.78rem;
    --lp-fs-sm:   clamp(0.85rem, 0.82rem + 0.14vw, 0.92rem);
    --lp-fs-base: clamp(0.98rem, 0.95rem + 0.16vw, 1.05rem);
    --lp-fs-lead: clamp(1.08rem, 1.01rem + 0.40vw, 1.3rem);
    --lp-fs-h3:   clamp(1.12rem, 1.05rem + 0.34vw, 1.32rem);
    --lp-fs-h2:   clamp(1.85rem, 1.35rem + 1.9vw, 3.0rem);
    --lp-fs-h1:   clamp(2.4rem, 1.55rem + 3.4vw, 4.5rem);
}

/* ─── Reset acotado ────────────────────────────────────────────────────── */
.lp-page *, .lp-page *::before, .lp-page *::after { box-sizing: border-box; margin: 0; padding: 0; }

.lp-page {
    margin: 0;
    font-family: var(--lp-font);
    color: var(--lp-ink);
    background: var(--lp-bg);
    line-height: 1.6;
    font-size: var(--lp-fs-base);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    min-height: 100dvh;
    /* Red de seguridad anti-overflow. `hidden` sobre el <body> convierte al
       body en contenedor de scroll y en iOS Safari eso puede despegar el
       header `position: sticky` durante el momentum (CLAUDE.md Regla 12).
       `clip` recorta IGUAL pero NO crea contenedor de scroll, así que el
       sticky se sigue anclando al viewport. Se declara después para que los
       navegadores que lo soportan (Safari 16+, Chrome 90+) usen `clip` y los
       viejos conserven `hidden`. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* `scroll-behavior` lo gobierna el *scrolling element* (el <html>), no el
   <body>: declarado en `.lp-page` (= body) no hacía nada. Ahora que el header
   tiene navegación por anclas, el desplazamiento suave sí importa. */
html { scroll-behavior: smooth; }

.lp-page img { max-width: 100%; display: block; }
.lp-page svg { display: block; }
/* Los botones (.lp-btn) son <a>; se excluyen del color de enlace para que
   cada variante mande su propio `color` (y el SVG `currentColor`) sin que este
   reset —de mayor especificidad (0,1,1)— los pinte de teal. */
.lp-page a:not(.lp-btn) { color: var(--lp-primary-700); text-decoration: none; }
.lp-btn { text-decoration: none; }

.lp-container {
    width: 100%;
    max-width: var(--lp-maxw);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 48px);
}

/* Skip-link accesible. El selector es `.lp-page a.lp-skip` —y el `a` NO es
   decorativo, es el que hace que la regla funcione—:

     .lp-page a:not(.lp-btn)  → (0,2,1)   reset de color de enlace, línea ~115
     .lp-page .lp-skip        → (0,2,0)   PIERDE: le falta el selector de tipo
     .lp-page a.lp-skip       → (0,2,1)   empata y gana por orden ✔

   Con (0,2,0) el reset lo pintaba de teal sobre su propio fondo casi negro →
   2.97, por debajo de AA, y es el PRIMER control tabulable de la página.

   Tampoco se resuelve excluyéndolo del reset con `:not(.lp-skip)`: eso sube
   el reset a (0,3,1) y entonces le gana a `.lp-page .lp-footer__col a`,
   dejando los enlaces del pie en teal sobre negro (2.73). */
.lp-page a.lp-skip {
    position: absolute; left: 12px; top: -60px; z-index: 120;
    background: var(--lp-ink); color: #fff; padding: 10px 16px;
    border-radius: var(--lp-r-sm); font-weight: 600; transition: top 160ms ease;
}
.lp-skip:focus { top: 12px; }

/* ─── Botones ──────────────────────────────────────────────────────────── */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--lp-font); font-size: var(--lp-fs-sm); font-weight: 600;
    line-height: 1; letter-spacing: -.01em;
    padding: 11px 18px; border-radius: var(--lp-pill);
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.lp-btn svg { width: 16px; height: 16px; flex: none; }
/* Fondo en `--teal-700`, NO en `--teal-500`: blanco sobre #199c82 da 3.43 y AA
   pide 4.5; sobre #116d5b da 6.24. Es además el mismo tono que el botón del
   login (`--lg-primary`), así que el salto landing → login ya no cambia de
   color. `--lp-primary` (#199c82) sigue siendo el acento de marca: pinta el
   halo, los iconos y este mismo resplandor. */
.lp-btn--teal { background: var(--lp-primary-700); color: #fff; box-shadow: 0 6px 16px -6px rgba(var(--lp-primary-rgb), .55); }
.lp-btn--teal:hover { background: var(--lp-primary-800); transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(var(--lp-primary-rgb), .55); }
.lp-btn--ghost { background: transparent; color: var(--lp-ink); border-color: var(--lp-line-2); }
.lp-btn--ghost:hover { border-color: var(--lp-ink); transform: translateY(-1px); }
.lp-btn--ondark { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); }
.lp-btn--ondark:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.lp-btn--white { background: #fff; color: var(--lp-ink); }
.lp-btn--white:hover { background: #f2f5f4; transform: translateY(-1px); box-shadow: var(--lp-sh-md); }
.lp-btn--lg { padding: 14px 24px; font-size: var(--lp-fs-base); }

/* ─── Header sticky (blur al hacer scroll — tipo Stripe) ───────────────── */
.lp-header {
    position: sticky; top: 0; z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.lp-header.is-scrolled {
    background: rgba(255, 255, 255, .78);
    border-bottom-color: var(--lp-line);
    backdrop-filter: saturate(1.5) blur(12px);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
}
.lp-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 68px; padding-block: 12px;
}
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--lp-ink); font-weight: 700; letter-spacing: -.02em; min-width: 0; flex: none; }

/* ─── Navegación de secciones ──────────────────────────────────────────
   Vive entre la marca y las acciones. `flex-wrap: wrap` + anchos naturales
   en vez de un `nowrap` que confíe en el shrink del motor: ese patrón es el
   que desborda en WebKit (CLAUDE.md Regla 14). */
.lp-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-inline: auto;
    min-width: 0;
}
.lp-page .lp-nav a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--lp-r-sm);
    font-size: var(--lp-fs-sm);
    font-weight: 600;
    color: var(--lp-ink-2);
    white-space: nowrap;
    transition: color .16s ease, background .16s ease;
}
.lp-page .lp-nav a:hover { color: var(--lp-ink); background: rgba(11, 21, 18, .045); }

/* "Ingresar": enlace de texto, no botón. Es la acción del cliente que YA
   tiene cuenta y no debe competir con el CTA de adquisición. */
.lp-header__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.lp-page .lp-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: var(--lp-r-sm);
    font-size: var(--lp-fs-sm);
    font-weight: 600;
    color: var(--lp-ink-2);
    white-space: nowrap;
    transition: color .16s ease, background .16s ease;
}
.lp-page .lp-login:hover { color: var(--lp-ink); background: rgba(11, 21, 18, .045); }
.lp-login svg { width: 16px; height: 16px; flex: none; }

/* Degradado de la navegación por ancho. El orden de sacrificio va de lo
   informativo a lo decisivo: Funcionalidades → Producto → todo. Seguridad y
   Precios son las dos preguntas que realmente decide quien compra, así que
   son las últimas en irse. Como `.lp-nav` es `wrap`, si algo no cupiera el
   header crecería en alto en lugar de recortar: nunca se pierde un control. */
/* Se repite el prefijo `.lp-page .lp-nav` porque una media query NO aporta
   especificidad: un `.lp-nav__opt1 {display:none}` pelado (0,1,0) perdía
   contra `.lp-page .lp-nav a {display:inline-flex}` (0,2,1) y el degradado
   quedaba muerto — el header terminaba en 2 y hasta 3 filas entre 700 y 932px,
   justo en tablet 11", que es el dispositivo prioritario del proyecto. */
@media (max-width: 1024px) { .lp-page .lp-nav a.lp-nav__opt1 { display: none; } }
@media (max-width: 820px)  { .lp-page .lp-nav a.lp-nav__opt2 { display: none; } }
@media (max-width: 640px)  { .lp-nav { display: none; } }
/* Móvil chico: la marca cede su nombre para que "Ingresar" y el CTA quepan
   holgados. El logo sigue siendo el enlace a inicio. */
@media (max-width: 430px)  {
    .lp-brand__name { display: none; }
}
/* Tile del logo — MISMO tratamiento que la portada /demo (demo/landing.blade):
   fondo teal en gradiente + object-fit:cover, para que el logo (con su propio
   fondo blanco) llene la baldosa de borde a borde y NO quede el recuadro negro
   con letterbox del `contain`. Paridad exacta con la demo. */
.lp-brand__logo {
    width: 38px; height: 38px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px; overflow: hidden; color: #fff;
    background: linear-gradient(140deg, var(--lp-primary), #0f7a65);
    box-shadow: 0 8px 20px rgba(var(--lp-primary-rgb), .30), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.lp-brand__logo img { width: 100%; height: 100%; object-fit: cover; }
.lp-brand__logo svg { width: 20px; height: 20px; }
.lp-brand__name { font-size: 1.16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-header__actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }

/* ─── Sección genérica + ritmo de fondos ───────────────────────────────── */
.lp-section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.lp-section--alt { background: var(--lp-bg-alt); }
.lp-section--tight { padding-block: clamp(48px, 6vw, 88px); }

.lp-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.lp-head--left { margin-inline: 0; text-align: left; }
.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--lp-fs-eyebrow); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--lp-primary-700);
    padding: 5px 11px; border: 1px solid var(--lp-primary-100);
    background: var(--lp-primary-050); border-radius: var(--lp-pill);
    margin-bottom: 20px;
}
.lp-eyebrow svg { width: 14px; height: 14px; }
.lp-h2 { font-size: var(--lp-fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; color: var(--lp-ink); }
.lp-head__intro { margin-top: 18px; font-size: var(--lp-fs-lead); color: var(--lp-muted); line-height: 1.55; }

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */
.lp-hero { position: relative; overflow: hidden; padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 72px); }
/* Fondo abstracto teal minimal (grid sutil + halo) */
.lp-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-hero__bg::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(60% 42% at 50% -6%, rgba(var(--lp-primary-rgb), .13), transparent 70%);
}
.lp-hero__bg::after {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image:
        linear-gradient(to right, rgba(11,21,18,.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11,21,18,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(70% 55% at 50% 20%, #000 30%, transparent 78%);
            mask-image: radial-gradient(70% 55% at 50% 20%, #000 30%, transparent 78%);
}
.lp-hero__inner { position: relative; z-index: 1; text-align: center; max-width: 880px; margin-inline: auto; }
.lp-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--lp-fs-sm); font-weight: 500; color: var(--lp-ink-2);
    padding: 6px 14px 6px 8px; border: 1px solid var(--lp-line-2);
    background: #fff; border-radius: var(--lp-pill); box-shadow: var(--lp-sh-xs);
    margin-bottom: 26px;
}
.lp-hero__badge b { display: inline-flex; align-items: center; gap: 5px; color: var(--lp-primary-700); font-weight: 600; }
.lp-hero__badge b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-primary); box-shadow: 0 0 0 3px rgba(var(--lp-primary-rgb), .18); }
.lp-hero__title { font-size: var(--lp-fs-h1); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; color: var(--lp-ink); }
.lp-hero__title span { color: var(--lp-primary); }
.lp-hero__sub { margin: 24px auto 0; max-width: 620px; font-size: var(--lp-fs-lead); color: var(--lp-ink-2); line-height: 1.55; }
.lp-hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* `--lp-faint` (#8a9591) sobre blanco da 3.09 — falla AA (4.5) y esta línea va
   justo bajo el CTA principal. Se sube a `--lp-muted` (#667571 = 4.83). El token
   faint se conserva para uso decorativo (el mock, que es `aria-hidden`). */
.lp-hero__note { margin-top: 18px; font-size: var(--lp-fs-sm); color: var(--lp-muted); }

/* Mock de producto (app window abstracto, 100% CSS) */
.lp-mock {
    position: relative; z-index: 1;
    max-width: 960px; margin: clamp(44px, 6vw, 72px) auto 0;
    background: #fff; border: 1px solid var(--lp-line-2);
    border-radius: var(--lp-r-xl); box-shadow: var(--lp-sh-lg);
    overflow: hidden;
}
.lp-mock__bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--lp-line); background: #fbfcfc; }
.lp-mock__dots { display: inline-flex; gap: 6px; }
.lp-mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--lp-line-2); }
.lp-mock__url { margin-left: 8px; flex: 1; height: 24px; max-width: 320px; border-radius: var(--lp-pill); background: #f1f4f3; display: inline-flex; align-items: center; padding: 0 12px; gap: 7px; font-size: .72rem; color: var(--lp-faint); }
.lp-mock__url svg { width: 12px; height: 12px; color: var(--lp-primary); }
.lp-mock__body { display: grid; grid-template-columns: 190px 1fr; min-height: 300px; }
.lp-mock__side { border-right: 1px solid var(--lp-line); padding: 16px 14px; background: #fbfcfc; display: flex; flex-direction: column; gap: 6px; }
.lp-mock__navitem { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--lp-r-sm); font-size: .8rem; color: var(--lp-muted); }
.lp-mock__navitem span { width: 15px; height: 15px; border-radius: 4px; background: var(--lp-line-2); flex: none; }
.lp-mock__navitem.is-on { background: var(--lp-primary-050); color: var(--lp-primary-700); font-weight: 600; }
.lp-mock__navitem.is-on span { background: var(--lp-primary); }
.lp-mock__main { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lp-mock__toph { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-mock__toph b { font-size: .95rem; color: var(--lp-ink); font-weight: 700; letter-spacing: -.01em; }
.lp-mock__chip { font-size: .68rem; font-weight: 600; color: var(--lp-primary-700); background: var(--lp-primary-050); border: 1px solid var(--lp-primary-100); padding: 4px 9px; border-radius: var(--lp-pill); }
.lp-mock__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lp-mock__stat { border: 1px solid var(--lp-line); border-radius: var(--lp-r); padding: 12px 13px; }
.lp-mock__stat i { display: block; width: 34px; height: 6px; border-radius: 3px; background: var(--lp-line-2); margin-bottom: 9px; }
.lp-mock__stat b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--lp-ink); }
.lp-mock__stat b.t { color: var(--lp-primary); }
.lp-mock__rows { display: flex; flex-direction: column; gap: 9px; }
.lp-mock__row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--lp-line); border-radius: var(--lp-r); }
.lp-mock__av { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--lp-primary-100), var(--lp-primary)); }
.lp-mock__ln { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-mock__ln i { height: 7px; border-radius: 4px; background: var(--lp-line-2); }
.lp-mock__ln i:first-child { width: 45%; background: #cdd6d2; }
.lp-mock__ln i:last-child { width: 72%; }
.lp-mock__pill { width: 46px; height: 20px; border-radius: var(--lp-pill); background: var(--lp-primary-050); flex: none; }

/* ═══ AUDIENCIAS (qué es / para quién) ═══════════════════════════════════ */
.lp-aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 24px); }
.lp-aud__card { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg); padding: clamp(24px, 3vw, 32px); transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease; }
.lp-aud__card:hover { transform: translateY(-4px); box-shadow: var(--lp-sh-md); border-color: var(--lp-line-2); }
.lp-aud__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: var(--lp-primary-050); color: var(--lp-primary-700); margin-bottom: 18px; }
.lp-aud__ic svg { width: 25px; height: 25px; }
.lp-aud__card h3 { font-size: var(--lp-fs-h3); font-weight: 700; letter-spacing: -.02em; color: var(--lp-ink); margin-bottom: 8px; }
.lp-aud__card p { font-size: var(--lp-fs-sm); color: var(--lp-muted); line-height: 1.6; }

/* ═══ BENEFICIOS PARA CLÍNICAS (filas de impacto) ═══════════════════════ */
.lp-benes { display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 22px); }
.lp-bene {
    display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: clamp(16px, 3vw, 32px);
    background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r-lg);
    padding: clamp(22px, 3vw, 30px) clamp(22px, 3.5vw, 38px);
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.lp-bene:hover { transform: translateY(-3px); box-shadow: var(--lp-sh-md); border-color: var(--lp-primary-100); }
.lp-bene__ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(140deg, var(--lp-primary-050), #fff); border: 1px solid var(--lp-primary-100); color: var(--lp-primary-700); }
.lp-bene__ic svg { width: 30px; height: 30px; }
.lp-bene__tx h3 { font-size: var(--lp-fs-h3); font-weight: 700; letter-spacing: -.02em; color: var(--lp-ink); margin-bottom: 5px; }
.lp-bene__tx p { font-size: var(--lp-fs-base); color: var(--lp-ink-2); line-height: 1.55; }
.lp-bene__n { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--lp-line-2); line-height: 1; }

/* ═══ FUNCIONALIDADES (grid) ════════════════════════════════════════════ */
.lp-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); }
.lp-feat {
    background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: var(--lp-r);
    padding: 22px 20px;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease;
}
.lp-feat:hover { transform: translateY(-3px); box-shadow: var(--lp-sh-md); border-color: var(--lp-primary-100); }
.lp-feat__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--lp-bg-alt); color: var(--lp-primary-700); margin-bottom: 15px; border: 1px solid var(--lp-line); }
.lp-feat__ic svg { width: 21px; height: 21px; }
.lp-feat h3 { font-size: 0.98rem; font-weight: 700; letter-spacing: -.01em; color: var(--lp-ink); margin-bottom: 5px; }
.lp-feat p { font-size: var(--lp-fs-sm); color: var(--lp-muted); line-height: 1.5; }

/* ═══ SEGURIDAD (bloque oscuro de impacto) ══════════════════════════════ */
.lp-sec-wrap { padding-block: clamp(56px, 7vw, 104px); }
.lp-sec {
    position: relative; overflow: hidden;
    border-radius: var(--lp-r-xl);
    background:
        radial-gradient(90% 80% at 88% -10%, rgba(var(--lp-primary-rgb), .28), transparent 60%),
        linear-gradient(160deg, var(--lp-dark) 0%, var(--lp-dark-2) 100%);
    color: var(--lp-dark-ink);
    padding: clamp(34px, 5vw, 68px);
    box-shadow: var(--lp-sh-lg);
}
.lp-sec::before { /* grid sutil sobre el bloque */
    content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(80% 80% at 80% 0%, #000, transparent 75%);
            mask-image: radial-gradient(80% 80% at 80% 0%, #000, transparent 75%);
}
.lp-sec__grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.lp-sec__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--lp-fs-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9fe6d3; margin-bottom: 18px; }
.lp-sec__eyebrow svg { width: 15px; height: 15px; }
.lp-sec h2 { font-size: var(--lp-fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: #fff; margin-bottom: 16px; }
.lp-sec__lead { color: rgba(255,255,255,.82); font-size: var(--lp-fs-lead); line-height: 1.55; margin-bottom: 26px; }
.lp-sec__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-sec__item { display: flex; gap: 11px; align-items: flex-start; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.11); border-radius: var(--lp-r); padding: 14px 15px; }
.lp-sec__item svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #6fddc2; }
.lp-sec__item b { display: block; color: #fff; font-size: .92rem; font-weight: 600; margin-bottom: 2px; letter-spacing: -.01em; }
.lp-sec__item span { font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.45; }

/* ═══ CTA FINAL + contacto ═════════════════════════════════════════════ */
.lp-cta { text-align: center; max-width: 760px; margin-inline: auto; }
.lp-cta h2 { font-size: var(--lp-fs-h2); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; color: var(--lp-ink); }
.lp-cta p { margin: 18px auto 0; max-width: 540px; font-size: var(--lp-fs-lead); color: var(--lp-muted); line-height: 1.55; }
.lp-cta__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lp-cta__contact { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--lp-line); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.lp-cta__item { display: inline-flex; align-items: center; gap: 9px; font-size: var(--lp-fs-sm); color: var(--lp-ink-2); }
.lp-cta__item svg { width: 17px; height: 17px; color: var(--lp-primary-700); flex: none; }
.lp-cta__item b { color: var(--lp-ink); font-weight: 600; }
.lp-cta__item a { color: var(--lp-primary-700); font-weight: 600; }

/* ═══ FOOTER (oscuro) ═══════════════════════════════════════════════════ */
.lp-footer { background: var(--lp-dark); color: rgba(255,255,255,.72); padding-block: clamp(44px, 6vw, 68px); }
.lp-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.lp-footer__brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
.lp-footer__brand .lp-brand__name { color: #fff; }
.lp-footer__tag { font-size: var(--lp-fs-sm); color: rgba(255,255,255,.58); max-width: 320px; line-height: 1.6; }
.lp-footer h4 { color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 15px; }
.lp-footer ul { list-style: none; display: grid; gap: 11px; }
.lp-footer li, .lp-page .lp-footer__col a { color: rgba(255,255,255,.72); font-size: var(--lp-fs-sm); }
.lp-footer__col a { display: inline-flex; align-items: center; gap: 8px; transition: color .16s ease; }
.lp-footer__col a:hover { color: #fff; }
.lp-footer__col svg { width: 15px; height: 15px; color: #6fddc2; flex: none; }
.lp-footer__bottom { margin-top: clamp(30px, 4vw, 44px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: var(--lp-fs-sm); color: rgba(255,255,255,.5); }

/* ═══ ANIMACIONES AL SCROLL (IntersectionObserver → .is-in) ═════════════ */
/* SIN `will-change`: son ~38 nodos y el hint NUNCA se retira tras animar, así
   que deja 38 capas de compositor vivas toda la sesión — el patrón asociado a
   los fallos de capa GPU en tablets Android de gama baja de este proyecto.
   La transición ya es 100% opacity/transform: el navegador la promueve solo
   mientras dura y libera la capa al terminar. */
.lp-anim { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * 65ms); }
.lp-anim.is-in { opacity: 1; transform: none; }
/* Fallback si el JS no corre: mostrar todo tras cargar (evita contenido invisible). */
.lp-page.no-js .lp-anim { opacity: 1; transform: none; }

/* Stagger por posición — vive en CSS (cero estilos inline en el Blade). */
.lp-hero__inner > .lp-anim:nth-child(2) { --i: 1; }
.lp-hero__inner > .lp-anim:nth-child(3) { --i: 2; }
.lp-hero__inner > .lp-anim:nth-child(4) { --i: 3; }
.lp-hero__inner > .lp-anim:nth-child(5) { --i: 4; }
.lp-hero .lp-mock { --i: 5; }
.lp-head > .lp-anim:nth-child(2),
.lp-aud  > .lp-anim:nth-child(2),
.lp-benes > .lp-anim:nth-child(2),
.lp-cta  > .lp-anim:nth-child(2) { --i: 1; }
.lp-head > .lp-anim:nth-child(3),
.lp-aud  > .lp-anim:nth-child(3),
.lp-benes > .lp-anim:nth-child(3),
.lp-cta  > .lp-anim:nth-child(3) { --i: 2; }
.lp-cta  > .lp-anim:nth-child(4) { --i: 3; }
.lp-feats > .lp-anim:nth-child(4n+2) { --i: 1; }
.lp-feats > .lp-anim:nth-child(4n+3) { --i: 2; }
.lp-feats > .lp-anim:nth-child(4n+4) { --i: 3; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* Laptop / tablet grande */
@media (max-width: 1080px) {
    .lp-feats { grid-template-columns: repeat(3, 1fr); }
    .lp-sec__grid { grid-template-columns: 1fr; }
    .lp-sec__list { grid-template-columns: 1fr 1fr; }
}

/* Tablet */
@media (max-width: 860px) {
    .lp-aud { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
    .lp-bene { grid-template-columns: 56px 1fr; }
    .lp-bene__n { display: none; }
    .lp-footer__grid { grid-template-columns: 1fr 1fr; }
    .lp-footer__brand-col { grid-column: 1 / -1; }
    .lp-mock__body { grid-template-columns: 1fr; }
    .lp-mock__side { flex-direction: row; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--lp-line); gap: 8px; }
    .lp-mock__navitem { white-space: nowrap; }
    .lp-mock__navitem:nth-child(n+4) { display: none; }
}

/* Móvil grande / tablet chica */
@media (max-width: 640px) {
    .lp-feats { grid-template-columns: repeat(2, 1fr); }
    .lp-sec__list { grid-template-columns: 1fr; }
    .lp-hero__cta .lp-btn, .lp-cta__actions .lp-btn { flex: 1 1 auto; }
    .lp-mock__stats { grid-template-columns: 1fr; }
    .lp-mock__stat { display: flex; align-items: center; gap: 12px; }
    .lp-mock__stat i { margin-bottom: 0; }
}

/* Móvil */
@media (max-width: 440px) {
    .lp-feats { grid-template-columns: 1fr; }
    .lp-footer__grid { grid-template-columns: 1fr; }
    .lp-brand__name { font-size: 1.05rem; }
    .lp-header__inner { min-height: 60px; }
    .lp-cta__contact { flex-direction: column; align-items: center; }
    .lp-footer__bottom { justify-content: center; text-align: center; }
    .lp-mock__toph b { font-size: .88rem; }
}

/* Landscape móvil corto: reduce el respiro vertical del hero */
@media (max-height: 480px) and (orientation: landscape) {
    .lp-hero { padding-top: 40px; }
    .lp-mock { display: none; }                   /* prioriza el mensaje en landscape corto */
}

/* Reduce motion: sin animaciones de entrada ni hover-lift */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lp-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
    /* 1ms y no `.01ms` (token que clean-css rompe a `NaNs` en hojas con build). */
    .lp-page *, .lp-page *::before, .lp-page *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE DE WHATSAPP  ·  contacto directo
   ----------------------------------------------------------------------------
   Docked abajo-derecha. Círculo con el glifo de WhatsApp (verde de marca, acción
   reconocible al instante). Anillo de pulso discreto para llamar la atención sin
   molestar. Al hover/focus (desktop) despliega una etiqueta que crece hacia la
   IZQUIERDA — el borde derecho queda anclado por `right`, así nunca desborda el
   viewport. En móvil se mantiene como círculo compacto. Accesible: aria-label,
   focus-visible, respeta prefers-reduced-motion, safe-area en iOS.
   ════════════════════════════════════════════════════════════════════════ */
.lp-wa {
    position: fixed;
    right: clamp(16px, 3.2vw, 28px);
    bottom: clamp(16px, 3.2vw, 28px);
    bottom: calc(clamp(16px, 3.2vw, 28px) + env(safe-area-inset-bottom, 0px));
    z-index: 95;

    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    border-radius: var(--lp-pill);
    background: linear-gradient(145deg, #25d366 0%, #1aae57 100%);
    box-shadow:
        0 10px 26px -6px rgba(18, 140, 90, .55),
        0 4px 10px -3px rgba(11, 21, 18, .22),
        inset 0 1px 0 rgba(255, 255, 255, .28);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    animation: lp-wa-in .55s cubic-bezier(.22, 1, .36, 1) .8s both;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, background .28s ease;
}

.lp-wa:hover {
    transform: translateY(-3px);
    background: linear-gradient(145deg, #2ee06e 0%, #1bb85c 100%);
    box-shadow:
        0 16px 34px -8px rgba(18, 140, 90, .6),
        0 6px 14px -4px rgba(11, 21, 18, .26),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}
.lp-wa:active { transform: translateY(-1px) scale(.98); }

.lp-wa:focus-visible {
    outline: 3px solid var(--lp-primary);
    outline-offset: 3px;
}

/* Caja del icono — cuadrada y fija: define el punto de anclaje derecho */
.lp-wa__ic {
    position: relative;
    width: 58px;
    height: 58px;
    flex: none;
    display: grid;
    place-items: center;
}
.lp-wa__ic svg {
    position: relative;
    z-index: 1;
    width: 33px;
    height: 33px;
    filter: drop-shadow(0 1px 1.5px rgba(9, 66, 44, .35));
}

/* Etiqueta — colapsada a 0 (círculo puro); se despliega al hover/focus */
.lp-wa__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    padding: 0;
    transition: max-width .38s cubic-bezier(.22, 1, .36, 1), opacity .26s ease, padding .38s cubic-bezier(.22, 1, .36, 1);
}
.lp-wa:hover .lp-wa__label,
.lp-wa:focus-visible .lp-wa__label {
    max-width: 200px;
    opacity: 1;
    padding: 0 2px 0 22px;
}

/* Anillo de pulso — halo que EMANA hacia afuera (centro transparente vía
   box-shadow, no un disco relleno): el glifo queda siempre limpio y nítido. */
.lp-wa__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    /* Disco de color propio: antes lo dibujaba el `box-shadow` animado. */
    background: #25d366;
    opacity: 0;
    animation: lp-wa-pulse 2.4s cubic-bezier(.66, 0, 0, 1) infinite;
}

/* El pulso animaba `box-shadow` (spread 0→16px) en bucle INFINITO: repintado
   continuo mientras la pestaña esté abierta. Mismo resultado visual —un disco
   translúcido que emana y se desvanece— resuelto con transform + opacity, que
   corren en el compositor sin repintar. 58px + 2×16px = 90px ⇒ scale 1.552. */
@keyframes lp-wa-pulse {
    0%   { transform: scale(1);     opacity: .55; }
    70%  { transform: scale(1.552); opacity: 0; }
    100% { transform: scale(1.552); opacity: 0; }
}
@keyframes lp-wa-in {
    from { transform: translateY(18px) scale(.5); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* Móvil: círculo algo más compacto (sin hover, la etiqueta no aparece) */
@media (max-width: 640px) {
    .lp-wa__ic { width: 55px; height: 55px; }
    .lp-wa__ic svg { width: 31px; height: 31px; }
}

/* El FAB se retira mientras el formulario de solicitud está abierto.
   Medido en móvil: se montaba sobre los campos y sobre los CTA de plan (hasta
   24×46px encima de "Pedir una cotización"), así que un pulgar dirigido al
   borde derecho del botón abría WhatsApp en vez de convertir. Por encima de
   1080px el ancho del contenedor lo aleja del contenido y no hace falta.
   Quien prefiera WhatsApp lo tiene en el pie y en el bloque de contacto. */
@media (max-width: 1080px) {
    .lp-lead-open .lp-wa {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(14px);
        transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-wa { animation: none; }
    .lp-wa__ring { animation: none; opacity: 0; }
}

/* ═══ PRECIOS + SOLICITUD DE ACCESO ═════════════════════════════════════
   El único destino de conversión de la página. Reutiliza el lenguaje de las
   tarjetas existentes (hairline + radio suave + sombra discreta) para no
   introducir un mundo visual nuevo a mitad del scroll.                    */

/* El header es sticky (69px): sin esto, saltar a #precios o a #solicitar
   deja el titular tapado por la barra. */
#producto, #funcionalidades, #seguridad, #precios, #solicitar { scroll-margin-top: 92px; }

.lp-plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 2.4vw, 26px);
    align-items: start;
    margin-bottom: clamp(32px, 4.5vw, 56px);
}

.lp-plan {
    position: relative;
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-lg);
    padding: clamp(26px, 3vw, 36px);
    box-shadow: var(--lp-sh-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}
.lp-plan--featured {
    border-color: var(--lp-primary-100);
    box-shadow: var(--lp-sh-md);
}
.lp-plan__tag {
    position: absolute;
    top: -12px;
    left: clamp(26px, 3vw, 36px);
    background: var(--lp-primary-700);
    color: #fff;
    font-size: var(--lp-fs-eyebrow);
    font-weight: 600;
    letter-spacing: -.01em;
    padding: 5px 13px;
    border-radius: var(--lp-pill);
    box-shadow: 0 6px 16px -8px rgba(var(--lp-primary-rgb), .7);
}
.lp-plan h3 { font-size: var(--lp-fs-h3); font-weight: 700; letter-spacing: -.02em; color: var(--lp-ink); }
.lp-plan__for { font-size: var(--lp-fs-sm); color: var(--lp-muted); line-height: 1.6; margin-top: -6px; }

.lp-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 6px 14px;
    border-bottom: 1px solid var(--lp-line);
}
.lp-plan__price b {
    font-size: clamp(2.1rem, 1.5rem + 2.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--lp-ink);
    line-height: 1;
}
.lp-plan__price span { font-size: var(--lp-fs-sm); color: var(--lp-muted); }

.lp-plan__list { list-style: none; display: grid; gap: 10px; flex: 1; }
.lp-plan__list li {
    position: relative;
    padding-left: 27px;
    font-size: var(--lp-fs-sm);
    color: var(--lp-ink-2);
    line-height: 1.55;
}
/* Palomita dibujada en CSS: un SVG por viñeta serían 11 nodos de más. */
.lp-plan__list li::before {
    content: "";
    position: absolute;
    left: 2px; top: .42em;
    width: 11px; height: 6px;
    border-left: 2px solid var(--lp-primary-700);
    border-bottom: 2px solid var(--lp-primary-700);
    transform: rotate(-45deg);
}
/* `margin-top:auto` empuja el CTA al pie de la tarjeta: los dos planes tienen
   distinta cantidad de viñetas (6 y 5) y sin esto los botones quedaban a
   distinta altura, rompiendo la línea de base entre tarjetas. */
.lp-plan__cta { width: 100%; justify-content: center; margin-top: auto; }

/* ── Formulario: divulgación progresiva ───────────────────────────────────
   El panel se colapsa animando `grid-template-rows` de 1fr a 0fr, que sí
   transiciona (a diferencia de `height:auto`) y no obliga a fijar una altura
   máxima a ojo, que se rompería con los mensajes de error.

   TODO el colapso vive bajo `.lp-js`, la clase que pone el script del <head>.
   Sin JavaScript la clase nunca aparece y el formulario queda visible: el
   único camino de conversión de la página NO puede depender del JS.         */
.lp-leadwrap { display: grid; grid-template-rows: 1fr; }
.lp-leadwrap > .lp-lead { min-height: 0; }

.lp-js .lp-leadwrap {
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s cubic-bezier(.22, 1, .36, 1);
}
.lp-js .lp-leadwrap > .lp-lead {
    overflow: hidden;
    /* `visibility` (y no solo la altura 0) saca los campos del orden de
       tabulación: sin esto se puede tabular a ciegas dentro de un formulario
       invisible. Se retrasa hasta el final de la animación al cerrar y actúa
       de inmediato al abrir. */
    visibility: hidden;
    /* `0fr` colapsa la FILA, no el relleno del hijo: sin anular padding y
       borde quedaba una banda muerta de 54–90px (y se imprimía). `min-height:0`
       resuelve la caja de contenido, no el padding. */
    padding-block: 0;
    border-block-width: 0;
    transition: grid-template-rows .42s cubic-bezier(.22, 1, .36, 1),
                padding-block .42s cubic-bezier(.22, 1, .36, 1),
                border-block-width .42s cubic-bezier(.22, 1, .36, 1),
                visibility 0s .42s;
}
.lp-js .lp-leadwrap.is-open { grid-template-rows: 1fr; }
.lp-js .lp-leadwrap.is-open > .lp-lead {
    visibility: visible;
    padding-block: clamp(26px, 3.4vw, 44px);   /* mismo valor que `.lp-lead` */
    border-block-width: 1px;
    transition: padding-block .42s cubic-bezier(.22, 1, .36, 1),
                border-block-width .42s cubic-bezier(.22, 1, .36, 1),
                visibility 0s 0s;
}

/* El selector del estado abierto es (0,4,0); anularlo exige repetirlo aquí o
   la regla no gana y `visibility` sigue gobernada por una transición. Eso
   dejaba el campo aún oculto cuando el JS intentaba enfocarlo — y enfocar un
   elemento `visibility: hidden` es un no-op silencioso. */
@media (prefers-reduced-motion: reduce) {
    .lp-js .lp-leadwrap,
    .lp-js .lp-leadwrap > .lp-lead,
    .lp-js .lp-leadwrap.is-open > .lp-lead { transition: none; }
}

.lp-lead {
    background: var(--lp-bg-alt);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r-xl);
    padding: clamp(26px, 3.4vw, 44px);
}
.lp-lead__intro { margin-bottom: 22px; }
.lp-lead__intro h3 { font-size: var(--lp-fs-h3); font-weight: 700; letter-spacing: -.02em; color: var(--lp-ink); }
.lp-lead__intro p { font-size: var(--lp-fs-sm); color: var(--lp-muted); margin-top: 6px; }

/* Honeypot: fuera de pantalla, NO `display:none` — hay bots que omiten los
   campos ocultos de ese modo y llenan el resto igual. */
.lp-form__hp {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lp-form__plans { border: 0; padding: 0; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-form__plans legend {
    font-size: var(--lp-fs-eyebrow);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-muted);
    margin-bottom: 10px;
}
.lp-form__chip { position: relative; }
.lp-form__chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lp-form__chip span {
    display: inline-flex;
    align-items: center;
    min-height: var(--lp-touch, 44px);
    padding: 0 18px;
    border: 1px solid var(--lp-line-2);
    border-radius: var(--lp-pill);
    background: var(--lp-card);
    font-size: var(--lp-fs-sm);
    font-weight: 600;
    color: var(--lp-ink-2);
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.lp-form__chip input:checked + span {
    border-color: var(--lp-primary-700);
    background: var(--lp-primary-050);
    color: var(--lp-primary-700);
}
.lp-form__chip input:focus-visible + span { outline: 3px solid var(--lp-primary); outline-offset: 3px; }

.lp-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
.lp-field { display: flex; flex-direction: column; gap: 7px; }
.lp-field--full { grid-column: 1 / -1; }
.lp-field label { font-size: var(--lp-fs-sm); font-weight: 600; color: var(--lp-ink-2); }
.lp-field label b { color: var(--lp-primary-700); }
.lp-field label span { font-weight: 400; color: var(--lp-muted); }

/* REGLA 8 — auto-zoom de iOS: por debajo de 16px, Safari hace zoom al
   enfocar el campo y descuadra el layout. 16px es un PISO, no una
   preferencia estética. */
.lp-field input,
.lp-field select,
.lp-field textarea {
    font-family: var(--lp-font);
    font-size: 16px;
    color: var(--lp-ink);
    background: var(--lp-card);
    border: 1px solid var(--lp-line-2);
    border-radius: var(--lp-r-sm);
    padding: 12px 14px;
    min-height: var(--lp-touch, 44px);
    width: 100%;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.lp-field textarea { resize: vertical; line-height: 1.6; }
/* `--lp-faint` daría 3.09 sobre blanco: falla AA igual que fallaba
   `.lp-hero__note`. Un placeholder es texto que hay que poder leer. */
.lp-field input::placeholder,
.lp-field textarea::placeholder { color: var(--lp-muted); }
.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
    outline: none;
    border-color: var(--lp-primary-700);
    box-shadow: 0 0 0 3px rgba(var(--lp-primary-rgb), .16);
}
.lp-field input[aria-invalid="true"] { border-color: var(--lp-error); }
.lp-field__err { font-size: var(--lp-fs-sm); color: var(--lp-error); font-weight: 500; }

.lp-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: 22px;
}
.lp-form__legal { font-size: var(--lp-fs-sm); color: var(--lp-muted); flex: 1 1 260px; line-height: 1.55; }

/* Estado de carga del botón: la animación vive DENTRO del control que la
   dispara, sin bloquear la página (regla de animación de carga del proyecto). */
.lp-form__spin {
    width: 0;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    opacity: 0;
    transition: width .2s ease, opacity .2s ease, margin .2s ease;
}
.lp-form__submit.is-loading { pointer-events: none; }
.lp-form__submit.is-loading .lp-form__spin {
    width: 16px;
    opacity: 1;
    margin-right: 2px;
    animation: lp-spin .7s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* Confirmación tras enviar. */
.lp-lead__done { text-align: center; padding-block: 8px; }
.lp-lead__check {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--lp-primary-050);
    color: var(--lp-primary-700);
}
.lp-lead__check svg { width: 26px; height: 26px; }
.lp-lead__done h3 { font-size: var(--lp-fs-h3); font-weight: 700; letter-spacing: -.02em; color: var(--lp-ink); }
.lp-lead__done p { font-size: var(--lp-fs-sm); color: var(--lp-muted); margin-top: 8px; max-width: 46ch; margin-inline: auto; line-height: 1.65; }

@media (max-width: 860px) {
    .lp-plans { grid-template-columns: 1fr; }
    .lp-plan__tag { top: -11px; }
}
@media (max-width: 640px) {
    .lp-form__grid { grid-template-columns: 1fr; }
    .lp-form__chip span { width: 100%; justify-content: center; }
    .lp-form__chip { flex: 1 1 100%; }
    /* Era el ÚNICO control del formulario que no ocupaba el ancho (53%):
       junto a chips, campos y select a ancho completo se leía como inacabado,
       y en móvil el botón de envío a ancho completo es la convención. */
    .lp-form__submit { width: 100%; justify-content: center; }
    .lp-form__legal { flex: 1 1 100%; }
}

/* ═══ FOCO VISIBLE POR TECLADO ══════════════════════════════════════════
   Antes solo `.lp-wa` y `.lp-skip` definían foco propio: los CTA caían al
   anillo por defecto del navegador (oscuro, 1px), de bajo contraste sobre el
   botón teal y ajeno al resto de la página. Se usa `:focus-visible` (no
   `:focus`) para NO dibujar el anillo en clics de ratón.                  */
.lp-page a:focus-visible,
.lp-btn:focus-visible {
    outline: 3px solid var(--lp-primary);
    outline-offset: 3px;
    border-radius: var(--lp-r-sm);
}
/* Sobre superficies oscuras el teal no separa lo suficiente: anillo claro. */
.lp-sec a:focus-visible,
.lp-sec .lp-btn:focus-visible,
.lp-footer a:focus-visible {
    outline-color: #6fddc2;
}

/* ═══ OBJETIVOS TÁCTILES (dedo, no ratón) ═══════════════════════════════
   Medido: botones de header 38–40px y enlaces de pie/contacto ~22px, bajo el
   mínimo de 44px. Solo se aplica con puntero grueso, así que el escritorio
   conserva su densidad. OJO al validar: Chromium con ratón NO evalúa
   `pointer: coarse` (CLAUDE.md Regla 14) — hay que emular las métricas.   */
@media (pointer: coarse) {
    .lp-btn { min-height: var(--lp-touch, 44px); }
    /* `min-width` además del alto: en ≤430 la marca pierde su nombre y queda
       solo el mosaico del logo (38px), que sin esto no llega al mínimo tocable
       en el eje horizontal. */
    .lp-brand { min-height: var(--lp-touch, 44px); min-width: var(--lp-touch, 44px); }

    /* Enlaces de texto: se les da altura tocable sin cambiar la tipografía. */
    .lp-page .lp-nav a,
    .lp-page .lp-login,
    .lp-footer__col a,
    .lp-form__legal a,
    .lp-cta__item {
        min-height: var(--lp-touch, 44px);
        display: inline-flex;
        align-items: center;
    }
    /* El pitch de la lista lo daba el gap; con targets de 44px sobra. */
    .lp-footer ul { gap: 2px; }
}

/* ═══ IMPRESIÓN ═════════════════════════════════════════════════════════
   Esta página NO carga app.css, así que NO hereda su reset global de
   impresión: sin este bloque, todo `.lp-anim` que el IntersectionObserver
   aún no había revelado se imprime con `opacity: 0` (medido: 32 de 38
   bloques en blanco al hacer Ctrl+P sin scrollear la página entera).
   Además pasa los bloques oscuros a papel blanco (ahorro de tinta) y
   retira lo puramente interactivo/decorativo.                          */
@media print {
    /* 1) Lo esencial: nada de contenido animado puede quedar invisible. */
    .lp-anim,
    .lp-anim.is-in,
    .lp-page.no-js .lp-anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }

    /* 2) Fuera lo interactivo y lo decorativo (no aporta en papel). */
    .lp-skip,
    .lp-wa,
    .lp-hero__bg,
    .lp-mock,
    /* Un formulario vacío en papel no sirve para nada; los planes sí. */
    .lp-form { display: none !important; }

    /* 3) El header sticky pasa a flujo normal: sin blur ni fondo flotante. */
    .lp-header {
        position: static !important;
        background: none !important;
        border-bottom: 1px solid var(--lp-line) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .lp-header__actions { display: none !important; }

    /* 4) Bloques oscuros → papel blanco con tinta legible. */
    .lp-sec,
    .lp-footer {
        background: none !important;
        color: var(--lp-ink) !important;
        border: 1px solid var(--lp-line-2) !important;
        box-shadow: none !important;
    }
    .lp-sec::before { display: none !important; }
    .lp-sec h2,
    .lp-sec__lead,
    .lp-sec__eyebrow,
    .lp-sec__item span,
    .lp-sec__item b,
    .lp-footer__brand,
    .lp-footer__brand .lp-brand__name,
    .lp-footer h4,
    .lp-footer li,
    .lp-page .lp-footer__col a,
    .lp-footer__tag,
    .lp-footer__bottom { color: var(--lp-ink) !important; }
    .lp-sec__item svg,
    .lp-footer__col svg { color: var(--lp-primary-700) !important; }
    .lp-footer__bottom { border-top-color: var(--lp-line-2) !important; }

    /* 5) Sin sombras ni elevación: en papel solo ensucian. */
    .lp-aud__card,
    .lp-bene,
    .lp-feat,
    .lp-cta,
    .lp-btn { box-shadow: none !important; }

    /* 6) Cortes de página sensatos. */
    .lp-section,
    .lp-sec-wrap { break-inside: auto; }
    .lp-aud__card,
    .lp-bene,
    .lp-feat,
    .lp-sec,
    .lp-cta { break-inside: avoid; page-break-inside: avoid; }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}