:root {
       --padding: clamp(1rem, 4vw, 1.5rem);
       --font-base: clamp(1rem, 4vw, 1.25rem);
       --font-small: clamp(0.875rem, 3vw, 1rem);
       --icon-size: 3rem;
     }

     html,
     body {
       overflow-x: hidden;
     }

     body {
       font-family: Arial, sans-serif;
       margin: 0;
       padding-bottom: 6rem;
       background-color: #f2f2f2;
       font-size: var(--font-base);
     }

* {
  -webkit-tap-highlight-color: transparent;
}

.tela{
  display:none;
}

.tela.ativa{
  display:block;
}

#anuncios.tela.ativa{
  display:flex;
  justify-content:center;
  width:100%;
}

.hidden {
  display: none !important;
}

button,
#bottomBar button,
.btn-principal,
.btn-secundario,
#btnVoltar {
  transition: transform 0.15s ease, background-color 0.2s ease;
}

button:active,
#bottomBar button:active,
.btn-principal:active,
.btn-secundario:active,
#btnVoltar:active {
  transform: scale(0.92);
}

.top-bar {
  background-color: #fff;
  padding: 0.5rem var(--padding);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-site {
height: 2.5rem;
flex-shrink: 0;
margin-right: 0.3rem; 
} 

.search-container {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

     .search-container input {
       width: 100%;
       padding: 0.625rem 0.75rem 0.625rem 2.5rem;
       border-radius: 1.5rem;
       border: 1px solid #ccc;
       font-size: var(--font-base);
       box-sizing: border-box;
     }

     .search-container .icon {
       position: absolute;
       left: 0.75rem;
       top: 50%;
       transform: translateY(-50%);
       color: #888;
       font-size: 1.25rem;
     }

.menu-icon {
  font-size: var(--icon-size);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.top-title {
  flex: 1;
  font-weight: bold;
  font-size: var(--font-base);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#btnVoltar {
  background: none;
  border: none;
  font-size: var(--icon-size);
  cursor: pointer;
  padding: 0 1rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#btnVoltar:hover {
  color: #007bff;
}

#btnVoltar:active {
  transform: scale(0.95);
}

     #containerExtras {
       margin-bottom: 1rem;
     }

     #containerExtras label {
       display: flex !important;
       flex-direction: row !important;
       align-items: center !important;
       gap: 0.5rem !important;
       font-size: var(--font-base);
       font-weight: normal;
       color: #333;
       cursor: pointer;
     }

     #containerExtras input[type="checkbox"] {
       appearance: auto;
       margin: 0;
     }

     .extras-container {
       margin-top: 0;
       margin-bottom: 1rem;
     }

     .toggle-extras {
       width: 100%;
       text-align: left;
       background-color: #fafafa;
       border: 1px solid #ccc;
       border-radius: 0.75rem;
       padding: 0.6rem 1rem;
       font-size: var(--font-base);
       color: #333;
       cursor: pointer;
       box-sizing: border-box;
       margin-top: 0;
       margin-bottom: 0.75rem;
     }

     .toggle-extras:hover,
     .toggle-extras:focus {
       background-color: #fff;
       border-color: #007bff;
       box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
       outline: none;
     }

     .hidden {
       display: none;
     }

     .checkbox-list {
       margin-top: 0.75rem;
       padding: 0.75rem;
       border: 1px solid #ccc;
       border-radius: 0.75rem;
       background: #fff;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
     }

     .checkbox-list.hidden {
       display: none;
     }

     .checkbox-list label {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: var(--font-base);
       font-weight: normal;
       color: #333;
       cursor: pointer;
     }

     .checkbox-list input[type="checkbox"] {
       width: 1.2em;
       height: 1.2em;
       min-width: 1rem;
       min-height: 1rem;
       margin: 0;
     }

     #conteudoFormulario {
       width: 100%;
       max-width: 500px;
       margin: 2rem auto;
       padding: 1.5rem;
       background-color: #fff;
       border-radius: 1rem;
       box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
       font-size: var(--font-base);
       box-sizing: border-box;
     }

     #conteudoFormulario h3 {
       margin-top: 0;
       font-size: 1.5rem;
       color: #000000;
       text-align: center;
     }

     #conteudoFormulario form {
       display: flex;
       flex-direction: column;
       gap: 1.4rem;
     }

