/* ============================================================
   FLOW additions — Concept B: "woven through, not bolted on".
   Three touchpoints: (1) a quiet "glance" closing the Hero itself
   (.hero__flow-glance*, moved into home.css since it now lives inside
   .hero — pedido: "el primer vistazo de flow... dentro del hero"),
   (2) .flow-showcase as its own full section (05), (3) a 5th,
   visually distinguished row inside the existing .services list.
   Built on the real tokens in tokens.css — no new palette.
   ============================================================ */

/* Hall of Frames now ships static stills instead of the 23-video grid
   (no video assets available in this mockup) — reuse the same object-fit
   rule the original .frames__slot video had. */
.frames__slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 2. Full showcase section (05 / FLOW) ----------
   Full gallery of the 5 real FLOW screens: one feature slide (FLOW
   Studio) + a row of 4 (Client, Approvals, Feedback, Calendar). */
.flow-gallery {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.flow-gallery__feature,
.flow-gallery__row img {
  display: block;
  width: 100%;
  border-radius: 0; /* bordes rectos, como las ventanas nuevas */
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.65);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
/* El contenedor (16:10) está bien tal cual — pedido explícito: "el tamaño
   del contenedor está bien, solo hacer la imagen más pequeña para que se
   vea más contenido". El problema era flow-1.png: 2160×2700 (retrato,
   ratio 0.8) adentro de un marco 16:10 (ratio 1.6) — object-fit:cover +
   object-position:top mostraba solo el 50% superior de la captura, bien
   zoomeado. contain (en vez de cover) muestra el dashboard completo sin
   recortar nada; el padding + fondo evitan que el "sobrante" a los lados
   se vea como un agujero vacío — se lee como una captura enmarcada, no
   como un bug de aspect-ratio. */
.flow-gallery__feature {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-alt);
}
.flow-gallery__feature img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  box-sizing: border-box;
  display: block;
}
.flow-gallery__feature:hover,
.flow-gallery__row img:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 -4px var(--color-accent), 0 40px 80px -40px rgba(224, 21, 216, 0.35);
}
.flow-gallery__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}
.flow-gallery__row img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}
@media (max-width: 900px) {
  .flow-gallery__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .flow-gallery__feature { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-gallery__feature,
  .flow-gallery__row img { transition: none; }
}
.flow-showcase__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* ---------- 3. Service row distinction ---------- */
.service-item--flow {
  border-left: 3px solid var(--color-accent-text, var(--color-accent));
  padding-left: var(--space-sm);
}
.service-item__flow-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.2em;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.6em;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: var(--color-accent-text, var(--color-accent));
  color: var(--color-inverse-bg);
  transform: translateY(-0.15em);
}

/* ---------- 4. Mono Verse work-item crop fix ----------
   home-mono-verse-campaign-still.jpg is a tall phone-mockup product
   photo with heavy magenta padding either side; at this card's wide
   aspect, object-fit:cover centers but doesn't zoom, so mostly flat
   magenta shows instead of the garment art. Scale up + keep centered. */
.img--zoom-mono {
  transform: scale(1.7) !important;
  transform-origin: center center;
}

/* ---------- 5. /flow/ page — "for you" / "for your client" ----------
   Dos columnas paralelas (reutiliza el patrón visual de .principle en
   about.css — index/nombre/texto — pero en 2 columnas en vez de filas
   full-width, porque acá son dos listas comparables, no una secuencia).
   .case-hero, .case-block, .process-list/.process-row vienen de work.css
   (ya se linkea esa hoja en la página) — se reutilizan tal cual, sin
   reescribirlos acá. */
.flow-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 900px) {
  .flow-benefits { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
}
.flow-benefits__col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
}
.flow-benefit {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-line);
}
.flow-benefit__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
}
.flow-benefit__desc {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  max-width: 42ch;
}

/* ---------- 6. /flow/ page — "how a project moves", text + real screen
   per step. Reemplaza el .process-list genérico de work.css: acá cada paso
   necesita su propia captura (no las mismas 5 del home) para que se
   entienda de un vistazo, no solo leyendo. ---------- */
.flow-process {
  display: grid;
  gap: 0;
  position: relative;
}

/* ---------- 6b. Rail (sacado) ----------
   Había una línea vertical + 3 nodos numerados a la derecha, puramente
   decorativa, pensada para llenar el hueco que .flow-process__row deja a
   propósito en desktop. Pedido directo: afuera, línea y números incluidos
   — queda el hueco vacío a la derecha de cada fila, sin nada decorativo
   reemplazándolo. */
