/* =====================================================================
   Netifica · V7 · duas linhas: o Site e a Visibilidade
   Assenta nos tokens do style.css. Aqui vivem só os componentes novos.

   Três ideias estruturais, e nenhuma é decoração:

   1. A RESPOSTA (.answer). O hero mostra a pergunta que um cliente faz a
      uma IA e a resposta que ela dá. Três concorrentes citados e uma
      quarta linha vazia, a tracejado, onde o negócio devia estar. É a
      demonstração da invisibilidade, que é o argumento inteiro da casa.

   2. A BIFURCAÇÃO (.fork). O modelo comercial é uma escolha entre duas
      coisas, nunca um sim ou não. O separador entre opções desenha-se
      como uma forquilha para que a estrutura da página diga o mesmo que
      o texto.

   3. A COR COMO SEMÂNTICA. Marinho = o Site, o objeto que se tem.
      Teal = a Visibilidade, ser encontrado. Nenhum elemento das duas
      linhas troca de cor.

   Papel novo da tipografia: uma face monoespaçada de sistema para o
   material que é literalmente escrito numa caixa (pesquisas, respostas,
   fórmulas de preço). Sem descarregar nada.
   ===================================================================== */

:root {
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Cor por linha de negócio. Referenciar sempre estas, nunca as de base,
       para que a semântica sobreviva a qualquer mudança de paleta. */
    --c-lane-site: var(--c-primary);
    --c-lane-site-soft: var(--c-primary-soft);
    --c-lane-vis: var(--c-accent);
    --c-lane-vis-soft: var(--c-accent-soft);

    /* --c-ghost serve DESENHO, não texto. A 2,16:1 sobre o cartão branco
       não se lê, e foi o que aconteceu: "sem menção", que é a graça toda
       da assinatura do hero, era a coisa menos legível da página inteira.
       Para texto usa-se --c-ghost-ink, medido a 4,93:1 sobre branco.
       Corrigido a 11 de agosto de 2026. */
    --c-ghost: #B9AFA0;          /* contorno tracejado da vaga vazia */
    --c-ghost-ink: var(--c-ink-muted);   /* o mesmo sítio, mas legível */
    --track-mono: -.01em;
}

/* ===================================================================
   1. A RESPOSTA · assinatura do hero
   =================================================================== */

.answer {
    max-width: var(--w-col);
    /* Centrado no hero, mas com o conteúdo alinhado à esquerda: é um
       documento, e um documento não se lê ao centro. */
    margin: var(--sp-lg) auto var(--sp-xl);
    text-align: left;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    overflow: hidden;
}

.answer__bar {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem var(--sp-md);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2);
}
.answer__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-accent);
    flex: none;
}
.answer__src {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

/* O painel é uma simulação, e tem de o dizer na cara. Sem esta etiqueta
   lê-se como uma captura de ecrã real, e os nomes dos concorrentes são
   inventados. */
.answer__tag {
    margin-left: auto;
    padding: .1rem .45rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.answer__q {
    padding: var(--sp-md) var(--sp-md) var(--sp-sm);
    font-family: var(--font-mono);
    font-size: .9375rem;
    letter-spacing: var(--track-mono);
    color: var(--c-ink);
    line-height: 1.5;
}
.answer__q::before {
    content: "› ";
    color: var(--c-accent);
}
/* Rede de seguranca: mesmo que o JS reserve largura a mais, a caixa
   nunca empurra o documento para lá do ecra. */
.answer__q { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .answer__q { min-width: 0 !important; }
}
/* Os slots trocam de palavra (js/ui.js). A largura fica reservada na
   linha inteira, não em cada slot, para o "?" não saltar. */
.answer__slot {
    color: var(--c-accent-dark);
    font-weight: 600;
    transition: opacity .2s ease;
}
/* Os slots seguem a mesma regra que os nomes logo abaixo: nunca vão a
   zero. Iam, até 11 de agosto de 2026, e como a largura da linha está
   reservada o que ficava no ecrã durante 320 ms era "qual é o melhor ___
   em ___?", com dois buracos no meio da frase que é a assinatura da casa.
   Em telemóvel, onde a linha parte em duas, lia-se como página avariada.
   A regra estava escrita três parágrafos abaixo e não tinha sido aplicada
   aqui. */
.answer__slot.is-out { opacity: .18; }

.answer__list {
    padding: 0 var(--sp-md) var(--sp-md);
    display: grid;
    gap: .4rem;
}

.answer__row {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
}
.answer__rank {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--c-ink-muted);
    flex: none;
}
.answer__name { color: var(--c-ink); font-weight: 500; transition: opacity .28s ease; }
/* Os nomes nunca desaparecem por completo durante a troca: se as quatro
   linhas fossem a zero ao mesmo tempo, o painel piscava em branco de
   dois em dois segundos. Ficam esbatidos e entram desencontrados. */
.answer__name.is-out { opacity: .16; }
.answer__row:nth-child(2) .answer__name { transition-delay: .05s; }
.answer__row:nth-child(3) .answer__name { transition-delay: .10s; }

/* A vaga vazia. É o único elemento do site desenhado a tracejado, e é
   deliberado: nada mais na página pode parecer provisório. */
.answer__row--empty {
    background: transparent;
    border: 1px dashed var(--c-ghost);
    color: var(--c-ink-muted);
    align-items: center;
    justify-content: space-between;
}
.answer__row--empty .answer__you {
    font-style: italic;
}
.answer__row--empty .answer__mark {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-ghost-ink);
}

