/* =========================================================
   HOYTEZIU — animaciones sutiles
   Solo transform/opacity (ligero en celulares).
   Se desactiva solo si el usuario tiene "reducir movimiento".
   ========================================================= */
:root{ --hz-ease: cubic-bezier(.22,.8,.28,1); }

/* ---------- Transición suave entre páginas (Chrome/Safari/Edge) ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:hzFadeOut .22s ease both; }
::view-transition-new(root){ animation:hzFadeIn .32s ease both; }
@keyframes hzFadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes hzFadeOut{ from{opacity:1;} to{opacity:0;} }

/* ---------- Entrada al hacer scroll (la clase .rv la pone anim.js) ---------- */
html.anim-on .rv{ opacity:0; transform:translateY(18px); }
html.anim-on .rv.rv-in{
  opacity:1; transform:none;
  transition:opacity .6s var(--hz-ease), transform .6s var(--hz-ease);
  transition-delay:var(--rv-d,0ms);
}

/* ---------- Portada: entrada escalonada del hero ---------- */
@keyframes hzUp{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} }
@keyframes hzDown{ from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:none;} }
.topbar{ animation:hzDown .6s var(--hz-ease) backwards; }
.pillnav{ animation:hzUp .6s var(--hz-ease) .08s backwards; }
.cta-registro{ animation:hzUp .65s var(--hz-ease) .14s backwards; }
.hero-eyebrow{ animation:hzUp .7s var(--hz-ease) .10s backwards; }
.hero h1{ animation:hzUp .7s var(--hz-ease) .18s backwards; }
.hero p{ animation:hzUp .7s var(--hz-ease) .28s backwards; }
.hero-cta{ animation:hzUp .7s var(--hz-ease) .38s backwards; }
.hero-eventos{ animation:hzUp .8s var(--hz-ease) .30s backwards; }

/* Luces suaves que flotan en el hero (no tocan el texto) */
.hero::before, .hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:1;
}
.hero::before{
  width:360px; height:360px; right:-90px; top:-130px;
  background:radial-gradient(circle, rgba(255,170,60,.34), rgba(255,170,60,0) 70%);
  animation:hzFloatA 10s ease-in-out infinite;
}
.hero::after{
  width:300px; height:300px; left:-80px; bottom:-140px;
  background:radial-gradient(circle, rgba(70,130,255,.30), rgba(70,130,255,0) 70%);
  animation:hzFloatB 12s ease-in-out infinite;
}
@keyframes hzFloatA{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-26px,22px) scale(1.12);} }
@keyframes hzFloatB{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,-18px) scale(1.1);} }

/* Botón "Regístrate ahora": latido suave para llamar la atención */
.cta-registro-btn{ animation:hzPulse 2.8s ease-in-out infinite; }
@keyframes hzPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); }
  70%{ box-shadow:0 0 0 14px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
/* Etiqueta "HOY" de eventos */
.he-fecha.is-hoy{ animation:hzBadge 2s ease-in-out infinite; }
@keyframes hzBadge{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,99,55,.55); }
  50%{ box-shadow:0 0 0 7px rgba(255,99,55,0); }
}

/* Número que termina de contar */
.num-pop{ animation:hzPop .45s var(--hz-ease); }
@keyframes hzPop{ 0%{transform:scale(1);} 40%{transform:scale(1.16);} 100%{transform:scale(1);} }

/* ---------- Efectos al pasar el cursor (solo dispositivos con mouse) ---------- */
.cat-card, .biz-card, .stat, .cupon-mini, .p-card, .prop-card, .plan-box, .cta-registro, a.card{
  transition:transform .35s var(--hz-ease), box-shadow .35s var(--hz-ease);
}
.hero-cta, .plan-btn, .cta-registro-btn, .go, .pill, .back, .btn-fav, .hero-actions a, .rate-form button{
  transition:transform .25s var(--hz-ease), box-shadow .25s var(--hz-ease), filter .25s;
}
.navitem{ transition:transform .25s var(--hz-ease), background .25s; }
.cat-card .icon{ transition:transform .4s var(--hz-ease); }
.biz-photo, .cupon-mini img{ transition:transform .7s var(--hz-ease); will-change:transform; }
.rate-stars span{ display:inline-block; transition:transform .2s var(--hz-ease), color .2s; }

@media (hover:hover){
  .cat-card:hover{ transform:translateY(-5px); box-shadow:0 14px 28px rgba(23,42,70,.22); }
  .cat-card:hover .icon{ transform:scale(1.2) rotate(-8deg); }
  .biz-card:hover, .p-card:hover, .prop-card:hover, a.card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(23,42,70,.14); }
  .biz-card:hover .biz-photo{ transform:scale(1.07); }
  .stat:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(23,42,70,.12); }
  .cupon-mini:hover{ transform:translateY(-4px) rotate(-.6deg); box-shadow:0 12px 24px rgba(23,42,70,.16); }
  .cupon-mini:hover img{ transform:scale(1.08); }
  .plan-box:hover{ box-shadow:0 14px 30px rgba(23,42,70,.14); }
  .cta-registro:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(255,99,55,.38); }
  .hero-cta:hover, .plan-btn:hover, .cta-registro-btn:hover, .go:hover, .back:hover, .btn-fav:hover, .hero-actions a:hover, .rate-form button:hover{
    transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18);
  }
  .pill:hover{ transform:translateY(-2px); }
  .navitem:hover{ transform:translateX(4px); }
  .rate-stars span:hover{ transform:scale(1.3) rotate(-6deg); }
}

/* ---------- Respuesta al tocar (celular) ---------- */
.cat-card:active, .biz-card:active, .stat:active, .cupon-mini:active, .p-card:active, a.card:active{ transform:scale(.97); }
.hero-cta:active, .plan-btn:active, .cta-registro-btn:active, .go:active, .pill:active, .back:active, .btn-fav:active, .hero-actions a:active, .rate-form button:active{ transform:scale(.95); }
.rate-stars span.sel{ animation:hzStar .35s var(--hz-ease); }
@keyframes hzStar{ 0%{transform:scale(1);} 50%{transform:scale(1.4);} 100%{transform:scale(1);} }

/* ---------- Carga con brillo (skeletons) ---------- */
.hz-sk{
  background:linear-gradient(90deg,#edf0f5 25%,#f8f9fc 50%,#edf0f5 75%);
  background-size:200% 100%;
  animation:hzShimmer 1.4s linear infinite;
  border-radius:8px;
}
@keyframes hzShimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
.biz-photo.hz-sk::after{ display:none; }
.sk-card .sk-line{ height:11px; margin-bottom:9px; }
.sk-card .sk-line.w60{ width:60%; }
.sk-card .sk-line.w40{ width:40%; }
.sk-mini{ pointer-events:none; }
.sk-mini .sk-img{ height:100px; border-radius:0; }
.sk-mini .sk-line{ height:10px; margin:10px; width:70%; }
.mapa-negocios-box:has(> .mapa-placeholder){
  background:linear-gradient(90deg,#edf0f5 25%,#f8f9fc 50%,#edf0f5 75%);
  background-size:200% 100%;
  animation:hzShimmer 1.6s linear infinite;
}
@media(max-width:700px){
  .sk-mini .sk-img{ height:80px; }
  .biz-row .sk-card:nth-child(n+2){ display:none; }
  .hero::before{ width:240px; height:240px; }
  .hero::after{ width:200px; height:200px; }
}

/* ---------- Respetar "reducir movimiento" ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  @view-transition{ navigation:none; }
}