/* ==========================================================================
   TRATAMIENTOS — tarjetas de producto con psicología de pricing
   (beneficios con ✓, precio grande, encuadre de valor, ancla tachada
   y caja de retoque como reversión de riesgo).
   ========================================================================== */
.treats { display: grid; gap: 1.3rem; perspective: 1400px; /* contexto del tilt 3D */ }

.treat-card {
  padding: 1.9rem 1.6rem;
  display: flex; flex-direction: column;
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.treat-card:hover { border-color: var(--primario); box-shadow: var(--sombra-alta); }
.treat-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.treat-card__icon {
  width: 48px; height: 48px; border-radius: var(--radio-s);
  display: grid; place-items: center;
  color: var(--primario);
  background: var(--menta);
}
.treat-card__icon svg { width: 24px; height: 24px; }
.treat-card__title { font-size: var(--fs-h3); }
.treat-card__zona { font-size: .78rem; font-weight: 500; color: var(--acento); margin-top: .3rem; }
.treat-card__desc { color: var(--gris); font-size: .88rem; margin-top: .7rem; }

/* ---- Beneficios con check (venden resultados, no características) ---- */
.treat-card__bullets { display: grid; gap: .55rem; margin-top: 1.1rem; flex-grow: 1; }
.treat-card__bullets li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .84rem; color: var(--tinta);
}
.treat-card__bullets svg {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: .15rem;
  color: var(--primario);
}

/* ---- Precio con encuadre de valor ---- */
.treat-card__precio {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .5rem;
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
}
.precio__num { font-family: var(--f-display); font-size: 2.4rem; font-weight: 700; color: var(--tinta); line-height: 1; letter-spacing: -.03em; }
.precio__divisa { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; color: var(--tinta); }
.precio__nota { font-size: .74rem; color: var(--gris-suave); width: 100%; }
.treat-card__frame { font-size: .78rem; font-weight: 600; color: var(--primario); margin-top: .45rem; }
.treat-card__ancla {
  font-size: .74rem; color: var(--gris);
  margin-top: .3rem;
  text-decoration: line-through;
  text-decoration-color: var(--error);
  text-decoration-thickness: 1.5px;
}
.treat-card__retoque {
  margin-top: .8rem; font-size: .78rem; font-weight: 500; color: var(--gris);
  display: flex; align-items: center; gap: .45rem;
  background: var(--menta-2);
  border: 1px dashed var(--linea);
  border-radius: var(--radio-s);
  padding: .55rem .75rem;
}
.treat-card__retoque svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--primario); }
.treat-card .btn { margin-top: 1.2rem; }

/* ---- Tarjeta destacada (ancla visual del funnel) ---- */
.treat-card--star { border: 2px solid var(--primario); box-shadow: var(--sombra-alta); }

@media (min-width: 768px) {
  .treats { grid-template-columns: repeat(3, 1fr); }
}

/* En táctil no hay hover real: evita que la tarjeta quede "levantada" */
@media (hover: none) {
  .treat-card:hover { transform: none; }
}