/* ==========================================================================
   Planviza — folha de estilos do site
   Fonte dos valores: planviza-design-system.json (versão 1.0.0)
   Organização:
     1. Tokens (variáveis)
     2. Base e tipografia
     3. Layout (contêiner, painéis, seções, grades)
     4. Componentes (botão, badge, cards, tabela, FAQ, formulário)
     5. Cabeçalho, mega menu e menu do celular
     6. Seções da home
     7. Mega rodapé e barra fixa do celular
     8. Celular (até 767px)
     9. Movimento e preferências do usuário
    10. Páginas internas (hub, serviço, blog, artigo, contato, sobre, documentos legais, obrigado e 404)
    11. Topo no celular, trilha em cápsula e assistente de cotação
    12. Glossário e mapa do site
    13. Envio dos formulários (isca antispam e aviso de envio)
    14. Aviso de cookies e preferências (LGPD)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Cores */
  --primary: #2E7478;
  --primary-hover: #245F63;
  --primary-active: #194F53;
  --primary-soft: #D6F3F4;
  --secondary: #1A2B2C;
  --accent: #5BB5A2;
  --accent-hover: #4AA18F;
  --text: #1A2B2C;
  --text-muted: #3D5557;
  --text-inverse: #FFFFFF;
  --text-inverse-muted: #B3CFD0;
  --surface: #FFFFFF;
  --surface-alt: #EFF9FA;
  --surface-dark: #1A2B2C;
  --surface-dark-alt: #24393A;
  --border: #D5E7E8;
  --border-control: #6F9295;
  --border-dark: #6F9295;
  --success: #17653A;
  --success-soft: #EAF6EF;
  --error: #B42318;
  --error-soft: #FDECE9;
  --focus: #166E75;
  --focus-inverse: #A8E6E8;
  --disabled-bg: #E2E8EA;
  --disabled-text: #546B6D;
  --whatsapp: #137A3F;
  --whatsapp-hover: #0F6333;
  --whatsapp-active: #0B5229;

  /* Tipografia */
  --font: 'Golos Text', 'Golos Fallback', system-ui, 'Segoe UI', sans-serif;
  --fs-h1: clamp(2.375rem, 1.627rem + 3.192vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.384rem + 2.629vw, 3.75rem);
  --fs-h3: clamp(1.625rem, 1.273rem + 1.502vw, 2.625rem);
  --fs-h4: clamp(1.25rem, 1.118rem + 0.563vw, 1.625rem);
  --fs-h5: clamp(1.0625rem, 0.997rem + 0.282vw, 1.25rem);
  --fs-h6: clamp(1rem, 0.978rem + 0.094vw, 1.0625rem);
  --fs-body: clamp(1rem, 0.956rem + 0.188vw, 1.125rem);
  --fs-body-large: clamp(1.125rem, 0.993rem + 0.563vw, 1.5rem);
  --fs-small: 0.875rem;

  /* Espaçamento */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --s-128: 128px;

  /* Raios */
  --r-small: 8px;
  --r-control: 12px;
  --r-icon: 16px;
  --r-card: 24px;
  --r-panel: 32px;
  --r-pill: 9999px;

  /* Sombras */
  /* Sombras, transição e fonte: os valores se repetem nas regras (box-shadow, transition e font-family), porque o
     validador de CSS do W3C não confere var() nessas propriedades e avisa em cada uso. Mudou aqui, mude lá. */
  --shadow-subtle: 0 2px 8px rgb(26 43 44 / 0.04);
  --shadow-card: 0 8px 24px rgb(26 43 44 / 0.06);
  --shadow-card-hover: 0 12px 32px rgb(26 43 44 / 0.10);
  --shadow-popover: 0 16px 48px rgb(26 43 44 / 0.14);

  /* Transições */
  --t-interactive: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  --easing: cubic-bezier(0.2, 0, 0, 1);

  /* Medidas que mudam por largura de tela (celular) */
  --content-edge: 24px;
  --panel-inset: 12px;
  --panel-pad: 20px;
  --section-space: 48px;
  --panel-gap: 16px;
  --heading-gap: 32px;
  --split-gap: 32px;
  --card-padding: 24px;
  --grid-gutter: 16px;
  --header-h: 72px;
  --button-h: 48px;
  --mobilebar-h: 0px;   /* barra fixa do celular removida em 12/10/2026 */
}

@media (min-width: 768px) {
  :root {
    --content-edge: 48px;
    --panel-inset: 24px;
    --panel-pad: 24px;
    --section-space: 64px;
    --panel-gap: 24px;
    --heading-gap: 32px;
    --grid-gutter: 24px;
    --header-h: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --content-edge: 64px;
    --panel-inset: 32px;
    --panel-pad: 32px;
    --section-space: 96px;
    --heading-gap: 48px;
    --split-gap: 64px;
    --button-h: 52px;
  }
}

@media (min-width: 1140px) {
  :root {
    --header-h: 88px;
  }
}

@media (min-width: 1280px) {
  :root {
    --card-padding: 32px;
  }
}

/* 2. Base e tipografia ----------------------------------------------------- */

/* Golos Text no próprio site (1º de novembro de 2026), no lugar do Google Fonts: subconjunto latino, que cobre
   acentos, aspas curvas, travessão e o símbolo do real. As faixas e os arquivos são os do Google (Fontsource).
   As três têm preload no <head> (gerador/desempenho.py). */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/golos-text-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/golos-text-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/golos-text-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fonte reserva com as medidas da Golos (Arial ajustada): enquanto a Golos carrega, o texto ocupa o mesmo espaço
   e a página não pula quando ela chega. Medidas tiradas dos arquivos com o fontTools (largura média de uma frase
   do site; subida 0,98 e descida 0,22 da Golos). */
@font-face {
  font-family: 'Golos Fallback';
  font-weight: 400 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 106.25%;
  ascent-override: 92.2%;
  descent-override: 20.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Golos Fallback';
  font-weight: 600 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 100.9%;
  ascent-override: 97.1%;
  descent-override: 21.8%;
  line-gap-override: 0%;
}

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

html {
  font-size: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
  scroll-padding-bottom: calc(var(--mobilebar-h) + 16px);
}

body {
  margin: 0;
  padding-bottom: var(--mobilebar-h);
  background: var(--surface);
  color: var(--text);
  font-family: 'Golos Text', 'Golos Fallback', system-ui, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -0.006em;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

a:hover {
  color: var(--primary-hover);
}

a:active {
  color: var(--primary-active);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.pz-on-dark :focus-visible,
.pz-on-primary :focus-visible,
.pz-topbar :focus-visible,
.pz-footer :focus-visible {
  outline-color: var(--focus-inverse);
}

.pz-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pz-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pz-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pz-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 110;
  padding: 12px 16px;
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 16px 48px rgb(26 43 44 / 0.14);
  transform: translateY(-200%);
}

.pz-skip:focus {
  transform: none;
}

/* Tamanhos visuais de título (a classe define o tamanho; a tag define o nível) */

.pz-h1 {
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.028em;
}

.pz-h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 22ch;
}

/* Dentro de uma coluna de split o título pode ocupar mais largura */

.pz-h2--wide {
  max-width: 26ch;
}

.pz-h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.024em;
  max-width: 28ch;
}

.pz-h4 {
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.019em;
}

.pz-h5 {
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.pz-lead {
  font-size: var(--fs-body-large);
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  max-width: 55ch;
}

.pz-text {
  color: var(--text-muted);
  max-width: 65ch;
}

.pz-small {
  font-size: var(--fs-small);
  line-height: 1.55;
  letter-spacing: 0;
}

/* Destaque em dois tons: uma expressão contínua por título */

.pz-hl {
  color: var(--primary);
}

.pz-on-dark .pz-hl {
  color: var(--accent);
}

/* 3. Layout ---------------------------------------------------------------- */

.pz-container {
  width: min(1340px, calc(100vw - 2 * var(--content-edge)));
  margin-inline: auto;
}

/* Dentro de um painel, o conteúdo se afasta da borda do painel (e não só da borda da tela) */

.pz-panel .pz-container {
  width: min(1340px, calc(100vw - 2 * (var(--panel-inset) + var(--panel-pad))));
}

@media (max-width: 359px) {
  :root {
    --panel-pad: 16px;
  }
}

/* O intervalo entre seções é controlado uma única vez, aqui */

.pz-section {
  margin-top: var(--section-space);
}

.pz-panel {
  margin-inline: var(--panel-inset);
  padding-block: var(--section-space);
  border-radius: var(--r-panel);
}

/* Dois painéis seguidos ficam próximos: o respiro grande só separa painel de seção aberta */

.pz-section.pz-panel + .pz-section.pz-panel {
  margin-top: var(--panel-gap);
}

.pz-panel--soft {
  background: var(--primary-soft);
}

.pz-panel--primary {
  background: var(--primary);
  color: var(--text-inverse);
}

.pz-on-primary .pz-text {
  color: var(--primary-soft);
}

.pz-on-primary .pz-hl {
  color: var(--focus-inverse);
}

.pz-on-primary .pz-badge {
  /* Fundo mais escuro que o painel: o branco translúcido dava 4,08:1 (PageSpeed, 1º/11/2026); assim passa de 7:1 */
  border-color: rgb(255 255 255 / 0.28);
  background: var(--primary-hover);
  color: var(--text-inverse);
}

.pz-panel--alt {
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.pz-panel--dark {
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.pz-on-dark {
  color: var(--text-inverse);
}

.pz-on-dark .pz-text,
.pz-on-dark .pz-lead {
  color: var(--text-inverse-muted);
}

.pz-on-dark a {
  color: var(--focus-inverse);
}

/* Tabela branca dentro de painel escuro: o link volta à cor de link sobre branco (o claro dava 1,38:1; PageSpeed, 1º/11/2026) */
.pz-on-dark .pz-table a {
  color: var(--primary);
}

/* Botão branco dentro de painel escuro (chamada no meio do texto): sem isto, o ".pz-on-dark a" deixava o texto claro
   sobre o branco (1,39:1) */
.pz-on-dark .pz-button--light {
  color: var(--primary-active);
}

/* Cabeçalho de seção */

.pz-heading {
  display: grid;
  gap: var(--s-16);
  justify-items: start;
  margin-bottom: var(--heading-gap);
}

.pz-heading--center {
  max-width: 800px;
}

.pz-heading--split .pz-heading__support {
  display: grid;
  gap: var(--s-24);
  justify-items: start;
}

@media (min-width: 1024px) {
  .pz-heading--center {
    margin-inline: auto;
    justify-items: center;
    text-align: center;
  }

  .pz-heading--split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: end;
  }

  .pz-heading--split .pz-heading__title {
    grid-column: span 7;
    display: grid;
    gap: var(--s-16);
    justify-items: start;
  }

  .pz-heading--split .pz-heading__support {
    grid-column: 9 / span 4;
  }
}

.pz-heading__title {
  display: grid;
  gap: var(--s-16);
  justify-items: start;
}

/* Grades simétricas: cada quantidade de itens tem uma configuração sem vazios */

.pz-grid {
  display: grid;
  gap: var(--s-24);
  align-items: stretch;
}

@media (min-width: 768px) {
  .pz-grid--2,
  .pz-grid--4,
  .pz-grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pz-grid--3,
  .pz-grid--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .pz-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Duas colunas sempre com a mesma altura: a coluna menor estica até a maior */

.pz-split {
  display: grid;
  gap: var(--split-gap);
  align-items: stretch;
}

/* Grade que divide a altura da coluna em linhas iguais */

@media (min-width: 1200px) {
  .pz-grid--fill {
    height: 100%;
    grid-auto-rows: 1fr;
  }
}

/* Quando as colunas empilham, o título vem antes da foto */

@media (max-width: 1199px) {
  .pz-split__media-last {
    order: 2;
  }
}

/* Splits com foto só viram duas colunas a partir de 1200px; antes disso, empilham */

@media (min-width: 1024px) and (max-width: 1199px) {
  .pz-split.pz-split--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .pz-split.pz-split--wide > * {
    grid-column: auto;
    padding-left: 0;
  }
}

@media (min-width: 1024px) {
  .pz-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
  }

  .pz-split__a--6 {
    grid-column: span 6;
  }

  .pz-split__b--6 {
    grid-column: 7 / span 6;
    padding-left: calc(var(--split-gap) - var(--grid-gutter));
  }

  .pz-split__a--7 {
    grid-column: span 7;
  }

  .pz-split__b--5 {
    grid-column: 8 / span 5;
    padding-left: calc(var(--split-gap) - var(--grid-gutter));
  }

  .pz-split__a--5 {
    grid-column: span 5;
  }

  .pz-split__b--7 {
    grid-column: 6 / span 7;
    padding-left: calc(var(--split-gap) - var(--grid-gutter));
  }

  .pz-split__a--4 {
    grid-column: span 4;
  }

  .pz-split__b--8 {
    grid-column: 5 / span 8;
    padding-left: calc(var(--split-gap) - var(--grid-gutter));
  }
}

/* 4. Componentes ----------------------------------------------------------- */

/* Botões */

.pz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-height: var(--button-h);
  padding: 12px var(--s-32);
  border: 1px solid var(--primary);
  border-radius: var(--r-control);
  background: var(--primary);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-button:hover {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--primary-hover);
  color: var(--text-inverse);
}

.pz-button:active {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--primary-active);
  color: var(--text-inverse);
}

.pz-button--secondary {
  background: var(--surface);
  color: var(--primary);
}

.pz-button--secondary:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.pz-button--secondary:active {
  border-color: var(--primary);
  background: var(--surface-alt);
  color: var(--primary);
}

.pz-button--whatsapp {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--whatsapp);
}

.pz-button--whatsapp:hover {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--whatsapp-hover);
}

.pz-button--whatsapp:active {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--whatsapp-active);
}

.pz-button--compact {
  padding-inline: var(--s-24);
}

.pz-button--block {
  width: 100%;
}

/* Variantes para superfície escura */

.pz-on-dark .pz-button--primary-dark {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--accent);
  color: var(--text);
}

.pz-on-dark .pz-button--primary-dark:hover,
.pz-on-dark .pz-button--primary-dark:active {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--accent-hover);
  color: var(--text);
}

.pz-on-dark .pz-button--secondary-dark {
  border-color: var(--border-dark);
  background: transparent;
  color: var(--text-inverse);
}

.pz-on-dark .pz-button--secondary-dark:hover {
  background: var(--surface-dark-alt);
  color: var(--text-inverse);
}

.pz-on-dark .pz-button--secondary-dark:active {
  border-color: var(--focus-inverse);
  background: var(--surface-dark-alt);
  color: var(--text-inverse);
}

.pz-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

/* Em telas estreitas a seta sai para preservar o texto do botão */

@media (max-width: 479px) {
  .pz-button .pz-icon:last-child:not(:first-child) {
    display: none;
  }
}

@media (min-width: 640px) {
  .pz-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-16);
  }
}

/* Badges */

.pz-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 32px;
  padding: var(--s-4) var(--s-12);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--primary);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
}

.pz-panel--alt .pz-badge,
.pz-panel--soft .pz-badge {
  background: var(--surface);
}

.pz-on-dark .pz-badge {
  border-color: var(--border-dark);
  background: var(--surface-dark-alt);
  color: var(--focus-inverse);
}

/* Contêiner de ícone */

.pz-iconbox {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-icon);
  background: var(--primary-soft);
  color: var(--primary);
}

@media (min-width: 768px) {
  .pz-iconbox {
    width: 64px;
    height: 64px;
  }
}

.pz-iconbox--circle {
  border-radius: 50%;
}

/* Ponto verde de "online" no canto do balão */

.pz-iconbox--online {
  position: relative;
}

.pz-iconbox--online::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--surface-dark);
  border-radius: 50%;
  background: #3DDC84;
}

/* Espaço reservado de imagem
   Nesta versão nenhuma imagem é publicada. Cada espaço mostra a medida do arquivo,
   o nome dele e o texto alternativo, para a imagem ser produzida depois.
   Para publicar: troque o bloco .pz-ph pela tag <img> que está no comentário acima dele. */

.pz-foto {
  display: block;
  max-width: 100%;
}

/* A fotografia real exige que o cartão superior deixe livres os rostos da família. */
@media (min-width: 1280px) {
  .pz-hero.pz-photohero .pz-glasschip--a {
    top: 7%;
  }
}

.pz-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  width: 100%;
  padding: var(--s-16);
  overflow: hidden;
  border: 2px dashed var(--accent);
  border-radius: var(--r-card);
  background-color: var(--primary-soft);
  background-image: repeating-linear-gradient(135deg, rgb(46 116 120 / 0.07) 0 12px, transparent 12px 24px);
  color: var(--text);
  text-align: center;
  aspect-ratio: var(--ratio, 1.3333);
}

.pz-ph > .pz-icon {
  color: var(--primary);
}

.pz-ph__size {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.3;
}

.pz-ph__file {
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pz-ph__alt {
  max-width: 46ch;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

@media (min-width: 768px) {
  .pz-ph {
    padding: var(--s-24);
  }
}

/* Onde um card fica sobre a imagem, o texto do espaço reservado se afasta dele */

@media (min-width: 1280px) {
  .pz-ph--clear-corners {
    padding-block: 128px;
  }

  .pz-ph--clear-bottom {
    padding-bottom: 168px;
  }
}

/* Card base */

.pz-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.pz-card--linked {
  position: relative;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-card--linked:focus-within {
  border-color: var(--primary);
}

/* Mídia que acompanha a altura da coluna vizinha
   No celular a imagem usa a proporção do próprio arquivo; a partir de 1200px ela preenche a
   altura da coluna de texto, para as duas colunas terminarem na mesma linha. */

.pz-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--primary-soft);
  /* No celular a imagem usa a proporção do arquivo, limitada a 4:5 para não ocupar a tela inteira */
  aspect-ratio: max(0.8, var(--ratio, 1.3333));
}

.pz-media > img,
.pz-media > .pz-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pz-media > img {
  object-fit: cover;
  object-position: center 30%;
}

.pz-media > .pz-ph {
  border-radius: inherit;
  aspect-ratio: auto;
}

/* Em tablet, com as colunas empilhadas, a foto fica mais baixa para não dominar a tela */

@media (min-width: 768px) and (max-width: 1199px) {
  .pz-media {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1200px) {
  .pz-media--fill {
    height: 100%;
    min-height: 560px;
    aspect-ratio: auto;
  }
}

.pz-figure {
  position: relative;
}

@media (min-width: 1200px) {
  .pz-figure {
    height: 100%;
  }
}

/* Cards flutuantes sobre as fotos: sempre nos cantos, nunca sobre rosto ou botão */

.pz-float {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  margin-top: var(--s-16);
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: 0 2px 8px rgb(26 43 44 / 0.04);
}

.pz-float strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.4;
}

.pz-float__text {
  display: block;
  min-width: 0;
}

.pz-float__text span {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-float--dark {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--surface-dark);
}

.pz-float--dark strong {
  color: var(--text-inverse);
}

.pz-float--dark .pz-float__text span {
  color: var(--text-inverse-muted);
}

.pz-float--dark .pz-iconbox {
  background: var(--surface-dark-alt);
  color: var(--focus-inverse);
}

.pz-float--bottom strong {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.019em;
}

@media (min-width: 1280px) {
  .pz-float {
    position: absolute;
    z-index: 1;
    max-width: 300px;
    margin-top: 0;
    box-shadow: 0 8px 24px rgb(26 43 44 / 0.06);
  }

  .pz-float--tl {
    top: var(--s-32);
    left: calc(-1 * var(--s-48));
  }

  .pz-float--bl {
    bottom: var(--s-32);
    left: calc(-1 * var(--s-48));
  }

  .pz-float--br {
    right: var(--s-24);
    bottom: var(--s-24);
  }

  .pz-float--bottom {
    right: var(--s-24);
    bottom: var(--s-24);
    left: var(--s-24);
    max-width: none;
  }
}

/* Card de recurso: ícone à esquerda, título e texto (bloco "sobre" da referência) */

.pz-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s-16);
  height: 100%;
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-alt);
}

