/*
 * Estilos de la cartelera y del inicio (CF-DIS-003 v1.0, diseno-ui.md; el CSS de las maquetas es normativo).
 * Paleta unica azul marino / dorado / marfil (ya no se deriva de la empresa), Poppins + Newsreader (fuentes/),
 * sin dependencias externas. Generado a partir de diseno/maqueta-cartelera.html y diseno/maqueta-inicio.html:
 * cada bloque va bajo su clase de <html> para que .circulo, .chip, etc. no se mezclen entre pantallas.
 * Cartelera: <html class="cartelera">, unidad --u = 1 % de la altura del lienzo 16:9 (1080p -> 10,8 px; 4K -> 21,6 px).
 * Inicio: <html class="inicio">, unidad rem (font-size relativo a la altura).
 */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/newsreader-500.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/newsreader-600.woff2") format("woff2"); }

/* ================= Comun ================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { display: block; fill: currentColor; flex: none; }

/* ================= CARTELERA ================= */
:root {
  /* Unidad de diseno: 1u = 1 % de la altura del lienzo 16:9. 1080p -> 10,8 px; 1366x768 -> 7,68 px; 4K -> 21,6 px. */
  --u: min(1vh, 0.5625vw);

  /* Paleta unica (CF-DIS-003 v1.0, seccion 2). Igual para todas las funerarias; ya NO se deriva de la empresa. */
  --marca: #14204a;          /* azul marino institucional: nombre, etiquetas, iconos, franja, pips activos */
  --marca-rgb: 20 32 74;
  --oro: #a8832e;            /* dorado: filetes, aro de la imagen, regla del nombre, cruces de las ilustraciones (decorativo; sin texto) */
  --oro-rgb: 168 131 46;
  --acento: #a8832e;         /* alias que leen las ilustraciones SVG de respaldo */
  --marfil: #fcfaf5;         /* marfil del lienzo (arriba) y del marco de la imagen */
  --fondo: #fcfaf5;
  --fondo-2: #f4efe4;        /* marfil mas calido (abajo) */
  --chip: #eeeae0;           /* fondo del chip de ubicacion */
  --linea: #e1d6bd;          /* filetes suaves (oro al 30 % sobre marfil) */
  --pip: #cbccd2;            /* pips inactivos */
  --texto: #222d47;          /* valores: fechas y lugares */
  --texto-2: #4f5c73;        /* gris azulado: Falleció, fecha, pie, mensaje */
  --ok: #2f7d52;
  --alerta: #a85208;
  --error: #a8261c;

  --sans: "Poppins", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --salida: ease;
  --d-salida: 700ms;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html.cartelera, html.cartelera body { height: 100%; overflow: hidden; }
html.cartelera body {
  background-color: var(--fondo);
  background-image: linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%);
  color: var(--texto); font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgb(var(--marca-rgb) / .16); color: var(--texto); }
html.cartelera body.sin-cursor, html.cartelera body.sin-cursor * { cursor: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { display: block; fill: currentColor; flex: none; }
/* ---------- Lienzo 16:9 ---------- */
html.cartelera #lienzo { position: absolute; left: 50%; top: 50%; width: calc(177.78 * var(--u)); height: calc(100 * var(--u)); transform: translate(-50%, -50%); }
/* ---------- Cabecera: franja + marca (logo y nombre de la funeraria) + fecha y hora ---------- */
html.cartelera #franja { position: absolute; left: 0; right: 0; top: 0; height: calc(.9 * var(--u)); background: var(--marca); }
html.cartelera #cabecera { position: absolute; left: calc(9 * var(--u)); right: calc(9 * var(--u)); top: calc(3.6 * var(--u)); height: calc(10 * var(--u)); display: flex; align-items: center; justify-content: space-between;
  border-bottom: calc(.2 * var(--u)) solid rgb(var(--oro-rgb) / .6); padding-bottom: calc(1.6 * var(--u)); }
