@font-face {
  font-family: 'Bricolage';
  src: url('fonts/bricolage.woff2') format('woff2-variations'), url('fonts/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader.woff2') format('woff2-variations'), url('fonts/newsreader.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --petroleo: #0e3b43;
  --petroleo-2: #17525d;
  --acafrao: #f2a71b;
  --acafrao-2: #e09412;
  --acafrao-claro: #fbe7bf;
  --verde: #4e9f6b;
  --verde-texto: #2f7a4d;
  --papel: #f4f6f1;
  --hortela: #dceae1;
  --lilas: #d6d1ef;
  --branco: #ffffff;
  --tinta: #0e3b43;
  --tinta-2: #4a5d5f;
  --tinta-3: #7a8c8a;
  --linha: #d5ded8;
  --erro: #b5432f;
  --erro-claro: #f6dcd5;

  --sans: 'Bricolage', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --sombra: 0 1px 2px rgb(14 59 67 / 0.06), 0 10px 28px rgb(14 59 67 / 0.1);
  --glass: rgb(244 246 241 / 0.72);
  --tabs-h: 64px;
  --top-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 700; font-stretch: 92%; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

.i { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }
.i-lg { width: 2rem; height: 2rem; }
.mark { display: block; width: 36px; height: 24px; flex: none; }
.mark-a { fill: var(--petroleo); }
.mark-b { fill: var(--acafrao); }
.mark-ab { fill: var(--verde); }
.mark-s { width: 27px; height: 18px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--acafrao); outline-offset: 2px; border-radius: 6px; }
[tabindex='-1']:focus { outline: none; }

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.muted { color: var(--tinta-2); }
.small { font-size: 0.875rem; line-height: 1.45; }
.stack { display: grid; gap: 14px; align-content: start; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.6em 1.1em;
  border-radius: 12px; border: 1.5px solid transparent;
  background: none; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--acafrao); color: var(--petroleo); }
.btn-primary:hover { background: var(--acafrao-2); }
.btn-dark { background: var(--petroleo); color: var(--papel); }
.btn-dark:hover { background: var(--petroleo-2); }
.btn-outline { border-color: var(--petroleo); color: var(--petroleo); }
.btn-outline:hover { background: rgb(14 59 67 / 0.06); }
.btn-quiet { color: var(--petroleo); padding-inline: 0.75em; }
.btn-quiet:hover { background: rgb(14 59 67 / 0.07); }
.btn-done { background: var(--hortela); color: var(--verde-texto); }
.btn-lg { min-height: 52px; padding: 0.75em 1.35em; font-size: 1.0625rem; }
.btn-sm { min-height: 38px; padding: 0.45em 0.85em; font-size: 0.9375rem; border-radius: 10px; }
.btn-block { width: 100%; }
.plan-club .btn-outline, .club-banner .btn-outline { border-color: var(--papel); color: var(--papel); }

.link {
  background: none; border: 0; padding: 0.5em 0.8em; border-radius: 8px; cursor: pointer;
  color: var(--tinta-2); font-weight: 500;
}
.link:hover { color: var(--tinta); background: rgb(14 59 67 / 0.06); }

.chip {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 650; background: var(--hortela); color: var(--verde-texto); white-space: nowrap;
}
.chip-new { background: var(--acafrao); color: var(--petroleo); }

.bar { display: block; height: 6px; border-radius: 6px; background: var(--hortela); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--verde); border-radius: inherit; }

/* ---------- Vidro fosco (só nas barras que flutuam sobre o conteúdo) ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass { background: rgb(244 246 241 / 0.97); }
}

/* ---------- Marca ---------- */
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 700; font-stretch: 88%; letter-spacing: -0.01em; font-size: 1.0625rem; white-space: nowrap;
}

/* ============ Site ============ */
.site-top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgb(14 59 67 / 0.08); }
.site-top-in { display: flex; align-items: center; gap: 12px; height: 64px; }
.site-nav { display: none; margin-left: auto; gap: 2px; }
.site-cta { margin-left: auto; }
@media (min-width: 780px) {
  .site-nav { display: flex; }
  .site-cta { margin-left: 8px; }
}

.hero { display: grid; gap: 44px; padding-block: 40px 56px; }
.display {
  font-size: clamp(3.3rem, 13.5vw, 5.75rem);
  font-weight: 800; font-stretch: 76%; line-height: 0.9; letter-spacing: -0.035em;
}
.lede { margin-top: 22px; font-size: 1.1875rem; line-height: 1.5; color: var(--tinta-2); max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.9375rem; color: var(--tinta-2); }
@media (min-width: 920px) {
  .hero { grid-template-columns: 7fr 5fr; align-items: center; gap: 64px; padding-block: 80px 104px; }
}

