/* =============================================
   LANDING SaaS — Design System (Figma "Rosterly")
   Fuente: figma.com/design/mmpYEuu5N1Ij1toA2eEHYT (nodo 1:242)
   Claro total · primario azul #2563EB · Poppins + DM Sans
   Aplica a las páginas públicas de la plataforma (.platform-page)
   y a las páginas sueltas con EmptyLayout que usan .lnd-page.
   ============================================= */

:root {
    /* Primario (Foundation/Primary) */
    --lnd-primary:     #2563EB;
    --lnd-primary-600: #1D4ED8;
    --lnd-primary-700: #1E40AF;
    --lnd-primary-400: #3B82F6;
    --lnd-primary-300: #60A5FA;
    --lnd-primary-200: #93C5FD;
    --lnd-primary-100: #DBEAFE;
    --lnd-primary-50:  #EFF6FF;
    --lnd-glow:        #3B82F6;

    /* Grises (Foundation/Grey + Neutral) */
    --lnd-ink:      #151B22;   /* grey-900 — titulares, botón oscuro */
    --lnd-ink-700:  #242E3A;   /* grey-700 — párrafo destacado */
    --lnd-ink-600:  #2E3B4B;   /* grey-600 — descripciones */
    --lnd-text:     #334152;   /* Font Color — cuerpo */
    --lnd-dark:     #0A142F;   /* Dark — copyright / texto fino */
    --lnd-muted:    #6A7480;   /* grey-700 @ 70% sobre blanco */
    --lnd-border:   #ECEEF4;   /* Neutral/N200 */
    --lnd-border-2: #D2D5E2;   /* Neutral/N300 */
    --lnd-border-3: #C0C4C9;   /* grey-100 — borde de píldora */
    --lnd-surface:  #FFFFFF;
    --lnd-soft:     #F6F9FF;   /* fondo de banda suave */
    --lnd-soft-2:   #EFF5FF;   /* fondo del toggle mensual/anual */
    --lnd-tile:     #FAFAFA;   /* fondo de logo de integración */

    /* Estados */
    --lnd-success: #22A06B;
    --lnd-danger:  #D64545;
    --lnd-warning: #E8A23B;

    /* Tipografía */
    --lnd-font:         'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lnd-font-display: 'DM Sans', 'Poppins', sans-serif;
    --lnd-font-label:   'Roboto', 'Poppins', sans-serif;

    /* Radios */
    --lnd-r-sm:   8px;
    --lnd-r-md:   12px;
    --lnd-r-lg:   20px;
    --lnd-r-pill: 999px;

    /* Sombras (Shadow/To bot/Neutral 2, eyebrow y dashboard) */
    --lnd-shadow-card:
        0 0 1px rgba(44,58,114,.05),
        0 6px 8px rgba(44,58,114,.05),
        0 18px 20px rgba(44,58,114,.05),
        0 22px 32px rgba(44,58,114,.05);
    --lnd-shadow-pill:
        0 0 1px rgba(44,58,114,.05),
        0 2px 6px rgba(44,58,114,.05),
        0 10px 18px rgba(58,76,146,.1);
    --lnd-shadow-soft: 0 4px 36px rgba(0,0,0,.04);
    --lnd-shadow-lift: 0 24px 60px rgba(21,27,34,.10);

    /* Layout */
    --lnd-max:    1240px;
    --lnd-gutter: 24px;
}

/* ── Header anclado ──
   app.css pone overflow-x:hidden en body y .platform-page; eso crea un contenedor de scroll
   y rompe position:sticky del header. "clip" evita igual el scroll horizontal sin romperlo. */
body:has(.platform-page),
.platform-page {
    overflow-x: clip;
}

/* Los saltos a anclas (#planes, #faq-saas…) no quedan tapados por el header */
html:has(.platform-page) { scroll-padding-top: 84px; }

