/* ============================================================
   4 Hundred Garage — hoja de estilos base
   Plantilla MyM CustomAI Studio · plantilla-taller-01
   Rebrandeo: cambiá SOLO las variables de :root
   ============================================================ */

:root{
  /* Paleta del cliente (tomada de sus piezas) */
  --rojo:#FE0614;
  --rojo-osc:#C20510;
  --amarillo:#FFD100;
  --negro:#0C0C0D;
  --negro-2:#141417;
  --gris:#1E1F23;
  --gris-linea:#2C2D32;
  --texto:#EDEDEF;
  --texto-sec:#A3A4AA;
  --blanco:#FFFFFF;

  /* Tipografía */
  --font-titulo:'Poppins','Segoe UI',Arial,sans-serif;
  --font-texto:'Poppins','Segoe UI',Arial,sans-serif;

  /* Layout */
  --ancho:1200px;
  --radio:14px;
  --radio-sm:8px;
  --sombra:0 18px 50px rgba(0,0,0,.45);
  --trans:.25s ease;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--negro);color:var(--texto);
  font-family:var(--font-texto);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-titulo);font-weight:800;font-style:italic;line-height:1.05;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.3rem);text-transform:uppercase}
h2{font-size:clamp(1.9rem,4.2vw,3rem);text-transform:uppercase}
h3{font-size:1.25rem;font-style:normal;text-transform:uppercase}
p{margin:0 0 1em}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 22px}
.seccion{padding:clamp(56px,8vw,110px) 0}
.centrado{text-align:center}
.rojo{color:var(--rojo)}
.amarillo{color:var(--amarillo)}

