/* ==========================================================================
   componentes.css — botoes, header, cards, acordeao, carrossel, rodape
   Ponto Certo Brindes · implementa specs/design.md §6 §7 §9 §10
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Botoes — design.md §6
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding-inline: 28px;
  border: 1.5px solid transparent;
  border-radius: var(--raio-md);
  font-family: var(--fonte-corpo);
  font-size: var(--t-botao);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--mov-rapido), border-color var(--mov-rapido),
              color var(--mov-rapido), transform var(--mov-rapido),
              box-shadow var(--mov-rapido);
}

.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn:disabled,
.btn[aria-disabled='true'] {
  background-color: var(--neutro-300);
  border-color: var(--neutro-300);
  color: var(--neutro-500);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primario */
.btn--primario {
  background-color: var(--azul-700);
  color: var(--branco);
}

.btn--primario:hover {
  background-color: var(--azul-800);
  color: var(--branco);
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}

.btn--primario:active { transform: none; box-shadow: none; }

/* WhatsApp — unico lugar onde o verde aparece (design.md §2.4) */
.btn--whatsapp {
  background-color: var(--whatsapp);
  color: #04301A;
}

.btn--whatsapp:hover {
  background-color: #1FB959;
  color: #04301A;
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}

.btn--whatsapp:active { transform: none; box-shadow: none; }

/* Secundario */
.btn--secundario {
  background-color: transparent;
  border-color: var(--azul-700);
  color: var(--azul-700);
}

.btn--secundario:hover {
  background-color: var(--azul-100);
  color: var(--azul-700);
}

.btn--secundario:active { background-color: var(--azul-200); }

/* Terciario — link com seta */
.btn--terciario {
  min-height: 44px;
  padding-inline: 0;
  border: none;
  color: var(--azul-500);
  background: none;
}

.btn--terciario:hover { color: var(--azul-700); }

.btn--terciario .seta {
  transition: transform var(--mov-rapido);
}

.btn--terciario:hover .seta { transform: translateX(4px); }

/* Sobre fundo azul */
.btn--sobre-azul {
  background-color: var(--branco);
  color: var(--azul-800);
}

.btn--sobre-azul:hover {
  background-color: var(--neutro-100);
  color: var(--azul-800);
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}

.btn--sobre-azul:focus-visible { outline-color: var(--branco); }

.em-azul .btn--secundario,
.secao--azul .btn--secundario,
.secao--azul-escuro .btn--secundario {
  border-color: var(--branco);
  color: var(--branco);
}

.em-azul .btn--secundario:hover,
.secao--azul .btn--secundario:hover,
.secao--azul-escuro .btn--secundario:hover {
  background-color: rgba(255, 255, 255, .12);
  color: var(--branco);
}

.em-azul .btn--terciario,
.secao--azul .btn--terciario { color: var(--amarelo-500); }

@media (max-width: 899px) {
  .btn { min-height: 48px; }
  /* CTA de secao ocupa largura total no mobile (design.md §6) */
  .btn--bloco-mobile { width: 100%; }
}

/* Botao de fim de secao no celular (17/10/2026: "Conte sua acao..." e "Falar com um
   consultor..."): em 16 px a frase quebrava em 3 linhas coladas. 14 px, entrelinha
   aberta, folga em cima e embaixo e quebra equilibrada quando precisa de 2 linhas. */
@media (max-width: 599px) {
  .secao__acao .btn {
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    font-size: .875rem;
    line-height: 1.3;
    text-wrap: balance;
  }
  .secao__acao .btn svg { width: 18px; height: 18px; }
}

@media (max-width: 359px) {
  .secao__acao .btn { font-size: .8125rem; }   /* 2 linhas no maximo tambem em 320 px */
}

/* --------------------------------------------------------------------------
   2. Marca — logo oficial em SVG (manual de marca v2, 06/10/2026)
   Cabecalho e menu lateral: so o simbolo (40 a 48 px). Rodape: assinatura B
   negativa completa. Arquivos em assets/img/logo/. Nunca redigitar o nome.
   -------------------------------------------------------------------------- */

.logo { display: block; height: auto; }

.logo--simbolo { width: 48px; }               /* simbolo 391 x 312: ~38 px de altura */
/* Assinatura horizontal do cabecalho (13/10/2026): simbolo + "pontocerto / BRINDES" ao lado,
   montada com os desenhos oficiais, na mesma proporcao da assinatura empilhada. 1494 x 312. */
.logo--horizontal { width: 230px; flex-shrink: 0; }   /* ~48 px de altura */
/* Entre 900 e 1099 px o menu completo divide a linha com a logo: logo um pouco menor
   e menu mais compacto (ver .header__nav), para a logo nunca ser espremida. */
@media (min-width: 900px) and (max-width: 1099px) { .logo--horizontal { width: 188px; } }
@media (max-width: 899px) { .logo--horizontal { width: 192px; } }   /* ~40 px */
@media (max-width: 359px) { .logo--horizontal { width: 160px; } }   /* cabe ao lado do WhatsApp e do menu em 320 px */
.logo--simbolo-menu { width: 44px; }
.logo--assinatura { width: 200px; max-width: 100%; }

