/* ===========================================================================
   Paracas: la ficha de un sistema — el carril pegajoso

   Se encola sola en single-sistema.php y va después de components.css, así que
   puede afinar sin pelearse por especificidad.

   ESTO ERA LA MITAD DE sistemas.css, cuando los cuatro sistemas se pintaban
   seguidos dentro de una página. Ahora cada uno tiene la suya y el índice de la
   sección no carga ni una línea de esto.

   La referencia es el tríptico impreso, página 3, convertido a imagen en
   ~/Documentos/PARACAS/PPT-PNG/Tríptico de Sistema de pintado Paracas/
   triptico-03.png. Conviene tenerlo al lado al tocar esto.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   El ancho

   1050 px, más corto que el contenedor global de 1200. Venía de la página larga
   y sigue valiendo por lo mismo: con el ancho completo, las celdas de los pasos
   se quedan con medio metro de aire dentro.

   Y LO LLEVA UN SOLO MANDO porque no es solo la ficha: «Otros sistemas» va
   debajo y usaba el contenedor global, así que arrancaba 75 px más a la
   izquierda y terminaba 75 más a la derecha que todo lo que tenía encima. Dos
   valores sueltos se habrían desincronizado al primer retoque.
   ------------------------------------------------------------------------ */
:where(.paracas-sistema-ficha, .paracas-sistema-otros) {
  --ficha-ancho: 1050px;
}

.paracas-sistema-ficha {
  display: grid;
  row-gap: var(--space-7);
  inline-size: 100%;
  max-inline-size: var(--ficha-ancho);
  padding-block: var(--space-7) var(--space-8);
}

.paracas-sistema-otros {
  max-inline-size: var(--ficha-ancho);
}

/* TRES COLUMNAS PORQUE SIEMPRE SON TRES CARDS. La rejilla de la card vertical
   pasa a cuatro desde 1200, y aquí eso dejaba la cuarta columna vacía —un hueco
   a la derecha que se lee como un bloque descuadrado— y estrechaba cada card a
   231 px, donde «Kit DD poliuretano» y «Acabado color» se parten a mitad de
   palabra. En tres columnas de 1050 la card tiene 330 y el nombre entra entero.

   Dos clases: la regla que hay que ganar es (0,1,0) y está dentro de una media
   query, así que un empate lo rompería el orden de carga. */