.pz-feature--plain {
  align-items: center;
  background: var(--surface);
}

.pz-feature > .pz-icon {
  margin-top: 2px;
  color: var(--primary);
}

.pz-feature h3 {
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.pz-feature p {
  margin-top: var(--s-8);
  color: var(--text-muted);
}

/* Card de serviço: imagem 4:3, badge sobre a imagem, ícone na divisa, texto, dois atalhos e botão */

.pz-service {
  overflow: hidden;
}

.pz-service__media {
  position: relative;
}

.pz-service__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--primary-soft);
  object-fit: cover;
  object-position: center 30%;
}

/* No topo de um card, o espaço reservado acompanha o recorte do card */

.pz-ph.pz-service__image,
.pz-ph.pz-post__image {
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.pz-service__badge {
  position: absolute;
  top: var(--s-16);
  left: var(--s-16);
  background: var(--surface);
}

.pz-service__icon {
  position: absolute;
  right: var(--s-24);
  bottom: -28px;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 2px 8px rgb(26 43 44 / 0.04);
}

.pz-service__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-16);
  padding: var(--s-32) var(--s-24) var(--s-24);
}

.pz-service__text {
  flex: 1;
  color: var(--text-muted);
}

.pz-facts {
  display: grid;
  gap: var(--s-8);
  padding-top: var(--s-16);
  border-top: 1px solid var(--border);
  font-size: 1rem;
  line-height: 1.5;
}

.pz-facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8);
  color: var(--text-muted);
}

.pz-facts .pz-icon {
  margin-top: 3px;
  color: var(--primary);
}

.pz-service__footer {
  margin-top: var(--s-8);
}

/* Faixa de ajuda na base de um painel */

.pz-band {
  display: grid;
  gap: var(--s-24);
  align-items: center;
  margin-top: var(--s-24);
  padding: var(--s-32) var(--s-24);
  border-radius: var(--r-card);
  background: var(--primary-soft);
}

.pz-band h3 {
  max-width: 22ch;
}

.pz-band--dark {
  background: var(--surface-dark);
}

@media (min-width: 768px) {
  .pz-band {
    padding: var(--s-48);
  }
}

@media (min-width: 1200px) {
  .pz-band {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Card de diferencial: ícone e título na mesma linha, texto abaixo */

.pz-differential {
  gap: var(--s-16);
  padding: var(--s-24);
  background: var(--surface-alt);
}

.pz-differential__top {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}

.pz-differential__top .pz-iconbox {
  width: 48px;
  height: 48px;
  border-radius: var(--r-control);
}

.pz-differential__top h3 {
  min-width: 0;
  overflow-wrap: break-word;
}

.pz-differential p {
  color: var(--text-muted);
}

/* Selos de confiança: ícone, título e legenda, com divisórias */

.pz-seals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-32) var(--s-24);
}

.pz-seal {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}

.pz-seal .pz-icon {
  color: var(--accent);
}

.pz-seal strong {
  display: block;
  color: var(--text-inverse);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.4;
}

.pz-seal span {
  display: block;
  color: var(--text-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

@media (min-width: 1024px) {
  .pz-seals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .pz-seal {
    justify-content: center;
    padding-inline: var(--s-24);
  }

  .pz-seal + .pz-seal {
    border-left: 1px solid var(--border-dark);
  }
}

/* Etapas do processo: círculo com ícone, número e linha tracejada entre elas */

.pz-steps {
  display: grid;
  gap: var(--s-32);
}

.pz-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-8) var(--s-24);
  align-items: start;
}

.pz-step__mark {
  position: relative;
  grid-row: span 3;
  width: 72px;
  height: 72px;
}

.pz-step__circle {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-inverse);
  box-shadow: 0 0 0 6px var(--primary-soft);
}

.pz-step__number {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--secondary);
  color: var(--text-inverse);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
}

.pz-step p {
  color: var(--text-muted);
}

.pz-step .pz-badge {
  justify-self: start;
  margin-top: var(--s-8);
  color: var(--primary);
}

@media (min-width: 768px) {
  .pz-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-48) var(--s-24);
  }

  /* Coluna flexível: o selo de cada etapa fica na base, na mesma linha das outras, mesmo com textos de alturas diferentes */
  .pz-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-12);
    text-align: center;
  }

  .pz-step__mark {
    grid-row: auto;
    width: 96px;
    height: 96px;
    margin-bottom: var(--s-16);
  }

  .pz-step__circle {
    box-shadow: 0 0 0 8px var(--primary-soft);
  }

  .pz-step .pz-badge {
    margin-top: auto;
  }
}

@media (min-width: 1200px) {
  .pz-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pz-step {
    position: relative;
  }

  /* Linha decorativa: liga o círculo anterior a este */
  .pz-step + .pz-step::before {
    content: "";
    position: absolute;
    top: 48px;
    right: calc(50% + 72px);
    width: calc(100% - 144px + var(--s-24));
    border-top: 2px dashed var(--accent);
  }
}

/* Etapas sobre painel escuro */

.pz-on-dark .pz-step p {
  color: var(--text-inverse-muted);
}

.pz-on-dark .pz-step__circle {
  box-shadow: 0 0 0 6px var(--surface-dark-alt);
}

.pz-on-dark .pz-step__number {
  border-color: var(--surface-dark);
  background: var(--accent);
  color: var(--text);
}

.pz-on-dark .pz-step .pz-badge {
  color: var(--focus-inverse);
}

@media (min-width: 768px) {
  .pz-on-dark .pz-step__circle {
    box-shadow: 0 0 0 8px var(--surface-dark-alt);
  }
}

/* Imagem larga com moldura suave */

.pz-wide {
  position: relative;
  margin-top: var(--heading-gap);
  border: 8px solid var(--primary-soft);
  border-radius: var(--r-panel);
  background: var(--primary-soft);
}

.pz-on-dark .pz-wide {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--surface-dark-alt);
}

.pz-wide__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  object-fit: cover;
  object-position: center 30%;
}

@media (min-width: 768px) {
  .pz-wide__image {
    aspect-ratio: 5 / 2;
  }
}

@media (min-width: 1280px) {
  .pz-wide .pz-float {
    bottom: var(--s-32);
    left: var(--s-32);
  }
}

/* Composição de duas imagens com um número (bloco "sobre" da referência) */

.pz-collage {
  position: relative;
  max-width: 420px;
  aspect-ratio: 9 / 16;
}

.pz-collage::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 6%;
  width: 34%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--primary-soft);
}

.pz-collage__main,
.pz-collage__small {
  position: absolute;
  border-radius: var(--r-card);
  background-color: var(--primary-soft);
  object-fit: cover;
  aspect-ratio: auto;
}

.pz-collage__main {
  top: 0;
  right: 0;
  width: 82%;
  height: 66%;
  object-position: center 30%;
}

.pz-collage__small {
  bottom: 0;
  left: 0;
  width: 52%;
  height: 46%;
  border-radius: var(--r-panel);
  box-shadow: 0 0 0 8px var(--surface);
  object-position: center 35%;
}

.pz-collage__stat {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  gap: var(--s-4);
  align-content: center;
  width: 42%;
  height: 30%;
}

.pz-collage__stat .pz-icon {
  color: var(--accent);
}

.pz-collage__value {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.024em;
}

.pz-collage__label {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

@media (min-width: 1200px) {
  .pz-collage {
    max-width: none;
    height: 100%;
    min-height: 600px;
    aspect-ratio: auto;
  }
}

/* Tabela comparativa */

.pz-table-region {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

/* Cabeçalho de um segundo bloco na mesma seção, logo depois da tabela (glossário: tabela e depois perguntas) */
.pz-table-region + .pz-heading {
  margin-top: var(--s-48);
}

.pz-table-hint {
  margin-bottom: var(--s-12);
  color: var(--text-muted);
}

@media (min-width: 1024px) {
  .pz-table-hint {
    display: none;
  }
}

.pz-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  text-align: left;
}

.pz-table caption {
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
  text-align: left;
  caption-side: bottom;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.pz-table th,
.pz-table td {
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.pz-table thead th {
  background: var(--surface-alt);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.4;
  min-width: 240px;
}

.pz-table thead th:first-child {
  min-width: 200px;
}

.pz-table tbody th {
  font-weight: 500;
}

.pz-table tbody td {
  color: var(--text-muted);
}

.pz-table tbody tr:last-child th,
.pz-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .pz-table tbody tr:hover {
    background: var(--surface-alt);
  }
}

/* Aviso */

.pz-callout {
  display: flex;
  gap: var(--s-16);
  padding: var(--s-16);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--r-card);
  background: var(--primary-soft);
  color: var(--text);
}

.pz-callout .pz-icon {
  margin-top: 4px;
  color: var(--primary);
}

@media (min-width: 768px) {
  .pz-callout {
    padding: var(--s-24);
  }
}

/* FAQ */

.pz-faq {
  display: grid;
  gap: var(--s-12);
}

.pz-faq__item {
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-faq__item[open] {
  background: var(--surface-alt);
}

.pz-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: 64px;
  padding: var(--s-16);
  border-radius: var(--r-control);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-faq__question h3 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-wrap: pretty;
}

.pz-faq__question .pz-icon {
  color: var(--primary);
  transition: transform 180ms ease;
}

.pz-faq__item[open] .pz-faq__question {
  color: var(--primary);
}

.pz-faq__item[open] .pz-faq__question .pz-icon {
  transform: rotate(45deg);
}

.pz-faq__answer {
  padding: 0 var(--s-16) var(--s-16);
  color: var(--text-muted);
}

.pz-faq__answer p {
  max-width: 70ch;
}

@media (min-width: 768px) {
  .pz-faq__question {
    padding: var(--s-24);
  }

  .pz-faq__answer {
    padding: 0 var(--s-24) var(--s-24);
  }
}

@media (hover: hover) and (pointer: fine) {
  .pz-faq__question:hover {
    background: var(--surface-alt);
    color: var(--primary);
  }
}

/* Depoimentos: três relatos empilhados que dividem a altura da foto ao lado */

.pz-testimonials {
  display: grid;
  flex: 1;
  gap: var(--s-16);
  grid-auto-rows: 1fr;
}

.pz-testimonial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-16) var(--s-24);
  align-items: start;
  height: 100%;
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.pz-testimonial > .pz-icon {
  color: var(--accent);
}

.pz-testimonial blockquote {
  font-size: var(--fs-h5);
  line-height: 1.6;
}

.pz-testimonial__author {
  display: flex;
  grid-column: 2;
  align-items: center;
  gap: var(--s-12);
  align-self: end;
}

.pz-testimonial__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}

.pz-testimonial__name {
  display: block;
  font-weight: 500;
  line-height: 1.4;
}

.pz-testimonial__context {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Card de artigo */

.pz-post {
  overflow: hidden;
  background: var(--surface-alt);
}

.pz-panel--alt .pz-post {
  background: var(--surface);
}

.pz-post__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: var(--primary-soft);
  object-fit: cover;
  object-position: center 30%;
}

.pz-post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-16);
  padding: var(--s-24);
}

.pz-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-16);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-post__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
}

.pz-post__title a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

/* O link do título cobre o card inteiro, sem criar uma segunda parada de foco */

.pz-post__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}

.pz-post__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  margin-top: auto;
  color: var(--primary);
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .pz-card--linked:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 32px rgb(26 43 44 / 0.10);
  }

  .pz-post:hover .pz-post__title a {
    color: var(--primary-hover);
  }
}

/* Em tablet, três artigos viram cards horizontais (linhas sempre completas) */

@media (min-width: 768px) and (max-width: 1023px) {
  .pz-post {
    flex-direction: row;
  }

  .pz-post__image {
    width: 34%;
    aspect-ratio: auto;
  }

  .pz-ph.pz-post__image {
    border-radius: var(--r-card) 0 0 var(--r-card);
  }
}

/* Formulário */

.pz-form {
  display: grid;
  gap: var(--s-24);
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
}

.pz-form__intro {
  display: grid;
  gap: var(--s-8);
}

.pz-form__intro p {
  color: var(--text-muted);
}

.pz-form__grid {
  display: grid;
  gap: var(--s-24);
}

.pz-field {
  display: grid;
  gap: var(--s-8);
  align-content: start;
}

.pz-field label {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.pz-field input,
.pz-field select {
  width: 100%;
  min-height: 52px;
  padding: 12px var(--s-16);
  border: 1px solid var(--border-control);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-field input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.pz-field input:hover,
.pz-field select:hover,
.pz-field input:focus,
.pz-field select:focus {
  border-color: var(--primary);
}

.pz-field__help {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-field__help--row {
  margin-top: calc(-1 * var(--s-16));
}

.pz-form a,
.pz-form :focus-visible {
  color: var(--primary);
  outline-color: var(--focus);
}

.pz-form input:focus-visible,
.pz-form select:focus-visible {
  color: var(--text);
}

.pz-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.pz-consent input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--border-control);
  accent-color: var(--primary);
}

@media (min-width: 768px) {
  .pz-form {
    padding: var(--s-32);
  }

  /* Campos da mesma linha alinham pela base, mesmo quando um rótulo quebra em duas linhas */
  .pz-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .pz-field--full {
    grid-column: 1 / -1;
  }
}

/* 5. Cabeçalho, mega menu e menu do celular -------------------------------- */

/* Faixa superior */

.pz-topbar {
  background: var(--surface-dark);
  color: var(--text-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-24);
  min-height: 44px;
}

.pz-topbar__message {
  display: none;
  margin-right: auto;
}

.pz-topbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-24);
}

.pz-topbar__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 44px;
  color: var(--text-inverse);
  text-decoration: none;
}

.pz-topbar__links a:hover {
  color: var(--focus-inverse);
  text-decoration: underline;
}

.pz-topbar__links .pz-icon {
  color: var(--accent);
}

@media (min-width: 1024px) {
  .pz-topbar__message {
    display: block;
  }
}

/* Cabeçalho */

.pz-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.pz-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s-16);
  min-height: var(--header-h);
}

.pz-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.pz-logo:hover {
  color: var(--text);
}

/* Logotipo em texto: “Plan” na cor da marca e “viza” na cor do texto, numa palavra só */
.pz-logo__plan {
  color: var(--primary);
}

.pz-logo--inverse,
.pz-logo--inverse:hover {
  color: var(--text-inverse);
}

.pz-logo--inverse .pz-logo__plan {
  color: var(--accent);
}

.pz-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  order: 1;
}

.pz-header__cta {
  display: none;
}

@media (min-width: 480px) {
  .pz-header__cta {
    display: inline-flex;
  }
}

.pz-menu-toggle,
.pz-menu-close {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-menu-toggle:hover,
.pz-menu-close:hover {
  border-color: var(--primary);
  background: var(--surface-alt);
  color: var(--primary);
}

/* Sem JavaScript, o botão de menu não faz nada: sai de cena e o menu fica no fluxo */

.no-js .pz-menu-toggle,
.no-js .pz-nav__head,
.no-js .pz-nav__foot,
.no-js .pz-backdrop {
  display: none;
}

/* Navegação: base (celular e tablet) */

.pz-nav {
  width: 100%;
  order: 2;
}

/* Sem JavaScript o menu abre no fluxo e pode ficar alto: o cabeçalho deixa de ser fixo */

@media (max-width: 1139px) {
  .no-js .pz-header {
    position: static;
  }
}

.pz-nav__list {
  display: grid;
  gap: var(--s-8);
  padding-block: var(--s-16);
}

.pz-nav__trigger,
.pz-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  min-height: 48px;
  padding: 12px var(--s-16);
  border-radius: var(--r-control);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-nav__trigger .pz-icon {
  transition: transform 180ms ease;
}

.pz-nav__details[open] > .pz-nav__trigger {
  background: var(--primary-soft);
  color: var(--primary);
}

.pz-nav__details[open] > .pz-nav__trigger .pz-icon {
  transform: rotate(180deg);
}

.pz-mega {
  display: grid;
  gap: var(--s-24);
  padding: var(--s-16) 0 var(--s-16) var(--s-16);
}

.pz-mega__title {
  padding: 0 var(--s-16) var(--s-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pz-mega__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px var(--s-16);
  border-radius: var(--r-control);
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.pz-mega__list a.pz-mega__all {
  display: block;
  color: var(--primary);
  font-weight: 500;
}

.pz-mega__all .pz-icon {
  display: inline-block;
  margin-left: var(--s-4);
  vertical-align: -2px;
}

.pz-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: 48px;
}

.pz-nav__foot {
  display: grid;
  gap: var(--s-12);
  padding-top: var(--s-16);
  border-top: 1px solid var(--border);
}

/* Garantia da cotação embaixo do botão da gaveta do menu (no lugar do antigo botão de WhatsApp) */
.pz-nav__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.pz-nav__note .pz-icon {
  color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
  .pz-nav__trigger:hover,
  .pz-nav__link:hover,
  .pz-mega__list a:hover {
    background: var(--surface-alt);
    color: var(--primary);
  }
}

/* Com JavaScript, abaixo de 1140px o menu vira gaveta lateral */

@media (max-width: 1139px) {
  .js .pz-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    width: min(360px, 100vw);
    height: 100dvh;
    padding: var(--s-24);
    overflow-y: auto;
    background: var(--surface);
    box-shadow: 0 16px 48px rgb(26 43 44 / 0.14);
    visibility: hidden;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }

  .js .pz-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .js .pz-nav__list {
    flex: 1;
    align-content: start;
  }

  .pz-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgb(26 43 44 / 0.48);
  }

  .pz-backdrop[hidden] {
    display: none;
  }

  .js body.pz-menu-open {
    overflow: hidden;
  }
}

/* A partir de 1140px: navegação completa e painéis de mega menu */

@media (min-width: 1140px) {
  .pz-header__inner {
    flex-wrap: nowrap;
  }

  .pz-menu-toggle,
  .pz-nav__head,
  .pz-nav__foot,
  .pz-backdrop {
    display: none;
  }

  .pz-nav {
    width: auto;
    order: 0;
  }

  .pz-header__actions {
    order: 1;
  }

  .pz-nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 0;
  }

  .pz-nav__trigger,
  .pz-nav__link {
    padding-inline: var(--s-12);
  }

  .pz-mega {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    z-index: 50;
    width: min(960px, calc(100vw - 128px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-32);
    max-height: calc(100dvh - var(--header-h) - 64px);
    padding: var(--s-32);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: 0 16px 48px rgb(26 43 44 / 0.14);
    transform: translateX(-50%);
  }

  /* Com mouse, 44px por item mantém o painel inteiro visível em telas de notebook */
  .pz-mega__list a {
    min-height: 44px;
    padding-block: 10px;
  }

  .pz-mega--2 {
    width: min(720px, calc(100vw - 128px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Seis grupos em 3 × 2: espaços menores para o painel caber em telas de notebook */
  .pz-mega--6 {
    row-gap: var(--s-16);
    padding: var(--s-24);
  }

  .pz-mega--1 {
    width: min(560px, calc(100vw - 128px));
    grid-template-columns: minmax(0, 1fr);
  }

  .pz-mega--1 .pz-mega__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-16);
  }

  .pz-mega--1 .pz-mega__list li:last-child {
    grid-column: 1 / -1;
  }
}

/* Em telas largas, os painéis com muitos grupos ocupam a largura do conteúdo em uma linha */

@media (min-width: 1280px) {
  .pz-mega--4 {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-24);
  }
}

