/* ===========================================================================
   Mr. Wurster · tokens de marca
   ---------------------------------------------------------------------------
   Única fuente de la paleta del brandbook Way. La piden las páginas y también
   los módulos que escriben su propio CSS desde JavaScript (pos.js, colaciones.js,
   autopedido.js), que hasta ahora caían siempre al color de respaldo porque
   index.html no tenía :root y el de caja.html venía sin --rosa ni --azul.
   Manual completo: assets/brand/Way_Manual_Mr.Wurster.pdf

   Si cambias un color acá, cámbialo también en el theme con que se compila
   assets/tailwind.css (el comando está en la cabecera de ese archivo).

   La landing (web/) se publica con web/ como raíz y no alcanza esta ruta, así
   que lleva una copia de estos tokens en su propio <style>. Si tocas un color,
   revisa también web/index.html.
   =========================================================================== */

:root {
  /* Sin esto Chromium dibuja el anillo de foco casi negro sobre el navy
     (1.21:1) y el foco por teclado queda invisible. */
  color-scheme: dark;

  /* Carmesí: el color principal de la marca */
  --carmesi:   #e56c6c;
  --carmesiO:  #d35e5e;
  --carmesiL:  #f27c7c;
  --rosa:      #f7b5b5;

  /* Azul cielo: complementario, de contraste. Nunca como principal. */
  --azul:      #006aea;
  --azul-neon: #3b8bff;

  /* Fondos y texto */
  --carbon:    #141726;
  --humo:      #1e2236;
  --crema:     #FFF8F3;
  --crema-soft:#e9ddd3;

  /* Tinta oscura de marca: el texto que va ENCIMA del carmesí. El blanco sobre
     #e56c6c rinde 3.14:1 y no pasa AA; esta tinta llega a 5.66:1. */
  --tinta:     #2a1013;

  /* Legado. No los uses en código nuevo: quedaron para no mover de golpe lo que
     ya está pintado. Los reemplazan --exito y --peligro (más abajo).
     --verde es Material Green 800 y --ketchup el rojo de Flat UI: ninguno de los
     dos está en el brandbook, y sobre la tarjeta (#1e2236) el ketchup rinde
     2.89:1, o sea ilegible. */
  --verde:     #2E7D32;
  --ketchup:   #c0392b;

  /* Alias que ya usan los módulos y la landing; no agregues más. */
  --navy:      var(--carbon);
  --navy-2:    #161a2c;
  --panel:     var(--humo);
  --ink:       var(--crema);
  --muted:     #a9a2b8;
  --line:      rgba(255, 248, 243, .14);
  --carmesi-2: var(--carmesiO);
  --carmesi-3: var(--carmesiL);
  --tw-carmesi:var(--carmesi);   /* lo pide autopedido.js */

  /* =========================================================================
     ESCALA SEMÁNTICA · éxito / peligro / aviso / info
     -------------------------------------------------------------------------
     Antes de esto había 14 hex sueltos inventados archivo por archivo: 7 verdes
     de "éxito", 4 rojos de "error" y 3 ámbares. Acá va uno solo de cada cosa.

     Cada familia trae tres piezas, y cada una tiene UN uso:

       --X          relleno sólido y, además, tinta sobre CREMA (#FFF8F3).
                    Lleva texto blanco encima.
       --X-txt      texto o ícono sobre el NAVY (#141726) y sobre --X-bg.
                    Nunca como relleno: es demasiado claro.
       --X-bg       relleno translúcido para chips y avisos sobre el navy.
                    Lleva --X-txt encima.

     Los contrastes están medidos (WCAG 2.x, AA pide 4.5:1 en texto normal):

     | token          | valor               | sobre navy | sobre su -bg | sobre crema | blanco encima |
     |----------------|---------------------|-----------:|-------------:|------------:|--------------:|
     | --exito        | #1f7a44             |          – |            – |      5.09:1 |        5.35:1 |
     | --exito-txt    | #5fce8f             |     9.08:1 |       7.02:1 |      1.86:1 |             – |
     | --peligro      | #b3261e             |          – |            – |      6.22:1 |        6.54:1 |
     | --peligro-txt  | #ff8f7a             |     8.02:1 |       6.08:1 |      2.11:1 |             – |
     | --aviso        | #8a5300             |          – |            – |      6.02:1 |        6.33:1 |
     | --aviso-txt    | #f0b360             |     9.59:1 |       7.16:1 |      1.76:1 |             – |
     | --info         | #006aea             |     3.60:1 |            – |      4.70:1 |        4.94:1 |
     | --info-txt     | #7fb3ff             |     8.30:1 |       6.70:1 |      2.04:1 |             – |

     Ojo con --info: el azul de marca NO pasa AA como texto sobre el navy
     (3.60:1). Sobre crema sí (4.70:1). En fondo oscuro usa siempre --info-txt.

     A qué hex venía a reemplazar cada uno:

     --exito      ← #1f7a44 (pos.js:104 `.pos-btn-ok`, autopedido.js:90 toast ok),
                    #3ea56f/#2f8d5c (degradado de validar.html:44) y el token
                    --verde #2E7D32 (colaciones.js toast ok, mrwurster.js toast).
     --exito-txt  ← #5fce8f (pos.js:119 chip listo, finanzas.js:474,
                    colaciones.js:76 chip pagada), #7bd88a (pago.html:22),
                    #7ee0a8 (validar.html:39), #7fe0a4 (turnos-admin.js:37).
     --peligro    ← --ketchup #c0392b (`.btn-peligro` de caja.html, toasts de
                    error de colaciones/finanzas/turnos), #9b1c26
                    (autopedido.js:90, finanzas.js:65,808) y #c1121f
                    (el fallback fuera de marca de colaciones.js).
     --peligro-txt← #ff8f7a (`.text-ketchup` de index.html y caja.html) y
                    #b23b3b (colaciones.js:1282, el chip "Rechazada" que rendía
                    2.1:1 sobre su propio fondo rojo).
     --aviso      ← no existía: no había ningún ámbar legible sobre crema.
     --aviso-txt  ← #f0b360 (turnos-admin.js:38, finanzas.js:459), #f0a860
                    (colaciones.js:75 chip pendiente, cliente.js:444) y #f0b860
                    (pos.js:118 chip en preparación).
     --info       ← #006aea (el azul de marca; ya estaba, ahora con nombre de rol).
     --info-txt   ← #7fb3ff (pos.js chip solicitado, autopedido.js `.ap-chip`) y
                    #a6a6f0 (colaciones.js:77 y pos.js chip pendiente).
     ========================================================================= */

  --exito:       #1f7a44;
  --exito-txt:   #5fce8f;
  --exito-bg:    rgba(40, 170, 90, .18);

  --peligro:     #b3261e;
  --peligro-txt: #ff8f7a;
  --peligro-bg:  rgba(229, 108, 108, .20);

  --aviso:       #8a5300;
  --aviso-txt:   #f0b360;
  --aviso-bg:    rgba(220, 150, 20, .18);

  --info:        var(--azul);
  --info-txt:    #7fb3ff;
  --info-bg:     rgba(0, 106, 234, .22);

  /* =========================================================================
     MEDIDAS DE LOS COMPONENTES
     -------------------------------------------------------------------------
     Las dos escalas del proyecto. La normal es la de la app del cliente y la
     caja (dedo, celular). La compacta es la de los paneles de gestión
     (colaciones, POS, finanzas), que muestran tablas densas en un computador.
     Cambia el valor acá y se mueve todo; no escribas el número a mano.
     ========================================================================= */

  /* Normal */
  --radio-btn:      .75rem;
  --pad-btn:        .85rem 1.1rem;
  --fs-btn:         .95rem;
  --radio-campo:    .75rem;
  --pad-campo:      .8rem .9rem;
  --fs-campo:       1rem;
  --fs-etiqueta:    .75rem;
  --radio-tarjeta:  1rem;
  --pad-tarjeta:    1rem;
  --radio-chip:     999px;
  --pad-chip:       .12rem .5rem;
  --fs-chip:        .72rem;

  /* Compacta (paneles de gestión) */
  --radio-btn-cmp:   .6rem;
  --pad-btn-cmp:     .55rem .95rem;
  --fs-btn-cmp:      .85rem;
  --radio-campo-cmp: .55rem;
  --pad-campo-cmp:   .55rem .65rem;
  /* 16px exactos: bajo eso Safari en el iPhone hace zoom solo al tocar el campo. */
  --fs-campo-cmp:    16px;
  --fs-etiqueta-cmp: .72rem;
  --radio-tarjeta-cmp: .9rem;

  /* Superficies compartidas */
  --fondo-campo:    #10131f;
  --fondo-campo-cmp:rgba(0, 0, 0, .35);
  --borde:          rgba(255, 248, 243, .14);
  --borde-suave:    rgba(255, 248, 243, .08);
  --superficie:     rgba(255, 255, 255, .04);
  --superficie-alta:rgba(255, 255, 255, .06);

  /* Objetivo táctil mínimo. WCAG 2.5.8 pide 24x24; en una caja que se usa de
     pie y con el local lleno, 44. */
  --toque-min:      2.75rem;
}

