/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA INICIAL · topo com navegação, hero e formulário  (outubro de 2026)
   Carregado depois do estilos.css e do landing.css. Selectores com o id da
   secção para ganharem às camadas antigas do estilos.css sem !important.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── o topo fixo ──────────────────────────────────────────────────────── */
.hx-top{position:fixed; inset:0 0 auto 0; z-index:70; transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
  border-bottom:1px solid transparent}
.hx-top.solido{background:rgba(11,11,10,.86); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:rgba(242,242,238,.1)}
.hx-top-in{display:flex; align-items:center; gap:clamp(10px,1.8vw,28px); min-height:72px;
  max-width:1340px; margin:0 auto; padding-inline:var(--marg-hero,clamp(14px,2.6vw,42px))}
.hx-marca{display:inline-flex; align-items:center; gap:10px; margin-right:auto; color:#F2F2EE; text-decoration:none}
.hx-marca svg{width:30px; height:30px; flex:none}
.hx-marca b{display:flex; flex-direction:column; font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.15; color:#F2F2EE}
.hx-marca b span{font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,242,238,.55)}
.hx-nav{display:flex; gap:2px}
.hx-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 13px; border-radius:999px; color:rgba(242,242,238,.86);
  text-decoration:none; font-size:14px; font-weight:500; transition:background-color .2s, color .2s}
