@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ============================================================================
   TCLEX ABOGADOS · CAPA DE HERENCIA 2020 → 2026
   /web-assets/css/tclex-herencia.css
   ----------------------------------------------------------------------------
   QUÉ ES: una capa de ARMONIZACIÓN, no un rediseño. Se carga DESPUÉS de
   style.css y mobile.css en las 75 páginas que conservan el HTML de 2020
   (63 notas de /blog-detail/<n>/ y 12 fichas de /nuestro-equipo/<slug>/) y
   traduce su tipografía, escala, color, filetes y ritmo vertical al lenguaje
   de /web-assets/css/tclex-2026.css SIN TOCAR EL MARKUP.

   ── CÓMO SE USA ────────────────────────────────────────────────────────────
     <link rel="stylesheet" type="text/css" href="/web-assets/css/style.css">
     <link rel="stylesheet" type="text/css" href="/web-assets/css/mobile.css">
     <link rel="stylesheet" type="text/css" href="/web-assets/css/tclex-herencia.css">
   El orden importa: esta hoja gana por cascada, no por !important (salvo donde
   mobile.css usa !important, que está marcado caso por caso más abajo).

   ── LO QUE MODULA ──────────────────────────────────────────────────────────
   1. Familia y escala:  EB Garamond en titulares, Lato en prosa, Modena sólo
      en microetiquetas versaleadas.  Misma escala fluida (--txt-*) que 2026.
   2. Color:  el gris #868686 / #8B8B8B de 2020 pasa a --tinta-suave; el verde
      #22B89F de los botones pasa a --verde-marca / --verde-acento; los fondos
      #E5E5E5 pasan a blanco y --verde-papel.
   3. Filetes:  ni sombras ni bordes redondeados. Hairlines de --gris-linea.
   4. Medida de lectura:  el cuerpo de la nota se ciñe a --medida (38em).
   5. Ritmo vertical:  aire fluido (clamp) en cabeceras, cuerpo y pie.
   6. Portadas rotas:  #blogBack1 y #teamDetailsBack1 apuntaban a JPG/PNG que
      ya no existen; se resuelven con degradado + trama de rombos en CSS.
   7. Imágenes rotas:  ver bloque 9. Ningún recuadro roto, ningún icono de
      imagen ausente, ningún texto alternativo suelto.
   ========================================================================= */


/* 1 ─ FUENTE PROPIA ────────────────────────────────────────────────────────
   Modena-Sans.otf es UNA sola cara estática. Se redeclara aquí porque estas
   páginas no cargan tclex-2026.css. (style.css la declara como 'modenaSans';
   mantenemos ese alias vivo y añadimos el nombre nuevo.) */
