/* Bolt Solar — site unificado: estrutura e estética do Gepêto + demonstração 3D, obras e vídeo */
body { font-family: "DM Sans", Arial, sans-serif; }
img, video { max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #0a2a55; color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.header nav { gap: 28px; }
.brand img { width: 122px; height: auto; object-fit: contain; }

/* ===== Experiência: o palco 3D e o painel dentro do cartão do Gepêto ===== */
.experience.xp { background: #0d315c; overflow: hidden; }
.xp-top-hint { margin-left: 18px; padding-left: 18px; border-left: 1px solid #ffffff33; font-size: 10px; letter-spacing: 1px; color: #b7d2ec; }
.xp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 660px; }
.xp .xp__stage { height: auto; min-height: 660px; background: radial-gradient(ellipse at 40% 15%, #5195c8, #184d87); }
.xp .xp__stage::after { background: radial-gradient(120% 90% at 45% 45%, transparent 60%, rgba(6, 25, 55, .3) 100%); }
.xp .xp__loading { color: #e9f2ff; }
.xp .xp__panel { position: static; width: auto; inset: auto; border-radius: 0; background: #0d315c; color: #fff; box-shadow: none; backdrop-filter: none; padding: 24px; gap: 16px; overflow: visible; }
.xp .prog__label { color: #fcb133; font-family: "Manrope", sans-serif; }
.xp .prog__seg::before { background: rgba(255, 255, 255, .14); height: 4px; top: 9px; }
.xp .prog__seg.done::before { background: rgba(252, 177, 51, .7); }
.xp .prog__seg[aria-current="step"]::before { background: #fcb133; }
.xp .xp__story h2 { color: #fff; font-family: "Manrope", sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -1px; line-height: 1.12; margin: 0 0 8px; }
.xp .xp__story p { color: #bdd0e7; font-size: 13.5px; line-height: 1.7; margin: 0 0 6px; }
.xp .status { color: #fff !important; }
.xp .speech { background: #ffffff10; border-color: #ffffff22; }
.xp .speech p { color: #fff; font-weight: 500; }
.xp .speech__who { background: #fcb133; color: #0a2a55; }
.xp .btn { font-family: "DM Sans", sans-serif; border-radius: 8px; min-height: 48px; font-size: 14px; }
.xp .btn--sun { background: #fcb133; color: #0a2a55; box-shadow: 0 5px 20px #051c2e33; }
.xp .btn--sun:hover { background: #ffc65f; }
.xp .btn--blue { background: #fff; color: #0a2a55; box-shadow: none; }
.xp .btn--line { background: transparent; border-color: #ffffff33; color: #fff; }
.xp .btn--line:hover { border-color: #fcb133; }
.xp .btn--ghost { border-color: #ffffff33; color: #c4d8ee; }
.xp .seg { background: #ffffff12; }
.xp .seg button { color: #c4d8ee; }
.xp .seg button[aria-pressed="true"] { background: #fff; color: #0a2a55; }
.xp .meters { border-top: 1px solid #ffffff18; padding-top: 14px; }
.xp .meter { background: #ffffff0a; }
.xp .meter dt { color: #a5beda; font-family: "DM Sans", sans-serif; }
.xp .meter dd { color: #fff; }
.xp .meter dd b { color: #fff; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 24px; }
.xp .meter--bat small { color: #a7bfd6; }
.xp .soc { background: #ffffff15; }
.xp .soc__res { background: #fff; }
.xp .circuits { border-top-color: #ffffff18; color: #b6cae0; }
.xp .circuits summary { color: #fff; }
.xp .circuits li.off span:last-child { color: #ff9b8f; }
.xp .xp__nav { position: static; background: none; padding: 8px 0 0; }
.xp .icon-btn { background: transparent; border-color: #ffffff33; color: #fff; }
.xp .icon-btn:hover:not([disabled]) { border-color: #fcb133; }
.xp .linkbtn { color: #c4d8ee; }
.xp .choice__q, .xp .equip legend { color: #fff; }
.xp .equip label { background: #ffffff0d; color: #e6effa; }
.xp .equip label:has(input:checked) { background: #fcb13333; }
.xp .equip__note { color: #a7bfd6; }
.xp .xp__legend { background: #0a2a5566; }
.xp .textual { background: #fff; border-top: 1px solid #d6e1ef; color: #57718c; padding: 16px 24px; }
.xp .textual summary { color: #174a81; font-weight: 700; }
.xp .textual ol { max-width: none; }
.xp.is-fallback .xp-layout { grid-template-columns: 1fr; }

/* ===== Obras (fotos de drone) no estilo das soluções ===== */
.works { padding-top: 105px; }
.works .section-intro .eyebrow { color: #2b65ac; }
.works .section-intro h2 { color: #134176; }
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 10px; }
.proj { margin: 0; }
.proj picture { display: block; overflow: hidden; border-radius: 12px; }
.proj img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.22, .8, .24, 1); }
.proj:hover img { transform: scale(1.04); }
.proj figcaption { padding: 14px 2px 0; border-top: 0; }
.proj figcaption strong { display: block; font-family: "Manrope", sans-serif; color: #174a81; font-size: 18px; letter-spacing: -.4px; }
.proj figcaption span { display: block; color: #57718c; font-size: 13px; }
.proj__pending { font-size: 12px !important; color: #8a5a00 !important; }
body:not(.review) .proj__pending { display: none; }
.also { margin-top: 26px; color: #57718c; font-size: 14px; }

/* ===== Sobre: vídeo da sede no lugar da foto ===== */
.about-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #154b87; }

/* ===== Contato com assuntos ===== */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.contact-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 1; }
.opt { display: grid; gap: 2px; padding: 18px 20px; border-radius: 12px; background: #fff; color: #102d53; border-left: 4px solid #fcb133; transition: transform .25s cubic-bezier(.22, .8, .24, 1), box-shadow .25s; }
.opt:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -16px #0008; }
.opt strong { font-family: "Manrope", sans-serif; color: #134176; font-size: 17px; }
.opt span { color: #57718c; font-size: 13px; }
.footer a { color: #2b65ac; }

/* marcações de pendência (?revisao) */
body.review [data-pendente] { outline: 2px dashed #e88f00; outline-offset: 4px; }

/* entrada suave */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22, .8, .24, 1), transform .8s cubic-bezier(.22, .8, .24, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .xp-layout { grid-template-columns: 1fr; min-height: 0; }
  .xp .xp__stage { min-height: 0; height: clamp(440px, 62vh, 680px); }
  .xp .xp__panel { display: grid; grid-template-columns: 1.1fr 1fr; }
  .projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .header nav { display: none; }
  .xp .xp__stage { position: sticky; top: 0; z-index: 6; height: 54svh; min-height: 330px; }
  .xp .xp__panel { display: flex; padding: 20px 16px; }
  .xp-top-hint { display: none; }
  .projects { grid-template-columns: 1fr; gap: 22px; }
  .contact { grid-template-columns: 1fr; }
  .contact-opts { grid-template-columns: 1fr; }
  .works { padding-top: 65px; }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }