/* ─────────────────────────────────────────────────────────────────────────────
   ecanter.css: as secções novas das páginas do Fuso eCanter
   (/fuso/ecanter e /fuso/ecanter/ecanter-4-25t, -6-0t, -7-49t e -8-55t)
   ─────────────────────────────────────────────────────────────────────────────
   Carrega depois do CSS do site e do `fuso_seo.css`. São variantes das peças que
   estas páginas já têm (a faixa cinzenta, as linhas de texto e fotografia, a
   faixa com fotografia e véu, a tabela das classes e as camadas do `.site-faq`):
   não há cor, letra nem peça nova, só o branco, a tinta #0e0e12, o cinzento das
   linhas #e3e5e6, o #5c6367 da sobrancelha e as quatro paragens do degradê da
   `.bg-gradient-animation`. O HTML sai do `_ecanter_seccoes.php` e o movimento
   do `assets/js/ecanter.js`; sem ele os desenhos estão completos e as bandas
   desenhadas.

   Mobile first: o que não leva `@media` é o telemóvel; o resto sobe nos
   degraus 641, 769 e 1025. A grelha dos dados, o botão do meio e as tabelas
   mudam de forma pela largura do bloco onde vivem (`@container`), e não pela
   do ecrã: entre 992 e 1024 as linhas da página já têm duas colunas e estes
   blocos ainda não as tinham.
   ─────────────────────────────────────────────────────────────────────────── */

/* O degradê da casa para os desenhos vive num SVG sem tamanho. Sem `display:
   none`, que no Chrome apagava a referência ao gradiente. */
.fuso-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── O perfil: variante `.fuso-intro--desenho` ──────────────────────────── */
/* O mesmo padding e as mesmas colunas da faixa em degradê, com o cinzento das
   linhas e a tinta no lugar do branco. */
