/* ==========================================================================
   PÁGINAS DE CONTEÚDO (institucional) — padrão "central de ajuda" com
   identidade Baly: hero escuro + lata · sidebar de navegação · conteúdo em
   acordeões (dropdowns). Reusa tokens.css. Estilo inspirado em help centers
   (Kabum), mas amarelo/preto/branco + Montserrat.
   ========================================================================== */

/* ---------- LAYOUT (sidebar + conteúdo) ---------- */
.ph-wrap { background: var(--cinza-50); padding: var(--sp-6) 0 var(--sp-9); }
.ph-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 900px) { .ph-layout { grid-template-columns: 268px 1fr; gap: var(--sp-6); align-items: start; } }

/* ---------- SIDEBAR (só no desktop; no mobile some) ---------- */
.ph-side { display: none; }
@media (min-width: 900px) { .ph-side { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: 88px; } }

.ph-nav { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); overflow: hidden; }
.ph-nav__head {
  background: var(--marca-primaria); color: var(--marca-sobre-primaria);
  font-weight: var(--peso-heavy); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .02em;
  padding: var(--sp-3) var(--sp-4);
}
.ph-nav__link {
  display: block; padding: 11px var(--sp-4); font-size: var(--fs-sm); color: var(--cor-texto-suave);
  border-top: 1px solid var(--cor-borda); border-left: 3px solid transparent;
  transition: color var(--t-rapida), background var(--t-rapida), border-color var(--t-rapida);
}
.ph-nav__link:hover { color: var(--marca-secundaria); background: var(--cinza-50); }
.ph-nav__link.ativo { color: var(--marca-secundaria); font-weight: var(--peso-bold); background: var(--cinza-50); border-left-color: var(--marca-primaria); }

/* Outras páginas de ajuda */
.ph-related { display: flex; flex-direction: column; gap: var(--sp-2); }
.ph-related__titulo {
  font-size: var(--fs-xs); font-weight: var(--peso-heavy); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cor-texto-suave); margin: var(--sp-2) 0 2px 2px;
}
.ph-related__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: var(--peso-bold); color: var(--cor-texto);
  transition: border-color var(--t-rapida), transform var(--t-rapida);
}
.ph-related__item::after { content: "›"; color: var(--cor-texto-suave); font-size: 1.15em; line-height: 1; }
.ph-related__item:hover { border-color: var(--marca-secundaria); }
.ph-related__item:hover::after { color: var(--marca-secundaria); }

/* ---------- ACORDEÕES (conteúdo) ---------- */
.ph-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

.ph-acc {
  background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); overflow: hidden;
  scroll-margin-top: 88px;
}
.ph-acc__sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); font-weight: var(--peso-heavy); font-size: var(--fs-md); color: var(--marca-secundaria);
}
.ph-acc__sum::-webkit-details-marker { display: none; }
.ph-acc__sum::after {
  content: ""; flex: none; width: 15px; height: 15px; transition: transform var(--t-rapida);
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.ph-acc[open] .ph-acc__sum::after { transform: rotate(180deg); }
.ph-acc.ph-acc--closing .ph-acc__sum::after { transform: rotate(0deg); }
.ph-acc__sum:hover { background: var(--cinza-50); }
.ph-acc__body { padding: 0 var(--sp-5) var(--sp-5); }

/* ---------- PROSE (texto dentro dos acordeões) ---------- */
.prose { color: var(--cor-texto); font-size: var(--fs-base); line-height: 1.68; }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--sp-4); }
.prose > *:last-child { margin-bottom: 0; }
.prose h3 { font-size: var(--fs-md); font-weight: var(--peso-bold); margin: var(--sp-5) 0 var(--sp-2); }
.prose a { color: var(--marca-secundaria); font-weight: var(--peso-bold); text-decoration: underline; text-decoration-color: var(--cinza-400); text-underline-offset: 2px; }
.prose a:hover { text-decoration-color: var(--marca-secundaria); }
.prose strong { font-weight: var(--peso-bold); }
/* reativa marcadores (o reset global do mockup zera list-style) */
.prose ul { list-style: disc; margin: 0 0 var(--sp-4); padding-left: 1.35em; }
.prose ol { list-style: decimal; margin: 0 0 var(--sp-4); padding-left: 1.35em; }
.prose li { margin-bottom: var(--sp-2); padding-left: .25em; }
.prose ul li::marker { color: var(--marca-primaria); font-size: 1.05em; }
.prose ol li::marker { color: var(--cor-texto-suave); font-weight: var(--peso-bold); }

