/*
 * Sensr HDI Experience — landing page de convite (Vale Assessment).
 *
 * Gerada a partir de developments/tickets/SC-2609-01/. Carregada só por
 * template-sensr-hdi-experience.php. Página só em português, sem i18n.
 *
 * Todo o CSS de página é escopado em .shx-page pelo mesmo motivo do
 * onecloud.css: o global.css do tema aplica `html, body, * { font-family }`,
 * um seletor universal que venceria regra de elemento nossa.
 */

/* ---- design system: tokens (mesma fonte do onecloud.css) ---- */
:root{
--tivit-red:#F20024;--tivit-red-press:#C10020;--tivit-red-tint:#FFE7EB;
--ink-900:#0E0E11;--ink-600:#3D3D45;--ink-400:#82828E;--ink-200:#D7D7DD;--ink-100:#EDEDF1;--ink-050:#F6F6F8;--white:#FFFFFF;
--surface-card:var(--white);--surface-inverse:var(--ink-900);
--text-title:var(--ink-900);--text-body:var(--ink-600);--text-muted:var(--ink-400);--text-on-brand:var(--white);
--border-subtle:var(--ink-100);--border-default:var(--ink-200);--border-width:1px;

/* Tipografia: a primeira correção desta página seguiu o padrão do
   onecloud.css (Montserrat/Poppins, ver "D6" naquele arquivo), mas essa não
   é a referência certa aqui — Sensr HDI Experience é subordinada ao produto
   Sensr, não ao OneCloud. Comparado ao computed style real de /tivit-sensr/
   (a página do produto Sensr em produção, confirmado em tivit.com), o corpo
   de texto usa Poppins em toda a página (não só título), e o parágrafo
   principal ("box-text") é 18px peso 300, não 16px peso 400 — é essa a razão
   de os parágrafos ainda parecerem pequenos após a primeira correção. */
--font-display:'Poppins',system-ui,sans-serif;
--font-body:'Poppins',system-ui,sans-serif;
--font-lead:'Poppins',system-ui,sans-serif;
--fw-light:300;--fw-regular:400;--fw-semibold:600;
--fs-display-2:40px;--fs-h2:40px;--fs-h4:20px;--fs-lead:18px;--fs-body:18px;--fs-small:14px;--fs-eyebrow:13px;
--lh-tight:1.2;--lh-heading:1.2;--lh-snug:1.35;--lh-body:1.5;
--ls-eyebrow:.14em;--ls-button:.02em;

--type-hero:var(--fw-regular) var(--fs-display-2)/var(--lh-tight) var(--font-display);
--type-section:var(--fw-regular) var(--fs-h2)/var(--lh-heading) var(--font-display);
--type-card-title:var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-body);
--type-lead:var(--fw-light) var(--fs-lead)/var(--lh-body) var(--font-lead);
--type-button:var(--fw-semibold) var(--fs-small)/1 var(--font-body);

--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
--container-max:1080px;--container-gutter:24px;--grid-gap:24px;
--section-y:96px;--section-y-compact:64px;
/* medida real do header do site (mesma fonte do onecloud.css): a barra de
   produto é sticky logo abaixo dele, não no topo absoluto da viewport. */
--site-header-h:60px;

--radius-card:16px;--radius-pill:999px;
--shadow-lg:0 18px 48px rgba(14,14,17,.14);

--transition-base:all .2s cubic-bezier(.4,0,.2,1);
}

/* overflow-x:clip (não hidden): "hidden" cria um scrollport próprio quando
   combinado com overflow-y:auto herdado, o que faz .shx-product-bar (sticky)
   fixar em relação a .shx-page em vez da viewport — a barra "descola" e rola
   junto com o conteúdo. "clip" corta o overflow horizontal sem criar esse
   novo contexto de rolagem, então o sticky volta a fixar na viewport. */
