/* Diraspi — Propuesta B «LA AVENIDA». El hero es una avenida en sección, recorrida de 1965 (izquierda)
   al futuro (derecha): cinco carriles verticales con el rayado central atravesándolos como una sola
   marca vial. Los cuatro tramos se tratan igual: gris con velo navy, color al abrirse. */

/* altura atada a la ventana (no min-height): la banda de carriles tiene que entrar entera.
   Los nombres verticales llevan su PRIMERA letra abajo, así que cualquier píxel del carril
   que caiga bajo el pliegue se come el principio del nombre. */
.hero-b{height:calc(100vh - 72px);min-height:560px;margin-top:72px;display:flex;flex-direction:column;background:#fff}

/* ——— título centrado ——— */
.hb-title{text-align:center;max-width:900px;margin:0 auto;padding:56px 24px 40px}
.hb-display{margin:0;font-family:var(--mont);font-weight:800;font-size:clamp(46px,6.4vw,104px);
  line-height:1.02;letter-spacing:.005em;color:var(--navy)}
/* cada palabra se levanta por turno, recortada por su propia caja */
.hb-display span{display:inline-block;overflow:hidden;vertical-align:bottom}
.hb-display span i{display:inline-block;font-style:normal;
  animation:riseIn .7s cubic-bezier(.22,1,.36,1) both}
.hb-display span:nth-child(1) i{animation-delay:.08s}
.hb-display span:nth-child(2) i{animation-delay:.2s}
.hb-sub{margin:20px 0 0;font-family:var(--inter);font-weight:300;font-size:18px;color:var(--ink-2);
  animation:fadeUp .6s cubic-bezier(.22,1,.36,1) .3s both}

/* portátiles de pantalla baja (≈760-860px): el título cede altura para que la banda
   no se quede raquítica ahora que no puede desbordar */
@media (min-width:761px) and (max-height:860px){
  .hb-title{padding:34px 24px 24px}
  .hb-display{font-size:clamp(42px,4.6vw,66px)}
  .hb-sub{font-size:16px;margin-top:14px}
}

/* ——— la banda de carriles — de borde a borde ——— */
.lanes{position:relative;flex:1;min-height:0;display:flex;gap:3px}

@keyframes laneIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.lane{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;text-decoration:none;
  background:#F4F6F8;transition:flex-grow .6s cubic-bezier(.22,1,.36,1);
  animation:laneIn .6s cubic-bezier(.22,1,.36,1) var(--ld,0ms) both}
.lane:focus-visible{outline:2px solid var(--tur);outline-offset:-2px;z-index:2}

/* apertura (JS pone .is-open en el carril y .has-open en la banda) */
.lane.is-open{flex-grow:2.4}
.lanes.has-open .lane:not(.is-open){flex-grow:.82}

/* anti-distorsión: el ancho del carril anima, la imagen jamás se achata */
.lane img,.lane-vid{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;min-width:100%;
  max-width:none;filter:grayscale(1) contrast(1.06) brightness(1.03);transition:filter .5s ease}
/* el video no puede usar el truco de la imagen: su object-fit por defecto es «contain», así que
   en pantallas anchas —cuando min-width lo estira— aparecían barras vacías a los lados.
   Con cover llena el carril sea cual sea su proporción, y tampoco se deforma. */
.lane-vid{left:0;transform:none;width:100%;min-width:0;object-fit:cover}
.lane.is-open img,.lane.is-open .lane-vid{filter:none}
.lane-veil{position:absolute;inset:0;background:var(--navy);mix-blend-mode:color;opacity:.52;transition:opacity .5s ease}
.lane.is-open .lane-veil{opacity:0}
/* velo de lectura arriba y abajo: etiqueta mono y nombre legibles sobre cualquier foto */
.lane-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,24,46,.45) 0,transparent 22%,transparent 60%,rgba(2,24,46,.45) 100%)}

/* contenido plegado */
.lane-meta{position:absolute;left:14px;top:14px;right:10px;font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 1px rgba(2,20,38,.95),0 1px 2px rgba(2,20,38,.9),0 0 8px rgba(2,20,38,.55)}
.lane-vname{position:absolute;left:18px;bottom:18px;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mont);font-weight:800;font-size:20px;letter-spacing:.12em;color:#fff;
  text-shadow:0 2px 10px rgba(2,20,38,.5);transition:opacity .2s ease}
.lane.is-open .lane-vname{opacity:0}
/* el carril abierto es el dueño de la luz: los demás nombres ceden */
.lanes.has-open .lane:not(.is-open) .lane-vname{opacity:.5}

