/* ============================================================================
   NexaCore — Chrome del sitio y patrones de página
   ----------------------------------------------------------------------------
   Requiere, en este orden:
     1. nexacore-tokens.css
     2. nexacore.css
     3. este archivo

   Reutilizable por todas las páginas conforme migran del bento claro.
   Nunca cargar junto a bento-styles.css: ambos definen --text-muted.
   ========================================================================== */

/* ============================================================================
   ESTRUCTURA
   ========================================================================== */

.shell {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.section {
  padding: var(--sp-9) 0;
}

.section--tight {
  padding: var(--sp-8) 0;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line);
}

.section-head h2 {
  max-width: 20ch;
}

.section-head p {
  max-width: 62ch;
  color: var(--text-tertiary);
  font-size: var(--size-md);
  line-height: 1.6;
}

.rule {
  border: 0;
  border-top: 1px solid var(--line-subtle);
  margin: 0;
}

/* Dato o medida real. Nunca decoración: la mono es para cifras, no para ambiente. */
.data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ============================================================================
   NAVEGACIÓN
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface-page);
  border-bottom: 1px solid var(--line-subtle);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: 28px;
  height: 28px;
}

.brand .nexacore-wordmark {
  font-size: var(--size-lg);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--size-xs);
  font-weight: 500;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: var(--signal);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Cajón móvil */
.drawer {
  position: fixed;
  inset: 68px 0 auto 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur-base) var(--ease),
    opacity var(--dur-base) var(--ease),
    visibility var(--dur-base);
  z-index: 39;
}

.drawer[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.drawer a {
  display: block;
  padding: var(--sp-3) 0;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--size-md);
  border-bottom: 1px solid var(--line-subtle);
}

.drawer a:hover {
  color: var(--signal);
}

/* ============================================================================
   HÉROE
   ========================================================================== */

.hero {
  padding: var(--sp-8) 0 var(--sp-9);
}

.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-8);
  align-items: start;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.hero-copy h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  max-width: 15ch;
}

.hero-copy h1 em {
  font-style: normal;
  color: var(--signal);
}

.hero-lede {
  font-size: var(--size-md);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.hero-actions .nx-btn {
  padding: 14px 22px;
  font-size: var(--size-sm);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-subtle);
  font-size: var(--size-2xs);
  color: var(--text-tertiary);
}

/* ============================================================================
   CONSOLA — el momento focal de la home
   ========================================================================== */

.console {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.console-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-subtle);
  background: var(--surface-raised);
}

.console-head h2 {
  font-size: var(--size-sm);
  font-weight: 500;
  letter-spacing: 0;
  margin-right: auto;
}

.console-body {
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-5);
}

.console-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-subtle);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.metric {
  background: var(--surface);
  padding: var(--sp-4);
}

.metric dt {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-2);
}

.metric dd {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--size-2xl);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.metric dd.is-green {
  color: var(--status-online);
}

.metric dd.is-red {
  color: var(--status-fault);
}

/* Proporción real de modulación: no es una gráfica decorativa, es el dato. */
.modbar {
  display: grid;
  gap: var(--sp-3);
}

.modbar-track {
  display: flex;
  height: 8px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--surface-inset);
}

.modbar-track span {
  display: block;
  height: 100%;
}

.modbar-green {
  background: var(--status-online);
}

.modbar-red {
  background: var(--status-fault);
}

.modbar-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--size-3xs);
  color: var(--text-tertiary);
  font-family: var(--font-data);
  letter-spacing: .04em;
}

.modbar-key i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  display: inline-block;
  margin-right: 6px;
}

.console-note {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line-subtle);
  background: var(--surface-page);
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  color: var(--text-tertiary);
  letter-spacing: .04em;
}

/* ============================================================================
   SISTEMAS EN OPERACIÓN
   ========================================================================== */

.systems {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-subtle);
}

.system {
  display: grid;
  grid-template-columns: minmax(200px, 4fr) 6fr;
  gap: var(--sp-5) var(--sp-7);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line-subtle);
  transition: background var(--dur-base) var(--ease);
}

.system:hover {
  background: var(--tint-signal);
}

.system-name {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

.system-name h3 {
  font-size: var(--size-lg);
  font-weight: 500;
  letter-spacing: -.01em;
}

.system-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.system-body p {
  color: var(--text-secondary);
  max-width: 62ch;
}

.system-spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.system-spec li {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-xs);
  padding: 4px 9px;
}

/* ============================================================================
   LÍNEAS DE SERVICIO — ficha técnica, no rejilla de tarjetas con ícono
   ========================================================================== */

.lines {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--sp-8);
}

.line {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line-subtle);
}

.line h3 {
  font-size: var(--size-md);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.line p {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.65;
}

.line-note {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  color: var(--signal);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================================================================
   CASO — Crosspoint
   ========================================================================== */

.case {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-7);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-7);
  align-items: center;
}

.case h2 {
  font-size: var(--size-xl);
  max-width: 18ch;
}

.case p {
  color: var(--text-secondary);
  max-width: 60ch;
}

.case-detail {
  display: grid;
  gap: var(--sp-4);
}

.case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.case-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--size-xs);
  color: var(--text-secondary);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-subtle);
}

.case-list b {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--signal);
  font-weight: 500;
  min-width: 92px;
}

/* ============================================================================
   SECTORES
   ========================================================================== */

.sectors-layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-8);
  align-items: start;
}

.sector-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 168px;
  gap: var(--sp-4);
  transition: opacity var(--dur-base) var(--ease);
}

.sector-grid> :first-child {
  grid-row: span 2;
}

.sector-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  /* Fijo en ambos temas: el velo y la etiqueta son oscuros, así que la foto
     debe componer sobre oscuro o se lava en modo claro. */
  background: var(--ink-950);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-base) var(--ease);
}

.sector-card:hover {
  border-color: var(--signal-700);
}

.sector-card picture,
.sector-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.sector-card:hover img {
  opacity: 1;
  transform: scale(1.04);
}

.sector-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Fijo en ambos temas a propósito: un velo claro borra la fotografía. */
  background: linear-gradient(to top, rgba(3, 6, 15, .92) 0%, rgba(3, 6, 15, .45) 48%, rgba(3, 6, 15, 0) 100%);
}

.sector-card figcaption,
.sector-card .sector-label {
  color: #FFFFFF;
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--size-sm);
  font-weight: 500;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(3, 6, 15, .5);
}

.sector-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.sector-arrow {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.sector-arrow:hover:not(:disabled) {
  border-color: var(--signal);
  color: var(--signal);
}

.sector-arrow:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.sector-dots {
  display: flex;
  gap: var(--sp-2);
  margin-right: auto;
}

.sector-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.sector-dot[aria-current="true"] {
  background: var(--signal);
  border-color: var(--signal);
}

.sector-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.sector-filter {
  font-family: var(--font-text);
  font-size: var(--size-2xs);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.sector-filter:hover {
  color: var(--text-primary);
  border-color: var(--line-strong);
}

.sector-filter[aria-pressed="true"] {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-accent);
}

/* Modal de sector */
.sector-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base);
}

.sector-modal[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.sector-modal-box {
  width: min(720px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}

.sector-modal-media {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.sector-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
}

.sector-modal-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--scrim-100) 8%, var(--scrim-0) 100%);
}

.sector-modal-inner {
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-5);
}

