/* ==========================================================================
   SITE — composição específica do site Traço & Fluxo
   (usa os componentes de base.css; não reaproveitar em sites de clientes)
   ========================================================================== */

/* Início (hero) — composição da página de referência do kit -------------- */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; padding-block: clamp(3.5rem, 9vw, 6rem) clamp(3.5rem, 7vw, 5rem); }
.hero__texto { flex: 999 1 540px; min-width: 0; display: grid; gap: 1.6rem; justify-items: start; }
.hero__texto .texto-destaque { max-width: 540px; }
.hero__simbolo {
  flex: 1 1 280px; display: flex; align-items: center; justify-content: center;
  min-height: 300px; background: var(--cor-escuro-fundo);
}
.hero__simbolo img { width: clamp(150px, 22vw, 210px); height: auto; }
@media (max-width: 959.98px) {
  .hero__simbolo { min-height: 240px; }
}
@media (max-width: 599.98px) {
  .hero { gap: 2.5rem; }
  .hero__simbolo { min-height: 220px; }
  .hero .grupo-botoes { width: 100%; }
  .hero .grupo-botoes .btn { flex: 1 1 100%; }
}

.hero__faixa { border-top: 1px solid var(--cor-linha-forte); }
.hero__faixa ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.25rem 1.5rem; margin: 0; padding: 1.25rem 0 0; list-style: none;
  font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); letter-spacing: -0.02em; font-size: 1.06rem;
}
.hero__faixa li { padding-block: 0.35rem; }

/* Serviços ------------------------------------------------------------------ */
.servicos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.servico--destaque { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .servicos { grid-template-columns: repeat(3, 1fr); }
  .servico--destaque { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem 3rem; align-items: start; }
  .servico--destaque .servico__intro { display: grid; gap: 1rem; align-content: start; }
  .servico--destaque .cartao__rodape { grid-column: 1 / -1; padding-top: 0; }
}
.servico--destaque { background: var(--cor-escuro-fundo); color: var(--cor-escuro-texto); }
.servico--destaque p, .servico--destaque .lista-itens { color: var(--cor-escuro-texto-2); }
.servico--destaque h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.servico--destaque .rotulo { color: var(--cor-escuro-texto-2); }
.servico--destaque :focus-visible { outline-color: var(--cor-escuro-foco); }
.servico__selo { justify-self: start; }

/* Como trabalhamos ----------------------------------------------------------- */
.remoto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: 2rem; padding: clamp(1.5rem, 3vw, 2rem); background: var(--cor-superficie);
}
.remoto__texto { display: grid; gap: 0.35rem; max-width: 640px; }
.remoto__texto strong { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); letter-spacing: -0.02em; font-size: 1.2rem; }
.remoto__texto span { color: var(--cor-texto-2); }

/* Portfólio ------------------------------------------------------------------ */
.portfolio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; }
.portfolio__legenda { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: -1rem 0 2.25rem; }
.portfolio__legenda div { display: flex; align-items: baseline; gap: 0.75rem; max-width: 440px; }
.portfolio__legenda dt { flex: none; }
.portfolio__legenda dd { margin: 0; font-size: 0.9rem; color: var(--cor-texto-2); }

.projeto { display: grid; gap: 0.9rem; align-content: start; }
.projeto__midia { position: relative; aspect-ratio: 4 / 3; background: var(--cor-superficie); overflow: hidden; border-radius: var(--raio-bloco); }
.projeto__midia img { width: 100%; height: 100%; object-fit: cover; }
/* Selo sobre a imagem: identifica o tipo do projeto antes de qualquer leitura */
.projeto__selo-midia {
  position: absolute; top: 0.9rem; left: 0.9rem;
  padding: 0.35rem 0.85rem; border-radius: var(--raio-botao);
  background: var(--cor-fundo); color: var(--cor-texto);
  font-size: 0.78rem; font-weight: 500; line-height: 1.2;
}
.projeto--conceitual .projeto__selo-midia { background: var(--cor-escuro-fundo); color: var(--cor-escuro-texto); }
.projeto__entregas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }
.projeto__entregas li { padding: 0.25rem 0.7rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-botao); font-size: 0.8rem; color: var(--cor-texto-2); }
.projeto__aviso { font-size: 0.85rem; color: var(--cor-texto-3); }
.projeto__info { display: grid; gap: 0.4rem; }
.projeto__categoria { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-rotulo); color: var(--cor-texto-3); }
.projeto__info p { color: var(--cor-texto-2); font-size: 0.97rem; }
.selo {
  display: inline-flex; align-items: center; width: fit-content; padding: 0.3rem 0.8rem;
  border: 1px solid currentColor; border-radius: var(--raio-botao);
  font-size: 0.78rem; font-weight: 500; line-height: 1.2;
}
/* Espaço reservado (enquanto não há projetos publicados) */
.projeto--reservado .projeto__midia {
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem;
  border: 1px solid var(--cor-borda); background: var(--cor-fundo);
}
/* Quando já houver projetos publicados, os espaços reservados acompanham a proporção 4:3 dos cartões */
.portfolio:has(.projeto:not(.projeto--reservado)) .projeto--reservado .projeto__midia { aspect-ratio: 4 / 3; }
.projeto--reservado .projeto__midia img { width: 40px; height: 40px; opacity: 1; }
.projeto--reservado .projeto__midia span { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); letter-spacing: -0.02em; font-size: 1.25rem; max-width: 14ch; line-height: 1.15; }
.portfolio__nota { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cor-linha-forte); }
.portfolio__nota p { max-width: 620px; color: var(--cor-texto-2); }

