/* ---- estilos/tokens.css ---- */
/* Volumen Cero · tokens. ÚNICA fuente de color, tipografía, espaciado y trama (REQUISITOS §5-6; cerebro/volumen-cero/paleta.md).
   Marca v1.0 (manual de marca, 2026-09-26): tres colores y el blanco. El papel es el fondo; la tinta, el texto y la línea; el amarillo,
   la energía (masas, fondos y botones, nunca texto ni línea fina sobre claro). Proporción de uso: 55 % papel · 30 % tinta · 15 % amarillo.
   Capa pop (Ximo y Bruce, 2026-09-24/26): contorno grueso de tinta, trama Ben-Day, cartuchos, bocadillos y las marcas de vibración del V0.
   Un solo modo (sin tema oscuro). Dos capas: primitivas → semánticos. Cero hex fuera de este fichero. */

:root {
  /* ---- Primitivas de marca (manual p. 10) ---- */
  --vc-amarillo: #F3C500;   /* Amarillo Cero · RGB 243 197 0 · CMYK 0 18 100 0 · Pantone 7406 C (a validar con guía física) */
  --vc-tinta: #171717;      /* Tinta · RGB 23 23 23 · CMYK 0 0 0 100 · Pantone Neutral Black C */
  --vc-papel: #F6F5F0;      /* Papel · RGB 246 245 240 · o papel natural sin imprimir */
  --vc-blanco: #FFFFFF;
  /* Tintas de tinta para la interfaz (manual p. 10): 80 · 60 · 40 · 20 · 10 · 5 */
  --vc-tinta-80: #454545; --vc-tinta-60: #747474; --vc-tinta-40: #A2A2A2; --vc-tinta-20: #D1D1D1; --vc-tinta-10: #E8E8E8; --vc-tinta-5: #F3F3F3;
  /* Funcional, fuera de la paleta de marca: solo el texto de error de un formulario (nunca decorativo, nunca solo el color). */
  --vc-error: #B3261E;
  /* Compatibilidad: el prototipo aparcado «Vol. 0» pinta con --vc-negro; en la marca v1 el negro es la tinta. */
  --vc-negro: var(--vc-tinta);

  /* Un solo esquema: los controles nativos se pintan claros. */
  color-scheme: light;

  /* ---- Semánticos. Ratios verificados por scripts/contraste.mjs en cada build. ---- */
  --vc-color-fondo: var(--vc-papel);                /* la página (manual: «el papel es el fondo por defecto»); tinta encima 16,42:1 */
  --vc-color-superficie: var(--vc-blanco);          /* viñetas, tarjetas, campos y bocadillos sobre el papel */
  --vc-color-superficie-2: var(--vc-tinta-5);       /* etiquetas (chips) y estados desactivados */
  --vc-color-tinta: var(--vc-tinta);                /* texto y línea */
  --vc-color-tinta-2: var(--vc-tinta-80);           /* texto secundario: la tinta 80. La 60 del kit da 4,2:1 sobre papel: no vale para texto */
  --vc-color-tinta-3: var(--vc-tinta-60);           /* solo marcadores de campo sobre blanco (4,6:1) y texto desactivado (exento) */
  --vc-color-linea: var(--vc-tinta-20);             /* filetes finos decorativos (exentos de contraste) */
  --vc-color-linea-fuerte: var(--vc-tinta);         /* el contorno pop: viñetas, campos, bocadillos, cartuchos */
  --vc-color-acento: var(--vc-amarillo);            /* masas, fondos, botón principal, rotulador del Destacado, cartuchos */
  --vc-color-acento-tinta: var(--vc-tinta);         /* tinta sobre amarillo: 10,93:1 */
  --vc-color-acento-tinta-2: var(--vc-tinta-80);    /* secundario sobre amarillo */
  --vc-color-solido: var(--vc-tinta);               /* botón secundario («Hablemos») y bandas de tinta */
  --vc-color-solido-tinta: var(--vc-papel);         /* papel sobre tinta: 16,42:1 */
  --vc-color-desactivado: var(--vc-tinta-10);
  --vc-color-desactivado-tinta: var(--vc-tinta-60); /* texto de un control desactivado: exento de contraste (WCAG 1.4.3) */
  --vc-color-error: var(--vc-error);
  --vc-color-seleccion: var(--vc-amarillo);         /* selección de texto: amarillo bajo la tinta, como el rotulador */
  --vc-color-trama: var(--vc-tinta);                /* color de la trama Ben-Day por defecto */
  /* Banda de tinta (estudio, contacto, pie): texto en papel y el énfasis en amarillo (manual p. 22, regla 2). */
  --vc-inv-fondo: var(--vc-tinta);
  --vc-inv-tinta: var(--vc-papel);                  /* 16,42:1 */
  --vc-inv-tinta-2: var(--vc-tinta-20);             /* 11,7:1 */
  --vc-inv-linea: var(--vc-tinta-80);
  --vc-inv-acento-texto: var(--vc-amarillo);        /* sobre tinta el amarillo sí es texto: 10,93:1 */
  --vc-inv-superficie: var(--vc-tinta-80);          /* campos dentro de la banda de tinta */

  /* ---- Tipografía: Trazo Cero, la tipografía propia de la marca (© Volumen Cero, sin licencias de terceros; manual pp. 12-15).
     Regular para leer, Medium para interfaz y botones, Bold para titulares y el nombre, Light solo desde 20 px; cursivas para destacar. */
  --vc-f-marca: "Trazo Cero", "Trazo Cero Respaldo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vc-f-display: var(--vc-f-marca);
  --vc-f-cuerpo: var(--vc-f-marca);
  --vc-f-mono: var(--vc-f-marca);                  /* sin monoespaciada: las cifras tabulares de Trazo Cero cuadran precios y tablas */
  --vc-peso-ligero: 300; --vc-peso-cuerpo: 400; --vc-peso-medio: 500; --vc-peso-display: 700;
  /* Jerarquía del manual (p. 15 y p. 19), fluida entre 390 y 1440 px de ancho */
  --vc-t-etiqueta: 0.75rem;                                        /* 12 · Bold · mayúsculas · +12 % */
  --vc-t-nota: 0.875rem;                                           /* 14 / 20 · Regular */
  --vc-t-menu: 0.9375rem;                                          /* 15 · Medium: el menú */
  --vc-t-boton: 1rem;                                              /* 16 · Medium */
  --vc-t-cuerpo: 1.0625rem;                                        /* 17 / 26 · Regular */
  --vc-t-entradilla: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem);  /* 18 → 19: el párrafo que abre una página */
  --vc-t-bloque: 1.25rem;                                          /* 20 · Bold: el título de una tarjeta o de una viñeta */
  --vc-t-subtitulo: clamp(1.25rem, 1.03rem + 0.9vw, 1.625rem);     /* 20 → 26 / 32 · Medium */
  --vc-t-seccion: clamp(1.875rem, 1.4rem + 1.95vw, 2.5rem);        /* 30 → 40 / 46 · Bold */
  --vc-t-portada: clamp(2.5rem, 1.6rem + 3.7vw, 4rem);             /* 40 → 64 / 68 · Bold · −1 % */
  --vc-t-gigante: clamp(5.5rem, 1rem + 20vw, 20rem);               /* la palabra impresa con trama: una por página, decorativa */
  --vc-interlineado-cuerpo: 1.53;       /* 26 / 17 */
  --vc-interlineado-nota: 1.43;         /* 20 / 14 */
  --vc-interlineado-subtitulo: 1.23;    /* 32 / 26 */
  --vc-interlineado-seccion: 1.15;      /* 46 / 40 */
  --vc-interlineado-display: 1.0625;    /* 68 / 64 */
  --vc-tracking-display: -0.01em;       /* −1 % en el titular grande */
  --vc-tracking-etiqueta: 0.12em;       /* +12 % en las etiquetas en mayúsculas */
  --vc-medida: 64ch;

  /* ---- Espaciado (manual p. 19: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64) y retícula ---- */
  --vc-e-1: 4px; --vc-e-2: 8px; --vc-e-3: 12px; --vc-e-4: 16px; --vc-e-5: 24px; --vc-e-6: 32px; --vc-e-7: 48px; --vc-e-8: 64px;
  --vc-e-seccion: clamp(64px, 8vw, 120px);          /* respiro vertical de una banda */
  --vc-e-seccion-grande: clamp(72px, 10vw, 160px);  /* portada y cierre */
  --vc-medianil: clamp(12px, 1.4vw, 20px);          /* la calle entre viñetas, como en una página de cómic */
  --vc-margen: clamp(16px, 4.4vw, 64px);
  --vc-ancho-contenido: 1240px;
  --vc-alto-cabecera: 76px;
  /* Radios (manual p. 19): 8 etiquetas · 12 campos y tarjetas · 24 paneles · píldora en botones */
  --vc-radio-etiqueta: 8px; --vc-radio: 12px; --vc-radio-panel: 24px; --vc-radio-pildora: 999px;
  --vc-radio-bocadillo: 28px;
  /* Líneas: el contorno pop es grueso y constante («contornos con el mismo grosor en toda la pieza») */
  --vc-borde: 1px; --vc-borde-campo: 2px; --vc-contorno: 3px;

  /* ---- Trama Ben-Day: puntos iguales en retícula a 45°, de borde duro (manual: «línea gruesa, color plano, energía»).
     Es una MÁSCARA (el color lo pone --vc-color-trama): vectorial, nítida en cualquier densidad de pantalla, sin un solo degradado.
     Tres densidades (cobertura de tinta aproximada) y el paso de la retícula. No es el «fondo de puntos con máscara radial» de la
     checklist (A6): no se desvanece, no es fondo de página, marca sombras y masas como en una viñeta. */
  --vc-trama-suave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='2.5' cy='2.5' r='1.5'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");   /* ≈ 14 % */
  --vc-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='2.5' cy='2.5' r='2.1'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.1'/%3E%3C/svg%3E");        /* ≈ 28 % */
  --vc-trama-densa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='2.5' cy='2.5' r='2.9'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.9'/%3E%3C/svg%3E");  /* ≈ 53 % */
  --vc-trama-paso: 10px;
  /* La misma trama como IMAGEN de puntos amarillos, para rellenar letras (la palabra gigante: background-clip: text). Si cambia el
     amarillo de la marca, cambia aquí también el fill (%23 = #). */
  --vc-trama-amarilla-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='%23F3C500'%3E%3Ccircle cx='2.5' cy='2.5' r='2.3'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.3'/%3E%3C/svg%3E");
  --vc-sombra-trama: 12px;        /* desplazamiento de la sombra de trama de viñetas y tarjetas (hacia abajo a la izquierda) */
  --vc-sombra-trama-paso: 6px;    /* las sombras usan la trama densa con un paso fino: se leen como un tono gris de puntos, no como una línea punteada */

  /* ---- Iconos (kit de marca, inline, currentColor) ---- */
  --vc-icono-tamano: 20px; --vc-icono-trazo: 2;
}

/* ---- estilos/fuentes.css ---- */
/* Volumen Cero · Trazo Cero, la tipografía propia de la marca (kit v1.0, carpeta 03; © Volumen Cero, sin licencias de terceros).
   Cuatro pesos con su cursiva, 236 glifos (latín occidental), cifras tabulares. Self-host: el navegador solo descarga los cortes que
   la página usa de verdad; la web precarga Regular, Medium y Bold (los tres que se ven sin hacer scroll).
   «Trazo Cero Respaldo»: Arial (o su gemela métrica Liberation Sans) ajustada a las medidas de Trazo Cero (ancho medido sobre un
   párrafo real con fontTools: 95,2 % en Regular, 90,4 % en Bold; ascendente 950 y descendente 250 por mil), para que el texto no
   salte cuando llega la fuente buena (CLS). */
