/* =========================================================================
   NUON · Web — page-specific styles
   Builds on styles/tokens.css tokens.

   Breakpoints: la escala está en styles/tokens.css (--bp-xs .. --bp-nav).
   Son 359 · 560 · 700 · 900 · 1000 · 1260 px. Las media queries no aceptan
   var(), así que aquí van literales, pero no se inventan valores nuevos.
   La única excepción viva —800px en .consola— lleva la medición que la
   justifica escrita encima del @media; sin ese número, un umbral fuera de
   la escala es deuda y se colapsa.
   ========================================================================= */

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
}
/* Sin overflow-x: hidden. Ocultarlo no evitaba los desbordamientos, sólo los
   volvía invisibles: el contenido sobrante quedaba recortado y sin forma de
   llegar a él. Lo que sí necesita recorte es el ticker, y lo tiene acotado en
   .ticker. Si aparece una barra horizontal, es un fallo de layout que atender. */
body {
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}

:root {
  --max-w: 1320px;
  --gutter: 40px;
  --section-y: 120px;
}
@media (max-width: 900px) {
  :root {
    --gutter: 20px;
    --section-y: 72px;
  }
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Page-wide blueprint background ---------- */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--ink-0);
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 10%, var(--azul-a05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 80%, var(--magenta-a04), transparent 60%),
    linear-gradient(var(--blueprint-grid-pale-a55) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-pale-a55) 1px, transparent 1px),
    linear-gradient(var(--blueprint-grid-pale-a22) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-pale-a22) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    160px 160px,
    160px 160px,
    32px 32px,
    32px 32px;
  pointer-events: none;
}

/* registration marks (corners) */
.reg-mark {
  position: fixed;
  width: 24px;
  height: 24px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
}
.reg-mark::before,
.reg-mark::after {
  content: "";
  position: absolute;
  background: var(--nuon-azul);
}
.reg-mark::before {
  width: 16px;
  height: 1px;
  top: 11px;
  left: 4px;
}
.reg-mark::after {
  width: 1px;
  height: 16px;
  left: 11px;
  top: 4px;
}
.reg-mark.tl {
  top: 12px;
  left: 12px;
}
.reg-mark.tr {
  top: 12px;
  right: 12px;
}
.reg-mark.bl {
  bottom: 12px;
  left: 12px;
}
.reg-mark.br {
  bottom: 12px;
  right: 12px;
}

/* ---------- Mono labels & helpers ---------- */
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuon-azul);
}
.mono-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-400);
}
.mono-bracket::before {
  content: "[ ";
  opacity: 0.7;
}
.mono-bracket::after {
  content: " ]";
  opacity: 0.7;
}

.grad-text {
  background: var(--nuon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-rule {
  height: 2px;
  width: 100%;
  background: var(--nuon-gradient);
  border-radius: 999px;
}

/* ---------- TOP NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: var(--white-a78);
  border-bottom: 1px solid var(--border-2);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 68px;
  position: relative;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav__logo img {
  /* the Figma export is cropped to the mark: 20 px keeps the old visible size */
  height: 20px;
  display: block;
}
.nav__panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  flex-shrink: 0;
}
.nav__link {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-700);
  border-radius: 999px;
  transition:
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  text-decoration: none;
}
.nav__link:hover {
  background: var(--ink-50);
  color: var(--ink-900);
}
.nav__spacer {
  flex: 1;
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* El CTA no parte su etiqueta en dos líneas: si no cabe entera, preferimos
   que el nav pase a hamburguesa (ver el @media de abajo). Sin esto el botón
   se partía «Solicitar / diagnóstico» y perdía la flecha contra el borde. */
.nav__right .btn {
  white-space: nowrap;
}
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--ink-50);
  border-radius: 999px;
  padding: 3px;
}
.nav__lang button {
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink-500);
  /* 6px arriba y abajo dejan el botón en 25px: WCAG 2.5.8 (AA) fija 24×24
     como suelo, y con 5px se quedaba en 23. */
  padding: 6px 10px;
  border-radius: 999px;
  transition: all var(--dur-base) var(--ease-standard);
}
.nav__lang button.is-on {
  background: var(--ink-900);
  color: var(--ink-0);
}
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  background: var(--ink-0);
  color: var(--ink-900);
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform var(--dur-base) var(--ease-standard),
    opacity var(--dur-base) var(--ease-standard);
}
.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav__toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* El menú horizontal ya no cabe con 8 entradas + conmutador + CTA: ni los
   enlaces ni el botón se encogen (nowrap), así que aquí pasa a hamburguesa.
   El umbral está medido: con el CTA en una línea, .nav__right vuelve a quedar
   dentro de la columna de contenido a partir de 1234px en español y 1253px en
   inglés. Cortamos en 1260 —y no en el 1130 anterior, que dejaba la barra rota
   entre 1131 y 1233— para cubrir el inglés con holgura sin robarle el nav
   horizontal a las ventanas de 1280px. */
