/* =========================================================
   ESPIRAL – DISTRIBUIDOR ROLAND DG
   Archivo: /activos/css/roland-distribuidor.css
   Anti-interferencias Electro/Plugins + clases unicas
   ========================================================= */

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

/* ===== Contenedor principal (full width) ===== */
body .roland-dist{
  --a:#ce1c76;
  --a2:#ff4aa6;
  --rdblue:#005bac;

  --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 .roland-dist) ===== */
body .roland-dist :where(
  div, section, header, footer, main, article, aside,
  h1, h2, h3, h4, p, a, span, strong, em,
  ul, ol, li, figure, figcaption, img, nav, button, svg
){
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  vertical-align:baseline !important;
  box-sizing:border-box !important;
}

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

/* Headings */
body .roland-dist h1, body .roland-dist h2, body .roland-dist h3, body .roland-dist h4{
  color:var(--ink) !important;
  line-height:1.15 !important;
  letter-spacing:-.3px !important;
}

/* Wrapper */
body .rdist__wrap{
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 24px !important;
}

/* ===== HERO ===== */
body .rdist__hero{
  padding:72px 0 56px !important;
  background:linear-gradient(135deg, #005bac 0%, #003d7a 40%, #ce1c76 100%) !important;
  text-align:center !important;
}
body .rdist__hero h1{
  font-size:clamp(30px,4.5vw,52px) !important;
  color:#fff !important;
  margin-bottom:16px !important;
}
body .rdist__hero-sub{
  font-size:18px !important;
  line-height:1.7 !important;
  color:rgba(255,255,255,.85) !important;
  max-width:64ch !important;
  margin:0 auto 28px !important;
}
body .rdist__hero-btns{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
}

/* ===== BOTONES ===== */
body .rdist__btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:14px 28px !important;
  border-radius:14px !important;
  font-weight:800 !important;
  font-size:15px !important;
  cursor:pointer !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
body .rdist__btn:hover{
  transform:translateY(-2px) !important;
}
body .rdist__btn--primary{
  background:linear-gradient(135deg,var(--a),var(--a2)) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(206,28,118,.25) !important;
}
body .rdist__btn--primary:hover{
  box-shadow:0 16px 40px rgba(206,28,118,.35) !important;
}
body .rdist__btn--outline{
  background:transparent !important;
  border:2px solid rgba(255,255,255,.6) !important;
  color:#fff !important;
}
body .rdist__btn--outline:hover{
  border-color:#fff !important;
  background:rgba(255,255,255,.1) !important;
}
/* Botones en hero y CTA final: blancos para contraste con fondo gradiente */
body .rdist__hero .rdist__btn--primary,
body .rdist__cta .rdist__btn--primary{
  background:#fff !important;
  color:#005bac !important;
  box-shadow:0 14px 34px rgba(0,0,0,.2) !important;
}
body .rdist__hero .rdist__btn--primary:hover,
body .rdist__cta .rdist__btn--primary:hover{
  box-shadow:0 16px 40px rgba(0,0,0,.3) !important;
}
body .rdist__hero .rdist__btn--outline,
body .rdist__cta .rdist__btn--outline{
  border-color:#fff !important;
  color:#fff !important;
}
body .rdist__hero .rdist__btn--blue,
body .rdist__cta .rdist__btn--blue{
  background:#fff !important;
  color:#005bac !important;
  box-shadow:0 10px 24px rgba(0,0,0,.2) !important;
}
body .rdist__btn--blue{
  background:var(--rdblue) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(0,91,172,.25) !important;
}
body .rdist__btn--blue:hover{
  box-shadow:0 12px 30px rgba(0,91,172,.35) !important;
}
body .rdist__btn--dark{
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadowSoft) !important;
}
body .rdist__btn--dark:hover{
  border-color:rgba(206,28,118,.35) !important;
  box-shadow:0 12px 30px rgba(2,6,23,.12) !important;
}

/* ===== SECCIONES ===== */
body .rdist__sec{
  padding:60px 0 !important;
  background:#fff !important;
}
body .rdist__sec--alt{
  padding:60px 0 !important;
  background:var(--bg) !important;
  border-top:1px solid var(--border) !important;
  border-bottom:1px solid var(--border) !important;
}

/* Titulos de seccion */
body .rdist__sec-title{
  text-align:center !important;
  margin-bottom:12px !important;
}
body .rdist__sec-title h2{
  font-size:clamp(24px,3vw,36px) !important;
  margin-bottom:8px !important;
}
body .rdist__sec-title p{
  font-size:16px !important;
  max-width:56ch !important;
  margin:0 auto !important;
}

