/* =========================================================
   ESPIRAL – SERVICIO TÉCNICO IMPRESIÓN DIGITAL
   Archivo: /activos/css/servicio-tecnico.css
   Anti-interferencias Electro/Plugins + clases únicas
   ========================================================= */

/* Evita scroll horizontal por estilos del tema */
body { overflow-x: hidden; }

/* ===== Contenedor principal (full width) ===== */
body .espst{
  --a:#ce1e76;
  --a2:#ff4aa6;

  --g:#16a34a;
  --gbg:#f1fbf5;

  --ink:#111827;
  --muted:#4b5563;
  --border:rgba(15,23,42,.12);
  --bg:#faf7fb;

  --shadow:0 10px 30px rgba(2,6,23,.10);
  --shadowSoft:0 6px 16px rgba(2,6,23,.08);

  --r:18px;
  --r2:26px;

  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;

  font: normal 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  color:var(--ink) !important;

  overflow:visible !important;
  isolation:isolate !important;
}

/* ===== HARD RESET CONTROLADO (solo dentro de .espst) ===== */
body .espst :where(
  div, section, header, footer, main, article, aside,
  h1, h2, h3, p, a, span, strong, em,
  ul, ol, li, figure, figcaption, img, nav, button
){
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  vertical-align:baseline !important;
  box-sizing:border-box !important;
}

/* Texto */
body .espst p{ color:var(--muted) !important; }
body .espst p + p{ margin-top:10px !important; }
body .espst a{ color:inherit !important; text-decoration:none !important; }
body .espst img{
  max-width:100% !important;
  height:auto !important;
  display:block !important;
  float:none !important;
}

/* Wrapper */
body .espst__wrap{
  max-width:1160px !important;
  margin:0 auto !important;
  padding:0 18px !important;
}

/* Headings */
body .espst h1, body .espst h2, body .espst h3{
  color:var(--ink) !important;
  line-height:1.15 !important;
  letter-spacing:-.3px !important;
}
body .espst h1{
  font-size:clamp(30px,4.2vw,48px) !important;
  margin-top:14px !important;
}
body .espst h2{
  font-size:24px !important;
  margin-bottom:12px !important;
}
body .espst h3{ font-size:16px !important; }

/* Secciones */
body .espst__sec{
  padding:56px 0 !important;
  background:#fff !important;
}
body .espst__sec--alt{
  padding:56px 0 !important;
  background:var(--bg) !important;
  border-top:1px solid var(--border) !important;
  border-bottom:1px solid var(--border) !important;
}

/* Hero */
body .espst__hero{
  padding:56px 0 36px !important;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(206,30,118,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(206,30,118,.14), transparent 55%),
    linear-gradient(180deg,#fff,var(--bg)) !important;
  border-bottom:1px solid var(--border) !important;
}
body .espst__lead{
  margin-top:10px !important;
  font-size:16px !important;
  line-height:1.75 !important;
  max-width:64ch !important;
}

/* Eyebrow */
body .espst__eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:1px solid var(--border) !important;
  background:rgba(206,30,118,.06) !important;
  font-weight:800 !important;
  font-size:12px !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:var(--ink) !important;
}
body .espst__dot{
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  background:var(--a) !important;
  box-shadow:0 0 0 6px rgba(206,30,118,.12) !important;
}

/* Botones */
body .espst__btns{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:18px !important;
}
body .espst__btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 16px !important;
  border-radius:14px !important;
  border:1px solid var(--border) !important;
  background:#fff !important;
  box-shadow:var(--shadowSoft) !important;
  font-weight:800 !important;
  font-size:14px !important;
  color:var(--ink) !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
body .espst__btn:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(206,30,118,.35) !important;
  box-shadow:0 12px 30px rgba(2,6,23,.12) !important;
}
body .espst__btn--primary{
  background:linear-gradient(135deg,var(--a),var(--a2)) !important;
  border-color:rgba(206,30,118,.35) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(206,30,118,.22) !important;
}

/* Nota */
body .espst__note{
  margin-top:14px !important;
  display:inline-flex !important;
  gap:10px !important;
  align-items:center !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  background:rgba(206,30,118,.05) !important;
  border:1px solid rgba(206,30,118,.10) !important;
  color:var(--muted) !important;
  font-size:13px !important;
}

/* Layout columnas (Flex robusto) */
body .espst__two{
  display:flex !important;
  gap:18px !important;
  align-items:stretch !important;
  flex-wrap:wrap !important;
}
body .espst__col{
  flex:1 1 520px !important;
  min-width:280px !important;
}