/* --------------------------------------------------------------------------
   3. Header — design.md §10
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--branco);
  border-bottom: 1px solid var(--neutro-200);
  transition: box-shadow var(--mov-medio), height var(--mov-medio);
}

.header.rolado { box-shadow: var(--sombra-sm); }

.header__interno {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  height: var(--header-h);
  transition: height var(--mov-medio);
}

.header.rolado .header__interno { height: 4rem; }

.header__marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
}

.header__nav { display: flex; align-items: center; gap: var(--e-2); }

@media (min-width: 900px) and (max-width: 1099px) {
  .header__interno { gap: var(--e-4); }
  .header__nav { gap: 0; }
  .header__nav .nav__link { padding-inline: var(--e-2); }
  .header .header__acoes .btn { padding-inline: var(--e-4); }   /* vence a regra base, que vem depois */
}

.header__nav > li { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 44px;
  padding-inline: var(--e-3);
  border-radius: var(--raio-md);
  font-weight: 500;
  color: var(--neutro-700);
  transition: color var(--mov-rapido), background-color var(--mov-rapido);
}

.nav__link:hover,
.nav__link[aria-expanded='true'] {
  color: var(--azul-700);
  background-color: var(--azul-50);
}

.nav__link .chevron { transition: transform var(--mov-medio); }
.nav__link[aria-expanded='true'] .chevron { transform: rotate(180deg); }

/* Dropdown de categorias (desktop) */
.dropdown {
  position: absolute;
  top: calc(100% + var(--e-2));
  left: 50%;
  translate: -50% 0;
  z-index: 110;
  display: grid;
  grid-template-columns: repeat(2, minmax(15rem, 1fr));
  gap: var(--e-1);
  width: max-content;
  padding: var(--e-3);
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-lg);
  background-color: var(--branco);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--mov-medio), transform var(--mov-medio),
              visibility var(--mov-medio);
}

.dropdown.aberto {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dropdown__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-3);
  border-radius: var(--raio-md);
  transition: background-color var(--mov-rapido);
}

.dropdown__item:hover { background-color: var(--azul-50); }

.dropdown__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutro-900);
}

.dropdown__apoio { font-size: var(--t-legenda); color: var(--neutro-700); }

.header__acoes { display: flex; align-items: center; gap: var(--e-2); }

.header__acoes .btn { min-height: 44px; padding-inline: var(--e-6); white-space: nowrap; }

/* Botao de menu e atalho de WhatsApp, so no mobile */
.header__icone,
.header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-md);
  color: var(--azul-700);
}

.header__icone:hover,
.header__menu-btn:hover { background-color: var(--azul-50); }

.header__icone--whatsapp { color: var(--whatsapp); }

.hamburguer, .hamburguer::before, .hamburguer::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--mov-medio), opacity var(--mov-medio);
}

.hamburguer { position: relative; }
.hamburguer::before, .hamburguer::after { content: ''; position: absolute; left: 0; }
.hamburguer::before { top: -7px; }
.hamburguer::after  { top: 7px; }

@media (max-width: 899px) {
  .header__interno { height: var(--header-h-mobile); gap: var(--e-2); }
  .header.rolado .header__interno { height: var(--header-h-mobile); }
  .header__nav, .header__acoes .btn { display: none; }
  .header__icone, .header__menu-btn { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   4. Menu lateral (mobile) — design.md §10
   -------------------------------------------------------------------------- */

.menu-fundo {
  position: fixed;
  inset: 0;
  z-index: 150;
  background-color: rgba(9, 33, 63, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mov-lento), visibility var(--mov-lento);
}

.menu-fundo.aberto { opacity: 1; visibility: visible; }

.menu-lateral {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 160;
  display: flex;
  flex-direction: column;
  width: min(22rem, 88vw);
  background-color: var(--branco);
  transform: translateX(100%);
  transition: transform var(--mov-lento);
}

.menu-lateral.aberto { transform: none; }

.menu-lateral__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  height: var(--header-h-mobile);
  padding-inline: var(--e-5, 1.25rem);
  padding-inline: var(--container-pad);
  border-bottom: 1px solid var(--neutro-200);
}

.menu-lateral__fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-md);
  color: var(--neutro-700);
}

.menu-lateral__fechar:hover { background-color: var(--neutro-100); }

.menu-lateral__lista {
  flex: 1;
  overflow-y: auto;
  padding: var(--e-4) var(--container-pad);
}

.menu-lateral__lista a {
  display: block;
  min-height: 44px;
  padding: var(--e-3) var(--e-3);
  border-radius: var(--raio-md);
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--neutro-900);
}

.menu-lateral__lista a:hover { background-color: var(--azul-50); color: var(--azul-700); }

.menu-lateral__grupo {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--neutro-200);
}

.menu-lateral__rotulo {
  padding-inline: var(--e-3);
  margin-bottom: var(--e-2);
  font-size: var(--t-sobretitulo);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutro-700);
}

.menu-lateral__lista .sub a {
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  font-weight: 500;
  color: var(--neutro-700);
}

