/* ═══════════════════════════════════════════════════════════════════════
   NETZA · Landing pública (v1.86.0)
   ═══════════════════════════════════════════════════════════════════════
   Sistema visual oscuro AISLADO de la app. Todas las clases prefijadas
   con .lp para evitar colisiones con el resto de Netza (que usa paleta
   soft "tinta sobre papel"). El landing tiene su propio reset y tipografía.

   Origen: handoff Claude Design (propuesta-b "Fintech Modular").
   - Hero con eyebrow + título grande con gradient + lede + CTAs + trust strip.
   - Bento grid: dashboard mockup + forecast + notificaciones + tabla en
     vivo + categorías + cotizaciones (Oficial/Blue/MEP/CCL) + asistente IA.
   - Process (3 pasos) + Pricing (anual + mensual) + CTA final + footer.

   Solo se carga en /landing.html. El resto de la app sigue con netza-base.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* v2.10.45 (Facu 2026-05-13) — Tipografía alineada con la app principal:
   Roboto (sans) + Roboto Mono. Antes era JetBrains Mono (sans+mono) +
   Instrument Serif. Mejora consistencia visual entre landing y app loggeada. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600;700&display=swap');

.lp {
    --bg: #0a0a0c;
    --bg-2: #0f1013;
    --bg-3: #16181c;
    --line: #22252b;
    --line-2: #2c3036;

    --ink: #f4f0e8;
    --ink-2: #d4cfc3;
    --ink-3: #8a857b;
    --ink-4: #55514a;

    --accent: #c0593c;
    --accent-2: #d6663f;
    --accent-glow: rgba(192,89,60,.25);

    --lime: #c4ff3d;
    --lime-2: #a3e029;
    --lime-glow: rgba(196,255,61,.2);

    --gold: #f5b942;
    --violet: #a586ff;

    --pos: #5fbf6e;
    --neg: #c0593c;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-2xl: 32px;

    /* v2.10.45 — Roboto (sans) + Roboto Mono. Mismas fuentes que la app
       loggeada (`--netza-font-sans` / `--netza-font-mono` en netza-base.css). */
    --sans: 'Roboto', system-ui, -apple-system, sans-serif;
    --mono: 'Roboto Mono', ui-monospace, monospace;

    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01', 'cv11';
    letter-spacing: -0.011em;
    min-height: 100vh;
}
.lp * { box-sizing: border-box; margin: 0; padding: 0; }
.lp button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
.lp a { color: inherit; text-decoration: none; }

/* === Common: container, eyebrow === */
.lp .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.lp .container.tight { max-width: 1080px; }
.lp .eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-3); font-weight: 500;
    display: inline-flex; align-items: center; gap: 8px;
}
.lp .eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--ink-4); }

/* === Logo === */
.lp .netza-mark { display: inline-flex; align-items: center; gap: 9px; }
/* v1.89.6 — Logo Netza animado en toda la landing. La balancita (g
   class=netza-tilt-anim) oscila entre -5deg y -2deg cada 4s. El triangulo
   base queda fijo (no esta dentro del <g>). */
@keyframes netzaTiltLanding {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(-2deg); }
}
.lp .netza-tilt-anim {
    transform-origin: 90px 90px;
    animation: netzaTiltLanding 4s ease-in-out infinite;
}
.lp .netza-mark-svg { width: 22px; height: 22px; }
.lp .netza-mark-name { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

/* === Sticky nav === */
.lp .sticky-nav {
    position: sticky; top: 16px; z-index: 80;
    display: flex; align-items: center; justify-content: space-between;
    margin: 16px 24px 0;
    padding: 10px 14px 10px 18px;
    background: rgba(15,16,19,.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--line);
    border-radius: 100px;
}
.lp .sticky-nav .links { display: flex; gap: 24px; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.lp .sticky-nav .links a { transition: color .15s; }
.lp .sticky-nav .links a:hover { color: var(--ink); }
/* v2.11.6 (Facu 2026-05-16) — Link "Ir a mi cuenta" (solo auth): texto en
   color accent (terracota), sin background. Hover sube a accent-2.
   Aplica en DT y mobile (en mobile sigue siendo chip/pill con bg+border
   default; solo cambia el color del texto via mayor especificidad). */
.lp .sticky-nav .links a.nav-link-cta { color: var(--accent); }
.lp .sticky-nav .links a.nav-link-cta:hover { color: var(--accent-2); }

/* === CTA buttons === */
.lp .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 100px;
    font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
    white-space: nowrap; transition: transform .15s, background .2s;
    text-decoration: none;
}
.lp .btn-primary { background: var(--accent); color: #fff; }
.lp .btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); }
.lp .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.lp .btn-ghost:hover { background: var(--bg-3); border-color: var(--line-2); }
.lp .btn-lg { padding: 14px 26px; font-size: 14px; }

