/* pixelhome.es - tipografías, colores y piezas comunes.
   Hay ocho estilos (plano, arcade, claro y cinco minimalistas: mono, noche, tinta, suizo y niebla). Se elige en
   Administración > Ajustes > Aspecto y se aplica con el atributo data-style de la página. La web arranca con
   «niebla» (lo decide app/lib/settings.php); los colores que van sin atributo, justo debajo, son los de «plano». */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Jersey 10"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jersey-10-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/jost-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-latin-wght-normal.woff2) format("woff2"); }
/* La de los anuncios sin imagen (el título sobre un color). No se usa en la página: solo para dibujar esos anuncios,
   aquí en la vista previa y en el servidor, con el mismo archivo. */
@font-face { font-family: "Manrope Rotulo"; font-style: normal; font-weight: 800; font-display: block; src: url(fonts/manrope-rotulo-800.ttf) format("truetype"); }

/* ---------- Estilo «plano» (por defecto): plano de obra en azul, línea blanca y amarillo de cartel ---------- */

:root {
  color-scheme: dark;

  --bg: #0b2b6e;
  --bar: #071e52;
  --bar-edge: #cfdcfb;
  --surface: #0e3382;
  --surface-2: #1c4aa8;
  --field: #06194a;
  --field-edge: #6385d1;
  --edge: #cfdcfb;
  --rule: #3158ad;
  --text: #f5f8ff;
  --muted: #a9c1f3;
  --accent: #ffd60a;
  --accent-hi: #ffe566;
  --accent-ink: #06173f;
  --accent-edge: #ffd60a;
  --accent-text: #ffd60a;
  --link: #ffe566;
  --ok: #7be8b0;
  --ok-bg: rgba(123, 232, 176, 0.12);
  --bad: #ffa3a3;
  --bad-bg: rgba(255, 120, 120, 0.16);
  --warn: #ffc470;
  --warn-bg: rgba(4, 16, 48, 0.5);
  --ghost-bg: transparent;
  --ghost-hover: rgba(255, 255, 255, 0.13);
  --focus: #ffffff;
  --backdrop: rgba(3, 12, 38, 0.72);
  --paper: #1746a6;
  --float: #071e52;

  --bw: 1.5px;
  --bw-s: 1.5px;
  --rw: 1px;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 0px;
  --radius-btn: var(--radius-sm);
  --shadow: 0 0 0 4px rgba(7, 30, 82, 0.55);
  --shadow-btn: 0 0 0 0 transparent;
  --press: 1px;
  --chip-pad: 3px 8px;
  --chip-edge: var(--accent-text);
  --meter-h: 6px;

  --font: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --display-w: 600;
  --ds: 1;
  --caps: uppercase;
  --track: 0.06em;
  --btn-size: 16px;
  --btn-w: 600;
  --brand-size: 23px;
  --brand-track: 0.05em;
  --h1-size: clamp(30px, 5vw, 42px);
  --h1-track: 0.02em;

  --brand-a: #ffd60a;
  --brand-b: #f5f8ff;
  --brand-c: #071e52;

  /* Colores del panel (los lee app.js para dibujar en el lienzo) */
  --cv-ground: #0b2b6e;
  --cv-free: #1746a6;
  --cv-grid: rgba(255, 255, 255, 0.07);
  --cv-grid-2: rgba(255, 255, 255, 0.2);
  --cv-grid-px: var(--cv-grid); /* cuadrícula de píxel a píxel, con el panel muy ampliado */
  --cv-edge: #dfe8ff;
  --cv-edge-w: 1.5;
  --cv-shadow: rgba(0, 0, 0, 0);
  --cv-shadow-x: 0;
  --cv-shadow-y: 0;
  --cv-mark: rgba(255, 255, 255, 0.3);
  --cv-sel: #ffd60a;
  --cv-sel-fill: rgba(255, 255, 255, 0.3);
  --cv-sel-outer: #06173f;
  --cv-bad: #ff5c5c;
  --cv-bad-fill: rgba(255, 92, 92, 0.42);
  --cv-handle: #ffd60a;
  --cv-handle-edge: #06173f;
  --cv-tag: #06173f;
  --cv-tag-ink: #ffffff;
  --cv-tag-edge: #ffd60a;
  --cv-hover: #ffffff;
  --cv-hover-outer: #06173f;
  --cv-focus: #ffd60a;
  --cv-hatch-bg: rgba(7, 30, 82, 0.55);
  --cv-hatch: rgba(255, 255, 255, 0.8);
  --cv-guide: rgba(255, 255, 255, 0.55);
  --cv-ruler: #071e52;
  --cv-ruler-ink: #a9c1f3;
  --cv-ruler-line: #5578c6;
}