@media (max-width: 1260px) {
  .nav__inner {
    gap: 12px;
  }
  .nav__logo {
    flex: 1;
  }
  .nav__toggle {
    display: inline-flex;
    margin-right: 6px;
    flex: 0 0 auto;
  }
  .nav__panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border-2);
    border-radius: 20px;
    background: var(--ink-0);
    box-shadow: 0 20px 45px var(--ink-900-a12);
    /* El nav es sticky, así que el panel no se mueve al desplazar la página:
       si no cabe en el viewport, el CTA final queda inalcanzable. Lo limitamos
       a la altura libre bajo la barra (68px de nav + 8px de separación + 16px
       de aire abajo) y lo hacemos desplazable por dentro.
       100dvh y no 100vh: la barra dinámica de Safari iOS volvería a ocultarlo. */
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__panel.is-open {
    display: flex;
  }
  .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 0;
  }
  /* 44px es el mínimo cómodo de las guías de iOS y Material. Con el panel ya
     limitado en altura y desplazable por dentro, crecer aquí es gratis. */
  .nav__link {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 14px;
    text-align: left;
    background: transparent;
    color: var(--ink-800);
    border: 0.1px solid var(--border-1);
    font-size: 14px;
  }
  .nav__link:hover {
    background: var(--ink-0);
    color: var(--ink-900);
    border-color: var(--border-2);
  }
  .nav__spacer {
    display: none;
  }
  .nav__right {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .nav__lang {
    justify-content: center;
    padding: 4px;
  }
  /* ES y EN eran dos objetivos de 33×23 px pegados: el peor caso de toque
     erróneo del sitio. Se reparten la fila entera. */
  .nav__lang button {
    flex: 1;
    min-height: 44px;
    font-size: 11px;
  }
  .nav__right .btn {
    justify-content: center;
    width: 100%;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  border: 1.5px solid transparent;
  transition: all var(--dur-base) var(--ease-standard);
  cursor: pointer;
}
.btn--primary {
  background: var(--ink-900);
  color: var(--ink-0);
}
.btn--primary:hover {
  background: var(--nuon-azul);
  box-shadow:
    0 0 0 4px var(--azul-a12),
    var(--shadow-glow-cian);
}
.btn--ghost {
  background: transparent;
  color: var(--ink-700);
  border-color: var(--border-1);
}
.btn--ghost:hover {
  border-color: var(--ink-700);
  color: var(--ink-900);
}
.btn--gradient {
  background: var(--nuon-gradient);
  color: var(--ink-0);
  position: relative;
}
.btn--gradient::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: 999px;
  background: var(--ink-900);
  z-index: 0;
}
.btn--gradient span {
  position: relative;
  z-index: 1;
}
.btn--lg {
  padding: 14px 22px;
  font-size: 14px;
}

