/* ==========================================================================
   REFORMAS ELGAREX — hoja de estilos
   --------------------------------------------------------------------------
   ÍNDICE
   00. Variables (colores y tipografías)  ← toca aquí para cambiar los colores
   01. Base y utilidades
   02. Botones
   03. Barra superior
   04. Cabecera y menú
   05. Portada (hero)
   06. Bloques de sección
   07. Servicios
   08. Antes y después
   09. Galería de trabajos
   10. Cómo trabajamos
   11. Nosotros
   12. Opiniones
   13. Urgencias
   14. Preguntas frecuentes
   15. Línea de datos de contacto
   16. Pie de página
   17. Barra fija de móvil
   18. Animaciones y responsive
   ========================================================================== */


/* ==========================================================================
   00. VARIABLES
   Cambia aquí un color y se cambia en toda la web.
   ========================================================================== */
:root{
  --negro:      #101317;   /* fondo oscuro principal */
  --negro-2:    #171B21;   /* fondo oscuro secundario */
  --gris:       #2A3039;   /* bordes sobre fondo oscuro */
  --claro:      #F4F4F2;   /* fondo claro */
  --claro-2:    #E9E8E4;   /* fondo claro secundario */
  --oro:        #F4C430;   /* color de marca, botones y detalles */
  --oro-oscuro: #B98F1E;   /* oro sobre fondos claros (más legible) */
  --rojo:       #C0392B;   /* urgencias */
  --texto:      #101317;   /* texto sobre fondo claro */
  --texto-2:    #5A6068;   /* texto secundario sobre fondo claro */
  --texto-inv:  #F4F4F2;   /* texto sobre fondo oscuro */
  --texto-inv-2:rgba(244,244,242,.66);
  --borde:      rgba(16,19,23,.12);
  --borde-inv:  rgba(244,244,242,.14);

  --fuente-titulos: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fuente-texto:   "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --ancho: 1200px;                 /* ancho máximo del contenido */
  --radio: 4px;                    /* redondeo de esquinas */
  --sombra: 0 18px 40px rgba(16,19,23,.10);
}


/* ==========================================================================
   01. BASE Y UTILIDADES
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--claro);
  color:var(--texto);
  font-family:var(--fuente-texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{
  margin:0;
  font-family:var(--fuente-titulos);
  font-weight:700;
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:.005em;
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px}

.container{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}
.txt-gold{color:var(--oro)}
.ico{width:16px;height:16px;fill:currentColor;flex:none}

/* Etiqueta pequeña que va encima de los títulos */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);margin:0 0 14px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.eyebrow--dark{color:var(--oro-oscuro)}


/* ==========================================================================
   02. BOTONES
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 30px;border:2px solid transparent;border-radius:var(--radio);
  font-family:var(--fuente-texto);font-size:15px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:transform .18s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--oro);color:var(--negro);border-color:var(--oro)}
.btn--gold:hover{box-shadow:0 12px 28px rgba(244,196,48,.35)}
.btn--dark{background:var(--negro);color:var(--texto-inv);border-color:var(--negro)}
.btn--dark:hover{box-shadow:0 12px 28px rgba(16,19,23,.28)}
.btn--white{background:#fff;color:var(--rojo);border-color:#fff}
.btn--outline{background:transparent;color:var(--texto-inv);border-color:rgba(244,244,242,.4)}
.btn--outline:hover{border-color:var(--texto-inv);background:rgba(244,244,242,.08)}
.btn--sm{padding:12px 20px;font-size:13.5px}
.btn--block{width:100%}


/* ==========================================================================
   03. BARRA SUPERIOR
   ========================================================================== */
.topbar{background:var(--negro-2);color:var(--texto-inv-2);font-size:13.5px}
.topbar__in{display:flex;align-items:center;gap:24px;height:42px}
.topbar__item{letter-spacing:.02em}
.topbar__tel{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  color:var(--oro);text-decoration:none;font-weight:600;
}
.topbar__tel:hover{text-decoration:underline}


/* ==========================================================================
   04. CABECERA Y MENÚ
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(16,19,23,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde-inv);
  transition:box-shadow .25s;
}
.header.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.header__in{display:flex;align-items:center;gap:28px;min-height:80px}

.logo{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.logo img{height:44px;width:auto}
.logo__claim{
  font-size:10.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);border-left:1px solid var(--borde-inv);padding-left:14px;
}

.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{
  font-size:14.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--texto-inv-2);text-decoration:none;padding:6px 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--texto-inv);border-bottom-color:var(--oro)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{width:26px;height:2px;background:var(--texto-inv);transition:transform .25s, opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* ==========================================================================
   05. PORTADA (HERO)
   ========================================================================== */
