/* ==========================================================================
   NEXT AI ECOSYSTEM: capa de diseño de la marca madre, tema Noche (08-nov-2026)
   Fuente: next-ai-ecosystem/nextaico-marca v1.0.0 (tokens/tokens.css, BRAND.md y brand-identity.json).
   La web usa el tema Noche. Va después de marca.css y fuera de las capas de Tailwind, así que manda sobre las dos.
   REGLA DE LA FIRMA: la tinta azul aparece solo donde alguien firma o responde (el tercer peldaño, el botón
   principal y los enlaces). Todo lo demás es noche, niebla y acero. «Si una pieza tiene mucho azul, está mal.»
   Contrastes sobre noche (#0C0D18): niebla 16,7 · tinta-200 11,9 · texto suave 9,8 · tinta-300 8,0 ·
   firma 7,0 (vale para texto y enlaces). Noche sobre firma (botón): 7,0. tinta-400 es solo decorativa.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* Tokens del manual (tema Noche) */
  --fondo-000: #07080F;
  --fondo-100: #0C0D18;   /* noche: fondo, 60 % */
  --fondo-200: #121426;
  --fondo-300: #171929;   /* pizarra: superficies, 20 % */
  --linea-100: #22243A;
  --linea-200: #33364F;
  --tinta-100: #EEEEF3;   /* niebla: texto */
  --tinta-200: #C8CAD8;
  --tinta-300: #A3A6B8;
  --tinta-400: #6B7088;   /* acero: filetes y detalles, nunca texto */
  --firma: #8A92FF;
  --firma-tenue: #1A1E3C;
  --estado-pasa: #5DBB84;
  --estado-falla: #FF6B6B;
  --accion-fondo: var(--firma);
  --accion-texto: #0C0D18;
  --foco: var(--firma);

  /* Los grises de Stellar pasan a la escala Noche */
  --color-slate-50:  var(--tinta-100);
  --color-slate-100: var(--tinta-100);
  --color-slate-200: var(--tinta-100);
  --color-slate-300: var(--tinta-200);
  --color-slate-400: #B5B8C8;
  --color-slate-500: var(--tinta-300);
  --color-slate-600: var(--tinta-400);
  --color-slate-700: var(--linea-200);
  --color-slate-800: var(--linea-100);
  --color-slate-900: var(--fondo-100);
  --color-white:     var(--tinta-100);

  /* El morado de Stellar NO pasa al azul: donde Stellar lo usa de adorno, queda en tinta neutra.
     La firma se aplica a mano, solo en el símbolo, el botón principal y los enlaces. */
  --color-purple-200: var(--tinta-200);
  --color-purple-300: var(--tinta-200);
  --color-purple-400: var(--tinta-300);
  --color-purple-500: var(--tinta-300);
  --color-purple-600: var(--tinta-400);
  --color-purple-700: var(--linea-200);
}

body { background: var(--fondo-100); letter-spacing: 0; }
::selection { background: var(--firma-tenue); color: var(--tinta-100); }

/* ---------- Titulares: Sora 600, niebla liso, interletra negativa en tamaños grandes ---------- */
h1, h2, h3, .h1, .h2, .h3, [data-marca-nombre] {
  background: none;
  color: var(--tinta-100);
  -webkit-text-fill-color: currentColor;
}
.h1, h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; }
.h2, h2 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
.h3, h3 { font-weight: 600; letter-spacing: -0.015em; }
p { line-height: 1.6; }

/* Logo en una línea: al menos 24 px de alto en pantalla (BRAND.md) */
header img[src$="images/marca/logo.svg"], footer img[src$="images/marca/logo.svg"] { height: 30px; width: auto; }

/* ---------- Rótulos: JetBrains Mono en mayúsculas espaciadas ---------- */
[data-antetitulo] {
  display: block;
  background: none;
  color: var(--tinta-300);
  -webkit-text-fill-color: currentColor;
  font-family: var(--fuente-datos);
  font-weight: 500;
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}
[data-dato] { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }

/* ---------- Brillos de Stellar: fuera. Next es sobrio ---------- */
[class*="blur-[120px]"], [class*="blur-[80px]"], [class*="blur-[40px]"],
[aria-hidden="true"].blur-2xl { display: none; }

/* ---------- Enlaces: la firma ---------- */
main p a, .nx-enlace { color: var(--firma); text-decoration: underline; text-underline-offset: 3px; }
footer a:hover { color: var(--firma); }

