/* ==========================================================================
   Grand Chase PC & Mobile. Em telas grandes, 1rem = 16px em 1536px de largura:
   toda a pagina escala junto, mantendo as proporcoes do modelo.
   Abaixo de 1180px o layout passa a fluir em colunas.
   ========================================================================== */
:root {
  --noite: #0b0a26;
  --painel: #0c0e2c;
  --painel-2: #15143a;
  --ouro: #e3b558;
  --ouro-claro: #ffe9a8;
  --ouro-escuro: #8a5a17;
  --creme: #f6e7c8;
  --texto: #e9e2d2;
  --vinho: #5d0b1b;
  --borda-ouro: linear-gradient(180deg, #ffe9a8, #c58d2c 45%, #8a5a17 70%, #f0c873);
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --titulo: "Cinzel", "Alegreya", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--noite); }

/* Barra de rolagem dourada, no degrade do botao principal */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--noite); border-left: 1px solid rgba(227, 181, 88, .35); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #ffe08a 0%, #f6b93a 48%, #e0931c 52%, #f8c653 100%);
  border: 1px solid #8a5a17;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #fff1bd 0%, #ffcb55 48%, #f0a52c 52%, #ffd872 100%); }
::-webkit-scrollbar-corner { background: var(--noite); }
/* Firefox nao tem os seletores acima. No Chrome, scrollbar-color os anularia. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #f6b93a var(--noite); }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--noite);
  color: var(--texto);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }
section[id], aside[id] { scroll-margin-top: 1rem; }

.pular {
  position: absolute; left: .5rem; top: -4rem; z-index: 20;
  padding: .6rem 1rem; background: var(--ouro); color: #2a1604; font-weight: 700;
}
.pular:focus { top: .5rem; }

.rubi { width: 1.25em; height: 1.25em; flex: none; filter: drop-shadow(0 0 .25em rgba(255, 60, 40, .55)); }

/* --------- Cena de fundo --------- */
.cena {
  --cena-w: 96rem;
  position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.cena img { width: var(--cena-w); max-width: none; height: auto; margin-left: calc((100% - var(--cena-w)) / 2); }

/* --------- Menu --------- */
.topo { position: relative; z-index: 6; display: flex; justify-content: center; padding-top: .4rem; }
.chanfro { --c: .8rem; position: relative; isolation: isolate; }
.chanfro::before, .chanfro::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% 50%, calc(100% - var(--c)) 100%, var(--c) 100%, 0 50%);
}
.chanfro::before { inset: 0; background: var(--borda-ouro); }
.chanfro::after { inset: 2px; background: linear-gradient(180deg, #171538, #090a22); }

.menu {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  width: 49rem; max-width: calc(100vw - 1rem); min-height: 2.15rem; padding: 0 1rem;
  font-family: var(--titulo); font-weight: 700; font-size: 1rem; letter-spacing: .03em;
  color: var(--creme); text-transform: uppercase;
}
.menu a {
  display: flex; align-items: center; min-height: 2.15rem; padding: 0 .6rem;
  transition: color .2s, text-shadow .2s;
}
.menu a:hover, .menu a:focus-visible, .menu a[aria-current="page"] { color: var(--ouro-claro); text-shadow: 0 0 .7em rgba(255, 196, 90, .85); }
.menu .rubi { width: .8em; height: .8em; }
.menu .ponta { width: 1.15em; height: 1.15em; margin-inline: auto; }

/* --------- Hero --------- */
/* Corta so na lateral: as personagens seguem descendo atras do painel. */
.hero { position: relative; z-index: 2; height: 23.3rem; overflow-x: clip; }
.hero-texto {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-top: -.3rem;
}
.logo {
  width: 28.6rem; height: auto;
  filter: drop-shadow(0 .3rem .7rem rgba(0, 0, 0, .55));
  margin-bottom: -3rem;
}
.hero h1 {
  position: relative; text-wrap: balance;
  font-family: var(--serif); font-weight: 800; font-size: 2.42rem; line-height: 1.1;
  background: linear-gradient(180deg, #fff6df 15%, #f3d59a 55%, #c9974a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .12rem .2rem rgba(0, 0, 0, .9));
}
.hero p {
  font-size: 1.16rem; color: #f3ecdd;
  text-shadow: 0 1px .25rem rgba(0, 0, 0, .9), 0 0 .8rem rgba(0, 0, 0, .55);
}

.heroi, .heroina { position: absolute; z-index: 1; height: auto; max-width: none; pointer-events: none; }
.heroi { width: 27.7rem; left: calc(50% - 44.75rem); top: -.65rem; }
.heroina { width: 29.75rem; left: calc(50% + 18.25rem); top: -2.525rem; }

.fio {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: min(30rem, 86%); margin: .32rem auto .45rem; font-size: .68rem;
}
.fio::before, .fio::after { content: ""; flex: 1; height: 1px; }
.fio::before { background: linear-gradient(90deg, transparent, var(--ouro)); }
.fio::after { background: linear-gradient(90deg, var(--ouro), transparent); }

/* --------- Botoes --------- */
.botao {
  --c: 1.5rem;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: space-between; gap: .7rem;
  font-family: var(--titulo); font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  text-align: center; line-height: 1.1;
  transition: transform .18s ease, filter .18s ease;
}
.botao::before, .botao::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% 50%, calc(100% - var(--c)) 100%, var(--c) 100%, 0 50%);
}
.botao::before { inset: 0; background: linear-gradient(180deg, #fff1bd, #b97f25 55%, #fbdc8a); }
.botao span { flex: 1; }
.botao-ouro {
  color: #3b1e05; font-size: 1.32rem; white-space: nowrap;
  width: 27.8rem; max-width: 100%; min-height: 3.3rem; padding: .3rem 1.05rem;
  margin-top: .4rem; filter: drop-shadow(0 .25rem .5rem rgba(0, 0, 0, .6));
}
.botao-ouro::after { inset: 3px; background: linear-gradient(180deg, #ffe08a 0%, #f6b93a 48%, #e0931c 52%, #f8c653 100%); }
.botao-ouro:hover, .botao-ouro:focus-visible { transform: translateY(-2px) scale(1.015); filter: drop-shadow(0 .3rem .8rem rgba(255, 190, 70, .55)) brightness(1.06); }
.botao-menor { font-size: .96rem; gap: .35rem; width: 100%; min-height: 3rem; padding: .3rem .8rem; --c: 1.2rem; margin-top: auto; }
.botao-rubi {
  color: #fde8b7; font-size: 1.42rem;
  text-shadow: 0 1px .15rem #000;
  min-height: 3rem; padding: .25rem .95rem;
}
.botao-rubi::after { inset: 2.5px; background: linear-gradient(180deg, #8b1428, #5d0b1b 55%, #430612); }

/* --------- Painel --------- */
.painel {
  position: relative; z-index: 4;
  width: 77.8rem; max-width: calc(100vw - 1.5rem); margin-inline: auto;
  margin-left: calc(50% - 39.1rem);
  background: linear-gradient(180deg, rgba(13, 15, 46, .96), rgba(9, 11, 34, .97));
  border: 2px solid var(--ouro);
  outline: 1px solid rgba(227, 181, 88, .35); outline-offset: 2px;
  box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .55);
}
.painel-topo { display: grid; grid-template-columns: 57.5rem 1fr; }
.novidades { padding: .85rem 1.2rem 1.55rem 1.8rem; }
.titulo-linha {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--titulo); font-weight: 700; font-size: 1.5rem; letter-spacing: .05em;
  color: var(--creme); text-transform: uppercase; margin-bottom: .75rem;
}
.titulo-linha .rubi { font-size: .95em; }
.titulo-linha::after { content: ""; flex: 1; height: 1px; margin-left: .6rem; background: linear-gradient(90deg, var(--ouro), rgba(227, 181, 88, .1)); }

.cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.cartao {
  position: relative; display: block; overflow: hidden;
  border: 1.5px solid var(--ouro); border-radius: .35rem;
  background: var(--painel-2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 .25rem .8rem rgba(0, 0, 0, .4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cartao img { width: 100%; height: auto; aspect-ratio: 423 / 169; object-fit: cover; transition: transform .35s ease; }
.cartao h3 {
  font-family: var(--serif); font-weight: 700; font-size: 1.62rem; color: var(--creme);
  text-align: center; padding: .4rem .5rem .55rem; line-height: 1.15;
  border-top: 1px solid rgba(227, 181, 88, .75);
}
.cartao:hover, .cartao:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--ouro-claro), 0 .5rem 1.4rem rgba(255, 190, 70, .25); }
.cartao:hover img, .cartao:focus-visible img { transform: scale(1.035); }
.etiqueta {
  position: absolute; z-index: 2; left: .55rem; top: .55rem;
  padding: .12rem 1.05rem .12rem .9rem;
  font-family: var(--titulo); font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  color: #fde8b7; text-transform: uppercase;
  background: linear-gradient(180deg, #971a2d, #640c1d);
  border: 1px solid var(--ouro);
  clip-path: polygon(0 0, 100% 0, calc(100% - .55rem) 100%, 0 100%);
}

.bemvindo { position: relative; padding: 1rem .95rem 1.1rem .6rem; display: flex; }
.bemvindo::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--ouro), rgba(227, 181, 88, .35));
}
.rubi-topo { position: absolute; z-index: 2; top: -1rem; left: calc(50% - 1.05rem); width: 2.6rem; height: 2.9rem; transform: scaleY(1.15); }
.bemvindo-corpo {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.1rem 1rem .95rem;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(150, 25, 45, .55), transparent 70%),
    linear-gradient(180deg, #5d0a1b, #3c0612);
  border: 2px solid var(--ouro); border-radius: .4rem;
  box-shadow: inset 0 0 0 3px rgba(60, 6, 18, 1), inset 0 0 0 4px rgba(227, 181, 88, .6), 0 .3rem .9rem rgba(0, 0, 0, .5);
}
.bemvindo h2 { font-family: var(--titulo); font-weight: 700; font-size: 1.65rem; line-height: 1.12; letter-spacing: .03em; color: var(--ouro-claro); text-transform: uppercase; max-width: 11em; }
.bemvindo .fio { font-size: .55rem; margin-block: .5rem .55rem; }
.bemvindo p { font-size: 1rem; line-height: 1.32; color: #f4e6d0; margin-bottom: .75rem; max-width: 16.5em; }

/* --------- Aventura --------- */
.aventura { padding: 0 1.8rem 1.1rem; }
.titulo-centro {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  font-family: var(--titulo); font-weight: 700; font-size: 1.62rem; letter-spacing: .09em;
  color: var(--creme); text-transform: uppercase; text-align: center;
  padding-top: 1rem; margin-bottom: 1.05rem;
  border-top: 1px solid rgba(227, 181, 88, .55);
}
.titulo-centro::before, .titulo-centro::after { content: ""; flex: 1; max-width: 16rem; height: 1px; }
.titulo-centro::before { background: linear-gradient(90deg, transparent, var(--ouro)); }
.titulo-centro::after { background: linear-gradient(90deg, var(--ouro), transparent); }
.aventuras { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-inline: .2rem; }
.destino {
  position: relative; display: block; padding-bottom: .25rem;
  transition: transform .2s ease;
}
.destino img {
  width: 100%; height: auto; aspect-ratio: 541 / 144; object-fit: cover;
  border: 2px solid var(--ouro); border-radius: .3rem;
  box-shadow: 0 0 0 1px #000, 0 .3rem .9rem rgba(0, 0, 0, .5);
}
.destino .botao {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: max-content; min-width: 68%; max-width: 96%; white-space: nowrap;
}
.destino:hover, .destino:focus-visible { transform: translateY(-3px); }
.destino:hover .botao, .destino:focus-visible .botao { filter: brightness(1.2); }

/* --------- Rodape --------- */
.rodape {
  position: relative; z-index: 4; text-align: center;
  padding: .85rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  margin-top: auto; font-size: .98rem; color: var(--creme);
}
.rodape strong { display: block; font-family: var(--titulo); font-weight: 700; letter-spacing: .03em; }
.rodape em { font-size: .95em; color: #c9c2d6; }

/* --------- Pagina de guia --------- */
.interna .cena { opacity: .85; }
.guia {
  --largura: 54rem;
  width: var(--largura); margin: 1.5rem auto 1rem;
  padding: 1.5rem 2.5rem 2.2rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.logo-guia { width: 15rem; height: auto; margin-bottom: .4rem; }
.guia h1 { font-family: var(--titulo); font-weight: 700; font-size: 2.2rem; line-height: 1.15; color: var(--ouro-claro); }
.guia-capa { width: 100%; height: auto; border: 2px solid var(--ouro); border-radius: .35rem; margin: .4rem 0 1.4rem; }
.passos { list-style: none; counter-reset: passo; margin: 0 0 1.6rem; padding: 0; width: 100%; text-align: left; display: grid; gap: 1rem; }
.passos li {
  counter-increment: passo; position: relative;
  padding: .95rem 1.1rem .95rem 3.9rem;
  background: rgba(21, 20, 58, .75); border: 1px solid rgba(227, 181, 88, .55); border-radius: .35rem;
}
.passos li::before {
  content: counter(passo); position: absolute; left: .95rem; top: .95rem;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  font-family: var(--titulo); font-weight: 800; color: #3b1e05;
  background: linear-gradient(180deg, #ffe08a, #e0931c); border-radius: 50%;
}
.passos h2 { font-family: var(--titulo); font-weight: 700; font-size: 1.25rem; color: var(--creme); margin-bottom: .2rem; }
.passos p { font-size: 1.12rem; }
.passo-links { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .6rem; }
.passo-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ouro-claro); font-weight: 700; font-size: 1.08rem; text-decoration: underline; text-underline-offset: .2em; }
.passo-links a:hover { color: #fff; }

/* ==========================================================================
   Telas grandes: escala proporcional ao modelo
   ========================================================================== */
@media (min-width: 1180px) {
  html { font-size: min(calc(100vw / 96), 28px); }
  /* Em ultrawide, a arte se dissolve no fundo em vez de terminar em corte. */
  @media (min-width: 2689px) {
    .cena img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .heroina { -webkit-mask-image: linear-gradient(270deg, transparent, #000 10%); mask-image: linear-gradient(270deg, transparent, #000 10%); }
  }
}

/* ==========================================================================
   Tablets e notebooks pequenos
   ========================================================================== */
@media (max-width: 1179.98px) {
  html { font-size: clamp(15px, 1.05vw + 8.5px, 18px); }
  .cena { --cena-w: max(100vw, 62rem); }
  .cena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, transparent, var(--noite) 62%); }

  .hero { height: auto; padding: .5rem 1rem 2rem; overflow: hidden; overflow: clip; }
  .menu, .menu a { min-height: 44px; }
  .hero-texto { margin-top: 0; }
  .logo { width: min(26rem, 46vw); margin-bottom: -.4rem; }
  .hero h1 { font-size: clamp(1.7rem, 3.4vw + .5rem, 2.5rem); max-width: 56vw; }
  .hero p { max-width: 50vw; font-size: 1.1rem; }
  .botao-ouro { width: min(26rem, 50vw); font-size: clamp(.95rem, 1.5vw + .4rem, 1.3rem); }
  .botao-ouro.botao-menor { width: min(24rem, 100%); }

  .heroi, .heroina {
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
  }
  .heroi { width: 38vw; left: -3vw; top: 1vw; }
  .heroina { width: 41vw; left: auto; right: -3vw; top: -1vw; }

  .painel { width: auto; max-width: none; margin: 0 clamp(.75rem, 2.5vw, 2rem); }
  .painel-topo { grid-template-columns: 1fr; }
  .novidades { padding: 1rem 1.25rem 1.25rem; }
  .cartoes { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .cartao h3 { font-size: clamp(1.1rem, 1.3vw + .75rem, 1.5rem); }

  .bemvindo { padding: 0 1.25rem 1.5rem; }
  .bemvindo::before { display: none; }
  .bemvindo-corpo { padding: 1.5rem 1.25rem 1.25rem; }
  .bemvindo h2 { max-width: none; }
  .bemvindo p { max-width: 34em; font-size: 1.1rem; }
  .bemvindo .botao { margin-top: 0; }
  .rubi-topo { left: calc(50% - 1.3rem); top: -1.2rem; }

  .aventura { padding: 0 1.25rem 1.4rem; }
  .aventuras { gap: 1.25rem; padding-inline: 0; }
  .destino .botao { min-width: 80%; font-size: clamp(.9rem, 1.55vw + .25rem, 1.4rem); min-height: 2.75rem; }
  .guia { width: auto; max-width: 54rem; margin: 1.25rem clamp(.75rem, 2.5vw, auto) 1rem; }
}

/* Celular deitado e telas baixas: personagens nao empurram o texto. */
@media (max-width: 1179.98px) and (max-height: 500px) and (orientation: landscape) {
  .logo { width: min(17rem, 34vw); }
  .hero { padding-bottom: 1.25rem; }
  .hero h1 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
  .heroi { width: 31vw; left: 0; }
  .heroina { width: 33vw; right: 0; }
}

/* ==========================================================================
   Celulares
   ========================================================================== */
@media (max-width: 700px) {
  html { font-size: clamp(14.5px, 3.6vw + 2.5px, 18px); }
  .cena { --cena-w: max(190vw, 44rem); }

  .topo { padding-top: max(.3rem, env(safe-area-inset-top)); }
  .menu {
    width: calc(100vw - .6rem); max-width: none; gap: 0; padding: 0 .75rem; min-height: 44px;
    font-size: clamp(10px, 3.2vw, 15px); letter-spacing: 0; justify-content: space-between;
  }
  .menu a { min-height: 44px; padding: 0 clamp(.1rem, 1vw, .5rem); }
  .menu .rubi { width: .62em; height: .62em; }
  .menu .ponta { display: none; }

  .hero { padding: 0 1rem 1.6rem; }
  .hero-texto { padding-top: 40vw; }
  .logo { width: min(84vw, 26rem); margin-bottom: -.2rem; }
  .hero h1 { max-width: none; font-size: clamp(1.55rem, 7vw, 2.4rem); }
  .hero p { max-width: 24em; font-size: clamp(1rem, 4vw, 1.2rem); }
  .botao-ouro { width: min(100%, 24rem); min-height: 3.1rem; font-size: clamp(.92rem, 4.1vw, 1.25rem); padding-inline: .8rem; --c: 1.1rem; gap: .4rem; }
  .botao-ouro .rubi { width: 1em; height: 1em; }

  .heroi, .heroina {
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 92%);
  }
  .heroi { width: 72vw; left: -14vw; top: 1vw; }
  .heroina { width: 75vw; right: -19vw; top: -2vw; }

  .painel { margin: 0 .6rem; outline-offset: 1px; }
  .novidades { padding: .9rem .8rem 1rem; }
  .titulo-linha { font-size: clamp(1rem, 4.6vw, 1.4rem); letter-spacing: .02em; }
  .titulo-linha::after { margin-left: .2rem; }
  .cartoes { grid-template-columns: 1fr; }
  .cartao h3 { font-size: clamp(1.2rem, 5.4vw, 1.6rem); }

  .bemvindo { padding: .5rem .8rem 1.2rem; }
  .bemvindo-corpo { padding-inline: .9rem; }
  .bemvindo h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .bemvindo p { font-size: 1.05rem; }
  .rubi-topo { top: -.75rem; }
  .botao-menor { font-size: clamp(.92rem, 4.1vw, 1.1rem); }

  .aventura { padding: 0 .8rem 1.1rem; }
  .titulo-centro { font-size: clamp(1.02rem, 4.7vw, 1.5rem); letter-spacing: .03em; gap: .5rem; }
  .aventuras { grid-template-columns: 1fr; gap: 1rem; }
  .destino img { aspect-ratio: 2.9 / 1; }
  .destino .botao { min-width: 86%; font-size: clamp(.84rem, 3.9vw, 1.15rem); --c: 1rem; padding-inline: .6rem; gap: .35rem; }
  .destino .rubi { width: 1em; height: 1em; }

  .rodape { font-size: .92rem; }
  .guia { margin: .9rem .6rem .75rem; padding: 1rem .8rem 1.4rem; }
  .logo-guia { width: 12rem; }
  .guia h1 { font-size: clamp(1.35rem, 6.2vw, 2rem); }
  .passos li { padding: .85rem .8rem .85rem 3.2rem; }
  .passos li::before { left: .6rem; top: .85rem; }
}

/* Telas muito estreitas: dobraveis fechados e celulares antigos */
@media (max-width: 340px) {
  .menu { padding: 0 .55rem; }
  .menu .rubi { display: none; }
  .destino .rubi, .botao-ouro .rubi { display: none; }
}

@media (pointer: coarse) {
  .menu, .menu a { min-height: 44px; }
  .botao-menor, .botao-rubi { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}