/* Base común del sitio de Lucas Gorodneff.
   Estilo Eclipse (30 de octubre de 2026), el de los videos e interactivos de la productora: papel crema con el grano
   de una risografía, tinta casi negra, filetes de tinta de 1,5 px, discos amarillo y celeste que se cruzan en verde,
   varias tintas como en particle.ai, esquinas casi rectas, sombras rayadas, Fraunces para los títulos, Space Mono para los rótulos y Urbanist para el texto y los controles.
   Las piezas propias del estilo (discos, sombra rayada, portadas) están en §20.
   Índice: 1 fuentes · 2 tokens · 3 base · 4 tipografía · 5 maquetación · 6 cabecera y navegación · 7 pie ·
   8 botones y enlaces · 9 píldoras y selector segmentado · 10 tarjetas · 11 banda y módulo · 12 reproductor y visor ·
   13 pasos y avisos · 14 formulario y contacto · 15 utilidades · 16 pantallas táctiles · 17 movimiento ·
   18 colores forzados · 19 impresión · 20 Eclipse */

/* 1. Fuentes. Se sirven desde el propio sitio: ninguna petición a terceros. */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fuentes/urbanist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fuentes/urbanist-latin-wght-normal.woff2") format("woff2");
  /* Sin U+2122: el ™ de Urbanist va a tamaño de mayúscula y «Moodle™» se leía «MoodleTM»; lo da la cara siguiente */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ™, º y ª: Urbanist los dibuja a tamaño de letra, sobre la línea de base («MoodleTM», «N.o 7»). Se toman de
   Source Serif 4, pequeños y altos. Va después de las caras de Urbanist para tener prioridad en esos caracteres. */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fuentes/sourceserif4-normal-400_700.woff2") format("woff2");
  unicode-range: U+00AA, U+00BA, U+2122;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fuentes/sourceserif4-normal-400_700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fuentes/sourceserif4-italic-400_700.woff2") format("woff2");
}

/* Fraunces (títulos) y Space Mono (rótulos), las letras de Eclipse. Licencia OFL, en assets/fuentes/. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fuentes/fraunces-latin-full-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fuentes/fraunces-latin-ext-full-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/space-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/space-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/space-mono-latin-700-normal.woff2") format("woff2");
}

/* 2. Tokens. Tema claro por defecto; el oscuro se aplica con la preferencia del sistema si no hay elección
   (data-theme) y con data-theme="dark" cuando se elige a mano. */
:root {
  /* Papel crema y tinta. --papel-claro es la tarjeta, un poco más clara que el papel. Contraste sobre --bg: --ink
     16,4:1, --ink-2 9:1, --muted 5,7:1, --accent 5:1 (foco y detalles, azul), --accent-ink 6,6:1 (texto), --control 3,3:1 */
  --bg: #f7f5e4;
  --surface: #efecd6;
  --surface-2: #e6e2c9;
  --papel-claro: #fcfbf3;
  --ink: #171715;
  --ink-2: #45433b;
  --muted: #63605a;
  --rule: #d6d1ba;
  --track: #dcd7bf;
  --control: #8a8676;
  --accent: #1a64d8;
  --accent-ink: #1552b3;
  --teal: #2d6a4f;
  --teal-ink: #24563f;
  --tint: #fbedaa;
  --seleccion: #f9dc6b;
  --velo: rgba(23, 23, 21, .72);
  /* Los discos: amarillo y celeste, y el verde donde se cruzan. Valen igual en los dos temas, porque cada disco es su
     propio fondo: lo que va encima de un disco va en --tinta, la tinta oscura de la risografía, también de noche. */
  --disco-a: #f7cc00;
  /* Tintas (30 de octubre de 2026, mirando particle.ai): sobre el papel crema, cada pieza lleva la suya. El eclipse
     cruza el amarillo con el celeste y donde se pisan sale el verde, como dos tintas de risografía superpuestas.
     --subraya es la raya de los enlaces y del menú: el azul, con 5:1 sobre el papel. */
  --disco-b: #38b2e8;
  --cruce: #3d9a1a;
  --tinta-azul: #1a64d8;
  --tinta-naranja: #e2650e;
  --tinta-turquesa: #12c9bd;
  --tinta-verde-oscuro: #0d5c1c;
  --subraya: var(--tinta-azul);
  --tinta: #171715;
  --linea: 1.5px;
  --grano: url("../img/grano-claro.webp?v=d6fd756a");
  /* Marca de la casilla elegida: trazo del color de fondo sobre el cuadro en --ink */
  --marca-casilla: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 12.5l4 4 8-9%27 fill=%27none%27 stroke=%27%23f7f5e4%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  /* Sin sombras difusas: lo que flota (el visor, el reproductor) lleva el filete de tinta */
  --shadow: 0 0 0 var(--linea) var(--ink);
  --shadow-sm: 0 0 0 var(--linea) var(--ink);
  --font-display: "Urbanist", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Urbanist", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-titular: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-rotulo: "Space Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-mono: "Space Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --measure: 40rem;
  --ancho: 72rem;
  --margen: clamp(16px, 4vw, 40px);
  /* Esquinas casi rectas (30 de octubre de 2026): con los filetes de tinta se leen como una lámina impresa. Las
     píldoras de 999px pasaron a este radio; solo quedan redondos los discos. */
  --radio: 2px;
  --radio-grande: 2px;
  --cabecera-alto: 64px;
  /* Movimiento: curvas y duraciones comunes. Entradas y salidas con --ease-out; movimientos en pantalla con
     --ease-in-out; paneles laterales con --ease-drawer. Color y borde al pasar el puntero: ease.
     --dur-pulsar: respuesta al pulsar; --dur-hover: paso del puntero; --dur-entrar: lo que aparece (fichas, menú,
     visor). No cambian con el tema. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-pulsar: 140ms;
  --dur-hover: 150ms;
  --dur-entrar: 200ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16150f; --surface: #1f1e17; --surface-2: #2a2920; --papel-claro: #1c1b14; --ink: #f2efdc; --ink-2: #cfcab3; --muted: #a8a390;
    --rule: #3a382d; --track: #3d3b30; --control: #77735f; --accent: #6ea6f5; --accent-ink: #8cb9f7;
    --teal: #5fbf8f; --teal-ink: #7fd4a8; --tint: #3a3112; --seleccion: #6b5600; --velo: rgba(0, 0, 0, .74);
    --grano: url("../img/grano-oscuro.webp?v=a6666569");
    --marca-casilla: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 12.5l4 4 8-9%27 fill=%27none%27 stroke=%27%2316150f%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16150f; --surface: #1f1e17; --surface-2: #2a2920; --papel-claro: #1c1b14; --ink: #f2efdc; --ink-2: #cfcab3; --muted: #a8a390;
  --rule: #3a382d; --track: #3d3b30; --control: #77735f; --accent: #6ea6f5; --accent-ink: #8cb9f7;
  --teal: #5fbf8f; --teal-ink: #7fd4a8; --tint: #3a3112; --seleccion: #6b5600; --velo: rgba(0, 0, 0, .74);
  --grano: url("../img/grano-oscuro.webp?v=a6666569");
  --marca-casilla: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M6 12.5l4 4 8-9%27 fill=%27none%27 stroke=%27%2316150f%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
/* Sin el destello azul del navegador al tocar: cada control responde con su propio :active. La propiedad se hereda.
   scrollbar-gutter: al bloquear el desplazamiento (menú abierto, visor) la barra no desaparece y nada se mueve 15 px */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--cabecera-alto) + 16px);
  scrollbar-gutter: stable;
}
/* Desplazamiento suave solo para los saltos dentro de la página que se piden con el ratón o el dedo. base.js marca
   <html data-entrada="puntero|teclado">: con el teclado, el enlace para saltar al contenido y el foco que pasa a un
   control fuera de la vista llegan al instante */
