/* ============================================================
   Syntryx AI · hoja de estilo
   Hereda el mundo de la casa (syntryx-core/index.html): carbón,
   papel y un solo acento ámbar; Instrument Serif para nombres y
   titulares, JetBrains Mono para registros y rótulos, la sans del
   sistema para leer. Filetes de 1 px, ningún radio, ninguna sombra.
   Tipografía autoalojada: cero peticiones a terceros.
   ============================================================ */

@font-face{
  font-family:"Instrument Serif";
  src:url("fuentes/instrument-serif-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("fuentes/instrument-serif-400i.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fuentes/jetbrains-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
/* reserva del titular, como en la casa: la Georgia del sistema a la anchura
   de la Instrument Serif, para que el h1 no salte mientras llega la fuente */
@font-face{
  font-family:"Instrument Serif Reserva";
  src:local("Georgia");
  size-adjust:75%;
}

:root{
  /* --- color (los de la casa) -------------------------------- */
  --carbon:#08090B;
  --carbon-alto:#0E1013;
  --cimiento:#05070A;
  --regla:#1F2429;
  --regla-viva:#2E3640;
  --papel:#ECE9E4;
  --papel-medio:#9BA1A6;       /* 7,5:1 sobre carbón */
  --papel-tenue:#7A8085;       /* 4,9:1 sobre carbón */
  --vacio:#6B7478;             /* raya del campo vacío */
  --ambar:#C8873A;             /* 6,6:1 sobre carbón */
  --ambar-velo:rgba(200,135,58,.14);
  --puntos:#56606A;            /* los puntos de la carta: se ven, no compiten */

  /* --- familias ---------------------------------------------- */
  --serif:"Instrument Serif","Instrument Serif Reserva",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* --- escala tipográfica ------------------------------------ */
  --fs-3xs:11px;
  --fs-2xs:12px;
  --fs-xs:13px;
  --fs-s:15px;
  --fs-m:17px;
  --fs-l:21px;
  --fs-xl:26px;
  --fs-2xl:33px;
  --fs-h1:clamp(42px,6.2vw,90px);
  --fs-h2:clamp(34px,4.4vw,58px);
  --fs-plato:clamp(26px,2.5vw,34px);
  --fs-sub:clamp(18px,1.6vw,21px);
  --fs-mail:clamp(34px,6.4vw,92px);

  /* --- espaciado ---------------------------------------------- */
  --e1:8px;
  --e2:12px;
  --e3:16px;
  --e4:24px;
  --e5:32px;
  --e6:48px;
  --e7:72px;
  --e8:96px;
  --pad:clamp(20px,5vw,72px);
  --max:1320px;
  --sec-y:clamp(80px,13vh,136px);
  --folio-h:56px;

  /* una sola curva para todo lo que se mueve */
  --salida:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--folio-h) + var(--e3));
  scrollbar-color:var(--regla-viva) var(--carbon);
}

body{
  margin:0;
  background:var(--carbon);
  color:var(--papel-medio);
  font-family:var(--sans);
  font-size:var(--fs-m);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

::selection{background:var(--ambar);color:var(--carbon)}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--papel);
  margin:0;
  text-wrap:balance;
}
p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
svg{display:inline-block}

:is(a,button,summary):focus-visible{outline:2px solid var(--ambar);outline-offset:3px}
main:focus{outline:none}

/* oculto a la vista, legible por lector de pantalla */
.vh{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--carbon-alto);color:var(--papel);
  padding:var(--e2) var(--e3);
  font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--regla);text-decoration:none;
}
.skip:focus{left:var(--e2);top:var(--e2)}

/* --- enlace de la casa: texto con subrayado ámbar que crece ---- */
.link{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:.04em;
  color:var(--papel);
  text-decoration:none;
  background:linear-gradient(var(--ambar),var(--ambar)) 0 100%/0 1px no-repeat;
  padding-bottom:3px;
  transition:background-size .3s var(--salida);
}
.link:hover,.link:focus-visible{background-size:100% 1px}

.flecha{
  width:.85em;height:.85em;
  margin-left:.45em;
  vertical-align:-.06em;
  fill:none;stroke:var(--ambar);stroke-width:1.5;
  stroke-linecap:square;
  transition:transform .3s var(--salida);
}
a:hover .flecha,a:focus-visible .flecha{transform:translateX(3px)}
.flecha-abajo{transform:rotate(90deg)}
a:hover .flecha-abajo,a:focus-visible .flecha-abajo{transform:rotate(90deg) translateX(3px)}

