/* ==========================================================================
   Stenko — componentes
   Todo acento es un arco, una trayectoria o un punto de luz que se desplaza.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wordmark
   -------------------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -1.5px;
  text-transform: lowercase;
  line-height: 1;
  color: var(--bone);
  display: inline-block;
}
/* Tamaño de logotipo: el tracking es exactamente el -1.5px de la especificación. */
.wordmark--sm { font-size: 1.375rem; }

/* Tratamiento display del hero. El tracking se escala en em para conservar la
   MISMA proporción óptica que -1.5px tiene en el logotipo (-1.5 / 22px ≈
   -0.068em); a 9rem un -1.5px literal se vería suelto y rompería el dibujo de
   la palabra. Es la única variante que no usa el valor absoluto. */
.wordmark--hero {
  font-size: var(--step-5);
  letter-spacing: -0.068em;
}

/* --------------------------------------------------------------------------
   Bloque de marca: ícono + wordmark
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Texto que se traza: la luz pasa por encima y lo enciende.
   --p (0 -> 1) lo escribe ScrollTrigger cuadro a cuadro.
   -------------------------------------------------------------------------- */
.trace,
.trace-soft {
  --p: 0;
  background-repeat: no-repeat;
  background-size: 320% 100%;
  background-position: calc(100% - var(--p) * 100%) center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* El trazado es monocromo a propósito: el color de marca vive en el arco, en los
   diagramas y en los acentos, nunca dentro de las letras. Lo único que viaja por
   el texto es la intensidad de la luz — de apagado a blanco hueso. */
.trace {
  background-image: linear-gradient(96deg,
    var(--bone)      0%,
    var(--bone)      31.0%,
    #FFFFFF          35.0%,
    #9AA2CE          43.0%,
    var(--trace-dim) 52.0%,
    var(--trace-dim) 100%);
}

/* Texto corrido: mismo gesto, borde más suave para no romper la lectura. */
.trace-soft {
  background-image: linear-gradient(96deg,
    rgba(245,246,248,0.90) 0%,
    rgba(245,246,248,0.90) 29.0%,
    #DDE1F0                36.0%,
    #7B84B6                46.0%,
    var(--trace-dim)       58.0%,
    var(--trace-dim)       100%);
}

/* Sin JS o con movimiento reducido, el texto nace ya trazado. */
.no-motion .trace,
.no-motion .trace-soft { --p: 1; }

/* --------------------------------------------------------------------------
   Botón con arco: al hacer hover el arco se traza y un punto de luz lo recorre.
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 22, 51, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.005em; /* texto de interfaz: cerca de 0, no tracking de titular */
  color: var(--bone);
  cursor: pointer;
  transition: border-color 340ms var(--ease-arc), background-color 340ms var(--ease-arc), transform 340ms var(--ease-arc);
}
.btn:hover { border-color: rgba(79, 209, 197, 0.55); transform: translateY(-1px); }

.btn__arc { width: 44px; height: 16px; overflow: visible; flex: none; }

.btn__arc-track { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; }

