/* ============================================================================
   NovaCAD — Landing (freemium + precio DUAL) · Estilos
   Minimalismo estilo Claude (Anthropic) × Autodesk: mucho aire, una idea por
   sección, acento azul reservado al botón principal.
   Mobile-first. Tokens visuales en ../tokens/tokens.css (Design System de Lili).
   ============================================================================ */

@import url("../tokens/tokens.css");

/* ---- Reset ligero ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--nc-font);
  font-size: var(--nc-fs-body);
  line-height: var(--nc-lh-body);
  color: var(--nc-text);
  background: var(--nc-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---- Utilidades de layout ---- */
.nc-container {           /* ancho máximo + aire lateral */
  width: 100%;
  max-width: var(--nc-maxw);
  margin-inline: auto;
  padding-inline: var(--nc-sp-4);
}
.nc-section {             /* aire generoso entre secciones */
  padding-block: var(--nc-sp-7);
}
.nc-measure {             /* ancho cómodo de lectura, centrado */
  max-width: var(--nc-maxw-text);
  margin-inline: auto;
}
.nc-center { text-align: center; }

/* ---- Tipografía base ---- */
h1, h2, h3 { line-height: var(--nc-lh-tight); letter-spacing: -0.02em; margin: 0; }
h1 { font-size: var(--nc-fs-hero); font-weight: var(--nc-w-bold); }
h2 { font-size: var(--nc-fs-h2);  font-weight: var(--nc-w-semibold); }
h3 { font-size: var(--nc-fs-h3);  font-weight: var(--nc-w-semibold); }
p  { margin: 0; color: var(--nc-text-soft); }
.nc-eyebrow {             /* etiqueta pequeña sobre los titulares */
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-text-faint);
  margin-bottom: var(--nc-sp-3);
}
/* Variante PDF: acento rojo del Design System, reservado a la sección de ploteo */
.nc-eyebrow--pdf { color: var(--nc-pdf); }

/* ---- Botones ---- */
.nc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nc-sp-2);
  font-size: var(--nc-fs-body);
  font-weight: var(--nc-w-semibold);
  padding: 14px 26px;
  border-radius: var(--nc-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.nc-btn:active { transform: translateY(1px); }

/* Primario: ÚNICO uso del acento azul */
.nc-btn--primary { background: var(--nc-accent); color: #fff; }
.nc-btn--primary:hover { background: var(--nc-accent-hover); }

/* Secundario: sobrio, sin acento */
.nc-btn--ghost {
  background: var(--nc-panel);
  color: var(--nc-text);
  border-color: var(--nc-divider);
}
.nc-btn--ghost:hover { border-color: var(--nc-text-faint); }

/* ---- Navegación (sticky, minimal) ---- */
.nc-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,245,247,.8);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--nc-divider);
}
.nc-nav__row {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.nc-brand { display: flex; align-items: center;
  font-weight: var(--nc-w-bold); letter-spacing: -0.01em; }
.nc-brand img { height: 28px; width: auto; display: block; }  /* logo oficial; alto fijado en el HTML, ancho proporcional */
/* En móvil la nav muestra solo el botón (CTA persistente); los enlaces de sección
   se ocultan < 760px y reaparecen en desktop. */
.nc-nav__links { display: flex; gap: var(--nc-sp-4); align-items: center; }
.nc-nav__links a:not(.nc-btn) { display: none; }
.nc-nav__links a { color: var(--nc-text-soft); font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-medium); }
.nc-nav__links a:hover { color: var(--nc-text); }
.nc-nav .nc-btn { padding: 9px 18px; font-size: var(--nc-fs-small); }

/* ---- Hero ---- */
.nc-hero { padding-block: var(--nc-sp-7) var(--nc-sp-6); }
.nc-hero h1 { margin-bottom: var(--nc-sp-4); }
.nc-hero p.lead { font-size: 1.25rem; color: var(--nc-text-soft);
  margin-bottom: var(--nc-sp-5); }
.nc-cta-row { display: flex; flex-wrap: wrap; gap: var(--nc-sp-3);
  justify-content: center; margin-bottom: var(--nc-sp-3); }
.nc-microcopy { font-size: var(--nc-fs-small); color: var(--nc-text-faint); }
.nc-microcopy span { white-space: nowrap; }

