/* ================================================================
   DEKEVA — proyecto.css
   Ficha de caso · ruta virtual /proyectos/{slug}

   Tres plantillas, no una. Decisión de 12-08-2026: se usan las tres
   según el proyecto, para que el portafolio no repita siempre la misma
   estructura narrativa.

     ficha 1 · EL EXPEDIENTE      dossier con sumario lateral fijo y
                                  capítulos numerados. El texto manda.
     ficha 2 · EL RECORRIDO       la web del cliente fija en pantalla,
                                  cambiando de página según el texto.
     ficha 3 · ANTES Y DESPUÉS    comparadores arrastrables. Solo donde
                                  existe material del «antes».

   Comparten portada, migas, cierre y CTA. Carga después de
   proyectos-base.css. Namespace .dkv-proyecto.
================================================================ */

:root {
  --border-fuerte: rgba(13,13,11,.11);
  --border-suave:  rgba(13,13,11,.06);
  --gut:           clamp(20px, 4vw, 60px);
  --hdr-h:         96px;   /* altura actual del header (informativa) */
  --hdr-h0:        103px;  /* altura EN REPOSO — la que usa el layout */
}

.dkv-proyecto .pry-wrap { width: min(1400px, 100% - var(--gut) * 2); margin-inline: auto; }
.dkv-proyecto .pry-mono {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.dkv-proyecto .pry-grain {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════
   PORTADA — común a las tres fichas
═══════════════════════════════════════════════════════════ */
.dkv-proyecto .pf-top { padding: calc(var(--hdr-h0) + clamp(30px,4vw,60px)) 0 clamp(26px,3.6vw,48px); }
.dkv-proyecto .pf-crumb { display: flex; gap: 9px; align-items: center; margin-bottom: clamp(18px,2.8vw,34px); }
.dkv-proyecto .pf-crumb a, .dkv-proyecto .pf-crumb span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.dkv-proyecto .pf-crumb a:hover { color: var(--blue); }
.dkv-proyecto .pf-crumb .sep { color: var(--border-fuerte); }

.dkv-proyecto .pf-top h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.8rem, 8.5vw, 7rem); line-height: .95; letter-spacing: -.025em;
}
.dkv-proyecto .pf-top h1 em { font-family: var(--f-italic); font-style: italic; color: var(--blue); }
.dkv-proyecto .pf-lead {
  margin-top: clamp(18px,2.4vw,32px); max-width: 60ch;
  font-size: clamp(1rem,1.35vw,1.22rem); line-height: 1.68; color: #3d3b37;
}
/* Ficha 3: titular y entradilla a dos columnas */
.dkv-proyecto .pf-top--split .pf-head2 {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.72fr);
  gap: clamp(24px,4vw,70px); align-items: end;
}
.dkv-proyecto .pf-top--split .pf-lead { margin-top: 0; max-width: 48ch; }

