/* Celular: a primeira tela volta ao tema escuro (foto escura, texto claro) até logo depois do 1º botão CTA;
   dali para baixo o fundo vai clareando aos poucos até o papel (#f7f3ea). Só ≤860 px. Reversível: tirar o <link> e o <script> da página.
   A posição do fim da parte escura vem de assets/dcp-escuro-mobile.js (variável --dcp-fim = base do 1º CTA, em px desde o topo da página). */
@media(max-width:860px){
  html body{
    background-color:#f7f3ea;
    /* 15 paradas em OKLab com curva suave (smoothstep), 340 px: sem faixa nem degrau visível */
    background-image:linear-gradient(180deg,
      #051a22 calc(var(--dcp-fim,
      1100px) + 0px),
      #081d24 calc(var(--dcp-fim,
      1100px) + 24px),
      #10242b calc(var(--dcp-fim,
      1100px) + 48px),
      #1d2f36 calc(var(--dcp-fim,
      1100px) + 71px),
      #2e3f45 calc(var(--dcp-fim,
      1100px) + 99px),
      #435256 calc(var(--dcp-fim,
      1100px) + 122px),
      #5b676a calc(var(--dcp-fim,
      1100px) + 146px),
      #747e7f calc(var(--dcp-fim,
      1100px) + 170px),
      #8e9695 calc(var(--dcp-fim,
      1100px) + 193px),
      #a9adaa calc(var(--dcp-fim,
      1100px) + 218px),
      #c1c3be calc(var(--dcp-fim,
      1100px) + 241px),
      #d7d6d0 calc(var(--dcp-fim,
      1100px) + 269px),
      #e8e5de calc(var(--dcp-fim,
      1100px) + 292px),
      #f3efe7 calc(var(--dcp-fim,
      1100px) + 316px),
      #f7f3ea calc(var(--dcp-fim,
      1100px) + 340px));
    background-repeat:no-repeat;
  }
  /* foto escura original, com véu azul-petróleo que a funde ao fundo */
  html body .hero-bg{background-image:var(--dcp-hero-img,url('/assets/hero-home-mobile-v4.webp')) !important;background-size:var(--dcp-hero-size,cover) !important;background-position:var(--dcp-hero-pos,50% 6%) !important;background-repeat:no-repeat !important;filter:none !important;transform:none !important;box-shadow:none !important}
  html body .hero-bg::after{background:linear-gradient(180deg,rgba(5,26,34,.28) 0%,rgba(5,26,34,.46) 38%,rgba(5,26,34,.78) 74%,#051a22 100%) !important}
  /* cabeçalho: no topo é o ESCURO antigo (faixa de ponta a ponta, logo creme, fio dourado); ao rolar vira, aos poucos, a ilha clara nova.
     --dcp-p (0 a 1) vem de assets/dcp-escuro-mobile.js (0 no topo, 1 aos 150 px de rolagem; aos 160 px a faixa de texto assume, como antes). */
  html body header,html.dcp-rolou body header{--p:var(--dcp-p,0);--q:calc(min(1,var(--p)*1.5));
    left:0 !important;right:0 !important;width:auto !important;max-width:none !important;
    margin:calc(var(--p)*8px) calc(var(--p)*8px) 0 !important;
    border:1.5px solid color-mix(in srgb,#8c6a28 calc(var(--q)*100%),transparent) !important;border-radius:calc(var(--q)*40px) !important;
    background:color-mix(in srgb,rgba(251,248,241,.94) calc(var(--q)*100%),rgba(5,26,34,.94)) !important;
    -webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;
    box-shadow:0 1px 0 rgba(217,184,120,calc(.16 - var(--p)*.16)),0 8px 24px rgba(0,0,0,calc(.28 - var(--p)*.16)) !important;
    transition:none !important}
  html body header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;opacity:calc(1 - var(--p));
    background:linear-gradient(90deg,rgba(217,184,120,0),#d9b878,rgba(217,184,120,0))}
  html body header nav.wrap,html.dcp-rolou body header nav.wrap{padding:calc(14px - var(--p)*9px) calc(22px - var(--p)*6px) !important;transition:none !important}
  /* duas logos empilhadas: creme (fundo escuro) some, a clara entra */
  html body header .logo{display:grid !important}
  html body header .logo .logo-img{grid-area:1/1;height:calc(44px - var(--p)*14px) !important;width:auto !important;transition:none !important}
  html body header .logo .logo-escura{display:block !important;opacity:calc(1 - var(--p)*1.8)}
  html body header .logo .logo-clara{opacity:calc(var(--p)*1.8 - .8)}
  html body header .nav-toggle{color:color-mix(in srgb,#10303c calc(min(100,var(--p)*180)*1%),#f7f3ea) !important}
  html body header .nav-toggle svg{stroke:currentColor !important}
  /* botão do topo: sem o retângulo claro que o clip-path recortava atrás do botão arredondado */
  html body .hero-ctas .cta-btn{clip-path:none !important;box-shadow:0 8px 22px rgba(0,0,0,.35) !important}
  /* textos da parte escura */
  html body .hero-content .eyebrow,html body .hero .eyebrow{color:#d9b878 !important;text-shadow:0 1px 10px rgba(0,0,0,.6) !important}
  html body .hero-content h1,html body .hero-content h1 .zw{color:#f7f3ea !important;text-shadow:0 2px 18px rgba(0,0,0,.5) !important}
  html body .hero-content h1 em,html body .hero-content h1 em .zw{color:#d9b878 !important;-webkit-text-fill-color:#d9b878 !important}
  html body .hero-content .lead{color:#d3dde0 !important;text-shadow:0 1px 12px rgba(0,0,0,.6) !important}
  html body .hero-content .lead b,html body .hero-content .lead strong{color:#ffffff !important;text-shadow:0 1px 12px rgba(0,0,0,.6) !important}
  html body .hero-ctas .note{color:#aebdc3 !important;text-shadow:none !important}
  /* "Um laudo mal feito...": cai já na parte clara; folga para o fundo clarear antes dele */
  html body .hero-content .hero-dor{margin-top:205px !important;color:#16323d !important;text-shadow:none !important}
}