/* ============================================================
   Argency — Project / Case Study page (CULTOR)
   Hereda tokens, fuentes y helpers de styles.css.
   Sólo layout específico de la página de proyecto.
   ============================================================ */

/* Imágenes con reveal por máscara: el wrapper recorta, el <img> hace un
   leve scale. El estado inicial real lo fija project.js (gsap.fromTo) para
   evitar el flash; aquí sólo aseguramos overflow + comportamiento base. */
.pj-figure {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--light-4);
  will-change: clip-path;
}
.pj-figure img,
.pj-figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* ---- Hero -------------------------------------------------- */
.pj-hero { padding-top: calc(var(--space-120) + var(--space-40)); }
.pj-hero__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-48);
}
.pj-hero__tags {
  display: flex;
  gap: var(--space-24);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.pj-hero__tags .eyebrow::before { content: none; }
.pj-hero__title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -1px;
  margin: 0;
}
.pj-hero__media {
  margin-top: var(--space-48);
  aspect-ratio: 16 / 9;
}
@media (max-width: 600px) {
  .pj-hero__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }
  .pj-hero__tags {
    justify-content: flex-start;
    gap: var(--space-16) var(--space-24);
  }
}

/* ---- Statement (fondo claro) ------------------------------- */
.pj-statement {
  background: var(--color-light);
  color: var(--color-dark);
  text-align: center;
  padding-block: var(--space-100);
  margin-block: var(--space-120);
}
.pj-statement__text {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -1px;
  max-width: 22ch;
  margin-inline: auto;
}
.pj-statement__text .accent {
  font-weight: var(--font-weight--medium);
  color: var(--brand-teal);
}

/* ---- Bloque de metadatos (Cliente / Industria / Servicios) - */
.pj-meta {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: var(--space-48);
  padding-block: var(--space-80);
  border-top: 1px solid var(--light-16);
}
.pj-meta__label { display: block; margin-bottom: var(--space-24); color: var(--light-48); }
.pj-meta__text { color: var(--light-88); font-size: var(--text-large); max-width: 46ch; }
.pj-meta__item:not(:last-child) {
  padding-right: var(--space-48);
  border-right: 1px solid var(--light-16);
}
.pj-meta__name {
  font-family: var(--font--heading-serif);
  font-weight: var(--font-weight--light);
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--brand-teal);
  margin: 0;
}

/* ---- Secciones narrativas (intro / proceso / resultado) ---- */
.pj-sec { padding-block: var(--space-120); }
.pj-sec--line { border-top: 1px solid var(--light-16); }
.pj-sec__title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: var(--space-40);
}
.pj-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-80);
  align-items: start;
}
.pj-intro .pj-prose { max-width: calc(48ch + var(--space-64)); }
.pj-intro__media { margin: 0; }
.pj-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
@media (max-width: 860px) {
  .pj-intro { grid-template-columns: 1fr; gap: var(--space-40); }
  .pj-intro__media { order: -1; }
}

.pj-prose { max-width: 48ch; }
.pj-prose p { color: var(--light-64); }
.pj-prose p + p { margin-top: var(--space-24); }
.pj-prose strong { color: var(--color-light); font-weight: var(--font-weight--medium); }
.pj-prose .q {
  display: block;
  margin-top: var(--space-32);
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--color-light);
}
.pj-lead {
  font-size: var(--text-large);
  line-height: 1.5;
  color: var(--light-88);
  max-width: 54ch;
}

/* sección en 2 columnas: imagen izquierda, texto derecha */
.pj-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-80);
  align-items: center;
}
.pj-split__media { margin: 0; }
.pj-split__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 0;
}
.pj-split__body .pj-prose { max-width: 48ch; }
.pj-split__media--square {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
}
.pj-split__media--square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* sección 2 columnas con imagen fija (sticky) mientras scrollea el texto */
.pj-sticky {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-80);
  align-items: start;
  padding-bottom: var(--space-120);
}
.pj-sticky__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding-left: var(--space-64);
}
.pj-sticky__body .pj-prose { max-width: 48ch; }
.pj-sticky__media {
  margin: 0;
  position: sticky;
  top: var(--space-120);
  align-self: start;
}
@media (max-width: 860px) {
  .pj-sticky { grid-template-columns: 1fr; gap: var(--space-40); }
  .pj-sticky__body { padding-left: 0; }
  .pj-sticky__media { position: static; order: -1; }
}