/* Marco de captura del producto */
.nc-shot {
  margin-top: var(--nc-sp-6);
  background: #ECEEF2;           /* gris ligeramente más oscuro que --nc-bg: da contexto de "pantalla dentro de entorno" */
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius); /* 12px: proporcional al tamaño del frame; 20px es excesivo para un screenshot */
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 48px rgba(0,0,0,.09); /* presencia suficiente para que el frame flote */
  padding: 12px 12px 0;          /* aire superior y lateral: la captura respira dentro del marco */
  overflow: hidden;
}
.nc-shot img {
  width: 100%;
  height: auto;                 /* FIX distorsión: el <img> trae height="812"; sin esto el alto queda fijo y la imagen se estira */
  border-radius: 8px 8px 0 0;   /* solo esquinas superiores: la imagen "apoya" en el marco */
  display: block;
}
.nc-shot__ph {                /* placeholder visible si aún no hay captura */
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  color: var(--nc-text-faint); font-size: var(--nc-fs-small);
  background:
    repeating-linear-gradient(45deg, #fafafa 0 12px, #f1f1f4 12px 24px);
}

/* ============================================================================
   SHOWCASE de las 4 pestañas — tabs interactivas + frame anti-distorsión
   Fusionado dentro del HERO (2026-06-15): es el único visual del viewport inicial.
   Misma familia visual que la app (acero azul) y que el marco de captura del hero.
   ============================================================================ */
.nc-showcase .nc-eyebrow { margin-bottom: var(--nc-sp-2); }
.nc-showcase h2 { margin-bottom: var(--nc-sp-5); }

/* Separación entre el bloque de texto del hero y la barra de tabs.
   Antes la separaba el h2 "Conoce NovaCAD" (ya eliminado en la fusión);
   este margen superior recupera ese aire para que el showcase no quede pegado. */
.nc-hero .nc-tabs { margin-top: var(--nc-sp-6); }

/* ---- Barra de pestañas (imita la topbar de la app) ---- */
.nc-tabs {
  display: flex;
  gap: var(--nc-sp-1);
  max-width: var(--nc-maxw-text);
  margin: 0 auto var(--nc-sp-4);
  padding: 6px;
  background: var(--nc-panel);
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius-pill);
  overflow-x: auto;                       /* móvil: scroll horizontal si no caben */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                  /* oculta la barra de scroll (Firefox) */
}
.nc-tabs::-webkit-scrollbar { display: none; }  /* idem WebKit */

.nc-tab {
  flex: 1 0 auto;
  white-space: nowrap;
  font-family: inherit;
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  letter-spacing: 0.02em;
  color: var(--nc-text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--nc-radius-pill);
  padding: 9px 18px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nc-tab:hover { color: var(--nc-text); }
.nc-tab.is-active {                       /* pestaña activa = acento acero azul */
  color: #fff;
  background: var(--nc-accent);
}
.nc-tab:focus-visible {                   /* foco visible accesible */
  outline: 2px solid var(--nc-accent);
  outline-offset: 2px;
}

/* ---- Frame del showcase: aspect-ratio fijo → ninguna captura se deforma ---- */
.nc-shot--showcase { padding: 12px; }     /* aire uniforme en los 4 lados */

.nc-shot__frame {
  aspect-ratio: 1242 / 812;               /* tamaño nativo de la ventana de la app */
  border-radius: var(--nc-radius-sm);
  overflow: hidden;
}
.nc-shot__frame[hidden] { display: none; }
.nc-shot__frame:focus-visible {
  outline: 2px solid var(--nc-accent);
  outline-offset: 2px;
}
.nc-shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;                    /* nunca recorta ni estira la captura */
  border-radius: var(--nc-radius-sm);
  display: block;
}
/* Video loop del ploteo (stand-by): calca al <img> del showcase para no romper el frame */
.nc-shot__frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;                    /* mismo trato que la captura: ni recorta ni estira */
  border-radius: var(--nc-radius-sm);
  display: block;
}

/* Placeholder elegante (capturas aún no subidas) — ocupa el frame completo */
.nc-shot--showcase .nc-shot__ph {
  aspect-ratio: auto;                     /* el frame ya impone la proporción */
  width: 100%; height: 100%;
  flex-direction: column;
  gap: var(--nc-sp-2);
  border-radius: var(--nc-radius-sm);
}
.nc-shot__ph-file {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--nc-fs-small);
  color: var(--nc-text-soft);
}
.nc-shot__ph-note {
  font-size: var(--nc-fs-small);
  color: var(--nc-text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Caption (beneficio por pestaña) bajo el frame */
.nc-shot__caption {
  margin-top: var(--nc-sp-4);
  font-size: 1.2rem;
  color: var(--nc-text);
  font-weight: var(--nc-w-medium);
}

/* ---- Bloque "el problema" ---- */
.nc-problem { text-align: center; }
.nc-problem p { font-size: 1.35rem; color: var(--nc-text);
  font-weight: var(--nc-w-medium); }
.nc-problem .accent { color: var(--nc-dwg); }

/* ---- Tarjetas de beneficio ---- */
.nc-card {
  background: var(--nc-panel);
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius);
  padding: var(--nc-sp-5);
}
.nc-card__tag {
  display: inline-block; font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold); letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: var(--nc-radius-pill);
  margin-bottom: var(--nc-sp-3);
}
.nc-card__tag--dwg { color: var(--nc-dwg); background: rgba(22,163,74,.10); }
.nc-card__tag--pdf { color: var(--nc-pdf); background: rgba(220,38,38,.10); }
.nc-card__tag--mms { color: var(--nc-mms); background: rgba(37,99,235,.10); }
.nc-card h3 { margin-bottom: var(--nc-sp-2); }