/* ── Base de las páginas públicas ── */
.platform-page,
.lnd-page {
    background: var(--lnd-surface);
    color: var(--lnd-text);
    font-family: var(--lnd-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* :where() deja la especificidad en 0 para que .lnd-h2 y las clases de cada sección manden */
:where(.platform-page, .lnd-page) :where(h1, h2, h3, h4) {
    font-family: var(--lnd-font);
    color: var(--lnd-ink);
}

.platform-page ::selection,
.lnd-page ::selection {
    background: var(--lnd-primary-100);
    color: var(--lnd-ink);
}

/* ── Contenedor ── */
.lnd-container {
    max-width: var(--lnd-max);
    margin: 0 auto;
    padding: 0 var(--lnd-gutter);
}

/* ── Eyebrow: "Small eyebrow tag label" ── */
.lnd-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 142px;
    height: 42px;
    padding: 0 24px;
    background: var(--lnd-surface);
    border: 1px solid var(--lnd-border-3);
    border-radius: var(--lnd-r-lg);
    box-shadow: var(--lnd-shadow-pill);
    font-family: var(--lnd-font-label);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--lnd-ink-600);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    margin-bottom: 30px;
}

.lnd-eyebrow-sm {
    min-width: 0;
    height: 34px;
    padding: 0 16px;
    font-size: 14px;
    margin-bottom: 20px;
}

/* ── Encabezado de sección ── */
.lnd-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 50px;
}

