/* Nukleo — estilos globales */

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

/* El scroll suave lo controla Lenis (main.js); scroll-behavior nativo se
   deja en "auto" a propósito para que no compita con su animación. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

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

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

[hidden] {
  display: none !important;
}

.wrap {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.eyebrow::before {
  content: "[ ";
}
.eyebrow::after {
  content: " ]";
}

/* ---------- Lenis (CSS mínimo) ----------
   Copia del lenis.css oficial (v1.3.26): antes se pedía a unpkg.com, y esa
   hoja bloqueaba el primer pintado hasta que llegaba de la red. */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ---------- Grain atmosphere ---------- */

/* Grano: antes era ruido de color con `mix-blend-mode: multiply` al 3,5 %, lo que
   obligaba a la GPU a mezclar la pantalla ENTERA con lo de debajo en cada
   fotograma (medido: casi la mitad del tirón al salir un robot). Ahora es ruido
   negro con alfa (la misma diferencia de brillo, ~1 nivel de 255) y mezcla
   normal: se ve igual y cuesta una capa translúcida, no un paso de mezcla. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.012;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Carga de un panel de la puerta (ensurePanel/openPanel en main.js) ----------
   Solo aparece si los archivos del panel tardan. Cada apartado con su aspecto (data-key):
   Diseño web, azul con un marco amarillo que se dibuja; Chips NFC, blanco con ondas de "acerca el
   móvil"; Redes sociales, rosa con tres corazones que laten por turnos. */
.gate__loader {
  --ldr-bg: var(--color-bg);
  --ldr-fg: var(--color-ink);
  --ldr-accent: var(--color-accent);
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;
  background: var(--ldr-bg);
  color: var(--ldr-fg);
  animation: ldr-in 260ms ease both;
}

.gate__loader[hidden] {
  display: none;
}

.gate__loader.is-leaving {
  animation: ldr-out 380ms ease both;
}

@keyframes ldr-in {
  from {
    opacity: 0;
  }
}

@keyframes ldr-out {
  to {
    opacity: 0;
  }
}

.gate__ldr-t {
  margin: 0;
  font: 500 0.78rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gate__ldr-t::after {
  content: "";
  animation: ldr-dots 1.2s steps(4) infinite;
}

@keyframes ldr-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}

.gate__ldr-mark {
  position: relative;
  display: flex;
  gap: 0.6rem;
  width: 4.5rem;
  height: 4.5rem;
  align-items: center;
  justify-content: center;
}

.gate__ldr-mark i {
  display: none;
}

/* Diseño web: marco amarillo que se dibuja y se borra, con el círculo de la marca dentro */
.gate__loader[data-key="webdesign"] {
  --ldr-bg: #231aab;
  --ldr-fg: #f4f1e8;
}

.gate__loader[data-key="webdesign"] .gate__ldr-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid #dfc94d;
  animation: ldr-frame 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.gate__loader[data-key="webdesign"] .gate__ldr-mark::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: #f4f1e8;
}

@keyframes ldr-frame {
  0% {
    clip-path: inset(0 100% 100% 0);
  }
  45% {
    clip-path: inset(0);
  }
  100% {
    clip-path: inset(100% 0 0 100%);
  }
}

/* Chips NFC: un punto y dos ondas que salen, como al acercar el móvil */
.gate__loader[data-key="nfc"] {
  --ldr-bg: #ffffff;
  --ldr-fg: #111111;
}

.gate__loader[data-key="nfc"] .gate__ldr-mark::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #2346ff;
}

.gate__loader[data-key="nfc"] .gate__ldr-mark i {
  display: block;
  position: absolute;
  inset: 0;
  border: 3px solid #2346ff;
  border-radius: 50%;
  animation: ldr-ring 1.5s ease-out infinite;
}

.gate__loader[data-key="nfc"] .gate__ldr-mark i:nth-child(2) {
  animation-delay: 0.5s;
}

.gate__loader[data-key="nfc"] .gate__ldr-mark i:nth-child(3) {
  animation-delay: 1s;
}

@keyframes ldr-ring {
  from {
    opacity: 0.9;
    transform: scale(0.2);
  }
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Redes sociales: tres corazones que laten por turnos */
.gate__loader[data-key="social"] {
  --ldr-bg: #fff0f6;
  --ldr-fg: #1d0812;
}

.gate__loader[data-key="social"] .gate__ldr-mark {
  width: auto;
}

.gate__loader[data-key="social"] .gate__ldr-mark i {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  background: #ff2e88;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.8 4.5c2.2 0 3.6 1.2 5.2 3 1.6-1.8 3-3 5.2-3 3.8 0 5.9 3.9 4.4 7.3C19.5 16.4 12 21 12 21z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.8 4.5c2.2 0 3.6 1.2 5.2 3 1.6-1.8 3-3 5.2-3 3.8 0 5.9 3.9 4.4 7.3C19.5 16.4 12 21 12 21z'/></svg>") center / contain no-repeat;
  animation: ldr-heart 1.1s ease-in-out infinite;
}

.gate__loader[data-key="social"] .gate__ldr-mark i:nth-child(2) {
  animation-delay: 0.18s;
}

.gate__loader[data-key="social"] .gate__ldr-mark i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes ldr-heart {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1.15) translateY(-0.3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate__loader,
  .gate__loader *,
  .gate__loader *::before,
  .gate__loader *::after {
    animation: none !important;
  }
}

/* ---------- Entrada (antes de la puerta) ---------- */

/* Blanca, por encima de todo (también del robot de la puerta, 110). Las dos líneas suben por su
   ventana; la N y la r llegan desde los lados hasta tocarse. initIntro (main.js) la retira con una
   cortina hacia arriba (.is-leaving) y la oculta. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vh, 3rem);
  padding: var(--space-gutter);
  background: #fff;
  color: #0b0b0b;
  text-align: center;
  cursor: pointer;
}

.intro__claim {
  margin: 0;
  font-size: min(15vw, 17vh);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

/* la ventana por la que sube cada línea: con hueco abajo para los trazos que bajan (la g) */
.intro__line {
  display: block;
  overflow: hidden;
  margin-bottom: -0.16em;
  padding-bottom: 0.2em;
}

.intro__line > span {
  display: block;
  animation: intro-rise 700ms var(--ease-out-expo) both;
}

.intro__line:nth-child(2) > span {
  animation-delay: 90ms;
}

.intro__claim b {
  color: var(--color-accent);
}

@keyframes intro-rise {
  from {
    transform: translateY(105%);
  }
}

.intro__mark {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-size: min(34vw, 30vh);
  line-height: 0.8;
}

.intro__n {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  animation: intro-n 750ms var(--ease-out-expo) 180ms both;
}

/* la r de richsmart, pegada a la N (se meten un poco una en la otra) */
.intro__r {
  margin-left: -0.1em;
  color: #ff4b3e;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-synthesis: none;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  animation: intro-r 750ms var(--ease-out-expo) 180ms both;
}

@keyframes intro-n {
  from {
    opacity: 0;
    transform: translateX(-0.35em);
  }
}

@keyframes intro-r {
  from {
    opacity: 0;
    transform: translateX(0.35em);
  }
}

.intro.is-leaving {
  animation: intro-leave 650ms cubic-bezier(0.76, 0, 0.24, 1) both;
  pointer-events: none;
}

@keyframes intro-leave {
  to {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro__line > span,
  .intro__n,
  .intro__r {
    animation: none;
  }

  .intro.is-leaving {
    animation: intro-fade 300ms ease both;
  }

  @keyframes intro-fade {
    to {
      opacity: 0;
    }
  }
}

/* ---------- Puerta de entrada (elegir servicio) ---------- */

/* Tapa toda la web (que carga con normalidad detrás, sin que le afecte —
   por eso es una capa por encima y no display:none en <main>: así no hay
   que reinicializar ningún efecto ligado al scroll cuando se revela). */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-ink);
}

.gate.is-leaving {
  animation: gate-leave 560ms var(--ease-out-expo) both;
  pointer-events: none;
}

@keyframes gate-leave {
  to {
    opacity: 0;
    transform: translateY(-2.5%);
  }
}

/* al volver desde la web (botón "Volver" de la nav) */
.gate.is-returning {
  animation: gate-return 560ms var(--ease-out-expo) both;
}

@keyframes gate-return {
  from {
    opacity: 0;
    transform: translateY(-2.5%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate.is-leaving {
    animation: none;
    opacity: 0;
  }
}

.gate__top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1rem;
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem) var(--space-gutter) 0;
}

/* arriba a la derecha, grande: "Nukleo. × richsmart" (richsmart en su rojo y su Fraunces
   itálica, como en Diseño web y Chips NFC) */
.gate__lockup {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  margin: 0;
  font-size: clamp(1.6rem, 0.9rem + 2.6vw, 3.6rem);
  line-height: 1;
  white-space: nowrap;
}