/* CTA fixa no rodape do menu (design.md §10) */
.menu-lateral__rodape {
  padding: var(--e-4) var(--container-pad);
  border-top: 1px solid var(--neutro-200);
  display: grid;
  gap: var(--e-2);
}

/* --------------------------------------------------------------------------
   5. Card de produto — design.md §7.1
   -------------------------------------------------------------------------- */

.card-produto {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-lg);
  background-color: var(--branco);
  overflow: hidden;
  transition: transform var(--mov-medio), box-shadow var(--mov-medio),
              border-color var(--mov-medio);
}

.card-produto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-md);
  border-color: var(--azul-200);
}

.card-produto__moldura {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--neutro-100);
  overflow: hidden;
}

.card-produto__moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mov-medio);
}

.card-produto:hover .card-produto__moldura img { transform: scale(1.03); }

/* Placeholder enquanto a foto do produto nao existe (imagens.md #81) */
.card-produto__moldura--vazia {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--e-6);
}

.card-produto__moldura--vazia::after {
  content: '';
  width: 55%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(9, 33, 63, .16), rgba(9, 33, 63, 0) 72%);
}

.badge {
  display: inline-block;
  padding: var(--e-1) var(--e-3);
  border-radius: var(--raio-pill);
  font-size: var(--t-legenda);
  font-weight: 600;
  letter-spacing: 0.02em;
  background-color: var(--amarelo-500);
  color: var(--neutro-900);
}

.card-produto__badge {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 2;
}

.card-produto__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  flex: 1;
  padding: var(--e-6);
}

@media (max-width: 599px) {
  .card-produto__corpo { padding: var(--e-5, 1.25rem); }
}

.card-produto__nome { margin: 0; }

/* Desde 17/10/2026 o card nao tem descricao nem chips de tecnica (pedido de Catarina);
   os chips abaixo continuam na galeria. */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.chip {
  display: inline-block;
  padding: var(--e-1) var(--e-3);
  border-radius: var(--raio-pill);
  font-size: var(--t-legenda);
  font-weight: 500;
  background-color: var(--azul-100);
  color: var(--azul-700);
}

/* Chip da galeria que leva a explicacao da tecnica no FAQ (16/10/2026, item 44).
   Sublinhado pontilhado indica que e clicavel sem mudar a cara do chip. */
a.chip--link {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  transition: background-color var(--mov-rapido, .15s);
}

a.chip--link:hover { background-color: var(--azul-200); color: var(--azul-700); }

.card-produto__preco {
  margin-top: auto;
  padding-top: var(--e-2);
}

/* Preco "A partir de R$ X" desde 14/10/2026 (antes faixa "R$ X – R$ Y").
   A legenda "valor por peca..." vai na linha de baixo, como pede design.md §7.1. */
.card-produto__faixa {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--neutro-900);
}

.card-produto__preco .legenda { display: block; margin-top: 2px; }

/* Pedido minimo: dado de decisao para compra corporativa (site.md �6.4).
   Elemento a mais que os 7 de design.md �7.1, em peso de legenda para nao
   competir com a faixa de preco. */
.card-produto__minimo {
  display: block;
  margin-top: var(--e-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--azul-700);
}

.card-produto .btn { width: 100%; }

/* Botao do card (17/10/2026): "Pedir orcamento no WhatsApp" numa linha so, cabendo
   exatamente no botao. A frase mede ~15,1 px de largura por px de fonte (DM Sans 600),
   entao a fonte acompanha a largura do botao (unidade cqi do corpo do card), ate 16 px.
   O icone so entra quando sobra espaco: em botao estreito ele espremeria a frase. */
.card-produto__corpo { container-type: inline-size; }

.card-produto .btn {
  white-space: nowrap;
  gap: 6px;
  padding-inline: var(--e-2);
  font-size: clamp(11px, calc((100cqi - 18px) / 15.6), 16px);
}

.card-produto .btn svg { display: none; width: 18px; height: 18px; }

@container (min-width: 280px) {
  .card-produto .btn { font-size: clamp(11px, calc((100cqi - 44px) / 15.6), 16px); }
  .card-produto .btn svg { display: block; }
}

/* --------------------------------------------------------------------------
   6. Bloco de mosaico de categoria — design.md §7.2
   -------------------------------------------------------------------------- */

.mosaico {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--e-6);
}

.mosaico__bloco {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  grid-column: span 2;
  aspect-ratio: 4 / 5;
  padding: var(--e-8);
  border-radius: var(--raio-xl);
  overflow: hidden;
  color: var(--branco);
  transition: transform var(--mov-medio), box-shadow var(--mov-medio);
}

/* O `a:hover` do reset (0,1,1) vence `.mosaico__bloco` (0,1,0) e pintava o texto
   de --azul-700 — a mesma cor do fundo do bloco solido, deixando-o invisivel.
   Repetir a cor no :hover (0,2,0) trava isso. */
.mosaico__bloco:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
  color: var(--branco);
}

.mosaico__bloco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--mov-medio);
}

.mosaico__bloco:hover img { transform: scale(1.03); }

/* Camada de contraste obrigatoria sobre foto com texto (design.md §8) */
.mosaico__bloco::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 33, 63, .5), rgba(9, 33, 63, 0) 58%);
}

