/* ===================================================================
   Parceiro Comercial — landing white-label (mockup)

   PALETA NEUTRA POR DECISÃO: a página é genérica e a única cor forte
   vem do cadastro do parceiro (--marca). Todo o resto é cinza neutro,
   para que qualquer marca caia bem por cima. O padrão é grafite —
   monocromático. A única cor forte vem de ParceiroComercial.CorPrimaria.
   =================================================================== */
:root{
  --papel:#F6F6F7; --superficie:#FFFFFF; --superficie-2:#EFF0F1; --superficie-3:#E7E8EA;
  --tinta:#17191C; --tinta-2:#5B6169; --tinta-3:#8C9299;
  --linha:#E4E5E8; --linha-forte:#C9CCD1;
  --breu:#16181B; --breu-2:#212429;
  --claro:#F2F3F4; --claro-2:#A9AEB4;

  --marca:#2E3238; --marca-escura:#16181B; --marca-suave:#EDEEEF; --marca-contraste:#FFFFFF;
  --ok:#3B7A5A; --ok-suave:#EAF1ED;

  --mapa-terra:#E4E6E9; --mapa-borda:#BFC3C9; --mapa-fundo:#F1F2F3;
  --sombra:0 1px 2px rgba(16,18,20,.05), 0 14px 30px -16px rgba(16,18,20,.24);
  --sombra-alta:0 2px 4px rgba(16,18,20,.06), 0 26px 50px -22px rgba(16,18,20,.32);
  --r:8px; --r-sm:5px; --max:1120px;
  color-scheme: light;            /* popup do <select>, scrollbar e caret nativos */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#0F1113; --superficie:#17191C; --superficie-2:#1E2125; --superficie-3:#262A2F;
    --tinta:#E9EAEC; --tinta-2:#A5ABB2; --tinta-3:#7C838B;
    --linha:#282C31; --linha-forte:#3B4046;
    --breu:#0B0C0E; --breu-2:#15171A;
    --claro:#F2F3F4; --claro-2:#A9AEB4;
    --marca:#E6E8EB; --marca-escura:#FFFFFF; --marca-suave:#23262A; --marca-contraste:#16181B;
    --ok:#63B08C; --ok-suave:#16241E;
    --mapa-terra:#23262A; --mapa-borda:#3B4046; --mapa-fundo:#101214;
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 14px 30px -16px rgba(0,0,0,.8);
    --sombra-alta:0 2px 4px rgba(0,0,0,.55), 0 26px 50px -22px rgba(0,0,0,.85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --papel:#0F1113; --superficie:#17191C; --superficie-2:#1E2125; --superficie-3:#262A2F;
  --tinta:#E9EAEC; --tinta-2:#A5ABB2; --tinta-3:#7C838B;
  --linha:#282C31; --linha-forte:#3B4046;
  --breu:#0B0C0E; --breu-2:#15171A;
  --claro:#F2F3F4; --claro-2:#A9AEB4;
  --marca:#E6E8EB; --marca-escura:#FFFFFF; --marca-suave:#23262A; --marca-contraste:#16181B;
  --ok:#63B08C; --ok-suave:#16241E;
  --mapa-terra:#23262A; --mapa-borda:#3B4046; --mapa-fundo:#101214;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 14px 30px -16px rgba(0,0,0,.8);
  --sombra-alta:0 2px 4px rgba(0,0,0,.55), 0 26px 50px -22px rgba(0,0,0,.85);
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}   /* display:grid do monograma vence o hidden sem isto */
body{margin:0; background:var(--papel); color:var(--tinta);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; padding-bottom:114px;}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif; margin:0; text-wrap:balance; letter-spacing:-.02em;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
button,input,select{font:inherit; color:inherit;}
:where(a,button,input,select,[tabindex]):focus-visible{outline:2.5px solid var(--marca); outline-offset:3px; border-radius:4px;}
.env{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:20px;}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-3);}
.tit-sec{font-size:clamp(1.3rem,3.4vw,1.62rem); font-weight:600; line-height:1.2; margin-top:6px;}

/* ---------- barra de tema ---------- */
.demo{position:sticky; top:0; z-index:70; color:var(--claro);
  background:rgba(11,12,14,.62);
  background:color-mix(in srgb, var(--breu) 62%, transparent);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);}