@font-face{
  font-family:'modena';
  src:url('/web-assets/fonts/Modena-Sans.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* 2 ─ TOKENS (idénticos a tclex-2026.css) ────────────────────────────────── */
:root{
  --verde-marca:#035144;
  --verde-acento:#008972;
  --azul-profundo:#264c59;
  --gris-linea:#e5e5e5;
  --gris-claro:#d4d4d4;
  --tinta:#191919;
  --tinta-suave:#313131;
  --blanco:#ffffff;

  --verde-tinta:#023a31;
  --verde-niebla:#eef2f1;
  --verde-papel:#f7f9f8;
  --menta:#8fd6c7;
  --gris-lectura:#5b5b5b;
  --blanco-suave:#e8f0ee;
  --linea-inversa:rgba(255,255,255,.22);

  --c-fondo:var(--blanco);
  --c-texto:var(--tinta-suave);
  --c-titulo:var(--tinta);
  --c-suave:var(--gris-lectura);
  --c-linea:var(--gris-linea);
  --c-marca:var(--verde-marca);

  --display:'EB Garamond','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Lato',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --marca:'modena','modenaSans','Lato',system-ui,sans-serif;

  --txt-xs:.6875rem;
  --txt-sm:clamp(.8125rem,.79rem + .1vw,.875rem);
  --txt-base:clamp(.9375rem,.9rem + .2vw,1.0625rem);
  --txt-md:clamp(1.0625rem,1rem + .32vw,1.25rem);
  --txt-lg:clamp(1.2rem,1.05rem + .65vw,1.6rem);
  --txt-xl:clamp(1.5rem,1.2rem + 1.35vw,2.35rem);
  --txt-2xl:clamp(1.8rem,1.3rem + 2.15vw,3.1rem);
  --txt-3xl:clamp(2.2rem,1.35rem + 3.9vw,4.35rem);

  --margen:clamp(1.25rem,4.2vw,5.5rem);
  --medida:38em;
  --aire:clamp(2.5rem,5vw,5rem);
  --aire-sec:clamp(3.25rem,6.5vw,7rem);

  /* alto reservado por la navbar fija de Bootstrap */
  --nav-h:clamp(3.75rem,6vw,4.75rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.5s;
}

/* 3 ─ BASE ────────────────────────────────────────────────────────────────
   style.css impone `*{font-family:latoRegular}` y la cara Lato-Regular.ttf
   ya no está en /web-assets/fonts/, de modo que hoy TODO cae al tipo por
   defecto del navegador. `body *` (0,0,1) gana a `*` (0,0,0) sin !important.
   Las reglas de titular van DESPUÉS a propósito: empatan en especificidad y
   ganan por orden. */
body,
body *,
.latoo,
.modal-body{font-family:var(--sans)}

body{
  background:var(--blanco);
  color:var(--c-texto);
  font-size:var(--txt-base);
  font-weight:400;
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--c-titulo);
  overflow-wrap:break-word;
}
h1 em,h2 em,h3 em,h4 em{font-style:italic;color:var(--c-marca)}
strong,b{font-weight:700}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
::selection{background:var(--verde-marca);color:#fff}
:focus-visible{outline:2px solid var(--verde-acento);outline-offset:3px}

hr,.hrLong{border:0;border-bottom:1px solid var(--gris-linea);width:100%}
.hrShort{border:0;border-bottom:1px solid var(--gris-linea);
  width:3.5rem;margin:1.5rem 0}

/* 4 ─ CARGADOR ────────────────────────────────────────────────────────────
   El fundido lo hace jQuery desde un CDN. Si el CDN no responde, la pantalla
   verde se queda pegada para siempre; esta animación la retira igual. */
.loader{
  background:var(--verde-marca);
  background-image:linear-gradient(160deg,var(--verde-marca) 0%,var(--verde-tinta) 100%);
  animation:herencia-loader 2.2s var(--ease) forwards;
}
.loader p{font-family:var(--marca);letter-spacing:.26em;text-transform:uppercase}
@keyframes herencia-loader{
  0%,55%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:hidden}
}

/* 5 ─ NAVBAR FIJA ────────────────────────────────────────────────────────── */
.navbar.fixed-top{
  background:var(--blanco)!important;   /* main.js la pinta en línea al hacer scroll */
  border-bottom:1px solid var(--tinta);
  padding:0 var(--margen);
  min-height:var(--nav-h);
}
.navbar .logo{
  width:auto;
  height:clamp(1.9rem,3.2vw,2.5rem);
  margin-block:.85rem;
}
.navbar .nav-item.vertical-line{border:0}
.navbar .nav-link img,.nav-toggle img{height:12px;width:auto;opacity:.85;
  transition:opacity .25s ease}
.navbar .nav-link:hover img,.nav-toggle:hover img{opacity:1}

/* 6 ─ MENÚ A PANTALLA COMPLETA ───────────────────────────────────────────
   Mismo tratamiento que .panel de 2026: degradado verde, titulares en
   EB Garamond caja baja (el texto del HTML ya viene en minúsculas) y
   filetes en lugar de nada. */
.overlay,.overlay2{
  background:var(--verde-marca);
  background-image:linear-gradient(160deg,var(--verde-marca) 0%,var(--verde-tinta) 100%);
}
.overlay a{
  font-family:var(--display);
  font-size:clamp(1.45rem,5vw,2.35rem);
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
  color:var(--blanco);
  padding:.34rem 0;
  margin-bottom:0;
  max-width:26rem;
  margin-inline:auto;
  border-bottom:1px solid var(--linea-inversa);
  transition:color .25s ease;
}
.overlay a:hover,.overlay a:focus{color:var(--menta)}
.overlay a#withBorder,.overlay a#withBorder1{
  font-family:var(--marca);
  font-size:var(--txt-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  width:auto;
  min-width:13rem;
  padding:1rem 1.65rem;
  border:1px solid var(--linea-inversa);
  margin-top:1.5rem;
}
.overlay a#withBorder:hover{background:#fff;color:var(--verde-marca);border-color:#fff}
.overlay a img{display:inline-block;margin-inline:auto}
.overlay .closebtn,.overlay2 .closebtn{
  font-family:var(--marca);
  font-size:var(--txt-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  border:0;
  color:var(--blanco);
}
#romboVerde1,#romboVerde2{opacity:.35;pointer-events:none}
.overlay2 a{font-family:var(--marca);letter-spacing:.18em}

/* 7 ─ PORTADAS DE PÁGINA ────────────────────────────────────────────────
   #blogBack1 (blog-back.png) y #teamDetailsBack1 (details.jpg) apuntaban a
   fotos que ya no existen: quedaba un bloque de 70vh vacío. Se sustituyen
   por el degradado y la trama de rombos de 2026, y los titulares dejan de
   ir en position:absolute (colgaban del viewport, no del bloque). */
.row:has(> #blogBack1),
.row:has(> #teamDetailsBack1){margin-inline:0}

#blogBack1,
#teamDetailsBack1{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:auto;
  min-height:0;
  width:100%;
  max-width:100%;
  padding:calc(var(--nav-h) + clamp(2.75rem,6vw,5.5rem)) var(--margen) clamp(2.25rem,4.5vw,3.75rem);
  background:var(--verde-marca);
  background-image:
    radial-gradient(115% 90% at 88% 6%,rgba(0,137,114,.5) 0%,rgba(0,137,114,0) 58%),
    linear-gradient(158deg,var(--verde-marca) 0%,var(--verde-marca) 38%,var(--verde-tinta) 100%);
  color:var(--blanco-suave);
}
/* trama de rombos: puro CSS, sin imágenes */
#blogBack1::before,
#teamDetailsBack1::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:.14;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.6) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 1px,transparent 1px 72px);
  -webkit-mask-image:linear-gradient(150deg,transparent 8%,#000 70%);
  mask-image:linear-gradient(150deg,transparent 8%,#000 70%);
}

/* rótulo del índice de publicaciones */
#blogBack1 > p{
  position:static;
  transform:none;
  width:auto;
  height:auto;
  max-width:20ch;
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:var(--txt-3xl);
  line-height:1.04;
  letter-spacing:-.014em;
  text-align:left;
  text-transform:none;   /* "Publicaciones" en caja baja, no versaleado */
  color:var(--blanco);
}
#blogBack1 > p::before{
  content:'TC \00B7  BLOG';
  display:block;
  margin-bottom:clamp(.9rem,1.8vw,1.5rem);
  font-family:var(--marca);
  font-size:var(--txt-xs);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--menta);
}

/* ficha de abogado: nombre + cargo */
#teamDetailsBack1 > h4{
  position:static;
  transform:none;
  width:auto;
  height:auto;
  max-width:18ch;
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:var(--txt-3xl);
  line-height:1.04;
  letter-spacing:-.014em;
  text-align:left;
  color:var(--blanco);
}
#teamDetailsBack1 > h4 > p{
  margin:clamp(.9rem,1.8vw,1.4rem) 0 0;
  font-family:var(--marca);
  font-size:var(--txt-xs);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--menta);
}