/* Tabela (com scroll horizontal em telas estreitas) */
.prose__tabela { overflow-x: auto; margin: 0 0 var(--sp-4); }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); border: 1px solid var(--cor-borda); border-radius: var(--raio); overflow: hidden; min-width: 420px; }
.prose th, .prose td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--cor-borda); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose thead th { background: var(--cinza-50); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--cor-texto-suave); }

/* ---------- CALLOUT ---------- */
.callout { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: #fff; margin: 0 0 var(--sp-4); }
.callout--amarelo { background: color-mix(in srgb, var(--marca-primaria) 14%, transparent); border-color: color-mix(in srgb, var(--marca-primaria-escura) 38%, transparent); }
.callout__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--marca-primaria); color: var(--marca-sobre-primaria); }
.callout__ico svg { width: 22px; height: 22px; }
.callout p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- CTA de contato (fim da coluna de conteúdo) ---------- */
.ajuda-cta { margin-top: var(--sp-3); padding: var(--sp-6); border-radius: var(--raio); background: radial-gradient(120% 160% at 0% 0%, #1c1c1c, #0a0a0a); color: #fff; }
.ajuda-cta h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: var(--peso-heavy); text-transform: uppercase; line-height: 1.08; margin: 0 0 var(--sp-2); }
.ajuda-cta p { color: rgba(255, 255, 255, .72); margin: 0 0 var(--sp-5); font-size: var(--fs-sm); }
.ajuda-cta__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 560px) { .ajuda-cta__row { grid-template-columns: 1fr 1fr; } }
.contato-card { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4); border-radius: var(--raio); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); text-decoration: none; transition: background var(--t-rapida); }
.contato-card:hover { background: rgba(255, 255, 255, .10); }
.contato-card__ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--raio-sm); background: var(--marca-primaria); color: var(--marca-sobre-primaria); }
.contato-card__ico svg { width: 22px; height: 22px; }
.contato-card__txt strong { display: block; color: #fff; font-size: var(--fs-base); }
.contato-card__txt span { display: block; color: rgba(255, 255, 255, .70); font-size: var(--fs-sm); }

/* ---------- Institucional (Quem Somos e afins) ----------
   O template nasceu como "central de ajuda": texto corrido + acordeão. Página
   institucional tem duas peças que o .prose não cobre — a régua de números e a
   grade de categorias. Ambas hairline sobre branco, sem bloco de cor: a régua
   já é o destaque, e a marca aparece só no numeral. */
.ph-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
  margin: 0 0 var(--sp-5); padding: var(--sp-5);
  border: 1px solid var(--cor-borda); border-radius: var(--raio); background: #fff;
}
@media (min-width: 720px) { .ph-stats { grid-template-columns: repeat(4, 1fr); } }
.ph-stats__n {
  display: block; line-height: 1;
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--peso-heavy);
  color: var(--marca-primaria);
}
.ph-stats__l {
  display: block; margin-top: var(--sp-2);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--cor-texto-suave);
}

.ph-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
@media (min-width: 640px) { .ph-cards { grid-template-columns: 1fr 1fr; } }
.ph-cards__item {
  padding: var(--sp-4);
  border: 1px solid var(--cor-borda); border-radius: var(--raio); background: #fff;
}
.ph-cards__item b { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.ph-cards__item p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--cor-texto-suave); }

/* ---------- Mapa (o iframe entra ao rolar até a seção, ver conteudo.js) ----------
   O .ph-mapa__ph é só o estado ANTES de carregar: reserva a mesma altura do
   iframe para a troca não empurrar o conteúdo abaixo (evita CLS). */
