/* ==========================================================
   3J Software · estilos
   Todo el color, la tipografía y los espacios viven en variables.
   ========================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fuentes/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fuentes/ibm-plex-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fuentes/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Azul marino casi negro (fondos) */
  --marino-950: #060A13;
  --marino-900: #0A1120;
  --marino-850: #0E172A;
  --marino-800: #131E35;
  --marino-700: #1C2944;
  --marino-600: #2A3A5C;

  /* Azul eléctrico (marca) */
  --azul: #1E6BEA;        /* azul del logo */
  --azul-hover: #2F7DF2;
  --azul-claro: #3FB0FF;  /* azul claro del logo */
  --azul-oscuro: #123F8C;
  --azul-tinte: rgba(30, 107, 234, 0.12);

  /* Grises fríos */
  --gris-50: #F3F6FA;
  --gris-100: #E8EDF4;
  --gris-150: #DEE4EC;
  --gris-200: #D3DAE5;
  --gris-300: #A9B4C5;
  --gris-400: #8792A6;
  --gris-500: #657088;
  --gris-600: #46506A;
  --gris-700: #2B3449;

  /* Estado */
  --error: #FF6B6B;
  --ok: #4ADE9B;
  --pendiente: #FFC46B;

  /* Papeles por defecto (secciones oscuras) */
  --fondo: var(--marino-950);
  --superficie: var(--marino-900);
  --superficie-2: var(--marino-850);
  --borde: var(--marino-700);
  --borde-ventana: var(--marino-600);
  --texto: var(--gris-100);
  --texto-suave: var(--gris-300);
  --texto-tenue: var(--gris-400);
  --rejilla: rgba(63, 176, 255, 0.05);

  /* Sombras duras y desplazadas, sin difuminar */
  --sombra-color: #1A2A4A;
  --sombra: 4px 4px 0 var(--sombra-color);
  --sombra-boton: 3px 3px 0 var(--azul-oscuro);

  /* Tipografía */
  --f-titulo: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: 1.125rem;
  --t-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-h3: 1.25rem;
  --t-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --t-h1: clamp(3rem, 1.5rem + 5vw, 5.5rem);

  /* Espacios y forma */
  --ancho: 1180px;
  --margen: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --seccion: clamp(4.5rem, 3rem + 6vw, 8rem);
  --radio: 4px;
  --radio-s: 3px;
  --cabecera: 68px;

  --transicion: 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

/* Secciones claras: se cambian los papeles, no los colores */
.claro {
  --fondo: var(--gris-50);
  --superficie: #FFFFFF;
  --superficie-2: var(--gris-100);
  --borde: var(--gris-200);
  --borde-ventana: var(--marino-900);
  --texto: var(--marino-900);
  --texto-suave: var(--gris-600);
  --texto-tenue: var(--gris-500);
  --rejilla: rgba(10, 17, 32, 0.05);
  --azul: #1E6BEA;
  --azul-claro: #1E6BEA;
  --sombra-color: var(--marino-900);
  --pendiente: #9A5B00;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 12px); }
body {
  margin: 0;
  background: var(--marino-950);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--azul); color: #fff; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 2px; }

.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--azul); color: #fff; padding: .6rem 1rem; border-radius: var(--radio-s);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 1rem; }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

/* Rejilla fina de fondo */
.con-rejilla {
  background-color: var(--fondo);
  background-image:
    linear-gradient(var(--rejilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}

/* ---------- Etiquetas: rutas de carpeta en mono ---------- */
.etiqueta {
  display: inline-block;
  font-family: var(--f-mono); font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  color: var(--azul-claro);
}
.claro .etiqueta { color: var(--azul); }
.mono { font-family: var(--f-mono); }

/* Cursor de bloque parpadeante */
.cursor {
  display: inline-block; width: .5em; height: 1.05em; margin-left: .14em;
  vertical-align: -0.16em; background: var(--azul);
  animation: parpadeo 1.06s steps(1, end) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }

/* ---------- Botones ---------- */
.boton {
  --b-fondo: var(--azul); --b-texto: #fff; --b-borde: var(--azul); --b-sombra: var(--sombra-boton);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 50px; padding: .8rem 1.4rem;
  font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-m); letter-spacing: -.005em;
  color: var(--b-texto); background: var(--b-fondo); border: 1px solid var(--b-borde);
  border-radius: var(--radio-s); text-decoration: none; cursor: pointer;
  box-shadow: var(--b-sombra);
  transition: background var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover { --b-fondo: var(--azul-hover); --b-borde: var(--azul-hover); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--azul-oscuro); }
.boton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--azul-oscuro); }
.boton svg { width: 18px; height: 18px; transition: transform var(--transicion); }
.boton:hover svg { transform: translateX(3px); }
.boton--secundario { --b-fondo: var(--marino-950); --b-texto: var(--texto); --b-borde: var(--gris-600); --b-sombra: 3px 3px 0 var(--sombra-color); }
.boton--secundario:hover { --b-fondo: var(--marino-900); --b-borde: var(--gris-400); box-shadow: 4px 4px 0 var(--sombra-color); }
.boton--secundario:active { box-shadow: 1px 1px 0 var(--sombra-color); }