.gate__lockup-nk {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.gate__lockup-nk span {
  color: var(--color-accent);
}

.gate__lockup-x {
  font-weight: 300;
  opacity: 0.45;
  font-size: 0.7em;
}

.gate__lockup-rs {
  color: #ff4b3e;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-synthesis: none;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -0.02em;
}

/* los paneles a pantalla completa (Diseño web, Chips NFC, Redes sociales) tapan su propia cabecera */
.gate:has(.gate__panel.wd:not([hidden]), .gate__panel.nfc:not([hidden]), .gate__panel.soc:not([hidden])) .gate__top {
  visibility: hidden;
}

@media (max-width: 30rem) {
  .gate__top {
    align-items: center;
  }

  .gate__lockup {
    font-size: clamp(1.15rem, 6.2vw, 1.6rem);
  }
}

.gate__stage {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
  /* hueco abajo para el botón "Quiénes somos" */
  padding-bottom: clamp(3.25rem, 7vh, 4.5rem);
}

.gate__options {
  width: 100%;
  padding-inline: var(--space-gutter);
}

.gate__option {
  display: block;
  width: 100%;
  /* contenedor: cada fila ajusta su tamaño a su propio ancho según lo larga
     que sea su palabra ("Automatizaciones." vs "Chips NFC."), en vez de un
     tamaño único que a la palabra más larga le desborda en móvil. */
  container-type: inline-size;
  padding: clamp(0.6rem, 0.4rem + 0.8vw, 1.1rem) 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* quién lleva cada línea, abajo a la derecha de su fila: Nukleo (Automatizaciones, Diseño web),
   richsmart (Chips NFC) y las dos (Redes sociales). Mismas letras que el lockup de arriba. */
.gate__option {
  position: relative;
}

.gate__by {
  position: absolute;
  right: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  bottom: calc(clamp(0.6rem, 0.4rem + 0.8vw, 1.1rem) + 0.35em);
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  font-size: clamp(0.85rem, 0.6rem + 0.9vw, 1.5rem);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: color var(--duration-normal) ease, opacity var(--duration-fast) ease;
}

.gate__option:is(:hover, :focus-visible) .gate__by {
  color: var(--hov-fg, var(--color-bg));
}

.gate__options.is-choosing .gate__by {
  opacity: 0;
}

/* en estrecho la palabra ocupa todo el ancho: la firma baja debajo, alineada a la derecha */
@media (max-width: 48rem) {
  .gate__by {
    position: static;
    justify-content: flex-end;
    padding: 0.2rem clamp(0.75rem, 0.5rem + 1vw, 1.5rem) 0;
  }

  .gate__option:is(:hover, :focus-visible) .gate__by {
    color: inherit;
  }
}

.gate__options .gate__option:last-of-type {
  border-bottom: 1px solid var(--color-line);
}

/* "Quiénes somos": abajo a la izquierda, con la estética de las cuatro opciones pero pequeño; al
   señalarlo su rectángulo se invierte (negro ⇄ blanco). Se esconde con un panel abierto. */
.gate__about-btn {
  position: fixed;
  left: var(--space-gutter);
  bottom: clamp(0.9rem, 2.5vh, 1.75rem);
  z-index: 4;
  padding: 0.45rem 0.8rem 0.5rem;
  border: 1px solid var(--color-ink);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease,
    opacity 320ms ease, visibility 0s;
}

.gate__about-btn:hover,
.gate__about-btn:focus-visible {
  background: var(--color-ink);
  color: var(--color-bg);
  outline: none;
}

.gate__about-btn:hover .gate__dot,
.gate__about-btn:focus-visible .gate__dot {
  color: var(--color-yellow);
}

.gate__about-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

.gate:has(#gate-options[hidden]) .gate__about-btn,
.gate:has(.gate__options.is-choosing) .gate__about-btn {
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

/* la ventana de Quiénes somos */
.about {
  width: min(52rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--color-ink);
  background: var(--color-bg);
  color: var(--color-ink);
  overflow: hidden;
}

.about[open] {
  animation: about-in 420ms var(--ease-out-expo) both;
}

.about::backdrop {
  background: rgba(20, 20, 15, 0.55);
  backdrop-filter: blur(3px);
}

@keyframes about-in {
  from {
    opacity: 0;
    transform: translateY(1.2rem) scale(0.98);
  }
}

.about__inner {
  display: grid;
  gap: 1.1rem;
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  /* su propio scroll (data-lenis-prevent en el HTML: si no, Lenis se come la rueda) */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.about__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.about__lockup {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1;
}

.about__lockup > span:nth-child(2) {
  font-size: 0.7em;
  opacity: 0.45;
}

.about__nk {
  font-weight: 700;
  letter-spacing: -0.04em;
}

.about__nk b {
  color: var(--color-accent);
}

.about__rs {
  color: #ff4b3e;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-synthesis: none;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

.about__close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-out-expo);
}

.about__close:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  transform: rotate(90deg);
}

.about__kicker {
  margin: 0.6rem 0 0;
  color: var(--color-ink-faint);
  font: 500 0.72rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about__title {
  margin: 0;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.about__title span {
  display: block;
  color: var(--color-accent);
}

.about__lead {
  max-width: 40rem;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 1.02rem;
  line-height: 1.55;
}

.about__lead b {
  color: var(--color-ink);
}

.about__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-ink);
}

.about__who {
  padding: 1rem 1.25rem 0 0;
}

.about__who + .about__who {
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-line-strong);
}

.about__who h3 {
  margin: 0 0 0.45rem;
  font-size: 1.6rem;
  line-height: 1;
}

.about__who p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* los cuatro servicios, con la estética de las opciones de la puerta */
.about__services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-line);
}

.about__svc {
  padding: 0.55rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  background: none;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease;
}

.about__svc:hover,
.about__svc:focus-visible {
  background: var(--color-ink);
  color: var(--color-bg);
  outline: none;
}

.about__svc:hover .gate__dot,
.about__svc:focus-visible .gate__dot {
  color: var(--color-yellow);
}

.about__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
}

.about__end p {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.about__cta {
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-bg);
  font: 600 0.95rem/1 var(--font-display);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
}

.about__cta:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}

