/* ════════════════════════════════════════════════════════════════
   GenyxLog — site e tela de entrada
   A linguagem sai da marca: prata e ouro, itálico largo, os cantos
   chanfrados do G hexagonal e as linhas de velocidade. A página é
   pintada como a lateral de um caminhão: chapa, faixa e letreiro.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. tokens ───────────────────────────────────────────────── */
:root {
    --f-disp: 'Hubot Sans', 'Mona Sans', 'Segoe UI', system-ui, sans-serif;
    --f-text: 'Mona Sans', 'Segoe UI', system-ui, sans-serif;
    --f-verso: 'EB Garamond', Garamond, Georgia, serif;

    /* marca (tirada do logo) */
    --ouro: #f6b713;
    --ouro-hi: #ffd04a;
    --prata: #d6d8dc;
    --prata-lo: #a9acb3;

    /* página */
    --fundo: #0a0a0b;
    --fundo-2: #111113;
    --fundo-3: #1a1a1d;
    --tinta: #eeeff1;
    --tinta-2: #b3b5ba;
    --tinta-3: #8b8d93;
    --fio: rgba(238, 239, 241, .12);
    --fio-2: rgba(238, 239, 241, .26);
    --sinal: #f6b713;
    --sinal-hi: #ffd04a;
    --sobre-sinal: #0a0a0b;
    --destaque: #f6b713;
    --foco: #ffd04a;

    /* chapa: a parte prateada da pintura */
    --chapa: linear-gradient(104deg, #b8bbc1 0%, #e3e5e8 32%, #cbced3 56%, #eff0f2 80%, #d3d6da 100%);
    --chapa-plana: #d4d6da;
    --chapa-tinta: #0b0b0c;
    --chapa-tinta-2: #393b40;
    --chapa-fio: rgba(11, 11, 12, .2);

    /* barra do topo e rodapé: sempre escuros, o letreiro prateado pede fundo escuro */
    --moldura: #0a0a0b;
    --moldura-tinta: #eeeff1;
    --moldura-tinta-2: #a5a7ad;
    --moldura-fio: rgba(238, 239, 241, .12);

    /* painéis de operação (torre e telas): sempre escuros */
    --painel: #0e0e10;
    --painel-2: #17171a;
    --painel-3: #222226;
    --painel-tinta: #eff0f2;
    --painel-tinta-2: #a6a8ae;
    --painel-tinta-3: #86888e;
    --painel-fio: rgba(239, 240, 242, .1);

    --ok: #3ddc97;
    --atencao: #f6b713;
    --alerta: #ff5b4f;
    --alerta-texto: #ff8b81;

    --corte: 14px;
    --incl: -12deg;
    --pad: clamp(16px, 4vw, 56px);
    --max: 1320px;
    --topo-h: 68px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    color-scheme: dark;
}

[data-theme="azul"] {
    --fundo: #07111f;
    --fundo-2: #0b1828;
    --fundo-3: #122236;
    --tinta: #e9eef5;
    --tinta-2: #aab6c6;
    --tinta-3: #8594a8;
    --fio: rgba(233, 238, 245, .12);
    --fio-2: rgba(233, 238, 245, .26);
    --moldura: #050d19;
    --moldura-fio: rgba(233, 238, 245, .12);
    --painel: #08121f;
    --painel-2: #0e1b2c;
    --painel-3: #16263b;
    --painel-fio: rgba(233, 238, 245, .1);
}

[data-theme="light"] {
    color-scheme: light;
    --fundo: #e9eaed;
    --fundo-2: #f4f5f7;
    --fundo-3: #dcdee2;
    --tinta: #0d0d0f;
    --tinta-2: #3f4147;
    --tinta-3: #5a5d64;
    --fio: rgba(13, 13, 15, .14);
    --fio-2: rgba(13, 13, 15, .32);
    --destaque: #7a5800;
    --foco: #7a5800;
    --chapa: linear-gradient(104deg, #0e0e10 0%, #1e1f23 34%, #131316 60%, #24252b 100%);
    --chapa-plana: #151518;
    --chapa-tinta: #eeeff1;
    --chapa-tinta-2: #b3b5ba;
    --chapa-fio: rgba(238, 239, 241, .18);
    --moldura: #0d0d0f;
}

/* ── 2. base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--topo-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fundo);
    color: var(--tinta);
    font: 400 1rem/1.62 var(--f-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
::selection { background: var(--sinal); color: var(--sobre-sinal); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
[hidden] { display: none !important; }

.sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pular {
    position: fixed;
    z-index: 100;
    left: 16px;
    top: -64px;
    padding: 12px 18px;
    background: var(--sinal);
    color: var(--sobre-sinal);
    font: italic 800 .85rem/1 var(--f-disp);
    text-transform: uppercase;
    text-decoration: none;
    transition: top .16s var(--ease);
}
.pular:focus { top: 12px; }

.casca {
    width: 100%;
    max-width: calc(var(--max) + var(--pad) * 2);
    margin: 0 auto;
    padding: 0 var(--pad);
}

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ── 3. peças da marca ───────────────────────────────────────── */

/* linhas de velocidade do logo, como marca de seção */
.rastro { width: 44px; height: 16px; flex: none; color: var(--tinta-3); }

.decal {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font: italic 800 .74rem/1.2 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.titulo {
    margin: 0;
    font-family: var(--f-disp);
    font-style: italic;
    font-weight: 900;
    font-stretch: 125%;
    text-transform: uppercase;
    line-height: .94;
    letter-spacing: -.005em;
    text-wrap: balance;
}
.titulo em { font-style: inherit; color: var(--destaque); }
/* no claro, o destaque vira faixa dourada sob o texto preto (o ouro escurecido fica barrento) */
[data-theme="light"] .titulo em {
    color: var(--tinta);
    background: linear-gradient(var(--ouro), var(--ouro)) no-repeat 0 92% / 100% .2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
[data-theme="light"] .faixa .titulo em { background: none; }

.titulo--secao { font-size: clamp(2rem, 4.6vw, 4rem); max-width: 18ch; }

.intro {
    max-width: 58ch;
    margin-top: 22px;
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    color: var(--tinta-2);
}

/* botões inclinados como o itálico do letreiro */
.btn {
    --b-fundo: transparent;
    --b-borda: var(--fio-2);
    --b-tinta: var(--tinta);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65em;
    min-height: 50px;
    padding: 0 1.6em;
    border: 0;
    background: none;
    color: var(--b-tinta);
    font: italic 800 .9rem/1 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--b-fundo);
    border: 1.5px solid var(--b-borda);
    transform: skewX(var(--incl));
    transition: background-color .16s, border-color .16s;
}
.btn:focus-visible { outline: none; }
.btn:focus-visible::before { outline: 2px solid var(--foco); outline-offset: 3px; }
.btn .ico { transition: transform .18s var(--ease); }
.btn:hover .ico--seta { transform: translateX(4px); }
.btn--ouro { --b-fundo: var(--sinal); --b-borda: var(--sinal); --b-tinta: var(--sobre-sinal); }
.btn--ouro:hover::before { background: var(--sinal-hi); border-color: var(--sinal-hi); }
.btn--linha:hover::before { border-color: var(--tinta); }
.btn--compacto { min-height: 40px; padding: 0 1.2em; font-size: .8rem; }
.btn[disabled] { opacity: .6; cursor: progress; }

.giro {
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: giro .7s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

/* seletor de tema: três amostras inclinadas */
.temas { display: flex; gap: 4px; }
.temas button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.temas button span {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--moldura-fio);
    transform: skewX(var(--incl));
}
.temas [data-tema="black"] span { background: #0a0a0b; border-color: #55575c; }
.temas [data-tema="azul"] span { background: #0d2240; border-color: #3d5a80; }
.temas [data-tema="light"] span { background: #e9eaed; border-color: #e9eaed; }
.temas button[aria-pressed="true"] span { outline: 2px solid var(--ouro); outline-offset: 2px; }

.idiomas { display: flex; gap: 2px; }
.idiomas button {
    position: relative;
    min-width: 34px;
    height: 32px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--moldura-tinta-2);
    font: italic 800 .74rem/1 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .06em;
    cursor: pointer;
}
.idiomas button:hover { color: var(--moldura-tinta); }
.idiomas button[aria-pressed="true"] { color: var(--moldura-tinta); }
.idiomas button[aria-pressed="true"]::after {
    content: '';
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 4px;
    height: 2px;
    background: var(--ouro);
    transform: skewX(var(--incl));
}

/* ── 4. topo e menu ──────────────────────────────────────────── */
.topo {
    position: fixed;
    z-index: 60;
    inset: 0 0 auto;
    height: var(--topo-h);
    background: var(--moldura);
    color: var(--moldura-tinta);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.topo.rolou { border-bottom-color: var(--moldura-fio); }
.topo__casca { height: 100%; display: flex; align-items: center; gap: 18px; }
.topo__marca { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }
.topo__marca .marca-g { width: 34px; height: 34px; }
.topo__marca .marca-nome { width: 158px; height: auto; }
.topo__ajustes { display: flex; align-items: center; gap: 14px; padding-right: 14px; border-right: 1px solid var(--moldura-fio); }

.topo__menu {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 6px 0 10px;
    border: 0;
    background: none;
    color: var(--moldura-tinta);
    font: italic 800 .78rem/1 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}
.barras { position: relative; width: 28px; height: 14px; }
.barras i {
    position: absolute;
    right: 0;
    height: 2.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .24s var(--ease), width .24s var(--ease), top .24s var(--ease), background-color .2s;
}
.barras i:nth-child(1) { top: 1px; width: 100%; }
.barras i:nth-child(2) { top: 6px; width: 70%; background: var(--ouro); }
.barras i:nth-child(3) { top: 11px; width: 45%; }
.topo__menu[aria-expanded="true"] .barras i:nth-child(1) { top: 6px; width: 80%; transform: rotate(40deg); }
.topo__menu[aria-expanded="true"] .barras i:nth-child(2) { width: 0; }
.topo__menu[aria-expanded="true"] .barras i:nth-child(3) { top: 6px; width: 80%; transform: rotate(-40deg); }

.menu {
    position: fixed;
    z-index: 55;
    inset: var(--topo-h) 0 0;
    overflow-y: auto;
    background: var(--moldura);
    color: var(--moldura-tinta);
    padding: clamp(28px, 7vh, 72px) 0 40px;
}
.menu__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__lista li { overflow: hidden; }
.menu__lista a {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 18px;
    padding: 8px 0 12px;
    color: var(--moldura-tinta);
    font: italic 900 clamp(2rem, 5.4vw, 4.6rem)/1 var(--f-disp);
    font-stretch: 125%;
    text-transform: uppercase;
    text-decoration: none;
}
.menu__lista a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 5px;
    background: var(--ouro);
    transform: scaleX(0) skewX(var(--incl));
    transform-origin: left;
    transition: transform .28s var(--ease);
}
.menu__lista a:hover::after,
.menu__lista a:focus-visible::after,
.menu__lista a[aria-current="true"]::after { transform: scaleX(1) skewX(var(--incl)); }
.menu.abrindo .menu__lista li a { animation: entraDireita .42s var(--ease) both; }
.menu.abrindo .menu__lista li:nth-child(2) a { animation-delay: .04s; }
.menu.abrindo .menu__lista li:nth-child(3) a { animation-delay: .08s; }
.menu.abrindo .menu__lista li:nth-child(4) a { animation-delay: .12s; }
.menu.abrindo .menu__lista li:nth-child(5) a { animation-delay: .16s; }
@keyframes entraDireita {
    from { transform: translateX(48px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.menu__lado { display: grid; gap: 32px; padding-top: 12px; }
.menu__bloco { display: grid; gap: 12px; justify-items: start; }
.menu__bloco .decal { margin: 0; color: var(--moldura-tinta-2); }
.menu__bloco .rastro { color: var(--moldura-tinta-2); }
.menu__bloco .idiomas button { min-width: 52px; height: 44px; font-size: .9rem; }
.menu__bloco .temas button { width: 44px; height: 44px; }
.menu__bloco .temas button span { width: 22px; height: 22px; }
.menu__contato { display: grid; gap: 6px; font-size: .95rem; }
.menu__contato a { color: var(--moldura-tinta); text-decoration: none; overflow-wrap: anywhere; }
.menu__contato a:hover { color: var(--ouro); }

/* ── 5. abertura ─────────────────────────────────────────────── */
.largada {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--topo-h) + clamp(32px, 7vh, 88px)) 0 clamp(56px, 9vh, 112px);
}

.largada__pintura {
    position: absolute;
    z-index: -1;
    inset: var(--topo-h) 0 0;
    overflow: clip;
    pointer-events: none;
}
.pintura__chapa,
.pintura__faixa,
.pintura__fio {
    position: absolute;
    top: 0;
    bottom: 0;
    transform-origin: 0 100%;
    transform: skewX(var(--incl));
}
.pintura__chapa { left: var(--chapa-x, 60%); right: -60%; background: var(--chapa); }
.pintura__faixa { left: calc(var(--chapa-x, 60%) - 36px); width: 18px; background: var(--ouro); }
.pintura__fio { left: calc(var(--chapa-x, 60%) - 54px); width: 5px; background: var(--prata-lo); }

.largada__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
    gap: clamp(56px, 6vw, 96px);
    align-items: center;
}

.largada__texto { max-width: 820px; }
.largada__h1 { font-size: clamp(2.5rem, 4.9vw, 5rem); }
.largada__lead {
    max-width: 50ch;
    margin-top: clamp(22px, 3.4vh, 34px);
    font-size: clamp(1.02rem, 1.3vw, 1.2rem);
    color: var(--tinta-2);
}
.largada__lead strong { color: var(--tinta); font-weight: 600; }
.largada__acoes { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: clamp(28px, 4.4vh, 44px); }

.largada__torre { position: relative; }
.torre-chapa, .torre-faixa { display: none; }

/* entrada: a pintura chega da direita e o letreiro freia */
.js .largada .pintura__chapa,
.js .largada .pintura__faixa,
.js .largada .pintura__fio { animation: pintaChapa .9s var(--ease) both; }
.js .largada .pintura__faixa { animation-delay: .06s; }
.js .largada .pintura__fio { animation-delay: .1s; }
@keyframes pintaChapa {
    from { transform: translateX(45%) skewX(var(--incl)); }
    to { transform: skewX(var(--incl)); }
}
.js .largada__texto > * { animation: freia .6s var(--ease) both; }
.js .largada__texto > :nth-child(2) { animation-delay: .08s; }
.js .largada__texto > :nth-child(3) { animation-delay: .16s; }
.js .largada__texto > :nth-child(4) { animation-delay: .22s; }
@keyframes freia {
    from { transform: translateX(-40px) skewX(8deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.js .largada__torre { animation: sobe .7s .25s var(--ease) both; }
@keyframes sobe {
    from { transform: translateY(28px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ── 6. torre ao vivo ────────────────────────────────────────── */
.torre {
    position: relative;
    background: var(--painel);
    color: var(--painel-tinta);
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.torre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22px;
    right: 0;
    height: 3px;
    background: var(--ouro);
}
.torre__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 0 26px;
}
.torre__vivo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: italic 800 .72rem/1 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--alerta-texto);
}
.torre__vivo i {
    width: 9px;
    height: 9px;
    background: var(--alerta);
    transform: skewX(var(--incl));
    animation: pulsa 1.8s ease-in-out infinite;
}
@keyframes pulsa { 50% { opacity: .25; } }
.torre__hora {
    font: italic 700 1rem/1 var(--f-disp);
    font-variant-numeric: tabular-nums;
    color: var(--painel-tinta-2);
}
.torre__dir { display: flex; align-items: center; gap: 12px; }
.torre__pausa {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--painel-fio);
    background: none;
    color: var(--painel-tinta-2);
    cursor: pointer;
    transition: color .16s, border-color .16s;
}
.torre__pausa:hover { color: var(--painel-tinta); border-color: var(--painel-tinta-3); }
.torre__pausa:focus-visible { outline-color: var(--ouro-hi); }
.torre__pausa span {
    width: 10px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}
.torre__pausa[aria-pressed="true"] span {
    width: 0;
    height: 0;
    margin-left: 3px;
    border: 0;
    border-left: 10px solid currentColor;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.torre.parada .torre__vivo { color: var(--painel-tinta-2); }
.torre.parada .torre__vivo i { animation: none; background: var(--painel-tinta-3); }
@media (pointer: coarse) {
    .torre__pausa { width: 44px; height: 44px; }
}
.torre__titulo {
    margin: 16px 22px 0 26px;
    font: italic 900 1.45rem/1 var(--f-disp);
    font-stretch: 125%;
    text-transform: uppercase;
}
.torre__ordem {
    margin: 6px 22px 14px 26px;
    font-size: .8rem;
    color: var(--painel-tinta-3);
}
.torre__lista {
    position: relative;
    min-height: 421px; /* 7 linhas de 60px: o painel nasce do tamanho final e nada pula */
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--painel-fio);
}
.corrida {
    --tom: var(--ok);
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    height: 60px;
    padding: 0 22px 0 0;
    background: var(--painel);
    border-bottom: 1px solid var(--painel-fio);
}
.corrida::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 4px;
    background: var(--tom);
}
.corrida[data-tom="atencao"] { --tom: var(--atencao); }
.corrida[data-tom="alerta"] { --tom: var(--alerta); }
.corrida.mudou { animation: mudou 1.1s var(--ease); }
@keyframes mudou {
    from { background: var(--painel-3); }
    to { background: var(--painel); }
}
.corrida__pos {
    position: relative;
    justify-self: end;
    font: italic 800 .95rem/1 var(--f-disp);
    font-variant-numeric: tabular-nums;
    color: var(--painel-tinta-3);
}
.corrida[data-mudou] .corrida__pos::after {
    position: absolute;
    left: -14px;
    top: 50%;
    width: 0;
    height: 0;
    content: '';
    border: 5px solid transparent;
}
.corrida[data-mudou="sobe"] .corrida__pos::after { border-bottom-color: var(--ok); transform: translateY(-80%); }
.corrida[data-mudou="desce"] .corrida__pos::after { border-top-color: var(--alerta); transform: translateY(-20%); }
.corrida__quem { min-width: 0; display: grid; gap: 4px; }
.corrida__un {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    font: italic 800 1.02rem/1.1 var(--f-disp);
    font-stretch: 112%;
    text-transform: uppercase;
    white-space: nowrap;
}
.corrida__un b { font-weight: inherit; overflow: hidden; text-overflow: ellipsis; }
.corrida__mod {
    flex: none;
    font: normal 700 .62rem/1 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .1em;
    color: var(--painel-tinta-3);
}
.corrida__sit {
    font-size: .8rem;
    line-height: 1.25;
    color: var(--painel-tinta-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.corrida[data-tom="atencao"] .corrida__sit { color: var(--ouro); }
.corrida[data-tom="alerta"] .corrida__sit { color: var(--alerta-texto); }
.corrida__tempo {
    font: italic 700 1.16rem/1 var(--f-disp);
    font-variant-numeric: tabular-nums;
    color: var(--painel-tinta);
}
.torre__rodape {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px 18px 26px;
    font-size: .74rem;
    color: var(--painel-tinta-3);
}
.torre__rodape span:last-child { text-align: right; }

/* ── 7. seções ───────────────────────────────────────────────── */
.secao { position: relative; padding: clamp(88px, 13vh, 150px) 0; }
.secao__cab { max-width: 980px; }

/* ── 8. a estrada (plataforma) ───────────────────────────────── */
.estrada { position: relative; padding: clamp(88px, 13vh, 150px) 0 clamp(64px, 10vh, 120px); }
.estrada__cab { display: grid; grid-template-columns: minmax(0, 1fr); }
.estrada__fixo { position: relative; }
.estrada__pista {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(64px, 10vh, 110px);
    width: 100%;
    max-width: calc(var(--max) + var(--pad) * 2);
    margin: clamp(48px, 8vh, 80px) auto 0;
    padding: 0 var(--pad) 0 calc(var(--pad) + 44px);
}
/* modo vertical: a estrada corre pela esquerda */
.estrada__pista::before {
    content: '';
    position: absolute;
    left: calc(var(--pad) + 12px);
    top: 6px;
    bottom: 6px;
    width: 8px;
    background:
        linear-gradient(var(--ouro) 50%, transparent 0) center / 2px 22px repeat-y,
        var(--fundo-3);
}
.parada { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.parada::before {
    content: '';
    position: absolute;
    left: -38px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: var(--ouro);
    transform: skewX(var(--incl));
}
.parada__texto { display: grid; align-content: start; }
.parada__onde {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
}
.parada__hora {
    font: italic 900 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--f-disp);
    font-variant-numeric: tabular-nums;
    color: var(--destaque);
}
.parada__lugar {
    font: italic 800 .74rem/1.2 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-2);
}
.parada__nome { font-size: clamp(1.5rem, 7.4vw, 3.6rem); }
.parada__frase {
    margin-top: 14px;
    font: italic 600 clamp(1.05rem, 1.5vw, 1.3rem)/1.35 var(--f-disp);
    font-stretch: 105%;
    color: var(--tinta);
}
.pontos {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
    max-width: 52ch;
}
.pontos li {
    position: relative;
    padding-left: 30px;
    color: var(--tinta-2);
    font-size: .98rem;
}
.pontos li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .7em;
    width: 18px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--ouro);
}
.pontos li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: calc(.7em + 5px);
    width: 12px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--tinta-3);
}
.pontos strong { color: var(--tinta); font-weight: 600; }

.estrada__proximos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 20px;
    margin-top: clamp(56px, 9vh, 96px);
    padding-top: 24px;
    border-top: 1px solid var(--fio);
    color: var(--tinta-2);
}
.estrada__proximos .decal { margin: 0; }

/* asfalto: só existe no modo fixo (horizontal) */
.asfalto { display: none; }

@media (min-width: 1100px) {
    .estrada.fixa { padding: 0; }
    .estrada.fixa .estrada__fixo {
        position: sticky;
        top: var(--topo-h);
        height: calc(100vh - var(--topo-h));
        min-height: 620px;
        overflow: clip;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        padding-top: clamp(28px, 5vh, 56px);
    }
    .estrada.fixa .estrada__pista {
        display: flex;
        gap: 0;
        width: max-content;
        max-width: none;
        margin: 0;
        padding: 0 0 0 max(var(--pad), calc((100% - var(--max)) / 2));
        align-items: center;
        transform: translate3d(var(--x, 0px), 0, 0);
        will-change: transform;
    }
    .estrada.fixa .estrada__cab {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 20px clamp(32px, 5vw, 80px);
        align-items: end;
    }
    .estrada.fixa .estrada__cab .titulo--secao { font-size: clamp(1.7rem, 2.6vw, 2.6rem); max-width: 22ch; }
    .estrada.fixa .estrada__cab .intro { margin: 0; justify-self: end; max-width: 46ch; font-size: 1rem; }
    .estrada.fixa .parada__nome { font-size: clamp(1.8rem, 3vw, 3rem); }
    .estrada.fixa .parada__frase { margin-top: 10px; }
    .estrada.fixa .pontos { margin-top: 18px; gap: 9px; }
    .estrada.fixa .pontos li { font-size: .94rem; line-height: 1.55; }
    .estrada.fixa .estrada__pista::before { display: none; }
    /* em tela baixa o celular encolhe inteiro (a margem negativa devolve o espaço) */
    @media (max-height: 840px) {
        .estrada.fixa .celular { transform: scale(.86); margin: -30px 0; }
    }
    @media (max-height: 740px) {
        .estrada.fixa .celular { transform: scale(.76); margin: -51px 0; }
    }
    .estrada.fixa .parada {
        flex: none;
        width: min(84vw, 1180px);
        padding-right: clamp(48px, 6vw, 110px);
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: clamp(32px, 4vw, 64px);
        align-items: center;
        /* a parada que ainda não chegou perde a cor, não o contraste */
        filter: grayscale(1);
        transition: filter .4s;
    }
    .estrada.fixa .parada.ativa { filter: none; }
    .estrada.fixa .parada::before { display: none; }
    .estrada.fixa .estrada__proximos { display: none; }

    .estrada.fixa .asfalto {
        --a-ini: max(var(--pad), calc((100% - var(--max)) / 2));
        --a-fim: var(--a-ini);
        display: block;
        position: relative;
        height: 104px;
        margin-top: 8px;
    }
    /* asfalto é escuro em qualquer tema: o caminhão prateado precisa do contraste */
    .asfalto__pista {
        position: absolute;
        left: 0;
        right: 0;
        top: 30px;
        height: 34px;
        background: #1c1d21;
        border-top: 2px solid rgba(255, 255, 255, .08);
        border-bottom: 2px solid rgba(255, 255, 255, .08);
    }
    .asfalto__pista::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 3px;
        margin-top: -1.5px;
        background: linear-gradient(90deg, var(--ouro) 50%, transparent 0) var(--faixa-x, 0px) 0 / 44px 3px repeat-x;
    }
    .asfalto__marcos {
        position: absolute;
        left: var(--a-ini);
        right: var(--a-fim);
        top: 0;
        bottom: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .asfalto__marcos li { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); }
    /* as pontas encostam o rótulo para dentro, com o traço no ponto exato */
    .asfalto__marcos li:first-child { transform: none; }
    .asfalto__marcos li:first-child a { justify-items: start; padding-left: 0; }
    .asfalto__marcos li:last-child { transform: translateX(-100%); }
    .asfalto__marcos li:last-child a { justify-items: end; padding-right: 0; }
    .asfalto__marcos a {
        display: grid;
        justify-items: center;
        gap: 4px;
        height: 100%;
        padding: 0 6px;
        text-decoration: none;
        color: var(--tinta-3);
    }
    .asfalto__marcos a::before {
        content: '';
        order: 2;
        width: 4px;
        height: 34px;
        margin: 2px 0;
        background: var(--fio-2);
        transform: skewX(var(--incl));
    }
    .asfalto__marcos .m-hora {
        order: 1;
        font: italic 800 .8rem/1 var(--f-disp);
        font-variant-numeric: tabular-nums;
    }
    .asfalto__marcos .m-lugar {
        order: 3;
        font: italic 800 .66rem/1 var(--f-disp);
        font-stretch: 118%;
        letter-spacing: .12em;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .asfalto__marcos a.feito { color: var(--tinta-2); }
    .asfalto__marcos a.feito::before { background: var(--tinta-2); }
    .asfalto__marcos a.ativo { color: var(--destaque); }
    .asfalto__marcos a.ativo::before { background: var(--ouro); }
    .asfalto__caminhao {
        position: absolute;
        top: 18px;
        left: var(--a-ini);
        width: 120px;
        height: 44px;
        transform: translateX(calc(var(--cam, 0px) - 50%));
        will-change: transform;
        pointer-events: none;
    }
    /* as rodas giram na proporção do caminho andado */
    .asfalto__caminhao .roda {
        transform: rotate(var(--roda, 0deg));
        transform-box: fill-box;
        transform-origin: center;
    }
}

/* ── 9. telas de exemplo (sempre escuras, como o sistema na mão) ── */
.tela {
    position: relative;
    background: var(--painel);
    color: var(--painel-tinta);
    padding: 22px 24px 24px;
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
    font-size: .9rem;
}
.tela::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18px;
    width: 96px;
    height: 3px;
    background: var(--ouro);
}
.tela__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--painel-fio);
}
.tela__cab b {
    font: italic 800 .95rem/1.1 var(--f-disp);
    font-stretch: 112%;
    text-transform: uppercase;
}
.tela__cab > span { font-size: .78rem; color: var(--painel-tinta-2); }

