/* Luxury Garage Spain – capa de diseño y animaciones (nov 2026).
   Se carga después de los estilos de cada página. Para volver atrás basta con quitar
   las dos líneas que enlazan mejoras.css y mejoras.js. */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:180ms;
  --t-med:420ms;
  --t-slow:900ms;
  --font-mono:var(--font);
}

/* Tipografía más rotunda */
h1{font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.04;letter-spacing:-.035em}
h2{letter-spacing:-.03em;line-height:1.08}
.eyebrow,.count-line,.det-bar p,.info h4,.details dt,.info .h4{letter-spacing:.02em;text-transform:none;font-size:.86rem;font-weight:500}
.top-cta .tel,.phone .tel{letter-spacing:0}

/* Cabecera que se compacta al bajar */
.top{transition:box-shadow var(--t-med) var(--ease-out)}
.top .wrap{transition:padding var(--t-med) var(--ease-out)}
.top.is-scrolled .wrap{padding-block:8px}
.top.is-scrolled{box-shadow:0 10px 30px -20px rgba(0,0,0,.8)}
.nav a{position:relative;border-bottom:0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--band-accent);transform:scaleX(0);transform-origin:right;transition:transform var(--t-med) var(--ease-out)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* Botones: respuesta al pasar y al pulsar */
.btn,.card .go{transition:transform var(--t-fast) var(--ease-out),background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.btn:hover{transform:translateY(-2px)}
.btn:active,.card .go:active{transform:translateY(0) scale(.97)}
.btn{position:relative;overflow:hidden}
.btn:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn:not(.ghost):hover::after{transform:translateX(120%);transition:transform 700ms var(--ease-out)}

/* Hero */
.hero-img{border-radius:22px}
.hero-img img{transform:scale(1.08);will-change:transform}

/* Tarjetas del stock */
.card{transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out)}
.card .photo img{transition:transform 900ms var(--ease-out)}
@media (hover:hover){
  .card:hover{transform:translateY(-6px)}
  .card:hover .photo img{transform:scale(1.06)}
}
.card .go{position:relative}
.card .go::after{content:" →";display:inline-block;transition:transform var(--t-med) var(--ease-out)}
.card:hover .go::after{transform:translateX(5px)}

/* Franja de marcas en movimiento continuo */
.brands .marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brands.is-marquee ul.track{display:flex;flex-wrap:nowrap;overflow:visible;justify-content:flex-start;gap:clamp(36px,5vw,72px);padding-right:clamp(36px,5vw,72px);flex:0 0 auto;animation:marquee 38s linear infinite}
.brands .marquee:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
.brands img{filter:grayscale(1);opacity:.8;transition:filter var(--t-med),opacity var(--t-med)}
.brands li:hover img{filter:none;opacity:1}

/* Galería: fundido entre fotos */
.gal-main img.is-swapping{animation:galFade 520ms var(--ease-out)}
@keyframes galFade{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
.thumbs img{transition:opacity var(--t-fast)}
.thumbs button:hover img{opacity:1}
.gal-nav{transition:transform var(--t-fast) var(--ease-out),background var(--t-fast)}
.gal-nav:hover{transform:translateY(-50%) scale(1.08)}

/* Preguntas: el contenido se despliega suave */
details[open] > p{animation:faqIn 420ms var(--ease-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
summary{transition:color var(--t-fast)}
summary:hover{color:var(--accent)}

/* Opiniones */
.quote{transition:transform var(--t-med) var(--ease-out)}
@media (hover:hover){.quote:hover{transform:translateY(-4px)}}

/* WhatsApp flotante: un aviso suave cada pocos segundos */
.wa-float{transition:transform var(--t-fast) var(--ease-out)}
.wa-float:hover{transform:scale(1.08)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25B35A;z-index:-1;animation:waPulse 3.2s var(--ease-out) 2.5s infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.9);opacity:0}}

/* Entradas al hacer scroll (solo si el script está activo) */
.anim [data-rv]{opacity:0;transform:translateY(26px);transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.anim [data-rv="img"]{transform:scale(1.04);clip-path:inset(0 0 12% 0 round 14px)}
.anim [data-rv].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0)}
.anim .hero [data-rv="img"]{clip-path:inset(0 0 0 100% round 22px);transform:none;transition:clip-path 1100ms var(--ease-io),opacity 400ms;transition-delay:200ms}
.anim .hero [data-rv="img"].is-in{clip-path:inset(0 0 0 0 round 22px)}

/* Barra de progreso de lectura */
.lgs-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--band-accent);transform-origin:left;transform:scaleX(0);z-index:30;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .anim [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .brands.is-marquee .track,.wa-float::before,.gal-main img.is-swapping,details[open] > p{animation:none!important}
  .hero-img img{transform:none!important}
  .btn:hover,.card:hover,.quote:hover{transform:none}
  .btn:not(.ghost)::after{display:none}
  .lgs-progress{display:none}
}