/* arrow icon */
.btn .arr {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
  background-repeat: no-repeat;
  transition: transform var(--dur-base) var(--ease-standard);
}
.btn:hover .arr {
  transform: translateX(3px);
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
}
.hero__head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 56px;
}
.hero__overline {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero__overline .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-a18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(60px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin: 0;
}
/* Segunda línea del titular en degradado de marca — el tratamiento
   tipográfico del hero anterior, ahora aplicado a la bajada del titular. */
.hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 12px 0 0;
  background: var(--nuon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-600);
  max-width: 440px;
  margin-bottom: 24px;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__stage {
  position: relative;
  border: 1px solid var(--azul-a16);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, var(--blueprint-line-a10), transparent 70%),
    var(--panel-sheen);
  overflow: hidden;
  min-height: 580px;
  box-shadow:
    0 1px 2px var(--ink-900-a04),
    0 30px 60px -30px var(--ink-900-a12);
}
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--azul-a05) 1px, transparent 1px),
    linear-gradient(90deg, var(--azul-a05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.hero__stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: radial-gradient(ellipse 40% 100% at 75% 100%, var(--magenta-a16), transparent 60%);
  pointer-events: none;
}

.hero__tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  z-index: 5;
}
.hero__tag.tl {
  top: 18px;
  left: 22px;
}
.hero__tag.tr {
  top: 18px;
  right: 22px;
  color: var(--nuon-azul);
}
.hero__tag.bl {
  bottom: 18px;
  left: 22px;
}

/* Lámina animada del héroe ----------
   Cada SVG exportado (escritorio y móvil) ya trae panel redondeado, grilla, rótulos y sombra propios,
   así que el chrome claro del stage —borde, degradados, rejilla, altura
   mínima— sobra y se desactiva. La sombra del SVG se dibuja fuera del viewBox:
   sin overflow visible queda cortada. */
.hero__stage--anim {
  border: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
  overflow: visible;
}
.hero__stage--anim::before,
.hero__stage--anim::after {
  content: none;
}

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

/* alternate hero — typographic */
.hero--type .hero__stage {
  display: grid;
  place-items: center;
  background: var(--ink-900);
}
.hero--type .hero__stage::before {
  background-image:
    linear-gradient(var(--blueprint-line-a10) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line-a10) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero--type .typo-hero {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(60px, 9vw, 144px);
  line-height: 0.92;
  text-align: center;
  color: var(--ink-0);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
  padding: 24px;
}
.hero--type .typo-hero .grad {
  background: var(--nuon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 1000px) {
  .hero__head {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* La lámina animada se escala con su propia proporción: una altura mínima
     sólo le añadiría panel vacío debajo. */
  .hero__stage:not(.hero__stage--anim) {
    min-height: 480px;
  }
}

@media (max-width: 700px) {
  /* El panel deja de ser un lienzo de altura fija y reserva arriba la banda de
     los tags. La lámina animada no lleva tags ni necesita relleno. */
  .hero__stage:not(.hero__stage--anim) {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 44px 14px 14px;
  }
  /* La lámina móvil es vertical (359 × 577): a todo el ancho de una tablet
     pequeña pasaría de 1000 px de alto. Se queda en un tamaño de teléfono. */
  .hero__anim {
    max-width: 440px;
    margin-inline: auto;
  }

  .hero__tag {
    font-size: 9px;
    letter-spacing: 0.1em;
    line-height: 1.25;
  }
  /* Los dos tags comparten la banda superior, cada uno en su mitad: antes tl
     rompía a dos líneas y chocaba con tr, que iba 20 px más abajo. */
  .hero__tag.tl {
    top: 14px;
    left: 14px;
    max-width: 48%;
  }
  .hero__tag.tr {
    top: 14px;
    right: 14px;
    max-width: 46%;
    text-align: right;
  }
  /* "PROYECCIÓN 30° · ESCALA 1:200" es decoración de lámina técnica. */
  .hero__tag.bl {
    display: none;
  }
}

/* ---------- KPI STRIP ---------- */
.kpi-strip {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 48px 0;
  background: var(--ink-0);
}
.kpi-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.kpi {
  padding: 8px 28px;
  border-left: 1px solid var(--divider);
  position: relative;
}
/* El relleno de la celda sirve para separar del filete divisorio, no del borde
   del contenedor: la primera columna arranca a ras del margen y la última
   termina a ras, igual que el resto de las secciones. */
.kpi:first-child {
  border-left: 0;
  padding-left: 0;
}
.kpi:last-child {
  padding-right: 0;
}
.kpi__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuon-azul);
  margin-bottom: 12px;
}
.kpi__num {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}
/* Los espacios del valor publicado son parte del texto, no separación
   tipográfica: se preservan en vez de fijar un margen. */
.kpi__num .unit {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  color: var(--ink-500);
  letter-spacing: 0;
  white-space: pre-wrap;
}
.kpi__sub {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-400);
}

