/* JCastorena · página de Casos · v2 · 2026-10-31
   Estilos propios de la página de Casos. Usa los tokens y componentes del sistema; no define
   colores ni tipografías nuevas. Desde la revisión de UX del 2026-10-31, cada caso es una sección con
   la misma cabeza y el mismo cuerpo, y la portada trae el índice de los casos. */

/* ── Portada de la página: solo texto ─────────────────────────────────────────── */
.portada-pagina--texto h1 { max-width: 18ch; }
.portada-pagina--texto .jc-entradilla { max-width: 42rem; }
.portada-pagina--texto .bloque__nota { margin-top: var(--jc-espacio-5); }

/* ── Ficha de un caso ───────────────────────────────────────────────────────── */
.pieza__ficha { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-1) var(--jc-espacio-4); margin: var(--jc-espacio-3) 0 0; padding: 0; list-style: none; font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); }
.pieza__ficha li:not(:last-child)::after { content: "·"; margin-left: var(--jc-espacio-4); color: var(--jc-acero); }

/* ── Índice de los casos, en la portada · 2026-10-31 ──────────────────────────────
   Ocupa el lugar de la imagen ilustrativa: a una página de evidencia le sirve más decir qué casos
   trae que una escena genérica. Cada fila lleva a su caso. */
.casos-indice { align-self: center; }
.casos-indice .casos-indice__titulo { margin: 0 0 var(--jc-espacio-3); font-size: var(--jc-t-rotulo); font-weight: var(--jc-peso-medio); letter-spacing: var(--jc-tracking-rotulo); text-transform: uppercase; color: var(--jc-color-texto-secundario); }
.casos-indice ol { list-style: none; margin: 0; padding: 0; border-top: var(--jc-borde) solid var(--jc-color-separador); }
.casos-indice li { border-bottom: var(--jc-borde) solid var(--jc-color-separador); }
.casos-indice a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--jc-espacio-3); row-gap: 2px; padding: var(--jc-espacio-3) var(--jc-espacio-2); color: var(--jc-color-texto); text-decoration: none; border-radius: var(--jc-radio-s); transition: background-color 160ms var(--jc-curva); }
.casos-indice a:hover { background: var(--jc-color-superficie); }
.casos-indice__numero { grid-row: span 2; font-weight: var(--jc-peso-medio); font-variant-numeric: tabular-nums; color: var(--jc-petroleo); }
.casos-indice__nombre { font-weight: var(--jc-peso-medio); }
.casos-indice a:hover .casos-indice__nombre { text-decoration: underline; text-underline-offset: 3px; }
.casos-indice__meta { font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); }

/* ── Cabeza común de cada caso · 2026-10-31 ──────────────────────────────────────
   Número, área, el proyecto como título, la lección como subtítulo y la ficha: lo primero que se lee
   de cada caso es cuál es. Antes el título era la lección y el proyecto iba en una línea gris. */
.caso-cabeza { max-width: 46rem; margin-bottom: var(--jc-espacio-7); }
.caso-cabeza .caso-cabeza__linea { display: flex; align-items: baseline; gap: var(--jc-espacio-3); margin: 0; max-width: none; }
.caso-cabeza__numero { font-size: var(--jc-t-h3); line-height: 1; font-weight: var(--jc-peso-medio); font-variant-numeric: tabular-nums; color: var(--jc-petroleo); }
.caso-cabeza h2 { margin: var(--jc-espacio-3) 0 0; }
.caso-cabeza .caso-cabeza__leccion { margin: var(--jc-espacio-2) 0 0; font-size: var(--jc-t-grande); color: var(--jc-color-texto-secundario); }
.caso-cabeza .pieza__ficha { margin-top: var(--jc-espacio-4); }
.caso-cabeza .jc-entradilla { margin: var(--jc-espacio-5) 0 0; }

/* ── Cuerpo común: imagen, pasos y esquema · 2026-10-31 ──────────────────────────
   En teléfono, la cabeza va primero y el esquema al final; en escritorio, la imagen y el esquema a la
   izquierda y los pasos a la derecha. Los fondos alternan de un caso al siguiente (jc-superficie). */
