/* ==========================================================================
   TEMA — Sorriso Claro Odontologia (site de exemplo)
   Direção: clínico premium e acolhedor. Nicho de foto MÉDIA: o ambiente
   limpo e a equipe é que vendem, então a imagem trabalha junto do texto.
   Referência do nicho: clínicas boutique, onde o site precisa passar
   assepsia sem parecer frio.
   ========================================================================== */

:root {
  --cor-fundo: #ffffff;
  --cor-superficie: #eff6f8;
  --cor-escuro: #123a46;          /* petróleo suave, menos duro que preto */
  --cor-texto: #17323a;
  --cor-texto-suave: #526a75;     /* escurecido para passar AA sobre a superfície clara */
  --cor-borda: #dce9ed;

  --cor-marca: #14606f;
  --cor-marca-escura: #0e4854;
  --cor-destaque: #0a7285;        /* turquesa profundo: 5,1:1 sobre branco */
  --cor-destaque-escura: #075a69;
  --cor-destaque-clara: #7fd4e3;

  --fonte-titulo: "Outfit", system-ui, sans-serif;
  --fonte-corpo: "Inter", system-ui, sans-serif;
  --peso-titulo: 600;

  --raio: 12px;
  --raio-g: 22px;
}

h1, h2 { letter-spacing: -0.02em; }

.marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cor-marca);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marca-nome em { font-style: normal; color: var(--cor-destaque); }
.superficie-escura .marca-nome, .rodape .marca-nome { color: #fff; }
.superficie-escura .marca-nome em, .rodape .marca-nome em { color: var(--cor-destaque-clara); }

/* Selo de confiança */
.selo {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  color: var(--cor-destaque); font-size: 0.875rem; font-weight: 600;
  padding: 0.45rem 0.95rem; border-radius: 999px;
}

/* Tratamentos: card claro com marcador redondo */
.trat { display: flex; gap: var(--e-4); align-items: flex-start; }
.trat .bolinha {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--cor-superficie); color: var(--cor-destaque);
  display: grid; place-items: center; font-weight: 700; font-family: var(--fonte-titulo);
}

/* Faixa de confiança */
.confianca { display: grid; gap: var(--e-6); text-align: center; }
.confianca strong {
  display: block; font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); color: #fff;
}
.confianca span { color: var(--cor-texto-inverso-suave); font-size: 0.95rem; }

.contato-dados { display: grid; gap: var(--e-4); }
.contato-dados div { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.contato-dados dt { font-family: var(--fonte-titulo); font-weight: 700; color: var(--cor-texto); min-width: 8rem; }
.contato-dados dd { margin: 0; color: var(--cor-texto-suave); }

@media (min-width: 700px) { .confianca { grid-template-columns: repeat(3, 1fr); } }