.sector-modal-inner h2 {
  font-size: var(--size-xl);
}

.sector-modal-inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.sector-modal-inner li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--sp-3);
  color: var(--text-secondary);
  font-size: var(--size-xs);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-subtle);
}

.sector-modal-inner li::before {
  content: "—";
  color: var(--signal-700);
}

.sector-modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-page);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.sector-modal-close:hover {
  color: var(--text-primary);
  border-color: var(--signal);
}

/* ============================================================================
   CIERRE Y PIE
   ========================================================================== */

.closer {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-9) 0;
}

.closer-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--sp-8);
  align-items: end;
}

.closer h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  max-width: 16ch;
}

.closer-lede {
  margin-top: var(--sp-5);
  color: var(--text-tertiary);
  font-size: var(--size-sm);
  line-height: 1.65;
  max-width: 54ch;
}

.contact-list {
  display: grid;
  gap: var(--sp-4);
}

.contact-list a {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-subtle);
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--size-md);
  transition: color var(--dur-fast) var(--ease);
}

.contact-list a:hover {
  color: var(--signal);
}

.contact-list span {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-tertiary);
}

.site-footer {
  padding: var(--sp-8) 0 var(--sp-7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 3fr;
  gap: var(--sp-7);
}

.footer-grid h3 {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-4);
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.footer-grid li a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--size-xs);
}

.footer-grid li a:hover {
  color: var(--signal);
}

.footer-about p {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  max-width: 40ch;
  margin-top: var(--sp-4);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-subtle);
  font-size: var(--size-2xs);
  color: var(--text-muted);
}

/* ============================================================================
   UN SOLO MOMENTO DE MOVIMIENTO
   La consola se arma por filas al cargar. Nada más entra animado.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .console [data-stagger] {
    opacity: 0;
    transform: translateY(6px);
    animation: nx-settle var(--dur-slow) var(--ease) forwards;
  }

  .console [data-stagger="1"] {
    animation-delay: 60ms;
  }

  .console [data-stagger="2"] {
    animation-delay: 160ms;
  }

  .console [data-stagger="3"] {
    animation-delay: 260ms;
  }

  .console [data-stagger="4"] {
    animation-delay: 360ms;
  }
}

@keyframes nx-settle {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   ADAPTACIÓN
   ========================================================================== */

@media (max-width: 1080px) {

  .hero-grid,
  .sectors-layout,
  .case,
  .closer-grid {
    grid-template-columns: 1fr;
  }

  .case {
    padding: var(--sp-6);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .lines {
    grid-template-columns: 1fr;
  }

  .system {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
  }

  .section {
    padding: var(--sp-8) 0;
  }

  .hero {
    padding: var(--sp-6) 0 var(--sp-8);
  }
}

@media (max-width: 640px) {
  .shell {
    padding: 0 var(--sp-4);
  }

  /* La consola se apila; sin compactar, la tabla queda fuera de alcance */
  .console-metrics {
    grid-template-columns: 1fr;
  }

  .metric {
    padding: var(--sp-3) var(--sp-4);
  }

  .metric dd {
    font-size: var(--size-xl);
  }

  .metric dt {
    margin-bottom: var(--sp-1);
  }

  /* Dos acciones de anchos distintos se leen desalineadas en una columna */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .nx-btn {
    width: 100%;
  }

  .sector-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 150px;
  }

  .sector-grid> :first-child {
    grid-row: span 1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .contact-list a {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }

  .case-list li {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
}

/* ============================================================================
   SALTO AL CONTENIDO — visible solo al enfocar con teclado
   ========================================================================== */

#skip {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

#skip:focus-visible {
  transform: translateY(0);
}


/* ============================================================================
   INTERRUPTOR DE TEMA
   ========================================================================== */

.theme-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.theme-btn:hover {
  color: var(--signal);
  border-color: var(--signal);
}

/* Solo se muestra el icono del tema al que se puede ir */
.theme-btn .to-dark {
  display: none;
}

:root[data-theme="dark"] .theme-btn .to-dark {
  display: block;
}

:root[data-theme="dark"] .theme-btn .to-light {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .to-dark {
    display: block;
  }

  :root:not([data-theme="light"]) .theme-btn .to-light {
    display: none;
  }
}

/* ============================================================================
   PRODUCTOS
   ========================================================================== */

.prod {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line-subtle);
  display: grid;
  gap: var(--sp-4);
}

.prod:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.prod h3 {
  font-size: var(--size-lg);
  font-weight: 500;
}

.prod-kind {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--signal);
  margin-top: var(--sp-2);
}

.prod>p {
  color: var(--text-secondary);
  max-width: 62ch;
}

.mini-console {
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  max-width: 400px;
}

.mini-console dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: 0;
}

.mini-console dt {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
}

.mini-console dd {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--size-lg);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.mini-console dd.is-green {
  color: var(--status-online);
}

.mini-console dd.is-red {
  color: var(--status-fault);
}

@media (max-width: 860px) {
  .theme-btn {
    margin-left: auto;
  }
}


/* ============================================================================
   REPARTO NARRATIVO
   Cada sección abre con una frase corta y prueba debajo. La prueba nunca
   son tarjetas iguales: el mosaico varía de escala para que el ojo recorra.
   ========================================================================== */

.band {
  padding: var(--sp-9) 0;
}

.band--alt {
  background: var(--surface);
  border-block: 1px solid var(--line-subtle);
}

.band--tight {
  padding: var(--sp-8) 0;
}

.band-lead {
  margin-bottom: var(--sp-8);
}

.band-lead h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  max-width: 20ch;
}

.band-lead h2 em {
  font-style: normal;
  color: var(--signal);
}

.band-lead p {
  margin-top: var(--sp-4);
  color: var(--text-tertiary);
  font-size: var(--size-md);
  max-width: 60ch;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- mosaico */

.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}

.tile {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
  transition: border-color var(--dur-base) var(--ease);
}

.tile:hover {
  border-color: var(--signal-700);
}

.tile--wide {
  grid-column: span 7;
}

.tile--half {
  grid-column: span 5;
}

.tile--third {
  grid-column: span 4;
}

.tile--sixth {
  grid-column: span 6;
}

.tile h3 {
  font-size: var(--size-lg);
  font-weight: 500;
}

.tile-kind {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--signal);
}

.tile p {
  color: var(--text-secondary);
  font-size: var(--size-xs);
  line-height: 1.65;
}

.tile .system-spec {
  margin-top: auto;
}

/* ------------------------------------------------------------------ pasos */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  counter-reset: step;
}

.step {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

/* Mismo ritmo que .steps, sin numerar: cuando no hay secuencia, el número
   decoraría en vez de informar. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.fact {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.fact h3 {
  font-size: var(--size-md);
  font-weight: 500;
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--signal);
}

.fact p {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.65;
}

@media (max-width: 1080px) {
  .facts {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-data);
  font-size: var(--size-md);
  letter-spacing: .06em;
  color: var(--signal);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--signal);
}

.step h3 {
  font-size: var(--size-md);
  font-weight: 500;
}

.step p {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.65;
}

/* ------------------------------------------------------------------ pared */

.wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
}

.wall .sector-card {
  height: 150px;
}

/* ------------------------------------------------------------------ héroe */

.hero-story {
  padding: var(--sp-9) 0 var(--sp-8);
}

.hero-story .shell {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-8);
  align-items: center;
}