/* ---- Beneficios secundarios (2 tarjetas "y además") ---- */
.nc-grid-2 {
  display: grid; gap: var(--nc-sp-4);
  grid-template-columns: 1fr;
  margin-top: var(--nc-sp-5);
}

/* ---- PROTAGONISTA: sección destacada de ploteo masivo ---- */
.nc-feature {                 /* panel claro, mayor peso visual que las demás */
  background: var(--nc-panel);
  border-block: 1px solid var(--nc-divider);
}
.nc-cta-after {               /* CTA que cierra una sección de texto (antes inline style — plan C.2) */
  margin-top: var(--nc-sp-5);
}

/* ---- Movimiento sutil (plan Fase 3): scroll-reveal con cascadas ----
   Los .rv nacen invisibles SOLO si hay JS (html.js, seteado en el <head>);
   un IntersectionObserver inline al final del body los revela al entrar en
   viewport, una sola vez. prefers-reduced-motion lo apaga (accesibilidad). */
.js .rv {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--rv-d, 0s);
}
.js .rv.is-in { opacity: 1; transform: none; }
/* Cascadas: los hermanos entran escalonados */
.nc-steps .rv:nth-child(2)      { --rv-d: .1s; }
.nc-steps .rv:nth-child(3)      { --rv-d: .2s; }
.nc-steps .rv:nth-child(4)      { --rv-d: .3s; }
.nc-testi-grid .rv:nth-child(2) { --rv-d: .12s; }
.nc-testi-grid .rv:nth-child(3) { --rv-d: .24s; }
.nc-card.rv + .nc-card.rv       { --rv-d: .12s; }
.nc-tiers__grid .rv:nth-child(2){ --rv-d: .15s; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
}
.nc-band {                    /* banda de fondo alterno: rompe la monotonía del scroll
                                 en secciones de texto largas (SEO). Mismo lenguaje que
                                 .nc-feature, sin su rol de "estrella". El wrapper interno
                                 lleva .nc-section .nc-container (la banda es full-width). */
  background: var(--nc-panel);
  border-block: 1px solid var(--nc-divider);
}

/* ---- Banda de contexto (full-bleed, atmosférica): foto slate + velo + una línea de marca.
   Respiro fotográfico entre el demo y el bloque comercial. Mismo patrón full-bleed que .nc-band
   (sección a todo el ancho + wrapper .nc-container dentro). ---- */
.nc-context {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(240px, 34vw, 400px);
  overflow: hidden;
  background: #0a121c;                       /* respaldo mientras carga la foto */
  border-block: 1px solid var(--nc-divider);
}
.nc-context__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;   /* muestra el blueprint + puntas del compás */
  display: block;
}
.nc-context__scrim {                          /* velo slate a la izquierda: legibilidad del texto */
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(9,16,25,.86) 0%, rgba(9,16,25,.52) 40%, rgba(9,16,25,.06) 72%);
}
.nc-context .nc-container { position: relative; }  /* el texto va SOBRE el velo */
.nc-context__ey {
  display: block;
  font-size: .78rem; font-weight: var(--nc-w-bold);
  letter-spacing: .14em; text-transform: uppercase;
  color: #a9c6ff; margin-bottom: var(--nc-sp-2);
}
.nc-context__h {
  margin: 0; max-width: 20ch;
  color: #fff;
  font-size: clamp(1.4rem, 3.2vw, 2.05rem);
  line-height: 1.14; letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0,0,0,.32);
}
.nc-measure-wide {            /* algo más ancho que .nc-measure: es la estrella */
  max-width: 760px; margin-inline: auto;
}
.nc-feature h2 { margin-bottom: var(--nc-sp-4); }
.nc-feature__lead {
  font-size: 1.2rem; color: var(--nc-text-soft);
  margin-bottom: var(--nc-sp-5);
}
.nc-feature__list {
  list-style: none; padding: 0; margin: 0 0 var(--nc-sp-6);
  display: grid; gap: var(--nc-sp-4);
}
.nc-feature__list li {
  padding-left: var(--nc-sp-4);
  border-left: 3px solid var(--nc-pdf);   /* acento PDF (rojo) con criterio, sin saturar */
}
.nc-feature__list strong { color: var(--nc-text); display: block;
  margin-bottom: var(--nc-sp-1); }

/* ---- Cómo funciona (pasos) ---- */
.nc-steps { display: grid; gap: var(--nc-sp-5); grid-template-columns: 1fr;
  margin-block: var(--nc-sp-5); }
.nc-step__num {
  width: 36px; height: 36px; border-radius: var(--nc-radius-pill);
  background: var(--nc-text); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--nc-w-bold); margin-bottom: var(--nc-sp-3);
  margin-inline: auto;        /* centrado en su paso (antes inline style — plan C.2) */
}
.nc-step h3 { margin-bottom: var(--nc-sp-1); }

/* ---- Seguridad / garantía ---- */
.nc-safety { background: var(--nc-panel); border-block: 1px solid var(--nc-divider); }
.nc-safety ul { list-style: none; padding: 0; margin: var(--nc-sp-5) 0 0;
  display: grid; gap: var(--nc-sp-3); }
