/* ============================================================
 * sections.css — Estilos específicos por sección del onepage.
 * ============================================================ */

/* ============ PRELOADER ============ */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: var(--z-preloader);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 600ms var(--ease-out), visibility 600ms;
}
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 420px;
  width: 90vw;
}
.preloader__logo { margin-bottom: var(--space-3); height: auto; width: 200px; }

.preloader__terminal {
  width: 100%;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--terminal-green);
  min-height: 6em;
  line-height: 1.8;
}
.preloader__line { opacity: 0; white-space: nowrap; overflow: hidden; }
.preloader__line.is-shown { opacity: 1; }

.preloader__bar {
  width: 100%;
  height: 4px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(7, 226, 254, 0.05);
}
.preloader__bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  box-shadow: var(--glow-accent-sm);
  transition: width 100ms linear;
}
.preloader__percent {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
}

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
  padding-block: var(--space-3);
  transition: background var(--duration-medium) var(--ease-out),
              border-color var(--duration-medium) var(--ease-out);
  border-bottom: 1px solid transparent;
  isolation: isolate;
}
.nav.is-scrolled {
  background: rgba(10, 22, 24, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--accent-soft);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--duration-medium) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.nav__logo:hover {
  background: rgba(7, 226, 254, 0.06);
  transform: translateY(-1px);
}
.nav__logo img {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(7, 226, 254, 0.25));
  transition: filter var(--duration-medium) var(--ease-out);
}
.nav__logo:hover img {
  filter: drop-shadow(0 0 18px rgba(7, 226, 254, 0.55));
}
@media (max-width: 767px) { .nav__logo img { height: 44px; } }

.nav__cursor {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  text-shadow: 0 0 12px var(--accent-glow);
  animation: blink 1s step-end infinite;
}

.nav__menu {
  display: flex;
  gap: var(--space-6);
}
@media (max-width: 1023px) {
  .nav__menu { display: none; }
}
.nav__link {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--text-secondary);
  position: relative;
  padding: var(--space-1) 0;
  transition: color var(--duration-fast);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-out);
}
.nav__link:hover { color: var(--accent); }
.nav__link:hover::after { transform: scaleX(1); }
/* Scroll-spy: sección visible → el link correspondiente "se enciende" con
   color acento, underline completa y un halo sutil. */
.nav__link.is-active { color: var(--accent); }
.nav__link.is-active::after { transform: scaleX(1); box-shadow: 0 0 6px var(--accent-glow); }
.nav__link.is-active .mono-comment { text-shadow: 0 0 8px var(--accent-glow); }
.nav-mobile__link.is-active {
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
}

/* ============ MENÚ HAMBURGUESA — estilo terminal/HUD =============
   DECISION: mini-consola con borde cian, scan-line que barre por detrás,
   LED parpadeante en esquina y barras con anchos variables (como niveles
   de indentación de código) que pulsan en secuencia. En estado abierto
   las barras rotan formando la X clásica y se desactivan las animaciones. */
.nav__burger {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 10px;
  gap: 4px;
  background: rgba(7, 226, 254, 0.05);
  border: 1px solid rgba(7, 226, 254, 0.4);
  border-radius: 8px;
  box-shadow: 0 0 0 rgba(7, 226, 254, 0);
  overflow: hidden;
  transition: border-color var(--duration-medium) var(--ease-out),
              box-shadow var(--duration-medium) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              background var(--duration-medium) var(--ease-out);
}
/* Scan line sweep (feel "alive") */
.nav__burger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(7, 226, 254, 0.18) 50%,
    transparent 100%);
  transform: translateX(-100%);
  animation: burgerScan 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes burgerScan {
  0%, 70% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
/* LED indicator — grita "pulsa aquí" */
.nav__burger::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 2px var(--accent);
  animation: burgerLED 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes burgerLED {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}
.nav__burger:hover,
.nav__burger:focus-visible {
  border-color: var(--accent);
  background: rgba(7, 226, 254, 0.1);
  box-shadow: 0 0 18px rgba(7, 226, 254, 0.45),
              inset 0 0 10px rgba(7, 226, 254, 0.12);
  transform: translateY(-1px);
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  box-shadow: 0 0 6px var(--accent-glow);
  transform-origin: left center;
  transition: transform var(--duration-medium), opacity var(--duration-fast), width var(--duration-medium);
}
/* Anchos variables tipo indentación de código */
.nav__burger span:nth-child(1) { width: 22px; animation: burgerPulse 2.6s ease-in-out 0s    infinite; }
.nav__burger span:nth-child(2) { width: 14px; animation: burgerPulse 2.6s ease-in-out 0.3s  infinite; }
.nav__burger span:nth-child(3) { width: 18px; animation: burgerPulse 2.6s ease-in-out 0.6s  infinite; }
@keyframes burgerPulse {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.45; }
}
/* Abierto: X clásica, sin animaciones ni LED */
.nav__burger[aria-expanded="true"] {
  background: rgba(7, 226, 254, 0.1);
  border-color: var(--accent);
}
.nav__burger[aria-expanded="true"]::before,
.nav__burger[aria-expanded="true"]::after { display: none; }
.nav__burger[aria-expanded="true"] span {
  width: 22px;
  animation: none;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translate(0, 6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translate(0, -6px) rotate(-45deg); }

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

/* ============ MENÚ MOBILE — nave espacial =========================
   DECISION: el panel del menú es una silueta de nave (SVG outline) que
   balancea suavemente y dispara llamas por el motor. Los links van dentro
   del cuerpo cilíndrico y las redes sociales, abajo. La X sirve para cerrar
   sin tener que volver al hamburguesa. */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 1);
  background: rgba(6, 14, 17, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: var(--space-6) var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms ease;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile.is-open { opacity: 1; }

/* Botón X cerrar */
.nav-mobile__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(7, 226, 254, 0.06);
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 0 14px rgba(7, 226, 254, 0.3);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-medium) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.nav-mobile__close:hover,
.nav-mobile__close:focus-visible {
  background: rgba(7, 226, 254, 0.14);
  transform: rotate(90deg);
  box-shadow: 0 0 22px rgba(7, 226, 254, 0.55);
}

