:root {

    --fuente-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --fuente-texto:   'Literata', Georgia, 'Times New Roman', serif;
    --fuente-datos:   ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace;

    --texto-xs:   0.8rem;
    --texto-sm:   0.9rem;
    --texto-base: 1.0625rem;
    --texto-md:   1.25rem;
    --texto-lg:   1.5625rem;
    --texto-xl:   1.9531rem;
    --texto-2xl:  2.4414rem;
    --texto-3xl:  3.0518rem;
    --texto-display: clamp(2.5rem, 5vw + 1rem, 5rem);
    --texto-cifra:   clamp(4rem, 14vw + 1rem, 11rem);

    --texto-declaracion: clamp(1.6875rem, 3.7vw + 0.72rem, 3.25rem);

    --espacio-2xs: 0.25rem;
    --espacio-xs:  0.5rem;
    --espacio-sm:  0.75rem;
    --espacio-md:  1rem;
    --espacio-lg:  1.5rem;
    --espacio-xl:  2rem;
    --espacio-2xl: 3rem;
    --espacio-3xl: 4.5rem;
    --espacio-4xl: 7rem;

    --medida:      68ch;
    --ancho-max:   1200px;
    --radio-sm:    4px;
    --radio-md:    8px;
    --radio-pill:  999px;
    --filete:      1px solid var(--color-linea);

    --carril-ancho: min(300px, 78vw);
    --carril-hueco: var(--espacio-lg);

}

.indice {

    --tarjeta-ancho: 480px;
    --tarjeta-alto:  376px;
    --banda:         48%;

    --paso:        0.96;
    --giro:        23deg;
    --z:           245px;
    --arco:        50px;
    --escala:      0.13;
    --perspectiva: 1150px;

    --desenfoque:  2.7px;
    --penumbra:    0.30;
    --atenuado:    0.18;

    --desaturado:  0;

    --apaga-texto:   0.08;

    --apaga-detalle: 1.6;

    --texto-hasta:   1.65;

    --visibles: 2.5;

    --giro-dur: 1300ms;

    --giro-fundido: 1300ms;

    --cruce-apilado: 0.36;

    --desenfoque-dur: 500ms;

    --paralaje: 10px;

    --capa-tarjeta-max: 100;
    --capa-velo:        110;

    --capa-mando:       120;
}

@media (max-width: 719px) {
    .indice {
        --tarjeta-ancho: min(86vw, 380px);

        --paso:          0.84;
        --giro:          17deg;

        --z:             186px;
    }
}

:root {

    --dur-corta:    120ms;
    --dur-nav:      180ms;
    --dur-estira:   130ms;
    --dur-media:    240ms;
    --dur-acordeon: 200ms;
    --dur-pulsar:   110ms;

    --dur-ambiente: 700ms;

    --dur-entrada:  420ms;
    --paso-entrada: 110ms;

    --t-confirma:  650ms;
    --dur-golpe:   540ms;
    --impacto:     240ms;
    --dur-susto:   300ms;
    --t-susto:    1000ms;
    --t-rumor:    1400ms;
    --t-falso:    1950ms;
    --dur-brinco:  400ms;
    --impacto2:    220ms;

    --paso-letra:   24ms;
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

    --ease-ruleta: cubic-bezier(0.2, 0.3, 0.5, 0.8);
    --ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --capa-base:    1;
    --capa-elevada: 10;
    --capa-nav:     100;
    --capa-ancla:   200;
    --capa-banner:  300;
}

