/* ============================================================
   Díaz Marketing · páginas sencillas de servicio
   (diagnostico-comercial, sistema-de-captacion,
    automatizacion-comercial, optimizacion-del-pipeline)
   Se carga después de styles.css. Cuatro piezas: portada con hueco
   de imagen, «qué incluye», «cómo empezamos», y los otros servicios.
   ============================================================ */

.svc-hero{padding:150px 0 72px}
.svc-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.svc-hero h1{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(2.1rem,4.4vw,3.7rem);margin:18px 0 18px;text-wrap:balance;
}
.svc-hero .lede{font-size:clamp(1rem,1.2vw,1.14rem);color:var(--txt-2);line-height:1.66;max-width:56ch;margin:0}
.svc-acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* hueco de imagen: recuadro vacío a propósito, con su etiqueta */
.hueco{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px dashed rgba(243,240,234,.24);border-radius:var(--r-lg);aspect-ratio:4/3;max-width:100%;
}
.hueco__eti{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:9px;
  font:500 10.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(243,240,234,.72);background:rgba(6,6,8,.62);border:1px solid rgba(243,240,234,.16);
  padding:8px 11px;border-radius:8px;white-space:nowrap;
}
.hueco__eti::before{
  content:"";width:12px;height:12px;flex:0 0 12px;border:1.5px solid currentColor;border-radius:2px;
  background:linear-gradient(to top left,transparent 44%,currentColor 45%,currentColor 55%,transparent 56%);
}

.svc-sec{padding:72px 0}
.svc-sec h2{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(1.7rem,3vw,2.5rem);margin:16px 0 40px;text-wrap:balance;
}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-item{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:var(--surface);
}
.svc-item h3{font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.svc-item p{color:var(--txt-2);font-size:.94rem;line-height:1.7;margin:0}

.svc-pasos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:paso}
.svc-pasos li{position:relative;padding:22px 24px 22px 64px;border:1px solid var(--line);border-radius:var(--r)}
.svc-pasos li::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;left:22px;top:22px;width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;font:700 .85rem 'Sora',sans-serif;color:#060608;background:var(--grad);
}
.svc-pasos strong{display:block;font-family:'Sora',sans-serif;font-size:1rem;margin-bottom:6px}
.svc-pasos p{color:var(--txt-2);font-size:.92rem;line-height:1.66;margin:0}

.svc-otros{padding:56px 0 96px;border-top:1px solid var(--line)}
.svc-otros h2{font-size:clamp(1.3rem,2vw,1.6rem);margin-bottom:22px}
.svc-otros ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.svc-otros a{
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;
  border:1px solid var(--line);color:var(--txt-2);font-size:.92rem;font-weight:500;transition:.25s var(--ease);
}
.svc-otros a:hover{border-color:rgba(249,178,51,.5);color:var(--txt);background:rgba(249,178,51,.06)}
.svc-otros a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cy)}

.svc-cta{padding:0 0 110px;text-align:center}
.svc-cta p{color:var(--txt-2);max-width:52ch;margin:0 auto 24px;line-height:1.66}

@media (max-width:900px){
  .svc-hero{padding:120px 0 56px}
  .svc-hero .wrap{grid-template-columns:1fr}
  .svc-grid,.svc-pasos{grid-template-columns:1fr}
  .svc-acciones .btn{width:100%}
}