:root {

  --p-noche-0: #070d18;
  --p-noche-1: #0b1322;
  --p-noche-2: #101b2e;
  --p-noche-3: #152238;
  --p-noche-4: #1c2b44;
  --p-noche-5: #3d5478;

  --p-luz-1: #2ee6bf;
  --p-luz-2: #46e88a;
  --p-luz-viva: #54f0a4;
  --p-luz-clara: #5ee9cd;

  --p-claro-0: #ffffff;
  --p-claro-1: #e8f0fa;
  --p-claro-2: #9db0c9;
  --p-claro-3: #7d92ad;

  --p-verde: #3ddc97;
  --p-indigo: #8aa4ff;
  --p-ambar: #ffd479;
  --p-peligro: #ff7b72;

  --p-oro: #f0b429;
  --p-violeta: #a78bfa;
  --p-azul-mapa: #3b9cff;

  --p-magenta: #d94aef;
}

:root {
  color-scheme: dark;

  --sup-0: var(--p-noche-0);
  --sup-1: var(--p-noche-1);
  --sup-2: var(--p-noche-2);
  --sup-3: var(--p-noche-3);

  --carbon: var(--p-claro-1);
  --carbon-2: var(--p-claro-2);
  --carbon-3: var(--p-claro-3);

  --linea: var(--p-noche-4);
  --trazo: var(--p-noche-5);

  --filo: rgb(255 255 255 / .07);
  --filo-fuerte: rgb(255 255 255 / .12);

  --acento: var(--p-luz-1);
  --acento-fuerte: var(--p-luz-viva);
  --acento-tinte: #0c2a2c;
  --acento-borde: #1c4d4d;
  --acento-texto: var(--p-luz-clara);
  --sobre-acento: #04121f;

  --grad-luz: linear-gradient(105deg, var(--p-luz-1) 0%, var(--p-luz-2) 100%);
  --grad-luz-viva: linear-gradient(105deg, var(--p-luz-viva) 0%, var(--p-luz-2) 100%);

  --grad-lienzo:
    radial-gradient(1200px 620px at 12% -8%, rgb(46 230 191 / .10), transparent 62%),
    radial-gradient(1000px 560px at 92% 4%, rgb(59 156 255 / .09), transparent 60%);

  --vidrio: rgb(11 19 34 / .78);

  --verde: var(--p-verde);
  --verde-tinte: #0c2620;
  --indigo: var(--p-indigo);
  --indigo-tinte: #161c33;
  --ambar-fondo: #3a2c0a;
  --ambar-texto: var(--p-ambar);
  --peligro: var(--p-peligro);
  --peligro-tinte: #33161a;

  --radar-transito: #ff9248;
  --radar-infra: #ffd166;
  --radar-evento: #f78fb3;
  --radar-situacion: #d4b3ff;

  --barra-visita: var(--p-noche-5);
  --barra-contacto: var(--p-luz-1);

  --filete-mapa: rgb(232 240 250 / .46);
  --filete-mapa-suave: rgb(232 240 250 / .24);

  --velo-mapa: rgb(11 19 34 / .14);

  --marcador-visitante: var(--p-azul-mapa);

  --zona-linea: var(--p-magenta);
  --zona-relleno: rgb(217 74 239 / .07);

  --zona-velo: rgb(7 13 24 / .52);

  --zona-vertice: var(--p-claro-0);
  --zona-vertice-borde: var(--p-magenta);

  --zona-recuadro: rgb(157 176 201 / .28);

  --zona-local: var(--p-claro-3);
  --zona-local-afuera: var(--p-peligro);

  --tipo-local: #7dd3fc;          --tipo-local-fondo: #08243c;
  --tipo-servicio: #c9a6fd;       --tipo-servicio-fondo: #201541;
  --tipo-alquiler: #eef3f9;       --tipo-alquiler-fondo: #2b3648;
  --tipo-evento: #ffc061;         --tipo-evento-fondo: #37260a;
  --tipo-pedido: #f7a8c9;         --tipo-pedido-fondo: #35132a;

  --lavada: #0e2830;
  --lavada-fin: rgb(14 40 48 / 0);

  --foco-color: var(--p-luz-1);
  --foco: 0 0 0 2px var(--sup-1), 0 0 0 4px var(--foco-color);
  --foco-outline: 2px solid var(--foco-color);

  --s-0: none;
  --s-1: 0 1px 2px rgb(0 0 0 / .40);
  --s-2: 0 1px 3px rgb(0 0 0 / .44), 0 4px 14px rgb(0 0 0 / .34);
  --s-3: 0 6px 22px rgb(0 0 0 / .46), 0 1px 3px rgb(0 0 0 / .40);
  --s-4: 0 -10px 34px rgb(0 0 0 / .48);
  --s-tarjeta:      0 1px 2px rgb(0 0 0 / .34), 0 10px 30px rgb(0 0 0 / .34);
  --s-tarjeta-alta: 0 2px 6px rgb(0 0 0 / .40), 0 20px 46px rgb(0 0 0 / .44);

  --brillo: 0 6px 24px rgb(46 230 191 / .26);
  --brillo-fuerte: 0 8px 34px rgb(46 230 191 / .40);

  --sombra-tinta: 0 0 0;

  --halo-visitante: rgb(59 156 255 / .55);

  --sello-pro: #7dd3fc;
  --sello-pro-fondo: #10263f;
  --sello-premium: #04121f;
  --sello-premium-fondo: #e8f0fa;

  --nivel-pro: var(--p-oro);
  --nivel-pro-texto: #241d0d;
  --nivel-premium: var(--p-violeta);
  --nivel-premium-texto: #1b1233;
  --nivel-pro-halo: rgb(240 180 41 / .45);
  --nivel-premium-halo: rgb(167 139 250 / .50);
  --nivel-elegido-fondo: #24200f;

  --panel-barra-fondo: #060c16;
  --panel-barra-texto: var(--p-claro-1);

  --h-panel: 44px;

  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-nombre: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-1-size: 11px;  --t-1-lh: 1.30; --t-1-ls:  .07em;   --t-1-w: 600;
  --t-2-size: 13px;  --t-2-lh: 1.40; --t-2-ls: -.004em;  --t-2-w: 500;
  --t-3-size: 15px;  --t-3-lh: 1.50; --t-3-ls: -.008em;  --t-3-w: 400;
  --t-4-size: 17px;  --t-4-lh: 1.45; --t-4-ls: -.012em;  --t-4-w: 400;
  --t-5-size: 20px;  --t-5-lh: 1.30; --t-5-ls: -.016em;  --t-5-w: 600;
  --t-6-size: 26px;  --t-6-lh: 1.22; --t-6-ls: -.021em;  --t-6-w: 650;
  --t-7-size: 34px;  --t-7-lh: 1.14; --t-7-ls: -.026em;  --t-7-w: 700;
  --t-8-size: 46px;  --t-8-lh: 1.04; --t-8-ls: -.034em;  --t-8-w: 750;

  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;

  --r-1: 10px;
  --r-2: 14px;
  --r-3: 18px;
  --r-4: 24px;
  --r-full: 999px;

  --h-1: 38px; --h-2: 44px; --h-3: 52px; --h-4: 58px;

  --tocable: 44px;
  --tocable-chico: 36px;

  --q-telefono: 640px;
  --q-tableta: 1024px;
  --q-ancho: 1440px;

  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 420ms;
  --curva: cubic-bezier(.2, 0, 0, 1);

  --ancho-hoja: min(55rem + 46vw, 137.5rem);
  --ancho-comercio: 82.5rem;
  --ancho-ficha: 680px;
  --ancho-prosa: 62ch;

  --ancho-campo: 38rem;

  --canal: clamp(16px, 2.2vw, 40px);

  --col-guia: clamp(20rem, 15.6vw + 12.5rem, 28.75rem);

  --cal-0: var(--sup-0);
  --cal-1: var(--sup-1);
  --cal-2: var(--sup-2);
  --cal-3: var(--sup-3);
  --tinta: var(--carbon);
  --tinta-2: var(--carbon-2);
  --tinta-3: var(--carbon-3);
  --ladrillo: var(--acento-texto);
  --ladrillo-tinte: var(--acento-tinte);
  --monte: var(--verde);


  --ancho-lectura: var(--ancho-hoja);
}