.nc-safety li { display: flex; gap: var(--nc-sp-3); align-items: flex-start; }
/* Checklist reutilizable FUERA de .nc-safety (sub-landings SEO — VB Lili 1.2/1.6):
   mismas reglas que .nc-safety ul/li pero sin exigir la banda panel. */
.nc-checklist { list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--nc-sp-3); }
.nc-checklist li { display: flex; gap: var(--nc-sp-3); align-items: flex-start; }
.nc-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(22,163,74,.12); color: var(--nc-dwg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--nc-w-bold); margin-top: 3px;
}

/* ============================================================================
   SECCIÓN PRECIO — Grid de 2 tarjetas: Individual (primaria) + Pack Oficina
   Desktop: lado a lado (max 920px). Móvil: apiladas.
   Individual lleva mayor peso visual (borde accent, sombra más pronunciada).
   Pack Oficina es secundaria pero completa y coherente con el mismo lenguaje.
   ============================================================================ */

/* Subtítulo de la cabecera de sección precio */
.nc-price-section-sub {
  font-size: 1.1rem;
  color: var(--nc-text-soft);
  margin-top: var(--nc-sp-3);
  line-height: var(--nc-lh-body);
}

/* ---- Toggle Anual ↔ De por vida (segmented control minimalista) ----
   Gris en reposo; el activo es panel blanco con sombra sutil. El acento azul
   solo aparece en :focus-visible y en los CTA, para no añadir ruido. */
.nc-price-toggle {
  display: inline-flex;
  gap: 2px;
  margin: var(--nc-sp-4) auto 0;
  padding: 4px;
  background: var(--nc-bg);
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius-pill);
}
.nc-price-toggle__opt {
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  color: var(--nc-text-soft);
  padding: 8px 20px;
  border-radius: var(--nc-radius-pill);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.nc-price-toggle__opt.is-active {
  background: var(--nc-panel);
  color: var(--nc-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.nc-price-toggle__opt:focus-visible {
  outline: 2px solid var(--nc-accent);
  outline-offset: 2px;
}
/* Sufijo "/año" más discreto que el monto (solo visible en plan anual) */
.nc-price__suffix {
  font-size: 1.1rem;
  font-weight: var(--nc-w-regular);
  color: var(--nc-text-soft);
  letter-spacing: 0;
}

/* Grid contenedor de las 2 tarjetas */
.nc-price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nc-sp-4);
  max-width: 920px;
  margin-inline: auto;
  margin-top: var(--nc-sp-5);
  align-items: start;   /* alineación top: cada tarjeta crece hacia abajo independientemente */
}

/* ---- Base compartida de ambas tarjetas ---- */
.nc-price-card {
  background: var(--nc-panel);
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius-lg);
  padding: var(--nc-sp-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--nc-sp-3);
  position: relative;
}

/* ---- Tarjeta INDIVIDUAL (primaria / destacada) ----
   Borde acento sutil + sombra más pronunciada = más peso visual sin gritarlo.
   La jerarquía se comunica por presencia, no por color de fondo diferente. */
.nc-price-card--featured {
  border-color: rgba(29, 78, 216, 0.30);   /* azul acento, opacidad baja */
  box-shadow: 0 2px 6px rgba(29,78,216,.06), 0 12px 40px rgba(0,0,0,.09);
}

/* ---- Tarjeta PACK OFICINA (secundaria) ----
   Misma estructura base, sin énfasis de borde; la diferencia viene del pill de label. */
.nc-price-card--pack {
  box-shadow: var(--nc-shadow);
}

/* ---- Pill "Más popular" (solo Individual) ----
   Azul acento, muy sutil, idéntico al lenguaje de badges de tiers PRO. */
.nc-price-card__popular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-accent);
  background: rgba(29, 78, 216, 0.08);
  border: 1px solid rgba(29, 78, 216, 0.20);
  padding: 5px 14px;
  border-radius: var(--nc-radius-pill);
  align-self: center;
}

/* ---- Pill "Pack Oficina" (solo Pack) ----
   Gris neutro oscuro: diferenciador sin urgencia, no compite con el badge ámbar. */
.nc-price-card__pack-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #374151;
  background: rgba(55, 65, 81, 0.08);
  border: 1px solid rgba(55, 65, 81, 0.18);
  padding: 5px 14px;
  border-radius: var(--nc-radius-pill);
  align-self: center;
}

/* ---- Badge de escasez: ámbar (warn). ----
   El azul es la acción principal (comprar); el ámbar codifica urgencia/límite.
   Usar el mismo semántico que el aviso de SmartScreen mantiene coherencia. */
.nc-badge--scarcity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  color: var(--nc-warn-text);
  background: var(--nc-warn-bg);
  border: 1px solid var(--nc-warn-border);
  padding: 5px 14px;
  border-radius: var(--nc-radius-pill);
  letter-spacing: 0.01em;
  align-self: center;
}
/* Punto de pulso: señal visual de "en curso / limitado" sin ser estridente */
.nc-badge--scarcity::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nc-warn-text);
  opacity: .7;
  flex-shrink: 0;
}
/* Pack: el badge de arranque no lleva punto de pulso (no es de cupo contable) */
.nc-badge--scarcity-pack::before {
  display: none;
}

