/* =========================================================
   ESPIRAL – ROLAND DG USE CASE LANDING PAGES
   Archivo: /activos/css/roland-usecases.css
   Namespace: .rduc (Roland DG Use Cases)
   Shared across all use case landing pages
   ========================================================= */

body { overflow-x: hidden; }

/* ===== Contenedor principal (full width) ===== */
body .rduc{
  --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 ===== */
body .rduc :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 .rduc p{ color:var(--muted) !important; }
body .rduc p + p{ margin-top:10px !important; }
body .rduc a{ color:inherit !important; text-decoration:none !important; }
body .rduc img{
  max-width:100% !important;
  height:auto !important;
  display:block !important;
  float:none !important;
}

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

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

/* ===== BREADCRUMB ===== */
body .rduc__breadcrumb{
  margin-bottom:20px !important;
}
body .rduc__breadcrumb a{
  font-size:14px !important;
  color:rgba(255,255,255,.75) !important;
  transition:color .15s !important;
}
body .rduc__breadcrumb a:hover{
  color:#fff !important;
}

/* ===== HERO ===== */
body .rduc__hero{
  padding:72px 0 56px !important;
  background:linear-gradient(135deg, #005bac 0%, #003d7a 40%, #ce1c76 100%) !important;
  text-align:center !important;
}
body .rduc__hero h1{
  font-size:clamp(28px,4vw,48px) !important;
  color:#fff !important;
  margin-bottom:16px !important;
}
body .rduc__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 .rduc__hero-btns{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
}

/* ===== BOTONES ===== */
body .rduc__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 .rduc__btn:hover{
  transform:translateY(-2px) !important;
}
body .rduc__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 .rduc__btn--primary:hover{
  box-shadow:0 16px 40px rgba(206,28,118,.35) !important;
}
body .rduc__btn--outline{
  background:transparent !important;
  border:2px solid rgba(255,255,255,.6) !important;
  color:#fff !important;
}
body .rduc__btn--outline:hover{
  border-color:#fff !important;
  background:rgba(255,255,255,.1) !important;
}
/* Botones en hero y CTA: blancos para contraste */
body .rduc__hero .rduc__btn--primary,
body .rduc__cta .rduc__btn--primary{
  background:#fff !important;
  color:#005bac !important;
  box-shadow:0 14px 34px rgba(0,0,0,.2) !important;
}
body .rduc__hero .rduc__btn--primary:hover,
body .rduc__cta .rduc__btn--primary:hover{
  box-shadow:0 16px 40px rgba(0,0,0,.3) !important;
}
body .rduc__hero .rduc__btn--outline,
body .rduc__cta .rduc__btn--outline{
  border-color:#fff !important;
  color:#fff !important;
}
body .rduc__btn--blue{
  background:var(--rdblue) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(0,91,172,.25) !important;
}
body .rduc__btn--blue:hover{
  box-shadow:0 12px 30px rgba(0,91,172,.35) !important;
}

/* ===== SECCIONES ===== */
body .rduc__sec{
  padding:60px 0 !important;
  background:#fff !important;
}
body .rduc__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 .rduc__sec-title{
  text-align:center !important;
  margin-bottom:12px !important;
}
body .rduc__sec-title h2{
  font-size:clamp(24px,3vw,36px) !important;
  margin-bottom:8px !important;
}
body .rduc__sec-title p{
  font-size:16px !important;
  max-width:56ch !important;
  margin:0 auto !important;
}

/* ===== PROBLEM / SOLUTION TEXT ===== */
body .rduc__text-block{
  max-width:72ch !important;
  margin:0 auto !important;
}
body .rduc__text-block p{
  font-size:16px !important;
  line-height:1.75 !important;
  margin-bottom:12px !important;
}
body .rduc__text-block ul{
  list-style:none !important;
  margin-top:16px !important;
}
body .rduc__text-block li{
  padding:8px 0 8px 28px !important;
  position:relative !important;
  font-size:15px !important;
  color:var(--muted) !important;
  line-height:1.6 !important;
}
body .rduc__text-block li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:14px !important;
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:var(--a) !important;
}

/* ===== EQUIPMENT GRID ===== */
body .rduc__eq-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:20px !important;
  margin-top:32px !important;
}
body .rduc__eq-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 .rduc__eq-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:var(--shadow) !important;
}
body .rduc__eq-card img{
  width:100% !important;
  aspect-ratio:4/3 !important;
  object-fit:cover !important;
}
body .rduc__eq-body{
  padding:16px 18px !important;
}
body .rduc__eq-card h3{
  font-size:16px !important;
  margin-bottom:6px !important;
  color:var(--ink) !important;
}
body .rduc__eq-card p{
  font-size:13px !important;
  line-height:1.6 !important;
}
body .rduc__eq-cta{
  display:inline-block !important;
  margin-top:10px !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--rdblue) !important;
}
body .rduc__eq-link{
  display:block !important;
}

