/* ---- estilos/tokens.css ---- */
/* Volumen Cero · tokens. ÚNICA fuente de color, tipografía y espaciado (REQUISITOS §4-5; cerebro/volumen-cero/paleta.md).
   Tres capas: primitivas (rampas OKLCH de tono fijo, 50 claro → 950 oscuro) → semánticos (una sola declaración por token con
   light-dark()) → componentes. Modo por color-scheme: el sistema decide; [data-tema] fuerza uno. Cero hex fuera de este fichero. */

:root {
  /* ---- Primitivas ---- */
  --vc-blanco: #FFFFFF;
  /* Azul marino, H 273,5° (ancla de Bruce #090938 = azul-950). Croma ≤ 0,11 en los medios: más croma es el índigo de framework. */
  --vc-azul-50: #F4F6FF; --vc-azul-100: #E7ECFE; --vc-azul-200: #D2DBFB; --vc-azul-300: #B8C5F6; --vc-azul-400: #98A7E4;
  --vc-azul-500: #7584C9; --vc-azul-600: #5563A8; --vc-azul-700: #3B4688; --vc-azul-800: #28306D; --vc-azul-900: #171B53; --vc-azul-950: #090938;
  /* Lima, H 129,3° (ancla de Bruce #ACFA25 = lima-300). Sobre blanco NUNCA es texto ni trazo (1,28:1). */
  --vc-lima-50: #EBFFD7; --vc-lima-100: #D7FEAE; --vc-lima-200: #C2FC7B; --vc-lima-300: #ACFA25; --vc-lima-400: #99E107;
  --vc-lima-500: #86C600; --vc-lima-600: #6FA600; --vc-lima-700: #547F00; --vc-lima-800: #416400; --vc-lima-900: #304B00; --vc-lima-950: #203206;
  /* Neutro frío (tono del azul, C ≈ 0,01): líneas, superficies y texto secundario. No son grises Tailwind aunque se parezcan. */
  --vc-neutro-50: #F9FAFD; --vc-neutro-100: #F1F2F7; --vc-neutro-200: #E4E6EC; --vc-neutro-300: #D0D2D9; --vc-neutro-400: #AEB1B9;
  --vc-neutro-500: #878991; --vc-neutro-600: #696B73; --vc-neutro-700: #505259; --vc-neutro-800: #3A3B42; --vc-neutro-900: #24262C; --vc-neutro-950: #14161D;
  /* Estados (derivados en OKLCH del mismo sistema; tono 25° para error) */
  --vc-error-claro: #BE222A; --vc-error-oscuro: #FFA098; --vc-lima-suave-oscuro: #263613;

  /* ---- Modo ---- */
  color-scheme: light dark;
}
[data-tema="claro"] { color-scheme: light; }
[data-tema="oscuro"] { color-scheme: dark; }