:root,
:root[data-tema='atardecer'] {
    color-scheme: dark;

    --color-papel-0:     oklch(23% 0.048 272);
    --color-papel:       oklch(28% 0.050 272);
    --color-papel-2:     oklch(33% 0.050 272);
    --color-papel-3:     oklch(39% 0.050 272);
    --color-papel-4:     oklch(48% 0.046 272);

    --foco:         0.55;
    --ambiente:     1;
    --ambiente-max: 0.5;
    --velo-mezcla:  screen;
    --velo-fuerza:  0.72;

    --color-papel-0-vidrio: oklch(23% 0.048 272 / 0.94);
    --color-papel-2-vidrio: oklch(33% 0.050 272 / 0.62);

    --velo-hondo:  oklch(28% 0.050 272 / 0.86);
    --velo-alto:   oklch(28% 0.050 272 / 0.58);
    --velo-centro: oklch(28% 0.050 272 / 0.24);
    --velo-bajo:   oklch(28% 0.050 272 / 0.32);
    --velo-lado:   oklch(28% 0.050 272 / 0.68);

    --color-tinta:       oklch(95% 0.010 80);
    --color-tinta-2:     oklch(84% 0.016 80);
    --color-tinta-3:     oklch(78% 0.018 80);

    --color-acento:       oklch(78% 0.185 350);
    --color-acento-vivo:  oklch(85% 0.170 350);
    --color-acento-flojo: oklch(78% 0.185 350 / 0.18);

    --nav-foco:        oklch(78% 0.185 350 / 0.13);
    --nav-pill-luz:    oklch(80% 0.185 350 / 0.32);
    --nav-pill-borde:  oklch(80% 0.185 350 / 0.38);
    --nav-pill-sombra: oklch(70% 0.190 350 / 0.55);

    --color-acento-calido: oklch(88% 0.140 78);
    --color-sol-hondo:     oklch(54% 0.190 330);

    --resplandor-1: oklch(78% 0.185 350 / 0.20);
    --resplandor-2: oklch(84% 0.150 55  / 0.13);

    --color-confirmado:  oklch(82% 0.150 155);
    --color-confirmado-fondo: oklch(82% 0.150 155 / 0.15);
    --color-rumor:       oklch(86% 0.140 80);
    --color-rumor-fondo: oklch(86% 0.140 80 / 0.15);

    --color-falso:       oklch(86% 0.170 25);
    --color-falso-fondo: oklch(86% 0.170 25 / 0.15);

    --color-foco:        oklch(90% 0.140 200);
    --color-linea:       oklch(48% 0.040 272);
}

:root[data-tema='mediodia'] .indice {
    --atenuado:    0.08;
    --desenfoque:  2.8px;
    --escala:      0.115;

    --apaga-texto: 0.06;
}

:root[data-tema='mediodia'] {

    --foco:         0.55;
    --ambiente-max: 0.16;
    --velo-mezcla:  multiply;
    --velo-fuerza:  0.42;

    color-scheme: light;

    --color-papel-0:     oklch(88.5% 0.018 85);
    --color-papel:       oklch(93% 0.012 85);
    --color-papel-2:     oklch(90% 0.016 85);
    --color-papel-3:     oklch(86.5% 0.020 85);
    --color-papel-4:     oklch(77.5% 0.024 85);

    --color-papel-0-vidrio: oklch(88.5% 0.018 85 / 0.94);
    --color-papel-2-vidrio: oklch(93% 0.012 85 / 0.72);

    --velo-hondo:  oklch(93% 0.012 85 / 0.88);
    --velo-alto:   oklch(93% 0.012 85 / 0.66);
    --velo-centro: oklch(93% 0.012 85 / 0.30);
    --velo-bajo:   oklch(93% 0.012 85 / 0.40);
    --velo-lado:   oklch(93% 0.012 85 / 0.74);

    --color-tinta:       oklch(24% 0.030 272);
    --color-tinta-2:     oklch(38% 0.030 272);
    --color-tinta-3:     oklch(46% 0.028 272);

    --color-acento:       oklch(46% 0.190 355);
    --color-acento-vivo:  oklch(40% 0.190 355);
    --color-acento-flojo: oklch(46% 0.190 355 / 0.12);

    --nav-foco:        oklch(46% 0.190 355 / 0.10);
    --nav-pill-luz:    oklch(50% 0.190 355 / 0.16);
    --nav-pill-borde:  oklch(46% 0.190 355 / 0.28);
    --nav-pill-sombra: oklch(46% 0.190 355 / 0.35);

    --color-acento-calido: oklch(80% 0.150 72);
    --color-sol-hondo:     oklch(56% 0.200 348);

    --resplandor-1: oklch(60% 0.190 350 / 0.10);
    --resplandor-2: oklch(70% 0.160 55  / 0.10);

    --color-confirmado:  oklch(42% 0.130 155);
    --color-confirmado-fondo: oklch(42% 0.130 155 / 0.10);
    --color-rumor:       oklch(44% 0.110 70);
    --color-rumor-fondo: oklch(44% 0.110 70 / 0.10);
    --color-falso:       oklch(44% 0.190 25);
    --color-falso-fondo: oklch(44% 0.190 25 / 0.10);

    --color-foco:        oklch(45% 0.180 255);
    --color-linea:       oklch(81.5% 0.022 85);
}

@media (min-width: 560px)  { :root { --carril-ancho: min(288px, 42vw); } }
@media (min-width: 1024px) { :root { --carril-ancho: min(320px, 28vw); } }

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fuentes/bricolage-grotesque-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Literata';
    src: url('../fuentes/literata-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}