/* mismo padding-left que 'El valor del proceso' para los bloques de la
   izquierda (intro, secciones full-width) y el centrado (Observar antes…) */
.pj-intro .pj-prose,
.pj-sec > .pj-sec__title,
.pj-sec > .pj-prose,
.pj-thirds__col--main {
  padding-left: var(--space-64);
}
@media (max-width: 860px) {
  .pj-intro .pj-prose,
  .pj-sec > .pj-sec__title,
  .pj-sec > .pj-prose,
  .pj-thirds__col--main {
    padding-left: 0;
  }
}
/* 'Una colección de lugares': ancho máx. = la primera línea de su párrafo */
.pj-sec > .pj-prose { max-width: calc(72ch + var(--space-64)); }
@media (max-width: 860px) {
  .pj-split { grid-template-columns: 1fr; gap: var(--space-40); }
}

/* sección en 3 columnas: la del medio (texto) más ancha que las laterales */
.pj-thirds {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-40);
  align-items: start;
}
.pj-thirds__col--main { text-align: center; }
.pj-thirds__col--main .pj-sec__title { text-align: center; }
.pj-thirds__col--main .pj-prose { max-width: none; margin-inline: auto; }
@media (max-width: 860px) {
  .pj-thirds { grid-template-columns: 1fr; }
}

/* lista de submarcas (una colección de lugares) */
.pj-places { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-24); }
.pj-places li {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.5px;
  color: var(--light-88);
}

/* ---- Video centrado (sitio web) ---------------------------- */
.pj-video {
  margin: 0 auto;
  margin-bottom: var(--space-120);
  max-width: 960px;
  border-radius: 0;
  overflow: hidden;
  background: var(--light-4);
}
.pj-video video {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Tira de submarcas (6 vinos) --------------------------- */
.pj-carousels { margin-top: var(--space-80); }
.pj-carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-8);
}
.pj-carousel__track::-webkit-scrollbar { display: none; }
.pj-carousel__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 340px);
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--light-4);
  scroll-snap-align: start;
}
.pj-carousel__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pj-carousel__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
}
.pj-carousel__name {
  position: absolute;
  left: var(--space-16);
  right: var(--space-16);
  bottom: var(--space-40);
  z-index: 1;
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: -0.3px;
  line-height: 1.1;
  color: var(--color-light);
}
.pj-carousel__place {
  position: absolute;
  left: var(--space-16);
  right: var(--space-16);
  bottom: var(--space-16);
  z-index: 1;
  font-family: var(--font--ui);
  font-weight: var(--font-weight--normal);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.5px;
  line-height: 1.2;
  color: var(--light-64);
}
@media (max-width: 600px) {
  .pj-carousel__card { width: 78vw; }
}

/* ---- Testimonio del enólogo -------------------------------- */
.pj-testi {
  text-align: center;
  padding-block: var(--space-100);
  border-block: 1px solid var(--light-16);
}
.pj-testi__quote {
  font-family: var(--font--heading-serif);
  font-weight: var(--font-weight--light);
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  max-width: min(90vw, 460px);
  margin-inline: auto;
}
.pj-testi__author { display: block; margin-top: var(--space-48); color: var(--light-48); }

/* ---- Cierre ------------------------------------------------ */
.pj-close { text-align: center; padding-block: var(--space-160); border-block: 1px solid var(--light-16); }
.pj-close__text {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -1px;
  max-width: 20ch;
  margin-inline: auto;
}
.pj-close__text .accent { color: var(--brand-teal); font-weight: var(--font-weight--medium); }