:root, [data-tema] {
  /* ---- Semánticos (claro, oscuro). Ratios verificados por dos implementaciones independientes (informe paleta + verificación). ---- */
  --vc-color-fondo: light-dark(var(--vc-blanco), var(--vc-azul-950));               /* 18,96:1 con la tinta en ambos modos */
  --vc-color-superficie: light-dark(var(--vc-neutro-50), var(--vc-azul-800));         /* tarjetas y bloques; en oscuro azul-800 para que se vean sin borde (azul-900 daba 1,19:1) */
  --vc-color-superficie-2: light-dark(var(--vc-neutro-100), var(--vc-azul-900));      /* formularios, tablas, bandas; en oscuro un nivel MÁS oscuro que la tarjeta (inset): azul-700 dejaba tinta-2 en 4,05:1 */
  --vc-color-tinta: light-dark(var(--vc-azul-950), var(--vc-neutro-50));              /* texto principal (en oscuro neutro-50, no blanco puro: menos halo) */
  --vc-color-tinta-2: light-dark(var(--vc-azul-700), var(--vc-neutro-400));           /* secundario: 8,69:1 claro · 8,84:1 oscuro (≥ 4,05:1 sobre superficie-2) */
  --vc-color-linea: light-dark(var(--vc-neutro-200), var(--vc-azul-700));             /* filetes decorativos, exentos de contraste */
  --vc-color-linea-fuerte: light-dark(var(--vc-neutro-500), var(--vc-azul-500));      /* bordes de controles: ≥ 3,1:1 sobre las 4 superficies en cada modo */
  --vc-color-acento: var(--vc-lima-300);                                              /* SOLO relleno en claro (1,28:1 sobre blanco); en oscuro también texto y trazo (14,85:1) */
  --vc-color-acento-tinta: var(--vc-azul-950);                                        /* texto sobre el acento, idéntico en ambos modos (14,85:1): el botón principal no cambia */
  --vc-color-acento-suave: light-dark(var(--vc-lima-100), var(--vc-lima-suave-oscuro)); /* fondo teñido para destacados */
  --vc-color-acento-texto: light-dark(var(--vc-lima-800), var(--vc-lima-300));        /* único lima legible como texto en claro: 6,89:1 blanco · 6,16:1 superficie-2 */
  --vc-color-exito: var(--vc-color-acento-texto);
  --vc-color-error: light-dark(var(--vc-error-claro), var(--vc-error-oscuro));        /* 6,08:1 · 9,69:1 */
  --vc-color-seleccion: light-dark(var(--vc-lima-100), var(--vc-azul-700));
  /* Sección invertida: el ritmo claro/oscuro por bloques (lo que gusta de nokeon) modelado en tokens. En oscuro NUNCA una banda blanca. */
  --vc-inv-fondo: light-dark(var(--vc-azul-950), var(--vc-azul-800));
  --vc-inv-tinta: var(--vc-neutro-50);
  --vc-inv-tinta-2: var(--vc-neutro-400);                                             /* 8,84:1 sobre azul-950 · 5,65:1 sobre azul-800 */
  --vc-inv-linea: light-dark(var(--vc-azul-800), var(--vc-azul-600));
  --vc-inv-acento-texto: var(--vc-lima-300);                                          /* sobre navy el lima sí es texto (14,85:1) */

  /* ---- Tipografía (cerebro/volumen-cero/tipografia.md): Archivo (Omnibus-Type) en dos anchuras + Chivo Mono solo para datos ---- */
  --vc-f-display: "Archivo", Arial, sans-serif;
  --vc-f-cuerpo: "Archivo", Arial, Helvetica, sans-serif;
  --vc-f-mono: "Chivo Mono", ui-monospace, monospace;
  --vc-ancho-display: 125%;            /* eje wdth: el «volumen» literal en los titulares */
  --vc-ancho-cuerpo: 100%;
  --vc-peso-display: 800;              /* nunca < 600 en oscuro */
  --vc-peso-cuerpo: 400;               /* nunca 300 en oscuro */
  --vc-peso-medio: 600;
  --vc-t-caption: 0.8125rem;           /* 13 px: mínimo absoluto; mono siempre ≥ 13 px y en tinta-2 */
  --vc-t-cuerpo: 1.125rem;             /* 18 px */
  --vc-t-2: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --vc-t-3: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  --vc-t-4: clamp(1.9rem, 1.3rem + 2.4vw, 2.667rem);
  --vc-t-5: clamp(2.3rem, 1.4rem + 3.8vw, 3.556rem);
  --vc-t-6: clamp(3rem, 1.5rem + 6.5vw, 6rem);       /* titular de portada */
  --vc-t-gigante: clamp(6rem, 22vw, 22rem);          /* la palabra gigante recortada: máximo una en toda la web */
  --vc-interlineado-cuerpo: 1.5;
  --vc-interlineado-display: 1.02;
  --vc-tracking-display: -0.015em;
  --vc-medida: 65ch;

  /* ---- Espaciado y retícula (misma escala del estudio) ---- */
  --vc-e-1: 4px; --vc-e-2: 8px; --vc-e-3: 16px; --vc-e-4: 24px; --vc-e-5: 40px; --vc-e-6: 64px;
  --vc-e-7: clamp(64px, 9vw, 104px); --vc-e-8: clamp(96px, 12vw, 168px);
  --vc-margen: clamp(20px, 6vw, 128px);
  --vc-alto-cabecera: 72px;
  --vc-radio: 4px;                     /* un solo radio, pequeño y decidido: nada de píldoras (la píldora lima es la silueta de nokeon) */
  --vc-borde: 1px;

  /* ---- Iconos (kit del estudio, inline, currentColor) ---- */
  --vc-icono-tamano: 20px; --vc-icono-trazo: 1.75;
}

/* ---- estilos/fuentes.css ---- */
/* Volumen Cero · fuentes self-host (regla 11: coste cero; SIL OFL 1.1 sin Reserved Font Name, verificado en los OFL.txt de google/fonts).
   Archivo [wdth 62–125, wght 100–900] + cursiva · Chivo Mono [wght 100–900]. Omnibus-Type (Buenos Aires).
   Subconjunto: latín + latín extendido (U+0000-024F, U+1E00-1EFF, puntuación general, moneda), pyftsubset --layout-features='*'. */
@font-face { font-family: "Archivo"; src: url("./fuentes/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("./fuentes/archivo-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "Chivo Mono"; src: url("./fuentes/chivomono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---- estilos/base.css ---- */
/* Volumen Cero · base. Solo referencia tokens (tokens.css); ningún valor de color o familia aquí. */
@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-3)); }
  body {
    background: var(--vc-color-fondo); color: var(--vc-color-tinta);
    font-family: var(--vc-f-cuerpo); font-stretch: var(--vc-ancho-cuerpo); font-weight: var(--vc-peso-cuerpo);
    font-size: var(--vc-t-cuerpo); line-height: var(--vc-interlineado-cuerpo);
    font-feature-settings: "kern", "liga", "calt", "zero";
    -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100svh;
    -webkit-tap-highlight-color: transparent;
  }
  h1, h2, h3 { font-family: var(--vc-f-display); font-stretch: var(--vc-ancho-display); font-weight: var(--vc-peso-display); line-height: var(--vc-interlineado-display); letter-spacing: var(--vc-tracking-display); overflow-wrap: anywhere; text-wrap: balance; }
  h1 { font-size: var(--vc-t-6); }
  h2 { font-size: var(--vc-t-5); }
  h3 { font-size: var(--vc-t-3); }
  h4 { font-family: var(--vc-f-cuerpo); font-weight: var(--vc-peso-medio); font-size: var(--vc-t-cuerpo); }
  p, li, dd, dt, figcaption { max-width: var(--vc-medida); }
  /* Respuesta al cursor: subrayado que aparece; nunca cambio de color (A16b). */
  a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .vc-prosa a { color: var(--vc-color-acento-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  .vc-prosa p + p, .vc-prosa ul + p, .vc-prosa p + ul { margin-top: var(--vc-e-3); }
  .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-3); margin: var(--vc-e-5) 0 var(--vc-e-3); }
  .vc-prosa h3 { font-size: var(--vc-t-2); margin: var(--vc-e-4) 0 var(--vc-e-2); }
  /* Foco: anillo doble independiente del fondo (halo en color de fondo + anillo en tinta) ≥ 3:1 sobre cualquier superficie, también sobre el botón lima. */
  :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); }
  ::selection { background: var(--vc-color-seleccion); color: inherit; }
  .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 en mono: precios, años, medidas. Nunca en lima, nunca < 13 px. */
  .vc-dato { font-family: var(--vc-f-mono); font-size: var(--vc-t-caption); font-variant-numeric: tabular-nums; color: var(--vc-color-tinta-2); }
  .vc-meta { color: var(--vc-color-tinta-2); font-size: var(--vc-t-caption); line-height: 1.5; }
  /* Sección invertida: dentro, los tokens de texto pasan a los inv-*. En oscuro es azul-800, nunca blanco. */
  .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-acento-texto: var(--vc-inv-acento-texto); --vc-color-superficie: var(--vc-inv-fondo); --vc-color-linea-fuerte: var(--vc-neutro-400); background: var(--vc-color-fondo); color: var(--vc-color-tinta); }
  @media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; box-shadow: none; }
    .vc-icono, .vc-ilustracion svg { forced-color-adjust: auto; }
  }
}

