/* ==========================================================================
   Taller de Motos XTZ 250 — capa de movimiento de la landing.
   Va aparte de style.css a propósito: /catalogo y /producto heredan aquel
   archivo y no deben arrastrar nada de esto. Aquí solo hay decoración; si el
   navegador no ejecuta anim.js, la página se ve igual que antes.
   Todo se apaga con prefers-reduced-motion al final del archivo.
   ========================================================================== */

/* --- barra de progreso de lectura ---------------------------------------- */
.prog{
  position:fixed;left:0;top:0;height:3px;z-index:70;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--acc),#ff6a6f);
  will-change:transform;pointer-events:none;
}

/* --- cabecera que se encoge al bajar -------------------------------------- */
header#hdr{transition:box-shadow .25s var(--ease),background .25s}
header#hdr .nav{transition:height .25s var(--ease)}
header#hdr .brand img{transition:height .25s var(--ease),width .25s var(--ease)}
header#hdr.scr{box-shadow:0 6px 24px rgba(16,18,22,.09);background:rgba(255,255,255,.88)}
header#hdr.scr .nav{height:64px}
header#hdr.scr .brand img{height:44px;width:44px}
@media (max-width:900px){header#hdr.scr .nav{height:60px}}

/* subrayado que crece bajo el enlace del nav ------------------------------- */
.nav nav a{position:relative}
@media (min-width:901px){
  .nav nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
    background:var(--acc);transform:scaleX(0);transform-origin:0 50%;
    transition:transform .24s var(--ease);
  }
  .nav nav a:hover::after,.nav nav a.act::after{transform:scaleX(1)}
}

/* --- entrada del hero ------------------------------------------------------ */
html.js .hero-in{opacity:0;transform:translateY(18px)}
html.js.ready .hero-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
html.js .hero-art img{transform-origin:50% 60%}
html.js.ready .hero-art img{animation:floaty 7s ease-in-out 1s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* halo rojo detrás del logo del hero: da profundidad al bloque en blanco */
#hero::before{
  content:"";position:absolute;right:-8%;top:-14%;width:52vw;height:52vw;
  max-width:680px;max-height:680px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(225,27,34,.13) 0%,rgba(225,27,34,0) 68%);
  animation:breathe 12s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}

/* --- aparición al hacer scroll (amplía lo que ya traía style.css) ---------- */
.rv{transition-delay:var(--d,0ms)}
.rv-l{opacity:0;transform:translateX(-26px)}
.rv-r{opacity:0;transform:translateX(26px)}
.rv-z{opacity:0;transform:scale(.94)}
.rv-l,.rv-r,.rv-z{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms)}
.rv-l.in,.rv-r.in,.rv-z.in{opacity:1;transform:none}

/* raya roja que se dibuja bajo cada titular de sección --------------------- */
/* barra corta, no un subrayado de ancho completo: en titulares de dos
   líneas el subrayado se metía encima del párrafo de abajo */
.sec-head h2,.sec-bar h2{position:relative;padding-bottom:.75rem}
.sec-head h2::after,.sec-bar h2::after{
  content:"";position:absolute;bottom:.2rem;height:3px;width:64px;
  background:var(--acc);border-radius:2px;
  transform:scaleX(0);transition:transform .6s var(--ease) .15s;
}
.sec-head h2::after{left:50%;margin-left:-32px;transform-origin:50% 50%}
.sec-bar h2::after{left:0;width:48px;transform-origin:0 50%}
.in h2::after{transform:scaleX(1)}

/* --- tarjetas: la foto se acerca y el ícono salta al pasar el mouse -------- */
.card .ph img,.part .ph img,.why .media img{transition:transform .5s var(--ease)}
.card:hover .ph img,.part:hover .ph img,.why .media:hover img{transform:scale(1.06)}
.card .ico,.step .ico,.stat .ico,.cline .ico{transition:transform .28s var(--ease),background .28s,color .28s}
.card:hover .ico{transform:scale(1.12) rotate(-6deg)}
.step:hover .ico,.stat:hover .ico,.cline:hover .ico{transform:translateY(-3px) scale(1.08);background:var(--acc);color:#fff}
.step,.stat,.rev,.cline{transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.step:hover,.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--line2)}
.rev:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.trust div svg{transition:transform .3s var(--ease)}
.trust div:hover svg{transform:rotate(-10deg) scale(1.15)}

/* --- brillo que cruza el botón rojo --------------------------------------- */
.btn-red{position:relative;overflow:hidden}
.btn-red::after{
  content:"";position:absolute;inset:0 auto 0 -60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  transform:skewX(-18deg);transition:left .55s var(--ease);
}
.btn-red:hover::after{left:120%}
.btn-red:hover,.btn-out:hover{transform:translateY(-2px)}