html.cartelera #marca { display: flex; align-items: center; min-width: 0; }
html.cartelera #logo { height: calc(8.2 * var(--u)); max-width: calc(31 * var(--u)); object-fit: contain; display: block; flex: none; }
html.cartelera #logo:not([hidden]) + #marca-texto { margin-left: calc(3.2 * var(--u)); padding-left: calc(3.2 * var(--u)); border-left: calc(.2 * var(--u)) solid rgb(var(--oro-rgb) / .6); }
html.cartelera #funeraria-nombre { font-size: calc(3.7 * var(--u)); font-weight: 500; line-height: 1.2; color: var(--marca); letter-spacing: .005em; }
html.cartelera #reloj-bloque { text-align: right; flex: none; }
html.cartelera #fecha { font-size: calc(2.8 * var(--u)); color: var(--texto-2); line-height: 1.2; }
html.cartelera #reloj { font-size: calc(5.2 * var(--u)); font-weight: 600; line-height: 1.1; color: var(--marca); font-variant-numeric: lining-nums tabular-nums; }
html.cartelera #reloj small { font-size: .5em; font-weight: 500; color: var(--texto-2); margin-left: .3em; }
/* ---------- Escenario ---------- */
html.cartelera #escenario { position: absolute; left: calc(9 * var(--u)); right: calc(9 * var(--u)); top: calc(15.6 * var(--u)); bottom: calc(7.4 * var(--u)); }
/* Tres niveles de densidad (los fija el script, igual que en v2: normal -> denso -> compacto). Cada nivel solo cambia estas variables (cantidades en u, sin unidad). */
html.cartelera .servicio {
  --circ: 48; --rel: 1; --rad: 3.2; --fal: 3.8; --t-chip: 3.5; --etq: 3.4; --val: 4.0; --g-chip: 2.2; --g-bl: 2.6; --g-fila: 2; --msj: 5; --tmsj: 3.5;
  --n1: 11.2; --n2: 9.8; --n3: 8.6; --n4: 7.6;
  position: absolute; inset: 0;
  display: grid; grid-template-columns: calc((var(--circ) + 3) * var(--u)) minmax(0, 1fr); column-gap: calc(8 * var(--u)); align-items: center;
}
html.cartelera .servicio.denso { --circ: 42; --rad: 2.8; --fal: 3.6; --t-chip: 3.5; --etq: 3.2; --val: 3.8; --g-chip: 1.8; --g-bl: 2.6; --g-fila: 2; --msj: 4; --tmsj: 3.3; --n1: 11; --n2: 9.6; --n3: 8.4; --n4: 7.2; }
html.cartelera .servicio.compacto { --circ: 32; --rad: 2.6; --fal: 3.2; --t-chip: 3.3; --etq: 3; --val: 3.4; --g-chip: 1.2; --g-bl: 1.4; --g-fila: 1.2; --msj: 3; --tmsj: 2.9; --n1: 9.4; --n2: 8.4; --n3: 7.4; --n4: 6.4; column-gap: calc(6 * var(--u)); }
html.cartelera .servicio.compacto .chip { padding-top: calc(.5 * var(--u)); padding-bottom: calc(.5 * var(--u)); }
html.cartelera .servicio.compacto .bloque { padding-top: calc(1.1 * var(--u)); }
html.cartelera .servicio.compacto .val { margin-top: calc(.5 * var(--u)); line-height: 1.24; }
html.cartelera .servicio.compacto .nombre { line-height: 1.06; }
html.cartelera .identidad:empty { display: none; }
/* ---------- Encuadre uniforme de la imagen (foto del fallecido, imagen conmemorativa y SVG de respaldo): circulo,
   marco marfil de .9 u, aro dorado de .3 u y sombra discreta. Todo con box-shadow: sin marcado extra. ---------- */
html.cartelera .identidad { display: flex; flex-direction: column; align-items: center; gap: calc(4.2 * var(--u)); min-width: 0; }
html.cartelera .circulo { position: relative; width: calc(var(--circ) * var(--u)); height: calc(var(--circ) * var(--rel) * var(--u)); border-radius: calc(var(--rad) * var(--u)); overflow: hidden; flex: none; background: var(--chip);
  box-shadow: 0 0 0 calc(.9 * var(--u)) var(--marfil), 0 0 0 calc(1.2 * var(--u)) var(--oro), 0 calc(1.4 * var(--u)) calc(3.6 * var(--u)) rgb(var(--marca-rgb) / .18); }