/* ---- Título de la tarjeta ---- */
.nc-price-card__title {
  font-size: var(--nc-fs-h3);
  font-weight: var(--nc-w-semibold);
  color: var(--nc-text);
  margin: 0;
}

/* ---- Slot del ancla: reserva la altura de una línea SIEMPRE. ----
   Desde v3.4 el ancla es visible en ambos planes (precios-dual.js solo intercambia
   el monto regular por plan, ya no hace display:none). El slot conserva el alto y
   mantiene el bloque estable al alternar. Lili 2026-06-16 · upd. 2026-06-17. */
.nc-price-anchor-slot {
  min-height: 1.62rem;   /* 1.35rem * 1.2 ≈ una línea del ancla */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Ancla de precio tachada: menor que el héroe, pero legible.
   Color faint: es información contextual, no protagonista. ---- */
.nc-price-anchor {
  font-size: 1.35rem;
  font-weight: var(--nc-w-regular);
  color: var(--nc-text-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin: 0;
  line-height: 1.2;
}

/* ---- Precio héroe: mantiene el 3rem y bold.
   El contraste con el ancla tachada amplifica la percepción de ahorro. ---- */
.nc-price {
  font-size: 3rem;
  font-weight: var(--nc-w-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--nc-text);
}

/* ---- Escalera: debajo del héroe, una sola línea.
   Color faint porque es información futura, no presente. ---- */
.nc-price-ladder {
  font-size: var(--nc-fs-small);
  color: var(--nc-text-faint);
  font-weight: var(--nc-w-regular);
  line-height: 1.4;
  margin: 0;
}

/* ---- Gancho de valor: peso medium, color soft. Sin color semántico.
   Texto plano (no itálica): el copy de ambas tarjetas ya es final y una
   afirmación de valor debe leerse firme, no como nota tentativa. La itálica
   leía como aside/placeholder y restaba autoridad junto al precio héroe.
   Decisión Lili 2026-06-16 (cierra pendiente histórico del value-hook). ---- */
.nc-price-value {
  font-size: var(--nc-fs-body);
  font-weight: var(--nc-w-medium);
  color: var(--nc-text-soft);
  line-height: 1.4;
  margin: 0;
  font-style: normal;
}

/* ---- Lista de qué incluye (dentro de la tarjeta) ---- */
.nc-price-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--nc-sp-2);
  text-align: left;
}
.nc-price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--nc-sp-2);
  font-size: var(--nc-fs-body);
  color: var(--nc-text-soft);
  line-height: 1.45;
}
/* Checkmark de la lista: azul acento para Individual y Pack por igual
   (el check es neutro dentro de la tarjeta; el badge diferencia). */
.nc-price-card__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(29,78,216,.10);
  color: var(--nc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--nc-w-bold);
  margin-top: 2px;
}

/* ---- Bloque de CTA dentro de la tarjeta ---- */
.nc-price-card__cta {
  display: flex;
  flex-direction: column;
  gap: var(--nc-sp-2);
}
.nc-price-card__cta .nc-btn {
  width: 100%;
}

/* ---- Línea de contacto bajo el CTA del Pack ---- */
.nc-price-card__contact {
  font-size: var(--nc-fs-small);
  color: var(--nc-text-soft);
  line-height: 1.5;
  margin: 0;
}
.nc-price-card__contact a {
  color: var(--nc-accent);
  font-weight: var(--nc-w-medium);
  text-decoration: underline;
  text-decoration-color: rgba(29,78,216,.30);
}
.nc-price-card__contact a:hover {
  text-decoration-color: var(--nc-accent);
}

/* ---- Microcopy de urgencia / entrega (debajo del CTA) ---- */
.nc-price-urgency {
  font-size: var(--nc-fs-small);
  color: var(--nc-text-faint);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}

/* ============================================================================
   BLOQUE DE REGALO (PERKS) — Solo visible en la tarjeta Pack Oficina.
   Diseño: separador visual + fondo ámbar muy sutil (mismo token warn que el
   badge de escasez). Lee como "bonus extra", no como ítem de lista normal.
   El "+" como ícono refuerza "más de lo que esperas" sin recurrir a emojis.
   ============================================================================ */
.nc-pack-perks {
  border-top: 1px solid var(--nc-warn-border);   /* separador ámbar: delimita el bloque */
  padding-top: var(--nc-sp-3);
  background: var(--nc-warn-bg);                 /* fondo cálido muy sutil */
  border-radius: var(--nc-radius-sm);
  padding: var(--nc-sp-3);
  margin-inline: calc(-1 * var(--nc-sp-2));      /* leve sangrado negativo: el bloque "respira" dentro de la tarjeta */
}

