/* JCastorena · maquetas de la fase B · v2 · 2026-09-25
   v2 (misma noche): el contenido de la portada conserva el medianil del contenedor; el control de
   video respeta hidden; el panel de la pieza abre debajo del lienzo en escritorio (no tapa ningún
   punto) y se desplaza si no cabe; en teléfono la figura fija crece con el panel abierto.
   CSS de página sobre tokens.css y componentes.css del design system. Solo roles y tokens; ningún
   color ni fuente fuera del sistema. Cortes: 30rem, 48rem, 64rem, 80rem. Todo se construye primero
   para 360 px y crece. Movimiento: registro de interfaz (120 a 200 ms) y registro narrativo
   (revelados de 240 a 400 ms, escalonado de 40 ms, 16 a 24 px), una sola curva, sin rebote; con
   «reducir movimiento», todo queda fijo. */

html { background: var(--jc-color-fondo); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-width: 320px; overflow-x: hidden; }
img, video, svg { max-width: 100%; }
.contenedor { width: 100%; max-width: var(--jc-contenedor); margin: 0 auto; padding: 0 var(--jc-medianil); }
.contenedor--texto { max-width: var(--jc-contenedor-texto); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Franja de maqueta: solo para la revisión, no es parte del sitio */
.maqueta-franja { background: var(--jc-cobre-tenue); color: var(--jc-grafito); font-size: var(--jc-t-rotulo); line-height: 1.45; padding: var(--jc-espacio-2) 0; position: relative; z-index: calc(var(--jc-z-cabecera) + 1); }
.maqueta-franja .contenedor { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-2) var(--jc-espacio-4); align-items: center; justify-content: space-between; }
.maqueta-franja p { margin: 0; max-width: none; }
.maqueta-franja button { font: inherit; background: transparent; border: var(--jc-borde) solid var(--jc-grafito); border-radius: var(--jc-radio-s); padding: 2px 8px; color: var(--jc-grafito); cursor: pointer; min-height: 28px; }
.maqueta-hueco { background: var(--jc-cobre-tenue); border-bottom: 1px dashed var(--jc-cobre); padding: 0 2px; }

/* Salto al contenido */
.saltar { position: absolute; left: var(--jc-medianil); top: -100px; z-index: calc(var(--jc-z-cabecera) + 2); background: var(--jc-grafito); color: var(--jc-blanco); padding: var(--jc-espacio-3) var(--jc-espacio-4); border-radius: var(--jc-radio-s); text-decoration: none; }
.saltar:focus { top: var(--jc-espacio-3); }

/* ── Cabecera ────────────────────────────────────────────────────────────────── */
.cabecera { position: sticky; top: 0; z-index: var(--jc-z-cabecera); background: var(--jc-color-fondo); border-bottom: var(--jc-borde) solid var(--jc-color-separador); transition: background-color var(--jc-duracion) var(--jc-curva), border-color var(--jc-duracion) var(--jc-curva); }
.cabecera .jc-cabecera { border-bottom: 0; min-height: 64px; height: 64px; padding: 0 var(--jc-medianil); }
.cabecera__logo img { display: block; width: 180px; height: auto; }
.cabecera__logo .cabecera__logo-blanco { display: none; }
.cabecera__nav { display: none; align-items: center; gap: var(--jc-espacio-5); }
.cabecera__nav a { color: var(--jc-grafito); text-decoration: none; font-size: var(--jc-t-chico); font-weight: var(--jc-peso-medio); padding: var(--jc-espacio-2) 0; }
.cabecera__nav a:hover { color: var(--jc-petroleo); text-decoration: underline; text-underline-offset: 0.3em; }
.cabecera__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--jc-cobre); }
.cabecera__nav .jc-boton { min-height: 44px; padding: 0 var(--jc-espacio-4); font-size: var(--jc-t-chico); }
.cabecera__menu { display: inline-flex; min-height: 48px; min-width: 48px; align-items: center; justify-content: center; padding: 0 var(--jc-espacio-4); border: var(--jc-borde) solid var(--jc-color-borde-control); border-radius: var(--jc-radio-s); background: transparent; color: var(--jc-grafito); font: var(--jc-peso-medio) var(--jc-t-chico) var(--jc-font); cursor: pointer; }
@media (min-width: 64rem) {
  .cabecera__logo img { width: 220px; }
  .cabecera__nav { display: flex; }
  .cabecera__menu { display: none; }
  .cabecera__cta-movil { display: none; }
}
/* 2026-10-23: en teléfono el contacto queda a la vista en la cabecera, porque la portada ya no repite
   el botón y la navegación vive dentro del menú. En escritorio lo cubre el botón de la navegación. */
