/* ===========================================================================
   Paracas: landing de categoría

   Se encola sola en las cuatro landings —inc/enqueue.php ya buscaba este
   archivo desde antes de que existiera— y va después de components.css, así
   que aquí se afina sin pelear especificidad.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   El hero a sangre VIVE EN components.css

   Se mudó cuando el índice de Sistemas pasó a llevar fotografía de fondo: esa
   vista encola views/sistemas.css, no esta hoja, así que las reglas de
   .paracas-hero--sangre no le llegaban. Duplicarlas era garantizar que un día
   dijeran cosas distintas.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   La galería
--------------------------------------------------------------------------- */
.paracas-galeria {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * ALTURA DEFINIDA Y object-fit, nunca `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 y medida cuatro veces.
 */
.paracas-galeria__pieza {
  position: relative;
  block-size: 300px;
  margin: 0;
  border-radius: var(--radio-l);
  overflow: clip;
}

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

/* ---------------------------------------------------------------------------
   El montaje sobre la foto de aplicación: velo y envase
--------------------------------------------------------------------------- */
/*
 * EL VELO. Azul de marca con el topográfico encima, entre la foto y el envase.
 *
 * Es la misma pieza que la banda de sistemas y el pie —.paracas-topo—, así que
 * aquí no se dibuja nada: solo se le cambian las tres variables que expone.
 *
 * EL FONDO VA TRASLÚCIDO Y NO OPACO, que es la diferencia con los otros usos:
 * ahí el topográfico cubre una banda de color y aquí tiene que dejar ver la
 * fotografía por debajo. El 72 % es lo que hace que la escena siga leyéndose y
 * que el envase, que es claro, deje de perderse contra maderas claras.
 *
 * El trazo pasa a blanco y sube de 0,1 a 0,16: sobre una fotografía, el trazo
 * al 10 % del original se lo come el ruido de la imagen.
 */
.paracas-galeria__velo {
  position: absolute;
  inset: 0;
  z-index: var(--z-contenido);
  pointer-events: none;

  --topo-fondo: color-mix(in srgb, var(--paracas-azul) 72%, transparent);
  --topo-trazo: var(--color-texto-invertido);
  --topo-opacidad: 0.16;
}

/*
 * EL ENVASE OCUPA TODO LO QUE PUEDE, Y LO HACE CON UNA SOLA REGLA PARA LOS DOS
 * CASOS, que es lo que la salva de tener modificadores.
 *
 * Aquí caben dos cosas de proporciones opuestas: un bote suelto, que es ALTO
 * —0,85 de ancho por alto—, y el packshot de familia, que es ANCHO —1,9 en
 * exterior y 1,6 en interior—. Dimensionar por ancho dejaba el bote diminuto;
 * dimensionar por alto desbordaría el packshot.
 *
 * La solución es dar a la caja las DOS medidas —casi todo el ancho y el 78 %
 * del alto— y dejar que `object-fit: contain` decida cuál manda en cada caso.
 * El bote sale limitado por alto y el packshot por ancho, y los dos ocupan el
 * máximo posible sin deformarse ni salirse. Sin condiciones y sin una clase
 * más.
 *
 * `object-position: bottom` los apoya en la base en vez de flotarlos en medio.
 */
.paracas-galeria__envase {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline: var(--space-4);

  /* Por encima del velo, que está en --z-contenido. */
  z-index: calc(var(--z-contenido) + 1);
  display: block;
  block-size: 78%;

  /* La sombra va en `filter` y no en `box-shadow` porque el envase es un PNG
     recortado: box-shadow dibujaría la sombra del rectángulo de la caja, no la
     de la silueta del bote. Y en `filter` sigue la silueta también cuando lo
     que hay dentro son seis botes solapados. */
  filter: drop-shadow(0 10px 18px rgb(10 46 69 / 38%));
}

.paracas-galeria__envase img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: bottom center;

  /* El respiro en bucle mueve la FOTO, no el envase: si los dos respiran, el
     bote parece despegarse del fondo. El selector de [data-ken] apunta al hijo
     directo y el envase va dentro de un <span>, así que ya queda fuera; esto lo
     deja escrito para que no se cuele por otra vía. */
  animation: none;
}

.paracas-galeria__pieza figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  background: linear-gradient(to bottom, transparent, rgb(10 46 69 / 78%));
  color: var(--color-texto-invertido);
  font-size: var(--t-small);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   La carta de color de Tintes, en 3 × 3

   Son los nueve de la carta unificada, y en rejilla de tres se leen como el
   impreso. La regla general de components.css —auto-fill de 150 px— los dejaba
   en filas de seis y tres, con un hueco. Solo aquí: la ficha de producto usa la
   misma carta para cantidades que no son nueve.
--------------------------------------------------------------------------- */
.paracas-carta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-inline-size: 840px;
}

/* ---------------------------------------------------------------------------
   Los chips de subcategoría de Interior

   En fila. La regla base de .paracas-filtros es una rejilla, pensada para los
   grupos apilados del rail del catálogo: aquí los chips salían uno por fila y
   a todo el ancho del contenedor.
--------------------------------------------------------------------------- */
.paracas-filtros--subcategorias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------------------
   Los ejemplos de acabado
--------------------------------------------------------------------------- */
/* MÁS PEQUEÑO desde la revisión del 24 de septiembre: a 220 px de alto y a todo
   el ancho, tres fotos de la misma madera ocupaban más que los productos. Las
   columnas son de ancho fijo y no de 1fr, porque ahora hay landings con una o
   dos muestras —Pisos solo tiene brillante— y una muestra sola estirada a todo
   el contenedor sería una banda, no una muestra. */
.paracas-acabados {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, 220px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.paracas-acabado {
  display: grid;
  gap: var(--space-3);
}

.paracas-acabado__muestra {
  block-size: 140px;
  border-radius: var(--radio-l);
  overflow: clip;
}

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

  /* La microinteracción: la muestra se acerca un punto al pasar. Es el mismo
     gesto que ya hace la card de producto, con los mismos tokens. */
  transition: scale var(--duracion) var(--curva);
}

.paracas-acabado:hover .paracas-acabado__muestra img { scale: 1.05; }

.paracas-acabado__nombre {
  color: var(--color-texto);
  font-size: var(--t-body);
  font-weight: var(--peso-titular);
  letter-spacing: var(--tracking-titular);
}

.paracas-acabados__nota {
  margin-block-start: var(--space-5);
  max-inline-size: 62ch;
  color: var(--color-texto-suave);
  font-size: var(--t-small);
}

/* El respiro de las fotos ya no vive aquí: se mudó a decor.css cuando dejó de
   ser exclusivo de las landings. [data-ken] sigue puesto en templates/categoria.php. */

/* ---------------------------------------------------------------------------
   Reflow. Breakpoints del tema: 1200 / 900 / 640.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* El suelo del hero ya no se toca aquí: lo lleva el clamp() de arriba, que a
     900 px da 387 y a 640 se posa en 320. Estos dos escalones —340 y 280— se
     retiraron al arreglarlo, porque pisaban el clamp con un valor menor y
     habrían dejado el hero más bajo en tableta que la cuenta que lo calibra. */
  .paracas-hero__velo {
    padding-block: var(--space-9) var(--space-8);
  }
}

@media (max-width: 640px) {
  /* DOS COLUMNAS, NO UNA. Con tres fotos, la primera fila lleva dos y la
     tercera queda sola a media anchura: es el reparto que el ojo espera de una
     galería, y a foto completa cada pieza costaría una pantalla entera. */
  .paracas-galeria {
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .paracas-galeria__pieza { block-size: 190px; }

  /* Los pies se retiran: en 150 px de ancho ocupaban cuatro líneas y tapaban
     media foto, que es lo contrario de lo que hace un pie. */
  .paracas-galeria__pieza figcaption { display: none; }

  /* Los acabados SIGUEN en tres: son una comparación, y comparar exige verlos
     a la vez. Partirlos en dos filas rompe justo lo que la sección hace. */
  .paracas-acabados {
    gap: var(--space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .paracas-acabado__muestra { block-size: 96px; }

  /* Tres columnas también aquí: a 100 px de ancho la muestra sigue leyéndose,
     y partir la carta en dos rompería el 3 × 3. */
  .paracas-carta { gap: var(--space-2); }
  .paracas-carta__veta { block-size: 96px; }

  /* A 390 px cada muestra deja ~110 px, y «AMARILLO» o «CARAMELO» en
     mayúsculas de 16 px con 16 px de aire por lado no caben: el botón los
     recortaba por la derecha. Medido con medir-anchos.mjs, `texto-cortado`. */
  .paracas-carta__pie { padding-inline: var(--space-2); }
  .paracas-carta__nombre { font-size: var(--t-small); overflow-wrap: anywhere; }
  .paracas-acabado__nombre { font-size: var(--t-small); }
}