/* A antevisão da nova Mitsubishi L200 (/mitsubishi/l200)

   O herói, as cores do carro com o filme, e o carrossel dos destaques (esse na
   `l200-destaques.css`). Escreve-se primeiro para o telemóvel: a base, sem
   @media, é o ecrã estreito, e o que o ecrã largo muda vem em `min-width` nos
   degraus da casa (481, 641, 769, 1025 e 1281).

   AS MEDIDAS VÊM DE UMA PÁGINA DE REFERÊNCIA e estão todas em função de uma só,
   `--l200-u`, a largura útil do carro (da roda de trás à roda da frente):

     o carro (a imagem é 1/0,679 mais larga do que ele)  1 u
     o degradê                                           0,4333 u de altura: começa
                                                         no topo do nome e acaba,
                                                         em corte seco, um pouco
                                                         acima do centro das rodas
                                                         (o carro está 10% da
                                                         altura dele mais abaixo)
     o nome do modelo                                    80% da altura do degradê
                                                         (0,3466 u), e por isso
                                                         1,4268 u de largura

   `--l200-u` é a largura que o degrau pede (85vw no telemóvel, 68vw a partir
   de 1281px) travada pela ALTURA, porque tem de sobrar espaço por baixo do
   carro para o texto e o botão caberem sem rolar, e pela LARGURA do nome, que
   é mais largo do que o carro e tem de caber inteiro no ecrã (no telemóvel é
   ele que manda, e o carro fica com cerca de 64% da largura). A altura do
   bloco de texto não se mede em execução, estima-se em `--l200-texto` por
   degrau, e a prova de cada largura confirma a estimativa.

   O CARRO MAIOR, A LINHA DAS CORES E A FOLGA DO TEXTO NÃO ENTRAM NESSE TRAVÃO,
   de propósito: o carro desenha-se 20% maior (`--l200-carro-k`) e o texto desce
   (`--l200-folga-texto`) por pedido, e contá-los no travão encolhia a imagem de
   volta ao tamanho de antes. Em ecrãs largos e baixos (1440 por 900) o título e
   os botões vêm por isso depois da dobra, e a página rola; no telemóvel cabem.

   O CORTE FICA SEMPRE A 70% DA ALTURA DO ECRÃ (`--l200-corte`): é a base do
   degradê e do filme, e o nome do modelo fica sempre a meio, na vertical, entre
   o topo da página e esse corte. O palco (o carro) desce ou sobe para o corte
   lhe cair no sítio de sempre, um pouco acima do centro das rodas. Na base do
   corte há um degradê curto da cor da pintura (`--l200-base`), para o filme e o
   degradê se dissolverem no fundo em vez de acabarem num traço.

   AS VARIÁVEIS ESTÃO PRESAS A `.l200` e não vão para o `tokens.css`: a cor do
   herói e a sombra do degradê são desta página. */

/* Registadas para o browser as interpolar: sem isto, trocar a cor do carro
   mudava o fundo, o texto e o degradê de uma vez, e só a transição do
   `background` ficava à vista. */