@media (min-width: 1400px) {
  .pz-mega--6 {
    width: 100%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-16);
  }

  .pz-mega--6 .pz-mega__list a,
  .pz-mega--6 .pz-mega__title {
    padding-inline: var(--s-12);
  }
}

/* 6. Seções da home -------------------------------------------------------- */

/* Coluna de texto de um split: ocupa a altura inteira e distribui o conteúdo */

.pz-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  height: 100%;
}

.pz-stack {
  display: grid;
  gap: var(--s-16);
  justify-items: start;
}

.pz-stack--wide {
  gap: var(--s-24);
}

/* Hero
   Título, seletor "Para quem é o plano?" e imagem em moldura de arco.
   O movimento (entrada, marca-texto, cards flutuando, selo girando e faixa) é só CSS
   e fica desligado para quem pede menos movimento. */

.pz-hero {
  position: relative;
  margin-top: var(--s-16);
  padding-top: var(--s-48);
  padding-bottom: 0;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(255 255 255 / 0.8) 0%, transparent 60%),
    radial-gradient(45% 60% at 0% 100%, rgb(91 181 162 / 0.3) 0%, transparent 65%),
    var(--primary-soft);
}

/* Formas decorativas, longe do texto pequeno */

.pz-hero::before,
.pz-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.pz-hero::before {
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: rgb(255 255 255 / 0.55);
}

.pz-hero::after {
  bottom: 24px;
  left: 36%;
  width: 380px;
  height: 380px;
  border: 1px solid rgb(46 116 120 / 0.22);
}

.pz-hero__dots {
  display: none;
  position: absolute;
  top: 72px;
  right: 38%;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, rgb(46 116 120 / 0.38) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  pointer-events: none;
}

.pz-hero .pz-container {
  position: relative;
  z-index: 1;
  padding-bottom: var(--s-48);
}

.pz-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-24);
}

.pz-hero__content .pz-lead {
  color: var(--text);
  max-width: 60ch;
}

/* Ponto que pulsa no selo do slogan */

.pz-pulse {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.pz-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}

/* Marca-texto sob o destaque do título */

.pz-mark {
  background-image: linear-gradient(rgb(91 181 162 / 0.36), rgb(91 181 162 / 0.36));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.3em;
  box-decoration-break: clone;   /* no Safari (sem o prefixo) o marca-texto, de cor única, fica igual */
}

/* Seletor: seis atalhos que levam ao formulário com a opção já marcada */

.pz-picker {
  display: grid;
  gap: var(--s-16);
  width: 100%;
  padding: var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(26 43 44 / 0.06);
}

.pz-picker__title {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.4;
}

.pz-picker__title span {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.55;
}

.pz-picker__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
}

.pz-picker__item {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  height: 100%;
  min-height: 52px;
  padding: var(--s-8) var(--s-12);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-alt);
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-picker__item .pz-icon {
  color: var(--primary);
}

.pz-picker__item .pz-icon:last-child {
  display: none;
  margin-left: auto;
  transition: transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .pz-picker__item:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
  }

  .pz-picker__item:hover .pz-icon:last-child {
    transform: translateX(3px);
  }
}

@media (min-width: 640px) {
  .pz-picker {
    padding: var(--s-24);
  }
}

/* O número de colunas segue a largura do próprio seletor (antes por consulta de contêiner, que o validador do W3C
   não reconhece). Medido em 1º/11/2026: até 767 px de tela o seletor tem a tela menos 64 px; de 768 a 1023, a tela
   menos 96; a partir de 1024, (tela − 128) ÷ 2, até 640 px. Seletor com menos de 400 px: tela até 463 px;
   seletor com 600 px ou mais: tela de 664 a 1023 px ou a partir de 1328 px. */

@media (max-width: 463px) {
  .pz-picker__item {
    flex-direction: column;
    justify-content: center;
    gap: var(--s-4);
    min-height: 72px;
    padding: var(--s-12) var(--s-4);
    font-size: 0.9375rem;
    text-align: center;
  }
}

@media (min-width: 464px) {
  .pz-picker__item {
    padding-inline: var(--s-16);
  }

  .pz-picker__item .pz-icon:last-child {
    display: block;
  }
}

@media (min-width: 664px) and (max-width: 1023px), (min-width: 1328px) {
  .pz-picker__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-12);
  }
}

/* WhatsApp e garantias, abaixo do seletor */

.pz-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-16) var(--s-24);
  width: 100%;
}

.pz-hero__checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-24);
  font-weight: 500;
  line-height: 1.4;
}

.pz-hero__checks li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
}

.pz-hero__checks .pz-icon {
  color: var(--primary);
}

@media (max-width: 639px) {
  .pz-hero__foot .pz-button {
    width: 100%;
  }
}

/* Imagem em moldura de arco, com um cartão escuro inclinado atrás dela */

.pz-hero__figure {
  position: relative;
}

.pz-hero__backcard,
.pz-spin {
  display: none;
}

.pz-hero__arch {
  border: 8px solid var(--surface);
  border-radius: 120px 120px var(--r-panel) var(--r-panel);
  box-shadow: 0 8px 24px rgb(26 43 44 / 0.06);
}

/* Os dois cards de apoio só aparecem quando flutuam sobre a imagem (a partir de 1280px) */

@media (max-width: 1279px) {
  .pz-hero .pz-float {
    display: none;
  }
}

@media (min-width: 1024px) {
  .pz-hero {
    padding-top: var(--s-64);
  }

  .pz-hero__dots {
    display: block;
  }

  .pz-hero .pz-container {
    padding-bottom: var(--s-64);
  }

  .pz-hero__figure {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .pz-hero__arch {
    flex: 1;
    min-height: 520px;
    border-radius: 160px 160px var(--r-panel) var(--r-panel);
    aspect-ratio: auto;
  }

  .pz-hero__backcard {
    display: block;
    position: absolute;
    inset: 40px -20px -18px 32px;
    border-radius: 160px 160px 40px 40px;
    background: var(--surface-dark);
    transform: rotate(5deg);
  }

  /* Selo que gira: leva ao formulário */
  .pz-spin {
    position: absolute;
    bottom: 96px;
    left: -52px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: var(--surface-dark);
    box-shadow: 0 16px 48px rgb(26 43 44 / 0.14);
    text-decoration: none;
  }

  .pz-spin__ring {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    fill: var(--focus-inverse);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }

  .pz-spin__core {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text);
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  .pz-spin:hover .pz-spin__core {
    background: var(--surface);
  }
}

@media (min-width: 1280px) {
  .pz-hero__arch {
    min-height: 620px;
  }
}

/* Faixa em movimento na base do hero */

.pz-marquee {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--s-32);
  overflow: hidden;
  padding-block: 14px;
  background: var(--primary);
  color: var(--text-inverse);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.pz-marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-around;
  gap: var(--s-32);
  min-width: 100%;
}

.pz-marquee__track li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  white-space: nowrap;
}

.pz-marquee .pz-icon {
  color: var(--focus-inverse);
}

/* Cotação: segunda seção da página, colada ao hero, com o formulário próprio da página */

.pz-quote {
  margin-top: var(--s-24);
  padding-block: var(--s-48);
}

.pz-quote__seals {
  margin-top: var(--s-48);
  padding-top: var(--s-48);
  border-top: 1px solid rgb(111 146 149 / 0.4);
}

.pz-quote__caption {
  margin-bottom: var(--s-32);
  color: var(--text-inverse-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.55;
}

/* Coluna de apoio: o bloco "o que vem na sua cotação" ocupa toda a altura que sobra ao lado do formulário */

.pz-quote__support {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-16);
}

.pz-includes {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-16);
  padding: var(--s-24);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-card);
  background: var(--surface-dark-alt);
}

.pz-includes__title {
  color: var(--text-inverse);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.4;
}

.pz-includes__list {
  display: grid;
  flex: 1;
  gap: var(--s-12);
  grid-auto-rows: 1fr;
}

.pz-includes__list li {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}

.pz-includes__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-control);
  background: var(--surface-dark);
  color: var(--focus-inverse);
}

.pz-includes__list strong {
  display: block;
  color: var(--text-inverse);
  font-weight: 500;
  line-height: 1.4;
}

.pz-includes__list p span {
  display: block;
  color: var(--text-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-attend {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-24);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-card);
  background: var(--surface-dark-alt);
}

.pz-attend .pz-iconbox {
  width: 56px;
  height: 56px;
  background: var(--surface-dark);
  color: var(--focus-inverse);
}

.pz-attend strong {
  display: block;
  color: var(--text-inverse);
  font-weight: 500;
  line-height: 1.4;
}

.pz-attend__text {
  display: block;
  min-width: 0;
}

.pz-attend__text span {
  display: block;
  color: var(--text-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* No celular e no tablet o formulário vem logo depois do título; as garantias ficam abaixo dele */

@media (max-width: 1023px) {
  .pz-quote__aside,
  .pz-quote__aside > .pz-col {
    display: contents;
  }

  .pz-quote__form {
    order: 1;
  }

  .pz-quote__support {
    order: 2;
  }
}

@media (min-width: 768px) {
  .pz-quote {
    padding-block: var(--s-64);
  }
}

@media (min-width: 1024px) {
  .pz-quote {
    padding-block: var(--s-96);
  }

  .pz-quote__seals {
    margin-top: var(--s-64);
  }

  .pz-quote__caption {
    text-align: center;
  }

  .pz-quote__form .pz-form {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .pz-quote__form .pz-form__grid {
    align-content: space-between;
  }
}

/* Grade de cards dentro de uma coluna de split */

.pz-pairs {
  display: grid;
  gap: var(--s-16);
}

@media (min-width: 768px) {
  .pz-pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-24);
  }
}

/* Dentro de uma coluna, a grade ocupa o espaço que sobra e as linhas dividem a altura */

@media (min-width: 1200px) {
  .pz-col > .pz-pairs {
    flex: 1;
    grid-auto-rows: 1fr;
  }
}

/* Guia de decisão */

.pz-guide {
  display: grid;
  gap: var(--s-64);
}

.pz-guide__block {
  display: grid;
  gap: var(--s-24);
}

.pz-guide__intro {
  display: grid;
  gap: var(--s-12);
}

.pz-criterion {
  gap: var(--s-12);
  padding: var(--s-24);
  background: var(--surface-alt);
}

.pz-panel--alt .pz-criterion {
  background: var(--surface);
}

.pz-criterion__top {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  color: var(--primary);
}

.pz-criterion__top .pz-icon {
  margin-top: 2px;
}

.pz-criterion h4 {
  color: var(--text);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.pz-criterion p {
  color: var(--text-muted);
}

/* Blocos de link: operadoras e cidades */

.pz-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-12);
}

.pz-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  height: 100%;
  min-height: 72px;
  padding: var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-icon);
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-tile .pz-icon {
  color: var(--primary);
}

.pz-tile__label {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}

.pz-tile__pin {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-soft);
}

/* Em telas estreitas o círculo sai para o nome da cidade caber em menos linhas */

@media (max-width: 479px) {
  .pz-tile__pin {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .pz-tile:not(.pz-sem-link):hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    transform: translateY(-2px);
  }

  .pz-tile:not(.pz-sem-link):hover .pz-tile__pin {
    background: var(--surface);
  }
}

/* Blocos de link sobre painel escuro */

.pz-on-dark .pz-tile {
  border-color: var(--border-dark);
  background: var(--surface-dark-alt);
  color: var(--text-inverse);
}

.pz-on-dark .pz-tile .pz-icon {
  color: var(--focus-inverse);
}

.pz-on-dark .pz-tile__pin {
  background: var(--surface-dark);
}

@media (hover: hover) and (pointer: fine) {
  .pz-on-dark .pz-tile:not(.pz-sem-link):hover {
    border-color: var(--focus-inverse);
    background: var(--surface-dark);
    color: var(--focus-inverse);
  }

  .pz-on-dark .pz-tile:not(.pz-sem-link):hover .pz-tile__pin {
    background: var(--surface-dark-alt);
  }
}

@media (min-width: 768px) {
  .pz-tiles {
    gap: var(--s-16);
  }

  .pz-tiles--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pz-tile {
    padding: var(--s-16) var(--s-24);
  }
}

@media (min-width: 1200px) {
  .pz-tiles--10 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .pz-tiles--10 .pz-tile {
    padding-inline: var(--s-16);
  }
}

@media (min-width: 1280px) {
  .pz-tiles--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .pz-tiles--6 .pz-tile {
    padding-inline: var(--s-16);
  }
}

/* Perguntas frequentes: o card de ajuda preenche a altura que sobra na coluna */

.pz-helpcard {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-alt);
}

.pz-helpcard__media {
  position: relative;
  flex: 1;
  min-height: 160px;
  aspect-ratio: var(--ratio, 1.6);
}

.pz-helpcard__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--r-card) var(--r-card) 0 0;
  object-fit: cover;
  object-position: center 25%;
  aspect-ratio: auto;
}

.pz-helpcard__body {
  display: grid;
  gap: var(--s-16);
  padding: var(--s-24);
}

.pz-helpcard__body p {
  color: var(--text-muted);
}

.pz-helpcard--dark {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--surface-dark);
}

.pz-helpcard--dark .pz-helpcard__body p {
  color: var(--text-inverse-muted);
}

/* Em tablet o card de ajuda fica deitado: foto ao lado do texto */

@media (min-width: 768px) and (max-width: 1199px) {
  .pz-helpcard {
    flex-direction: row;
  }

  .pz-helpcard__media {
    flex: 0 0 40%;
    aspect-ratio: auto;
  }

  .pz-helpcard__image {
    border-radius: var(--r-card) 0 0 var(--r-card);
  }

  .pz-helpcard__body {
    flex: 1;
    align-content: center;
  }
}

@media (min-width: 1200px) {
  .pz-helpcard__media {
    aspect-ratio: auto;
  }
}

/* Atendimento pelo WhatsApp: lista de quatro pontos e um celular desenhado em CSS com a conversa de exemplo */

.pz-care {
  display: grid;
  gap: var(--s-12);
}

@media (min-width: 1200px) {
  .pz-col > .pz-care {
    flex: 1;
    grid-auto-rows: 1fr;
  }
}

.pz-chat-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-16);
  height: 100%;
  padding: var(--s-32) var(--s-16);
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--surface);
}

.pz-chat-stage::before,
.pz-chat-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.pz-chat-stage::before {
  top: -140px;
  right: -160px;
  width: 440px;
  height: 440px;
  background: var(--primary-soft);
}

.pz-chat-stage::after {
  bottom: -120px;
  left: -120px;
  width: 320px;
  height: 320px;
  border: 1px solid var(--border);
}

.pz-phone {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  overflow: hidden;
  border: 10px solid var(--surface-dark);
  border-radius: 44px;
  background: var(--surface-alt);
  box-shadow: 0 16px 48px rgb(26 43 44 / 0.14);
}

.pz-phone__head {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-24) var(--s-16) var(--s-16);
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.pz-phone__head .pz-iconbox {
  width: 44px;
  height: 44px;
  background: var(--surface-dark-alt);
  color: var(--focus-inverse);
}

.pz-phone__head strong {
  display: block;
  font-weight: 500;
  line-height: 1.3;
}

.pz-phone__head p span {
  display: block;
  color: var(--text-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-chat {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-16) var(--s-12);
}

.pz-chat__msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: var(--r-icon);
  box-shadow: 0 2px 8px rgb(26 43 44 / 0.04);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.pz-chat__msg--corretor {
  align-self: flex-start;
  border-top-left-radius: var(--s-4);
  background: var(--surface);
}

.pz-chat__msg--voce {
  align-self: flex-end;
  border-top-right-radius: var(--s-4);
  background: var(--primary-soft);
}

/* Três pontos de "digitando" */

.pz-chat__typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px;
}

.pz-chat__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}

.pz-phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 var(--s-12) var(--s-16);
  padding: 10px var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-phone__bar .pz-icon {
  color: var(--primary);
}

.pz-chat-note {
  position: relative;
  z-index: 1;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
  text-align: center;
}

@media (min-width: 768px) {
  .pz-chat-stage {
    padding: var(--s-48) var(--s-32);
  }
}

/* Banner de operadoras: doze cards com o espaço do logotipo e o nome da página */

.pz-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-12);
}

.pz-logo-card {
  display: grid;
  gap: var(--s-8);
  align-content: start;
  height: 100%;
  padding: var(--s-12);
  border-radius: var(--r-icon);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-logo-card__image {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}

.pz-logo-card__texto {
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: var(--fs-h4);
  font-weight: 500;
}

.pz-ph.pz-logo-card__image {
  gap: 2px;
  padding: var(--s-8);
  border-width: 1.5px;
  border-radius: var(--r-control);
}

.pz-logo-card__name {
  padding-bottom: var(--s-4);
}

.pz-logos__foot {
  display: grid;
  gap: var(--s-16);
  align-items: center;
  justify-items: start;
  margin-top: var(--s-32);
}

.pz-logos__foot p {
  max-width: 72ch;
  color: var(--primary-soft);
}

@media (hover: hover) and (pointer: fine) {
  .pz-logo-card:hover {
    color: var(--primary);
    box-shadow: 0 12px 32px rgb(26 43 44 / 0.28);
    transform: translateY(-3px);
  }
}

@media (min-width: 600px) {
  .pz-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-16);
  }
}

@media (min-width: 900px) {
  .pz-logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pz-logos__foot {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 1200px) {
  .pz-logos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Chamada final: faixa escura com título à esquerda e duas ações à direita */

.pz-ctaband {
  padding-block: var(--s-48);
}

.pz-ctaband__inner {
  display: grid;
  gap: var(--s-32);
  align-items: center;
}

.pz-ctaband__text {
  display: grid;
  gap: var(--s-16);
}

@media (min-width: 768px) {
  .pz-ctaband {
    padding-block: var(--s-64);
  }
}

@media (min-width: 1200px) {
  .pz-ctaband__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-48);
  }

  .pz-ctaband .pz-actions {
    justify-content: flex-end;
  }

}

/* 7. Mega rodapé e barra fixa do celular ---------------------------------------- */

/* O rodapé repete o desenho do mega menu: bloco da marca, seis colunas de links e linha legal */

.pz-footer {
  margin-top: var(--s-16);
  margin-bottom: var(--panel-inset);
  padding-top: var(--s-64);
  padding-bottom: var(--s-32);
}

/* Bloco da marca e chamada para a cotação */

.pz-footer__top {
  display: grid;
  gap: var(--s-32);
  padding-bottom: var(--s-48);
  border-bottom: 1px solid rgb(111 146 149 / 0.4);
}

.pz-footer__brand {
  display: grid;
  gap: var(--s-16);
  align-content: start;
  justify-items: start;
  max-width: 48ch;
  color: var(--text-inverse-muted);
}

.pz-footer__slogan {
  color: var(--text-inverse);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.4;
}

