/* ═══════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS — painel.html, sobre.html

   Não é um segundo design system. Aqui só vivem os componentes que a
   home não tem, e todos eles usam os tokens de design-system.css
   (--ink, --green-*, --bg-*, --border-*) e a mesma tipografia.

   Regra ao mexer: se um componente daqui passar a servir também à home,
   ele muda de arquivo. O que justifica este arquivo existir é ser
   conteúdo longo de leitura, coisa que a home não tem.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Casca ────────────────────────────────────────────────────────── */

.pg-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 64px);
}
.pg-inner-narrow { max-width: 820px; }
/* Só para as seções de captura: a tela do painel tem 1920px de largura,
   e a 1080 ela renderiza a 56% do tamanho real, o que deixa a interface
   ilegível. 1240 é a mesma largura da grade mais larga da home
   (.inc-inner), então não inventa medida nova. */
.pg-inner-wide { max-width: 1240px; }
/* Só a dobra do passeio, onde a captura divide espaço com a coluna de
   texto e por isso precisa de toda a largura possível para não ficar
   ilegível. Aqui a folga lateral também encolhe: é a única dobra da
   página que ganha mais em largura do que perde em respiro. */
.pg-inner-xwide {
    max-width: 1560px;
    padding: 0 clamp(20px, 3vw, 44px);
}

/* Toda seção clara usa --bg-base, o mesmo fundo das seções claras da
   home (.inc-section, .plan2-section, .niche-section e companhia). Não
   existe mais variante branca: o branco fica reservado aos cartões, que
   é o que separa cartão de fundo. */
/* Mesmo respiro das seções claras da home (.inc-section,
   .plan2-section, .niche-section): clamp(56px,7vw,96px). Antes era
   clamp(64px,8vw,108px) e as dobras ficavam soltas umas das outras. */
.pg-section       { position: relative; z-index: 0; background: var(--bg-base); padding: clamp(56px, 7vw, 96px) 0; }
.pg-section-tight { padding: clamp(40px, 5vw, 64px) 0; }

/* Faixa escura. É a receita EXATA da .how-section ("Começar é simples")
   do design-system: mesmo preto esverdeado, mesmo halo verde no topo e
   mesma trama de pontos. Copiada em vez de referenciada porque a home e
   as páginas internas não compartilham nomes de classe; se um dia a
   .how-section mudar de cor, isto aqui muda junto. */
.pg-section-dark {
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse 85% 65% at 50% 0%, rgba(47,163,85,0.12), transparent 62%),
        #0C1710;
    color: #fff;
    padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 116px);
}
.pg-section-dark::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 26px 26px;
}
/* O ::before é posicionado, então pinta acima de conteúdo em fluxo
   normal. O miolo precisa de position:relative para ficar por cima, do
   mesmo jeito que .how-inner faz na home. */