.hero-story h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.032em;
  max-width: 16ch;
}

.hero-story h1 em {
  font-style: normal;
  color: var(--signal);
}

.hero-story .hero-lede {
  margin-top: var(--sp-5);
  font-size: var(--size-lg);
  max-width: 54ch;
}

.hero-story .hero-actions {
  margin-top: var(--sp-7);
}

.hero-logo {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1080px) {

  .tile--wide,
  .tile--half,
  .tile--third,
  .tile--sixth,
  .tile {
    grid-column: span 6;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .wall {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-story .shell {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .hero-logo {
    max-width: 190px;
  }
}

@media (max-width: 640px) {
  .mosaic {
    gap: var(--sp-3);
  }

  .tile--wide,
  .tile--half,
  .tile--third,
  .tile--sixth,
  .tile {
    grid-column: span 12;
  }

  .wall {
    grid-template-columns: repeat(2, 1fr);
  }

  .wall .sector-card {
    height: 128px;
  }

  .band {
    padding: var(--sp-8) 0;
  }
}


/* ============================================================================
   PÁGINAS INTERIORES
   ========================================================================== */

.page-hero {
  padding: var(--sp-9) 0 var(--sp-7);
  border-bottom: 1px solid var(--line-subtle);
}

.page-hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 18ch;
}

.page-hero h1 em {
  font-style: normal;
  color: var(--signal);
}

.page-hero p {
  margin-top: var(--sp-5);
  font-size: var(--size-lg);
  color: var(--text-secondary);
  max-width: 58ch;
  line-height: 1.55;
}

/* --------------------------------------------------------- detalle de línea */

.service {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-7);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line-subtle);
}

.service:last-child {
  border-bottom: 0;
}

.service h2 {
  font-size: var(--size-2xl);
  letter-spacing: -.025em;
  max-width: 16ch;
}

.service>div>p {
  color: var(--text-secondary);
  margin-top: var(--sp-4);
  max-width: 46ch;
}

.service-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.service-includes li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  color: var(--text-secondary);
  font-size: var(--size-sm);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-subtle);
}

.service-includes li::before {
  content: "—";
  color: var(--signal);
}

/* ------------------------------------------------------------ lo que no */

.nots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.not {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.5;
}

.not b {
  display: block;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}

/* --------------------------------------------------------------- muestras */

.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.work {
  display: grid;
  gap: var(--sp-4);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease);
}

.work:hover {
  border-color: var(--signal-700);
}

.work-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-inset);
}

.work-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.work-body {
  padding: 0 var(--sp-5) var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.work-body h3 {
  font-size: var(--size-md);
  font-weight: 500;
}

.work-body p {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.6;
}

.work-kind {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--signal);
}

/* Cliente real publicado: una sola muestra, ancha y enlazada al sitio vivo */
.works--live {
  grid-template-columns: 1fr;
}

.work--live {
  grid-template-columns: 7fr 5fr;
  gap: 0;
  align-items: stretch;
}

.work--live .work-shot {
  aspect-ratio: auto;
  height: 100%;
  min-height: 340px;
}

.work--live .work-body {
  padding: var(--sp-7);
  align-content: center;
}

.work--live .work-body p {
  font-size: var(--size-sm);
}

.work-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--signal);
  text-decoration: none;
}

.work-link:hover {
  text-decoration: underline;
}

.work-link svg {
  width: 14px;
  height: 14px;
}

/* Aviso honesto: separa la muestra del sistema entregado */
.disclaimer {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  padding: var(--sp-4) var(--sp-5);
  color: var(--text-secondary);
  font-size: var(--size-xs);
  max-width: 78ch;
  margin-bottom: var(--sp-6);
}

.disclaimer b {
  color: var(--text-primary);
}

/* --------------------------------------------------------------- contacto */

.contact-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-8);
  align-items: start;
}

.form-grid {
  display: grid;
  gap: var(--sp-5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.nx-field textarea.nx-input {
  font-family: var(--font-text);
  min-height: 130px;
  resize: vertical;
}

select.nx-input {
  font-family: var(--font-text);
}

.contact-aside {
  display: grid;
  gap: var(--sp-6);
}

.contact-block h2 {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-4);
}

.contact-block p {
  color: var(--text-secondary);
  font-size: var(--size-sm);
  line-height: 1.6;
}

.map-frame {
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 1080px) {
  .service {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    padding: var(--sp-7) 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .works {
    grid-template-columns: repeat(2, 1fr);
  }

  .works--live {
    grid-template-columns: 1fr;
  }

  .work--live {
    grid-template-columns: 1fr;
  }

  .work--live .work-shot {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
  }

  .work--live .work-body {
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
  }

  .nots {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .works,
  .nots {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .page-hero {
    padding: var(--sp-7) 0 var(--sp-6);
  }
}


/* ============================================================================
   DESPLIEGUE DE SERVICIOS
   El momento con autoría de la página: cada línea se abre y explica.
   Sin JS los paneles nacen abiertos; el guion los cierra al cargar.
   ========================================================================== */

.disclosure {
  border-top: 1px solid var(--line);
}

.disclosure-item {
  border-bottom: 1px solid var(--line);
}

.disclosure-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 12px 1fr 20px;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-5) var(--sp-2);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background var(--dur-fast) var(--ease);
}

.disclosure-trigger:hover {
  background: var(--tint-signal);
}

.disclosure-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  background: transparent;
  transform: translateY(-2px);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.disclosure-trigger[aria-expanded="true"] .disclosure-dot {
  background: var(--signal);
  border-color: var(--signal);
}

.disclosure-heading {
  display: grid;
  gap: var(--sp-2);
}

.disclosure-heading h2 {
  font-size: var(--size-lg);
  font-weight: 500;
  letter-spacing: -.015em;
}

.disclosure-heading p {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.6;
  max-width: 62ch;
}

.disclosure-chevron {
  color: var(--text-tertiary);
  transform: translateY(2px);
  transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.disclosure-trigger[aria-expanded="true"] .disclosure-chevron {
  transform: translateY(2px) rotate(180deg);
  color: var(--signal);
}

/* Despliegue por grid-template-rows: anima sin recalcular layout en cada
   cuadro, y no hace falta medir alturas desde el guion.
   Nace abierto para que la página se lea aunque el guion no cargue. */
.disclosure-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--dur-slow) var(--ease),
    opacity var(--dur-base) var(--ease),
    visibility 0s;
}

/* La salida es más rápida que la entrada. */
.disclosure-panel[data-open="false"] {
  grid-template-rows: minmax(0, 0fr);
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--dur-base) var(--ease),
    opacity 120ms var(--ease),
    visibility 0s linear var(--dur-base);
}

.disclosure-panel>.disclosure-body {
  overflow: hidden;
  min-height: 0;
}

.disclosure-body {
  padding: 0 var(--sp-2) var(--sp-6) calc(12px + var(--sp-4));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-7);
}

.disclosure-body .service-includes {
  margin: 0;
}

.disclosure-note {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: var(--size-sm);
  max-width: 70ch;
}