.pz-footer__cta {
  display: grid;
  gap: var(--s-16);
  align-content: start;
  align-self: center;
  padding: var(--s-24);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-card);
  background: var(--surface-dark-alt);
}

.pz-footer__cta-title {
  color: var(--text-inverse);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.4;
}

.pz-footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
}

/* Colunas de links */

.pz-footer__mega {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-32) var(--s-16);
  padding-block: var(--s-48);
}

.pz-footer__title {
  margin-bottom: var(--s-8);
  color: var(--text-inverse);
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.pz-footer__links a,
.pz-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 6px;
  color: var(--text-inverse-muted);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.pz-footer__links a:hover,
.pz-footer__legal a:hover {
  color: var(--focus-inverse);
  text-decoration: underline;
}

/* Linha legal */

.pz-footer__legal {
  display: grid;
  gap: var(--s-16);
  padding-top: var(--s-32);
  border-top: 1px solid rgb(111 146 149 / 0.4);
  color: var(--text-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-footer__legal p {
  max-width: 90ch;
}

.pz-footer__legal p + p {
  margin-top: var(--s-8);
}

.pz-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-24);
}

.pz-footer__legal a {
  font-size: var(--fs-small);
}

/* Abaixo de 360px as colunas de links empilham */

@media (max-width: 359px) {
  .pz-footer__mega {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .pz-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .pz-footer__mega {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-48) var(--s-24);
  }
}

@media (min-width: 1024px) {
  .pz-footer {
    margin-top: var(--s-24);
    padding-top: var(--s-96);
  }

  .pz-footer__top {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-48);
    padding-bottom: var(--s-64);
  }

  .pz-footer__mega {
    padding-block: var(--s-64);
  }

  .pz-footer__legal {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

/* Seis colunas lado a lado, como no painel do mega menu */

@media (min-width: 1200px) {
  .pz-footer__mega {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-24);
  }
}

/* 8. Celular (até 767px) -----------------------------------------------------
   Títulos, chamadas e blocos curtos ficam centralizados; cards com ícone ao lado,
   listas, perguntas, tabela e formulário continuam alinhados à esquerda, que é como se lê melhor. */

@media (max-width: 767px) {
  /* Faixa superior */
  .pz-topbar__inner {
    justify-content: center;
  }

  /* Botões ocupam a largura toda; menos recuo lateral deixa o texto em uma linha */
  .pz-button {
    padding-inline: var(--s-16);
  }

  /* Cabeçalhos de seção: selo, título e frase de apoio */
  .pz-heading,
  .pz-heading__title,
  .pz-heading--split .pz-heading__support,
  .pz-stack,
  .pz-guide__intro {
    justify-items: center;
    text-align: center;
  }

  .pz-heading__support .pz-button {
    width: 100%;
  }

  /* Hero */
  .pz-hero__content {
    align-items: center;
    text-align: center;
  }

  .pz-hero__foot,
  .pz-hero__checks {
    justify-content: center;
  }

  /* O selo do slogan quebra em duas linhas: o ponto pulsante sai para o texto ficar centralizado */
  .pz-hero .pz-badge {
    text-align: center;
  }

  .pz-pulse {
    display: none;
  }

  /* Selos do bloco de cotação: ícone acima do texto, tudo no centro */
  .pz-quote__caption {
    text-align: center;
  }

  .pz-seal {
    flex-direction: column;
    align-items: center;
    gap: var(--s-8);
    text-align: center;
  }

  /* Composição de imagens do bloco "problema" */
  .pz-collage {
    margin-inline: auto;
  }

  /* Faixas de chamada */
  .pz-band,
  .pz-ctaband__text {
    justify-items: center;
    text-align: center;
  }

  .pz-logos__foot {
    justify-items: stretch;
    text-align: center;
  }

  .pz-helpcard__body {
    text-align: center;
  }

  /* Rodapé: marca e chamada no centro; colunas de links e texto legal à esquerda */
  .pz-footer__brand {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .pz-footer__cta {
    text-align: center;
  }

  .pz-footer__cta-actions {
    flex-direction: column;
  }

  .pz-footer__legal ul {
    gap: 0 var(--s-16);
  }
}

/* 9. Movimento e preferências do usuário ----------------------------------- */

@keyframes pz-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pz-mark {
  from {
    background-size: 0% 0.3em;
  }

  to {
    background-size: 100% 0.3em;
  }
}

@keyframes pz-drift {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes pz-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pz-marquee {
  to {
    transform: translateX(calc(-100% - var(--s-32)));
  }
}

@keyframes pz-ping {
  0% {
    opacity: 0.7;
    transform: scale(0.6);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes pz-typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Entrada do hero, um bloco depois do outro */
  .pz-hero__in {
    animation: pz-fade-up 520ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  .pz-hero__in:nth-child(2) {
    animation-delay: 80ms;
  }

  .pz-hero__in:nth-child(3) {
    animation-delay: 160ms;
  }

  .pz-hero__in:nth-child(4) {
    animation-delay: 240ms;
  }

  .pz-hero__in:nth-child(5) {
    animation-delay: 320ms;
  }

  .pz-mark {
    animation: pz-mark 900ms cubic-bezier(0.2, 0, 0, 1) 500ms both;
  }

  .pz-pulse::after {
    animation: pz-ping 1.8s ease-out infinite;
  }

  .pz-float--drift {
    animation: pz-drift 7s ease-in-out infinite;
  }

  .pz-float--br.pz-float--drift {
    animation-delay: -3.5s;
  }

  .pz-spin__ring {
    animation: pz-spin 18s linear infinite;
  }

  .pz-marquee__track {
    animation: pz-marquee 42s linear infinite;
  }

  .pz-marquee:hover .pz-marquee__track {
    animation-play-state: paused;
  }

  .pz-chat__typing span {
    animation: pz-typing 1.2s ease-in-out infinite;
  }

  .pz-chat__typing span:nth-child(2) {
    animation-delay: 150ms;
  }

  .pz-chat__typing span:nth-child(3) {
    animation-delay: 300ms;
  }

  details[open] .pz-faq-answer {
    animation: pz-fade-up 180ms ease both;
  }

  html {
    scroll-behavior: smooth;
  }
}

@media (hover: hover) and (pointer: fine) {
  .pz-card--linked:hover {
    transform: translateY(-2px);
  }

  .pz-button:hover {
    transform: translateY(-1px);
  }

  .pz-button:active {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .pz-hero__in,
  .pz-mark,
  .pz-float--drift,
  .pz-spin__ring,
  .pz-marquee__track,
  .pz-faq-answer,
  .pz-nav,
  .pz-card--linked,
  .pz-logo-card,
  .pz-button {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1;
  }
}

/* 10. Páginas internas: hub, serviço, blog, artigo e contato -----------------
   Tudo o que as páginas internas usam além dos componentes da home.
   Ordem: trilha, topo da página, resumo, índice, cards de link, blocos do hub,
   blocos do serviço, assinatura, blog, artigo, contato, celular e movimento. */

/* Trilha (breadcrumb): os níveis acima são links; a página atual é texto */

.pz-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-12);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
  letter-spacing: 0;
}

.pz-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  min-width: 0;
  min-height: 44px;
}

/* Separador desenhado em CSS, para o leitor de tela não anunciar um caractere */

.pz-breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: 0.6;
  transform: rotate(45deg);
}

.pz-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  font-weight: 400;
  text-decoration: none;
}

.pz-breadcrumb a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.pz-breadcrumb [aria-current] {
  color: var(--text);
  font-weight: 500;
}

/* Topo das páginas internas: painel claro com trilha, título, resposta direta e um bloco de apoio */

.pz-pagehero {
  position: relative;
  margin-top: var(--s-16);
  padding-top: var(--s-12);
  padding-bottom: var(--s-32);
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(255 255 255 / 0.8) 0%, transparent 60%),
    radial-gradient(45% 60% at 0% 100%, rgb(91 181 162 / 0.3) 0%, transparent 65%),
    var(--primary-soft);
}

.pz-pagehero .pz-breadcrumb {
  margin-bottom: var(--s-12);
}

.pz-pagehero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-24);
}

.pz-pagehero .pz-h1 {
  max-width: 20ch;
}

/* A foto do topo é apoio: ela só aparece quando há duas colunas (a partir de 1200px).
   No celular e no tablet ela sai, para o formulário chegar antes e a foto não ser cortada. */

.pz-pagehero .pz-figure {
  display: none;
}

.pz-pagehero .pz-float {
  display: none;
}

@media (min-width: 768px) {
  .pz-pagehero {
    padding-bottom: var(--s-48);
  }
}

@media (min-width: 1024px) {
  .pz-pagehero {
    padding-top: var(--s-16);
  }

  .pz-pagehero .pz-breadcrumb {
    margin-bottom: var(--s-24);
  }
}

@media (min-width: 1200px) {
  .pz-pagehero .pz-figure {
    display: block;
  }

  .pz-pagehero__content {
    height: 100%;
    justify-content: center;
  }

  /* A foto acompanha a altura do texto: as duas colunas terminam na mesma linha */
  .pz-pagehero__media.pz-media--fill {
    min-height: 420px;
  }
}

@media (min-width: 1280px) {
  .pz-pagehero .pz-float {
    display: flex;
  }
}

/* Topo centralizado (blog) */

.pz-pagehero--center .pz-pagehero__content {
  max-width: 880px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.pz-pagehero--center .pz-h1 {
  max-width: 22ch;
}

/* Resumo em quatro pontos (abre a segunda seção, logo abaixo do topo) */

.pz-summary {
  display: grid;
  gap: var(--s-12);
  margin-top: var(--s-32);
}

.pz-summary__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-16);
  height: 100%;
  padding: var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-icon);
  background: var(--surface);
}

.pz-summary__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-control);
  background: var(--primary-soft);
  color: var(--primary);
}

.pz-summary__label {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-summary__value {
  display: block;
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .pz-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-16);
  }

  .pz-summary__item {
    padding: var(--s-24);
  }
}

@media (min-width: 1200px) {
  .pz-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--s-48);
  }
}

/* Resumo em cartão escuro, ao lado do título (página de serviço) */

.pz-resume {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  height: 100%;
  padding: var(--s-24);
  border-radius: var(--r-card);
  background: var(--surface-dark);
  color: var(--text-inverse);
  box-shadow: 0 8px 24px rgb(26 43 44 / 0.06);
}

.pz-resume__title {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding-bottom: var(--s-8);
  color: var(--focus-inverse);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
}

.pz-resume__list {
  display: grid;
  flex: 1;
  grid-auto-rows: 1fr;
}

.pz-resume__list li {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding-block: var(--s-16);
  border-top: 1px solid rgb(111 146 149 / 0.4);
}

.pz-resume__list li:last-child {
  padding-bottom: 0;
}

.pz-resume__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-control);
  background: var(--surface-dark-alt);
  color: var(--focus-inverse);
}

.pz-resume__label {
  display: block;
  color: var(--text-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-resume__value {
  display: block;
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 1280px) {
  .pz-resume {
    padding: var(--s-32);
  }
}

/* Índice da página: atalhos para as seções, logo depois do formulário */

.pz-toc {
  margin-top: var(--s-32);
}

.pz-toc__inner {
  display: grid;
  gap: var(--s-12);
}

.pz-toc__title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
}

.pz-toc__title .pz-icon {
  color: var(--primary);
}

.pz-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}

.pz-toc__list a,
.pz-catnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-8) var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.pz-toc + .pz-section {
  margin-top: var(--s-32);
}

@media (hover: hover) and (pointer: fine) {
  .pz-toc__list a:hover,
  .pz-catnav a:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
  }
}

@media (min-width: 1024px) {
  .pz-toc__inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-24);
  }

  .pz-toc + .pz-section {
    margin-top: var(--s-48);
  }
}

/* Blog: atalhos de categoria no topo (mesmo desenho dos atalhos do índice) */

.pz-catnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-8);
  width: 100%;
}

.pz-pagehero__content > nav {
  width: 100%;
}

/* No celular os atalhos ficam em uma linha só, que desliza para o lado */

@media (max-width: 767px) {
  .pz-toc__list,
  .pz-catnav {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--content-edge));
    padding-inline: var(--content-edge);
    justify-content: flex-start;
    width: auto;
    overflow-x: auto;
    scroll-padding-inline: var(--content-edge);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  /* Dentro de um painel, a linha de atalhos vai só até a borda do painel */
  .pz-panel .pz-catnav {
    margin-inline: calc(-1 * var(--panel-pad));
    padding-inline: var(--panel-pad);
    scroll-padding-inline: var(--panel-pad);
  }

  .pz-toc__list li,
  .pz-catnav li {
    flex: none;
    scroll-snap-align: start;
  }
}

/* Card de link: o card inteiro leva à página; o título é o link */

.pz-linkcard {
  gap: var(--s-16);
  padding: var(--card-padding);
}

.pz-linkcard__title a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.pz-linkcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}

.pz-linkcard__text {
  color: var(--text-muted);
}

.pz-linkcard__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  margin-top: auto;
  color: var(--primary);
  font-weight: 500;
  line-height: 1.4;
}

/* Número grande no lugar do ícone (1 vida, 2 vidas) */

.pz-linkcard__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--r-icon);
  background: var(--primary);
  color: var(--text-inverse);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .pz-linkcard:hover .pz-linkcard__title a {
    color: var(--primary-hover);
  }
}

/* Variante deitada: ícone à esquerda, texto à direita */

@media (min-width: 640px) {
  .pz-linkcard--row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: var(--s-24);
    row-gap: var(--s-12);
    align-items: start;
  }

  .pz-linkcard--row > .pz-iconbox,
  .pz-linkcard--row > .pz-linkcard__num {
    grid-row: 1 / -1;
  }

  .pz-linkcard--row > :not(.pz-iconbox):not(.pz-linkcard__num) {
    grid-column: 2;
  }
}

/* Cards de link sobre painel escuro */

.pz-on-dark .pz-linkcard {
  border-color: var(--border-dark);
  background: var(--surface-dark-alt);
}

.pz-on-dark .pz-linkcard__title a {
  color: var(--text-inverse);
}

.pz-on-dark .pz-linkcard__text {
  color: var(--text-inverse-muted);
}

.pz-on-dark .pz-linkcard__more {
  color: var(--focus-inverse);
}

.pz-on-dark .pz-linkcard .pz-iconbox {
  background: var(--surface-dark);
  color: var(--focus-inverse);
}

@media (hover: hover) and (pointer: fine) {
  .pz-on-dark .pz-linkcard:hover {
    border-color: var(--focus-inverse);
  }

  .pz-on-dark .pz-linkcard:hover .pz-linkcard__title a {
    color: var(--focus-inverse);
  }
}

/* Faixa com título em cima e blocos de link embaixo */

.pz-band--tiles {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.pz-band--tiles h3 {
  max-width: none;
}

.pz-band__text {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 1024px) {
  .pz-band__text {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s-24);
  }
}

/* Blocos de link em quantidade ímpar: as linhas se ajustam e nunca sobra vazio */

.pz-tiles--5 {
  display: flex;
  flex-wrap: wrap;
}

.pz-tiles--5 > li {
  flex: 1 1 190px;
}

@media (min-width: 1024px) {
  .pz-tiles--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pz-subblock {
  display: grid;
  gap: var(--s-24);
  margin-top: var(--s-48);
}

/* Tabela de três colunas */

.pz-table--3 {
  min-width: 720px;
}

.pz-table--3 thead th {
  min-width: 220px;
}

.pz-table--3 thead th:first-child {
  min-width: 180px;
}

.pz-table strong {
  color: var(--text);
}

.pz-decide__grid {
  margin-top: var(--s-32);
}

.pz-criterion h3 {
  color: var(--text);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Card "continue comparando": lista de atalhos que divide a altura do card */

.pz-morelinks {
  gap: var(--s-16);
  padding: var(--s-24);
}

.pz-morelinks__list {
  display: grid;
  flex: 1;
  gap: var(--s-12);
  grid-auto-rows: 1fr;
}

.pz-morelinks__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  height: 100%;
  min-height: 60px;
  padding: var(--s-12) var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-alt);
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.pz-morelinks__item span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
}

.pz-morelinks__item .pz-icon {
  color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
  .pz-morelinks__item:not(.pz-sem-link):hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
  }
}

/* Perguntas frequentes em duas colunas */

@media (min-width: 1024px) {
  .pz-faq--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-24);
    align-items: start;
  }
}

/* Resumo dentro do card de artigo */

.pz-post__excerpt {
  color: var(--text-muted);
}

/* Cobertura: o que entra e o que fica de fora, lado a lado */

.pz-cover {
  gap: var(--s-24);
  padding: var(--card-padding);
}

.pz-cover__head {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}

.pz-cover__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}

.pz-cover--out .pz-cover__mark {
  background: var(--error-soft);
  color: var(--error);
}

.pz-checklist {
  display: grid;
  flex: 1;
  gap: var(--s-12);
  align-content: space-between;
}

.pz-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  color: var(--text-muted);
}

.pz-checklist .pz-icon {
  margin-top: 4px;
  color: var(--success);
}

.pz-cover--out .pz-checklist .pz-icon {
  color: var(--error);
}

.pz-cover__note {
  margin-top: var(--s-24);
}

/* Preço: as dez faixas de idade da ANS e o que mais pesa na mensalidade */

.pz-pricecard {
  gap: var(--s-24);
  padding: var(--card-padding);
  background: var(--surface-alt);
}

.pz-bands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
}

.pz-bands li {
  display: grid;
  gap: 2px;
  padding: var(--s-12) var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  text-align: center;
}

.pz-bands__n {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.pz-bands strong {
  font-weight: 600;
  line-height: 1.3;
}

.pz-bands li:first-child,
.pz-bands li:last-child {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.pz-bands__caption {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-factors {
  display: grid;
  flex: 1;
  gap: var(--s-16);
  grid-auto-rows: 1fr;
}

.pz-factors li {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}

.pz-factors .pz-summary__icon {
  background: var(--surface);
}

.pz-factors strong {
  display: block;
  font-weight: 500;
  line-height: 1.4;
}

.pz-factors span span {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

@media (min-width: 640px) {
  .pz-bands {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .pz-factors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-24);
  }
}

/* Dúvida que pesa na decisão: pergunta, resposta curta e, quando houver, um link */

.pz-doubt {
  gap: var(--s-16);
  padding: var(--card-padding);
  background: var(--surface-alt);
}

.pz-doubt__top {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}

.pz-doubt__top .pz-iconbox {
  width: 48px;
  height: 48px;
  border-radius: var(--r-control);
}

.pz-doubt p {
  color: var(--text-muted);
}

.pz-on-dark .pz-doubt {
  border-color: var(--border-dark);
  background: var(--surface-dark-alt);
}

.pz-on-dark .pz-doubt p {
  color: var(--text-inverse-muted);
}

.pz-on-dark .pz-doubt .pz-iconbox {
  background: var(--surface-dark);
  color: var(--focus-inverse);
}

/* Card escuro de próximo passo, dentro de uma grade clara */

.pz-nextcard {
  gap: var(--s-16);
  padding: var(--card-padding);
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--surface-dark);
}

.pz-nextcard p {
  color: var(--text-inverse-muted);
}

.pz-nextcard .pz-iconbox {
  background: var(--surface-dark-alt);
  color: var(--focus-inverse);
}

.pz-nextcard__list {
  display: grid;
  flex: 1;
  gap: var(--s-12);
  align-content: start;
  color: var(--text-inverse);
  line-height: 1.5;
}

.pz-nextcard__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
}

.pz-nextcard__list .pz-icon {
  margin-top: 2px;
  color: var(--accent);
}

.pz-nextcard__actions {
  display: grid;
  gap: var(--s-12);
  margin-top: auto;
}

/* Tabela sobre painel escuro: o texto de apoio acima dela fica claro */

.pz-on-dark .pz-table-hint {
  color: var(--text-inverse-muted);
}

.pz-on-dark .pz-table-region {
  border-color: var(--surface);
  color: var(--text);
}

.pz-rules__brands {
  display: grid;
  gap: var(--s-16);
  margin-top: var(--s-32);
}

.pz-rules__brands h3 {
  color: var(--text-inverse);
}

/* Assinatura do conteúdo: quem escreveu, data da conferência e fontes oficiais */

.pz-author {
  display: grid;
  gap: var(--s-24);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-alt);
}