.btn__arc-path {
  fill: none;
  stroke: url(#stenkoArcGrad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 620ms var(--ease-arc);
}

.btn__arc-dot {
  fill: var(--amber);
  offset-path: path("M3,13.5 A11,11 0 0 1 41,13.5");
  offset-distance: 0%;
  offset-rotate: 0deg;
  filter: drop-shadow(0 0 0 rgba(255, 165, 62, 0));
  transition: offset-distance 620ms var(--ease-arc), fill 620ms var(--ease-arc), filter 620ms var(--ease-arc);
}

/* Sin soporte de offset-path el punto queda en el origen; el arco trazándose
   sigue comunicando el movimiento. */
@supports not (offset-path: path("M0,0 L1,1")) {
  .btn__arc-dot { transform: translate(3px, 13.5px); }
}

.btn:hover .btn__arc-path,
.btn:focus-visible .btn__arc-path { stroke-dashoffset: 0; }

.btn:hover .btn__arc-dot,
.btn:focus-visible .btn__arc-dot {
  offset-distance: 100%;
  fill: var(--teal);
  filter: drop-shadow(0 0 6px rgba(79, 209, 197, 0.9));
}

/* Variante principal: el gradiente de marca como borde vivo. */
.btn--primary { background: rgba(255, 165, 62, 0.07); border-color: rgba(255, 165, 62, 0.45); }
.btn--primary:hover { border-color: var(--amber); background: rgba(255, 165, 62, 0.12); }

.btn--ghost { background: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* --------------------------------------------------------------------------
   Enlace en línea: el subrayado es un tramo del arco
   -------------------------------------------------------------------------- */
.link {
  color: var(--bone);
  padding-bottom: 2px;
  background-image: var(--arc);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 420ms var(--ease-arc);
}
.link:hover { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding-block: 1rem;
  border-bottom: 1px solid transparent;
  transition: background-color 380ms var(--ease-arc), border-color 380ms var(--ease-arc), padding 380ms var(--ease-arc);
}
.header.is-stuck {
  background: rgba(13, 17, 48, 0.62);
  /* Superficie grande = material mas grueso. La saturacion evita que el
     contenido de debajo se vea lavado al desenfocarlo. */
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  padding-block: 0.65rem;
}

/* Canto superior claro: la luz que atrapa el material. */
.header.is-stuck::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(245, 246, 248, 0.10);
}

/* Borde de scroll en vez de una linea de 1px: el contenido se desvanece al
   pasar bajo la barra, en lugar de cortarse contra ella. */
.header.is-stuck::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1.75rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 6, 15, 0.55) 0%, rgba(4, 6, 15, 0) 100%);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.header__nav { display: flex; align-items: center; gap: 1.75rem; }
.header__nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--bone-60);
  transition: color 300ms var(--ease-arc);
}
.header__nav a:hover { color: var(--bone); }

.header__cta { padding: 0.6rem 1.1rem; font-size: var(--step--1); }
.header__cta .btn__arc { width: 30px; height: 12px; }

@media (max-width: 820px) {
  .header__nav a { display: none; }
}

/* --------------------------------------------------------------------------
   Etiqueta de sección: número + horizonte + nodo (el diagrama solar en chico)
   -------------------------------------------------------------------------- */
.section-tag { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.75rem; }
.section-tag__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.section-tag__rule { flex: none; width: 4rem; height: 1px; background: var(--line); position: relative; }
.section-tag__rule::after {
  content: "";
  position: absolute;
  right: -2px; top: -1.5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line);
}
.section-tag__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-42);
}

/* --------------------------------------------------------------------------
   Horizonte: regla fina con nodos en los extremos, motivo estructural
   -------------------------------------------------------------------------- */
.horizon { height: 1px; background: var(--line); position: relative; opacity: 0.7; }
.horizon::before,
.horizon::after {
  content: "";
  position: absolute;
  top: -1.5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line);
}
.horizon::before { left: 0; }
.horizon::after  { right: 0; }

/* --------------------------------------------------------------------------
   Tarjeta de capacidad
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color 480ms var(--ease-arc), transform 480ms var(--ease-arc);
}
.card:hover { border-color: rgba(79, 209, 197, 0.4); transform: translateY(-3px); }

/* El arco de marca cruza el borde superior al pasar el cursor. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--arc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 720ms var(--ease-arc);
}
.card:hover::before { transform: scaleX(1); }

.card__diagram { width: 100%; height: auto; margin-bottom: 1.6rem; overflow: visible; }

/* Pulso de luz recorriendo una trayectoria SVG. El path necesita
   pathLength="100" para que el dasharray funcione en porcentaje. */
