/* ============================================================
   FS CUSTOM WELDS — Capa "cockpit" (v2, más bestia)
   Toque automovilístico SOBRE lo que ya existe, sin tocar el HTML
   ni el SEO/GEO. 100% aditiva y reversible: se quita borrando este
   archivo, su <link> y el SVG de img/ (motif-bujia).
   Nombres técnicos en inglés, comentarios en español.
   ============================================================ */

:root {
  --redline: oklch(0.62 0.21 27);
  --led-green: oklch(0.74 0.17 145);
  --metal-hi: rgba(255, 255, 255, 0.07);
  --engrave: rgba(0, 0, 0, 0.55);
  /* tejido de fibra de carbono reutilizable */
  --carbon:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.022) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.022) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.22) 0 7px, transparent 7px 14px);
}

/* ════════ 1. NAV = binnacle / salpicadero (fibra de carbono) ════════ */
.nav {
  background:
    linear-gradient(180deg, var(--metal-hi), transparent 46%),
    var(--carbon),
    color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: inset 0 1px 0 var(--metal-hi), 0 10px 30px rgba(0,0,0,0.5);
}
/* hairline ámbar→roja bajo el menú */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--redline) 60%, transparent 92%);
  opacity: 0.6; pointer-events: none;
}

/* SEPARAR la marca de los enlaces (que no quede pegada a "Servicios") */
.brand { margin-right: 26px; }
.nav-links { gap: 15px; }

/* enlaces del menú = testigos / luces indicadoras */
.nav-links a { position: relative; }
.nav-links a::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
  transition: background 0.2s, box-shadow 0.2s;
}
.nav-links a:hover { text-shadow: 0 0 12px var(--accent-dim); }
.nav-links a:hover::before,
.nav-links a.active-nav::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 2px #fff inset;
}

/* teléfono = botón de contacto/arranque (ignition) */
/* El teléfono del nav = PLACA DE NÚMERO estilo F1: rojo de competición
   sobre fibra de carbono, con remaches en las esquinas y filo metálico. */
.nav-cta {
  position: relative;
  padding: 9px 16px;
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.14em;
  color: var(--redline);
  text-shadow: 0 0 9px color-mix(in srgb, var(--redline) 50%, transparent);
  background:
    radial-gradient(circle at 6px 6px, rgba(255,255,255,0.22) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at calc(100% - 6px) 6px, rgba(255,255,255,0.22) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 6px calc(100% - 6px), rgba(255,255,255,0.22) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(255,255,255,0.22) 0 1.1px, transparent 1.7px),
    var(--carbon),
    linear-gradient(180deg, #19120f, #0b0807);
  border: 1px solid #000; border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--redline) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 3px 10px rgba(0,0,0,0.5);
  transition: color .18s, box-shadow .18s, text-shadow .18s, transform .12s;
}
.nav-cta:hover {
  color: color-mix(in srgb, var(--redline) 78%, #fff);
  text-shadow: 0 0 14px var(--redline);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--redline) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 16px color-mix(in srgb, var(--redline) 30%, transparent),
    0 3px 10px rgba(0,0,0,0.5);
}
.nav-cta:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); }

/* ════════ 2. Bujía como marca de los títulos de sección ════════ */
.kicker { gap: 14px; }
.kicker::before {
  content: ""; width: 15px; height: 38px;
  background: url("../img/motif-bujia.svg") center/contain no-repeat;
  filter: drop-shadow(0 0 5px var(--accent-dim));
  opacity: 0.92;
}

/* ════════ 3. Botones ════════
   El diseño de los botones (estilo rocker F1: moleteado + LED ámbar + filo,
   y LED VERDE al pulsar) vive ahora en styles.css → .btn / .btn-solid / .btn-ghost.
   Esta capa cockpit YA NO los pisa: antes había aquí un tratamiento naranja
   brillante que tapaba el nuevo. Si algún día quieres volver al naranja,
   el diseño viejo está en el control de versiones. */

/* ════════ 4. Fichas de servicio / pasos = placas de motor grabadas ════════ */
.svc .num, .step-n {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600;
  background: linear-gradient(180deg, #2a251d, #14110d);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 11px;
  align-self: flex-start;
  box-shadow: inset 0 1px 0 var(--metal-hi), inset 0 -2px 3px var(--engrave), 0 1px 2px rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 #000;
}
.svc .num::before, .svc .num::after {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a6052, #2a241c);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.6);
}
.svc .tag {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent),
    var(--accent-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.35);
}
/* tornillo en la esquina de cada ficha */
.svc { position: relative; }
.svc::after {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a443a, #16130f 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.5);
  opacity: 0.85;
}
/* ranura del tornillo */
.svc::before {
  content: ""; position: absolute; top: 17px; right: 15px; z-index: 2;
  width: 6px; height: 1.5px; border-radius: 1px; background: rgba(0,0,0,0.7);
  transform: rotate(35deg); transform-origin: center;
  pointer-events: none;
}

/* ════════ 5. (libre) — el escape dibujado se retiró: la galería ya
   tiene una foto real de un tubo de escape, un dibujo al lado restaba. ════════ */

