/* ============================================================
   Dartel Solutions — Servicios: explorador interactivo
   Cabecera del servicio + acordeón de ventanas (componente
   compartido `.svc-acc`/`.svc-win` definido en foundations.css).
   Sin imágenes.
   ============================================================ */

.svc-section.alt{background:var(--white)}

/* 2 columnas: cabecera del servicio + ventanas */
.svc-explorer{display:grid;grid-template-columns:minmax(0,37fr) minmax(0,63fr);gap:52px;align-items:start}
.svc-explorer.reverse{grid-template-columns:minmax(0,63fr) minmax(0,37fr)}
.svc-explorer.reverse .svc-head{order:2}
.svc-explorer.reverse .svc-acc{order:1}

/* ---- Cabecera del servicio ---- */
.svc-head .ic-box{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(24,169,87,.1);color:var(--green-deep);margin-bottom:18px}
.svc-head .ic-box .ic{width:24px;height:24px}
.svc-head .eyebrow{margin-bottom:10px}
.svc-head .h1{margin:0}
.svc-head .lead{margin:14px 0 0;color:var(--ink-2)}
.svc-head .btn{margin-top:26px;min-height:44px}

@media (max-width:880px){
  .svc-explorer,.svc-explorer.reverse{grid-template-columns:1fr;gap:28px}
  .svc-explorer.reverse .svc-head{order:0}
  .svc-explorer.reverse .svc-acc{order:0}
}

/* ---- Tipografía fluida del hero en móvil estrecho ---- */
@media (max-width:480px){
  .page-hero .h-hero{font-size:clamp(1.75rem,1.2rem + 5.5vw,3.2rem)}
}