/* ---------- Etiqueta de sección ---------- */
.etiqueta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rojo);margin-bottom:18px;
}
.etiqueta::before{content:"";width:34px;height:3px;background:var(--rojo)}
.centrado .etiqueta::after{content:"";width:34px;height:3px;background:var(--rojo)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;font-family:var(--font-titulo);font-weight:700;font-size:.92rem;
  letter-spacing:.06em;text-transform:uppercase;border:2px solid transparent;
  border-radius:var(--radio-sm);cursor:pointer;transition:var(--trans);
}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn--rojo{background:var(--rojo);color:#fff}
.btn--rojo:hover{background:#fff;color:var(--negro)}
.btn--linea{border-color:rgba(255,255,255,.35);color:#fff}
.btn--linea:hover{border-color:var(--rojo);background:var(--rojo)}
.btn--negro{background:var(--negro);color:#fff}
.btn--negro:hover{background:#fff;color:var(--negro)}
.btn--bloque{width:100%}

/* ---------- Barra superior ---------- */
.topbar{background:var(--negro-2);border-bottom:1px solid var(--gris-linea);font-size:.82rem}
.topbar .contenedor{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.topbar-datos{display:flex;flex-wrap:wrap;gap:8px 26px;color:var(--texto-sec)}
.topbar-datos span{display:inline-flex;align-items:center;gap:7px}
.topbar-datos svg{width:15px;height:15px;fill:var(--rojo);flex:none}
.topbar a:hover{color:var(--rojo)}
.topbar-redes{display:flex;gap:14px}
.topbar-redes svg{width:17px;height:17px;fill:var(--texto-sec);transition:var(--trans)}
.topbar-redes a:hover svg{fill:var(--rojo)}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;background:rgba(12,12,13,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--gris-linea);
}
.header .contenedor{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;flex:none;color:#fff}
.logo svg,.logo img{height:46px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{
  font-size:.86rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto);position:relative;padding:6px 0;transition:var(--trans);
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--rojo);transition:var(--trans)}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.header .btn{padding:12px 22px;font-size:.8rem}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:var(--trans)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--negro);padding:clamp(60px,9vw,120px) 0 clamp(60px,8vw,100px)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 420px at 88% 12%, rgba(254,6,20,.20), transparent 65%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 42px);
}
.hero-cinta{
  position:absolute;top:-12%;right:-16%;width:58%;height:135%;
  background:var(--rojo);transform:skewX(-13deg);opacity:.12;
}
.hero .contenedor{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;background:rgba(254,6,20,.12);
  border:1px solid rgba(254,6,20,.4);color:#fff;border-radius:100px;
  padding:7px 16px;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px;
}
.hero h1{margin-bottom:.35em}
.hero h1 em{font-style:italic;color:var(--rojo)}
.hero-bajada{font-size:1.12rem;color:var(--texto-sec);max-width:52ch;margin-bottom:32px}
.hero-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.hero-datos{display:flex;flex-wrap:wrap;gap:14px 34px;border-top:1px solid var(--gris-linea);padding-top:22px}
.hero-datos div strong{display:block;font-family:var(--font-titulo);font-size:1.5rem;font-weight:800;font-style:italic;color:#fff;line-height:1}
.hero-datos div span{font-size:.8rem;color:var(--texto-sec);letter-spacing:.06em;text-transform:uppercase}
.hero-figura{position:relative}
.hero-figura img{border-radius:var(--radio);box-shadow:var(--sombra);width:100%}
.hero-figura::after{
  content:"";position:absolute;left:-16px;bottom:-16px;width:110px;height:110px;
  background-image:conic-gradient(var(--rojo) 25%,transparent 0 50%,var(--rojo) 0 75%,transparent 0);
  background-size:22px 22px;opacity:.85;z-index:-1;
}
.estrellas{color:var(--amarillo);letter-spacing:2px}


/* ---------- Hero con video ---------- */
.hero--video{padding:clamp(80px,11vw,150px) 0 clamp(120px,13vw,180px)}
.hero-fondo{position:absolute;inset:0;z-index:0;
  clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
.hero-fondo video{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05) brightness(.9)}
.hero-fondo::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(12,12,13,.30), rgba(12,12,13,.78) 78%),
    linear-gradient(to bottom, rgba(12,12,13,.72), rgba(12,12,13,.18) 34%, rgba(12,12,13,.30) 62%, rgba(12,12,13,.94))}
.hero--video::before{display:none}
.hero--video .hero-cinta{display:none}
.hero-centro{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero--video.hero .contenedor{display:flex}

/* Nombre gigante */
.hero-nombre{margin:0 0 .35em;text-transform:uppercase;line-height:.94;
  font-size:clamp(3rem,9.5vw,7.2rem);letter-spacing:-.03em}
.hero-nombre .linea{display:block}
.hero-nombre .mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .02em .02em}
.hero-nombre .cuatro,.hero-nombre .palabra{display:inline-block;
  transform:translateY(115%);animation:hero-subir .9s cubic-bezier(.16,1,.3,1) forwards}
.hero-nombre .cuatro{background:var(--rojo);color:#fff;font-style:italic;
  padding:.02em .18em .06em;margin-right:.18em;border-radius:.08em;
  box-shadow:0 14px 44px rgba(254,6,20,.45);animation-delay:.15s}
.hero-nombre .p2{animation-delay:.3s;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.hero-nombre .p3{animation-delay:.45s;color:transparent;-webkit-text-stroke:2px #fff;
  letter-spacing:.08em;font-size:.82em}
@keyframes hero-subir{to{transform:none}}

.hero--video .hero-kicker{background:rgba(12,12,13,.55);backdrop-filter:blur(6px)}
.hero--video .hero-bajada{margin-left:auto;margin-right:auto;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero--video .hero-acciones{justify-content:center}
.hero--video .hero-datos{justify-content:center;border-top-color:rgba(255,255,255,.22)}

/* Velocímetro flotando sobre el video */
.gauge--hero{position:absolute;left:auto;right:clamp(16px,4vw,56px);bottom:clamp(56px,7vw,90px);z-index:3}

@media (max-width:980px){
  .gauge--hero{display:none}
  .hero-fondo{clip-path:polygon(0 0,100% 0,100% 90%,0 100%)}
}


/* ---------- Subtítulo neón bajo el nombre ---------- */
.hero-marca{display:inline-flex;flex-direction:column;align-items:stretch}
.hero-sub{align-self:stretch;text-align:center;margin-top:22px;padding:12px 20px;
  border:1px solid rgba(254,6,20,.65);border-radius:100px;
  font-family:var(--font-titulo);font-weight:600;font-size:clamp(.78rem,1.7vw,1.05rem);
  letter-spacing:.34em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 10px rgba(254,6,20,.9),0 0 26px rgba(254,6,20,.5);
  box-shadow:0 0 22px rgba(254,6,20,.35),inset 0 0 16px rgba(254,6,20,.16);
  background:rgba(12,12,13,.5);backdrop-filter:blur(6px);
  opacity:0;animation:sub-neon .9s ease .75s forwards}
@keyframes sub-neon{0%{opacity:0;text-shadow:none}55%{opacity:.4}62%{opacity:.9}68%{opacity:.35}100%{opacity:1}}

/* ---------- Marquesina neón ---------- */
.marquesina--neon .marquesina-pista{animation-duration:30s}
.marquesina--neon b{color:transparent;-webkit-text-stroke:1.4px var(--rojo);
  filter:drop-shadow(0 0 7px rgba(254,6,20,.75));letter-spacing:.02em}
.marquesina--neon b:nth-child(4n+1){color:var(--rojo);-webkit-text-stroke:0;
  filter:drop-shadow(0 0 10px rgba(254,6,20,.9))}
.marquesina--neon i{background-image:conic-gradient(var(--rojo) 25%,transparent 0 50%,var(--rojo) 0 75%,transparent 0);
  opacity:.5;filter:drop-shadow(0 0 4px rgba(254,6,20,.8))}

/* ---------- Entrada futurista de tarjetas ---------- */
@keyframes tarjeta-entra{
  0%{opacity:0;transform:perspective(900px) translateY(52px) rotateX(9deg) scale(.94);
     clip-path:inset(0 0 100% 0);filter:brightness(2.2) saturate(0)}
  55%{clip-path:inset(0 0 0% 0);filter:brightness(1.25) saturate(.5)}
  100%{opacity:1;transform:none;clip-path:inset(0 0 0 0);filter:none}
}
.aparece .tarjeta,.aparece .mini{opacity:0}
.aparece.visible .tarjeta,.aparece.visible .mini{opacity:1;
  animation:tarjeta-entra .9s cubic-bezier(.16,1,.3,1) backwards}
.aparece.visible .tarjeta:nth-child(2),.aparece.visible .mini:nth-child(2){animation-delay:.12s}
.aparece.visible .tarjeta:nth-child(3),.aparece.visible .mini:nth-child(3){animation-delay:.24s}
.aparece.visible .tarjeta:nth-child(4),.aparece.visible .mini:nth-child(4){animation-delay:.36s}
.aparece.visible .mini:nth-child(5){animation-delay:.48s}
.aparece.visible .mini:nth-child(6){animation-delay:.6s}

/* ---------- Entrada de bloques partidos ---------- */
@keyframes img-barrido{
  0%{clip-path:polygon(0 0,0 0,0 100%,0 100%);filter:brightness(2)}
  100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:none}
}
@keyframes txt-entra{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
.aparece .partido-img,.aparece .partido-txt{opacity:0}
.aparece.visible .partido-img{opacity:1;animation:img-barrido .95s cubic-bezier(.16,1,.3,1) .1s backwards}
.aparece.visible .partido-txt{opacity:1;animation:txt-entra .85s cubic-bezier(.16,1,.3,1) .2s backwards}

/* ---------- Carrusel de trabajos ---------- */
.carrusel{position:relative}
.carrusel-vista{overflow:hidden;border-radius:var(--radio);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.carrusel-pista{display:flex;gap:22px;transition:transform .75s cubic-bezier(.16,1,.3,1);will-change:transform}
.slide{flex:0 0 min(680px,74%);margin:0;position:relative;border-radius:var(--radio);
  overflow:hidden;aspect-ratio:16/10;background:var(--negro-2);
  transform:scale(.9);opacity:.35;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.slide.activo{transform:none;opacity:1;box-shadow:0 0 0 1px rgba(254,6,20,.5),0 0 34px rgba(254,6,20,.25),var(--sombra)}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;
  font-family:var(--font-titulo);font-weight:700;font-style:italic;font-size:1.05rem;text-transform:uppercase;
  background:linear-gradient(to top,rgba(12,12,13,.94),transparent)}
.carrusel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(12,12,13,.75);border:1px solid rgba(254,6,20,.65);color:#fff;
  font-size:1.7rem;line-height:1;display:grid;place-items:center;
  box-shadow:0 0 16px rgba(254,6,20,.35);backdrop-filter:blur(6px);transition:var(--trans)}
.carrusel-btn:hover{background:var(--rojo)}
.carrusel-prev{left:14px}
.carrusel-next{right:14px}
.carrusel-puntos{display:flex;justify-content:center;gap:10px;margin-top:22px}
.carrusel-puntos button{width:26px;height:4px;border-radius:4px;border:0;cursor:pointer;
  background:var(--gris-linea);transition:var(--trans);padding:0}
.carrusel-puntos button.activo{background:var(--rojo);box-shadow:0 0 10px rgba(254,6,20,.8)}
@media (max-width:820px){
  .slide{flex-basis:86%}
  .carrusel-btn{width:42px;height:42px;font-size:1.4rem}
  .carrusel-prev{left:8px}.carrusel-next{right:8px}
}


/* ---------- Banda de logos de productos ---------- */
.marquesina--logos .marquesina-pista{gap:64px}
.marquesina--logos .marca{display:inline-flex;align-items:center}
.marquesina--logos .marca img{height:46px;width:auto;
  filter:grayscale(1) brightness(1.6) drop-shadow(0 0 8px rgba(254,6,20,.5));
  opacity:.9;transition:var(--trans)}
.marquesina--logos .marca:hover img{filter:none;opacity:1}
.marquesina--logos .marca.con-logo b{display:none}
.marquesina--logos .marca:nth-child(2n) b{color:transparent;-webkit-text-stroke:1.4px var(--rojo);
  filter:drop-shadow(0 0 7px rgba(254,6,20,.7))}
.marquesina--logos .marca:nth-child(2n+1) b{color:var(--rojo);-webkit-text-stroke:0;
  filter:drop-shadow(0 0 10px rgba(254,6,20,.9))}

/* ---------- Efectos de scroll por sección ---------- */
@keyframes sube-suave{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes cta-barrido{from{clip-path:polygon(0 0,0 0,0 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}

/* Franja roja: entra y los ítems aceleran en fila */
.franja.aparece{opacity:0;transform:translateX(-40px)}
.franja.aparece.visible{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.franja.aparece div{opacity:0}
.franja.aparece.visible div{opacity:1;animation:sube-suave .6s cubic-bezier(.16,1,.3,1) backwards}
.franja.aparece.visible div:nth-child(2){animation-delay:.1s}
.franja.aparece.visible div:nth-child(3){animation-delay:.2s}
.franja.aparece.visible div:nth-child(4){animation-delay:.3s}

/* CTA: barrido diagonal como bandera */
.cta.aparece{opacity:0}
.cta.aparece.visible{opacity:1;animation:cta-barrido .9s cubic-bezier(.16,1,.3,1) both}
.cta.aparece .contenedor>*{opacity:0}
.cta.aparece.visible .contenedor>*{opacity:1;animation:sube-suave .7s ease .35s backwards}
.cta.aparece.visible .contenedor>*:nth-child(2){animation-delay:.45s}
.cta.aparece.visible .contenedor>*:nth-child(3){animation-delay:.55s}

/* Marquesinas: se deslizan al entrar */
.marquesina.aparece{opacity:0;transform:translateY(26px)}
.marquesina.aparece.visible{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}

/* Reseñas, galería en grilla, FAQ, datos de contacto, pasos: escalonados */
.aparece .resena,.aparece .galeria figure,.aparece .faq details,.aparece .datos-lista li,.aparece .paso,.aparece form .campo{opacity:0}
.aparece.visible .resena,.aparece.visible .galeria figure,.aparece.visible .faq details,
.aparece.visible .datos-lista li,.aparece.visible .paso,.aparece.visible form .campo{
  opacity:1;animation:sube-suave .65s cubic-bezier(.16,1,.3,1) backwards}
.aparece.visible .resena:nth-child(2),.aparece.visible .faq details:nth-child(2),
.aparece.visible .datos-lista li:nth-child(2),.aparece.visible .paso:nth-child(2),
.aparece.visible .galeria figure:nth-child(3n+2),.aparece.visible form .campo:nth-child(2){animation-delay:.1s}
.aparece.visible .resena:nth-child(3),.aparece.visible .faq details:nth-child(3),
.aparece.visible .datos-lista li:nth-child(3),.aparece.visible .paso:nth-child(3),
.aparece.visible .galeria figure:nth-child(3n),.aparece.visible form .campo:nth-child(3){animation-delay:.2s}
.aparece.visible .faq details:nth-child(4),.aparece.visible .datos-lista li:nth-child(4),
.aparece.visible .paso:nth-child(4),.aparece.visible form .campo:nth-child(4){animation-delay:.3s}
.aparece.visible .datos-lista li:nth-child(5),.aparece.visible form .campo:nth-child(5){animation-delay:.4s}

/* Footer: columnas en cascada */
.footer-grid.aparece>div{opacity:0}
.footer-grid.aparece.visible>div{opacity:1;animation:sube-suave .7s ease backwards}
.footer-grid.aparece.visible>div:nth-child(2){animation-delay:.12s}
.footer-grid.aparece.visible>div:nth-child(3){animation-delay:.24s}
.footer-grid.aparece.visible>div:nth-child(4){animation-delay:.36s}

/* Carrusel y mapa */
.carrusel.aparece{opacity:0;transform:translateY(40px) scale(.97)}
.carrusel.aparece.visible{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.aparece .mapa{opacity:0}
.aparece.visible .mapa{opacity:1;animation:img-barrido .9s cubic-bezier(.16,1,.3,1) .15s backwards}


/* ---------- Entrada especial de "Nuestros servicios" ---------- */
@keyframes titulo-vel{
  0%{opacity:0;transform:translateY(48px) skewY(2.5deg);filter:blur(12px) brightness(2.2)}
  60%{filter:blur(0) brightness(1.25)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes titulo-brillo{from{background-position:120% 0}to{background-position:-20% 0}}
@keyframes etiqueta-track{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.22em}}

#servicios .aparece h2{transform:none;transition:none;opacity:0}
#servicios .aparece.visible h2{opacity:1;
  background:linear-gradient(100deg,#fff 45%,var(--rojo) 50%,#fff 55%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:titulo-vel .9s cubic-bezier(.16,1,.3,1) .1s backwards,
            titulo-brillo 1.3s ease .95s backwards}
#servicios .aparece .etiqueta{opacity:0}
#servicios .aparece.visible .etiqueta{opacity:1;animation:etiqueta-track .8s cubic-bezier(.16,1,.3,1) backwards}

/* Tarjetas observadas de a una: cada una entra cuando llega al viewport */
.t-solo{opacity:0}
.t-solo.visible{opacity:1;animation:tarjeta-entra .9s cubic-bezier(.16,1,.3,1) backwards}
.t-solo:nth-child(2).visible{animation-delay:.1s}
.t-solo:nth-child(3).visible{animation-delay:.2s}
.t-solo:nth-child(4).visible{animation-delay:.3s}


/* ---------- Entrada del bloque "¿Qué es el detailing?" (todos los partido) ---------- */
@keyframes parrafo-foco{from{opacity:0;transform:translateY(18px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes check-li{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes check-tick{0%{transform:rotate(-45deg) scale(0)}70%{transform:rotate(-45deg) scale(1.4)}100%{transform:rotate(-45deg) scale(1)}}
@keyframes boton-pop{0%{opacity:0;transform:translateY(16px) scale(.9)}70%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:none}}

/* el contenedor ya no se desliza entero: animan sus piezas */
.aparece.visible .partido-txt{animation:none}
.aparece .partido-txt .etiqueta,.aparece .partido-txt h2,.aparece .partido-txt>p,
.aparece .partido-txt .lista-check li,.aparece .partido-txt .btn{opacity:0}
.aparece .partido-txt h2{transform:none;transition:none}

.aparece.visible .partido-txt .etiqueta{opacity:1;animation:etiqueta-track .7s cubic-bezier(.16,1,.3,1) backwards}
.aparece.visible .partido-txt h2{opacity:1;animation:titulo-vel .85s cubic-bezier(.16,1,.3,1) .1s backwards}
.aparece.visible .partido-txt>p{opacity:1;animation:parrafo-foco .8s ease .35s backwards}

/* checklist: cada ítem entra y el tilde se dibuja con rebote */
.aparece.visible .partido-txt .lista-check li{opacity:1;animation:check-li .55s cubic-bezier(.16,1,.3,1) backwards}
.aparece .lista-check li::before{transform-origin:left center}
.aparece.visible .lista-check li::before{animation:check-tick .45s cubic-bezier(.34,1.56,.64,1) backwards}
.aparece.visible .lista-check li:nth-child(1){animation-delay:.55s}
.aparece.visible .lista-check li:nth-child(2){animation-delay:.67s}
.aparece.visible .lista-check li:nth-child(3){animation-delay:.79s}
.aparece.visible .lista-check li:nth-child(4){animation-delay:.91s}
.aparece.visible .lista-check li:nth-child(5){animation-delay:1.03s}
.aparece.visible .lista-check li:nth-child(6){animation-delay:1.15s}
.aparece.visible .lista-check li:nth-child(1)::before{animation-delay:.8s}
.aparece.visible .lista-check li:nth-child(2)::before{animation-delay:.92s}
.aparece.visible .lista-check li:nth-child(3)::before{animation-delay:1.04s}
.aparece.visible .lista-check li:nth-child(4)::before{animation-delay:1.16s}
.aparece.visible .lista-check li:nth-child(5)::before{animation-delay:1.28s}
.aparece.visible .lista-check li:nth-child(6)::before{animation-delay:1.4s}

.aparece.visible .partido-txt .btn{opacity:1;animation:boton-pop .6s cubic-bezier(.34,1.56,.64,1) 1.5s backwards}


/* ---------- Banda con video de fondo (¿Qué es el detailing?) ---------- */
.banda-video{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) 0}
.banda-fondo{position:absolute;inset:0;z-index:0}
.banda-fondo video{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05) brightness(.85)}
.banda-fondo::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(110% 95% at 50% 50%, rgba(12,12,13,.42), rgba(12,12,13,.86) 82%),
    linear-gradient(to bottom, var(--negro), rgba(12,12,13,.25) 22%, rgba(12,12,13,.25) 78%, var(--negro))}
.banda-video .contenedor{position:relative;z-index:1}
.banda-centro{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:820px;margin:0 auto}
.banda-centro .etiqueta::after{content:"";width:34px;height:3px;background:var(--rojo)}
.banda-centro h2{text-shadow:0 6px 30px rgba(0,0,0,.7)}
.banda-centro>p{max-width:62ch;text-shadow:0 2px 14px rgba(0,0,0,.8);color:var(--texto)}
.banda-centro .lista-check{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 44px;text-align:left;margin:6px 0 34px;
  background:rgba(12,12,13,.55);border:1px solid rgba(254,6,20,.35);border-radius:var(--radio);
  padding:26px 34px;backdrop-filter:blur(8px)}
.banda-centro .lista-check li{color:var(--texto)}
@media (max-width:560px){
  .banda-centro .lista-check{grid-template-columns:1fr;padding:22px 24px}
}


/* ---------- Galería que corre con el scroll ---------- */
.seccion--galeria{padding-bottom:clamp(40px,5vw,70px)}
.scrolly{height:340vh}
.scrolly-sticky{position:sticky;top:0;height:100vh;height:100dvh;display:flex;
  flex-direction:column;justify-content:center;overflow:hidden;gap:clamp(22px,3.5vh,40px)}
.scrolly-titulo{margin:0}
.scrolly-pista{display:flex;gap:clamp(18px,2.2vw,30px);padding:0 22px;will-change:transform;width:max-content}
.scrolly-pista figure{flex:0 0 auto;margin:0;position:relative;overflow:hidden;
  border-radius:var(--radio);height:min(58vh,600px);aspect-ratio:4/5;background:var(--negro-2);
  box-shadow:var(--sombra)}
.scrolly-pista img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.scrolly-pista figure::after{content:"";position:absolute;inset:0;
  border:1px solid rgba(254,6,20,0);border-radius:var(--radio);transition:var(--trans);
  background:linear-gradient(to top,rgba(12,12,13,.55),transparent 45%)}
.scrolly-pista figure:hover::after{border-color:rgba(254,6,20,.6)}
.scrolly-pista figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px 22px;
  font-family:var(--font-titulo);font-weight:700;font-style:italic;font-size:1.02rem;text-transform:uppercase}
.scrolly-progreso{width:min(420px,70%);height:3px;margin:0 auto;border-radius:3px;
  background:var(--gris-linea);overflow:hidden}
.scrolly-progreso span{display:block;height:100%;width:0;background:var(--rojo);
  box-shadow:0 0 12px rgba(254,6,20,.9)}

/* modo simple (reduced motion o sin JS): tira deslizable a mano */
.scrolly.scrolly-simple{height:auto}
.scrolly-simple .scrolly-sticky{position:static;height:auto;overflow:visible}
.scrolly-simple .scrolly-pista{overflow-x:auto;width:auto;padding-bottom:14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.scrolly-simple .scrolly-pista figure{scroll-snap-align:center}
.scrolly-simple .scrolly-progreso{display:none}

@media (max-width:820px){
  .scrolly{height:300vh}
  .scrolly-pista figure{height:min(52vh,480px)}
}


/* ---------- Slideshow grande de trabajos ---------- */
.show{position:relative}
.show-marco{position:relative;height:min(68vh,660px);border-radius:var(--radio);
  overflow:hidden;background:var(--negro-2);box-shadow:var(--sombra)}
.show-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity 1s ease,visibility 1s}
.show-slide.activo{opacity:1;visibility:visible}
.show-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(30px) brightness(.4) saturate(1.15);transform:scale(1.18)}
.show-frente{position:relative;display:block;height:100%;margin:0 auto;object-fit:contain;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.6))}
.show-slide.activo .show-frente{animation:kenburns 5s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.055)}}
.show-slide figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:26px 30px;font-family:var(--font-titulo);font-weight:800;font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.6rem);text-transform:uppercase;
  background:linear-gradient(to top,rgba(12,12,13,.9),transparent);
  opacity:0;transform:translateY(16px);transition:opacity .7s ease .35s,transform .7s ease .35s}
.show-slide.activo figcaption{opacity:1;transform:none}
.show-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(12,12,13,.72);border:1px solid rgba(254,6,20,.65);color:#fff;
  font-size:1.7rem;line-height:1;display:grid;place-items:center;
  box-shadow:0 0 16px rgba(254,6,20,.35);backdrop-filter:blur(6px);transition:var(--trans)}