html[data-entrada="puntero"] { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--grano) 0 0 / 512px 512px, var(--bg);
  color: var(--ink);
  font: 450 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; display: block; }
main:focus { outline: none; }
[hidden] { display: none !important; }
p, ul, ol, dl, dd, figure, blockquote, h1, h2, h3, h4, h5, h6 { margin: 0; }
img, video { max-width: 100%; height: auto; }
img { border-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Sin el doble toque para ampliar sobre los controles: dos toques seguidos (Anterior y Siguiente, −1 y +1 vuelta)
   cuentan como dos pulsaciones. Con dos dedos se sigue ampliando. */
a, button, summary, label, input, select, textarea, [role="button"], [role="radio"], [role="tab"] { touch-action: manipulation; }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* Los :hover van solo con ratón: en una pantalla táctil se quedan pegados después de tocar. Cada uno lleva al lado su
   :active, que da la misma respuesta mientras se apoya el dedo o se pulsa. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--accent-ink); }
}
a:active { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--seleccion); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
code, kbd { font: 500 .9em/1.4 var(--font-mono); background: var(--surface); border-radius: 6px; padding: .1em .35em; }
.banda code, .modulo code { background: var(--bg); }
abbr[title] { text-decoration: underline dotted; }

/* 4. Tipografía */
h1, h2, h3, h4 { font-family: var(--font-titular); font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; color: var(--ink); text-wrap: balance; }
h1 { font-weight: 600; font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.5rem); line-height: 1.04; letter-spacing: -.03em; }
h2 { font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.35rem); line-height: 1.1; letter-spacing: -.024em; }
h3 { font-weight: 600; font-size: 1.24rem; line-height: 1.22; letter-spacing: -.012em; }
h4 { font-weight: 600; font-size: 1.06rem; line-height: 1.28; }
/* Dos niveles de título de página: .titular, con antetítulo, solo en la portada (inicio.css ajusta su tamaño); las
   páginas interiores llevan el h1 sin clase y sin antetítulo, todas del mismo tamaño */
.titular { font: 600 clamp(2.4rem, 1.5rem + 3.9vw, 4.4rem)/1.02 var(--font-titular); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; letter-spacing: -.034em; text-wrap: balance; max-width: 20ch; }
.antetitulo { display: flex; align-items: center; gap: 10px; font: 400 .78rem/1.3 var(--font-rotulo); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
/* el punto del antetítulo es un eclipse: el disco amarillo con la luna del color del papel encima y el filete de tinta */
.antetitulo::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 72% 30%, var(--bg) 0 46%, transparent 48%), var(--disco-a); box-shadow: inset 0 0 0 1.5px var(--ink); }
.entradilla { font: 400 clamp(1.12rem, 1rem + .6vw, 1.3rem)/1.5 var(--font-body); color: var(--ink-2); max-width: 38rem; text-wrap: pretty; }
.etiqueta { font: 400 .74rem/1.25 var(--font-rotulo); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.nota { font: 500 .88rem/1.55 var(--font-display); color: var(--muted); max-width: 44rem; }
.prosa { max-width: var(--measure); }
.prosa > * + * { margin-top: 1em; }
.prosa > h2 { margin-top: 1.9em; }
.prosa > h3 { margin-top: 1.6em; }
.prosa > h2 + *, .prosa > h3 + * { margin-top: .6em; }
.prosa ul, .prosa ol { padding-left: 1.25em; }
.prosa li + li { margin-top: .35em; }
.prosa li::marker { color: var(--muted); }
.prosa blockquote { padding-left: 1.1em; border-left: 3px solid var(--disco-a); color: var(--ink-2); font-style: italic; }
.medida { max-width: var(--measure); }

/* 5. Maquetación: contenedor de unos 72rem con márgenes laterales de 16 px o más, secciones y rejillas */
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.contenedor-estrecho { max-width: calc(48rem + 2 * var(--margen)); }
.seccion { padding-block: clamp(48px, 6vw, 80px); }
.seccion:not(.banda) + .seccion:not(.banda) { padding-top: 0; }
.seccion-cabecera { display: grid; gap: 12px; max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); }
.portada { padding-block: clamp(48px, 9vw, 112px) clamp(44px, 7vw, 88px); }
.portada-interior { display: grid; gap: clamp(18px, 2.4vw, 24px); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pila { display: grid; gap: var(--pila, 20px); align-content: start; min-width: 0; }
.rejilla { display: grid; gap: clamp(12px, 2vw, 20px); grid-template-columns: minmax(0, 1fr); }
/* Entre una tarjeta de muestra y la siguiente, más aire que dentro de cada una */
.rejilla:has(> .tarjeta-muestra) { row-gap: clamp(28px, 4vw, 40px); }
@media (min-width: 640px) {
  .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Con un número impar de tarjetas, tres por fila: con dos, la última se quedaría sola en su fila.
     Ninguna tarjeta se queda sola: .rejilla-3 es para 3, 5, 6 o 9 tarjetas; para 4 u 8, .rejilla-4 o .rejilla-2. */
  .rejilla-3:has(> :last-child:nth-child(odd)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dividida { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .dividida { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

/* 6. Cabecera fija y navegación */
.salto {
  position: absolute; left: 16px; top: -200px; z-index: 100;
  font: 700 .92rem/1 var(--font-display); color: var(--bg); background: var(--ink);
  padding: 14px 18px; border-radius: var(--radio); text-decoration: none;
}
.salto:focus, .salto:focus-visible { top: 12px; color: var(--bg); }
.cabecera-sitio { position: sticky; top: 0; z-index: 40; background: var(--grano) 0 0 / 512px 512px, var(--bg); border-bottom: var(--linea) solid var(--ink); }
.cabecera-interior { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: var(--cabecera-alto); }
.marca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 11px; align-items: center; padding-block: 8px; color: var(--ink); text-decoration: none; min-width: 0; }
.marca::before { content: ""; grid-row: span 2; width: 34px; height: 24px; background: var(--marca-eclipse) center / contain no-repeat; }
/* Solo anula el color de a:hover y a:active: pegado en una pantalla táctil no cambia nada */
.marca:hover, .marca:active { color: var(--ink); }
.marca-nombre { font: 600 1.14rem/1.1 var(--font-titular); font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; letter-spacing: -.008em; }
.marca-especialidad { font: 400 .7rem/1.25 var(--font-rotulo); letter-spacing: .02em; color: var(--muted); }
.navegacion ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.navegacion a:not(.boton) {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: var(--radio);
  font: 400 .82rem/1.1 var(--font-rotulo); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-decoration: none;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .navegacion a:not(.boton):hover { color: var(--ink); background: var(--surface); }
}
.navegacion a:not(.boton):active { color: var(--ink); background: var(--surface); }
.navegacion a[aria-current="page"]:not(.boton) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--subraya); text-decoration-thickness: 3px; text-underline-offset: 7px; }
/* En la barra ancha, la raya naranja se tiende de izquierda a derecha al pasar el puntero y se recoge hacia la derecha al
   salir (cambia el origen). La de la página actual queda tendida. En el menú del teléfono siguen el fondo y el subrayado. */
@media (min-width: 860px) {
  .navegacion a:not(.boton) { position: relative; }
  .navegacion a:not(.boton)::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--subraya);
    transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--dur-entrar) var(--ease-out);
  }
  .navegacion a[aria-current="page"]:not(.boton) { text-decoration: none; }
  .navegacion a[aria-current="page"]:not(.boton)::after { transform: none; }
}
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
  .navegacion a:not(.boton):hover { background: transparent; }
  .navegacion a:not(.boton):hover::after { transform: none; transform-origin: 0 50%; }
}
.navegacion .boton { margin-left: 8px; }
.menu-boton {
  display: none; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px 8px 16px;
  font: 400 .78rem/1 var(--font-rotulo); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--bg);
  border: var(--linea) solid var(--ink); border-radius: var(--radio); cursor: pointer;
  transition: border-color var(--dur-hover) ease, transform var(--dur-pulsar) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu-boton:hover { border-color: var(--ink); }
}
.menu-boton:active { border-color: var(--ink); }
.menu-boton:active:not(:focus-visible) { transform: scale(.97); }
.menu-icono { position: relative; width: 16px; height: 10px; flex: none; }
/* Las dos rayas parten del centro y se mueven solo con transform. Las listas de funciones coinciden (translateY y
   rotate) para que se interpolen una a una, como la flecha de las láminas en trabajos.css */