.hero{position:relative;color:var(--texto-inv);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
/* Capa oscura sobre la foto para que el texto se lea bien.
   Si tu foto es muy clara, sube el 0.88 y el 0.55 hasta que se lea perfecto. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(16,19,23,.94) 0%,
    rgba(16,19,23,.88) 42%,
    rgba(16,19,23,.55) 100%);
}
.hero__in{padding:clamp(64px,9vw,120px) 24px clamp(56px,7vw,90px)}
.hero__title{font-size:clamp(44px,6.6vw,86px);max-width:15ch}
.hero__text{margin-top:24px;max-width:56ch;font-size:clamp(16.5px,1.7vw,19px);color:var(--texto-inv-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

.hero__seals{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(44px,6vw,72px);background:var(--borde-inv);
  border:1px solid var(--borde-inv);border-radius:var(--radio);overflow:hidden;
}
.hero__seals li{background:rgba(16,19,23,.72);padding:22px 24px}
.hero__seals strong{display:block;font-size:17px;letter-spacing:.01em}
.hero__seals span{display:block;margin-top:4px;font-size:14.5px;color:var(--texto-inv-2)}


/* ==========================================================================
   06. BLOQUES DE SECCIÓN
   ========================================================================== */
.section{padding:clamp(64px,8vw,110px) 0}
.section--dark{background:var(--negro);color:var(--texto-inv)}
.section--dark .section__text{color:var(--texto-inv-2)}

.section__head{max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.section__title{font-size:clamp(34px,4.6vw,62px)}
.section__text{margin-top:18px;font-size:17px;color:var(--texto-2);max-width:62ch}


/* ==========================================================================
   07. SERVICIOS
   ========================================================================== */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.card{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  padding:30px 26px;position:relative;overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.card::after{ /* línea dorada que aparece abajo al pasar el ratón */
  content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:var(--oro);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card__ico{
  display:grid;place-items:center;width:54px;height:54px;margin-bottom:20px;
  background:var(--claro-2);border-radius:var(--radio);transition:background .25s;
}
.card__ico svg{width:26px;height:26px;fill:none;stroke:var(--negro);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.card:hover .card__ico{background:var(--negro)}
.card:hover .card__ico svg{stroke:var(--oro)}
.card h3{font-size:24px;margin-bottom:8px}
.card p{font-size:15.5px;color:var(--texto-2);line-height:1.55}


/* ==========================================================================
   08. ANTES Y DESPUÉS
   ========================================================================== */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px}
.ba{
  position:relative;margin:0;border-radius:var(--radio);overflow:hidden;
  background:var(--negro-2);border:1px solid var(--borde-inv);
  aspect-ratio:3/2;user-select:none;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__before-wrap{position:absolute;inset:0;width:50%;overflow:hidden}
.ba__before-wrap .ba__before{width:auto;height:100%;max-width:none}
.ba__handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--oro);
  transform:translateX(-50%);pointer-events:none;z-index:3;
}
.ba__handle i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:var(--oro);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.ba__handle i::before,.ba__handle i::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.ba__handle i::before{left:9px;transform:translateY(-50%);border-right:8px solid var(--negro)}
.ba__handle i::after{right:9px;transform:translateY(-50%);border-left:8px solid var(--negro)}
.ba__range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;z-index:4;
}
.ba__tag{
  position:absolute;top:14px;z-index:2;padding:5px 12px;border-radius:2px;
  background:rgba(16,19,23,.75);color:var(--texto-inv);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.ba__tag--l{left:14px}
.ba__tag--r{right:14px;background:var(--oro);color:var(--negro)}
.ba figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 18px 14px;
  background:linear-gradient(transparent,rgba(16,19,23,.9));
  color:var(--texto-inv);font-size:14.5px;font-weight:500;
}


/* ==========================================================================
   09. GALERÍA DE TRABAJOS
   ========================================================================== */
.works__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.work{
  position:relative;border-radius:var(--radio);overflow:hidden;
  aspect-ratio:9/7;background:var(--negro-2);
}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.work:hover img{transform:scale(1.06)}
.work__info{
  position:absolute;inset:auto 0 0 0;padding:44px 22px 20px;color:var(--texto-inv);
  background:linear-gradient(transparent,rgba(16,19,23,.92));
}
.work__info span{
  display:block;font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--oro);margin-bottom:6px;
}
.work__info h3{font-size:23px}


/* ==========================================================================
   10. CÓMO TRABAJAMOS
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--borde-inv);border:1px solid var(--borde-inv);border-radius:var(--radio);overflow:hidden}
.step{background:var(--negro);padding:34px 28px 38px;position:relative}
.step__num{
  display:block;font-family:var(--fuente-titulos);font-size:52px;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--oro);margin-bottom:18px;
}
.step h3{font-size:25px;margin-bottom:10px}
.step p{font-size:15.5px;color:var(--texto-inv-2);line-height:1.6}


/* ==========================================================================
   11. NOSOTROS
   ========================================================================== */
.about__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,70px);align-items:center}
.about__img{position:relative}
.about__img img{border-radius:var(--radio);width:100%;object-fit:cover}
.about__badge{
  position:absolute;right:-14px;bottom:26px;background:var(--oro);color:var(--negro);
  padding:18px 22px;border-radius:var(--radio);box-shadow:var(--sombra);
  display:flex;align-items:center;gap:12px;
}
.about__badge strong{font-family:var(--fuente-titulos);font-size:44px;line-height:1}
.about__badge span{font-size:13px;font-weight:600;line-height:1.25;text-transform:uppercase;letter-spacing:.06em}
.about__text > p{margin-top:18px;color:var(--texto-2)}

