/* ===========================================================================
   Paracas: componentes

   Los valores salen del canvas «Ondas y Vetas», que no tiene ni una clase ni
   una custom property: todo estaba en style="" inline. Aquí se nombran.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Botones

   El primario es #0082CA con label blanco, que da 4,16 sobre blanco y NO
   cumple AA a cuerpo normal. Cumple como TEXTO GRANDE, y por eso el tamaño y
   el peso están declarados aquí y no son negociables: 1.25rem (20 px) y 700.
   Achicar este botón rompe la accesibilidad de toda la marca.
--------------------------------------------------------------------------- */
.paracas-btn {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  min-block-size: var(--tactil);
  padding-inline: var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radio-pill);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracion) var(--curva),
              color var(--duracion) var(--curva),
              scale var(--duracion) var(--curva);
}

/* El `display: inline-flex` de arriba pisa el `hidden` del navegador: «Usar mi
   ubicación» se veía en HTTP, donde no hay geolocalización, y no hacía nada. */
.paracas-btn[hidden] { display: none; }

.paracas-btn--primario {
  background: var(--paracas-azul);
  color: var(--color-texto-invertido);
}

.paracas-btn--primario:hover {
  background: var(--paracas-azul-texto);
}

/* El hover NO se resuelve con filter: brightness(). Aclara los botones sin
   fondo en vez de resaltarlos, que es justo lo contrario de lo que se busca.
   Y el secundario NO se rellena: el canvas lo oscurece por borde y por texto,
   conservando el fondo blanco. */
.paracas-btn--secundario {
  background: var(--color-fondo);
  border-color: var(--paracas-azul);
  color: var(--color-enlace);
}

.paracas-btn--secundario:hover {
  border-color: var(--paracas-azul-texto);
  color: var(--paracas-azul-hondo);
}

/*
 * WhatsApp. Verde de WhatsApp con TEXTO BLANCO, Y ESO NO LLEGA A AA.
 *
 * El dato, para que quede escrito: blanco sobre #25d366 da 1,98:1 y el mínimo
 * para un botón de este cuerpo es 3:1. Con la tinta de marca daba 8,65:1, y así
 * estuvo hasta que se pidió el blanco a sabiendas del número.
 *
 * ES UNA DECISIÓN TOMADA, NO UN DESCUIDO: no lo «arregles» volviendo a la tinta
 * sin preguntar. Si algún día hay que recuperar el contraste sin perder el
 * blanco, el verde oscuro corporativo de WhatsApp —#128C7E— da 4,14:1 y sigue
 * siendo verde de la marca.
 *
 * Va en su propio modificador y no tiñendo --primario porque ese lo comparten
 * el enlace del mapa, el CTA de las landings y el botón «Buscar» de la
 * cabecera: teñirlo habría puesto verde el buscador del sitio.
 */
.paracas-btn--whatsapp {
  background: var(--paracas-whatsapp);
  color: var(--color-texto-invertido);
}

/* El destello que cruza el botón cada pocos segundos (bucles.js). El <span>
   solo existe si el bucle corre, así que sin JavaScript o con movimiento
   reducido nada de esto se aplica. */
.paracas-btn--whatsapp {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.paracas-btn__brillo {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: -1;
  inline-size: 35%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.32), transparent);
  pointer-events: none;
}

.paracas-btn--whatsapp:hover {
  background: var(--paracas-whatsapp-hover);
}

.paracas-btn--terciario {
  padding-inline: 0;
  border: 0;
  border-block-end: 2px solid var(--paracas-azul);
  border-radius: 0;
  background: none;
  color: var(--color-enlace);
}

.paracas-btn--terciario:hover {
  color: var(--paracas-azul-hondo);
}

.paracas-btn--icono {
  inline-size: var(--tactil);
  min-inline-size: var(--tactil);
  padding-inline: 0;
  border-radius: 50%;
  background: var(--paracas-azul);
  color: var(--color-texto-invertido);
}

.paracas-btn[disabled],
.paracas-btn[aria-disabled='true'] {
  background: var(--color-borde-fuerte);
  color: var(--paracas-disabled);
  pointer-events: none;
}

.paracas-icono {
  inline-size: 1.375em;
  block-size: 1.375em;
  flex: none;
}

/* ---------------------------------------------------------------------------
   Cabecera
--------------------------------------------------------------------------- */
/* Azul HONDO, no azul de marca.
   Blanco sobre #0082CA da 4,16 y AA pide 4,5: es la regla del azul aplicada al
   revés, y aquí el texto va a 13 px. Sobre #0A2E45 da 14,1. No es una salida por
   la tangente: DESIGN-SYSTEM.md §2.3 ya asigna --azul-hondo a «fondos
   profundos, footer, superficies invertidas». */
.paracas-topbar {
  background: var(--paracas-azul-hondo);
  color: var(--color-texto-invertido);
  font-size: var(--t-mini);
  font-weight: 600;
}

.paracas-topbar__interior {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  padding-block: var(--space-2);
}

.paracas-cabecera__interior {
  display: flex;
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-borde);
}

/* NO SE ENCOGE. Es un ítem flex sin protección: con el alto clavado en 56 px,
   cada píxel de ancho que le roba el menú se convierte en achatamiento, porque
   el alto no puede acompañar. Los atributos del <img> llevan las medidas reales
   del archivo (992×435) para que el `aspect-ratio` que deriva el navegador sea
   el del PNG y no uno redondeado. */
.paracas-cabecera__logo {
  flex: 0 0 auto;
}

/* 42 y no 56: el PNG se recortó a su contenido, así que 56 px de caja ya no
   incluyen el aire transparente que antes se llevaba una cuarta parte. Es el
   mismo óvalo en pantalla, con el archivo diciendo la verdad sobre su tamaño. */
.paracas-cabecera__logo img {
  block-size: 42px;
  inline-size: auto;
}

.paracas-nav {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  margin-inline-start: auto;
}

.paracas-nav__lista {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  margin: 0;
}

.paracas-nav__lista > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tactil);
  color: var(--color-texto);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--duracion) var(--curva);
}

/* El subrayado CRECE desde la izquierda. Va en un ::after y no en un `border`
   a propósito: un borde cambiaría el alto de la caja al aparecer, y aquí la
   regla es que ningún hover mueva una medida. */
.paracas-nav__lista > li > a::after {
  position: absolute;
  inset-block-end: 8px;
  inset-inline: 0;
  block-size: 2px;
  background: var(--paracas-azul);
  content: '';
  scale: 0 1;
  transform-origin: left center;
  transition: scale var(--duracion) var(--curva);
}

.paracas-nav__lista > li > a:hover {
  color: var(--color-enlace);
}

.paracas-nav__lista > li > a:hover::after {
  scale: 1 1;
}

/* El ítem activo ya lleva su subrayado: el del hover sobraría encima. */
.paracas-nav__lista .current-menu-item > a,
.paracas-nav__lista .current_page_item > a {
  border-block-end: 2px solid var(--paracas-azul);
  color: var(--color-enlace);
}

.paracas-nav__lista .current-menu-item > a::after,
.paracas-nav__lista .current_page_item > a::after { content: none; }

.paracas-nav__cta {
  padding-inline: var(--space-5);
  font-size: var(--t-small);

  /* Las flechas del megamenú ensancharon la barra y el CTA empezó a partirse
     en dos líneas antes que a encogerse. Es un botón: o cabe entero o se baja
     a la hamburguesa, pero no se parte. */
  white-space: nowrap;
  transition: background-color var(--duracion) var(--curva),
              border-color var(--duracion) var(--curva),
              color var(--duracion) var(--curva),
              translate var(--duracion) var(--curva);
}

/* Se levanta un píxel. `translate` y no `margin`: el hueco que ocupa no cambia. */
.paracas-nav__cta:hover { translate: 0 -1px; }

/* La lupa gira su ícono. La transición ya estaba declarada y sin usar. */
.paracas-cabecera__buscar .paracas-icono {
  transition: rotate var(--duracion) var(--curva);
}

.paracas-cabecera__buscar:hover .paracas-icono { rotate: 90deg; }

/* ---------------------------------------------------------------------------
   El megamenú

   El panel se ancla a .paracas-cabecera, que ya es `position: relative` y crea
   contexto de apilamiento en --z-cabecera. No hace falta subir ningún z-index:
   todo lo que cuelgue de dentro queda por encima del contenido de la página.

   Ojo con el ancho: html y body llevan `overflow-x: clip`, así que el panel
   puede ir a ancho completo del viewport pero NO puede sobresalir por los
   lados. De ahí `inset-inline: 0` y el interior en .paracas-contenedor.
--------------------------------------------------------------------------- */
/*
 * `position: static` es deliberado y hay que dejarlo: el panel se ancla a
 * .paracas-cabecera para ir a ancho completo, y basta con que el <li> NO sea el
 * ancestro posicionado. Ponerle `relative` lo encogería al ancho del ítem.
 *
 * Aquí hubo un `display: flex` para poner el enlace y una flecha en fila. La
 * flecha se retiró —ensuciaba la barra— y con ella el motivo del flex.
 */
.paracas-nav__mega {
  position: static;
}

.paracas-mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--z-contenido);
  border-block-end: 1px solid var(--color-borde);
  background: var(--color-fondo);
  box-shadow: var(--sombra-alta);
}

.paracas-mega__interior {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  padding-block: var(--space-7);
}

.paracas-mega__lista {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.paracas-mega__enlace {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radio-m);
  color: var(--color-texto);
  text-decoration: none;
  transition: background-color var(--duracion) var(--curva);
}

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

.paracas-mega__titulo {
  font-size: var(--t-h3);
  font-weight: var(--peso-titular);
  letter-spacing: var(--tracking-titular);
}

.paracas-mega__sub {
  color: var(--color-texto-suave);
  font-size: var(--t-small);
  font-weight: 700;
}

/* El enlace de salida cierra la lista y se lee como lo que es: la puerta, no
   una superficie más. */
.paracas-mega__item--salida {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-borde);
}

.paracas-mega__item--salida .paracas-mega__titulo {
  color: var(--color-enlace);
  font-size: var(--t-small);
  letter-spacing: normal;
}