#conteudoFormulario .botoes-formulario {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
}

#conteudoFormulario .botoes-formulario button {
  width: 100%;
  display: block;
}

     #conteudoFormulario label {
       display: flex;
       flex-direction: column;
       font-weight: bold;
       color: #333;
     }

     #conteudoFormulario input,
     #conteudoFormulario select {
       margin-top: 0.25rem;
       padding: 0.6rem 1rem;
       border: 1px solid #ccc;
       border-radius: 0.75rem;
       font-size: var(--font-base);
       background-color: #fafafa;
       transition: border-color 0.3s, box-shadow 0.3s;
     }

     #conteudoFormulario input:focus,
     #conteudoFormulario select:focus {
       border-color: #007bff;
       box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
       outline: none;
     }

     #conteudoFormulario button[type="submit"],
     #conteudoFormulario button[type="button"] {
       padding: 0.75rem 1rem;
       font-size: var(--font-base);
       border: none;
       border-radius: 0.75rem;
       cursor: pointer;
       transition: background-color 0.3s ease;
     }

     #conteudoFormulario button[type="submit"] {
       background-color: #007bff;
       color: #fff;
     }

     #conteudoFormulario button[type="submit"]:hover {
       background-color: #0056b3;
     }

     #conteudoFormulario button[type="button"] {
       background-color: #ccc;
       color: #000;
     }

     #conteudoFormulario button[type="button"]:hover {
       background-color: #999;
     }

/* ===================================== */
/* 📺 DIVISÕES */
/* ===================================== */

#divisoes {
  width: 100%;
}

#divisoes.tela.ativa {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.divisoes-topo {
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  box-sizing: border-box;
}

#divisoes:not(.ativa) .divisoes-topo {
  display: none;
}

.mes-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.mes-titulo {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #000;
  text-align: center;
}

.mes-btn {
  background: none;
  border: none;
  font-size: 1.7rem;
  cursor: pointer;
  color: #333;
}

.mes-resumo {
  display: flex;
  gap: 1.2rem;
  font-size: 1rem;
  font-weight: 600;
}

.resumo-item {
  white-space: nowrap;
}

.lista-divisoes {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 0.75rem 8rem;
  box-sizing: border-box;
}

/* ===================================== */
/* 📦 CARD */
/* ===================================== */

.card-divisao {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  padding: 0.9rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.card-divisao:active {
  transform: scale(0.985);
}

.card-divisao-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #f1f1f1;
}

.card-divisao-conteudo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.card-divisao-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.card-divisao-pessoa {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-divisao-streaming {
  color: #777;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-divisao-direita {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.card-divisao-dia {
  color: #333;
  font-size: 0.95rem;
  white-space: nowrap;
}

.card-divisao-valor {
  color: #777;
  font-weight: 600;
  white-space: nowrap;
}

.card-divisao-check {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.6rem;
  cursor: pointer;
  color: #bbb;
  transition:
    transform 0.15s ease,
    color 0.2s ease;
}

.card-divisao-check:active {
  transform: scale(0.82);
}

.card-divisao-check.ativo {
  color: #22c55e;
}

.card-divisao-menu-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: #555;
}

/* ===================================== */
/* ⋮ MENU FLUTUANTE */
/* ===================================== */

.menu-divisao {
  position: absolute;
  top: 3rem;
  right: 0.8rem;
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 50;
  min-width: 170px;
  animation: aparecerMenu 0.15s ease;
}

