/* =========================================================
   Dra. Roberta Castro — Pediatria
   Paleta: rosa claro + azul claro, tons suaves
   ========================================================= */

:root{
  /* cores */
  --rose-50:#FFF3F8;
  --rose-100:#FFE3EF;
  --rose-200:#FBC9E0;
  --rose-400:#F08FBC;
  --rose-600:#D8629B;

  --sky-50:#F0F7FF;
  --sky-100:#DDEEFF;
  --sky-200:#C2E0F7;
  --sky-400:#7FB9E3;
  --sky-600:#4A8FC2;

  --ink:#3B2C40;          /* ameixa escura, mais quente que preto */
  --ink-soft:#6B5C72;
  --ink-mute:#93889A;

  --bg:#FFFBFD;
  --white:#FFFFFF;
  --line:rgba(59,44,64,.10);

  /* tipografia */
  --display:"Fraunces", Georgia, serif;
  --body:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* forma */
  --r-sm:14px;
  --r-md:22px;
  --r-lg:34px;
  --r-xl:48px;

  --shadow-sm:0 4px 18px rgba(216,98,155,.08);
  --shadow-md:0 14px 40px rgba(59,44,64,.09);
  --shadow-lg:0 26px 70px rgba(74,143,194,.16);

  --wrap:1180px;
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px)}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:0}
p{margin:0 0 1rem}

:focus-visible{outline:3px solid var(--sky-400); outline-offset:3px; border-radius:6px}

.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}

/* ---------- ambiente: orbes suaves ---------- */
.orbs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.orb{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
  /* promove para camada própria: o blur é rasterizado 1x e o movimento
     roda no compositor (GPU), sem repaint durante o scroll */
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}
.orb--pink{width:420px;height:420px;background:var(--rose-200);top:-90px;left:-90px;  animation:drift 26s ease-in-out infinite}
.orb--blue{width:480px;height:480px;background:var(--sky-200);top:280px;right:-140px;  animation:drift 32s ease-in-out infinite -8s}
.orb--pink2{width:360px;height:360px;background:var(--rose-100);top:1500px;left:-120px; animation:drift 30s ease-in-out infinite -14s}
.orb--blue2{width:420px;height:420px;background:var(--sky-100);top:2400px;right:-100px; animation:drift 34s ease-in-out infinite -4s}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-26px,0)}
}

.nav,.hero,.section,.cta-final,.footer{position:relative; z-index:1}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,251,253,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.nav.is-stuck{border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(59,44,64,.05)}
.nav__inner{height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:20px}

.brand{display:flex; align-items:center; gap:12px}
.brand__mark{color:var(--rose-400); display:grid; place-items:center; flex:none}
.brand__text{display:flex; flex-direction:column; line-height:1.15}
.brand__text strong{font-family:var(--display); font-size:1.06rem; font-weight:600}
.brand__text em{font-style:normal; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)}

.nav__links{display:flex; align-items:center; gap:28px}
.nav__links a{font-size:.94rem; font-weight:600; color:var(--ink-soft); position:relative; transition:color .2s}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:var(--rose-400); border-radius:2px; transition:right .3s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:not(.btn):hover{color:var(--ink)}
.nav__links a:not(.btn):hover::after{right:0}

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

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 26px; border-radius:999px;
  background:linear-gradient(135deg,var(--rose-400),var(--rose-600));
  color:#fff; font-family:var(--body); font-weight:700; font-size:.95rem;
  border:0; cursor:pointer;
  box-shadow:0 10px 26px rgba(216,98,155,.28);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
}
.btn:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(216,98,155,.34)}
.btn:active{transform:translateY(-1px)}
.btn--sm{padding:9px 18px; font-size:.88rem}
.btn--lg{padding:16px 32px; font-size:1rem}
.btn--full{width:100%}
.btn--ghost{
  background:var(--white); color:var(--rose-600);
  box-shadow:inset 0 0 0 2px var(--rose-200), 0 6px 18px rgba(59,44,64,.05);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--rose-400), 0 12px 26px rgba(216,98,155,.16)}
.btn--light{background:var(--white); color:var(--rose-600); box-shadow:0 12px 30px rgba(59,44,64,.14)}