@layer motion {
  :root { --vc-dur-1: 140ms; --vc-dur-2: 180ms; --vc-dur-3: 600ms; --vc-ease: cubic-bezier(0.2, 0, 0, 1); }
  @media (prefers-reduced-motion: reduce) {
    :root { --vc-dur-1: 0ms; --vc-dur-2: 0ms; --vc-dur-3: 0ms; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
}

/* ---- componentes/base/Boton.css ---- */
@layer componentes {
  .vc-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--vc-e-2); min-height: 44px; padding: 0 var(--vc-e-4); font-family: var(--vc-f-cuerpo); font-stretch: var(--vc-ancho-cuerpo); font-weight: var(--vc-peso-medio); font-size: var(--vc-t-cuerpo); line-height: 1.2; border-radius: var(--vc-radio); border: var(--vc-borde) solid transparent; text-decoration: none; cursor: pointer; text-align: center; }
  .vc-boton--principal { background: var(--vc-color-acento); color: var(--vc-color-acento-tinta); border-color: var(--vc-color-acento); }
  .vc-boton--secundario { background: transparent; color: var(--vc-color-tinta); border-color: var(--vc-color-linea-fuerte); }
  .vc-boton--secundario:hover { border-color: var(--vc-color-tinta); }
  .vc-boton--principal:hover, .vc-boton--secundario:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  .vc-boton--texto { padding: 0; min-height: 0; border: 0; background: none; color: var(--vc-color-tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .vc-boton--texto:hover { text-decoration-thickness: 2px; }
  .vc-boton--grande { min-height: 56px; padding: 0 var(--vc-e-5); font-size: var(--vc-t-2); }
  .vc-boton[disabled] { opacity: 0.45; cursor: not-allowed; text-decoration: none; }
}

/* ---- componentes/base/Enlace.css ---- */
@layer componentes {
  /* Enlace de texto: subrayado fino en reposo, más grueso al hover/foco. Nunca cambio de color (A16b).
     Sin color propio: hereda el del texto (tinta, tinta-2 en meta, inv-tinta en invertida, acento-texto en prosa por la regla de base).
     Los px de este fichero son grosores de trazo del subrayado (1 px = --vc-borde, 2 px = gesto de hover), no espaciado. */
  .vc-enlace { text-decoration: underline; text-decoration-thickness: var(--vc-borde); text-underline-offset: 0.2em; }
  .vc-enlace:hover, .vc-enlace:focus-visible { text-decoration-thickness: 2px; }
  .vc-enlace--tinta { color: var(--vc-color-tinta); }
  .vc-enlace--acento { color: var(--vc-color-acento-texto); }
  .vc-enlace--sin-subrayado { text-decoration: none; }
  .vc-enlace--sin-subrayado:hover, .vc-enlace--sin-subrayado:focus-visible { text-decoration: underline; text-decoration-thickness: var(--vc-borde); }
  /* Página actual: subrayada aunque el menú vaya sin subrayar; al hover conserva el mismo gesto que el resto. */
  .vc-enlace[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--vc-borde); }
  .vc-enlace[aria-current="page"]:hover, .vc-enlace[aria-current="page"]:focus-visible { text-decoration-thickness: 2px; }
  /* Flecha del kit pegada a la última palabra (word joiner en el TSX + inline-block): escala con el texto, mínimo --vc-e-3 (16 px), sin subrayar. */
  .vc-enlace__externo { display: inline-block; margin-inline-start: var(--vc-e-1); text-decoration: none; }
  /* El glifo arrow-up-right ocupa 7..17 del grid 24: el SVG deja 7/24 de aire a cada lado. Se compensa SOLO el lado derecho
     (5/24, no los 7 enteros) para que la puntuación que sigue («…Rodríguez↗.») se asiente junto a la flecha sin comerse el
     espacio de la palabra siguiente; el lado izquierdo conserva el gap --vc-e-1 del spec más el aire del glifo. */
  .vc-enlace__icono { --_t: max(1em, var(--vc-e-3)); width: var(--_t); height: var(--_t); margin-inline-end: calc(var(--_t) * -5 / 24); vertical-align: -0.12em; }
}

/* ---- componentes/base/Icono.css ---- */
@layer componentes {
  .vc-icono { width: var(--vc-icono-tamano); height: var(--vc-icono-tamano); flex: none; fill: none; stroke: currentColor; stroke-width: var(--vc-icono-trazo); stroke-linecap: square; stroke-linejoin: miter; vertical-align: -0.2em; display: inline-block; }
}

/* ---- componentes/base/Marca.css ---- */
@layer componentes {
  /* Wordmark tipográfico: nombre en Archivo wdth 125 / 800 (el «volumen» literal, REQUISITOS §tipografía: sin excepción en móvil),
     descriptor en meta. Tinta en ambos modos: la marca no cambia con el tema. */
  .vc-marca { display: inline-grid; width: fit-content; gap: var(--vc-e-1); color: var(--vc-color-tinta); text-decoration: none; }
  .vc-marca__nombre { font-family: var(--vc-f-display); font-stretch: var(--vc-ancho-display); font-weight: var(--vc-peso-display); font-size: var(--vc-t-2); line-height: var(--vc-interlineado-display); letter-spacing: var(--vc-tracking-display); white-space: nowrap; }
  .vc-marca__descriptor { font-family: var(--vc-f-cuerpo); font-stretch: var(--vc-ancho-cuerpo); font-weight: var(--vc-peso-cuerpo); font-size: var(--vc-t-caption); line-height: var(--vc-interlineado-cuerpo); letter-spacing: 0; color: var(--vc-color-tinta-2); }
  /* Grande (portada, cierre): el nombre puede partirse en «Volumen / Cero» en pantallas estrechas en vez de desbordar. */
  .vc-marca--grande .vc-marca__nombre { font-size: var(--vc-t-4); white-space: normal; text-wrap: balance; }
  .vc-marca--grande .vc-marca__descriptor { font-size: var(--vc-t-cuerpo); }
  .vc-marca--al-lado { grid-auto-flow: column; align-items: baseline; column-gap: var(--vc-e-3); }
  /* Hover y foco: gesto leve, solo el nombre se subraya (filete de 1 px, como en base.css); nunca cambio de color (A16b).
     La primera regla anula el subrayado genérico de `a:hover` de base.css para que el descriptor no se subraye. */
  .vc-marca:hover, .vc-marca:focus-visible { text-decoration: none; }
  .vc-marca:hover .vc-marca__nombre, .vc-marca:focus-visible .vc-marca__nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
  /* Retícula: en pantallas estrechas «al lado» se apila; el descriptor no se parte en dos líneas junto al nombre. */
  @media (max-width: 480px) { .vc-marca--al-lado { grid-auto-flow: row; row-gap: var(--vc-e-1); } }
}

/* ---- 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--meta { font-size: var(--vc-t-caption); line-height: 1.5; color: var(--vc-color-tinta-2); max-width: var(--vc-medida); }
  .vc-texto--dato { font-family: var(--vc-f-mono); font-size: var(--vc-t-caption); line-height: 1.5; color: var(--vc-color-tinta-2); font-variant-numeric: tabular-nums; }
  .vc-texto--sin-medida { max-width: none; }
  .vc-prosa { max-width: var(--vc-medida); }
}

/* ---- componentes/base/Titular.css ---- */
@layer componentes {
  .vc-titular { font-family: var(--vc-f-display); font-stretch: var(--vc-ancho-display); font-weight: var(--vc-peso-display); line-height: var(--vc-interlineado-display); letter-spacing: var(--vc-tracking-display); max-width: 22ch; text-wrap: balance; overflow-wrap: anywhere; }
  .vc-titular--portada { font-size: var(--vc-t-6); max-width: 16ch; }
  .vc-titular--seccion { font-size: var(--vc-t-5); }
  .vc-titular--bloque { font-size: var(--vc-t-3); font-weight: 700; }
  .vc-titular--gigante { font-size: var(--vc-t-gigante); line-height: 0.82; letter-spacing: -0.03em; max-width: none; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; overflow: hidden; margin-inline: calc(-1 * var(--vc-margen)); padding-inline: var(--vc-margen); user-select: none; pointer-events: none; text-wrap: initial; }
  .vc-titular--linea { color: var(--vc-color-linea); }
  .vc-titular--tinta { color: var(--vc-color-tinta); }
  @media (max-width: 700px) { .vc-titular { font-stretch: 112%; } }
}

/* ---- componentes/contenido/Cita.css ---- */
@layer componentes {
  /* Cita: un filete de 1 px (--vc-borde) a la izquierda es todo el gesto. Sin comillas gigantes, sin cursiva, sin foto. */
  .vc-cita { display: grid; gap: var(--vc-e-3); max-width: var(--vc-medida); padding-inline-start: var(--vc-e-4); border-inline-start: var(--vc-borde) solid var(--vc-color-linea); }
  .vc-cita__texto { font-size: var(--vc-t-cuerpo); line-height: var(--vc-interlineado-cuerpo); font-style: normal; }
  .vc-cita__texto p { max-width: none; text-wrap: pretty; }
  /* Pie en meta (13 px, tinta-2); el nombre en tinta y peso medio para que se lea primero. */
  .vc-cita__pie { font-size: var(--vc-t-caption); line-height: var(--vc-interlineado-cuerpo); color: var(--vc-color-tinta-2); max-width: none; }
  .vc-cita__nombre { color: var(--vc-color-tinta); font-weight: var(--vc-peso-medio); }
  /* Separador «·» entre datos, como en la Ficha en línea. */
  .vc-cita__detalle::before { content: " · "; white-space: pre; }
  .vc-cita__enlace { color: var(--vc-color-tinta); }
}

/* ---- componentes/contenido/Ficha.css ---- */
@layer componentes {
  .vc-ficha { display: grid; gap: var(--vc-e-2) var(--vc-e-4); }
  .vc-ficha__grupo { display: grid; grid-template-columns: minmax(7ch, 12ch) 1fr; gap: var(--vc-e-3); align-items: baseline; padding-block: var(--vc-e-2); border-top: var(--vc-borde) solid var(--vc-color-linea); }
  .vc-ficha__grupo:first-child { border-top: 0; padding-top: 0; }
  .vc-ficha__termino { font-size: var(--vc-t-caption); color: var(--vc-color-tinta-2); line-height: 1.5; }
  .vc-ficha__descripcion { margin: 0; }
  .vc-ficha--en-linea { display: flex; flex-wrap: wrap; gap: 0; font-size: var(--vc-t-caption); color: var(--vc-color-tinta-2); line-height: 1.5; }
  .vc-ficha--en-linea .vc-ficha__grupo { display: inline; padding: 0; border: 0; }
  .vc-ficha--en-linea .vc-ficha__grupo + .vc-ficha__grupo::before { content: " · "; white-space: pre; }
  .vc-ficha--en-linea .vc-ficha__termino { display: inline; }
  .vc-ficha--en-linea .vc-ficha__termino::after { content: ": "; }
  .vc-ficha--en-linea .vc-ficha__descripcion { display: inline; color: var(--vc-color-tinta); }
  .vc-ficha--solo-descripciones .vc-ficha__termino { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vc-ficha--solo-descripciones .vc-ficha__termino::after { content: none; }
  @media (max-width: 480px) { .vc-ficha__grupo { grid-template-columns: 1fr; gap: var(--vc-e-1); } }
}

/* ---- componentes/contenido/Ilustracion.css ---- */
@layer componentes {
  /* Figura desnuda: sin marco, sin sombra, sin fondo. El color lo hereda del contexto (tinta o inv-tinta) y el SVG lo recibe como fill.
     --vc-ilustracion-desborde y --vc-ilustracion-spot-max se leen con fallback (no se declaran aquí) para que un contenedor pueda fijarlas. */
  .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; }
  .vc-ilustracion__marco > img { display: block; inline-size: 100%; block-size: auto; }
  /* 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--1-1 .vc-ilustracion__marco { aspect-ratio: 1 / 1; }
  .vc-ilustracion--4-5 .vc-ilustracion__marco { aspect-ratio: 4 / 5; }
  .vc-ilustracion--16-9 .vc-ilustracion__marco > svg, .vc-ilustracion--16-9 .vc-ilustracion__marco > img,
  .vc-ilustracion--1-1 .vc-ilustracion__marco > svg, .vc-ilustracion--1-1 .vc-ilustracion__marco > img,
  .vc-ilustracion--4-5 .vc-ilustracion__marco > svg, .vc-ilustracion--4-5 .vc-ilustracion__marco > img { block-size: 100%; object-fit: contain; }
  /* Tamaños: spot entre 64 px (--vc-e-6) y 120 px (tope fijado por la especificación: «spot = 64–120px»; es valor de retícula, no espaciado),
     media = columna de lectura (--vc-medida), hero = todo el bloque. */
  .vc-ilustracion--spot { inline-size: clamp(var(--vc-e-6), 8vw, var(--vc-ilustracion-spot-max, 120px)); max-inline-size: 100%; flex: none; }
  .vc-ilustracion--hero { max-inline-size: none; }
  /* Desborde: rompe la caja con margen negativo. La medida es --vc-ilustracion-desborde (por defecto --vc-margen, hasta el borde de la página). */
  .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--spot.vc-ilustracion--desborda-derecha, .vc-ilustracion--spot.vc-ilustracion--desborda-izquierda { inline-size: clamp(var(--vc-e-6), 8vw, var(--vc-ilustracion-spot-max, 120px)); }
  /* Pie en meta: 13 px, tinta-2, misma medida que la prosa. */
  .vc-ilustracion__pie { margin-block-start: var(--vc-e-2); font-size: var(--vc-t-caption); line-height: var(--vc-interlineado-cuerpo); color: var(--vc-color-tinta-2); max-inline-size: var(--vc-medida); }
}

/* ---- componentes/contenido/ListaClientes.css ---- */
@layer componentes {
  .vc-lista-clientes { display: grid; gap: var(--vc-e-3); align-content: start; }
  .vc-lista-clientes__titulo { max-width: none; }
  .vc-lista-clientes__lista { display: grid; }
  .vc-lista-clientes__item { max-width: var(--vc-medida); padding-block: var(--vc-e-2); border-top: var(--vc-borde) solid var(--vc-color-linea); font-size: var(--vc-t-cuerpo); line-height: var(--vc-interlineado-cuerpo); }
  .vc-lista-clientes__item:last-child { border-bottom: var(--vc-borde) solid var(--vc-color-linea); }
  .vc-lista-clientes__nombre { color: var(--vc-color-tinta); }
  .vc-lista-clientes__detalle { color: var(--vc-color-tinta-2); }
  .vc-lista-clientes__detalle::before { content: " · "; white-space: pre; }
}

/* ---- componentes/contenido/Servicio.css ---- */
@layer componentes {
  /* ---- ListaServicios: lista editorial con filete entre ítems. Sin tarjetas, sin fondo, sin numeración. ---- */
  /* .vc-servicios es la <section> (con título) o la propia <ol> (sin él): por eso el aire lo pone el titular, no un gap del contenedor. */
  .vc-servicios__titulo { margin: 0 0 var(--vc-e-5); }
  .vc-servicios__lista { display: grid; list-style: none; padding: 0; margin: 0; }
  .vc-servicios__lista > .vc-servicio + .vc-servicio { border-top: var(--vc-borde) solid var(--vc-color-linea); }
  .vc-servicios__lista > .vc-servicio:first-child { padding-top: 0; }
  .vc-servicios__lista > .vc-servicio:last-child { padding-bottom: 0; }

  /* ---- Servicio: retícula ilustración 1/3 + texto 2/3 cuando hay ilustración; una columna si no. ---- */
  /* max-width: none anula la medida que base.css pone a todo <li>: la retícula ocupa la columna entera; la frase (<p>) conserva su medida. */
  .vc-servicio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vc-e-4) var(--vc-e-5); align-items: start; padding-block: var(--vc-e-5); max-width: none; }
  .vc-servicio--con-ilustracion { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  /* La ilustración hereda la tinta (currentColor) y puede usar var(--vc-color-acento): cambia de modo por tokens. Sin marco ni fondo. */
  .vc-servicio__ilustracion { color: var(--vc-color-tinta); line-height: 0; }
  .vc-servicio__ilustracion > svg, .vc-servicio__ilustracion > img { width: 100%; height: auto; }
  .vc-servicio__texto { display: grid; gap: var(--vc-e-3); min-width: 0; }
  .vc-servicio__nombre { margin: 0; }
  .vc-servicio__frase { margin: 0; }
  .vc-servicio__datos { display: flex; flex-wrap: wrap; column-gap: var(--vc-e-3); row-gap: var(--vc-e-1); align-items: baseline; }
  /* Único enlace del ítem: subrayado fino siempre (es lo que se pulsa); al pasar o al recibir el foco, la línea dobla su grosor y la flecha avanza un poco. Nunca cambio de color (A16b). */
  .vc-servicio__enlace { display: inline-flex; justify-self: start; align-items: center; gap: var(--vc-e-1); color: var(--vc-color-tinta); font-weight: var(--vc-peso-medio); text-decoration: underline; text-decoration-thickness: var(--vc-borde); text-underline-offset: 0.2em; }
  .vc-servicio__enlace:hover, .vc-servicio__enlace:focus-visible { text-decoration-thickness: calc(2 * var(--vc-borde)); text-underline-offset: 0.2em; }
  .vc-servicio__enlace .vc-icono { transition: translate var(--vc-dur-1) var(--vc-ease); }
  .vc-servicio__enlace:hover .vc-icono, .vc-servicio__enlace:focus-visible .vc-icono { translate: 0.15em 0; }

  /* 700 px: el mismo corte que Titular y Marca (valor de retícula). Se apila con la ilustración primero, a media columna. */
  @media (max-width: 700px) {
    .vc-servicio--con-ilustracion { grid-template-columns: minmax(0, 1fr); }
    .vc-servicio__ilustracion { max-width: 50%; }
  }
}

