/* DG ONE — G3 acabamento premium (staging, não publicar). Carregada por último em todas as páginas.
   Só layout, tipografia e movimento: nenhuma cor nova além de #0B0B0B/#83EA05 e derivados já existentes;
   logo, hardware oficial e as cinco artes R1 não são tocados (os PNGs seguem inteiros, sem corte). */

/* ---------- 1. tipografia editorial ---------- */
h1,h2,h3,.display,.h2{text-wrap:balance;font-kerning:normal}
p,li,dd,.lead,.small,.note{text-wrap:pretty}
.lead{line-height:1.55}
.ax-ch h3,.fx-cols a,.ax-to,.jx-corner,.cx-cell .n{font-variant-numeric:tabular-nums}
::selection{background:var(--green);color:#0B0B0B}
html{scrollbar-color:#2a2f27 var(--bg)}

/* migalhas: "Início" alinhado na mesma linha de base do item atual */
.crumbs{align-items:center;gap:8px}
.crumbs>span{display:inline-flex;align-items:center;min-height:32px}
.crumbs>span[aria-hidden]{color:var(--line-2)}

/* ---------- 2. um só sistema de abertura de página ----------
   page-head (catálogo, marcas, comparar), ix-head (institucionais) e jx-head (jornada) passam a ter o mesmo
   respiro, a mesma escala de título e, no desktop, o mesmo par título | texto de apoio. */
.page-head,.ix-head,.jx-head{padding:calc(var(--header) + clamp(36px,6.5vw,92px)) 0 clamp(32px,4.5vw,60px)}
.page-head .display,.ix-head h1,.jx-head h1{font-size:clamp(42px,6.4vw,92px);letter-spacing:-.035em;line-height:.98;margin:14px 0 0}
.page-head .lead{margin-top:18px}
.page-head .eyebrow{margin-top:14px}
.page-head .eyebrow + .display{margin-top:10px}
@media (min-width:980px){
  .page-head .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:48px;align-items:end;grid-auto-flow:row dense}
  .page-head .wrap>*{grid-column:1}
  .page-head .wrap>.lead{grid-column:2;grid-row:1/span 3;align-self:end;margin:0;max-width:42ch}
  .page-head .wrap>.sx-brands,.page-head .wrap>.cx-gate{grid-column:1/-1}
}
/* linha fina de abertura: marca o fim do cabeçalho em todas as páginas internas */
.page-head .wrap,.ix-head .wrap,.jx-head .wrap{position:relative}
.ix-head .wrap::after{content:"";position:absolute;left:0;bottom:calc(-.5*clamp(32px,4.5vw,60px));width:56px;height:2px;background:var(--green);border-radius:2px;opacity:.9}

/* ---------- 3. ritmo vertical: menos vazio no celular, mesmo fôlego no desktop ---------- */
.section{padding:clamp(64px,10vw,152px) 0}
@media (max-width:699px){
  .section{padding:56px 0}
  .ix-end{padding-top:40px}
  .ab-north-grid{gap:32px}
  .sec-head{margin-bottom:28px}
  .r1-rules{margin-top:40px}
}

/* ---------- 4. navegação: página atual com o ponto verde da marca ---------- */
.nav-inline a{position:relative}
.nav-inline a[aria-current="page"]:not(.nav-wa)::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green-glow)}
.nav-inline a.nav-wa{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.nav-inline a.nav-wa:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px var(--green-glow);background:var(--green);color:var(--bg)}
.nav-inline a.nav-wa[aria-current="page"]{box-shadow:0 0 0 3px var(--bg),0 0 0 4px rgba(131,234,5,.55)}
.menu-panel li a{padding-block:14px}
.menu-panel li a[aria-current="page"]{color:var(--green)}

/* ---------- 5. microinterações coerentes ----------
   Verbo de movimento único: "acender" (leve elevação + brilho verde). Toque não depende de hover. */
.btn,.btn-ghost,.link-arrow,.menu-btn,.seg button,.op-pick button,.jx-rail button{-webkit-tap-highlight-color:transparent}
.btn:focus-visible{outline-offset:4px}
.link-arrow{transition:color .25s,border-color .25s}
.link-arrow:hover{color:var(--green)}
.foot a{transition:color .2s}
@media (hover:none){
  .btn:hover,.nav-inline a.nav-wa:hover{transform:none;box-shadow:none}
  .btn:active{transform:scale(.98)}
  .btn-ghost:active{background:var(--green-soft);border-color:var(--green)}
}