/* ---- Imagen full-bleed de sección -------------------------- */
.pj-band { padding-block: var(--space-64); }
.pj-band--wide .pj-figure { aspect-ratio: 21 / 9; }
.pj-band--tall .pj-figure { aspect-ratio: 4 / 5; max-width: 760px; margin-inline: auto; }
.pj-band--bottles .pj-figure { aspect-ratio: 16 / 10; background: #000; }

/* ---- Bloque sticky: media fija + texto que scrollea -------- */
.pj-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-80);
  align-items: start;
  padding-block: var(--space-120);
}
.pj-block__media { position: sticky; top: var(--space-120); align-self: start; }
/* la media conserva su proporción natural (sin recorte) y queda más baja que
   el viewport, para poder quedar fija mientras el texto —más alto— scrollea
   por al lado hasta el siguiente bloque */
.pj-block__media .pj-figure { height: auto; max-height: 82vh; }
.pj-block__media .pj-figure img { height: auto; }
.pj-block__media .pj-figure + .pj-figure { margin-top: var(--space-16); }
.pj-block__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-32);
  min-height: 92vh;
}
/* texto a la izquierda: mismo padding-left que 'El valor del proceso' y
   alineado al top con la imagen de la derecha */
.pj-block:not(.pj-block--media-left) .pj-block__body {
  padding-left: var(--space-64);
  justify-content: flex-start;
}

/* variante: media a la izquierda, texto a la derecha */
.pj-block--media-left .pj-block__media { order: -1; }

.pj-block__eyebrow { color: var(--light-48); }
.pj-block__title {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -1px;
}
.pj-block__copy { color: var(--light-64); max-width: 48ch; }
.pj-block__copy + .pj-block__copy { margin-top: var(--space-16); }

/* ---- Cita grande ------------------------------------------- */
.pj-quote { padding-block: var(--space-120); }
.pj-quote__text {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -1px;
  text-align: left;
  max-width: calc(38ch + var(--space-64));
  padding-left: var(--space-64);
}
@media (max-width: 860px) {
  .pj-quote__text { padding-left: 0; }
}
.pj-quote__text .lead { color: var(--brand-teal); }
.pj-quote__credit { display: block; margin-bottom: var(--space-24); padding-left: var(--space-64); color: var(--light-48); }
@media (max-width: 860px) {
  .pj-quote__credit { padding-left: 0; }
}

/* ---- Media + play (home page dual video) ------------------- */
.pj-play { position: relative; }
.pj-play__btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: var(--brand-teal);
  color: var(--color-dark);
  transition: transform 0.4s var(--ease-signature);
}
.pj-play:hover .pj-play__btn { transform: scale(1.08); }
.pj-play__btn svg { width: 26px; height: 26px; margin-left: 4px; }

/* overlay de texto sobre imagen (video player) */
.pj-overlay { position: relative; }
.pj-overlay__caption {
  position: absolute;
  left: var(--space-48);
  bottom: var(--space-48);
  max-width: 32ch;
  font-family: var(--font--heading-serif);
  font-weight: var(--font-weight--light);
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.15;
  color: var(--color-light);
  z-index: 2;
}

/* ---- Scope of work ----------------------------------------- */
.pj-scope {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: var(--space-48);
  padding-block: var(--space-120);
  border-top: 1px solid var(--light-16);
}
.pj-scope__title { color: var(--light-48); }
.pj-scope__col-label { display: block; margin-bottom: var(--space-24); color: var(--light-88); }
.pj-scope__list { display: flex; flex-direction: column; gap: var(--space-12); }
.pj-scope__list li { color: var(--light-48); font-size: var(--text-small); }