/* el texto corrido enlaza en papel con el filete ámbar */
.texto a{color:var(--papel);text-decoration-color:var(--ambar)}
.texto a:hover{text-decoration-thickness:2px}

/* ============================================================
   BARRA DE FOLIO
   ============================================================ */
.folio{
  position:sticky;top:0;z-index:40;
  height:var(--folio-h);
  background:var(--carbon);
  border-bottom:1px solid var(--regla);
}
.folio .wrap{
  height:100%;
  display:flex;align-items:center;gap:var(--e5);
}
/* la marca es el nombre bien compuesto, sin símbolo: la regla de la casa */
.marca{
  font-family:var(--serif);
  font-size:22px;
  line-height:1;
  letter-spacing:-.005em;
  word-spacing:.1em;
  color:var(--papel);
  text-decoration:none;
  white-space:nowrap;
  margin-right:auto;
}
.folio nav ul{display:flex;align-items:baseline;gap:var(--e5)}
.folio .link{white-space:nowrap}
.idioma{
  display:flex;align-items:baseline;gap:.55em;
  font-family:var(--mono);font-size:var(--fs-3xs);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--regla-viva);
}
.idioma a{color:var(--papel-tenue);text-decoration:none}
.idioma a:hover{color:var(--papel)}
.idioma [aria-current]{color:var(--papel)}

/* ============================================================
   PORTADA · titular, entrada y el registro que se escribe solo
   ============================================================ */
.portada{padding:clamp(48px,9vh,104px) 0 0}
.portada-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--e5);
  row-gap:var(--e5);
  align-items:end;
}
.portada h1{
  grid-column:1 / span 8;
  font-size:var(--fs-h1);
  line-height:.98;
  letter-spacing:-.02em;
}
.portada-lado{
  grid-column:9 / span 4;
  display:grid;
  gap:var(--e5);
  padding-bottom:.55em;
}
.entrada{
  font-size:var(--fs-sub);
  line-height:1.55;
  color:var(--papel-medio);
  max-width:40ch;
}
.acciones{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e3) var(--e5)}
.accion{
  font-family:var(--serif);
  font-size:clamp(25px,2.2vw,31px);
  line-height:1.1;
  color:var(--papel);
  text-decoration:none;
  background:linear-gradient(var(--ambar),var(--ambar)) 0 100%/100% 1px no-repeat;
  padding-bottom:6px;
  transition:background-size .3s var(--salida);
}
.accion:hover,.accion:focus-visible{background-size:100% 3px}

/* --- el registro: lo que deja cada sistema, con datos sintéticos --- */
.registro{margin-top:clamp(48px,8vh,88px)}
.registro ol{border-top:1px solid var(--regla-viva);border-bottom:1px solid var(--regla)}
/* las columnas se miden en ch, así que cabecera y asientos comparten cuerpo:
   la cabecera achica la letra dentro de cada rótulo, no en la rejilla */
.registro-cab,
.registro li{
  display:grid;
  grid-template-columns:9ch minmax(0,1fr) 11ch 6ch 9ch 29ch;
  column-gap:var(--e4);
  align-items:baseline;
  font-family:var(--mono);
  font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;
}
.registro-cab{
  padding:var(--e2) 0 10px;
  color:var(--papel-tenue);
}
.registro-cab span{
  font-size:var(--fs-3xs);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.registro li{
  position:relative;
  padding:11px 0;
  border-top:1px solid var(--regla);
  line-height:1.45;
  color:var(--papel-medio);
  animation:asiento 1.7s var(--salida) both;
}
/* la marca ámbar que pasa por cada asiento: el registro se escribe solo */
.registro li::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--e3));
  top:9px;bottom:9px;
  width:2px;
  background:var(--ambar);
  opacity:0;
  animation:testigo 1.7s var(--salida) both;
}
.registro li:nth-child(1),.registro li:nth-child(1)::before{animation-delay:.5s}
.registro li:nth-child(2),.registro li:nth-child(2)::before{animation-delay:1.1s}
.registro li:nth-child(3),.registro li:nth-child(3)::before{animation-delay:1.7s}
.registro li:nth-child(4),.registro li:nth-child(4)::before{animation-delay:2.5s}
.registro li:nth-child(5),.registro li:nth-child(5)::before{animation-delay:3.1s}
.registro li:nth-child(6),.registro li:nth-child(6)::before{animation-delay:3.7s}
@keyframes asiento{
  0%{background-color:transparent}
  22%{background-color:var(--ambar-velo)}
  100%{background-color:transparent}
}
@keyframes testigo{
  0%{opacity:0}
  18%{opacity:1}
  100%{opacity:0}
}
.registro .que{color:var(--papel)}
.registro .det{display:contents}
.registro .estado{color:var(--papel-medio)}
.registro .espera,.registro .duda{color:var(--ambar)}
.registro .aprobado{color:var(--papel)}
.vacio{
  display:inline-block;
  width:2.4ch;height:1px;
  background:var(--vacio);
  vertical-align:.3em;
}
.registro figcaption{
  margin-top:var(--e2);
  font-family:var(--mono);
  font-size:var(--fs-2xs);
  line-height:1.6;
  color:var(--papel-tenue);
  max-width:90ch;
}

