/* Pharmax: folha de estilo da página de vendas.

   Escala, ritmo de seção e mecânica copiados das landings da casa
   (C:\Apps\JotaERP-Landing\assets\css\landing.css é a referência): medida de
   1120px, seção de 80px, cabeça de seção centralizada com subtítulo estreito,
   raio de 8/12/16, elevação de 2px na passagem do ponteiro. A COR é toda
   Pharmax: nenhuma paleta de framework entra aqui, e verde do Tailwind é
   proibido no ecossistema.

   Tokens abaixo são a única fonte de cor: hex solto no corpo do arquivo é
   dívida, não estilo. Os valores de marca saem de
   api\PharmaxApi\wwwroot\assets\identidade.css, que é gerada do código do
   Windows. Nenhuma cor foi escolhida nesta folha. */

:root {
  /* Marca, espelhando identidade.css */
  --ph-verde: #0B7A43;         /* --pmx-verde */
  --ph-verde-claro: #3DBE7A;   /* --pmx-verde-claro */
  --ph-verde-tint: #E6F4EC;    /* --pmx-verde-tint: selo, chip e realce suave */
  --ph-grafite: #1C2B26;       /* --pmx-grafite */
  --ph-cinza: #C9D2CE;         /* --pmx-cinza: filete, borda de caixa e separador */

  /* Derivados de uso. O verde escurecido desenha passagem do ponteiro, título
     de cartão e o fundo da seção de contato. */
  --ph-verde-escuro: #06542E;
  --ph-tinta: var(--ph-grafite);
  --ph-tinta-fraca: #4A5A54;
  --ph-papel: #FFFFFF;
  --ph-papel-suave: #F4F7F5;

  /* Limite de campo de formulário. #6E7C77 dá 4,36:1 sobre branco e cumpre o
     mínimo de 3:1 da WCAG 1.4.11 para limite de componente. O cinza da
     identidade dá 1,55:1 e reprovaria: a borda é a ÚNICA informação visual que
     separa o campo do fundo branco do próprio formulário. */
  --ph-limite-campo: #6E7C77;

  --ph-raio: 8px;
  --ph-raio-medio: 12px;
  --ph-raio-grande: 16px;
  --ph-medida: 1120px;
  --ph-alvo: 44px;

  --ph-fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ph-sombra: 0 1px 3px rgba(28, 43, 38, 0.08);
  --ph-sombra-alta: 0 10px 40px rgba(28, 43, 38, 0.09);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* O cabeçalho é grudado: sem isto a âncora encosta o título embaixo dele.
     scroll-padding-top no container de rolagem, e não scroll-margin-top em
     cada section[id], para valer também em âncora nova sem reenumerar
     seletor. Valores medidos: o cabeçalho fecha em 65px no telefone (uma
     linha só) e em 64px na tela grande, e o resto é respiro. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--ph-fonte);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ph-tinta);
  background: var(--ph-papel);
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--ph-verde); }

h1, h2, h3 { margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.05rem); line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.18; }
h3 { font-size: clamp(1.06rem, 2vw, 1.2rem); line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.ph-medida { width: 100%; max-width: var(--ph-medida); margin-inline: auto; padding-inline: 20px; }

.ph-pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--ph-verde); color: #FFFFFF;
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--ph-raio) 0;
  font-weight: 700; text-decoration: none;
}
.ph-pular:focus { left: 0; }

/* Anel de foco no verde da marca: 5,41:1 sobre branco. O verde claro dá
   2,37:1 e seria o ÚNICO indicador nos links, nas perguntas e no botão de
   enviar, que não têm segundo sinal de foco. */
:focus-visible { outline: 3px solid var(--ph-verde); outline-offset: 2px; }

/* Cabeçalho ------------------------------------------------------------- */

