/* ============================================================
   KEYSTONE LANDSCAPE COMPANY · projects.css
   Página PROJECTS (EN /projects/ + ES /es/proyectos/) — dueña única.
   Banner mini-sandwich (eco del hero) · G1 bento protagonista ·
   R4 ruta sobre plano · G3 editorial desfasado · lightbox 05 §7A ·
   CTA C2. Componentes comunes viven en base.css (j9a).
   ============================================================ */

/* ============ P-① BANNER — mini-sandwich (abre OSCURO, §12.11) ============ */
.pbanner{
  position:relative;min-height:clamp(340px,48vh,560px);overflow:clip;
  background:var(--ink);color:var(--on-dark);
  display:grid;place-items:center;
  padding:calc(var(--nav-h) + 56px) var(--gutter) clamp(3rem,5vw,4rem);
}
.pbanner-media{
  position:absolute;left:0;top:-10%;width:100%;height:120%;
  object-fit:cover;will-change:transform;z-index:0;
}
/* ghost-word de la página: Montserrat HUECO (ADN del contorno del hero), cortado abajo */
.pbanner-ghost{
  position:absolute;left:50%;bottom:-.24em;transform:translateX(-50%);
  z-index:1;pointer-events:none;user-select:none;white-space:nowrap;
  font-family:var(--display);font-weight:900;line-height:.8;letter-spacing:.01em;
  font-size:min(13vw,180px);
  color:transparent;-webkit-text-stroke:2px rgba(242,247,252,.14);
  will-change:transform;
}
/* numeración editorial HUD (03 · PROJECTS) */
.pbanner-eyebrow{
  position:absolute;top:104px;left:0;right:0;z-index:2;text-align:center;
  font-weight:700;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;
  color:#8FC5F5;
}
.pbanner-inner{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:18px;will-change:transform}
.pbanner-h1{
  font-family:var(--display);font-weight:800;line-height:1.03;
  font-size:clamp(2.6rem,5.5vw,5.6rem);
  text-shadow:0 2px 14px rgba(4,16,36,.55);
}
.pbanner-h1 em{
  font-style:normal;color:transparent;text-shadow:none;
  -webkit-text-stroke:clamp(1.6px,.16vw,3px) #F2F7FC;
}
.pbanner-crumb{display:flex;align-items:center;gap:10px;font-size:14px;color:#C9D6E6}
.pbanner-crumb a{position:relative;transition:color .25s}
.pbanner-crumb a::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--sky);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s var(--ease);
}
.pbanner-crumb a:hover{color:#fff}
.pbanner-crumb a:hover::after{transform:scaleX(1)}
.pbanner-crumb .cube-sep{width:13px;height:14px;opacity:.85}
.pbanner-crumb [aria-current]{color:#fff;font-weight:700}
.pbanner-chip{position:absolute;right:var(--gutter);bottom:26px;z-index:2}

/* pre-siembra (0714-c p2: .001, jamás 0) — GSAP compone; sin JS/reduced/langswap se ve todo */
html.js .pbanner-media,html.js .pbanner-ghost,html.js .pbanner-eyebrow,
html.js .pbanner-crumb,html.js .pbanner-chip{opacity:.001}
html:not(.js) .pbanner-media,html.motion-off .pbanner-media,html.langswap .pbanner-media,
html:not(.js) .pbanner-ghost,html.motion-off .pbanner-ghost,html.langswap .pbanner-ghost,
html:not(.js) .pbanner-eyebrow,html.motion-off .pbanner-eyebrow,html.langswap .pbanner-eyebrow,
html:not(.js) .pbanner-crumb,html.motion-off .pbanner-crumb,html.langswap .pbanner-crumb,
html:not(.js) .pbanner-chip,html.motion-off .pbanner-chip,html.langswap .pbanner-chip{opacity:1}

/* ============ FILTROS (taxonomía espejo · estado en URL ?type=/?tipo=) ============ */
.ghead{
  position:relative;z-index:2;display:flex;align-items:end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;max-width:1280px;margin:0 auto clamp(1.6rem,2.8vw,2.4rem);
}
.ghead h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.05;
}
.ghead .kicker{display:block;margin-bottom:14px}
.filters{
  position:relative;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:1280px;margin:0 auto clamp(1.8rem,3vw,2.6rem);
}
.fchip{
  font-weight:700;font-size:13.5px;letter-spacing:.02em;line-height:1;
  color:var(--accent);border:1.5px solid rgba(5,70,164,.35);border-radius:999px;
  padding:11px 18px;background:transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.fchip:hover{border-color:var(--accent);background:rgba(5,70,164,.07)}
.fchip[aria-pressed="true"]{background:var(--accent);color:var(--on-dark);border-color:var(--accent)}
.fcount{margin-left:auto;font-size:13.5px;color:var(--muted);font-weight:500}

/* ============ GALERÍAS — lienzo común (fondos jamás planos, ley q) ============ */
.gal{
  position:relative;overflow:clip;
  padding:clamp(6rem,7.5vw,8.25rem) var(--gutter) clamp(4.5rem,6vw,6rem);
}
.gal--one{background:var(--surface);padding-bottom:clamp(6rem,7.5vw,8rem)}
.gal--two{background:var(--surface-2);padding-top:clamp(4.5rem,6vw,6rem)}
.gal::before{
  content:'';position:absolute;inset:0;opacity:.05;pointer-events:none;
  background:url('/assets/img/pattern-pavers.svg');
}
.gal-cota{position:absolute;top:5%;right:3%;width:170px;opacity:.5;pointer-events:none}

/* --- G1 · BENTO PROTAGONISTA (bandas: featured 2×2 alternando lado, dense) --- */
.bgrid{
  position:relative;z-index:2;display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,23vh);
  grid-auto-flow:dense;max-width:1280px;margin:0 auto;
}
.gtile{
  position:relative;border-radius:14px;overflow:clip;
  box-shadow:0 14px 36px rgba(11,38,74,.14);
  background:var(--surface-2);
}
.gtile.f-hide{display:none}
.gt-f--l{grid-column:1/3;grid-row:span 2}
.gt-f--r{grid-column:3/5;grid-row:span 2}
.gtile__btn{
  display:block;width:100%;height:100%;padding:0;cursor:zoom-in;text-align:left;
}
.gtile img{width:100%;height:100%;object-fit:cover;will-change:transform}
.gtile__tag{
  position:absolute;left:12px;bottom:12px;z-index:2;
  font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(7,28,58,.58);border-radius:999px;padding:7px 12px;
  pointer-events:none;
}
body:not(.is-booting) .gtile__tag{backdrop-filter:blur(4px)}
/* anillo inset estático que aparece por opacidad (§16.5 — jamás filter/box-shadow animados) */
.gtile::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:14px;
  box-shadow:inset 0 0 0 3px var(--sky-mid);opacity:0;transition:opacity .25s ease;
}
.gtile:hover::after,.gtile:focus-within::after{opacity:1}

