/* PreservaCred — páginas de serviço e planos */

/* Abertura de serviço: texto + arte lado a lado */
.svc-hero .hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--sp-16); align-items: center;
}
@media (max-width: 1024px) {
  .svc-hero .hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
}
.svc-hero .art-svg { max-width: 520px; margin: 0 auto; }

/* Abertura de serviço, como ela existe de fato no markup: .grid grid-2 com a
   coluna de arte marcada aria-hidden. A arte ACOMPANHA a coluna de texto, não
   manda nela — sem teto o SVG (viewBox 520×380) esticava para a largura cheia
   da coluna (564px a 1440 → 412px de altura) contra ~280px do texto, e os
   ~130px de sobra caíam embaixo do texto: era metade do buraco entre o hero e
   os KPIs. Com 440px a arte fecha em ~321px e as duas colunas se equilibram. */
.grid-2 > [aria-hidden="true"] > .art-svg { max-width: 440px; margin-inline: auto; }

/* Passo a passo "como chega até você" */
.svc-steps { counter-reset: step; display: grid; gap: var(--sp-6); }
.svc-steps .step {
  counter-increment: step; position: relative;
  padding-left: 64px;
}
.svc-steps .step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 600;
  color: var(--pc-petrol-400); letter-spacing: -0.02em;
}
.svc-steps .step h4 { margin-bottom: var(--sp-1); }
.svc-steps .step p { color: var(--pc-ink-500); font-size: var(--fs-sm); margin: 0; }
.section-dark .svc-steps .step p { color: var(--pc-dark-text-dim); }
.section-dark .svc-steps .step::before { color: var(--pc-gold-500); }

/* Canais de entrega (web / e-mail / API / arquivo) */
.svc-channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .svc-channels { grid-template-columns: repeat(2, 1fr); } }
.svc-channels .channel {
  border: var(--hairline); border-radius: var(--r-lg); padding: var(--sp-5);
  background: var(--pc-bg-0); text-align: center;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.svc-channels .channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--pc-petrol-300); }
.svc-channels .channel .ch-icon { width: 36px; height: 36px; margin: 0 auto var(--sp-3); color: var(--pc-petrol-600); }
.svc-channels .channel h4 { font-size: var(--fs-body); }
.svc-channels .channel p { font-size: var(--fs-xs); color: var(--pc-ink-500); margin: var(--sp-1) 0 0; }

/* Demonstrações (browser-mock / mail-mock) ganham palco */
.svc-demo { max-width: 880px; margin: 0 auto; }
.svc-demo .browser-mock, .svc-demo .mail-mock { margin: 0 auto; }

/* Comparação de serviços no hub */
.svc-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .svc-index { grid-template-columns: 1fr; } }
.svc-index .card { padding: var(--sp-8); }
.svc-index .card .art-svg { max-width: 300px; margin-bottom: var(--sp-5); }

/* Planos */
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); align-items: stretch; }
@media (max-width: 1100px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .plans-grid { grid-template-columns: 1fr; } }
.plan-card { transition: transform var(--t-base), box-shadow var(--t-base); }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }


/* Comparativo completo (/planos): o cabeçalho da tabela persiste ao rolar,
   ancorado logo abaixo do site-header sticky (68px). No desktop o wrap deixa
   de ser scroll-container (overflow visible) — senão o sticky prende ao wrap
   e o thead "some". No mobile (≤768px) a tabela .responsive empilha em cards
   e o thead nem existe (display:none), então nada muda lá. */
@media (min-width: 769px) {
  .compare-wrap { overflow-x: visible; }
  .compare-wrap table.data thead th {
    position: sticky; top: 68px; z-index: 2;
    background: var(--pc-bg-50); /* fundo sólido: linhas não vazam por trás */
  }
}

/* ===================================================================== */
/* /planos — contratação direta (à la carte + assinatura), conversão      */
/* Redesign 2026-07: cards em 8 zonas alinhadas por subgrid; matriz       */
/* comparativa Sem conta / Conta gratuita / Contratado.                   */
/* ===================================================================== */
.trust-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; padding: 0; margin: var(--sp-5) 0 0; }
.trust-bar li { font-size: var(--fs-sm); color: var(--pc-ink-500); font-weight: 500; }

.step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--pc-petrol-700); color: #fff; font-weight: 700; font-size: var(--fs-h4); margin-bottom: var(--sp-3); }

