/* ==========================================================================
   ST Galicia — Soluciones Tecnológicas
   Arquetipo: Mouse-Reactive Gradient (adaptado a la paleta de marca)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paleta derivada del logotipo: cian ST + azul marino Galicia */
  --bg:         #06101a;
  --bg-2:       #0a1826;
  --surface:    #0c1e2e;
  --surface-2:  #102639;

  --ink:        #eaf3fa;
  --ink-2:      #c3d7e6;
  --mute:       #86a1b8;

  --accent:     #1fa8e8;   /* cian del logo */
  --accent-2:   #0b7fc7;   /* azul medio del logo */
  --navy:       #1f4763;   /* marino de "Galicia" */

  --grad-1:     #0b7fc7;
  --grad-2:     #1f4763;
  --grad-3:     #16c5e0;

  --line:       rgba(140, 180, 214, 0.14);
  --line-2:     rgba(140, 180, 214, 0.28);

  --font-d:     "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-b:     "Inter", "Segoe UI", system-ui, sans-serif;
  --font-m:     "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --ease:       cubic-bezier(.22, 1, .36, 1);
  --ease-io:    cubic-bezier(.65, 0, .35, 1);

  --pad:        clamp(1.25rem, 5vw, 6rem);
  --maxw:       1280px;
  --nav-h:      92px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;              /* clip, no hidden: preserva sticky */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 17px;
  font-weight: 350;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-d); font-weight: 600; margin: 0; line-height: 1.06; letter-spacing: -0.025em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #04121c; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--accent); color: #04121c;
  padding: .7rem 1.1rem; border-radius: 8px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Logotipo ----------
   Reproducción del logotipo de SoltecGalicia. La composición del original es:
   "ST" grande a la izquierda en degradado azul→cian; a su derecha, la tira
   binaria encima de "Galicia"; y debajo, cruzando todo el ancho,
   "Soluciones Tecnologicas" con tracking amplio.

   El original está pensado sobre blanco, con "Galicia" en azul marino. Sobre
   el fondo oscuro de esta web ese marino sería ilegible, así que se usa la
   versión invertida: "Galicia" en claro. El resto se mantiene.

   La tipografía es una geométrica de "a" de un solo piso (familia Futura /
   Century Gothic). Jost es el equivalente libre más próximo.
   --------------------------------------------------------------------- */
.logo {
  --logo-size: 1rem;                       /* escala todo el conjunto */
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: .34em;
  align-items: end;
  font-size: var(--logo-size);
  line-height: 1;
}

.logo-st {
  grid-column: 1; grid-row: 1;
  font-family: "Jost", var(--font-d), sans-serif;
  font-weight: 700;
  font-size: 2.5em;
  letter-spacing: -0.045em;
  line-height: .82;
  background: linear-gradient(104deg, #1878be 0%, #1c86cc 46%, #35bdec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.logo-col {
  grid-column: 2; grid-row: 1;
  display: grid; gap: .18em;
  align-content: end;
}

.logo-bits {
  font-family: "Jost", var(--font-m), monospace;
  font-weight: 400;
  font-size: .72em;
  letter-spacing: .12em;
  color: var(--ink-2);
  opacity: .78;
  white-space: nowrap;
}

.logo-name {
  font-family: "Jost", var(--font-d), sans-serif;
  font-weight: 500;
  font-size: 1.72em;
  letter-spacing: -0.005em;
  line-height: .86;
  color: #dbe8f3;
}

.logo-sub {
  grid-column: 1 / -1; grid-row: 2;
  font-family: "Jost", var(--font-b), sans-serif;
  font-weight: 400;
  font-size: .74em;
  letter-spacing: .3em;
  color: var(--mute);
  white-space: nowrap;
  margin-top: .42em;
}

/* Reserva: sin background-clip:text el "ST" quedaría invisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo-st { background: none; color: #2196dd; -webkit-text-fill-color: #2196dd; }
}

/* ---------- 4. Splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  background: var(--bg);
  /* Red de seguridad CSS: se oculta sola a los 4,5 s aunque el JS falle */
  animation: splashSafety .01s 4.5s forwards;
}
@keyframes splashSafety {
  to { opacity: 0; pointer-events: none; visibility: hidden; }
}
.splash.is-out {
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .7s var(--ease), visibility 0s .7s;
}
.splash-inner { display: grid; justify-items: center; }
.logo-lg { --logo-size: clamp(1.05rem, 2.6vw, 1.65rem); }
.splash-bar {
  width: 168px; height: 2px; margin: 2.2rem auto 0;
  background: var(--line-2); overflow: hidden; border-radius: 2px;
}
.splash-bar i {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: splashSlide 1.15s var(--ease-io) infinite;
}
@keyframes splashSlide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* ---------- 5. Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(6, 16, 26, 0.82);
  border-bottom-color: var(--line);
}
@supports (backdrop-filter: blur(14px)) {
  .nav.is-stuck { background: rgba(6, 16, 26, 0.62); backdrop-filter: blur(16px) saturate(150%); }
}
.nav-in {
  max-width: var(--maxw); height: 100%; margin: 0 auto;
  padding: 0 var(--pad);
  display: flex; align-items: center; gap: 2rem;
}
.brand { margin-right: auto; --logo-size: clamp(.82rem, 1.05vw, .98rem); }
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
  position: relative; font-size: .875rem; color: var(--ink-2);
  transition: color .25s var(--ease);
  padding-block: .4rem;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 500;
  padding: .62rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.nav-cta span { transition: transform .35s var(--ease); }