.demo-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 18px; padding:9px 20px; max-width:var(--max); margin-inline:auto;}
.icone-btn{
  width:30px; height:30px; flex:none; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.24); background:none; color:var(--claro-2);
  display:grid; place-items:center; transition:color .15s, border-color .15s;
}
.icone-btn:hover{color:var(--claro); border-color:rgba(255,255,255,.55);}

/* ---------- cabeçalho ---------- */
.topo{background:var(--superficie); border-bottom:1px solid var(--linha);}
.topo-in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 20px; max-width:var(--max); margin-inline:auto;}
.marca-parceiro{display:flex; align-items:center; gap:11px; min-width:0;}
.logo-parceiro{height:42px; width:auto; max-width:132px; flex:none; object-fit:contain;}
:root[data-theme="dark"] .logo-parceiro{background:#FFF; padding:3px 5px; border-radius:var(--r-sm);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-parceiro{background:#FFF; padding:3px 5px; border-radius:var(--r-sm);} }
.monograma{width:42px; height:42px; flex:none; border-radius:var(--r); display:grid; place-items:center; background:var(--marca); color:var(--marca-contraste); font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:17px; letter-spacing:-.03em;}
.marca-nome{font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:15.5px; line-height:1.2;}
.marca-sub{font-size:11.5px; color:var(--tinta-3);}
.tel-topo{display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:500; font-size:14px; color:var(--tinta-2); border:1px solid var(--linha); border-radius:var(--r-sm); padding:7px 14px;}
.tel-topo:hover{border-color:var(--linha-forte); color:var(--tinta);}

/* ---------- BANNER (foto do parceiro) ---------- */
.banner{position:relative; isolation:isolate; background:var(--breu); color:var(--claro); overflow:hidden;}
.banner-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.banner::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(96deg, rgba(12,13,15,.94) 0%, rgba(12,13,15,.82) 42%, rgba(12,13,15,.38) 72%, rgba(12,13,15,.18) 100%);}
.banner-in{position:relative; z-index:2; max-width:var(--max); margin-inline:auto; padding:66px 20px 60px; display:grid; gap:17px;}
.banner-in > *{max-width:620px;}
.banner-kicker{display:inline-flex; align-items:center; gap:9px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--claro); width:max-content;}
.banner-kicker::before{content:""; width:24px; height:1.5px; background:currentColor; opacity:.7;}
.banner h1{font-size:clamp(2.1rem,6vw,3.55rem); font-weight:800; line-height:1.03; letter-spacing:-.04em; color:#fff;}
.banner-lead{font-size:clamp(1rem,2.2vw,1.14rem); color:#CDD1D6; line-height:1.55;}
.banner-acoes{display:flex; flex-wrap:wrap; gap:11px; align-items:center; margin-top:4px;}
.btn-foto{background:#fff; color:#16181B;}
.btn-foto:hover:not(:disabled){background:#E4E6E9;}
.btn-vidro{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.34);}
.btn-vidro:hover:not(:disabled){background:rgba(255,255,255,.2);}

.faixa{
  --f-tinta:var(--tinta); --f-tinta-2:var(--tinta-2);
  --f-linha:rgba(23,25,28,.16); --f-veu:rgba(23,25,28,.045);
  --f-fill-a:rgba(23,25,28,.05); --f-fill-b:rgba(23,25,28,.26);
  --f-solido:var(--tinta); --f-solido-txt:var(--superficie);
  --f-halo:rgba(23,25,28,.13);
  background:var(--superficie-2); color:var(--f-tinta);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .faixa{
    --f-tinta:var(--claro); --f-tinta-2:var(--claro-2);
    --f-linha:rgba(255,255,255,.16); --f-veu:rgba(255,255,255,.06);
    --f-fill-a:rgba(255,255,255,.05); --f-fill-b:rgba(255,255,255,.30);
    --f-solido:var(--claro); --f-solido-txt:var(--breu);
    --f-halo:rgba(0,0,0,.25);
    background:var(--breu-2);
  }
}
:root[data-theme="dark"] .faixa{
  --f-tinta:var(--claro); --f-tinta-2:var(--claro-2);
  --f-linha:rgba(255,255,255,.16); --f-veu:rgba(255,255,255,.06);
  --f-fill-a:rgba(255,255,255,.05); --f-fill-b:rgba(255,255,255,.30);
  --f-solido:var(--claro); --f-solido-txt:var(--breu);
  --f-halo:rgba(0,0,0,.25);
  background:var(--breu-2);
}
.faixa-in{max-width:var(--max); margin-inline:auto; padding:22px 20px; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,1.1fr); gap:22px 36px; align-items:center;}
.selos{display:flex; flex-wrap:wrap; gap:8px;}
.selo{font-size:12.5px; padding:5px 12px; border-radius:var(--r-sm); border:1px solid var(--f-linha); color:var(--f-tinta-2);}
.selo strong{color:var(--f-tinta); font-weight:500;}
.regua-nota{font-size:12.5px; color:var(--f-tinta-2); margin-top:13px;}
.regua-nota b{color:var(--f-tinta); font-weight:500;}

/* --- regua interativa da janela de deteccao --- */
.regua-topo{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.regua-rotulo{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--f-tinta-2);}
.segm{display:inline-flex; gap:2px; background:var(--f-veu); border:1px solid var(--f-linha); border-radius:var(--r-sm); padding:2px;}
.segm-btn{border:0; background:none; color:var(--f-tinta-2); font-size:12.5px; line-height:1.4; padding:5px 14px; border-radius:4px; cursor:pointer; transition:background .15s, color .15s;}
.segm-btn:hover{color:var(--f-tinta);}
.segm-btn[aria-checked="true"]{background:var(--f-solido); color:var(--f-solido-txt); font-weight:500;}

.regua-leitura{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:14px;}
.regua-dias{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:2.2rem; font-weight:500; line-height:1; font-variant-numeric:tabular-nums;}
.regua-un{font-size:13px; color:var(--f-tinta-2);}
.regua-cm{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; color:var(--f-tinta-2); margin-left:4px;}
.regua-periodo{font-size:12px; color:var(--f-tinta-2); margin-left:auto; font-variant-numeric:tabular-nums;}

.regua-trilho{position:relative; height:38px; margin:26px 0 30px; cursor:ew-resize; touch-action:none;}
.regua-trilho:focus-visible{outline:2.5px solid var(--f-tinta); outline-offset:5px; border-radius:var(--r-sm);}
.regua-base{position:absolute; inset:0; border-radius:var(--r-sm); background:var(--f-veu); border:1px solid var(--f-linha);}
.regua-fill{position:absolute; left:0; top:0; height:38px; border-radius:var(--r-sm); background:linear-gradient(90deg, var(--f-fill-a), var(--f-fill-b));}
.regua-camada{position:absolute; inset:0; color:var(--f-tinta);}
.regua-tick{position:absolute; bottom:0; width:1px; background:currentColor;}
.regua-eixo{position:absolute; top:44px; transform:translateX(-50%); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; color:var(--f-tinta-2);}
.regua-alvo{position:absolute; top:-3px; height:44px; border-left:1.5px dashed currentColor; opacity:.6; transform:translateX(-50%);}
.regua-alvo b{position:absolute; top:-19px; left:7px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; font-weight:400; letter-spacing:.06em; white-space:nowrap;}
.regua-mao{position:absolute; top:-8px; height:54px; width:2.5px; border-radius:2px; background:var(--f-solido); transform:translateX(-50%); pointer-events:none;}
.regua-mao::after{content:""; position:absolute; left:50%; bottom:-1px; width:13px; height:13px; border-radius:50%; background:var(--f-solido); transform:translateX(-50%); box-shadow:0 0 0 4px var(--f-halo);}
.regua-trilho:not(.arrastando) .regua-fill,
.regua-trilho:not(.arrastando) .regua-mao,
.regua-alvo{transition:left .16s cubic-bezier(.22,.75,.2,1), width .16s cubic-bezier(.22,.75,.2,1);}
@media (prefers-reduced-motion:reduce){ .regua-fill,.regua-mao,.regua-alvo{transition:none;} }
@media (max-width:860px){ .faixa-in{grid-template-columns:1fr;} }

/* ---------- CARROSSEL (fotos) ---------- */
.carrossel-sec{padding:48px 0 8px;}
.carrossel-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.setas{display:flex; gap:8px;}
.seta{width:38px; height:38px; border-radius:50%; border:1px solid var(--linha); background:var(--superficie); cursor:pointer; display:grid; place-items:center; color:var(--tinta-2);}
.seta:hover:not(:disabled){border-color:var(--tinta); color:var(--tinta);}
.seta:disabled{opacity:.35; cursor:default;}
.trilho{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(268px,78vw,356px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:4px; scrollbar-width:none;}
.trilho::-webkit-scrollbar{display:none;}
.slide{position:relative; scroll-snap-align:start; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; max-height:400px; isolation:isolate; background:var(--superficie-2);}
.slide-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s ease;}
.slide:hover .slide-foto{transform:scale(1.04);}
.slide-corpo{position:absolute; inset:auto 0 0 0; z-index:2; padding:20px; display:grid; gap:5px;
  background:linear-gradient(to top, rgba(10,11,13,.95) 34%, rgba(10,11,13,.6) 68%, rgba(10,11,13,0) 100%); color:#F2F3F4;}
.slide-kicker{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:#B9BEC4;}
.slide h3{font-size:1.16rem; font-weight:600; line-height:1.24; color:#fff;}
.slide-sub{font-size:13px; color:#C3C8CE; line-height:1.5;}
.pontos{display:flex; gap:7px; justify-content:center; margin-top:16px;}
.ponto{width:7px; height:7px; border-radius:50%; background:var(--linha-forte); border:0; padding:0; cursor:pointer; transition:width .2s;}
.ponto[aria-current="true"]{background:var(--marca); width:22px; border-radius:var(--r-sm);}

/* ---------- passos ---------- */
/* ---------- sobre o parceiro ----------
   Cartão, e não faixa: escolha do cliente. Como .opt (o card de finalidade)
   usa a mesma borda e o mesmo raio, este precisa NÃO parecer clicável — daí
   sem sombra, sem hover, sem transform e ocupando a largura inteira. Card
   solto de largura total não é lido como uma opção dentro de um conjunto.
   Seção some inteira quando TextoApresentacao está vazio (o [hidden] do topo
   do arquivo cobre isto). */
.sobre{padding:36px 0 6px;}
.sobre-cartao{background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r);
  padding:28px 30px;}
.sobre-corpo{margin-top:14px; color:var(--tinta-2); font-size:15px; line-height:1.68;
  display:flex; flex-direction:column; gap:13px; max-width:65ch;}
.sobre-corpo :is(p,ul,ol,blockquote){margin:0;}
.sobre-corpo :is(strong,b){color:var(--tinta); font-weight:600;}
.sobre-corpo :is(h3,h4){color:var(--tinta); font-size:1rem; font-weight:600; margin:4px 0 0;}
.sobre-corpo :is(ul,ol){padding-left:19px; display:flex; flex-direction:column; gap:6px;}
.sobre-corpo blockquote{border-left:2px solid var(--linha-forte); padding-left:14px; color:var(--tinta-3);}
.sobre-corpo a{color:var(--marca); text-decoration:underline; text-underline-offset:2px;}

/* padding-block, nao o atalho: .passo divide o elemento com .env, e o
   atalho padding zeraria o padding-inline:20px dela — as tres secoes de
   passo ficavam 20px a esquerda do resto da pagina. */
.passo{padding-block:46px 6px; scroll-margin-top:60px;}
.passo-cab{display:flex; align-items:flex-start; gap:13px;}
.passo-num{flex:none; width:29px; height:29px; border-radius:50%; display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--superficie-2); color:var(--tinta-3); border:1px solid var(--linha); margin-top:3px;}
.passo[data-estado="ativo"] .passo-num{background:var(--marca); color:var(--marca-contraste); border-color:var(--marca);}
.passo[data-estado="feito"] .passo-num{background:var(--marca-suave); color:var(--tinta); border-color:var(--marca);}
.passo h2{font-size:clamp(1.3rem,3.4vw,1.62rem); font-weight:600; line-height:1.2;}
.passo-sub{margin:2px 0 20px 42px; color:var(--tinta-2); font-size:14.5px;}
.passo[hidden]{display:none;}
.grade{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(238px,1fr));}

.opt{position:relative; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:6px; background:var(--superficie); border:1.5px solid var(--linha); border-radius:var(--r); padding:19px; transition:border-color .16s,box-shadow .16s,transform .16s;}
.opt:hover{border-color:var(--linha-forte); transform:translateY(-2px); box-shadow:var(--sombra);}
.opt[aria-pressed="true"]{border-color:var(--marca); box-shadow:var(--sombra-alta);}
.opt[aria-pressed="true"]::after{content:"✓"; position:absolute; top:13px; right:13px; width:22px; height:22px; border-radius:50%; background:var(--marca); color:var(--marca-contraste); display:grid; place-items:center; font-size:12px; font-weight:700;}
.opt-titulo{font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:1.08rem; line-height:1.25; padding-right:28px;}
.opt-desc{font-size:13.5px; color:var(--tinta-2); line-height:1.5; flex:1;}
.opt-preco{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:1.28rem; font-weight:500; margin-top:4px;}
.opt-preco small{font-size:11.5px; color:var(--tinta-3); font-weight:400; margin-right:6px;}
.opt-aviso{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--tinta-2); background:var(--superficie-2); border:1px solid var(--linha); border-radius:6px; padding:4px 9px; margin-top:6px; align-self:flex-start;}

/* ---------- filtros ---------- */
.filtros{display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(200px,1fr) auto; gap:10px; margin-bottom:14px; align-items:center;}
@media (max-width:760px){ .filtros{grid-template-columns:1fr;} }
.campo{display:flex; align-items:center; gap:9px; background:var(--superficie); border:1.5px solid var(--linha); border-radius:var(--r-sm); padding:0 12px;}
.campo:focus-within{border-color:var(--marca);}
.campo input,.campo select{flex:1; border:0; outline:0; background:none; padding:11px 0; font-size:14.5px; min-width:0;}
.campo select{cursor:pointer;}
/* o popup nativo nao herda os tokens: precisa da cor no proprio <option> */
.campo select option,.campo select optgroup{background:var(--superficie); color:var(--tinta);}
.campo svg{flex:none; color:var(--tinta-3);}
.check{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--tinta-2); background:var(--superficie); border:1.5px solid var(--linha); border-radius:var(--r-sm); padding:11px 14px; cursor:pointer; white-space:nowrap;}
.check[aria-pressed="true"]{border-color:var(--marca); color:var(--tinta);}
.check .caixa{width:15px; height:15px; border-radius:4px; border:1.5px solid var(--linha-forte); display:grid; place-items:center; font-size:10px; color:transparent; flex:none;}
.check[aria-pressed="true"] .caixa{background:var(--marca); border-color:var(--marca); color:var(--marca-contraste);}
.contador{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--tinta-3); margin-bottom:12px;}
.contador b{color:var(--tinta); font-weight:500;}