/* Nave */
.nav-mobile__ship {
  position: relative;
  width: min(300px, 80vw);
  aspect-ratio: 1 / 2;
  max-height: 80vh;
  color: var(--accent);
  transform: translateY(40px) scale(0.92);
  opacity: 0;
  transition: transform 500ms var(--ease-out), opacity 400ms ease;
}
.nav-mobile.is-open .nav-mobile__ship {
  opacity: 1;
  animation: shipEnter 600ms var(--ease-out) forwards,
             shipRock 5s ease-in-out 600ms infinite;
}
@keyframes shipEnter {
  0%   { transform: translateY(40px) scale(0.92); }
  100% { transform: translateY(0) scale(1) rotate(-1deg); }
}
@keyframes shipRock {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-4px) rotate(1.2deg); }
}

.nav-mobile__ship-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(7, 226, 254, 0.3));
}

/* Contenido dentro de la cabina */
.nav-mobile__content {
  position: absolute;
  inset: 30% 16% 14% 16%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: space-between;
  z-index: 1;
}
.nav-mobile__menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}
.nav-mobile__link {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-primary);
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms ease,
              transform 300ms var(--ease-out),
              color var(--duration-fast);
}
.nav-mobile__link:hover { color: var(--accent); }
.nav-mobile.is-open .nav-mobile__link { opacity: 1; transform: translateY(0); }
.nav-mobile.is-open .nav-mobile__link:nth-child(1) { transition-delay: 400ms; }
.nav-mobile.is-open .nav-mobile__link:nth-child(2) { transition-delay: 460ms; }
.nav-mobile.is-open .nav-mobile__link:nth-child(3) { transition-delay: 520ms; }
.nav-mobile.is-open .nav-mobile__link:nth-child(4) { transition-delay: 580ms; }
.nav-mobile.is-open .nav-mobile__link:nth-child(5) { transition-delay: 640ms; }
.nav-mobile.is-open .nav-mobile__link:nth-child(6) { transition-delay: 700ms; }

/* Redes sociales en la cabina */
.nav-mobile__socials {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 400ms ease 800ms;
}
.nav-mobile.is-open .nav-mobile__socials { opacity: 1; }
.nav-mobile__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: color var(--duration-medium) var(--ease-out),
              border-color var(--duration-medium) var(--ease-out),
              box-shadow var(--duration-medium) var(--ease-out),
              transform var(--duration-medium) var(--ease-out);
}
.nav-mobile__socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow-accent-sm);
  transform: translateY(-2px);
}

/* Llamas del motor */
.nav-mobile__flames {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  align-items: flex-start;
  pointer-events: none;
  z-index: 0;
}
.nav-mobile__flame {
  width: 10px;
  border-radius: 50% 50% 45% 45% / 35% 35% 70% 70%;
  background: linear-gradient(to bottom, #FFE27A 0%, #FF8000 45%, #FF3B5C 80%, transparent 100%);
  box-shadow: 0 0 12px rgba(255, 128, 0, 0.55);
  transform-origin: top center;
  animation: flameFlicker 0.28s ease-in-out infinite alternate;
  opacity: 0;
}
.nav-mobile.is-open .nav-mobile__flame { opacity: 0.95; transition: opacity 300ms 650ms; }
.nav-mobile__flame--1 { height: 30px; animation-delay: 0s;   }
.nav-mobile__flame--2 { height: 46px; animation-delay: 0.08s; }
.nav-mobile__flame--3 { height: 30px; animation-delay: 0.16s; }
@keyframes flameFlicker {
  0%   { transform: scaleY(0.85) scaleX(1);    }
  100% { transform: scaleY(1.15) scaleX(0.88); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-mobile.is-open .nav-mobile__ship { animation: none !important; transform: none; }
  .nav-mobile__flame { animation: none !important; }
}

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  padding-block: var(--section-padding) var(--space-8);
  display: flex;
  align-items: center;
  position: relative;
}
.hero__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 1023px) {
  .hero { min-height: auto; padding-block: var(--space-8); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); text-align: left; }
}

