/* ============================================================
   SERVICIO — paginas de servicio MM Agency
   Usa los tokens de styles.css. No redefine marca.
   ============================================================ */

.svc-hero{
  position:relative;
  padding:clamp(120px,16vw,180px) 0 clamp(56px,8vw,88px);
  overflow:hidden;
  border-bottom:var(--border-subtle);
}
.svc-hero-glow{
  position:absolute; inset:auto 0 auto 50%;
  top:-140px; width:min(860px,120vw); height:520px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(113,61,255,.28) 0%,rgba(113,61,255,0) 68%);
  pointer-events:none;
}
.svc-hero .container{position:relative;z-index:1}

.svc-crumbs{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  color:var(--text-dim); margin-bottom:26px; text-transform:uppercase;
}
.svc-crumbs a{color:var(--text-muted); text-decoration:none}
.svc-crumbs a:hover{color:var(--white)}

.svc-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--violet-light); margin:0 0 18px;
}
.svc-h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.1rem,6.2vw,4.1rem); line-height:1.04;
  letter-spacing:-.02em; margin:0 0 24px; color:var(--white);
}
.svc-h1 .accent-word{
  background:var(--gradient-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.svc-sub{
  font-size:clamp(1rem,1.9vw,1.22rem); line-height:1.65;
  color:var(--text-muted); max-width:56ch; margin:0 0 34px;
}
.svc-cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px}
.svc-hero-note{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); margin:0;
}

/* prueba */
.svc-proof{padding:clamp(40px,6vw,64px) 0; background:var(--bg-section); border-bottom:var(--border-subtle)}
.svc-proof-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px}
.svc-proof-item{
  background:var(--bg-card); border:var(--border-normal);
  border-radius:var(--radius); padding:28px 26px;
}
.svc-proof-num{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.2rem,5vw,3.1rem); line-height:1;
  background:var(--gradient-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:12px;
}
.svc-proof-label{font-size:14.5px; line-height:1.5; color:var(--text)}
.svc-proof-sub{display:block; margin-top:6px; font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); line-height:1.5}

/* cuerpo */
.svc-main{padding:clamp(56px,8vw,96px) 0}
.container-narrow{max-width:var(--container-narrow); margin-inline:auto}
.svc-block{margin-bottom:clamp(48px,7vw,76px)}
.svc-h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem,3.2vw,2.05rem); line-height:1.2;
  letter-spacing:-.01em; color:var(--white); margin:0 0 22px;
}
.svc-block p{font-size:16.5px; line-height:1.75; color:var(--text-muted); margin:0 0 18px}
.svc-block p strong{color:var(--white); font-weight:600}

/* lista incluye */
.svc-list{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.svc-list li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:16px; line-height:1.6; color:var(--text-muted);
  background:var(--bg-card); border:var(--border-subtle);
  border-radius:var(--radius-sm); padding:16px 18px;
}
.svc-check{
  flex:0 0 auto; width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:var(--gradient-brand); position:relative;
}
.svc-check::after{
  content:""; position:absolute; left:6px; top:3px;
  width:4px; height:9px; border:solid var(--bg); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* pasos */
.svc-steps{display:grid; gap:18px}
.svc-step{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--bg-card); border:var(--border-subtle);
  border-radius:var(--radius); padding:24px;
}
.svc-step-num{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:17px;
  color:var(--bg); background:var(--gradient-brand);
}
.svc-step-title{font-family:var(--font-body); font-weight:600; font-size:17px; color:var(--white); margin:2px 0 8px}
.svc-step-text{font-size:15.5px; line-height:1.65; color:var(--text-muted); margin:0}

/* faq */
.faq-list{display:grid; gap:12px}
.faq-item{background:var(--bg-card); border:var(--border-subtle); border-radius:var(--radius-sm); overflow:hidden}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:20px 22px; font-family:var(--font-body); font-weight:600;
  font-size:16px; color:var(--white);
}
.faq-icon{position:relative; flex:0 0 auto; width:14px; height:14px}
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; background:var(--violet-light);
  left:50%; top:50%; transform:translate(-50%,-50%);
  transition:opacity var(--t-fast);
}
.faq-icon::before{width:14px; height:2px}
.faq-icon::after{width:2px; height:14px}
.faq-item.open .faq-icon::after{opacity:0}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden; padding:0 22px}
.faq-item.open .faq-a-inner{padding-bottom:22px}
.faq-a-inner{font-size:15.5px; line-height:1.7; color:var(--text-muted)}

/* cierre */
.svc-final{
  background:var(--bg-card); border:var(--border-normal);
  border-radius:var(--radius-lg); padding:clamp(34px,5vw,54px);
  margin-bottom:clamp(48px,7vw,76px); box-shadow:var(--shadow-glow-violet);
}
.svc-final-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.4rem,3.4vw,2.2rem); line-height:1.15;
  color:var(--white); margin:0 0 16px;
}
.svc-final-text{font-size:16.5px; line-height:1.7; color:var(--text-muted); margin:0 0 28px; max-width:52ch}

/* enlaces */
.svc-links{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.svc-links a{
  display:block; padding:16px 18px; border-radius:var(--radius-sm);
  background:var(--bg-card); border:var(--border-subtle);
  color:var(--text); text-decoration:none; font-size:15.5px;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.svc-links a:hover{background:var(--bg-card-hover); border-color:var(--border-strong)}

@media (max-width:640px){
  .svc-step{flex-direction:column; gap:14px}
  .svc-cta-row .btn{width:100%; text-align:center}
}