/* ============================================================
   SECCIONES
   ============================================================ */
.sec{padding-top:var(--sec-y)}
.sec-cab{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--e5);
  row-gap:var(--e3);
  align-items:end;
  padding-top:var(--e5);
  border-top:1px solid var(--regla);
  margin-bottom:clamp(40px,6vh,72px);
}
.sec-cab h2{
  grid-column:1 / span 7;
  font-size:var(--fs-h2);
  line-height:1.03;
  letter-spacing:-.014em;
}
.sec-cab p{grid-column:9 / span 4;max-width:44ch}

/* --- la carta ---------------------------------------------------- */
.carta-grupo{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--e5);
  padding:var(--e5) 0 var(--e7);
  border-top:1px solid var(--regla);
}
.carta-grupo > h3{
  grid-column:1 / span 3;
  align-self:start;
  position:sticky;
  top:calc(var(--folio-h) + var(--e4));
  font-style:italic;
  font-size:var(--fs-xl);
  line-height:1.15;
}
.platos{grid-column:4 / span 9;display:grid;gap:var(--e6)}
.plato-cab{display:flex;align-items:baseline;gap:var(--e2)}
.plato h4{font-size:var(--fs-plato);line-height:1.08;letter-spacing:-.01em}
/* los puntos de la carta: llevan del nombre a lo que cuesta */
.puntos{
  flex:1 1 auto;
  min-width:3ch;
  height:3px;
  background:radial-gradient(circle,var(--puntos) .9px,transparent 1.2px) 0 0/7px 3px repeat-x;
  transform:translateY(-.32em);
}
.precio{
  font-family:var(--mono);
  font-size:var(--fs-3xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--papel-tenue);
  white-space:nowrap;
}
.plato > p{margin-top:var(--e2);max-width:62ch}
.plato dl{
  margin-top:var(--e3);
  display:grid;
  grid-template-columns:13ch minmax(0,1fr);
  gap:6px var(--e4);
  font-size:var(--fs-s);
  line-height:1.6;
}
.plato dt{
  font-family:var(--mono);
  font-size:var(--fs-3xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--papel-tenue);
  padding-top:.3em;
}
.grupo-nota{
  grid-column:4 / span 9;
  margin-top:var(--e5);
  padding-top:var(--e3);
  border-top:1px dotted var(--regla-viva);
  font-size:var(--fs-s);
  max-width:70ch;
}

/* --- lo que va en todo ------------------------------------------- */
.principios li{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--e5);
  row-gap:var(--e2);
  padding:var(--e5) 0 var(--e5);
  border-top:1px solid var(--regla);
}
.principios h3{
  grid-column:1 / span 7;
  font-size:var(--fs-2xl);
  line-height:1.1;
  letter-spacing:-.01em;
}
.principios p{grid-column:9 / span 4;max-width:44ch}

/* --- cómo empieza un encargo: un solo hilo ámbar ------------------ */
.recorrido{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:var(--e5);
  counter-reset:paso;
}
.recorrido::before{
  content:"";
  position:absolute;
  left:0;right:0;top:10px;
  height:1px;
  background:var(--ambar);
}
/* cada paso cuelga del hilo; el número va dentro del cuadro porque el orden
   sí informa. La subrejilla alinea los párrafos aunque un título ocupe dos líneas */
