/* BASE — reset, tipografia, botões, campos e utilitários */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
html.sem-rolagem { overflow: hidden; }
body { margin: 0; background: var(--papel); color: var(--asfalto); font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: var(--t3); }
h3 { font-size: var(--t1); }
p { margin: 0 0 1em; }
a { color: var(--placa); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--placa-fundo); }
button, input, select, textarea { font: inherit; color: inherit; }
[x-cloak] { display: none !important; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--placa); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.caixa { width: 100%; max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }
.caixa--texto { max-width: calc(760px + 2 * var(--margem)); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 3000; background: var(--asfalto); color: #fff; padding: 10px 14px; border-radius: var(--raio-p); }
.pular:focus { top: 12px; color: #fff; }
.ico { flex: none; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .68em 1.15em .58em; border: 2px solid transparent; border-radius: var(--raio-p); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.botao--principal { background: var(--faixa); color: var(--asfalto); }
.botao--principal:hover { background: var(--faixa-forte); color: var(--asfalto); }
.botao--escuro { background: var(--asfalto); color: #fff; }
.botao--escuro:hover { background: #000; color: #fff; }
.botao--contorno { background: transparent; color: var(--asfalto); border-color: var(--asfalto); }
.botao--contorno:hover { background: var(--asfalto); color: #fff; }
.botao--largo { width: 100%; }
.botao[disabled] { opacity: .6; cursor: progress; }
.link-botao { background: none; border: 0; padding: 0; color: var(--placa); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; font-weight: inherit; }

/* Campos */
input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="number"], input[type="password"], input[type="url"], select, textarea {
    width: 100%; padding: .62em .75em .5em; background: #fff; border: 1.5px solid #A9B3AD; border-radius: var(--raio-p); line-height: 1.3;
}
input:focus, select:focus, textarea:focus { border-color: var(--placa); outline: 3px solid rgba(11, 103, 70, .25); outline-offset: 0; }
select { appearance: none; padding-right: 2.1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231C2225' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8em center; }
textarea { resize: vertical; }

/* Selo de status e preço */
.selo { display: inline-block; background: var(--asfalto); color: #fff; padding: .2em .65em .1em; border-radius: var(--raio-p); font-size: var(--t-1); font-weight: 700; }
.selo--reservado { background: var(--faixa); color: var(--asfalto); }
.preco { font-size: var(--t2); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; margin: 0; font-variant-numeric: tabular-nums; }

/* Paginação */
.paginas { margin-top: 28px; }
.paginas ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.paginas a, .paginas span { display: block; padding: .5em .9em .4em; border: 1.5px solid var(--asfalto); border-radius: var(--raio-p); text-decoration: none; color: var(--asfalto); font-weight: 700; }
.paginas .current { background: var(--asfalto); color: #fff; }
.paginas a:hover { background: var(--asfalto); color: #fff; }
.paginas .dots { border-color: transparent; }