.cabecera__cta-movil { margin-left: auto; min-height: 44px; padding: 0 var(--jc-espacio-3); font-size: var(--jc-t-chico); white-space: nowrap; }
@media (max-width: 63.98rem) { .cabecera .jc-cabecera { gap: var(--jc-espacio-3); } }
@media (max-width: 25rem) { .cabecera__logo img { width: 148px; } }
/* Sobre el video de la portada: transparente y en blanco hasta que se baja (la portada sube 64 px por debajo) */
.cabecera--sobre-video:not(.is-desplazada) { background: transparent; border-color: transparent; }
.cabecera--sobre-video + .menu-movil + main > .portada-video { margin-top: -64px; }
.cabecera--sobre-video:not(.is-desplazada) .cabecera__logo .cabecera__logo-color { display: none; }
.cabecera--sobre-video:not(.is-desplazada) .cabecera__logo .cabecera__logo-blanco { display: block; }
/* 2026-10-23: solo los enlaces de texto van en blanco; el botón cobre conserva su texto grafito. Antes salía
   blanco sobre cobre, 2.83:1, el par que el design system prohíbe */
.cabecera--sobre-video:not(.is-desplazada) .cabecera__nav a:not(.jc-boton) { color: var(--jc-blanco); }
.cabecera--sobre-video:not(.is-desplazada) .cabecera__nav a:not(.jc-boton):hover { color: var(--jc-blanco); }
.cabecera--sobre-video:not(.is-desplazada) .cabecera__menu { color: var(--jc-blanco); border-color: rgb(248 248 245 / 0.6); }
.cabecera--sobre-video:not(.is-desplazada) :focus-visible { outline-color: var(--jc-color-foco-sobre-oscuro); }
/* Menú móvil a pantalla completa */
.menu-movil { display: none; position: fixed; inset: 0; z-index: var(--jc-z-menu); background: var(--jc-color-fondo); padding: var(--jc-espacio-6) var(--jc-medianil); }
.menu-movil.is-abierto { display: grid; align-content: start; gap: var(--jc-espacio-4); }
.menu-movil__cerrar { justify-self: end; }
.menu-movil a { font-size: var(--jc-t-h3); font-weight: var(--jc-peso-medio); color: var(--jc-grafito); text-decoration: none; padding: var(--jc-espacio-3) 0; border-bottom: var(--jc-borde) solid var(--jc-color-separador); }
.menu-movil .jc-boton { margin-top: var(--jc-espacio-4); }

/* ── Portada con video ───────────────────────────────────────────────────────── */
.portada-video { position: relative; min-height: 560px; height: calc(100svh - 0px); max-height: 960px; background: var(--jc-grafito); color: var(--jc-blanco); overflow: hidden; display: grid; align-items: end; }
.portada-video__medio { position: absolute; inset: 0; }
.portada-video__medio video, .portada-video__medio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.portada-video__medio video[hidden] { display: none; }
/* Degradado que deja limpia la zona del texto; en escritorio, hacia la derecha; en teléfono, desde arriba */
/* 2026-10-23: en el teléfono el texto queda entre el 30 y el 80 % del alto; ahí el velo era de 0.12 a 0.55 y la
   entradilla medía 1.88:1 sobre el vapor del cartel. Ahora el velo es parejo en esa franja. */