@media (max-width: 900px) {
  .kpi-strip__inner {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
  .kpi:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .kpi:nth-child(even) {
    padding-right: 0;
  }
}

@media (max-width: 700px) {
  .kpi-strip {
    padding: 32px 0;
  }
  .kpi-strip__inner {
    row-gap: 18px;
  }
  .kpi {
    padding: 0 14px 0 0;
    min-height: 158px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  /* La divisoria de la columna derecha queda a su izquierda: el aire va de ese
     lado, si no el texto sale pegado al filete. */
  .kpi:nth-child(even) {
    padding: 0 0 0 14px;
  }
  .kpi__label {
    font-size: 9px;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
  }
  .kpi__num {
    font-size: clamp(48px, 15vw, 60px);
    line-height: 0.96;
    letter-spacing: -0.03em;
  }
  .kpi__num .unit {
    font-size: 14px;
  }
  .kpi__sub {
    margin-top: 8px;
    font-size: 10px;
    line-height: 1.25;
  }
}

/* ---------- SECTION HEADER ---------- */
.section {
  padding: var(--section-y) 0;
}
.section--dark {
  background: var(--ink-900);
  color: var(--ink-0);
  position: relative;
  overflow: hidden;
}
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 40% at 30% 20%, var(--blueprint-line-a10), transparent 70%),
    linear-gradient(var(--blueprint-grid-a45) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-a45) 1px, transparent 1px);
  background-size:
    100% 100%,
    32px 32px,
    32px 32px;
  pointer-events: none;
}
.section--dark > * {
  position: relative;
}

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
.section__overline {
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section__overline .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-400);
}
.section__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink-900);
  text-wrap: balance;
}
.section--dark .section__title {
  color: var(--ink-0);
}
.section--dark .section__overline .num {
  color: var(--ink-200-a65);
}
@media (max-width: 359px) {
  .section__title {
    font-size: 30px;
  }
}
.section__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 520px;
}
.section--dark .section__lede {
  color: var(--white-a70);
}

@media (max-width: 900px) {
  .section__head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }
}

/* ---------- HOW IT WORKS ---------- */
.howit {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: stretch;
}
.howit__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.howit__step {
  padding: 18px 18px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--ink-0);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard);
  text-align: left;
  font-family: inherit;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.howit__step:hover {
  border-color: var(--nuon-azul);
}
.howit__step.is-active {
  border-color: var(--nuon-azul);
  box-shadow: var(--shadow-glow-cian);
  background: var(--panel-sheen);
}
.howit__step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  border: 1px solid var(--border-1);
  padding: 6px 8px;
  border-radius: 6px;
  min-width: 38px;
  text-align: center;
}
.howit__step.is-active .howit__step-num {
  border-color: var(--nuon-azul);
  color: var(--nuon-azul);
}
.howit__step-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.howit__step-sub {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.4;
}

.howit__viz {
  border: 1px solid var(--azul-a16);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, var(--blueprint-line-a10), transparent 70%),
    var(--panel-sheen);
  position: relative;
  overflow: hidden;
  min-height: 460px;
}
.howit__viz::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--azul-a05) 1px, transparent 1px),
    linear-gradient(90deg, var(--azul-a05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.howit__tag {
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuon-azul);
}
.howit__tag.tr {
  left: auto;
  right: 20px;
  color: var(--ink-400);
}
.howit__svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

@media (max-width: 1000px) {
  .howit {
    grid-template-columns: 1fr;
  }
  .howit__viz {
    min-height: 380px;
  }
}

/* ---------- PRODUCTOS ---------- */
.productos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.producto {
  border: 1px solid var(--divider);
  border-radius: 16px;
  background: var(--ink-0);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--dur-base) var(--ease-standard);
}
.producto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
}
.producto:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}
.producto__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ink-50);
  color: var(--accent);
}
.producto__icon svg {
  width: 24px;
  height: 24px;
}
.producto__num {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-400);
  letter-spacing: 0.12em;
}
.producto__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ink-900);
  text-wrap: balance;
}
.producto__body {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.55;
  flex: 1;
}