/* ===== MATERIALS GRID ===== */
body .rduc__mat-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap:14px !important;
  margin-top:24px !important;
}
body .rduc__mat-card{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:16px 20px !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  transition:border-color .15s, box-shadow .15s !important;
}
body .rduc__mat-card:hover{
  border-color:var(--a) !important;
  box-shadow:var(--shadowSoft) !important;
}
body .rduc__mat-icon{
  font-size:24px !important;
  flex-shrink:0 !important;
}
body .rduc__mat-card span:last-child{
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
}

/* ===== ADVANTAGES GRID ===== */
body .rduc__adv-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:20px !important;
  margin-top:32px !important;
}
body .rduc__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 .rduc__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 .rduc__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 .rduc__adv-card h3{
  font-size:15px !important;
  margin-bottom:8px !important;
}
body .rduc__adv-card p{
  font-size:13px !important;
  line-height:1.7 !important;
}

/* ===== USECASE LINKS ===== */
body .rduc__usecase-links{
  margin-top:24px !important;
  text-align:center !important;
}
body .rduc__usecase-links a{
  display:inline-block !important;
  padding:10px 20px !important;
  margin:6px !important;
  background:var(--bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--rdblue) !important;
  transition:border-color .15s, background .15s !important;
}
body .rduc__usecase-links a:hover{
  border-color:var(--rdblue) !important;
  background:rgba(0,91,172,.06) !important;
}

/* ===== HUB LINK ===== */
body .rduc__hub-link{
  text-align:center !important;
  margin-top:32px !important;
  padding:24px !important;
}
body .rduc__hub-link a{
  font-size:16px !important;
  font-weight:700 !important;
  color:var(--rdblue) !important;
  transition:color .15s !important;
}
body .rduc__hub-link a:hover{
  color:var(--a) !important;
}

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

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width:1024px){
  body .rduc__eq-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
}

/* Mobile landscape */
@media (max-width:768px){
  body .rduc__eq-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  body .rduc__adv-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  body .rduc__hero{
    padding:48px 0 40px !important;
  }
  body .rduc__sec,
  body .rduc__sec--alt{
    padding:40px 0 !important;
  }
  body .rduc__cta{
    padding:40px 0 !important;
  }
}

/* Mobile portrait */
@media (max-width:480px){
  body .rduc__eq-grid{
    grid-template-columns:1fr !important;
  }
  body .rduc__adv-grid{
    grid-template-columns:1fr !important;
  }
  body .rduc__mat-grid{
    grid-template-columns:1fr !important;
  }
  body .rduc__hero{
    padding:36px 0 32px !important;
  }
  body .rduc__hero h1{
    font-size:24px !important;
  }
  body .rduc__hero-sub{
    font-size:15px !important;
  }
  body .rduc__btn{
    width:100% !important;
    padding:12px 20px !important;
    font-size:14px !important;
  }
  body .rduc__sec,
  body .rduc__sec--alt{
    padding:32px 0 !important;
  }
  body .rduc__wrap{
    padding:0 16px !important;
  }
}