.selo {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    position: relative;
    isolation: isolate;
    font: italic 800 .66rem/1 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--painel-tinta);
    white-space: nowrap;
}
.selo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1.5px solid currentColor;
    transform: skewX(var(--incl));
}
.tela__cab > .selo--ok { color: var(--ok); }
.tela__cab > .selo--sinal { color: var(--ouro); }
.selo--ok { color: var(--ok); }
.selo--sinal { color: var(--ouro); }
.selo--alerta { color: var(--alerta-texto); }

/* contagem */
.cont { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cont li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 18px;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: var(--painel-2);
}
.cont__prod { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cont__qtd { display: flex; gap: 10px; color: var(--painel-tinta-3); font-size: .74rem; }
.cont__qtd b {
    color: var(--painel-tinta);
    font: italic 700 .95rem/1 var(--f-disp);
    font-variant-numeric: tabular-nums;
}
.cont__tot {
    min-width: 54px;
    text-align: right;
    font: italic 800 1.1rem/1 var(--f-disp);
    font-variant-numeric: tabular-nums;
}
.cont__tot small { margin-left: 3px; font-size: .62rem; color: var(--painel-tinta-3); font-style: normal; }
.cont__nuvem { width: 18px; height: 18px; color: var(--ok); }
.cont__nuvem--off { color: var(--ouro); }
.cont li.sobe { outline: 1px dashed rgba(246, 183, 19, .55); outline-offset: -1px; }
.cont__aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: .78rem;
    color: var(--ouro);
}
.cont__aviso .ico { width: 16px; height: 16px; }