/* Utilitárias da página (extermínio de inline styles) */
.lead { color: var(--pc-ink-500); font-size: var(--fs-h4); max-width: 62ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-block { width: 100%; justify-content: center; }
.section--tint { background: var(--pc-bg-50); }

.pricing-grid { align-items: stretch; }

/* ------------------------------------------------ catálogo: grid + card */
.planos-catalogo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); align-items: stretch; }
@media (max-width: 1159px) { .planos-catalogo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .planos-catalogo { grid-template-columns: 1fr; } }

/* 8 zonas por card. Subgrid alinha as trilhas entre os cards ao pixel;   */
/* @supports abaixo dá o fallback flex + min-heights.                     */
.price-card { position: relative; display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
@supports not (grid-template-rows: subgrid) {
  .price-card { display: flex; flex-direction: column; }
  .price-z1 { min-height: 112px; }
  .price-desc { min-height: calc(1.55em * 3); }
  .price-z3 { min-height: 100px; }
  .price-api { min-height: 40px; }
  .price-para { min-height: 60px; }
  .tier--ghost { flex: 0 0 auto; min-height: 52px; }
}
@media (max-width: 640px) {
  .price-card { display: flex; flex-direction: column; }
  .tier--ghost { display: none; }
}

.price-card.is-featured { border-color: var(--pc-petrol-300); box-shadow: var(--shadow-2); }
/* Selo premium: verde-escuro + texto dourado (contraste ~7:1, AAA) — o
   par dourado-sobre-preto anterior ficava ~4:1 e ilegível. */
.price-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: var(--pc-petrol-800); color: var(--pc-gold-300); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-full); white-space: nowrap; box-shadow: var(--shadow-2); }
.price-flag svg { width: 12px; height: 12px; }

/* Z1 identidade */
.price-icon { display: flex; align-items: center; margin-bottom: var(--sp-1); }
.price-svg { width: 40px; height: 40px; color: var(--pc-petrol-600); }
.price-svg [stroke], .price-svg path, .price-svg circle, .price-svg rect { stroke: currentColor; stroke-width: 1.75; }
.price-svg .accent-fill { fill: var(--pc-gold-500); stroke: none; }
.price-svg .accent { color: var(--pc-gold-600); }
.price-card:hover .price-svg { color: var(--pc-petrol-700); }
.price-title { font-size: var(--fs-h4); margin: var(--sp-1) 0 0; }

