/* ========== 0) RESET & BASE ========== */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: #fff;
  background: #181818;
  font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #8ab8ff; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid #4da3ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  * { animation: none; transition: none; scroll-behavior: auto; }
}

/* ========== 1) TOKENS ========== */
:root{
  --bg:#181818; --bg-2:#1e1e1e; --bg-3:#232323;
  --txt:#ffffff; --muted:#cfcfcf;
  --primary:#1e80ff; --primary-2:#1456ad;
  --accent:#25d366;  /* WhatsApp */
  --border:#2a2a2a;
  --radius:14px;
  --shadow-1:0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.35);
}

/* ========== 2) CONTENEDOR GLOBAL (95% / 1200px) ========== */
#contenido-principal > section,
#contenido-principal > nav,
#contenido-principal > aside {
  width: min(1200px, 95%);
  margin-inline: auto;
  padding-inline: 0;
}

/* ========== 3) BOTONES (BEM) ========== */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.4rem; border: 0; border-radius: 10px;
  font-weight: 700; letter-spacing: .2px; cursor: pointer;
  text-decoration: none; color: #111;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(30,128,255,.28); }
.btn--primary:hover { background: var(--primary-2); }
.btn--wa { background: var(--accent); color: #0f2a18; box-shadow: 0 4px 14px rgba(37,211,102,.35); }
.btn--pulse { position: relative; }
.btn--pulse::after{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  box-shadow: 0 0 0 0 rgba(37,211,102,.45);
  animation: btnPulse 1.9s ease-out infinite;
}
@keyframes btnPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)} 70%{box-shadow:0 0 0 18px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }

/* ========== 4) BREADCRUMBS ========== */
.dw-breadcrumbs { padding: 10px 0; color: var(--muted); font-size: 14px; }
.dw-breadcrumbs__list { display:flex; gap:8px; list-style:none; padding:0; margin:0; align-items:center; }
.dw-breadcrumbs__item:not(:last-child)::after { content:"›"; margin-inline:8px; color:#8aa9d6; }
.dw-breadcrumbs__link { color:#8ab8ff; }

/* ========== 5) HERO ========== */
.dw-hero { position:relative; background:var(--bg-2); padding:64px 0; overflow:hidden; }
.dw-hero__content {
  width: min(1200px, 95%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.dw-hero__content > * { flex: 1 1 420px; }
.dw-hero__title { font-weight:800; font-size: clamp(28px, 4.2vw, 44px); margin:0 0 12px; color:#fff; }
.dw-hero__text { font-size: clamp(15px,1.7vw,18px); max-width:720px; color:var(--muted); margin:0; }
.dw-hero__cta { margin-top: 22px; }
.dw-hero__figure { max-width: 580px; width:100%; border-radius:16px; overflow:hidden; box-shadow: var(--shadow-1); }
.hero-bg-icon { position:absolute; left:2%; bottom:-6rem; font-size:22rem; color:rgba(255,255,255,.03); pointer-events:none; user-select:none; }
@media (max-width:980px){ .hero-bg-icon{ font-size:18rem; bottom:-4rem; } }

/* ========== 6) BENEFICIOS (Flex) ========== */
.dw-beneficios { background: var(--bg-3); padding:48px 0; }
#titulo-beneficios {
  width: min(1200px, 95%); margin: 0 auto 22px;
  font-size: clamp(22px, 3vw, 32px); color:#fff; text-align: left;
}
.dw-beneficios__grid {
  width: min(1200px, 95%); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 18px;
}
.dw-beneficio {
  flex: 1 1 260px; max-width: 360px;
  background: var(--bg-2); border-radius: var(--radius);
  padding: 20px 18px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 8px;
}
.dw-icon { font-size: 28px; color: var(--primary); filter: drop-shadow(0 0 6px rgba(30,128,255,.35)); }
.dw-beneficio h3 { margin: 6px 0 4px; font-size: 18px; color:#fff; }
.dw-beneficio p  { margin: 0; font-size: 15px; color: var(--muted); }

/* ========== 7) PROCESO (Flex + counter) ========== */
.dw-proceso { padding: 56px 0; }
#titulo-proceso {
  width: min(1200px, 95%); margin: 0 auto 26px;
  font-size: clamp(22px, 3vw, 34px); color:#fff; text-align: center;
}
.dw-pasos {
  width: min(1200px, 95%); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 18px;
  list-style: none; padding: 0;
  counter-reset: paso;
}
.dw-paso {
  position: relative;
  flex: 1 1 260px; max-width: 360px;
  background: var(--bg-2); border-radius: 14px;
  padding: 22px 18px 20px 18px; box-shadow: var(--shadow-1);
}
.dw-paso::before{
  counter-increment: paso; content: counter(paso);
  position: absolute; top: 12px; left: 12px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; background: rgba(30,128,255,.12);
  color: var(--primary); font-weight: 800; font-size: 17px;
}
.dw-paso h3 { margin: 10px 0 6px; font-size: 18px; color:#fff; }
.dw-paso p  { margin: 0; font-size: 15px; color: var(--muted); }

/* ========== 8) FAQ ========== */
.dw-faq { padding: 64px 0 16px; width: min(900px, 95%); margin-inline: auto; }
.dw-faq #titulo-faq { font-size: clamp(20px, 2.6vw, 30px); margin: 0 0 16px; color:#fff; }
.dw-faq details{ background:var(--bg-2); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin:0 0 10px; }
.dw-faq summary{ cursor:pointer; font-weight:700; color:#fff; position:relative; padding-right:28px; list-style:none; }
.dw-faq summary::-webkit-details-marker{ display:none; }
.dw-faq summary::after{ content:"▾"; position:absolute; right:4px; top:0; color:#8ab8ff; transition:transform .2s ease; }
.dw-faq details[open] summary::after{ transform: rotate(180deg); }
.dw-faq p { margin:10px 0 0; color:var(--muted); }
.dw-faq__cta { margin-top: 14px; }

/* ========== 9) SERVICIOS RELACIONADOS & CTA ========== */
.dw-relacionados { width: min(1200px, 95%); margin-inline: auto; padding: 0 0 16px; }
#titulo-relacionados { font-size: clamp(18px, 2.2vw, 24px); margin: 0 0 10px; color:#fff; }
.dw-relacionados__lista { display: flex; flex-wrap: wrap; gap: 10px; list-style:none; padding:0; margin:0; }
.dw-relacionados__lista a {
  display:inline-block; padding:10px 12px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; color: #cfe2ff;
}
.dw-relacionados__lista a:hover { background: #20314a; border-color: #2f4668; text-decoration: none; }

.dw-cta-final {
  width: min(1200px, 95%);
  margin-inline:auto;
  background: var(--bg-2);
  padding:48px 0 64px;
  text-align:center;
}
#titulo-cta { font-size: clamp(22px, 3vw, 32px); margin: 0 0 16px; color:#fff; }