/* GERADO por wp/monta.py a partir de assets/css/localizador.css.
   Não edite aqui: edite o protótipo e rode o script de novo.
   Tokens e @font-face vêm do custom_css do Kit do Elementor. */

/* ==========================================================================
   Orthocrin · Localizador de unidades
   --------------------------------------------------------------------------
   Mesmo sistema da LP-Template-D. As diferenças contra a produção de hoje
   (lojas.orthocrin.com.br) são de ESCALA e RITMO, não de cor — foi isso que
   a medição mostrou:

              produção          aqui
     H1       30px / peso 400   clamp até 72px / peso 600 / tracking -.04em
     card     nome 14px CAPS    nome 22px, caixa normal
     botão    raio 6px          pílula
     fonte    Roboto            Asap (do manual da marca)

   Nome de loja em 14px caixa alta, do mesmo tamanho do endereço, é o que dá
   cara de tabela de sistema. O nome é a informação que a pessoa procura.
   ========================================================================== */


.orth-loc { box-sizing: border-box; }

.orth-loc { -webkit-text-size-adjust: 100%; }

.orth-loc {
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Asap', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.orth-loc *, .orth-loc *::before, .orth-loc *::after { box-sizing: border-box; }

.orth-loc img { max-width: 100%; display: block; }
.orth-loc a { color: inherit; }

.orth-loc .grade {
  width: min(100% - var(--gutter) * 2, var(--largura));
  margin-inline: auto;
}

.orth-loc .sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.orth-loc .topo {
  position: absolute; inset-inline: 0; top: 0; z-index: 20;
  padding-block: var(--s5);
}
.orth-loc .topo__grade { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
/* O arquivo é 720x250, então 52px de altura ainda tem folga de sobra para
   tela retina. Menor que isso a marca sumia no topo. */
.orth-loc .topo__logo img { height: 52px; width: auto; }

.orth-loc .topo__zap {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 10px 18px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .30);
  color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 600;
  backdrop-filter: blur(8px);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.orth-loc .topo__zap:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .55); }
.orth-loc .topo__zap svg { width: 18px; height: 18px; }

/* ==========================================================================
   Hero
   --------------------------------------------------------------------------
   O véu é escuro e forte de propósito. Vidro branco translúcido sobre foto
   CLAREIA o fundo e derruba o contraste do texto branco; medindo a opacidade
   real do texto, e não só a cor do fundo, o branco a 82% sobre a foto dava
   3,6:1 — abaixo do mínimo. Daí o degradê fechar em .82 embaixo.
   ========================================================================== */

.orth-loc .hero {
  position: relative;
  padding-block: clamp(140px, 18vw, 210px) 0;
  color: #fff;
  isolation: isolate;
}
/* No WordPress a foto é controle de mídia do widget, então entra como
   background. A prioridade de carga volta pelo <link rel="preload">
   que o orth-localizador.php imprime — num hero que é o LCP isso pesa. */
.orth-loc .hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--foto); background-size: cover;
  background-position: center;
}
.orth-loc .hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(61, 0, 24, .86) 0%, rgba(61, 0, 24, .58) 42%, rgba(61, 0, 24, .82) 100%),
    linear-gradient(90deg, rgba(28, 20, 24, .45) 0%, rgba(28, 20, 24, 0) 60%);
}

.orth-loc .hero__olho {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: var(--s4);
}
.orth-loc .hero__olho::before {
  content: ''; width: 26px; height: 2px; background: var(--laranja); border-radius: 2px;
}

.orth-loc .hero h1 {
  /* A cor vem explícita, não por herança do .hero: a tipografia global do Kit
     do Elementor sai em TODO post-*.css e ganha por ordem de carga. Herdando,
     o título saía #1E293B sobre a foto escura — quase invisível. */
  color: #fff;
  margin: 0;
  font-size: clamp(38px, 6.2vw, 72px);
  line-height: 1.0;
  letter-spacing: -.04em;
  font-weight: 600;
  max-width: 15ch;
  text-wrap: balance;
}
.orth-loc .hero h1 em { font-style: normal; color: var(--laranja); }