/* Z2 descrição (3 linhas clampadas) */
.price-desc { font-size: var(--fs-sm); line-height: 1.55; color: var(--pc-ink-500); margin: var(--sp-1) 0 var(--sp-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Z3 âncora de preço */
.price-z3 { border-top: var(--hairline); padding-top: var(--sp-3); margin-bottom: var(--sp-2); }
.price-from { display: block; font-size: var(--fs-xs); font-weight: 650; color: var(--pc-ink-500); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.price-anchor { display: flex; align-items: baseline; gap: 6px; color: var(--pc-ink-900); }
.price-anchor strong { font-size: clamp(1.5rem, 1.05rem + 1vw, 1.875rem); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.price-anchor small { font-size: var(--fs-body); font-weight: 500; color: var(--pc-ink-500); }
.price-tax { font-size: var(--fs-xs); color: var(--pc-ink-400); margin: 4px 0 0; }

/* Z4 tiers (52px por linha; fantasmas mantêm a régua)                    */
/* A RÉGUA É PISO, NUNCA TETO (04/09/2026): o rótulo do pacote é copy do   */
/* catálogo — e do admin, que grava em wa_catalog_packages —, logo cresce  */
/* sem passar por aqui. Com `height: 52px` travada, "Todos os pedidos do   */
/* meu estado" ocupava 3 linhas (81px) num card de 272px e o excedente     */
/* vazava METADE PARA CADA LADO (align-items:center), escrevendo por cima  */
/* da linha vizinha. min-height deixa a linha crescer; o piso mora no      */
/* filho (52px − 1px da hairline) porque é ele que pinta hover e foco: a   */
/* faixa clicável continua preenchendo a linha inteira quando o rótulo     */
/* cabe em uma só.                                                        */
.price-list { list-style: none; padding: 0; margin: 0 0 var(--sp-2); display: flex; flex-direction: column; }
.price-list li { min-height: 52px; border-top: var(--hairline); }
/* Fantasma ELÁSTICO: a zona Z4 é uma trilha do subgrid, dimensionada pelo */
/* card com mais tiers. Se o fantasma tivesse altura fixa, uma linha de 3  */
/* linhas empurraria a trilha e abriria um vão morto nos outros três cards */
/* — ele passa a ABSORVER a sobra em vez de somar altura.                  */
.price-list li.tier--ghost { border-top-color: transparent; flex: 1 1 0; min-height: 0; }
.price-list li > a, .price-list li > .tier-static { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 51px; margin: 0 -8px; padding: 5px 8px; border-radius: var(--r-sm); color: var(--pc-ink-700); font-size: 0.9375rem; transition: background var(--t-fast) var(--ease-out); }
.price-list li > a:hover { background: var(--pc-petrol-50); }
.price-list li > a:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.price-list .tier-qty { font-weight: 500; line-height: 1.35; }
.price-list .tier-static .tier-qty { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); line-height: 1.35; }
.price-list .tier-static .tier-check { margin-top: 2px; }
.price-list .tier-price { text-align: right; line-height: 1.25; }
.price-list .tier-price strong { display: block; font-weight: 650; color: var(--pc-ink-900); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.price-list .tier-unit { font-size: var(--fs-xs); color: var(--pc-ink-400); white-space: nowrap; }
.price-list .tier-check { width: 16px; height: 16px; flex: 0 0 16px; color: var(--pc-petrol-600); }

/* Z5–Z6 metadados */
.price-api { font-size: var(--fs-xs); color: var(--pc-ink-400); margin: 0 0 var(--sp-2); }
.price-para { font-size: var(--fs-sm); color: var(--pc-ink-500); margin: 0 0 var(--sp-3); padding-top: var(--sp-3); border-top: var(--hairline); }
.price-para .price-para-label { display: block; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--pc-ink-400); margin-bottom: 2px; }

/* Z7–Z8 ação */
.price-card .btn { margin-top: auto; }
.price-detail { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--pc-petrol-600); text-align: center; }
.price-detail:hover { color: var(--pc-petrol-700); text-decoration: underline; }

#catalogo, #comparativo { scroll-margin-top: 96px; }
.price-card[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------ matriz comparativa */
.matrix-wrap { background: var(--pc-bg-0); border: var(--hairline-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: clip; }
table.matrix { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.matrix col.mx-col-recurso { width: 38%; }

/* Cabeçalho: 3 níveis com ícone + progressão visual (sem conta → contratado). */
table.matrix thead th { position: sticky; top: 68px; z-index: 2; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: var(--hairline-strong); padding: var(--sp-5) var(--sp-5) var(--sp-4); text-align: left; vertical-align: top; }
table.matrix thead th.mx-th-recurso { vertical-align: bottom; }
table.matrix thead th .mx-h { font-size: var(--fs-body); font-weight: 700; color: var(--pc-ink-900); display: block; letter-spacing: -.01em; }
table.matrix thead th .mx-sub { font-size: var(--fs-xs); font-weight: 400; color: var(--pc-ink-500); display: block; margin-top: 3px; line-height: 1.35; }
table.matrix thead th .mx-cta { display: inline-block; margin-top: 8px; font-size: var(--fs-xs); color: var(--pc-petrol-700); font-weight: 650; }
table.matrix thead th .mx-cta:hover { text-decoration: underline; }
.mx-th-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-full); margin-bottom: var(--sp-3); }
.mx-th-ico svg { width: 19px; height: 19px; }
.mx-th-sem  .mx-th-ico { background: var(--pc-bg-100); color: var(--pc-ink-400); }
.mx-th-free .mx-th-ico { background: var(--pc-petrol-100); color: var(--pc-petrol-600); }
.mx-th-pago .mx-th-ico { background: var(--pc-gold-500); color: #fff; box-shadow: 0 2px 8px rgba(176, 129, 24, .35); }
.mx-tag { position: absolute; top: var(--sp-4); right: var(--sp-5); overflow: hidden; background: var(--pc-gold-100); color: var(--pc-gold-800); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-full); }
/* Coluna "Contratado" = a vencedora: topo dourado, fundo petrol e moldura. */
table.matrix thead th.mx-th-pago { border-top: 3px solid var(--pc-gold-500); background: linear-gradient(rgba(240, 247, 248, .92), rgba(255, 255, 255, .88)); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-left: 1px solid var(--pc-petrol-200); border-right: 1px solid var(--pc-petrol-200); }
table.matrix thead th.mx-th-pago .mx-h { color: var(--pc-petrol-800); }

table.matrix td, table.matrix tbody th { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--pc-line-100); font-size: var(--fs-sm); color: var(--pc-ink-700); vertical-align: top; text-align: left; font-variant-numeric: tabular-nums lining-nums; }
table.matrix td.mx-cell-free { background: rgba(29, 131, 143, .035); }
table.matrix td.mx-cell-pago { background: var(--pc-petrol-50); border-left: 1px solid var(--pc-petrol-200); border-right: 1px solid var(--pc-petrol-200); }
table.matrix tbody tr:last-child td.mx-cell-pago { border-bottom: 1px solid var(--pc-petrol-200); }

/* Agrupadores: faixa alta, recuada, com marcador dourado. */
table.matrix tr.mx-group th { background: linear-gradient(var(--pc-bg-100), var(--pc-bg-50)); border-top: var(--hairline-strong); padding: var(--sp-5) var(--sp-5) var(--sp-3); font-size: 0.8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pc-petrol-700); }
.mx-group-label { display: inline-flex; align-items: center; gap: 10px; }
.mx-group-label::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--pc-gold-500); flex: 0 0 16px; }

