/* ============================================================
   FOTON MOTOR — sistema de design "alta tensão editorial"
   Referência estética: o diagrama elétrico e a ficha técnica,
   agora com corrente a passar: linhas que se desenham, pulsos
   de energia, números que contam. Linhas de 1px, cantos de 4px,
   números tabulares. Dark-first com light mode completo.
   Movimento apenas em transform/opacity; tudo desligável em
   prefers-reduced-motion; conteúdo 100% visível sem JS.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:#0F1214;
  --surface:#171C20;
  --surface-2:#1C2227;
  --line:#2A3238;
  --line-strong:#3A444C;
  --text:#EDF0F1;
  --text-2:#A9B4BA;
  --text-3:#7E8A92;   /* 4,54:1 sobre --surface-2 (era 4,42) */

  /* acentos com função semântica fixa:
     amarelo = energia e produção · azul = veículo e movimento
     vermelho = exclusivo de lacunas críticas no Raio-X          */
  --energy:#F5C518;          /* preenchimentos: sempre amarelo */
  --energy-line:#F5C518;     /* contornos e estados: escurece no tema claro */
  --energy-text:#F5C518;
  --energy-ink:#14161A;      /* texto sobre amarelo */
  --motion:#3B82F6;
  --motion-text:#7EA8F8;
  --critical:#E5484D;
  --critical-text:#F27B7F;

  /* tinta do gradiente (título) — AA garantido nos dois temas */
  --ink-a:#F5C518;
  --ink-b:#7EA8F8;

  /* brilhos e fundos técnicos */
  --energy-glow:rgba(245,197,24,.45);
  --energy-glow-soft:rgba(245,197,24,.18);
  --motion-glow:rgba(59,130,246,.35);
  --grid-c:rgba(237,240,241,.045);
  --glow-c:rgba(245,197,24,.09);
  --header-bg:rgba(15,18,20,.78);
  --header-shadow:0 8px 24px rgba(0,0,0,.35);
  --card-shadow:0 14px 34px rgba(0,0,0,.35);
  --sheen:rgba(255,255,255,.5);

  --radius:4px;
  --maxw:1120px;
  --font-head:"Space Grotesk","Arial Narrow",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

/* light mode a sério — não é uma inversão preguiçosa */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F5F6F6;
    --surface:#FFFFFF;
    --surface-2:#ECEFF0;
    --line:#D6DCDF;
    --line-strong:#AEB8BE;
    --text:#161B1E;
    --text-2:#48535A;
    --text-3:#5C6971;
    --energy:#F5C518;
  --energy-line:#7A6000;
  --energy-ink:#14161A;
  --energy-text:#7A6000;
    --motion:#3B82F6;
    --motion-text:#1D4ED8;
    --critical:#D93036;
    --critical-text:#B4262C;
    --ink-a:#7A6000;
    --ink-b:#1D4ED8;
    --energy-glow:rgba(122,96,0,.30);
    --energy-glow-soft:rgba(245,197,24,.30);
    --motion-glow:rgba(29,78,216,.25);
    --grid-c:rgba(22,27,30,.055);
    --glow-c:rgba(245,197,24,.16);
    --header-bg:rgba(245,246,246,.82);
    --header-shadow:0 6px 20px rgba(22,27,30,.10);
    --card-shadow:0 14px 30px rgba(22,27,30,.12);
    --sheen:rgba(255,255,255,.75);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F5F6F6;
  --surface:#FFFFFF;
  --surface-2:#ECEFF0;
  --line:#D6DCDF;
  --line-strong:#AEB8BE;
  --text:#161B1E;
  --text-2:#48535A;
  --text-3:#5C6971;
  --energy:#F5C518;
  --energy-line:#7A6000;
  --energy-ink:#14161A;
  --energy-text:#7A6000;
  --motion:#3B82F6;
  --motion-text:#1D4ED8;
  --critical:#D93036;
  --critical-text:#B4262C;
  --ink-a:#7A6000;
  --ink-b:#1D4ED8;
  --energy-glow:rgba(122,96,0,.30);
  --energy-glow-soft:rgba(245,197,24,.30);
  --motion-glow:rgba(29,78,216,.25);
  --grid-c:rgba(22,27,30,.055);
  --glow-c:rgba(245,197,24,.16);
  --header-bg:rgba(245,246,246,.82);
  --header-shadow:0 6px 20px rgba(22,27,30,.10);
  --card-shadow:0 14px 30px rgba(22,27,30,.12);
  --sheen:rgba(255,255,255,.75);
  color-scheme:light;
}