.hero__tag {
  display: inline-block;
  margin-bottom: var(--space-4);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  /* DECISION: más chico que el original — ahora el protagonismo lo lleva la misión rotando */
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

/* -------- Misión con palabra rotativa -------- */
.hero__mission {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.hero__mission-prefix,
.hero__mission-suffix { display: inline; }

.rotator {
  position: relative;
  display: inline-grid;
  grid-template-areas: "stack";
  vertical-align: baseline;
  min-width: 6ch;
  margin-inline: 0.25ch;
}
.rotator__word {
  grid-area: stack;
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent-glow), 0 0 48px rgba(7, 226, 254, 0.25);
  opacity: 0;
  transform: translateY(0.4em);
  animation: rotateWord 9s infinite;
  will-change: transform, opacity, filter;
  white-space: nowrap;
}
.rotator__word:nth-child(1) { animation-delay: 0s; }
.rotator__word:nth-child(2) { animation-delay: 3s; }
.rotator__word:nth-child(3) { animation-delay: 6s; }

@keyframes rotateWord {
  0%              { opacity: 0; transform: translateY(0.4em); filter: blur(8px); }
  4%, 30%         { opacity: 1; transform: translateY(0);     filter: blur(0); }
  34%, 100%       { opacity: 0; transform: translateY(-0.4em); filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .rotator__word { animation: rotateWordReduced 9s infinite; }
  @keyframes rotateWordReduced {
    0%, 30%    { opacity: 1; }
    34%, 100%  { opacity: 0; }
  }
  .rotator__word:nth-child(1) { animation-delay: 0s; }
  .rotator__word:nth-child(2) { animation-delay: 3s; }
  .rotator__word:nth-child(3) { animation-delay: 6s; }
}

.hero__text {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 54ch;
}

.hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.hero__stats {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.hero__stats-sep { color: var(--accent); }

/* Marquee fino bajo los stats — integrado, apenas visible hasta hover */
.hero__clients {
  margin-top: var(--space-3);
  max-width: 460px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.hero__clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding-block: 4px;
  /* animation inyectada por JS (marquee-seamless) tras medir las imágenes */
}
/* Mismo motivo que .clients-marquee__track: margin-right por item para
   que translate(-50%) haga un bucle perfecto sin huecos. */
.hero__clients-track img {
  height: 28px;
  width: auto;
  margin-right: var(--space-6);
  flex-shrink: 0;
  filter: grayscale(1) brightness(0.85);
  opacity: 0.55;
  transition: filter var(--duration-medium) var(--ease-out),
              opacity var(--duration-medium) var(--ease-out);
}
.hero__clients-track img:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* Astronauta + órbitas */
.hero__right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.hero__astronaut-wrap {
  position: relative;
  width: 320px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__astronaut {
  filter: drop-shadow(0 0 30px rgba(7, 226, 254, 0.35));
  animation: astroGlowPulse 4s ease-in-out infinite;
}
.orbit {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: var(--glow-accent-sm);
  top: 50%;
  left: 50%;
}
/* ============ BOCADILLO DE HABLA DEL ASTRONAUTA ============ */
.astro-speech {
  position: absolute;
  top: 8%;
  left: 62%;
  z-index: 3;
  pointer-events: none;
  animation: speechFloat 3.5s ease-in-out infinite;
}
@keyframes speechFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1deg); }
}
.astro-speech__box {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 170px;
  max-width: 230px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--accent);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(7, 226, 254, 0.25);
  white-space: normal;
  word-break: break-word;
}
/* Rabito del bocadillo apuntando a la boca/visor del astronauta */
.astro-speech__box::before,
.astro-speech__box::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
}
.astro-speech__box::before {
  /* borde exterior cian */
  left: -11px;
  bottom: 8px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 11px solid var(--accent);
}
.astro-speech__box::after {
  /* relleno interior */
  left: -9px;
  bottom: 10px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 9px solid var(--bg-secondary);
}
.astro-speech__text {
  display: inline;
  color: var(--text-primary);
}
.astro-speech__cursor {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  margin-left: 2px;
  animation: blink 0.9s step-end infinite;
}
@media (max-width: 1023px) {
  .astro-speech {
    top: auto;
    bottom: calc(100% + 8px);
    left: 50%;
    transform-origin: center bottom;
    animation: speechFloatTop 3.5s ease-in-out infinite;
  }
  @keyframes speechFloatTop {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1deg); }
    50%      { transform: translateX(-50%) translateY(-4px) rotate(1deg); }
  }
  /* DECISION: el bocadillo puede sobresalir del wrap del astronauta (240px) porque
     la frase necesita aire; lo limitamos al viewport menos un gutter para que
     nunca quede cortado en pantallas estrechas. */
  .astro-speech__box {
    min-width: 140px;
    max-width: min(300px, calc(100vw - 32px));
    width: max-content;
    font-size: 0.72rem;
  }
  .astro-speech__box::before { /* rabito hacia abajo en mobile */
    left: 50%; bottom: -11px; top: auto;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 11px solid var(--accent);
    border-bottom: none;
    transform: translateX(-50%);
  }
  .astro-speech__box::after {
    left: 50%; bottom: -9px; top: auto;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--bg-secondary);
    border-bottom: none;
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .astro-speech { animation: none !important; }
  .astro-speech__cursor { animation: none !important; opacity: 1; }
}

/* --- Variante para el CTA flotante: mismo comportamiento que el bocadillo del
   hero (anchura dinámica, wrap limpio). Anclamos al borde derecho del botón
   para que el globo crezca sólo hacia la izquierda y nunca se salga del viewport.
   El rabito siempre apunta al casco (centro del botón). Sin animación propia:
   `.astro-cta__inner` ya flota/rota, y acumular dos rotaciones pintaba el borde
   del bocadillo "partido" al cambiar de línea durante el typewriter. */