.pg-section-dark .pg-inner { position: relative; }
.pg-section-dark .pg-h2      { color: #fff; }
.pg-section-dark .pg-sub     { color: rgba(255,255,255,0.72); }

/* ── Cabeçalhos de seção ──────────────────────────────────────────── */

.pg-h2 {
    font-family: var(--font-poppins);
    font-size: clamp(1.75rem, 3.6vw, 2.7rem); font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.03em; line-height: 1.14;
    margin: 0 0 16px;
    text-wrap: balance;
}
.pg-h2 em { font-style: normal; color: var(--green-text); }
.pg-section-dark .pg-h2 em { color: var(--green-light); }

.pg-h3 {
    font-family: var(--font-poppins);
    font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600;
    color: var(--ink); letter-spacing: -0.02em; line-height: 1.25;
    margin: 0 0 10px;
}

.pg-sub {
    font-family: var(--font-poppins);
    font-size: clamp(0.98rem, 1.4vw, 1.08rem); font-weight: 300;
    line-height: 1.65; color: rgba(18,33,26,0.66);
    margin: 0 0 40px; max-width: 62ch;
    text-wrap: pretty;
}
.pg-sub strong { font-weight: 600; color: rgba(18,33,26,0.88); }
.pg-head-center { text-align: center; }
.pg-head-center .pg-sub { margin-left: auto; margin-right: auto; }

.pg-p {
    font-family: var(--font-poppins);
    font-size: 1rem; font-weight: 300; line-height: 1.72;
    color: rgba(18,33,26,0.72); margin: 0 0 20px;
    max-width: 68ch; text-wrap: pretty;
}
.pg-p strong { font-weight: 600; color: var(--ink); }
.pg-section-dark .pg-p         { color: rgba(255,255,255,0.74); }
.pg-section-dark .pg-p strong  { color: #fff; }

/* ── Hero de página interna ───────────────────────────────────────── */

.pg-hero {
    /* z-index:0 não é decoração: .cloud-side é position:absolute com
       z-index:-1, e sem um contexto de empilhamento aqui a nuvem cai
       atrás do fundo da própria seção e some. É o mesmo motivo pelo qual
       .pain-section e companhia declaram z-index:0 no design-system. */
    position: relative; z-index: 0;
    padding: clamp(112px, 13vw, 158px) 0 clamp(36px, 4.5vw, 56px);
    background: var(--bg-base);
    overflow: hidden;
}
/* Miolo centralizado, no mesmo eixo do .hero-ds-center da home: coluna
   flex, tudo alinhado ao centro. Antes era alinhado à esquerda, o que
   fazia a primeira dobra de uma página interna abrir com um eixo que o
   site não usa em lugar nenhum. */
.pg-hero .pg-inner {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}

.pg-hero-h1 {
    font-family: var(--font-poppins);
    font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 600;
    color: var(--ink); letter-spacing: -0.035em; line-height: 1.08;
    margin: 0 0 20px; max-width: 20ch;
    text-wrap: balance;
}
.pg-hero-h1 em { font-style: normal; color: var(--green-text); }
.pg-hero-sub {
    font-family: var(--font-poppins);
    font-size: clamp(1rem, 1.7vw, 1.18rem); font-weight: 300;
    line-height: 1.62; color: rgba(18,33,26,0.68);
    margin: 0 0 30px; max-width: 58ch;
    text-wrap: pretty;
}
.pg-hero-sub strong { font-weight: 600; color: rgba(18,33,26,0.9); }

/* Trilha de volta. Substitui o "Voltar" solto das páginas legais: diz
   onde a pessoa está, não só que dá para sair. */
.pg-crumb {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(18,33,26,0.56);
    margin: 0 0 22px;
}
.pg-crumb a { color: rgba(18,33,26,0.62); text-decoration: none; }
.pg-crumb a:hover { color: var(--green-text); }
.pg-crumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ── Botões ───────────────────────────────────────────────────────── */

.pg-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-hero .pg-btns { justify-content: center; }

.pg-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 100px;
    font-family: var(--font-poppins); font-size: 0.92rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.pg-btn-primary {
    color: #000;
    background: linear-gradient(135deg, var(--green-mid) 0%, var(--green-light) 100%);
    box-shadow: 0 4px 16px rgba(69,191,104,0.34);
}
.pg-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(69,191,104,0.46); }
.pg-btn-ghost {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--border-mid);
}
.pg-btn-ghost:hover { background: rgba(18,33,26,0.05); }
.pg-section-dark .pg-btn-ghost { color: #fff; border-color: rgba(255,255,255,0.24); }
.pg-section-dark .pg-btn-ghost:hover { background: rgba(255,255,255,0.09); }

/* ── Captura de tela ──────────────────────────────────────────────────
   A moldura de navegador existe mesmo antes da imagem chegar. O bloco
   .shot-todo é o que se troca por um <img>: enquanto ele estiver aqui,
   a legenda descreve a tela, para a seção não ficar com um buraco.
   ─────────────────────────────────────────────────────────────────── */

.shot {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-sub);
    box-shadow: 0 18px 50px -18px rgba(18,33,26,0.24);
}
.shot-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px;
    background: #F2F5F3;
    border-bottom: 1px solid var(--border-sub);
}
.shot-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.shot-url {
    flex: 1; margin: 0 8px;
    padding: 4px 12px; border-radius: 100px;
    background: #fff; border: 1px solid var(--border-sub);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem; color: rgba(18,33,26,0.61);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot img { display: block; width: 100%; height: auto; }

/* A captura é uma tela que continua rolando abaixo do corte. Sem isso o
   corte lê como imagem mal recortada; com o esmaecido ele lê como "tem
   mais coisa aqui embaixo", que é a verdade. */
.shot-clip { position: relative; }
.shot-clip::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: clamp(50px, 7vw, 96px); pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg-surface) 100%);
}