@media (prefers-reduced-motion: reduce) {
    .answer__slot, .answer__name { transition: none; }
    .answer__slot.is-out, .answer__name.is-out { opacity: 1; }
    .answer__row .answer__name { transition-delay: 0s; }
}

/* ===================================================================
   2. A BIFURCAÇÃO · o separador de decisões
   =================================================================== */

.fork { margin-top: var(--sp-lg); }

.fork__stem {
    /* A haste e a forquilha desenham-se com bordas, não com imagens:
       um bloco com borda esquerda e inferior, espelhado, dá o Y. */
    /* Metade da largura do bloco: assim as pernas caem em cima do centro
       de cada uma das duas colunas, em vez de flutuarem no meio. */
    width: 50%;
    height: 34px;
    margin: 0 auto;
    border-top: 1px solid var(--c-border-strong);
    border-left: 1px solid var(--c-border-strong);
    border-right: 1px solid var(--c-border-strong);
    border-radius: 0 0 0 0;
    position: relative;
}
.fork__stem::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -18px;
    width: 1px;
    height: 18px;
    background: var(--c-border-strong);
}

.fork__grid {
    display: grid;
    gap: var(--sp-md);
    grid-template-columns: 1fr;
}
@media (min-width: 800px) {
    .fork__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
}

/* ===================================================================
   3. AS LINHAS · cartões de negócio (site / visibilidade)
   =================================================================== */

.lane {
    display: flex;
    flex-direction: column;
    padding: var(--sp-lg);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--lane-c, var(--c-primary));
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    transition: border-color var(--t-base), transform var(--t-base);
}
.lane--site { --lane-c: var(--c-lane-site); --lane-soft: var(--c-lane-site-soft); }
.lane--vis  { --lane-c: var(--c-lane-vis);  --lane-soft: var(--c-lane-vis-soft); }

a.lane:hover, a.lane:focus-visible { transform: translateY(-3px); border-color: var(--lane-c); }

.lane__tag {
    display: inline-flex;
    align-self: flex-start;
    padding: .28rem .6rem;
    margin-bottom: var(--sp-sm);
    border-radius: var(--radius-pill);
    background: var(--lane-soft);
    color: var(--lane-c);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
}
.lane__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: 1.15;
    letter-spacing: var(--track-tight);
    color: var(--c-ink);
    margin-bottom: var(--sp-xs);
}
.lane__text { color: var(--c-ink-soft); margin-bottom: var(--sp-md); }
.lane__list { display: grid; gap: .45rem; margin-bottom: var(--sp-md); }
.lane__list li {
    display: flex;
    gap: .55rem;
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
}
.lane__list li::before {
    content: "";
    flex: none;
    width: 5px; height: 5px;
    margin-top: .58em;
    border-radius: 50%;
    background: var(--lane-c);
}
.lane__foot {
    margin-top: auto;
    padding-top: var(--sp-md);
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}
.lane__price {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: var(--track-tight);
    color: var(--c-ink);
}
.lane__price small { font-weight: 400; font-size: var(--fs-sm); color: var(--c-ink-muted); }
.lane__more { font-size: var(--fs-sm); font-weight: 600; color: var(--lane-c); }