.recorrido li{
  position:relative;
  padding-top:var(--e6);
  counter-increment:paso;
  display:grid;
  grid-row:span 2;
  grid-template-rows:subgrid;
}
.recorrido li::before{
  content:counter(paso);
  position:absolute;
  top:0;left:0;
  width:21px;height:21px;
  display:grid;
  place-items:center;
  background:var(--carbon);
  border:1px solid var(--ambar);
  font-family:var(--mono);
  font-size:var(--fs-3xs);
  line-height:1;
  color:var(--papel);
}
.recorrido h3{
  margin:0 0 var(--e2);
  font-size:var(--fs-xl);
  line-height:1.12;
}
.recorrido p{font-size:var(--fs-s);line-height:1.6}

/* --- preguntas ---------------------------------------------------- */
/* arranca en la columna 4, la misma de los platos de la carta:
   (ancho + hueco) / 4 es el inicio de la cuarta columna de 12 */
.preguntas{margin-left:calc((100% + var(--e5)) / 4)}
.preguntas details{border-top:1px solid var(--regla)}
.preguntas summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--e4);
  padding:var(--e4) 0;
  font-family:var(--serif);
  font-size:var(--fs-xl);
  line-height:1.2;
  color:var(--papel);
}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary:hover .cruz::before,
.preguntas summary:hover .cruz::after{background:var(--papel)}
/* la cruz se dibuja: dos filetes, uno gira al abrir */
.cruz{position:relative;flex:0 0 14px;width:14px;height:14px;align-self:center}
.cruz::before,.cruz::after{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:var(--ambar);
  transition:transform .35s var(--salida),background-color .2s;
}
.cruz::after{transform:rotate(90deg)}
.preguntas details[open] .cruz::after{transform:rotate(0)}
.preguntas details p{padding:0 0 var(--e4);max-width:66ch}

/* --- contacto: el cimiento de la página --------------------------- */
.contacto{
  margin-top:var(--sec-y);
  background:var(--cimiento);
  border-top:1px solid var(--regla);
  padding:clamp(72px,14vh,144px) 0;
}
.contacto h2{
  font-size:var(--fs-h2);
  line-height:1.03;
  letter-spacing:-.014em;
  max-width:16ch;
}
.contacto p{margin-top:var(--e4);max-width:52ch}
.mail{
  display:inline-block;
  margin-top:clamp(36px,6vh,64px);
  font-family:var(--serif);
  font-size:var(--fs-mail);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--papel);
  text-decoration:none;
  background:linear-gradient(var(--ambar),var(--ambar)) 0 100%/100% 2px no-repeat;
  padding-bottom:.06em;
  overflow-wrap:anywhere;
  transition:background-size .35s var(--salida);
}
.mail:hover,.mail:focus-visible{background-size:100% 5px}
.contacto .nota{
  margin-top:var(--e4);
  font-family:var(--mono);
  font-size:var(--fs-2xs);
  letter-spacing:.02em;
  color:var(--papel-tenue);
}

/* --- pie ------------------------------------------------------------ */
.pie{border-top:1px solid var(--regla);padding:var(--e6) 0 var(--e5);font-size:var(--fs-s)}
.pie-cols{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--e5);
  row-gap:var(--e5);
}
.pie-marca{grid-column:1 / span 6}
.pie-marca .marca{font-size:28px}
.pie-marca p{margin-top:var(--e2);max-width:38ch}
.pie-col{grid-column:span 2}
.pie-col h2{
  font-family:var(--mono);
  font-size:var(--fs-3xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--papel-tenue);
  margin-bottom:var(--e2);
}
.pie-col a{color:var(--papel);text-decoration:none}
.pie-col a:hover{text-decoration:underline;text-decoration-color:var(--ambar)}
.pie-final{
  margin-top:var(--e6);
  padding-top:var(--e4);
  border-top:1px solid var(--regla);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e2) var(--e4);
  font-family:var(--mono);
  font-size:var(--fs-2xs);
  color:var(--papel-tenue);
}

