/* Unai Pz. de A. — hoja de estilos de la web.
   Basada en el sistema de diseño «Unai Pz. de A.» (tokens, botón, campo, nota, figura, tabla, nodos).
   Ortogonal (radius-0), tinta sobre papel, color solo como capa funcional. */

/* ---------- Tokens ---------- */
:root, [data-theme="light"] {
  --papel: #ffffff; --niebla: #f1efea; --linea: #cfccc5; --construccion: #a3a09a;
  --grafito: #6b6a66; --tinta: #1a1a1a; --sobre-tinta: #ffffff;
  --pizarra: #3e5c76; --pizarra-suave: #e6ecf1; --tierra: #a44a2a; --tierra-suave: #f4e4dc;
  --musgo: #56663e; --musgo-suave: #e8ecdf; --ocre: #7a5c18; --ocre-suave: #f2ead6;
  --foco: var(--pizarra); --enlace: var(--pizarra);
  color-scheme: light;
}
[data-theme="dark"] {
  --papel: #141413; --niebla: #201f1d; --linea: #3b3a37; --construccion: #5e5c58;
  --grafito: #a3a09a; --tinta: #eeece7; --sobre-tinta: #141413;
  --pizarra: #8da9c4; --pizarra-suave: #1b2630; --tierra: #e3906f; --tierra-suave: #33201a;
  --musgo: #a9bb8c; --musgo-suave: #222919; --ocre: #d3b26a; --ocre-suave: #2d2513;
  color-scheme: dark;
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --trazo-fino: 1px; --trazo-medio: 1.5px; --trazo-grueso: 2px; --nodo: 7px;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --ancho: 1200px;
  --medida: 68ch;
  --margen: var(--space-16);
}
@media (max-width: 900px) { :root { --margen: var(--space-8); } }
@media (max-width: 560px) { :root { --margen: var(--space-4); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 17px/1.65 var(--font-sans); -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: var(--trazo-grueso) solid var(--foco); outline-offset: 2px; }
h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.2em; }
li { margin-bottom: var(--space-2); }
strong, b { font-weight: 700; }
em, i { font-style: normal; font-weight: 700; }
hr { border: 0; border-top: var(--trazo-fino) solid var(--linea); margin: var(--space-12) 0; }
[hidden] { display: none !important; }
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--tinta); color: var(--sobre-tinta); padding: var(--space-2) var(--space-4); font: 400 12px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.skip-link:focus { top: var(--space-4); }

/* Tipografía del sistema */
.display { font: 500 clamp(38px, 5.4vw, 72px)/0.95 var(--font-sans); letter-spacing: -0.03em; }
.titulo-1 { font: 500 clamp(34px, 5vw, 48px)/1.02 var(--font-sans); letter-spacing: -0.025em; }
.titulo-2 { font: 500 clamp(24px, 3vw, 28px)/1.1 var(--font-sans); letter-spacing: -0.015em; }
.titulo-3 { font: 500 19px/1.3 var(--font-sans); letter-spacing: -0.005em; }
.nota-texto { font: 400 13px/1.45 var(--font-sans); }
.etiqueta { font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.dato { font: 400 14px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.pie { font: 300 10px/1.4 var(--font-mono); color: var(--grafito); }
.grafito { color: var(--grafito); }
.mono { font-family: var(--font-mono); }

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }
.seccion { padding: var(--space-16) 0; }
.seccion + .seccion { border-top: var(--trazo-fino) solid var(--linea); }
.seccion-cabecera { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); max-width: var(--medida); }
.seccion-cabecera p { color: var(--grafito); margin: 0; }
.rotulo { font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--grafito); margin: 0; }
@media (max-width: 560px) { .seccion { padding: var(--space-12) 0; } }

/* ---------- Logo ---------- */
.u3-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--tinta); text-decoration: none; }
.u3-logo:hover { color: var(--tinta); }
.u3-logo svg { display: block; flex: none; width: 28px; height: 28px; }
.u3-logo-texto { font: 500 22px/1 var(--font-sans); letter-spacing: -0.02em; white-space: nowrap; }
.u3-logo-apellido { color: var(--grafito); }

