/* Página Contato: composição própria sobre a base (base.css), o movimento (movimento.css) e os componentes (componentes.css).
   Direção visual (site/direcao-visual.html, Contato 3/2/3): "achar o canal certo em segundos, com o WhatsApp como caminho principal". Branco e sóbrio, texto à esquerda, um botão
   grande de WhatsApp no topo, canais em linhas largas fáceis de tocar, atendimento e ateliê lado a lado, o passo a passo e as perguntas rápidas. Sem formulário e sem foto grande.
   Movimento mínimo: só a subida suave. */

/* ---------- topo: título curto e o botão grande ---------- */
.topo--contato{padding-block:var(--s6) var(--s7)}
.contato-topo{display:grid;gap:var(--s5);justify-items:start}
.topo--contato .migalhas{margin-bottom:0}
.topo--contato h1{max-width:18ch;font-size:clamp(2.25rem,.8rem + 4.2vw,5.25rem);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.contato-topo__lead{margin:0;max-width:34em}
.contato-topo__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s2)}
.contato-topo__num{margin:0;font:600 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.contato-topo__num .rotulo{display:block;margin:0 0 4px}

/* ---------- canais: linhas largas, cada uma diz o que resolve ---------- */
.canais{padding-block:var(--s8);border-top:1px solid var(--linha)}
.canais__cab{display:grid;gap:var(--s4);max-width:46rem}
.canais h2{font-size:clamp(2rem,1rem + 3vw,4rem);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.canais__lista{list-style:none;margin:var(--s7) 0 0;padding:0;border-top:1px solid var(--linha)}
.canal{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) minmax(0,.9fr) auto;align-items:center;gap:var(--s2) var(--s6);padding:var(--s5) 0;border-bottom:1px solid var(--linha);color:var(--ink);text-decoration:none}
.canal__nome{font:500 clamp(1.5rem,1rem + 1.6vw,2.5rem)/1.1 var(--serif);letter-spacing:-.015em}
.canal__desc{font-size:15px;line-height:1.5;color:var(--suave)}
.canal__valor{font:500 16px/1.4 var(--sans);overflow-wrap:anywhere}
.canal .ic{width:22px;height:22px;transition:transform var(--t-rapido) var(--ease)}
@media(hover:hover){
  .canal:hover .canal__nome{text-decoration:underline;text-decoration-color:var(--ouro);text-decoration-thickness:2px;text-underline-offset:6px}
  .canal:hover .ic{transform:translateX(4px)}
}
@media(max-width:899px){
  .canal{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome seta" "desc seta" "valor seta"}
  .canal__nome{grid-area:nome}.canal__desc{grid-area:desc}.canal__valor{grid-area:valor}.canal .ic{grid-area:seta}
}
@media(prefers-reduced-motion:reduce){.canal .ic{transition:none}}

/* ---------- atendimento e ateliê, lado a lado ---------- */
.atende{padding-block:var(--s8);border-top:1px solid var(--linha)}
.atende__grade{display:grid;gap:var(--s8)}
@media(min-width:900px){.atende__grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,140px);align-items:start}}
.atende h2{margin-bottom:var(--s5);font-size:clamp(1.75rem,1rem + 2.2vw,3rem);line-height:1.08;letter-spacing:-.02em}
.atende__lista{margin:0;border-top:1px solid var(--linha)}
.atende__lista>div{display:grid;gap:var(--s2) var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--linha)}
@media(min-width:600px){.atende__lista>div{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}}
.atende__lista dt{font:600 12px/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.atende__lista dd{margin:0;font-size:clamp(1rem,.95rem + .2vw,1.125rem);line-height:1.6}
.atende__lista a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ouro);text-underline-offset:3px}
.atende__endereco{margin:0 0 var(--s4);font-style:normal;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);line-height:1.5;color:var(--ink)}
.atende__nota{margin:0 0 var(--s5);max-width:42ch;font-size:15px;line-height:1.55;color:var(--suave)}
/* mapa sob demanda: só carrega quando a pessoa pede (o iframe do Google pesa) */
.mapa{position:relative;aspect-ratio:16/10;margin-bottom:var(--s4);overflow:hidden;border:1px solid var(--linha);border-radius:var(--r-card);
  background:linear-gradient(90deg,rgba(196,156,111,.16) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(0deg,rgba(196,156,111,.16) 1px,transparent 1px) 0 0/48px 48px,var(--ouro-tint)}
.mapa__capa{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--s3);text-align:center}
.mapa__texto{margin:0;font:500 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--serif);color:var(--ink)}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- como funciona quando você chama: três etapas de uma sequência real ---------- */
.chamando{padding-block:var(--s8);border-top:1px solid var(--linha)}
.chamando h2{max-width:20ch;margin-bottom:var(--s7);font-size:clamp(2rem,1rem + 3vw,4rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.chamando__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
@media(min-width:900px){.chamando__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,80px)}}
.etapa{display:grid;gap:var(--s3);align-content:start;padding-top:var(--s5);border-top:1px solid var(--ouro)}
.etapa__n{font:italic 500 clamp(2.5rem,2rem + 2vw,4rem)/1 var(--serif);color:var(--ink)}
.etapa__titulo{margin:0;font:600 1.25rem/1.3 var(--sans);color:var(--ink)}
.etapa__texto{margin:0;max-width:36ch}