/*==============================================================================
  AgendaZ — Portal (namespace .pz-)

  A porta de entrada do domínio. Folha própria, ao lado de `newlanding.css` e
  `landing.startup.css`: as três desenham páginas públicas diferentes, e
  compartilhar seletores entre elas faria um ajuste no portal mexer, sem avisar,
  na apresentação da plataforma.

  A identidade é a oficial do AgendaZ — o azul da marca, a família Inter, os
  mesmos raios e sombras das demais páginas públicas. Nenhuma cor de fora.

  Um único ponto de quebra explícito, em 1024px, onde o mega menu vira gaveta.
  O resto se resolve com `auto-fit` e `clamp()`: pontos de quebra a mais são
  pontos a mais para esquecer de testar.
==============================================================================*/

.pz-page {
    /*--- Marca ---*/
    --pz-marca: #130a78;
    --pz-marca-escura: #0b0649;
    --pz-primaria: #4a6cf7;
    --pz-primaria-forte: #3355e8;

    /*--- Tons de apoio, um por módulo ---*/
    --pz-azul: #3b82f6;
    --pz-indigo: #6366f1;
    --pz-roxo: #7c3aed;
    --pz-verde: #22c55e;
    --pz-turquesa: #14b8a6;
    --pz-ambar: #f59e0b;

    /*--- Superfícies ---*/
    --pz-fundo: #ffffff;

    /* A superfície dos cartões e painéis. Token, e não `#fff` repetido oito
       vezes: é um lugar só para mudar, e é o que permite a esta folha
       acompanhar um tema escuro no dia em que ele chegar ao portal. Cor
       literal espalhada pela folha ignora tema por definição. */
    --pz-superficie: #ffffff;

    --pz-suave: #f5f7fe;
    --pz-borda: rgba(11, 17, 32, 0.09);

    /*--- Texto ---*/
    --pz-texto: #0b1120;
    --pz-texto-fraco: #5b6884;
    --pz-claro: rgba(255, 255, 255, 0.88);
    --pz-claro-fraco: rgba(255, 255, 255, 0.64);

    /*--- Medidas ---*/
    --pz-raio: 14px;
    --pz-raio-g: 22px;
    --pz-shell: 1240px;
    --pz-topo-altura: 78px;

    --pz-sombra-sm: 0 4px 16px -6px rgba(11, 17, 32, 0.14);
    --pz-sombra: 0 20px 45px -26px rgba(11, 17, 32, 0.3);
    --pz-sombra-g: 0 44px 90px -44px rgba(11, 17, 32, 0.42);

    --pz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    margin: 0;
    background: var(--pz-fundo);
    color: var(--pz-texto);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* O reset usa `:where()` para não somar especificidade. Sem isso, uma regra
   de seção escrita com uma classe só nunca conseguiria vencer o reset — que foi
   exatamente o defeito que levou dias de caça na folha da landing. */
.pz-page :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
    margin: 0;
    padding: 0;
}

.pz-page :where(ul, ol) {
    list-style: none;
}

.pz-page :where(img, svg) {
    max-width: 100%;
    display: block;
}

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

/* `hidden` tem de vencer qualquer `display` escrito aqui: o atributo vale
   `display: none` pela folha do navegador, que perde para qualquer regra de
   autor — e vários blocos desta folha são `grid` ou `flex`. */
.pz-page [hidden] {
    display: none !important;
}

.pz-page.pz-travado {
    /* Enquanto a gaveta está aberta, a página por baixo não rola. */
    overflow: hidden;
}

.pz-shell {
    width: 100%;
    max-width: var(--pz-shell);
    margin-inline: auto;

    /* O respiro lateral mora aqui e em nenhum outro lugar. Repetido por seção,
       vira um valor diferente em cada uma na primeira vez que alguém mexe. */
    padding-inline: clamp(18px, 5vw, 40px);
}

/* O atalho do teclado. Fora da tela até receber foco. */
.pz-pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--pz-marca);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 10px 0;
}

.pz-pular:focus {
    left: 0;
}

/*==============================================================================
  Peças comuns
==============================================================================*/

.pz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 24px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--pz-ease) 180ms, box-shadow var(--pz-ease) 180ms, background 180ms, color 180ms;
}

.pz-btn:hover {
    transform: translateY(-2px);
}

.pz-btn:focus-visible {
    outline: 3px solid rgba(74, 108, 247, 0.45);
    outline-offset: 3px;
}