.shot-todo {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center;
    /* Enquanto for espaço reservado, ele fica menor do que a captura
       final vai ser: três retângulos de 400px vazios dominam a página e
       fazem o texto, que é o que está pronto, parecer legenda. */
    min-height: clamp(190px, 20vw, 280px);
    padding: 32px clamp(20px, 5vw, 56px);
    background:
        linear-gradient(180deg, rgba(109,217,138,0.07) 0%, rgba(109,217,138,0.02) 100%),
        radial-gradient(rgba(18,33,26,0.055) 1px, transparent 1px);
    background-size: auto, 26px 26px;
}
.shot-todo-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(47,163,85,0.1); color: var(--green-text);
}
.shot-todo-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--green-text);
}
.shot-todo-desc {
    font-family: var(--font-poppins);
    font-size: 0.92rem; font-weight: 300; line-height: 1.6;
    color: rgba(18,33,26,0.6); max-width: 46ch; margin: 0;
}
.shot-cap {
    padding: 14px 18px;
    border-top: 1px solid var(--border-sub);
    font-family: var(--font-poppins);
    font-size: 0.84rem; font-weight: 400; line-height: 1.55;
    color: rgba(18,33,26,0.58);
    background: var(--bg-surface);
}
.shot-cap strong { font-weight: 600; color: var(--ink); }

/* ── A escada dos planos ──────────────────────────────────────────── */

.ladder {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    align-items: start;
}
.ladder-step {
    display: flex; flex-direction: column;
    padding: 26px 24px 24px;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-sub);
}
/* Cada degrau começa um pouco mais alto que o anterior. A escada é o
   argumento inteiro desta página, então ela precisa ser vista antes de
   ser lida. */
.ladder-step:nth-child(2) { margin-top: -14px; }
.ladder-step:nth-child(3) { margin-top: -28px; }

.ladder-step-hi {
    border-color: rgba(47,163,85,0.32);
    box-shadow: 0 16px 40px -18px rgba(47,163,85,0.4);
}
.ladder-plan {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(18,33,26,0.56);
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 14px;
}
.ladder-q {
    font-family: var(--font-poppins);
    font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 600;
    color: var(--ink); letter-spacing: -0.02em; line-height: 1.2;
    margin: 0 0 12px;
}
.ladder-desc {
    font-family: var(--font-poppins);
    font-size: 0.9rem; font-weight: 300; line-height: 1.62;
    color: rgba(18,33,26,0.64); margin: 0 0 18px;
}
.ladder-list { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 9px; }
.ladder-list li {
    display: flex; gap: 9px; align-items: flex-start;
    font-family: var(--font-poppins);
    font-size: 0.86rem; font-weight: 300; line-height: 1.5;
    color: rgba(18,33,26,0.72);
}
.ladder-list svg { flex-shrink: 0; margin-top: 3px; color: var(--green-primary); }

/* ── Grade de cartões ─────────────────────────────────────────────── */

.pg-grid { display: grid; gap: 18px; }
.pg-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pg-grid-3 { grid-template-columns: repeat(3, 1fr); }

.pg-card {
    padding: 26px 24px;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-sub);
}
.pg-card-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(47,163,85,0.1); color: var(--green-text);
    font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700;
    margin-bottom: 14px;
}
.pg-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: rgba(47,163,85,0.1); color: var(--green-text);
    margin-bottom: 14px;
}
.pg-card p {
    font-family: var(--font-poppins);
    font-size: 0.92rem; font-weight: 300; line-height: 1.62;
    color: rgba(18,33,26,0.66); margin: 0;
}
.pg-card p + p { margin-top: 12px; }
.pg-card p strong { font-weight: 600; color: var(--ink); }
.pg-section-dark .pg-card {
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.1);
}
.pg-section-dark .pg-card .pg-h3 { color: #fff; }
.pg-section-dark .pg-card p { color: rgba(255,255,255,0.7); }
.pg-section-dark .pg-card p strong { color: #fff; }
.pg-section-dark .pg-card-icon,
.pg-section-dark .pg-card-num {
    background: rgba(109,217,138,0.16); color: var(--green-light);
}

/* ── Lista das telas ──────────────────────────────────────────────── */

.telas { display: grid; gap: 12px; }

.tela {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 18px; align-items: start;
    padding: 22px 24px;
    border-radius: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-sub);
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.tela:hover { border-color: var(--border-mid); transform: translateY(-1px); }
.tela-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(47,163,85,0.09); color: var(--green-text);
}
.tela-name {
    font-family: var(--font-poppins);
    font-size: 1.02rem; font-weight: 600; color: var(--ink);
    letter-spacing: -0.015em; margin: 0 0 6px;
}
.tela-desc {
    font-family: var(--font-poppins);
    font-size: 0.9rem; font-weight: 300; line-height: 1.62;
    color: rgba(18,33,26,0.64); margin: 0;
}
.tela-desc strong { font-weight: 600; color: rgba(18,33,26,0.86); }

/* Mesmo tratamento do .ladder-plan da dobra da escada: texto mono em
   caixa alta, sem pílula e sem cor de destaque. A informação está na
   palavra, não no recipiente, e as duas dobras passam a nomear plano do
   mesmo jeito. */
.tela-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(18,33,26,0.56);
    white-space: nowrap;
}