.astro-speech--cta {
  position: absolute;
  top: auto;
  left: auto;
  right: 0;
  bottom: calc(100% - 4px);
  transform-origin: right bottom;
  transform: none;
  animation: none;
}
.astro-speech--cta .astro-speech__box {
  /* DECISION: ancho FIJO (no max-content). Anclado por la derecha, si el box
     se encogiera al envolver el texto, el borde izquierdo saltaría y se vería
     el fondo "roto" durante el typewriter. Con ancho fijo sólo crece la altura. */
  width: min(220px, calc(100vw - 32px));
  min-width: 0;
  max-width: none;
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 8px 12px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: center;
}
.astro-speech--cta .astro-speech__box::before,
.astro-speech--cta .astro-speech__box::after {
  /* Rabito hacia abajo apuntando al casco (55px desde el borde derecho = centro del botón de 110px) */
  left: auto;
  right: 48px;
  top: auto;
  bottom: -11px;
  border-top: 11px solid var(--accent);
  border-bottom: none;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  transform: none;
}
.astro-speech--cta .astro-speech__box::after {
  right: 50px;
  bottom: -9px;
  border-top: 9px solid var(--bg-secondary);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

.orbit--1 { animation: orbit 12s linear infinite; --orbit-radius: 180px; width: 4px; height: 4px; }
.orbit--2 { animation: orbit 18s linear infinite reverse; --orbit-radius: 160px; animation-delay: -4s; }
.orbit--3 { animation: orbit 22s linear infinite; --orbit-radius: 220px; width: 3px; height: 3px; opacity: 0.7; animation-delay: -8s; }
.orbit--4 { animation: orbit 15s linear infinite reverse; --orbit-radius: 140px; width: 5px; height: 5px; animation-delay: -2s; }

@media (max-width: 767px) {
  .hero__astronaut-wrap { width: 240px; height: 300px; }
  .hero__astronaut { width: 200px !important; height: 250px !important; }

  /* DECISION: en mobile el astronauta va ENTRE la misión y el párrafo de
     presentación. Usamos `display: contents` en `.hero__left` para que sus hijos
     participen directamente en el flex del grid y así poder ordenarlos con `order`. */
  .hero__grid { display: flex; flex-direction: column; }
  .hero__left { display: contents; }
  .hero__tag     { order: 1; }
  .hero__title   { order: 2; }
  .hero__mission { order: 3; }
  .hero__right   { order: 4; min-height: auto; }
  .hero__text    { order: 5; }
  .hero__ctas    { order: 6; }
  .hero__stats   { order: 7; }
  .hero__clients { order: 8; }

  .orbit--1 { --orbit-radius: 130px; }
  .orbit--2 { --orbit-radius: 115px; }
  .orbit--3 { --orbit-radius: 150px; }
  .orbit--4 { --orbit-radius: 100px; }
}

/* ============ TRIPLE MARQUEE ============ */
.marquee {
  overflow: hidden;
  padding-block: var(--space-6);
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.marquee__band {
  overflow: hidden;
  position: relative;
  /* Máscara horizontal para que los bordes se desvanezcan en vez de cortar */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  /* El transform lo controla JS — nada de animation CSS aquí */
}
.marquee__track span {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(7, 226, 254, 0.55);
  text-transform: lowercase;
  padding-inline: 0.15em;
}
.marquee__sep {
  display: inline-block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.45;
  padding-inline: 0.35em;
  transform: translateY(-0.1em);
}
.marquee__band--clients .marquee__track span {
  /* Clientes: mismo stroke + relleno cian traslúcido para que destaquen */
  color: rgba(7, 226, 254, 0.14);
  -webkit-text-stroke: 1px rgba(7, 226, 254, 0.7);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
}
.marquee__band--clients .marquee__sep {
  opacity: 0.8;
  font-size: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(-0.15em);
}

/* ============ GRADIENTES ENTRE SECCIONES ============
 * Uniendo bloques con degradados radiales/lineales suaves.
 * Todos usan colores semitransparentes para no tapar los canvas de fondo.
 */
.hero {
  background:
    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(7, 226, 254, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 800px 400px at 20% 100%, rgba(7, 226, 254, 0.05) 0%, transparent 70%);
}
.section--about {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(14, 30, 33, 0.35) 30%,
    rgba(14, 30, 33, 0.35) 70%,
    transparent 100%
  );
}
.section--services {
  background:
    radial-gradient(ellipse 1000px 500px at 80% 0%, rgba(7, 226, 254, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(14, 30, 33, 0.25) 50%, transparent 100%);
}
.section--pricing {
  position: relative;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(14, 30, 33, 0.4) 40%,
    rgba(14, 30, 33, 0.4) 60%,
    transparent 100%
  );
}
.section--pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 900px 500px at 50% 20%, rgba(7, 226, 254, 0.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.section--pricing > * { position: relative; z-index: 1; }
.section--projects {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(14, 30, 33, 0.3) 50%,
    transparent 100%
  );
}
.section--clients {
  background: linear-gradient(180deg, transparent 0%, rgba(7, 226, 254, 0.03) 50%, transparent 100%);
}
.section--contact {
  background:
    radial-gradient(ellipse 800px 500px at 70% 50%, rgba(7, 226, 254, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(14, 30, 33, 0.4) 100%);
}
.section--faq {
  background: linear-gradient(180deg, rgba(14, 30, 33, 0.4) 0%, transparent 100%);
}
.footer {
  background: linear-gradient(180deg, transparent 0%, rgba(14, 30, 33, 0.85) 30%, rgba(10, 22, 24, 0.95) 100%);
  border-top: 1px solid var(--accent-soft);
}

/* ============ SERVICES ============ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1023px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }

/* DECISION: en mobile pasamos a carrusel horizontal con scroll-snap. Cada card
   ocupa ~82% del viewport para que asome la siguiente (~18%) y el usuario vea
   que hay más contenido que deslizar. Edge-to-edge: el grid se expande fuera
   del container con margin negativo y compensa con padding, para que el primer
   card arranque alineado con el resto del contenido de la sección. */
@media (max-width: 640px) {
  .services-grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-padding);
    padding-inline: var(--container-padding);
    padding-block: var(--space-2) var(--space-4);
    margin-inline: calc(var(--container-padding) * -1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .services-grid::-webkit-scrollbar { display: none; }
  .services-grid .service-card {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }
  /* En carrusel horizontal, los cards fuera de pantalla no disparan el reveal por
     IntersectionObserver (el observer mira el viewport, no el contenedor scroll).
     Forzamos su visibilidad para que al deslizar no aparezcan en blanco. */
  .services-grid .service-card[data-reveal] {
    opacity: 1;
    transform: none;
  }
}

.service-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: all var(--duration-medium) var(--ease-out);
  overflow: hidden;
}
.service-card:hover {
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.service-card__number {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  color: var(--text-muted);
  font-size: 0.85rem;
}
.service-card__icon {
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.service-card h3 {
  font-size: 1.35rem;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}
.service-card p { color: var(--text-secondary); }
.service-card__line {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  box-shadow: var(--glow-accent-sm);
  transition: width var(--duration-slow) var(--ease-out);
}
.service-card:hover .service-card__line { width: 100%; }
.service-card:hover .service-card__icon { animation: iconBounce 0.5s var(--ease-back); }

/* ============ PRICING — tabs + panels =============================
   DECISION: los planes se agrupan en 3 misiones (web / app / panel de gestión).
   Al cambiar de tab el panel se cierra con un efecto tipo CRT (scaleY→0 + flash
   de brillo) y el nuevo se abre igual. Un único panel visible a la vez. */
.plans-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.plans-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-secondary);
  background: rgba(7, 226, 254, 0.03);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  overflow: hidden;
  transition: color var(--duration-fast),
              border-color var(--duration-fast),
              background var(--duration-fast),
              transform var(--duration-fast),
              box-shadow var(--duration-medium);
}
.plans-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(7, 226, 254, 0.15), transparent);
  transform: translateX(-100%);
  transition: transform 700ms ease;
  pointer-events: none;
}
.plans-tab:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.plans-tab:hover::before { transform: translateX(100%); }
.plans-tab.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(7, 226, 254, 0.1);
  box-shadow: 0 0 14px rgba(7, 226, 254, 0.28),
              inset 0 0 10px rgba(7, 226, 254, 0.08);
}
.plans-tab svg { flex-shrink: 0; }

/* Panels — estado cerrado por defecto, CRT open al activar */
.plans-panel {
  opacity: 0;
  transform: scaleY(0.02);
  transform-origin: center center;
  filter: brightness(2) blur(1px);
  transition: opacity 300ms ease,
              transform 420ms cubic-bezier(.2, .7, .3, 1),
              filter 320ms ease;
  pointer-events: none;
}
.plans-panel[hidden] { display: none; }
.plans-panel.is-active {
  opacity: 1;
  transform: scaleY(1);
  filter: brightness(1) blur(0);
  pointer-events: auto;
}