/* === Phone mockup === */
.lp .phone {
    width: 320px; height: 620px;
    background: #0e0d0c;
    border: 6px solid #1a1816;
    border-radius: 42px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
}
/* v2.10.38 (Facu 2026-05-13) - Defaults DARK alineados con el rediseno mobile
   de la app (PN lime sobre card negro, cards gris oscuro). Los mockups del
   landing usan style inline encima cuando necesitan finetune, pero estos
   defaults aseguran consistencia visual si alguien usa las clases sin
   override. Antes eran light (paper + stone) y mezclaban con los mockups
   dark inline (visualmente roto en caso de override parcial). */
.lp .phone-screen { width: 100%; height: 100%; background: #141311; overflow: hidden; position: relative; }
.lp .phone-notch {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 80px; height: 18px; background: #0e0d0c; border-radius: 0 0 12px 12px; z-index: 10;
}
.lp .phone-statusbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 22px 4px; font-family: var(--mono); font-size: 10px; color: #f4f0e8;
    font-weight: 600;
}
.lp .app-nav {
    background: #141311; height: 44px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.lp .app-brand { display: flex; align-items: center; gap: 7px; color: #f4f0e8; font-size: 13px; font-weight: 500; }
.lp .app-brand svg { width: 14px; height: 14px; }
.lp .app-nav-icons { display: flex; gap: 10px; color: #f4f0e8; font-size: 11px; }
.lp .app-container {
    background: #141311; margin: 0; padding: 9px 10px;
    border-radius: 0; border: 0;
}
.lp .app-h2 {
    font-size: 14px; font-weight: 500; letter-spacing: -0.015em;
    color: #f4f0e8; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.lp .app-card {
    background: #231f1a; border: 1px solid rgba(255,255,255,.06); border-radius: 10px;
    padding: 9px 11px; margin-bottom: 6px;
}
.lp .app-card .lbl {
    font-family: var(--mono); font-size: 8px; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(244,240,232,.55); font-weight: 500;
}
.lp .app-card .val {
    font-family: var(--mono); font-size: 18px; font-weight: 600; color: #f4f0e8;
    letter-spacing: -0.01em; margin-top: 2px;
}
.lp .app-card .val.pos { color: #c4ff3d; }
.lp .app-card .val.neg { color: #c0593c; }
.lp .app-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.lp .app-chart { height: 50px; margin-top: 8px; position: relative; }
.lp .app-chart svg { width: 100%; height: 100%; }

/* === HERO === */
.lp .pb-hero {
    padding: 140px 32px 80px; max-width: 1200px; margin: 0 auto;
    position: relative;
}
.lp .pb-hero-brand {
    display: flex; align-items: center; gap: 12px;
    width: fit-content;
    margin-bottom: 22px;
}
.lp .pb-hero-brand-svg { width: 72px; height: 72px; }
.lp .pb-hero-brand-name {
    font-size: 56px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--ink);
}
.lp .pb-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px; border-radius: 100px;
    background: rgba(192,89,60,.08); border: 1px solid rgba(192,89,60,.25);
    font-family: var(--mono); font-size: 11px; color: var(--accent);
    letter-spacing: .08em; font-weight: 500; margin-bottom: 32px;
}
.lp .pb-hero-eyebrow .pulse {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow);
    animation: lpPulse 2s infinite;
}
@keyframes lpPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192,89,60,.6); }
    50% { box-shadow: 0 0 0 8px rgba(192,89,60,0); }
}
.lp .pb-h1 {
    font-size: clamp(56px, 7.5vw, 100px); line-height: .95;
    letter-spacing: -0.035em; font-weight: 600;
    background: linear-gradient(180deg, #fff 0%, #f4f0e8 60%, #8a857b 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    max-width: 900px;
}
.lp .pb-h1 span { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.lp .pb-h1 .lime { color: var(--lime); -webkit-text-fill-color: var(--lime); }
.lp .pb-lede {
    font-size: 18px; color: var(--ink-3); line-height: 1.6; max-width: 560px; margin-top: 32px;
}
/* v1.91.0 - lede como lista de bullets con punto lime animado.
   Desktop/tablet: bullets pegados (sin gap). Mobile: gap 14px.
   Animacion: pulse del punto lime, escalonado por bullet. */
.lp ul.pb-lede-list {
    list-style: none; padding-left: 0; margin: 32px 0 0;
    display: flex; flex-direction: column; gap: 0;
    max-width: 560px;
}
.lp ul.pb-lede-list li {
    font-size: 18px; color: var(--ink-3); line-height: 1.5;
    padding-left: 22px; position: relative;
}
.lp ul.pb-lede-list li::before {
    content: ""; position: absolute; left: 0; top: 0.65em;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 0 rgba(190, 242, 100, 0.7);
    animation: lede-bullet-pulse 2.4s ease-out infinite;
}
.lp ul.pb-lede-list li:nth-child(1)::before { animation-delay: 0s; }
.lp ul.pb-lede-list li:nth-child(2)::before { animation-delay: 0.4s; }
.lp ul.pb-lede-list li:nth-child(3)::before { animation-delay: 0.8s; }
@keyframes lede-bullet-pulse {
    0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(190, 242, 100, 0.7); }
    50%  { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(190, 242, 100, 0); }
    100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(190, 242, 100, 0); }
}
/* Desktop/tablet (>= 641px): cada bullet en una sola linea (sin wrap),
   fuente mas grande y un poco de gap entre items. */