/* ---------- Ventanas (barra de título con _ □ ×) ---------- */
.ventana {
  background: var(--superficie); border: 1px solid var(--borde-ventana); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden;
}
.ventana__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 34px; padding: 0 .4rem 0 .8rem;
  background: var(--marino-800); border-bottom: 1px solid var(--borde-ventana);
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--gris-300); letter-spacing: .02em;
  user-select: none;
}
.ventana__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ventana__botones { display: flex; gap: 3px; flex-shrink: 0; }
.ventana__botones i, .ventana__cerrar {
  position: relative; width: 20px; height: 18px; display: block; flex-shrink: 0;
  border: 1px solid var(--borde-ventana); border-radius: 2px; background: var(--superficie-2);
}
.ventana__botones i::before, .ventana__botones i::after,
.ventana__cerrar::before, .ventana__cerrar::after { content: ""; position: absolute; background: currentColor; }
/* _ */
.ventana__botones i:nth-child(1)::before { left: 5px; right: 5px; bottom: 4px; height: 2px; }
/* □ */
.ventana__botones i:nth-child(2)::before { left: 5px; right: 5px; top: 3px; bottom: 3px; background: transparent; border: 1px solid currentColor; border-top-width: 2px; }
/* × */
.ventana__botones i:nth-child(3)::before, .ventana__botones i:nth-child(3)::after,
.ventana__cerrar::before, .ventana__cerrar::after { left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; transform: rotate(45deg); }
.ventana__botones i:nth-child(3)::after, .ventana__cerrar::after { transform: rotate(-45deg); }
.ventana__cerrar { cursor: pointer; padding: 0; color: inherit; width: 24px; height: 22px; }
.ventana__cerrar:hover { background: var(--error); border-color: var(--error); color: #fff; }

/* Barra de título azul de las ventanas claras */
.claro .ventana__barra, .ventana--clara .ventana__barra {
  background: var(--azul); color: #fff; border-bottom-color: var(--marino-900); font-weight: 500;
}
.claro .ventana__botones i { background: var(--gris-100); border-color: var(--marino-900); color: var(--marino-900); }

/* Botones de sistema (asistente, propiedades) */
.boton-win {
  display: inline-flex; align-items: center; justify-content: center; min-width: 104px; min-height: 36px; padding: .35rem 1rem;
  font-family: var(--f-texto); font-size: var(--t-s); font-weight: 500; color: var(--texto); text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borde-ventana); border-radius: var(--radio-s);
  box-shadow: 2px 2px 0 var(--sombra-color);
}
.boton-win--inactivo { color: var(--texto-tenue); border-color: var(--gris-300); box-shadow: 2px 2px 0 var(--gris-300); cursor: default; }
.boton-win--principal { background: var(--azul); color: #fff; border-color: var(--marino-900); font-weight: 600; transition: transform var(--transicion), box-shadow var(--transicion); }
.boton-win--principal:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--sombra-color); }
.boton-win--principal:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--sombra-color); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--cabecera);
  transition: background var(--transicion), border-color var(--transicion);
  border-bottom: 1px solid transparent;
}
.cabecera.con-fondo, .cabecera.abierta {
  background: rgba(6, 10, 19, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--marino-700);
}
.cabecera .contenedor { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { height: 44px; width: auto; }
@media (max-width: 880px) { .logo img { height: 36px; } }
.nav ul { display: flex; align-items: center; gap: .25rem; }
.nav a {
  display: inline-block; padding: .5rem .8rem; border-radius: var(--radio-s);
  font-size: var(--t-s); font-weight: 500; color: var(--gris-300); text-decoration: none;
  transition: color var(--transicion), background var(--transicion);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--gris-50); background: rgba(63,176,255,.08); }
