/* Tarjetas 3D del inicio: programas que giran + ventajas/pasos que se inclinan.
   Mismos colores y tipografías del sitio. Respeta "reducir movimiento" (js/motion.js). */

/* ── Programas que giran ── */
.flip-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 48px; }
.flip { width: min(100%, 350px); height: 400px; perspective: 1200px; }
.flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2,.8,.2,1);
}
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip-inner { transform: rotateY(180deg); }
}
.flip-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: 34px 30px 28px;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 34px rgba(42,35,30,.10);
}
.flip-front { background: var(--white); border: 1px solid var(--gray-100); align-items: flex-start; }
.flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, var(--primary-dark), var(--primary));
  color: var(--white);
}
.flip-icon {
  width: 68px; height: 68px; border-radius: 20px;
  display: grid; place-items: center; font-size: 2rem;
  background: var(--primary-50); border: 1px solid var(--primary-100);
  margin-bottom: 22px;
}
.flip-num { position: absolute; top: 26px; right: 28px; font-family: var(--font-display); font-size: 2.6rem; color: var(--primary-100); line-height: 1; }
.flip-tag {
  font-size: .7rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--primary-dark); background: var(--primary-50);
  padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: 14px;
}
.flip-front h3 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 auto; color: var(--gray-800); }
.flip-front .flip-price { font-size: .86rem; color: var(--gray-500); margin: 18px 0 14px; }
.flip-back h3 { color: var(--white); font-size: 1.2rem; margin: 0 0 12px; }
.flip-back p { font-size: .93rem; line-height: 1.65; color: rgba(255,255,255,.92); margin: 0 0 auto; }
.flip-back .flip-price { font-weight: 600; font-size: .95rem; margin: 16px 0 14px; color: var(--gold-light); }
.flip-btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .82rem;
  padding: 10px 18px; border-radius: var(--radius-full);
  background: var(--gray-800); color: var(--white); transition: transform .2s, background .2s;
}
.flip-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.flip-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.flip-back .flip-btn { background: rgba(255,255,255,.18); }
.flip-back .flip-btn:hover { background: rgba(255,255,255,.3); }
.flip-link {
  font-weight: 600; font-size: .85rem; color: var(--primary-dark); background: var(--white);
  padding: 10px 18px; border-radius: var(--radius-full); text-decoration: none; transition: transform .2s;
}
.flip-link:hover { transform: translateY(-1px); }
.flip-btn:focus-visible, .flip-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) { .flip { height: 380px; } }

/* ── Ventajas y pasos: inclinación 3D (la maneja js/tarjetas.js) ── */
.tilt-ready { perspective: 900px; }
.tilt-ready .feature-card, .tilt-ready .step-card {
  transform-style: preserve-3d; will-change: transform;
  transition: transform .18s ease-out, box-shadow .3s, border-color .3s;
}
.tilt-ready .feature-card.is-tilting, .tilt-ready .step-card.is-tilting { transition: transform .06s linear; box-shadow: 0 18px 40px rgba(212,100,124,.18); }

/* ── Movimiento autónomo ── */
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes flipPeek {
  0% { transform: rotateY(0) rotateX(0); }
  30% { transform: rotateY(-26deg) rotateX(4deg) translateY(-6px); }
  60% { transform: rotateY(12deg) rotateX(-2deg); }
  80% { transform: rotateY(-5deg); }
  100% { transform: rotateY(0) rotateX(0); }
}
@keyframes iconBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-6deg); } }
@keyframes stepPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,100,124,.35); } 50% { box-shadow: 0 0 0 12px rgba(212,100,124,0); } }
html:not(.reduce-motion) .flip { animation: floaty 6.5s ease-in-out infinite; }
html:not(.reduce-motion) .flip:nth-child(2) { animation-delay: -1.3s; }
html:not(.reduce-motion) .flip:nth-child(3) { animation-delay: -2.6s; }
html:not(.reduce-motion) .flip:nth-child(4) { animation-delay: -3.9s; }
html:not(.reduce-motion) .flip:nth-child(5) { animation-delay: -5.2s; }
html:not(.reduce-motion) .flip:hover, html:not(.reduce-motion) .flip.is-flipped, html:not(.reduce-motion) .flip:focus-within { animation-play-state: paused; }
html:not(.reduce-motion) .flip.peek:not(.is-flipped) .flip-inner { animation: flipPeek 1.4s ease-in-out; }
html:not(.reduce-motion) .flip-icon { animation: iconBob 4.5s ease-in-out infinite; }
html:not(.reduce-motion) .flip:nth-child(even) .flip-icon { animation-delay: -2.2s; }
html:not(.reduce-motion) .feature-icon { animation: iconBob 5s ease-in-out infinite; }
html:not(.reduce-motion) .feature-card:nth-child(even) .feature-icon { animation-delay: -2.5s; }
html:not(.reduce-motion) .step-number { animation: stepPulse 3s ease-in-out infinite; }
html:not(.reduce-motion) .step-card:nth-child(2) .step-number { animation-delay: -1s; }
html:not(.reduce-motion) .step-card:nth-child(3) .step-number { animation-delay: -2s; }

/* Con "reducir movimiento": las tarjetas se cambian con un fundido, sin giro */
html.reduce-motion .flip-inner { transition: none; transform: none !important; }
html.reduce-motion .flip-face { transition: opacity .25s; }
html.reduce-motion .flip-back { transform: none; opacity: 0; pointer-events: none; }
html.reduce-motion .flip.is-flipped .flip-back { opacity: 1; pointer-events: auto; }
html.reduce-motion .flip.is-flipped .flip-front { opacity: 0; pointer-events: none; }
html.reduce-motion .tilt-ready .feature-card, html.reduce-motion .tilt-ready .step-card { transition: none; }