.lnd-h2 {
    font-family: var(--lnd-font-display);
    font-size: clamp(1.9rem, 3.4vw, 39px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.01em;
    color: var(--lnd-ink);
    margin: 0 0 8px;
}

.lnd-h2 .lnd-accent,
.lnd-accent {
    color: var(--lnd-primary);
}

.lnd-lead {
    font-size: clamp(1rem, 1.6vw, 20px);
    line-height: 1.6;
    letter-spacing: -.01em;
    color: var(--lnd-ink-700);
    opacity: .7;
    margin: 0 auto;
    max-width: 765px;
}

/* Título de fila de funcionalidad (32px Poppins Bold) */
.lnd-h3 {
    font-size: clamp(1.5rem, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.28;
    color: var(--lnd-ink);
    margin: 0 0 6px;
}

.lnd-desc {
    font-size: clamp(1rem, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--lnd-ink-600);
    opacity: .85;
    margin: 0 0 12px;
}

.lnd-bullets {
    list-style: disc;
    margin: 0;
    padding-left: 27px;
    color: var(--lnd-ink-600);
    font-size: clamp(1rem, 1.4vw, 18px);
    line-height: 1.6;
}

.lnd-bullets li::marker { color: var(--lnd-primary); }

/* ── Botones ── */
.lnd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 59px;
    padding: 0 21px;
    border-radius: var(--lnd-r-sm);
    font-family: var(--lnd-font);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.lnd-btn:hover { transform: translateY(-1px); }

.lnd-btn-primary {
    background: var(--lnd-primary);
    color: #fff;
}

.lnd-btn-primary:hover {
    background: var(--lnd-primary-600);
    color: #fff;
    box-shadow: 0 10px 24px rgba(37, 99, 235,.28);
}

.lnd-btn-outline {
    background: var(--lnd-surface);
    color: var(--lnd-primary);
    border-color: var(--lnd-primary);
}

.lnd-btn-outline:hover {
    background: var(--lnd-primary-50);
    color: var(--lnd-primary-600);
}

.lnd-btn-dark {
    background: var(--lnd-ink);
    color: #F7FAFF;
}

.lnd-btn-dark:hover {
    background: #000;
    color: #fff;
}

.lnd-btn-ghost {
    background: transparent;
    color: var(--lnd-ink);
}

.lnd-btn-ghost:hover {
    color: var(--lnd-primary);
    transform: none;
}

/* Secundario suave: fondo azul muy claro + texto azul (no compite con el primario) */
.lnd-btn-soft {
    background: var(--lnd-primary-50);
    color: var(--lnd-primary-700);
}

.lnd-btn-soft:hover {
    background: var(--lnd-primary-100);
    color: var(--lnd-primary-700);
}

/* Sobre paneles que ya son azul claro (CTA finales, "Cómo funciona") el botón suave va en blanco */
:is(.cta-panel, .feat-cta-inner, .pricing-cta-inner, .hiw-section) .lnd-btn-soft {
    background: var(--lnd-surface);
    box-shadow: inset 0 0 0 1px var(--lnd-primary-100);
}

:is(.cta-panel, .feat-cta-inner, .pricing-cta-inner, .hiw-section) .lnd-btn-soft:hover {
    background: var(--lnd-primary-50);
}

.lnd-btn-play {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lnd-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding-left: 2px;
    line-height: 1;
    flex-shrink: 0;
}

.lnd-btn-line {
    background: transparent;
    color: var(--lnd-ink);
    border: 1px solid var(--lnd-ink);
}

.lnd-btn-line:hover {
    border-color: var(--lnd-primary);
    color: var(--lnd-primary);
    transform: none;
}

.lnd-btn-md {
    height: 46px;
    padding: 0 28px;
    font-size: 14px;
    letter-spacing: -.03em;
}

.lnd-btn-block { width: 100%; }

.lnd-btn-arrow {
    font-size: 1.05em;
    line-height: 1;
    transition: transform .18s ease;
}

.lnd-btn:hover .lnd-btn-arrow { transform: translateX(3px); }

/* ── Tarjeta ── */
.lnd-card {
    background: var(--lnd-surface);
    border: 1px solid var(--lnd-border);
    border-radius: var(--lnd-r-md);
    box-shadow: var(--lnd-shadow-card);
}

/* Icono cuadrado azul claro (tarjetas KPI del dashboard) */
.lnd-icon-tile {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--lnd-primary-50);
    color: var(--lnd-primary-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Check azul */
.lnd-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lnd-primary-50);
    color: var(--lnd-primary-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Marcos de dispositivo para screenshots ── */
/* Laptop (sustituye a los mockups iPad/HP del Figma, que contienen la UI de Rosterly) */
.lnd-device {
    position: relative;
    width: 100%;
}

.lnd-device-screen {
    position: relative;
    background: #1B1F24;
    border-radius: 18px 18px 0 0;
    padding: 12px 12px 0;
    box-shadow: var(--lnd-shadow-lift);
}

/* La captura se muestra completa, con su proporción natural (nunca se recorta) */
.lnd-device-screen img,
.lnd-device-screen video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
    background: var(--lnd-soft);
}

.lnd-device-base {
    height: 14px;
    margin: 0 -4%;
    background: linear-gradient(180deg, #E6E8EB 0%, #C9CDD2 100%);
    border-radius: 0 0 14px 14px;
    position: relative;
}

.lnd-device-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18%;
    height: 5px;
    background: #B8BDC3;
    border-radius: 0 0 6px 6px;
}

/* Tablet (iPad) */
.lnd-tablet {
    background: #E9E4DA;
    border-radius: 28px;
    padding: 14px;
    box-shadow: var(--lnd-shadow-lift), inset 0 0 0 1px rgba(0,0,0,.06);
}

.lnd-tablet img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    background: #fff;
}

/* Ventana de navegador clara */
.lnd-browser {
    background: var(--lnd-surface);
    border: 1px solid var(--lnd-border);
    border-radius: var(--lnd-r-lg);
    overflow: hidden;
    box-shadow: var(--lnd-shadow-soft), var(--lnd-shadow-card);
}

.lnd-browser-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #F7F8FA;
    border-bottom: 1px solid var(--lnd-border);
}

.lnd-browser-dots { display: flex; gap: 6px; flex-shrink: 0; }
.lnd-browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--lnd-border-2); }

