/* ===========================================================================
   Paracas: la sección de sistemas de pintado — índice y categorías

   Se encola en templates/sistemas.php y en los dos niveles del archivo de
   sistema_cat, que comparten cabecera: la barra de madera de una superficie y
   la barra de color de una familia.

   LA FICHA DE UN SISTEMA NO ESTÁ AQUÍ, está en sistema-ficha.css. Eran un solo
   archivo cuando eran una sola página; ahora son dos vistas distintas y 420 de
   las 1016 líneas no las usaba el índice para nada.

   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.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   La rejilla

   No lleva reglas propias: .paracas-rejilla--sistemas y .paracas-sistema-card
   son componentes globales, los mismos que usa la portada. Esto solo le da su
   aire a la sección.
   ------------------------------------------------------------------------ */
/* LA REJILLA QUEDA PEGADA AL ARCO DEL HERO. La separaban los 24 px de padding
   de la tira de categorías, que se retiró; sin ellos la primera card arranca
   contra la curva. El arco se dibuja DENTRO de la banda azul, así que lo que
   falta por fuera es el aire normal entre secciones. */
.paracas-sistemas-lista {
  padding-block: var(--space-8) var(--space-9);
}

/* `> h2` Y NO `h2` A SECAS. Esta regla es para el titular de sección del archivo
   de categoría —«Cómo se aplican»—, que cuelga directo del envoltorio. Desde que
   el índice agrupa, como descendiente alcanzaba también al rótulo de cada
   superficie, y con (0,1,1) le ganaba a la regla propia del rótulo, que es
   (0,1,0): el margen declarado allí no se pintaba nunca. Se leía 16 y salían 20.

   El hijo directo la deja en su sitio sin tocar lo que ya hacía. */
.paracas-sistemas-lista > h2 {
  margin-block-end: var(--space-5);
}

/* ---------------------------------------------------------------------------
   Los grupos: una superficie, sus sistemas

   Cuatro cards seguidas no decían a qué superficie pertenecía cada una, que es
   con lo que llega el visitante: qué uso en un piso. La superficie es el nivel
   que ordena el tríptico impreso.

   Entre grupos va más aire que entre cards —48 contra 16— porque es lo único
   que separa un grupo del siguiente: sin esa diferencia, tres grupos de una
   card se leen como una lista de cuatro cosas sueltas.

   Y 48 arriba contra los 16 que el rótulo deja debajo es lo que lo ata a SUS
   cards y no a las del grupo anterior: tres a uno.
   ------------------------------------------------------------------------ */
.paracas-sistemas-grupo + .paracas-sistemas-grupo {
  margin-block-start: var(--space-9);
}

/* EN AZUL, Y ESO YA DICE QUE ES UN ENLACE.

   Llevaba una flecha al final para decirlo sin subrayar el titular. Con el
   rótulo en el azul de enlace, la flecha pasó a ser un adorno que repetía lo
   mismo —y a 500 px, donde el rótulo cae a dos líneas, había que sujetarla para
   que no flotara entre ellas—. El color lo dice más barato.

   El rótulo entero es el enlace, no una palabra suelta dentro: el objetivo es
   grande y el destino se entiende sin leer nada más. #00669e sobre blanco da
   6,19, de sobra para un titular de 20 px. */
.paracas-sistemas-grupo__titulo {
  margin-block-end: var(--space-4);
  color: var(--color-enlace);
  font-size: var(--t-h3);
}

.paracas-sistemas-grupo__titulo a {
  color: inherit;
  text-decoration: none;
}

/* El subrayado aparece al apuntar, que es donde un enlace tiene que confirmarse.
   Con `text-underline-offset` la línea no toca las descendentes de la versal. */