.portada-video__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(32 39 45 / 0.6) 0%, rgb(32 39 45 / 0.74) 28%, rgb(32 39 45 / 0.8) 72%, rgb(32 39 45 / 0.62) 100%); }
.portada-video__contenido { position: relative; padding-block: calc(64px + var(--jc-espacio-8)) var(--jc-espacio-8); display: grid; gap: var(--jc-espacio-6); align-self: center; }
/* En caja normal a propósito: son 75 caracteres y en teléfono ocupan dos líneas; las mayúsculas se reservan a rótulos cortos */
/* 2026-10-23: en blanco; en el gris claro medía 3.76:1 en el cuadro más claro del video */
.portada-video__rotulo { display: block; font-size: var(--jc-t-chico); font-weight: var(--jc-peso-medio); color: var(--jc-blanco); margin: 0 0 var(--jc-espacio-4); }
.portada-video h1 { color: var(--jc-blanco); font-size: var(--jc-t-display); line-height: 1.04; letter-spacing: var(--jc-tracking-display); max-width: 11em; margin-bottom: var(--jc-espacio-5); }
.portada-video .jc-entradilla { color: var(--jc-texto-secundario-oscuro); max-width: 30rem; }
.portada-video__acciones { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-3); margin-top: var(--jc-espacio-2); }
.jc .portada-video a.jc-boton--secundario, .portada-video .jc-boton--secundario { color: var(--jc-blanco); border-color: rgb(248 248 245 / 0.7); }
.jc .portada-video a.jc-boton--secundario:hover, .portada-video .jc-boton--secundario:hover { background: rgb(248 248 245 / 0.1); color: var(--jc-blanco); }
.portada-video :focus-visible { outline-color: var(--jc-color-foco-sobre-oscuro); }
.portada-video__controles { position: absolute; right: max(var(--jc-medianil), calc((100% - var(--jc-contenedor)) / 2 + var(--jc-medianil))); bottom: var(--jc-espacio-5); display: flex; gap: var(--jc-espacio-3); }
.control-video { display: inline-flex; align-items: center; gap: var(--jc-espacio-2); min-height: 44px; padding: 0 var(--jc-espacio-4); border: var(--jc-borde) solid rgb(248 248 245 / 0.5); border-radius: var(--jc-radio-s); background: rgb(32 39 45 / 0.55); color: var(--jc-blanco); font: var(--jc-peso-medio) var(--jc-t-chico) var(--jc-font); cursor: pointer; transition: background-color var(--jc-duracion) var(--jc-curva), border-color var(--jc-duracion) var(--jc-curva); }
.control-video[hidden] { display: none; }
.control-video:hover { background: rgb(32 39 45 / 0.8); border-color: var(--jc-blanco); }
.control-video svg { width: 16px; height: 16px; fill: currentColor; }
.portada-video__bajar { position: absolute; left: max(var(--jc-medianil), calc((100% - var(--jc-contenedor)) / 2 + var(--jc-medianil))); bottom: var(--jc-espacio-5); width: 1px; height: 56px; background: rgb(248 248 245 / 0.28); overflow: hidden; }
/* Un tramo claro recorre la línea hacia abajo: indica que la página sigue. Se queda quieto con «reducir movimiento» */
.portada-video__bajar::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 18px; background: var(--jc-blanco); animation: bajar 2.4s var(--jc-curva) infinite; }
@keyframes bajar { 0% { transform: translateY(-18px); } 70%, 100% { transform: translateY(56px); } }
@media (prefers-reduced-motion: reduce) { .portada-video__bajar::after { animation: none; transform: none; } }
.portada-video__ver { display: inline-flex; }
@media (min-width: 64rem) {
  .portada-video { align-items: center; }
  /* 2026-10-23: el titular más grande ocupa más ancho; la zona limpia llega más lejos */
  .portada-video__velo { background: linear-gradient(90deg, rgb(32 39 45 / 0.84) 0%, rgb(32 39 45 / 0.76) 40%, rgb(32 39 45 / 0.3) 64%, rgb(32 39 45 / 0) 82%); }
  .portada-video__contenido { padding-block: calc(64px + var(--jc-espacio-8)) var(--jc-espacio-9); }
  .portada-video__ver { display: none; }
}
/* Sin video: el cartel y el campo laminar quietos */
.portada-video.is-sin-video .portada-video__medio video { display: none; }

/* ── Secciones ───────────────────────────────────────────────────────────────── */
.seccion { padding: var(--jc-espacio-8) 0; }
.seccion__cabeza { margin-bottom: var(--jc-espacio-6); max-width: 46rem; }
.seccion__cabeza .jc-entradilla { margin-bottom: 0; }
@media (min-width: 64rem) { .seccion { padding: var(--jc-espacio-9) 0; } .seccion__cabeza { margin-bottom: var(--jc-espacio-7); } }

