/* GENERADO — no editar a mano; editar tokens\ y ejecutar node scripts\construir.mjs */
/* Clotitec Design OS · variables --ct-* y utilidades de marca.
   Fuente de cada valor: dist\tokens.d.md. Decisiones del dueño aplicadas (provisionales): marcaVigente = solo-verde · tinta = #0A0A0A · tintaSuave = #404040 · amarilloSobreVerde = rotulo-y-pastilla · relieveLogotipo = solo-sobre-verde-o-foto · golpesDeAmarillo = uno-por-bloque · videoLocucion = sintetica · clientesNombrables = bareyo, llanes, golf360, santander-poligonos, vias-verdes-murcia · videoDifusion = largo-privado-y-corte-publico · amarilloComoTexto = solo-sobre-oscuro. */

:root {
  /* ── primitivos · color ── */
  --ct-verde-50: #F1F8F6;
  --ct-verde-100: #E2F2EE;
  --ct-verde-200: #A9D5CB;
  --ct-verde-300: #57AC9B;
  --ct-verde-400: #2F9B85;
  --ct-verde-500: #0E8A72;
  --ct-verde-600: #0A6355;
  --ct-verde-700: #085042;
  --ct-verde-800: #063D33;
  --ct-verde-900: #042A23;
  --ct-verde-profundo-noche: #07231F;
  --ct-verde-profundo-medio: #0A5F51;
  --ct-verde-profundo-claro: #12977E;
  --ct-verde-profundo-halo: #1FB394;
  --ct-verde-profundo-sombra: #04211C;
  --ct-arena-50: #FCFAF6;
  --ct-arena-100: #F7F3EC;
  --ct-arena-200: #F2ECE1;
  --ct-arena-300: #EDE5D6;
  --ct-amarillo-100: #FCF8DC;
  --ct-amarillo-200: #F9EFA9;
  --ct-amarillo-300: #F3E25A;
  --ct-amarillo-400: #FFCC00;
  --ct-amarillo-500: #D9A800;
  --ct-amarillo-600: #8A6D00;
  --ct-tinta-1: #1A1A1A;
  --ct-tinta-2: #5F5F5F;
  --ct-tinta-3: #A3A3A3;
  --ct-tinta-4: #DDDDDD;
  --ct-tinta-intensa: #0A0A0A;
  --ct-tinta-intensa-2: #404040;
  --ct-gris-blanco: #FFFFFF;
  --ct-gris-apoyo-1: #211C1B;
  --ct-gris-apoyo-2: #675754;
  --ct-gris-apoyo-3: #E1DBDA;
  --ct-gris-web-100: #F4F1F0;
  --ct-gris-web-600: #262626;
  --ct-gris-web-800: #121010;
  --ct-panel-critico: #B42318; /* provisional */
  --ct-panel-critico-fondo: #FBE4E1; /* provisional */
  --ct-panel-aviso-fondo: #F6EFD0; /* provisional */
  --ct-panel-ok-fondo: #E3F1EC; /* provisional */
  --ct-panel-neutro-fondo: #DDD6C8; /* provisional */
  --ct-serie-1: #0E8A72; /* provisional */
  --ct-serie-2: #BF7E15; /* provisional */
  --ct-serie-3: #9B2D3A; /* provisional */
  --ct-serie-4: #3F7FBF; /* provisional */
  --ct-serie-5: #C2571A; /* provisional */
  --ct-serie-6: #5A4FA0; /* provisional */
  --ct-serie-7: #8A6D00; /* provisional */
  --ct-video-marco: #141819;

  /* ── primitivos · tipografia ── */
  --ct-pila-titular: 'Baloo 2','DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ct-pila-texto: 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ct-peso-titular: 700;
  --ct-peso-titular-suave: 600;
  --ct-peso-texto: 400;
  --ct-peso-texto-medio: 500;
  --ct-peso-texto-fuerte: 700;
  --ct-tipo-minimo-pantalla: 16px;
  --ct-tipo-minimo-impresion: 12pt;
  --ct-tipo-minimo-diapositiva: 24px;
  --ct-tipo-minimo-pieza: 28px;
  --ct-tipo-titulo-1-tamano: 48px;
  --ct-tipo-titulo-1-peso: 700;
  --ct-tipo-titulo-1-tracking: -0.02em;
  --ct-tipo-titulo-2-tamano: 32px;
  --ct-tipo-titulo-2-peso: 700;
  --ct-tipo-titulo-2-tracking: -0.01em;
  --ct-tipo-titulo-3-tamano: 22px;
  --ct-tipo-titulo-3-peso: 600;
  --ct-tipo-cuerpo-tamano: 16px;
  --ct-tipo-cuerpo-peso: 400;
  --ct-tipo-cuerpo-interlinea: 1.6;
  --ct-tipo-etiqueta-tamano: 13px;
  --ct-tipo-etiqueta-peso: 700;
  --ct-tipo-etiqueta-tracking: 0.12em;
  --ct-tipo-web-h1-tamano: clamp(2.25rem, 2.5vw + 1rem, 3.5rem);
  --ct-tipo-web-h1-tracking: -0.02em;
  --ct-tipo-web-h1-interlinea: 1.08;
  --ct-tipo-web-h2-tamano: clamp(1.875rem, 2.5vw + 1rem, 3rem);
  --ct-tipo-web-h2-tracking: -0.01em;
  --ct-tipo-web-h3-tamano: clamp(1.5rem, 1.25vw + 1rem, 2rem);
  --ct-tipo-web-h3-peso: 600;
  --ct-tipo-web-h3-tracking: 0;
  --ct-tipo-web-h4-tamano: 1.25rem;
  --ct-tipo-web-h4-peso: 600;
  --ct-tipo-web-h4-tracking: 0;
  --ct-tipo-web-titular-interlinea: 1.12;
  --ct-tipo-web-titular-tracking: -0.01em;
  --ct-tipo-web-rotulo-tamano: .75rem;
  --ct-tipo-web-rotulo-peso: 700;
  --ct-tipo-web-rotulo-tracking: .14em;
  --ct-tipo-web-insignia-tamano: .75rem;
  --ct-tipo-web-insignia-peso: 600;
  --ct-tipo-web-insignia-tracking: .04em;
  --ct-tipo-web-insignia-relleno: .25rem .625rem;
  --ct-tipo-interfaz-titulo: 34px;
  --ct-tipo-interfaz-cifra-xl: 30px;
  --ct-tipo-interfaz-subtitulo: 22px;
  --ct-tipo-interfaz-cifra: 22px;
  --ct-tipo-interfaz-hoja: 19px;
  --ct-tipo-interfaz-cifra-s: 18px;
  --ct-tipo-interfaz-linea: 17px;
  --ct-tipo-interfaz-cuerpo: 15px;
  --ct-tipo-interfaz-boton: 14.5px;
  --ct-tipo-interfaz-chip: 13px;
  --ct-tipo-interfaz-nota: 12px;
  --ct-tipo-interfaz-etiqueta: 10.5px;
  --ct-tipo-interfaz-legal: 10.5px;
  --ct-tipo-interfaz-tracking-etiqueta: .08em;

  /* ── primitivos · espaciado ── */
  --ct-reticula: 8px;
  --ct-espacio-1: 8px;
  --ct-espacio-2: 16px;
  --ct-espacio-7: 56px;
  --ct-espacio-8: 64px;
  --ct-espacio-10: 80px;
  --ct-espacio-11: 88px;
  --ct-espacio-12: 96px;
  --ct-espacio-interfaz-1: 4px;
  --ct-espacio-interfaz-2: 6px;
  --ct-espacio-interfaz-3: 8px;
  --ct-espacio-interfaz-4: 12px;
  --ct-espacio-interfaz-5: 16px;
  --ct-espacio-interfaz-6: 22px;
  --ct-toque-minimo: 44px;
  --ct-toque-chip: 36px;
  --ct-toque-fila: 48px;
  --ct-toque-accion: 62px;
  --ct-toque-quiosco: 64px;
  --ct-toque-quiosco-fila: 72px;
  --ct-toque-quiosco-accion: 84px;
  --ct-escala-quiosco: 1.3;

  /* ── primitivos · lienzo ── */
  --ct-lienzo-16x9-ancho: 1920px;
  --ct-lienzo-16x9-alto: 1080px;
  --ct-lienzo-16x9-margen: 96px;
  --ct-lienzo-16x9-factor: 1.78;
  --ct-lienzo-9x16-ancho: 1080px;
  --ct-lienzo-9x16-alto: 1920px;
  --ct-lienzo-9x16-margen: 88px;
  --ct-lienzo-9x16-factor: 1;
  --ct-lienzo-9x16-segura-arriba: 240px; /* provisional */
  --ct-lienzo-9x16-segura-abajo: 520px; /* provisional */
  --ct-lienzo-9x16-segura-derecha: 160px; /* provisional */

  /* ── primitivos · radio ── */
  --ct-radio-pildora: 99px;
  --ct-radio-hoja: 22px;
  --ct-radio-tarjeta: 18px;
  --ct-radio-boton: 14px;
  --ct-radio-fila: 12px;

  /* ── primitivos · sombra ── */
  --ct-sombra-suave: 0 2px 8px rgb(26 26 26 / 0.08);
  --ct-sombra-media: 0 8px 24px rgb(26 26 26 / 0.14);
  --ct-sombra-elevada: 0 16px 48px rgb(26 26 26 / 0.22);
  --ct-sombra-relieve-texto: 0 2px 12px rgb(4 33 28 / 0.42), 0 1px 2px rgb(4 33 28 / 0.26);
  --ct-sombra-relieve-texto-fuerte: 0 4px 20px rgb(4 33 28 / 0.55), 0 2px 3px rgb(4 33 28 / 0.34);
  --ct-sombra-relieve-logo: drop-shadow(0 6px 14px rgb(4 33 28 / 0.55));
  --ct-sombra-relieve-logo-pieza: drop-shadow(0 6px 10px rgb(4 33 28 / .55)) drop-shadow(0 18px 34px rgb(4 33 28 / .45));
  --ct-sombra-relieve-pastilla: 0 6px 16px rgb(4 33 28 / .35);
  --ct-sombra-relieve-tarjeta: 0 18px 44px -14px rgb(4 33 28 / 0.34); /* provisional */

  /* ── primitivos · z ── */
  --ct-z-barra: 6;
  --ct-z-modal: 9;
  --ct-z-panel: 11;
  --ct-z-toast: 12;

  /* ── primitivos · opacidad ── */
  --ct-opacidad-deshabilitado: 0.5;
  --ct-opacidad-panel: .94;
  --ct-opacidad-velo: .42;
  --ct-opacidad-halo: 0.30;
  --ct-opacidad-bandas: 0.045;

  /* ── primitivos · medida ── */
  --ct-medida-contenedor: 1280px;
  --ct-medida-hoja: 520px;

  /* ── primitivos · foco ── */
  --ct-foco-grosor: 3px;
  --ct-foco-separacion: 2px;

  /* ── semanticos · color ── */
  --ct-fondo: var(--ct-gris-blanco);
  --ct-fondo-suave: var(--ct-arena-50);
  --ct-fondo-alterno: var(--ct-arena-100);
  --ct-fondo-arena: var(--ct-arena-300);
  --ct-superficie: var(--ct-gris-blanco);
  --ct-texto: #0A0A0A; /* decisión: tinta */
  --ct-texto-suave: #404040; /* decisión: tintaSuave */
  --ct-texto-tenue: var(--ct-tinta-3);
  --ct-primario: var(--ct-verde-500);
  --ct-primario-relleno: var(--ct-verde-600);
  --ct-primario-relleno-hover: var(--ct-verde-700);
  --ct-primario-texto: var(--ct-verde-600);
  --ct-primario-suave: var(--ct-verde-100);
  --ct-sobre-primario: var(--ct-gris-blanco);
  --ct-acento: var(--ct-amarillo-400);
  --ct-acento-suave: var(--ct-amarillo-300);
  --ct-acento-texto: var(--ct-amarillo-600); /* decisión: amarilloComoTexto */
  --ct-sobre-acento: #0A0A0A; /* decisión: tinta */
  --ct-borde: var(--ct-gris-apoyo-3);
  --ct-linea: var(--ct-tinta-4);
  --ct-foco: var(--ct-verde-500);
  --ct-peligro: var(--ct-panel-critico); /* provisional */
  --ct-estado-ok-texto: var(--ct-verde-600); /* provisional */
  --ct-estado-ok-fondo: var(--ct-panel-ok-fondo); /* provisional */
  --ct-estado-aviso-texto: var(--ct-amarillo-600); /* provisional */
  --ct-estado-aviso-fondo: var(--ct-panel-aviso-fondo); /* provisional */
  --ct-estado-critico-texto: var(--ct-panel-critico); /* provisional */
  --ct-estado-critico-fondo: var(--ct-panel-critico-fondo); /* provisional */
  --ct-estado-neutro-texto: #0A0A0A; /* decisión: tinta · provisional */
  --ct-estado-neutro-fondo: var(--ct-panel-neutro-fondo); /* provisional */
  --ct-datos-1: var(--ct-serie-1); /* provisional */
  --ct-datos-2: var(--ct-serie-2); /* provisional */
  --ct-datos-3: var(--ct-serie-3); /* provisional */
  --ct-datos-4: var(--ct-serie-4); /* provisional */
  --ct-datos-5: var(--ct-serie-5); /* provisional */
  --ct-datos-6: var(--ct-serie-6); /* provisional */
  --ct-datos-7: var(--ct-serie-7); /* provisional */

  /* ── semanticos · superficie-verde ── */
  --ct-superficie-verde-base: var(--ct-verde-profundo-medio);
  --ct-superficie-verde-halo-posicion: 50% 34%;
  --ct-superficie-verde-halo: radial-gradient(80% 68% at 50% 34%, rgb(31 179 148 / 0.30) 0%, transparent 68%);
  --ct-superficie-verde-lineal: linear-gradient(180deg, #07231F 0%, #0A5F51 46%, #12977E 100%);
  --ct-superficie-verde-bandas: repeating-linear-gradient(118deg, rgb(255 255 255 / 0.045) 0 340px, transparent 340px 900px);
  --ct-superficie-verde-texto: var(--ct-arena-100);
  --ct-superficie-verde-titular: var(--ct-gris-blanco);
  --ct-superficie-verde-tarjeta-fondo: var(--ct-gris-blanco);
  --ct-superficie-verde-tarjeta-texto: #0A0A0A; /* decisión: tinta */

  /* ── semanticos · relieve ── */
  --ct-relieve-color: var(--ct-verde-profundo-sombra);
  --ct-relieve-texto: var(--ct-sombra-relieve-texto);
  --ct-relieve-texto-fuerte: var(--ct-sombra-relieve-texto-fuerte);
  --ct-relieve-logo: var(--ct-sombra-relieve-logo); /* decisión: relieveLogotipo */
  --ct-relieve-logo-pieza: var(--ct-sombra-relieve-logo-pieza); /* decisión: relieveLogotipo */
  --ct-relieve-pastilla: var(--ct-sombra-relieve-pastilla);
  --ct-relieve-tarjeta: var(--ct-sombra-relieve-tarjeta); /* provisional */

  /* ── semanticos · destacado ── */
  --ct-destacado-color: var(--ct-acento-suave);
  --ct-destacado-banda-desde: 20%;
  --ct-destacado-banda-hasta: 54%;
  --ct-destacado-relleno: .1em;

  /* ── semanticos · pastilla ── */
  --ct-pastilla-peso: 700;
  --ct-pastilla-tracking: .04em;
  --ct-pastilla-relleno: .25rem .625rem;
  --ct-pastilla-tamano: .75rem;
  --ct-pastilla-hueco: .375rem;
  --ct-pastilla-pieza-peso: 700;
  --ct-pastilla-pieza-tracking: .12em;
  --ct-pastilla-fondo-sobre-verde: var(--ct-acento); /* decisión: amarilloSobreVerde */
  --ct-pastilla-texto-sobre-verde: var(--ct-sobre-acento); /* decisión: amarilloSobreVerde, tinta */

  /* ── semanticos · rotulo ── */
  --ct-rotulo-tamano: .75rem;
  --ct-rotulo-peso: 700;
  --ct-rotulo-tracking: .14em;
  --ct-rotulo-hueco: .5rem;
  --ct-rotulo-guion-ancho: 1.5rem;
  --ct-rotulo-guion-alto: 2px;
  --ct-rotulo-color: var(--ct-verde-700);
  --ct-rotulo-guion: var(--ct-verde-500);
  --ct-rotulo-color-sobre-oscuro: var(--ct-amarillo-400); /* decisión: amarilloComoTexto */
  --ct-rotulo-color-sobre-verde: var(--ct-rotulo-color-sobre-oscuro); /* decisión: amarilloSobreVerde, amarilloComoTexto */

  /* ── semanticos · velo ── */
  --ct-velo-color: var(--ct-verde-profundo-noche);
  --ct-velo-fondo: rgb(7 35 31 / .42);

  /* ── semanticos · tipografia ── */
  --ct-fuente-titular: var(--ct-pila-titular);
  --ct-fuente-texto: var(--ct-pila-texto);

  /* ── motion ── */
  --ct-curva-entrada: cubic-bezier(.2,.8,.2,1);
  --ct-curva-mover: cubic-bezier(0.77, 0, 0.175, 1);
  --ct-curva-estado: ease;
  --ct-curva-lineal: linear;
  --ct-curva-alias-salida-web: var(--ct-curva-entrada);
  --ct-curva-alias-avisos-atlas: var(--ct-curva-entrada);
  --ct-curva-alias-interfaz-animate: var(--ct-curva-entrada);
  --ct-dur-pulsacion: 130ms;
  --ct-dur-rapida: 150ms;
  --ct-dur-base: 200ms;
  --ct-dur-corta: 240ms;
  --ct-dur-hoja: 260ms;
  --ct-dur-aviso: 300ms;
  --ct-dur-giro: 640ms;
  --ct-dur-permanencia-aviso: 2200ms;
  --ct-dur-escalon: 45ms;
  --ct-dur-video-transicion: 400ms;
  --ct-dur-video-conteo: 500ms;
  --ct-dur-video-escena-maxima: 6000ms;
  --ct-dur-video-objeto-3d-maximo: 3000ms;
  --ct-video-fps: 30;
  --ct-dist-s: 4px;
  --ct-dist-m: 16px;
  --ct-dist-l: 28px;
  --ct-pulsacion-escala: 0.97;

  /* ── mapa ── */
  --ct-mapa-limite-linea-color: #00d4ff;
  --ct-mapa-limite-linea-ancho: 2.5;
  --ct-mapa-limite-linea-opacidad: 0.9;
  --ct-mapa-limite-resplandor-color: #00d4ff;
  --ct-mapa-limite-resplandor-ancho: 9;
  --ct-mapa-limite-resplandor-desenfoque: 6;
  --ct-mapa-limite-resplandor-opacidad: 0.35;
  --ct-mapa-limite-mascara-color: #0a2a2c;
  --ct-mapa-limite-mascara-opacidad: 0.16;
  --ct-mapa-terreno-exageracion: 1.3;
  --ct-mapa-terreno-sombreado: 0.35;
  --ct-mapa-terreno-dem-zoom-maximo: 13;
  --ct-mapa-cielo-color: #9bd1e8;
  --ct-mapa-cielo-horizonte: #eef6f9;
  --ct-mapa-cielo-niebla: #ffffff;
  --ct-mapa-cielo-mezcla: 0.6;
  --ct-mapa-edificios-color: #cfc4b4;
  --ct-mapa-edificios-opacidad: 0.78;
  --ct-mapa-edificios-zoom-minimo: 13.5;
  --ct-mapa-inclinacion-vuelo: 61;
  --ct-mapa-inclinacion-reposo: 50;
  --ct-mapa-inclinacion-orbita: 58;
  --ct-mapa-vuelo-zoom: 14.6;
  --ct-mapa-vuelo-zoom-rapido: 13.6;
  --ct-mapa-vuelo-zoom-muy-rapido: 12.8;
  --ct-mapa-vuelo-giro-maximo: 18;
  --ct-mapa-vuelo-orbita-giro: 3.5;
  --ct-mapa-vuelo-orbita-tope-fotograma: 0.08;
  --ct-mapa-camara-despegue: 2800;
  --ct-mapa-camara-aterrizaje: 2500;
  --ct-mapa-camara-reanudacion-minima: 1200;
  --ct-mapa-camara-reanudacion-maxima: 4500;
  --ct-mapa-camara-reanudacion-por-km: 1200;
  --ct-mapa-camara-margen-encuadre: 60;
  --ct-mapa-camara-revelado: 3200;
  --ct-mapa-camara-parada-automatica: 8000;
  --ct-mapa-camara-salto: 800; /* provisional */
  --ct-mapa-vidrio-fondo: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(237,238,239,0.88));
  --ct-mapa-vidrio-desenfoque: blur(24px) saturate(180%);
  --ct-mapa-vidrio-borde: 1px solid rgba(0,0,0,0.05);
  --ct-mapa-vidrio-sombra: 0 2px 6px rgba(0,0,0,0.12);
  --ct-mapa-vidrio-radio: 22px;
}