/* ---- Case studies ------------------------------------------ */
.pj-cases { padding-block: var(--space-120); border-top: 1px solid var(--light-16); }
.pj-cases__head { margin-bottom: var(--space-64); }
.pj-cases__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}
.pj-case__media { aspect-ratio: 3 / 4; margin-bottom: var(--space-16); }
.pj-case__name {
  font-family: var(--font--heading);
  font-weight: var(--font-weight--light);
  text-transform: uppercase;
  font-size: var(--h6-size);
  letter-spacing: -0.5px;
}
.pj-case__tag { display: block; margin-top: var(--space-8); color: var(--light-48); }
.pj-case { display: block; color: inherit; text-decoration: none; transition: opacity 0.4s; }
.pj-case:hover { opacity: 0.7; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .pj-scope { grid-template-columns: repeat(2, 1fr); }
  .pj-cases__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   TEMA CLARO (#E1DFDD) — casos como Chadwick / La Marchigiana.
   Se activa con .pj--light en <body>; invierte texto/bordes a la
   rampa oscura. El footer conserva su fondo oscuro propio.
   ============================================================ */
.pj--light { background: var(--bg-1); color: var(--color-dark); }
.pj--light .eyebrow { color: var(--dark-64); }
.pj--light .pj-prose p,
.pj--light .pj-block__copy { color: var(--dark-64); }
.pj--light .pj-prose strong,
.pj--light .pj-prose .q { color: var(--color-dark); }
.pj--light .pj-lead { color: color-mix(in srgb, var(--color-dark) 78%, transparent); }
.pj--light .pj-meta__text { color: color-mix(in srgb, var(--color-dark) 82%, transparent); }
.pj--light .pj-meta__label,
.pj--light .pj-block__eyebrow,
.pj--light .pj-testi__author,
.pj--light .pj-case__tag,
.pj--light .pj-quote__credit { color: var(--dark-64); }
.pj--light .pj-meta,
.pj--light .pj-meta__item:not(:last-child),
.pj--light .pj-sec--line,
.pj--light .pj-testi,
.pj--light .pj-close,
.pj--light .pj-cases { border-color: var(--dark-8); }
.pj--light .pj-figure,
.pj--light .pj-video { background: var(--dark-4); }
.pj--light .pj-places li { color: color-mix(in srgb, var(--color-dark) 82%, transparent); }
/* en claro el "statement" no es un bloque negro: la frase queda sobre el fondo
   claro, separada con dividers (arriba y abajo) */
.pj--light .pj-statement {
  background: transparent;
  color: var(--color-dark);
  border-block: 1px solid var(--dark-8);
}

/* en claro, la tira "Más casos" va sobre fondo oscuro (gris oscuro del home),
   full-width, como un cierre de contraste antes del bloque final */
.pj-cases-band { background: var(--color-dark); color: var(--color-light); }
.pj-cases-band .pj-cases { border-top: 0; }
.pj-cases-band .eyebrow { color: var(--light-48); }
.pj-cases-band .pj-figure { background: var(--light-4); }

/* ============================================================
   DÍPTICO — dos imágenes lado a lado (casos con poca media)
   ============================================================ */
.pj-diptych {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-24); align-items: stretch;
  margin-block: var(--space-40);
}
.pj-diptych .pj-figure { aspect-ratio: 4 / 5; }
@media (max-width: 768px) {
  .pj-diptych { grid-template-columns: 1fr; }
}

/* hero panorámico (cuando la media principal es cinematográfica) */
.pj-hero__media--cine { aspect-ratio: 1.92 / 1; }

@media (max-width: 768px) {
  .pj-block {
    grid-template-columns: 1fr;
    gap: var(--space-40);
    padding-block: var(--space-80);
  }
  /* en mobile no hay sticky: imagen y texto fluyen en una columna */
  .pj-block__media { position: static; }
  .pj-block__body { min-height: 0; }
  .pj-block:not(.pj-block--media-left) .pj-block__body { padding-left: 0; }
  .pj-block--media-left .pj-block__media { order: 0; }
  .pj-meta { grid-template-columns: 1fr; gap: var(--space-40); }
  .pj-meta__item:not(:last-child) { padding-right: 0; border-right: 0; padding-bottom: var(--space-40); border-bottom: 1px solid var(--light-16); }
  .pj-scope { grid-template-columns: 1fr; gap: var(--space-40); }
  .pj-cases__grid { grid-template-columns: 1fr; }
  .pj-overlay__caption { left: var(--space-24); bottom: var(--space-24); }
}