/* ---------- ELEMENTOS COMUNS ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sky-600); margin-bottom:18px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--rose-400); flex:none}

.section{padding:110px 0}
.section--soft{
  background:linear-gradient(180deg, rgba(240,247,255,0) 0%, var(--sky-50) 22%, var(--sky-50) 78%, rgba(240,247,255,0) 100%);
}
.section--warm{
  background:linear-gradient(180deg, rgba(255,243,248,0) 0%, var(--rose-50) 20%, var(--rose-50) 80%, rgba(255,243,248,0) 100%);
}

.head{max-width:660px; margin:0 auto 58px; text-align:center}
.head h2{font-size:clamp(1.9rem, 3.6vw, 2.8rem)}
.head__sub{margin-top:16px; color:var(--ink-soft)}

/* ---------- HERO ---------- */
.hero{padding:70px 0 100px}
.hero__inner{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.hero h1{font-size:clamp(2.4rem, 5vw, 3.9rem); margin-bottom:22px}
.hero h1 .ink{
  font-style:italic; color:var(--rose-600);
  background:linear-gradient(180deg, transparent 62%, var(--rose-100) 62%);
  padding:0 .08em;
}
.lede{font-size:1.12rem; color:var(--ink-soft); max-width:52ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 40px}

.hero__proof{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.proof{display:flex; flex-direction:column; line-height:1.35}
.proof strong,.proof__stars{font-weight:800; font-size:1rem; color:var(--ink)}
.proof__stars{color:var(--rose-400); letter-spacing:2px}
.proof span{font-size:.83rem; color:var(--ink-mute)}
.proof__div{width:1px; height:34px; background:var(--line)}

/* figura hero */
.hero__figure{position:relative}
.blob{
  position:relative; aspect-ratio:1/1.06;
  border-radius:58% 42% 46% 54% / 48% 44% 56% 52%;
  background:linear-gradient(150deg, var(--rose-100), var(--sky-100));
  padding:14px;
  box-shadow:var(--shadow-lg);
  animation:morph 16s ease-in-out infinite;
}
.blob__photo{
  width:100%; height:100%;
  border-radius:inherit;
  background:linear-gradient(150deg,var(--rose-200),var(--sky-200));
  background-image:url("images/roberta-hero.jpg");
  background-size:cover; background-position:center 18%;
}
@keyframes morph{
  0%,100%{border-radius:58% 42% 46% 54% / 48% 44% 56% 52%}
  33%{border-radius:44% 56% 58% 42% / 56% 48% 52% 44%}
  66%{border-radius:52% 48% 40% 60% / 42% 58% 42% 58%}
}

.badge{
  position:absolute; display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-radius:var(--r-md); padding:13px 18px;
  box-shadow:var(--shadow-md);
}
.badge div{display:flex; flex-direction:column; line-height:1.3}
.badge strong{font-size:.92rem}
.badge em{font-style:normal; font-size:.76rem; color:var(--ink-mute)}
.badge__ico{font-size:1.3rem}
.badge--float{left:-26px; bottom:16%; animation:bob 6s ease-in-out infinite}
.badge--float2{right:-16px; top:11%; animation:bob 7.5s ease-in-out infinite .8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- BLOCO DUPLO ---------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:66px; align-items:center}
.two--rev .two__copy{order:1}
.two h2{font-size:clamp(1.8rem, 3.3vw, 2.5rem); margin-bottom:20px}
.two p{color:var(--ink-soft)}

.frame{position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg)}
.frame__photo{
  aspect-ratio:4/4.4;
  background:linear-gradient(160deg,var(--sky-100),var(--rose-100));
  background-image:url("images/roberta-sobre.jpg");
  background-size:cover; background-position:center;
}
.frame__tag{
  position:absolute; left:18px; bottom:18px;
  background:rgba(255,255,255,.94); border-radius:999px;
  padding:9px 18px; font-size:.82rem; font-weight:700; color:var(--ink-soft);
  box-shadow:var(--shadow-sm);
}

.ticks{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px}
.ticks li{position:relative; padding-left:34px; color:var(--ink-soft); font-weight:600}
.ticks li::before{
  content:"✓"; position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:50%;
  background:var(--rose-100); color:var(--rose-600);
  display:grid; place-items:center; font-size:.75rem; font-weight:800;
}

/* ---------- ESPECIALIDADES ---------- */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.spec{
  background:var(--white); border-radius:var(--r-lg); padding:38px 32px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.spec::after{
  content:""; position:absolute; inset:auto -40% -60% auto;
  width:180px; height:180px; border-radius:50%;
  background:linear-gradient(135deg,var(--rose-100),var(--sky-100));
  opacity:0; transition:opacity .4s, transform .5s; transform:scale(.6);
}
.spec:hover{transform:translateY(-8px); box-shadow:var(--shadow-md)}
.spec:hover::after{opacity:.7; transform:scale(1)}
.spec > *{position:relative; z-index:1}
.spec__ico{
  display:grid; place-items:center; width:56px; height:56px; margin-bottom:20px;
  border-radius:20px; background:linear-gradient(135deg,var(--rose-100),var(--sky-100)); font-size:1.5rem;
}
.spec h3{font-size:1.24rem; margin-bottom:10px}
.spec p{color:var(--ink-soft); font-size:.97rem; margin:0}

.tags{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:44px; justify-content:center}
.tags__label{font-weight:700; color:var(--ink-soft); margin-right:6px}
.tag{
  background:var(--white); border:1px solid var(--sky-200); color:var(--sky-600);
  border-radius:999px; padding:7px 16px; font-size:.87rem; font-weight:600;
  transition:transform .25s, background .25s, color .25s;
}
.tag:hover{transform:translateY(-3px); background:var(--sky-100)}
.tag--more{background:var(--rose-100); border-color:var(--rose-200); color:var(--rose-600)}

/* ---------- PREÇOS ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch}
.price{
  background:var(--white); border-radius:var(--r-lg); padding:38px 32px 34px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.price:hover{transform:translateY(-8px); box-shadow:var(--shadow-md)}
.price h3{font-size:1.3rem; margin-bottom:10px}
.price p{color:var(--ink-soft); font-size:.95rem; flex:1}
.price__value{
  font-family:var(--display); font-size:2.9rem; font-weight:600; color:var(--ink);
  margin:6px 0 22px; display:flex; align-items:flex-start; gap:5px;
}
.price__value span{font-size:1.05rem; margin-top:.6em; color:var(--ink-mute)}
.price--feature{
  background:linear-gradient(165deg,#fff, var(--rose-50));
  border-color:var(--rose-200); position:relative;
  box-shadow:0 20px 50px rgba(216,98,155,.16);
}
.price__flag{
  position:absolute; top:-13px; left:32px;
  background:linear-gradient(135deg,var(--rose-400),var(--rose-600)); color:#fff;
  font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; box-shadow:0 8px 18px rgba(216,98,155,.3);
}

.more{
  margin-top:44px; background:var(--white); border-radius:var(--r-lg);
  padding:30px 34px; box-shadow:var(--shadow-sm); border:1px solid var(--line);
  display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap;
}
.more__label{font-weight:800; color:var(--ink); white-space:nowrap; padding-top:4px}
.more__list{display:flex; flex-wrap:wrap; gap:10px; flex:1}
.more__list span{
  background:var(--rose-50); color:var(--ink-soft); border-radius:999px;
  padding:7px 15px; font-size:.87rem; font-weight:600;
}

/* ---------- FORMATOS + CONTATO ---------- */
.format{display:grid; gap:22px; margin-top:8px}
.format__item{display:flex; gap:18px; align-items:flex-start}
.format__ico{
  flex:none; width:52px; height:52px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--sky-100),var(--rose-100)); font-size:1.35rem;
}
.format__item h3{font-size:1.14rem; margin-bottom:4px}
.format__item p{margin:0; font-size:.96rem}

