/* =========================================================================
   Caso editorial de proyecto (inc/project-stories.php · template-parts/case)
   Fondo claro de Andez (--light-*), Geist, ritmo --ds-s*.
   Titular + datos en una línea → imagen que crece al bajar → proyecto y
   detalles → imagen completa → dos textos unidos → imagen completa → dos
   verticales → bloque negro (imagen vertical + solución y resultado) →
   siguiente proyecto.
   ========================================================================= */

body.is-case .site-main,
body.is-case.has-footer-reveal .site-main > .pj-case { background: var(--light-bg); }
.pj-case { color: var(--light-ink); overflow-x: clip; }
.pj-case :is(h1, h2, h3, p, dl, dd, figure) { margin: 0; }
/* theme.json pinta los títulos en claro (pensado para fondo oscuro): aquí, tinta. */
.pj-case :is(h1, h2, h3) { color: var(--light-ink); }
.pj-case .cs-dark :is(h1, h2, h3) { color: var(--ink); }
.pj-case img { display: block; width: 100%; height: auto; }

/* Etiqueta pequeña común (datos, detalles, secciones) */
.cs-intro__facts dt,.cs-item__label {
	font-size: max(0.75rem, 12px); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--light-muted);
}

/* --- 1. Titular + imagen ----------------------------------------------------- */
.cs-stage { position: relative; }
.cs-intro { display: grid; gap: var(--ds-s5); padding-block: clamp(6.5rem, 5rem + 4vw, 8.5rem) var(--ds-s5); }
@media (min-width: 900px) {
	.cs-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); column-gap: var(--ds-s6); align-items: stretch; }
}
.cs-intro__text { display: grid; align-content: space-between; gap: var(--ds-s5); }
.cs-intro__title { max-width: 20ch; font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.cs-intro__facts { display: flex; flex-wrap: wrap; gap: var(--ds-s2) clamp(1.25rem, 2.5vw, 2.5rem); }
.cs-intro__facts dd { margin-top: 0.3rem; font-size: 0.875rem; white-space: nowrap; color: var(--light-ink); }
@media (max-width: 599px) {
	.cs-intro__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 1.25rem; }
	.cs-intro__facts dd { font-size: 0.8125rem; white-space: normal; }
}
.cs-intro__ph { position: relative; aspect-ratio: 4 / 3; }
.cs-intro__img { position: absolute; inset: 0; overflow: hidden; background: var(--light-line); }
.cs-intro__img img { width: 100%; height: 100%; object-fit: cover; }

/* Escritorio: la imagen crece al bajar (case.js añade .is-grow y la mueve). */
/* Altura del escenario desde el primer pintado (html.cs-grow-on lo pone un
   script en <head>, inc/project-stories.php): sin saltos de layout (CLS). */