.nav-cta:hover { border-color: var(--accent); background: rgba(31, 168, 232, .1); }
.nav-cta:hover span { transform: translateX(4px); }

.nav-burger {
  display: none; width: 42px; height: 42px;
  background: none; border: 1px solid var(--line-2); border-radius: 10px;
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger i {
  display: block; width: 17px; height: 1.5px; background: var(--ink);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-burger[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.menu-movil {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 490;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  padding: 1.25rem var(--pad) 2rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.menu-movil[hidden] { display: none; }
.menu-movil a {
  font-family: var(--font-d); font-size: 1.35rem; font-weight: 500;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.menu-movil .mm-cta { color: var(--accent); border-bottom: none; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 4rem) var(--pad) 0;
  overflow: hidden;
}

/* Malla de gradiente reactiva al ratón (efecto firma del arquetipo) */
.hero-gradient {
  position: absolute; inset: -20%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 620px at var(--mx, 62%) var(--my, 30%), var(--grad-1) 0%, transparent 58%),
    radial-gradient(circle 780px at calc(var(--mx, 62%) + 14%) calc(var(--my, 30%) + 16%), var(--grad-2) 0%, transparent 62%),
    radial-gradient(circle 420px at calc(var(--mx, 62%) - 12%) calc(var(--my, 30%) - 8%), var(--grad-3) 0%, transparent 50%);
  filter: blur(76px) saturate(135%);
  opacity: .5;
  transition: opacity 1.2s var(--ease);
  will-change: transform;
}
.hero-grid-lines {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 44%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 44%, #000 25%, transparent 78%);
  opacity: .85;
}

.hero-in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-m); font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 1.9rem;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(31, 168, 232, .55);
  animation: pulseDot 2.4s var(--ease-io) infinite;
}
@keyframes pulseDot {
  70%  { box-shadow: 0 0 0 9px rgba(31, 168, 232, 0); }
  100% { box-shadow: 0 0 0 0  rgba(31, 168, 232, 0); }
}

.hero-title {
  font-size: clamp(2.9rem, 9.4vw, 8.4rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
  max-width: 15ch;
  margin: 0 0 1.9rem;
}
.hero-title em {
  font-style: normal; font-weight: 400;
  background: linear-gradient(100deg, var(--grad-3) 0%, var(--accent-2) 72%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Caracteres divididos por JS para la entrada del titular.
   Con line-height 0.95 la caja del inline-block queda más baja que el glifo.
   Eso no se nota en texto normal, pero el degradado de <em> se recorta contra
   esa caja y deja sin pintar la cola de la "g" o la "j". Se agranda la caja y
   se compensa con margen negativo del mismo valor: simétrico arriba y abajo,
   para no mover la línea base, y en TODOS los caracteres, para que las tres
   líneas del titular conserven el mismo interlineado. */
.hero-title .sc {
  display: inline-block;
  will-change: transform, opacity;
  padding-block: .26em;
  margin-block: -.26em;
}

/* El degradado del <em> se recorta sobre su propio texto, pero el split por
   caracteres convierte cada letra en un inline-block y esos no participan en
   el recorte del padre: la palabra desaparecería. Se le da el degradado a
   cada carácter en vertical, que se repite idéntico y se lee como uno solo. */
.hero-title em .sc {
  background-image: linear-gradient(180deg, var(--grad-3) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* La caja de pintado la agranda la regla de .hero-title .sc, más arriba. */
}

/* Reserva: sin soporte de background-clip:text, el relleno transparente
   dejaría invisible todo el texto en degradado. Se vuelve a color sólido. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title em, .hero-title em .sc, .cifra-n {
    background: none;
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
  }
}

.hero-sub {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  color: var(--ink-2); max-width: 56ch; font-weight: 300;
  margin-bottom: 2.4rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero-strip {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.strip-item {
  padding: 1.4rem 1.5rem 1.6rem 0;
  border-right: 1px solid var(--line);
}
.strip-item:last-child { border-right: none; }
.strip-item b {
  display: block; font-family: var(--font-d); font-weight: 500;
  font-size: 1.02rem; margin-bottom: .18rem;
}
.strip-item span {
  font-family: var(--font-m); font-size: .68rem;
  letter-spacing: .1em; color: var(--mute);
}

/* ---------- 7. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-b); font-size: .92rem; font-weight: 500;
  padding: .92rem 1.7rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  /* Obligatorio: sobre un <button> el navegador pone su propio fondo gris
     claro (buttonface). Sin esto, .btn-ghost queda casi blanco sobre casi
     blanco e ilegible. En los <a> no se notaba porque ahí es transparente. */
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.btn-solid {
  background: linear-gradient(96deg, var(--accent-2), var(--grad-3));
  color: #04121c; font-weight: 600;
  box-shadow: 0 8px 30px -12px rgba(31, 168, 232, .8);
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgba(31, 168, 232, .95); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(31, 168, 232, .12); color: var(--ink); transform: translateY(-2px); }

/* ---------- 8. Estructura de secciones ---------- */
section { position: relative; }

.manifiesto, .servicios, .cifras, .metodo, .cumpl, .contacto {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(5rem, 11vh, 9rem) var(--pad);
}

.sec-num {
  font-family: var(--font-m); font-size: .68rem;
  letter-spacing: .3em; color: var(--accent); opacity: .75;
  margin-bottom: 1.6rem;
}
.sec-head { margin-bottom: clamp(2.8rem, 6vh, 4.5rem); max-width: 940px; }
.sec-title {
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  letter-spacing: -0.035em; text-wrap: balance;
  margin-bottom: 1.3rem;
}
.sec-lead {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--mute); max-width: 58ch; font-weight: 300;
}
.sec-lead b { color: var(--ink-2); font-weight: 500; }

/* Reveal por scroll */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Defensa obligatoria: un elemento con .reveal y data-split nunca debe quedar invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* ---------- 9. Manifiesto ---------- */
.manifiesto { border-top: 1px solid var(--line); }
.manifiesto-p {
  font-family: var(--font-d); font-weight: 400;
  font-size: clamp(1.35rem, 2.65vw, 2.15rem);
  line-height: 1.34; letter-spacing: -0.022em;
  color: var(--ink-2); max-width: 26ch; max-width: 30ch;
  text-wrap: pretty;
}
.manifiesto-p b { color: var(--ink); font-weight: 500; }

/* ---------- 9.5 Tratamiento duotono de las fotografías ----------
   Las fotos van a blanco y negro y se recolorean con el azul de marca, para
   que no canten como banco de imágenes y convivan con la paleta. Al pasar
   el cursor recuperan parte del color original. */
.duo { position: relative; overflow: hidden; background: var(--surface); }
.duo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.86);
  transform: scale(1.02);
  transition: filter 1s var(--ease), transform 1.4s var(--ease);
}
.duo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(148deg, var(--accent-2) 0%, var(--navy) 52%, #061019 100%);
  mix-blend-mode: color;
  opacity: .92;
  transition: opacity 1s var(--ease);
}
.duo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(6, 16, 26, .72) 0%, rgba(6, 16, 26, .12) 55%, rgba(6, 16, 26, .3) 100%);
}
.duo:hover img { filter: grayscale(.2) contrast(1.05) brightness(1); transform: scale(1.06); }
.duo:hover::after { opacity: .5; }

