/* =====================================================================
   DMT Mate — SEO landing page (/s/{slug})
   ===================================================================== */

.sp-hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(128deg,var(--navy) 0%,#0b347c 60%,#12662f 138%);
  padding:clamp(2rem,4.4vw,3.4rem) 0 clamp(2rem,4.4vw,2.8rem)}
.sp-hero__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 420px at 86% 6%,rgba(101,191,5,.26),transparent 60%),
             radial-gradient(660px 460px at 2% 106%,rgba(23,64,184,.3),transparent 58%)}
.sp-hero__inner{position:relative;z-index:1}
.sp-hero .crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.sp-hero h1{color:#fff;font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1.1;
  letter-spacing:-.028em;margin:0 0 .7rem;max-width:24ch}
.sp-hero p{max-width:70ch;color:#c2d0e8;font-size:1rem;line-height:1.75;margin:0}

.sp-main{background:var(--paper)}
.sp-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(1.4rem,3.2vw,2.8rem);align-items:start}

.sp-body{min-width:0;color:var(--slate);font-size:1rem;line-height:1.85}
.sp-body p{margin:0 0 1.1rem}
.sp-body h2,.sp-body h3{color:var(--ink);letter-spacing:-.02em;margin:2rem 0 .8rem}
.sp-body h2{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.sp-body h3{font-size:1.1rem}
.sp-body ul,.sp-body ol{margin:0 0 1.2rem 1.2rem}
.sp-body li{margin-bottom:.45rem}
.sp-body a{color:var(--royal);text-decoration:underline}
.sp-body a:hover{color:var(--signal-700,#3f7a12)}

.sp-faq__head{font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--ink);letter-spacing:-.02em;
  margin:2.2rem 0 1rem}
.sp-faq{display:grid;gap:.6rem}
.sp-faq details{border:1px solid var(--line);border-radius:14px;background:var(--mist-25,#f6f8fc);
  overflow:hidden;transition:border-color .22s ease}
.sp-faq details[open]{border-color:var(--royal);background:var(--paper)}
.sp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;
  list-style:none;padding:.95rem 1.1rem;font-weight:700;font-size:.95rem;color:var(--ink);
  line-height:1.45}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary span{flex:none;width:22px;height:22px;border-radius:50%;position:relative;
  background:var(--signal-50,#f0f8e6);border:1px solid var(--signal-100,#ddeec6);
  transition:transform .25s ease,background .25s ease}
.sp-faq summary span::before,.sp-faq summary span::after{content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);background:var(--signal-700,#3f7a12);border-radius:2px}
.sp-faq summary span::before{width:10px;height:2px}
.sp-faq summary span::after{width:2px;height:10px;transition:opacity .25s ease}
.sp-faq details[open] summary span{transform:rotate(90deg);background:var(--signal)}
.sp-faq details[open] summary span::after{opacity:0}
.sp-faq details p{margin:0;padding:0 1.1rem 1.05rem;color:var(--slate);font-size:.93rem;line-height:1.7}

.sp-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.sp-tags span{display:inline-flex;align-items:center;padding:.4rem .85rem;border-radius:999px;
  font-size:.82rem;color:var(--steel);background:var(--mist-25,#f6f8fc);border:1px solid var(--line)}

/* ---------- Sidebar ---------- */
.sp-side{display:grid;gap:1rem;position:sticky;top:calc(var(--header-h,64px) + 1.2rem)}
.sp-card{text-align:center;padding:clamp(1.3rem,2.4vw,1.8rem);border-radius:20px;
  background:var(--mist-25,#f6f8fc);border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(4,28,100,.06)}
.sp-card__ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  margin:0 auto .9rem;color:#fff;
  background:linear-gradient(140deg,var(--royal),var(--signal-700,#3f7a12) 74%,var(--signal));
  box-shadow:0 12px 26px rgba(4,28,100,.22)}
.sp-card__ico svg{width:25px;height:25px}
.sp-card h2{font-size:1.1rem;margin:0 0 .45rem;letter-spacing:-.015em}
.sp-card p{margin:0 0 1.2rem;color:var(--slate);font-size:.88rem;line-height:1.65}
.sp-card .btn,.sp-card .btn-whatsapp{width:100%;justify-content:center;margin-bottom:.5rem}
.sp-card .btn:last-child{margin-bottom:0}

.sp-links{padding:1.2rem;border-radius:20px;background:var(--paper);border:1px solid var(--line)}
.sp-links h2{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin:0 0 .7rem}
.sp-links a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:10px;
  font-size:.9rem;font-weight:600;color:var(--graphite);transition:all .2s ease}
.sp-links a svg{width:1.05rem;height:1.05rem;flex:none;color:var(--signal-700,#3f7a12)}
.sp-links a:hover{background:var(--mist);color:var(--royal);transform:translateX(3px)}

@media(max-width:900px){
  .sp-layout{grid-template-columns:1fr}
  .sp-side{position:static}
}