table.matrix tbody th[scope="row"] { font-weight: 500; color: var(--pc-ink-900); }
table.matrix .mx-recurso-sub { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--pc-ink-400); margin-top: 3px; line-height: 1.4; }
table.matrix .mx-strong { display: block; font-weight: 600; color: var(--pc-ink-900); font-size: var(--fs-sm); }
table.matrix .mx-nota { display: block; font-size: var(--fs-xs); color: var(--pc-ink-400); margin-top: 3px; line-height: 1.4; }
table.matrix .mx-none { color: var(--pc-ink-300); font-size: var(--fs-body); }
table.matrix .mx-check { width: 18px; height: 18px; color: var(--pc-petrol-600); }
table.matrix td.mx-cell-pago .mx-check { color: var(--pc-petrol-700); }
@media (hover: hover) { table.matrix tbody tr:not(.mx-group):hover td, table.matrix tbody tr:not(.mx-group):hover th[scope="row"] { background: var(--pc-bg-100); }
  table.matrix tbody tr:not(.mx-group):hover td.mx-cell-pago { background: var(--pc-petrol-100); }
  table.matrix tbody tr.mx-service:hover th[scope="row"], table.matrix tbody tr.mx-service:hover td:not(.mx-cell-pago) { background: var(--pc-gold-100); } }

/* Linhas de serviço contratável: destaque dourado + régua interna */
table.matrix tr.mx-service th[scope="row"], table.matrix tr.mx-service td.mx-cell-sem, table.matrix tr.mx-service td.mx-cell-free { background: var(--pc-gold-50); }
table.matrix tr.mx-service th[scope="row"] { box-shadow: inset 3px 0 0 var(--pc-gold-500); font-weight: 650; }
table.matrix tr.mx-service td.mx-cell-pago { background: var(--pc-gold-100); }
table.matrix tr.mx-service td.mx-cell-pago .mx-strong { color: var(--pc-petrol-800); }
table.matrix .mx-svc-link { display: inline-block; margin-top: 5px; font-size: var(--fs-xs); color: var(--pc-petrol-600); font-weight: 650; }
table.matrix .mx-svc-link:hover { text-decoration: underline; }
.matrix-foot { font-size: var(--fs-xs); color: var(--pc-ink-400); margin-top: var(--sp-4); max-width: 90ch; }

/* Animações sutis do cabeçalho (só sem prefers-reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  .mx-th-pago .mx-th-ico { animation: mx-star 3.4s var(--ease-out) infinite; }
  @keyframes mx-star { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
  .mx-tag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-130%); animation: mx-shimmer 3.8s ease-in-out infinite; }
  @keyframes mx-shimmer { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
}

/* Mobile: rolagem horizontal com 1ª coluna fixa */
@media (max-width: 767px) {
  .matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.matrix { min-width: 760px; }
  table.matrix thead th { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--pc-bg-0); }
  table.matrix thead th.mx-th-pago { background: var(--pc-petrol-50); }
  table.matrix tbody th[scope="row"], table.matrix thead th.mx-th-recurso { position: sticky; left: 0; z-index: 1; background: var(--pc-bg-0); box-shadow: 4px 0 8px rgba(11, 43, 48, .06); }
  table.matrix tr.mx-service th[scope="row"] { background: var(--pc-gold-50); }
  table.matrix tr.mx-group th { position: static; }
}

/* Animações sutis dos SVGs dos cards (desligadas em prefers-reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  .price-svg .pulse { transform-origin: 24px 21px; animation: price-pulse 2.6s ease-out infinite; }
  .price-svg .wave { opacity: .35; animation: price-wave 2.4s ease-in-out infinite; }
  .price-svg .wave.w2 { animation-delay: .5s; }
  .price-card:hover .price-svg .track { animation: price-track 1.4s ease-in-out infinite; }
}
@keyframes price-pulse { 0% { opacity: .5; transform: scale(.55); } 70% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes price-wave { 0%,100% { opacity: .25; } 50% { opacity: .8; } }
@keyframes price-track { 0% { transform: translate(0,0); } 50% { transform: translate(9px,5px); } 100% { transform: translate(0,0); } }

/* ============================== A escada do sinal (Alertas de Insolvência)
   Quatro degraus (cautelar → RE → RJ → falência) com o número em rail à
   esquerda. A numeração aqui NÃO é decorativa: a ordem é a própria informação
   (cada degrau reduz o poder de decisão do credor), por isso é <ol>. */