/* ---- componentes/contenido/Trabajo.css ---- */
@layer componentes {
  /* min-width 0 + contain inline-size: la anchura intrínseca de la captura no puede ensanchar la columna donde vive el artículo.
     position: relative es el marco del enlace estirado del título (ver abajo). */
  .vc-trabajo { position: relative; display: grid; gap: var(--vc-e-3); min-width: 0; }
  .vc-trabajo__titulo { margin: 0; }
  /* Enlace estirado: con href, el enlace del título extiende su zona de clic a todo el artículo con un pseudoelemento. El pie va
     por encima (position + z-index), así «Ver la web» sigue siendo clicable y la ficha seleccionable; la imagen no se envuelve en
     un segundo enlace y conserva su alt. Al pasar el cursor por la captura, el título se subraya (hover heredado de base.css). */
  .vc-trabajo__titulo-enlace::after { content: ""; position: absolute; inset: 0; }
  /* La captura entera y a proporción: la caja toma la proporción real de la captura, la imagen se ajusta dentro (contain) y detrás
     solo hay superficie. Radio 0, sin sombra, sin overlay, sin zoom. */
  .vc-trabajo__captura { aspect-ratio: var(--vc-trabajo-proporcion, 16 / 10); width: 100%; min-width: 0; contain: inline-size; background: var(--vc-color-superficie); border-radius: 0; overflow: hidden; }
  .vc-trabajo__imagen { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 0; }
  .vc-trabajo__pie { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--vc-e-2) var(--vc-e-4); }
  .vc-trabajo__ficha { flex: 1 1 24ch; }
  /* <p> de acciones: sin la medida de lectura (no es prosa), en tamaño meta como la ficha en línea. */
  .vc-trabajo__acciones { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--vc-e-3); max-width: none; font-size: var(--vc-t-caption); line-height: 1.5; }
  .vc-trabajo__enlace { font-weight: var(--vc-peso-medio); }
}