.flow-process__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-top: 1px solid rgba(var(--overlay-rgb),0.14);
  align-items: start;
}
.flow-process__row:last-child { border-bottom: 1px solid rgba(var(--overlay-rgb),0.14); }
@media (min-width: 900px) {
  /* Misma proporción angosta-texto / resto-imagen que .flow-strip de arriba
     (minmax(220px,26%) 1fr) — y SIN alternar lados: el texto siempre a la
     izquierda, la imagen siempre pegada a la derecha, igual que esa tira.
     Antes alternaba y el texto quedaba angosto adentro de una columna
     ancha con la imagen anclada al borde opuesto — de ahí el hueco enorme
     en el medio. */
  .flow-process__row {
    grid-template-columns: minmax(220px, max-content) max-content;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
    align-items: center;
  }
}
.flow-process__text { max-width: 26ch; }
.flow-process__text .process-row__index { display: block; margin-bottom: var(--space-2xs); }
/* Mismo tratamiento que .flow-strip__claim (home.css, la tira "Powered by
   FLOW" de arriba) — font-display en vez del body font, para que estos 3
   pasos lean con el mismo peso/color que esos textos, no como párrafo
   normal. El /01 /02 /03 ya hace de "eyebrow" (mono, chico) — este texto es
   el "claim" grande al lado. */
.flow-process__text .process-row__text {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.3vw, 2.1rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.flow-process__text .process-row__text strong { font-weight: inherit; }
.flow-process__media {
  margin: 0;
  border-radius: 0; /* bordes rectos, como las ventanas nuevas */
  overflow: hidden;
  border: 1px solid rgba(var(--overlay-rgb),0.14);
  background: var(--color-bg-alt);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.55);
  justify-self: center;
  width: 100%;
  max-width: 300px;
}
@media (min-width: 900px) {
  /* start, no end — pegada al texto, no al borde derecho de la página. */
  .flow-process__media { justify-self: start; }
}
.flow-process__media img {
  display: block;
  width: 100%;
  height: auto;
}
/* Mismo tratamiento de caption que .flow-strip__shot (home.css) — mono,
   chico, con su propia línea separadora — para que las tarjetas con
   imagen se vean como UN mismo lenguaje en toda la web, no dos. */
.flow-process__media figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-soft);
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid rgba(var(--overlay-rgb),0.14);
}

/* ---------- 7. /flow/ page — "Made with AI" (antes "Out in the wild") ----
   Ahora es el cajón declarado para todo lo hecho con IA (no solo marketing
   de FLOW) — arranca con 10 posts y va sumando piezas con el tiempo. Meterlas
   en el palette violeta/mono del sitio las aplanaría — mismo criterio que
   Hall of Frames en el home (".frames__grid"): se muestran como lo que son,
   piezas sueltas con su propio marco neutro (borde + caption mono), no como
   si pertenecieran a la misma paleta que el resto de la página.
   Segunda vuelta: esto era una tira con scroll horizontal (pensada para que
   nuevas piezas se agreguen al final sin reacomodar nada) — pero en la
   práctica el usuario no pudo scrollearla y no vio el resto del contenido.
   Vuelve a ser una grilla de toda la vida, como Hall of Frames: todo
   visible de una, scrolleando la página hacia abajo normal, sin
   interacción nueva que aprender. Wrap automático (auto-fill), así que
   piezas nuevas simplemente entran al final de la grilla sin tocar nada
   acá. */
.flow-social__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.flow-social {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
@media (min-width: 560px) {
  .flow-social { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .flow-social { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .flow-social { grid-template-columns: repeat(5, 1fr); }
}
.flow-social__card {
  margin: 0;
  border-radius: 0; /* bordes rectos, como las ventanas nuevas */
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.6);
}
.flow-social__card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.flow-social__card figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-soft);
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--color-line);
}

/* ---------- Case cover: banner de LinkedIn ----------
   4:1 nativo (sin recorte) en desktop/tablet; en mobile ese mismo ratio
   deja "Stories that flow, brands that grow" ilegible, así que baja a un
   2.25:1 más alto y el object-position se corre a la izquierda — ahí vive
   el globo "Hi, I'm Yamil!" + el headline, que es lo que importa leer; el
   laptop con el dashboard de FLOW se recorta en vez del texto. */
.case-hero__cover--banner { --ph-ratio: 4 / 1; }
.case-hero__cover--banner img { object-position: 30% center; }
@media (max-width: 640px) {
  .case-hero__cover--banner { --ph-ratio: 9 / 4; }
}

/* ---------- Hero de FLOW (segunda vuelta: "banner integrado") ----------
   Elegido sobre mockups. Mismo lenguaje que los heros nuevos de Home y
   About: grilla de fondo, reglas a sangre, badges, Fjalla One + una palabra
   a mano. Arriba el título y el lede en dos celdas; en el medio el banner
   dentro de una ventana pixel "flow.exe"; abajo los cuatro datos como
   celdas. Reemplaza al .case-hero genérico solo en esta página. */