.shx-page{overflow-x:clip}
.shx-page .shx-wrap{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-gutter)}
.shx-page section{padding-block:var(--section-y)}
/* Mesma regra existe em onecloud.css (busque "D6"), mas lá é inerte na
   prática: todo h1/h2 real tem uma regra mais específica com `font:`
   completo (--type-hero/--type-section), que já fixa --fw-regular e vence
   por especificidade — confirmado no computed style da produção. Aqui é
   igual: fica só para h1-h4 que não tiverem uma regra própria de font. */
.shx-page h1, .shx-page h2, .shx-page h3, .shx-page h4{font-weight:var(--fw-semibold)}

/* ---- utilitários globais ---- */
/* equivalente ao .hidden do Tailwind: usado pelo quiz (aviso/resultado) e
   pelo formulário (aviso honesto de "em ativação"), não é de um componente só */
.shx-page .shx-hidden{display:none !important}
/* compensa as duas barras sticky (header do site + barra de produto) para que
   o scroll por âncora do nav não esconda o topo da seção sob elas */
.shx-page [id]{scroll-margin-top:calc(var(--site-header-h) + 64px)}

/* ---- eyebrow ---- */
.shx-page .shx-eyebrow{display:block;font:var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--tivit-red);margin-bottom:var(--sp-4)}
.shx-page .shx-eyebrow.shx-on-inverse{color:var(--white)}

/* ---- botão ---- */
.shx-page .shx-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font:var(--type-button);letter-spacing:var(--ls-button);border-radius:var(--radius-pill);border:var(--border-width) solid transparent;cursor:pointer;text-decoration:none;transition:var(--transition-base);padding:13px 28px}
.shx-page .shx-btn-primary{background:var(--tivit-red);border-color:var(--tivit-red);color:var(--text-on-brand)}
.shx-page .shx-btn-primary:hover{background:var(--tivit-red-press);border-color:var(--tivit-red-press)}
/* variante contornada, usada sobre fundo escuro (herói) */
.shx-page .shx-btn-outline{background:transparent;border-color:rgba(255,255,255,.3);color:var(--white)}
.shx-page .shx-btn-outline:hover{border-color:rgba(255,255,255,.6)}
/* variante compacta, usada na barra de produto */
.shx-page .shx-btn-sm{padding:10px 20px;font-size:var(--fs-eyebrow)}

/* ---- barra de produto (nav secundária sticky, abaixo do header do site) ---- */
.shx-page .shx-product-bar{position:sticky;top:var(--site-header-h);z-index:40;background:rgba(14,14,17,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:var(--border-width) solid rgba(255,255,255,.1)}
.shx-page .shx-product-bar .shx-wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.shx-page .shx-product-brand{display:flex;align-items:center}
/* o SVG usa fill="currentColor": herda a cor branca daqui */
.shx-page .shx-product-logo{color:var(--white);height:22px;width:auto}
.shx-page .shx-product-nav{display:flex;align-items:center;gap:var(--sp-8)}
.shx-page .shx-product-nav a{font:var(--fw-regular) var(--fs-small)/1 var(--font-body);color:rgba(255,255,255,.8);text-decoration:none;transition:var(--transition-base)}
.shx-page .shx-product-nav a:hover{color:var(--white)}

/* ---- herói ---- */
.shx-page .shx-hero{background:var(--surface-inverse);text-align:center;padding-block:var(--section-y)}
.shx-page .shx-hero .shx-wrap{max-width:760px}
.shx-page .shx-hero h1{font:var(--type-hero);color:var(--white);margin-block:var(--sp-4)}
.shx-page .shx-hero .shx-lead{font:var(--type-lead);color:rgba(255,255,255,.85);margin-bottom:var(--sp-8)}
.shx-page .shx-hero .shx-value{display:inline-block;font:var(--fw-semibold) var(--fs-body)/1 var(--font-body);color:var(--tivit-red-tint);background:rgba(242,0,36,.12);border:var(--border-width) solid rgba(242,0,36,.35);border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-5);margin-bottom:var(--sp-6)}
/* card branco simulando o convite físico, com glow vermelho por trás */
.shx-page .shx-invite-card{background:var(--white);border-radius:var(--radius-card);box-shadow:0 0 120px rgba(242,0,36,.35);padding:var(--sp-6);text-align:left;max-width:384px;margin-inline:auto;margin-bottom:var(--sp-10)}
.shx-page .shx-invite-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-6)}
/* o SVG usa fill="currentColor": herda a cor escura daqui (card é branco) */
.shx-page .shx-invite-card-logo{color:var(--ink-900);height:22px;width:auto}
.shx-page .shx-invite-card-icon{width:32px;height:32px;color:var(--ink-400)}
.shx-page .shx-invite-card-title{font:var(--type-card-title);color:var(--text-title);margin-bottom:2px}
.shx-page .shx-invite-card-subtitle{font:var(--fw-regular) var(--fs-eyebrow)/1 var(--font-body);color:var(--text-muted);margin-bottom:var(--sp-4)}
/* .shx-value por padrão é rosa claro sobre vermelho translúcido, pensado para
   fundo escuro; dentro do card branco do convite isso fica ilegível (rosa
   sobre rosa) — aqui vira chip escuro com texto branco, como no mockup */