.paracas-sistemas-grupo__titulo a:hover,
.paracas-sistemas-grupo__titulo a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------------------
   El carril: una fila por sistema, y la fila se abre donde está

   POR QUÉ UNA FILA QUE SE ABRE Y NO UNA CARD QUE ENLAZA. La pregunta con la que
   llega el visitante —«¿qué le pongo a un piso de madera?»— se responde con la
   secuencia de pasos, y la secuencia estaba a un clic y una carga de página de
   distancia. Aquí se compara sin salir: se abre uno, se abre el otro, y las dos
   secuencias quedan alineadas en la misma x porque la fila ocupa el ancho
   entero.

   ES UN <details>, Y ESO NO ES UN DETALLE DE IMPLEMENTACIÓN. Sin JavaScript se
   abre y se cierra igual, el teclado lo maneja sin que nadie escriba un
   `keydown`, y el buscador ve el contenido. El JS solo le pone la altura
   animada y cierra los hermanos.

   LA ARITMÉTICA, A 1440. El contenedor da 1120 px útiles. Cerrada, la foto se
   lleva 140 y al texto le quedan 928: el nombre entra entero y la descripción
   va a su tope. Abierta, la foto sube a 280 y la tira de pasos tiene 800 px,
   donde las cinco etapas más largas miden 724 y caben en una sola línea. Eso es
   lo que se venía a ganar.
   ------------------------------------------------------------------------ */

/* El ancho de la fotografía vive AQUÍ y no en la regla de la foto, porque lo
   leen tres sitios: la foto, la sangría de la cabecera y la del cuerpo. Un solo
   número que cambiar. */
.paracas-carril {
  position: relative;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-l);
  background: var(--color-fondo);
  overflow: clip;

  --carril-foto: 140px;
}

.paracas-carril + .paracas-carril {
  margin-block-start: var(--space-3);
}

/* La fila abierta se adelanta: pueden quedar varias abiertas —el JS solo cierra
   las de su grupo— y sin esto no se distingue cuál se está mirando. */
.paracas-carril[open] {
  border-color: var(--paracas-azul);
  box-shadow: var(--sombra-alta);

  --carril-foto: 280px;
}

/* AL CERRAR, EL ANCHO TIENE QUE EMPEZAR A BAJAR YA. El atributo `open` no se
   quita hasta que termina la animación de altura —hace falta abierto para poder
   medirlo—, así que si el ancho colgara solo de `[open]` la foto se quedaría
   ancha durante toda la animación y se estrecharía de golpe al final. El JS
   marca la fila mientras se cierra y las dos cosas van juntas.

   (0,3,0) contra (0,2,0): gana por especificidad, no por orden de carga. */
.paracas-carril[open][data-cerrando] {
  --carril-foto: 140px;
}

/* ---------------------------------------------------------------------------
   La fotografía, que es la pieza del encargo

   FUERA DEL FLUJO Y PEGADA A LOS DOS BORDES DEL BLOQUE. De ahí sale sola la
   única cosa que se pidió: con `inset-block: 0` la foto mide SIEMPRE el alto de
   la ficha, así que cerrada mide lo que la cabecera y abierta crece hasta el
   fondo sin que nadie calcule nada ni el JS toque un píxel. Lo único que se
   anima es el ancho.

   Y es además la forma segura: una <img> con `block-size: 100%` dentro de un
   envoltorio de alto indefinido resuelve a `auto` y se dibuja a tamaño natural,
   en silencio. Aquí el alto está definido por los dos insets.

   (0,2,0) para ganarle a `.paracas-foto`, que la declara `position: relative`.
   ------------------------------------------------------------------------ */
.paracas-carril .paracas-carril__foto {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--carril-foto);
  transition: inline-size 320ms var(--curva);
}

/* La sangría de las dos partes sale del mismo número que el ancho de la foto,
   así que el texto no se le puede meter debajo por mucho que crezca. Se
   transita igual que ella: son el mismo movimiento visto desde los dos lados.

   Un cambio de variable dispara la transición de la propiedad que la usa; la
   variable en sí no hace falta registrarla. */
.paracas-carril__cabeza,
.paracas-carril__cuerpo {
  padding-inline-start: calc(var(--carril-foto) + var(--space-5));
  transition: padding-inline-start 320ms var(--curva);
}

/* Sin fotografía no hay sangría que valga: la fila arranca en el borde. El
   selector mira si la cabecera tiene foto dentro, que es donde está. */
.paracas-carril:not(:has(.paracas-carril__foto)) {
  --carril-foto: 0px;
}