/* ---------- Estilo «arcade»: amarillo, bordes negros gruesos y letra pixelada ---------- */

:root[data-style="arcade"] {
  color-scheme: light;

  --bg: #ffd84a;
  --bar: #ffffff;
  --bar-edge: #111111;
  --surface: #ffffff;
  --surface-2: #ffe98f;
  --field: #ffffff;
  --field-edge: #111111;
  --edge: #111111;
  --rule: #111111;
  --text: #111111;
  --muted: #4a4a4a;
  --accent: #ff4fa3;
  --accent-hi: #ff80bd;
  --accent-ink: #111111;
  --accent-edge: #111111;
  --accent-text: #c4006a;
  --link: #b4005f;
  --ok: #0b7a35;
  --ok-bg: #d6f7b8;
  --bad: #c4122f;
  --bad-bg: #ffd9de;
  --warn: #8f4a00;
  --warn-bg: #ffe9c2;
  --ghost-bg: #ffffff;
  --ghost-hover: #b9f0ff;
  --focus: #1746ff;
  --backdrop: rgba(17, 17, 17, 0.6);
  --paper: #ffffff;
  --float: #ffffff;

  --bw: 3px;
  --bw-s: 2px;
  --rw: 2px;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 0px;
  --shadow: 6px 6px 0 #111111;
  --shadow-btn: 3px 3px 0 #111111;
  --press: 3px;

  --display: "Jersey 10", "Barlow Condensed", "Arial Narrow", sans-serif;
  --display-w: 400;
  --ds: 1.3;
  --caps: none;
  --track: 0.02em;
  --btn-size: 23px;
  --btn-w: 400;
  --brand-size: 33px;
  --brand-track: 0.01em;
  --h1-size: clamp(40px, 7vw, 60px);
  --h1-track: 0.01em;

  --brand-w: 400;
  --brand-a: #ff4fa3;
  --brand-b: #111111;
  --brand-c: #ffd84a;

  --cv-ground: #ffd84a;
  --cv-free: #ffffff;
  --cv-grid: rgba(17, 17, 17, 0.07);
  --cv-grid-2: rgba(17, 17, 17, 0.17);
  --cv-edge: #111111;
  --cv-edge-w: 3;
  --cv-shadow: #111111;
  --cv-shadow-x: 8;
  --cv-shadow-y: 8;
  --cv-mark: rgba(17, 17, 17, 0.22);
  --cv-sel: #111111;
  --cv-sel-fill: rgba(40, 200, 255, 0.45);
  --cv-sel-outer: #ffffff;
  --cv-bad: #e0143a;
  --cv-bad-fill: rgba(224, 20, 58, 0.4);
  --cv-handle: #ff4fa3;
  --cv-handle-edge: #111111;
  --cv-tag: #111111;
  --cv-tag-ink: #ffd84a;
  --cv-tag-edge: #111111;
  --cv-hover: #ff4fa3;
  --cv-hover-outer: #111111;
  --cv-focus: #ff4fa3;
  --cv-hatch-bg: #ffd84a;
  --cv-hatch: #111111;
  --cv-guide: rgba(17, 17, 17, 0.5);
  --cv-ruler: #ffffff;
  --cv-ruler-ink: #111111;
  --cv-ruler-line: #111111;
}

/* ---------- Estilo «claro»: blanco, línea fina y verde ---------- */

