/* APA ID Ploteos · muestra de Lumvo Digital
   Estética del local: pared negra veteada, techo de luces blancas y logo grafiti en neón rosa/violeta/cian. */
:root {
  --negro: #07060a;
  --negro-2: #0f0d14;
  --negro-3: #17141f;
  --linea: rgba(255, 255, 255, .09);
  --texto: #f3f0f7;
  --gris: #a49fb0;
  --rosa: #ff2bd6;
  --violeta: #9b4dff;
  --cian: #2ef2ff;
  --verde: #a6ff3d;
  --glow-rosa: 0 0 6px #ff2bd6, 0 0 18px rgba(255, 43, 214, .75), 0 0 46px rgba(255, 43, 214, .45);
  --glow-cian: 0 0 6px #2ef2ff, 0 0 18px rgba(46, 242, 255, .7), 0 0 46px rgba(46, 242, 255, .4);
  --f-tit: 'Unbounded', system-ui, sans-serif;
  --f-txt: 'Manrope', system-ui, sans-serif;
  --f-graf: 'Permanent Marker', 'Unbounded', cursive;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-color: #3b2a4a #07060a; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--negro);
  color: var(--texto);
  font-family: var(--f-txt);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip; /* clip y no hidden: hidden rompe las partes fijas (sticky) de la rueda y el hero */
  -webkit-font-smoothing: antialiased;
}
body.cargando { overflow: hidden; }
/* Fondo: negro liso con un brillo violeta arriba y una grilla de puntitos nítida que se desvanece hacia los bordes */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% -10%, rgba(155, 77, 255, .13), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, rgba(46, 242, 255, .05), transparent 70%),
    var(--negro);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .11) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 30%, transparent 85%);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--rosa); color: #fff; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 6px; }

.contenedor { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ---------- Tipografía y piezas comunes ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-tit); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cian); font-weight: 600;
}
.etiqueta::before { content: ''; width: 26px; height: 1px; background: currentColor; box-shadow: var(--glow-cian); }
.etiqueta .punto { display: none; }
.titulo {
  font-family: var(--f-tit); font-weight: 900; line-height: .98; letter-spacing: -.02em;
  font-size: clamp(38px, 7vw, 92px); margin-top: 14px; text-wrap: balance;
}
.sec-cab { margin-bottom: 44px; }
.sec-sub { color: var(--gris); max-width: 560px; margin-top: 18px; font-size: 18px; }

/* Texto en neón (rosa con borde de luz y parpadeo leve) */
.neon-txt {
  position: relative; display: inline-block;
  font-family: var(--f-graf); font-weight: 400; letter-spacing: 0;
  color: #fff;
  text-shadow: 0 0 2px #fff, var(--glow-rosa);
  animation: zumbido 6s infinite;
  padding-right: .06em;
}
.neon-txt.grande { font-size: 1.12em; }
@keyframes zumbido {
  0%, 18%, 22%, 60%, 64%, 100% { opacity: 1; }
  20%, 62% { opacity: .55; }
}
.neon-c { color: var(--cian); text-shadow: var(--glow-cian); }

.btn {
  --c: var(--rosa);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-tit); font-weight: 600; font-size: 14px; letter-spacing: .04em;
  padding: 16px 28px; border-radius: 100px;
  background: var(--c); color: #0a0010;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 0 22px rgba(255, 43, 214, .55), 0 10px 40px rgba(255, 43, 214, .25);
  transition: box-shadow .3s, background .3s, color .3s, scale .16s cubic-bezier(.23, 1, .32, 1);
}
.btn:active { scale: .97; }
.btn:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 0 34px rgba(255, 43, 214, .9), 0 10px 60px rgba(255, 43, 214, .45); }
.btn-borde { background: transparent; color: var(--texto); box-shadow: 0 0 0 1.5px var(--cian) inset, 0 0 18px rgba(46, 242, 255, .25); }
.btn-borde:hover { color: #001114; background: var(--cian); box-shadow: 0 0 30px rgba(46, 242, 255, .7); }
.btn-chico { padding: 11px 20px; font-size: 12px; }
.btn-grande { padding: 20px 34px; font-size: 15px; }
.btn-ancho { width: 100%; margin-top: 26px; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Intro: pared con grafitis + cartel de neón ----------
   Toda la animación es CSS de opacidad y escala: corre en la placa de video y sigue fluida aunque el procesador esté
   ocupado armando la página de abajo (antes era JS y en celus comunes se trababa hasta 1 s). Arranca sola al pintar
   la página; app.js solo la saca cuando termina la barra (o al tocar). Tiempos: 0 = primer cuadro + .35 s. */
.intro {
  --t0: .35s;
  position: fixed; inset: 0; z-index: 100; background: #050408; overflow: hidden;
  display: grid; place-items: center; align-content: center; gap: 34px;
  transition: transform .9s cubic-bezier(.7, 0, .2, 1);
  cursor: pointer;
}
.intro.fuera { transform: translateY(-101%); }
/* Hasta que llegan las tipografías (clase "fuentes", la pone el script del <head>) todo queda quieto y el cartel
   escondido: así nada aparece con letras de reemplazo ni chorrea sin su grafiti */
html:not(.fuentes) .intro *, html:not(.fuentes) .intro *::after { animation-play-state: paused !important; }
html:not(.fuentes) .intro-cartel { opacity: 0; }
.sin-intro .intro { display: none; }
.intro-pared { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 50%, #15111c, #07060a 70%); }
/* Oscuridad sobre la pared: baja cada vez que el neón prende */
.intro-sombra { position: absolute; inset: 0; z-index: 1; background: #030205; opacity: .62; pointer-events: none;
  animation: intro-luz 2.3s var(--t0) both; animation-timing-function: steps(1, end); }
.intro-halo { position: absolute; left: 50%; top: 50%; width: min(1100px, 120vw); height: min(620px, 80vh); transform: translate(-50%, -50%); z-index: 2; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 43, 214, .32), rgba(155, 77, 255, .12) 55%, transparent); opacity: 0;
  animation: intro-halo 2.3s var(--t0) both; animation-timing-function: steps(1, end); }
.intro-cartel, .intro-barra { position: relative; z-index: 3; }
.intro-cartel { text-align: center; line-height: .9; animation: intro-cartel 1.4s calc(var(--t0) + .5s) cubic-bezier(.23, 1, .32, 1) both; }
/* Tubos apagados (rosa oscuro) y, encima, la misma letra prendida, que parpadea con opacidad */
.neon-apa { display: block; font-family: var(--f-tit); font-weight: 900; font-size: clamp(64px, 16vw, 190px); letter-spacing: .02em; color: #2c0b27; }
.neon-apa b { position: relative; font-weight: inherit; display: inline-block; }
.neon-apa b::after, .neon-ploteos::after {
  content: attr(data-l); position: absolute; left: 0; top: 0; opacity: 0;
  animation-duration: 2.3s; animation-delay: var(--t0); animation-fill-mode: both; animation-timing-function: steps(1, end);
}
.neon-apa b::after { color: #fff; text-shadow: 0 0 3px #fff, 0 0 8px #ff2bd6, 0 0 24px #ff2bd6, 0 0 60px rgba(255, 43, 214, .8), 0 0 120px rgba(255, 43, 214, .45); }
.neon-apa b:nth-child(1)::after { animation-name: intro-l0; }
.neon-apa b:nth-child(2)::after { animation-name: intro-l1; }
.neon-apa b:nth-child(3)::after { animation-name: intro-l2; }
.neon-apa b:nth-child(4)::after { animation-name: intro-l3; }
.neon-apa b:nth-child(5)::after { animation-name: intro-l4; }
.neon-ploteos { position: relative; display: inline-block; font-family: var(--f-graf); font-size: clamp(34px, 7vw, 80px); color: rgba(46, 242, 255, .16); transform: rotate(-6deg) translateY(-.2em); }
.neon-ploteos::after { color: #fff; text-shadow: 0 0 3px #fff, 0 0 8px #2ef2ff, 0 0 24px #2ef2ff, 0 0 60px rgba(46, 242, 255, .7); animation-name: intro-plot; }
.intro-barra { width: 180px; height: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; border-radius: 2px; }
.intro-barra i { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, var(--rosa), var(--cian)); box-shadow: var(--glow-rosa);
  animation: intro-barra 3.05s var(--t0) linear both; }
.intro-saltar { position: absolute; z-index: 3; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--f-tit); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* Grafitis: relleno + contorno oscuro + bloque 3D + niebla de aerosol */
.graf {
  --c: #ffe14d; --b: #ff2bd6; --n: rgba(255, 225, 77, .35);
  position: absolute; line-height: .9; white-space: nowrap; color: var(--c);
  transform: rotate(var(--r, 0deg));
  text-shadow:
    -3px -3px 0 #0b0710, 3px -3px 0 #0b0710, -3px 3px 0 #0b0710, 3px 3px 0 #0b0710,
    0 -3px 0 #0b0710, 0 3px 0 #0b0710, -3px 0 0 #0b0710, 3px 0 0 #0b0710,
    6px 6px 0 var(--b), 9px 9px 0 var(--b), 12px 12px 0 #0b0710, 16px 18px 12px rgba(0, 0, 0, .5);
  filter: drop-shadow(0 0 22px var(--n));
}
.gota { position: absolute; top: 80%; width: 7px; height: var(--h); background: var(--c); border-radius: 0 0 5px 5px; transform-origin: top; box-shadow: 0 0 0 2px #0b0710; }
.gota::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 11px; height: 11px; transform: translateX(-50%); border-radius: 50%; background: var(--c); }
.g-apa { --r: -9deg; left: 3%; top: 7%; font: 400 clamp(90px, 13vw, 220px) 'Sedgwick Ave Display', var(--f-graf); }
.g-plotea { --r: 6deg; --c: #2ef2ff; --b: #7a2cff; --n: rgba(46, 242, 255, .35); right: 4%; top: 9%; font: 400 clamp(54px, 7.4vw, 130px) 'Rubik Spray Paint', var(--f-graf); }
.g-wrap { --r: 5deg; --c: #ff2bd6; --b: #ffe14d; --n: rgba(255, 43, 214, .35); left: 4%; bottom: 9%; font: 400 clamp(64px, 8.6vw, 150px) 'Rubik Bubbles', var(--f-graf); }
.g-ppf { --r: -6deg; --c: #a6ff3d; --b: #2ef2ff; --n: rgba(166, 255, 61, .35); right: 6%; bottom: 11%; font: 400 clamp(80px, 11vw, 190px) 'Sedgwick Ave Display', var(--f-graf); }
.g-id { --r: -4deg; right: 30%; bottom: 3%; font: 400 clamp(70px, 9vw, 160px) 'Rubik Bubbles', var(--f-graf); color: transparent; -webkit-text-stroke: 3px #9b4dff; text-shadow: none; filter: drop-shadow(0 0 14px rgba(155, 77, 255, .6)); opacity: .8; }
.g-tag { font: 400 clamp(18px, 2vw, 32px) var(--f-graf); text-shadow: 0 0 12px var(--n); filter: none; }
.g-mate { --r: -5deg; --c: #fff; --n: rgba(255, 255, 255, .4); right: 4%; top: 60%; }
.g-anos { --r: 7deg; --c: #ffe14d; left: 6%; top: 52%; }
.deco { position: absolute; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.deco path, .deco ellipse { stroke-dasharray: 1; stroke-dashoffset: 0; }
.d-corona { width: clamp(60px, 6vw, 110px); left: 9%; top: 3%; stroke: #ffe14d; stroke-width: 4; transform: rotate(-12deg); filter: drop-shadow(0 0 8px rgba(255, 225, 77, .6)); }
.d-flecha { width: clamp(110px, 11vw, 190px); right: 21%; top: 29%; stroke: #2ef2ff; stroke-width: 5; transform: rotate(8deg); filter: drop-shadow(0 0 8px rgba(46, 242, 255, .6)); }
.d-x { width: clamp(34px, 3vw, 54px); left: 31%; bottom: 10%; stroke: #ff2bd6; stroke-width: 7; filter: drop-shadow(0 0 8px rgba(255, 43, 214, .6)); }
.d-halo { width: clamp(90px, 9vw, 150px); left: 14%; top: 31%; stroke: #a6ff3d; stroke-width: 4; transform: rotate(-14deg); filter: drop-shadow(0 0 8px rgba(166, 255, 61, .6)); }
.d-estrella { position: absolute; width: clamp(22px, 2.4vw, 40px); }
.d-estrella path { fill: currentColor; stroke: none; }
.e1 { color: #fff; left: 27%; top: 12%; filter: drop-shadow(0 0 8px #fff); }
.e2 { color: #2ef2ff; right: 34%; top: 20%; filter: drop-shadow(0 0 8px #2ef2ff); }
.e3 { color: #ff2bd6; left: 22%; bottom: 30%; filter: drop-shadow(0 0 8px #ff2bd6); }
.e4 { color: #ffe14d; right: 22%; bottom: 33%; width: clamp(16px, 1.6vw, 28px); filter: drop-shadow(0 0 8px #ffe14d); }
.salpicon { position: absolute; width: clamp(90px, 9vw, 160px); overflow: visible; }
.s1 { left: 0; top: 34%; color: #ff2bd6; }
.s2 { right: 12%; top: 2%; color: #ffe14d; }
.s3 { left: 31%; bottom: 2%; color: #2ef2ff; }
.s4 { right: 0; top: 58%; color: #a6ff3d; }
.salpicon circle { fill: currentColor; }

/* Intro: aparición de los grafitis (aerosol de izquierda a derecha), chorreados, dibujos y salpicaduras.
   Se usan scale/translate/opacity sueltos para no pisar el rotate() de cada pieza. */
.intro .graf { transform-origin: left center; animation: intro-aerosol .5s cubic-bezier(.3, .7, .2, 1) both; }
.intro .g-apa { animation-delay: var(--t0); }
.intro .g-plotea { animation-delay: calc(var(--t0) + .13s); }
.intro .g-wrap { animation-delay: calc(var(--t0) + .26s); }
.intro .g-ppf { animation-delay: calc(var(--t0) + .39s); }
.intro .g-id { animation-delay: calc(var(--t0) + .52s); }
.intro .g-mate { animation-delay: calc(var(--t0) + .65s); }
.intro .g-anos { animation-delay: calc(var(--t0) + .78s); }
.intro .gota { scale: 1 0; animation: intro-gota 1.3s calc(var(--t0) + .6s) cubic-bezier(.55, 0, 1, .45) both; }
.intro .gota:nth-of-type(2) { animation-delay: calc(var(--t0) + .75s); }
.intro .gota:nth-of-type(3) { animation-delay: calc(var(--t0) + .9s); }
.intro .deco:not(.d-estrella) { animation: intro-pop .45s cubic-bezier(.23, 1, .32, 1) both; }
.intro .d-corona { animation-delay: calc(var(--t0) + .25s); }
.intro .d-flecha { animation-delay: calc(var(--t0) + .4s); }
.intro .d-x { animation-delay: calc(var(--t0) + .55s); }
.intro .d-halo { animation-delay: calc(var(--t0) + .7s); }
.intro .d-estrella { animation: intro-estrella .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.intro .e1 { animation-delay: calc(var(--t0) + .5s); }
.intro .e2 { animation-delay: calc(var(--t0) + .6s); }
.intro .e3 { animation-delay: calc(var(--t0) + .7s); }
.intro .e4 { animation-delay: calc(var(--t0) + .8s); }
.intro .salpicon { animation: intro-salpicon .3s cubic-bezier(.34, 1.56, .64, 1) both; }
.intro .s1 { animation-delay: calc(var(--t0) + .2s); }
.intro .s2 { animation-delay: calc(var(--t0) + .3s); }
.intro .s3 { animation-delay: calc(var(--t0) + .4s); }
.intro .s4 { animation-delay: calc(var(--t0) + .5s); }

@keyframes intro-aerosol { from { opacity: 0; scale: .5 1; translate: -4% 0; } 40% { opacity: 1; } to { opacity: 1; scale: 1 1; translate: 0 0; } }
@keyframes intro-gota { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes intro-pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes intro-estrella { from { opacity: 0; scale: .2; rotate: -90deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes intro-salpicon { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes intro-cartel { from { scale: .96; } to { scale: 1; } }
@keyframes intro-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Neón: cada letra prende con fallas; al final todo el cartel titila y queda firme (0 = apagado, 1 = prendido) */
@keyframes intro-l0 { 0% { opacity: 0; } 21.7% { opacity: 1; } 24.3% { opacity: 0; } 27.8% { opacity: 1; } 84.8% { opacity: 0; } 87% { opacity: 1; } 90.4% { opacity: 0; } 92.6%, 100% { opacity: 1; } }
@keyframes intro-l1 { 0% { opacity: 0; } 34.8% { opacity: 1; } 42.2% { opacity: 0; } 44.8% { opacity: 1; } 84.8% { opacity: 0; } 87% { opacity: 1; } 90.4% { opacity: 0; } 92.6%, 100% { opacity: 1; } }
@keyframes intro-l2 { 0% { opacity: 0; } 40% { opacity: 1; } 84.8% { opacity: 0; } 87% { opacity: 1; } 90.4% { opacity: 0; } 92.6%, 100% { opacity: 1; } }
@keyframes intro-l3 { 0% { opacity: 0; } 51.3% { opacity: 1; } 58.7% { opacity: 0; } 61.3% { opacity: 1; } 84.8% { opacity: 0; } 87% { opacity: 1; } 90.4% { opacity: 0; } 92.6%, 100% { opacity: 1; } }
@keyframes intro-l4 { 0% { opacity: 0; } 56.5% { opacity: 1; } 84.8% { opacity: 0; } 87% { opacity: 1; } 90.4% { opacity: 0; } 92.6%, 100% { opacity: 1; } }
@keyframes intro-plot { 0% { opacity: 0; } 67.8% { opacity: 1; } 70% { opacity: 0; } 73% { opacity: 1; } 84.8% { opacity: 0; } 87% { opacity: 1; } 90.4% { opacity: 0; } 92.6%, 100% { opacity: 1; } }
/* La pared se ilumina según cuántos tubos están prendidos */
@keyframes intro-luz { 0% { opacity: .62; } 21.7% { opacity: .53; } 24.3% { opacity: .62; } 27.8% { opacity: .53; } 34.8% { opacity: .45; } 40% { opacity: .36; } 42.2% { opacity: .45; } 44.8% { opacity: .36; } 51.3% { opacity: .27; } 56.5% { opacity: .19; } 58.7% { opacity: .27; } 61.3% { opacity: .19; } 67.8% { opacity: .1; } 70% { opacity: .19; } 73% { opacity: .1; } 84.8% { opacity: .62; } 87% { opacity: .1; } 90.4% { opacity: .62; } 92.6%, 100% { opacity: .1; } }
@keyframes intro-halo { 0% { opacity: 0; } 21.7% { opacity: .17; } 24.3% { opacity: 0; } 27.8% { opacity: .17; } 34.8% { opacity: .33; } 40% { opacity: .5; } 42.2% { opacity: .33; } 44.8% { opacity: .5; } 51.3% { opacity: .67; } 56.5% { opacity: .83; } 58.7% { opacity: .67; } 61.3% { opacity: .83; } 67.8% { opacity: 1; } 70% { opacity: .83; } 73% { opacity: 1; } 84.8% { opacity: 0; } 87% { opacity: 1; } 90.4% { opacity: 0; } 92.6%, 100% { opacity: 1; } }

/* ---------- Progreso ---------- */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--rosa), var(--violeta), var(--cian)); box-shadow: var(--glow-rosa);
}

/* ---------- Barra ---------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px; padding: 16px clamp(16px, 4vw, 44px);
  transition: background .4s, padding .4s, backdrop-filter .4s;
}
.barra.solida { background: rgba(7, 6, 10, .72); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); padding-block: 10px; border-bottom: 1px solid var(--linea); }
.marca { display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; white-space: nowrap; }
.barra > .btn { white-space: nowrap; }
.marca-apa { font-family: var(--f-tit); font-weight: 900; font-size: 22px; letter-spacing: .02em; text-shadow: 0 0 2px #fff, 0 0 14px rgba(255, 43, 214, .8); }
.marca-plot { font-family: var(--f-graf); font-size: 19px; color: var(--cian); text-shadow: var(--glow-cian); transform: rotate(-6deg); display: inline-block; }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { font-size: 14px; font-weight: 500; color: var(--gris); position: relative; transition: color .25s; }
.menu a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--rosa); box-shadow: var(--glow-rosa); transition: right .3s var(--ease); }
.menu a:hover { color: #fff; }
.menu a:hover::after { right: 0; }
.hamburguesa { display: none; width: 42px; height: 42px; position: relative; }
.hamburguesa i { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: transform .3s, top .3s; }
.hamburguesa i:first-child { top: 16px; }
.hamburguesa i:last-child { top: 25px; }
.hamburguesa[aria-expanded="true"] i:first-child { top: 20px; transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] i:last-child { top: 20px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 230vh; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); padding: 110px clamp(16px, 4vw, 44px) 24px; overflow: hidden; }
.hero-fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Luces del ambiente: degradés suaves (sin blur, que en pantallas grandes se ve manchado) */
.luz { position: absolute; border-radius: 50%; }
.luz-rosa { width: 70vw; height: 70vw; left: -30vw; top: 22vh; background: radial-gradient(closest-side, rgba(255, 43, 214, .22), rgba(255, 43, 214, .07) 55%, transparent); }
.luz-cian { width: 60vw; height: 60vw; right: -26vw; top: -26vw; background: radial-gradient(closest-side, rgba(46, 242, 255, .13), rgba(46, 242, 255, .04) 55%, transparent); }
/* Las luces del techo del local (paneles blancos) */
.techo { position: absolute; top: 70px; left: 50%; transform: translateX(-50%) perspective(500px) rotateX(62deg); display: flex; gap: 4vw; opacity: .5; }
.techo i { width: 9vw; height: 3.6vw; background: #fff; border-radius: 3px; box-shadow: 0 0 30px rgba(255, 255, 255, .7); }
.hero-texto { position: relative; z-index: 2; max-width: 820px; }
.hero-titulo { font-family: var(--f-tit); font-weight: 900; font-size: clamp(46px, 9vw, 132px); line-height: .92; letter-spacing: -.03em; margin: 18px 0 20px; }
.hero-titulo .linea { display: block; overflow: hidden; padding: .04em .1em .12em 0; }
.hero-titulo .linea > span { display: inline-block; }
.hero-titulo .neon-txt { font-size: .92em; transform: rotate(-3deg); }
.hero-sub { color: var(--gris); font-size: clamp(16px, 1.6vw, 19px); max-width: 520px; }
.hero-sub strong { color: #fff; }
.hero-botones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
/* El auto va abajo a la derecha y se achica según el alto de la pantalla para que nunca quede cortado */
.hero-auto { position: absolute; right: 0; bottom: 2svh; z-index: 1; width: min(1000px, 70vw, calc((100svh - 330px) * 2.3)); }
.auto { position: relative; z-index: 2; aspect-ratio: 2.3 / 1; display: flex; align-items: flex-end; }
.auto svg { width: 100%; height: auto; overflow: visible; }
.auto canvas { width: 100%; height: 100%; display: block; }
/* Mientras carga el modelo 3D */
.auto:empty::after { content: ''; margin: auto; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .08); border-top-color: var(--rosa); box-shadow: 0 0 18px rgba(255, 43, 214, .25); animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.piso { position: absolute; left: 6%; right: 6%; bottom: 3%; height: 22%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 43, 214, .5), transparent 70%); filter: blur(18px); z-index: 1; }
.hero-pista { position: relative; z-index: 3; text-align: center; margin-top: 4px; font-size: 13px; color: var(--gris); letter-spacing: .04em; }
.hero-pista span { font-family: var(--f-tit); color: #fff; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--linea); padding: 5px 10px; border-radius: 100px; margin-right: 8px; animation: rebote 1.6s infinite; display: inline-block; }
@keyframes rebote { 50% { transform: translateY(4px); } }
.hero-estado { display: flex; align-items: center; gap: 14px; justify-content: center; font-size: 12px; color: var(--gris); font-family: var(--f-tit); letter-spacing: .06em; margin-top: 6px; }
.hero-estado-barra { width: 160px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hero-estado-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rosa), var(--cian)); box-shadow: var(--glow-rosa); }

/* Partes del auto que se tiñen por CSS */
.auto .faro { fill: var(--cian); filter: drop-shadow(0 0 6px var(--cian)) drop-shadow(0 0 14px var(--cian)); }
.auto .stop { fill: var(--rosa); filter: drop-shadow(0 0 6px var(--rosa)) drop-shadow(0 0 14px var(--rosa)); }
.auto .neon-bajo { stroke: var(--rosa); stroke-width: 3; fill: none; filter: drop-shadow(0 0 6px var(--rosa)) drop-shadow(0 0 16px var(--rosa)); stroke-linecap: round; }
.auto .squeegee { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px var(--cian)) drop-shadow(0 0 16px var(--cian)); }

/* ---------- Cinta ---------- */
.cinta { position: relative; z-index: 3; overflow: hidden; padding: 30px 0; border-block: 1px solid var(--linea); background: linear-gradient(90deg, rgba(255, 43, 214, .08), rgba(46, 242, 255, .06)); transform: rotate(-2deg) scale(1.04); margin: -10px 0 0; }
.cinta-pista { display: flex; align-items: center; gap: 36px; line-height: 1.25; padding-block: 4px; width: max-content; font-family: var(--f-tit); font-weight: 800; font-size: clamp(26px, 4vw, 52px); text-transform: uppercase; white-space: nowrap; will-change: transform; }
/* Las palabras intercaladas van en la letra de grafiti en neón celeste (el contorno hueco de Unbounded dejaba ver
   las uniones internas de las letras: rayas dentro de la A, la D…) */
.cinta-pista span:nth-of-type(odd) { font-family: var(--f-graf); font-weight: 400; letter-spacing: .02em; color: #fff; text-shadow: 0 0 2px #fff, var(--glow-cian); transform: rotate(-3deg); display: inline-block; }
.cinta-pista em { font-style: normal; color: var(--rosa); text-shadow: var(--glow-rosa); }

/* ---------- La rueda ---------- */
.rueda-sec { position: relative; height: 380vh; }
.rueda-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 96px clamp(16px, 4vw, 44px) 26px; overflow: hidden; }
.rueda-cab { position: relative; z-index: 2; }
.rueda-cab .titulo { font-size: clamp(34px, 5.5vw, 72px); }
.rueda-escena { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 4vw; min-height: 0; }
.rueda-caja { position: relative; aspect-ratio: 1; height: min(68vh, 44vw); justify-self: center; }
.rueda-caja::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 43, 214, .35), transparent 65%); filter: blur(30px); }
.rueda { position: relative; width: 100%; height: 100%; overflow: visible; }
.rueda-flecha { position: absolute; left: 50%; top: -26px; width: 0; height: 0; transform: translateX(-50%); border: 12px solid transparent; border-top: 18px solid var(--cian); filter: drop-shadow(0 0 8px var(--cian)); }
.rueda-vel { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); font-family: var(--f-tit); display: flex; align-items: baseline; gap: 6px; color: var(--gris); font-size: 12px; }
.rueda-vel b { color: #fff; font-size: 22px; font-weight: 800; min-width: 2.6ch; text-align: right; text-shadow: var(--glow-cian); font-variant-numeric: tabular-nums; }
.rueda-info { position: relative; max-width: 480px; }
.rueda-num { font-family: var(--f-tit); font-size: 13px; color: var(--gris); letter-spacing: .12em; }
.rueda-num span:first-child { color: var(--cian); text-shadow: var(--glow-cian); }
.rueda-nombre { font-family: var(--f-tit); font-weight: 900; font-size: clamp(34px, 4.6vw, 64px); line-height: 1; margin: 12px 0 16px; letter-spacing: -.02em; }
.rueda-nombre em { font-style: normal; font-family: var(--f-graf); font-weight: 400; color: #fff; text-shadow: 0 0 2px #fff, var(--glow-rosa); }
.rueda-desc { color: var(--gris); font-size: 17px; min-height: 5.4em; }
.rueda-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.rueda-tags li { font-size: 13px; padding: 6px 12px; border-radius: 100px; border: 1px solid rgba(46, 242, 255, .35); color: #dffcff; background: rgba(46, 242, 255, .06); }
.rueda-info .cambia { animation: entra .55s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
.rueda-puntos { display: flex; justify-content: center; gap: 4px; }
.rueda-puntos button { width: 42px; height: 30px; position: relative; }
.rueda-puntos button::before { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(255, 255, 255, .14); transition: background .3s, box-shadow .3s; }
@media (hover: hover) { .rueda-puntos button:hover::before { background: rgba(255, 255, 255, .4); } }
.rueda-puntos button.on::before { background: var(--rosa); box-shadow: var(--glow-rosa); }
.rueda .rotulo { font-family: var(--f-tit); font-size: 12px; font-weight: 800; letter-spacing: .18em; fill: rgba(255, 255, 255, .35); text-transform: uppercase; transition: fill .3s; }
.rueda .rotulo.on { fill: #fff; }

/* ---------- Catálogo ---------- */
.catalogo { padding: 140px 0 120px; position: relative; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.filtro { padding: 10px 18px; border-radius: 100px; border: 1px solid var(--linea); font-size: 14px; font-weight: 500; color: var(--gris); transition: color .25s, background-color .25s, border-color .25s, box-shadow .25s, scale .16s; }
.filtro:active, .color-btn:active, .term-btn:active, .extra-btn:active { scale: .96; }
.filtro:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.filtro.activo { background: #fff; color: #0a0010; border-color: #fff; box-shadow: 0 0 22px rgba(255, 255, 255, .35); }
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; perspective: 1200px; }
.tarjeta {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  position: relative; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: var(--negro-2); border: 1px solid var(--linea);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .3s, opacity .4s, box-shadow .3s;
  cursor: pointer;
}
.tarjeta.oculta, .tarjeta.de-mas { display: none; }
/* La grilla se recorta solo mientras se anima su alto ("Ver todos"/"Ver menos", app.js); el resto del tiempo queda
   abierta para que no se corten el brillo ni la inclinación de las tarjetas al pasar el mouse */
.tarjetas { padding: 6px; margin: -6px; }
.catalogo-mas { display: flex; justify-content: center; margin-top: 34px; }
.catalogo-mas .btn[hidden] { display: none; }
.mas-n { font-size: 12px; padding: 3px 8px; border-radius: 100px; background: rgba(255, 43, 214, .18); color: #ffd1f5; }
.mas-n:empty { display: none; }
.mas-flecha { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease); }
.btn[aria-expanded="true"] .mas-flecha { transform: translateY(2px) rotate(-135deg); }
.tarjeta:hover, .tarjeta.abierta { border-color: rgba(255, 43, 214, .5); box-shadow: 0 0 40px rgba(255, 43, 214, .18); }
.tarjeta::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .12), transparent 45%); opacity: 0; transition: opacity .3s; }
.tarjeta:hover::after { opacity: 1; }
/* Muestra: la Ferrari 3D con ese ploteo (img/catalogo, sale de herramientas/render-catalogo) sobre un piso con luz del
   tono del auto; el circulito de la esquina es la muestra del vinilo */
.muestra {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 78%, color-mix(in srgb, var(--tono) 34%, transparent), transparent 70%),
    radial-gradient(90% 70% at 50% 0%, #1b1724, #0c0a11 70%);
}
.muestra::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(255, 255, 255, .03)); }
.muestra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: translateY(2%) scale(1.02); transition: transform .9s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) { .tarjeta:hover .muestra img { transform: translate(-2%, 1%) scale(1.08); } }
.tarjeta.abierta .muestra img { transform: translate(-2%, 1%) scale(1.08); }
.muestra-chip { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .22), 0 6px 14px rgba(0, 0, 0, .5); }
.muestra-chip.t-ppf::before, .muestra-chip.t-comercial::before, .muestra-chip.t-interior::before { display: none; }
.muestra-chip.t-ppf { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .04)); }
/* Reflejo que barre el vinilo */
.muestra::after { content: ''; position: absolute; inset: -50%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%); transform: translateX(-60%); transition: transform 1.1s var(--ease); mix-blend-mode: overlay; }
.tarjeta:hover .muestra::after, .tarjeta.abierta .muestra::after { transform: translateX(60%); }
.tarjeta-cuerpo { padding: 20px 22px 24px; position: relative; z-index: 2; }
.tarjeta-tipo { font-family: var(--f-txt); font-size: 14px; font-weight: 700; color: var(--cian); }
.tarjeta h3 { font-family: var(--f-tit); font-weight: 800; font-size: 22px; margin: 8px 0 8px; letter-spacing: -.01em; }
.tarjeta p { color: var(--gris); font-size: 16px; }
.tarjeta-mas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.tarjeta-mas > div { overflow: hidden; }
@media (hover: hover) { .tarjeta:hover .tarjeta-mas { grid-template-rows: 1fr; } }
.tarjeta.abierta .tarjeta-mas, .tarjeta:focus-within .tarjeta-mas { grid-template-rows: 1fr; }
.tarjeta-mas ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; }
.tarjeta-mas li { font-size: 13px; padding: 4px 10px; border-radius: 100px; background: rgba(255, 255, 255, .06); color: #ddd; }
.tarjeta-mas a { display: inline-block; margin-top: 14px; font-family: var(--f-tit); font-size: 12px; color: var(--rosa); text-shadow: 0 0 10px rgba(255, 43, 214, .6); letter-spacing: .06em; }
.tarjeta-mas a::after { content: ' →'; }

/* Terminaciones de vinilo pintadas con CSS */
.t-ppf { background: linear-gradient(160deg, #c81c3c, #7d0b22 60%, #4a0614); }
.t-ppf::before { content: ''; position: absolute; inset: 10% 8%; border: 2px dashed rgba(255, 255, 255, .55); border-radius: 18px; box-shadow: 0 0 20px rgba(46, 242, 255, .35) inset; }
.t-full { background: conic-gradient(from 210deg at 70% 120%, #2ef2ff, #3a7bff, #9b4dff, #ff2bd6, #2ef2ff); }
.t-sat { background: radial-gradient(120% 90% at 30% 10%, #6a6f78, #2a2d33 50%, #121316); }
.t-mate { background: #1a1a1d; }
.t-mate::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.t-cam { background: linear-gradient(120deg, #5b1aff, #ff2bd6 35%, #ffb02e 55%, #2ef2ff 80%, #5b1aff); background-size: 300% 100%; animation: camaleon 7s linear infinite; }
@keyframes camaleon { to { background-position: 300% 0; } }
.t-cromo { background: linear-gradient(180deg, #f4f7fb 0%, #9aa3ae 30%, #2a2f36 48%, #e4e9ef 52%, #7a838e 75%, #f4f7fb 100%); }
.t-carbono { background: repeating-linear-gradient(45deg, #141416 0 6px, #232327 6px 12px), #18181b; background-blend-mode: normal; }
.t-carbono::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px); }
.t-polar { background: linear-gradient(180deg, #8fd3ff, #2b6fa8); }
.t-polar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .78) 55%); }
.t-black { background: linear-gradient(160deg, #e9ecf0, #b7bec7); }
.t-black::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: #0c0c0e; }
.t-optica { background: radial-gradient(circle at 35% 50%, #fff 0 8%, #8ef 14%, #234 40%, #0b1220 70%); }
.t-comercial { background: linear-gradient(135deg, #a6ff3d 0 33%, #0f0d14 33% 66%, #ff2bd6 66%); }
.t-comercial::before { content: 'TU MARCA'; position: absolute; left: 8%; top: 12%; font-family: var(--f-tit); font-weight: 900; font-size: 26px; color: #fff; letter-spacing: -.02em; text-shadow: 0 2px 0 #000; }
.t-interior { background: linear-gradient(160deg, #050507, #1d1d22 50%, #050507); }
.t-interior::before { content: ''; position: absolute; left: 22%; right: 22%; top: 22%; bottom: 30%; border-radius: 10px; background: linear-gradient(130deg, #0b0b10, #1c2030); box-shadow: 0 0 0 2px #2a2a30, 0 0 30px rgba(46, 242, 255, .25); }

/* ---------- Configurador ---------- */
.config { padding: 120px 0 140px; position: relative; }
.config-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.config-escena { position: relative; border-radius: 28px; padding: 60px 28px 28px; background: radial-gradient(120% 90% at 50% 0%, #1c1726, #0b0a10 70%); border: 1px solid var(--linea); overflow: hidden; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
.config-escena::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(transparent, rgba(255, 255, 255, .04)); border-top: 1px solid rgba(255, 255, 255, .05); }
.config-luz { position: absolute; width: 60%; height: 60%; left: 20%; top: 18%; border-radius: 50%; filter: blur(80px); opacity: .45; background: var(--rosa); transition: background .8s; }
.config-escena .auto { width: 100%; aspect-ratio: 2 / 1; }
.config-escena .auto canvas { touch-action: pan-y; }
.config-girar { position: absolute; right: 24px; top: 22px; font-size: 12px; color: var(--gris); font-family: var(--f-tit); letter-spacing: .06em; }
.config-girar::before { content: '⟲ '; color: var(--cian); text-shadow: var(--glow-cian); }
.pie-credito { width: 100%; font-size: 12px; color: #8f8a9b; text-align: center; }
.pie-credito a { color: inherit; text-decoration: underline; }
.config-escena .piso { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .9), transparent 70%); bottom: 16%; height: 14%; }
.config-nombre { position: absolute; left: 28px; top: 24px; font-family: var(--f-tit); font-size: 13px; letter-spacing: .06em; color: var(--gris); }
.config-nombre span:first-child { color: #fff; }
.config-panel { background: var(--negro-2); border: 1px solid var(--linea); border-radius: 28px; padding: 28px; }
.config-tit { font-family: var(--f-txt); font-size: 15px; font-weight: 700; color: #fff; margin: 22px 0 12px; }
.config-tit:first-child { margin-top: 0; }
.colores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.color-btn { aspect-ratio: 1; border-radius: 50%; position: relative; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset; transition: transform .25s var(--ease); }
.color-btn::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; transition: border-color .25s, box-shadow .25s; }
.color-btn:hover { transform: scale(1.1); }
.color-btn[aria-checked="true"]::after { border-color: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .6); }
.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.term-btn, .extra-btn { padding: 11px 6px; border-radius: 12px; border: 1px solid var(--linea); font-size: 13px; font-weight: 500; color: var(--gris); transition: color .25s, background-color .25s, border-color .25s, box-shadow .25s, scale .16s; }
.term-btn:hover, .extra-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.term-btn[aria-checked="true"] { color: #0a0010; background: var(--cian); border-color: var(--cian); box-shadow: 0 0 18px rgba(46, 242, 255, .5); }
.extras { display: flex; flex-wrap: wrap; gap: 8px; }
.extra-btn { padding: 9px 14px; }
.extra-btn[aria-pressed="true"] { color: #fff; border-color: var(--rosa); background: rgba(255, 43, 214, .14); box-shadow: 0 0 14px rgba(255, 43, 214, .3); }
.extra-btn[aria-pressed="true"]::before { content: ''; display: inline-block; width: 9px; height: 5px; margin: 0 8px 3px 0; border-left: 2px solid var(--rosa); border-bottom: 2px solid var(--rosa); transform: rotate(-45deg); }
.config-nota { font-size: 13px; color: #9a95a6; margin-top: 14px; text-align: center; }

/* ---------- Números ---------- */
.numeros { padding: 70px 0; border-block: 1px solid var(--linea); background: linear-gradient(90deg, rgba(255, 43, 214, .05), transparent 40%, rgba(46, 242, 255, .05)); }
.numeros-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.numero b { display: block; font-family: var(--f-tit); font-weight: 900; font-size: clamp(40px, 5.4vw, 74px); line-height: 1; letter-spacing: -.03em; color: #fff; text-shadow: 0 0 2px #fff, 0 0 24px rgba(255, 43, 214, .55); font-variant-numeric: tabular-nums; }
.numero:nth-child(even) b { text-shadow: 0 0 2px #fff, 0 0 24px rgba(46, 242, 255, .55); }
.numero span { display: block; color: var(--gris); font-size: 14px; margin-top: 10px; max-width: 220px; }

/* ---------- Página "Sobre nosotros" (nosotros.html) ----------
   La única foto del taller es una captura de 869 px: estirada a toda la pantalla se pixela. Por eso de fondo va
   desenfocada y oscurecida (se ve el taller, no los píxeles) y nítida en un marco de neón a su tamaño. */
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); box-shadow: var(--glow-rosa); animation: zumbido 2.4s infinite; }
.nos-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 130px 0 80px; border-bottom: 1px solid var(--linea); }
.nos-fondo { position: absolute; inset: 0; z-index: -1; background: #050408; }
.nos-fondo img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; object-position: 50% 35%; filter: blur(14px) saturate(1.25) brightness(.85); will-change: transform; }
.nos-fondo::after { content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 6, 10, .9) 0%, rgba(7, 6, 10, .65) 45%, rgba(7, 6, 10, .35) 100%),
    linear-gradient(180deg, rgba(7, 6, 10, .7) 0%, transparent 25%, transparent 65%, rgba(7, 6, 10, .95) 100%),
    radial-gradient(50% 50% at 75% 45%, rgba(255, 43, 214, .18), transparent 70%); }
.nos-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.nosotros-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-tit); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; padding: 8px 14px; border-radius: 100px; background: rgba(7, 6, 10, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nos-titulo { margin-top: 22px; font-size: clamp(42px, 5vw, 76px); }
.nosotros-txt { text-shadow: 0 1px 12px rgba(0, 0, 0, .8); margin-top: 22px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: #e6e1ec; max-width: 560px; }
.nosotros-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.nos-hero-texto .nosotros-botones { margin-top: 30px; }
/* La foto nítida, sin pasarse de su tamaño real */
.nos-foto { position: relative; max-width: 640px; justify-self: end; width: 100%; rotate: 1.5deg; }
.nos-foto::before { content: ''; position: absolute; inset: -2px; border-radius: 30px; background: linear-gradient(135deg, var(--rosa), var(--violeta) 45%, var(--cian)); filter: blur(18px); opacity: .55; z-index: -1; }
.nos-marco { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; border: 1.5px solid rgba(255, 255, 255, .18); background: #000; }
/* El recorte esconde la flechita y los puntitos del carrusel de Instagram que trae la captura */
.nos-marco img { position: absolute; left: -4%; top: 0; width: 106%; height: 104%; max-width: none; object-fit: cover; object-position: 60% 0; transform-origin: 60% 40%; }
.nos-foto figcaption { position: absolute; left: 20px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 10px; font-family: var(--f-tit); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: rgba(7, 6, 10, .65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 9px 14px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .14); }
.nos-bloque { padding: 110px 0 40px; }
.nos-final { padding: 60px 0 110px; }
.nos-c { font-family: var(--f-graf); font-weight: 400; color: #fff; text-shadow: 0 0 2px #fff, var(--glow-cian); display: inline-block; transform: rotate(-3deg); }
.nos-cab-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.nosotros-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nosotros-card { padding: 26px; border-radius: 22px; background: var(--negro-2); border: 1px solid var(--linea); transition: border-color .3s, box-shadow .3s, translate .4s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) { .nosotros-card:hover { translate: 0 -4px; border-color: rgba(255, 43, 214, .5); box-shadow: 0 0 34px rgba(255, 43, 214, .18); } }
.nosotros-card svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--cian)) drop-shadow(0 0 10px var(--cian)); }
.nosotros-card:nth-child(2) svg { filter: drop-shadow(0 0 3px var(--rosa)) drop-shadow(0 0 10px var(--rosa)); }
.nosotros-card:nth-child(3) svg { filter: drop-shadow(0 0 3px var(--verde)) drop-shadow(0 0 10px var(--verde)); }
.nosotros-card h3 { font-family: var(--f-tit); font-weight: 800; font-size: 20px; margin-top: 18px; }
.nosotros-card p { color: var(--gris); font-size: 16px; margin-top: 8px; }
.pagina-nosotros .numeros { margin-top: 80px; }
.nos-tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nos-tira .obra img { aspect-ratio: 4 / 5; }
.nosotros-visita { display: flex; align-items: center; justify-content: space-between; gap: 20px 30px; flex-wrap: wrap; padding: 26px 30px; border-radius: 24px; background: var(--negro-2); border: 1px solid var(--linea); box-shadow: 0 0 60px rgba(255, 43, 214, .08); }
.nosotros-visita h3 { font-family: var(--f-tit); font-weight: 900; font-size: 24px; margin-bottom: 10px; }
.nosotros-dir { color: var(--gris); font-size: 15px; margin-top: 10px; }
.menu a[aria-current="page"] { color: #fff; }
.menu a[aria-current="page"]::after { right: 0; }
.pie-nos { color: var(--rosa) !important; }
@media (max-width: 980px) {
  .nos-hero-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .nos-foto { justify-self: start; max-width: 560px; }
  .nosotros-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nos-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nos-hero { padding: 100px 0 60px; }
  .nos-fondo::after { background: linear-gradient(180deg, rgba(7, 6, 10, .75) 0%, rgba(7, 6, 10, .55) 40%, rgba(7, 6, 10, .9) 100%), radial-gradient(70% 40% at 80% 70%, rgba(255, 43, 214, .18), transparent 70%); }
  .nos-marco, .nos-foto::before { border-radius: 20px; }
  .nos-bloque { padding: 80px 0 30px; }
  .nos-final { padding: 40px 0 80px; }
  .nosotros-card { padding: 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
  .nosotros-card svg { grid-row: span 2; width: 26px; height: 26px; margin-top: 2px; }
  .nosotros-card h3 { margin-top: 0; font-size: 17px; }
  .nosotros-card p { font-size: 15px; margin-top: 4px; }
  .nosotros-visita { padding: 20px; }
  .nosotros-botones, .nosotros-botones .btn { width: 100%; }
}

/* ---------- Proceso ---------- */
.proceso { position: relative; }
.proceso-pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 46px; overflow: hidden; padding: 90px 0 40px; }
.proceso-cab { padding-inline: clamp(16px, 4vw, 44px); }
.proceso-cab .titulo { font-size: clamp(34px, 5.5vw, 72px); }
.proceso-pista { list-style: none; margin: 0; display: flex; gap: 22px; padding-inline: clamp(16px, 4vw, 44px); width: max-content; will-change: transform; }
.paso { width: min(420px, 78vw); flex: none; border-radius: 26px; padding: 30px; background: var(--negro-2); border: 1px solid var(--linea); position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; }
.paso::before { content: ''; position: absolute; width: 220px; height: 220px; right: -60px; top: -60px; border-radius: 50%; background: var(--c, var(--rosa)); filter: blur(70px); opacity: .25; }
.paso-n { font-family: var(--f-tit); font-weight: 900; font-size: 96px; line-height: .9; color: var(--c, var(--rosa)); }
.paso h3 { font-family: var(--f-tit); font-size: 22px; font-weight: 800; margin-top: auto; padding-top: 30px; }
.paso p { color: var(--gris); margin-top: 10px; font-size: 16px; }

/* ---------- Contacto ---------- */
.contacto { position: relative; padding: 160px 0 110px; text-align: center; overflow: hidden; }
.contacto-luz { position: absolute; left: 50%; top: 50%; width: 900px; height: 600px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 43, 214, .35), rgba(155, 77, 255, .18) 50%, transparent); filter: blur(40px); pointer-events: none; }
.contacto-in { position: relative; }
.contacto-titulo { font-family: var(--f-tit); font-weight: 900; font-size: clamp(42px, 8vw, 116px); line-height: .98; letter-spacing: -.03em; margin: 18px 0 8px; }
.contacto .sec-sub { margin-inline: auto; }
.contacto-botones { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.redes { display: flex; justify-content: center; gap: 22px; margin-top: 34px; font-size: 14px; color: var(--gris); }
.redes a:hover { color: var(--cian); }

/* ---------- Pie: el nombre gigante en neón, que se prende al llegar ---------- */
.pie { position: relative; border-top: 1px solid var(--linea); padding: 0 0 36px; color: var(--gris); font-size: 14px; overflow: hidden; }
.pie-cartel { position: relative; text-align: center; padding: 70px 0 10px; line-height: .8; }
.pie-cartel::before { content: ''; position: absolute; left: 50%; top: 55%; width: 90%; height: 70%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 43, 214, .3), transparent); opacity: 0; transition: opacity .2s; pointer-events: none; }
.pie-apa { display: block; font-family: var(--f-tit); font-weight: 900; font-size: clamp(84px, 22vw, 330px); letter-spacing: -.03em; color: #2c0b27; } /* apagado: el color de un tubo de neón sin luz (sin contorno: Unbounded muestra uniones internas) */
.pie-lema { position: relative; display: inline-block; margin-top: -.2em; font-family: var(--f-graf); font-size: clamp(30px, 5vw, 72px); color: rgba(46, 242, 255, .2); transform: rotate(-5deg); }
.pie-cartel.prendido .pie-apa { animation: pie-prende 1.6s steps(1, end) both; }
.pie-cartel.prendido .pie-lema { animation: pie-prende-lema 1.6s .25s steps(1, end) both; }
.pie-cartel.prendido::before { animation: pie-halo 1.6s steps(1, end) both; }
@keyframes pie-prende {
  0%, 18%, 30% { color: #2c0b27; text-shadow: none; }
  12%, 24%, 40%, 100% { color: #fff; text-shadow: 0 0 3px #fff, 0 0 12px #ff2bd6, 0 0 40px #ff2bd6, 0 0 90px rgba(255, 43, 214, .6); }
}
@keyframes pie-prende-lema {
  0%, 22% { color: rgba(46, 242, 255, .2); text-shadow: none; }
  14%, 34%, 100% { color: #fff; text-shadow: 0 0 3px #fff, 0 0 10px #2ef2ff, 0 0 30px #2ef2ff, 0 0 70px rgba(46, 242, 255, .6); }
}
@keyframes pie-halo { 0%, 18%, 30% { opacity: 0; } 12%, 24%, 40%, 100% { opacity: 1; } }
.pie-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 46px 0 40px; border-bottom: 1px solid var(--linea); }
.pie-cols a, .pie-cols p { display: block; color: var(--gris); font-size: 15px; line-height: 1.7; }
.pie-cols a:hover { color: var(--cian); }
.pie-tit { font-family: var(--f-tit); font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; color: #fff !important; margin-bottom: 10px; }
.pie-fin { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; justify-content: space-between; padding-top: 26px; font-size: 13px; }
.pie-fin .pie-credito { width: 100%; text-align: left; }
.pie-lumvo a { color: #fff; border-bottom: 1px solid rgba(255, 43, 214, .6); }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 0 0 0 rgba(37, 211, 102, .6), 0 10px 30px rgba(0, 0, 0, .5); animation: latido 2.4s infinite; }
.wa-flotante svg { width: 30px; height: 30px; fill: currentColor; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55), 0 10px 30px rgba(0, 0, 0, .5); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 10px 30px rgba(0, 0, 0, .5); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 10px 30px rgba(0, 0, 0, .5); } }

/* Aparición al bajar (la maneja app.js) */
.aparece { opacity: 0; transform: translateY(40px); }

/* ---------- Tablet y celu ---------- */
@media (max-width: 980px) {
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .config-grid { grid-template-columns: minmax(0, 1fr); }
  .numeros-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .rueda-escena { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 18px; align-content: center; }
  .rueda-caja { height: min(40vh, 74vw); }
  .rueda-info { text-align: center; margin-inline: auto; }
  .rueda-tags { justify-content: center; margin-bottom: 16px; }
  .rueda-desc { min-height: 4.8em; font-size: 16px; }
  .rueda-nombre { margin: 6px 0 10px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .menu { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: center; gap: 28px; background: rgba(7, 6, 10, .96); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .35s; }
  .menu a { font-family: var(--f-tit); font-size: 26px; color: #fff; }
  .menu.abierto { opacity: 1; pointer-events: auto; }
  .barra { gap: 10px; }
  .barra > .btn { margin-left: auto; padding: 10px 16px; font-size: 12px; }
  .marca-apa { font-size: 19px; }
  .marca-plot { font-size: 16px; }
  .solo-pc { display: none; }
  .hamburguesa { display: block; }
  .hero { height: 200vh; }
  .hero-pin { padding-top: 96px; }
  .hero-auto .auto { aspect-ratio: 1.7 / 1; }
  .hero-auto { width: 100vw; bottom: 3svh; }
  .hero-estado { font-size: 12px; gap: 8px; }
  .hero-estado-barra { width: 80px; }
  .techo i { width: 16vw; height: 6vw; }
  .tarjeta-mas { grid-template-rows: 1fr; }
  .rueda-sec { height: 330vh; }
  .rueda-pin { padding-top: 84px; }
  .rueda-cab { text-align: center; }
  .rueda-cab .etiqueta { justify-content: center; }
  .rueda .rotulo { font-size: 15px; }
  .colores { grid-template-columns: repeat(5, 1fr); }
  .config-escena { min-height: 280px; padding: 50px 12px 18px; }
  .config-panel { padding: 22px; }
  .terms { grid-template-columns: repeat(2, 1fr); }
  .paso { min-height: 260px; }
  .paso-n { font-size: 72px; }
  .catalogo, .config { padding: 90px 0; }
  .contacto { padding: 110px 0; }
  .pie-in { flex-direction: column; text-align: center; }
  .wa-flotante { width: 54px; height: 54px; right: 14px; bottom: 14px; }
}

@media (max-width: 560px) {
  .tarjetas { grid-template-columns: 1fr; }
}

/* Intro en pantalla vertical: los grafitis arriba y abajo del cartel */
@media (max-width: 760px) {
  .g-apa { font-size: 27vw; left: 4%; top: 6%; }
  .g-plotea { font-size: 13vw; right: 3%; top: 25%; }
  .g-wrap { font-size: 17vw; left: 3%; bottom: 17%; }
  .g-ppf { font-size: 22vw; right: 4%; bottom: 5%; }
  .g-id { font-size: 18vw; right: auto; left: 8%; bottom: 3%; }
  .g-mate { font-size: 4.4vw; right: 6%; top: 66%; }
  .g-anos { font-size: 4.6vw; left: auto; right: 5%; top: 5%; }
  .d-corona { width: 13vw; left: 7%; top: 2.5%; }
  .d-flecha { width: 26vw; right: auto; left: 6%; top: 31%; }
  .d-halo { display: none; }
  .d-x { width: 8vw; left: auto; right: 34%; bottom: 25%; }
  .e1 { left: 70%; top: 18%; } .e2 { right: auto; left: 12%; top: 64%; } .e3 { left: 55%; bottom: 20%; } .e4 { right: 8%; bottom: 34%; }
  .salpicon { width: 26vw; }
  .s1 { left: -6%; top: 22%; } .s2 { right: -4%; top: 12%; } .s3 { left: 30%; bottom: 0; } .s4 { right: -6%; top: 70%; }
  .d-estrella { width: 6vw; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-titulo .linea { overflow: visible; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Revisión de diseño: piezas nuevas ---------- */
.chispa { display: inline-block; width: .55em; height: .55em; fill: currentColor; vertical-align: middle; filter: drop-shadow(0 0 6px currentColor); }
.cinta-pista em { display: inline-flex; }
.config-girar { display: flex; align-items: center; gap: 6px; }
.config-girar::before { content: none; }
.config-girar svg { width: 15px; height: 15px; fill: none; stroke: var(--cian); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--cian)); }
.wa-flotante { transition: opacity .3s, transform .3s cubic-bezier(.23, 1, .32, 1); }
.wa-flotante.escondido { opacity: 0; transform: translateY(12px) scale(.92); pointer-events: none; }
.hamburguesa { flex-shrink: 0; }

/* Táctil: todo lo que se toca mide al menos 44px */
@media (pointer: coarse) {
  .btn-chico, .term-btn, .extra-btn { min-height: 44px; }
  .color-btn { min-width: 44px; min-height: 44px; }
  .rueda-puntos button { height: 44px; }
}

/* Celu */
@media (max-width: 760px) {
  .hero-botones { gap: 10px; }
  .hero-botones .btn { padding: 14px 20px; font-size: 13px; }
  .hero-auto { width: min(100vw, calc((100svh - 500px) * 1.7)); left: 0; right: 0; margin-inline: auto; }
  .config-girar { top: auto; bottom: 14px; right: 16px; font-size: 12px; }
}
/* Celus angostos: el botón de turno del encabezado se va (queda el de WhatsApp y el del menú) */
@media (max-width: 380px) {
  .barra > .btn { display: none; }
  .hamburguesa { margin-left: auto; }
  .hero-botones { gap: 8px; }
  .hero-botones .btn { padding: 13px 15px; font-size: 12px; }
  .colores { gap: 6px; }
  .config-panel { padding: 18px; }
}
/* Celus bajos (SE, Android chicos): la rueda se achica y se queda con lo esencial */
@media (max-width: 980px) and (max-height: 720px) {
  .hero-pista { display: none; }
  .rueda-pin { padding-top: 76px; padding-bottom: 12px; }
  .rueda-cab .titulo { font-size: clamp(28px, 8vw, 44px); margin-top: 0; }
  .rueda-caja { height: min(34svh, 66vw); }
  .rueda-vel, .rueda-tags { display: none; }
  .rueda-escena { gap: 14px; }
  .rueda-nombre { font-size: clamp(26px, 8vw, 40px); margin: 4px 0 8px; }
  .rueda-desc { min-height: 0; margin-bottom: 14px; font-size: 15px; }
}
/* Celular acostado: inicio y rueda en dos columnas */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-pin { padding-top: 72px; }
  .hero-titulo { font-size: 15svh; margin: 6px 0 10px; }
  .hero-sub { max-width: 46vw; font-size: 14px; }
  .hero-botones { margin-top: 14px; }
  .hero-auto { width: 50vw; left: auto; right: 0; bottom: 2svh; }
  .hero-auto .auto { aspect-ratio: 2.1 / 1; }
  .hero-pista, .hero-estado { display: none; }
  .rueda-pin { padding-top: 64px; grid-template-rows: auto 1fr; }
  .rueda-cab .titulo { font-size: 8svh; margin-top: 0; }
  .rueda-escena { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: none; align-content: stretch; }
  .rueda-caja { height: 66svh; }
  .rueda-info { text-align: left; }
  .rueda-vel, .rueda-tags, .rueda-puntos { display: none; }
  .rueda-desc { min-height: 0; font-size: 14px; margin-bottom: 12px; }
  .rueda-nombre { font-size: 9svh; margin: 4px 0 8px; }
}

/* ================= Material real del cliente y secciones nuevas ================= */

/* ---------- Salido del taller: fotos reales de su Instagram ---------- */
.trabajos { padding: 140px 0 60px; }
.obras { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.69fr) minmax(0, 1.69fr); gap: 16px; align-items: stretch; }
.obra { position: relative; display: block; border-radius: 24px; overflow: hidden; background: #000; border: 1px solid var(--linea); isolation: isolate; transition: border-color .3s, box-shadow .3s; }
.obra img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9 / 16; transition: transform 1s cubic-bezier(.23, 1, .32, 1); }
.obra-grande img { aspect-ratio: auto; }
.obra::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7, 6, 10, .85)); pointer-events: none; }
@media (hover: hover) { .obra:hover img { transform: scale(1.05); } .obra:hover { border-color: rgba(255, 43, 214, .55); box-shadow: 0 0 40px rgba(255, 43, 214, .2); } }
.obra-pie { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: grid; gap: 2px; }
.obra-pie b { font-family: var(--f-tit); font-weight: 800; font-size: clamp(16px, 1.5vw, 22px); color: #fff; }
.obra-pie span { font-size: 14px; color: #d6d1de; }
.obra-pie::after { content: 'Ver en Instagram ↗'; margin-top: 6px; font-family: var(--f-tit); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); text-shadow: 0 0 10px rgba(255, 43, 214, .6); }
.obra-video { position: absolute; right: 14px; top: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(7, 6, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .2); }
.obra-video svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; }

/* ---------- Pasaron por APA: reels con famosos ---------- */
.famosos { padding: 70px 0 120px; }
.famosos-cab { margin-bottom: 36px; }
.famosos-cab .titulo .neon-c { font-family: var(--f-graf); font-weight: 400; color: #fff; text-shadow: 0 0 2px #fff, var(--glow-cian); display: inline-block; transform: rotate(-3deg); }
.reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: min(1200px, 100% - 32px); margin-inline: auto; }
.reel { position: relative; display: block; border-radius: 26px; overflow: hidden; aspect-ratio: 9 / 16; background: #000; isolation: isolate;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .12) inset; transition: box-shadow .3s, translate .4s cubic-bezier(.23, 1, .32, 1); }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1s cubic-bezier(.23, 1, .32, 1); }
.reel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 6, 10, .25), transparent 25%, transparent 50%, rgba(7, 6, 10, .92)); }
@media (hover: hover) { .reel:hover { translate: 0 -6px; box-shadow: 0 0 0 1.5px var(--rosa) inset, 0 0 40px rgba(255, 43, 214, .35); } .reel:hover img { transform: scale(1.06); } }
.reel-play { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1.5px solid rgba(255, 255, 255, .5); transition: background .3s, scale .3s; }
.reel-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
@media (hover: hover) { .reel:hover .reel-play { background: var(--rosa); scale: 1.08; box-shadow: var(--glow-rosa); } }
.reel-pie { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 2px; }
.reel-pie b { font-family: var(--f-tit); font-weight: 800; font-size: clamp(15px, 1.4vw, 20px); color: #fff; }
.reel-pie span { font-size: 14px; color: #d6d1de; }
.reel-pie em { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-style: normal; font-family: var(--f-tit); font-weight: 800; font-size: 14px; color: #fff; }
.reel-pie em svg { width: 16px; height: 16px; fill: var(--rosa); filter: drop-shadow(0 0 6px var(--rosa)); }
.reels-nota { margin-top: 16px; font-size: 13px; color: #8f8a9b; }

/* ---------- Presupuesto ---------- */
.cotizador { padding: 40px 0 130px; }
.coti { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.coti-panel { background: var(--negro-2); border: 1px solid var(--linea); border-radius: 28px; padding: 28px; }
.coti-panel .config-tit small { font-weight: 500; color: var(--gris); }
.coti-autos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.coti-auto, .coti-serv { position: relative; text-align: left; border-radius: 16px; border: 1px solid var(--linea); padding: 14px; transition: border-color .25s, background-color .25s, box-shadow .25s, scale .16s; }
.coti-auto:active, .coti-serv:active { scale: .97; }
@media (hover: hover) { .coti-auto:hover, .coti-serv:hover { border-color: rgba(255, 255, 255, .3); } }
.coti-auto svg { width: 100%; max-width: 92px; height: auto; margin-bottom: 10px; overflow: visible; fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.8; stroke-linejoin: round; transition: stroke .25s, filter .25s; }
.coti-auto b, .coti-serv b { display: block; font-family: var(--f-tit); font-size: 14px; font-weight: 800; color: #fff; }
.coti-auto small, .coti-serv small { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; line-height: 1.35; }
.coti-auto[aria-checked="true"] { border-color: var(--cian); background: rgba(46, 242, 255, .07); box-shadow: 0 0 22px rgba(46, 242, 255, .22); }
.coti-auto[aria-checked="true"] svg { stroke: #fff; filter: drop-shadow(0 0 4px var(--cian)) drop-shadow(0 0 10px var(--cian)); }
.coti-servs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.coti-serv { padding-right: 44px; }
.coti-serv::after { content: ''; position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .3); transition: background-color .25s, border-color .25s, box-shadow .25s; }
.coti-serv[aria-pressed="true"] { border-color: var(--rosa); background: rgba(255, 43, 214, .1); box-shadow: 0 0 20px rgba(255, 43, 214, .2); }
.coti-serv[aria-pressed="true"]::after { background: var(--rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%230a0010' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--rosa); box-shadow: var(--glow-rosa); }
/* La orden de trabajo: un ticket impreso del taller con borde dentado abajo */
.orden { position: relative; background: #f4f1f7; color: #120f18; border-radius: 22px 22px 0 0; padding: 26px 26px 30px; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .5)) drop-shadow(0 0 40px rgba(255, 43, 214, .15)); }
.orden::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: conic-gradient(from -45deg at 50% 100%, #f4f1f7 90deg, transparent 0) 0 0 / 16px 100% repeat-x; }
.orden-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px dashed rgba(18, 15, 24, .2); font-family: var(--f-tit); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.coti-muestra { font-size: 10px; letter-spacing: .08em; padding: 5px 9px; border-radius: 100px; background: #120f18; color: #ffe14d; white-space: nowrap; }
.orden-lineas { list-style: none; padding: 12px 0; border-bottom: 2px dashed rgba(18, 15, 24, .2); display: grid; gap: 8px; font-size: 15px; }
.orden-lineas li { display: flex; justify-content: space-between; gap: 14px; }
.orden-lineas li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.orden-lineas li:first-child { color: #5f5a69; font-size: 14px; }
.orden-lineas li.vacia { color: #8f8a9b; }
.orden-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 16px; }
.orden-total span { font-size: 15px; color: #5f5a69; }
.orden-total b { font-family: var(--f-tit); font-weight: 900; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #120f18; }
.orden-total b.late { animation: late .5s steps(1, end); }
@keyframes late { 0%, 40% { color: #ff2bd6; } 20%, 60% { color: #120f18; } 80% { color: #ff2bd6; } 100% { color: #120f18; } }
.orden-dias { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 15px; color: #5f5a69; }
.orden-dias b { color: #120f18; font-weight: 700; }
.orden .btn { margin-top: 22px; }
.orden .config-nota { color: #6c6676; }

/* ---------- Proceso: dibujos de neón en lugar de números gigantes ---------- */
.paso-ico { width: 84px; height: 84px; overflow: visible; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 22px var(--c)); }
.paso .paso-n { margin-top: 26px; font-family: var(--f-tit); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c); -webkit-text-stroke: 0; filter: none; line-height: 1; }
.paso h3 { margin-top: 8px; padding-top: 0; }
.paso p { margin-top: 10px; }
.paso { justify-content: flex-start; }

/* ---------- Preguntas ---------- */
.faq { padding: 130px 0 40px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: start; }
.faq-cab { position: sticky; top: 110px; }
.faq-cab .btn { margin-top: 26px; }
.faq-lista { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--linea); border-radius: 18px; background: var(--negro-2); transition: border-color .3s, box-shadow .3s; }
.faq-item[open] { border-color: rgba(255, 43, 214, .45); box-shadow: 0 0 30px rgba(255, 43, 214, .12); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-family: var(--f-tit); font-weight: 600; font-size: 16px; color: #fff; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--cian); border-bottom: 2px solid var(--cian); transform: translateY(-3px) rotate(45deg); transition: transform .35s cubic-bezier(.23, 1, .32, 1); filter: drop-shadow(0 0 4px var(--cian)); }
.faq-item[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq-resp { padding: 0 22px 20px; color: var(--gris); }
.faq-item[open] .faq-resp { animation: faq-abre .4s cubic-bezier(.23, 1, .32, 1); }
@keyframes faq-abre { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Dónde estamos: mapa de neón + horario ---------- */
.visita { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; margin-top: 80px; text-align: left; }
.mapa { position: relative; border-radius: 28px; overflow: hidden; min-height: 420px; background: #07060c; border: 1px solid var(--linea); }
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Mapa (herramientas/mapa.mjs): grosores en metros del mapa por --s (lado del encuadre / 1000) */
.m-parques path { fill: rgba(166, 255, 61, .05); stroke: none; }
.m-comunes path { stroke: rgba(155, 77, 255, .32); stroke-width: calc(4px * var(--s)); }
.m-medianas path { stroke: rgba(155, 77, 255, .55); stroke-width: calc(6.5px * var(--s)); }
.m-avenidas path { stroke: rgba(255, 43, 214, .75); stroke-width: calc(9px * var(--s)); }
.m-tren path { stroke: rgba(255, 255, 255, .4); stroke-width: calc(3px * var(--s)); stroke-dasharray: 6 5; }
.m-nombre { font-family: var(--f-tit); font-weight: 600; letter-spacing: .06em; fill: #ffd6f6; paint-order: stroke; stroke: #07060c; }
.m-propia { fill: #fff; font-weight: 800; }
.m-ruta, .m-ruta-brillo { fill: none; stroke: var(--cian); stroke-linecap: round; stroke-linejoin: round; }
.m-ruta { stroke: #dffcff; }
.m-ruta-brillo { opacity: .8; }
.m-salida { fill: #07060c; stroke: var(--cian); }
.m-auto { opacity: 0; }
.m-auto circle { fill: #fff; }
.m-auto .m-auto-halo { fill: rgba(46, 242, 255, .35); }
.m-punto { fill: #fff; stroke: var(--rosa); stroke-width: 4; filter: drop-shadow(0 0 6px #ff2bd6) drop-shadow(0 0 16px #ff2bd6); }
.m-onda { fill: none; stroke: var(--rosa); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onda 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.m-onda2 { animation-delay: 1.2s; }
.m-cartel-caja { fill: rgba(7, 6, 10, .92); stroke: var(--rosa); stroke-width: 1.5; filter: drop-shadow(0 0 10px rgba(255, 43, 214, .6)); }
.m-cartel-marca { font-family: var(--f-tit); font-weight: 900; font-size: 19px; fill: #fff; }
.m-cartel-dir { font-family: var(--f-txt); font-weight: 700; font-size: 17px; fill: #e6e1ec; }
.mapa-repetir { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-tit); font-size: 12px; font-weight: 600; padding: 10px 14px; border-radius: 100px; background: rgba(7, 6, 10, .75); border: 1px solid rgba(46, 242, 255, .5); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .25s, box-shadow .25s, scale .16s; }
.mapa-repetir:hover { border-color: var(--cian); box-shadow: 0 0 18px rgba(46, 242, 255, .4); }
.mapa-repetir:active { scale: .97; }
.mapa-repetir svg { width: 15px; height: 15px; fill: none; stroke: var(--cian); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes onda { from { transform: scale(.5); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.mapa::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 70% at 50% 50%, transparent 55%, rgba(7, 6, 12, .85)); }
.mapa-ir { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-tit); font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 100px; background: var(--cian); color: #001114; box-shadow: 0 0 22px rgba(46, 242, 255, .5); transition: box-shadow .3s, scale .16s; }
.mapa-ir:hover { box-shadow: 0 0 34px rgba(46, 242, 255, .9); }
.mapa-ir:active { scale: .97; }
.mapa-ir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mapa-osm { position: absolute; left: 14px; bottom: 10px; z-index: 2; font-size: 11px; color: rgba(255, 255, 255, .45); }
.visita-info { background: var(--negro-2); border: 1px solid var(--linea); border-radius: 28px; padding: 28px; }
.estado-local { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #ffb3b3; padding: 7px 14px; border-radius: 100px; background: rgba(255, 77, 77, .1); border: 1px solid rgba(255, 77, 77, .35); }
.estado-local i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; }
.estado-local.abierto { color: #d8ffb5; background: rgba(166, 255, 61, .08); border-color: rgba(166, 255, 61, .4); }
.estado-local.abierto i { background: var(--verde); box-shadow: 0 0 6px var(--verde), 0 0 16px var(--verde); animation: zumbido 2.4s infinite; }
.visita-dir { font-family: var(--f-tit); font-weight: 900; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; margin-top: 18px; }
.visita-zona { color: var(--gris); font-size: 15px; margin-top: 4px; }
.horario { list-style: none; margin: 20px 0; display: grid; gap: 2px; }
.horario li { display: flex; justify-content: space-between; padding: 7px 12px; border-radius: 10px; font-size: 15px; color: var(--gris); }
.horario li span:last-child { font-variant-numeric: tabular-nums; }
.horario li.cerrado span:last-child { color: #7d7889; }
.horario li.hoy { background: rgba(255, 255, 255, .07); color: #fff; font-weight: 700; }
.horario li.hoy span:first-child::after { content: ' · hoy'; color: var(--rosa); font-weight: 600; }
.visita-datos { display: grid; gap: 8px; border-top: 1px solid var(--linea); padding-top: 18px; }
.visita-datos a { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 700; color: #fff; padding: 6px 0; transition: color .25s; }
.visita-datos a span { font-weight: 500; color: var(--gris); }
.visita-datos a:hover { color: var(--cian); }

/* ---------- Tablet y celu: secciones nuevas ---------- */
@media (max-width: 980px) {
  .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obra-grande { grid-column: 1 / -1; }
  .reels { grid-template-columns: repeat(4, 62vw); width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 10px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .reels::-webkit-scrollbar { display: none; }
  .reel { scroll-snap-align: start; }
  .coti, .faq-grid, .visita { grid-template-columns: minmax(0, 1fr); }
  .faq-cab { position: static; }
  .pie-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .trabajos { padding: 90px 0 40px; }
  .obra { border-radius: 18px; }
  .obra-pie { left: 14px; right: 14px; bottom: 12px; }
  .obra-pie span { font-size: 13px; }
  .obra-pie::after { font-size: 10px; }
  .famosos { padding: 50px 0 90px; }
  .reels { grid-template-columns: repeat(4, 66vw); gap: 12px; }
  .cotizador { padding: 20px 0 90px; }
  .coti-panel { padding: 20px; }
  .coti-autos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coti-servs { grid-template-columns: minmax(0, 1fr); }
  .orden { padding: 22px 20px 28px; }
  .faq { padding: 90px 0 20px; }
  .faq-item summary { padding: 18px; font-size: 15px; }
  .faq-resp { padding: 0 18px 18px; }
  .visita { margin-top: 60px; }
  .mapa { min-height: 340px; border-radius: 20px; }
  .visita-info { padding: 22px; border-radius: 20px; }
  .paso-ico { width: 68px; height: 68px; }
  .pie-cartel { padding-top: 50px; }
  .pie-cols { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 22px; }
  .pie-fin { flex-direction: column; text-align: center; }
  .pie-fin .pie-credito { text-align: center; }
}
@media (max-width: 380px) {
  .coti-auto { padding: 12px 10px; }
  .orden-cab { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .pie-cartel.prendido .pie-apa, .pie-cartel.prendido .pie-lema, .pie-cartel.prendido::before { animation-duration: .01ms; }
}

/* Tablet: con 7 secciones el menú no entra en una línea, así que se usa el mismo menú de pantalla completa del celu */
@media (max-width: 1060px) {
  .menu { position: fixed; inset: 0; z-index: -1; margin: 0; flex-direction: column; justify-content: center; align-items: center; gap: 28px; background: rgba(7, 6, 10, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .35s; }
  .menu a { font-family: var(--f-tit); font-size: 26px; color: #fff; }
  .menu.abierto { opacity: 1; pointer-events: auto; }
  .hamburguesa { display: block; }
  .barra > .btn { margin-left: auto; }
  /* El vidrio esmerilado de la barra encierra al menú fijo: mientras está abierto se saca */
  .barra:has(.menu.abierto) { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* "mil" más chico para que los números entren en una línea */
.numero b { white-space: nowrap; }
.numero b small { font-size: .42em; letter-spacing: 0; margin-left: .08em; }
.numero b { font-size: clamp(38px, 4.3vw, 62px); }

/* Celu: el mapa se ve chico, así que el pin y el cartel van más grandes */
@media (max-width: 760px) { .m-cartel, .m-pin { transform: scale(1.9); } }

/* ---------- La pared del taller: vetas de fondo y grafitis en los costados ----------
   img/pared.svg (herramientas/pared.mjs) imita la pared negra veteada de sus fotos. Los grafitis van detrás del
   contenido de cada sección (z-index -1 con isolation), medio afuera de la pantalla y apagados para no tapar nada. */
body::after {
  background-image: url("img/pared.svg"); background-size: cover; background-position: center;
  -webkit-mask-image: none; mask-image: none; opacity: .6;
}
.trabajos, .famosos, .catalogo, .config, .cotizador, .faq, .contacto { position: relative; isolation: isolate; }
.pared { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; opacity: .3; }
.pared .graf { white-space: nowrap; }
.pared .deco { position: absolute; overflow: visible; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pared .d-estrella path { fill: currentColor; stroke: none; }
.pg-ppf { --r: -7deg; --c: #a6ff3d; --b: #2ef2ff; --n: rgba(166, 255, 61, .35); right: -1.5vw; top: 60px; font: 400 clamp(110px, 15vw, 240px) 'Sedgwick Ave Display', var(--f-graf); }
.pg-e1 { width: 48px; right: 19vw; top: 36px; color: #fff; filter: drop-shadow(0 0 8px #fff); }
.pg-corona { width: clamp(70px, 7vw, 110px); left: 3vw; top: 20px; stroke: #ffe14d; transform: rotate(-12deg); filter: drop-shadow(0 0 8px rgba(255, 225, 77, .6)); }
.pg-id { --r: -5deg; right: -1vw; top: 10px; font: 400 clamp(90px, 12vw, 200px) 'Rubik Bubbles', var(--f-graf); color: transparent; -webkit-text-stroke: 3px #9b4dff; text-shadow: none; filter: drop-shadow(0 0 14px rgba(155, 77, 255, .7)); }
.pg-plotea { --r: 6deg; --c: #2ef2ff; --b: #7a2cff; --n: rgba(46, 242, 255, .35); right: -2vw; top: 50px; font: 400 clamp(64px, 9vw, 150px) 'Rubik Spray Paint', var(--f-graf); }
.pg-flecha { width: 170px; right: 26vw; top: 190px; stroke: #2ef2ff; transform: rotate(8deg); filter: drop-shadow(0 0 8px rgba(46, 242, 255, .6)); }
.pg-wrap { --r: 5deg; --c: #ff2bd6; --b: #ffe14d; --n: rgba(255, 43, 214, .35); left: -2vw; bottom: 50px; font: 400 clamp(80px, 11vw, 180px) 'Rubik Bubbles', var(--f-graf); }
.pg-e2 { width: 40px; left: 16vw; bottom: 250px; color: #ff2bd6; filter: drop-shadow(0 0 8px #ff2bd6); }
.pg-3m { --r: -5deg; --c: #fff; --b: #ff2bd6; --n: rgba(255, 255, 255, .3); right: -.5vw; top: 30px; font: 400 clamp(100px, 13vw, 210px) 'Sedgwick Ave Display', var(--f-graf); }
.pg-x { width: 52px; right: 27vw; top: 60px; stroke: #ff2bd6; stroke-width: 7; filter: drop-shadow(0 0 8px rgba(255, 43, 214, .6)); }
.pg-halo { width: 150px; left: 22vw; bottom: 80px; stroke: #a6ff3d; transform: rotate(-14deg); filter: drop-shadow(0 0 8px rgba(166, 255, 61, .6)); }
.pg-apa { --r: -8deg; left: -2vw; bottom: 20px; font: 400 clamp(100px, 12vw, 200px) 'Sedgwick Ave Display', var(--f-graf); }
.pg-bernal { --r: 4deg; --c: #ff2bd6; --b: #2ef2ff; --n: rgba(255, 43, 214, .35); right: -1vw; top: 60px; font: 400 clamp(50px, 7vw, 120px) 'Rubik Spray Paint', var(--f-graf); }
.pg-e3 { width: 42px; right: 32vw; top: 50px; color: #2ef2ff; filter: drop-shadow(0 0 8px #2ef2ff); }
.pg-e4 { width: 30px; right: 9vw; top: 220px; color: #ffe14d; filter: drop-shadow(0 0 8px #ffe14d); }
@media (max-width: 760px) {
  .pared { opacity: .24; }
  .pg-ppf { font-size: 30vw; top: 20px; right: -6vw; }
  .pg-id { font-size: 26vw; top: 10px; left: auto; right: -4vw; }
  .pg-corona { left: auto; right: 22vw; top: 6px; width: 15vw; }
  .pg-plotea { font-size: 17vw; top: 10px; right: -8vw; }
  .pg-flecha { display: none; }
  .pg-wrap { font-size: 24vw; bottom: 20px; left: -6vw; }
  .pg-3m { font-size: 30vw; top: 0; right: -4vw; }
  .pg-x { right: 30vw; top: 120px; width: 9vw; }
  .pg-apa { font-size: 30vw; bottom: 20px; left: -4vw; }
  .pg-halo { display: none; }
  .pg-bernal { font-size: 15vw; top: 20px; right: -6vw; }
}

/* Color del neón (configurador): la fila se abre cuando se prende "Luz neón" */
.neon-caja { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s cubic-bezier(.23, 1, .32, 1), opacity .3s; }
.neon-caja > div { overflow: hidden; }
.neon-caja.abierta { grid-template-rows: 1fr; opacity: 1; }
.neon-tit { font-size: 14px; font-weight: 700; color: #fff; margin: 16px 0 10px; }
.neon-tit span { font-weight: 500; color: var(--gris); margin-left: 6px; }
.neones { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 4px 8px; }
.neon-btn { width: 34px; height: 34px; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 50%, #fff 0 18%, var(--c) 46%, color-mix(in srgb, var(--c) 40%, #000) 100%); box-shadow: 0 0 10px var(--c), 0 0 22px color-mix(in srgb, var(--c) 55%, transparent); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.neon-btn::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; transition: border-color .2s; }
.neon-btn[aria-checked="true"]::after { border-color: #fff; }
.neon-btn:hover { transform: scale(1.1); }
.neon-btn:active { transform: scale(.94); }
@media (pointer: coarse) { .neon-btn { width: 40px; height: 40px; } }
/* Con la fila abierta, el brillo de los colores del neón no se recorta */
.neon-caja.abierta > div { overflow: visible; }

/* ================= Inicio rearmado: el auto en el taller ================= */
.techo { display: none; }
.hero-titulo .neon-txt { font-size: .64em; transform: rotate(-3deg); margin-top: .08em; }
.hero-prueba { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 26px; font-size: 14px; color: var(--gris); }
.hero-prueba li { display: inline-flex; align-items: baseline; gap: 6px; }
.hero-prueba li + li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--rosa); box-shadow: var(--glow-rosa); margin: 0 14px; align-self: center; }
.hero-prueba b { font-family: var(--f-tit); font-weight: 800; color: #fff; }
/* El auto, más grande, con el cartel de neón en la pared de atrás */
.hero-auto { width: min(1080px, 74vw, calc((100svh - 280px) * 2.3)); bottom: 5svh; }
.hero-cartel { position: absolute; left: 52%; bottom: 47%; z-index: 0; transform: translateX(-50%); text-align: center; line-height: .8; white-space: nowrap; pointer-events: none; }
.hero-cartel::before { content: ''; position: absolute; left: 50%; top: 50%; width: 150%; height: 260%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 43, 214, .26), rgba(155, 77, 255, .1) 55%, transparent); opacity: 0; transition: opacity .6s; }
.hc-apa { position: relative; display: block; font-family: var(--f-tit); font-weight: 900; font-size: clamp(60px, 8vw, 136px); letter-spacing: .02em; color: #2c0b27; }
.hc-plot { position: relative; display: inline-block; font-family: var(--f-graf); font-size: clamp(28px, 3.4vw, 58px); color: rgba(46, 242, 255, .16); transform: rotate(-6deg) translateY(-.12em); }
/* Se prende con fallas, como la intro, y después titila muy de vez en cuando */
.hero-cartel.prendido::before { opacity: 1; }
.hero-cartel.prendido .hc-apa { animation: hc-prende 1.4s steps(1, end) both, hc-zumbido 9s 3s infinite; }
.hero-cartel.prendido .hc-plot { animation: hc-prende-plot 1.4s .35s steps(1, end) both; }
@keyframes hc-prende {
  0%, 16%, 30% { color: #2c0b27; text-shadow: none; }
  10%, 22%, 42%, 100% { color: #fff; text-shadow: 0 0 3px #fff, 0 0 10px #ff2bd6, 0 0 30px #ff2bd6, 0 0 70px rgba(255, 43, 214, .7), 0 0 130px rgba(255, 43, 214, .4); }
}
@keyframes hc-prende-plot {
  0%, 20% { color: rgba(46, 242, 255, .16); text-shadow: none; }
  12%, 34%, 100% { color: #fff; text-shadow: 0 0 3px #fff, 0 0 10px #2ef2ff, 0 0 28px #2ef2ff, 0 0 60px rgba(46, 242, 255, .6); }
}
@keyframes hc-zumbido { 0%, 94%, 97%, 100% { opacity: 1; } 95.5%, 98.5% { opacity: .55; } }
.hero-auto .auto { z-index: 2; }
/* Avance del ploteo: una etiqueta de vidrio debajo del auto */
.hero-estado { position: relative; z-index: 3; width: max-content; max-width: 100%; margin: -6px auto 0; padding: 9px 18px; border-radius: 100px; background: rgba(7, 6, 10, .62); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; }
.hero-pista { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; margin: 0; }
.hero-auto .piso { display: none; }

@media (max-width: 760px) {
  .hero-pin { padding-top: 92px; grid-template-rows: auto 1fr; }
  .hero-titulo { margin-bottom: 14px; }
  .hero-prueba { font-size: 13px; margin-top: 18px; }
  .hero-prueba li + li::before { margin: 0 9px; }
  .hero-auto { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 4px -16px 0; align-self: center; }
  .hero-auto .auto { aspect-ratio: 1.3 / 1; }
  .hero-cartel { bottom: 50%; }
  .hc-apa { font-size: 19vw; }
  .hc-plot { font-size: 8vw; }
  .hero-estado { margin-top: -18px; }
  .hero-pista { display: none; }
}
@media (max-width: 980px) and (max-height: 720px) {
  .hero-prueba { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hero-auto { position: absolute; width: 52vw; right: 0; bottom: 2svh; margin: 0; }
  .hero-prueba, .hero-cartel .hc-plot { display: none; }
  .hc-apa { font-size: 9vw; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cartel.prendido .hc-apa, .hero-cartel.prendido .hc-plot { animation-duration: .01ms; animation-iteration-count: 1; }
}

/* Ajustes del inicio rearmado */
.hero-auto .auto canvas {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, #000 62%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, #000 62%, transparent 98%);
  mask-composite: intersect;
}
.hero-cartel { left: 60%; bottom: 66%; }
.hc-apa { font-size: clamp(56px, 6.6vw, 112px); }
.hc-plot { font-size: clamp(26px, 2.9vw, 48px); }
.hero-prueba li { display: inline; }
.hero-prueba li + li::before { display: inline-block; vertical-align: middle; }
.hero-pista { display: none; }
@media (max-width: 760px) {
  .hero-cartel { left: 50%; bottom: 60%; }
  .hc-apa { font-size: 17vw; }
  .hc-plot { font-size: 7vw; }
  .hero-prueba li:nth-child(3) { display: none; }
}
@media (min-width: 761px) { .hero-cartel { bottom: 77%; } }
/* Compu: el auto nunca pisa el texto (la columna del texto mide ~520px) */
@media (min-width: 981px) { .hero-auto { width: min(1080px, calc(100vw - 500px), calc((100svh - 280px) * 2.3)); } }
/* Tablet parada: como en el celu, el auto entra debajo del texto y a todo el ancho (sin hueco en el medio) */
@media (min-width: 761px) and (max-width: 980px) and (orientation: portrait) {
  .hero-pin { grid-template-rows: auto 1fr; }
  .hero-auto { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 10px calc(-1 * clamp(16px, 4vw, 44px)) 0; align-self: center; }
  .hero-auto .auto { aspect-ratio: 1.6 / 1; }
  .hero-cartel { left: 50%; bottom: 72%; }
  .hc-apa { font-size: 13vw; }
  .hc-plot { font-size: 5.4vw; }
}