.paracas-carril:not(:has(.paracas-carril__foto)) .paracas-carril__cabeza,
.paracas-carril:not(:has(.paracas-carril__foto)) .paracas-carril__cuerpo {
  padding-inline-start: var(--space-5);
}

/* ---------------------------------------------------------------------------
   La cabecera
   ------------------------------------------------------------------------ */

/* `min-block-size` y no un alto fijo: 96 px es el suelo que le da a la foto
   cerrada una caja de 140 × 96 —3:2 largo—, pero un nombre que caiga a dos
   líneas tiene que poder empujarla. */
.paracas-carril__cabeza {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  min-block-size: 96px;
  padding-block: var(--space-4);
  padding-inline-end: var(--space-5);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--duracion) var(--curva),
              padding-inline-start 320ms var(--curva);
}

/* El triángulo que Safari pinta por su cuenta. */
.paracas-carril__cabeza::-webkit-details-marker { display: none; }

/* EL ANILLO DE FOCO LO PINTA LA FILA, NO LA CABECERA, y esto no es un capricho
   de estilo: el de base.css es un box-shadow de 5 px POR FUERA del elemento, y
   la cabecera vive dentro de una fila con `overflow: clip`. Ahí el anillo se
   recorta contra el borde de la fila y quien navegue con el teclado no ve
   dónde está. La fila no se recorta a sí misma, así que se lo pone ella.

   Los dos selectores son (0,2,0) y (0,3,0): ganan por especificidad al
   `:where(…)` de base.css, que aporta cero, y al `[open]` de aquí arriba. */
.paracas-carril__cabeza:focus-visible {
  box-shadow: none;
}

.paracas-carril:has(.paracas-carril__cabeza:focus-visible) {
  box-shadow: 0 0 0 3px var(--color-fondo), 0 0 0 5px var(--color-foco);
}

.paracas-carril__cabeza:hover {
  background: var(--paracas-surface);
}

.paracas-carril__texto {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.paracas-carril__nombre {
  font-size: var(--t-h3);
  font-weight: 700;
}

/* Una línea y no dos: la fila cerrada es un índice, y la descripción entera
   está a un clic. Cortar por `line-clamp` no da ningún error, así que queda
   dicho aquí. */
.paracas-carril__desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  color: var(--color-texto);
  font-size: var(--t-small);
}

/* El uso —«interiores», «exterior e interior»— como antetítulo y sin caja: de
   insignia se veía como un adorno de plantilla. */
.paracas-carril__uso {
  flex: none;
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* El signo gira media vuelta al abrir, el mismo gesto que el de las preguntas
   frecuentes. 32 px de caja visible dentro de una cabecera de 96: el objetivo
   táctil es la fila entera, no el círculo. */
.paracas-carril__signo {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  background: var(--paracas-surface-alt);
  border-radius: 50%;
  color: var(--color-enlace);
  transition: rotate var(--duracion) var(--curva),
              background-color var(--duracion) var(--curva);
}

.paracas-carril[open] .paracas-carril__signo {
  rotate: 135deg;
  background: var(--paracas-azul);
  color: var(--color-texto-invertido);
}

.paracas-carril[open][data-cerrando] .paracas-carril__signo {
  rotate: 0deg;
  background: var(--paracas-surface-alt);
  color: var(--color-enlace);
}

/* ---------------------------------------------------------------------------
   El cuerpo: la secuencia de pasos
   ------------------------------------------------------------------------ */

/* El JS anima el alto de este elemento, y para medirlo hace falta que su alto
   sea el del contenido y nada más: por eso el cuerpo es un <div> propio y no el
   contenido suelto del <details>.

   `overflow: hidden` porque durante la animación el alto vale menos que el
   contenido, y sin él los pasos se saldrían por debajo de la fila. */
.paracas-carril__cuerpo {
  overflow: hidden;
  padding-block-end: var(--space-5);
  padding-inline-end: var(--space-5);
}

.paracas-carril__pasos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: var(--space-5) 0 0;
  border-block-start: 1px solid var(--color-borde);
  list-style: none;
}