@font-face { font-family: "Trazo Cero"; src: url("./fuentes/TrazoCero-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Trazo Cero"; src: url("./fuentes/TrazoCero-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Trazo Cero"; src: url("./fuentes/TrazoCero-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Trazo Cero"; src: url("./fuentes/TrazoCero-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Trazo Cero"; src: url("./fuentes/TrazoCero-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Trazo Cero"; src: url("./fuentes/TrazoCero-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Trazo Cero"; src: url("./fuentes/TrazoCero-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Trazo Cero"; src: url("./fuentes/TrazoCero-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Trazo Cero Respaldo"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 400; size-adjust: 95.2%; ascent-override: 99.8%; descent-override: 26.3%; line-gap-override: 0%; }
@font-face { font-family: "Trazo Cero Respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 700; size-adjust: 90.4%; ascent-override: 105.1%; descent-override: 27.7%; line-gap-override: 0%; }

/* ---- estilos/base.css ---- */
/* Volumen Cero · base. Solo referencia tokens (tokens.css); ningún valor de color o familia aquí. Un solo modo: papel. */
@layer reset, base, componentes, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  img, svg, video, picture { display: block; max-width: 100%; height: auto; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul, ol { padding: 0; list-style: none; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4, p, figure, blockquote { font-weight: inherit; }
  img { user-select: none; -webkit-user-drag: none; }
}

@layer base {
  html { background: var(--vc-color-fondo); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--vc-alto-cabecera) + var(--vc-e-4)); scroll-behavior: smooth; }
  body {
    background: var(--vc-color-fondo); color: var(--vc-color-tinta);
    font-family: var(--vc-f-cuerpo); font-weight: var(--vc-peso-cuerpo);
    font-size: var(--vc-t-cuerpo); line-height: var(--vc-interlineado-cuerpo);
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100svh;
    -webkit-tap-highlight-color: transparent;
  }
  /* Jerarquía del manual (p. 15): titulares en Bold y en sentence case (nada de mayúsculas por CSS: el nombre en mayúsculas es cosa
     del logotipo). h1 64/68 −1 % · h2 40/46 · h3 20 Bold (título de tarjeta) · el subtítulo 26/32 Medium es un estilo, no un nivel. */
  h1, h2, h3, h4 { font-family: var(--vc-f-display); font-weight: var(--vc-peso-display); overflow-wrap: break-word; text-wrap: balance; }
  h1 { font-size: var(--vc-t-portada); line-height: var(--vc-interlineado-display); letter-spacing: var(--vc-tracking-display); }
  h2 { font-size: var(--vc-t-seccion); line-height: var(--vc-interlineado-seccion); }
  h3, h4 { font-size: var(--vc-t-bloque); line-height: 1.3; }
  p, li, dd, dt, figcaption { max-width: var(--vc-medida); text-wrap: pretty; }
  em, i { font-style: italic; }
  strong, b { font-weight: var(--vc-peso-display); }
  /* Respuesta al cursor en enlaces sueltos: el subrayado aparece; nunca cambio de color. */
  a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
  .vc-prosa a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .vc-prosa a:hover { text-decoration-thickness: 2px; }
  .vc-prosa p + p, .vc-prosa ul + p, .vc-prosa p + ul { margin-top: var(--vc-e-4); }
  .vc-prosa ul { display: grid; gap: var(--vc-e-1); list-style: disc; padding-left: 1.1em; }
  .vc-prosa h2 { font-size: var(--vc-t-subtitulo); line-height: var(--vc-interlineado-subtitulo); margin: var(--vc-e-7) 0 var(--vc-e-4); }
  .vc-prosa h3 { margin: var(--vc-e-6) 0 var(--vc-e-2); }
  /* Foco: anillo doble independiente del fondo (halo en el color del fondo + anillo de tinta) ≥ 3:1 sobre papel, blanco, amarillo y,
     dentro de una banda de tinta, en papel. */
  :focus-visible { outline: 2px solid var(--vc-color-tinta); outline-offset: 2px; box-shadow: 0 0 0 4px var(--vc-color-fondo); border-radius: var(--vc-radio-etiqueta); }
  ::selection { background: var(--vc-color-seleccion); color: var(--vc-color-acento-tinta); }
  .vc-visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* Datos: precios, años, medidas. Cifras tabulares de Trazo Cero (manual p. 14), en tinta secundaria. */
  .vc-dato { font-variant-numeric: tabular-nums; font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); }
  .vc-meta { color: var(--vc-color-tinta-2); font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); }

  /* Banda de tinta (estudio, contacto, pie): dentro, el texto en papel y el énfasis en amarillo (manual p. 22, regla 2); el botón
     sólido se da la vuelta (papel con tinta) y el contorno pop pasa a papel. */
  .vc-invertida {
    --vc-color-fondo: var(--vc-inv-fondo); --vc-color-tinta: var(--vc-inv-tinta); --vc-color-tinta-2: var(--vc-inv-tinta-2);
    --vc-color-linea: var(--vc-inv-linea); --vc-color-linea-fuerte: var(--vc-inv-tinta); --vc-color-superficie: var(--vc-inv-fondo);
    --vc-color-superficie-2: var(--vc-inv-superficie); --vc-color-solido: var(--vc-papel); --vc-color-solido-tinta: var(--vc-tinta);
    --vc-color-trama: var(--vc-amarillo); --vc-color-destacado-fondo: transparent; --vc-color-destacado-tinta: var(--vc-inv-acento-texto);
    background: var(--vc-color-fondo); color: var(--vc-color-tinta);
  }
  /* Banda amarilla: tinta encima; el Destacado se invierte (tinta con texto amarillo). */
  .vc-acento {
    --vc-color-fondo: var(--vc-color-acento); --vc-color-tinta: var(--vc-color-acento-tinta); --vc-color-tinta-2: var(--vc-color-acento-tinta-2);
    --vc-color-destacado-fondo: var(--vc-tinta); --vc-color-destacado-tinta: var(--vc-amarillo); --vc-color-trama: var(--vc-tinta);
    background: var(--vc-color-fondo); color: var(--vc-color-tinta);
  }

  /* ---- Trama Ben-Day: capa de puntos (máscara) en el color --vc-color-trama. Se aplica a un elemento vacío o a un ::before/::after.
     Densidad con .vc-trama--suave / --densa; el paso con --vc-trama-paso. Nunca lleva texto encima sin un fondo liso de por medio. */
  .vc-trama { background-color: var(--vc-color-trama); -webkit-mask: var(--vc-trama) 0 0 / var(--vc-trama-paso) var(--vc-trama-paso) repeat; mask: var(--vc-trama) 0 0 / var(--vc-trama-paso) var(--vc-trama-paso) repeat; }
  .vc-trama--suave { -webkit-mask-image: var(--vc-trama-suave); mask-image: var(--vc-trama-suave); }
  .vc-trama--densa { -webkit-mask-image: var(--vc-trama-densa); mask-image: var(--vc-trama-densa); }

  @media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; box-shadow: none; }
    .vc-icono, .vc-ilustracion svg, .vc-isotipo { forced-color-adjust: auto; }
    .vc-trama { display: none; }
  }
}

@layer motion {
  /* ============================================================================================================
     Sistema de movimiento (cerebro/volumen-cero/movimiento.md). La web se imprime en dos tintas y el signo vibra:
     la tinta (texto, contornos, estructura) ya está seca cuando llegas y nunca se mueve; lo que se imprime en directo son las planchas
     de color y de trama (amarillo y puntos), con la PASADA (revelado de borde duro con clip-path) y el REGISTRO (la plancha se desliza
     desde abajo a la izquierda y encaja). Lo nuevo de la marca v1: el TRAZO (el V0 se dibuja sin levantar el rotulador) y la VIBRACIÓN
     (las tres marcas del isotipo aparecen al lado de lo que está vivo). Solo transform, opacity, clip-path y stroke-dashoffset.
     ============================================================================================================ */
  :root {
    --vc-dur-1: 140ms; --vc-dur-2: 200ms; --vc-dur-3: 600ms;                  /* respuesta · respuesta larga · fundido de carga */
    --vc-dur-entrada: 380ms; --vc-dur-pasada: 480ms; --vc-dur-pagina: 320ms;  /* registro · pasada · transición entre páginas */
    --vc-dur-trazo: 1100ms;                                                     /* el V0 de un trazo */
    --vc-ease: cubic-bezier(0.2, 0, 0, 1);                                      /* sale rápido y se posa: una plancha no rebota */
    --vc-ease-trazo: cubic-bezier(0.45, 0.05, 0.3, 1);                          /* un rotulador: arranca, corre y frena al final */
    --vc-registro: 10px;                                                        /* recorrido del registro en HTML */
    --vc-registro-svg: 2%;                                                      /* recorrido dentro de un SVG (porcentaje del viewBox) */
    --vc-escalon: 70ms;                                                         /* entre piezas de una fila */
  }
  @keyframes vc-pasada { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes vc-pasada-lado { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes vc-registro { from { translate: calc(-1 * var(--vc-registro-svg)) var(--vc-registro-svg); opacity: 0; } to { translate: 0 0; opacity: 1; } }
  /* Con transform, no con translate: las sombras de trama ya usan translate para su desplazamiento fijo y la animación se suma a él (con
     translate lo sustituía: la plancha llegaba a 0 y al acabar saltaba a su sitio, el «rebote doble» que vio Bruce el 2026-09-26). */
  @keyframes vc-registro-capa { from { transform: translate(calc(-1 * var(--vc-registro)), var(--vc-registro)); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes vc-trazo { from { stroke-dashoffset: 1.5; } }  /* guías con pathLength=1 y stroke-dasharray «1 3»: a 1,5 ni el remate redondo asoma */
  @keyframes vc-rotulador { from { background-size: 0% var(--_alto, 100%); } to { background-size: 100% var(--_alto, 100%); } }
  @keyframes vc-filete { to { border-bottom-color: var(--vc-color-linea); } }
  @keyframes vc-paralaje-sube { from { translate: 0 var(--vc-paralaje, 40px); } to { translate: 0 calc(-1 * var(--vc-paralaje, 40px)); } }
  @keyframes vc-paralaje-lado { from { translate: calc(-1 * var(--vc-paralaje, 48px)) 0; } to { translate: var(--vc-paralaje, 48px) 0; } }

  /* Entradas de una vez. Solo con JavaScript confirmado (html.vc-js) y solo las planchas (amarillo y trama): sin JS la página está
     entera y quieta. app.js observa [data-imprime] y añade .vc-impreso al entrar en pantalla (una vez). El estado oculto NUNCA va en
     una regla estática: sin JS, o si el observador falla, todo se ve. */
  .vc-js [data-imprime]:not(.vc-impreso) .vc-capa--amarillo { opacity: 0; translate: calc(-1 * var(--vc-registro-svg)) var(--vc-registro-svg); }
  .vc-js [data-imprime]:not(.vc-impreso) .vc-plancha { opacity: 0; transform: translate(calc(-1 * var(--vc-registro)), var(--vc-registro)); }
  .vc-impreso .vc-capa--amarillo { animation: vc-registro var(--vc-dur-entrada) var(--vc-ease) 120ms backwards; }
  .vc-impreso .vc-plancha { animation: vc-registro-capa var(--vc-dur-entrada) var(--vc-ease) 160ms backwards; }
  /* El rotulador: el amarillo del Destacado se pinta de izquierda a derecha cuando su bloque se imprime. */
  .vc-js [data-imprime]:not(.vc-impreso) .vc-destacado { background-size: 0% var(--_alto, 100%); }
  .vc-impreso .vc-destacado { animation: vc-rotulador var(--vc-dur-pasada) var(--vc-ease) 260ms backwards; }
  .vc-capa--amarillo, .vc-capa--tinta { transform-box: view-box; }

  /* Transición entre páginas (cross-document, sin JS): la cabecera se queda fija y la página nueva se imprime sobre la vieja. */
  @view-transition { navigation: auto; }
  .vc-cabecera { view-transition-name: vc-cabecera; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vc-pasada var(--vc-dur-pagina) var(--vc-ease) both; }
  ::view-transition-old(vc-cabecera), ::view-transition-new(vc-cabecera) { animation: none; }

  /* Reducción de movimiento = imprenta seca: todo en su estado final al instante. Las animaciones de tiempo se acortan a 0 (acaban
     en su estado final); las ligadas al scroll se apagan con `animation: none`. OJO: nunca `animation-timeline: none` aquí
     (gotcha-reduced-motion-animation-timeline-none). */
  @media (prefers-reduced-motion: reduce) {
    :root { --vc-dur-1: 0ms; --vc-dur-2: 0ms; --vc-dur-3: 0ms; --vc-dur-entrada: 0ms; --vc-dur-pasada: 0ms; --vc-dur-pagina: 0ms; --vc-dur-trazo: 0ms; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .vc-cabecera, .vc-paralaje { animation: none !important; }
    .vc-cabecera { border-bottom-color: var(--vc-color-linea); }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    html { scroll-behavior: auto; }
  }
}

/* ---- componentes/base/Boton.css ---- */
@layer componentes {
  /* Píldora de 48 px (manual p. 19): Medium 16, 24 px de relleno lateral, 12 px entre icono y texto. 44 px = objetivo táctil mínimo. */
  .vc-boton { --_sombra: var(--vc-color-tinta); display: inline-flex; align-items: center; justify-content: center; gap: var(--vc-e-3); min-height: 48px; padding: 0 var(--vc-e-5); font-family: var(--vc-f-marca); font-weight: var(--vc-peso-medio); font-size: var(--vc-t-boton); line-height: 1.2; border-radius: var(--vc-radio-pildora); border: var(--vc-borde-campo) solid transparent; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; }
  .vc-boton:hover, .vc-boton:focus-visible { text-decoration: none; }
  .vc-boton__icono { width: 20px; height: 20px; }
  .vc-boton--principal { background: var(--vc-color-acento); color: var(--vc-color-acento-tinta); border-color: var(--vc-color-acento); }
  .vc-boton--secundario { --_sombra: var(--vc-color-acento); background: var(--vc-color-solido); color: var(--vc-color-solido-tinta); border-color: var(--vc-color-solido); }
  .vc-boton--terciario { background: transparent; color: var(--vc-color-tinta); border-color: var(--vc-color-tinta); }
  /* Sobre la banda amarilla el principal amarillo desaparecería: allí lleva contorno de tinta. */
  .vc-acento .vc-boton--principal { border-color: var(--vc-color-tinta); }
  .vc-boton--compacto { min-height: 40px; padding-inline: var(--vc-e-4); gap: var(--vc-e-2); }
  .vc-boton--grande { min-height: 56px; padding-inline: var(--vc-e-6); font-size: var(--vc-t-cuerpo); }
  /* Enlace: texto con subrayado de 2 px y la flecha detrás (manual p. 19, «Leer el caso completo →»). */
  .vc-boton--enlace { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--vc-color-tinta); gap: var(--vc-e-2); white-space: normal; text-align: start; }
  .vc-boton--enlace .vc-boton__texto { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  /* Desactivado (manual: «No disponible»): gris del kit, sin respuesta. */
  .vc-boton[disabled] { background: var(--vc-color-desactivado); color: var(--vc-color-desactivado-tinta); border-color: var(--vc-color-desactivado); cursor: not-allowed; }
  /* La segunda tinta (capa pop): bloque duro desplazado abajo a la izquierda, sin desenfoque. Solo con puntero. */
  .vc-boton:not(.vc-boton--enlace) { transition: box-shadow var(--vc-dur-1) var(--vc-ease), translate 90ms var(--vc-ease); }
  @media (hover: hover) {
    .vc-boton:not(.vc-boton--enlace):not([disabled]):hover { box-shadow: -4px 4px 0 0 var(--_sombra); translate: 1px -1px; }
    .vc-boton--enlace:hover .vc-boton__icono { translate: 4px 0; }
  }
  .vc-boton:not(.vc-boton--enlace):not([disabled]):active { box-shadow: 0 0 0 0 var(--_sombra); translate: -1px 1px; }
  .vc-boton--enlace .vc-boton__icono { transition: translate var(--vc-dur-2) var(--vc-ease); }
}

/* ---- componentes/base/Cartucho.css ---- */
@layer componentes {
  /* La caja de texto del cómic: rectángulo de esquinas casi rectas (radio de etiqueta), contorno de 2 px, texto de etiqueta del manual. */
  .vc-cartucho { display: inline-block; width: fit-content; max-width: 100%; padding: 7px var(--vc-e-3) 6px; border: var(--vc-borde-campo) solid var(--vc-color-linea-fuerte); border-radius: calc(var(--vc-radio-etiqueta) / 2); font-size: var(--vc-t-etiqueta); font-weight: var(--vc-peso-display); line-height: 1.25; letter-spacing: var(--vc-tracking-etiqueta); text-transform: uppercase; }
  .vc-cartucho--amarillo { background: var(--vc-color-acento); color: var(--vc-color-acento-tinta); border-color: var(--vc-tinta); }
  .vc-cartucho--blanco { background: var(--vc-blanco); color: var(--vc-tinta); border-color: var(--vc-tinta); }
  .vc-cartucho--tinta { background: var(--vc-tinta); color: var(--vc-amarillo); border-color: var(--vc-tinta); }
}

/* ---- componentes/base/Destacado.css ---- */
@layer componentes {
  /* Rotulador: el fondo es una imagen plana (un degradado de un solo color: no es un degradado visible) para poder pintarlo de izquierda
     a derecha animando background-size. En .vc-invertida y .vc-acento los tokens de destacado cambian solos (base.css). */
  /* Una BANDA, no la caja entera: la caja de una línea de Trazo Cero mide 1,2 em (ascendente 0,95 + descendente 0,25) y el titular va a
     1,0625 de interlineado, así que el fondo de cada línea tapaba los rasgos que bajan de la anterior («p», «y»). La banda va de un poco
     por encima de la mayúscula (0,70 sobre la línea base) a un poco por debajo de ella (0,08): 0,78 em, dentro de su propia línea. */
  .vc-destacado {
    --_alto: 0.78em;
    background-image: linear-gradient(var(--vc-color-destacado-fondo, var(--vc-color-acento)), var(--vc-color-destacado-fondo, var(--vc-color-acento)));
    background-repeat: no-repeat; background-position: 0 0.25em; background-size: 100% var(--_alto);
    color: var(--vc-color-destacado-tinta, var(--vc-color-acento-tinta));
    padding: 0 0.1em; margin-inline: -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}

/* ---- componentes/base/Enlace.css ---- */
@layer componentes {
  /* Subrayado de 1 px en reposo, 2 px al hover y al foco. Sin color propio: hereda el del texto. */
  .vc-enlace { text-decoration: underline; text-decoration-thickness: var(--vc-borde); text-underline-offset: 0.22em; }
  .vc-enlace:hover, .vc-enlace:focus-visible { text-decoration-thickness: 2px; }
  .vc-enlace--sin-subrayado { text-decoration: none; }
  .vc-enlace--sin-subrayado:hover, .vc-enlace--sin-subrayado:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }
  .vc-enlace[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
  /* Icono «Abrir fuera» del kit, pegado a la última palabra, a la altura de la x. */
  .vc-enlace__externo { display: inline-block; margin-inline-start: 0.2em; text-decoration: none; }
  .vc-enlace__icono { width: 0.9em; height: 0.9em; vertical-align: -0.08em; }
}

/* ---- componentes/base/Etiqueta.css ---- */
@layer componentes {
  .vc-etiquetas { display: flex; flex-wrap: wrap; gap: var(--vc-e-2); }
  .vc-etiqueta { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--vc-e-3); border-radius: var(--vc-radio-etiqueta); background: var(--vc-color-superficie-2); color: var(--vc-color-tinta); font-size: var(--vc-t-nota); font-weight: var(--vc-peso-medio); line-height: 1.2; max-width: none; }
}

/* ---- componentes/base/Icono.css ---- */
@layer componentes {
  .vc-icono:not([width]) { width: var(--vc-icono-tamano); height: var(--vc-icono-tamano); } /* con `tamano`, mandan los atributos */
  /* Trazo 2 en la retícula de 24, remates y uniones redondos (manual p. 16). vector-effect no: el trazo escala con el icono, como en el kit. */
  .vc-icono { flex: none; fill: none; stroke: currentColor; stroke-width: var(--vc-icono-trazo); stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; display: inline-block; }
}

/* ---- componentes/base/Isotipo.css ---- */
@layer componentes {
  /* El isotipo en línea: geometría del kit, rellenos por versión (manual p. 8). La línea contrasta siempre con el fondo; el amarillo
     del lazo solo aparece cuando se ve (color y color negativo). */
  .vc-isotipo { display: block; width: 100%; height: auto; overflow: visible; }
  .vc-isotipo__linea { fill: var(--_linea, var(--vc-tinta)); }
  .vc-isotipo__masa { fill: var(--_masa, var(--vc-amarillo)); transform-box: view-box; }
  .vc-isotipo--color { --_linea: var(--vc-tinta); --_masa: var(--vc-amarillo); }
  .vc-isotipo--color-negativo { --_linea: var(--vc-papel); --_masa: var(--vc-amarillo); }
  .vc-isotipo--una-tinta { --_linea: var(--vc-tinta); }
  .vc-isotipo--blanco { --_linea: var(--vc-blanco); }
  .vc-isotipo--una-tinta .vc-isotipo__masa, .vc-isotipo--blanco .vc-isotipo__masa { display: none; }
  /* Guías de la máscara del trazo: más anchas que la línea, blancas (en una máscara, blanco = se ve). */
  .vc-isotipo__guia { fill: none; stroke: var(--vc-blanco); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 3; }
  .vc-isotipo__guia--marca { stroke-width: 14; }
}

@layer motion {
  /* El trazo: el V0 de una sola línea (1,1 s), la masa entra en registro al cerrarse el lazo y las marcas se dibujan una tras otra.
     Estado final = estado estático (dashoffset 0): sin animaciones el isotipo está entero. */
  .vc-isotipo--anima .vc-isotipo__guia--v0 { animation: vc-trazo var(--vc-dur-trazo) var(--vc-ease-trazo) 250ms backwards; }
  .vc-isotipo--anima .vc-isotipo__masa { animation: vc-registro var(--vc-dur-entrada) var(--vc-ease) calc(250ms + var(--vc-dur-trazo) * 0.8) backwards; }
  .vc-isotipo--anima .vc-isotipo__guia--m1 { animation: vc-trazo 180ms var(--vc-ease) calc(310ms + var(--vc-dur-trazo)) backwards; }
  .vc-isotipo--anima .vc-isotipo__guia--m2 { animation: vc-trazo 180ms var(--vc-ease) calc(430ms + var(--vc-dur-trazo)) backwards; }
  .vc-isotipo--anima .vc-isotipo__guia--m3 { animation: vc-trazo 180ms var(--vc-ease) calc(550ms + var(--vc-dur-trazo)) backwards; }
  /* La vibración: cada 5 s las marcas tiemblan dos veces hacia fuera, cada una en su dirección (las del kit: ±16,8° y 0°). */
  @keyframes vc-vibra { 0%, 86%, 92%, 100% { translate: 0 0; } 89%, 95% { translate: var(--_vx) var(--_vy); } }
  .vc-isotipo__marca--arriba { --_vx: 4.2px; --_vy: -1.3px; }
  .vc-isotipo__marca--medio { --_vx: 4.4px; --_vy: 0px; }
  .vc-isotipo__marca--abajo { --_vx: 4.2px; --_vy: 1.3px; }
  .vc-isotipo--vibra .vc-isotipo__marca { animation: vc-vibra 5s linear 3.2s infinite; }
}

/* ---- componentes/base/Marca.css ---- */
@layer componentes {
  /* El logotipo es una imagen del kit: nunca se deforma (la proporción la dan width/height del <img>), nunca se gira ni lleva
     sombras ni efectos (manual p. 9). El enlace no subraya nada: el foco es el anillo doble de base.css. */
  .vc-marca { display: inline-flex; flex: none; line-height: 0; border-radius: var(--vc-radio-etiqueta); }
  .vc-marca:hover, .vc-marca:focus-visible { text-decoration: none; }
  /* Tamaño por los atributos width/height del <img> (nunca `width: auto`: daría el ancho del artboard); el alto se ajusta a la proporción. */
  .vc-marca__imagen { display: block; }
}

/* ---- componentes/base/Texto.css ---- */
@layer componentes {
  .vc-texto--cuerpo { font-size: var(--vc-t-cuerpo); line-height: var(--vc-interlineado-cuerpo); max-width: var(--vc-medida); }
  .vc-texto--entradilla { font-size: var(--vc-t-entradilla); line-height: 1.5; color: var(--vc-color-tinta-2); max-width: 46ch; }
  .vc-texto--nota { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); max-width: var(--vc-medida); }
  /* Etiqueta del manual: 12 Bold, mayúsculas, +12 %. Es un rótulo de una línea: sin medida. */
  .vc-texto--etiqueta { font-size: var(--vc-t-etiqueta); line-height: 1.3; font-weight: var(--vc-peso-display); text-transform: uppercase; letter-spacing: var(--vc-tracking-etiqueta); max-width: none; }
  .vc-texto--dato { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); font-variant-numeric: tabular-nums; }
  .vc-texto--sin-medida { max-width: none; }
  .vc-texto--centrado { text-align: center; margin-inline: auto; }
  .vc-prosa { max-width: var(--vc-medida); }
}

/* ---- componentes/base/Titular.css ---- */
@layer componentes {
  .vc-titular { font-family: var(--vc-f-display); font-weight: var(--vc-peso-display); text-wrap: balance; overflow-wrap: break-word; }
  .vc-titular--portada { font-size: var(--vc-t-portada); line-height: var(--vc-interlineado-display); letter-spacing: var(--vc-tracking-display); max-width: 15ch; }
  .vc-titular--seccion { font-size: var(--vc-t-seccion); line-height: var(--vc-interlineado-seccion); max-width: 22ch; }
  .vc-titular--subtitulo { font-size: var(--vc-t-subtitulo); line-height: var(--vc-interlineado-subtitulo); font-weight: var(--vc-peso-medio); max-width: 36ch; }
  .vc-titular--bloque { font-size: var(--vc-t-bloque); line-height: 1.3; max-width: 32ch; }
  .vc-titular--centro { text-align: center; margin-inline: auto; }
  /* La palabra impresa con trama (capa pop): contorno de tinta del grosor de la marca y relleno de puntos Ben-Day amarillos recortados
     a las letras (background-clip: text sobre una IMAGEN de puntos, --vc-trama-amarilla-img: no es un degradado de color, A5 no aplica).
     Decorativa, sin interacción, una por página como mucho. */
  .vc-titular--gigante {
    font-size: var(--vc-t-gigante); line-height: 0.86; letter-spacing: -0.015em; max-width: none; white-space: nowrap;
    color: transparent; -webkit-text-stroke: max(3px, 0.03em) var(--vc-color-tinta); paint-order: stroke fill;
    background: var(--vc-trama-amarilla-img) 0 0 / 0.085em 0.085em repeat; -webkit-background-clip: text; background-clip: text;
    user-select: none; pointer-events: none; text-wrap: initial;
  }
}

/* ---- componentes/base/Vibracion.css ---- */
@layer componentes {
  /* Las marcas son trazos centrales con el grosor y los remates del kit (8,78 de ancho, redondos): idénticas a las del isotipo. */
  .vc-vibracion { display: inline-block; flex: none; width: auto; height: 1.4em; overflow: visible; vertical-align: middle; }
  .vc-vibracion__marca { fill: none; stroke: currentColor; stroke-width: 8.78; stroke-linecap: round; }
}
@layer motion {
  /* Al hover del contenedor vivo, cada marca se dibuja de dentro afuera (dashoffset), una tras otra. Sin puntero no se ven. */
  .vc-vibracion--hover .vc-vibracion__marca { stroke-dasharray: 30 60; stroke-dashoffset: 40; transition: stroke-dashoffset 160ms var(--vc-ease); }
  .vc-vibracion--hover .vc-vibracion__marca:nth-child(2) { transition-delay: 60ms; }
  .vc-vibracion--hover .vc-vibracion__marca:nth-child(3) { transition-delay: 120ms; }
  @media (hover: hover) {
    .vc-vive:hover .vc-vibracion--hover .vc-vibracion__marca, .vc-vive:focus-within .vc-vibracion--hover .vc-vibracion__marca { stroke-dashoffset: 0; }
  }
}

/* ---- componentes/contenido/Bocadillo.css ---- */
@layer componentes {
  /* El globo: contorno de 3 px, radio de bocadillo, relleno generoso. La cola cuelga 33 px por debajo (reserva de margen inferior). */
  .vc-bocadillo { --_fondo: var(--vc-blanco); position: relative; display: block; width: fit-content; max-width: 100%; margin-bottom: 33px; }
  .vc-bocadillo--amarillo { --_fondo: var(--vc-amarillo); }
  .vc-bocadillo__cuerpo { position: relative; display: block; padding: var(--vc-e-5) clamp(20px, 2.4vw, 32px); border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio-bocadillo); background: var(--_fondo); color: var(--vc-tinta); }
  .vc-bocadillo__cuerpo > * + * { margin-top: var(--vc-e-3); }
  /* La cola se monta sobre el contorno inferior: su y = 0 coincide con el borde interior del contorno (3 px por encima del borde exterior). */
  .vc-bocadillo__cola { position: absolute; bottom: -33px; width: 40px; height: 36px; overflow: visible; }
  .vc-bocadillo--cola-izquierda .vc-bocadillo__cola { left: clamp(24px, 12%, 56px); }
  .vc-bocadillo--cola-derecha .vc-bocadillo__cola { right: clamp(24px, 12%, 56px); scale: -1 1; }
  .vc-bocadillo__cola-fondo { fill: var(--_fondo); }
  .vc-bocadillo__cola-linea { fill: none; stroke: var(--vc-tinta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---- componentes/contenido/Ilustracion.css ---- */
@layer componentes {
  /* Figura desnuda: sin marco, sin fondo. La tinta la hereda del contexto (currentColor) y el amarillo va por clase o por token. */
  .vc-ilustracion { display: block; margin: 0; color: inherit; background: transparent; inline-size: 100%; max-inline-size: var(--vc-medida); }
  .vc-ilustracion__marco { display: block; inline-size: 100%; }
  .vc-ilustracion__marco svg { display: block; inline-size: 100%; block-size: auto; fill: currentColor; overflow: visible; }
  /* Las composiciones cortan en su mesa lo que sale a sangre (el remate de una línea que llega al borde asoma 8 u) y las planchas
     mientras entran en registro. */
  .vc-ilustracion__marco svg.vc-pieza--composicion { overflow: hidden; }
  .vc-ilustracion__marco img { display: block; inline-size: 100%; block-size: auto; }
  .vc-ilustracion__marco > span { display: block; }
  /* Capas de las piezas del Illustrator y del sistema anterior: la de amarillo coge el token (y la vieja «lima» también). */
  .vc-ilustracion .vc-capa--amarillo, .vc-ilustracion .vc-capa--lima { fill: var(--vc-color-acento); }
  .vc-acento .vc-ilustracion .vc-capa--amarillo, .vc-acento .vc-ilustracion .vc-capa--lima { fill: var(--vc-papel); }
  /* Piezas del Illustrator (recursos/ilustraciones/scripts/importar_illustrator.mjs): cada color exacto de la marca llega como una clase
     y lo pinta el token del contexto. La tinta es currentColor (papel sobre una banda de tinta); el papel es «hueco», toma el fondo de
     la viñeta; el amarillo pasa a papel sobre una viñeta amarilla; la trama de tinta se vuelve amarilla sobre tinta (el énfasis). */
  .vc-ilustracion .vc-t { fill: currentColor; }
  .vc-ilustracion .vc-a { fill: var(--vc-color-acento); }
  .vc-ilustracion .vc-p { fill: var(--vc-color-fondo); }
  .vc-ilustracion .vc-b { fill: var(--vc-blanco); }
  .vc-ilustracion .vc-sin-relleno { fill: none; }
  .vc-ilustracion .vc-t-trazo { stroke: currentColor; }
  .vc-ilustracion .vc-a-trazo { stroke: var(--vc-color-acento); }
  .vc-ilustracion .vc-p-trazo { stroke: var(--vc-color-fondo); }
  .vc-ilustracion .vc-b-trazo { stroke: var(--vc-blanco); }
  .vc-acento .vc-ilustracion .vc-a { fill: var(--vc-papel); }
  .vc-acento .vc-ilustracion .vc-a-trazo { stroke: var(--vc-papel); }
  .vc-invertida .vc-ilustracion .vc-capa--trama .vc-t { fill: var(--vc-amarillo); }
  /* Proporción reservada: el hueco existe antes de que cargue nada; el dibujo se ajusta dentro sin recortar. */
  .vc-ilustracion--16-9 .vc-ilustracion__marco { aspect-ratio: 16 / 9; }
  .vc-ilustracion--4-3 .vc-ilustracion__marco { aspect-ratio: 4 / 3; }
  .vc-ilustracion--1-1 .vc-ilustracion__marco { aspect-ratio: 1 / 1; }
  .vc-ilustracion--4-5 .vc-ilustracion__marco { aspect-ratio: 4 / 5; }
  .vc-ilustracion--3-4 .vc-ilustracion__marco { aspect-ratio: 3 / 4; }
  .vc-ilustracion--16-9 .vc-ilustracion__marco :is(svg, img), .vc-ilustracion--4-3 .vc-ilustracion__marco :is(svg, img),
  .vc-ilustracion--1-1 .vc-ilustracion__marco :is(svg, img), .vc-ilustracion--4-5 .vc-ilustracion__marco :is(svg, img),
  .vc-ilustracion--3-4 .vc-ilustracion__marco :is(svg, img) { block-size: 100%; object-fit: contain; }
  .vc-ilustracion--16-9 .vc-ilustracion__marco > span, .vc-ilustracion--4-3 .vc-ilustracion__marco > span, .vc-ilustracion--1-1 .vc-ilustracion__marco > span,
  .vc-ilustracion--4-5 .vc-ilustracion__marco > span, .vc-ilustracion--3-4 .vc-ilustracion__marco > span { block-size: 100%; }
  .vc-ilustracion--spot { inline-size: clamp(var(--vc-e-8), 8vw, var(--vc-ilustracion-spot-max, 120px)); max-inline-size: 100%; flex: none; }
  .vc-ilustracion--hero { max-inline-size: none; }
  /* Segunda tinta: la silueta entera en amarillo desplazada abajo a la izquierda, sin desenfoque (serigrafía fuera de registro).
     Sobre la banda amarilla la segunda tinta es la tinta. */
  .vc-ilustracion--sombra .vc-ilustracion__marco { filter: drop-shadow(calc(-1 * var(--vc-e-3)) var(--vc-e-3) 0 var(--vc-ilustracion-sombra, var(--vc-color-acento))); }
  .vc-acento .vc-ilustracion--sombra { --vc-ilustracion-sombra: var(--vc-tinta); }
  @media (min-width: 801px) {
    @supports (animation-timeline: view()) {
      .vc-ilustracion--paralaje .vc-ilustracion__marco { animation: vc-paralaje-sube linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    }
  }
  .vc-ilustracion--desborda-derecha { margin-inline-end: calc(-1 * var(--vc-ilustracion-desborde, var(--vc-margen))); inline-size: calc(100% + var(--vc-ilustracion-desborde, var(--vc-margen))); max-inline-size: none; }
  .vc-ilustracion--desborda-izquierda { margin-inline-start: calc(-1 * var(--vc-ilustracion-desborde, var(--vc-margen))); inline-size: calc(100% + var(--vc-ilustracion-desborde, var(--vc-margen))); max-inline-size: none; }
  .vc-ilustracion--desborda-abajo { margin-block-end: calc(-1 * var(--vc-ilustracion-desborde, var(--vc-margen))); position: relative; z-index: 1; }
  .vc-ilustracion__pie { margin-block-start: var(--vc-e-2); font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); max-inline-size: var(--vc-medida); }
}
@layer motion {
  /* Piezas del Illustrator (data-dibuja: línea del v2 y composiciones del v3): web/src/app.js las dibuja al llegar a pantalla. Mientras
     esperan, el propio script les pone .vc-por-dibujar: la línea sin tinta (pathLength=1, raya «1 3» desplazada 1,5: ni el remate
     redondo asoma) y las planchas (amarillo y trama) fuera. El estado oculto no está nunca en una regla estática: sin JS, o con
     «reducir movimiento», la pieza está entera.
     OJO: se selecciona por la clase del importador (.vc-t-trazo), nunca por [pathLength]: Chrome pasa a minúsculas el atributo del
     selector y en SVG el atributo conserva la mayúscula, así que la regla no casaría (gotcha-selector-atributo-svg-mayusculas). */
  .vc-por-dibujar .vc-capa--linea .vc-t-trazo { stroke-dasharray: 1 3; stroke-dashoffset: 1.5; }
  .vc-por-dibujar :is(.vc-capa--masa, .vc-capa--trama) { opacity: 0; }
}

/* ---- componentes/contenido/Paso.css ---- */
@layer componentes {
  /* Viñeta de tira: contorno de 3 px, radio de panel, sombra de trama; el número en un círculo de tinta sobre la esquina. */
  .vc-paso { position: relative; isolation: isolate; container-type: inline-size; }
  .vc-paso__sombra { position: absolute; inset: 0; z-index: 0; border-radius: var(--vc-radio-panel); translate: calc(-1 * var(--vc-sombra-trama) - var(--vc-desregistro-x, 0px)) calc(var(--vc-sombra-trama) + var(--vc-desregistro-y, 0px)); background-color: var(--vc-tinta); -webkit-mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; }
  .vc-paso__cuerpo { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vc-e-5); padding: clamp(40px, 4vw, 52px) clamp(20px, 4vw, 56px) clamp(24px, 3vw, 36px); border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio-panel); --vc-color-fondo: var(--vc-blanco); background: var(--vc-color-fondo); color: var(--vc-tinta); }
  .vc-paso--amarillo .vc-paso__cuerpo { --vc-color-fondo: var(--vc-amarillo); }
  /* El número: círculo de tinta con la cifra en papel, montado sobre el contorno superior izquierdo (como el número de una viñeta). */
  .vc-paso__numero { position: absolute; top: calc(-1 * clamp(24px, 3vw, 32px)); left: clamp(20px, 4vw, 56px); display: grid; place-items: center; width: clamp(48px, 6vw, 64px); aspect-ratio: 1; border-radius: 50%; background: var(--vc-tinta); color: var(--vc-papel); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: var(--vc-peso-display); line-height: 1; font-variant-numeric: tabular-nums; max-width: none; }
  .vc-paso--amarillo .vc-paso__numero { color: var(--vc-amarillo); }
  .vc-paso__texto { display: grid; gap: var(--vc-e-4); align-content: start; }
  .vc-paso__ilustracion { align-self: center; }
  /* La ilustración del paso: centrada y contenida debajo del texto en móvil; a la derecha y más grande en escritorio. */
  .vc-paso__ilustracion .vc-ilustracion { max-inline-size: 300px; margin-inline: auto; }
  @container (min-width: 860px) {
    .vc-paso--con-ilustracion .vc-paso__cuerpo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .vc-paso--con-ilustracion .vc-paso__puntos { grid-column: 1 / -1; }
    .vc-paso__ilustracion .vc-ilustracion { max-inline-size: 320px; }
  }
}

/* ---- componentes/contenido/Punto.css ---- */
@layer componentes {
  .vc-puntos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--vc-e-4); }
  .vc-punto { display: grid; align-content: start; gap: var(--vc-e-2); padding: var(--vc-e-4) var(--vc-e-5) var(--vc-e-5); border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: var(--vc-radio); background: var(--vc-blanco); color: var(--vc-tinta); max-width: none; }
  /* Sobre amarillo el punto se queda en papel: el contraste lo da la tinta, no el color. */
  .vc-acento .vc-punto { background: var(--vc-papel); }
  .vc-punto__titulo { font-size: var(--vc-t-cuerpo); line-height: 1.3; font-weight: var(--vc-peso-display); }
  .vc-punto__texto { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-tinta-80); }
  .vc-punto__dato { margin-top: var(--vc-e-1); font-weight: var(--vc-peso-medio); color: var(--vc-tinta); }
}

/* ---- componentes/contenido/TarjetaProyecto.css ---- */
@layer componentes {
  .vc-proyecto { position: relative; isolation: isolate; display: flex; min-width: 0; container-type: inline-size; }
  .vc-proyecto__sombra { position: absolute; inset: 0; z-index: 0; border-radius: var(--vc-radio); translate: calc(-1 * var(--vc-sombra-trama) - var(--vc-desregistro-x, 0px)) calc(var(--vc-sombra-trama) + var(--vc-desregistro-y, 0px)); background-color: var(--vc-tinta); -webkit-mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; }
  .vc-proyecto__cuerpo { position: relative; z-index: 1; flex: 1; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio); background: var(--vc-blanco); color: var(--vc-tinta); overflow: hidden; }
  /* La captura, a su proporción: sin recorte (contain), sobre el papel, separada del texto por el contorno. */
  .vc-proyecto__imagen { margin: 0; background: var(--vc-papel); border-bottom: var(--vc-contorno) solid var(--vc-tinta); }
  .vc-proyecto__imagen img { width: 100%; height: auto; object-fit: contain; }
  .vc-proyecto__texto { position: relative; display: grid; align-content: start; gap: var(--vc-e-2); padding: var(--vc-e-5) clamp(20px, 2.2vw, 32px) var(--vc-e-6); padding-inline-end: calc(clamp(20px, 2.2vw, 32px) + 56px); }
  .vc-proyecto__etiqueta { font-size: var(--vc-t-etiqueta); font-weight: var(--vc-peso-display); letter-spacing: var(--vc-tracking-etiqueta); text-transform: uppercase; color: var(--vc-tinta-80); }
  .vc-proyecto__titulo { font-size: var(--vc-t-subtitulo); line-height: var(--vc-interlineado-subtitulo); font-weight: var(--vc-peso-display); }
  /* El enlace del título se extiende a toda la tarjeta (::after): un solo destino, un solo nombre. */
  .vc-proyecto__enlace { text-decoration: none; }
  .vc-proyecto__enlace::after { content: ""; position: absolute; inset: calc(-1 * var(--vc-contorno)); z-index: 2; border-radius: var(--vc-radio); }
  .vc-proyecto__enlace:focus-visible { outline: none; box-shadow: none; }
  .vc-proyecto:has(.vc-proyecto__enlace:focus-visible) .vc-proyecto__cuerpo { outline: 3px solid var(--vc-tinta); outline-offset: 4px; }
  .vc-proyecto__linea { color: var(--vc-tinta-80); max-width: 44ch; }
  .vc-proyecto__mas { padding: 0 clamp(20px, 2.2vw, 32px) var(--vc-e-6); }
  /* La flecha abajo a la derecha; al hover las marcas de vibración se dibujan detrás de ella. */
  .vc-proyecto__flecha { position: absolute; right: clamp(20px, 2.2vw, 32px); bottom: var(--vc-e-6); display: inline-flex; align-items: center; gap: 2px; color: var(--vc-tinta); }
  .vc-proyecto__flecha .vc-vibracion { height: 26px; }
  /* Destacada: imagen a la izquierda (3/5) y texto a la derecha en escritorio. */
  @container (min-width: 760px) {
    .vc-proyecto--destacada .vc-proyecto__cuerpo { grid-template-rows: auto auto; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "imagen texto" "mas mas"; }
    .vc-proyecto--destacada .vc-proyecto__imagen { grid-area: imagen; border-bottom: 0; border-right: var(--vc-contorno) solid var(--vc-tinta); display: grid; align-items: center; }
    .vc-proyecto--destacada .vc-proyecto__texto { grid-area: texto; align-content: center; padding-block: var(--vc-e-6) var(--vc-e-8); }
    .vc-proyecto--destacada .vc-proyecto__mas { grid-area: mas; padding: var(--vc-e-5) clamp(20px, 2.2vw, 32px); border-top: var(--vc-contorno) solid var(--vc-tinta); }
  }
}
@layer motion {
  .vc-proyecto__sombra { transition: translate var(--vc-dur-2) var(--vc-ease); }
  .vc-proyecto__flecha .vc-icono { transition: translate var(--vc-dur-2) var(--vc-ease); }
  @media (hover: hover) {
    .vc-proyecto:hover .vc-proyecto__sombra, .vc-proyecto:focus-within .vc-proyecto__sombra { translate: calc(-1.6 * var(--vc-sombra-trama) - var(--vc-desregistro-x, 0px)) calc(1.6 * var(--vc-sombra-trama) + var(--vc-desregistro-y, 0px)); }
    .vc-proyecto:hover .vc-proyecto__flecha .vc-icono { translate: 3px 0; }
  }
}
@layer motion {
  /* Carga en diferido: la captura aparece con un fundido desde el papel del marco (solo con JS, que añade .vc-cargada al cargar). */
  .vc-proyecto__imagen img { transition: opacity var(--vc-dur-3) var(--vc-ease); }
  .vc-js .vc-proyecto__imagen:not(.vc-cargada) img { opacity: 0; }
}

/* ---- componentes/contenido/Vineta.css ---- */
@layer componentes {
  /* Marco: transparente, aísla la pila (la sombra no puede irse detrás del fondo de la banda). */
  .vc-vineta { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; max-width: none; }
  .vc-vineta__cuerpo { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: var(--vc-e-4); min-width: 0; padding: var(--vc-relleno-vineta, clamp(20px, 2.2vw, 32px)); border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio); background: var(--vc-color-fondo); color: var(--vc-color-tinta); }
  .vc-vineta--panel .vc-vineta__cuerpo { border-radius: var(--vc-radio-panel); }
  .vc-vineta--blanco > .vc-vineta__cuerpo { --vc-color-fondo: var(--vc-blanco); }
  .vc-vineta--papel > .vc-vineta__cuerpo { --vc-color-fondo: var(--vc-papel); }
  /* Sombra de trama: la silueta de la viñeta en puntos de tinta, desplazada abajo a la izquierda (el vector de la marca: −1, +1). */
  .vc-vineta__sombra { position: absolute; inset: 0; z-index: 0; border-radius: var(--vc-radio); translate: calc(-1 * var(--vc-sombra-trama) - var(--vc-desregistro-x, 0px)) calc(var(--vc-sombra-trama) + var(--vc-desregistro-y, 0px)); background-color: var(--vc-tinta); -webkit-mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; }
  .vc-vineta--panel .vc-vineta__sombra { border-radius: var(--vc-radio-panel); }
  /* Dentro de una banda de tinta la sombra es de puntos amarillos (sobre tinta, el énfasis en amarillo). */
  .vc-invertida .vc-vineta__sombra { background-color: var(--vc-amarillo); }
}
@layer motion {
  /* Respuesta: la plancha de trama se desplaza hasta 16 px y la viñeta parece levantarse. La tinta (contorno, texto) no se mueve. */
  .vc-vineta--interactiva .vc-vineta__sombra { transition: translate var(--vc-dur-2) var(--vc-ease); }
  @media (hover: hover) {
    .vc-vineta--interactiva:hover .vc-vineta__sombra, .vc-vineta--interactiva:focus-within .vc-vineta__sombra { translate: calc(-1.6 * var(--vc-sombra-trama) - var(--vc-desregistro-x, 0px)) calc(1.6 * var(--vc-sombra-trama) + var(--vc-desregistro-y, 0px)); }
  }
}

/* ---- componentes/estructura/Cabecera.css ---- */
@layer componentes {
  /* Píxeles fuera de los tokens, y por qué: 44 = objetivo táctil; 24 = retícula de los iconos del kit; 900 = umbral del menú plegado. */
  .vc-cabecera { position: sticky; top: 0; z-index: 10; background: var(--vc-color-fondo); color: var(--vc-color-tinta); container-type: inline-size; border-bottom: var(--vc-borde) solid transparent; }
  /* Filete inferior ligado al scroll (aparece en los primeros 12 px y vuelve al subir), sin listener; el píxel está reservado. */
  @supports (animation-timeline: scroll()) {
    .vc-cabecera { animation: vc-filete linear both; animation-timeline: scroll(root); animation-range: 0 12px; }
  }
  .vc-cabecera--pegada { border-bottom-color: var(--vc-color-linea); }
  .vc-cabecera__interior { min-height: var(--vc-alto-cabecera); max-width: calc(var(--vc-ancho-contenido) + 2 * var(--vc-margen)); margin-inline: auto; padding-inline: var(--vc-margen); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: var(--vc-e-6); }
  .vc-cabecera__marca { order: 1; justify-self: start; display: flex; }
  /* El logotipo: la imagen del kit, con su área de respeto (la altura de las mayúsculas, ≈ 16 px a este tamaño) por los lados. */
  .vc-cabecera__logo { display: flex; line-height: 0; border-radius: var(--vc-radio-etiqueta); }
  .vc-cabecera__logo img { display: block; height: auto; }
  .vc-cabecera__logo:hover { text-decoration: none; }
  .vc-cabecera__panel { display: contents; }
  .vc-cabecera__nav { order: 2; justify-self: end; }
  .vc-cabecera__idioma { order: 3; }
  .vc-cabecera__acciones { order: 4; display: inline-flex; align-items: center; gap: var(--vc-e-3); justify-self: end; }
  .vc-cabecera__lista { display: flex; flex-wrap: wrap; column-gap: var(--vc-e-6); row-gap: 0; }
  .vc-cabecera__lista li { max-width: none; }
  /* Menú: Medium 15 (manual). Subrayado que se dibuja de izquierda a derecha (fondo de 2 px animado); la página actual lo lleva ya. */
  .vc-cabecera__enlace { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--vc-t-menu); font-weight: var(--vc-peso-medio); line-height: 1.2; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(100% - 0.5em); background-size: 0% 2px; transition: background-size var(--vc-dur-2) var(--vc-ease); }
  .vc-cabecera__enlace:hover, .vc-cabecera__enlace:focus-visible, .vc-cabecera__enlace[aria-current="page"] { text-decoration: none; background-size: 100% 2px; }
  .vc-cabecera__idioma { display: inline-flex; align-items: center; gap: var(--vc-e-2); font-size: var(--vc-t-nota); color: var(--vc-color-tinta-2); }
  .vc-cabecera__lengua { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--vc-e-1); }
  .vc-cabecera__lengua[aria-current="true"] { color: var(--vc-color-tinta); text-decoration: underline; text-decoration-thickness: 2px; }
  .vc-cabecera__menu { display: none; }
  .vc-cabecera__boton { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-end: calc(-1 * var(--vc-e-2)); cursor: pointer; border-radius: var(--vc-radio-etiqueta); }
  .vc-cabecera__boton::marker { content: ""; }
  .vc-cabecera__boton::-webkit-details-marker { display: none; }
  .vc-cabecera__abrir, .vc-cabecera__cerrar { display: inline-flex; }
  .vc-cabecera__menu[open] .vc-cabecera__abrir { display: none; }
  .vc-cabecera__menu:not([open]) .vc-cabecera__cerrar { display: none; }

  /* ≤ 900 px: logotipo + botón + menú; el mismo <nav> cae bajo la barra cuando el <details> está abierto. */
  @container (max-width: 900px) {
    .vc-cabecera__interior { grid-template-columns: 1fr auto; column-gap: var(--vc-e-4); }
    .vc-cabecera__menu { display: block; }
    .vc-cabecera__panel { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--vc-color-fondo); color: var(--vc-color-tinta); border-bottom: var(--vc-contorno) solid var(--vc-tinta); padding: var(--vc-e-4) var(--vc-margen) var(--vc-e-6); }
    /* El panel se imprime hacia abajo (pasada, 200 ms); sigue siendo un <details> sin JS. Sin @starting-style, aparece en seco. */
    .vc-cabecera__panel { clip-path: inset(0 0 100% 0); transition: clip-path var(--vc-dur-2) var(--vc-ease), display var(--vc-dur-2) allow-discrete; }
    .vc-cabecera:has(.vc-cabecera__menu[open]) .vc-cabecera__panel { display: grid; row-gap: var(--vc-e-5); clip-path: inset(0 0 0 0); }
    @starting-style { .vc-cabecera:has(.vc-cabecera__menu[open]) .vc-cabecera__panel { clip-path: inset(0 0 100% 0); } }
    .vc-cabecera__nav { justify-self: stretch; }
    .vc-cabecera__lista { flex-direction: column; row-gap: var(--vc-e-1); }
    .vc-cabecera__enlace { font-size: var(--vc-t-subtitulo); font-weight: var(--vc-peso-display); background-position: 0 calc(100% - 0.3em); background-size: 0% 3px; }
    .vc-cabecera__enlace:hover, .vc-cabecera__enlace[aria-current="page"] { background-size: 100% 3px; }
    .vc-cabecera__idioma { justify-self: start; padding-top: var(--vc-e-4); border-top: var(--vc-borde) solid var(--vc-color-linea); width: 100%; }
  }
}