.shx-page .shx-invite-card .shx-value{color:var(--white);background:var(--ink-900);border-color:var(--ink-900);display:block;text-align:center;margin-bottom:0}
.shx-page .shx-cta-group{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4)}
.shx-page .shx-disclosure{font:var(--fw-regular) var(--fs-small)/1.4 var(--font-body);color:rgba(255,255,255,.7);margin-top:var(--sp-5)}

/* ---- sobre ---- */
.shx-page .shx-sobre{background:var(--ink-050);text-align:center}
.shx-page .shx-sobre .shx-wrap{max-width:760px}
.shx-page .shx-sobre h2{font:var(--type-section);color:var(--text-title);margin-bottom:var(--sp-4)}
/* markup não distingue as 3 linhas por classe: o primeiro parágrafo é o
   corpo principal, os demais (contrapartida do convidado, valor de mercado)
   seguem no tom secundário/muted, como no mockup original */
.shx-page .shx-sobre p{font:var(--fw-light) var(--fs-body)/var(--lh-body) var(--font-body);color:var(--text-muted);margin-bottom:var(--sp-4)}
.shx-page .shx-sobre p:first-of-type{font:var(--fw-light) var(--fs-body)/var(--lh-body) var(--font-body);color:var(--text-body)}
.shx-page .shx-sobre p:last-of-type{margin-bottom:0}

/* ---- mini-autoavaliação (quiz) ---- */
.shx-page .shx-autoavaliacao{background:var(--white);text-align:center}
.shx-page .shx-autoavaliacao .shx-wrap{max-width:760px}
.shx-page .shx-quiz-intro{margin-bottom:var(--sp-3)}
.shx-page .shx-quiz-intro h2{font:var(--type-section);color:var(--text-title);margin-bottom:var(--sp-4)}
.shx-page .shx-quiz-intro .shx-lead{font:var(--type-lead);color:var(--text-body);max-width:600px;margin-inline:auto}
.shx-page .shx-quiz-note{font:italic var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-muted);max-width:600px;margin-inline:auto;margin-bottom:var(--sp-12)}
.shx-page .shx-quiz-questions{display:flex;flex-direction:column;gap:var(--sp-5);text-align:left}
.shx-page .shx-quiz-question{border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--sp-6)}
.shx-page .shx-quiz-question-title{font:var(--fw-semibold) var(--fs-body)/var(--lh-snug) var(--font-body);color:var(--text-title);margin-bottom:var(--sp-4)}
.shx-page .shx-quiz-options{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.shx-page .shx-quiz-label{display:block}
/* input escondido visualmente mas acessível (não usar display:none, quebra
   foco por teclado); o clique é capturado pelo <label> que envolve os dois */
.shx-page .shx-quiz-input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.shx-page .shx-quiz-option{display:block;text-align:center;border-radius:12px;border:var(--border-width) solid var(--border-subtle);padding:10px 12px;font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-body);cursor:pointer;transition:var(--transition-base)}
/* equivalente ao peer-checked: do Tailwind — depende do input e do span
   ficarem irmãos diretos na mesma ordem definida em autoavaliacao.php */