@media (max-width: 36rem) {
  .about__duo,
  .about__services {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__who + .about__who {
    padding-left: 0;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about[open] {
    animation: none;
  }
}

.gate__option-text {
  position: relative;
  display: block;
  padding-inline: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  /* grandes otra vez (el "quiénes somos" pasó a un botón en la esquina): 11.5cqi, medido para
     que "Automatizaciones." quepa en el ancho, y tope por alto (18vh − 2rem) para que las cuatro
     filas quepan en portátiles bajos sin chocar con el botón de abajo a la izquierda */
  font-size: clamp(2rem, min(11.5cqi, 18vh - 2rem), 7.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transition: color var(--duration-normal) ease, background-color var(--duration-normal) ease,
    padding-inline-start var(--duration-fast) var(--ease-out-expo);
}

.gate__dot {
  color: var(--color-accent);
  transition: color var(--duration-normal) ease;
}

/* Mismo lenguaje de "invertido" que ya usan los enlaces de la nav o los
   chips del stack al pasar el ratón — aquí a toda la fila. */
.gate__option:hover .gate__option-text,
.gate__option:focus-visible .gate__option-text {
  padding-inline-start: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
  background: var(--hov-bg, var(--color-ink));
  color: var(--hov-fg, var(--color-bg));
}

.gate__option:hover .gate__dot,
.gate__option:focus-visible .gate__dot {
  color: var(--hov-dot, var(--color-yellow));
}

.gate__option:focus-visible {
  outline: none;
}

.gate__option:focus-visible .gate__option-text {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* ---------- Animación propia de cada opción al señalarla ----------
   Cada letra es un .gate__ch (main.js las parte). Cada servicio con su carácter y su color:
   Automatizaciones, seria (cada letra rueda como un dado con la misma letra en la otra cara);
   Diseño web, el efecto de su título (letras más anchas cerca del puntero, main.js);
   Chips NFC, ondas de "acerca el móvil" y una señal que recorre las letras;
   Redes sociales, divertida (las letras botan en ola y suben corazones). */

.gate__ch {
  display: inline-block;
}

.gate__option[data-gate-option="webdesign"] {
  --hov-bg: #231aab;
  --hov-fg: #f4f1e8;
  --hov-dot: #dfc94d;
}

.gate__option[data-gate-option="nfc"] {
  --hov-bg: #2346ff;
  --hov-fg: #fff;
  --hov-dot: #fff;
}

.gate__option[data-gate-option="social"] {
  --hov-bg: #ff2e88;
  --hov-fg: #fff;
  --hov-dot: #1d0812;
}

/* adornos (líneas, marcos, ondas, corazones) de todas: ocultos hasta el hover */
.gate__option-text::before,
.gate__option-text::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

/* Automatizaciones: cada letra es un DADO con la misma letra en dos caras (referencia del
   usuario, "Available for collaboration"): al señalar, rueda hacia arriba letra a letra — la cara
   de delante (.gate__f) se pliega hacia arriba y la de abajo (.gate__b, main.js) se despliega
   desde abajo — y, al acabar, todo vuelve a su estado de reposo, que se ve igual (mismas letras).
   En 2D (scaleY), NO con 3D real: con preserve-3d/rotateX las letras parpadeaban al terminar y al
   pulsar (el clic encoge la palabra). Relleno "backwards": durante el retraso escalonado se ve el
   reposo y al acabar no se queda nada girado. */
.gate__option[data-gate-option="automations"] .gate__ch {
  position: relative;
}

.gate__f,
.gate__b {
  display: inline-block;
}

.gate__f {
  transform-origin: 50% 0;
}

.gate__b {
  position: absolute;
  left: 0;
  top: 0;
  transform: scaleY(0);
  transform-origin: 50% 100%;
}

.gate__option[data-gate-option="automations"]:hover .gate__f {
  animation: gate-dice-out 620ms cubic-bezier(0.65, 0, 0.25, 1) calc(var(--i) * 28ms) backwards;
}

.gate__option[data-gate-option="automations"]:hover .gate__b {
  animation: gate-dice-in 620ms cubic-bezier(0.65, 0, 0.25, 1) calc(var(--i) * 28ms) backwards;
}

@keyframes gate-dice-out {
  from {
    transform: none;
  }
  to {
    opacity: 0.4;
    transform: scaleY(0);
  }
}

@keyframes gate-dice-in {
  from {
    opacity: 0.4;
    transform: scaleY(0);
  }
  to {
    transform: none;
  }
}

/* Diseño web: al entrar el puntero, las letras suben por su ventana y se dibuja un marco amarillo
   (como la portada de su escena); después, el efecto de su título "DISEÑO WEB": cada letra se
   ensancha cerca del puntero y se estrecha lejos (eje wdth de Instrument Sans, 75–100; main.js). */
.gate__option[data-gate-option="webdesign"]:is(:hover, :focus-visible) .gate__ch {
  animation: gate-rise 650ms var(--ease-out-expo) calc(var(--i) * 32ms) both;
}

@keyframes gate-rise {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.55em);
  }
  to {
    clip-path: inset(-0.3em -0.2em -0.3em -0.2em);
    transform: none;
  }
}

.gate__option[data-gate-option="webdesign"] .gate__option-text::before {
  inset: 5px;
  border: 3px solid #dfc94d;
  clip-path: inset(0 100% 100% 0);
}

.gate__option[data-gate-option="webdesign"]:is(:hover, :focus-visible) .gate__option-text::before {
  opacity: 1;
  animation: gate-frame 800ms cubic-bezier(0.65, 0, 0.35, 1) 120ms both;
}

@keyframes gate-frame {
  50% {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

/* Chips NFC: ondas que salen de la derecha, como al acercar el móvil, y una señal por las letras */
.gate__option[data-gate-option="nfc"]:is(:hover, :focus-visible) .gate__ch {
  animation: gate-signal 900ms ease calc(var(--i) * 45ms) both;
}

@keyframes gate-signal {
  0% {
    opacity: 0.35;
  }
  40% {
    opacity: 1;
    text-shadow: 0 0 0.25em rgba(255, 255, 255, 0.7);
  }
  100% {
    opacity: 1;
    text-shadow: none;
  }
}

.gate__option[data-gate-option="nfc"] .gate__option-text::before,
.gate__option[data-gate-option="nfc"] .gate__option-text::after {
  right: clamp(1.5rem, 7vw, 6rem);
  top: 50%;
  width: 0.62em;
  height: 0.62em;
  margin-top: -0.31em;
  border: 3px solid #fff;
  border-radius: 50%;
}

.gate__option[data-gate-option="nfc"]:is(:hover, :focus-visible) .gate__option-text::before,
.gate__option[data-gate-option="nfc"]:is(:hover, :focus-visible) .gate__option-text::after {
  animation: gate-ring 1600ms ease-out infinite;
}

.gate__option[data-gate-option="nfc"]:is(:hover, :focus-visible) .gate__option-text::after {
  animation-delay: 800ms;
}

@keyframes gate-ring {
  from {
    opacity: 0.9;
    transform: scale(0.25);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Redes sociales: las letras botan en ola y suben dos corazones */
.gate__option[data-gate-option="social"]:is(:hover, :focus-visible) .gate__ch {
  transform-origin: 50% 100%;
  animation: gate-bounce 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 45ms) both;
}

@keyframes gate-bounce {
  0% {
    transform: none;
  }
  25% {
    transform: translateY(-0.16em) scale(1.06, 0.94) rotate(-4deg);
  }
  50% {
    transform: translateY(0.02em) scale(0.96, 1.05) rotate(2deg);
  }
  75% {
    transform: translateY(-0.04em);
  }
  100% {
    transform: none;
  }
}

.gate__option[data-gate-option="social"] .gate__option-text::before,
.gate__option[data-gate-option="social"] .gate__option-text::after {
  top: 50%;
  width: 0.34em;
  height: 0.34em;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.8 4.5c2.2 0 3.6 1.2 5.2 3 1.6-1.8 3-3 5.2-3 3.8 0 5.9 3.9 4.4 7.3C19.5 16.4 12 21 12 21z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.8 4.5c2.2 0 3.6 1.2 5.2 3 1.6-1.8 3-3 5.2-3 3.8 0 5.9 3.9 4.4 7.3C19.5 16.4 12 21 12 21z'/></svg>") center / contain no-repeat;
}

.gate__option[data-gate-option="social"] .gate__option-text::before {
  right: clamp(3rem, 12vw, 10rem);
}

.gate__option[data-gate-option="social"] .gate__option-text::after {
  right: clamp(1.5rem, 6vw, 5rem);
  width: 0.24em;
  height: 0.24em;
}

.gate__option[data-gate-option="social"]:is(:hover, :focus-visible) .gate__option-text::before,
.gate__option[data-gate-option="social"]:is(:hover, :focus-visible) .gate__option-text::after {
  animation: gate-heart 1800ms ease-out infinite;
}

.gate__option[data-gate-option="social"]:is(:hover, :focus-visible) .gate__option-text::after {
  animation-delay: 700ms;
}

@keyframes gate-heart {
  0% {
    opacity: 0;
    transform: translateY(0.35em) scale(0.4) rotate(-12deg);
  }
  25% {
    opacity: 1;
    transform: translateY(0) scale(1.1) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.45em) scale(0.9) rotate(-8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate__option .gate__ch,
  .gate__option .gate__option-text::before,
  .gate__option .gate__option-text::after {
    animation: none !important;
  }

  .gate__option .gate__f,
  .gate__option .gate__b {
    animation: none !important;
  }
}

/* Al elegir: las otras dos opciones desaparecen y la elegida se encoge un
   poco — ese encogido es en sí mismo la transición de entrada, antes de que
   la puerta entera se desvanezca (.gate.is-leaving, ver más arriba). */
.gate__options.is-choosing .gate__option:not(.is-selected) {
  transition: opacity 320ms ease;
  opacity: 0;
}

.gate__option.is-selected .gate__option-text {
  transition: transform 420ms var(--ease-out-expo);
  transform: scale(0.72);
}

@media (prefers-reduced-motion: reduce) {
  .gate__options.is-choosing .gate__option:not(.is-selected) {
    transition: none;
  }

  .gate__option.is-selected .gate__option-text {
    transition: none;
  }
}

/* Placeholder de "Diseño web" y "Chips NFC" — sustituye a la lista de
   opciones hasta que cada servicio tenga su propio contenido. */
.gate__panel {
  width: 100%;
  padding-inline: var(--space-gutter);
}

.gate__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.gate__back:hover {
  color: var(--color-ink);
}

.gate__panel-eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.gate__panel-title {
  margin: 0 0 clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-size: clamp(2.6rem, 1.2rem + 6vw, 5.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.gate__panel-title span {
  color: var(--color-accent);
}

.gate__panel-text {
  margin: 0 0 clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  max-width: 34rem;
  font-size: var(--text-lead);
  color: var(--color-ink-soft);
}

.gate__panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-normal) ease;
}

.gate__panel-cta:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}

.gate__panel-cta svg {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.gate__panel-cta:hover svg {
  transform: translateX(3px);
}

@media (max-width: 30rem) {
  .gate__option:hover .gate__option-text,
  .gate__option:focus-visible .gate__option-text {
    padding-inline-start: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  }
}

/* ---------- Custom cursor ---------- */

.cursor-dot {
  --x: -100px;
  --y: -100px;
  --scale: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  z-index: 80;
  transform: translate3d(var(--x), var(--y), 0) scale(var(--scale));
  transition: transform var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-fast) ease, opacity var(--duration-fast) ease;
  opacity: 0;
}

.cursor-dot.is-active {
  opacity: 1;
}

.cursor-dot.is-hovering {
  --scale: 3.4;
  background: var(--color-accent-soft);
  outline: 1px solid var(--color-accent);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot {
    display: none;
  }
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  padding-block: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
  /* el hero empieza justo debajo de la nav en el flujo normal; este margen
     negativo (altura real medida por JS) tira de <main> hacia arriba para
     que ocupe el mismo sitio que la nav. Así el blob del hero es continuo
     de verdad hasta arriba del todo — la nav simplemente flota encima
     (tiene más z-index), en vez de haber dos fondos distintos que casar. */
  margin-bottom: calc(-1 * var(--nav-h, 0px));
}

.nav__pill {
  --pill-tint: var(--color-bg-raised);
  --pill-border: var(--color-ink);
  --pill-fg: var(--color-ink);
  --pill-fg-soft: rgba(20, 20, 15, 0.6);
  --pill-fg-faint: rgba(20, 20, 15, 0.34);
  --pill-sheen: rgba(255, 255, 255, 0.55);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.85rem 0.85rem 1.4rem;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--pill-tint) 80%, transparent),
    color-mix(in srgb, var(--pill-tint) 94%, transparent)
  );
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--pill-border);
  box-shadow: inset 0 1px 0 var(--pill-sheen), inset 0 -1px 0 rgba(20, 20, 15, 0.12),
    0 1px 2px rgba(20, 20, 15, 0.04);
  color: var(--pill-fg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 650ms var(--ease-out-expo), transform 650ms var(--ease-out-expo),
    background var(--duration-normal) ease, border-color var(--duration-normal) ease,
    box-shadow var(--duration-normal) ease, color var(--duration-normal) ease;
}

/* No aparece hasta que termina de escribirse "Diseñamos flujos..." en la
   primera transición a negro del hero (ver --focus / is-typing en main.js) */
.nav.is-ready .nav__pill {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .nav__pill {
    opacity: 1;
    transform: none;
  }
}

.nav__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 140% at 18% -20%,
    rgba(255, 255, 255, 0.22),
    transparent 55%
  );
  pointer-events: none;
}

.nav.is-scrolled .nav__pill {
  box-shadow: inset 0 1px 0 var(--pill-sheen), inset 0 -1px 0 rgba(20, 20, 15, 0.12),
    0 16px 34px -16px rgba(20, 20, 15, 0.35);
}

.nav__pill:hover,
.nav__pill:focus-within {
  --pill-tint: var(--color-accent);
  --pill-border: var(--color-accent);
  --pill-fg: var(--color-bg);
  --pill-fg-soft: rgba(250, 249, 246, 0.6);
  --pill-fg-faint: rgba(250, 249, 246, 0.34);
  --pill-sheen: rgba(255, 255, 255, 0.16);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__pill {
    background: var(--color-bg-raised);
  }
  .nav__pill:hover,
  .nav__pill:focus-within {
    background: var(--color-accent);
  }
}

.nav__start {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* vuelve a la puerta de entrada (initGate en main.js) */
.nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: -0.75rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--pill-fg-faint);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--pill-fg);
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.nav__back svg {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.nav__back:hover,
.nav__back:focus-visible {
  border-color: var(--pill-fg);
  background: var(--pill-fg);
  color: var(--pill-tint);
  outline: none;
}

.nav__back:hover svg {
  transform: translateX(-3px);
}

@media (max-width: 30rem) {
  .nav__pill .nav__back span {
    display: none;
  }
}

/* el de arriba a la izquierda, fuera de la pastilla: se ve desde que se entra y se retira cuando
   sale la nav (.nav.is-ready), que ya lleva el suyo */
.nav__back--float {
  --pill-fg: var(--color-ink);
  --pill-fg-faint: rgba(20, 20, 15, 0.34);
  --pill-tint: var(--color-bg);
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + clamp(1rem, 0.8rem + 0.8vw, 1.6rem));
  left: var(--space-gutter);
  z-index: 41;
  margin: 0;
  padding: 0.6rem 1rem;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: opacity 400ms ease, visibility 0s, background-color var(--duration-fast) ease,
    color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.nav.is-ready .nav__back--float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}

.nav__brand {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--pill-fg);
}

.nav__brand span {
  color: var(--color-accent);
  transition: color var(--duration-normal) ease;
}

.nav__pill:hover .nav__brand span,
.nav__pill:focus-within .nav__brand span {
  color: var(--pill-fg);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.8rem);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-pill);
}

.nav__links a {
  position: relative;
  color: var(--pill-fg-soft);
  padding-block: 0.2rem;
  transition: color var(--duration-fast) ease;
}

.nav__links a::before,
.nav__links a::after {
  color: var(--pill-fg-faint);
}
.nav__links a::before {
  content: "[";
  margin-right: 0.15em;
}
.nav__links a::after {
  content: "]";
  margin-left: 0.15em;
}

.nav__links a span {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--ease-out-expo),
    background var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) ease;
}

.nav__links a:hover {
  color: var(--pill-fg);
}

