/* hecho por r3k1 */
@font-face {
  font-family: 'Puntos VD';
  src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Neue'), local('Arial'), local('Roboto');
  font-weight: 100 900;
  font-style: normal;
  unicode-range: U+2026;
}

:root {
  color-scheme: light;

  --trazo: #4a2a3b;
  --ojo: #2a1822;
  --ciruela: #6f2350;
  --ciruela-hondo: #561a3e;
  --ciruela-luz: #8b2f63;

  --nata: #fffaf3;
  --nata-2: #fff1e6;
  --nata-3: #f8e6da;
  --blanco: #ffffff;

  --rosa-palido: #ffe3ee;
  --rosa-claro: #ffc2dc;
  --rosa: #ff8fb7;
  --rosa-fuerte: #ff5c93;
  --rosa-hondo: #d6336f;
  --acento: #ff5c93;
  --acento-texto: #c42a62;

  --lila-palido: #efe4ff;
  --lila-claro: #dcc8f8;
  --lila: #b58cf3;
  --lila-hondo: #7a50c6;
  --uva: #4b2a78;

  --amarillo: #ffe27a;
  --oro-claro: #fff3a6;
  --oro: #ffd23f;
  --oro-hondo: #f0a400;
  --miel: #a85a00;

  --rojo-lazo: #e8274d;
  --rojo-lazo-hondo: #a50f31;
  --negro-kuromi: #2b2036;
  --negro-kuromi-hondo: #150d1b;
  --calavera: #ff8cc6;

  --fresa-claro: #ffc4d8;
  --fresa: #ff6d9d;
  --fresa-hondo: #d23a70;
  --lila-d-claro: #eadaff;
  --lila-d: #b58cf3;
  --lila-d-hondo: #7a50c6;
  --limon-claro: #fff7bd;
  --limon: #ffd84a;
  --limon-hondo: #dc9d00;
  --menta-claro: #ccf8e5;
  --menta: #5ad7a5;
  --menta-hondo: #1b9c6e;
  --cielo-claro: #d2f0ff;
  --cielo: #6ac3f6;
  --cielo-hondo: #2a88cf;
  --melocoton-claro: #ffe0cc;
  --melocoton: #ffa274;
  --melocoton-hondo: #dc6634;

  --ok: #1b9c6e;
  --ok-texto: #1b7a55;
  --aviso: #f0a400;
  --peligro: #e8274d;
  --peligro-texto: #b23a2e;

  --fondo: #fff7fb;
  --fondo-2: #ffeef5;
  --fondo-degradado: linear-gradient(180deg, #ffe4f0 0%, #fff1e6 55%, #ffe9f2 100%);
  --superficie: #ffffff;
  --superficie-2: #fff4f8;
  --superficie-hundida: #f6e4ee;
  --casilla-a: #fffaf3;
  --casilla-b: #fbe9e1;
  --texto: #5a2e48;
  --texto-titulo: #6f2350;
  --texto-suave: #7d4d68;
  --texto-tenue: #9b6a86;
  --texto-sobre-color: #ffffff;
  --linea: #4a2a3b;
  --linea-suave: #f3d6e2;
  --base-boton: #6f2350;
  --velo: rgba(58, 22, 46, .42);
  --sombra-color: 111, 35, 80;

  --f-titulo: 'Puntos VD', 'Mochiy Pop One', 'M PLUS Rounded 1c', ui-rounded, system-ui, sans-serif;
  --f-ui: 'Puntos VD', 'M PLUS Rounded 1c', ui-rounded, system-ui, sans-serif;
  --f-mano: 'Caveat', 'Segoe Print', cursive;
  --peso-ui: 700;
  --peso-ui-fuerte: 800;

  --t-mini: 11px;
  --t-xs: 12.5px;
  --t-s: 14px;
  --t-m: 16px;
  --t-l: 19px;
  --t-xl: 23px;
  --t-2xl: 28px;
  --t-3xl: 36px;
  --t-titulo: 44px;
  --t-mano-s: 20px;
  --t-mano-m: 24px;
  --t-mano-l: 30px;
  --interlineado: 1.35;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --margen-lateral: 16px;
  --toque: 48px;
  --toque-min: 44px;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pastilla: 999px;
  --r-casilla: 10px;

  --b-fino: 2px;
  --b-trazo: 3px;
  --b-grueso: 4px;

  --sombra-boton: 0 0 0 var(--b-trazo) var(--linea), 0 5px 0 var(--b-trazo) var(--base-boton), 0 9px 14px rgba(var(--sombra-color), .28);
  --sombra-boton-pulsado: 0 0 0 var(--b-trazo) var(--linea), 0 2px 0 var(--b-trazo) var(--base-boton), 0 4px 8px rgba(var(--sombra-color), .22);
  --sombra-tarjeta: 0 0 0 var(--b-trazo) var(--linea), 0 6px 0 var(--b-trazo) var(--base-boton), 0 14px 24px rgba(var(--sombra-color), .22);
  --sombra-suave: 0 2px 0 var(--linea-suave), 0 8px 18px rgba(var(--sombra-color), .14);
  --sombra-flotante: 0 18px 40px rgba(var(--sombra-color), .32);
  --brillo-interior: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -6px 0 rgba(var(--sombra-color), .18);
  --sombra-texto-borde: 0 0 0 transparent;

  --d-instante: 90ms;
  --d-rapida: 160ms;
  --d-media: 260ms;
  --d-lenta: 420ms;
  --d-entrada: 560ms;
  --d-escena: 700ms;
  --d-respirar: 3.4s;
  --d-parpadeo: 4.6s;
  --escalonado: 45ms;

  --c-salir: cubic-bezier(.22, 1, .36, 1);
  --c-entrar: cubic-bezier(.55, 0, 1, .45);
  --c-entrar-salir: cubic-bezier(.65, 0, .35, 1);
  --c-pasarse: cubic-bezier(.34, 1.56, .64, 1);
  --c-muelle: linear(0, 0.046, 0.157, 0.299, 0.449, 0.591, 0.716, 0.819, 0.899, 0.959, 1, 1.026, 1.04, 1.046, 1.045, 1.041, 1.035, 1.028, 1.021, 1.015, 1.01, 1.006, 1.003, 1.001, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 1);
  --c-muelle-suave: linear(0, 0.044, 0.146, 0.272, 0.401, 0.522, 0.629, 0.719, 0.792, 0.85, 0.894, 0.928, 0.953, 0.97, 0.983, 0.991, 0.997, 1, 1.002, 1.003, 1.003, 1.003, 1.003, 1.002, 1);
  --c-muelle-vivo: linear(0, 0.064, 0.221, 0.421, 0.628, 0.814, 0.963, 1.069, 1.133, 1.16, 1.16, 1.14, 1.11, 1.076, 1.044, 1.017, 0.996, 0.982, 0.975, 0.973, 0.975, 0.98, 0.985, 0.99, 0.995, 0.999, 1.002, 1.004, 1.004, 1.004, 1.004, 1.003, 1.002, 1.001, 1, 1, 1);
  --c-botar: linear(0, 0.008, 0.034, 0.076, 0.134, 0.21, 0.303, 0.412, 0.538, 0.681, 0.84, 0.992, 0.91, 0.845, 0.797, 0.766, 0.751, 0.753, 0.773, 0.808, 0.861, 0.931, 0.992, 0.958, 0.94, 0.939, 0.955, 0.988, 0.988, 0.985, 1);
  --movimiento: 1;
  --desplazamiento-entrada: 18px;

  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
  --alto-barra: 56px;
  --alto-dock: 76px;
  --ancho-max: 440px;

  --z-fondo: 0;
  --z-contenido: 10;
  --z-barra: 40;
  --z-dock: 40;
  --z-efectos: 60;
  --z-modal: 80;
  --z-aviso: 90;
}

@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --c-muelle: cubic-bezier(.34, 1.4, .64, 1);
    --c-muelle-suave: cubic-bezier(.22, 1.1, .36, 1);
    --c-muelle-vivo: cubic-bezier(.34, 1.8, .64, 1);
    --c-botar: cubic-bezier(.34, 1.56, .64, 1);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #1d1428;
    --fondo-2: #261b35;
    --fondo-degradado: linear-gradient(180deg, #2a1d3e 0%, #1d1428 55%, #24182f 100%);
    --superficie: #2e2242;
    --superficie-2: #3a2c52;
    --superficie-hundida: #191122;
    --casilla-a: #3b2d52;
    --casilla-b: #33264a;
    --texto: #fff1f7;
    --texto-titulo: #ffc2dc;
    --texto-suave: #e9d9f5;
    --texto-tenue: #b9a2cc;
    --linea: #150d1b;
    --linea-suave: #4a3a63;
    --base-boton: #0e0813;
    --velo: rgba(8, 4, 12, .6);
    --sombra-color: 6, 2, 10;
    --acento-texto: #ff8fc0;
    --ok-texto: #7fe8bd;
    --peligro-texto: #ff8a9a;
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #1d1428;
  --fondo-2: #261b35;
  --fondo-degradado: linear-gradient(180deg, #2a1d3e 0%, #1d1428 55%, #24182f 100%);
  --superficie: #2e2242;
  --superficie-2: #3a2c52;
  --superficie-hundida: #191122;
  --casilla-a: #3b2d52;
  --casilla-b: #33264a;
  --texto: #fff1f7;
  --texto-titulo: #ffc2dc;
  --texto-suave: #e9d9f5;
  --texto-tenue: #b9a2cc;
  --linea: #150d1b;
  --linea-suave: #4a3a63;
  --base-boton: #0e0813;
  --velo: rgba(8, 4, 12, .6);
  --sombra-color: 6, 2, 10;
  --acento-texto: #ff8fc0;
  --ok-texto: #7fe8bd;
  --peligro-texto: #ff8a9a;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --movimiento: 0;
    --desplazamiento-entrada: 0px;
    --c-muelle: var(--c-salir);
    --c-muelle-suave: var(--c-salir);
    --c-muelle-vivo: var(--c-salir);
    --c-botar: var(--c-salir);
    --c-pasarse: var(--c-salir);
  }
}

:root[data-reducir-movimiento] {
  --movimiento: 0;
  --desplazamiento-entrada: 0px;
  --c-muelle: var(--c-salir);
  --c-muelle-suave: var(--c-salir);
  --c-muelle-vivo: var(--c-salir);
  --c-botar: var(--c-salir);
  --c-pasarse: var(--c-salir);
}