/* ---------- reset e base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:clip;
}
main{flex:1}
img,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--energy-text)}
:focus-visible{outline:2px solid var(--energy-line);outline-offset:3px;border-radius:2px}
::selection{background:var(--energy);color:var(--energy-ink)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.025em}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}
h3{font-size:1.2rem}
p{max-width:70ch}
strong{font-weight:600}
.num,td.num,.stat-v{font-variant-numeric:tabular-nums}
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.9em;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:.08em .35em}

.wrap{width:min(var(--maxw),100% - 2.5rem);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--energy);color:var(--energy-ink);
  padding:.55rem 1rem;border-radius:var(--radius);
  font-weight:600;text-decoration:none;
  top:1rem;transform:translateY(-5rem);transition:transform .15s ease;
}
.skip-link:focus{transform:none;color:var(--energy-ink)}

/* palavra pintada a tinta de gradiente (amarelo -> azul).
   Fallback: cor sólida AA nos dois temas. */
.ink{color:var(--energy-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ink{
    background-image:linear-gradient(94deg,var(--ink-a) 12%,var(--ink-b) 88%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

/* ============================================================
   MOTION SYSTEM — revelação ao scroll
   Estado inicial só existe com JS (html.js); sem JS está tudo
   visível. .in-view é adicionado uma única vez pelo observer.
   ============================================================ */
html.js .rv{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
html.js .rv.in-view{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;animation-delay:0s !important;transition-delay:0s !important}
  html.js .rv{opacity:1;transform:none}
  .marquee-track{animation:none !important;transform:none !important}
  .marquee-pause{display:none}          /* já não há movimento para parar */
  .marquee::after{display:none}         /* nem faixa a esconder sob o botão */
  .hero-art .pulse{display:none}
  html.js .hero-art .flow{stroke-dasharray:none;stroke-dashoffset:0}
  .spine{display:none}
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.site-header.scrolled{
  border-bottom-color:var(--line);
  box-shadow:var(--header-shadow);
}
.site-header .wrap{
  display:flex;align-items:center;gap:1.25rem;
  min-height:64px;
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--text);
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.02em;
  white-space:nowrap;
}
.brand:hover{color:var(--text)}
.brand .mark{flex:none;display:block}
.brand .mark circle{stroke:currentColor}
.brand .mark line{stroke:var(--energy-line)}
.brand:hover .mark line{filter:drop-shadow(0 0 4px var(--energy-glow))}

.site-nav{margin-left:auto}
.site-nav ul{list-style:none;display:flex;gap:.25rem;align-items:center}
.site-nav a{
  display:block;padding:.5rem .65rem;
  text-decoration:none;font-size:.92rem;color:var(--text-2);
  border-radius:var(--radius);
  position:relative;
  transition:color .2s ease;
}
.site-nav a::after{
  content:"";position:absolute;left:.65rem;right:.65rem;bottom:.28rem;
  height:1.5px;background:var(--energy-line);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease-out);
}
.site-nav a:hover{color:var(--text)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{color:var(--text)}
.site-nav a[aria-current="page"]::after{transform:scaleX(1)}

.header-actions{display:flex;align-items:center;gap:.6rem}
.theme-toggle{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text-2);
  transition:color .2s ease,border-color .2s ease,transform .15s ease;
}
.theme-toggle:hover{color:var(--text);border-color:var(--line-strong);transform:translateY(-1px)}
.theme-toggle:active{transform:scale(.96)}
.theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon{display:none}
}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--line);border-radius:var(--radius);
  place-items:center;color:var(--text);
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.25rem;
  min-height:44px;
  border-radius:var(--radius);
  border:1px solid transparent;
  font-family:var(--font-head);
  font-weight:600;font-size:.98rem;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .18s var(--ease-out),box-shadow .25s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--energy);color:var(--energy-ink);border-color:var(--energy)}
.btn-primary::before{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:36%;
  background:linear-gradient(105deg,transparent 0%,var(--sheen) 50%,transparent 100%);
  transform:translateX(-120%) skewX(-18deg);
  transition:transform .55s ease;
  pointer-events:none;
}
.btn-primary:hover{background:#FFD52E;color:var(--energy-ink);box-shadow:0 6px 18px var(--energy-glow-soft)}
.btn-primary:hover::before{transform:translateX(460%) skewX(-18deg)}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--energy-line);color:var(--text);box-shadow:0 0 0 1px var(--energy-line) inset,0 4px 16px var(--energy-glow-soft)}
.btn-sm{padding:.4rem .8rem;min-height:38px;font-size:.88rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}