/* O bloco de anotações: o dia em modo bombeiro, riscado item por item */
.notepad {
  position: relative; margin: 0;
  padding: 26px 24px 24px 50px;
  border-radius: 20px; background: var(--branco);
  box-shadow: var(--sombra);
  transform: rotate(-1.2deg);
}
.notepad::before {
  content: ''; position: absolute; left: 32px; top: 0; bottom: 0; width: 2px;
  background: var(--acafrao); opacity: 0.75;
}
.notepad-title { font-weight: 750; font-stretch: 86%; font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.fires { list-style: none; padding: 0; display: grid; gap: 4px; }
.fires li { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; font-size: 1.0625rem; line-height: 1.4; }
.tick { position: relative; width: 20px; height: 20px; margin-top: 2px; flex: none; border: 2px solid var(--petroleo); border-radius: 5px; }
.tick::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid var(--verde); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  animation: check 0.25s ease forwards;
  animation-delay: calc(900ms + var(--i) * 620ms + 380ms);
}
.fires .txt { flex: 1; min-width: 0; }
.fires .txt-in {
  background-image: linear-gradient(var(--acafrao-2), var(--acafrao-2));
  background-repeat: no-repeat; background-position: 0 60%; background-size: 0% 2.5px;
  animation: strike 0.55s ease forwards, dim 0.55s ease forwards;
  animation-delay: calc(900ms + var(--i) * 620ms);
}
.notepad-end {
  margin-top: 14px; padding-top: 16px; border-top: 1.5px dashed var(--linha);
  font-weight: 600; line-height: 1.4; opacity: 0;
  animation: rise 0.5s ease forwards; animation-delay: 3.6s;
}
@keyframes strike { to { background-size: 100% 2.5px; } }
@keyframes dim { to { color: var(--tinta-3); } }
@keyframes check { to { transform: rotate(45deg) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sec { padding-block: 44px; }
.sec-head { max-width: 680px; margin-bottom: 26px; }
.sec-head h2 { font-size: clamp(2rem, 6.5vw, 2.9rem); font-weight: 780; font-stretch: 82%; letter-spacing: -0.028em; line-height: 1; }
.sec-head p { margin-top: 12px; color: var(--tinta-2); max-width: 54ch; }

.free-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 920px) { .free-grid { grid-template-columns: 1.35fr 1fr; gap: 20px; } }

.rows {
  list-style: none; padding: 0; display: grid; gap: 1px;
  background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden;
}
.row-link, .tool-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; background: var(--branco); border: 0; text-align: left; text-decoration: none;
}
button.row-link, a.row-link { cursor: pointer; }
.row-link:hover { background: #fbfcfa; }
.row-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.row-ico .i { width: 20px; height: 20px; }
.ico-acafrao { background: var(--acafrao); color: var(--petroleo); }
.ico-petroleo { background: var(--petroleo); color: var(--papel); }
.ico-hortela { background: var(--hortela); color: var(--petroleo); }
.ico-lilas { background: var(--lilas); color: var(--petroleo); }
.row-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.row-txt strong { font-weight: 620; line-height: 1.3; }
.row-txt > span { font-size: 0.875rem; color: var(--tinta-2); line-height: 1.4; }
.lock-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--tinta-3) !important; }
.lock-note .i { width: 14px; height: 14px; }

.diag-band {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  border-radius: var(--r-md); background: var(--petroleo); color: var(--papel); text-decoration: none;
}
.diag-band .i-lg { color: var(--acafrao); }
.diag-band-txt { display: grid; gap: 2px; flex: 1; }
.diag-band-txt strong { font-size: 1.15rem; font-weight: 700; font-stretch: 90%; }
.diag-band-txt span { font-size: 0.9375rem; color: rgb(244 246 241 / 0.82); }
@media (min-width: 920px) {
  .free-grid .diag-band { flex-direction: column; align-items: flex-start; padding: 26px; min-height: 100%; }
  .free-grid .diag-band .diag-band-txt strong { font-size: 1.6rem; line-height: 1.1; }
}

