/* =============================================================================
   COVATECK — nixie.css
   Página de producto de Nixie (/nixie/).

   Hoja autónoma a propósito. No carga styles.css (sistema de la portada, con
   cursor propio, constelación y botones magnéticos) porque esta página tiene
   otra dirección. Comparte con el resto del sitio la tipografía (Geist y Geist
   Mono), el wordmark y la medida editorial de 1120px que ya usa pages.css.

   Color: el azul es el del producto, sacado con cuentagotas de las capturas
   (#006EC2, el relleno de los botones y la burbuja enviada de NIXIE OS).
   Aparece solo donde hay acción o donde hay luz. El ámbar queda reducido al
   guión bajo del wordmark y a la etiqueta "Recomendado".
   ============================================================================= */

:root {
  --papel: #F2ECE1;
  --lift:  #F8F4EA;
  --frio:  #EEF0F3;   /* escenario templado que funde con el gris de las capturas */
  --tinta: #161009;
  --t50:   rgba(22,16,9,.5);
  --t35:   rgba(22,16,9,.35);
  --t13:   rgba(22,16,9,.13);
  --oro:   #9C6410;

  --nixie: #006EC2;                       /* azul real del producto */
  --nixie-20: rgba(0,110,194,.20);
  --nixie-45: rgba(0,110,194,.45);

  --texto:  1120px;
  --escena: 1240px;

  /* Sombra en capas: filo de luz arriba, contacto, caída larga y halo azul */
  --sombra:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 2px 6px rgba(22,16,9,.05),
    0 30px 60px -24px rgba(22,16,9,.30),
    0 60px 120px -40px rgba(0,110,194,.16);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: 600; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--nixie);
  outline-offset: 3px;
  border-radius: 2px;
}

.n-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--tinta); color: var(--papel);
  padding: 12px 18px; font-size: 14px;
}
.n-skip:focus { left: 0; }

/* Grano finísimo: quita la sensación de color plano sin verse */
.n-grano {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.n-mono, .n-caption, .n-eyebrow, .n-nav-link, .n-toggle-op,
.n-ciclo-nota, .n-link-mono, .n-cifra, .n-precios-pie,
.n-fina, .n-resumen-cifra, .n-footer-legal, .n-wordmark {
  font-family: 'Geist Mono', ui-monospace, monospace;
}

/* ── Contenedores ─────────────────────────────────────────────────────────── */
.n-texto  { width: 100%; max-width: var(--texto);  margin: 0 auto; padding: 0 40px; }
.n-escena { width: 100%; max-width: var(--escena); margin: 0 auto; padding: 0 40px; }

/* =============================================================================
   NAV — transparente arriba, papel translúcido al bajar
   ============================================================================= */
.n-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease),
              backdrop-filter .5s var(--ease);
}
.n-nav.is-scrolled {
  background: rgba(242,236,225,.78);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: rgba(22,16,9,.07);
}
.n-nav-in {
  max-width: var(--escena); margin: 0 auto; padding: 0 40px;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.n-wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
}
.n-prompt { color: var(--t35); }
.n-oro { color: var(--oro); }
.n-nav-link { font-size: 13px; color: var(--t50); transition: color .3s var(--ease); }
.n-nav-link:hover { color: var(--nixie); }

/* =============================================================================
   TIPOGRAFÍA
   ============================================================================= */
.n-h1 {
  font-size: clamp(42px, 6.1vw, 88px);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.04;
}
.n-h2 {
  font-size: clamp(34px, 4.5vw, 62px);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.06;
}
.n-tenue { color: var(--t50); }

.n-eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nixie);
  margin-bottom: 26px;
}
.n-sub {
  margin-top: 26px; max-width: 32ch;
  font-weight: 300; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5;
  color: var(--t50);
}
.n-cuerpo {
  margin-top: 24px; max-width: 46ch;
  font-weight: 300; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55;
  color: var(--t50);
}
.n-cuerpo strong { color: var(--tinta); font-weight: 600; }
.n-centro { margin-left: auto; margin-right: auto; text-align: center; }

/* =============================================================================
   PRODUCTO — captura plana, luz ambiental detrás
   ============================================================================= */
.n-marco { position: relative; }
.n-marco::before {
  content: '';
  position: absolute;
  left: -14%; right: -14%; top: -18%; bottom: -14%;
  z-index: 0;
  background: radial-gradient(70% 60% at 50% 22%, rgba(0,110,194,.10), transparent 68%);
  pointer-events: none;
}
.n-marco img { position: relative; z-index: 1; }