/* Encabezado del bloque: etiqueta categórica, estilo eyebrow ámbar */
.nc-pack-perks__heading {
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nc-warn-text);
  margin-bottom: var(--nc-sp-2);
  text-align: left;
}

/* Lista de perks */
.nc-pack-perks__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--nc-sp-2);
}

/* Ítem de perk */
.nc-pack-perks__item {
  display: flex;
  align-items: flex-start;
  gap: var(--nc-sp-2);
  font-size: var(--nc-fs-body);
  color: var(--nc-text-soft);
  line-height: 1.45;
  text-align: left;
}

/* Ícono "+" como señal de valor añadido */
.nc-pack-perks__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nc-warn-border);
  color: var(--nc-warn-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--nc-w-bold);
  margin-top: 2px;
  line-height: 1;
}

/* El strong dentro de un perk hereda color del texto principal (no del soft),
   para que los nombres de los plugins se lean con más peso */
.nc-pack-perks__item strong {
  color: var(--nc-text);
}

/* ============================================================================
   BLOQUE GRATIS vs PRO — Puente entre "Y además" y la sección de Precio.
   Layout: 2 columnas iguales en desktop, apiladas en móvil.
   Token teal: --nc-teal-* (solo para PRO-unlock; no reutilizar en otros contextos).
   ============================================================================ */

/* Token teal (no existe en tokens.css; confinado a este bloque) */
.nc-tiers {
  --nc-teal:        #0D9488;    /* teal unlock: invitación a desbloquear, no carencia */
  --nc-teal-bg:     rgba(13,148,136,.07);
  --nc-teal-border: rgba(13,148,136,.22);
}

/* Sección contenedora */
.nc-tiers {
  padding-block: var(--nc-sp-7);
}

/* Cabecera del bloque */
.nc-tiers__head {
  text-align: center;
  margin-bottom: var(--nc-sp-5);
}
.nc-tiers__head h2 { margin-bottom: var(--nc-sp-3); }
.nc-tiers__head p {
  font-size: 1.2rem;
  max-width: var(--nc-maxw-text);
  margin-inline: auto;
}

/* Grid de las dos columnas */
.nc-tiers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nc-sp-4);
  max-width: 860px;
  margin-inline: auto;
}

/* Columna base (compartida) */
.nc-tier {
  background: var(--nc-panel);
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius-lg);
  padding: var(--nc-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--nc-sp-3);
}

/* --- Columna GRATIS --- */
.nc-tier--free {
  /* Sin diferenciación de color: el nivel gratis es neutro, sin ruido visual */
}
.nc-tier--free .nc-tier__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-dwg);                    /* verde DWG = seguro, incluido */
  background: rgba(22,163,74,.09);
  border: 1px solid rgba(22,163,74,.20);
  padding: 5px 12px;
  border-radius: var(--nc-radius-pill);
}

/* --- Columna PRO --- */
.nc-tier--pro {
  border-color: var(--nc-teal-border);
  background: var(--nc-teal-bg);           /* fondo teal muy sutil: la columna se distingue sin gritar */
  position: relative;
}

/* Línea izquierda como firma visual de la columna PRO */
.nc-tier--pro::before {
  content: "";
  position: absolute;
  left: 0; top: var(--nc-radius-lg); bottom: var(--nc-radius-lg);
  width: 3px;
  background: var(--nc-teal);
  border-radius: 0 3px 3px 0;
}

.nc-tier--pro .nc-tier__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-teal);
  background: rgba(13,148,136,.10);
  border: 1px solid var(--nc-teal-border);
  padding: 5px 12px;
  border-radius: var(--nc-radius-pill);
}

/* Icono candado (SVG inline embebido en el badge PRO via ::before del span) */
.nc-tier__lock {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  /* SVG candado semiabierto: señal de "puedes desbloquear" */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='7' width='12' height='8' rx='2' fill='%230D9488' opacity='.15'/%3E%3Crect x='2' y='7' width='12' height='8' rx='2' stroke='%230D9488' stroke-width='1.4'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 5.5-1.6' stroke='%230D9488' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='8' cy='11' r='1.2' fill='%230D9488'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Titulares de columna */
.nc-tier__title {
  font-size: var(--nc-fs-h3);
  font-weight: var(--nc-w-semibold);
  color: var(--nc-text);
  margin: 0;
}

/* Subtítulo de columna (descripción corta del nivel) */
.nc-tier__subtitle {
  font-size: var(--nc-fs-body);
  color: var(--nc-text-soft);
  margin: 0;
  line-height: var(--nc-lh-body);
}

/* Lista de funciones por nivel */
.nc-tier__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--nc-sp-2);
}

.nc-tier__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--nc-sp-2);
  font-size: var(--nc-fs-body);
  color: var(--nc-text-soft);
  line-height: 1.45;
}

/* Checkmark GRATIS: verde DWG */
.nc-tier--free .nc-tier__check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(22,163,74,.12);
  color: var(--nc-dwg);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--nc-w-bold);
  margin-top: 2px;
}