/* ---- componentes/estructura/Cabecera.css ---- */
@layer componentes {
  /* Píxeles que quedan fuera de los tokens, y por qué: 44px = objetivo táctil (checklist C, el mismo valor que la spec de Campo);
     24 del icono = retícula del kit (24×24); 900px = umbral móvil fijado en la spec. Todo lo demás son tokens. */

  /* Pegada arriba, fondo del tema, z-index bajo y explícito (nada de 9999). La cabecera es su propio contenedor de consulta:
     el estado móvil depende de su anchura, no de la ventana, así un preview estrecho ya lo enseña. */
  .vc-cabecera { position: sticky; top: 0; z-index: 10; background: var(--vc-color-fondo); color: var(--vc-color-tinta); container-type: inline-size; }
  .vc-cabecera--pegada { border-bottom: var(--vc-borde) solid var(--vc-color-linea); }
  /* Tres pistas 1fr · auto · 1fr: el menú queda centrado en la página, no en el hueco que dejan marca e idioma. */
  .vc-cabecera__interior { min-height: var(--vc-alto-cabecera); padding-inline: var(--vc-margen); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--vc-e-4); }
  .vc-cabecera__marca { justify-self: start; }
  .vc-cabecera__panel { display: contents; }
  .vc-cabecera__nav { justify-self: center; }
  .vc-cabecera__lista { display: flex; flex-wrap: wrap; column-gap: var(--vc-e-4); row-gap: 0; }
  .vc-cabecera__lista li { max-width: none; }
  .vc-cabecera__enlace { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--vc-t-cuerpo); line-height: 1.2; text-underline-offset: 0.2em; }
  /* Página actual: subrayado fino; al pasar el cursor el gesto es engrosarlo, nunca cambiar de color (A16b). */
  .vc-cabecera__enlace[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--vc-borde); }
  .vc-cabecera__enlace[aria-current="page"]:hover { text-decoration-thickness: calc(2 * var(--vc-borde)); }
  /* Conmutador textual ES | EN: la lengua actual en tinta y subrayada; la otra en tinta-2. El hover solo subraya. */
  .vc-cabecera__idioma { justify-self: end; display: inline-flex; align-items: center; gap: var(--vc-e-2); font-size: var(--vc-t-caption); line-height: 1.5; color: var(--vc-color-tinta-2); }
  .vc-cabecera__lengua { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--vc-e-1); text-underline-offset: 0.2em; }
  .vc-cabecera__lengua[aria-current="true"] { color: var(--vc-color-tinta); text-decoration: underline; text-decoration-thickness: var(--vc-borde); }
  .vc-cabecera__lengua[aria-current="true"]:hover { text-decoration-thickness: calc(2 * var(--vc-borde)); }
  /* Botón del menú móvil: oculto en escritorio. El margen negativo alinea el trazo del icono con el margen de página. */
  .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); }
  /* Dos reglas, no una lista: un pseudoelemento con prefijo en una lista de selectores puede invalidar la regla entera. */
  .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 de anchura de la cabecera: marca + botón; el panel (el mismo <nav>) cae bajo la barra cuando <details> está abierto. */
  @container (max-width: 900px) {
    .vc-cabecera__interior { grid-template-columns: 1fr auto; }
    .vc-cabecera__menu { display: block; justify-self: end; }
    .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-borde) solid var(--vc-color-linea); padding: var(--vc-e-3) var(--vc-margen) var(--vc-e-5); }
    .vc-cabecera:has(.vc-cabecera__menu[open]) .vc-cabecera__panel { display: grid; row-gap: var(--vc-e-4); }
    .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-2); font-weight: var(--vc-peso-medio); min-height: 44px; }
    .vc-cabecera__idioma { justify-self: start; padding-top: var(--vc-e-3); border-top: var(--vc-borde) solid var(--vc-color-linea); width: 100%; }
  }

  /* Banda de escritorio estrecho (901–1000 px, p. ej. tablet apaisada): la marca (~200 px), el menú de seis palabras (~500 px)
     y el conmutador (~70 px) con huecos de e-4 necesitan ~935 px de cabecera, así que justo por encima del umbral móvil el
     menú se partía en dos líneas. Los huecos bajan a e-3 solo aquí; a partir de 1000 px vuelven a e-4. */
  @container (900px < width <= 1000px) {
    .vc-cabecera__interior { column-gap: var(--vc-e-3); }
    .vc-cabecera__lista { column-gap: var(--vc-e-3); }
  }
}