@media (min-width: 641px) {
    .lp ul.pb-lede-list { max-width: none; gap: 10px; }
    .lp ul.pb-lede-list li { white-space: nowrap; font-size: 22px; }
}
/* Mobile: gap 14px entre bullets + wrap natural (texto multiline). */
@media (max-width: 640px) {
    .lp ul.pb-lede-list { gap: 14px; }
    .lp ul.pb-lede-list li { white-space: normal; }
}
/* Respetar usuarios con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .lp ul.pb-lede-list li::before { animation: none; box-shadow: none; }
}
.lp .pb-cta-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.lp .pb-cta-microcopy {
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    margin-top: 12px; letter-spacing: .04em;
}
/* v2.11.48 — Prueba social numérica en el hero. Bucket dinámico (35+,
   50+, 100+, ...) inyectado por el backend (_users_count_bucket). Box
   subtle con border + icono lime para destacar sin gritar. */
.lp .pb-hero-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-2);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-2);
    letter-spacing: 0.01em;
}
.lp .pb-hero-social strong {
    color: var(--lime);
    font-weight: 700;
    font-size: 15px;
}
.lp .pb-hero-social-icon {
    color: var(--lime);
    font-size: 14px;
}
.lp .pb-trust {
    display: flex; gap: 32px; margin-top: 48px; flex-wrap: wrap;
    padding-top: 32px; border-top: 1px solid var(--line);
}
/* v2.11.48 — Variant para pricing: centrado, sin border-top (en pricing
   ya está dentro de un bloque centrado, no necesita separador). */
.lp .pb-trust.pb-trust-pricing {
    justify-content: center;
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
    gap: 24px;
}
.lp .pb-trust-item {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    letter-spacing: .06em; display: flex; align-items: center; gap: 8px;
}
.lp .pb-trust-item::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
}

/* === BENTO GRID === */
.lp .pb-bento {
    padding: 80px 32px; max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
    grid-auto-rows: minmax(120px, auto);
}
.lp .pb-tile {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 24px; position: relative; overflow: hidden;
}
.lp .pb-tile.dark { background: #08080a; }
.lp .pb-tile.accent {
    background: linear-gradient(135deg, rgba(192,89,60,.12) 0%, transparent 60%), #0f1013;
    border-color: rgba(192,89,60,.3);
}
.lp .pb-tile.lime {
    background: linear-gradient(135deg, rgba(196,255,61,.08) 0%, transparent 60%), #0f1013;
    border-color: rgba(196,255,61,.25);
}
.lp .pb-tile.violet {
    background: linear-gradient(135deg, rgba(165,134,255,.12), transparent 60%), #0f1013;
    border-color: rgba(165,134,255,.25);
}
.lp .pb-tile-eyebrow {
    font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
}
.lp .pb-tile-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; }
.lp .pb-tile h3 {
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--ink); margin-bottom: 10px; line-height: 1.15;
}
.lp .pb-tile p { font-size: 14px; color: var(--ink-3); line-height: 1.6; max-width: 380px; }