/* ---------- Cabecera y navegación ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: var(--trazo-fino) solid var(--tinta); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 68px; }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav-lista { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav-lista > li { margin: 0; position: relative; }
.nav-enlace, .nav-desplegable-boton {
  font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tinta); text-decoration: none; background: none; border: 0; padding: var(--space-2) 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-enlace:hover, .nav-desplegable-boton:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.nav-enlace[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--trazo-grueso); text-underline-offset: 6px; }
.nav-desplegable-boton::after { content: ""; width: 6px; height: 6px; border-right: var(--trazo-medio) solid currentColor; border-bottom: var(--trazo-medio) solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-desplegable-boton[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-35%); width: 620px; background: var(--papel);
  border: var(--trazo-fino) solid var(--tinta); padding: var(--space-6); display: none;
  grid-template-columns: 1.3fr 1fr; gap: var(--space-6) var(--space-8);
}
.nav-menu.abierto { display: grid; }
.nav-menu-grupo { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-menu-grupo .rotulo { padding-bottom: var(--space-2); border-bottom: var(--trazo-fino) solid var(--linea); margin-bottom: var(--space-2); }
.nav-menu a { color: var(--tinta); text-decoration: none; font-size: 15px; line-height: 1.35; padding: 5px 0; }
.nav-menu a:hover { text-decoration: underline; }
.nav-menu a span { display: block; font: 400 12px/1.4 var(--font-sans); color: var(--grafito); }
.nav-herramientas { display: flex; align-items: center; gap: var(--space-3); }
.idiomas { display: flex; gap: var(--space-2); font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; }
.idiomas a { color: var(--grafito); text-decoration: none; padding: 2px 0; }
.idiomas a:hover { color: var(--tinta); }
.idiomas a[aria-current="true"] { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.boton-icono { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: var(--trazo-medio) solid var(--tinta); color: var(--tinta); cursor: pointer; padding: 0; }
.boton-icono:hover { background: var(--niebla); }
.boton-icono svg { width: 16px; height: 16px; }
.tema-luna { display: none; }
[data-theme="dark"] .tema-sol { display: none; }
[data-theme="dark"] .tema-luna { display: block; }
.nav-abrir { display: none; }

@media (max-width: 1060px) {
  .nav-abrir { display: inline-flex; }
  .nav { position: fixed; inset: 69px 0 0 0; background: var(--papel); flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-4) var(--margen) var(--space-12); overflow-y: auto; display: none; }
  .nav.abierto { display: flex; }
  .nav-lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-lista > li { border-bottom: var(--trazo-fino) solid var(--linea); }
  .nav-enlace, .nav-desplegable-boton { width: 100%; justify-content: space-between; padding: var(--space-4) 0; font-size: 13px; }
  .nav-menu { position: static; transform: none; width: auto; border: 0; padding: 0 0 var(--space-4); grid-template-columns: 1fr; gap: var(--space-4); }
  .nav-herramientas { padding-top: var(--space-6); justify-content: space-between; }
  .nav .u3-btn { justify-content: center; }
}

/* ---------- Botones ---------- */
.u3-btn {
  font: 400 12px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  min-height: 44px; padding: 0 var(--space-4); border-radius: 0; border: var(--trazo-medio) solid var(--tinta);
  background: transparent; color: var(--tinta); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none; white-space: nowrap;
}
.u3-btn:hover { background: var(--niebla); color: var(--tinta); }
.u3-btn-primario { background: var(--tinta); color: var(--sobre-tinta); }
.u3-btn-primario:hover { background: var(--tinta); color: var(--sobre-tinta); opacity: .88; }
.u3-btn-pequeno { min-height: 36px; font-size: 11px; padding: 0 var(--space-3); }
.u3-btn-texto { border-color: transparent; padding: 0; color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; min-height: 0; }
.u3-btn-texto:hover { background: transparent; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Portada ---------- */
.portada { padding: var(--space-16) 0 var(--space-12); }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.portada h1 { margin: var(--space-4) 0 var(--space-6); }
.portada-entradilla { max-width: 520px; font-size: 17px; margin-bottom: var(--space-8); }
.portada-red { width: 100%; max-width: 560px; margin-left: auto; display: block; }
@media (max-width: 900px) { .portada-rejilla { grid-template-columns: 1fr; } .portada-red { margin: 0 auto; max-width: 440px; } }

/* Red de nodos */
.u3-construccion { stroke: var(--construccion); stroke-width: var(--trazo-fino); fill: none; }
.u3-conexion { stroke: var(--tinta); stroke-width: var(--trazo-fino); fill: none; }
.u3-conexion-fuerte { stroke: var(--tinta); stroke-width: var(--trazo-grueso); fill: none; }
.u3-conexion-posible { stroke: var(--grafito); stroke-width: var(--trazo-fino); stroke-dasharray: 4 3; fill: none; }
.u3-nodo { fill: var(--tinta); }
.u3-nodo-abierto { fill: var(--papel); stroke: var(--tinta); stroke-width: var(--trazo-medio); }
.u3-rotulo-svg { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; fill: var(--tinta); }
.u3-rotulo-svg-grafito { fill: var(--grafito); }

/* ---------- Rejilla de servicios ---------- */
.servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--trazo-fino) solid var(--tinta); }
.servicio { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-8) 0; border-bottom: var(--trazo-fino) solid var(--linea); color: var(--tinta); text-decoration: none; }
.servicio:not(:nth-child(3n+1)) { padding-left: var(--space-6); border-left: var(--trazo-fino) solid var(--linea); }
.servicio:hover { background: var(--niebla); color: var(--tinta); }
.servicio-num { font: 400 11px/1.4 var(--font-mono); color: var(--grafito); letter-spacing: .04em; }
.servicio-nombre { font: 500 19px/1.3 var(--font-sans); letter-spacing: -.005em; }
.servicio-texto { font-size: 15px; color: var(--tinta); margin: 0; }
.servicio-detalle { font: 400 11px/1.4 var(--font-mono); color: var(--grafito); letter-spacing: .04em; text-transform: uppercase; margin-top: auto; padding-top: var(--space-3); }
@media (max-width: 900px) {
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicio:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .servicio:nth-child(2n) { padding-left: var(--space-6); border-left: var(--trazo-fino) solid var(--linea); }
}
@media (max-width: 560px) {
  .servicios { grid-template-columns: 1fr; }
  .servicio:nth-child(2n) { padding-left: 0; border-left: 0; }
}

/* Banda (talleres, llamada) */
.banda { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-8); border: var(--trazo-medio) solid var(--tinta); margin-top: var(--space-8); }
.banda h2, .banda h3 { margin-bottom: var(--space-2); }
.banda p { margin: 0; max-width: 60ch; }
.banda-invertida { background: var(--tinta); color: var(--sobre-tinta); border-color: var(--tinta); }
.banda-invertida .rotulo { color: var(--construccion); }
.banda-invertida .u3-btn { border-color: var(--sobre-tinta); color: var(--sobre-tinta); }
.banda-invertida .u3-btn:hover { background: transparent; opacity: .85; }
.banda-invertida .u3-btn-primario { background: var(--sobre-tinta); color: var(--tinta); }
@media (max-width: 700px) { .banda { grid-template-columns: 1fr; padding: var(--space-6); } }

/* ---------- Proyectos ---------- */
.proyectos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
.proyecto { display: flex; flex-direction: column; gap: var(--space-3); color: var(--tinta); text-decoration: none; }
.proyecto:hover { color: var(--tinta); }
.proyecto:hover .proyecto-titulo { text-decoration: underline; text-underline-offset: 4px; }
.proyecto-imagen { aspect-ratio: 4 / 3; background: var(--niebla); overflow: hidden; }
.proyecto-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proyecto-imagen.contener img { object-fit: contain; padding: var(--space-4); }
.proyecto-etiquetas { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.proyecto-titulo { font: 500 21px/1.25 var(--font-sans); letter-spacing: -.01em; }
.proyecto-texto { margin: 0; color: var(--tinta); font-size: 15px; }
@media (max-width: 760px) { .proyectos { grid-template-columns: 1fr; } }

/* ---------- Franja de datos ---------- */
.datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--trazo-fino) solid var(--tinta); border-bottom: var(--trazo-fino) solid var(--tinta); }
.dato-celda { padding: var(--space-6) var(--space-6) var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dato-celda + .dato-celda { padding-left: var(--space-6); border-left: var(--trazo-fino) solid var(--linea); }
.dato-valor { font: 500 28px/1.1 var(--font-sans); letter-spacing: -.015em; }
.dato-etiqueta { font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); }
@media (max-width: 900px) {
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dato-celda:nth-child(3) { padding-left: 0; border-left: 0; }
  .dato-celda:nth-child(n+3) { border-top: var(--trazo-fino) solid var(--linea); }
}

/* ---------- Página interior ---------- */
.migas { padding-top: var(--space-6); }
.migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); }
.migas li { margin: 0; }
.migas li + li::before { content: "/"; margin-right: var(--space-2); color: var(--construccion); }
.migas a { color: var(--grafito); text-decoration: none; }
.migas a:hover { color: var(--tinta); text-decoration: underline; }
.cabeza { padding: var(--space-8) 0 var(--space-12); border-bottom: var(--trazo-fino) solid var(--tinta); }
.cabeza-rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-12); align-items: end; }
.cabeza h1 { margin: var(--space-3) 0 var(--space-6); max-width: 22ch; }
.cabeza-entradilla { font-size: 18px; line-height: 1.55; max-width: 60ch; margin-bottom: var(--space-6); }
.cabeza-ficha { border-top: var(--trazo-grueso) solid var(--tinta); }
.cabeza-ficha div { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--trazo-fino) solid var(--linea); font-size: 14px; }
.cabeza-ficha dt { font: 400 10px/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); }
.cabeza-ficha dd { margin: 0; }
@media (max-width: 900px) { .cabeza-rejilla { grid-template-columns: 1fr; gap: var(--space-8); } }