.hx-nav a:hover{background:rgba(242,242,238,.1); color:#fff}
.hx-tel{color:#F2F2EE; font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap}
.hx-tel:hover{color:var(--x-lima)}
.hx-cta{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; background:var(--x-lima);
  color:var(--x-preto); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap}
.hx-cta:hover{background:#DCF76E}
@media(max-width:999px){ .hx-nav{display:none} }
@media(min-width:1000px) and (max-width:1239px){ .hx-tel{display:none} .hx-nav a{padding:0 10px} }
@media(max-width:599px){ .hx-tel{display:none} .hx-marca b span{display:none} .hx-cta{padding:0 14px; font-size:13.5px} .hx-top-in{min-height:64px} }
/* o logótipo antigo dentro do hero dá lugar ao do topo */
#hstage > .hlogo{display:none}

/* ── o hero ───────────────────────────────────────────────────────────── */
#hstage.hero{min-height:100svh}
@media(min-width:1000px){ #hstage.hero{min-height:max(100svh,760px)} }
#hstage .hdizer{padding-bottom:clamp(28px,4vw,56px)}
.hx-live{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 clamp(18px,2.4vw,30px);
  padding:8px 14px 8px 12px; border-radius:999px; background:rgba(11,11,10,.55); border:1px solid rgba(242,242,238,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:13px; color:rgba(242,242,238,.8)}
.hx-live[hidden]{display:none}
.hx-live i{position:relative; width:8px; height:8px; border-radius:50%; background:var(--x-lima)}
.hx-live i::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--x-lima); animation:hx-pulso 2.4s ease-out infinite}
@keyframes hx-pulso{0%{transform:scale(.4); opacity:.9} 70%,100%{transform:scale(1.6); opacity:0}}
@media(prefers-reduced-motion:reduce){ .hx-live i::after{animation:none} }
.hx-live b{color:#fff; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
.hx-live small{font-size:12px; color:rgba(242,242,238,.65)}
.hx-live a{color:rgba(242,242,238,.6); font-size:12px; text-decoration:none; border-bottom:1px solid rgba(242,242,238,.25)}
.hx-live a:hover{color:var(--x-lima)}

.hx-baixo{display:grid; gap:24px 48px; align-items:end; margin-top:clamp(18px,2.4vw,30px)}
@media(min-width:1000px){ .hx-baixo{grid-template-columns:minmax(0,1fr) minmax(0,520px)} }
#hstage .hx-baixo .hlinha{margin:0}
.hx-esc{padding:clamp(16px,1.8vw,22px); border-radius:24px; background:rgba(11,11,10,.62); border:1px solid rgba(242,242,238,.16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.hx-esc-t{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,242,238,.7); margin:0 0 12px 4px}
.hx-esc-g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.hx-tile{display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:14px; min-height:96px;
  padding:14px; border-radius:16px; background:rgba(242,242,238,.06); border:1px solid rgba(242,242,238,.14); color:#F2F2EE;
  text-decoration:none; font-weight:600; font-size:15px; letter-spacing:-.01em;
  transition:background-color .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.2,.7,.2,1)}
.hx-tile svg{width:28px; height:28px; fill:none; stroke:var(--x-lima); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
.hx-tile:hover{background:var(--x-lima); border-color:var(--x-lima); color:var(--x-preto); transform:translateY(-3px)}
.hx-tile:hover svg{stroke:var(--x-preto)}
.hx-esc-n{display:flex; flex-wrap:wrap; gap:4px 16px; margin:12px 4px 0; font-size:12px; color:rgba(242,242,238,.62)}
.hx-esc-n span::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--x-lima); margin-right:7px; vertical-align:2px}
.hx-desce{position:absolute; z-index:2; left:50%; bottom:18px; transform:translateX(-50%); display:none; place-items:center;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(242,242,238,.3); color:#fff; text-decoration:none}
@media(min-width:1000px) and (min-height:760px){ .hx-desce{display:grid} }

/* telemóvel: o título cresce e a escolha cabe no primeiro ecrã */
@media(max-width:759px){
  #hstage .hdizer{padding-top:96px}
  #hstage .hdizer h1{font-size:clamp(38px,11.2vw,54px) !important; line-height:.98; letter-spacing:-.05em}
  #hstage .hdizer h1 span{display:inline}
  #hstage .hdizer h1 span::after{content:" "}
  .hx-esc{padding:14px}
  .hx-tile{min-height:84px; padding:12px; font-size:14px}
  .hx-tile svg{width:24px; height:24px}
  .hx-live{font-size:12px}
}

/* ── o formulário ─────────────────────────────────────────────────────── */
#analise.pedido{padding-top:clamp(64px,8vw,128px); padding-bottom:clamp(72px,9vw,150px);
  background:radial-gradient(60% 50% at 80% 10%, rgba(208,245,61,.08), transparent 70%), var(--x-preto,#0B0B0A)}
#analise .hx-pedido{display:grid; gap:40px clamp(40px,5vw,96px); max-width:1340px; margin:0 auto; align-items:start}
@media(min-width:1000px){ #analise .hx-pedido{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} #analise .hx-lado{position:sticky; top:110px} }

.hx-lado-t{color:#F2F2EE; font-size:clamp(34px,4vw,64px); font-weight:500; letter-spacing:-.05em; line-height:.98}
.hx-lado-t em{font-style:normal; color:var(--x-lima)}
.hx-lado-l{list-style:none; margin:clamp(26px,3vw,40px) 0 0; padding:0; counter-reset:hx}
.hx-lado-l li{position:relative; padding:16px 0 16px 40px; border-top:1px solid rgba(242,242,238,.12)}
.hx-lado-l li::before{content:""; position:absolute; left:4px; top:20px; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--x-lima); box-sizing:border-box}
.hx-lado-l li:last-child::before{background:var(--x-lima)}
.hx-lado-l b{display:block; color:#F2F2EE; font-size:17px; font-weight:600; letter-spacing:-.01em}
.hx-lado-l span{display:block; margin-top:4px; font-size:14.5px; line-height:1.5; color:rgba(242,242,238,.66)}
.hx-lado-ex{margin-top:20px; padding:20px 22px; border-radius:20px; background:var(--x-lima); color:var(--x-preto)}
.hx-lado-ex-k{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(11,11,10,.62)}
.hx-lado-ex-v{margin-top:6px; font-size:15px}
.hx-lado-ex-v b{color:var(--x-preto); font-size:clamp(30px,3vw,42px); font-weight:500; letter-spacing:-.04em; margin-right:4px}
.hx-lado-ex-n{margin-top:6px; font-size:13.5px; color:rgba(11,11,10,.72)}
.hx-lado-ex-n a{color:var(--x-preto); font-weight:600}
@media(max-width:999px){ .hx-lado-l,.hx-lado-ex{display:none} .hx-lado-t{font-size:clamp(30px,8vw,42px)} }

.hx-cartao{position:relative; padding:clamp(22px,3vw,44px); border-radius:28px; background:#131311;
  border:1px solid rgba(242,242,238,.1); box-shadow:0 0 0 1px rgba(208,245,61,.06), 0 40px 90px -40px rgba(0,0,0,.9)}
.hx-cartao::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(208,245,61,.55), transparent 35%, transparent 70%, rgba(208,245,61,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.hx-passos{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 clamp(22px,2.6vw,32px); padding:0}
.hx-passos li{display:flex; align-items:center; gap:10px; padding-top:12px; border-top:3px solid rgba(242,242,238,.14);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,242,238,.55); transition:color .3s, border-color .3s}
.hx-passos li i{width:8px; height:8px; border-radius:50%; background:rgba(242,242,238,.3); transition:background-color .3s}
.hx-passos li.on{border-top-color:var(--x-lima); color:#F2F2EE}
.hx-passos li.on i{background:var(--x-lima)}
.hx-passos li.feito{border-top-color:var(--x-lima); color:rgba(242,242,238,.7)}
.hx-passos li.feito i{background:var(--x-lima)}

#analise .hform{max-width:none; margin:0; text-align:left}
#analise .hf-t{font-size:clamp(28px,2.8vw,40px); text-align:left}
#analise .hf-s{text-align:left}
#analise .hf-bar,#analise .hf-passo{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0}
#analise .hf-l{display:block; text-align:left}
#analise .hf-pick{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; justify-content:stretch}
#analise .hf-pick button{display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:16px;
  min-height:104px; padding:16px; border-radius:18px; text-align:left; font-size:15px; font-weight:600;
  background:rgba(242,242,238,.04); border:1.5px solid rgba(242,242,238,.16); color:#F2F2EE;
  transition:background-color .2s, border-color .2s, color .2s, transform .25s cubic-bezier(.2,.7,.2,1)}
#analise .hf-pick button svg{width:28px; height:28px; fill:none; stroke:var(--x-lima); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
#analise .hf-pick button:hover{border-color:rgba(208,245,61,.6); transform:translateY(-2px)}
#analise .hf-pick button[aria-pressed="true"]{background:var(--x-lima); border-color:var(--x-lima); color:var(--x-preto)}
#analise .hf-pick button[aria-pressed="true"] svg{stroke:var(--x-preto)}

#analise .drop{position:relative; display:grid; justify-items:center; gap:8px; padding:28px 20px; border-radius:20px; text-align:center;
  border:1.5px dashed rgba(242,242,238,.28); background:rgba(242,242,238,.03); cursor:pointer;
  transition:border-color .2s, background-color .2s}
#analise .drop:hover,#analise .drop.sobre{border-color:var(--x-lima); background:rgba(208,245,61,.06)}
#analise .drop.tem{border-style:solid; border-color:var(--x-lima); background:rgba(208,245,61,.08)}
#analise .drop-ic{width:40px; height:40px; fill:none; stroke:var(--x-lima); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
#analise .drop b{font-size:16px; color:#F2F2EE; margin:0}
#analise .drop-s{font-size:13px; color:rgba(242,242,238,.6); max-width:42ch; line-height:1.5}
#analise .hf-opcional{text-align:center}

#analise .hform .btn-p{width:100%; min-height:60px; font-size:16.5px}
#analise .hf-note{justify-content:flex-start}
@media(max-width:599px){
  .hx-cartao{padding:20px 16px; border-radius:22px}
  #analise .hf-pick{gap:8px}
  #analise .hf-pick button{min-height:88px; padding:12px; font-size:14px}
}

/* acertos: o conteúdo do hero assenta em baixo, o título quebra linha */
#hstage .hdizer{align-self:end; padding-top:110px}
#hstage .hdizer h1{display:block}
#hstage .hdizer h1 > span{display:block}
@media(max-width:759px){ #hstage .hdizer h1 > span{display:inline} #hstage .hdizer{padding-top:88px; max-width:100vw} }
#analise .hf-pick,#analise .hf-pick-3{display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important}
#analise .hf-pick button{grid-column:auto !important; width:auto !important; flex:none !important}
.hx-top-in{max-width:none}
@media(max-width:759px){
  #hstage .hdizer h1{height:auto !important; max-height:none !important; overflow:visible !important; white-space:normal !important;
    font-size:clamp(34px,10.2vw,48px) !important}
  #hstage .hdizer h1 > span{display:block !important; white-space:normal !important; text-align:left !important; transform:none !important}
}
@media(max-width:759px){ #hstage.hero{min-height:0 !important; height:auto !important} #hstage .hdizer{padding-bottom:36px} }

/* ── o hero, segunda volta ────────────────────────────────────────────── */
.hx-esq{display:grid; gap:clamp(18px,2.4vw,28px); align-content:end}
.hx-factos{display:flex; flex-wrap:wrap; gap:10px 0; margin:0}
.hx-factos div{padding:4px clamp(14px,1.6vw,24px) 4px 0; margin-right:clamp(14px,1.6vw,24px); border-right:1px solid rgba(242,242,238,.2)}
.hx-factos div:last-child{border-right:0; margin-right:0}
.hx-factos dt{color:#fff; font-size:clamp(22px,2vw,30px); font-weight:500; letter-spacing:-.04em; line-height:1}
.hx-factos dd{margin:6px 0 0; font-size:13px; color:rgba(242,242,238,.7)}
@media(max-width:759px){ .hx-factos dt{font-size:20px} .hx-factos dd{font-size:12px} .hx-factos div{padding-right:12px; margin-right:12px} }

/* o risco por baixo de "pague menos", desenhado à entrada */
#hstage h1 em{position:relative; display:inline-block}
.hx-risco{position:absolute; left:0; right:0; bottom:-.08em; width:100%; height:.2em; overflow:visible}
.hx-risco path{fill:none; stroke:var(--x-lima); stroke-width:6; stroke-linecap:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:0}
@media(prefers-reduced-motion:no-preference){
  .hx-risco path{animation:hx-risco .6s .45s cubic-bezier(.2,.7,.2,1) both}
  #hstage h1 > span{animation:hx-sobe .6s cubic-bezier(.2,.7,.2,1) both}
  #hstage h1 > span:nth-child(2){animation-delay:.08s}
  #hstage h1 > span:nth-child(3){animation-delay:.16s}
  .hx-live,.hx-baixo{animation:hx-sobe .6s .22s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes hx-risco{from{stroke-dashoffset:1}}
@keyframes hx-sobe{from{opacity:0; transform:translateY(18px)}}
@media(max-width:759px){ .hx-risco path{stroke-width:4} }
/* o risco passa a ser um fundo: mede sempre a largura certa da palavra */
.hx-risco{display:none}
#hstage h1 em{text-decoration:none !important; padding-bottom:.04em;
  background:linear-gradient(var(--x-lima),var(--x-lima)) 0 96% / 100% .06em no-repeat}
@media(prefers-reduced-motion:no-preference){ #hstage h1 em{animation:hx-sublinha .6s .45s cubic-bezier(.2,.7,.2,1) both} }
@keyframes hx-sublinha{from{background-size:0 .06em}}

/* ── hero, terceira volta: a escolha e os factos ──────────────────────── */
.hx-esc{padding:clamp(18px,1.8vw,24px); border-radius:28px; background:linear-gradient(160deg, rgba(30,30,26,.82), rgba(11,11,10,.78));
  border:1px solid rgba(208,245,61,.22); box-shadow:0 30px 70px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06)}
.hx-esc-cab{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 4px 14px}
.hx-esc-cab .hx-esc-t{margin:0; color:#fff}
.hx-esc-tempo{font-size:12px; color:rgba(242,242,238,.6); white-space:nowrap}
.hx-esc-tempo::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--x-lima); margin-right:7px; vertical-align:1px}
.hx-tile{position:relative; min-height:128px; padding:16px; gap:18px; border-radius:20px; background:rgba(242,242,238,.05);
  border:1px solid rgba(242,242,238,.14); overflow:hidden}
.hx-tile > svg:first-child{width:44px; height:44px; padding:9px; border-radius:14px; background:rgba(208,245,61,.12); box-sizing:border-box; stroke-width:2}
.hx-tile-t{display:grid; gap:3px}
.hx-tile-t b{font-size:16px; font-weight:600; letter-spacing:-.01em; color:inherit}
.hx-tile-t small{font-size:12.5px; font-weight:500; color:rgba(242,242,238,.6)}
.hx-tile-seta{position:absolute; top:14px; right:14px; width:18px !important; height:18px !important; padding:0 !important; background:none !important;
  fill:none; stroke:rgba(242,242,238,.45) !important; stroke-width:2 !important; transition:transform .25s cubic-bezier(.2,.7,.2,1), stroke .2s}
.hx-tile:hover{background:var(--x-lima); border-color:var(--x-lima); color:var(--x-preto); transform:translateY(-4px);
  box-shadow:0 18px 40px -14px rgba(208,245,61,.5)}
.hx-tile:hover > svg:first-child{background:rgba(11,11,10,.12); stroke:var(--x-preto)}
.hx-tile:hover .hx-tile-t small{color:rgba(11,11,10,.7)}
.hx-tile:hover .hx-tile-seta{stroke:var(--x-preto) !important; transform:translate(2px,-2px)}
.hx-tile:first-child{border-color:rgba(208,245,61,.45)}
@media(max-width:759px){
  .hx-tile{min-height:112px; padding:12px; gap:12px}
  .hx-tile > svg:first-child{width:38px; height:38px; padding:8px}
  .hx-tile-t b{font-size:14px} .hx-tile-t small{font-size:11px}
  .hx-esc-cab{flex-direction:column; gap:4px}
}

.hx-factos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-width:600px}
.hx-factos div{margin:0 !important; padding:16px 16px 14px !important; border:1px solid rgba(242,242,238,.14) !important; border-radius:18px;
  background:rgba(11,11,10,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:relative; overflow:hidden}
.hx-factos div::before{content:""; position:absolute; left:16px; right:16px; top:0; height:2px; background:var(--x-lima); border-radius:0 0 2px 2px}
.hx-factos dt{color:var(--x-lima) !important; font-size:clamp(24px,2.3vw,34px) !important; font-weight:500; letter-spacing:-.045em}
.hx-factos dd{margin-top:8px !important; font-size:13px !important; line-height:1.35; color:rgba(242,242,238,.75) !important}
@media(max-width:759px){
  .hx-factos{gap:6px}
  .hx-factos div{padding:12px 10px 10px !important; border-radius:14px}
  .hx-factos div::before{left:10px; right:10px}
  .hx-factos dt{font-size:19px !important} .hx-factos dd{font-size:11.5px !important}
}
.hx-factos{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.5fr)}

/* ══ A PÁGINA INICIAL COM A MESMA MEDIDA DAS PÁGINAS DE ZONA (12 out.) ═════
   Topo sólido e preso, com a mesma largura e altura das zonas. Hero com o
   tamanho do das zonas: texto à esquerda, a escolha da fatura num cartão à
   direita, tudo dentro de 1340 px. */
.hx-top{position:sticky; top:0; background:rgba(11,11,10,.86); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgba(242,242,238,.1)}
.hx-top-in{max-width:1340px !important; margin:0 auto; padding-inline:var(--marg-hero,clamp(14px,2.6vw,42px)); min-height:80px}
#hstage.hero{min-height:0 !important; height:auto !important; display:block}
#hstage .hdizer{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(40px,5vw,96px);
  align-items:center; max-width:1340px; margin:0 auto; width:100%; box-sizing:border-box;
  padding:clamp(40px,4.6vw,76px) var(--marg-hero,clamp(14px,2.6vw,42px)) clamp(56px,6vw,96px) !important}
#hstage .hdizer > .hx-live{grid-column:1; justify-self:start}
#hstage .hdizer > h1{grid-column:1; font-size:clamp(40px,5.2vw,84px) !important; line-height:.95 !important; letter-spacing:-.055em !important; max-width:15ch; margin:0}
#hstage .hdizer > h1 > span{display:inline !important; text-align:left !important; padding:0 !important; margin:0 !important; transform:none}
#hstage .hdizer > h1 > span::after{content:" "}
#hstage .hx-baixo{display:contents}
#hstage .hx-esq{grid-column:1; margin-top:clamp(20px,2.4vw,32px)}
#hstage .hx-esq .hlinha{max-width:52ch; font-size:clamp(16px,1.3vw,19px)}
#hstage .hx-esc{grid-column:2; grid-row:1 / span 3; align-self:center}
#hstage .hx-esc-g{grid-template-columns:1fr}
#hstage .hx-tile{flex-direction:row; align-items:center; justify-content:flex-start; min-height:84px; gap:16px}
#hstage .hx-tile-seta{top:50%; transform:translateY(-50%)}
#hstage .hx-tile:hover .hx-tile-seta{transform:translate(2px,-50%)}
.hx-desce{display:none !important}
/* a fotografia: mais escura à esquerda, como nas zonas */
#hstage .hbg{inset:0 !important; height:100% !important; top:0 !important}
#hstage .hbg img{width:100%; height:100%; object-fit:cover}
#hstage::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(11,11,10,.92) 0%, rgba(11,11,10,.72) 50%, rgba(11,11,10,.4) 100%), linear-gradient(0deg, #0B0B0A 0%, rgba(11,11,10,0) 30%)}
@media(max-width:999px){
  #hstage .hdizer{grid-template-columns:1fr; padding-top:28px !important}
  #hstage .hx-esc{grid-column:1; grid-row:auto; margin-top:22px}
  #hstage .hdizer > h1{font-size:clamp(34px,9.6vw,46px) !important; max-width:none}
  #hstage .hx-esc-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  #hstage .hx-tile{flex-direction:column; align-items:flex-start; min-height:112px}
  #hstage .hx-tile-seta{top:12px; transform:none}
}
#hstage .hdizer > h1,#hstage .hdizer > h1 > span{white-space:normal !important; width:auto !important}
#hstage .hdizer > h1{display:block !important}

/* ══ a escolha da fatura, limpa: sem caixa nem cartões (12 out.) ═══════════ */
#hstage .hx-esc{padding:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
#hstage .hx-esc-cab{margin:0 0 6px}
#hstage .hx-esc-g{grid-template-columns:1fr !important; gap:0; border-top:1px solid rgba(242,242,238,.22)}
#hstage .hx-tile{flex-direction:row !important; align-items:center !important; min-height:0 !important; gap:18px; padding:22px 4px !important;
  border:0; border-bottom:1px solid rgba(242,242,238,.22); border-radius:0; background:none !important; box-shadow:none !important;
  transform:none !important; overflow:visible; transition:color .2s, padding .25s cubic-bezier(.2,.7,.2,1)}
#hstage .hx-tile:first-child{border-color:rgba(242,242,238,.22)}
#hstage .hx-tile > svg:first-child{width:30px !important; height:30px !important; padding:0 !important; background:none !important; border-radius:0; stroke:var(--x-lima)}
#hstage .hx-tile-t{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
#hstage .hx-tile-t b{font-size:clamp(22px,2vw,30px); font-weight:500; letter-spacing:-.035em; color:#F2F2EE; transition:color .2s}
#hstage .hx-tile-t small{font-size:13px; color:rgba(242,242,238,.55)}
#hstage .hx-tile-seta{position:static !important; margin-left:auto; width:22px !important; height:22px !important; transform:none !important;
  stroke:rgba(242,242,238,.5) !important}
#hstage .hx-tile:hover{padding-left:12px !important; color:inherit}
#hstage .hx-tile:hover .hx-tile-t b{color:var(--x-lima)}
#hstage .hx-tile:hover .hx-tile-t small{color:rgba(242,242,238,.75)}
#hstage .hx-tile:hover > svg:first-child{stroke:var(--x-lima)}
#hstage .hx-tile:hover .hx-tile-seta{stroke:var(--x-lima) !important; transform:translate(3px,-3px) !important}
#hstage .hx-esc-n{margin:14px 0 0}
@media(max-width:999px){
  #hstage .hx-esc-g{grid-template-columns:1fr !important}
  #hstage .hx-tile{flex-direction:row !important; padding:16px 2px !important}
  #hstage .hx-tile > svg:first-child{width:26px !important; height:26px !important}
  #hstage .hx-tile-t b{font-size:21px}
  #hstage .hx-tile-t small{font-size:12px}
  #hstage .hx-tile-seta{top:auto !important}
}

/* ── potência contratada em botões ───────────────────────────────────── */
#analise .hf-kva{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px}
#analise .hf-kva button{min-height:44px; padding:0 16px; border-radius:999px; cursor:pointer;
  background:transparent; border:1.5px solid rgba(242,242,238,.2); color:#F2F2EE; font-weight:600; font-size:14px; line-height:1; font-family:inherit;
  transition:background-color .2s, border-color .2s, color .2s}
#analise .hf-kva button:hover{border-color:rgba(208,245,61,.6)}
#analise .hf-kva button[aria-pressed="true"]{background:var(--x-lima); border-color:var(--x-lima); color:var(--x-preto)}
@media(max-width:599px){ #analise .hf-kva button{padding:0 13px; font-size:13.5px} }

/* ── tipo de fatura: só ícone e texto, sem caixa ─────────────────────── */
#analise .hf-pick{gap:6px !important}
#analise .hf-pick button{background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  min-height:0 !important; padding:10px 0 12px !important; gap:10px !important; transform:none !important;
  color:rgba(242,242,238,.6) !important; position:relative; transition:color .2s}
#analise .hf-pick button::after{content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; border-radius:2px;
  background:var(--x-lima); opacity:0; transform:scaleX(.4); transform-origin:left; transition:opacity .2s, transform .25s ease}
#analise .hf-pick button svg{stroke:rgba(208,245,61,.6) !important; transition:stroke .2s}
#analise .hf-pick button:hover{color:#F2F2EE !important}
#analise .hf-pick button:hover svg{stroke:var(--x-lima) !important}
#analise .hf-pick button[aria-pressed="true"]{color:#fff !important}
#analise .hf-pick button[aria-pressed="true"] svg{stroke:var(--x-lima) !important}
#analise .hf-pick button[aria-pressed="true"]::after{opacity:1; transform:none}
#analise .hf-pick button:focus-visible{outline:2px solid var(--x-lima); outline-offset:4px}

/* ══ formulário mais sóbrio: menos enfeite, mais formulário ══════════════ */
.hx-cartao{border-radius:16px !important; background:#141412 !important; border:1px solid rgba(242,242,238,.12) !important; box-shadow:none !important}
.hx-cartao::before,.hx-cartao::after{display:none !important}
.hx-passos{display:none !important}
.hx-lado-t em{color:inherit !important}
#analise .hf-passo{display:block !important; margin:0 0 6px !important; text-align:left !important; text-transform:none !important;
  letter-spacing:0 !important; font-size:13.5px !important; font-weight:500 !important; color:rgba(242,242,238,.55) !important}
#analise .hf-bar{display:none !important}
#analise .hf-t{font-size:clamp(24px,2.2vw,30px) !important; letter-spacing:-.02em !important; margin-bottom:4px !important}
#analise .hf-s{font-size:15px !important; color:rgba(242,242,238,.6) !important; margin-bottom:28px !important}
#analise .hf-l,#analise .f label,#analise .hf-etapa > .f > label{text-transform:none !important; letter-spacing:0 !important;
  font-size:15px !important; font-weight:500 !important; color:#F2F2EE !important; margin-bottom:10px !important}
#analise .f label u{color:rgba(242,242,238,.5) !important}
#analise .hf-kva button{border-radius:8px !important; min-height:42px !important; border-width:1px !important; font-weight:500 !important}
#analise .drop{border-radius:12px !important}
#analise #hf-continuar,#analise #send{border-radius:12px !important; min-height:54px !important}
#analise .hf-note{display:block !important; text-align:left !important; text-transform:none !important; letter-spacing:0 !important;
  font-size:13.5px !important; font-weight:400 !important; color:rgba(242,242,238,.5) !important; margin-top:18px !important}
#analise .hf-note span::before{display:none}

/* ── tipo de fatura: opções em linha, com marca de escolha ───────────── */
#analise .hf-pick,#analise .hf-pick-3{display:flex !important; flex-wrap:wrap; gap:6px 28px !important; margin-bottom:6px}
#analise .hf-pick button{flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important;
  padding:10px 0 !important; min-height:44px !important; font-size:16px !important; font-weight:500 !important; color:rgba(242,242,238,.85) !important}
#analise .hf-pick button::before{content:""; flex:none; width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(242,242,238,.35);
  box-sizing:border-box; transition:border-color .15s, box-shadow .15s, background-color .15s}
#analise .hf-pick button::after{display:none !important}
#analise .hf-pick button svg{width:22px !important; height:22px !important; stroke:var(--x-lima) !important; order:0}
#analise .hf-pick button:hover{color:#fff !important}
#analise .hf-pick button:hover::before{border-color:var(--x-lima)}
#analise .hf-pick button[aria-pressed="true"]{color:#fff !important; font-weight:600 !important}
#analise .hf-pick button[aria-pressed="true"]::before{border-color:var(--x-lima); background:var(--x-lima); box-shadow:inset 0 0 0 4px #141412}
@media(max-width:599px){ #analise .hf-pick,#analise .hf-pick-3{flex-direction:column; gap:0 !important}
  #analise .hf-pick button{border-bottom:1px solid rgba(242,242,238,.08) !important; padding:12px 0 !important} }
#analise .hf-pick,#analise .hf-pick-3{margin-bottom:22px !important}