.lnd-browser-url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--lnd-surface);
    border: 1px solid var(--lnd-border);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: .74rem;
    color: var(--lnd-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Tarjeta flotante de métrica ("Img lib/Metric") */
.lnd-float {
    position: absolute;
    background: var(--lnd-surface);
    border: 1px solid var(--lnd-border);
    border-radius: var(--lnd-r-md);
    box-shadow: var(--lnd-shadow-card);
    padding: 14px 16px;
    z-index: 2;
}

/* ── Fondos difuminados ("Bg Blur") ── */
.lnd-blur {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background: url('/images/landing/bg-blur.svg') center / contain no-repeat;
    opacity: .55;
}

.lnd-glow {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background: url('/images/landing/hero-glow.svg') center / contain no-repeat;
    opacity: .5;
}

/* Banda inferior con degradado azul (fondo de Features/Pricing) */
.lnd-band-fade {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #EAF2FF 100%);
}

/* ── Secciones ── */
.lnd-section {
    position: relative;
    padding: 96px var(--lnd-gutter);
    overflow: hidden;
}

.lnd-section > * { position: relative; z-index: 1; }

.lnd-section-soft { background: var(--lnd-soft); }

@media (max-width: 768px) {
    .lnd-section { padding: 64px 16px; }
    .lnd-head { margin-bottom: 36px; }
    .lnd-eyebrow { height: 38px; min-width: 0; font-size: 15px; margin-bottom: 22px; }
    .lnd-btn { height: 52px; font-size: 16px; }
    .lnd-container { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .lnd-btn, .lnd-btn-arrow { transition: none; }
    .lnd-btn:hover, .lnd-btn:hover .lnd-btn-arrow { transform: none; }
}

/* =============================================
   PÁGINAS LEGALES Y DE AYUDA — solo plataforma
   (/privacy-policy, /terms-of-service, /cookie-policy, /sms-terms,
    /sms-consent, /accessibility, /about, /support).
   Los tenants usan las mismas páginas con su propio layout: por eso
   todo va bajo .platform-page y app.css sigue siendo su estilo.
   ============================================= */
.platform-page .legal-hero {
    position: relative;
    padding: 72px 24px 64px;
    text-align: center;
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F7FF 100%);
    border-bottom: 1px solid var(--lnd-border);
    overflow: hidden;
}

.platform-page .legal-hero::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    left: 50%;
    top: -520px;
    transform: translateX(-50%);
    background: url('/images/landing/hero-glow.svg') center / contain no-repeat;
    opacity: .35;
    pointer-events: none;
}

.platform-page .legal-hero-inner {
    position: relative;
    max-width: 765px;
    margin: 0 auto;
}

.platform-page .legal-hero-title {
    font-family: var(--lnd-font);
    font-size: clamp(2rem, 4.2vw, 48px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.2;
    color: var(--lnd-ink);
    margin: 0 0 10px;
}

.platform-page .legal-hero-sub {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--lnd-border-3);
    border-radius: var(--lnd-r-lg);
    background: var(--lnd-surface);
    box-shadow: var(--lnd-shadow-pill);
    font-family: var(--lnd-font-label);
    font-size: 14px;
    font-weight: 500;
    color: var(--lnd-ink-600);
}

.platform-page .legal-hero-desc {
    font-size: clamp(1rem, 1.6vw, 19px);
    color: var(--lnd-ink-700);
    opacity: .75;
    max-width: 680px;
    margin: 16px auto 0;
    line-height: 1.6;
}

.platform-page .legal-body {
    padding: 64px 24px 96px;
    background: var(--lnd-soft);
}

.platform-page .legal-container {
    max-width: 1140px;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
}

.platform-page .legal-container > * { min-width: 0; }

/* Páginas sin índice (accessibility, about, support, sms-terms…): el contenido ocupa todo el ancho, centrado */
.platform-page .legal-container > .legal-content:only-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.platform-page .legal-toc {
    background: var(--lnd-surface);
    border: 1px solid var(--lnd-border);
    border-radius: var(--lnd-r-md);
    box-shadow: var(--lnd-shadow-card);
    padding: 24px;
    top: 104px;
    font-size: 14px;
}