.show-btn:hover{background:var(--rojo)}
.show-prev{left:16px}
.show-next{right:16px}
.show-puntos{display:flex;justify-content:center;gap:10px;margin-top:22px}
.show-puntos button{width:26px;height:4px;border-radius:4px;border:0;cursor:pointer;
  background:var(--gris-linea);transition:var(--trans);padding:0}
.show-puntos button.activo{background:var(--rojo);box-shadow:0 0 10px rgba(254,6,20,.8)}
@media (max-width:820px){
  .show-marco{height:min(56vh,480px)}
  .show-btn{width:42px;height:42px;font-size:1.4rem}
  .show-prev{left:8px}.show-next{right:8px}
}

/* ---------- Franja de confianza ---------- */
.franja{background:var(--rojo);color:#fff}
.franja .contenedor{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:26px;padding-bottom:26px}
.franja div{display:flex;align-items:center;gap:12px;font-weight:600;font-size:.94rem;line-height:1.3}
.franja svg{width:26px;height:26px;fill:#fff;flex:none}

/* ---------- Grid de servicios ---------- */
.grid-servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.tarjeta{
  position:relative;overflow:hidden;border-radius:var(--radio);background:var(--negro-2);
  border:1px solid var(--gris-linea);transition:var(--trans);display:flex;flex-direction:column;
}
.tarjeta:hover{transform:translateY(-6px);border-color:var(--rojo)}
.tarjeta-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.tarjeta-img img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:.5s ease}
.tarjeta:hover .tarjeta-img img{transform:scale(1.07)}
.tarjeta-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,13,.95),rgba(12,12,13,.15) 60%)}
.tarjeta-cuerpo{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.tarjeta h3{margin-bottom:.5em;font-style:italic}
.tarjeta p{color:var(--texto-sec);font-size:.95rem;flex:1}
.tarjeta .enlace{
  margin-top:14px;font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rojo);display:inline-flex;align-items:center;gap:8px;
}
.tarjeta:hover .enlace{gap:14px}