@media (max-width: 760px) {
  .disclosure-body {
    grid-template-columns: 1fr;
    padding-left: var(--sp-2);
  }

  .disclosure-heading h2 {
    font-size: var(--size-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .disclosure-panel {
    transition: none;
  }

  .disclosure-chevron {
    transition: color var(--dur-fast) linear;
  }
}


/* ============================================================================
   ESTADO DEL FORMULARIO
   El mensaje nombra qué pasó y cómo seguir; el color nunca es el único aviso.
   ========================================================================== */

.form-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.form-status {
  font-size: var(--size-xs);
  line-height: 1.5;
  color: var(--text-tertiary);
  max-width: 46ch;
}

.form-status:empty {
  display: none;
}

.form-status[data-tipo="error"] {
  color: var(--status-fault);
}

.form-status[data-tipo="exito"] {
  color: var(--status-online);
}

.form-status[data-tipo="trabajando"] {
  color: var(--text-secondary);
}


/* ============================================================================
   FICHA DE PRODUCTO
   Cada sistema ocupa una banda: argumento a un lado, la pantalla al otro.
   Se alternan los lados para que el ojo no caiga en un patrón de columna.
   ========================================================================== */

.product {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-8);
  align-items: center;
}

.product--flip .product-copy {
  order: 2;
}

.product-copy {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.product-copy h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -.025em;
  max-width: 16ch;
}

.product-copy>p {
  color: var(--text-secondary);
  max-width: 52ch;
  line-height: 1.65;
}

.product-kind {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--signal);
}

/* La captura es la prueba: marco de 1px, sin sombra ni perspectiva falsa. */
.shot {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-raised);
  display: block;
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
}

.shot figcaption {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line-subtle);
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  letter-spacing: .06em;
  color: var(--text-tertiary);
  background: var(--surface);
}

/* Vistas adicionales de un mismo producto */
.shot-strip {
  display: grid;
  /* auto-fit y no un fijo de tres: una tira de dos capturas debe repartirse
     el ancho, no dejar un hueco donde iria la tercera. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-subtle);
}

.shot-strip .shot img {
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top center;
}

/* Producto sin captura todavía: se dice, no se disimula. */
.shot--pending {
  display: grid;
  place-items: center;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  border-style: dashed;
}

.shot--pending p {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  max-width: 34ch;
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .product {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .product--flip .product-copy {
    order: 0;
  }

  .shot-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .shot-strip {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   FLUJO DE OPERACIÓN
   Aquí el número sí informa: es el orden real en que ocurre el día.
   Cada paso nombra el sistema que lo resuelve.
   ========================================================================== */

.flow {
  display: grid;
  counter-reset: paso;
}

.flow-step {
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line-subtle);
  align-items: start;
}

.flow-step:first-child {
  border-top: 1px solid var(--line);
}

.flow-step::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-data);
  font-size: var(--size-lg);
  color: var(--signal);
  line-height: 1.2;
}

.flow-step h3 {
  font-size: var(--size-md);
  font-weight: 500;
}

.flow-what {
  display: grid;
  gap: var(--sp-3);
}

.flow-what p {
  color: var(--text-secondary);
  font-size: var(--size-sm);
  line-height: 1.6;
}

.flow-system {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--line-subtle);
}

.flow-system dt {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-tertiary);
}

.flow-system dd {
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}

.flow-system dd b {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--signal);
  font-size: var(--size-sm);
}

.flow-system dd span {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.55;
}

/* Glosario de términos aduanales: se usan sin traducir, pero se explican. */
.glossary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--sp-8);
}

.glossary div {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-subtle);
  align-items: baseline;
}

.glossary dt {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-primary);
}

.glossary dd {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.55;
}

@media (max-width: 1080px) {
  .flow-step {
    grid-template-columns: 44px 1fr;
    gap: var(--sp-4);
  }

  .flow-system {
    grid-column: 2;
    padding-left: 0;
    border-left: 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line-subtle);
  }

  .glossary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .glossary div {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
}


/* ============================================================================
   LIENZO FLOTANTE
   El sitio deja de ir de borde a borde: vive dentro de una tarjeta con margen.
   ========================================================================== */

body.on-canvas {
  background: var(--ground);
  padding: var(--sp-4);
}

.canvas {
  background: var(--surface-page);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: clip;
  max-width: 1560px;
  margin: 0 auto;
}

.on-canvas .site-nav {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-subtle);
}

@supports not (backdrop-filter: blur(10px)) {
  .on-canvas .site-nav {
    background: var(--surface-page);
  }
}

.on-canvas .nav-links a {
  border-bottom: 0;
  padding: 8px 14px;
  border-radius: var(--r-full);
}

.on-canvas .nav-links a:hover,
.on-canvas .nav-links a[aria-current="page"] {
  background: var(--tint-signal-strong);
  color: var(--text-primary);
}

/* ============================================================================
   ESCAPARATE — el héroe
   Tres pantallas reales del producto, un riel numerado para cambiarlas, y las
   otras dos como miniaturas. El número informa: dice cuál estás viendo.
   ========================================================================== */

.showcase {
  padding: var(--sp-5);
}

.stage {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink-950);
  aspect-ratio: 21 / 9;
  min-height: 480px;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.slide[data-active="true"] {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(3, 6, 15, .97) 0%, rgba(3, 6, 15, .88) 48%, rgba(3, 6, 15, .55) 100%),
    linear-gradient(to bottom, rgba(3, 6, 15, .7) 0%, rgba(3, 6, 15, .1) 30%),
    rgba(3, 6, 15, .28);
}

/* Copia sobre la imagen: siempre blanca, el velo garantiza la lectura. */
.stage-copy {
  position: absolute;
  /* Libera la columna del riel numerado: 44px del botón más su margen. */
  inset: auto auto var(--sp-7) calc(var(--sp-6) + 44px + var(--sp-5));
  z-index: 2;
  max-width: 44ch;
  color: #FFFFFF;
  display: grid;
  gap: var(--sp-5);
}

.stage-copy h1 {
  color: #FFFFFF;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.stage-copy h1 em {
  font-style: normal;
  color: var(--signal-300);
}

.stage-copy p {
  color: rgba(255, 255, 255, .82);
  font-size: var(--size-md);
  line-height: 1.6;
}

.stage-rail {
  position: absolute;
  top: var(--sp-6);
  left: var(--sp-6);
  z-index: 3;
  display: grid;
  gap: var(--sp-2);
}

.rail-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(3, 6, 15, .45);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .7);
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}

.rail-btn:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .5);
}

.rail-btn[aria-selected="true"] {
  background: var(--signal-400);
  border-color: var(--signal-400);
  color: var(--ink-1000);
}

.stage-thumbs {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  z-index: 3;
  display: grid;
  gap: var(--sp-3);
  width: 158px;
}

.thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  cursor: pointer;
  background: var(--ink-900);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.thumb:hover {
  border-color: var(--signal-400);
  transform: translateY(-2px);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: .6;
}

.thumb span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 9px;
  background: rgba(3, 6, 15, .88);
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  letter-spacing: .02em;
  color: #FFFFFF;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .stage {
    aspect-ratio: auto;
    min-height: 0;
  }

  .slide {
    position: relative;
    display: none;
  }

  .slide[data-active="true"] {
    display: block;
  }

  .slide img {
    aspect-ratio: 16 / 10;
  }

  .stage-copy {
    position: static;
    inset: auto;
    padding: var(--sp-6);
    max-width: none;
  }

  .stage-copy h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .stage-thumbs {
    display: none;
  }

  .stage-rail {
    top: var(--sp-4);
    left: var(--sp-4);
    grid-auto-flow: column;
  }

  .rail-btn {
    width: 38px;
    height: 38px;
  }
}