.mosaico__bloco--claro::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 58%);
}

.mosaico__bloco--sem-foto::before { display: none; }

.mosaico__conteudo { position: relative; z-index: 2; max-width: 16rem; }

.mosaico__titulo {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
  margin: 0;
}

.mosaico__apoio {
  margin-top: var(--e-2);
  font-size: var(--t-pequeno);
  color: inherit;
  opacity: .85;
}

/* Acao do bloco (16/10/2026, lista de aprovacao item 11a): o selo redondo virou
   botao com texto, para o cliente saber antes do toque que o cartao abre o
   WhatsApp. Verde so aqui e no botao (design.md §2.4). */
.mosaico__acao {
  position: absolute;
  right: var(--e-8);
  bottom: var(--e-8);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: .625rem 1rem;
  border-radius: var(--raio-pill);
  background-color: var(--whatsapp);
  color: var(--branco);
  font-size: var(--t-pequeno);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--mov-medio);
}

.mosaico__acao svg { width: 18px; height: 18px; flex-shrink: 0; }

.mosaico__bloco:hover .mosaico__acao { background-color: #1FB959; }

/* Cards de categoria so de visualizacao (17/10/2026): sem link, sem botao e sem o
   movimento de hover, para nao parecerem clicaveis. O caminho para o orcamento da
   secao e o botao abaixo do titulo; o card "Monte seu kit" segue clicavel. */
.mosaico__bloco--vitrine,
.mosaico__bloco--vitrine:hover { transform: none; box-shadow: none; cursor: default; }
.mosaico__bloco--vitrine:hover img { transform: none; }

/* Rotulo em texto escuro quando o fundo da foto e claro (design.md §7.2) */
.mosaico__bloco--claro,
.mosaico__bloco--claro:hover { color: var(--neutro-900); }

/* "Monte seu kit" + "Nao achou o que procura?" num cartao so (16/10/2026, item 12).
   Ocupa a linha inteira. Foto v3 (17/10/2026): 3:2 com os produtos inteiros entre 56% e
   96% da largura e 37% e 73% da altura; o cartao 3:1 mostra a faixa de 30% a 80%
   (object-position 60%), com os produtos centralizados na altura e o texto a esquerda,
   sobre a parede, com o veu claro da esquerda. */
.mosaico__bloco--kit {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 1;
  justify-content: center;
  background-color: #EEDDC8;
}

.mosaico__bloco--kit img { object-position: 50% 60%; }

.mosaico__bloco--kit::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 48%);
}

.mosaico__bloco--kit .mosaico__conteudo { max-width: 24rem; }
.mosaico__bloco--kit .mosaico__apoio + .mosaico__apoio { margin-top: var(--e-3); }

/* "Nao achou o que procura?" em destaque (17/10/2026): linha propria, Rubik navy, com o
   mesmo marca-texto amarelo da palavra "marca" do hero (amarelo como bloco de cor sob
   letra navy, design.md §2.2). Fraunces ficou de fora: o manual limita a uma frase
   curta por peca, e o hero ja usa. */
.mosaico__destaque {
  display: block;
  margin-bottom: var(--e-1);
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--neutro-900);
}