.paracas-mega__item--salida .paracas-mega__enlace {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.paracas-mega__item--salida .paracas-icono {
  inline-size: 16px;
  block-size: 16px;
  color: var(--color-enlace);
}

/*
 * LAS FIGURAS SE APILAN. Todas ocupan la misma celda del grid y solo una es
 * opaca; así cambiar de opción no mueve nada ni pide una imagen nueva.
 *
 * La caja tiene ALTURA DEFINIDA y la imagen va con object-fit. No se usa
 * `block-size: 100%` sobre una caja de altura indefinida: eso resuelve a
 * `auto`, la imagen se dibuja a su tamaño natural y revienta la maqueta sin un
 * solo error en consola. Es la trampa que este proyecto tiene documentada.
 */
.paracas-mega__figuras {
  display: grid;

  /*
   * `grid-template-rows: minmax(0, 1fr)` y no solo el block-size.
   *
   * Con la altura a secas la caja medía 260 pero su ÚNICA FILA se dimensionaba
   * por el contenido y crecía a 380: la figura desbordaba y `overflow: clip`
   * la recortaba por abajo, dejando el encuadre partido. El `minmax(0, …)` es
   * lo que le quita a la fila el tamaño mínimo automático del contenido, que
   * es la misma trampa que este proyecto tiene documentada para las imágenes.
   */
  grid-template-rows: minmax(0, 1fr);
  block-size: 260px;
  border-radius: var(--radio-l);
  overflow: clip;
}

.paracas-mega__figura {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity var(--duracion) var(--curva);
}

.paracas-mega__figura.es-activa { opacity: 1; }

.paracas-mega__figura img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.paracas-cabecera__hamburguesa {
  display: none;
  inline-size: var(--tactil);
  block-size: var(--tactil);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.paracas-hamburguesa__barra,
.paracas-hamburguesa__barra::before,
.paracas-hamburguesa__barra::after {
  display: block;
  inline-size: 22px;
  block-size: 2px;
  margin-inline: auto;
  background: currentColor;
  border-radius: 2px;
  content: '';
}

.paracas-hamburguesa__barra::before { transform: translateY(-7px); }
.paracas-hamburguesa__barra::after  { transform: translateY(5px); }

/* ---------------------------------------------------------------------------
   Card de producto

   La caja de imagen es blanca y el cuerpo azul lavado; el arco de 24 px sale
   del cuerpo y muerde la foto. Ese es el sistema: el arco pertenece siempre a
   la superficie de abajo.
--------------------------------------------------------------------------- */
.paracas-card {
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: var(--color-fondo-card);
  border-radius: var(--radio-l);
}

/* El `display: flex` de arriba pisa el `hidden` del navegador, así que el
   filtro de subcategorías escondía cards que seguían viéndose. */
.paracas-card[hidden] { display: none; }

/* ALTURA FIJA, no aspect-ratio.
   Con proporción 1/1 la caja crecía con la columna: medido a 1132 px de ancho
   daba 514 px de alto donde el diseño pide 260. La altura de esta caja no
   depende del ancho de la rejilla — depende de lo alto que sea un envase. */
.paracas-card__art {
  block-size: 260px;
  aspect-ratio: auto;
  background: var(--color-fondo);

  /* 260 − 20 × 2 = 220, que es el alto máximo de envase del canvas. */
  --media-pad: var(--space-5);
}

.paracas-card__cuerpo {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.paracas-card__familia {
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.paracas-card__titulo {
  font-size: var(--t-h3);
}

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

.paracas-card__desc {
  margin: 0;
}

/* Las pastillas van abajo del todo aunque las descripciones midan distinto:
   así las tarjetas de una fila alinean sus atributos. */
.paracas-card__atributos {
  margin-block-start: auto;
}

/* ---------------------------------------------------------------------------
   Las cards de una rejilla comparten filas: SUBGRID

   La etiqueta de categoría ocupa una línea en «BASES» y tres en «MUEBLES Y
   ESTRUCTURAS DE EXTERIOR», así que en la misma fila los títulos arrancaban a
   alturas distintas: medido en el catálogo a 1440, 346 / 346 / 310 px desde
   el borde de la card, y lo mismo en la portada a 1440 y 768.

   Con subgrid cada card ocupa cinco filas de la rejilla —foto, etiqueta,
   título, descripción y atributos— y esas filas las mide la rejilla, no la
   card: la fila de la etiqueta tiene el alto de la más larga, y todos los
   títulos de la fila empiezan a la misma altura.

   El cuerpo pasa de flex a subgrid, así que el aire entre piezas ya no es un
   `gap` —un gap separaría también las filas vacías de una card sin
   descripción— sino el margen de cada pieza. Cada pieza va a su fila con
   nombre: una card sin descripción deja esa fila vacía en vez de subir los
   atributos y descuadrarlos.
--------------------------------------------------------------------------- */
.paracas-rejilla--productos > .paracas-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.paracas-rejilla--productos .paracas-card__cuerpo {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}

.paracas-rejilla--productos .paracas-card__familia { grid-row: 1; align-self: end; }
.paracas-rejilla--productos .paracas-card__titulo { grid-row: 2; margin-block-start: var(--card-aire, var(--space-3)); }
.paracas-rejilla--productos .paracas-card__desc { grid-row: 3; margin-block-start: var(--card-aire, var(--space-3)); }
.paracas-rejilla--productos .paracas-card__atributos { grid-row: 4; align-self: end; margin-block-start: var(--card-aire, var(--space-3)); }

/* ---------------------------------------------------------------------------
   Pastilla de atributo

   Son EXACTAMENTE TRES. Vienen del envase (Brandbook s19) y el benchmark
   confirma que toda la categoría destaca tres. No son lo mismo que la ficha
   técnica, que lleva los datos que tenga en filas de tabla.

   Y NO SE APILAN EN MÓVIL: se angostan. De ahí el flex-wrap: nowrap y el
   min-inline-size: 0 de la etiqueta.
--------------------------------------------------------------------------- */
/* ENVUELVEN. Iban en `nowrap` con `min-inline-size: 0` y sin recorte, así que
   por encima de 640 px el texto se dibujaba FUERA de la pastilla —«Interior y
   exterior» era el caso—. La card deja ~140 px para tres etiquetas que piden
   95-120 cada una, y con el rail del catálogo baja a ~50.

   Esto revisa la regla de TAREAS.md «los tres atributos no se apilan, se
   angostan»: se escribió con la card a 384 px y sin sidebar. Angostarse hasta
   ser ilegible no es angostarse. */
.paracas-atributos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.paracas-atributo {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-block-size: var(--tactil);
  min-inline-size: 0;
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
  background: var(--color-fondo);

  /* UN COMPONENTE QUE PONE SU FONDO PONE SU COLOR.
     Sin esta línea la pastilla heredaba el color del contexto: en la card
     funcionaba —hereda tinta— y en la banda azul del hero heredaba BLANCO, así
     que quedaba blanco sobre blanco. Medido: ratio 1,00. */
  color: var(--color-texto);
  border-radius: var(--radio-pill);
  font-size: var(--t-small);
  font-weight: 700;
}

.paracas-atributo__circulo {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  background: var(--paracas-azul);
  border-radius: 50%;
  color: var(--color-texto-invertido);
}

/* Con `wrap` no debería hacer falta, pero una sola palabra muy larga sigue
   pudiendo desbordar. Última red, en todos los anchos y no solo en móvil. */
.paracas-atributo__texto {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* EN LA CARD, MÁS PEQUEÑAS. Lo pidió Qroma en la revisión del 24 de septiembre:
   a 44 px las tres pastillas pesaban más que el nombre del producto. En la card
   no son un control —son un <span>, no se pulsan—, así que el mínimo táctil no
   les aplica. La ficha y el hero conservan el tamaño grande. */
.paracas-card__atributos .paracas-atributo {
  gap: var(--space-1);
  min-block-size: 28px;
  padding: 2px var(--space-3) 2px 2px;
  font-size: var(--t-micro);
}

.paracas-card__atributos .paracas-atributo__circulo {
  inline-size: 24px;
  block-size: 24px;
}

/* ---------------------------------------------------------------------------
   Chips de filtro. 44 px de alto: el target trabaja con guantes.
--------------------------------------------------------------------------- */
.paracas-chip {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-block-size: var(--tactil);
  padding-inline: var(--space-5);
  border: 2px solid var(--color-borde-fuerte);
  border-radius: var(--radio-pill);
  background: var(--color-fondo);
  color: var(--color-enlace);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.paracas-chip[aria-selected='true'],
.paracas-chip[aria-pressed='true'] {
  border-color: var(--paracas-azul);
  background: var(--paracas-azul);
  color: var(--color-texto-invertido);
}

/* ---------------------------------------------------------------------------
   Migas. Con la URL plana son lo ÚNICO que comunica jerarquía.
--------------------------------------------------------------------------- */
.paracas-migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--t-small);
  font-weight: 600;

  /* El titular va siempre justo debajo, y sin esto quedaban a 0 px: las migas
     parecían la primera línea del h1. Se veía en toda página suelta y en toda
     entrada, no solo aquí. El `gap` de arriba separa los niveles entre sí, que
     es otra cosa. */
  margin-block-end: var(--space-5);
}

.paracas-migas a { color: var(--color-enlace); }
.paracas-migas [aria-current='page'] { color: var(--color-texto); }
.paracas-migas__sep { opacity: 0.5; }

/* ---------------------------------------------------------------------------
   Tabla de datos técnicos
--------------------------------------------------------------------------- */
.paracas-tabla {
  inline-size: 100%;
  overflow: clip;
  border-collapse: collapse;
  background: var(--color-fondo);
  border-radius: var(--radio-l);
  font-size: var(--t-body);
}

.paracas-tabla th,
.paracas-tabla td {
  padding: var(--space-4) var(--space-6);
  border-block-end: 1px solid var(--color-borde);
  text-align: start;
}

.paracas-tabla th {
  inline-size: 36%;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paracas-tabla td { font-weight: 500; }
.paracas-tabla tr:last-child th,
.paracas-tabla tr:last-child td { border-block-end: 0; }

/* ---------------------------------------------------------------------------
   Descargas

   Son PRIMARIAS: por encima de los CTA. Invertirlo convierte una ficha técnica
   en un anuncio. Muestran tipo, peso y formato ANTES del clic.

   El badge PDF va en azul hondo y no en azul de marca: a 11 px, blanco sobre
   #0082CA da 4,16 y no llega ni a texto grande.
--------------------------------------------------------------------------- */
.paracas-descarga {
  display: flex;
  gap: var(--space-3);
  align-items: center;

  /*
   * MÁS DELGADO, por encargo: de 64 px de alto a 44, que es --tactil, el
   * mínimo con el que el tema deja tocar cualquier cosa. Por debajo de ahí no
   * se baja aunque quepa: es un objetivo de dedo, no una fila de tabla.
   * Cuatro descargas ocupaban 256 px de columna y ahora 176.
   *
   * El título baja de 18 a 16 px con el alto. Eso lo saca del umbral de «texto
   * grande» —que está en 18,66— pero da igual AQUÍ: el fondo es azul hondo y
   * el blanco encima da 14,1, así que cumple de sobra por las dos vías. Sobre
   * el azul de MARCA no habría podido bajarse.
   */
  min-block-size: var(--tactil);
  padding: var(--space-2) var(--space-4);
  background: var(--paracas-azul-hondo);
  border-radius: var(--radio-12);
  color: var(--color-texto-invertido);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.paracas-descarga__flecha {
  margin-inline-start: auto;
  flex: none;
}

/* Caja blanca, como el canvas. El texto va en --azul-texto y no en el azul de
   marca: a 11 px, #0082CA sobre blanco da 4,16 e incumple AA. Es la misma
   corrección que UI-KIT.md §7 ya hizo una vez. A la vista es idéntico. */
.paracas-descarga__badge {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  background: var(--color-fondo);
  border-radius: var(--radio-s);
  color: var(--color-enlace);
  font-size: 0.6875rem;
  font-weight: 800;
}

.paracas-descarga__meta {
  display: block;
  font-size: var(--t-mini);
  font-weight: 600;
  opacity: 0.9;
}

/* ---------------------------------------------------------------------------
   Pie
--------------------------------------------------------------------------- */
/* Ídem: el pie llevaba treinta y siete textos por debajo de AA —los diez
   enlaces, los tres títulos de columna, el claim y la barra inferior— porque
   todos eran blanco sobre el azul de marca. */
/* Mismo caso que .paracas-banda, y este se veía en TODAS las vistas: el final
   del contenido tocaba la curva del pie. */
.paracas-pie {
  position: relative;
  margin-block-start: var(--banda-separacion);
  padding-block: var(--space-9) var(--space-7);

  /* --topo-fondo y no `background`: el atajo borraría la imagen del patrón, que
     vive en la capa .paracas-topo__capa. */
  --topo-fondo: var(--paracas-azul-hondo);
  color: var(--color-texto-invertido);
}

.paracas-pie__interior {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 4fr 2fr 2fr 2fr;
}

/* Sin píldora blanca, como el sello del hero: el óvalo del logotipo ya lleva
   su interior blanco. 43 px es el alto que tenía la píldora entera (27 de logo
   y 8 de padding arriba y abajo), para que la marca no encoja en el pie. */
.paracas-pie__pastilla {
  display: inline-grid;
  place-items: center;
}

.paracas-pie__pastilla img {
  block-size: 43px;
  inline-size: auto;
}

.paracas-pie__claim {
  margin-block-start: var(--space-4);
  max-inline-size: 34ch;
}

/* El Libro de Reclamaciones: la imagen es el enlace. 100 px de ancho, como en
   el proyecto hermano; a menos, el texto de la imagen deja de leerse. */
.paracas-pie__libro {
  display: inline-flex;
  margin-block-start: var(--space-5);
  line-height: 0;
  border-radius: var(--radio-s);
}

.paracas-pie__libro:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 4px;
}

.paracas-pie__libro img {
  inline-size: 100px;
  block-size: auto;
}

/* color: inherit y no el del reset. Son <h2>, y :where(h1,h2,h3) les da la
   tinta: sobre el azul hondo del pie eso da 1,22 — texto oscuro sobre fondo
   oscuro. Todo titular dentro de una superficie invertida necesita esta línea. */
.paracas-pie__titulo {
  color: inherit;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-eyebrow);
}

.paracas-pie__lista {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.paracas-pie__lista a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tactil);
  color: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  text-decoration: none;
}

.paracas-pie__barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  font-size: var(--t-mini);
}

/* ---------------------------------------------------------------------------
   El flotante de WhatsApp
--------------------------------------------------------------------------- */
.paracas-flotante {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: var(--z-flotante);
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  background: var(--paracas-whatsapp);
  border-radius: 50%;
  box-shadow: var(--sombra-alta);

  /* Aquí el blanco sí vale: no hay texto, es un icono, y para un glifo el
     umbral es el de componentes gráficos, no el de texto. */
  color: var(--color-texto-invertido);

  transition: background-color var(--duracion) var(--curva),
              scale var(--duracion) var(--curva);
}

.paracas-flotante:hover { background: var(--paracas-whatsapp-hover); scale: 1.06; }
.paracas-flotante:active { scale: 0.96; }

/*
 * LA AUREOLA.
 *
 * El único elemento del sitio que está fijo en pantalla en todas las páginas, y
 * era el único totalmente inerte: ni hover, ni foco propio, ni nada.
 *
 * La aureola es un elemento del brandbook, no un adorno inventado aquí — el
 * propio token --paracas-azul la nombra entre sus usos. Va en un ::before para
 * no tocar la caja del botón, y con `box-shadow` en vez de `width`, que no
 * dispara layout.
 *
 * SEIS SEGUNDOS, Y CINCO DE ELLOS QUIETO. El precedente del tema es el respiro
 * de las fotos: 28 s y un 4 % de recorrido. Un latido es más visible que un
 * zoom lentísimo, así que aquí el listón se respeta por el otro lado: el
 * movimiento ocupa el primer 18 % del ciclo y el resto es pausa. Late, no
 * parpadea.
 *
 * Y va en @keyframes A PROPÓSITO, como el otro bucle: así el
 * `animation: none !important` de base.css lo apaga sin que haya que acordarse.
 */
@keyframes paracas-aureola {
  0%        { box-shadow: 0 0 0 0 rgb(37 211 102 / 45%); }
  18%, 100% { box-shadow: 0 0 0 18px rgb(37 211 102 / 0%); }
}

.paracas-flotante::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: paracas-aureola 6s var(--curva) infinite;
  pointer-events: none;
}

/* Con el ratón encima la aureola sobra: ya hay respuesta directa. */
.paracas-flotante:hover::before { animation: none; }

/* ===========================================================================
   Reflow

   El canvas es de 1280 px fijos y no tiene una sola @media: todo esto se
   escribe de cero. Breakpoints 1200 / 900 / 640, que no están a debate.
   ======================================================================== */

@media (max-width: 900px) {
  /* Hamburguesa por debajo de 900 px (D17). El logo a la izquierda y la lupa
     siempre visible; «¿Eres carpintero?» se mete dentro del menú. */
  .paracas-cabecera__hamburguesa {
    display: block;
    margin-inline-start: auto;
  }

  .paracas-nav {
    display: none;
    order: 10;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
    margin-inline-start: 0;
    padding-block-end: var(--space-4);
  }

  .paracas-nav[data-abierto='true'] { display: flex; }

  .paracas-nav__lista {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  /* El megamenú se vuelve acordeón. El panel deja de flotar y pasa a empujar,
     que aquí es lo natural: el nav ya es una columna que empuja la cabecera
     hacia abajo. */
  .paracas-mega {
    position: static;
    grid-column: 1 / -1;
    border: 0;
    box-shadow: none;
  }

  .paracas-mega__interior {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 0 var(--space-3);
    padding-inline: var(--space-4);
  }

  /* SIN FOTOS. En una columna estrecha cada una añade su alto al scroll, y
     llegar al último enlace acaba costando más que volver atrás. El menú está
     para ir rápido a un sitio. */
  .paracas-mega__figuras { display: none; }

  .paracas-mega__titulo { font-size: var(--t-small); }
  .paracas-mega__enlace { padding-block: var(--space-2); }

  .paracas-cabecera__interior { flex-wrap: wrap; gap: var(--space-4); }

  .paracas-pie__interior { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .paracas-pie__interior { grid-template-columns: 1fr; }

  .paracas-atributo {
    padding-inline-end: var(--space-2);
    font-size: var(--t-micro);
  }

  .paracas-tabla th,
  .paracas-tabla td {
    display: block;
    inline-size: auto;
    padding-inline: var(--space-4);
  }

  .paracas-tabla th { padding-block-end: 0; border-block-end: 0; }
}

/* ===========================================================================
   Hero

   La caja de foto lleva ALTURA EXPLÍCITA. Sin ella la imagen se dibuja a su
   tamaño natural: medido, una foto de 1920 px daba un hero de 755 px donde
   debía dar 480. Es la misma trampa de la card de producto, en grande.
   ======================================================================== */
/* La escala del canvas por rol. El H1 de una landing y el de una ficha no
   miden lo mismo: 60 contra 56. */
.paracas-hero--landing h1 { font-size: var(--t-h1-grande); }
.paracas-ficha h1,
.paracas-cabecera-vista h1 { font-size: var(--t-h1); }

/* Los cuatro sitios donde vive un titular de banda. Los dos ultimos faltaban:
   en la portada el h2 va envuelto —en .paracas-seccion__cabecera cuando lleva
   enlace al lado, en .paracas-duo__caja en los bloques a dos columnas— asi que
   ningun ">" del selector lo alcanzaba y «¿Que vas a pintar?» se pintaba con el
   h2 base mientras «Sistemas de pintado», que no va envuelto, si cogia este
   escalon. Dos titulares del mismo rango a dos tamanos distintos. */
.paracas-seccion > h2,
.paracas-seccion > .paracas-contenedor > h2,
.paracas-seccion__cabecera > h2,
.paracas-duo__caja > h2 { font-size: var(--t-h2-grande); }

.paracas-modulo__titulo { font-size: var(--t-h2-medio); }

.paracas-hero__foto {
  block-size: var(--hero-alto, 480px);
}

/*
 * EL BANNER DE LA PORTADA: LOS ENVASES SE VEN SIEMPRE ENTEROS.
 *
 * Es Banner-Paracas-1, el que eligió el cliente, con un 25 % más de piso por
 * abajo (scripts/seed-banner.php cuenta cómo y por qué). Siete envases en
 * fila, solapados: no hay recorte que enseñe unos cuantos sin cortar otro, así
 * que lo que se ajusta es la caja, no la foto. Los envases ocupan del 19,5 %
 * al 77,5 % del ancho del archivo y del 41,6 % al 75,2 % del alto.
 *
 * Tres cosas los pueden cortar, y las tres se miden con
 * `medir-anchos.mjs` → heroProductos, que da la holgura a cada lado, arriba,
 * sobre la curva del arco y sobre el sello:
 *
 *   - LOS LADOS, cuando la caja es más estrecha que la foto (por debajo de
 *     2,4 : 1): el cover recorta a izquierda y derecha. En el móvil eso se
 *     arregla bajando la caja con el ancho.
 *   - EL ARCO, que es una cúpula: 64 px en el centro —justo donde está la
 *     Laca Selladora, la lata más baja— y 40 en el móvil.
 *   - ARRIBA, en pantallas muy anchas, donde la foto se dibuja más alta que la
 *     caja y anclarla abajo del todo se llevaba las tapas.
 *
 * LA CAJA ES LA MÍNIMA QUE LOS DEJA ENTEROS (Qroma, 20 de octubre: «el banner
 * lo veo muy grande, debería ser como la mitad»). De 641 px para arriba la caja
 * es más ancha que 2,4 : 1, así que el cover ajusta la foto al ANCHO y los
 * envases miden siempre el 14 % de la caja (0,336 del alto del archivo, que es
 * 1/2,4 del ancho). La caja es eso más el arco y dos holguras: 30 px sobre las
 * tapas y 12 entre la base y la curva.
 *
 *     alto  = 14vw + arco + 42px
 *     foco  = 30px − 17,33vw     (0,416 / 2,4: la tapa más alta, a 30 px)
 *
 * El foco va en PÍXELES y no en porcentaje: un porcentaje reparte el sobrante
 * entre arriba y abajo, y el sobrante crece con el ancho, así que la holgura
 * de arriba variaba de 33 a 200 px. Con los dos en vw, las dos holguras son
 * fijas a cualquier ancho. La mitad exacta no cabe: a 1440 los envases miden
 * 202 px y el arco tapa 64, así que 240 los cortaba.
 *
 * En el MÓVIL (640 o menos) la caja es más estrecha que 2,4 : 1, el cover
 * ajusta por alto y lo que aprieta son los lados: ahí sigue la fórmula de
 * antes, más abajo, anclada abajo del todo.
 *
 * Holgura mínima, en px. 1440, 1200 y 1024 medidos en Chrome el 20 de octubre de 2026; 320
 * y 390 son del 12 de octubre (el móvil no cambió); el resto sale de la misma
 * cuenta y falta medirlo en una ventana de ese ancho:
 *
 *     ancho   caja   envases   lados   arriba   arco
 *      320    200      67        14      83      11
 *      390    247      83        14     103      22
 *      768    214     108       150      30      12   (calculado)
 *     1024    249     143       200      30      13   medido
 *     1200    274     168       234      30      13   medido
 *     1440    308     202       281      30      13   medido
 *     2560    464     358       499      30      12   (calculado)
 *
 * (envases: su alto en px; lados: la menor de las dos holguras.)
 *
 * OJO AL SELECTOR, QUE AQUÍ HUBO UNA REGRESIÓN CARA: cuando la foto pasó a
 * servirse dentro de un <picture>, la regla que decía `.paracas-hero__foto >
 * img` dejó de aplicarse sin ningún aviso. Si algún día se envuelve la foto en
 * otra cosa, este selector es de los que hay que repasar.
 */
.paracas-hero--home .paracas-hero__foto {
  --hero-alto: calc(14vw + var(--arco-alto-l) + 42px);
  --hero-foco: calc(30px - 17.33vw);
}

.paracas-hero--home .paracas-hero__foto > img,
.paracas-hero--home .paracas-hero__foto > picture > img {
  object-position: center var(--hero-foco, 70%);
}

.paracas-hero__banda {
  /*
   * EL PADDING SUPERIOR NO ES DECORATIVO: es el hueco del sello.
   *
   * La píldora se monta a caballo del borde, así que mete dentro de la banda
   * (--sello-alto − --sello-sube) píxeles. Aquí estaba escrito a mano —80 px,
   * que daba la casualidad de ser lo justo— y al bajarlo con el resto del ritmo
   * vertical el titular se metió debajo del sello. Nada falló: simplemente dos
   * números que tenían que sumar habían dejado de sumar.
   *
   * Derivarlo cuesta lo mismo y no se puede romper. El space-5 es la holgura
   * entre el borde de abajo del sello y la primera línea del claim.
   */
  padding-block: calc(var(--sello-alto) - var(--sello-sube) + var(--space-5)) var(--seccion-y);
  color: var(--color-texto-invertido);
  text-align: center;
}

.paracas-hero__claim {
  font-size: var(--t-display);
  color: inherit;
}

/* La pastilla sobre la palabra clave del titular: caja blanca, azul dentro. */
.paracas-pastilla {
  display: inline-block;
  padding-inline: var(--space-3);
  background: var(--color-fondo);
  border-radius: var(--radio-s);
  color: var(--paracas-azul);
}

.paracas-hero__badges {
  justify-content: center;
  margin-block-start: var(--space-7);
}

.paracas-hero__interior {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 8fr 4fr;
  align-items: end;
  padding-block: var(--space-7) var(--seccion-y);
}

.paracas-hero__intro {
  margin-block-start: var(--space-4);
  font-size: var(--t-intro);
  max-inline-size: 52ch;
}

.paracas-eyebrow {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  margin-block-end: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radio-pill);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* La tarjeta de tono, junto al H1: veta real, no un cuadrado de color. */
/* La card del tono se retiró de las landings: enseñaba un dato de sistema —el
   color con el que se tiñe el eyebrow— como si fuera contenido. En su sitio va
   una foto de aplicación. */
.paracas-hero__aplicacion {
  block-size: 260px;
  margin: 0;
  border-radius: var(--radio-l);
}

.paracas-hero__aplicacion img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ===========================================================================
   Secciones y rejillas
   ======================================================================== */
/* Un solo ritmo, leído de --seccion-y. Aquí había tres transcritos del canvas
   —64/24 en la portada, 56/56 en las bandas azules, 48/48 en el cierre— y
   nueve más repartidos por el archivo. Que cada banda eligiera su propio aire
   es lo que hacía la página interminable al hacer scroll. */
.paracas-seccion { padding-block: var(--seccion-y) var(--space-6); }
.paracas-seccion--suelta { padding-block: var(--seccion-y); }
.paracas-seccion h2 { margin-block-end: var(--space-6); }

.paracas-seccion--alt {
  background: var(--color-fondo-card);
}

.paracas-rejilla { display: grid; }

.paracas-rejilla--productos {
  gap: var(--space-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Cuatro en fila, para los destacados de la portada. Es lo único que necesita:
   el reflow lo hereda de --productos, porque las dos @media que lo reparten a 2
   y a 1 columna vienen más abajo en este mismo archivo y ganan por orden. Una
   línea, y ni un breakpoint duplicado. */
.paracas-rejilla--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------------
   Las cards de la rejilla de destacados

   SOLO AQUÍ. El encargo era «en productos destacados», así que el gancho es la
   rejilla de la portada y el catálogo, la búsqueda y las landings se quedan con
   la card de siempre. Si algún día hay que extenderlo, es quitar este prefijo.
--------------------------------------------------------------------------- */
.paracas-rejilla--cuatro .paracas-card {
  background: var(--paracas-azul);

  /*
   * TODO EL TEXTO EN BLANCO CON UNA SOLA DECLARACIÓN, Y ESO NO ES CASUALIDAD:
   * .paracas-card no declara `color` y .paracas-card__titulo a es
   * `color: inherit`, así que el eyebrow, el título, su enlace y la
   * descripción heredan de aquí. La foto no se entera: .paracas-card__art
   * tiene fondo blanco propio y es hija.
   *
   * BLANCO SOBRE #0082CA DA 4,16:1. El título de 20 px en negrita pasa —pide
   * 3—, pero el eyebrow de 12 px y la descripción de 16 px piden 4,5 y se
   * quedan cortos. Es una decisión tomada con los números delante, no un
   * descuido; el porqué y la salida (#007BC0, 4,57) están en tokens.css, junto
   * al token.
   */
  color: var(--color-texto-invertido);

  /* El arco lo pinta PHP con --arco-propio, y --arco-color gana sobre él por
     diseño: es el mismo mecanismo con el que la card de categoría retinta el
     suyo al pasar el ratón. Así el arco sigue al cuerpo sin tocar la plantilla,
     que la comparten cuatro vistas. */
  --arco-color: var(--paracas-azul);
}

/*
 * DOS PIEZAS HAY QUE INVERTIRLAS A MANO, y el motivo es el mismo en las dos:
 * UNA DECLARACIÓN DIRECTA GANA SIEMPRE A LO HEREDADO, por poca especificidad
 * que tenga y por mucha que tenga el ancestro. La herencia solo llega donde no
 * hay ninguna regla que toque el elemento.
 *
 *   - «BASES» declara `color: var(--color-enlace)` unas líneas más arriba.
 *   - El título es un <h3>, y base.css lo pinta con `:where(h1, h2, h3)`. El
 *     :where() lo deja a especificidad cero, pero eso da igual: sigue siendo
 *     una regla que casa con el elemento. Su <a> es `color: inherit`, así que
 *     con el h3 arreglado el enlace va detrás.
 *
 * La descripción sí hereda: no la toca nadie.
 */
.paracas-rejilla--cuatro .paracas-card__familia,
.paracas-rejilla--cuatro .paracas-card__titulo {
  color: var(--color-texto-invertido);
}

/*
 * SOLO IMAGEN, CATEGORÍA, NOMBRE Y DESCRIPCIÓN.
 *
 * Los tres atributos se retiran de los destacados. En la portada la card no
 * tiene que convencer de nada: tiene que dar a elegir entre cuatro productos, y
 * las tres pastillas repetían por cuarta vez lo que ya dicen el nombre y la
 * descripción. Siguen en el catálogo y en la ficha.
 */
.paracas-rejilla--cuatro .paracas-card__atributos { display: none; }

/* DOCE columnas, no dos iguales. El canvas alterna ancha/estrecha en la
   primera fila y estrecha/ancha en la segunda, con fotos de 420 arriba y 340
   abajo. Los spans y las alturas los pone cada card. */
.paracas-rejilla--categorias {
  gap: var(--space-5);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.paracas-cat--ancha   { grid-column: span 7; }
.paracas-cat--estrecha { grid-column: span 5; }

/* Lo ancho scrollea DENTRO de su caja. El documento nunca. */
.paracas-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* ===========================================================================
   Card de categoría
   ======================================================================== */
/* Columna flexible, no bloque: la rejilla estira la card hasta el alto de su
   fila, y con `display: block` el sobrante quedaba como una franja de fondo
   debajo del cuerpo — 26 px vacíos bajo Tintes, que es justo lo que se veía.
   Con el cuerpo creciendo, las dos cards de una fila terminan igual. */
.paracas-cat {
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: var(--color-fondo-card);
  border-radius: var(--radio-l);
  color: inherit;
  text-decoration: none;
}

.paracas-cat__foto {
  flex: 0 0 auto;
  block-size: var(--cat-foto, 340px);
}

/* Texto y flecha en la MISMA fila, alineados abajo.
   El cuerpo y el arco que lo remata son la misma superficie pintada dos veces,
   así que comparten variable: cambiarla mueve las dos a la vez y no se puede
   volver a olvidar una. */
.paracas-cat__cuerpo {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-5);
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px 26px 26px;

  --superficie: var(--color-fondo-card);
  --arco-color: var(--superficie);
  background: var(--superficie);
  transition: background-color var(--duracion) var(--curva);
}

.paracas-cat__texto {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
}

.paracas-cat__meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.paracas-cat__titulo { font-size: var(--cat-titulo, 1.625rem); }

.paracas-cat__flecha {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  background: var(--paracas-azul);
  border-radius: 50%;
  color: var(--color-texto-invertido);
}

/* ===========================================================================
   Módulo diferenciador

   Siempre sobre azul con topo y texto blanco. El tono de madera entra como
   acento en los círculos numerados, nunca como fondo de la sección.
   ======================================================================== */
.paracas-modulo {
  padding-block: var(--banda-y);
  color: var(--color-texto-invertido);
}

.paracas-modulo__titulo {
  margin-block-end: var(--space-8);
  color: inherit;
}

.paracas-modulo .paracas-tabla { color: var(--color-texto); }

.paracas-pasos {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.paracas-paso {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-fondo);
  border-radius: var(--radio-l);
  color: var(--color-texto);
}

.paracas-paso__n {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--color-fondo-card);
  color: var(--color-enlace);
  font-weight: 800;
}

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

.paracas-paso__nota {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--color-texto-suave);
  text-transform: lowercase;
}

.paracas-agentes {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.paracas-agente {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-fondo);
  border-radius: var(--radio-l);
  color: var(--color-texto);
}

.paracas-agente h3 { color: var(--color-titular); }

.paracas-agente__circulo {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
}

/* La carta de color: chip plano arriba, textura real de madera abajo. La
   rejilla es auto-fill, así que admite ocho o doce sin rehacerse. */
.paracas-carta {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.paracas-carta__tono {
  overflow: clip;
  background: var(--color-fondo);
  border-radius: var(--radio-l);
  color: var(--color-texto);
}

.paracas-carta__veta {
  display: block;
  block-size: 150px;
  border-radius: 0;
}

.paracas-carta__pie {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
}

/* ---------------------------------------------------------------------------
   La carta de color, interactiva

   LA MISMA EN DOS SITIOS: los colores de una ficha de producto y la carta de
   tonos de la landing de Tintes. Vivía solo en views/ficha.css, y la landing
   emitía sus clases sin el JavaScript ni estas reglas — o sea, tenía el aspecto
   del componente y ninguno de sus comportamientos.

   El fondo lo pone --carta-fondo, que escribe carta.js al pasar por encima o al
   pulsar. Mientras nadie toque nada la variable no existe y todo se ve como
   cualquier otra sección.
--------------------------------------------------------------------------- */
.paracas-carta__gatillo {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radio-l);
  background: var(--color-fondo);
  color: inherit;
  overflow: clip;
  cursor: pointer;
  text-align: start;
  transition: border-color var(--duracion) var(--curva),
              box-shadow var(--duracion) var(--curva);
}

.paracas-carta__gatillo:hover,
.paracas-carta__gatillo[aria-pressed='true'] {
  border-color: var(--paracas-azul);
  box-shadow: var(--sombra-alta);
}

/* El botón ya trae el fondo y el recorte: la caja de fuera sobra. */
.paracas-carta__tono {
  overflow: visible;
  background: none;
}

/* Los tonos muy claros se pierden sobre fondo blanco. Un filete por dentro les
   devuelve el borde sin teñir la muestra. */
.paracas-carta__veta {
  box-shadow: inset 0 0 0 1px var(--color-borde-fuerte);
}

/*
 * EL MÓDULO DE LA CARTA SE TIÑE ENTERO.
 *
 * En la ficha la zona es blanca y basta un 18 % de tinte. Aquí el fondo es el
 * azul de marca con el topográfico encima, así que un 18 % no se vería: hay que
 * teñir el propio --topo-fondo, que es la variable de la que ya cuelga el color
 * de la banda. Así el patrón topográfico sigue dibujado sobre el tono, en vez
 * de quedar flotando sobre un rectángulo de otro color.
 *
 * El porcentaje está medido contra los once tonos de la carta —de #221A16 a
 * #C08F42— comprobando que el texto blanco del módulo sigue por encima de 4,5.
 */
.paracas-modulo--carta {
  transition: background-color var(--duracion) var(--curva);
}

.paracas-modulo--carta[data-encendida] {
  --topo-fondo: color-mix(in srgb, var(--carta-fondo) 60%, var(--paracas-azul-hondo));
}

.paracas-carta__nombre {
  font-size: var(--t-body);
  font-weight: 800;
  text-transform: uppercase;
}


/* ===========================================================================
   Cierre y Club
   ======================================================================== */
/* space-between con los dos botones a la derecha, no centrado con uno. */
.paracas-cierre {
  padding-block: var(--space-9);
  background: var(--color-fondo-card);
}

.paracas-cierre__interior {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
}

.paracas-cierre p {
  margin-block-start: var(--space-4);
  font-size: var(--t-intro);
  max-inline-size: 56ch;
}

.paracas-cierre__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ===========================================================================
   Ficha
   ======================================================================== */
.paracas-ficha__cabecera {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 6fr 6fr;
  align-items: start;
  padding-block: var(--space-7) var(--space-9);
}

.paracas-ficha__texto { display: grid; gap: var(--space-5); align-content: start; }

/* Ya no es un párrafo unido: es una lista de chips. La tipografía la pone
   .paracas-etiqueta; aquí solo queda lo que distingue a esta fila. */
.paracas-ficha__clave .paracas-etiqueta {
  font-size: var(--t-small);
  white-space: normal;
}

/* Las descargas van EN FLUJO, nunca fijas: fijas, el flotante de WhatsApp las
   tapa en móvil. */
.paracas-ficha__descargas,
.paracas-ficha__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.paracas-ficha__descargas > * { flex: 1 1 260px; }

.paracas-galeria__principal {
  block-size: 440px;
  aspect-ratio: auto;
  background: var(--color-fondo-suave);
  border-radius: var(--radio-l);
}

.paracas-galeria__caption {
  position: relative;
  padding: var(--space-3) var(--space-5);
  background: var(--color-fondo-card);
  color: var(--color-enlace);
  font-size: var(--t-mini);
  font-weight: 700;
}

/* Sin texto no se puede quitar el elemento —lleva el arco dentro— pero sí su
   relleno: si no, deja una franja vacía bajo el envase. */
.paracas-galeria__caption--vacio {
  padding: 0;
  min-block-size: var(--arco-alto-s);
}

.paracas-galeria__miniaturas {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-start: var(--space-3);
}

.paracas-galeria__mini {
  block-size: 96px;
  aspect-ratio: auto;
  padding: 0;
  border: 3px solid var(--color-borde);
  border-radius: var(--radio-m);
  background: var(--color-fondo-suave);
  cursor: pointer;
  --media-pad: var(--space-2);

  /* El borde de la miniatura activa cambiaba en seco. Es el único indicador de
     cuál se está viendo, así que conviene que se vea moverse. */
  transition: border-color var(--duracion) var(--curva);
}

.paracas-galeria__mini[aria-pressed='true'] { border-color: var(--paracas-azul); }

.paracas-video iframe { inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; }

.paracas-cabecera-vista { padding-block: var(--space-7); }

/* ===========================================================================
   Reflow de todo lo anterior
   ======================================================================== */

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

@media (max-width: 900px) {
  /* LA IMAGEN SUBE: en todo módulo a dos columnas, la foto pasa arriba.
     Única excepción, el resultado de búsqueda. */
  .paracas-hero__interior,
  .paracas-ficha__cabecera { grid-template-columns: 1fr; }

  .paracas-ficha__envase { order: -1; }

  /* DOS columnas, no una. Los spans asimétricos de escritorio se igualan: a
     esta anchura la jerarquía 7/5 ya no se lee y solo descuadra la rejilla. */
  .paracas-rejilla--categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .paracas-cat--ancha,
  .paracas-cat--estrecha { grid-column: auto; }

  .paracas-cat__foto { block-size: 240px; }
  .paracas-cat__titulo { font-size: 1.375rem; }

  /* La secuencia NO se vuelve carrusel: es un orden. Pasa a dos columnas y
     luego a una, pero se sigue leyendo entera y en su orden. */
  .paracas-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paracas-agentes { grid-template-columns: 1fr; }

  /* La portada va en su propia regla y no heredando esta: su valor de
     escritorio lo pone `.paracas-hero--home .paracas-hero__foto`, que son DOS
     clases, así que ganaba a este selector de una dentro del media query y el
     hero de la portada se quedaba en 440 px a cualquier anchura. Nada avisaba:
     la foto simplemente ocupaba media pantalla en un móvil. */
  .paracas-hero__foto { --hero-alto: 320px; }

  .paracas-cat__foto { block-size: 240px; }
}

@media (max-width: 640px) {
  /* -------------------------------------------------------------------------
     La card de producto, en compacto

     A una columna cada card medía 452 × 484 y las cuatro destacadas sumaban
     2.114 px de scroll; el catálogo, con nueve productos, era nueve pantallas.
     Pasa a dos columnas.

     Y lo que las hace caber NO es encogerlo todo: es quitar lo que sobra a este
     tamaño. En una rejilla, una card no tiene que convencer, tiene que dejar
     elegir; la ficha está a un toque.
     ---------------------------------------------------------------------- */
  .paracas-rejilla--productos {
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* El pad baja CON la caja. Es proporción, no decoración: --media-pad es el
     aire que .paracas-media deja alrededor del envase, y si la caja baja de 220
     a 150 sin tocarlo, el envase se encoge más que su marco. */
  .paracas-card__art {
    block-size: 150px;

    --media-pad: var(--space-3);
  }

  .paracas-card__cuerpo {
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-5);

    /* El mismo aire, para las cards de rejilla, que van en subgrid. */
    --card-aire: var(--space-2);
  }

  /* Una línea. «Muebles y estructuras de exterior» ocupaba tres en media
     columna y empujaba el título de esa card muy por debajo del de su vecina:
     la fila entera se leía torcida. Es un rótulo de categoría, no un dato que
     haga falta entero para elegir. */
  .paracas-card__familia {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

  /* Dos líneas y tope. Una descripción de cuatro líneas en media columna es lo
     que hacía la card el doble de alta que su foto. */
  .paracas-card__desc {
    font-size: var(--t-small);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  /*
   * UN ATRIBUTO, NO TRES.
   *
   * Cada pastilla mide 44 px de alto por área táctil —el target trabaja con
   * guantes y eso no se toca—, así que las tres eran 132 px de card. Y en media
   * columna su texto se cortaba con puntos suspensivos, que es peor que no
   * estar: promete un dato y no lo da. Los tres siguen en la ficha.
   */
  .paracas-card__atributos .paracas-atributo:nth-child(n + 2) { display: none; }

  .paracas-pasos { grid-template-columns: 1fr; }
  .paracas-hero__foto { --hero-alto: 240px; }

  /*
   * EL ALTO BAJA CON EL ANCHO para que la fila de siete envases quepa entera:
   * con una caja fija de 300 px, el cover recortaba los lados y a 390 se
   * perdían la Laca Cristal y los Tintes. 68vw − 18 px es el alto máximo que
   * deja 10 px a cada lado (la fila mide 1,39 veces el alto de la caja), y a
   * 320 sigue dejando 10 px sobre el arco. Los envases miden unos 80 px de
   * alto a 390: siete latas en fila en un teléfono no dan para más, y
   * enteros es la condición.
   */
  .paracas-hero--home .paracas-hero__foto { --hero-alto: clamp(190px, calc(68vw - 18px), 300px); --hero-foco: 100%; }

  /* Las categorías SIGUEN en dos columnas: 2 × 2. Con la card a media anchura
     hay que bajar foto y titular, o «Muebles y estructuras de interior» parte
     en cuatro líneas. */
  .paracas-cat__foto { block-size: 150px; }
  .paracas-cat__titulo { font-size: 1.0625rem; }

  /* Texto y flecha dejan de compartir fila: a esta anchura no caben. */
  .paracas-cat__cuerpo {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .paracas-cat__flecha {
    inline-size: 36px;
    block-size: 36px;
    align-self: flex-end;
  }

  /* Dos líneas reservadas, se usen o no. A esta anchura «KIT DD POLIURETANO»
     parte y «9 COLORES» no, y el título de Pisos quedaba 14 px más abajo que
     el de Tintes, al lado. Medido con medir-anchos.mjs a 390. */
  .paracas-cat__meta {
    min-block-size: 2lh;
    font-size: 0.625rem;
  }
}

/* ===========================================================================
   Descargas
   ======================================================================== */
.paracas-descargas { padding-block-end: var(--space-10); }

.paracas-descargas__controles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-5);
}

.paracas-buscador {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-inline-size: 320px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-pill);
  background: var(--color-fondo);
  color: var(--color-enlace);
}

.paracas-campo {
  flex: 1;
  min-inline-size: 0;
  min-block-size: var(--tactil);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-texto);
  font-size: var(--t-body);
}

.paracas-campo:focus { outline: none; }

/* Ni el anillo de base.css: dentro de la píldora se veía un cuadrado. El foco
   no se apaga, se pinta en el envoltorio (abajo). */
.paracas-campo:focus-visible { box-shadow: none; }

/* El anillo de foco va en el envoltorio: el input no tiene borde propio. */
.paracas-buscador:focus-within {
  box-shadow: 0 0 0 3px var(--color-fondo), 0 0 0 5px var(--color-foco);
}

.paracas-descargas__conteo {
  margin-block-end: var(--space-4);
  color: var(--color-enlace);
  font-size: var(--t-small);
  font-weight: 700;
}

.paracas-tabla--descargas thead th {
  background: var(--color-fondo-card);
  font-size: var(--t-micro);
}

.paracas-tabla--descargas th,
.paracas-tabla--descargas td { inline-size: auto; }

.paracas-tabla--descargas td:first-child { inline-size: 48%; }

.paracas-descargas__enlace {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  min-block-size: var(--tactil);
  color: var(--color-texto);
  font-weight: 700;
  text-decoration: none;
}

.paracas-descargas__enlace:hover { color: var(--color-enlace); }

/* Sobre fondo claro el badge se invierte: caja azul con texto blanco. */
.paracas-descargas__enlace .paracas-descarga__badge {
  background: var(--paracas-azul-hondo);
  color: var(--color-texto-invertido);
}

.paracas-vacio {
  padding-block: var(--space-8);
  color: var(--color-enlace);
  font-size: var(--t-intro);
}

/* ===========================================================================
   Clases que el PHP usaba sin tener una sola regla
   ======================================================================== */
.paracas-cabecera {
  position: relative;
  z-index: var(--z-cabecera);
  background: var(--color-fondo);
}

.paracas-cabecera-vista__intro {
  margin-block-start: var(--space-4);
  font-size: var(--t-intro);
  max-inline-size: 62ch;
}

.paracas-cabecera-vista__conteo {
  margin-block-start: var(--space-3);
  color: var(--color-enlace);
  font-weight: 700;
}

.paracas-articulo { padding-block: var(--space-7) var(--seccion-y); }

.paracas-prosa {
  max-inline-size: 68ch;
  margin-block-start: var(--space-6);
}

.paracas-prosa > * + * { margin-block-start: var(--space-4); }
.paracas-prosa h2 { margin-block-start: var(--space-8); }

.paracas-lista-resultados {
  display: grid;
  gap: var(--space-2);
}

.paracas-lista-resultados a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tactil);
  font-weight: 700;
}