.fuso-intro--desenho { background: #e3e5e6; }
.fuso-intro--desenho .intro-highlight span,
.fuso-intro--desenho .highlight-description {
    color: #0e0e12;
    transition: color .2s cubic-bezier(.23, 1, .32, 1);
}

/* No telemóvel o desenho sangra até às bordas, para o camião se ver inteiro
   com 152 px de altura; a legenda volta ao alinhamento das colunas. */
.fuso-intro--desenho > .fuso-desenho {
    width: 125%;
    max-width: none;
    margin: 0 -12.5% 21px;
    padding: 0;
}
.fuso-desenho__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fuso-desenho__svg path { vector-effect: non-scaling-stroke; stroke-width: 1.25px; }
.fuso-desenho figcaption {
    margin: 13px 12.5% 0;
    font-size: 15px;
    line-height: 22.5px;
    color: #5c6367;
}

/* O esboço é a cópia de baixo, posta pelo ecanter.js: o camião inteiro desde a
   entrada, em lápis, e a tinta cheia passa por cima. */
.fuso-desenho__esboco { opacity: .22; }
.fuso-desenho__svg g[data-zona] { transition: opacity .2s cubic-bezier(.23, 1, .32, 1); }
.fuso-desenho__svg g.is-recuada { opacity: .4; }
.fuso-carga { fill: url(#fuso-degrade); stroke: none; transform-box: fill-box; }

/* Enquanto se percorre, a coluna da zona acesa ganha a tinta e um filete de
   2 px no degradê; as outras ficam no cinzento da sobrancelha (4,84:1). */
.fuso-intro--desenho .intro-highlight span { position: relative; padding-bottom: 8px; }
.fuso-intro--desenho .intro-highlight span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); /* ds-ok: as quatro paragens da .bg-gradient-animation destas páginas */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s cubic-bezier(.23, 1, .32, 1);
}
.fuso-intro--desenho.is-a-percorrer .intro-highlight-container:not(.is-ativa) .intro-highlight span,
.fuso-intro--desenho.is-a-percorrer .intro-highlight-container:not(.is-ativa) .highlight-description { color: #5c6367; }
.fuso-intro--desenho .intro-highlight-container.is-ativa .intro-highlight span::after { transform: scaleX(1); }

@media (min-width: 641px) {
    .fuso-intro--desenho > .fuso-desenho { width: 100%; margin: 0 0 21px; }
    .fuso-desenho figcaption { margin: 13px 3% 0; }
}
@media (min-width: 1025px) {
    .fuso-desenho__svg path { stroke-width: 1.5px; }
}

/* ── Os packs: a metade escura com as plantas a traço branco ────────────── */
/* Tem o peso de uma fotografia, no lugar dela. As duas plantas à mesma escala:
   a de 1.700 mm a 79,4% da largura da de 1.995 mm (547 contra 689 unidades). */
.model-intro-section .image-container.fuso-plantas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 45px;
    padding: 70px 45px;
    background: #0e0e12;
}
.fuso-planta { margin: 0; transition: opacity .2s cubic-bezier(.23, 1, .32, 1); }
.fuso-planta--1700 .fuso-desenho__svg { width: 79.4%; }
.fuso-planta .fuso-desenho__esboco { opacity: .2; }
.fuso-planta.is-recuada { opacity: .4; }
.fuso-planta figcaption {
    margin-top: 15px;
    font-size: 15px;
    line-height: 22.5px;
    color: #fff;
}
.fuso-planta figcaption strong { font-weight: 700; }

[data-ec-packs] [data-ec-pack] { transition: color .2s cubic-bezier(.23, 1, .32, 1); }
[data-ec-packs].is-a-percorrer [data-ec-pack]:not(.is-ativo) { color: #5c6367; }

@media (min-width: 1025px) {
    .model-intro-section .image-container.fuso-plantas { padding: 70px 72px; }
}

/* ── Os blocos de dados (autonomia, versões) numa linha centrada ────────── */
/* A `.text-content.centered` dá o padding e a margem das linhas; aqui os blocos
   ocupam a largura toda e leem-se à esquerda, como a tabela das classes. */
.fuso-dados { gap: 45px; }
.fuso-dados > * { width: 100%; }
.model-intro-section .text-content.centered .fuso-dados__bloco p,
.model-intro-section .text-content.centered .fuso-camada p { text-align: left; }
.fuso-dados__grelha { display: grid; gap: 45px; width: 100%; }
.fuso-dados__bloco { min-width: 0; text-align: left; }
.fuso-dados__bloco .text-eyebrow { margin-bottom: 21px; }

/* O bloco mede-se a si próprio: é a largura dele que decide as colunas e a
   forma das tabelas, venha ela de que degrau vier. */
.model-intro-section .text-content.fuso-dados,
.fuso-dados__bloco,
.model-intro-section .text-content:has(> .fuso-seo__table--garantia) { container-type: inline-size; }

/* Duas colunas com o eixo a meio e o vão de 70, logo que cada uma fique com
   345 px ou mais (as quatro pastilhas das bandas e a tabela S, M e L): dos
   992 px do ecrã para cima, como as outras linhas da página. */
@container (min-width: 760px) {
    .fuso-dados__grelha { grid-template-columns: 1fr 1fr; column-gap: 70px; align-items: start; }
    /* Na classe há uma banda só: passa à largura toda, por cima da tabela. */
    .fuso-dados__grelha--empilhada { grid-template-columns: 1fr; }
}

/* ── As tabelas: a anatomia da `.fuso-seo__table` ───────────────────────── */
/* No telemóvel a regra global das tabelas esconde o cabeçalho; aqui os S, M e
   L são o próprio cabeçalho, por isso volta. */
.fuso-seo__table--dados thead {
    position: static;
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
}
/* Sem a moldura de 1 px que a regra global `table` do site põe acima dos
   600 px (e tira abaixo): o texto encostava-lhe dos dois lados, e o bordo da
   tabela deixava de alinhar com o texto da secção. Ficam as linhas da
   anatomia: a de tinta sob o cabeçalho e a hairline entre linhas. */
.fuso-seo__table--dados { border: 0; color: var(--site-ink); }
/* 13 px entre colunas (8 × φ), no cabeçalho e no corpo, para os números
   nunca encostarem à coluna do lado; os algarismos tabulares alinham as
   casas de cima a baixo. */
.fuso-seo__table--dados td,
.fuso-seo__table--dados thead th:not(:first-child) { padding-left: 13px; }
.fuso-seo__table--dados td { white-space: normal; font-variant-numeric: tabular-nums; }
/* O cabeçalho parte em linhas em vez de sair da coluna (a regra das classes
   deixa o último numa linha só, e aqui ele saía 57 a 78 px da tabela), e
   assenta na linha de tinta, junto da coluna que nomeia. */
.fuso-seo__table--dados thead th,
.fuso-seo__table--dados thead th:last-child { white-space: normal; vertical-align: bottom; }
/* O cabeçalho das bandas e o da tabela com a mesma altura: as linhas de tinta
   ficam à mesma altura nos dois blocos. */
.fuso-seo__table--dados thead th,
.fuso-bandas__cortes { line-height: 1.3; }
/* Na garantia o prazo fica inteiro numa linha. No telemóvel o rótulo sobe
   para uma linha própria, como na tabela S, M e L, para o prazo caber. */
.fuso-seo__table--garantia td { white-space: nowrap; }
.fuso-seo__table--garantia,
.fuso-seo__table--garantia thead,
.fuso-seo__table--garantia tbody { display: block; width: 100%; }
.fuso-seo__table--garantia thead tr { display: grid; grid-template-columns: 1fr 1fr; }
.fuso-seo__table--garantia tbody tr { display: grid; grid-template-columns: 1fr; }
.fuso-seo__table--garantia th,
.fuso-seo__table--garantia td { display: block; }
.fuso-seo__table--garantia tbody th { padding-bottom: 0; border-bottom: 0; }
.fuso-seo__table--garantia tbody td { padding-top: 8px; }
/* Duas colunas quando a coluna de texto tem 377 px: o rótulo e o prazo mais
   longo («6 anos ou 200.000 km») lado a lado, com o vão de 13. Entre 992 e
   1024 a coluna tem 300 px e o prazo saía 31 px da tabela. */
@container (min-width: 377px) {
    .fuso-seo__table--garantia { display: table; }
    .fuso-seo__table--garantia thead { display: table-header-group; }
    .fuso-seo__table--garantia tbody { display: table-row-group; }
    .fuso-seo__table--garantia thead tr,
    .fuso-seo__table--garantia tbody tr { display: table-row; }
    .fuso-seo__table--garantia th,
    .fuso-seo__table--garantia td { display: table-cell; }
    .fuso-seo__table--garantia tbody th { padding-bottom: 16px; border-bottom: 1px solid var(--site-line); }
    .fuso-seo__table--garantia tbody td { padding-top: 16px; }
}
@container (min-width: 377px) {
    /* O passo dos 769 só vale com as colunas lado a lado: empilhada, no
       computador também, fica o espaço do telemóvel entre o rótulo e o prazo. */
    @media (min-width: 769px) {
        .fuso-seo__table--garantia tbody th { padding-bottom: 21px; }
        .fuso-seo__table--garantia tbody td { padding-top: 21px; }
    }
}
.fuso-seo__table--dados td::before { content: none; }
/* A regra global tira o filete à última célula no telemóvel; aqui a linha vai
   até ao fim, como no computador. */
.fuso-seo__table--dados td:last-child { border-bottom: 1px solid var(--site-line); }
.fuso-seo__table--dados thead th:not(:first-child) { text-align: right; }
.fuso-seo__table--dados tbody th strong { display: block; font-weight: 500; }
.fuso-seo__table--dados small {
    display: block;
    color: var(--site-ink-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}
.fuso-seo__table--dados small { white-space: nowrap; }

/* A tabela S, M e L no telemóvel: o rótulo numa linha própria por cima dos
   valores, e cada valor numa linha, em três colunas (duas na classe). */
.fuso-seo__table--packs,
.fuso-seo__table--packs thead,
.fuso-seo__table--packs tbody { display: block; width: 100%; }
.fuso-seo__table--packs thead tr,
.fuso-seo__table--packs tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); }
.fuso-seo__table--c2 thead tr,
.fuso-seo__table--c2 tbody tr { grid-template-columns: repeat(2, 1fr); }
.fuso-seo__table--packs th,
.fuso-seo__table--packs td { display: block; white-space: nowrap; }
.fuso-seo__table--packs thead th:first-child { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.fuso-seo__table--packs tbody th { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; }
.fuso-seo__table--packs tbody td { padding-top: 8px; }

/* Linhas lado a lado quando o bloco tem 480 px: o rótulo em 38,2 % (a secção
   áurea) e cada pack com os 98 px de «4 h 54 min» e o vão. Abaixo, o rótulo
   sobe para a linha dele, como no telemóvel. */
@container (min-width: 480px) {
    .fuso-seo__table--packs { display: table; }
    .fuso-seo__table--packs thead { display: table-header-group; }
    .fuso-seo__table--packs tbody { display: table-row-group; }
    .fuso-seo__table--packs thead tr,
    .fuso-seo__table--packs tbody tr { display: table-row; }
    .fuso-seo__table--packs th,
    .fuso-seo__table--packs td { display: table-cell; }
    .fuso-seo__table--packs thead th:first-child { position: static; width: 38.2%; height: auto; overflow: visible; clip-path: none; }
    /* O rótulo parte dentro da coluna dele: numa linha só, passava por cima
       do valor do S. */
    .fuso-seo__table--packs tbody th { padding-bottom: 16px; border-bottom: 1px solid var(--site-line); white-space: normal; }
    .fuso-seo__table--packs tbody td { padding-top: 16px; }
}
@container (min-width: 480px) {
    @media (min-width: 769px) {
        .fuso-seo__table--packs tbody th { padding-bottom: 21px; }
        .fuso-seo__table--packs tbody td { padding-top: 21px; }
    }
}

/* A tabela que não cabe rola por dentro, com a primeira coluna presa. */
.fuso-tabela-rola {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}
.fuso-tabela-rola:focus-visible { outline: 2px solid #0e0e12; outline-offset: 2px; }
/* A ponta da direita esbate enquanto há o que ver, com as classes do
   `ScrollEdges.js` da casa e o `--scroll-fade` de 32 px. A da esquerda não:
   é lá que a primeira coluna fica presa. */
.fuso-tabela-rola.is-edge-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-fade, 32px)), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-fade, 32px)), transparent 100%);
}
/* A tabela ocupa a largura do bloco e só rola quando ele é mais estreito do
   que o mínimo dela, sem depender de um degrau (com o degrau, a 768 px as
   versões ficavam em metade da largura). */