/* ---------- Bloque partido ---------- */
.partido{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.partido--inv .partido-txt{order:2}
.partido-img{position:relative;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.partido-img img{width:100%}
.lista-check{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.lista-check li{position:relative;padding-left:28px;font-size:.95rem;color:var(--texto-sec)}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;
  border-left:3px solid var(--rojo);border-bottom:3px solid var(--rojo);transform:rotate(-45deg);
}

/* ---------- Servicios secundarios ---------- */
.grid-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--gris-linea);border:1px solid var(--gris-linea);border-radius:var(--radio);overflow:hidden}
.mini{background:var(--negro-2);padding:30px 26px;transition:var(--trans)}
.mini:hover{background:var(--gris)}
.mini-num{font-family:var(--font-titulo);font-style:italic;font-weight:800;font-size:1rem;color:var(--rojo);display:block;margin-bottom:10px}
.mini h3{font-size:1.05rem;margin-bottom:.4em}
.mini p{color:var(--texto-sec);font-size:.9rem;margin:0}

/* ---------- Proceso ---------- */
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.paso{position:relative;padding-top:56px}
.paso::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:var(--font-titulo);font-style:italic;font-weight:800;
  font-size:2.6rem;color:transparent;-webkit-text-stroke:2px var(--rojo);line-height:1;
}
.paso h3{font-size:1.05rem}
.paso p{color:var(--texto-sec);font-size:.93rem;margin:0}