.menu-icono::before, .menu-icono::after { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-entrar) var(--ease-out); }
.menu-icono::before { transform: translateY(-4px) rotate(0deg); }
.menu-icono::after { transform: translateY(4px) rotate(0deg); }
.menu-boton[aria-expanded="true"] .menu-icono::before { transform: translateY(0) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-icono::after { transform: translateY(0) rotate(-45deg); }
/* La cabecera completa (marca y navegación) necesita unos 700 px con los márgenes: por debajo de 860 px pasa a un
   menú desplegable, con margen para el texto ampliado. El mismo corte está en base.js.
   El script del <head> cambia sin-js por js antes de pintar; si base.js no llega a ejecutarse, el mismo script
   devuelve sin-js al terminar de cargar el documento y la navegación se ve entera. */
@media (max-width: 859px) {
  /* Sin JavaScript, la navegación se ve entera debajo de la marca y la cabecera deja de ser fija */
  .sin-js .cabecera-sitio { position: static; }
  .sin-js .cabecera-interior { flex-wrap: wrap; padding-block: 8px; }
  .sin-js .navegacion { width: 100%; }
  .sin-js .navegacion ul { margin-left: -12px; }
  .sin-js .navegacion .boton { margin-left: 4px; }
  /* Con JavaScript, menú desplegable */
  .js .menu-boton { display: inline-flex; }
  /* .cabecera-interior es el contenedor: left y right 0 cubren todo el ancho, márgenes incluidos, y el 100 % de
     max-height es el alto de la barra. Con poca altura o el texto ampliado, el panel se desplaza por dentro. */
  .js .navegacion {
    display: none; position: absolute; inset: 100% 0 auto 0; z-index: 1;
    max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--margen) 20px; background: var(--grano) 0 0 / 512px 512px, var(--bg); border-bottom: var(--linea) solid var(--ink);
  }
  /* Entrada del menú: baja 6 px y se funde en 200 ms, a la vez que el velo. Se cierra al instante (al elegir un
     enlace, con Escape o al tocar fuera), así no hace falta animar display */
  .js .navegacion.abierta { display: block; transition: opacity var(--dur-entrar) var(--ease-out), transform var(--dur-entrar) var(--ease-out); }
  @starting-style { .js .navegacion.abierta { opacity: 0; transform: translateY(-6px); } }
  /* Velo sobre el resto de la página, justo debajo de la cabecera, mientras el menú está abierto;
     un toque en el velo cierra el menú. La página de detrás no se desplaza mientras tanto (la clase va en <html>). */
  .js.menu-abierto { overflow: hidden; }
  .js.menu-abierto .cabecera-sitio::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; height: 100dvh; background: var(--velo); transition: opacity var(--dur-entrar) var(--ease-out); }
  @starting-style { .js.menu-abierto .cabecera-sitio::before { opacity: 0; } }
  .js .navegacion ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .js .navegacion a:not(.boton) { min-height: 48px; padding-inline: 12px; margin-inline: -12px; font-size: .86rem; border-radius: var(--radio); }
  .js .navegacion .boton { margin: 10px 0 0; width: 100%; min-height: 48px; font-size: .86rem; }
}
/* Pantallas bajas (un móvil en horizontal): la cabecera deja de ser fija para no tapar media pantalla */
@media (max-height: 480px) {
  .cabecera-sitio { position: static; }
  html { scroll-padding-top: 16px; }
}

/* 7. Pie */
.pie-sitio { margin-top: auto; background: transparent; border-top: var(--linea) solid var(--ink); color: var(--ink-2); font: 500 .92rem/1.6 var(--font-display); padding-block: clamp(40px, 6vw, 64px) 28px; }
/* En el teléfono, «Páginas» e «Información legal» van una al lado de la otra debajo de la marca; desde 760 px, las
   tres en una fila */
.pie-interior { display: grid; gap: 24px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pie-marca { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .pie-interior { gap: 28px 40px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pie-marca { grid-column: auto; }
}
.pie-marca { display: grid; gap: 6px; align-content: start; }
.pie-marca .marca-nombre { color: var(--ink); }
.pie-sitio h2 { font: 400 .74rem/1.25 var(--font-rotulo); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pie-sitio ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie-sitio nav a, .pie-correo { display: inline-flex; align-items: center; min-height: 32px; }
.pie-sitio a { color: var(--ink); }
.pie-sitio nav a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .pie-sitio nav a:hover { text-decoration: underline; text-decoration-color: var(--subraya); text-decoration-thickness: 2px; }
}
.pie-sitio nav a:active, .pie-sitio nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); }
/* Aviso de marcas, en letra pequeña, a todo el ancho del pie */
.pie-marcas { grid-column: 1 / -1; max-width: 62rem; font: 500 .8rem/1.6 var(--font-display); color: var(--muted); text-wrap: pretty; }
.pie-marcas a { color: var(--ink-2); }
.pie-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .86rem; }
.pie-tema { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* 8. Botones y enlaces */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px;
  font: 400 .84rem/1.1 var(--font-rotulo); letter-spacing: .06em; text-transform: uppercase; text-align: center; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: transparent; border: var(--linea) solid var(--ink); border-radius: var(--radio); cursor: pointer;
  justify-self: start;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-pulsar) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { color: var(--ink); border-color: var(--ink); }
}
/* Al pulsar, el aspecto del paso del puntero y un encogido del 3 % que confirma la pulsación, también en el teléfono.
   Con el teclado (Espacio o Intro sobre un botón con :focus-visible) cambia el color pero no se encoge: lo que se hace
   con el teclado no se anima, como los filtros de trabajos.css. Los botones desactivados llevan pointer-events: none
   y no lo reciben. */
.boton:active { color: var(--ink); border-color: var(--ink); }
.boton:active:not(:focus-visible) { transform: scale(.97); }
/* Principal: un bloque del amarillo del disco con texto en --tinta (oscura en los dos temas) y una flecha que se
   adelanta 3 px al pasar el puntero, como la de .enlace-mas. El amarillo se oscurece un poco al pasar y al pulsar. */