/* Los filtros del catálogo. */
.paracas-filtros {
  display: grid;
  gap: var(--space-5);
  margin-block-end: var(--space-8);
}

.paracas-filtros__grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: 0;
  border: 0;
  margin: 0;
}

.paracas-filtros__label {
  padding: 0;
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.paracas-filtros__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Los filtros ACTIVOS, siempre visibles. Si se pliegan, el visitante ve una
   rejilla corta y no entiende por qué. */
.paracas-filtros__activos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-borde);
}

.paracas-chip--quitar {
  border-color: var(--paracas-azul);
  background: var(--paracas-azul);
  color: var(--color-texto-invertido);
}

@media (max-width: 640px) {
  .paracas-buscador { min-inline-size: 100%; }

  /* La tabla de descargas pasa a pares etiqueta/valor, como la de datos
     técnicos. */
  .paracas-tabla--descargas thead { display: none; }
  .paracas-tabla--descargas tr { display: block; padding-block: var(--space-3); }
  .paracas-tabla--descargas td { display: flex; gap: var(--space-3); justify-content: space-between; }
  .paracas-tabla--descargas td:first-child { inline-size: auto; }

  .paracas-tabla--descargas td::before {
    content: attr(data-label);
    flex: none;
    color: var(--color-enlace);
    font-size: var(--t-micro);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  .paracas-tabla--descargas td:first-child::before { display: none; }
}

/* ===========================================================================
   Sistemas de pintado
   ======================================================================== */

/* El hero de la página es la MISMA superficie que la banda de la portada, no
   una parecida: la pastilla del claim es caja blanca con letra azul y solo se
   lee sobre el azul de marca. */
.paracas-hero--sistemas {
  position: relative;
  padding-block: var(--space-9) var(--banda-separacion);
  color: var(--color-texto-invertido);
  text-align: center;
}

/* CON FOTOGRAFÍA, EL RELLENO SE MUDA AL VELO. En el <section> deja una banda de
   azul plano por encima y por debajo de la imagen —48 px arriba, medidos—,
   porque la foto vive en la celda de la rejilla y el padding queda fuera de
   ella. En el velo, la foto llega hasta la cabecera y el texto conserva su aire.

   El centrado y el fondo azul se quedan: el azul es lo que se ve si algún día
   se vacía el campo, y el centrado es de esta sección y no de las landings. */
.paracas-hero--sistemas.paracas-hero--sangre {
  padding-block: 0;
}

/* ESTE HERO NO MIDE LO QUE MIDEN LAS LANDINGS, Y NO DEBE.

   El suelo de .paracas-hero--sangre son 620 px, y ese número está calibrado
   sobre la landing de Pisos: antetítulo, titular grande, entradilla y botón,
   259 px de contenido. El índice de sistemas lleva un titular y una entradilla
   —175 px medidos a 1536— así que con el mismo suelo quedaban 445 px de aire y
   la primera card no se veía sin desplazarse: el hero ocupaba la ventana entera.

   420 en vez de 620, en clamp por lo mismo que el otro: es una banda, y baja con
   el ancho sin escalones. Da 420 desde 1400, 307 a 1024 y el suelo de 280 de ahí
   para abajo, donde el contenido ya manda por sí solo.

   TRES CLASES, y no sobra ninguna: la regla que hay que ganar es
   `.paracas-hero--sangre .paracas-hero__foto`, que es (0,2,0). Con dos el empate
   lo rompería el orden de carga de las hojas, y esta ya es la cuarta vez que
   este tema se apoya en eso sin querer. Y lleva `--sistemas` porque las cuatro
   landings comparten `--sangre` y siguen aprobadas a 620. */
.paracas-hero--sistemas.paracas-hero--sangre .paracas-hero__foto {
  /* `block-size: auto` NO SOBRA, y cuesta encontrarlo: unas líneas más arriba
     toda .paracas-hero__foto lleva `block-size: var(--hero-alto, 480px)`, que
     es la altura fija del hero de la portada. Con ella puesta, un
     `min-block-size` más bajo no baja nada —medido: con el suelo a 300, a 360 o
     a 420 el hero seguía midiendo 480 clavados, y solo se movía al pedir 500—.
     Un mínimo no puede contra una altura fija, y como ninguna de las dos falla,
     el único aviso era el número que no cuadraba. */
  block-size: auto;
  min-block-size: clamp(280px, 30vw, 420px);
}

/* EL TEXTO SE CENTRA EN LA BANDA. En `block` el contenido se quedaba pegado
   arriba y todo el aire sobrante caía debajo, que es lo que hacía que el hero
   se leyera como una fotografía con un titular encima en vez de como una banda.

   El relleno sigue siendo asimétrico a propósito: los 104 de abajo son los que
   le reservan sitio al arco, que va superpuesto al final del hero, y con el
   contenido centrado esa reserva sigue contando. */
.paracas-hero--sistemas.paracas-hero--sangre .paracas-hero__velo {
  display: grid;
  align-content: center;
  padding-block: var(--space-9) var(--banda-separacion);
}

.paracas-hero--sistemas h1 {
  color: inherit;
  font-size: var(--t-h1-grande);
}

.paracas-hero--sistemas__interior {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
}

.paracas-hero--sistemas .paracas-hero__intro {
  margin: 0;
  max-inline-size: 62ch;
}

/* ---------------------------------------------------------------------------
   El hero: la foto manda y el texto va encima

   Antes eran dos bloques que competían: una foto enorme a sangre sin nada
   escrito y, debajo, el titular con una segunda foto pequeña al lado. Se veía
   medio metro de madera antes de saber en qué página estabas.
--------------------------------------------------------------------------- */
.paracas-hero--sangre {
  position: relative;
  display: grid;
  isolation: isolate;
}

/*
 * LA FOTO Y EL VELO COMPARTEN CELDA. Los dos en `grid-area: 1 / 1`, así que la
 * altura la manda el contenido del velo y la foto se recorta contra ella.
 *
 * Y esa es la diferencia con poner la foto en `position: absolute`: con celda
 * compartida el hero mide lo que mide su texto, así que un titular de tres
 * líneas en un móvil no queda cortado por una altura fija que alguien eligió
 * mirando un escritorio.
 */
.paracas-hero--sangre .paracas-hero__foto,
.paracas-hero--sangre .paracas-hero__velo {
  grid-area: 1 / 1;
  min-inline-size: 0;
}

/*
 * LA ALTURA DEL HERO LA MANDABA LA FOTO, Y NO DEBÍA.
 *
 * Esto era la trampa que este proyecto tiene documentada y medida cuatro veces
 * en el tema hermano, aquí por quinta: el envoltorio tenía `block-size: auto`
 * —altura indefinida—, así que el `block-size: 100%` que decor.css le da a la
 * <img> resolvía a `auto`, la foto se dibujaba a su tamaño natural y ARRASTRABA
 * AL HERO ENTERO. Sin un solo error en consola.
 *
 * El resultado era que cada landing medía lo que midiera su fotografía:
 *
 *     interior   1920x1280  ratio 1,50   ->    960 px
 *     exterior   1920x1280  ratio 1,50   ->    960 px
 *     pisos      1920x828   ratio 2,32   ->    621 px
 *     tintes     1920x1920  ratio 1,00   ->  1.440 px
 *
 * Pisos se veía bien por casualidad: es la única foto panorámica de las cuatro.
 * Tintes es cuadrada y ocupaba una pantalla y media.
 *
 * El remedio es el de siempre: SACAR LA IMAGEN DEL FLUJO. Con la foto en
 * absoluto, la celda ya no la mide, y la altura vuelve a salir de donde el
 * bloque de arriba dice que tiene que salir: del contenido del velo, con este
 * suelo por debajo.
 *
 * El suelo se calibra sobre Pisos —619 px a 1440, contra los 621 que medía—,
 * que es la altura que el cliente dio por buena. En `clamp` y no en tres
 * breakpoints porque es una banda: baja con el ancho sin escalones.
 */
.paracas-hero--sangre .paracas-hero__foto {
  position: relative;
  overflow: clip;
  min-block-size: clamp(320px, 43vw, 620px);
}

/* `> img` y no `img` a secas: el velo también vive en esta celda y puede llevar
   imágenes dentro del texto algún día. */
.paracas-hero--sangre .paracas-hero__foto > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* El degradado sube desde abajo. Sin él, un titular blanco sobre una foto clara
   —la pérgola de exterior, sin ir más lejos— es ilegible, y con la foto oscura
   sobraría. El degradado resuelve las dos. */
.paracas-hero__velo {
  position: relative;
  z-index: var(--z-contenido);
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-11) var(--space-10);
  background: linear-gradient(
    to bottom,
    rgb(10 46 69 / 10%) 0%,
    rgb(10 46 69 / 45%) 45%,
    rgb(10 46 69 / 82%) 100%
  );
}