.dkv-proyecto .pf-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 20px 28px; margin-top: clamp(28px,3.6vw,48px);
  padding-top: clamp(22px,2.8vw,34px); border-top: 1px solid var(--border-fuerte);
}
.dkv-proyecto .pf-facts dt {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.dkv-proyecto .pf-facts dd { font-size: 13.5px; line-height: 1.5; color: #2e2c29; }
.dkv-proyecto .pf-facts dd a { color: var(--blue); }

.dkv-proyecto .pf-cover {
  margin: clamp(28px,4vw,54px) 0 0; border: 1px solid var(--border-fuerte);
  overflow: hidden; max-height: 640px;
}
.dkv-proyecto .pf-cover img { width: 100%; display: block; }

/* ════════════════════════════════════════════════════════════
   FICHA 1 · EL EXPEDIENTE
═══════════════════════════════════════════════════════════ */
.dkv-proyecto .pf-body {
  display: grid; grid-template-columns: 212px minmax(0,1fr);
  gap: clamp(28px,5vw,90px); padding: clamp(44px,6vw,90px) 0 0; align-items: start;
}
.dkv-proyecto .pf-toc { position: sticky; top: calc(var(--hdr-h) + 12px); }
.dkv-proyecto .pf-toc__title {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--border-fuerte); margin-bottom: 14px;
}
.dkv-proyecto .pf-toc a {
  display: flex; gap: 10px; padding: 8px 0 8px 12px; margin-left: -13px;
  font-size: 12.5px; color: #57544f; line-height: 1.4;
  border-left: 1px solid transparent;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.dkv-proyecto .pf-toc a i { font-family: var(--f-mono); font-size: 9px; font-style: normal; color: var(--muted); padding-top: 2px; }
.dkv-proyecto .pf-toc a:hover, .dkv-proyecto .pf-toc a.is-on { color: var(--blue); border-left-color: var(--blue); }
.dkv-proyecto .pf-toc a.is-on i { color: var(--blue); }

.dkv-proyecto .pf-chap { padding-bottom: clamp(44px,6vw,86px); scroll-margin-top: calc(var(--hdr-h) + 12px); }
.dkv-proyecto .pf-chap__head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: clamp(18px,2.4vw,30px); padding-bottom: 16px; border-bottom: 1px solid var(--border-fuerte);
}
.dkv-proyecto .pf-chap__head i { font-family: var(--f-mono); font-size: 10px; font-style: normal; color: var(--muted); letter-spacing: .1em; }
.dkv-proyecto .pf-chap__head h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.8rem,3.4vw,2.9rem); line-height: 1.05; letter-spacing: -.015em;
}
.dkv-proyecto .pf-chap__head h2 em { font-family: var(--f-italic); font-style: italic; color: var(--blue); }
.dkv-proyecto .pf-chap p {
  font-size: clamp(.98rem,1.15vw,1.06rem); line-height: 1.82; color: #3d3b37; max-width: 74ch;
}
.dkv-proyecto .pf-chap p + p { margin-top: 16px; }
.dkv-proyecto .pf-chap p b { font-weight: 400; color: var(--text); }

.dkv-proyecto .pf-pull { margin: clamp(26px,3.4vw,44px) 0; padding-left: clamp(18px,2.4vw,30px); border-left: 2px solid var(--blue); }
.dkv-proyecto .pf-pull p {
  font-family: var(--f-display); font-size: clamp(1.4rem,2.4vw,2rem);
  line-height: 1.35; color: var(--text); max-width: 30ch;
}
.dkv-proyecto .pf-pull p em { font-family: var(--f-italic); font-style: italic; color: var(--blue); }

.dkv-proyecto .pf-fig { margin-top: clamp(24px,3vw,40px); }
.dkv-proyecto .pf-fig__box { border: 1px solid var(--border-fuerte); overflow: hidden; max-height: 560px; background: var(--bg-soft); }
.dkv-proyecto .pf-fig__box img { width: 100%; display: block; }
.dkv-proyecto .pf-fig figcaption {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 10px;
}
.dkv-proyecto .pf-duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px,1.6vw,22px); margin-top: clamp(24px,3vw,40px);
}
.dkv-proyecto .pf-duo figure { margin: 0; }
.dkv-proyecto .pf-duo .pf-fig__box { max-height: 420px; }
.dkv-proyecto .pf-duo figcaption { display: flex; align-items: center; gap: 8px; }
.dkv-proyecto .pf-badge {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; border: 1px solid var(--border-fuerte); color: #6b6862;
}
.dkv-proyecto .pf-badge--after { border-color: rgba(3,47,212,.35); color: var(--blue); }

.dkv-proyecto .pf-tbl { width: 100%; border-collapse: collapse; margin-top: clamp(20px,2.6vw,32px); font-size: 13.5px; }
.dkv-proyecto .pf-tbl th {
  text-align: left; font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  padding: 0 14px 12px 0; border-bottom: 1px solid var(--border-fuerte);
}
.dkv-proyecto .pf-tbl td {
  padding: 14px 14px 14px 0; border-bottom: 1px solid var(--border-suave);
  vertical-align: top; line-height: 1.55; color: #3d3b37;
}
.dkv-proyecto .pf-tbl td:first-child { font-family: var(--f-display); font-size: 1.15rem; color: var(--text); width: 34%; }

