/* =====================================================================
   CarregaBR · momento.css · base compartilhada dos "momentos" (rodada Início v5)
   Extraída da página do Wallbox AC ("uma noite contada"). Uma página do site
   novo tem um momento principal em que a pessoa mexe e a página responde, no
   traço de linha do motion; o resto é grande, calmo e com pouco texto.
   Peças (manual: DESIGN-SYSTEM.md, seção 12):
     .mo            escopo e tokens (tinta clara, cobre, título de momento)
     .mo-kicker     rótulo em Jura 15 px            .mo-h   título de momento 64 a 96 px
     .mo-link       link com seta, sublinhado que cresce
     .mo-pin        seção fixa com progresso (o JS liga .is-pinned e --mo-len)
     .mo-sky        céu em camadas de opacidade, estrelas, lua, sol, nuvens
     .mo-scene      carro e carregador em traço de linha, com bateria
     .mo-dial       controle deslizante grande (22h a 6h, 0 a 100%...)
     .mo-zoom       foto de ponta a ponta com aproximação lenta pela rolagem
     .mo-dawn       fechamento no amanhecer (o gradiente do fim da noite)
     .nav.mo-nav-dark  nav escura enquanto um momento escuro está sob ela
   Animação só com transform e opacity. Redução de movimento: tudo pronto e parado.
   ===================================================================== */