/* spinner inline (envio do formulário) */
.btn .spinner{
  width:1em;height:1em;flex:none;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- estrutura de secção estilo ficha técnica ---------- */
.section{padding-block:4.5rem;border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}
.kicker{
  display:flex;align-items:baseline;gap:.75rem;
  font-family:var(--font-head);
  font-size:.8rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:1rem;
}
.kicker .idx{
  color:var(--text-3);font-variant-numeric:tabular-nums;
  transition:color .45s ease,text-shadow .45s ease;
}
.kicker.lit .idx{color:var(--energy-text);text-shadow:0 0 14px var(--energy-glow)}
html:not(.js) .kicker .idx{color:var(--energy-text)}
.kicker::after{content:"";flex:1;height:1px;background:var(--line);align-self:center}
.section-lead{color:var(--text-2);margin-top:.75rem;max-width:62ch}

/* régua decorativa (cotas de desenho técnico) */
.ruler{display:block;width:100%;height:14px;color:var(--line-strong);margin-block:.25rem}

/* ---------- linha de energia (espinha de scroll do índice) ---------- */
.spine{
  position:fixed;left:max(14px,calc((100vw - var(--maxw))/2 - 3.4rem));
  top:96px;bottom:40px;width:2px;
  background:var(--line);
  z-index:5;pointer-events:none;
  border-radius:1px;
}
.spine-fill{
  position:absolute;inset:0;
  background:linear-gradient(180deg,var(--energy),var(--motion));
  box-shadow:0 0 10px var(--energy-glow);
  transform:scaleY(0);transform-origin:top;
  border-radius:1px;
}
@media (max-width:1279px){.spine{display:none}}

/* ---------- hero ---------- */
.hero{
  padding-block:5rem 4.5rem;border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
  background-image:
    radial-gradient(48rem 30rem at 76% 4%,var(--glow-c),transparent 62%),
    repeating-linear-gradient(0deg,var(--grid-c) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,var(--grid-c) 0 1px,transparent 1px 56px);
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.hero h1{
  margin-block:.75rem 1.1rem;
  font-size:clamp(2.4rem,6vw,4.4rem);
  letter-spacing:-.03em;line-height:1.04;
}
.hero .tagline{
  font-family:var(--font-head);font-size:.82rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--energy-text);
}
.hero .sub{color:var(--text-2);font-size:1.08rem;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-note{margin-top:1rem;font-size:.85rem;color:var(--text-3)}
.hero-art{color:var(--text-3)}
.hero-art svg{display:block;width:100%}
/* Em telemóvel o SVG desce a ~0,62 da escala do viewBox e os rótulos de
   10–12 unidades sairiam a 6–7 px reais — manchas ilegíveis. Abaixo de
   760 px fica o esquema em linha limpa; a camada de informação técnica
   continua disponível no <title>/<desc> lidos por leitor de ecrã. */
@media (max-width: 760px){
  .hero-art svg text{display:none}
  .hero-art .cota{display:none}
}

/* o esquema técnico ganha corrente quando entra em cena */
html.js .hero-art .flow{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s var(--ease-out);
}
html.js .hero-art.energize .flow{stroke-dashoffset:0}
.hero-art .flow[data-d="1"]{transition-delay:.3s}
.hero-art .flow[data-d="2"]{transition-delay:.55s}
.hero-art .flow[data-d="3"]{transition-delay:.8s}
.hero-art .flow[data-d="4"]{transition-delay:1.05s}
.hero-art .pulse{opacity:0;transition:opacity .6s ease 1.2s}
.hero-art.energize .pulse{opacity:1}
.hero-art.energize .g-energy{filter:drop-shadow(0 0 5px var(--energy-glow))}
.hero-art.energize .g-motion{filter:drop-shadow(0 0 5px var(--motion-glow))}

/* ---------- faixa marquee (termos do nicho) ---------- */
.marquee{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  padding-block:.85rem;
}
.marquee-track{
  display:flex;width:max-content;
  animation:mq 52s linear infinite;
  will-change:transform;
}
.marquee-pause{
  position:absolute;right:.6rem;top:50%;transform:translateY(-50%);z-index:2;
  background:var(--surface-2);color:var(--text-2);
  border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--font-head);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .55rem;cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
/* O botão de pausa é opaco e assenta por cima da faixa. Sem este degradê
   os termos passavam por baixo dele e ficavam cortados a meio da palavra.
   z-index abaixo do botão (2), pointer-events:none para não o tapar. */
.marquee::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:11rem;
  background:linear-gradient(90deg,transparent,var(--surface) 62%);
  pointer-events:none;z-index:1;
}
.marquee-pause:hover{color:var(--text);border-color:var(--energy-line)}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.paused .marquee-track{animation-play-state:paused}
.marquee-seg{
  display:flex;align-items:center;gap:2.2rem;
  padding-right:2.2rem;flex:none;
  font-family:var(--font-head);font-weight:600;
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;
}
.marquee-seg svg{color:var(--energy-text);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- cartões ---------- */
.card-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:2rem}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.cell{
  background:var(--surface);
  padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;gap:.65rem;
  position:relative;
}
a.cell{
  text-decoration:none;color:inherit;
  transition:background-color .2s ease,transform .25s var(--ease-out),box-shadow .25s ease;
}
a.cell:hover{
  background:var(--surface-2);color:inherit;
  transform:translateY(-3px);
  box-shadow:var(--card-shadow);
  z-index:1;
}
a.cell:hover .cell-cta{color:var(--energy-text);transform:translateX(4px)}
.cell .icon{color:var(--text-3);margin-bottom:.35rem;transition:color .2s ease}
a.cell:hover .icon{color:var(--energy-text)}
.cell.accent-energy .icon{color:var(--energy-text)}
.cell.accent-motion .icon{color:var(--motion-text)}
/* h2 em cartões que não têm título de secção por cima (cenarios.html):
   a hierarquia manda h2 logo a seguir ao h1, o tamanho mantém-se o do cartão */
.cell h3,.cell h2{font-size:1.05rem}
.cell p{font-size:.92rem;color:var(--text-2)}
.cell .cell-cta{
  margin-top:auto;padding-top:.6rem;font-size:.85rem;font-weight:600;
  font-family:var(--font-head);color:var(--text-3);letter-spacing:.03em;
  transition:color .2s ease,transform .25s var(--ease-out);
}
.cell .ref{
  position:absolute;top:1.05rem;right:1.2rem;
  font-family:var(--font-head);font-size:.72rem;color:var(--text-3);
  font-variant-numeric:tabular-nums;letter-spacing:.08em;
}

/* dossiê — biblioteca de cenários: índice numérico como marca de água */
.card-grid.dossier .cell{padding-bottom:3.8rem}
.card-grid.dossier .ref{
  top:auto;right:.9rem;bottom:.35rem;
  font-size:3.2rem;font-weight:700;letter-spacing:0;
  color:transparent;
  -webkit-text-stroke:1px var(--line-strong);
  opacity:.5;
  filter:blur(1px);
  transition:opacity .35s ease,filter .35s ease,color .35s ease,-webkit-text-stroke-color .35s ease;
  pointer-events:none;
  line-height:1;
}
.card-grid.dossier a.cell:hover .ref{
  opacity:1;filter:blur(0);
  color:var(--energy-text);
  -webkit-text-stroke-color:transparent;
}

/* ---------- tabela de especificações ---------- */
.spec-table{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:1.5rem}
.spec-table caption{text-align:left;font-family:var(--font-head);font-weight:600;padding-bottom:.7rem;color:var(--text)}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:.7rem .9rem;text-align:left;vertical-align:top}
.spec-table thead th{
  font-family:var(--font-head);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
  background:var(--surface);
}
.spec-table tbody th{font-weight:600;background:var(--surface);width:30%}
.spec-table td.ok{color:var(--text)}
.spec-table td.falta{color:var(--text-3)}
.spec-table .sim::before{content:"— ";color:var(--energy-text);font-weight:700}
.table-scroll{overflow-x:auto}