.ph-topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ph-cinza);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}
.ph-topo--rolado { background: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 8px rgba(28, 43, 38, 0.07); }
.ph-topo__linha { display: flex; align-items: center; gap: 12px; min-height: 64px; }
/* flex-shrink: 0 na marca. Sem isto, no telefone o botão do cabeçalho comprime
   o <img> da logomarca: com preserveAspectRatio o desenho encolhe dentro da
   caixa apertada e a marca sai a 55% do tamanho pedido, dentro de uma moldura
   com folga em cima e embaixo. Medido em 390px: 84px de largura para uma
   logomarca de 152px. */
.ph-marca { display: inline-flex; align-items: center; min-height: var(--ph-alvo); margin-right: auto; flex-shrink: 0; }
.ph-marca img { height: 32px; width: auto; }

/* Rótulo do botão do cabeçalho: curto no telefone, inteiro na tela grande.
   O elemento é o MESMO nos dois casos, então o alvo de toque que o portão
   mede em .ph-topo__acao continua existindo em toda largura. */
.ph-topo__acao .ph-so-tela { display: none; }
@media (min-width: 700px) {
  .ph-topo__acao .ph-so-tela { display: inline; }
  .ph-topo__acao .ph-so-telefone { display: none; }
}
/* .ph-topo__linha .ph-topo__acao, e não só .ph-topo__acao: o botão também casa
   com .ph-botao, que tem a MESMA especificidade e é declarada depois neste
   arquivo. Com uma classe só, o padding de 22px do botão continuava valendo e
   a linha do cabeçalho estourava a tela. */
@media (max-width: 699px) {
  .ph-topo__linha { gap: 10px; }
  .ph-marca img { height: 26px; }
  .ph-topo__linha .ph-topo__acao { padding: 10px 14px; font-size: 0.9rem; }
}

/* Faixa apertada. Medido em 360x640, onde a barra de rolagem come 15px e
   sobram 345: com os valores da faixa acima a linha do cabeçalho somava 364 e
   a chave do menu saía 19px para fora, criando rolagem horizontal. Aqui a
   soma dá 326. */
@media (max-width: 400px) {
  .ph-medida { padding-inline: 16px; }
  .ph-topo__linha { gap: 8px; }
  .ph-marca img { height: 24px; }
  .ph-topo__linha .ph-topo__acao { padding: 10px 12px; font-size: 0.86rem; }
}

.ph-topo__nav { display: none; gap: 2px; align-items: center; }
.ph-topo__nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ph-alvo); padding: 0 11px; border-radius: var(--ph-raio);
  color: var(--ph-tinta); text-decoration: none; font-size: 0.94rem; font-weight: 600;
}
.ph-topo__nav a:hover { background: var(--ph-verde-tint); color: var(--ph-verde-escuro); }
.ph-topo__entrar {
  display: none; align-items: center; justify-content: center;
  min-height: var(--ph-alvo); padding: 0 12px; border-radius: var(--ph-raio);
  color: var(--ph-tinta-fraca); text-decoration: none; font-size: 0.94rem; font-weight: 600;
}
.ph-topo__entrar:hover { color: var(--ph-verde-escuro); }
.ph-topo__acao { flex-shrink: 0; }