/* ===================================================================
   4. A ESCADA · aqui a ordem é informação, por isso é numerada
   =================================================================== */

.ladder { display: grid; gap: 0; margin-top: var(--sp-lg); }
.ladder__step {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: var(--sp-md);
    padding: var(--sp-md) 0;
    border-top: 1px solid var(--c-border);
}
.ladder__step:last-child { border-bottom: 1px solid var(--c-border); }
@media (min-width: 760px) {
    .ladder__step { grid-template-columns: 2.4rem 1fr 8.5rem; align-items: baseline; }
}
.ladder__n {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--c-ink-muted);
    padding-top: .2em;
}
.ladder__what { }
.ladder__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    letter-spacing: var(--track-tight);
    color: var(--c-ink);
    margin-bottom: .2rem;
}
.ladder__text { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ladder__price {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-accent-dark);
    white-space: nowrap;
}
@media (min-width: 760px) { .ladder__price { text-align: right; } }
.ladder__price--free { color: var(--c-ink-muted); font-weight: 500; }

/* ===================================================================
   5. PLANOS · comparação, não cartões soltos
   =================================================================== */

.plans {
    display: grid;
    gap: var(--sp-md);
    grid-template-columns: 1fr;
    margin-top: var(--sp-lg);
}
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 0; } }
/* Desde que o Arranque saiu da comparação, a linha da Visibilidade tem
   duas colunas e não três. Sem isto a grelha deixava a terceira vazia. */
@media (min-width: 860px) { .plans--two { grid-template-columns: repeat(2, 1fr); } }