.mosaico__destaque .grifo {
  color: inherit;   /* o .grifo geral pinta de amarelo (pensado para fundo azul) */
  background-image: linear-gradient(transparent 40%, var(--amarelo-500) 40%,
                                    var(--amarelo-500) 92%, transparent 92%);
  padding-inline: .1em;
  margin-inline: -.1em;
  border-radius: .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mosaico__bloco--kit .mosaico__acao { left: var(--e-8); right: auto; }
.mosaico__bloco--kit .mosaico__conteudo { margin-bottom: var(--e-10); }

@media (max-width: 899px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .mosaico__bloco { grid-column: span 1; padding: var(--e-6); }
  .mosaico__acao { right: var(--e-6); bottom: var(--e-6); }
  .mosaico__bloco--kit { grid-column: 1 / -1; aspect-ratio: auto; min-height: 22rem; }
  .mosaico__bloco--kit .mosaico__conteudo { max-width: 16rem; }
  .mosaico__bloco--kit .mosaico__acao { left: var(--e-6); }
}

/* Celular (16/10/2026, item 10): grade de 2 colunas com foto em cima e texto embaixo,
   no lugar de um cartao 4:5 por tela. As fotos 4:5 deixam o topo livre para o rotulo;
   o recorte 1:1 ancorado embaixo tira essa sobra e mantem o produto inteiro. */
@media (max-width: 599px) {
  .mosaico { gap: var(--e-3); }

  .mosaico__bloco {
    aspect-ratio: auto;
    padding: 0;
    border: 1px solid var(--neutro-200);
    border-radius: var(--raio-lg);
    background-color: var(--branco);
    color: var(--neutro-900);
  }

  .mosaico__bloco:hover { color: var(--neutro-900); }
  .mosaico__bloco::before { display: none; }

  .mosaico__bloco img {
    position: static;
    height: auto;
    aspect-ratio: 1 / 1;
    object-position: 50% 100%;
  }

  .mosaico__conteudo { max-width: none; padding: var(--e-3) var(--e-3) 0; }
  .mosaico__titulo { font-size: 1rem; }
  .mosaico__apoio { font-size: .8125rem; opacity: 1; color: var(--neutro-700); }

  /* Cartao de ~160 px: o botao ocupa a largura toda, sem icone, numa linha so */
  .mosaico__acao {
    position: static;
    align-self: stretch;
    justify-content: center;
    margin: auto var(--e-2) var(--e-2);
    padding: .5rem .75rem;
    font-size: .75rem;
    white-space: nowrap;
  }

  .mosaico__acao svg { display: none; }

  /* 17/10/2026: "Pedir no WhatsApp" um pouco menor, com folga de ~14 px de cada lado.
     A frase mede ~9,4 px de largura por px de fonte; o botao tem a largura do cartao
     menos 16 px (cqi do cartao), entao a fonte acompanha o cartao, de 10 a 11,5 px. */
  .mosaico__bloco { container-type: inline-size; }
  .mosaico__acao { font-size: clamp(10px, calc((100cqi - 44px) / 9.4), 11.5px); }

  /* 17/10/2026: so Camisas e Outros produtos mantem o texto de apoio. No celular os
     dois ocupam a linha inteira (Camisas no topo, Outros embaixo), com a foto quadrada
     a esquerda e titulo, texto e botao a direita; os 4 sem texto ficam em 2 x 2 no
     meio, todos do mesmo tamanho. */
  .mosaico__bloco--largo-celular {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 42% 1fr;
    grid-template-rows: 1fr auto;
    align-items: start;
  }

  .mosaico__bloco--largo-celular img {
    grid-row: 1 / span 2;
    height: 100%;
    min-height: 100%;
  }

  .mosaico__bloco--largo-celular .mosaico__conteudo { padding: var(--e-4) var(--e-4) 0; }

  /* Sem o botao, o texto do card de vitrine precisa da folga de baixo; nos cards largos
     ele fica centralizado na altura, ao lado da foto */
  .mosaico__bloco--vitrine .mosaico__conteudo { padding-bottom: var(--e-3); }
  .mosaico__bloco--vitrine.mosaico__bloco--largo-celular { grid-template-rows: auto; align-items: center; }
  .mosaico__bloco--vitrine.mosaico__bloco--largo-celular img { grid-row: 1; }
  .mosaico__bloco--vitrine.mosaico__bloco--largo-celular .mosaico__conteudo { padding: var(--e-4); }

  /* coluna de texto = 58% do cartao; a frase (~9,4 px por px de fonte) cabe com folga */
  .mosaico__bloco--largo-celular .mosaico__acao {
    align-self: end;
    justify-self: start;
    margin: var(--e-3) var(--e-3) var(--e-4) var(--e-4);
    padding: .5rem .875rem;
    font-size: clamp(11px, calc((58cqi - 56px) / 9.4), 13px);
  }

  /* Kit no celular (17/10/2026): a foto vertical v3 e o fundo do cartao inteiro, como
     no hero. Texto e botao ficam em cima, direto na parede limpa (65% de cima da foto);
     os brindes ficam na base. Sai o bloco bege com a foto separada embaixo. */
  .mosaico__bloco--kit {
    grid-column: 1 / -1;
    min-height: 0;
    aspect-ratio: 2 / 3;
    justify-content: flex-start;
    border: 0;
    background-color: #EEDDC8;
  }

  .mosaico__bloco--kit img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 100%;
  }

  .mosaico__bloco--kit .mosaico__conteudo { max-width: none; margin: 0; padding: var(--e-6) var(--e-6) 0; }
  .mosaico__bloco--kit .mosaico__titulo { font-size: var(--t-h3); }
  /* destaque numa linha so ate em 320 px (20 px quebraria em duas) */
  .mosaico__bloco--kit .mosaico__destaque { font-size: clamp(1.0625rem, 5.4vw, 1.25rem); }
  .mosaico__bloco--kit .mosaico__apoio { font-size: var(--t-pequeno); color: var(--neutro-900); }
  .mosaico__bloco--kit .mosaico__acao {
    position: relative;
    inset: auto;   /* sem o left/bottom das regras de cima, que deslocariam o botao */
    z-index: 3;
    align-self: flex-start;
    margin: var(--e-4) var(--e-6) 0;
    padding: .625rem 1rem;
    font-size: var(--t-pequeno);
  }

  .mosaico__bloco--kit .mosaico__acao svg { display: block; }
}

/* Celular estreito: o texto ocupa mais altura, entao o cartao fica mais alto (9:16)
   para os brindes, na base, nao encostarem no botao */
@media (max-width: 359px) {
  .mosaico__bloco--kit { aspect-ratio: 9 / 16; }
}


/* --------------------------------------------------------------------------
   7. Card de conteudo (garantia, passo, tecnica) — design.md §7.3
   -------------------------------------------------------------------------- */

.card-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6);
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-lg);
  background-color: var(--branco);
  height: 100%;
}

.card-conteudo--suave {
  background-color: var(--azul-50);
  border-color: transparent;
}