/* ── O que a Sincerum não faz ─────────────────────────────────────── */

.nope { display: grid; gap: 12px; }
.nope-item {
    display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
    padding: 20px 22px;
    border-radius: 14px;
    background: rgba(18,33,26,0.025);
    border: 1px solid var(--border-sub);
}
.nope-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: rgba(192,69,60,0.1); color: #C0453C;
}
.nope-t {
    font-family: var(--font-poppins);
    font-size: 0.96rem; font-weight: 600; color: var(--ink);
    margin: 0 0 5px; letter-spacing: -0.01em;
}
.nope-d {
    font-family: var(--font-poppins);
    font-size: 0.89rem; font-weight: 300; line-height: 1.6;
    color: rgba(18,33,26,0.64); margin: 0;
}
.pg-section-dark .nope-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); }
.pg-section-dark .nope-x    { background: rgba(255,140,130,0.14); color: #FF9A90; }
.pg-section-dark .nope-t    { color: #fff; }
.pg-section-dark .nope-d    { color: rgba(255,255,255,0.68); }

/* ── Linha do tempo (usada em /sobre) ─────────────────────────────── */

.tl-row {
    display: grid; grid-template-columns: 148px 1fr; gap: 26px;
    padding: 24px 0;
    border-top: 1px solid var(--border-sub);
}
.tl-row:last-child { border-bottom: 1px solid var(--border-sub); }
.tl-when {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--green-text); padding-top: 4px;
}

/* ── Responsivo ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .ladder { grid-template-columns: 1fr; }
    .ladder-step:nth-child(2),
    .ladder-step:nth-child(3) { margin-top: 0; }
    .pg-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .pg-grid-2, .pg-grid-3 { grid-template-columns: 1fr; }

    /* O selo de plano sai da terceira coluna e vira uma linha abaixo do
       texto: com 44px de ícone e um selo em pé, sobra pouco para o nome
       da tela e ele quebra em três linhas. */
    .tela { grid-template-columns: 40px 1fr; gap: 14px; }
    .tela-icon  { width: 40px; height: 40px; }
    .tela-badge { grid-column: 2; justify-self: start; margin-top: 4px; }

    .tl-row  { grid-template-columns: 1fr; gap: 8px; }
    .tl-when { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-btn, .tela { transition: none; }
    .pg-btn-primary:hover, .tela:hover { transform: none; }
}

/* ── Marcadores sobre a captura ───────────────────────────────────────
   Uma captura de painel sem marcação é decoração: o olho não sabe para
   onde ir e a tela vira "prova de que existe". Os alfinetes apontam os
   três lugares que sustentam o argumento da dobra, e a legenda abaixo
   diz o que cada um é.

   A posição é em porcentagem sobre o container da imagem, então
   acompanha qualquer largura sem recalcular nada.
   ─────────────────────────────────────────────────────────────────── */
.shot-pin {
    position: absolute; z-index: 2;
    transform: translate(-50%, -50%);
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--green-primary); color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 4px rgba(47,163,85,0.2), 0 4px 12px rgba(18,33,26,0.28);
}