/* --- páginas de texto: aviso legal y error ------------------------- */
.doc{padding:clamp(48px,9vh,104px) 0 var(--sec-y)}
.doc-cuerpo{max-width:74ch}
.doc h1{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.014em}
.doc h2{font-size:var(--fs-xl);line-height:1.2;margin-top:var(--e6)}
.doc p,.doc ul{margin-top:var(--e3)}
.doc ul{list-style:disc;padding-left:1.15em}
.doc li{margin-top:6px}
.doc li::marker{color:var(--ambar)}
.doc dl{
  margin-top:var(--e4);
  display:grid;
  grid-template-columns:16ch minmax(0,1fr);
  gap:8px var(--e4);
}
.doc dt{
  font-family:var(--mono);
  font-size:var(--fs-3xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--papel-tenue);
  padding-top:.4em;
}
.doc dd{color:var(--papel)}
.doc .fecha{
  margin-top:var(--e6);
  font-family:var(--mono);
  font-size:var(--fs-2xs);
  color:var(--papel-tenue);
}

/* ============================================================
   ADAPTACIÓN
   ============================================================ */
@media (max-width:1100px){
  .registro-cab,.registro li{grid-template-columns:9ch minmax(0,1fr) 11ch 9ch 27ch}
  .registro .region{display:none}
}
@media (max-width:980px){
  .portada h1,.portada-lado{grid-column:1 / -1}
  .portada-lado{padding-bottom:0}
  .recorrido{grid-template-columns:1fr}
  .recorrido::before{left:10px;right:auto;top:10px;bottom:10px;width:1px;height:auto}
  .recorrido li{display:block;grid-row:auto;padding:0 0 var(--e5) var(--e6)}
  .recorrido li:last-child{padding-bottom:0}
  .recorrido li::before{top:3px}
}
@media (max-width:960px){
  .folio nav .opcional{display:none}
}
@media (max-width:860px){
  .sec-cab h2,.sec-cab p{grid-column:1 / -1}
  .preguntas{margin-left:0}
  /* el grupo manda sobre el plato: con los dos a 26 px, el grupo se leía como rótulo */
  .carta-grupo > h3{position:static;grid-column:1 / -1;font-size:var(--fs-2xl);margin-bottom:var(--e5)}
  .platos,.grupo-nota{grid-column:1 / -1}
  .principios h3,.principios p{grid-column:1 / -1}
  .pie-marca{grid-column:1 / -1}
  .pie-col{grid-column:span 4}
}
@media (max-width:760px){
  .registro-cab{display:none}
  .registro li{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"hora estado" "que que" "det det";
    row-gap:4px;
    padding:var(--e2) 0;
  }
  .registro .hora{grid-area:hora}
  .registro .estado{grid-area:estado;text-align:right}
  .registro .que{grid-area:que}
  .registro .det{
    grid-area:det;
    display:flex;flex-wrap:wrap;gap:0 2ch;
    font-size:var(--fs-2xs);
    color:var(--papel-tenue);
  }
  .registro .region{display:inline}
  .registro .det .vacio{display:none}
  .registro li::before{left:-10px}
  .plato dl{grid-template-columns:1fr;gap:2px}
  .plato dd + dt{margin-top:var(--e2)}
  .doc dl{grid-template-columns:1fr;gap:2px}
  .doc dd + dt{margin-top:var(--e2)}
}
@media (max-width:520px){
  .pie-col{grid-column:1 / -1}
  /* el nombre ocupa su línea y los puntos llevan al precio en la siguiente:
     en el móvil la carta sigue siendo carta */
  .plato-cab{flex-wrap:wrap;row-gap:var(--e1)}
  .plato h4{flex:1 0 100%}
}

/* alto contraste de Windows: el forzado borra fondos y degradados, que es como
   están dibujados los subrayados, los puntos de la carta, el hilo del recorrido
   y la cruz de las preguntas. Se devuelven con colores del sistema, como en la casa */
@media (forced-colors:active){
  .link,.accion,.mail{text-decoration:underline;background:none}
  :is(a,button,summary,[tabindex]:not(main)):focus-visible{outline:2px solid Highlight}
  .puntos,.vacio,.recorrido::before,.recorrido li::before,
  .cruz::before,.cruz::after,.registro li::before{forced-color-adjust:none}
  .puntos{background:radial-gradient(circle,CanvasText .9px,transparent 1.2px) 0 0/7px 3px repeat-x}
  .vacio,.recorrido::before,.cruz::before,.cruz::after{background:CanvasText}
  .recorrido li::before{background:Canvas;border-color:CanvasText;color:CanvasText}
  .registro li::before{background:Highlight}
}

/* el movimiento es un adorno: quien lo pide, se queda sin él */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}