/* Sin mix-blend-mode el ::after taparía la foto: se cambia por un velo. */
@supports not (mix-blend-mode: color) {
  .duo::after { mix-blend-mode: normal; opacity: .42; }
  .duo:hover::after { opacity: .25; }
}

/* ---------- 9.6 Banda: esquema de topología ---------- */
.banda {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(4rem, 9vh, 7rem) var(--pad);
  border-top: 1px solid var(--line);
  display: grid; gap: clamp(2.2rem, 5vw, 4rem);
  grid-template-columns: .68fr 1.32fr;   /* el esquema necesita ancho para leerse */
  align-items: center;
}
.banda-h {
  font-size: clamp(1.85rem, 4.2vw, 3.4rem);
  letter-spacing: -0.035em; text-wrap: balance;
  margin-bottom: .9rem;
}
.banda-p { color: var(--mute); max-width: 42ch; font-weight: 300; }

.topo { margin: 0; }
.topo-svg {
  width: 100%; height: auto;
  overflow: visible;
  font-family: var(--font-m);
}
.topo figcaption {
  margin-top: 1.1rem;
  font-family: var(--font-m); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
  text-align: right;
}

/* perímetro de cada sede: lo que hace legible que son DOS emplazamientos */
.topo-site rect {
  fill: rgba(31, 168, 232, .035);
  stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 5 5;
}
.topo-site text {
  fill: var(--mute); font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-anchor: middle;
}

