/* Página: Onde comprar */
.oc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Hero com busca ---------- */
.oc-hero {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(var(--overlay),.78), rgba(var(--overlay),.92)), url("../../assets/textures/textura-escura-dourada.png");
  background-size: cover;
}
.oc-hero .container {
  padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px);
  display: flex; flex-direction: column; gap: 20px;
}
.oc-hero .display { max-width: 900px; }
.oc-hero-texto { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texto-2); max-width: 560px; }

.oc-busca { display: flex; flex-wrap: wrap; gap: 10px; max-width: 760px; margin-top: 8px; }
/* No design os campos usam #2B2D2A (escuro) / #EDEDEA (claro) = --campo-topo */
.oc-cep, .oc-tipo {
  height: 60px; background: var(--campo-topo); border: 0; border-radius: 0; color: var(--texto);
  font-family: var(--font-texto); min-width: 0;
}
.oc-cep { flex: 1 1 200px; border-bottom: 3px solid var(--amarelo); padding: 0 18px; font-size: 18px; outline: none; }
.oc-tipo { flex: 1 1 180px; padding: 0 14px; font-size: 16px; }
.oc-buscar { height: 60px; padding: 0 28px; font-size: 17px; }

/* ---------- Resultados + mapa ---------- */
.oc-resultados { background: var(--bg-secao); }
.oc-resultados .container {
  padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 24px; align-items: stretch;
}
.oc-lista { display: flex; flex-direction: column; gap: 12px; }
.oc-titulo { margin: 0; font-family: var(--font-cond); font-weight: 700; font-size: 20px; letter-spacing: .04em; }
.oc-itens { display: flex; flex-direction: column; gap: 12px; }
.oc-revenda {
  background: var(--card); outline: 1px solid var(--card-contorno); outline-offset: -1px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 6px;
  border-left: 3px solid var(--amarelo);
}
.oc-revenda-tag { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--texto-3); }
.oc-revenda-nome { font-family: var(--font-cond); font-weight: 700; font-size: 20px; }
.oc-revenda-end { font-size: 14px; color: var(--texto-2); }
.oc-revenda-contato { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 4px; font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.oc-revenda-contato a { color: var(--destaque); }
.oc-revenda-contato a:hover { color: var(--destaque-hover); }
.oc-vazio { margin: 0; font-size: 15px; color: var(--texto-2); padding: 20px 0; }
.oc-nota { font-size: 13px; color: var(--texto-3); line-height: 1.5; }

/* ---------- Mapa (Leaflet + CARTO; pinos amarelos da marca) ---------- */
.oc-mapa {
  height: clamp(380px, 70vh, 620px);
  position: sticky; top: 132px; align-self: start;
  background: var(--card); border: 1px solid var(--linha-fraca);
  font-family: var(--font-texto); z-index: 0;
}
.oc-mapa .leaflet-container, .oc-mapa.leaflet-container { background: var(--card); font-family: var(--font-texto); }
.oc-pino {
  width: 22px; height: 22px; background: var(--amarelo); border: 3px solid var(--preto);
  transform: rotate(45deg); box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.oc-pino.ativo { background: #FFFFFF; border-color: var(--amarelo); }
.oc-mapa .leaflet-popup-content-wrapper, .oc-mapa .leaflet-popup-tip {
  background: var(--preto); color: #FFFFFF; border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.oc-mapa .leaflet-popup-content-wrapper { border-top: 4px solid var(--amarelo); }
.oc-mapa .leaflet-popup-content { margin: 14px 16px; font-size: 13px; line-height: 1.45; }
.oc-mapa .leaflet-popup-close-button { color: #D8D8D3; }
.oc-popup-nome { display: block; font-family: var(--font-cond); font-weight: 700; font-size: 18px; letter-spacing: .02em; margin-bottom: 4px; }
.oc-popup-end { display: block; color: #D8D8D3; margin-bottom: 8px; }
.oc-popup a { color: var(--amarelo); font-family: var(--font-cond); font-weight: 700; letter-spacing: .04em; margin-right: 12px; }
.oc-mapa .leaflet-control-zoom a { background: var(--preto); color: #FFFFFF; border-color: #333; border-radius: 0; }
.oc-mapa .leaflet-control-zoom a:hover { background: var(--amarelo); color: var(--preto); }
.oc-mapa .leaflet-control-attribution { background: rgba(23,23,23,.75); color: #8C8C86; font-size: 10px; }
.oc-mapa .leaflet-control-attribution a { color: #D8D8D3; }
:root[data-theme="light"] .oc-mapa .leaflet-control-attribution { background: rgba(255,255,255,.8); color: #6B6E68; }
:root[data-theme="light"] .oc-mapa .leaflet-control-attribution a { color: #4A4F4A; }
.oc-revenda { cursor: pointer; }
.oc-revenda.ativo { outline: 2px solid var(--amarelo); outline-offset: -2px; }
/* ---------- CTAs ---------- */
.oc-ctas { background: var(--bg); }
.oc-ctas .container {
  padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px;
}
.oc-cta { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.oc-cta-titulo { font-family: var(--font-titulo); font-size: 44px; line-height: .95; text-transform: uppercase; }
.oc-cta-texto { font-size: 16px; line-height: 1.55; }
.oc-cta-botao, .oc-cta-whats {
  align-self: flex-start; margin-top: 8px;
  font-family: var(--font-cond); font-weight: 700; font-size: 16px; letter-spacing: .08em;
}

.oc-cta-amarelo { background: var(--amarelo); color: var(--preto); }
.oc-cta-botao { background: var(--bg); color: var(--texto); padding: 14px 22px; }
.oc-cta-botao:hover { color: var(--destaque); }

.oc-cta-card {
  background: var(--card); border: 1px solid var(--linha-fraca);
  outline: 1px solid var(--card-contorno); outline-offset: -1px;
}
.oc-cta-card .oc-cta-texto { color: var(--texto-2); }
.oc-cta-whats { border: 2px solid var(--texto); color: var(--texto); padding: 12px 20px; }
.oc-cta-whats:hover { border-color: var(--amarelo); color: var(--amarelo); }
:root[data-theme="light"] .oc-cta-whats:hover { background: var(--amarelo); border-color: var(--destaque); color: var(--preto); }