/* =====================================================================
   Página do percurso (São Silvestre) — complementa site.css.
   Usa as variáveis e os componentes do site; aqui só o que é novo:
   o palco do voo 3D, os comandos e o perfil de altimetria.
   ===================================================================== */

/* ---------- Abertura ---------- */
.pc-hero { padding-block: clamp(2.2rem, 1.6rem + 3vw, 4.5rem) clamp(2.6rem, 2rem + 3vw, 5rem); }
.pc-hero::before { background: linear-gradient(100deg, rgba(44,51,73,1) 0%, rgba(44,51,73,.9) 55%, rgba(53,61,87,1) 100%); }
.pc-hero__in { display: grid; gap: 1.1rem; justify-items: start; position: relative; }
.pc-volta { color: #d5dbe8; }
.pc-marca { display: block; width: min(62%, 250px); color: var(--branco); transition: opacity .2s; }
.pc-marca:hover { opacity: .8; }
.pc-marca svg { width: 100%; height: auto; display: block; }
.pc-titulo { font-size: var(--t-1); font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.03em; line-height: .88; }
.pc-titulo em { font-style: normal; color: var(--acc); }
.pc-lead { max-width: 40rem; color: #d5dbe8; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.pc-hero__num { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: clamp(9rem, 4rem + 17vw, 20rem); font-weight: 900; font-stretch: 125%; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(150,213,210,.32); pointer-events: none; user-select: none; z-index: -1; }

/* ---------- Palco do voo ---------- */
.pc-palco { background: var(--ss-escuro); color: var(--branco); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.pc-mapa-caixa { position: relative; height: clamp(440px, 74svh, 780px); background: #232a3d; overflow: hidden; isolation: isolate; }
.pc-mapa { position: absolute; inset: 0; }
.pc-mapa-caixa::after { content: ""; position: absolute; inset: auto 0 0 0; height: 110px; background: linear-gradient(0deg, var(--ss-escuro), transparent); pointer-events: none; z-index: 2; }
.pc-mapa-caixa::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; background: linear-gradient(180deg, rgba(44,51,73,.85), transparent); pointer-events: none; z-index: 2; }
.pc-mapa-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: #cfd6e6; z-index: 1; }

.pc-sobre { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pc-sobre .wrap { height: 100%; position: relative; }
.pc-hud { position: absolute; left: var(--gutter); top: 1.1rem; display: grid; gap: .1rem; padding: .9rem 1.2rem 1rem; border-radius: var(--raio); background: rgba(20,24,38,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(150,213,210,.22); min-width: 11.5rem; }
.pc-hud__km { display: flex; align-items: baseline; gap: .35rem; font-variant-numeric: tabular-nums; line-height: .9; }
.pc-hud__km b { font-size: clamp(2.8rem, 2rem + 3.4vw, 4.6rem); font-weight: 900; font-stretch: 125%; color: var(--acc); letter-spacing: -.02em; }
.pc-hud__km span { font-size: 1rem; font-weight: 800; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
.pc-hud__linha { display: flex; gap: 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #cfd6e6; font-variant-numeric: tabular-nums; }
.pc-hud__linha b { color: var(--branco); }

.pc-vistas { position: absolute; right: var(--gutter-r); top: 1.1rem; display: flex; gap: .4rem; pointer-events: auto; }
.pc-pilula { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(150,213,210,.3); background: rgba(20,24,38,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--branco); font-size: .76rem; font-weight: 800; font-stretch: 110%; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.pc-pilula:hover { border-color: var(--acc); }
.pc-pilula[aria-pressed="true"] { background: var(--acc); color: var(--acc-tinta); border-color: var(--acc); }

.pc-aviso { position: absolute; left: var(--gutter); right: var(--gutter-r); width: fit-content; bottom: 2.8rem; font-size: .76rem; color: #cfd6e6; background: rgba(20,24,38,.62); padding: .35rem .7rem; border-radius: 999px; }

/* marcadores sobre o mapa */
.pc-km { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-escuro); color: var(--ss-claro); border: 2px solid var(--ss-claro); font: 900 .82rem/1 var(--f); font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--mola); cursor: pointer; }
.pc-km.is-feito { background: var(--amarelo); color: var(--tinta); border-color: var(--amarelo); }
.pc-km.is-agora { transform: scale(1.35); }
.pc-meta { padding: .4rem .8rem; border-radius: 999px; background: var(--amarelo); color: var(--tinta); font: 900 .72rem/1 var(--f); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.pc-meta::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--amarelo); transform: translateX(-50%) rotate(45deg); z-index: -1; }
.pc-atleta { width: 22px; height: 22px; border-radius: 50%; background: var(--amarelo); border: 4px solid var(--branco); box-shadow: 0 0 0 0 rgba(239,180,9,.7); animation: pc-pulso 1.6s ease-out infinite; }
@keyframes pc-pulso { to { box-shadow: 0 0 0 22px rgba(239,180,9,0); } }

/* ---------- Comandos ---------- */
.pc-comandos { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.2rem; align-items: center; margin-top: -1.6rem; position: relative; z-index: 4; }
.pc-play { width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--amarelo); color: var(--tinta); cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .3s var(--mola), background-color .2s; }
.pc-play:hover { transform: scale(1.07); background: var(--amarelo-vivo); }
.pc-play svg { width: 26px; height: 26px; fill: currentColor; }
.pc-play .i-pausa, .pc-play.is-a-voar .i-play { display: none; }
.pc-play.is-a-voar .i-pausa { display: block; }

.pc-perfil-caixa { min-width: 0; background: var(--escuro-2); border: 1px solid var(--linha-escura); border-radius: var(--raio); padding: .7rem .9rem .5rem; }
.pc-perfil-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .2rem; }
.pc-perfil-cab .rotulo { color: var(--acc); }
.pc-perfil-cab small { font-size: .74rem; color: var(--cinza-claro); }
.pc-perfil { display: block; width: 100%; height: 132px; touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.pc-perfil .g { stroke: rgba(251,251,248,.12); stroke-width: 1; }
.pc-perfil .eixo { fill: #aab0b8; font: 600 10.5px var(--f); font-variant-numeric: tabular-nums; }
.pc-perfil .area { fill: rgba(150,213,210,.16); }
.pc-perfil .area-feita { fill: rgba(239,180,9,.38); }
.pc-perfil .linha { fill: none; stroke: #96d5d2; stroke-width: 2; stroke-linejoin: round; }
.pc-perfil .linha-feita { fill: none; stroke: #efb409; stroke-width: 2.5; stroke-linejoin: round; }
.pc-perfil .agulha { stroke: #fbfbf8; stroke-width: 1.5; }
.pc-perfil .ponto { fill: #efb409; stroke: #fbfbf8; stroke-width: 2.5; }

.pc-vel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: rgba(0,0,0,.22); padding: 4px; border-radius: 14px; margin: 0; border: 0; }
.pc-vel legend { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-claro); padding: 0 0 .3rem; }
.pc-vel .seg span { min-height: 44px; min-width: 46px; font-variant-numeric: tabular-nums; }

.pc-kms { display: flex; gap: .35rem; margin-top: 1rem; overflow-x: auto; scrollbar-width: none; padding-block: 4px; }
.pc-kms::-webkit-scrollbar { display: none; }
.pc-chip { flex: 1 0 auto; min-width: 46px; min-height: 44px; padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--linha-escura); background: transparent; color: var(--branco); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.pc-chip:hover { border-color: var(--acc); color: var(--acc); }
.pc-chip.is-feito { background: rgba(239,180,9,.16); border-color: rgba(239,180,9,.5); color: var(--amarelo); }
.pc-chip.is-agora { background: var(--amarelo); border-color: var(--amarelo); color: var(--tinta); }
.pc-dica { margin-top: .8rem; font-size: var(--t-peq); color: var(--cinza-claro); }

/* ---------- Ficha ---------- */
.pc-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 1rem + 5vw, 6rem); align-items: start; }
.pc-ficha__txt { display: grid; gap: 1.1rem; justify-items: start; }
.pc-ficha__acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }
.pc-ficha .dados div { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }

/* ---------- MapLibre: ajustes ao aspeto do site ---------- */
.pc-mapa .maplibregl-ctrl-attrib { background: rgba(20,24,38,.7); color: #aab0b8; font: 500 10px var(--f); }
.pc-mapa .maplibregl-ctrl-attrib a { color: #cfd6e6; }
.pc-mapa .maplibregl-ctrl-bottom-right { z-index: 3; }
.pc-mapa .maplibregl-cooperative-gesture-screen { background: rgba(20,24,38,.7); font: 700 1rem var(--f); z-index: 4; }

@media (max-width: 960px) {
  .pc-comandos { grid-template-columns: auto minmax(0, 1fr); }
  .pc-perfil-caixa { grid-column: 1 / -1; order: 3; }
  .pc-vel { justify-self: end; }
  .pc-ficha { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pc-mapa-caixa { height: clamp(400px, 68svh, 560px); }
  .pc-hud { padding: .6rem .9rem .7rem; min-width: 0; top: .8rem; }
  .pc-hud__linha { font-size: .7rem; gap: .7rem; }
  .pc-vistas { top: .8rem; }
  .pc-pilula { padding-inline: .8rem; font-size: .7rem; }
  .pc-play { width: 60px; height: 60px; }
  .pc-perfil { height: 116px; }
  .pc-hero__num { opacity: .6; }
  .pc-ficha__acoes .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .pc-atleta { animation: none; } }