/* enlaces del esquema */
.topo-link path {
  fill: none; stroke: #34506a; stroke-width: 1.4;
}

/* etiqueta del túnel */
.topo-tag {
  fill: var(--accent); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-anchor: middle;
}

/* líneas de vigilancia: punteadas y tenues, no son tráfico */
.topo-watch path {
  fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 3 5;
}
/* túnel VPN: discontinuo, para leerse como lógico y no físico */
.topo-vpn {
  fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-dasharray: 7 6; opacity: .85;
}
/* pulso de tráfico recorriendo la cadena sede → VPN → firewall → IDS */
.topo-flow {
  fill: none; stroke: url(#tg); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 26 250; stroke-dashoffset: 0;
  animation: topoFlow 4.5s linear infinite;
}
@keyframes topoFlow { to { stroke-dashoffset: -276; } }

.topo-node rect {
  fill: var(--surface); stroke: var(--line-2); stroke-width: 1;
}
/* El viewBox mide 900 y se pinta a ~730: todo encoge un 20 %. Los cuerpos
   van sobredimensionados a propósito para que el texto real no baje de 10 px. */
.topo-node text {
  fill: var(--ink-2); font-size: 13.5px; font-weight: 500;
  text-anchor: middle; letter-spacing: .04em;
}
.topo-node text.sm { fill: var(--mute); font-size: 10.5px; letter-spacing: .08em; }
.topo-node.is-key rect { stroke: var(--accent); fill: rgba(31, 168, 232, .1); }
.topo-node.is-key text { fill: var(--ink); }
.topo-node.is-watch rect { stroke: var(--line-2); stroke-dasharray: 4 4; }

/* ---------- 9.7 Galería ---------- */
.galeria {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(5rem, 11vh, 9rem) var(--pad);
  border-top: 1px solid var(--line);
}
.gal-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  grid-template-rows: auto auto;
  gap: 1.1rem;
}
.gal-item { margin: 0; position: relative; border-radius: 16px; }
.gal-tall { grid-row: span 2; min-height: 420px; }
.gal-grid > .gal-item:not(.gal-tall):not(.gal-panel) { aspect-ratio: 16 / 8.4; }
.gal-item figcaption {
  position: absolute; z-index: 3; left: 0; bottom: 0;
  padding: 1.15rem 1.3rem;
  display: grid; gap: .15rem;
}
/* En el panel dibujado el pie va en flujo: no hay foto sobre la que tumbarlo. */
.gal-panel figcaption {
  position: static;
  padding: .9rem 1.15rem 1.15rem;
  border-top: 1px solid var(--line);
}
.gal-item figcaption b {
  font-family: var(--font-d); font-size: 1.02rem; font-weight: 500; color: var(--ink);
}
.gal-item figcaption span {
  font-family: var(--font-m); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
/* Panel de monitorización (dibujado, no fotografiado) */
.gal-panel {
  background: var(--surface); border: 1px solid var(--line-2);
  overflow: hidden; aspect-ratio: auto;
}
.mon { padding: 1rem 1.15rem 1.2rem; display: grid; gap: .9rem; }
.mon-bar {
  display: flex; align-items: center; gap: .6rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line);
}
.mon-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .5);
  animation: monPulse 2.4s var(--ease-io) infinite;
}
@keyframes monPulse {
  70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.mon-title {
  font-family: var(--font-m); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.mon-live {
  margin-left: auto; font-family: var(--font-m); font-size: .56rem;
  letter-spacing: .2em; color: var(--accent);
  border: 1px solid var(--line-2); border-radius: 4px; padding: .16rem .4rem;
}
.mon-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.mon-kpis b {
  display: block; font-family: var(--font-d); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1;
  color: var(--ink); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.mon-kpis i { font-style: normal; font-size: .58em; color: var(--accent); margin-left: .1em; }
.mon-kpis span {
  display: block; margin-top: .3rem;
  font-family: var(--font-m); font-size: .56rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--mute);
}
.mon-chart { width: 100%; height: 74px; }
.mon-line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.mon-log { display: grid; gap: .38rem; }
.mon-log li {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-m); font-size: .62rem;
  color: var(--mute); letter-spacing: .02em;
}
.mon-log i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.mon-log i.ok { background: #4ade80; }
.mon-log i.warn { background: #f5b544; }

.gal-note {
  align-self: end;
  padding: 1.6rem 0 .4rem;
}
.gal-note h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: -0.03em; margin-bottom: .95rem;
}
.gal-note p { color: var(--mute); font-size: .965rem; font-weight: 300; max-width: 46ch; }
.gal-cta {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.4rem;
  font-family: var(--font-m); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  transition: gap .3s var(--ease);
}
.gal-cta:hover { gap: .9rem; }

/* ---------- 10. Servicios ---------- */
.servicios { border-top: 1px solid var(--line); }
/* Sistema de 6 columnas: tres tarjetas arriba (2 cada una) y dos abajo
   (3 cada una). Con cinco áreas evita el hueco de la rejilla 3x2. */
.svc-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
}
.svc { grid-column: span 2; }
.svc:nth-child(4), .svc:nth-child(5) { grid-column: span 3; }
.svc {
  position: relative; background: var(--bg);
  padding: clamp(1.75rem, 3.2vw, 2.9rem);
  display: flex; flex-direction: column;
  transition: background .45s var(--ease);
}
.svc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--cx, 50%) var(--cy, 0%), rgba(31, 168, 232, .11), transparent 62%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.svc:hover { background: var(--surface); }
.svc:hover::before { opacity: 1; }
.svc.is-open { background: var(--surface); }