:root[data-style="claro"] {
  color-scheme: light;

  --bg: #eef1ef;
  --bar: #ffffff;
  --bar-edge: #d5ddd8;
  --surface: #ffffff;
  --surface-2: #eaf1ed;
  --field: #ffffff;
  --field-edge: #b9c5be;
  --edge: #d5ddd8;
  --rule: #e3e9e5;
  --text: #0f1720;
  --muted: #56636b;
  --accent: #0a7d4f;
  --accent-hi: #0b9660;
  --accent-ink: #ffffff;
  --accent-edge: #0a7d4f;
  --accent-text: #0a7d4f;
  --link: #08693f;
  --ok: #0a6b43;
  --ok-bg: #e3f4ea;
  --bad: #b3261e;
  --bad-bg: #fbe9e7;
  --warn: #8a5300;
  --warn-bg: #fdf1d8;
  --ghost-bg: #ffffff;
  --ghost-hover: #eef3f0;
  --focus: #0a7d4f;
  --backdrop: rgba(15, 23, 32, 0.45);
  --paper: #ffffff;
  --float: #ffffff;

  --bw: 1px;
  --bw-s: 1px;
  --rw: 1px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 10px 34px rgba(15, 23, 32, 0.14), 0 1px 3px rgba(15, 23, 32, 0.08);
  --shadow-btn: 0 0 0 0 transparent;
  --press: 1px;

  --display: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-w: 700;
  --ds: 1;
  --caps: none;
  --track: 0;
  --btn-size: 15.5px;
  --btn-w: 600;
  --brand-size: 20px;
  --brand-track: -0.01em;
  --h1-size: clamp(26px, 4.4vw, 36px);
  --h1-track: -0.02em;

  --brand-a: #0a7d4f;
  --brand-b: #0f1720;
  --brand-c: #ffffff;

  --cv-ground: #eef1ef;
  --cv-free: #ffffff;
  --cv-grid: rgba(15, 23, 32, 0.055);
  --cv-grid-2: rgba(15, 23, 32, 0.12);
  --cv-edge: #c3cec7;
  --cv-edge-w: 1;
  --cv-shadow: rgba(15, 23, 32, 0.08);
  --cv-shadow-x: 0;
  --cv-shadow-y: 3;
  --cv-mark: rgba(15, 23, 32, 0.2);
  --cv-sel: #0a7d4f;
  --cv-sel-fill: rgba(10, 125, 79, 0.24);
  --cv-sel-outer: #ffffff;
  --cv-bad: #c62828;
  --cv-bad-fill: rgba(198, 40, 40, 0.3);
  --cv-handle: #ffffff;
  --cv-handle-edge: #0a7d4f;
  --cv-tag: #0f1720;
  --cv-tag-ink: #ffffff;
  --cv-tag-edge: #0f1720;
  --cv-tag-r: 6;
  --cv-hover: #0f1720;
  --cv-hover-outer: #ffffff;
  --cv-focus: #0a7d4f;
  --cv-hatch-bg: rgba(138, 83, 0, 0.14);
  --cv-hatch: rgba(138, 83, 0, 0.75);
  --cv-guide: rgba(15, 23, 32, 0.4);
  --cv-ruler: #ffffff;
  --cv-ruler-ink: #56636b;
  --cv-ruler-line: #b9c5be;
}

/* ============ Estilos minimalistas ============ */

/* ---------- «mono»: blanco y negro, línea fina y letra de máquina ---------- */