/* estatísticas tipo painel de instrumentos */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:2rem}
.stat{background:var(--surface);padding:1.6rem 1.5rem;position:relative}
.stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--energy),transparent);
  opacity:0;transition:opacity .4s ease;
}
.stat-row .in-view.stat::before,html:not(.js) .stat::before{opacity:.9}
/* A barra é decoração estática, não movimento. Com movimento reduzido o
   observer nem chega a ser criado, logo .in-view nunca aparece — e a barra
   desaparecia justamente para quem pediu menos animação. */
@media (prefers-reduced-motion: reduce){.stat::before{opacity:.9}}
.stat-v{font-family:var(--font-head);font-size:clamp(2.1rem,3.6vw,2.8rem);font-weight:700;color:var(--text);letter-spacing:-.02em}
.stat-v .unit{font-size:.55em;font-weight:600;color:var(--text-2);letter-spacing:0}
.stat-l{font-size:.85rem;color:var(--text-2);margin-top:.2rem}

/* ---------- listas técnicas ---------- */
.check-list{list-style:none;margin-top:1.2rem;display:grid;gap:.7rem}
.check-list li{
  padding-left:1.7rem;position:relative;color:var(--text-2);
}
.check-list li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:.85rem;height:1px;background:var(--energy-line);
}
.check-list li strong{color:var(--text)}