html.cartelera .circulo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(.15 * var(--u)) rgb(var(--marca-rgb) / .22); pointer-events: none; }
html.cartelera .circulo { --ilu-fondo: var(--chip); }
/* las ilustraciones SVG pintan su propio disco con este tinte; --marca y --acento los heredan de :root */
html.cartelera .circulo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
html.cartelera .circulo img.foto { object-position: 50% 32%; }
/* retratos: favorece el tercio superior (la cabeza) */
html.cartelera .circulo img.imagen { object-position: var(--foco, 50% 50%); }
/* imagenes conmemorativas: punto focal por archivo (lo fija ilustracion()) */
html.cartelera .circulo svg { width: 100%; height: 100%; display: block; transform: scale(1.16); }
/* el SVG de respaldo es un medallon circular: llena el marco (escala 1,16: el disco cubre los lados y solo quedan las esquinas en el tinte del marco) */
html.cartelera .mensaje { max-width: calc(var(--circ) * var(--u)); text-align: center; font-family: var(--serif); font-size: calc(var(--tmsj) * var(--u)); font-weight: 500; line-height: 1.38; color: var(--texto-2); text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--msj); overflow: hidden; }
/* unico texto que puede truncarse (elipsis) */
/* ---------- Datos ---------- */
html.cartelera .datos { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
html.cartelera .nombre { font-family: var(--serif); font-weight: 600; color: var(--marca); line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: break-word; font-size: calc(var(--nom) * var(--u)); --nom: var(--n2); }
html.cartelera .nombre.n-1 { --nom: var(--n1); }
html.cartelera .nombre.n-2 { --nom: var(--n2); }
html.cartelera .nombre.n-3 { --nom: var(--n3); }
html.cartelera .nombre.n-4 { --nom: var(--n4); line-height: 1.06; }
html.cartelera .nombre::after { content: ""; display: block; width: calc(11 * var(--u)); height: calc(.35 * var(--u)); background: var(--oro); margin-top: calc(1.7 * var(--u)); }
html.cartelera .fallecio { margin-top: calc(1.5 * var(--u)); font-size: calc(var(--fal) * var(--u)); font-weight: 400; color: var(--texto-2); line-height: 1.3; }
html.cartelera .servicio.denso .fallecio, html.cartelera .servicio.compacto .fallecio { margin-top: calc(1.1 * var(--u)); }
html.cartelera .servicio.compacto .nombre::after { margin-top: calc(.9 * var(--u)); }
html.cartelera .chip { margin-top: calc(var(--g-chip) * var(--u)); align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: calc(1.6 * var(--u));
  background: var(--chip); color: var(--marca); border: calc(.15 * var(--u)) solid rgb(var(--oro-rgb) / .45); border-radius: calc(4.4 * var(--u)); padding: calc(1.5 * var(--u)) calc(3.4 * var(--u)) calc(1.5 * var(--u)) calc(2.8 * var(--u));
  font-size: calc(var(--t-chip) * var(--u)); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
html.cartelera .compacto .chip > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html.cartelera .chip .ico { width: calc(var(--t-chip) * 1.15 * var(--u)); height: calc(var(--t-chip) * 1.15 * var(--u)); }
/* ---------- Bloques: velacion, misa, inhumacion, destino. Rejilla de 2 columnas iguales; cada bloque = filete dorado + icono lineal + etiqueta + valor ---------- */
html.cartelera .bloques { margin-top: calc(var(--g-bl) * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--g-fila) * var(--u)) calc(5 * var(--u)); list-style: none; }
html.cartelera .bloque { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(1.5 * var(--u)); align-items: center; align-content: start;
  border-top: calc(.18 * var(--u)) solid rgb(var(--oro-rgb) / .55); padding-top: calc(1.4 * var(--u)); }
html.cartelera .bloque > div { display: contents; }
html.cartelera .bloque > .ico { width: calc(var(--etq) * 1.25 * var(--u)); height: calc(var(--etq) * 1.25 * var(--u)); color: var(--marca); }
html.cartelera .etq { font-size: calc(var(--etq) * var(--u)); font-weight: 600; line-height: 1.3; color: var(--marca); letter-spacing: .01em; }
html.cartelera .val { grid-column: 1 / -1; margin-top: calc(1 * var(--u)); font-size: calc(var(--val) * var(--u)); font-weight: 400; line-height: 1.3; color: var(--texto); font-variant-numeric: lining-nums; overflow-wrap: anywhere; text-wrap: pretty; }
html.cartelera .val .l { display: block; }
html.cartelera .val .flecha { display: inline-block; width: 1.05em; height: .72em; margin-right: .3em; vertical-align: -.02em; color: var(--marca); }
html.cartelera .val .lugar { display: block; margin-top: calc(.3 * var(--u)); }
html.cartelera .compacto .val .l { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* lugares largos: 2 lineas con elipsis solo en compacto */
/* ---------- QR del evento (ADIAU): esquina inferior derecha del escenario; reserva espacio al pie de .datos ---------- */
html.cartelera .servicio { --qr: 17; }
html.cartelera .servicio.denso, html.cartelera .servicio.compacto { --qr: 15; }
html.cartelera .qr { position: absolute; right: 0; bottom: 0; width: calc(var(--qr) * var(--u)); height: calc(var(--qr) * var(--u)); background: #fff; border-radius: calc(1 * var(--u)); box-shadow: 0 0 0 calc(.15 * var(--u)) rgb(var(--oro-rgb) / .45); overflow: hidden; }
html.cartelera .qr svg { display: block; width: 100%; height: 100%; }
html.cartelera .con-qr .datos { padding-bottom: calc((var(--qr) + 1.5) * var(--u)); }
/* ---------- Estados vacio / configuracion ---------- */
html.cartelera .servicio.estado { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; }
html.cartelera .estado .regla { width: calc(12 * var(--u)); height: calc(.35 * var(--u)); background: var(--oro); margin-bottom: calc(4.4 * var(--u)); }
html.cartelera .estado .titulo { max-width: calc(120 * var(--u)); font-family: var(--serif); font-size: calc(8 * var(--u)); font-weight: 600; line-height: 1.12; color: var(--marca); text-wrap: balance; }
html.cartelera .estado .sub { max-width: calc(100 * var(--u)); margin-top: calc(2.6 * var(--u)); font-size: calc(3.8 * var(--u)); line-height: 1.4; color: var(--texto-2); text-wrap: balance; }
/* ---------- Pie ---------- */
html.cartelera #pie { position: absolute; left: calc(9 * var(--u)); right: calc(9 * var(--u)); bottom: calc(2.6 * var(--u)); height: calc(3.4 * var(--u)); display: flex; align-items: center; gap: calc(1.4 * var(--u)); font-size: calc(2.7 * var(--u)); color: var(--texto-2); }
html.cartelera .punto { width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); border-radius: 50%; background: var(--ok); flex: none; }
html.cartelera .punto.error { background: transparent; box-shadow: inset 0 0 0 calc(.32 * var(--u)) var(--alerta); }
html.cartelera #indicador { margin-left: auto; display: flex; align-items: center; gap: calc(2.2 * var(--u)); }
html.cartelera #indicador .pips { display: flex; align-items: center; gap: calc(1 * var(--u)); }
html.cartelera #indicador .pip { width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); border-radius: 999px; background: var(--pip); }
html.cartelera #indicador .pip.activo { width: calc(3.8 * var(--u)); background: var(--marca); }
html.cartelera #indicador .cuenta { font-weight: 500; font-variant-numeric: tabular-nums; }
/* ---------- Movimiento: solo fundido sereno, sin desplazamientos (diseno-ui.md secc. 7) ---------- */
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }
@keyframes salir { from { opacity: 1; } to { opacity: 0; } }
html.cartelera .servicio { animation: fundir 900ms var(--salida) both; }
html.cartelera .servicio.saliendo { animation: salir var(--d-salida) var(--salida) both; }
@media (prefers-reduced-motion: reduce) {
  :root { --d-salida: 300ms; }
  html.cartelera .servicio { animation: fundir 300ms linear both; }
  html.cartelera .servicio.saliendo { animation: salir 300ms linear both; }
}

/* ================= INICIO ================= */
html.inicio { --tarjeta: #fffdf9; --borde: #77839a; --sombra: 0 .15rem .5rem rgb(var(--marca-rgb) / .06), 0 .9rem 2.6rem rgb(var(--marca-rgb) / .12); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: clamp(15px, 2vh, 40px); }
html.inicio body {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
  background-color: var(--fondo); background-image: linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%);
  color: var(--texto); font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
::selection { background: rgb(var(--marca-rgb) / .16); color: var(--texto); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- Tarjeta ---------- */
html.inicio .tarjeta { width: min(100%, 30rem); background: var(--tarjeta); border: 1px solid rgb(var(--oro-rgb) / .35); border-radius: 1.4rem; box-shadow: var(--sombra); padding: 2.4rem 2.6rem 2.3rem; display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; }
html.inicio .cabecera { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
/* Sello: ahora es una placa de logo SIN recorte circular (el logo conserva su proporcion). El mismo #circulo del marcado. */
html.inicio .circulo { width: 100%; height: 5.4rem; display: grid; place-items: center; overflow: visible; background: none; }
html.inicio .circulo svg { width: 5.6rem; height: 5.6rem; display: block; }
html.inicio .circulo img { height: 5.2rem; width: auto; max-width: 100%; object-fit: contain; display: block; }
html.inicio .titulo-app { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.15; color: var(--marca); text-wrap: balance; }
html.inicio .titulo-app::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--oro); margin: .8rem auto 0; }
html.inicio .saludo { font-size: 1.1rem; font-weight: 400; line-height: 1.35; color: var(--texto-2); }
html.inicio .vista { display: flex; flex-direction: column; gap: 1.3rem; }
html.inicio .estado-carga { text-align: center; font-size: 1.15rem; color: var(--texto-2); padding: 1rem 0; }
html.inicio .campo { display: flex; flex-direction: column; gap: .5rem; }
html.inicio .campo label { font-size: 1rem; font-weight: 600; color: var(--marca); }
html.inicio .entrada, html.inicio .selector select {
  width: 100%; height: 3.5rem; padding: 0 1.2rem; font: inherit; font-size: 1.1rem; color: var(--texto);
  background: var(--tarjeta); border: 1.5px solid var(--borde); border-radius: .9rem; color-scheme: light;
}
html.inicio .entrada::placeholder { color: var(--texto-2); }
html.inicio .selector { position: relative; }
html.inicio .selector select { appearance: none; -webkit-appearance: none; padding-right: 3rem; cursor: pointer; }
html.inicio .selector::after { content: ""; position: absolute; right: 1.4rem; top: 50%; width: .6rem; height: .6rem; border-right: 2px solid var(--marca); border-bottom: 2px solid var(--marca); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
html.inicio .selector select:disabled { color: var(--texto-2); background: var(--chip); border-color: var(--linea); cursor: not-allowed; }
html.inicio .selector:has(select:disabled)::after { border-color: var(--texto-2); opacity: .6; }
html.inicio .entrada:hover, html.inicio .selector select:not(:disabled):hover { border-color: var(--marca); }
html.inicio .entrada:focus-visible, html.inicio .selector select:focus-visible, html.inicio .boton:focus-visible, html.inicio .enlace:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; }
html.inicio .entrada:focus-visible, html.inicio .selector select:focus-visible { border-color: var(--marca); }
html.inicio .entrada[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
html.inicio .error-linea { display: flex; gap: .6rem; align-items: flex-start; color: var(--error); font-size: 1rem; line-height: 1.4; }
html.inicio .error-linea:empty { display: none; }
html.inicio .error-linea svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; }
html.inicio .boton { height: 3.6rem; font: inherit; font-size: 1.1rem; font-weight: 600; cursor: pointer; color: var(--tarjeta); background: var(--marca); border: 0; border-radius: .9rem; box-shadow: 0 .2rem .7rem rgb(var(--marca-rgb) / .25); letter-spacing: .01em; }
html.inicio .boton:hover:not(:disabled) { background: #1f2f66; }
html.inicio .boton:active:not(:disabled) { transform: translateY(1px); background: #101a3d; }
html.inicio .boton:disabled { cursor: not-allowed; color: var(--texto-2); background: #e6e1d4; box-shadow: none; }
html.inicio .enlace { align-self: center; font: inherit; font-size: 1rem; font-weight: 500; color: var(--marca); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; padding: .5rem .8rem; border-radius: .6rem; }
html.inicio .enlace:hover { color: #1f2f66; }
@media (max-width: 520px) {
  html.inicio body { padding: 1rem .6rem; }
  html.inicio .tarjeta { padding: 2rem 1.4rem 1.8rem; border-radius: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}