/* ============================================================
   CRÉCIMA — Página de proyecto
   Medido sobre "Proyecto — Desktop 1440".
   Es la plantilla: todo lo que varía por proyecto sale de ACF.
   ============================================================ */

:root { --container-pr: 1264px; }

.container-pr {
  max-width: calc(var(--container-pr) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

body.pagina-proyecto { background: var(--bg-light); }

/* ------------------------------------------------------------
   LA MITAD DE ENTRADA DE LA CORTINA
   ------------------------------------------------------------
   En el resto del sitio el velo se desvanece en el lugar. Acá
   no: sigue el movimiento que arrancó en el listado y sale por
   arriba, con el mismo degradado. Así las dos páginas se leen
   como un solo gesto y no como dos efectos pegados.

   Va un poco más lento que la mitad de salida —0,7 s contra
   0,5 s—: la salida empuja y la entrada suelta.

   Se aplica siempre, no sólo viniendo del listado. Llegando de
   Google o desde la Home es un buen ingreso igual, y depender de
   cómo llegó el visitante sería frágil.
   ------------------------------------------------------------ */
.pagina-proyecto .velo {
  background: linear-gradient(180deg, #a376f9 0%, #4d399d 100%);
  animation: cortina-sale 0.7s var(--ease-io) forwards;
}
@keyframes cortina-sale {
  to { translate: 0 -100%; }
}

/* ------------------------------------------------------------
   1. PORTADA
   ------------------------------------------------------------ */
.pr-hero {
  background: var(--bg-hero);
  color: var(--text-invert);
  padding-top: clamp(120px, 12.8vw, 184px);
  padding-bottom: clamp(30px, 4.2vw, 60px);
}
.pr-hero__chip {
  display: inline-block;
  padding: 0.5em 1.1em;
  margin-bottom: clamp(12px, 1.7vw, 24px);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  font-size: var(--fs-small);
}
/* 52px: es el ancho que mide "Nea Eléctrica" en el frame */
.pr-hero__title {
  font-size: clamp(32px, 3.61vw, 52px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Alto proporcional al ancho, con techo en los 880 del diseño y
   piso para que en teléfono no quede una franja. La imagen
   rellena el contenedor y se recorta por el centro: así el mismo
   bloque acepta piezas de proporciones distintas, que es lo que
   va a pasar cuando se carguen tres recortes desde el ACF. */
.pr-portada {
  height: clamp(320px, 61vw, 880px);
  background: var(--bg-hero);
  overflow: hidden;
  line-height: 0;
}
.pr-portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------------------------
   2. FICHA + DESCRIPCIÓN
   ------------------------------------------------------------ */
.panel--claro { background: var(--bg-light); }
.pr-ficha {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--radius-panel));
  padding-top: clamp(48px, 5.6vw, 80px);
  padding-bottom: clamp(60px, 8.3vw, 120px);
}
.pr-ficha__grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

.pr-datos__par { margin-bottom: var(--space-lg); }
.pr-datos dt {
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
}
.pr-datos dd {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-soft);
}

/* El círculo y la flecha son una sola pieza con el rótulo */
.pr-sitio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.pr-sitio__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-out);
}
.pr-sitio__ico svg { width: 22px; height: 22px; }
.pr-sitio:hover .pr-sitio__ico { transform: translate(3px, -3px); }

.pr-desc__content {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65;
  max-width: 720px;
}
.pr-desc__content p { margin-bottom: var(--space-lg); }
.pr-desc__content p:last-child { margin-bottom: 0; }
.pr-desc__content b,
.pr-desc__content strong { font-weight: 700; }