.platform-page .legal-toc strong {
    color: var(--lnd-ink);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.platform-page .legal-toc a { color: var(--lnd-ink-600); }
.platform-page .legal-toc a:hover { color: var(--lnd-primary-600); text-decoration: none; }

.platform-page .legal-toc a.active {
    color: var(--lnd-primary-700);
    font-weight: 600;
    background: var(--lnd-primary-50);
}

.platform-page .legal-toc ol li::marker { color: var(--lnd-primary); }

.platform-page .legal-content {
    background: var(--lnd-surface);
    border: 1px solid var(--lnd-border);
    border-radius: var(--lnd-r-md);
    box-shadow: var(--lnd-shadow-card);
    padding: 48px;
    color: var(--lnd-text);
}

.platform-page .legal-content h2 {
    font-family: var(--lnd-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--lnd-ink);
    scroll-margin-top: 104px;
}

.platform-page .legal-content h3 {
    font-family: var(--lnd-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--lnd-ink);
}

.platform-page .legal-content p,
.platform-page .legal-content ul,
.platform-page .legal-content ol {
    font-size: 15px;
    color: var(--lnd-ink-600);
    line-height: 1.8;
}

.platform-page .legal-content li::marker { color: var(--lnd-primary); }
.platform-page .legal-content strong { color: var(--lnd-ink); }

.platform-page .legal-content a { color: var(--lnd-primary-600); font-weight: 500; }

.platform-page .legal-notice {
    background: var(--lnd-primary-50);
    border-left: 3px solid var(--lnd-primary);
    color: var(--lnd-primary-700);
    box-shadow: none;
    font-size: 14px;
}

.platform-page .legal-review {
    background: #FFF8EC;
    border-left-color: var(--lnd-warning);
    font-size: 14px;
}

.platform-page .legal-table-wrap {
    border: 1px solid var(--lnd-border);
    border-radius: var(--lnd-r-md);
    box-shadow: none;
}

.platform-page .legal-table { font-size: 14px; }

.platform-page .legal-table th {
    background: var(--lnd-primary);
    font-weight: 500;
}

.platform-page .legal-table td {
    color: var(--lnd-text);
    border-bottom-color: var(--lnd-border);
}

.platform-page .legal-table tr:nth-child(even) td { background: #F7FAFF; }

.platform-page .agency-identity {
    background: var(--lnd-primary-50) !important;
    border-left-color: var(--lnd-primary) !important;
    border-radius: var(--lnd-r-sm) !important;
}

@media (max-width: 768px) {
    .platform-page .legal-hero { padding: 48px 16px 40px; }
    .platform-page .legal-body { padding: 32px 16px 64px; }
    .platform-page .legal-container { grid-template-columns: 1fr; gap: 20px; }
    .platform-page .legal-toc { position: static; }
    .platform-page .legal-content { padding: 28px 20px; }
}

/* =============================================
   PÁGINAS DE CUENTA (EmptyLayout): /signup, /forgot-password, /reset-password
   ============================================= */
.auth-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    background: linear-gradient(180deg, #FFFFFF 0%, #EAF2FF 100%);
    font-family: var(--lnd-font);
    overflow: hidden;
}

.auth-page::before {
    content: '';
    position: absolute;
    width: 1000px;
    height: 1000px;
    left: 50%;
    top: -600px;
    transform: translateX(-50%);
    background: url('/images/landing/hero-glow.svg') center / contain no-repeat;
    opacity: .35;
    pointer-events: none;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: var(--lnd-surface);
    border: 1px solid var(--lnd-border);
    border-radius: var(--lnd-r-lg);
    padding: 40px 36px;
    box-shadow: var(--lnd-shadow-card);
}

.auth-card-wide { max-width: 540px; }

.auth-header {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo {
    display: inline-flex;
    text-decoration: none;
    margin-bottom: 12px;
}

.auth-logo img { height: 44px; width: auto; display: block; }

.auth-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--lnd-ink);
    letter-spacing: -.02em;
    margin: 0 0 4px;
}

.auth-subtitle {
    font-size: 15px;
    color: var(--lnd-muted);
    margin: 0;
}

.auth-instructions {
    font-size: 15px;
    color: var(--lnd-ink-600);
    line-height: 1.6;
    margin: 0 0 24px;
    text-align: center;
}

.auth-success-box,
.auth-error-box {
    text-align: center;
    padding: 16px 0;
}

.auth-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--lnd-primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.auth-success-box p,
.auth-error-box p {
    font-size: 15px;
    color: var(--lnd-ink-600);
    line-height: 1.65;
    margin: 0 0 20px;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--lnd-muted);
}

