/* =========================================================
   Informático Granada — capa «ciber» (17-oct-2026)
   Tema oscuro con efectos de fondo: lluvia de código (canvas de hacker.js), rejilla de neón,
   líneas de monitor CRT, título con glitch, terminal que se escribe sola y tarjetas con brillo.
   Solo en la portada (body.home), salvo cabecera y pie, que son oscuros en todo el sitio.
   Para quitarlo: borrar el enqueue de hacker.css/hacker.js en ig-theme-enhancements.php.
   ========================================================= */

:root {
  --hk-bg: #03060c;
  --hk-bg-2: #060c17;
  --hk-panel: rgba(9, 18, 33, .72);
  --hk-line: rgba(34, 211, 238, .16);
  --hk-line-2: rgba(34, 211, 238, .38);
  --hk-cyan: #22d3ee;
  --hk-green: #39ff88;
  --hk-magenta: #ff2bd6;
  --hk-text: #b9c6de;
  --hk-muted: #8193b3;
  --hk-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Cabecera y pie oscuros (todo el sitio) ---------- */
.wp-block-template-part.site-header::before,
header.wp-block-template-part::before {
  background: rgba(3, 6, 12, .78);
}
.wp-block-template-part.site-header,
header.wp-block-template-part {
  border-bottom: 1px solid var(--hk-line);
  box-shadow: 0 1px 0 rgba(34, 211, 238, .06), 0 10px 30px -18px rgba(34, 211, 238, .35);
}
header .wp-block-site-title a { color: #fff; }
header .wp-block-site-title a::before {
  content: ">_";
  font-family: var(--hk-mono);
  color: var(--hk-green);
  margin-right: .45rem;
  text-shadow: 0 0 8px rgba(57, 255, 136, .7);
  animation: hk-parpadeo 1.1s steps(1) infinite;
}
header .wp-block-navigation a { color: #c9d4ea; }
header .wp-block-navigation a:hover { color: var(--hk-cyan); text-shadow: 0 0 10px rgba(34, 211, 238, .6); }
.wp-block-navigation__responsive-container-open svg { color: #fff; }
.ig-header-cta {
  background: transparent !important;
  color: var(--hk-green) !important;
  border: 1px solid rgba(57, 255, 136, .55);
  box-shadow: 0 0 14px -4px rgba(57, 255, 136, .6), inset 0 0 12px -6px rgba(57, 255, 136, .6);
  white-space: nowrap;
}
@media (min-width: 1320px) { header .wp-block-group.alignwide { flex-wrap: nowrap; } }
.ig-header-cta:hover { background: rgba(57, 255, 136, .12) !important; }
@media (max-width: 1319px) {
  .wp-block-navigation__responsive-container.is-menu-open { background: rgba(3, 6, 12, .97) !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #e6edf9 !important; font-family: var(--hk-mono); }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before { content: "> "; color: var(--hk-green); }
  .wp-block-navigation__responsive-container-close svg { color: #fff; }
}
.site-footer, footer.wp-block-template-part {
  background: linear-gradient(180deg, #02040a, #000) !important;
  border-top: 1px solid var(--hk-line);
}

/* ---------- Fondo de la portada ---------- */
body.home {
  background: var(--hk-bg);
  color: var(--hk-text);
}
/* Rejilla fija + halos de color detrás de todo */
body.home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60vw 40vw at 85% 10%, rgba(47, 111, 237, .18), transparent 70%),
    radial-gradient(50vw 40vw at 5% 90%, rgba(255, 43, 214, .08), transparent 70%),
    linear-gradient(rgba(34, 211, 238, .055) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(34, 211, 238, .055) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--hk-bg);
}
/* Líneas de monitor CRT sobre toda la página (muy suaves, no estorban la lectura) */
body.home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, .16) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
  opacity: .55;
}
/* Lluvia de código (canvas creado por hacker.js) */
#hk-lluvia {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
}
/* Foco de luz que sigue al ratón (escritorio) */
#hk-foco {
  position: fixed;
  left: 0; top: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(34, 211, 238, .13), transparent 65%);
  transform: translate3d(var(--hk-x, -999px), var(--hk-y, -999px), 0);
  transition: opacity .3s;
}