.cuerpo-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-16); padding: var(--space-12) 0 var(--space-16); }
.cuerpo-pagina.sin-lateral { grid-template-columns: minmax(0, 1fr); }
.lateral { position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; gap: var(--space-6); }
.lateral nav ol { list-style: none; padding: 0; margin: 0; border-top: var(--trazo-fino) solid var(--tinta); }
.lateral nav li { margin: 0; border-bottom: var(--trazo-fino) solid var(--linea); }
.lateral nav a { display: block; padding: var(--space-2) 0; color: var(--tinta); text-decoration: none; font-size: 14px; }
.lateral nav a:hover { text-decoration: underline; }
@media (max-width: 1000px) { .cuerpo-pagina { grid-template-columns: 1fr; gap: var(--space-8); } .lateral { position: static; order: -1; display: none; } }

.prosa { max-width: var(--medida); }
.prosa > section { padding-top: var(--space-12); }
.prosa > section:first-child { padding-top: 0; }
.prosa h2 { font: 500 clamp(24px, 3vw, 28px)/1.1 var(--font-sans); letter-spacing: -0.015em; margin-bottom: var(--space-6); display: flex; gap: var(--space-3); align-items: baseline; }
.prosa h2 .num { font: 400 12px/1 var(--font-mono); color: var(--grafito); flex: none; transform: translateY(-4px); }
.prosa h3 { font: 500 19px/1.3 var(--font-sans); letter-spacing: -.005em; margin: var(--space-8) 0 var(--space-3); }
.prosa ul, .prosa ol { padding-left: 1.2em; }
.prosa li::marker { color: var(--grafito); }
.lista-guion { list-style: none; padding: 0 !important; }
.lista-guion li { padding-left: 1.4em; position: relative; }
.lista-guion li::before { content: "—"; position: absolute; left: 0; color: var(--grafito); }

/* Lista de situaciones (casos en palabras del cliente) */
.situaciones { list-style: none; padding: 0 !important; margin: 0 0 var(--space-6); border-top: var(--trazo-fino) solid var(--tinta); }
.situaciones li { margin: 0; padding: var(--space-3) 0 var(--space-3) 28px; border-bottom: var(--trazo-fino) solid var(--linea); position: relative; }
.situaciones li::before { content: ""; position: absolute; left: 4px; top: calc(var(--space-3) + 8px); width: var(--nodo); height: var(--nodo); border-radius: 50%; background: var(--tinta); }

/* Pasos */
.pasos { list-style: none; padding: 0 !important; margin: 0; counter-reset: paso; position: relative; }
.pasos::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; border-left: var(--trazo-fino) solid var(--construccion); }
.pasos li { counter-increment: paso; position: relative; padding: 0 0 var(--space-6) 52px; margin: 0; }
.pasos li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 32px; height: 32px; background: var(--tinta); color: var(--sobre-tinta); font: 400 12px/32px var(--font-mono); text-align: center; }
.pasos h3 { margin: 4px 0 var(--space-2); }
.pasos p { margin: 0; }

/* Entregables / definición */
.entregables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--trazo-fino) solid var(--tinta); margin-bottom: var(--space-6); }
.entregables div { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--trazo-fino) solid var(--linea); }
.entregables div:nth-child(2n) { padding-left: var(--space-4); border-left: var(--trazo-fino) solid var(--linea); }
.entregables dt { font: 500 16px/1.35 var(--font-sans); margin-bottom: var(--space-1); }
.entregables dd { margin: 0; font-size: 14px; color: var(--grafito); }
@media (max-width: 600px) { .entregables { grid-template-columns: 1fr; } .entregables div:nth-child(2n) { padding-left: 0; border-left: 0; } }

/* Nota */
.u3-nota { display: flex; gap: var(--space-3); background: var(--niebla); padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 1.5; margin: var(--space-6) 0; }
.u3-nota-etq { flex: none; font: 400 10px/1.4 var(--font-mono); letter-spacing: 0.04em; padding-top: 3px; text-transform: uppercase; }
.u3-nota p:last-child { margin: 0; }
.u3-nota-referencia { background: var(--pizarra-suave); } .u3-nota-referencia .u3-nota-etq { color: var(--pizarra); }
.u3-nota-cambio { background: var(--tierra-suave); } .u3-nota-cambio .u3-nota-etq { color: var(--tierra); }

/* Figura */
.u3-fig { margin: var(--space-8) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.u3-fig img { display: block; width: 100%; height: auto; }
.u3-fig figcaption, .u3-fig-pie { font: 300 11px/1.45 var(--font-mono); color: var(--grafito); }

/* Tabla */
.u3-tabla-caja { overflow-x: auto; max-width: 100%; margin: var(--space-6) 0; }
.u3-tabla { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.u3-tabla caption { text-align: left; font: 400 11px/1.4 var(--font-mono); color: var(--grafito); padding-bottom: var(--space-2); letter-spacing: .04em; text-transform: uppercase; }
.u3-tabla th { text-align: left; font: 400 10px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--trazo-fino) solid var(--tinta); vertical-align: bottom; }
.u3-tabla td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--trazo-fino) solid var(--linea); vertical-align: top; }
.u3-tabla td.num, .u3-tabla th.num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.u3-tabla tr:last-child td { border-bottom: 0; }

/* Preguntas frecuentes */
.faq { border-top: var(--trazo-fino) solid var(--tinta); }
.faq details { border-bottom: var(--trazo-fino) solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding: var(--space-4) 32px var(--space-4) 0; font: 500 17px/1.35 var(--font-sans); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: var(--space-4); font: 400 18px/1 var(--font-mono); color: var(--grafito); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 var(--space-4); max-width: var(--medida); }
.faq details > div p:last-child { margin: 0; }

/* Relacionados */
.relacionados { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.relacionado { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--trazo-fino) solid var(--tinta); color: var(--tinta); text-decoration: none; }
.relacionado:hover { color: var(--tinta); }
.relacionado:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.relacionado strong { font-weight: 500; font-size: 17px; line-height: 1.3; }
.relacionado span:last-child { font-size: 14px; color: var(--grafito); }

