/* 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 ———
   El giro tipográfico de la casa, el mismo de .q-display en NOSOTROS: el bloque Montserrat
   cede a la serif en cursiva. La frase es larga, así que va en dos renglones fijos —uno por
   voz— en vez de una línea gigante que se parta donde caiga. */
.hb-title{text-align:center;max-width:1060px;margin:0 auto;padding:56px 24px 40px}
.hb-display{margin:0;font-family:var(--mont);font-weight:800;font-size:clamp(30px,4.9vw,76px);
  line-height:1.05;letter-spacing:-.018em;color:var(--navy)}
/* la cursiva cierra la frase: un punto más grande, que su ojo es menor que el de Montserrat */
.hb-display .hb-em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.14em;line-height:1;letter-spacing:-.004em}
/* cada renglón se levanta por turno, recortado por su propia caja; el relleno inferior aparta
   el recorte de los descendentes de la cursiva */
.hb-display span{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hb-display span i{display: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}
/* el sello bajo la frase: mono espaciada, el registro técnico con que la casa firma fechas
   y lugares (ver .ha-years y .q-eyebrow). Contrapesa el display sin competirle */
.hb-sub{margin:26px 0 0;font-family:var(--mono);font-weight:500;font-size:12.5px;
  letter-spacing:.22em;text-transform:uppercase;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(28px,3.8vw,52px)}
  .hb-sub{font-size:11.5px;letter-spacing:.2em;margin-top:16px}
}

/* ——— 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}
  /* en la ruta el renglón Montserrat se parte solo; tres líneas apiladas leen mejor que
     un cuerpo diminuto forzado a entrar de una */
  .hb-display{font-size:clamp(27px,7.4vw,38px)}
  .hb-sub{font-size:10.5px;letter-spacing:.16em;margin-top:18px}
  .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}
}