/* Cards del panel activo entran con un pequeño escalonado — más vida */
.plans-panel.is-active .plan-card {
  animation: planCardIn 420ms var(--ease-out) backwards;
}
.plans-panel.is-active .plan-card:nth-child(1) { animation-delay: 180ms; }
.plans-panel.is-active .plan-card:nth-child(2) { animation-delay: 260ms; }
.plans-panel.is-active .plan-card:nth-child(3) { animation-delay: 340ms; }
@keyframes planCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
/* Panel con 1 solo plan (app / admin) — card centrado y con ancho acotado */
.pricing-grid--single {
  grid-template-columns: minmax(0, 400px);
  justify-content: center;
}
@media (max-width: 1023px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid--single { grid-template-columns: minmax(0, 400px); }
}
@media (max-width: 640px) {
  .pricing-grid,
  .pricing-grid--single { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .plans-panel,
  .plans-panel.is-active .plan-card {
    transition: none !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}

.plan-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all var(--duration-medium) var(--ease-out);
  text-align: left;
}
.plan-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-card-hover);
}
.plan-card--popular {
  border-color: var(--accent);
  box-shadow: var(--glow-accent-sm);
}
.plan-card__popular {
  position: absolute;
  top: -12px;
  right: var(--space-5);
  background: var(--accent);
  color: var(--bg-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  box-shadow: var(--glow-accent-md);
}
.plan-card__badge {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
}
.plan-card__name {
  font-size: 1.5rem;
  color: var(--text-primary);
}
.plan-card__pitch {
  color: var(--text-secondary);
  font-size: 0.9rem;
  min-height: 2.5em;
}
.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--accent);
  font-family: var(--font-display);
  margin-top: var(--space-2);
}
.plan-card__currency { font-size: 1.2rem; font-weight: 500; }
.plan-card__amount { font-size: 3rem; font-weight: 700; line-height: 1; }
.plan-card:hover .plan-card__amount { animation: pricePulse 0.6s var(--ease-out); }
.plan-card__from {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  margin-top: calc(-1 * var(--space-2));
}
.plan-card__sep {
  color: var(--accent-soft);
  font-family: var(--font-display);
  font-size: 0.75rem;
}
.plan-card__features { display: flex; flex-direction: column; gap: var(--space-2); }
.plan-card__features li {
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding-left: var(--space-5);
  position: relative;
}
.plan-card__features li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
}
.plan-card__note {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.plan-card__cta { margin-top: auto; justify-content: flex-start; }

/* ============ PROJECTS ============ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1023px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }

/* MOBILE: carrusel horizontal con snap + peek del siguiente proyecto.
   DECISION: sacamos el scroll del container padre usando padding y margin
   negativo inline, para que la card activa quede centrada y se vea un
   ~12-14% del siguiente sin que el peek se "salga" por el lado. */
@media (max-width: 640px) {
  .projects-grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-block: var(--space-2) var(--space-4);
    padding-inline: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
    scroll-padding-inline: var(--space-4);
    scrollbar-width: none;
  }
  .projects-grid::-webkit-scrollbar { display: none; }
  .projects-grid .project-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.project-card__media {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}
/* El <video> muestra siempre su atributo `poster` (1er frame extraído de
   cada clip) hasta que arranca la reproducción. En desktop, la animación
   se dispara al hover (JS); en táctil, al entrar en viewport. No hay
   <img> separada: el poster del propio video hace esa función y evita
   el parpadeo negro con etiqueta "Captura de X" del placeholder roto. */
.project-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  background: var(--bg-secondary);
  filter: brightness(0.92) saturate(0.95);
  transition: filter var(--duration-medium) var(--ease-out);
}
.project-card:hover .project-card__video {
  filter: brightness(1.02) saturate(1.05);
}
.project-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 24, 0) 40%, rgba(10, 22, 24, 0.6) 100%);
  pointer-events: none;
  transition: opacity var(--duration-medium);
  z-index: 2;
}
/* CTA fino: etiqueta monoespaciada en la esquina inferior derecha de la
   pantallita, con backdrop blur sutil. Aparece al hover sin tapar el
   video. En táctil se queda siempre visible para poder pulsar. */
.project-card__visit {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: 3px 8px;
  background: rgba(10, 22, 24, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
  font-size: 0.66rem;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-medium) var(--ease-out),
              transform var(--duration-medium) var(--ease-out),
              border-color var(--duration-fast);
  text-decoration: none;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.project-card:hover .project-card__visit {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border-color: var(--accent);
}
@media (hover: none), (pointer: coarse) {
  .project-card__visit {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
.project-card__label {
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: var(--tracking-wide);
}
.project-card h3 { color: var(--text-primary); font-size: 1.25rem; }
.project-card p { color: var(--text-secondary); font-size: 0.9rem; }
.project-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ============ CLIENTS ============ */
.section--clients { padding-block: var(--space-8); }
.section-title--sm { font-size: clamp(1.25rem, 2vw, 1.5rem); text-align: center; margin-bottom: var(--space-6); }
.section-title--sm .comment { color: var(--text-muted); }

.clients-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.clients-marquee__track {
  display: flex;
  align-items: center;
  padding-block: var(--space-4);
  width: max-content;
  /* animation inyectada por JS (marquee-seamless) tras medir las imágenes */
}
/* DECISION: usamos margin-right por item en vez de `gap` del track. Con `gap`,
   al duplicar los logos el punto -50% cae a la mitad del hueco entre las dos
   copias y el bucle se ve "cortado". Con margin-right, cada item mide
   width + margen y el 50% coincide exacto con el inicio del ciclo. */
.clients-marquee__track img {
  height: 52px;
  width: auto;
  margin-right: var(--space-8);
  flex-shrink: 0;
  filter: grayscale(1) brightness(0.85);
  opacity: 0.7;
  transition: all var(--duration-medium);
}
.clients-marquee__track img:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* ============ CONTACT ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 900px;
}
.faq-item {
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
  transition: border-color var(--duration-medium);
}
.faq-item[open] { border-color: var(--accent-hover); }
.faq-item summary {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  font-size: 1rem;
  position: relative;
  transition: color var(--duration-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  margin-left: auto;
  color: var(--accent);
  font-size: 1.5rem;
  transition: transform var(--duration-medium);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-prefix { color: var(--accent); }
.faq-item summary:hover { color: var(--accent); }

.faq-body {
  padding: 0 var(--space-5) var(--space-5);
  border-left: 2px solid var(--accent);
  margin-left: var(--space-5);
  color: var(--text-secondary);
}

/* ============ FOOTER ============ */
.footer {
  padding-block: var(--space-8) var(--space-6);
  margin-top: var(--space-8);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr; text-align: left; }
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-2) 0;
}
.footer__logo img {
  height: 60px;
  width: auto;
  filter: drop-shadow(0 0 16px rgba(7, 226, 254, 0.3));
  transition: filter var(--duration-medium);
}
.footer__logo:hover img {
  filter: drop-shadow(0 0 24px rgba(7, 226, 254, 0.6));
}
@media (max-width: 767px) { .footer__logo img { height: 48px; } }
.footer__tagline { color: var(--text-muted); font-size: var(--fs-small); margin-bottom: var(--space-2); }
.footer__copy { color: var(--text-secondary); font-size: 0.85rem; }

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer__links a {
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  transition: color var(--duration-fast);
}
.footer__links a:hover { color: var(--accent); }
.footer__cookie-btn {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast);
}
.footer__cookie-btn:hover { color: var(--accent); }

.footer__admin-link {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--accent-soft);
  opacity: 0.65;
}
.footer__admin-link:hover { opacity: 1; }