.shot-legend {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.5vw, 32px);
    margin-top: clamp(24px, 3vw, 36px);
}
.shot-legend li { display: flex; gap: 11px; align-items: flex-start; list-style: none; }
.shot-legend-n {
    flex-shrink: 0; margin-top: 1px;
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(47,163,85,0.12); color: var(--green-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem; font-weight: 700; line-height: 1;
}
.shot-legend p {
    margin: 0;
    font-family: var(--font-poppins);
    font-size: 0.9rem; font-weight: 300; line-height: 1.55;
    color: rgba(18,33,26,0.64);
}
.shot-legend strong { font-weight: 600; color: var(--ink); }

@media (max-width: 680px) {
    /* Abaixo disso a captura renderiza pequena demais para um alfinete
       apontar qualquer coisa com precisão. Some o alfinete, fica a lista. */
    .shot-pin { display: none; }
    .shot-legend { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Dobra da confiança (faixa escura) ────────────────────────────────
   Duas colunas assimétricas, no mesmo desenho do .how-wrap da home:
   argumento à esquerda, caixa vazada à direita. A faixa já usa o fundo
   da .how-section, então repetir também a estrutura faz as duas lerem
   como irmãs em vez de coincidência.

   As três linhas da caixa NÃO são numeradas de propósito. Elas não são
   etapas em ordem: são três formas da mesma coisa, o sistema pedindo
   quase nada de você. Numerar prometeria uma sequência que não existe.
   ─────────────────────────────────────────────────────────────────── */

.trust-wrap {
    display: grid; grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(32px, 5vw, 72px); align-items: center;
}

.trust-h2 {
    font-family: var(--font-poppins);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 600;
    color: #fff; letter-spacing: -0.03em; line-height: 1.14;
    margin: 0 0 20px; text-wrap: balance;
}
.trust-h2 em { font-style: normal; color: var(--green-light); }

.trust-p {
    font-family: var(--font-poppins);
    font-size: 0.98rem; font-weight: 300; line-height: 1.7;
    color: rgba(255,255,255,0.66); margin: 0 0 16px; max-width: 46ch;
}
.trust-p:last-child { margin-bottom: 0; }
.trust-p strong { font-weight: 600; color: #fff; }

.trust-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: clamp(8px, 1.4vw, 16px) clamp(22px, 3vw, 38px);
}
.trust-row {
    display: grid; grid-template-columns: 40px 1fr; gap: 18px;
    padding: clamp(22px, 2.6vw, 30px) 0;
}
.trust-row + .trust-row { border-top: 1px solid rgba(255,255,255,0.09); }

.trust-mark {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(109,217,138,0.13); color: var(--green-light);
    flex-shrink: 0;
}
.trust-title {
    font-family: var(--font-poppins);
    font-size: 1.1rem; font-weight: 600; color: #6DD98A;
    line-height: 1.3; margin: 0 0 7px; letter-spacing: -0.015em;
}
.trust-desc {
    font-family: var(--font-poppins);
    font-size: 0.88rem; font-weight: 300; line-height: 1.68;
    color: rgba(255,255,255,0.56); margin: 0;
}
.trust-desc strong { font-weight: 600; color: rgba(255,255,255,0.86); }

@media (max-width: 980px) {
    .trust-wrap { grid-template-columns: 1fr; gap: 36px; }
    .trust-p { max-width: none; }
}
@media (max-width: 560px) {
    .trust-row { grid-template-columns: 34px 1fr; gap: 14px; }
    .trust-mark { width: 34px; height: 34px; border-radius: 10px; }
}

/* ── Filtros da tela, replicados como faixa ───────────────────────────
   A tela de Avaliações tem cinco filtros, e eles são o que separa "uma
   lista de avaliações" de "uma ferramenta de trabalho". Na captura eles
   aparecem em corpo 11, ilegíveis. Repetidos aqui em tamanho de leitura,
   com o mesmo desenho de pílula da tela.
   ─────────────────────────────────────────────────────────────────── */
.filtros {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px; margin-top: clamp(24px, 3vw, 34px);
}
.filtros-lead {
    font-family: var(--font-poppins);
    font-size: 0.92rem; font-weight: 300; color: rgba(18,33,26,0.62);
    margin: 0 4px 0 0;
}
.filtro {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 100px;
    background: var(--bg-surface); border: 1px solid var(--border-mid);
    font-family: var(--font-poppins);
    font-size: 0.84rem; font-weight: 500; color: rgba(18,33,26,0.78);
    white-space: nowrap;
}
.filtro span { font-weight: 300; color: rgba(18,33,26,0.5); }
.filtro svg { color: rgba(18,33,26,0.35); flex-shrink: 0; }

/* ── As três decisões ─────────────────────────────────────────────────
   Cada coluna é encabeçada por uma réplica do botão que aparece na
   captura. É o que transforma a imagem em algo que ensina: o leitor
   reconhece o botão na tela acima e sabe o que ele faz.
   ─────────────────────────────────────────────────────────────────── */
.decide {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vw, 28px);
    margin-top: clamp(36px, 4.5vw, 56px);
}
.decide-col { display: flex; flex-direction: column; gap: 14px; }

.decide-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 9px;
    font-family: var(--font-poppins);
    font-size: 0.88rem; font-weight: 600; white-space: nowrap;
}
.decide-btn-ok   { background: #14522C; color: #fff; }
.decide-btn-edit { background: var(--bg-surface); color: rgba(18,33,26,0.82); border: 1px solid var(--border-mid); }
.decide-btn-no   { background: #B3261E; color: #fff; }

.decide-col p {
    font-family: var(--font-poppins);
    font-size: 0.9rem; font-weight: 300; line-height: 1.62;
    color: rgba(18,33,26,0.64); margin: 0;
}
.decide-col p strong { font-weight: 600; color: var(--ink); }

/* Fecho da dobra: o fato que não cabe em nenhuma das três colunas. */
.decide-note {
    display: flex; align-items: flex-start; gap: 11px;
    margin-top: clamp(28px, 3.5vw, 40px);
    padding: 20px 22px; border-radius: 14px;
    background: rgba(47,163,85,0.07);
    border: 1px solid rgba(47,163,85,0.18);
}
.decide-note svg { flex-shrink: 0; margin-top: 2px; color: var(--green-primary); }
.decide-note p {
    margin: 0;
    font-family: var(--font-poppins);
    font-size: 0.92rem; font-weight: 300; line-height: 1.62;
    color: rgba(18,33,26,0.7);
}
.decide-note strong { font-weight: 600; color: var(--ink); }

@media (max-width: 820px) {
    .decide { grid-template-columns: 1fr; gap: 26px; }
}

/* ── A sugestão do mês ────────────────────────────────────────────────
   O relatório inteiro é diagnóstico; só este bloco é tarefa. Ele fecha
   a dobra porque é a única parte que diz o que FAZER, e é o que separa
   o Completo de um painel de números.
   ─────────────────────────────────────────────────────────────────── */
.sugestao {
    margin-top: clamp(18px, 2.4vw, 28px);
    padding: clamp(26px, 3.2vw, 38px);
    border-radius: 18px;
    background: rgba(232,161,59,0.055);
    border: 1px solid rgba(232,161,59,0.26);
    border-left: 3px solid #E8A13B;
}
.sugestao-selo {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #9A6415; margin-bottom: 12px;
}
.sugestao-h {
    font-family: var(--font-poppins);
    font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600;
    color: var(--ink); letter-spacing: -0.02em; margin: 0 0 18px;
}
.sugestao-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.sugestao-rot {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(18,33,26,0.55); display: block; margin-bottom: 6px;
}
.sugestao-grid p {
    margin: 0;
    font-family: var(--font-poppins);
    font-size: 0.88rem; font-weight: 300; line-height: 1.58;
    color: rgba(18,33,26,0.68);
}

@media (max-width: 900px) { .sugestao-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sugestao-grid { grid-template-columns: 1fr; gap: 18px; } }

/* ── Passeio pela tela ────────────────────────────────────────────────
   Captura à esquerda, e à direita o que ela mostra na MESMA ordem em
   que aparece, de cima para baixo. Aqui a numeração é honesta: não é
   uma sequência inventada, é a ordem física dos elementos na tela.
   ─────────────────────────────────────────────────────────────────── */
.passeio {
    display: grid; grid-template-columns: 1.4fr 0.6fr;
    gap: clamp(24px, 3vw, 44px);
    /* A coluna da captura é mais baixa que a do texto. Centrada, a sobra
       se divide em cima e embaixo e lê como composição; alinhada ao topo,
       lê como um buraco no pé da imagem. Sticky não serve aqui: a seção
       não tem rolagem suficiente para a imagem chegar a grudar. */
    align-items: center;
}

.walk-item { display: grid; grid-template-columns: 28px 1fr; gap: 15px; padding: 20px 0; }
.walk-item:first-child { padding-top: 0; }
.walk-item + .walk-item { border-top: 1px solid var(--border-sub); }
.walk-n {
    width: 28px; height: 28px; border-radius: 50%; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(47,163,85,0.11); color: var(--green-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; font-weight: 700; line-height: 1;
}
.walk-t {
    font-family: var(--font-poppins);
    font-size: 1.02rem; font-weight: 600; color: var(--ink);
    letter-spacing: -0.015em; margin: 0 0 7px;
}
.walk-d {
    font-family: var(--font-poppins);
    font-size: 0.89rem; font-weight: 300; line-height: 1.6;
    color: rgba(18,33,26,0.64); margin: 0;
}
.walk-d strong { font-weight: 600; color: var(--ink); }

/* Os filtros e os botões vivem dentro dos itens do passeio. */
.walk-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.walk-chips .filtro { padding: 5px 11px; font-size: 0.76rem; }
.walk-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.walk-btns .decide-btn { padding: 8px 15px; font-size: 0.8rem; border-radius: 8px; }

@media (max-width: 900px) {
    .passeio { grid-template-columns: 1fr; gap: 32px; }
    .passeio > .shot { position: static; }
}

/* ── As nove telas ────────────────────────────────────────────────────
   Grade de 3 por 3, no mesmo cartão que a dobra 5 usa. A versão anterior
   agrupava pelos quatro grupos do menu, com um rótulo à esquerda; com
   grupos de 4, 1, 3 e 1 sobrava meia fileira vazia em dois deles e a
   dobra lia como inacabada. A ordem do menu ficou, o andaime saiu.
   ─────────────────────────────────────────────────────────────────── */
.telas-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.tela-cart {
    padding: 20px 22px; border-radius: 14px;
    background: var(--bg-surface); border: 1px solid var(--border-sub);
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.tela-cart:hover { border-color: var(--border-mid); transform: translateY(-1px); }
.tela-cart-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 13px;
}
.tela-cart-ico {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(47,163,85,0.09); color: var(--green-text);
}
.tela-cart-nome {
    font-family: var(--font-poppins);
    font-size: 1.02rem; font-weight: 600; color: var(--ink);
    letter-spacing: -0.015em; margin: 0 0 7px;
}
.tela-cart p {
    font-family: var(--font-poppins);
    font-size: 0.86rem; font-weight: 300; line-height: 1.58;
    color: rgba(18,33,26,0.62); margin: 0;
}
.tela-cart p strong { font-weight: 600; color: rgba(18,33,26,0.86); }

@media (max-width: 900px) { .telas-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .telas-grade { grid-template-columns: 1fr; } }

/* ── A ficha da empresa ───────────────────────────────────────────────
   O elemento da dobra "o que a gente faz". Não é foto de banco de
   imagem: numa página que argumenta transparência, o objeto que
   sustenta o argumento é a ficha de fatos, não uma pessoa sorrindo
   numa mesa. Também é o bloco que assistente de IA lê melhor.
   ─────────────────────────────────────────────────────────────────── */
.sobre-wrap {
    display: grid; grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(28px, 4vw, 60px); align-items: start;
}

.ficha {
    background: var(--bg-surface);
    border: 1px solid var(--border-sub);
    border-radius: 18px;
    padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px);
    box-shadow: 0 14px 36px -22px rgba(18,33,26,0.3);
}
.ficha-cab {
    display: flex; align-items: center; gap: 9px;
    padding-bottom: 15px; margin-bottom: 4px;
    border-bottom: 1px solid var(--border-sub);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--green-text);
}
.ficha-linha { padding: 14px 0; }
.ficha-linha + .ficha-linha { border-top: 1px solid var(--border-sub); }
.ficha-rot {
    display: block; margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(18,33,26,0.53);
}
.ficha-val {
    margin: 0;
    font-family: var(--font-poppins);
    font-size: 0.92rem; font-weight: 400; line-height: 1.5;
    color: var(--ink);
}
.ficha-val em { font-style: normal; color: var(--green-text); font-weight: 600; }

@media (max-width: 900px) {
    .sobre-wrap { grid-template-columns: 1fr; gap: 30px; }
}

/* ── O contrato em português ──────────────────────────────────────────
   A dobra afirma "não é o resumo do contrato, é o contrato dito em
   português". Antes era uma lista de definições com rótulo à esquerda,
   que lia como glossário. Aqui ela vira o documento que a frase promete:
   cabeçalho, cláusulas numeradas, fio entre elas e rodapé apontando
   para o texto jurídico. A numeração é honesta: são cinco pontos de um
   acordo só, e a ordem importa (entrada, prazo, propriedade, suporte,
   custos de fora).
   ─────────────────────────────────────────────────────────────────── */
.contrato {
    background: var(--bg-surface);
    border: 1px solid var(--border-mid);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 44px -26px rgba(18,33,26,0.32);
}

.contrato-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 16px clamp(22px, 3vw, 34px);
    background: rgba(18,33,26,0.028);
    border-bottom: 1px solid var(--border-sub);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(18,33,26,0.61);
}
.contrato-cab strong { color: var(--green-text); font-weight: 600; }

.clausula {
    display: grid; grid-template-columns: 54px 1fr;
    gap: clamp(14px, 2vw, 24px);
    padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 34px);
}
.clausula + .clausula { border-top: 1px solid var(--border-sub); }