.nav .boton { min-height: 40px; padding: .5rem 1rem; margin-left: .5rem; color: #fff; font-size: var(--t-s); }
.nav .boton:hover { background: var(--azul-hover); }
.menu-boton {
  display: none; width: 44px; height: 44px; border: 1px solid var(--marino-600); border-radius: var(--radio-s);
  background: transparent; color: var(--gris-100); cursor: pointer; align-items: center; justify-content: center;
}
.menu-boton span, .menu-boton span::before, .menu-boton span::after {
  display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform var(--transicion), background var(--transicion);
}
.menu-boton span::before, .menu-boton span::after { content: ""; position: absolute; left: 0; }
.menu-boton span::before { top: -6px; }
.menu-boton span::after { top: 6px; }
.abierta .menu-boton span { background: transparent; }
.abierta .menu-boton span::before { transform: translateY(6px) rotate(45deg); }
.abierta .menu-boton span::after { transform: translateY(-6px) rotate(-45deg); }

/* En pantallas táctiles el campo usa 16 px para que iOS no haga zoom, y se reduce visualmente */
@media (pointer: coarse) {
  .terminal__entrada { font-size: 16px; transform: scale(.74); transform-origin: left center; margin-right: -35%; }
}
@media (max-width: 880px) {
  .menu-boton { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--cabecera) 0 auto; background: var(--marino-950);
    border-bottom: 1px solid var(--marino-700);
    padding: .75rem var(--margen) 1.5rem;
    display: none;
  }
  .abierta .nav { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { display: block; padding: .95rem .25rem; font-size: var(--t-l); border-radius: 0; border-bottom: 1px solid var(--marino-800); }
  .nav a:hover { background: transparent; }
  .nav .boton { display: flex; margin: 1rem 0 0; width: 100%; min-height: 52px; font-size: var(--t-m); border-bottom: 0; }
}

/* ---------- Portada ---------- */
.portada {
  position: relative; overflow: hidden;
  min-height: min(100svh, 920px);
  display: flex; align-items: center;
  padding: calc(var(--cabecera) + 3rem) 0 4.5rem;
  isolation: isolate;
}
.portada::after { /* la rejilla se desvanece hacia abajo */
  content: ""; position: absolute; inset: auto 0 0; height: 160px; z-index: -1;
  background: linear-gradient(transparent, var(--marino-950));
}
.portada__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.portada__texto { position: relative; z-index: 1; }
.portada h1 {
  font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.045em; line-height: .92; white-space: nowrap;
  margin: 1.2rem 0 1.5rem;
}
.portada h1 .j { color: var(--azul); }
.portada__lema {
  font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 500; line-height: 1.3;
  color: var(--gris-50); max-width: 30ch; letter-spacing: -0.01em;
}
.portada__apoyo { margin-top: 1rem; color: var(--texto-suave); max-width: 46ch; font-size: var(--t-l); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

.portada__visual { position: relative; padding-top: 17rem; }

/* Símbolo: tres hexágonos que giran despacio y un anillo que orbita al revés */
.simbolo {
  position: absolute; z-index: 0; top: -14%; right: -10%; width: 68%; aspect-ratio: 1;
  cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.simbolo.arrastrando { cursor: grabbing; }
.simbolo svg { width: 100%; height: 100%; overflow: visible; }
.simbolo__hexagonos { transform-origin: 0 0; transform: rotate(var(--giro, 0deg)); will-change: transform; }
/* Al pasar el ratón, los hexágonos se separan desde el centro */
.hex {
  --sep: 0px;
  transform: translate(calc(var(--dx) * var(--sep)), calc(var(--dy) * var(--sep)));
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), filter 200ms ease;
  cursor: pointer; outline: none;
}
.simbolo:hover .hex, .simbolo:focus-within .hex { --sep: 9px; }
.hex.activo { filter: brightness(1.28) saturate(1.1); }
.hex.activo .hex__forma { stroke: #fff; stroke-width: 4; }
.hex:focus-visible .hex__forma { stroke: #fff; stroke-width: 5; stroke-dasharray: 10 6; }
/* Anillo en dos mitades: la de atrás se dibuja antes que los hexágonos y la de delante, después */
.orbita { pointer-events: none; }
.orbita--atras { opacity: .5; }
.orbita__fondo { fill: none; stroke: var(--azul); stroke-opacity: .45; stroke-width: 1.5; }
.orbita__tramo { fill: none; stroke: var(--azul-claro); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 17 33; }
.orbita__tramo--fino { stroke: var(--azul); stroke-width: 3; stroke-dasharray: 7 43; }
.orbita__tramo--atras { stroke-dashoffset: calc(var(--o1, -4) * 1px); }
.orbita__tramo--delante { stroke-dashoffset: calc(var(--o2, 46) * 1px); }
.orbita__tramo--fino-atras { stroke-dashoffset: calc(var(--o3, -29) * 1px); }
.orbita__tramo--fino-delante { stroke-dashoffset: calc(var(--o4, 21) * 1px); }
.simbolo__etiqueta {
  position: absolute; left: 0; top: 0; z-index: 2; margin: 0; pointer-events: none; white-space: nowrap;
  padding: .4rem .7rem; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--gris-50);
  background: var(--marino-900); border: 1px solid var(--azul-claro); border-radius: var(--radio-s);
  box-shadow: 3px 3px 0 var(--azul-oscuro); transform: translate(-50%, -100%);
}
.simbolo__etiqueta small { display: block; color: var(--gris-400); font-size: .68rem; }


/* Terminal */
.terminal { position: relative; z-index: 1; max-width: 520px; background: #05080F; }
.sin-corte { white-space: nowrap; }
/* Indicador de carga: hexágono que gira en la barra de la terminal */
.terminal .ventana__titulo { display: inline-flex; align-items: center; gap: .55rem; }
.hexagono { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--azul-claro); stroke-width: 2.4; stroke-linejoin: round; animation: girar-hex 4s linear infinite; }
.hexagono path { stroke-dasharray: 40 8; }
.terminal.trabajando .hexagono { animation-duration: 1.4s; }
.terminal.en-pausa .hexagono { animation-play-state: paused; }
@keyframes girar-hex { to { transform: rotate(360deg); } }
.terminal .ventana__barra { background: var(--marino-800); }
.terminal__cuerpo {
  padding: 1.1rem 1.15rem 1.25rem; height: calc(7 * 1.75em + 2.35rem);
  font-family: var(--f-mono); font-size: .84rem; line-height: 1.75; color: var(--gris-200);
  overflow: hidden;
}
.terminal__cuerpo p { white-space: pre-wrap; word-break: break-word; }
.terminal { cursor: text; }
.terminal.interactiva .terminal__cuerpo { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--marino-600) transparent; }
.terminal.interactiva .terminal__auto { display: none; }
.terminal__linea { display: flex; align-items: baseline; gap: .6ch; margin: 0; }
.terminal:not(.interactiva) .terminal__linea { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.terminal__linea label { flex-shrink: 0; }
.terminal__entrada {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; outline: none;
  font: inherit; color: var(--gris-50); caret-color: var(--azul-claro); line-height: inherit;
}
.t-art { color: var(--azul-claro); line-height: 1.25; margin: .2rem 0 .4rem; }
.t-enlace {
  padding: 0; border: 0; background: none; font: inherit; color: var(--azul-claro); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
.t-enlace:hover { color: #fff; }
.t-error { color: #FF8A8A; }
.t-tenue { color: var(--gris-400); }
.terminal__chapas { position: relative; z-index: 1; display: none; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; max-width: 520px; }
.js .terminal__chapas { display: flex; }
.chapa {
  padding: .35rem .75rem; min-height: 34px; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--gris-200);
  background: var(--marino-950); border: 1px solid var(--marino-600); border-radius: var(--radio-s);
  box-shadow: 2px 2px 0 var(--sombra-color); cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.chapa::before { content: "$ "; color: var(--azul-claro); }
.chapa:hover { color: #fff; border-color: var(--azul-claro); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--azul-oscuro); }
.chapa:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--azul-oscuro); }
.t-prompt { color: var(--azul-claro); font-weight: 600; }
.t-salida { color: var(--gris-300); }
.t-ok { color: var(--azul-claro); font-weight: 600; }
.t-acento { color: var(--azul-claro); }
.terminal .cursor { width: .6em; height: 1.15em; vertical-align: -0.22em; margin-left: .05em; background: var(--azul-claro); }
.t-barra {
  display: inline-block; vertical-align: -0.12em; width: 14ch; height: .95em; margin: 0 .25ch;
  background: repeating-linear-gradient(90deg, var(--gris-700) 0 calc(1ch - 2px), transparent calc(1ch - 2px) 1ch);
  position: relative;
}
.t-barra i {
  position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: repeating-linear-gradient(90deg, var(--azul) 0 calc(1ch - 2px), transparent calc(1ch - 2px) 1ch);
}

@media (max-width: 880px) {
  .portada { min-height: 0; padding-top: calc(var(--cabecera) + 2.5rem); }
  .portada__rejilla { grid-template-columns: 1fr; }
  /* En móvil el símbolo va en el flujo, centrado entre los botones y la terminal */
  .portada__visual { padding-top: 0; }
  .simbolo { position: relative; top: auto; right: auto; width: 220px; margin: -8px auto 24px; }
  .terminal { max-width: 560px; }
  .terminal__cuerpo { font-size: .74rem; height: calc(6 * 1.7em + 2rem); line-height: 1.7; padding: .9rem .9rem 1rem; }
  .chapa { min-height: 40px; padding: .45rem .9rem; font-size: .8rem; }
}

/* ---------- Secciones ---------- */
.seccion { padding: var(--seccion) 0; position: relative; }
.claro.seccion { background: var(--fondo); color: var(--texto); }
.cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabeza h2 { font-size: var(--t-h2); margin-top: .9rem; max-width: 16ch; }
.cabeza p { color: var(--texto-suave); font-size: var(--t-l); max-width: 46ch; }
@media (max-width: 760px) { .cabeza { grid-template-columns: 1fr; } }

/* ---------- Servicios: lista en dos columnas ---------- */
.srv-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); align-items: start; }
.srv-lista { border-top: 1px solid var(--borde); }
.srv { border-bottom: 1px solid var(--borde); }
.srv__fila {
  width: 100%; display: grid; grid-template-columns: 36px 1fr 24px; align-items: start; gap: 1rem;
  padding: 1.15rem .25rem; background: none; border: 0; text-align: left; cursor: pointer;
}
.srv__icono {
  width: 36px; height: 36px; display: grid; place-items: center; color: var(--azul);
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.srv__icono svg { width: 19px; height: 19px; }
.srv__textos { display: grid; gap: .15rem; }
.srv__nombre { font-family: var(--f-titulo); font-size: var(--t-h3); font-weight: 600; letter-spacing: -.015em; transition: color var(--transicion); }
.srv__linea { font-size: .95rem; color: var(--texto-suave); line-height: 1.45; }
.srv__puntos { padding: 0 1rem 1.35rem calc(36px + 1.25rem); display: grid; gap: .45rem; }
.srv__puntos li { position: relative; padding-left: 1.4rem; color: var(--texto-suave); font-size: .95rem; line-height: 1.45; }
.srv__puntos li::before { content: ">"; position: absolute; left: 0; font-family: var(--f-mono); color: var(--azul-claro); font-weight: 600; }
.srv__flecha { width: 22px; height: 22px; margin-top: .3rem; color: var(--texto-tenue); transition: transform 220ms cubic-bezier(.2,.7,.2,1), color var(--transicion); }
.srv__desc > div { overflow: hidden; }
.srv__desc p { padding: 0 2.5rem 1.35rem calc(36px + 1.25rem); color: var(--texto-suave); max-width: 52ch; }
.js .srv__desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms cubic-bezier(.2,.7,.2,1); }
.js .srv.abierto .srv__desc { grid-template-rows: 1fr; }
.srv.abierto .srv__nombre { color: var(--azul-claro); }
.srv.abierto .srv__flecha { transform: rotate(90deg); color: var(--azul); }
.srv.abierto .srv__icono { background: var(--azul); border-color: var(--azul); color: #fff; }
@media (hover: hover) {
  .js .srv:hover .srv__desc { grid-template-rows: 1fr; }
  .srv:hover .srv__nombre { color: var(--azul-claro); }
  .srv:hover .srv__flecha { transform: rotate(90deg); color: var(--azul); }
  .srv:hover .srv__icono { background: var(--azul); border-color: var(--azul); color: #fff; }
}
@media (max-width: 760px) {
  .srv-columnas { grid-template-columns: 1fr; }
  .srv-columnas .srv-lista + .srv-lista { border-top: 0; }
  .srv__desc p { padding-right: .5rem; }
}

/* ---------- Cómo trabajamos: asistente de instalación ---------- */
.asistente { max-width: 940px; margin-inline: auto; background: #EEF1F5; }
.asistente__cuerpo { padding: clamp(1.25rem, 3vw, 2rem); }
.asistente__intro { font-size: var(--t-s); color: var(--texto-suave); margin-bottom: 1rem; }
.asistente__progreso { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; align-items: center; gap: 1.25rem; }
.progreso {
  height: 26px; padding: 3px; background: #fff; border: 1px solid var(--marino-900); border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--gris-300);
}
.progreso__relleno {
  display: block; height: 100%; width: var(--p, 100%);
  background: repeating-linear-gradient(90deg, var(--azul) 0 11px, transparent 11px 14px);
  transition: width 500ms steps(8, end);
}
.asistente__estado { font-family: var(--f-mono); font-size: var(--t-s); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asistente__estado b { color: var(--azul); font-weight: 600; margin-right: .4rem; }
.asistente__pasos {
  margin-top: 1.75rem; background: #fff; border: 1px solid var(--gris-300); border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--gris-200);
}
.a-paso {
  display: grid; grid-template-columns: 22px 11rem minmax(0, 1fr); gap: .25rem 1.25rem; align-items: start;
  padding: 1.1rem 1.25rem; transition: background var(--transicion);
}
.a-paso + .a-paso { border-top: 1px dashed var(--gris-200); }
.a-casilla {
  width: 18px; height: 18px; margin-top: .15rem; position: relative;
  border: 1px solid var(--marino-900); border-radius: 2px; background: #fff;
}
.a-casilla::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0;
}
.a-paso.hecho .a-casilla { background: var(--azul); border-color: var(--azul); }
.a-paso.hecho .a-casilla::after { opacity: 1; }
.a-paso.activo { background: var(--azul-tinte); }
.a-paso h3 { font-size: 1.1rem; }
.a-paso p { color: var(--texto-suave); font-size: .95rem; }
.a-paso .paso__dato { grid-column: 3; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--texto-tenue); letter-spacing: .02em; }
.a-paso:not(.hecho) h3, .a-paso:not(.hecho) p { opacity: .55; }
.asistente__pie {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; padding: 1rem clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--gris-300); background: #E4E8EE;
}
.asistente__pie .boton-win--principal { margin-left: .9rem; }
@media (max-width: 760px) {
  .asistente__progreso { grid-template-columns: 1fr; gap: .6rem; }
  .a-paso { grid-template-columns: 22px minmax(0, 1fr); }
  .a-paso p, .a-paso .paso__dato { grid-column: 2; }
  .asistente__pie { justify-content: stretch; }
  .asistente__pie .boton-win { flex: 1; min-width: 0; }
  .asistente__pie .boton-win--principal { flex-basis: 100%; margin: .25rem 0 0; min-height: 44px; }
}

/* ---------- Clientes: banda de logos en ola ---------- */
.ola {
  position: relative; height: 230px; margin-top: .5rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ola__linea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ola__linea path { fill: none; stroke: var(--marino-600); stroke-width: 1; stroke-dasharray: 3 6; }
.ola__pista { position: absolute; inset: 0; }
.ola__item { position: absolute; left: 0; top: 50%; will-change: transform; }
.ola__logo {
  display: grid; place-items: center; padding: 0; background: none; border: 0; cursor: pointer;
}
.ola__caja {
  display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; white-space: nowrap;
  font-family: var(--f-titulo); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; color: var(--gris-400);
  background: var(--marino-950); border: 1px solid var(--gris-600); border-radius: var(--radio-s);
  box-shadow: 3px 3px 0 var(--marino-800);
  transition: color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.ola__caja::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 2px; }
.ola__logo[aria-expanded="true"] .ola__caja::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--marino-950); }
.ola__logo:hover .ola__caja, .ola__logo:focus-visible .ola__caja, .ola__logo[aria-expanded="true"] .ola__caja {
  color: var(--azul-claro); border-color: var(--azul); box-shadow: 3px 3px 0 var(--azul-oscuro);
}
.ola__ayuda { margin-top: .5rem; display: flex; justify-content: center; }
.ola { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.ola.arrastrando, .ola.arrastrando .ola__logo { cursor: grabbing; }
/* Flechas: solo cuando la banda no se mueve sola («reducir movimiento») */
.ola__flecha {
  display: none; position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px;
  place-items: center; padding: 0; cursor: pointer; color: var(--gris-300);
  background: var(--marino-900); border: 1px solid var(--gris-600); border-radius: var(--radio-s); box-shadow: 3px 3px 0 var(--marino-800);
}
.ola__flecha svg { width: 14px; height: 14px; }
.ola__flecha:hover, .ola__flecha:focus-visible { color: var(--azul-claro); border-color: var(--azul); box-shadow: 3px 3px 0 var(--azul-oscuro); }
.ola__flecha--izq { left: 12px; }
.ola__flecha--der { right: 12px; }
.ola--quieta { -webkit-mask-image: none; mask-image: none; }
.ola--quieta .ola__flecha { display: grid; }

/* ---------- Explorador «C:\3J\soluciones» ---------- */
.explorador {
  width: min(880px, calc(100vw - 32px)); max-width: none; max-height: min(620px, calc(100dvh - 48px));
  padding: 0; margin: auto; color: var(--texto); background: var(--superficie);
  flex-direction: column;
}
.explorador[open] { display: flex; }
.explorador::backdrop { background: rgba(6, 10, 19, .72); }
html.explorador-abierto { overflow: hidden; }
.ventana__botones--activos { display: flex; gap: 3px; }
.ventana__min { position: relative; width: 24px; height: 22px; padding: 0; cursor: pointer; color: inherit; border: 1px solid var(--borde-ventana); border-radius: 2px; background: var(--superficie-2); }
.ventana__min::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 2px; background: currentColor; }
.ventana__min:hover { background: var(--marino-700); }
.explorador__cuerpo { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); flex: 1; min-height: 0; }
.explorador__arbol { border-right: 1px solid var(--borde); background: var(--marino-950); overflow-y: auto; padding: .5rem; }
.explorador__carpetas, .explorador__archivos, .ex-sub { list-style: none; margin: 0; padding: 0; }
.ex-carpeta, .ex-archivo {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; text-align: left; cursor: pointer;
  font-family: var(--f-texto); font-size: var(--t-s); color: var(--texto-suave); background: none; border: 1px solid transparent; border-radius: var(--radio-s);
}
.ex-carpeta:hover, .ex-archivo:hover { color: var(--texto); background: var(--marino-850); }
.ex-carpeta.activa { color: #fff; background: var(--azul); border-color: var(--marino-900); }
.ex-carpeta.activa .ex-num { color: rgba(255,255,255,.8); }
.ex-num { color: var(--texto-tenue); font-family: var(--f-mono); font-size: var(--t-xs); white-space: nowrap; }
.ex-icono { width: 18px; height: auto; flex-shrink: 0; }
.ex-icono__fondo { fill: #C98A1E; } .ex-icono__tapa { fill: #F2B544; } .ex-icono__brillo { fill: #FFD98A; }
.ex-icono__hoja { fill: var(--gris-100); } .ex-icono__pico { fill: var(--gris-300); } .ex-icono__raya { fill: var(--azul); }
.explorador__panel { overflow-y: auto; padding: 1rem 1.25rem; min-height: 320px; }
.explorador__ruta, .explorador__ficha-ruta { margin: 0 0 .75rem; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--texto-tenue); overflow-wrap: anywhere; }
.explorador__archivos { display: grid; gap: .15rem; }
.explorador__ficha { display: grid; gap: .6rem; align-content: start; }
.explorador.viendo-ficha .explorador__lista { display: none; }
.explorador__estado {
  margin: 0; padding: .4rem .8rem; border-top: 1px solid var(--borde-ventana); background: var(--marino-800);
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--gris-300);
}
.ex-sub { display: grid; gap: .1rem; padding: .25rem 0 .5rem 1.4rem; }
.ex-sub[hidden] { display: none; }
@media (min-width: 701px) { .ex-sub { display: none !important; } }
@media (max-width: 700px) {
  .explorador { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); height: calc(100dvh - 16px); }
  .explorador__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .explorador__arbol { border-right: 0; padding: .5rem; }
  .explorador__panel { display: none; min-height: 0; }
  .explorador.viendo-ficha .explorador__arbol { display: none; }
  .explorador.viendo-ficha .explorador__panel { display: block; }
  .ex-carpeta, .ex-archivo { padding: .7rem .6rem; }
}
.ola__estatica { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

.panel-cliente { max-width: 640px; margin: 1.75rem auto 0; }
.panel-cliente .ventana__barra { color: var(--gris-100); }
.panel-cliente__cuerpo { padding: 1.5rem; display: grid; gap: .8rem; }
.panel-cliente__sector { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--azul-claro); letter-spacing: .04em; }
.panel-cliente__caso { font-size: 1.35rem; font-weight: 700; }
.panel-cliente__desc { color: var(--texto-suave); }
.panel-cliente__pie { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; padding-top: 1rem; border-top: 1px dashed var(--borde); }
.enlace-texto { background: none; border: 0; padding: 0; color: var(--texto-tenue); font-family: var(--f-mono); font-size: var(--t-xs); cursor: pointer; }
.enlace-texto:hover { color: var(--texto); }
@media (max-width: 600px) { .ola { height: 190px; } .ola__caja { font-size: .9rem; padding: .6rem .85rem; } }

/* ---------- Sobre ---------- */
.sobre { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.sobre h2 { font-size: var(--t-h2); margin: .9rem 0 1.5rem; max-width: 18ch; }
.sobre__texto p { color: var(--texto-suave); font-size: var(--t-l); max-width: 56ch; }
.sobre__texto p + p { margin-top: 1rem; }
.cita {
  margin: 2rem 0 0; padding: 1.25rem 1.5rem; border: 1px solid var(--marino-900); border-left: 4px solid var(--azul);
  background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra);
  font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 500; line-height: 1.3; color: var(--texto); letter-spacing: -.01em;
}
.sobre__texto .cita { color: var(--texto); }
.propiedades { background: #EEF1F5; }
.propiedades__cuerpo { padding: 1.5rem; }
.propiedades__cab { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--gris-300); }
.propiedades__icono { width: 52px; height: 52px; flex-shrink: 0; }
.propiedades__cab b { display: block; font-family: var(--f-titulo); font-size: 1.15rem; }
.propiedades__cab span { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--texto-tenue); }
.propiedades__lista { margin: 0; display: grid; gap: .1rem; }
.propiedades__lista div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 1rem; padding: .55rem 0; align-items: baseline; }
.propiedades__lista div + div { border-top: 1px dashed var(--gris-200); }
.propiedades__lista dt { font-size: var(--t-s); color: var(--texto-suave); }
.propiedades__lista dd { margin: 0; font-family: var(--f-mono); font-size: var(--t-s); font-weight: 600; color: var(--texto); }
.propiedades__pie { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }
@media (max-width: 880px) { .sobre { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .propiedades__lista div { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------- Contacto ---------- */
.cierre {
  font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em;
  max-width: 34ch; padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px dashed var(--borde);
}
.cierre::before { content: "// "; font-family: var(--f-mono); font-weight: 500; color: var(--azul-claro); }
.contacto { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contacto h2 { font-size: var(--t-h2); margin: .9rem 0 1.25rem; }
.contacto__intro p { color: var(--texto-suave); font-size: var(--t-l); max-width: 40ch; }
.lista-check { margin-top: 2rem; display: grid; gap: .85rem; }
.lista-check li { display: flex; gap: .75rem; align-items: flex-start; color: var(--texto-suave); }
.lista-check svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--azul); margin-top: .15rem; }

.formulario { position: relative; }
.formulario__cuerpo { padding: clamp(1.25rem, 3vw, 2.25rem); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.campo { display: grid; gap: .45rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: var(--t-s); font-weight: 600; color: var(--texto); }
.campo label small { font-weight: 400; color: var(--texto-tenue); font-family: var(--f-mono); font-size: var(--t-xs); margin-left: .35rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem;
  font: inherit; font-size: 1rem; color: var(--texto);
  background: var(--marino-950); border: 1px solid var(--borde-ventana); border-radius: var(--radio-s);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  -webkit-appearance: none; appearance: none;
}
.campo textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.campo select {
  padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FB0FF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--gris-500); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--gris-500); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 3px 3px 0 var(--azul-oscuro); }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--error); }