/* ---------- FAQ ---------- */
.faq{margin-top:1.5rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq details{border-top:1px solid var(--line);background:var(--surface)}
.faq details:first-child{border-top:0}
.faq summary{
  cursor:pointer;list-style:none;
  padding:1.05rem 1.3rem;
  font-family:var(--font-head);font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:color .2s ease;
}
.faq summary:hover{color:var(--energy-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.2rem;color:var(--text-3);flex:none;transition:transform .25s var(--ease-out)}
.faq details[open] summary::after{content:"–";transform:rotate(180deg)}
.faq .faq-a{padding:0 1.3rem 1.2rem;color:var(--text-2);font-size:.95rem}
.faq .faq-a p{max-width:75ch}

/* ---------- CTA final ---------- */
.cta-band{
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:2.6rem 2.2rem;
  margin-block:3.5rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;
  justify-content:space-between;
  background:
    radial-gradient(30rem 16rem at 90% 0%,var(--glow-c),transparent 65%),
    var(--surface);
  position:relative;overflow:hidden;
}
.cta-band h2{max-width:24ch}
.cta-band p{color:var(--text-2)}
/* o reset zera as margens dos <p>: sem isto o parágrafo cola-se ao título */
.cta-band h2 + p{margin-top:.55rem}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:3rem 2rem;margin-top:4rem;font-size:.9rem;color:var(--text-2)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.site-footer h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:.8rem}
.site-footer ul{list-style:none;display:grid;gap:.45rem}
.site-footer a{text-decoration:none;color:var(--text-2)}
.site-footer a:hover{color:var(--text)}
.footer-legal{
  margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--text-3);
  display:grid;gap:.4rem;
}
.footer-brand p{max-width:34ch;margin-top:.8rem;font-size:.88rem}

/* ============================================================
   RAIO-X — a ferramenta como instrumento de medição
   ============================================================ */
.raiox-shell{max-width:820px;margin-inline:auto;padding-block:2.5rem 4rem}
.raiox-head{margin-bottom:1.6rem}
.privacy-strip{
  display:flex;gap:.7rem;align-items:flex-start;
  border:1px solid var(--line);border-left:3px solid var(--energy-line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:.85rem 1rem;margin-top:1.2rem;
  font-size:.88rem;color:var(--text-2);
}
.privacy-strip svg{flex:none;color:var(--energy-text);margin-top:.15rem}

.rx-progress{margin-block:1.8rem 1.4rem}
.rx-progress-track{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.rx-progress-bar{
  height:100%;
  background:linear-gradient(90deg,var(--energy),var(--motion));
  box-shadow:0 0 12px var(--energy-glow);
  width:0%;
  transition:width .45s var(--ease-out);
  border-radius:3px;
}
.rx-progress-label{
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--font-head);font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);margin-top:.55rem;
  font-variant-numeric:tabular-nums;
}

.rx-step{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:2rem 1.8rem}
.rx-step h2{font-size:1.35rem;margin-bottom:.4rem}
.rx-step > p.rx-help{color:var(--text-2);font-size:.94rem;margin-bottom:1.4rem}

.rx-choices{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.4rem}
/* quem tem a borda é o <label>: sem o display:grid + height:100% a caixa
   não estica até à altura da célula e as tiles da mesma linha acabavam
   a alturas diferentes conforme o comprimento da descrição */
.rx-choice{position:relative;display:grid}
.rx-choice input{position:absolute;opacity:0;inset:0}
.rx-choice label{
  display:flex;gap:.9rem;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem;cursor:pointer;min-height:44px;height:100%;
  transition:border-color .2s ease,background-color .2s ease,transform .2s var(--ease-out),box-shadow .25s ease;
}
.rx-choice label:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--card-shadow)}
.rx-choice input:checked + label{
  border-color:var(--energy-line);background:var(--surface-2);
  box-shadow:0 0 0 1px var(--energy-line) inset,0 4px 16px var(--energy-glow-soft);
}
.rx-choice input:focus-visible + label{outline:2px solid var(--energy-line);outline-offset:3px}
.rx-choice .icon{flex:none;color:var(--text-3);margin-top:.1rem;transition:color .2s ease}
.rx-choice input:checked + label .icon{color:var(--energy-text)}
.rx-choice b{display:block;font-weight:600;font-family:var(--font-head)}
.rx-choice small{color:var(--text-2);font-size:.84rem;line-height:1.45;display:block;margin-top:.15rem}