/* viagem */
.viagem { display: grid; gap: 16px; }
.viagem__trecho { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 14px; }
.viagem__seg {
    font: italic 800 .7rem/1 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--painel-tinta-2);
}
.viagem__trilha { position: relative; height: 30px; }
.viagem__trilha::before {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    background: var(--painel-3);
}
.viagem__feito {
    position: absolute;
    left: 6px;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    width: calc((100% - 12px) * var(--p, 0));
    background: var(--ouro);
}
.viagem__ponto {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: var(--painel);
    border: 2px solid var(--painel-tinta-3);
    transform: skewX(var(--incl));
}
.viagem__ponto--feito { background: var(--ouro); border-color: var(--ouro); }
.viagem__caminhao {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 19px;
    margin: -17px 0 0 -26px;
}
.viagem__pontos {
    display: flex;
    justify-content: space-between;
    padding-left: 68px;
    font-size: .74rem;
    color: var(--painel-tinta-3);
}
.viagem__rv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--painel-fio);
    font-size: .8rem;
    color: var(--painel-tinta-2);
}
.viagem__rv b { font: italic 800 .95rem/1 var(--f-disp); color: var(--painel-tinta); white-space: nowrap; }

/* raio: mapa híbrido com o raio poligonal, como na tela de raios do sistema */
.raio { display: grid; gap: 16px; }
.raio__mapa {
    position: relative;
    isolation: isolate;
    height: clamp(190px, 20vw, 250px);
    overflow: hidden;
    background: #1c1f1a;
    border: 1px solid var(--painel-fio);
}
.raio__mapa.leaflet-container { background: #1c1f1a; font-family: var(--f-text); }
.raio__mapa .leaflet-tile-pane { filter: saturate(.85) brightness(.9); }
.raio__reserva { position: absolute; inset: 0; width: 100%; height: 100%; }
.raio__mapa.pronto .raio__reserva { display: none; }
.raio__area { fill: rgba(246, 183, 19, .18); stroke: var(--ouro); stroke-width: 2; stroke-linejoin: round; }
.raio__trajeto { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 6 6; opacity: .9; }
.raio__ponto { fill: #fff; stroke: #0b0b0c; stroke-width: 2; }
.raio__eco {
    fill: none;
    stroke: var(--ouro);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: eco 2.4s ease-out infinite;
}
@keyframes eco {
    from { transform: scale(.6); opacity: .9; }
    to { transform: scale(2.6); opacity: 0; }
}
/* caminhão no mapa: ponto branco com o eco dourado */
.mapa-cam { position: relative; display: block; width: 16px; height: 16px; }
.mapa-cam i {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px #0b0b0c;
}
.mapa-cam::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--ouro);
    border-radius: 50%;
    animation: eco 2.4s ease-out infinite;
}
.leaflet-tooltip.mapa-rot {
    padding: 4px 8px;
    border: 0;
    border-left: 3px solid var(--ouro);
    border-radius: 0;
    background: rgba(14, 14, 16, .92);
    box-shadow: none;
    color: var(--painel-tinta);
    font: italic 800 .66rem/1.2 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.leaflet-tooltip.mapa-rot::before { display: none; }
.raio__mapa .leaflet-control-attribution {
    padding: 0 6px;
    background: rgba(14, 14, 16, .72);
    color: var(--painel-tinta-3);
    font-size: 9px;
    line-height: 1.6;
}
.raio__dados {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 28px;
    align-items: end;
    font-size: .8rem;
    color: var(--painel-tinta-2);
}
.raio__agora { display: grid; gap: 4px; }
.raio__dados .lista-tempo { margin: 0; }
.raio__tempo {
    font: italic 900 2.4rem/1 var(--f-disp);
    font-stretch: 112%;
    font-variant-numeric: tabular-nums;
    color: var(--painel-tinta);
}
.lista-tempo { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.lista-tempo li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--painel-fio);
}
.lista-tempo li > span:last-child {
    font: italic 700 .95rem/1 var(--f-disp);
    font-variant-numeric: tabular-nums;
    color: var(--painel-tinta);
}