/* LOS PASOS ENTRAN EN CASCADA, y el retardo sale de --paso-orden, que escribe
   la plantilla. Es una animación de entrada, así que con movimiento reducido
   `base.css` la apaga entera y los pasos aparecen ya puestos: lo que se mueve
   informa del orden, pero el ordinal lo dice igual. */
@keyframes paracas-carril-entra {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

.paracas-carril[open] .paracas-carril__paso {
  animation: paracas-carril-entra 0.42s var(--curva) backwards;
  animation-delay: calc(var(--paso-orden, 0) * 60ms);
}

.paracas-carril__paso {
  position: relative;
  inline-size: 132px;
  text-align: center;
  font-size: var(--t-micro);
  font-weight: 700;
}

/* `.paracas-media` iguala los envases POR ALTO y saca la imagen del flujo: es
   la caja que el tema ya usa para los packshots, y los objetos de paso son
   exactamente eso. */
.paracas-carril__caja {
  display: block;
  block-size: 104px;
  margin-block-end: var(--space-3);
  background: var(--paracas-surface-alt);
  border-radius: var(--radio-12);
}

.paracas-carril__n {
  display: inline-grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  margin-inline-end: var(--space-2);
  background: var(--paracas-azul-hondo);
  border-radius: 50%;
  color: var(--color-texto-invertido);
  font-size: 0.6875rem;
  vertical-align: -0.35em;
}

/* ---------------------------------------------------------------------------
   Los anchos

   AQUÍ EL PROBLEMA NO ES QUE ALGO NO QUEPA, ES LA PROPORCIÓN DE LA FOTO. La
   fotografía mide el alto de la fila, así que todo lo que crezca la fila la
   estira a ella. Con la tira de pasos envolviendo, a 768 las cinco etapas caían
   en tres líneas: 655 px de fila y una foto de 220 × 653, una tira vertical de
   1:3 donde no se reconoce la habitación. Medido.

   Así que por debajo de 1100 la tira NO ENVUELVE, se desplaza de lado. La fila
   se queda en una línea de pasos a cualquier ancho —343 px— y la foto conserva
   una proporción que se puede mirar. Se pierde ver las cinco etapas a la vez, y
   es un intercambio consciente: el ordinal dice cuántas hay y el dedo llega al
   resto.
   ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .paracas-carril[open] {
    --carril-foto: 220px;
  }

  /* `padding-block-end` para la barra de desplazamiento, que en un trackpad no
     ocupa sitio pero con ratón sí y se comería el pie de los rótulos. */
  .paracas-carril__pasos {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: var(--space-2);
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  /* 116 Y NO 132, Y EL NÚMERO SALE DE QUE ASOME EL SIGUIENTE. A 768 la tira
     tiene 428 px: con 132 entraban tres justos —428 exactos, medido— y la
     tercera quedaba a ras del borde, así que la tira parecía terminada ahí. Con
     116 entran tres y asoman 32 px de la cuarta, que es lo que dice que hay
     más. */
  .paracas-carril__paso {
    flex: none;
    inline-size: 116px;
    scroll-snap-align: start;
  }

  /* La tira recibe foco cuando de verdad se desplaza —se lo pone carril.js— y
     su anillo, por dentro: el de base.css va por fuera y lo recortaría el
     `overflow` del cuerpo. Un `outline` con desplazamiento negativo se dibuja
     dentro y se ve entero. */
  .paracas-carril__pasos:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--color-foco);
    outline-offset: -2px;
  }
}

/* A 640 LA CABECERA SE REORDENA. El uso —«interiores», «exterior e interior»—
   iba en línea con el nombre, y ahí le quitaba 180 px de los 250 que hay: el
   nombre caía a dos líneas y la fila crecía por un antetítulo. Sube encima, que
   es donde va un antetítulo, y el nombre recupera la línea.

   Se reordena en la rejilla y no en el marcado porque los dos son texto dentro
   del mismo <summary>: no hay orden de foco que alterar. */
