/* ============================================================
   Auditas — Flow (proceso interactivo)
   Mobile-first: tabs horizontales desplazables.
   >=821px: diagrama en zig-zag (posiciones absolutas).
   >=1225px: panel y diagrama lado a lado.
   ============================================================ */
.flow {
  position: relative;
  background: linear-gradient(126.62653664501522deg, var(--black60) 4.2166%, var(--black90) 94.401%);
  overflow: hidden;
}
.flow__inner {
  --flow-pad: clamp(20px, 5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-28);
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 var(--flow-pad) 0;
}

/* ---- Panel del título ----
   Móvil/tablet: banda oscura de borde a borde (texto centrado) con la
   sombra proyectada hacia ABAJO. En escritorio (>=1225px) se convierte
   en el panel lateral de altura completa que llega hasta el borde izquierdo. */
.flow__title {
  background: var(--black90);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.40); /* sombra inferior */
  margin-inline: calc(-1 * var(--flow-pad)); /* full-bleed hasta los bordes */
  padding: clamp(28px, 4vw, 40px) var(--flow-pad);
  text-align: center;
}
.flow__heading {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--whitef);
  line-height: 1.12;
  margin-bottom: var(--sp-12);
}
.flow__subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--gray30);
  line-height: 1.35;
  max-width: 280px;
  margin-inline: auto; /* centrado en móvil/tablet; se anula en escritorio */
}

/* ---- Columna interactiva ---- */
.flow__interactive { display: flex; flex-direction: column; gap: var(--sp-28); width: 100%; }

/* ===== FLOWCHART (base = tabs móviles) ===== */
.flowchart { position: relative; width: 100%; }
.flow-lanes, .flow-conns { display: none; }

.flow-steps {
  display: flex;
  gap: var(--sp-8);
  overflow-x: auto;
  /* padding-top: al fijar overflow-x el navegador computa overflow-y como
     "auto" también (mismo bug de fondo que el de position:sticky, sección 8
     del estado del proyecto) — sin este margen, el paso activo/tocado
     (que crece 6% por .flow-step:hover, incluido el toque en móvil) se
     recorta arriba/abajo (bug visto en móvil real, 2026-07-11). */
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-12);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.flow-steps::-webkit-scrollbar { height: 6px; }
.flow-steps::-webkit-scrollbar-thumb { background: var(--gray70); border-radius: var(--r-pill); }

.flow-step {
  flex: 0 0 auto;
  min-width: 150px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 0 18px;
  border-radius: var(--r-l);
  border: 2px solid var(--gray70);
  background: var(--black70);
  scroll-snap-align: start;
  transition: transform var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out);
}
.flow-step:hover { transform: scale(1.06); }
.flow-step__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r-pill);
  border: 2px solid var(--gray70);
  background: var(--black70);
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: var(--fs-mini);
  color: var(--whitef);
  transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.flow-step__label {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--gray40);
  white-space: nowrap;
  transition: color var(--t-med) var(--ease-out);
}
/* Estado activo (paso seleccionado) */
.flow-step.is-active { background: var(--yelludit80); border-color: var(--yelludit); }
.flow-step.is-active .flow-step__pill { background: var(--yelludit); border-color: var(--yelludit); color: var(--blackdit); }
.flow-step.is-active .flow-step__label { color: var(--grayudit); }

.flow-mstep-arrow {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--gray60);
  font-size: 22px;
  font-weight: 700;
}

/* ---- Tarjeta de detalle ---- */
.flow-details {
  width: 100%;
  max-width: 612px;
  min-height: 196px; /* alto fijo: el detalle no cambia de tamaño entre pasos */
  margin-inline: auto;
  background: var(--black80);
  border: 1px solid var(--gray70);
  border-bottom: none;
  border-radius: var(--r-l) var(--r-l) 0 0;
  padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-details__inner { width: 100%; max-width: 482px; display: flex; flex-direction: column; gap: var(--sp-8); }
.flow-details__head { display: flex; align-items: center; gap: var(--sp-8); }
.flow-details__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--yelludit);
  border: 2px solid var(--yelludit);
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: var(--fs-mini);
  color: var(--blackdit);
}
.flow-details__title {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--whitef);
  line-height: 1.2;
}
.flow-details__text {
  font-family: var(--font-body);
  font-size: var(--fs-link);
  color: var(--whitef);
  line-height: 1.35;
}