:root[data-style="mono"] {
  color-scheme: light;

  --bg: #ffffff;
  --bar: #ffffff;
  --bar-edge: #111111;
  --surface: #ffffff;
  --surface-2: #f0f0f0;
  --field: #ffffff;
  --field-edge: #111111;
  --edge: #111111;
  --rule: #dcdcdc;
  --text: #111111;
  --muted: #5f5f5f;
  --accent: #111111;
  --accent-hi: #3a3a3a;
  --accent-ink: #ffffff;
  --accent-edge: #111111;
  --accent-text: #111111;
  --link: #111111;
  --ok: #1a7f37;
  --ok-bg: #eef7f0;
  --bad: #c62828;
  --bad-bg: #fdeeee;
  --warn: #5f5f5f;
  --warn-bg: #f4f4f4;
  --ghost-bg: #ffffff;
  --ghost-hover: #f0f0f0;
  --focus: #111111;
  --backdrop: rgba(255, 255, 255, 0.84);
  --paper: #ffffff;
  --float: #ffffff;

  --bw: 1px;
  --bw-s: 1px;
  --rw: 1px;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 0px;
  --radius-btn: 0px;
  --shadow: none;
  --shadow-btn: 0 0 0 0 transparent;
  --press: 1px;
  --chip-pad: 0;
  --chip-edge: transparent;
  --meter-h: 2px;

  --display: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --display-w: 600;
  --ds: 0.9;
  --caps: none;
  --track: -0.02em;
  --btn-size: 14px;
  --btn-w: 600;
  --brand-size: 18px;
  --brand-track: -0.03em;
  --brand-w: 600;
  --h1-size: clamp(24px, 4vw, 34px);
  --h1-track: -0.04em;

  --brand-a: #111111;
  --brand-b: #111111;
  --brand-c: #ffffff;

  --cv-ground: #ffffff;
  --cv-free: #ffffff;
  --cv-grid: transparent;
  --cv-grid-2: rgba(0, 0, 0, 0.07);
  --cv-grid-px: rgba(0, 0, 0, 0.09);
  --cv-edge: #111111;
  --cv-edge-w: 1;
  --cv-shadow: rgba(0, 0, 0, 0);
  --cv-shadow-x: 0;
  --cv-shadow-y: 0;
  --cv-mark: rgba(0, 0, 0, 0.25);
  --cv-sel: #111111;
  --cv-sel-fill: rgba(0, 0, 0, 0.14);
  --cv-sel-outer: #ffffff;
  --cv-bad: #d32f2f;
  --cv-bad-fill: rgba(211, 47, 47, 0.28);
  --cv-handle: #ffffff;
  --cv-handle-edge: #111111;
  --cv-tag: #111111;
  --cv-tag-ink: #ffffff;
  --cv-tag-edge: #111111;
  --cv-tag-r: 0;
  --cv-hover: #111111;
  --cv-hover-outer: #ffffff;
  --cv-focus: #111111;
  --cv-hatch-bg: #ffffff;
  --cv-hatch: rgba(0, 0, 0, 0.55);
  --cv-guide: rgba(0, 0, 0, 0.45);
  --cv-ruler: #ffffff;
  --cv-ruler-ink: #5f5f5f;
  --cv-ruler-line: #9a9a9a;
}

/* ---------- «noche»: negro, texto blanco y nada más ---------- */

