/* Efectos Hardmicro 2026 — estilo Apple */
html{scroll-behavior:smooth}
/* Aparición al hacer scroll */
.js .rv{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.js .rv.in{opacity:1;transform:none}
/* Entrada de la portada */
.js .hero-in{animation:heroIn 1.3s cubic-bezier(.16,1,.3,1) both}
.js .hero-in:nth-child(2){animation-delay:.12s}
.js .hero-in:nth-child(3){animation-delay:.24s}
.js .hero-in:nth-child(4){animation-delay:.36s}
@keyframes heroIn{from{opacity:0;transform:translateY(28px) scale(.98);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
/* Titular con brillo verde que recorre el texto */
.shine{background:linear-gradient(100deg,#1d1d1f 0%,#1d1d1f 40%,#0a7d3b 50%,#1d1d1f 60%,#1d1d1f 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s ease-in-out 1.4s infinite}
@keyframes shine{0%{background-position:100% 0}60%,100%{background-position:0 0}}
/* Tarjetas que se elevan */
.lift{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1)}
.lift:hover{transform:translateY(-6px);box-shadow:0 22px 44px -12px rgba(0,0,0,.18)}
/* Botones */
.btn,.btn2,a[href^="https://wa.me"]{transition:transform .25s ease,background-color .25s ease,color .25s ease}
.btn:hover,.btn2:hover,a[href^="https://wa.me"]:hover{transform:scale(1.04)}
.btn:active,.btn2:active{transform:scale(.97)}
/* Cabecera: sombra al bajar */
header{transition:box-shadow .3s ease,background-color .3s ease}
header.scrolled{box-shadow:0 6px 24px -10px rgba(0,0,0,.18)}
/* Logo de la portada: zoom con el scroll y halo verde */
.hero-logo{transition:transform .1s linear;filter:drop-shadow(0 0 0 rgba(48,209,88,0))}
.hero-logo.glow{animation:glow 3.2s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(48,209,88,0))}50%{filter:drop-shadow(0 0 28px rgba(48,209,88,.45))}}
/* Pasos: línea que se dibuja */
.js ol > li.rv{border-top-color:transparent!important;position:relative}
.js ol > li.rv::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:#1d1d1f;transition:width 1.1s cubic-bezier(.16,1,.3,1) .15s}
.js ol > li.rv.in::before{width:100%}
/* Marcas: desfile */
.marcas li{transition:color .3s ease,transform .3s ease}.marcas li:hover{color:#1d1d1f;transform:translateY(-3px)}
/* Botón flotante de WhatsApp */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:50;width:56px;height:56px;border-radius:50%;background:#0a7d3b;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -6px rgba(10,125,59,.6);transform:scale(0);animation:waIn .6s cubic-bezier(.34,1.56,.64,1) 1.5s forwards}
.wa-float:hover{background:#086a32;text-decoration:none}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #0a7d3b;animation:waPulse 2.4s ease-out 2.2s infinite}
@keyframes waIn{to{transform:scale(1)}}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
/* Galería de fotos: zoom suave */
.gal-card img,.lift img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.gal-card:hover img{transform:scale(1.06)}
.gal-card:hover{text-decoration:none}
/* Fotos: fundido al cargar */
.js img[loading="lazy"]{opacity:0;transition:opacity .8s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.js img[loading="lazy"].ok{opacity:1}

/* Logo animado de la portada */
.hm-glow{position:absolute;inset:-25%;z-index:-1;background:radial-gradient(38% 38% at var(--mx,50%) var(--my,42%),rgba(48,209,88,.30),rgba(48,209,88,0) 70%);animation:hmGlow 10s ease-in-out infinite alternate}
@keyframes hmGlow{from{transform:translate(-4%,-2%) scale(1)}to{transform:translate(4%,3%) scale(1.12)}}
.hm-grid{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px);background-size:24px 24px;-webkit-mask-image:radial-gradient(55% 60% at 50% 50%,#000,transparent);mask-image:radial-gradient(55% 60% at 50% 50%,#000,transparent);animation:hmGrid 24s linear infinite}
@keyframes hmGrid{to{background-position:24px 24px}}
.hm-tilt{transition:transform .3s ease-out;will-change:transform}
.hm-logo{width:min(340px,68vw);height:auto;overflow:visible;filter:drop-shadow(0 30px 60px rgba(48,209,88,.18))}
.hm-frame{stroke-dasharray:1;stroke-dashoffset:1;animation:hmDraw 1.3s cubic-bezier(.65,0,.35,1) .2s forwards}
@keyframes hmDraw{to{stroke-dashoffset:0}}
.hm-base{opacity:0;transform:translateY(24px);animation:hmUp .8s cubic-bezier(.16,1,.3,1) 1.1s forwards}
.hm-pad{opacity:0;animation:hmFade .4s ease 1.6s forwards}
@keyframes hmUp{to{opacity:1;transform:none}}
@keyframes hmFade{to{opacity:1}}
.hm-screen{opacity:0;animation:hmOn 1s ease 1.4s forwards}
@keyframes hmOn{0%{opacity:0}20%{opacity:.9}32%{opacity:.25}55%,100%{opacity:1}}
.hm-check{stroke-dasharray:1;stroke-dashoffset:1;animation:hmCheck 7s cubic-bezier(.65,0,.35,1) 2s infinite}
@keyframes hmCheck{0%{stroke-dashoffset:1;opacity:1}9%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
.hm-ring{transform-box:fill-box;transform-origin:center;opacity:0;animation:hmRing 7s ease-out 2.5s infinite}
@keyframes hmRing{0%{opacity:.9;transform:scale(.4)}18%,100%{opacity:0;transform:scale(2.8)}}
.hm-sheen{animation:hmSheen 7s ease-in-out 2.8s infinite}
@keyframes hmSheen{0%{transform:skewX(-18deg) translateX(0)}22%,100%{transform:skewX(-18deg) translateX(820px)}}
.hm-word span{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);animation:hmLetter .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes hmLetter{to{opacity:1;transform:none;filter:none}}
.hm-chips li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:980px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#f5f5f7;font-size:15px;font-weight:500;opacity:0;transform:scale(.85);animation:hmPop .55s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes hmPop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hm-glow,.hm-grid,.hm-sheen,.hm-ring{animation:none!important}
  .hm-frame,.hm-check{animation:none!important;stroke-dashoffset:0}
  .hm-base,.hm-pad,.hm-screen,.hm-word span,.hm-chips li{animation:none!important;opacity:1;transform:none;filter:none}
  .hm-ring{opacity:0}
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .hero-in{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
  .shine{animation:none;background:none;color:#1d1d1f}
  .gal-card:hover img{transform:none}
  .hero-logo,.hero-logo.glow,.lift,.lift:hover,.wa-float,.wa-float::after{animation:none!important;transform:none!important;transition:none!important}
  .js ol > li.rv::before{width:100%;transition:none}
}