.course-grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .course-grid { grid-template-columns: 1fr 1fr; } }
.course-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--branco); border: 1px solid var(--linha); }
.cover { position: relative; aspect-ratio: 16 / 9; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.cover-title { font-size: clamp(2.3rem, 10.5vw, 2.9rem); font-weight: 800; font-stretch: 75%; line-height: 0.92; letter-spacing: -0.03em; max-width: 11ch; }
.cover-glyph { position: absolute; top: 20px; right: 20px; line-height: 0; }
.cover-glyph .i { width: 44px; height: 44px; stroke-width: 1.5; }
.cover-acafrao { background: var(--acafrao); color: var(--petroleo); }
.cover-petroleo { background: var(--petroleo); color: var(--papel); }
.cover-petroleo .cover-glyph { color: var(--acafrao); }
.cover-hortela { background: var(--hortela); color: var(--petroleo); }
.cover-lilas { background: var(--lilas); color: var(--petroleo); }
.course-body { display: grid; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.buy-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px; }
.price { font-size: 1.4rem; font-weight: 750; font-stretch: 88%; letter-spacing: -0.01em; }
.price-s { font-weight: 700; }

.steps { list-style: none; counter-reset: passo; padding: 0; display: grid; gap: 14px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: passo; display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: var(--r-md); background: var(--hortela); }
.steps li::before { content: counter(passo); font-size: 2.6rem; font-weight: 800; font-stretch: 75%; line-height: 1; color: var(--petroleo); margin-bottom: 6px; }
.steps strong { font-size: 1.15rem; font-weight: 700; font-stretch: 92%; }
.steps span { color: var(--tinta-2); }

.plans { display: grid; gap: 16px; }
@media (min-width: 920px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-lg); background: var(--branco); border: 1px solid var(--linha); }
.plan h3 { font-size: 1.35rem; }
.plan-price { font-size: 1.85rem; font-weight: 780; font-stretch: 82%; letter-spacing: -0.02em; line-height: 1.05; }
.plan ul { list-style: none; padding: 0; display: grid; gap: 9px; color: var(--tinta-2); margin-bottom: 6px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .i { color: var(--verde); margin-top: 2px; width: 1.1em; height: 1.1em; }
.plan .btn { margin-top: auto; }
.plan-club { background: var(--petroleo); border-color: var(--petroleo); color: var(--papel); }
.plan-club ul { color: rgb(244 246 241 / 0.84); }
.plan-club li .i { color: var(--acafrao); }

.about { display: grid; gap: 28px; align-items: center; }
@media (min-width: 820px) { .about { grid-template-columns: 300px 1fr; gap: 56px; } .portrait { width: 100%; } }
.portrait {
  display: grid; place-items: center; align-content: center; gap: 6px;
  aspect-ratio: 4 / 5; width: min(220px, 60%); border-radius: var(--r-lg); background: var(--lilas); color: var(--petroleo);
}
.portrait-p { font-family: var(--serif); font-size: 6rem; line-height: 1; font-weight: 500; }
.about-txt { display: grid; gap: 16px; }
.about-txt h2 { font-size: clamp(2rem, 6.5vw, 2.9rem); font-weight: 780; font-stretch: 82%; letter-spacing: -0.028em; line-height: 1; }
.quote-big { font-family: var(--serif); font-size: clamp(1.45rem, 4.4vw, 2rem); line-height: 1.3; font-weight: 450; max-width: 30ch; }

.ask-grid {
  list-style: none; padding: 0; display: grid; gap: 1px;
  background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 720px) { .ask-grid { grid-template-columns: 1fr 1fr; } }
.ask-grid li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--branco); }
.ask-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--hortela); color: var(--verde-texto); }
.ask-ico .i { width: 20px; height: 20px; }
.ask-grid .row-txt strong { font-size: 1.05rem; font-weight: 680; }
.ask-grid .row-txt > span { font-size: 0.95rem; }