.fuso-tabela-rola .fuso-seo__table { width: 100%; }
/* As versões: quatro colunas de 67 px inteiras nos 300 px úteis a 390 (entre
   eixos, bateria, carga útil e caixa), e o raio a começar debaixo do esbatido
   de 32 px, a dizer que há mais. */
.fuso-tabela-rola .fuso-seo__table--versoes { min-width: 335px; }
/* Com a coluna da cabina (a 4.25t tem duas) são seis colunas de 67 px. */
.fuso-tabela-rola .fuso-seo__table--com-cabina { min-width: 402px; }
.fuso-seo__table--versoes th,
.fuso-seo__table--versoes td { font-size: 15px; white-space: nowrap; }
.fuso-tabela-rola .fuso-seo__table--larga { min-width: 560px; }
/* A coluna presa leva 16 px à direita: os valores passam por baixo dela sem
   encostar ao rótulo. */
.fuso-tabela-rola .fuso-seo__table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-right: 16px;
    background: #e3e5e6;
}

@media (min-width: 641px) {
    .fuso-seo__table--dados td { white-space: nowrap; }
    .fuso-seo__table--versoes th,
    .fuso-seo__table--versoes td { font-size: 16px; }
}

/* ── As bandas da autonomia (interface-cms §8) ──────────────────────────── */
/* Os cortes leem-se como o cabeçalho de uma tabela (13/400 sobre a linha de
   tinta); cada banda leva o nome como uma linha da tabela (16/500) e os km
   numa pastilha branca em cada corte. */
