/* ===========================================================================
   Paracas: dispositivos gráficos

   El arco, la topografía, las vetas y LA CAJA DE IMAGEN, que es la pieza que
   más cara ha salido en el proyecto hermano.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   El arco

   Se ancla a -1px y no a 0: sin ese píxel de solape, un redondeo subpíxel deja
   una línea del color de abajo asomando entre la foto y el arco.
--------------------------------------------------------------------------- */
.paracas-arco {
  position: absolute;
  inset-inline: 0;
  inline-size: 100%;
  pointer-events: none;

  /* La cadena: manda lo que ponga un ancestro, luego el color con el que se
     imprimió el arco, y por último el color heredado. */
  color: var(--arco-color, var(--arco-propio, currentColor));
  transition: color var(--duracion) var(--curva);
}

.paracas-arco--s { block-size: var(--arco-alto-s); }
.paracas-arco--m { block-size: var(--arco-alto-m); }
.paracas-arco--l { block-size: var(--arco-alto-l); }

.paracas-arco--top.paracas-arco--s { inset-block-start: calc(var(--arco-alto-s) * -1); }
.paracas-arco--top.paracas-arco--m { inset-block-start: calc(var(--arco-alto-m) * -1); }
.paracas-arco--top.paracas-arco--l { inset-block-start: calc(var(--arco-alto-l) * -1); }

.paracas-arco--bottom { inset-block-end: -1px; }

/* ---------------------------------------------------------------------------
   La topografía.

   No es un mosaico que se repite: es una figura grande a `cover`. Un patrón
   de 380 px repetido delata la costura en cuanto la banda es ancha, y además
   contradice la referencia, donde ninguna curva se repite.
--------------------------------------------------------------------------- */
/* El color va en una variable propia para que un componente pueda cambiarlo sin
   tocar la imagen. El pie lo necesita: es azul HONDO, no azul de marca, porque
   su texto es pequeño y sobre el azul de marca daba 4,16. */
.paracas-topo {
  position: relative;
  background-color: var(--topo-fondo, var(--color-fondo-marca));
  isolation: isolate;
}

/* EL PATRÓN AHORA SE INCRUSTA, y con eso se cae el argumento que había escrito
   aquí: que 34 KB por cuatro bandas eran 136 KB de HTML para decoración. Sigue
   siendo verdad, y por eso lo que se incrusta no es aquel archivo sino
   `topo-ligero.svg`: mismo paisaje, 26 trazos en vez de 48 y 8,8 KB.

   Lo que compra el cambio es lo único que una imagen de fondo no puede dar:
   ALCANZAR CADA TRAZO. Sin eso el patrón solo puede aparecer; con eso se
   dibuja, que es lo que se pedía.

   El color y la opacidad los pone la banda y no el archivo —el pie es azul
   hondo y el hero azul de marca—, así que el SVG llega con `currentColor` y sin
   `stroke-opacity` cocido. */
.paracas-topo__capa {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: clip;
  color: var(--topo-trazo, currentColor);
  opacity: var(--topo-opacidad, 0.1);
  pointer-events: none;
}

.paracas-topo__svg {
  inline-size: 100%;
  block-size: 100%;
}

/* ---------------------------------------------------------------------------
   La veta: el tono plano debajo, las curvas de nivel encima.

   Nada de mix-blend-mode. El trazo lleva su propio color —tinta sobre los tonos
   claros, blanco sobre Sapelli— y se atenúa con opacidad. Multiply sobre una
   textura densa era justo lo que ensuciaba el chip.

   El SVG se dibuja a mayor tamaño que la caja y se desplaza: así cada pieza
   enseña un recorte distinto de su figura.
--------------------------------------------------------------------------- */
.paracas-veta {
  position: relative;
  display: block;
  overflow: clip;
  border-radius: var(--radio-s);
  /* El color lo pone --veta-fondo, que escribe paracas_veta() en el atributo
     style. Ahí va la VARIABLE y no el `background`: así una hoja puede
     retintarla. Un `background` en línea no habría manera de pisarlo. */
  background: var(--veta-fondo, var(--paracas-surface-alt));

  --veta-opacidad: 0.16;
  --veta-zoom: 100%;
}

.paracas-veta__svg {
  position: absolute;
  inset-block-start: var(--veta-y, 0);
  inset-inline-start: var(--veta-x, 0);
  inline-size: calc(100% + var(--veta-zoom));
  block-size: calc(100% + var(--veta-zoom));

  /* Sin esto el reset de base.css —:where(svg){max-inline-size:100%}— recorta
     el dibujo a la caja y se pierde la mitad. Medido: 158 px de ancho donde
     tenían que ser 316, mientras el alto sí llegaba a 300. */
  max-inline-size: none;

  opacity: var(--veta-opacidad);
}

/* TRANSPARENTE: sin tono, la veta sola en celeste. El color va en el <svg> y no
   en el envoltorio porque paracas_veta() escribe `color` en línea sobre el
   span, y eso no hay regla de hoja que lo pise; el hijo sí se puede teñir.
   Más opaca que el 16 % general, que sobre blanco y en celeste no se veía. */
