/* =========================================================
   GEMARC · capa «punch» (2026-09-27)
   Paleta azul GEMARC (la del logo) + efectos inmersivos.
   Va DESPUÉS de styles.css. Todo lo animado respeta reduce-motion.
   ========================================================= */

/* ---------- 1. Portada nocturna eléctrica ---------- */
.hero {
  position: relative;
  isolation: isolate;
  --ink: #eef3fa;
  --muted: #9fb2cc;
  --line: rgba(160, 190, 235, 0.16);
  color: var(--ink);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(60% 55% at 78% 30%, rgba(47, 123, 255, 0.26), transparent 70%),
    radial-gradient(45% 50% at 12% 88%, rgba(176, 128, 86, 0.18), transparent 70%),
    linear-gradient(180deg, #050c1b 0%, #0a1a36 55%, #0a1628 100%);
}
.hero-grid {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}
.hero .hb-l {
  background-image: linear-gradient(100deg, #eef3fa 0%, #eef3fa 38%, #d9b48a 47%, #f0e1cd 52%, #6aa5ff 58%, #eef3fa 66%, #eef3fa 100%);
}
@keyframes hb-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(47, 123, 255, 0)); transform: translateY(0); }
  50% { filter: drop-shadow(0 0 26px rgba(47, 123, 255, 0.55)) drop-shadow(0 4px 14px rgba(217, 180, 138, 0.35)); transform: translateY(-0.02em); }
}
@keyframes ferr-cycle {
  0% { opacity: 0; transform: translateY(0.3em); color: #eef3fa; }
  8% { opacity: 1; transform: none; color: #eef3fa; }
  26% { color: #eef3fa; }
  36% { color: rgba(238, 243, 250, 0.3); }
  92% { opacity: 1; color: rgba(238, 243, 250, 0.3); }
  100% { opacity: 0; transform: translateY(-0.2em); color: rgba(238, 243, 250, 0.3); }
}
.hero .lead { color: #c9d6e8; }
.hero .btn-ink {
  background: linear-gradient(135deg, var(--copper) 0%, #c29a6e 100%);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(176, 128, 86, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hero .btn-ink .orb { background: rgba(255, 255, 255, 0.2); color: #fff; }
.hero .btn-line { color: #eef3fa; border-color: rgba(160, 190, 235, 0.35); background: rgba(255, 255, 255, 0.04); }
.hero .btn-line:hover { border-color: var(--volt-bright); background: rgba(47, 123, 255, 0.14); }
.hero .stat b { color: #fff; text-shadow: 0 0 24px rgba(47, 123, 255, 0.55); }
.hero .mo { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(106, 165, 255, 0.14); }

/* ---------- 2. Cinta: corriente azul ---------- */
.ticker {
  background: linear-gradient(90deg, #0b3d91, #1553c7 50%, #0b3d91);
  color: #eef3fa;
  box-shadow: 0 0 40px -6px rgba(47, 123, 255, 0.6);
}
.ticker b { color: #d9b48a; }

/* ---------- 3. Secciones claras: plano técnico ---------- */
.quienes, .oficios, .marcas, .localiza, .faq {
  position: relative;
}
.quienes::before, .oficios::before, .marcas::before, .faq::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 61, 145, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 61, 145, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%);
}
main { isolation: isolate; }

/* ---------- 4. Secciones oscuras: foco que sigue al dedo/ratón ---------- */
.electrico, .obra, .hoteles, .contacto {
  position: relative;
  isolation: isolate;
}
.pz-spot {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(47, 123, 255, 0.16), rgba(176, 128, 86, 0.05) 45%, transparent 70%);
}
.pz-lit > .pz-spot { opacity: 1; }


/* ---------- 5. Titulares que se encienden como un fluorescente ---------- */
.pz-tube { opacity: 0.12; }
.pz-tube.pz-on { opacity: 1; }
@keyframes pz-flicker {
  0% { opacity: 0.12; }
  8% { opacity: 1; text-shadow: 0 0 28px rgba(47, 123, 255, 0.6); }
  12% { opacity: 0.2; }
  22% { opacity: 1; }
  26% { opacity: 0.35; }
  40% { opacity: 1; text-shadow: 0 0 34px rgba(47, 123, 255, 0.55); }
  100% { opacity: 1; text-shadow: none; }
}

/* ---------- 6. Tarjetas con borde de corriente ---------- */
.pz-glow { position: relative; }
.pz-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), #6aa5ff, #d9b48a 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  z-index: 3;
}
.pz-glow:hover::after { opacity: 1; }

/* ---------- 7. Cursor chispa (solo ratón) ---------- */
.pz-cursor, .pz-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
}
.pz-cursor {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: #d9b48a;
  box-shadow: 0 0 12px 3px rgba(217, 180, 138, 0.7);
}
.pz-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(106, 165, 255, 0.65);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), background 0.25s ease, border-color 0.25s ease;
}
.pz-cursor-ring.is-link {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(47, 123, 255, 0.12);
  border-color: rgba(217, 180, 138, 0.8);
}
.pz-spark {
  position: fixed;
  z-index: 9998;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  background: #f0e1cd;
  box-shadow: 0 0 8px 2px rgba(217, 180, 138, 0.8);
  animation: pz-spark 0.6s ease-out forwards;
}
@keyframes pz-spark {
  to { transform: translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
}

/* ---------- 8. Hilo de corriente que baja con el scroll (escritorio) ---------- */
.pz-wire {
  position: fixed;
  z-index: 40;
  left: 14px;
  top: 12vh;
  bottom: 12vh;
  width: 2px;
  border-radius: 2px;
  background: rgba(106, 165, 255, 0.14);
  pointer-events: none;
}
.pz-wire i {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--p, 0) * 100%);
  border-radius: 2px;
  background: linear-gradient(180deg, #2f7bff, #6aa5ff 60%, #d9b48a);
  box-shadow: 0 0 10px rgba(47, 123, 255, 0.7);
}
.pz-wire b {
  position: absolute;
  left: 50%;
  top: calc(var(--p, 0) * 100%);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px #6aa5ff, 0 0 22px 6px rgba(47, 123, 255, 0.6);
}
@media (max-width: 1100px) { .pz-wire { display: none; } }

/* ---------- 9. Fotos que se revelan con persiana ---------- */
.pz-wipe { clip-path: inset(0 0 100% 0 round var(--r)); transition: clip-path 1.1s var(--ease); }
.pz-wipe.pz-in { clip-path: inset(0 0 0 0 round var(--r)); }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .pz-tube { opacity: 1; }
  .pz-wipe { clip-path: none; }
  .pz-cursor, .pz-cursor-ring, .pz-spark, .pz-wire { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .pz-cursor, .pz-cursor-ring { display: none; }
}

/* Eléctrico: el halo pasa de cobre a azul con un toque naranja abajo */
.electrico::before {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(47, 123, 255, 0.24), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(176, 128, 86, 0.12), transparent 60%);
}

/* Titulares en fondo oscuro: el degradado cobre parte de blanco, no de tinta
   (el de «Obra y reforma» salía tinta sobre tinta y no se leía) */
.electrico h2, .obra h2, .hoteles h2, .proceso h2, .localiza .block h2, .contacto h2 { --ink: #eef3fa; }

/* Móvil: «ferretería» tachada y cifras sobre la portada nocturna (la regla móvil de styles.css las pintaba en tinta) */
@media (max-width: 980px), (hover: none), (pointer: coarse) {
  .hero .h1-line.strike { color: rgba(238, 243, 250, 0.42) !important; }
  .hero .stat {
    background: linear-gradient(160deg, rgba(47, 123, 255, 0.16), rgba(255, 255, 255, 0.03));
    border-color: rgba(106, 165, 255, 0.28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  }
  .hero .stat b, .hero .stat b span[data-count], .hero .stat b > span { color: #fff; }
}

/* Rotadores de fotos: cortinilla limpia en vez de fundido (el fundido mezclaba dos fotos medio transparentes).
   La foto nueva barre por encima; la anterior sigue opaca debajo hasta que queda cubierta. */
.mo-rot img, .elec-rot img, .qs-rot .qs-img, .hm-rotator .hm-img, .obra-media .om-img {
  opacity: 0 !important;
  visibility: hidden;
  z-index: 0;
  clip-path: inset(0 0 0 0);
  transition: opacity 0s linear 0.95s, visibility 0s linear 0.95s, transform 5.5s ease !important;
}
.mo-rot img.pz-prev, .elec-rot img.pz-prev, .qs-rot .qs-img.pz-prev, .hm-rotator .hm-img.pz-prev, .obra-media .om-img.pz-prev {
  opacity: 1 !important;
  visibility: visible;
  z-index: 1;
}
.mo-rot img.is-on, .elec-rot img.is-on, .qs-rot .qs-img.is-active, .hm-rotator .hm-img.is-active, .obra-media .om-img.is-on {
  opacity: 1 !important;
  visibility: visible;
  z-index: 2;
  animation: pz-cortina 0.95s cubic-bezier(0.65, 0, 0.35, 1) both;
  transition: opacity 0s, visibility 0s, transform 5.5s ease !important;
}
@keyframes pz-cortina {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .mo-rot img.is-on, .elec-rot img.is-on, .qs-rot .qs-img.is-active, .hm-rotator .hm-img.is-active, .obra-media .om-img.is-on { animation: none; }
}

/* Hoteles: fuera el vídeo en bucle de debajo (eran las mismas fotos) y el rotador al 100 %: nunca dos imágenes mezcladas */
.hoteles-media .ht-loop { display: none !important; }
.hoteles-media .hm-rotator { opacity: 1 !important; }

/* Motor de chispas nuevo: también en móvil (el viejo solo iba con ratón) y por encima de la intro */
.pz-sparks { display: block !important; z-index: 10001; mix-blend-mode: normal; }
.pz-cursor-ring { z-index: 10002; }

/* El hilo de corriente no asoma durante la intro */
html.has-intro:not(.intro-done) .pz-wire { opacity: 0; }
.pz-wire { transition: opacity 0.6s ease; }