@media (max-width: 640px) {
  .paracas-carril {
    --carril-foto: 96px;
  }

  .paracas-carril[open] {
    --carril-foto: 150px;
  }

  .paracas-carril[open][data-cerrando] {
    --carril-foto: 96px;
  }

  .paracas-carril__cabeza {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--space-3);
    align-items: center;
    min-block-size: 84px;
    padding-inline-end: var(--space-3);
  }

  .paracas-carril__cabeza,
  .paracas-carril__cuerpo {
    padding-inline-start: calc(var(--carril-foto) + var(--space-3));
  }

  .paracas-carril__uso {
    grid-row: 1;
    justify-self: start;
  }

  .paracas-carril__texto {
    grid-row: 2;
  }

  /* El signo, a la derecha y a caballo de las dos filas: es una sola acción,
     no una por línea. */
  .paracas-carril__signo {
    grid-row: 1 / -1;
    grid-column: 2;
  }

  .paracas-carril__nombre {
    font-size: 1.0625rem;
  }

  /* La descripción se va, no se encoge: en 250 px de ancho son treinta
     caracteres, que no describen nada, y la fila entera lleva a leerla. */
  .paracas-carril__desc {
    display: none;
  }

  .paracas-carril__pasos {
    gap: var(--space-3);
  }

  .paracas-carril__caja {
    block-size: 84px;
  }

  /* El botón a 14 px: a 16 pedía 300 px de línea y tenía 278, así que partía
     «Ver el sistema / completo» y dejaba la flecha colgando de la segunda. */
  .paracas-carril__cuerpo .paracas-btn {
    font-size: var(--t-small);
  }
}

/* ---------------------------------------------------------------------------
   El banner de superficie

   ESTE BLOQUE SE PERDIÓ Y HAY QUE SABER CÓMO, porque el modo de perderlo es
   más peligroso que el fallo: al reescribir el bloque del mapa se cortó desde
   su comentario hasta el de la familia, y esta sección vivía entre los dos. El
   marcado siguió emitiendo las clases, así que no falló nada en consola: el
   <span> de la foto dejó de ser capa absoluta, entró en el flujo, y su <img>
   con `block-size: 100%` sobre un envoltorio sin alto resolvió a `auto`. La
   tabla a tamaño natural y el rótulo debajo. Es la trampa de block-size de la guía del proyecto, la
   quinta vez.

   LA MADERA VA DENTRO DE LA LETRA. La banda conserva su fotografía pero muy
   lavada, y el rótulo se rellena con esa misma tabla a plena intensidad: la
   letra es un recorte nítido sobre su propio fondo desvaído.
   ------------------------------------------------------------------------ */
.paracas-superficie .paracas-familia {
  scroll-margin-block-start: var(--space-6);
}

.paracas-superficie__barra {
  position: relative;
  display: grid;
  place-items: center;
  overflow: clip;
  min-block-size: 96px;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radio-l);
  color: var(--sup-trazo, var(--color-texto));
  font-size: var(--t-h2);
  text-align: center;
}

/* CON FOTOGRAFÍA: el banner. Sangra sobre la canaleta para llegar a los dos
   bordes del bloque —no más allá: 100vw incluye la barra de scroll y provoca
   scroll horizontal—, así separa una superficie de la siguiente sin ser una
   sección más.

   El color es TINTA y no blanco: la banda ahora es clara. Y es además el color
   de reserva del rótulo si el navegador no sabe recortar el fondo a la letra.

   Las dos perillas de contraste viven aquí para poder moverlas en un sitio:
   cuánto se aclara la banda y cuánto se oscurece la letra. */
.paracas-superficie__barra--foto {
  /* NI 84 NI 88: MEDIDOS. Con el velo al 86 % y el tope en #616161, el peor par
     de píxeles de las tres tablas da 6,22 / 5,65 / 5,09. Aflojar el tope a
     #6b6b6b deja la peor —tabla-pisos— en 4,24, por debajo del mínimo. */
  --sup-velo: 86%;
  --sup-letra: #616161;

  min-block-size: 320px;
  margin-inline: calc(var(--canaleta) * -1);
  padding: var(--space-9) var(--space-8);
  border-radius: 0;
  color: var(--paracas-ink);
  font-size: var(--t-h2-medio);
}

