/* 19/10 · a /roteiro D2 (server/siteD/roteiroD.ts): a capa sobre a fotografia de praia de hoje, o dia na estrada em
   três passos, e a ferramenta de hoje (rotas, «monta a tua», mapa) na largura da D2. */
.rt2-capa { position: relative; min-height: min(88vh, 860px); display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--topo, 96px) + 48px) 0 64px; }
.rt2-capa-foto { position: absolute; inset: -6% 0; }
.rt2-capa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt2-capa::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,14,26,.82) 0%, rgba(6,14,26,.45) 50%, rgba(6,14,26,.1) 80%), linear-gradient(180deg, rgba(6,14,26,.5) 0%, rgba(6,14,26,0) 30%, rgba(6,14,26,.9) 100%); }
.rt2-capa-in { position: relative; z-index: 1; }
.rt2-h1 { max-width: 14ch; color: #fff; }
.rt2-lead { color: #E2E8F0; max-width: 56ch; }
.rt2-marcas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.rt2-marcas li { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 9999px; font-size: 14px; font-weight: 600; color: #F1F5F9;
  background: rgba(6,14,26,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rt2-dia .pg-passos { margin-top: 8px; }

.rt2-ferramenta { width: min(var(--max), 100% - 2 * var(--gut)); max-width: none; margin: clamp(48px, 6vw, 80px) auto 0; padding: 0; }
@media (max-width: 640px) {
  .rt2-capa { min-height: 86vh; padding-bottom: 40px; }
  .rt2-capa::after { background: linear-gradient(180deg, rgba(6,14,26,.45) 0%, rgba(6,14,26,.25) 30%, rgba(6,14,26,.92) 100%); }
}
/* sem letras azuis: a descrição de cada rota clássica vinha em azul-céu */
.rt2-ferramenta .rr-desc { color: var(--claro) !important; }
/* 01/11 · SITE-8: no computador o mapa ficava por cima dos dias e fugia ao descer. Com um roteiro aberto, passa para o lado
   da lista e acompanha-a até ao fim dela; o fixo só pára no fim da caixa toda, por isso as zonas passam por cima dele com fundo próprio. Sem roteiro (`.rt-empty`) e abaixo de 1100 px fica tudo como estava. */
@media (min-width: 1100px) {
  .rt2-ferramenta:has(> #rtMapRow:not(.rt-empty)) { display: grid; grid-auto-flow: row dense; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  .rt2-ferramenta:has(> #rtMapRow:not(.rt-empty)) > * { grid-column: 1 / -1; min-width: 0; }
  .rt2-ferramenta:has(> #rtMapRow:not(.rt-empty)) > :is(#rtSummary, #rtList, #rtTake) { grid-column: 1; }
  .rt2-ferramenta > #rtMapRow:not(.rt-empty) { grid-column: 2; grid-row: span 3; align-self: start; position: sticky; top: calc(var(--topo, 96px) + 16px); margin: 0; }
  .rt2-ferramenta:has(> #rtMapRow:not(.rt-empty)) > .rt-zones { position: relative; z-index: 2; background: #060E1A; box-shadow: 0 24px 0 #060E1A; }
  .rt2-ferramenta > #rtMapRow:not(.rt-empty) #rtMap { height: min(640px, calc(100vh - var(--topo, 96px) - 48px)) !important; }
}