/* buildflow.css — tokens de marca, tipografia self-hosted, secciones post-hero,
   nav/footer, mini-CTA sticky, capacidades, media. Carga DESPUES de scroll-scrub.css
   (comparten las vars de .ss-root; esto agrega, no reemplaza el molde). */

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2-variations"), url("fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  background: #16161d;
}

::selection {
  background: rgba(218, 90, 40, 0.35);
  color: #ececf1;
}

a {
  color: inherit;
}

/* ---------- Nav: se opaca al scrollear (bf-ui.js togglea data-scrolled) ---------- */
.ss-nav[data-scrolled="true"] {
  background: rgba(22, 22, 29, 0.92);
  backdrop-filter: none;
  border-bottom: 1px solid rgba(236, 236, 241, 0.08);
}

.bf-nav-eyebrow {
  font-family: var(--mono-stack);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: none;
}

@media (min-width: 960px) {
  .bf-nav-eyebrow { display: inline; }
}

/* ---------- Mini CTA bar (aparece tras el hero, sale con el CTA final) ---------- */
.bf-mini-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  background: rgba(14, 14, 19, 0.94);
  border-top: 1px solid rgba(236, 236, 241, 0.1);
  transform: translateY(100%);
  transition: transform 0.28s ease;
}

.bf-mini-cta[data-visible="true"] {
  transform: translateY(0);
}

.bf-mini-cta-text {
  font-size: 0.85rem;
  color: var(--ink-dim);
  display: none;
}

@media (min-width: 640px) {
  .bf-mini-cta-text { display: block; }
}

.bf-mini-cta-text b { color: var(--ink); font-weight: 700; }

.bf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--text-stack);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
  border: none;
  cursor: pointer;
}

.bf-btn:hover {
  background: #c94f22;
  transform: translateY(-1px);
}

.bf-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(236, 236, 241, 0.25);
  color: var(--ink);
}

.bf-btn--ghost:hover {
  background: rgba(236, 236, 241, 0.06);
}

.bf-btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
}

/* ================= CAPACIDADES ================= */
.bf-caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: rgba(236, 236, 241, 0.1);
  margin-top: 2.25rem;
  border-radius: 8px;
  overflow: hidden;
}

.bf-cap {
  background: var(--surface-2);
  padding: 1.6rem 1.5rem 1.7rem;
}

/* Icono de capacidad. El PNG ya trae transparencia real (alfa por luminancia +
   caida radial, ver scripts/export_media_web.py) — no hace falta blend en CSS.
   Se muestra a 64px desde un master de 256px. */
.bf-cap-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 0.85rem;
}

/* Celda 8: animacion del infinito, sin texto. Llena el hueco que dejaba la
   grilla de 7 cards en 4 columnas y hace de antesala a la card ancha. */
.bf-cap--anim {
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

.bf-cap--anim video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La 08 ("y lo que no esta en esta lista") ocupa toda la fila: es el remate del
   mensaje, no una capacidad mas de la grilla. */
.bf-cap--wide {
  grid-column: 1 / -1;
  background: #0e0e13;
  border-top: 1px solid rgba(218, 90, 40, 0.35);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Fondo de la card 08: la estructura isometrica compleja de BF24, que a 64px se
   desperdiciaba. El oscurecido va aca y NO quemado en el JPEG, para poder
   ajustarlo sin re-exportar. */
.bf-cap-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.bf-cap-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.bf-cap-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(14, 14, 19, 0.96) 0%,
    rgba(14, 14, 19, 0.9) 55%,
    rgba(14, 14, 19, 0.68) 100%
  );
}

.bf-cap-n {
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.bf-cap h3 {
  font-family: var(--display-stack);
  font-weight: 700;
  font-size: 1.08rem;
  margin: 0.55rem 0 0.5rem;
}

.bf-cap p {
  font-size: 0.88rem;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.55;
}

.bf-cap p b {
  color: var(--ink);
  font-weight: 700;
}

.bf-cap--wide p {
  max-width: 52rem;
}

.bf-services-foot {
  margin-top: 1.75rem;
  font-size: 0.86rem;
  color: var(--ink-dim);
  text-align: center;
}

.bf-services-foot b { color: var(--ink); font-weight: 700; }

/* ================= PROCESO ================= */
.bf-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(236, 236, 241, 0.1);
  margin-top: 2.25rem;
  border-radius: 8px;
  overflow: hidden;
}