/* Situaciones frecuentes. 2026-10-23, auditoría de diseño: eran tres desplegables en columnas angostas
   y dos de las tres respuestas quedaban plegadas; con tres situaciones no hace falta plegar nada. Ahora son
   tres filas abiertas: el síntoma a la izquierda y qué conviene revisar primero a la derecha. */
.situaciones { display: grid; border-bottom: var(--jc-borde) solid var(--jc-color-separador); }
.situacion { display: grid; gap: var(--jc-espacio-3); padding: var(--jc-espacio-5) 0; border-top: var(--jc-borde) solid var(--jc-color-separador); }
.situacion:first-child { border-top-color: var(--jc-acero-oscuro); }
.situacion__sintoma { margin: 0; font-size: var(--jc-t-h3); font-weight: var(--jc-peso-medio); line-height: var(--jc-interlineado-subtitulo); letter-spacing: var(--jc-tracking-titulo); }
.situacion__texto { margin: 0; font-size: var(--jc-t-base); }
.situacion__texto strong { font-weight: var(--jc-peso-semibold); color: var(--jc-petroleo); }
@media (min-width: 64rem) {
  .situacion { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--jc-espacio-8); align-items: baseline; padding: var(--jc-espacio-6) 0; }
}
/* 2026-10-23: el signo de los desplegables es un dibujo, no un carácter: la línea vertical se recoge al abrir */
.preguntas summary::after, .pieza__lectura summary::after { content: ""; flex: none; width: 14px; height: 14px; color: var(--jc-petroleo); background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: background-size var(--jc-duracion) var(--jc-curva); }
.preguntas details[open] summary::after, .pieza__lectura details[open] summary::after { background-size: 100% 1.5px, 1.5px 0; }
.situaciones__cierre { margin-top: var(--jc-espacio-6); }

/* Bloque Juan Carlos con la banda laminar detrás del retrato */
.persona { display: grid; gap: var(--jc-espacio-6); align-items: center; }
@media (min-width: 48rem) { .persona { grid-template-columns: minmax(240px, 5fr) 7fr; gap: var(--jc-espacio-8); } }
.persona__retrato { position: relative; padding: var(--jc-espacio-6) 0; }
.persona__laminar { position: absolute; left: -12%; right: -12%; top: 50%; height: 64%; transform: translateY(-50%); opacity: 0.55; pointer-events: none; }
.persona__laminar img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.persona__retrato > img { position: relative; display: block; width: min(100%, 280px); height: auto; border-radius: var(--jc-radio-l); margin: 0 auto; }
.persona__nombre { margin-bottom: var(--jc-espacio-1); }
.persona__descriptor { margin-bottom: var(--jc-espacio-5); }
.persona__enlaces { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-4) var(--jc-espacio-6); margin-top: var(--jc-espacio-5); }

