/* ============================================================
   MISSION HEALTH INSURANCE · historias.css  (/proyectos/ · /en/projects/)
   Banner B4 ink -> G1 BENTO protagonista (fotos REALES + filtros) ->
   R1 RUTA DE CIRCULOS (camino punteado que se dibuja) ->
   G3 EDITORIAL DESFASADO -> lightbox accesible -> CTA -> footer
   ============================================================ */

/* ---------- cabecera de galeria + filtros ---------- */
.gal{position:relative;overflow:clip;background:var(--surface);color:var(--ink)}
.gal--bento{padding:var(--splg) var(--inset) var(--sp)}
.gal--offset{padding:var(--sp) var(--inset) var(--splg)}
.gal .ghost-word{right:0;top:0;font-size:min(12vw,180px)}
.gal--offset .ghost-word{left:0;right:auto;top:auto;bottom:1%}
.gal-head{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;margin-bottom:clamp(1.8rem,3vw,2.6rem);
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.2rem}
.gal-head .kicker{margin-bottom:1rem}
.gal-head p{color:var(--ink-soft);max-width:44ch;font-size:1.02rem}
.fchips{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(1.6rem,2.6vw,2.2rem)}
.fchip{display:inline-flex;align-items:center;min-height:var(--tap);padding:.6rem 1.25rem;border-radius:999px;
  border:1.5px solid var(--hairline);background:rgba(255,255,255,.55);font-weight:600;font-size:.92rem;color:var(--ink-soft);
  transition:background-color .25s,color .25s,border-color .25s}
.fchip:hover{color:var(--ink);border-color:var(--ink-soft)}
.fchip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- G1 · BENTO protagonista ---------- */
.bento{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;display:grid;
  grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,15vw,205px);grid-auto-flow:dense;
  gap:clamp(.7rem,1.1vw,1.1rem)}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--hairline)}
.tile.t-hide{display:none}
.t-f{grid-column:span 8;grid-row:span 2}
.t-m{grid-column:span 4;grid-row:span 2}
.t-s{grid-column:span 4;grid-row:span 1}
.tile-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;display:block;cursor:zoom-in}
.tile-btn img{width:100%;height:100%;object-fit:cover}
.tile-btn::after{content:"";position:absolute;inset:8px;border:1.5px solid rgba(255,255,255,.85);border-radius:calc(var(--radius) - 7px);opacity:0;transition:opacity .3s}
.tile-btn:hover::after,.tile-btn:focus-visible::after{opacity:1}
.tile-tag{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .7rem;border-radius:999px;background:rgba(13,27,46,.72);color:#F5F8FB;font-size:.72rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.tile-tag b{font-weight:600}
/* tile respiro de marca (stat permitido) */
.tile--stat{background:linear-gradient(150deg,#0F4E8C 0%,var(--blue) 60%,#0A5296 100%);border-color:transparent;
  color:#fff;display:grid;align-content:end;gap:.3rem;padding:clamp(1.1rem,1.6vw,1.5rem)}
.tile--stat svg{width:30px;height:auto;color:rgba(255,255,255,.9);margin-bottom:.4rem}
.tile--stat b{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1}
.tile--stat span{font-size:.9rem;color:rgba(255,255,255,.85);max-width:20ch}

/* ---------- R1 · RUTA DE CIRCULOS ---------- */
.ruta{position:relative;overflow:clip;background:var(--surface-2);color:var(--ink);padding:var(--sp) var(--inset)}
.ruta::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(70% 90% at 82% 18%,rgba(255,255,255,.5),transparent 62%)}
.ruta-map{position:absolute;inset:-8% 0;pointer-events:none;background-image:radial-gradient(rgba(13,27,46,.09) 1.2px,transparent 1.3px);background-size:26px 26px;opacity:.5}
.ruta-inner{position:relative;z-index:2;width:min(100%,1280px);margin-inline:auto}
.ruta-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.2rem;margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.ruta-head .kicker{margin-bottom:1rem}
.ruta-note{color:var(--ink-soft);max-width:38ch;font-size:1.02rem}
.ruta-track{position:relative}
.ruta-path{position:absolute;left:2%;right:2%;top:8%;height:84%;width:96%;pointer-events:none;color:rgba(12,98,181,.5)}
.ruta-path path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-dasharray:.5 11;stroke-linecap:round}
.ruta-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,2.4rem);justify-items:center}
.rstep{position:relative;text-align:center;max-width:250px}
.ruta-steps .rstep:nth-child(2),.ruta-steps .rstep:nth-child(3){margin-top:26px}
.r-circle{position:relative;width:clamp(160px,14.5vw,225px);aspect-ratio:1;border-radius:50%;margin-inline:auto;
  display:grid;place-content:center;gap:.5rem;padding:1.2rem;
  background:var(--band-2);color:var(--on-dark);box-shadow:0 30px 56px -34px rgba(13,27,46,.55)}