.boton-principal { color: var(--tinta); background: var(--disco-a); border-color: var(--tinta); }
.boton-principal::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: 2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .boton-principal:hover { color: var(--tinta); background: color-mix(in srgb, var(--disco-a) 86%, var(--tinta)); border-color: var(--tinta); }
  .boton-principal:hover::after { transform: translateX(3px) rotate(45deg); }
}
.boton-principal:active { color: var(--tinta); background: color-mix(in srgb, var(--disco-a) 86%, var(--tinta)); border-color: var(--tinta); }
.boton-secundario { background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .boton-secundario:hover { background: color-mix(in srgb, var(--disco-a) 26%, transparent); }
}
.boton-secundario:active { background: color-mix(in srgb, var(--disco-a) 26%, transparent); }
.boton-pequeno { min-height: 36px; padding: 7px 14px; font-size: .76rem; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.boton[aria-busy="true"] { cursor: progress; }
.enlace-mas { display: inline-flex; justify-self: start; align-items: center; gap: 8px; min-height: 32px; font: 700 .92rem/1.2 var(--font-display); color: var(--ink); text-decoration: none; }
.enlace-mas::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .enlace-mas:hover { color: var(--accent-ink); }
  .enlace-mas:hover::after { transform: translateX(3px) rotate(45deg); }
}
.enlace-mas:active { color: var(--accent-ink); }

/* 9. Píldoras y selector segmentado */
.pildoras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* Etiquetas que no se pulsan: planas, en gris. Botones de filtro (button.pildora): con borde, para que se vea que se pulsan. */
.pildoras li, .pildora { display: inline-flex; align-items: center; font: 400 .74rem/1.2 var(--font-rotulo); letter-spacing: .04em; text-transform: uppercase; padding: 7px 10px; border-radius: var(--radio); background: var(--surface); color: var(--ink-2); }
.banda .pildoras li, .banda span.pildora, .modulo .pildoras li, .modulo span.pildora { background: var(--bg); }
.banda .tarjeta .pildoras li, .banda .modulo .pildoras li, .banda .tarjeta span.pildora, .banda .modulo span.pildora { background: var(--surface); }
button.pildora {
  min-height: 36px; border: 0; cursor: pointer; background: var(--bg); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--ink-2); transition: transform var(--dur-pulsar) var(--ease-out);
}
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radio); background: var(--papel-claro); border: var(--linea) solid var(--ink); justify-self: start; max-width: 100%; }
.segmentado button { min-height: 36px; font: 400 .76rem/1.1 var(--font-rotulo); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 0; border-radius: var(--radio); padding: 8px 14px; cursor: pointer; transition: transform var(--dur-pulsar) var(--ease-out); }
/* La opción elegida cambia al instante, como los filtros de trabajos.css: con las flechas se recorren seguidas y un
   fundido en cada una se haría lento. Solo se suaviza el paso del ratón. Al pulsar, el borde o el texto oscuros y el
   encogido de los botones. El estado elegido va el último: tiene la misma especificidad que :hover y :active, y su
   transición (solo transform) gana a la de :hover. */
@media (hover: hover) and (pointer: fine) {
  button.pildora:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transition: color var(--dur-hover) ease, box-shadow var(--dur-hover) ease, transform var(--dur-pulsar) var(--ease-out); }
  .segmentado button:hover { color: var(--ink); transition: color var(--dur-hover) ease, transform var(--dur-pulsar) var(--ease-out); }
}
button.pildora:active { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.segmentado button:active { color: var(--ink); }
button.pildora:active:not(:focus-visible), .segmentado button:active:not(:focus-visible) { transform: scale(.97); }
button.pildora[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: inset 0 0 0 1px var(--ink); transition: transform var(--dur-pulsar) var(--ease-out); }
.segmentado button[aria-checked="true"] { background: var(--ink); color: var(--bg); transition: transform var(--dur-pulsar) var(--ease-out); }
.segmentado-pequeno button { min-height: 30px; padding: 6px 10px; font-size: .7rem; }
.fila-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* Grupo «Versión» de los videos que tienen versión de España (base.js, «Versión de los videos»): la etiqueta y las dos
   opciones en una fila. En la barra del visor va a la derecha, junto a «Cerrar». */
.version-videos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.visor-version { margin-left: auto; }

/* 10. Tarjetas: de servicio y de muestra (con cartel 16:9) */
.tarjeta { position: relative; isolation: isolate; display: grid; gap: 10px; align-content: start; min-width: 0; padding: clamp(18px, 2.4vw, 24px); border-radius: var(--radio); }
.tarjeta h3 { font-size: 1.18rem; }
.tarjeta p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.tarjeta .pildoras { margin-top: 2px; }
.tarjeta .enlace-mas { justify-self: start; margin-top: 4px; }
.tarjeta-enlace { color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta-enlace:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--subraya); text-decoration-thickness: 2px; }
}
.tarjeta-enlace:active { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.tarjeta-enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta-enlace:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:has(.tarjeta-enlace:hover)::before { transform: translate(6px, 6px); }
}
.tarjeta:has(.tarjeta-enlace:active)::before { transform: translate(4px, 4px); }
/* Donde hay :has, el foco se marca en toda la tarjeta; sin :has, se queda el contorno del propio enlace */
@supports selector(:has(a)) {
  .tarjeta:has(.tarjeta-enlace:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .tarjeta .tarjeta-enlace:focus-visible { outline: none; }
}
/* Tarjeta de servicio: cartel, tipo, título, una línea de texto y enlace, que baja al pie para alinearse en la fila */
.tarjeta-servicio { display: flex; flex-direction: column; }
.tarjeta-servicio .cartel { margin-bottom: 4px; }
.tarjeta-servicio .enlace-mas { margin-top: auto; padding-top: 4px; align-self: flex-start; }
.tarjeta-tipo, .tarjeta .tarjeta-tipo { font: 400 .74rem/1.35 var(--font-rotulo); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.tarjeta-tipo + h3 { margin-top: -6px; }
/* Tarjeta destacada: el mismo tratamiento que el paso destacado (.pasos > li.destacado), fondo rosado y filete rojo */
.tarjeta-destacada, .banda .tarjeta-destacada { --fondo-tarjeta: var(--tint); }
.tarjeta-muestra { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; }
.cartel { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 var(--linea) var(--ink); }
.cartel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 250ms ease; }
/* Cartel sin imagen todavía: solo para maquetar; antes de publicar va una captura real */
.cartel-pendiente { display: grid; place-items: center; padding: 16px; text-align: center; font: 600 .84rem/1.4 var(--font-display); color: var(--muted); }
.cartel-etiqueta { position: absolute; left: 10px; bottom: 10px; font: 400 .7rem/1 var(--font-rotulo); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); background: var(--papel-claro); padding: 6px 9px; border-radius: var(--radio); box-shadow: 0 0 0 1px var(--ink); }
/* reproducir: un disco amarillo con filete y triángulo en --tinta, que se ve sobre cualquier cartel y en los dos temas */
.cartel-reproducir { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: var(--disco-a); box-shadow: 0 0 0 var(--linea) var(--tinta); overflow: hidden; isolation: isolate; }
.cartel-reproducir::before { content: ""; position: absolute; z-index: 1; left: 20px; top: 16px; border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent var(--tinta); }
/* El cruce: un disco verde espera fuera, a la derecha, y al apuntar a la muestra entra hasta cubrir un tercio del
   amarillo, como el celeste que se cruza con el amarillo en el eclipse. Solo transform, con ease-out: responde al puntero. */
.cartel-reproducir::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cruce); transform: translateX(101%); transition: transform 240ms var(--ease-out); }
/* El cartel crece un 2 % y el cruce entra solo con ratón: en una pantalla táctil el :hover se queda pegado después de
   tocar (la tarjeta abre el visor y, al cerrarlo, el cartel seguía ampliado). Con el dedo apoyado solo entra el cruce. */