.svc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.6rem; }
.svc-ico {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 14px;
  border: 1px solid var(--line-2); color: var(--accent);
  background: rgba(31, 168, 232, .06);
  transition: border-color .4s var(--ease), transform .5s var(--ease), background .4s var(--ease);
}
.svc-ico svg { width: 27px; height: 27px; }
.svc:hover .svc-ico { border-color: var(--accent); transform: translateY(-3px); background: rgba(31, 168, 232, .13); }
.svc-idx {
  font-family: var(--font-m); font-size: .68rem;
  letter-spacing: .18em; color: var(--mute); opacity: .6;
}
.svc-h {
  font-size: clamp(1.28rem, 2vw, 1.72rem);
  line-height: 1.14; margin-bottom: .95rem;
}
.svc-p { color: var(--mute); font-size: .965rem; font-weight: 300; max-width: 44ch; }

.svc-more {
  margin-top: 1.7rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .6rem;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-m); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  transition: gap .3s var(--ease);
}
.svc-more:hover { gap: .9rem; }
.svc-more-ico {
  position: relative; width: 15px; height: 15px;
  border: 1px solid currentColor; border-radius: 50%;
}
.svc-more-ico::before, .svc-more-ico::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor;
}
.svc-more-ico::before { width: 7px; height: 1px; }
.svc-more-ico::after  { width: 1px; height: 7px; transition: transform .35s var(--ease); }
.svc-more[aria-expanded="true"] .svc-more-ico::after { transform: scaleY(0); }