/* dia do motorista: jornada perfeita pela Lei do Motorista, montada com as macros */
.cor--dir { background: var(--ouro); }
.cor--ref { background: var(--ok); }
.cor--trab { background: var(--prata); }
.cor--pausa { background: repeating-linear-gradient(-45deg, var(--painel-tinta-2) 0 2px, transparent 2px 5px); }
.dia-mot { --total: 9; display: grid; gap: 8px; }
.dia-mot__trilha { position: relative; height: 24px; background: var(--painel-2); }
.dm {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--a) / var(--total) * 100%);
    width: calc((var(--b) - var(--a)) / var(--total) * 100%);
}
.dm + .dm { box-shadow: inset 2px 0 0 var(--painel); }
.dia-mot__marcas { position: relative; height: 34px; list-style: none; margin: 0; padding: 0; }
.dia-mot__marcas li {
    position: absolute;
    top: 0;
    left: calc(var(--a) / var(--total) * 100%);
    display: grid;
    justify-items: center;
    gap: 2px;
    white-space: nowrap;
    transform: translateX(-50%);
}
.dia-mot__marcas li:first-child { justify-items: start; transform: none; }
.dia-mot__marcas li:last-child { justify-items: end; transform: translateX(-100%); }
.dia-mot__marcas b {
    font: italic 800 .8rem/1 var(--f-disp);
    font-variant-numeric: tabular-nums;
    color: var(--painel-tinta);
}
.dia-mot__marcas span { font-size: .68rem; line-height: 1.2; color: var(--painel-tinta-2); }
.dia-mot__legenda {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    font-size: .72rem;
    color: var(--painel-tinta-2);
}
.dia-mot__legenda li { display: flex; align-items: center; gap: 6px; }
.dia-mot__legenda i { width: 14px; height: 8px; }
.numeros {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--painel-fio);
}
.numeros > span { display: grid; gap: 4px; font-size: .72rem; color: var(--painel-tinta-3); }
.numeros b {
    font: italic 800 1.1rem/1 var(--f-disp);
    font-variant-numeric: tabular-nums;
    color: var(--painel-tinta);
}
.lei {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--painel-fio);
}
.lei li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: .8rem;
    color: var(--painel-tinta);
}
.lei .ico { width: 16px; height: 16px; color: var(--ok); }
.lei small {
    font: italic 700 .66rem/1 var(--f-disp);
    letter-spacing: .06em;
    color: var(--painel-tinta-3);
    white-space: nowrap;
}