.menu-divisao button {
  width: 100%;
  border: none;
  background: none;
  padding: 0.9rem 1rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.menu-divisao button i {
  font-size: 1rem;
  color: #666;
  width: 1.2rem;
  text-align: center;
}

.menu-divisao button:hover i {
  color: #007bff;
}

.menu-divisao button:hover {
  background: #f5f5f5;
}

@keyframes aparecerMenu {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===================================== */
/* 🚨 CARD ATRASADO */
/* ===================================== */

.card-divisao.atrasado {
  background: #fff1f1;
  border: 1px solid #ffb8b8;
}

.card-divisao.atrasado .card-divisao-pessoa {
  color: #b42323;
}

.card-divisao.atrasado .card-divisao-dia {
  color: #c0392b;
  font-weight: 700;
}

/* ===================================== */
/* 📥 MODAL */
/* ===================================== */

.modal-divisao {
  position: fixed;
  inset: 0;
  z-index: 900;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
}

.modal-divisao-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 1.4rem;
  max-height: 85vh;
  overflow-y: auto;
  animation: subirModal 0.42s cubic-bezier(.22,.61,.36,1);
}

.modal-divisao-content h3 {
  margin-top: 0;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
}

#formDivisao {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

#formDivisao label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-weight: 600;
}

#formDivisao input,
#formDivisao select {
  border: 1px solid #ddd;
  border-radius: 0.9rem;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  background: #fafafa;
}

.modal-botoes {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1rem;
}

.modal-botoes button {
  border: none;
  border-radius: 0.9rem;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.modal-botoes button[type="submit"] {
  background: #007bff;
  color: #fff;
}

.modal-botoes button[type="button"] {
  background: #e5e5e5;
}

.modal-botoes button[type="submit"]:hover {
  background: #0056b3;
  color: #fff;
}

.modal-botoes button[type="button"]:hover {
  background: #999;
}


@keyframes subirModal {
  from {
    transform: translateX(-50%) translateY(100%);
  }

  to {
    transform: translateX(-50%) translateY(0);
  }
}

/* ===================================== */
/* 📱 MOBILE */
/* ===================================== */

@media (orientation: portrait) {

@keyframes subirModalMobile {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.modal-divisao-content {
animation: subirModalMobile 0.42s cubic-bezier(.22,.61,.36,1);
} 

  .mes-titulo {
    font-size: 7vw;
  }

  .mes-resumo {
    font-size: 4vw;
  }

  .card-divisao {
    padding: 4vw;
  }

  .card-divisao-logo {
    width: 17vw;
    height: 17vw;
  }

  .card-divisao-pessoa {
    font-size: 5vw;
  }

  .card-divisao-streaming,
  .card-divisao-valor,
  .card-divisao-dia {
    font-size: 4vw;
  }

}

/* ===================================== */
/* 💻 PAISAGEM */
/* ===================================== */

@media (orientation: landscape) {

  .lista-divisoes,
  .divisoes-topo {
    max-width: 500px;
  }

.modal-divisao-content {
    width: 100%;
    max-width: 500px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

}

.selos {
  margin-left: auto; 
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}

.selo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.75rem;
  border-radius: 50%;
backdrop-filter: blur(2px);
}

/* cores */
.selo.novo {
  background: #C9A0DC;
  color: #ffffff;
}

.selo.extra {
  background: #FFEE8C;
  color: #ffffff;
}

.selo.oferta {
  background: #AAE5FC;
  color: #ffffff;
}

.lista-anuncios {
  width: 100%;
  max-width: 500px;
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
}

     .anuncio {
       background-color: #fff;
       border-radius: 0.75rem;
       padding: var(--padding);
       box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
       transition: background-color 0.2s;
       display: flex;
       align-items: center;
       gap: 1rem;
     }

     .anuncio:hover {
       background-color: #eaeaea;
       cursor: pointer;
     }

     .logo {
       width: 3.75rem;
       height: 3.75rem;
       object-fit: contain;
       border-radius: 50%;
       background-color: #eee;
     }

     .info {
       display: flex;
       flex-direction: column;
       flex: 1;
       min-width: 0;
     }

     .info .titulo {
       font-family: 'Barlow Condensed', sans-serif;
       font-weight: 700;
       letter-spacing: -0.2px;
       font-weight: bold;
       font-size: var(--font-base);
       color: #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

     .info .valor {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 500;
letter-spacing: -0.1px;
color: #666;
margin-top: 0.25rem;
font-size: var(--font-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

 #bottomBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding: 0.4rem 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  z-index: 200;
}

#bottomBar button {
  flex: 1;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--font-small);
  color: #333;
  cursor: pointer;
  padding: 0.3rem 0;
  transition: color 0.2s ease;
}

#bottomBar i {
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}

#bottomBar button:hover {
  color: #007bff;
}