/* ===========================================================================
   COMPONENTES BASE · única fuente de verdad
   ---------------------------------------------------------------------------
   Hoy el proyecto tiene 6 sistemas de botón, 4 de input, 3 de tarjeta y 4 de
   modal, con radios, paddings y tamaños distintos. Estas reglas son la versión
   buena: cualquier botón, campo, etiqueta, tarjeta o chip del proyecto sale de
   acá.

   IMPORTANTE (transición): index.html y caja.html todavía repiten estas mismas
   reglas en su <style>, y ese <style> va DESPUÉS de este archivo, así que por
   ahora gana el de la página. Lo de acá está escrito para ser equivalente: el
   día que se borren esos bloques, nada se mueve. Las dos diferencias a la vista
   están anotadas donde corresponde (.etiqueta y .btn-peligro).
   =========================================================================== */

/* ------------------------------------------------------------------ botón -- */
/* Sin `background` propio: casi todos los botones del proyecto traen su color
   desde una clase de Tailwind o desde .btn-primario / .btn-fantasma / .btn-peligro. */
.btn {
  border-radius: var(--radio-btn);
  padding: var(--pad-btn);
  font-weight: 700;
  font-size: var(--fs-btn);
  transition: transform .1s, filter .15s;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Blanco sobre carmesí da 3.14:1 y no pasa AA. La tinta de marca sube a 5.66:1. */
.btn-primario { background: var(--carmesi); color: var(--tinta); }
.btn-primario:hover:not(:disabled) { filter: brightness(1.08); }

.btn-fantasma {
  background: transparent;
  color: var(--crema);
  border: 1px solid rgba(255, 248, 243, .2);
}
.btn-fantasma:hover:not(:disabled) { background: var(--superficie-alta); }

/* Acción destructiva. Va con --peligro, no con --ketchup: el ketchup #c0392b
   rinde 5.44:1 con texto blanco y este llega a 6.54:1. */
.btn-peligro { background: var(--peligro); color: #fff; }
.btn-peligro:hover:not(:disabled) { filter: brightness(1.12); }

/* Botón en la escala compacta de los paneles de gestión. */
.btn-cmp {
  border-radius: var(--radio-btn-cmp);
  padding: var(--pad-btn-cmp);
  font-size: var(--fs-btn-cmp);
}

/* ------------------------------------------------------------------ campo -- */
.campo {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
  background: var(--fondo-campo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-campo);
  padding: var(--pad-campo);
  color: var(--crema);
  font-size: var(--fs-campo);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
/* En iOS los input date/time traen un ancho intrínseco que rompe la grilla. */
input.campo[type="date"], input.campo[type="time"] { min-height: 3rem; }
.campo:focus { border-color: var(--carmesi); box-shadow: 0 0 0 3px rgba(229, 108, 108, .22); }
/* Al 32% el placeholder rendía 2.79:1 sobre el fondo del campo y no se leía ni
   como texto grande. Al 52% queda en 5.4:1 y se sigue distinguiendo de lo que
   uno escribe. */
.campo::placeholder { color: rgba(255, 248, 243, .52); }
.campo:invalid:not(:placeholder-shown) { border-color: var(--peligro-txt); }

/* --------------------------------------------------------------- etiqueta -- */
/* index.html la tiene en .75rem y caja.html en .72rem. Acá manda .75rem (la de
   la app del cliente, que es la que lee gente de afuera). Si al limpiar el
   <style> de caja.html los rótulos se ven un pelo más grandes, es esto. */
.etiqueta {
  display: block;
  font-size: var(--fs-etiqueta);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 248, 243, .55);
  margin-bottom: .35rem;
}

/* ---------------------------------------------------------------- tarjeta -- */
.tarjeta {
  background: var(--humo);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-tarjeta);
}
/* Variante translúcida, la que usan los paneles de gestión (.col-card, .pos-card). */
.tarjeta-suave {
  background: var(--superficie);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radio-tarjeta-cmp);
  padding: var(--pad-tarjeta);
}

