/* ==========================================================================
   CONTATO COM ESCRITÓRIOS — ctt-
   Canais em corpo grande de um lado, um card por escritório do outro.
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --accent-ink --display --radius-media --radius-pill --ease
   ========================================================================== */

.ctt-grade{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(36px,6vw,96px);align-items:start;
}

/* ---------------------------------------------------------------- canais
   Cada linha é um link inteiro: rótulo pequeno, valor em corpo de display e
   a seta. É o que se toca no celular, então a linha toda é o alvo. */
.ctt-canais{margin-top:clamp(30px,5vh,48px);border-top:1px solid var(--rule)}
.ctt-canal{
  display:grid;grid-template-columns:110px minmax(0,1fr) auto;
  align-items:center;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--rule);
  transition:border-color .3s;
}
.ctt-canal-rot{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)}
.ctt-canal-val{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.9vw,26px);letter-spacing:-.018em;
  color:var(--fg);overflow-wrap:anywhere;
  transition:color .25s;
}
.ctt-canal-seta{color:var(--fg-muted);transition:color .25s}
/* Hover só troca cor (CLAUDE.md §6). */
.ctt-canal:hover{border-color:var(--rule-2)}
.ctt-canal:hover .ctt-canal-val,
.ctt-canal:hover .ctt-canal-seta{color:var(--accent-ink,var(--accent))}
.ctt-canal:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---------------------------------------------------------------- escritórios */
.ctt-escritorios{display:grid;gap:18px}
.ctt-card{
  display:grid;gap:14px;
  padding:clamp(24px,2.6vw,32px);
  border:1px solid var(--rule);border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--fg) 3%,var(--bg));
}
.ctt-card-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ctt-cidade{
  font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--fg);
}
.ctt-endereco{font-style:normal;font-size:15px;line-height:1.65;color:var(--fg-2)}
.ctt-horario{font-size:13px;color:var(--fg-muted)}
.ctt-mapa{
  justify-self:start;
  font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-2);
  border-bottom:1px solid var(--rule-2);padding-bottom:3px;
  transition:color .25s,border-color .25s;
}
.ctt-mapa:hover{color:var(--accent-ink,var(--accent));border-color:currentColor}

/* O ESTADO é escrito pelo script, e só por ele. Vazio, o span não ocupa
   nada: sem JavaScript o card não diz "aberto" nem "fechado". O texto diz o
   estado por extenso — a cor do ponto repete, nunca substitui. */
.ctt-estado:empty{display:none}
.ctt-estado{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.04em;color:var(--fg-muted);
}
.ctt-estado::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--rule-2);
}
.ctt-card[data-aberto="sim"] .ctt-estado{color:var(--fg)}
.ctt-card[data-aberto="sim"] .ctt-estado::before{background:var(--accent)}

@media(max-width:900px){
  .ctt-grade{grid-template-columns:1fr}
}
@media(max-width:520px){
  .ctt-canal{grid-template-columns:minmax(0,1fr) auto;row-gap:4px;column-gap:12px}
  .ctt-canal-rot{grid-column:1 / -1}
}