.orth-loc .hero__sub {
  margin: var(--s5) 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
}

/* O respiro precisa ser MAIOR que a margem negativa da busca, senão a folga
   líquida entre o subtítulo e o painel é zero — foi o que aconteceu. */
.orth-loc .hero__respiro { height: clamp(120px, 12vw, 170px); }

/* ==========================================================================
   Painel de busca — flutua sobre a borda do hero
   --------------------------------------------------------------------------
   É a diferença mais visível contra a produção, que usa uma barra vinho
   chapada colada no banner. Cartão elevado diz "isto é a ferramenta da
   página", e é o que a pessoa veio fazer aqui.
   ========================================================================== */

.orth-loc .busca {
  position: relative; z-index: 10;
  margin-top: clamp(-96px, -7vw, -56px);
}

.orth-loc .busca__painel {
  background: var(--branco);
  border-radius: var(--r-panel);
  box-shadow: var(--sombra-alta);
  padding: clamp(20px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
  gap: var(--s3);
  align-items: end;
}

.orth-loc .campo { display: grid; gap: 7px; min-width: 0; }
.orth-loc .campo__rotulo {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-45);
  padding-inline-start: 2px;
}

.orth-loc .campo__caixa { position: relative; display: flex; align-items: center; }
.orth-loc .campo__caixa svg {
  position: absolute; inset-inline-start: 15px;
  width: 19px; height: 19px; color: var(--tinta-45); pointer-events: none;
}

.orth-loc .campo input, .orth-loc .campo select {
  width: 100%;
  height: 56px;
  border: 1.5px solid var(--linha);
  border-radius: var(--r-field);
  background: var(--branco);
  color: var(--tinta);
  font: inherit;
  font-size: 16.5px;
  padding-inline: var(--s4);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  appearance: none;
}
.orth-loc .campo input { padding-inline-start: 46px; }
.orth-loc .campo select {
  padding-inline-end: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5257' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.orth-loc .campo input::placeholder { color: var(--tinta-45); }
.orth-loc .campo input:focus, .orth-loc .campo select:focus {
  outline: none;
  border-color: var(--vinho);
  box-shadow: 0 0 0 4px rgba(145, 0, 57, .12);
}
.orth-loc .campo select:disabled { background-color: var(--papel-2); color: var(--tinta-45); cursor: not-allowed; }

/* O botão mora numa coluna com a MESMA estrutura dos campos — rótulo vazio em
   cima — porque sem isso ele não compartilha a linha da grade e cai 16px
   abaixo do centro dos campos. Alinhar por margem fixa quebraria no dia em que
   um rótulo quebrasse em duas linhas. */
.orth-loc .campo--geo { align-self: end; }

/* O botão de localização é ação, então usa a cor de ação. Ele é o convite
   principal quando não há permissão — sem localização não existe "mais
   próxima", e a lista abre alfabética. */
.orth-loc .geo {
  height: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding-inline: 22px;
  border: none; border-radius: var(--r-field);
  background: var(--vinho); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.orth-loc .geo:hover { background: var(--vinho-800); box-shadow: var(--sombra-vinho); }
.orth-loc .geo:active { transform: translateY(1px); }
.orth-loc .geo svg { width: 19px; height: 19px; flex: none; }
.orth-loc .geo[aria-pressed="true"] { background: var(--zap-700); }
.orth-loc .geo[data-carregando="true"] { pointer-events: none; opacity: .72; }
.orth-loc .geo[data-carregando="true"] svg { animation: girando 1s linear infinite; }
@keyframes girando { to { transform: rotate(360deg); } }

/* ==========================================================================
   Resultados
   ========================================================================== */

.orth-loc .resultados { padding-block: clamp(48px, 6vw, 84px) clamp(64px, 8vw, 110px); }

.orth-loc .resultados__cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s6);
}
.orth-loc .resultados__conta {
  color: var(--tinta);
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1; letter-spacing: -.03em; font-weight: 600;
}
.orth-loc .resultados__conta b { color: var(--vinho); font-weight: 600; }
.orth-loc .resultados__ordem {
  margin: 0;
  font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-45);
}