/* ---- componentes/estructura/Pie.css ---- */
@layer componentes {
  /* Una sola franja de texto meta con filete superior. En .vc-invertida los tokens de fondo, tinta-2 y línea cambian solos. */
  .vc-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--vc-e-3) var(--vc-e-5); padding-block: var(--vc-e-7) var(--vc-e-6); padding-inline: var(--vc-margen); border-top: var(--vc-borde) solid var(--vc-color-linea); background: var(--vc-color-fondo); color: var(--vc-color-tinta-2); font-size: var(--vc-t-caption); line-height: var(--vc-interlineado-cuerpo); }
  .vc-pie__firma { display: flex; flex-wrap: wrap; gap: 0; max-width: none; }
  .vc-pie__lugares::before { content: " · "; white-space: pre; }
  .vc-pie__lista { display: flex; flex-wrap: wrap; gap: 0; }
  .vc-pie__item { max-width: none; }
  .vc-pie__item + .vc-pie__item::before { content: " · "; white-space: pre; }
  /* Enlaces en tinta-2 heredada; el hover es el subrayado de base.css. El relleno vertical compensado con margen negativo
     amplía el área táctil a ≥ 24 px (suelo técnico C) sin alterar el ritmo de la franja. */
  .vc-pie__enlace, .vc-pie__correo { color: inherit; padding-block: var(--vc-e-1); margin-block: calc(-1 * var(--vc-e-1)); }
  .vc-pie__credito { flex-basis: 100%; max-width: var(--vc-medida); }
  /* 600px es un punto de la retícula (móvil), no un espaciado suelto. */
  @media (max-width: 600px) { .vc-pie { gap: var(--vc-e-3) var(--vc-e-4); } }
}

