/* /Components/CookieConsent.razor.rz.scp.css */
.zit-cookie[b-qqo593sqpq] {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(880px, calc(100% - 24px));
    z-index: 2000;
    background: var(--zit-white, #FFFFFF);
    border: 1px solid var(--zit-border, #E5E7EB);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(30, 27, 75, .18);
    animation: zit-cookie-in-b-qqo593sqpq .25s ease-out;
}

.zit-cookie-inner[b-qqo593sqpq] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
}

.zit-cookie-text[b-qqo593sqpq] {
    flex: 1;
    font-size: .82rem;
    line-height: 1.45;
    /* Gris de párrafo por color-mix sobre la tinta: hereda contraste en modo oscuro. */
    color: color-mix(in srgb, var(--zit-navy, #1E1B4B) 84%, var(--zit-white, #FFFFFF));
}

.zit-cookie-text a[b-qqo593sqpq] {
    color: var(--zit-primary, #4F46E5);
    font-weight: 600;
    text-decoration: none;
}

.zit-cookie-text a:hover[b-qqo593sqpq] {
    text-decoration: underline;
}

.zit-cookie-btn[b-qqo593sqpq] {
    flex: 0 0 auto;
    border: none;
    cursor: pointer;
    background: var(--zit-primary, #4F46E5);
    color: #fff; /* tinta fija: el primario es saturado en ambos temas (convención de Landing) */
    font-weight: 600;
    font-size: .85rem;
    padding: 9px 20px;
    border-radius: 9px;
    transition: filter .12s ease;
}

.zit-cookie-btn:hover[b-qqo593sqpq] {
    filter: brightness(1.08);
}

@keyframes zit-cookie-in-b-qqo593sqpq {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 599px) {
    .zit-cookie-inner[b-qqo593sqpq] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .zit-cookie-btn[b-qqo593sqpq] {
        width: 100%;
        padding: 11px 20px;
    }
}

/* El panel del negocio muestra una barra inferior en el teléfono, y este aviso la tapaba: se
   comprobó en el navegador que el botón «Entendido» quedaba justo encima de los destinos.
   La regla vive AQUÍ y no en el layout porque este CSS está aislado — una regla global sobre
   .zit-cookie pierde en especificidad contra el atributo de ámbito que el compilador agrega.
   El :has() la limita a las pantallas que de verdad tienen barra: el micrositio público y el
   portal del cliente no la tienen y no deben moverse. */
@media (max-width: 959.98px) {
    body:has(.zit-tabbar) .zit-cookie[b-qqo593sqpq] {
        bottom: calc(16px + 56px + env(safe-area-inset-bottom, 0px));
    }
}
/* /Components/Help/HelpContentView.razor.rz.scp.css */
.help-topic[b-fslrto4onm] {
    font-size: .9rem;
    line-height: 1.45;
    color: #374151;
}

.help-block[b-fslrto4onm] {
    margin: 10px 0;
}

.help-block-h[b-fslrto4onm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--zit-navy, #1E1B4B);
    margin-bottom: 4px;
}

.help-block-h[b-fslrto4onm]  .mud-icon-root {
    color: var(--zit-primary, #4F46E5);
}

.help-seen[b-fslrto4onm] {
    margin: 0;
    padding-left: 18px;
}

.help-seen li[b-fslrto4onm] {
    margin: 3px 0;
}

.help-steps[b-fslrto4onm] {
    margin: 0;
    padding-left: 6px;
    list-style: none;
    counter-reset: paso;
}

.help-steps li[b-fslrto4onm] {
    position: relative;
    padding-left: 30px;
    margin: 7px 0;
    counter-increment: paso;
}

.help-steps li[b-fslrto4onm]::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--zit-primary-soft, #EEF2FF);
    color: var(--zit-primary, #4F46E5);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-alert-title[b-fslrto4onm] {
    font-weight: 600;
    margin-bottom: 4px;
}
/* /Components/Help/HelpPanel.razor.rz.scp.css */
.help-panel[b-gjfyfadcdk] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.help-head[b-gjfyfadcdk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--zit-border, #E5E7EB);
}

.help-search[b-gjfyfadcdk] {
    padding: 10px 12px 4px;
}

.help-scroll[b-gjfyfadcdk] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 12px 12px;
}

.help-foot[b-gjfyfadcdk] {
    border-top: 1px solid var(--zit-border, #E5E7EB);
    padding: 12px;
    background: var(--zit-white, #fff);
}

.help-section-label[b-gjfyfadcdk] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zit-muted);   /* contraste AA y sigue al tema (antes gris fijo 2,34:1) */
    margin: 14px 2px 6px;
}

.help-group-cap[b-gjfyfadcdk] {
    font-weight: 600;
    color: var(--zit-navy, #1E1B4B);
    margin: 10px 2px 2px;
}
/* /Components/Landing.razor.rz.scp.css */
/* ============================================================
   Landing pública de Zitoria (raíz, sin sesión). CSS scoped:
   solo tokens var(--zit-*), mobile-first, cero librerías externas.
   MODO OSCURO: los fondos de sección y tarjeta van SIEMPRE por tokens
   (se invierten con .zit-dark) y los grises de texto por color-mix
   sobre var(--zit-navy)/var(--zit-white) — así el claro queda idéntico
   y el oscuro hereda contraste. Los elementos con fondo ÁMBAR fijo
   (botones, badges) llevan tinta FIJA #1E1B4B: var(--zit-navy) se
   vuelve casi blanca en oscuro y quedaba ilegible sobre ámbar.
   ============================================================ */
.lp[b-r2v8qu4vqn] { font-family: Poppins, 'Segoe UI', sans-serif; color: var(--zit-navy); overflow-x: hidden; }
.lp *[b-r2v8qu4vqn] { box-sizing: border-box; }
.lp-wrap[b-r2v8qu4vqn] { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.lp-h1[b-r2v8qu4vqn] { font-weight: 700; font-size: clamp(2.1rem, 6.5vw, 3.4rem); line-height: 1.1; margin: 0 0 14px; }
.lp-h2[b-r2v8qu4vqn] { font-weight: 700; font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.2; margin: 0 0 10px; }
.lp-lead[b-r2v8qu4vqn] { font-size: clamp(1rem, 2.4vw, 1.12rem); color: color-mix(in srgb, var(--zit-navy) 76%, var(--zit-white)); margin: 0 0 18px; line-height: 1.55; }
.lp-center[b-r2v8qu4vqn] { text-align: center; }
.lp-on-dark[b-r2v8qu4vqn] { color: #fff; }
.lp-on-dark.lp-lead[b-r2v8qu4vqn] { color: rgba(255,255,255,.85); }
.lp-btn[b-r2v8qu4vqn] { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; padding: 13px 22px; border-radius: var(--zit-radius); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.lp-btn:hover[b-r2v8qu4vqn] { transform: translateY(-2px); }
.lp-btn--amber[b-r2v8qu4vqn] { background: var(--zit-amber); color: #1E1B4B; box-shadow: 0 8px 20px -6px rgba(245,158,11,.5); }
.lp-btn--amber:hover[b-r2v8qu4vqn] { box-shadow: 0 12px 26px -6px rgba(245,158,11,.6); }
.lp-btn--primary[b-r2v8qu4vqn] { background: var(--zit-primary); color: #fff; box-shadow: 0 8px 20px -6px rgba(79,70,229,.5); }
.lp-btn--primary:hover[b-r2v8qu4vqn] { background: var(--zit-primary-hover); }
.lp-btn--outline[b-r2v8qu4vqn] { background: transparent; color: var(--zit-primary); border: 2px solid var(--zit-primary); }
.lp-btn--ghost[b-r2v8qu4vqn] { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.lp-btn--ghost:hover[b-r2v8qu4vqn] { background: rgba(255,255,255,.16); }

/* HERO */
.lp-hero[b-r2v8qu4vqn] { position: relative; color: #fff; padding-bottom: 44px; overflow: hidden; background: linear-gradient(135deg, #1E1B4B 0%, #312E81 60%, #4F46E5 130%); }
.lp-hero-bg[b-r2v8qu4vqn] { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px; }
.lp-halo[b-r2v8qu4vqn] { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.lp-halo--indigo[b-r2v8qu4vqn] { width: 380px; height: 380px; right: -60px; top: -80px; background: radial-gradient(circle, #4F46E5, transparent 70%); }
.lp-halo--amber[b-r2v8qu4vqn] { width: 300px; height: 300px; left: -60px; bottom: -60px; opacity: .35; background: radial-gradient(circle, #F59E0B, transparent 70%); }
.lp-nav[b-r2v8qu4vqn] { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; max-width: 1120px; margin: 0 auto; }
.lp-brand[b-r2v8qu4vqn] { display: flex; align-items: center; text-decoration: none; }
.lp-nav-links[b-r2v8qu4vqn] { display: flex; align-items: center; gap: 18px; }
/* Toggle claro/oscuro para el visitante (el hero es oscuro fijo: ícono blanco). */
.lp-nav-theme[b-r2v8qu4vqn] { display: inline-flex; color: #fff; }
.lp-nav-links a[b-r2v8qu4vqn] { color: rgba(255,255,255,.85); text-decoration: none; font-size: .95rem; }
.lp-nav-links a:hover[b-r2v8qu4vqn] { color: #fff; }
.lp-nav-cta[b-r2v8qu4vqn] { border: 1.5px solid rgba(255,255,255,.5); padding: 7px 16px; border-radius: var(--zit-radius); }
/* Menú móvil (checkbox CSS-only): oculto en escritorio; bajo 768px el checkbox se vuelve
   enfocable (visualmente invisible) y la hamburguesa + «Ingresar» compacto toman la nav. */
.lp-nav-check[b-r2v8qu4vqn] { display: none; }
.lp-nav-mobile[b-r2v8qu4vqn] { display: none; }
.lp-hero-grid[b-r2v8qu4vqn] { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 18px 20px 0; display: grid; grid-template-columns: 1fr; gap: 36px; }
.lp-hero-copy[b-r2v8qu4vqn] { animation: lpRise-b-r2v8qu4vqn .6s ease both; }
/* Tinta FIJA #FEF3C7: va sobre secciones de fondo oscuro fijo (hero/IA/afiliados);
   var(--zit-amber-soft) en modo oscuro es rgba al 16% (pensada para FONDOS) y el texto desaparecía. */
.lp-eyebrow[b-r2v8qu4vqn] { display: inline-block; background: rgba(245,158,11,.22); color: #FEF3C7; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.lp-word[b-r2v8qu4vqn] { position: relative; white-space: nowrap; }
.lp-dot[b-r2v8qu4vqn] { display: inline-block; width: .42em; height: .42em; border-radius: 50%; background: var(--zit-amber); margin-left: .04em; }
.lp-sub[b-r2v8qu4vqn] { color: rgba(255,255,255,.88); font-size: clamp(1rem, 2.6vw, 1.18rem); line-height: 1.55; max-width: 540px; margin: 0 0 24px; }
.lp-cta-row[b-r2v8qu4vqn] { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-trust[b-r2v8qu4vqn] { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 20px 0 0; }
.lp-trust li[b-r2v8qu4vqn] { position: relative; padding-left: 16px; color: rgba(255,255,255,.85); font-size: .9rem; }
.lp-trust li[b-r2v8qu4vqn]::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--zit-amber); }
.lp-stage[b-r2v8qu4vqn] { position: relative; min-height: 360px; animation: lpRise-b-r2v8qu4vqn .7s .1s ease both; }
.lp-app[b-r2v8qu4vqn] { position: relative; z-index: 2; background: var(--zit-white); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(30,27,75,.55), 0 8px 20px -8px rgba(30,27,75,.4); }
.lp-app-bar[b-r2v8qu4vqn] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: color-mix(in srgb, var(--zit-white) 80%, var(--zit-bg)); border-bottom: 1px solid var(--zit-border); }
.lp-dots[b-r2v8qu4vqn] { display: inline-flex; gap: 5px; } .lp-dots i[b-r2v8qu4vqn] { width: 9px; height: 9px; border-radius: 50%; opacity: .7; }
.lp-dots i:nth-child(1)[b-r2v8qu4vqn]{ background:#EF4444; } .lp-dots i:nth-child(2)[b-r2v8qu4vqn]{ background:#F59E0B; } .lp-dots i:nth-child(3)[b-r2v8qu4vqn]{ background:#10B981; }
.lp-url[b-r2v8qu4vqn] { font-size: .72rem; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); background: var(--zit-white); border: 1px solid var(--zit-border); padding: 3px 10px; border-radius: 999px; }
.lp-app-body[b-r2v8qu4vqn] { display: grid; grid-template-columns: 48px 1fr; min-height: 280px; }
.lp-app-side[b-r2v8qu4vqn] { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; background: color-mix(in srgb, var(--zit-white) 96%, var(--zit-primary)); border-right: 1px solid var(--zit-border); color: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)); }
.lp-side-ico[b-r2v8qu4vqn] { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.lp-side-ico.is-active[b-r2v8qu4vqn] { background: var(--zit-primary-soft); color: var(--zit-primary); }
.lp-cal[b-r2v8qu4vqn] { padding: 10px 12px 14px; }
.lp-cal-head[b-r2v8qu4vqn] { display: grid; grid-template-columns: 42px repeat(4, 1fr); font-size: .72rem; font-weight: 600; color: var(--zit-navy); margin-bottom: 4px; }
.lp-cal-head span[b-r2v8qu4vqn] { text-align: center; }
.lp-cal-grid[b-r2v8qu4vqn] { display: grid; grid-template-columns: 42px 1fr; }
.lp-cal-hours[b-r2v8qu4vqn] { display: flex; flex-direction: column; justify-content: space-between; font-size: .64rem; color: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)); padding: 4px 0; }
.lp-cal-days[b-r2v8qu4vqn] { position: relative; height: 220px; }
.lp-cal-lines[b-r2v8qu4vqn] { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); }
.lp-cal-lines i[b-r2v8qu4vqn] { border-top: 1px solid var(--zit-border); }
.lp-appt[b-r2v8qu4vqn] { position: absolute; width: calc(25% - 8px); display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 8px; border-left: 3px solid; font-size: .62rem; line-height: 1.15; box-shadow: 0 4px 10px -4px rgba(30,27,75,.2); animation: lpRise-b-r2v8qu4vqn .5s ease both; }
.lp-appt[style*="grid-column:1"][b-r2v8qu4vqn] { left: 2%; } .lp-appt[style*="grid-column:2"][b-r2v8qu4vqn] { left: 27%; }
.lp-appt[style*="grid-column:3"][b-r2v8qu4vqn] { left: 52%; } .lp-appt[style*="grid-column:4"][b-r2v8qu4vqn] { left: 77%; }
.lp-appt b[b-r2v8qu4vqn] { display: block; font-weight: 600; color: var(--zit-navy); } .lp-appt small[b-r2v8qu4vqn] { color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); }
.lp-appt--indigo[b-r2v8qu4vqn] { background: var(--zit-primary-soft); border-color: var(--zit-primary); }
.lp-appt--amber[b-r2v8qu4vqn] { background: var(--zit-amber-soft); border-color: var(--zit-amber); }
.lp-appt--green[b-r2v8qu4vqn] { background: var(--zit-success-soft); border-color: var(--zit-success); }
.lp-appt--rose[b-r2v8qu4vqn] { background: var(--zit-danger-soft); border-color: var(--zit-danger); }
.lp-appt--drag[b-r2v8qu4vqn] { background: var(--zit-primary-soft); border-color: var(--zit-primary); transform: rotate(-2deg) scale(1.04); cursor: grabbing; z-index: 5; box-shadow: 0 16px 30px -8px rgba(79,70,229,.55); }
.lp-ini[b-r2v8qu4vqn] { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px; display: grid; place-items: center; font-size: .5rem; font-weight: 700; color: #fff; background: linear-gradient(135deg,#4F46E5,#1E1B4B); }
.lp-ini--amber[b-r2v8qu4vqn] { background: linear-gradient(135deg,#F59E0B,#B45309); }
.lp-ini--green[b-r2v8qu4vqn] { background: linear-gradient(135deg,#10B981,#047857); }
.lp-ini--rose[b-r2v8qu4vqn] { background: linear-gradient(135deg,#EF4444,#B91C1C); }
/* Marco del teléfono SIEMPRE oscuro (como un teléfono real): con var(--zit-navy) el marco
   quedaba casi blanco en modo oscuro. La pantalla sí sigue los tokens. */
.lp-phone[b-r2v8qu4vqn] { position: absolute; right: 0; top: 30px; width: 168px; z-index: 3; background: var(--zit-white); border: 8px solid #1E1B4B; border-radius: 30px; transform: rotate(3.5deg); box-shadow: 0 24px 50px -16px rgba(30,27,75,.5); padding: 6px; }
.lp-phone-notch[b-r2v8qu4vqn] { display: block; width: 46px; height: 5px; border-radius: 999px; background: #1E1B4B; margin: 2px auto 6px; opacity: .6; }
/* La pantalla lleva su propia tinta: dentro del hero (color:#fff) el texto sin color
   explícito heredaba blanco sobre la pantalla clara y quedaba invisible. */
.lp-phone-screen[b-r2v8qu4vqn] { font-size: .6rem; color: var(--zit-navy); }
.lp-phone-head[b-r2v8qu4vqn] { background: linear-gradient(135deg,#1E1B4B,#4F46E5); color: #fff; border-radius: 12px; padding: 9px 10px; }
.lp-phone-head strong[b-r2v8qu4vqn] { display: block; font-size: .66rem; }
.lp-stars[b-r2v8qu4vqn] { color: var(--zit-amber); letter-spacing: 1px; font-size: .6rem; } .lp-stars b[b-r2v8qu4vqn] { color: inherit; }
.lp-phone-pro[b-r2v8qu4vqn] { display: flex; align-items: center; gap: 8px; padding: 9px 6px 6px; }
.lp-avatar[b-r2v8qu4vqn] { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .7rem; background: linear-gradient(135deg,#4F46E5,#1E1B4B); border: 3px solid var(--zit-primary); box-shadow: 0 4px 14px rgba(79,70,229,.30); }
.lp-avatar--alt[b-r2v8qu4vqn] { background: linear-gradient(135deg,#7C3AED,#1E1B4B); }
.lp-phone-pro b[b-r2v8qu4vqn] { display: block; font-size: .64rem; } .lp-phone-pro small[b-r2v8qu4vqn] { color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); }
.lp-slots[b-r2v8qu4vqn] { display: flex; gap: 5px; padding: 4px 6px; }
.lp-slot[b-r2v8qu4vqn] { flex: 1; text-align: center; border: 1px solid var(--zit-primary); color: var(--zit-primary); border-radius: 7px; padding: 5px 0; font-size: .6rem; font-weight: 600; }
.lp-slot--sel[b-r2v8qu4vqn] { outline: 2px solid var(--zit-primary); outline-offset: 2px; background: var(--zit-primary-soft); }
.lp-phone-reservar[b-r2v8qu4vqn] { display: block; margin: 8px 6px 4px; text-align: center; background: var(--zit-amber); color: #1E1B4B; font-weight: 700; border-radius: 8px; padding: 7px 0; font-size: .66rem; }
.lp-ping[b-r2v8qu4vqn] { position: absolute; left: -24px; top: -14px; background: var(--zit-amber); color: #1E1B4B; font-weight: 700; font-size: .62rem; padding: 6px 11px; border-radius: 999px; box-shadow: 0 0 0 0 rgba(245,158,11,.55); animation: lpPulse-b-r2v8qu4vqn 2.2s ease-in-out infinite; }

/* RUBROS */
.lp-rubros[b-r2v8qu4vqn] { background: var(--zit-white); padding: 56px 0; }
.lp-rubro-track[b-r2v8qu4vqn] { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 10px; margin-top: 18px; -webkit-overflow-scrolling: touch; }
.lp-rubro[b-r2v8qu4vqn] { display: block; text-decoration: none; color: inherit; scroll-snap-align: start; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: var(--zit-radius); padding: 22px 18px; text-align: center; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lp-rubro img[b-r2v8qu4vqn] { display: block; margin: 0 auto 12px; width: 64px; height: 64px; }
.lp-rubro h3[b-r2v8qu4vqn] { margin: 0 0 4px; color: var(--zit-navy); font-size: 1.02rem; }
.lp-rubro p[b-r2v8qu4vqn] { margin: 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .86rem; line-height: 1.4; }
.lp-rubro:hover[b-r2v8qu4vqn] { transform: translateY(-4px); border-color: var(--zit-primary); box-shadow: 0 12px 26px -12px rgba(79,70,229,.4); }
.lp-rubro--more[b-r2v8qu4vqn] { background: var(--zit-primary-soft); border-style: dashed; }
/* Rubro nuevo destacado (paseo de perros): borde y tinte ámbar + badge "Nuevo". */
.lp-rubro--new[b-r2v8qu4vqn] { position: relative; border: 2px solid var(--zit-amber); background: var(--zit-amber-soft); box-shadow: 0 14px 30px -14px rgba(245,158,11,.5); }
.lp-rubro--new:hover[b-r2v8qu4vqn] { border-color: var(--zit-amber); box-shadow: 0 18px 34px -14px rgba(245,158,11,.6); }
.lp-new-badge[b-r2v8qu4vqn] { position: absolute; top: 10px; right: 10px; background: var(--zit-amber); color: #1E1B4B; font-weight: 700; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; box-shadow: 0 4px 10px -3px rgba(245,158,11,.6); animation: lpNewPulse-b-r2v8qu4vqn 2.4s ease-in-out infinite; }
@keyframes lpNewPulse-b-r2v8qu4vqn { 0%,100% { box-shadow: 0 4px 10px -3px rgba(245,158,11,.55); } 50% { box-shadow: 0 5px 18px 0 rgba(245,158,11,.9); } }
.lp-plus[b-r2v8qu4vqn] { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: var(--zit-white); color: var(--zit-primary); font-size: 2rem; font-weight: 700; }
.lp-hint[b-r2v8qu4vqn] { color: var(--zit-primary); font-size: .85rem; margin: 10px 2px 0; }
.lp-rubros-cta[b-r2v8qu4vqn] { display: flex; justify-content: center; margin-top: 22px; }
.lp-rubros-all[b-r2v8qu4vqn] { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: var(--zit-primary); color: #fff; font-weight: 700; font-size: .98rem; text-decoration: none; box-shadow: 0 12px 26px -12px rgba(79,70,229,.55); transition: transform .15s ease, box-shadow .15s ease; }
.lp-rubros-all:hover[b-r2v8qu4vqn] { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(79,70,229,.7); }
.lp-rubros-all svg[b-r2v8qu4vqn] { width: 18px; height: 18px; }
.lp-rubros-all--big[b-r2v8qu4vqn] { padding: 16px 36px; font-size: 1.12rem; }
.lp-rubros-all--big svg[b-r2v8qu4vqn] { width: 20px; height: 20px; }

/* RUBROS — carrusel grande auto-rotante (marquee) con imagen grande por rubro */
.lp-marquee[b-r2v8qu4vqn] { overflow: hidden; margin-top: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.lp-marquee-track[b-r2v8qu4vqn] { display: flex; gap: 20px; width: max-content; padding: 10px 20px 16px; animation: lpMarquee-b-r2v8qu4vqn 80s linear infinite; }
.lp-marquee:hover .lp-marquee-track[b-r2v8qu4vqn] { animation-play-state: paused; }
@keyframes lpMarquee-b-r2v8qu4vqn { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lp-bigcard[b-r2v8qu4vqn] { flex: 0 0 auto; width: 360px; display: block; text-decoration: none; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(30,27,75,.5); transition: transform .2s ease, box-shadow .2s ease; }
.lp-bigcard:hover[b-r2v8qu4vqn] { transform: translateY(-6px); box-shadow: 0 26px 52px -20px rgba(79,70,229,.55); }
.lp-bigcard-img[b-r2v8qu4vqn] { position: relative; height: 244px; background: var(--zit-primary-soft) center/cover no-repeat; }
.lp-bigcard-demo[b-r2v8qu4vqn] { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(16,17,40,.72); color: #fff; font-weight: 700; font-size: .74rem; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.lp-bigcard-cap[b-r2v8qu4vqn] { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 18px 16px; color: #fff; background: linear-gradient(to top, rgba(16,17,40,.94), rgba(16,17,40,.5) 55%, transparent); }
.lp-bigcard-cap h3[b-r2v8qu4vqn] { margin: 0 0 5px; font-size: 1.24rem; font-weight: 700; }
.lp-bigcard-go[b-r2v8qu4vqn] { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .92rem; color: #fff; }
.lp-bigcard-go svg[b-r2v8qu4vqn] { width: 17px; height: 17px; }
@media (max-width: 600px) { .lp-bigcard[b-r2v8qu4vqn] { width: 300px; } .lp-bigcard-img[b-r2v8qu4vqn] { height: 208px; } .lp-marquee-track[b-r2v8qu4vqn] { animation-duration: 60s; } }
@media (prefers-reduced-motion: reduce) { .lp-marquee-track[b-r2v8qu4vqn] { animation: none; overflow-x: auto; } }

/* RUBROS — carrusel con foto de cada rubro */
.lp-rcarousel[b-r2v8qu4vqn] { overflow: hidden; margin-top: 20px; }
.lp-rcarousel-track[b-r2v8qu4vqn] { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 20px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lp-rcarousel-track[b-r2v8qu4vqn]::-webkit-scrollbar { display: none; }
.lp-rubcard[b-r2v8qu4vqn] { scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lp-rubcard:hover[b-r2v8qu4vqn] { transform: translateY(-6px); border-color: var(--zit-primary); box-shadow: 0 18px 34px -16px rgba(79,70,229,.5); }
.lp-rubcard-img[b-r2v8qu4vqn] { position: relative; height: 150px; background: var(--zit-primary-soft) center/cover no-repeat; display: grid; place-items: center; }
.lp-rubcard-ico[b-r2v8qu4vqn] { width: 72px; height: 72px; opacity: .92; }
.lp-rubcard-demo[b-r2v8qu4vqn], .lp-demo-live[b-r2v8qu4vqn] { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; background: rgba(16,17,40,.72); color: #fff; font-weight: 700; font-size: .72rem; padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.lp-live-dot[b-r2v8qu4vqn] { width: 8px; height: 8px; border-radius: 50%; background: #34D399; animation: lpLive-b-r2v8qu4vqn 1.8s ease-in-out infinite; }
@keyframes lpLive-b-r2v8qu4vqn { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 50% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } }
.lp-rubcard-body[b-r2v8qu4vqn] { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.lp-rubcard-body h3[b-r2v8qu4vqn] { margin: 0 0 4px; color: var(--zit-navy); font-size: 1.02rem; }
.lp-rubcard-body p[b-r2v8qu4vqn] { margin: 0 0 12px; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .86rem; line-height: 1.4; flex: 1; }
.lp-rubcard-go[b-r2v8qu4vqn] { display: inline-flex; align-items: center; gap: 6px; color: var(--zit-primary); font-weight: 700; font-size: .9rem; }
.lp-rubcard-go svg[b-r2v8qu4vqn] { width: 16px; height: 16px; transition: transform .18s ease; }
.lp-rubcard:hover .lp-rubcard-go svg[b-r2v8qu4vqn] { transform: translateX(4px); }
@media (min-width: 600px) { .lp-rcarousel-track[b-r2v8qu4vqn] { grid-auto-columns: 44%; } }
@media (min-width: 960px) { .lp-rcarousel-track[b-r2v8qu4vqn] { grid-auto-columns: 23%; } }

/* DEMOS EN VIVO — invitación a recorrer una demo por rubro */
.lp-demos[b-r2v8qu4vqn] { background: var(--zit-bg); padding: 56px 0; }
.lp-demos-grid[b-r2v8qu4vqn] { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 22px 0; }
.lp-demo-card[b-r2v8qu4vqn] { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 14px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lp-demo-card:hover[b-r2v8qu4vqn] { transform: translateY(-4px); border-color: var(--zit-primary); box-shadow: 0 16px 30px -14px rgba(79,70,229,.45); }
.lp-demo-thumb[b-r2v8qu4vqn] { position: relative; height: 132px; background: var(--zit-primary-soft) center/cover no-repeat; }
.lp-demo-info[b-r2v8qu4vqn] { padding: 14px 16px 16px; }
.lp-demo-info strong[b-r2v8qu4vqn] { display: block; color: var(--zit-navy); font-size: 1.02rem; }
.lp-demo-info small[b-r2v8qu4vqn] { color: var(--zit-primary); font-weight: 600; font-size: .8rem; }
.lp-demo-info p[b-r2v8qu4vqn] { margin: 6px 0 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .86rem; line-height: 1.4; }
@media (min-width: 600px) { .lp-demos-grid[b-r2v8qu4vqn] { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px) { .lp-demos-grid[b-r2v8qu4vqn] { grid-template-columns: repeat(3,1fr); } }

/* PASEO DE PERROS — sección destacada del rubro nuevo */
.lp-paseo[b-r2v8qu4vqn] { background: var(--zit-white); padding: 16px 0 64px; }
/* Tinta ámbar oscura que sigue al tema: en claro ≈ #92400E, en oscuro se aclara con el navy invertido. */
.lp-eyebrow--dark[b-r2v8qu4vqn] { background: var(--zit-amber-soft); color: color-mix(in srgb, var(--zit-amber) 45%, var(--zit-navy)); }
.lp-paseo-img[b-r2v8qu4vqn] { width: 100%; height: auto; border-radius: var(--zit-radius); box-shadow: 0 24px 48px -22px rgba(31,27,75,.35); display: block; }

/* RESERVAS */
.lp-reservas[b-r2v8qu4vqn] { background: var(--zit-bg); padding: 56px 0; }
.lp-split[b-r2v8qu4vqn] { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.lp-checks[b-r2v8qu4vqn] { list-style: none; padding: 0; margin: 0 0 16px; }
.lp-checks li[b-r2v8qu4vqn] { position: relative; padding-left: 30px; margin-bottom: 11px; color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white)); line-height: 1.45; }
.lp-checks li[b-r2v8qu4vqn]::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: .72rem; font-weight: 700; background: var(--zit-primary-soft); color: var(--zit-primary); }
.lp-checks--amber li[b-r2v8qu4vqn]::before { background: rgba(245,158,11,.2); color: var(--zit-amber); }
.lp-on-dark.lp-checks li[b-r2v8qu4vqn] { color: rgba(255,255,255,.88); }
.lp-strong[b-r2v8qu4vqn] { font-weight: 600; color: var(--zit-navy); }
.lp-rcard[b-r2v8qu4vqn] { background: var(--zit-white); border-radius: 16px; padding: 16px; max-width: 340px; margin: 0 auto; box-shadow: 0 20px 40px -18px rgba(30,27,75,.35); }
.lp-rcard-head[b-r2v8qu4vqn] { background: linear-gradient(135deg,#1E1B4B,#4F46E5); color: #fff; border-radius: 12px; padding: 12px 14px; }
.lp-rcard-head strong[b-r2v8qu4vqn] { display: block; }
.lp-rcard-pros[b-r2v8qu4vqn] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 2px; }
.lp-rpro[b-r2v8qu4vqn] { display: flex; align-items: center; gap: 8px; }
.lp-rpro b[b-r2v8qu4vqn] { display: block; font-size: .82rem; } .lp-rpro small[b-r2v8qu4vqn] { color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .72rem; }
.lp-slots--wide[b-r2v8qu4vqn] { padding: 4px 0 8px; }
.lp-map[b-r2v8qu4vqn] { width: 100%; height: auto; display: block; border-radius: 10px; margin: 4px 0 10px; }
.lp-rcard-reservar[b-r2v8qu4vqn] { display: block; text-align: center; background: var(--zit-amber); color: #1E1B4B; font-weight: 700; border-radius: var(--zit-radius); padding: 11px 0; }

/* BENTO */
.lp-bento[b-r2v8qu4vqn] { background: var(--zit-white); padding: 56px 0; }
.lp-bento-grid[b-r2v8qu4vqn] { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
.lp-tile[b-r2v8qu4vqn] { background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: var(--zit-radius); padding: 20px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lp-tile:hover[b-r2v8qu4vqn] { transform: translateY(-4px); border-color: var(--zit-primary); box-shadow: 0 12px 26px -12px rgba(79,70,229,.35); }
.lp-tile h3[b-r2v8qu4vqn] { margin: 0 0 4px; color: var(--zit-navy); font-size: 1.02rem; }
.lp-tile p[b-r2v8qu4vqn] { margin: 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .9rem; line-height: 1.45; }
.lp-tico[b-r2v8qu4vqn] { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--zit-primary-soft); color: var(--zit-primary); margin-bottom: 12px; }
.lp-tile:hover .lp-tico[b-r2v8qu4vqn] { background: var(--zit-amber-soft); color: var(--zit-amber); }
.lp-tile--caja[b-r2v8qu4vqn] { display: flex; flex-direction: column; }
.lp-caja-rows[b-r2v8qu4vqn] { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 10px 0; font-size: .9rem; }
.lp-caja-rows span[b-r2v8qu4vqn] { color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); } .lp-caja-rows b[b-r2v8qu4vqn] { color: var(--zit-navy); text-align: right; }
.lp-caja-total[b-r2v8qu4vqn] { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--zit-border); padding-top: 10px; }
.lp-caja-total strong[b-r2v8qu4vqn] { font-size: 1.5rem; color: var(--zit-navy); }
.lp-pill[b-r2v8qu4vqn] { align-self: flex-start; margin-top: 12px; font-size: .8rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.lp-pill--ok[b-r2v8qu4vqn] { background: var(--zit-success-soft); color: color-mix(in srgb, var(--zit-success) 55%, var(--zit-navy)); }
.lp-tile--chart .lp-bars[b-r2v8qu4vqn] { width: 100%; height: 120px; margin-top: 10px; }
.lp-bar[b-r2v8qu4vqn] { transform-box: fill-box; transform-origin: bottom; transform: scaleY(var(--h)); animation: lpGrow-b-r2v8qu4vqn 1s ease both; }

/* SEGURIDAD */
.lp-sec[b-r2v8qu4vqn] { position: relative; color: #fff; padding: 64px 0; overflow: hidden; background: linear-gradient(135deg,#1E1B4B 0%,#312E81 70%,#4F46E5 130%); }
.lp-sec-bg[b-r2v8qu4vqn] { position: absolute; inset: 0; pointer-events: none; }
.lp-split--dark[b-r2v8qu4vqn] { position: relative; z-index: 2; }
.lp-shield-wrap[b-r2v8qu4vqn] { position: relative; display: grid; place-items: center; min-height: 240px; }
.lp-shield[b-r2v8qu4vqn] { width: 160px; height: auto; filter: drop-shadow(0 16px 30px rgba(79,70,229,.45)); }
.lp-check[b-r2v8qu4vqn] { stroke-dasharray: 120; stroke-dashoffset: 120; animation: lpDraw-b-r2v8qu4vqn 1.1s .3s ease forwards; }
.lp-chip[b-r2v8qu4vqn] { position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.lp-chip--a[b-r2v8qu4vqn] { top: 8%; left: 4%; animation: lpFloatChip-b-r2v8qu4vqn 5s ease-in-out infinite; }
.lp-chip--b[b-r2v8qu4vqn] { top: 18%; right: 2%; animation: lpFloatChip-b-r2v8qu4vqn 5.6s ease-in-out infinite .4s; }
.lp-chip--c[b-r2v8qu4vqn] { bottom: 10%; left: 8%; animation: lpFloatChip-b-r2v8qu4vqn 5.2s ease-in-out infinite .8s; }

/* PLANES */
.lp-planes[b-r2v8qu4vqn] { background: var(--zit-bg); padding: 60px 0; }
.lp-plans[b-r2v8qu4vqn] { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 28px 0 0; }
.lp-plan[b-r2v8qu4vqn] { position: relative; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px; padding: 26px 22px; transition: transform .18s ease, box-shadow .18s ease; }
.lp-plan:hover[b-r2v8qu4vqn] { transform: translateY(-4px); box-shadow: 0 16px 34px -16px rgba(30,27,75,.3); }
.lp-plan h3[b-r2v8qu4vqn] { margin: 0 0 6px; font-size: 1.2rem; color: var(--zit-navy); }
.lp-price[b-r2v8qu4vqn] { font-weight: 700; font-size: 2rem; color: var(--zit-navy); }
.lp-price span[b-r2v8qu4vqn] { font-size: .9rem; font-weight: 500; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); }
.lp-plan-sub[b-r2v8qu4vqn] { color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .88rem; margin: 2px 0 16px; }
.lp-feats[b-r2v8qu4vqn] { list-style: none; padding: 0; margin: 0 0 20px; }
.lp-feats li[b-r2v8qu4vqn] { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: .92rem; color: var(--zit-navy); }
.lp-feats li[b-r2v8qu4vqn]::before { content: "\2713"; position: absolute; left: 0; color: var(--zit-primary); font-weight: 700; }
.lp-feat-inherit[b-r2v8qu4vqn] { color: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)) !important; } .lp-feat-inherit[b-r2v8qu4vqn]::before { color: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)); }
.lp-plan .lp-btn[b-r2v8qu4vqn] { width: 100%; }
.lp-plan--featured[b-r2v8qu4vqn] { border: 2px solid var(--zit-primary); box-shadow: 0 18px 38px -18px rgba(79,70,229,.45); }
.lp-ribbon[b-r2v8qu4vqn] { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--zit-amber); color: #1E1B4B; font-weight: 700; font-size: .78rem; padding: 5px 16px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 14px -4px rgba(245,158,11,.5); }
.lp-trial[b-r2v8qu4vqn] { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 28px auto 0; background: var(--zit-amber-soft); color: color-mix(in srgb, var(--zit-amber) 45%, var(--zit-navy)); font-weight: 600; padding: 16px 22px; border-radius: var(--zit-radius); max-width: 700px; text-align: center; }
.lp-trial span[b-r2v8qu4vqn] { position: relative; padding-left: 18px; }
.lp-trial span[b-r2v8qu4vqn]::before { content: "\2713"; position: absolute; left: 0; color: var(--zit-amber); font-weight: 700; }

/* CIERRE */
.lp-cierre[b-r2v8qu4vqn] { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 70px 20px 64px; background: linear-gradient(135deg,#1E1B4B 0%,#312E81 60%,#4F46E5 130%); }
.lp-cierre-inner[b-r2v8qu4vqn] { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.lp-cierre-logo[b-r2v8qu4vqn] { display: flex; justify-content: center; margin-bottom: 8px; }
.lp-cierre .lp-cta-row[b-r2v8qu4vqn] { justify-content: center; margin-top: 24px; }
.lp-micro[b-r2v8qu4vqn] { color: rgba(255,255,255,.7); font-size: .85rem; margin-top: 18px; }

/* FOOTER — navy FIJO: su texto es blanco fijo, con var(--zit-navy) el fondo
   se volvía casi blanco en modo oscuro y los links desaparecían. */
.lp-footer[b-r2v8qu4vqn] { background: #1E1B4B; color: rgba(255,255,255,.7); padding: 22px 0; font-size: .85rem; }
.lp-footer-inner[b-r2v8qu4vqn] { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
/* flex-wrap: son 8+ enlaces — sin envolver, en móvil los últimos quedaban fuera de pantalla. */
.lp-footer-links[b-r2v8qu4vqn] { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lp-footer-links a[b-r2v8qu4vqn] { color: rgba(255,255,255,.8); text-decoration: none; }
.lp-footer-links a:hover[b-r2v8qu4vqn] { color: #fff; text-decoration: underline; }

/* KEYFRAMES */
@keyframes lpRise-b-r2v8qu4vqn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lpFloatA-b-r2v8qu4vqn { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lpFloatB-b-r2v8qu4vqn { 0%,100% { transform: rotate(3.5deg) translateY(0); } 50% { transform: rotate(3.5deg) translateY(-8px); } }
@keyframes lpDragBounce-b-r2v8qu4vqn { 0%,100% { transform: rotate(-2deg) scale(1.04) translateY(0); } 50% { transform: rotate(-2deg) scale(1.04) translateY(-3px); } }
@keyframes lpPulse-b-r2v8qu4vqn { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); } 70% { box-shadow: 0 0 0 12px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
@keyframes lpDraw-b-r2v8qu4vqn { to { stroke-dashoffset: 0; } }
@keyframes lpGrow-b-r2v8qu4vqn { from { transform: scaleY(0); } }
@keyframes lpFloatChip-b-r2v8qu4vqn { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.lp-float-a[b-r2v8qu4vqn] { animation: lpFloatA-b-r2v8qu4vqn 6s ease-in-out infinite; }
.lp-float-b[b-r2v8qu4vqn] { animation: lpFloatB-b-r2v8qu4vqn 7s ease-in-out infinite; }
.lp-drag-bounce[b-r2v8qu4vqn] { animation: lpRise-b-r2v8qu4vqn .5s ease both, lpDragBounce-b-r2v8qu4vqn 2.4s ease-in-out infinite .5s; }

/* FAQ */
.lp-faq[b-r2v8qu4vqn] { padding: 60px 0; }
.lp-faq-wrap[b-r2v8qu4vqn] { max-width: 760px; }
.lp-faq-list[b-r2v8qu4vqn] { margin-top: 24px; display: grid; gap: 12px; }
.lp-faq-item[b-r2v8qu4vqn] { background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 12px; padding: 2px 18px; }
.lp-faq-item summary[b-r2v8qu4vqn] { cursor: pointer; font-weight: 600; color: var(--zit-navy); padding: 15px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lp-faq-item summary[b-r2v8qu4vqn]::-webkit-details-marker { display: none; }
.lp-faq-item summary[b-r2v8qu4vqn]::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--zit-primary); }
.lp-faq-item[open] summary[b-r2v8qu4vqn]::after { content: "\2212"; }
.lp-faq-item p[b-r2v8qu4vqn] { margin: 0 0 16px; color: color-mix(in srgb, var(--zit-navy) 76%, var(--zit-white)); line-height: 1.55; }

/* RESPONSIVE */
/* Navegación en pantallas angostas: la fila de enlaces (5 enlaces + toggle + Ingresar,
   ~565px) no cabe y el hero la recortaba con overflow:hidden — «Ingresar» y el toggle
   quedaban invisibles en el iPhone. Entre 768 y 860px envuelve bajo el logo, centrada;
   bajo 768px colapsa en menú hamburguesa (bloque siguiente). */
@media (max-width: 860px) and (min-width: 768px) {
  .lp-nav[b-r2v8qu4vqn] { flex-wrap: wrap; row-gap: 10px; padding: 14px 16px; }
  .lp-nav-links[b-r2v8qu4vqn] { flex-wrap: wrap; justify-content: center; gap: 4px 14px; width: 100%; }
  .lp-nav-links a[b-r2v8qu4vqn] { font-size: .9rem; }
  .lp-nav-cta[b-r2v8qu4vqn] { padding: 6px 14px; }
}
/* Bajo 768px: los enlaces pasan a un panel desplegable gobernado por el checkbox
   (sin JS, sobrevive al prerender) e «Ingresar» queda SIEMPRE visible como botón
   compacto junto a la hamburguesa. */
@media (max-width: 767.98px) {
  .lp-nav[b-r2v8qu4vqn] { padding: 14px 16px; }
  /* Checkbox enfocable pero invisible (no display:none, para no perder el teclado). */
  .lp-nav-check[b-r2v8qu4vqn] { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .lp-nav-mobile[b-r2v8qu4vqn] { display: inline-flex; align-items: center; gap: 10px; }
  .lp-nav-mobile .lp-nav-cta[b-r2v8qu4vqn] { color: rgba(255,255,255,.92); text-decoration: none; font-size: .9rem; padding: 6px 14px; }
  .lp-nav-burger[b-r2v8qu4vqn] { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 38px; padding: 9px 10px; border: 1.5px solid rgba(255,255,255,.5); border-radius: var(--zit-radius); cursor: pointer; }
  .lp-nav-burger span[b-r2v8qu4vqn] { display: block; height: 2px; width: 100%; border-radius: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
  .lp-nav-check:focus-visible ~ .lp-nav-mobile .lp-nav-burger[b-r2v8qu4vqn] { outline: 2px solid var(--zit-amber); outline-offset: 2px; }
  /* Panel desplegable: navy fijo (está dentro del hero oscuro fijo, como el footer). */
  .lp-nav-links[b-r2v8qu4vqn] { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px 14px; background: #1E1B4B; border-bottom: 1px solid rgba(165,180,252,.35); box-shadow: 0 24px 40px -18px rgba(0,0,0,.55); }
  .lp-nav-check:checked ~ .lp-nav-links[b-r2v8qu4vqn] { display: flex; }
  .lp-nav-links a[b-r2v8qu4vqn] { font-size: 1rem; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.12); }
  /* «Ingresar» ya está fijo junto a la hamburguesa; dentro del panel sobraría. */
  .lp-nav-links .lp-nav-cta[b-r2v8qu4vqn] { display: none; }
  .lp-nav-theme[b-r2v8qu4vqn] { padding: 10px 2px 2px; }
  /* Hamburguesa → X cuando el panel está abierto. */
  .lp-nav-check:checked ~ .lp-nav-mobile .lp-nav-burger span:nth-child(1)[b-r2v8qu4vqn] { transform: translateY(7px) rotate(45deg); }
  .lp-nav-check:checked ~ .lp-nav-mobile .lp-nav-burger span:nth-child(2)[b-r2v8qu4vqn] { opacity: 0; }
  .lp-nav-check:checked ~ .lp-nav-mobile .lp-nav-burger span:nth-child(3)[b-r2v8qu4vqn] { transform: translateY(-7px) rotate(-45deg); }
}
@media (min-width: 600px) {
  .lp-rubro-track[b-r2v8qu4vqn] { grid-auto-flow: row; grid-auto-columns: 1fr; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .lp-hint[b-r2v8qu4vqn] { display: none; }
  .lp-bento-grid[b-r2v8qu4vqn] { grid-template-columns: repeat(2, 1fr); }
  .lp-plans[b-r2v8qu4vqn] { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
@media (min-width: 960px) {
  .lp-hero-grid[b-r2v8qu4vqn] { grid-template-columns: 46% 54%; gap: 30px; align-items: center; padding-top: 28px; padding-bottom: 40px; }
  .lp-stage[b-r2v8qu4vqn] { min-height: 470px; }
  .lp-app[b-r2v8qu4vqn] { max-width: 480px; }
  .lp-phone[b-r2v8qu4vqn] { width: 188px; right: -12px; top: auto; bottom: -26px; }
  .lp-rubro-track[b-r2v8qu4vqn] { grid-template-columns: repeat(6, 1fr); }
  .lp-split[b-r2v8qu4vqn] { grid-template-columns: 1fr 1fr; gap: 48px; }
  .lp-reservas .lp-split-visual[b-r2v8qu4vqn] { order: 2; }
  .lp-bento-grid[b-r2v8qu4vqn] { grid-template-columns: repeat(4, 1fr); }
  .lp-tile--wide[b-r2v8qu4vqn] { grid-column: span 2; }
  .lp-plans[b-r2v8qu4vqn] { grid-template-columns: repeat(4, 1fr); }
  .lp-plan--featured[b-r2v8qu4vqn] { transform: scale(1.04); }
  .lp-plan--featured:hover[b-r2v8qu4vqn] { transform: scale(1.04) translateY(-4px); }
}

/* ACCESIBILIDAD — respeta a quien pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .lp *[b-r2v8qu4vqn], .lp *[b-r2v8qu4vqn]::before, .lp *[b-r2v8qu4vqn]::after { animation: none !important; transition: none !important; }
  .lp-check[b-r2v8qu4vqn] { stroke-dashoffset: 0; }
  .lp-bar[b-r2v8qu4vqn] { transform: scaleY(var(--h)); }
  .lp-appt--drag[b-r2v8qu4vqn], .lp-drag-bounce[b-r2v8qu4vqn] { transform: rotate(-2deg) scale(1.04); }
}

/* Programa de afiliados (sección oscura, mismo lenguaje que el hero/seguridad). */
.lp-afiliados[b-r2v8qu4vqn] { position: relative; overflow: hidden; background: linear-gradient(135deg, #1E1B4B 0%, #312E81 60%, #4F46E5 130%); padding: 60px 0; }
.lp-aff-card[b-r2v8qu4vqn] { background: rgba(255,255,255,.06); border: 1px solid rgba(165,180,252,.35); border-radius: 16px; padding: 22px; backdrop-filter: blur(4px); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.lp-aff-card-head[b-r2v8qu4vqn] { color: #FEF3C7; font-weight: 600; font-size: .95rem; margin-bottom: 14px; }
.lp-aff-tier[b-r2v8qu4vqn] { display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-radius: 12px; background: rgba(255,255,255,.05); margin-bottom: 10px; }
.lp-aff-tier b[b-r2v8qu4vqn] { color: #fff; display: block; font-size: 1.02rem; }
.lp-aff-tier span[b-r2v8qu4vqn] { color: rgba(255,255,255,.7); font-size: .86rem; }
.lp-aff-tier--top[b-r2v8qu4vqn] { background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.5); }
.lp-aff-rate[b-r2v8qu4vqn] { flex: 0 0 auto; min-width: 64px; text-align: center; font-weight: 700; font-size: 1.5rem; color: var(--zit-amber); }
.lp-aff-tier--top .lp-aff-rate[b-r2v8qu4vqn] { color: #FBBF24; }

/* VERTICALES DESTACADOS — vitrina por sector con foto real (reemplaza los split estáticos) */
.lp-verticales[b-r2v8qu4vqn] { background: var(--zit-white); padding: 56px 0; }
.lp-vert-grid[b-r2v8qu4vqn] { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 26px; }
.lp-vert-card[b-r2v8qu4vqn] { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(30,27,75,.4); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lp-vert-card:hover[b-r2v8qu4vqn] { transform: translateY(-6px); border-color: var(--zit-primary); box-shadow: 0 22px 44px -20px rgba(79,70,229,.5); }
.lp-vert-img[b-r2v8qu4vqn] { position: relative; height: 200px; background: var(--zit-primary-soft) center/cover no-repeat; }
.lp-vert-tag[b-r2v8qu4vqn] { position: absolute; top: 12px; left: 12px; background: rgba(16,17,40,.72); color: #fff; font-weight: 700; font-size: .74rem; padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.lp-vert-cap[b-r2v8qu4vqn] { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.lp-vert-cap h3[b-r2v8qu4vqn] { margin: 0 0 6px; color: var(--zit-navy); font-size: 1.12rem; }
.lp-vert-cap p[b-r2v8qu4vqn] { margin: 0 0 14px; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .92rem; line-height: 1.5; flex: 1; }
.lp-vert-go[b-r2v8qu4vqn] { display: inline-flex; align-items: center; gap: 6px; color: var(--zit-primary); font-weight: 700; font-size: .92rem; }
.lp-vert-go svg[b-r2v8qu4vqn] { width: 16px; height: 16px; transition: transform .18s ease; }
.lp-vert-card:hover .lp-vert-go svg[b-r2v8qu4vqn] { transform: translateX(4px); }
@media (min-width: 600px) { .lp-vert-grid[b-r2v8qu4vqn] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .lp-vert-grid[b-r2v8qu4vqn] { grid-template-columns: repeat(3, 1fr); } }

/* ZITORIA IA — sección oscura con tarjeta-mock del resumen semanal */
.lp-ia[b-r2v8qu4vqn] { position: relative; overflow: hidden; background: linear-gradient(135deg, #1E1B4B 0%, #312E81 60%, #4F46E5 130%); padding: 60px 0; }
.lp-ia .lp-hero-bg[b-r2v8qu4vqn] { position: absolute; inset: 0; }
.lp-ia-card[b-r2v8qu4vqn] { background: rgba(255,255,255,.07); border: 1px solid rgba(165,180,252,.35); border-radius: 18px; padding: 22px; backdrop-filter: blur(4px); box-shadow: 0 18px 50px rgba(0,0,0,.35); max-width: 460px; margin: 0 auto; }
.lp-ia-card-head[b-r2v8qu4vqn] { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.02rem; margin-bottom: 12px; }
.lp-ia-spark[b-r2v8qu4vqn] { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(245,158,11,.2); color: var(--zit-amber); flex: 0 0 auto; }
.lp-ia-narr[b-r2v8qu4vqn] { color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.55; margin: 0 0 14px; }
.lp-ia-act[b-r2v8qu4vqn] { display: flex; align-items: flex-start; gap: 10px; color: #fff; font-size: .9rem; line-height: 1.4; margin-bottom: 9px; }
.lp-ia-dot[b-r2v8qu4vqn] { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--zit-amber); margin-top: 6px; }
.lp-ia-badge[b-r2v8qu4vqn] { display: inline-block; margin-top: 12px; background: rgba(245,158,11,.18); border: 1px solid rgba(245,158,11,.5); color: #FEF3C7; font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }

/* WHATSAPP — sección clara con mock de bandeja/chat */
.lp-wa[b-r2v8qu4vqn] { background: var(--zit-bg); padding: 56px 0; }
.lp-eyebrow--wa[b-r2v8qu4vqn] { background: #DCFCE7; color: #15803D; }
.lp-checks--wa li[b-r2v8qu4vqn]::before { background: #DCFCE7; color: #16A34A; }
.lp-wa-card[b-r2v8qu4vqn] { background: #fff; border-radius: 18px; overflow: hidden; max-width: 380px; margin: 0 auto; box-shadow: 0 20px 46px -20px rgba(30,27,75,.4); border: 1px solid var(--zit-border); }
.lp-wa-head[b-r2v8qu4vqn] { display: flex; align-items: center; gap: 10px; background: #075E54; color: #fff; padding: 12px 16px; }
.lp-wa-ico[b-r2v8qu4vqn] { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #25D366; color: #fff; flex: 0 0 auto; }
.lp-wa-head b[b-r2v8qu4vqn] { display: block; font-size: .92rem; } .lp-wa-head small[b-r2v8qu4vqn] { color: rgba(255,255,255,.75); font-size: .74rem; }
.lp-wa-body[b-r2v8qu4vqn] { background: #ECE5DD; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.lp-wa-in[b-r2v8qu4vqn], .lp-wa-out[b-r2v8qu4vqn] { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: .86rem; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.lp-wa-in[b-r2v8qu4vqn] { align-self: flex-start; background: #fff; color: #1F2937; border-top-left-radius: 3px; }
.lp-wa-out[b-r2v8qu4vqn] { align-self: flex-end; background: #DCF8C6; color: #143d1f; border-top-right-radius: 3px; }
.lp-wa-t[b-r2v8qu4vqn] { display: block; text-align: right; font-size: .66rem; color: #4b7a52; margin-top: 3px; }
/* Dentro del mock de WhatsApp (siempre claro): par FIJO — con tokens, la tinta
   se invertía en modo oscuro y quedaba blanca sobre el fondo claro del teléfono. */
.lp-wa-suggest[b-r2v8qu4vqn] { align-self: stretch; display: flex; align-items: flex-start; gap: 8px; background: #EEF2FF; border: 1px dashed #4F46E5; color: #1E1B4B; font-size: .8rem; line-height: 1.4; padding: 9px 11px; border-radius: 10px; }
.lp-wa-suggest .lp-ia-spark[b-r2v8qu4vqn] { width: 22px; height: 22px; border-radius: 6px; }

/* --- Sin letra chica: precio en pesos vs el modelo UF + comisiones --- */
.lp-sinletra[b-r2v8qu4vqn] { background: var(--zit-white, #fff); padding: 60px 0; }
.lp-sinletra-intro[b-r2v8qu4vqn] { max-width: 720px; margin-left: auto; margin-right: auto; }
.lp-vs[b-r2v8qu4vqn] { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; margin: 26px 0 0; }
.lp-vs-card[b-r2v8qu4vqn] { position: relative; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px; padding: 24px 22px; }
.lp-vs-card--good[b-r2v8qu4vqn] { border: 2px solid var(--zit-success, #10B981); box-shadow: 0 16px 34px -18px rgba(16,185,129,.35); }
.lp-vs-card--bad[b-r2v8qu4vqn] { background: color-mix(in srgb, var(--zit-white) 96%, var(--zit-navy)); }
.lp-vs-tag[b-r2v8qu4vqn] { display: inline-block; font-weight: 700; font-size: .82rem; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.lp-vs-tag--good[b-r2v8qu4vqn] { background: var(--zit-success-soft, #d1fae5); color: color-mix(in srgb, var(--zit-success) 55%, var(--zit-navy)); }
.lp-vs-tag--bad[b-r2v8qu4vqn] { background: color-mix(in srgb, var(--zit-border) 45%, var(--zit-white)); color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); }
.lp-vs-list[b-r2v8qu4vqn] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-vs-list li[b-r2v8qu4vqn] { position: relative; padding-left: 30px; font-size: .98rem; line-height: 1.4; color: var(--zit-navy, #1E1B4B); }
.lp-vs-yes[b-r2v8qu4vqn]::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; background: var(--zit-success, #10B981); }
.lp-vs-no[b-r2v8qu4vqn] { color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); }
.lp-vs-no[b-r2v8qu4vqn]::before { content: "✕"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #b91c1c; background: #fee2e2; }
.lp-vs-mid[b-r2v8qu4vqn] { justify-self: center; align-self: center; font-weight: 700; color: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)); font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }
.lp-sinletra-foot[b-r2v8qu4vqn] { margin-top: 22px; font-size: .96rem; }
@media (min-width: 860px) {
  .lp-vs[b-r2v8qu4vqn] { grid-template-columns: 1fr auto 1fr; gap: 22px; }
}

/* Guiño a la comparativa (/comparativa) */
.lp-compare[b-r2v8qu4vqn] { background: var(--zit-primary-soft); padding: 56px 0; }
.lp-compare-in[b-r2v8qu4vqn] { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.lp-compare-copy .lp-btn[b-r2v8qu4vqn] { margin-top: 10px; }
.lp-compare-viz[b-r2v8qu4vqn] { background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px; padding: 14px; box-shadow: 0 18px 40px -28px rgba(79,70,229,.45); }
.lp-compare-row[b-r2v8qu4vqn] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--zit-border) 40%, var(--zit-white)); }
.lp-compare-row + .lp-compare-row[b-r2v8qu4vqn] { margin-top: 8px; }
.lp-compare-row span[b-r2v8qu4vqn] { font-weight: 700; color: var(--zit-navy); }
.lp-compare-row i[b-r2v8qu4vqn] { font-style: normal; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .9rem; }
.lp-compare-row b[b-r2v8qu4vqn] { font-weight: 700; font-size: .92rem; }
.lp-compare-row--z[b-r2v8qu4vqn] { background: linear-gradient(135deg, var(--zit-primary), #312E81); }
.lp-compare-row--z span[b-r2v8qu4vqn] { color: #fff; }
.lp-compare-row--z b[b-r2v8qu4vqn] { color: var(--zit-amber); }
@media (min-width: 860px) {
  .lp-compare-in[b-r2v8qu4vqn] { grid-template-columns: 1.1fr .9fr; gap: 44px; }
}

/* Badge de tramo de plan en los tiles del bento (funciones gateadas por plan) */
.lp-tier[b-r2v8qu4vqn] { display: inline-block; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--zit-primary); background: var(--zit-primary-soft); border-radius: 999px; padding: 2px 8px; vertical-align: middle; margin-left: 4px; white-space: nowrap; }

/* Rendimiento: las secciones bajo el fold se pintan recién al acercarse al viewport
   (content-visibility). contain-intrinsic-size reserva alto estimado para no saltar el scroll. */
.lp-demos[b-r2v8qu4vqn], .lp-verticales[b-r2v8qu4vqn], .lp-planes[b-r2v8qu4vqn], .lp-faq[b-r2v8qu4vqn] { content-visibility: auto; contain-intrinsic-size: auto 600px; }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-l0yl129flv] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-l0yl129flv] {
    flex: 1;
}

.sidebar[b-l0yl129flv] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-l0yl129flv] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-l0yl129flv]  a, .top-row[b-l0yl129flv]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-l0yl129flv]  a:hover, .top-row[b-l0yl129flv]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-l0yl129flv]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-l0yl129flv] {
        justify-content: space-between;
    }

    .top-row[b-l0yl129flv]  a, .top-row[b-l0yl129flv]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-l0yl129flv] {
        flex-direction: row;
    }

    .sidebar[b-l0yl129flv] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-l0yl129flv] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-l0yl129flv]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-l0yl129flv], article[b-l0yl129flv] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Sube por encima de la barra inferior del teléfono (1090). Es la ÚNICA señal cuando el
   circuito muere sin recuperación —y trae el enlace «Recargar»—: tapado, el usuario ve la app
   congelada sin ninguna explicación. Antes de la barra vivía en 1000 y nada lo cubría. */
#blazor-error-ui[b-l0yl129flv] {
    z-index: 1301;
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-l0yl129flv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Barra superior de las páginas públicas (privacidad, términos, etc.):
   muestra el logo del sitio y un enlace de regreso. Pegajosa, sigue el tema. */
.pub-bar[b-es2n75g1x4] {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: color-mix(in srgb, var(--zit-white) 90%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--zit-border);
    box-shadow: 0 1px 0 rgba(30, 27, 75, .03), 0 8px 24px -20px rgba(30, 27, 75, .5);
}
.pub-bar-in[b-es2n75g1x4] {
    /* Misma caja que el MudContainer Medium del contenido (max 960 + px-2/px-sm-4)
       para que el logo quede alineado con el hero a todos los anchos. */
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
@media (min-width: 600px) {
    .pub-bar-in[b-es2n75g1x4] { padding-left: 16px; padding-right: 16px; }
}
.pub-brand[b-es2n75g1x4] { display: inline-flex; align-items: center; text-decoration: none; transition: opacity .15s ease; }
.pub-brand:hover[b-es2n75g1x4] { opacity: .82; }
/* Lado derecho de la barra: alternador de tema + enlace de regreso. */
.pub-bar-side[b-es2n75g1x4] { display: inline-flex; align-items: center; gap: 2px; }
.pub-back[b-es2n75g1x4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--zit-primary);
    font-family: Poppins, 'Segoe UI', sans-serif;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}
.pub-back svg[b-es2n75g1x4] { width: 16px; height: 16px; }
.pub-back:hover[b-es2n75g1x4] { background: var(--zit-primary-soft); color: var(--zit-primary-hover); }
.pub-back span[b-es2n75g1x4] { white-space: nowrap; }

@media (max-width: 480px) {
    .pub-back span[b-es2n75g1x4] { display: none; }
    .pub-back[b-es2n75g1x4] { padding: 7px; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-60p9vjr17k],
.components-reconnect-repeated-attempt-visible[b-60p9vjr17k],
.components-reconnect-failed-visible[b-60p9vjr17k],
.components-pause-visible[b-60p9vjr17k],
.components-resume-failed-visible[b-60p9vjr17k],
.components-rejoining-animation[b-60p9vjr17k] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-60p9vjr17k],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-60p9vjr17k],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-60p9vjr17k],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-60p9vjr17k],
#components-reconnect-modal.components-reconnect-retrying[b-60p9vjr17k],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-60p9vjr17k],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-60p9vjr17k],
#components-reconnect-modal.components-reconnect-failed[b-60p9vjr17k],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-60p9vjr17k] {
    display: block;
}


#components-reconnect-modal[b-60p9vjr17k] {
    background-color: var(--zit-white, #fff);
    color: var(--zit-navy, #1E1B4B);
    width: 20rem;
    /* El micrositio se embebe en iframes angostos: 20rem + 2rem de relleno se salían. */
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-60p9vjr17k 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-60p9vjr17k 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-60p9vjr17k 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-60p9vjr17k]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-60p9vjr17k 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-60p9vjr17k {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-60p9vjr17k {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-60p9vjr17k {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-60p9vjr17k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-60p9vjr17k] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-60p9vjr17k] {
    border: 0;
    background-color: var(--zit-primary, #4F46E5);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-60p9vjr17k] {
        background-color: var(--zit-primary-hover, #4338CA);
    }

    #components-reconnect-modal button:active[b-60p9vjr17k] {
        background-color: var(--zit-primary, #4F46E5);
    }

.components-rejoining-animation[b-60p9vjr17k] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-60p9vjr17k] {
        position: absolute;
        border: 3px solid var(--zit-primary, #4F46E5);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-60p9vjr17k 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-60p9vjr17k] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-60p9vjr17k {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/LegalShell.razor.rz.scp.css */
/* ============================================================
   Páginas legales de Zitoria (Privacidad / Términos).
   Hero de marca + índice pegajoso + tarjetas numeradas.
   Solo tokens var(--zit-*); mobile-first; sin librerías externas.
   MODO OSCURO: superficies y grises por tokens/color-mix (se
   invierten con .zit-dark); el HERO y los chips numerados llevan
   gradiente navy FIJO con tinta #fff fija — no se tocan.
   ============================================================ */
.lg[b-r5ro6am63b] { font-family: Poppins, 'Segoe UI', sans-serif; color: var(--zit-navy); }
.lg *[b-r5ro6am63b] { box-sizing: border-box; }

/* ---------- HERO ---------- */
.lg-hero[b-r5ro6am63b] {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 30px 26px 30px;
    color: #fff;
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 58%, #4F46E5 128%);
    box-shadow: 0 30px 60px -28px rgba(30, 27, 75, .65);
}
.lg-glow[b-r5ro6am63b] { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; }
.lg-glow--indigo[b-r5ro6am63b] { width: 320px; height: 320px; right: -70px; top: -90px; opacity: .55; background: radial-gradient(circle, #6366F1, transparent 70%); }
.lg-glow--amber[b-r5ro6am63b] { width: 240px; height: 240px; left: -60px; bottom: -90px; opacity: .30; background: radial-gradient(circle, #F59E0B, transparent 70%); }
.lg-grid[b-r5ro6am63b] { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; }
.lg-hero-in[b-r5ro6am63b] { position: relative; z-index: 2; }
.lg-hero-brand[b-r5ro6am63b] { display: inline-flex; margin-bottom: 18px; text-decoration: none; }
.lg-eyebrow[b-r5ro6am63b] {
    display: inline-block; margin-bottom: 12px;
    background: rgba(245, 158, 11, .20); color: #FCD34D;
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    padding: 5px 13px; border-radius: 999px;
}
.lg-title[b-r5ro6am63b] { margin: 0 0 8px; font-weight: 700; line-height: 1.12; font-size: clamp(1.8rem, 5vw, 2.7rem); }
.lg-sub[b-r5ro6am63b] { margin: 0 0 18px; max-width: 40ch; color: rgba(255, 255, 255, .88); font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.5; }
.lg-meta[b-r5ro6am63b] { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-pill[b-r5ro6am63b] {
    display: inline-flex; align-items: center;
    background: rgba(255, 255, 255, .14); color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: .8rem; font-weight: 600;
    padding: 5px 12px; border-radius: 999px;
    backdrop-filter: blur(4px);
}
.lg-pill--ghost[b-r5ro6am63b] { background: transparent; color: rgba(255, 255, 255, .82); font-weight: 500; }

/* ---------- AVISO BORRADOR ---------- */
.lg-draft[b-r5ro6am63b] {
    display: flex; align-items: flex-start; gap: 11px;
    margin-top: 16px; padding: 13px 16px;
    /* Tinta ámbar oscurecida con navy: legible sobre amber-soft en claro y oscuro. */
    background: var(--zit-amber-soft); color: color-mix(in srgb, var(--zit-warning) 55%, var(--zit-navy));
    border: 1px solid color-mix(in srgb, var(--zit-amber) 45%, var(--zit-white)); border-left: 4px solid var(--zit-amber);
    border-radius: 12px; font-size: .9rem; line-height: 1.5;
}
.lg-draft-ico[b-r5ro6am63b] { flex: 0 0 20px; }
.lg-draft-ico svg[b-r5ro6am63b] { width: 20px; height: 20px; display: block; }
.lg-draft-tx[b-r5ro6am63b]  b { font-weight: 700; }

/* ---------- CUERPO (índice + contenido) ---------- */
.lg-body[b-r5ro6am63b] { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }

/* Índice lateral (oculto en móvil) */
.lg-toc[b-r5ro6am63b] { display: none; }

/* Tarjetas de sección */
.lg-card[b-r5ro6am63b] {
    scroll-margin-top: 88px;
    background: var(--zit-white);
    border: 1px solid var(--zit-border);
    border-radius: 16px;
    padding: 22px 22px 20px;
    box-shadow: 0 14px 30px -24px rgba(30, 27, 75, .5);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lg-card + .lg-card[b-r5ro6am63b] { margin-top: 14px; }
.lg-card:hover[b-r5ro6am63b] { transform: translateY(-3px); border-color: color-mix(in srgb, var(--zit-primary) 30%, var(--zit-white)); box-shadow: 0 22px 40px -24px rgba(79, 70, 229, .5); }
.lg-card-h[b-r5ro6am63b] { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lg-num[b-r5ro6am63b] {
    flex: 0 0 30px; width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 9px; color: #fff; font-size: .92rem; font-weight: 700;
    background: linear-gradient(135deg, #4F46E5, #1E1B4B);
    box-shadow: 0 6px 14px -5px rgba(79, 70, 229, .6);
}
.lg-ico[b-r5ro6am63b] { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--zit-primary-soft); color: var(--zit-primary); }
.lg-ico svg[b-r5ro6am63b] { width: 20px; height: 20px; display: block; }
.lg-card-h h2[b-r5ro6am63b] { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--zit-navy); line-height: 1.25; }

/* Prosa de cada sección (HTML inyectado → usar ::deep) */
.lg-prose[b-r5ro6am63b] { color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white)); font-size: .96rem; line-height: 1.62; }
.lg-prose[b-r5ro6am63b]  p { margin: 0 0 .6em; }
.lg-prose[b-r5ro6am63b]  p:last-child { margin-bottom: 0; }
.lg-prose[b-r5ro6am63b]  b { color: var(--zit-navy); font-weight: 600; }
/* Subrayado en primario translúcido vía color-mix: en oscuro sigue al índigo claro. */
.lg-prose[b-r5ro6am63b]  a { color: var(--zit-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--zit-primary) 35%, transparent); transition: border-color .15s ease; }
.lg-prose[b-r5ro6am63b]  a:hover { border-bottom-color: var(--zit-primary); }
.lg-prose[b-r5ro6am63b]  .lg-note { margin-top: .7em; font-size: .82rem; color: var(--zit-muted); }

/* Pie del documento */
.lg-foot[b-r5ro6am63b] {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px dashed var(--zit-border);
    font-size: .9rem; color: var(--zit-muted); line-height: 1.55;
}
.lg-foot[b-r5ro6am63b]  a { color: var(--zit-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--zit-primary) 35%, transparent); }
.lg-foot[b-r5ro6am63b]  a:hover { border-bottom-color: var(--zit-primary); }

/* ---------- DESKTOP ---------- */
@media (min-width: 860px) {
    .lg-hero[b-r5ro6am63b] { padding: 40px 40px 38px; }
    .lg-body[b-r5ro6am63b] { grid-template-columns: 232px 1fr; gap: 30px; align-items: start; }

    .lg-toc[b-r5ro6am63b] {
        display: block; position: sticky; top: 84px;
        background: var(--zit-white);
        border: 1px solid var(--zit-border);
        border-radius: 16px; padding: 16px 14px;
        box-shadow: 0 14px 30px -26px rgba(30, 27, 75, .5);
    }
    .lg-toc-h[b-r5ro6am63b] { margin: 2px 8px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)); }
    .lg-toc nav[b-r5ro6am63b] { display: flex; flex-direction: column; gap: 2px; }
    .lg-toc nav a[b-r5ro6am63b] {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 9px; border-radius: 9px;
        color: var(--zit-muted); font-size: .88rem; font-weight: 500; line-height: 1.25;
        text-decoration: none; transition: background .15s ease, color .15s ease;
    }
    .lg-toc nav a:hover[b-r5ro6am63b] { background: var(--zit-primary-soft); color: var(--zit-primary); }
    .lg-toc-n[b-r5ro6am63b] { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--zit-bg); color: var(--zit-navy); font-size: .74rem; font-weight: 700; }
    .lg-toc nav a:hover .lg-toc-n[b-r5ro6am63b] { background: var(--zit-white); color: var(--zit-primary); }
    .lg-toc-home[b-r5ro6am63b] {
        display: inline-flex; align-items: center; gap: 6px;
        margin: 12px 8px 2px; padding-top: 12px;
        border-top: 1px solid var(--zit-border);
        color: var(--zit-primary); font-size: .82rem; font-weight: 600; text-decoration: none;
    }
    .lg-toc-home svg[b-r5ro6am63b] { width: 15px; height: 15px; }
    .lg-toc-home:hover[b-r5ro6am63b] { color: var(--zit-primary-hover); }
}
/* /Components/Pages/Blog.razor.rz.scp.css */
.blog[b-cs2wdz8k9i] {
    font-family: Poppins, system-ui, sans-serif;
    color: var(--zit-navy, #1E1B4B);
}

/* Hero: gradiente navy FIJO con texto claro fijo — funciona igual en ambos modos, no se tokeniza. */
.blog-hero[b-cs2wdz8k9i] {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 64px 20px 56px;
    background: linear-gradient(135deg, #1E1B4B 0%, #4F46E5 100%);
    color: #fff;
    border-radius: 18px;
    margin: 8px 0 36px;
}
.blog-hero-bg[b-cs2wdz8k9i] {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.blog-hero[b-cs2wdz8k9i]::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(30,27,75,.90) 0%, rgba(79,70,229,.72) 100%);
}
.blog-hero-inner[b-cs2wdz8k9i] { position: relative; z-index: 2; }
.blog-eyebrow[b-cs2wdz8k9i] {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #F59E0B;
    margin-bottom: 12px;
}
.blog-h1[b-cs2wdz8k9i] {
    font-size: clamp(1.7rem, 4.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 auto;
    max-width: 14ch;
}
.blog-lead[b-cs2wdz8k9i] {
    color: rgba(255, 255, 255, .85);
    max-width: 60ch;
    margin: 14px auto 0;
    font-size: clamp(.95rem, 2.2vw, 1.08rem);
    line-height: 1.55;
}

/* Lista de artículos */
.blog-list[b-cs2wdz8k9i] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 40px;
}
@media (min-width: 640px) {
    .blog-list[b-cs2wdz8k9i] { grid-template-columns: 1fr 1fr; }
}

.blog-card[b-cs2wdz8k9i] {
    border: 1px solid var(--zit-border, #E5E7EB);
    border-radius: 14px;
    background: var(--zit-white);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover[b-cs2wdz8k9i] {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(30, 27, 75, .12);
    border-color: var(--zit-primary, #4F46E5);
}
.blog-card-link[b-cs2wdz8k9i] {
    display: block;
    padding: 22px 22px 20px;
    text-decoration: none;
    color: inherit;
}
.blog-card-title[b-cs2wdz8k9i] {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 12px 0 8px;
    color: var(--zit-navy, #1E1B4B);
}
.blog-card-sum[b-cs2wdz8k9i] {
    font-size: .94rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white));
    margin: 0;
}
.blog-card-meta[b-cs2wdz8k9i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: .82rem;
    color: var(--zit-muted);
}

/* Etiqueta de categoría (compartida) */
.blog-tag[b-cs2wdz8k9i] {
    display: inline-block;
    background: var(--zit-primary-soft);
    color: var(--zit-primary, #4F46E5);
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
}
.blog-dot[b-cs2wdz8k9i] { color: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)); }

/* Cierre */
.blog-bottom[b-cs2wdz8k9i] {
    text-align: center;
    padding: 40px 20px;
    background: color-mix(in srgb, var(--zit-white) 40%, var(--zit-bg));
    border: 1px solid var(--zit-border, #E5E7EB);
    border-radius: 16px;
    margin-bottom: 16px;
}
.blog-bottom-h[b-cs2wdz8k9i] {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    margin: 0 0 8px;
}
.blog-bottom-p[b-cs2wdz8k9i] {
    color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white));
    margin: 0 auto 20px;
    max-width: 52ch;
}
.blog-bottom-btn[b-cs2wdz8k9i] {
    display: inline-block;
    background: var(--zit-amber, #F59E0B);
    color: #1E1B4B; /* tinta fija sobre ámbar: var(--zit-navy) sería casi blanca en oscuro */
    font-weight: 600;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 12px;
    transition: filter .15s ease;
}
.blog-bottom-btn:hover[b-cs2wdz8k9i] { filter: brightness(.96); }
/* /Components/Pages/BlogPost.razor.rz.scp.css */
.blog-article[b-r0mi7o6j1j] {
    font-family: Poppins, system-ui, sans-serif;
    color: var(--zit-navy, #1E1B4B);
    max-width: 720px;
    margin: 0 auto;
}

/* Migas de pan */
.blog-crumbs[b-r0mi7o6j1j] {
    font-size: .82rem;
    color: var(--zit-muted);
    margin: 8px 0 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.blog-crumbs a[b-r0mi7o6j1j] { color: var(--zit-primary, #4F46E5); text-decoration: none; }
.blog-crumbs a:hover[b-r0mi7o6j1j] { text-decoration: underline; }
.blog-crumbs span[b-r0mi7o6j1j] { color: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)); }

/* Cabecera */
.blog-article-head[b-r0mi7o6j1j] { margin-bottom: 28px; }
.blog-tag[b-r0mi7o6j1j] {
    display: inline-block;
    background: var(--zit-primary-soft);
    color: var(--zit-primary, #4F46E5);
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
}
.blog-article-h1[b-r0mi7o6j1j] {
    font-size: clamp(1.7rem, 4.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.18;
    margin: 14px 0 10px;
}
.blog-article-lead[b-r0mi7o6j1j] {
    font-size: 1.1rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white));
    margin: 0 0 14px;
}
.blog-article-meta[b-r0mi7o6j1j] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--zit-muted);
}
.blog-dot[b-r0mi7o6j1j] { color: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)); }

/* Cuerpo */
.blog-body[b-r0mi7o6j1j] {
    font-size: 1.06rem;
    line-height: 1.72;
    color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white));
}
.blog-body h2[b-r0mi7o6j1j] {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--zit-navy, #1E1B4B);
    margin: 36px 0 14px;
    line-height: 1.25;
}
.blog-body p[b-r0mi7o6j1j] { margin: 0 0 18px; }
.blog-body ul[b-r0mi7o6j1j] {
    margin: 0 0 18px;
    padding-left: 22px;
}
.blog-body li[b-r0mi7o6j1j] { margin-bottom: 8px; }
.blog-body strong[b-r0mi7o6j1j] { color: var(--zit-navy, #1E1B4B); font-weight: 600; }

/* Destacado */
.blog-tip[b-r0mi7o6j1j] {
    background: var(--zit-amber-soft);
    border-left: 4px solid var(--zit-amber, #F59E0B);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 24px 0;
    font-size: 1rem;
    line-height: 1.6;
    /* patrón .lp-pill--ok de Landing: tinta ámbar-navy que aclara en oscuro */
    color: color-mix(in srgb, var(--zit-amber) 55%, var(--zit-navy));
}

/* Llamado a la acción: gradiente navy FIJO con texto claro fijo — funciona igual en ambos modos. */
.blog-cta[b-r0mi7o6j1j] {
    text-align: center;
    background: linear-gradient(135deg, #1E1B4B 0%, #4F46E5 100%);
    color: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    margin: 36px 0 8px;
}
.blog-cta p[b-r0mi7o6j1j] {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0 0 18px;
    color: #fff;
}
.blog-cta-btn[b-r0mi7o6j1j] {
    display: inline-block;
    background: var(--zit-amber, #F59E0B);
    color: #1E1B4B; /* tinta fija sobre ámbar: var(--zit-navy) sería casi blanca en oscuro */
    font-weight: 600;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 12px;
    transition: filter .15s ease;
}
.blog-cta-btn:hover[b-r0mi7o6j1j] { filter: brightness(.96); }

/* Relacionados */
.blog-related[b-r0mi7o6j1j] {
    margin-top: 44px;
    border-top: 1px solid var(--zit-border, #E5E7EB);
    padding-top: 28px;
}
.blog-related-h[b-r0mi7o6j1j] {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 18px;
}
.blog-related-grid[b-r0mi7o6j1j] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 560px) {
    .blog-related-grid[b-r0mi7o6j1j] { grid-template-columns: 1fr 1fr; }
}
.blog-related-card[b-r0mi7o6j1j] {
    display: block;
    border: 1px solid var(--zit-border, #E5E7EB);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--zit-navy, #1E1B4B);
    transition: border-color .15s ease, transform .15s ease;
}
.blog-related-card:hover[b-r0mi7o6j1j] {
    border-color: var(--zit-primary, #4F46E5);
    transform: translateY(-2px);
}
.blog-related-title[b-r0mi7o6j1j] {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 8px;
}

/* No encontrado */
.blog-missing[b-r0mi7o6j1j] { text-align: center; padding: 48px 20px; }
.blog-missing h1[b-r0mi7o6j1j] { font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; }
.blog-missing p[b-r0mi7o6j1j] { color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white)); margin-bottom: 22px; }
/* /Components/Pages/Comparativa.razor.rz.scp.css */
/* Comparativa pública Zitoria vs. competencia. Marca Zitoria: índigo (--zit-primary),
   ámbar (--zit-amber), azul noche (--zit-navy). Mobile-first, sin librerías externas.
   La columna de Zitoria va promovida; la primera columna (funciones) queda fija al hacer
   scroll horizontal de la tabla.
   MODO OSCURO: superficies y tintas por tokens var(--zit-*) (se invierten con .zit-dark);
   las tintas de color sobre fondos -soft van con color-mix sobre var(--zit-navy) para
   aclararse en oscuro. El hero y el cierre (gradiente índigo fijo + texto blanco fijo)
   se ven igual en ambos modos, como el hero de la landing. */

.cmp[b-pu5iu0h27a] {
    font-family: Poppins, 'Segoe UI', sans-serif;
    color: var(--zit-navy);
    --amber-ink: color-mix(in srgb, var(--zit-amber) 45%, var(--zit-navy));
    --partial: color-mix(in srgb, var(--zit-amber) 55%, var(--zit-navy));
    --partial-soft: var(--zit-amber-soft);
    --none: color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white));
    /* Neutros derivados: chip "no", bordes finos y fondos de encabezado de la tabla. */
    --chip-muted: color-mix(in srgb, var(--zit-border) 55%, var(--zit-white));
    --line-soft: color-mix(in srgb, var(--zit-border) 55%, var(--zit-white));
    --head-bg: color-mix(in srgb, var(--zit-white) 50%, var(--zit-bg));
    line-height: 1.5;
}

.cmp-eyebrow[b-pu5iu0h27a] {
    display: inline-block;
    background: rgba(245, 158, 11, .2);
    color: var(--partial);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 13px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.cmp-eyebrow--dark[b-pu5iu0h27a] { background: var(--zit-primary-soft); color: var(--zit-primary); }

.cmp-h2[b-pu5iu0h27a] { font-size: clamp(1.5rem, 3.6vw, 2.15rem); font-weight: 800; letter-spacing: -.015em; text-wrap: balance; margin: 0 0 10px; color: var(--zit-navy); }
.cmp-lead[b-pu5iu0h27a] { max-width: 64ch; color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white)); font-size: 1.03rem; margin: 0 0 26px; }

/* ---------- Botones ---------- */
.cmp-btn[b-pu5iu0h27a] { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; padding: 13px 24px; border-radius: 12px; text-decoration: none; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.cmp-btn:active[b-pu5iu0h27a] { transform: translateY(1px); }
/* Tinta FIJA sobre ámbar: var(--zit-navy) en oscuro es casi blanca y quedaba ilegible. */
.cmp-btn--amber[b-pu5iu0h27a] { background: var(--zit-amber); color: #1E1B4B; box-shadow: 0 10px 24px -8px rgba(245, 158, 11, .6); }
.cmp-btn--amber:hover[b-pu5iu0h27a] { background: #e8920a; }
.cmp-btn--primary[b-pu5iu0h27a] { background: var(--zit-primary); color: #fff; box-shadow: 0 10px 24px -8px rgba(79, 70, 229, .55); }
.cmp-btn--primary:hover[b-pu5iu0h27a] { background: var(--zit-primary-hover); }
.cmp-btn--ghost[b-pu5iu0h27a] { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); }
.cmp-btn--ghost:hover[b-pu5iu0h27a] { background: rgba(255, 255, 255, .2); }

/* ---------- Hero (gradiente índigo FIJO: igual en claro y oscuro) ---------- */
.cmp-hero[b-pu5iu0h27a] {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    margin: 8px 0 40px;
    padding: clamp(34px, 6vw, 64px) clamp(20px, 5vw, 56px);
    background: linear-gradient(135deg, #312E81 0%, #4F46E5 55%, #6C63C7 100%);
    color: #fff;
}
.cmp-halo[b-pu5iu0h27a] { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.cmp-halo--a[b-pu5iu0h27a] { width: 320px; height: 320px; background: #6366F1; top: -120px; right: -80px; }
.cmp-halo--b[b-pu5iu0h27a] { width: 260px; height: 260px; background: #F59E0B; bottom: -140px; left: -60px; opacity: .35; }
.cmp-hero-in[b-pu5iu0h27a] { position: relative; max-width: 40rem; }
.cmp-hero-logo[b-pu5iu0h27a] { margin-bottom: 20px; }
.cmp-hero .cmp-eyebrow[b-pu5iu0h27a] { background: rgba(245, 158, 11, .22); color: #FCD9A0; }
.cmp-h1[b-pu5iu0h27a] { font-size: clamp(2rem, 6vw, 3.15rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; }
.cmp-sub[b-pu5iu0h27a] { font-size: clamp(1.02rem, 2.3vw, 1.2rem); color: #E7E6FB; max-width: 44ch; margin: 0 0 26px; }
.cmp-cta-row[b-pu5iu0h27a] { display: flex; flex-wrap: wrap; gap: 13px; }
.cmp-cta-row--center[b-pu5iu0h27a] { justify-content: center; }
.cmp-trust[b-pu5iu0h27a] { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 22px 0 0; color: #CFCDF0; font-size: .92rem; font-weight: 500; }
.cmp-trust li[b-pu5iu0h27a] { position: relative; padding-left: 18px; }
.cmp-trust li[b-pu5iu0h27a]::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--zit-amber); }

/* ---------- Batería de productos ---------- */
.cmp-battery-sec[b-pu5iu0h27a] { margin: 0 0 48px; }
.cmp-battery[b-pu5iu0h27a] { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.cmp-prod[b-pu5iu0h27a] { background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px; padding: 20px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cmp-prod:hover[b-pu5iu0h27a] { transform: translateY(-4px); border-color: var(--zit-primary); box-shadow: 0 16px 32px -18px rgba(79, 70, 229, .45); }
.cmp-prod-ico[b-pu5iu0h27a] { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--zit-primary-soft); color: var(--zit-primary); margin-bottom: 12px; }
.cmp-prod h3[b-pu5iu0h27a] { font-size: 1.04rem; font-weight: 700; margin: 0 0 5px; color: var(--zit-navy); }
.cmp-prod-plan[b-pu5iu0h27a] { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--zit-primary); background: var(--zit-primary-soft); border-radius: 999px; padding: 2px 9px; margin: 0 0 7px; }
.cmp-prod p[b-pu5iu0h27a] { font-size: .92rem; color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white)); margin: 0; line-height: 1.45; }
.cmp-battery-cta[b-pu5iu0h27a] { margin-top: 26px; text-align: center; }

/* ---------- Tabla ---------- */
.cmp-table-sec[b-pu5iu0h27a] { margin: 0 0 44px; }
.cmp-legend[b-pu5iu0h27a] { display: flex; flex-wrap: wrap; gap: 9px 20px; align-items: center; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 14px; padding: 13px 16px; margin-bottom: 18px; font-size: .88rem; color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white)); }
.cmp-legend > span[b-pu5iu0h27a] { display: inline-flex; align-items: center; gap: 8px; }
.cmp-dot[b-pu5iu0h27a] { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 800; flex: none; }
.cmp-dot--yes[b-pu5iu0h27a] { background: var(--zit-success-soft); color: color-mix(in srgb, var(--zit-success) 55%, var(--zit-navy)); }
.cmp-dot--partial[b-pu5iu0h27a] { background: var(--partial-soft); color: var(--partial); }
.cmp-dot--no[b-pu5iu0h27a] { background: var(--chip-muted); color: var(--none); }
.cmp-dot--crown[b-pu5iu0h27a] { background: var(--zit-amber-soft); color: var(--amber-ink); }

.cmp-table-wrap[b-pu5iu0h27a] {
    overflow-x: auto;
    border: 1px solid var(--zit-border);
    border-radius: 18px;
    background: var(--zit-white);
    box-shadow: 0 18px 40px -30px rgba(49, 46, 129, .5);
    -webkit-overflow-scrolling: touch;
}
.cmp-table[b-pu5iu0h27a] { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; }

/* Encabezados de columna */
.cmp-col[b-pu5iu0h27a] { background: var(--head-bg); padding: 15px 8px 13px; border-bottom: 1px solid var(--zit-border); text-align: center; vertical-align: bottom; min-width: 104px; }
.cmp-col-name[b-pu5iu0h27a] { display: block; font-weight: 700; font-size: .98rem; color: color-mix(in srgb, var(--zit-navy) 76%, var(--zit-white)); }
.cmp-col-price[b-pu5iu0h27a] { display: block; font-weight: 600; font-size: .72rem; color: var(--zit-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.cmp-col-price small[b-pu5iu0h27a] { display: block; font-weight: 500; }

/* Columna Zitoria promovida: gradiente índigo fijo hacia navy, texto blanco fijo. */
.cmp-col--z[b-pu5iu0h27a] { position: relative; background: linear-gradient(180deg, var(--zit-primary) 0%, #312E81 100%); border-bottom: 1px solid #312E81; }
.cmp-col--z .cmp-col-name[b-pu5iu0h27a] { color: #fff; font-size: 1.12rem; font-weight: 800; }
.cmp-col--z .cmp-col-price[b-pu5iu0h27a] { color: #CFE0FF; }
.cmp-ribbon[b-pu5iu0h27a] { display: inline-block; background: var(--zit-amber); color: #3a2a06; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }

/* Primera columna (funciones), fija al hacer scroll */
.cmp-feat[b-pu5iu0h27a] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--zit-white);
    text-align: left;
    padding: 13px 16px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--zit-navy);
    border-bottom: 1px solid var(--line-soft);
    min-width: 208px;
    width: 34%;
}
.cmp-feat small[b-pu5iu0h27a] { display: block; font-weight: 500; color: var(--zit-muted); font-size: .78rem; margin-top: 2px; }
.cmp-feat--head[b-pu5iu0h27a] { z-index: 5; background: var(--head-bg); border-bottom: 1px solid var(--zit-border); color: color-mix(in srgb, var(--zit-navy) 76%, var(--zit-white)); vertical-align: bottom; }

/* Filas de grupo */
.cmp-group td[b-pu5iu0h27a] {
    position: sticky;
    left: 0;
    background: color-mix(in srgb, var(--zit-white) 70%, var(--zit-bg));
    padding: 11px 16px;
    border-top: 1px solid var(--zit-border);
    border-bottom: 1px solid var(--zit-border);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--zit-primary);
}

/* Celdas de datos */
.cmp-cell[b-pu5iu0h27a] { text-align: center; padding: 11px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.cmp-cell--z[b-pu5iu0h27a] { background: var(--zit-primary-soft); border-bottom: 1px solid color-mix(in srgb, var(--zit-primary) 18%, var(--zit-white)); }
tbody tr:hover .cmp-cell[b-pu5iu0h27a] { background: color-mix(in srgb, var(--zit-white) 92%, var(--zit-primary)); }
tbody tr:hover .cmp-cell--z[b-pu5iu0h27a] { background: color-mix(in srgb, var(--zit-primary) 22%, var(--zit-white)); }
tbody tr:hover .cmp-feat[b-pu5iu0h27a] { background: color-mix(in srgb, var(--zit-white) 92%, var(--zit-primary)); }

.cmp-mk[b-pu5iu0h27a] { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; font-size: .95rem; font-weight: 800; }
.cmp-mk--yes[b-pu5iu0h27a] { background: var(--zit-success-soft); color: color-mix(in srgb, var(--zit-success) 55%, var(--zit-navy)); }
.cmp-mk--partial[b-pu5iu0h27a] { background: var(--partial-soft); color: var(--partial); }
.cmp-mk--no[b-pu5iu0h27a] { background: var(--chip-muted); color: var(--none); }
.cmp-mk--crown[b-pu5iu0h27a] { background: var(--zit-amber-soft); color: var(--amber-ink); }
.cmp-cell--z .cmp-mk--yes[b-pu5iu0h27a] { background: var(--zit-white); color: var(--zit-primary); box-shadow: 0 1px 3px rgba(49, 46, 129, .18); }
.cmp-cell--z .cmp-mk--crown[b-pu5iu0h27a] { background: var(--zit-white); color: var(--amber-ink); box-shadow: 0 1px 3px rgba(245, 158, 11, .28); }
.cmp-note[b-pu5iu0h27a] { display: block; font-size: .68rem; line-height: 1.2; color: var(--partial); font-weight: 600; margin-top: 4px; }
.cmp-cell--z .cmp-note[b-pu5iu0h27a] { color: var(--zit-primary); }
.cmp-mk-text[b-pu5iu0h27a] { font-weight: 700; font-size: .9rem; color: var(--zit-navy); }
.cmp-cell--z .cmp-mk-text[b-pu5iu0h27a] { color: var(--zit-primary); }

.cmp-fine[b-pu5iu0h27a] { margin: 16px 2px 0; font-size: .76rem; color: var(--zit-muted); line-height: 1.55; }

/* ---------- 3 diferencias ---------- */
.cmp-diffs-sec[b-pu5iu0h27a] { margin: 0 0 44px; }
.cmp-diffs[b-pu5iu0h27a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.cmp-diff[b-pu5iu0h27a] { position: relative; overflow: hidden; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 18px; padding: 24px 22px; }
.cmp-diff[b-pu5iu0h27a]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--zit-primary); }
.cmp-diff-k[b-pu5iu0h27a] { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: 8px; }
.cmp-diff h3[b-pu5iu0h27a] { font-size: 1.14rem; font-weight: 800; color: var(--zit-navy); margin: 0 0 7px; letter-spacing: -.01em; }
.cmp-diff p[b-pu5iu0h27a] { font-size: .95rem; color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white)); margin: 0; line-height: 1.5; }

/* ---------- Cierre (gradiente índigo FIJO, como el hero) ---------- */
.cmp-final[b-pu5iu0h27a] { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(40px, 6vw, 64px) 24px; text-align: center; background: linear-gradient(135deg, #312E81, #4F46E5); color: #fff; }
.cmp-final-in[b-pu5iu0h27a] { position: relative; max-width: 40rem; margin: 0 auto; }
.cmp-final-in .cmp-hero-logo[b-pu5iu0h27a] { display: flex; justify-content: center; }
.cmp-final-h[b-pu5iu0h27a] { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin: 4px 0 12px; text-wrap: balance; }
.cmp-final-p[b-pu5iu0h27a] { color: #E7E6FB; font-size: 1.06rem; margin: 0 0 24px; }
.cmp-final-note[b-pu5iu0h27a] { color: #CFCDF0; font-size: .9rem; margin: 16px 0 0; }

/* ---------- CTA sticky (móvil) ---------- */
.cmp-sticky[b-pu5iu0h27a] { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; align-items: center; justify-content: center; gap: 14px; background: var(--zit-white); border-top: 1px solid var(--zit-border); box-shadow: 0 -6px 24px rgba(30, 27, 75, .16); padding: 11px 16px; padding-bottom: calc(11px + env(safe-area-inset-bottom)); }
.cmp-sticky-txt[b-pu5iu0h27a] { font-size: .98rem; color: var(--zit-navy); }
.cmp-sticky-btn[b-pu5iu0h27a] { padding: 11px 22px; font-size: .96rem; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .cmp-hero[b-pu5iu0h27a] { border-radius: 18px; }
    .cmp-feat[b-pu5iu0h27a] { min-width: 168px; width: 46%; font-size: .86rem; padding: 11px 12px; }
    .cmp-col[b-pu5iu0h27a], .cmp-col--z[b-pu5iu0h27a] { min-width: 92px; }
    .cmp-col--z .cmp-col-name[b-pu5iu0h27a] { font-size: 1rem; }
    .cmp-sticky[b-pu5iu0h27a] { display: flex; }
    .cmp-sticky-txt[b-pu5iu0h27a] { display: none; }
    .cmp-sticky-btn[b-pu5iu0h27a] { width: 100%; }
    .cmp-final[b-pu5iu0h27a] { padding-bottom: 96px; }
}
/* /Components/Pages/Conecta.razor.rz.scp.css */
/* Página pública de Zitoria Conecta (para marcas/proveedores). Tokens --zit-* + Poppins. */
.cn[b-bs0vb3anr4] { font-family: 'Poppins', 'Segoe UI', sans-serif; color: var(--zit-navy); }

.cn-h1[b-bs0vb3anr4] { font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.1; margin: 0 0 14px; }
.cn-h2[b-bs0vb3anr4] { font-weight: 700; font-size: clamp(1.4rem, 4vw, 1.9rem); text-align: center; margin: 0 0 22px; }
.cn-lead[b-bs0vb3anr4] { font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.55; color: color-mix(in srgb, var(--zit-navy) 76%, var(--zit-white)); }

/* Hero: fondo oscuro FIJO (gradiente navy→índigo + texto blanco fijo),
   funciona igual en ambos modos. */
.cn-hero[b-bs0vb3anr4] {
    position: relative; overflow: hidden; border-radius: 22px; padding: 64px 28px;
    color: #fff; text-align: center; box-shadow: 0 24px 60px rgba(30,27,75,.35);
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 60%, #4F46E5 130%);
}
/* Foto de fondo a sangre con degradado oscuro para legibilidad del texto. */
.cn-hero-bg[b-bs0vb3anr4] {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.cn-hero[b-bs0vb3anr4]::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(30,27,75,.92) 0%, rgba(49,46,129,.80) 55%, rgba(79,70,229,.66) 130%);
}
.cn-hero-inner[b-bs0vb3anr4] { position: relative; z-index: 2; }
.cn-hero .cn-h1[b-bs0vb3anr4] { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.cn-hero .cn-lead[b-bs0vb3anr4] { max-width: 640px; margin: 0 auto; color: rgba(255,255,255,.9); }
/* Tinta FIJA #FEF3C7: va sobre el hero oscuro fijo; var(--zit-amber-soft)
   en modo oscuro es rgba al 16% (pensada para FONDOS) y el texto desaparece. */
.cn-eyebrow[b-bs0vb3anr4] {
    display: inline-block; background: rgba(245,158,11,.22); color: #FEF3C7;
    font-size: .82rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.cn-eyebrow--dark[b-bs0vb3anr4] { background: var(--zit-primary-soft); color: var(--zit-primary); }
.cn-btn--ghost[b-bs0vb3anr4] { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.cn-btn--ghost:hover[b-bs0vb3anr4] { background: rgba(255,255,255,.16); }

/* Banda de prueba social / cifras. */
.cn-proof[b-bs0vb3anr4] {
    display: grid; grid-template-columns: 1fr; gap: 10px; text-align: center;
    margin: 26px 0 4px; padding: 22px 18px;
    background: var(--zit-primary-soft); border-radius: 16px;
}
.cn-stat-n[b-bs0vb3anr4] { display: block; font-size: 1.9rem; font-weight: 700; color: var(--zit-primary); line-height: 1; }
.cn-stat-l[b-bs0vb3anr4] { display: block; font-size: .9rem; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); margin-top: 4px; }

/* Banda destacada con imagen. */
.cn-feature[b-bs0vb3anr4] {
    display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center;
    margin-top: 46px;
}
.cn-feature-media img[b-bs0vb3anr4] {
    width: 100%; height: auto; border-radius: 18px; display: block;
    box-shadow: 0 18px 44px rgba(30,27,75,.18);
}
.cn-feature-h[b-bs0vb3anr4] { font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 1.8rem); margin: 10px 0 12px; line-height: 1.15; }
.cn-checks[b-bs0vb3anr4] { list-style: none; padding: 0; margin: 16px 0 0; }
.cn-checks li[b-bs0vb3anr4] { position: relative; padding: 6px 0 6px 28px; color: color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white)); font-size: .98rem; }
.cn-checks li[b-bs0vb3anr4]::before {
    content: "✓"; position: absolute; left: 0; top: 6px; color: var(--zit-primary);
    font-weight: 700;
}

/* Banda de socios / partnership a sangre. */
.cn-partners[b-bs0vb3anr4] {
    position: relative; overflow: hidden; border-radius: 22px; margin-top: 50px;
    padding: 56px 26px; text-align: center; color: #fff;
}
.cn-partners-bg[b-bs0vb3anr4] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cn-partners[b-bs0vb3anr4]::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(30,27,75,.88) 0%, rgba(49,46,129,.78) 100%);
}
.cn-partners-inner[b-bs0vb3anr4] { position: relative; z-index: 2; }

.cn-cta[b-bs0vb3anr4] { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.cn-btn[b-bs0vb3anr4] {
    display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 10px;
    font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.cn-btn:hover[b-bs0vb3anr4] { transform: translateY(-2px); }
/* Tinta FIJA #1E1B4B sobre ámbar: var(--zit-navy) se vuelve casi blanca en oscuro. */
.cn-btn--amber[b-bs0vb3anr4] { background: var(--zit-amber); color: #1E1B4B; box-shadow: 0 8px 20px rgba(245,158,11,.35); }
.cn-btn--outline[b-bs0vb3anr4] { background: transparent; color: var(--zit-primary); border: 2px solid var(--zit-primary); }
.cn-btn--outline:hover[b-bs0vb3anr4] { background: var(--zit-primary-soft); }

.cn-sec[b-bs0vb3anr4] { padding: 46px 0 8px; }

.cn-cards[b-bs0vb3anr4] { display: grid; grid-template-columns: 1fr; gap: 16px; }
.cn-card[b-bs0vb3anr4] { background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px; padding: 22px 20px; box-shadow: 0 6px 18px rgba(0,0,0,.04); }
.cn-card h3[b-bs0vb3anr4] { margin: 8px 0 6px; font-size: 1.06rem; }
.cn-card p[b-bs0vb3anr4] { margin: 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .95rem; line-height: 1.5; }
.cn-ic[b-bs0vb3anr4] { font-size: 1.7rem; line-height: 1; }

.cn-formlead[b-bs0vb3anr4] { text-align: center; color: var(--zit-muted); margin: 0 0 20px; }
.cn-thanks[b-bs0vb3anr4] { text-align: center; max-width: 560px; margin: 0 auto; }

@media (min-width: 720px) {
    .cn-cards[b-bs0vb3anr4] { grid-template-columns: repeat(3, 1fr); }
    .cn-hero[b-bs0vb3anr4] { padding: 84px 40px; }
    .cn-proof[b-bs0vb3anr4] { grid-template-columns: repeat(3, 1fr); }
    .cn-feature[b-bs0vb3anr4] { grid-template-columns: 1.05fr 1fr; gap: 40px; }
    .cn-partners[b-bs0vb3anr4] { padding: 72px 40px; }
}
/* /Components/Pages/ProgramaAfiliados.razor.rz.scp.css */
/* Página pública del Programa de Afiliados. Lenguaje visual de la landing
   (Poppins + tokens --zit-*), pero con clases propias (CSS isolation). */
.pa[b-p0ir3tmptg] { font-family: 'Poppins', 'Segoe UI', sans-serif; color: var(--zit-navy); }

.pa-h1[b-p0ir3tmptg] { font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.1; margin: 0 0 14px; }
.pa-h2[b-p0ir3tmptg] { font-weight: 700; font-size: clamp(1.4rem, 4vw, 1.9rem); text-align: center; margin: 0 0 24px; }
.pa-lead[b-p0ir3tmptg] { font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.55; color: color-mix(in srgb, var(--zit-navy) 76%, var(--zit-white)); }

/* Hero: tarjeta oscura redondeada con foto a sangre. Fondo oscuro FIJO
   (gradiente navy→índigo + texto blanco fijo): funciona igual en ambos modos. */
.pa-hero[b-p0ir3tmptg] {
    position: relative; overflow: hidden; border-radius: 22px; padding: 64px 28px;
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 60%, #4F46E5 130%);
    color: #fff; text-align: center; box-shadow: 0 24px 60px rgba(30,27,75,.35);
}
.pa-hero-bg[b-p0ir3tmptg] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pa-hero[b-p0ir3tmptg]::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(30,27,75,.90) 0%, rgba(49,46,129,.80) 55%, rgba(79,70,229,.66) 130%);
}
.pa-hero-inner[b-p0ir3tmptg] { position: relative; z-index: 2; }
.pa-hero .pa-h1[b-p0ir3tmptg], .pa-hero .pa-lead[b-p0ir3tmptg] { color: #fff; }
.pa-hero .pa-h1[b-p0ir3tmptg] { text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.pa-hero .pa-lead[b-p0ir3tmptg] { max-width: 640px; margin: 0 auto; color: rgba(255,255,255,.9); }
/* Tinta FIJA #FEF3C7: va sobre el hero oscuro fijo; var(--zit-amber-soft)
   en modo oscuro es rgba al 16% (pensada para FONDOS) y el texto desaparece. */
.pa-eyebrow[b-p0ir3tmptg] {
    display: inline-block; background: rgba(245,158,11,.22); color: #FEF3C7;
    font-size: .82rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.pa-eyebrow--dark[b-p0ir3tmptg] { background: var(--zit-primary-soft); color: var(--zit-primary); }

/* Banda destacada: comparte tu enlace (texto + imagen). */
.pa-feature[b-p0ir3tmptg] {
    display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
    margin-top: 46px;
}
.pa-feature-media img[b-p0ir3tmptg] {
    width: 100%; height: auto; max-height: 460px; object-fit: cover;
    border-radius: 18px; display: block; box-shadow: 0 18px 44px rgba(30,27,75,.18);
}
.pa-feature-h[b-p0ir3tmptg] { font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 1.8rem); margin: 10px 0 12px; line-height: 1.15; }

.pa-cta[b-p0ir3tmptg] { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.pa-btn[b-p0ir3tmptg] {
    display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 10px;
    font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s;
}
.pa-btn:hover[b-p0ir3tmptg] { transform: translateY(-2px); }
/* Tinta FIJA #1E1B4B sobre ámbar: var(--zit-navy) se vuelve casi blanca en oscuro. */
.pa-btn--amber[b-p0ir3tmptg] { background: var(--zit-amber); color: #1E1B4B; box-shadow: 0 8px 20px rgba(245,158,11,.35); }
.pa-btn--ghost[b-p0ir3tmptg] { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.pa-btn--outline[b-p0ir3tmptg] { background: transparent; color: var(--zit-primary); border: 2px solid var(--zit-primary); }
.pa-btn--outline:hover[b-p0ir3tmptg] { background: var(--zit-primary-soft); }

.pa-sec[b-p0ir3tmptg] { padding: 46px 0 8px; }

/* Pasos. */
.pa-steps[b-p0ir3tmptg] { display: grid; grid-template-columns: 1fr; gap: 18px; }
.pa-step[b-p0ir3tmptg] {
    position: relative; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px;
    padding: 22px 20px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.pa-step h3[b-p0ir3tmptg] { margin: 10px 0 6px; font-size: 1.08rem; }
.pa-step p[b-p0ir3tmptg] { margin: 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .95rem; line-height: 1.5; }
.pa-num[b-p0ir3tmptg] {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 50%; background: var(--zit-primary-soft); color: var(--zit-primary); font-weight: 700; font-size: 1.1rem;
}

/* Niveles. */
.pa-tiers[b-p0ir3tmptg] { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pa-tier[b-p0ir3tmptg] {
    position: relative; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px;
    padding: 24px 20px; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.pa-tier h3[b-p0ir3tmptg] { margin: 6px 0 4px; font-size: 1.1rem; }
.pa-tier p[b-p0ir3tmptg] { margin: 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .92rem; }
.pa-rate[b-p0ir3tmptg] { font-weight: 700; font-size: 2.4rem; color: var(--zit-primary); line-height: 1; }
.pa-tier--top[b-p0ir3tmptg] { border: 2px solid var(--zit-amber); background: linear-gradient(180deg, var(--zit-white), var(--zit-amber-soft)); }
.pa-tier--top .pa-rate[b-p0ir3tmptg] { color: color-mix(in srgb, var(--zit-amber) 55%, var(--zit-navy)); }
.pa-badge[b-p0ir3tmptg] {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--zit-amber); color: #1E1B4B; font-size: .72rem; font-weight: 700; /* tinta fija sobre ámbar */
    padding: 4px 12px; border-radius: 999px;
}
.pa-note[b-p0ir3tmptg] { text-align: center; color: var(--zit-muted); font-size: .9rem; margin: 20px auto 0; max-width: 620px; }

/* Cómo se paga. */
.pa-cards[b-p0ir3tmptg] { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pa-card[b-p0ir3tmptg] { background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px; padding: 22px 20px; box-shadow: 0 6px 18px rgba(0,0,0,.04); }
.pa-card h3[b-p0ir3tmptg] { margin: 0 0 8px; font-size: 1.05rem; }
.pa-card p[b-p0ir3tmptg] { margin: 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .95rem; line-height: 1.5; }

/* Cierre. */
.pa-final[b-p0ir3tmptg] { text-align: center; padding: 50px 0 20px; }
.pa-final .pa-lead[b-p0ir3tmptg] { max-width: 540px; margin: 0 auto 6px; }

@media (min-width: 720px) {
    .pa-steps[b-p0ir3tmptg] { grid-template-columns: repeat(2, 1fr); }
    .pa-tiers[b-p0ir3tmptg], .pa-cards[b-p0ir3tmptg] { grid-template-columns: repeat(3, 1fr); }
    .pa-hero[b-p0ir3tmptg] { padding: 84px 40px; }
    .pa-feature[b-p0ir3tmptg] { grid-template-columns: 1fr 1.1fr; gap: 40px; }
}
@media (min-width: 1000px) {
    .pa-steps[b-p0ir3tmptg] { grid-template-columns: repeat(4, 1fr); }
}
/* /Components/Pages/ProgramaLideres.razor.rz.scp.css */
/* Página pública del Programa de Líderes. Mismo lenguaje visual de la landing del
   afiliado (Poppins + tokens --zit-*), con clases propias (CSS isolation). */
.pl[b-r0fx11w4d6] { font-family: 'Poppins', 'Segoe UI', sans-serif; color: var(--zit-navy); }

.pl-h1[b-r0fx11w4d6] { font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.1; margin: 0 0 14px; }
.pl-h2[b-r0fx11w4d6] { font-weight: 700; font-size: clamp(1.4rem, 4vw, 1.9rem); text-align: center; margin: 0 0 24px; }
.pl-lead[b-r0fx11w4d6] { font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.55; color: color-mix(in srgb, var(--zit-navy) 76%, var(--zit-white)); }

/* Hero: tarjeta oscura redondeada con foto a sangre. Fondo oscuro FIJO
   (gradiente navy→índigo + texto blanco fijo): funciona igual en ambos modos. */
.pl-hero[b-r0fx11w4d6] {
    position: relative; overflow: hidden; border-radius: 22px; padding: 64px 28px;
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 60%, #4F46E5 130%);
    color: #fff; text-align: center; box-shadow: 0 24px 60px rgba(30,27,75,.35);
}
.pl-hero-bg[b-r0fx11w4d6] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pl-hero[b-r0fx11w4d6]::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(30,27,75,.90) 0%, rgba(49,46,129,.80) 55%, rgba(79,70,229,.66) 130%);
}
.pl-hero-inner[b-r0fx11w4d6] { position: relative; z-index: 2; }
.pl-hero .pl-h1[b-r0fx11w4d6], .pl-hero .pl-lead[b-r0fx11w4d6] { color: #fff; }
.pl-hero .pl-h1[b-r0fx11w4d6] { text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.pl-hero .pl-lead[b-r0fx11w4d6] { max-width: 660px; margin: 0 auto; color: rgba(255,255,255,.9); }
/* Tinta FIJA #FEF3C7: va sobre el hero oscuro fijo; var(--zit-amber-soft)
   en modo oscuro es rgba al 16% (pensada para FONDOS) y el texto desaparece. */
.pl-eyebrow[b-r0fx11w4d6] {
    display: inline-block; background: rgba(245,158,11,.22); color: #FEF3C7;
    font-size: .82rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.pl-eyebrow--dark[b-r0fx11w4d6] { background: var(--zit-primary-soft); color: var(--zit-primary); }

/* Banda destacada: construye tu red (texto + imagen). */
.pl-feature[b-r0fx11w4d6] {
    display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
    margin-top: 46px;
}
.pl-feature-media img[b-r0fx11w4d6] {
    width: 100%; height: auto; max-height: 460px; object-fit: cover;
    border-radius: 18px; display: block; box-shadow: 0 18px 44px rgba(30,27,75,.18);
}
.pl-feature-h[b-r0fx11w4d6] { font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 1.8rem); margin: 10px 0 12px; line-height: 1.15; }

.pl-cta[b-r0fx11w4d6] { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.pl-btn[b-r0fx11w4d6] {
    display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 10px;
    font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s;
}
.pl-btn:hover[b-r0fx11w4d6] { transform: translateY(-2px); }
/* Tinta FIJA #1E1B4B sobre ámbar: var(--zit-navy) se vuelve casi blanca en oscuro. */
.pl-btn--amber[b-r0fx11w4d6] { background: var(--zit-amber); color: #1E1B4B; box-shadow: 0 8px 20px rgba(245,158,11,.35); }
.pl-btn--ghost[b-r0fx11w4d6] { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.pl-btn--outline[b-r0fx11w4d6] { background: transparent; color: var(--zit-primary); border: 2px solid var(--zit-primary); }
.pl-btn--outline:hover[b-r0fx11w4d6] { background: var(--zit-primary-soft); }

.pl-sec[b-r0fx11w4d6] { padding: 46px 0 8px; }

/* Pasos. */
.pl-steps[b-r0fx11w4d6] { display: grid; grid-template-columns: 1fr; gap: 18px; }
.pl-step[b-r0fx11w4d6] {
    position: relative; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px;
    padding: 22px 20px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.pl-step h3[b-r0fx11w4d6] { margin: 10px 0 6px; font-size: 1.08rem; }
.pl-step p[b-r0fx11w4d6] { margin: 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .95rem; line-height: 1.5; }
.pl-num[b-r0fx11w4d6] {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 50%; background: var(--zit-primary-soft); color: var(--zit-primary); font-weight: 700; font-size: 1.1rem;
}

/* Tarjetas (pilares de valor / cómo se paga). */
.pl-cards[b-r0fx11w4d6] { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pl-card[b-r0fx11w4d6] { background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px; padding: 22px 20px; box-shadow: 0 6px 18px rgba(0,0,0,.04); }
.pl-card h3[b-r0fx11w4d6] { margin: 0 0 8px; font-size: 1.05rem; }
.pl-card p[b-r0fx11w4d6] { margin: 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .95rem; line-height: 1.5; }

/* Tramos del override. */
.pl-tiers[b-r0fx11w4d6] { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 720px; margin: 0 auto; }
.pl-tier[b-r0fx11w4d6] {
    position: relative; background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 16px;
    padding: 24px 20px; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.pl-tier h3[b-r0fx11w4d6] { margin: 6px 0 4px; font-size: 1.1rem; }
.pl-tier p[b-r0fx11w4d6] { margin: 0; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .92rem; }
.pl-rate[b-r0fx11w4d6] { font-weight: 700; font-size: 2.4rem; color: var(--zit-primary); line-height: 1; }
.pl-tier--top[b-r0fx11w4d6] { border: 2px solid var(--zit-amber); background: linear-gradient(180deg, var(--zit-white), var(--zit-amber-soft)); }
.pl-tier--top .pl-rate[b-r0fx11w4d6] { color: color-mix(in srgb, var(--zit-amber) 55%, var(--zit-navy)); }
.pl-badge[b-r0fx11w4d6] {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--zit-amber); color: #1E1B4B; font-size: .72rem; font-weight: 700; /* tinta fija sobre ámbar */
    padding: 4px 12px; border-radius: 999px;
}
.pl-note[b-r0fx11w4d6] { text-align: center; color: var(--zit-muted); font-size: .9rem; margin: 20px auto 0; max-width: 680px; }

/* Prueba social: cita + estadísticas. La cita es una tarjeta oscura FIJA
   (gradiente navy + texto blanco/ámbar pálido fijos): sirve en ambos modos. */
.pl-proof[b-r0fx11w4d6] { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
.pl-quote[b-r0fx11w4d6] {
    margin: 0; background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%); color: #fff;
    border-radius: 16px; padding: 26px 24px; box-shadow: 0 12px 30px rgba(30,27,75,.22);
}
.pl-quote blockquote[b-r0fx11w4d6] { margin: 0 0 12px; font-size: 1.12rem; line-height: 1.5; font-weight: 500; }
.pl-quote figcaption[b-r0fx11w4d6] { color: #FEF3C7; font-size: .9rem; font-weight: 600; } /* tinta fija: amber-soft en oscuro es rgba 16% */
.pl-stats[b-r0fx11w4d6] { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pl-stat[b-r0fx11w4d6] {
    background: var(--zit-white); border: 1px solid var(--zit-border); border-radius: 14px; padding: 16px 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.pl-stat-n[b-r0fx11w4d6] { display: block; font-weight: 700; font-size: 1.25rem; color: var(--zit-primary); }
.pl-stat-l[b-r0fx11w4d6] { display: block; color: color-mix(in srgb, var(--zit-navy) 64%, var(--zit-white)); font-size: .9rem; margin-top: 2px; }

/* Cierre. */
.pl-final[b-r0fx11w4d6] { text-align: center; padding: 50px 0 20px; }
.pl-final .pl-lead[b-r0fx11w4d6] { max-width: 560px; margin: 0 auto 6px; }
.pl-cross[b-r0fx11w4d6] { text-align: center; color: var(--zit-muted); font-size: .92rem; margin: 22px auto 0; }
.pl-cross a[b-r0fx11w4d6] { color: var(--zit-primary); font-weight: 600; }

@media (min-width: 720px) {
    .pl-steps[b-r0fx11w4d6] { grid-template-columns: repeat(2, 1fr); }
    .pl-cards[b-r0fx11w4d6] { grid-template-columns: repeat(2, 1fr); }
    .pl-tiers[b-r0fx11w4d6] { grid-template-columns: repeat(2, 1fr); }
    .pl-hero[b-r0fx11w4d6] { padding: 84px 40px; }
    .pl-feature[b-r0fx11w4d6] { grid-template-columns: 1fr 1.1fr; gap: 40px; }
    .pl-proof[b-r0fx11w4d6] { grid-template-columns: 1.1fr 1fr; }
    .pl-stats[b-r0fx11w4d6] { grid-template-columns: 1fr; }
}
@media (min-width: 1000px) {
    .pl-steps[b-r0fx11w4d6] { grid-template-columns: repeat(4, 1fr); }
    .pl-cards[b-r0fx11w4d6] { grid-template-columns: repeat(4, 1fr); }
}
/* /Components/Pages/RubrosIndex.razor.rz.scp.css */
/* Estilos del índice interactivo de rubros (/rubros). En archivo .razor.css (CSS isolation)
   y no en un <style> inline: la página es interactiva y se re-renderiza al filtrar/buscar;
   un <style> dentro del árbol del componente pierde efecto en los nodos re-renderizados.
   MODO OSCURO: colores por tokens var(--zit-*) (misma estrategia que Landing.razor.css);
   el hero con gradiente navy FIJO y su texto claro se quedan fijos: funcionan en ambos modos. */
.rbx[b-7t7a0tig7n] { --ink:var(--zit-navy); --vio:var(--zit-primary); --org:var(--zit-amber); --soft:var(--zit-bg); color:var(--zit-navy); }
.rbx-hero[b-7t7a0tig7n] { background:linear-gradient(135deg,#272560 0%,#3a378f 52%,#4F46E5 100%); padding:56px 20px 64px; }
.rbx-hero-in[b-7t7a0tig7n] { max-width:860px; margin-inline:auto; text-align:center; }
.rbx-eyebrow[b-7t7a0tig7n] { display:inline-block; color:#ffd9a0; font-weight:600; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px; }
.rbx-h1[b-7t7a0tig7n] { color:#fff; font-size:2.6rem; line-height:1.1; font-weight:800; margin:0 0 14px; letter-spacing:-.015em; }
.rbx-sub[b-7t7a0tig7n] { color:#e6e5fb; font-size:1.12rem; line-height:1.55; margin:0 auto 26px; max-width:48ch; }
.rbx-search[b-7t7a0tig7n] { position:relative; max-width:540px; margin:0 auto; }
.rbx-search-ico[b-7t7a0tig7n] { position:absolute; left:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:color-mix(in srgb, var(--zit-navy) 45%, var(--zit-white)); pointer-events:none; }
.rbx-search-input[b-7t7a0tig7n] { width:100%; box-sizing:border-box; padding:16px 46px 16px 48px; border:0; border-radius:14px; font-size:1.05rem; background:var(--zit-white); color:var(--zit-navy); box-shadow:0 18px 40px rgba(20,18,60,.28); }
.rbx-search-input:focus-visible[b-7t7a0tig7n] { outline:3px solid rgba(245,166,35,.7); outline-offset:1px; }
.rbx-search-input[b-7t7a0tig7n]::-webkit-search-cancel-button { -webkit-appearance:none; }
.rbx-search-clear[b-7t7a0tig7n] { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:30px; height:30px; border:0; border-radius:50%; background:var(--zit-primary-soft); color:var(--zit-muted); font-size:1.2rem; line-height:1; cursor:pointer; }
.rbx-search-clear:hover[b-7t7a0tig7n] { background:color-mix(in srgb, var(--zit-primary) 24%, var(--zit-white)); }
.rbx-search-clear:focus-visible[b-7t7a0tig7n] { outline:3px solid rgba(245,166,35,.8); outline-offset:2px; }

.rbx-body[b-7t7a0tig7n] { padding:34px 0 64px; background:var(--zit-white); }
.rbx-in[b-7t7a0tig7n] { max-width:1180px; margin-inline:auto; padding-inline:20px; }
.rbx-chips[b-7t7a0tig7n] { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:18px; }
.rbx-chip[b-7t7a0tig7n] { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--zit-border); background:var(--zit-white); color:color-mix(in srgb, var(--zit-navy) 84%, var(--zit-white)); font-weight:600; font-size:.94rem; cursor:pointer; transition:all .15s ease; }
.rbx-chip:hover[b-7t7a0tig7n] { border-color:var(--vio); color:var(--vio); }
.rbx-chip:focus-visible[b-7t7a0tig7n] { outline:3px solid rgba(79,70,229,.5); outline-offset:2px; }
/* En oscuro --ink es CLARA, así que la tinta del chip activo usa el token de superficie (se invierte a la par). */
.rbx-chip.is-active[b-7t7a0tig7n] { background:var(--ink); border-color:var(--ink); color:var(--zit-white); }
.rbx-chip-n[b-7t7a0tig7n] { font-size:.78rem; background:rgba(0,0,0,.07); border-radius:999px; padding:1px 8px; font-weight:700; }
.rbx-chip.is-active .rbx-chip-n[b-7t7a0tig7n] { background:color-mix(in srgb, var(--zit-white) 22%, transparent); color:var(--zit-white); }
.rbx-count[b-7t7a0tig7n] { text-align:center; color:var(--zit-muted); font-size:.95rem; margin:0 0 22px; }

.rbx-grid[b-7t7a0tig7n] { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rbx-card[b-7t7a0tig7n] { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--zit-border); border-radius:16px; background:var(--zit-white); text-decoration:none; color:inherit; box-shadow:0 2px 10px rgba(40,38,90,.04); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.rbx-card:hover[b-7t7a0tig7n] { transform:translateY(-4px); border-color:var(--vio); box-shadow:0 16px 32px -14px rgba(79,70,229,.45); }
.rbx-card:focus-visible[b-7t7a0tig7n] { outline:3px solid rgba(79,70,229,.55); outline-offset:2px; }
.rbx-card-ico[b-7t7a0tig7n] { width:56px; height:56px; flex:none; }
.rbx-card-body[b-7t7a0tig7n] { flex:1; min-width:0; }
.rbx-card-t[b-7t7a0tig7n] { margin:0 0 3px; font-size:1.04rem; font-weight:700; color:var(--ink); }
.rbx-card-x[b-7t7a0tig7n] { margin:0; font-size:.88rem; color:var(--zit-muted); line-height:1.4; }
.rbx-card-go[b-7t7a0tig7n] { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--vio); transition:background .16s ease, transform .16s ease; }
.rbx-card-go svg[b-7t7a0tig7n] { width:17px; height:17px; }
.rbx-card:hover .rbx-card-go[b-7t7a0tig7n] { background:var(--vio); color:var(--zit-white); transform:translateX(2px); }

.rbx-empty[b-7t7a0tig7n] { text-align:center; padding:48px 16px; color:var(--zit-muted); }
.rbx-empty p[b-7t7a0tig7n] { margin:0 0 6px; font-size:1.1rem; font-weight:600; color:var(--ink); }
.rbx-empty-sub[b-7t7a0tig7n] { font-weight:400 !important; font-size:.98rem !important; margin-bottom:18px !important; }

.rbx-btn[b-7t7a0tig7n] { display:inline-block; padding:14px 28px; border-radius:12px; font-weight:700; text-decoration:none; font-size:1.02rem; }
/* Tinta FIJA sobre ámbar: var(--zit-navy) se vuelve casi blanca en oscuro y quedaría ilegible. */
.rbx-btn-primary[b-7t7a0tig7n] { background:var(--org); color:#3a2400; box-shadow:0 10px 24px rgba(245,166,35,.4); }
.rbx-btn-ghost[b-7t7a0tig7n] { background:var(--zit-white); color:var(--ink); border:1px solid var(--zit-border); }

.rbx-foot[b-7t7a0tig7n] { text-align:center; margin-top:40px; padding-top:32px; border-top:1px solid var(--zit-border); }
.rbx-foot p[b-7t7a0tig7n] { color:var(--zit-muted); font-size:1.05rem; margin:0 0 16px; }
.rbx-foot-cta[b-7t7a0tig7n] { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media (max-width:980px) { .rbx-grid[b-7t7a0tig7n] { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) {
    .rbx-h1[b-7t7a0tig7n] { font-size:2rem; }
    .rbx-grid[b-7t7a0tig7n] { grid-template-columns:1fr; }
    .rbx-hero[b-7t7a0tig7n] { padding:44px 18px 52px; }
}