.orth-loc .lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s5);
  list-style: none; margin: 0; padding: 0;
}

/* ---- o cartão ---------------------------------------------------------- */

.orth-loc .loja {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  padding: var(--s5) var(--s5) var(--s4);
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
  animation: entra .5s var(--ease) both;
}
.orth-loc .loja:hover {
  border-color: transparent;
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
}
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .orth-loc .loja { animation: none; }
  .orth-loc .loja:hover { transform: none; }
}

.orth-loc .loja__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
}

.orth-loc .selo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  padding: 5px 12px 5px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.orth-loc .selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.orth-loc .selo--aberta { background: rgba(10, 124, 58, .10); color: var(--zap-700); }
.orth-loc .selo--aberta::before { background: var(--zap); box-shadow: 0 0 0 3px rgba(37, 211, 102, .22); }
.orth-loc .selo--fechada { background: var(--papel-2); color: var(--tinta-70); }
.orth-loc .selo--fechada::before { background: var(--tinta-45); }

.orth-loc .loja__km {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--vinho);
  background: var(--vinho-tinta);
  padding: 5px 11px; border-radius: var(--r-pill);
  white-space: nowrap;
}

/* O nome é 22px e caixa normal. Na produção ele é 14px em caixa alta, do
   mesmo tamanho do endereço — e é o texto que a pessoa está procurando. */
.orth-loc .loja__nome {
  color: var(--tinta);
  margin: 0;
  font-size: 22px; line-height: 1.18; letter-spacing: -.02em; font-weight: 600;
  text-wrap: balance;
}

.orth-loc .loja__onde {
  margin: 7px 0 0;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vinho);
}

.orth-loc .loja__endereco {
  margin: var(--s3) 0 0;
  font-size: 15.5px; line-height: 1.5; color: var(--tinta-70);
}

.orth-loc .loja__horario {
  display: block;
  margin-top: 5px;
  font-size: 14px; font-weight: 600;
  color: var(--tinta-45);
}
.orth-loc .loja__horario--aberta { color: var(--zap-700); }

.orth-loc .loja__nota {
  display: flex; align-items: center; gap: 7px;
  margin-top: var(--s3);
  font-size: 14.5px; color: var(--tinta-70);
}
.orth-loc .loja__nota b { color: var(--tinta); font-weight: 600; }
.orth-loc .loja__nota svg { width: 15px; height: 15px; color: var(--laranja); flex: none; }

.orth-loc .loja__acoes {
  display: flex; gap: var(--s2);
  margin-top: auto; padding-top: var(--s4);
}

.orth-loc .acao {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px;
  border-radius: var(--r-pill);
  font-size: 15.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .18s var(--ease);
}
.orth-loc .acao:active { transform: translateY(1px); }
.orth-loc .acao svg { width: 19px; height: 19px; flex: none; }

/* WhatsApp é a ação primária do card: preenchida, e na cor que o visitante
   já associa a conversa. Clique aqui é um dos três eventos do teste. */