.ph-mapa {
  margin: 0 0 var(--sp-3);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  overflow: hidden; background: #fff;
}
.ph-mapa__ph {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  width: 100%; padding: var(--sp-5);
  aspect-ratio: 4 / 3;                 /* mesma caixa do iframe → sem pulo no layout */
  background: var(--cinza-50);
  color: var(--cor-texto-suave);
}
@media (min-width: 720px) { .ph-mapa__ph { aspect-ratio: 16 / 7; } }
.ph-mapa__pin {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--marca-primaria); color: var(--marca-sobre-primaria);
}
.ph-mapa__pin svg { width: 22px; height: 22px; }
.ph-mapa__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-mapa__txt b { font-size: var(--fs-sm); }
.ph-mapa__txt span { font-size: var(--fs-xs); color: var(--cor-texto-suave); }
/* já carregado: o iframe substitui o botão e ocupa a mesma moldura */
.ph-mapa iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }
@media (min-width: 720px) { .ph-mapa iframe { aspect-ratio: 16 / 7; } }

/* .prose só estilizava h3 — institucional usa h2 como divisor de seção. */
.prose h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: var(--peso-heavy);
  line-height: 1.15; margin: var(--sp-6) 0 var(--sp-3);
}
.prose > h2:first-child { margin-top: 0; }


/* ---------- Fale Conosco: formulário ----------
   CARTÃO, não conteúdo de fluxo. Antes o formulário era o único elemento
   interativo de uma página de texto corrido e não tinha moldura nenhuma —
   flutuava. A página já usa cartão branco com hairline em tudo (.ph-acc,
   .ph-related__item); o formulário passa a falar a mesma língua e para de
   parecer solto.

   Sem asterisco e sem legenda de "campos obrigatórios": marcamos o que é
   OPCIONAL, então obrigatório fica implícito. Um marcador só, um trabalho só —
   e a legenda deixa de ser necessária em vez de ser apenas apagada. */
.contato-form {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.contato-form__linha { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 560px) { .contato-form__linha { grid-template-columns: 1fr 1fr; } }

.contato-form__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contato-form__campo > span {
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--cor-texto-suave);
}
/* "(opcional)" em peso normal: é ressalva sobre o rótulo, não parte do nome do campo */
.contato-form__campo i {
  font-style: normal; font-weight: var(--peso-regular);
  text-transform: none; letter-spacing: 0;
}
.contato-form__campo input,
.contato-form__campo textarea {
  width: 100%; min-width: 0;
  font: inherit; font-size: var(--fs-sm); color: var(--marca-secundaria);
  background: var(--cinza-50);          /* campo afundado no cartão branco: a borda sozinha
                                           não bastava pra ler "aqui se digita" */
  border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
  padding: .7rem .85rem;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.contato-form__campo textarea { resize: vertical; line-height: 1.55; min-height: 130px; }
.contato-form__campo input:focus,
.contato-form__campo textarea:focus {
  outline: 2px solid var(--marca-primaria); outline-offset: 1px;
  border-color: var(--marca-primaria);
  background: #fff;                     /* o campo "acende" ao receber foco */
}

/* Armadilha anti-robô: fora da tela, mas SEM `display:none` — alguns robôs
   detectam o none e pulam o campo, que é justamente o que não queremos. */
.contato-form__pote { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rodapé do cartão: a hairline fecha o bloco. É o que faz o formulário parecer
   terminado em vez de simplesmente parar. */
.contato-form__acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--sp-4);
}
.contato-form__enviar {
  flex: none;
  background: var(--marca-primaria); color: var(--marca-sobre-primaria);
  font: inherit; font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .06em;
  border: 0; border-radius: var(--raio); padding: .95rem 1.7rem;
  cursor: pointer;
  transition: background var(--t-rapida), opacity var(--t-rapida);
}
.contato-form__enviar:hover { background: var(--marca-primaria-escura); }
.contato-form__enviar:focus-visible { outline: 2px solid var(--marca-secundaria); outline-offset: 2px; }
.contato-form__enviar:disabled { opacity: .55; cursor: default; }

/* `.prose p` daria margem de parágrafo à mensagem e desalinharia a linha */
.contato-form__msg { margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
.contato-form__msg.is-ok   { color: var(--marca-primaria); font-weight: var(--peso-bold); }
.contato-form__msg.is-erro { color: #B3261E; }