/* ===== TECHNOLOGY GRID ===== */
body .rdist__tech-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap:20px !important;
  margin-top:32px !important;
}
body .rdist__tech-card{
  position:relative !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r2) !important;
  box-shadow:var(--shadowSoft) !important;
  overflow:hidden !important;
  transition:transform .2s ease, box-shadow .2s ease !important;
}
body .rdist__tech-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:var(--shadow) !important;
}
body .rdist__tech-card img{
  width:100% !important;
  aspect-ratio:4/3 !important;
  object-fit:cover !important;
}
body .rdist__tech-card-body{
  padding:16px 18px !important;
}
body .rdist__tech-card h3{
  font-size:16px !important;
  margin-bottom:6px !important;
  color:var(--ink) !important;
}
body .rdist__tech-card p{
  font-size:13px !important;
  line-height:1.6 !important;
}
body .rdist__tech-card a{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
}

/* ===== ADVANTAGES GRID ===== */
body .rdist__adv-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:20px !important;
  margin-top:32px !important;
}
body .rdist__adv-card{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r2) !important;
  box-shadow:var(--shadowSoft) !important;
  padding:24px !important;
  text-align:center !important;
}
body .rdist__adv-icon{
  width:56px !important;
  height:56px !important;
  margin:0 auto 12px !important;
  border-radius:16px !important;
  background:rgba(0,91,172,.08) !important;
  border:1px solid rgba(0,91,172,.14) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body .rdist__adv-icon svg{
  width:32px !important;
  height:32px !important;
  color:#005bac !important;
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
body .rdist__adv-card h3{
  font-size:15px !important;
  margin-bottom:8px !important;
}
body .rdist__adv-card p{
  font-size:13px !important;
  line-height:1.7 !important;
}

/* ===== KIRAL / SAT SECTIONS ===== */
body .rdist__text-block{
  max-width:72ch !important;
  margin:0 auto !important;
  text-align:center !important;
}
body .rdist__text-block p{
  font-size:16px !important;
  line-height:1.75 !important;
  margin-bottom:12px !important;
}
body .rdist__text-block .rdist__btn{
  margin-top:20px !important;
}

/* ===== FINAL CTA STRIP ===== */
body .rdist__cta{
  padding:56px 0 !important;
  background:linear-gradient(135deg, #005bac 0%, #003d7a 40%, #ce1c76 100%) !important;
  text-align:center !important;
}
body .rdist__cta h2{
  font-size:clamp(22px,3vw,32px) !important;
  color:#fff !important;
  margin-bottom:24px !important;
}
body .rdist__cta-btns{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
}

/* ===== USE CASE GRID (Phase 10) ===== */
body .rdist__usecase-grid{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:1rem !important;
  margin-top:2rem !important;
}
body .rdist__uc-card{
  display:flex !important;
  flex-direction:column !important;
  gap:.25rem !important;
  padding:1.5rem !important;
  background:#fff !important;
  border-radius:var(--r) !important;
  border:1px solid var(--border) !important;
  text-decoration:none !important;
  color:var(--ink) !important;
  transition:box-shadow .2s, transform .2s !important;
}
body .rdist__uc-card:hover{
  box-shadow:var(--shadow) !important;
  transform:translateY(-2px) !important;
}
body .rdist__uc-card strong{
  font-size:1.1rem !important;
  color:var(--rdblue) !important;
}
body .rdist__uc-card span{
  font-size:.9rem !important;
  color:var(--muted) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  body .rdist__adv-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  body .rdist__hero{
    padding:48px 0 40px !important;
  }
  body .rdist__sec,
  body .rdist__sec--alt{
    padding:40px 0 !important;
  }
  body .rdist__cta{
    padding:40px 0 !important;
  }
}

@media (max-width:480px){
  body .rdist__usecase-grid{
    grid-template-columns:1fr !important;
  }
  body .rdist__tech-grid{
    grid-template-columns:1fr !important;
  }
  body .rdist__adv-grid{
    grid-template-columns:1fr !important;
  }
  body .rdist__hero{
    padding:36px 0 32px !important;
  }
  body .rdist__hero h1{
    font-size:26px !important;
  }
  body .rdist__hero-sub{
    font-size:15px !important;
  }
  body .rdist__btn{
    width:100% !important;
    padding:12px 20px !important;
    font-size:14px !important;
  }
  body .rdist__sec,
  body .rdist__sec--alt{
    padding:32px 0 !important;
  }
  body .rdist__wrap{
    padding:0 16px !important;
  }
}