/* JCastorena · maqueta de la fase B · Inicio · v1 · 2026-09-25
   CSS propio de index.html, después de sitio.css. Solo tokens del sistema. Las correcciones de la portada,
   del control de video y del panel de la pieza que nacieron aquí pasaron a sitio.css v2. */

/* Cuadros cuyo único título en los textos base es el rótulo (Situaciones frecuentes): el h2 se ve como rótulo */
.jc h2.jc-rotulo { font-size: var(--jc-t-rotulo); font-weight: var(--jc-peso-medio); line-height: 1.5; letter-spacing: var(--jc-tracking-rotulo); margin: 0 0 var(--jc-espacio-5); }

/* ── La pieza ────────────────────────────────────────────────────────────────── */
/* Línea que separa el bloque de Juan Carlos (mineral) de la pieza (mineral) */
.pieza { border-top: var(--jc-borde) solid var(--jc-color-separador); }
.pieza__cabeza { display: grid; gap: var(--jc-espacio-3); }
.pieza__cabeza .jc-rotulo { margin-bottom: 0; }
.pieza__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jc-espacio-3); }
.pieza__titulo h2 { margin: 0; }
.pieza__cabeza .jc-etiqueta { margin-left: 0; }
.pieza__nota { margin: 0; font-size: var(--jc-t-chico); color: var(--jc-color-texto-secundario); }
.pieza__saltar { justify-self: start; }
@media (min-width: 64rem) {
  .pieza__cabeza { grid-template-columns: 1fr auto; align-items: end; }
  .pieza__cabeza .jc-rotulo, .pieza__nota { grid-column: 1 / -1; }
}
/* Techos para pantallas muy altas (y para la captura de página completa); en un monitor común no cambian nada */
.pieza__momento { min-height: min(50vh, 30rem); }
@media (min-width: 64rem) {
  .pieza__figura { height: min(calc(100vh - 64px), 64rem); }
  .pieza__momento { min-height: min(80vh, 60rem); }
}
/* Sin JavaScript la figura no se fija ni necesita la altura de la pantalla */
.sin-js .pieza__figura { height: auto; }
/* Lectura completa de los seis puntos, debajo de la figura */
.pieza__lectura { grid-column: 1; max-width: 46rem; margin-top: 0; padding-bottom: var(--jc-espacio-8); }
.pieza__lectura dl { margin: 0; display: grid; gap: var(--jc-espacio-3); padding-top: var(--jc-espacio-3); }
.pieza__lectura 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__lectura dd { margin: 0; font-size: var(--jc-t-chico); line-height: var(--jc-interlineado-chico); }
.pieza__lectura summary::-webkit-details-marker { display: none; }
.pieza__lectura summary { list-style: none; justify-content: space-between; gap: var(--jc-espacio-3); }

/* ── Servicios como índice (auditoría de diseño, 2026-10-23) ─────────────────
   Antes eran tarjetas en dos columnas al lado de cada rótulo: con 3, 1 y 2 servicios por grupo
   quedaban huecos y tarjetas solas, y en el teléfono eran cinco pantallas de fotos. Ahora cada servicio
   es un renglón: título, texto, aviso y enlace, con la foto como miniatura. Sin números: los servicios
   no son una secuencia. La retícula queda a la vista, se lee de corrido y el renglón entero sigue siendo
   un solo enlace. */
.servicios__grupo { margin-bottom: var(--jc-espacio-7); }
.servicios__grupo > .jc-rotulo { margin: 0 0 var(--jc-espacio-3); color: var(--jc-texto-secundario); }
.servicios__grupo .jc-tarjetas { display: block; border-top: var(--jc-borde) solid var(--jc-acero-oscuro); }
.servicios__grupo .jc-tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  grid-template-areas: "titulo medio" "texto texto" "aviso aviso" "enlace enlace";
  align-items: start;
  column-gap: var(--jc-espacio-4);
  row-gap: var(--jc-espacio-3);
  padding: var(--jc-espacio-5) 0;
  background: transparent;
  border: 0;
  border-bottom: var(--jc-borde) solid var(--jc-color-separador);
  border-radius: 0;
  transition: background-color var(--jc-duracion) var(--jc-curva), box-shadow var(--jc-duracion) var(--jc-curva);
}
.servicios__grupo .tarjeta-servicio__medio { grid-area: medio; margin: 0; aspect-ratio: 4 / 3; border: 0; border-radius: var(--jc-radio-s); }
.servicios__grupo .jc-tarjeta h3 { grid-area: titulo; align-self: center; transition: color var(--jc-duracion) var(--jc-curva); }
.servicios__grupo .jc-tarjeta > p { grid-area: texto; margin: 0; }
.servicios__grupo .jc-tarjeta > .jc-aviso { grid-area: aviso; margin: 0; max-width: 34rem; }
.servicios__grupo .jc-tarjeta > a { grid-area: enlace; justify-self: start; margin: 0; }
.servicios__grupo .jc-tarjeta:focus-within h3 { color: var(--jc-petroleo); }
/* Los efectos de puntero, solo donde hay ratón: en una pantalla táctil el estado se queda pegado después del toque */
@media (hover: hover) and (pointer: fine) {
  .servicios__grupo .jc-tarjeta:hover h3 { color: var(--jc-petroleo); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 64rem) {
  .servicios__grupo .jc-tarjeta:hover { background: var(--jc-color-superficie); box-shadow: calc(-1 * var(--jc-espacio-4)) 0 0 0 var(--jc-color-superficie), var(--jc-espacio-4) 0 0 0 var(--jc-color-superficie); }
}
@media (min-width: 48rem) {
  .servicios__grupo .jc-tarjeta { grid-template-columns: minmax(0, 1fr) 10rem; }
}
@media (min-width: 64rem) {
  .servicios__grupo .jc-tarjeta {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 13rem;
    grid-template-areas: "titulo texto medio" "titulo aviso medio" "titulo enlace medio";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--jc-espacio-7);
    padding: var(--jc-espacio-6) 0;
  }
  .servicios__grupo .jc-tarjeta h3 { align-self: start; }
  .servicios__grupo .tarjeta-servicio__medio { aspect-ratio: 16 / 10; }
  /* El fondo del renglón activo sale 16 px a cada lado sin mover las líneas ni el texto */
  .servicios__grupo .jc-tarjeta:focus-within { background: var(--jc-color-superficie); box-shadow: calc(-1 * var(--jc-espacio-4)) 0 0 0 var(--jc-color-superficie), var(--jc-espacio-4) 0 0 0 var(--jc-color-superficie); }
}