@media (hover: hover) and (pointer: fine) {
  .tarjeta:has(.tarjeta-enlace:hover) .cartel img, .tarjeta-muestra:hover .cartel img { transform: scale(1.02); }
  .tarjeta-muestra:hover .cartel-reproducir::after { transform: translateX(34%); }
}
.tarjeta-muestra:has(h3 a:active) .cartel-reproducir::after { transform: translateX(34%); }
.tarjeta-muestra h3 { font-size: 1.08rem; line-height: 1.3; }
.tarjeta-muestra h3 a { color: var(--ink); text-decoration: none; }
.tarjeta-muestra h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.tarjeta-muestra:has(h3 a:focus-visible) .cartel { outline: 2px solid var(--accent); outline-offset: 3px; }
.tarjeta-muestra h3 a:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--accent); }
.tarjeta-meta { font: 500 .86rem/1.45 var(--font-display); color: var(--muted); }

/* 11. Banda gris de ancho completo y módulo (bloque gris redondeado) */
.banda { background: var(--grano) 0 0 / 512px 512px, var(--surface); border-block: var(--linea) solid var(--ink); }
.modulo { display: grid; gap: 18px; align-content: start; min-width: 0; padding: clamp(16px, 3.4vw, 28px); border-radius: var(--radio-grande); background: var(--grano) 0 0 / 512px 512px, var(--papel-claro); border: var(--linea) solid var(--ink); }
.modulo-titulo { font: 600 1.12rem/1.3 var(--font-titular); }
.pie-figura { font: 500 .86rem/1.55 var(--font-display); color: var(--muted); max-width: 44rem; }