.footer__coords {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--accent-soft);
  letter-spacing: var(--tracking-wide);
}

/* ============ CURSOR CUSTOM ============ */
#cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 300ms;
}
#cursor.is-active { opacity: 1; }

#cursor-dot {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 80ms linear;
}
#cursor-ring {
  position: absolute;
  width: 32px; height: 32px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    transform 200ms var(--ease-out),
    width 300ms var(--ease-out),
    height 300ms var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}
#cursor.is-hover #cursor-ring {
  width: 56px; height: 56px;
  background: var(--accent-soft);
}
@media (pointer: coarse) { #cursor { display: none !important; } }

/* ============ PROCESO / CÓMO TRABAJO =============================
   DECISION: cada fase es una "ventana de terminal" distinta a las tarjetas
   de Servicios. Chrome con 3 puntitos cian + filename, cuerpo con rail
   izquierdo acentuado, esquinas HUD y status bar con barra de carga +
   porcentaje. Mantiene la voz (mono, cian, "misión") pero visualmente es
   un módulo técnico — no una card genérica. */
.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,
    rgba(7, 226, 254, 0.02) 0%,
    var(--bg-secondary) 18%,
    var(--bg-secondary) 100%);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-medium) var(--ease-out),
              transform var(--duration-medium) var(--ease-out),
              box-shadow var(--duration-medium) var(--ease-out);
}
/* Scanlines CRT — textura muy sutil que diferencia del look plano de services. */
.process-step::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(7, 226, 254, 0.025) 3px,
    rgba(7, 226, 254, 0.025) 4px);
  mix-blend-mode: screen;
  z-index: 1;
}
/* Corner brackets tipo HUD en las 4 esquinas del cuerpo. */
.process-step::after {
  content: '';
  position: absolute;
  inset: 34px 6px 26px 6px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0/10px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 0/1px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0/10px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100%/10px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100%/1px 10px no-repeat;
  opacity: 0.35;
  transition: opacity var(--duration-medium) var(--ease-out);
}
.process-step:hover {
  border-color: var(--accent-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 24px rgba(7, 226, 254, 0.18);
}
.process-step:hover::after { opacity: 0.8; }

/* CHROME — cabecera tipo ventana con 3 puntitos cian y filename shell. */
.process-step__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  background: rgba(7, 226, 254, 0.04);
  border-bottom: 1px solid var(--accent-soft);
  position: relative;
  z-index: 3;
}
.process-step__dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.process-step__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(7, 226, 254, 0.15);
  border: 1px solid rgba(7, 226, 254, 0.35);
  transition: background var(--duration-medium) var(--ease-out);
}
.process-step:hover .process-step__dots i:nth-child(1) { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.process-step:hover .process-step__dots i:nth-child(2) { background: rgba(7, 226, 254, 0.6); }
.process-step:hover .process-step__dots i:nth-child(3) { background: rgba(7, 226, 254, 0.3); }
.process-step__file {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* BODY — cuerpo con rail izquierdo cian y contenido apilado. */
.process-step__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3) calc(var(--space-4) + 4px);
  flex: 1;
}
.process-step__body::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-3);
  bottom: var(--space-3);
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent-soft) 15%,
    var(--accent-soft) 85%,
    transparent 100%);
  transition: background var(--duration-medium) var(--ease-out);
}
.process-step:hover .process-step__body::before {
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent) 15%,
    var(--accent) 85%,
    transparent 100%);
  box-shadow: 0 0 10px var(--accent-glow);
}
.process-step.is-loading .process-step__body::before,
.process-step.is-done .process-step__body::before {
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent) 15%,
    var(--accent) 85%,
    transparent 100%);
}

.process-step__badge {
  font-size: 0.68rem;
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
  padding: 2px 6px;
  border: 1px solid var(--accent-soft);
  border-radius: 3px;
  background: rgba(7, 226, 254, 0.05);
}
.process-step__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 226, 254, 0.06);
  border: 1px solid var(--accent-soft);
  border-radius: 8px; /* cuadrado redondeado — servicios usan otro estilo */
  color: var(--accent);
  box-shadow: 0 0 12px rgba(7, 226, 254, 0.15);
  transition: transform var(--duration-medium) var(--ease-out),
              box-shadow var(--duration-medium) var(--ease-out);
}
.process-step:hover .process-step__icon {
  transform: rotate(-4deg) scale(1.05);
  box-shadow: 0 0 20px rgba(7, 226, 254, 0.4);
}
.process-step h3 {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}
.process-step p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.process-step__output {
  margin-top: auto;
  padding-top: var(--space-3);
  width: 100%;
  font-size: 0.72rem;
  color: #00FF9C;
  border-top: 1px dashed var(--accent-soft);
}

/* STATUS BAR — pie tipo terminal con barra de progreso + porcentaje. */
.process-step__status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(7, 226, 254, 0.04);
  border-top: 1px solid var(--accent-soft);
  position: relative;
  z-index: 3;
}
.process-step__loader {
  flex: 1;
  height: 4px;
  background: rgba(7, 226, 254, 0.08);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}