/* ════════ 6. Precios = lectura digital del cuadro ════════ */
.price-row .val:not(.soft) {
  background: linear-gradient(180deg, #000, #161310);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 9px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.7);
  text-shadow: 0 0 8px var(--accent-dim);
}

/* ════════ 7. Footer = panel de fibra de carbono ════════ */
footer {
  background:
    linear-gradient(180deg, var(--metal-hi), transparent 30%),
    var(--carbon),
    var(--surface);
}

/* ════════ 8. Separador = CORTE DE SOPLETE (lo dispara cockpit.js) ════════
   Cada sección lleva una línea de corte en su borde superior. Al entrar
   en pantalla, una cabeza de corte la recorre dejando el metal al rojo
   que se enfría, soltando chispas (canvas .cut-sparks). */
section { position: relative; }
.cut-line {
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  z-index: 4; pointer-events: none; overflow: visible;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}
.cut-line .cut-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--redline) 55%, #2a0e00) 0%,
    var(--redline) 30%,
    var(--accent) 62%,
    #fff6e0 96%);
  box-shadow: 0 0 14px 2px var(--accent), 0 0 30px 4px var(--redline);
  border-radius: 2px;
  transition: box-shadow 2.6s ease 0.3s, filter 2.6s ease 0.3s;
}
.cut-line.cooled .cut-fill {
  box-shadow: 0 0 0 0 transparent;
  filter: brightness(0.32) saturate(0.7);
}
/* cabeza incandescente del soplete */
.cut-line .cut-head {
  position: absolute; top: 50%; left: 0; width: 16px; height: 16px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd27a 30%, var(--accent) 55%, transparent 72%);
  box-shadow: 0 0 18px 6px var(--accent), 0 0 36px 10px var(--redline);
  opacity: 0;
}
.cut-line.cutting .cut-head { opacity: 1; }

/* ════════ Responsive ════════ */
@media (max-width: 980px) {
  .brand { margin-right: 12px; }
  /* En móvil los enlaces son chips: fuera los «testigos» (puntitos) del nav */
  .nav-links a::before { display: none; }
  .nav::after { opacity: 0.45; }
  .kicker::before { height: 32px; width: 13px; }
}

/* lienzo de chispas del corte de soplete (fijo; el tamaño lo fija cockpit.js
   con clientWidth/Height para NO contar la barra de scroll → sin scroll horizontal) */
.cut-sparks { position: fixed; top: 0; left: 0; z-index: 58; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cut-sparks { display: none; } }

/* ════════ 9. Reloj de gasolina (se llena al hacer scroll) ════════ */
.fuel-gauge {
  position: fixed; left: 22px; bottom: 24px; z-index: 55;
  width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1b1814, #0b0908 72%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -8px 16px rgba(0,0,0,0.6), 0 10px 26px rgba(0,0,0,0.55);
  display: grid; place-items: center;
}
.fuel-gauge::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: linear-gradient(150deg, rgba(255,255,255,0.10), transparent 46%);
  pointer-events: none;
}
.fuel-svg { width: 100%; height: 100%; overflow: visible; }
.fuel-track { fill: none; stroke: color-mix(in srgb, var(--line) 75%, #000); stroke-width: 5; stroke-linecap: round; }
.fuel-fill { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--accent-dim)); transition: stroke-dashoffset 0.35s ease; }
.fuel-red { fill: none; stroke: var(--redline); stroke-width: 5; stroke-linecap: butt; }
.fuel-tick { stroke: var(--muted); stroke-width: 1.5; }
.fuel-lab { fill: var(--muted); font-family: var(--mono); font-size: 9px; }
.fuel-cap { fill: var(--accent); font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; opacity: 0.85; }
.fuel-needle { transform-box: view-box; transform-origin: 50px 54px; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.fuel-needle line { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--accent-dim)); }
.fuel-hub { fill: var(--surface-2); stroke: var(--text); stroke-width: 1.4; }
@media (prefers-reduced-motion: reduce) { .fuel-fill, .fuel-needle { transition: none; } }
@media (max-width: 560px) { .fuel-gauge { width: 64px; height: 64px; left: 14px; bottom: 18px; } }

/* ════════ 10. Titular "soldado" + chispas + ken-burns ════════ */
/* lienzo de chispas sobre el hero (canvas es replaced: necesita tamaño explícito) */
.weld-sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* ken-burns: la foto respira lentamente */
.hero-media img { will-change: transform; animation: kenburns 22s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

/* cada palabra del H1 empieza apagada y se "suelda" al entrar */
.hero-anim .hero-word { display: inline-block; opacity: 0; }
.hero-anim .hero-word.weld { animation: weld-in 1.05s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes weld-in {
  0% {
    opacity: 0; transform: translateY(10px) scale(1.05);
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 24px #ffae45, 0 0 44px #ff5a00, 0 0 70px #ff3b00;
    filter: brightness(1.8);
  }
  18% { opacity: 1; }
  55% {
    transform: none;
    color: #ffe1b0;
    text-shadow: 0 0 8px #ffd29a, 0 0 18px #ff8a2e, 0 0 30px #ff5a00;
    filter: brightness(1.25);
  }
  100% {
    opacity: 1; transform: none;
    color: inherit;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    filter: none;
  }
}

/* lema, subtítulo y botones entran tras el soldado */
.hero-anim .lema,
.hero-anim p.sub,
.hero-anim .cta-row {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.hero-anim .lema { transition-delay: calc(var(--hero-tail, 800ms) - 200ms); }
.hero-anim p.sub { transition-delay: var(--hero-tail, 800ms); }
.hero-anim .cta-row { transition-delay: calc(var(--hero-tail, 800ms) + 140ms); }
.hero-go .lema,
.hero-go p.sub,
.hero-go .cta-row { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; }
  .hero-anim .hero-word { opacity: 1; }
  .hero-anim .lema, .hero-anim p.sub, .hero-anim .cta-row { opacity: 1; transform: none; transition: none; }
}