/* ============================================================ */
/* PROYECTOS -- capa editorial "navegación tipo presentación"     */
/* (2026-08-23). Motor reutilizado de camaras-electricas-editorial */
/* / contacto-editorial (mismo sistema de rieles de rueda,        */
/* snap de escritorio, indicador lateral, reduced-motion).        */
/* Prefijo pje- (Proyectos, capa Editorial) para no chocar con     */
/* las clases pr-* ya existentes de esta misma página, que se      */
/* reutilizan tal cual para el contenido visual de cada capítulo.  */
/* ============================================================ */

.pg-proyectos.pje-page{
  --pje-header-height:79px;
  --pje-slide-gap:14px;
}

/* ---- riel lateral de capítulos ---- */
.pje-local-nav{
  position:fixed; right:17px; top:50%; z-index:45;
  display:flex; width:24px; flex-direction:column; align-items:center; gap:14px;
  transform:translateY(-50%); padding:15px 0; border-radius:18px;
  background:rgba(0,23,43,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
}
.pje-local-nav::before{
  content:''; position:absolute; left:50%; top:17px; bottom:17px; width:1px; transform:translateX(-50%);
  background:linear-gradient(transparent,rgba(255,255,255,.32) 14%,rgba(255,255,255,.32) 86%,transparent);
}
.pje-local-nav a{
  position:relative; z-index:2; width:7px; height:7px; border:1px solid rgba(255,255,255,.62);
  border-radius:50%; background:rgba(0,23,43,.55); color:transparent; font-size:0;
  box-shadow:0 0 0 2px rgba(0,23,43,.22);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s ease,border-color .28s ease;
}
.pje-local-nav a::before{
  content:''; position:absolute; left:50%; top:50%; width:15px; height:15px; border:1px solid rgba(215,0,0,.55);
  border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.55);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.pje-local-nav a::after{
  content:attr(data-label); position:absolute; right:18px; top:50%; width:max-content; max-width:170px;
  padding:6px 9px; border-left:1px solid rgba(215,0,0,.75); background:rgba(0,23,43,.92); color:#fff;
  font:700 9px/1 'Archivo',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  opacity:0; pointer-events:none; transform:translate(6px,-50%); transition:opacity .2s ease,transform .2s ease;
}
.pje-local-nav a:hover,.pje-local-nav a:focus-visible{ border-color:#fff; transform:scale(1.18); }
.pje-local-nav a:hover::after,.pje-local-nav a:focus-visible::after{ opacity:1; transform:translate(0,-50%); }
.pje-local-nav a.is-active{ background:var(--brick); border-color:#fff; box-shadow:0 0 8px rgba(215,0,0,.55); }
.pje-local-nav a.is-active::before{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (max-width:1100px){ .pje-local-nav{ display:none; } }

/* ---- capítulos ---- */
.pje-chapter{ position:relative; scroll-margin-top:82px; }
/* Dentro del contenedor flex de escritorio, un hijo .wrap con margin:auto  */
/* no se estira al ancho completo (el margen auto absorbe el espacio libre  */
/* en flexbox) -- mismo problema y mismo arreglo ya usado en .pr-hero-navy. */
.pje-page .pje-chapter > .wrap{ width:100%; }
.pje-chapter [data-pje-reveal]{ will-change:transform,opacity; }

@media (min-width:1101px) and (hover:hover) and (pointer:fine){
  html:has(body.pje-page){ scroll-snap-type:y proximity; }
  html.is-pje-page-jumping:has(body.pje-page){ scroll-snap-type:none; scroll-behavior:auto !important; }
  html.is-pje-page-jumping body.pje-page{ overscroll-behavior-y:none; }
  .pje-page #main-content{ padding:0 !important; }
  .pje-page .pje-chapter{
    min-height:calc(100svh - var(--pje-header-height)) !important;
    display:flex; flex-direction:column; justify-content:center;
    scroll-margin-top:var(--pje-header-height);
    scroll-snap-align:start; scroll-snap-stop:always;
  }
  .pje-page .pje-chapter.pr-hero{ min-height:calc(100svh - var(--pje-header-height)) !important; }
}

/* ---- coreografía de revelado: número → kicker → titular → texto → foto → evidencia/CTA ---- */
.pje-chapter .pr-eyebrow, .pje-chapter .pje-num,
.pje-chapter h1, .pje-chapter h2,
.pje-chapter [data-pje-reveal]{
  transition:opacity .58s ease, transform .62s cubic-bezier(.16,.76,.24,1);
}
.pje-chapter:not(.is-visible) .pr-eyebrow,
.pje-chapter:not(.is-visible) .pje-num,
.pje-chapter:not(.is-visible) h1,
.pje-chapter:not(.is-visible) h2,
.pje-chapter:not(.is-visible) [data-pje-reveal]{ opacity:0; transform:translateY(20px); }
.pje-chapter.is-visible .pje-num{ transition-delay:0s; }
.pje-chapter.is-visible .pr-eyebrow{ transition-delay:.05s; }
.pje-chapter.is-visible h1,.pje-chapter.is-visible h2{ transition-delay:.1s; }
.pje-chapter.is-visible [data-pje-reveal="text"]{ transition-delay:.18s; }
.pje-chapter.is-visible [data-pje-reveal="media"]{ transition-delay:.26s; }
.pje-chapter.is-visible [data-pje-reveal="evidence"]{ transition-delay:.34s; }
.pje-chapter.is-visible [data-pje-reveal="cta"]{ transition-delay:.42s; }

@media (prefers-reduced-motion:reduce){
  .pje-chapter .pr-eyebrow,.pje-chapter .pje-num,.pje-chapter h1,.pje-chapter h2,.pje-chapter [data-pje-reveal]{ transition:none !important; }
  .pje-chapter:not(.is-visible) .pr-eyebrow,
  .pje-chapter:not(.is-visible) .pje-num,
  .pje-chapter:not(.is-visible) h1,
  .pje-chapter:not(.is-visible) h2,
  .pje-chapter:not(.is-visible) [data-pje-reveal]{ opacity:1 !important; transform:none !important; }
}

/* número editorial de capítulo, discreto */
.pje-num{
  display:block; font-family:'Archivo',sans-serif; font-weight:900; font-size:12px;
  letter-spacing:.14em; color:var(--brick); margin:0 0 10px;
}
.pje-num.is-light{ color:#ff8a80; }

/* footer -- cierre del capítulo 6, misma pieza visual */
.pje-page footer{ transition:opacity .1s linear; }
.pje-page footer:not(.is-lit) .f2-cols,
.pje-page footer:not(.is-lit) .f2-highlight,
.pje-page footer:not(.is-lit) .f2-legal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .55s cubic-bezier(.16,.76,.24,1); }
.pje-page footer.is-lit .f2-cols{ transition-delay:.1s; }
.pje-page footer.is-lit .f2-highlight{ transition-delay:.16s; }
.pje-page footer.is-lit .f2-legal{ transition-delay:.22s; }
@media (prefers-reduced-motion:reduce){
  .pje-page footer:not(.is-lit) .f2-cols,
  .pje-page footer:not(.is-lit) .f2-highlight,
  .pje-page footer:not(.is-lit) .f2-legal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================ */
/* CAPÍTULO 02 -- mapa de aplicaciones (atlas visual)              */
/* ============================================================ */
.pje-atlas{ display:grid; grid-template-columns:.62fr 1.38fr; gap:0; align-items:stretch; min-height:min(460px,calc(100svh - 300px)); max-height:calc(100svh - 260px); border:1px solid var(--line); }
.pje-atlas-list{ display:flex; flex-direction:column; background:#fff; overflow-y:auto; }
.pje-atlas-item{
  display:flex; align-items:center; gap:16px; padding:14px 22px; border-bottom:1px solid var(--line);
  background:none; border-left:3px solid transparent; text-align:left; cursor:pointer; width:100%;
  font-family:'Archivo',sans-serif; text-decoration:none; color:inherit;
  transition:background .18s ease, border-color .18s ease;
}
.pje-atlas-item:last-child{ border-bottom:none; }
.pje-atlas-item:hover{ background:var(--cream-panel); }
.pje-atlas-item.is-active{ background:var(--cream-panel); border-left-color:var(--brick); }
.pje-atlas-num{ font-weight:900; font-size:12px; color:var(--brick); flex-shrink:0; width:20px; }
.pje-atlas-item h3{ font-weight:800; text-transform:uppercase; font-size:13px; letter-spacing:.005em; color:var(--ink-navy); margin:0 0 3px; }
.pje-atlas-item p{ font-size:11.75px; line-height:1.42; color:var(--ink-soft); margin:0; max-width:34ch; }
.pje-atlas-item.is-active h3{ color:var(--brick); }
.pje-atlas-arrow{ margin-left:auto; flex-shrink:0; font-size:14px; color:var(--ink-faint); opacity:0; transition:opacity .18s ease, transform .18s ease; }
.pje-atlas-item.is-active .pje-atlas-arrow,.pje-atlas-item:hover .pje-atlas-arrow{ opacity:1; transform:translateX(3px); }

.pje-atlas-stage{ position:relative; overflow:hidden; background:var(--navy-bg); }
.pje-atlas-photo{ position:absolute; inset:0; opacity:0; transition:opacity .32s ease; }
.pje-atlas-photo.is-active{ opacity:1; }
.pje-atlas-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pje-atlas-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,23,43,.86) 0%,rgba(0,23,43,.15) 42%,transparent 62%); }
.pje-atlas-cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:26px 30px; }
.pje-atlas-cap-name{ display:block; font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(20px,1.9vw,26px); color:#fff; margin:0 0 8px; }
.pje-atlas-cap-link{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#fff; text-decoration:none; border-bottom:1.5px solid rgba(255,255,255,.4); padding-bottom:2px; }
.pje-atlas-cap-link:hover{ border-color:#fff; }

@media (max-width:900px){
  .pje-atlas{ grid-template-columns:1fr; }
  .pje-atlas-stage{ order:-1; aspect-ratio:16/10; min-height:0; }
  .pje-atlas-photo{ position:absolute; }
}

/* ============================================================ */
/* CAPÍTULO 03 -- caso ferroviario, secuencia de evidencia         */
/* ============================================================ */
.pje-case{ background:var(--navy-bg); color:#fff; }
.pje-case .pr-eyebrow{ color:#ff8a80; }
.pje-case-head{ max-width:640px; margin-bottom:36px; }
.pje-case-title{ font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase; line-height:1; letter-spacing:-.01em; font-size:clamp(28px,3.2vw,44px); color:#fff; margin:0 0 14px; }
.pje-case-sub{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.76); margin:0; max-width:56ch; }

.pje-seq{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.pje-seq-item{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.pje-seq-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pje-seq-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.15) 45%,transparent 65%); }
.pje-seq-tag{ position:absolute; left:14px; top:14px; z-index:1; display:flex; align-items:center; gap:8px; font-family:'Archivo',sans-serif; font-weight:900; font-size:11px; color:#fff; }
.pje-seq-tag span{ display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--brick); font-size:10px; }
.pje-seq-cap{ position:absolute; left:14px; right:14px; bottom:13px; z-index:1; font-size:11.5px; line-height:1.4; color:#fff; font-weight:600; }
@media (max-width:760px){ .pje-seq{ grid-template-columns:repeat(2,1fr); } }

.pje-case-note{ margin-top:26px; padding:16px 20px; border-left:3px solid var(--brick); background:rgba(255,255,255,.04); font-size:13px; line-height:1.55; color:rgba(255,255,255,.82); max-width:70ch; }
.pje-case-cta{ margin-top:24px; display:inline-flex; align-items:center; gap:8px; font-family:'Archivo',sans-serif; font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.02em; color:#fff; text-decoration:none; border-bottom:1.5px solid rgba(255,255,255,.4); padding-bottom:4px; }
.pje-case-cta:hover{ border-color:#fff; }

/* ============================================================ */
/* CAPÍTULO 04 -- capacidad y proceso                              */
/* ============================================================ */
.pje-process-grid{ display:grid; grid-template-columns:1.35fr .9fr; gap:44px; align-items:start; }
@media (max-width:980px){ .pje-process-grid{ grid-template-columns:1fr; gap:32px; } }

.pje-flow{ list-style:none; margin:0; padding:0; counter-reset:pje-flow; }
.pje-flow li{
  counter-increment:pje-flow; position:relative; display:flex; gap:16px; padding:0 0 20px 0; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.pje-flow li:last-child{ border-bottom:none; margin-bottom:0; }
.pje-flow li::before{
  content:counter(pje-flow,decimal-leading-zero); flex-shrink:0; font-family:'Archivo',sans-serif; font-weight:900;
  font-size:15px; color:var(--brick); width:30px;
}
.pje-flow li div h3{ font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; font-size:13.5px; color:var(--ink-navy); margin:0 0 4px; }
.pje-flow li div p{ font-size:12.75px; line-height:1.55; color:var(--ink-soft); margin:0; max-width:52ch; }

.pje-flow-photos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pje-flow-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-card); margin:0; }
.pje-flow-photo:first-child{ grid-column:1/-1; aspect-ratio:16/10; }
.pje-flow-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pje-flow-photo figcaption{ position:absolute; left:12px; bottom:10px; z-index:1; font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.03em; }
.pje-flow-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%); }

.pje-lab-aside{ margin-top:24px; display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; padding:18px 20px; border-radius:var(--radius-card); background:var(--navy-bg); color:#fff; }
.pje-lab-aside svg{ width:38px; height:38px; padding:8px; box-sizing:border-box; color:var(--brick); border:1px solid rgba(255,255,255,.22); border-radius:8px; }
.pje-lab-aside h4{ font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; font-size:12px; margin:0 0 5px; }
.pje-lab-aside p{ font-size:11.75px; line-height:1.5; color:rgba(255,255,255,.76); margin:0; }

/* ============================================================ */
/* CAPÍTULO 05 -- evidencia disponible                             */
/* ============================================================ */
.pje-evidence-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin-top:8px; }
.pje-ev-card{ position:relative; aspect-ratio:3/4; overflow:hidden; display:block; margin:0; }
.pje-ev-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
a.pje-ev-card:hover img{ transform:scale(1.04); }
.pje-ev-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,18,35,.86) 0%,rgba(0,18,35,.3) 45%,transparent 68%); }
.pje-ev-cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:16px 15px; }
.pje-ev-status{ display:inline-block; margin-bottom:7px; padding:4px 8px; border-radius:3px; background:var(--brick); color:#fff; font-family:'Archivo',sans-serif; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pje-ev-title{ display:block; font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; font-size:12.5px; color:#fff; margin-bottom:2px; }
.pje-ev-sub{ display:block; font-size:10.5px; color:rgba(255,255,255,.72); }
@media (max-width:1023px){ .pje-evidence-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .pje-evidence-grid{ grid-template-columns:1fr 1fr; } .pje-ev-card{ aspect-ratio:1/1; } }

.pje-evidence-links{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:32px; padding-top:22px; border-top:1px solid var(--line); }
.pje-evidence-links a{ font-size:13px; font-weight:700; color:var(--ink-navy); text-decoration:none; }
.pje-evidence-links a:hover{ color:var(--brick); text-decoration:underline; }

/* ============================================================ */
/* CAPÍTULO 06 -- cierre maestro                                   */
/* ============================================================ */
.pje-close{ background:var(--navy-bg); color:#fff; padding:96px 0 72px; }
.pje-close .pr-eyebrow{ color:#ff8a80; }
.pje-close-title{ font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase; line-height:1.03; letter-spacing:-.015em; font-size:clamp(32px,4.2vw,54px); color:#fff; margin:0 0 16px; }
.pje-close-title .red{ color:var(--brick); }
.pje-close-sub{ font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.72); max-width:56ch; margin:0 0 32px; }
.pje-close-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:40px; }
.pje-close-channels{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid rgba(255,255,255,.16); }
.pje-close-chan{ display:flex; align-items:center; gap:12px; padding:16px 28px 16px 0; margin-right:28px; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.16); flex:1 1 220px; transition:opacity .15s ease; }
.pje-close-chan:hover{ opacity:.72; }
.pje-close-chan svg{ width:18px; height:18px; color:var(--brick); flex-shrink:0; }
.pje-close-chan-text{ display:flex; flex-direction:column; gap:2px; }
.pje-close-chan b{ font-family:'Archivo',sans-serif; font-weight:800; text-transform:uppercase; font-size:10.5px; letter-spacing:.06em; color:rgba(255,255,255,.5); }
.pje-close-chan span{ font-size:14.5px; font-weight:600; color:#fff; }
@media (max-width:640px){ .pje-close{ padding:64px 0 48px; } }