/* ---------- CTA franja ---------- */
.cta{position:relative;overflow:hidden;background:var(--rojo);color:#fff;text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(0,0,0,.07) 0 3px,transparent 3px 44px)}
.cta .contenedor{position:relative;padding-top:clamp(50px,7vw,84px);padding-bottom:clamp(50px,7vw,84px)}
.cta h2{margin-bottom:.4em}
.cta p{max-width:60ch;margin:0 auto 30px;font-size:1.05rem;opacity:.95}


/* ---------- Galería ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.galeria figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radio-sm);aspect-ratio:1/1;background:var(--negro-2)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:.5s ease}
.galeria figure:hover img{transform:scale(1.08)}
.galeria figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:.82rem;font-weight:600;
  background:linear-gradient(to top,rgba(12,12,13,.92),transparent);
}
.galeria .alta{grid-row:span 2;aspect-ratio:auto}

/* ---------- Reseñas ---------- */
.grid-resenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.resena{background:var(--negro-2);border:1px solid var(--gris-linea);border-radius:var(--radio);padding:28px}
.resena p{font-size:.98rem;color:var(--texto-sec)}
.resena-autor{display:flex;align-items:center;gap:12px;margin-top:18px}
.resena-avatar{width:40px;height:40px;border-radius:50%;background:var(--rojo);display:grid;place-items:center;font-weight:800;font-style:italic;flex:none}
.resena-autor strong{display:block;font-size:.92rem;color:#fff}
.resena-autor span{font-size:.8rem;color:var(--texto-sec)}

/* ---------- Contacto ---------- */
.grid-contacto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px)}
.datos-lista{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:20px}
.datos-lista li{display:flex;gap:16px;align-items:flex-start}
.datos-lista svg{width:22px;height:22px;fill:var(--rojo);flex:none;margin-top:4px}
.datos-lista strong{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-sec);margin-bottom:2px}
.datos-lista a:hover{color:var(--rojo)}
.mapa{border-radius:var(--radio);overflow:hidden;border:1px solid var(--gris-linea);min-height:280px}
.mapa iframe{width:100%;height:100%;min-height:280px;border:0;display:block;filter:grayscale(1) invert(.9) contrast(.85)}