.pz-author__who {
  display: flex;
  align-items: flex-start;
  gap: var(--s-16);
}

.pz-author__who > div {
  display: grid;
  gap: var(--s-8);
}

.pz-author__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-inverse);
}

.pz-author__text {
  color: var(--text-muted);
}

.pz-author__date {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.55;
}

.pz-author__date .pz-icon {
  color: var(--primary);
}

.pz-author__label {
  margin-bottom: var(--s-8);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
}

.pz-sources {
  display: grid;
  gap: var(--s-8);
  padding-left: 1.25em;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
  list-style: decimal;
}

.pz-sources a {
  overflow-wrap: anywhere;
}

.pz-author-section {
  margin-top: var(--s-48);
}

@media (min-width: 1024px) {
  .pz-author {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-48);
  }

  .pz-author__sources {
    padding-left: var(--s-48);
    border-left: 1px solid var(--border);
  }
}

/* Blog: destaque com um card grande deitado, três cards em linha e dois cards só com texto.
   A imagem do card grande segue a proporção 4:3 do arquivo; a dos cards em linha, 3:2. */

.pz-featured {
  display: grid;
  gap: var(--s-24);
}

.pz-post--feature .pz-post__image {
  aspect-ratio: 4 / 3;
}

@media (min-width: 640px) {
  .pz-post--row {
    flex-direction: row;
  }

  .pz-post--row .pz-post__image {
    width: 40%;
    aspect-ratio: auto;
  }

  .pz-post--row .pz-ph.pz-post__image {
    border-radius: var(--r-card) 0 0 var(--r-card);
  }
}

@media (min-width: 1024px) {
  .pz-post--feature {
    flex-direction: row;
  }

  .pz-post--feature .pz-post__image {
    width: 50%;
  }

  .pz-post--feature .pz-ph.pz-post__image {
    border-radius: var(--r-card) 0 0 var(--r-card);
  }

  .pz-post--feature .pz-post__body {
    justify-content: center;
    gap: var(--s-24);
    padding: var(--s-48);
  }

  .pz-post--feature .pz-post__more {
    margin-top: 0;
  }
}

/* Blog: card de categoria, com ícone à esquerda */

.pz-catcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-16);
  row-gap: var(--s-4);
  align-content: start;
  align-items: start;
  padding: var(--s-24);
}

.pz-catcard .pz-iconbox {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  border-radius: var(--r-control);
}

.pz-catcard .pz-linkcard__text {
  grid-column: 2;
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Doze cards de categoria: 2, 3 ou 4 por linha, sempre com linhas completas */

@media (min-width: 1024px) {
  .pz-grid.pz-catgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .pz-grid.pz-catgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Recursos sobre painel claro: o card fica branco */

.pz-panel--soft .pz-feature {
  background: var(--surface);
}

/* Recursos sobre painel escuro */

.pz-on-dark .pz-feature {
  border-color: var(--border-dark);
  background: var(--surface-dark-alt);
}

.pz-on-dark .pz-feature > .pz-icon {
  color: var(--focus-inverse);
}

.pz-on-dark .pz-feature p {
  color: var(--text-inverse-muted);
}

/* Artigo: barra de progresso da leitura. A largura vem do main.js (bloco 5); sem JavaScript, a barra não aparece */

.pz-progress {
  display: none;
}

.js .pz-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  display: block;
  width: 100%;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Artigo: cabeçalho escuro com categoria, título, resumo e dados do artigo */

.pz-arthead.pz-panel--vivid::after {
  display: none;
}

/* No artigo o texto ocupa mais largura: a luz fica só no canto de cima, longe dos dados do artigo */

@media (min-width: 1024px) {
  .pz-arthead.pz-panel--vivid {
    background:
      radial-gradient(30% 62% at 100% 0%, rgb(120 214 190 / 0.6) 0%, transparent 68%),
      radial-gradient(40% 62% at 0% 100%, rgb(20 66 70 / 0.9) 0%, transparent 70%),
      linear-gradient(112deg, #174A4F 0%, #215F64 50%, #2A6E72 100%);
  }
}

.pz-arthead__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-24);
  max-width: 920px;
}

.pz-arthead .pz-h1 {
  max-width: 26ch;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.pz-arthead .pz-lead {
  max-width: 62ch;
  font-size: var(--fs-h5);
  line-height: 1.6;
}

a.pz-badge {
  min-height: 44px;
  padding-inline: var(--s-16);
  text-decoration: none;
}

.pz-arthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-24);
  padding-top: var(--s-24);
  border-top: 1px solid rgb(255 255 255 / 0.22);
  width: 100%;
  color: var(--vivid-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
  letter-spacing: 0;
}

.pz-arthead__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
}

.pz-arthead__meta .pz-icon {
  color: var(--vivid-highlight);
}

/* Artigo: texto à esquerda e, à direita, o sumário e a chamada, que acompanham a rolagem */

.pz-article {
  display: grid;
  gap: var(--s-32);
  margin-top: var(--s-32);
}

.pz-article__side {
  display: none;
}

.pz-article__body {
  min-width: 0;
  max-width: 840px;
}

@media (min-width: 1024px) {
  .pz-article {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: var(--s-48);
    align-items: start;
    margin-top: var(--s-48);
  }

  .pz-article__side {
    position: sticky;
    top: calc(var(--header-h) + var(--s-24));
    display: grid;
    gap: var(--s-16);
  }

  .pz-tocdrop {
    display: none;
  }
}

@media (min-width: 1280px) {
  .pz-article {
    grid-template-columns: minmax(0, 840px) 380px;
    justify-content: space-between;
  }
}

/* Sumário na lateral do artigo */

.pz-tocbox {
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-alt);
}

.pz-tocbox__title {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
}

.pz-tocbox__title .pz-icon {
  color: var(--primary);
}

.pz-tocbox__list {
  border-left: 2px solid var(--border);
}

.pz-tocbox__list a {
  display: block;
  margin-left: -2px;
  padding: 6px var(--s-16);
  border-left: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
}

.pz-tocbox__list a:hover {
  color: var(--primary);
}

.pz-tocbox__list a[aria-current] {
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}

/* Em telas baixas a chamada lateral fica mais curta, para caber junto com o sumário */

@media (max-height: 860px) {
  .pz-sidecta ul {
    display: none;
  }
}

/* Índice recolhido, no celular e no tablet */

.pz-tocdrop {
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-alt);
}

.pz-tocdrop summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: 56px;
  padding: var(--s-12) var(--s-16);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.pz-tocdrop summary span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
}

.pz-tocdrop summary .pz-icon {
  color: var(--primary);
  transition: transform 180ms ease;
}

.pz-tocdrop[open] summary > .pz-icon {
  transform: rotate(180deg);
}

.pz-tocdrop ol {
  display: grid;
  padding: 0 var(--s-16) var(--s-16);
  counter-reset: indice;
}

.pz-tocdrop li {
  counter-increment: indice;
}

.pz-tocdrop li a {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  min-height: 44px;
  color: var(--text);
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.pz-tocdrop li a::before {
  content: counter(indice);
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Chamada lateral do artigo: acompanha a leitura no computador */

.pz-sidecta {
  display: grid;
  gap: var(--s-16);
  padding: var(--s-24);
  border-radius: var(--r-card);
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.pz-sidecta__title {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.35;
}

.pz-sidecta ul {
  display: grid;
  gap: var(--s-8);
  color: var(--text-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-sidecta li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8);
}

.pz-sidecta li .pz-icon {
  margin-top: 2px;
  color: var(--accent);
}

.pz-sidecta__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-height: 44px;
  font-size: var(--fs-small);
  line-height: 1.4;
}

.pz-button--tight {
  padding-inline: var(--s-16);
}

/* Texto do artigo */

.pz-prose > * + * {
  margin-top: var(--s-24);
}

.pz-prose > p,
.pz-prose > ul,
.pz-prose > ol {
  color: var(--text-muted);
}

.pz-prose strong {
  color: var(--text);
}

.pz-prose h2 {
  margin-top: var(--s-64);
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.024em;
}

.pz-prose h2 + * {
  margin-top: var(--s-16);
}

.pz-prose > ul:not([class]),
.pz-prose > ol:not([class]) {
  display: grid;
  gap: var(--s-12);
}

.pz-prose > ul:not([class]) li {
  position: relative;
  padding-left: var(--s-32);
}

.pz-prose > ul:not([class]) li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: var(--s-8);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.pz-prose .pz-table {
  min-width: 620px;
}

.pz-prose .pz-table thead th {
  min-width: 160px;
  font-size: 1rem;
}

.pz-prose .pz-table thead th:first-child {
  min-width: 150px;
}

.pz-prose .pz-table-hint {
  margin-bottom: calc(-1 * var(--s-12));
}

@media (min-width: 768px) {
  .pz-prose .pz-table-hint {
    display: none;
  }
}

/* Números do artigo: três fatos em destaque */

.pz-stats {
  display: grid;
  gap: var(--s-12);
}

.pz-stat {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  height: 100%;
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-alt);
}

.pz-stat__value {
  color: var(--primary);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.024em;
}

.pz-stat__label {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* No celular cada número fica em uma linha: o valor à esquerda e a explicação à direita */

@media (max-width: 639px) {
  .pz-stat {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--s-12);
    align-items: center;
    padding: var(--s-16);
  }

  .pz-stat__value {
    font-size: var(--fs-h4);
  }
}

/* Em 359px ou menos a coluna da explicação fica estreita demais para palavras longas
   (“coparticipação”): o valor sobe e a explicação ocupa a largura toda */

@media (max-width: 359px) {
  .pz-stat {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }
}

@media (min-width: 640px) {
  .pz-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-16);
  }
}

/* Comparação em barras, desenhada em CSS */

.pz-bars {
  display: grid;
  gap: var(--s-16);
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.pz-bars__title {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.4;
}

.pz-bars__row {
  display: grid;
  gap: var(--s-8);
}

.pz-bars__label {
  display: flex;
  flex-wrap: wrap;                 /* em 320 px, o número desce para a linha de baixo em vez de vazar do cartão */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4) var(--s-16);
  color: var(--text-muted);
  line-height: 1.4;
}

.pz-bars__label strong {
  flex: none;
  font-size: var(--fs-h5);
  font-weight: 600;
}

.pz-bars__track {
  height: 16px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
}

.pz-bars__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--primary);
}

.pz-bars__row--ref .pz-bars__fill {
  background: var(--accent);
}

.pz-bars figcaption {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Passo a passo numerado, com a linha que liga as etapas */

.pz-howto {
  display: grid;
  counter-reset: passo;
}

.pz-howto li {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding: 0 0 var(--s-24) 60px;
  counter-increment: passo;
}

.pz-howto li::before {
  content: counter(passo);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-inverse);
  font-weight: 600;
  line-height: 1;
}

.pz-howto li::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 19px;
  border-left: 2px dashed var(--border);
}

.pz-howto li:last-child {
  padding-bottom: 0;
}

.pz-howto li:last-child::after {
  display: none;
}

.pz-howto h3 {
  padding-top: 6px;
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.pz-howto p {
  color: var(--text-muted);
}

/* Chamada no meio do artigo */

.pz-inlinecta {
  display: grid;
  gap: var(--s-24);
  align-items: center;
  padding: var(--s-24);
  border-radius: var(--r-card);
  background: var(--primary-soft);
}

.pz-inlinecta__text {
  display: grid;
  gap: var(--s-8);
}

.pz-inlinecta__text p {
  color: var(--text-muted);
}

.pz-inlinecta .pz-button {
  width: 100%;
}

@media (min-width: 768px) {
  .pz-inlinecta {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--s-32);
  }

  .pz-inlinecta .pz-button {
    width: auto;
  }
}

/* Aviso de alerta: fundo escuro, para se destacar no meio do texto */

.pz-callout--alert {
  border-inline-start-color: var(--accent);
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.pz-callout--alert .pz-icon {
  color: var(--accent);
}

.pz-prose > .pz-callout {
  color: var(--text);
}

.pz-prose > .pz-callout--alert {
  color: var(--text-inverse-muted);
}

.pz-callout--alert strong,
.pz-prose > .pz-callout--alert strong {
  color: var(--text-inverse);
}

/* Link nos avisos: o de alerta é escuro (link claro); o comum é claro, mesmo dentro de painel escuro (link verde).
   Antes, o verde sobre o escuro dava 2,73:1 e o claro sobre o claro 1,19:1 (conferência de 1º/11/2026). */
.pz-callout--alert a,
.pz-prose .pz-callout--alert a {
  color: var(--focus-inverse);
}

.pz-on-dark .pz-callout:not(.pz-callout--alert) a {
  color: var(--primary);
}

.pz-prose .pz-faq {
  gap: var(--s-12);
}

/* Fim do artigo: compartilhar e categoria */

.pz-artfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  margin-top: var(--s-48);
  padding-top: var(--s-24);
  border-top: 1px solid var(--border);
}

.pz-artfoot p {
  color: var(--text-muted);
}

.pz-prose > .pz-author {
  margin-top: var(--s-32);
}

.pz-prose > .pz-author {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-24);
}

.pz-prose > .pz-author .pz-author__sources {
  padding-top: var(--s-24);
  padding-left: 0;
  border-top: 1px solid var(--border);
  border-left: 0;
}

/* Contato: atalhos de assunto ao lado do título */

.pz-topics {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  height: 100%;
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(26 43 44 / 0.06);
}

.pz-topics__title {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.4;
}

.pz-topics__title span {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.55;
}

.pz-topics__list {
  display: grid;
  flex: 1;
  gap: var(--s-8);
  grid-auto-rows: 1fr;
}

.pz-topics__list li {
  display: grid;
}

.pz-topics__item {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  min-height: 60px;
  padding: var(--s-8) var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-alt);
  color: var(--text);
  line-height: 1.4;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-topics__item > .pz-icon:first-child {
  color: var(--primary);
}

.pz-topics__item > .pz-icon:last-child {
  margin-left: auto;
  color: var(--primary);
}

.pz-topics__item strong {
  display: block;
  font-weight: 500;
}

.pz-topics__item span span {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.55;
}

@media (hover: hover) and (pointer: fine) {
  .pz-topics__item:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text);
  }
}



/* Campo de mensagem */

.pz-field textarea {
  width: 100%;
  min-height: 148px;
  padding: 12px var(--s-16);
  border: 1px solid var(--border-control);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-field textarea:hover,
.pz-field textarea:focus {
  border-color: var(--primary);
}

.pz-form textarea:focus-visible {
  color: var(--text);
}

/* No formulário de contato o campo de mensagem cresce para as duas colunas terminarem juntas */

@media (min-width: 1024px) {
  .pz-form__grid--grow {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .pz-field--grow {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
  }

  .pz-field--grow textarea {
    height: 100%;
  }
}

/* Coluna de texto centralizada na altura da coluna vizinha */

@media (min-width: 1024px) {
  .pz-col--center {
    justify-content: center;
  }

  /* Grade de quatro cards que ocupa toda a altura da coluna */
  .pz-pairs--fill {
    height: 100%;
    grid-auto-rows: 1fr;
  }
}

/* O último bloco da coluna encosta na base, alinhado com a coluna vizinha */

.pz-col__end {
  margin-top: auto;
}

/* Lista de apoio com link, dentro do bloco escuro */

.pz-includes__list a {
  color: var(--focus-inverse);
}

/* Celular (até 767px): títulos e chamadas no centro; listas e texto de leitura à esquerda */

@media (max-width: 767px) {
  .pz-pagehero__content {
    align-items: center;
    text-align: center;
  }

  .pz-pagehero__content .pz-actions {
    width: 100%;
  }

  .pz-pagehero .pz-hero__checks {
    justify-content: center;
  }

  .pz-band__text,
  .pz-subblock > h3,
  .pz-rules__brands h3 {
    text-align: center;
  }

  .pz-band--tiles {
    text-align: left;
  }

  .pz-band--tiles .pz-band__text {
    justify-items: center;
  }

  .pz-nextcard__actions .pz-button {
    width: 100%;
  }

  /* Cards de categoria do blog: dois por linha, só com ícone e nome */
  .pz-catgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-12);
  }

  .pz-catcard {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-12);
    padding: var(--s-16);
  }

  .pz-catcard .pz-iconbox {
    grid-row: auto;
  }

  .pz-catcard .pz-linkcard__title {
    font-size: 1rem;
    line-height: 1.35;
  }

  .pz-catcard .pz-linkcard__text {
    display: none;
  }

  /* Tabelas de três colunas: colunas mais estreitas, para aparecer mais conteúdo sem deslizar */
  .pz-table--3,
  .pz-prose .pz-table {
    min-width: 560px;
  }

  .pz-table--3 th,
  .pz-table--3 td,
  .pz-prose .pz-table th,
  .pz-prose .pz-table td {
    padding: var(--s-12) var(--s-16);
  }

  .pz-table--3 thead th,
  .pz-prose .pz-table thead th {
    min-width: 190px;
  }

  .pz-table--3 thead th:first-child,
  .pz-prose .pz-table thead th:first-child {
    min-width: 124px;
  }

  /* O botão de envio fica sem a seta, para a chamada da página caber em uma linha */
  .pz-form .pz-button .pz-icon {
    display: none;
  }

  /* Artigo: o título fica à esquerda, que é como se lê um texto longo */
  .pz-arthead .pz-breadcrumb li[aria-current] {
    display: none;
  }

  .pz-artfoot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .pz-author__who {
    flex-direction: column;
  }
}

/* Telas muito estreitas (até 379px): blocos de link e categorias em uma coluna, para o nome inteiro caber */