/* ---- componentes/estructura/Pie.css ---- */
@layer componentes {
  /* Banda de tinta a sangre: papel encima, énfasis en amarillo. El logotipo vertical en color negativo (mínimo 110 px; aquí 176). */
  .vc-pie { padding: var(--vc-e-seccion) var(--vc-margen) var(--vc-e-7); font-size: var(--vc-t-boton); }
  .vc-pie__interior { max-width: var(--vc-ancho-contenido); margin-inline: auto; display: grid; gap: var(--vc-e-8); }
  .vc-pie__presentacion { display: grid; gap: var(--vc-e-5); align-content: start; justify-items: start; max-width: 40ch; }
  .vc-pie__logo { display: block; line-height: 0; border-radius: var(--vc-radio-etiqueta); }
  .vc-pie__logo img { height: auto; }
  .vc-pie__logo:hover { text-decoration: none; }
  .vc-pie__descripcion { color: var(--vc-color-tinta-2); max-width: none; }
  .vc-pie__redes { display: flex; flex-wrap: wrap; gap: var(--vc-e-5); }
  .vc-pie__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--vc-e-7) var(--vc-e-6); align-content: start; }
  /* Título de columna: la etiqueta del manual (12 Bold, mayúsculas, +12 %) en amarillo: sobre tinta el énfasis es amarillo. */
  .vc-pie__titulo { font-size: var(--vc-t-etiqueta); line-height: 1.3; letter-spacing: var(--vc-tracking-etiqueta); text-transform: uppercase; color: var(--vc-inv-acento-texto); margin-bottom: var(--vc-e-4); }
  .vc-pie__lista { display: grid; gap: var(--vc-e-2); }
  .vc-pie__lista li, .vc-pie__redes li, .vc-pie__legal li { max-width: none; }
  .vc-pie__enlace { color: inherit; display: inline-block; padding-block: 2px; }
  .vc-pie__franja { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vc-e-4) var(--vc-e-6); padding-top: var(--vc-e-5); border-top: var(--vc-borde) solid var(--vc-color-linea); font-size: var(--vc-t-nota); color: var(--vc-color-tinta-2); }
  .vc-pie__firma { max-width: none; }
  .vc-pie__lugares::before { content: " · "; white-space: pre; }
  .vc-pie__legal { display: flex; flex-wrap: wrap; gap: 0; }
  .vc-pie__legal li + li::before { content: " · "; white-space: pre; }
  @media (min-width: 900px) {
    .vc-pie__interior { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--vc-e-8); }
    .vc-pie__franja { grid-column: 1 / -1; }
  }
}

/* ---- componentes/estructura/Seccion.css ---- */
@layer componentes {
  .vc-seccion { position: relative; padding-block: var(--vc-e-seccion); padding-inline: var(--vc-margen); background: var(--vc-color-fondo); color: var(--vc-color-tinta); }
  .vc-seccion__interior { position: relative; z-index: 1; max-width: var(--vc-ancho-contenido); margin-inline: auto; }
  .vc-seccion__interior > * + * { margin-top: var(--vc-e-6); }
  .vc-seccion--grande { padding-block: var(--vc-e-seccion-grande); }
  .vc-seccion--ninguno { padding-block: 0; }
  .vc-seccion--blanco { --vc-color-fondo: var(--vc-blanco); }
  /* Dos bandas seguidas del mismo tono no dejan doble respiro. */
  .vc-seccion--invertida + .vc-seccion--invertida, .vc-seccion--blanco + .vc-seccion--blanco, .vc-seccion--acento + .vc-seccion--acento { padding-top: 0; }
}

/* ---- componentes/formulario/Campo.css ---- */
@layer componentes {
  /* Campos del manual (p. 19): blancos, radio 12, etiqueta Medium a 14 px encima. Con la capa pop el borde es de tinta y de 2 px (el
     contorno de un bocadillo), que además cumple 3:1 como límite del control (el gris claro del ejemplo del kit no llegaba). */
  .vc-campo { display: grid; gap: var(--vc-e-2); width: 100%; max-width: var(--vc-medida); }
  .vc-campo__etiqueta { font-size: var(--vc-t-nota); line-height: 1.3; font-weight: var(--vc-peso-medio); color: var(--vc-color-tinta); }
  .vc-campo__opcional { font-weight: var(--vc-peso-cuerpo); color: var(--vc-color-tinta-2); }
  .vc-campo__control { display: block; width: 100%; min-height: 48px; padding: var(--vc-e-3) var(--vc-e-4); background: var(--vc-blanco); color: var(--vc-tinta); border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: var(--vc-radio); font-family: var(--vc-f-cuerpo); font-size: var(--vc-t-boton); line-height: 1.4; appearance: none; }
  .vc-campo__control::placeholder { color: var(--vc-color-tinta-3); opacity: 1; }
  textarea.vc-campo__control { resize: vertical; min-height: 120px; }
  .vc-campo__control:focus-visible { outline: 2px solid var(--vc-color-tinta); outline-offset: 3px; box-shadow: none; }
  .vc-campo__control:disabled { background: var(--vc-color-desactivado); color: var(--vc-color-desactivado-tinta); border-color: var(--vc-color-desactivado); cursor: not-allowed; }
  .vc-campo__ayuda { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); }
  .vc-campo__error { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-error); font-weight: var(--vc-peso-medio); }
  .vc-campo--error .vc-campo__control { border-color: var(--vc-color-error); }
  .vc-invertida .vc-campo__error { color: var(--vc-inv-acento-texto); }
}

/* ---- componentes/formulario/Casilla.css ---- */
@layer componentes {
  /* Casilla, de la familia de Campo (manual p. 19 + capa pop): una caja con el contorno de tinta de 2 px de los campos y su radio a la
     mitad (la caja mide la mitad que un campo); marcada, la masa amarilla con la marca «check» del kit en tinta (10,93:1). El control es
     el <input> nativo sin apariencia: el foco (anillo de base.css), la validación del navegador y el lector de pantalla son los de una
     casilla normal. Píxeles fuera de los tokens, y por qué: 24 = retícula de los iconos del kit (la caja y su marca); 44 = objetivo
     táctil; 10 = lo que centra la caja de 24 en una fila de 44; 3 = la marca a 18 px dentro de la caja. */
  .vc-casilla { display: grid; gap: var(--vc-e-1); min-width: 0; }
  .vc-casilla__fila { display: flex; align-items: flex-start; gap: var(--vc-e-3); min-height: 44px; padding-block: 10px; color: var(--vc-color-tinta); cursor: pointer; }
  .vc-casilla__caja { position: relative; flex: none; display: block; width: 24px; height: 24px; }
  .vc-casilla__control { display: block; width: 24px; height: 24px; margin: 0; -webkit-appearance: none; appearance: none; background: var(--vc-blanco); border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: calc(var(--vc-radio) / 2); cursor: pointer; transition: box-shadow var(--vc-dur-1) var(--vc-ease); }
  .vc-casilla__control:checked { background: var(--vc-amarillo); }
  /* La marca del kit, trazo 3 (a 18 px el 2 del kit se queda fino junto al contorno de 2 px). Solo se ve marcada. */
  .vc-casilla__caja .vc-casilla__marca { position: absolute; inset: 0; display: block; width: 24px; height: 24px; padding: 3px; color: var(--vc-tinta); stroke-width: 3; opacity: 0; pointer-events: none; }
  .vc-casilla__control:checked + .vc-casilla__marca { opacity: 1; }
  /* El texto a 16 con interlínea de 24: la primera línea queda centrada con la caja. Los enlaces, subrayados en reposo (dentro de una
     frase un enlace debe verse sin cursor); hover = subrayado más grueso. */
  .vc-casilla__texto { min-width: 0; font-size: var(--vc-t-boton); line-height: 1.5; }
  .vc-casilla__texto a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  .vc-casilla__texto a:hover, .vc-casilla__texto a:focus-visible { text-decoration-thickness: 2px; }
  .vc-casilla__ayuda, .vc-casilla__error { padding-left: calc(24px + var(--vc-e-3)); font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); }
  .vc-casilla__ayuda { color: var(--vc-color-tinta-2); }
  .vc-casilla__error { color: var(--vc-color-error); font-weight: var(--vc-peso-medio); }
  .vc-casilla--error .vc-casilla__control { border-color: var(--vc-color-error); }
  /* Desactivada (manual: «No disponible»): gris del kit, sin respuesta. */
  .vc-casilla__control:disabled { background: var(--vc-color-desactivado); border-color: var(--vc-color-desactivado); cursor: not-allowed; }
  .vc-casilla:has(.vc-casilla__control:disabled) .vc-casilla__fila { color: var(--vc-color-desactivado-tinta); cursor: not-allowed; }

  /* Píldora: la caja dentro de una píldora con el contorno de 2 px (la forma de los botones y de la lista de servicios). Marcada, la
     píldora es la masa amarilla y la caja se queda en blanco con la marca de tinta. 8 = lo que deja la píldora en 44 px de alto. */
  .vc-casilla--pildora .vc-casilla__fila { align-items: center; gap: var(--vc-e-2); padding: 8px var(--vc-e-4) 8px var(--vc-e-3); border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: var(--vc-radio-pildora); background: var(--vc-blanco); color: var(--vc-tinta); transition: box-shadow var(--vc-dur-1) var(--vc-ease); }
  .vc-casilla--pildora .vc-casilla__texto { font-weight: var(--vc-peso-medio); line-height: 1.25; }
  .vc-casilla--pildora .vc-casilla__control:checked { background: var(--vc-blanco); }
  .vc-casilla--pildora:has(.vc-casilla__control:checked) .vc-casilla__fila { background: var(--vc-amarillo); }
  /* En la píldora, el anillo de foco rodea la píldora entera (sin :has, se queda en la caja, como en la casilla de frase). */
  @supports selector(:has(*)) {
    .vc-casilla--pildora .vc-casilla__control:focus-visible { outline: none; box-shadow: none; }
    .vc-casilla--pildora:has(.vc-casilla__control:focus-visible) .vc-casilla__fila { outline: 2px solid var(--vc-color-tinta); outline-offset: 2px; box-shadow: 0 0 0 4px var(--vc-color-fondo); }
  }

  /* La segunda tinta al pasar el cursor (como los botones): un bloque duro desplazado abajo a la izquierda, en la tinta del contexto
     (papel dentro de una banda de tinta, donde la tinta no se vería). */
  @media (hover: hover) {
    .vc-casilla:not(.vc-casilla--pildora) .vc-casilla__fila:hover .vc-casilla__control:not(:disabled) { box-shadow: -2px 2px 0 0 var(--vc-color-tinta); }
    .vc-casilla--pildora .vc-casilla__fila:hover { box-shadow: -3px 3px 0 0 var(--vc-color-tinta); }
  }

  /* Grupo: la leyenda como la etiqueta de un campo (Medium 14 encima); flotante para que sea una fila más de la rejilla y no la leyenda
     «incrustada» en el borde del fieldset. Píldoras en línea; casillas de frase, una por fila. */
  .vc-casillas { display: grid; gap: var(--vc-e-2); min-width: 0; margin: 0; padding: 0; border: 0; }
  .vc-casillas__leyenda { float: left; width: 100%; padding: 0; font-size: var(--vc-t-nota); line-height: 1.3; font-weight: var(--vc-peso-medio); color: var(--vc-color-tinta); }
  .vc-casillas__opcional { font-weight: var(--vc-peso-cuerpo); color: var(--vc-color-tinta-2); }
  .vc-casillas__ayuda { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); }
  .vc-casillas__opciones { display: flex; flex-wrap: wrap; gap: var(--vc-e-2); }
  .vc-casillas__opciones > .vc-casilla { flex: 1 1 100%; }
  .vc-casillas__opciones > .vc-casilla--pildora { flex: 0 1 auto; }
  .vc-casillas__error { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-error); font-weight: var(--vc-peso-medio); }
  .vc-casillas--error .vc-casilla__control, .vc-casillas--error .vc-casilla--pildora .vc-casilla__fila { border-color: var(--vc-color-error); }

  /* Banda de tinta: el error en amarillo, como el de Campo (el rojo no se lee sobre la tinta). */
  .vc-invertida .vc-casilla__error, .vc-invertida .vc-casillas__error { color: var(--vc-inv-acento-texto); }
}

/* ---- componentes/formulario/NotaRgpd.css ---- */
@layer componentes {
  /* Tipografía de nota (14/20, tinta secundaria) la aporta `vc-texto--nota`, que el TSX añade siempre:
     aquí solo lo propio de la nota. `text-wrap: pretty` evita una última línea de una sola palabra en un párrafo legal largo. */
  .vc-nota-rgpd { text-wrap: pretty; }
  /* Enlaces en el propio tono del párrafo, subrayados en reposo (dentro de un párrafo un enlace debe verse sin cursor).
     Hover = subrayado más grueso, nunca cambio de color: misma convención que `.vc-enlace`. 1 px y 2 px son grosores de
     línea, no espaciado. */
  .vc-nota-rgpd a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  .vc-nota-rgpd a:hover, .vc-nota-rgpd a:focus-visible { text-decoration-thickness: 2px; }
}

/* ---- componentes/formulario/Selector.css ---- */
@layer componentes {
  /* Selector: la caja de Campo (.vc-campo__control) con un <select> nativo. La flecha, dos bordes de tinta de 2 px girados (una «V» de
     rotulador), fuera del control para que el clic llegue siempre al <select>. Píxeles fuera de los tokens, y por qué: 9 = la «V» a la
     altura de la x del texto de 16; 18 = su distancia al borde derecho; 2 = el remate redondeado de la esquina de la «V». */
  .vc-selector__caja { position: relative; display: block; }
  .vc-selector__caja::after { content: ""; position: absolute; top: 50%; right: 18px; width: 9px; height: 9px; border-right: var(--vc-borde-campo) solid var(--vc-tinta); border-bottom: var(--vc-borde-campo) solid var(--vc-tinta); border-bottom-right-radius: 2px; translate: 0 -70%; rotate: 45deg; pointer-events: none; }
  .vc-selector__control { padding-right: calc(18px + 9px + var(--vc-e-4)); text-overflow: ellipsis; cursor: pointer; }
  .vc-selector__control:disabled { cursor: not-allowed; }
  .vc-selector__caja:has(.vc-selector__control:disabled)::after { border-color: var(--vc-color-desactivado-tinta); }
}

/* ---- web.css ---- */
/* Volumen Cero · CSS de página (solo tokens del sistema). Lo que no es de un componente vive aquí: las composiciones de la portada,
   la página de servicios, la tira del método, la palabra con trama, los bocadillos de preguntas, el contacto y los formularios y el
   boletín. Marca v1.0 + capa pop. */