.clausula-n {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem; font-weight: 700;
    color: rgba(18,33,26,0.2);
    line-height: 1.3; padding-top: 2px;
}
.clausula-rot {
    display: block; margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--green-text);
}
.clausula-t {
    font-family: var(--font-poppins);
    font-size: clamp(1.08rem, 1.9vw, 1.3rem); font-weight: 600;
    color: var(--ink); letter-spacing: -0.02em; line-height: 1.25;
    margin: 0 0 9px;
}
.clausula-d {
    font-family: var(--font-poppins);
    font-size: 0.93rem; font-weight: 300; line-height: 1.68;
    color: rgba(18,33,26,0.66); margin: 0; max-width: 74ch;
}
.clausula-d strong { font-weight: 600; color: var(--ink); }

.contrato-pe {
    padding: 16px clamp(22px, 3vw, 34px);
    background: rgba(18,33,26,0.028);
    border-top: 1px solid var(--border-sub);
    font-family: var(--font-poppins);
    font-size: 0.85rem; font-weight: 400; line-height: 1.55;
    color: rgba(18,33,26,0.58);
}
.contrato-pe a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
    .clausula { grid-template-columns: 1fr; gap: 8px; }
    .clausula-n { padding-top: 0; }
}

/* ── Recusa e contrapartida ───────────────────────────────────────────
   A dobra "o que a gente não faz" era uma pilha de cinco cartões, e
   cada um já trazia, enterrado no parágrafo, o que acontece no lugar.
   Aqui esse par vira a estrutura: recusa à esquerda, contrapartida à
   direita, na mesma gramática da dobra de comparação da home.

   Sem isso, cinco frases começando com "não" seguidas viram uma página
   defensiva. Com o par, cada não vem com o que ele compra.
   ─────────────────────────────────────────────────────────────────── */