.contact-card{
  background:linear-gradient(165deg, var(--white), var(--sky-50));
  border-radius:var(--r-xl); padding:40px 36px;
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
}
.contact-card h3{font-size:1.6rem; margin-bottom:8px}
.contact-card > p{color:var(--ink-soft)}
.contact-list{list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:20px}
.contact-list li{display:flex; gap:15px; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); line-height:1.55}
.contact-list strong{color:var(--ink)}
.ci{
  flex:none; width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:var(--white); box-shadow:var(--shadow-sm); font-size:1.05rem;
}

/* ---------- CTA FINAL ---------- */
.cta-final{padding:0 0 110px}
.cta-final__inner{
  background:linear-gradient(135deg, var(--rose-200), var(--sky-200));
  border-radius:var(--r-xl); padding:76px 40px; text-align:center;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.cta-final__inner::before{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  background:rgba(255,255,255,.35); top:-140px; left:-80px;
}
.cta-final__inner::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background:rgba(255,255,255,.28); bottom:-120px; right:-60px;
}
.cta-final h2{font-size:clamp(1.8rem,3.6vw,2.7rem); margin-bottom:12px; position:relative; z-index:1}
.cta-final p{color:var(--ink-soft); margin-bottom:30px; position:relative; z-index:1}
.cta-final .btn{position:relative; z-index:1}

/* ---------- FOOTER ---------- */
.footer{background:var(--white); border-top:1px solid var(--line); padding:46px 0 40px}
.footer__inner{display:grid; gap:22px; justify-items:center; text-align:center}
.footer__brand{display:flex; flex-direction:column; gap:4px}
.footer__brand strong{font-family:var(--display); font-size:1.15rem}
.footer__brand span{font-size:.85rem; color:var(--ink-mute)}
.footer__links{display:flex; flex-wrap:wrap; gap:24px; justify-content:center}
.footer__links a{font-size:.92rem; font-weight:600; color:var(--ink-soft); transition:color .2s}
.footer__links a:hover{color:var(--rose-600)}
.footer__note{font-size:.79rem; color:var(--ink-mute); max-width:560px; margin:0}