.nav__links a:hover span {
  transform: translateY(-2px);
  background: var(--color-accent);
  color: var(--color-accent-fg);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-size: 0.82rem;
  font-weight: 600;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.nav__cta:hover {
  transform: translateY(-1px);
}

/* ---------- Hero ---------- */

.hero {
  --focus: 0;
  position: relative;
  /* Mucho más alta que una pantalla: da recorrido físico de scroll de
     sobra para que la secuencia de foco (negro + escritura del párrafo)
     tenga tiempo real, no solo un tramo porcentual más largo. */
  min-height: 240vh;
  background-color: color-mix(in srgb, black calc(var(--focus) * 100%), var(--color-bg));
}

.hero__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-section) clamp(3.5rem, 2.8rem + 3vw, 6rem);
  overflow: hidden;
  /* base muy tenue debajo de los blobs: evita cualquier borde visible
     donde termina su desenfoque, fundiendo con el crema del fondo */
  background-image: radial-gradient(
    120% 90% at 88% 0%,
    color-mix(in srgb, var(--color-accent) 7%, transparent),
    transparent 70%
  );
}

.hero__blobs {
  --px: 0px;
  --py: 0px;
  position: absolute;
  inset: 0;
  /* Las imágenes de los blobs sobresalen 480px por cada lado (ver abajo): sin
     recorte ensanchaban la página en horizontal (1085px en un móvil de 390). */
  overflow: hidden;
  overflow: clip;
  z-index: -1;
  pointer-events: none;
  opacity: calc(1 - var(--focus));
  transform: translate3d(var(--px), var(--py), 0);
  transition: transform 500ms var(--ease-out-expo);
}

/* Blobs difuminados del hero. Cada uno es una IMAGEN (src/assets/hero-blob-N.webp)
   con el degradado y el desenfoque de 150px ya horneados — antes era un degradado
   con `filter: blur(150px)` encima, y la GPU volvía a desenfocar tres capas enormes
   en cada fotograma (animación `drift` + opacidad ligada al scroll). La imagen se
   dibuja en un ::before que sobresale 480px por cada lado (lo que se extiende el
   blur); el .hero recorta con overflow: hidden. Se regeneran con
   tools/generate-hero-blobs.js si cambian los colores o los tamaños. */
.hero__blobs span {
  position: absolute;
  opacity: 0.3;
  animation: drift 18s ease-in-out infinite;
}

.hero__blobs span::before {
  content: "";
  position: absolute;
  inset: -480px;
  background: var(--blob) center / 100% 100% no-repeat;
}

.hero__blobs span:nth-child(1) {
  --blob: url("../assets/hero-blob-1.webp");
  width: 56rem;
  height: 56rem;
  top: -14rem;
  right: -12rem;
  animation-delay: 0s;
}

.hero__blobs span:nth-child(2) {
  --blob: url("../assets/hero-blob-2.webp");
  width: 24rem;
  height: 24rem;
  bottom: -6rem;
  left: -4rem;
  animation-delay: -6s;
}

.hero__blobs span:nth-child(3) {
  --blob: url("../assets/hero-blob-3.webp");
  width: 18rem;
  height: 18rem;
  top: 40%;
  left: 50%;
  opacity: 0.06;
  animation-delay: -12s;
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2.5%, -3%, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__blobs span {
    animation: none;
  }
}

.hero__title {
  margin: 0;
  max-width: 22ch;
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Solo llega aquí por script, al cerrarse la puerta (tabindex="-1" + focus()
   en enterSite, para que un lector de pantalla anuncie el cambio de
   contexto) — nunca por Tab de verdad, así que no necesita el anillo de
   foco genérico de `:focus-visible` (cabecera del archivo): en un titular
   grande, animado y a pantalla completa, ese recuadro se ve como un error
   de renderizado, no como una ayuda. El foco en sí se mantiene (los
   lectores de pantalla lo anuncian igual); solo se le quita el dibujo. */
.hero__title:focus-visible {
  outline: none;
}

.hero__title-lead {
  display: block;
  /* capa propia: al cambiar el desenfoque con el scroll solo se recompone, no se
     vuelve a pintar el texto en cada fotograma */
  will-change: filter, opacity;
  filter: blur(calc(var(--focus) * 16px));
  opacity: calc(1 - var(--focus) * 0.9);
}

/* Antes corrían solas, a los 1.4s de cargar la página (con la puerta de
   entrada encima, tapándolas). Ahora las dispara el JS (clase
   .is-emphasizing en .hero__title) justo cuando termina de escribirse
   "...piense en" — ver initGate/typeHeroTitle en main.js. */
.hero__title.is-emphasizing .hero__title-lead {
  animation: hero-lead-recede 900ms var(--ease-out-expo) both;
}

@keyframes hero-lead-recede {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.42em);
  }
}

.hero__title em {
  position: relative;
  display: block;
  width: fit-content;
  font-style: normal;
  color: color-mix(in srgb, var(--color-bg) calc(var(--focus) * 100%), var(--color-accent));
  transform-origin: left bottom;
}

.hero__title.is-emphasizing em {
  animation: hero-emphasis 900ms var(--ease-out-expo) both;
}

/* Se va dibujando en rojo a la vez que se escribe "Diseñamos flujos...",
   pegada a la altura de una minúscula sin astas (como la "n" de
   "importante"), no muy por debajo del texto. */
.hero__title em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.02em;
  width: 100%;
  height: 0.045em;
  min-height: 3px;
  background: var(--color-red);
  border-radius: 2px;
  transform: scaleX(var(--type-progress, 0));
  transform-origin: left;
}

@keyframes hero-emphasis {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(calc(1.42 + var(--focus) * 0.28));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title-lead {
    animation: none;
    transform: translateY(-0.42em);
  }

  .hero__title em {
    animation: none;
    transform: scale(1.42);
  }
}

.hero__lead {
  margin: 1.6rem 0 0;
  max-width: 46ch;
  min-height: 4.6em;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-bg) calc(var(--focus) * 100%), var(--color-ink-soft));
}

.hero__lead.is-typing::after,
.hero__title-lead.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: hero-lead-cursor 850ms steps(1) infinite;
}

@keyframes hero-lead-cursor {
  50% {
    opacity: 0;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-normal) ease, color var(--duration-normal) ease;
}

.btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.btn__arrow {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.hero__scroll {
  margin-top: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: color-mix(in srgb, var(--color-bg) calc(var(--focus) * 75%), var(--color-ink-faint));
}

.hero__scroll svg {
  animation: bob 1.8s ease-in-out infinite;
}

/* "Somos Nukleo." pegado a la línea de corte inferior del hero, abajo a la
   derecha. Sale cuando termina de escribirse "Diseñamos flujos..." (clase
   is-ready, ver main.js).
   - La línea de corte es min(100vh, alto del pin): mientras el hero está fijo
     su caja puede medir más que la ventana, y el fondo visible acaba en 100vh.
   - El margen negativo del texto (-0.13em) baja la caja justo hasta que las
     letras más bajas (las redondas, que se pasan 0.014em de la línea base)
     tocan la línea sin recortarse. */
.hero__foot {
  position: absolute;
  inset-inline: 0;
  top: min(100vh, 100%);
  transform: translateY(-100%);
  pointer-events: none;
}

.hero__brand {
  margin: 0 0 -0.13em;
  text-align: right;
  font-size: clamp(2.8rem, 1.2rem + 5.2vw, 6.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--color-bg) calc(var(--focus) * 100%), var(--color-ink));
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms var(--ease-out-expo), transform 650ms var(--ease-out-expo);
}

.hero__brand span {
  color: var(--color-red);
}

.hero__foot.is-ready .hero__brand {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__brand {
    opacity: 1;
    transform: none;
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* ---------- Manifiesto: "Optimizar es ganar tiempo." ---------- */

.manifesto {
  --ghost-min: 0.78;
  --title-size: clamp(3rem, 0.8rem + 8vw, 8.25rem);
  --grid-pad: clamp(3rem, 2rem + 4vw, 6rem);
  --clock-size: clamp(15rem, 31vw, 26rem);
  --clock-edge: clamp(1rem, 3vw, 3rem);
  /* Altura mínima: la parte alta del reloj (anclado abajo a la derecha) solo
     se mete un ~32 % de su diámetro por detrás de "ganar tiempo." */
  min-height: calc(
    var(--grid-pad) + 3.5rem + 1.84 * var(--title-size) + 0.68 * var(--clock-size) +
      var(--clock-edge)
  );
  position: relative;
  overflow: hidden;
  background: var(--color-bg-sunken);
}

.manifesto__ghost {
  position: absolute;
  left: 12%;
  bottom: -0.22em;
  z-index: 0;
  font-size: clamp(9rem, 34vw, 32rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  /* Antes era gris (mezcla de --color-ink); ahora usa el amarillo
     fluorescente de la marca, para que la primera pantalla después del hero
     ya anuncie que aquí hay más color que el navy de siempre. Más alfa que
     el rosa que llevaba antes: el amarillo es un color claro y a la misma
     transparencia se lava contra el fondo crema. */
  color: color-mix(in srgb, var(--color-yellow) 62%, transparent);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  /* Sin JS o con "reducir movimiento" no hay --ghost y queda a escala 1 */
  transform-origin: 0 100%;
  transform: scale(calc(var(--ghost-min) + (1 - var(--ghost-min)) * var(--ghost, 1)));
  will-change: transform;
}

.manifesto__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(15rem, 18.5rem) 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: var(--grid-pad);
}

.manifesto__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 28rem;
  padding: 1.5rem;
  background: var(--color-accent);
  color: var(--color-accent-fg);
}

/* Sello ladeado que sobresale de la tarjeta: rompe la rejilla a propósito,
   como un "post-it" pegado encima — el gesto atrevido que pedías en vez de
   quedarse solo en el cambio de color de la palabra de fondo. */
.manifesto__stamp {
  position: absolute;
  top: -1rem;
  right: -1.1rem;
  z-index: 2;
  padding: 0.5rem 0.85rem;
  background: var(--color-yellow);
  /* fondo claro: texto oscuro, no el crema que llevaba con el rosa */
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: rotate(-7deg);
  box-shadow: 0 14px 24px -12px rgba(20, 20, 15, 0.5);
}

.manifesto__brand {
  margin: 0 0 1.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.manifesto__brand span {
  opacity: 0.6;
}

.manifesto__card-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  opacity: 0.85;
}

.manifesto__card-strong {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
}

.manifesto__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  font-size: 0.86rem;
  font-weight: 600;
}

.manifesto__more:focus-visible {
  outline-color: var(--color-ink);
}