/* Chave do menu no telefone: some a partir de 980px, onde a nav aparece. */
.ph-chave {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: var(--ph-alvo); height: var(--ph-alvo); flex-shrink: 0;
  padding: 0 9px; border: 1px solid var(--ph-cinza); border-radius: var(--ph-raio);
  background: var(--ph-papel); cursor: pointer;
}
.ph-chave span { display: block; height: 2px; border-radius: 2px; background: var(--ph-grafite); transition: transform 0.18s ease, opacity 0.18s ease; }
.ph-chave[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ph-chave[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ph-chave[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ph-gaveta { display: none; border-top: 1px solid var(--ph-cinza); background: var(--ph-papel); }
.ph-gaveta.aberta { display: block; }
.ph-gaveta a {
  display: flex; align-items: center; min-height: var(--ph-alvo);
  padding: 6px 20px; color: var(--ph-tinta); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--ph-papel-suave);
}
.ph-gaveta a:last-child { border-bottom: 0; }
.ph-gaveta a:hover { background: var(--ph-verde-tint); color: var(--ph-verde-escuro); }

/* Botões ---------------------------------------------------------------- */

.ph-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ph-alvo); min-width: var(--ph-alvo);
  padding: 12px 22px;
  border: 2px solid transparent; border-radius: var(--ph-raio-medio);
  font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.ph-botao:hover { transform: translateY(-2px); }
.ph-botao--cheio { background: var(--ph-verde); color: #FFFFFF; }
.ph-botao--cheio:hover { background: var(--ph-verde-escuro); box-shadow: 0 10px 24px -12px rgba(11, 122, 67, 0.7); }
.ph-botao--vazado { background: transparent; color: var(--ph-verde-escuro); border-color: var(--ph-verde); }
.ph-botao--vazado:hover { background: var(--ph-verde-tint); }
.ph-botao[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.ph-seta { width: 17px; height: 17px; flex-shrink: 0; }

/* Aparecimento por rolagem ----------------------------------------------
   Só entra em vigor quando o roteiro roda: sem a classe .js-pronto no <html>
   nada fica invisível, então página sem JS continua legível. */

.js-pronto .ph-surge { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js-pronto .ph-surge.visivel { opacity: 1; transform: none; }
.js-pronto .ph-surge--2 { transition-delay: 0.1s; }
.js-pronto .ph-surge--3 { transition-delay: 0.2s; }

/* Capa ------------------------------------------------------------------ */

.ph-capa {
  background: linear-gradient(180deg, var(--ph-papel) 0%, var(--ph-papel-suave) 100%);
  border-bottom: 1px solid var(--ph-cinza);
  padding: 40px 0 48px;
}
.ph-capa__grade { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.ph-selo {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--ph-verde-tint); color: var(--ph-verde-escuro);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
.ph-selo svg { width: 15px; height: 15px; flex-shrink: 0; }
.ph-capa__texto p.ph-guia { font-size: 1.06rem; color: var(--ph-tinta-fraca); max-width: 54ch; }
.ph-capa__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 14px; }
.ph-capa__nota { font-size: 0.9rem; color: var(--ph-tinta-fraca); margin: 0; max-width: 52ch; }

/* Linha de módulos da capa, no molde da casa: nomes secos, separados por um
   filete, para o leitor saber o escopo antes de rolar. */
.ph-modulos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 20px 0 0; padding: 0; list-style: none;
  font-size: 0.9rem; font-weight: 700; color: var(--ph-tinta-fraca);
}
.ph-modulos li { display: flex; align-items: center; gap: 12px; }
.ph-modulos li:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ph-cinza); }

/* Bento, o mascote, ao lado da captura da capa. A pose apontando aponta para
   a DIREITA de quem olha, então o lugar dela é à esquerda do que ela indica.
   Só aparece de 980px para cima: no telefone a captura já ocupa a largura
   toda e o mascote viraria enfeite em cima do conteúdo.
   Ele se ancora no QUADRO da imagem, e não na figura inteira: ancorado na
   figura, os pés dele caíam em cima da legenda e escondiam a primeira linha
   do texto que diz que a captura é de demonstração. */
.ph-capa__arte { position: relative; }
.ph-captura__quadro { position: relative; }
.ph-bento-capa { display: none; }

/* Captura de tela --------------------------------------------------------
   A classe .ph-captura CONTINUA no elemento de propósito: o portão de
   qualidade mede ".ph-captura" em semCorte, e trocar a classe deixaria a
   regra apontando para nada, calada. */

/* Sem overflow: hidden no cartão: ele recortaria o mascote que se apoia na
   borda de baixo da imagem. O arredondamento vai na própria imagem, com 1px
   a menos que o raio do cartão, que é a espessura da borda. */
.ph-captura {
  display: block; margin: 0; padding: 0; text-align: left;
  border: 1px solid var(--ph-cinza); border-radius: var(--ph-raio-grande);
  background: var(--ph-papel); box-shadow: var(--ph-sombra-alta);
}
/* Por CLASSE, e não por ".ph-captura img": o mascote é um <img> dentro da
   mesma figura, e o seletor descendente tem especificidade maior que a classe
   dele, então ganharia a largura de 100% e a proporção 16 por 9 mesmo com a
   regra do mascote declarada depois. */
.ph-captura__foto {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: top center;
  border-bottom: 1px solid var(--ph-cinza);
  border-radius: 15px 15px 0 0;
}
.ph-captura__medida { padding: 12px 16px; margin: 0; font-size: 0.83rem; line-height: 1.5; color: var(--ph-tinta-fraca); }

/* Faixa de números ------------------------------------------------------- */

.ph-numeros { background: var(--ph-grafite); color: #FFFFFF; padding: 34px 0; }
.ph-numeros__grade { display: grid; grid-template-columns: 1fr; gap: 22px; }
.ph-numero__valor { display: block; font-size: clamp(1.55rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ph-verde-claro); }
.ph-numero__texto { margin: 0; color: var(--ph-cinza); font-size: 0.93rem; line-height: 1.5; }

/* Seções ----------------------------------------------------------------- */

.ph-secao { padding: 60px 0; }
.ph-secao--suave { background: var(--ph-papel-suave); border-block: 1px solid var(--ph-cinza); }
.ph-secao__cabeca { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.ph-secao__cabeca p { color: var(--ph-tinta-fraca); margin-bottom: 0; font-size: 1rem; }

.ph-grade { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ph-grade--dupla { grid-template-columns: 1fr; }

.ph-cartao {
  background: var(--ph-papel); border: 1px solid var(--ph-cinza);
  border-radius: var(--ph-raio-grande); padding: 24px;
  box-shadow: var(--ph-sombra);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ph-cartao:hover { transform: translateY(-2px); box-shadow: var(--ph-sombra-alta); }
.ph-cartao h3 { color: var(--ph-verde-escuro); }
.ph-cartao p:last-child, .ph-cartao ul:last-child { margin-bottom: 0; }

.ph-icone {
  width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: var(--ph-raio-medio);
  display: flex; align-items: center; justify-content: center;
  background: var(--ph-verde-tint); color: var(--ph-verde);
}
.ph-icone svg { width: 22px; height: 22px; }

.ph-lista { list-style: none; margin: 0; padding: 0; }
.ph-lista li { position: relative; padding-left: 24px; margin-bottom: 9px; }
.ph-lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 11px; height: 3px; background: var(--ph-verde); border-radius: 2px;
}
.ph-lista li:last-child { margin-bottom: 0; }

/* Etapas numeradas -------------------------------------------------------
   Quebra o ritmo do grid de cartões: o ciclo do convênio é uma ORDEM, e ler
   uma ordem numerada custa menos que ler seis caixas iguais. */

.ph-etapas { display: grid; grid-template-columns: 1fr; gap: 2px; border: 1px solid var(--ph-cinza); border-radius: var(--ph-raio-grande); overflow: hidden; background: var(--ph-cinza); }
.ph-etapa { display: flex; gap: 16px; padding: 20px 22px; background: var(--ph-papel); }
.ph-etapa__numero {
  flex-shrink: 0; font-size: 1.02rem; font-weight: 800; color: var(--ph-verde);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.ph-etapa h3 { margin-bottom: 4px; color: var(--ph-verde-escuro); }
.ph-etapa p { margin: 0; color: var(--ph-tinta-fraca); font-size: 0.95rem; }

/* Chips de contagem ------------------------------------------------------ */

.ph-contagens { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ph-contagem {
  border: 1px solid var(--ph-cinza); border-radius: var(--ph-raio-grande);
  background: var(--ph-papel); padding: 20px 22px;
}
.ph-contagem b { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ph-verde-escuro); line-height: 1.1; }
.ph-contagem span { display: block; margin-top: 6px; font-size: 0.93rem; color: var(--ph-tinta-fraca); }

/* Estado: no ar ou em construção ----------------------------------------- */

.ph-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: -22px 0 30px; font-size: 0.84rem; font-weight: 600; color: var(--ph-tinta-fraca); }
.ph-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.ph-ponto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--ph-cinza); }
.ph-ponto--noar { background: var(--ph-verde); }

.ph-estado {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  background: var(--ph-papel-suave); color: var(--ph-tinta-fraca);
}
.ph-estado .ph-ponto { width: 7px; height: 7px; }
.ph-estado--noar { background: var(--ph-verde-tint); color: var(--ph-verde-escuro); }

/* Passo a passo da implantação ------------------------------------------- */

.ph-passos { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ph-passo { background: var(--ph-papel); border: 1px solid var(--ph-cinza); border-radius: var(--ph-raio-grande); padding: 24px; }
.ph-passo__numero {
  width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ph-verde); color: #FFFFFF; font-weight: 800; font-size: 1.05rem;
}
.ph-passo h3 { margin-bottom: 6px; }
.ph-passo p { margin: 0; color: var(--ph-tinta-fraca); font-size: 0.95rem; }

/* Bento fechando o passo a passo, na pose de aprovação. É o uso escrito no
   LEIA-ME do mascote: "fim de um passo a passo de implantação". */
/* Faixa estreita e centralizada: na largura toda do contêiner ela ficava com
   um mascote de 72px numa banda de mil pixels e o resto vazio. */
.ph-bento-fecho {
  display: flex; align-items: center; gap: 18px;
  max-width: 620px; margin: 26px auto 0; padding: 16px 24px 16px 18px;
  border: 1px solid var(--ph-cinza); border-radius: var(--ph-raio-grande);
  background: var(--ph-verde-tint);
}
/* 88px: acima dos 64px em que o LEIA-ME do mascote registra que o rosto ainda
   se lê, e bem acima dos 48px que são o limite dele. */
.ph-bento-fecho img { width: 88px; height: 88px; flex-shrink: 0; }
.ph-bento-fecho p { margin: 0; font-size: 1rem; color: var(--ph-verde-escuro); font-weight: 600; line-height: 1.45; }

/* Planos ------------------------------------------------------------------ */

.ph-planos { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; max-width: 860px; margin-inline: auto; }
.ph-plano {
  border: 1px solid var(--ph-cinza); border-radius: var(--ph-raio-grande);
  background: var(--ph-papel); padding: 28px; box-shadow: var(--ph-sombra);
}
.ph-plano--destaque { border: 2px solid var(--ph-verde); box-shadow: var(--ph-sombra-alta); }
.ph-plano h3 { color: var(--ph-verde-escuro); }
.ph-plano__preco { font-size: clamp(1.8rem, 5vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ph-verde-escuro); margin-bottom: 0.6em; }
/* O corpo de preço é para NÚMERO. Uma frase nesse tamanho quebra em três
   linhas e desequilibra os dois cartões lado a lado. */
.ph-plano__preco--frase { font-size: 1.3rem; letter-spacing: -0.01em; }
.ph-plano__unidade { font-size: 0.92rem; font-weight: 600; color: var(--ph-tinta-fraca); letter-spacing: 0; }
.ph-plano .ph-botao { width: 100%; margin-top: 20px; }
.ph-plano__nota { max-width: 860px; margin: 20px auto 0; font-size: 0.88rem; color: var(--ph-tinta-fraca); text-align: center; }

/* Perguntas frequentes ---------------------------------------------------- */

.ph-faq { max-width: 760px; margin-inline: auto; }
.ph-faq details {
  border: 1px solid var(--ph-cinza); border-radius: var(--ph-raio-medio);
  background: var(--ph-papel); margin-bottom: 12px;
}
.ph-faq summary {
  cursor: pointer; list-style: none;
  padding: 13px 18px; min-height: var(--ph-alvo);
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; color: var(--ph-verde-escuro);
}
.ph-faq summary::-webkit-details-marker { display: none; }
.ph-faq summary::after {
  content: "+"; margin-left: auto; font-size: 1.4rem; font-weight: 700;
  color: var(--ph-verde); line-height: 1;
}
.ph-faq details[open] summary::after { content: "\2212"; }
.ph-faq__corpo { padding: 0 18px 16px; color: var(--ph-tinta-fraca); font-size: 0.96rem; }
.ph-faq__corpo p:last-child { margin-bottom: 0; }

/* Formulário -------------------------------------------------------------- */

.ph-contato { background: var(--ph-verde-escuro); color: #FFFFFF; border-block: 0; }
.ph-contato h2 { color: #FFFFFF; }
.ph-contato__grade { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.ph-contato__texto p { color: var(--ph-verde-tint); }
.ph-contato__texto .ph-lista li::before { background: var(--ph-verde-claro); }
.ph-contato__texto .ph-lista li { color: var(--ph-verde-tint); }
.ph-contato__titulo { margin: 26px 0 12px; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; }

.ph-forma {
  background: var(--ph-papel); color: var(--ph-tinta);
  border-radius: var(--ph-raio-grande); padding: 24px;
}
.ph-campo { margin-bottom: 15px; }
.ph-campo label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.94rem; }
.ph-campo input, .ph-campo select, .ph-campo textarea {
  width: 100%;
  /* 16px é o mínimo: abaixo disso o iOS dá zoom ao focar o campo. */
  font-size: 16px; font-family: inherit; line-height: 1.4;
  min-height: var(--ph-alvo);
  padding: 11px 14px;
  border: 1px solid var(--ph-limite-campo); border-radius: var(--ph-raio);
  background: var(--ph-papel); color: var(--ph-tinta);
}
.ph-campo input:focus, .ph-campo select:focus { border-color: var(--ph-verde); }
.ph-forma .ph-botao { width: 100%; }
/* A caixa de consentimento (17/09/2026): caixa e frase lado a lado, a caixa
   com alvo de toque inteiro e a frase no peso de texto corrido, não de rótulo. */
.ph-campo--caixa { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 18px; }
.ph-campo--caixa input { width: var(--ph-alvo); min-height: var(--ph-alvo); flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--ph-verde); }
.ph-campo--caixa label { font-weight: 400; font-size: 0.88rem; line-height: 1.5; color: var(--ph-tinta-fraca); margin: 0; padding-top: 2px; }
.ph-recado { margin: 14px 0 0; font-weight: 600; min-height: 1.2em; }
.ph-recado--erro { color: #A32218; }
.ph-recado--ok { color: var(--ph-verde-escuro); }
.ph-recado--aviso { color: var(--ph-tinta-fraca); font-weight: 600; }

/* Aviso de canal de atendimento ainda sem destino. Escrito no HTML e retirado
   pelo roteiro quando houver destino: quem lê sem JS lê o estado verdadeiro. */
.ph-sem-destino {
  margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--ph-cinza); border-left: 4px solid var(--ph-verde);
  border-radius: var(--ph-raio);
  background: var(--ph-papel-suave); color: var(--ph-tinta-fraca);
  font-size: 0.88rem; line-height: 1.5;
}

/* O ninho do robô: fora da tela, sem display none, para o robô preencher. */
.ph-ninho { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* Rodapé ------------------------------------------------------------------ */

.ph-rodape { background: var(--ph-grafite); color: var(--ph-cinza); padding: 38px 0 26px; font-size: 0.92rem; }
.ph-rodape a { color: var(--ph-verde-claro); text-decoration: none; }
.ph-rodape a:hover { text-decoration: underline; }
.ph-rodape h3 { font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 10px; }
.ph-rodape__grade { display: grid; grid-template-columns: 1fr; gap: 22px; }
.ph-rodape__marca img { height: 28px; width: auto; margin-bottom: 12px; }
.ph-rodape__marca p { max-width: 34ch; }
/* Alvo de toque dos links do rodapé: 44px nos dois eixos. Sem isto os seis
   links de lista medem 20px de altura no telefone. O recuo do marcador cai
   nesse contexto para a linha não ficar larga demais. */
.ph-rodape .ph-lista li { padding-left: 0; margin-bottom: 0; }
.ph-rodape .ph-lista li::before { display: none; }
/* min-width junto com min-height: a WCAG 2.5.5 mede os DOIS eixos, e "Planos"
   mede 43px de largura no seu próprio texto. */
.ph-rodape .ph-lista a { display: inline-flex; align-items: center; justify-content: flex-start; min-height: var(--ph-alvo); min-width: var(--ph-alvo); }
.ph-rodape__fim { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(201, 210, 206, 0.22); }
.ph-rodape__fim p { margin: 0; font-size: 0.86rem; }

/* Rascunho: tarja que não vai ao ar. Some assim que a D5 liberar. */
.ph-rascunho { background: var(--ph-grafite); color: #FFFFFF; padding: 10px 0; font-size: 0.85rem; text-align: center; }
.ph-rascunho strong { color: var(--ph-verde-claro); }

/* Telas maiores ----------------------------------------------------------- */

@media (min-width: 700px) {
  .ph-grade { grid-template-columns: repeat(2, 1fr); }
  .ph-grade--dupla { grid-template-columns: repeat(2, 1fr); }
  .ph-numeros__grade { grid-template-columns: repeat(2, 1fr); }
  .ph-contagens { grid-template-columns: repeat(3, 1fr); }
  .ph-passos { grid-template-columns: repeat(3, 1fr); }
  .ph-planos { grid-template-columns: repeat(2, 1fr); }
  .ph-rodape__grade { grid-template-columns: repeat(2, 1fr); }
  .ph-etapas { grid-template-columns: repeat(2, 1fr); }
  .ph-forma { padding: 28px; }
}

@media (min-width: 980px) {
  html { scroll-padding-top: 80px; }
  body { font-size: 18px; }
  .ph-capa { padding: 56px 0 66px; }
  .ph-capa__grade { grid-template-columns: 1fr 1fr; gap: 44px; }
  .ph-grade { grid-template-columns: repeat(3, 1fr); }
  /* Depois de .ph-grade de propósito: o elemento carrega as duas classes e
     entre regras de mesma especificidade quem manda é a ordem no arquivo. */
  .ph-grade--dupla { grid-template-columns: repeat(2, 1fr); }
  .ph-numeros__grade { grid-template-columns: repeat(4, 1fr); }
  .ph-etapas { grid-template-columns: repeat(3, 1fr); }
  .ph-contato__grade { grid-template-columns: 1fr 1.02fr; gap: 44px; }
  .ph-rodape__grade { grid-template-columns: 1.5fr 1fr 1fr; }
  .ph-secao { padding: 80px 0; }

}

/* A navegação do topo só aparece quando CABE. Em 980px ela nasce, mas a linha
   do cabeçalho (marca + 7 links + Entrar + botão de demonstração) soma 1041px:
   medido em 27/08/2026 pelo portão a 1024x620, o botão saía 17px para fora e
   criava rolagem horizontal na página. Até 1059px quem serve é a chave com a
   gaveta, que já atendem o telefone e o tablet. */
@media (min-width: 1060px) {
  .ph-topo__nav { display: flex; }
  .ph-topo__entrar { display: inline-flex; }
  .ph-chave { display: none; }
  .ph-gaveta { display: none !important; }
}

/* Bento entra só a partir de 1200px, apontando para a captura que fica à
   direita dele. Os pés apoiam na borda de baixo da imagem e parte do corpo
   sai para o vão de 44px da grade. O recuo de 38px é medido: em 1200px a
   coluna de texto termina 6px antes de onde ele começa, então ele nunca
   encosta na frase. Abaixo disso a captura ocupa a largura toda e o mascote
   viraria enfeite em cima do conteúdo. */
@media (min-width: 1200px) {
  .ph-bento-capa {
    display: block; position: absolute; z-index: 2;
    left: -38px; bottom: 0; width: 104px; height: 104px;
    filter: drop-shadow(0 8px 18px rgba(28, 43, 38, 0.16));
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-pronto .ph-surge { opacity: 1; transform: none; transition: none; }
  .ph-botao:hover, .ph-cartao:hover { transform: none; }
}