.escada { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: none; }
.escada-item { display: flex; gap: var(--sp-5); align-items: flex-start; }
.escada-num {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 750; font-size: var(--fs-h4);
  color: var(--pc-petrol-700); background: var(--pc-petrol-50);
  border: 1px solid var(--pc-petrol-100);
}
.escada-item h3 { margin: 0; }
.escada-tag {
  display: inline-block; margin-left: var(--sp-2);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500;
  color: var(--pc-ink-500); letter-spacing: 0;
}
/* O degrau 1 é o argumento do produto: recebe o destaque de cor. */
.escada-item:first-child .escada-num { color: var(--pc-gold-800); background: var(--pc-gold-50); border-color: var(--pc-gold-300); }
.escada-item p { max-width: 74ch; }

@media (max-width: 700px) {
  .escada-item { gap: var(--sp-4); }
  .escada-num { width: 32px; height: 32px; font-size: var(--fs-sm); }
  .escada-tag { display: block; margin-left: 0; margin-top: 2px; }
}

/* --------------------------------------------- contexto do CNPJ (item 2.10)
   Eco do objeto de atenção que atravessou o funil: o comprador chegou de uma
   ficha e a página nomeia a empresa ACIMA dos botões. Lê como artefato (barra
   dourada à esquerda), não como copy de venda — e nunca compete com o CTA:
   corpo em --fs-sm, sem peso próprio além do <strong> do nome. */
.svc-ctx {
  margin: 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--pc-gold-300);
  max-width: 58ch;
  font-size: var(--fs-sm);
  color: var(--pc-ink-700);
  line-height: 1.5;
}
.svc-ctx strong { color: var(--pc-ink-900); font-weight: 650; }

/* --------------------------------------------- gancho, ressalva e CTA alternativo
   (esquadrão copy · doutrina de persuasão do comprador credor)

   .svc-gancho — a DOR + o RELÓGIO, no alto do hero, antes da busca e antes de
   qualquer botão. É a frase que decide se o visitante continua na página, então
   ela tem o corpo do subtítulo e a tinta mais escura, com a barra à esquerda na
   mesma linguagem do .svc-ctx: o registro é o do documento que se junta aos
   autos, não o da landing de startup.

   .svc-ressalva — o limite declarado ANTES do preço. Corpo pequeno e cor
   recuada de propósito: ela não disputa atenção com o CTA logo abaixo, ela
   existe para ser encontrada por quem procura o que está faltando.

   .svc-cta-alt — as saídas secundárias (/planos, /contato) rebaixadas de botão
   para link de texto. Dois botões cheios lado a lado empatam em peso visual e
   a decisão do hero passou a ser uma só. */
.svc-gancho {
  margin: 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  border-left: 3px solid var(--pc-gold-500);
  max-width: 62ch;
  /* MESMO corpo do subtítulo que vem logo abaixo (--fs-h4). O que separa os
     dois não é tamanho, é registro: o gancho é --pc-ink-700 com barra dourada
     (documento), o subtítulo é --pc-ink-500 sem barra (lead). Corpo menor aqui
     invertia a hierarquia — a linha mais importante da página ficava menor que
     a que só a descreve. */
  font-size: var(--fs-h4);
  line-height: 1.55;
  color: var(--pc-ink-700);
}
.svc-gancho strong { color: var(--pc-ink-900); font-weight: 650; }

.svc-ressalva {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--pc-ink-500);
}
.svc-ressalva a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.svc-cta-alt {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--pc-ink-500);
}
.svc-cta-alt a { color: var(--pc-petrol-700); font-weight: 600; }

@media (max-width: 640px) {
  /* No celular o orçamento vertical da primeira tela é o recurso escasso
     (ads-B8): o gancho desce para --fs-body, que é o corpo de leitura do site,
     e fecha dentro dos 600px sem perder uma palavra. Cortar o prazo ou o artigo
     seria pior do que reduzir dois pontos de corpo. */
  .svc-gancho { padding-left: var(--sp-3); font-size: var(--fs-body); line-height: 1.45; }
  .svc-ressalva { line-height: 1.45; }
}