/* Componentes. Os dois primeiros — a agenda e o cartão de conversa — são
 * portes diretos de tools/pecas.py, que é onde eles foram desenhados e
 * aprovados. Mantê-los idênticos importa: são os mesmos elementos que aparecem
 * no carrossel, nos anúncios e na grade, e a página só soa como a marca se
 * eles forem os mesmos objetos, não uma imitação.
 */

/* ======================================================================
   Botões
   ====================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--raio-full);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  transition: background var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease),
              transform var(--dur-rapida) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* O CTA. Coral com texto navy: 6.23:1, medido em palette.py. Este é o único
   lugar da página onde o coral aparece como área. */
.btn-cta {
  background: var(--cta);
  color: var(--cta-texto);
  box-shadow: var(--sombra-cta);
}
.btn-cta:hover { background: #FF8E71; }

.btn-solido {
  background: var(--acao);
  color: var(--acao-texto);
}
.btn-solido:hover { background: var(--acao-hover); }

.btn-linha {
  border: 1.5px solid var(--linha);
  color: var(--texto-forte);
}
.btn-linha:hover { border-color: var(--acao); color: var(--acao); }

.sobre-escuro .btn-linha {
  border-color: var(--linha-escura);
  color: var(--sobre-escuro);
}
.sobre-escuro .btn-linha:hover {
  border-color: var(--sobre-escuro-apoio);
  color: var(--sobre-escuro-apoio);
}

/* ======================================================================
   Agenda — porte de pecas.py:agenda()
   ====================================================================== */
.agenda {
  background: var(--superficie);
  border-radius: var(--raio-xl);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--sombra-3);
}
.agenda-dia {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-apoio);
  margin-bottom: 6px;
}
.slot {
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: var(--raio-md);
  padding: 15px 20px;
  border: 2px solid transparent;
}
.slot-hora {
  font-weight: 600;
  font-size: 17px;
  min-width: 66px;
}
/* Sem opacity. Em pecas.py o mesmo rotulo tem 26px e conta como texto grande,
   onde 3:1 basta; aqui tem 15px e precisa de 4.5:1. Opacidade de 78% derrubava
   o indigo-600 sobre indigo-50 para 3.35:1 -- o axe pegou. A hierarquia entre
   hora e estado vem do peso e do tamanho, nao de transparencia. */
.slot-estado { font-size: 15px; }

/* Os quatro estados. A ordem em que o coral aparece é decisão de marca: ele
   acende onde o PRODUTO age (o encaixe). O horário que abriu buraco fica
   neutro — se problema e solução tivessem a mesma cor, não diriam nada. */
.slot-livre,
.slot-vago {
  border-color: var(--linha-suave);
  border-style: dashed;
  color: var(--texto-apoio);
}
.slot-ocupado {
  background: var(--superficie-chip);
  color: var(--indigo-800);   /* 9.42:1 sobre indigo-50 */
}
.slot-novo {
  background: var(--cta);
  color: var(--cta-texto);
}

/* A entrada. Cada linha troca de estado com atraso escalonado — é o mecanismo
   do carrossel, agora nativo. Uma vez só, ao entrar na tela: em loop viraria
   distração, e a §5.4 pede um elemento dominante, não um que pisca. */
.agenda-anima .slot {
  opacity: 0;
  transform: translateY(6px);
}
.agenda-anima.is-visible .slot {
  animation: slot-entra var(--dur) var(--ease) forwards;
}
.agenda-anima.is-visible .slot:nth-child(2) { animation-delay: 120ms; }
.agenda-anima.is-visible .slot:nth-child(3) { animation-delay: 420ms; }
.agenda-anima.is-visible .slot:nth-child(4) { animation-delay: 720ms; }
.agenda-anima.is-visible .slot:nth-child(5) { animation-delay: 1020ms; }

@keyframes slot-entra {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-anima .slot { opacity: 1; transform: none; }
}

/* ======================================================================
   Conversa — porte de pecas.py:cartao_conversa()
   ====================================================================== */