/* ---------- 6. artes R1: moldura editorial e legenda em HTML ----------
   O PNG continua inteiro (object-fit:contain, proporção nativa). A legenda repete em texto real o que
   a arte diz em letra pequena, para quem lê no celular. */
.r1-art{position:relative;box-shadow:0 40px 80px -48px rgba(0,0,0,.9),0 0 0 1px rgba(131,234,5,.05) inset}
.r1-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:16px clamp(16px,2.4vw,24px) 18px;border-top:1px solid var(--line);background:var(--bg-2);font-size:14px;color:var(--muted)}
.r1-cap .k{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.r1-cap b{color:var(--ink);font-weight:600}
.r1-cap a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--green)}
.r1-cap a:hover{color:var(--green)}
/* legenda 01–05 da Jornada: o índice das estações da bancada. Cada link ocupa a própria caixa (44px reais,
   sem margem negativa), então nada se sobrepõe ao quebrar linha. */
.r1-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;width:100%}
.r1-legend a{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;text-decoration:none;color:var(--ink);font-size:14px;transition:border-color .25s,background .25s}
.r1-legend a .n{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.12em;color:var(--green)}
.r1-legend a:hover{border-color:var(--green);background:var(--green-soft)}
@media (max-width:699px){
  .r1-cap{padding-inline:var(--pad)}
  /* no celular, régua numerada de linha inteira: uma estação por linha, fio entre elas, seta para a bancada */
  .r1-jornada .r1-cap{row-gap:12px}
  .r1-legend{display:block;border-top:1px solid var(--line)}
  .r1-legend li{border-bottom:1px solid var(--line)}
  .r1-legend a{display:flex;gap:14px;min-height:44px;padding:0 2px;border:0;border-radius:0;font-size:15px;background:none}
  .r1-legend a .n{min-width:2ch}
  .r1-legend a::after{content:"\2192";margin-left:auto;color:var(--muted);transition:transform .25s var(--ease-out),color .25s}
  .r1-legend a:hover,.r1-legend a:active{background:none;color:var(--green)}
  .r1-legend a:active::after,.r1-legend a:hover::after{color:var(--green);transform:translateX(4px)}
}
@media (min-width:700px){.r1-showroom .r1-cap,.r1-jornada .r1-cap{justify-content:space-between}.r1-jornada .r1-legend{width:auto}}

/* ---------- 7. comparador no celular: a vaga do segundo aparelho não aperta o texto ---------- */
@media (max-width:420px){
  .cx-empty{padding:12px}
  .cx-empty h2{font-size:18px}
  .cx-empty .small{font-size:13px}
}

/* ---------- 8. jornada (Anatomy): leitura do estado atual ---------- */
.jx-rail button[aria-pressed="true"] .n{color:var(--green)}
.jx-rail button[aria-pressed="true"] .t{color:var(--ink)}
.jx-rail button.is-done .n{color:rgba(131,234,5,.6)}
@media (max-width:420px){.jx-rail{gap:4px}.jx-rail .w{display:none}.jx-rail .t{font-size:13px}}

/* ---------- 9. rodapé ---------- */
.foot .fx-brand img{opacity:.95}
.foot .legal{row-gap:14px}

/* ---------- 10. transição entre páginas (navegação nativa, sem JS, sem atraso de conteúdo) ----------
   Cabeçalho fica parado; o conteúdo troca com um deslize curto. Desligada por reduced-motion e pelo botão
   "Reduzir movimento". */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .top{view-transition-name:dg-top}
  ::view-transition-old(root){animation:dg-out .22s var(--ease) both}
  ::view-transition-new(root){animation:dg-in .38s var(--ease-out) both}
}
@keyframes dg-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes dg-in{from{opacity:0;transform:translateY(10px)}}
html.reduce-motion::view-transition-group(*),html.reduce-motion::view-transition-old(*),html.reduce-motion::view-transition-new(*){animation:none!important}

/* ---------- 11. áreas seguras (notch / barra do sistema) ---------- */
@supports (padding:max(0px)){
  .top .wrap{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
  .menu-panel{padding-bottom:max(32px,env(safe-area-inset-bottom))}
}
/* só o link solto da legenda (ex.: "Ver o aparelho"): alvo de 44px sem engordar a faixa. Nunca nos itens da .r1-legend. */
.r1-cap > a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}
.tel,.ax-ch h3{white-space:nowrap}
.nw{white-space:nowrap}