@media (pointer: coarse) {
  :root { --h-1: 44px; --h-2: 48px; --h-3: 52px; --h-4: 58px; }
}

@media (max-width: 767px) {
  :root { --t-7-size: 27px; --t-8-size: 34px; }
}

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

  --sup-0: #dde6f2;
  --sup-1: #eef3fa;
  --sup-2: #ffffff;
  --sup-3: #ffffff;

  --carbon: #0c1522;
  --carbon-2: #4e6076;
  --carbon-3: #516174;

  --linea: #dfe7f1;
  --trazo: #7d8fa6;
  --filo: rgb(12 21 34 / .07);
  --filo-fuerte: rgb(12 21 34 / .12);

  --acento: #10b39a;
  --acento-fuerte: #0d9a84;
  --acento-tinte: #e6faf6;
  --acento-borde: #a5e7db;
  --acento-texto: #0b7361;
  --sobre-acento: #04121f;

  --grad-luz: linear-gradient(105deg, #10c9a8 0%, #34c77b 100%);
  --grad-luz-viva: linear-gradient(105deg, #0eb99a 0%, #2bb86f 100%);
  --grad-lienzo:
    radial-gradient(1200px 620px at 12% -8%, rgb(16 179 154 / .10), transparent 62%),
    radial-gradient(1000px 560px at 92% 4%, rgb(59 156 255 / .08), transparent 60%);
  --vidrio: rgb(238 243 250 / .82);

  --verde: #05664e;
  --verde-tinte: #e6f6f1;
  --indigo: #4338ca;
  --indigo-tinte: #eeedfb;
  --ambar-fondo: #fef3c7;
  --ambar-texto: #8a5a00;
  --peligro: #c0281f;
  --peligro-tinte: #fdeceb;

  --barra-visita: #c2cfe0;
  --barra-contacto: #10b39a;

  --radar-transito: #d2621b;
  --radar-infra: #b07d05;
  --radar-evento: #c94f7c;
  --radar-situacion: #7c4dd6;

  --filete-mapa: rgb(12 21 34 / .55);
  --filete-mapa-suave: rgb(12 21 34 / .30);
  --velo-mapa: rgb(255 255 255 / .10);

  --marcador-visitante: #1361b0;

  --zona-linea: #a41fb8;
  --zona-relleno: rgb(164 31 184 / .08);

  --zona-velo: rgb(12 21 34 / .38);
  --zona-vertice: #ffffff;
  --zona-vertice-borde: #a41fb8;
  --zona-recuadro: rgb(12 21 34 / .22);
  --zona-local: #5c7391;
  --zona-local-afuera: #d3392f;

  --tipo-local: #0369a1;          --tipo-local-fondo: #e2f2fd;
  --tipo-servicio: #6d28d9;       --tipo-servicio-fondo: #f1ebfe;
  --tipo-alquiler: #334155;       --tipo-alquiler-fondo: #eef2f7;
  --tipo-evento: #8a5a00;         --tipo-evento-fondo: #fdf1cf;
  --tipo-pedido: #a8306e;         --tipo-pedido-fondo: #fdeaf3;

  --lavada: #e8faf5;
  --lavada-fin: rgb(232 250 245 / 0);

  --foco-color: #0b7361;
  --foco: 0 0 0 2px var(--sup-2), 0 0 0 4px var(--foco-color);
  --foco-outline: 2px solid var(--foco-color);

  --s-1: 0 1px 2px rgb(12 21 34 / .05);
  --s-2: 0 1px 3px rgb(12 21 34 / .06), 0 4px 12px rgb(12 21 34 / .05);
  --s-3: 0 4px 16px rgb(12 21 34 / .10), 0 1px 3px rgb(12 21 34 / .06);
  --s-4: 0 -8px 28px rgb(12 21 34 / .12);
  --s-tarjeta:      0 1px 2px rgb(12 21 34 / .04), 0 6px 20px rgb(12 21 34 / .07);
  --s-tarjeta-alta: 0 2px 4px rgb(12 21 34 / .06), 0 14px 36px rgb(12 21 34 / .12);
  --brillo: 0 6px 20px rgb(16 179 154 / .28);
  --brillo-fuerte: 0 8px 28px rgb(16 179 154 / .38);
  --sombra-tinta: 12 21 34;
  --halo-visitante: rgb(29 127 224 / .55);

  --sello-pro: #0369a1;
  --sello-pro-fondo: #e6f4fd;
  --sello-premium: #f7fbff;
  --sello-premium-fondo: #0c1522;

  --nivel-pro: #d9a441;
  --nivel-pro-texto: #241d0d;
  --nivel-premium: #8b5cf6;
  --nivel-premium-texto: #ffffff;
  --nivel-pro-halo: rgb(217 164 65 / .45);
  --nivel-premium-halo: rgb(139 92 246 / .50);
  --nivel-elegido-fondo: #fdf3e3;

  --panel-barra-fondo: #0c1522;
  --panel-barra-texto: #f7fbff;
}

.mapa-teselas {
  filter: brightness(2.5) contrast(1.05) sepia(1) hue-rotate(170deg) saturate(2.4);
}

:root[data-theme="light"] .mapa-teselas {
  filter: brightness(.52) contrast(6.375) sepia(1) hue-rotate(185deg) saturate(.35) brightness(1.413);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}