/* ---------- editais ---------- */
.editais{display:grid; gap:11px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.edital{position:relative; text-align:left; cursor:pointer; display:grid; gap:7px; background:var(--superficie); border:1.5px solid var(--linha); border-radius:var(--r); padding:17px 18px; transition:border-color .16s,box-shadow .16s;}
.edital:hover{border-color:var(--linha-forte); box-shadow:var(--sombra);}
.edital[aria-pressed="true"]{border-color:var(--marca); box-shadow:var(--sombra-alta);}
.edital[aria-pressed="true"]::after{content:"✓"; position:absolute; top:13px; right:13px; width:21px; height:21px; border-radius:50%; background:var(--marca); color:var(--marca-contraste); display:grid; place-items:center; font-size:11px; font-weight:700;}
.edital-grupo{font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:.99rem; line-height:1.3; padding-right:26px;}
.edital-num{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--tinta-2); line-height:1.45;}
.chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.chip{font-family:"IBM Plex Mono",monospace; font-size:10.5px; border:1px solid var(--linha); border-radius:6px; padding:3px 7px; color:var(--tinta-2); background:var(--superficie-2); white-space:nowrap;}
.chip.ok{color:var(--ok); border-color:var(--ok); background:var(--ok-suave);}
.chip.off{color:var(--tinta-3);}
.mini-regua{display:block; width:100%; height:22px; overflow:visible; color:var(--tinta-3);}
.mais{margin:16px auto 0; display:block; background:var(--superficie); border:1.5px solid var(--linha); border-radius:var(--r-sm); padding:10px 22px; cursor:pointer; font-size:14px; color:var(--tinta-2);}
.mais:hover{border-color:var(--marca); color:var(--tinta);}