.svc-detail { overflow: hidden; }
.svc-detail[hidden] { display: none; }
.svc-detail ul { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.svc-detail li {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .62rem 0; border-bottom: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-2); font-weight: 300;
}
.svc-detail li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: .1rem;
  border-radius: 50%; background: var(--accent);
}

/* ---------- 11. Cifras ---------- */
.cifras { border-top: 1px solid var(--line); }
.cifras-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.cifra { border-top: 1px solid var(--line-2); padding-top: 1.4rem; }
.cifra-n {
  display: block; font-family: var(--font-d); font-weight: 500;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(120deg, var(--ink) 12%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: .7rem;
  font-variant-numeric: tabular-nums;
}
.cifra-l { font-size: .875rem; color: var(--mute); font-weight: 300; display: block; max-width: 24ch; }

/* ---------- 12. Método ---------- */
.metodo { border-top: 1px solid var(--line); }
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.paso {
  background: var(--bg); padding: 2rem 1.6rem 2.2rem 0;
  position: relative;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.paso:not(:last-child) { padding-right: 2rem; }
.paso-n {
  font-family: var(--font-m); font-size: .68rem; letter-spacing: .2em;
  color: var(--accent); display: block; margin-bottom: 1.5rem;
}
.paso h3 { font-size: 1.3rem; margin-bottom: .7rem; font-weight: 500; }
.paso p { color: var(--mute); font-size: .92rem; font-weight: 300; }

/* ---------- 13. Cumplimiento ---------- */
.cumpl {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cumpl::after {
  content: ""; position: absolute; inset: -30% -8% -20% 40%;
  background: radial-gradient(46% 40% at 60% 50%, rgba(11, 127, 199, .3), transparent 72%);
  filter: blur(110px); pointer-events: none; z-index: -1;
}
.cumpl-in {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start;
}
.cumpl-txt .btn { margin-top: 2rem; }
.cumpl-list { border-top: 1px solid var(--line-2); }
.cumpl-list li {
  padding: 1.35rem 0; border-bottom: 1px solid var(--line);
  display: grid; gap: .35rem;
  transition: opacity .85s var(--ease), transform .85s var(--ease), padding-left .4s var(--ease);
}
.cumpl-list li:hover { padding-left: .7rem; }
.cumpl-list b { font-family: var(--font-d); font-size: 1.06rem; font-weight: 500; }
.cumpl-list span { color: var(--mute); font-size: .9rem; font-weight: 300; }

/* ---------- 14. Contacto ---------- */
.contacto-h {
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  letter-spacing: -0.04em; text-wrap: balance; margin-bottom: 1.3rem;
}
.contacto-p { color: var(--mute); max-width: 48ch; font-weight: 300; margin-bottom: 2.8rem; }

.mail-link {
  display: inline-block; position: relative;
  font-family: var(--font-d); font-weight: 500;
  font-size: clamp(1.35rem, 3.9vw, 3rem);
  letter-spacing: -0.035em; color: var(--ink);
  margin-bottom: 3.6rem; padding-bottom: .18em;
  transition: color .35s var(--ease);
  word-break: break-word;
}
.mail-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--grad-3));
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease);
}
.mail-link:hover { color: var(--accent); }
.mail-link:hover::after { transform: scaleX(1); transform-origin: left; }

.form {
  display: grid; gap: 1.1rem;
  border-top: 1px solid var(--line); padding-top: 2.6rem;
  max-width: 780px;
}
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.f-row-3 { grid-template-columns: 1.15fr .95fr 1.1fr; }
.f-field { display: grid; gap: .5rem; }
.f-field > span {
  font-family: var(--font-m); font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}