/* ---- componentes/estructura/Seccion.css ---- */
@layer componentes {
  .vc-seccion { padding-block: var(--vc-e-7); }
  .vc-seccion--grande { padding-block: var(--vc-e-8); }
  /* Superficie: el fondo pasa a ser la superficie también para lo que hay dentro (halo del foco, cajas), igual que hace .vc-invertida con los inv-*. */
  .vc-seccion--superficie { --vc-color-fondo: var(--vc-color-superficie); background: var(--vc-color-fondo); }
  /* A sangre: la banda toca los bordes de la ventana; el contenido vuelve a su sitio con el mismo margen. */
  .vc-seccion--sangre { margin-inline: calc(-1 * var(--vc-margen)); padding-inline: var(--vc-margen); }
  /* Con tono pero sin sangre: caja al ancho del contenido; el texto no toca el borde. Radio 0: es una banda, no una tarjeta. */
  .vc-seccion--invertida:not(.vc-seccion--sangre), .vc-seccion--superficie:not(.vc-seccion--sangre) { padding-inline: var(--vc-e-4); }
  /* Dos bandas seguidas del mismo tono no dejan doble respiro; la segunda pega con la primera sin costura. */
  .vc-seccion--invertida + .vc-seccion--invertida, .vc-seccion--superficie + .vc-seccion--superficie { padding-top: 0; }
}