/* ── La pieza: qué conviene revisar en un sistema de vapor ────────────────────── */
.pieza { position: relative; background: var(--jc-color-superficie); }
.pieza__cabeza { padding: var(--jc-espacio-8) 0 var(--jc-espacio-5); }
.pieza__cabeza .jc-etiqueta { margin-left: var(--jc-espacio-3); vertical-align: middle; }
.pieza__saltar { font-size: var(--jc-t-chico); }
.pieza__cuerpo { display: grid; gap: var(--jc-espacio-6); }
.pieza__figura { position: sticky; top: 64px; z-index: 2; background: var(--jc-color-superficie); padding: var(--jc-espacio-3) 0; }
.pieza__lienzo { position: relative; }
.pieza__lienzo svg { display: block; width: 100%; height: auto; }
/* Abajo a la izquierda: arriba tapaba el rótulo «Generación» del esquema */
.pieza__etiqueta { position: absolute; left: var(--jc-espacio-3); bottom: var(--jc-espacio-3); }
.pieza__momentos { display: grid; gap: var(--jc-espacio-8); padding-bottom: var(--jc-espacio-8); }
.pieza__momento { min-height: 50vh; display: grid; align-content: center; gap: var(--jc-espacio-3); max-width: 34rem; }
.pieza__momento .jc-rotulo { margin-bottom: var(--jc-espacio-1); }
.pieza__momento p { font-size: var(--jc-t-grande); margin: 0; }
.pieza__momento--activo h3 { color: var(--jc-petroleo); }
.pieza__enlaces { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-3); margin-top: var(--jc-espacio-4); }
@media (max-width: 63.98rem) {
  .pieza__figura { max-height: 45svh; overflow: hidden; }
  .pieza__lienzo svg { max-height: calc(45svh - var(--jc-espacio-6)); }
  /* Con un punto abierto, la figura fija crece para mostrar el panel debajo del lienzo; el panel se desplaza si es largo */
  .pieza__figura:has(.pieza__panel.is-abierto) { max-height: none; }
  .pieza__panel { max-height: 50svh; overflow-y: auto; }
}
@media (min-width: 64rem) {
  .pieza__cuerpo { grid-template-columns: 58fr 42fr; gap: var(--jc-espacio-8); align-items: start; }
  .pieza__figura { height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; padding: var(--jc-espacio-5) 0; }
  .pieza__lienzo { flex: 0 0 auto; }
  .pieza__momentos { padding: var(--jc-espacio-6) 0; }
  .pieza__momento { min-height: 80vh; }
}
/* Estados de la ilustración por momento (los grupos vienen del SVG del boceto) */
.pieza__lienzo svg #flujo-vapor, .pieza__lienzo svg #flujo-condensado, .pieza__lienzo svg #perdidas, .pieza__lienzo svg #puntos { opacity: 0; transition: opacity 400ms var(--jc-curva); }
.pieza.is-m2 svg #flujo-vapor, .pieza.is-m2 svg #flujo-condensado, .pieza.is-m2 svg #perdidas,
.pieza.is-m3 svg #flujo-vapor, .pieza.is-m3 svg #flujo-condensado, .pieza.is-m3 svg #perdidas { opacity: 1; }
.pieza.is-m3 svg #puntos { opacity: 0; } /* los puntos son botones HTML encima */
.pieza__lienzo svg #rotulos text { opacity: 0; transition: opacity 320ms var(--jc-curva); }
.pieza.is-m1 svg #rotulos text, .pieza.is-m2 svg #rotulos text, .pieza.is-m3 svg #rotulos text { opacity: 1; }
.pieza.is-m4 .pieza__lienzo svg { opacity: 0.35; transition: opacity 400ms var(--jc-curva); }
/* El trazo se dibuja (JS pone --largo en cada path estructural) */
.pieza__lienzo svg [data-trazo] { stroke-dasharray: var(--largo); stroke-dashoffset: var(--largo); transition: stroke-dashoffset 900ms var(--jc-curva); transition-delay: calc(var(--i, 0) * 40ms); }
.pieza.is-m1 svg [data-trazo], .pieza.is-m2 svg [data-trazo], .pieza.is-m3 svg [data-trazo], .pieza.is-m4 svg [data-trazo], .pieza.is-dibujada svg [data-trazo] { stroke-dashoffset: 0; }
/* Puntos de revisión: botones HTML sobre el SVG */
.pieza__puntos { position: absolute; inset: 0; pointer-events: none; }
.pieza__punto { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; padding: 0; cursor: pointer; pointer-events: auto; display: grid; place-items: center; opacity: 0; transition: opacity 320ms var(--jc-curva); transition-delay: calc(var(--i, 0) * 40ms); }
.pieza__punto span { width: 28px; height: 28px; border-radius: 50%; background: var(--jc-petroleo); color: var(--jc-blanco); font: var(--jc-peso-semibold) 0.875rem/28px var(--jc-font); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px rgb(236 234 228 / 0.9); transition: background-color var(--jc-duracion) var(--jc-curva), transform var(--jc-duracion) var(--jc-curva); }
.pieza__punto:hover span, .pieza__punto[aria-expanded="true"] span { background: var(--jc-grafito); }
.pieza__punto:focus-visible { outline: none; }
.pieza__punto:focus-visible span { outline: var(--jc-borde-foco) solid var(--jc-color-foco); outline-offset: var(--jc-desfase-foco); }
.pieza.is-m3 .pieza__punto { opacity: 1; }
/* Panel del punto */
.pieza__panel { display: none; background: var(--jc-color-fondo); border: var(--jc-borde) solid var(--jc-color-separador); border-top: 2px solid var(--jc-petroleo); border-radius: var(--jc-radio-m); padding: var(--jc-espacio-5); margin-top: var(--jc-espacio-4); }
.pieza__panel.is-abierto { display: block; }
.pieza__panel h4 { margin-bottom: var(--jc-espacio-3); }
.pieza__panel dl { margin: 0; display: grid; gap: var(--jc-espacio-3); }
.pieza__panel 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); }
.pieza__panel dd { margin: 0; font-size: var(--jc-t-chico); line-height: var(--jc-interlineado-chico); }
.pieza__panel__cerrar { margin-top: var(--jc-espacio-4); }
@media (min-width: 64rem) {
  /* El panel abre debajo del lienzo, dentro de la figura fija: no tapa ningún punto; si no cabe en la pantalla, se desplaza */
  .pieza__panel.is-abierto { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
}
/* Sin JavaScript: todo visible y los puntos como desplegables */
.sin-js .pieza__lienzo svg #flujo-vapor, .sin-js .pieza__lienzo svg #flujo-condensado, .sin-js .pieza__lienzo svg #perdidas, .sin-js .pieza__lienzo svg #puntos, .sin-js .pieza__lienzo svg #rotulos text { opacity: 1; }
.sin-js .pieza__lienzo svg [data-trazo] { stroke-dashoffset: 0; }
.sin-js .pieza__figura { position: static; }
.sin-js .pieza__puntos { display: none; }
.pieza__lectura { display: grid; gap: var(--jc-espacio-3); margin-top: var(--jc-espacio-6); }
.pieza__lectura details { border-top: var(--jc-borde) solid var(--jc-color-separador); padding: var(--jc-espacio-3) 0; }
.pieza__lectura summary { cursor: pointer; font-weight: var(--jc-peso-semibold); min-height: 44px; display: flex; align-items: center; }

/* ── Servicios ───────────────────────────────────────────────────────────────── */
.servicios__grupo { margin-bottom: var(--jc-espacio-7); }
.servicios__grupo:last-child { margin-bottom: 0; }
.servicios__grupo > .jc-rotulo { color: var(--jc-texto-secundario); }
.tarjeta-servicio__medio { aspect-ratio: 16 / 9; background: var(--jc-mineral); border-radius: var(--jc-radio-s); overflow: hidden; margin: calc(-1 * var(--jc-espacio-6)) calc(-1 * var(--jc-espacio-6)) var(--jc-espacio-2); display: grid; place-items: center; color: var(--jc-texto-secundario); font-size: var(--jc-t-rotulo); border-bottom: var(--jc-borde) solid var(--jc-color-separador); }
.tarjeta-servicio__medio img, .tarjeta-servicio__medio video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-tarjeta .jc-aviso { font-size: var(--jc-t-rotulo); padding: var(--jc-espacio-3) var(--jc-espacio-4); position: relative; z-index: 1; }

/* ── Método ──────────────────────────────────────────────────────────────────── */
.metodo { position: relative; }
.metodo .jc-pasos li { border-top-color: var(--jc-color-separador); position: relative; }
.metodo .jc-pasos li::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--jc-petroleo); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--jc-curva); transition-delay: calc(var(--i, 0) * 120ms); }
.metodo.is-visible .jc-pasos li::after { transform: scaleX(1); }
.metodo .jc-pasos p { margin: 0; font-size: var(--jc-t-chico); }

