/* dw-scroll.css — desarrollo web como experiencia de scroll cinematografico.
   Namespace dws-, aislado del dw- viejo. Reusa .btn de site.css. */

.dws-page {
  --abismo:#04050b; --ink:#04070f; --azure:#1e7fe0; --aqua:#8cecff; --ice:#eafbff;
  --gold:#F2B705; --gold-2:#D9A404;
  --mute:rgba(234,251,255,.7); --dim:rgba(234,251,255,.44);
  --border:rgba(255,255,255,.12);
  --glass:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  --glass-solid:rgba(10,19,38,.55);
  --blur:blur(14px) saturate(150%);
  background:var(--abismo); color:var(--ice);
}
.dws-page main { position:relative; z-index:1; }
.dws-page a { color:inherit; }

/* ── animaciones ──
   Reveals suaves al entrar cada bloque (dw-scroll.js pone .is-in y el
   gate html.dws-anim, asi sin JS todo queda visible) mas ambiente:
   fondos con deriva lenta, brillo del hero y hover en cards.
   Sin pin ni scrolljacking. */
html.dws-anim .dws-reveal { opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.28,1); }
html.dws-anim .dws-reveal[data-d="1"] { transition-delay:.1s; }
html.dws-anim .dws-reveal[data-d="2"] { transition-delay:.22s; }
html.dws-anim .dws-reveal[data-d="3"] { transition-delay:.34s; }
html.dws-anim .dws-reveal.is-in { opacity:1; transform:none; }

@keyframes dwsDrift { from { transform:scale(1) translateY(0); } to { transform:scale(1.08) translateY(-1.5%); } }
.dws-bg { animation:dwsDrift 26s ease-in-out infinite alternate; will-change:transform; }

@keyframes dwsSheen { from { background-position:0% 50%; } to { background-position:120% 50%; } }
.dws-hero h1 { background-size:220% 100%; animation:dwsSheen 9s ease-in-out infinite alternate; }

@keyframes dwsGridPulse { from { opacity:.3; } to { opacity:.6; } }
.dws-grid-lines { animation:dwsGridPulse 7s ease-in-out infinite alternate; }

@keyframes dwsFlow { from { background-position:200% 0; } to { background-position:-200% 0; } }

.dws-pillar, .dws-feat { transition:transform .35s cubic-bezier(.22,.9,.28,1), border-color .35s, box-shadow .35s; }
.dws-pillar:hover, .dws-feat:hover { transform:translateY(-4px); border-color:rgba(140,236,255,.45);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 24px rgba(140,236,255,.12), inset 0 1px 0 rgba(255,255,255,.18); }

@media (prefers-reduced-motion:reduce) {
  .dws-bg, .dws-hero h1, .dws-grid-lines, .dws-feat::before { animation:none; }
  .dws-pillar, .dws-feat { transition:none; }
}

/* ── base de seccion full bleed ── */
.dws-sec { position:relative; overflow:hidden; padding:clamp(4.5rem,14vh,10rem) 0; }
.dws-wrap { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 clamp(1.4rem,5vw,3rem); }
.dws-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.9; }
.dws-grid-lines { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(140,236,255,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(140,236,255,.05) 0 1px, transparent 1px 48px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%); }

.dws-kicker { display:inline-flex; align-items:center; gap:.5rem; font-family:ui-monospace,Menlo,monospace;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--aqua); }
.dws-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 12px var(--aqua); }
.dws-h { font-weight:800; letter-spacing:-.03em; line-height:1.04; color:#fff; }
.dws-lead { color:var(--mute); font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.6; max-width:56ch; }

/* ── HERO ── */
.dws-hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.dws-hero .liquid-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.dws-hero__scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 20% 30%, transparent, rgba(4,5,11,.45) 72%),
    linear-gradient(180deg, rgba(4,5,11,.35) 0%, rgba(4,5,11,.2) 45%, rgba(4,5,11,.9) 100%); }