:root[data-style="noche"] {
  color-scheme: dark;

  --bg: #0a0a0b;
  --bar: #0a0a0b;
  --bar-edge: #26262a;
  --surface: #111113;
  --surface-2: #1d1d21;
  --field: #0a0a0b;
  --field-edge: #66666e;
  --edge: #34343a;
  --rule: #222226;
  --text: #f3f3f4;
  --muted: #9b9ba3;
  --accent: #ffffff;
  --accent-hi: #d6d6da;
  --accent-ink: #0a0a0b;
  --accent-edge: #ffffff;
  --accent-text: #ffffff;
  --link: #ffffff;
  --ok: #62d897;
  --ok-bg: rgba(98, 216, 151, 0.1);
  --bad: #ff8f85;
  --bad-bg: rgba(255, 143, 133, 0.12);
  --warn: #9b9ba3;
  --warn-bg: rgba(255, 255, 255, 0.05);
  --ghost-bg: transparent;
  --ghost-hover: rgba(255, 255, 255, 0.08);
  --focus: #ffffff;
  --backdrop: rgba(0, 0, 0, 0.72);
  --paper: #151517;
  --float: #151517;

  --bw: 1px;
  --bw-s: 1px;
  --rw: 1px;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-pill: 999px;
  --radius-btn: 7px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 0 0 0 transparent;
  --press: 1px;
  --chip-pad: 0;
  --chip-edge: transparent;
  --meter-h: 2px;

  --font: "Manrope", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Manrope", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-w: 600;
  --ds: 0.96;
  --caps: none;
  --track: -0.015em;
  --btn-size: 14.5px;
  --btn-w: 600;
  --brand-size: 19px;
  --brand-track: -0.03em;
  --brand-w: 700;
  --h1-size: clamp(26px, 4.4vw, 36px);
  --h1-track: -0.035em;

  --brand-a: #ffffff;
  --brand-b: #ffffff;
  --brand-c: #0a0a0b;

  --cv-ground: #0a0a0b;
  --cv-free: #151517;
  --cv-grid: transparent;
  --cv-grid-2: rgba(255, 255, 255, 0.05);
  --cv-grid-px: rgba(255, 255, 255, 0.07);
  --cv-edge: #2e2e33;
  --cv-edge-w: 1;
  --cv-shadow: rgba(0, 0, 0, 0);
  --cv-shadow-x: 0;
  --cv-shadow-y: 0;
  --cv-mark: rgba(255, 255, 255, 0.22);
  --cv-sel: #ffffff;
  --cv-sel-fill: rgba(255, 255, 255, 0.16);
  --cv-sel-outer: #0a0a0b;
  --cv-bad: #ff6b60;
  --cv-bad-fill: rgba(255, 107, 96, 0.32);
  --cv-handle: #ffffff;
  --cv-handle-edge: #0a0a0b;
  --cv-tag: #ffffff;
  --cv-tag-ink: #0a0a0b;
  --cv-tag-edge: #ffffff;
  --cv-tag-r: 6;
  --cv-hover: #ffffff;
  --cv-hover-outer: #0a0a0b;
  --cv-focus: #ffffff;
  --cv-hatch-bg: rgba(255, 255, 255, 0.06);
  --cv-hatch: rgba(255, 255, 255, 0.5);
  --cv-guide: rgba(255, 255, 255, 0.4);
  --cv-ruler: #0a0a0b;
  --cv-ruler-ink: #9b9ba3;
  --cv-ruler-line: #3b3b41;
}

/* ---------- «tinta»: papel blanco y una sola tinta azul para todo ---------- */

:root[data-style="tinta"] {
  color-scheme: light;

  --bg: #ffffff;
  --bar: #ffffff;
  --bar-edge: #1f35d9;
  --surface: #ffffff;
  --surface-2: #eceffd;
  --field: #ffffff;
  --field-edge: #1f35d9;
  --edge: #1f35d9;
  --rule: #d2d8f8;
  --text: #1f35d9;
  --muted: #4f5edd;
  --accent: #1f35d9;
  --accent-hi: #3a4fe6;
  --accent-ink: #ffffff;
  --accent-edge: #1f35d9;
  --accent-text: #1f35d9;
  --link: #1f35d9;
  --ok: #1f35d9;
  --ok-bg: #eceffd;
  --bad: #d1242f;
  --bad-bg: #fdecee;
  --warn: #1f35d9;
  --warn-bg: #eceffd;
  --ghost-bg: #ffffff;
  --ghost-hover: #eceffd;
  --focus: #1f35d9;
  --backdrop: rgba(255, 255, 255, 0.84);
  --paper: #ffffff;
  --float: #ffffff;

  --bw: 1px;
  --bw-s: 1px;
  --rw: 1px;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 999px;
  --radius-btn: 999px;
  --shadow: none;
  --shadow-btn: 0 0 0 0 transparent;
  --press: 1px;
  --chip-pad: 0;
  --chip-edge: transparent;
  --meter-h: 2px;

  --font: "Jost", "Century Gothic", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Jost", "Century Gothic", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-w: 500;
  --ds: 1.06;
  --caps: none;
  --track: 0;
  --btn-size: 15.5px;
  --btn-w: 500;
  --brand-size: 22px;
  --brand-track: 0;
  --brand-w: 500;
  --h1-size: clamp(28px, 4.8vw, 40px);
  --h1-track: -0.01em;

  --brand-a: #1f35d9;
  --brand-b: #1f35d9;
  --brand-c: #ffffff;

  --cv-ground: #ffffff;
  --cv-free: #ffffff;
  --cv-grid: transparent;
  --cv-grid-2: rgba(31, 53, 217, 0.1);
  --cv-grid-px: rgba(31, 53, 217, 0.11);
  --cv-edge: #1f35d9;
  --cv-edge-w: 1;
  --cv-shadow: rgba(0, 0, 0, 0);
  --cv-shadow-x: 0;
  --cv-shadow-y: 0;
  --cv-mark: rgba(31, 53, 217, 0.32);
  --cv-sel: #1f35d9;
  --cv-sel-fill: rgba(31, 53, 217, 0.15);
  --cv-sel-outer: #ffffff;
  --cv-bad: #d1242f;
  --cv-bad-fill: rgba(209, 36, 47, 0.25);
  --cv-handle: #ffffff;
  --cv-handle-edge: #1f35d9;
  --cv-tag: #1f35d9;
  --cv-tag-ink: #ffffff;
  --cv-tag-edge: #1f35d9;
  --cv-tag-r: 12;
  --cv-hover: #1f35d9;
  --cv-hover-outer: #ffffff;
  --cv-focus: #1f35d9;
  --cv-hatch-bg: #ffffff;
  --cv-hatch: rgba(31, 53, 217, 0.6);
  --cv-guide: rgba(31, 53, 217, 0.45);
  --cv-ruler: #ffffff;
  --cv-ruler-ink: #4f5edd;
  --cv-ruler-line: #9ba5ef;
}