.checks{margin:26px 0 0}
.checks li{position:relative;padding-left:34px;margin-bottom:12px;font-size:16px}
.checks li::before{
  content:"";position:absolute;left:0;top:7px;width:20px;height:11px;
  border-left:2.5px solid var(--oro-oscuro);border-bottom:2.5px solid var(--oro-oscuro);
  transform:rotate(-45deg);
}
.counters{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:32px 0;padding:24px 0;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
}
.counters strong{display:block;font-family:var(--fuente-titulos);font-size:44px;line-height:1;color:var(--negro)}
.counters span{font-size:13.5px;color:var(--texto-2);text-transform:uppercase;letter-spacing:.08em}


/* ==========================================================================
   12. OPINIONES
   ========================================================================== */
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.review{
  margin:0;background:var(--negro-2);border:1px solid var(--borde-inv);
  border-radius:var(--radio);padding:30px 26px;
}
.stars{color:var(--oro);letter-spacing:.18em;font-size:17px;margin-bottom:14px}
.review p{color:var(--texto-inv-2);font-size:16px;line-height:1.65}
.review cite{
  display:block;margin-top:20px;padding-top:16px;border-top:1px solid var(--borde-inv);
  font-style:normal;font-weight:700;font-size:15.5px;
}
.review cite span{display:block;font-weight:400;font-size:13.5px;color:var(--texto-inv-2);margin-top:3px}


/* ==========================================================================
   13. URGENCIAS
   ========================================================================== */
.urgent{background:var(--rojo);color:#fff}
.urgent__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:26px;padding-top:clamp(34px,4vw,52px);padding-bottom:clamp(34px,4vw,52px);
}
.urgent h2{font-size:clamp(30px,4vw,48px)}
.urgent p{max-width:52ch;margin-top:12px;color:rgba(255,255,255,.9);font-size:16px}


/* ==========================================================================
   14. PREGUNTAS FRECUENTES
   ========================================================================== */
.faq__wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,70px);align-items:start}
.faq .section__head{margin-bottom:0}
.faq__item{border-bottom:1px solid var(--borde)}
.faq__item:first-child{border-top:1px solid var(--borde)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--fuente-titulos);font-size:23px;text-transform:uppercase;
  line-height:1.15;transition:color .2s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--oro-oscuro)}
.faq__item summary::after{
  content:"";position:absolute;right:8px;top:32px;width:12px;height:12px;
  border-right:2.5px solid var(--oro-oscuro);border-bottom:2.5px solid var(--oro-oscuro);
  transform:translateY(-50%) rotate(45deg);transition:transform .25s;
}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(-135deg)}
.faq__item p{padding:0 20px 24px 0;color:var(--texto-2);font-size:16px}


/* ==========================================================================
   15. LÍNEA DE DATOS DE CONTACTO (teléfono · correo · zonas · horario)
   ========================================================================== */