.fuso-bandas { margin: 0; }
.fuso-bandas__cortes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--site-ink);
    color: var(--site-ink-2);
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
}
.fuso-banda { padding: 16px 0 0; }
.model-intro-section .text-content .fuso-banda__nome {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.4;
}
.fuso-banda__nome strong { font-weight: 500; }
.fuso-banda__nome small { color: var(--site-ink-2); font-size: 14px; }
.fuso-banda__forma {
    position: relative;
    height: 56px;
    transition: clip-path .9s cubic-bezier(.23, 1, .32, 1);
}
.fuso-banda__forma svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fuso-banda__area { fill: url(#fuso-degrade); }
.fuso-banda__bordo {
    fill: none;
    stroke: #0e0e12;
    stroke-opacity: .6;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}
.fuso-banda__km {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 6px;
    border-radius: 50px;
    background: #fff;
    color: #0e0e12;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.fuso-banda__km:nth-of-type(1) { left: 12.5%; }
.fuso-banda__km:nth-of-type(2) { left: 37.5%; }
.fuso-banda__km:nth-of-type(3) { left: 62.5%; }
.fuso-banda__km:nth-of-type(4) { left: 87.5%; }
/* O recorte da esquerda, uma vez, a 40% à vista. O estado de partida põe-no o
   ecanter.js: sem ele as bandas estão desenhadas. */
.fuso-bandas.is-por-revelar .fuso-banda__forma { clip-path: inset(0 100% 0 0); }

/* Dos 641 para cima as pastilhas sobem aos 15 px; abaixo ficam nos 13 da
   letra dos cortes, porque a 15 ficavam a 4 px umas das outras nos 75 px de
   cada corte. */
@media (min-width: 641px) {
    .fuso-banda__km { padding: 4px 8px; font-size: 15px; }
}
@media (min-width: 769px) {
    .fuso-bandas__cortes { padding-bottom: 21px; }
    .fuso-banda { padding-top: 21px; }
}

/* ── As camadas: o `.site-faq` sobre o cinzento das linhas ──────────────── */
.model-intro-section .fuso-camada { width: 100%; margin: 21px 0 0; text-align: left; }
.model-intro-section .fuso-camada summary { color: var(--site-ink); }
.model-intro-section .fuso-camada details > .fuso-tabela-rola { margin-bottom: 8px; }
.fuso-dados > .fuso-camada { margin-top: 0; }

/* ── «Receber proposta» a meio ──────────────────────────────────────────── */
.fuso-proposta { width: 100%; }
/* Ao centro só quando a grelha tem duas colunas: fica no eixo entre elas. Com
   uma coluna, alinha com o texto. */
@container (min-width: 760px) {
    .model-intro-section .text-content.centered .fuso-proposta { display: flex; justify-content: center; }
}

/* As pílulas medem 38 px de desenho; um `::before` alarga o alvo para 44 sem
   mudar o desenho, em todas as do conteúdo ao mesmo tempo, para não haver duas
   alturas para o mesmo botão. */
main .bt-filled.normal,
main .bt-outline.normal { position: relative; }
main .bt-filled.normal::before,
main .bt-outline.normal::before { content: ""; position: absolute; inset: -3px 0; }
/* O anel de foco da pílula é o `currentColor` (branco), que sobre o cinzento
   das linhas dava 1,3:1; no botão novo vai na tinta. */
.fuso-proposta .bt-filled.dark:focus-visible { outline-color: #0e0e12; }

/* ── A herança: o número na caixa de 70 do ícone ────────────────────────── */
/* A fotografia das gerações é um desenho escuro (luminosidade média 61
   contra 185 na de «Completamente carregado»): com o mesmo véu de 60% ficava
   três vezes mais escura do que as faixas vizinhas. Clareia-se a fotografia,
   e o véu fica o da casa. */
.fuso-intro--numeros .img-parallax { filter: brightness(3); }

/* O número tem a medida do H1 do herói: 52/700 no computador e 28/700 no
   telemóvel. Entre os dois, 45 (28 × φ): numa coluna dos 769 aos 991 e nas
   três colunas dos 992 aos 1024, onde o «> 251.700» a 52 (251 px) não cabia
   nos 219 px da coluna e a 45 ocupa 217. */
.fuso-intro .intro-highlight .intro-highlight__numero {
    font-size: 28px;
    line-height: 70px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
@media (min-width: 769px) {
    .fuso-intro .intro-highlight .intro-highlight__numero { font-size: 45px; }
}
@media (min-width: 1025px) {
    .fuso-intro .intro-highlight .intro-highlight__numero { font-size: 52px; }
}

/* ── Movimento reduzido ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fuso-desenho__svg g[data-zona],
    .fuso-planta,
    .fuso-banda__forma,
    .fuso-intro--desenho .intro-highlight span::after { transition: none; }
}