/* contenido abierto */
.lane-open{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:9px;
  opacity:0;transform:translateY(10px);transition:opacity .3s ease .15s,transform .3s cubic-bezier(.22,1,.36,1) .15s;
  pointer-events:none}
.lane.is-open .lane-open{opacity:1;transform:none}
.lo-tick{width:30px;height:4px;background:var(--tur);transform:scaleX(0);transform-origin:left center;
  transition:transform .32s cubic-bezier(.22,1,.36,1) .2s}
.lane.is-open .lo-tick{transform:scaleX(1)}
.lo-name{font-family:var(--mont);font-weight:800;font-size:30px;line-height:1;color:#fff;
  text-shadow:0 2px 14px rgba(2,20,38,.4);white-space:nowrap}
.lo-sub{font-family:var(--inter);font-weight:300;font-size:14px;line-height:1.5;color:rgba(255,255,255,.85);max-width:34ch}

/* paradas numeradas — sólo en la ruta móvil */
.lane-stop{display:none}

@media (prefers-reduced-motion:reduce){
  .hb-display span,.hb-sub,.lane{animation:none}
  .lane,.lane-veil,.lane img,.lane-vid,.lane-open,.lo-tick{transition-duration:.15s;transition-timing-function:linear}
}

/* modo captura/QA (?flat) */
.flat .hero-b{height:auto;min-height:0}
.flat .lanes{min-height:0;height:520px}
.flat .divider-b .db-dash{transform:scaleY(1)}

/* ——— el rayado dobla hacia abajo — telón entre actos ——— */
.divider-b{height:110px;background:#fff;display:flex;align-items:center;justify-content:center}
.db-dash{width:2px;height:72px;
  background:repeating-linear-gradient(180deg,rgba(0,48,87,.35) 0 14px,transparent 14px 24px);
  transform:scaleY(0);transform-origin:top center;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.divider-b.in .db-dash{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){.db-dash{transform:scaleY(1);transition:none}}

/* ——— responsive ——— */
@media (max-width:1100px){
  .meta-x{display:none} /* el detalle de la etiqueta no cabe en los carriles angostos */
}
@media (max-width:1100px) and (min-width:761px){
  /* en columna manda el contenido, no la ventana: los carriles llevan su propia altura */
  .hero-b{height:auto;min-height:0}
  .lanes{flex:none;min-height:0;flex-wrap:wrap;align-content:flex-start}
  .lane{flex-basis:0;height:min(52vh,440px)}
  .lo-name{font-size:24px}
}
@media (max-width:760px){
  /* «la ruta»: la avenida vista en planta, bajando por la pantalla junto a una espina rayada.
     La altura la da el contenido — el hero ya no se estira dejando blanco antes del telón. */
  .hero-b{height:auto;min-height:0}
  .hb-title{padding:40px 20px 28px}
  .hb-display{font-size:clamp(34px,9.5vw,46px)}
  .hb-sub{font-size:16px}
  .lanes{display:flex;flex-direction:column;gap:0;position:relative;flex:none;min-height:0;padding:8px 20px 0 48px}
  .lanes::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:2px;
    background:repeating-linear-gradient(180deg,rgba(0,48,87,.35) 0 14px,transparent 14px 24px)}
  /* ancho fijo en la ruta: la imagen se recorta con object-fit y el carril puede desbordar
     (overflow:visible) para que su parada numerada viva sobre la espina */
  .lane{height:132px;margin-bottom:3px;flex:none;overflow:visible;animation-name:fadeUp}
  .lane img,.lane-vid{left:0;transform:none;width:100%;height:100%;min-width:0;object-fit:cover;filter:grayscale(1)}
    .lane-veil{opacity:.5}
  .lane-vname{display:none}
  .lane-meta{font-size:10px;left:12px;top:12px}
  /* nombre horizontal siempre visible en la ruta */
  .lane-open{opacity:1;transform:none;left:12px;bottom:12px;gap:7px}
  .lo-tick{transform:scaleX(1)}
  .lo-name{font-size:22px}
  .lo-sub{display:none}
  .lane-stop{display:flex;align-items:center;justify-content:center;position:absolute;left:-32px;top:0;
    width:18px;height:18px;background:var(--navy);color:#fff;font-family:var(--mono);font-size:10px;z-index:2}
  /* la línea sigue la espina de la ruta: mismo eje que el rayado vertical de los carriles */
  .divider-b{height:96px;justify-content:flex-start;padding-left:24px}
  .db-dash{height:56px}
}