/* =====================================================================
   MC SYSTEMS · projects.css — PROJECTS / PROYECTOS (F4, dueño exclusivo)
   Banner B1 pill rompe-marco · galería bento G1 (reales estrella) ·
   banda ③ comprimida · CTA ⑤ C2 · lightbox 05 §7A
   ===================================================================== */

/* ---------------- NAV sobre banner oscuro (CONCEPT §4: logo en chip claro) ----------------
   Solo CSS local (.pg-projects): el HTML del nav sigue byte-idéntico al home. */
.pg-projects .nav-logo { display:inline-grid; place-items:center; background:var(--paper);
  border-radius:12px; padding:5px 7px; box-shadow:0 8px 20px rgba(16,20,31,.28); }
/* ---------------- P-① BANNER B1 (§13, scrim HORNEADO en el asset) ---------------- */
.pbanner { position:relative; height:44vh; min-height:clamp(320px,44vh,520px);
  overflow:hidden; background:var(--ink-2); }
.pb-media { position:absolute; inset:-8% 0; }
.pb-media img { width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.pb-ghost { position:absolute; right:4vw; bottom:-4%; z-index:1; font-family:var(--fd);
  font-weight:700; font-size:min(11vw,180px); line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(245,247,251,.6); opacity:.14; letter-spacing:.04em;
  text-transform:uppercase; pointer-events:none; white-space:nowrap; }
.pb-content { position:relative; z-index:2; height:100%; width:min(92vw,1360px);
  margin:0 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:12px; }
.pb-eyebrow { font-weight:600; font-size:12.5px; letter-spacing:.16em;
  color:var(--paper); text-transform:uppercase; }
.pb-eyebrow .d { color:#FF6B71; }
.pbanner h1 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.6rem,5.5vw,5.6rem); line-height:1; letter-spacing:.015em;
  color:var(--paper); }
/* pill rompe-marco: breadcrumb dentro de pill fría cortada ~50% por el borde inferior */
.pb-pill { position:absolute; left:50%; bottom:0; transform:translate(-50%,50%); z-index:3; }
.pb-pill nav { display:flex; align-items:center; gap:10px; background:var(--cold);
  border-radius:999px; padding:13px 26px; box-shadow:0 14px 34px rgba(31,35,115,.35);
  font-family:var(--fd); font-weight:600; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper); white-space:nowrap; }
.pb-pill a { color:var(--paper); text-decoration:none; }
.pb-pill a:hover { text-decoration:underline; text-underline-offset:3px; }
.pb-pill .d { color:#FF9BA0; }
.pb-pill [aria-current] { color:#C9CDFF; }

/* ---------------- P-② INTRO + FILTROS (puente frío banner→papel) ---------------- */
.pintro { position:relative; background:var(--paper); overflow:clip;
  padding:clamp(6.2rem,9vw,8.6rem) 0 clamp(1.6rem,2.4vw,2.4rem); }
.pintro-grid { width:min(92vw,1360px); margin:0 auto; }
.pintro .kicker { color:var(--cold-deep); }
.pintro h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.8rem,4.4vw,3.6rem); line-height:1.05; margin:16px 0 14px;
  max-width:24ch; }