@media (max-width: 1260px) {
  .productos {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1000px) {
  .productos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .productos {
    grid-template-columns: 1fr;
  }
} /* --bp-sm (era 600) */

/* ---------- CONSOLE EMBED ---------- */
.consola {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--blueprint-line-a20);
  background: var(--ink-900);
  box-shadow: 0 30px 80px -30px var(--ink-900-a40);
  position: relative;
}
.consola__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ink-900-a60);
  border-bottom: 1px solid var(--blueprint-line-a14);
}
.consola__dots {
  display: flex;
  gap: 6px;
}
.consola__dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--white-a18);
}
.consola__url {
  flex: 1;
  /* Un elemento flex no baja de su contenido mínimo mientras conserve el
     min-width: auto por defecto. La URL no tiene espacios donde partir, así que
     medía sus 348px enteros dentro de un panel de 280 y empujaba el indicador
     de estado fuera del recorte. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-200-a70);
  text-align: center;
  background: var(--black-a25);
  padding: 6px 12px;
  border-radius: 6px;
}
.consola__url .u {
  color: var(--nuon-cian);
}
.consola__status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--success);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.consola__status .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.consola__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 580px;
  position: relative;
}
.consola__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 30%, var(--blueprint-line-a08), transparent 70%),
    linear-gradient(var(--blueprint-grid-a40) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-a40) 1px, transparent 1px);
  background-size:
    100% 100%,
    24px 24px,
    24px 24px;
  pointer-events: none;
}
.consola__body > * {
  position: relative;
}

.consola__sb {
  background: var(--ink-900-a50);
  border-right: 1px solid var(--blueprint-line-a14);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.consola__sb img {
  height: 22px;
  margin: 4px 8px 12px;
}
.consola__sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--white-a55);
  font-size: 12px;
  font-weight: 500;
  transition: all var(--dur-base) var(--ease-standard);
  cursor: default;
}
.consola__sb-item:hover {
  background: var(--blueprint-line-a06);
  color: var(--ink-0);
}
.consola__sb-item.is-active {
  background: var(--azul-a14);
  color: var(--ink-0);
  box-shadow: inset 2px 0 0 var(--nuon-cian);
}
.consola__sb-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.consola__main {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.consola__title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.consola__title .grad {
  background: var(--nuon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.consola__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.consola__kpi {
  background: var(--blueprint-grid-a50);
  backdrop-filter: blur(12px);
  border: 1px solid var(--blueprint-line-a18);
  border-top: 1.5px solid var(--nuon-cian);
  border-radius: 10px;
  padding: 12px 14px;
}
.consola__kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--nuon-cian);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.consola__kpi-num {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.consola__kpi-num .u {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--white-a60);
  margin-left: 4px;
}
.consola__kpi-delta {
  font-size: 10px;
  color: var(--success);
  margin-top: 4px;
  font-weight: 600;
}

.consola__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 10px;
}
.consola__panel {
  background: var(--blueprint-grid-a50);
  backdrop-filter: blur(12px);
  border: 1px solid var(--blueprint-line-a18);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.consola__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.consola__panel-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-0);
}
.consola__panel-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-200-a60);
  letter-spacing: 0.08em;
}
.consola__chart {
  width: 100%;
  height: 160px;
}

.consola__cycle-bar {
  height: 5px;
  background: var(--blueprint-line-a12);
  border-radius: 999px;
  overflow: hidden;
}
.consola__cycle-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nuon-azul), var(--nuon-cian));
  box-shadow: 0 0 16px var(--azul-a40);
}
.consola__cycle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--white-a65);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.consola__cycle-row .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink-200-a40);
}
.consola__cycle-row.is-done .dot {
  background: var(--success);
}
.consola__cycle-row.is-now .dot {
  background: var(--nuon-cian);
  box-shadow: 0 0 10px var(--nuon-cian);
}
.consola__cycle-row.is-now {
  color: var(--ink-0);
}

/* Excepción medida, fuera de la escala. Bajar este corte a --bp-md (700) no
   sale: con la barra lateral de 200px puesta, .consola__main se queda en 459px
   y los cuatro KPIs, que piden ~510px, se recortan 24px. El umbral real está
   en ~770px; 800 lo cubre. No se mueve sin rehacer también .consola__kpis. */
/* stylelint-disable-next-line media-feature-name-value-allowed-list -- measured exception, see above */
@media (max-width: 800px) {
  .consola__body {
    grid-template-columns: 1fr;
  }
  .consola__sb {
    display: none;
  }
  .consola__kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .consola__row {
    grid-template-columns: 1fr;
  }
}

/* ---------- CASOS ---------- */
.casos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.caso {
  border: 1px solid var(--divider);
  border-radius: 16px;
  background: var(--ink-0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--dur-base) var(--ease-standard);
}
.caso:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}
.caso__visual {
  height: 200px;
  position: relative;
  overflow: hidden;
  background: var(--ink-50);
}
.caso__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--azul-a06) 1px, transparent 1px),
    linear-gradient(90deg, var(--azul-a06) 1px, transparent 1px);
  background-size: 20px 20px;
}
.caso__visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.caso__industry {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuon-azul);
  background: var(--white-a92);
  padding: 4px 8px;
  border-radius: 999px;
}
.caso__country {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.caso__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.caso__client {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuon-azul);
}
/* El título ocupa el alto libre para que "Qué demuestra" quede al pie. */
.caso__title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-900);
  flex: 1;
}
.caso__shows {
  border-top: 1px solid var(--divider);
  padding-top: 16px;
}
.caso__shows-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.caso__shows-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-900);
}