/* Lateral: tarjeta de contacto */
.tarjeta-contacto { border: var(--trazo-medio) solid var(--tinta); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.tarjeta-contacto p { margin: 0; font-size: 14px; }

/* ---------- Formulario ---------- */
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.formulario .ancho { grid-column: 1 / -1; }
.u3-campo { display: flex; flex-direction: column; gap: var(--space-1); }
.u3-campo label { font: 400 10px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.u3-campo label .opcional { color: var(--grafito); }
.u3-campo input, .u3-campo select, .u3-campo textarea {
  font: 400 15px/1.45 var(--font-sans); min-height: 44px; padding: 10px var(--space-3); border: var(--trazo-medio) solid var(--tinta);
  border-radius: 0; background: var(--papel); color: var(--tinta); width: 100%;
}
.u3-campo textarea { min-height: 160px; resize: vertical; }
.u3-campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.u3-campo-ayuda { font-size: 12px; color: var(--grafito); }
.casilla { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; }
.casilla input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tinta); flex: none; }
.aviso-privacidad { font-size: 13px; color: var(--grafito); background: var(--niebla); padding: var(--space-3) var(--space-4); }
.aviso-privacidad p { margin: 0 0 var(--space-1); }
.mensaje-formulario { padding: var(--space-3) var(--space-4); font-size: 14px; display: flex; gap: var(--space-2); }
.mensaje-ok { background: var(--musgo-suave); color: var(--musgo); }
.mensaje-aviso { background: var(--ocre-suave); color: var(--ocre); margin-bottom: var(--space-4); }
.mensaje-aviso a { color: inherit; font-weight: 500; }
.mensaje-error { background: var(--tierra-suave); color: var(--tierra); }
@media (max-width: 640px) { .formulario { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.pie-pagina { border-top: var(--trazo-fino) solid var(--tinta); padding: var(--space-12) 0 var(--space-8); margin-top: var(--space-8); }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.pie-rejilla h2 { font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); margin-bottom: var(--space-3); }
.pie-rejilla ul { list-style: none; padding: 0; margin: 0; }
.pie-rejilla li { margin: 0 0 var(--space-2); }
.pie-rejilla a { color: var(--tinta); text-decoration: none; font-size: 14px; }
.pie-rejilla a:hover { text-decoration: underline; }
.pie-marca p { font-size: 14px; color: var(--grafito); max-width: 34ch; margin-top: var(--space-4); }
.pie-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-4); border-top: var(--trazo-fino) solid var(--linea); font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--grafito); }
.pie-base a { color: var(--grafito); }
@media (max-width: 900px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }

/* ---------- Páginas heredadas (casos, guía, blog, privacidad, portfolio, 404) ---------- */
.container, .container-wide { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }
.content-narrow { max-width: var(--medida); }
.section { padding: var(--space-12) 0; }
.section-label, .project-eyebrow, .project-card-category, .blog-name { font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); margin: 0 0 var(--space-3); display: block; }
.btn { font: 400 12px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; min-height: 44px; padding: 0 var(--space-4); border: var(--trazo-medio) solid var(--tinta); background: transparent; color: var(--tinta); display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.btn:hover { background: var(--niebla); color: var(--tinta); }
.btn-primary { background: var(--tinta); color: var(--sobre-tinta); }
.btn-primary:hover { background: var(--tinta); color: var(--sobre-tinta); opacity: .88; }

/* Índice de proyectos */
.page-header { padding: var(--space-8) 0 var(--space-12); border-bottom: var(--trazo-fino) solid var(--tinta); margin-bottom: var(--space-12); }
.page-title, .privacy-title, .blog-header h1 { font: 500 clamp(34px, 5vw, 48px)/1.02 var(--font-sans); letter-spacing: -0.025em; margin: var(--space-2) 0 var(--space-4); }
.page-description { max-width: 60ch; font-size: 18px; margin: 0; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
.project-card { margin: 0; }
.project-card-link { display: flex; flex-direction: column; gap: var(--space-3); color: var(--tinta); text-decoration: none; }
.project-card-link:hover { color: var(--tinta); }
.project-card-link:hover .project-card-title { text-decoration: underline; text-underline-offset: 4px; }
img.project-card-image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--niebla); }
img.project-card-image--contain { object-fit: contain; background: var(--niebla); padding: var(--space-4); }
.project-card-body { display: flex; flex-direction: column; gap: var(--space-2); }
.project-card-title { font: 500 21px/1.25 var(--font-sans); letter-spacing: -.01em; margin: 0; }
.project-card-description { margin: 0; font-size: 15px; }
.project-card-meta { font: 400 11px/1.4 var(--font-mono); color: var(--grafito); letter-spacing: .04em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.project-card-cta { font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--enlace); }
@media (max-width: 760px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* Casos y guía */
.project-back { display: inline-block; margin: var(--space-6) 0 0; font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); text-decoration: none; }
.project-back:hover { color: var(--tinta); text-decoration: underline; }
.project-hero { padding: var(--space-8) 0 var(--space-12); border-bottom: var(--trazo-fino) solid var(--tinta); }
.project-title { font: 500 clamp(34px, 5vw, 48px)/1.02 var(--font-sans); letter-spacing: -0.025em; margin: var(--space-2) 0 var(--space-6); max-width: 24ch; }
.project-summary { font-size: 18px; max-width: 62ch; margin-bottom: var(--space-6); }
.project-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: var(--trazo-grueso) solid var(--tinta); margin: var(--space-6) 0 0; }
.project-meta-item { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--trazo-fino) solid var(--linea); display: flex; flex-direction: column; gap: 2px; }
.project-meta-label { font: 400 10px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); }
.project-meta-value { font-size: 15px; }
.project-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: var(--trazo-fino) solid var(--tinta); border-bottom: var(--trazo-fino) solid var(--tinta); margin: var(--space-8) 0; }
.project-stat { padding: var(--space-4) var(--space-4) var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-1); }
.project-stat-value { font: 500 26px/1.1 var(--font-sans); letter-spacing: -.015em; }
.project-stat-label { font: 400 10px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); }
.project-section { padding: var(--space-12) 0 0; }
.project-section-title { font: 500 clamp(24px, 3vw, 28px)/1.1 var(--font-sans); letter-spacing: -0.015em; margin: 0 0 var(--space-6); }
.project-prose { max-width: var(--medida); }
.project-prose h3 { font: 500 19px/1.3 var(--font-sans); margin: var(--space-8) 0 var(--space-3); }
.project-case > .container:last-child, .project-case > .container-wide:last-child { padding-bottom: var(--space-16); }
.project-figure { margin: var(--space-8) 0; padding: 0; }
.project-figure img { display: block; width: 100%; height: auto; }
.project-figure figcaption { font: 300 11px/1.45 var(--font-mono); color: var(--grafito); margin-top: var(--space-2); }
.project-figure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.project-figure-grid .project-figure { margin: 0; }
@media (max-width: 700px) { .project-figure-grid { grid-template-columns: 1fr; } }
.project-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-8) 0 0; margin: var(--space-8) 0 0; border-top: var(--trazo-fino) solid var(--linea); }
.project-stack-item { font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; border: var(--trazo-fino) solid var(--linea); padding: var(--space-1) var(--space-2); color: var(--grafito); }
.project-prose table { border-collapse: collapse; width: 100%; font-size: 14px; margin: var(--space-6) 0; }
.project-prose th { text-align: left; font: 400 10px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; border-bottom: var(--trazo-fino) solid var(--tinta); padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.project-prose td { border-bottom: var(--trazo-fino) solid var(--linea); padding: var(--space-2) var(--space-3) var(--space-2) 0; vertical-align: top; }

/* Blog */
.blog-header { padding: var(--space-8) 0 var(--space-12); border-bottom: var(--trazo-fino) solid var(--tinta); }
.blog-description { max-width: 60ch; font-size: 18px; margin: 0; }
.blog-section { padding: var(--space-12) 0 var(--space-16); }
.blog-posts { display: flex; flex-direction: column; border-top: var(--trazo-fino) solid var(--tinta); }
.blog-post { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) 0; border-bottom: var(--trazo-fino) solid var(--linea); align-items: start; }
.blog-post-image { width: 140px; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--niebla); display: block; }
.blog-post-date { font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); margin: 0; }
.blog-post-title { font: 500 21px/1.25 var(--font-sans); margin: var(--space-2) 0; }
.blog-post-title a { color: var(--tinta); text-decoration: none; }
.blog-post-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-post-excerpt { margin: 0 0 var(--space-2); color: var(--grafito); font-size: 15px; }
.blog-post-link { font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.blog-more { margin-top: var(--space-6); }
.substack-cta { margin-top: var(--space-12); padding: var(--space-6); border: var(--trazo-medio) solid var(--tinta); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; }
.substack-cta-icon { display: none; }
.substack-cta-title { font: 500 19px/1.3 var(--font-sans); margin: 0 0 var(--space-1); }
.substack-cta-text p { margin: 0; }
.guias-lista { padding: var(--space-12) 0 0; }
@media (max-width: 600px) { .blog-post { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4); } .blog-post-image { width: 88px; } }