.lp .pb-t-hero {
    grid-column: span 6;
    display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: center;
    min-height: 380px;
}
.lp .pb-t-half { grid-column: span 3; }
.lp .pb-t-third { grid-column: span 2; }
.lp .pb-t-twothirds { grid-column: span 4; }
.lp .pb-t-full { grid-column: span 6; }

/* Live data table */
.lp .pb-table { margin-top: 18px; font-family: var(--mono); font-size: 12px; }
.lp .pb-table-row {
    display: grid; grid-template-columns: 60px 1fr 80px 90px; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.lp .pb-table-row:last-child { border-bottom: 0; }
.lp .pb-table-row .date { color: var(--ink-4); font-size: 10px; }
.lp .pb-table-row .name { color: var(--ink-2); font-family: var(--sans); font-size: 13px; font-weight: 500; }
.lp .pb-table-row .cat {
    font-size: 10px; color: var(--ink-3); background: var(--bg-3);
    padding: 2px 7px; border-radius: 4px; text-align: center;
}
.lp .pb-table-row .amt { text-align: right; font-weight: 600; }
.lp .pb-table-row .amt.pos { color: var(--lime); }
.lp .pb-table-row .amt.neg { color: var(--accent); }

/* Big number en hero tile */
.lp .pb-bignum {
    font-family: var(--mono); font-size: 64px; font-weight: 600;
    letter-spacing: -0.02em; color: var(--ink); line-height: 1; margin-top: 16px;
}
.lp .pb-bignum .small { font-size: 24px; color: var(--ink-3); }
.lp .pb-bignum-delta {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 6px; font-family: var(--mono); font-size: 11px;
    font-weight: 600; background: rgba(196,255,61,.12); color: var(--lime);
    margin-left: 12px; vertical-align: middle;
}

/* === NetzIA demo tile (v1.87.0) ===========================================
   Tile del chatbot disponible: copy a la izquierda + mockup animado del chat
   a la derecha con typewriter loop. En mobile las dos cols se apilan. */
.lp .netzia-demo-tile {
    /* v1.91.18 - tile sin min-height (se ajusta al contenido), overflow visible
       para que el chat no quede cortado por el .pb-tile padre. */
    max-width: 1080px;
    margin: 0 auto;
    padding: 36px 32px;
    overflow: visible;
}
/* v2.11.48 — Uniformidad de ancho entre las 4 features (NetzIA + OCR +
   Grupo Familiar + Splitza). NetzIA tiene max-width:1080px (regla de
   arriba). Los otros 3 tiles ahora también, para que se vean alineados
   en DT. */
.lp #ocr .pb-tile,
.lp #grupo-familiar .pb-tile,
.lp #splitza .pb-tile {
    max-width: 1080px;
    margin: 0 auto;
}
.lp .netzia-demo-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 36px;
    align-items: start;  /* v1.91.13 - chat usa su altura completa */
}
.lp .netzia-demo-copy { text-align: left; }

.lp .netzia-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    padding: 4px 10px; border-radius: 100px;
    background: rgba(196, 255, 61, 0.14);
    border: 1px solid rgba(196, 255, 61, 0.4);
    color: var(--lime);
    letter-spacing: 0.08em;
}
.lp .netzia-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 0 rgba(196, 255, 61, 0.5);
    animation: lpStatusPulse 2s infinite;
}
@keyframes lpStatusPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 255, 61, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(196, 255, 61, 0); }
}
.lp .netzia-feat-chip {
    font-family: var(--mono); font-size: 10px;
    padding: 4px 10px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    color: var(--ink-3);
    letter-spacing: 0.04em;
}

/* Mockup del chat */
.lp .netzia-demo-chat {
    background: #0e0d0c;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    height: 450px;  /* v1.91.18 - aumentado para que entre toda conv */
    display: flex;
    flex-direction: column;
}
.lp .netzia-demo-chat-body {
    overflow: hidden;
}
.lp .netzia-demo-chat-header {
    background: #141311;
    color: var(--ink);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--line);
}
.lp .netzia-demo-chat-header i { color: var(--accent); font-size: 14px; }
.lp .netzia-demo-chat-dot {
    margin-left: auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 8px var(--lime);
}
.lp .netzia-demo-chat-body {
    flex: 1;
    padding: 20px 16px 100px;  /* v1.91.14 - padding generoso top/bottom */
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, #0e0d0c 0%, #131210 100%);
}