.pulse-flow {
  fill: none;
  stroke: url(#stenkoArcGrad);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  animation: arc-flow 4.6s linear infinite;
}
.pulse-flow--b  { animation-delay: -2.3s; opacity: 0.55; }
.pulse-flow--d1 { animation-delay: -0.8s; }
.pulse-flow--d2 { animation-delay: -1.7s; }
.pulse-flow--d3 { animation-delay: -2.6s; }
.pulse-flow--d4 { animation-delay: -3.4s; }
.pulse-flow--thin { stroke-width: 2.4; stroke-dasharray: 4 96; }

@media (prefers-reduced-motion: reduce) {
  .pulse-flow { animation: none; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Vocabulario de diagrama
   Un solo juego de clases para las tarjetas y para el esquema de automatización:
   línea de horizonte, nodos, cajas, cotas y anotaciones. Nada de iconografía.
   -------------------------------------------------------------------------- */
.dg-line  { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-linecap: round; }
.dg-line--hair { stroke-width: 1; opacity: 0.55; }
.dg-line--dash { stroke-dasharray: 3 4; opacity: 0.7; }
.dg-arc   { fill: none; stroke: url(#stenkoArcGrad); stroke-width: 2.4; stroke-linecap: round; }
.dg-node  { fill: var(--line); }
.dg-node--live { fill: url(#stenkoArcGrad); }
.dg-box   { fill: rgba(10, 13, 33, 0.78); stroke: var(--line); stroke-width: 1.2; }
.dg-box--live { stroke: rgba(79, 209, 197, 0.45); }
.dg-sun   { fill: url(#stenkoArcGrad); filter: drop-shadow(0 0 7px rgba(255, 165, 62, 0.55)); }
.dg-shadow { stroke: var(--amber); stroke-width: 3; stroke-linecap: round; opacity: 0.45; }
.dg-build { fill: none; stroke: rgba(245, 246, 248, 0.8); stroke-width: 1.6; stroke-linejoin: round; }

.dg-label { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--bone-42); }
.dg-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: -0.01em; fill: rgba(245, 246, 248, 0.9); }
.dg-val   { font-family: var(--font-display); font-weight: 700; font-size: 11px; fill: var(--amber); font-variant-numeric: tabular-nums; }
.dg-note  { font-family: var(--font-text); font-size: 10px; fill: var(--bone-42); }

/* --------------------------------------------------------------------------
   Esquema de automatización (sección 04)
   Las etapas se encienden en cascada conforme avanza el paso activo del scroll,
   que escribe `data-active` en el contenedor desde lib/scroll.js.
   -------------------------------------------------------------------------- */
.dg { width: 100%; overflow-x: auto; overflow-y: hidden; }

/* En pantallas bajas el max-height manda y `preserveAspectRatio` centra el
   dibujo; en pantallas angostas gana el min-width y el contenedor hace scroll
   horizontal. Nunca se deforma ni se recorta. */
.dg__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46svh;
  min-width: 880px;
  overflow: visible;
}
.dg__svg .dg-label { font-size: 12px; }
.dg__svg .dg-title { font-size: 15px; }
.dg__svg .dg-val   { font-size: 13px; }
.dg__svg .dg-note  { font-size: 12px; }

.dg__stage { opacity: 0.24; transition: opacity 620ms var(--ease-arc); }

.dg[data-active="0"] [data-s="0"],
.dg[data-active="1"] [data-s="0"], .dg[data-active="1"] [data-s="1"],
.dg[data-active="2"] [data-s="0"], .dg[data-active="2"] [data-s="1"], .dg[data-active="2"] [data-s="2"],
.dg[data-active="3"] [data-s="0"], .dg[data-active="3"] [data-s="1"], .dg[data-active="3"] [data-s="2"], .dg[data-active="3"] [data-s="3"] {
  opacity: 1;
}

/* Sin JS la cascada no corre: se muestra el esquema completo. */
.no-motion .dg__stage,
.dg:not([data-active]) .dg__stage { opacity: 1; }
.card__title { font-size: var(--step-2); margin-bottom: 0.9rem; }
.card__text { color: var(--bone-60); margin-bottom: 1.5rem; }
.card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.card__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: rgba(245, 246, 248, 0.78);
}
/* Cada viñeta es un sol sobre su horizonte, no un check genérico. */
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 9px; height: 1px;
  background: var(--line);
}
/* Ficha técnica al pie de la tarjeta: la misma lectura de instrumento del hero. */
.card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.card__specs b {
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.card__list li::after {
  content: "";
  position: absolute;
  left: 5px; top: calc(0.72em - 3px);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--arc);
}

/* --------------------------------------------------------------------------
   Fallback estático: el arco de marca en SVG, animado sólo con CSS.
   Gama baja, sin WebGL o con prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.arc-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.arc-fallback svg { width: min(92vw, 62rem); height: auto; overflow: visible; }
.arc-fallback__horizon { stroke: var(--line); stroke-width: 1; stroke-linecap: round; }
.arc-fallback__rail { stroke: var(--line); stroke-width: 2.6; fill: none; stroke-linecap: round; opacity: 0.5; }
.arc-fallback__node { fill: var(--line); }
.arc-fallback__sun  { fill: url(#stenkoArcGrad); filter: drop-shadow(0 0 12px rgba(255, 165, 62, 0.6)); }

/* Los pulsos del fallback usan .pulse-flow, definido más arriba. */
@keyframes arc-flow {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   Respuesta al tacto
   La primera regla de una interfaz que se siente viva: el elemento responde
   cuando lo PRESIONAS, no cuando lo sueltas. Por eso el press usa 90ms — es
   inmediato — mientras que la vuelta conserva los 340ms del resto.

   `touch-action: manipulation` elimina el retraso de ~300ms que el navegador
   reserva para detectar doble toque; aquí no hay doble toque que detectar.
   -------------------------------------------------------------------------- */
.btn,
.header__nav a,
.link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.972);
  transition-duration: 90ms;
}

.header__nav a:active,
.link:active,
.cta__channels a:active {
  opacity: 0.62;
  transition-duration: 90ms;
}

/* --------------------------------------------------------------------------
   Preferencias de accesibilidad del sistema
   Movimiento reducido ya se atiende arriba. Faltaban estas dos, y son
   independientes entre sí: alguien puede querer menos transparencia sin querer
   menos movimiento.
   -------------------------------------------------------------------------- */

/* Menos transparencia: las superficies se vuelven sólidas y se quita el
   desenfoque. Un material translúcido sobre una escena 3D en movimiento es
   justo lo que estorba a quien pide esto. */
@media (prefers-reduced-transparency: reduce) {
  .header.is-stuck {
    background: #0A0D21;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: var(--line-soft);
  }
  .header.is-stuck::after { display: none; }

  .btn {
    background: #0D1130;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .btn--primary { background: #1A1329; }
  .btn--ghost { background: #0A0D21; }

  .card {
    background: #0A0D21;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* La ilustración 3D pasa a ser un fondo tenue, no una capa que atraviesa. */
  .flow-layer { opacity: 0.18 !important; }
}

/* Más contraste: fondos casi sólidos con bordes definidos, y los grises de
   texto suben hasta dejar de ser grises. */
@media (prefers-contrast: more) {
  :root {
    --bone-60: rgba(245, 246, 248, 0.88);
    --bone-42: rgba(245, 246, 248, 0.74);
    --line: #6E77B4;
    --line-soft: rgba(110, 119, 180, 0.8);
    --trace-dim: #4A5388;
  }

  .btn {
    background: #070A18;
    border-color: var(--bone-42);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .btn--primary { border-color: var(--amber); }

  .card {
    background: #070A18;
    border-color: var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header.is-stuck {
    background: #070A18;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: var(--line);
  }

  .flow-layer { opacity: 0.12 !important; }
}