/* ---- componentes/estructura/SelectorTema.css ---- */
@layer componentes {
  /* Control de texto en meta (13 px, tinta-2). El fieldset se maqueta en flex; la leyenda flotada deja de ser «legend renderizada»
     y entra en el flujo como un ítem más (comportamiento estándar en Chromium, Firefox y Safari). */
  .vc-selector-tema { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; font-size: var(--vc-t-caption); line-height: 1.5; color: var(--vc-color-tinta-2); }
  .vc-selector-tema__etiqueta { float: left; padding: 0; margin-inline-end: var(--vc-e-2); }
  .vc-selector-tema__etiqueta::after { content: ":"; }
  /* Alto mínimo --vc-e-4 (24 px): tamaño de objetivo suficiente (WCAG 2.5.8) sin convertir el texto en botón. */
  .vc-selector-tema__opcion { display: inline-block; min-height: var(--vc-e-4); padding: 0; font: inherit; color: inherit; text-decoration: none; text-decoration-thickness: var(--vc-borde); text-underline-offset: 0.2em; }
  /* Separador fuera del botón (span aria-hidden): ni hereda el subrayado de la opción pulsada ni entra en su nombre accesible. */
  .vc-selector-tema__separador { margin-inline: var(--vc-e-1); user-select: none; }
  /* Cursor: aparece la línea; nunca cambio de color (A16b). */
  .vc-selector-tema__opcion:hover { text-decoration: underline; }
  .vc-selector-tema__opcion[aria-pressed="true"] { color: var(--vc-color-tinta); text-decoration: underline; }
  .vc-selector-tema__opcion[aria-pressed="true"]:hover { text-decoration-thickness: calc(2 * var(--vc-borde)); }
}

/* ---- componentes/formulario/Campo.css ---- */
@layer componentes {
  .vc-campo { display: grid; gap: var(--vc-e-2); width: 100%; max-width: var(--vc-medida); }
  .vc-campo__etiqueta { font-size: var(--vc-t-cuerpo); line-height: 1.3; font-weight: var(--vc-peso-medio); color: var(--vc-color-tinta); }
  .vc-campo__opcional { font-size: var(--vc-t-caption); font-weight: var(--vc-peso-cuerpo); color: var(--vc-color-tinta-2); }
  /* 44px = objetivo táctil de la retícula (el mismo que .vc-boton); no es espaciado suelto. */
  .vc-campo__control { display: block; width: 100%; min-height: 44px; padding: var(--vc-e-2) var(--vc-e-3); background: var(--vc-color-superficie-2); color: var(--vc-color-tinta); border: var(--vc-borde) solid var(--vc-color-linea-fuerte); border-radius: var(--vc-radio); font-family: var(--vc-f-cuerpo); font-stretch: var(--vc-ancho-cuerpo); font-size: var(--vc-t-cuerpo); line-height: var(--vc-interlineado-cuerpo); appearance: none; }
  textarea.vc-campo__control { resize: vertical; min-height: calc(2 * 44px); }
  .vc-campo__control:hover:not(:disabled) { border-color: var(--vc-color-tinta); }
  .vc-campo__control:disabled { opacity: 0.45; cursor: not-allowed; }
  .vc-campo__ayuda { font-size: var(--vc-t-caption); line-height: 1.5; color: var(--vc-color-tinta-2); }
  .vc-campo__error { font-size: var(--vc-t-caption); line-height: 1.5; color: var(--vc-color-error); }
  .vc-campo--error .vc-campo__control, .vc-campo--error .vc-campo__control:hover:not(:disabled) { border-color: var(--vc-color-error); }
  /* En una sección invertida superficie-2 seguiría siendo clara sobre navy y la tinta (clara) desaparecería: el control toma el fondo de la sección y vive de su borde. */
  .vc-invertida .vc-campo__control { background: var(--vc-color-fondo); }
}

/* ---- componentes/formulario/NotaRgpd.css ---- */
@layer componentes {
  /* Tipografía meta (13 px, tinta-2, interlineado 1,5, medida 65ch) la aporta `vc-texto--meta`, 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; }
}

/* ---- web.css ---- */
/* Volumen Cero · CSS de página (solo tokens del sistema). Lo que no es de un componente vive aquí. */
@layer componentes {
  .vc-pagina { padding: 0 var(--vc-margen); }
  .vc-saltar { position: absolute; left: -999px; top: 0; z-index: 10; background: var(--vc-color-fondo); color: var(--vc-color-tinta); padding: var(--vc-e-2) var(--vc-e-3); text-decoration: underline; }
  .vc-saltar:focus { left: var(--vc-margen); }
}
@layer componentes {
  /* Aire entre los bloques directos de una sección (titular → contenido → lista); los componentes no llevan margen propio. */
  .vc-seccion > * + * { margin-top: var(--vc-e-5); }
}
@layer componentes {
  /* Rejilla de ilustraciones (página de trabajo): tres por fila en escritorio, dos en móvil; cada pieza a su proporción. */
  .vc-rejilla-ilus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vc-e-5) var(--vc-e-4); }
  .vc-rejilla-ilus .vc-ilustracion { margin: 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)); } }
}