@layer componentes {
  .vc-saltar { position: absolute; left: -999px; top: 0; z-index: 20; background: var(--vc-amarillo); color: var(--vc-tinta); padding: var(--vc-e-2) var(--vc-e-4); border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: var(--vc-radio-etiqueta); font-weight: var(--vc-peso-medio); }
  .vc-saltar:focus { left: var(--vc-margen); top: var(--vc-e-2); }
  .vc-svg { display: block; }
  .vc-svg > svg { display: block; inline-size: 100%; block-size: auto; }

  /* Cabeza de una banda: titular y entradilla, en columna. Sin cartucho encima (Bruce, 2026-09-27: «parece una web IA con eso»; es el
     eyebrow sobre todos los h2 de la checklist anti-slop, B3). */
  .vc-cabeza-banda { display: grid; gap: var(--vc-e-4); justify-items: start; }

  /* ================= Portada ================= */
  .vc-portada { padding-block: clamp(32px, 5vw, 80px) clamp(24px, 3vw, 48px); }
  .vc-portada .vc-seccion__interior { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); row-gap: var(--vc-e-8); align-items: center; }
  .vc-portada .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-portada__texto { display: grid; gap: var(--vc-e-5); justify-items: start; }
  .vc-portada__texto .vc-titular--portada { max-width: 13ch; }
  .vc-portada__acciones { display: flex; flex-wrap: wrap; gap: var(--vc-e-3); margin-top: var(--vc-e-2); }
  /* La viñeta amarilla con el V0 que se dibuja, sola desde la 3.3 (fuera la viñeta del caso que colgaba de su esquina: Bruce, «no quiero
     cosas que se note que pasa el tiempo»): la rejilla la centra en vertical con el texto. */
  .vc-portada__vinetas { position: relative; }
  .vc-portada__v0 { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.9; padding: 19% 13% 17%; overflow: hidden; background: var(--vc-amarillo); color: var(--vc-tinta); border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio-panel); }
  /* La sombra de puntos de la viñeta: un triángulo de trama en la esquina de arriba a la derecha, como el sombreado de Lichtenstein. */
  .vc-portada__trama { position: absolute; inset: 0; clip-path: polygon(64% 0, 100% 0, 100% 46%); --vc-trama-paso: 12px; }
  .vc-portada__isotipo { position: relative; z-index: 1; width: 100%; max-width: 360px; translate: -3% 0; }
  /* La trama viva (efectos.js): el lienzo cubre la viñeta por debajo del V0; cuando está activo, la trama estática de CSS se retira. */
  .vc-portada__lienzo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
  .vc-portada__v0--viva .vc-portada__trama { display: none; }
  .vc-efectos .vc-portada__v0 { cursor: pointer; }
  .vc-portada__lema { position: absolute; z-index: 1; left: clamp(18px, 6%, 36px); top: clamp(16px, 5.5%, 30px); max-width: 16ch; font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem); line-height: 1.15; font-weight: var(--vc-peso-display); }
  @media (max-width: 900px) {
    .vc-portada .vc-seccion__interior { grid-template-columns: minmax(0, 1fr); }
    .vc-portada__vinetas { max-width: 560px; width: 100%; justify-self: center; }
  }
  @media (max-width: 560px) {
    .vc-portada__v0 { padding: 21% 12% 15%; }
  }

  /* ================= Proyectos ================= */
  .vc-proyectos__puntos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--vc-e-3); }
  .vc-proyectos .vc-seccion__interior > .vc-proyectos__pareja { margin-top: clamp(40px, 5vw, 56px); }
  .vc-proyectos__pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(28px, 3vw, 40px); }
  @media (max-width: 760px) { .vc-proyectos__pareja { grid-template-columns: minmax(0, 1fr); } }
  .vc-proyectos__puntos .vc-punto { padding: var(--vc-e-3) var(--vc-e-4); }

  /* ================= Servicios: una página de cómic de seis viñetas ================= */
  .vc-servicios__pagina { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; }
  .vc-servicio--webs { grid-column: span 4; }
  .vc-servicio--tiendas { grid-column: span 2; }
  .vc-servicio--libros, .vc-servicio--redes, .vc-servicio--posicionamiento { grid-column: span 2; }
  .vc-servicio--branding { grid-column: span 6; }
  .vc-servicio .vc-vineta__cuerpo { gap: var(--vc-e-3); min-height: 260px; }
  /* El dibujo (encargo v2) es la viñeta, como en un cómic: arriba y a todo el ancho en las pequeñas, al lado del texto en las grandes.
     Nunca un icono sobre el título (REQUISITOS §9). */
  .vc-servicio__dibujo { max-inline-size: none; }
  .vc-servicio__nombre { font-size: var(--vc-t-subtitulo); line-height: var(--vc-interlineado-subtitulo); font-weight: var(--vc-peso-display); }
  .vc-servicio--webs .vc-servicio__nombre { font-size: var(--vc-t-portada); line-height: var(--vc-interlineado-display); letter-spacing: var(--vc-tracking-display); }
  .vc-servicio--webs .vc-servicio__frase { font-size: var(--vc-t-entradilla); max-width: 34ch; }
  .vc-servicio__frase { color: var(--vc-color-tinta-2); max-width: 40ch; }
  /* El precio, al pie de la viñeta, separado por la línea de contorno: cifras tabulares. */
  .vc-servicio .vc-vineta__cuerpo > .vc-servicio__precio { margin-top: auto; padding-top: var(--vc-e-3); border-top: var(--vc-borde-campo) solid var(--vc-color-tinta); font-weight: var(--vc-peso-medio); font-size: var(--vc-t-nota); font-variant-numeric: tabular-nums; max-width: none; }
  /* Webs, la grande: el texto a la izquierda y el dibujo a la derecha, centrado en el alto de la viñeta. */
  .vc-servicio--webs .vc-vineta__cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr auto; column-gap: var(--vc-e-7); }
  .vc-servicio--webs .vc-servicio__dibujo { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .vc-servicio--webs .vc-servicio__nombre, .vc-servicio--webs .vc-servicio__frase { grid-column: 1; }
  .vc-servicio--webs .vc-vineta__cuerpo > .vc-servicio__precio { grid-column: 1; grid-row: 4; }
  /* Branding, la apaisada que cierra la página: el dibujo, el texto y las piezas de un kit, de izquierda a derecha. */
  .vc-servicio--branding .vc-vineta__cuerpo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr auto; column-gap: var(--vc-e-7); min-height: 0; }
  .vc-servicio--branding .vc-servicio__dibujo { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .vc-servicio--branding .vc-servicio__nombre, .vc-servicio--branding .vc-servicio__frase { grid-column: 2; }
  .vc-servicio--branding .vc-vineta__cuerpo > .vc-servicio__precio { grid-column: 2; grid-row: 4; }
  .vc-servicio--branding .vc-servicio__piezas { grid-column: 3; grid-row: 1 / -1; align-self: center; }
  .vc-servicio__piezas .vc-etiqueta { border: var(--vc-borde-campo) solid var(--vc-tinta); background: var(--vc-papel); font-size: var(--vc-t-boton); min-height: 40px; padding-inline: var(--vc-e-4); }
  @media (max-width: 960px) {
    .vc-servicios__pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-servicio--webs, .vc-servicio--branding { grid-column: span 2; }
    .vc-servicio--tiendas, .vc-servicio--libros, .vc-servicio--redes, .vc-servicio--posicionamiento { grid-column: span 1; }
    /* Branding en dos columnas: el dibujo y el texto; las piezas del kit, debajo a todo el ancho. */
    .vc-servicio--branding .vc-vineta__cuerpo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr auto auto; }
    .vc-servicio--branding .vc-servicio__dibujo { grid-row: 1 / 5; }
    .vc-servicio--branding .vc-servicio__piezas { grid-column: 1 / -1; grid-row: 5; margin-top: var(--vc-e-3); }
  }
  @media (max-width: 620px) {
    .vc-servicios__pagina { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .vc-servicio--webs, .vc-servicio--branding, .vc-servicio--tiendas, .vc-servicio--libros, .vc-servicio--redes, .vc-servicio--posicionamiento { grid-column: auto; }
    .vc-servicio .vc-vineta__cuerpo { min-height: 0; }
    /* En una columna, todas iguales: el dibujo arriba y el texto debajo (las colocaciones de rejilla no cuentan en flex). */
    .vc-servicio--webs .vc-vineta__cuerpo, .vc-servicio--branding .vc-vineta__cuerpo { display: flex; flex-direction: column; }
  }

  /* ================= Método: la tira de cinco viñetas ================= */
  .vc-tira__vinetas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 22px; padding-top: var(--vc-e-5); }
  .vc-tira__vineta { position: relative; isolation: isolate; display: flex; max-width: none; }
  .vc-tira__sombra { position: absolute; inset: 0; z-index: 0; border-radius: var(--vc-radio); translate: calc(-1 * var(--vc-sombra-trama) - var(--vc-desregistro-x, 0px)) calc(var(--vc-sombra-trama) + var(--vc-desregistro-y, 0px)); background-color: var(--vc-tinta); -webkit-mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; }
  .vc-tira__cuerpo { position: relative; z-index: 1; flex: 1; display: grid; align-content: start; gap: var(--vc-e-2); padding: 40px var(--vc-e-5) var(--vc-e-5); background: var(--vc-blanco); border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio); }
  .vc-tira__vineta:nth-child(even) .vc-tira__cuerpo { background: var(--vc-amarillo); }
  .vc-tira__sombra { transition: translate var(--vc-dur-2) var(--vc-ease); }
  @media (hover: hover) { .vc-tira__vineta:hover .vc-tira__sombra { translate: calc(-1.6 * var(--vc-sombra-trama) - var(--vc-desregistro-x, 0px)) calc(1.6 * var(--vc-sombra-trama) + var(--vc-desregistro-y, 0px)); } }
  .vc-tira__numero { position: absolute; top: -24px; left: var(--vc-e-4); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--vc-tinta); color: var(--vc-papel); font-size: 1.375rem; font-weight: var(--vc-peso-display); line-height: 1; }
  .vc-tira__vineta:nth-child(even) .vc-tira__numero { color: var(--vc-amarillo); }
  .vc-tira__titulo { font-size: var(--vc-t-bloque); line-height: 1.2; }
  .vc-tira__linea { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-tinta-80); }
  /* El dibujo del paso (encargo v2), a todo el ancho de la viñeta, como el cuadro de una tira; debajo, el pie. En móvil, a la izquierda. */
  .vc-tira__dibujo { max-inline-size: 240px; margin-block-end: var(--vc-e-1); }
  @media (max-width: 1080px) { .vc-tira__vinetas { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; } }
  @media (max-width: 640px) {
    .vc-tira__vinetas { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
    .vc-tira__cuerpo { grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--vc-e-4); align-items: center; }
    .vc-tira__dibujo { grid-row: 1 / span 2; margin: 0; }
  }

  /* ================= La palabra impresa con trama, mordida por la banda de tinta ================= */
  .vc-palabra { position: relative; z-index: 0; overflow: clip; padding: var(--vc-e-6) var(--vc-margen) 0; margin-bottom: calc(-0.075 * var(--vc-t-gigante)); text-align: center; }
  .vc-palabra .vc-titular--gigante { display: block; }
  .vc-estudio { z-index: 1; }

  /* ================= Estudio: banda de tinta, texto y el V0 repetido en sus cuatro versiones ================= */
  .vc-estudio .vc-seccion__interior { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 96px); row-gap: var(--vc-e-7); align-items: center; }
  .vc-estudio .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-estudio__texto { display: grid; gap: var(--vc-e-5); justify-items: start; }
  .vc-estudio__versiones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vc-e-4); }
  .vc-estudio__version { display: grid; place-items: center; aspect-ratio: 1; padding: 20%; border: var(--vc-contorno) solid var(--vc-papel); border-radius: var(--vc-radio); max-width: none; }
  .vc-estudio__version--papel { background: var(--vc-papel); }
  .vc-estudio__version--amarillo { background: var(--vc-amarillo); }
  .vc-estudio__version--tinta { background: var(--vc-tinta); }
  .vc-estudio__version--blanco { background: var(--vc-blanco); }
  @media (max-width: 900px) { .vc-estudio .vc-seccion__interior { grid-template-columns: minmax(0, 1fr); } .vc-estudio__versiones { max-width: 460px; } }

  /* ================= Preguntas: un chat. La pregunta es un mensaje sin enviar; al enviarla llega la respuesta ================= */
  /* Componente Conversacion. Cada par es un <details>: la pregunta es su <summary> (el bocadillo blanco con «Enviar →» montado sobre el
     contorno) y la respuesta, el bocadillo amarillo a la derecha, como en un chat. Sin JS abre y cierra el navegador; la coreografía del
     envío la pone efectos.js con tres clases: --enviando (la flecha sale), --escribiendo (tres puntos) y --respondida (llega impresa). */
  .vc-charla { display: grid; gap: var(--vc-e-2); max-width: 780px; }
  .vc-charla__pregunta { display: block; width: fit-content; max-width: min(100%, 38rem); list-style: none; cursor: pointer; border-radius: var(--vc-radio-bocadillo); }
  .vc-charla__pregunta::-webkit-details-marker { display: none; }
  .vc-charla__pregunta::marker { content: ""; }
  .vc-charla__pregunta:focus-visible { outline-offset: 4px; border-radius: var(--vc-radio-bocadillo); }
  /* El cuerpo reserva abajo sitio para medio botón (el otro medio queda fuera, sobre el papel); ancho mínimo para que el botón no pise
     la cola, que sale por la izquierda. */
  .vc-charla__globo .vc-bocadillo__cuerpo { min-width: 15rem; padding-bottom: calc(var(--vc-e-5) + 8px); font-size: var(--vc-t-bloque); line-height: 1.3; font-weight: var(--vc-peso-display); }
  .vc-charla__enviar { position: absolute; right: clamp(18px, 9%, 36px); bottom: 0; translate: 0 50%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 15px; border: var(--vc-contorno) solid var(--vc-tinta); border-radius: 999px; background: var(--vc-tinta); color: var(--vc-papel); font-size: var(--vc-t-nota); line-height: 1; font-weight: var(--vc-peso-display); transition: box-shadow var(--vc-dur-1) var(--vc-ease); }
  .vc-charla__flecha { flex: none; transition: translate var(--vc-dur-1) var(--vc-ease); }
  /* Con puntero: la segunda tinta de los botones (bloque amarillo duro, sin cambio de color) y la flecha que empuja. */
  @media (hover: hover) and (pointer: fine) {
    .vc-charla__pregunta:hover .vc-charla__enviar { box-shadow: -3px 3px 0 0 var(--vc-amarillo); }
    .vc-charla__pregunta:hover .vc-charla__flecha { translate: 3px 0; }
  }
  /* Enviada: el botón desaparece (el mensaje ya salió). Volver a pulsarla la recoge. */
  .vc-charla__par[open] .vc-charla__enviar { visibility: hidden; }
  /* align-items: flex-start: el bocadillo mide lo que su contenido aunque el hueco reservado sea más alto (si se estirase, la cola se
     quedaría abajo del hueco y no pegada a la píldora). */
  .vc-charla__respuesta { position: relative; display: flex; justify-content: flex-end; align-items: flex-start; }
  .vc-charla__globo-respuesta { max-width: min(100%, 38rem); }
  .vc-charla__globo-respuesta .vc-bocadillo__cuerpo { max-width: 46ch; }
  /* Los puntos y el texto comparten bocadillo: sin el margen entre hijos del bocadillo (empujaba dos de los tres puntos hacia abajo). */
  .vc-charla__globo-respuesta .vc-bocadillo__cuerpo > * { margin-top: 0; }
  /* La cola, a una distancia fija del borde derecho: mientras el bocadillo crece, no se desliza. */
  .vc-charla__globo-respuesta .vc-bocadillo__cola { right: 28px; }
  .vc-charla__texto { display: block; }
  .vc-charla__enlace { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; font-weight: var(--vc-peso-medio); }
  /* «Escribiendo…» (efectos.js): el propio bocadillo de la respuesta, reducido a una píldora con tres puntos de tinta en línea, arriba a la
     derecha del hueco que ya ocupa la respuesta (la página se mueve una sola vez, al pulsar). Después crece hasta su tamaño y el texto,
     que no se mueve, queda dentro. */
  .vc-charla__puntos { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 8px; }
  .vc-charla__punto { display: block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--vc-tinta); }
  .vc-charla__par--escribiendo .vc-charla__puntos, .vc-charla__par--creciendo .vc-charla__puntos { display: flex; }
  .vc-charla__par--escribiendo .vc-charla__texto { opacity: 0; }
  .vc-charla__par--escribiendo .vc-charla__globo-respuesta .vc-bocadillo__cuerpo, .vc-charla__par--creciendo .vc-charla__globo-respuesta .vc-bocadillo__cuerpo { overflow: hidden; }
  @media (max-width: 760px) {
    .vc-charla__respuesta { margin-left: 10%; }
  }

  /* ================= Contacto: banda amarilla con el bocadillo grande ================= */
  .vc-contacto .vc-seccion__interior { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(32px, 6vw, 96px); row-gap: var(--vc-e-7); align-items: end; }
  .vc-contacto .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-contacto__bocadillo { max-width: 680px; }
  .vc-contacto__bocadillo .vc-bocadillo__cuerpo { padding: clamp(24px, 3.5vw, 48px) clamp(24px, 4vw, 56px); }
  .vc-contacto__datos { display: grid; gap: var(--vc-e-5); padding-bottom: 33px; }
  .vc-contacto__datos dt { font-size: var(--vc-t-etiqueta); font-weight: var(--vc-peso-display); letter-spacing: var(--vc-tracking-etiqueta); text-transform: uppercase; margin-bottom: var(--vc-e-1); }
  .vc-contacto__datos dd { font-size: var(--vc-t-subtitulo); line-height: var(--vc-interlineado-subtitulo); font-weight: var(--vc-peso-display); overflow-wrap: anywhere; max-width: none; }
  .vc-contacto__nota { display: block; font-size: var(--vc-t-nota); font-weight: var(--vc-peso-cuerpo); color: var(--vc-color-tinta-2); }
  @media (max-width: 900px) { .vc-contacto .vc-seccion__interior { grid-template-columns: minmax(0, 1fr); } }

  /* ================= Formularios y boletín (REQUISITOS 3.0 §11) ================= */
  /* El formulario (componentes/Formulario.tsx): sobrio, con la capa pop de los campos (el contorno de tinta de 2 px). Bloques en columna
     con aire entre ellos; nombre y correo en una fila cuando caben. El resumen de errores y el aviso de envío son regiones role="alert"
     que existen desde el principio (así el lector de pantalla anuncia lo que app.js escribe en ellas): vacías, salen de la rejilla y no
     dejan hueco. */
  .vc-formulario { position: relative; display: grid; gap: var(--vc-e-6); min-width: 0; }
  /* Todos los campos al ancho del formulario (su columna ya tiene medida): así los sueltos acaban donde las filas de dos. */
  .vc-formulario .vc-campo { max-width: none; }
  .vc-formulario__resumen:empty, .vc-formulario__aviso:empty { position: absolute; }
  .vc-formulario__fila, .vc-formulario__mas-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--vc-e-6) var(--vc-e-5); align-items: start; }
  .vc-formulario__casillas { display: grid; }
  .vc-formulario__envio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vc-e-3); }
  /* El resumen de errores: una caja blanca con el contorno de 3 px de las viñetas, el titular en el color de error (con el texto de error
     de cada campo, el único uso de ese color) y un enlace a cada campo. En la banda de tinta del boletín sigue blanca: vuelve a los
     tokens del papel (el anillo de foco de sus enlaces, en tinta). */
  .vc-formulario__caja { --vc-color-fondo: var(--vc-blanco); --vc-color-tinta: var(--vc-tinta); --vc-color-tinta-2: var(--vc-tinta-80); display: grid; gap: var(--vc-e-2); padding: var(--vc-e-4) var(--vc-e-5); background: var(--vc-color-fondo); color: var(--vc-color-tinta); border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio); }
  .vc-formulario__caja-titulo { font-weight: var(--vc-peso-display); color: var(--vc-color-error); }
  .vc-formulario__errores { display: grid; gap: var(--vc-e-1); padding-left: 1.2em; list-style: disc; }
  .vc-formulario__errores a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .vc-formulario__errores a:hover, .vc-formulario__errores a:focus-visible { text-decoration-thickness: 2px; }
  /* El aviso de envío (demasiados envíos seguidos, sin red): un párrafo amarillo con contorno de tinta (vc-acento), en positivo. */
  .vc-formulario__nota { max-width: none; padding: var(--vc-e-4) var(--vc-e-5); border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: var(--vc-radio); }
  .vc-formulario__nota a { font-weight: var(--vc-peso-medio); }
  /* La trampa para robots: fuera de la pantalla (no display: none, que muchos robots se saltan), fuera del tabulador (tabindex -1) y del
     lector de pantalla (aria-hidden). Con una clase: la CSP no deja estilos en línea. */
  .vc-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
  /* «Más detalles»: un <details> que abre el navegador, también sin JavaScript. El resumen es una fila de 44 px o más con la caja de las
     casillas: «+» cerrada y, abierta, amarilla con «−». Es un solo bloque de campos opcionales, no un acordeón de preguntas (checklist
     A15). 12 = el trazo del «+» a media caja; 24, la caja de las casillas. */
  .vc-formulario__mas { border-block: var(--vc-borde) solid var(--vc-color-linea); }
  .vc-formulario__mas-titulo { display: flex; align-items: flex-start; gap: var(--vc-e-3); min-height: 44px; padding-block: var(--vc-e-4); list-style: none; cursor: pointer; }
  .vc-formulario__mas-titulo::-webkit-details-marker { display: none; }
  .vc-formulario__mas-titulo::marker { content: ""; }
  .vc-formulario__mas-caja { position: relative; flex: none; width: 24px; height: 24px; border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: calc(var(--vc-radio) / 2); background: var(--vc-blanco); transition: box-shadow var(--vc-dur-1) var(--vc-ease); }
  .vc-formulario__mas-caja::before, .vc-formulario__mas-caja::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: var(--vc-borde-campo); border-radius: 1px; background: var(--vc-tinta); }
  .vc-formulario__mas-caja::after { rotate: 90deg; }
  .vc-formulario__mas[open] .vc-formulario__mas-caja { background: var(--vc-amarillo); }
  .vc-formulario__mas[open] .vc-formulario__mas-caja::after { display: none; }
  .vc-formulario__mas-texto { display: grid; gap: 2px; min-width: 0; }
  .vc-formulario__mas-nombre { font-weight: var(--vc-peso-medio); line-height: 1.5; }
  .vc-formulario__opcional { font-weight: var(--vc-peso-cuerpo); color: var(--vc-color-tinta-2); }
  .vc-formulario__mas-lista { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); }
  .vc-formulario__mas-campos { padding-block: var(--vc-e-2) var(--vc-e-6); }
  @media (hover: hover) { .vc-formulario__mas-titulo:hover .vc-formulario__mas-caja { box-shadow: -2px 2px 0 0 var(--vc-color-tinta); } }

  /* Contacto (página): el formulario a la izquierda y, al lado, WhatsApp y los datos, fijos mientras se rellena en escritorio (como la
     cabeza de un Tema); en una columna, debajo del formulario. */
  .vc-contacto-formulario .vc-seccion__interior { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--vc-e-7) clamp(40px, 6vw, 96px); align-items: start; }
  .vc-contacto-formulario .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-contacto-formulario__principal { display: grid; gap: var(--vc-e-5); min-width: 0; max-width: 720px; }
  .vc-contacto-formulario__lado { display: grid; gap: var(--vc-e-4); align-content: start; justify-items: start; min-width: 0; }
  @media (min-width: 901px) { .vc-contacto-formulario__lado { position: sticky; top: calc(var(--vc-alto-cabecera) + var(--vc-e-6)); } }
  .vc-contacto-formulario__whatsapp { font-size: var(--vc-t-subtitulo); line-height: var(--vc-interlineado-subtitulo); font-weight: var(--vc-peso-display); }
  .vc-contacto-formulario__datos { width: 100%; margin-top: var(--vc-e-4); padding-top: var(--vc-e-5); border-top: var(--vc-borde-campo) solid var(--vc-color-tinta); }
  @media (max-width: 900px) { .vc-contacto-formulario .vc-seccion__interior { grid-template-columns: minmax(0, 1fr); } }

  /* Boletín (componentes/Boletin.tsx): la banda de tinta (texto en papel, énfasis en amarillo) con la invitación a la izquierda y el
     formulario a la derecha; en una columna por debajo de 900 px. Los campos siguen blancos: se leen por su caja sobre la tinta. */
  .vc-boletin .vc-seccion__interior { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--vc-e-7) clamp(40px, 6vw, 96px); align-items: start; }
  .vc-boletin .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-boletin__texto { display: grid; gap: var(--vc-e-4); justify-items: start; }
  .vc-boletin .vc-formulario { gap: var(--vc-e-5); }
  @media (max-width: 900px) { .vc-boletin .vc-seccion__interior { grid-template-columns: minmax(0, 1fr); } }

  /* ================= Método (página): la tira de pasos grandes y el cierre ================= */
  /* Columna flexible, no rejilla: un elemento sticky dentro de una rejilla solo se mueve dentro de su celda y no llegaría a pegarse
     (gotcha-sticky-dentro-de-rejilla); en una columna flexible su límite es la columna entera. */
  .vc-pasos .vc-seccion__interior { display: flex; flex-direction: column; row-gap: clamp(64px, 8vw, 104px); padding-top: var(--vc-e-6); }
  .vc-pasos .vc-seccion__interior > * + * { margin-top: 0; }
  /* Pasos apilados (Bruce, 2026-09-27: «un efecto de cards como el de nokeon.com/metodo/»). Cada paso se queda fijo bajo la cabecera y el
     siguiente sube y lo tapa, con su sombra de trama cayendo encima del de abajo. Solo CSS (sticky); app.js pone la clase cuando la
     tarjeta entera cabe en la pantalla (si no, el siguiente taparía texto sin leer) y todas miden lo que la más alta, para que ninguna
     asome por debajo de la que la tapa. Sin JavaScript, o si no cabe (móvil), la lista normal. */
  .vc-pasos--apiladas .vc-paso { position: sticky; top: var(--vc-paso-tope, 120px); }
  .vc-pasos--apiladas .vc-paso__cuerpo { min-height: var(--vc-paso-alto, auto); grid-template-rows: 1fr auto; }
  /* Sombras de la pila (Bruce, 2026-09-27: «al deslizar se ve raro el sombreado»): opacas y quietas. La trama normal es transparente entre
     punto y punto; al apilarse, la franja de la sombra de la tarjeta que sube caía encima de la de las fijas con otra fase de la trama (un
     moaré: la sombra parecía más gruesa y sucia) y las fijas temblaban con el desregistro aunque su tarjeta no se moviera. Aquí la sombra es
     papel con los mismos puntos encima: la de arriba tapa limpia a la de abajo, como la tarjeta; y sin desregistro. */
  .vc-pasos--apiladas .vc-paso__sombra { background-color: var(--vc-color-fondo); -webkit-mask: none; mask: none; translate: calc(-1 * var(--vc-sombra-trama)) var(--vc-sombra-trama); }
  .vc-pasos--apiladas .vc-paso__sombra::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: var(--vc-tinta); -webkit-mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; mask: var(--vc-trama-densa) 0 0 / var(--vc-sombra-trama-paso) var(--vc-sombra-trama-paso) repeat; }
  .vc-cierre .vc-seccion__interior { display: grid; gap: var(--vc-e-5); justify-items: start; }
  .vc-cierre .vc-seccion__interior > * + * { margin-top: 0; }

  /* ================= 404: el marco vacío ================= */
  .vc-error .vc-seccion__interior { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); row-gap: var(--vc-e-6); align-items: center; }
  .vc-error .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-error__texto { display: grid; gap: var(--vc-e-5); justify-items: start; }
  .vc-error__texto .vc-titular--portada { max-width: 12ch; }
  .vc-error__acciones { display: flex; flex-wrap: wrap; gap: var(--vc-e-3); margin-top: var(--vc-e-2); }
  .vc-error__dibujo { max-inline-size: 440px; justify-self: center; }
  @media (max-width: 900px) { .vc-error .vc-seccion__interior { grid-template-columns: minmax(0, 1fr); } .vc-error__dibujo { max-inline-size: 300px; } }


  /* ================= Web v3 (2026-09-27): páginas interiores ================= */
  /* Cabecera de página interior: el texto a la izquierda (H1, subtítulo, entradilla con la respuesta corta, índice de temas y acciones) y
     la lámina a la derecha, como la portada. En móvil, la lámina debajo del texto (el H1 es lo primero que se pinta: LCP). */
  .vc-cabeza-pagina { padding-block: clamp(32px, 5vw, 80px) clamp(32px, 4vw, 64px); }
  .vc-cabeza-pagina .vc-seccion__interior { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); row-gap: var(--vc-e-7); align-items: center; }
  .vc-cabeza-pagina .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-cabeza-pagina__texto { display: grid; gap: var(--vc-e-5); justify-items: start; min-width: 0; }
  .vc-cabeza-pagina__texto .vc-titular--portada { max-width: 15ch; }
  .vc-cabeza-pagina__subtitulo { font-size: var(--vc-t-subtitulo); line-height: var(--vc-interlineado-subtitulo); font-weight: var(--vc-peso-medio); max-width: 30ch; }
  .vc-cabeza-pagina__acciones { display: flex; flex-wrap: wrap; gap: var(--vc-e-3); margin-top: var(--vc-e-1); }
  .vc-cabeza-pagina__meta { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); max-width: none; }
  /* El punto va detrás de cada dato (salvo el último): si la línea se parte, no empieza por un punto (como el índice de temas). */
  .vc-cabeza-pagina__meta > :not(:last-child)::after { content: "·"; margin-inline: 0.5em; }
  .vc-cabeza-pagina__meta a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  @media (max-width: 900px) { .vc-cabeza-pagina .vc-seccion__interior { grid-template-columns: minmax(0, 1fr); } .vc-cabeza-pagina__lamina { max-width: 560px; width: 100%; } }

  /* Lámina: la viñeta de la ilustración de cabecera (como la del V0 de la portada): contorno de tinta, esquinas de panel y un triángulo de
     trama en la esquina de arriba a la derecha. El fondo lo pone su contexto (vc-acento, vc-invertida) o el blanco. */
  .vc-lamina { position: relative; display: grid; place-items: center; overflow: hidden; padding: clamp(24px, 8%, 64px); border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio-panel); background: var(--vc-color-fondo); color: var(--vc-color-tinta); }
  .vc-lamina--blanco { background: var(--vc-blanco); }
  .vc-lamina__trama { position: absolute; inset: 0; clip-path: polygon(64% 0, 100% 0, 100% 46%); --vc-trama-paso: 12px; }
  .vc-lamina__dibujo { position: relative; z-index: 1; width: 100%; max-inline-size: 520px; margin: 0; }
  .vc-lamina .vc-ilustracion { max-inline-size: none; }
  /* La composición (encargo v3) va suelta sobre el papel: trae sus propias planchas. */
  .vc-composicion .vc-ilustracion { max-inline-size: none; margin: 0; }

  /* Índice de temas: la línea «Obra · Panel · Tienda», como la línea de servicios del logotipo. */
  .vc-indice__lista { display: flex; flex-wrap: wrap; row-gap: 2px; font-weight: var(--vc-peso-medio); }
  .vc-indice__tema { max-width: none; }
  /* El punto va detrás de cada tema (salvo el último): si la línea se parte, se queda al final de la de arriba y la de abajo empieza
     por una palabra, no por un punto. */
  .vc-indice__tema:not(:last-child)::after { content: "·"; margin-inline: 0.45em; color: var(--vc-color-tinta-2); text-decoration: none; }
  .vc-indice__tema a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em; text-decoration-color: var(--vc-tinta-40); }
  .vc-indice__tema a:hover, .vc-indice__tema a:focus-visible { text-decoration-thickness: 2px; text-decoration-color: currentColor; }

  /* Tema: una sección de una página larga. El titular y la respuesta corta a la izquierda (se quedan fijos mientras se lee el detalle en
     escritorio) y el detalle a la derecha. */
  .vc-tema .vc-seccion__interior { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--vc-e-6) clamp(32px, 5vw, 88px); align-items: start; }
  .vc-tema .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-tema__cabeza { display: grid; gap: var(--vc-e-4); justify-items: start; }
  @media (min-width: 901px) { .vc-tema__cabeza { position: sticky; top: calc(var(--vc-alto-cabecera) + var(--vc-e-6)); } }
  .vc-tema__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vc-e-5); min-width: 0; }
  .vc-tema__cuerpo > .vc-puntos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--vc-e-3); }
  @media (max-width: 900px) { .vc-tema .vc-seccion__interior { grid-template-columns: minmax(0, 1fr); } }

  /* Lista de lo que incluye algo: cuadrados de amarillo con contorno (un punto de imprenta), sin iconos. */
  .vc-incluye { display: grid; gap: var(--vc-e-3); }
  .vc-incluye li { position: relative; padding-left: 30px; max-width: 62ch; }
  .vc-incluye li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 12px; height: 12px; background: var(--vc-amarillo); border: 2px solid var(--vc-tinta); border-radius: 2px; }
  .vc-acento .vc-incluye li::before { background: var(--vc-papel); }
  .vc-incluye strong { font-weight: var(--vc-peso-display); }

  /* Rejilla de tarjetas que llevan a otra página (servicios, disciplinas, artículos). */
  .vc-rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 32px 26px; }
  .vc-rejilla-tarjetas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 960px) { .vc-rejilla-tarjetas--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) { .vc-rejilla-tarjetas--tres { grid-template-columns: minmax(0, 1fr); } }
  /* Ocho tarjetas (para quién, 3.3): cuatro y cuatro desde 1180 px; dos por fila hasta el móvil; una en el móvil. */
  .vc-rejilla-tarjetas--ocho { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1180px) { .vc-rejilla-tarjetas--ocho { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) { .vc-rejilla-tarjetas--ocho { grid-template-columns: minmax(0, 1fr); } }
  .vc-tarjeta .vc-vineta__cuerpo { gap: var(--vc-e-3); }
  .vc-tarjeta__dibujo { max-inline-size: none; margin: 0 0 var(--vc-e-1); }
  .vc-tarjeta__titulo { font-size: var(--vc-t-subtitulo); line-height: var(--vc-interlineado-subtitulo); }
  .vc-tarjeta__enlace { text-decoration: none; }
  .vc-tarjeta__enlace::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
  .vc-tarjeta__enlace:hover, .vc-tarjeta__enlace:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .vc-tarjeta__texto { color: var(--vc-color-tinta-2); }
  .vc-tarjeta .vc-vineta__cuerpo > .vc-tarjeta__dato { margin-top: auto; padding-top: var(--vc-e-3); border-top: var(--vc-borde-campo) solid var(--vc-color-tinta); font-weight: var(--vc-peso-medio); font-size: var(--vc-t-nota); font-variant-numeric: tabular-nums; max-width: none; }

  /* El precio: una viñeta amarilla con la cifra grande y lo que la mueve. */
  .vc-precio { display: grid; gap: var(--vc-e-3); }
  .vc-precio__cifra { font-size: var(--vc-t-seccion); line-height: var(--vc-interlineado-seccion); font-weight: var(--vc-peso-display); font-variant-numeric: tabular-nums; }

  /* Migas de pan: al final, encima del pie, en una línea de nota. */
  .vc-migas__interior { max-width: var(--vc-ancho-contenido); margin-inline: auto; padding: var(--vc-e-5) var(--vc-margen); }
  .vc-migas__lista { display: flex; flex-wrap: wrap; row-gap: 2px; font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); }
  .vc-migas__paso { max-width: none; }
  .vc-migas__paso:not(:last-child)::after { content: "›"; margin-inline: 0.55em; }
  .vc-migas a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

  /* Contacto: el botón dentro del bocadillo. */
  .vc-contacto__accion { margin-top: var(--vc-e-2); }
  .vc-cabeza-banda__mas { margin-top: var(--vc-e-2); }

  /* Artículo del blog: el índice fijo a la izquierda en pantallas anchas y el texto a una medida de lectura. */
  .vc-articulo .vc-seccion__interior { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 720px); justify-content: center; gap: var(--vc-e-6) clamp(40px, 5vw, 88px); align-items: start; }
  .vc-articulo .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-articulo__indice { position: sticky; top: calc(var(--vc-alto-cabecera) + var(--vc-e-6)); display: grid; gap: var(--vc-e-3); font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); }
  .vc-articulo__indice-titulo { font-size: var(--vc-t-etiqueta); font-weight: var(--vc-peso-display); letter-spacing: var(--vc-tracking-etiqueta); text-transform: uppercase; }
  .vc-articulo__indice ol { display: grid; gap: var(--vc-e-2); padding-left: 14px; border-left: var(--vc-borde-campo) solid var(--vc-tinta-20); }
  .vc-articulo__indice a { display: block; color: var(--vc-color-tinta-2); }
  .vc-articulo__indice a[aria-current="true"] { color: var(--vc-color-tinta); font-weight: var(--vc-peso-medio); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: var(--vc-amarillo); }
  @media (max-width: 1100px) {
    .vc-articulo .vc-seccion__interior { grid-template-columns: minmax(0, 720px); }
    .vc-articulo__indice { position: static; padding: var(--vc-e-4) var(--vc-e-5); border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: var(--vc-radio); background: var(--vc-blanco); }
    .vc-articulo__indice ol { border-left: 0; padding-left: 1.1em; list-style: decimal; }
  }
  .vc-articulo__texto { min-width: 0; }
  .vc-articulo__fuentes { margin-top: var(--vc-e-7); padding-top: var(--vc-e-5); border-top: var(--vc-borde-campo) solid var(--vc-tinta); display: grid; gap: var(--vc-e-3); }
  .vc-articulo__fuentes h2 { font-size: var(--vc-t-bloque); line-height: 1.3; }
  .vc-articulo__fuentes ol { display: grid; gap: var(--vc-e-2); list-style: decimal; padding-left: 1.2em; font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); }
  .vc-articulo__fuentes a { overflow-wrap: anywhere; }

  /* Prosa larga (artículos): listas, citas, tablas y subtítulos con el ritmo del manual. */
  .vc-prosa > * + * { margin-top: var(--vc-e-4); }
  .vc-prosa > h2 { margin-top: var(--vc-e-8); margin-bottom: 0; scroll-margin-top: calc(var(--vc-alto-cabecera) + var(--vc-e-5)); }
  .vc-prosa > h2 + * { margin-top: var(--vc-e-4); }
  .vc-prosa > h3 { margin-top: var(--vc-e-6); margin-bottom: 0; }
  .vc-prosa > h3 + * { margin-top: var(--vc-e-2); }
  .vc-prosa > :first-child { margin-top: 0; }
  .vc-prosa ol { display: grid; gap: var(--vc-e-2); list-style: decimal; padding-left: 1.3em; }
  .vc-prosa ul { gap: var(--vc-e-2); }
  .vc-prosa li::marker { font-weight: var(--vc-peso-display); }
  .vc-prosa blockquote { padding: var(--vc-e-5) var(--vc-e-6); background: var(--vc-amarillo); color: var(--vc-tinta); border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio); font-size: var(--vc-t-entradilla); line-height: 1.45; }
  .vc-prosa blockquote > * + * { margin-top: var(--vc-e-3); }
  /* La caja con scroll es también el bloque contenedor: si no, los textos ocultos de los enlaces externos (position: absolute) escapan
     del recorte y ensanchan la página en el móvil (cerebro: gotcha-scroll-container-hijo-de-grid-ensancha-pagina). */
  .vc-prosa .vc-tabla { position: relative; overflow-x: auto; border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: var(--vc-radio); background: var(--vc-blanco); }
  /* Bloques de código de los artículos (robots.txt, hreflang): con su propio scroll y sin ensanchar la página en el móvil; la letra es la
     de la marca (sin monoespaciada, --vc-f-mono). */
  .vc-prosa pre { position: relative; overflow-x: auto; max-width: 100%; padding: var(--vc-e-4) var(--vc-e-5); background: var(--vc-blanco); border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: var(--vc-radio); font-family: var(--vc-f-mono); font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); }
  .vc-prosa pre code { font: inherit; white-space: pre; }
  .vc-prosa :not(pre) > code { font-family: var(--vc-f-mono); padding: 0.05em 0.3em; background: var(--vc-tinta-5); border-radius: var(--vc-radio-etiqueta); overflow-wrap: anywhere; }
  .vc-prosa table { width: 100%; border-collapse: collapse; font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); }
  .vc-prosa th, .vc-prosa td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--vc-tinta-20); max-width: none; }
  .vc-prosa thead th { background: var(--vc-amarillo); font-weight: var(--vc-peso-display); border-bottom: var(--vc-borde-campo) solid var(--vc-tinta); }
  .vc-prosa tbody th { font-weight: var(--vc-peso-medio); }
  .vc-prosa tr:last-child > * { border-bottom: 0; }
  /* Comparativa de países: a todo el ancho de la banda, bajo su titular. */
  .vc-comparativa { margin-top: var(--vc-e-6); }
  /* Pie con cuatro columnas (servicios, para quién, dónde, estudio): dos por dos hasta 1200 px y en una fila a partir de ahí. */
  .vc-pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vc-e-7) var(--vc-e-5); }
  @media (min-width: 1200px) { .vc-pie__columnas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* Tabla apilable: en pantallas estrechas cada fila es una ficha con la etiqueta de cada dato (la cabecera queda para los lectores). */
  .vc-tabla__etiqueta { display: none; }
  @media (max-width: 640px) {
    .vc-prosa .vc-tabla--apilable { overflow-x: visible; border: 0; border-radius: 0; background: none; }
    .vc-tabla--apilable table, .vc-tabla--apilable tbody, .vc-tabla--apilable tr, .vc-tabla--apilable th, .vc-tabla--apilable td { display: block; }
    .vc-tabla--apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .vc-tabla--apilable tr { border: var(--vc-borde-campo) solid var(--vc-tinta); border-radius: var(--vc-radio); background: var(--vc-blanco); overflow: hidden; }
    .vc-tabla--apilable tr + tr { margin-top: var(--vc-e-3); }
    .vc-prosa .vc-tabla--apilable tbody tr > th { background: var(--vc-amarillo); border-bottom: var(--vc-borde-campo) solid var(--vc-tinta); font-weight: var(--vc-peso-display); }
    .vc-prosa .vc-tabla--apilable td { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: var(--vc-e-3); border-bottom: 1px solid var(--vc-tinta-20); }
    .vc-prosa .vc-tabla--apilable td:last-child { border-bottom: 0; }
    .vc-tabla--apilable .vc-tabla__etiqueta { display: block; font-weight: var(--vc-peso-medio); }
  }

  /* Blog: una banda por categoría con sus artículos. */
  .vc-categoria .vc-seccion__interior > .vc-rejilla-tarjetas { margin-top: var(--vc-e-6); }

  /* Contacto (página): los datos en grande y la lista de servicios enlazados. */
  .vc-ficha--grande dd { font-size: var(--vc-t-subtitulo); line-height: var(--vc-interlineado-subtitulo); font-weight: var(--vc-peso-display); overflow-wrap: anywhere; }
  .vc-lista-enlaces { display: flex; flex-wrap: wrap; gap: var(--vc-e-3); }
  .vc-lista-enlaces a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--vc-e-4); border: var(--vc-borde-campo) solid var(--vc-color-tinta); border-radius: var(--vc-radio-pildora); font-weight: var(--vc-peso-medio); background: var(--vc-blanco); color: var(--vc-tinta); }
  .vc-lista-enlaces a:hover, .vc-lista-enlaces a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }

  /* Captura real de un proyecto en la cabecera de su caso: a proporción, con el contorno de la viñeta. */
  .vc-captura { margin: 0; overflow: hidden; border: var(--vc-contorno) solid var(--vc-tinta); border-radius: var(--vc-radio-panel); background: var(--vc-papel); }
  .vc-captura img { width: 100%; height: auto; }

  /* Índice de las preguntas de cada servicio (/preguntas-frecuentes/). */
  .vc-indice-preguntas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--vc-e-7) var(--vc-e-6); }
  .vc-indice-preguntas__grupo { display: grid; gap: var(--vc-e-3); align-content: start; }
  .vc-indice-preguntas__grupo ul { display: grid; gap: var(--vc-e-2); }
  .vc-indice-preguntas__grupo li { position: relative; padding-left: 22px; }
  .vc-indice-preguntas__grupo li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--vc-amarillo); border: 2px solid var(--vc-tinta); border-radius: 50%; }
  .vc-indice-preguntas a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .vc-indice-preguntas h3 a { text-decoration-thickness: 2px; }

  /* Para quién es y para quién no: dos columnas; el «no» con cuadrados vacíos (sin amarillo). */
  /* Fuentes de las páginas por país (2.0): la misma lista numerada que las fuentes de un artículo. */
  .vc-fuentes-pagina__lista { display: grid; gap: var(--vc-e-2); list-style: decimal; padding-left: 1.2em; margin-top: var(--vc-e-5); max-width: 90ch; font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); }
  .vc-fuentes-pagina__lista a { overflow-wrap: anywhere; }
  /* Glosario (2.0): cada término, un bloque con su filete de tinta, en dos columnas en escritorio; el ancla deja sitio a la cabecera fija. */
  .vc-glosario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vc-e-6) clamp(32px, 5vw, 88px); margin-top: var(--vc-e-6); }
  .vc-glosario__termino { display: grid; gap: var(--vc-e-2); align-content: start; padding-top: var(--vc-e-4); border-top: var(--vc-borde-campo) solid var(--vc-color-tinta); scroll-margin-top: calc(var(--vc-alto-cabecera) + var(--vc-e-5)); }
  .vc-glosario dt { font-size: var(--vc-t-bloque); line-height: 1.3; font-weight: var(--vc-peso-display); }
  .vc-glosario dd { display: grid; gap: var(--vc-e-2); margin: 0; }
  .vc-glosario__tambien { font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); }
  .vc-glosario__definicion { max-width: 62ch; }
  .vc-glosario__enlace { justify-self: start; font-weight: var(--vc-peso-medio); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: var(--vc-amarillo); }
  .vc-glosario__termino:target dt { background: linear-gradient(transparent 55%, var(--vc-amarillo) 55%); justify-self: start; }
  @media (max-width: 760px) { .vc-glosario { grid-template-columns: minmax(0, 1fr); } }

  /* Personas del estudio: dos columnas, cada una bajo un filete de tinta. */
  .vc-personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--vc-e-6); }
  .vc-persona { display: grid; gap: var(--vc-e-2); align-content: start; padding-top: var(--vc-e-4); border-top: var(--vc-contorno) solid var(--vc-color-tinta); scroll-margin-top: calc(var(--vc-alto-cabecera) + var(--vc-e-5)); }
  .vc-persona__cargo { color: var(--vc-color-tinta-2); }

  /* Ficha de un proyecto o de un dato clave: pares etiqueta / valor en columnas. */
  .vc-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--vc-e-4) var(--vc-e-6); }
  .vc-ficha dt { font-size: var(--vc-t-etiqueta); font-weight: var(--vc-peso-display); letter-spacing: var(--vc-tracking-etiqueta); text-transform: uppercase; color: var(--vc-color-tinta-2); margin-bottom: var(--vc-e-1); }
  .vc-ficha dd { font-weight: var(--vc-peso-medio); }

  /* Rejilla de ilustraciones (página de trabajo /ilustraciones/). */
  .vc-rejilla-ilus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vc-e-7) var(--vc-e-5); }
  .vc-rejilla-ilus .vc-ilustracion { margin: 0; max-inline-size: none; }
  .vc-trabajo-ilus .vc-seccion__interior { display: grid; gap: var(--vc-e-4); justify-items: start; }
  .vc-trabajo-ilus .vc-seccion__interior > * + * { margin-top: 0; }
  .vc-rejilla-ilus svg { width: 100%; height: auto; display: block; }
  @media (max-width: 700px) { .vc-rejilla-ilus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 700px) { .vc-rejilla-ilus--composiciones { grid-template-columns: minmax(0, 1fr); } }
}