.auth-back-link,
.auth-footer a {
    font-size: 14px;
    color: var(--lnd-primary-600);
    text-decoration: none;
    font-weight: 500;
}

.auth-back-link:hover,
.auth-footer a:hover { text-decoration: underline; }

.auth-page .mud-button-filled.mud-button-filled-primary {
    height: 52px;
    box-shadow: none;
}

.auth-page .mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 10px 24px rgba(37, 99, 235,.28);
}

@media (max-width: 480px) {
    .auth-card { padding: 28px 20px; }
}

/* =============================================
   MOVIMIENTO (wwwroot/js/landing-motion.js)
   Solo actúa con html.lnd-motion, que App.razor añade cuando el usuario no pidió
   "reducir movimiento". Las animaciones usan fill-mode "backwards": al terminar no
   retienen el transform, así que los :hover de cada tarjeta siguen funcionando.
   ============================================= */
@keyframes lndEnter {
    from { opacity: 0; transform: translateY(var(--lnd-y, 60px)); }
    to   { opacity: 1; transform: none; }
}

@keyframes lndBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ── 1. Entrada escalonada de los heros ── */
html.lnd-motion .platform-page :is(.hero-inner, .feat-hero-inner, .pricing-hero-inner, .contact-hero-inner, .legal-hero-inner) > *,
html.lnd-motion .platform-page .hero-a-visual {
    --lnd-y: 50px;
}

html.lnd-motion:not(.lnd-hero-in) .platform-page :is(.hero-inner, .feat-hero-inner, .pricing-hero-inner, .contact-hero-inner, .legal-hero-inner) > *,
html.lnd-motion:not(.lnd-hero-in) .platform-page .hero-a-visual {
    opacity: 0;
}

html.lnd-motion.lnd-hero-in .platform-page :is(.hero-inner, .feat-hero-inner, .pricing-hero-inner, .contact-hero-inner, .legal-hero-inner) > *,
html.lnd-motion.lnd-hero-in .platform-page .hero-a-visual {
    animation: lndEnter .9s cubic-bezier(.22, 1, .36, 1) backwards;
    /* --lnd-hero-t: tiempo ya transcurrido cuando Blazor sustituyó el prerender (landing-motion.js) */
    animation-delay: calc(var(--lnd-d, 0s) - var(--lnd-hero-t, 0s));
}

/* Desplazamientos y retardos medidos en Alytics: etiqueta 40 · título 60 · texto 80 · CTA 50 */
.platform-page :is(.hero-inner, .feat-hero-inner, .pricing-hero-inner, .contact-hero-inner, .legal-hero-inner) > :nth-child(1) { --lnd-y: 40px; --lnd-d: 0s; }
.platform-page :is(.hero-inner, .feat-hero-inner, .pricing-hero-inner, .contact-hero-inner, .legal-hero-inner) > :nth-child(2) { --lnd-y: 60px; --lnd-d: .1s; }
.platform-page :is(.hero-inner, .feat-hero-inner, .pricing-hero-inner, .contact-hero-inner, .legal-hero-inner) > :nth-child(3) { --lnd-y: 80px; --lnd-d: .2s; }
.platform-page :is(.hero-inner, .feat-hero-inner, .pricing-hero-inner, .contact-hero-inner, .legal-hero-inner) > :nth-child(4) { --lnd-y: 50px; --lnd-d: .3s; }
.platform-page :is(.hero-inner, .feat-hero-inner, .pricing-hero-inner, .contact-hero-inner, .legal-hero-inner) > :nth-child(5) { --lnd-y: 40px; --lnd-d: .4s; }
.platform-page :is(.hero-inner, .feat-hero-inner, .pricing-hero-inner, .contact-hero-inner, .legal-hero-inner) > :nth-child(n+6) { --lnd-y: 40px; --lnd-d: .5s; }
.platform-page .hero-a-visual { --lnd-y: 60px; --lnd-d: .3s; }