/* portal do motorista: o celular com a foto do canhoto e o status da viagem.
   O aparelho é objeto físico — aqui o canto arredondado é o do telefone, não de cartão. */
.cel-cena {
    display: grid;
    grid-template-columns: auto minmax(0, 230px);
    align-items: center;
    justify-content: center;
    gap: 22px;
}
.celular {
    position: relative;
    width: 212px;
    height: 428px;
    padding: 8px;
    border-radius: 36px;
    background: #0b0b0c;
    box-shadow: inset 0 0 0 1.5px #34363b, 0 0 0 1px rgba(255, 255, 255, .07);
}
.celular::before,
.celular::after {
    content: '';
    position: absolute;
    width: 3px;
    background: #2b2d32;
}
.celular::before { right: -3px; top: 112px; height: 56px; border-radius: 0 2px 2px 0; }
.celular::after { left: -3px; top: 96px; height: 40px; border-radius: 2px 0 0 2px; }
.celular__ilha {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 50%;
    width: 60px;
    height: 17px;
    margin-left: -30px;
    border-radius: 10px;
    background: #000;
}
.celular__tela {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    height: 100%;
    padding: 8px 12px 12px;
    overflow: hidden;
    border-radius: 28px;
    background: #121316;
    color: var(--painel-tinta);
    font-size: .72rem;
}
.cel__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
    padding: 0 10px;
    font: 600 .64rem/1 var(--f-text);
    font-variant-numeric: tabular-nums;
}
.cel__sinais { display: flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.cel__sinais i { width: 2.5px; background: var(--painel-tinta); border-radius: 1px; }
.cel__sinais i:nth-child(1) { height: 3px; }
.cel__sinais i:nth-child(2) { height: 5px; }
.cel__sinais i:nth-child(3) { height: 7px; }
.cel__sinais i:nth-child(4) { height: 9px; }
.cel__sinais b {
    width: 16px;
    height: 8px;
    margin-left: 5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--painel-tinta) 72%, transparent 0);
    box-shadow: 0 0 0 1px rgba(239, 240, 242, .55);
}
.cel__app { display: grid; gap: 3px; }
.cel__rot { font-size: .62rem; color: var(--painel-tinta-2); }
.cel__tit {
    font: italic 900 1rem/1.05 var(--f-disp);
    font-stretch: 118%;
    text-transform: uppercase;
}
.cel__app .selo { justify-self: start; margin: 4px 0 0 4px; height: 20px; font-size: .58rem; }
.cel__foto {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
}
.cel__foto .canhoto { display: block; width: 100%; height: auto; }
/* o flash da câmera quando a parada chega */
.cel__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}
.parada.ativa .cel__foto::after { animation: flash .8s ease-out .3s both; }
@keyframes flash {
    0% { opacity: 0; }
    12% { opacity: .85; }
    100% { opacity: 0; }
}
.mira { position: absolute; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .85); }
.mira--a { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.mira--b { top: 7px; right: 7px; border-left: 0; border-bottom: 0; }
.mira--c { bottom: 7px; left: 7px; border-right: 0; border-top: 0; }
.mira--d { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.cel__enviado {
    position: absolute;
    left: 50%;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(11, 125, 76, .94);
    color: #fff;
    font: 700 .6rem/1 var(--f-text);
    white-space: nowrap;
    transform: translateX(-50%);
}
.cel__enviado .ico { width: 12px; height: 12px; }
.cel__enviado time { font-variant-numeric: tabular-nums; opacity: .85; }
.cel__passos { list-style: none; display: grid; margin: 0; padding: 0; }
.cel__passos li {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0 5px 18px;
    border-bottom: 1px solid rgba(239, 240, 242, .07);
}
.cel__passos li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--ok);
}
.cel__passos li.agora::before {
    background: var(--ouro);
    box-shadow: 0 0 0 3px rgba(246, 183, 19, .25);
    animation: pulsa 1.8s ease-in-out infinite;
}
.cel__passos time {
    font: italic 700 .68rem/1.2 var(--f-disp);
    font-variant-numeric: tabular-nums;
    color: var(--painel-tinta-2);
}
.cel__passos li.agora time { color: var(--ouro); }
.cel__botao {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 34px;
    margin-top: auto;
    border-radius: 8px;
    background: var(--ouro);
    color: #0a0a0b;
    font: italic 800 .66rem/1 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* do outro lado: a operação recebe a foto na hora */
.cel-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--painel-2);
    border-left: 3px solid var(--ok);
    color: var(--painel-tinta);
}
.cel-aviso .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ok); }
.cel-aviso b { display: block; font: italic 800 .82rem/1.25 var(--f-disp); font-stretch: 105%; }
.cel-aviso small { display: block; margin-top: 4px; font-size: .74rem; color: var(--painel-tinta-2); }

/* ── 10. faixa prata: de onde vem ────────────────────────────── */
.faixa {
    --k: clamp(28px, 5vw, 80px);
    position: relative;
    isolation: isolate;
    color: var(--chapa-tinta);
    padding: calc(var(--k) + clamp(64px, 10vh, 120px)) 0;
}
.faixa::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--chapa);
    clip-path: polygon(0 var(--k), 100% 0, 100% calc(100% - var(--k)), 0 100%);
}
.faixa::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -26px;
    height: calc(var(--k) + 26px);
    z-index: -1;
    background: var(--ouro);
    clip-path: polygon(0 calc(100% - 22px), 100% 0, 100% 12px, 0 calc(100% - 10px));
}
.faixa .decal { color: var(--chapa-tinta-2); }
.faixa .rastro { color: var(--chapa-tinta-2); }
.faixa .titulo em { color: inherit; }
.faixa__cab { max-width: 1000px; }
.faixa__antes { margin: clamp(48px, 7vh, 72px) 0 0; }
.riscos {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    border-top: 2px solid var(--chapa-fio);
}
.riscos li {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: 22px;
    padding: clamp(12px, 2vh, 20px) 0;
    border-bottom: 2px solid var(--chapa-fio);
    font: italic 900 clamp(1.4rem, 3.7vw, 3.3rem)/1.04 var(--f-disp);
    font-stretch: 112%;
    text-transform: uppercase;
    color: var(--chapa-tinta-2);
}
.riscos li small {
    font: italic 800 .74rem/1.2 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .12em;
    color: var(--chapa-tinta-2);
}
/* o risco acompanha cada linha do texto (fragmentos clonados) */
.riscado {
    padding: 0 .06em;
    background: linear-gradient(var(--chapa-tinta), var(--chapa-tinta)) no-repeat 0 54% / 0% .11em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size .7s var(--ease);
}
.riscos.vista .riscado { background-size: 100% .11em; }
.riscos.vista li:nth-child(2) .riscado { transition-delay: .14s; }
.riscos.vista li:nth-child(3) .riscado { transition-delay: .28s; }
.riscos.vista li:nth-child(4) .riscado { transition-delay: .42s; }
.faixa__fim {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 80px);
    margin-top: clamp(40px, 6vh, 64px);
    align-items: start;
}
.faixa__texto { display: grid; gap: 16px; font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--chapa-tinta-2); }
.faixa__texto strong { color: var(--chapa-tinta); font-weight: 600; }
.faixa__conclusao { font-size: clamp(1.5rem, 2.8vw, 2.5rem); }

/* ── 11. privacidade ─────────────────────────────────────────── */
.priv__topo {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: end;
}
.priv__lei {
    display: grid;
    gap: 8px;
    padding: 20px 0 4px 24px;
    border-left: 4px solid var(--ouro);
    color: var(--tinta-2);
    font-size: .95rem;
}
.priv__lei b {
    font: italic 900 clamp(1.4rem, 2.4vw, 2rem)/1 var(--f-disp);
    font-stretch: 125%;
    text-transform: uppercase;
    color: var(--tinta);
}
.abas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: clamp(36px, 6vh, 56px) 0 clamp(28px, 4vh, 40px);
    padding-left: 6px;
}
.aba {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    background: none;
    color: var(--tinta-2);
    font: italic 800 .82rem/1 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.aba::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1.5px solid var(--fio-2);
    transform: skewX(var(--incl));
    transition: background-color .16s, border-color .16s;
}
.aba small { font-size: .74rem; color: var(--tinta-3); }
.aba:hover::before { border-color: var(--tinta); }
.aba[aria-selected="true"] { color: var(--sobre-sinal); }
.aba[aria-selected="true"]::before { background: var(--sinal); border-color: var(--sinal); }
.aba[aria-selected="true"] small { color: var(--sobre-sinal); }
.aba:focus-visible { outline: none; }
.aba:focus-visible::before { outline: 2px solid var(--foco); outline-offset: 3px; }