@media (max-width: 379px) {
  .pz-tiles--6,
  .pz-tiles--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .pz-catgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pz-catcard {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
}

/* Movimento reduzido: a barra de progresso não anima */

@media (prefers-reduced-motion: reduce) {
  .pz-progress {
    display: none;
  }
}

/* Painel vivo ------------------------------------------------------------------
   Fundo em gradiente verde-petróleo com luzes e formas em movimento (só CSS).
   É a base do topo dinâmico das páginas internas e da faixa de chamada final,
   que assim fica com cor diferente da do rodapé. O texto é branco: o tom mais claro
   do fundo sob o texto é o primário (#2E7478), que mantém contraste AA. */

.pz-panel--vivid {
  --vivid-highlight: #B9F0E4;
  --vivid-muted: #E3F5F5;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* No celular o texto ocupa a largura toda: o gradiente clareia de cima para baixo, longe do título */
  background: linear-gradient(172deg, #174A4F 0%, #215F64 55%, #2A6E72 100%);
  color: var(--text-inverse);
}

/* No computador o texto fica à esquerda: o lado direito, atrás do cartão, é o mais vivo */

@media (min-width: 1024px) {
  .pz-panel--vivid {
    background:
      radial-gradient(34% 78% at 100% 6%, rgb(120 214 190 / 0.62) 0%, transparent 66%),
      radial-gradient(40% 62% at 0% 100%, rgb(20 66 70 / 0.9) 0%, transparent 70%),
      linear-gradient(112deg, #174A4F 0%, #215F64 44%, #2A6E72 74%, #3C9483 100%);
  }

  /* Topo com texto no centro: as luzes ficam só nos dois cantos de cima */
  .pz-pagehero--center.pz-panel--vivid {
    background:
      radial-gradient(26% 60% at 100% 0%, rgb(120 214 190 / 0.6) 0%, transparent 70%),
      radial-gradient(26% 60% at 0% 0%, rgb(91 181 162 / 0.4) 0%, transparent 70%),
      linear-gradient(180deg, #194E53 0%, #215F64 60%, #266A6E 100%);
  }

  .pz-pagehero--center.pz-panel--vivid::after {
    display: none;
  }
}

/* Malha de pontos que aparece aos poucos do lado direito */

.pz-panel--vivid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgb(255 255 255 / 0.2) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: linear-gradient(100deg, transparent 38%, #000 100%);
}

/* Luz que se desloca devagar atrás do conteúdo */

.pz-panel--vivid::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -55%;
  z-index: -1;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(168 230 232 / 0.14), transparent);
}

@media (min-width: 1024px) {
  .pz-panel--vivid::after {
    background: radial-gradient(closest-side, rgb(168 230 232 / 0.3), transparent);
  }
}

/* Anéis decorativos, no canto de cima à direita */

.pz-vivid__rings {
  position: absolute;
  top: -180px;
  right: -140px;
  z-index: -1;
  width: 520px;
  aspect-ratio: 1;
  border: 1.5px dashed rgb(255 255 255 / 0.5);
  border-radius: 50%;
}

.pz-vivid__rings::before,
.pz-vivid__rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.pz-vivid__rings::before {
  inset: 70px;
  border: 1px solid rgb(255 255 255 / 0.3);
}

/* O ponto de luz que gira com o anel só aparece em telas largas e fora do topo centralizado,
   para nunca passar por trás do texto */

.pz-vivid__rings::after {
  display: none;
}

@media (min-width: 1200px) {
  .pz-vivid__rings::after {
    top: 50%;
    left: -7px;
    display: block;
    width: 14px;
    height: 14px;
    background: var(--vivid-highlight);
    box-shadow: 0 0 0 6px rgb(185 240 228 / 0.22);
  }

  .pz-pagehero--center .pz-vivid__rings::after {
    display: none;
  }
}

.pz-panel--vivid .pz-hl {
  color: var(--vivid-highlight);
}

.pz-panel--vivid .pz-mark {
  background-image: linear-gradient(rgb(185 240 228 / 0.28), rgb(185 240 228 / 0.28));
}

.pz-panel--vivid .pz-lead,
.pz-panel--vivid .pz-text {
  color: var(--vivid-muted);
}

.pz-panel--vivid .pz-lead strong,
.pz-panel--vivid .pz-text strong {
  color: var(--text-inverse);
}

.pz-panel--vivid .pz-badge {
  border-color: rgb(255 255 255 / 0.32);
  background: rgb(12 48 51 / 0.38);
  color: var(--text-inverse);
}

.pz-panel--vivid .pz-pulse {
  background: var(--vivid-highlight);
}

.pz-panel--vivid .pz-pulse::after {
  border-color: var(--vivid-highlight);
}

.pz-panel--vivid :focus-visible {
  outline-color: var(--focus-inverse);
}

.pz-panel--vivid .pz-breadcrumb ol,
.pz-panel--vivid .pz-breadcrumb a {
  color: var(--vivid-muted);
}

.pz-panel--vivid .pz-breadcrumb a:hover,
.pz-panel--vivid .pz-breadcrumb [aria-current] {
  color: var(--text-inverse);
}

.pz-panel--vivid .pz-hero__checks .pz-icon {
  color: var(--vivid-highlight);
}

/* Botões sobre o painel vivo: o principal é branco; o de apoio, vazado */

.pz-button--light {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--surface);
  color: var(--primary-active);
  box-shadow: 0 10px 24px rgb(10 40 42 / 0.28);
}

.pz-button--light:hover {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--vivid-highlight, #B9F0E4);
  color: var(--secondary);
}

.pz-button--light:active {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--primary-soft);
  color: var(--secondary);
}

.pz-button--ghost {
  border-color: rgb(255 255 255 / 0.6);
  background: rgb(12 48 51 / 0.62);
  color: var(--text-inverse);
}

.pz-button--ghost:hover,
.pz-button--ghost:active {
  border-color: var(--text-inverse);
  background: rgb(12 48 51 / 0.85);
  color: var(--text-inverse);
}

/* Topo dinâmico das páginas internas */

.pz-pagehero.pz-panel--vivid {
  padding-bottom: var(--s-48);
}

.pz-pagehero.pz-panel--vivid .pz-h1 {
  color: var(--text-inverse);
}

/* Resumo em cartão claro sobre o fundo vivo, com um cartão inclinado atrás e um selo flutuando */

.pz-resume-wrap {
  position: relative;
  height: 100%;
}

/* O cartão inclinado de trás só entra quando há folga lateral */

@media (min-width: 1024px) {
  .pz-resume-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-card);
    background: rgb(185 240 228 / 0.28);
    transform: rotate(3.5deg) translate(10px, 6px);
  }
}

.pz-panel--vivid .pz-resume {
  position: relative;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 56px rgb(10 40 42 / 0.36);
}

.pz-panel--vivid .pz-resume__title {
  color: var(--primary);
}

.pz-panel--vivid .pz-resume__list li {
  border-top-color: var(--border);
}

.pz-panel--vivid .pz-resume__icon {
  background: var(--primary-soft);
  color: var(--primary);
}

.pz-panel--vivid .pz-resume__label {
  color: var(--text-muted);
}

.pz-resume__chip {
  display: none;
}

@media (min-width: 1280px) {
  .pz-resume__chip {
    position: absolute;
    top: -22px;
    right: -18px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
    padding: var(--s-8) var(--s-16);
    border-radius: var(--r-pill);
    background: var(--surface-dark);
    color: var(--text-inverse);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.55;
    box-shadow: 0 16px 48px rgb(26 43 44 / 0.14);
  }

  .pz-resume__chip .pz-icon {
    color: var(--accent);
  }
}

/* Topo do contato: texto no centro e três canais em cartões de vidro */

.pz-channels {
  display: grid;
  gap: var(--s-12);
  width: 100%;
  margin-top: var(--s-8);
  text-align: left;
}

.pz-channel {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  height: 100%;
  padding: var(--s-16);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--r-card);
  background: rgb(12 48 51 / 0.42);
  color: var(--text-inverse);
  line-height: 1.4;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  backdrop-filter: blur(6px);
}

.pz-channel__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--r-icon);
  background: var(--surface);
  color: var(--primary);
}

.pz-channel strong {
  display: block;
  font-weight: 600;
}

.pz-channel span span {
  display: block;
  color: var(--vivid-muted);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.55;
}

.pz-channel > .pz-icon {
  margin-left: auto;
  color: var(--vivid-highlight);
}

.pz-channel:hover,
.pz-channel:active {
  border-color: var(--vivid-highlight);
  background: rgb(12 48 51 / 0.62);
  color: var(--text-inverse);
}

@media (hover: hover) and (pointer: fine) {
  .pz-channel:hover {
    transform: translateY(-4px);
  }
}

@media (min-width: 900px) {
  .pz-channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-16);
    margin-top: var(--s-16);
  }

  .pz-channel {
    padding: var(--s-24);
  }
}

.pz-pagehero--center.pz-panel--vivid .pz-pagehero__content {
  max-width: 1000px;
}

.pz-pagehero--center .pz-actions {
  justify-content: center;
}

/* Chamada final: painel vivo, com selo, título e duas ações. Cor diferente da do rodapé. */

@media (min-width: 1200px) {
  .pz-ctaband.pz-panel--vivid {
    background:
      radial-gradient(30% 90% at 100% 50%, rgb(120 214 190 / 0.55) 0%, transparent 68%),
      radial-gradient(30% 80% at 0% 0%, rgb(20 66 70 / 0.85) 0%, transparent 70%),
      linear-gradient(110deg, #174A4F 0%, #215F64 48%, #2A6E72 78%, #3C9483 100%);
  }
}

.pz-ctaband.pz-panel--vivid::after {
  right: -6%;
  bottom: -120%;
  width: 46%;
}

.pz-ctaband__rings {
  position: absolute;
  top: 50%;
  right: -90px;
  z-index: -1;
  width: 360px;
  aspect-ratio: 1;
  border: 1px dashed rgb(255 255 255 / 0.34);
  border-radius: 50%;
  transform: translateY(-50%);
}

.pz-ctaband__rings::before {
  content: "";
  position: absolute;
  inset: 54px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
}

.pz-ctaband .pz-badge {
  justify-self: start;
}

/* Cobertura: o que entra ganha destaque (cartão maior, colorido, com os termos em negrito) */

.pz-covergrid {
  display: grid;
  gap: var(--s-24);
  align-items: stretch;
}

.pz-cover--in {
  border: 2px solid var(--success);
  background: linear-gradient(180deg, var(--success-soft) 0%, var(--surface) 70%);
  box-shadow: 0 8px 24px rgb(26 43 44 / 0.06);
}

.pz-cover--in .pz-cover__mark {
  background: var(--success);
  color: var(--text-inverse);
}

.pz-cover__tag {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: var(--s-4) var(--s-12);
  border-radius: var(--r-pill);
  background: var(--success);
  color: var(--text-inverse);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.55;
  white-space: nowrap;
}

.pz-cover--in .pz-checklist {
  gap: var(--s-8);
}

.pz-cover--in .pz-checklist li {
  align-items: center;
  padding: var(--s-12) var(--s-16);
  border: 1px solid rgb(23 101 58 / 0.18);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text-muted);
}

.pz-cover--in .pz-checklist strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.4;
}

.pz-cover--in .pz-checklist .pz-icon {
  margin-top: 0;
  padding: 4px;
  border-radius: 50%;
  background: var(--success-soft);
  box-sizing: content-box;
}

.pz-cover--out {
  background: var(--surface);
}

.pz-cover--out .pz-checklist strong {
  color: var(--text);
  font-weight: 500;
}

@media (min-width: 1024px) {
  .pz-covergrid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* Artigo: a resposta em uma frase, em cartão escuro */

.pz-answer {
  display: grid;
  gap: var(--s-12);
  padding: var(--s-24);
  border-radius: var(--r-card);
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.pz-answer__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pz-answer__text {
  color: var(--text-inverse);
  font-size: var(--fs-h5);
  line-height: 1.6;
}

.pz-prose .pz-answer__text strong {
  color: var(--focus-inverse);
}

/* Artigo: o essencial em quatro pontos */

.pz-keypoints {
  display: grid;
  gap: var(--s-16);
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-alt);
}

.pz-keypoints__title,
.pz-prose .pz-keypoints__title {
  margin-top: 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.019em;
}

.pz-prose .pz-keypoints__title + * {
  margin-top: 0;
}

.pz-keypoints ul {
  display: grid;
  gap: var(--s-12);
}

.pz-keypoints li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  color: var(--text-muted);
}

.pz-keypoints li .pz-icon {
  flex: none;
  margin-top: 3px;
  padding: 3px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-inverse);
  box-sizing: content-box;
}

.pz-keypoints__note {
  padding-top: var(--s-16);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

@media (min-width: 768px) {
  .pz-answer,
  .pz-keypoints {
    padding: var(--s-32);
  }
}

/* Artigo: resposta curta logo abaixo de cada título de seção */

.pz-prose > .pz-capsule {
  padding: var(--s-16) var(--s-24);
  border-inline-start: 4px solid var(--accent);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--surface-alt);
  color: var(--text);
  font-weight: 500;
  line-height: 1.65;
}

/* Artigo: citação da norma, com a fonte */

.pz-cite {
  display: grid;
  gap: var(--s-12);
  padding: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.pz-cite blockquote {
  position: relative;
  padding-left: var(--s-48);
  color: var(--text);
  font-size: var(--fs-h5);
  line-height: 1.6;
}

.pz-cite blockquote::before {
  content: "“";
  position: absolute;
  top: -0.18em;
  left: 0;
  color: var(--accent);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
}

.pz-cite figcaption {
  padding-left: var(--s-48);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Artigo: cards de apoio em grade (quem entra, o que pesa) */

.pz-factorgrid {
  display: grid;
  gap: var(--s-12);
}

.pz-factor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-16);
  row-gap: var(--s-4);
  align-content: start;
  height: 100%;
  padding: var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-icon);
  background: var(--surface);
}

.pz-factor__icon {
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: var(--r-control);
  background: var(--primary-soft);
  color: var(--primary);
}

.pz-factor h3 {
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.pz-factor p {
  grid-column: 2;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

@media (min-width: 640px) {
  .pz-factorgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-16);
  }

  .pz-factor {
    padding: var(--s-24);
  }
}

/* Artigo: "Leia também", um guia do mesmo tema no meio do texto */

.pz-readalso {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-16) var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-readalso__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}

.pz-readalso__label {
  display: block;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pz-readalso a {
  color: var(--text);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.pz-readalso a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}

.pz-readalso > .pz-icon {
  margin-left: auto;
  color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
  .pz-readalso:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 32px rgb(26 43 44 / 0.10);
  }

  .pz-readalso:hover a {
    color: var(--primary-hover);
  }
}

/* Artigo: imagem dentro do texto, com legenda */

.pz-artfigure {
  display: grid;
  gap: var(--s-12);
}

.pz-artfigure .pz-ph,
.pz-artfigure img {
  width: 100%;
  border-radius: var(--r-card);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.pz-artfigure figcaption {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-artfigure figcaption .pz-icon {
  flex: none;
  margin-top: 2px;
  color: var(--primary);
}

/* Artigo: chamada no meio do texto sobre o painel vivo */

/* Chamada no meio das páginas por dados (p_dados.py): fecha a seção central, com respiro acima */
.pz-inlinecta--meio {
  margin-top: var(--s-48);
}

.pz-inlinecta.pz-panel--vivid {
  margin-inline: 0;
  padding-block: var(--s-24);
  background: linear-gradient(120deg, #174A4F 0%, #215F64 60%, #2A6E72 100%);
}

.pz-inlinecta.pz-panel--vivid::after {
  display: none;
}

.pz-inlinecta.pz-panel--vivid .pz-inlinecta__text p {
  color: var(--vivid-muted);
}

.pz-inlinecta.pz-panel--vivid .pz-inlinecta__text strong,
.pz-prose .pz-inlinecta.pz-panel--vivid strong {
  color: var(--text-inverse);
}

.pz-inlinecta__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-icon);
  background: rgb(12 48 51 / 0.42);
  color: var(--vivid-highlight);
}

/* Dentro do artigo, a chamada fica em uma linha só quando a coluna de texto é larga o bastante */

@media (min-width: 768px) {
  .pz-inlinecta.pz-panel--vivid {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--s-32);
  }

  .pz-inlinecta.pz-panel--vivid .pz-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .pz-prose .pz-inlinecta {
    grid-template-columns: minmax(0, 1fr);
  }

  .pz-prose .pz-inlinecta .pz-button {
    width: 100%;
  }
}

@media (min-width: 1280px) {
  .pz-inlinecta.pz-panel--vivid {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .pz-inlinecta.pz-panel--vivid .pz-button {
    grid-column: auto;
    width: auto;
  }
}

/* Chamada suave no fim do texto */

.pz-inlinecta--warm {
  border: 1px solid #F1E3C6;
  background: #FDF6E7;
}

/* Celular: topo dinâmico e blocos novos */

@media (max-width: 767px) {
  .pz-vivid__rings {
    top: -140px;
    right: -200px;
    width: 380px;
  }

  .pz-ctaband__rings {
    display: none;
  }

  .pz-ctaband .pz-badge {
    justify-self: center;
  }

  /* No artigo o texto do topo fica à esquerda, como o resto da leitura */
  .pz-arthead .pz-pagehero__content,
  .pz-arthead__text {
    align-items: flex-start;
    text-align: left;
  }

  .pz-cover__tag {
    display: none;
  }

  .pz-cite blockquote,
  .pz-cite figcaption {
    padding-left: var(--s-32);
  }

  .pz-cite blockquote::before {
    font-size: 2.5rem;
  }

  .pz-readalso {
    padding: var(--s-16);
  }

  .pz-inlinecta__icon {
    display: none;
  }
}

/* Movimento do painel vivo: só para quem não pediu menos movimento */

@keyframes pz-glow {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-8%, -8%, 0) scale(1.12);
  }
}

@keyframes pz-rings {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pz-rings-center {
  from {
    transform: translateY(-50%) rotate(0deg);
  }

  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pz-panel--vivid::after {
    animation: pz-glow 14s ease-in-out infinite alternate;
  }

  .pz-vivid__rings {
    animation: pz-rings 70s linear infinite;
  }

  .pz-ctaband__rings {
    animation: pz-rings-center 70s linear infinite;
  }

  .pz-resume__chip {
    animation: pz-drift 7s ease-in-out infinite;
  }
}

/* Topo com foto de fundo ---------------------------------------------------------
   A foto ocupa o lado direito e se funde no verde-azulado do lado esquerdo, onde fica o texto.
   A base escurece de cima para baixo, até o verde-escuro da seção seguinte, para o topo e a
   seção de baixo lerem como uma cor só. Vale para a home, o serviço, o empresarial e o blog.
   Movimento só em CSS: ondas que deslizam, luz que se desloca e aproximação lenta da foto. */

.pz-panel--vivid.pz-photohero {
  background: linear-gradient(180deg, #25696D 0%, #1F5B5F 46%, #1B4548 100%);
}

/* Ondas finas no lado do texto, no lugar da malha de pontos */

.pz-panel--vivid.pz-photohero::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48'%3E%3Cpath d='M0 24c40-16 80-16 120 0s80 16 120 0' fill='none' stroke='%23ffffff' stroke-opacity='.1' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 240px 48px;
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 62%);
}

.pz-panel--vivid.pz-photohero::after {
  right: auto;
  bottom: -60%;
  left: -14%;
  display: block;
  width: 52%;
  height: auto;
  border: 0;
  background: radial-gradient(closest-side, rgb(91 181 162 / 0.3), transparent);
}

/* A foto. No celular e no tablet ela fica bem suave, atrás de tudo, para o texto manter o contraste.
   A partir de 1024px ocupa o lado direito e aparece inteira. */

.pz-photohero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0.1;
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
}

.pz-photohero__media > img,
.pz-photohero__media > .pz-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 72% 22%;
}

/* Enquanto a foto não existe, o espaço reservado só mostra o texto onde a foto aparece inteira */

.pz-photohero__media > .pz-ph {
  border: 0;
}

.pz-photohero__media > .pz-ph > * {
  display: none;
}