.shx-page .shx-quiz-input:checked + .shx-quiz-option{background:var(--tivit-red);color:var(--white);border-color:var(--tivit-red)}
.shx-page .shx-quiz-actions{text-align:center;margin-top:var(--sp-8)}
.shx-page .shx-quiz-warning{color:var(--tivit-red);font:var(--fw-regular) var(--fs-small)/1.4 var(--font-body);text-align:center;margin-top:var(--sp-6)}
.shx-page .shx-quiz-result{background:var(--surface-inverse);border-radius:var(--radius-card);padding:var(--sp-8);text-align:center;margin-top:var(--sp-10)}
.shx-page .shx-quiz-result-nivel{font:var(--type-card-title);font-size:24px;color:var(--white);margin-bottom:var(--sp-3)}
.shx-page .shx-quiz-result-msg{font:var(--fw-light) var(--fs-body)/var(--lh-body) var(--font-body);color:rgba(255,255,255,.75);max-width:32rem;margin-inline:auto;margin-bottom:var(--sp-6)}
.shx-page .shx-quiz-disclaimer{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:var(--sp-6)}

/* ---- como funciona ---- */
.shx-page .shx-como-funciona{background:var(--ink-050)}
/* .shx-intro também é usado por regras-ativacao.php (eyebrow + h2), regra
   única serve aos dois de propósito */
.shx-page .shx-intro{text-align:center;margin-bottom:var(--sp-10)}
.shx-page .shx-intro h2{font:var(--type-section);color:var(--text-title)}
.shx-page .shx-step-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.shx-page .shx-step{background:var(--white);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--sp-6);transition:var(--transition-base)}
.shx-page .shx-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.shx-page .shx-step-number{font:var(--fw-regular) 32px/1 var(--font-display);color:var(--tivit-red-tint);display:block;margin-bottom:var(--sp-3);-webkit-text-stroke:1.5px var(--tivit-red)}
.shx-page .shx-step h3{font:var(--type-card-title);color:var(--text-title);margin-bottom:var(--sp-2)}
.shx-page .shx-step p{font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-body)}

/* ---- entregáveis ---- */
.shx-page .shx-entregaveis h2{font:var(--type-section);color:var(--text-title);margin-bottom:var(--sp-6)}
.shx-page .shx-entregaveis-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center}
.shx-page .shx-entregaveis-list{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-6)}
.shx-page .shx-entregaveis-item{display:flex;align-items:flex-start;gap:10px}
.shx-page .shx-entregaveis-item-icon{flex:none;width:16px;height:16px;color:var(--tivit-red);margin-top:4px}
.shx-page .shx-entregaveis-item span{font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-body)}
.shx-page .shx-entregaveis-note{font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-muted)}
.shx-page .shx-radar-card{border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--sp-8);background:var(--ink-050)}
.shx-page .shx-radar-svg{width:100%;max-width:280px;margin-inline:auto;display:block}
.shx-page .shx-radar-caption{font-size:12px;color:var(--text-muted);text-align:center;margin-top:var(--sp-4)}
/* rótulos dos eixos do radar (SVG estático copiado do mockup) */
.shx-page .shx-radar-label{fill:var(--ink-600)}

/* ---- regras de ativação ---- */
.shx-page .shx-regras h2{font:var(--type-section);color:var(--text-title);text-align:center;margin-bottom:var(--sp-10)}
/* conteúdo atual são 3 cards (2 regras + 1 destaque), não mais 5: grid de 3
   colunas no desktop, ver bloco mobile mais abaixo para o empilhamento */