.paracas-hero--sangre .paracas-hero__interior {
  display: block;
  color: var(--color-texto-invertido);
}

.paracas-hero--sangre h1,
.paracas-hero--sangre .paracas-hero__intro {
  color: var(--color-texto-invertido);
}

.paracas-hero--sangre .paracas-hero__intro {
  margin-block-start: var(--space-4);
  max-inline-size: 52ch;
}

.paracas-hero--sangre .paracas-eyebrow {
  margin-block-end: var(--space-5);
}

/* El arco cuelga del hero entero, no de la caja de la foto: la superficie de
   abajo es blanca y el arco pertenece siempre a la de abajo. */
.paracas-hero--sangre > .paracas-arco {
  z-index: calc(var(--z-contenido) + 1);
}

.paracas-sistema__cabecera {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.paracas-sistema__cabecera h3 { font-size: var(--t-h2-medio); }

.paracas-sistema__desc {
  font-size: var(--t-intro);
  max-inline-size: 62ch;
}

.paracas-sistema__uso {
  padding: 6px var(--space-4);
  background: var(--sistema-tono, var(--paracas-surface-alt));
  border-radius: var(--radio-pill);
  color: var(--sistema-trazo, var(--color-texto));
}

/* ---------------------------------------------------------------------------
   Las familias: los grandes bloques del tríptico

   Cada una con su barra de color, sus productos clickeables y los sistemas de
   aplicación que le pertenecen.
   ------------------------------------------------------------------------ */
.paracas-familias {
  display: grid;
  gap: var(--space-9);
  padding-block: var(--space-7) var(--seccion-y);
}

.paracas-familia {
  overflow: clip;
  border: 2px solid var(--familia-color, var(--paracas-azul));
  border-radius: var(--radio-l);
}

.paracas-familia__barra {
  padding: var(--space-4) var(--space-6);
  background: var(--familia-color, var(--paracas-azul));
  color: var(--familia-trazo, var(--color-texto-invertido));
  font-size: var(--t-h2);
  text-align: center;
}

.paracas-familia__cuerpo {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-7) var(--space-6) var(--space-8);
}

