/* Salvador Sancho · hoja de estilo única.
   🔁 10/10, segunda vuelta. Él: «no quiero un diseño de IA, quiero más sobrio y elegante» y «no intentar vender
   tanto, más hechos que promesas». 🔑 Por eso: blanco y negro, UNA tipografía (Hanken, fina en los titulares),
   líneas finas en lugar de tarjetas, sin degradados, sin sombras, sin píldoras, sin brillos. El color solo dice
   si algo funciona (verde) o no (rojo), y solo dentro de las pruebas.
   🔁 Tercera vuelta («está bien pero es demasiado soso»): carácter sin volver al look de IA. Una serif de
   titulares (Instrument Serif) con la palabra clave en azul (la cursiva, NO: «no me gusta esta letra cursiva»), UN azul plano (el de Klein) con cuentagotas,
   capturas reales de los trabajos y movimiento discreto al cargar y al pasar el ratón.
   🔁 Quinta vuelta: la web habla como un EQUIPO («no pongas yo»); capturas de la página ENTERA (WebP) con línea de
   progreso y ritmo legible; animaciones afinadas «sin pasarse»: la palabra azul se tiñe al cargar, el contador
   salta, los hechos entran escalonados, el menú marca la sección, la ventana se levanta al pasar el ratón.
   🔁 Sexta vuelta («como una página dentro de una página», «solo la portada, que no se pueda clicar nada»): la
   ventana es un marco con desplazamiento PROPIO; baja sola si nadie la toca y se recorre a mano; en el móvil,
   la captura móvil de cada web en una ventana con forma de teléfono.
   🔁 Séptima vuelta: en el MÓVIL la ventana no atrapa el dedo (se baja la web de fuera; la de dentro sigue sola) y al
   tocarla se abre a pantalla completa (visor, «Cerrar» y el botón atrás); capturas móviles a doble resolución por
   trozos; apartado de electricidad con su cuadro interactivo; cabeceras de sección centradas en el móvil.
   🔁 Octava vuelta: arriba se ELIGE «Informática / Electricidad» (la electricidad sube y no queda secundaria);
   categoría básica: fuera los cargadores de coche; dentro las copias de los autómatas (PLC).
   🔁 Novena vuelta: los dos modos se EXCLUYEN («con Electricidad, solo electricidad»): data-solo + la clase
   «modo-electricidad»; una franja invita al otro modo; la electricidad, centrada en boletines, revisiones y averías.
   🔁 Cuarta vuelta («la ventana de utprpro se ve cortada, hay poca info, falta un efecto disruptivo con gancho»):
   portada de titular grande; debajo, LA HISTORIA: al bajar, la red pasa del caos al orden (sección pegada que se
   mueve con el scroll); trabajos en grande con la página entera recorriéndose sola en su ventana; «Sobre mí».
   🔴 La CSP del servidor no deja estilos en línea en el HTML: lo que cambia en vivo lo pone site.js por CSSOM. */

