/* =========================
   Benefit Cards - Stagger + Smooth Hover + Fade Out (FIX BUG HOVER)
   ========================= */

.benefit-card{
  background:#ffffff;
  border-radius:26px;
  padding:clamp(22px,3vw,34px);
  box-shadow:0 14px 40px rgba(0,0,0,0.06);
  border:1px solid rgba(29,43,83,0.06);
  width:min(520px,100%);
  height:300px;
  overflow:visible;
  text-align:center;

  opacity:0;
  transform: translateZ(0) translateY(40px);
  will-change: transform, opacity;

  --delay: 0ms;

  /* anti micro-tirón */
  backface-visibility:hidden;
}

/* Entrada */
.benefit-card.reveal{
  animation: cardRevealUp 700ms cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--delay);

  /* ✅ FIX: mientras anima NO responde al mouse */
  pointer-events:none;
}

@keyframes cardRevealUp{
  from{ opacity:0; transform: translateZ(0) translateY(40px); }
  to  { opacity:1; transform: translateZ(0) translateY(0); }
}

/* Salida suave */
.benefit-card.exit{
  animation: cardExit 520ms cubic-bezier(.22,1,.36,1) forwards;

  /* ✅ FIX: mientras sale NO responde al mouse */
  pointer-events:none;
}

@keyframes cardExit{
  from{ opacity:1; transform: translateZ(0) translateY(0); }
  to  { opacity:0; transform: translateZ(0) translateY(18px); }
}

/* Estado estable post-reveal para hover suave y lento */
.benefit-card.revealed{
  opacity:1;
  transform: translateZ(0) translateY(0);
  animation:none;

  /* ✅ FIX: aquí sí permitimos hover */
  pointer-events:auto;

  transition:
    transform 520ms cubic-bezier(.22,1,.36,1),
    box-shadow 520ms cubic-bezier(.22,1,.36,1);
}

.benefit-card.revealed:hover{
  transform: translateZ(0) translateY(-12px);
  box-shadow: 0 26px 64px rgba(0,0,0,0.12);
}

/* ✅ Ya NO hace falta hover especial durante reveal/exit (se desactiva con pointer-events) */


/* Icono + swap */
.benefit-card__icon{
  width:84px;
  height:84px;
  border-radius:20px;
  background:#eaf4e3;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 22px;
  position:relative;
  overflow:hidden;

  transition: background 420ms cubic-bezier(.22,1,.36,1);
}

/* ✅ Hover del icono SOLO cuando está estable (.revealed) */
.benefit-card.revealed:hover .benefit-card__icon{
  background:#5ea33b;
}

.benefit-card__icon img{
  position:absolute;
  width:44px;
  height:44px;
  object-fit:contain;
  transition: opacity 360ms cubic-bezier(.22,1,.36,1);
}

.icon-normal{ opacity:1; }
.icon-hover{ opacity:0; }

/* ✅ Swap SOLO cuando está estable (.revealed) */
.benefit-card.revealed:hover .icon-normal{ opacity:0; }
.benefit-card.revealed:hover .icon-hover{ opacity:1; }

/* Textos */
.benefit-card__title{
  margin:0 0 14px;
  color:#1d2b53;
  font-weight:700;
  font-size:clamp(22px,1.3vw,34px);
  line-height:1.15;
}

.benefit-card__text{
  margin:0 auto;
  color:#3f536e;
  font-size:clamp(16px,1vw,22px);
  line-height:1.4;
  max-width:34ch;
  text-align:justify;
  text-justify: inter-word;
}

@media (max-width:520px){
  .benefit-card__text{ text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  .benefit-card{
    opacity:1;
    transform:none;
    animation:none !important;
    transition:none !important;
    pointer-events:auto !important;
  }
}