.paracas-familia__desc {
  font-size: var(--t-intro);
  max-inline-size: 62ch;
}

/* ---------------------------------------------------------------------------
   Los pasos, en los dos layouts del tríptico

   El ordinal sale de un contador CSS y no del marcado: el <ol> ya es la fuente
   del orden, y así insertar un paso no obliga a renumerar a mano.
   ------------------------------------------------------------------------ */
.paracas-pasos--bento,
.paracas-pasos--columnas,
.paracas-pasos--filas {
  counter-reset: paso;
}

.paracas-pasos--bento .paracas-paso,
.paracas-pasos--columnas .paracas-paso,
.paracas-pasos--filas .paracas-paso {
  counter-increment: paso;
}

.paracas-pasos--bento .paracas-paso__n::before,
.paracas-pasos--columnas .paracas-paso__n::before,
.paracas-pasos--filas .paracas-paso__n::before {
  content: counter(paso);
}

.paracas-paso__pie {
  font-size: var(--t-small);
  color: var(--color-texto);
}

/* Los envases del paso. Van en fila porque el tríptico enseña pasos con dos
   latas una al lado de otra, y en `.paracas-media`, que es el envoltorio que
   este proyecto ya tiene para packshots sobre PNG transparente. */
.paracas-paso__productos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.paracas-paso__producto {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
}

.paracas-paso__envase {
  --media-pad: 0px;
  inline-size: 96px;
  aspect-ratio: 1 / 1;
}

.paracas-paso__marca {
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 700;
  text-align: center;
}

.paracas-paso__producto:hover .paracas-paso__marca { text-decoration: underline; }

/* --- Bento -----------------------------------------------------------------
   Doce columnas, como la rejilla de categorías, y los spans los reparte una
   tabla de formas en PHP. El primer paso ocupa columna angosta y DOS filas: es
   el que abre el sistema y el que lleva la imagen grande.

   `auto-fit` y spans explícitos no conviven, así que esta rejilla declara sus
   columnas fijas y no hereda las de --columnas. */
.paracas-pasos--bento {
  gap: var(--space-4);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
  align-items: stretch;
  padding-block-start: 22px;
}

.paracas-paso--ancho  { grid-column: span 5; grid-row: span 2; }
.paracas-paso--medio  { grid-column: span 7; }
.paracas-paso--corto  { grid-column: span 5; }
.paracas-paso--pleno  { grid-column: span 12; }
.paracas-paso--tercio { grid-column: span 4; }