body.home .wp-site-blocks,
body.home main,
body.home .wp-block-post-content { background: transparent !important; }

body.home h1, body.home h2, body.home h3, body.home .wp-block-post-title { color: #f1f6ff !important; }
body.home p, body.home li { color: var(--hk-text); }
body.home main a:not(.wp-block-button__link) { color: var(--hk-cyan); }

/* ---------- Título principal con glitch ---------- */
body.home h1.wp-block-post-title {
  position: relative;
  text-shadow: 0 0 18px rgba(34, 211, 238, .45), 0 0 2px rgba(255, 255, 255, .6);
  letter-spacing: .01em;
}
body.home h1.wp-block-post-title[data-hk]::before,
body.home h1.wp-block-post-title[data-hk]::after {
  content: attr(data-hk);
  position: absolute;
  inset: 0;
  pointer-events: none;
  text-shadow: none;
  overflow: hidden;
}
body.home h1.wp-block-post-title[data-hk]::before {
  color: var(--hk-cyan);
  transform: translate(-2px, 0);
  mix-blend-mode: screen;
  animation: hk-glitch-a 4.2s infinite steps(1);
  opacity: .8;
}
body.home h1.wp-block-post-title[data-hk]::after {
  color: var(--hk-magenta);
  transform: translate(2px, 0);
  mix-blend-mode: screen;
  animation: hk-glitch-b 4.2s infinite steps(1);
  opacity: .7;
}
@keyframes hk-glitch-a {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); }
  87% { clip-path: inset(12% 0 58% 0); transform: translate(-6px, -1px); }
  89% { clip-path: inset(62% 0 8% 0);  transform: translate(5px, 1px); }
  91% { clip-path: inset(30% 0 40% 0); transform: translate(-3px, 0); }
  93% { clip-path: inset(0 0 100% 0); }
}
@keyframes hk-glitch-b {
  0%, 87%, 100% { clip-path: inset(0 0 100% 0); }
  88% { clip-path: inset(48% 0 22% 0); transform: translate(6px, 1px); }
  90% { clip-path: inset(8% 0 70% 0);  transform: translate(-5px, -1px); }
  92% { clip-path: inset(70% 0 4% 0);  transform: translate(3px, 0); }
  94% { clip-path: inset(0 0 100% 0); }
}
@keyframes hk-parpadeo { 50% { opacity: 0; } }