/* ════════ Clientes: un bloque por cliente. Cambian roles, nunca primitivos ════════ */
/* Bareyo (guía oficial, tótem y audioguías) */
[data-ct-cliente="bareyo"] {
  --ct-primario: #2D6A4F;
  --ct-primario-texto: #2D6A4F;
  --ct-primario-relleno: #1A4D2E;
  --ct-primario-relleno-hover: #0F2E1B;
  --ct-primario-suave: #ECF2E8;
  --ct-fondo-suave: #ECF2E8;
  --ct-superficie: #ffffff;
  --ct-texto: #0f1f17;
  --ct-texto-suave: #5b6a64;
  --ct-acento: #A4542A;
  --ct-sobre-acento: #FFFFFF;
  --ct-foco: #A4542A;
  --ct-peligro: #b91c1c;
  --ct-linea: #E3EBDE;
  --ct-borde: #D3DECA;
  --ct-fuente-titular: 'Jost','DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ct-fuente-texto: 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Clotitec (tema de la casa) — tema de la casa: devuelve a su valor de :root los roles que otro cliente haya cambiado. */
[data-ct-cliente="clotitec"] {
  --ct-fondo-suave: var(--ct-arena-50);
  --ct-superficie: var(--ct-gris-blanco);
  --ct-texto: #0A0A0A;
  --ct-texto-suave: #404040;
  --ct-primario: var(--ct-verde-500);
  --ct-primario-relleno: var(--ct-verde-600);
  --ct-primario-relleno-hover: var(--ct-verde-700);
  --ct-primario-texto: var(--ct-verde-600);
  --ct-primario-suave: var(--ct-verde-100);
  --ct-acento: var(--ct-amarillo-400);
  --ct-sobre-acento: #0A0A0A;
  --ct-borde: var(--ct-gris-apoyo-3);
  --ct-linea: var(--ct-tinta-4);
  --ct-foco: var(--ct-verde-500);
  --ct-peligro: var(--ct-panel-critico);
  --ct-fuente-titular: var(--ct-pila-titular);
  --ct-fuente-texto: var(--ct-pila-texto);
}

/* Golf360 (Campo Municipal de Llanes) */
[data-ct-cliente="golf360"] {
  --ct-primario: #27813F;
  --ct-primario-texto: #27813F;
  --ct-primario-relleno: #186F38;
  --ct-primario-relleno-hover: #085E2B;
  --ct-primario-suave: #EEF4EC;
  --ct-fondo-suave: #D0E8CF;
  --ct-superficie: #FFFFFF;
  --ct-texto: #186F38;
  --ct-texto-suave: #55585A;
  --ct-acento: #D43A26;
  --ct-sobre-acento: #FFFFFF;
  --ct-foco: #C32B29;
  --ct-peligro: #C32B29;
  --ct-linea: #E3EEE1;
  --ct-borde: #DCEBD8;
  --ct-fuente-titular: 'Poppins','Urbanist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ct-fuente-texto: 'Poppins','Urbanist',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Llanes (oficina de turismo interactiva) */
[data-ct-cliente="llanes"] {
  --ct-primario: #0a7560;
  --ct-primario-texto: #0a7560;
  --ct-primario-relleno: #0a6355;
  --ct-primario-relleno-hover: #042a23;
  --ct-primario-suave: #e2f2ee;
  --ct-fondo-suave: #fcfaf6;
  --ct-superficie: #ffffff;
  --ct-texto: #14231a;
  --ct-texto-suave: #5b6b60;
  --ct-acento: #E2211C;
  --ct-sobre-acento: #FFFFFF;
  --ct-foco: #E2211C;
  --ct-peligro: #dc2626;
  --ct-linea: #dcebe7;
  --ct-borde: #cfe3dd;
  --ct-fuente-titular: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ct-fuente-texto: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* Santander — directorio de áreas empresariales e industriales
   INCOMPLETO: su paleta no cubre todos los roles; los que no aparecen aquí siguen siendo los de Clotitec. Ver tokens\temas\PENDIENTES.md. */
[data-ct-cliente="santander-poligonos"] {
  --ct-primario-relleno: #00696c;
  --ct-primario-relleno-hover: #004f51;
  --ct-superficie: #ffffff;
  --ct-texto: #102828;
  --ct-texto-suave: #5b6b6b;
  --ct-foco: #00696c;
  --ct-linea: #dbe5e5;
  --ct-primario: #00696c; /* provisional */
  --ct-primario-texto: #00696c; /* provisional */
  --ct-primario-suave: #d3ebec; /* provisional */
}

/* Región de Murcia — Vías Verdes
   INCOMPLETO: su paleta no cubre todos los roles; los que no aparecen aquí siguen siendo los de Clotitec. Ver tokens\temas\PENDIENTES.md. */
[data-ct-cliente="vias-verdes-murcia"] {
  --ct-primario-relleno-hover: #1A4A18;
  --ct-fondo-suave: #F4F3EE;
  --ct-superficie: #FFFFFF;
  --ct-texto: #1C2418;
  --ct-texto-suave: #4F6661;
  --ct-primario: #4A8C3F; /* provisional */
  --ct-primario-texto: #1A4A18; /* provisional */
  --ct-primario-relleno: #1A4A18; /* provisional */
}

/* ════════ Tema oscuro (PROVISIONAL: son los valores del panel Dark Factory; la marca no define tema oscuro) ════════
   Va DESPUÉS de los clientes y con los selectores combinados, para que mande también cuando el mismo elemento lleva
   data-ct-cliente o cuando un cliente va dentro de un contenedor oscuro: si no, el cliente reafirmaba su texto oscuro
   sobre el fondo oscuro. Con tema oscuro, del cliente solo quedan los roles que este bloque no define (relleno, acento,
   tipografías): no existe un tema oscuro por cliente. Los roles que no cubre están en DESIGN.md §13. */
[data-ct-tema="oscuro"],
[data-ct-tema="oscuro"][data-ct-cliente],
[data-ct-tema="oscuro"] [data-ct-cliente] {
  --ct-fondo: #0D1512; /* asignación propia */
  --ct-fondo-suave: #0D1512; /* asignación propia */
  --ct-fondo-alterno: #0D1512;
  --ct-superficie: #15201C;
  --ct-texto: #EDEDED;
  --ct-texto-suave: #AEB8B3;
  --ct-linea: #2A3A34; /* asignación propia */
  --ct-borde: #2A3A34; /* asignación propia */
  --ct-primario: #3CC8A8;
  --ct-primario-texto: #5FD6BA;
  --ct-primario-suave: #173A32;
  --ct-foco: #3CC8A8; /* asignación propia */
  --ct-peligro: #FF8A7D;
  --ct-estado-ok-texto: #5FD6BA;
  --ct-estado-ok-fondo: #173A32;
  --ct-estado-aviso-texto: #E8C45A;
  --ct-estado-aviso-fondo: #3A3212;
  --ct-estado-critico-texto: #FF8A7D;
  --ct-estado-critico-fondo: #3F1A16;
  --ct-estado-neutro-texto: #EDEDED;
  --ct-estado-neutro-fondo: #2A3A34;
}

/* Derivadas de un rol: se recalculan en cada elemento que fija tema o cliente. */
[data-ct-tema],
[data-ct-cliente] {
  --ct-destacado-color: var(--ct-acento-suave);
  --ct-pastilla-fondo-sobre-verde: var(--ct-acento);
  --ct-pastilla-texto-sobre-verde: var(--ct-sobre-acento);
  --ct-rotulo-color-sobre-verde: var(--ct-rotulo-color-sobre-oscuro);
}

/* ════════ Utilidades de marca ════════ */
/* ── Superficie verde: degradado + halo (50% 34%) + bandas ── */
.ct-superficie-verde {
  position: relative;
  isolation: isolate;
  color: var(--ct-superficie-verde-texto);
  background-color: var(--ct-superficie-verde-base);
  background-image: var(--ct-superficie-verde-halo), var(--ct-superficie-verde-lineal);
}
.ct-superficie-verde::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--ct-superficie-verde-bandas);
}
.ct-superficie-verde :is(h1, h2, h3, h4, h5, h6) { color: var(--ct-superficie-verde-titular); }

/* ── Tarjeta clara sobre superficie de color (logos de terceros, dato o formulario) ── */
.ct-tarjeta-flotante {
  background: var(--ct-superficie-verde-tarjeta-fondo);
  color: var(--ct-superficie-verde-tarjeta-texto);
  border-radius: var(--ct-radio-tarjeta);
  box-shadow: var(--ct-relieve-tarjeta);
}

/* ── Relieve: solo titulares sobre superficie verde, sección oscura o foto. Nunca en cuerpo ni sobre blanco o arena ── */
.ct-relieve { text-shadow: var(--ct-relieve-texto); }
.ct-relieve-fuerte { text-shadow: var(--ct-relieve-texto-fuerte); }

/* ── Relieve del logotipo · decisión relieveLogotipo = "solo-sobre-verde-o-foto" ──
   El logotipo lleva relieve solo dentro de una superficie verde, de una foto o del tema oscuro (.ct-logo-relieve). En cabecera, pie y sobre claro va plano. Ojo: la identidad prohíbe «añadir efectos» al logotipo; esta excepción es la de clotitec-diseno, la web y el kit del 30-09 (cuestión C del dueño). */
.ct-superficie-verde .ct-logo-relieve,
.ct-sobre-foto .ct-logo-relieve,
[data-ct-tema="oscuro"] .ct-logo-relieve { filter: var(--ct-relieve-logo); }
.ct-superficie-verde .ct-logo-relieve--pieza,
.ct-sobre-foto .ct-logo-relieve--pieza,
[data-ct-tema="oscuro"] .ct-logo-relieve--pieza { filter: var(--ct-relieve-logo-pieza); }

/* ── Destacado: subrayado de rotulador, banda del 20% al 54% (no invade la línea siguiente) ── */
.ct-destacado {
  background: linear-gradient(
    to top,
    transparent var(--ct-destacado-banda-desde),
    var(--ct-destacado-color) var(--ct-destacado-banda-desde),
    var(--ct-destacado-color) var(--ct-destacado-banda-hasta),
    transparent var(--ct-destacado-banda-hasta)
  );
  padding-inline: var(--ct-destacado-relleno);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* En ninguna opción de amarilloSobreVerde el subrayado amarillo va sobre verde. (La web no tiene esta regla: css\DIFERENCIAS-WEB.md, «Alcance».) */
.ct-superficie-verde .ct-destacado { background: none; }

/* ── Pastilla (la .badge--destacado de la web): fondo de acento con su texto encima (13,09:1 en el tema de la casa). Nunca es un botón ni un enlace ── */
.ct-pastilla {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-pastilla-hueco);
  padding: var(--ct-pastilla-relleno);
  font-family: var(--ct-fuente-texto);
  font-size: var(--ct-pastilla-tamano);
  font-weight: var(--ct-pastilla-peso);
  letter-spacing: var(--ct-pastilla-tracking);
  text-transform: uppercase;
  border-radius: var(--ct-radio-pildora);
  background: var(--ct-acento);
  color: var(--ct-sobre-acento);
}
/* Variante de pieza gráfica y vídeo: el interletraje del .chip del kit del 30-09. */
.ct-pastilla--pieza {
  font-weight: var(--ct-pastilla-pieza-peso);
  letter-spacing: var(--ct-pastilla-pieza-tracking);
}

/* ── Rótulo de sección: sobre claro, verde oscuro con guion en primario ── */
.ct-rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-rotulo-hueco);
  font-family: var(--ct-fuente-texto);
  font-size: var(--ct-rotulo-tamano);
  font-weight: var(--ct-rotulo-peso);
  letter-spacing: var(--ct-rotulo-tracking);
  text-transform: uppercase;
  color: var(--ct-rotulo-color);
}
.ct-rotulo::before {
  content: "";
  width: var(--ct-rotulo-guion-ancho);
  height: var(--ct-rotulo-guion-alto);
  border-radius: var(--ct-rotulo-guion-alto);
  background: var(--ct-rotulo-guion);
}
/* Sobre el tema oscuro o sobre foto el rótulo toma --ct-rotulo-color-sobre-oscuro (decisión amarilloComoTexto = "solo-sobre-oscuro"):
   #FFCC00 da 12,26:1 sobre el fondo del tema oscuro (#0D1512). Es siempre el de Clotitec, no el acento del cliente. */
