/*
 * AldeOn — Tratamiento de las tarjetas de precio (fase "precios",
 * 2026-09-07). Compartido por las 6 landings verticales (todas usan
 * las mismas clases .price-card / .price-card--highlight) — NO se usa
 * en index.html, que no tiene tarjetas de plan propias, solo enlaza a
 * la página de cada vertical.
 *
 * Todo aquí es CSS puro (sin JS): el `animation` de la @keyframes
 * corre siempre de fondo pero solo se hace visible con `opacity` al
 * hover — barato, y ya queda cubierto por la regla global de
 * prefers-reduced-motion de effects.css sin nada más que hacer.
 */

.price-card {
  position: relative;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Borde con gradiente animado, solo visible al hover — truco de
   máscara: el pseudo-elemento cubre toda la tarjeta + 2px, y el mask
   con composite "exclude" deja ver únicamente el anillo de 2px. */
.price-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(120deg, var(--home), var(--votes), var(--economy), var(--highlight), var(--home));
  background-size: 300% 300%;
  animation: pricing-border-spin 6s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

@keyframes pricing-border-spin {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 55px -18px rgba(46, 42, 34, 0.28);
}

.price-card:hover::before {
  opacity: 1;
}

/* El plan destacado ya nace elevado -8px (ver price-card--highlight
   en el <style> de cada página) — al hover se suma la misma elevación
   extra que las demás tarjetas, en vez de que el hover general le
   pise el translateY propio y se vea "bajar". */
.price-card--highlight:hover {
  transform: translateY(-14px);
  box-shadow: 0 34px 62px -16px rgba(74, 78, 140, 0.5);
}

/* Halo de fondo en bucle lento y suave, para que el plan recomendado
   destaque sin ser molesto — petición del usuario, 2026-09-07. */
.price-card--highlight {
  position: relative;
  z-index: 1;
}

.price-card--highlight::after {
  content: '';
  position: absolute;
  inset: -26px;
  z-index: -2;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(74, 78, 140, 0.35), transparent 70%);
  animation: pricing-halo-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pricing-halo-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.94); }
  50% { opacity: 0.9; transform: scale(1.05); }
}