/* Bubbles del demo: ocultas hasta que se les agrega .visible */
.lp .netzia-demo-msg {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    display: none;  /* v1.91.15 - oculto = sin ocupar espacio */
}
.lp .netzia-demo-msg.visible {
    display: block;
    animation: lpChatBubbleIn 0.25s ease-out;
}
@keyframes lpChatBubbleIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.lp .netzia-demo-msg.thinking.visible {
    display: inline-flex;  /* el thinking es inline-flex por sus dots */
}
.lp .netzia-demo-msg.user {
    background: var(--accent);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    font-weight: 500;
}
.lp .netzia-demo-msg.assistant {
    background: rgba(244, 240, 232, 0.08);
    color: var(--ink);
    align-self: flex-start;
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
    white-space: pre-wrap;  /* respeta \n del typewriter y del innerHTML final */
}
.lp .netzia-demo-msg.assistant strong {
    color: var(--lime);
    font-weight: 600;
}
.lp .netzia-demo-msg.thinking {
    /* v1.91.16 - sin display aqui; el display lo manejan .visible / no .visible */
    background: rgba(244, 240, 232, 0.04);
    color: var(--ink-3);
    align-self: flex-start;
    font-size: 12px;
    font-style: italic;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
}
.lp .netzia-demo-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
}
.lp .netzia-demo-dots span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--ink-3);
    animation: lpDots 1.2s infinite ease-in-out;
}
.lp .netzia-demo-dots span:nth-child(2) { animation-delay: .15s; }
.lp .netzia-demo-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes lpDots {
    0%, 80%, 100% { opacity: .3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

/* Mobile: copy y mockup apilados */
@media (max-width: 900px) {
    .lp .netzia-demo-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .lp .netzia-demo-chat { max-width: 540px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
    .lp .netzia-demo-tile { padding: 28px 18px; }
    .lp .netzia-demo-chat { height: 540px; }
    .lp .netzia-demo-chat-body { height: 300px; }
    .lp .netzia-demo-msg { font-size: 12px; }
}

/* === Próximamente — grid 2 tiles (v1.87.x) === */
.lp .pb-proximamente-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
}
.lp .pb-prox-tile {
    padding: 32px 28px;
}
.lp .pb-prox-tile .pb-tile-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: nowrap;
    min-width: 0;
}
.lp .pb-prox-tile .pb-tile-eyebrow > .netzia-status-pill { flex-shrink: 0; }
.lp .pb-prox-tile .pb-tile-eyebrow > :not(.dot):not(.netzia-status-pill) {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) {
    .lp .pb-proximamente-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .lp .pb-prox-tile { padding: 24px 20px; }
}

/* === Process section === */
.lp .pb-process { padding: 120px 32px; max-width: 1200px; margin: 0 auto; }
.lp .pb-process-h {
    font-size: 48px; letter-spacing: -0.025em; font-weight: 600;
    color: var(--ink); margin-bottom: 60px; max-width: 700px; line-height: 1.1;
}
.lp .pb-process-h em { color: var(--accent); font-style: normal; }
.lp .pb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp .pb-step {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 32px; position: relative;
}
.lp .pb-step-num {
    font-family: var(--mono); font-size: 11px; color: var(--accent);
    letter-spacing: .16em; font-weight: 600;
}
.lp .pb-step-h { font-size: 20px; font-weight: 600; margin-top: 28px; margin-bottom: 10px; letter-spacing: -0.01em; }
.lp .pb-step-p { font-size: 14px; color: var(--ink-3); line-height: 1.6; }

/* === Pricing === */
/* v2.3.1 — max-width 1500px (era 1380) para que las 3 tarjetas sean mas anchas
   y el bullet "15% off pagando por transferencia · $85.000" entre en una linea. */
.lp .pb-pricing { padding: 100px 32px; max-width: 1500px; margin: 0 auto; }
/* v2.3.1 — H2 de pricing: estilos extraidos del inline para poder
   sobreescribir el font-size en mobile. Desktop/tablet usan el clamp original. */
.lp .pb-pricing-title {
    font-size: clamp(36px, 5vw, 48px);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-top: 14px;
    line-height: 1.1;
}
.lp .pb-no-card-badge {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 22px; padding: 10px 22px;
    background: rgba(196, 255, 61, 0.1);
    border: 1.5px solid var(--lime);
    border-radius: 100px;
    font-size: 14px; font-weight: 700; color: var(--lime);
    letter-spacing: -0.005em;
    box-shadow: 0 0 0 0 rgba(196, 255, 61, 0.4);
    animation: lpNoCardPulse 2.4s ease-in-out infinite;
}
.lp .pb-no-card-badge i { font-size: 15px; color: var(--lime); }
@keyframes lpNoCardPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 255, 61, 0.45); }
    50% { box-shadow: 0 0 0 12px rgba(196, 255, 61, 0); }
}
/* Badge MercadoPago seguridad */
.lp .pb-mp-badge {
    display: inline-flex; align-items: center;
    padding: 7px 18px;
    background: rgba(196, 255, 61, 0.07);
    border: 1.5px solid rgba(196, 255, 61, 0.45);
    border-radius: 100px;
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    color: var(--lime); letter-spacing: .07em;
    box-shadow: 0 0 0 0 rgba(196, 255, 61, 0.3);
    animation: lpNoCardPulse 3s ease-in-out infinite;
}
.lp .pb-pricing-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp .pb-pricing-row-3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.lp .pb-card-free .pb-price-amt { color: var(--ink-3); }
.lp .pb-ver-todo {
    width: 100%;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.18);
    color: var(--ink-3);
    padding: 8px;
    border-radius: 6px;
    margin-top: 8px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.lp .pb-ver-todo:hover { border-color: var(--accent); color: var(--accent); }