/* ============================================================================
   BENTO IRREGULAR
   Cada pieza declara su ancho Y su alto. La irregularidad es el punto: piezas
   de tamaños distintos, y celdas de imagen intercaladas entre las de texto.
   Los tamaños están calculados para teselar sin huecos en 12 columnas.
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(122px, auto);
  grid-auto-flow: dense;
  gap: var(--sp-4);
}

.cell {
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.cell:hover {
  border-color: var(--signal-700);
}

a.cell {
  text-decoration: none;
  color: inherit;
}

a.cell:hover {
  transform: translateY(-2px);
}

.cell h3 {
  font-size: var(--size-md);
  font-weight: 500;
}

.cell p {
  color: var(--text-secondary);
  font-size: var(--size-xs);
  line-height: 1.6;
}

.cell .system-spec {
  margin-top: auto;
}

.cell .nx-btn {
  align-self: start;
}

.cell-eyebrow {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--signal);
}

/* Anchos y altos */
.w3 {
  grid-column: span 3;
}

.w4 {
  grid-column: span 4;
}

.w5 {
  grid-column: span 5;
}

.w7 {
  grid-column: span 7;
}

.h2 {
  grid-row: span 2;
}

.h3 {
  grid-row: span 3;
}

/* Celda protagonista: sin marco, el texto respira sobre la propia página */
.cell--lead {
  background: transparent;
  border: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 0;
  justify-content: center;
}

.cell--lead:hover {
  border: 0;
}

.cell--lead h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: -.028em;
  line-height: 1.08;
}

.cell--lead h2 em {
  font-style: normal;
  color: var(--signal);
}

.cell--lead p {
  font-size: var(--size-sm);
  max-width: 44ch;
}

/* Celda con imagen de fondo y texto encima */
.cell--media {
  position: relative;
  padding: 0;
  justify-content: flex-end;
  background: var(--ink-950);
  border-color: var(--line);
}

.cell--media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .88;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}

a.cell--media:hover img {
  transform: scale(1.04);
  opacity: 1;
}

.cell--media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 6, 15, .95) 8%, rgba(3, 6, 15, .5) 58%, rgba(3, 6, 15, .1) 100%);
}

.cell-overlay {
  position: relative;
  z-index: 1;
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}

.cell-overlay h3 {
  color: #FFFFFF;
  font-size: var(--size-lg);
}

.cell-overlay p {
  color: rgba(255, 255, 255, .82);
  max-width: 46ch;
}

.cell-overlay .cell-eyebrow {
  color: var(--signal-300);
}

/* Botón circular de flecha */
.go {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease);
}

a.cell:hover .go {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-accent);
}

.cell-overlay .go {
  border-color: rgba(255, 255, 255, .38);
  color: #FFFFFF;
  margin-top: 0;
}

a.cell--media:hover .cell-overlay .go {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--on-accent);
}

@media (max-width: 1080px) {
  .bento {
    grid-auto-rows: minmax(100px, auto);
  }

  .w3,
  .w4,
  .w5 {
    grid-column: span 6;
  }

  .w7 {
    grid-column: span 12;
  }

  .h3 {
    grid-row: span 2;
  }

  .cell--lead {
    grid-column: span 12;
    grid-row: span 1;
    padding: var(--sp-2) 0 var(--sp-4);
  }
}

@media (max-width: 640px) {
  body.on-canvas {
    padding: var(--sp-2);
  }

  .canvas {
    border-radius: var(--r-xl);
  }

  .showcase {
    padding: var(--sp-3);
  }

  .bento {
    grid-auto-rows: auto;
  }

  .w3,
  .w4,
  .w5,
  .w7 {
    grid-column: span 12;
  }

  .h2,
  .h3 {
    grid-row: span 1;
  }

  .cell {
    padding: var(--sp-5);
  }

  .cell--media {
    min-height: 210px;
  }
}


/* ============================================================================
   REPARTO EN PANELES
   El sitio deja de ser un lienzo continuo: es una pila de paneles, cada uno
   con su propio layout interno. Las filas combinan anchos distintos.
   ========================================================================== */

body.on-panels {
  background: var(--ground);
  padding: var(--sp-4);
}

.panels {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  gap: var(--sp-4);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-2xl);
  padding: var(--sp-7);
  min-width: 0;
}

.panel--flush {
  padding: 0;
  overflow: hidden;
}

.panel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.panel-row .panel {
  display: flex;
  flex-direction: column;
}

.panel-row .panel> :last-child {
  flex: 1;
}

.panel-row--2 {
  grid-template-columns: 5fr 7fr;
}

.panel-row--full {
  grid-template-columns: 1fr;
}

/* Etiqueta de panel: punto cyan + texto en versalitas */
.panel-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-6);
}

.panel-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--signal);
  flex-shrink: 0;
}

.panel-label .spacer {
  flex: 1;
  height: 1px;
  background: var(--line-subtle);
}

/* --------------------------------------------------------- barra de navegación */

.nav-panel {
  position: sticky;
  top: var(--sp-4);
  z-index: 40;
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(12px);
  border-radius: var(--r-full);
}

@supports not (backdrop-filter: blur(12px)) {
  .nav-panel {
    background: var(--surface);
  }
}

.nav-panel .nav-inner {
  height: auto;
  padding: 0;
  max-width: none;
}

.nav-panel .nav-links a {
  border-bottom: 0;
  padding: 8px 14px;
  border-radius: var(--r-full);
}

.nav-panel .nav-links a:hover,
.nav-panel .nav-links a[aria-current="page"] {
  background: var(--tint-signal-strong);
  color: var(--text-primary);
}

/* ----------------------------------------------------------------- héroe */

.hero-panel {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 0;
}

.hero-panel>div:first-child {
  padding: var(--sp-8);
  display: grid;
  align-content: center;
  gap: var(--sp-5);
}

.hero-panel h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -.032em;
}

.hero-panel h1 em {
  font-style: normal;
  color: var(--signal);
}

.hero-panel .hero-lede {
  max-width: 46ch;
}

.hero-media {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  margin: var(--sp-4);
  /* background: var(--ink-950); */
  min-height: 380px;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  position: absolute;
  inset: 0;
}

.hero-media .hero-frames {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: top center;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to top, rgba(3, 6, 15, .72) 0%, rgba(3, 6, 15, .12) 55%, rgba(3, 6, 15, .3) 100%); */
}

.hero-media figcaption {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 1;
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .9);
  /* background: rgba(3, 6, 15, .7); */
  padding: 6px 12px;
  border-radius: var(--r-full);
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: start;
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-secondary);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 7px 14px;
}

.availability i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--status-online);
  flex-shrink: 0;
}

/* -------------------------------------------------------------- métricas */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.4fr;
  gap: 0;
}

.stat {
  padding: 0 var(--sp-6);
  border-right: 1px solid var(--line-subtle);
}

.stat:first-child {
  padding-left: 0;
}