[data-ct-tema="oscuro"] .ct-rotulo,
.ct-sobre-foto .ct-rotulo { color: var(--ct-rotulo-color-sobre-oscuro); }
[data-ct-tema="oscuro"] .ct-rotulo::before,
.ct-sobre-foto .ct-rotulo::before { background: var(--ct-rotulo-color-sobre-oscuro); }

/* ── Sobre la superficie verde · decisiones amarilloSobreVerde = "rotulo-y-pastilla" · amarilloComoTexto = "solo-sobre-oscuro" ──
   Sobre la superficie verde se admiten en amarillo el rótulo (como texto) y la pastilla (fondo amarillo con texto tinta y su relieve). Nada más: ni subrayado, ni cifra, ni filete. Como texto, el amarillo solo pasa en la mitad alta de la superficie: 10,94:1 arriba, 5,02:1 en el centro y 2,41:1 abajo.
   El color del rótulo y el fondo y el texto de la pastilla salen de tokens que dependen de esas decisiones. */
.ct-superficie-verde .ct-rotulo { color: var(--ct-rotulo-color-sobre-verde); }
.ct-superficie-verde .ct-rotulo::before { background: var(--ct-rotulo-color-sobre-verde); }
.ct-superficie-verde .ct-pastilla {
  background: var(--ct-pastilla-fondo-sobre-verde);
  color: var(--ct-pastilla-texto-sobre-verde);
}
/* El relieve de la pastilla sobre verde o foto es el del .chip del kit del 30-09 y no depende de ninguna decisión. */
.ct-superficie-verde .ct-pastilla,
.ct-sobre-foto .ct-pastilla { box-shadow: var(--ct-relieve-pastilla); }