.f-field input, .f-field select, .f-field textarea {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: .82rem 1rem;
  font-size: .95rem; font-weight: 300; color: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease);
  width: 100%;
}
.f-field textarea { resize: vertical; min-height: 118px; font-family: var(--font-b); }
.f-field input::placeholder, .f-field textarea::placeholder { color: rgba(134, 161, 184, .55); }
.f-field input:hover, .f-field select:hover, .f-field textarea:hover { border-color: var(--line-2); }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface-2);
}
.f-field input:invalid:not(:placeholder-shown) { border-color: #d4646e; }
.f-field select { appearance: none; cursor: pointer; }

/* Trampa antispam: oculta sin display:none (algunos bots detectan
   display:none y se saltan el campo) y sin desplazamientos enormes tipo
   left:-9999px, que agrandan el área de pintado de la página. */
.f-trap {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.f-foot { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: .5rem; }
.f-note {
  font-size: .82rem; color: var(--mute); font-weight: 300;
  transition: color .3s var(--ease);
}
.f-note.is-ok  { color: var(--accent); }
.f-note.is-err { color: #e0808a; }

.form button[type="submit"]:disabled { opacity: .6; cursor: progress; transform: none; }

.contacto-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  margin-top: 4rem; padding-top: 2.2rem; border-top: 1px solid var(--line);
}
.contacto-meta div { display: grid; gap: .35rem; }
.contacto-meta b {
  font-family: var(--font-m); font-size: .64rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mute);
}
.contacto-meta a, .contacto-meta span { font-size: 1rem; color: var(--ink-2); }
.contacto-meta a { transition: color .25s var(--ease); }
.contacto-meta a:hover { color: var(--accent); }

/* ---------- 14.5 Páginas legales ---------- */
.legal {
  max-width: 820px; margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(3rem, 8vh, 6rem)) var(--pad) clamp(4rem, 9vh, 7rem);
}
.legal-head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.legal h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  letter-spacing: -0.035em; text-wrap: balance; margin-bottom: 1rem;
}
.legal-fecha {
  font-family: var(--font-m); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mute);
}
.legal h2 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin: 2.8rem 0 .9rem; color: var(--ink);
}
.legal h3 { font-size: 1.02rem; font-weight: 500; margin: 1.6rem 0 .5rem; }
.legal p, .legal li { color: var(--ink-2); font-weight: 300; font-size: .97rem; }
.legal p { margin-bottom: .9rem; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal ul { margin: .6rem 0 1.2rem; display: grid; gap: .5rem; }
.legal ul li { display: flex; gap: .7rem; align-items: baseline; }
.legal ul li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: .1rem;
  border-radius: 50%; background: var(--accent);
}
.legal-datos {
  border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--surface); padding: 1.4rem 1.6rem;
  display: grid; gap: .6rem; margin: 1.4rem 0 1rem;
}
.legal-datos div { display: grid; grid-template-columns: 190px 1fr; gap: .5rem 1rem; }
.legal-datos dt, .legal-datos b {
  font-family: var(--font-m); font-size: .64rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
  align-self: center;
}
.legal-datos span { color: var(--ink); font-size: .95rem; }
@media (max-width: 620px) {
  .legal-datos div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Marcador en ámbar para datos pendientes de rellenar antes de publicar.
   Ahora mismo no lo usa ninguna página: se deja como utilidad por si hay
   que volver a señalar un hueco en las legales. */
.legal-todo {
  display: inline-block;
  background: rgba(245, 181, 68, .16);
  border: 1px dashed #f5b544; border-radius: 5px;
  padding: .05rem .45rem; color: #f5b544;
  font-family: var(--font-m); font-size: .82em;
}

.legal-volver {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 3rem; font-family: var(--font-m); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  text-decoration: none; transition: gap .3s var(--ease);
}
.legal-volver:hover { gap: .95rem; }

/* ---------- 14.8 Banner de consentimiento ---------- */
.ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .8);
  transform: translateY(110%);
  transition: transform .55s var(--ease);
}
.ck[hidden] { display: none; }
.ck.is-in { transform: translateY(0); }
@supports (backdrop-filter: blur(14px)) {
  .ck { background: rgba(10, 24, 38, .93); backdrop-filter: blur(16px) saturate(150%); }
}
.ck-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 1.4rem var(--pad);
  display: flex; align-items: center; gap: clamp(1.2rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.ck-txt { flex: 1 1 min(460px, 100%); }
.ck-h {
  font-family: var(--font-m); font-size: .64rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .5rem;
}
.ck-p { font-size: .9rem; font-weight: 300; color: var(--ink-2); max-width: 62ch; }
.ck-p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* Mismo tamaño para ambos botones: rechazar no puede costar más que aceptar */
.ck-btns { display: flex; gap: .7rem; flex: 0 0 auto; }
.ck-btns .btn { padding: .8rem 1.6rem; font-size: .88rem; min-width: 132px; }

@media (max-width: 620px) {
  .ck-in { padding: 1.2rem var(--pad) 1.4rem; }
  .ck-btns { width: 100%; }
  .ck-btns .btn { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ck { transition: none; }
}

/* ---------- 15. Footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--bg-2); }
.foot-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 3.4rem var(--pad);
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 2rem; align-items: center;
}
.foot-brand { display: grid; }
.foot-brand .logo { --logo-size: .88rem; }
.foot-nav { display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; }
.foot-nav a { font-size: .875rem; color: var(--mute); transition: color .25s var(--ease); }
.foot-nav a:hover { color: var(--ink); }
.foot-legal { font-size: .8rem; color: var(--mute); text-align: right; display: grid; gap: .3rem; }
.foot-legal p { margin: 0; }
.foot-credits { font-size: .72rem; opacity: .8; }
.foot-credits a { text-decoration: underline; text-underline-offset: 2px; transition: color .25s var(--ease); }
.foot-credits a:hover { color: var(--accent); }

/* ---------- 16. Responsive ---------- */
@media (max-width: 1080px) {
  /* Dos por fila: las cinco tarjetas pasan a 2+2+1 a ancho completo. */
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc, .svc:nth-child(4), .svc:nth-child(5) { grid-column: span 1; }
  .svc:nth-child(5) { grid-column: span 2; }
  .banda { grid-template-columns: 1fr; }
  .topo figcaption { text-align: left; }
  /* Estrujar el esquema a 335 px dejaría el texto en 4 px: mejor que se
     desplace en horizontal dentro de su caja, sin arrastrar a la página. */
  .topo { overflow-x: auto; padding-bottom: .5rem; }
  .topo-svg { min-width: 720px; }
  .cumpl-in { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .paso { padding-right: 1.6rem; }
  .cifras-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}

@media (max-width: 1080px) {
  .gal-grid { grid-template-columns: 1fr 1fr; }
  .gal-tall { grid-row: span 1; min-height: 340px; }
  .gal-note { grid-column: 1 / -1; padding-top: .6rem; }
}

@media (max-width: 860px) {
  /* Tres columnas se quedan estrechas: el área baja a su propia línea. */
  .f-row-3 { grid-template-columns: 1fr 1fr; }
  .f-row-3 > .f-field:last-child { grid-column: 1 / -1; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  .strip-item { border-bottom: 1px solid var(--line); padding-right: 1rem; }
  .strip-item:nth-child(2n) { border-right: none; }
  .strip-item:nth-last-child(-n+2) { border-bottom: none; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc, .svc:nth-child(4), .svc:nth-child(5) { grid-column: span 1; }
  .foot-in { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .foot-legal { text-align: center; }
  .foot-brand { justify-items: center; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { justify-content: center; padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero-title { max-width: 12ch; }
  .hero-cta .btn { flex: 1 1 100%; }
  .pasos { grid-template-columns: 1fr; gap: 1px; }
  .paso { padding: 1.7rem 0 1.9rem; }
  .cifras-grid { grid-template-columns: 1fr; }
  .f-row, .f-row-3 { grid-template-columns: 1fr; }
  .contacto-meta { grid-template-columns: 1fr; }
  .foot-nav { gap: 1.1rem; }
  .gal-grid { grid-template-columns: 1fr; }
  .gal-tall { min-height: 380px; }
  .banda { min-height: 300px; }
}

/* ---------- 17. Reducción de movimiento ----------
   Solo se desactiva lo intrusivo. Los hovers, reveals y transiciones
   funcionales siguen activos: Windows envía "reduce" por defecto en
   muchas instalaciones y sin esta distinción la web se ve muerta.      */
@media (prefers-reduced-motion: reduce) {
  .hero-gradient { animation: none; }
  .eyebrow .dot  { animation: none; }
  /* Bucles infinitos: se congelan, pero el dibujo sigue leyéndose igual. */
  .topo-flow { animation: none; stroke-dasharray: none; opacity: .55; }
  .mon-dot   { animation: none; }
  .splash-bar i  { animation: none; width: 100%; }
}

/* ---------- 18. Impresión ---------- */
@media print {
  .splash, .nav, .menu-movil, .hero-gradient, .hero-grid-lines { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}