/* ── 3. Revelado al hacer scroll (la lista de selectores está en landing-motion.js) ── */
html.lnd-motion .platform-page :is(
    .lnd-head, .kf-head, .problema-header, .antes-header, .ejemplo-header, .hiw-head, .pp-head,
    .pricing-section-head, .trust-bar-title, .problema-card, .porque-quote, .porque-statement,
    .porque-pillar, .antes-col, .benefit-card, .kf-row, .fr, .lt-copy, .lt-visual, .ejemplo-browser,
    .ejemplo-details, .hiw-step, .hiw-cta, .pp-card, .pp-note, .faq-saas-list, .faq-saas-cta, .cta-panel,
    .feat-module-inner, .feat-cta-inner, .pricing-card, .pricing-table-wrap, .pricing-faq-item,
    .pricing-cta-inner, .contact-form-wrap, .contact-info > *, .legal-toc, .legal-content
):not(.is-visible) {
    opacity: 0;
}

html.lnd-motion .platform-page .is-visible {
    animation: lndEnter .85s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: calc(var(--lnd-rd, 0s) - var(--lnd-rt, 0s));
}

/* ── 4. Barras que crecen al revelarse + gráfico circular que gira ── */
html.lnd-motion .platform-page :is(.kfc-seg, .frf-bars span, .fdm-bar) {
    transform-origin: bottom;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(.35s + var(--i, 0) * 55ms);
}

html.lnd-motion .platform-page :is(.kf-row, .fr):not(.is-visible) :is(.kfc-seg, .frf-bars span, .fdm-bar) {
    transform: scaleY(0);
}

html.lnd-motion .platform-page .kfp-pie {
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .35s, opacity .6s ease .35s;
}

html.lnd-motion .platform-page .kf-row:not(.is-visible) .kfp-pie {
    transform: rotate(-120deg) scale(.6);
    opacity: 0;
}

/* Tarjetas flotantes: balanceo suave y continuo */
html.lnd-motion .platform-page :is(.kf-card, .fr-float, .frc-phone) {
    animation: lndBob 6s ease-in-out infinite;
}

html.lnd-motion .platform-page :is(.kf-card-pie, .frc-phone) { animation-delay: -2s; }
html.lnd-motion .platform-page .kf-card-candle { animation-delay: -4s; }

/* =============================================
   ICONOS (Components/Shared/LndIcon.razor — Lucide, trazo 1.75)
   Línea azul oscura sobre recuadros azul claro, igual que el Figma.
   ============================================= */
.lnd-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

.lnd-icon-tile,
.problema-card-icon,
.lt-pill-icon,
.ejemplo-agency-icon,
.feat-icon-big {
    color: var(--lnd-primary-700);
}

.contact-success-icon { color: var(--lnd-primary-600); }

/* Etiquetas de las filas de funcionalidad: icono + texto alineados */
.fr-feat-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fr-feat-ico { color: var(--lnd-primary-600); }