html.cs-grow-on .cs-stage, .cs-stage.is-grow { height: 230vh; }
html.cs-grow-on .cs-stage__sticky, .cs-stage.is-grow .cs-stage__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
html.cs-grow-on .cs-stage__sticky > .container, .cs-stage.is-grow .cs-stage__sticky > .container { width: 100%; padding-block: 5rem 0; }
.cs-stage.is-grow .cs-intro__img { position: fixed; inset: 0 auto auto 0; z-index: 3; will-change: transform, width, height; }
.cs-stage.is-grow .cs-intro__img img { transform-origin: 50% 50%; will-change: transform; }
.cs-stage.is-grow .cs-intro__text { will-change: opacity, transform; }
.cs-item { display: grid; gap: 0.9rem; }
.cs-item__title { max-width: 22ch; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.cs-prose { display: grid; gap: 1em; max-width: 52ch; font-size: 0.95rem; line-height: 1.65; color: var(--light-muted); }
.cs-prose p { text-wrap: pretty; }

/* --- 4. Imágenes ---------------------------------------------------------------- */
.cs-pair { display: grid; gap: clamp(0.5rem, 1vw, 1rem); }
@media (min-width: 720px) { .cs-pair--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-pair--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-fig { overflow: hidden; background: var(--light-line); }
.pj-case :is(.cs-full + .cs-pair, .cs-pair + .cs-full, .cs-full + .cs-full) { margin-top: clamp(0.5rem, 1vw, 1rem); }

/* --- 5. Bloque negro: imagen vertical + solución y resultado ---------------------- */
.cs-dark { margin-top: clamp(0.5rem, 1vw, 1rem); background: var(--bg); color: var(--ink); padding-block: var(--ds-s7); }
.cs-dark__grid { display: grid; gap: var(--ds-s6); }
@media (min-width: 900px) {
	.cs-dark__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: var(--ds-s7); align-items: start; }
	.cs-dark__img { position: sticky; top: 6rem; }
	.cs-dark__grid--solo { grid-template-columns: minmax(0, 1fr); }
}
.cs-dark__img { aspect-ratio: 3 / 4; background: #1A1D1B; }
.cs-dark__img img { width: 100%; height: 100%; object-fit: cover; }
.cs-dark__text { display: grid; gap: var(--ds-s7); }
.cs-dark .cs-item__label { color: var(--muted); }
.cs-dark .cs-prose { color: var(--muted); }

/* --- 6. Siguiente proyecto: al bajar se llena la línea y entra solo (case.js). */
.cs-next { position: relative; height: 175vh; background: var(--light-bg); color: var(--light-ink); }
.cs-next__sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.cs-next__head { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-s4); padding-block: calc(var(--ds-s6) + var(--ds-s3)) var(--ds-s4); }
.pj-case .cs-next__kicker { max-width: 16ch; font-size: var(--ds-fs-base); line-height: 1.35; color: var(--light-ink); }
.cs-next__bar { position: relative; width: min(30vw, 22rem); height: 1px; background: var(--light-line); }
.cs-next__bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--light-ink); }
.pj-case .cs-next__link { display: grid; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; min-height: 0; }
.cs-next__marquee { display: block; overflow: hidden; padding-block: var(--ds-s3) var(--ds-s5); font-size: var(--ds-fs-h1); }
.cs-next__track { display: flex; gap: 0.6em; animation-duration: 40s !important; width: max-content; animation: cs-marquee 26s linear infinite; }
.cs-next__track span { font-size: 1em; font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; white-space: nowrap; color: var(--light-ink); }
.cs-next__track span::after { content: ""; display: inline-block; width: 0.32em; height: 0.32em; margin-left: 0.6em; vertical-align: middle; border-radius: 50%; background: var(--accent); }
.cs-next__img { display: block; overflow: hidden; min-height: 0; margin-inline: var(--gutter); }
.cs-next__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.cs-next.is-on .cs-next__img img { transform: scale(1); }
.cs-next__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .cs-next { height: auto; } .cs-next__sticky { position: static; height: auto; } .cs-next__img { aspect-ratio: 16 / 9; } .cs-next__track { animation: none; } }

/* --- Entrada suave -------------------------------------------------------------- */
.case-js .cs-fig img, .case-js .cs-rv { transition: opacity 1s var(--ease), transform 1.4s var(--ease); }
.case-js .cs-rv { opacity: 0; transform: translateY(18px); }
.case-js .cs-fig:not(.cs-intro__img) img { opacity: 0; transform: scale(1.06); }
.case-js .is-in, .case-js .cs-fig.is-in img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.case-js .cs-rv, .case-js .cs-fig img { opacity: 1; transform: none; transition: none; }
	.cs-next__img img, .cs-next__name span { transition: none; }
}
@media print { .case-js .cs-rv, .case-js .cs-fig img { opacity: 1; transform: none; } }

/* --- Estructura de publicación (bloques «sec»): etiqueta pequeña a la
   izquierda; titular, texto y detalles en filas a la derecha. Tamaños y
   tipografía de la casa. ----------------------------------------------------- */