/* 8 ─ CUERPO DE LA NOTA ─────────────────────────────────────────────────
   #homeBack5 venía en #E5E5E5, 102% de ancho y -20px de margen superior
   (parche para las gutters negativas de Bootstrap). Se normaliza a papel
   blanco, ancho real y aire fluido. */
#homeBack5,
#teamDetailsBack2{
  width:100%;
  max-width:100%;
  margin:0;
  background:var(--blanco);
  border-bottom:1px solid var(--gris-linea);
}
#homeBack5{padding:var(--aire-sec) var(--margen)}
#teamDetailsBack2{padding:var(--aire-sec) var(--margen) clamp(2.5rem,5vw,4.5rem)}

/* medida de lectura: el texto deja de ir de borde a borde */
.blogElement{
  max-width:var(--medida);
  margin-inline:auto;
  padding-inline:0;
  font-family:var(--sans);
  font-size:var(--txt-base)!important;   /* mobile.css lo fija con !important */
  line-height:1.72;
  color:var(--c-texto);
  overflow-wrap:break-word;
}

.blogElement > h3{
  margin:0 0 clamp(1.1rem,2.2vw,1.6rem);
  padding-bottom:clamp(1.1rem,2.2vw,1.5rem);
  border-bottom:1px solid var(--gris-linea);
  font-family:var(--display);
  font-weight:400;
  font-size:var(--txt-xl)!important;     /* mobile.css lo fija con !important */
  line-height:1.1;
  letter-spacing:-.012em;
  text-align:left;
  color:var(--c-titulo);
  text-wrap:balance;
}

/* botonera de compartir (AddToAny, script externo): los iconos de marca de
   2020 son lo más ruidoso que queda en la página; se desaturan en reposo y
   recuperan su color al pasar el cursor. */