.card-conteudo__icone {
  width: 28px;
  height: 28px;
  color: var(--azul-500);
}

.card-conteudo__numero {
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--amarelo-500);
}

.card-conteudo__titulo { margin: 0; }

.card-conteudo__texto {
  font-size: var(--t-pequeno);
  color: var(--neutro-700);
  margin: 0;
}

.card-conteudo__foto {
  aspect-ratio: 4 / 3;
  margin: calc(var(--e-6) * -1) calc(var(--e-6) * -1) var(--e-2);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  overflow: hidden;
  background-color: var(--neutro-100);
}

.card-conteudo__foto img { width: 100%; height: 100%; object-fit: cover; }

.card-conteudo--com-foto { padding-top: 0; overflow: hidden; }

/* Barra de garantias — 4 itens curtos abaixo do hero */
.garantias {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-6);
}

.garantia {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.garantia__icone {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--azul-500);
}

.garantia__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutro-900);
  margin: 0;
}

.garantia__texto {
  font-size: var(--t-legenda);
  /* --neutro-500 dava 3,88:1 sobre branco e reprovava o AA; os textos novos
     sao mais longos, entao a legibilidade pesa mais aqui */
  color: var(--neutro-700);
  margin: 2px 0 0;
}

/* Linha de apoio abaixo dos 4 diferenciais */
.garantias__nota {
  margin: var(--e-6) 0 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--neutro-200);
  text-align: center;
  font-size: var(--t-pequeno);
  font-weight: 500;
  color: var(--neutro-700);
}

@media (max-width: 899px) {
  .garantias { grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
}

@media (max-width: 479px) {
  .garantias { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. Card de depoimento — design.md §7.4
   -------------------------------------------------------------------------- */

.card-depoimento {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-8);
  border-radius: var(--raio-lg);
  background-color: var(--azul-100);
  height: 100%;
}

.card-depoimento__aspas {
  font-family: var(--fonte-destaque);  /* Fraunces italico: a unica voz de destaque do site, 48px (>= 22px) */
  font-size: 3rem;
  font-style: italic;
  font-weight: 500;
  line-height: .6;
  color: var(--amarelo-500);
}

.card-depoimento__texto { color: var(--neutro-700); margin: 0; }

.card-depoimento__autor {
  margin-top: auto;
  font-size: var(--t-pequeno);
}

/* A legenda do autor usa --neutro-700, nao --neutro-500: sobre o azul-claro
   do card o cinza claro cai para 3,38:1 e reprova o AA da secao 12. Os dois tokens
   ja existem na secao 2.3, entao e troca de token, nao mudanca de paleta. */
.card-depoimento .legenda { color: var(--neutro-700); }

/* Variante com print de conversa. O proprio print ja carrega as aspas e a
   mensagem, entao a aspa decorativa sai daqui para nao duplicar o sinal.
   A moldura branca separa o print (que tem fundo e tipografia do WhatsApp)
   do card, deixando claro que e uma captura, nao arte do site. */
.card-depoimento--print {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.card-depoimento__print {
  margin: 0;
  border: 1px solid var(--azul-200);
  border-radius: var(--raio-md);
  overflow: hidden;
  background-color: var(--branco);
}

.card-depoimento__print img { display: block; width: 100%; height: auto; }

.card-depoimento__nome { font-weight: 600; color: var(--neutro-900); }

.estrelas { display: flex; gap: 2px; color: var(--amarelo-500); }
.estrelas svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   9. Acordeao — design.md §9
   -------------------------------------------------------------------------- */

.acordeao {
  border-top: 1px solid var(--neutro-200);
}

.acordeao__item { border-bottom: 1px solid var(--neutro-200); }

.acordeao__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
  min-height: 44px;
  padding: var(--e-6) 0;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--neutro-900);
  transition: color var(--mov-rapido);
}

.acordeao__gatilho:hover { color: var(--azul-700); }

.acordeao__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--azul-500);
  transition: transform 240ms ease-in-out;
}

.acordeao__gatilho[aria-expanded='true'] .acordeao__chevron { transform: rotate(180deg); }

.acordeao__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease-in-out;
}

.acordeao__painel[data-aberto='true'] { grid-template-rows: 1fr; }

.acordeao__painel > div { overflow: hidden; }