.pj-case .cs-intro__title { font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.pj-case .cs-item__title { font-weight: 700; letter-spacing: -0.03em; }
.cs-sec2 { display: grid; gap: var(--ds-s3); padding-block: var(--ds-s7); }
@media (min-width: 900px) {
	.cs-sec2 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--ds-s7); align-items: start; }
	.cs-sec2__label { position: sticky; top: 6.5rem; }
}
.pj-case .cs-sec2__label { font-size: var(--ds-fs-base); color: var(--light-ink); }
.cs-sec2__body { display: grid; gap: var(--ds-s4); max-width: 62ch; }
.pj-case .cs-sec2__title { font-size: var(--ds-fs-h3); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.cs-sec2__text { display: grid; gap: 1em; }
.cs-sec2__text p { font-size: var(--ds-fs-base); line-height: 1.65; color: var(--light-muted); }
.pj-case .cs-sec2__kicker { margin-top: var(--ds-s3); font-size: var(--ds-fs-base); color: var(--light-ink); }
.cs-rows { margin: 0; border-top: 1px solid var(--light-line); }
.cs-rows div { display: flex; justify-content: space-between; gap: var(--ds-s3); padding: var(--ds-s3) 0; border-bottom: 1px solid var(--light-line); }
.cs-rows dt { font-size: var(--ds-fs-base); color: var(--light-ink); }
.cs-rows dd { margin: 0; font-size: var(--ds-fs-base); text-align: right; color: var(--light-ink); }
.cs-chips { display: flex; flex-wrap: wrap; gap: var(--ds-s1); margin: 0; padding: 0; list-style: none; }
.cs-chips li { padding: var(--ds-s1) var(--ds-s2); border-radius: 999px; background: #E4E4E4; font-size: var(--ds-fs-sm); line-height: 1.25; color: var(--light-ink); }
.cs-list { display: grid; margin: var(--ds-s3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cs-list li { padding: var(--ds-s2) 0; border-bottom: 1px solid var(--line); font-size: var(--ds-fs-base); color: var(--ink); }
.cs-dark .cs-item__label { font-size: var(--ds-fs-h3) !important; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; text-transform: none !important; color: var(--ink) !important; }
/* Pares verticales: dos columnas también en móvil. */
.cs-pair--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-intro__facts dt { font-size: var(--ds-fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--light-muted); }
.cs-intro__facts dd { font-size: var(--ds-fs-base); color: var(--light-ink); }
.pj-case .cs-sec2__sub { margin-top: var(--ds-s3); font-size: var(--ds-fs-h4); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--light-ink); }

/* Siguiente caso en negro: enlaza con el footer. */
.cs-next, body.has-footer-reveal .site-main .cs-next { background: var(--bg); color: var(--ink); }
.pj-case .cs-next__kicker, .cs-next__track span { color: var(--ink); }
.cs-next__bar { background: var(--line); }
.cs-next__bar span { background: var(--ink); }

/* Llamado a la acción al final del caso (textos de la ficha del proyecto). */
.cs-cta { display: grid; gap: var(--ds-s3); justify-items: start; margin-top: var(--ds-s6); padding-top: var(--ds-s5); border-top: 1px solid var(--line); }
.pj-case .cs-cta__title { font-size: var(--ds-fs-h3); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.pj-case .cs-cta__text { font-size: var(--ds-fs-base); line-height: 1.6; color: var(--muted); max-width: 46ch; }
.cs-dark__text { align-content: start; }

/* Móvil: cabecera como publicación (título grande, una fila de datos, foto a sangre). */
@media (max-width: 719px) {
	.cs-intro { padding-block: calc(var(--ds-s7) + var(--ds-s5)) var(--ds-s5); gap: var(--ds-s6); }
	.cs-intro__text { gap: var(--ds-s6); }
	.cs-intro__facts { row-gap: var(--ds-s3); }
	.cs-intro__facts dd { margin-top: var(--ds-s1); }
	.pj-case .cs-intro__title { font-size: clamp(1.625rem, 7.5vw, 2.25rem); line-height: 1.08; max-width: none; }
	.cs-intro__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-s2); }
	.cs-intro__facts dt { font-size: var(--ds-fs-base); letter-spacing: -0.01em; text-transform: none; color: var(--light-ink); }
	.cs-intro__facts dd { font-size: var(--ds-fs-base); color: var(--light-muted); }
	.cs-intro__ph { margin-inline: 0; aspect-ratio: 4 / 5; }
	.cs-sec2 { padding-block: var(--ds-s6); }
	.pj-case .cs-sec2__label { font-size: var(--ds-fs-sm); color: var(--light-muted); }
}

/* Siguiente caso: la foto sube desde abajo y se abre hasta llenar la pantalla
   mientras avanza la línea (--p de 0 a 1, case.js). */
.cs-next__sticky { grid-template-rows: auto 1fr; }
.pj-case .cs-next__link { position: relative; display: block; overflow: hidden; }
.cs-next__marquee { position: relative; z-index: 2; opacity: calc(1 - var(--p, 0) * 1.4); }
.cs-next__img { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: 0;
	transform: translate3d(0, calc((1 - var(--p, 0)) * 38vh), 0);
	clip-path: inset(0 calc((1 - var(--p, 0)) * var(--gutter)) 0 calc((1 - var(--p, 0)) * var(--gutter)));
	will-change: transform, clip-path; z-index: 1; }
.cs-next__img img { transform: scale(calc(1.12 - var(--p, 0) * 0.12)); transition: none; }
@media (prefers-reduced-motion: reduce) { .cs-next__img { position: static; transform: none; clip-path: none; aspect-ratio: 16 / 9; } .cs-next__marquee { opacity: 1; } }

/* Resumen del cliente bajo el titular (como publicación). */
.pj-case .cs-intro__lead { max-width: 40ch; font-size: var(--ds-fs-lead); line-height: 1.45; letter-spacing: -0.01em; color: var(--light-ink); }
@media (max-width: 719px) {
	.pj-case .cs-intro__lead { margin-top: calc(-1 * var(--ds-s3)); font-size: clamp(1.25rem, 5.4vw, 1.5rem); line-height: 1.4; }
	.cs-intro__text { gap: var(--ds-s6); }
	.cs-intro__facts { margin-top: var(--ds-s6); }
}

/* =========================================================================
   Final del caso (v2): la portada del siguiente llega a pantalla completa y
   se encoge hasta su lugar en la cabecera del siguiente (misma maqueta que
   .cs-stage), con el título y los datos apareciendo; al terminar, entra.
   case.js mueve .cs-next__fig (escritorio) y pinta --t (texto) y la línea.
   ========================================================================= */
.cs-next, body.has-footer-reveal .site-main .cs-next { position: relative; height: 260vh; background: var(--light-bg); color: var(--light-ink); }
.cs-next__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.cs-next__sticky > .container.cs-next__intro { width: 100%; padding-block: 5rem 0; }
.cs-next__text { opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 28px), 0); }
.pj-case .cs-next__text .cs-intro__title { color: var(--light-ink); }
.cs-next__fig { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; z-index: 3; background: #1A1D1B; will-change: transform, width, height; }
.cs-next__fig img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
/* Rótulo y línea de avance: abajo a la izquierda, legibles sobre la foto. */
.cs-next__head { position: absolute; left: 0; right: 0; bottom: var(--ds-s5); z-index: 4; display: flex; justify-content: flex-start; align-items: center; gap: var(--ds-s4); padding-block: 0; pointer-events: none; opacity: var(--e, 1); }
.pj-case .cs-next__kicker { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.cs-next__bar, .cs-next__bar span { height: 2px; }
.cs-next__bar { background: rgba(255, 255, 255, .35); width: min(26vw, 18rem); }
.cs-next__bar span { background: #fff; }
/* Tarjeta «Siguiente proyecto» (miniatura, nombre y flecha). */
.cs-next__card { position: absolute; right: var(--gutter); bottom: var(--ds-s5); z-index: 5; display: flex; align-items: center; gap: var(--ds-s3); padding: var(--ds-s2); padding-right: var(--ds-s4); background: var(--light-bg); color: var(--light-ink); text-decoration: none; border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); transition: transform .4s cubic-bezier(.22, 1, .36, 1); opacity: calc(1 - var(--t, 0)); }
.cs-next__card:hover { transform: translateY(-3px); }
.cs-next__card:focus-visible { outline: 2px solid var(--light-ink); outline-offset: 3px; }
.cs-next__thumb { display: block; width: 64px; height: 64px; overflow: hidden; flex: none; background: var(--light-line); }
.cs-next__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-next__meta { display: grid; gap: 2px; }
.cs-next__name { font-size: var(--ds-fs-base); font-weight: 600; letter-spacing: -0.01em; }
.cs-next__label { font-size: var(--ds-fs-sm); color: var(--light-muted); }
.cs-next__arrow { margin-left: var(--ds-s2); font-size: 1.125rem; transition: transform .3s; }
.cs-next__card:hover .cs-next__arrow { transform: translateX(4px); }
/* Móvil: la foto cubre la pantalla y la línea avanza; la tarjeta abajo, a lo ancho. */
@media (max-width: 899px) {
	.cs-next, body.has-footer-reveal .site-main .cs-next { height: 200vh; }
	.cs-next__intro { display: none; }
	.cs-next__head { bottom: calc(var(--ds-s5) + 88px); }
	.cs-next__card { left: var(--gutter); right: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
	.cs-next, body.has-footer-reveal .site-main .cs-next { height: auto; }
	.cs-next__sticky { position: relative; height: 70vh; }
	.cs-next__intro, .cs-next__head { display: none; }
}