.rstep--alt .r-circle{background:var(--blue);color:#fff}
.r-circle svg{width:36px;height:36px;margin-inline:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.r-circle b{font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.15}
.r-badge{position:absolute;top:4px;right:4px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1.5px solid var(--hairline);color:var(--red);font-family:var(--font-display);font-weight:700;font-size:.95rem;
  box-shadow:0 14px 26px -14px rgba(13,27,46,.5)}
.rstep>p{margin-top:1rem;color:var(--ink-soft);font-size:.94rem;max-width:24ch;margin-inline:auto}

/* ---------- G3 · EDITORIAL DESFASADO ---------- */
.gcols{position:relative;z-index:2;width:min(100%,1360px);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.8rem)}
.gcol{display:grid;gap:clamp(1rem,1.8vw,1.8rem);align-content:start}
.gcol+.gcol{border-left:1px solid var(--hairline-2);padding-left:clamp(1rem,1.8vw,1.8rem)}
.gcol:nth-child(2){margin-top:52px}
.gcol:nth-child(3){margin-top:104px}
.gcol .tile{position:relative}
.gcol .tile .tile-btn{position:relative;inset:auto}
.r-34 .tile-btn img{aspect-ratio:3/4}
.r-11 .tile-btn img{aspect-ratio:1/1}
.r-43 .tile-btn img{aspect-ratio:4/3}

/* ---------- LIGHTBOX accesible (05 §7A · z 150) ---------- */
.lightbox{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem)}
.lightbox[hidden]{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(10,14,20,.93)}
.lb-stage{position:relative;z-index:2;max-width:min(1100px,94vw);width:100%}
.lb-img{width:100%;max-height:76vh;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.04)}
.lb-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;color:#D7E2EE;font-size:.9rem}
.lb-cat{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;color:#8FC0F0}
.lb-btn{position:absolute;z-index:3;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(245,248,251,.12);border:1.5px solid rgba(245,248,251,.3);color:#F5F8FB;
  transition:background-color .25s,border-color .25s}
.lb-btn:hover{background:rgba(245,248,251,.22);border-color:rgba(245,248,251,.6)}
.lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-close{top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem)}
.lb-prev{left:clamp(.4rem,1.6vw,1.2rem);top:50%;translate:0 -50%}
.lb-next{right:clamp(.4rem,1.6vw,1.2rem);top:50%;translate:0 -50%}

/* ---------- MOBILE / TABLET (ley l) ---------- */
@media (max-width:900px){
  .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(120px,24vw,190px)}
  .t-f{grid-column:span 6}
  .t-m{grid-column:span 3}
  .t-s{grid-column:span 3}
  .gcols{grid-template-columns:1fr 1fr}
  .gcol:nth-child(3){margin-top:0;border-left:0;padding-left:0;grid-column:1 / -1;
    display:grid;grid-template-columns:1fr 1fr}
  .ruta-steps{grid-template-columns:1fr 1fr}
  .ruta-steps .rstep:nth-child(2),.ruta-steps .rstep:nth-child(3){margin-top:0}
  .ruta-path{display:none}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(130px,34vw,190px)}
  .t-f{grid-column:span 2}
  .t-m,.t-s{grid-column:span 1}
  .gcols{grid-template-columns:1fr}
  .gcol:nth-child(2){margin-top:0}
  .gcol:nth-child(3){grid-template-columns:1fr}
  .gcol+.gcol{border-left:0;padding-left:0}
  .ruta-steps{grid-template-columns:1fr}
  .lb-prev{left:.3rem}
  .lb-next{right:.3rem}
}