/* =============================================================
   home.css — Mejoras visuales y animaciones para la página Home
   ============================================================= */

/* ===== KEYFRAMES ===== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,179,158,.4); }
  50%      { box-shadow: 0 0 20px 6px rgba(13,179,158,.15); }
}

@keyframes progressFill {
  from { width: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes countSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== SCROLL REVEAL (clase que el JS agrega) ===== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1),
              transform .6s cubic-bezier(.22,1,.36,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays escalonados (el JS agrega data-reveal-delay) */
.reveal[data-reveal-delay="1"] { transition-delay: .1s; }
.reveal[data-reveal-delay="2"] { transition-delay: .2s; }
.reveal[data-reveal-delay="3"] { transition-delay: .3s; }
.reveal[data-reveal-delay="4"] { transition-delay: .4s; }
.reveal[data-reveal-delay="5"] { transition-delay: .5s; }


/* ===== HERO — más impacto visual ===== */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a3d85 0%, #0f5dcc 40%, #1d9bf0 100%);
}

/* Sutil patrón de fondo decorativo */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,213,65,.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(29,155,240,.2) 0%, transparent 50%);
  pointer-events: none;
}

.hero__in {
  position: relative;
  z-index: 1;
  padding: 36px 0 40px;
}

/* Texto claro sobre fondo oscuro del hero */
.hero__left {
  color: #fff;
}

.hero__left h1 {
  font-size: clamp(26px, 5vw, 42px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  animation: fadeInLeft .7s cubic-bezier(.22,1,.36,1) both;
}

.hero__left p {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.5;
  max-width: 520px;
  color: rgba(255,255,255,.8);
  animation: fadeInLeft .7s .15s cubic-bezier(.22,1,.36,1) both;
}

.hero__cta {
  animation: fadeInUp .6s .3s cubic-bezier(.22,1,.36,1) both;
}

/* Botón ghost dentro del hero: borde y texto blancos */
.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
}

.hero .btn--ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: #fff;
}

/* Link calculadora en el hero */
.hero__calc-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(255,213,65,.15);
  border:1px solid rgba(255,213,65,.35);
  color:#ffd541;
  font-size:clamp(13px, 1.8vw, 15px);
  font-weight:600;
  text-decoration:none;
  transition:background .2s, border-color .2s, transform .2s;
  animation:fadeInUp .6s .45s cubic-bezier(.22,1,.36,1) both;
}
.hero__calc-link span{
  text-decoration:underline;
  text-underline-offset:2px;
}
.hero__calc-link:hover{
  background:rgba(255,213,65,.25);
  border-color:rgba(255,213,65,.6);
  transform:translateY(-1px);
}

.hero__right {
  animation: fadeInRight .7s .2s cubic-bezier(.22,1,.36,1) both;
  background: linear-gradient(135deg, #1d9bf0, #38bdf8, #7dd3fc);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}

/* Brillo decorativo en la card hero */
.hero__right::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero .pill {
  padding: 8px 16px;
  font-size: .85rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: .02em;
  animation: fadeInScale .5s .4s cubic-bezier(.22,1,.36,1) both;
}

.hero .date {
  font-size: clamp(28px, 7vw, 38px);
  margin: 10px 0 16px;
  font-weight: 800;
  animation: fadeInScale .5s .5s cubic-bezier(.22,1,.36,1) both;
}

.hero .btn--cta {
  animation: fadeInUp .5s .6s cubic-bezier(.22,1,.36,1) both;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 24px;
  border-radius: 14px;
  box-shadow: 0 6px 0 #b45309, 0 8px 20px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease;
}

.hero .btn--cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #b45309, 0 12px 28px rgba(0,0,0,.25);
}

.hero .btn--cta:active {
  transform: translateY(1px);
  box-shadow: 0 4px 0 #b45309, 0 6px 14px rgba(0,0,0,.2);
}


/* ===== SECCIÓN TÍTULOS (h2) con acento ===== */

#destacados > h2,
#finalizados > h2,
#como > h2,
#confianza > h2,
#crea > h2 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -.01em;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

#destacados > h2::after,
#finalizados > h2::after,
#como > h2::after,
#confianza > h2::after,
#crea > h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  border-radius: 4px;
  background: var(--cta);
}


/* ===== CARDS — transiciones mejoradas ===== */