.paracas-sistema-otros .paracas-rejilla--sistemas {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .paracas-sistema-otros .paracas-rejilla--sistemas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .paracas-sistema-otros .paracas-rejilla--sistemas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   DÓNDE SE PEGA LO PEGAJOSO

   El mando del carril, que es lo único que se queda quieto en esta página. En
   0, salvo que WordPress esté pintando su barra de administración encima —46 px
   en móvil, 32 desde 783—, que es fija y taparía la cabecera del sistema.

   VIVÍA EN .paracas-sistemas-vista, el envoltorio de la página larga, y al
   retirarla se quedó sin definir. El sticky del carril lo usa dentro de un
   calc(), y un calc() con una variable que no existe no es un error: la
   declaración entera se descarta y `inset-block-start` cae a `auto`. Un sticky
   sin inset no se pega a nada y no dice nada en consola. Medido: el carril
   bajaba los 900 px del scroll, exactamente como el fallo que este bloque
   arregló la primera vez.
   ------------------------------------------------------------------------ */
.paracas-sistema-ficha {
  --pegado: 0px;
}

.admin-bar .paracas-sistema-ficha {
  --pegado: 46px;
}

@media (min-width: 783px) {
  .admin-bar .paracas-sistema-ficha {
    --pegado: 32px;
  }
}

.paracas-sistema-ficha__pie {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   El sistema
   ------------------------------------------------------------------------ */
.paracas-sistema {
  position: relative;
  overflow: clip;
  padding: var(--space-8) var(--space-7);
  background: var(--color-fondo-suave);
  border-radius: var(--radio-12);
}

.paracas-sistema--con-fondo {
  background: var(--color-fondo);
}

.paracas-sistema + .paracas-sistema {
  margin-block-start: var(--space-8);
}

/* .paracas-foto NO TIENE ALTO PROPIO: quien la usa se lo da. Sin esto la imagen
   se dibuja a su tamaño natural y revienta la maqueta sin un solo error en
   consola, que es la trampa que este proyecto ya pagó cuatro veces.

   Y va DESATURADA: las cuatro fotografías de fondo son cálidas, y al 10 % de
   opacidad teñían de naranja el bloque entero. Con el gris encima aporta
   textura sin sumar un plano de color más. */
.paracas-sistema__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  opacity: 0.09;
  filter: grayscale(0.55);
}

.paracas-sistema__carril,
.paracas-pasos--sistema,
.paracas-sistema .paracas-aviso {
  position: relative;
  z-index: var(--z-contenido);
}

/* ---------------------------------------------------------------------------
   El carril: la columna que se queda quieta

   EL CARRIL ES EL QUE SE PEGA, y para eso ocupa TODAS las filas de la rejilla
   con `align-self: start`. Así su celda es tan alta como la columna de pasos
   —que es por donde hay que viajar— mientras que él mide lo que mide su
   contenido. Medido antes de esto: la cabecera bajaba los 700 px del scroll,
   clavada, porque su celda medía exactamente lo que ella.
   ------------------------------------------------------------------------ */
@media (min-width: 901px) {
  .paracas-sistema {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
  }

  .paracas-sistema__carril {
    position: sticky;
    /* La cabecera del sitio no es pegajosa: no hay nada de lo que apartarse. */
    inset-block-start: calc(var(--pegado) + var(--space-4));
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    /* Un pegajoso MÁS ALTO QUE LA VENTANA deja de pegarse. Con scroll propio
       no, y esto ya nos pasó con el rail del catálogo. */
    max-block-size: calc(100vh - var(--pegado) - var(--space-7));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Con `overflow-y: auto` el eje horizontal también se vuelve scrollable, así
       que una palabra larga no se corta: abre una barra. Medido: «Acabado
       transparente» a 30 px pedía 256 en una columna de 240. */
    overflow-wrap: anywhere;
  }

  .paracas-sistema__cabecera {
    margin-block-end: 0;
  }

  .paracas-pasos--sistema,
  .paracas-sistema .paracas-aviso {
    grid-column: 2;
  }
}

/* El carril ancho arranca a 1440 y no a 1200: entre medias comparte el ancho
   con el mapa de la página, y a 320 px la columna de texto del paso se queda en
   176 y los titulares se parten en cuatro líneas. */
@media (min-width: 1440px) {
  .paracas-sistema {
    gap: var(--space-8);
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

/* El retrato encabeza el carril. Baja de 220 a 150: cuanto MÁS BAJO es el
   carril, antes llega su borde superior al tope de la ventana y antes se
   ancla. Era la queja: «el stick empieza muy tarde». */
.paracas-sistema__retrato {
  block-size: 150px;
  margin-block-end: var(--space-4);
  border-radius: var(--radio-12);
}

/* En un carril de 320 px, los 40 px del titular llegan justo al borde con
   «TRANSPARENTE». Se baja un escalón, y otro más mientras el carril mide 240. */
/* EL TITULAR DEL CARRIL SE ESTILA POR SU SITIO, NO POR SU NIVEL. En la ficha
   es un <h1> —es el título de la página— y en la lista era un <h3>; el tamaño
   que necesita es el mismo, porque lo manda el ancho del carril y no la
   jerarquía del documento. Con el tamaño de h1 heredado, «ACABADO TRANSPARENTE»
   se partía a mitad de palabra en una columna de 190 px. */
.paracas-sistema__cabecera :is(h1, h2, h3) {
  font-size: var(--t-h2);
}

@media (min-width: 901px) and (max-width: 1439px) {
  .paracas-sistema__cabecera :is(h1, h2, h3) {
    font-size: var(--t-h3);
  }
}

/* La descripción, a tres líneas. Ocupaba 120 px del carril y es lo primero que
   sobra cuando lo que hace falta es que la columna se ancle pronto: el detalle
   está en cada paso, aquí basta la promesa. */
.paracas-sistema__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--t-small);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* LA PÍLDORA DE USO VUELVE A RELLENARSE, y es la misma decisión de antes leída
   al revés: pasó a contorno porque rellena del tono era el quinto plano naranja
   de la pantalla —y el único siempre a la vista, por vivir dentro del carril
   pegajoso—. Sin tono no hay quinto plano naranja, y el contorno se quedaba en
   un anillo de #eaf4fb sobre fondo claro: medido, invisible.

   Mismo par que la píldora del índice y que los chips: 5,54 de contraste para
   un texto de 11 px. */
.paracas-sistema-ficha .paracas-sistema__uso {
  margin-block-end: var(--space-2);
  background: var(--paracas-surface-alt);
  box-shadow: none;
  color: var(--color-enlace);
}

/* ---------------------------------------------------------------------------
   El índice del carril

   Cada paso trae guardada una etiqueta corta —Lijar, Preservante, Tinte…— que
   hasta ahora no la leía nadie en esta página. Es lo que hace que valga la pena
   tener una columna clavada: deja de ser un cartel y pasa a ser el mapa del
   sistema.

   El marcado del paso activo lo pone assets/js/sistemas.js. Sin JavaScript
   —o con movimiento reducido— esto se queda como una lista de anclas, que
   sigue siendo útil.
   ------------------------------------------------------------------------ */
.paracas-indice {
  display: grid;
  gap: 2px;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-block-start: 1px solid var(--color-borde);
  list-style: none;
  counter-reset: none;
}

.paracas-indice__enlace {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  padding: 6px var(--space-2);
  border-radius: var(--radio-12);
  color: var(--color-texto);
  font-size: var(--t-small);
  text-decoration: none;
  transition: background var(--duracion) var(--curva);
}

.paracas-indice__n {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--color-borde-fuerte);
  font-size: var(--t-micro);
  font-weight: 800;
}

.paracas-indice__rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paracas-indice__enlace:hover,
.paracas-indice__enlace:focus-visible {
  background: var(--color-fondo-card);
}

/* EL PASO QUE SE ESTÁ LEYENDO. Se rellena solo aquí: es un punto de 24 px, no
   un plano.

   AZUL HONDO Y NO AZUL DE MARCA, con el número delante: el ordinal mide 0,6875
   rem —texto pequeño, que pide 4,5— y blanco sobre #0082ca da 4,16. Sobre
   #0a2e45 da 14,1. El azul de marca es el que se usa en el resto del sitio para
   superficies grandes, donde la regla de contraste es otra.

   Antes lo llenaba el tono de madera de la categoría. Al dejar de emitirse, el
   respaldo era `--paracas-surface-alt`, que sobre una fila ya clara no marcaba
   nada: el paso activo se habría quedado sin señal, y no de una forma visible
   sino en un estado que solo aparece al desplazar. */
.paracas-indice__enlace[aria-current='step'] {
  background: var(--color-fondo-card);
  font-weight: 800;
}

.paracas-indice__enlace[aria-current='step'] .paracas-indice__n {
  background: var(--paracas-azul-hondo);
  color: var(--color-texto-invertido);
}

/* ---------------------------------------------------------------------------
   Los pasos, uno debajo de otro
   ------------------------------------------------------------------------ */
.paracas-pasos--sistema {
  display: grid;
  gap: var(--space-5);
  /* La regla base de .paracas-pasos manda cinco columnas, que aquí no
     significan nada. */
  grid-template-columns: 1fr;
  counter-reset: paso;
}

/* EL ORDINAL. El contador vivía en components.css atado a los nombres de las
   maquetas viejas —bento, columnas, filas—; al renombrar la lista se quedó sin
   incrementar y todos los pasos decían «0». */
.paracas-pasos--sistema .paracas-paso {
  counter-increment: paso;
}

.paracas-pasos--sistema .paracas-paso__n::before {
  content: counter(paso);
}

.paracas-pasos--sistema .paracas-paso {
  position: relative;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: var(--space-5);
  background: var(--color-fondo);
  border-radius: var(--radio-12);
  box-shadow: var(--sombra);
  scroll-margin-block-start: var(--space-8);
}

@media (min-width: 901px) {
  .paracas-pasos--sistema .paracas-paso {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (min-width: 1440px) {
  .paracas-pasos--sistema .paracas-paso {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

/* EL RECUADRO DEL PASO, A UN 14 % DEL TONO.

   Era el tono a pelo: 300 × 260 px de durazno por paso, dos a la vista a la
   vez. Los tonos de madera están declarados en tokens.css como ACENTO, con la
   advertencia escrita al lado —«nunca fondos de sección completos»—, y aquí
   eran justamente eso. Mezclados sobre blanco el sistema se sigue reconociendo
   y el contraste de lo que va encima sube, no baja.

   Y `min-block-size`, no `block-size`: si el contenido pide más, crece, en vez
   de derramarse por fuera. */
.paracas-paso__caja {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 260px;
  padding: var(--space-4);
  /* El velo era un 14 % del tono de madera sobre blanco: un durazno muy claro
     de 260 px de alto, la superficie cálida más grande de la ficha. En azul, un
     14 % de #eaf4fb sobre blanco no se distingue del papel, así que el recuadro
     se queda con el azul lavado entero, que es el material del resto. */
  background: var(--paracas-surface-alt);
  border-radius: var(--radio-12);
}

/* EL ORDINAL, ANILLO Y NO DISCO. Llevaba el tono de madera; ahora el anillo es
   el azul de marca, que sobre el disco blanco lo separa del recuadro de detrás.
   No es texto sobre color: el número va en tinta sobre blanco. */
.paracas-pasos--sistema .paracas-paso__n {
  position: absolute;
  inset-block-start: calc(var(--space-4) * -1);
  inset-inline-start: calc(var(--space-4) * -1);
  z-index: var(--z-contenido);
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  background: var(--color-fondo);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px var(--paracas-azul),
    var(--sombra);
  color: var(--color-texto);
  font-size: var(--t-h3);
  font-weight: 800;
}

/* ---------------------------------------------------------------------------
   Los envases del paso

   LA IMAGEN CORTADA ERA UN DESBORDAMIENTO, no un recorte. `.paracas-paso__
   productos` es un flex con `wrap`, y dos envases de 210 px más su hueco piden
   432 px en un recuadro de 300: el segundo envolvía a una segunda fila y su
   borde inferior acababa 222 px POR DEBAJO del recuadro, donde lo cortaba el
   `overflow: clip` de la sección.

   Se corrige por dónde nace: un paso con más de un producto ocupa el ancho
   entero de la columna y reparte el sitio entre sus envases. Así los dos caben
   dentro y ninguno encoge hasta ser una miniatura, que era el otro extremo.
   ------------------------------------------------------------------------ */
.paracas-paso__productos {
  display: grid;
  gap: var(--space-3);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  inline-size: 100%;
}

.paracas-pasos--sistema .paracas-paso__envase {
  inline-size: 100%;
  max-inline-size: 210px;
}

.paracas-paso__producto {
  justify-self: center;
  inline-size: 100%;
  max-inline-size: 210px;
}

.paracas-pasos--sistema .paracas-paso__marca {
  color: var(--color-texto);
  font-size: var(--t-small);
  font-weight: 800;
  text-align: center;
}

@media (min-width: 901px) {
  /* El paso de dos productos, a lo ancho de la columna. */
  .paracas-pasos--sistema .paracas-paso--duo {
    grid-template-columns: minmax(0, 1fr);
  }

  .paracas-paso--duo .paracas-paso__caja {
    min-block-size: 0;
    padding: var(--space-6);
  }
}

/* ---------------------------------------------------------------------------
   El texto del paso
   ------------------------------------------------------------------------ */
.paracas-paso__texto {
  display: grid;
  gap: var(--space-3);
}

/* El <h4> no lo alcanza el reset, que solo llega a h1..h3. */
.paracas-pasos--sistema .paracas-paso__nombre {
  font-size: var(--t-h3);
  font-weight: var(--peso-titular);
  line-height: var(--leading-titular);
  text-wrap: balance;
}

.paracas-paso__dilucion {
  border-block-start-color: var(--color-borde);
}

/* ---------------------------------------------------------------------------
   Reflow
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  /* El carril deja de ser carril: la cabecera se pone arriba y los pasos se
     apilan. Un `sticky` en una columna de ancho completo no pega nada, solo
     confunde. */
  .paracas-sistema__retrato { block-size: 180px; }
  .paracas-paso__caja { min-block-size: 220px; }

  /* Fuera del carril, el índice es la misma lista que viene justo debajo, dos
     veces seguidas y 245 px más de página. Se retira: aquí no hay ninguna
     columna quieta a la que le haga falta un mapa. */
  .paracas-indice { display: none; }
}

@media (max-width: 640px) {
  .paracas-sistema {
    padding: var(--space-6) var(--space-4);
  }

  .paracas-pasos--sistema .paracas-paso {
    padding: var(--space-4);
  }

  .paracas-pasos--sistema .paracas-paso__nombre { font-size: 1.125rem; }
}