/* Pilares: la fila se acomoda a cuántos haya (de dos a cuatro) */
.pr-pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(40px, 5.5vw, 80px);
}
.pilar__ico {
  display: block;
  width: 28px; height: 28px;
  margin-bottom: var(--space-md);
  color: var(--text);
}
.pilar__ico svg { width: 100%; height: 100%; }
.pilar__title {
  font-size: clamp(18px, 1.53vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.pilar__sub {
  font-size: clamp(14px, 1.11vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-soft);
}

/* ------------------------------------------------------------
   3. IMAGEN ANCHA
   ------------------------------------------------------------ */
.pr-ancha {
  max-width: calc(var(--container-pr) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  line-height: 0;
}
.pr-ancha img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Marcador de contenido pendiente: mismo tramado que el bloque
   de video de la Home, para que se lea como "falta la pieza" y
   no como un bloque de color del diseño. */
.marcador {
  height: 100%;
  display: grid;
  place-items: center;
  background: repeating-conic-gradient(#e9e9ee 0% 25%, #d8d8e0 0% 50%) 50% / 48px 48px;
  color: #6b6b80;
}
.marcador span {
  font-size: var(--fs-lead);
  letter-spacing: 0.04em;
  padding: 0.8em 1.4em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.78);
}

/* ------------------------------------------------------------
   4. RECORRIDO — la columna de imagen queda fija
   ------------------------------------------------------------
   Una sola columna sticky para todo el bloque, con las imágenes
   apiladas una encima de otra: la que corresponde al texto que
   se está leyendo se enciende y las demás quedan en cero. Así la
   imagen no se va nunca — cambia en el lugar — y la columna se
   suelta recién cuando pasa el último texto.

   La alternativa (que cada imagen fuera sticky dentro de su
   propio texto) es más corta, pero hace que la imagen suba y se
   vaya con cada bloque. No es lo mismo.
   ------------------------------------------------------------ */
.pr-recorrido { padding-block: clamp(70px, 10vw, 150px); }

.pr-pasos {
  max-width: calc(var(--container-pr) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.pr-media {
  position: sticky;
  top: 0;
  height: 100svh;
}
.pr-media__slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  /* La visibilidad acompaña a la opacidad para que las imágenes
     apagadas no queden interceptando el puntero. */
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
}
.pr-media__slot.is-activa {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.pr-media__slot--empty { display: none; }
.pr-media__slot img,
.pr-media__slot .marcador {
  width: 100%;
  height: 78svh;
  object-fit: contain;
  border-radius: var(--radius-card);
}

/* Cada texto ocupa una pantalla: ese es el tramo que dura su
   imagen antes de dar paso a la siguiente. */
.paso {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.paso__num {
  font-size: var(--fs-body);
  color: var(--text-soft);
  margin-bottom: var(--space-md);
}
/* 36px en versalitas: la mayúscula mide 25px en el frame */
.paso__title {
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.17;
  margin-bottom: var(--space-lg);
}
.paso__desc {
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 340px;
}

/* ------------------------------------------------------------
   5. CIERRE VISUAL
   ------------------------------------------------------------ */
.pr-cierre {
  padding-block: clamp(40px, 6vw, 90px) clamp(70px, 10vw, 150px);
  text-align: center;
}
.pr-cierre__media {
  width: 100%;
  max-width: calc(var(--container-pr) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: clamp(32px, 4.5vw, 64px);
}
.pr-cierre__media > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
.pr-cierre__media .marcador,
.pr-cierre__media iframe,
.pr-cierre__media .mejs-container:not(.mejs-container-fullscreen) {
  aspect-ratio: 1256 / 720;
}
.pr-cierre__media .wp-video,
.pr-cierre__media iframe,
.pr-cierre__media video,
.pr-cierre__media .mejs-container:not(.mejs-container-fullscreen) {
  display: block;
  width: 100% !important;
  max-width: 100%;
}
.pr-cierre__media iframe,
.pr-cierre__media .mejs-container:not(.mejs-container-fullscreen) {
  height: auto !important;
}
.pr-cierre__media iframe,
.pr-cierre__media .wp-video,
.pr-cierre__media .mejs-container {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.pr-cierre__media:last-child { margin-bottom: 0; }
.pr-cierre__title {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  margin-bottom: var(--space-md);
}
.pr-cierre__title:last-child { margin-bottom: 0; }
.pr-cierre__p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 830px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------
   6. EL IMPACTO
   ------------------------------------------------------------ */
.pr-impacto {
  position: relative;
  z-index: 1;
  background: var(--bg-navy);
  color: var(--text-invert);
  padding-top: clamp(70px, 8.6vw, 124px);
  padding-bottom: clamp(70px, 9vw, 130px);
  overflow: hidden;
}
.pr-impacto--sin-testimonio { padding-bottom: 260px; }
.pr-impacto__grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
/* 32px: la mayúscula mide 23px en el frame */
.pr-impacto__rotulo {
  font-size: clamp(22px, 2.22vw, 32px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
/* 28px con interlineado de 34 */
.pr-impacto__p {
  font-size: clamp(20px, 1.95vw, 28px);
  line-height: 1.21;
  letter-spacing: -0.01em;
  margin-bottom: clamp(32px, 4.4vw, 64px);
}
.pr-impacto__p:last-child { margin-bottom: 0; }
.pr-impacto__nota {
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 1.6;
  color: var(--text-invert-soft);
  max-width: 520px;
}

/* Testimonio sobre las órbitas */
.pr-testi {
  position: relative;
  margin-top: clamp(80px, 12vw, 170px);
  display: grid;
  place-items: center;
  min-height: clamp(420px, 42vw, 600px);
}
.pr-testi .orbit { border-color: rgba(255, 255, 255, 0.14); }
.pr-testi__card {
  position: relative;
  z-index: 1;
  width: min(724px, 90vw);
  padding: clamp(28px, 3.6vw, 52px);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(24, 15, 52, 0.9), rgba(106, 76, 224, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
.pr-testi__card blockquote {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
  margin-bottom: var(--space-xl);
}
.pr-testi__card blockquote:last-child { margin-bottom: 0; }
.pr-testi__card figcaption { font-size: var(--fs-small); }
.pr-testi__card figcaption b { display: block; font-weight: 700; }
.pr-testi__card figcaption span { color: var(--text-invert-soft); }

/* ------------------------------------------------------------
   7. OTROS PROYECTOS
   ------------------------------------------------------------ */
.pr-otros {
  position: relative;
  z-index: 1;
  background: var(--bg-navy);
  color: var(--text-invert);
  padding-bottom: clamp(70px, 9vw, 130px);
}
.pr-otros__title {
  font-size: clamp(22px, 2.22vw, 32px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: clamp(32px, 4.4vw, 64px);
}
.pr-otros__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  align-items: start;
}
.otro__media {
  display: block;
  aspect-ratio: 436 / 436;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}
.otro__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.otro__media:hover img { transform: scale(1.04); }
.otro__name {
  font-size: clamp(18px, 1.53vw, 22px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}
.otro__desc {
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.5;
  color: var(--text-invert-soft);
  margin-bottom: var(--space-lg);
}
/* Botón de contorno: el relleno violeta compite con las imágenes */
.btn--linea {
  background: transparent;
  color: var(--text-invert);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-weight: 400;
}
.btn--linea:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .pr-ficha__grid,
  .pr-impacto__grid { grid-template-columns: 1fr; }
  .pr-otros__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sólo en la franja de tablet: con dos columnas el tercer
   proyecto arranca una fila para él solo y queda colgado. Se
   muestran dos y la fila cierra pareja.

   El rango es cerrado a propósito. En teléfono la grilla es de
   una columna, así que los tres se apilan sin dejar huérfano y
   no hay motivo para esconder ninguno. */
@media (min-width: 641px) and (max-width: 1024px) {
  .pr-otros__grid > :nth-child(n + 3) { display: none; }
}

/* ------------------------------------------------------------
   MÓVIL — el recorrido pasa a carrusel horizontal
   ------------------------------------------------------------
   Mismo marcado, otro eje. El desplazamiento con imán es del
   navegador: acompaña el dedo, respeta el rebote del sistema y
   no se pelea con el scroll suave de la página. Un carrusel
   hecho a mano en móvil siempre se siente peor que el nativo.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   MÓVIL — las tarjetas se apilan una sobre otra
   ------------------------------------------------------------
   Cada tarjeta se pega arriba y la siguiente sube y la tapa por
   completo. Es el mismo recurso que el apilado de servicios de
   la Home, con una diferencia: allá cada tarjeta deja asomando
   una franja, acá la nueva cubre entera a la anterior.

   Todas comparten el mismo `top`, así que la que llega se frena
   en el mismo lugar donde está la anterior y queda encima. El
   orden de apilado lo da el orden del documento: no hace falta
   un z-index por tarjeta.

   La columna fija de escritorio no participa: initRecorrido()
   muda cada imagen adentro de su tarjeta.

   Corta en 1024, igual que el resto de la página: de ahí para
   abajo la columna partida en dos deja el texto demasiado
   angosto y el apilado se lee mucho mejor.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .pr-recorrido { padding-block: clamp(40px, 9vw, 70px); }
  .pr-pasos { display: block; padding-inline: 20px; }
  .pr-media { display: none; }
  /* Aire abajo para que la última tarjeta llegue a su lugar
     antes de que el bloque se termine. */
  .pr-textos { padding-bottom: 10svh; }

  .paso {
    position: sticky;
    top: 86px;
    min-height: calc(100svh - 86px);
    display: block;
    /* 710 es la medida del frame de tablet. En teléfono el 100%
       manda y la tarjeta ocupa el ancho disponible. */
    width: min(100%, 710px);
    margin-inline: auto;
    /* Este margen es el tiempo de lectura: es lo que se recorre
       con la tarjeta quieta antes de que asome la siguiente. Con
       28px la de abajo se trepaba encima del texto apenas se
       empezaba a leer. */
    margin-bottom: clamp(240px, 46svh, 420px);
    padding: 16px 16px clamp(34px, 6.6vw, 50px);
    /* Recorta la pieza contra el radio de la tarjeta */
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--bg-light);
    /* La sombra apunta hacia arriba: es la que da el indicio de
       que esta tarjeta viene por delante de la anterior. */
    box-shadow: 0 -14px 34px -20px rgba(24, 15, 52, 0.18);
  }
  .paso:last-child { margin-bottom: 0; }

  .pr-media__slot {
    position: static;
    opacity: 1;
    visibility: visible;
    display: block;
    /* La pieza llega a los bordes de la tarjeta; el margen de 16
       es sólo para el texto. Sin esto la imagen queda 32px más
       angosta y la tarjeta pierde alto. */
    margin-inline: -16px;
    margin-bottom: var(--space-xl);
  }
  /* Proporción del frame: 710 x 544. Va `contain` y no `cover`
     porque estas piezas son mockups recortados sobre fondo
     transparente — recortarlos les come el equipo. */
  .pr-media__slot img,
  .pr-media__slot .marcador {
    aspect-ratio: 710 / 544;
    height: auto;
    /* Techo contra el alto de pantalla: la tarjeta entera tiene
       que entrar en la ventana o el apilado deja de leerse —una
       tarjeta más alta que la pantalla se pega por el borde de
       arriba y nunca se ve completa. Pasa en tablet apaisado. */
    max-height: 53svh;
    object-fit: contain;
  }
  /* Medidos del frame: 14 / 23 / 16, con el titular bien
     apretado (interlineado 24 sobre cuerpo 23). */
  .paso__num { font-size: 14px; margin-bottom: var(--space-sm); }
  .paso__title { font-size: 23px; line-height: 1.06; }
  .paso__desc { font-size: 16px; line-height: 1.44; max-width: none; }

  .pr-otros__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sólo en la franja de tablet: con dos columnas el tercer
   proyecto arranca una fila para él solo y queda colgado. Se
   muestran dos y la fila cierra pareja.

   El rango es cerrado a propósito. En teléfono la grilla es de
   una columna, así que los tres se apilan sin dejar huérfano y
   no hay motivo para esconder ninguno. */
@media (min-width: 641px) and (max-width: 1024px) {
  .pr-otros__grid > :nth-child(n + 3) { display: none; }
}

/* Sólo teléfono. El corte va en 640 y no en 820: con 820 este
   bloque alcanzaba a la tablet de 768 y le pisaba la medida de
   la tarjeta, el cuerpo del titular y la proporción de la foto. */
@media (max-width: 640px) {
  .pr-impacto--sin-testimonio { padding-bottom: 120px; }
  .pr-cierre__media { padding-inline: 0; }
  .pr-cierre__media > img {
    border-radius: 0 48px 0 48px;
    object-fit: contain;
  }

  /* Acá la pieza se para: 710x544 apaisado sobre 350 de ancho
     deja la imagen en 268 de alto y no se lee nada. */
  .pr-media__slot img,
  .pr-media__slot .marcador { aspect-ratio: 3 / 4; }

  .pr-otros__grid { grid-template-columns: 1fr; gap: 32px; }
  .pr-hero__title { font-size: clamp(28px, 8vw, 34px); }
  .pr-impacto__p { font-size: clamp(19px, 5.4vw, 22px); }
  .paso__title { font-size: 21px; }
}