.manifesto__more svg {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.manifesto__more:hover svg {
  transform: translateX(4px);
}

.manifesto__main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.manifesto__kicker,
.manifesto__note {
  -webkit-text-stroke: 0.3em var(--color-bg-sunken);
  paint-order: stroke fill;
}

.manifesto__kicker {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}

.manifesto__title {
  margin: clamp(0.5rem, 0.2rem + 1vw, 1.25rem) 0 0;
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
  color: var(--color-ink);
  /* Halo del color del fondo: despega las letras del reloj negro que pasa
     por detrás (el trazo va debajo del relleno, no adelgaza las letras). */
  -webkit-text-stroke: 0.1em var(--color-bg-sunken);
  paint-order: stroke fill;
}

.manifesto__title span {
  display: block;
  color: var(--color-accent);
}

/* Reloj analógico de fondo: un círculo perfecto hecho solo de rectángulos
   (48 marcas idénticas, sin marco) y dos agujas rectangulares de distinto
   largo. Anclado a la esquina inferior derecha del panel, de modo que solo su
   parte alta queda detrás de "ganar tiempo.". Va por detrás de todo el
   contenido (la rejilla tiene z-index 1) y, al ir después en el DOM, por
   delante del gris y de la palabra fantasma. Gira a la inversa (antihorario):
   el tiempo que se recupera. Minutero y horario mantienen la proporción 12:1
   de un reloj real. */
.manifesto__clock {
  position: absolute;
  z-index: 0;
  right: var(--clock-edge);
  bottom: var(--clock-edge);
  width: var(--clock-size);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  fill: var(--color-ink);
  pointer-events: none;
}

.clock__hand {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: clock-reverse var(--clock-turn) linear infinite;
}

.clock__hand--minute {
  --clock-turn: 6s;
}

.clock__hand--hour {
  --clock-turn: 72s;
}

@keyframes clock-reverse {
  to {
    transform: rotate(-360deg);
  }
}

.manifesto__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  margin-top: auto;
  padding-top: clamp(2.5rem, 2rem + 3vw, 5rem);
}

.manifesto__note {
  margin: 0;
  /* el límite en vw evita que roce el reloj en anchos intermedios */
  max-width: min(21rem, 22vw);
  text-align: left;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-ink);
}

.manifesto__note-label {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-faint);
}

/* ---------- Escritura a máquina (main.js: data-typewriter) ----------
   El texto completo ya ocupa su sitio (.tw__rest, invisible), así que al
   escribir no hay saltos de layout aunque el texto vaya alineado a la derecha. */

.tw {
  white-space: pre-line;
}

.tw__rest {
  visibility: hidden;
}

.tw.is-typing .tw__typed::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1em;
  /* margen neto 0: el cursor no empuja el texto */
  margin: 0 -0.18em 0 0.1em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: hero-lead-cursor 850ms steps(1) infinite;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 52rem) {
  .manifesto__grid {
    grid-template-columns: 1fr;
  }

  .manifesto__main {
    order: -1;
  }

  .manifesto__card {
    min-height: 0;
  }

  .manifesto__stamp {
    top: -0.85rem;
    right: 1.25rem;
  }

  .manifesto {
    min-height: 0;
  }

  .manifesto__clock {
    /* mitad de su diámetro por encima del centro de "ganar tiempo." */
    top: calc(3.5rem + 1.38 * var(--title-size) - 2.5rem);
    bottom: auto;
    right: 1rem;
    width: 10rem;
  }

  .manifesto__foot {
    padding-top: 4.5rem;
  }

  .manifesto__ghost {
    left: -4%;
  }

  .manifesto__foot {
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
  }

  .manifesto__note {
    max-width: none;
    text-align: right;
  }
}

/* ---------- Ribbon (cinta de diagnóstico) ---------- */

.ribbon {
  position: relative;
  background: var(--color-accent);
  color: var(--color-bg);
  overflow: hidden;
}

.ribbon--callout .ribbon__inner {
  max-width: 78rem;
  margin-inline: auto;
  padding: clamp(1rem, 0.85rem + 0.8vw, 1.5rem) var(--space-gutter);
}

.ribbon__text {
  margin: 0;
  text-align: center;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.12rem);
  line-height: 1.5;
}

.ribbon__text strong {
  font-weight: 600;
}

/* ---------- Panel de cifras (sustituye al marquee de estadísticas) ---------- */

.stats {
  background: var(--color-bg-sunken);
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.stats__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.stats__top .eyebrow,
.stats__aside {
  margin: 0;
}

.stats__aside {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.02em;
  color: var(--color-ink-faint);
  text-align: right;
}

.stats__title,
.tiles__title,
.demo__title {
  margin: clamp(1.25rem, 1rem + 1.5vw, 2.25rem) 0 clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  max-width: 12ch;
  font-size: clamp(2.6rem, 1rem + 6.4vw, 6.75rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
  color: var(--color-ink);
}

.stats__title span,
.tiles__title span,
.demo__title span {
  color: var(--color-accent);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

/* Cada columna es contenedor: la cifra se dimensiona con su ancho real, así
   "99.9%" nunca se sale de la columna.
   Cada columna es una categoría distinta (automatización, puesta en marcha,
   tiempo recuperado, mantenimiento), así que cada una lleva su propio color
   — el "cuarto color" de la marca, junto al navy que ya se usa en todas
   partes. --stat-border es el tono puro (decorativo, sin exigencia de
   contraste); --stat-text es la variante que se lee bien sobre el fondo gris
   del panel (el ámbar puro no llega al contraste mínimo con texto grande,
   por eso existe --color-amber-ink). */
.stats__col {
  --stat-border: var(--color-ink);
  --stat-text: var(--color-ink);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--stat-border);
  padding-top: 0.5rem;
}

.stats__col:nth-child(2) {
  --stat-border: var(--color-blue);
  --stat-text: var(--color-blue);
}

.stats__col:nth-child(3) {
  --stat-border: var(--color-pink);
  --stat-text: var(--color-pink);
}

.stats__col:nth-child(4) {
  --stat-border: var(--color-amber);
  --stat-text: var(--color-amber-ink);
}

.stats__value {
  margin: 0;
  font-size: clamp(3rem, 36cqi, 9rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: var(--stat-text);
}

.stats__label {
  margin: 0.6rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

.stats__sub {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--color-ink-faint);
}

.stats__cat {
  margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.stats__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

@media (max-width: 52rem) {
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  }
}

@media (max-width: 36rem) {
  .stats__grid {
    grid-template-columns: 1fr;
  }

  .stats__aside {
    display: none;
  }
}

/* ---------- Robot que se asoma por la esquina ---------- */

/* Pegado al borde de la ventana (no a una sección): así asoma literalmente
   desde el marco de la web, sobre lo que haya en pantalla en ese momento.
   El vídeo fuente nunca se pinta directamente — .peek-bot__src es un simple
   proveedor de fotogramas, oculto (ver initPeekBot en main.js) — este canvas
   es lo único visible, ya con el croma recortado. */
.peek-bot {
  position: fixed;
  z-index: 70;
  width: clamp(5.5rem, 16vw + 2rem, 12.5rem);
  height: auto;
  pointer-events: none;
  opacity: 0;
  /* nitidez: el buffer interno del canvas se dimensiona por JS a este
     tamaño real (en píxeles de pantalla, con devicePixelRatio) — ver
     initPeekBot en main.js */
  image-rendering: -webkit-optimize-contrast;
}

.peek-bot.is-active {
  opacity: 1;
}

/* Cada recorte tiene su propia proporción real (ver src/assets/robot-peek-*.mp4) */
.peek-bot[data-side="br"] {
  right: 0;
  bottom: 0;
  aspect-ratio: 420 / 640;
}

.peek-bot[data-side="tl"] {
  top: 0;
  left: 0;
  aspect-ratio: 380 / 640;
}

/* "bc" (bottom-center) asoma sobre la propia puerta de entrada (.gate,
   z-index 100), no sobre el resto de la página como los otros dos — por
   eso necesita su propio z-index, más alto, y por eso está centrado en vez
   de pegado a una esquina. Recorte más ancho que alto (vídeo horizontal),
   así que el `width` de base es mayor que el de los otros dos. */
.peek-bot[data-side="bc"] {
  left: 50%;
  bottom: 0;
  z-index: 110;
  width: clamp(9rem, 22vw + 3rem, 17rem);
  aspect-ratio: 560 / 300;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .peek-bot {
    display: none;
  }
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
  transform: translate3d(-50%, 14px, 0);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  background: var(--color-ink);
  color: var(--color-bg);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  box-shadow: 0 16px 34px -14px rgba(20, 20, 15, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) var(--ease-out-expo);
}

.toast.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.toast__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Section shell ---------- */

.section {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-line);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  max-width: 40rem;
}

.section__head h2 {
  --underline: 0;
  position: relative;
  width: fit-content;
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.section__head h2::after {
  content: "";
  display: block;
  margin-top: 0.18em;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(var(--underline));
  transform-origin: left;
}

.section__head p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-lead);
}

/* ---------- Servicios (cuadros con letra gigante) ---------- */

.tiles {
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  background: var(--color-bg-sunken);
  /* el panel de cifras de arriba es del mismo gris: un filo los separa */
  border-top: 1px solid var(--color-line);
}

.tiles__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.tiles__top .eyebrow {
  margin: 0;
}

.tiles__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink);
}

.tiles__link svg {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.tiles__link:hover svg {
  transform: translateX(4px);
}

.tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.15rem);
}

.tile-col {
  display: flex;
  flex-direction: column;
}

/* Cuadro negro; al pasar el ratón se vuelve amarillo fluorescente. El color
   va en --tile-bg para que la pastilla de arriba cambie a la vez y siga
   "recortando" la letra con el mismo tono. El texto pasa de crema a negro en
   el hover (--color-ink), porque el amarillo es demasiado claro para leer
   texto crema encima; la letra gigante y el resto de textos usan
   `currentColor`, así que siguen ese cambio solos, sin reglas aparte. */
.tile {
  --tile-bg: var(--color-ink);
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 1 / 1.04;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(0.85rem, 0.6rem + 0.9vw, 1.2rem);
  background-color: var(--tile-bg);
  color: var(--color-bg);
  transition: background-color 420ms ease, color 420ms ease, transform 380ms var(--ease-out-expo),
    box-shadow 380ms var(--ease-out-expo);
}

/* Al pasar el ratón: amarillo fluorescente y el cuadro sobresale (sube,
   crece un poco y proyecta sombra), por encima de los vecinos. */
.tile:hover {
  --tile-bg: var(--color-yellow);
  color: var(--color-ink);
  z-index: 2;
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 32px 48px -24px rgba(20, 20, 15, 0.45);
}