.process-step__loader-bar {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--accent), rgba(7, 226, 254, 0.55));
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width 120ms linear;
}
.process-step__pct {
  font-size: 0.68rem;
  color: var(--text-muted);
  min-width: 34px;
  text-align: right;
  letter-spacing: 0;
}
.process-step.is-loading .process-step__pct,
.process-step.is-done .process-step__pct { color: var(--accent); }
.process-step.is-loading {
  border-color: var(--accent-hover);
  box-shadow: 0 0 18px rgba(7, 226, 254, 0.18);
}
.process-step.is-loading .process-step__icon {
  background: rgba(7, 226, 254, 0.12);
  box-shadow: 0 0 18px rgba(7, 226, 254, 0.3);
}
.process-step.is-done {
  border-color: rgba(7, 226, 254, 0.45);
}
.process-step.is-done .process-step__loader-bar {
  width: 100%;
  opacity: 0.55;
}

@media (max-width: 1023px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .process-steps { grid-template-columns: 1fr; }
}

/* Banner de final: aparece cuando las 5 fases llegan al 100% y parpadea
   durante ~2.5s antes de que el bucle JS reinicie la secuencia. */
.process-mission {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
  min-height: 2.2rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms var(--ease-out),
              transform 240ms var(--ease-out);
}
.process-mission.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.process-mission__text {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm, 4px);
  background: rgba(7, 226, 254, 0.05);
}
.process-mission.is-visible .process-mission__text {
  animation: missionBlink 0.55s ease-in-out infinite;
}
@keyframes missionBlink {
  0%, 100% { opacity: 1; text-shadow: 0 0 16px var(--accent); }
  50%      { opacity: 0.28; text-shadow: 0 0 4px var(--accent-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .process-mission.is-visible .process-mission__text { animation: none; }
  .process-step__loader-bar { transition: none; }
}

/* ============ TESTIMONIOS — estilo chat/WhatsApp =================
   DECISION: cada testimonio es una mini-conversación: avatar con logo
   del cliente, cabecera tipo "en línea", burbuja cian con quote y
   doble check verde (estilo leído). Encaja con el mundo terminal/chat
   de la marca y con WhatsApp como canal principal de AJ. */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 767px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* MOBILE: carrusel horizontal con snap + peek de la siguiente tarjeta
   (mismo patrón que .projects-grid). */
@media (max-width: 640px) {
  .testimonials-grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-block: var(--space-2) var(--space-4);
    padding-inline: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
    scroll-padding-inline: var(--space-4);
    scrollbar-width: none;
  }
  .testimonials-grid::-webkit-scrollbar { display: none; }
  .testimonials-grid .testimonial {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

.testimonial {
  background: var(--bg-secondary);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--duration-medium) var(--ease-out),
              transform var(--duration-medium) var(--ease-out),
              box-shadow var(--duration-medium) var(--ease-out);
}
.testimonial:hover {
  border-color: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.testimonial__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testimonial__avatar {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0A1618;
  border: 1px solid var(--accent-soft);
  border-radius: 50%;
  overflow: hidden;
  padding: 5px;
}
.testimonial__avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: brightness(1.05);
}
.testimonial__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.testimonial__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.testimonial__role {
  font-size: 0.72rem;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.testimonial__status {
  font-size: 0.7rem;
  color: #00FF9C;
  padding: 2px 8px;
  border: 1px solid rgba(0, 255, 156, 0.35);
  border-radius: 999px;
  background: rgba(0, 255, 156, 0.06);
  flex-shrink: 0;
}
.testimonial__bubble {
  position: relative;
  background: rgba(7, 226, 254, 0.07);
  border: 1px solid var(--accent-soft);
  border-radius: 14px 14px 14px 4px;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.testimonial__bubble p {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.testimonial__time {
  align-self: flex-end;
  font-size: 0.7rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.testimonial__check {
  color: #00FF9C;
  font-weight: 700;
  letter-spacing: -2px;
}
.testimonial__stars {
  display: inline-flex;
  gap: 2px;
  margin-top: 8px;
  color: #FFD93D;
  font-size: 0.95rem;
  letter-spacing: 1px;
  line-height: 1;
}

/* ============ TESTIMONIALS MARQUEE (2 filas) ============
   DECISION: dos cintas horizontales en direcciones opuestas (fila 1 ←,
   fila 2 →) con bucle infinito sin huecos. Comparten el keyframe
   marquee-seamless con los logos de clientes; la fila 2 usa
   animation-direction: reverse para ir hacia el otro lado.
   El módulo js/testimonials-marquee.js mide el ancho de una copia y
   clona cards hasta que el track total ≥ 2× viewport, garantizando un
   bucle perfecto en cualquier resolución. Hover/focus pausa la fila. */
.testimonials-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Fade lateral suave en los bordes para que las cards entren/salgan
     sin un "corte" duro contra el contenedor. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  /* Sangrado a viewport para que la cinta llegue de lado a lado
     incluso aunque .container tenga padding interno. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
}
.testimonials-row {
  position: relative;
  overflow: hidden;
}
.testimonials-row__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  padding-block: var(--space-3);
  will-change: transform;
  /* La animación se inyecta por JS tras medir el ancho de una copia. */
}
/* DECISION: usamos margin-right por item (mismo patrón que clients-marquee
   y la banda de texto) en lugar de gap. Con gap, al duplicar las cards
   el ancho de "una copia" no incluye el hueco final y el bucle queda
   ligeramente desincronizado. Con margin-right cada card mide
   width + margen y la copia es exacta. */
.testimonials-row__track .testimonial {
  flex: 0 0 clamp(280px, 32vw, 380px);
  margin-right: var(--space-5);
  /* Las cards heredan el resto de su look de .testimonial general. */
}
/* Pausa al hover/focus dentro de la fila — solo afecta a esa fila. */
.testimonials-row:hover .testimonials-row__track,
.testimonials-row:focus-within .testimonials-row__track {
  animation-play-state: paused;
}

/* Tablet: cards algo más estrechas. */
@media (max-width: 900px) {
  .testimonials-row__track .testimonial {
    flex-basis: clamp(260px, 60vw, 340px);
    margin-right: var(--space-4);
  }
}

/* Móvil: cards casi a viewport completo, padding interno reducido. */
@media (max-width: 640px) {
  .testimonials-marquee { gap: var(--space-3); }
  .testimonials-row__track .testimonial {
    flex-basis: min(82vw, 320px);
    margin-right: var(--space-3);
    padding: var(--space-4);
  }
}

/* Reduced motion: paramos el bucle y dejamos un carrusel manual con
   scroll-snap, accesible y sin movimiento involuntario. */
@media (prefers-reduced-motion: reduce) {
  .testimonials-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .testimonials-row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .testimonials-row::-webkit-scrollbar { display: none; }
  .testimonials-row__track {
    animation: none !important;
    transform: none !important;
    width: max-content;
    padding-inline: var(--space-4);
  }
  .testimonials-row__track .testimonial { scroll-snap-align: start; }
}

/* ============ EASTER EGG: modo astronauta (Konami) ============ */
body.astro-mode {
  filter: hue-rotate(30deg);
  transition: filter 2s;
}
body.astro-mode [data-float="true"] {
  animation-duration: 8s !important;
}

/* ============ PÁGINAS LEGALES (aviso / privacidad / cookies) =======
   DECISION: layout sencillo y legible. Reutiliza nav + footer de la home
   y añade una sección "legal" con título estilo terminal, TOC opcional y
   bloques de contenido con headings "# / >" para mantener la voz. */
.legal-page {
  padding-top: clamp(var(--space-8), 12vh, var(--space-10));
  padding-bottom: var(--space-8);
}
.legal-page .container { max-width: 860px; }
.legal-page__kicker {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
}
.legal-page__title {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  line-height: 1.15;
}
.legal-page__title .hash { color: var(--accent); }
.legal-page__updated {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--accent-soft);
  border-radius: 3px;
  background: rgba(7, 226, 254, 0.04);
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-6);
}
.legal-page__toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
  margin-bottom: var(--space-7);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.legal-page__toc a {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 4px 0;
  transition: color var(--duration-fast);
}
.legal-page__toc a:hover { color: var(--accent); }

.legal-page__content {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
}
.legal-page__content h2 {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  scroll-margin-top: 80px;
}
.legal-page__content h2 .hash { color: var(--accent); margin-right: 6px; }
.legal-page__content h3 {
  font-size: 1.02rem;
  color: var(--text-primary);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
}
.legal-page__content h3::before { content: '> '; color: var(--accent); }
.legal-page__content p { margin-bottom: var(--space-3); }
.legal-page__content ul,
.legal-page__content ol {
  margin: 0 0 var(--space-3) var(--space-5);
  padding: 0;
}
.legal-page__content li { margin-bottom: 6px; }
.legal-page__content a {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent-soft);
  transition: border-color var(--duration-fast);
}
.legal-page__content a:hover { border-bottom-color: var(--accent); }
.legal-page__content strong { color: var(--text-primary); }
.legal-page__content code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 6px;
  background: rgba(7, 226, 254, 0.08);
  border-radius: 3px;
  color: var(--accent);
}
.legal-page__note {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-left: 2px solid var(--accent);
  background: rgba(7, 226, 254, 0.04);
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* Cookies: tabla simple de categorías */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 0.88rem;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--accent-soft);
  vertical-align: top;
}
.legal-table th {
  background: rgba(7, 226, 254, 0.05);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.legal-table tr:last-child td { border-bottom: none; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-7);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.88rem;
}
.legal-back:hover { text-shadow: 0 0 8px var(--accent-glow); }