/* ---------- Botones: la acción principal en firma; la secundaria, en tinta ---------- */
.btn { border-radius: 8px; padding-block: .625rem; padding-inline: 1.25rem; }
[data-boton="principal"] {
  background: var(--accion-fondo);
  color: var(--accion-texto);
  font-weight: 600;
}
[data-boton="principal"]:hover { background: #A3A9FF; color: var(--accion-texto); }
[data-boton="principal"] span { color: inherit; }
[data-boton="secundario"] {
  background: transparent;
  color: var(--tinta-100);
  border: 1px solid var(--linea-200);
}
[data-boton="secundario"]:hover { border-color: var(--tinta-400); background: var(--fondo-300); }
[data-boton="cabecera"] span span { color: var(--tinta-300); }
a:focus-visible, button:focus-visible, [data-boton]:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

/* ---------- Hero: patrón de Peldaños y el símbolo que se anima paso a paso ---------- */
.nx-patron {
  background: url("../capa/patron.svg") 0 0 / 72px 72px repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 78% 45%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 70% at 78% 45%, #000 0%, transparent 70%);
}
.nx-simbolo { width: 7rem; height: 7rem; overflow: visible; }
@media (min-width: 1024px) {
  .nx-simbolo { width: 17rem; height: 17rem; }
}
.nx-peldano {
  fill: none;
  stroke: var(--tinta-100);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: nx-paso .55s cubic-bezier(.3, .7, .2, 1) forwards;
}
.nx-peldano-1 { animation-delay: .25s; }
.nx-peldano-2 { animation-delay: .75s; }
.nx-peldano-3 { stroke: var(--firma); animation-delay: 1.25s; }   /* el paso firmado: lo que sigue */
@keyframes nx-paso { to { stroke-dashoffset: 0; } }

/* Insignia: píldora mono, sin azul */
.nx-insignia {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .9rem;
  border: 1px solid var(--linea-200);
  border-radius: 9999px;
  color: var(--tinta-200);
  font-family: var(--fuente-datos);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.nx-insignia::before { content: ""; width: .7rem; height: 2px; border-radius: 2px; background: var(--tinta-400); }
.nx-insignia:hover { border-color: var(--tinta-400); color: var(--tinta-100); }

/* ---------- Método: tres pasos que suben como los peldaños; solo el tercero lleva la firma ---------- */
.nx-paso, .nx-tarjeta, .nx-producto {
  display: block;
  height: 100%;
  padding: 1.75rem;
  border-radius: 14px;
  background: var(--fondo-300);
  border: 1px solid var(--linea-100);
}
.nx-paso { height: auto; }
@media (min-width: 768px) {
  .nx-paso-2 { margin-bottom: 2.25rem; }
  .nx-paso-3 { margin-bottom: 4.5rem; }
}
.nx-paso-barra {
  display: block;
  width: 3.25rem;
  height: 9px;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
  background: var(--tinta-100);
}
.nx-paso-firma .nx-paso-barra { background: var(--firma); }
.nx-paso-firma { border-color: var(--linea-200); }
.nx-paso-num {
  color: var(--tinta-300);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- Portafolio: el punto lleva el color del producto; la tarjeta, las tintas de Next ---------- */
.nx-producto { transition: border-color .15s ease-in-out, background-color .15s ease-in-out; text-decoration: none; }
.nx-producto:hover { border-color: var(--linea-200); background: var(--fondo-200); }
.nx-producto-punto { width: .625rem; height: .625rem; border-radius: 50%; background: var(--sistema); }
.nx-producto-dominio { display: inline-flex; align-items: center; color: var(--firma); font-size: .85rem; }  /* es un enlace */

/* ---------- En qué vamos: barras en tinta ---------- */
.nx-barra { height: .4rem; flex-grow: 1; border-radius: 2px; background: var(--linea-200); }
.nx-barra-llena { background: var(--tinta-200); }

/* ---------- Contacto (sección común) ---------- */
#contacto > div > div {
  border-radius: 20px;
  border: 1px solid var(--linea-100);
  background-color: var(--fondo-300);
}
#contacto svg[width="434"] { display: none; }

/* ---------- Movimiento reducido: el símbolo, quieto y completo ---------- */
@media (prefers-reduced-motion: reduce) {
  .nx-peldano { animation: none; stroke-dashoffset: 0; }
}