/* Checkmark PRO: teal */
.nc-tier--pro .nc-tier__check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(13,148,136,.12);
  color: var(--nc-teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--nc-w-bold);
  margin-top: 2px;
}

/* CTA dentro de la columna PRO */
.nc-tier__cta {
  margin-top: auto;                        /* empuja el CTA al fondo de la columna */
  padding-top: var(--nc-sp-3);
}
.nc-tier__cta .nc-btn {
  width: 100%;
}

/* ---- Descarga + aviso honesto ----
   Panel NEUTRO y plegable (<details>): cerrado por defecto, en gris discreto.
   Antes era un recuadro ámbar grande que, hablando de "sin firma" y VirusTotal,
   leía como alerta de peligro/virus. Ahora es un resorte sereno y opcional. */
.nc-download { text-align: center; }
.nc-notice {
  margin-top: var(--nc-sp-5); text-align: left;
  background: var(--nc-panel);
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius);
  font-size: var(--nc-fs-small);
  color: var(--nc-text-soft);
  overflow: hidden;
}
/* Cabecera plegable: discreta, clic para abrir */
.nc-notice > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--nc-sp-3) var(--nc-sp-4);
  font-weight: var(--nc-w-medium);
  color: var(--nc-text-soft);
  display: flex; align-items: center; gap: 8px;
  user-select: none;
}
.nc-notice > summary::-webkit-details-marker { display: none; }
.nc-notice > summary::before {
  content: "›";
  color: var(--nc-text-faint);
  font-size: 1.1em; line-height: 1;
  transition: transform .15s ease;
}
.nc-notice[open] > summary::before { transform: rotate(90deg); }
.nc-notice > summary:hover { color: var(--nc-text); }
/* Cuerpo: sólo visible al abrir */
.nc-notice__body {
  padding: 0 var(--nc-sp-4) var(--nc-sp-4);
  border-top: 1px solid var(--nc-divider);
  padding-top: var(--nc-sp-3);
}
.nc-notice strong { color: var(--nc-text); }
.nc-notice code {
  display: inline-block; word-break: break-all;
  background: rgba(0,0,0,.05); padding: 2px 6px; border-radius: 6px;
  font-size: 0.8rem; color: var(--nc-text);
}
.nc-notice a { color: var(--nc-accent); font-weight: var(--nc-w-medium); }

/* ============================================================================
   TESTIMONIOS (prueba social) — tarjetas de texto + autor con foto/iniciales.
   Grilla auto-fit: 3 a 5 tarjetas se reacomodan solas (1 col móvil, 2-3 desktop).
   Estética sobria del DS: panel blanco, borde sutil, comilla como acento.
   ============================================================================ */
.nc-testi-grid {
  list-style: none; padding: 0;
  margin: var(--nc-sp-6) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--nc-sp-4);
  text-align: left;
}
.nc-testi {
  background: var(--nc-panel);
  border: 1px solid var(--nc-divider);
  border-radius: var(--nc-radius);
  padding: var(--nc-sp-4);
  box-shadow: var(--nc-shadow);
  display: flex; flex-direction: column; gap: var(--nc-sp-4);
}
/* Comilla decorativa sobre la cita */
.nc-testi__quote {
  position: relative;
  margin: 0;
  color: var(--nc-text);
  line-height: 1.55;
  font-size: 1.0625rem;
}
.nc-testi__quote::before {
  content: "\201C";
  display: block;
  font-size: 2.4rem; line-height: .6;
  color: var(--nc-accent);
  margin-bottom: var(--nc-sp-2);
  font-family: Georgia, "Times New Roman", serif;
}
/* Bloque autor: avatar + datos */
.nc-testi__author {
  display: flex; align-items: center; gap: var(--nc-sp-3);
  margin-top: auto;
}
.nc-testi__avatar {
  width: 48px; height: 48px;
  border-radius: var(--nc-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--nc-divider);
}
/* Avatar de iniciales (placeholder mientras no hay foto real) */
.nc-testi__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--nc-bg);
  color: var(--nc-text);
  font-weight: var(--nc-w-semibold);
  font-size: var(--nc-fs-small);
  letter-spacing: .03em;
}
.nc-testi__meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.nc-testi__name {
  font-weight: var(--nc-w-semibold); color: var(--nc-text);
}
.nc-testi__role {
  font-size: var(--nc-fs-small); color: var(--nc-text-soft);
}
.nc-testi__link {
  font-size: var(--nc-fs-small);
  color: var(--nc-accent);
  font-weight: var(--nc-w-medium);
  margin-top: 2px;
}
.nc-testi__link:hover { text-decoration: underline; }

/* ---- FAQ (acordeón nativo) ---- */
.nc-faq { margin-top: var(--nc-sp-5); }
.nc-faq details {
  border-bottom: 1px solid var(--nc-divider);
  padding: var(--nc-sp-3) 0;
}
.nc-faq summary {
  cursor: pointer; list-style: none;
  font-weight: var(--nc-w-medium); color: var(--nc-text);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--nc-sp-3);
}
.nc-faq summary::-webkit-details-marker { display: none; }
.nc-faq summary::after { content: "+"; color: var(--nc-text-faint);
  font-size: 1.3rem; transition: transform .15s ease; }