/* Privacidad y error */
.privacy-content { max-width: var(--medida); padding: var(--space-8) 0 var(--space-16); }
.privacy-header { padding-bottom: var(--space-8); border-bottom: var(--trazo-fino) solid var(--tinta); margin-bottom: var(--space-8); }
.privacy-intro { font-size: 18px; }
.privacy-table { border-collapse: collapse; width: 100%; font-size: 14px; margin: var(--space-6) 0; }
.privacy-table th, .privacy-table td { text-align: left; border-bottom: var(--trazo-fino) solid var(--linea); padding: var(--space-3) var(--space-3) var(--space-3) 0; vertical-align: top; }
.privacy-table th { font: 400 10px/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); width: 32%; }
.privacy-content h2 { font: 500 24px/1.15 var(--font-sans); margin: var(--space-8) 0 var(--space-3); }
.error-page { padding: var(--space-16) 0; }
.error-content { max-width: 60ch; }
.error-code { font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--grafito); }
.error-title { font: 500 clamp(34px, 5vw, 48px)/1.02 var(--font-sans); letter-spacing: -0.025em; margin: var(--space-3) 0 var(--space-4); }
.error-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

@media print {
  .cabecera, .pie-pagina, .lateral, .nav-abrir { display: none !important; }
  body { color: #000; background: #fff; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Dibujos de línea que siguen el tema: la imagen actúa como máscara y la tinta la pone el tema */
.dibujo { display: block; width: 100%; max-width: 100%; background-color: var(--tinta); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.u3-fig img, .project-figure img { background: transparent; }

/* Símbolos de tipo de trabajo */
.u3-simbolo { width: 28px; height: 28px; flex: none; color: var(--tinta); display: block; }
.tareas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.tareas li { display: flex; align-items: center; gap: var(--space-2); font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); }
.tareas-caso { margin: var(--space-6) 0 var(--space-4); }
.tareas-caso .u3-simbolo { width: 36px; height: 36px; }
.servicio-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.servicio-cabeza .u3-simbolo { width: 32px; height: 32px; }

/* Gráficos de datos: fondo transparente; en oscuro se invierten conservando el tono de las series */
img.grafico { background: transparent; }
[data-theme="dark"] img.grafico { filter: invert(1) hue-rotate(180deg); }
.project-card-body > .tareas { margin: var(--space-3) 0 var(--space-2); }
.proyecto > .tareas { margin-top: var(--space-1); }

/* Carátulas: al pasar por encima aparecen los símbolos del tipo de trabajo, sin tapar la imagen */
.proyecto-imagen, .project-card-media { position: relative; }
.project-card-media { display: block; }
.caratula-simbolos { position: absolute; left: var(--space-4); bottom: var(--space-4); display: flex; align-items: center; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.caratula-simbolo { width: 52px; height: 52px; padding: 9px; box-sizing: border-box; color: var(--tinta); background: var(--papel); border: var(--trazo-fino) solid var(--tinta); transform: translateY(4px); transition: transform .25s ease; }
.caratula-conector { width: 28px; height: 0; border-top: var(--trazo-fino) solid var(--tinta); }
a:hover .caratula-simbolos, a:focus-visible .caratula-simbolos { opacity: 1; }
a:hover .caratula-simbolo, a:focus-visible .caratula-simbolo { transform: none; }
@media (hover: none) { .caratula-simbolos { opacity: 1; } .caratula-simbolo { transform: none; width: 40px; height: 40px; padding: 7px; } .caratula-conector { width: 18px; } }
@media (prefers-reduced-motion: reduce) { .caratula-simbolos, .caratula-simbolo { transition: none; transform: none; } }

/* Animación de la portada: medición → modelo → malla → flujo → planos (ciclo de 22 s) */
.portada-anim { width: 100%; max-width: 560px; margin-left: auto; display: block; overflow: visible; }
.portada-anim.vertical { max-width: 380px; margin-right: auto; }
.anim-contorno { fill: var(--papel); stroke: var(--tinta); stroke-width: var(--trazo-grueso); stroke-dasharray: 1 1; animation: a-contorno 22s ease-in-out infinite; }
.anim-puntos circle { fill: var(--tinta); opacity: 0; animation: a-punto 22s linear infinite; }
.anim-malla { fill: none; stroke: var(--grafito); stroke-width: .6; opacity: 0; animation: a-malla 22s ease-in-out infinite; }
.anim-flujo { opacity: 0; animation: a-flujo 22s ease-in-out infinite; }
.anim-flujo path { fill: none; stroke: var(--grafito); stroke-width: var(--trazo-fino); stroke-dasharray: 6 10; animation: a-corriente 1.6s linear infinite; }
.anim-cotas { opacity: 0; animation: a-cotas 22s ease-in-out infinite; }
.anim-frente, .anim-fondo-cara { transform-box: view-box; transform-origin: 0 0; animation: a-frente 22s linear infinite; }
.anim-fondo-cara { opacity: 0; animation-name: a-fondo; }
.anim-fondo { fill: var(--papel); stroke: var(--tinta); stroke-width: var(--trazo-grueso); }
.anim-tapon { fill: var(--papel); }
.anim-fondo-agujeros { fill: none; stroke: var(--tinta); stroke-width: var(--trazo-grueso); vector-effect: non-scaling-stroke; }
.anim-gen { fill: none; stroke: var(--tinta); stroke-width: var(--trazo-grueso); opacity: 0; animation-duration: 22s; animation-timing-function: step-end; animation-iteration-count: infinite; }
.anim-contorno, .anim-fondo, .anim-malla, .anim-ejes, .anim-trazo { vector-effect: non-scaling-stroke; }
.anim-trazo { fill: none; stroke: var(--tinta); stroke-width: var(--trazo-fino); }
.anim-relleno { fill: var(--tinta); }
@keyframes a-contorno { 0%, 11% { stroke-dashoffset: 1; opacity: 1; } 27%, 93% { stroke-dashoffset: 0; opacity: 1; } 99% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes a-punto { 0% { opacity: 0; } 1%, 22% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes a-malla { 0%, 37% { opacity: 0; } 42%, 53% { opacity: .85; } 57%, 100% { opacity: 0; } }
@keyframes a-flujo { 0%, 62% { opacity: 0; } 66%, 76% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes a-corriente { to { stroke-dashoffset: -16; } }
@keyframes a-cotas { 0%, 79% { opacity: 0; } 83%, 93% { opacity: 1; } 99%, 100% { opacity: 0; } }
@media (max-width: 900px) { .portada-anim { margin: 0 auto; max-width: 440px; } .portada-anim.vertical { max-width: 300px; } }
@media (prefers-reduced-motion: reduce) {
  .anim-contorno, .anim-frente, .anim-fondo-cara, .anim-gen, .anim-puntos circle, .anim-malla, .anim-flujo, .anim-flujo path, .anim-cotas { animation: none; }
  .anim-contorno { stroke-dashoffset: 0; }
}

/* =====================================================================
   Rediseño 15/10/2026: menos carga cognitiva.
   Una idea por bloque, textos cortos, más aire, detalles plegados.
   ===================================================================== */
:root { --bloque: 88px; --medida-corta: 46ch; }
@media (max-width: 700px) { :root { --bloque: 56px; } }

/* Cabecera de página interior */
.s-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-12); align-items: center; padding-block: var(--space-8) var(--space-16); }
.s-cabeza h1 { font: 500 clamp(34px, 4.6vw, 52px)/1.04 var(--font-sans); letter-spacing: -0.025em; max-width: 18ch; margin: 0 0 var(--space-6); }
.s-entradilla { font-size: 20px; line-height: 1.5; max-width: var(--medida-corta); margin: 0 0 var(--space-8); }
.s-cabeza .mini { justify-self: end; }
@media (max-width: 760px) { .s-cabeza { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-12); } .s-cabeza .mini { order: -1; justify-self: start; width: 120px; } }

/* Bloques */
.s-bloque { padding-block: var(--bloque); border-top: var(--trazo-fino) solid var(--linea); }
.s-bloque > h2, .s-titulo { font: 500 clamp(24px, 3vw, 30px)/1.15 var(--font-sans); letter-spacing: -0.015em; margin: 0 0 var(--space-8); max-width: 26ch; }
.s-intro { max-width: var(--medida-corta); margin: calc(-1 * var(--space-4)) 0 var(--space-8); color: var(--grafito); }

/* Cuándo te sirve: tres frases, nada más */
.s-cuando { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.s-cuando li { margin: 0; padding-top: var(--space-4); border-top: var(--trazo-grueso) solid var(--tinta); font-size: 19px; line-height: 1.45; }
@media (max-width: 800px) { .s-cuando { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Pasos: nodos unidos por una línea (la gramática del sistema de diseño) */
.s-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-6); position: relative; }
.s-pasos::before { content: ""; position: absolute; left: 6px; right: 0; top: 6px; border-top: var(--trazo-fino) solid var(--tinta); transform-origin: left; transition: transform 1.2s ease; }
.s-pasos li { margin: 0; padding-top: var(--space-8); position: relative; }
.s-pasos li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--tinta); border: var(--trazo-medio) solid var(--tinta); box-sizing: border-box; transition: background .3s ease calc(var(--i, 0) * .25s + .2s); }
.s-pasos li:last-child::before { background: var(--papel); }
.s-pasos h3 { font: 500 18px/1.3 var(--font-sans); margin: 0 0 var(--space-2); }
.s-pasos p { margin: 0; font-size: 15px; color: var(--grafito); max-width: 28ch; }
.js-anim .s-pasos:not(.en-vista)::before { transform: scaleX(0); }
.js-anim .s-pasos:not(.en-vista) li::before { background: var(--papel); }
@media (max-width: 800px) {
  .s-pasos { grid-template-columns: 1fr; gap: var(--space-6); }
  .s-pasos::before { left: 6px; right: auto; top: 6px; bottom: 6px; border-top: 0; border-left: var(--trazo-fino) solid var(--tinta); transform-origin: top; }
  .js-anim .s-pasos:not(.en-vista)::before { transform: scaleY(0); }
  .s-pasos li { padding: 0 0 0 var(--space-8); }
}

/* Qué recibes */
.s-recibes { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--space-8); margin: 0; }
.s-recibes div { padding-top: var(--space-4); border-top: var(--trazo-fino) solid var(--tinta); }
.s-recibes dt { font: 500 18px/1.3 var(--font-sans); margin-bottom: var(--space-2); }
.s-recibes dd { margin: 0; font-size: 15px; color: var(--grafito); }
@media (max-width: 800px) { .s-recibes { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Ejemplo: imagen + texto corto */
.s-ejemplo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.s-ejemplo figure { margin: 0; min-width: 0; }
.s-ejemplo figcaption { font: 300 12px/1.45 var(--font-mono); color: var(--grafito); margin-top: var(--space-3); }
.s-ejemplo-texto p { max-width: 40ch; }
.s-ejemplo img { display: block; width: 100%; height: auto; background: var(--niebla); }
@media (max-width: 800px) { .s-ejemplo { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Aviso de una línea */
.s-aviso { display: flex; gap: var(--space-4); align-items: baseline; padding: var(--space-4) var(--space-6); background: var(--tierra-suave); color: var(--tinta); max-width: 70ch; }
.s-aviso strong { color: var(--tierra); font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; flex: none; }
.s-aviso p { margin: 0; }

/* Relacionados en línea */
.s-rel { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
.s-rel li { margin: 0; }
.s-rel a { color: var(--tinta); text-decoration: none; font-size: 17px; border-bottom: var(--trazo-fino) solid var(--linea); padding-bottom: 2px; }
.s-rel a:hover { border-color: var(--tinta); }
.s-rel a::after { content: " →"; color: var(--grafito); }

/* Hueco de imagen pendiente: recuadro de construcción con lo que irá */
.hueco { position: relative; margin: 0; width: 100%; max-width: 100%; aspect-ratio: var(--ar, 4 / 3); border: var(--trazo-fino) dashed var(--construccion); display: flex; align-items: center; justify-content: center; padding: var(--space-6);
  background: linear-gradient(to top right, transparent calc(50% - .5px), var(--linea) 50%, transparent calc(50% + .5px)), linear-gradient(to bottom right, transparent calc(50% - .5px), var(--linea) 50%, transparent calc(50% + .5px)); }
.hueco-texto { background: var(--papel); padding: var(--space-3) var(--space-4); max-width: 34ch; border: var(--trazo-fino) solid var(--linea); }
.hueco-texto .rotulo { color: var(--ocre); margin-bottom: var(--space-1); display: block; }
.hueco-texto p { margin: 0; font-size: 14px; line-height: 1.45; }

/* Dibujos técnicos en línea */
.dibujo-svg { display: block; width: 100%; height: auto; }

/* Mini animaciones */
.mini { width: 100%; max-width: 220px; height: auto; display: block; overflow: visible; }
.mini .t { fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mini-trazo 1.1s ease-out var(--d, 0s) forwards; }
.mini .t.fina { stroke-width: 1; }
.mini .c { fill: none; stroke: var(--construccion); stroke-width: 1; stroke-dasharray: 8 2 2 2; }
.mini .c-anim { fill: none; stroke: var(--construccion); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mini-trazo 1s ease-out var(--d, 0s) forwards; }
.mini .p { fill: var(--tinta); opacity: 0; animation: mini-aparece .3s ease-out var(--d, 0s) forwards; }
.mini .m { fill: none; stroke: var(--grafito); stroke-width: .6; opacity: 0; animation: mini-aparece .8s ease-out var(--d, 0s) forwards; }
.mini .f { fill: none; stroke: var(--grafito); stroke-width: 1; stroke-dasharray: 5 7; opacity: 0; animation: mini-aparece .6s ease-out var(--d, 0s) forwards, mini-flujo 3s linear infinite; }
@keyframes mini-trazo { to { stroke-dashoffset: 0; } }
@keyframes mini-aparece { to { opacity: 1; } }
@keyframes mini-flujo { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) {
  .mini .t, .mini .c-anim { animation: none; stroke-dashoffset: 0; }
  .mini .p, .mini .m, .mini .f { animation: none; opacity: 1; }
}

/* Portada: especialidades en dos columnas, sin números ni detalles */
.inicio-servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-12); }
.inicio-servicio { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; border-top: var(--trazo-fino) solid var(--linea); color: var(--tinta); text-decoration: none; align-items: start; }
.inicio-servicio .u3-simbolo { width: 36px; height: 36px; margin-top: 2px; }
.inicio-servicio strong { display: block; font: 500 20px/1.3 var(--font-sans); margin-bottom: var(--space-1); }
.inicio-servicio span { color: var(--grafito); font-size: 16px; }
.inicio-servicio:hover { color: var(--tinta); }
.inicio-servicio:hover strong { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .inicio-servicios { grid-template-columns: 1fr; } }
.datos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .datos-3 { grid-template-columns: 1fr; } .datos-3 .dato-celda + .dato-celda { padding-left: 0; border-left: 0; border-top: var(--trazo-fino) solid var(--linea); } }
.perfil-texto { font-size: 19px; line-height: 1.55; max-width: 52ch; margin-bottom: var(--space-8); }

/* Imágenes de proyecto: se oscurecen un poco al pasar por encima */
.proyecto-imagen img, img.project-card-image { transition: filter .25s ease; }
a:hover .proyecto-imagen img, a:focus-visible .proyecto-imagen img, .project-card-link:hover img.project-card-image, .project-card-link:focus-visible img.project-card-image { filter: brightness(.86); }
[data-theme="dark"] a:hover .proyecto-imagen img, [data-theme="dark"] .project-card-link:hover img.project-card-image { filter: brightness(.78); }

/* Páginas de lectura (guías, sobre mí) */
.l-cuerpo { max-width: 700px; }
.l-cuerpo > section { padding-top: var(--space-16); }
.l-cuerpo > section:first-child { padding-top: 0; }
.l-cuerpo h2 { font: 500 clamp(24px, 3vw, 30px)/1.15 var(--font-sans); letter-spacing: -0.015em; margin: 0 0 var(--space-6); }
.l-cuerpo h3 { font: 500 19px/1.3 var(--font-sans); margin: var(--space-8) 0 var(--space-3); }
.l-cuerpo p, .l-cuerpo li { max-width: 62ch; }
.l-pagina { padding-block: 0 var(--bloque); }
.resumen { border: var(--trazo-grueso) solid var(--tinta); padding: var(--space-6); margin: 0 0 var(--space-12); max-width: 700px; }
.resumen .rotulo { margin-bottom: var(--space-3); display: block; }
.resumen ul { margin: 0; padding-left: 1.1em; }
.resumen li { margin-bottom: var(--space-2); }
.resumen li:last-child { margin-bottom: 0; }
.l-indice { list-style: none; padding: 0; margin: 0 0 var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font: 400 12px/1.4 var(--font-mono); letter-spacing: .03em; }
.l-indice li { margin: 0; }
.l-indice a { color: var(--grafito); }
.plegable { border-top: var(--trazo-fino) solid var(--tinta); border-bottom: var(--trazo-fino) solid var(--linea); margin: var(--space-6) 0; }
.plegable summary { cursor: pointer; list-style: none; padding: var(--space-3) 32px var(--space-3) 0; font: 400 12px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; position: relative; }
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after { content: "+"; position: absolute; right: 4px; top: var(--space-3); font: 400 16px/1 var(--font-mono); color: var(--grafito); }
.plegable[open] summary::after { content: "−"; }
.plegable > div { padding-bottom: var(--space-4); }
.plegable .u3-tabla-caja { margin-top: 0; }

/* Línea de tiempo vertical (trayectoria, pasos de una guía) */
.linea-tiempo { list-style: none; padding: 0 !important; margin: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; border-left: var(--trazo-fino) solid var(--tinta); transform-origin: top; transition: transform 1.4s ease; }
.linea-tiempo li { position: relative; padding: 0 0 var(--space-6) var(--space-8); margin: 0; }
.linea-tiempo li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--tinta); }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo h3 { font: 500 18px/1.3 var(--font-sans); margin: 0 0 var(--space-1); }
.linea-tiempo p { margin: 0; color: var(--grafito); font-size: 16px; }
.linea-tiempo .rotulo { display: block; margin-bottom: var(--space-1); }
.js-anim .linea-tiempo:not(.en-vista)::before { transform: scaleY(0); }

/* Sobre mí: retrato junto al título */
.retrato { width: 100%; max-width: 280px; }

/* Contacto */
.c-rejilla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-16); padding-block: 0 var(--bloque); align-items: start; }
.c-rejilla .formulario { grid-template-columns: 1fr; }
.c-lado { display: flex; flex-direction: column; gap: var(--space-8); }
.c-lado h2 { font: 500 19px/1.3 var(--font-sans); margin: 0 0 var(--space-3); }
.c-lado ul { margin: 0; padding-left: 1.1em; }
.c-correo { font-family: var(--font-mono); font-size: 15px; user-select: all; }
@media (max-width: 900px) { .c-rejilla { grid-template-columns: 1fr; gap: var(--space-12); } }