.stat:last-of-type {
  border-right: 0;
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  letter-spacing: -.03em;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat span {
  display: block;
  margin-top: var(--sp-3);
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.45;
}

.stat-note {
  padding-left: var(--sp-6);
  border-left: 1px solid var(--line-subtle);
  color: var(--text-secondary);
  font-size: var(--size-xs);
  line-height: 1.6;
}

.stat-note cite {
  display: block;
  margin-top: var(--sp-3);
  color: var(--text-tertiary);
  font-style: normal;
}

/* ------------------------------------------------------------ casos/obra */

.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.case-card {
  display: grid;
  gap: var(--sp-4);
  text-decoration: none;
  color: inherit;
}

.case-shot {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--ink-950);
  border: 1px solid var(--line-subtle);
}

.case-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-slow) var(--ease);
}

.case-card:hover .case-shot img {
  transform: scale(1.04);
}

.case-num {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 1;
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  color: #FFFFFF;
  background: rgba(3, 6, 15, .72);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-sm);
  padding: 4px 9px;
}

.case-card h3 {
  font-size: var(--size-md);
  font-weight: 500;
}

.case-card>p {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.6;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags li {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  letter-spacing: .05em;
  color: var(--text-tertiary);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-full);
  padding: 4px 11px;
}

/* --------------------------------------------------- listas de los paneles */

.plist {
  display: grid;
  gap: 0;
  align-content: space-between;
}

/* Variante apilada: el título arriba y la explicación debajo. En columna
   estrecha, el par lado a lado parte el título en tres renglones. */
.plist.plist--stack a,
.plist.plist--stack div {
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  align-items: start;
}

.plist.plist--stack small {
  line-height: 1.5;
}

.plist a,
.plist div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-subtle);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--size-sm);
  transition: color var(--dur-fast) var(--ease);
}

.plist a:last-child,
.plist div:last-child {
  border-bottom: 0;
}

.plist a:hover {
  color: var(--signal);
}

.plist small {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  color: var(--text-muted);
  letter-spacing: .04em;
}

/* Rejilla de piezas técnicas */
.chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--sp-3);
}

.chip {
  display: grid;
  gap: var(--sp-2);
  place-items: center;
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
}

.chip b {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  color: var(--text-primary);
}

.chip span {
  font-size: var(--size-3xs);
  color: var(--text-muted);
  line-height: 1.3;
}

/* ----------------------------------------------------------------- cierre */

.closing {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: var(--sp-6);
  align-items: start;
}

.closing h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  max-width: 14ch;
}

.closing p {
  color: var(--text-tertiary);
  margin: var(--sp-5) 0;
  max-width: 42ch;
  font-size: var(--size-sm);
}

.contact-card {
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.contact-card a {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-3);
  align-items: center;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--size-xs);
  padding: var(--sp-2) 0;
}

.contact-card a:hover {
  color: var(--signal);
}

.contact-card svg {
  color: var(--text-tertiary);
}

@media (max-width: 1080px) {
  .hero-panel {
    grid-template-columns: 1fr;
  }

  .hero-media {
    min-height: 280px;
    aspect-ratio: 16 / 10;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  .stat {
    border-right: 0;
    padding: 0;
  }

  .stat-note {
    grid-column: span 2;
    border-left: 0;
    border-top: 1px solid var(--line-subtle);
    padding: var(--sp-5) 0 0;
  }

  .panel-row,
  .panel-row--2 {
    grid-template-columns: 1fr;
  }

  .cases {
    grid-template-columns: 1fr;
  }

  .closing {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.on-panels {
    padding: var(--sp-2);
  }

  .panel {
    padding: var(--sp-5);
    border-radius: var(--r-xl);
  }

  .hero-panel>div:first-child {
    padding: var(--sp-5);
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .chips {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================================
   LÍNEA DE TIEMPO DEL MÉTODO
   Tres etapas en orden. El número informa: es la secuencia real del trabajo.

   El estado por defecto es el COMPLETO — línea trazada y marcadores llenos —
   para que sin JS la sección se lea entera. El guion añade `is-playing` cuando
   la sección entra en pantalla, y solo entonces se dibuja en secuencia.
   ========================================================================== */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  position: relative;
}

/* Canal y trazo: del centro del primer marcador al del tercero.
   Los marcadores se alinean al inicio de su columna, no al centro, así que
   el extremo derecho se calcula desde el arranque de la tercera columna. */
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 22px;
  right: calc(33.3333% - (var(--sp-7) * 2 / 3) - 22px);
  height: 2px;
  border-radius: var(--r-full);
}

.timeline::before {
  background: var(--line);
}

.timeline::after {
  background: linear-gradient(90deg, var(--signal), var(--signal-300));
  transform-origin: left center;
}

.tl-step {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.tl-marker {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: var(--signal);
  color: var(--on-accent);
  border: 3px solid var(--surface);
  font-family: var(--font-data);
  font-size: var(--size-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tl-stage {
  font-family: var(--font-data);
  font-size: var(--size-3xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-tertiary);
}

.tl-step h3 {
  font-size: var(--size-md);
  font-weight: 500;
  line-height: 1.25;
  max-width: 22ch;
}

.tl-step p:last-child {
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.6;
  max-width: 34ch;
}

/* --- La secuencia, solo cuando el guion la dispara --------------------- */

.is-playing .timeline::after {
  animation: tl-draw var(--dur-slow) var(--ease) 120ms backwards;
}

.is-playing .tl-marker {
  animation: tl-node var(--dur-base) var(--ease) backwards;
}

.is-playing .tl-step> :not(.tl-marker) {
  animation: tl-in var(--dur-base) var(--ease) backwards;
}

.is-playing .tl-step:nth-child(1) .tl-marker {
  animation-delay: 120ms;
}

.is-playing .tl-step:nth-child(2) .tl-marker {
  animation-delay: 320ms;
}

.is-playing .tl-step:nth-child(3) .tl-marker {
  animation-delay: 520ms;
}

.is-playing .tl-step:nth-child(1)> :not(.tl-marker) {
  animation-delay: 200ms;
}

.is-playing .tl-step:nth-child(2)> :not(.tl-marker) {
  animation-delay: 400ms;
}

.is-playing .tl-step:nth-child(3)> :not(.tl-marker) {
  animation-delay: 600ms;
}

@keyframes tl-draw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes tl-node {
  from {
    transform: scale(.55);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes tl-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 860px) {

  /* En columna la línea corre en vertical, a la izquierda de los marcadores. */
  .timeline {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .timeline::before,
  .timeline::after {
    top: 21px;
    bottom: 21px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .timeline::after {
    transform-origin: center top;
  }

  .is-playing .timeline::after {
    animation-name: tl-draw-y;
  }

  @keyframes tl-draw-y {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }

  .tl-step {
    grid-template-columns: 44px 1fr;
    column-gap: var(--sp-4);
    align-items: start;
  }

  .tl-marker {
    grid-row: span 3;
  }

  .tl-step h3 {
    max-width: none;
  }

  .tl-step p:last-child {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .is-playing .timeline::after,
  .is-playing .tl-marker,
  .is-playing .tl-step> :not(.tl-marker) {
    animation: none;
  }
}


/* ============================================================================
   PÁGINAS INTERIORES DENTRO DE PANELES
   El .shell que envuelve el contenido pierde su función cuando vive dentro de
   un panel: el panel ya aporta el ancho y el relleno.
   ========================================================================== */

.panels .panel>.shell {
  max-width: none;
  padding: 0;
}

.panels .panel.page-hero {
  padding: var(--sp-8) var(--sp-7);
  border-bottom: 0;
}

.panels .panel.closer {
  border-top: 0;
  border-bottom: 0;
  padding: var(--sp-8) var(--sp-7);
}

/* La franja alterna deja de tener sentido: cada panel ya es su propia
   superficie. Se conserva un realce sutil para variar el ritmo. */
.panels .panel.is-raised {
  background: var(--surface-raised);
}

@media (max-width: 640px) {

  .panels .panel.page-hero,
  .panels .panel.closer {
    padding: var(--sp-5);
  }
}
/* ============================================================================
   COMPOSICIÓN EDITORIAL — servicios.html y productos.html
   ----------------------------------------------------------------------------
   Las dos páginas dejaban todo el peso en el texto. Aquí el reparto cambia:
   el encabezado se apoya en una imagen a sangre, cada línea de servicio se
   gana media pantalla con su propia imagen, y las secciones respiran más.
   Nada de esto sustituye al sistema: usa sus tokens, sus radios y su acento.
   ========================================================================== */

/* --- 1 · ENCABEZADO FOTOGRÁFICO ------------------------------------------ */

.hero-ed {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: 34rem;
  padding: var(--sp-8) var(--sp-7);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--surface-warm);
}

.hero-ed-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--surface-warm);
}

.hero-ed-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--img-opacity);
}

/* Velo direccional: el texto vive abajo-izquierda, así que ahí es donde
   la imagen se apaga. Tres paradas del mismo color, nunca `transparent`. */
.hero-ed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, var(--scrim-100) 0%, var(--scrim-45) 42%, var(--scrim-0) 78%),
    linear-gradient(to top, var(--scrim-100) 0%, var(--scrim-0) 55%);
}

.hero-ed-body {
  max-width: 34ch;
}

.hero-ed-body h1 {
  margin: 0 0 var(--sp-4);
  font-size: clamp(var(--size-3xl), 5vw, var(--size-5xl));
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hero-ed-body h1 em {
  font-style: normal;
  color: var(--signal);
}

.hero-ed-body > p {
  margin: 0 0 var(--sp-6);
  max-width: 46ch;
  color: var(--text-secondary);
  font-size: var(--size-md);
  line-height: 1.55;
}

.hero-ed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Fichas flotantes: hechos verificables, no adornos. */
.hero-ed-chips {
  position: absolute;
  top: var(--sp-7);
  right: var(--sp-7);
  z-index: 1;
  display: grid;
  gap: var(--sp-3);
  width: 15rem;
}

.hero-ed-chip {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 6px 24px -12px rgba(6, 11, 28, .35);
}

.hero-ed-chip b {
  font-family: var(--font-data);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--signal);
}

.hero-ed-chip span {
  font-size: var(--size-2xs);
  line-height: 1.4;
  color: var(--text-tertiary);
}

/* --- 2 · TIRA DE ANCLAS EN PÍLDORA --------------------------------------- */

.svc-jump {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-track) transparent;
}

.svc-jump a {
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--size-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.svc-jump a:hover,
.svc-jump a:focus-visible {
  border-color: var(--tint-signal-ring);
  background: var(--tint-signal);
  color: var(--signal);
}

/* --- 3 · CELDA PARTIDA: TEXTO Y SU IMAGEN -------------------------------- */

.splits {
  display: grid;
  gap: var(--sp-6);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  scroll-margin-top: 6rem;
}

.split-body {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-7);
}

.split-body h2 {
  margin: 0;
  font-size: var(--size-xl);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.split-lede {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--size-md);
  line-height: 1.55;
}

.split-includes {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.split-includes li {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--text-tertiary);
  font-size: var(--size-sm);
  line-height: 1.5;
}

/* Guion, no bolita: el sistema ya usa el guion en sus listas de alcance. */
.split-includes li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--signal);
}