.plan {
    display: flex;
    flex-direction: column;
    padding: var(--sp-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}
@media (min-width: 860px) {
    .plan { border-radius: 0; border-left-width: 0; }
    .plan:first-child { border-left-width: 1px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
    .plan:last-child  { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}
.plan--pick {
    border-color: var(--pick-c, var(--c-accent));
    box-shadow: inset 0 3px 0 var(--pick-c, var(--c-accent));
}
@media (min-width: 860px) {
    .plan--pick { border-left-width: 1px; }
    .plan--pick + .plan { border-left-width: 0; }
}
.plan--quiet { background: var(--c-surface-2); }

.plan__name {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin-bottom: .35rem;
}
.plan--pick .plan__name { color: var(--pick-c, var(--c-accent-dark)); }
.plan__for { font-size: var(--fs-sm); color: var(--c-ink-soft); min-height: 3em; margin-bottom: var(--sp-md); }
.plan__price {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: var(--track-display);
    line-height: 1;
    color: var(--c-ink);
}
.plan__per { font-size: var(--fs-sm); color: var(--c-ink-muted); margin-bottom: var(--sp-md); }
.plan__list { display: grid; gap: .5rem; margin-bottom: var(--sp-lg); }
.plan__list li { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.plan__list li::before {
    content: "";
    flex: none;
    width: 14px; height: 14px;
    margin-top: .28em;
    background: currentColor;
    color: var(--c-accent);
    -webkit-mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.plan__list li.is-off { color: var(--c-ink-muted); }
.plan__list li.is-off::before {
    color: var(--c-ghost-ink);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.plan__cta { margin-top: auto; }
.plan__year {
    margin-top: var(--sp-sm);
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--c-ink-muted);
    text-align: center;
}

/* ===================================================================
   5b. O PORTÃO (.gate) · o passo obrigatório, fora da comparação

   A linha da Visibilidade tinha três colunas lado a lado: Arranque,
   Base e Ativa. Lia-se "escolho uma das três" quando o que é verdade
   é "o Arranque é obrigatório, e depois escolho uma das duas". A
   estrutura dizia o contrário do texto.

   Pior: o Arranque tem três preços (0, 190 e 290 €) e a coluna punha
   o mais caro em corpo 48px com o 0 € em cinzento de 13px por baixo.
   O leitor era ancorado no pior caso do seu ponto de vista.

   O portão resolve as duas coisas. É uma faixa a toda a largura, antes
   das mensalidades, e os três preços aparecem lado a lado e do mesmo
   tamanho, por ordem crescente, como uma pergunta sobre a situação de
   quem lê e não como um preço a engolir.
   =================================================================== */

.step-mark {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: var(--sp-sm);
}
.step-mark__n {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-accent-dark);
}
.step-mark__t {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    letter-spacing: var(--track-tight);
    color: var(--c-ink);
}

.gate {
    padding: var(--sp-lg);
    border: 1px solid var(--c-line-vis, var(--c-border));
    border-top: 3px solid var(--c-accent);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    margin-top: var(--sp-lg);
}
@media (min-width: 760px) { .gate { padding: var(--sp-xl); } }

/* 34rem é a mesma medida de leitura que o .section-text do cabeçalho de
   secção usa, e passa a ser a única do site. Estava em 46ch (438px), que
   fazia sentido enquanto a frase vivia dentro do cartão com 96px de
   padding; fora dele ficava um parágrafo estreito perdido numa faixa de
   1100px. */
.gate__lead { color: var(--c-ink-soft); max-width: var(--w-col); }

/* Os três casos. Mesmo peso, mesma dimensão, por ordem crescente: quem
   lê identifica-se com um deles em vez de comparar preços. */
.gate__cases {
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr;
    margin: var(--sp-lg) 0;
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
@media (min-width: 700px) { .gate__cases { grid-template-columns: repeat(3, 1fr); } }

.gate__case {
    background: var(--c-surface-2);
    padding: var(--sp-md) var(--sp-md) var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
/* O caso mais barato não é o mais provável, por isso não leva destaque
   de cor: leva só a posição. Destacá-lo seria vender 0 € a quem vai
   pagar 290 €, que é exatamente o erro inverso do que havia. */
.gate__case--free { background: var(--c-accent-soft); }

.gate__v {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: var(--track-display);
    line-height: 1;
    color: var(--c-ink);
}
.gate__c { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.gate__when {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.gate__what {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) { .gate__what { grid-template-columns: 1fr 1fr; column-gap: var(--sp-lg); } }
.gate__what li { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.gate__what li::before {
    content: "";
    flex: none;
    width: 14px; height: 14px;
    margin-top: .28em;
    background: currentColor;
    color: var(--c-accent);
    -webkit-mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.gate__foot {
    margin-top: var(--sp-lg);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    flex-wrap: wrap;
}
.gate__prazo { font-family: var(--font-mono); font-size: .72rem; color: var(--c-ink-muted); }

/* ===================================================================
   6. A FÓRMULA · a compra explicada com aritmética visível
   =================================================================== */

.formula {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .7rem;
    padding: var(--sp-md) var(--sp-lg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface-2);
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    color: var(--c-ink);
}
.formula b { font-weight: 700; color: var(--c-primary); }
.formula span { color: var(--c-ink-muted); font-size: var(--fs-sm); }

.ruler {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: var(--sp-md);
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
@media (min-width: 700px) { .ruler { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ruler__cell { background: var(--c-surface); padding: .7rem .3rem; text-align: center; }
.ruler__cell.is-mark { background: var(--c-primary-soft); }
.ruler__p { font-family: var(--font-mono); font-size: .7rem; color: var(--c-ink-muted); display: block; }
.ruler__v { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); }

/* ===================================================================
   7. PARES DE COMPARAÇÃO · duas colunas com um veredicto por baixo
   =================================================================== */

.duo {
    display: grid;
    gap: var(--sp-md);
    grid-template-columns: 1fr;
    margin-top: var(--sp-lg);
}
@media (min-width: 800px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); } }
.duo__side { padding: var(--sp-lg); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); }
.duo__h {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin-bottom: var(--sp-sm);
}
.duo__lead { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--track-tight); color: var(--c-ink); margin-bottom: var(--sp-sm); }
.duo__side p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.verdict {
    margin-top: var(--sp-md);
    padding: var(--sp-md) var(--sp-lg);
    border-left: 3px solid var(--c-accent);
    background: var(--c-accent-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--c-ink);
    font-size: var(--fs-sm);
}

/* ===================================================================
   8. RUBRICAS · o detalhe técnico, em lista densa e legível
   =================================================================== */

.rubs { margin-top: var(--sp-lg); border-top: 1px solid var(--c-border); }
.rub {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem;
    padding: var(--sp-md) 0;
    border-bottom: 1px solid var(--c-border);
}
@media (min-width: 760px) { .rub { grid-template-columns: 13rem 1fr; gap: var(--sp-lg); } }
.rub__k {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: var(--track-tight);
    color: var(--c-ink);
}
.rub__v { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* ===================================================================
   9. FAIXA DE FACTOS · números com fonte, não adjetivos
   =================================================================== */

.facts {
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr;
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--sp-lg);
}
@media (min-width: 700px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { background: var(--c-surface); padding: var(--sp-lg); }
.fact__n {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: var(--track-display);
    line-height: 1;
    color: var(--c-primary);
    display: block;
    margin-bottom: .35rem;
}
.fact__t { font-size: var(--fs-sm); color: var(--c-ink-soft); }
/* A faixa herda a cor da linha de negócio a que pertence. */
.facts--vis .fact__n { color: var(--c-accent-dark); }

/* ===================================================================
   10. Utilitários curtos
   =================================================================== */

.mono { font-family: var(--font-mono); letter-spacing: var(--track-mono); }
.lead-narrow { max-width: var(--w-col); }
.stack-sm > * + * { margin-top: var(--sp-sm); }
.center-cta { display: flex; justify-content: center; gap: var(--sp-sm); flex-wrap: wrap; margin-top: var(--sp-lg); }
.note-line {
    margin-top: var(--sp-md);
    font-size: var(--fs-sm);
    color: var(--c-ink-muted);
}
.section--deep .note-line { color: var(--c-on-deep-soft); }

/* ===================================================================
   V9 · A DOBRA EM DESKTOP · 11 de agosto de 2026
   -------------------------------------------------------------------
   Ficava por fazer desde o V8 e estava medido: a 1280x720 o hero da
   homepage media 1142 px e os botões acabavam 273 px abaixo da dobra.
   Quem chegava num portátil via cabeçalho, 91 px de nada, o título, e
   o topo do cartão. Nem preço, nem botão, nem o que a casa vende.

   Não se mexe na composição: o hero continua centrado, pela razão
   registada no style.css (não há coluna direita que sirva de
   contrapeso, e à esquerda a página lia-se partida). O que se corta é
   ar, e só acima dos 1024 px. No telemóvel não se toca: aí o cartão é
   a carga útil e o dedo já espera rolar.

   Depois disto o hero mede cerca de 720 px a 1280x720 e a linha das
   garantias fica na dobra, que é o sítio certo para ela.
   =================================================================== */
@media (min-width: 1024px) {

    /* 91 px de padding em cima e 91 em baixo eram um terço do problema. */
    .hero {
        padding-top: calc(var(--header-h) + var(--sp-lg));
        padding-bottom: var(--sp-xl);
    }
    .hero .hero-kicker { margin-bottom: var(--sp-sm); }

    /* O título estava no topo da escala fluida, a 68 px, e ocupava três
       linhas. A 56 px cabe em duas e continua a ser a coisa maior da
       página com folga. */
    .hero .hero-title {
        font-size: clamp(2.6rem, 1.7rem + 2.0vw, 3.25rem);
        margin-bottom: var(--sp-md);
    }

    /* O cartão media 314 px por dentro, com o dobro do ar de que
       precisa para se ler. */
    .hero .answer { margin: var(--sp-sm) auto var(--sp-md); }
    .hero .answer__bar { padding: .5rem var(--sp-md); }
    .hero .answer__q { padding: var(--sp-sm) var(--sp-md) .35rem; }
    .hero .answer__list { padding: 0 var(--sp-md) var(--sp-md); gap: .3rem; }
    .hero .answer__row { padding: .42rem .75rem; }

    /* A 544 px o subtítulo partia em três linhas. A 40rem cabe em duas,
       e duas linhas leem-se melhor do que três.

       O cartão passa à mesma medida a 11 de agosto de 2026. O hero tinha
       três larguras concêntricas (736 do bloco, 640 do subtítulo, 544 do
       cartão) e portanto três margens esquerdas: 272, 320 e 368. Um
       degrau lê-se como funil, dois leem-se como descuido. Ficam duas
       medidas: a do bloco e a de leitura. */
    .hero .hero-subtitle { max-width: var(--w-read); margin-bottom: var(--sp-sm); }
    .hero .answer { max-width: var(--w-read); }
    .hero .hero-ctas { margin-bottom: var(--sp-sm); }
}

/* O cartão do Arranque passou a começar diretamente pela caixa dos três
   casos, porque o rótulo "Passo 1" e a sua frase saíram para fora do
   cartão a 11 de agosto de 2026 (ver a nota no HTML). Sem isto, o
   margin-top de 32px do .gate__cases somava-se aos 48px de padding do
   cartão e abria 80px de vazio no topo. */
.gate > *:first-child { margin-top: 0; }