form{display:grid;gap:16px}
.campo{display:grid;gap:7px}
.campo label{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-sec)}
.campo input,.campo select,.campo textarea{
  background:var(--negro-2);border:1px solid var(--gris-linea);border-radius:var(--radio-sm);
  padding:14px 16px;color:#fff;font-family:inherit;font-size:1rem;transition:var(--trans);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--rojo);background:var(--gris)}
.campo textarea{resize:vertical;min-height:120px}
.doble{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aviso-form{font-size:.88rem;padding:14px 16px;border-radius:var(--radio-sm);display:none}
.aviso-form.ok{display:block;background:rgba(45,160,80,.14);border:1px solid rgba(45,160,80,.5);color:#7ee0a0}
.aviso-form.error{display:block;background:rgba(254,6,20,.12);border:1px solid rgba(254,6,20,.5);color:#ff9098}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--negro-2);border:1px solid var(--gris-linea);border-radius:var(--radio-sm);padding:18px 22px}
.faq details[open]{border-color:var(--rojo)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rojo);font-weight:800;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:14px 0 0;color:var(--texto-sec);font-size:.95rem}

/* ---------- Hero interno ---------- */
.hero-int{position:relative;padding:clamp(50px,7vw,90px) 0;background:var(--negro-2);border-bottom:1px solid var(--gris-linea);overflow:hidden}
.hero-int::before{content:"";position:absolute;top:-20%;right:-10%;width:44%;height:150%;background:var(--rojo);opacity:.10;transform:skewX(-13deg)}
.hero-int .contenedor{position:relative}
.miga{font-size:.8rem;color:var(--texto-sec);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.miga a:hover{color:var(--rojo)}
.hero-int p{max-width:60ch;color:var(--texto-sec);margin:0}

/* ---------- Footer ---------- */
.footer{background:var(--negro-2);border-top:1px solid var(--gris-linea);padding-top:64px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px}
.footer h4{font-size:.82rem;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.footer p,.footer li{color:var(--texto-sec);font-size:.93rem}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer a:hover{color:var(--rojo)}
.footer .logo{margin-bottom:18px}
.footer-legal{border-top:1px solid var(--gris-linea);padding:20px 0;font-size:.83rem;color:var(--texto-sec);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.footer-legal a{color:var(--rojo)}

/* ---------- WhatsApp flotante ---------- */
.wa{
  position:fixed;right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));z-index:80;width:58px;height:58px;border-radius:50%;
  background:var(--negro-2);display:grid;place-items:center;border:2px solid var(--rojo);
  box-shadow:0 0 22px rgba(254,6,20,.5),inset 0 0 12px rgba(254,6,20,.28);
  transition:var(--trans);
}
.wa::before{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:-1;
  box-shadow:0 0 30px rgba(254,6,20,.85),0 0 70px rgba(254,6,20,.35);
  opacity:.35;animation:wa-late 2.6s ease-in-out infinite;will-change:opacity}
.wa:hover{transform:scale(1.08);background:var(--rojo)}
.wa svg{width:30px;height:30px;fill:var(--rojo);filter:drop-shadow(0 0 6px rgba(254,6,20,.9));transition:var(--trans)}
.wa:hover svg{fill:#fff;filter:none}
@keyframes wa-late{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- Animación de entrada ---------- */
.aparece{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.aparece.visible{opacity:1;transform:none}

/* Titulares que entran "en movimiento" */
.aparece h1,.aparece h2{transform:translateX(-26px) skewX(-5deg);opacity:0;
  transition:transform .85s cubic-bezier(.16,1,.3,1) .08s,opacity .8s ease .08s}
.aparece.visible h1,.aparece.visible h2{transform:none;opacity:1}
.aparece .etiqueta::before,.aparece .etiqueta::after{width:0;transition:width .55s ease .25s}
.aparece.visible .etiqueta::before,.aparece.visible .etiqueta::after{width:34px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-mini{grid-template-columns:repeat(2,1fr)}
  .hero .contenedor{grid-template-columns:1fr}
  .hero-figura{order:-1;max-width:420px}
  .partido,.grid-contacto{grid-template-columns:1fr}
  .partido--inv .partido-txt{order:0}
  .franja .contenedor{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  /* backdrop-filter convierte al header en bloque contenedor de los fixed: lo apagamos en mobile */
  .header{backdrop-filter:none;background:var(--negro)}
  .nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;height:100vh;height:100dvh;z-index:65;
    width:min(320px,84vw);background:var(--negro-2);overflow-y:auto;
    flex-direction:column;align-items:flex-start;gap:8px;padding:96px 30px 30px;
    transform:translateX(100%);transition:transform .3s ease;border-left:1px solid var(--gris-linea);
  }
  .nav.abierto{transform:none}
  .nav a{font-size:1rem;padding:10px 0;width:100%}
  .burger{display:block;margin-left:auto;z-index:70}
  .header .btn{display:none}
  .topbar-datos span:nth-child(3){display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .wa{width:52px;height:52px}
  .wa svg{width:26px;height:26px}
  .franja .contenedor{grid-template-columns:1fr}
  .grid-mini{grid-template-columns:1fr}
  .lista-check,.doble{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-datos{gap:14px 22px}
}


/* ============================================================
   MOVIMIENTO — animaciones de velocidad
   ============================================================ */

/* Barra de progreso de lectura, sobre el borde del header */
.progreso{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--rojo);
  box-shadow:0 0 14px rgba(254,6,20,.9);transition:width .1s linear}

/* Estelas de velocidad en el hero */
.hero-lineas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}

/* Faro que sigue al puntero */
.hero-luz{position:absolute;top:0;left:0;width:620px;height:620px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(254,6,20,.18),transparent 62%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .5s ease;z-index:0}
.hero:hover .hero-luz{opacity:1}
.hero .contenedor{z-index:1}

/* Velocímetro de reseñas */
.hero-figura::before{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,#0C0C0D 10%,rgba(12,12,13,.6) 52%,transparent);
  border-radius:0 0 var(--radio) var(--radio)}
.gauge{z-index:2;position:absolute;left:-22px;bottom:-26px;width:180px;padding:16px 16px 12px;
  background:rgba(12,12,13,.92);border:1px solid var(--gris-linea);border-radius:var(--radio);
  backdrop-filter:blur(8px);box-shadow:var(--sombra);text-align:center}
.gauge svg{width:100%;height:auto;display:block}
.gauge-arco{stroke:var(--rojo);stroke-width:11;fill:none;stroke-linecap:round;
  stroke-dasharray:245;stroke-dashoffset:245;transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1) .3s}
.gauge.visible .gauge-arco{stroke-dashoffset:0}
.gauge-aguja{transform:rotate(-92deg);transform-origin:100px 100px;
  transition:transform 1.8s cubic-bezier(.34,1.4,.5,1) .3s}
.gauge.visible .gauge-aguja{transform:rotate(88deg)}
.gauge-valor{font-family:var(--font-titulo);font-style:italic;font-weight:800;font-size:1.9rem;line-height:1;color:#fff}
.gauge-pie{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-sec);margin-top:4px;white-space:nowrap}

/* Contadores tipo odómetro */
.contador{font-variant-numeric:tabular-nums}

/* Marquesina de servicios */
.marquesina{overflow:hidden;background:var(--negro-2);border-top:1px solid var(--gris-linea);
  border-bottom:1px solid var(--gris-linea);padding:20px 0;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquesina-pista{display:inline-flex;align-items:center;gap:38px;animation:correr 34s linear infinite;will-change:transform}
.marquesina:hover .marquesina-pista{animation-play-state:paused}
.marquesina b{font-family:var(--font-titulo);font-style:italic;font-weight:800;
  font-size:clamp(1.2rem,2.6vw,1.9rem);text-transform:uppercase;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1.3px var(--texto-sec)}
.marquesina b:nth-child(4n+1){color:var(--rojo);-webkit-text-stroke:0}
.marquesina i{width:36px;height:22px;flex:none;opacity:.45;
  background-image:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0);background-size:11px 11px}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Barrido de luz sobre las tarjetas */
.tarjeta::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
  transform:skewX(-18deg);transition:left .7s ease}
.tarjeta:hover::before{left:150%}

/* Brillo al pasar por los botones */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-20deg);transition:left .65s ease}
.btn:hover::after{left:160%}

/* Franja roja: iconos que aceleran al pasar */
.franja div{transition:transform .3s ease}
.franja div:hover{transform:translateX(6px)}

/* Parallax suave de las fotos de bloque */
.partido-img img{will-change:transform}

/* Numeración del proceso: se dibuja al aparecer */
.aparece .paso::before{opacity:0;transform:translateX(-14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.aparece.visible .paso::before{opacity:1;transform:none}
.aparece.visible .paso:nth-child(2)::before{transition-delay:.12s}
.aparece.visible .paso:nth-child(3)::before{transition-delay:.24s}
.aparece.visible .paso:nth-child(4)::before{transition-delay:.36s}

@media (max-width:980px){
  .gauge{left:auto;right:14px;bottom:14px;width:132px;padding:12px 12px 9px}
  .gauge-valor{font-size:1.5rem}
  .gauge-pie{font-size:.58rem;letter-spacing:.1em}
  .hero-figura::after{display:none}
}
@media (max-width:480px){
  .topbar-datos span:nth-child(1){display:none}
}

@media (prefers-reduced-motion:reduce){
  .marquesina-pista{animation:none}
  .gauge-arco{stroke-dashoffset:0}
  .gauge-aguja{transform:rotate(88deg)}
  .aparece h1,.aparece h2{transform:none;opacity:1}
  .hero-nombre .cuatro,.hero-nombre .palabra{transform:none;animation:none}
  .hero-sub{opacity:1;animation:none}
  .aparece .tarjeta,.aparece .mini,.aparece .partido-img,.aparece .partido-txt{opacity:1}
  .slide{transform:none;opacity:1}
  .show-slide.activo .show-frente{animation:none}
  .franja.aparece,.franja.aparece div,.cta.aparece .contenedor>*,.marquesina.aparece,
  .aparece .resena,.aparece .galeria figure,.aparece .faq details,.aparece .datos-lista li,
  .aparece .paso,.aparece form .campo,.footer-grid.aparece>div,.carrusel.aparece,.aparece .mapa{opacity:1;transform:none}
  .cta.aparece{opacity:1}
  .t-solo,#servicios .aparece h2,#servicios .aparece .etiqueta{opacity:1}
  .aparece .partido-txt .etiqueta,.aparece .partido-txt h2,.aparece .partido-txt>p,
  .aparece .partido-txt .lista-check li,.aparece .partido-txt .btn{opacity:1}
  #servicios .aparece.visible h2{background:none;-webkit-text-fill-color:currentColor}
  *{animation:none!important;transition:none!important}
  .aparece{opacity:1;transform:none}
}