/* =============================================================
   MyOffice.website — CSS principal
   Baseado no design original, com melhorias de acessibilidade
   ============================================================= */

:root{
  --bg:#e9f0ee;--bg2:#dbe7e4;--ink:#0b2a31;--muted:#41605f;--line:#b9cdc8;
  --deep:#0b3c49;--deep2:#072b35;--sun:#f2b632;--sunink:#2a1c00;--fog:#e6f1ee;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 4 52 28 28 52 4 28Z' fill='none' stroke='%23f2b632' stroke-width='1.4'/%3E%3Cpath d='M28 16 40 28 28 40 16 28Z' fill='none' stroke='%23f2b632' stroke-width='1'/%3E%3Ccircle cx='28' cy='28' r='3' fill='%23f2b632'/%3E%3C/svg%3E");
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#061c22;--bg2:#0a2830;--ink:#e6f1ee;--muted:#93b0ad;--line:#1b4048;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#061c22;--bg2:#0a2830;--ink:#e6f1ee;--muted:#93b0ad;--line:#1b4048;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bricolage Grotesque",Impact,"Arial Narrow",sans-serif;margin:0;line-height:1.02;letter-spacing:-.025em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

.btn{
  display:inline-block;padding:16px 28px;border-radius:99px;
  font:600 16px Manrope,sans-serif;border:0;cursor:pointer;
  background:var(--sun);color:var(--sunink);transition:transform .2s;
}
.btn:hover{transform:scale(1.04)}
.btn.sm{padding:11px 20px;font-size:15px;margin-left:8px}

/* ---------- Hero ---------- */
.hero{background:var(--deep2);color:var(--fog);position:relative;overflow:hidden;padding:0 0 90px}
.hero:before{content:"";position:absolute;inset:0;background:var(--pat);opacity:.07}
.top{display:flex;justify-content:space-between;align-items:center;padding:24px 0;position:relative}
.logo{font:800 24px "Bricolage Grotesque",sans-serif;letter-spacing:-.03em}
.logo i{display:inline-block;width:14px;height:14px;background:var(--sun);border-radius:50% 50% 50% 0;margin-right:8px;transform:rotate(-45deg)}
.hg{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;padding-top:64px}
h1{font-size:clamp(44px,7.4vw,92px);font-weight:800}
.sub{font-size:19px;color:#b8d2cf;max-width:480px;margin:26px 0 34px}
.note{font-size:14px;color:#7fa5a6;margin-top:16px}
.note a{color:var(--sun);border-bottom:1px solid currentColor}

/* ---------- Prédio ---------- */
.bld{max-width:460px;margin-left:auto;width:100%}
.roof{
  height:46px;background:#0f5260;
  clip-path:polygon(0 100%,8% 0,92% 0,100% 100%);
  display:grid;place-items:center;
  font:700 15px "Bricolage Grotesque",sans-serif;letter-spacing:.04em;color:var(--sun);
}
.stack{border:1px solid #2c6068;border-top:0;background:#0a4350}
.fl{
  all:unset;box-sizing:border-box;display:grid;grid-template-columns:34px 1fr auto;
  align-items:center;gap:10px;width:100%;padding:0 16px;height:56px;cursor:pointer;
  border-top:1px solid #1d5560;color:#b8d2cf;
  font:600 15px Manrope,sans-serif;transition:background .25s;
}
.fl:hover,.fl[aria-pressed=true]{background:#0f5a69;color:#fff}
.fl:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
.fl small{font:500 12px Manrope;color:#7fa5a6}
.win{display:flex;gap:6px}
.win b{width:16px;height:22px;border-radius:3px 3px 0 0;background:#08323c;transition:background .4s,box-shadow .4s}
.fl.on .win b{background:var(--sun);box-shadow:0 0 14px #f2b63266}
.fl.on .win b:nth-child(3){background:#ffe29a}
.door{width:22px;height:26px;border-radius:11px 11px 0 0;background:#08323c;transition:background .4s}
.fl.on .door{background:var(--sun)}
.plate{
  margin-top:20px;border:1px solid #2c6068;border-left:4px solid var(--sun);
  padding:20px 22px;border-radius:0 14px 14px 0;background:#08323c;
}
.plate h3{font-size:26px}
.plate p{margin:8px 0 12px;color:#b8d2cf;font-size:16px}
.plate ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.plate li{font-size:14px;padding:5px 12px;border:1px solid #3d6b72;border-radius:99px;color:#e6f1ee}

/* ---------- Nav + Mega-menu ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--deep2);color:var(--fog);border-bottom:1px solid #1d4b55}
.nb{display:flex;align-items:center;justify-content:space-between;height:68px}
.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;height:100%}
.has{height:100%;display:flex;align-items:center;position:static}
.mt{
  all:unset;box-sizing:border-box;cursor:pointer;padding:10px 16px;border-radius:99px;
  font:600 15px Manrope,sans-serif;color:#b8d2cf;
  display:inline-flex;align-items:center;gap:8px;transition:color .2s,background .2s;
}
.mt:hover,.mt[aria-expanded=true]{color:#fff;background:#0f4a58}
.mt:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
button.mt:after{
  content:'';width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;
}
button.mt[aria-expanded=true]:after{transform:rotate(225deg) translateY(-2px)}
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--deep);
  border-bottom:1px solid #1d4b55;box-shadow:0 30px 50px -20px #000a;
}
.mega[hidden]{display:none}
.mg{display:grid;grid-template-columns:2fr 1fr;gap:48px;padding:30px 24px 38px}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;align-content:start}
.mlabel{margin:0 14px 6px;font:600 13px Manrope,sans-serif;color:#7fa5a6}
.mi{display:block;padding:12px 14px;border-radius:12px;transition:background .2s}
.mi:hover,.mi:focus-visible{background:#0f5260}
.mi b{display:block;font:700 17px 'Bricolage Grotesque',sans-serif;color:#fff;letter-spacing:-.01em}
.mi span{font-size:14px;color:#9fc0bd;line-height:1.45}
.mside{border-left:1px solid #1d4b55;padding-left:36px}
.mside h4{margin:0 0 8px;font:700 24px/1.1 'Bricolage Grotesque',sans-serif;color:#fff}
.mside p{margin:0 0 20px;color:#9fc0bd;font-size:15px}

/* ---------- Burger ---------- */
.burger{all:unset;box-sizing:border-box;display:none;width:44px;height:44px;cursor:pointer;position:relative;border-radius:12px}
.burger:focus-visible{outline:3px solid var(--sun)}
.burger span{position:absolute;left:11px;top:21px;width:22px;height:2px;background:#fff;transition:background .2s}
.burger span:before,.burger span:after{content:'';position:absolute;left:0;width:22px;height:2px;background:#fff;transition:transform .25s}
.burger span:before{top:-7px}
.burger span:after{top:7px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span:before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Secções ---------- */
section{padding:96px 0}
.stmt{background:var(--deep);color:var(--fog);position:relative;overflow:hidden}
.stmt:before{content:"";position:absolute;inset:0;background:var(--pat);opacity:.09}
.stmt p{position:relative;font:700 clamp(28px,4.6vw,56px)/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;max-width:920px;margin:0}
.stmt span{color:#7fb3b3}
.day{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
h2{font-size:clamp(34px,5vw,58px);font-weight:800}
.day p.in{color:var(--muted);margin:18px 0 0;max-width:420px}
.tl{list-style:none;margin:0;padding:0 0 0 28px;border-left:2px solid var(--line)}
.tl li{position:relative;padding:0 0 38px 20px}
.tl li:before{content:"";position:absolute;left:-37px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--sun)}
.tl time{font:700 14px Manrope;color:var(--muted);font-variant-numeric:tabular-nums}
.tl h3{font-size:24px;margin:2px 0 4px}
.tl p{margin:0;color:var(--muted);font-size:16px}
.local{background:var(--bg2)}
.lg{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.pts{display:grid;gap:30px}
.pts h3{font-size:22px;margin-bottom:6px}
.pts p{margin:0;color:var(--muted);font-size:16px}
.pts div{padding-left:22px;border-left:3px solid var(--sun)}
.faq{max-width:820px}
details{border-top:1px solid var(--line);padding:22px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font:700 21px "Bricolage Grotesque",sans-serif}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--sun);font-size:28px;line-height:.8;transition:transform .25s}
details[open] summary:after{transform:rotate(45deg)}
details p{margin:12px 0 0;color:var(--muted);max-width:620px}

/* ---------- CTA / Formulário ---------- */
.cta{background:var(--deep2);color:var(--fog);position:relative;overflow:hidden;text-align:left}
.cta:before{content:"";position:absolute;inset:0;background:var(--pat);opacity:.07}
.cta .wrap{position:relative}
.cta h2{max-width:760px}
.cta p{color:#b8d2cf;margin:20px 0 32px;max-width:480px}

form{display:flex;gap:12px;flex-wrap:wrap;max-width:560px}
input{flex:1 1 250px;padding:16px 22px;border-radius:99px;border:2px solid #2c6068;background:#08323c;color:#fff;font:500 16px Manrope,sans-serif}
input::placeholder{color:#7fa5a6}
.lb{font:600 14px Manrope,sans-serif;color:#b8d2cf;margin-bottom:-6px}
.chk{display:flex;gap:10px;align-items:center;font-size:14px;color:#b8d2cf;flex:1 1 100%}
.chk input{width:18px;height:18px;padding:0;accent-color:#f2b632;flex:0 0 auto}
.err{color:#ffb4a2;font-size:14px;flex:1 1 100%}
.err:empty{display:none}
.ok{color:#9fe6b8;font-size:15px;flex:1 1 100%;padding:14px 18px;border:1px solid #2c6068;border-radius:14px;background:#08323c}
.lead-form{flex-direction:column;flex-wrap:nowrap;max-width:520px;gap:14px}
.lead-form input{flex:none;width:100%}

/* ---------- Footer ---------- */
footer{background:var(--deep2);color:#7fa5a6;font-size:14px;padding:0 0 34px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid #1d4b55;padding-top:26px}

/* ---------- Responsivo ---------- */
@media(max-width:860px){
  .hg,.day,.lg{grid-template-columns:1fr;gap:40px}
  section{padding:68px 0}
  .bld{margin:0}
}
@media(max-width:860px){
  .burger{display:block}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;height:auto;
    background:var(--deep2);padding:6px 24px 24px;
    max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);
    overflow:auto;border-bottom:1px solid #1d4b55;
  }
  .menu.open{display:flex}
  .has{display:block;height:auto}
  .mt{display:flex;width:100%;justify-content:space-between;padding:15px 10px;border-radius:12px}
  .mega{position:static;box-shadow:none;border:0;background:transparent}
  .mg{grid-template-columns:1fr;gap:12px;padding:0 0 10px}
  .mcols{grid-template-columns:1fr}
  .mside{border:0;padding:6px 10px 0}
  .btn.sm{display:block;text-align:center;margin:12px 0 0}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}