.paracas-pasos--bento .paracas-paso {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-fondo-card);
  border-radius: var(--radio-12);
}

/* El ordinal se monta sobre el borde, como en el impreso. */
.paracas-pasos--bento .paracas-paso__n {
  position: absolute;
  inset-block-start: -22px;
  inset-inline-start: var(--space-5);
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  background: var(--sistema-tono, var(--paracas-surface-alt));
  border: 3px solid var(--color-fondo);
  border-radius: 50%;
  color: var(--sistema-trazo, var(--color-texto));
  font-size: var(--t-intro);
  font-weight: 800;
}

/* La celda que manda enseña su imagen en grande. */
.paracas-paso--ancho .paracas-paso__envase { inline-size: 150px; }

.paracas-paso--ancho .paracas-paso__nombre { font-size: var(--t-h3); }

/* --- Columnas: pp. 3 y 5 del tríptico --------------------------------------
   Una columna por paso, con el ordinal montado sobre la caja de color. Los
   sistemas no tienen todos el mismo número de pasos —5, 5, 4 y 4—, así que la
   rejilla se ajusta en vez de dejar un hueco al final de las filas de cuatro. */
.paracas-pasos--columnas {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
  padding-block-start: 22px;
}

.paracas-pasos--columnas .paracas-paso {
  position: relative;
  padding: var(--space-6) var(--space-4) var(--space-5);
  background: var(--color-fondo-card);
  border-radius: var(--radio-12);
}

.paracas-pasos--columnas .paracas-paso__cabeza {
  justify-items: center;
  text-align: center;
}

/* El ordinal se sale por arriba y se monta sobre el borde de la caja, que es
   como lo dibuja el impreso. */
.paracas-pasos--columnas .paracas-paso__n {
  position: absolute;
  inset-block-start: -22px;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  background: var(--sistema-tono, var(--paracas-surface-alt));
  border: 3px solid var(--color-fondo);
  border-radius: 50%;
  color: var(--sistema-trazo, var(--color-texto));
  font-size: var(--t-intro);
  font-weight: 800;
  translate: -50% 0;
}

.paracas-pasos--columnas .paracas-paso__productos { justify-content: center; }

/* --- Filas: p. 4 del tríptico ----------------------------------------------
   Barra ancha con el ordinal a la izquierda y el título a la derecha, de dos en
   dos. El pie de texto cuelga debajo de la barra. */
.paracas-pasos--filas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.paracas-pasos--filas .paracas-paso {
  padding: 0;
  background: none;
  gap: var(--space-3);
}

.paracas-pasos--filas .paracas-paso__cabeza {
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-fondo-card);
  border-inline-start: 6px solid var(--sistema-tono, var(--paracas-azul));
  border-radius: var(--radio-12);
}

.paracas-pasos--filas .paracas-paso__n {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  background: var(--sistema-tono, var(--paracas-surface-alt));
  border-radius: 50%;
  color: var(--sistema-trazo, var(--color-texto));
  font-size: var(--t-intro);
  font-weight: 800;
}

.paracas-pasos--filas .paracas-paso__nombre { margin: 0; }

/* Estas media queries van AQUÍ y no en el bloque de reflow de más arriba, y no
   es por gusto: el reflow general de .paracas-pasos está antes en el archivo y
   tiene la misma especificidad que .paracas-pasos--columnas, así que perdería.
   La regla que gana es la última, y la última tiene que ser la del ancho. */
@media (max-width: 900px) {
  /* La asimetría se aplana, igual que la hace la rejilla de categorías: a esta
     anchura una celda de 5 de 12 ya no se lee como jerarquía, solo descuadra. */
  .paracas-pasos--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .paracas-paso--ancho,
  .paracas-paso--medio,
  .paracas-paso--corto,
  .paracas-paso--tercio { grid-column: auto; grid-row: auto; }

  .paracas-paso--pleno { grid-column: 1 / -1; }

  .paracas-pasos--columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paracas-pasos--filas { grid-template-columns: 1fr; }
  .paracas-familia__cuerpo { padding-inline: var(--space-5); }
}

@media (max-width: 640px) {
  .paracas-pasos--bento { grid-template-columns: 1fr; }
  .paracas-paso--pleno { grid-column: auto; }

  .paracas-pasos--columnas { grid-template-columns: 1fr; }

  .paracas-familia__barra { font-size: var(--t-h3); }

  .paracas-familia__cuerpo {
    gap: var(--space-7);
    padding: var(--space-6) var(--space-4) var(--space-7);
  }
}

/* ---------------------------------------------------------------------------
   Etiquetas: la lista de chips que sustituyó a las cadenas unidas

   El punto medio está prohibido en este proyecto. Donde había «Lijar · Base ·
   Acabado» hay una lista, y lo que separa es el hueco: se puede leer por
   partes, se puede envolver por donde toca y un lector de pantalla la anuncia
   como lo que es. En un <ol> además conserva el orden, que es justo lo que el
   separador no decía.
   ------------------------------------------------------------------------ */
.paracas-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.paracas-etiqueta {
  padding: 5px 10px;
  background: var(--paracas-surface-alt);
  border-radius: var(--radio-s);
  /* #00669e sobre #eaf4fb da 5,54: pasa AA holgado, y hace falta porque el
     chip es texto pequeño. El azul de marca a secas se quedaba en 3,9. */
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/*
 * AZUL DE MARCA, por encargo del cliente: «Brillante, Mate», «45 m² por galón»
 * y «2 a 3 horas» iban en #00669E, que es el azul de ENLACE, y se leían apagadas
 * al lado del resto de la ficha.
 *
 * BLANCO SOBRE #0082CA DA 4,16:1 Y ESTAS ETIQUETAS SON TEXTO DE 12 px, que pide
 * 4,5. No llega, igual que las cards de destacados de la portada, y por el mismo
 * motivo: es el azul del brandbook y la decisión es del cliente, tomada con el
 * número delante. Si algún día se quiere corregir sin perder el tono, la salida
 * es #007BC0 —mismo matiz, dos puntos menos de luz—, que da 4,57.
 *
 * El azul de enlace daba 6,19 y cumplía. Queda escrito para que el próximo que
 * lo lea sepa qué se cambió y a cambio de qué.
 */
.paracas-etiqueta--fuerte {
  background: var(--paracas-azul);
  color: var(--color-texto-invertido);
}

/* La dilución: etiqueta y proporción en dos columnas, una fila por herramienta.
   Antes era una línea con las tres unidas. */
.paracas-dilucion {
  display: grid;
  gap: 2px var(--space-3);
  grid-template-columns: auto 1fr;
  margin: var(--space-1) 0 0;
}

.paracas-dilucion dt {
  color: var(--color-texto-suave);
  font-weight: 700;
}

.paracas-dilucion dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Una línea sin dos puntos ocupa las DOS columnas: es una frase, no un par.
   Ojo con el selector: `dt + dd` es el dd EMPAREJADO, que la colocación
   automática ya manda a la columna 2 él solo. El que hay que ensanchar es el
   que NO lleva dt delante, y ese es el primero de la lista o el que sigue a
   otro dd. */
.paracas-dilucion dd:first-child,
.paracas-dilucion dd + dd { grid-column: 1 / -1; }

.paracas-dilucion dt + dd { grid-column: 2; }

.paracas-paso__dilucion {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-fondo);
  font-size: var(--t-small);
}

.paracas-paso__etiqueta {
  display: block;
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.paracas-aviso {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-block-start: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 3px solid var(--paracas-azul);
  background: var(--color-fondo-suave);
  color: var(--color-texto);
}

.paracas-aviso .paracas-icono {
  flex: none;
  color: var(--color-enlace);
}

/* ===========================================================================
   Hero de la portada — las piezas que faltaban
   ======================================================================== */

/* El logo, a caballo del borde de la banda azul. */
.paracas-hero__banda { position: relative; }

.paracas-hero__sello {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  z-index: var(--z-contenido);
  display: grid;
  place-items: center;
  /* SIN CONTENEDOR (Qroma, 20 de octubre: «veo raro este contenedor del
     logo»). El óvalo del logotipo ya tiene el interior blanco y hace de sello
     por sí mismo. Pero la banda es del mismo azul que el anillo, y sin nada
     entre los dos el anillo desaparecía y quedaba una elipse blanca: los
     cuatro drop-shadow sin desenfoque son un filete blanco de 3 px que sigue
     el contorno del óvalo, y el último, la sombra. */
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(var(--sombra-alta));
  /* EN PÍXELES, NO EN PORCENTAJE. Un porcentaje aquí se resuelve contra la
     propia caja del sello, así que cualquier cambio de padding o de alto del
     logo movía también la píldora —dos efectos de un solo número, y el segundo
     invisible hasta que se miraba—. Con --sello-sube, lo que asoma sobre el
     arco es un valor explícito, y es el MISMO que usa la banda para calcular su
     padding superior: no se pueden desincronizar.

     Sigue siendo el único mando de su posición vertical: no hay `top` ni
     `margin` que la muevan, y animar.js solo le toca la opacidad. */
  transform: translate(-50%, calc(var(--sello-sube) * -1));
}

/* El alto del logo es --sello-alto entero: sin padding, son el mismo número.
   El PNG está recortado a su contenido (992×435), así que el óvalo llena la
   caja. */
.paracas-hero__sello img { block-size: var(--sello-alto); inline-size: auto; }

.paracas-hero__claim {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  color: inherit;
}

.paracas-hero__linea { display: block; }

/* El conector va pequeño y con una regla de 120 × 3 px a cada lado. */
.paracas-hero__conector {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* EL ANCHO EN UNA VARIABLE, no en la declaración: las dos reglas son
   pseudoelementos y GSAP no los alcanza. Con la variable en el elemento padre,
   la timeline las hace crecer sin tocarlas, y el valor de destino lo lee de
   aquí —bajo 900 son 48 y no 120—. */
.paracas-hero__conector {
  --conector-regla: 120px;
}

.paracas-hero__conector::before,
.paracas-hero__conector::after {
  inline-size: var(--conector-regla);
  block-size: 3px;
  background: currentColor;
  content: '';
}

.paracas-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-block-start: var(--space-7);
}

/* Los dos botones del hero van sobre azul, así que se invierten. */
.paracas-btn--claro {
  min-block-size: 52px;
  background: var(--color-fondo);
  color: var(--color-enlace);
}

.paracas-btn--contorno {
  min-block-size: 52px;
  border-color: var(--color-fondo);
  color: var(--color-texto-invertido);
}

.paracas-btn--contorno:hover {
  background: var(--color-fondo);
  color: var(--color-enlace);
}

/* ===========================================================================
   Cabecera de sección con enlace a la derecha
   ======================================================================== */
.paracas-seccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-end;
  justify-content: space-between;
  margin-block-end: var(--space-7);
}

.paracas-seccion__cabecera h2 { margin: 0; }

.paracas-enlace-flecha {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-block-size: var(--tactil);
  font-size: var(--t-intro);
  font-weight: 700;
  text-decoration: none;
}

/* ===========================================================================
   La banda de sistemas de la portada
   ======================================================================== */
/* El arco de esta banda vuela hacia arriba EXACTAMENTE --arco-alto-l, así que
   un margen de 64 px daba 0 px de aire y la última fila de categorías quedaba
   pegada a la curva. Sumando el vuelo, el token vuelve a significar lo que dice
   —y sigue siendo correcto cuando el arco baja a 40 px en móvil, sin una
   segunda cuenta a mano. */
.paracas-banda {
  position: relative;
  margin-block-start: var(--banda-separacion);
  padding-block: var(--banda-y);
  color: var(--color-texto-invertido);
}

.paracas-banda h2 { color: inherit; font-size: var(--t-h2-grande); }

.paracas-banda__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-end;
  justify-content: space-between;
  margin-block-end: var(--space-7);
}

/* Los dos botones se mantienen juntos y bajan a la vez: sin envoltorio, el
   `justify-content: space-between` de la cabecera los repartiría a los dos
   extremos de la banda. Y envuelven entre ellos, no contra el titular. */
.paracas-banda__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.paracas-banda__cabecera p {
  margin-block-start: var(--space-4);

  /* 19 px en negrita entra en el umbral de texto grande (≥18,66 y ≥700), que es
     lo que hace que el blanco cumpla sobre el azul de marca con 4,16. */
  font-size: 1.1875rem;
  font-weight: 700;
  max-inline-size: 40ch;
}

/* DOS columnas de partida, cuatro solo desde 1200 px, que es donde la card
   alcanza los 268 px del canvas. Con cuatro columnas por debajo, la caja
   interior bajaba de 150 px y el título ya no cabía: el canvas está dibujado
   para 1280 y no declara ni una @media, así que el corte lo pone la medida. */
.paracas-rejilla--sistemas {
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1200px) {
  .paracas-rejilla--sistemas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sin la cuenta de pasos la card quedaba coja, así que gana lo que le faltaba:
   una franja de su tono en el borde superior y el círculo de flecha de la card
   de categoría — el mismo gesto para la misma acción, entrar a algo. */
.paracas-sistema-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: var(--color-fondo);
  border-radius: var(--radio-l);
  color: var(--color-texto);
  text-decoration: none;
}

/* La franja del tono remata el borde superior. En la fila de móvil se pasa al
   lateral, porque allí arriba está la miniatura. */
.paracas-sistema-card::before {
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 6px;
  background: var(--sistema-tono, var(--paracas-azul));
  content: '';
}

/* El alto de la foto es explícito porque .paracas-foto no tiene alto propio, y
   porque `block-size: 100%` sobre una imagen dentro de un envoltorio de alto
   indefinido resuelve a `auto` y revienta la maqueta sin un solo error en
   consola. Este proyecto ya pagó esa lección cuatro veces. */
.paracas-sistema-card__foto {
  display: block;
  flex: 0 0 auto;
  block-size: 160px;
}

.paracas-sistema-card__cuerpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

/* `min-inline-size: 0` en los hijos de un flex column no es redundante: el
   tamaño mínimo automático es el del contenido, y una palabra larga —
   «alquídicos», «poliuretano»— ensancha la caja por dentro sin que el
   `overflow: clip` de la card avise de nada. */