.install { display: grid; gap: 36px; align-items: center; }
@media (min-width: 820px) { .install { grid-template-columns: 300px 1fr; gap: 64px; } }
.install-txt { display: grid; gap: 16px; justify-items: start; }
.install-txt h2 { font-size: clamp(2rem, 6.5vw, 2.9rem); font-weight: 780; font-stretch: 82%; letter-spacing: -0.028em; line-height: 1; }
.install-txt p { max-width: 50ch; }
.phone {
  justify-self: center; width: 230px; aspect-ratio: 9 / 18.5; padding: 10px;
  border-radius: 38px; background: var(--petroleo); box-shadow: var(--sombra);
}
.phone-screen { height: 100%; border-radius: 30px; background: var(--papel); padding: 16px 12px 0; display: grid; gap: 9px; align-content: start; position: relative; overflow: hidden; }
.ph-top { display: flex; justify-content: space-between; align-items: center; }
.ph-top .mark { width: 27px; height: 18px; }
.ph-av { width: 20px; height: 20px; border-radius: 50%; background: var(--petroleo); }
.ph-hello { font-weight: 750; font-stretch: 84%; font-size: 1.05rem; letter-spacing: -0.01em; }
.ph-continue { display: grid; gap: 3px; padding: 10px; border-radius: 12px; background: var(--petroleo); color: var(--papel); }
.ph-continue span { font-size: 0.55rem; opacity: 0.75; }
.ph-continue b { font-size: 0.85rem; font-stretch: 86%; }
.ph-continue i { display: block; height: 3px; width: 100%; border-radius: 3px; background: linear-gradient(to right, var(--acafrao) 30%, rgb(244 246 241 / 0.2) 30%); margin-top: 4px; }
.ph-quote { padding: 10px; border-radius: 12px; background: var(--lilas); font-family: var(--serif); font-size: 0.85rem; line-height: 1.15; }
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-tiles span { height: 44px; border-radius: 10px; }
.ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: grid; grid-template-columns: repeat(4, 1fr); place-items: center; background: rgb(244 246 241 / 0.9); border-top: 1px solid var(--linha); }
.ph-tabs span { width: 14px; height: 14px; border-radius: 4px; background: var(--tinta-3); opacity: 0.5; }
.ph-tabs span:first-child { background: var(--petroleo); opacity: 1; }

.site-foot { border-top: 1px solid var(--linha); margin-top: 32px; }
.site-foot-in { display: grid; gap: 10px; padding-block: 32px 96px; }

/* ============ Entrar ============ */
.auth { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 32px 20px 96px; }
.auth-card { width: min(440px, 100%); display: grid; gap: 16px; padding: 28px 24px; border-radius: var(--r-lg); background: var(--branco); border: 1px solid var(--linha); }
.auth-card h1 { font-size: 2.1rem; font-weight: 780; font-stretch: 82%; letter-spacing: -0.025em; }
.demo-box { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--linha); }
.demo-box .btn { flex: 1 1 180px; }
.auth .back { justify-self: center; }
.notfound { display: grid; gap: 14px; justify-items: start; }

.field { display: grid; gap: 6px; }
.field > span { font-weight: 620; font-size: 0.9375rem; }
input:not([type='checkbox']):not([type='file']), select, textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--linha); background: var(--branco);
}
input[type='file'] { font-size: 0.9375rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--petroleo); box-shadow: 0 0 0 3px rgb(242 167 27 / 0.4); }
textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
.check { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; }
.check input { width: 20px; height: 20px; accent-color: var(--petroleo); }

/* ============ App da aluna ============ */
.app { min-height: 100dvh; }
.app-top {
  position: sticky; top: 0; z-index: 20; height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  border-bottom: 1px solid rgb(14 59 67 / 0.08);
}
.avatar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; flex: none;
  background: var(--petroleo); color: var(--papel); font-weight: 700; font-size: 0.875rem; cursor: pointer;
}
.app-main {
  width: min(760px, 100%); margin-inline: auto; display: grid; gap: 26px; align-content: start;
  padding: 20px 16px calc(var(--tabs-h) + 56px + env(safe-area-inset-bottom));
}
.side { display: none; }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid rgb(14 59 67 / 0.08);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; font-size: 0.75rem; font-weight: 620; color: var(--tinta-3);
}
.tab-ico { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color 0.15s ease; }
.tab-ico .i { width: 22px; height: 22px; }
.tab[aria-current='page'] { color: var(--petroleo); }
.tab[aria-current='page'] .tab-ico { background: var(--hortela); }

@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: var(--top-h) 1fr; }
  .app-top { grid-column: 1 / -1; padding: 0 24px; }
  .side {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h));
    padding: 20px 14px; border-right: 1px solid var(--linha);
  }
  .side-foot { margin-top: auto; }
  .tabs { display: none; }
  .app-main { padding: 36px 32px 72px; }
}
.side-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: var(--tinta-2); font-weight: 520;
}
.side-link:hover { background: rgb(14 59 67 / 0.05); color: var(--tinta); }
.side-link[aria-current='page'] { background: var(--hortela); color: var(--petroleo); font-weight: 650; }