/* --- G3 · EDITORIAL DESFASADO (3 columnas, ratios alternados, hairlines) --- */
.stagger{
  position:relative;z-index:2;display:grid;gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(3,1fr);align-items:start;
  max-width:1280px;margin:0 auto;
}
.scol{display:grid;gap:clamp(14px,1.8vw,22px);align-content:start}
.scol + .scol{border-left:1px solid rgba(11,38,74,.12);padding-left:clamp(14px,1.8vw,22px)}
.scol--2{margin-top:72px}
.scol--3{margin-top:140px}
.r34{aspect-ratio:3/4}
.r11{aspect-ratio:1/1}
.r43{aspect-ratio:4/3}
.gt-open{aspect-ratio:3/4}

/* ============ P-③ R4 · "LA RUTA SOBRE PLANO" (R2: abarca la pantalla — 92vh centrado) ============ */
.ruta{
  position:relative;overflow:clip;background:var(--surface-2);
  padding:clamp(5rem,6.5vw,7rem) var(--gutter);
  min-height:92vh;display:grid;align-content:center;
  contain-intrinsic-height:auto 820px;
}
.ruta-bg{
  position:absolute;left:0;top:-8%;width:100%;height:116%;z-index:0;
  opacity:.62;pointer-events:none;will-change:transform;
}
.ruta-bg svg{width:100%;height:100%}
.ruta-head{position:relative;z-index:2;text-align:center;max-width:820px;margin:0 auto clamp(3.2rem,5.4vw,5rem)}
.ruta-head h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.3rem,4.1vw,3.6rem);line-height:1.05;margin-top:14px;
}
.ruta-head h2 .tone{color:var(--accent)}
.ruta-row{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,28px);max-width:1180px;margin:0 auto;align-items:start;
}
.rpath{
  position:absolute;left:4%;right:4%;top:clamp(76px,6.6vw,108px);height:90px;z-index:0;
  pointer-events:none;
}
.rpath path{fill:none;stroke:var(--sky-mid);stroke-width:2.5;stroke-dasharray:3 9;stroke-linecap:round}
.rstep{position:relative;z-index:1;display:grid;justify-items:center;text-align:center}
/* nth-of-type (no nth-child): .rpath/.rseal son hermanos previos y rompían la cuenta */
.rstep:nth-of-type(2) .rcircle,.rstep:nth-of-type(3) .rcircle{margin-top:24px}
.rcircle{
  position:relative;width:clamp(160px,15vw,230px);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;gap:11px;justify-items:center;
  color:var(--on-dark);box-shadow:0 16px 38px rgba(11,38,74,.22);
  will-change:transform;
}
.rstep:nth-of-type(odd) .rcircle{background:var(--ink)}
.rstep:nth-of-type(even) .rcircle{background:var(--accent)}
.rbadge{
  position:absolute;top:-10px;right:-6px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);color:var(--accent);
  border:2px solid var(--accent);font-family:var(--display);font-weight:800;font-size:15px;
  box-shadow:0 8px 20px rgba(11,38,74,.18);will-change:transform;
}
.ricon svg{width:40px;height:40px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rtitle{font-weight:700;font-size:clamp(15.5px,1.2vw,17.5px);max-width:12ch;line-height:1.25}
.rline{margin-top:18px;max-width:26ch;color:var(--muted);font-size:15.5px;line-height:1.55}
.rseal{
  position:absolute;right:-1%;top:56%;width:44px;z-index:1;
  will-change:transform;
}
/* micro-parallax de profundidad (compositor-only, .rstep NO es nodo GSAP;
   scroll-driven CSS — Chrome/Edge; el resto degrada a estático) */
@keyframes rstep-drift-a{from{transform:translateY(12px)}to{transform:translateY(-20px)}}
@keyframes rstep-drift-b{from{transform:translateY(18px)}to{transform:translateY(-34px)}}
@supports (animation-timeline: view()){
  @media (min-width:761px) and (prefers-reduced-motion:no-preference){
    html.js:not(.motion-off) .rstep:nth-of-type(odd){
      animation:rstep-drift-a linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    html.js:not(.motion-off) .rstep:nth-of-type(even){
      animation:rstep-drift-b linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}

/* ============ P-⑤ CTA — C2 banner fotográfico scrim ============ */
.pcta{
  position:relative;min-height:60vh;overflow:clip;color:var(--on-dark);
  display:grid;place-items:center;padding:clamp(5rem,9vw,7rem) var(--gutter);
}
.pcta-photo{
  position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;
  will-change:transform;
}
.pcta-scrim{position:absolute;inset:0;z-index:1;background:rgba(9,20,40,.8)}
.pcta-inner{position:relative;z-index:3;text-align:center;display:grid;justify-items:center;gap:22px;max-width:820px}
.pcta-inner h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.06;
  text-shadow:0 2px 12px rgba(4,16,36,.55);
}
.pcta-inner h2 em{
  font-style:normal;color:transparent;text-shadow:none;
  -webkit-text-stroke:clamp(1.6px,.16vw,3px) #F2F7FC;
}
.pcta-inner p{color:#D5E2F1;max-width:52ch;font-size:clamp(.98rem,1.15vw,1.1rem)}
.pcta-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.pcta-cube{
  position:absolute;right:5vw;bottom:8%;z-index:2;width:min(96px,7vw);
  opacity:.32;will-change:transform;pointer-events:none;
}

/* ============ LIGHTBOX (05 §7A verbatim + contador) ============ */
.lightbox{position:fixed;inset:0;z-index:150}
.lightbox[hidden]{display:none}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(6,14,28,.93)}
.lightbox__stage{
  position:relative;z-index:2;height:100%;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);
}
.lightbox__img{
  max-width:min(1100px,92vw);max-height:86vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;font-size:30px;line-height:1;
  background:rgba(242,247,252,.12);color:var(--on-dark);
  border:1px solid rgba(242,247,252,.3);display:grid;place-items:center;
  transition:background .2s ease;
}
.lightbox__nav:hover{background:rgba(242,247,252,.24)}
.lightbox__prev{left:clamp(8px,2.5vw,34px)}
.lightbox__next{right:clamp(8px,2.5vw,34px)}
.lightbox__close{
  position:absolute;top:18px;right:clamp(8px,2.5vw,34px);
  width:52px;height:52px;border-radius:50%;font-size:26px;line-height:1;
  background:rgba(242,247,252,.12);color:var(--on-dark);
  border:1px solid rgba(242,247,252,.3);display:grid;place-items:center;
  transition:background .2s ease;
}
.lightbox__close:hover{background:rgba(242,247,252,.24)}
.lightbox__count{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  font-weight:700;font-size:13.5px;letter-spacing:.12em;color:#C9D6E6;
  background:rgba(7,28,58,.6);border-radius:999px;padding:9px 16px;
}
.lightbox button:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* ============ MOBILE (ley 0704-l — todo DENTRO de la MQ) ============ */
@media (max-width:900px){
  .bgrid{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(160px,26vw)}
  .gt-f--l,.gt-f--r{grid-column:1/3;grid-row:span 2}
  .ruta-row{grid-template-columns:1fr 1fr;gap:34px 18px}
  .rstep:nth-of-type(2) .rcircle,.rstep:nth-of-type(3) .rcircle{margin-top:0}
  .rpath{display:none}
  .rseal{top:auto;bottom:-8px}
  .rline{max-width:30ch}
}
@media (max-width:760px){
  .pbanner{min-height:clamp(300px,44vh,440px);padding-top:calc(var(--nav-h) + 44px)}
  /* F5 (ojos @390): el crop alto móvil asomaba la marquesina de un retailer arriba;
     encuadre bajado — el logo queda fuera de cuadro como en desktop (QC del lote) */
  .pbanner-media{object-position:50% 72%}
  .pbanner-ghost{font-size:22vw}
  .pbanner-eyebrow{top:84px;font-size:10px;letter-spacing:.22em}
  .pbanner-chip{display:none}
  .fcount{display:none}
  .stagger{display:block}
  .scol + .scol{border-left:0;padding-left:0;margin-top:clamp(14px,1.8vw,22px)}
  .scol--2,.scol--3{margin-top:clamp(14px,1.8vw,22px)}
  .scol{margin-top:clamp(14px,1.8vw,22px)}
  .gal-cota{display:none}
  /* R2 móvil: columna vertical con línea que se dibuja detrás de los círculos */
  .ruta{min-height:0}
  .ruta-row{grid-template-columns:1fr;row-gap:42px}
  .rcircle{width:min(64vw,240px)}
  /* la línea vertical pasa por detrás del texto: lo enmascaramos con el fondo de la sección */
  .rline{background:var(--surface-2);border-radius:10px;padding:3px 10px}
  .ruta-row::before{
    content:'';position:absolute;left:50%;margin-left:-1px;top:8%;bottom:10%;
    width:2px;z-index:0;transform-origin:50% 0;
    background:repeating-linear-gradient(180deg,var(--sky-mid) 0 4px,transparent 4px 13px);
  }
  .pcta{min-height:0}
  .pcta-cube{display:none}
  .lightbox__nav{width:44px;height:44px;font-size:26px}
  .lightbox__close{width:44px;height:44px}
}
@media (max-width:560px){
  .ruta-row{grid-template-columns:1fr}
  .rline{margin-bottom:8px}
  .rseal{display:none}
}

/* dibujo de la línea vertical móvil (scroll-driven; degrada a línea estática) */
@keyframes ruta-vline-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@supports (animation-timeline: view()){
  @media (max-width:760px) and (prefers-reduced-motion:no-preference){
    html.js:not(.motion-off) .ruta-row::before{
      animation:ruta-vline-draw linear both;animation-timeline:view();
      animation-range:entry 5% cover 70%;
    }
  }
}

/* ============ SIN JS / REDUCED: todo compone estático ============ */
html:not(.js) .rcircle,html.motion-off .rcircle,
html:not(.js) .rbadge,html.motion-off .rbadge,
html:not(.js) .rseal,html.motion-off .rseal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fchip,.gtile::after,.pbanner-crumb a::after{transition:none}
}