.dkv-proyecto .pf-num {
  display: flex; gap: clamp(26px,4vw,60px); flex-wrap: wrap;
  margin-top: clamp(30px,4vw,52px); padding-top: clamp(22px,3vw,38px); border-top: 1px solid var(--border-fuerte);
}
.dkv-proyecto .pf-num b {
  display: block; font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.8rem,3vw,2.7rem); line-height: 1;
}
.dkv-proyecto .pf-num span {
  display: block; margin-top: 7px; font-family: var(--f-mono);
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* ════════════════════════════════════════════════════════════
   FICHA 2 · EL RECORRIDO
═══════════════════════════════════════════════════════════ */
.dkv-proyecto .pf-tour { position: relative; padding: clamp(30px,4vw,60px) 0 clamp(50px,6vw,90px); }
.dkv-proyecto .pf-tour__in {
  display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: clamp(28px,5vw,84px); align-items: start;
}
/* El alto lo marca la proporción del navegador simulado, no el viewport:
   así la captura entra completa en vez de recortarse por los lados. */
.dkv-proyecto .pf-stage { position: sticky; top: calc(var(--hdr-h) + 10vh); }
.dkv-proyecto .pf-device {
  border: 1px solid var(--border-fuerte); background: var(--bg-soft); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 70px -34px rgba(13,13,11,.4);
}
.dkv-proyecto .pf-device__bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--border-suave); background: #fff; flex: none;
}
.dkv-proyecto .pf-device__bar b { width: 8px; height: 8px; border-radius: 50%; background: rgba(13,13,11,.12); }
.dkv-proyecto .pf-device__url {
  margin-left: 10px; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .05em; color: var(--muted); transition: opacity .4s var(--ease);
}
.dkv-proyecto .pf-device__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.dkv-proyecto .pf-device__view img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transform: scale(1.015);
  transition: opacity .8s var(--ease), transform 1.2s var(--ease);
}
.dkv-proyecto .pf-device__view img.is-on { opacity: 1; transform: none; }

.dkv-proyecto .pf-step {
  min-height: 68vh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px,4vw,60px) 0;
}
.dkv-proyecto .pf-step__num { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dkv-proyecto .pf-step__num i { font-family: var(--f-mono); font-size: 10px; font-style: normal; letter-spacing: .1em; color: var(--blue); }
.dkv-proyecto .pf-step__num span { flex: 1; height: 1px; background: var(--border-fuerte); max-width: 70px; }
.dkv-proyecto .pf-step h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.9rem,3.8vw,3.2rem); line-height: 1.04; letter-spacing: -.018em;
}
.dkv-proyecto .pf-step h2 em { font-family: var(--f-italic); font-style: italic; color: var(--blue); }
.dkv-proyecto .pf-step p {
  margin-top: clamp(14px,1.8vw,22px); font-size: clamp(.96rem,1.12vw,1.05rem);
  line-height: 1.82; color: #3d3b37; max-width: 56ch;
}
.dkv-proyecto .pf-step p + p { margin-top: 14px; }
.dkv-proyecto .pf-step p b { font-weight: 400; color: var(--text); }
/* En móvil desaparece la pantalla fija y cada paso lleva su propia captura */
.dkv-proyecto .pf-step__img { display: none; }