/* ---------- mapa + lista ---------- */
.mapa-grade{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px; align-items:start;}
@media (max-width:900px){ .mapa-grade{grid-template-columns:1fr;} }
.mapa-col{position:sticky; top:56px;}
@media (max-width:900px){ .mapa-col{position:static;} }
.mapa-caixa{position:relative; border:1px solid var(--linha); border-radius:var(--r) var(--r) 0 0; overflow:hidden; background:var(--mapa-fundo);}
.mapa{display:block; width:100%; height:auto; aspect-ratio:1000/669;}
.mapa-camada{transition:transform .55s cubic-bezier(.3,.8,.3,1);}
@media (prefers-reduced-motion:reduce){ .mapa-camada{transition:none;} }
.mapa-uf{fill:var(--mapa-terra); stroke:var(--mapa-borda); stroke-width:1.5; vector-effect:non-scaling-stroke;}
.pino{cursor:pointer;}
.pino-halo{fill:var(--marca); opacity:.14;}
.pino-nucleo{fill:var(--marca); stroke:var(--mapa-fundo); stroke-width:1.6;}
.pino[data-sel="1"] .pino-halo{opacity:.3;}
.pino[data-sel="1"] .pino-nucleo{stroke-width:2.8;}
.pino-txt{font-family:"IBM Plex Mono",monospace; font-size:10px; fill:var(--tinta-2); pointer-events:none;}
.pino-n{font-family:"IBM Plex Mono",monospace; font-size:9px; fill:var(--marca-contraste); pointer-events:none; font-weight:500;}
.mapa-legenda{position:absolute; left:12px; bottom:12px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3); background:var(--superficie); border:1px solid var(--linha); border-radius:6px; padding:4px 8px;}
.mapa-barra{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border:1px solid var(--linha); border-top:0; border-radius:0 0 var(--r) var(--r); background:var(--superficie); font-size:12.5px; color:var(--tinta-2); flex-wrap:wrap;}
.mapa-barra b{color:var(--tinta); font-weight:500;}
.mini-btn{background:none; border:1px solid var(--linha); border-radius:var(--r-sm); padding:5px 12px; font-size:12.5px; cursor:pointer; color:var(--tinta-2);}
.mini-btn:hover{border-color:var(--marca); color:var(--tinta);}