/* Letra inicial gigante, recortada por el borde superior del cuadro. Medidas
   de Instrument Sans 700: la mayúscula mide 0.723em y su línea base está a
   0.856em de la parte alta de la caja (line-height: 1), así que la parte alta
   de la letra queda a 0.133em de la caja. Con top = -(0.133 + 0.14 * 0.723)em
   se corta el 14 % de su altura por arriba, igual en F, I, P y A. */
.tile__letter {
  position: absolute;
  top: -0.234em;
  left: 0.03em;
  font-size: 125cqi;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: currentColor;
  pointer-events: none;
  user-select: none;
}

.tile__top,
.tile__foot {
  position: relative;
  z-index: 1;
}

.tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.tile__chip,
.tile__metric {
  border-radius: var(--radius-pill);
  background-color: var(--tile-bg);
  transition: background-color 420ms ease;
  line-height: 1;
}

.tile__chip {
  padding: 0.28rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

.tile__metric {
  padding: 0.3rem 0.7rem;
  font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.9rem);
  font-weight: 600;
  white-space: nowrap;
}

.tile__name {
  margin: 0;
  font-size: clamp(1.05rem, 0.8rem + 0.7vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tile__sub {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  opacity: 0.6;
}

.tile-col__cat {
  margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.tile-col__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

@media (max-width: 60rem) {
  .tiles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  }
}

@media (max-width: 36rem) {
  .tiles__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Proceso ("Cómo trabajamos.") ---------- */

.process {
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  background: var(--color-bg-sunken);
  /* la demo de arriba es del mismo gris: un filo los separa */
  border-top: 1px solid var(--color-line);
}

.process__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.process__top .eyebrow,
.process__aside {
  margin: 0;
}

.process__aside {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.02em;
  color: var(--color-ink-faint);
  text-align: right;
}

.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  margin-top: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

/* La columna del titular es contenedor: el tamaño se calcula con su ancho real
   para que "trabajamos." nunca se salga. */
.process__head {
  container-type: inline-size;
}

.process__title {
  margin: 0;
  font-size: clamp(2.8rem, 17cqi, 8rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--color-ink);
}

.process__title span {
  display: block;
  color: var(--color-accent);
}

/* La lista define las columnas y cada fila las hereda (subgrid): el nombre
   ocupa lo que el más largo ("Implementación") y las descripciones quedan
   alineadas entre filas. */
.process__list {
  display: grid;
  grid-template-columns: 3.25rem max-content minmax(0, 1fr) 1.5rem;
  column-gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line-strong);
}

.process__row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  padding-block: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  border-bottom: 1px solid var(--color-line-strong);
}

.process__num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-ink);
}

.process__name {
  margin: 0;
  font-size: clamp(1.15rem, 0.8rem + 0.85vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: color var(--duration-normal) ease;
}

.process__text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.process__arrow {
  justify-self: end;
  color: var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

/* Efecto "subrayador": una franja amarilla se dibuja detrás del nombre de la
   fase al pasar el ratón, como un rotulador fluorescente. El texto se queda
   en negro (no en amarillo): el amarillo puro no se lee sobre este fondo
   gris claro — ver --color-amber-ink más abajo, el mismo problema con el
   ámbar. */
.process__name {
  width: fit-content;
  background-image: linear-gradient(var(--color-yellow), var(--color-yellow));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 42%;
  transition: background-size var(--duration-normal) var(--ease-out-expo);
}

.process__row:hover .process__name {
  background-size: 100% 42%;
}

.process__row:hover .process__arrow {
  transform: translate(3px, -3px);
}

/* Bloque bajo la lista: "0 → 6 días" es la puesta en marcha media (fases
   01–03); la fase 04 (mantenimiento) continúa después. En amarillo
   fluorescente en vez de navy — el segundo "momento" fuerte de color de la
   página, a juego con el sello del panel de arriba. Texto negro: el crema
   que llevaba con el navy no se leería sobre un fondo tan claro. */
.process__cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  min-height: clamp(11rem, 8rem + 12vw, 17rem);
  margin-top: clamp(2rem, 1.5rem + 3vw, 4rem);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  background: var(--color-yellow);
  color: var(--color-ink);
}

.process__cycle-value {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  margin: 0;
  font-size: clamp(3rem, 1.5rem + 4.5vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}

.process__cycle-value svg {
  align-self: center;
  width: 0.8em;
  height: 0.55em;
}

.process__cycle-unit {
  margin-left: 0.15rem;
  font-size: 1rem;
  letter-spacing: 0;
}

.process__steps {
  display: flex;
  gap: clamp(1.25rem, 0.6rem + 2.4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.process__steps span {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.7;
}

@media (max-width: 52rem) {
  .process__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 36rem) {
  .process__aside {
    display: none;
  }

  .process__list {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem;
  }

  .process__row {
    row-gap: 0.4rem;
  }

  .process__text {
    grid-column: 2 / -1;
    grid-row: 2;
  }
}

/* ---------- Demo ("Así se ve un flujo.") ---------- */

.demo {
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  background: var(--color-bg-sunken);
  /* el panel de servicios de arriba es del mismo gris: un filo los separa */
  border-top: 1px solid var(--color-line);
}

.demo__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.demo__top .eyebrow,
.demo__aside {
  margin: 0;
}

.demo__aside {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.02em;
  color: var(--color-ink-faint);
  text-align: right;
}

/* Lienzo oscuro tipo editor de n8n. Es contenedor: los textos internos se
   dimensionan con su ancho real (cqi). En escritorio los nodos y las aristas
   van sobre coordenadas del SVG (1330 × 610); en móvil (ver media query) pasa
   a un flujo vertical. */
.circuit {
  --circuit-ink: rgba(250, 249, 246, 0.92);
  --circuit-soft: rgba(250, 249, 246, 0.55);
  --circuit-line: rgba(250, 249, 246, 0.28);
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1330 / 610;
  margin-top: clamp(2rem, 1.5rem + 3vw, 4rem);
  border: 1px solid rgba(250, 249, 246, 0.12);
  background-color: var(--color-ink);
  background-image: radial-gradient(rgba(250, 249, 246, 0.11) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: 12px 12px;
  color: var(--circuit-ink);
}

.circuit__frame {
  position: absolute;
  inset: 1px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.circuit__frame-trace {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 60 240;
  animation: circuit-frame-trace 6s linear infinite;
}

@keyframes circuit-frame-trace {
  to {
    stroke-dashoffset: -300;
  }
}

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

.circuit__edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.circuit__edge {
  fill: none;
  stroke: var(--circuit-line);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--duration-normal) ease, stroke-width var(--duration-normal) ease;
}

.circuit__edge.is-active {
  stroke: var(--color-blue);
  stroke-width: 3;
  stroke-dasharray: 10 7;
  animation: circuit-flow 900ms linear infinite;
}

@keyframes circuit-flow {
  to {
    stroke-dashoffset: -34;
  }
}

@media (prefers-reduced-motion: reduce) {
  .circuit__edge.is-active {
    animation: none;
  }
}

.circuit__arrowhead {
  fill: var(--circuit-soft);
  fill: context-stroke;
}

.circuit__edge-label {
  font-family: var(--font-mono);
  font-size: 20px;
  fill: var(--circuit-soft);
  /* halo del color del lienzo detrás del texto: aunque la curva pase por
     debajo, nunca se ve cortado */
  paint-order: stroke;
  stroke: var(--color-ink);
  stroke-width: 7px;
  stroke-linejoin: round;
}

/* Texto explicativo y botón viven en los huecos del lienzo (arriba y abajo a
   la izquierda), así no queda espacio muerto ni hay que bajar la vista. */
.circuit__caption {
  position: absolute;
  z-index: 2;
  top: 7%;
  left: 3.5%;
  width: 34%;
}

.circuit__caption-kind {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.9cqi, 0.74rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.circuit__caption-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.15rem, 2.9cqi, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-bg);
}

.circuit__caption-text {
  margin: 0;
  font-size: clamp(0.72rem, 1.1cqi, 0.86rem);
  line-height: 1.5;
  color: var(--circuit-soft);
}

.circuit__run {
  position: absolute;
  z-index: 2;
  left: 3.5%;
  bottom: 8%;
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-ink);
}

/* Invierte a negro con texto amarillo, como ya hacen los chips del stack o
   los enlaces de la nav al pasar el ratón — no azul. */
.circuit__run:hover:not(:disabled) {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-yellow);
}

.circuit__run:disabled {
  opacity: 0.55;
  cursor: progress;
}

.circuit__nodes {
  position: absolute;
  inset: 0;
}

.circuit__node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  transform: translate(-50%, -50%);
  width: 14.3%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: clamp(0.6rem, 1.1cqi, 0.95rem) clamp(0.65rem, 1.3cqi, 1.1rem);
  background: color-mix(in srgb, var(--color-bg) 8%, var(--color-ink));
  color: var(--circuit-ink);
  border: 1.5px solid var(--circuit-line);
  border-radius: 0;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease,
    background var(--duration-normal) ease, color var(--duration-fast) ease;
}

.circuit__node:hover,
.circuit__node:focus-visible {
  transform: translate(-50%, -50%) translateY(-3px);
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.8);
  border-color: rgba(250, 249, 246, 0.85);
}

.circuit__node:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

/* Activo / en ejecución: azul marino, como el hover de los cuadros de servicios */
.circuit__node.is-active {
  border-color: var(--color-blue);
  background: var(--color-accent);
}

.circuit__node.is-running {
  border-color: var(--color-blue);
  background: var(--color-accent);
  color: var(--color-bg);
  transform: translate(-50%, -50%) translateY(-3px);
}

.circuit__node-kind {
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 0.85cqi, 0.68rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--circuit-soft);
}

.circuit__node.is-running .circuit__node-kind {
  color: var(--color-bg);
  opacity: 0.8;
}

