/* =====================================================================
   SAGE ENGENHARIA — Página de Manutenção
   Estende styles.css (tokens, nav, footer, botões, .photo, .reveal)
   ===================================================================== */

/* ---------- Hero badge row (resposta rápida) ---------- */
.mhero__pills{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0}
.mhero__pills span{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--cream);
  border:1px solid var(--line-dark); padding:8px 13px; display:inline-flex; align-items:center; gap:8px;
  background:rgba(16,26,42,.35); backdrop-filter:blur(4px);
}
.mhero__pills span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--beige)}

/* =====================================================================
   CHAMARIZ — Check-up predial gratuito (coupon / offer)
   ===================================================================== */
.bait{background:var(--beige); position:relative; overflow:hidden}
.bait::before{
  /* faint blueprint grid */
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:linear-gradient(rgba(34,55,86,.5) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(34,55,86,.5) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 100% 0%, #000, transparent 72%);
  mask-image:radial-gradient(120% 90% at 100% 0%, #000, transparent 72%);
}
.bait .wrap{position:relative; z-index:1}
.bait__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center}
.bait__tag{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--navy-900);
}
.bait__tag .free{background:var(--navy); color:var(--beige); padding:5px 10px; letter-spacing:.14em; font-weight:500}
.bait__t{font-family:var(--display); font-weight:800; font-size:clamp(32px,4.4vw,56px); line-height:1.02; letter-spacing:-.02em; color:var(--navy-900); margin:20px 0 0}
.bait__p{color:var(--navy-700); max-width:46ch; margin:18px 0 0; font-size:17px; line-height:1.55}
.bait__cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:30px}
.bait__cta .btn--navy{background:var(--navy); color:var(--cream); border-color:var(--navy)}
.bait__cta .btn--navy:hover{background:var(--navy-900)}
.bait__fine{font-family:var(--mono); font-size:11.5px; color:var(--navy-700); letter-spacing:.02em}

/* ticket card */
.ticket{
  background:var(--paper); border:1.5px solid var(--navy);
  position:relative; padding:30px 32px 32px;
  box-shadow:14px 14px 0 rgba(34,55,86,.16);
}
.ticket::before, .ticket::after{
  /* perfuração lateral (coupon notch) */
  content:""; position:absolute; width:24px; height:24px; border-radius:50%;
  background:var(--beige); border:1.5px solid var(--navy); top:50%; transform:translateY(-50%);
}
.ticket::before{left:-13px}
.ticket::after{right:-13px}
.ticket__h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1.5px dashed var(--line-strong); padding-bottom:16px; margin-bottom:18px}
.ticket__h .ttl{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--beige-600)}
.ticket__h .price{font-family:var(--display); font-weight:800; font-size:30px; color:var(--navy); letter-spacing:-.02em}
.ticket__h .price s{color:var(--ink-faint); font-weight:600; font-size:18px; margin-right:8px}
.ticket ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.ticket li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink); line-height:1.4}
.ticket li .ck{flex:none; width:20px; height:20px; border-radius:50%; background:var(--navy); color:var(--beige); display:flex; align-items:center; justify-content:center; font-size:11px; margin-top:1px}
.ticket__foot{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); letter-spacing:.02em; display:flex; align-items:center; gap:8px}
.ticket__region{margin-top:16px; background:rgba(34,55,86,.06); border:1px solid var(--line); border-left:3px solid var(--navy); padding:12px 14px; font-size:13px; color:var(--ink); line-height:1.45}
.ticket__region b{color:var(--navy); font-weight:600}

/* =====================================================================
   DOIS MODOS — Corretiva/Pontual vs Preventiva/Recorrente
   ===================================================================== */
.modes__head{max-width:62ch; margin-bottom:clamp(36px,4vw,56px)}
.modes__grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.mode{
  border:1px solid var(--line); background:var(--white); padding:38px 36px 34px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.mode::before{content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--beige); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease)}