#bottomBar button:hover i {
  color: #007bff;
}

#bottomBar button:active {
  transform: scale(0.95);
}

     .painel-menu {
       position: fixed;
       top: 0;
       right: 0;
       transform: translateX(100%);
       width: 40vw;
       height: 100%;
       background-color: #fff;
       box-shadow: -0.125rem 0 0.375rem rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
       z-index: 500;
       padding: 5rem 1.5rem 0 3rem;
       display: flex;
       flex-direction: column;
       gap: 2rem;
     }

     .painel-menu.ativo {
       transform: translateX(0%);
     }

     .painel-item {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       font-size: var(--font-base);
       color: #000;
       cursor: pointer;
       transition: color 0.2s;
     }

     .painel-item:hover {
       color: #888;
     }

     .painel-item a {
       text-decoration: none;
       color: #000;
       transition: color 0.2s;
     }

     .painel-item a:hover {
       color: #888;
     }

     .painel-item i {
       font-size: 1.5rem;
     }

.toast {
  position: fixed;
  bottom: clamp(5rem, 14vw, 6.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 1.5rem;
  font-size: var(--font-small);
  text-align: center;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-0.5rem);
}

/* ❤️ coração padrão */
#bottomBar button i.bi-heart {
  color: #555;
  transition: color 0.2s ease, transform 0.15s ease;
}

/* ❤️ coração curtido */
#bottomBar button i.bi-heart-fill {
  color: #e0245e; /* estilo Instagram */
  transform: scale(1.1);
}

@keyframes popLike {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1.1); }
}

.like-animado {
  animation: popLike 0.3s ease;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.icone-girando {
  animation: girar 1s linear infinite;
  display: inline-block;
}

/* 🍩 Spinner moderno */
.spinner {
  width: 2.6rem;
  height: 2.6rem;
  border: 0.25rem solid rgba(0, 0, 0, 0.15);
  border-top: 0.25rem solid #333;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

/* 📦 Container loading */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  padding: 2rem 0;
  color: #888;
  font-size: var(--font-base);
}

.loading-texto {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

     #menu-overlay {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       background-color: rgba(0, 0, 0, 0.4);
       z-index: 400;
     }

     .detalhes-box {
       width: 100%;
       max-width: 500px;
       margin: 2rem auto;
       padding: var(--padding);
       background-color: #fff;
       border-radius: 1rem;
       box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
       box-sizing: border-box;
       transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;
     }

.slide-esquerda {
  transform: translateX(-100%) scale(0.98);
  opacity: 0;
}

.slide-direita {
  transform: translateX(100%) scale(0.98);
  opacity: 0;
}

     .detalhes-box p {
       color: #333;
       margin: 0.4rem 0;
       line-height: 1.3;
       font-size: var(--font-base);
       text-align: left;
     }

     .detalhes-box hr {
       width: 100%;
       border: none;
       border-top: 1px solid #ccc;
       margin: 0.15rem 0;
     }

     .detalhes-box > a img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem auto;
  border-radius: 0.75rem;
}

