/* INÍCIO — a placa, a vitrine e os blocos da página inicial */
.abre { padding: 28px 0 8px; }
.abre__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: stretch; }

/* A placa: verde de rodovia, filete branco por dentro, destinos com seta e contagem */
.placa { display: flex; flex-direction: column; background: var(--placa); color: #fff; border-radius: var(--raio-placa); padding: clamp(30px, 4vw, 46px); outline: 3px solid #fff; outline-offset: -12px; }
.placa__titulo { font-size: var(--t4); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 .35em; }
.placa__texto { font-size: var(--t1); line-height: 1.4; max-width: 36ch; margin-bottom: 1.6em; }
.placa__destinos { list-style: none; margin: auto 0 0; padding: 0; border-top: 3px solid #fff; }
.placa__destinos a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 12px 2px 9px; color: #fff; text-decoration: none; font-size: 1.375rem; font-weight: 700; line-height: 1.15; border-bottom: 2px solid rgba(255, 255, 255, .5); }
.placa__destinos li:last-child a { border-bottom: 0; padding-bottom: 0; }
.placa__destinos a:hover .placa__destino, .placa__destinos a:focus-visible .placa__destino { text-decoration: underline; text-underline-offset: .16em; }
.placa__destinos a:focus-visible { outline-color: #fff; }
.placa__numero { font-weight: 800; font-variant-numeric: tabular-nums; }
.placa__todos a { color: var(--faixa); }

/* Vitrine: o anúncio em destaque ao lado da placa */
.vitrine { display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-placa); overflow: hidden; color: var(--asfalto); text-decoration: none; }
.vitrine:hover { color: var(--asfalto); border-color: var(--asfalto); }
.vitrine__foto { flex: 1; min-height: 280px; background: #DDE2DD; position: relative; }
.vitrine__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vitrine__legenda { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 18px 24px 16px; }
.vitrine__nome { font-size: var(--t2); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.vitrine__dados { grid-column: 1; color: var(--cinza); }
.vitrine__preco { grid-column: 2; grid-row: 1 / span 2; font-size: var(--t2); font-weight: 800; white-space: nowrap; }

/* Blocos */
.bloco { padding: 56px 0; }
.bloco__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.bloco__topo h2 { margin: 0; }

/* Como funciona: uma pista de asfalto com a faixa tracejada */
.pista { position: relative; background: var(--asfalto); color: #fff; padding: 68px 0 60px; }
.pista::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--faixa) 0 64px, transparent 64px 112px); }
.pista h2 { margin-bottom: 1.2em; }
.pista__passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pista__passos li { counter-increment: passo; display: flex; flex-direction: column; }
.pista__passos li::before { content: counter(passo); font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--faixa); margin-bottom: .2em; }
.pista__passos strong { font-size: var(--t1); font-weight: 800; margin-bottom: .25em; }
.pista__passos span { color: #C7CED0; }

/* Dúvidas */
.duvidas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; align-items: start; }
.duvidas__lado p { color: var(--grafite); max-width: 32ch; }
.duvidas__lista details { border-top: 1px solid #B9C1BB; }
.duvidas__lista details:last-child { border-bottom: 1px solid #B9C1BB; }
.duvidas__lista summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 17px 0 14px; font-size: var(--t1); font-weight: 700; cursor: pointer; }
.duvidas__lista summary::-webkit-details-marker { display: none; }
.duvidas__lista summary::after { content: '+'; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--placa); }
.duvidas__lista details[open] summary::after { content: '–'; }
.duvidas__lista details p { max-width: 62ch; color: var(--grafite); margin: 0 0 18px; }

/* Vender */
.bloco--vender { padding-top: 0; }
.vender { display: flex; align-items: center; justify-content: space-between; gap: 28px; background: var(--faixa); border-radius: var(--raio-placa); padding: 34px 40px 30px; }
.vender h2 { margin: 0 0 .2em; }
.vender p { margin: 0; max-width: 52ch; }
.vender .botao { flex: none; }

/* Leituras (blog) */
.leituras { list-style: none; margin: 0; padding: 0; }
.leituras li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; padding: 15px 0 12px; border-top: 1px solid #B9C1BB; }
.leituras a { font-size: var(--t1); font-weight: 700; color: var(--asfalto); text-decoration: none; }
.leituras a:hover { text-decoration: underline; }
.leituras time { color: var(--cinza); font-size: var(--t-1); }

@media (max-width: 899px) {
    .abre { padding-top: 16px; }
    .abre__grade { grid-template-columns: 1fr; }
    .vitrine__foto { min-height: 0; aspect-ratio: 16 / 10; }
    .pista__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
    .duvidas { grid-template-columns: 1fr; gap: 12px; }
    .vender { flex-direction: column; align-items: flex-start; padding: 28px 24px 26px; }
    .bloco { padding: 44px 0; }
}
@media (max-width: 520px) {
    .placa { outline-offset: -9px; padding: 28px 24px; }
    .placa__destinos a { font-size: 1.2rem; }
    .vitrine__legenda { grid-template-columns: 1fr; padding: 16px 18px 14px; }
    .vitrine__preco { grid-column: 1; grid-row: auto; margin-top: 4px; }
    .pista__passos { grid-template-columns: 1fr; }
}