.aba-painel:focus-visible { outline-offset: 8px; }
.principios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px clamp(28px, 5vw, 80px);
}
.principios li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; }
.principios .rastro { grid-row: span 2; margin-top: 6px; }
.principios h3 {
    margin: 0;
    font: italic 800 1.2rem/1.15 var(--f-disp);
    font-stretch: 112%;
    text-transform: uppercase;
}
.principios p { color: var(--tinta-2); }
.principios strong { color: var(--tinta); font-weight: 600; }

.codigo { border-top: 1px solid var(--fio); }
.codigo__cab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    padding: 16px 0;
    font: italic 800 .74rem/1.3 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-2);
}
.codigo details { border-top: 1px solid var(--fio); }
.codigo summary {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    padding: 10px 0;
    cursor: pointer;
    list-style: none;
}
.codigo summary::-webkit-details-marker { display: none; }
.codigo__cod {
    font: italic 800 .8rem/1 var(--f-disp);
    font-stretch: 112%;
    font-variant-numeric: tabular-nums;
    color: var(--destaque);
}
.codigo__tit { font: italic 700 1.05rem/1.25 var(--f-disp); font-stretch: 105%; }
.codigo__mais { position: relative; width: 16px; height: 16px; justify-self: end; }
.codigo__mais::before,
.codigo__mais::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 7px;
    height: 2px;
    background: currentColor;
    transition: transform .2s var(--ease);
}
.codigo__mais::after { transform: rotate(90deg); }
.codigo details[open] .codigo__mais::after { transform: rotate(0deg); }
.codigo details p { max-width: 72ch; padding: 0 40px 22px 90px; color: var(--tinta-2); }
.codigo details strong { color: var(--tinta); font-weight: 600; }

.direitos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(28px, 5vw, 80px);
}
.direitos li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--fio);
    color: var(--tinta-2);
}
.direitos .ico { width: 20px; height: 20px; color: var(--ok); }
[data-theme="light"] .direitos .ico { color: #0b7d4c; }

.dpo {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 24px clamp(24px, 4vw, 56px);
    align-items: center;
    margin-top: clamp(48px, 8vh, 80px);
    padding: 28px clamp(22px, 3vw, 40px);
    background: var(--painel);
    color: var(--painel-tinta);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.dpo__quem { display: grid; gap: 6px; }
.dpo__quem .decal { margin: 0; color: var(--painel-tinta-2); }
.dpo__quem .rastro { color: var(--painel-tinta-3); }
.dpo__quem h3 {
    margin: 0;
    font: italic 900 1.4rem/1.1 var(--f-disp);
    font-stretch: 118%;
    text-transform: uppercase;
}
.dpo__quem p { color: var(--painel-tinta-2); font-size: .92rem; }
.dpo__canal { display: grid; gap: 8px; }
.dpo__email {
    font: italic 800 clamp(1rem, 1.5vw, 1.25rem)/1.2 var(--f-disp);
    font-stretch: 105%;
    color: var(--ouro);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.dpo__email:hover { text-decoration: underline; text-underline-offset: 4px; }
.dpo__fatos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .84rem; color: var(--painel-tinta-2); }
.dpo__fatos li { display: flex; align-items: center; gap: 8px; }
.dpo__fatos .ico { width: 16px; height: 16px; color: var(--ok); }
.dpo__acoes { display: grid; gap: 12px; }
.dpo .btn--linha { --b-borda: rgba(239, 240, 242, .3); --b-tinta: var(--painel-tinta); }
.dpo .btn--linha:hover::before { border-color: var(--painel-tinta); }
.dpo :focus-visible { outline-color: var(--ouro-hi); }
.dpo .btn:focus-visible::before { outline-color: var(--ouro-hi); }

/* ── 12. contato ─────────────────────────────────────────────── */
.contato__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(40px, 6vw, 104px);
    align-items: start;
}
.zapzao {
    display: grid;
    gap: 10px;
    margin-top: clamp(32px, 5vh, 48px);
    text-decoration: none;
}
.zapzao small {
    display: flex;
    align-items: center;
    gap: 10px;
    font: italic 800 .76rem/1.2 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-2);
}
.zapzao small .ico { width: 20px; height: 20px; color: var(--tinta); }
.zapzao strong {
    font: italic 900 clamp(1.4rem, 6.2vw, 3.6rem)/1 var(--f-disp);
    font-stretch: 125%;
    font-variant-numeric: tabular-nums;
    color: var(--destaque);
    white-space: nowrap;
}
.zapzao:hover strong { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.canais { list-style: none; margin: clamp(28px, 4vh, 40px) 0 0; padding: 0; }
.canais li { border-top: 1px solid var(--fio); }
.canais li:last-child { border-bottom: 1px solid var(--fio); }
.canais a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 16px;
    min-height: 64px;
    padding: 12px 0;
    text-decoration: none;
}
.canais small { color: var(--tinta-3); font-size: .8rem; }
.canais strong { grid-column: 1; font: italic 700 1.02rem/1.3 var(--f-disp); font-stretch: 105%; overflow-wrap: anywhere; }
.canais .ico { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--tinta-3); transition: transform .18s var(--ease), color .18s; }
.canais a:hover .ico { transform: translateX(4px); color: var(--destaque); }
.contato__fatos { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 28px; }
.contato__fatos div { display: grid; gap: 4px; }
.contato__fatos span {
    font: italic 800 .7rem/1.2 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-3);
}
.contato__fatos b { font: italic 800 1.05rem/1.2 var(--f-disp); }

.form {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
    padding: clamp(24px, 3.4vw, 44px);
    background: var(--fundo-2);
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22px;
    width: 120px;
    height: 3px;
    background: var(--ouro);
}
.form__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
.campo--cheio { grid-column: 1 / -1; }
.campo label {
    font: italic 800 .72rem/1.2 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-2);
}
.campo label i { font-style: normal; color: var(--destaque); }
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1.5px solid var(--fio-2);
    border-radius: 0;
    background: transparent;
    color: var(--tinta);
    font-size: 1rem;
    transition: border-color .16s, box-shadow .16s;
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.campo select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238b8d93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat;
}
.campo select option { background: var(--fundo-2); color: var(--tinta); }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--tinta-3); opacity: 1; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: none; border-bottom-color: var(--sinal); box-shadow: 0 1.5px 0 var(--sinal); }
.campo [aria-invalid="true"] { border-bottom-color: var(--alerta); }