/* ---------- Hero ---------- */
body.home .ig-hero {
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(22, 39, 74, .72) 0%, rgba(6, 11, 24, .62) 50%, rgba(3, 6, 12, .7) 100%);
  border-top: 1px solid var(--hk-line);
  border-bottom: 1px solid var(--hk-line);
}
/* Suelo de rejilla en perspectiva que avanza */
body.home .ig-hero::after {
  inset: auto -20% -2px -20%;
  width: auto; height: 46%;
  max-width: none; max-height: none;
  filter: none;
  background:
    linear-gradient(rgba(34, 211, 238, .5) 1px, transparent 1px) 0 0 / 100% 38px,
    linear-gradient(90deg, rgba(34, 211, 238, .45) 1px, transparent 1px) 0 0 / 60px 100%;
  transform: perspective(380px) rotateX(62deg);
  transform-origin: bottom;
  -webkit-mask: linear-gradient(to top, #000 0%, transparent 85%);
  mask: linear-gradient(to top, #000 0%, transparent 85%);
  opacity: .35;
  animation: hk-suelo 2.6s linear infinite;
}
@keyframes hk-suelo { to { background-position: 0 38px, 0 0; } }

/* Etiqueta superior convertida en línea de terminal */
body.home .ig-eyebrow {
  font-family: var(--hk-mono);
  background: rgba(3, 10, 18, .75);
  border: 1px solid rgba(57, 255, 136, .35);
  color: var(--hk-green);
  border-radius: 6px;
  text-shadow: 0 0 8px rgba(57, 255, 136, .55);
  box-shadow: 0 0 18px -8px rgba(57, 255, 136, .7);
}
body.home .ig-eyebrow::before { content: "root@granada:~$"; color: var(--hk-cyan); font-size: inherit; text-shadow: 0 0 8px rgba(34, 211, 238, .6); }
body.home .ig-eyebrow::after { content: "▋"; animation: hk-parpadeo 1s steps(1) infinite; }
body.home .ig-hero p { color: #cdd7ec; }
body.home .ig-hero .ig-trust-line { font-family: var(--hk-mono); font-size: .82rem; color: #7ff5b4; }

body.home .ig-hero-image img {
  border: 1px solid var(--hk-line-2);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .15), 0 0 40px -6px rgba(34, 211, 238, .45), 0 30px 60px -20px #000;
}
/* Barrido de escáner sobre la foto */
body.home .ig-hero-image { overflow: visible; }
body.home .ig-hero-image > a, body.home .ig-hero-image { isolation: isolate; }
body.home .ig-hero-image .hk-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
body.home .ig-hero-image .hk-scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 28%;
  background: linear-gradient(to bottom, transparent, rgba(34, 211, 238, .22) 80%, rgba(180, 255, 255, .7) 100%);
  animation: hk-scan 3.8s ease-in-out infinite;
}
@keyframes hk-scan { 0% { top: -30%; } 60%, 100% { top: 100%; } }
body.home .ig-hero-image::after {
  background: rgba(3, 10, 18, .9);
  color: var(--hk-green);
  font-family: var(--hk-mono);
  border: 1px solid rgba(57, 255, 136, .4);
  box-shadow: 0 0 20px -6px rgba(57, 255, 136, .7);
}

/* ---------- Botones ---------- */
body.home .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  box-shadow: 0 0 22px -4px rgba(34, 211, 238, .75), inset 0 0 0 1px rgba(255, 255, 255, .15);
}
body.home .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--hk-green) !important;
  border-color: rgba(57, 255, 136, .6) !important;
  background: rgba(57, 255, 136, .05) !important;
  box-shadow: 0 0 16px -6px rgba(57, 255, 136, .8);
}
body.home .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(57, 255, 136, .14) !important; }

/* ---------- Secciones ---------- */
body.home .ig-section,
body.home .ig-section-alt,
body.home .ig-contact-section { background: transparent !important; }
body.home .ig-section-alt { background: linear-gradient(180deg, rgba(6, 12, 23, .75), rgba(6, 12, 23, .55)) !important; border-top: 1px solid var(--hk-line); border-bottom: 1px solid var(--hk-line); }
body.home .ig-section h2::before,
body.home .ig-contact-section h2::before {
  content: "// ";
  font-family: var(--hk-mono);
  color: var(--hk-green);
  text-shadow: 0 0 10px rgba(57, 255, 136, .6);
}
body.home .ig-section h2,
body.home .ig-contact-section h2 { text-shadow: 0 0 22px rgba(34, 211, 238, .25); }
body.home .ig-section-intro, body.home .ig-hours { color: var(--hk-muted) !important; }
body.home .ig-zones { color: var(--hk-cyan) !important; font-family: var(--hk-mono); text-shadow: 0 0 10px rgba(34, 211, 238, .45); }