.cidades-rapidas{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px;}
.cidade-chip{background:var(--superficie); border:1.5px solid var(--linha); border-radius:var(--r-sm); padding:7px 13px; font-size:13px; color:var(--tinta-2); cursor:pointer; display:inline-flex; gap:7px; align-items:center;}
.cidade-chip:hover{border-color:var(--linha-forte); color:var(--tinta);}
.cidade-chip[aria-pressed="true"]{border-color:var(--marca); color:var(--tinta);}
.cidade-chip b{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tinta-3); font-weight:500;}
.lista-postos{display:grid; gap:11px; max-height:660px; overflow-y:auto; padding-right:4px;}
@media (max-width:900px){ .lista-postos{max-height:none;} }
.posto{display:grid; grid-template-columns:1fr auto; gap:3px 16px; text-align:left; cursor:pointer; width:100%; background:var(--superficie); border:1.5px solid var(--linha); border-radius:var(--r); padding:15px 16px; transition:border-color .16s,box-shadow .16s;}
.posto:hover{border-color:var(--linha-forte); box-shadow:var(--sombra);}
.posto[aria-pressed="true"]{border-color:var(--marca); box-shadow:var(--sombra-alta);}
.posto-cidade{grid-column:1; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3);}
.posto-nome{grid-column:1; font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:1rem; line-height:1.25;}
.posto-end{grid-column:1; font-size:13px; color:var(--tinta-2); line-height:1.45;}
.posto-hora{grid-column:1; font-size:12px; color:var(--tinta-3); margin-top:4px; display:flex; gap:6px; align-items:flex-start;}
.posto-preco{grid-column:2; grid-row:1 / span 3; text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:1.1rem; font-weight:500; white-space:nowrap;}
.posto-preco span{display:block; font-family:"Instrument Sans",sans-serif; font-size:10.5px; color:var(--tinta-3); font-weight:400;}
.rota{grid-column:1 / -1; margin-top:9px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tinta); text-decoration:underline; text-underline-offset:3px; font-weight:500;}
.vazio{border:1.5px dashed var(--linha-forte); border-radius:var(--r); padding:28px 22px; text-align:center; color:var(--tinta-2); font-size:14px; background:var(--superficie-2);}
.vazio strong{display:block; font-family:"Bricolage Grotesque",sans-serif; color:var(--tinta); font-size:1rem; margin-bottom:4px; font-weight:600;}
.bloqueado{border:1.5px dashed var(--linha-forte); border-radius:var(--r); padding:26px 22px; color:var(--tinta-3); font-size:14px; background:var(--superficie-2); text-align:center;}