.conversa {
  background: var(--superficie);
  border-radius: var(--raio-xl);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--sombra-3);
}
.conversa-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linha-suave);
}
.conversa-quem { font-weight: 600; font-size: 15px; color: var(--texto-forte); }
.conversa-quando { font-size: 13px; color: var(--texto-apoio); }

.balao {
  max-width: 84%;
  border-radius: 20px 20px 20px 6px;
  padding: 14px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--linha-suave);
  color: var(--texto);
  align-self: flex-start;
}
.balao time { font-size: 12px; color: var(--texto-apoio); align-self: flex-end; }

/* Saída em INDIGO, nunca verde. A §8 proíbe qualquer coisa que sugira endosso
   da Meta, e balão verde lê como WhatsApp. */
.balao-saida {
  background: var(--acao);
  color: var(--acao-texto);
  align-self: flex-end;
  border-radius: 20px 20px 6px 20px;
}
.balao-saida time { color: rgba(255, 255, 255, 0.62); }
.balao p { font-size: 15.5px; line-height: 1.4; }

/* ======================================================================
   Cartões
   ====================================================================== */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cartao h3 { color: var(--texto-forte); }
.cartao p { color: var(--texto-apoio); font-size: 15.5px; }

.cartao-marca {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cta-em-claro);
}

/* A régua de fechamento das peças. Curta, coral, sob o título. */
.regua {
  width: 72px;
  height: 5px;
  border-radius: 3px;
  background: var(--cta);
}

.pilar-icone {
  width: 52px;
  height: 52px;
  border-radius: var(--raio-md);
  background: var(--superficie-chip);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.pilar-icone svg { width: 26px; height: 26px; color: var(--acao); }

/* ======================================================================
   Selo de parceiro
   ====================================================================== */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--raio-full);
  border: 1px solid var(--linha-escura);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sobre-escuro-apoio);
}
.selo svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ======================================================================
   FAQ
   ====================================================================== */
.faq { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--texto-forte);
  list-style: none;
}
.faq-trigger::-webkit-details-marker { display: none; }
.faq-icone {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--acao);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] .faq-icone { transform: rotate(45deg); }
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur) var(--ease);
}
.faq-panel-inner {
  padding-bottom: 22px;
  color: var(--texto-apoio);
  font-size: 16px;
  max-width: 68ch;
}

/* ======================================================================
   Formulário
   ====================================================================== */
.form { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo-rotulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sobre-escuro-apoio);
}
.campo-input {
  padding: 15px 18px;
  border-radius: var(--raio-sm);
  border: 1.5px solid var(--linha-escura);
  background: rgba(255, 255, 255, 0.05);
  color: var(--sobre-escuro);
  transition: border-color var(--dur-rapida) var(--ease);
}
.campo-input::placeholder { color: rgba(164, 158, 240, 0.55); }
.campo-input:focus {
  outline: none;
  border-color: var(--sobre-escuro-apoio);
}
.campo-erro {
  font-size: 13px;
  color: #FFB4A0;   /* coral clareado: sobre navy o coral-500 dá 3.9:1 */
}
.form .btn-cta { justify-content: center; margin-top: 6px; }
.form-nota { font-size: 13px; color: var(--sobre-escuro-apoio); }

/* ======================================================================
   Parede de logos
   ====================================================================== */
/* Quatro colunas fixas, nao auto-fit: com auto-fit os oito logos caiam em
   6 + 2 e a ultima fileira ficava orfa. Duas fileiras de quatro leem como
   conjunto. */
.parede {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 36px;
  align-items: center;
  margin-top: 44px;
}
@media (min-width: 620px) { .parede { grid-template-columns: repeat(4, 1fr); } }

.parede img {
  width: 100%;
  max-width: 132px;
  height: auto;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity var(--dur-rapida) var(--ease),
              filter var(--dur-rapida) var(--ease);
}
.parede img:hover { opacity: 1; filter: none; }

/* ======================================================================
   Entrada por scroll
   ====================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-lenta) var(--ease),
              transform var(--dur-lenta) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}