.card {
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 32px rgba(15,23,42,.12),
    0 4px 12px rgba(15,23,42,.08);
}

.card__media {
  overflow: hidden;
}

.card__media img {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

/* Badge de fecha en card */
.card .badge {
  transition: transform .3s ease;
}
.card:hover .badge {
  transform: scale(1.08);
}


/* ===== BARRA DE PROGRESO animada ===== */

.raffle-card__progress-bar span {
  transition: width .8s cubic-bezier(.22,1,.36,1);
}

.is-visible .raffle-card__progress-bar span,
.raffle-card.is-visible .raffle-card__progress-bar span {
  animation: progressFill .8s cubic-bezier(.22,1,.36,1) both;
}


/* ===== COUNTDOWN — más legible ===== */

.raffle-card__countdown {
  background: rgba(15, 93, 204, .08);
  border: 1px solid rgba(15, 93, 204, .15);
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}

.raffle-card__countdown small {
  font-size: 1.1em;
}

.raffle-card__countdown-value {
  animation: countSlide .4s ease both;
}


/* ===== AVATARES de participantes ===== */

.raffle-card__avatars img {
  transition: transform .2s ease, z-index 0s;
}

.raffle-card__avatars img:hover {
  transform: scale(1.25);
  z-index: 10;
}


/* ===== BOTONES — micro-interacciones ===== */

.btn {
  transition: transform .15s ease,
              box-shadow .15s ease,
              background .2s ease,
              border-color .2s ease,
              color .2s ease;
}

.btn:active {
  transform: scale(.97);
}

.btn--accent {
  position: relative;
  overflow: hidden;
}

/* Efecto ripple sutil al hover */
.btn--accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}

.btn--accent:hover::after {
  transform: translateX(100%);
}


/* ===== STEPS (Cómo funciona) ===== */

.step {
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(15,23,42,.1);
}

.step span {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
  transition: transform .3s ease;
}

.step:hover span {
  transform: scale(1.15);
}

.step b {
  font-size: 1.1rem;
  display: block;
  margin-bottom: 4px;
}


/* ===== TRUST (Confianza) ===== */

.trust {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trust li {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  cursor: default;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
}

.trust li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(15,23,42,.1);
  border-color: var(--cta);
}

.trust__icon {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.trust li b {
  font-size: 1.05rem;
  display: block;
}

.trust li p {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.45;
}


/* ===== CTA (Publica tu sorteo) ===== */

#crea {
  text-align: center;
  padding: 48px 20px;
  background: linear-gradient(135deg, rgba(15,93,204,.06), rgba(13,179,158,.06));
  border-radius: 20px;
  margin-top: 32px;
}

#crea p {
  font-size: clamp(15px, 2vw, 18px);
  max-width: 480px;
  margin: 0 auto 20px;
}

#crea .btn--accent {
  font-size: 1.05rem;
  padding: 14px 32px;
  border-radius: 14px;
  animation: pulseGlow 2.5s ease-in-out infinite;
}


/* ===== SORTEOS FINALIZADOS — distinción visual ===== */

.raffle-card-finished {
  position: relative;
}

.raffle-card-finished::before {
  content: 'Finalizado';
  position: absolute;
  top: 14px;
  left: 0;
  background: linear-gradient(135deg, #0f5dcc, #1d9bf0);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 14px 4px 10px;
  border-radius: 0 8px 8px 0;
  z-index: 5;
}


/* ===== RESEÑAS en modal ===== */

.review {
  transition: background .2s ease;
  border-radius: 10px;
  padding: 10px;
}

.review:hover {
  background: rgba(15,93,204,.04);
}


/* Footer styles are in base.css (shared across all pages) */


/* ===== RESPONSIVE — pulidos móviles ===== */

@media (max-width: 600px) {
  .hero__in {
    padding: 24px 0 28px;
    text-align: center;
  }

  .hero__left p {
    margin-inline: auto;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__right {
    padding: 20px 18px;
    border-radius: 16px;
  }

  #crea {
    padding: 32px 16px;
    border-radius: 14px;
  }

  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15,23,42,.1);
  }

  /* En móvil, desactivar animaciones pesadas para rendimiento */
  .card__media img {
    transition: none;
  }
  .card:hover .card__media img {
    transform: none;
  }
}

/* Prefiere movimiento reducido — accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}