.split-media {
  position: relative;
  min-height: 24rem;
  background: var(--surface-warm);
}

/* `contain`, no `cover`: una captura de sistema recortada a media altura no
   comunica nada, y cada celda cortaba por un punto distinto. Aquí se ve
   completa, con aire alrededor y su propio marco de 1px. */
.split-media > img,
.split-media > picture img {
  position: absolute;
  inset: var(--sp-5);
  width: calc(100% - var(--sp-5) * 2);
  height: calc(100% - var(--sp-5) * 2);
  object-fit: contain;
  border-radius: var(--r-md);
}

/* Alternancia: la imagen cambia de lado en las pares. Se mueve el orden
   visual, no el orden del documento — el lector de pantalla sigue leyendo
   encabezado y luego imagen. */
.split--flip .split-media { order: -1; }

/* --- 4 · HUECO DE IMAGEN PENDIENTE --------------------------------------- */
/* No es un marcador de posición gris: se declara como lo que es, con la
   proporción final y el encargo escrito. Se retira al llegar el asset. */

.slot {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px dashed var(--line-warm);
  border-radius: var(--r-md);
  margin: var(--sp-4);
  background: var(--surface-warm);
  text-align: center;
}

.split-media .slot {
  position: absolute;
  inset: var(--sp-4);
}

/* En el encabezado el texto ocupa el tercio izquierdo, así que el encargo
   se queda del lado donde de verdad irá la foto. */
.hero-ed-media .slot {
  position: absolute;
  inset: var(--sp-6) var(--sp-6) var(--sp-6) 44%;
  margin: 0;
}

.slot svg {
  color: var(--text-muted);
  opacity: .65;
}

.slot b {
  font-family: var(--font-data);
  font-size: var(--size-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.slot span {
  max-width: 34ch;
  color: var(--text-tertiary);
  font-size: var(--size-xs);
  line-height: 1.5;
}

/* --- 5 · TIRA DE ATRIBUTOS ----------------------------------------------- */

.marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--sp-5);
}

.mark {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding: var(--sp-5);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-warm);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

a.mark:hover,
a.mark:focus-visible {
  border-color: var(--tint-signal-ring);
  transform: translateY(-2px);
}

.mark svg {
  color: var(--signal);
}

.mark b {
  font-size: var(--size-sm);
  font-weight: 600;
  line-height: 1.2;
}

.mark span {
  color: var(--text-tertiary);
  font-size: var(--size-2xs);
  line-height: 1.45;
}

/* --- 6 · ADAPTACIÓN ------------------------------------------------------ */