.consentimento {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    font-size: .88rem;
    color: var(--tinta-2);
    cursor: pointer;
}
.consentimento a { color: var(--tinta); text-underline-offset: 3px; }
.marca-caixa {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 1.5px solid var(--fio-2);
    background: transparent;
    display: grid;
    place-content: center;
    cursor: pointer;
}
.marca-caixa::after {
    content: '';
    width: 11px;
    height: 6px;
    border-left: 2.5px solid var(--sobre-sinal);
    border-bottom: 2.5px solid var(--sobre-sinal);
    transform: translateY(-2px) rotate(-45deg) scale(0);
    transition: transform .14s var(--ease);
}
.marca-caixa:checked { background: var(--sinal); border-color: var(--sinal); }
.marca-caixa:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.form__acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 6px; }
.form__nota {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: .8rem;
    color: var(--tinta-3);
}
.form__nota .ico { width: 18px; height: 18px; }
.aviso {
    grid-column: 1 / -1;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-left: 4px solid var(--ok);
    background: var(--fundo-3);
    font-size: .92rem;
}
.aviso.show { display: flex; }
.aviso .ico { width: 20px; height: 20px; color: var(--ok); }
.aviso[data-kind="err"] { border-left-color: var(--alerta); }
.aviso[data-kind="err"] .ico { color: var(--alerta); }
[data-theme="light"] .aviso .ico { color: #0b7d4c; }
[data-theme="light"] .aviso[data-kind="err"] .ico { color: #b8322a; }

/* ── 13. rodapé ──────────────────────────────────────────────── */
.rodape {
    position: relative;
    background: var(--moldura);
    color: var(--moldura-tinta);
    padding: clamp(80px, 12vh, 140px) 0 96px;
    overflow: clip;
}
.rodape::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--ouro) 0 62%, transparent 62% calc(62% + 14px), var(--prata-lo) calc(62% + 14px));
}
.verso { margin: 0; max-width: 1060px; }
.verso p {
    font: italic 400 clamp(1.7rem, 3.6vw, 3.2rem)/1.18 var(--f-verso);
    color: var(--moldura-tinta);
    text-wrap: balance;
}
.verso p::before {
    content: '\201C';
    display: block;
    height: .5em;
    margin-bottom: .08em;
    font-size: 2.4em;
    line-height: 1;
    color: var(--ouro);
}
.verso footer { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.verso cite {
    font: italic 800 .8rem/1 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--moldura-tinta-2);
}
.verso .rastro { color: var(--moldura-tinta-2); }
.rodape__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
    gap: 32px clamp(24px, 4vw, 56px);
    margin-top: clamp(64px, 10vh, 110px);
    padding-top: 40px;
    border-top: 1px solid var(--moldura-fio);
}
.rodape__marca { display: grid; gap: 16px; align-content: start; }
.rodape__marca img { width: 190px; height: auto; }
.rodape__marca p { max-width: 32ch; font-size: .9rem; color: var(--moldura-tinta-2); }
.rodape__col h2 {
    margin: 0 0 14px;
    font: italic 800 .72rem/1.2 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--moldura-tinta-2);
}
.rodape__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .93rem; }
.rodape__col a { color: var(--moldura-tinta); text-decoration: none; overflow-wrap: anywhere; }
.rodape__col a:hover { color: var(--ouro); }
.rodape__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 32px;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--moldura-fio);
    font-size: .8rem;
    color: var(--moldura-tinta-2);
}
.rodape__ajustes { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

/* botão do WhatsApp */
.zap {
    position: fixed;
    z-index: 40;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px;
    color: #06150d;
    font: italic 800 .82rem/1 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}
.zap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #25d366;
    transform: skewX(var(--incl));
    transition: background-color .16s;
}
.zap:hover::before { background: #3ee07b; }
.zap { transition: transform .3s var(--ease); }
.na-estrada .zap { transform: translateY(-118px); }
.zap .ico { width: 22px; height: 22px; }
.zap:focus-visible { outline: none; }
.zap:focus-visible::before { outline: 2px solid var(--foco); outline-offset: 3px; }

/* ── 14. telas menores ───────────────────────────────────────── */
@media (max-width: 1179px) {
    .largada { min-height: 0; display: block; }
    .largada__pintura { display: none; }
    .largada__grade { grid-template-columns: minmax(0, 1fr); gap: clamp(80px, 11vw, 120px); }
    .largada__texto { max-width: 760px; }
    .largada__h1 { font-size: clamp(2.2rem, 7.4vw, 4.6rem); }
    .largada__torre { max-width: 620px; width: 100%; justify-self: end; }
    .torre-chapa,
    .torre-faixa {
        display: block;
        position: absolute;
        z-index: -1;
        left: -100vw;
        right: -100vw;
        transform-origin: 50% 0;
        transform: skewY(-5deg);
    }
    .torre-chapa { top: 40px; bottom: -400px; background: var(--chapa); }
    .torre-faixa { top: 6px; height: 16px; background: var(--ouro); }
    .torre-faixa::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -18px;
        height: 5px;
        background: var(--prata-lo);
    }
    .js .largada__torre { animation-delay: .1s; }
}

@media (max-width: 960px) {
    .topo__ajustes { display: none; }
    .menu__grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .estrada__cab { grid-template-columns: minmax(0, 1fr); }
    .estrada__painel { justify-items: start; text-align: left; }
    .priv__topo { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .dpo { grid-template-columns: minmax(0, 1fr); }
    .dpo__acoes { grid-auto-flow: column; justify-content: start; }
    .contato__grade { grid-template-columns: minmax(0, 1fr); }
    .faixa__fim { grid-template-columns: minmax(0, 1fr); }
    .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    :root { --topo-h: 60px; }
    .topo__casca { gap: 10px; }
    .topo__marca .marca-nome { width: 124px; }
    .topo__marca .marca-g { width: 28px; height: 28px; }
    .topo__menu .rot { display: none; }
    .topo .btn--entrar .rot { display: none; }
    .topo .btn--entrar { padding: 0 16px; }
    .principios { grid-template-columns: minmax(0, 1fr); }
    .direitos { grid-template-columns: minmax(0, 1fr); }
    .estrada__pista { padding-left: calc(var(--pad) + 30px); }
    .estrada__pista::before { left: calc(var(--pad) + 4px); width: 6px; }
    .parada::before { left: -28px; width: 10px; height: 10px; }
    .codigo summary { grid-template-columns: 58px minmax(0, 1fr) 20px; gap: 12px; }
    .codigo details p { padding: 0 0 20px 70px; }
    .form { grid-template-columns: minmax(0, 1fr); }
    .riscos li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
    .raio__dados { grid-template-columns: minmax(0, 1fr); }
    .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cel-cena { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
    .cel-aviso { width: 100%; max-width: 320px; }
    /* marcas alternadas em duas linhas: no estreito, 13:30 e 15:00 ficam a 50px */
    .dia-mot__marcas { height: 68px; }
    .dia-mot__marcas li:nth-child(even) { top: 34px; }
    .lei li { grid-template-columns: 18px minmax(0, 1fr); }
    .lei small { grid-column: 2; }
    .tela { padding: 18px 16px 20px; }
    .cont li { grid-template-columns: minmax(0, 1fr) auto 18px; row-gap: 6px; }
    .cont__qtd { grid-column: 1; grid-row: 2; }
    .cont__tot { grid-row: 1 / span 2; grid-column: 2; }
    .cont__nuvem { grid-row: 1 / span 2; grid-column: 3; }
    .dpo__acoes { grid-auto-flow: row; }
    .zap .rot { display: none; }
    .zap { padding: 0 18px; }
}

@media (max-width: 420px) {
    .torre__cab, .torre__rodape { padding-left: 20px; padding-right: 16px; }
    .torre__titulo, .torre__ordem { margin-left: 20px; margin-right: 16px; }
    .corrida { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; padding-right: 16px; }
    .corrida__tempo { font-size: 1.02rem; }
    .rodape__grade { grid-template-columns: minmax(0, 1fr); }
    .largada__acoes .btn { width: 100%; }
}

/* ── 15. tela de entrada ─────────────────────────────────────── */
/* o formulário fica sempre na chapa clara; o lado do letreiro, sempre escuro */
:root {
    --entrar-form: #d6d8dc;
    --entrar-campo: #eef0f2;
    --entrar-tinta: #0b0b0c;
    --entrar-tinta-2: #393b40;
    --entrar-tinta-3: #55585f;
    --entrar-fio: rgba(11, 11, 12, .3);
}
[data-theme="light"] { --entrar-form: #f4f5f7; --entrar-campo: #ffffff; }

.pg-entrar { background: var(--moldura); }
.entrar {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(460px, .95fr);
    min-height: 100svh;
}

.entrar__painel {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 40px;
    padding: clamp(28px, 5vh, 52px) calc(22svh + 72px) clamp(28px, 5vh, 52px) clamp(24px, 4vw, 64px);
    background: var(--moldura);
    color: var(--moldura-tinta);
}
.entrar__pintura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.entrar__pintura span {
    position: absolute;
    top: 0;
    bottom: 0;
    transform-origin: 0 100%;
    transform: skewX(var(--incl));
}
.entrar__pintura .p-chapa { left: calc(100% - 22svh); right: -60%; background: var(--entrar-form); }
.entrar__pintura .p-faixa { left: calc(100% - 22svh - 36px); width: 18px; background: var(--ouro); }
.entrar__pintura .p-fio { left: calc(100% - 22svh - 54px); width: 5px; background: var(--prata-lo); }
.js .entrar__pintura span { animation: pintaChapa .9s var(--ease) both; }

.entrar__marca { justify-self: start; }
.entrar__marca img { width: 200px; height: auto; }
.entrar__saudacao { align-self: center; display: grid; gap: 4px; }
.entrar__saudacao .decal { margin: 0 0 8px; color: var(--moldura-tinta-2); }
.entrar__saudacao .rastro { color: var(--moldura-tinta-2); }
.entrar__oi { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.entrar__hora {
    font: italic 900 clamp(3.6rem, 8.6vw, 8rem)/.92 var(--f-disp);
    font-stretch: 112%;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--ouro);
}
.entrar__verso { max-width: 30rem; }
.entrar__verso p { font-size: clamp(1.2rem, 1.7vw, 1.55rem); }

.entrar__lado {
    --foco: #0b0b0c;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(18px, 3.4vh, 34px) clamp(24px, 4vw, 64px);
    background: var(--entrar-form);
    color: var(--entrar-tinta);
}
.entrar__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.entrar__voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--entrar-tinta-2);
    font: italic 800 .76rem/1 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}
.entrar__voltar:hover { color: var(--entrar-tinta); }
.entrar__voltar .ico { width: 18px; height: 18px; }
.entrar__ajustes { display: flex; align-items: center; gap: 12px; }
.entrar__lado .idiomas button { color: var(--entrar-tinta-3); }
.entrar__lado .idiomas button:hover,
.entrar__lado .idiomas button[aria-pressed="true"] { color: var(--entrar-tinta); }
.entrar__lado .idiomas button[aria-pressed="true"]::after { background: var(--entrar-tinta); }
.entrar__lado .temas [data-tema="light"] span { border-color: #8b8d93; }
.entrar__lado .temas button[aria-pressed="true"] span { outline-color: var(--entrar-tinta); }

.entrar__form {
    align-self: center;
    justify-self: center;
    width: min(100%, 420px);
    display: grid;
    gap: 20px;
    padding: 32px 0;
}
.entrar__titulo { font-size: clamp(2.6rem, 4vw, 3.8rem); }
.entrar__sub { margin-top: -8px; color: var(--entrar-tinta-2); }
.entrar__form .campo label { color: var(--entrar-tinta-2); }
.entrar__form .campo input {
    min-height: 54px;
    padding: 12px 14px;
    background: var(--entrar-campo);
    border-bottom: 2px solid var(--entrar-fio);
    color: var(--entrar-tinta);
}
.entrar__form .campo input::placeholder { color: #5c5f66; }
.entrar__form .campo input:focus {
    background: #fff;
    border-bottom-color: var(--entrar-tinta);
    box-shadow: inset 0 -2px 0 var(--entrar-tinta);
}
.campo__caixa { position: relative; }
.campo .campo__caixa input { padding-right: 54px; }
.campo__olho {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--entrar-tinta-2);
    cursor: pointer;
    transform: translateY(-50%);
}
.campo__olho .ico { width: 20px; height: 20px; }
.campo__olho .ico--fechado,
.campo__olho[aria-pressed="true"] .ico--aberto { display: none; }
.campo__olho[aria-pressed="true"] .ico--fechado { display: block; }
.entrar__linha { display: flex; justify-content: flex-end; margin-top: -8px; }
.link-sutil {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--entrar-tinta-2);
    font-size: .92rem;
    text-underline-offset: 3px;
}
.link-sutil:hover { color: var(--entrar-tinta); }
.btn--preto { --b-fundo: #0b0b0c; --b-borda: #0b0b0c; --b-tinta: var(--ouro); }
.btn--preto:hover::before { background: #232327; border-color: #232327; }
.entrar__enviar { width: 100%; min-height: 56px; margin-top: 4px; font-size: 1rem; }
.alerta {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-left: 4px solid #b8322a;
    background: rgba(184, 50, 42, .1);
    color: #7a1d17;
    font-size: .92rem;
}
.alerta.show { display: flex; }
.alerta .ico { width: 18px; height: 18px; flex: none; }
.entrar__rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    font-size: .78rem;
    color: var(--entrar-tinta-3);
}

/* janela: redefinir senha */
.janela {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: none;
    place-items: center;
    padding: 16px;
    background: rgba(5, 5, 6, .76);
}
.janela.open { display: grid; }
.janela__caixa {
    position: relative;
    width: min(100%, 520px);
    max-height: calc(100svh - 32px);
    overflow-y: auto;
    padding: 30px clamp(20px, 4vw, 34px) 32px;
    background: var(--painel);
    color: var(--painel-tinta);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    animation: sobe .32s var(--ease) both;
}
.janela__caixa::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    width: 120px;
    height: 3px;
    background: var(--ouro);
}
.janela :focus-visible { outline-color: var(--ouro-hi); }
.janela .btn:focus-visible::before { outline-color: var(--ouro-hi); }
.janela__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.janela__cab h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.janela__fechar {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--painel-fio);
    background: none;
    color: var(--painel-tinta-2);
    cursor: pointer;
}
.janela__fechar:hover { color: var(--painel-tinta); border-color: var(--painel-tinta-3); }
.janela__fechar .ico { width: 18px; height: 18px; }
.passos { list-style: none; display: flex; gap: 10px; margin: 22px 0 0; padding: 0 0 0 4px; }
.passo {
    position: relative;
    isolation: isolate;
    flex: 1;
    padding: 9px 8px;
    text-align: center;
    font: italic 800 .7rem/1 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--painel-tinta-3);
}
.passo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1.5px solid var(--painel-fio);
    transform: skewX(var(--incl));
}
.passo.feito { color: var(--painel-tinta-2); }
.passo.feito::before { border-color: var(--painel-tinta-3); }
.passo.active { color: var(--sobre-sinal); }
.passo.active::before { background: var(--ouro); border-color: var(--ouro); }
.janela__desc { margin-top: 18px; color: var(--painel-tinta-2); font-size: .95rem; }
.msg {
    margin-top: 16px;
    padding: 10px 14px;
    border-left: 4px solid var(--alerta);
    background: rgba(255, 91, 79, .1);
    color: var(--alerta-texto);
    font-size: .9rem;
}
.msg--ok { border-left-color: var(--ok); background: rgba(61, 220, 151, .1); color: var(--ok); }
.fp-form { display: none; gap: 18px; margin-top: 22px; }
.fp-form.active { display: grid; }
.campo__rot {
    font: italic 800 .72rem/1.2 var(--f-disp);
    font-stretch: 118%;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.janela .campo label,
.janela .campo__rot { color: var(--painel-tinta-2); }
.janela .campo input { color: var(--painel-tinta); border-bottom-color: rgba(239, 240, 242, .26); }
.janela .campo input::placeholder { color: var(--painel-tinta-3); }
.janela .campo input:focus { border-bottom-color: var(--ouro); box-shadow: 0 1.5px 0 var(--ouro); }
.janela .campo__olho { color: var(--painel-tinta-2); }
.fp-enviar { width: 100%; }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.janela .otp input {
    min-height: 62px;
    padding: 0;
    text-align: center;
    background: var(--painel-2);
    border: 1.5px solid var(--painel-fio);
    font: italic 900 1.8rem/1 var(--f-disp);
    font-stretch: 112%;
    font-variant-numeric: tabular-nums;
    caret-color: var(--ouro);
}
.janela .otp input:focus { outline: none; border-color: var(--ouro); box-shadow: inset 0 -3px 0 var(--ouro); }
.janela .otp input.filled { border-color: var(--painel-tinta-3); }
.fp-dica { min-height: 1.2em; margin-top: 8px; font-size: .85rem; color: var(--painel-tinta-2); }
.fp-reenviar {
    justify-self: center;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--painel-tinta-2);
    font: italic 800 .76rem/1 var(--f-disp);
    font-stretch: 112%;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}