.caso-seccion__rejilla { display: grid; gap: var(--jc-espacio-6); grid-template-areas: "cabeza" "foto" "texto" "esquema"; }
.caso-seccion__rejilla > .caso-cabeza { grid-area: cabeza; margin-bottom: 0; }
.caso-seccion__foto { grid-area: foto; margin: 0; }
.caso-seccion__texto { grid-area: texto; }
.caso-seccion__esquema { grid-area: esquema; }
.caso-seccion__ancho { grid-column: 1 / -1; }
.caso-seccion .foto.caso-seccion__foto { background-color: transparent; }
.caso-seccion__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--jc-radio-l); background-color: var(--jc-color-superficie); }
.caso-seccion__foto figcaption { margin-top: var(--jc-espacio-3); font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); }
.jc-superficie .caso__figura { background: var(--jc-color-fondo); }
.caso-largo__momentos { margin-bottom: var(--jc-espacio-6); }
.caso-largo__momentos p { margin: 0; }
@media (min-width: 64rem) {
  .caso-seccion__rejilla { grid-template-columns: 5fr 7fr; column-gap: var(--jc-espacio-8); grid-template-areas: "cabeza cabeza" "foto texto" "esquema texto"; align-items: start; }
}

/* ── Composición sin huecos · 2026-10-31, tarde ──────────────────────────────────
   Luis Enrique: «acomoda mejor las imagenes y el video o el texto para que no se vean espacios vacios».
   Medido a 1440 de ancho: con la foto y el esquema apilados a la izquierda y pocos pasos a la derecha,
   quedaban vacíos de 320 a 630 píxeles. En escritorio, los casos con esquema ponen la imagen y el esquema
   lado a lado, y los pasos debajo, en dos columnas que se equilibran solas; el esquema se estira a la
   altura de la foto. La cementera, con dos fotos, va en tres columnas. Un navegador sin «:has()» conserva
   la composición anterior. En teléfono no cambia nada. */
@media (min-width: 64rem) {
  .caso-seccion__rejilla:has(> .caso-seccion__esquema) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "cabeza cabeza" "foto esquema" "texto texto"; align-items: stretch; row-gap: var(--jc-espacio-7); }
  .caso-seccion__rejilla:has(> .caso-seccion__fotos) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "cabeza cabeza cabeza" "foto foto esquema" "texto texto texto"; }
  .caso-seccion__rejilla:has(> .caso-seccion__esquema) > .caso-cabeza,
  .caso-seccion__rejilla:has(> .caso-seccion__esquema) > .caso-seccion__foto,
  .caso-seccion__rejilla:has(> .caso-seccion__esquema) > .caso-seccion__texto { align-self: start; }
  .caso-seccion__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--jc-espacio-6); }
  .caso-seccion__rejilla:has(> .caso-seccion__esquema) > .caso-seccion__esquema { display: flex; flex-direction: column; justify-content: center; }
  .caso-seccion__rejilla:has(> .caso-seccion__esquema) .caso__pasos { display: block; columns: 2; column-gap: var(--jc-espacio-8); }
  .caso-seccion__rejilla:has(> .caso-seccion__esquema) .caso__pasos > div { break-inside: avoid; padding-bottom: var(--jc-espacio-4); }
  .caso-seccion__rejilla:has(> .caso-seccion__esquema) .caso__pasos dd { max-width: none; }
  /* Sin esquema (vivienda): la foto se estira a la altura de los pasos, recortada al centro, para no dejar vacío
     debajo de ella. Nunca baja de 18rem. */
  .caso-seccion__rejilla:has(> .caso-seccion__foto):not(:has(> .caso-seccion__esquema)) { grid-template-areas: "cabeza cabeza" "foto texto"; }
  .caso-seccion__rejilla:has(> .caso-seccion__foto):not(:has(> .caso-seccion__esquema)) > .caso-seccion__foto { align-self: stretch; display: flex; flex-direction: column; }
  .caso-seccion__rejilla:has(> .caso-seccion__foto):not(:has(> .caso-seccion__esquema)) > .caso-seccion__foto picture { display: block; flex: 1 1 0; min-height: 18rem; }
  .caso-seccion__rejilla:has(> .caso-seccion__foto):not(:has(> .caso-seccion__esquema)) > .caso-seccion__foto img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  /* Con tres pasos, uno por columna: en dos, uno quedaba solo y dejaba media columna vacía. */
  .caso-seccion__rejilla:has(> .caso-seccion__esquema) .caso__pasos:has(> div:nth-child(3):last-child) { columns: 3; column-gap: var(--jc-espacio-7); }
}