.blogElement > .a2a_kit{
  margin:0 0 clamp(1.25rem,2.5vw,1.9rem);
  line-height:0;
}
.a2a_kit a{
  filter:grayscale(1);
  opacity:.5;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
.a2a_kit a:hover{filter:none;opacity:1}

/* firma y fecha: microetiquetas Modena entre dos filetes */
.blogElement > #name,
.blogElement > #date{
  display:block;
  margin-left:0;
  font-family:var(--marca);
  font-size:var(--txt-xs);
  letter-spacing:.2em;
  line-height:1.5;
  text-transform:uppercase;
}
.blogElement > #name{
  margin-top:clamp(1.4rem,2.8vw,2.1rem);
  padding-top:1.05rem;
  border-top:1px solid var(--gris-linea);
  color:var(--verde-marca);
}
.blogElement > #date{
  margin:.35rem 0 clamp(1.75rem,3.4vw,2.6rem);
  padding-bottom:1.05rem;
  border-bottom:1px solid var(--gris-linea);
  color:var(--gris-lectura);
}
/* los iconos user.svg / date.svg se sustituyen por el rombo de la marca */
.blogElement > #name > img,
.blogElement > #date > img{display:none}
.blogElement > #name::before,
.blogElement > #date::before{
  content:'';display:inline-block;width:5px;height:5px;
  margin-right:.75rem;vertical-align:.1em;
  background:var(--verde-acento);transform:rotate(45deg);
}
.blogElement > #date::before{background:none;border:1px solid var(--verde-acento)}
.blogElement label{margin:0;font-weight:400}

/* párrafos del cuerpo: los <div> sin id ni clase son la prosa de la nota */
.blogElement > div:not([id]):not([class]),
.blogElement > p{
  margin:0 0 1.15em;
  max-width:100%;
  color:var(--c-texto);
}
.blogElement > div:not([id]):not([class]):last-child,
.blogElement > p:last-child{margin-bottom:0}
.blogElement h4,.blogElement h5{
  margin:1.8em 0 .7em;
  font-family:var(--display);
  font-size:var(--txt-lg);
  line-height:1.18;
  color:var(--c-titulo);
}
.blogElement a{
  color:var(--verde-marca);
  border-bottom:1px solid var(--gris-linea);
  transition:border-color .25s ease;
}
.blogElement a:hover{border-bottom-color:currentColor}
.blogElement ul{margin:1em 0;padding:0;list-style:none}
.blogElement ul li{position:relative;padding-left:1.4rem;margin-top:.5em}
.blogElement ul li::before{
  content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--verde-marca);transform:rotate(45deg);
}
.blogElement blockquote{
  margin:1.6em 0;padding:.35rem 0 .35rem 1.35rem;
  border-left:2px solid var(--verde-acento);
  font-family:var(--display);font-size:var(--txt-md);font-style:italic;
  line-height:1.45;color:var(--verde-marca);
}
.blogElement iframe,.blogElement video{width:100%;max-width:100%;display:block}

/* 9 ─ IMÁGENES QUE YA NO EXISTEN ────────────────────────────────────────
   Dos hechos del terreno mandan aquí:

   a) Estas 75 páginas NO llevan <!DOCTYPE>: el navegador las pinta en modo
      quirks (document.compatMode === "BackCompat"). En quirks, una imagen
      ROTA con height:auto se estira hasta la altura de su contenedor —de ahí
      los recuadros vacíos de 1.200 px— y `aspect-ratio` no la sujeta. La
      única medida que el modo quirks respeta es una altura EXPLÍCITA.
   b) Los pseudo-elementos de un <img> sólo se pintan cuando el archivo no
      carga (el elemento deja de ser reemplazado). Es el gancho para
      sustituir el icono de imagen rota por algo de la casa.

   Resultado: banda de altura fija; si el archivo existe se ve la foto
   encajada sin recortar; si no existe, la trama de rombos de la marca. */
img{font-size:0;line-height:0;color:transparent}
img,svg,video{max-width:100%}

.blogElement > img{
  position:relative;
  isolation:isolate;          /* el relleno no se cuela por encima del pie */
  display:block;
  width:100%;
  height:clamp(9rem,20vw,14rem);   /* explícita: imprescindible en quirks */
  object-fit:contain;
  object-position:center;
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  background:var(--verde-papel);
}
/* Se pinta SÓLO si el archivo falla: tapa el icono de imagen rota y deja
   en su lugar la trama de rombos de la marca. */