@media (min-width: 1024px) {
  .pz-photohero__media {
    inset: 0 0 0 auto;
    width: 58%;
    opacity: 1;
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.06) 10%, rgb(0 0 0 / 0.5) 34%, #000 60%);
  }

  /* Véu sobre a foto: escurece a base e puxa o tom para o verde da marca */
  .pz-photohero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(0deg, rgb(27 69 72 / 0.82) 0%, transparent 38%),
      linear-gradient(90deg, rgb(31 91 95 / 0.3) 0%, transparent 55%);
  }

  .pz-photohero__media > .pz-ph {
    align-items: center;
    justify-content: center;
    padding: var(--s-48) 6% 22% 46%;
  }

  .pz-photohero__media > .pz-ph > * {
    display: revert;
  }
}

/* O texto ocupa a metade esquerda, fora da área da foto */

.pz-photohero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-24);
}

/* Título e texto um pouco menores que os da versão sem foto: o topo fica mais baixo e o formulário chega antes */

.pz-photohero .pz-h1 {
  max-width: 18ch;
  color: var(--text-inverse);
  font-size: clamp(2.125rem, 1.42rem + 2.55vw, 3.25rem);
  line-height: 1.12;
}

.pz-photohero .pz-lead {
  font-size: var(--fs-h5);
  line-height: 1.6;
}

.pz-pagehero--center.pz-photohero .pz-h1 {
  max-width: 22ch;
}

/* Sobre a foto, o texto pequeno da trilha fica branco */

.pz-panel--vivid.pz-photohero .pz-breadcrumb ol,
.pz-panel--vivid.pz-photohero .pz-breadcrumb a {
  color: var(--text-inverse);
}

.pz-photohero__sub {
  color: var(--vivid-highlight);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.019em;
}

@media (min-width: 1024px) {
  .pz-photohero__content {
    gap: 20px;
    width: min(47%, 600px);
    padding-block: var(--s-8) var(--s-8);
  }
}

/* Os dois botões do topo ficam lado a lado na coluna de texto */

.pz-photohero__content .pz-actions .pz-button {
  padding-inline: var(--s-24);
}

/* Cartões que flutuam sobre a foto (só em telas largas) */

.pz-glasschip {
  display: none;
}

@media (min-width: 1280px) {
  .pz-glasschip {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--s-12);
    max-width: 280px;
    padding: var(--s-12) var(--s-16);
    border-radius: var(--r-icon);
    background: rgb(255 255 255 / 0.94);
    color: var(--text);
    line-height: 1.4;
    box-shadow: 0 18px 44px rgb(10 40 42 / 0.34);
  }

  .pz-glasschip__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-inverse);
  }

  .pz-glasschip strong {
    display: block;
    font-weight: 600;
  }

  .pz-glasschip span span {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: 1.5;
  }

  .pz-glasschip--a {
    top: 17%;
    right: 5%;
  }

  .pz-glasschip--b {
    top: 52%;
    left: 51%;
    max-width: 250px;
  }
}

/* A base do topo escurece até o verde-escuro: o topo e a seção de baixo leem como uma cor só */

.pz-pagehero.pz-panel--vivid:not(.pz-photohero) {
  box-shadow: inset 0 -200px 140px -110px rgb(26 52 54 / 0.72);
}

/* Home: a nova hero mantém o seletor e a faixa em movimento */

.pz-hero.pz-photohero {
  padding-top: var(--s-32);
}

.pz-hero.pz-photohero .pz-hero__content .pz-lead {
  color: var(--vivid-muted);
}

.pz-hero.pz-photohero .pz-hero__checks {
  color: var(--text-inverse);
}

.pz-photohero .pz-picker {
  color: var(--text);
  box-shadow: 0 18px 44px rgb(10 40 42 / 0.3);
}

.pz-hero.pz-photohero .pz-marquee {
  border-top: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(12 48 51 / 0.6);
}

@media (min-width: 1024px) {
  .pz-hero.pz-photohero .pz-photohero__content {
    width: min(50%, 640px);
    padding-block: var(--s-16) 0;
  }

  .pz-hero.pz-photohero .pz-photohero__media > .pz-ph {
    padding-bottom: 12%;
  }
}

/* Blog: topo centralizado, com a trilha no centro e duas fotos de guias inclinadas nas laterais */

.pz-pagehero--center .pz-breadcrumb ol {
  justify-content: center;
}

/* No topo centralizado as ondas ocupam a largura toda */

.pz-pagehero--center.pz-panel--vivid.pz-photohero {
  background: linear-gradient(180deg, #25696D 0%, #1F5B5F 46%, #1B4548 100%);
}

.pz-pagehero--center.pz-panel--vivid.pz-photohero::before {
  mask-image: none;
}

.pz-bloghero {
  padding-bottom: var(--s-64);
}

.pz-heroshots {
  display: none;
}

@media (min-width: 1280px) {
  .pz-heroshots {
    display: block;
  }

  .pz-heroshot {
    position: absolute;
    z-index: 0;
    width: clamp(190px, 16vw, 260px);
    padding: 8px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: 0 24px 56px rgb(10 40 42 / 0.4);
  }

  .pz-heroshot .pz-ph,
  .pz-heroshot img {
    width: 100%;
    border-radius: var(--r-icon);
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .pz-heroshot--a {
    top: 34%;
    left: 3.5%;
    transform: rotate(-7deg);
  }

  .pz-heroshot--b {
    top: 20%;
    right: 3.5%;
    transform: rotate(6deg);
  }

  .pz-heroshot__tag {
    position: absolute;
    bottom: -14px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
    padding: var(--s-4) var(--s-12);
    border-radius: var(--r-pill);
    background: var(--surface-dark);
    color: var(--text-inverse);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.55;
    white-space: nowrap;
    transform: translateX(-50%);
  }
}

/* Blog: respostas rápidas (pergunta, resposta em duas linhas e o guia completo) */

.pz-quick {
  gap: var(--s-12);
  padding: var(--s-24);
}

.pz-quick h3 {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.pz-quick__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 44px;
  margin-top: auto;
  font-weight: 500;
  line-height: 1.4;
}

.pz-on-dark .pz-quick {
  border-color: var(--border-dark);
  background: var(--surface-dark-alt);
}

.pz-on-dark .pz-quick p {
  color: var(--text-inverse-muted);
}

/* Movimento do topo com foto */

@keyframes pz-waves {
  to {
    background-position: 240px 0;
  }
}

@keyframes pz-kenburns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.07);
  }
}

@keyframes pz-sway-a {
  from {
    transform: rotate(-7deg) translateY(0);
  }

  to {
    transform: rotate(-5deg) translateY(-10px);
  }
}

@keyframes pz-sway-b {
  from {
    transform: rotate(6deg) translateY(0);
  }

  to {
    transform: rotate(4deg) translateY(-12px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pz-panel--vivid.pz-photohero::before {
    animation: pz-waves 28s linear infinite;
  }

  .pz-photohero__media > img {
    animation: pz-kenburns 26s ease-in-out infinite alternate;
  }

  .pz-glasschip {
    animation: pz-drift 7s ease-in-out infinite;
  }

  .pz-glasschip--b {
    animation-delay: -3s;
  }

  .pz-heroshot--a {
    animation: pz-sway-a 8s ease-in-out infinite alternate;
  }

  .pz-heroshot--b {
    animation: pz-sway-b 9s ease-in-out infinite alternate;
  }
}

/* Seção do formulário em fundo branco ------------------------------------------
   Vale para toda página com formulário (home, plano empresarial, serviço e contato).
   O fundo é branco. O verde-escuro, que antes era o fundo, passa para os textos e os elementos:
   título, selo, ícones, cabeçalho do formulário, botão de WhatsApp e selos. */

.pz-quote--light {
  margin-top: 0;
  background: var(--surface);
  color: var(--surface-dark);
}

.pz-quote--light .pz-h3 {
  color: var(--surface-dark);
}

.pz-quote--light .pz-text {
  color: var(--text-muted);
}

.pz-quote--light .pz-text strong {
  color: var(--surface-dark);
}

/* Selo em verde-escuro */

.pz-badge--dark {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.pz-badge--dark .pz-icon {
  color: var(--focus-inverse);
}

/* Bloco "o que vem na sua cotação" */

.pz-quote--light .pz-includes {
  border-color: var(--border);
  background: var(--surface-alt);
}

.pz-quote--light .pz-includes__title,
.pz-quote--light .pz-includes__list strong {
  color: var(--surface-dark);
}

.pz-quote--light .pz-includes__list p span {
  color: var(--text-muted);
}

.pz-quote--light .pz-includes__icon {
  background: var(--surface-dark);
  color: var(--focus-inverse);
}

.pz-quote--light .pz-includes__list a {
  color: var(--primary);
}

/* Bloco "quem atende o seu pedido" */

.pz-quote--light .pz-attend {
  border-color: var(--border);
  background: var(--surface);
}

.pz-quote--light .pz-attend .pz-iconbox {
  background: var(--surface-dark);
  color: var(--focus-inverse);
}

.pz-quote--light .pz-attend strong {
  color: var(--surface-dark);
}

.pz-quote--light .pz-attend__text span {
  color: var(--text-muted);
}

/* Botão de contorno em verde-escuro (apoio ao botão principal) */

.pz-button--outline-dark {
  border-color: var(--surface-dark);
  background: transparent;
  color: var(--surface-dark);
}

.pz-button--outline-dark:hover,
.pz-button--outline-dark:active {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--surface-dark);
  color: var(--text-inverse);
}

/* Formulário: cartão branco com sombra e cabeçalho em verde-escuro */

.pz-quote--light .pz-form {
  border-color: var(--surface-dark);
  box-shadow: 0 24px 64px rgb(26 43 44 / 0.14);
}

.pz-quote--light .pz-form__intro {
  margin: calc(-1 * var(--s-24)) calc(-1 * var(--s-24)) 0;
  padding: var(--s-24);
  border-bottom: 4px solid var(--accent);
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.pz-quote--light .pz-form__intro p {
  color: var(--text-inverse-muted);
}

@media (min-width: 768px) {
  .pz-quote--light .pz-form__intro {
    margin: calc(-1 * var(--s-32)) calc(-1 * var(--s-32)) 0;
    padding: var(--s-24) var(--s-32);
  }
}

/* Selos de confiança da home, abaixo do formulário */

.pz-quote--light .pz-quote__seals {
  border-top-color: var(--border);
}

.pz-quote--light .pz-quote__caption {
  color: var(--text-muted);
}

.pz-quote--light .pz-seal .pz-icon,
.pz-quote--light .pz-seal strong {
  color: var(--surface-dark);
}

.pz-quote--light .pz-seal span {
  color: var(--text-muted);
}

@media (min-width: 1024px) {
  .pz-quote--light .pz-seal + .pz-seal {
    border-left-color: var(--border);
  }
}

/* Resumo em quatro pontos, no alto da seção (páginas de serviço) */

.pz-quote--light .pz-summary {
  margin-top: 0;
  margin-bottom: var(--s-48);
}

.pz-quote--light .pz-summary__item {
  align-items: center;
  box-shadow: 0 8px 24px rgb(26 43 44 / 0.06);
}

.pz-quote--light .pz-summary__icon {
  background: var(--surface-dark);
  color: var(--focus-inverse);
}

.pz-quote--light .pz-summary__value {
  color: var(--surface-dark);
}

.pz-quote--summary {
  padding-top: var(--s-24);
}

/* No celular os quatro pontos viram um cartão só, com divisórias, para o formulário aparecer mais cedo */

@media (max-width: 767px) {
  .pz-quote--light .pz-summary {
    gap: 0;
    margin-bottom: var(--s-32);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: 0 8px 24px rgb(26 43 44 / 0.06);
  }

  .pz-quote--light .pz-summary__item {
    align-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .pz-quote--light .pz-summary__item + .pz-summary__item {
    border-top: 1px solid var(--border);
  }
}

/* A seção seguinte também é clara: o respiro de baixo é menor, para as duas não ficarem distantes */

.pz-quote--light {
  padding-bottom: var(--s-16);
}

@media (min-width: 1024px) {
  .pz-quote--light {
    padding-block: var(--s-64) var(--s-32);
  }

  .pz-quote--summary {
    padding-top: var(--s-32);
  }

  .pz-quote--light .pz-summary {
    margin-bottom: var(--s-64);
  }
}

/* Sem o resumo, o topo ficou mais baixo: o primeiro cartão flutuante sobe para não cobrir o centro da foto */

@media (min-width: 1280px) {
  .pz-pagehero.pz-photohero .pz-glasschip--a {
    top: 9%;
  }

  .pz-pagehero.pz-photohero .pz-glasschip--b {
    top: 58%;
  }
}

/* Páginas de serviço: sem o resumo, a foto do topo é enquadrada pelo centro da altura */

.pz-pagehero .pz-photohero__media > img,
.pz-pagehero .pz-photohero__media > .pz-ph {
  object-position: 72% 40%;
}

@media (min-width: 1024px) {
  .pz-pagehero .pz-photohero__media > .pz-ph {
    padding: var(--s-96) 6% var(--s-32) 46%;
  }
}

/* Página Sobre: a assinatura com as fontes fica logo abaixo dos três compromissos */

.pz-grid + .pz-author {
  margin-top: var(--s-24);
}

/* Documentos legais, obrigado e 404 (10 de outubro de 2026) -------------------
   Política de privacidade, termos de uso e política de cookies usam o modelo do
   artigo (texto, sumário lateral e sumário recolhido). O obrigado e a 404 usam o
   topo centralizado do contato. */

/* Elementos que o JavaScript mostra ou esconde: o atributo hidden vence o display */

.pz-notfound__path[hidden],
.pz-hubfinder__search[hidden],
.pz-hubfinder__grid > li[hidden],
.pz-hubfinder__search [hidden] {
  display: none;
}

/* Documentos legais: subtítulo dentro de uma seção */

.pz-legal .pz-prose h3 {
  margin-top: var(--s-32);
  font-size: var(--fs-h5);
  line-height: 1.3;
}

/* Etapas em três colunas iguais (obrigado) */

@media (min-width: 768px) {
  .pz-steps--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Obrigado: o resumo do pedido usa os cartões de vidro do contato, sem ser link */

.pz-thanks .pz-channel {
  margin: 0;
}

.pz-thanks .pz-channel:hover,
.pz-thanks .pz-channel:active {
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(12 48 51 / 0.42);
  transform: none;
}

/* Obrigado: prazo de retorno, abaixo das três etapas */

.pz-thanks__deadline {
  display: grid;
  gap: var(--s-16);
  justify-items: center;
  margin-top: var(--s-48);
  padding: var(--s-24);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / 0.06);
  text-align: center;
}

.pz-thanks__deadline p {
  display: grid;
  justify-items: center;
  gap: var(--s-16);
  color: var(--vivid-muted);
}

.pz-thanks__deadline strong {
  color: var(--text-inverse);
}

@media (min-width: 768px) {
  .pz-thanks__deadline {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    align-items: center;
    padding: var(--s-24) var(--s-32);
    text-align: left;
  }

  .pz-thanks__deadline p {
    display: flex;
    align-items: center;
  }
}

/* 404: endereço procurado, no topo */

.pz-notfound__path {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  max-width: 100%;
  padding: var(--s-8) var(--s-16);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--r-control);
  background: rgb(12 48 51 / 0.42);
  color: var(--vivid-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pz-notfound__path code {
  color: var(--text-inverse);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 404: busca por tema (campo de filtro e grupos de cards) */

.pz-hubfinder__search {
  display: grid;
  gap: var(--s-8);
  max-width: 560px;
  margin: 0 auto var(--s-48);
}

.pz-hubfinder__search label {
  font-weight: 500;
}

.pz-hubfinder__field {
  position: relative;
}

.pz-hubfinder__field > .pz-icon {
  position: absolute;
  top: 50%;
  left: var(--s-16);
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.pz-hubfinder__field input {
  width: 100%;
  min-height: 52px;
  padding: 12px var(--s-16) 12px calc(var(--s-16) + 32px);
  border: 1px solid var(--border-control);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-hubfinder__field input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.pz-hubfinder__field input:hover,
.pz-hubfinder__field input:focus {
  border-color: var(--primary);
}

.pz-hubfinder__empty {
  text-align: center;
}

/* Etiqueta da categoria no card de link (busca por tema da 404) */

.pz-linkcard__tag {
  margin-bottom: calc(-1 * var(--s-8));
  color: var(--primary);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Páginas escritas como dados (serviço, subserviço e operadora com segmento, 11 de outubro de 2026) */

/* Bloco de Information Gain: cabeçalho, números, barras e tabela com fonte, empilhados */

.pz-ig {
  display: grid;
  gap: var(--s-32);
}

.pz-ig > .pz-heading {
  margin-bottom: 0;
}

.pz-ig > .pz-table-hint {
  margin-bottom: calc(-1 * var(--s-24));
}

/* Preço com tabela real: a tabela ocupa a largura; abaixo, os fatores e o pedido em dois cartões da mesma altura */

.pz-price__after {
  margin-top: var(--s-32);
}

.pz-price__ask {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.pz-price__ask > p {
  color: var(--text-muted);
}

.pz-price__ask .pz-button {
  align-self: flex-start;
  margin-top: auto;
}

.pz-price__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.pz-price__alert > .pz-icon {
  flex: none;
  margin-top: 2px;
  color: var(--primary);
}

/* No cartão de fatores ao lado do pedido, os fatores ficam em uma coluna e cada linha tem a altura do seu texto */

.pz-price__after .pz-factors {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
}

/* Título principal dinâmico (12/10/2026) ------------------------------------
   Vale para o H1 dos topos em painel vivo (home, serviços, hubs, blog, sobre,
   contato, obrigado e 404). O main.js (bloco 8) separa o título em palavras;
   sem JavaScript, o título aparece pronto, só com o degradê e o traço.
   O estado final é o estilo normal: a animação só descreve a entrada. */

.pz-panel--vivid .pz-h1 {
  text-shadow: 0 2px 28px rgb(10 30 32 / 0.28);
}

/* Destaque: texto em degradê claro e um traço à mão por baixo de cada linha */

.pz-panel--vivid .pz-h1 .pz-hl {
  padding-bottom: 0.12em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 3 92 2.5 198 6.5' fill='none' stroke='%235BB5A2' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.32em;
  text-shadow: none;
}

.pz-panel--vivid .pz-h1 .pz-hl .pz-w {
  background-image: linear-gradient(100deg, #B9F0E4 0%, #FFFFFF 38%, #D6F3F4 50%, #A8E6E8 64%, #B9F0E4 100%);
  background-size: 260% 100%;
  background-position: 0% 50%;
  background-clip: text;
  color: transparent;
}

/* Cada palavra é um bloco em linha para poder subir sozinha */

.pz-h1 .pz-w {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .pz-h1.is-kinetic {
    animation: none;
  }

  .pz-h1.is-kinetic .pz-w {
    animation: pz-word 760ms cubic-bezier(0.2, 0.7, 0, 1) both;
    animation-delay: calc(120ms + var(--i) * 65ms);
  }

  /* O degradê do destaque passa devagar, como um brilho */
  .pz-panel--vivid .pz-h1.is-kinetic .pz-hl .pz-w {
    animation:
      pz-word 760ms cubic-bezier(0.2, 0.7, 0, 1) both,
      pz-shine 7s ease-in-out infinite;
    animation-delay: calc(120ms + var(--i) * 65ms), 1.4s;
  }

  /* O traço se desenha depois que as palavras chegam */
  .pz-panel--vivid .pz-h1.is-kinetic .pz-mark {
    animation: pz-stroke 900ms cubic-bezier(0.2, 0, 0, 1) both;
    animation-delay: calc(260ms + var(--n) * 65ms);
  }
}

@keyframes pz-word {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.5em) rotate(2deg);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes pz-shine {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes pz-stroke {
  from {
    background-size: 0% 0.32em;
  }

  to {
    background-size: 100% 0.32em;
  }
}

/* Card escuro do próximo passo sem botão: os links da lista viram alvos de toque de 44 px (31/10/2026) */

.pz-nextcard__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ==========================================================================
   11. Topo no celular, trilha em cápsula e assistente de cotação (31/10/2026)
   Pedido do Victor: botões do topo de ponta a ponta no celular, selos do topo em
   duas colunas com quatro itens, trilha mais limpa e um assistente flutuante.
   ========================================================================== */

/* Trilha: o início leva o ícone da casa */

.pz-breadcrumb__home a {
  gap: 6px;
}

.pz-breadcrumb__home .pz-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Sobre o painel vivo, a trilha vira uma cápsula de vidro numa linha só: o fundo escuro
   garante o contraste do texto em qualquer ponto da foto */

.pz-photohero .pz-breadcrumb {
  display: flex;
  max-width: 100%;
}

.pz-pagehero--center.pz-photohero .pz-breadcrumb {
  justify-content: center;
}

.pz-photohero .pz-breadcrumb ol {
  flex-wrap: nowrap;
  max-width: 100%;
  gap: 0 var(--s-8);
  padding: 0 var(--s-16) 0 var(--s-12);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-control);
  background: rgb(9 38 40 / 0.42);
  backdrop-filter: blur(8px);
}

.pz-photohero .pz-breadcrumb li {
  gap: var(--s-8);
  min-width: 0;
  white-space: nowrap;
}

.pz-photohero .pz-breadcrumb li:first-child {
  flex: none;
}

.pz-photohero .pz-breadcrumb a {
  opacity: 0.86;
}

.pz-photohero .pz-breadcrumb a:hover {
  opacity: 1;
}

/* A página atual e o nível de cima encolhem com reticências, sem quebrar a linha */

.pz-photohero .pz-breadcrumb li[aria-current],
.pz-photohero .pz-breadcrumb li:not(:first-child) a {
  display: block;
  overflow: hidden;
  line-height: 44px;
  text-overflow: ellipsis;
}

.pz-photohero .pz-breadcrumb li[aria-current] {
  font-weight: 600;
}

/* Em bloco (para as reticências), o separador entra na mesma linha do texto */

.pz-photohero .pz-breadcrumb li[aria-current]::before {
  display: inline-block;
  margin: 0 12px 0 2px;
  vertical-align: 0.1em;
}

@media (max-width: 639px) {
  /* No celular: casa, nível de cima e página atual. Os níveis do meio saem (continuam nos dados estruturados) */
  .pz-photohero .pz-breadcrumb li:not(:first-child):not(:nth-last-child(-n+2)) {
    display: none;
  }

  .pz-breadcrumb__home span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pz-photohero .pz-breadcrumb ol {
    padding-inline: var(--s-12);
  }

  /* Botões do topo: de uma borda à outra do painel, texto centralizado e em linhas equilibradas */
  .pz-photohero__content .pz-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
    width: 100%;
  }

  .pz-photohero__content .pz-actions .pz-button {
    width: 100%;
    min-height: 56px;
    padding-inline: var(--s-16);
    font-size: 0.9688rem;
    text-wrap: balance;
  }
}

/* Selos do topo: quatro itens em duas colunas, dois de cada lado */

.pz-photohero__content .pz-hero__checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--s-12) var(--s-32);
}

.pz-photohero__content .pz-hero__checks li {
  align-items: flex-start;
}

.pz-photohero__content .pz-hero__checks .pz-icon {
  flex: none;
  margin-top: 1px;
}

@media (max-width: 639px) {
  .pz-photohero__content .pz-hero__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-12) var(--s-16);
    width: 100%;
    padding: var(--s-16);
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: var(--r-icon);
    background: rgb(9 38 40 / 0.32);
    font-size: var(--fs-small);
  }

  .pz-photohero__content .pz-hero__checks .pz-icon {
    width: 18px;
    height: 18px;
  }
}

/* Telas de 359px ou menos: “Sem compromisso” não cabe na coluna com o respiro de 16px */
@media (max-width: 359px) {
  .pz-photohero__content .pz-hero__checks {
    gap: var(--s-12);
    padding: var(--s-12);
    font-size: 0.8125rem;
  }

  .pz-photohero__content .pz-hero__checks li {
    gap: 6px;
  }

  .pz-photohero__content .pz-hero__checks .pz-icon {
    width: 16px;
    height: 16px;
  }
}

/* Assistente de cotação (site/assets/js/assistente.js)
   Botão redondo no canto, convite que abre sozinho e painel de conversa.
   Some quando a seção do formulário está na tela. */

.pz-assist {
  position: fixed;
  right: max(var(--s-16), env(safe-area-inset-right));
  bottom: max(var(--s-16), env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-12);
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Com a gaveta do menu aberta (celular e tablet), o assistente sai da frente */
.pz-menu-open .pz-assist {
  display: none;
}

.pz-assist.is-pronto {
  opacity: 1;
  transform: none;
}

.pz-assist.is-oculto {
  opacity: 0;
  transform: translateY(16px);
}

.pz-assist.is-pronto:not(.is-oculto) > * {
  pointer-events: initial;   /* o valor inicial (auto); "auto" o validador de CSS do W3C não reconhece */
}

.pz-assist.is-oculto > * {
  visibility: hidden;
}

/* Ordem na tela: convite ou painel em cima, botão redondo embaixo */

.pz-assist__panel {
  order: 1;
}

.pz-assist__launcher {
  order: 2;
}

/* Botão redondo, com anel e o selo de mensagem nova */

.pz-assist__launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: linear-gradient(145deg, #7FD3C2 0%, var(--accent) 55%, #3E9C89 100%);
  color: var(--secondary);
  box-shadow: 0 12px 32px rgb(10 40 42 / 0.32);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.pz-assist__launcher:hover {
  transform: scale(1.05);
}

.pz-assist__launcher:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.pz-assist__launcher .pz-icon {
  position: relative;
  z-index: 1;
}

.pz-assist__ring {
  position: absolute;
  inset: -10px;
  border: 2px solid rgb(91 181 162 / 0.45);
  border-radius: 50%;
  pointer-events: none;
}

.pz-assist__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #D93B3B;
  color: var(--text-inverse);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.pz-assist__badge[hidden],
.pz-assist.is-aberto .pz-assist__ring {
  display: none;
}

/* Convite: balão branco acima do botão */

.pz-assist__teaser {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-8);
  max-width: 290px;
  margin-right: 4px;
  padding: var(--s-16) var(--s-8) var(--s-16) var(--s-16);
  border-radius: var(--r-icon);
  background: var(--surface);
  color: var(--text);
  line-height: 1.45;
  box-shadow: 0 16px 48px rgb(26 43 44 / 0.14);
}

.pz-assist__teaser[hidden] {
  display: none;
}

.pz-assist__teaser::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  transform: rotate(45deg);
}

.pz-assist__teaser p {
  cursor: pointer;
}

.pz-assist__teaser strong {
  display: block;
  color: var(--primary-active);
  font-weight: 600;
}

.pz-assist__teaser-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -12px -4px 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.pz-assist__teaser-close:hover {
  color: var(--text);
}

/* Painel da conversa */

.pz-assist__panel {
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 120px));
  max-height: min(620px, calc(100dvh - 120px));
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--surface-alt);
  box-shadow: 0 24px 64px rgb(10 40 42 / 0.36);
}

.pz-assist__panel[hidden] {
  display: none;
}

.pz-assist__head {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-16) var(--s-12) var(--s-16) var(--s-16);
  background: linear-gradient(135deg, #25696D 0%, #1F5B5F 50%, #1B4548 100%);
  color: var(--text-inverse);
}

.pz-assist__head > div {
  flex: 1;
  min-width: 0;
}

.pz-assist__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--secondary);
}

.pz-assist__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.pz-assist__head p {
  color: var(--vivid-highlight);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.pz-assist__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: var(--text-inverse);
  cursor: pointer;
}

.pz-assist__close:hover {
  background: rgb(255 255 255 / 0.22);
}

.pz-assist__close:focus-visible,
.pz-assist__chip:focus-visible,
.pz-assist__send:focus-visible,
.pz-assist__teaser-close:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.pz-assist__log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-8);
  min-height: 160px;
  padding: var(--s-16);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pz-assist__msg {
  max-width: 88%;
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-icon);
  font-size: 0.9375rem;
  line-height: 1.5;
  animation: pz-assist-entra 0.25s ease both;
}