@media (max-width: 1000px) {
  .casos {
    grid-template-columns: 1fr;
  }
}

/* ---------- MANIFIESTO ---------- */
.manifiesto {
  padding: var(--section-y) 0;
  background: var(--ink-900);
  color: var(--ink-0);
  position: relative;
  overflow: hidden;
}
.manifiesto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 50% 40% at 20% 20%, var(--magenta-a10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, var(--azul-a10), transparent 60%),
    linear-gradient(var(--blueprint-grid-a45) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-a45) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    32px 32px,
    32px 32px;
  pointer-events: none;
}
.manifiesto > * {
  position: relative;
}
.manifiesto__overline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--nuon-cian);
}
.manifiesto__quote {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  max-width: 1100px;
  margin-bottom: 56px;
  text-wrap: balance;
}
.manifiesto__quote em {
  font-style: normal;
  background: var(--nuon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.manifiesto__principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
}
.principle {
  border-left: 1px solid var(--blueprint-line-a25);
  padding-left: 20px;
}
.principle__top {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuon-cian);
  margin-bottom: 14px;
}
.principle__title {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  margin-bottom: 12px;
}
.principle__body {
  color: var(--white-a70);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .manifiesto__principles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 359px) {
  .manifiesto__principles {
    grid-template-columns: 1fr;
  }
}

/* ---------- BLOG / INSIGHTS ---------- */
.blog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.insight {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--divider);
  padding-top: 24px;
  cursor: pointer;
}
.insight__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.insight__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuon-azul);
  border: 1px solid var(--azul-a30);
  padding: 3px 8px;
  border-radius: 999px;
}
.insight__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  letter-spacing: 0.06em;
}
.insight__title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink-900);
  transition: color var(--dur-base);
}
.insight:hover .insight__title {
  color: var(--nuon-azul);
}
.insight__body {
  font-size: 14px;
  color: var(--ink-500);
  line-height: 1.55;
}
.insight__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nuon-azul);
}

@media (max-width: 900px) {
  .blog {
    grid-template-columns: 1fr;
  }
}

/* ---------- CARRERAS ---------- */
.carreras {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
.carreras__intro p {
  font-size: 16px;
  color: var(--ink-500);
  line-height: 1.6;
  margin: 0 0 16px;
}
.carreras__values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.carreras__value {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink-50);
  color: var(--ink-700);
}

.openings {
  display: flex;
  flex-direction: column;
}
.opening {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--divider);
  transition: all var(--dur-base) var(--ease-standard);
}
.opening:first-child {
  border-top: 1px solid var(--divider);
}
.opening:hover {
  padding-left: 8px;
}
.opening__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  letter-spacing: 0.12em;
}
.opening__title {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-900);
}
.opening__sub {
  font-size: 13px;
  color: var(--ink-500);
  margin-top: 4px;
}
.opening__loc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.opening__arrow {
  color: var(--ink-400);
  transition: color var(--dur-base);
}
.opening:hover .opening__arrow {
  color: var(--nuon-azul);
}