.paracas-sistema-card__cuerpo > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.paracas-sistema-card h3 {
  font-size: var(--t-h2);
  overflow-wrap: break-word;
  hyphens: auto;
}

.paracas-sistema-card p {
  color: var(--color-texto);
  overflow-wrap: break-word;
}

/* La secuencia de pasos POR NOMBRE, que es lo que ocupó el hueco de los
   círculos numerados. En VERTICAL, no en fila: cinco chips sueltos se leen como
   cinco etiquetas y esto es una serie. El material es el mismo —la superficie
   clara, el tipo, el radio— pero cada paso lleva su ordinal y un hilo que lo une
   con el siguiente, que es justo lo que un chip suelto no dice.

   El ordinal sale de un contador CSS, no del marcado: así el <ol> sigue siendo
   la única fuente del orden y añadir un paso no obliga a numerar a mano. */
/* El envoltorio lleva lo que antes llevaba el <ol>: el empuje hacia abajo y
   el filete, para que el rótulo «Pasos necesarios» de la portada quede dentro,
   encima de la lista y bajo el filete. */
.paracas-sistema-card__secuencia {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: 100%;
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-borde);
}

.paracas-sistema-card__pasos-titulo {
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.paracas-sistema-card__pasos {
  display: flex;
  flex-direction: column;
  gap: 0;
  inline-size: 100%;
  counter-reset: paso;
}

.paracas-sistema-card__pasos .paracas-etiqueta {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: 3px 0 3px 0;
  background: none;
  counter-increment: paso;
  white-space: normal;
}

/* El ordinal, en el mismo tono claro que tenía el chip. */
.paracas-sistema-card__pasos .paracas-etiqueta::before {
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  background: var(--paracas-surface-alt);
  border-radius: 50%;
  content: counter(paso);
  font-size: 0.6875rem;
  font-weight: 800;
}

/* El hilo: un tramo por paso, desde el centro de su ordinal hacia abajo. El
   último no lo lleva, porque no hay paso siguiente al que unirse. */
.paracas-sistema-card__pasos .paracas-etiqueta::after {
  position: absolute;
  inset-block: 50% -50%;
  inset-inline-start: 10px;
  inline-size: 2px;
  background: var(--paracas-surface-alt);
  content: '';
}

.paracas-sistema-card__pasos .paracas-etiqueta:last-child::after { content: none; }

/* Con secuencia, la flecha ya no es lo que empuja hacia abajo. */
.paracas-sistema-card__secuencia ~ .paracas-sistema-card__flecha {
  margin-block-start: var(--space-1);
}

.paracas-sistema-card__flecha {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block-start: auto;
  background: var(--paracas-azul);
  border-radius: 50%;
  color: var(--color-texto-invertido);
  align-self: flex-end;
  transition: background-color var(--duracion) var(--curva);
}

.paracas-sistema-card:hover .paracas-sistema-card__flecha {
  background: var(--paracas-azul-texto);
}

/* La píldora tiene que aguantar una etiqueta larga sin partir la card: crece a
   dos líneas y la card la acompaña. `min-block-size`, nunca `block-size` — con
   altura fija, la segunda línea se salía por debajo. */
/* EL USO ES UN DATO, NO UNA INSIGNIA.

   Era una píldora de fondo lavado con el texto dentro en versalita apretada, y
   ese conjunto —caja redonda, color pastel, mayúsculas con tracking— es el
   adorno de interfaz por defecto, no el lenguaje de este sitio. El tema ya tiene
   su forma de decir a qué categoría pertenece una card y no lleva caja: es
   `.paracas-card__familia`, el antetítulo azul de las cards de producto y de
   consejo. Este se pone el mismo traje.

   #00669e sobre blanco da 6,19, y esto es texto de 12 px. */
.paracas-sistema-card__uso {
  color: var(--color-enlace);
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  font-weight: 800;
  text-transform: uppercase;
}

/* LA CAJA, SOLO CUANDO SOSTIENE UN COLOR. La pide la banda de la portada, que
   tiñe cada card con el tono de madera de su categoría: ahí el fondo es el dato
   y necesita una forma donde vivir. El marcado la marca —solo la emite quien
   pasa `tono`— para que un cambio de estilo no tenga que adivinarlo del `style`
   en línea.

   La píldora tiene que aguantar una etiqueta larga sin partir la card: crece a
   dos líneas y la card la acompaña. `min-block-size`, nunca `block-size` — con
   altura fija, la segunda línea se salía por debajo. */
.paracas-sistema-card__uso--pildora {
  /* TODAS DEL MISMO ANCHO, diga lo que diga. Medían lo que su texto, y en la
     banda de la portada «INTERIORES», «EXTERIOR» y «PISOS» eran tres cajas de
     tres tamaños en tres cards iguales. 8,75 rem dejan holgura a la más larga;
     una más larga todavía parte a dos líneas centradas, no ensancha la caja. */
  inline-size: 8.75rem;
  justify-content: center;
  min-block-size: 32px;
  block-size: auto;
  padding-block: 6px;
  padding-inline: var(--space-3);
  border-radius: var(--radio-pill);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------------------
   La card de sistema en móvil: fila con miniatura

   Cuatro cards de 300 px en columna eran 1250 px de banda para elegir entre
   cuatro cosas. Aquí la card se tumba: miniatura cuadrada a la izquierda y
   texto a la derecha, que es la forma de un resultado de búsqueda en un
   teléfono y la que menos alto ocupa por dato mostrado.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .paracas-sistema-card {
    flex-direction: row;
    align-items: stretch;
  }

  /* La franja del tono deja de rematar el borde superior y pasa al lateral:
     arriba ya no hay borde libre, lo ocupa la miniatura. */
  .paracas-sistema-card::before {
    inset-block: 0;
    inset-inline: 0 auto;
    inline-size: 4px;
    block-size: auto;
  }

  .paracas-sistema-card__foto {
    flex: 0 0 96px;
    inline-size: 96px;
    block-size: auto;
    margin-inline-start: 4px;
  }

  .paracas-sistema-card__cuerpo {
    gap: var(--space-2);
    justify-content: center;
    padding: var(--space-3) var(--space-4);
  }

  .paracas-sistema-card__uso {
    min-block-size: 0;
    padding-block: 3px;
    padding-inline: var(--space-2);
    font-size: 0.625rem;
  }

  /* El mismo ancho para todas también aquí, a la medida de la letra de móvil. */
  .paracas-sistema-card__uso--pildora { inline-size: 6.5rem; }

  .paracas-sistema-card h3 { font-size: var(--t-h3); }

  .paracas-sistema-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: var(--t-small);
  }

  /* Los chips no salen: cinco en 250 px de ancho útil son tres filas, y
     devuelven el alto que veníamos a quitar. La secuencia entera está a un
     toque, en la página de Sistemas. */
  .paracas-sistema-card__secuencia { display: none; }

  /* La flecha se queda, pero pequeña y en el centro vertical: es el gesto que
     dice que la card lleva a algún sitio. */
  .paracas-sistema-card__flecha {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--space-3);
    inline-size: 28px;
    block-size: 28px;
    margin: 0;
    translate: 0 -50%;
  }

  .paracas-sistema-card__cuerpo { padding-inline-end: 46px; }
}

/* ===========================================================================
   Los dos bloques a dos columnas de la portada
   ======================================================================== */
.paracas-duo {
  display: grid;
  gap: var(--space-6);
  align-items: stretch;
}

.paracas-duo--5-7 { grid-template-columns: 5fr 7fr; }
.paracas-duo--7-5 { grid-template-columns: 7fr 5fr; }

.paracas-duo__foto {
  min-block-size: 340px;
  border-radius: var(--radio-l);
}

.paracas-duo__caja {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-fondo-card);
  border-radius: var(--radio-l);
}

/* El encuadre lo elige el editor (paracas_foco()): en una franja estrecha el
   centro de la foto puede no ser donde está la persona. */
.paracas-duo__foto > img { object-position: var(--foto-foco, 50%) 50%; }

.paracas-duo__caja--plana { padding-inline: 0; background: none; }

.paracas-duo__caja p { font-size: 1.125rem; }

/* Los botones del bloque del Club, en fila; bajan uno bajo otro si no caben. */
.paracas-duo__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* El Perú con un punto por tienda (paracas_pv_constelacion()). Es un dibujo
   del listado real, no un mapa: el mapa está en el localizador. */
.paracas-constelacion {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radio-l);
  background: var(--color-fondo-suave);
}

.paracas-peru {
  inline-size: 100%;
  max-block-size: 420px;
}

.paracas-peru__deps path {
  fill: var(--paracas-surface-alt);
  stroke: var(--color-fondo);
  stroke-width: 6;
  stroke-linejoin: round;
}

.paracas-peru__puntos circle {
  fill: var(--paracas-azul);
  fill-opacity: 0.72;
}

@media (max-width: 900px) {
  /* La imagen sube: en todo módulo a dos columnas, la foto pasa arriba.
     TODOS MENOS EL CLUB. Ese se queda en dos columnas a cualquier anchura: es
     una decisión de diseño, no un descuido, y por eso --5-7 salió de esta
     regla. El del mapa sigue colapsando. */
  .paracas-duo--7-5 { grid-template-columns: 1fr; }
  .paracas-duo--7-5 .paracas-constelacion { order: -1; }
  .paracas-peru { max-block-size: 320px; }

  .paracas-hero__conector { --conector-regla: 48px; }
}