/* ============================================================
   >=821px — diagrama en zig-zag (posiciones absolutas)
   ============================================================ */
@media (min-width: 821px) {
  .flowchart { width: 735px; height: 236px; margin-inline: auto; }
  .flow-lanes { display: block; }
  .flow-conns { display: block; position: absolute; inset: 0; }

  .flow-lane {
    position: absolute;
    left: 0;
    width: 105px;
    color: var(--gray40); /* legible sobre el fondo oscuro; se vuelve dorado al activarse */
    font-family: var(--font-title);
    font-weight: var(--fw-bold);
    font-size: var(--fs-mini);
    transition: color var(--t-med) var(--ease-out);
  }
  .flow-lane::after { content: ""; display: block; width: 105px; height: 2px; margin-top: 4px; background: currentColor; }
  .flow-lane--empre { top: 34px; }
  .flow-lane--aud { top: 182px; }
  .flow-lane.is-on { color: var(--yelludit); }

  .flow-conn { position: absolute; color: var(--gray60); transition: color var(--t-med) var(--ease-out); }
  .flow-conn svg { display: block; width: 100%; height: 100%; }
  .flow-conn--down1 { left: 188px; top: 104px; width: 24px; height: 24px; }
  .flow-conn--down2 { left: 416px; top: 104px; width: 24px; height: 24px; }
  .flow-conn--union1 { left: 294.75px; top: 35.5px; width: 36.5px; height: 156.5px; }
  .flow-conn--union2 { left: 520.75px; top: 35.5px; width: 36.5px; height: 156.5px; }
  .flow-conn.is-on { color: var(--yelludit); }

  .flow-steps { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; }
  .flow-step {
    position: absolute;
    width: 166px;
    height: 88px;
    min-width: 0;
    padding: 0 12px;
    border-radius: var(--r-l);
    transform-origin: center;
  }
  .flow-step[data-step="1"] { left: 117px; top: 0; }
  .flow-step[data-step="2"] { left: 117px; top: 148px; }
  .flow-step[data-step="3"] { left: 345px; top: 0; }
  .flow-step[data-step="4"] { left: 343px; top: 148px; }
  .flow-step[data-step="5"] { left: 569px; top: 0; }
  .flow-mstep-arrow { display: none; }

  .flow__interactive { gap: 56px; align-items: center; }
}

/* ============================================================
   >=1225px — panel y diagrama lado a lado
   ============================================================ */
@media (min-width: 1225px) {
  .flow__inner {
    flex-direction: row;
    align-items: stretch;
    gap: 53px;
    padding: 0; /* sin padding vertical: el contenido llena la sección de borde a borde */
  }
  .flow__title {
    flex: none;
    width: 437px;
    position: relative;
    z-index: 0;
    background: transparent; /* el fondo lo pinta ::before (se extiende a x=0) */
    box-shadow: none;
    margin-inline: 0;
    padding: clamp(48px, 6vh, 96px) clamp(48px, 4vw, 98px);
    display: flex;
    flex-direction: column;
    justify-content: center; /* texto centrado verticalmente en el panel */
    text-align: left;
  }
  /* Losa de fondo: cubre el panel Y se extiende hasta el borde izquierdo de
     la ventana (la sección la recorta con overflow:hidden). El texto no se mueve. */
  .flow__title::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: -50vw;
    z-index: -1;
    background: var(--black90);
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.40);
  }
  .flow__subtitle { margin-inline: 0; }
  .flow__interactive {
    flex: 1;
    justify-content: center; /* flowchart + detalle centrados, sin bandas vacías */
    padding-top: clamp(40px, 5vh, 72px);
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-step, .flow-step__pill, .flow-step__label, .flow-lane, .flow-conn { transition: none; }
}