.botoes-contato {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.botoes-contato a {
  width: 100%;
}

.botoes-contato img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.botoes-contato img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* =====TELA LOGIN ===== */

.login-box {
  background: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 500px;
  margin: 2rem auto;
  box-sizing: border-box;
}

.input-group {
  margin-bottom: 1.5rem;
}

.login-title {
  text-align: center;
  margin-bottom: 1.8rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.login-erro {
  color: #dc3545;
  text-align: center;
  margin-bottom: 1rem;
  display: none;
  font-weight: 500;
}

.btn-principal,
.btn-secundario {
  width: 100%;
  padding: 0.9rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s ease;
  margin-top: 0.8rem;
}

.btn-principal {
  background: #007bff;
  color: white;
}

.btn-principal:hover {
  background: #0056b3;
}

.btn-secundario {
  background: #6c757d;
  color: white;
}

.btn-secundario:hover {
  background: #545b62;
}

.login-link {
  text-align: center;
  margin-top: 1.5rem;
}

.login-link a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  transition: 0.2s ease;
}

.login-link a:hover {
  text-decoration: underline;
  color: #0056b3;
}

.input-icon {
  display: flex;
  align-items: center;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  background: #fff;
  transition: 0.2s ease;
}

.input-icon i {
  margin-right: 10px;
  color: #6c757d;
  font-size: 1.1rem;
}

.input-icon input {
  border: none;
  outline: none;
  flex: 1;
}

.input-icon:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
}

     @media (orientation: portrait) {
       :root {
         --font-base: 4.5vw;
         --font-small: 4vw;
         --padding: 6vw;
         --icon-size: 8vw;
       }

       body {
         padding-bottom: 25vw;
       }

       #conteudoFormulario {
         margin: 1rem auto;
         padding: var(--padding);
         max-width: 90vw;
       }

       #conteudoFormulario h3 {
         font-size: 6vw;
       }

       #conteudoFormulario button[type="submit"],
       #conteudoFormulario button[type="button"] {
         width: 100%;
         font-size: 6vw;
         padding: 1.2rem;
         border-radius: 1rem;
       }

       #containerExtras input[type="checkbox"] {
         width: 6vw;
         height: 6vw;
         min-width: 20px;
         min-height: 20px;
       }

       .toggle-extras {
         font-size: 5vw;
         border-radius: 1rem;
       }

       .checkbox-list input[type="checkbox"] {
         width: 6vw;
         height: 6vw;
         min-width: 20px;
         min-height: 20px;
       }

       .top-bar,
        #bottomBar {
         height: 13vw;
         align-items: center;
       }

       .logo-site {
         height: 8vw;
       }

       .menu-icon,
       #btnVoltar {
         font-size: var(--icon-size);
       }

       .menu-icon {
         padding: 0;
       }

       .search-container input {
         font-size: 5vw;
         padding-left: 10vw;
       }

       .search-container .icon {
         font-size: 5vw;
       }

       .logo {
         width: 18vw;
         height: 18vw;
       }

       .info .titulo,
       .info .valor {
         font-size: 4.5vw;
       }

       .detalhes-box p {
         font-size: 4.5vw;
       }

        #bottomBar button {
   font-size: 4vw;
   padding: 0.5rem 0;
}

#bottomBar i {
   font-size: 6vw;
}

       .painel-menu {
         width: 60vw;
         gap: 10vw;
       }

       .painel-item i {
         font-size: 6vw;
       }

.anuncio {
  padding: 4vw;
}

.lista-anuncios {
  width: 100%;
  padding: 3vw;
}

.login-box {
  max-width: 90vw;
  margin: 1rem auto;
  padding: var(--padding);
}

       .detalhes-box {
         max-width: 90vw;
         margin: 1rem auto;
         padding: var(--padding);
       }

       .detalhes-box img {
         width: 100%;
       }
     }