@property --l200-bg { syntax: '<color>'; inherits: true; initial-value: #E66C00; } /* ds-ok: cor do herói */
@property --l200-ink { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --l200-bg-fim { syntax: '<color>'; inherits: true; initial-value: #E66C00; } /* ds-ok: cor do herói */
@property --l200-sombra { syntax: '<number>+'; inherits: true; initial-value: 112 53 0; }
@property --l200-sombra-forca { syntax: '<number>'; inherits: true; initial-value: .6; }

.l200 {
    /* ds-ok: a cor do herói é a desta página, escolhida para a L200 */
    --l200-bg: #E66C00;
    --l200-ink: #fff;
    /* A cor do fundo que o herói vai ter, sem interpolar: é a do texto e dos
       ícones do botão cheio, que mudam de uma vez com a tinta, a meio da
       transição, enquanto o fundo (`--l200-bg`) vai mudando devagar. */
    --l200-bg-fim: #E66C00; /* ds-ok: cor do herói */
    /* ds-ok: a sombra do degradê é um laranja escuro (hsl 28 100% 22%) */
    --l200-sombra: 112 53 0;
    /* A força final do degradê: a referência usava 0,4, e sobre o laranja só se
       lia com mais. Subiu 20% (0,48), depois mais 25% (0,6) e depois mais 30%. */
    --l200-sombra-forca: .78;
    --l200-curva: cubic-bezier(.55, 0, .61, 1);

    --l200-cab: var(--main-header-height, 50px);
    /* A ilha de atalhos do rodapé do site é `fixed; bottom: 0` e tapa o fundo do
       herói. O `l200.js` troca este valor pela altura medida. */
    --l200-dock: 56px;
    --l200-area: calc(100dvh - var(--l200-cab) - var(--l200-dock));
    /* No telemóvel os dois botões não cabem lado a lado e ficam um por linha. */
    --l200-texto: 302px;
    /* No telemóvel a bolha do chat do site (56px, fixa no canto de baixo) cai
       à altura do segundo botão e tapava-lhe o contorno do foco: o herói deixa
       essa faixa livre por baixo dos botões. A bolha assenta logo acima da barra
       de atalhos, que o herói já desconta em `--l200-dock`, a 10px dela, e por
       isso ocupa 66px acima da barra (56px da bolha e 10px de margem); a reserva
       é de 64px. Lado a lado (641) já não choca: a bolha fica 12px à direita do
       segundo botão. */
    --l200-bolha: 64px;
    /* Folga mínima entre o cabeçalho e o topo do nome, quando a altura manda. */
    --l200-respiro: 16px;
    --l200-vw: 85vw;
    --l200-traco: 1.5px;
    --l200-gutter: 16px;

    /* O corte do degradê e do filme: 70% da altura do ecrã, medidos desde o topo
       da página. A base do degradê, curta, é a da cor da pintura. */
    --l200-corte: calc(100dvh * .7);
    --l200-base: clamp(56px, calc(var(--l200-u) * .16), 140px);

    /* O último termo é o que garante o corte nos 70%: o carro (0,4313 u acima do
       corte e 0,09 u de tejadilho a subir) tem de caber entre o cabeçalho e ele. */
    --l200-u: min(var(--l200-vw),
                  calc((100vw - 2 * var(--l200-gutter)) / 1.4268),
                  calc((var(--l200-corte) - var(--l200-cab) - var(--l200-respiro)) / .5213),
                  max(220px, calc((var(--l200-area) - var(--l200-texto) - var(--l200-respiro)) / .6)));
    --l200-img: calc(var(--l200-u) / .679);

    /* O carro desenha-se 20% maior do que a medida da referência. Cresce a
       partir da base da imagem, para as rodas ficarem no mesmo chão e o corte do
       degradê continuar um pouco acima do centro delas; o que sobe passa por
       cima do herói e, por isso, a linha de cima ganha essa folga. */
    --l200-carro-k: 1.2;
    --l200-carro-sobe: calc(var(--l200-u) * .09);
    /* O texto desce em relação ao carro: a folga por cima do título. */
    --l200-folga-texto: 40px;

    --l200-h1: 30px;
    --l200-frase: 24px;
}

/* O herói */

/* Quatro linhas: o espaço de cima, o palco, as cores e o texto. A de cima vale o
   que falta para o palco começar a 0,4313 u acima do corte (a base do degradê),
   e nunca menos do que a folga do cabeçalho mais o tejadilho que sobe. A
   imagem é mais larga do que o carro, e o herói corta-a dos dois lados. */
.l200-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
        max(calc(var(--l200-respiro) + var(--l200-carro-sobe)),
            calc(var(--l200-corte) - var(--l200-cab) - var(--l200-u) * .4313))
        calc(var(--l200-u) * .6)
        auto
        1fr;
    min-height: 100dvh;
    padding-top: var(--l200-cab);
    padding-bottom: var(--l200-dock);
    background: var(--l200-bg);
    color: var(--l200-ink);
    overflow-x: clip;
    overflow-y: visible;
    isolation: isolate;
    /* O herói é também um `.hero` do site, para ter o degradê de topo por trás
       do cabeçalho transparente. Do `.hero` só se quer isso: o escurecimento
       plano fica a zero, porque tingia o laranja todo, e os itens da grelha
       voltam a esticar, em vez de ficarem ao centro como o `.hero` pede. */
    --hero-overlay-opacity: 0;
    align-items: stretch;
}

/* O degradê de topo do site é preto a 100% e ocupa 64% do herói, pensado para
   fotografia escura; sobre o laranja pesava demais. Aqui é o da Porsche
   Portugal, medido no cabeçalho dela: curto (72px no telemóvel, 148px a partir
   de 769), a 80% de preto no primeiro quinto e a apagar-se na mesma curva de 16
   paragens da faixa. Acaba antes do nome do modelo, e as ligações do cabeçalho,
   brancas e cinzentas, continuam legíveis por cima. */
.l200 .l200-hero .hero-overlay::after {
    height: 72px;
    background: linear-gradient(180deg, /* ds-ok: medido no cabeçalho de uma referência, curva de 16 paragens */
        rgb(0 0 0 / .8) 0%,
        rgb(0 0 0 / .8) 8.1%,
        rgb(0 0 0 / .8) 15.5%,
        rgb(0 0 0 / .8) 22.5%,
        rgb(0 0 0 / .78) 29%,
        rgb(0 0 0 / .73) 35.3%,
        rgb(0 0 0 / .67) 41.2%,
        rgb(0 0 0 / .6) 47.1%,
        rgb(0 0 0 / .52) 52.9%,
        rgb(0 0 0 / .44) 58.8%,
        rgb(0 0 0 / .33) 64.7%,
        rgb(0 0 0 / .22) 71%,
        rgb(0 0 0 / .12) 77.5%,
        rgb(0 0 0 / .05) 84.5%,
        rgb(0 0 0 / .01) 91.9%,
        rgb(0 0 0 / 0) 100%);
}

.l200-stage {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    /* Do topo do nome até um pouco acima da base da imagem do carro, que tem uma
       margem transparente por baixo. */
    height: calc(var(--l200-u) * .6);
}

/* O degradê: do topo do nome até um pouco acima do centro das rodas, a todo o comprimento do
   herói. Vai de baixo para cima, porque é em baixo que é mais escuro. */
.l200-stage__shade {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: calc(var(--l200-u) * -.002);
    height: calc(var(--l200-u) * .4333);
    opacity: var(--l200-sombra-forca);
    /* A curva vem de uma referência de 16 paragens, e não de um degradê dos tokens. */
    background: linear-gradient(to top, /* ds-ok */
        rgb(var(--l200-sombra) / 0.243) 0%,
        rgb(var(--l200-sombra) / 0.2398) 8.1%,
        rgb(var(--l200-sombra) / 0.2311) 15.5%,
        rgb(var(--l200-sombra) / 0.2177) 22.5%,
        rgb(var(--l200-sombra) / 0.2005) 29%,
        rgb(var(--l200-sombra) / 0.1801) 35.3%,
        rgb(var(--l200-sombra) / 0.1575) 41.2%,
        rgb(var(--l200-sombra) / 0.1337) 47.1%,
        rgb(var(--l200-sombra) / 0.1094) 52.9%,
        rgb(var(--l200-sombra) / 0.0855) 58.8%,
        rgb(var(--l200-sombra) / 0.0629) 64.7%,
        rgb(var(--l200-sombra) / 0.0425) 71%,
        rgb(var(--l200-sombra) / 0.0253) 77.5%,
        rgb(var(--l200-sombra) / 0.0119) 84.5%,
        rgb(var(--l200-sombra) / 0.0032) 91.9%,
        rgb(var(--l200-sombra) / 0) 100%);
}

/* A base do corte: um degradê curto da cor da pintura, que dissolve o filme no
   fundo da página. A curva é a de 16 paragens da referência, e a cor é a do
   fundo, por isso muda com a pintura. Só existe com o filme a correr: só com as
   cores, o degradê tem de se ver inteiro, com a base mais escura, para dar
   profundidade, e esta camada tapava-lhe o fundo. Fica por baixo do nome e do
   carro, e por cima do filme. */
.l200-stage::after {
    content: '';
    opacity: 0;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: calc(var(--l200-u) * .4313 - var(--l200-base));
    height: var(--l200-base);
    pointer-events: none;
    background: linear-gradient(to top, /* ds-ok: curva de 16 paragens de uma referência, na cor da pintura */
        color-mix(in srgb, var(--l200-bg) 100%, transparent) 0%,
        color-mix(in srgb, var(--l200-bg) 98.7%, transparent) 8.1%,
        color-mix(in srgb, var(--l200-bg) 95.1%, transparent) 15.5%,
        color-mix(in srgb, var(--l200-bg) 89.6%, transparent) 22.5%,
        color-mix(in srgb, var(--l200-bg) 82.5%, transparent) 29%,
        color-mix(in srgb, var(--l200-bg) 74.1%, transparent) 35.3%,
        color-mix(in srgb, var(--l200-bg) 64.8%, transparent) 41.2%,
        color-mix(in srgb, var(--l200-bg) 55%, transparent) 47.1%,
        color-mix(in srgb, var(--l200-bg) 45%, transparent) 52.9%,
        color-mix(in srgb, var(--l200-bg) 35.2%, transparent) 58.8%,
        color-mix(in srgb, var(--l200-bg) 25.9%, transparent) 64.7%,
        color-mix(in srgb, var(--l200-bg) 17.5%, transparent) 71%,
        color-mix(in srgb, var(--l200-bg) 10.4%, transparent) 77.5%,
        color-mix(in srgb, var(--l200-bg) 4.9%, transparent) 84.5%,
        color-mix(in srgb, var(--l200-bg) 1.3%, transparent) 91.9%,
        color-mix(in srgb, var(--l200-bg) 0%, transparent) 100%);
}

/* O nome do modelo, só em contorno. A espessura tem de ser a do ecrã e não a
   do desenho: sem `non-scaling-stroke` o traço escalava com o SVG e num
   telemóvel ficava quase invisível. */
.l200-stage__name {
    position: absolute;
    z-index: 2;
    left: calc(50% - var(--l200-u) * .7134);
    /* O nome ocupa 80% da altura do degradê (0,3466 u) e fica a meio, na
       vertical, entre o topo da página e o corte: o centro está a metade do
       corte, e o palco começa 0,4313 u acima dele. Por ser mais largo do que o
       carro, o «L» e o último «0» leem-se inteiros dos lados, e ao centro o carro
       tapa-lhe a parte de baixo. */
    top: calc(var(--l200-corte) * -.5 + var(--l200-u) * .258);
    width: calc(var(--l200-u) * 1.4268);
    transform-origin: center;
}

.l200-stage__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* O preenchimento nasce transparente e não `none`, porque `none` não se
   interpola e o nome só saltava para branco. */
.l200-stage__svg path {
    fill: rgb(255 255 255 / 0);
    stroke: var(--l200-ink);
    stroke-width: var(--l200-traco);
    vector-effect: non-scaling-stroke;
}

/* Com o filme a correr o nome é branco e cheio, seja qual for a pintura: sobre
   as imagens escuras do filme o contorno fino e escuro perdia-se. */
.l200.is-filme .l200-stage__svg path {
    fill: #fff;
    stroke: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .l200-stage__svg path { transition: fill .8s var(--l200-curva), stroke .8s var(--l200-curva); }
    .l200-stage::after { transition: opacity 1s var(--l200-curva); }
}

/* O carro por cima de tudo. O topo da imagem é transparente, por isso ela sobe
   0,05 u acima do palco; e o carro desce 10% da altura do degradê (0,0433 u)
   em relação a ele, para o corte seco ficar um pouco acima do centro das rodas
   e o nome se ler mais por cima do tejadilho. */
.l200-stage__car {
    position: absolute;
    z-index: 3;
    display: block;
    aspect-ratio: 2560 / 1203;
    left: calc(50% - var(--l200-img) * var(--l200-carro-k) / 2);
    /* A imagem tem 0,692 u de altura; o que ela cresce sobe, porque a base fica. */
    top: calc(var(--l200-u) * (-.05 + .0433 + .692 * (1 - var(--l200-carro-k))));
    width: calc(var(--l200-img) * var(--l200-carro-k));
    pointer-events: none;
}

/* A cor escolhida entra por cima da anterior, que só sai quando a nova está
   inteira: um fundo cruzado a meio mostraria os dois carros ao mesmo tempo. */
.l200-carro {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
}

.l200-carro.is-ativo { z-index: 2; opacity: 1; }
.l200-carro.is-saida { z-index: 1; opacity: 1; }

.l200-carro img {
    display: block;
    width: 100%;
    height: 100%;
}

/* O filme por trás do carro */

/* Do topo do herói até ao corte do degradê. Ocupa as duas primeiras linhas da
   grelha e acaba onde o degradê acaba (0,1687 u acima da base do palco); a
   margem negativa de cima leva-o por trás do cabeçalho. Fica entre o fundo do
   herói e o degradê de topo do site (`.hero-overlay`, z-index -1), por isso o
   cabeçalho continua legível por cima do filme. */
.l200-filme {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 3;
    z-index: -2;
    margin: calc(-1 * var(--l200-cab)) 0 calc(var(--l200-u) * .1687);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s var(--l200-curva);
}

.l200.is-filme .l200-filme { opacity: 1; }

.l200-filme__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Com o filme à vista o degradê quase desaparece: o filme já escurece o fundo.
   Só com as cores, o degradê é a profundidade do herói e fica à vista. */
.l200.is-filme { --l200-sombra-forca: .2; }

.l200.is-filme .l200-stage::after { opacity: 1; }

/* As cores do carro */

/* Os círculos ficam logo abaixo do carro, e o botão do filme no fim da fila.
   Cada círculo é um alvo de 44px com a amostra de 26px lá dentro. */
.l200-cores {
    position: relative;
    z-index: 4;
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    display: grid;
    justify-items: center;
    gap: 2px;
    margin-top: 4px;
    padding-inline: var(--l200-gutter);
}

.l200-cores__fila {
    display: flex;
    align-items: center;
    gap: 14px;
}

.l200-cores__roda {
    display: flex;
    align-items: center;
}

.l200-cor {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.l200-cor__bola {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--l200-amostra);
    /* A tinta inteira: com a amostra perto da cor do fundo (a prateada sobre o
       branco, a laranja sobre o laranja), só o contorno a separa dele e tem de
       chegar a 3:1. */
    box-shadow: 0 0 0 1.5px var(--l200-ink); /* ds-ok: contorno da amostra, não é sombra */
    transition: box-shadow .3s var(--l200-curva);
}

/* O anel deixa uma folga da cor do fundo entre a amostra e o contorno. */
.l200-cor[aria-checked="true"] .l200-cor__bola {
    box-shadow: 0 0 0 3px var(--l200-bg), 0 0 0 5px var(--l200-ink); /* ds-ok: anel de seleção, não é sombra */
}

.l200-cor:focus-visible,
.l200-cores__filme:focus-visible {
    outline: 2px solid var(--l200-ink);
    outline-offset: 1px;
}

.l200-cores__filme {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--l200-ink);
    background: transparent;
    border: 1px solid var(--l200-ink);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .25s var(--l200-curva);
}

.l200-cores__ico {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.l200-cores__ico--pausa,
.l200-cores__filme[aria-pressed="true"] .l200-cores__ico--play { display: none; }

.l200-cores__filme[aria-pressed="true"] .l200-cores__ico--pausa { display: block; }

.l200-cores__filme:hover {
    background: color-mix(in srgb, var(--l200-ink) 16%, transparent);
}

.l200-cores__aviso {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: var(--l200-ink);
}

.l200-cores__aviso:empty { display: none; }

.l200-cores__nome {
    margin: 0;
    min-height: 1.4em;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--l200-ink);
}

/* Cada cor traz o fundo, a tinta e o degradê que a fazem ler-se. A laranja é a
   de origem (acima). O botão cheio é da cor da tinta, com o texto e o ícone na
   cor do fundo, e por isso nos fundos claros passa a ser escuro sozinho. */
.l200[data-cor="branco"] {
    --l200-bg: #E9EBEF; /* ds-ok: fundo do herói com o carro branco */
    --l200-bg-fim: #E9EBEF; /* ds-ok: o mesmo, sem interpolar */
    --l200-ink: #0e0e12;
    --l200-sombra: 48 56 72;
    --l200-sombra-forca: .4;
}

.l200[data-cor="grafite"] {
    --l200-bg: #3A3F44; /* ds-ok: fundo do herói com o carro grafite */
    --l200-bg-fim: #3A3F44; /* ds-ok: o mesmo, sem interpolar */
    --l200-sombra: 0 0 0;
    --l200-sombra-forca: .65;
}

.l200[data-cor="prateado"] {
    --l200-bg: #C4C8CE; /* ds-ok: fundo do herói com o carro prateado */
    --l200-bg-fim: #C4C8CE; /* ds-ok: o mesmo, sem interpolar */
    --l200-ink: #0e0e12;
    --l200-sombra: 44 50 62;
    --l200-sombra-forca: .42;
}

.l200[data-cor="preto"] {
    --l200-bg: #1B1C21; /* ds-ok: fundo do herói com o carro preto */
    --l200-bg-fim: #1B1C21; /* ds-ok: o mesmo, sem interpolar */
    --l200-sombra: 0 0 0;
    --l200-sombra-forca: .7;
}

/* Sem JavaScript as amostras e o botão do filme não fazem nada: saem. */
@media (scripting: none) {
    .l200-cores { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .l200 {
        /* O fundo e o degradê mudam devagar. A tinta (o texto, os ícones, o
           contorno e o botão cheio) e a cor do texto do botão trocam TODAS no
           mesmo instante, a meio, e não interpoladas: de branco para escuro sobre
           um fundo que clareia, a meio do caminho o texto deixava de se ler, e as
           cores do botão e do texto a mudarem a ritmos diferentes viam-se piscar. */
        transition: --l200-bg .8s var(--l200-curva),
                    --l200-ink 0s linear .4s, --l200-bg-fim 0s linear .4s,
                    --l200-sombra .8s var(--l200-curva), --l200-sombra-forca .8s var(--l200-curva);
    }

    /* Enquanto a pintura troca, o que usa a tinta não pode ter transição própria
       (os botões do site trazem uma, e a do anel e a do play também): ficava a
       seguir a troca de uma vez com atraso, e o título mudava antes do botão. */
    .l200.is-trocando .l200-copy__acoes .bt-filled,
    .l200.is-trocando .l200-copy__acoes .bt-outline,
    .l200.is-trocando .l200-cor__bola,
    .l200.is-trocando .l200-cores__filme { transition: none; }

    .l200-carro.is-ativo { transition: opacity .7s var(--l200-curva); }
}

/* O texto */

/* Branco sobre #E66C00 dá 3,23:1. O título e a frase são texto grande (WCAG
   1.4.3: 24px ou mais) e por isso nenhum destes tamanhos desce daí. O nome da
   cor, a 15px, e os botões ficam abaixo do 4,5:1 de um texto pequeno: o texto
   branco sobre o laranja foi pedido assim, e as outras cores medem-se acima. */
.l200-copy {
    position: relative;
    z-index: 4;
    grid-column: 1;
    grid-row: 4;
    align-self: start;
    justify-self: center;
    width: 100%;
    max-width: 44rem;
    /* A faixa da bolha do chat também fica livre por baixo dos botões. Num
       telemóvel normal já sobra ali, porque a linha de cima a desconta; num ecrã
       baixo, onde a linha de cima está no mínimo, o herói rola esses píxeis em
       vez de a bolha tapar o fim do segundo botão. */
    padding: calc(8px + var(--l200-folga-texto)) var(--l200-gutter) calc(24px + var(--l200-bolha));
    text-align: center;
}

.l200-copy__titulo {
    margin: 0 0 12px;
    font-size: var(--l200-h1);
    font-weight: 500;
    line-height: 1.1;
    color: var(--l200-ink);
}

.l200-copy__frase {
    max-width: 32ch;
    margin: 0 auto 20px;
    font-size: var(--l200-frase);
    font-weight: 400;
    line-height: 1.3;
    text-wrap: balance;
    color: var(--l200-ink);
}

/* Os dois botões numa grelha de linhas iguais, que lhes dá a mesma altura: o
   contorno escuro do componente tem 2px e o botão cheio 1px, e viam-se
   desalinhados. No telemóvel ficam um por linha; lado a lado a partir de 641. */
.l200-copy__acoes {
    display: grid;
    grid-auto-rows: 1fr;
    /* Um por linha, os dois com a largura do mais largo: com a largura de cada
       um, as bordas da direita ficavam desalinhadas. */
    grid-template-columns: max-content;
    justify-content: center;
    gap: 12px;
}

.l200-copy__acoes > * { width: 100%; }

/* O botão cheio leva a cor da tinta (branco sobre a laranja) com o texto e o
   ícone na cor do fundo da pintura escolhida, e o de contorno leva borda e texto
   da cor da tinta. Com o carro branco ou prateado a tinta é escura, e as duas
   peças acompanham-na sozinhas. O ícone herda a cor do texto. */
.l200-copy__acoes .bt-filled.light {
    color: var(--l200-bg-fim);
    background-color: var(--l200-ink);
    border-color: var(--l200-ink);
}

.l200-copy__acoes .bt-filled.light:hover {
    background-color: color-mix(in srgb, var(--l200-ink) 80%, var(--l200-bg-fim));
    border-color: color-mix(in srgb, var(--l200-ink) 80%, var(--l200-bg-fim));
}

.l200-copy__acoes .bt-outline.light {
    color: var(--l200-ink);
    border-color: var(--l200-ink);
}

.l200-copy__acoes .bt-outline.light:hover {
    color: var(--l200-bg-fim);
    background-color: var(--l200-ink);
    border-color: var(--l200-ink);
}

/* A entrada */

/* O degradê e o nome começam escondidos e entram quando o carro acaba de
   carregar. O estado escondido só existe com JavaScript e sem pedido de menos
   movimento; em qualquer outro caso fica logo tudo no estado final. O
   `animation` de 0s com atraso de 3s é a salvaguarda: se o `.is-in` nunca
   chegar, revela as duas camadas ao fim de três segundos. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .l200-stage__shade {
        opacity: 0;
        transition: opacity 1.2s var(--l200-curva);
        animation: l200-shade-final 0s 3s forwards;
    }

    .l200-stage__name {
        opacity: 0;
        transform: scale(.993);
        transition: opacity 1.2s var(--l200-curva) 50ms, transform 1.08s var(--l200-curva) 50ms;
        animation: l200-name-final 0s 3s forwards;
    }

    .l200-stage.is-in .l200-stage__shade { opacity: var(--l200-sombra-forca); }

    .l200-stage.is-in .l200-stage__name {
        opacity: 1;
        transform: none;
    }
}

@keyframes l200-shade-final { to { opacity: var(--l200-sombra-forca); } }
@keyframes l200-name-final  { to { opacity: 1; transform: none; } }

/* Do telemóvel para cima */

@media (min-width: 481px) {
    .l200 {
        --l200-vw: 80vw;
        --l200-h1: 34px;
        --l200-texto: 276px; /* os dois botões ainda um por linha */
    }
}

@media (min-width: 641px) {
    .l200 {
        --l200-vw: 76vw;
        --l200-gutter: 24px;
        --l200-h1: 40px;
        --l200-texto: 220px;
    }

    .l200 { --l200-bolha: 0px; }

    .l200-copy__acoes {
        grid-auto-flow: column;
        grid-template-columns: none;
    }
}

@media (min-width: 769px) {
    .l200 {
        --l200-vw: 74vw;
        /* Em ecrãs deitados é a altura que trava o carro, e com a folga do
           telemóvel o nome ficava encostado ao cabeçalho. A folga cresce com o
           ecrã, e o carro encolhe o que for preciso para tudo continuar a caber. */
        --l200-respiro: clamp(24px, 8dvh, 96px);
        --l200-h1: 46px;
        --l200-frase: 26px;
        --l200-texto: 232px;
    }

    .l200 .l200-hero .hero-overlay::after { height: 148px; }
}

@media (min-width: 1025px) {
    .l200 {
        --l200-vw: 71vw;
        --l200-traco: 2px;
        --l200-gutter: 32px;
        --l200-h1: 52px;
        --l200-frase: 28px;
        --l200-texto: 244px;
    }
}

@media (min-width: 1281px) {
    .l200 {
        --l200-vw: 68vw;
        --l200-h1: 56px;
        --l200-texto: 248px;
    }
}