fieldset.rx-q{border:0;padding:0;margin:0 0 1.6rem}
fieldset.rx-q legend{font-weight:600;margin-bottom:.65rem;font-size:.98rem;max-width:60ch}
.rx-q .hint{font-size:.85rem;color:var(--text-3);margin:-.35rem 0 .6rem;max-width:60ch}
.rx-opts{display:flex;flex-wrap:wrap;gap:.55rem}
.rx-opt{position:relative}
.rx-opt input{position:absolute;opacity:0;inset:0}
.rx-opt label{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:.65rem 1.15rem;min-height:46px;cursor:pointer;
  font-size:.95rem;color:var(--text-2);
  transition:border-color .2s ease,color .2s ease,background-color .2s ease,transform .18s var(--ease-out),box-shadow .2s ease;
}
.rx-opt label:hover{border-color:var(--line-strong);color:var(--text);transform:translateY(-1px)}
.rx-opt input:checked + label{
  border-color:var(--energy-line);color:var(--text);background:var(--surface-2);
  box-shadow:0 0 0 1px var(--energy-line) inset,0 3px 12px var(--energy-glow-soft);
}
.rx-opt input:focus-visible + label{outline:2px solid var(--energy-line);outline-offset:3px}
.rx-q.has-error legend{color:var(--critical-text)}
.rx-error{display:none;color:var(--critical-text);font-size:.86rem;margin-top:.5rem}
.rx-q.has-error .rx-error{display:block}

.rx-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}

/* resultados */
.rx-result-title{font-size:clamp(1.35rem,2.8vw,1.75rem);margin-top:2rem}
.rx-summary{
  display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;
  border:1px solid var(--line);border-left:3px solid var(--energy-line);
  border-radius:var(--radius);
  background:var(--surface);padding:1.3rem 1.5rem;margin-block:1.5rem;
  font-family:var(--font-head);font-size:.92rem;
}
.rx-summary strong{font-size:1.05rem}
.rx-summary .count{display:inline-flex;align-items:center;gap:.5rem;font-variant-numeric:tabular-nums}
.rx-summary .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot-critico{background:var(--critical)}
.dot-importante{background:var(--energy-line)}
.dot-confirmar{border:1.5px solid var(--line-strong);background:transparent}

.gap-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  padding:1.5rem 1.6rem;margin-top:1rem;
  break-inside:avoid;
}
.gap-card.critico{border-left:3px solid var(--critical)}
.gap-card.importante{border-left:3px solid var(--energy-line)}
.gap-card.confirmar{border-left:3px dashed var(--line-strong)}
.gap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.gap-head h4{font-size:1.08rem;max-width:46ch}
.badge{
  font-family:var(--font-head);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  border:1px solid;border-radius:var(--radius);
  padding:.22rem .55rem;white-space:nowrap;flex:none;
}
.badge-critico{color:var(--critical-text);border-color:var(--critical)}
.badge-importante{color:var(--energy-text);border-color:var(--energy-line)}
.badge-confirmar{color:var(--text-2);border-color:var(--line-strong);border-style:dashed}
.gap-risco{margin-top:.6rem;color:var(--text);font-size:.98rem;max-width:66ch}
.gap-card dl{margin-top:1rem;display:grid;gap:.85rem;font-size:.92rem}
.gap-card dt{
  font-family:var(--font-head);font-size:.72rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);
}
.gap-card dd{color:var(--text-2);margin-top:.15rem;max-width:72ch}
.rx-module-title{
  font-family:var(--font-head);font-size:.8rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
  margin-top:2.2rem;display:flex;align-items:center;gap:.75rem;
}
.rx-module-title::after{content:"";flex:1;height:1px;background:var(--line)}
.rx-disclaimer{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:1.1rem 1.3rem;margin-top:2rem;
  font-size:.88rem;color:var(--text-2);
}
.rx-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ============================================================
   páginas de conteúdo
   ============================================================ */
.page-head{
  padding-block:4rem 2.8rem;border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
  background-image:
    radial-gradient(34rem 20rem at 82% 0%,var(--glow-c),transparent 62%),
    repeating-linear-gradient(0deg,var(--grid-c) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,var(--grid-c) 0 1px,transparent 1px 56px);
}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.028em;line-height:1.06}
.page-head .sub{color:var(--text-2);font-size:1.05rem;max-width:62ch;margin-top:.9rem}
.prose{max-width:72ch}
.prose p{margin-top:1rem;color:var(--text-2)}
.prose p:first-child{margin-top:0}
.prose h2{margin-top:2.6rem}
.prose h3{margin-top:1.9rem}
.prose ul,.prose ol{margin:1rem 0 0 1.2rem;color:var(--text-2);display:grid;gap:.5rem}
.prose strong{color:var(--text)}
.lead{font-size:1.12rem;color:var(--text);max-width:62ch}