.blogElement > img::before{
  content:'';
  position:absolute;inset:0;z-index:1;
  border-top:2px solid var(--verde-marca);
  background-color:var(--verde-papel);
  background-image:
    repeating-linear-gradient(45deg,rgba(3,81,68,.10) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(-45deg,rgba(3,81,68,.10) 0 1px,transparent 1px 34px);
}
/* adornos e iconos de 2020 que ya no están en /web-assets/img/:
   se colapsan sin dejar hueco (su función la asume el rombo CSS). */
img[src$="email.png"],
img[src$="circle3.png"],
img[src*="reconocimiento"]{display:none}

/* 10 ─ FICHA DE ABOGADO ─────────────────────────────────────────────────── */
#teamDetailsBack2 > .col-md-8{padding-right:clamp(1rem,3vw,3.25rem)}
#teamDetailsBack2 #text2{
  max-width:34ch;
  margin:0 0 clamp(1.25rem,2.4vw,1.9rem);
  padding-bottom:clamp(1.25rem,2.4vw,1.75rem);
  border-bottom:1px solid var(--gris-linea);
  font-family:var(--display);
  font-size:var(--txt-xl);
  font-style:italic;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--verde-marca);
}
#teamDetailsBack2 #text3{
  max-width:var(--medida);
  margin-bottom:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--txt-base);
  line-height:1.72;
  color:var(--c-texto);
}

/* columna lateral: filete a la izquierda, no caja */
.lineTeam{
  border-left:1px solid var(--gris-linea);
  padding-left:clamp(1.25rem,3vw,3rem);
}
#lineTeamText1{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:var(--txt-lg);
  line-height:1.15;
  color:var(--c-titulo);
}
#lineTeamText2{
  margin:.55rem 0 0;
  font-family:var(--marca);
  font-size:var(--txt-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--verde-marca);
}
#lineTeamText3{margin:1.1rem 0 1.4rem;font-size:var(--txt-sm);line-height:1.6}
#lineTeamText3 a{
  color:var(--gris-lectura);
  border-bottom:1px solid var(--gris-linea);
  overflow-wrap:anywhere;
  transition:color .25s ease,border-color .25s ease;
}
#lineTeamText3 a::before{
  content:'';display:inline-block;width:5px;height:5px;
  margin-right:.6rem;vertical-align:.1em;
  background:var(--verde-acento);transform:rotate(45deg);
}
#lineTeamText3 a:hover{color:var(--verde-marca);border-bottom-color:currentColor}
@media (max-width:767.98px){
  .lineTeam{
    border-left:0;
    border-top:1px solid var(--gris-linea);
    padding-left:0;
    padding-top:clamp(1.5rem,4vw,2.25rem);
    margin-top:clamp(1.75rem,4vw,2.5rem);
  }
  #teamDetailsBack2 > .col-md-8{padding-right:0}
}

/* 11 ─ BOTONES ──────────────────────────────────────────────────────────
   Se van los 50px de radio y el verde #22B89F de 2020. */
.btnGreen2,.btnGreen3{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  border-radius:0;
  padding:1.05rem 1.65rem;
  font-family:var(--marca);
  font-size:var(--txt-xs);
  letter-spacing:.2em;
  line-height:1;
  text-transform:uppercase;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btnGreen2{border:1px solid var(--tinta);color:var(--verde-marca);background:none}
.btnGreen2:hover{background:var(--verde-marca);color:#fff;border-color:var(--verde-marca)}
.btnGreen3{border:1px solid var(--linea-inversa);color:#fff;background:none}
.btnGreen3:hover{background:#fff;color:var(--verde-marca);border-color:#fff}

/* 12 ─ PIE ──────────────────────────────────────────────────────────────── */
.footer{
  width:100%;
  max-width:100%;
  margin:0;
  padding:clamp(2.75rem,5vw,4.5rem) var(--margen) clamp(1.75rem,3vw,2.5rem);
  background:var(--tinta);
  color:var(--gris-claro);
  font-family:var(--sans);
  font-size:var(--txt-sm);
  line-height:1.7;
  text-align:left;
}
.footer > .col-md-12{padding:0}
.footer img{opacity:.95}
.footer p{margin:0;max-width:26ch;color:var(--gris-claro)}
.footer #social{
  font-family:var(--marca);
  font-size:var(--txt-xs);
  letter-spacing:.2em;
  line-height:2.1;
  text-transform:uppercase;
  color:var(--menta);
}
.footer a{color:#fff}
.footer a:hover{color:var(--menta)}
@media (max-width:767.98px){
  .footer{text-align:left}
  .footer > .col-md-12 > .row > div + div{margin-top:clamp(1.75rem,5vw,2.5rem)}
}

/* 13 ─ MOVIMIENTO REDUCIDO ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .loader{animation:none;opacity:0;visibility:hidden}
}