.shx-page .shx-regras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.shx-page .shx-regra{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--sp-6);display:flex;gap:var(--sp-3);align-items:flex-start}
.shx-page .shx-regra svg{flex:none;width:22px;height:22px;color:var(--tivit-red);margin-top:2px}
.shx-page .shx-regra h3{font:var(--type-card-title);color:var(--text-title);margin-bottom:var(--sp-2)}
.shx-page .shx-regra p{font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-body)}
/* card de destaque "prioridade de quem chega primeiro", em fundo invertido */
.shx-page .shx-regra-destaque{background:var(--surface-inverse);border-radius:var(--radius-card);padding:var(--sp-6);display:flex;flex-direction:column;justify-content:center}
.shx-page .shx-regra-destaque-title{font:var(--type-card-title);font-size:24px;color:var(--white);margin-bottom:var(--sp-2)}
.shx-page .shx-regra-destaque-text{font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:rgba(255,255,255,.7)}

/* ---- formulário / encerramento ---- */
.shx-page .shx-inscricao{background:var(--surface-inverse);text-align:center}
.shx-page .shx-inscricao .shx-wrap{max-width:640px}
.shx-page .shx-inscricao h2{font:var(--type-section);color:var(--white);margin-bottom:var(--sp-3)}
.shx-page .shx-inscricao .shx-lead{font:var(--type-lead);color:rgba(255,255,255,.85);margin-bottom:var(--sp-8)}
.shx-page .shx-form-card{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:var(--sp-8);text-align:left}
.shx-page .shx-encerrado{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-card);padding:var(--sp-8);text-align:center}
/* .shx-inscricao h2 (acima) é branco, pensado para o h2 do estado aberto,
   que fica direto no fundo escuro da seção. .shx-encerrado é um card claro
   por cima desse fundo (mesmo tom de .shx-form-card): sem esta regra, o h2
   novo (fix #6 da revisão final) herdaria branco sobre fundo branco e
   ficaria invisível. Mesma cor de título usada no restante da página. */
.shx-page .shx-encerrado h2{color:var(--text-title);margin-bottom:var(--sp-3)}
.shx-page .shx-encerrado p{font:var(--fw-light) var(--fs-body)/var(--lh-body) var(--font-body);color:var(--text-body)}
.shx-page .shx-encerrado p:last-child{margin-top:var(--sp-4)}
.shx-page .shx-encerrado a{font-weight:var(--fw-semibold);color:var(--tivit-red);text-decoration:none}
.shx-page .shx-encerrado a:hover{text-decoration:underline}
/* campos do formulário, dentro do .shx-form-card (fundo branco) */
.shx-page .shx-field{margin-bottom:var(--sp-5)}
.shx-page .shx-field label{display:block;font:var(--fw-semibold) var(--fs-small)/1 var(--font-body);color:var(--text-title);margin-bottom:6px}
.shx-page .shx-field input,.shx-page .shx-field select{width:100%;border-radius:8px;border:var(--border-width) solid var(--border-subtle);padding:10px 16px;font:var(--fw-regular) var(--fs-small)/1 var(--font-body);color:var(--text-title)}
.shx-page .shx-field input:focus,.shx-page .shx-field select:focus{outline:2px solid var(--tivit-red);outline-offset:1px}
.shx-page .shx-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.shx-page .shx-field-checkbox{display:flex;align-items:flex-start;gap:10px;margin-bottom:var(--sp-5)}
.shx-page .shx-field-checkbox label{font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-body)}
.shx-page .shx-field-checkbox input{margin-top:3px;flex:none}
.shx-page .shx-required{color:var(--tivit-red)}
/* Contact Form 7 envolve cada label+campo num <p> próprio (template padrão
   do plugin): zera a margem dele pra quem já controla o espaçamento entre
   campos é --sp-5 em .shx-field, não a margem de parágrafo do navegador. */