/* ---------- WHATSAPP FLUTUANTE ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#4FCE5D,#2FB14A);
  box-shadow:0 12px 30px rgba(47,177,74,.4);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:inherit; opacity:.5; animation:pulse 2.6s ease-out infinite; z-index:-1;
}
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.wa-float:hover{transform:scale(1.08)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- RESPONSIVO ---------- */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr; gap:52px}
  .hero__figure{max-width:420px; margin:0 auto; width:100%}
  .two{grid-template-columns:1fr; gap:44px}
  .two--rev .two__copy{order:0}
  .cards-3,.price-grid{grid-template-columns:1fr}
  .price--feature{order:-1}
}

@media (max-width:820px){
  .nav__toggle{display:flex}
  .nav__links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); padding:12px 20px 24px;
    box-shadow:var(--shadow-md);
    clip-path:inset(0 0 100% 0); transition:clip-path .35s ease;
  }
  .nav__links.is-open{clip-path:inset(0 0 0 0)}
  .nav__links a{padding:14px 0; border-bottom:1px solid var(--line)}
  .nav__links a:not(.btn)::after{display:none}
  .nav__links .btn{margin-top:16px; border-bottom:0; justify-content:center}
}

/* --- tablet pequeno / celular grande --- */
@media (max-width:720px){
  :root{--nav-h:66px; --r-lg:26px; --r-xl:32px}
  body{font-size:16px}
  .wrap{width:min(100% - 32px, var(--wrap))}
  .section{padding:66px 0}
  .head{margin-bottom:38px}

  /* hero */
  .hero{padding:40px 0 66px}
  .hero__inner{gap:40px}
  .hero h1{font-size:clamp(2rem, 8.4vw, 2.7rem)}
  .lede{font-size:1.02rem}
  .hero__cta{margin:26px 0 32px; gap:12px}
  .hero__cta .btn{width:100%}

  /* provas sociais viram grade de 2 colunas, sem divisórias */
  .hero__proof{display:grid; grid-template-columns:1fr 1fr; gap:18px 14px}
  .proof__div{display:none}
  .proof strong,.proof__stars{font-size:.95rem}
  .proof span{font-size:.78rem}

  /* figura do topo: foto centralizada e os balões arrumados ABAIXO dela,
     em coluna, sem ficarem tortos sobre o círculo */
  .hero__figure{
    display:flex; flex-direction:column; align-items:center;
    max-width:360px; margin:0 auto; gap:14px;
  }
  .blob{width:100%; margin:0}
  .badge{
    position:static; animation:none; margin:0;
    width:100%; max-width:320px; justify-content:flex-start;
    box-shadow:var(--shadow-sm);
  }

  .more{flex-direction:column; gap:14px; padding:26px 24px}
  .price{padding:32px 26px 30px}
  .price__value{font-size:2.5rem}
  .spec{padding:30px 26px}
  .contact-card{padding:32px 24px}
  .cta-final{padding-bottom:72px}
  .cta-final__inner{padding:52px 24px}
  .footer__links{gap:4px 12px}
  .footer__links a{padding:11px 10px}          /* alvo de toque confortável */
  .nav__toggle{padding:12px 10px; margin-right:-10px}
  .wa-float{width:54px; height:54px; right:16px; bottom:16px}
}

/* --- celular --- */
@media (max-width:480px){
  :root{--r-lg:22px; --r-xl:26px}
  .wrap{width:min(100% - 28px, var(--wrap))}
  .section{padding:56px 0}
  .brand__text strong{font-size:.98rem}
  .brand__text em{font-size:.66rem; letter-spacing:.1em}
  .brand__mark svg{width:32px; height:32px}

  .hero h1{font-size:1.85rem; line-height:1.18}
  .eyebrow{font-size:.7rem; letter-spacing:.12em; margin-bottom:14px}
  .head h2,.two h2{font-size:1.55rem}
  .cta-final h2{font-size:1.55rem}

  /* provas em coluna única para não quebrar palavra */
  .hero__proof{grid-template-columns:1fr; gap:14px}

  .tags{gap:8px}
  .tag,.more__list span{font-size:.82rem; padding:6px 13px}
  .tags__label,.more__label{width:100%; text-align:center; margin:0 0 4px}
  .more__label{text-align:left}

  .format__item{gap:14px}
  .format__ico{width:46px; height:46px; border-radius:15px; font-size:1.2rem}
  .contact-list li{gap:12px; font-size:.92rem}
  .ci{width:38px; height:38px}
  .btn--lg{padding:15px 24px; font-size:.96rem}
  .price__flag{left:22px}
}

/* telas muito estreitas (≤360px) */
@media (max-width:360px){
  .hero h1{font-size:1.68rem}
  .brand__text em{display:none}
}

/* evita "pulo" de layout em celular com barra de endereço dinâmica */
@media (hover:none){
  .spec:hover,.price:hover,.tag:hover,.btn:hover,.wa-float:hover{transform:none}
  .spec:hover::after{opacity:0}
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}