.fp-reenviar:hover { color: var(--painel-tinta); }
.fp-reenviar[disabled] { color: var(--painel-tinta-3); text-decoration: none; cursor: default; }
.forca { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.forca__barra { flex: 1; height: 6px; overflow: hidden; background: var(--painel-3); }
.forca__barra span { display: block; width: 0; height: 100%; background: var(--painel-tinta-3); transition: width .25s var(--ease), background-color .25s; }
.forca[data-level="weak"] .forca__barra span { background: var(--alerta); }
.forca[data-level="medium"] .forca__barra span { background: var(--ouro); }
.forca[data-level="strong"] .forca__barra span { background: var(--ok); }
.forca__rot {
    min-width: 4.5em;
    text-align: right;
    font: italic 800 .72rem/1 var(--f-disp);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--painel-tinta-2);
}
.regras {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    font-size: .84rem;
    color: var(--painel-tinta-3);
}
.regras li { display: flex; align-items: center; gap: 8px; }
.regras .ico { width: 16px; height: 16px; flex: none; opacity: .3; }
.regras li.ok { color: var(--painel-tinta); }
.regras li.ok .ico { opacity: 1; color: var(--ok); }
.confere { min-height: 1.2em; margin-top: 8px; font-size: .85rem; }
.confere[data-state="ok"] { color: var(--ok); }
.confere[data-state="no"] { color: var(--alerta-texto); }

@media (max-width: 959px) {
    .entrar { grid-template-columns: minmax(0, 1fr); }
    .entrar__painel {
        grid-template-rows: auto auto;
        gap: 22px;
        padding: 20px var(--pad) 76px;
    }
    .entrar__pintura { display: none; }
    /* em pé, a diagonal vira a borda de baixo do lado escuro */
    .entrar__painel::before,
    .entrar__painel::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 64px;
        z-index: -1;
    }
    .entrar__painel::after { background: var(--entrar-form); clip-path: polygon(0 100%, 100% 30%, 100% 100%); }
    .entrar__painel::before {
        background: var(--ouro);
        clip-path: polygon(0 calc(100% - 22px), 100% calc(30% - 22px), 100% calc(30% - 10px), 0 calc(100% - 10px));
    }
    .entrar__marca img { width: 150px; }
    .entrar__oi { font-size: clamp(1.8rem, 7.6vw, 3rem); }
    .entrar__hora { font-size: clamp(2.8rem, 15vw, 5rem); }
    .entrar__verso { display: none; }
    .entrar__lado { padding: 6px var(--pad) 24px; }
    .entrar__form { padding: 18px 0 30px; }
}

@media (max-width: 420px) {
    .regras { grid-template-columns: minmax(0, 1fr); }
    .janela .otp input { min-height: 54px; font-size: 1.5rem; }
    .otp { gap: 6px; }
}

/* ── 16. menos movimento ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .torre__vivo i, .raio__eco, .mapa-cam::after, .cel__passos li.agora::before, .parada.ativa .cel__foto::after { animation: none !important; }
}