/* Media (background image) */
body .espst__media{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:28px !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
}
body .espst__mediaBox{
  height:360px !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
body .espst__media--hero .espst__mediaBox{ height:520px !important; }
body .espst__meta{
  padding:14px 16px !important;
  border-top:1px solid rgba(15,23,42,.08) !important;
}
body .espst__meta strong{
  display:block !important;
  font-size:14px !important;
  color:var(--ink) !important;
}
body .espst__meta span{
  display:block !important;
  margin-top:3px !important;
  font-size:13px !important;
  line-height:1.6 !important;
  color:var(--muted) !important;
}

/* Listas check */
body .espst__list{
  margin-top:14px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
body .espst__li{
  display:flex !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  background:rgba(206,30,118,.05) !important;
  border:1px solid rgba(206,30,118,.10) !important;
}
body .espst__check{
  width:22px !important;
  height:22px !important;
  border-radius:999px !important;
  background:var(--a) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 22px !important;
  margin-top:1px !important;
}
body .espst__li strong{
  display:block !important;
  font-size:14px !important;
  margin-bottom:2px !important;
  color:var(--ink) !important;
}
body .espst__li span{
  display:block !important;
  font-size:13px !important;
  line-height:1.6 !important;
  color:var(--muted) !important;
}

/* Cards (clase única) */
body .espst__cards3,
body .espst__cards4{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin-top:14px !important;
}
body .espst__card{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r2) !important;
  box-shadow:var(--shadowSoft) !important;
  padding:22px !important;
}
body .espst__cards3 > .espst__card{ flex:1 1 320px !important; }
body .espst__cards4 > .espst__card{ flex:1 1 240px !important; }
body .espst__card p{
  margin-top:10px !important;
  font-size:14px !important;
  line-height:1.75 !important;
}

/* Icon cards (A1–A4) */
body .espst__iconGrid{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  margin-top:16px !important;
}
body .espst__iconCard{
  flex:1 1 260px !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r2) !important;
  box-shadow:var(--shadowSoft) !important;
  padding:16px !important;
  display:flex !important;
  gap:12px !important;
  align-items:flex-start !important;
}
body .espst__icon{
  width:56px !important;
  height:56px !important;
  border-radius:16px !important;
  background:rgba(206,30,118,.08) !important;
  border:1px solid rgba(206,30,118,.14) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 56px !important;
}
body .espst__icon img{
  width:34px !important;
  height:34px !important;
  object-fit:contain !important;
  max-width:none !important;
}
body .espst__iconBody h3{
  font-size:15px !important;
  margin:2px 0 6px !important;
}
body .espst__iconBody p{
  font-size:13px !important;
  line-height:1.7 !important;
}

/* Tags marcas */
body .espst__tagList{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:12px !important;
}
body .espst__tag{
  display:inline-flex !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(206,30,118,.18) !important;
  background:rgba(206,30,118,.06) !important;
  color:var(--ink) !important;
  font-weight:800 !important;
  font-size:12px !important;
  letter-spacing:.02em !important;
}

/* FAQ */
body .espst__faq{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  margin-top:16px !important;
}
body .espst__q{
  flex:1 1 420px !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r2) !important;
  box-shadow:var(--shadowSoft) !important;
  padding:16px !important;
}
body .espst__q h3{
  font-size:15px !important;
  margin:0 0 8px !important;
}
body .espst__q p{
  font-size:13px !important;
  line-height:1.7 !important;
}

/* CTA */
body .espst__cta{
  padding:44px 0 !important;
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(206,30,118,.24), transparent 60%),
    radial-gradient(900px 360px at 90% 10%, rgba(206,30,118,.18), transparent 60%),
    linear-gradient(180deg,#fff,var(--bg)) !important;
  border-top:1px solid var(--border) !important;
}
body .espst__strip{
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(206,30,118,.18) !important;
  border-radius:28px !important;
  box-shadow:var(--shadow) !important;
  padding:22px !important;
  display:flex !important;
  gap:18px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}
body .espst__stripLeft{ flex:1 1 520px !important; min-width:280px !important; }
body .espst__stripRight{ flex:1 1 260px !important; min-width:240px !important; }
body .espst__actions{ display:flex !important; gap:12px !important; justify-content:flex-end !important; flex-wrap:wrap !important; }

/* Responsive */
@media (max-width:980px){
  body .espst__mediaBox{ height:320px !important; }
  body .espst__media--hero .espst__mediaBox{ height:420px !important; }
  body .espst__actions{ justify-content:flex-start !important; }
}
@media (max-width:520px){
  body .espst__btn{ width:100% !important; }
  body .espst__actions .espst__btn{ width:100% !important; }
}