.acordeao__painel p {
  padding-bottom: var(--e-6);
  max-width: 42rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. Carrossel — design.md §9 §10 (scroll-snap, sem autoplay)
   -------------------------------------------------------------------------- */

.carrossel { position: relative; }

.carrossel__trilha {
  display: grid;
  grid-auto-flow: column;
  /* Sem minmax(0, ...): com min zero as trilhas encolhem para caber em vez de rolar. */
  grid-auto-columns: calc((100% - var(--e-6) * 3) / 4);
  gap: var(--e-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--e-2);
  /* Barra de rolagem escondida: a navegacao fica nas setas laterais (desktop)
     e no indicador de posicao (mobile). A trilha continua rolavel por arraste,
     por teclado e por scroll-snap. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carrossel__trilha::-webkit-scrollbar { display: none; }

.carrossel__trilha > * { scroll-snap-align: start; }

/* Setas laterais: metade sobre a borda da trilha, na altura da foto do card.
   Somem quando nao ha mais para onde rolar, entao no inicio so aparece a da
   direita — que e o convite para ver o resto. */
.carrossel__nav {
  position: absolute;
  top: 38%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-pill);
  color: var(--azul-700);
  background-color: var(--branco);
  box-shadow: var(--sombra-md);
  transform: translateY(-50%);
  transition: background-color var(--mov-rapido), border-color var(--mov-rapido),
              opacity var(--mov-rapido), visibility var(--mov-rapido);
}

.carrossel__nav--anterior { left: -22px; }
.carrossel__nav--proximo  { right: -22px; }

.carrossel__nav:hover:not(:disabled) {
  background-color: var(--azul-100);
  border-color: var(--azul-200);
}

.carrossel__nav:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 1199px) {
  .carrossel__trilha { grid-auto-columns: calc((100% - var(--e-6) * 2) / 3); }
}

@media (max-width: 899px) {
  .carrossel__trilha { grid-auto-columns: calc((100% - var(--e-4)) / 2); gap: var(--e-4); }
  /* No mobile a navegacao e por arraste, com o indicador de posicao (design.md §10) */
  .carrossel__nav { display: none; }
}

@media (max-width: 479px) {
  .carrossel__trilha { grid-auto-columns: 82%; }
}

/* Indicador de posicao, visivel no mobile (design.md §10) */
.carrossel__indicador {
  display: none;
  height: 3px;
  margin-top: var(--e-4);
  border-radius: var(--raio-pill);
  background-color: var(--neutro-200);
  overflow: hidden;
}

.carrossel__indicador span {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: var(--raio-pill);
  background-color: var(--azul-500);
  transition: transform 150ms linear;
}

@media (max-width: 899px) {
  .carrossel__indicador { display: block; }
}

/* Indicador das listas que so viram carrossel no celular ("Por necessidade" e
   "Como funciona", 17/10/2026): no tablet elas continuam em grade, sem indicador. */
.carrossel__indicador--celular { display: none; }

@media (max-width: 599px) {
  .carrossel__indicador--celular { display: block; }
}

/* Sobre fundo azul escuro: trilho claro translucido e barra amarela */
.secao--azul-escuro .carrossel__indicador { background-color: rgba(255, 255, 255, .18); }
.secao--azul-escuro .carrossel__indicador span { background-color: var(--amarelo-500); }

/* --------------------------------------------------------------------------
   11. Faixa de CTA — design.md §7.2 / §10
   -------------------------------------------------------------------------- */

.faixa-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-6);
  padding: var(--e-24) var(--e-8);
  border-radius: var(--raio-xl);
  background-color: var(--azul-700);
  text-align: center;
  color: var(--azul-200);
}

.faixa-cta h2 { color: var(--branco); max-width: 24ch; }
/* 60ch: o apoio atual tem ~190 caracteres e em 48ch ia a 4 linhas (limite da design.md 3.2 e 68) */
.faixa-cta p { max-width: 60ch; font-size: var(--t-corpo-grande); }

@media (max-width: 599px) {
  .faixa-cta { padding: var(--e-14) var(--e-6); border-radius: var(--raio-lg); }
  .faixa-cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   12. Botao flutuante de WhatsApp — design.md §10
   -------------------------------------------------------------------------- */

.whatsapp-flutuante {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--raio-pill);
  background-color: var(--whatsapp);
  color: var(--branco);
  box-shadow: var(--sombra-lg);
  transition: transform var(--mov-rapido);
}

.whatsapp-flutuante:hover { transform: translateY(-2px); color: var(--branco); }

.whatsapp-flutuante svg { width: 30px; height: 30px; }

@media (min-width: 900px) {
  .whatsapp-flutuante { right: var(--e-6); bottom: var(--e-6); }
}

/* --------------------------------------------------------------------------
   13. Rodape
   -------------------------------------------------------------------------- */

.rodape {
  background-color: var(--azul-900);
  color: var(--azul-200);
  padding-block: var(--secao-y) var(--e-8);
}

.rodape a { color: var(--azul-200); }
.rodape a:hover { color: var(--branco); }

.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--e-10);
}

.rodape__titulo {
  font-family: var(--fonte-corpo);
  font-size: var(--t-sobretitulo);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: var(--e-4);
}

.rodape__lista { display: grid; gap: var(--e-3); font-size: var(--t-pequeno); }

.rodape__sobre { font-size: var(--t-pequeno); max-width: 30ch; margin-top: var(--e-4); }

.rodape__redes { display: flex; gap: var(--e-3); margin-top: var(--e-6); }

.rodape__rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(199, 219, 245, .25);
  border-radius: var(--raio-pill);
  transition: background-color var(--mov-rapido), border-color var(--mov-rapido);
}

.rodape__rede:hover { background-color: rgba(255, 255, 255, .1); border-color: var(--branco); }

.rodape__rede svg { width: 20px; height: 20px; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-18);
  padding-top: var(--e-8);
  border-top: 1px solid rgba(199, 219, 245, .2);
  font-size: var(--t-legenda);
}