/* ── Banda de cierre ─────────────────────────────────────────────────────────── */
.cierre { padding: var(--jc-espacio-8) 0; }
.cierre .jc-h2 { max-width: 30rem; font-size: var(--jc-t-h2-seccion); line-height: 1.15; letter-spacing: var(--jc-tracking-display); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-4); align-items: center; margin: var(--jc-espacio-6) 0 var(--jc-espacio-5); }
.cierre__expectativas { margin: 0; max-width: 40rem; }
.cierre__contacto { margin-top: var(--jc-espacio-4); }
@media (min-width: 64rem) {
  .cierre { padding: var(--jc-espacio-9) 0; }
  /* 2026-10-23: el titular a la izquierda; la acción y los canales a la derecha, alineados abajo */
  /* Filas de 1fr arriba y abajo: la columna derecha queda centrada frente al titular, tenga uno o tres elementos */
  .cierre > .contenedor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--jc-espacio-9); }
  .cierre > .contenedor > .jc-h2 { grid-column: 1; grid-row: 1 / -1; max-width: 36rem; margin: 0; align-self: center; }
  .cierre > .contenedor > :not(.jc-h2) { grid-column: 2; }
  .cierre__acciones { grid-row: 2; margin-top: 0; }
  .cierre__expectativas { grid-row: 3; }
  .cierre__contacto { grid-row: 4; }
}