/* ════════════════════════════════════════════════════════════
   FICHA 3 · ANTES Y DESPUÉS
═══════════════════════════════════════════════════════════ */
.dkv-proyecto .pf-cmp-block { padding: clamp(28px,4vw,56px) 0; }
.dkv-proyecto .pf-cmp-head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(20px,3vw,54px); align-items: end; margin-bottom: clamp(18px,2.4vw,30px);
}
.dkv-proyecto .pf-cmp-head h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.7rem,3.4vw,2.8rem); line-height: 1.05; letter-spacing: -.015em;
}
.dkv-proyecto .pf-cmp-head h2 em { font-family: var(--f-italic); font-style: italic; color: var(--blue); }
.dkv-proyecto .pf-cmp-head p { font-size: 14px; line-height: 1.75; color: #3d3b37; max-width: 56ch; }
.dkv-proyecto .pf-cmp-head p b { font-weight: 400; color: var(--text); }

.dkv-proyecto .pf-cmp {
  position: relative; overflow: hidden; border: 1px solid var(--border-fuerte);
  background: var(--bg-soft); aspect-ratio: 16 / 10; cursor: ew-resize;
  touch-action: pan-y; --pos: 50%;
}
.dkv-proyecto .pf-cmp:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dkv-proyecto .pf-cmp--tall { aspect-ratio: 16 / 11; }
/* pointer-events:none en las imágenes → el navegador nunca inicia su arrastre
   nativo, que es lo que cancelaba el gesto a mitad de camino. */
.dkv-proyecto .pf-cmp img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.dkv-proyecto .pf-cmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.dkv-proyecto .pf-cmp__line {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 1px rgba(13,13,11,.2), 0 0 18px rgba(13,13,11,.18);
  pointer-events: none; z-index: 3;
}
.dkv-proyecto .pf-cmp__grab {
  position: absolute; top: 50%; left: var(--pos); transform: translate(-50%,-50%); z-index: 4;
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  box-shadow: 0 6px 22px -6px rgba(13,13,11,.5); display: grid; place-items: center;
  pointer-events: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.dkv-proyecto .pf-cmp__grab::before {
  content: '‹ ›'; font-family: var(--f-mono); font-size: 14px; letter-spacing: .06em; color: var(--blue);
}
.dkv-proyecto .pf-cmp:hover .pf-cmp__grab,
.dkv-proyecto .pf-cmp.is-live .pf-cmp__grab {
  transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 10px 30px -8px rgba(3,47,212,.5);
}
.dkv-proyecto .pf-cmp__tag {
  position: absolute; top: 14px; z-index: 3; font-family: var(--f-mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; padding: 6px 11px; border-radius: 2px;
  background: rgba(255,255,255,.92); color: #57544f; pointer-events: none;
}
.dkv-proyecto .pf-cmp__tag--a { left: 14px; }
.dkv-proyecto .pf-cmp__tag--b { right: 14px; background: var(--blue); color: #fff; }
.dkv-proyecto .pf-cmp-hint { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dkv-proyecto .pf-cmp-hint i { width: 26px; height: 1px; background: var(--border-fuerte); }

.dkv-proyecto .pf-why { background: var(--bg-cream); padding: clamp(50px,6.5vw,96px) 0; margin-top: clamp(28px,4vw,56px); }
.dkv-proyecto .pf-why__in { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: clamp(22px,3.4vw,60px); align-items: start; }
.dkv-proyecto .pf-why h2 { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dkv-proyecto .pf-why p { font-size: clamp(1rem,1.3vw,1.15rem); line-height: 1.8; color: #3d3b37; max-width: 70ch; }
.dkv-proyecto .pf-why p + p { margin-top: 15px; }
.dkv-proyecto .pf-why p b { font-weight: 400; color: var(--text); }
.dkv-proyecto .pf-why__quote { margin-top: clamp(24px,3vw,38px); padding-left: clamp(18px,2.4vw,28px); border-left: 2px solid var(--blue); }
.dkv-proyecto .pf-why__quote p { font-family: var(--f-display); font-size: clamp(1.4rem,2.5vw,2.05rem); line-height: 1.35; max-width: 32ch; }
.dkv-proyecto .pf-why__quote em { font-family: var(--f-italic); font-style: italic; color: var(--blue); }

/* ════════════════════════════════════════════════════════════
   ENTREGABLES (rejilla) — fichas 2 y 3
═══════════════════════════════════════════════════════════ */
.dkv-proyecto .pf-pieces { padding: clamp(50px,6.5vw,96px) 0; }
.dkv-proyecto .pf-pieces--cream { background: var(--bg-cream); }
.dkv-proyecto .pf-pieces__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(24px,3vw,42px); }
.dkv-proyecto .pf-pieces__head h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.7rem,3vw,2.6rem); white-space: nowrap; }
.dkv-proyecto .pf-pieces__head h2 em { font-family: var(--f-italic); font-style: italic; color: var(--blue); }
.dkv-proyecto .pf-pieces__head .rule { flex: 1; height: 1px; background: var(--border-fuerte); }
.dkv-proyecto .pf-pieces__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px,1fr)); gap: clamp(20px,2.6vw,38px); }
.dkv-proyecto .pf-piece { padding-top: 18px; border-top: 1px solid var(--border-fuerte); }
.dkv-proyecto .pf-piece h3 { font-family: var(--f-display); font-weight: 300; font-size: 1.5rem; margin: 10px 0 8px; }
.dkv-proyecto .pf-piece p { font-size: 12.8px; line-height: 1.66; color: #57544f; }

/* ════════════════════════════════════════════════════════════
   SIGUIENTE PROYECTO + CTA — común
═══════════════════════════════════════════════════════════ */
.dkv-proyecto .pf-next { padding: clamp(30px,4vw,60px) 0; }
.dkv-proyecto .pf-next a {
  display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: clamp(20px,3vw,40px);
  align-items: center; padding-top: clamp(24px,3vw,38px);
  border-top: 1px solid var(--border-fuerte); transition: padding-left .5s var(--ease);
}
.dkv-proyecto .pf-next a:hover { padding-left: 16px; }
.dkv-proyecto .pf-next h3 {
  font-family: var(--f-display); font-weight: 300; font-size: clamp(1.8rem,3.6vw,3rem);
  line-height: 1; margin-top: 10px; transition: color .4s var(--ease);
}
.dkv-proyecto .pf-next h3 .it { font-family: var(--f-italic); font-style: italic; }
.dkv-proyecto .pf-next a:hover h3 { color: var(--blue); }
.dkv-proyecto .pf-next p { margin-top: 10px; font-size: 13.5px; color: #57544f; max-width: 52ch; }
.dkv-proyecto .pf-next__fig { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border-fuerte); }
.dkv-proyecto .pf-next__fig img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.dkv-proyecto .js-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.dkv-proyecto .js-reveal.is-in { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .dkv-proyecto .pf-body { grid-template-columns: 1fr; gap: 26px; }
  .dkv-proyecto .pf-toc {
    position: static; display: flex; gap: 6px; overflow-x: auto;
    padding-bottom: 8px; border-bottom: 1px solid var(--border-fuerte);
  }
  .dkv-proyecto .pf-toc__title { display: none; }
  .dkv-proyecto .pf-toc a { white-space: nowrap; border-left: 0; border-bottom: 1px solid transparent; margin: 0; padding: 8px 12px; }
  .dkv-proyecto .pf-toc a:hover, .dkv-proyecto .pf-toc a.is-on { border-left: 0; border-bottom-color: var(--blue); }
  .dkv-proyecto .pf-duo { grid-template-columns: 1fr; }

  .dkv-proyecto .pf-tour__in { grid-template-columns: 1fr; }
  .dkv-proyecto .pf-stage { display: none; }
  .dkv-proyecto .pf-step { min-height: auto; padding: 0 0 clamp(36px,6vw,56px); }
  .dkv-proyecto .pf-step__img { display: block; margin-top: 22px; border: 1px solid var(--border-fuerte); overflow: hidden; max-height: 420px; }
  .dkv-proyecto .pf-step__img img { width: 100%; display: block; }

  .dkv-proyecto .pf-next a { grid-template-columns: 1fr; }
  .dkv-proyecto .pf-next__fig { display: none; }
}
@media (max-width: 900px) {
  .dkv-proyecto .pf-top--split .pf-head2,
  .dkv-proyecto .pf-cmp-head,
  .dkv-proyecto .pf-why__in { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dkv-proyecto .js-reveal { opacity: 1; transform: none; transition: none; }
  .dkv-proyecto .pf-device__view img { transition: none; }
}