.circuit__node-label {
  font-weight: 700;
  font-size: clamp(0.78rem, 1.3cqi, 1.02rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.circuit__node-vip {
  color: var(--color-yellow);
}

/* ---------- Demo en vertical (móvil y tablet estrecha) ----------
   Sin scroll horizontal: las aristas del SVG se ocultan y las conexiones se
   dibujan con pseudo-elementos. Webhook → Validar → Condición y, de ahí, dos
   ramas en columnas: "sí" (izq.) y "no" (der.). */

@media (max-width: 60rem) {
  .circuit {
    --flow-gap: 1.9rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    aspect-ratio: auto;
    padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  }

  .circuit__edges {
    display: none;
  }

  .circuit__caption,
  .circuit__run {
    position: static;
    width: auto;
  }

  .circuit__caption {
    order: 1;
  }

  .circuit__nodes {
    order: 2;
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: var(--flow-gap);
    padding-block: 0.25rem;
  }

  .circuit__run {
    order: 3;
    align-self: flex-start;
  }

  .circuit__caption-kind {
    font-size: 0.68rem;
  }

  .circuit__caption-title {
    font-size: 1.4rem;
  }

  .circuit__caption-text {
    font-size: 0.85rem;
  }

  .circuit__node {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
    padding: 0.75rem 0.9rem;
  }

  .circuit__node-kind {
    font-size: 0.62rem;
  }

  .circuit__node-label {
    font-size: 0.92rem;
  }

  .circuit__node:hover,
  .circuit__node:focus-visible,
  .circuit__node.is-running {
    transform: translateY(-3px);
  }

  .circuit__node[data-node="trigger"],
  .circuit__node[data-node="validate"],
  .circuit__node[data-node="condition"] {
    grid-column: 1 / -1;
  }

  .circuit__node[data-node="trigger"] {
    grid-row: 1;
  }
  .circuit__node[data-node="validate"] {
    grid-row: 2;
  }
  .circuit__node[data-node="condition"] {
    grid-row: 3;
  }
  .circuit__node[data-node="agent"] {
    grid-column: 1;
    grid-row: 4;
  }
  .circuit__node[data-node="crm"] {
    grid-column: 2;
    grid-row: 4;
  }
  .circuit__node[data-node="notify"] {
    grid-column: 1;
    grid-row: 5;
  }
  .circuit__node[data-node="archive"] {
    grid-column: 2;
    grid-row: 5;
  }

  /* conexiones verticales entre filas */
  .circuit__node[data-node="trigger"]::after,
  .circuit__node[data-node="validate"]::after,
  .circuit__node[data-node="agent"]::after,
  .circuit__node[data-node="crm"]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: var(--flow-gap);
    margin-left: -1px;
    background: var(--circuit-line);
    pointer-events: none;
  }

  /* la condición se abre en "T": tallo, barra entre los centros de las dos
     columnas y dos bajadas (las columnas miden la mitad cada una, así que sus
     centros están al 25 % y al 75 %) */
  .circuit__node[data-node="condition"]::after {
    content: "";
    position: absolute;
    top: 100%;
    /* centros de columna: (ancho - hueco de 1rem) / 4 desde cada lado; -1px a
       cada lado para que las bajadas de 2px queden centradas */
    left: calc((100% - 1rem) / 4);
    right: calc((100% - 1rem) / 4);
    margin-inline: -1px;
    height: var(--flow-gap);
    pointer-events: none;
    background:
      linear-gradient(var(--circuit-line), var(--circuit-line)) 50% 0 / 2px 50% no-repeat,
      linear-gradient(var(--circuit-line), var(--circuit-line)) 0 50% / 100% 2px no-repeat,
      linear-gradient(var(--circuit-line), var(--circuit-line)) 0 50% / 2px 50% no-repeat,
      linear-gradient(var(--circuit-line), var(--circuit-line)) 100% 50% / 2px 50% no-repeat;
  }

  /* etiquetas sí / no junto a la bajada de cada rama */
  .circuit__node[data-node="agent"]::before,
  .circuit__node[data-node="crm"]::before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    height: calc(var(--flow-gap) / 2);
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    border-left: 2px solid var(--circuit-line);
    margin-left: -1px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--circuit-soft);
    pointer-events: none;
  }

  .circuit__node[data-node="agent"]::before {
    content: "sí";
  }

  .circuit__node[data-node="crm"]::before {
    content: "no";
  }
}

/* ---------- Stack ---------- */

/* ---------- Con qué trabajamos (.stackx) ---------- */

.stackx {
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  border-top: 1px solid var(--color-line);
}

.stackx__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.stackx__top .eyebrow {
  margin: 0;
}

.stackx__aside {
  margin: 0;
  color: var(--color-ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.02em;
  text-align: right;
}

.stackx__title {
  margin: clamp(1.25rem, 1rem + 1.5vw, 2.25rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4rem);
  font-size: clamp(3rem, 1rem + 7vw, 8rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.stackx__title span {
  color: var(--color-accent);
}

.stackx__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-ink);
}

.stackx__group {
  padding: 1.1rem clamp(0.75rem, 1.4vw, 1.4rem) 0 0;
}

.stackx__group + .stackx__group {
  padding-left: clamp(0.75rem, 1.4vw, 1.4rem);
  border-left: 1px solid var(--color-line-strong);
}

.stackx__label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stackx__label span {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 500;
}

.stackx__list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* cada herramienta: nombre grande y para qué la usamos; al señalarla se invierte */
.stackx__tool {
  position: relative;
  display: grid;
  gap: 0.3rem;
  margin-inline: -0.6rem;
  padding: 0.75rem 0.6rem;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-out-expo);
}

.stackx__tool b {
  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.stackx__tool span {
  color: var(--color-ink-soft);
  font-size: 0.82rem;
  line-height: 1.4;
  transition: color var(--duration-fast) ease;
}

.stackx__tag {
  position: absolute;
  top: 0.8rem;
  right: 0.6rem;
  padding: 0.25rem 0.45rem;
  background: var(--color-yellow);
  color: var(--color-ink);
  font: 600 0.58rem/1 var(--font-mono);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stackx__tool:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  transform: translateX(4px);
}

.stackx__tool:hover span {
  color: rgba(250, 249, 246, 0.7);
}

@media (max-width: 60rem) {
  .stackx__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stackx__group:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .stackx__group:nth-child(n + 3) {
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-line-strong);
  }
}

@media (max-width: 36rem) {
  .stackx__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stackx__group + .stackx__group {
    margin-top: 1.5rem;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--color-line-strong);
  }
}

/* ---------- Precios (menú de columnas común, plans.css) ---------- */

.pricing {
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem) clamp(3rem, 2rem + 4vw, 6rem);
  border-top: 1px solid var(--color-line);
}

.pricing__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.pricing__top .eyebrow {
  margin: 0;
}

.pricing__aside {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.02em;
  color: var(--color-ink-faint);
  text-align: right;
}

.pricing__title {
  margin: clamp(1.25rem, 1rem + 1.5vw, 2.25rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  font-size: clamp(3.2rem, 1rem + 8vw, 9rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.pricing__title span {
  color: var(--color-accent);
}

.pricing .plans-wrap {
  --plans-pad-x-m: var(--space-gutter);
  --plans-soft: var(--color-ink-soft);
  --plans-line: var(--color-line-strong);
  --plans-ink: var(--color-ink);
  --plans-open-bg: var(--color-ink);
  --plans-open-ink: var(--color-bg);
  --plans-num-open: var(--color-yellow);
  --plans-accent: var(--color-yellow);
  --plans-accent-ink: var(--color-ink);
  --plans-name-font: var(--font-display);
  --plans-name-weight: 700;
  --plans-name-track: -0.035em;
}

/* ---------- Cierre: "Hablemos de tu proceso." (panel negro + footer) ---------- */

.finale {
  --finale-ink: rgba(250, 249, 246, 0.6);
  --finale-line: rgba(250, 249, 246, 0.14);
  position: relative;
  overflow: hidden;
  padding-top: clamp(4rem, 3rem + 6vw, 8rem);
  background: var(--color-ink);
  color: var(--color-bg);
  /* la firma de abajo se dimensiona con el ancho de la sección (cqi) */
  container-type: inline-size;
}

/* Firma al pie, a todo el ancho y DEBAJO de los textos (antes era "nukleo" en contorno, detrás de
   los bloques, y los tapaba): "Nukleo." en su letra (Instrument Sans) y crema, con el punto en el
   color de cada apartado (--mark-c), y "richsmart" en su Fraunces itálica roja. */
.finale__mark {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  margin: 0 0 clamp(1.5rem, 3vw, 3rem);
  padding-inline: 2cqi;
  font-size: 10.6cqi;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.finale__mark-nk {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.055em;
  color: var(--color-bg);
}

.finale__mark-nk b {
  font-weight: inherit;
  color: var(--mark-c, var(--color-yellow));
}

.finale__mark-x {
  font-size: 0.45em;
  font-weight: 300;
  opacity: 0.45;
  align-self: center;
}

.finale__mark-rs {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-synthesis: none;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -0.02em;
  color: #ff4b3e;
}

.finale__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2vw, 4rem) clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

.finale__main {
  container-type: inline-size;
}

.finale__title {
  margin: 0;
  font-size: clamp(2.8rem, 13cqi, 8.5rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--color-bg);
}

.finale__title span {
  display: block;
}

.finale__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
}

.finale__lead {
  margin: 0;
  max-width: 24rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--finale-ink);
}

.finale__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-normal) ease, color var(--duration-normal) ease;
}

.finale__cta:hover {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  transform: translateY(-2px);
}

.finale__cta svg {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.finale__cta:hover svg {
  transform: translateX(3px);
}

.finale__cta:focus-visible,
.finale__chip:focus-visible,
.footer__links a:focus-visible {
  outline-color: var(--color-bg);
}

.finale__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.finale__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--finale-line);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.finale__chip::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-blue);
}

a.finale__chip:hover {
  border-color: rgba(250, 249, 246, 0.5);
  background: rgba(250, 249, 246, 0.06);
}

/* Formulario de mensaje directo (vive dentro del panel lateral .contact-panel).
   Envía por fetch (ver main.js) a data-endpoint. */
.finale__fields {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.finale__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.field label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 0;
  background: var(--color-bg-sunken);
  color: var(--color-ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-ink-faint);
}

.field input:hover,
.field textarea:hover {
  border-color: var(--color-ink-soft);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--color-accent);
  background: var(--color-bg-raised);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* solo marca error tras intentar enviar o al perder el foco con un valor */
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--color-red);
}

/* señuelo anti-bots: fuera de pantalla, no lo ve ni lo enfoca una persona */
.finale__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.finale__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.finale__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-normal) ease;
}

.finale__submit:hover:not(:disabled) {
  background: var(--color-ink);
  transform: translateY(-2px);
}

