/* ===========================================================================
   Paracas: ficha de producto

   Se encola sola en las fichas —inc/enqueue.php la busca por el nombre de la
   vista— y va después de components.css.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   La muestra del acabado
   ------------------------------------------------------------------------ */
.paracas-acabados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: 0;
  margin: 0;
  list-style: none;
}

.paracas-acabado {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
}

.paracas-acabado__muestra {
  display: block;
  overflow: clip;
  /* 120 y no 180 desde la revisión del 24 de septiembre: la muestra es una
     referencia del brillo, no la foto principal de la ficha. */
  inline-size: 120px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-l);
}

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

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

.paracas-acabados__nota {
  margin-block-start: var(--space-4);
  color: var(--color-texto-suave);
  font-size: var(--t-small);
}

/* ---------------------------------------------------------------------------
   La carta de color que se enciende

   El fondo lo pone --carta-fondo, que escribe carta.js. Mientras nadie toque
   nada la variable no existe y la sección se ve como cualquier otra.
   ------------------------------------------------------------------------ */
.paracas-carta-zona {
  padding-block: var(--space-7);
  border-radius: var(--radio-l);
  /* Apagada NO se mezcla con nada: mezclar contra `transparent` deja un blanco
     al 82 % de opacidad, que no es lo mismo que el fondo de la página. */
  background: var(--color-fondo);
  transition: background-color var(--duracion) var(--curva);
}

/* Un 18 % de tinte deja el titular y los nombres legibles con cualquiera de los
   veinte colores, incluidos el negro y el blanco. Teñir al 100 % obligaría a
   recalcular el color del texto en cada tono, y eso ya se midió mal una vez. */
.paracas-carta-zona[data-encendida] {
  background: color-mix(in srgb, var(--carta-fondo) 18%, var(--color-fondo));
}

/* El gatillo, la caja y el filete de la muestra se mudaron a components.css el
   día que la carta dejó de ser exclusiva de la ficha: la landing de Tintes usa
   la misma. Aquí solo queda lo que es propio de esta vista. */