/* ------------------------------------------------------------------- chip -- */
/* A propósito sin `white-space:nowrap`: los chips de colaciones viven dentro de
   tablas densas y algunos son largos ("Factura N° 1234 anulada"); forzarlos a
   una línea ensancha la columna y saca scroll horizontal en el celular. El que
   lo necesite lo pide en su propia clase, como ya hace .pos-chip. */
.chip {
  display: inline-block;
  padding: var(--pad-chip);
  border-radius: var(--radio-chip);
  font-size: var(--fs-chip);
  font-weight: 700;
}
.chip-exito   { background: var(--exito-bg);   color: var(--exito-txt); }
.chip-peligro { background: var(--peligro-bg); color: var(--peligro-txt); }
.chip-aviso   { background: var(--aviso-bg);   color: var(--aviso-txt); }
.chip-info    { background: var(--info-bg);    color: var(--info-txt); }
.chip-neutro  { background: rgba(255, 255, 255, .10); color: rgba(255, 248, 243, .75); }

/* Objetivo táctil cómodo, sin cambiar el tamaño del texto. */
.toque {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque-min); min-width: var(--toque-min);
}

/* ===========================================================================
   CONTRATO PARA LOS MÓDULOS QUE INYECTAN SU PROPIO CSS
   ---------------------------------------------------------------------------
   colaciones.js (.col-*), pos.js (.pos-*) y autopedido.js (.ap-*) escriben su
   hoja de estilos desde JavaScript y por ahora seguirán haciéndolo. Lo que NO
   pueden seguir haciendo es inventar el valor: cada propiedad tiene que salir
   de una variable de este archivo. Sin fallback inventado —`var(--carmesi)` a
   secas—: marca.css está enlazado en las 7 páginas, y si algún día falta, un
   fallback fuera de marca (el famoso #c1121f) es peor que no pintar.

   BOTONES  ·  .col-btn, .pos-btn, .ap-btn
     border-radius: var(--radio-btn-cmp)     → .6rem  (.ap-btn usaba 12px)
     padding:       var(--pad-btn-cmp)       → .55rem .95rem
     font-size:     var(--fs-btn-cmp)        → .85rem (.ap-btn usaba 16px)
     font-weight:   700
     border:        1px solid rgba(255,255,255,.15)
     background:    var(--superficie-alta)   → rgba(255,255,255,.06)
     color:         inherit
     :hover  → background: rgba(255,255,255,.12)
     :disabled → opacity:.5; cursor:not-allowed

   BOTÓN PRIMARIO  ·  .col-btn-primary, .pos-btn-primary, .ap-btn (el de acción)
     background:   var(--carmesi)
     border-color: var(--carmesi)
     color:        var(--tinta)   ← NO #fff. Blanco sobre carmesí = 3.14:1.
                                    Hoy .pos-btn-primary y .ap-btn usan #fff
                                    y por eso no pasan AA.
     :hover → filter: brightness(1.08)

   BOTÓN DE ÉXITO  ·  .pos-btn-ok
     background: var(--exito); border-color: var(--exito); color:#fff   (5.35:1)

   BOTÓN DESTRUCTIVO  ·  el que borre o anule algo, en cualquier módulo
     background: var(--peligro); color:#fff   (6.54:1)

   CAMPOS  ·  .col-inp, .pos-inp
     background:    var(--fondo-campo-cmp)   → rgba(0,0,0,.35)
     border:        1px solid var(--borde)
     border-radius: var(--radio-campo-cmp)   → .55rem
     padding:       var(--pad-campo-cmp)     → .55rem .65rem
     font-size:     var(--fs-campo-cmp)      → 16px, siempre: bajo eso el
                                                iPhone hace zoom solo
     color:         inherit
     :focus → outline:none; border-color: var(--carmesi)
     El anillo de foco por teclado ya lo pone este archivo más abajo; no lo
     apagues con `outline:none` en :focus-visible.

   ETIQUETAS  ·  .col-lbl, .pos-lbl
     font-size: var(--fs-etiqueta-cmp); font-weight:600; opacity:.7

   TARJETAS  ·  .col-card, .pos-card, .ap-mi
     Son .tarjeta-suave: var(--superficie), borde rgba(255,255,255,.09),
     border-radius: var(--radio-tarjeta-cmp), padding: var(--pad-tarjeta).

   CHIPS DE ESTADO  ·  .chip-*, .pos-chip-*, .ap-chip
     pagado / listo / entregado OK → var(--exito-bg)   + var(--exito-txt)
     rechazado / anulado / error   → var(--peligro-bg) + var(--peligro-txt)
     pendiente / en preparación    → var(--aviso-bg)   + var(--aviso-txt)
     solicitado / informativo      → var(--info-bg)    + var(--info-txt)
     neutro / sin estado           → rgba(255,255,255,.10) + rgba(255,248,243,.75)

   MODALES  ·  #col-modal, #pos-modal, #ap-modal
     fondo var(--humo), texto var(--crema), borde 1px rgba(255,255,255,.12),
     border-radius var(--radio-tarjeta), velo rgba(0,0,0,.65).
     Para confirmar o pedir un dato NO hagas un modal nuevo: usa confirmar() y
     pedirTexto() de assets/mrwurster.js, que ya son de marca y accesibles.

   AVISOS  ·  nada de toast propio
     Usa toast() de assets/mrwurster.js. Los 8 toast() paralelos (colaciones,
     pos, finanzas, turnos-admin, boletas, metaads, autopedido) se reemplazan
     por ese, que ya trae role="status" / role="alert" y una sola duración.

   ESTADOS DE CARGA / VACÍO / ERROR
     Usa estado() de assets/mrwurster.js. Nada de escribir "Cargando…" a mano.
   =========================================================================== */