/* Marcas ✓ / ✗ de listas y precios */
.pp-ok, .pp-no, .pricing-feat-check, .lt-ck, .ejemplo-check, .antes-mark, .label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pp-ok, .pp-no { width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; }
.pp-ok { background: var(--lnd-primary-50); }
.pp-no { background: #EEF0F3; }

/* "Más popular": estrella ámbar */
.pp-badge, .pricing-popular-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.pp-badge .lnd-icon, .pricing-popular-badge .lnd-icon, .pt-star { color: #F5B83D; }
.pt-star { vertical-align: -1px; }

/* Comparativa de precios */
.pt-yes { vertical-align: middle; }
.pt-no { color: #B4BAC2; display: inline-flex; vertical-align: middle; }

.ejemplo-lock { color: var(--lnd-muted); display: inline-flex; }
.lnd-btn-play .lnd-icon { margin-left: 1px; }

/* =============================================
   TARJETA CON TRAMA DE PUNTOS + ICONO ORBE (estilo aston.framer.website)
   Úsese sobre un fondo gris-azulado claro (--lnd-dot-bg) para que se vea el anillo blanco.
   ============================================= */
:root { --lnd-dot-bg: #F5F7FB; }

.lnd-dot-card {
    position: relative;
    overflow: hidden;
    padding: 40px 30px 36px;
    border-radius: 20px;
    border: 1px solid #E3E8F2;
    background: linear-gradient(180deg, #EAF2FF 0%, #F7FAFF 55%, #FFFFFF 100%);
    box-shadow: 0 0 0 4px #FFFFFF, 0 10px 30px rgba(37, 99, 235, .05);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Trama de puntos que se desvanece hacia abajo */
.lnd-dot-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(37, 99, 235, .16) 1px, transparent 1.4px);
    background-size: 9px 9px;
    background-position: 4px 4px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
    pointer-events: none;
}

.lnd-dot-card > * { position: relative; }

.lnd-dot-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 4px #FFFFFF, 0 18px 40px rgba(37, 99, 235, .12);
}

/* Orbe: círculo azul con brillo interior, reflejo celeste abajo y contenido blanco */
.lnd-orb {
    width: 66px;
    height: 66px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-family: var(--lnd-font);
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background:
        radial-gradient(ellipse 70% 38% at 50% 105%, rgba(125, 211, 252, .75) 0%, transparent 70%),
        linear-gradient(135deg, #4F8DF8 0%, var(--lnd-primary) 45%, var(--lnd-primary-600) 100%);
    box-shadow:
        inset 2px 2px 2px rgba(147, 197, 253, .9),
        inset -1px -2px 3px rgba(30, 64, 175, .35),
        0 8px 16px rgba(37, 99, 235, .22);
}

/* Variante apagada (p. ej. "Antes de AngelisOne"): gris en vez de azul */
.lnd-dot-card--muted {
    background: linear-gradient(180deg, #F1F3F7 0%, #F8F9FB 55%, #FFFFFF 100%);
}

.lnd-dot-card--muted::before {
    background-image: radial-gradient(rgba(100, 116, 139, .16) 1px, transparent 1.4px);
}

.lnd-orb--muted {
    color: #fff;
    background:
        radial-gradient(ellipse 70% 38% at 50% 105%, rgba(226, 232, 240, .7) 0%, transparent 70%),
        linear-gradient(135deg, #B6BECB 0%, #94A0B2 50%, #7C889B 100%);
    box-shadow:
        inset 2px 2px 2px rgba(226, 232, 240, .9),
        inset -1px -2px 3px rgba(71, 85, 105, .3),
        0 8px 16px rgba(100, 116, 139, .18);
}

/* Utilidades sueltas del estilo Aston: solo el borde (.lnd-ring) o solo la trama de puntos (.lnd-dots) */
.lnd-ring {
    border: 1px solid #E3E8F2;
    border-radius: 20px;
    box-shadow: 0 0 0 4px #FFFFFF, 0 10px 30px rgba(37, 99, 235, .05);
}

.lnd-dots { position: relative; overflow: hidden; }

.lnd-dots::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(37, 99, 235, .16) 1px, transparent 1.4px);
    background-size: 9px 9px;
    background-position: 4px 4px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 90%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 90%);
    pointer-events: none;
}

.lnd-dots > * { position: relative; }