.mo{
  --mo-ink:#F6F1EA;--mo-ink-2:#E6DED3;--mo-ink-3:#C9C0B4;
  --mo-cu:#D08B55;--mo-cu-2:#E8A87C;--mo-cu-3:#F2C29A;
  --mo-h:clamp(2.6rem,1.3rem + 4.4vw,6rem);
  --mo-pad:clamp(80px,3rem + 5vw,152px);
  --mo-ease:cubic-bezier(.22,.61,.36,1);
}
.mo-h,.mo h2.mo-h{font-size:var(--mo-h);line-height:1;letter-spacing:-.035em;text-wrap:balance}
/* kicker dentro do título (SEO): mesmo visual, espaço abaixo garantido */
.mo h2>.mo-kicker,.mo h1>.mo-kicker,.mo-dawn h2>.mo-kicker,.mo h2>.dx-kicker{display:block;margin:0 0 var(--s-4)!important;font-size:.9375rem;line-height:1.3;letter-spacing:.14em;text-wrap:wrap;max-width:none}
.mo-kicker{display:block;margin:0 0 var(--s-4);font:600 .9375rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
[data-mo-tone="dark"] .mo-kicker,.mo-dark .mo-kicker{color:var(--mo-cu-2,#E8A87C)}
.mo-lead{margin:0;font:400 clamp(1.1rem,1rem + .45vw,1.4rem)/1.5 var(--body);color:var(--text-secondary);max-width:38ch;text-wrap:pretty}
[data-mo-tone="dark"] .mo-lead,.mo-dark .mo-lead{color:var(--mo-ink-2,#E6DED3)}
.mo-link{display:inline-flex;align-items:center;gap:10px;min-height:48px;font:600 1rem/1.2 var(--body);color:inherit;text-decoration:none}
.mo-link span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size var(--t) var(--mo-ease,ease)}
.mo-link:hover span,.mo-link:focus-visible span{background-size:100% 1.5px}
.mo-link .icon{width:18px;height:18px;transition:transform var(--t) var(--mo-ease,ease)}
.mo-link:hover .icon{transform:translateX(4px)}
.mo-num{font-variant-numeric:tabular-nums}

/* nav escura sobre momentos escuros (a sobreposição transparente do topo continua do site.js) */
.nav.mo-nav-dark:not(.is-overlay){background:rgba(14,12,10,.72);border-color:rgba(246,241,234,.08);color:#F6F1EA}
.nav.mo-nav-dark:not(.is-overlay) .nav__trigger:hover,.nav.mo-nav-dark:not(.is-overlay) .nav__link:hover,.nav.mo-nav-dark:not(.is-overlay) .nav__trigger[aria-expanded="true"]{background:rgba(246,241,234,.12)}
.nav.mo-nav-dark:not(.is-overlay) .btn-primary,.nav.mo-nav-dark:not(.is-overlay) .nav__cta-m{background:#F6F1EA;color:#1C1B19}
.nav.mo-nav-dark:not(.is-overlay) .logo b{color:#E8A87C}

/* ---------- seção fixa com progresso ---------- */
.mo-pin{position:relative}
.mo-pin__stick{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex}
.mo-pin.is-pinned{height:var(--mo-len,300vh)}
.mo-pin.is-pinned .mo-pin__stick{position:sticky;top:0;height:100vh;min-height:0}

/* ---------- céu que muda de cor ---------- */
.mo-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.mo-sky__l{position:absolute;inset:0;opacity:0;will-change:opacity}
.mo-sky__g{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--mo-ease)}
.mo-sky__g.is-on{opacity:1}
.mo-stars{position:absolute;left:0;top:0;width:100%;height:72%;fill:#F6F1EA;will-change:opacity}
.mo-moon{position:absolute;right:31%;top:15%;width:54px;height:54px;border-radius:50%;box-shadow:inset -11px 7px 0 0 #F1E6D2;filter:drop-shadow(0 0 18px rgba(241,230,210,.35));will-change:transform,opacity}
.mo-sun{position:absolute;left:50%;top:0;width:min(1500px,130vw);aspect-ratio:2.4/1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,222,176,.95),rgba(246,178,112,.55) 30%,rgba(232,140,90,.18) 58%,rgba(232,140,90,0) 76%);opacity:0;will-change:transform,opacity}
.mo-cloud{position:absolute;width:var(--w,320px);height:calc(var(--w,320px) * .28);border-radius:999px;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));filter:blur(2px);will-change:transform}

/* ---------- carro e carregador em traço ---------- */
.mo-scene{margin:0;min-height:0;display:flex;align-items:flex-end;justify-content:center}
.mo-scene svg{width:min(100%,1080px);height:100%;overflow:visible}
.mo-scene svg *{vector-effect:non-scaling-stroke}
.mo-scene .sc-ln,.mo-scene .sc-cable{fill:none;stroke:#F6F1EA;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mo-scene .sc-fill,.mo-scene .sc-body{fill:rgba(6,8,16,.62)}
.mo-scene .sc-face{fill:rgba(6,8,16,.9)}
.mo-scene .sc-white{fill:#F3EEE7}
.mo-scene .sc-win{fill:#0B0D12;stroke:#F6F1EA;stroke-width:1.4}
.mo-scene .sc-glass{fill:rgba(160,180,230,.07)}
.mo-scene .sc-dim{fill:none;stroke:rgba(246,241,234,.42);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.mo-scene .sc-env{fill:rgba(6,8,16,.28);stroke:rgba(246,241,234,.34);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.mo-scene .sc-strip{stroke:#F2C29A;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(242,194,154,.9))}
.mo-scene .sc-ground{stroke:rgba(246,241,234,.3);stroke-width:1.2}
.mo-scene .sc-shadow{fill:rgba(0,0,0,.45)}
.mo-scene .sc-screen{fill:#D08B55;opacity:.4;transition:opacity .6s}
.mo-scene .sc-bars{stroke:#8FD3A6;stroke-width:2.4;stroke-linecap:round;opacity:.5;transition:opacity .6s}
.mo-scene .sc-port{fill:#E8A87C}
.mo-scene .sc-head{stroke:#F6F1EA;stroke-width:2.4;stroke-linecap:round;opacity:.8}
.mo-scene .sc-tail{stroke:#E8A87C;stroke-width:2.4;stroke-linecap:round}
.mo-scene .sc-cable{stroke-width:2.2}
.mo-scene .sc-flow{fill:none;stroke:#F2C29A;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 16;opacity:0;transition:opacity .5s}
.mo-scene .sc-bat{fill:rgba(6,8,16,.7);stroke:rgba(246,241,234,.7);stroke-width:1.3}
.mo-scene .sc-batfill{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(1)}
.is-charging .mo-scene .sc-flow{opacity:.9;animation:moFlow 1.1s linear infinite}
.is-charging:not(.is-full) .mo-scene .sc-screen{animation:moScr 1.6s ease-in-out infinite alternate}
.is-charging .mo-scene .sc-bars{opacity:1}
.is-full .mo-scene .sc-screen{opacity:1;fill:#E8A87C}
.is-full .mo-scene .sc-batfill{filter:drop-shadow(0 0 6px rgba(242,194,154,.9))}
@keyframes moFlow{to{stroke-dashoffset:-17}}
@keyframes moScr{from{opacity:.45}to{opacity:1}}

/* ---------- controle deslizante grande ---------- */
.mo-dial{position:relative;padding-top:54px}
.mo-dial__bubble{position:absolute;top:8px;left:calc(15px + var(--p,1) * (100% - 30px));transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:#F6F1EA;color:#1C1B19;font:600 1rem/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.mo-dial__bubble::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg);border-radius:2px}
.mo-dial__input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:grab;touch-action:pan-y}
.mo-dial__input:active{cursor:grabbing}
.mo-dial__input::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#A9622F,#E8A87C calc(var(--p,1) * 100%),rgba(246,241,234,.22) calc(var(--p,1) * 100%))}
.mo-dial__input::-moz-range-track{height:6px;border-radius:6px;background:rgba(246,241,234,.22)}
.mo-dial__input::-moz-range-progress{height:6px;border-radius:6px;background:linear-gradient(90deg,#A9622F,#E8A87C)}
.mo-dial__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-12px;border-radius:50%;background:#F6F1EA;border:2px solid #E8A87C;box-shadow:0 0 0 7px rgba(232,168,124,.18),0 6px 18px rgba(0,0,0,.35);transition:box-shadow .3s}
.mo-dial__input::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#F6F1EA;border:2px solid #E8A87C;box-shadow:0 0 0 7px rgba(232,168,124,.18),0 6px 18px rgba(0,0,0,.35)}
.mo-dial__input:hover::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(232,168,124,.24),0 6px 18px rgba(0,0,0,.35)}
.mo-dial__input:focus{outline:none}
.mo-dial__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #070B17,0 0 0 8px #F6F1EA}
.mo-dial__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #070B17,0 0 0 8px #F6F1EA}
.mo-dial__marks{display:flex;justify-content:space-between;margin:8px 15px 0;padding:0;list-style:none;font:600 .95rem/1 var(--mono);letter-spacing:.06em;color:#E6DED3;font-variant-numeric:tabular-nums}
.mo-dial__marks li{width:0;display:flex;justify-content:center;white-space:nowrap}

/* ---------- filme que toca sozinho (MO.film, seção 12.3) ----------
   .mo-film agrupa [botão tocar/pausar] [linha do tempo .mo-dial] [Rever].
   Os botões ocupam o lugar mesmo escondidos (sem salto de layout). */
.mo-film{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;column-gap:14px}
.mo-film>.mo-dial{min-width:0}
.mo-film__btn,.mo-film__replay{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:48px;margin-bottom:22px;padding:0;border-radius:999px;border:1.5px solid rgba(246,241,234,.55);background:rgba(6,8,16,.35);color:#F6F1EA;cursor:pointer;font:600 .9375rem/1 var(--body);transition:background-color var(--t),border-color var(--t)}
.mo-film__replay{padding:0 18px 0 14px}
.mo-film__btn:hover,.mo-film__replay:hover{background:rgba(246,241,234,.14);border-color:#F6F1EA}
.mo-film__btn:focus-visible,.mo-film__replay:focus-visible{outline:2px solid #F6F1EA;outline-offset:3px}
.mo-film__btn .icon,.mo-film__replay .icon{width:18px;height:18px}
.mo-film__btn .i-play,.mo-film__btn.is-paused .i-pause{display:none}
.mo-film__btn.is-paused .i-play{display:block}
.mo-film__btn{grid-column:1;grid-row:1}.mo-film>.mo-dial{grid-column:2;grid-row:1}.mo-film__replay{grid-column:3;grid-row:1}
.mo-film .is-off{visibility:hidden;pointer-events:none}
html:not(.js) .mo-film__btn,html:not(.js) .mo-film__replay,html:not(.js) .mo-film__hint{display:none}
.mo-film__hint{grid-column:1/-1;grid-row:2;margin:2px 0 0;font:500 .9375rem/1.4 var(--body);color:var(--mo-ink-2,#E6DED3)}
.mo-film__ticks{position:absolute;left:15px;right:15px;top:calc(54px + 19px);height:6px;pointer-events:none}
.mo-film__ticks i{position:absolute;left:calc(var(--at) * 100%);top:-5px;width:2px;height:16px;margin-left:-1px;border-radius:1px;background:rgba(246,241,234,.55)}
/* tom claro (momento sobre fundo claro) */
.mo-film--light .mo-film__btn,.mo-film--light .mo-film__replay{border-color:rgba(28,27,25,.4);background:rgba(255,255,255,.6);color:#1C1B19}
.mo-film--light .mo-film__hint{color:var(--text-secondary)}
.mo-film--light .mo-film__ticks i{background:rgba(28,27,25,.35)}
@media (max-width:640px){
  .mo-film{column-gap:10px}
  .mo-film__replay span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mo-film__replay{padding:0;width:48px}
}

/* ---------- foto de ponta a ponta com aproximação lenta ---------- */
.mo-zoom{position:relative;overflow:hidden;isolation:isolate}
.mo-zoom picture,.mo-zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mo-zoom img{transform:scale(calc(1 + var(--z,0) * .09));transform-origin:var(--zo,50% 50%);will-change:transform}

/* ---------- fechamento no amanhecer ---------- */
.mo-dawn{position:relative;background:#0B0E1C;color:#F6F1EA;overflow:hidden;isolation:isolate}
.mo-dawn__sky{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0E1530 0%,#1E2648 34%,#4A3E66 58%,#9A5F62 76%,#D98457 88%,#F4B77A 96%,#F7C98C 100%)}
.mo-dawn__sun{position:absolute;left:50%;bottom:0;width:min(1500px,130vw);aspect-ratio:2.4/1;transform:translate(-50%,calc(50% + var(--rise,0) * 14%));border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,182,.95),rgba(246,178,112,.5) 32%,rgba(232,140,90,0) 74%);will-change:transform}
.mo-dawn__in{display:grid;justify-items:center;text-align:center;gap:var(--s-6);padding-block:clamp(120px,6rem + 6vw,200px) clamp(170px,9rem + 8vw,300px)}
.mo-dawn .mo-kicker{margin:0;color:#F2C29A}
.mo-dawn h2{font-size:clamp(2.6rem,1.2rem + 4.6vw,6rem);line-height:1;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.mo-dawn .btn-primary{min-height:58px;padding-inline:36px;font-size:1.05rem;background:#F6F1EA;color:#1C1B19}
.mo-dawn .btn-primary:hover{background:#fff;box-shadow:0 14px 40px rgba(120,60,30,.35)}

@media (prefers-reduced-motion:reduce){
  .mo *,.mo *::before,.mo *::after,.mo-dawn *{animation:none!important;transition:none!important}
  .mo-zoom img{transform:none}
}