.page-head { display: grid; gap: 6px; }
.page-head h1, .greet h1 { font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 780; font-stretch: 82%; letter-spacing: -0.028em; line-height: 1; }
.page-head p, .greet p { color: var(--tinta-2); max-width: 58ch; }
.greet { display: grid; gap: 6px; }
.h2 { font-size: 1.25rem; font-weight: 720; font-stretch: 90%; letter-spacing: -0.01em; }
.back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; text-decoration: none; color: var(--tinta-2); font-weight: 600; font-size: 0.9375rem; }
.back:hover { color: var(--tinta); }

.continue {
  position: relative; display: grid; gap: 6px; padding: 22px 22px 24px;
  border-radius: var(--r-lg); background: var(--petroleo); color: var(--papel); text-decoration: none; overflow: hidden;
}
.continue::after {
  content: ''; position: absolute; right: -96px; bottom: -132px; width: 240px; height: 240px; border-radius: 50%;
  border: 30px solid rgb(242 167 27 / 0.12); pointer-events: none;
}
.continue-label { font-size: 0.875rem; color: rgb(244 246 241 / 0.74); }
.continue-title { font-size: clamp(1.5rem, 6vw, 1.85rem); font-weight: 760; font-stretch: 84%; letter-spacing: -0.02em; line-height: 1.08; padding-right: 64px; }
.continue-meta { font-size: 0.9375rem; color: rgb(244 246 241 / 0.82); }
.continue .bar { margin-top: 12px; background: rgb(244 246 241 / 0.18); position: relative; z-index: 1; }
.continue .bar > span { background: var(--acafrao); }
.continue-play {
  position: absolute; right: 20px; top: 22px; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--acafrao); color: var(--petroleo);
}
.continue-play .i { width: 24px; height: 24px; }

.reflect-teaser { display: grid; gap: 10px; padding: 22px; border-radius: var(--r-lg); background: var(--lilas); text-decoration: none; }
.reflect-quote { font-family: var(--serif); font-size: clamp(1.55rem, 6vw, 1.95rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; }
.listen-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 620px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  display: grid; gap: 4px; align-content: start; min-height: 132px; padding: 16px;
  border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); text-decoration: none;
  transition: border-color 0.15s ease;
}
.tile:hover { border-color: var(--petroleo); }
.tile-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; margin-bottom: 8px; }
.tile-ico .i { width: 22px; height: 22px; }
.tile strong { font-weight: 680; line-height: 1.2; }
.tile .sub { font-size: 0.875rem; color: var(--tinta-2); line-height: 1.3; }
.t-acafrao { background: var(--acafrao); color: var(--petroleo); }
.t-petroleo { background: var(--petroleo); color: var(--papel); }
.t-verde { background: var(--verde); color: #fff; }
.t-lilas { background: var(--lilas); color: var(--petroleo); }
.t-hortela { background: var(--hortela); color: var(--petroleo); }
.t-claro { background: var(--acafrao-claro); color: var(--petroleo); }

.live { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); }
.live-date { display: grid; justify-items: center; width: 64px; flex: none; padding: 8px 0; border-radius: 14px; background: var(--petroleo); color: var(--papel); font-size: 0.8125rem; line-height: 1.2; }
.live-date strong { font-size: 1.75rem; font-weight: 780; font-stretch: 78%; line-height: 1.05; }
.live-body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.live-body strong { font-weight: 680; line-height: 1.25; }

.install-hint {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; text-align: left; cursor: pointer;
  border-radius: var(--r-md); border: 0; background: var(--hortela);
}

.course-rows { list-style: none; padding: 0; display: grid; gap: 10px; }
.course-row {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); text-decoration: none;
}
a.course-row:hover { border-color: var(--petroleo); }
.course-row.is-locked { align-items: flex-start; }
.course-row-body { display: grid; gap: 4px; flex: 1; min-width: 0; }
.course-row-body strong { font-weight: 680; line-height: 1.25; }
.course-row-body .bar { margin-top: 4px; }
.course-link { text-decoration: none; }
.course-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.chev { color: var(--tinta-3); }
.thumb { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 14px; }
.thumb .i { width: 26px; height: 26px; }
.buy-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.club-banner { display: grid; gap: 16px; padding: 22px; border-radius: var(--r-lg); background: var(--petroleo); color: var(--papel); }
.club-banner h2 { font-size: 1.6rem; font-weight: 780; font-stretch: 82%; }
.club-banner p { margin-top: 6px; color: rgb(244 246 241 / 0.84); }
@media (min-width: 620px) { .club-banner { grid-template-columns: 1fr auto; align-items: center; } }