/* ---------- resumo ---------- */
.resumo{position:fixed; left:0; right:0; bottom:0; z-index:65; background:var(--superficie); border-top:1px solid var(--linha); box-shadow:0 -12px 34px -22px rgba(16,18,20,.45);}
.resumo-in{max-width:var(--max); margin-inline:auto; padding:11px 20px; display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap;}
.trilha{display:flex; align-items:center; gap:9px; flex:1 1 250px; min-width:0; flex-wrap:wrap;}
.trilha-item{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--tinta-3); min-width:0;}
.trilha-item b{font-weight:500; color:var(--tinta); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:26ch;}
.trilha-item .bola{width:7px; height:7px; border-radius:50%; background:var(--linha-forte); flex:none;}
.trilha-item[data-ok="1"] .bola{background:var(--marca);}
.trilha-sep{color:var(--linha-forte);}
.resumo-total{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:1.3rem; font-weight:500; white-space:nowrap;}
.resumo-total span{display:block; font-family:"Instrument Sans",sans-serif; font-size:11px; color:var(--tinta-3); font-weight:400;}
.btn{border:0; border-radius:var(--r-sm); cursor:pointer; font-weight:600; font-size:15px; padding:14px 24px; background:var(--marca); color:var(--marca-contraste); display:inline-flex; align-items:center; gap:9px; text-decoration:none; transition:background .15s,opacity .15s; white-space:nowrap;}
.btn:hover:not(:disabled){background:var(--marca-escura);}
.btn:disabled{background:var(--superficie-2); color:var(--tinta-3); cursor:not-allowed;}

