/* Home de vendas do site principal (medsprojects.com): usa o demo-business.css e só
   acrescenta o que a loja de vendas precisa — carrinho e área do cliente no topo e a
   nota da Hospedagem Cloud abaixo dos planos. */
.sv-tools { display: flex; align-items: center; gap: 10px; margin-left: 30px; }
.sv-tools .db-talk { margin-left: 6px; }
.sv-tool { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; color: #e3ebfa; font-size: 19px; background: rgba(255, 255, 255, .04); transition: background .15s, color .15s; }
.sv-tool:hover { color: #fff; background: rgba(11, 107, 255, .3); }

/* Busca de produtos no topo (todas as telas do site de vendas, mesmo padrão do header). */
.sv-search { display: flex; align-items: center; flex: 1 1 160px; min-width: 0; max-width: 320px; margin: 0 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.sv-search__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 14px; font-size: 14px; color: #fff; }
.sv-search__input::placeholder { color: #93a4c4; }
.sv-search__input:focus { outline: none; }
.sv-search__btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; background: var(--db-blue); color: #fff; font-size: 16px; cursor: pointer; }
.sv-search__btn:hover { background: var(--db-blue-2); }

/* Botão "Falar com um especialista" em duas linhas, com o ícone do WhatsApp em destaque. */
.sv-site .db-talk { align-items: center; gap: 10px; padding: 6px 18px 6px 6px; font-size: 13px; line-height: 1.25; text-align: left; }
.db-talk__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #22d17c, #17b866); color: #fff; font-size: 16px; }
.db-talk__txt { display: flex; flex-direction: column; }
.db-talk__txt small { font-size: 13px; font-weight: 600; }
.sv-plans-note { margin: 26px 0 0; text-align: center; font-size: 14px; color: #52627d; }
.sv-plans-note .bi { margin-right: 6px; color: #0b6bff; }
.sv-plans-note a { font-weight: 600; color: #0b6bff; }
@media (max-width: 1280px) {
  .sv-tools { margin-left: 16px; }
}
/* O menu institucional ganhou o item "Domínios" e a barra de busca de produtos, e passou a ter
   mais conteúdo que a página de demonstração — em notebooks comuns (1280-1366px) o menu completo
   (logo + nav + busca + ferramentas + botão de WhatsApp) não cabe mais numa linha só e alguns
   itens ficavam espremidos/cortados no canto direito. Por isso aqui o menu institucional troca
   pro botão "hambúrguer" bem mais cedo (1500px) do que o restante do tema (1100px, em
   demo-business.css). A busca some da linha principal nesse ponto e reaparece dentro do menu
   aberto, junto com a navegação, pra continuar acessível no celular/tablet. */
@media (max-width: 1500px) {
  .sv-site .db-top:not(.is-open) .db-nav,
  .sv-site .db-top:not(.is-open) .sv-search,
  .sv-site .db-top:not(.is-open) .db-talk { display: none; }
  .sv-site .db-burger { display: grid; place-items: center; }
  .sv-site .db-top.is-open { flex-wrap: wrap; height: auto; padding-top: 18px; padding-bottom: 14px; }
  .sv-site .db-top.is-open .db-nav { display: flex; order: 3; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; margin: 12px 0 0; }
  .sv-site .db-top.is-open .sv-search { display: flex; order: 4; width: 100%; max-width: none; margin: 4px 0 0; }
  .sv-site .db-top.is-open .db-talk { display: inline-flex; order: 5; margin: 10px 0 0; }
  .sv-tools { margin-left: auto; }
  .sv-site .db-burger { margin-left: 8px; }
  .sv-site .db-top.is-open .sv-tools { order: 2; }
}
@media (max-width: 480px) {
  .sv-site .db-top.is-open .sv-search { order: 3; }
  .sv-site .db-top.is-open .db-nav { order: 4; }
}

/* Na home, o cabeçalho (sv-header) fica dentro da própria seção .db-hero, e a arte
   (.db-hero__art) é posicionada "position:absolute; bottom:0" por cima dela — em telas largas
   (nav ainda numa linha só, sem o menu "hambúrguer") a imagem começava colada no topo da seção e
   passava por trás do menu, atrapalhando a leitura dos itens. Travando o topo da imagem na altura
   do cabeçalho (86px, mesma medida de .db-top) ela nunca mais invade essa faixa. Abaixo de
   1100px o próprio demo-business.css já vira a imagem "position:relative" (flui normal, abaixo do
   cabeçalho), então essa trava só precisa valer acima disso. */
@media (min-width: 1101px) {
  .sv-site .db-hero__art { top: 86px; bottom: auto; }
}

/* ---------- Tema claro / escuro ----------
   Claro = o modelo aprovado. Escuro = o mesmo layout no azul-marinho da Meds Projects
   (mesma paleta do topo e do rodapé). Segue o aparelho até a pessoa escolher no botão. */
.sv-theme { cursor: pointer; }
.sv-site[data-theme='dark'] .sv-theme__dark, .sv-site:not([data-theme='dark']) .sv-theme__light { display: none; }
.sv-site[data-theme='dark'] {
  --db-ink: #eaf1ff;
  --db-text: #a9b8d3;
  --db-muted: #8595b3;
  --db-line: #1b2d52;
  color-scheme: dark;
  background: #020d22;
}
.sv-site[data-theme='dark'] .db-sec--segments { background: #031330; }
.sv-site[data-theme='dark'] .db-sec--features { background: #020f28; }
.sv-site[data-theme='dark'] .db-sec--plans { background: #031330; }
.sv-site[data-theme='dark'] .db-seg,
.sv-site[data-theme='dark'] .db-feat,
.sv-site[data-theme='dark'] .db-plan {
  background: linear-gradient(180deg, #0a1c40, #07152f);
  border-color: #16294f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.sv-site[data-theme='dark'] .db-feat:hover, .sv-site[data-theme='dark'] .db-seg:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(47, 140, 255, .35); }
.sv-site[data-theme='dark'] .db-feat__ic { background: linear-gradient(180deg, rgba(47, 140, 255, .22), rgba(47, 140, 255, .1)); color: #5ea5ff; }
.sv-site[data-theme='dark'] .db-plan.is-featured { border-color: var(--db-blue); box-shadow: 0 14px 36px rgba(11, 107, 255, .35); }
.sv-site[data-theme='dark'] .db-plan.is-addon { background: linear-gradient(180deg, #06281f, #07152f 60%); border-color: #11453a; }
.sv-site[data-theme='dark'] .db-plan.is-addon h3 { color: #3fe08c; }
.sv-site[data-theme='dark'] .db-plan li { color: #c3d0e6; }
.sv-site[data-theme='dark'] .db-plan__cta { color: #cfe0ff; background: rgba(47, 140, 255, .16); }
.sv-site[data-theme='dark'] .db-plan__cta:hover { color: #fff; background: rgba(47, 140, 255, .28); }
.sv-site[data-theme='dark'] .db-plan.is-featured .db-plan__cta { color: #fff; }
.sv-site[data-theme='dark'] .db-plan.is-addon .db-plan__cta { color: #7ff0b2; background: rgba(31, 191, 104, .16); }
.sv-site[data-theme='dark'] .db-more, .sv-site[data-theme='dark'] .db-more:hover { color: #5ea5ff; }
.sv-site[data-theme='dark'] .sv-plans-note { color: #a9b8d3; }
.sv-site[data-theme='dark'] .sv-plans-note a, .sv-site[data-theme='dark'] .sv-plans-note .bi { color: #5ea5ff; }
.sv-site[data-theme='dark'] .db-foot { background: radial-gradient(ellipse 40% 120% at 8% 30%, rgba(8, 50, 120, .45), transparent 70%), linear-gradient(90deg, #010b1f, #010a1c); border-top: 1px solid #0f2248; }
.sv-site[data-theme='dark'] .db-plan.is-featured .db-plan__cta { background: linear-gradient(180deg, #1583ff, #0b6bff); box-shadow: 0 8px 20px rgba(11, 107, 255, .4); }
.sv-site[data-theme='dark'] .db-plan.is-featured .db-plan__cta:hover { filter: brightness(1.08); }
/* O espaço da barra inferior do celular (fora do #svSite) acompanha o tema. */
body:has(#svSite[data-theme='dark']) { background: #010a1c; }
@media (max-width: 480px) {
  .sv-site .db-foot__talk { grid-column: 1 / -1; justify-self: stretch; }
  .sv-site .db-foot__talk .db-wa { display: flex; justify-content: center; white-space: nowrap; }
}
.sv-site[data-theme='dark'] .db-overline { color: #7f9cc8; }
.sv-site[data-theme='dark'] .db-lead { color: var(--db-text); }

/* ---------- Topo e rodapé nas outras telas do site (plano, carrinho, checkout, conta) ---------- */
body.sv-body.sv-body { padding-bottom: 0; }
.sv-bar { position: relative; z-index: 20; overflow: visible; background: radial-gradient(ellipse 36% 120% at 3% 0%, rgba(3, 60, 140, .9), transparent 70%), linear-gradient(100deg, #011b49 0%, var(--db-navy) 45%, #03235e 100%); box-shadow: 0 1px 0 rgba(80, 150, 255, .25); }
.sv-bar:has(> .db-foot) { background: none; box-shadow: none; z-index: auto; }
.sv-bar .db-foot { margin-top: 48px; }
.sv-bar .sv-theme { display: none; }
.sv-tool { position: relative; }
.sv-tool.is-active { color: #fff; background: rgba(11, 107, 255, .3); border-color: var(--db-blue-2); }
.sv-tool__badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; color: #fff; background: var(--db-green); box-shadow: 0 0 0 2px #021a46; }
.sv-main { min-height: 50vh; padding-top: 18px; }
@media (max-width: 1100px) {
  .sv-bar .db-top.is-open { height: auto; }
}

/* Celular: logo, ferramentas e o botão de menu sempre cabem na linha do topo. */
@media (max-width: 1100px) {
  .sv-site .db-top { gap: 12px; }
  .sv-site .db-burger { margin-left: 0; flex: none; }
}
@media (max-width: 480px) {
  .sv-site .db-top { gap: 8px; }
  .sv-tools { gap: 6px; }
  .sv-tool { width: 38px; height: 38px; font-size: 17px; }
  .sv-site .db-burger { width: 40px; height: 40px; font-size: 22px; }
  .sv-site .db-top:not(.is-open) .db-logo__shield { width: 34px; height: 36px; }
  .sv-site .db-top:not(.is-open) .db-logo__text b { font-size: 18px; }
  .sv-site .db-top:not(.is-open) .db-logo__text small { font-size: 10.5px; }
}
@media (max-width: 359px) {
  .sv-site .db-top:not(.is-open) .db-logo__text small { display: none; }
}

/* A regra da loja ".theme-storefront svg { height: auto }" esticava o escudo do logo para 150px
   (área de clique por cima da trilha "Início > Planos"). Aqui ele volta ao tamanho do desenho. */
.theme-storefront .sv-site .db-logo__shield { height: 52px; }
.theme-storefront .sv-site .db-logo--foot .db-logo__shield { height: 58px; }
@media (max-width: 720px) { .theme-storefront .sv-site .db-logo__shield { height: 42px; } }
@media (max-width: 480px) { .theme-storefront .sv-site .db-top:not(.is-open) .db-logo__shield { width: 34px; height: 36px; } }
@media (max-width: 380px) {
  .sv-site .db-top { padding-left: 12px; padding-right: 12px; }
  .sv-site .db-top:not(.is-open) .db-logo { gap: 8px; }
  .sv-site .db-top:not(.is-open) .db-logo__text b { font-size: 16px; }
  .sv-tool { width: 36px; height: 36px; }
  .sv-site .db-burger { width: 38px; height: 38px; }
}