.course-hero { position: relative; display: grid; gap: 10px; align-content: end; min-height: 230px; padding: 24px 22px 24px; border-radius: var(--r-lg); }
.course-hero .cover-title { font-size: clamp(2.3rem, 10vw, 3.4rem); max-width: 12ch; }
.course-hero p { max-width: 46ch; }
.course-facts { opacity: 0.82; }
.course-status { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); }
.course-status-txt { display: grid; gap: 8px; }
@media (min-width: 620px) { .course-status { grid-template-columns: 1fr auto; align-items: center; gap: 24px; } }
.buy-box { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-md); background: var(--branco); border: 1.5px solid var(--acafrao); }
.buy-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }

.modules { display: grid; gap: 22px; }
.module-title { display: grid; gap: 2px; margin-bottom: 10px; font-size: 1.15rem; font-stretch: 90%; }
.module-n { font-size: 0.8125rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--tinta-3); }
.lessons { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; }
.lesson-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px;
  background: var(--branco); border: 0; text-align: left; text-decoration: none; cursor: pointer;
}
.lesson-row:hover { background: #fbfcfa; }
.lesson-ico { line-height: 0; color: var(--petroleo); }
.lesson-ico .i { width: 24px; height: 24px; }
.lesson-txt { display: grid; flex: 1; min-width: 0; }
.lesson-txt strong { font-weight: 620; line-height: 1.3; }
.lesson-meta { display: flex; align-items: center; gap: 8px; flex: none; }
.lesson-row.is-done .lesson-ico { color: var(--verde); }
.lesson-row.is-current { background: #fff7e6; }
.lesson-row.is-current .lesson-ico { color: var(--acafrao-2); }
.lesson-row.is-locked { color: var(--tinta-2); }
.lesson-row.is-locked .lesson-ico { color: var(--tinta-3); }
.lesson-row.is-locked strong { font-weight: 520; }

.player {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 9; margin-inline: -16px; background: var(--petroleo); color: var(--papel);
}
@media (min-width: 620px) { .player { margin-inline: 0; border-radius: var(--r-lg); } }
.player-glyph { position: absolute; right: -24px; bottom: -36px; opacity: 0.09; line-height: 0; color: var(--acafrao); }
.player-glyph .i { width: 230px; height: 230px; stroke-width: 1.25; }
.player-course { position: absolute; left: 16px; top: 14px; font-size: 0.8125rem; color: rgb(244 246 241 / 0.8); }
.player-btn {
  position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  border: 0; background: var(--acafrao); color: var(--petroleo); cursor: pointer; box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}
.player-btn .i { width: 30px; height: 30px; }
.player.is-playing .player-btn { opacity: 0.9; transform: scale(0.92); }
.player-time { position: absolute; left: 16px; bottom: 26px; font-size: 0.8125rem; color: rgb(244 246 241 / 0.85); font-variant-numeric: tabular-nums; }
.player-bar { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 5px; border-radius: 5px; background: rgb(244 246 241 / 0.22); overflow: hidden; }
.player-fill { display: block; height: 100%; background: var(--acafrao); transition: width 0.25s linear; }
.player.is-locked { gap: 10px; align-content: center; text-align: center; padding: 20px; }

.lesson-head { display: grid; gap: 6px; }
.lesson-head h1 { font-size: clamp(1.8rem, 6.5vw, 2.3rem); font-weight: 760; font-stretch: 84%; letter-spacing: -0.025em; line-height: 1.04; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.upsell { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-md); background: var(--hortela); }

.ask-form { display: grid; gap: 10px; }
.ask-form .btn { justify-self: start; }
.q-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.q { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); }
.q-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar-s { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hortela); font-size: 0.75rem; font-weight: 700; flex: none; }
.q-lesson { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--verde-texto); font-weight: 600; text-decoration: none; }
.q-lesson .i { width: 16px; height: 16px; }
.answer { display: grid; gap: 6px; margin-top: 4px; padding: 14px 16px; border-radius: 12px; background: var(--papel); border-left: 3px solid var(--verde); }
.answer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.answer p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; }
.waiting { display: flex; align-items: center; gap: 8px; color: var(--tinta-2); }
.waiting .i { width: 16px; height: 16px; }
.empty { padding: 14px 0; }

.reflist { display: grid; }
.refl { border-bottom: 1px solid var(--linha); padding: 14px 0; }
.refl summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.refl summary::-webkit-details-marker { display: none; }
.refl-title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.refl p { margin-top: 10px; font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; color: var(--tinta-2); max-width: 62ch; }

