/* Camada comum a todas as paginas: o que o design D8 (Mobile) pede alem do
   CSS de cada tela. Desktop nao muda nada aqui. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:clip}
img{max-width:100%}
.d-disp{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-optical-sizing:auto}

.m-top,.m-pill,.m-layer{display:none}

@keyframes m-pill-in{0%{transform:translate(-50%,24px);opacity:0}70%{transform:translate(-50%,-3px);opacity:1}100%{transform:translate(-50%,0)}}
@keyframes m-sheet-in{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}

@media (max-width:900px){
  .d-root > header{display:none !important}
  .d-root .g12{grid-template-columns:minmax(0,1fr) !important}
  .d-root .g12 > *{min-width:0}
  .d-root .rail{position:static !important}

  .m-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 20px 0;background:#F6F4EE;font-family:'Figtree',system-ui,sans-serif;color:#15211A}
  .m-top a{display:flex;align-items:center;gap:8px;min-height:44px;color:#15211A;text-decoration:none}
  .m-top .d-disp{font-size:15px;font-weight:600}
  .m-crm{font-size:12px;font-weight:600;color:#4F5A52}

  .m-pill{display:flex;align-items:center;gap:4px;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;padding:5px;background:#1E3528;border-radius:999px;box-shadow:0 12px 30px -10px rgba(21,33,26,.5);font-family:'Figtree',system-ui,sans-serif;white-space:nowrap}
  .m-pill button,.m-pill a{display:inline-flex;align-items:center;gap:8px;min-height:50px;border-radius:999px;font-size:15px;text-decoration:none}
  .m-pill button{padding:0 20px;border:0;background:transparent;color:#F6F4EE;font-weight:600;font-family:inherit;cursor:pointer}
  .m-pill a{padding:0 22px;background:#F0B98A;color:#15211A;font-weight:700}
  .m-pill a:hover{color:#15211A}

  .m-layer:not([hidden]){display:block;position:fixed;inset:0;z-index:70;font-family:'Figtree',system-ui,sans-serif;color:#15211A}
  .m-backdrop{position:absolute;inset:0;background:rgba(21,33,26,.55)}
  .m-sheet{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - 64px);overflow-y:auto;background:#F6F4EE;border-radius:28px 28px 0 0;padding:12px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px;box-sizing:border-box}
  .m-sheet-head{display:flex;justify-content:center;align-items:center;position:relative;min-height:44px}
  .m-grip{width:40px;height:5px;border-radius:999px;background:rgba(21,33,26,.2)}
  .m-close{position:absolute;right:0;top:0;width:44px;height:44px;border-radius:999px;border:0;background:#ECEFE8;color:#15211A;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .m-nav{display:flex;flex-direction:column}
  .m-nav a{display:flex;justify-content:space-between;align-items:center;min-height:60px;border-bottom:1px solid rgba(21,33,26,.12);color:#15211A;text-decoration:none;font-size:32px;letter-spacing:-0.025em;font-weight:500}
  .m-nav a:last-child{border-bottom:0}
  .m-dot{width:10px;height:10px;border-radius:999px;background:#F0B98A}
  .m-temas{display:flex;flex-direction:column;gap:10px}
  .m-temas > span{font-size:12px;font-weight:600;color:#4F5A52}
  .m-temas > div{display:flex;flex-wrap:wrap;gap:6px}
  .m-temas a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:#DCE5D5;color:#15211A;text-decoration:none;font-size:14px;font-weight:600}
  .m-cta{display:flex;justify-content:center;align-items:center;gap:10px;min-height:56px;border-radius:999px;background:#1E3528;color:#F6F4EE !important;text-decoration:none;font-size:16px;font-weight:600;margin-top:8px}
  .m-addr{font-size:12px;line-height:18px;color:#4F5A52;text-align:center}

  /* linhas de chips rolam para o lado, como no D8 */
  .d-root [role="group"]{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .d-root [role="group"]::-webkit-scrollbar{display:none}
  .d-root [role="group"] > *{flex:none;white-space:nowrap}

  /* selo sobre a foto do hero nao pode vazar da tela */
  .d-root .pop{left:12px !important;bottom:12px !important}
  .d-root .pop2{right:12px !important;top:12px !important}

  /* espaco para a pilula fixa nao cobrir o rodape */
  .d-root > footer{padding-bottom:120px !important}
}

@media (prefers-reduced-motion: no-preference){
  @media (max-width:900px){
    .m-pill{animation:m-pill-in 600ms cubic-bezier(.34,1.56,.64,1) 300ms both}
    .m-layer:not([hidden]) .m-backdrop{animation:m-fade 260ms ease both}
    .m-layer:not([hidden]) .m-sheet{animation:m-sheet-in 520ms cubic-bezier(.2,.7,.2,1) both}
  }
}

/* 404 */
.p404{margin:0;min-height:100vh;display:flex;align-items:center;background:#F6F4EE;color:#15211A;font-family:'Figtree',system-ui,sans-serif;font-size:17px;line-height:28px}
.p404 main{width:100%;max-width:1360px;margin:0 auto;padding:64px clamp(20px,4vw,64px);box-sizing:border-box;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.p404 h1{margin:0;font-size:clamp(52px,9vw,112px);line-height:.94;letter-spacing:-0.04em;font-weight:500}
.p404 p{margin:0;max-width:480px;color:#4F5A52}
.p404 main > div{display:flex;flex-wrap:wrap;gap:12px}
.p404-a,.p404-b{display:inline-flex;align-items:center;min-height:56px;padding:0 26px;border-radius:999px;text-decoration:none;font-weight:600}
.p404-a{background:#1E3528;color:#F6F4EE}
.p404-b{border:1px solid rgba(21,33,26,.28);color:#15211A}