.lp .pb-price-card {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-xl);
    /* v2.3.1 — padding horizontal 28px (era 40px) para ganar ancho util en las
       cards de pricing y que los bullets largos entren en una linea. */
    padding: 36px 28px;
    /* v2.0.6 — Flex column con ul que crece para empujar ver-todo + btn al
       fondo. Asi las 3 cards tienen "Ver todas..." y el boton final al
       mismo Y, independiente del numero de bullets. */
    display: flex;
    flex-direction: column;
}
.lp .pb-price-card .pb-price-feats {
    flex: 1 1 auto;
}
.lp .pb-price-card.featured {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(192,89,60,.08), transparent 50%), var(--bg-2);
}
.lp .pb-price-name { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.lp .pb-price-amt {
    font-family: var(--mono); font-size: 64px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--ink); margin-top: 16px; line-height: 1;
}
.lp .pb-price-amt .per { font-size: 18px; color: var(--ink-3); font-weight: 400; display: inline-block; margin-left: 4px; vertical-align: baseline; }
.lp .pb-price-feats {
    list-style: none; padding: 0; margin: 32px 0 28px;
    display: flex; flex-direction: column; gap: 10px;
}
.lp .pb-price-feats li {
    font-size: 13px; color: var(--ink-2);
    display: flex; gap: 10px; align-items: center;
}
.lp .pb-price-feats li::before { content: '✓'; color: var(--lime); font-weight: 600; }