.reflection { display: grid; gap: 14px; padding: 26px 22px; border-radius: var(--r-lg); background: var(--lilas); }
.reflection-title { font-family: var(--serif); font-size: clamp(2.1rem, 8.5vw, 3rem); line-height: 1.05; font-weight: 500; font-stretch: normal; letter-spacing: -0.02em; }
.reflection-body { display: grid; gap: 14px; margin-top: 6px; }
.reflection-body p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; max-width: 60ch; }
.listen {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 10px 16px;
  border: 0; border-radius: 999px; background: var(--petroleo); color: var(--papel); font-weight: 600; cursor: pointer;
}
.exercise { padding: 20px; border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); }
.exercise .btn { justify-self: start; }
.mentor { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); }
.mentor p { margin-top: 6px; }
@media (min-width: 620px) { .mentor { grid-template-columns: 1fr auto; align-items: center; } }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats div { display: grid; gap: 2px; padding: 14px; border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); }
.stats strong { font-size: 1.7rem; font-weight: 780; font-stretch: 80%; line-height: 1.05; }
.stats span { font-size: 0.8125rem; color: var(--tinta-2); line-height: 1.3; }
.badges { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.badge {
  display: grid; justify-items: center; align-content: start; gap: 8px; padding: 16px 8px; text-align: center;
  border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha);
  font-size: 0.8125rem; font-weight: 620; line-height: 1.25; color: var(--tinta-3);
}
.badge-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px dashed var(--linha); }
.badge.is-on { color: var(--tinta); }
.badge.is-on .badge-ico { border: 0; background: var(--acafrao); color: var(--petroleo); }
.cert { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r-md); background: var(--hortela); }
.cert .i-lg { color: var(--verde-texto); }

.tool-row .btn { flex: none; }
@media (max-width: 400px) { .hide-xs { display: none; } }

/* ============ Diagnóstico ============ */
.diag { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.diag-top { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.diag-main { width: min(620px, 100% - 40px); margin: 0 auto; padding: 24px 0 96px; display: grid; gap: 16px; align-content: start; }
.diag-bar { height: 5px; }
.diag-q { margin-top: 10px; font-size: clamp(2rem, 7.5vw, 2.7rem); font-weight: 780; font-stretch: 80%; letter-spacing: -0.025em; line-height: 1.02; }
.diag-opts { display: grid; gap: 10px; margin-top: 10px; }
.diag-opt {
  padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--branco);
  text-align: left; font-size: 1.0625rem; font-weight: 520; cursor: pointer;
}
.diag-opt:hover { border-color: var(--petroleo); }
.diag-result { font-size: clamp(2.8rem, 12vw, 4.2rem); font-weight: 800; font-stretch: 75%; letter-spacing: -0.035em; line-height: 0.92; }
.diag-text { font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; max-width: 40ch; }
.diag-reco { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); text-decoration: none; }
.diag-reco > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.diag-reco strong { font-weight: 700; }