/* Casos: resumen en tres celdas */
.caso-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); padding-block: var(--space-12); border-bottom: var(--trazo-fino) solid var(--linea); }
.caso-resumen div { padding-top: var(--space-3); border-top: var(--trazo-grueso) solid var(--tinta); }
.caso-resumen .rotulo { display: block; margin-bottom: var(--space-2); }
.caso-resumen p { margin: 0; font-size: 17px; }
@media (max-width: 800px) { .caso-resumen { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- Ajustes tras la revisión del 15/10/2026 ---------- */
/* Cabecera: el botón de tema queda fuera del menú también en móvil */
.cabecera-fila .nav { margin-left: auto; }
.cabecera-acciones { display: flex; align-items: center; gap: var(--space-3); }
@media (max-width: 1060px) { .cabecera-acciones { margin-left: auto; } }

/* Botón de la banda invertida: legible al pasar por encima en los dos temas */
.banda-invertida .u3-btn-primario:hover, .banda-invertida .u3-btn-primario:focus-visible { background: var(--sobre-tinta); color: var(--tinta); opacity: .85; }

/* Mini animación centrada en móvil */
@media (max-width: 760px) { .s-cabeza .mini { justify-self: center; } }

/* Qué recibes como lista (para no repetir siempre tres columnas) */
.s-lista { margin: 0; border-top: var(--trazo-fino) solid var(--tinta); max-width: 820px; }
.s-lista div { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-4) 0; border-bottom: var(--trazo-fino) solid var(--linea); align-items: baseline; }
.s-lista dt { font: 500 18px/1.35 var(--font-sans); }
.s-lista dd { margin: 0; color: var(--grafito); }
@media (max-width: 640px) { .s-lista div { grid-template-columns: 1fr; gap: var(--space-1); } }

/* Pasos con una rama en paralelo (dibujo en escritorio, lista en móvil) */
.pasos-grafo { width: 100%; height: auto; display: block; }
.pasos-grafo .g-l { fill: none; stroke: var(--tinta); stroke-width: 1; }
.pasos-grafo .g-n { fill: var(--tinta); }
.pasos-grafo .g-a { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.5; }
.pasos-grafo .g-t { fill: var(--tinta); font: 500 17px var(--font-sans); }
.pasos-grafo .g-s { fill: var(--grafito); font: 400 14px var(--font-sans); }
.pasos-grafo .g-r { fill: var(--grafito); font: 400 11px var(--font-mono); letter-spacing: .05em; }
.pasos-grafo-lista { display: none; }
@media (max-width: 800px) { .pasos-grafo { display: none; } .pasos-grafo-lista { display: grid; } }

/* Dos imágenes que se alternan (modelo 3D y su plano) */
.alterna { position: relative; margin: 0; display: grid; }
.alterna > * { grid-area: 1 / 1; }
.alterna .alt-b { animation: alterna 9s ease-in-out infinite; background: var(--papel); }
@keyframes alterna { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
.alterna-pie { font: 300 12px/1.45 var(--font-mono); color: var(--grafito); margin-top: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .alterna .alt-b { animation: none; opacity: 0; } }

/* Carátulas de proyecto: formato único 4:3, fondo del tema, la pieza llena el encuadre */
.proyecto-imagen.caratula img { object-fit: contain; padding: 0; background: var(--niebla); }

/* Guías: columna de lectura centrada */
.l-centrada .s-cabeza, .l-centrada .l-pagina, .l-centrada > .banda, .l-centrada > .l-rel { max-width: 780px; margin-inline: auto; }
.l-centrada .s-cabeza { grid-template-columns: minmax(0, 1fr) 140px; }
.l-centrada .s-cabeza .mini { max-width: 140px; }

/* Casos: dato de contexto bajo el resumen */
.caso-dato { font: 400 12px/1.5 var(--font-mono); letter-spacing: .03em; color: var(--grafito); padding-top: var(--space-4); }

/* 404 */
.error-numero { font: 500 clamp(110px, 22vw, 220px)/.9 var(--font-sans); letter-spacing: -.05em; margin: 0; color: var(--tinta); }
.error-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--space-12); align-items: center; }
.error-anim { width: 100%; height: auto; display: block; }
.error-anim .e-l { fill: none; stroke: var(--tinta); stroke-width: 1.6; }
.error-anim .e-f { fill: none; stroke: var(--tinta); stroke-width: 1; }
.error-anim .e-c { fill: none; stroke: var(--construccion); stroke-width: 1; stroke-dasharray: 8 2 2 2; }
.error-anim .e-p { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.6; }
.error-anim .e-texto { fill: var(--tinta); font: 400 14px var(--font-mono); }
.error-anim .pasador { animation: pasador 5s ease-in-out infinite; transform-box: fill-box; }
.error-anim .globo { animation: globo 5s ease-in-out infinite; }
@keyframes pasador { 0%, 25% { transform: translate(0, 0) rotate(0); } 45% { transform: translate(60px, 70px) rotate(25deg); } 55%, 75% { transform: translate(60px, 70px) rotate(25deg); } 95%, 100% { transform: translate(0, 0) rotate(0); } }
@keyframes globo { 0%, 35% { opacity: 0; } 45%, 75% { opacity: 1; } 85%, 100% { opacity: 0; } }
@media (max-width: 760px) { .error-rejilla { grid-template-columns: 1fr; } .error-anim { max-width: 300px; } }
@media (prefers-reduced-motion: reduce) { .error-anim .pasador, .error-anim .globo { animation: none; } }