@media (max-width: 640px) {
  /* ------------------------------------------------------------------
     El pie en un teléfono medía ~910 px, porque por debajo de 900 lo único
     que cambiaba era el número de columnas: ni una fuente, ni un margen, ni
     el hueco de 32 px entre columnas se movían.

     Se agrupa, se aprieta y se reducen las fuentes. Lo que NO se toca son
     los 44 px de área táctil: es el suelo de accesibilidad del proyecto —el
     target trabaja con guantes— y los 440 px que suman los diez enlaces se
     recuperan poniéndolos en dos columnas, no encogiendo el objetivo.
     ------------------------------------------------------------------ */
  .paracas-pie {
    margin-block-start: calc(var(--space-8) + var(--arco-alto-l));
    padding-block: var(--space-7) var(--space-6);
  }

  .paracas-pie__interior {
    gap: var(--space-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* La marca cruza las dos columnas; los tres menús se reparten debajo. */
  .paracas-pie__marca { grid-column: 1 / -1; }

  .paracas-pie__claim {
    max-inline-size: none;
    font-size: var(--t-small);
  }

  .paracas-pie__lista {
    gap: var(--space-1);
    margin-block-start: var(--space-2);
  }

  .paracas-pie__lista a { font-size: var(--t-small); }

  /* -------------------------------------------------------------------------
     El Club, en dos columnas también aquí

     Nunca colapsa, así que a esta anchura hay que repartir distinto: la foto se
     estrecha a franja y el texto se lleva el resto. Con 5fr/7fr el párrafo caía
     en una columna de 260 px; con 4fr/8fr gana unos 60, que es la diferencia
     entre cinco líneas y ocho.

     Y el min-block-size de la foto baja: 340 px en una columna de 150 dejaba
     una franja altísima al lado de un texto que mide la mitad.
     ---------------------------------------------------------------------- */
  .paracas-duo--5-7 {
    gap: var(--space-4);
    grid-template-columns: 4fr 8fr;
  }

  .paracas-duo--5-7 .paracas-duo__foto { min-block-size: 0; }

  .paracas-duo--5-7 .paracas-duo__caja {
    padding: var(--space-5);
  }

  .paracas-duo--5-7 .paracas-duo__caja p { font-size: var(--t-body); }

  /* Los dos botones en una columna de ~180 px. El tamaño NO baja —los 20 px
     son los que dan el contraste AA, ver «Botones»—, así que se apilan a todo
     el ancho y, si el texto parte, parte centrado y con su interlineado: con
     `line-height: 1` y alineado a la izquierda, «Únete por WhatsApp» se
     montaba sobre el borde de la píldora. */
  .paracas-duo__botones {
    flex-direction: column;
    justify-self: stretch;
  }

  .paracas-duo__botones .paracas-btn {
    padding: var(--space-2) var(--space-4);
    line-height: 1.15;
    text-align: center;
  }

  .paracas-pie__barra {
    gap: var(--space-2);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    font-size: var(--t-micro);
  }

  .paracas-rejilla--sistemas { grid-template-columns: 1fr; }
  /* En móvil el arco solo vuela 40 px, así que el mismo -40% dejaba la píldora
     a 3 px de la curva. Con -30% quedan ~14. Medido, no calculado. */
  /* Los dos tokens del sello NO se redefinen aquí, sino en tokens.css, junto a
     la reducción del arco: la banda es el PADRE del sello y necesita leerlos
     para su padding, y una custom property declarada en el hijo no sube. Y el
     alto del logo sale de --sello-alto, así que tampoco hay regla aquí. */
  .paracas-hero__conector { font-size: 1.125rem; letter-spacing: 0.18em; }
}

/* ===========================================================================
   Ficha — las piezas que faltaban
   ======================================================================== */
.paracas-ficha__eyebrow .paracas-etiqueta {
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.paracas-ficha__desc { font-size: var(--t-intro); }

.paracas-eyebrow--suelto {
  display: block;
  padding: 0;
  margin-block-end: var(--space-3);
  background: none;
  color: var(--color-enlace);
}

.paracas-galeria__marco {
  overflow: clip;
  background: var(--color-fondo-suave);
  border-radius: var(--radio-l);
}

.paracas-galeria__caption {
  position: relative;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-fondo-card);
  color: var(--color-enlace);
  font-size: var(--t-mini);
  font-weight: 700;
}

/* La secuencia de la ficha es más compacta que la de la página de sistemas:
   aquí solo se sitúa el producto, no se explica el sistema entero. */
.paracas-pasos--ficha {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-6);
}

.paracas-pasos--ficha .paracas-paso {
  gap: var(--space-2);
  padding: var(--space-4);
  border: 2px solid transparent;
  border-radius: var(--radio-12);
  background: var(--color-fondo-card);
}

.paracas-pasos--ficha .paracas-paso__n {
  inline-size: 36px;
  block-size: 36px;
  background: var(--color-fondo);
}

.paracas-pasos--ficha .paracas-paso__nombre {
  font-size: 0.9375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* El paso de ESTE producto, invertido.
   La especificidad va con el contenedor a propósito: `.paracas-paso--activo` a
   secas (0,1,0) perdía contra `.paracas-pasos--ficha .paracas-paso` (0,2,0), así
   que el fondo azul no llegaba nunca y el texto blanco se quedaba sobre el azul
   lavado. Medido: ratio 1,12 — ilegible. */
.paracas-pasos .paracas-paso--activo {
  border-color: var(--paracas-azul);

  /* Azul hondo por lo mismo que el pie: el nombre del paso va a 15 px, y blanco
     sobre el azul de marca da 4,16. Sobre #0A2E45 da 14,1, y el borde en azul
     de marca conserva el acento. */
  background: var(--paracas-azul-hondo);
  color: var(--color-texto-invertido);
}

.paracas-pasos .paracas-paso--activo .paracas-paso__n {
  background: var(--color-fondo);
  color: var(--color-enlace);
}

/* ===========================================================================
   Mini-card de complementario
   ======================================================================== */
.paracas-rejilla--mini {
  gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.paracas-mini {
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: var(--color-fondo-card);
  border-radius: var(--radio-l);
  color: inherit;
  text-decoration: none;
}

.paracas-mini__art {
  display: grid;
  block-size: 200px;
  aspect-ratio: auto;
  background: var(--color-fondo);
  --media-pad: var(--space-4);
}

.paracas-mini__cuerpo {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.paracas-mini__titulo {
  font-size: 1.25rem;
  font-weight: var(--peso-titular);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: var(--leading-titular);
}

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

@media (max-width: 640px) {
  .paracas-rejilla--mini { grid-template-columns: 1fr; }
  .paracas-galeria__principal { block-size: 320px; }
}

/* ===========================================================================
   Preguntas frecuentes

   <details>/<summary>: plegado, teclado y lector de pantalla los da el
   navegador. Reimplementarlo con aria-expanded es escribir peor lo que ya
   funciona.
   ======================================================================== */
/* EL TOPE DE LECTURA LO LLEVA LA RESPUESTA, NO LA CAJA.

   Con `max-inline-size: 82ch` en el bloque entero, las preguntas se cortaban 250
   px antes que el contenido de encima —medido en el índice de sistemas: las
   cards llegaban a 1328 y el FAQ paraba en 1077—, y eso se lee como un bloque
   descolocado, no como una columna de lectura.

   Los items se alinean con lo que tienen encima y el texto conserva su medida:
   el tope baja a la respuesta, que es la única prosa larga que hay aquí. */
.paracas-faq {
  display: grid;
  gap: var(--space-2);
}

.paracas-faq__item {
  padding: 14px var(--space-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
}

.paracas-faq__pregunta {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--tactil);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.paracas-faq__pregunta::-webkit-details-marker { display: none; }

.paracas-faq__item[open] .paracas-faq__pregunta { color: var(--color-enlace); }

.paracas-faq__signo {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  background: var(--paracas-azul);
  border-radius: 50%;
  color: var(--color-texto-invertido);

  transition: rotate var(--duracion) var(--curva),
              background-color var(--duracion) var(--curva);
}

/*
 * El signo gira media vuelta al abrir. El glifo sigue cambiando con
 * display —el + y el − son dos elementos, y así se quedan—, pero el giro tapa
 * el intercambio: sin él el símbolo saltaba en seco, que es justo lo que el
 * ícono del catálogo lleva evitando desde siempre con su rotate.
 */
.paracas-faq__item[open] .paracas-faq__signo { rotate: 180deg; }

.paracas-faq__pregunta:hover .paracas-faq__signo {
  background: var(--paracas-azul-texto);
}

.paracas-faq__menos,
.paracas-faq__item[open] .paracas-faq__mas { display: none; }
.paracas-faq__item[open] .paracas-faq__menos { display: block; }

.paracas-faq__respuesta {
  max-inline-size: 82ch;
  margin-block-start: var(--space-2);
  font-size: 0.9375rem;
}

/* Párrafos y listas de la respuesta (paracas_respuesta_bloques()). */
.paracas-faq__respuesta > * + * { margin-block-start: var(--space-2); }
.paracas-faq__respuesta ul { padding-inline-start: 1.25em; }
.paracas-faq__respuesta li + li { margin-block-start: var(--space-1); }

@media (max-width: 640px) {
  .paracas-cierre__interior { display: block; }
  .paracas-cierre__botones { margin-block-start: var(--space-6); }
}

/* ===========================================================================
   Microinteracciones

   150 ms es el valor de los estados en el material aprobado. Lo que no estaba
   decidido —hover de cards, zoom de imagen— va marcado.

   LA REGLA QUE NO SE NEGOCIA: el zoom va sobre la <img>, NUNCA sobre su caja.
   La caja tiene altura fija y overflow: clip; tocarle tamaño, padding o
   aspect-ratio al pasar el ratón entra en la trampa que en el proyecto hermano
   se pagó cuatro veces, cuando una tarjeta que debía medir 214 px midió 3000.
   ======================================================================== */

/* CON LA PROPIEDAD `scale`, NO CON `transform`. micro.js mueve el envase con
   el cursor y animar.js lo hace caer a su sitio, los dos con `transform` en
   línea: un `transform: scale()` aquí lo pisarían y el zoom desaparecería sin
   error. `scale` es otra propiedad y se suma. */
.paracas-media > img,
.paracas-foto > img {
  transition: scale 320ms var(--curva);
}

.paracas-card:hover .paracas-card__art > img,
.paracas-mini:hover .paracas-mini__art > img,
.paracas-sistema-card:hover .paracas-sistema-card__foto > img,
.paracas-cat:hover .paracas-cat__foto > img,
.paracas-galeria__mini:hover > img {
  scale: 1.04;
}

/* Card de producto: la sombra alta la propone E1.4 §6. */
.paracas-card,
.paracas-mini,
.paracas-cat,
.paracas-sistema-card {
  transition: box-shadow var(--duracion) var(--curva),
              transform var(--duracion) var(--curva),
              background-color var(--duracion) var(--curva),
              scale var(--duracion) var(--curva);
}

.paracas-card:hover,
.paracas-mini:hover,
.paracas-sistema-card:hover {
  box-shadow: var(--sombra-alta);
  transform: translateY(-2px);
}

/*
 * Card de categoría: el cuerpo se tiñe con SU tono de madera. El tono ya es
 * dato —sale del campo de la landing y lo pinta el chip de veta—, así que la
 * interacción no inventa un color: usa el que la categoría ya tiene.
 *
 * Al 22 % sobre el azul lavado sigue siendo un fondo claro, así que la tinta del
 * título y el azul de la meta siguen cumpliendo AA.
 */
.paracas-cat:hover {
  box-shadow: var(--sombra-alta);
}

/* Una sola declaración, y el arco la sigue. */
.paracas-cat:hover .paracas-cat__cuerpo {
  --superficie: color-mix(in srgb, var(--cat-tono, transparent) 22%, var(--color-fondo-card));
}

.paracas-cat__flecha {
  transition: background-color var(--duracion) var(--curva);
}

.paracas-cat:hover .paracas-cat__flecha {
  background: var(--paracas-azul-texto);
}

/* Chips: borde azul y texto en tinta. Es el hover del UI-Kit. */
.paracas-chip {
  transition: border-color var(--duracion) var(--curva),
              background-color var(--duracion) var(--curva),
              color var(--duracion) var(--curva),
              scale var(--duracion) var(--curva);
}

.paracas-chip:hover {
  border-color: var(--paracas-azul);
  color: var(--color-texto);
}

.paracas-chip[aria-pressed='true']:hover,
.paracas-chip[aria-selected='true']:hover {
  background: var(--paracas-azul-texto);
  border-color: var(--paracas-azul-texto);
  color: var(--color-texto-invertido);
}

/* La fila de descarga aclara su fondo. */
.paracas-descarga {
  transition: background-color var(--duracion) var(--curva);
}

.paracas-descarga:hover {
  background: color-mix(in srgb, var(--color-fondo) 8%, var(--paracas-azul-hondo));
}

/* Enlaces de texto: el hover del canvas.

   La transición no estaba y el color saltaba de golpe: es el único hover del
   tema que lo hacía. Solo el color — el subrayado no se anima y no debe
   intentarlo. */
.paracas-prosa a,
.paracas-migas a,
.paracas-lista-resultados a,
.paracas-descargas__enlace {
  transition: color var(--duracion) var(--curva);
}

.paracas-prosa a:hover,
.paracas-migas a:hover,
.paracas-lista-resultados a:hover,
.paracas-descargas__enlace:hover {
  color: var(--paracas-azul-hondo);
  text-decoration: underline;
}

.paracas-enlace-flecha .paracas-icono,
.paracas-btn .paracas-icono {
  transition: transform var(--duracion) var(--curva);
}

.paracas-enlace-flecha:hover .paracas-icono { transform: translateX(3px); }

/*
 * Y EL MISMO GESTO EN LOS BOTONES, que tenían la transición declarada arriba
 * —la regla los nombra a los dos— y ningún selector que la disparara. Un icono
 * dentro de un botón es siempre una flecha de «ir a»: que acompañe.
 */
.paracas-btn:hover .paracas-icono { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   La pulsación

   EN TODO EL TEMA NO HABÍA UNA SOLA REGLA :active. Se podía pulsar cualquier
   botón o cualquier card y no pasaba nada hasta que cargaba la página
   siguiente, que en local es inmediato y en un móvil con 3G no lo es.

   `scale` y no `transform`, a propósito: las cards ya usan `transform` para el
   levantamiento del hover y las fotos para el zoom. Como propiedad individual,
   la escala se compone con ellos en vez de pisarlos.

   OJO SI SE AÑADE OTRA: `scale` NO se declara aquí, sino que se ha añadido a la
   `transition` que cada componente ya tenía, más arriba en este archivo. Una
   segunda declaración de `transition` no se suma a la primera, LA SUSTITUYE —es
   una propiedad abreviada—, y habría dejado a las cards sin la transición de
   sombra y levantamiento sin un solo aviso.
--------------------------------------------------------------------------- */
.paracas-btn:active,
.paracas-chip:active { scale: 0.97; }

/* Las cards son superficies grandes: el mismo 0,97 en una card de 300 px se ve
   como un salto. 0,99 se nota y no llama la atención. */
.paracas-card:active,
.paracas-mini:active,
.paracas-cat:active,
.paracas-sistema-card:active { scale: 0.99; }

/* ===========================================================================
   Entrada de secciones

   El estado de partida lo pone assets/js/revelar.js, no el CSS: SIN JAVASCRIPT
   TODO SE VE. El observador solo quita el estado, nunca lo pone.
   ======================================================================== */
/* La entrada de las secciones la hace assets/js/animar.js, por hijos y con un
   retardo entre ellos. Aquí había un `opacity: 0` con su transición, y era el
   único sitio del tema donde la hoja escondía algo: si el observador no
   disparaba, la sección no aparecía nunca. Ahora el estado de partida lo pone
   el JavaScript, así que sin él la página se ve entera. */

/* La bajada de la card de categoría: solo donde la foto se encoge y el texto
   tiene que sostener la card. Dos líneas y corta. */
.paracas-cat__bajada { display: none; }

@media (max-width: 900px) {
  .paracas-cat__bajada {
    display: -webkit-box;
    overflow: hidden;
    margin-block-start: var(--space-1);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--color-texto);
    font-size: var(--t-small);
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
  }
}

/* ---------------------------------------------------------------------------
   El aviso de cookies (template-parts/component/consentimiento.php)

   Abajo a la izquierda y no a todo el ancho: no tapa el contenido ni el
   flotante de WhatsApp, que va a la derecha. Por encima de él en el eje z,
   porque en un teléfono estrecho los dos se tocan y el aviso es lo que hay
   que contestar. En móvil ocupa el ancho con su margen.
--------------------------------------------------------------------------- */
.paracas-consentimiento {
  position: fixed;
  inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  inset-inline-start: calc(var(--space-4) + env(safe-area-inset-left, 0px));
  z-index: calc(var(--z-flotante) + 1);
  inline-size: min(30rem, calc(100vw - var(--space-4) * 2));
  max-block-size: calc(100dvh - var(--space-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-l);
  background: var(--color-fondo);
  color: var(--color-texto);
  box-shadow: var(--sombra-alta);
}

/* El `display` de arriba pisa el `hidden` del navegador. */
.paracas-consentimiento[hidden],
.paracas-consentimiento__opciones[hidden],
.paracas-consentimiento [hidden] {
  display: none;
}

.paracas-consentimiento__interior {
  display: grid;
  gap: var(--space-4);
}

.paracas-consentimiento__titulo {
  margin: 0;
  font-size: var(--t-h3);
  line-height: 1.2;
}

/* El foco llega al título por programa, al reabrir el aviso: el anillo solo
   cuando viene del teclado. */
.paracas-consentimiento__titulo:focus {
  outline: none;
}

.paracas-consentimiento__titulo:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 4px;
}

.paracas-consentimiento__texto {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
}

.paracas-consentimiento__texto a {
  color: var(--color-enlace);
  font-weight: 700;
}

.paracas-consentimiento__opciones {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) 0 0;
  border: 0;
  border-block-start: 1px solid var(--color-borde-fuerte);
}

.paracas-consentimiento__opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
}

.paracas-consentimiento__opcion input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0;
  accent-color: var(--paracas-azul);
}

.paracas-consentimiento__opcion label {
  font-size: var(--t-small);
  font-weight: 700;
}

.paracas-consentimiento__desc {
  grid-column: 2;
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--t-micro);
  line-height: 1.45;
}

.paracas-consentimiento__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Los botones del tema miden 44 px de alto por área táctil, y eso se queda.
   Lo que baja es el relleno lateral, para que Rechazar y Aceptar quepan en una
   fila a 30rem. */
.paracas-consentimiento__acciones .paracas-btn {
  flex: 1 1 auto;
  padding-inline: var(--space-4);
  font-size: var(--t-small);
}

/* «Preferencias de cookies», en la barra del pie. Es un botón —abre el aviso,
   no navega— pero se lee como el resto de la barra. */
.paracas-pie__cookies {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}