/* ==========================================================================
   Precios
   Antes: una caja blanca sola en medio de mucho vacio. Sin tension, sin
   jerarquia, nada que mirar.
   Ahora: el bloque ocupa el ancho y contrapone lo que cuesta empezar (nada)
   con lo que incluye (todo). El contraste ES el argumento.
   ========================================================================== */

.precios {
  position: relative;
  background: linear-gradient(180deg, var(--papel) 0%, #eeedf9 100%);
}

.precios__caja {
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: clamp(20px, 2.5vw, 28px);
  background: var(--papel-alto);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

@media (min-width: 900px) {
  .precios__caja { grid-template-columns: 1.25fr .75fr; }
}

/* --- Lado izquierdo: lo que entra --- */

.precios__contenido { padding: clamp(2rem, 1.5rem + 2vw, 3.2rem); }

.precios__titulo {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  margin-bottom: .7rem;
}

.precios__lista {
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}
@media (min-width: 620px) { .precios__lista { grid-template-columns: 1fr 1fr; } }

.precios__lista li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding-left: 0;
  font-size: .93rem;
  color: var(--tinta-media);
}
.precios__lista li::before { content: none; }

.precios__tick {
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  flex: 0 0 auto;
  margin-top: .1rem;
  border-radius: 50%;
  background: rgba(1, 236, 167, .2);
  color: #04795a;
  font-size: .68rem;
  font-weight: 800;
}

/* --- Lado derecho: el precio, sobre violeta --- */

.precios__accion {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .3rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.2rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: linear-gradient(150deg, var(--violeta-tinta), var(--violeta) 70%, #5b4ae8);
  color: #fff;
  text-align: center;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

/* Trama de puntos, como en el resto de bloques oscuros */
.precios__accion::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(75% 75% at 50% 30%, #000, transparent 72%);
  pointer-events: none;
}
.precios__accion > * { position: relative; z-index: 1; }

.precios__cifra {
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: #fff;
}

.precios__pie {
  color: rgba(255, 255, 255, .78);
  font-size: .9rem;
  margin: .5rem 0 1.6rem;
}

.precios__accion .boton {
  background: #fff;
  color: var(--violeta-hondo);
  width: 100%;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .55);
}
.precios__accion .boton:hover { background: #f1f0ff; }

.precios__letra {
  margin-top: 1rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
}