.campo__error { display: none; font-size: var(--t-s); color: var(--error); }
.campo.con-error .campo__error { display: block; }
.casilla { grid-column: 1 / -1; display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-s); color: var(--texto-suave); cursor: pointer; }
.casilla input {
  flex-shrink: 0; width: 22px; height: 22px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: var(--marino-950); border: 1px solid var(--gris-500); border-radius: 2px;
  display: grid; place-items: center; transition: background var(--transicion), border-color var(--transicion);
}
.casilla input::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.casilla input:checked { background: var(--azul); border-color: var(--azul); }
.casilla input:checked::after { opacity: 1; }
.casilla a { color: var(--azul-claro); }
.casilla.con-error input { border-color: var(--error); }
.formulario__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.formulario__pie .boton { min-width: 220px; }
.formulario__aviso { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--texto-tenue); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 880px) { .contacto { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr; }
  .formulario__pie .boton { width: 100%; }
  .portada__acciones .boton { width: 100%; }
}

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--marino-700); background: var(--marino-950); padding: 3rem 0 2rem; color: var(--gris-400); font-size: var(--t-s); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.pie img { height: 36px; width: auto; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: var(--t-xs); }
.pie a { text-decoration: none; transition: color var(--transicion); }
.pie a:hover { color: var(--gris-50); }
.pie__base { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px dashed var(--marino-800); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .03em; }