.paracas-veta--transparente {
  --veta-opacidad: 0.6;
}

.paracas-veta--transparente .paracas-veta__svg {
  color: var(--paracas-celeste);
}

/* Sobre el azul de marca el trazo va en blanco y más tenue, como la
   referencia: blanco al 7 %, con crestas al 11 %. */
.paracas-topo > .paracas-veta,
.paracas-veta--sobre-azul {
  --veta-opacidad: 0.10;
}

/* El trazo lo dibuja assets/js/animar.js, escalonado. Antes había aquí siete
   reglas de `nth-of-type` con los retardos escritos a mano; un `stagger` de
   GSAP los reparte solo y se adapta al número de trazos, que no es el mismo en
   las seis figuras. */

/* ===========================================================================
   LA CAJA DE IMAGEN

   Aquí está la trampa que en el proyecto hermano se pagó CUATRO veces, y un
   catálogo de pinturas tiene exactamente el mismo ingrediente: rejillas de
   tarjetas con foto de envase.

   `block-size: 100%` sobre una imagen cuyo envoltorio tiene altura indefinida
   resuelve a `auto`. La imagen se dibuja a su tamaño natural y revienta la
   maqueta EN SILENCIO, sin un solo error en consola. Medido allí: la tarjeta de
   producto debía medir 214 px y medía 3000.

   Y `aspect-ratio` en el envoltorio NO BASTA —esa fue la lección de la cuarta
   vez—: la proporción cede ante el tamaño mínimo automático del contenido. La
   altura acaba dependiendo de la imagen, la imagen de la altura, y el
   porcentaje no encuentra nada definido contra lo que resolver.

   Lo que sí funciona es SACAR LA IMAGEN DEL FLUJO.
   ======================================================================== */
.paracas-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--media-ratio, 1 / 1);
  overflow: clip;
  isolation: isolate;

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

.paracas-media > img {
  position: absolute;              /* rompe la circularidad */
  z-index: var(--z-contenido);
  inset-block-start: var(--media-pad);

  /* Insets negativos SIMÉTRICOS, y no 0, porque UNA MARGEN AUTOMÁTICA NUNCA ES
     NEGATIVA: si la imagen sale más ancha que su caja, margin-inline: auto no
     la centra — el navegador ancla el borde izquierdo y suelta todo el sobrante
     a la derecha. Ensanchar el rectángulo de posicionamiento a los dos lados lo
     arregla. */
  inset-inline: -100%;
  margin-inline: auto;

  /* Los envases se igualan POR ALTO, no por ancho. Medido: por alto varían
     1,012×; por ancho, 1,44×. El sobrante horizontal es fondo transparente y lo
     recorta el overflow de arriba. */
  block-size: calc(100% - var(--media-pad) * 2);
  inline-size: auto;
  max-inline-size: none;
}

/* Fotografía de ambiente: aquí sí se recorta, porque la foto llena la caja. */
.paracas-foto {
  position: relative;
  overflow: clip;
  background: var(--color-fondo-hondo);
}

/* `> img, > picture > img`: la foto puede venir suelta o dentro de un <picture>
   cuando hay dos recortes. Sin la segunda rama, la del picture se dibujaba a su
   tamaño natural y desbordaba la caja. */
.paracas-foto > img,
.paracas-foto > picture > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* El <picture> es un envoltorio sin caja propia: si no se estira, la imagen de
   dentro resuelve su 100% contra un elemento de altura cero. */
/* ---------------------------------------------------------------------------
   El respiro de las fotos

   VIVÍA EN views/categoria.css, y ahí solo lo cargaban las cuatro landings.
   Al querer usarlo también en la portada no pasaba nada —sin error, sin aviso:
   la hoja sencillamente no está encolada en esa vista—, así que se mudó a la
   hoja compartida. El atributo [data-ken] es lo único que hay que poner.

   Va en @keyframes A PROPÓSITO: el `animation: none !important` de base.css lo
   apaga entero bajo prefers-reduced-motion. Un requestAnimationFrame propio no
   lo cubriría ninguna de las dos redes del tema.

   28 segundos y un 4 % de recorrido: a esa velocidad no se ve moverse, se nota
   que la foto está viva. Cualquier cosa más rápida marea.

   NO LO PONGAS EN LA FOTO DEL HERO DE PORTADA. Esa la anima GSAP con un
   `scale` de entrada, y una animación CSS gana en la cascada a un estilo en
   línea: el bucle se comería la entrada. Sirve para fotos que GSAP no escala.
--------------------------------------------------------------------------- */
@keyframes paracas-respirar {
  from { scale: 1; }
  to { scale: 1.04; }
}

[data-ken] > img {
  animation: paracas-respirar 28s var(--curva) infinite alternate;
}

.paracas-foto > picture {
  display: block;
  block-size: 100%;
}