/* ── Conocimiento (condicional) ──────────────────────────────────────────────── */
.articulos { display: grid; gap: var(--jc-espacio-5); }
@media (min-width: 48rem) { .articulos { grid-template-columns: repeat(3, 1fr); } }

/* ── Pie y cookies ───────────────────────────────────────────────────────────── */
.pie { padding: var(--jc-espacio-8) 0 var(--jc-espacio-6); border-top: var(--jc-borde) solid var(--jc-color-separador); font-size: var(--jc-t-chico); }
.pie__rejilla { display: grid; gap: var(--jc-espacio-6); }
@media (min-width: 48rem) { .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; } }
.pie__marca img { width: 180px; height: auto; display: block; margin-bottom: var(--jc-espacio-3); }
.pie__rotulo { display: block; font-size: var(--jc-t-rotulo); font-weight: var(--jc-peso-medio); letter-spacing: var(--jc-tracking-rotulo); text-transform: uppercase; color: var(--jc-texto-secundario); margin: 0 0 var(--jc-espacio-3); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jc-espacio-2); }
.pie p { max-width: 36rem; }
.pie__legal { margin-top: var(--jc-espacio-7); padding-top: var(--jc-espacio-4); border-top: var(--jc-borde) solid var(--jc-color-separador); color: var(--jc-color-texto-secundario); display: grid; gap: var(--jc-espacio-2); }
.pie__legal p { margin: 0; max-width: none; }
.cookies { position: fixed; left: var(--jc-medianil); right: var(--jc-medianil); bottom: var(--jc-espacio-4); z-index: var(--jc-z-aviso); margin: 0 auto; max-width: var(--jc-contenedor); }
.cookies[hidden] { display: none; }
.cookies .jc-boton { min-height: 44px; }
.cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-3); align-items: center; }
.cookies .jc-boton--secundario { color: var(--jc-blanco); border-color: rgb(248 248 245 / 0.6); }

/* ── Páginas interiores ──────────────────────────────────────────────────────── */
.portada-pagina { padding: var(--jc-espacio-8) 0 var(--jc-espacio-7); border-bottom: var(--jc-borde) solid var(--jc-color-separador); }
.portada-pagina__rejilla { display: grid; gap: var(--jc-espacio-7); align-items: center; }
/* 2026-10-23: el titular de las páginas interiores sube de 48 a 56 px en escritorio */
.portada-pagina h1 { max-width: 20ch; font-size: clamp(2.25rem, 1.761rem + 2.174vw, 3.5rem); line-height: 1.08; letter-spacing: var(--jc-tracking-display); }
.portada-pagina .jc-entradilla { max-width: 36rem; }
.portada-pagina__acciones { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-3); margin-top: var(--jc-espacio-6); }
.portada-pagina__figura { background: var(--jc-color-superficie); border-radius: var(--jc-radio-l); padding: var(--jc-espacio-5); }
.portada-pagina__figura svg { display: block; width: 100%; height: auto; }
@media (min-width: 64rem) { .portada-pagina { padding: var(--jc-espacio-9) 0 var(--jc-espacio-8); } .portada-pagina__rejilla { grid-template-columns: 6fr 6fr; gap: var(--jc-espacio-8); } }
.bloque { padding: var(--jc-espacio-7) 0; border-bottom: var(--jc-borde) solid var(--jc-color-separador); }
.bloque:last-of-type { border-bottom: 0; }
.bloque__rejilla { display: grid; gap: var(--jc-espacio-5); }
@media (min-width: 48rem) { .bloque__rejilla { grid-template-columns: minmax(12rem, 4fr) 8fr; gap: var(--jc-espacio-7); } }
.bloque__rejilla h2 { margin-bottom: 0; }
.bloque__rejilla > div > p:last-child { margin-bottom: 0; }
.proceso { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jc-espacio-3); counter-reset: paso; }
.proceso li { counter-increment: paso; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--jc-espacio-3); padding: var(--jc-espacio-3) 0; border-top: var(--jc-borde) solid var(--jc-color-separador); }
.proceso li::before { content: counter(paso, decimal-leading-zero); font-variant-numeric: tabular-nums; font-weight: var(--jc-peso-medio); color: var(--jc-petroleo); }
.lista-limpia { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jc-espacio-2); }
.lista-limpia li { padding-left: var(--jc-espacio-4); position: relative; }
.lista-limpia li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 1px; background: var(--jc-acero-oscuro); }
.preguntas { display: grid; gap: 0; }
.preguntas details { border-top: var(--jc-borde) solid var(--jc-color-separador); padding: var(--jc-espacio-2) 0; }
.preguntas details:last-child { border-bottom: var(--jc-borde) solid var(--jc-color-separador); }
.preguntas summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--jc-espacio-3); align-items: center; font-weight: var(--jc-peso-semibold); min-height: 48px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas details p { margin: var(--jc-espacio-2) 0 var(--jc-espacio-3); }