/* Nav slim reutilizada en las legales: mismo logo + link "volver" */
.legal-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10, 22, 24, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--accent-soft);
}
.legal-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
}
.legal-nav__logo img { height: 36px; width: auto; display: block; }
.legal-nav__back {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.legal-nav__back:hover { color: var(--accent); }

/* ================================================================
   BITÁCORA (home) — bloque con los 3 últimos posts del blog
   ================================================================ */
.section--bitacora {
  position: relative;
}
.bitacora-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-5, 20px);
  margin-top: var(--space-6, 24px);
}
.bitacora-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}


.bitacora-card {
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  background: rgba(10, 22, 24, 0.55);
  overflow: hidden;
  transition: transform 220ms var(--ease-out, cubic-bezier(.2,.8,.2,1)),
              border-color 220ms ease,
              box-shadow 220ms ease;
  position: relative;
}
.bitacora-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(7, 226, 254, 0.14);
}
.bitacora-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.bitacora-card__cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(7, 226, 254, 0.04);
}
.bitacora-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.bitacora-card:hover .bitacora-card__cover img { transform: scale(1.05); }

.bitacora-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.bitacora-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bitacora-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-primary);
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  transition: color 180ms ease;
}
.bitacora-card:hover .bitacora-card__title { color: var(--accent); }
.bitacora-card__excerpt {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bitacora-card__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--accent-soft);
}
.bitacora-card__arrow {
  margin-left: auto;
  color: var(--accent);
  font-size: 1rem;
  transition: transform 180ms ease;
}
.bitacora-card:hover .bitacora-card__arrow {
  transform: translateX(4px);
}

.bitacora-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6, 24px);
}

/* chip de categoría reutilizado del blog.css */
.bitacora-card .blog-cat-chip {
  --cat-color: var(--accent);
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.64rem;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--cat-color) 15%, transparent);
  color: var(--cat-color);
  border: 1px solid color-mix(in srgb, var(--cat-color) 30%, transparent);
}

/* ================================================================
   BITÁCORA (home) — mobile slider horizontal con peek del siguiente
   Mismo patrón que .projects-grid y .testimonials-grid.
   ================================================================ */
@media (max-width: 767px) {
  .bitacora-grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    padding-block: var(--space-2) var(--space-4);
    padding-inline: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
    scroll-padding-inline: var(--space-4);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .bitacora-grid::-webkit-scrollbar { display: none; }

  .bitacora-grid .bitacora-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
  }
  .bitacora-grid .bitacora-loading {
    flex: 0 0 100%;
  }

  /* El hover lift no encaja en touch — evitamos que queden cards levantadas */
  .bitacora-card:hover { transform: none; }

  /* Pista visual: sombra en el borde derecho que sugiere que hay más */
  .section--bitacora .container {
    position: relative;
  }
  .section--bitacora .container::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent, rgba(10, 22, 24, 0.95));
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  /* el ::after solo tiene sentido cuando el grid está renderizado; forzamos
     visibilidad por clase que añade JS — si no la hay, usamos :has() nativo */
  .section--bitacora:has(.bitacora-grid .bitacora-card) .container::after {
    opacity: 1;
  }
}