/* La letra del producto. Es una COPIA de la de Noventa.UI.Components: la landing se publica sola,
   desde su propia carpeta, y no puede pedirle archivos al panel. */
@font-face {
  font-family: "Inter ZETRO"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/Inter-Variable.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens: los del panel */
:root {
  color-scheme: light;
  --nv-bg: #f5f5f5; --nv-surface: #ffffff; --nv-surface-muted: #efefef;
  --nv-border: #e0e0e0; --nv-border-subtle: #ededed; --nv-border-strong: #8a8a8a;
  --nv-text: #0a0a0a; --nv-muted: #525252;
  --nv-primary: #0a0a0a; --nv-on-primary: #ffffff;
  /* las superficies SIEMPRE oscuras (héroe y cierre), como el login */
  --zt-black: #0a0a0a; --zt-charcoal: #141414; --zt-ink-soft: #a6a6a6; --zt-paper: #f5f5f5; --zt-line: #2e2e2e;
  --nv-radius-md: 8px; --nv-radius-lg: 12px; --nv-radius-xl: 16px;
  --nv-focus-ring: 0 0 0 2px var(--nv-surface), 0 0 0 4px var(--nv-text);
  --logo-claro: block; --logo-oscuro: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-nv-theme="light"]) {
    color-scheme: dark;
    --nv-bg: #0a0a0a; --nv-surface: #141414; --nv-surface-muted: #1f1f1f;
    --nv-border: #404040; --nv-border-subtle: #2e2e2e; --nv-border-strong: #626262;
    --nv-text: #f5f5f5; --nv-muted: #a6a6a6; --nv-primary: #f5f5f5; --nv-on-primary: #0a0a0a;
    --logo-claro: none; --logo-oscuro: block;
  }
}
:root[data-nv-theme="dark"] {
  color-scheme: dark;
  --nv-bg: #0a0a0a; --nv-surface: #141414; --nv-surface-muted: #1f1f1f;
  --nv-border: #404040; --nv-border-subtle: #2e2e2e; --nv-border-strong: #626262;
  --nv-text: #f5f5f5; --nv-muted: #a6a6a6; --nv-primary: #f5f5f5; --nv-on-primary: #0a0a0a;
  --logo-claro: none; --logo-oscuro: block;
}

* { box-sizing: border-box; }
html { font-family: "Inter ZETRO", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--nv-bg); color: var(--nv-text); line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
kbd { font: inherit; font-size: .875em; padding: 1px 6px; border: 1px solid var(--nv-border); border-radius: 5px; background: var(--nv-surface-muted); }
:focus-visible { outline: none; box-shadow: var(--nv-focus-ring); }
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; line-height: 1.15; }
p { margin: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }

.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .contenedor { padding: 0 32px; } }

/* ------------------------------------------------------------------ botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--nv-radius-md); border: 1px solid transparent; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 120ms, border-color 120ms; }
.btn-primario { background: var(--nv-primary); color: var(--nv-on-primary); }
.btn-primario:hover { background: var(--nv-muted); }
.btn-secundario { border-color: var(--nv-border-strong); background: transparent; color: var(--nv-text); }
.btn-secundario:hover { background: var(--nv-surface-muted); }
/* dentro de las superficies oscuras, los botones no siguen al tema */
.oscuro .btn-primario { background: var(--zt-paper); color: var(--zt-black); }
.oscuro .btn-primario:hover { background: #d9d9d9; }
.oscuro .btn-secundario { border-color: #626262; color: var(--zt-paper); }
.oscuro .btn-secundario:hover { background: #1f1f1f; }
.btn-grande { min-height: 52px; padding: 0 24px; font-size: 1.0625rem; }

/* ------------------------------------------------------------------ cabecera */
.cab { position: sticky; top: 0; z-index: 30; background: var(--nv-bg); border-bottom: 1px solid var(--nv-border-subtle); }
.cab-fila { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; }
/* El logotipo (2026-10-26) a 20 px de alto sale de unos 132 de ancho. */
.marca img { height: 20px; width: auto; }
.marca .claro { display: var(--logo-claro); }
.marca .oscuro-img { display: var(--logo-oscuro); }
.cab-nav { display: none; gap: 2px; margin-left: 12px; }
.cab-nav a { padding: 8px 11px; border-radius: var(--nv-radius-md); text-decoration: none; color: var(--nv-muted); font-weight: 500; font-size: 0.9375rem; }
.cab-nav a:hover { color: var(--nv-text); background: var(--nv-surface-muted); }
.cab-acciones { margin-left: auto; display: flex; gap: 8px; }
.cab-acciones .btn { min-height: 40px; padding: 0 14px; font-size: 0.9375rem; }
@media (min-width: 940px) { .cab-nav { display: flex; } }
/* EL MENÚ DEL TELÉFONO (2026-10-26). Por debajo de 940 px la navegación no cabe y antes no había
   forma de entrar sin bajar al pie. Ahora un botón abre la misma `.cab-nav` como panel bajo la
   cabecera (landing.js). «Entrar» va como botón desde 560 px, donde cabe, y por debajo dentro del
   menú. Sin JavaScript el botón no se ve: «Entrar» queda en el pie. */
.cab-acciones .entrar, .cab-nav-entrar, .cab-menu { display: none; }
@media (min-width: 560px) { .cab-acciones .entrar { display: inline-flex; } }
@media (max-width: 939px) {
  .js .cab-menu { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--nv-border-strong); border-radius: var(--nv-radius-md); background: transparent; color: var(--nv-text); cursor: pointer; }
  .cab-menu svg { width: 20px; height: 20px; }
  .cab-menu-cerrar, .cab.is-abierta .cab-menu-abrir { display: none; }
  .cab.is-abierta .cab-menu-cerrar { display: block; }
  .cab.is-abierta .cab-nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 4px 16px 12px; gap: 0; background: var(--nv-bg); border-bottom: 1px solid var(--nv-border-subtle); box-shadow: 0 18px 36px rgba(0, 0, 0, .18); }
  .cab.is-abierta .cab-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--nv-border-subtle); color: var(--nv-text); font-size: 1rem; }
  .cab.is-abierta .cab-nav a:last-child { border-bottom: 0; }
}
@media (min-width: 720px) and (max-width: 939px) { .cab.is-abierta .cab-nav { padding-inline: 32px; } }
@media (max-width: 559px) { .cab.is-abierta .cab-nav .cab-nav-entrar { display: flex; font-weight: 600; } }
@media (min-width: 560px) { .cab.is-abierta .cab-nav .cab-nav-entrar { display: none; } .cab.is-abierta .cab-nav a:nth-last-child(2) { border-bottom: 0; } }
/* EL BOTÓN DE LUNA O SOL (tema.js, 2026-10-26): siempre a la vista, también en el teléfono, y fuera
   del menú. Luna en claro (pasa a oscuro), sol en oscuro. Sin JavaScript no sale: manda el sistema. */
.cab-tema { display: none; }
.con-tema .cab-tema { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--nv-radius-md); background: transparent; color: var(--nv-text); cursor: pointer; }
.cab-tema:hover { background: var(--nv-surface-muted); }
.cab-tema svg { width: 18px; height: 18px; }
:root[data-nv-theme="dark"] .cab-tema-luna, :root:not([data-nv-theme="dark"]) .cab-tema-sol { display: none; }
/* En el teléfono no caben logotipo, «Crear mi empresa», la luna y el menú a la medida de siempre:
   botones de 36, «Crear empresa» y menos aire. */
@media (max-width: 419px) {
  .cab-fila { gap: 10px; }
  .cab-acciones { gap: 6px; }
  .cab-mi { display: none; }
  .cab-acciones .btn { padding: 0 11px; font-size: 0.875rem; }
  .con-tema .cab-tema, .js .cab-menu { width: 36px; height: 36px; }
}
@media (max-width: 374px) { .marca img { height: 17px; } }

/* ------------------------------------------------------------------ antetítulo y cabeceras de sección */
.antetitulo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--nv-muted); }
.antetitulo::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.seccion { padding: 72px 0; }
@media (min-width: 900px) { .seccion { padding: 96px 0; } }
.seccion + .seccion { border-top: 1px solid var(--nv-border-subtle); }
.seccion-cab { max-width: 62ch; }
.seccion-cab h2 { margin-top: 14px; font-size: clamp(1.625rem, 3.4vw, 2.375rem); letter-spacing: -0.025em; }
.seccion-cab p { margin-top: 14px; font-size: 1.0625rem; color: var(--nv-muted); }