.dws-hero__inner { position:relative; z-index:2; max-width:1120px; margin:0 auto; width:100%; padding:0 clamp(1.4rem,5vw,3rem); }
.dws-hero__crumb { font-family:ui-monospace,Menlo,monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua); }
.dws-hero__crumb a { border-bottom:1px solid transparent; }
.dws-hero__crumb a:hover { border-bottom-color:var(--aqua); }
.dws-hero h1 { font-size:clamp(2.7rem,8.5vw,6.2rem); font-weight:800; letter-spacing:-.035em; line-height:.97; margin:1.1rem 0 0;
  background:linear-gradient(100deg,#fff 52%,var(--aqua)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dws-hero__sub { margin:1.5rem 0 0; max-width:50ch; font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.5; color:var(--mute); }
.dws-hero__cta { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }

/* ── STATEMENT / promesa ── */
.dws-statement { min-height:88svh; display:flex; align-items:center; }
.dws-statement .dws-grad { position:absolute; inset:0; z-index:0; width:100%; height:100%; opacity:.42; }
.dws-statement .dws-scrim { position:absolute; inset:0; z-index:1;
  background:radial-gradient(90% 80% at 30% 50%, rgba(4,5,11,.55), rgba(4,5,11,.9)); }
.dws-statement__t { position:relative; z-index:2; font-size:clamp(2.2rem,6.4vw,4.8rem); font-weight:800; letter-spacing:-.03em; line-height:1.04; max-width:18ch; color:#fff; }
.dws-statement__t em { font-style:normal;
  background:linear-gradient(100deg,var(--aqua),var(--azure)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ── PROCESO, lista apilada sin pin ── */
.dws-process { position:relative; overflow:hidden; padding:clamp(4.5rem,14vh,10rem) 0;
  background:radial-gradient(120% 60% at 50% 0%, #071227 0%, #05070f 55%, #04050b 100%); }
.dws-process__pin { position:static; }
.dws-process__head { position:relative; z-index:3; max-width:1120px; margin:0 auto; width:100%; padding:0 clamp(1.4rem,5vw,3rem) 1.5rem; }
.dws-process__stage { position:relative; z-index:2; max-width:1120px; margin:0 auto; width:100%; padding:0 clamp(1.4rem,5vw,3rem); }
.dws-steps { position:relative; }
.dws-pstep { display:flex; flex-direction:column; justify-content:center; padding:clamp(1.4rem,3vw,2.2rem) 0;
  border-top:1px solid rgba(255,255,255,.08); }
.dws-pstep:first-child { border-top:none; }
.dws-pstep__n { font-family:ui-monospace,Menlo,monospace; font-size:clamp(2rem,4.4vw,3.2rem); font-weight:700; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(100deg,rgba(140,236,255,.9),rgba(30,127,224,.5)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dws-pstep__t { margin:.4rem 0 0; font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; letter-spacing:-.02em; color:#fff; }
.dws-pstep__d { margin:.7rem 0 0; max-width:60ch; font-size:clamp(1.02rem,1.5vw,1.22rem); line-height:1.55; color:var(--mute); }

/* ── VELOCIDAD numero gigante ── */
.dws-velocity { text-align:center; }
.dws-velocity .dws-grid-lines { opacity:.35; }
.dws-velocity__big { font-size:clamp(3.2rem,13vw,10rem); font-weight:800; letter-spacing:-.05em; line-height:.9; color:#fff; }
.dws-velocity__big em { font-style:normal;
  background:linear-gradient(100deg,#fff,var(--aqua)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dws-velocity__sub { margin:1.4rem auto 0; max-width:40ch; color:var(--mute); font-size:clamp(1.05rem,1.6vw,1.3rem); }
.dws-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem); margin-top:clamp(2.5rem,6vw,4rem); text-align:left; }
.dws-pillar { background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--border);
  border-radius:20px; padding:clamp(1.4rem,2.5vw,2rem); box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); }
.dws-pillar__t { font-size:1.25rem; font-weight:800; color:#fff; }
.dws-pillar__d { margin:.6rem 0 0; color:var(--mute); font-size:.98rem; line-height:1.55; }

/* ── CHAPTER (google, seguridad, migracion) ── */
.dws-chapter .dws-glow { position:absolute; inset:0; z-index:0; pointer-events:none; }
.dws-chapter__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.dws-chapter__head { max-width:20ch; }
.dws-chapter__head .dws-h { font-size:clamp(2rem,4.4vw,3.4rem); margin:1rem 0 0; }
.dws-chapter__head .dws-lead { margin-top:1.1rem; }
.dws-feats { display:flex; flex-direction:column; gap:1rem; }
.dws-feat { position:relative; background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:16px; padding:1.2rem 1.3rem 1.3rem; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12); }
.dws-feat::before { content:""; position:absolute; left:0; top:0; height:2px; width:100%; opacity:.7;
  background:linear-gradient(90deg,transparent,var(--aqua),transparent); background-size:200% 100%;
  animation:dwsFlow 6s linear infinite; }
.dws-feat__t { font-size:1.12rem; font-weight:800; color:#fff; }
.dws-feat__d { margin:.5rem 0 0; color:var(--mute); font-size:.96rem; line-height:1.5; }
.dws-feat ul { margin:.6rem 0 0; padding:0; list-style:none; display:grid; gap:.4rem; }
.dws-feat ul li { position:relative; padding-left:1.4rem; color:var(--mute); font-size:.96rem; line-height:1.45; }
.dws-feat ul li::before { content:""; position:absolute; left:0; top:.45em; width:8px; height:8px; border-radius:2px; background:var(--aqua); box-shadow:0 0 8px rgba(140,236,255,.6); }
.dws-chapter--alt .dws-chapter__grid { grid-template-columns:1fr 1fr; direction:rtl; }
.dws-chapter--alt .dws-chapter__grid > * { direction:ltr; }

/* ── COMPARATIVA ── */
.dws-compare .dws-head { text-align:center; max-width:640px; margin:0 auto clamp(2rem,5vw,3rem); }
.dws-compare .dws-h { font-size:clamp(2rem,4.6vw,3.4rem); margin:1rem 0 0; }
.dws-cmp { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,1.8rem); max-width:920px; margin:0 auto; }
.dws-cmp__box { background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--border);
  border-radius:22px; padding:clamp(1.5rem,3vw,2.2rem); box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.dws-cmp__box--yes { border-color:rgba(140,236,255,.35); }
.dws-cmp__t { display:flex; align-items:center; gap:.6rem; font-size:1.3rem; font-weight:800; color:#fff; margin:0 0 1.1rem; }
.dws-cmp__t svg { width:22px; height:22px; }
.dws-cmp__box--yes .dws-cmp__t svg { color:var(--aqua); }
.dws-cmp__box--no .dws-cmp__t svg { color:var(--dim); }
.dws-cmp ul { margin:0; padding:0; list-style:none; display:grid; gap:.75rem; }
.dws-cmp li { position:relative; padding-left:1.9rem; color:var(--mute); font-size:1.02rem; line-height:1.45; }
.dws-cmp__box--yes li::before { content:""; position:absolute; left:0; top:.15em; width:18px; height:18px; border-radius:50%;
  background:rgba(140,236,255,.14); box-shadow:inset 0 0 0 1px rgba(140,236,255,.4); }
.dws-cmp__box--yes li::after { content:""; position:absolute; left:5px; top:.5em; width:8px; height:4px; border-left:2px solid var(--aqua); border-bottom:2px solid var(--aqua); transform:rotate(-45deg); }
.dws-cmp__box--no li::before { content:""; position:absolute; left:1px; top:.55em; width:14px; height:2px; background:var(--dim); border-radius:2px; }

/* ── FAQ ── */
.dws-faq2 .dws-head { max-width:640px; margin:0 auto clamp(1.6rem,4vw,2.4rem); text-align:center; }
.dws-faq2 .dws-h { font-size:clamp(1.9rem,4.4vw,3rem); margin:1rem 0 0; }
.dws-acc { max-width:820px; margin:0 auto; display:grid; gap:.7rem; }
.dws-acc details { background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; transition:border-color .3s; }
.dws-acc details[open] { border-color:rgba(140,236,255,.4); }
.dws-acc summary { list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-weight:700; color:#fff; font-size:1.05rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dws-acc summary::-webkit-details-marker { display:none; }
.dws-acc summary::after { content:"+"; color:var(--aqua); font-size:1.4rem; font-weight:400; line-height:1; transition:transform .3s; }
.dws-acc details[open] summary::after { transform:rotate(45deg); }
.dws-acc p { margin:0; padding:0 1.3rem 1.2rem; color:var(--mute); font-size:1rem; line-height:1.6; }

/* ── CLOSER ── */
.dws-closer { position:relative; min-height:88svh; display:flex; align-items:center; text-align:center; overflow:hidden; }
.dws-closer .dws-waves { position:absolute; inset:0; z-index:0; width:100%; height:100%; }
.dws-closer__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,5,11,.9) 18%, rgba(4,5,11,.45) 100%); }
.dws-closer__inner { position:relative; z-index:2; max-width:800px; margin:0 auto; padding:0 clamp(1.4rem,5vw,3rem); width:100%; }
.dws-closer h2 { font-size:clamp(2.4rem,6vw,4.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.02; color:#fff; }
.dws-closer__sub { margin:1.3rem auto 0; max-width:46ch; color:var(--mute); font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; }
.dws-closer__cta { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:2.2rem; }

/* ── responsive ── */
@media (max-width:900px){
  .dws-chapter__grid, .dws-chapter--alt .dws-chapter__grid { grid-template-columns:1fr; direction:ltr; gap:1.6rem; }
  .dws-pillars { grid-template-columns:1fr; }
  .dws-cmp { grid-template-columns:1fr; }
}