/* ===========================================================================
   WIDGETS DE mrwurster.js
   ---------------------------------------------------------------------------
   El CSS de toast(), confirmar(), pedirTexto() y estado() vive acá y no dentro
   del JavaScript, para que haya un solo lugar donde mirar. Las 7 páginas que
   cargan mrwurster.js cargan también este archivo.
   =========================================================================== */

/* --------------------------------------------------------------- toast --- */
.mrw-toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(6rem + env(safe-area-inset-bottom));
  z-index: 100;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: min(28rem, calc(100vw - 2rem));
  pointer-events: none;
}
.mrw-toast {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-radius: var(--radio-btn);
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: opacity .3s, transform .3s;
  opacity: 0;
  transform: translateY(.5rem);
  background: var(--humo);
  color: var(--crema);
  border: 1px solid rgba(255, 255, 255, .15);
}
.mrw-toast.visible { opacity: 1; transform: none; }
.mrw-toast.ok    { background: var(--exito);   color: #fff; border-color: transparent; }
.mrw-toast.error { background: var(--peligro); color: #fff; border-color: transparent; }
.mrw-toast.aviso { background: var(--aviso);   color: #fff; border-color: transparent; }

/* -------------------------------------------------------------- diálogo --- */
#mrw-dialogo {
  border: 0; padding: 0; background: transparent; color: inherit;
  width: min(26rem, calc(100vw - 2rem));
  max-height: 88vh;
}
#mrw-dialogo::backdrop { background: rgba(0, 0, 0, .65); }
.mrw-dlg-titulo {
  font-family: 'Bebas Neue', Impact, sans-serif;
  letter-spacing: .02em;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--carmesi);
  margin: 0;
}
.mrw-dlg-texto {
  margin: .5rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: rgba(255, 248, 243, .75);
  white-space: pre-line;
}
.mrw-dlg-acciones { display: flex; gap: .5rem; margin-top: 1.25rem; }
.mrw-dlg-acciones .btn { flex: 1; }
.mrw-dlg-cuerpo { padding: 1.25rem; text-align: left; }

/* El campo de pedirTexto(). Sin `display` propio a propósito: el diálogo lo
   muestra y lo esconde con el estilo en línea. */
.mrw-dlg-campo { margin-top: 1rem; }
.mrw-campo-ojo { position: relative; display: block; }
/* Espacio para el botón del ojo, para que no tape lo que se escribe. */
.mrw-campo-ojo .campo { padding-right: 2.9rem; }
.mrw-ojo {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; font-size: 1.15rem; line-height: 1;
  cursor: pointer; opacity: .55; padding: .2rem;
}

/* --------------------------------------------------- estados y esqueleto --- */
.mrw-estado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem;
  padding: 1.75rem 1rem;
  text-align: center;
  color: rgba(255, 248, 243, .7);
  font-size: .9rem;
}
.mrw-estado-error { color: var(--peligro-txt); }
.mrw-esqueleto { width: 100%; display: flex; flex-direction: column; gap: .6rem; }
.mrw-linea {
  height: 1rem;
  border-radius: .5rem;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .06) 0%,
    rgba(255, 255, 255, .13) 50%,
    rgba(255, 255, 255, .06) 100%);
  background-size: 200% 100%;
  animation: mrw-brillo 1.3s ease-in-out infinite;
}
.mrw-linea.alta  { height: 3.25rem; border-radius: var(--radio-tarjeta-cmp); }
.mrw-linea.corta { width: 55%; }
@keyframes mrw-brillo {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------------
   Foco visible
   El rosa de la paleta rinde 8.8:1 sobre el navy. Va con outline-offset para
   que el anillo caiga sobre el fondo de la página y no sobre el carmesí del
   botón, donde no se distinguiría.
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--rosa);
  outline-offset: 2px;
}

/* .campo y los módulos que inyectan su CSS desde JavaScript apagan el anillo
   con `outline:none`, y esas reglas entran después en el documento: acá hace
   falta !important para que el foco por teclado se vea igual. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.campo:focus-visible,
.col-inp:focus-visible,
.col-btn:focus-visible,
.pos-inp:focus-visible,
.pos-btn:focus-visible,
.ap-btn:focus-visible {
  outline: 3px solid var(--rosa) !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
   Movimiento reducido
   Si el sistema pide menos animación, se apagan el latido, los pulsos de carga
   y las transiciones. El contenido no cambia, solo deja de moverse.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
  .latido, .animate-pulse { animation: none !important; }
}