/* Con el mapa al lado, el banner DEJA DE SANGRAR: si lo hiciera se metería bajo
   la columna del índice. Llena su columna, con esquinas.

   Y va aquí, detrás de la regla que anula, no junto al resto del mapa: las dos
   tienen la misma especificidad y la de la sangría es posterior en el archivo,
   así que desde arriba no ganaba —medido: el banner seguía midiendo 1160 en una
   columna de 1080—. */
/* LA CAPA DE LA FOTOGRAFÍA. `position: absolute` no es decoración: es lo único
   que impide que la imagen se dibuje a su tamaño natural. */
.paracas-superficie__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: 0;
}

/* Desaturada antes del velo: el blanco encima baja el contraste pero no quita
   el color, y una tabla naranja al 16 % sigue siendo naranja. */
.paracas-superficie__barra--foto .paracas-superficie__foto img {
  filter: saturate(0.3);
}

/* EL VELO, QUE AHORA ES BLANCO.

   Antes oscurecía, porque el rótulo era blanco encima de la foto. Ahora hace lo
   contrario: aclara la banda hasta que la letra de madera se despega de ella.

   El contraste se mide en el PEOR PAR DE PÍXELES —el más claro del relleno de
   la letra contra el más oscuro de la banda—, nunca sobre promedios: el
   promedio miente en cuanto la madera tiene una veta clara. */
.paracas-superficie__barra--foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgb(255 255 255 / var(--sup-velo));
}

/* Sin fotografía, la veta de color de siempre. Vaciar el campo retira la
   imagen, no rompe el bloque. */
.paracas-superficie__veta {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
}

/* Con la clase y no con `> span`: ese selector es MÁS específico que
   .paracas-superficie__veta y le estaba imponiendo `position: relative` a la
   veta, que por eso salía de 0 px de alto y no pintaba nada. */
.paracas-superficie__rotulo {
  position: relative;
  z-index: var(--z-contenido);
}

.paracas-superficie__barra--foto .paracas-superficie__rotulo {
  max-inline-size: 22ch;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   LA MADERA DENTRO DE LA LETRA

   `@supports` ES EL PRIMERO DEL TEMA y se lo ha ganado. `background-clip: text`
   exige `color: transparent`, y en un navegador que no lo soporte eso no es una
   degradación: es TEXTO INVISIBLE. La norma del proyecto es que el estado por
   defecto sea el legible, así que el color transparente solo entra donde el
   recorte funciona; fuera de aquí queda la tinta que pone `--foto`.

   Y el relleno no es la madera a secas. Va MULTIPLICADA por un gris, no
   mezclada con un marrón opaco: multiplicar conserva la proporción entre las
   partes claras y oscuras de la veta —o sea, la textura sigue leyéndose—
   mientras que mezclar la aplana hacia un color plano. La razón de oscurecerla
   es que `tabla-pisos.png` tiene su píxel más claro en #fbf5ed, y sin tope esa
   letra queda casi blanca sobre una banda casi blanca.

   Ojo: es `background-blend-mode`, que mezcla capas DENTRO del elemento. No es
   `mix-blend-mode`, que este tema prohíbe por escrito y con razón.
   ------------------------------------------------------------------------ */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .paracas-superficie__barra--foto .paracas-superficie__rotulo {
    background-image: linear-gradient(var(--sup-letra), var(--sup-letra)), var(--sup-madera, none);
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------------------------------------------------------------------------
   La familia
   ------------------------------------------------------------------------ */
/* LA BARRA DE FAMILIA YA NO CUELGA DE UNA SUPERFICIE. Vivía dentro del
   <section> de su superficie en la página larga y se afinaba por descendencia;
   ahora es el <h1> de su propia página. Sin quitar el ancestro, esta regla
   habría dejado de aplicar sin dar el menor aviso: el titular se vería, solo
   que un punto más grande de lo que debe. */
.paracas-familia__barra {
  font-size: var(--t-h3);
}

/* ---------------------------------------------------------------------------
   Reflow
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .paracas-superficie__barra {
    min-block-size: 72px;
    font-size: var(--t-h3);
  }

  .paracas-superficie__barra--foto {
    min-block-size: 220px;
    padding: var(--space-7) var(--space-5);
    font-size: var(--t-h2);
  }
}