.pintro h2 em { font-style:normal; color:var(--heat); }
.pintro p { font-size:15.5px; line-height:1.75; max-width:66ch; color:#2A3040; }
.pintro .note { font-size:12.5px; color:#5A6172; margin-top:10px; }
.pfilters { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(1.6rem,2.6vw,2.4rem); }
.fchip { font-family:var(--fu); font-weight:600; font-size:13px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--hairline); border-radius:999px;
  padding:10px 20px; cursor:pointer; }
.fchip[aria-pressed="true"] { background:var(--cold); border-color:var(--cold);
  color:var(--paper); }
.fchip:focus-visible { outline:2px solid var(--cold); outline-offset:2px; }

/* ---------------- P-② GALERÍA BENTO G1 (12 col, dense, cero celdas vacías) ---------------- */
.pgallery { background:var(--paper); padding:clamp(1.4rem,2.4vw,2.4rem) 0 clamp(4rem,7vw,7rem); }
/* SET dividido por el separador editorial (ley 0720-a #11): superior cierra ajustado
   contra la banda; inferior respira al salir de ella y conserva el remate largo. */
.pgallery.pg-top { padding-bottom:clamp(2.6rem,4.4vw,4.4rem); }
.pgallery.pg-bottom { padding-top:clamp(3rem,5vw,5rem); }
.pgrid { width:min(92vw,1360px); margin:0 auto; display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(150px,17vw,232px);
  grid-auto-flow:dense; gap:clamp(.7rem,1.2vw,1.15rem); }
.tile { position:relative; border:0; padding:0; background:var(--ink); cursor:pointer;
  border-radius:16px; overflow:hidden; text-align:left; display:block; width:100%; height:100%; }
.tile img { width:100%; height:100%; object-fit:cover; }
/* anillo estático que aparece por opacidad (§16.A5) — exención CSS sancionada */
.tile::after { content:""; position:absolute; inset:10px; border:1.5px solid rgba(245,247,251,.85);
  border-radius:9px; opacity:0; transition:opacity .3s; pointer-events:none; }
.tile:hover::after, .tile:focus-visible::after { opacity:1; }
.tile:focus-visible { outline:3px solid var(--cold); outline-offset:3px; }
.t-8x2 { grid-column:span 8; grid-row:span 2; }
.t-4x2 { grid-column:span 4; grid-row:span 2; }
.t-8x1 { grid-column:span 8; }
.t-4x1 { grid-column:span 4; }
.t-meta { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 16px 13px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  background:linear-gradient(to top, rgba(16,20,31,.72), transparent);
  pointer-events:none; }
.t-cap { font-size:12.5px; font-weight:500; color:var(--paper); line-height:1.4;
  text-shadow:0 1px 2px rgba(16,20,31,.5); }
.t-tag { flex:0 0 auto; font-family:var(--fd); font-weight:600; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--paper);
  background:rgba(44,49,153,.82); border-radius:999px; padding:5px 11px; }
.tile.is-real .t-tag { background:rgba(214,1,10,.85); }
.t-badge { position:absolute; top:12px; left:12px; z-index:2; font-family:var(--fd);
  font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); background:var(--heat); border-radius:999px; padding:6px 12px;
  box-shadow:0 8px 20px rgba(214,1,10,.35); pointer-events:none; }
/* tile respiro (superficie fría + hechos permitidos; no abre lightbox) */
.tile-stat { grid-column:span 4; background:var(--cold); border-radius:16px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:clamp(1.2rem,1.8vw,1.8rem); overflow:hidden; position:relative; }
.tile-stat::before { content:"\0394"; position:absolute; right:-8px; bottom:-26px;
  font-family:var(--fd); font-weight:700; font-size:120px; line-height:1;
  color:rgba(245,247,251,.08); }
.tile-stat .n { font-family:var(--fd); font-weight:700; font-size:clamp(2.4rem,3.4vw,3.4rem);
  line-height:1; color:var(--paper); font-variant-numeric:tabular-nums; }
