/* Serra Geral UI foundation — shared by every static route. */
:root {
  --sg-color-ink: #202124;
  --sg-color-muted: #54595f;
  --sg-color-brand: #ff6600;
  --sg-color-highlight: #12cc5e;
  --sg-color-surface: #ffffff;
  --sg-color-border: #dfe3e6;

  --sg-font-sans: "Rubik", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sg-font-display: "Poppins", var(--sg-font-sans);

  --sg-space-1: 0.25rem;
  --sg-space-2: 0.5rem;
  --sg-space-3: 0.75rem;
  --sg-space-4: 1rem;
  --sg-space-5: 1.5rem;
  --sg-space-6: 2rem;
  --sg-space-8: 3rem;

  --sg-radius-sm: 0.25rem;
  --sg-radius-md: 0.5rem;
  --sg-radius-lg: 1rem;
  --sg-shadow-sm: 0 1px 2px rgb(32 33 36 / 8%);
  --sg-transition-fast: 160ms ease;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  color: var(--sg-color-ink);
  font-family: var(--sg-font-sans);
  text-rendering: optimizeLegibility;
}

/* Full-width builder pages must not inherit Hello's default 1140px article cap. */
body[class*="sg-layout-page-"] main.site-main {
  margin-inline: 0;
  max-width: none;
  padding-inline: 0;
  width: 100%;
}

img,
svg { max-width: 100%; }

img { height: auto; }

.sg-lottie__fallback {
  display: block;
  height: auto;
  width: 100%;
}

/* Builder layout rules can override the native [hidden] selector. */
.sg-client-popup { display: none !important; }
.sg-site-popup[hidden] { display: none !important; }
body.sg-modal-open,
body.sg-city-open { overflow: hidden; }
.sg-client-popup button.sg-layout-button { appearance: none; border: 0; cursor: pointer; }

.sg-city-gate[hidden],
.sg-city-current[hidden],
.sg-city-gate [hidden] { display: none !important; }

/* Convite para a promocao de Dia dos Pais. Some sozinho em 01/09/2026 pela
   guarda de data no site-runtime.js — o CSS pode ficar. */
.sg-promo-popup[hidden] { display: none !important; }