/* ── Títulos de sección de Inicio en el paso de exhibición ────────────────── */
#servicios-titulo, #metodo-titulo, .pieza__titulo h2 { font-size: var(--jc-t-h2-seccion); line-height: 1.15; letter-spacing: var(--jc-tracking-display); }

/* ── Método: el número manda y el texto se lee al tamaño de la página ─────── */
.metodo .jc-pasos li::before { font-size: var(--jc-t-h3); font-weight: var(--jc-peso-regular); margin-bottom: var(--jc-espacio-3); }
.metodo .jc-pasos strong { font-size: var(--jc-t-h4); font-weight: var(--jc-peso-medio); margin-bottom: var(--jc-espacio-2); }
.metodo .jc-pasos p { font-size: var(--jc-t-base); }

/* ── La pieza: el cuarto momento no deja el dibujo a medias ───────────────── */
/* Antes el momento 4 bajaba el dibujo al 35 % y apagaba los flujos: quedaban trazos sueltos que parecían
   un error. Ahora conserva el circuito completo, más tenue, y el último momento ocupa menos alto para que
   la sección no termine con media pantalla vacía. */
.pieza.is-m4 svg #flujo-vapor, .pieza.is-m4 svg #flujo-condensado { opacity: 1; }
.pieza.is-m4 .pieza__lienzo svg { opacity: 0.5; }
@media (min-width: 64rem) { .pieza__momento:last-child { min-height: min(60vh, 40rem); } }

/* ── Banda de cierre: el hueco sobre grafito se lee en grafito ─────────────── */
.jc-oscuro .maqueta-hueco { color: var(--jc-grafito); }
.cierre__contacto { display: flex; flex-wrap: wrap; gap: var(--jc-espacio-2) var(--jc-espacio-5); align-items: baseline; }

/* ── Presentación después de la portada · 2026-10-23 ──────────────────────────
   Una sola idea, en dos tonos y sin nada más en la pantalla: la primera oración en grafito y la segunda en
   texto secundario (7.38:1 sobre blanco; el acero no se usa para texto). Patrón de ON.energy, EFLA, FAERS y
   ZettaJoule. El texto es el arranque del «Acerca de» de LinkedIn que Juan Carlos aprobó el 2026-10-02. */
.tesis { padding: var(--jc-espacio-8) 0 0; }
.jc .tesis__texto { margin: 0; max-width: 21em; /* unos 42 caracteres por línea; «.jc p» le daba los 68ch del cuerpo, 1387 px a este tamaño */ font-size: clamp(1.5rem, 1.255rem + 1.087vw, 2.125rem); /* 24 → 34 px */ line-height: 1.3; letter-spacing: -0.015em; font-weight: var(--jc-peso-regular); color: var(--jc-color-texto); text-wrap: pretty; }
.jc .tesis__texto span { color: var(--jc-color-texto-secundario); }
@media (min-width: 64rem) { .tesis { padding-top: var(--jc-espacio-10); } .jc .tesis__texto { line-height: 1.25; } }

/* ── Ficha técnica de Juan Carlos · 2026-10-23 ─────────────────────────────────
   Clave y valor, como las fichas de ZettaJoule y SCT Consulting. Sobre mineral, la clave va en petróleo
   (6.18:1) y la regla en acero oscuro, porque la línea decorativa casi no se ve sobre ese fondo. */
.ficha { margin: var(--jc-espacio-6) 0 0; border-bottom: var(--jc-borde) solid var(--jc-acero-oscuro); }
.ficha__fila { display: grid; gap: var(--jc-espacio-1); padding: var(--jc-espacio-4) 0; border-top: var(--jc-borde) solid var(--jc-acero-oscuro); }
.ficha__fila + .ficha__fila { border-top-color: rgb(108 119 127 / 0.35); }
.ficha 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); }
.jc .ficha dd { margin: 0; font-size: var(--jc-t-chico); line-height: var(--jc-interlineado-chico); max-width: 52ch; }
@media (min-width: 40rem) { .ficha__fila { grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--jc-espacio-5); align-items: baseline; } }
/* Con la ficha, la columna de texto es más alta que el retrato: el retrato se queda arriba, junto al nombre */
@media (min-width: 48rem) { #juan-carlos .persona { align-items: start; } }