@media (max-width: 1080px) {
  .hero-ed {
    min-height: 0;
    padding: var(--sp-7) var(--sp-5);
  }

  /* La imagen deja de ser capa y pasa a ser el primer bloque: superpuesta a
     este ancho, el titular y el encargo del hueco se pisaban entre sí. */
  .hero-ed-media {
    position: relative;
    inset: auto;
    z-index: auto;
    aspect-ratio: 16 / 10;
    margin: 0 0 var(--sp-6);
    border-radius: var(--r-lg);
    overflow: hidden;
  }

  .hero-ed-media .slot {
    inset: var(--sp-3);
  }

  .hero-ed::before { content: none; }

  .hero-ed-chips {
    position: static;
    width: auto;
    margin-top: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .hero-ed::before {
    background: linear-gradient(to top, var(--scrim-100) 34%, var(--scrim-45) 68%, var(--scrim-0) 100%);
  }

  .split,
  .split--flip {
    grid-template-columns: 1fr;
  }

  .split-body { padding: var(--sp-6); }

  /* En una columna la imagen va arriba siempre, incluidas las alternadas. */
  .split-media {
    order: -1;
    min-height: 20rem;
  }
}

@media (max-width: 640px) {
  .hero-ed-body h1 { font-size: var(--size-2xl); }
  .split-media { min-height: 18rem; }
  .marks { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

/* Encabezado anclado arriba: cuando la imagen es una captura, el encuadre
   útil está en la cabecera del sistema, no en su centro. */
.hero-ed--top .hero-ed-media img {
  object-position: top center;
}

/* Mismo velo reforzado, pero con la imagen centrada: cuando el fondo es la
   captura de OTRO sitio, anclarla arriba deja su barra de navegación pegada
   bajo la nuestra y se leen como dos menús. */
.hero-ed--mid::before,
.hero-ed--top::before {
  background:
    linear-gradient(to right,
      var(--scrim-100) 0%,
      var(--scrim-100) 36%,
      var(--scrim-45) 55%,
      var(--scrim-0) 84%),
    linear-gradient(to top, var(--scrim-100) 0%, var(--scrim-0) 42%);
}

/* Las anclas no deben dejar el encabezado de sección debajo de la barra. */
.panel[id] {
  scroll-margin-top: 5rem;
}

/* ============================================================================
   CAPTURA ALTA QUE SE RECORRE SOLA
   ----------------------------------------------------------------------------
   Un panel de administración es más alto que ancho: puesto completo, estira la
   sección a dos pantallas y nadie llega al final. Aquí se muestra dentro de una
   ventana fija y la imagen se recorre sola de arriba abajo, ida y vuelta.
   Se anima `object-position`, no `transform`: así el recorrido no depende de la
   altura natural del archivo ni necesita un envoltorio extra.
   Al señalarla con el puntero se detiene, para poder leerla.
   ========================================================================== */

@keyframes nx-pan {
  0%, 10%  { object-position: center top; }
  50%, 60% { object-position: center bottom; }
  100%     { object-position: center top; }
}

.shot--pan img {
  height: var(--pan-h, 26rem);
  object-fit: cover;
  object-position: center top;
  animation: nx-pan 30s ease-in-out infinite;
}

/* Celda con captura vertical: se recorre en ventana, no se encoge a miniatura.
   El marco de 1px es lo que la hace leer como ventana y no como imagen
   descuadrada — es el mismo marco que `.shot` ya usa en productos. */
.split-media--pan {
  min-height: 28rem;
}

.split-media--pan > img {
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--line);
  animation: nx-pan 30s ease-in-out infinite;
}

.split-media--pan:hover > img,
.split-media--pan:focus-within > img {
  animation-play-state: paused;
}

.shot--pan:hover img,
.shot--pan:focus-within img {
  animation-play-state: paused;
}

/* La ventana se encoge con la columna: en pantallas medianas 26rem ya es
   la mitad del alto útil. */
@media (max-width: 1080px) {
  .shot--pan img { --pan-h: 20rem; }
}

@media (max-width: 640px) {
  .shot--pan img { --pan-h: 15rem; }
}

/* Quien pide menos movimiento ve la captura quieta, anclada arriba, que es
   donde vive el encabezado del sistema. */
@media (prefers-reduced-motion: reduce) {
  .shot--pan img,
  .split-media--pan > img {
    animation: none;
    object-position: center top;
  }
}

/* Los hechos dentro de una celda partida bajan a una sola columna: la
   retícula de tres no cabe en media pantalla. */
.facts--stacked {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.facts--stacked .fact h3 {
  font-size: var(--size-md);
}

/* Las anclas del portafolio apuntan al encabezado de cada bloque. */
h2[id] {
  scroll-margin-top: 6rem;
}

/* La ventana de recorrido se acorta con la pantalla: 28rem en un teléfono
   es media pantalla ocupada por una sola captura. */
@media (max-width: 1080px) {
  .split-media--pan { min-height: 22rem; }
}

@media (max-width: 640px) {
  .split-media--pan { min-height: 19rem; }
}

/* El botón acusa recibo mientras la petición viaja. Estaba marcándose con
   data-loading pero nada lo dibujaba, así que no pasaba nada visible. */
.nx-btn[data-loading] {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.nx-btn[data-loading]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-full);
  color: var(--on-accent);
  animation: nx-spin 640ms linear infinite;
}

@keyframes nx-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nx-btn[data-loading]::after { animation-duration: 1600ms; }
}

/* Enlace de rescate dentro del aviso del formulario. */
.form-rescate {
  color: var(--signal);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ============================================================================
   PÁGINA 404 — no-encontrado.html
   ----------------------------------------------------------------------------
   La imagen ocupa la pantalla completa y manda; el texto se acomoda donde la
   foto ya es oscura (el campo estelar de la derecha), así que el velo apenas
   tiene que trabajar y la fotografía se ve entera.
   Página de un solo aspecto: es de noche por definición, no sigue el tema.
   ========================================================================== */

.nf-body {
  margin: 0;
  background: #03060F;
}

.nf {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  justify-items: end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: var(--sp-7);
}

.nf-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Velo direccional: oscurece solo el costado donde vive el texto. */
.nf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to left,
      rgba(3, 6, 15, .86) 0%,
      rgba(3, 6, 15, .62) 30%,
      rgba(3, 6, 15, .10) 58%,
      rgba(3, 6, 15, 0) 74%),
    linear-gradient(to top,
      rgba(3, 6, 15, .55) 0%,
      rgba(3, 6, 15, 0) 42%);
}

.nf-brand {
  position: absolute;
  top: var(--sp-7);
  left: var(--sp-7);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(3, 6, 15, .8);
}

.nf-brand b {
  font-weight: 700;
  color: var(--signal-300);
}

.nf-panel {
  max-width: 42ch;
  text-align: left;
}

.nf-code {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-data);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--signal-300);
}

.nf-panel h1 {
  margin: 0 0 var(--sp-4);
  color: #FFFFFF;
  font-size: clamp(var(--size-2xl), 5vw, var(--size-4xl));
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.nf-lede {
  margin: 0 0 var(--sp-6);
  color: rgba(255, 255, 255, .82);
  font-size: var(--size-md);
  line-height: 1.6;
}

.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* Sobre fotografía, el botón secundario del sistema pierde contraste:
   este lleva su propio borde claro. */
.nf-ghost {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--r-full);
  color: #FFFFFF;
  font-size: var(--size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.nf-ghost:hover,
.nf-ghost:focus-visible {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, .12);
}

.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.nf-links a {
  color: rgba(255, 255, 255, .72);
  font-size: var(--size-sm);
  text-decoration: none;
  text-underline-offset: 4px;
}

.nf-links a:hover,
.nf-links a:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
}

@media (max-width: 900px) {
  /* En vertical el encuadre se corre hacia el campo estelar: es donde está
     el astronauta y donde el texto se sostiene solo. */
  .nf {
    justify-items: stretch;
    padding: var(--sp-6) var(--sp-5) var(--sp-7);
  }

  .nf-img { object-position: 70% center; }

  .nf::after {
    background: linear-gradient(to top,
      rgba(3, 6, 15, .92) 0%,
      rgba(3, 6, 15, .72) 38%,
      rgba(3, 6, 15, .18) 70%,
      rgba(3, 6, 15, 0) 100%);
  }

  .nf-brand {
    top: var(--sp-5);
    left: var(--sp-5);
    font-size: var(--size-md);
  }

  .nf-panel { max-width: none; }
}