.mode:hover{box-shadow:0 30px 60px -32px rgba(34,55,86,.4); transform:translateY(-5px); border-color:var(--line-strong)}
.mode:hover::before{transform:scaleX(1)}
.mode--urgent{background:var(--navy); color:var(--cream); border-color:var(--navy)}
.mode__top{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.mode__ic{flex:none; width:58px; height:58px; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--navy)}
.mode--urgent .mode__ic{border-color:var(--line-dark); color:var(--beige)}
.mode__ic svg{width:28px; height:28px}
.mode__kicker{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--beige-600)}
.mode--urgent .mode__kicker{color:var(--beige)}
.mode__t{font-family:var(--display); font-weight:700; font-size:27px; letter-spacing:-.01em; line-height:1.05; margin:6px 0 0; color:var(--navy)}
.mode--urgent .mode__t{color:var(--white)}
.mode__d{font-size:15.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 22px}
.mode--urgent .mode__d{color:rgba(236,231,220,.8)}
.mode__for{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--beige-600); margin-bottom:12px}
.mode--urgent .mode__for{color:var(--beige)}
.mode__list{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:10px}
.mode__list li{font-size:14.5px; color:var(--ink); display:flex; gap:11px; align-items:flex-start; line-height:1.45}
.mode__list li::before{content:""; width:6px; height:6px; background:var(--beige); flex:none; margin-top:8px}
.mode--urgent .mode__list li{color:rgba(236,231,220,.92)}
.mode__foot{margin-top:auto}

/* =====================================================================
   ESCOPO — o que mantemos
   ===================================================================== */
.scope{background:var(--paper-2)}
.scope__head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,52px)}
.scope__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.scope__item{background:var(--paper); padding:30px 26px; transition:background .3s var(--ease)}
.scope__item:hover{background:var(--white)}
.scope__item .ic{width:42px; height:42px; color:var(--navy); display:flex; align-items:center; justify-content:center; border:1px solid var(--line-strong); margin-bottom:18px}
.scope__item .ic svg{width:22px; height:22px}
.scope__item h3{font-family:var(--display); font-weight:700; font-size:18px; color:var(--navy); letter-spacing:-.01em; margin:0 0 8px}
.scope__item p{font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.5}

/* =====================================================================
   COMO FUNCIONA — fluxo do chamado corretivo
   ===================================================================== */
.mflow{background:var(--navy-900); color:var(--cream)}
.mflow__head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,4vw,60px)}
.mflow__steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line-dark)}
.mflow__step{padding:28px 22px 32px 0; border-right:1px solid var(--line-dark); position:relative}
.mflow__step:last-child{border-right:none; padding-right:0}
.mflow__step:not(:first-child){padding-left:22px}
.mflow__step .n{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--beige); margin-bottom:16px}
.mflow__step h3{font-family:var(--display); font-weight:700; font-size:18px; color:var(--white); letter-spacing:-.01em; margin:0 0 10px; line-height:1.12}
.mflow__step p{font-size:14px; color:rgba(236,231,220,.72); margin:0; line-height:1.5}
.mflow__step .t{display:inline-flex; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--beige-300); align-items:center; gap:7px}
.mflow__step .t::before{content:"⏱"; }

/* =====================================================================
   DIFERENCIAIS
   ===================================================================== */
.mwhy__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.mwhy__item{border-top:2px solid var(--navy); padding-top:18px}
.mwhy__item .n{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--beige-600)}
.mwhy__item h3{font-family:var(--display); font-weight:700; font-size:20px; color:var(--navy); letter-spacing:-.01em; margin:10px 0 8px}
.mwhy__item p{font-size:14.5px; color:var(--ink-soft); margin:0; line-height:1.5}

/* =====================================================================
   CTA FINAL
   ===================================================================== */
.mcta{background:var(--navy); color:var(--cream); position:relative; overflow:hidden}
.mcta::before{content:""; position:absolute; right:-8%; top:-30%; width:55%; height:160%; background:radial-gradient(circle, rgba(188,165,134,.14), transparent 65%)}
.mcta .wrap{position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center}
.mcta h2{max-width:18ch; margin:18px 0 0}
.mcta p{color:rgba(236,231,220,.8); max-width:52ch; margin:18px 0 0; font-size:17px; line-height:1.55}
.mcta__btns{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .bait__grid{grid-template-columns:1fr; gap:40px}
  .modes__grid{grid-template-columns:1fr}
  .scope__grid{grid-template-columns:repeat(2,1fr)}
  .mflow__steps{grid-template-columns:repeat(2,1fr)}
  .mflow__step{border-right:none; border-bottom:1px solid var(--line-dark); padding-right:22px!important; padding-bottom:26px}
  .mflow__step:nth-child(odd){border-right:1px solid var(--line-dark)}
  .mwhy__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .scope__grid{grid-template-columns:1fr}
  .mwhy__grid{grid-template-columns:1fr}
  .ticket{box-shadow:8px 8px 0 rgba(34,55,86,.16)}
}