/* === Footer big CTA === */
.lp .pb-cta {
    padding: 120px 32px; max-width: 1200px; margin: 0 auto; text-align: center;
    border-top: 1px solid var(--line);
}
.lp .pb-cta-h {
    font-size: clamp(48px, 7vw, 80px); letter-spacing: -0.035em; font-weight: 600; line-height: 1.15;
    background: linear-gradient(180deg, #fff 0%, #f4f0e8 50%, #55514a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 16px;
    /* v1.89.6 — line-height 1.15 + padding vertical para que la cola del "¿"
       (descendiente) no se corte. El gradient + background-clip:text
       clipean el render al bounding box del texto. */
    padding: 0.1em 0.2em 0.15em;
    overflow: visible;
}
.lp .pb-cta-h em { color: var(--accent); -webkit-text-fill-color: var(--accent); font-style: normal; }
.lp .pb-footer {
    padding: 32px; border-top: 1px solid var(--line);
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: .06em;
    text-align: center;
}
.lp .pb-footer .pb-footer-sep { color: var(--ink-4); opacity: .6; }
/* v2.11.48 — Header común para grupos de features. Aparece arriba de
   pares de secciones temáticamente relacionadas (ej. NetzIA + OCR juntas
   bajo "Carga automática"). Reduce el ruido de eyebrows repetidos y
   comunica el concepto-paraguas del par. */
.lp .pb-feature-group-head {
    text-align: center;
    padding: 56px 32px 8px;
    max-width: 720px;
    margin: 0 auto;
}
.lp .pb-feature-group-title {
    font-family: var(--sans);
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    margin: 12px 0 8px;
    letter-spacing: -0.02em;
}
.lp .pb-feature-group-sub {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0;
}
/* v2.11.48 — Sub-versiones DT/mobile del subtítulo de grupo: en DT
   texto descriptivo largo, en mobile versión corta que entra en 1 línea. */
.lp .pb-feat-sub-mobile { display: none; }
@media (max-width: 640px) {
    .lp .pb-feature-group-head {
        padding: 36px 20px 4px;
    }
    .lp .pb-feature-group-sub {
        font-size: 13.5px;
    }
    .lp .pb-feat-sub-dt { display: none; }
    .lp .pb-feat-sub-mobile { display: inline; }
}
/* v2.11.48 — Redes sociales en el sticky nav (pegadas al logo) +
   en el footer. Color subtle por default (--ink-3), terracota al hover. */
.lp .pb-nav-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.lp .pb-nav-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.lp .pb-nav-social-link {
    color: var(--ink-3);
    font-size: 15px;
    transition: color 200ms ease;
    display: inline-flex;
    align-items: center;
}
.lp .pb-nav-social-link:hover {
    color: var(--accent);
}
.lp .pb-footer-social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.lp .pb-footer-social-link {
    color: var(--ink-3);
    font-size: 14px;
    transition: color 200ms ease;
    display: inline-flex;
}
.lp .pb-footer-social-link:hover {
    color: var(--accent);
}

/* === Responsive === */
@media (max-width: 900px) {
    .lp .sticky-nav { margin: 12px; padding: 8px 12px; }
    .lp .sticky-nav .links { gap: 16px; font-size: 12px; }
    .lp .pb-hero { padding: 80px 20px 60px; }
    .lp .pb-hero-brand-svg { width: 64px; height: 64px; }
    .lp .pb-hero-brand-name { font-size: 48px; }
    .lp .pb-bento {
        padding: 40px 20px;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
    }
    .lp .pb-t-hero, .lp .pb-t-twothirds, .lp .pb-t-full {
        grid-column: span 2;
    }
    .lp .pb-t-half, .lp .pb-t-third {
        grid-column: span 1;
    }
    .lp .pb-t-hero { grid-template-columns: 1fr; }
    .lp .pb-t-hero > div:last-child { display: flex; justify-content: center; }
    .lp .pb-process { padding: 80px 20px; }
    .lp .pb-process-h { font-size: 36px; margin-bottom: 40px; }
    .lp .pb-steps { grid-template-columns: 1fr; }
    .lp .pb-pricing { padding: 60px 20px; }
    .lp .pb-pricing-row { grid-template-columns: 1fr; }
    .lp .pb-cta { padding: 80px 20px; }
    .lp .pb-tile h3 { font-size: 20px; }
    .lp .pb-bignum { font-size: 48px; }
    .lp .pb-price-amt { font-size: 48px; }
}
@media (max-width: 600px) {
    /* Sticky nav: brand + Crear cuenta arriba; links como pills debajo */
    .lp .sticky-nav {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 8px 10px 8px 12px;
        border-radius: 22px;
    }
    .lp .sticky-nav .links {
        order: 3;
        flex-basis: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        /* v2.11.35 (Facu 2026-05-19) — Chips de nav 25% mas grandes (font
           9 -> 11, padding 3/6 -> 4/9, gap 3 -> 5) para que sean mas
           tocables y legibles en mobile. v2.3.1 los habia achicado para
           que entre "Ir a mi cuenta" en la linea, pero quedaron muy chicos.
           Si vuelve a haber overflow, considerar wrap a 2 lineas. */
        gap: 5px;
        font-size: 11px;
        padding-top: 6px;
        margin-top: 4px;
        border-top: 1px solid var(--line);
    }
    .lp .sticky-nav .links a {
        padding: 4px 9px;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--line);
        border-radius: 100px;
        color: var(--ink-2);
        font-weight: 500;
        letter-spacing: -0.005em;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .lp .sticky-nav .links a:hover { background: var(--bg-3); color: var(--ink); }
    .lp .pb-bento { grid-template-columns: 1fr; padding: 30px 14px; gap: 12px; }
    .lp .pb-tile { padding: 20px 16px; }
    .lp .pb-hero { padding: 60px 14px 40px; }
    .lp .pb-hero-brand-svg { width: 56px; height: 56px; }
    .lp .pb-hero-brand-name { font-size: 40px; }
    /* v1.89.6 — Eyebrow del hero en 2 lineas en mobile.
       El pulse queda centrado verticalmente respecto a las 2 lineas porque
       align-items:center (heredado del desktop) lo centra contra el wrapper
       .pb-eyebrow-text que es flex-column con las 2 lineas. */
    .lp .pb-hero-eyebrow { padding: 8px 14px; align-items: center; }
    .lp .pb-hero-eyebrow .pb-eyebrow-sep { display: none; }
    .lp .pb-hero-eyebrow .pb-eyebrow-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.35;
    }
    .lp .pb-hero-brand { margin-bottom: 16px; gap: 10px; }
    .lp .pb-process { padding: 60px 14px; }
    .lp .pb-pricing { padding: 50px 14px; }
    .lp .pb-cta { padding: 60px 14px; }
    .lp .pb-footer { padding: 24px 14px; gap: 6px; font-size: 10px; }
    .lp .pb-t-hero, .lp .pb-t-half, .lp .pb-t-third, .lp .pb-t-twothirds, .lp .pb-t-full {
        grid-column: span 1;
    }
    .lp .pb-trust { gap: 12px; flex-direction: column; align-items: flex-start; }
    .lp .pb-trust-item { font-size: 10px; }
    /* Variant pricing en mobile: centrado + espaciado más compacto */
    .lp .pb-trust.pb-trust-pricing { align-items: center; gap: 6px; }
    .lp .pb-hero-social {
        margin-top: 20px;
        padding: 8px 12px;
        font-size: 10.5px;
        gap: 7px;
        white-space: nowrap;
        max-width: 100%;
    }
    .lp .pb-hero-social strong {
        font-size: 12px;
    }
    .lp .pb-hero-social-icon {
        font-size: 12px;
    }
    .lp .pb-step { padding: 24px; }
    .lp .pb-price-card { padding: 28px; }
    /* v2.3.1 — H2 de pricing en mobile: 75% del tamaño original (era 36px
       por clamp en mobile, ahora 27px) — reducir 25% para que el bloque
       respire en pantallas chicas. */
    .lp .pb-pricing-title { font-size: 27px; }
    .lp .btn-lg { padding: 12px 22px; font-size: 13px; }
    .lp .pb-no-card-badge { font-size: 12px; padding: 8px 16px; gap: 7px; }
    .lp .pb-no-card-badge i { font-size: 13px; }

    /* Registros tile: tabla en mobile (Fix #1) — comprimimos columnas y fuentes
       para que el contenido entre en viewports angostos sin overflow horizontal. */
    .lp .pb-tile.dark .pb-table { font-size: 11px; }
    .lp .pb-tile.dark .pb-table-row {
        grid-template-columns: 44px 1fr 70px;
        gap: 8px;
        padding: 7px 0;
    }
    .lp .pb-tile.dark .pb-table-row .date { font-size: 9px; }
    .lp .pb-tile.dark .pb-table-row .name { font-size: 12px; }
    .lp .pb-tile.dark .pb-table-row .cat { display: none; }  /* la categoría se omite en mobile para ganar espacio */
    .lp .pb-tile.dark .pb-table-row .amt { font-size: 11px; }
    .lp .pb-tile.dark h3 { font-size: 18px; }
}

/* v2.0.2 — Alinear el subtitulo de duracion (1-2 lineas) entre las 3 cards
   de pricing dando una altura minima fija que reserva espacio para 2 lineas. */
.lp .pb-price-subtitle {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 6px;
    letter-spacing: .06em;
    min-height: 36px;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
}
/* v2.0.2 — ARS inline con el monto: forzar nowrap en el contenedor .pb-price-amt
   para que el span .per nunca rompa a otra linea. */
.lp .pb-price-amt {
    white-space: nowrap;
}