/* ---------- Páginas interiores (legal, gracias, 404) ---------- */
.interior { padding: calc(var(--cabecera) + 4rem) 0 var(--seccion); min-height: 70vh; }
.interior .contenedor { max-width: 820px; }
.interior h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); margin: 1rem 0 1.5rem; }
.legal h2 { font-size: 1.35rem; margin: 2.5rem 0 .75rem; }
.legal h3 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.legal p, .legal li { color: var(--texto-suave); }
.legal p + p { margin-top: .9rem; }
.legal ul { margin: .75rem 0; display: grid; gap: .5rem; }
.legal li { padding-left: 1.25rem; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--azul); }
.legal a { color: var(--azul-claro); }
.legal strong { color: var(--texto); font-weight: 600; }
.ficha { margin: 1.5rem 0; border: 1px solid var(--borde-ventana); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.ficha div { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; padding: .9rem 1.25rem; background: var(--superficie); }
.ficha div + div { border-top: 1px solid var(--borde); }
.ficha dt { font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-tenue); padding-top: .2rem; }
.ficha dd { margin: 0; color: var(--texto); }
.pend { font-family: var(--f-mono); font-size: .85em; color: var(--pendiente); background: rgba(255, 196, 107, .12); padding: .1rem .4rem; border-radius: 2px; }
.actualizado { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--texto-tenue); }
@media (max-width: 600px) { .ficha div { grid-template-columns: 1fr; gap: .2rem; } }

.aviso-pagina { text-align: left; }
.aviso-pagina__icono { width: 72px; height: 72px; color: var(--azul); margin-bottom: 1rem; }
.aviso-pagina p { color: var(--texto-suave); font-size: var(--t-l); max-width: 48ch; }
.aviso-pagina .boton { margin-top: 2rem; }
.registro {
  margin-top: 2.5rem; padding: 1rem 1.25rem; border: 1px solid var(--borde-ventana); border-radius: var(--radio);
  background: #05080F; box-shadow: var(--sombra); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.9;
}
.registro b { color: var(--ok); font-weight: 500; }
.registro span { color: var(--azul-claro); }

/* ---------- Apariciones sobrias ---------- */
.js .aparece { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2,.7,.2,1); }
.js .aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .cursor { animation: none !important; }
  .js .aparece { opacity: 1; transform: none; }
  .hexagono { animation: none !important; }
  .hex { --sep: 0px !important; }
}