@media (max-width: 899px) {
  .rodape__grade { grid-template-columns: repeat(2, 1fr); gap: var(--e-8); }

  /* Area de toque minima de 44px em qualquer alvo (design.md §10) */
  .rodape__lista { gap: 0; }

  .rodape__lista a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 479px) {
  .rodape__grade { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   15. Pop-up de orcamento (17/10/2026) — aberto por todo botao de WhatsApp
   <dialog> nativo: fundo escurecido, Esc fecha, foco preso dentro da janela.
   Modal da design.md §9: fade do fundo + escala 0.97 -> 1 em 200 ms.
   -------------------------------------------------------------------------- */

.popup-orcamento {
  width: min(34rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: auto;   /* o reset (* { margin: 0 }) tirava a centralizacao nativa do <dialog> */
  padding: 0;
  border: 0;
  border-radius: var(--raio-lg);
  background-color: var(--branco);
  color: var(--neutro-900);
  box-shadow: var(--sombra-lg);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: 5rem;   /* campo focado nao fica atras do rodape fixo */
}

.popup-orcamento[open] { animation: popup-entra 200ms ease-out; }
.popup-orcamento::backdrop { background-color: rgba(9, 33, 63, .55); }

@keyframes popup-entra {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* A pagina atras nao rola enquanto a janela esta aberta */
html:has(.popup-orcamento[open]) { overflow: hidden; }

/* Compacto (17/10/2026): o botao do WhatsApp precisa aparecer sem rolar */
.popup-orcamento__form {
  --popup-pad: var(--e-6);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5, 1.25rem) var(--popup-pad) 0;
}

.popup-orcamento__fechar {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-md);
  color: var(--azul-700);
}

.popup-orcamento__fechar:hover { background-color: var(--azul-50); }
.popup-orcamento__fechar svg { width: 22px; height: 22px; }

/* Aviso do pedido minimo: amarelo como bloco de cor, letra navy (design.md §2.2) */
.popup-orcamento__aviso {
  margin: 0 2.75rem 0 0;
  padding: var(--e-2) var(--e-3);
  border-left: 4px solid var(--amarelo-500);
  border-radius: var(--raio-sm);
  background-color: var(--amarelo-100);
  font-size: var(--t-pequeno);
  line-height: 1.35;
  color: var(--neutro-900);
}

.popup-orcamento__titulo { margin: 0; font-size: var(--t-h4); }

.campos-linha { display: grid; gap: var(--e-3); }

@media (min-width: 480px) {
  .campos-linha { grid-template-columns: 1fr 1fr; }
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo__rotulo {
  padding: 0;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--neutro-900);
}

.campo__opcional { font-size: var(--t-legenda); font-weight: 400; color: var(--neutro-700); }

/* 16 px no campo: abaixo disso o iPhone amplia a tela ao tocar */
.campo__entrada {
  width: 100%;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid var(--neutro-300);
  border-radius: var(--raio-md);
  background-color: var(--branco);
  font: inherit;
  font-size: 1rem;
  color: var(--neutro-900);
}

.campo__entrada::placeholder { color: var(--neutro-500); }
.campo__entrada:focus-visible { outline: none; border-color: var(--azul-700); box-shadow: var(--sombra-foco); }
.campo__entrada[aria-invalid='true'] { border-color: var(--erro); }
textarea.campo__entrada { min-height: 3.5rem; resize: vertical; line-height: 1.4; }

/* Erro descrito em texto, alem da cor (site.md §12) */
.campo__erro { margin: 0; font-size: var(--t-legenda); font-weight: 500; color: var(--erro); }

.opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.opcao {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 4px var(--e-2);
  border: 1px solid var(--neutro-200);
  border-radius: var(--raio-md);
  font-size: .875rem;
  line-height: 1.2;
  cursor: pointer;
}

.opcao input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--azul-700); }
.opcao:has(input:checked) { border-color: var(--azul-700); background-color: var(--azul-50); }
.opcao:has(input:focus-visible) { box-shadow: var(--sombra-foco); }

/* Rodape preso na base da janela: em tela baixa o conteudo rola por tras e o
   botao continua visivel */
.popup-orcamento__rodape {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0 calc(var(--popup-pad) * -1);
  padding: var(--e-2) var(--popup-pad) var(--e-4);
  background-color: var(--branco);
  box-shadow: 0 -8px 12px -10px rgba(9, 33, 63, .25);
}

.popup-orcamento__enviar { width: 100%; }

/* Aviso de privacidade (17/10/2026): uma linha, dentro do rodape fixo */
.popup-orcamento__aviso-legal {
  margin: var(--e-2) 0 0;
  font-size: var(--t-legenda);
  line-height: 1.35;
  color: var(--neutro-700);
  text-align: center;
}

.popup-orcamento__aviso-legal a { color: var(--azul-700); }

.popup-orcamento__isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 599px) {
  .popup-orcamento__form { --popup-pad: var(--e-4); }
  .opcao { padding-inline: 6px; gap: 6px; font-size: .8125rem; }
  .opcao input { width: 16px; height: 16px; }
}

@media (max-width: 359px) {
  .popup-orcamento__form { --popup-pad: var(--e-3); }
}