/* ==========================================================================
   Ritmo de las muestras de producto
   Carga al final para poder sobreescribir los fondos que definen
   producto.css y atmosfera.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Que las tres muestras no se lean como el mismo bloque repetido
   -------------------------------------------------------------------------- */

.muestra {
  position: relative;
  padding: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  border-radius: clamp(20px, 2.5vw, 30px);
}

/* La del medio invertida en color: parte el ritmo por la mitad y hace que
   el ojo no se deslice de largo. */
.muestra--volteada {
  background: linear-gradient(140deg, var(--violeta-tinta), #322da1 75%, #4a3fc4);
  color: #fff;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.muestra--volteada::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(60% 80% at 72% 35%, #000, transparent 78%);
  pointer-events: none;
}
.muestra--volteada > * { position: relative; z-index: 1; }

.muestra--volteada h3 { color: #fff; }
.muestra--volteada p { color: rgba(255, 255, 255, .82); }
.muestra--volteada .muestra__puntos { color: rgba(255, 255, 255, .86); }
.muestra--volteada .muestra__puntos li::before { background: var(--verde); }
.muestra--volteada .muestra__rotulo {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.muestra--volteada .muestra__rotulo::before { background: var(--verde); }

/* Las claras, con un fondo muy tenue para despegarse del papel */
.muestra:not(.muestra--volteada) {
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-baja);
}

/* La pantalla es una isla clara dentro del bloque violeta: sin esto el
   `color: #fff` del contenedor se hereda y las piezas de la regla quedan
   en blanco sobre blanco. Mismo fallo que ya ocurrio en la portada. */
.muestra--volteada .pantalla,
.muestra--volteada .pantalla * { color: var(--tinta); }
.muestra--volteada .pantalla__chip { color: var(--tinta-suave); }
.muestra--volteada .regla__union { color: var(--tinta-suave); }
.muestra--volteada .regla__marca { color: var(--violeta); }
.muestra--volteada .regla__pieza--valor { color: var(--violeta-hondo); }