.sg-promo-popup {
  align-items: center;
  background: rgb(8 19 36 / 72%);
  backdrop-filter: blur(10px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 100001; /* acima do portal de cidade, que usa 100000 */
}

/* Laranja da campanha, com a borda verde e o raio que o portal de cidade usa —
   a casca continua sendo a do site, so a cor de fundo e da promocao. */
.sg-promo-popup__dialog {
  background: var(--sg-color-brand);
  border: 2px solid var(--sg-color-highlight);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgb(0 0 0 / 32%);
  /* Escuro, e nao branco: branco sobre este laranja da 2,95 de contraste e
     reprova no AA. Este tom da 5,7 e e o mesmo do selo dentro da foto. */
  color: #1c1c28;
  max-width: 420px;
  padding: clamp(24px, 5vw, 32px);
  position: relative;
  text-align: center;
  width: 100%;
}

/* A foto sangra ate as bordas laterais e encosta no topo do cartao: o recorte
   nao tem fundo, entao respiro em volta dele so afasta a pessoa do texto. O
   `margin` negativo desfaz o padding do dialogo. */
.sg-promo-popup__figura {
  display: block;
  height: auto;
  margin: calc(clamp(24px, 5vw, 32px) * -1) auto 14px;
  max-width: 240px;
  width: 100%;
}

/* Dois niveis de seletor (classe + elemento) porque o site-vendor.css declara
   `[type="button"], button { border: 1px solid #c36 }` e empata em
   especificidade com uma classe sozinha — empate quem ganha e quem vem depois,
   e o vendor vem. E dai o contorno rosa. O mesmo CSS pinta `button:hover` de
   rosa, por isso hover e foco tambem sao declarados. */
.sg-promo-popup__dialog button.sg-promo-popup__fechar,
.sg-promo-popup__dialog button.sg-promo-popup__fechar:hover,
.sg-promo-popup__dialog button.sg-promo-popup__fechar:focus {
  appearance: none;
  background: rgb(255 255 255 / .32);
  border: 0;
  border-radius: 50%;
  color: #1c1c28;
  cursor: pointer;
  font: 400 22px/1 var(--sg-font-sans);
  height: 34px;
  padding: 0;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 34px;
}

.sg-promo-popup__dialog button.sg-promo-popup__fechar:hover { background: rgb(255 255 255 / .55); }

.sg-promo-popup__texto {
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 24px;
}

/* O botao fica como o do resto do site — laranja, texto branco, halo. Cheguei a
   trocar a superficie por branco achando que laranja sobre laranja sumiria; nao
   some, porque o tom do botao e mais claro que o do cartao e o anel do halo
   desenha a borda. So a largura muda aqui. */
.sg-promo-popup__dialog .sg-promo-popup__cta { width: 100%; }

.sg-promo-popup__dialog button.sg-promo-popup__depois,
.sg-promo-popup__dialog button.sg-promo-popup__depois:hover,
.sg-promo-popup__dialog button.sg-promo-popup__depois:focus {
  appearance: none;
  background: none;
  border: 0;
  color: rgb(28 28 40 / .72);
  cursor: pointer;
  display: block;
  font: 400 15px/1 var(--sg-font-sans);
  margin: 14px auto 0;
  padding: 6px;
  text-decoration: underline;
}

.sg-promo-popup__dialog button.sg-promo-popup__depois:hover { color: #1c1c28; }

.sg-city-gate {
  align-items: center;
  background: rgb(8 19 36 / 72%);
  backdrop-filter: blur(10px);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 100000;
}

.sg-city-gate__dialog {
  background: #fff;
  border: 2px solid var(--sg-color-highlight);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgb(0 0 0 / 28%);
  color: #061b3a;
  max-width: 540px;
  padding: clamp(28px, 5vw, 48px);
  width: 100%;
}

.sg-city-gate__eyebrow {
  color: #d95f22;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.sg-city-gate h2 {
  color: #061b3a;
  font-family: var(--sg-font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 0 14px;
}

.sg-city-gate__dialog > p:not(.sg-city-gate__eyebrow) {
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 26px;
}

.sg-city-gate__form { display: grid; gap: 12px; }
.sg-city-gate__form label { font-size: 15px; font-weight: 700; }
.sg-city-combobox { position: relative; }
.sg-city-combobox__chevron {
  border-bottom: 2px solid #061b3a;
  border-right: 2px solid #061b3a;
  height: 9px;
  pointer-events: none;
  position: absolute;
  right: 20px;
  top: 21px;
  transform: rotate(45deg);
  width: 9px;
  z-index: 1;
}

.sg-city-gate__form input[role='combobox'] {
  appearance: none;
  background: #fff;
  border: 1px solid #9aa6b5;
  border-radius: 10px;
  color: #061b3a;
  font: inherit;
  min-height: 54px;
  padding: 0 50px 0 16px;
  width: 100%;
}

.sg-city-combobox__options {
  background: #fff;
  border: 1px solid #9aa6b5;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgb(6 27 58 / 16%);
  list-style: none;
  margin: 6px 0 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.sg-city-combobox__option {
  border-radius: 7px;
  color: #061b3a;
  cursor: pointer;
  padding: 11px 12px;
}

.sg-city-combobox__option:hover,
.sg-city-combobox__option[aria-selected='true'] {
  background: #eef8f3;
}

.sg-city-gate__search-status { color: #667085; font-size: 13px; margin: -2px 0 0; }
.sg-city-gate__error { color: #b42318; font-size: 14px; margin: 0; }

.sg-city-gate__form button {
  appearance: none;
  background: var(--sg-color-highlight);
  border: 0;
  border-radius: 10px;
  color: #061b3a;
  cursor: pointer;
  font: 700 16px/1 var(--sg-font-sans);
  min-height: 52px;
  padding: 14px 20px;
}

.sg-city-gate__form .sg-city-gate__cancel {
  background: transparent;
  color: #344054;
  font-weight: 500;
  min-height: 40px;
}

.sg-city-current {
  align-items: flex-start;
  background: #fff;
  border: 1px solid #d4dae2;
  border-radius: 12px;
  bottom: 18px;
  box-shadow: 0 8px 24px rgb(6 27 58 / 16%);
  color: #061b3a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: 500 13px/1.25 var(--sg-font-sans);
  gap: 2px;
  left: 18px;
  max-width: calc(100vw - 36px);
  padding: 10px 14px;
  position: fixed;
  text-align: left;
  z-index: 900;
}

.sg-city-current strong { font-weight: 700; }
.sg-city-current small { color: #d95f22; font-size: 11px; font-weight: 700; }

/* Legacy route bundles include generic button rules after this stylesheet. */
body button.sg-city-current {
  align-items: flex-start;
  background: #fff;
  border: 1px solid #d4dae2;
  border-radius: 12px;
  color: #061b3a;
  display: flex;
  flex-direction: column;
  font: 500 13px/1.25 var(--sg-font-sans);
  gap: 2px;
  padding: 10px 14px;
  text-align: left;
}

/* Dentro do cabecalho o seletor deixa de ser um cartao flutuante e vira mais
   um item da linha utilitaria: uma linha so, sem fundo, borda nem sombra.
   O margin-inline-end: auto o joga para a esquerda da linha, que e alinhada a
   direita — o lado esquerdo estava vazio, e ali ele nao disputa espaco com
   "Pontos de Atendimento" e "Trabalhe Conosco".
   Precisa vir depois do bloco acima e com o mesmo peso de seletor: com peso
   igual, quem vence e o ultimo, e a ordem inversa devolveria o cartao. */
body button.sg-city-current--inline {
  align-items: baseline;
  align-self: center;
  background: none;
  border: 0;
  border-radius: 0;
  bottom: auto;
  box-shadow: none;
  flex-direction: row;
  font-size: 12px;
  gap: 8px;
  left: auto;
  margin-inline-end: auto;
  max-width: none;
  padding: 0;
  position: static;
  z-index: auto;
}

body button.sg-city-current--inline small { font-size: 12px; }

body button.sg-city-current--inline:hover small,
body button.sg-city-current--inline:focus-visible small { text-decoration: underline; }

/* O site-vendor.css pinta qualquer botao de rosa ao passar o mouse ou receber
   foco:
     [type=button]:hover, [type=submit]:hover, button:hover
       { background-color: #c36; color: #fff }
   Seletor de atributo pesa como classe, entao aquela regra e (0,2,0) e vence
   os blocos acima, que sao (0,1,2) — o cartao inteiro ficava rosa com texto
   branco. Repetir a cor no estado, com um seletor de peso maior, desfaz.
   O unico retorno visual do seletor de cidade e o sublinhado do "Alterar". */
body button.sg-city-current:hover,
body button.sg-city-current:focus,
body button.sg-city-current:active {
  background: #fff;
  color: #061b3a;
}

body button.sg-city-current--inline:hover,
body button.sg-city-current--inline:focus,
body button.sg-city-current--inline:active {
  background: none;
  color: #061b3a;
}

body .sg-city-gate__form button {
  background: var(--sg-color-highlight);
  border: 0;
  border-radius: 10px;
  color: #061b3a;
  font: 700 16px/1 var(--sg-font-sans);
  padding: 14px 20px;
}

body .sg-city-gate__form button.sg-city-gate__cancel {
  background: transparent;
  color: #344054;
  font-weight: 500;
}

/* Mesma regra rosa do site-vendor.css, mesmo motivo: os dois botoes do modal
   sao [type=submit] e [type=button]. Aqui o retorno visual e um escurecimento
   leve, que preserva as cores do desenho. */
body .sg-city-gate__form button:hover,
body .sg-city-gate__form button:focus,
body .sg-city-gate__form button:active {
  background: var(--sg-color-highlight);
  color: #061b3a;
  filter: brightness(.96);
}

body .sg-city-gate__form button.sg-city-gate__cancel:hover,
body .sg-city-gate__form button.sg-city-gate__cancel:focus,
body .sg-city-gate__form button.sg-city-gate__cancel:active {
  background: transparent;
  color: #344054;
  filter: none;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .sg-city-gate { padding: 16px; }
  .sg-city-gate__dialog { border-radius: 22px; padding: 28px 22px; }
  .sg-city-gate h2 { font-size: 34px; }
  .sg-city-gate__dialog > p:not(.sg-city-gate__eyebrow) { font-size: 15px; }
  .sg-city-current { bottom: 12px; left: 12px; }
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sg-color-brand) 70%, white);
  outline-offset: 3px;
}

/* Reusable primitives for the next route-by-route migration. */
.sg-stack > * + * { margin-block-start: var(--sg-stack-space, var(--sg-space-4)); }
.sg-cluster { align-items: center; display: flex; flex-wrap: wrap; gap: var(--sg-cluster-gap, var(--sg-space-3)); }
.sg-surface { background: var(--sg-surface-background, var(--sg-color-surface)); border-radius: var(--sg-surface-radius, var(--sg-radius-md)); box-shadow: var(--sg-surface-shadow, none); }
.sg-button { align-items: center; border: 0; border-radius: var(--sg-radius-sm); cursor: pointer; display: inline-flex; font: inherit; gap: var(--sg-space-2); justify-content: center; transition: background-color var(--sg-transition-fast), color var(--sg-transition-fast), transform var(--sg-transition-fast); }
.sg-button:active { transform: translateY(1px); }