/* ---------- «suizo»: blanco, negro y un rojo; títulos grandes en mayúsculas ---------- */

:root[data-style="suizo"] {
  color-scheme: light;

  --bg: #ffffff;
  --bar: #ffffff;
  --bar-edge: #0a0a0a;
  --surface: #ffffff;
  --surface-2: #efefef;
  --field: #ffffff;
  --field-edge: #0a0a0a;
  --edge: #0a0a0a;
  --rule: #d9d9d9;
  --text: #0a0a0a;
  --muted: #595959;
  --accent: #e30613;
  --accent-hi: #f2323d;
  --accent-ink: #ffffff;
  --accent-edge: #e30613;
  --accent-text: #d00511;
  --link: #0a0a0a;
  --ok: #0a0a0a;
  --ok-bg: #efefef;
  --bad: #d00511;
  --bad-bg: #fdecec;
  --warn: #595959;
  --warn-bg: #f4f4f4;
  --ghost-bg: #ffffff;
  --ghost-hover: #efefef;
  --focus: #0a0a0a;
  --backdrop: rgba(255, 255, 255, 0.86);
  --paper: #ffffff;
  --float: #ffffff;

  --bw: 2px;
  --bw-s: 1px;
  --rw: 1px;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 0px;
  --radius-btn: 0px;
  --shadow: none;
  --shadow-btn: 0 0 0 0 transparent;
  --press: 1px;
  --chip-pad: 0;
  --chip-edge: transparent;
  --meter-h: 3px;

  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --display-w: 700;
  --ds: 1.12;
  --caps: uppercase;
  --track: 0.03em;
  --btn-size: 16.5px;
  --btn-w: 700;
  --brand-size: 25px;
  --brand-track: 0.02em;
  --brand-w: 700;
  --h1-size: clamp(34px, 6vw, 52px);
  --h1-track: 0.005em;

  --brand-a: #e30613;
  --brand-b: #0a0a0a;
  --brand-c: #ffffff;

  --cv-ground: #ffffff;
  --cv-free: #ffffff;
  --cv-grid: transparent;
  --cv-grid-2: rgba(0, 0, 0, 0.08);
  --cv-grid-px: rgba(0, 0, 0, 0.09);
  --cv-edge: #0a0a0a;
  --cv-edge-w: 2;
  --cv-shadow: rgba(0, 0, 0, 0);
  --cv-shadow-x: 0;
  --cv-shadow-y: 0;
  --cv-mark: rgba(0, 0, 0, 0.22);
  --cv-sel: #0a0a0a;
  --cv-sel-fill: rgba(0, 0, 0, 0.14);
  --cv-sel-outer: #ffffff;
  --cv-bad: #e30613;
  --cv-bad-fill: rgba(227, 6, 19, 0.28);
  --cv-handle: #ffffff;
  --cv-handle-edge: #0a0a0a;
  --cv-tag: #0a0a0a;
  --cv-tag-ink: #ffffff;
  --cv-tag-edge: #0a0a0a;
  --cv-tag-r: 0;
  --cv-hover: #e30613;
  --cv-hover-outer: #ffffff;
  --cv-focus: #e30613;
  --cv-hatch-bg: #ffffff;
  --cv-hatch: rgba(0, 0, 0, 0.6);
  --cv-guide: rgba(0, 0, 0, 0.45);
  --cv-ruler: #ffffff;
  --cv-ruler-ink: #595959;
  --cv-ruler-line: #0a0a0a;
}