.tile-stat .l { font-weight:600; font-size:13px; color:#C9CDFF; max-width:20ch; line-height:1.45; }
.tile-stat .s { font-size:11.5px; color:rgba(245,247,251,.75); letter-spacing:.06em;
  text-transform:uppercase; }
.tile.is-hidden { display:none; }

/* ---------------- P-③ BANDA ③ COMPRIMIDA (§5 vía §12.6) ---------------- */
.pband { position:relative; height:46vh; min-height:380px; overflow:hidden; background:var(--ink); }
.pband-photo { position:absolute; inset:-12% 0; }
.pband-photo img { width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.pband-scrim { position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(16,20,31,.80) 0%, rgba(16,20,31,.58) 48%, rgba(16,20,31,.22) 100%); }
.pband-inner { position:relative; z-index:2; width:min(92vw,1360px); margin:0 auto;
  height:100%; display:flex; flex-direction:column; justify-content:center; gap:22px; }
.pband .chip { align-self:flex-start; background:rgba(245,247,251,.14);
  border-color:rgba(245,247,251,.35); color:var(--paper); }
.pband h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,4rem); line-height:1.06; color:var(--paper); max-width:23ch; }
.pband h2 em { font-style:normal; color:#FF7B82; }

/* ---------------- P-⑤ CTA ⑤ C2 (contrato §7 — clases del sistema, hoja propia) ---------------- */
.cta-band { position:relative; height:64vh; min-height:460px; overflow:hidden; background:var(--ink-2); }
.cta-photo { position:absolute; inset:-10% 0; }
.cta-photo img { width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.cta-scrim { position:absolute; inset:0; background:rgba(14,18,32,.8); }
.cta-inner { position:relative; z-index:3; width:min(92vw,1200px); margin:0 auto; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:20px; }
.cta-inner .kicker { color:var(--steel); }
.cta-inner .kicker .d { color:#FF6B71; }
.cta-inner h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.1rem,4.6vw,3.9rem); line-height:1.03; color:var(--paper); }
.cta-inner h2 em { font-style:normal; color:var(--ice); }
.cta-inner p { font-size:15px; color:var(--steel); max-width:52ch; }
.cta-btns { display:flex; gap:14px; flex-wrap:nowrap; }
.cta-eco { position:absolute; right:3vw; bottom:-4%; z-index:2; width:min(22vw,300px);
  opacity:.9; pointer-events:none; }

/* ---------------- LIGHTBOX (05 §7A: dialog, foco, z-150) ---------------- */
.lb { position:fixed; inset:0; z-index:150; background:rgba(14,18,32,.94);
  display:flex; align-items:center; justify-content:center; padding:clamp(1rem,3vw,3rem); }
.lb[hidden] { display:none; }
.lb figure { position:relative; max-width:min(92vw,1280px); max-height:88vh;
  display:flex; flex-direction:column; gap:12px; }
.lb img { max-width:100%; max-height:78vh; width:auto; height:auto; margin:0 auto;
  border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lb figcaption { text-align:center; font-size:13.5px; color:var(--steel); }
.lb figcaption b { color:var(--paper); font-weight:600; }
.lb-close, .lb-prev, .lb-next { position:absolute; z-index:2; display:grid; place-items:center;
  width:48px; height:48px; border-radius:999px; border:1px solid rgba(245,247,251,.4);
  background:rgba(16,20,31,.6); color:var(--paper); font-size:20px; line-height:1;
  cursor:pointer; font-family:var(--fu); }
.lb-close { top:clamp(12px,2.4vh,22px); right:3vw; }
.lb-prev { left:3vw; top:50%; margin-top:-24px; }
.lb-next { right:3vw; top:50%; margin-top:-24px; }
.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible {
  outline:2px solid var(--ice); outline-offset:2px; }
body.lb-open { overflow:hidden; }

/* ---------------- MQ (ley l) ---------------- */
@media (max-width:900px) {
  .pgrid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(150px,26vw,220px); }
  .t-8x2 { grid-column:span 2; grid-row:span 2; }
  .t-4x2 { grid-column:span 1; grid-row:span 2; }
  .t-8x1 { grid-column:span 2; }
  .t-4x1 { grid-column:span 1; }
  .tile-stat { grid-column:span 1; }
  .t-meta { padding:26px 12px 10px; }
  .t-cap { font-size:11.5px; }
  .t-tag { display:none; }
}
@media (max-width:760px) {
  .pbanner { height:auto; min-height:0; padding:clamp(7rem,26vw,9rem) 0 clamp(3.4rem,12vw,4.6rem); }
  .pb-content { height:auto; }
  .pb-ghost { font-size:24vw; bottom:-2%; }
  .pb-pill nav { padding:11px 18px; font-size:11px; gap:8px; }
  .pintro { padding-top:clamp(4.6rem,15vw,6rem); }
  .pband { height:auto; min-height:0; padding:clamp(4rem,14vw,6rem) 0; }
  .pband-inner { padding:0; }
  .pband h2 { text-shadow:0 1px 2px rgba(16,20,31,.45), 0 2px 10px rgba(16,20,31,.30); }
  .cta-band { height:auto; min-height:0; padding:clamp(4rem,14vw,6rem) 0; }
  .cta-inner { padding:0; }
  .cta-btns { flex-direction:column; width:min(78vw,320px); }
  .cta-eco { display:none; }
  .lb-prev { left:2vw; top:auto; bottom:14px; margin-top:0; }
  .lb-next { right:2vw; top:auto; bottom:14px; margin-top:0; }
  .lb-close { right:2vw; }
  .lb img { max-height:66vh; }
}
@media (max-width:560px) {
  .pgrid { grid-template-columns:1fr; grid-auto-rows:auto; }
  .t-8x2, .t-4x2, .t-8x1, .t-4x1, .tile-stat { grid-column:span 1; grid-row:span 1; }
  .tile { aspect-ratio:4/3; }
  .tile.t-4x2 { aspect-ratio:3/4; }
  .tile-stat { aspect-ratio:auto; min-height:150px; }
  .t-tag { display:inline-block; }
}