/* ── Contacto ────────────────────────────────────────────────────────────────── */
.contacto__rejilla { display: grid; gap: var(--jc-espacio-8); }
@media (min-width: 64rem) { .contacto__rejilla { grid-template-columns: 7fr 5fr; gap: var(--jc-espacio-9); align-items: start; } }
.contacto__lado { display: grid; gap: var(--jc-espacio-6); }
.contacto__lado .jc-h4 { margin-bottom: var(--jc-espacio-2); }
.contacto__lado p { max-width: 30rem; }
.contacto__aviso { position: sticky; top: calc(64px + var(--jc-espacio-4)); }
.jc-form .jc-campo--requerido label::after, .jc-form .jc-campo--requerido legend::after { content: " *"; color: var(--jc-petroleo); }
.jc-form__nota { font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); margin: 0; }
.jc-form__antispam { min-height: 65px; border: 1px dashed var(--jc-color-borde-control); border-radius: var(--jc-radio-s); display: grid; place-items: center; font-size: var(--jc-t-rotulo); color: var(--jc-texto-secundario); background: #FFFFFF; }
.jc-form__acciones { display: grid; gap: var(--jc-espacio-3); }
.jc-form.is-enviado .jc-form__campos { display: none; }
.jc-form__confirmacion { display: none; }
.jc-form.is-enviado .jc-form__confirmacion { display: block; }

/* ── Registro narrativo: revelados ───────────────────────────────────────────── */
[data-revelar] { opacity: 0; transform: translateY(20px); transition: opacity 360ms var(--jc-curva), transform 360ms var(--jc-curva); transition-delay: calc(var(--i, 0) * 40ms); }
[data-revelar].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; transition: none; }
  .pieza__lienzo svg [data-trazo] { stroke-dashoffset: 0 !important; transition: none; }
  .pieza__lienzo svg #flujo-vapor, .pieza__lienzo svg #flujo-condensado, .pieza__lienzo svg #perdidas, .pieza__lienzo svg #rotulos text { transition: none; }
  .metodo .jc-pasos li::after { transition: none; transform: scaleX(1); }
  .pieza__punto { transition: none; }
}
.sin-js [data-revelar] { opacity: 1; transform: none; }

/* ── Auditoría de diseño, 2026-10-23: usabilidad común a todas las páginas ───── */
/* Las anclas no quedan escondidas debajo de la cabecera fija */
[id] { scroll-margin-top: calc(64px + var(--jc-espacio-5)); }
/* Toques sin la espera del doble toque, con una marca discreta en el color de la acción */
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
.jc { -webkit-tap-highlight-color: rgb(49 91 104 / 0.14); }
/* El menú del teléfono no arrastra la página de atrás */
.menu-movil { overscroll-behavior: contain; }
/* Títulos sin palabras huérfanas; párrafos con mejor corte de línea */
.jc h3, .jc h4 { text-wrap: balance; }
.jc p, .jc li, .jc dd { text-wrap: pretty; }
/* Las fotos que tardan en llegar no dejan una caja vacía: el fondo mineral la ocupa mientras */
.foto, .tarjeta-servicio__medio, .persona__retrato > img { background-color: var(--jc-color-superficie); }
/* Lo que dibuja el navegador también lleva la marca: selección, cursor de escritura y casillas */
.jc ::selection { background: var(--jc-petroleo-claro); color: var(--jc-grafito); }
.jc-oscuro ::selection, .portada-video ::selection { background: var(--jc-petroleo); color: var(--jc-blanco); }
.jc input, .jc textarea { caret-color: var(--jc-petroleo); }
.jc { accent-color: var(--jc-petroleo); }