`
que envolvia o PNG inteiro deixou de existir. */
.mapa-ficha:hover { border-color: var(--borde-forte); }
.mapa-ficha:hover .mapa-ir { color: var(--texto); }
}
/* ---------- llamado ---------- */
/* Faixa de largura cheia, um pedido só. Escapa da caixa de 74rem como a
portada, e é o último bloco antes do rodapé -- o lugar onde quem leu tudo
ainda não escreveu. */
.llamado {
max-width: none;
padding: 0;
border-top: 1px solid var(--borde);
background: var(--superficie);
position: relative;
overflow: hidden;
}
.llamado::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(40rem 26rem at 78% -20%,
color-mix(in srgb, var(--acento) 26%, transparent), transparent 70%),
radial-gradient(30rem 22rem at 8% 120%,
color-mix(in srgb, var(--acento-claro) 10%, transparent), transparent 68%);
}
.llamado-caja {
position: relative;
max-width: var(--ancho);
margin: 0 auto;
padding: clamp(3rem, 7vw, 5.5rem) var(--aire-lateral);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.llamado-caja h2 { max-width: 24ch; }
.llamado-caja p {
color: var(--texto-suave);
max-width: 46ch;
margin: 1.25rem 0 0;
}
.llamado-caja .boton { margin-top: 2.25rem; }
/* ============================================================
Página /servicios.
Ela NÃO tem portada com foto. As cinco fotos dos serviços entram
logo abaixo do título, e uma sexta imagem em cima delas seria
repetição sem informação -- além de mais uma foto de banco.
O título é o desta página. O `auditSeo` do exportador cobra
exatamente um por página, então os nomes dos serviços aqui
são (na home os mesmos campos são , porque lá o é
o da portada). Mesmo campo, nível diferente: a hierarquia é da
página, o conteúdo é do site.
============================================================ */
.catalogo { border-top: 1px solid var(--borde); }
.catalogo-portada {
max-width: 44rem;
margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.catalogo-bajada {
color: var(--texto-suave);
font-size: 1.12rem;
max-width: 52ch;
margin: 1.5rem 0 0;
}
.catalogo-lista {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: clamp(3rem, 6vw, 5rem);
}
/* Uma fileira por serviço, foto e texto lado a lado, alternando o lado a cada
item. É o oposto da grade da home de propósito: lá cinco cartões iguais dão o
panorama, aqui cada serviço tem a página inteira de largura para si.
O corte é em 54rem, o mesmo da grade da home -- abaixo disso a foto fica em
cima e o texto embaixo, e a alternância não existe. */
.catalogo-item {
display: grid;
gap: clamp(1.25rem, 3vw, 2.5rem);
align-items: center;
}
@media (min-width: 54rem) {
.catalogo-item { grid-template-columns: 1.1fr 0.9fr; }
/* Só a figura troca de coluna. Mover os dois com `direction` ou `order` no
contêiner inverteria também a ordem de leitura, e a ordem do documento é o
que o leitor de tela percorre -- foto antes do nome do serviço em metade
dos itens e nome antes da foto na outra metade seria leitura embaralhada. */
.catalogo-item:nth-child(even) .catalogo-figura { grid-column: 2; grid-row: 1; }
.catalogo-item:nth-child(even) .catalogo-texto { grid-column: 1; grid-row: 1; }
}
.catalogo-figura {
margin: 0;
position: relative;
overflow: hidden;
border-radius: var(--radio);
border: 1px solid var(--borde);
background: var(--superficie);
}
.catalogo-figura img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 700ms var(--suave);
}
@media (hover: hover) and (pointer: fine) {
.catalogo-item:hover .catalogo-figura img { transform: scale(1.035); }
}
.catalogo-texto {
display: flex;
flex-direction: column;
align-items: start;
gap: 0.85rem;
}
.catalogo-texto p {
color: var(--texto-suave);
font-size: 1.02rem;
max-width: 42ch;
margin: 0;
}
/* A etiqueta da home é `position: absolute` sobre a foto. Aqui ela é um chip no
fluxo, acima do nome -- por isso precisa desfazer o posicionamento. Mesma
chave, mesmo texto, outro lugar na página. */
.etiqueta-suelta {
position: static;
top: auto;
right: auto;
backdrop-filter: none;
}
/* ---------- proceso ---------- */
.proceso { border-top: 1px solid var(--borde); }
/* Esta seção é centrada, ao contrário das outras (título à esquerda, subtítulo
à direita). É a forma da referência que o cliente mandou, e ela cabe aqui
por um motivo estrutural e não só estético: o que vem abaixo é uma linha do
tempo simétrica de cinco colunas, e um cabeçalho alinhado à esquerda sobre
uma figura centrada desalinha a seção inteira.
Especificidade 0,2,0 -- ganha da regra de duas colunas dentro do `@media`
sem depender da ordem em que os dois aparecem no arquivo. */
.cabecera-seccion.centrada {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
max-width: 48rem;
margin-inline: auto;
}
.proceso .cabecera-seccion { margin-bottom: 1.25rem; }
.proceso-intro {
margin: 0 auto 3.5rem;
max-width: 58ch;
text-align: center;
color: var(--texto-suave);
font-size: 1.05rem;
}
/* LINHA DO TEMPO, não mais cartões. É a forma da referência que o cliente
mandou: círculo numerado, título e texto centrados embaixo, e um fio ligando
um círculo ao seguinte.
O `--raio` e o `--vao` são declarados aqui porque o fio é posicionado a
partir dos dois. Escritos à mão nos dois lugares, mudar o tamanho do círculo
deixaria o fio saindo de dentro dele ou com folga -- e isso não quebra nada,
só fica torto na tela de alguém. */
.pasos {
--raio: 2.125rem;
--vao: 1.5rem;
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 2.5rem var(--vao);
/* O contador do CSS numera, e não um campo `numero` no conteúdo: número
digitado à mão fica errado no instante em que o cliente apaga um passo pelo
painel, e nada avisaria. */
counter-reset: paso;
}
@media (min-width: 40rem) {
.pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56rem) {
.pasos { grid-template-columns: repeat(3, 1fr); }
}
/* CINCO colunas só a partir de 72rem. Cada passo fica com ~13rem e os textos do
cliente têm ~30 palavras, então abaixo disso viravam colunas altas e finas --
foi por isso que a primeira versão parou em três. O fio horizontal só faz
sentido com a fileira inteira na tela, e é aqui que ele aparece. */
@media (min-width: 72rem) {
.pasos { grid-template-columns: repeat(5, 1fr); }
}
.paso {
counter-increment: paso;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
}
/* `decimal-leading-zero` dá 01, 02... e não 1, 2. Dois dígitos mantêm todos os
círculos com o mesmo peso visual; com um dígito o "1" parece menor que o
"10" no dia em que a lista crescer. */
.paso::before {
content: counter(paso, decimal-leading-zero);
width: calc(var(--raio) * 2);
height: calc(var(--raio) * 2);
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--acento-claro) 45%, transparent);
border-radius: 50%;
font-family: var(--display);
font-size: 1.3rem;
font-weight: 700;
/* acento-claro dá 6.53:1 no fundo. O acento puro daria 3.83 e reprovaria --
número decorativo grande continua sendo texto. */
color: var(--acento-claro);
margin-bottom: 1rem;
/* Fundo próprio e acima do fio: o cálculo abaixo faz o fio parar na borda do
círculo, mas arredondamento de subpixel deixa um fio de cabelo encostando.
Com fundo, não há como aparecer. */
background: var(--fondo);
position: relative;
z-index: 1;
}
/* O FIO ENTRE UM CÍRCULO E O SEGUINTE.
Com L = largura do item, V = vão e R = raio: o fio vai da borda direita
deste círculo (L/2 + R) até a borda esquerda do próximo (L + V + L/2 − R).
Em `left`/`right` sobre o próprio item isso vira:
left = 50% + R
right = −50% + R − V
Só existe a partir de 72rem porque só ali os cinco estão na mesma fileira. */
@media (min-width: 72rem) {
.paso::after {
content: '';
position: absolute;
top: var(--raio);
left: calc(50% + var(--raio));
right: calc(-50% + var(--raio) - var(--vao));
height: 1px;
background: color-mix(in srgb, var(--acento-claro) 30%, transparent);
}
/* O último não liga a nada -- e `5n` cobre o fim de CADA fileira, para o dia
em que o cliente acrescentar um sexto passo pelo painel: sem isso o quinto
esticaria um fio para a direita apontando para o vazio. */
.paso:last-child::after,
.paso:nth-child(5n)::after { display: none; }
}
.paso h3 {
margin: 0;
font-family: var(--display);
font-size: 1.02rem;
font-weight: 700;
color: var(--texto);
letter-spacing: -0.01em;
}
.paso p {
color: var(--texto-suave);
font-size: 0.93rem;
margin: 0;
}
/* A chamada ao fim do processo, como na referência. Reusa
`contacto.whatsapp.*` -- a MESMA chave da faixa final, com o mesmo texto.
Chave nova aqui daria dois campos dizendo a mesma coisa, e eles divergiriam
na primeira correção do cliente. */
.proceso-cta {
margin: 3.5rem 0 0;
display: flex;
justify-content: center;
}
/* ---------- marcas con las que trabajamos ---------- */
.marcas {
border-top: 1px solid var(--borde);
/* `clip` e não `hidden`: hidden criaria um contêiner de rolagem e mataria o
`position: sticky` do cabeçalho -- a mesma razão já escrita na regra do
`main`. */
overflow-x: clip;
}
/* A PISTA: recorta, sangra até a borda da seção e esmaece as pontas.
A sangria é `margin-inline` negativo do respiro da seção e NÃO `width: 100vw`.
A versão com 100vw foi escrita e medida: dá scroll lateral na página inteira,
porque `100vw` conta a largura da barra de rolagem, que não é área visível. */
.marcas-pista {
position: relative;
margin: 2.5rem calc(-1 * var(--aire-lateral)) 0;
/* Sem JS a fileira rola na mão -- é o estado que existia antes do auto-scroll,
e continua sendo o certo para quem não executa script. */
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.marcas-pista::-webkit-scrollbar { display: none; }
/* Com a esteira ligada não há o que rolar na mão: quem move é a animação. */
.marcas-pista[data-rolando] { overflow-x: hidden; }
/*
O ESMAECIDO DAS PONTAS É UMA MÁSCARA DE ALFA, desde 17/08/2026.
Antes eram dois véus `::before`/`::after` pintados em `var(--fondo)` -- eles
não apagavam nada, COBRIAM com a cor do fundo. Funciona só enquanto o que está
atrás é exatamente aquela cor: qualquer superfície diferente por baixo (uma
faixa, um gradiente, o tema do cliente mudando `--fondo` pelo painel) e o véu
vira um retângulo visível de cor errada em cima da fileira.
A máscara não sabe cor nenhuma. Ela apaga por alfa, então serve sobre qualquer
fundo e acompanha o tema de graça.
POR QUE NÃO ERA ASSIM ANTES: `mask-image` cria um contexto de empilhamento, e
`arb.svg` e `old-man-emu.jpg` dependiam de `mix-blend-mode: screen` para
descartar o preto que sobrava da inversão. Dentro do contexto novo, o `screen`
passa a compor contra o vazio do grupo em vez do fundo da página, e a caixa
escura que o blend existia para sumir voltava.
O QUE DESTRAVOU FOI O ARQUIVO, e não uma descoberta de CSS. Os dois logos
foram regravados com alfa (o resultado daquele filtro assado no próprio
arquivo), o `mix-blend-mode` saiu junto com a exceção que existia para eles, e
aí a máscara passou a ser possível. É o "conserto de verdade" que o comentário
da exceção já apontava.
`-webkit-` junto: o não prefixado só chegou ao Safari 15.4, e sem ele o
esmaecido simplesmente não acontece -- a fileira corta seca na borda.
*/
.marcas-pista {
--esmaece: clamp(2.5rem, 9vw, 8rem);
-webkit-mask-image: linear-gradient(to right,
transparent, #000 var(--esmaece),
#000 calc(100% - var(--esmaece)), transparent);
mask-image: linear-gradient(to right,
transparent, #000 var(--esmaece),
#000 calc(100% - var(--esmaece)), transparent);
}
/* O TRILHO é o que anda. `width: max-content` para ele medir o conteúdo inteiro
em vez do pai, senão a cópia não caberia e não haveria o que deslizar. */
.marcas-trilho {
display: flex;
width: max-content;
padding-inline-start: var(--aire-lateral);
}
/*
A ESTEIRA.
`--desloca` é escrito pelo `inicio.js` com a largura MEDIDA de uma lista, e
não `-50%`: o trilho tem um recuo inicial (`padding-inline-start`), então
metade dele não é exatamente uma lista e o laço daria um salto a cada volta.
`--duracao` também vem de lá, derivada da largura -- assim a velocidade fica
constante quando o cliente acrescentar ou tirar marcas pelo painel. Com um
número fixo, quinze logos e trinta andariam a velocidades diferentes.
Só roda com `[data-rolando]`, que o JS só põe fora do editor e fora de
`prefers-reduced-motion`. O `html:not([data-sitekit-editando])` é o cinto de
segurança para o caso de o atributo do editor chegar depois -- ele chega, o
handshake fecha depois deste script.
*/
@media (prefers-reduced-motion: no-preference) {
html:not([data-sitekit-editando]) .marcas-pista[data-rolando] .marcas-trilho {
animation: marcas-desliza var(--duracao, 40s) linear infinite;
}
}
@keyframes marcas-desliza {
to { transform: translateX(calc(-1 * var(--desloca, 0px))); }
}
/* A cópia sai de cena no editor. O atributo do editor chega DEPOIS deste
script (o handshake fecha depois), então a cópia já existe quando ele
aparece: sem esta regra o cliente veria trinta logos parados e acharia que
editou errado. Ela não tem `data-cms` nenhum, então esconder não tira campo
do painel -- é a única coisa escondida por CSS neste site que pode ser
escondida com segurança, justamente por ser invisível ao protocolo. */
html[data-sitekit-editando] .marcas-copia { display: none; }
/* Parar sob o ponteiro é o que deixa alguém LER a marca que passou. Sem isso a
esteira é decoração que nega a própria informação. */
@media (hover: hover) and (pointer: fine) {
.marcas-pista:hover .marcas-trilho { animation-play-state: paused; }
}
.marcas-lista {
list-style: none;
margin: 0;
display: flex;
align-items: center;
gap: var(--vao-marcas, clamp(2.25rem, 4.5vw, 4rem));
/* O vão à direita separa esta lista da cópia. Fica como padding e não como
`gap` do trilho para `--desloca` continuar sendo exatamente a largura de uma
lista -- com gap no trilho, o laço saltaria meio vão a cada volta. */
padding: 1rem var(--vao-marcas, clamp(2.25rem, 4.5vw, 4rem)) 1.25rem 0;
}
.marca-item {
flex: none;
/* OBRIGATÓRIO, e o motivo não é estilo nenhum: o nome da marca é um
`oculto-visual`, que é `position: absolute`. Sem um ancestral posicionado
ele se resolve contra o documento e ESCAPA do contêiner de rolagem -- os
quinze spans ficam espalhados e esticam a página. Medido: a home rolava
500px de lado, a /servicios (sem esta fileira) não rolava nada.
`overflow-x: clip` na seção não pega, porque elemento absoluto só é clipado
por quem é o bloco que o contém. */
position: relative;
}
/* TODOS BRANCOS. `brightness(0)` achata qualquer cor para preto e `invert(1)`
devolve tudo em branco -- funciona igual para logo colorido, escuro ou claro,
e não depende de saber a cor de cada arquivo.
`max-width: none` porque o reset global põe `max-width: 100%`: numa fileira
que rola não há "100%" que faça sentido, e ele espremeria os logos largos
(o Sonax é 4,65:1). Aqui manda a altura e a largura acompanha. */
.marca-item img {
height: clamp(1.6rem, 2.4vw, 2rem);
width: auto;
max-width: none;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.66;
transition: opacity 200ms ease;
}
/*
AS DUAS EXCEÇÕES SAÍRAM em 17/08/2026, e o que as tirou foi o arquivo.
`arb.svg` e `old-man-emu.jpg` eram logos de RECORTE: o nome vazado dentro de
uma forma cheia (a placa vermelha da ARB, o campo branco da Old Man Emu).
Achatar isso com `brightness(0) invert(1)` funde o vazado com a forma e sobra
uma mancha branca. Eles rodavam com outra cadeia --
`invert(1) grayscale(1) brightness(3)` mais `mix-blend-mode: screen`, onde o
blend descartava o preto que sobrava da inversão.
O BLEND ERA O QUE IMPEDIA A MÁSCARA DE ALFA nas pontas da fileira (ver a regra
da `.marcas-pista`). Os dois arquivos foram regravados COM ALFA -- o resultado
daquela cadeia assado no próprio arquivo, opaco onde ela deixava branco e
transparente onde o `screen` descartava. Agora os quinze passam pelo mesmo
`brightness(0) invert(1)` e não há exceção nenhuma aqui.
A REGRA QUE ISSO DEIXA: logo de recorte precisa de alfa NO ARQUIVO. Tratamento
por blend resolve o logo e cobra o preço num lugar que ninguém liga ao logo --
aqui, a impossibilidade de esmaecer a fileira sem pintar a cor do fundo.
Continua pendente no BRIEFING pedir à ARB e à Old Man Emu a versão
monocromática oficial: o que está aqui reproduz o que a tela já mostrava, não
um arquivo aprovado pela marca.
*/
@media (hover: hover) and (pointer: fine) {
.marca-item:hover img { opacity: 1; }
}
/* ---------- preguntas frecuentes ---------- */
.preguntas { border-top: 1px solid var(--borde); }
.preguntas-lista {
list-style: none;
margin: 2.5rem 0 0;
padding: 0;
max-width: 52rem;
}
.pregunta {
border-bottom: 1px solid var(--borde);
}
.preguntas-lista > li:first-child .pregunta { border-top: 1px solid var(--borde); }
.pregunta summary {
/* `list-style: none` mais o `::-webkit-details-marker` cobrem os dois motores:
o triângulo nativo aparece de um jeito no Safari e de outro no Chrome, e
nenhum dos dois combina com o resto. */
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.15rem 0;
font-family: var(--display);
font-size: 1.02rem;
font-weight: 600;
color: var(--texto);
transition: color 160ms ease;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
content: '';
flex: none;
width: 0.62rem;
height: 0.62rem;
border-right: 2px solid var(--acento-claro);
border-bottom: 2px solid var(--acento-claro);
transform: rotate(45deg) translate(-0.1rem, -0.1rem);
transition: transform 200ms var(--salida);
}
.pregunta[open] summary::after {
transform: rotate(225deg) translate(-0.16rem, -0.16rem);
}
.pregunta summary:focus-visible {
outline: 2px solid var(--acento-claro);
outline-offset: 3px;
border-radius: var(--radio-interno);
}
/*
A RESPOSTA ABRE E FECHA POR `grid-template-rows: 0fr -> 1fr`, a mesma técnica
do acordeão de serviços do modal e da bajada do cabeçalho. `display` não
interpola e altura em pixel exigiria medir o conteúdo no JS.
NADA DE PADDING VERTICAL NEM BORDA DENTRO DA CAIXA QUE COLAPSA. `min-height:
0` zera a altura do conteúdo, mas padding e borda continuam somando -- foi
assim que o detalhe fechado do modal media 15px em vez de 0. O espaço vertical
vem da margem do `
` (que o `overflow: hidden` recorta junto) e o divisor
mora na `.pregunta`, fora do que colapsa.
`visibility` FECHA O OUTRO LADO: com altura zero o texto continuaria na árvore
de acessibilidade e o leitor de tela leria as seis respostas. Ela precisa de
atraso ao FECHAR e de nenhum ao abrir -- `visibility` não interpola, e sem o
atraso ela vira `hidden` no meio da animação e o texto pisca fora antes de a
caixa subir.
QUEM SEGURA O `open` DURANTE O FECHAMENTO é o `inicio.js`: `` fechado
não renderiza o conteúdo, então sem isso não haveria de onde animar. Sem JS o
`` abre e fecha na hora, que é o comportamento nativo e continua
correto -- por isso a marcação segue sendo `` e não botão com
`aria-expanded`.
*/
.pregunta-caja {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
visibility: hidden;
transition: grid-template-rows 240ms var(--salida), visibility 0s linear 240ms;
}
.pregunta[data-aberto] .pregunta-caja {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows 240ms var(--salida), visibility 0s;
}
/*
O INVÓLUCRO INTERNO NÃO É REDUNDANTE, e sem ele a caixa fechada mede 21px em
vez de 0 -- medido.
`min-height: 0` deixa o item da grade encolher, mas a MARGEM dele continua
contando no dimensionamento da faixa: a resposta tem `margin-bottom: 1.3rem`,
que é exatamente os 21px que sobravam. Seis perguntas fechadas deixavam 126px
de vão morto na seção.
Com o corpo no meio, a margem do `` passa a viver DENTRO de algo que o
`overflow: hidden` recorta junto, e a faixa vai a zero de verdade. É a mesma
razão pela qual não há padding vertical nem borda aqui dentro.
*/
.pregunta-caja > * { min-height: 0; }
.pregunta-corpo { overflow: hidden; }
.pregunta p {
margin: 0 0 1.3rem;
padding-right: 2.5rem;
color: var(--texto-suave);
font-size: 0.98rem;
max-width: 68ch;
}
@media (hover: hover) and (pointer: fine) {
.pregunta summary:hover { color: var(--acento-claro); }
}
/* No editor todas ficam abertas. `` fechado não renderiza o conteúdo,
e cada resposta é um campo `data-cms` -- fechadas, seis textos existiriam na
página sem como ser clicados no painel. O `open` em si é posto pelo
`inicio.js`, porque atributo não se escreve por CSS; estas duas linhas
garantem que a caixa não fique colapsada quando ele o faz. */
html[data-sitekit-editando] .pregunta-caja {
grid-template-rows: 1fr;
visibility: visible;
}
/* ============================================================
Agendamento.
O tamanho e travado pela tela MAIS ALTA -- a grade de horas,
com 21 cupos em 4 colunas. As outras tres sobram espaco, e isso
e melhor que o contrario: caixa que muda de altura a cada passo
faz o botao "Continuar" fugir de baixo do cursor, e a pagina
atras salta junto.
Em telas curtas o dialogo passa a ocupar tudo e rola por dentro.
Vinte e um horarios nao cabem em 375x812 sem rolar, e fingir que
cabem daria fonte de 9px.
============================================================ */
.agenda {
border: 0;
padding: 0;
background: transparent;
max-width: none;
max-height: none;
width: 100%;
height: 100%;
color: var(--texto);
}
.agenda::backdrop {
background: color-mix(in srgb, #000 72%, transparent);
backdrop-filter: blur(3px);
}
/* A página não rola atrás do modal.
`showModal()` deixa o resto inerte para clique, mas não para a roda do mouse
nem para o dedo: sem isto o diálogo fica parado sobre uma página que anda.
O `padding-right` devolve a largura que a barra de rolagem ocupava — sem ele a
página salta ~15px para o lado no instante em que o modal abre, nas máquinas de
barra fixa. O valor é medido pelo agenda.js, porque só ele sabe quanto a barra
mede nesta máquina; o `0px` do fallback é o macOS, onde a barra é sobreposta e
não ocupa largura nenhuma.
Os `position: fixed` do html (o brilho e o grão) não se mexem: `inset: 0` é
relativo à viewport, não à caixa de conteúdo. */
html[data-agenda-abierto] {
overflow: hidden;
padding-right: var(--barra-scroll, 0px);
}
.agenda-caja {
width: min(26rem, 100%);
/* Trava as quatro na altura da MAIS ALTA. Um valor menor faria tres caberem
e a quarta crescer, que e justamente o salto que travar a altura existe
para evitar -- o "Continuar" fugiria de baixo do cursor. O numero e medido,
nao estimado: veja o teste de alturas no relatorio. */
min-height: min(40.75rem, 100%);
margin: auto;
display: flex;
flex-direction: column;
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: 14px;
box-shadow: var(--sombra-alta);
overflow: hidden;
}
/* O