.flow-hero {
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --hero-rule: rgba(var(--overlay-rgb), 0.3);
  position: relative;
  isolation: isolate;
  /* mismo valor que .hero en home.css: la primera regla queda pegada al menú */
  padding-top: clamp(2.4rem, 1.9rem + 2.4vw, 4rem);
}
.flow-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(var(--overlay-rgb), 0.055) 0 1px, transparent 1px 8.333%),
    repeating-linear-gradient(0deg, rgba(var(--overlay-rgb), 0.04) 0 1px, transparent 1px 64px);
}
.flow-hero__frame { margin-inline: calc(-1 * var(--edge)); border-block: 1px solid var(--hero-rule); }
.flow-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: var(--space-sm) var(--edge); }
.flow-hero__number,
.flow-hero__badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 0.4em 1em;
  border: 1px solid rgba(var(--overlay-rgb), 0.5);
  color: var(--color-ink);
}
.flow-hero__badge { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-inverse-ink); font-weight: 600; }
.flow-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }

.flow-hero__top { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--hero-rule); }
.flow-hero__top > * { padding: clamp(0.8rem, 1.6vw, 1.5rem) var(--edge) clamp(1.1rem, 2vw, 1.9rem); min-width: 0; }
.flow-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 1rem + 5vw, 6.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.flow-hero__title .word--hand {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-gold);
  padding: 0.06em 0.12em 0.16em 0.1em;
  margin: -0.36em 0 -0.46em -0.04em;
}
.flow-hero__lede {
  display: flex;
  align-items: flex-end;
  border-top: 1px solid var(--hero-rule);
  font-family: var(--font-mono);
  font-size: clamp(0.84rem, 0.78rem + 0.25vw, 0.95rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.flow-hero__lede p { max-width: 58ch; }

.flow-hero__stage { position: relative; padding: clamp(1.25rem, 2.6vw, 2.2rem) var(--edge) clamp(1.75rem, 3vw, 2.75rem); border-top: 1px solid var(--hero-rule); }
.flow-hero__win {
  margin: 0 10px 0 0;
  border: 2px solid var(--color-ink);
  background: var(--color-bg);
  box-shadow: 10px 10px 0 var(--color-accent);
  font-family: var(--font-mono);
}
.flow-hero__bar,
.flow-hero__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}
.flow-hero__bar { background: var(--color-violet-vivid); border-bottom: 2px solid var(--color-ink); font-weight: 500; }
.flow-hero__bar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-hero__btn { flex: 0 0 auto; width: 14px; height: 14px; background: var(--color-gold); border: 2px solid var(--color-inverse-ink); }
.flow-hero__status { border-top: 2px solid var(--color-ink); }
.flow-hero__banner { overflow: hidden; aspect-ratio: 9 / 4; }
.flow-hero__banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.flow-hero__sticker {
  position: absolute;
  z-index: 2;
  right: calc(var(--edge) + 44px);
  top: clamp(-18px, -1vw, -8px);
  height: clamp(46px, 5vw, 72px);
  width: auto;
  rotate: 10deg;
  pointer-events: none;
  filter: drop-shadow(4px 4px 0 rgba(20, 10, 36, 0.5));
  animation: flow-hero-bob 1.2s infinite;
}
@keyframes flow-hero-bob { 0%, 49.9% { translate: 0 0; } 50%, 100% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .flow-hero__sticker { animation: none; } }

.flow-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--hero-rule); }
.flow-hero__facts > div { display: flex; flex-direction: column; gap: 0.45rem; padding: clamp(0.9rem, 1.6vw, 1.4rem) var(--edge); border-left: 1px solid var(--hero-rule); }
.flow-hero__facts > div:nth-child(odd) { border-left: 0; }
.flow-hero__facts > div:nth-child(n+3) { border-top: 1px solid var(--hero-rule); }
.flow-hero__facts dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-muted); }
.flow-hero__facts dd { margin: 0; display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem); line-height: 1.05; text-transform: uppercase; }
.flow-hero__live { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }

@media (min-width: 720px) {
  .flow-hero__banner { aspect-ratio: 4 / 1; }
}
@media (min-width: 1080px) {
  .flow-hero__top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .flow-hero__lede { border-top: 0; border-left: 1px solid var(--hero-rule); }
  .flow-hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow-hero__facts > div:nth-child(odd) { border-left: 1px solid var(--hero-rule); }
  .flow-hero__facts > div:first-child { border-left: 0; }
  .flow-hero__facts > div:nth-child(n+3) { border-top: 0; }
}