/* ============ Painel da Paty ============ */
.panel-top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgb(14 59 67 / 0.08); }
.panel-top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1080px, 100% - 32px); height: var(--top-h); margin-inline: auto; }
.panel-main { width: min(1080px, 100% - 32px); margin-inline: auto; display: grid; gap: 22px; padding: 26px 0 104px; }
.seg { display: flex; gap: 4px; padding: 4px; overflow-x: auto; border-radius: 14px; background: var(--hortela); scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a, .seg button {
  flex: none; padding: 9px 14px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  text-decoration: none; white-space: nowrap; font-weight: 620; font-size: 0.9375rem; color: var(--tinta-2);
}
.seg [aria-current='page'], .seg [aria-pressed='true'] { background: var(--branco); color: var(--petroleo); box-shadow: 0 1px 2px rgb(14 59 67 / 0.14); }
.seg-sm { justify-self: start; }
form.box { max-width: 680px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { display: grid; gap: 8px; align-content: space-between; padding: 16px 18px; border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); }
.kpi span { font-size: 0.875rem; color: var(--tinta-2); line-height: 1.3; }
.kpi strong { font-size: 2.2rem; font-weight: 780; font-stretch: 78%; line-height: 1; letter-spacing: -0.02em; }
.split { display: grid; gap: 16px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.box { display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: var(--r-md); background: var(--branco); border: 1px solid var(--linha); }
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mini-q { list-style: none; padding: 0; display: grid; gap: 12px; }
.mini-q li { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.mini-q li:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-q p { color: var(--tinta-2); }
.admin-q { list-style: none; padding: 0; display: grid; gap: 12px; }
.events { list-style: none; padding: 0; display: grid; }
.event { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.event:last-child { border-bottom: 0; }
.ev-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; }
.ev-ico .i { width: 18px; height: 18px; }
.ev-compra .ev-ico, .ev-assinatura .ev-ico { background: var(--hortela); color: var(--verde-texto); }
.ev-reembolso .ev-ico { background: var(--erro-claro); color: var(--erro); }
.ev-main { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ev-main strong { font-weight: 650; }
.ev-side { display: grid; justify-items: end; gap: 2px; text-align: right; flex: none; }
.ev-effect { font-size: 0.8125rem; font-weight: 650; color: var(--verde-texto); }
.ev-reembolso .ev-effect { color: var(--erro); }
.hotmart { display: flex; gap: 14px; align-items: flex-start; }
.ok-ico { color: var(--verde); line-height: 0; }
.ok-ico .i { width: 28px; height: 28px; }
.table-wrap { overflow-x: auto; margin-inline: -4px; }
.table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table th { text-align: left; font-size: 0.8125rem; font-weight: 620; color: var(--tinta-2); padding: 8px 4px; border-bottom: 1px solid var(--linha); }
.table td { padding: 12px 4px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.prog { display: flex; align-items: center; gap: 10px; }
.bar-s { width: 90px; flex: none; }

/* ============ Janelas, avisos e o botão do protótipo ============ */
.overlay { position: fixed; inset: 0; z-index: 50; display: none; }
.overlay.open { display: block; }
.backdrop { position: absolute; inset: 0; background: rgb(14 59 67 / 0.38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadein 0.2s ease; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 90dvh; overflow: auto;
  display: grid; gap: 16px; padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0; background: var(--papel); box-shadow: 0 -12px 40px rgb(14 59 67 / 0.2);
  animation: up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet:focus { outline: none; }
@media (min-width: 640px) {
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(480px, 100% - 40px); border-radius: 24px; transform: translate(-50%, -50%); padding: 24px; animation: pop 0.22s ease; }
}
.sheet h2 { font-size: 1.4rem; font-weight: 760; font-stretch: 86%; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: rgb(14 59 67 / 0.07); cursor: pointer; }
.buy-item { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--branco); border: 1px solid var(--linha); }
.buy-item > span:last-child { display: grid; gap: 2px; }
.done-mark { color: var(--verde); line-height: 0; }
.done-mark .i { width: 52px; height: 52px; }
.role-list { display: grid; gap: 8px; }
.role { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--branco); text-align: left; cursor: pointer; }
.role > .i { width: 24px; height: 24px; color: var(--petroleo); }
.role > span { display: grid; gap: 1px; }
.role.is-on { border-color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--petroleo); }
.me { display: flex; align-items: center; gap: 12px; min-width: 0; }
.me > span:last-child { display: grid; min-width: 0; }
.menu-list { display: grid; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 4px;
  border: 0; border-bottom: 1px solid var(--linha); background: none; text-align: left; text-decoration: none; font-weight: 550; cursor: pointer;
}
.menu-item:last-child { border-bottom: 0; }
.steps-list { padding-left: 1.3em; display: grid; gap: 10px; }
.steps-list .i { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }

.toasts {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60;
  display: grid; gap: 8px; width: min(420px, 100% - 32px); transform: translateX(-50%); pointer-events: none;
}
body.has-tabs .toasts { bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom)); }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  background: var(--petroleo); color: var(--papel); font-weight: 520; box-shadow: var(--sombra);
  animation: toast-in 0.25s ease; transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast .i { color: var(--acafrao); }
.toast.out { opacity: 0; transform: translateY(8px); }

.proto-pill {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: 999px; border: 1px solid rgb(14 59 67 / 0.16); color: var(--petroleo);
  font-weight: 650; font-size: 0.875rem; cursor: pointer; box-shadow: 0 6px 18px rgb(14 59 67 / 0.14);
}
.proto-pill .i { width: 18px; height: 18px; }
body.has-tabs .proto-pill { bottom: calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) {
  body.has-tabs .toasts { bottom: 24px; }
  body.has-tabs .proto-pill { bottom: 14px; }
}

@keyframes fadein { from { opacity: 0; } }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -47%) scale(0.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}