.shx-page .shx-field p, .shx-page .shx-field-checkbox p{margin:0}
/* mensagem de validação por campo (obrigatório, e-mail inválido etc.) */
.shx-page .wpcf7-not-valid-tip{font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--tivit-red);margin-top:6px}
/* caixa de resposta do envio (sucesso, erro, validação): CF7 desenha uma
   borda de 2px colorida por padrão; troca pelo mesmo cartão do resto da
   página, com faixa lateral e fundo tonal indicando o estado. O próprio
   CSS do plugin (includes/css/styles.css) usa seletores tipo ".wpcf7 form
   .wpcf7-response-output" — ".shx-form-card form" aqui replica o mesmo
   par classe+tipo pra vencer por especificidade, não por ordem de carga. */
.shx-page .shx-form-card form .wpcf7-response-output{margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);border-radius:8px;border:none;border-left:3px solid var(--border-default);background:var(--ink-050);font:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);color:var(--text-body)}
.shx-page .shx-form-card form.sent .wpcf7-response-output{border-left-color:#1E8E3E;background:#EAF7EE;color:#0F5C27}
.shx-page .shx-form-card form.failed .wpcf7-response-output,
.shx-page .shx-form-card form.aborted .wpcf7-response-output,
.shx-page .shx-form-card form.spam .wpcf7-response-output{border-left-color:var(--tivit-red);background:var(--tivit-red-tint);color:var(--tivit-red-press)}
.shx-page .shx-form-card form.invalid .wpcf7-response-output,
.shx-page .shx-form-card form.unaccepted .wpcf7-response-output,
.shx-page .shx-form-card form.payment-required .wpcf7-response-output{border-left-color:var(--tivit-red);background:var(--tivit-red-tint);color:var(--text-title)}
/* badges de confiança ficam soltos no fundo escuro da seção, fora do card */
.shx-page .shx-trust-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8);text-align:left}
.shx-page .shx-trust-badge p{font-size:12px;color:rgba(255,255,255,.6);line-height:var(--lh-body)}
/* aviso honesto de "formulário em ativação": já reaproveita .shx-form-card
   (card branco), só centraliza o texto para ficar consistente com .shx-encerrado */
.shx-page #inscricao-ativacao{text-align:center}

@media (min-width:640px){
  .shx-page .shx-cta-group{flex-direction:row}
}

@media (max-width:1024px){
  .shx-page .shx-entregaveis-grid{grid-template-columns:1fr}
}

@media (max-width:768px){
  .shx-page section{padding-block:var(--section-y-compact)}
  .shx-page .shx-regras-grid{grid-template-columns:1fr}
  .shx-page .shx-hero h1{font-size:var(--fs-h2)}
  .shx-page .shx-step-cards{grid-template-columns:repeat(2,1fr)}
  .shx-page .shx-trust-badges{grid-template-columns:1fr}
  /* os links de âncora já eram "hidden md:flex" no mockup original: duas
     barras fixas (header do site + barra de produto) não cabem também com
     nav de texto numa tela pequena — mesma decisão já tomada para o
     .oc-product-nav do OneCloud (ver SC-2609-02). Sem isso os links quebram
     linha e brigam com o botão de CTA. */
  .shx-page .shx-product-nav{display:none}
  /* Mesmo motivo do .oc-product-bar do OneCloud: duas barras sticky (header
     do site + barra de produto) comem altura demais numa tela pequena. Com
     o nav já escondido acima, a barra passa a conter só logo+CTA — deixá-la
     rolar junto com a página em vez de fixar é suficiente. */
  .shx-page .shx-product-bar{position:static}
}

@media (max-width:640px){
  .shx-page .shx-quiz-options{grid-template-columns:1fr}
  .shx-page .shx-field-row{grid-template-columns:1fr}
}