/* ── Párrafos justificados · 2026-10-31, tarde ────────────────────────────────────
   Juan Carlos pidió el texto de cada párrafo justificado, «como un documento de Word», también en
   teléfono. Va con división de palabras en español (la página declara lang="es-MX"), para que las
   columnas angostas no abran huecos entre palabras. No se justifican títulos, fichas, el índice ni los
   pies de foto: son de una o dos líneas, y justificados se ven peor. */
.caso__pasos dd, .jc-entradilla, .jc-pasos li, .lista-limpia li, .caso-planta__credito, .bloque__nota, .caso__nota {
  text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
}

/* ── Pasos y esquemas de una decisión ───────────────────────────────────────────── */
.caso__figura { margin: 0; background: var(--jc-color-superficie); border-radius: var(--jc-radio-l); padding: var(--jc-espacio-4); }
.caso__figura svg { display: block; width: 100%; height: auto; }
.caso__figura figcaption { margin-top: var(--jc-espacio-3); display: flex; flex-wrap: wrap; gap: var(--jc-espacio-2) var(--jc-espacio-3); align-items: center; font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); }
.caso__pasos { margin: 0; display: grid; gap: var(--jc-espacio-4); }
.caso__pasos dt { font-size: var(--jc-t-rotulo); font-weight: var(--jc-peso-medio); letter-spacing: var(--jc-tracking-rotulo); text-transform: uppercase; color: var(--jc-petroleo); margin-bottom: var(--jc-espacio-1); }
.caso__pasos dd { margin: 0; max-width: 34rem; }
.caso-seccion .caso__nota { margin: var(--jc-espacio-5) 0 0; font-size: var(--jc-t-chico); }

/* El flujo del esquema entra una vez, al llegar; es el único movimiento de la figura. */
.caso__figura svg [id$="punto-decision"] { transition: opacity 320ms var(--jc-curva) 400ms; }
.caso__figura[data-revelar] svg [id*="-flujo-"] { opacity: 0; transition: opacity 400ms var(--jc-curva) 200ms; }
.caso__figura[data-revelar] svg [id$="punto-decision"] { opacity: 0; }
.caso__figura[data-revelar].is-visible svg [id*="-flujo-"],
.caso__figura[data-revelar].is-visible svg [id$="punto-decision"] { opacity: 1; }
.sin-js .caso__figura[data-revelar] svg [id*="-flujo-"],
.sin-js .caso__figura[data-revelar] svg [id$="punto-decision"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .caso__figura[data-revelar] svg [id*="-flujo-"], .caso__figura[data-revelar] svg [id$="punto-decision"] { opacity: 1; transition: none; }
}

/* caso-planta:inicio */
/* ── Caso de la planta piloto · 2026-10-31 ─────────────────────────────────────
   Fotografías de evidencia del archivo de Juan Carlos: sin etiqueta «Imagen ilustrativa» y sin
   texto encima. La fecha va en el pie de cada una. */
.caso-planta__principal { margin: 0; }
/* El video y las cuatro etapas comparten fila en escritorio (2026-10-31, tarde): con el pie al lado del
   video quedaban 470 píxeles vacíos sobre él. */
.caso-planta__portada { display: grid; gap: var(--jc-espacio-6); margin-bottom: var(--jc-espacio-7); }
.caso-planta__portada .caso-planta__etapas { margin: 0; }
/* Video de YouTube con portada propia (2026-10-31). El video es 4:3; el marco también, para que el reproductor
   no le agregue franjas a los lados. Sin JavaScript, la portada es un enlace a YouTube. */