/* ---------- «niebla»: gris muy claro, sin líneas divisorias, todo redondeado y suave ---------- */

:root[data-style="niebla"] {
  color-scheme: light;

  --bg: #eceef2;
  --bar: #eceef2;
  --bar-edge: transparent;
  --surface: #f8f9fb;
  --surface-2: #e3e6eb;
  --field: #ffffff;
  --field-edge: #828996;
  --edge: #dadee4;
  --rule: #e0e3e8;
  --text: #1d2430;
  --muted: #5a6372;
  --accent: #1d2430;
  --accent-hi: #364155;
  --accent-ink: #ffffff;
  --accent-edge: #1d2430;
  --accent-text: #1d2430;
  --link: #1d2430;
  --ok: #1f7a4d;
  --ok-bg: #e2f1e8;
  --bad: #c0362c;
  --bad-bg: #f9e7e5;
  --warn: #5a6372;
  --warn-bg: #e3e6eb;
  --ghost-bg: #ffffff;
  --ghost-hover: #f4f5f8;
  --focus: #1d2430;
  --backdrop: rgba(29, 36, 48, 0.32);
  --paper: #ffffff;
  --float: #ffffff;

  --bw: 1px;
  --bw-s: 1px;
  --rw: 1px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --radius-btn: 999px;
  --shadow: 0 10px 30px rgba(29, 36, 48, 0.1), 0 1px 2px rgba(29, 36, 48, 0.06);
  --shadow-btn: 0 0 0 0 transparent;
  --press: 1px;
  --chip-pad: 0;
  --chip-edge: transparent;
  --meter-h: 3px;

  --font: "Manrope", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Manrope", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-w: 600;
  --ds: 0.96;
  --caps: none;
  --track: -0.015em;
  --btn-size: 14.5px;
  --btn-w: 600;
  --brand-size: 19px;
  --brand-track: -0.03em;
  --brand-w: 700;
  --h1-size: clamp(26px, 4.4vw, 36px);
  --h1-track: -0.035em;

  --brand-a: #1d2430;
  --brand-b: #1d2430;
  --brand-c: #eceef2;

  --cv-ground: #eceef2;
  --cv-free: #ffffff;
  --cv-grid: transparent;
  --cv-grid-2: rgba(29, 36, 48, 0.05);
  --cv-grid-px: rgba(29, 36, 48, 0.07);
  --cv-edge: #dadee4;
  --cv-edge-w: 0;
  --cv-shadow: rgba(0, 0, 0, 0);
  --cv-shadow-x: 0;
  --cv-shadow-y: 0;
  --cv-mark: rgba(29, 36, 48, 0.2);
  --cv-sel: #1d2430;
  --cv-sel-fill: rgba(29, 36, 48, 0.14);
  --cv-sel-outer: #ffffff;
  --cv-bad: #d0453a;
  --cv-bad-fill: rgba(208, 69, 58, 0.26);
  --cv-handle: #ffffff;
  --cv-handle-edge: #1d2430;
  --cv-tag: #1d2430;
  --cv-tag-ink: #ffffff;
  --cv-tag-edge: #1d2430;
  --cv-tag-r: 12;
  --cv-hover: #1d2430;
  --cv-hover-outer: #ffffff;
  --cv-focus: #1d2430;
  --cv-hatch-bg: rgba(29, 36, 48, 0.05);
  --cv-hatch: rgba(29, 36, 48, 0.45);
  --cv-guide: rgba(29, 36, 48, 0.4);
  --cv-ruler: #eceef2;
  --cv-ruler-ink: #5a6372;
  --cv-ruler-line: #c7ccd4;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16.5px/1.5 var(--font);
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, label, summary { touch-action: manipulation; } /* sin zoom de página al tocar dos veces seguidas */
a { color: var(--link); text-underline-offset: 2px; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Marca ---------- */

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; flex: none; }
.brand-mark { flex: none; display: block; }
.bm-a { fill: var(--brand-a); }
.bm-b { fill: var(--brand-b); }
.bm-c { fill: var(--brand-c); }
.brand-name {
  font: var(--brand-w, 700) var(--brand-size)/1 var(--display);
  letter-spacing: var(--brand-track);
  text-transform: var(--caps);
  white-space: nowrap;
}
.brand-name b { font-weight: inherit; }
.brand-name i { font-style: normal; color: var(--muted); }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: var(--bw) solid var(--edge);
  border-radius: var(--radius-btn);
  background: var(--ghost-bg);
  color: var(--text);
  font: var(--btn-w) var(--btn-size)/1 var(--display);
  letter-spacing: var(--track);
  text-transform: var(--caps);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background-color 0.12s, transform 0.06s, box-shadow 0.06s;
}
.btn:hover { background: var(--ghost-hover); }
.btn:active { transform: translate(var(--press), var(--press)); box-shadow: 0 0 0 0 transparent; }
.btn.primary { background: var(--accent); border-color: var(--accent-edge); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hi); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); }
.btn.small { min-height: 32px; padding: 0 11px; font-size: calc(var(--btn-size) - 1.5px); }
.btn.big { width: 100%; min-height: 50px; font-size: calc(var(--btn-size) + 3px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.icon-btn:hover { background: var(--ghost-hover); color: var(--text); }

.link { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-size: 14.5px; }

/* ---------- Selector de idioma ---------- */

/* En las barras de arriba: un botón pequeño con el código del otro idioma («EN») */
.bar-lang, .page-lang { display: inline-flex; gap: 6px; flex: none; }
.bar-lang .btn, .page-lang .btn { gap: 6px; padding: 0 11px; }
.bar-lang svg, .page-lang svg { flex: none; }
/* En los pies de página: el nombre del idioma («English») con un globo */
.foot-lang { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.foot-lang a { display: inline-flex; align-items: center; gap: 6px; }
.foot-lang svg { flex: none; }

/* ---------- Formularios ---------- */

.field { display: grid; gap: 6px; font-size: 14.5px; font-weight: 600; }
.field small, .hint { color: var(--muted); font-size: 13.5px; font-weight: 400; line-height: 1.4; }
.hint { margin: 0; }
.field .opt { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.field input[type="text"], .field input[type="url"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field select, .field textarea {
  width: 100%; min-height: 44px;
  padding: 9px 12px;
  border: var(--bw-s) solid var(--field-edge);
  border-radius: var(--radius-sm);
  background: var(--field);
  font-size: 16px; font-weight: 400;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.75; }
.field input[type="color"] { width: 68px; height: 42px; padding: 3px; border: var(--bw-s) solid var(--field-edge); border-radius: var(--radius-sm); background: var(--field); cursor: pointer; }
.field input[type="file"] { font-size: 14.5px; font-weight: 400; }
.field.inline { display: flex; align-items: center; gap: 10px; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.check input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--accent); }

.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: var(--bw-s) solid var(--field-edge);
  border-radius: var(--radius-sm);
  background: var(--field);
  overflow: hidden;
}
.seg label { position: relative; cursor: pointer; }
.seg label + label { border-left: var(--rw) solid var(--field-edge); }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 8px 10px; font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.seg input:checked + span { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -3px; }
.seg input:checked:focus-visible + span { outline-color: var(--accent-ink); }
.seg.small span { padding: 6px 6px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Arcade: los botones se desplazan unos píxeles al pasar por encima y al pulsarlos. Esta capa invisible amplía
   la zona pulsable para que el clic no se pierda cuando el cursor está justo en el borde. */
:root[data-style="arcade"] .btn { position: relative; }
:root[data-style="arcade"] .btn::after { content: ""; position: absolute; inset: -6px; }