/* Sobre ---------------------------------------------------------------------- */
.sobre { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 900px) { .sobre { grid-template-columns: 1fr 1.15fr; } }
.sobre__titulo { display: grid; gap: 1.25rem; align-content: start; }
.sobre__texto { --espaco: 1.1rem; }
.pilares { display: grid; gap: 0 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.pilares li { display: grid; gap: 0.35rem; padding-block: 1.25rem; border-top: 1px solid var(--cor-linha-forte); }
.pilares strong { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); letter-spacing: -0.02em; font-size: 1.1rem; }
.pilares span { color: var(--cor-texto-2); font-size: 0.97rem; }

/* Contato -------------------------------------------------------------------- */
.contato { --pad-topo: clamp(4rem, 9vw, 7rem); padding-top: var(--pad-topo); overflow: hidden; }
.contato__topo { position: relative; }
/* A única "linha de fluxo" da página (manual: uma por peça): sai pelo topo e pela lateral direita */
.linha-fluxo { display: none; }
@media (min-width: 1100px) {
  .linha-fluxo {
    display: block; position: absolute; right: 0; bottom: 0;
    height: calc(100% + var(--pad-topo)); width: auto; pointer-events: none;
  }
}
.contato__topo .container { position: relative; }
.contato__chamada { display: grid; gap: 1.4rem; justify-items: start; max-width: 600px; }
#montador { margin-top: clamp(3rem, 6vw, 4.5rem); }
.contato__grade { display: grid; gap: 2.5rem 4rem; align-items: start; }
@media (min-width: 960px) { .contato__grade { grid-template-columns: 0.8fr 1.2fr; } }
.contato__passos { display: grid; gap: 1.5rem; }
.contato__passos h3 { font-size: 1.4rem; }
.contato__passos ol { margin: 0; padding: 0; list-style: none; display: grid; }
.contato__passos li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; padding-block: 1rem; border-top: 1px solid var(--cor-escuro-borda); color: var(--cor-escuro-texto-2); }
.contato__passos li span { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); color: var(--cor-acento); }
.contato__chamada h2 { font-size: clamp(2rem, 5vw, 3.25rem); }
.contato__aviso { font-size: 0.88rem; color: var(--cor-escuro-texto-2); max-width: 60ch; }
.contato__aviso a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 0.25em; }
@media (max-width: 599.98px) {
  .contato__chamada .grupo-botoes { width: 100%; }
  .contato__chamada .grupo-botoes .btn { flex: 1 1 100%; }
}

/* Montador de pedido (sem envio de dados: gera mensagem para Instagram/WhatsApp) */
.montador { background: var(--cor-fundo); color: var(--cor-texto); padding: clamp(1.5rem, 4vw, 2.25rem); display: grid; gap: 1.25rem; }
.montador :focus-visible { outline-color: var(--cor-foco); }
.montador__cabeca { display: grid; gap: 0.4rem; }
.montador__cabeca h3 { font-size: 1.4rem; }
.montador__cabeca p { color: var(--cor-texto-2); font-size: 0.94rem; }
.montador__previa { display: grid; gap: 0.4rem; }
.montador__previa pre {
  margin: 0; padding: 1rem; background: var(--cor-superficie); white-space: pre-wrap; word-break: break-word;
  font-family: var(--fonte-texto); font-size: 0.9rem; line-height: 1.55; color: var(--cor-texto-2);
}
.montador .grupo-botoes .btn { flex: 1 1 200px; }
.montador__status { min-height: 1.4em; font-size: 0.9rem; font-weight: 500; color: var(--cor-texto); }
.duas-colunas { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .duas-colunas { grid-template-columns: 1fr 1fr; } }

/* Rodapé --------------------------------------------------------------------- */
.rodape__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--cor-escuro-borda); }
.rodape { border-top: 1px solid var(--cor-escuro-borda); }
.rodape__marca img { width: 260px; height: auto; }   /* horizontal: mínimo 180px; 260px deixa a assinatura legível */
.rodape__marca p { margin-top: 1rem; max-width: 34ch; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 1.5rem; font-size: 0.85rem; }