.orth-loc .acao--zap { flex: 1 1 auto; background: var(--zap-700); color: #fff; }
.orth-loc .acao--zap:hover { background: #08602D; }

/* Loja sem celular cadastrado não ganha botão de WhatsApp que não abre
   conversa: wa.me com fixo devolve "o número não está no WhatsApp". */
.orth-loc .acao--tel { flex: 1 1 auto; background: var(--vinho); color: #fff; }
.orth-loc .acao--tel:hover { background: var(--vinho-800); }

.orth-loc .acao--rota {
  flex: 0 0 auto; width: 50px;
  border-color: var(--linha-forte); color: var(--vinho); background: var(--branco);
}
.orth-loc .acao--rota:hover { border-color: var(--vinho); background: var(--vinho-tinta); }

.orth-loc .loja__mais {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; margin-top: var(--s2);
  border: 1.5px solid var(--linha-forte); border-radius: var(--r-pill);
  font-size: 15.5px; font-weight: 600; color: var(--vinho);
  text-decoration: none; background: var(--branco);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.orth-loc .loja__mais:hover { border-color: var(--vinho); background: var(--vinho-tinta); }
.orth-loc .loja__mais svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.orth-loc .loja:hover .loja__mais svg { transform: translateX(4px); }

/* O card inteiro é clicável, MAS só onde não há botão. O "mais informações"
   é um link de verdade e fica por cima da capa — antes ele era um <span> com
   z-index maior, então engolia o clique e não levava a lugar nenhum. */
.orth-loc .loja__cobre { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.orth-loc .loja__acoes, .orth-loc .loja__mais { position: relative; z-index: 2; }

/* ---- ver mais / vazio -------------------------------------------------- */

/* `display` declarado ganha do atributo `hidden`, que só vale pelo estilo do
   navegador. Sem o :not(), o "ver mais" aparecia com uma loja só na lista. */
.orth-loc .mais-linha { display: none; }
.orth-loc .mais-linha:not([hidden]) {
  display: grid; justify-items: center; gap: var(--s3); margin-top: var(--s7);
}

.orth-loc .mais {
  height: 56px; padding-inline: 34px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--vinho); background: transparent; color: var(--vinho);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.orth-loc .mais:hover { background: var(--vinho); color: #fff; }
.orth-loc .mais-linha small { font-size: 14px; color: var(--tinta-45); }

.orth-loc .vazio {
  text-align: center;
  padding: clamp(48px, 7vw, 88px) var(--s5);
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--r-panel);
  background: var(--branco);
}
.orth-loc .vazio h3 { color: var(--tinta); margin: 0 0 var(--s2); font-size: 24px; letter-spacing: -.02em; font-weight: 600; }
.orth-loc .vazio p { margin: 0 0 var(--s5); color: var(--tinta-70); }

/* ==========================================================================
   Rodapé
   ========================================================================== */

.orth-loc .rodape {
  background: var(--vinho-950); color: rgba(255, 255, 255, .78);
  padding-block: var(--s7);
  font-size: 15px;
}
.orth-loc .rodape__grade { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.orth-loc .rodape img { height: 44px; width: auto; }

/* ==========================================================================
   Telas menores
   ========================================================================== */

.orth-loc @media (max-width: 1080px) {
  .busca__painel { grid-template-columns: 1fr 1fr; }
  .busca__painel .campo--texto { grid-column: 1 / -1; }
  .campo--geo { grid-column: 1 / -1; }
  .campo--geo .campo__rotulo { display: none; }
}

@media (max-width: 720px) {
  .orth-loc { font-size: 16px; }
  .orth-loc .busca { margin-top: -40px; }
  .orth-loc .busca__painel { grid-template-columns: 1fr; border-radius: var(--r-card); }
  .orth-loc .campo--geo .campo__rotulo, .orth-loc .campo--geo .campo__rotulo { display: none; }
  .orth-loc .lista { grid-template-columns: 1fr; }
  .orth-loc .hero { padding-top: 120px; }
  /* Só o ícone, mas o alvo de toque continua com 44px: é o mínimo em que o
     dedo acerta sem tentar duas vezes. */
  .orth-loc .topo__logo img { height: 40px; }
  .orth-loc .rodape img { height: 36px; }
  .orth-loc .topo__zap span { display: none; }
  .orth-loc .topo__zap { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .orth-loc .topo__zap svg { width: 20px; height: 20px; }
}