/* ------------------------------------------------------------------ héroe: siempre oscuro */
.heroe { position: relative; background: var(--zt-black); color: var(--zt-paper); overflow: hidden; }
.heroe::before { content: ""; position: absolute; inset: 0; background: url("media/zetro-icono-tile.png") center / 220px repeat; opacity: .035; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 80% 40%, #000 20%, transparent 75%); pointer-events: none; }
.heroe-fila { position: relative; display: grid; gap: 40px; padding-block: 64px 72px; }
@media (min-width: 960px) { .heroe-fila { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; padding-block: 88px 96px; } }
.heroe .antetitulo { color: var(--zt-ink-soft); }
.heroe h1 { margin-top: 18px; font-size: clamp(2.125rem, 5vw, 3.5rem); letter-spacing: -0.03em; max-width: 17ch; }
.heroe h1 em { font-style: normal; color: var(--zt-ink-soft); }
.heroe .bajada { margin-top: 22px; max-width: 56ch; font-size: 1.125rem; color: #cfcfcf; }
.heroe .acciones { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
/* En el teléfono, los botones principales a todo el ancho, como en el cierre: antes cada uno iba a su
   medida y quedaban dos anchos distintos uno sobre otro. */
@media (max-width: 599px) { .heroe .acciones .btn { flex: 1 1 100%; } }
.heroe .letra-chica { margin-top: 16px; font-size: 0.875rem; color: var(--zt-ink-soft); max-width: 60ch; }

/* EL CHAT EN VIVO EN EL HÉROE (2026-10-27), en lugar de las dos tarjetas fijas. El héroe es oscuro
   en los dos temas, así que el chat toma aquí los tokens oscuros de la sección del agente (y su
   vidrio, más abajo). Debajo, la línea de lo que mueve la confirmación; va posicionada para que la
   sombra del chat, que con el desenfoque se pinta en otra capa, no le pase por encima. */
.tesis { display: grid; gap: 12px; }
.heroe .chat { --nv-surface: #141219; --nv-surface-muted: #221f2b; --nv-border: #3a3545; --nv-border-subtle: #2a2633; --nv-border-strong: #5c5668;
  --nv-text: #f5f5f5; --nv-muted: #b3b0bc; --nv-primary: #f5f5f5; --nv-on-primary: #0a0a0a; }
.tesis-pie { position: relative; font-size: 0.875rem; color: var(--zt-ink-soft); padding: 2px 4px 0; }
.tesis-pie strong { color: var(--zt-paper); font-weight: 500; }

/* ------------------------------------------------------------------ franja de capacidades
   Pastillas en vez de texto corrido con puntos: en el teléfono se partían a media frase. */
.franja { border-bottom: 1px solid var(--nv-border-subtle); }
.franja ul { list-style: none; margin: 0; padding: 16px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.franja li { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 1px solid var(--nv-border); border-radius: 999px; background: var(--nv-surface); font-size: 0.875rem; font-weight: 500; color: var(--nv-text); }
.franja li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8b4bf7; }
/* En el teléfono, las pastillas en renglones centrados y más pequeñas, todas a la vista (2026-10-26):
   en una fila que se deslizaba quedaban cortadas contra el borde. Con los textos cortos son tres renglones. */
@media (max-width: 719px) { .franja ul { gap: 6px; padding: 14px 0; } .franja li { min-height: 32px; padding: 0 11px; gap: 7px; font-size: 0.8125rem; } }
/* Las cinco en una sola línea desde 1080 px, con textos más cortos (2026-10-26). Por debajo no caben,
   y se parten en tres y dos —con un ancho máximo— para no dejar una sola en la segunda línea. */
@media (min-width: 720px) and (max-width: 1079px) { .franja ul { max-width: 660px; margin-inline: auto; } .franja li { padding: 0 12px; font-size: 0.8125rem; } }

/* ------------------------------------------------------------------ el agente de IA */
.proveedores { display: flex; flex-wrap: wrap; gap: 10px; }
.proveedor { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 10px; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-md); background: var(--nv-surface); font-weight: 600; font-size: 1rem; }
/* EL ICONO OFICIAL de cada asistente, ENCIMA de su sigla: mientras carga se ve la sigla, y si no
   carga el `onerror` del HTML retira la imagen y la sigla se queda. Fondo blanco en los dos temas
   porque así los publica cada plataforma. */
.logo-ia { position: relative; flex: none; width: 28px; height: 28px; border-radius: 7px; overflow: hidden; display: inline-grid; place-items: center; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .08); }
.logo-ia-sigla { font-size: 0.625rem; font-weight: 700; color: #0a0a0a; letter-spacing: .02em; }
.logo-ia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #ffffff; }
.chat { background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-radius-xl); padding: 18px; display: grid; gap: 14px; font-size: 0.9375rem; }
.chat-cab { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--nv-border-subtle); font-size: 0.8125rem; color: var(--nv-muted); }
.chat-cab .logo-ia { width: 22px; height: 22px; border-radius: 6px; }
.chat-cab b { color: var(--nv-text); font-weight: 600; }
.burbuja { max-width: 92%; padding: 12px 14px; border-radius: 14px; line-height: 1.45; }
.burbuja.persona { justify-self: end; background: var(--nv-primary); color: var(--nv-on-primary); border-bottom-right-radius: 4px; }
.burbuja.asistente { justify-self: start; background: var(--nv-surface-muted); border-bottom-left-radius: 4px; }
.herramienta { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--nv-border); font-size: 0.75rem; color: var(--nv-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.burbuja table { border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.burbuja td { padding: 3px 12px 3px 0; }
.burbuja td:last-child { text-align: right; padding-right: 0; }

/* El chat en vivo (chat-simulado.js): mismo marco, pero el hilo tiene alto fijo y baja solo. */
.chat.cs { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; height: 480px; padding: 0; overflow: hidden; }
.cs-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--nv-border-subtle); }
.cs-avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .08); font-size: 0.625rem; font-weight: 700; color: #0a0a0a; }
.cs-avatar-icono { display: block; width: 22px; height: 22px; animation: cs-rebote 620ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cs-rebote { 0% { opacity: 0; transform: translateY(-10px) scale(.5) rotate(-12deg); } 55% { opacity: 1; transform: translateY(2px) scale(1.15) rotate(4deg); } 80% { transform: translateY(-1px) scale(.95) rotate(-1deg); } 100% { transform: none; } }
.cs-quien { display: grid; line-height: 1.25; }
.cs-nombre { font-size: 0.875rem; font-weight: 600; }
.cs-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--nv-muted); }
.cs-punto { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.cs-hilo { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 16px 18px 18px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px); mask-image: linear-gradient(180deg, transparent 0, #000 36px); transition: opacity .4s ease, transform .4s ease; }
.cs-hilo > :first-child { margin-top: auto; }
/* Entre una conversación y la siguiente el hilo queda vacío un momento, y al llegar a la sección
   también: sin esto el chat se veía como una caja rota. El aviso se va solo con el primer mensaje. */
.cs-hilo:empty::before { content: "Pídele algo a tu asistente…"; margin: auto; padding: 8px 14px; border: 1px dashed var(--nv-border); border-radius: 999px; color: var(--nv-muted); font-size: 0.8125rem; animation: cs-entra .26s ease-out; }
.cs-hilo.is-saliendo { opacity: 0; transform: translateY(-8px); }
.cs-msg { flex: none; max-width: 86%; margin: 0; border-radius: 14px; font-size: 0.875rem; line-height: 1.45; animation: cs-entra .26s ease-out; }
.cs-msg.is-usuario { align-self: flex-end; display: grid; gap: 8px; padding: 10px 13px; border-bottom-right-radius: 4px; background: linear-gradient(135deg, #8b4bf7, #6d28d9); color: #ffffff; }
.cs-texto { margin: 0; }
.cs-respuesta { flex: none; display: grid; justify-items: start; gap: 8px; max-width: 92%; }
.cs-msg.is-asistente { max-width: none; padding: 10px 13px; border-bottom-left-radius: 4px; background: var(--nv-surface-muted); }
.cs-herramientas { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cs-herramienta { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(139, 75, 247, .35); background: rgba(139, 75, 247, .08); color: #7a3fe0; font-size: 0.6875rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; animation: cs-entra .26s ease-out; }
.cs-adjunto { display: grid; gap: 4px; }
.cs-adjunto-imagen { position: relative; display: block; width: 200px; aspect-ratio: 3 / 2; border-radius: 9px; overflow: hidden; }
.cs-adjunto-imagen svg { display: block; width: 100%; height: 100%; }
.cs-adjunto-nombre { font-size: 0.6875rem; opacity: .8; }
.cs-play { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); transform: translate(-50%, -50%); }
.cs-play::after { content: ""; position: absolute; top: 50%; left: 54%; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #ffffff; transform: translate(-50%, -50%); }
.cs-duracion { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #ffffff; font-size: 0.625rem; }
.cs-adjunto.is-enlace { display: flex; align-items: center; gap: 9px; max-width: 280px; padding: 7px 9px; border-radius: 9px; background: rgba(0, 0, 0, .2); }
.cs-enlace-icono { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #ffffff; color: #6d28d9; font-weight: 700; }
.cs-enlace-textos { display: grid; min-width: 0; line-height: 1.3; }
.cs-enlace-titulo { overflow: hidden; font-size: 0.8125rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cs-enlace-dominio { font-size: 0.6875rem; opacity: .8; }
.cs-pensando { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 14px; border-bottom-left-radius: 4px; background: var(--nv-surface-muted); }
.cs-pensando span { width: 6px; height: 6px; border-radius: 50%; background: var(--nv-muted); animation: cs-puntos 1.1s ease-in-out infinite; }
.cs-pensando span:nth-child(2) { animation-delay: .15s; }
.cs-pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes cs-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cs-puntos { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-color-scheme: dark) { :root:not([data-nv-theme="light"]) .cs-herramienta { color: #c9b5fc; } }
:root[data-nv-theme="dark"] .cs-herramienta { color: #c9b5fc; }
@media (prefers-reduced-motion: reduce) { .cs-avatar-icono, .cs-msg, .cs-herramienta, .cs-pensando span { animation: none; } }
@media (max-width: 600px) { .chat.cs { height: 440px; } .cs-hilo { padding: 14px; } .cs-adjunto-imagen { width: 170px; } }

/* ------------------------------------------------------------------ módulos en tres grupos */
.grupos { margin-top: 40px; display: grid; gap: 16px; }
.grupo { display: grid; gap: 20px; padding: 26px; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-xl); background: var(--nv-surface); }
@media (min-width: 900px) { .grupo { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; padding: 32px; } }
.grupo-cab h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.grupo-cab p { margin-top: 8px; color: var(--nv-muted); font-size: 0.9375rem; }
.modulos { display: grid; gap: 22px 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.modulo { display: grid; gap: 6px; align-content: start; }
.modulo svg { width: 24px; height: 24px; margin-bottom: 4px; }
.modulo h4 { font-size: 1rem; }
.modulo p { color: var(--nv-muted); font-size: 0.9375rem; }
.modulo .nuevo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--nv-primary); color: var(--nv-on-primary); font-size: 0.6875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }

/* ------------------------------------------------------------------ dos formas de trabajar */
.modos { margin-top: 40px; display: grid; gap: 16px; }
@media (min-width: 760px) { .modos { grid-template-columns: 1fr 1fr; } }
.modo { border: 1px solid var(--nv-border); border-radius: var(--nv-radius-lg); background: var(--nv-surface); padding: 26px; display: grid; gap: 10px; align-content: start; }
.modo h3 { font-size: 1.25rem; }
.modo p { color: var(--nv-muted); }
.modo ul { margin: 6px 0 0; padding-left: 18px; color: var(--nv-muted); display: grid; gap: 4px; }

/* ------------------------------------------------------------------ empezar: dos caminos */
.caminos { margin-top: 40px; display: grid; gap: 16px; }
@media (min-width: 900px) { .caminos { grid-template-columns: 1fr 1fr; } }
/* En columna y con el botón al fondo: las dos tarjetas miden lo mismo y los botones quedan a la
   misma altura aunque una traiga más texto. */
.camino { border: 1px solid var(--nv-border); border-radius: var(--nv-radius-xl); background: var(--nv-surface); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.camino.fuerte { border-color: var(--nv-text); }
.camino h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.camino > p { color: var(--nv-muted); }
.tiempo { display: flex; align-items: baseline; gap: 10px; }
.tiempo strong { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tiempo span { color: var(--nv-muted); font-size: 0.9375rem; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: p; }
.pasos li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; counter-increment: p; }
.pasos li::before { content: counter(p); width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--nv-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pasos b { font-weight: 600; }
.pasos p { color: var(--nv-muted); font-size: 0.9375rem; }
.camino .btn { align-self: flex-start; margin-top: auto; }

/* ------------------------------------------------------------------ planes */
.ciclo { margin-top: 28px; display: inline-flex; border: 1px solid var(--nv-border); border-radius: 999px; padding: 3px; background: var(--nv-surface); }
.ciclo button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-weight: 500; font-size: 0.9375rem; color: var(--nv-muted); cursor: pointer; }
@media (pointer: coarse) { .ciclo button { min-height: 44px; } }
.ciclo button[aria-pressed="true"] { background: var(--nv-primary); color: var(--nv-on-primary); }
/* Seis planes: tres y tres en escritorio, dos y dos en tableta. Con `auto-fit` salían cuatro y dos,
   con dos huecos al lado. */
.planes { margin-top: 28px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* En columna, con los topes y el botón empujados al fondo: así los botones de una fila quedan a la
   misma altura aunque una tarjeta traiga una línea más (la de Semilla). */
.plan { position: relative; background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.plan .topes { margin-top: auto; }
.plan.destacado { border-color: var(--nv-text); }
.plan .etiqueta { position: absolute; top: -11px; left: 20px; padding: 2px 10px; border-radius: 999px; background: var(--nv-primary); color: var(--nv-on-primary); font-size: 0.75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.plan h3 { font-size: 1.125rem; }
.plan .cupo { color: var(--nv-muted); font-size: 0.9375rem; min-height: 2.9em; }
.precio { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.precio strong { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.precio span { color: var(--nv-muted); font-size: 0.9375rem; }
.precio-nota { font-size: 0.8125rem; color: var(--nv-muted); min-height: 1.2em; font-variant-numeric: tabular-nums; }
.plan .topes { font-size: 0.9375rem; padding-top: 12px; border-top: 1px solid var(--nv-border-subtle); }
.plan .btn { margin-top: 4px; }
/* En una sola columna no hay fila que alinear: fuera los altos mínimos y la nota vacía del precio. */
@media (max-width: 619px) { .plan { padding: 20px; gap: 10px; } .plan .cupo { min-height: 0; } .precio-nota:empty { display: none; } }
/* --- aurora en las tarjetas (2026-10-19): borde tornasol con doble fondo (padding-box + border-box),
   velos de color muy tenues en el relleno y halo en la destacada. Gira despacio; quieto con
   prefers-reduced-motion. La paleta cambia con el tema: honda en claro, viva en oscuro. */
@property --boreal-giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes boreal-giro { to { --boreal-giro: 360deg; } }
/* cada plan trae su tono (--plan-h, en grados) en el atributo style; de ahí salen las paradas */
.planes, .comparar { --plan-l1: 44%; --plan-l2: 52%; --plan-l3: 58%; --boreal-velo: 6%; --boreal-halo: 12%; --matriz-tinta: 60%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-nv-theme="light"]) .planes, :root:not([data-nv-theme="light"]) .comparar { --plan-l1: 62%; --plan-l2: 70%; --plan-l3: 74%; --boreal-velo: 9%; --boreal-halo: 18%; --matriz-tinta: 100%; }
}
:root[data-nv-theme="dark"] .planes, :root[data-nv-theme="dark"] .comparar { --plan-l1: 62%; --plan-l2: 70%; --plan-l3: 74%; --boreal-velo: 9%; --boreal-halo: 18%; --matriz-tinta: 100%; }
.plan {
  --plan-h: 265; --plan-s: 70%;
  --boreal-a: hsl(var(--plan-h) var(--plan-s) var(--plan-l1));
  --boreal-b: hsl(calc(var(--plan-h) + 35) var(--plan-s) var(--plan-l2));
  --boreal-d: hsl(calc(var(--plan-h) - 25) var(--plan-s) var(--plan-l3));
  --boreal-borde: linear-gradient(135deg, var(--boreal-a), var(--boreal-b) 60%, var(--boreal-d));
  --boreal-linea: linear-gradient(90deg, var(--boreal-a), var(--boreal-b) 55%, var(--boreal-d));
  border: 1px solid transparent;
  background:
    radial-gradient(70% 50% at 0% 0%, color-mix(in srgb, var(--boreal-a) var(--boreal-velo), transparent), transparent 70%) padding-box,
    radial-gradient(60% 45% at 100% 0%, color-mix(in srgb, var(--boreal-b) var(--boreal-velo), transparent), transparent 70%) padding-box,
    linear-gradient(var(--nv-surface), var(--nv-surface)) padding-box,
    var(--boreal-borde) border-box;
  transition: transform .16s ease, box-shadow .16s ease;
}
.plan:hover { transform: translateY(-1px); box-shadow: 0 10px 28px color-mix(in srgb, var(--boreal-b) var(--boreal-halo), transparent), 0 1px 4px color-mix(in srgb, var(--boreal-a) var(--boreal-halo), transparent); }
.plan.destacado { border-width: 1.5px; border-color: transparent; box-shadow: 0 12px 32px color-mix(in srgb, var(--boreal-b) var(--boreal-halo), transparent), 0 1px 6px color-mix(in srgb, var(--boreal-a) var(--boreal-halo), transparent); }
.plan.destacado:hover { transform: translateY(-2px); }
.plan .etiqueta { background: var(--boreal-linea); color: #ffffff; box-shadow: 0 1px 4px color-mix(in srgb, var(--boreal-b) 20%, transparent); }
.plan h3 { color: var(--boreal-b); }
.plan.destacado .btn-primario { background: var(--boreal-linea); color: #ffffff; }
.plan.destacado .btn-primario:hover { background: var(--boreal-linea); filter: brightness(1.08); }
.plan .topes { border-top-color: color-mix(in srgb, var(--boreal-b) 25%, var(--nv-border-subtle)); }
@media (prefers-reduced-motion: reduce) { .plan { animation: none; } .plan:hover, .plan.destacado:hover { transform: none; } }


.matriz-marco { margin-top: 28px; overflow-x: auto; position: relative; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-lg); background: var(--nv-surface); }
table.matriz { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9375rem; }
.matriz caption { text-align: left; padding: 16px 18px 0; font-weight: 600; caption-side: top; }
.matriz th, .matriz td { padding: 12px 18px; border-bottom: 1px solid var(--nv-border-subtle); text-align: center; }
.matriz tr:last-child th, .matriz tr:last-child td { border-bottom: 0; }
.matriz thead th { font-weight: 600; color: var(--nv-text); vertical-align: bottom; }
.matriz tbody th { text-align: left; font-weight: 500; }
.matriz tbody th small { display: block; font-weight: 400; color: var(--nv-muted); font-size: 0.8125rem; }
.matriz td { font-variant-numeric: tabular-nums; color: var(--nv-muted); }
.matriz .si { color: var(--nv-text); }
.matriz .si svg { width: 18px; height: 18px; vertical-align: -3px; }
.matriz .no { color: var(--nv-border-strong); }
.matriz col.destacada { background: var(--nv-surface-muted); }
.planes-pie { margin-top: 18px; display: grid; gap: 6px; color: var(--nv-muted); font-size: 0.875rem; max-width: 74ch; }
/* La comparación, plegada: una barra que se toca para abrir la tabla. */
.comparar { margin-top: 28px; }
.comparar summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 18px; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-lg); background: var(--nv-surface); font-weight: 600; cursor: pointer; }
.comparar summary::-webkit-details-marker { display: none; }
.comparar summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--nv-muted); border-bottom: 2px solid var(--nv-muted); transform: rotate(45deg); transition: transform .2s ease; }
.comparar[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.comparar summary:hover { border-color: var(--nv-border-strong); }
.comparar .matriz-marco { margin-top: 12px; }
/* Ajusta tu plan: los complementos, sin precios; se arman por WhatsApp. */
.ajusta { display: grid; gap: 18px; margin-top: 28px; padding: 24px; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, #8b4bf7 7%, var(--nv-surface)), var(--nv-surface) 60%); }
.ajusta .btn { justify-self: start; }
/* Los botones de «Cómo empieza» y de «Ajusta tu plan», a todo el ancho en el teléfono, como los del héroe. */
@media (max-width: 599px) { .camino .btn { align-self: stretch; } .ajusta .btn { justify-self: stretch; } }
@media (min-width: 960px) { .ajusta { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: 28px; padding: 28px 32px; } .ajusta .btn { grid-column: 1; } .ajusta-lista { grid-column: 2; grid-row: 1 / span 2; } }
.ajusta-cab h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); letter-spacing: -0.02em; }
.ajusta-cab p { margin-top: 8px; color: var(--nv-muted); font-size: 0.9375rem; line-height: 1.6; }
.ajusta-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ajusta-lista li { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 8px 14px; border: 1px solid var(--nv-border); border-radius: 999px; background: var(--nv-surface); font-size: 0.875rem; font-weight: 500; }
.ajusta-lista li::before { content: "+"; color: #8b4bf7; font-weight: 700; }
/* En el teléfono, los complementos de dos en dos: como pastillas sueltas no cabían dos por línea y
   eran ocho renglones. */
@media (max-width: 599px) {
  .ajusta { padding: 20px; }
  .ajusta-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ajusta-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: baseline; gap: 2px 6px; min-height: 44px; padding: 8px 10px; border-radius: 12px; font-size: 0.8125rem; line-height: 1.3; }
}
/* Ejemplos por tipo de negocio: cómo se arma un plan, sin precio. */
.giros { margin-top: 18px; }
.giros h3 { font-size: 1.0625rem; }
.giros-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .giros-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.giro { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--nv-border-subtle); border-radius: var(--nv-radius-lg); background: var(--nv-surface); }
.giro b { font-size: 1rem; }
.giro p { color: var(--nv-muted); font-size: 0.875rem; line-height: 1.55; }
.giro .giro-base { color: var(--nv-text); font-size: 0.8125rem; font-weight: 500; padding-top: 8px; border-top: 1px solid var(--nv-border-subtle); }
.giro a { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: -8px; font-size: 0.875rem; font-weight: 600; color: #8b4bf7; text-decoration: none; }
/* En el teléfono, uno debajo del otro y más compactos: en una fila que se deslizaba, el siguiente
   quedaba cortado contra el borde y parecía un error. */
@media (max-width: 759px) { .giro { padding: 16px; gap: 6px; } }
.giro a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ preguntas */
.preguntas { margin-top: 32px; border-top: 1px solid var(--nv-border); }
.preguntas details { border-bottom: 1px solid var(--nv-border); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 500; font-size: 1.0625rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--nv-border); border-radius: 999px; color: var(--nv-muted); font-weight: 400; }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { padding: 0 0 20px; color: var(--nv-muted); max-width: 70ch; }

/* ------------------------------------------------------------------ cierre y pie */
.cierre { background: var(--zt-black); color: var(--zt-paper); }
.cierre-fila { padding-block: 72px; display: grid; gap: 24px; }
@media (min-width: 900px) { .cierre-fila { grid-template-columns: 1fr auto; align-items: center; padding-block: 96px; } }
.cierre h2 { font-size: clamp(1.75rem, 3.4vw, 2.375rem); letter-spacing: -0.03em; max-width: 20ch; }
.cierre p { margin-top: 12px; color: #cfcfcf; max-width: 52ch; font-size: 1.0625rem; }
.cierre .acciones { display: flex; flex-wrap: wrap; gap: 12px; }
/* La insignia de la tienda, en su propia línea y debajo: es una salida aparte, no un tercer botón. */
.cierre .acciones .tienda-ms { flex-basis: 100%; }
.pie { border-top: 1px solid var(--nv-border-subtle); }
.pie-fila { padding-block: 32px 40px; display: grid; gap: 18px; }
@media (min-width: 760px) { .pie-fila { grid-template-columns: auto 1fr; align-items: center; } }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.875rem; color: var(--nv-muted); }
@media (min-width: 760px) { .pie nav { justify-content: flex-end; } }
.pie nav a { color: inherit; text-decoration: none; }
.pie nav a:hover { color: var(--nv-text); text-decoration: underline; }
@media (pointer: coarse) { .pie nav { gap: 0 20px; } .pie nav a { display: inline-flex; align-items: center; min-height: 40px; } }
.pie-legal { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--nv-muted); max-width: 80ch; }

/* ------------------------------------------------------------------ el agente, destacado
   REDISEÑO (2026-10-24). Es lo que nos diferencia, y por eso es la única sección clara que se
   vuelve OSCURA en los dos temas, con la nebulosa líquida amatista de la cabecera del módulo en la
   app. Los tokens del tema se redefinen aquí dentro: el chat en vivo y todo lo demás los toman
   oscuros sin reglas aparte. */
.agente-destacado { position: relative; isolation: isolate; overflow: hidden; background: #08070c; color: var(--zt-paper);
  --nv-surface: #141219; --nv-surface-muted: #221f2b; --nv-border: #3a3545; --nv-border-subtle: #2a2633; --nv-border-strong: #5c5668;
  --nv-text: #f5f5f5; --nv-muted: #b3b0bc; --nv-primary: #f5f5f5; --nv-on-primary: #0a0a0a; }
.agente-destacado .antetitulo { color: #b79cfb; }
.seccion.agente-destacado, .agente-destacado + .seccion { border-top: 0; }

/* La nebulosa: cuatro gotas desenfocadas que derivan a su ritmo y cambian de forma con
   border-radius, que es lo que las hace parecer líquidas; una gira un degradado cónico y da el
   tono iridiscente. Vive detrás del chat y se apaga hacia el texto. */
.agente-nebulosa { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 70%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 70%); }
.gota { position: absolute; aspect-ratio: 1; mix-blend-mode: screen; will-change: transform, border-radius; }
.gota-amatista { top: -12%; right: 4%; width: 46%; background: radial-gradient(closest-side, rgba(139, 75, 247, .7), rgba(139, 75, 247, 0)); filter: blur(50px); animation: liquido-a 31s ease-in-out infinite; }
.gota-violeta { bottom: -30%; right: 30%; width: 40%; background: radial-gradient(closest-side, rgba(109, 40, 217, .6), rgba(109, 40, 217, 0)); filter: blur(56px); animation: liquido-b 37s ease-in-out infinite; }
.gota-iris { top: 20%; right: -8%; width: 34%; background: conic-gradient(from 0deg, rgba(183, 156, 251, .55), rgba(103, 232, 249, .4), rgba(244, 114, 182, .45), rgba(139, 75, 247, .55), rgba(183, 156, 251, .55)); filter: blur(54px); animation: liquido-c 29s ease-in-out infinite, iris-gira 23s linear infinite; }
.gota-cian { top: 55%; left: 8%; width: 26%; background: radial-gradient(closest-side, rgba(103, 232, 249, .28), rgba(103, 232, 249, 0)); filter: blur(48px); animation: liquido-b 41s ease-in-out infinite reverse; }
@keyframes liquido-a { 0%, 100% { border-radius: 42% 58% 63% 37% / 45% 39% 61% 55%; transform: translate(0, 0) rotate(0) scale(1); } 33% { border-radius: 61% 39% 44% 56% / 58% 62% 38% 42%; transform: translate(-12%, 16%) rotate(70deg) scale(1.1); } 66% { border-radius: 36% 64% 52% 48% / 40% 55% 45% 60%; transform: translate(8%, 6%) rotate(150deg) scale(.92); } }
@keyframes liquido-b { 0%, 100% { border-radius: 55% 45% 38% 62% / 52% 61% 39% 48%; transform: translate(0, 0) rotate(0) scale(1); } 40% { border-radius: 38% 62% 60% 40% / 62% 38% 62% 38%; transform: translate(16%, -20%) rotate(-80deg) scale(1.14); } 75% { border-radius: 64% 36% 46% 54% / 42% 58% 42% 58%; transform: translate(-10%, -6%) rotate(-140deg) scale(.9); } }
@keyframes liquido-c { 0%, 100% { border-radius: 48% 52% 58% 42% / 60% 44% 56% 40%; translate: 0 0; scale: 1; } 50% { border-radius: 62% 38% 40% 60% / 38% 62% 38% 62%; translate: -28% 22%; scale: 1.18; } }
@keyframes iris-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gota { animation: none; } }

.agente { display: grid; gap: 40px; }
@media (min-width: 960px) { .agente { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; } }
.agente-texto h2 { margin-top: 14px; font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -0.035em; line-height: 1.04; }
.agente-texto h2 em { font-style: normal; background: linear-gradient(100deg, #c9b5fc 0%, #8b4bf7 45%, #67e8f9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.agente-bajada { margin-top: 14px; max-width: 46ch; font-size: 1.0625rem; color: #cfcdd6; }

/* Lo que crea: pastillas de vidrio, con un punto amatista que dice «esto lo escribe». */
.crea { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crea li { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 11px; border: 1px solid rgba(183, 156, 251, .28); border-radius: 999px; background: rgba(139, 75, 247, .1); font-size: 0.8125rem; font-weight: 500; color: #ece8f6; }
.crea li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b79cfb; box-shadow: 0 0 8px rgba(183, 156, 251, .9); }
.crea-pie { margin-top: 10px; font-size: 0.9375rem; color: var(--nv-muted); }

/* Las tres garantías, en una línea cada una (antes, tres tarjetas). */
.garantias-linea { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--nv-border-subtle); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.9375rem; color: #dedbe6; }
.garantias-linea li { display: flex; align-items: center; gap: 10px; }
.garantias-linea li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(52, 211, 153, .14); color: #34d399; font-size: 0.6875rem; font-weight: 700; }

/* El chat en vivo, como vidrio sobre la nebulosa (en pilares.html) o sobre el negro del héroe. */
.agente-destacado .chat, .heroe .chat { border: 1px solid transparent; background: linear-gradient(rgba(20, 18, 27, .72), rgba(20, 18, 27, .72)) padding-box, linear-gradient(135deg, rgba(139, 75, 247, .8), rgba(169, 178, 193, .3) 45%, rgba(139, 75, 247, .5)) border-box; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(80, 30, 160, .35); }
.agente-destacado .cs-herramienta, .heroe .cs-herramienta { color: #c9b5fc; }

/* Las otras apps: ZETRO + la app, y lo que hacen juntas. */
.apps { margin-top: 64px; }
/* En la portada van en la columna que dejó el chat al subir al héroe (2026-10-27), de dos en dos. */
.agente-con-apps .apps { margin-top: 0; }
@media (min-width: 960px) { .agente-con-apps .combos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apps-cab { max-width: 60ch; }
.apps-cab h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; }
.apps-cab p { margin-top: 10px; color: var(--nv-muted); font-size: 1rem; }
.combos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .combos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .combos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.combo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--nv-border-subtle); border-radius: var(--nv-radius-lg); background: rgba(255, 255, 255, .035); transition: border-color .2s ease, transform .2s ease, background-color .2s ease; }
.combo:hover { border-color: rgba(183, 156, 251, .45); background: rgba(139, 75, 247, .07); transform: translateY(-2px); }
.combo .logo-ia { width: 30px; height: 30px; border-radius: 8px; }
.combo .logo-ia img { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }
.combo b { display: block; font-size: 0.9375rem; font-weight: 600; }
.combo p { margin-top: 2px; color: var(--nv-muted); font-size: 0.8125rem; line-height: 1.45; }
/* En el teléfono, de dos en dos con el icono arriba: todas caben en la pantalla, sin filas que se
   deslicen ni tarjetas cortadas contra el borde, y la lista mide la mitad que una debajo de la otra. */
@media (max-width: 559px) {
  .combos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .combo { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .combo p { font-size: 0.78125rem; }
}
.combo-z { width: 30px; height: 30px; border-radius: 8px; }
.combo.combo-propia { border-color: rgba(183, 156, 251, .4); background: rgba(139, 75, 247, .1); }
.apps-nota { margin-top: 16px; font-size: 0.8125rem; color: #8f8b99; }
@media (prefers-reduced-motion: reduce) { .combo:hover { transform: none; } }
.enlace-detalle { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 500; font-size: 0.9375rem; text-underline-offset: 3px; }
.enlace-detalle::after { content: "→"; transition: transform .15s ease; }
a:hover > .enlace-detalle::after, .enlace-detalle:hover::after { transform: translateX(3px); }

/* las otras apps del asistente, entre las herramientas del chat en vivo */
.cs-herramienta.is-app { border-color: rgba(103, 232, 249, .4); background: rgba(103, 232, 249, .1); color: #0e7490; font-family: inherit; font-weight: 600; }
.agente-destacado .cs-herramienta.is-app, .heroe .cs-herramienta.is-app { color: #a5f3fc; }

/* la insignia oficial de Microsoft Store, con su enlace a la ficha de la app */
.tienda-ms { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; text-decoration: none; color: var(--zt-ink-soft); font-size: 0.875rem; }
.tienda-ms img { width: 161px; height: 44px; }
.tienda-ms:hover span { color: var(--zt-paper); }
.tienda-ms.solo-insignia { margin-top: 0; }

/* ------------------------------------------------------------------ los pilares en la portada
   REDISEÑO (2026-10-24): cada pilar con su tono (--h, en el style de la tarjeta), su icono en una
   ficha de color, tres etiquetas de lo que trae y un enlace que se mueve al pasar. Una columna
   horizontal en el teléfono (icono a la izquierda), dos en tableta y cuatro en escritorio. */
.detalles { --pl-ficha-s: 90%; --pl-ficha-l: 95%; --pl-tinta-s: 60%; --pl-tinta-l: 42%; --pl-etq-l: 96%; --pl-etq-tinta-l: 32%; }
.tarjetas-pilar { margin-top: 32px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr);
  --pl-ficha-s: 90%; --pl-ficha-l: 95%; --pl-tinta-s: 60%; --pl-tinta-l: 42%; --pl-etq-l: 96%; --pl-etq-tinta-l: 32%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-nv-theme="light"]) .tarjetas-pilar, :root:not([data-nv-theme="light"]) .detalles { --pl-ficha-s: 45%; --pl-ficha-l: 17%; --pl-tinta-s: 85%; --pl-tinta-l: 74%; --pl-etq-l: 15%; --pl-etq-tinta-l: 80%; }
}
:root[data-nv-theme="dark"] .tarjetas-pilar, :root[data-nv-theme="dark"] .detalles { --pl-ficha-s: 45%; --pl-ficha-l: 17%; --pl-tinta-s: 85%; --pl-tinta-l: 74%; --pl-etq-l: 15%; --pl-etq-tinta-l: 80%; }
@media (min-width: 620px) { .tarjetas-pilar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1000px) { .tarjetas-pilar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tarjeta-pilar { --h: 262; --tinta: hsl(var(--h) var(--pl-tinta-s) var(--pl-tinta-l));
  position: relative; overflow: hidden; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 18px; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-xl); background: var(--nv-surface); text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
/* Un velo del color del pilar que asoma desde la esquina. */
.tarjeta-pilar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 0% 0%, hsl(var(--h) 80% 60% / .08), transparent 70%); }
.tarjeta-pilar:hover { border-color: hsl(var(--h) 70% 60% / .7); transform: translateY(-3px); box-shadow: 0 14px 34px hsl(var(--h) 70% 45% / .14); }
.pilar-icono { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: hsl(var(--h) var(--pl-ficha-s) var(--pl-ficha-l)); color: var(--tinta); grid-row: span 2; }
.tarjeta-pilar .pilar-icono svg { width: 22px; height: 22px; margin: 0; }
.pilar-textos { position: relative; display: grid; gap: 4px; min-width: 0; }
.tarjeta-pilar h3 { font-size: 1.0625rem; }
.tarjeta-pilar p { color: var(--nv-muted); font-size: 0.9375rem; line-height: 1.45; }
.pilar-etiquetas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pilar-etiquetas span { padding: 2px 8px; border-radius: 999px; background: hsl(var(--h) 70% var(--pl-etq-l)); color: hsl(var(--h) 55% var(--pl-etq-tinta-l)); font-size: 0.75rem; font-weight: 500; }
.pilar-ir { position: relative; grid-column: 2; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--tinta); }
.pilar-ir::after { content: "→"; transition: transform .2s ease; }
.tarjeta-pilar:hover .pilar-ir::after { transform: translateX(4px); }
@media (min-width: 1000px) {
  .tarjeta-pilar { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px; }
  .pilar-icono { grid-row: auto; }
  .pilar-ir { grid-column: 1; margin-top: auto; }
  .tarjeta-pilar { grid-template-rows: auto 1fr auto; }
}
@media (prefers-reduced-motion: reduce) { .tarjeta-pilar:hover { transform: none; } }
/* En el teléfono, dos columnas con el icono arriba y sin las etiquetas, que están en el detalle a un
   toque: una debajo de la otra, los ocho pilares eran 1.300 px. */
@media (max-width: 619px) {
  .tarjetas-pilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta-pilar { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 10px; padding: 16px; }
  .pilar-icono { grid-row: auto; width: 40px; height: 40px; }
  .pilar-ir { grid-column: 1; margin-top: 0; }
  .pilar-etiquetas { display: none; }
  .tarjeta-pilar h3 { font-size: 1rem; }
  .tarjeta-pilar p { font-size: 0.875rem; }
}

/* La cadena de una venta: cada eslabón se enciende en orden y vuelve a empezar. */
.cadena { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; counter-reset: c; }
.cadena li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; }
.cadena li:not(:last-child)::after { content: "→"; color: var(--nv-border-strong); margin-left: 4px; }
.cadena li { --tono: hsl(calc(262 + var(--i) * 18) 70% 55%); }
.cadena li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nv-border-strong); animation: eslabon 6s ease-in-out infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes eslabon { 0%, 100% { background: var(--nv-border-strong); box-shadow: none; } 8%, 40% { background: var(--tono); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cadena li::before { animation: none; background: var(--tono); } }

/* el pilar a la medida: ancho, con el borde amatista → plata de la marca */
.a-tu-medida { margin-top: 12px; display: grid; gap: 14px; align-items: center; padding: 24px; border: 1px solid transparent; border-radius: var(--nv-radius-xl); text-decoration: none;
  background: radial-gradient(60% 120% at 0% 0%, rgba(139, 75, 247, .08), transparent 70%) padding-box, linear-gradient(var(--nv-surface), var(--nv-surface)) padding-box, linear-gradient(135deg, rgba(139, 75, 247, .75), rgba(169, 178, 193, .35) 50%, rgba(139, 75, 247, .5)) border-box; }
@media (min-width: 820px) { .a-tu-medida { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; padding: 28px 32px; } }
.a-tu-medida > svg { width: 32px; height: 32px; color: #8b4bf7; }
.a-tu-medida-ante { font-size: 0.8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--nv-muted); }
.a-tu-medida h3 { margin-top: 6px; font-size: clamp(1.125rem, 2vw, 1.375rem); letter-spacing: -0.02em; max-width: 46ch; }
.a-tu-medida .enlace-detalle { margin-top: 0; white-space: nowrap; }

/* ------------------------------------------------------------------ pilares.html: el detalle */
.detalle-cab { padding: 48px 0 8px; }
.detalle-cab h1 { margin-top: 14px; font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -0.03em; max-width: 22ch; }
.volver { display: flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 22px; color: var(--nv-muted); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.volver::before { content: "←"; }
.volver:hover { color: var(--nv-text); }
/* REDISEÑO (2026-10-24): cada pilar del detalle con su tono (--h en el style de la sección), como
   las tarjetas de la portada: icono en ficha de color, una línea de color arriba, lo que trae en
   tarjetas pequeñas con su visto, y lo que se le puede pedir al agente sobre ese pilar. */
.detalles { display: grid; gap: 18px; padding-block: 28px 80px; }
.detalle { --h: 262; --tinta: hsl(var(--h) var(--pl-tinta-s) var(--pl-tinta-l));
  position: relative; overflow: hidden; display: grid; gap: 22px; padding: 24px; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-xl); background: var(--nv-surface); scroll-margin-top: 84px; }
.detalle::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--tinta), hsl(calc(var(--h) + 40) 70% 60%)); }
.detalle::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 40% at 0% 0%, hsl(var(--h) 80% 60% / .07), transparent 70%); }
@media (min-width: 900px) { .detalle { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; padding: 34px; } }
.detalle > * { position: relative; z-index: 1; }
.detalle .pilar-cab { gap: 10px; }
.detalle .pilar-icono { grid-row: auto; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 4px; }
.detalle .pilar-icono svg { width: 26px; height: 26px; margin: 0; }
.detalle .pilar-cab h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); letter-spacing: -0.02em; }
.detalle .pilar-cab p { font-size: 1rem; line-height: 1.55; }
.detalle .pilar-cab .btn, .detalle .pilar-cab .tienda-ms { justify-self: start; margin-top: 10px; }
.detalle .proveedores { margin-top: 10px; }
.detalle.a-tu-medida-detalle { border-color: transparent; background: linear-gradient(var(--nv-surface), var(--nv-surface)) padding-box, linear-gradient(135deg, rgba(139, 75, 247, .7), rgba(169, 178, 193, .35) 50%, rgba(139, 75, 247, .45)) border-box; }
/* El que llega desde una tarjeta de la portada ve resaltada la sección que pidió. */
.detalle:target { box-shadow: 0 0 0 3px hsl(var(--h) 70% 55% / .25); }

/* Lo que trae: tarjetas pequeñas con un visto del color del pilar. */
.detalle .derivados { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.detalle .derivados li { padding: 14px 14px 14px 44px; border: 1px solid var(--nv-border-subtle); border-radius: var(--nv-radius-lg); background: color-mix(in srgb, var(--nv-surface-muted) 45%, var(--nv-surface)); line-height: 1.5; }
.detalle .derivados li::before { content: "✓"; left: 14px; top: 14px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h) var(--pl-ficha-s) var(--pl-ficha-l)); color: var(--tinta); font-size: 0.6875rem; font-weight: 700; }
.detalle .derivados b { margin-bottom: 2px; }

/* Pídeselo al agente: lo que se le puede pedir sobre este pilar. */
.pilar-ia { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-radius: var(--nv-radius-lg); background: linear-gradient(100deg, rgba(139, 75, 247, .1), rgba(103, 232, 249, .06)); border: 1px solid rgba(139, 75, 247, .22); }
.pilar-ia-ante { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; font-size: 0.8125rem; font-weight: 600; letter-spacing: .02em; color: #6d28d9; }
.pilar-ia-ante img { width: 22px; height: 22px; border-radius: 6px; }
.pilar-ia-pedido { padding: 6px 12px; border-radius: 12px 12px 12px 4px; background: var(--nv-surface); border: 1px solid var(--nv-border-subtle); font-size: 0.875rem; }
.pilar-ia-pedido::before { content: "«"; } .pilar-ia-pedido::after { content: "»"; }
@media (prefers-color-scheme: dark) { :root:not([data-nv-theme="light"]) .pilar-ia-ante { color: #c9b5fc; } }
:root[data-nv-theme="dark"] .pilar-ia-ante { color: #c9b5fc; }
@media (max-width: 719px) { .detalle { padding: 20px; } .detalle .derivados { grid-template-columns: minmax(0, 1fr); } .pilar-ia-pedido { width: 100%; } }

/* El agente en el detalle: la sección de la portada, más lo que hace en cada módulo. */
.agente-detalle { scroll-margin-top: 64px; }
.modulos-ia-cab { margin-top: 64px; max-width: 62ch; }
.modulos-ia-cab h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; }
.modulos-ia-cab p { margin-top: 10px; color: var(--nv-muted); }
.modulos-ia-cab b { color: var(--nv-text); font-weight: 600; }
.modulos-ia { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .modulos-ia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .modulos-ia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.modulos-ia li { --h: 262; position: relative; display: grid; gap: 8px; align-content: start; padding: 18px 18px 18px 20px; border: 1px solid var(--nv-border-subtle); border-radius: var(--nv-radius-lg); background: rgba(255, 255, 255, .035); }
.modulos-ia li::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: hsl(var(--h) 80% 70%); }
.modulos-ia b { font-size: 1rem; font-weight: 600; }
.modulos-ia p { font-size: 0.875rem; color: #cfcdd6; line-height: 1.5; }
.modulos-ia p span { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; background: rgba(103, 232, 249, .12); color: #a5f3fc; }
.modulos-ia p + p span { background: rgba(139, 75, 247, .2); color: #d4c4fd; }

/* ------------------------------------------------------------------ los pilares */
.indice { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.indice a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--nv-border); border-radius: 999px; background: var(--nv-surface); color: var(--nv-text); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.indice a:hover { border-color: var(--nv-border-strong); }
@media (pointer: coarse) { .indice a { min-height: 44px; } }
/* En el teléfono, el índice en renglones y con pastillas más pequeñas, todas a la vista: en una fila
   que se deslizaba quedaban cortadas contra el borde. */
@media (max-width: 719px) { .indice { gap: 6px; } .indice a { padding: 0 11px; font-size: 0.8125rem; } }
.pilares { margin-top: 28px; display: grid; gap: 16px; }
.pilar { display: grid; gap: 22px; padding: 26px; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-xl); background: var(--nv-surface); scroll-margin-top: 80px; }
@media (min-width: 900px) { .pilar { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; padding: 32px; } }
.pilar-cab { display: grid; gap: 8px; align-content: start; }
.pilar-cab svg { width: 28px; height: 28px; margin-bottom: 6px; }
.pilar-cab h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.pilar-cab p { color: var(--nv-muted); font-size: 0.9375rem; }
.pilar-enlace { justify-self: start; margin-top: 4px; font-size: 0.875rem; font-weight: 500; text-underline-offset: 3px; }
.nuevo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--nv-primary); color: var(--nv-on-primary); font-size: 0.6875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; vertical-align: 4px; }
.derivados { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 32px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.derivados li { position: relative; padding-left: 18px; color: var(--nv-muted); font-size: 0.9375rem; }
.derivados li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 999px; background: var(--nv-text); }
.derivados b { display: block; color: var(--nv-text); font-weight: 600; }

/* ------------------------------------------------------------------ aviso de borrador
   Solo se enseña cuando la página se sirve desde el panel del superadministrador. */
.aviso-borrador { display: none; background: #92400e; color: #fffbeb; font-size: 0.8125rem; font-weight: 500; text-align: center; padding: 8px 16px; }
.es-borrador .aviso-borrador { display: block; }

/* solo para lectores de pantalla; el marco que lo contiene es position: relative (ver .matriz-marco) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ lectura en teléfono y PC
   REDISEÑO (2026-10-24). Lo que se ajusta aquí es para leer mejor, no un estilo nuevo: secciones
   menos altas en el teléfono, textos con más aire, los pasos de «Cómo empieza» numerados con
   color, las preguntas en dos columnas en escritorio y el cierre con el amatista de la marca. */
@media (max-width: 719px) {
  .seccion { padding: 56px 0; }
  .seccion-cab h2 { font-size: 1.75rem; }
  .seccion-cab p { font-size: 1rem; line-height: 1.6; }
}
.seccion-cab p a { color: inherit; font-weight: 500; text-underline-offset: 3px; }

/* Cómo empieza */
.camino { gap: 20px; }
@media (max-width: 719px) { .camino { padding: 22px; } }
.camino.fuerte { border-color: transparent; background: radial-gradient(70% 50% at 100% 0%, rgba(139, 75, 247, .07), transparent 70%) padding-box, linear-gradient(var(--nv-surface), var(--nv-surface)) padding-box, linear-gradient(135deg, rgba(139, 75, 247, .75), rgba(169, 178, 193, .35) 50%, rgba(139, 75, 247, .5)) border-box; }
.tiempo strong { flex: none; white-space: nowrap; background: linear-gradient(100deg, var(--nv-text), #8b4bf7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pasos li::before { border: 0; background: rgba(139, 75, 247, .12); color: #6d28d9; }
@media (prefers-color-scheme: dark) { :root:not([data-nv-theme="light"]) .pasos li::before { color: #c9b5fc; background: rgba(139, 75, 247, .22); } }
:root[data-nv-theme="dark"] .pasos li::before { color: #c9b5fc; background: rgba(139, 75, 247, .22); }
.pasos p { margin-top: 2px; line-height: 1.5; }

/* Planes: EN EL TELÉFONO LA TABLA CABE (2026-10-26). Antes se deslizaba de lado, con columnas
   cortadas contra el borde. Ahora cada fila pone el módulo arriba, a todo el ancho, y debajo seis
   columnas estrechas, una por plan, con los nombres y los valores largos en su forma corta
   (landing.js): la larga queda oculta solo a la vista, para el lector de pantalla. */
.matriz .corto { display: none; }
/* El nombre de cada plan, con el color del título de su tarjeta (el tono va en el style del <th>). En
   claro, oscurecido para que se lea sobre blanco: el verde amarillo del Corporativo casi no se veía. */
.matriz thead th[style] { color: color-mix(in srgb, hsl(calc(var(--plan-h) + 35) 70% var(--plan-l2)) var(--matriz-tinta, 100%), #000); }
@media (max-width: 719px) {
  .matriz-marco { overflow: visible; }
  table.matriz, .matriz thead, .matriz tbody { display: block; width: 100%; min-width: 0; }
  .matriz colgroup { display: none; }
  .matriz caption { display: block; padding: 14px 14px 6px; }
  .matriz tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; row-gap: 6px; padding: 10px 8px; border-bottom: 1px solid var(--nv-border-subtle); }
  .matriz tbody tr:last-child { border-bottom: 0; }
  .matriz th, .matriz td { min-width: 0; padding: 4px 2px; border: 0; font-size: 0.75rem; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
  .matriz thead th:first-child { display: none; }
  .matriz thead th { font-size: 0.6875rem; font-weight: 700; }
  /* El encabezado se queda pegado bajo la cabecera de la página mientras se baja por la tabla: así
     siempre se ve de qué plan es cada visto. */
  .matriz thead { position: sticky; top: 65px; z-index: 2; background: var(--nv-surface); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .35); }
  .matriz tbody th { grid-column: 1 / -1; padding: 0 4px; font-size: 0.875rem; text-align: left; }
  .matriz tbody th small { font-size: 0.75rem; }
  .matriz .si svg { width: 16px; height: 16px; }
  /* La fila del tope (la primera): «$1.000 M» en un solo renglón, sin salirse de su columna. */
  .matriz tbody tr:first-child td { font-size: 0.6875rem; white-space: nowrap; letter-spacing: -0.01em; }
  .matriz .destacada { border-radius: 6px; background: var(--nv-surface-muted); }
  .matriz .largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .matriz .corto { display: inline; }
}

/* Preguntas: en escritorio, la cabecera fija a la izquierda y las preguntas a la derecha. */
@media (min-width: 960px) {
  #preguntas .contenedor { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  #preguntas .seccion-cab { position: sticky; top: 96px; }
  #preguntas .preguntas { margin-top: 0; }
}
.preguntas summary { transition: color .15s ease; }
.preguntas summary:hover { color: #6d28d9; }
.preguntas details[open] summary { color: var(--nv-text); }
.preguntas details[open] summary::after { border-color: #8b4bf7; color: #8b4bf7; }
.preguntas details p { line-height: 1.6; }
@media (prefers-color-scheme: dark) { :root:not([data-nv-theme="light"]) .preguntas summary:hover { color: #c9b5fc; } }
:root[data-nv-theme="dark"] .preguntas summary:hover { color: #c9b5fc; }
@media (max-width: 719px) { .preguntas summary { font-size: 1rem; padding: 16px 0; } }

/* El cierre, con el amatista de la marca, como la sección del agente. */
.cierre { position: relative; isolation: isolate; overflow: hidden; background: #08070c; }
.cierre::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 90% at 100% 50%, rgba(139, 75, 247, .32), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgba(103, 232, 249, .08), transparent 70%); }
@media (max-width: 899px) { .cierre .acciones .btn { flex: 1 1 100%; } }

/* ------------------------------------------------------------------ aliados: contadores y asesores
   (2026-10-24) Clara, con un velo amatista-cian y la red del aliado a la derecha: él en el centro,
   sus empresas alrededor, cada una con su pulso, y dos que llegan. */
/* `clip` y no `hidden`: con `hidden` la sección se vuelve un contenedor de desplazamiento y la red
   de la derecha deja de quedarse fija (`sticky`), con lo que la columna quedaba vacía junto a las
   tarjetas. `hidden` queda de reserva para el navegador que no conozca `clip`. */
.aliados { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.aliados::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(45% 55% at 85% 40%, rgba(139, 75, 247, .1), transparent 70%), radial-gradient(35% 45% at 100% 100%, rgba(34, 211, 238, .08), transparent 70%); }
/* `minmax(0, 1fr)`: con la fila deslizante de beneficios (móvil), una columna `auto` se ensancha a
   todo lo que mide la fila y el texto se sale por la derecha. */
.aliados-fila { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .aliados-fila { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; } }
.aliados .antetitulo { color: #7a3fe0; }
/* Dos tamaños de título en toda la página (2026-10-26): el de sección, como aquí y en el cierre,
   y el destacado (48 px) solo en las dos secciones oscuras de en medio, el agente y la reflexión. */
.aliados h2 { margin-top: 14px; font-size: clamp(1.75rem, 3.4vw, 2.375rem); letter-spacing: -0.03em; line-height: 1.1; }
.aliados h2 em { font-style: normal; background: linear-gradient(100deg, #8b4bf7, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aliados-bajada { margin-top: 16px; max-width: 58ch; font-size: 1.0625rem; line-height: 1.6; color: var(--nv-muted); }

.aliados-beneficios { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .aliados-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aliados-beneficios li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-lg); background: var(--nv-surface); font-size: 0.9375rem; color: var(--nv-muted); line-height: 1.5; transition: border-color .2s ease, transform .2s ease; }
.aliados-beneficios li:hover { border-color: rgba(139, 75, 247, .45); transform: translateY(-2px); }
.aliados-beneficios b { display: block; margin-bottom: 2px; color: var(--nv-text); font-weight: 600; }
.aliado-icono { --h: 262; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: hsl(var(--h) 90% 95%); color: hsl(var(--h) 60% 42%); }
.aliado-icono svg { width: 21px; height: 21px; }
@media (prefers-color-scheme: dark) { :root:not([data-nv-theme="light"]) .aliado-icono { background: hsl(var(--h) 45% 17%); color: hsl(var(--h) 85% 74%); } :root:not([data-nv-theme="light"]) .aliados .antetitulo { color: #b79cfb; } }
:root[data-nv-theme="dark"] .aliado-icono { background: hsl(var(--h) 45% 17%); color: hsl(var(--h) 85% 74%); }
/* En el teléfono, uno debajo del otro pero compactos (icono y relleno menores): en una fila que se
   deslizaba, el siguiente quedaba cortado contra el borde. */
@media (max-width: 639px) {
  .aliados-beneficios { gap: 8px; }
  .aliados-beneficios li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 14px; font-size: 0.875rem; line-height: 1.45; }
  .aliado-icono { width: 32px; height: 32px; border-radius: 9px; }
  .aliado-icono svg { width: 18px; height: 18px; }
}
:root[data-nv-theme="dark"] .aliados .antetitulo { color: #b79cfb; }

/* Los tres pasos, en línea con números de color. */
.aliados-pasos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: a; }
@media (min-width: 760px) { .aliados-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aliados-pasos li { counter-increment: a; display: grid; gap: 4px; padding-top: 14px; border-top: 2px solid transparent; border-image: linear-gradient(90deg, #8b4bf7, #22d3ee) 1; font-size: 0.9375rem; color: var(--nv-muted); line-height: 1.5; }
.aliados-pasos li::before { content: "0" counter(a); font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em; color: #8b4bf7; }
.aliados-pasos b { color: var(--nv-text); font-weight: 600; font-size: 1rem; }
.aliados-acciones { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.aliados-acciones .enlace-detalle { margin-top: 0; }
.aliados .btn-primario { background: linear-gradient(100deg, #8b4bf7, #6d28d9); color: #ffffff; box-shadow: 0 10px 26px rgba(139, 75, 247, .3); }
.aliados .btn-primario:hover { filter: brightness(1.08); background: linear-gradient(100deg, #8b4bf7, #6d28d9); }
@media (max-width: 599px) { .aliados-acciones .btn { width: 100%; } }

/* La red del aliado. */
.aliados-red { display: grid; gap: 10px; justify-items: center; }
@media (min-width: 960px) { .aliados-fila { align-items: start; } .aliados-red { position: sticky; top: 110px; } }
.aliados-red svg { width: 100%; max-width: 440px; height: auto; overflow: visible; }
.red-orbita { fill: none; stroke: var(--nv-border); stroke-dasharray: 3 6; }
.red-lineas path { fill: none; stroke-width: 1.4; stroke-dasharray: 4 8; opacity: .6; animation: red-flujo 2.4s linear infinite; }
@keyframes red-flujo { to { stroke-dashoffset: -24; } }
.red-halo { animation: red-respira 5s ease-in-out infinite; transform-origin: 220px 220px; }
@keyframes red-respira { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }
.red-nodo circle { fill: var(--nv-surface); stroke: #8b4bf7; stroke-width: 1.6; }
.red-nodo text { font-size: 13px; font-weight: 700; text-anchor: middle; fill: var(--nv-text); }
.red-nodo .red-nombre { font-size: 11px; font-weight: 500; fill: var(--nv-muted); }
.red-nodo { animation: red-pulso 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .6s); transform-box: fill-box; transform-origin: center; }
@keyframes red-pulso { 0%, 100% { filter: none; } 10%, 22% { filter: drop-shadow(0 0 8px rgba(139, 75, 247, .55)); } }
.red-nueva circle { stroke-dasharray: 3 3; }
.red-nueva text { font-size: 16px; fill: #8b4bf7; }
.red-nueva { animation: red-llega 3.2s ease-in-out infinite; animation-delay: calc((var(--i) - 6) * 1.6s); }
@keyframes red-llega { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.red-centro circle { fill: #0a0a0a; stroke: #22d3ee; stroke-width: 2; }
.red-centro text { font-size: 13px; font-weight: 600; text-anchor: middle; fill: #ffffff; }
.aliados-red-pie { font-size: 0.875rem; color: var(--nv-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .red-lineas path, .red-halo, .red-nodo, .red-nueva { animation: none; } }

/* ------------------------------------------------------------------ tiempo libre: por qué hacemos ZETRO
   (2026-10-24) Fotos de fondo que se funden despacio, difuminadas, con un leve acercamiento, bajo
   un velo oscuro que se cierra hacia el texto. Cada foto se queda 7 s y tarda 2 s en fundirse:
   el ciclo es de 8 × 7 = 56 s. Oscura en los dos temas: las fotos piden fondo oscuro. */
.reflexion { --ciclo: 56s; position: relative; isolation: isolate; overflow: hidden; background: #0b0a10; color: #f5f5f5; }
.seccion.reflexion, .reflexion + .seccion { border-top: 0; }
.reflexion-fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.reflexion-foto { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; opacity: 0;
  filter: blur(.4px) saturate(1.06) brightness(.97); transform: scale(1.06);
  animation: reflexion-foto var(--ciclo) ease-in-out infinite; animation-delay: calc(var(--i) * var(--ciclo) / 8 - 2s); }
@keyframes reflexion-foto {
  0% { opacity: 0; transform: scale(1.1); }
  3.6% { opacity: 1; }
  12.5% { opacity: 1; }
  16.1% { opacity: 0; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.02); }
}
/* El velo: más denso donde va el texto, más abierto donde respira la foto. */
.reflexion::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 10, 16, .66) 0%, rgba(11, 10, 16, .36) 45%, rgba(11, 10, 16, .08) 100%), radial-gradient(60% 80% at 100% 100%, rgba(139, 75, 247, .16), transparent 70%); }
@media (max-width: 959px) { .reflexion::before { background: linear-gradient(180deg, rgba(11, 10, 16, .25), rgba(11, 10, 16, .5) 45%, rgba(11, 10, 16, .62)); } }

.reflexion-fila { display: grid; gap: 28px; }
@media (min-width: 960px) { .reflexion-fila { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; min-height: 560px; } }
.reflexion-tarjeta { padding: 30px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px; background: rgba(14, 12, 22, .32); -webkit-backdrop-filter: blur(7px) saturate(1.15); backdrop-filter: blur(7px) saturate(1.15); box-shadow: 0 30px 80px rgba(0, 0, 0, .28); text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
@media (max-width: 719px) { .reflexion-tarjeta { padding: 22px; border-radius: 18px; } }
.reflexion .antetitulo { color: #d6c8fb; }
.reflexion h2 { margin-top: 14px; font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; }
.reflexion h2 em { font-style: normal; background: linear-gradient(100deg, #c9b5fc, #fcd34d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reflexion-tarjeta > p:not(.antetitulo) { margin-top: 16px; max-width: 58ch; font-size: 1.0625rem; line-height: 1.7; color: #dcdae3; }
.reflexion-tarjeta b { color: #ffffff; font-weight: 600; }

/* El respaldo: lo que da tranquilidad, en una línea. */
.reflexion-respaldo { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.reflexion-respaldo li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 0.8125rem; color: #ece9f3; }
/* En el teléfono, el respaldo como lista corta y no como pastillas de a una por renglón: esa última
   diapositiva era la más alta y la tarjeta reserva su alto para todas, así que las otras quedaban
   con un hueco de 200 px. */
.reflexion-respaldo li::before { content: "✓"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(52, 211, 153, .2); color: #6ee7b7; font-size: 0.625rem; font-weight: 700; }
/* En el teléfono, el respaldo como texto corrido con sus vistos: en pastillas iba uno por renglón y
   la última diapositiva quedaba 100 px más alta que las otras, que la tarjeta reserva para todas. */
@media (max-width: 559px) {
  .reflexion-respaldo { display: block; margin-top: 14px; line-height: 1.8; }
  .reflexion-respaldo li { display: inline; min-height: 0; padding: 0; border: 0; background: none; }
  .reflexion-respaldo li + li { margin-left: 10px; }
  .reflexion-respaldo li::before { display: inline-grid; margin-right: 6px; vertical-align: -3px; }
}
.reflexion-tarjeta > p.reflexion-firma { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 0.9375rem; color: #c9c6d2; }
.reflexion-firma img { width: 30px; height: 30px; border-radius: 8px; }


@media (prefers-reduced-motion: reduce) {
  .reflexion-foto { animation: none; }
  .reflexion-foto:last-child { opacity: 1; }
}

/* Los créditos de las fotos, en el pie. */
/* Las diapositivas de la reflexión. Sin JavaScript, una debajo de la otra; con él, apiladas en la
   misma celda (la tarjeta mide lo que la más alta) y solo la activa se ve. El avance lo marca la
   barra del punto activo: cuando su animación termina, landing.js pasa a la siguiente, así que
   pausar es pausar la animación. */
.diapo + .diapo { margin-top: 26px; }
.js .reflexion-diapos { display: grid; touch-action: pan-y; }
/* La celda mide lo de la activa (landing.js): crece o se encoge despacio, y las otras, ocultas, no
   asoman por debajo. La fila guarda el alto de la más alta y deja la tarjeta abajo, sobre la foto. */
.js .reflexion-diapos { overflow-x: visible; overflow-y: clip; transition: height .45s ease; }
.js .reflexion-fila { align-content: end; }
.js .diapo { align-self: start; grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.js .diapo.is-antes { transform: translateX(-28px); }
.js .diapo.is-activa { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s ease, visibility 0s; }
.diapo-ante { font-size: 0.8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #d6c8fb; }
.diapo-frase { margin-top: 14px; font-size: clamp(1.375rem, 2.8vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #ffffff; max-width: 24ch; text-wrap: balance; }
.diapo-frase em, .reflexion h2 em { font-style: normal; background: linear-gradient(100deg, #c9b5fc, #fcd34d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.diapo-texto { margin-top: 14px; max-width: 52ch; font-size: 1.0625rem; line-height: 1.65; color: #dcdae3; }
.diapo .reflexion-firma { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 0.9375rem; color: #c9c6d2; }

/* El navegador: flechas, un punto por diapositiva con su barra de tiempo, y pausa. */
.diapos-nav { display: none; }
.js .diapos-nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.diapos-nav button { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #ffffff; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.diapos-nav button:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.diapos-nav svg { width: 16px; height: 16px; }
.diapos-puntos { display: flex; flex: 1; gap: 6px; }
.diapos-nav .diapos-punto { position: relative; overflow: hidden; flex: 1; width: auto; height: 6px; max-width: 64px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.diapos-nav .diapos-punto:hover { background: rgba(255, 255, 255, .35); }
.diapos-punto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #c9b5fc, #fcd34d); transform: scaleX(0); transform-origin: left; }
.diapos-punto.is-vista::after { transform: scaleX(1); opacity: .55; }
.diapos-punto.is-activa::after { animation: diapo-avance var(--dur, 7s) linear forwards; }
@keyframes diapo-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.reflexion-tarjeta.is-quieta .diapos-punto.is-activa::after { animation-play-state: paused; }
/* El punto es pequeño a la vista, pero se toca en un área de 36 px de alto. */
.diapos-punto::before { content: ""; position: absolute; inset: -15px 0; }
@media (prefers-reduced-motion: reduce) { .js .diapo { transition: none; transform: none; } .js .reflexion-diapos { transition: none; } }


.pie-creditos { grid-column: 1 / -1; font-size: 0.75rem; color: var(--nv-muted); max-width: 90ch; }
.pie-creditos a { color: inherit; }

/* ------------------------------------------------------------------ la plataforma: el tablero
   (2026-10-24) Una maqueta abreviada del panel de empresa de la app, para que quien entra vea que
   ZETRO es un sistema completo; desde el 2026-10-27 va después del agente. El menú trae los trece grupos de la app con sus
   mismos íconos (IconoDeNavegacion.razor). Sigue al tema, como la app. En el celular no hay menú
   lateral, las cifras van de dos en dos y se quedan fuera los canales y lo más vendido. */
.plataforma .seccion-cab h2 em { font-style: normal; color: var(--nv-muted); }
.tablero { --tb-acento: #8b4bf7; --tb-acento-2: #22d3ee; --tb-acento-3: #f59e0b; margin: 40px 0 0; border: 1px solid var(--nv-border); border-radius: 18px; background: var(--nv-surface); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 30px 70px -30px rgba(76, 29, 149, .35); }
.tablero-barra { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--nv-border-subtle); background: var(--nv-surface-muted); }
.tablero-luces { display: flex; gap: 6px; }
.tablero-luces i { width: 10px; height: 10px; border-radius: 50%; background: var(--nv-border); }
.tablero-url { flex: 1; max-width: 320px; margin: 0 auto; padding: 4px 12px; border-radius: 999px; background: var(--nv-surface); font-size: 0.75rem; color: var(--nv-muted); text-align: center; }
.tablero-cuerpo { display: grid; }
@media (min-width: 900px) { .tablero-cuerpo { grid-template-columns: 200px minmax(0, 1fr); } }

/* El menú: los trece grupos. */
.tablero-menu { display: none; list-style: none; margin: 0; padding: 14px 10px; border-right: 1px solid var(--nv-border-subtle); background: color-mix(in srgb, var(--nv-surface-muted) 45%, var(--nv-surface)); }
@media (min-width: 900px) { .tablero-menu { display: block; } }
.tablero-menu li { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; font-size: 0.78125rem; color: var(--nv-muted); white-space: nowrap; }
.tablero-menu svg { flex: none; width: 16px; height: 16px; }
.tablero-menu li.tablero-logo { margin-bottom: 8px; font-size: 0.9375rem; color: var(--nv-text); }
.tablero-logo img { border-radius: 6px; }
.tablero-menu li.activo { background: color-mix(in srgb, var(--tb-acento) 12%, transparent); color: var(--nv-text); font-weight: 600; }
.tablero-menu li.activo svg { color: var(--tb-acento); }

.tablero-panel { min-width: 0; padding: 16px; }
@media (min-width: 720px) { .tablero-panel { padding: 24px 28px 28px; } }
.tablero-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tablero-cab small { display: block; font-size: 0.75rem; color: var(--nv-muted); }
.tablero-cab strong { display: block; margin-top: 2px; font-size: 1.125rem; letter-spacing: -0.01em; }
.tablero-acciones { display: flex; flex: none; gap: 8px; }
.tablero-periodo, .tablero-pos { padding: 6px 12px; border: 1px solid var(--nv-border); border-radius: 8px; font-size: 0.75rem; color: var(--nv-muted); }
.tablero-pos { border-color: transparent; background: var(--nv-primary); color: var(--nv-on-primary); font-weight: 600; }
@media (max-width: 559px) { .tablero-pos { display: none; } }
.tablero-rotulo { margin: 16px 0 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-muted); }

/* Las cifras. */
.tablero-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .tablero-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tablero-cifras > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--nv-border-subtle); border-radius: 12px; background: var(--nv-bg); }
.tablero-cifras span { display: block; font-size: 0.75rem; color: var(--nv-muted); }
.tablero-cifras b { display: block; margin-top: 4px; font-size: clamp(0.9375rem, 1.6vw, 1.1875rem); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tablero-cifras i { display: block; margin-top: 2px; font-size: 0.6875rem; font-style: normal; color: var(--nv-muted); }
.tablero-cifras i.sube { color: #059669; font-weight: 600; }

/* Las cajas de abajo. */
.tablero-fila { display: grid; gap: 10px; margin-top: 10px; }
.tablero-cifras + .tablero-fila { margin-top: 22px; }
@media (min-width: 720px) { .tablero-fila { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* La fila de abajo trae tres cajas: ventas, canales y alertas. Entre tablet y escritorio, las alertas
   bajan a lo ancho. */
@media (min-width: 720px) and (max-width: 1039px) { .tablero-fila-tres > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .tablero-fila-tres { grid-template-columns: minmax(0, 5fr) minmax(0, 3.2fr) minmax(0, 4fr); } }
.tablero-caja { min-width: 0; padding: 0 14px 14px; border: 1px solid var(--nv-border-subtle); border-radius: 12px; }
.tablero-caja .tablero-rotulo { margin-top: 14px; }
.tablero-caja-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tablero-leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: var(--nv-muted); }
.tablero-leyenda i { width: 14px; height: 3px; border-radius: 2px; background: var(--tb-acento); }
.tablero-leyenda i.pasado { margin-left: 6px; background: var(--nv-border-strong); opacity: .6; }

.tablero-grafica { display: block; width: 100%; height: 92px; overflow: visible; }
.tablero-guias { fill: none; stroke: var(--nv-border-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tablero-pasado { fill: none; stroke: var(--nv-border-strong); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .6; vector-effect: non-scaling-stroke; }
.tablero-este { fill: none; stroke: var(--tb-acento); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tablero-meta { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 6px 10px; margin-top: 12px; font-size: 0.75rem; color: var(--nv-muted); }
.tablero-meta b { color: var(--nv-text); }
.tablero-meta i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--tb-acento) var(--v), var(--nv-surface-muted) var(--v)); }

.tablero-apilada { display: flex; gap: 3px; height: 14px; margin-top: 4px; }
.tablero-apilada i { width: var(--v); border-radius: 4px; background: var(--tb-acento); }
.tablero-apilada i:nth-child(2), .tablero-canales li:nth-child(2) i { background: var(--tb-acento-2); }
.tablero-apilada i:nth-child(3), .tablero-canales li:nth-child(3) i { background: var(--tb-acento-3); }
.tablero-canales ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.tablero-canales li { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; }
.tablero-canales li i { width: 9px; height: 9px; border-radius: 3px; background: var(--tb-acento); }
.tablero-canales li b { margin-left: auto; font-variant-numeric: tabular-nums; }


.tablero-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tablero-alertas li { display: grid; gap: 1px; padding: 7px 10px 7px 14px; border-radius: 8px; background: var(--nv-bg); border-left: 3px solid var(--nv-border-strong); font-size: 0.8125rem; }
.tablero-alertas b { font-weight: 600; }
.tablero-alertas span { font-size: 0.75rem; color: var(--nv-muted); }
.tablero-alertas .rojo { border-left-color: #dc2626; }
.tablero-alertas .ambar { border-left-color: #d97706; }
.tablero-alertas .morado { border-left-color: var(--tb-acento); }
.tablero-alertas .verde { border-left-color: #059669; }

/* En el celular, abreviado. */
@media (max-width: 719px) {
  .tablero-canales, .tablero-cifras > div:nth-child(n + 3) { display: none; }
  .tablero-grafica { height: 90px; }
  .tablero-alertas li:nth-child(n + 3) { display: none; }
}

/* ------------------------------------------------------------------ escritorio: una sección por pantalla
   (2026-10-27, a pedido del dueño). En el PC cada sección cabe entera en la pantalla y, al bajar, la
   portada se desliza sola al comienzo de la siguiente, como un imán (ver «el imán de las secciones»
   en landing.js). Para que quepan, la cabecera baja a 56 px, el aire de las secciones sigue al alto
   de la ventana (--aire) y varias se reacomodan:
   - la plataforma, con el texto a la izquierda y el tablero a la derecha, con el menú solo de iconos;
   - los pilares, con el icono junto al nombre y sin las etiquetas (están en el detalle);
   - los planes, con el ciclo junto al título, las tarjetas más compactas y la tabla plegada;
   - los aliados, con los pasos junto a la red y los beneficios abajo, en tres columnas.
   Planes no cabe en una pantalla: lleva dos imanes, sus tarjetas y «Ajusta tu plan». Lo que no quepa
   (una pregunta abierta, la tabla de planes desplegada) se recorre libre: el imán actúa en los bordes. */
@media (min-width: 960px) {
  :root { --cab-alto: 57px; --aire: clamp(32px, 6.5vh, 72px); }
  html { scroll-padding-top: var(--cab-alto); }
  .cab-fila { min-height: 56px; }
  .cab-nav a { white-space: nowrap; }
  .seccion, .heroe-fila { padding-block: var(--aire); }
  .heroe h1 { font-size: clamp(2.125rem, min(5vw, 6.5vh), 3.5rem); }

  /* La plataforma */
  #plataforma > .contenedor { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; }
  #plataforma .tablero { margin-top: 0; }
  #plataforma .tablero-cuerpo { grid-template-columns: 52px minmax(0, 1fr); }
  #plataforma .tablero-menu { padding: 12px 8px; }
  #plataforma .tablero-menu li { justify-content: center; gap: 0; padding: 6px 0; font-size: 0; }
  #plataforma .tablero-menu li.tablero-logo { margin-bottom: 6px; }
  #plataforma .tablero-panel { padding: 18px 20px 20px; }
  #plataforma .tablero-rotulo { margin: 12px 0 6px; }
  #plataforma .tablero-cifras + .tablero-fila { margin-top: 14px; }
  #plataforma .tablero-cifras > div { padding: 8px 11px; }
  #plataforma .tablero-grafica { height: 72px; }
  #plataforma .tablero-cifras b { font-size: 1rem; }
  #plataforma .tablero-fila-tres { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  #plataforma .tablero-fila-tres > :last-child { grid-column: auto; }
  #plataforma .tablero-canales { display: none; }

  /* Los pilares: el icono junto al nombre (los textos se abren en la rejilla de la tarjeta). */
  #pilares .seccion-cab { max-width: none; }
  #pilares .cadena { margin-top: 18px; }
  .tarjetas-pilar { margin-top: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tarjeta-pilar { grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: center; gap: 10px 12px; padding: 16px 18px; }
  .tarjeta-pilar .pilar-textos { display: contents; }
  .tarjeta-pilar h3, .tarjeta-pilar p { position: relative; }
  .tarjeta-pilar p { grid-column: 1 / -1; align-self: start; }
  .tarjeta-pilar .pilar-icono { grid-row: auto; width: 38px; height: 38px; border-radius: 10px; }
  .tarjeta-pilar .pilar-etiquetas { display: none; }
  .tarjeta-pilar .pilar-ir { grid-column: 1 / -1; margin-top: 0; }
  #pilares .a-tu-medida { margin-top: 12px; padding: 16px 28px; }
  #pilares .a-tu-medida h3 { max-width: none; font-size: 1.125rem; }

  /* La reflexión: la fila guarda el alto de la diapositiva más alta, pero no más que la pantalla. */
  .reflexion-fila { min-height: min(560px, calc(100vh - var(--cab-alto) - 2 * var(--aire))); }

  /* Cómo empieza */
  .caminos { margin-top: 28px; }
  .camino { gap: 14px; padding: 24px; }
  .pasos { gap: 8px; }

  /* Los planes */
  #planes > .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
  #planes > .contenedor > :not(.seccion-cab, .ciclo) { grid-column: 1 / -1; }
  #planes .seccion-cab { max-width: none; }
  #planes .ciclo { margin-top: 0; }
  .planes { margin-top: 24px; gap: 12px; }
  .plan { gap: 6px; padding: 16px; }
  .plan .cupo, .plan .topes { font-size: 0.875rem; }
  .plan .cupo { min-height: 0; }
  .plan .precio strong { font-size: 1.75rem; }
  .plan .precio-nota:empty { display: none; }
  .plan .topes { padding-top: 10px; }
  .plan .btn { min-height: 38px; margin-top: 4px; }
  .comparar { margin-top: 16px; }
  .comparar summary { min-height: 46px; }
  .ajusta { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 24px 28px; }

  /* Los aliados: la red a la derecha de lo que dice y de los pasos; los beneficios, abajo a todo el
     ancho. El texto se abre en la rejilla (display: contents) solo aquí: en el teléfono va en orden. */
  .aliados-fila { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto auto auto 1fr auto; column-gap: 56px; row-gap: 0; align-items: start;
    grid-template-areas: "ante red" "titulo red" "bajada red" "pasos red" "acciones red" ". red" "beneficios beneficios"; }
  .aliados-texto { display: contents; }
  .aliados-texto > .antetitulo { grid-area: ante; justify-self: start; }
  .aliados-texto > h2 { grid-area: titulo; }
  .aliados-bajada { grid-area: bajada; }
  .aliados-pasos { grid-area: pasos; margin-top: 20px; }
  .aliados-pasos li { padding-top: 10px; font-size: 0.875rem; line-height: 1.45; }
  .aliados-acciones { grid-area: acciones; margin-top: 22px; }
  .aliados-beneficios { grid-area: beneficios; margin-top: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aliados-beneficios li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 12px 14px; font-size: 0.8125rem; line-height: 1.45; }
  .aliados-beneficios .aliado-icono { width: 32px; height: 32px; border-radius: 9px; }
  .aliados-beneficios .aliado-icono svg { width: 18px; height: 18px; }
  .aliados-red { grid-area: red; position: static; align-self: center; }
  .aliados-red svg { max-width: 340px; }

  /* El detalle de los pilares (pilares.html): cada pilar es una pantalla, y la sección del agente,
     tres: lo que es con el chat, los quince módulos (en dos tandas de ocho y siete) y las otras apps. */
  .detalles { gap: 20px; }
  .detalle { gap: 18px 32px; padding: 28px; scroll-margin-top: 20px; }
  .detalle .derivados { gap: 8px; }
  .detalle .derivados li { padding: 11px 12px 11px 40px; font-size: 0.875rem; line-height: 1.45; }
  .detalle .derivados li::before { left: 12px; top: 11px; }
  .pilar-ia { padding: 10px 14px; }
  .agente-detalle { scroll-margin-top: 0; }
  .agente-detalle .modulos-ia-cab, .agente-detalle .apps { scroll-margin-top: 40px; }
  .modulos-ia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .modulos-ia li { gap: 6px; padding: 14px 14px 14px 16px; }
  .modulos-ia p { font-size: 0.8125rem; line-height: 1.45; }
  .modulos-ia > li:nth-child(9) { scroll-margin-top: 24px; }

  /* Las preguntas */
  #preguntas .seccion-cab { top: calc(var(--cab-alto) + 24px); }
  .preguntas summary { padding: 13px 0; font-size: 1rem; }
  .preguntas summary::after { width: 26px; height: 26px; }
}
/* En las pantallas bajas de portátil (unos 1366 × 768) y en las ventanas angostas, menos aire, títulos un punto menores y fuera
   lo secundario: el «Ver detalle» de los pilares (toda la tarjeta es el enlace), los pasos de los
   aliados (los cuenta la conversación), las cifras «A hoy» del tablero y las bajadas de las otras
   apps y de los planes, que repiten lo que dicen sus títulos. */
@media (min-width: 960px) and (max-height: 760px), (min-width: 960px) and (max-width: 1199px) {
  :root { --aire: clamp(24px, 4.5vh, 40px); }
  .seccion-cab h2, .aliados h2 { font-size: 1.875rem; }
  .seccion-cab p { margin-top: 10px; }
  .agente-texto h2, .reflexion h2 { font-size: 2.375rem; }
  .tarjeta-pilar .pilar-ir, .aliados-pasos { display: none; }
  #plataforma .tablero-panel > :nth-child(4), #plataforma .tablero-panel > :nth-child(5) { display: none; }
  .agente-con-apps .apps-cab p, #planes .seccion-cab p { display: none; }
  .agente-con-apps .combos { margin-top: 18px; }
  .agente-con-apps .combo { padding: 10px 14px; }
  .tarjeta-pilar { padding: 14px 16px; }
  #pilares .a-tu-medida { padding: 12px 24px; }
  .caminos { margin-top: 20px; }
  .camino { gap: 12px; padding: 20px; }
  .giro { gap: 6px; padding: 14px; }
  .aliados-red svg { max-width: 280px; }
  .detalle { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 14px 24px; padding: 22px; }
  .detalle .derivados li { padding: 9px 10px 9px 36px; }
  .detalle .derivados li::before { left: 10px; top: 9px; }
}
/* Entre 960 y 1100 px no caben el menú y los botones a la medida de siempre. */
@media (min-width: 940px) and (max-width: 1099px) { .cab-nav { margin-left: 4px; } .cab-nav a { padding: 8px 7px; font-size: 0.875rem; } .cab-fila { gap: 10px; } }
/* El imán, en la portada y en el detalle de los pilares, con una ventana de PC de alto suficiente. Lo lleva landing.js, con un
   deslizamiento suave (clase «iman»): entonces el snap del navegador, que salta seco, se apaga. Sin
   JavaScript o con «reducir movimiento» queda este snap de proximidad, que solo atrae de cerca. */
@media (min-width: 960px) and (min-height: 640px) {
  html.portada, html.detalle-pilares { scroll-snap-type: y proximity; }
  html.iman { scroll-snap-type: none; }
  .portada main > section, .detalle-pilares main > section { scroll-snap-align: start; }
  .portada #planes .ajusta { scroll-snap-align: start; scroll-margin-top: 24px; }
  .detalle, .agente-detalle .modulos-ia-cab, .modulos-ia > li:nth-child(9), .agente-detalle .apps { scroll-snap-align: start; }
}