.bf-process-step {
  background: var(--surface-2);
  padding: 1.6rem 1.4rem;
}

.bf-process-n {
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
}

.bf-process-step h4 {
  font-family: var(--display-stack);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0.5rem 0 0.4rem;
}

.bf-process-step p {
  font-size: 0.86rem;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}

/* ================= EQUIPO ================= */
/* Panel "$ stack --status": responde a una objecion real de un prospecto
   ("2 personas no manejan sistemas tecnicos serios") mostrando la superficie
   tecnica en vez de argumentarla en prosa. Salio de un workflow de 4 angulos
   + juez adversarial (2026-07-28) — este gano 5/5 en responder la objecion y
   fue el unico sin riesgo de implicar mas de 2 personas. Reemplaza el bloque
   viejo (.bf-team-quote + .bf-team-stat, eliminados) que llevaba el mensaje
   "te contesta uno de los dos" — ese mensaje sigue vivo en el CTA final
   (.ss-cta-sub), asi que no se perdio, solo se dejo de repetir. */
.bf-stack-panel {
  margin-top: 1.75rem;
  border: 1px solid rgba(236, 236, 241, 0.12);
  background: var(--surface-2);
  max-width: 34rem;
}

.bf-stack-prompt {
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--accent-2);
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid rgba(236, 236, 241, 0.12);
}

.bf-stack-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid rgba(236, 236, 241, 0.08);
}

.bf-stack-row:last-child {
  border-bottom: none;
}

.bf-stack-row .lbl {
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  white-space: nowrap;
}

.bf-stack-row .val {
  font-family: var(--mono-stack);
  font-size: 0.78rem;
  color: var(--ink);
  text-align: right;
}

@media (max-width: 560px) {
  .bf-stack-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .bf-stack-row .val {
    text-align: left;
  }
}

/* ================= CTA FINAL ================= */
.bf-final {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 900px;
  margin: 2rem auto 0;
}

@media (min-width: 720px) {
  .bf-final {
    grid-template-columns: 1.4fr auto;
  }
}

.bf-final-qr {
  text-align: center;
}

/* QR vectorial inline. El anterior era un PNG base64 heredado del PDF que estaba
   corrupto (ni libpng ni PIL lo leian) — se dibujaba a medias y no escaneaba.
   En SVG queda nitido a cualquier tamano y se verifica por decodificacion en
   scripts/make_qr.py. `shape-rendering: crispEdges` evita que el antialias
   difumine los modulos y arruine el escaneo. */
/* 160px, no 130: el QR tiene 45 modulos, asi que a 130px quedan 2.89 px/modulo
   — escanea, pero al limite. A 160 son 3.6 px/modulo, con margen para leerlo
   de lejos o en angulo.
   El SVG (scripts/make_qr.py, omitsize=True) trae su propio quiet-zone blanco
   horneado (border=2 modulos) Y su viewBox — por eso NO lleva padding/box-sizing
   extra aca: eso duplicaba el margen y (sin viewBox, bug ya corregido) dejaba
   el codigo chico pegado arriba-izquierda de un lienzo blanco de sobra. */
.bf-final-qr img,
.bf-final-qr .bf-qr {
  width: 160px;
  height: 160px;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
}

.bf-final-qr .bf-qr {
  shape-rendering: crispEdges;
}

.bf-final-qr-cap {
  font-family: var(--mono-stack);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 0.6rem;
}

.bf-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.bf-final-secondary {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(236, 236, 241, 0.14);
  font-size: 0.9rem;
  color: var(--ink-dim);
}

.bf-final-secondary a {
  color: var(--accent-2);
  font-weight: 700;
  text-decoration: none;
}