.n-escena img, .n-split-img img {
  border-radius: 12px;
  box-shadow: var(--sombra);
  background: var(--lift);
}
.n-caption {
  position: relative; z-index: 2;   /* la captura escala: el pie nunca queda debajo */
  margin-top: 26px; font-size: 12px; color: var(--t35);
}

/* =============================================================================
   RITMO DE FONDOS — cada sección entrega su tono al siguiente, sin líneas
   ============================================================================= */
.n-hero {
  padding: 168px 0 0;
  background: linear-gradient(180deg, var(--papel) 0%, var(--papel) 74%, var(--lift) 100%);
}
.n-hero .n-escena { margin-top: 84px; }

.n-split {
  padding: 168px 0 0;
  background: linear-gradient(180deg, var(--lift) 0%, var(--lift) 76%, var(--frio) 100%);
}
.n-split-in {
  max-width: var(--escena); margin: 0 auto; padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 88px;
  align-items: center;
}
.n-split-texto .n-cuerpo { max-width: 34ch; }
.n-split-img { justify-self: end; }
/* La captura vertical mide 395px de ancho: no se amplía para no perder nitidez */
.n-split-img .n-marco { max-width: 395px; margin-left: auto; }
.n-split-img .n-marco::before {
  background: radial-gradient(72% 58% at 50% 26%, rgba(0,110,194,.08), transparent 70%);
}

.n-cine { padding: 168px 0 0; }
.n-cine .n-escena { margin-top: 72px; }
.n-cine .n-marco::before {
  background: radial-gradient(70% 60% at 50% 24%, rgba(0,110,194,.07), transparent 68%);
}
#operacion {
  background: linear-gradient(180deg, var(--frio) 0%, var(--frio) 80%, var(--papel) 100%);
}
#oportunidades {
  background: linear-gradient(180deg, var(--papel) 0%, var(--papel) 78%, var(--lift) 100%);
}
.n-cine-alt .n-texto { text-align: right; }
.n-cine-alt .n-cuerpo { margin-left: auto; }
/* El recorte del tablero es más chico que el escenario: se centra */
#oportunidades .n-marco { max-width: 900px; margin: 0 auto; }

/* =============================================================================
   PRECIOS — renglones editoriales, sin recuadros
   ============================================================================= */