.pz-assist__msg--bot {
  align-self: flex-start;
  border-top-left-radius: 6px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgb(26 43 44 / 0.04);
}

.pz-assist__msg--me {
  align-self: flex-end;
  border-top-right-radius: 6px;
  background: var(--primary);
  color: var(--text-inverse);
}

.pz-assist__msg small {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.pz-assist__msg a {
  color: var(--primary);
  text-decoration: underline;
}

/* Três pontos enquanto o assistente digita */

.pz-assist__typing {
  display: inline-flex;
  gap: 5px;
  padding-block: 16px;
}

.pz-assist__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
  animation: pz-assist-ponto 1s ease-in-out infinite;
}

.pz-assist__typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.pz-assist__typing span:nth-child(3) {
  animation-delay: 0.3s;
}

.pz-assist__summary {
  display: grid;
  gap: 6px;
  margin-top: var(--s-8);
  font-size: 0.875rem;
}

.pz-assist__summary li {
  display: grid;
  gap: 1px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.pz-assist__summary span {
  color: var(--text-muted);
}

.pz-assist__summary strong {
  font-weight: 600;
}

/* Respostas: botões em pílula e o campo de texto */

.pz-assist__actions {
  display: grid;
  gap: var(--s-8);
  max-height: 46%;
  padding: var(--s-12) var(--s-16);
  overflow-y: auto;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.pz-assist__actions:empty {
  display: none;
}

.pz-assist__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}

.pz-assist__chip {
  min-height: 44px;
  padding: 10px var(--s-16);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary-active);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-assist__chip:hover {
  background: var(--primary-soft);
}

.pz-assist__chip--main {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--accent);
  color: var(--secondary);
  font-weight: 600;
}

.pz-assist__chip--main:hover {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--accent-hover);
}

.pz-assist__chip--skip {
  justify-self: start;
  border-color: var(--border-control);
  color: var(--text-muted);
}

.pz-assist__input {
  display: flex;
  gap: var(--s-8);
}

.pz-assist__input input,
.pz-assist__input select {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--s-16);
  border: 1.5px solid var(--border-control);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.pz-assist__input input:focus,
.pz-assist__input select:focus {
  border-color: var(--primary);
  outline: 2px solid var(--primary-soft);
}

.pz-assist__input [aria-invalid="true"] {
  border-color: #B42318;
}

.pz-assist__send {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--primary);
  color: var(--text-inverse);
  cursor: pointer;
}

.pz-assist__send:hover {
  background: var(--primary-hover);
}

.pz-assist__error {
  color: #B42318;
  font-size: 0.875rem;
  line-height: 1.4;
}

.pz-assist__error[hidden] {
  display: none;
}

.pz-assist__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--s-8) var(--s-16) var(--s-12);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* No celular: o painel ocupa a largura da tela, acima do botão */

@media (max-width: 639px) {
  .pz-assist {
    right: 12px;
    bottom: 12px;
  }

  .pz-assist__launcher {
    width: 58px;
    height: 58px;
  }

  .pz-assist__teaser {
    max-width: calc(100vw - 40px);
  }

  .pz-assist__panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
  }
}

@keyframes pz-assist-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pz-assist-ponto {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  50% {
    opacity: 0.9;
    transform: translateY(-3px);
  }
}

@keyframes pz-assist-anel {
  0% {
    opacity: 0.7;
    transform: scale(0.9);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pz-assist:not(.is-aberto) .pz-assist__ring {
    animation: pz-assist-anel 2.2s ease-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pz-assist,
  .pz-assist__msg,
  .pz-assist__typing span {
    transition: none;
    animation: none;
  }
}

/* 12. Glossário e mapa do site -------------------------------------------- */

/* Glossário: um cartão por termo, com âncora própria (#termo-...) para ser citado de outras páginas */

.pz-term {
  gap: var(--s-8);
  padding: var(--s-24);
  scroll-margin-top: var(--s-96);
}

.pz-term__name {
  color: var(--text);
}

.pz-term__text {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.pz-term:target {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Mapa do site: um cartão por tema, com a página principal e as de baixo em lista aninhada */

.pz-sitemap__card {
  gap: var(--s-16);
  padding: var(--s-24);
}

.pz-sitemap__title a {
  color: var(--text);
  text-decoration: none;
}

.pz-sitemap__title a:hover,
.pz-sitemap__title a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

.pz-sitemap__list {
  display: grid;
  gap: var(--s-4);
}

.pz-sitemap__list a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--primary);
  text-underline-offset: 3px;
}

.pz-sitemap__list--sub {
  margin-left: var(--s-12);
  padding-left: var(--s-12);
  border-left: 1px solid var(--border);
}

/* Tema com muitas páginas (operadoras de plano de saúde): o cartão ocupa a linha toda e a lista vira colunas */

@media (min-width: 768px) {
  .pz-sitemap__item.pz-sitemap__card--wide {
    grid-column: 1 / -1;
  }

  .pz-sitemap__card--wide .pz-sitemap__card > .pz-sitemap__list,
  .pz-sitemap__card--wide > .pz-sitemap__card > .pz-sitemap__list {
    display: block;
    columns: 2;
    column-gap: var(--s-32);
  }

  .pz-sitemap__card--wide .pz-sitemap__list > li {
    break-inside: avoid;
  }
}

@media (min-width: 1200px) {
  .pz-sitemap__card--wide > .pz-sitemap__card > .pz-sitemap__list {
    columns: 3;
  }
}


/* Página ainda não escrita: o item aparece como texto, sem link (gerador/paginas/links_prontos.py) */
.pz-sem-link {
  cursor: default;
}

/* 13. Envio dos formulários (isca antispam e aviso de envio) ----------------
   A isca fica fora da tela (gente não vê, robô preenche). O aviso aparece
   acima do botão de enviar: erro com o botão do WhatsApp, ou sucesso no
   formulário de contato, que não leva à página de obrigado. */

.pz-form__isca {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pz-form__aviso {
  display: grid;
  gap: var(--s-12);
  padding: var(--s-16);
  border-left: 4px solid var(--error);
  border-radius: var(--r-control);
  background: var(--error-soft);
  color: var(--text);
}

.pz-form__aviso--ok {
  border-left-color: var(--success);
  background: var(--success-soft);
}

.pz-form__aviso p,
.pz-form__aviso ul {
  margin: 0;
}

.pz-form__aviso ul {
  padding-left: 1.2em;
}

.pz-form__aviso .pz-button {
  justify-self: start;
}

/* A regra ".pz-form a" pinta links de verde; o botão do aviso mantém o texto branco */
.pz-form .pz-form__aviso .pz-button--whatsapp {
  color: var(--text-inverse);
}

.pz-field [aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

/* Versões por perfil da página de obrigado (main.js, bloco 6): a escondida nunca aparece, nem quando o
   componente em volta define display para os filhos */
[data-perfis] > [data-perfil][hidden] {
  display: none !important;
}

.pz-form[aria-busy="true"] button[type="submit"] {
  opacity: 0.7;
  cursor: progress;
}


/* 14. Aviso de cookies e preferências (LGPD) --------------------------------
   Barra fixa embaixo da tela: não empurra o conteúdo (sem CLS) e, no celular,
   ocupa pouco mais que os três botões. Os três botões têm o mesmo peso visual
   (aceitar não é mais destacado que recusar). Painel de preferências em <dialog>. */

/* A barra vem no HTML de toda página e só aparece com a classe "tem-aviso-cookies" no <html>, posta pelo <head>
   quando não há escolha válida. Sem JavaScript não há medição, então a barra fica escondida. */
.pz-cookies {
  display: none;
}

.tem-aviso-cookies .pz-cookies {
  display: block;
}

.pz-cookies {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 1200;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(26, 43, 44, 0.18);
}

.pz-cookies__inner {
  display: grid;
  gap: var(--s-16);
  padding: var(--s-16) var(--s-24);
}

.pz-cookies__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
}

.pz-cookies__text strong {
  color: var(--text);
  font-weight: 600;
}

.pz-cookies__text a,
.pz-cookies-prefs a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pz-cookies__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
}

/* Mesmo estilo nos três: contorno verde, fundo branco */
.pz-cookies__btn {
  min-height: 44px;
  padding: 10px var(--s-12);
  border: 1px solid var(--primary);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--primary);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-cookies__btn:hover {
  background: var(--primary-soft);
}

.pz-cookies__btn:focus-visible,
.pz-cookies-prefs__close:focus-visible,
.pz-cookies-prefs__switch:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .pz-cookies__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s-24);
  }

  .pz-cookies__actions {
    grid-template-columns: repeat(3, 150px);
  }
}

/* Enquanto o aviso está na tela, o balão do assistente fica atrás dele */
.tem-aviso-cookies .pz-assist {
  visibility: hidden;
}

/* Painel de preferências */
.pz-cookies-prefs {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(26, 43, 44, 0.3);
}

.pz-cookies-prefs::backdrop {
  background: rgba(26, 43, 44, 0.55);
}

.pz-cookies-prefs__form {
  display: grid;
  gap: var(--s-16);
  padding: var(--s-24);
}

.pz-cookies-prefs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
}

.pz-cookies-prefs__title {
  margin: 0;
  font-size: var(--fs-h5);
  font-weight: 600;
}

.pz-cookies-prefs__close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.pz-cookies-prefs__intro {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.pz-cookies-prefs__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-16);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-alt);
}

.pz-cookies-prefs__name {
  margin: 0;
  font-weight: 600;
}

.pz-cookies-prefs__name span {
  margin-left: var(--s-8);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--success);
}

.pz-cookies-prefs__desc {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Chave liga e desliga, feita só com CSS sobre o checkbox */
.pz-cookies-prefs__switch {
  flex: none;
  position: relative;
  width: 48px;
  height: 28px;
  margin: 0;
  border: 1px solid var(--border-control);
  border-radius: 14px;
  background: var(--disabled-bg);
  appearance: none;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pz-cookies-prefs__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(26, 43, 44, 0.3);
  transition: transform 0.2s ease;
}

.pz-cookies-prefs__switch:checked {
  border-color: transparent;   /* mesma cor do fundo, que aparece por baixo da borda */
  background: var(--primary);
}

.pz-cookies-prefs__switch:checked::after {
  transform: translateX(20px);
}

.pz-cookies-prefs__switch:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 479px) {
  .pz-cookies {
    right: 8px;
    bottom: 8px;
    left: 8px;
  }

  .pz-cookies__inner {
    gap: var(--s-12);
    padding: var(--s-12) var(--s-16);
  }

  .pz-cookies__text {
    font-size: 0.8125rem;
  }

  .pz-cookies__btn {
    padding: 8px 6px;
    font-size: 0.875rem;
  }

  .pz-cookies-prefs .pz-cookies__actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pz-cookies-prefs__switch::after {
    transition: none;
  }
}