.bf-final-secondary a:hover {
  text-decoration: underline;
}

.bf-final-contacts {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(236, 236, 241, 0.1);
  border-radius: 8px;
  overflow: hidden;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.bf-final-contact {
  background: var(--surface-2);
  padding: 1.25rem 1.4rem;
}

.bf-final-contact .cl {
  font-family: var(--mono-stack);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.4rem;
}

.bf-final-contact .val {
  font-family: var(--display-stack);
  font-weight: 700;
  font-size: 1.05rem;
}

.bf-final-contact .nm {
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin-top: 0.3rem;
}

/* ================= REEL (BF19) ================= */
.bf-reel-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
}

@media (min-width: 860px) {
  .bf-reel-wrap {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3.5rem;
  }
}

.bf-reel-frame {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(236, 236, 241, 0.14);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}

.bf-reel-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Controles del reel: pausa + sonido. La pausa existe porque el video arranca
   solo — WCAG 2.2.2 pide un mecanismo para detener contenido en movimiento. */
.bf-vidctl {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.bf-sound {
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  border-radius: 4px;
  border: 1px solid rgba(236, 236, 241, 0.3);
  background: rgba(14, 14, 19, 0.8);
  color: var(--ink);
  cursor: pointer;
}

.bf-sound:hover {
  background: rgba(14, 14, 19, 0.95);
  border-color: var(--accent);
}

.bf-reel-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.bf-reel-list li {
  font-size: 0.95rem;
  color: var(--ink-dim);
  padding-left: 1.1rem;
  position: relative;
}

.bf-reel-list li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ================= BANDA DE MARCA (HF5, full-bleed) ================= */
.bf-band {
  position: relative;
  width: 100%;
  line-height: 0;
  border-top: 1px solid rgba(236, 236, 241, 0.08);
  border-bottom: 1px solid rgba(236, 236, 241, 0.08);
}

.bf-band img {
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

/* Franja de flujo (BF25): oscura y abstracta, fluye con el fondo de la pagina.
   A diferencia de la del concreto (clara, respiro), esta es una transicion. */
.bf-band--flujo img {
  height: clamp(150px, 22vw, 280px);
  object-position: center 50%;
}

.bf-band-cap {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  font-family: var(--mono-stack);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a5a63;
  line-height: 1;
  white-space: nowrap;
}

/* ================= B-ROLL DE FONDO (Proceso) ================= */
/* Nota: .ss-content es HERMANO de .ss-video-spacer, no ancestro de
   .ss-video-stage -> `overflow:hidden` aca NO rompe el position:sticky del hero
   (regla 4 del molde). Verificado en la estructura de index.html. */
.bf-has-broll {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bf-broll {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bf-broll video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cortina del b-roll. Antes iba al 97% porque el clip era metraje IA de una
   laptop con "codigo" ilegible que habia que esconder. Ahora es la animacion de
   capas isometricas — abstracta y de marca, no hay nada que tapar — asi que se
   afloja para que se vea. Sigue siendo textura: el texto manda en contraste. */
.bf-broll::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22, 22, 29, 0.92),
    rgba(22, 22, 29, 0.74) 45%,
    rgba(22, 22, 29, 0.92)
  );
}

/* ================= TARJETA (HF2, en Equipo) ================= */
.bf-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 860px) {
  .bf-team-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 3.5rem;
  }
}

.bf-team-figure {
  margin: 0;
}

.bf-team-figure img {
  width: 100%;
  max-width: 320px;
  display: block;
  border: 1px solid rgba(236, 236, 241, 0.1);
  border-radius: 8px;
}

.bf-team-figure figcaption {
  font-family: var(--mono-stack);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 0.75rem;
  max-width: 320px;
}

/* Accesibilidad: nada se mueve solo si el usuario pidio menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .ss-scroll-hint::after {
    animation: none;
  }
}

/* ================= FOOTER ================= */
.bf-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display-stack);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.bf-footer-brand .b { color: var(--accent); }
.bf-footer-brand .f { color: var(--accent-2); }