/* ============================================================
   VENTURA · projects.css — G1 bento protagonista (oscuro) +
   R1 ruta de círculos + G2 muro denso + lightbox 05§7A
   ============================================================ */

/* ============ G1 · BENTO PROTAGONISTA (abre oscuro §12.11) ============ */
.gal-hero{background:var(--ink);color:var(--t-on-dark)}
.gal-hero .sec-head h2{color:var(--t-on-dark)}
.bento-g{
  position:relative;z-index:2;display:grid;gap:clamp(.8rem,1.4vw,1.3rem);
  grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;grid-auto-flow:dense;
}
.gt{
  position:relative;border-radius:14px;overflow:hidden;background:var(--ink-3);
  padding:0;display:block;width:100%;text-align:left;cursor:zoom-in;
}
.gt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gt::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(217,181,118,.65);
  border-radius:8px;opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.gt:hover::after,.gt:focus-visible::after{opacity:1}
.gt .gt-tag{
  position:absolute;left:12px;bottom:12px;z-index:2;
  font:700 .6rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-on-dark);background:rgba(20,23,26,.62);border-radius:999px;padding:.4rem .65rem;
}
.gt-w2{grid-column:span 2}
.gt-h2{grid-row:span 2}
/* tile respiro de marca con dato permitido */
.gt-stat{
  background:linear-gradient(160deg,#1B1F23 0%,var(--ink-3) 100%);
  border:1px solid rgba(217,181,118,.35);border-radius:14px;
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:1.4rem;cursor:default;
}
.gt-stat .big{font-family:var(--f-display);font-weight:900;font-size:2.6rem;line-height:1;color:var(--gold)}
.gt-stat p{font:700 .68rem/1.5 var(--f-ui);letter-spacing:.15em;text-transform:uppercase;color:var(--t-on-dark-muted)}
.g1-ghost{right:0;top:-2%;font-size:clamp(7rem,13vw,13rem)}

/* ============ R1 · RUTA DE CÍRCULOS (P-③) ============ */
.route{position:relative;background:var(--champagne);overflow:clip;padding-block:clamp(4.5rem,7vw,7rem)}
.route-map{
  position:absolute;inset:-6% 0;z-index:1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(128,137,142,.35) 1.15px,transparent 1.3px);
  background-size:26px 26px;
}
.route-head{position:relative;z-index:3;text-align:center;margin-bottom:clamp(2.6rem,5vh,4rem)}
.route-head h2{font-size:clamp(2.1rem,4.2vw,4.2rem);color:var(--t-on-light)}
.route-head .kicker{justify-content:center;margin-bottom:1rem}
.route-lane{position:relative;z-index:3;max-width:1220px;margin-inline:auto}
.route-path{position:absolute;inset:0;z-index:1;pointer-events:none;color:rgba(130,92,44,.55)}
.route-path path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-dasharray:6 7}
.route-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem)}
.rc{position:relative;display:flex;justify-content:center}
.rc:nth-child(2),.rc:nth-child(3){transform:translateY(26px)}
.rc-circle{
  position:relative;width:clamp(180px,15.5vw,240px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  text-align:center;padding:1.2rem;
}
.rc:nth-child(odd) .rc-circle{background:var(--ink);color:var(--t-on-dark)}
.rc:nth-child(even) .rc-circle{background:var(--gold);color:var(--ink)}
.rc-circle svg{width:34px;height:34px}
.rc:nth-child(odd) .rc-circle svg{color:var(--gold)}
.rc:nth-child(even) .rc-circle svg{color:var(--ink)}
.rc-circle h3{font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.18;letter-spacing:.05em;text-transform:uppercase;max-width:13ch}
.rc-circle p{font-size:.76rem;line-height:1.4;opacity:.82;max-width:17ch}
.rc-badge{
  position:absolute;top:-4px;right:8%;z-index:3;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:900;font-size:.85rem;
  background:var(--champagne);border:1px solid rgba(130,92,44,.5);color:var(--bronze);
  box-shadow:0 6px 16px rgba(29,33,38,.18);
}
.route-ghost{left:-2%;bottom:-8%;font-size:clamp(7rem,13vw,13rem);z-index:2}

/* ============ G2 · MURO DENSO ============ */
.gal-wall{background:var(--paper)}
.wall{
  position:relative;z-index:2;display:grid;gap:clamp(.5rem,1vw,1rem);
  grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,22vw);grid-auto-flow:dense;
}
.wall .gt{border-radius:10px}
.wall .gt::after{inset:8px;border-radius:5px}
.w2{grid-column:span 2}
.g2-ghost{right:0;top:-3%;font-size:clamp(6rem,11vw,11rem)}

/* ============ LIGHTBOX (verbatim 05§7A) ============ */
.lb{position:fixed;inset:0;z-index:150;display:none}
.lb.is-open{display:block}
.lb-back{position:absolute;inset:0;background:rgba(14,17,20,.94)}
.lb-stage{position:absolute;inset:4% 5%;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-cap{
  position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);
  font:600 .8rem/1.4 var(--f-ui);letter-spacing:.06em;color:var(--t-on-dark-muted);
  background:rgba(20,23,26,.7);border-radius:999px;padding:.5rem .95rem;max-width:90%;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lb-btn{
  position:absolute;z-index:2;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(217,181,118,.55);color:var(--gold);background:rgba(20,23,26,.72);
  display:flex;align-items:center;justify-content:center;
}
.lb-btn svg{width:20px;height:20px}
.lb-close{top:2.5%;right:2.5%}
.lb-prev{left:2%;top:50%;margin-top:-26px}
.lb-next{right:2%;top:50%;margin-top:-26px}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .bento-g{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .wall{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(160px,42vw)}
  .route-row{grid-template-columns:1fr 1fr;row-gap:2.4rem}
  .rc:nth-child(2),.rc:nth-child(3){transform:none}
  .route-path{display:none}
  .lb-prev{left:1%}
  .lb-next{right:1%}
}
@media (max-width:560px){
  .bento-g{grid-template-columns:1fr;grid-auto-rows:230px}
  .gt-w2,.w2{grid-column:auto}
  .gt-h2{grid-row:auto}
  .wall{grid-template-columns:1fr 1fr}
  .route-row{grid-template-columns:1fr}
  .rc-circle{width:min(72vw,260px)}
}