/* =============================================================
   PSICOPEDAGOGIA
   Estilos exclusivos da aba. Tudo o que já existia foi reaproveitado
   (.cartao, .grade, .qa, .cta-bairro, .tabela-escolas): página nova
   com CSS novo é como o sistema visual de um site começa a divergir.
   ============================================================= */

/* ---------- os quatro pilares da dobra ---------- */
.pilares {
  list-style: none; padding: 0; margin: var(--e6) 0 0;
  display: grid; gap: var(--e4);
}
@media (min-width: 560px) { .pilares { grid-template-columns: 1fr 1fr; gap: var(--e4) var(--e5); } }
.pilares li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--e3);
  align-items: start;
}
.pilares svg { width: 26px; height: 26px; color: var(--azul); margin-top: 1px; }
.pilares span { font-size: .9375rem; line-height: 1.45; color: var(--cinza); }
/* O rótulo em bloco próprio: em linha, ele e a explicação viravam uma
   frase só e o olho perdia os quatro pilares na varredura. */
.pilares b { display: block; color: var(--tinta); font-size: 1rem; margin-bottom: 2px; }

/* ---------- o cartão dos sinais ----------
   ESTE É O ÚNICO LUGAR DA INTERFACE ONDE O VERMELHO É LEGÍTIMO.
   Não é enfeite: é literalmente uma lista de sinais de alerta, o
   sentido para o qual a cor está reservada.

   Em moldura, e não em fundo. Bloco inteiro vermelho, com dez linhas
   de texto, vira aviso de perigo, e o assunto já é delicado o
   bastante para a família que está lendo. */
.sinais {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-top: 5px solid var(--vermelho);
  border-radius: var(--raio);
  padding: var(--e6);
  box-shadow: 0 10px 34px rgba(22, 24, 29, .07);
}
.sinais__topo { margin-bottom: var(--e5); }
.sinais__topo h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); margin-bottom: var(--e2); }
.sinais__topo p { margin: 0; font-size: .9375rem; color: var(--cinza); max-width: none; }

.sinais ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.sinais li {
  position: relative; padding: 9px 0 9px 30px;
  font-size: .9375rem; line-height: 1.45;
  border-bottom: 1px solid var(--borda);
}
.sinais li:last-child { border-bottom: 0; }
/* Marcador desenhado no CSS, e não dez SVG repetidos: menos peso e
   um só lugar para mudar a cor. */
.sinais li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 3px solid var(--vermelho);
}
.sinais__pe { margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--borda); }

@media (min-width: 900px) {
  /* A dobra da psicopedagogia inverte a proporção da inicial: aqui a
     coluna da direita é uma lista de reconhecimento, não um
     formulário, e pede menos largura. */
  .psico-hero .hero__grid { grid-template-columns: 1.1fr .9fr; }
}

/* ---------- cartões de serviço ---------- */
.cartoes-psico .cartao {
  display: grid; gap: var(--e4); align-content: start;
  padding: var(--e6) var(--e5);
  border-radius: 16px;
  transition: border-color var(--transicao), box-shadow var(--transicao),
              transform var(--transicao);
}
.cartoes-psico .cartao:hover {
  border-color: var(--azul);
  box-shadow: 0 12px 32px rgba(20, 53, 127, .10);
  transform: translateY(-2px);
}
.cartao__icone {
  width: 24px; height: 24px;
  box-sizing: content-box; padding: 12px;
  color: var(--azul);
  background: #EDF1FA;
  border-radius: 13px;
}
.cartoes-psico h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.cartoes-psico p { margin: 0; }

/* ---------- tabela comparativa ---------- */
.tabela-comparativa th[scope="row"] {
  background: var(--creme);
  font-weight: 700; font-size: .875rem;
  width: 30%; min-width: 150px;
}
.tabela-comparativa thead th { font-size: .8125rem; }
/* A coluna da psicopedagogia é a da página: recebe a marca sutil que
   diz "é sobre isto que estamos falando", sem gritar. */
.tabela-comparativa thead th:last-child,
.tabela-comparativa td:last-child { background: #F7F9FE; }
.tabela-comparativa thead th:last-child { color: var(--azul); }
.tabela-comparativa td { font-size: .9375rem; }

/* ---------- o veredito, depois da tabela ---------- */
.veredito {
  margin-top: var(--e7);
  padding: var(--e6);
  background: var(--creme);
  border-left: 5px solid var(--azul);
  border-radius: var(--raio);
}
.veredito p { max-width: none; }
.veredito p:last-of-type { margin-bottom: var(--e5); }
.veredito .secao__acoes { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ---------- a transição, em quatro passos ----------
   Sobre a seção escura, então tudo aqui já nasce claro. */
.transicao {
  list-style: none; counter-reset: t; padding: 0; margin: var(--e7) 0 0;
  display: grid; gap: var(--e5);
}
@media (min-width: 760px) { .transicao { grid-template-columns: 1fr 1fr; gap: var(--e6); } }
.transicao li {
  counter-increment: t;
  display: grid; grid-template-columns: 38px 1fr; gap: var(--e4);
  align-items: start;
}
.transicao li::before {
  grid-column: 1; grid-row: 1;
  content: counter(t);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verde); color: var(--branco);
  font-weight: 700; font-size: 1rem;
}
/* O TITULO E O PARAGRAFO PRECISAM DA COLUNA 2, DECLARADA.
   O item tem tres filhos: o ::before com o numero, o h3 e o p. A
   colocacao automatica poe o numero na coluna 1, o h3 na coluna 2 e
   o PARAGRAFO DE VOLTA NA COLUNA 1 da linha seguinte, que tem 38px.
   Era por isso que o texto saia uma palavra por linha. Mesmo defeito
   que ja aconteceu na lista dos dez motivos. */
.transicao h3,
.transicao p { grid-column: 2; }
.transicao h3 { grid-row: 1; margin: 0 0 var(--e2); font-size: 1.0625rem; color: var(--branco); }
.transicao p { grid-row: 2; margin: 0; font-size: .9375rem; color: rgba(255, 255, 255, .82); max-width: none; }
.transicao__nota {
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .9375rem; max-width: none;
}

/* ---------- as cinco etapas do processo ---------- */
.etapas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e5); }
.etapas li {
  display: grid; grid-template-columns: 46px 1fr; gap: var(--e5);
  align-items: start;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: var(--e5);
}
.etapas__num {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: var(--branco);
  font-weight: 700; font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.etapas h3 { margin: 0 0 var(--e2); font-size: 1.0625rem; }
.etapas p { margin: 0; color: var(--cinza); font-size: .9375rem; max-width: none; }
.etapas + .cta-bairro { margin-top: var(--e7); }


/* -------------------------------------------------------------
   NO CELULAR, OS SINAIS SOBEM
   -------------------------------------------------------------
   Na ordem do HTML o cartão caía a 1235px: os quatro pilares e o
   botão passavam na frente. É a mesma correção da página inicial,
   pela mesma razão: quem chega a esta página já reconheceu alguma
   coisa em casa, e a lista de sinais é o que confirma a suspeita.
   Fazê-la esperar quatro rolagens é perder exatamente quem converte.
   ------------------------------------------------------------- */
@media (max-width: 899px) {
  .psico-hero .hero__grid { display: flex; flex-direction: column; gap: var(--e6); }
  .psico-hero .hero__texto { display: contents; }
  .psico-hero .hero__topo      { order: 1; }
  .psico-hero .sinais          { order: 2; }
  .psico-hero .hero__argumento { order: 3; }
}