.pz-btn--grande {
    padding: 16px 32px;
    font-size: 1.02rem;
}

.pz-btn--primario {
    background: var(--pz-primaria);
    color: #fff;
    box-shadow: 0 16px 34px -18px rgba(74, 108, 247, 0.85);
}

.pz-btn--primario:hover {
    background: var(--pz-primaria-forte);
    color: #fff;
}

.pz-btn--claro {
    background: var(--pz-superficie);
    color: var(--pz-marca-escura);
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.55);
}

.pz-btn--claro:hover {
    color: var(--pz-marca-escura);
}

.pz-btn--vazado {
    background: transparent;
    color: inherit;
    border: 1.6px solid currentColor;
}

.pz-btn--vazado:hover {
    color: inherit;
}

.pz-selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pz-chapeu {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(74, 108, 247, 0.12);
    color: var(--pz-primaria);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pz-chapeu--azul { background: rgba(59, 130, 246, 0.13); color: #1d4ed8; }
.pz-chapeu--indigo { background: rgba(99, 102, 241, 0.13); color: #4338ca; }
.pz-chapeu--roxo { background: rgba(124, 58, 237, 0.13); color: #6d28d9; }
.pz-chapeu--verde { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.pz-chapeu--turquesa { background: rgba(20, 184, 166, 0.14); color: #0f766e; }
.pz-chapeu--ambar { background: rgba(245, 158, 11, 0.16); color: #b45309; }

.pz-icone {
    width: 22px;
    height: 22px;
}

/* O chip do ícone.

   `display: grid` com `place-items: center` é o único jeito de o SVG ficar no
   centro exato do quadrado em qualquer tamanho. Centralizar por `padding`
   deixa o ícone um pixel fora sempre que a caixa for ímpar — foi o defeito que
   apareceu em todas as páginas de solução. */
.pz-sub__chip,
.pz-produto__chip,
.pz-beneficio__chip,
.pz-aba__chip {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(74, 108, 247, 0.11);
    color: var(--pz-primaria);
}

.pz-cabeca {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(32px, 5vw, 54px);
}

.pz-cabeca h2 {
    font-size: clamp(1.7rem, 3.8vw, 2.6rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.03em;
}

.pz-cabeca p {
    color: var(--pz-texto-fraco);
    font-size: clamp(0.98rem, 1.8vw, 1.1rem);
    max-width: 62ch;
}

.pz-cabeca__chapeu {
    color: var(--pz-primaria);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pz-cabeca--claro h2 { color: #fff; }
.pz-cabeca--claro p { color: var(--pz-claro); }
.pz-cabeca--claro .pz-cabeca__chapeu { color: #a5b8ff; }

.pz-secao {
    padding-block: clamp(52px, 8vw, 104px);
}

/*==============================================================================
  Cabeçalho e mega menu
==============================================================================*/

.pz-topo {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--pz-topo-altura);
    display: flex;
    align-items: center;
    transition: background 220ms var(--pz-ease), box-shadow 220ms var(--pz-ease);
}

/* Nasce transparente sobre o herói escuro e ganha fundo ao rolar. */
.pz-topo.is-rolado {
    background: rgba(11, 6, 73, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.8);
}

.pz-topo__barra {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.pz-topo__marca {
    display: flex;
    flex: none;
    text-decoration: none;
}

.pz-topo__marca .az-logo {
    --az-logo-altura: 36px;
}

/* A marca branca: o cabeçalho vive sobre o herói escuro. `.az-logo--onbrand`
   não é usado aqui porque o mesmo cabeçalho precisa continuar funcionando se
   um dia o herói for claro — mas, como hoje ele é escuro em toda a extensão do
   topo, a troca é feita aqui e num lugar só. */
.pz-topo__marca .az-logo__img--clara { visibility: hidden; }
.pz-topo__marca .az-logo__img--escura { visibility: visible; }

.pz-nav {
    flex: 1;
    min-width: 0;
}

.pz-nav__lista {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pz-nav__item {
    position: relative;
}

.pz-nav__gatilho {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 160ms, color 160ms;
}

.pz-nav__gatilho:hover,
.pz-nav__item.is-aberto .pz-nav__gatilho {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.pz-nav__seta {
    width: 14px;
    height: 14px;
    transition: transform 200ms var(--pz-ease);
}

.pz-nav__item.is-aberto .pz-nav__seta {
    transform: rotate(180deg);
}

/*------------------------------------------------------------------------------
  O painel do mega menu
------------------------------------------------------------------------------*/

.pz-painel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;

    /* A largura acompanha o conteúdo até um teto, e nunca ultrapassa a janela:
       um painel de 720px numa tela de 1024 encostaria nas duas bordas. */
    width: max-content;
    max-width: min(880px, calc(100vw - 32px));

    padding: 8px;
    border-radius: var(--pz-raio-g);
    background: var(--pz-superficie);
    border: 1px solid var(--pz-borda);
    box-shadow: var(--pz-sombra-g);
    animation: pz-descer 200ms var(--pz-ease);
}

/* Os dois últimos itens abrem alinhados à direita: centralizado, o painel do
   último sairia pela borda da janela. */
.pz-nav__item:nth-last-child(-n+2) .pz-painel {
    left: auto;
    right: 0;
    transform: none;
}

/* A ponte invisível entre o botão e o painel.

   Sem ela, o ponteiro atravessa um vão de 10px onde não há elemento nenhum, o
   `mouseleave` dispara e o painel some antes de a pessoa chegar ao primeiro
   item. É o defeito mais comum de mega menu. */
.pz-painel::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

@keyframes pz-descer {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; }
}

.pz-nav__item:nth-last-child(-n+2) .pz-painel {
    animation-name: pz-descer-direita;
}

@keyframes pz-descer-direita {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.pz-painel__interior {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
    align-items: stretch;
}

/* Painel sem cartão de destaque não deixa uma coluna vazia sobrando. */
.pz-painel__interior:not(:has(.pz-destaque)) {
    grid-template-columns: minmax(0, 1fr);
}

.pz-painel__colunas {
    display: grid;
    gap: 6px 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    padding: 12px;
}

.pz-coluna__titulo {
    margin-bottom: 8px !important;
    color: var(--pz-texto-fraco);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pz-coluna ul {
    display: grid;
    gap: 2px;
}

.pz-sub {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    color: var(--pz-texto);
    text-decoration: none;
    transition: background 150ms;
}

.pz-sub:hover {
    background: var(--pz-suave);
    color: var(--pz-texto);
}

.pz-sub__chip {
    width: 38px;
    height: 38px;
}

.pz-sub__chip .pz-icone {
    width: 19px;
    height: 19px;
}

.pz-sub__texto strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
}

.pz-sub__texto em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 0.82rem;
    color: var(--pz-texto-fraco);
}

.pz-destaque {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(160deg, #1b2a76, var(--pz-marca-escura));
    color: #fff;
    text-decoration: none;
    transition: transform 180ms var(--pz-ease);
}

.pz-destaque:hover {
    transform: translateY(-2px);
    color: #fff;
}

.pz-destaque__selo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a5b8ff;
}

.pz-destaque strong {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.pz-destaque p {
    color: var(--pz-claro-fraco);
    font-size: 0.86rem;
}

.pz-destaque__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 0.87rem;
    font-weight: 700;
}

.pz-destaque__link svg {
    width: 16px;
    height: 16px;
}

/*------------------------------------------------------------------------------
  Ações do cabeçalho
------------------------------------------------------------------------------*/

.pz-topo__acoes {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
}

.pz-topo__entrar {
    padding: 9px 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.93rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pz-topo__entrar:hover {
    color: #fff;
}

.pz-topo__cta {
    padding: 11px 22px;
    font-size: 0.93rem;
}

.pz-idioma {
    position: relative;
}

.pz-idioma__botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.pz-idioma__lista {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 190px;
    padding: 6px;
    border-radius: 14px;
    background: var(--pz-superficie);
    border: 1px solid var(--pz-borda);
    box-shadow: var(--pz-sombra);
}

.pz-idioma__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--pz-texto);
    font-size: 0.88rem;
    text-decoration: none;
}

.pz-idioma__item:hover {
    background: var(--pz-suave);
    color: var(--pz-texto);
}

.pz-idioma__item.is-ativo {
    color: var(--pz-primaria);
    font-weight: 700;
}

/*------------------------------------------------------------------------------
  O botão da gaveta

  Os três traços precisam de largura explícita: como `<span>` vazio dentro de um
  flex em coluna, eles medem zero e o botão aparece sem ícone nenhum — moldura
  vazia. Foi o defeito que apareceu em produção no menu da landing.
------------------------------------------------------------------------------*/

.pz-topo__menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.pz-topo__menu span {
    display: block;
    width: 100%;
    align-self: stretch;
    flex: none;
    height: 3px;
    border-radius: 3px;
    background: var(--pz-superficie);
    transition: transform 220ms var(--pz-ease), opacity 160ms;
}

.pz-topo__menu.is-aberto span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.pz-topo__menu.is-aberto span:nth-child(2) { opacity: 0; }
.pz-topo__menu.is-aberto span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/*------------------------------------------------------------------------------
  A gaveta
------------------------------------------------------------------------------*/

.pz-gaveta {
    position: fixed;
    top: var(--pz-topo-altura);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--pz-marca-escura);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pz-gaveta__interior {
    padding: 20px clamp(18px, 5vw, 32px) 40px;
    display: grid;
    gap: 6px;
}

.pz-gaveta__bloco {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pz-gaveta__bloco summary {
    padding: 16px 2px;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pz-gaveta__bloco summary::-webkit-details-marker { display: none; }

.pz-gaveta__bloco summary::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--pz-claro-fraco);
    transition: transform 200ms var(--pz-ease);
}

.pz-gaveta__bloco[open] summary::after {
    transform: rotate(45deg);
}

.pz-gaveta__titulo {
    margin: 12px 0 6px !important;
    color: var(--pz-claro-fraco);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pz-gaveta__bloco ul {
    display: grid;
    gap: 2px;
    padding-bottom: 12px;
}

.pz-gaveta__bloco a {
    display: block;
    padding: 11px 12px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
}

.pz-gaveta__bloco a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.pz-gaveta__bloco a strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
}

.pz-gaveta__bloco a em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 0.82rem;
    color: var(--pz-claro-fraco);
}

.pz-gaveta__destaque {
    display: inline-block;
    margin-bottom: 14px;
    color: #a5b8ff !important;
    font-weight: 700;
}

.pz-gaveta__solto {
    display: block;
    padding: 16px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
}

.pz-gaveta__acoes {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    color: #fff;
}

/*==============================================================================
  Herói
==============================================================================*/

.pz-heroi {
    position: relative;
    isolation: isolate;

    /* Sobe por baixo do cabeçalho, que é transparente no topo. */
    margin-top: calc(-1 * var(--pz-topo-altura));
    padding-block: calc(var(--pz-topo-altura) + clamp(48px, 8vw, 96px)) clamp(64px, 10vw, 118px);

    /* `clip` e não `hidden`: corta o excesso da figura sem criar um contexto de
       rolagem que engoliria o `position: sticky` do cabeçalho. */
    overflow: clip;
    color: #fff;
}

.pz-heroi__fundo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(900px 560px at 14% -14%, rgba(74, 108, 247, 0.52), transparent 62%),
        radial-gradient(760px 520px at 88% 10%, rgba(99, 102, 241, 0.42), transparent 64%),
        linear-gradient(165deg, #16215e 0%, var(--pz-marca-escura) 62%);
}

.pz-heroi__figura {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: min(46vw, 620px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.pz-heroi__figura img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top right;
}

/* A grade do herói: cartões à esquerda, texto no meio, figura à direita.

   A coluna dos cartões tem largura fixa e a do texto recebe o resto até um
   teto. Antes, texto e moldura dividiam o mesmo elemento — `.pz-shell` centrava
   e `.pz-heroi__interior` limitava a 660px —, e o resultado foi um bloco
   centrado com um vão morto à esquerda que ninguém tinha pedido. Agora são dois
   elementos, cada um com uma responsabilidade. */
.pz-heroi__grade {
    position: relative;
    display: grid;
    align-items: center;
    gap: clamp(20px, 2.6vw, 34px);
    grid-template-columns: minmax(0, 265px) minmax(0, 1fr);
}

.pz-heroi__interior {
    display: grid;
    gap: 20px;
    justify-items: start;

    /* O texto para antes da figura.

       600px é medido, não escolhido por gosto: a partir daí, no monitor de
       1440, a última palavra de cada linha começa a cair sobre o rosto da
       pessoa da foto. Texto sobre rosto continua legível, mas fica feio — e é o
       tipo de detalhe que denuncia que a foto foi encaixada depois. */
    max-width: 600px;
}

/*------------------------------------------------------------------------------
  O painel do herói

  Um cartão de vidro com três linhas alinhadas. A régua é uma só: o mesmo recuo,
  a mesma altura de ícone e a mesma distância entre as linhas — é isso que faz o
  bloco parecer um recorte da tela do sistema, e não três adesivos colados no
  fundo.
------------------------------------------------------------------------------*/

.pz-painel-heroi {
    align-self: center;
    padding: 18px;
    border-radius: 20px;

    /* Vidro: fundo translúcido mais desfoque do que está atrás. Onde o desfoque
       não é suportado, o fundo sozinho já garante o contraste do texto. */
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.17);
    backdrop-filter: blur(16px);
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9);

    /* Um respiro lento, de nove segundos. O suficiente para o bloco não parecer
       colado; devagar o bastante para ninguém reparar que ele se move. */
    animation: pz-respirar 9s ease-in-out infinite;
}

@keyframes pz-respirar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.pz-painel-heroi > header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    color: var(--pz-claro-fraco);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* O pontinho que pulsa: o sinal universal de "isto está acontecendo agora". */
.pz-painel-heroi__pulso {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: pz-pulsar 2.4s ease-out infinite;
}

@keyframes pz-pulsar {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.pz-painel-heroi ul {
    display: grid;
    gap: 2px;
    padding-top: 6px !important;
}

.pz-painel-heroi li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);

    /* Alinhado ao topo, e não ao centro: quando um rótulo quebra em duas linhas,
       o ícone centralizado desce e a coluna de ícones deixa de ser uma coluna. */
    align-items: start;
    gap: 11px;
    padding: 10px 4px;
    border-radius: 12px;
    transition: background 160ms;
}

.pz-painel-heroi li:hover {
    background: rgba(255, 255, 255, 0.07);
}

.pz-painel-heroi__marca {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

.pz-painel-heroi__marca svg {
    width: 15px;
    height: 15px;
}

.pz-painel-heroi__marca--verde { background: rgba(34, 197, 94, 0.22); color: #6ee7b7; }
.pz-painel-heroi__marca--azul { background: rgba(59, 130, 246, 0.24); color: #93c5fd; }
.pz-painel-heroi__marca--roxo { background: rgba(124, 58, 237, 0.28); color: #c4b5fd; }

.pz-painel-heroi strong {
    display: block;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.pz-painel-heroi em {
    display: block;
    margin-top: 1px;
    font-style: normal;
    font-size: 0.76rem;
    color: var(--pz-claro-fraco);
}

.pz-painel-heroi__funil {
    display: grid;
    gap: 5px;
    margin-top: 12px;
    padding: 12px 4px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.pz-painel-heroi__funil span {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #a5b8ff);
    justify-self: start;
}

/*------------------------------------------------------------------------------
  O texto do herói
------------------------------------------------------------------------------*/

.pz-heroi h1 {
    font-size: clamp(1.95rem, 4.2vw, 3.1rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.pz-heroi__texto {
    color: var(--pz-claro);
    font-size: clamp(1rem, 1.9vw, 1.16rem);
    max-width: 56ch;
}

.pz-heroi__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.pz-heroi__provas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 10px !important;
}

.pz-heroi__provas li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pz-claro-fraco);
    font-size: 0.88rem;
    font-weight: 500;
}

/* A medida do ícone precisa ser explícita.

   Um SVG sem `width` e `height` nesta folha herda o tamanho da caixa de
   conteúdo e cresce até a largura disponível — foi assim que estes três
   tiquinhos viraram três marcas gigantes no meio do herói quando a regra se
   perdeu numa edição. */
.pz-heroi__provas svg {
    flex: none;
    width: 15px;
    height: 15px;
    color: #6ee7b7;
}

/*==============================================================================
  Produtos
==============================================================================*/

.pz-produtos {
    background: var(--pz-suave);
}

.pz-produtos__grade {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.pz-produto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border-radius: var(--pz-raio-g);
    background: var(--pz-superficie);
    border: 1px solid var(--pz-borda);
    box-shadow: var(--pz-sombra-sm);
    transition: transform 200ms var(--pz-ease), box-shadow 200ms var(--pz-ease);
}

.pz-produto:hover {
    transform: translateY(-4px);
    box-shadow: var(--pz-sombra);
}

.pz-produto--azul .pz-produto__chip { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.pz-produto--indigo .pz-produto__chip { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
.pz-produto--roxo .pz-produto__chip { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.pz-produto--verde .pz-produto__chip { background: rgba(34, 197, 94, 0.14); color: #16a34a; }
.pz-produto--turquesa .pz-produto__chip { background: rgba(20, 184, 166, 0.14); color: #0d9488; }
.pz-produto--ambar .pz-produto__chip { background: rgba(245, 158, 11, 0.16); color: #d97706; }

.pz-produto h3 {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.pz-produto__chamada {
    color: var(--pz-texto);
    font-weight: 600;
}

.pz-produto__texto {
    color: var(--pz-texto-fraco);
    font-size: 0.94rem;
}

.pz-produto__lista {
    display: grid;
    gap: 6px;
    margin-top: 4px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--pz-borda);
}

.pz-produto__lista li {
    position: relative;
    padding-left: 18px;
    color: var(--pz-texto-fraco);
    font-size: 0.89rem;
}

.pz-produto__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pz-primaria);
}

.pz-produto__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    /* `margin-top: auto` empurra o link para a base: sem isso, cartões com
       textos de alturas diferentes teriam o link em quatro alturas diferentes
       na mesma linha. */
    margin-top: auto;
    padding-top: 14px;
    color: var(--pz-primaria);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.pz-produto__link svg {
    width: 16px;
    height: 16px;
    transition: transform 180ms var(--pz-ease);
}

.pz-produto__link:hover {
    color: var(--pz-primaria-forte);
}

.pz-produto__link:hover svg {
    transform: translateX(3px);
}

/*==============================================================================
  Destaques (texto e tela, alternados)
==============================================================================*/

.pz-linha {
    display: grid;
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}

.pz-linha + .pz-linha {
    margin-top: clamp(48px, 8vw, 96px);
}

/* Espelhado: a figura vai para a esquerda. Só a partir do tablet — empilhado,
   inverter a ordem poria a imagem antes do texto que a explica. */
@media (min-width: 900px) {
    .pz-linha--espelho .pz-linha__figura { order: -1; }
}

.pz-linha__texto {
    display: grid;
    justify-items: start;
    gap: 14px;
}

.pz-linha__texto h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.028em;
}

.pz-linha__texto p {
    color: var(--pz-texto-fraco);
    max-width: 52ch;
}

.pz-linha__lista {
    display: grid;
    gap: 9px;
}

.pz-linha__lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--pz-texto);
    font-size: 0.94rem;
}

.pz-linha__lista svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 4px;
    color: var(--pz-verde);
}

.pz-linha__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--pz-primaria);
    font-weight: 700;
    text-decoration: none;
}

.pz-linha__link svg {
    width: 17px;
    height: 17px;
    transition: transform 180ms var(--pz-ease);
}

.pz-linha__link:hover svg {
    transform: translateX(3px);
}

.pz-linha__figura {
    border-radius: var(--pz-raio-g);
    overflow: hidden;
    box-shadow: var(--pz-sombra-g);
    border: 1px solid var(--pz-borda);
}

/*==============================================================================
  Qual é o seu desafio
==============================================================================*/

.pz-desafios {
    background:
        radial-gradient(760px 480px at 20% 0%, rgba(74, 108, 247, 0.38), transparent 62%),
        linear-gradient(170deg, #16215e, var(--pz-marca-escura));
    color: #fff;
}

.pz-desafios__caixa {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
}

.pz-desafios__abas {
    display: grid;
    gap: 8px;
}

.pz-aba {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 160ms, border-color 160ms, transform 160ms;
}

.pz-aba:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(3px);
}

.pz-aba.is-ativa {
    background: var(--pz-superficie);
    border-color: #fff;
    color: var(--pz-marca-escura);
}

.pz-aba__chip {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.pz-aba__chip .pz-icone {
    width: 18px;
    height: 18px;
}

.pz-aba.is-ativa .pz-aba__chip {
    background: rgba(74, 108, 247, 0.14);
    color: var(--pz-primaria);
}

.pz-desafios__paineis {
    display: grid;
}

.pz-resposta {
    display: grid;
    justify-items: start;
    gap: 14px;
    padding: clamp(24px, 4vw, 38px);
    border-radius: var(--pz-raio-g);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
}

/* Antes do script, os seis painéis aparecem empilhados — feio, mas informa.
   Depois que ele liga, só o escolhido fica. Empilhar todos num mesmo espaço do
   grid antes disso esconderia cinco atrás do sexto. */
.pz-desafios__caixa.is-ligada .pz-resposta {
    grid-area: 1 / 1;
    display: none;
}

.pz-desafios__caixa.is-ligada .pz-resposta.is-ativa {
    display: grid;
    animation: pz-aparecer 220ms var(--pz-ease);
}

@keyframes pz-aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.pz-resposta h3 {
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pz-resposta p {
    color: var(--pz-claro);
    max-width: 58ch;
}

.pz-passos {
    display: grid;
    gap: 10px;
    counter-reset: pz-passo;
}

.pz-passos li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--pz-claro);
    font-size: 0.93rem;
}

.pz-passos li span {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
}

/*==============================================================================
  Segmentos
==============================================================================*/

.pz-segmentos__grade {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.pz-segmento {
    display: flex;
    flex-direction: column;
    border-radius: var(--pz-raio-g);
    background: var(--pz-superficie);
    border: 1px solid var(--pz-borda);
    box-shadow: var(--pz-sombra-sm);
    overflow: hidden;
    transition: transform 200ms var(--pz-ease), box-shadow 200ms var(--pz-ease);
}

.pz-segmento:hover {
    transform: translateY(-4px);
    box-shadow: var(--pz-sombra);
}

.pz-segmento__foto {
    /* Proporção fixa: sem ela, fotos de alturas diferentes fariam os cartões da
       mesma linha começarem o texto em alturas diferentes. */
    aspect-ratio: 16 / 10;
    max-width: 100%;
    overflow: hidden;
    background: var(--pz-suave);
}

.pz-segmento__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pz-segmento__texto {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 22px;
}

.pz-segmento h3 {
    font-size: 1.08rem;
    font-weight: 800;
}

.pz-segmento__chamada {
    color: var(--pz-primaria);
    font-size: 0.92rem;
    font-weight: 600;
}

.pz-segmento__texto p {
    color: var(--pz-texto-fraco);
    font-size: 0.9rem;
}

.pz-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px !important;
}

.pz-etiquetas li {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--pz-suave);
    color: var(--pz-texto-fraco);
    font-size: 0.76rem;
    font-weight: 600;
}

/*==============================================================================
  Benefícios
==============================================================================*/

.pz-beneficios {
    background: linear-gradient(170deg, #1b2a76, var(--pz-marca-escura));
    color: #fff;
}

.pz-beneficios__grade {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

.pz-beneficio {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 26px;
    border-radius: var(--pz-raio-g);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pz-beneficio__chip {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.pz-beneficio h3 {
    font-size: 1.05rem;
    font-weight: 800;
}

.pz-beneficio p {
    color: var(--pz-claro);
    font-size: 0.92rem;
}

/*==============================================================================
  Prova e dúvidas
==============================================================================*/

.pz-prova__grade {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.pz-depo {
    padding: 26px;
    border-radius: var(--pz-raio-g);
    background: var(--pz-suave);
    border: 1px solid var(--pz-borda);
}

.pz-depo blockquote {
    font-size: 1rem;
    line-height: 1.65;
}

.pz-depo figcaption {
    margin-top: 16px;
}

.pz-depo figcaption strong {
    display: block;
    font-weight: 700;
}

.pz-depo figcaption span {
    color: var(--pz-texto-fraco);
    font-size: 0.86rem;
}

.pz-duvidas {
    background: var(--pz-suave);
}

.pz-duvidas__lista {
    display: grid;
    gap: 12px;
    max-width: 820px;
    margin-inline: auto;
}

.pz-duvida {
    border: 1px solid var(--pz-borda);
    border-radius: var(--pz-raio);
    background: var(--pz-superficie);
    overflow: hidden;
}

.pz-duvida summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.pz-duvida summary::-webkit-details-marker { display: none; }

.pz-duvida summary::after {
    content: "+";
    flex: none;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--pz-primaria);
    transition: transform 200ms var(--pz-ease);
}

.pz-duvida[open] summary::after {
    transform: rotate(45deg);
}

.pz-duvida p {
    padding: 0 22px 20px;
    color: var(--pz-texto-fraco);
}

/*==============================================================================
  Fecho e rodapé
==============================================================================*/

.pz-fecho {
    padding-block: clamp(56px, 9vw, 110px);
    background:
        radial-gradient(760px 420px at 50% 0%, rgba(74, 108, 247, 0.45), transparent 62%),
        linear-gradient(175deg, #16215e, var(--pz-marca-escura));
    color: #fff;
}

.pz-fecho__caixa {
    display: grid;
    justify-items: center;
    gap: 18px;
    text-align: center;
}

.pz-fecho h2 {
    font-size: clamp(1.8rem, 4.2vw, 2.8rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.03em;
    max-width: 18ch;
}

.pz-fecho p {
    color: var(--pz-claro);
    max-width: 58ch;
}

.pz-fecho__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.pz-rodape {
    padding-block: clamp(44px, 6vw, 70px) 26px;
    background: var(--pz-marca-escura);
    color: #fff;
}

.pz-rodape__grade {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pz-rodape__marca {
    display: grid;
    align-content: start;
    gap: 12px;

    /* A coluna da marca ocupa mais espaço que as de links: o parágrafo abaixo
       dela precisa de largura para não quebrar a cada duas palavras. */
    grid-column: span 2;
    min-width: 0;
}

.pz-rodape__marca .az-logo {
    --az-logo-altura: 34px;
}

.pz-rodape__marca p {
    color: var(--pz-claro-fraco);
    font-size: 0.88rem;
    max-width: 34ch;
}

.pz-rodape__coluna h3 {
    margin-bottom: 12px !important;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pz-claro-fraco);
}

.pz-rodape__coluna ul {
    display: grid;
    gap: 9px;
}

.pz-rodape__coluna a {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9rem;
    text-decoration: none;
}

.pz-rodape__coluna a:hover {
    color: #fff;
    text-decoration: underline;
}

.pz-rodape__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 22px;
}

.pz-rodape__base p {
    color: var(--pz-claro-fraco);
    font-size: 0.84rem;
}

.pz-rodape__idiomas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pz-rodape__idiomas a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--pz-claro-fraco);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.pz-rodape__idiomas a.is-ativo {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/*==============================================================================
  Voltar ao topo
==============================================================================*/

.pz-subir {
    position: fixed;
    right: clamp(14px, 3vw, 28px);
    bottom: clamp(14px, 3vw, 28px);
    z-index: 80;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--pz-primaria);
    color: #fff;
    box-shadow: 0 14px 30px -14px rgba(74, 108, 247, 0.9);
    text-decoration: none;
}

.pz-subir svg {
    width: 20px;
    height: 20px;
}

.pz-subir:hover {
    background: var(--pz-primaria-forte);
    color: #fff;
}

/*==============================================================================
  Telas estreitas

  O mega menu vira gaveta em 1024px. Abaixo disso não há largura para cinco
  itens de menu mais dois botões sem que tudo encolha até ficar ilegível.
==============================================================================*/

@media (max-width: 1024px) {
    .pz-nav,
    .pz-topo__acoes {
        display: none;
    }

    .pz-topo__menu {
        display: flex;
        margin-left: auto;
    }

    .pz-heroi__grade {
        grid-template-columns: minmax(0, 1fr);
    }

    .pz-heroi__interior {
        max-width: 100%;
    }

    /* O painel some: abaixo desta largura o texto precisa da coluna inteira, e
       um painel espremido ao lado de um título de quatro linhas vira ruído. */
    .pz-painel-heroi {
        display: none;
    }

    /* A figura recua para o fundo e clareia: em coluna única ela passaria por
       trás do texto, e o contraste do parágrafo cairia. */
    .pz-heroi__figura {
        width: min(70vw, 460px);
        opacity: 0.22;
    }

    .pz-desafios__caixa {
        grid-template-columns: minmax(0, 1fr);
    }

    .pz-desafios__abas {
        /* Rolagem horizontal só aqui, num contêiner próprio: seis abas em pé
           numa tela de 400px dariam uma coluna de seis linhas antes do
           conteúdo. */
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
    }

    .pz-aba {
        flex: none;
        width: auto;
        scroll-snap-align: start;
    }

    .pz-aba:hover {
        transform: none;
    }

    .pz-rodape__marca {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .pz-heroi__acoes .pz-btn,
    .pz-fecho__acoes .pz-btn {
        /* Botões da largura do dedo, não da largura da palavra. */
        flex: 1 1 100%;
    }

    .pz-rodape__base {
        justify-content: center;
        text-align: center;
    }
}

/*==============================================================================
  Quem pediu menos movimento
==============================================================================*/

@media (prefers-reduced-motion: reduce) {
    .pz-page *,
    .pz-page *::before,
    .pz-page *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}