/* ==========================================================================
   TEMA — Studio Forma (site de exemplo)
   Direção: boutique urbano e quente. Nicho de foto ALTA: o ambiente é o
   argumento de venda, porque quem procura personal foge de academia lotada.
   Referência do nicho: estúdios boutique, onde o site vende exclusividade
   e acompanhamento de perto, não preço de mensalidade.
   ========================================================================== */

:root {
  --cor-fundo: #fdfbf9;
  --cor-superficie: #f4eee8;
  --cor-escuro: #1e1a17;          /* marrom quase preto */
  --cor-texto: #241f1b;
  --cor-texto-suave: #6b615a;
  --cor-borda: #e6ddd4;

  --cor-marca: #1e1a17;
  --cor-marca-escura: #100d0b;
  --cor-destaque: #a33d1a;        /* terracota queimado: passa contraste no claro */
  --cor-destaque-escura: #822f13;
  --cor-destaque-clara: #f0a06a;  /* terracota clara, sobre o marrom */

  --fonte-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --fonte-corpo: "Inter", system-ui, sans-serif;
  --peso-titulo: 700;

  --raio: 6px;
  --raio-g: 16px;
}

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

.marca-nome {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cor-texto);
  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 {
  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;
}

/* Planos e modalidades */
.modalidade { border-left: 3px solid var(--cor-destaque); padding-left: var(--e-4); }
.modalidade h3 { font-size: 1.3rem; }
.superficie-escura .modalidade { border-left-color: var(--cor-destaque-clara); }

/* Números do estúdio */
.numeros { display: grid; gap: var(--e-6); }
.numero strong {
  display: block; font-family: var(--fonte-titulo); font-weight: 800;
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); color: #fff; letter-spacing: -0.03em;
}
.numero 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) { .numeros { grid-template-columns: repeat(3, 1fr); } }