.caso-planta__youtube { display: grid; gap: var(--jc-espacio-3); }
.video-youtube { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--jc-radio-l); background: var(--jc-grafito); }
.video-youtube__portada, .video-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Con selector de dos clases y elemento, para ganarle a «.jc a», que pintaba el texto del botón de petróleo. */
.caso-planta a.video-youtube__portada { display: block; color: var(--jc-blanco); text-decoration: none; }
.video-youtube__portada picture { display: block; height: 100%; }
.video-youtube__portada img { width: 100%; height: 100%; object-fit: cover; }
.video-youtube__boton { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--jc-espacio-2); min-height: 48px; padding: 0 var(--jc-espacio-5); border: var(--jc-borde) solid rgb(248 248 245 / 0.6); border-radius: var(--jc-radio-s); background: rgb(32 39 45 / 0.78); font: var(--jc-peso-medio) var(--jc-t-chico) var(--jc-font); white-space: nowrap; color: var(--jc-blanco); transition: background-color var(--jc-duracion) var(--jc-curva), border-color var(--jc-duracion) var(--jc-curva); }
.video-youtube__boton svg { width: 16px; height: 16px; fill: currentColor; }
.video-youtube__duracion { padding-left: var(--jc-espacio-2); border-left: var(--jc-borde) solid rgb(248 248 245 / 0.4); font-variant-numeric: tabular-nums; }
.video-youtube__portada:hover .video-youtube__boton { background: var(--jc-grafito); border-color: var(--jc-blanco); }
.video-youtube__portada:focus-visible { outline: 3px solid var(--jc-color-foco-sobre-oscuro); outline-offset: -3px; }
/* La cementera lleva dos fotos en la misma columna (2026-10-31): las boquillas y los equipos instalados. */
.caso-seccion__fotos { display: grid; gap: var(--jc-espacio-6); }
.caso-seccion__fotos .foto { margin: 0; background-color: transparent; }
/* El beneficio del calentador solar en vivienda, resaltado (2026-10-31, tarde): borde petróleo y fondo de superficie. */
.caso__pasos > .caso__beneficio { padding: var(--jc-espacio-4) var(--jc-espacio-5); border-left: 3px solid var(--jc-petroleo); border-radius: 0 var(--jc-radio-s) var(--jc-radio-s) 0; background: var(--jc-color-superficie); }
.jc-superficie .caso__pasos > .caso__beneficio { background: var(--jc-color-fondo); }
.caso__beneficio .jc-etiqueta { margin-right: var(--jc-espacio-2); }
/* Imagen de referencia de Resirene: rótulo, aclaración y crédito con licencia en el pie. */
.caso-seccion__referencia figcaption .jc-etiqueta { margin-right: var(--jc-espacio-2); }
.caso-seccion__credito-foto { display: block; margin-top: var(--jc-espacio-1); }
.caso-seccion__credito-foto a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.caso-planta__pie, .caso-planta__etapas figcaption, .caso-planta__video figcaption { margin-top: var(--jc-espacio-3); font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); }
.caso-planta__fecha { white-space: nowrap; }
.caso-planta__etapas { list-style: none; margin: var(--jc-espacio-7) 0; padding: 0; display: grid; gap: var(--jc-espacio-6) var(--jc-espacio-5); }
.caso-planta__etapas img { aspect-ratio: 4 / 3; object-fit: cover; }
.caso-planta__etapas figcaption strong, .caso-planta__video figcaption strong { display: block; margin-bottom: var(--jc-espacio-1); font-size: var(--jc-t-rotulo); font-weight: var(--jc-peso-medio); letter-spacing: var(--jc-tracking-rotulo); text-transform: uppercase; color: var(--jc-petroleo); }
.caso-planta__cuerpo { display: grid; gap: var(--jc-espacio-7); }
/* El fondo de espera va en la imagen, no en la figura: así no pinta el pie. */
.caso-planta .foto { background-color: transparent; }
.caso-planta .caso__pasos .jc-etiqueta { margin-right: var(--jc-espacio-2); }
.caso-planta__videos { display: grid; gap: var(--jc-espacio-6); }
.caso-planta__video { margin: 0; }
.caso-planta__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--jc-radio-l); background: var(--jc-grafito); }
/* Con dos clases, para ganarle a «.jc p» de componentes.css, que le quitaba el margen superior. */
.caso-planta .caso-planta__credito { margin: var(--jc-espacio-7) 0 0; padding-top: var(--jc-espacio-4); border-top: var(--jc-borde) solid var(--jc-color-separador); max-width: 46rem; font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); }
/* Dos columnas desde el teléfono: las cuatro etapas ocupaban cuatro pantallas apiladas. */
.caso-planta__etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jc-espacio-5) var(--jc-espacio-4); }
@media (min-width: 64rem) {
  .caso-planta__etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Mitad y mitad (2026-10-31, tarde): con 5 y 7, los pasos quedaban más altos que los dos videos. */
  .caso-planta__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jc-espacio-8); align-items: start; }
  .caso-planta__portada { grid-template-columns: 7fr 5fr; column-gap: var(--jc-espacio-8); align-items: start; }
  .caso-planta__portada .caso-planta__etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* caso-planta:fin */
/* ── Cómo se leen estos casos ─────────────────────────────────────────────────── */
.criterio .lista-limpia { max-width: 40rem; }