/* ---------- Tarjetas ---------- */
body.home .ig-card {
  position: relative;
  background: var(--hk-panel) !important;
  border: 1px solid var(--hk-line) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
/* Esquinas tipo visor */
body.home .ig-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  background:
    linear-gradient(var(--hk-cyan), var(--hk-cyan)) top left / 14px 1px no-repeat,
    linear-gradient(var(--hk-cyan), var(--hk-cyan)) top left / 1px 14px no-repeat,
    linear-gradient(var(--hk-cyan), var(--hk-cyan)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--hk-cyan), var(--hk-cyan)) bottom right / 1px 14px no-repeat;
  opacity: .55;
  transition: opacity .25s, inset .25s;
}
body.home .ig-card:hover {
  border-color: var(--hk-line-2) !important;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .2), 0 0 34px -8px rgba(34, 211, 238, .55) !important;
}
body.home .ig-card:hover::after { opacity: 1; inset: 4px; }
body.home .ig-card::before { box-shadow: 0 0 18px -2px rgba(34, 211, 238, .7); }
body.home .ig-card p { color: var(--hk-muted) !important; }
body.home .ig-card a { color: var(--hk-cyan) !important; }

/* ---------- Pasos ---------- */
body.home .ig-step-number {
  font-family: var(--hk-mono) !important;
  border-radius: 8px !important;
  background: rgba(3, 10, 18, .85) !important;
  color: var(--hk-green) !important;
  border: 1px solid rgba(57, 255, 136, .55);
  box-shadow: 0 0 16px -4px rgba(57, 255, 136, .8);
  text-shadow: 0 0 8px rgba(57, 255, 136, .8);
}
body.home .ig-step p:not(.ig-step-number) { color: var(--hk-muted); }

/* ---------- Preguntas frecuentes ---------- */
body.home details.ig-faq-item {
  background: var(--hk-panel);
  border: 1px solid var(--hk-line);
  transition: border-color .2s, box-shadow .2s;
}
body.home details.ig-faq-item:hover,
body.home details.ig-faq-item[open] { border-color: var(--hk-line-2); box-shadow: 0 0 24px -10px rgba(34, 211, 238, .7); }
body.home details.ig-faq-item summary { color: #eef4ff; }
body.home details.ig-faq-item summary::after { color: var(--hk-green); font-family: var(--hk-mono); }
body.home details.ig-faq-item p { color: var(--hk-muted); }

/* ---------- Formulario ---------- */
body.home .ig-form-wrapper {
  background: var(--hk-panel) !important;
  border: 1px solid var(--hk-line) !important;
  box-shadow: 0 0 40px -18px rgba(34, 211, 238, .6) !important;
}
body.home .ig-form-wrapper .wpcf7-form label { color: #dbe5f7 !important; font-family: var(--hk-mono); font-size: .85rem; }
body.home .ig-form-wrapper .wpcf7-form input[type="text"],
body.home .ig-form-wrapper .wpcf7-form input[type="email"],
body.home .ig-form-wrapper .wpcf7-form input[type="tel"],
body.home .ig-form-wrapper .wpcf7-form textarea {
  background: rgba(2, 6, 12, .85) !important;
  border: 1px solid rgba(34, 211, 238, .25) !important;
  color: #e9f1ff !important;
  font-family: var(--hk-mono);
  caret-color: var(--hk-green);
}
body.home .ig-form-wrapper .wpcf7-form input:focus,
body.home .ig-form-wrapper .wpcf7-form textarea:focus {
  border-color: var(--hk-green) !important;
  box-shadow: 0 0 0 3px rgba(57, 255, 136, .15), 0 0 18px -4px rgba(57, 255, 136, .6) !important;
}
body.home .ig-form-wrapper .wpcf7-form input[type="submit"] { font-family: var(--hk-mono); box-shadow: 0 0 22px -4px rgba(34, 211, 238, .75); }
body.home .wpcf7 .wpcf7-response-output, body.home .wpcf7-not-valid-tip { color: #ffd2d2; }

/* ---------- Accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  #hk-lluvia, #hk-foco { display: none; }
  body.home h1.wp-block-post-title[data-hk]::before,
  body.home h1.wp-block-post-title[data-hk]::after { display: none; }
  body.home .ig-hero::after, body.home .ig-hero-image .hk-scan::before { animation: none; }
}
@media (max-width: 781px) {
  body.home .ig-eyebrow::before { content: "$"; }
  #hk-foco { display: none; }
  #hk-lluvia { opacity: .4; }
  body.home::after { opacity: .35; }
}