/* Paquetes de fuego — "mazo de fuego" (pedido de Axel, 17/09/2026). Ver MOTION.md sección 5.
 *
 * Movimientos del catálogo: `hojas-que-se-enderezan` (las cuatro tarjetas llegan en abanico, como una
 * mano de cartas, y se enderezan con el scroll) + `hover-revela-color` (cada tarjeta tiene fuego real
 * de fondo, apagado; al apuntarla un barrido diagonal la enciende a color y arranca su video).
 * Lógica en assets/js/paquetes.js. Se carga después de styles.css y reemplaza su grilla de hairlines:
 * con tarjetas que se mueven, la línea dorada tiene que ser de cada tarjeta.
 */

.packages { overflow-x: clip; } /* las tarjetas entran giradas: sin esto la página tenía scroll horizontal en celular */
.packages__grid {
  position: relative; /* offsetParent de las tarjetas: la entrada mide su distancia al centro */
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem;
  background: none;
}

.package-card {
  position: relative; isolation: isolate; min-height: 31rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--negro-escena-soft);
  border: 1px solid rgba(212, 175, 55, 0.22); border-radius: 0.5rem;
  will-change: transform;
}
.package-card--flagship { background: #1c1913; border-color: rgba(212, 175, 55, 0.4); }

/* --- el fuego de fondo: póster apagado debajo, video a color encima recortado por el barrido --- */
.package-card__medio { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.package-card__medio img, .package-card__medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* apagado = brasa: color bajo y cálido, no gris (en gris el fuego se leía como humo) */
.package-card__poster { filter: grayscale(0.55) sepia(0.45) saturate(1.1) brightness(0.46) contrast(1.08); transform: scale(1.04); transition: transform 1.2s var(--ease-out-expo); }
.package-card__color { position: absolute; inset: 0; clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%); }
.package-card__color video { filter: brightness(0.82) saturate(1.05); }
/* escrim: el texto se lee siempre, con el fuego apagado o encendido */
.package-card__medio::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 13, 13, 0.96) 0%, rgba(13, 13, 13, 0.82) 34%, rgba(13, 13, 13, 0.25) 62%, rgba(13, 13, 13, 0.1) 100%);
}
.package-card.esta-encendida .package-card__poster { transform: scale(1.1); }

.package-card h3 { color: var(--blanco-calido); }
.package-card__comp { color: var(--plateado); font-size: 0.92rem; min-height: 2.6em; }
.package-card__price { font-family: var(--font-display); font-size: 2.3rem; line-height: 1.1; color: var(--dorado); margin-top: 0.4rem; overflow: hidden; }
.package-card__price-num { display: inline-block; }
.package-card__price-unit {
  font-family: var(--font-support); font-size: 0.82rem; font-weight: 400;
  letter-spacing: 0.05em; color: var(--plateado);
}
.package-card .btn, .package-card .btn-fire-wrap { align-self: flex-start; margin-top: 0.6rem; }

.package-card__badge { z-index: 2; }

/* --- Aura Grand: una brasa recorre el borde (se detiene con reduced-motion) --- */
@property --brasa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.package-card--flagship::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--brasa), transparent 0deg, transparent 250deg, rgba(212, 175, 55, 0.9) 320deg, #FFF3D6 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: paquete-brasa 5.5s linear infinite paused;   /* repinta cada cuadro: corre solo con la sección a la vista */
}
.packages.esta-a-la-vista .package-card--flagship::before { animation-play-state: running; }
@keyframes paquete-brasa { to { --brasa: 360deg; } }

@media (max-width: 980px) {
  .packages__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .packages__grid { grid-template-columns: 1fr; gap: 1rem; }
  .package-card { min-height: 22rem; }
}
@media (prefers-reduced-motion: reduce) {
  .package-card--flagship::before { animation: none; background: conic-gradient(from 300deg, transparent 0deg, rgba(212, 175, 55, 0.7) 60deg, transparent 120deg); }
}