@font-face { font-family: "Instrument"; src: url("fonts/instrument.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken"; src: url("fonts/hanken.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --fondo: #FFFFFF;
  --fondo-2: #F7F7F5;
  --linea: #E6E6E3;
  --linea-2: #CFCFCB;
  --tinta: #111111;
  --tinta-2: #5C5C5C;
  --tinta-3: #8E8E8E;
  --ok: #1F7A4D;
  --mal: #B42318;
  --aviso: #9A6200;
  --acento: #002FA7;        /* azul Klein: titulares en cursiva, cifras, números, el nodo «SS» */
  --calido: #F6F5F1;        /* el fondo de una fila al pasar el ratón */
  --serif: "Instrument", "Iowan Old Style", Georgia, serif;
  --f: "Hanken", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ancho: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
/* Ir a una sección lo anima site.js (irA): el suave del navegador atravesaba la historia de golpe. */
[tabindex="-1"]:focus { outline: none; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
::selection { background: #DCE3F5; }
.saltar { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; background: var(--tinta); color: #fff; }
.saltar:focus { top: 12px; }

.eti { color: var(--tinta-3); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
h1 { font-family: var(--serif); font-size: clamp(44px, 5.6vw, 80px); font-weight: 400; line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
h2 { margin-top: 12px; font-family: var(--serif); font-size: clamp(38px, 4.6vw, 62px); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--acento); }
.portada h1 em { animation: tinta 1.1s .7s both; }
@keyframes tinta { from { color: var(--tinta); } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 1px solid var(--tinta); border-radius: 2px; background: var(--tinta); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .01em; text-decoration: none; transition: background-color .2s, color .2s; }
.btn:hover { background: var(--acento); border-color: var(--acento); }
.btn-linea { background: transparent; color: var(--tinta); min-height: 42px; padding: 0 18px; }
.btn-linea:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn[disabled] { opacity: .5; cursor: default; }
.enlace { padding: 0; border: 0; background: none; color: var(--tinta); font-size: 15px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-underline-offset .2s; }
.enlace:hover { color: var(--acento); text-underline-offset: 3px; }

/* ── Cabecera ── */
.cab { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 18px max(20px, calc((100% - var(--ancho)) / 2)); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.cab.bajado { border-bottom-color: var(--linea); }
.logo { margin-right: auto; font-family: var(--serif); font-size: 23px; line-height: 1; text-decoration: none; }
.nav { display: flex; gap: 28px; }
.nav a { position: relative; color: var(--tinta-2); font-size: 14px; text-decoration: none; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s ease; }
.nav a:hover, .nav a.actual { color: var(--tinta); }
.nav a:hover::after, .nav a.actual::after { transform: scaleX(1); transform-origin: left; }
/* El cambio de servicio va primero y separado por una raya: es «la otra web», no una sección de esta. */
.nav-cruce::before { content: ""; position: absolute; top: 50%; right: -15px; width: 1px; height: 14px; margin-top: -7px; background: var(--linea-2); }

/* ── Portada ── */
.portada { max-width: var(--ancho); margin: 0 auto; padding: 88px 20px 56px; }
.portada h1 { max-width: 13ch; margin-top: 22px; font-size: clamp(52px, 8.4vw, 128px); line-height: .96; }
.portada-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-top: 44px; }
.portada .entradilla { margin: 0; }
.portada .acciones { margin: 0; }
.bajar { display: flex; align-items: center; gap: 12px; margin-top: 72px; color: var(--tinta-3); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.bajar::after { content: ""; width: 1px; height: 34px; background: var(--tinta-3); transform-origin: top; animation: baja 2.2s ease-in-out infinite; }
@keyframes baja { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.entradilla { max-width: 36ch; margin-top: 24px; color: var(--tinta-2); font-size: 18px; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 36px; }
/* Al cargar, la portada entra por partes. */
.portada > * { animation: entra-portada 1s cubic-bezier(.2, .7, .2, 1) both; }
.portada > :nth-child(2) { animation-delay: .08s; }
.portada > :nth-child(3) { animation-delay: .2s; }
.portada > :nth-child(4) { animation-delay: .5s; }
@keyframes entra-portada { from { opacity: 0; transform: translateY(18px); } }

/* La historia: pegada a la pantalla mientras se baja; site.js mueve la red según lo bajado. */
.historia { position: relative; border-top: 1px solid var(--linea); }
.js .historia { height: 380vh; }
.historia-pegada { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; max-width: var(--ancho); margin: 0 auto; padding: 72px 20px; }
.js .historia-pegada { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: 76px; padding-bottom: 24px; }
.historia-txt { display: grid; gap: 26px; min-width: 0; }
.pasos-h { display: grid; gap: 28px; }
.js .pasos-h li { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .pasos-h li.activo { opacity: 1; transform: none; }
.pasos-h h2 { margin: 0 0 12px; font-size: clamp(34px, 3.8vw, 54px); }
.pasos-h p { max-width: 32ch; color: var(--tinta-2); font-size: 18px; }
.contador { display: flex; align-items: baseline; gap: 14px; padding-top: 18px; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 15px; }
.contador b { display: inline-block; min-width: 1ch; color: var(--mal); font-family: var(--serif); font-size: 68px; font-weight: 400; line-height: .9; font-variant-numeric: tabular-nums; transition: color .4s; }
.contador.limpio b { color: var(--ok); }
.contador b.salta { animation: salta .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes salta { from { opacity: 0; transform: translateY(.3em); } }
.barra-h { height: 1px; background: var(--linea); }
.barra-h i { display: block; height: 1px; background: var(--acento); transform-origin: 0 50%; transform: scaleX(0); }
.mapa { min-width: 0; }
.escaner { stroke: var(--acento); stroke-width: 2; }
.escaner-banda { fill: var(--acento); fill-opacity: .06; }  /* fill-opacity: la opacidad la pone site.js para ocultarla */
.diag { fill: none; stroke: var(--acento); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0; transition: opacity .3s; }
.nodo.visto .diag { opacity: 1; }
.nodo.averiado .disco { stroke: var(--mal); stroke-width: 1.5; }
.nodo.averiado .icono { stroke: var(--mal); }
.bocadillo { transition: opacity .35s; }
.bocadillo.oculto { opacity: 0; }
.nodo-ss, .enl-ss { transition: opacity .6s; }
.nodo-ss .cuerpo { transform: scale(.55); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.historia.vigilada .nodo-ss .cuerpo { transform: scale(1); }
.js .historia:not(.vigilada) .nodo-ss, .js .historia:not(.vigilada) .enl-ss { opacity: 0; }
.mapa-pie, .registro { transition: opacity .5s; }
.js .historia:not(.vigilada) .mapa-pie, .js .historia:not(.vigilada) .registro { opacity: 0; pointer-events: none; }
.js .historia:not(.vigilada) .nodo { cursor: default; }
#red { display: block; width: 100%; height: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.marco-red { fill: none; stroke: var(--linea-2); stroke-width: 1; stroke-dasharray: 3 5; }
.marco-eti { fill: var(--tinta-3); font: 500 10.5px var(--f); letter-spacing: .14em; }
.enl { fill: none; stroke: var(--linea-2); stroke-width: 1; transition: stroke .3s; }
.enl.enredado { stroke: #C9A9A4; }
.enl.aire { stroke-dasharray: 2 5; }
.enl.cifrado { stroke: var(--acento); stroke-dasharray: 2 4; }
.enl.cortado { stroke: var(--mal); stroke-dasharray: 3 4; }
.paq { fill: var(--tinta-3); }
.paq-cif { fill: var(--acento); }
.nodo { cursor: pointer; outline: none; }
.nodo-ss, .nodo-nube { cursor: default; }
.cuerpo, .boc-in { transform-box: fill-box; transform-origin: center; }
.nodo .toque { fill: transparent; }
.nodo .halo { fill: none; stroke: var(--ok); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.nodo .disco { fill: #fff; stroke: var(--tinta); stroke-width: 1; transition: stroke .3s; }
.nodo .icono { fill: none; stroke: var(--tinta); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.nodo .nombre { fill: var(--tinta-2); font: 500 11px var(--f); letter-spacing: .06em; text-transform: uppercase; }
.nodo[role="button"]:hover .disco, .nodo:focus-visible .disco { stroke-width: 2; }
.nodo-ss .disco { fill: var(--acento); stroke: var(--acento); }
.nodo-nube .disco { stroke: var(--linea-2); }
.ss-txt { fill: #fff; font: 600 13px var(--f); letter-spacing: .04em; }
.nodo.roto .disco { stroke: var(--mal); stroke-width: 1.5; }
.nodo.roto .icono { stroke: var(--mal); }
.nodo.roto .cuerpo { animation: agita .4s; }
.nodo.arreglando .disco { stroke: var(--aviso); stroke-dasharray: 6 5; transform-box: fill-box; transform-origin: center; animation: gira 1.2s linear infinite; }
.nodo.arreglado .disco { stroke: var(--ok); stroke-width: 1.5; }
.nodo.arreglado .icono { stroke: var(--ok); }
.nodo.arreglado .halo { animation: onda 1s ease-out; }
.bocadillo rect { fill: #fff; }
.bocadillo text { fill: var(--mal); font: 600 11.5px var(--f); letter-spacing: .04em; text-transform: uppercase; }
.boc-in { animation: aparece .3s ease-out; }
.tecnico { fill: var(--acento); }
.tecnico-halo { fill: none; stroke: var(--acento); stroke-width: 1; opacity: .35; }
@keyframes agita { 25%, 75% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes onda { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.9); } }
@keyframes aparece { from { opacity: 0; } }

.mapa-pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: 13px; }
.mapa-pie b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.registro { min-height: 84px; margin-top: 4px; font-size: 13px; }
.registro li { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); animation: aparece .3s ease-out; }
.registro .registro-vacio { display: block; color: var(--tinta-3); }
.r-id { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.r-f { color: var(--mal); }
.r-est { color: var(--tinta-2); text-align: right; }
.registro li.cerrado .r-f { color: var(--tinta-3); text-decoration: line-through; }
.registro li.cerrado .r-est { color: var(--ok); }

/* ── Secciones ── */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 88px 20px; border-top: 1px solid var(--linea); }
.seccion-cab { margin-bottom: 44px; }

/* Trabajos */
.casos { display: grid; gap: 104px; }
.caso { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }
.caso:nth-child(even) { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.caso:nth-child(even) .captura { order: 2; }
.caso-txt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hechos li { padding: 9px 0; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 15px; }
.hechos li:last-child { border-bottom: 1px solid var(--linea); }
/* Los hechos entran escalonados cuando su bloque se ve. */
.js .rev .hechos li { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.js .rev.visto .hechos li { opacity: 1; transform: none; }
.js .rev.visto .hechos li:nth-child(2) { transition-delay: .1s; }
.js .rev.visto .hechos li:nth-child(3) { transition-delay: .2s; }
.js .rev.visto .hechos li:nth-child(4) { transition-delay: .3s; }
.js .rev.visto .hechos li:nth-child(5) { transition-delay: .4s; }
.caso-cifra { color: var(--tinta-2); font-size: 14px; }
.caso-cifra b { display: block; margin-bottom: 4px; color: var(--acento); font-family: var(--serif); font-size: clamp(64px, 7vw, 104px); font-weight: 400; line-height: .95; letter-spacing: -.02em; }
.captura { display: block; overflow: hidden; border: 1px solid var(--linea-2); background: #fff; text-decoration: none; box-shadow: 0 30px 60px -40px rgba(17, 17, 17, .35); transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s; }
.caso:hover .captura { transform: translateY(-5px); box-shadow: 0 44px 70px -40px rgba(17, 17, 17, .45); }
.captura { position: relative; }
/* La ventana: un marco que se desplaza por dentro. Al llegar a un extremo, la rueda sigue con la página. */
.captura-ventana { display: block; overflow-x: hidden; overflow-y: auto; aspect-ratio: 4 / 3; cursor: grab; outline: none; scrollbar-width: thin; scrollbar-color: var(--linea-2) transparent; }
.captura-ventana:focus-visible { box-shadow: inset 0 0 0 2px var(--acento); }
.captura-ventana.arrastrando { cursor: grabbing; }
.captura picture { display: block; }
.captura-url { display: flex !important; align-items: center; gap: 10px; }
.captura-ampliar { margin-left: auto; padding: 0; border: 0; background: none; color: var(--tinta-2); font-size: 11.5px; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.captura-ampliar:hover { color: var(--acento); }
.captura-pista .p-dedo { display: none; }
.captura-pista { position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; background: rgba(17, 17, 17, .78); color: #fff; font-size: 12px; letter-spacing: .02em; pointer-events: none; transition: opacity .5s; }
.captura.tocada .captura-pista { opacity: 0; }
.captura-url { position: relative; display: block; padding: 7px 12px; border-bottom: 1px solid var(--linea); color: var(--tinta-3); font-size: 11.5px; letter-spacing: .04em; }
.captura-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--acento); transform-origin: 0 50%; transform: scaleX(0); }
/* La portada en movimiento (Peipra): un vídeo justo encima de la cabecera de la captura, que baja con ella. Hasta
   que arranca no se ve, y debajo queda la captura quieta. */
.captura-ventana, .visor-cuerpo { position: relative; }
.captura-mov { position: absolute; top: 0; left: 0; width: 100%; height: auto; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.captura-mov.en-marcha { opacity: 1; }
.captura img { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* El recorrido solo y la línea de progreso los mueve site.js (módulo «capturas»). */
/* 🔑 En pantallas táctiles la ventana NO atrapa el dedo: arrastrar baja la página de fuera; la de dentro la mueve
   site.js sola, y tocarla abre el visor a pantalla completa. */
@media (hover: none) and (pointer: coarse) {
  .captura-ventana { overflow: hidden; touch-action: pan-y; cursor: pointer; }
  .captura-pista .p-raton { display: none; }
  .captura-pista .p-dedo { display: inline; }
}
/* El visor: la portada entera, a pantalla completa, con su barra y «Cerrar». */
.visor { width: min(960px, 94vw); height: 92vh; max-width: none; max-height: none; padding: 0; border: 1px solid var(--linea-2); background: #fff; color: var(--tinta); box-shadow: 0 40px 80px -30px rgba(17, 17, 17, .5); }
.visor::backdrop { background: rgba(17, 17, 17, .55); }
.visor[open] { display: flex; flex-direction: column; animation: visor-entra .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes visor-entra { from { opacity: 0; transform: translateY(16px); } }
.visor-barra { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--linea); font-size: 13px; color: var(--tinta-2); }
.visor-cerrar { margin-left: auto; min-height: 36px; padding: 0 14px; border: 1px solid var(--tinta); background: var(--tinta); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.visor-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--acento); transform-origin: 0 50%; transform: scaleX(0); }
.visor-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.visor-cuerpo img { display: block; width: 100%; height: auto; }
html.visor-abierto { overflow: hidden; }
@media (max-width: 560px) { .visor { width: 100vw; height: 100dvh; max-height: none; margin: 0; border: 0; } }
.caso h3 { margin-top: 6px; font-size: 26px; font-weight: 500; letter-spacing: -.015em; }
.caso h3 a { text-decoration: none; transition: color .2s; }
.caso h3 a:hover { color: var(--acento); }
.caso p { color: var(--tinta-2); }
.caso-tec { font-size: 14px; color: var(--tinta-3) !important; }
.caso .enlace { align-self: flex-start; margin-top: 4px; }

/* Servicios: lista que se abre */
.servicios { border-bottom: 1px solid var(--linea); }
.srv { border-top: 1px solid var(--linea); }
.srv summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.5fr) 20px; align-items: baseline; gap: 24px; margin: 0 -16px; padding: 28px 16px; cursor: pointer; list-style: none; transition: background-color .3s; }
.srv summary:hover { background: var(--calido); }
.srv summary::-webkit-details-marker { display: none; }
.srv-num { color: var(--acento); font-family: var(--serif); font-size: 26px; line-height: 1; }
.srv-tit { font-size: 22px; font-weight: 400; letter-spacing: -.015em; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.srv-res { color: var(--tinta-2); font-size: 15px; }
.srv-mas { position: relative; align-self: center; width: 14px; height: 14px; }
.srv-mas::before, .srv-mas::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--tinta); transition: transform .3s; }
.srv-mas::after { transform: rotate(90deg); }
.srv[open] .srv-mas::after { transform: rotate(0deg); }
.srv summary:hover .srv-tit { transform: translateX(6px); }
.srv-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px 48px; padding: 0 0 40px 80px; animation: despliega .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes despliega { from { opacity: 0; transform: translateY(-8px); } }
.incluye li { padding: 9px 0; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 15px; }
.incluye li:last-child { border-bottom: 1px solid var(--linea); }
.prueba { min-width: 0; }
.prueba-eti { margin-bottom: 12px; color: var(--tinta-3); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }

/* Prueba: wifi */
.wifi { position: relative; overflow: hidden; border: 1px solid var(--linea); }
#plano { display: block; width: 100%; height: auto; aspect-ratio: 600 / 380; }
.ap { position: absolute; left: 11.3%; top: 18.4%; display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; padding: 0; border: 0; border-radius: 50%; background: var(--tinta); touch-action: none; cursor: grab; }
.ap svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.ap.arrastrando { cursor: grabbing; }
.ap-rep { background: var(--tinta-2); }
.wifi-pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin-top: 14px; }
.cobertura { color: var(--tinta-2); font-size: 14px; }
.cobertura b { margin-right: 6px; color: var(--aviso); font-size: 34px; font-weight: 200; letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color .4s; }
.cobertura.buena b { color: var(--ok); }
.cobertura.mala b { color: var(--mal); }

/* Prueba: el ransomware */
.copias { display: grid; gap: 14px; }
.srv-estado { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--ok); font-size: 13px; font-weight: 500; }
.srv-copia { color: var(--tinta-3); font-weight: 400; }
.copias.atacado .srv-estado { color: var(--mal); }
.archivos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
.archivo { display: flex; justify-content: space-between; gap: 8px; min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 14px; transition: color .3s; }
.archivo .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo .tipo { flex: none; color: var(--tinta-3); font-size: 11px; letter-spacing: .08em; }
.archivo.cifrado { color: var(--mal); }
.archivo.cifrado .nom { font-family: var(--f-mono); font-size: 12.5px; }
.archivo.cifrado .tipo { color: var(--mal); }
.archivo.restaurado { color: var(--ok); }
.barra-rest { height: 1px; background: var(--linea); }
.barra-rest i { display: block; height: 1px; background: var(--ok); transform-origin: 0 50%; transform: scaleX(0); }
.copias .btn { justify-self: start; }

/* Prueba: la contraseña */
.clave { display: grid; gap: 14px; }
#pw { width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--tinta); border-radius: 0; background: transparent; color: var(--tinta); font: 400 22px var(--f-mono); }
#pw:focus { outline: none; border-bottom-width: 2px; padding-bottom: 7px; }
#pw::placeholder { color: var(--tinta-3); }
.medidor { height: 2px; background: var(--linea); }
.medidor i { display: block; height: 2px; background: var(--mal); transform-origin: 0 50%; transform: scaleX(0); transition: transform .35s ease, background-color .35s; }
.medidor i.media { background: var(--aviso); }
.medidor i.fuerte { background: var(--ok); }
.tiempo { color: var(--tinta-2); font-size: 15px; }
.tiempo b { color: var(--tinta); font-weight: 600; }
.pestanas { display: flex; gap: 24px; border-bottom: 1px solid var(--linea); }
.pestanas button { margin-bottom: -1px; padding: 8px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--tinta-3); font-size: 14px; font-weight: 500; transition: color .2s, border-color .2s; }
.pestanas button[aria-pressed="true"] { border-bottom-color: var(--tinta); color: var(--tinta); }
.cuentas li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); font-size: 14px; }
.cuentas code { overflow: hidden; max-width: 62%; font: 400 13px var(--f-mono); text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.clave.repite .cuentas code { color: var(--mal); }
.clave.gestor .cuentas code { color: var(--ok); }
.cuentas-pie { font-size: 14px; }
.clave.repite .cuentas-pie { color: var(--mal); }
.clave.gestor .cuentas-pie { color: var(--ok); }

/* Instalaciones eléctricas: el esquema a la izquierda, el cuadro que se toca a la derecha */
.electrica { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
.unifilar { display: block; width: 100%; height: auto; }
.hilo { fill: none; stroke: var(--linea-2); stroke-width: 2; transition: stroke .4s; }
.hilo.vivo { stroke: var(--acento); stroke-dasharray: 7 7; animation: corriente 0.9s linear infinite; }
.hilo.cortado { stroke: var(--mal); stroke-dasharray: none; }
@keyframes corriente { to { stroke-dashoffset: -14; } }
.nodo-e circle { fill: #fff; stroke: var(--tinta); stroke-width: 1.2; transition: stroke .4s, fill .4s; }
.nodo-e .ic { fill: none; stroke: var(--tinta); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.nodo-e.red circle { fill: var(--acento); stroke: var(--acento); }
.nodo-e.red .ic { stroke: #fff; }
.nodo-e.circ.apagado circle { stroke: var(--linea-2); }
.nodo-e.circ.apagado .ic { stroke: var(--tinta-3); }
.nodo-e.circ.encendido circle { fill: #EEF1FA; stroke: var(--acento); }
.nodo-e.circ.encendido .ic { stroke: var(--acento); }
.nodo-e.circ.sin-luz circle { stroke: var(--mal); fill: #FDEDED; }
.nodo-e.circ.sin-luz .ic { stroke: var(--mal); }
.eti-e, .eti-c { fill: var(--tinta-2); font: 500 12px var(--f); letter-spacing: .04em; }
.eti-c { text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.cuadro rect:first-child { fill: #fff; stroke: var(--tinta); stroke-width: 1.2; }
.cuadro-t { fill: var(--tinta); font: 600 12px var(--f); letter-spacing: .14em; }
.iga { fill: var(--ok); stroke: none; transition: fill .3s; }
.iga-t { fill: #fff; font: 700 10px var(--f); }
.electrica.disparado .iga { fill: var(--mal); }
.electrica-panel { display: grid; gap: 16px; }
.interruptores { display: grid; gap: 8px; }
.interruptores button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea-2); border-radius: 2px; background: #fff; text-align: left; font-size: 15px; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.interruptores button b { font-weight: 500; }
.interruptores button span { color: var(--tinta-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.interruptores button::before { content: ""; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--linea-2); box-shadow: inset -14px 0 0 2px #fff; transition: background-color .25s, box-shadow .25s; order: -1; }
.interruptores button[aria-pressed="true"] { border-color: var(--acento); }
.interruptores button[aria-pressed="true"]::before { background: var(--acento); box-shadow: inset 14px 0 0 2px #fff; }
.interruptores button b { margin-right: auto; }
.potencia-txt { color: var(--tinta-2); font-size: 14px; }
.potencia-txt b { margin-right: 6px; color: var(--tinta); font-family: var(--serif); font-size: 40px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.potencia-barra { position: relative; height: 6px; margin-top: 10px; background: var(--linea); overflow: hidden; }
.potencia-barra i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--acento); transition: width .5s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.electrica.disparado .potencia-barra i { background: var(--mal); }
.resultado { padding: 14px 16px; border-left: 2px solid var(--acento); background: var(--calido); font-size: 15px; line-height: 1.5; }
.resultado b { font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--acento); }
.electrica.disparado .resultado { border-left-color: var(--mal); background: #FDEDED; color: var(--mal); }
.rearmar { justify-self: start; }
/* Arriba se elige Informática o Electricidad */
.modos { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--linea-2); border-radius: 999px; }
.modos button { padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--tinta-2); font-size: 14px; font-weight: 500; letter-spacing: .02em; cursor: pointer; transition: background-color .3s, color .3s; }
.modos button:hover { color: var(--tinta); }
.modos button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.portada h1, .portada .entradilla { transition: opacity .22s ease, transform .22s ease; }
.portada .cambiando { opacity: 0; transform: translateY(6px); }
.modo-electricidad .bajar { display: none; }
/* Dos webs en una: con JS, cada modo enseña solo lo suyo (sin JS se ve todo). */
.js:not(.modo-electricidad) [data-solo="electricidad"], .js.modo-electricidad [data-solo="informatica"] { display: none !important; }
.eti-lista { margin: 64px 0 18px; }
/* La franja que invita al otro modo */
.cruce { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.cruce-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 32px 36px; border: 1px solid var(--linea-2); background: var(--calido); }
.cruce-t { flex: 1 1 320px; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.cruce .eti { flex-basis: 100%; }

/* Sobre mí */
.sobre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
.sobre-txt > p { max-width: 40ch; margin-bottom: 28px; font-size: 21px; line-height: 1.5; }

/* Forma de trabajo */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.pasos li { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--tinta); color: var(--tinta-2); font-size: 15px; }
.pasos span { color: var(--acento); font-family: var(--serif); font-size: 48px; line-height: 1; }
.pasos b { color: var(--tinta); font-size: 19px; font-weight: 500; letter-spacing: -.01em; }

/* Contacto */
.contacto h2 { max-width: 18ch; }
.correo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; margin-top: 36px; }
.correo a { font-family: var(--serif); font-size: clamp(26px, 4.6vw, 56px); line-height: 1.15; letter-spacing: -.01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 10px; overflow-wrap: anywhere; transition: color .2s; }
.correo a:hover { color: var(--acento); }

.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: var(--ancho); margin: 0 auto; padding: 28px 20px 44px; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: 13px; }

/* Aviso legal, privacidad y cookies */
.legal { max-width: 760px; margin: 0 auto; padding: 72px 20px 96px; }
.legal h1 { margin-top: 18px; font-size: clamp(40px, 6vw, 72px); }
.legal .entradilla { max-width: none; margin-top: 20px; }
.legal-fecha { margin-top: 12px; color: var(--tinta-3); font-size: 13px; }
.legal section { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--linea); scroll-margin-top: 80px; }
.legal h2 { margin-top: 0; font-size: clamp(30px, 3.4vw, 42px); }
.legal h3 { margin: 32px 0 8px; font-size: 18px; font-weight: 600; }
.legal p, .legal li { color: var(--tinta-2); line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.legal a { text-underline-offset: 3px; }
.legal-datos { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 10px 24px; margin: 20px 0 0; padding: 20px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.legal-datos dt { padding-top: 3px; color: var(--tinta-3); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.legal-datos dd { margin: 0; color: var(--tinta); }
.pie a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 560px) { .legal { padding-top: 48px; } .legal-datos { grid-template-columns: 1fr; gap: 2px; } .legal-datos dd { margin-bottom: 12px; } }

/* 404 */
.error { display: grid; align-content: center; justify-items: start; gap: 22px; min-height: 100vh; max-width: 760px; margin: 0 auto; padding: 24px 20px; }

/* Aparecer al bajar: discreto, y solo con JS (sin JS todo se ve) */
.js .rev { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; }
.js .rev.visto { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .portada { padding: 56px 20px 40px; }
  .bajar { margin-top: 44px; }
  .historia-pegada { grid-template-columns: 1fr; gap: 14px; align-content: center; }
  .js .historia-pegada { padding-top: 68px; }
  .historia .mapa { order: -1; }
  .historia-txt { gap: 14px; }
  .pasos-h h2 { margin-bottom: 6px; font-size: clamp(28px, 7vw, 40px); }
  .pasos-h p { font-size: 16px; }
  .contador { padding-top: 10px; }
  .contador b { font-size: 46px; }
  .historia .registro { display: none; }
  .casos { gap: 72px; }
  .caso, .caso:nth-child(even), .sobre, .electrica { grid-template-columns: 1fr; gap: 28px; }
  .cruce-in { padding: 24px 20px; text-align: center; justify-content: center; }
  .caso:nth-child(even) .captura { order: 0; }
  .captura-ventana { aspect-ratio: 10 / 16; }
  .srv summary { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 6px 14px; padding: 22px 16px; }
  .srv-res { grid-column: 2 / 3; grid-row: 2; }
  .srv-mas { grid-column: 3; grid-row: 1; }
  .srv-cuerpo { grid-template-columns: 1fr; padding: 0 0 32px 50px; }
  .pasos { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .nav { gap: 18px; }
  .nav a:not(:last-child) { display: none; }
  /* Cabeceras de sección centradas en el móvil. */
  .seccion-cab, .sobre > div:first-child, .contacto .rev { text-align: center; }
  .seccion-cab .sub { margin-left: auto; margin-right: auto; }
  .contacto .correo { justify-content: center; }
  .seccion { padding: 64px 20px; }
  .srv-cuerpo { padding-left: 0; }
  .archivos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registro li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .registro .r-f { display: none; }
  /* El dibujo de la red se encoge a la mitad: la letra, en unidades del dibujo, se dobla para leerse. */
  .nodo .nombre { font-size: 16.5px; letter-spacing: .02em; }
  .bocadillo text { font-size: 16px; }
  .marco-eti { font-size: 17px; }
  .ss-txt { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .rev { transform: none; }
  .portada h1 em { animation: none !important; }
  .js .rev .hechos li { transform: none; }
}