.n-precios { padding: 200px 0 0; background: var(--lift); }
.n-precios-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
  padding-bottom: 64px;
}
.n-ciclo { text-align: right; }
.n-toggle { display: inline-flex; gap: 26px; }
.n-toggle-op {
  font-size: 13px; color: var(--t35);
  padding-bottom: 7px;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.n-toggle-op:hover { color: var(--t50); }
.n-toggle-op.is-on { color: var(--tinta); border-bottom-color: var(--nixie); }
.n-ciclo-nota { margin-top: 14px; font-size: 12px; color: var(--t35); }

.n-plan {
  border-top: 1px solid var(--t13);
  padding: 44px 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 48px;
  align-items: baseline;
  transition: background .4s var(--ease);
}
.n-plan:last-of-type { border-bottom: 1px solid var(--t13); }
.n-plan-nombre { font-size: 25px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; }
.n-reco {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .08em;
  color: var(--oro);
  vertical-align: 3px; margin-left: 6px;
}
.n-plan-desc {
  font-weight: 300; font-size: 16.5px; line-height: 1.55;
  color: var(--t50); max-width: 46ch;
  transition: color .4s var(--ease);
}
.n-plan:hover .n-plan-desc { color: rgba(22,16,9,.66); }
.n-plan-precio { text-align: right; }
.n-cifra {
  font-size: 27px; font-weight: 500; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.n-periodo { font-size: 13px; font-weight: 400; color: var(--t35); letter-spacing: 0; }
.n-link-mono {
  display: inline-block; margin-top: 14px;
  font-size: 13px; color: var(--t50);
  border-bottom: 1px solid var(--nixie-20);
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.n-plan:hover .n-link-mono,
.n-link-mono:hover { color: var(--nixie); border-bottom-color: var(--nixie); }

.n-precios-pie {
  margin-top: 38px; font-size: 12px; line-height: 1.7;
  color: var(--t35); max-width: 62ch;
}

/* =============================================================================
   CIERRE Y PIE
   ============================================================================= */
.n-cierre {
  padding: 200px 0 200px;
  background: linear-gradient(180deg, var(--lift) 0%, var(--lift) 58%, var(--papel) 100%);
}
.n-cierre .n-cuerpo { max-width: 44ch; }

.n-footer { background: var(--papel); border-top: 1px solid var(--t13); padding: 56px 0 72px; }
.n-footer-in { display: flex; justify-content: space-between; gap: 56px; flex-wrap: wrap; }
.n-footer-linea {
  margin-top: 18px; font-weight: 300; font-size: 15.5px; line-height: 1.6;
  color: var(--t50); max-width: 44ch;
}
.n-footer-contacto {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 15px; color: var(--t50);
}
.n-footer-contacto a { transition: color .3s var(--ease); }
.n-footer-contacto a:hover { color: var(--nixie); }
.n-footer-legal { margin-top: 56px; font-size: 11.5px; color: var(--t35); }

/* =============================================================================
   CHECKOUT
   ============================================================================= */
.n-modal { position: fixed; inset: 0; z-index: 200; }
.n-modal[hidden] { display: none; }
.n-modal-fondo {
  position: absolute; inset: 0;
  background: rgba(22,16,9,.42);
  animation: nFade .4s var(--ease) both;
}
.n-modal-panel {
  position: relative;
  width: min(940px, calc(100% - 40px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  margin: 28px auto;
  background: var(--lift);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  box-shadow: 0 40px 90px -30px rgba(22,16,9,.45), 0 0 0 1px rgba(22,16,9,.05);
  animation: nPanel .5s var(--ease) both;
}
@keyframes nFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes nPanel { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.n-modal-x {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  font-size: 24px; line-height: 1; color: var(--t35); padding: 6px 8px;
  transition: color .3s var(--ease);
}
.n-modal-x:hover { color: var(--tinta); }

.n-modal-form { padding: 52px 48px 48px; }
.n-modal-h { font-size: 27px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.n-modal-sub { margin-top: 12px; font-weight: 300; font-size: 16px; line-height: 1.55; color: var(--t50); }
.n-exito-linea { margin-top: 20px; max-width: 38ch; }

.n-campos { margin-top: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; }
.n-campo { display: flex; flex-direction: column; gap: 7px; }
.n-campo span { font-size: 12.5px; color: var(--t50); }
.n-campo input {
  font: inherit; font-size: 16px; color: var(--tinta);
  background: none; border: 0; border-bottom: 1px solid var(--t13);
  padding: 7px 0;
  transition: border-color .3s var(--ease);
}
.n-campo input:focus { outline: none; border-bottom-color: var(--nixie); }
.n-campo input:focus-visible { outline: none; }
.n-campo.is-mal input { border-bottom-color: #A6301A; }

.n-pill {
  margin-top: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nixie); color: #fff;
  font-size: 15px; font-weight: 500;
  padding: 15px 30px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(0,110,194,.55);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.n-pill:hover { background: #0079D4; box-shadow: 0 12px 28px -10px rgba(0,110,194,.65); }
.n-fina { margin-top: 18px; font-size: 11.5px; line-height: 1.6; color: var(--t35); }

.n-modal-resumen {
  background: var(--papel);
  padding: 52px 40px 48px;
  border-radius: 0 14px 14px 0;
  display: flex; flex-direction: column;
}
.n-resumen-plan { font-size: 15px; font-weight: 500; }
.n-resumen-cifra {
  margin-top: 8px;
  font-size: 38px; font-weight: 500; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.n-resumen-lista { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.n-resumen-lista > div {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 13.5px; padding-bottom: 12px;
  border-bottom: 1px solid var(--t13);
}
.n-resumen-lista dt { color: var(--t50); font-weight: 400; }
.n-resumen-lista dd { font-weight: 500; }
.n-resumen-promesa {
  margin-top: auto; padding-top: 34px;
  font-weight: 300; font-size: 13.5px; line-height: 1.6; color: var(--t50);
}
.n-resumen-promesa strong { color: var(--tinta); }

/* =============================================================================
   MOVIMIENTO
   ============================================================================= */
.n-ln { display: block; overflow: hidden; }
.n-ln > span {
  display: block;
  transform: translateY(115%);
  transition: transform 1.2s var(--ease);
}
.n-reveal.is-in .n-ln > span { transform: translateY(0); }
.n-reveal .n-ln:nth-child(2) > span { transition-delay: .09s; }
.n-reveal .n-ln:nth-child(3) > span { transition-delay: .18s; }

.n-up {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s;
}
.n-up.is-in { opacity: 1; transform: none; }

/* Entrada de la captura: el marco lleva el reveal, la imagen el parallax */
.n-img .n-marco {
  opacity: 0;
  transform: translateY(48px) scale(.93);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
}
.n-img.is-in .n-marco { opacity: 1; transform: none; }
.n-img .n-marco::before {
  opacity: 0;
  transform: scale(.9);
  transition: opacity 1.6s var(--ease) .2s, transform 1.9s var(--ease) .2s;
}
.n-img.is-in .n-marco::before { opacity: 1; transform: none; }

/* El hero se enciende al cargar: menos desplazamiento, más luz */
.n-hero .n-img .n-marco { transform: translateY(24px) scale(.96); }

.n-img .n-caption { opacity: 0; transition: opacity .9s var(--ease) .35s; }
.n-img.is-in .n-caption { opacity: 1; }

/* El parallax lo escribe el JS sobre la imagen, sin transición */
.n-marco img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .n-ln > span { transform: none !important; }
  .n-up, .n-img .n-marco, .n-img .n-marco::before, .n-img .n-caption {
    opacity: 1 !important; transform: none !important;
  }
  .n-marco img { transform: none !important; }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 860px) {
  body { font-size: 16px; }

  .n-texto, .n-escena, .n-nav-in, .n-split-in { padding-left: 28px; padding-right: 28px; }

  .n-hero { padding-top: 128px; }
  .n-hero .n-escena { margin-top: 56px; }
  .n-split, .n-cine { padding-top: 112px; }
  .n-cine .n-escena { margin-top: 48px; }
  .n-precios { padding-top: 128px; }
  .n-cierre { padding: 128px 0 128px; }

  .n-split-in { grid-template-columns: 1fr; gap: 48px; }
  .n-split-img { justify-self: start; }
  .n-split-img .n-marco { margin-left: 0; }

  /* La sección "alt" vuelve a la izquierda: alinear a la derecha en estrecho se lee mal */
  .n-cine-alt .n-texto { text-align: left; }
  .n-cine-alt .n-cuerpo { margin-left: 0; }

  .n-precios-top { padding-bottom: 44px; }
  .n-ciclo { text-align: left; }

  .n-plan { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; }
  .n-plan-precio { text-align: left; margin-top: 6px; }
  .n-plan-desc { max-width: none; }
  /* Sin hover en táctil: el enlace ya nace azul */
  .n-link-mono { color: var(--nixie); border-bottom-color: var(--nixie-45); }

  .n-footer-in { gap: 34px; }
  .n-footer-legal { margin-top: 40px; }

  .n-modal-panel {
    grid-template-columns: 1fr;
    width: calc(100% - 24px); margin: 12px auto;
    max-height: calc(100vh - 24px);
  }
  /* El resumen sube: primero qué contratas, luego el formulario */
  .n-modal-resumen { order: -1; border-radius: 14px 14px 0 0; padding: 40px 30px 34px; }
  .n-modal-form { padding: 36px 30px 40px; }
  .n-resumen-promesa { padding-top: 26px; }
}

@media (max-width: 560px) {
  .n-texto, .n-escena, .n-nav-in, .n-split-in { padding-left: 20px; padding-right: 20px; }

  .n-hero { padding-top: 112px; }
  .n-hero .n-escena { margin-top: 42px; }
  .n-split, .n-cine { padding-top: 88px; }
  .n-precios { padding-top: 96px; }
  .n-cierre { padding: 96px 0 96px; }

  /* A 390px el titular conserva sus tres líneas en vez de romperse en cinco */
  .n-h1 { font-size: 32px; letter-spacing: -0.038em; }

  .n-eyebrow { margin-bottom: 20px; }
  .n-sub { margin-top: 20px; max-width: none; }
  .n-cuerpo { max-width: none; }
  .n-caption { margin-top: 20px; font-size: 11px; }

  .n-campos { grid-template-columns: 1fr; gap: 22px; }
  .n-modal-form { padding: 30px 22px 34px; }
  .n-modal-resumen { padding: 32px 22px 28px; }
  .n-resumen-cifra { font-size: 32px; }
  .n-pill { width: 100%; }
}