.info-bar{
  background:var(--negro);
  color:var(--texto-inv);
  border-top:4px solid var(--oro);
  padding:clamp(46px,6vw,70px) 0;
}
.info-bar__title{
  text-align:center;
  font-family:var(--fuente-titulos);
  font-size:clamp(26px,3.4vw,42px);
  text-transform:uppercase;
  line-height:1.05;
  margin-bottom:clamp(30px,4vw,46px);
}
.info-bar__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--borde-inv);
  border:1px solid var(--borde-inv);
  border-radius:var(--radio);
  overflow:hidden;
}
.info__item{
  background:var(--negro-2);
  padding:30px 24px 28px;
  text-align:center;
  transition:background .25s;
}
.info__item:hover{background:#1C222A}
.info__ico{
  display:grid;place-items:center;
  width:52px;height:52px;margin:0 auto 16px;
  border:1px solid var(--borde-inv);border-radius:50%;
}
.info__ico svg{
  width:24px;height:24px;fill:none;stroke:var(--oro);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.info__label{
  display:block;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--texto-inv-2);margin-bottom:10px;
}
.info__value{
  display:block;
  font-family:var(--fuente-titulos);
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.1;text-transform:uppercase;
  color:var(--texto-inv);text-decoration:none;
  word-break:break-word;
}
a.info__value:hover{color:var(--oro)}
.info__value--mail{
  font-family:var(--fuente-texto);
  font-size:17px;font-weight:600;text-transform:none;letter-spacing:.01em;
}
.info__value--sm{font-size:clamp(20px,1.9vw,24px)}
.info__extra{
  display:block;margin-top:10px;
  font-size:14px;color:var(--texto-inv-2);
}

/* ==========================================================================
   16. PIE DE PÁGINA
   ========================================================================== */
.footer{background:var(--negro-2);color:var(--texto-inv);padding:clamp(48px,6vw,72px) 0 0;border-top:1px solid var(--borde-inv)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.footer__brand img{height:46px;width:auto;margin-bottom:18px}
.footer__brand p{color:var(--texto-inv-2);font-size:15.5px;max-width:34ch}
.footer__col h4{font-size:19px;color:var(--oro);margin-bottom:16px}
.footer__col li{margin-bottom:10px;font-size:15.5px;color:var(--texto-inv-2)}
.footer__col a{text-decoration:none;transition:color .2s}
.footer__col a:hover{color:var(--oro)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  margin-top:44px;padding-top:20px;padding-bottom:24px;
  border-top:1px solid var(--borde-inv);font-size:13.5px;color:var(--texto-inv-2);
}
.footer__bottom a{text-decoration:none}
.footer__bottom a:hover{color:var(--oro)}


/* ==========================================================================
   17. BARRA FIJA DE MÓVIL
   ========================================================================== */

.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  grid-template-columns:1fr 1fr;background:var(--negro-2);border-top:1px solid var(--borde-inv)}
.mobile-bar a{
  padding:16px 8px;text-align:center;text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-inv);
}
.mobile-bar a:last-child{background:var(--oro);color:var(--negro)}


/* ==========================================================================
   18. ANIMACIONES Y RESPONSIVE
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-visible{opacity:1;transform:none}

/* --- Tablet --- */
@media (max-width:1000px){
  .about__grid,.faq__wrap,.contact__grid{grid-template-columns:1fr}
  .about__badge{right:16px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}

/* --- Móvil --- */
@media (max-width:860px){
  .logo__claim{display:none}
  .burger{display:flex;margin-left:auto}
  .nav{
    position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--negro);border-bottom:1px solid var(--borde-inv);
    max-height:0;overflow:hidden;transition:max-height .32s ease;
  }
  .nav.is-open{max-height:420px}
  .nav a{padding:16px 24px;border-bottom:1px solid var(--borde-inv);border-left:2px solid transparent}
  .nav a:hover{border-bottom-color:var(--borde-inv);border-left-color:var(--oro)}

  .topbar__item--hide{display:none}
  .hero__seals{grid-template-columns:1fr}
  .counters{grid-template-columns:1fr;text-align:left}
  .info-bar__grid{grid-template-columns:1fr 1fr}
  .mobile-bar{display:grid}
  body{padding-bottom:56px}
}

@media (max-width:520px){
  .container{padding-left:18px;padding-right:18px}
  .btn{width:100%}
  .hero__actions{flex-direction:column;align-items:stretch}
  .topbar__item{display:none}
  .topbar__tel{margin:0 auto}
  .footer__grid{grid-template-columns:1fr}
  .info-bar__grid{grid-template-columns:1fr}
}

/* Respeta a quien tiene desactivadas las animaciones en su sistema */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}