/* cenário — página individual */
.cenario-meta{
  display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;
}
.tag{
  font-family:var(--font-head);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:.25rem .6rem;color:var(--text-2);
}
.tag.energy{color:var(--energy-text);border-color:var(--energy-line)}
.tag.motion{color:var(--motion-text);border-color:var(--motion)}
.cenario-bloco{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.6rem}
.cenario-bloco > h2{font-size:1.15rem;display:flex;gap:.7rem;align-items:baseline}
.cenario-bloco > h2 .idx{color:var(--energy-text);font-family:var(--font-head);font-size:.8rem;font-variant-numeric:tabular-nums}

/* "Onde a apólice-tipo falha" — destaque com borda energizada */
.cenario-bloco.falha{
  border:1px solid var(--line-strong);
  border-left:3px solid var(--energy-line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:1.5rem 1.6rem 1.7rem;
  position:relative;overflow:hidden;
}
/* left:0 e não -3px: o overflow:hidden acima recorta na aresta do padding,
   e um pseudo-elemento em x ∈ [-3,0) ficava inteiramente fora da zona
   visível — o varrimento existia no CSS mas não pintava um único pixel. */
.cenario-bloco.falha::before{
  content:"";position:absolute;left:0;top:-45%;width:3px;height:45%;
  background:linear-gradient(180deg,transparent,var(--sheen),transparent);
  animation:falha-scan 3.4s ease-in-out infinite;
}
@keyframes falha-scan{
  0%{transform:translateY(0)}
  60%,100%{transform:translateY(340%)}
}

/* passos numerados com linhas de ligação */
ul.passos{
  list-style:none;margin:1.3rem 0 0 0 !important;
  display:block;counter-reset:passo;
}
ul.passos li{
  position:relative;padding:0 0 1.4rem 3.1rem;
  counter-increment:passo;color:var(--text-2);
}
ul.passos li::before{
  content:counter(passo,decimal-leading-zero);
  position:absolute;left:0;top:-.15rem;
  width:2.1rem;height:2.1rem;
  display:grid;place-items:center;
  font-family:var(--font-head);font-size:.78rem;font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--energy-text);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--surface);
}
ul.passos li::after{
  content:"";position:absolute;left:calc(1.05rem - .5px);
  top:2.15rem;bottom:.25rem;width:1px;
  background:linear-gradient(180deg,var(--energy),var(--line-strong));
  opacity:.6;
}
ul.passos li:last-child{padding-bottom:.2rem}
ul.passos li:last-child::after{display:none}

.veredicto{
  border:1px solid var(--line-strong);border-left:3px solid var(--energy-line);
  border-radius:var(--radius);background:var(--surface);
  padding:1.2rem 1.4rem;margin-top:2.4rem;
}
.veredicto h2{font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:.5rem}

/* ---------- formulários ---------- */
.form-shell{max-width:640px}
.field{margin-top:1.3rem}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.4rem}
.field .req{color:var(--energy-text)}
.field .help{font-size:.84rem;color:var(--text-3);margin-bottom:.45rem;max-width:56ch}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field select,.field textarea{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  color:var(--text);
  padding:.7rem .85rem;
  min-height:46px;
  font:inherit;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-3)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--energy-line);outline-offset:2px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--critical)}
.field-error{display:none;color:var(--critical-text);font-size:.86rem;margin-top:.4rem}
.field.invalid .field-error{display:block}
.check-field{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.3rem;flex-wrap:wrap}
.check-field .field-error{flex-basis:100%;margin-left:1.85rem}
.check-field input{width:1.15rem;height:1.15rem;margin-top:.25rem;accent-color:var(--energy);flex:none}
/* flex:1 1 0 + min-width:0 mantêm o rótulo na coluna ao lado da caixa:
   sem isto, um rótulo longo saltava para a linha de flex seguinte e ficava
   por baixo da checkbox (visível a 360 e 390 px). */