/* 12. Reproductor de video y visor (<dialog>) */
.pantalla { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radio); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.pantalla video, .pantalla img, .pantalla iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; }
.pantalla img { object-fit: cover; }
/* El video se ve entero, también a pantalla completa en pantallas que no son 16:9 */
.pantalla video { object-fit: contain; }
video:fullscreen { background: #000; object-fit: contain; }
video:-webkit-full-screen { background: #000; object-fit: contain; }
dialog.visor { width: min(96vw, 68rem); max-width: 96vw; max-height: 94vh; max-height: 94dvh; padding: 0; border: 0; border-radius: var(--radio-grande); background: var(--bg); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
/* Entrada del visor: fundido y escala desde .96 en 200 ms, centrado (es un modal: no sale de la tarjeta), con el velo
   a la vez. La salida no se anima: se cierra con Escape, «Cerrar» o el velo, y base.js vacía el cuerpo en el evento
   close (una salida animada lo mostraría encogerse vacío). Anterior y Siguiente no repiten la entrada: el diálogo ya
   está abierto. Va con fotogramas clave y no con @starting-style: trabajos.css cambia el display del diálogo justo
   después de abrirlo, y si eso ocurre durante la carga (trabajos.html?muestra=…) Chrome cancela las transiciones. */
dialog.visor[open] { display: flex; flex-direction: column; animation: visor-entra var(--dur-entrar) var(--ease-out); }
dialog.visor::backdrop { background: var(--velo); }
dialog.visor[open]::backdrop { animation: funde var(--dur-entrar) var(--ease-out); }
@keyframes visor-entra { from { opacity: 0; transform: scale(.96); } }
@keyframes funde { from { opacity: 0; } }
/* Mientras el visor está abierto, la página de detrás no se desplaza con la rueda ni con el dedo sobre el velo */
html:has(dialog.visor[open]) { overflow: hidden; }
.visor-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: var(--linea) solid var(--ink); }
.visor-titulo { font: 600 1.02rem/1.3 var(--font-titular); min-width: 0; }
.visor-cuerpo { min-height: 0; overflow: auto; background: var(--surface); }
.visor-cuerpo video { display: block; width: 100%; max-height: calc(94vh - 62px); max-height: calc(94dvh - 62px); background: #000; object-fit: contain; }
.visor-cuerpo iframe { display: block; width: 100%; height: min(calc(94vh - 62px), 820px); height: min(calc(94dvh - 62px), 820px); border: 0; background: #fff; }
.visor-cuerpo img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
dialog.visor[data-tipo="imagen"] { width: auto; max-width: min(96vw, 68rem); }
/* Teléfono en vertical o en horizontal: el visor ocupa toda la pantalla. El mismo corte que trabajos.css y trabajos.js */
@media (max-width: 600px), (max-height: 500px) {
  dialog.visor { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.visor[data-tipo="imagen"] { width: 100vw; max-width: 100vw; }
  .visor-cuerpo { flex: 1; }
  .visor-cuerpo video { max-height: calc(100dvh - 62px); }
  .visor-cuerpo iframe { height: calc(100dvh - 62px); }
  /* El video queda centrado en vertical sobre negro, sin un hueco debajo */
  dialog.visor[data-tipo="video"] .visor-cuerpo { display: flex; flex-direction: column; justify-content: center; background: #000; }
  /* A pantalla completa el visor sube 16 px en lugar de crecer */
  dialog.visor[open] { animation-name: visor-sube; }
}
@keyframes visor-sube { from { opacity: 0; transform: translateY(16px); } }

/* 13. Pasos numerados y avisos. No hay bloque de cifras sueltas: las cifras van dentro del texto. */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); counter-reset: paso; }
@media (min-width: 560px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pasos-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pasos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pasos > li { counter-increment: paso; display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--radio); background: var(--grano) 0 0 / 512px 512px, var(--papel-claro); border: var(--linea) solid var(--ink); }
/* El número va en rótulo («01») sobre un filete, como las secciones numeradas de una ficha técnica. Cada paso lleva
   arriba una franja de otra tinta, como las series de un gráfico. */
.pasos > li::before { content: counter(paso, decimal-leading-zero); display: block; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
  font: 400 .78rem/1 var(--font-rotulo); letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pasos > li { box-shadow: inset 0 5px 0 var(--disco-a); }
.pasos > li:nth-child(4n + 2) { box-shadow: inset 0 5px 0 var(--disco-b); }
.pasos > li:nth-child(4n + 3) { box-shadow: inset 0 5px 0 var(--cruce); }
.pasos > li:nth-child(4n + 4) { box-shadow: inset 0 5px 0 var(--tinta-naranja); }
.pasos b, .pasos strong { font: 600 1.1rem/1.3 var(--font-titular); color: var(--ink); }
.pasos li > span, .pasos li > p { font: 500 .92rem/1.5 var(--font-display); color: var(--ink-2); }
.aviso { display: grid; gap: 4px; align-content: start; padding: 14px 18px; border-radius: var(--radio); background: var(--surface); border: 1px solid var(--ink-2); font: 500 .94rem/1.55 var(--font-display); color: var(--ink-2); max-width: 46rem; }
.banda .aviso, .formulario .aviso { background: var(--bg); }
.banda .formulario .aviso { background: var(--surface); }
.aviso-titulo { display: flex; align-items: center; gap: 9px; font: 700 .96rem/1.35 var(--font-display); color: var(--ink); }
.aviso-titulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
/* Importante: el fondo de siempre y el punto rojo. Error: fondo rosa, punto rojo y título en rojo para texto. */
.aviso-importante .aviso-titulo::before, .aviso-error .aviso-titulo::before { background: var(--accent); }
.aviso-error, .banda .aviso-error, .formulario .aviso-error, .banda .formulario .aviso-error { background: var(--tint); }
.aviso-error .aviso-titulo { color: var(--accent-ink); }
.aviso-exito .aviso-titulo::before { background: var(--teal); }
.aviso a { color: var(--ink); }

/* 14. Formulario y bloque de contacto */
.contacto { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .contacto { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.contacto-texto { display: grid; gap: 16px; align-content: start; }
.contacto-vias { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.contacto-vias li { display: grid; gap: 4px; justify-items: start; }
.contacto-vias a:not(.boton) { display: inline-flex; align-items: center; min-height: 24px; font: 700 1.08rem/1.3 var(--font-display); overflow-wrap: anywhere; }
.formulario { --hueco-formulario: 18px; display: grid; gap: var(--hueco-formulario); align-content: start; min-width: 0; padding: clamp(18px, 3.4vw, 28px); border-radius: var(--radio-grande); background: var(--grano) 0 0 / 512px 512px, var(--papel-claro); border: var(--linea) solid var(--ink); }
.campos-2 { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.campo > label, .campo-etiqueta { font: 700 .92rem/1.3 var(--font-display); color: var(--ink); }
.campo .opcional { font-weight: 500; color: var(--muted); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--radio);
  font: 500 1rem/1.4 var(--font-display); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--control); transition: border-color var(--dur-hover) ease;
}
.campo textarea { min-height: 9.5rem; resize: vertical; line-height: 1.5; }
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--ink-2); }
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--ink); outline: 2px solid var(--accent); outline-offset: 1px; }
.campo [aria-invalid="true"] { border-color: var(--accent-ink); }
.campo-ayuda { font: 500 .86rem/1.45 var(--font-display); color: var(--muted); }
.campo-error { font: 700 .86rem/1.45 var(--font-display); color: var(--accent-ink); }
.casilla { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font: 500 .92rem/1.5 var(--font-display); color: var(--ink-2); }
/* Casilla propia: el cuadro con borde de campo y, elegida, relleno en --ink con la marca del color de fondo */
.casilla input {
  appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
  border: 1.5px solid var(--control); border-radius: 4px; cursor: pointer;
  background: var(--bg) center / 18px 18px no-repeat; transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .casilla input:hover { border-color: var(--ink-2); }
}
.casilla input:checked { background-color: var(--ink); background-image: var(--marca-casilla); border-color: var(--ink); }
.casilla label { cursor: pointer; }
.casilla .campo-error { grid-column: 2; }
.casilla input[aria-invalid="true"] { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink); }
.casilla input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
/* Primera capa de protección de datos, debajo del botón: letra legible, sin casilla */
.formulario-privacidad { font: 500 .86rem/1.6 var(--font-display); color: var(--ink-2); max-width: 46rem; text-wrap: pretty; }
.formulario-privacidad strong { font-weight: 700; color: var(--ink); }
.formulario-privacidad a { color: var(--ink); }
/* La región de estado sigue en el árbol de accesibilidad aunque esté vacía, para que se anuncie su primer mensaje;
   el margen negativo quita el hueco de la rejilla mientras no tiene nada */
.formulario-estado:empty { margin-top: calc(-1 * var(--hueco-formulario)); }

/* 15. Utilidades */
.oculto-visual { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sin-js .solo-js { display: none !important; }
.js .solo-sin-js { display: none !important; }
.cifra-tabular { font-variant-numeric: tabular-nums; }
.tabla-envoltura { overflow-x: auto; max-width: 100%; }
.tabla { width: 100%; border-collapse: collapse; font: 500 .92rem/1.45 var(--font-display); }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tabla th { font-weight: 700; color: var(--muted); font-size: .8rem; }

/* 16. Pantallas táctiles: una pulsación larga sobre un botón no selecciona su texto (los enlaces conservan su menú) y
   los controles pequeños llegan a 44 px de alto */
.boton, .segmentado button, button.pildora, .menu-boton { -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) {
  .segmentado-pequeno button, .boton-pequeno, .pie-sitio nav a, .pie-correo, a.enlace-mas, .contacto-vias a:not(.boton) { min-height: 44px; }
}

/* 17. Movimiento: solo entradas cortas que parten de un estado visible. Curvas y duraciones en los tokens de §2.
   .cambia: lo que cambia al elegir con el ratón o el dedo (fichas, paneles, listas); con el teclado no se pone. */
/* .entra: la entrada de la portada de inicio. 500 ms y 50 ms entre piezas: termina a los 650 ms. La cabecera de las
   páginas interiores entra igual, pieza por pieza, sin clases en el HTML. */
.entra, .portada-interior > * { animation: entra 500ms var(--ease-out) both; }
.entra:nth-child(2), .portada-interior > :nth-child(2) { animation-delay: 50ms; }
.entra:nth-child(3), .portada-interior > :nth-child(3) { animation-delay: 100ms; }
.entra:nth-child(4), .portada-interior > :nth-child(4) { animation-delay: 150ms; }
.cambia { animation: aparece var(--dur-entrar) var(--ease-out) both; }
/* .revela: lo que queda por debajo de la pantalla al cargar (cabeceras de sección, tarjetas, pasos, módulos) sube
   12 px y aparece la primera vez que entra en la pantalla. Lo pone base.js («Revelado»), así que sin JavaScript todo
   se ve quieto. Lo que entra a la vez se escalona 60 ms, hasta seis piezas (300 ms). Al terminar, base.js quita las
   dos clases y cada pieza recupera sus propias transiciones. Con el teclado no se espera: el foco lo muestra al
   instante (.al-instante). */
.js-listo .revela:not(.visto) { opacity: 0; transform: translateY(12px); }
.js-listo .revela.visto { transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js-listo .revela.al-instante { transition: none; }
@keyframes entra { from { opacity: .15; transform: translateY(8px); } }
@keyframes aparece { from { opacity: .4; transform: translateY(4px); } }
/* Al cambiar de tema, todo cambia de color a la vez: base.js pone esta clase en <html> durante un cuadro */
.cambiando-tema *, .cambiando-tema *::before, .cambiando-tema *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html, html[data-entrada="puntero"] { scroll-behavior: auto; }
  /* Movimiento reducido no es movimiento cero: se quitan desplazamientos, escalas y giros, y se quedan los cambios
     de color y los fundidos cortos, que ayudan a ver qué cambió. Las transiciones de transform, tamaño o posición de
     cualquier hoja pasan al instante; el visor y el menú entran solo con el fundido. */
  *, *::before, *::after {
    transition-property: color, background-color, border-color, box-shadow, outline-color, text-decoration-color, opacity, visibility !important;
  }
  .entra, .portada-interior > * { animation: none; }
  .cambia { animation: aparece-quieto var(--dur-hover) ease both; }
  /* lo que se revela al desplazar solo aparece, sin subir */
  .js-listo .revela:not(.visto) { transform: none; }
  .js-listo .revela.visto { transition: opacity 200ms ease; transition-delay: calc(var(--i, 0) * 30ms); }
  dialog.visor[open] { animation-name: funde; }
  .tarjeta:has(.tarjeta-enlace:hover) .cartel img, .tarjeta-muestra:hover .cartel img { transform: none; }
  .enlace-mas:hover::after { transform: rotate(45deg); }
  .boton:active:not(:focus-visible), .menu-boton:active:not(:focus-visible), button.pildora:active:not(:focus-visible),
  .segmentado button:active:not(:focus-visible) { transform: none; }
  /* Las opciones de los selectores solo tenían la transición del encogido. La regla de arriba la convertiría en un
     fundido de color de 140 ms al elegir, también con las flechas: aquí cambian al instante, como los filtros de
     trabajos.css. El paso del ratón (más específico) conserva su fundido. */
  button.pildora, button.pildora[aria-pressed="true"], .segmentado button, .segmentado button[aria-checked="true"] { transition-duration: 0s; }
}
@keyframes aparece-quieto { from { opacity: .4; } }

/* 18. Colores forzados (alto contraste de Windows): el fondo de las opciones elegidas, las sombras y los degradados
   desaparecen, así que el estado y los iconos se marcan con colores del sistema y bordes */
@media (forced-colors: active) {
  .segmentado button, button.pildora { border: 1px solid ButtonText; }
  .segmentado button[aria-checked="true"], button.pildora[aria-pressed="true"] {
    forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; border-color: SelectedItem;
  }
  .menu-icono::before, .menu-icono::after { forced-color-adjust: none; background: ButtonText; }
  .campo select { appearance: auto; -webkit-appearance: menulist; background-image: none; padding-right: 14px; }
  .casilla input { appearance: auto; -webkit-appearance: checkbox; border: revert; background: revert; }
  .tarjeta-destacada, .pasos > li.destacado { border: 2px solid CanvasText; }
  .cartel-reproducir { border: 2px solid CanvasText; }
  /* la raya de la barra es un fondo, que aquí desaparece: la página actual vuelve al subrayado */
  .navegacion a:not(.boton)::after { display: none; }
  .navegacion a[aria-current="page"]:not(.boton) { text-decoration: underline; }
}

/* 19. Impresión: tinta negra sobre blanco, sin navegación ni controles; los enlaces externos muestran su dirección.
   :root:not(#_) tiene más especificidad que las reglas del tema oscuro, para imprimir siempre en claro. */
@media print {
  :root:not(#_) {
    --bg: #fff; --surface: #fff; --surface-2: #fff; --ink: #000; --ink-2: #222; --muted: #555; --rule: #bbb;
    --tint: #fff; --shadow: none; --shadow-sm: none; --papel-claro: #fff; --grano: none; color-scheme: light;
  }
  body { font-size: 11pt; line-height: 1.5; }
  .cabecera-sitio, .menu-boton, .salto, .pie-tema, .formulario, .cartel-reproducir, dialog, video, iframe, .solo-pantalla { display: none !important; }
  .seccion, .portada { padding-block: 18pt; }
  /* en papel no hay desplazamiento: lo que esperaba a revelarse se imprime */
  .js-listo .revela { opacity: 1 !important; transform: none !important; }
  .banda, .modulo, .tarjeta, .pasos > li, .aviso, .pie-sitio { background: none !important; box-shadow: none !important; border: 1px solid var(--rule); }
  .pie-sitio { border-width: 1px 0 0; }
  a { color: #000; text-decoration-color: #000; }
  a[href^="http"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; overflow-wrap: anywhere; }
  .tarjeta-enlace::after, .tarjeta-muestra h3 a::after { content: none !important; }
  h1, h2, h3 { break-after: avoid; }
  .tarjeta, .tarjeta-muestra, figure, .pasos > li { break-inside: avoid; }
  .contenedor { max-width: none; padding-inline: 0; }
}

/* 20. Eclipse: las piezas propias del estilo. Los colores salen de los tokens de §2, así que siguen el tema.
   Movimiento según Emil Kowalski y base/movimiento.md de la productora: ease-out fuerte, solo transform y opacity,
   nada sale de tamaño cero, y al cargar solo se mueve la cabecera de cada página. */
:root {
  /* la marca: dos discos, amarillo y celeste, que se cruzan en verde (el cruce es un arco de cada disco: un clip-path
     con url() dentro del SVG lo tomaría construye.py por un enlace) */
  --marca-eclipse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Ccircle cx='11' cy='12' r='10.5' fill='%23f7cc00'/%3E%3Ccircle cx='23' cy='12' r='10.5' fill='%2338b2e8'/%3E%3Cpath d='M17 3.38A10.5 10.5 0 0 1 17 20.62A10.5 10.5 0 0 1 17 3.38Z' fill='%233d9a1a'/%3E%3C/svg%3E");
  --rayas: repeating-linear-gradient(-45deg, var(--ink) 0 1.5px, transparent 1.5px 6px);
}

/* Tarjeta: la cara (::after, papel claro con filete) tapa la sombra rayada (::before). Al pasar el puntero por una
   tarjeta con enlace, la sombra se corre 6 px hacia abajo a la derecha, como una plancha mal registrada (§10). */
.tarjeta::before, .tarjeta::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.tarjeta::before { background: var(--rayas); transition: transform var(--dur-entrar) var(--ease-out); }
.tarjeta::after { background: var(--fondo-tarjeta, var(--papel-claro)); border: var(--linea) solid var(--ink); }

/* Una palabra subrayada con el amarillo del disco, como el título de los videos. Por debajo de la línea de base, para
   que el texto no quede encima del amarillo en el tema oscuro. Es una raya aparte (::after), para que en la portada
   pueda tenderse de izquierda a derecha cuando el título ya llegó; por eso solo sirve para frases de una línea
   («a&nbsp;medida»). */
.resalta { position: relative; }
.resalta::after { content: ""; position: absolute; left: 0; right: 0; top: 1.06em; height: .16em; background: var(--disco-a); transform-origin: 0 50%; pointer-events: none; }
.portada .resalta::after { animation: tiende 640ms var(--ease-out) 480ms both; }
@keyframes tiende { from { transform: scaleX(0); } }

/* Portada de las páginas interiores (2 de noviembre de 2026): a la derecha, un campo de color a sangre, de la cabecera
   al filete de abajo, como los carteles de las entradas del blog de particle.ai, con el grano de risografía y el
   eclipse de la marca encima. Cada página elige su tinta (.arte-azul, .arte-naranja, .arte-verde). En pantallas
   estrechas el campo es una banda de 104 px al pie de la portada, con el eclipse pequeño a la derecha.
   --campo-x: dónde empieza el campo, al 62 % del ancho del contenido (los % son del ancho de la portada). */
.portada { position: relative; }
main > .portada:not(.portada-inicio, .pagina-contacto, .portada-legal) {
  --campo: var(--tinta-naranja);
  overflow: hidden; border-bottom: 1px solid var(--ink);
  padding-bottom: calc(clamp(44px, 7vw, 88px) + 104px);
}
main > .portada.arte-azul { --campo: var(--tinta-azul); }
main > .portada.arte-verde { --campo: var(--cruce); }
main > .portada:not(.portada-inicio, .pagina-contacto, .portada-legal)::before {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 104px; border-top: 1px solid var(--ink);
  background:
    url("../img/grano-tinta.webp?v=b42be2f6") 0 0 / 256px 256px,
    linear-gradient(to bottom, transparent 0 74%, var(--tinta) 74% 78%, var(--disco-a) 78% 86%, transparent 86%),
    var(--campo);
}
main > .portada:not(.portada-inicio, .pagina-contacto, .portada-legal)::after {
  content: ""; position: absolute; z-index: 0; right: var(--margen); bottom: 10px; height: 84px; aspect-ratio: 760 / 520;
  background: url("../img/eclipse-portada-claro.svg?v=40459cbb") center / contain no-repeat;
  animation: ecl-portada 640ms var(--ease-out) 120ms both;
}
main > .portada:not(.portada-inicio, .pagina-contacto, .portada-legal) .portada-interior { position: relative; z-index: 1; }
@media (min-width: 1000px) {
  main > .portada:not(.portada-inicio, .pagina-contacto, .portada-legal) {
    --campo-x: calc(max(var(--margen), (100% - var(--ancho)) / 2) + .62 * (100% - 2 * max(var(--margen), (100% - var(--ancho)) / 2)));
    padding-bottom: clamp(44px, 7vw, 88px);
  }
  main > .portada:not(.portada-inicio, .pagina-contacto, .portada-legal)::before {
    left: var(--campo-x); top: 0; height: auto; border-top: 0; border-left: 1px solid var(--ink);
  }
  main > .portada:not(.portada-inicio, .pagina-contacto, .portada-legal)::after {
    left: var(--campo-x); right: 0; top: 0; bottom: 18%; height: auto; aspect-ratio: auto;
    background-size: min(360px, 74%) auto;
  }
  main > .portada:not(.portada-inicio, .pagina-contacto, .portada-legal) .portada-interior > * { max-width: min(46rem, calc(62% - 56px)); }
}

/* Sobre el pie, una banda de tintas: bloques lisos y rayados de la paleta, separados de la página por un filete.
   Cada bloque es un fondo con su tamaño y su posición (p = inicio / (1 - ancho)). Decorativa: no tiene contenido. */
.pie-sitio::before {
  content: ""; display: block; height: clamp(44px, 6vw, 84px); margin: calc(-1 * clamp(40px, 6vw, 64px)) 0 clamp(40px, 6vw, 64px);
  border-bottom: var(--linea) solid var(--ink);
  background:
    url("../img/grano-tinta.webp?v=b42be2f6") 0 0 / 256px 256px,
    linear-gradient(var(--disco-a), var(--disco-a)) 0 0 / 18% 100% no-repeat,
    repeating-linear-gradient(-45deg, var(--disco-b) 0 7px, var(--tinta-azul) 7px 13px) 23.08% 0 / 22% 100% no-repeat,
    linear-gradient(var(--tinta-naranja), var(--tinta-naranja)) 45.45% 0 / 12% 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--cruce) 0 6px, var(--disco-a) 6px 9px) 66.67% 0 / 22% 100% no-repeat,
    linear-gradient(var(--tinta-azul), var(--tinta-azul)) 84.09% 0 / 12% 100% no-repeat,
    repeating-linear-gradient(45deg, var(--tinta-turquesa) 0 8px, var(--tinta-verde-oscuro) 8px 10px) 100% 0 / 14% 100% no-repeat;
}
/* Pie en columnas: cada grupo de enlaces separado por un filete, con los enlaces en rótulo, como una ficha técnica */
@media (min-width: 760px) {
  .pie-interior > nav { align-self: stretch; padding-left: 24px; border-left: 1px solid var(--ink); }
}
.pie-sitio nav a { font: 400 .8rem/1.2 var(--font-rotulo); letter-spacing: .05em; text-transform: uppercase; }
.pie-base { border-top-color: var(--ink); }

/* el eclipse de la cabecera llega desde la derecha mientras entra el título; parte de .94, nunca de cero */
@keyframes ecl-portada { from { opacity: 0; transform: translateX(16px) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .tarjeta:has(.tarjeta-enlace:hover)::before { transform: none; }
  .portada .resalta::after { animation: none; }
  main > .portada::after { animation-name: funde !important; }
}
@media (forced-colors: active) {
  .tarjeta::before, main > .portada::before, main > .portada::after, .marca::before, .resalta::after { display: none; }
  .resalta { text-decoration: underline; }
  .antetitulo::before, .pasos > li::before { forced-color-adjust: none; }
}
@media print {
  .tarjeta::before, .tarjeta::after, main > .portada::before, main > .portada::after, .resalta::after, .pie-sitio::before { display: none !important; }
  .resalta { text-decoration: underline; }
}

/* 21. Sobrio (2 de noviembre de 2026). Lucas pidió la web más sobria y menos «escolar», mirando otra vez particle.ai.
   Primero se probó con cabecera, portada y pie en negro, y no le gustó nada: «en particle se usa mucho más el color».
   Queda el papel crema con filetes de 1 px, el negro solo en piezas pequeñas (el botón de contacto, las barras de las
   tablas) y el color en bloques grandes y planos: el arte de la portada, la banda de tintas sobre el pie y la franja
   de cada servicio. .negro sigue disponible para una barra oscura dentro de la página.
   Toque propio (pedido de Lucas, 2 de noviembre de 2026): el grano. El papel lo lleva en todas sus superficies (fondo,
   celdas, módulos, fichas) con grano-claro.webp, y los bloques de color llevan encima grano-tinta.webp, motas de papel
   que asoman entre la tinta, como en una risografía y en los videos de estilo Eclipse. */
:root { --linea: 1px; --negro: #171715; }
.negro {
  --bg: var(--negro); --surface: #1d1c17; --surface-2: #29281f; --papel-claro: #1a1914;
  --ink: #f2efdc; --ink-2: #d4cfb8; --muted: #a9a491; --rule: #3a382d; --track: #3d3b30; --control: #8a8676;
  --accent: #7fb0f6; --accent-ink: #a6c8fa; --subraya: var(--disco-a); --tint: #3a3112; --seleccion: #6b5600;
  --rayas: repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 1px 6px);
  color-scheme: dark; color: var(--ink); background: var(--bg);
}

/* Cabecera: papel, con «Contacto» en un bloque negro con el texto amarillo, como «Sign up» en particle.ai */
.navegacion .boton-principal { color: var(--disco-a); background: var(--negro); border-color: var(--negro); }
@media (hover: hover) and (pointer: fine) {
  .navegacion .boton-principal:hover { color: var(--disco-a); background: color-mix(in srgb, var(--negro) 84%, var(--disco-a)); border-color: var(--negro); }
}
.navegacion .boton-principal:active { color: var(--disco-a); background: color-mix(in srgb, var(--negro) 84%, var(--disco-a)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .navegacion .boton-principal { color: var(--tinta); background: var(--disco-a); border-color: var(--disco-a); } }
:root[data-theme="dark"] .navegacion .boton-principal { color: var(--tinta); background: var(--disco-a); border-color: var(--disco-a); }

/* Pie: la banda de tintas encima (como la de particle.ai) y el fondo un tono más oscuro que el papel. El apellido en
   grande que llevaba debajo se quitó el 2 de noviembre de 2026: Lucas lo vio innecesario. */
.pie-sitio { background: var(--grano) 0 0 / 512px 512px, var(--surface); }

/* Rejilla de celdas con filetes, como las columnas del pie de particle.ai. Cada celda lleva su título y su texto; el
   enlace, si lo hay, baja al pie de la celda. */
.celdas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.celdas > li, .celdas > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(20px, 2.6vw, 28px); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--grano) 0 0 / 512px 512px, var(--papel-claro); }
.celdas h3 { font-size: 1.3rem; }
.celdas p { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.celdas .enlace-mas { margin-top: auto; padding-top: 8px; }
@media (min-width: 640px) { .celdas-2, .celdas-3, .celdas-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .celdas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .celdas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Celdas con franja de color arriba (los servicios): un bloque liso o rayado de cada tinta, como las series de los
   gráficos de particle.ai */
.celdas-color > li { padding-top: 0; }
.celdas-color > li::before { content: ""; display: block; height: 44px; margin: 0 calc(-1 * clamp(20px, 2.6vw, 28px)) 12px; border-bottom: 1px solid var(--ink); background: url("../img/grano-tinta.webp?v=b42be2f6") 0 0 / 256px 256px, var(--disco-a); }
.celdas-color > li:nth-child(4n + 2)::before { background: url("../img/grano-tinta.webp?v=b42be2f6") 0 0 / 256px 256px, repeating-linear-gradient(-45deg, var(--disco-b) 0 7px, var(--tinta-azul) 7px 12px); }
.celdas-color > li:nth-child(4n + 3)::before { background: url("../img/grano-tinta.webp?v=b42be2f6") 0 0 / 256px 256px, var(--tinta-naranja); }
.celdas-color > li:nth-child(4n + 4)::before { background: url("../img/grano-tinta.webp?v=b42be2f6") 0 0 / 256px 256px, repeating-linear-gradient(-45deg, var(--cruce) 0 7px, var(--disco-a) 7px 11px); }

.seccion-cabecera h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); letter-spacing: -.03em; }

@media (forced-colors: active) {
  .celdas-color > li::before { display: none; }
}
@media print {
  .celdas-color > li::before { display: none; }
}