.recusa {
    background: var(--bg-surface);
    border: 1px solid var(--border-sub);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px -26px rgba(18,33,26,0.3);
}
.recusa-cab, .recusa-par {
    display: grid; grid-template-columns: 1fr 1fr;
}
.recusa-cab { border-bottom: 1px solid var(--border-sub); }
.recusa-par + .recusa-par { border-top: 1px solid var(--border-sub); }

.recusa-cab > *, .recusa-par > * {
    padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px);
}
.recusa-cab > *:first-child, .recusa-par > *:first-child {
    border-right: 1px solid var(--border-sub);
}
/* A coluna da contrapartida ganha um fundo levemente verde: é o lado
   que o leitor deve sair lendo. */
.recusa-par > *:last-child { background: rgba(47,163,85,0.045); }
.recusa-cab > *:last-child { background: rgba(47,163,85,0.07); }

.recusa-rot {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem; font-weight: 600;
    letter-spacing: 0.11em; text-transform: uppercase;
}
.recusa-rot-nao { color: #A8433B; }
.recusa-rot-sim { color: var(--green-text); }

.recusa-t {
    margin: 0;
    font-family: var(--font-poppins);
    font-size: 0.98rem; font-weight: 600; line-height: 1.42;
    color: var(--ink); letter-spacing: -0.01em;
}
.recusa-d {
    margin: 0;
    font-family: var(--font-poppins);
    font-size: 0.92rem; font-weight: 300; line-height: 1.6;
    color: rgba(18,33,26,0.68);
}
.recusa-d strong { font-weight: 600; color: var(--ink); }

@media (max-width: 720px) {
    /* Em coluna única o par se desfaz, então cada metade precisa dizer
       de qual lado está. O rótulo, que no desktop só aparece no
       cabeçalho, passa a repetir em cada célula. */
    .recusa-cab { display: none; }
    .recusa-par { grid-template-columns: 1fr; }
    .recusa-par > *:first-child { border-right: none; border-bottom: 1px solid var(--border-sub); }
    .recusa-par .recusa-rot { display: flex; margin-bottom: 8px; }
}
@media (min-width: 721px) {
    .recusa-par .recusa-rot { display: none; }
}