.nc-faq details[open] summary::after { content: "\2013"; }
.nc-faq p { margin-top: var(--nc-sp-3); }

/* ---- Footer ---- */
.nc-footer {
  border-top: 1px solid var(--nc-divider);
  padding-block: var(--nc-sp-5);
  color: var(--nc-text-faint);
  font-size: var(--nc-fs-small);
}
.nc-footer__row {
  display: flex; flex-direction: column; gap: var(--nc-sp-3);
  align-items: center; text-align: center;
}
.nc-footer__links { display: flex; gap: var(--nc-sp-4); }
.nc-footer__links a { color: var(--nc-text-soft); }
.nc-footer__links a:hover { color: var(--nc-text); }

/* ============================================================================
   Responsive — a partir de tablet/desktop se despliegan rejillas y nav
   ============================================================================ */
@media (max-width: 479px) {
  /* En mobile estrecho el padding del marco y el radio de la imagen se reducen */
  .nc-shot { padding: 8px 8px 0; border-radius: var(--nc-radius-sm); }
  .nc-shot img { border-radius: 4px 4px 0 0; }
  /* El frame del showcase conserva aire UNIFORME en los 4 lados (object-fit:contain),
     a diferencia del marco que "apoya" la imagen abajo. Reafirmamos su padding. */
  .nc-shot--showcase { padding: 8px; }
  /* Menos margen superior del showcase dentro del hero en pantallas chicas. */
  .nc-hero .nc-tabs { margin-top: var(--nc-sp-5); }
}

@media (min-width: 760px) {
  .nc-nav__links a:not(.nc-btn) { display: inline; }   /* enlaces de sección visibles en desktop */
  .nc-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .nc-steps  { grid-template-columns: repeat(4, 1fr); }  /* flujo de ploteo = 4 pasos */
  /* GRATIS vs PRO: 2 columnas iguales a partir de tablet */
  .nc-tiers__grid { grid-template-columns: 1fr 1fr; }
  /* PRECIO: 2 tarjetas lado a lado.
     La tarjeta Individual tiene una columna ligeramente más ancha (55/45)
     para reforzar su jerarquía primaria sin recurrir a cambios de color. */
  .nc-price-grid {
    grid-template-columns: 55fr 45fr;
  }
  /* En desktop el CTA de Individual puede ir en fila (Comprar + Descargar gratis) */
  .nc-price-card--featured .nc-price-card__cta {
    flex-direction: row;
  }
  .nc-footer__row { flex-direction: row; text-align: left; }
}

/* ============================================================================
   BOTÓN FLOTANTE DE TELEGRAM (contacto directo)
   Fijo abajo-derecha, por encima de la nav sticky (z-50). On-brand: acento
   acero azul + glifo de Telegram. En móvil también compensa que la nav oculta
   sus enlaces/CTA (< 760px).
   ============================================================================ */
.nc-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;                /* sobre la nav sticky (z-index:50) */
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 54px;
  width: 54px;
  padding: 0;
  border-radius: var(--nc-radius-pill);
  background: var(--nc-accent);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  transition: width .2s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
}
/* Variante WhatsApp: verde de marca (reconocible = más clics en fase 1 Perú) */
.nc-fab--wa { background: #25D366; }
.nc-fab.nc-fab--wa:hover, .nc-fab.nc-fab--wa:focus-visible { background: #1da851; }
.nc-fab svg { flex: none; width: 26px; height: 26px; margin-inline: 14px; display: block; }
/* Etiqueta que se despliega al pasar el cursor (desktop); el icono basta en móvil */
.nc-fab__tip {
  white-space: nowrap;
  font-size: var(--nc-fs-small);
  font-weight: var(--nc-w-semibold);
  max-width: 0;
  opacity: 0;
  transition: max-width .2s ease, opacity .15s ease, padding .2s ease;
  padding-right: 0;
}
.nc-fab:hover, .nc-fab:focus-visible {
  width: auto;
  background: var(--nc-accent-hover);
  transform: translateY(-2px);
}
.nc-fab:hover .nc-fab__tip, .nc-fab:focus-visible .nc-fab__tip {
  max-width: 160px;
  opacity: 1;
  padding-right: 18px;
}
.nc-fab:focus-visible { outline: 2px solid var(--nc-accent); outline-offset: 3px; }
.nc-fab:active { transform: translateY(0); }

@media (max-width: 479px) {
  /* Algo más compacto y pegado a la esquina en pantallas chicas; sin tooltip */
  .nc-fab { right: 16px; bottom: 16px; height: 50px; width: 50px; }
  .nc-fab svg { width: 24px; height: 24px; margin-inline: 13px; }
  .nc-fab:hover { width: 50px; }              /* no expandir en táctil */
  .nc-fab:hover .nc-fab__tip { max-width: 0; opacity: 0; padding-right: 0; }
}

/* Respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .nc-fab, .nc-fab__tip { transition: none; }
}