/* fluxbostudio — ajustes específicos de este sitio.
   El sistema (tokens, theme, base) resuelve casi todo; aquí solo lo que
   este negocio necesita y no está en las primitivas. */

:root {
  --preloader-logo: url('/assets/fluxbo-studio.png');
  /* Ritmo vertical más apretado que el por defecto: este one-pager mide
     poco texto por banda y con el section-space estándar quedaba a 99
     palabras/1000px (medido con page_snapshot), por debajo de la
     referencia profesional (115–160). */
  --section-space: clamp(2.75rem, 5vw, 5.5rem);

  /* 2026-08-24 · Estilo de resend.com (leída con read_reference): esquinas
     casi rectas en vez de píldora, pedido explícito del usuario. Se
     sobrescriben aquí los radios de tokens.css — cascada, no edición del
     archivo de solo lectura. */
  --radius-card: 6px;
  --radius-control: 6px;
  --radius-sm: 4px;
  --radius-xl: 8px;
  --radius-pill: 6px;
}

/* Hero: el vídeo de fondo tiene mucho detalle propio (brazo robótico,
   interfaz holográfica, resonador). Se quitó la insignia, el segundo botón
   y la fila de sellos para dejar solo título, una frase y un botón — un
   bloque bastante más corto que antes de sobre el mismo tercio superior del
   vídeo, dejando el resto (donde está el detalle) libre. */
.hero__scrim-extra {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(var(--background-950) / 0.82) 0%,
    oklch(var(--background-950) / 0.4) 30%,
    transparent 55%
  );
  pointer-events: none;
}
.hero__copy {
  max-width: 34rem;
}

/* Primero el vídeo solo, después el texto: unos segundos de pantalla limpia
   para apreciar el detalle del vídeo antes de que entre el contenido.
   Respeta prefers-reduced-motion: ahí el texto aparece de inmediato. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy {
    opacity: 0;
    transform: translateY(14px);
    animation: hero-copy-in 900ms var(--ease-out) 3200ms forwards;
  }
}
@keyframes hero-copy-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Space Grotesk no trae cursiva propia: sin esto, cualquier <em> (los
   acentos de color de cada h2/h1) y el .lead caían en la itálica de
   sistema — una fuente totalmente distinta a la del resto, que es
   exactamente el quiebre de armonía que se veía en la portada. */
em,
.lead {
  font-style: normal;
}

/* El "Explorar" del hero se leía flojo cuando el vídeo, justo detrás,
   tiene un tramo claro (la interfaz holográfica brilla en cian). Un fondo
   propio, sólido, garantiza el contraste sin depender del fotograma. */
.scroll-cue {
  background: oklch(var(--background-950) / 0.6);
  padding: 0.2rem 0.65rem;
  line-height: 1.1;
  border-radius: var(--radius-pill);
}

/* "Proyectos que hablan": las capturas se desplazan solas de un lado a
   otro, sin corte, y se difuminan en los bordes en vez de cortarse en
   seco. data-carousel / data-carousel-track las mueve un script propio al
   final del body (no hay atributo del andamio para esto). El usuario
   puede arrastrar con el dedo o el mouse para moverlas más rápido; al
   soltar, sigue solo desde ahí, sin salto. */
.carousel {
  overflow: hidden;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.carousel__track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  will-change: transform;
  cursor: grab;
}
.carousel.is-dragging .carousel__track {
  cursor: grabbing;
}
.carousel__item {
  flex: 0 0 auto;
  width: min(78vw, 21rem);
}

/* "Sistemas": la captura real de cada sitio se ve entera y clara, sin
   texto encima — el título y la frase van debajo, en la propia tarjeta.
   Así no compiten con lo que ya dice la captura, y no hace falta velo. */
#sistemas .grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.sistema-card {
  display: block;
}
.sistema-card .media {
  margin-bottom: 1.25rem;
}
.sistema-card h3 {
  font-size: var(--text-h2);
  margin-bottom: 0.5rem;
}
.sistema-card p {
  margin-bottom: 1.25rem;
}
@media (max-width: 860px) {
  #sistemas .grid {
    grid-template-columns: 1fr;
  }
}

/* Cierre "Si tienes un proyecto...": se quitó la foto de fondo por un
   resplandor suave abajo a la izquierda, y el título/bajada se leen en una
   fuente normal (no la condensada en mayúsculas del resto del sitio) para
   que se parezca a la referencia que pidió el usuario: aire, no ruido. */
.cta-suave {
  position: relative;
  background:
    radial-gradient(60% 55% at 14% 92%, oklch(var(--primary-800) / 0.4), transparent 70%),
    oklch(var(--background-950));
}
.cta-suave h2 {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  font-weight: 500;
}
.cta-suave .lead {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  font-weight: 400;
}
/* .center centra los bloques (eyebrow/h2/lead) como cajas, pero no el
   texto dentro de cada uno: una caja angosta centrada en la página, con
   texto alineado a la izquierda dentro de ella, se ve corrida a la
   izquierda en cuanto el párrafo pasa a dos líneas. */
.cta-suave .eyebrow,
.cta-suave h2,
.cta-suave .lead {
  text-align: center;
}

/* Burbuja de WhatsApp fija, como en la referencia: siempre visible,
   independiente de la sección en la que esté el usuario. */
.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-pill);
  background: oklch(var(--accent-500));
  color: oklch(var(--background-50));
  box-shadow: 0 8px 24px oklch(var(--background-950) / 0.5);
}
.whatsapp-fab:hover {
  background: oklch(var(--accent-400));
}
.whatsapp-fab .icon {
  width: 1.75rem;
  height: 1.75rem;
}

/* La cinta de tecnologías bajo el hero: un poco más de aire entre etiquetas. */
.marquee__track span {
  padding-inline: 1.5rem;
}

/* Grid de stack técnico: tarjetas más compactas que un .card normal,
   pensadas para icono + nombre + una línea, no para párrafos. */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: oklch(var(--background-800));
  border: 1px solid oklch(var(--background-800));
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Pie: marca + CTA a la izquierda, dos columnas de enlaces a la derecha,
   y una franja final para el copyright. */
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid oklch(var(--background-800));
}
.footer__top .grid {
  grid-template-columns: repeat(2, minmax(10rem, auto));
  gap: 3rem;
  flex: 1;
  justify-content: flex-end;
}
.footer__bottom {
  padding-top: 1.5rem;
}
@media (max-width: 720px) {
  .footer__top {
    flex-direction: column;
  }
  .footer__top .grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.tech-grid .tech-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: oklch(var(--background-900));
}