@media (max-width: 900px) {
  .carreras {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .opening {
    grid-template-columns: auto 1fr auto;
  }
  .opening__loc {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ---------- EQUIPO ---------- */
.equipo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.persona {
  border: 1px solid var(--divider);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-0);
  transition: all var(--dur-base) var(--ease-standard);
}
.persona:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.persona__photo {
  aspect-ratio: 1 / 1;
  background: var(--ink-50);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.persona__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--azul-a05) 1px, transparent 1px),
    linear-gradient(90deg, var(--azul-a05) 1px, transparent 1px);
  background-size: 16px 16px;
}
.persona__initials {
  font-family: var(--font-display);
  font-size: 64px;
  letter-spacing: -0.02em;
  color: var(--ink-200);
  position: relative;
  z-index: 1;
}
.persona__body {
  padding: 16px 18px 20px;
}
.persona__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
}
.persona__role {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 4px;
}
.persona__loc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-400);
  letter-spacing: 0.12em;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .equipo {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- CTA ---------- */
.cta-final {
  background: var(--ink-900);
  color: var(--ink-0);
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 50%, var(--blueprint-line-a18), transparent 70%),
    linear-gradient(var(--blueprint-grid-a50) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-a50) 1px, transparent 1px);
  background-size:
    100% 100%,
    32px 32px,
    32px 32px;
  pointer-events: none;
}
.cta-final > * {
  position: relative;
}
.cta-final__inner {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.cta-final__overline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--nuon-cian);
  margin-bottom: 24px;
}
.cta-final__title {
  font-family: var(--font-display);
  font-size: clamp(60px, 9vw, 144px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 32px;
}
.cta-final__title .grad {
  background: var(--nuon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-final__lede {
  font-size: 18px;
  color: var(--white-a70);
  margin-bottom: 40px;
  line-height: 1.55;
}
.cta-final__btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn--ondark {
  background: var(--ink-0);
  color: var(--ink-900);
}
.btn--ondark:hover {
  background: var(--nuon-cian);
  box-shadow: 0 0 0 4px var(--cian-a20);
}
.btn--ondark-ghost {
  background: transparent;
  color: var(--ink-0);
  border-color: var(--white-a25);
}
.btn--ondark-ghost:hover {
  border-color: var(--ink-0);
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ink-0);
  border-top: 1px solid var(--divider);
  padding: 64px 0 32px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer__brand img {
  height: 22px;
  margin-bottom: 16px;
}
.footer__brand p {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.55;
  max-width: 320px;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 16px;
  font-weight: 600;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col a {
  font-size: 13px;
  color: var(--ink-700);
  transition: color var(--dur-base);
}
.footer__col a:hover {
  color: var(--nuon-azul);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  letter-spacing: 0.06em;
}
.footer__bottom .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
}
.footer__bottom .live .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* ---------- Ticker ---------- */
.ticker {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  background: var(--ink-900);
  color: var(--ink-0);
  overflow: hidden;
  padding: 14px 0;
  position: relative;
}
.ticker__track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white-a85);
}
.ticker__item .sym {
  color: var(--nuon-cian);
}
.ticker__item .pos {
  color: var(--success);
}
.ticker__item .neg {
  color: var(--danger);
}
@keyframes tickerScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Animation: pulse rings on hero core ---------- */
@keyframes ringExpand {
  0% {
    r: 22;
    opacity: 0.9;
  }
  100% {
    r: 80;
    opacity: 0;
  }
}
.hero__core-ring {
  animation: ringExpand 2.4s ease-out infinite;
}
.hero__core-ring.delay-1 {
  animation-delay: 0.8s;
}
.hero__core-ring.delay-2 {
  animation-delay: 1.6s;
}

/* hero flow dash animation */
@keyframes dashFlow {
  to {
    stroke-dashoffset: -32;
  }
}
.flow-anim {
  stroke-dasharray: 8 6;
  animation: dashFlow 1.2s linear infinite;
}

/* fade-up on enter */
.fade-up {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 600ms var(--ease-standard),
    transform 600ms var(--ease-standard);
}
.fade-up.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Tweaks panel z-fix ---------- */
.tweaks-panel {
  z-index: 1000;
}

/* ---------- Movimiento reducido ----------
   Criterio WCAG 2.2.2: el contenido en movimiento que dura más de cinco
   segundos y arranca solo tiene que poder detenerse. El ticker corre 60 s en
   bucle infinito.

   Esto cubre las animaciones y transiciones de CSS. Las animaciones SMIL de los
   SVG (<animate>, <animateTransform>) viven fuera del alcance de cualquier
   media query y se pausan desde src/components/layout.jsx. */
@media (prefers-reduced-motion: reduce) {
  /* stylelint-disable declaration-no-important -- reduced motion must win over every animation and transition */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* stylelint-enable declaration-no-important */
  /* Sin regla propia, el ticker salta al 100 % del keyframe —translateX(-50%)—
     y queda congelado a mitad de recorrido, con los items cortados por el
     borde. Se detiene en su posición inicial, legible. */
  .ticker__track {
    animation: none;
    transform: none;
  }
}

/* ---------- Objetivos táctiles ----------
   En un dispositivo táctil no hay puntero fino que compense un objetivo
   pequeño. Se usa pointer: coarse en vez de un ancho de pantalla porque lo que
   importa es cómo se señala, no cuánto mide la ventana: una tablet grande
   necesita esto y un portátil estrecho no. Así el diseño de escritorio queda
   intacto. WCAG 2.5.8 (AA) fija 24×24 px como suelo; 44 es la recomendación de
   las guías de iOS y Material. */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
  .insight-filter {
    min-height: 44px;
    padding: 8px 16px;
  }
  /* El logo es el enlace a la home y medía 28px, la altura de su imagen. */
  .nav__logo {
    min-height: 44px;
  }
  /* La miga de pan medía 14px de alto: es el texto, sin más caja. */
  .page-hero__breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- Foco de teclado ----------
   No había ningún estilo de foco propio en todo el sitio: el contorno por
   defecto del navegador quedaba tapado por los border-radius de 999px y los
   fondos sólidos del nav, del conmutador ES/EN y de los filtros. WCAG 2.4.7
   (Foco visible, AA).

   :focus-visible y no :focus, para que el anillo salga con el teclado pero no
   al hacer clic con el ratón. */
:focus-visible {
  outline: 2px solid var(--nuon-azul);
  outline-offset: 3px;
  border-radius: inherit;
}
/* Los campos llevan outline: none en su regla base (.field input, en
   styles/pages.css) para dibujar su propio anillo con box-shadow. Esa regla
   gana al selector genérico de arriba por especificidad, así que el foco de
   teclado necesita el suyo. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--nuon-azul);
  outline-offset: 2px;
}

/* Sobre fondo oscuro el azul de marca no despega lo suficiente. */
.section--dark :focus-visible,
.manifiesto :focus-visible,
.cta-final :focus-visible,
.home-cta :focus-visible,
.testimonio :focus-visible,
.footer .btn:focus-visible,
.consola :focus-visible {
  outline-color: var(--nuon-cian);
}

/* ---------- Saltar al contenido ----------
   Fuera de pantalla hasta recibir foco. No se usa display:none ni
   visibility:hidden porque eso lo sacaría del orden de tabulación, que es
   justo lo que tiene que ocupar. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-200%);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 30px var(--ink-900-a25);
  transition: transform var(--dur-base) var(--ease-standard);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--ink-0);
}
/* El destino del salto recibe foco por programa (tabIndex="-1"); no debe
   dibujar anillo, porque el usuario no lo ha enfocado con el teclado. */
#contenido:focus {
  outline: none;
}

/* La barra del navegador simulado va muy justa en móvil: el texto baja y el
   indicador de estado se queda sólo con su punto, que es lo que comunica. */
@media (max-width: 560px) {
  .consola__chrome {
    gap: 8px;
    padding: 12px 14px;
  }
  .consola__url {
    font-size: 9px;
    padding: 5px 8px;
  }
  .consola__status {
    font-size: 0;
    gap: 0;
  }
  .consola__status .dot {
    font-size: 10px;
  }
}