/* Secuencia de imágenes que se alternan (modelo → plano, modelo → malla → resultado) */
.secuencia { margin: 0; --sec-t: 10s; }
.secuencia.sec-3 { --sec-t: 13.5s; }
.sec-marco { position: relative; width: 100%; max-width: 100%; background: var(--niebla); overflow: hidden; }
.sec-capa { position: absolute; inset: 0; padding: 4%; animation: sec-2 var(--sec-t) ease-in-out infinite; }
.sec-3 .sec-capa { animation-name: sec-3; }
.sec-capa img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sec-capa .dibujo { width: 100%; }
.sec-etiquetas { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; gap: var(--space-2) var(--space-6); flex-wrap: wrap; font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.sec-etiquetas li { margin: 0; animation: sec-2-rot var(--sec-t) ease-in-out infinite; }
.sec-3 .sec-etiquetas li { animation-name: sec-3-rot; }
.secuencia figcaption { font: 300 12px/1.45 var(--font-mono); color: var(--grafito); margin-top: var(--space-2); }
@keyframes sec-2 { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sec-3 { 0%, 29% { opacity: 1; } 34%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sec-2-rot { 0%, 44% { color: var(--tinta); } 50%, 94% { color: var(--construccion); } 100% { color: var(--tinta); } }
@keyframes sec-3-rot { 0%, 29% { color: var(--tinta); } 34%, 95% { color: var(--construccion); } 100% { color: var(--tinta); } }
@media (prefers-reduced-motion: reduce) {
  .sec-capa, .sec-etiquetas li { animation: none; }
  .sec-capa:not(:last-child) { opacity: 0; }
}
.leyenda-tension { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grafito); }
.leyenda-tension i { flex: 0 1 180px; height: 8px; background: linear-gradient(90deg, rgb(186, 183, 176), rgb(138, 40, 14)); }

/* Certificaciones */
.certificaciones { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-4); }
.certificaciones li { margin: 0; }
.certificaciones img { width: 100%; height: auto; display: block; }
.certificaciones .destacada { grid-column: span 2; grid-row: span 2; }

.retrato img { width: 100%; height: auto; display: block; }
.sec-capa.sec-foto { padding: 0; }
.sec-capa.sec-foto img { object-fit: cover; }
.certificaciones { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 560px) { .certificaciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } .certificaciones .destacada { grid-column: span 3; grid-row: auto; max-width: 180px; } }
.certificaciones img, .s-ejemplo .certificaciones img { background: transparent; }
/* Revisión 16/10: rótulos de la secuencia más legibles y retrato más grande */
.sec-etiquetas, .leyenda-tension { font-size: 13px; }
.secuencia figcaption, .s-ejemplo figcaption { font-size: 13.5px; }
.s-cabeza:has(.retrato) { grid-template-columns: minmax(0, 1fr) 340px; }
.retrato { max-width: 340px; }
@media (max-width: 760px) { .s-cabeza:has(.retrato) { grid-template-columns: 1fr; } .retrato { max-width: 260px; } }