/* ---------- como funciona / rodapé ---------- */
.como{background:var(--superficie); border-top:1px solid var(--linha); margin-top:50px; padding:44px 0 48px;}
.fluxo{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); margin-top:22px; background:var(--linha); border:1px solid var(--linha); border-radius:var(--r); overflow:hidden;}
.etapa{background:var(--superficie); padding:20px; display:flex; flex-direction:column; gap:5px;}
.etapa-n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--tinta-3); letter-spacing:.12em;}
.etapa h4{font-size:1rem; font-weight:600;}
.etapa p{font-size:13.5px; color:var(--tinta-2); line-height:1.5;}
.rodape{padding:30px 0 40px; color:var(--tinta-3); font-size:13px;}
.rodape p+p{margin-top:6px;}

@media (max-width:640px){
  .passo-sub{margin-left:0;}
  .posto{grid-template-columns:1fr;}
  .posto-preco{grid-column:1; grid-row:auto; text-align:left; margin-top:7px;}
  .banner-in{padding:46px 20px 42px;}
  .btn{flex:1 1 100%; justify-content:center;}
  body{padding-bottom:158px;}
}

/* ---------- estados da landing (não existiam no mockup) ---------- */
html[data-theme="light"]{ color-scheme: light; }
.pagina[hidden], .estado[hidden]{ display:none !important; }
.estado{ min-height:70vh; display:grid; place-items:center; padding:48px 20px; text-align:center; }
.estado-caixa{ max-width:420px; }
.estado h1{ font-size:clamp(1.6rem,4vw,2.1rem); font-weight:800; margin:8px 0 10px; }
.estado p{ color:var(--tinta-2); }
.carregando{ opacity:.55; pointer-events:none; }
.mapa-google{ display:block; width:100%; height:min(520px,70vh); border:0; background:var(--mapa-fundo); }
.mapa-caixa .mapa-google{ aspect-ratio:auto; }