/* ════════ Recetas de movimiento (entradas del kit .g3-; las salidas son su espejo y son provisionales) ════════ */
@keyframes ct-entra-sube { from { opacity: 0; transform: translate(0, 16px); } to { opacity: 1; transform: translate(0, 0); } }
.ct-entra-sube { animation: ct-entra-sube var(--ct-dur-hoja) var(--ct-curva-entrada) both; }
@keyframes ct-entra-sube-hoja { from { opacity: 0; transform: translate(0, 28px); } to { opacity: 1; transform: translate(0, 0); } }
.ct-entra-sube-hoja { animation: ct-entra-sube-hoja var(--ct-dur-hoja) var(--ct-curva-entrada) both; }
@keyframes ct-entra-lado { from { opacity: 0; transform: translate(28px, 0); } to { opacity: 1; transform: translate(0, 0); } }
.ct-entra-lado { animation: ct-entra-lado var(--ct-dur-hoja) var(--ct-curva-entrada) both; }
@keyframes ct-entra-baja { from { opacity: 0; transform: translate(0, -4px); } to { opacity: 1; transform: translate(0, 0); } }
.ct-entra-baja { animation: ct-entra-baja var(--ct-dur-rapida) var(--ct-curva-entrada) both; }
@keyframes ct-sale-sube { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(0, 16px); } } /* provisional */
.ct-sale-sube { animation: ct-sale-sube var(--ct-dur-hoja) var(--ct-curva-entrada) both; }
@keyframes ct-sale-sube-hoja { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(0, 28px); } } /* provisional */
.ct-sale-sube-hoja { animation: ct-sale-sube-hoja var(--ct-dur-hoja) var(--ct-curva-entrada) both; }
@keyframes ct-sale-lado { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(28px, 0); } } /* provisional */
.ct-sale-lado { animation: ct-sale-lado var(--ct-dur-hoja) var(--ct-curva-entrada) both; }
@keyframes ct-sale-baja { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(0, -4px); } } /* provisional */
.ct-sale-baja { animation: ct-sale-baja var(--ct-dur-rapida) var(--ct-curva-entrada) both; }

@media (prefers-reduced-motion: reduce) {
  [class*="ct-entra-"], [class*="ct-sale-"] { animation: none !important; }
}