.check-field label{font-size:.9rem;color:var(--text-2);flex:1 1 0;min-width:0}
.check-field.invalid-check{border-left:3px solid var(--critical);padding-left:.8rem;margin-left:-.8rem}
.check-field.invalid-check label{color:var(--critical-text)}
.check-field .field-error{display:none}
.check-field.invalid-check .field-error{display:block}
.form-steps{display:flex;gap:.4rem;margin-block:1.8rem;font-family:var(--font-head);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.form-steps li{list-style:none;display:flex;align-items:center;gap:.4rem}
.form-steps li::after{content:"";width:2rem;height:1px;background:var(--line);display:inline-block}
.form-steps li:last-child::after{display:none}
.form-steps [aria-current="step"]{color:var(--energy-text);text-shadow:0 0 12px var(--energy-glow)}

/* Sem JavaScript não há passos: mostra-se o formulário todo de uma vez e
   escondem-se os controlos que só o JS sabe usar. Sem isto, o botão de
   submissão (que vive no passo 3) ficava inalcançável e o formulário era
   impossível de enviar. */
html:not(.js) .form-step[hidden]{display:block}
html:not(.js) .form-steps,
html:not(.js) [data-next],
html:not(.js) [data-prev],
html:not(.js) #revisao,
html:not(.js) #envio-erro{display:none}
/* O ecrã de revisão só é preenchido pelo JS. A grelha vive aqui e não num
   atributo style= para que a regra html:not(.js) acima possa escondê-lo —
   um display inline vencia-a e deixava uma caixa vazia sem JavaScript. */
#revisao{display:grid;gap:.8rem;margin-top:1.2rem}
html:not(.js) .form-step + .form-step{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:2rem}
.error-summary{
  display:none;
  border:1px solid var(--critical);border-radius:var(--radius);
  padding:1rem 1.2rem;margin-top:1.5rem;margin-bottom:1.5rem;
  color:var(--critical-text);font-size:.92rem;
}
.error-summary.visible{display:block}
.error-summary ul{margin:.5rem 0 0 1.1rem}
.error-summary a{color:inherit}
.form-confirm{
  border:1px solid var(--line-strong);border-left:3px solid var(--energy-line);
  border-radius:var(--radius);padding:2rem 1.8rem;background:var(--surface);
  position:relative;overflow:hidden;
}
.form-confirm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(24rem 12rem at 85% 0%,var(--glow-c),transparent 65%);
}
html.js .form-confirm:not([hidden]){animation:confirm-in .6s var(--ease-out)}
@keyframes confirm-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.form-feedback{
  display:none;
  border:1px solid var(--line-strong);border-left:3px solid var(--critical);
  border-radius:var(--radius);
  background:var(--surface);
  padding:1rem 1.2rem;margin-top:1.5rem;
  font-size:.92rem;color:var(--text-2);
}
.form-feedback.visible{display:block}
.form-feedback strong{color:var(--text)}

/* ---------- responsivo ---------- */

/* Cabeçalho — a navegação horizontal (marca + 7 itens + botão de tema +
   CTA) só cabe numa linha a partir de ~1000 px. Abaixo disso passa a
   menu de hambúrguer: com o limiar antigo (760 px) o bloco .header-actions
   transbordava o ecrã entre 761 e 888 px — o CTA principal ficava fora da
   janela e o overflow-x:clip do body impedia lá chegar. */
@media (max-width: 1023px){
  .site-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--line);
    margin-left:0;padding:.8rem 1.25rem 1.2rem;
  }
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:.15rem}
  .site-nav a{padding:.8rem .65rem;font-size:1rem}
  .site-nav a::after{display:none}
  .nav-toggle{display:grid;margin-left:auto}
  .header-actions{margin-left:0}
  .header-actions .btn{display:none}
}
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:520px}
  .card-grid.cols-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 760px){
  .card-grid.cols-3,.card-grid.cols-2{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .rx-choices{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .section{padding-block:3rem}
  .hero{padding-block:3.5rem 3rem}
  .cta-band{padding:1.8rem 1.4rem}
}

/* ---------- impressão (resumo do Raio-X e páginas) ---------- */
@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#f2f2f2;--line:#999;--line-strong:#666;
        --text:#000;--text-2:#222;--text-3:#555;--energy-text:#7A6000;--motion-text:#1D4ED8;--critical-text:#B4262C}
  body{background:#fff;color:#000}
  .site-header,.site-footer,.rx-nav,.rx-actions,.hero-cta,.cta-band,.skip-link,.theme-toggle,.nav-toggle,.btn,.marquee,.spine{display:none !important}
  .gap-card,.rx-summary,.rx-disclaimer{border-color:#999}
  a{text-decoration:none;color:#000}
  html.js .rv{opacity:1 !important;transform:none !important}
  .print-only{display:block !important}
}
.print-only{display:none}

/* item Raio-X visível apenas na navegação móvel (no desktop é o botão) */
.nav-raiox{display:none}
@media (max-width: 1023px){.nav-raiox{display:block}.nav-raiox a{color:var(--energy-text)}}