/* --- FAQ: el panel se despliega en vez de aparecer de golpe ---------------- */
.faq details{transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--line2);box-shadow:var(--shadow)}
.faq summary::after{transition:transform .22s var(--ease),color .22s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details[open] p{animation:slidedown .28s var(--ease)}
@keyframes slidedown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- WhatsApp flotante: aro que late y entrada al bajar -------------------- */
html.anim .fab{transform:scale(0);transition:transform .3s var(--ease)}
html.anim .fab.show{transform:scale(1)}
html.anim .fab.show:hover{transform:scale(1.1) rotate(6deg)}
.fab::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* --- menú móvil: los enlaces bajan escalonados ----------------------------- */
@media (max-width:900px){
  .nav nav.open a{animation:navin .3s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
  @keyframes navin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}

/* --- nada de esto corre si el sistema pide menos movimiento ---------------- */
@media (prefers-reduced-motion:reduce){
  .prog{display:none}
  html.js .hero-in,html.js.ready .hero-in{opacity:1;transform:none;transition:none}
  html.js.ready .hero-art img{animation:none}
  #hero::before{animation:none}
  .rv-l,.rv-r,.rv-z{opacity:1;transform:none;transition:none}
  .sec-head h2::after,.sec-bar h2::after{transform:scaleX(1);transition:none}
  html.anim .fab{transform:scale(1)}
  .fab::before{animation:none}
  .faq details[open] p{animation:none}
  .nav nav.open a{animation:none}
  .card .ph img,.part .ph img,.why .media img,.card .ico,.step .ico,.stat .ico,
  .cline .ico,.step,.stat,.rev,.cline,.trust div svg,.btn-red::after{transition:none}
}

/* ==========================================================================
   Titulares con vida: cada palabra sube a su sitio y se enciende de gris al
   color final. Las palabras en rojo quedan latiendo entre el rojo del logo y
   un naranja más caliente. El corte por palabras lo hace anim.js; sin JS los
   titulares se ven normales porque estas reglas cuelgan de .w / .wi.
   ========================================================================== */
.w{display:inline-block;overflow:hidden;padding:0 .06em .14em;margin:0 -.06em -.14em}
.wi{
  display:inline-block;color:var(--w0,var(--mut2));
  transform:translateY(105%);
  transition:transform .62s var(--ease),color .62s var(--ease);
  transition-delay:var(--wd,0ms);
}
.tin .wi{transform:none;color:inherit}

/* Ya aterrizado el titular, TODO el texto se pinta con un solo degradado que
   viaja de lado a lado: negro → rojo del logo → naranja → negro. El degradado
   vive en el h1/h2 completo (no en cada palabra), así que la ola cruza el
   titular entero, incluidas las palabras que no eran rojas. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tin.lit{
    --g1:#15171c;--g2:#e11b22;--g3:#ff7a3d;
    background-image:linear-gradient(100deg,
      var(--g1) 0%,var(--g1) 12%,
      var(--g2) 26%,var(--g3) 34%,var(--g2) 42%,
      var(--g1) 56%,var(--g1) 64%,
      var(--g2) 78%,var(--g3) 86%,
      var(--g1) 100%);
    background-size:280% 100%;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;
    animation:flujo 7s linear infinite;
  }
  .tin.lit .wi{-webkit-text-fill-color:transparent;color:transparent}
  /* sobre el bloque negro el extremo oscuro sería invisible: va en blanco */
  .cta h2.tin.lit{--g1:#ffffff;--g2:#ff4d4d;--g3:#ffb08a}
}
@keyframes flujo{from{background-position:0 0}to{background-position:-280% 0}}

/* el titular sobre fondo negro arranca de un gris más claro */
.cta h2{--w0:#5f646e}

/* el rótulo pequeño de cada sección: barrido de color de lado a lado */
.kicker{
  background-image:linear-gradient(100deg,var(--acc) 0%,var(--acc) 38%,#ff7a3d 50%,var(--acc) 62%,var(--acc) 100%);
  background-size:260% 100%;background-position:110% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:barrido 6s var(--ease) infinite;
}
@keyframes barrido{0%{background-position:110% 0}60%,100%{background-position:-30% 0}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .kicker{-webkit-text-fill-color:var(--acc);color:var(--acc);animation:none}
}

/* el titular del hero además cambia de peso de color al cargar */
#hero h1 .wi{transition-duration:.75s}

@media (prefers-reduced-motion:reduce){
  .w{overflow:visible;padding:0;margin:0}
  .wi{transform:none;color:inherit;transition:none}
  .tin.lit{background-image:none;animation:none}
  .tin.lit .wi{-webkit-text-fill-color:currentColor;color:inherit}
  .kicker{-webkit-text-fill-color:var(--acc);color:var(--acc);animation:none}
}

/* ==========================================================================
   Borde rojo neón al apuntar o pulsar una tarjeta.
   Se cubren las dos lecturas de "poner el click encima": :hover para el mouse
   y :focus-within/:active para el toque en celular y el teclado.
   ========================================================================== */
.card,.part,.step,.stat,.rev{
  border-color:var(--line);
  transition:border-color .22s var(--ease),box-shadow .28s var(--ease),transform .22s var(--ease);
}
.card:hover,.card:focus-within,.card:active,
.part:hover,.part:focus-within,.part:active,
.step:hover,.step:focus-within,.step:active,
.stat:hover,.stat:focus-within,.stat:active,
.rev:hover,.rev:focus-within,.rev:active{
  border-color:var(--acc);
  box-shadow:
    0 0 0 1px var(--acc),
    0 0 10px rgba(225,27,34,.55),
    0 0 26px rgba(225,27,34,.35),
    0 10px 30px rgba(16,18,22,.12);
}
/* mientras se mantiene pulsada, el neón sube un punto */
.card:active,.part:active,.step:active,.stat:active,.rev:active{
  box-shadow:
    0 0 0 1.5px var(--acc),
    0 0 16px rgba(225,27,34,.75),
    0 0 38px rgba(225,27,34,.45),
    0 10px 30px rgba(16,18,22,.14);
}
@media (prefers-reduced-motion:reduce){
  .card,.part,.step,.stat,.rev{transition:none}
}