.finale__submit svg {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.finale__submit:hover:not(:disabled) svg {
  transform: translateX(3px);
}

.finale__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.finale__status {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

.finale__status[data-kind="error"] {
  color: var(--color-red);
}

.finale__legal {
  margin: 0;
  font-size: 0.7rem;
  color: var(--color-ink-faint);
}

.finale__sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 16rem;
  justify-content: center;
}

.finale__sent:focus {
  outline: none;
}

.finale__sent-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.finale__sent-title {
  margin: 0;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.finale__sent-text {
  margin: 0;
  max-width: 26rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.finale__again {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--color-line-strong);
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.finale__again:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Panel lateral de contacto: <dialog> modal que se desliza desde la derecha. Se
   abre con cualquier [data-open-contact]; se cierra con la X, Escape o pulsando
   fuera (ver main.js). Es del color del papel, como el resto de tarjetas. */
.contact-panel {
  inset: 0 0 0 auto;
  width: min(36rem, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-ink);
}

.contact-panel[open] {
  animation: contact-panel-in 420ms var(--ease-out-expo) both;
}

.contact-panel[open]::backdrop {
  background: rgba(20, 20, 15, 0.62);
  backdrop-filter: blur(3px);
  animation: contact-fade-in 320ms ease both;
}

.contact-panel.is-closing {
  animation: contact-panel-out 280ms ease-in both;
}

.contact-panel.is-closing::backdrop {
  animation: contact-fade-out 280ms ease both;
}

@keyframes contact-panel-in {
  from {
    transform: translateX(100%);
  }
}

@keyframes contact-panel-out {
  to {
    transform: translateX(100%);
  }
}

@keyframes contact-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes contact-fade-out {
  to {
    opacity: 0;
  }
}

.contact-panel__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  overflow-y: auto;
}

.contact-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.contact-panel__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.contact-panel__close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-out-expo);
}

.contact-panel__close:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  transform: rotate(90deg);
}

.contact-panel__title {
  margin: 0.5rem 0 0;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.contact-panel__title span {
  display: block;
  color: var(--color-accent);
}

.contact-panel__lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

/* firma al pie de la ventana */
.contact-panel__sig {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  margin: auto 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-size: 1.35rem;
  line-height: 1;
}

.contact-panel__sig-nk {
  font-weight: 700;
  letter-spacing: -0.04em;
}

.contact-panel__sig-nk b {
  color: var(--color-accent);
}

.contact-panel__sig > span:nth-child(2) {
  font-size: 0.7em;
  opacity: 0.45;
}

.contact-panel__sig-rs {
  color: #ff4b3e;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-synthesis: none;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* La ventana, vestida del apartado desde el que se abre (data-theme, main.js): se redefinen los
   tokens dentro de ella, así campos, botón y textos cambian solos. Automatizaciones = la base. */
.contact-panel[data-theme="web"] {
  --color-bg: #f4f1e8;
  --color-bg-sunken: #ebe6d6;
  --color-bg-raised: #fbf9f3;
  --color-ink: #231aab;
  --color-ink-soft: rgba(35, 26, 171, 0.72);
  --color-ink-faint: rgba(35, 26, 171, 0.45);
  --color-line: rgba(35, 26, 171, 0.18);
  --color-line-strong: rgba(35, 26, 171, 0.3);
  --color-accent: #ff4b3e;
  --color-accent-fg: #f4f1e8;
}

.contact-panel[data-theme="web"] .contact-panel__title {
  font-family: var(--wd-font-chunk, var(--font-display));
  font-variation-settings: "wdth" 66;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
}

.contact-panel[data-theme="nfc"] {
  --color-bg: #ffffff;
  --color-bg-sunken: #f2f2ef;
  --color-bg-raised: #ffffff;
  --color-ink: #111111;
  --color-ink-soft: rgba(17, 17, 17, 0.62);
  --color-ink-faint: rgba(17, 17, 17, 0.4);
  --color-line: rgba(17, 17, 17, 0.1);
  --color-line-strong: rgba(17, 17, 17, 0.2);
  --color-accent: #2346ff;
  --color-accent-fg: #ffffff;
}

.contact-panel[data-theme="nfc"] .contact-panel__title {
  font-family: "Inter Tight", var(--font-display);
  font-weight: 600;
  letter-spacing: -0.05em;
}

.contact-panel[data-theme="social"] {
  --color-bg: #fff0f6;
  --color-bg-sunken: #ffe2ee;
  --color-bg-raised: #fff7fb;
  --color-ink: #1d0812;
  --color-ink-soft: rgba(29, 8, 18, 0.64);
  --color-ink-faint: rgba(29, 8, 18, 0.4);
  --color-line: rgba(214, 20, 107, 0.18);
  --color-line-strong: rgba(214, 20, 107, 0.32);
  --color-accent: #ff2e88;
  --color-accent-fg: #ffffff;
}

.finale__blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1.5rem + 1.5vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}

.finale__block h3 {
  margin: 0 0 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.finale__block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--finale-ink);
}

/* ---------- Footer (continúa el panel negro) ---------- */

.footer {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* El mismo final en los paneles de la puerta (Diseño web, Chips NFC, Redes sociales): lleva su
   propio pie dentro y el punto de "Nukleo." en el color de cada apartado. */
.finale--wd,
.finale--nfc,
.finale--soc {
  font-family: var(--font-display);
  text-align: left;
}

/* en la escena de Diseño web la ventana 1 se queda fija (sticky) detrás de todo: el final va por
   encima, como las demás secciones (.wd__sec, z-index 2) */
.finale--wd {
  --mark-c: #dfc94d;
  z-index: 3;
}

.finale--nfc {
  --mark-c: #2346ff;
}

.finale--soc {
  --mark-c: #ff2e88;
}

/* Cada final, integrado en SU apartado (el usuario: "has puesto todas negras y el corte queda
   mal"): el fondo continúa el de la sección de encima y usa su letra y sus colores.
   --fin-* los leen los textos, el botón, los chips, la firma y el pie. */
.finale--wd,
.finale--nfc,
.finale--soc {
  --finale-ink: var(--fin-soft);
  --finale-line: var(--fin-line);
  background: var(--fin-bg);
  color: var(--fin-fg);
}

.finale--wd .finale__title,
.finale--nfc .finale__title,
.finale--soc .finale__title,
.finale--wd .finale__mark-nk,
.finale--nfc .finale__mark-nk,
.finale--soc .finale__mark-nk,
.finale--wd .footer__brand strong,
.finale--nfc .footer__brand strong,
.finale--soc .footer__brand strong {
  color: var(--fin-fg);
}

.finale--wd .finale__title span,
.finale--nfc .finale__title span,
.finale--soc .finale__title span {
  color: var(--fin-accent);
}

.finale--wd .finale__cta,
.finale--nfc .finale__cta,
.finale--soc .finale__cta {
  background: var(--fin-cta-bg);
  color: var(--fin-cta-fg);
}

.finale--wd .finale__cta:hover,
.finale--nfc .finale__cta:hover,
.finale--soc .finale__cta:hover {
  background: var(--fin-cta-hover);
  color: var(--fin-cta-hover-fg);
}

.finale--wd :focus-visible,
.finale--nfc :focus-visible,
.finale--soc :focus-visible {
  outline-color: currentColor;
}

.finale--wd .finale__chip::before,
.finale--nfc .finale__chip::before,
.finale--soc .finale__chip::before {
  background: var(--mark-c);
}

.finale--wd .finale__chip:hover,
.finale--nfc .finale__chip:hover,
.finale--soc .finale__chip:hover {
  border-color: currentColor;
  background: transparent;
}

.finale--wd .footer__frame,
.finale--nfc .footer__frame,
.finale--soc .footer__frame {
  border-top-color: var(--fin-line);
}

.finale--wd .footer__brand,
.finale--nfc .footer__brand,
.finale--soc .footer__brand,
.finale--wd .footer__legal,
.finale--nfc .footer__legal,
.finale--soc .footer__legal {
  color: var(--fin-soft);
}

/* Diseño web: sigue al azul noche de "04 Hablemos" (su borde de abajo ya termina en #0f0b4a);
   título en la letra maciza de la escena, en mayúsculas, con la palabra clave en rojo */
.finale--wd {
  --fin-bg: #0f0b4a;
  --fin-fg: #f4f1e8;
  --fin-soft: rgba(244, 241, 232, 0.68);
  --fin-line: rgba(244, 241, 232, 0.18);
  --fin-accent: #ff4b3e;
  --fin-cta-bg: #f4f1e8;
  --fin-cta-fg: #0f0b4a;
  --fin-cta-hover: #dfc94d;
  --fin-cta-hover-fg: #0f0b4a;
}

.finale--wd .finale__title {
  font-family: var(--wd-font-chunk, var(--font-display));
  font-variation-settings: "wdth" 66;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Chips NFC: la franja gris clara del panel, su grotesca apretada y el azul cobalto */
.finale--nfc {
  --fin-bg: #f2f2ef;
  --fin-fg: #111111;
  --fin-soft: rgba(17, 17, 17, 0.62);
  --fin-line: rgba(17, 17, 17, 0.12);
  --fin-accent: rgba(17, 17, 17, 0.4);
  --fin-cta-bg: #2346ff;
  --fin-cta-fg: #ffffff;
  --fin-cta-hover: #111111;
  --fin-cta-hover-fg: #ffffff;
}

.finale--nfc .finale__title {
  font-family: var(--nfc-head, var(--font-display));
  font-weight: 600;
  letter-spacing: -0.05em;
}

/* Redes sociales: del rosa pálido de la sección de encima al rosa, con la palabra clave en rosa */
.finale--soc {
  --fin-bg: linear-gradient(180deg, #fff0f6, #ffd3e6 40%);
  --fin-fg: #1d0812;
  --fin-soft: rgba(29, 8, 18, 0.64);
  --fin-line: rgba(214, 20, 107, 0.25);
  --fin-accent: #ff2e88;
  --fin-cta-bg: #ff2e88;
  --fin-cta-fg: #ffffff;
  --fin-cta-hover: #1d0812;
  --fin-cta-hover-fg: #ffffff;
}

.finale__foot {
  position: relative;
  z-index: 1;
}

.footer__frame {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-block: clamp(1.75rem, 1.4rem + 1vw, 2.5rem) 1.5rem;
  border-top: 1px solid rgba(250, 249, 246, 0.14);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.footer__brand {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-size: 0.78rem;
  color: rgba(250, 249, 246, 0.55);
}

.footer__brand strong {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-bg);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  font-size: 0.78rem;
  font-weight: 600;
}

.footer__links a {
  transition: color var(--duration-fast) ease;
}

.footer__links a:hover {
  color: var(--color-blue);
}

.footer__legal {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(250, 249, 246, 0.4);
}

@media (max-width: 52rem) {
  .finale__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

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

@media (max-width: 36rem) {
  .finale__blocks {
    grid-template-columns: 1fr;
  }

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

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
  .nav__links {
    display: none;
  }
}

@media (max-width: 720px) {
  .nav__links {
    gap: 0.9rem;
  }

  .hero {
    min-height: auto;
  }

  .hero__pin {
    position: static;
    min-height: auto;
    padding-block: clamp(6rem, 20vw, 8rem) var(--space-section);
  }

  .hero__scroll {
    display: none;
  }

}