@layer motion {
  /* La palabra CERO se desliza despacio con el scroll en escritorio y sus puntos derivan dentro de las letras (decorativa; el texto real
     nunca se mueve). */
  @keyframes vc-trama-deriva { from { background-position: 0 0; } to { background-position: 2.2em 1.1em; } }
  @media (min-width: 801px) {
    @supports (animation-timeline: view()) {
      .vc-palabra .vc-titular--gigante { --vc-paralaje: 56px; animation: vc-paralaje-lado linear both, vc-trama-deriva linear both; animation-timeline: view(), view(); animation-range: entry 0% exit 100%, entry 0% exit 100%; }
    }
  }
  /* Tira del método: los números entran como un tampón (golpe seco sobre el papel), uno tras otro, cuando la tira llega a pantalla. */
  @keyframes vc-sello { from { opacity: 0; scale: 1.8; rotate: -14deg; } 70% { opacity: 1; scale: 0.94; rotate: 0deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
  .vc-js .vc-tira[data-imprime]:not(.vc-impreso) .vc-tira__numero { opacity: 0; }
  .vc-impreso .vc-tira__numero { animation: vc-sello 420ms cubic-bezier(0.5, 0, 0.75, 0) backwards; }
  .vc-impreso .vc-tira__vineta:nth-child(2) .vc-tira__numero { animation-delay: 110ms; }
  .vc-impreso .vc-tira__vineta:nth-child(3) .vc-tira__numero { animation-delay: 220ms; }
  .vc-impreso .vc-tira__vineta:nth-child(4) .vc-tira__numero { animation-delay: 330ms; }
  .vc-impreso .vc-tira__vineta:nth-child(5) .vc-tira__numero { animation-delay: 440ms; }
  /* Chat de preguntas (efectos.js): la flecha del botón sale disparada; mientras la píldora «escribe», los tres puntos laten uno detrás
     de otro, en su sitio (solo cambia su tinta: ninguno se sale de la línea). El crecimiento del bocadillo lo anima efectos.js. */
  @keyframes vc-charla-dispara { to { translate: 20px -8px; opacity: 0; } }
  @keyframes vc-charla-late { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
  .vc-charla__par--enviando .vc-charla__flecha { animation: vc-charla-dispara 160ms var(--vc-ease) forwards; }
  .vc-charla__par--escribiendo .vc-charla__punto { animation: vc-charla-late 520ms ease-in-out 2 backwards; }
  .vc-charla__par--escribiendo .vc-charla__punto:nth-child(2) { animation-delay: 130ms; }
  .vc-charla__par--escribiendo .vc-charla__punto:nth-child(3) { animation-delay: 260ms; }
  /* Estallido de marcas de energía (efectos.js): ocho trazos que salen del punto de contacto y se borran hacia fuera. */
  .vc-estallido { position: fixed; z-index: 30; width: 120px; height: 120px; margin: -60px 0 0 -60px; overflow: visible; pointer-events: none; }
  .vc-estallido line { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  @media (prefers-reduced-motion: reduce) {
    .vc-palabra .vc-titular--gigante, .vc-charla * { animation: none !important; }
    .vc-estallido { display: none; }
  }
}

/* ---- Páginas legales (/legal/, REQUISITOS 3.0 §11; src/paginas/legal.tsx) ---------------------------------------------------------
   Cada documento se pinta como un artículo del blog (índice fijo a la izquierda, prosa a la derecha). Su texto llega en tramos: el
   Markdown y, entre medias, los bloques que salen de datos.ts (quién es el responsable, el agente designado); entre dos tramos va el
   mismo aire que entre dos apartados. La vigencia (la única fecha de la web) cierra el documento sobre un filete, en letra de nota. */
@layer componentes {
  .vc-legal__texto > .vc-prosa + .vc-prosa { margin-top: var(--vc-e-8); }
  .vc-legal__bloque > h2 { margin-top: 0; scroll-margin-top: calc(var(--vc-alto-cabecera) + var(--vc-e-5)); }
  .vc-legal__ficha { margin-block: var(--vc-e-5); }
  .vc-prosa > .vc-legal__vigencia { margin-top: var(--vc-e-7); padding-top: var(--vc-e-4); border-top: var(--vc-borde-campo) solid var(--vc-tinta); font-size: var(--vc-t-nota); line-height: var(--vc-interlineado-nota); color: var(--vc-color-tinta-2); }
  .vc-legal-esencial .vc-seccion__interior > .vc-incluye { margin-top: var(--vc-e-6); }
}