/* rediseno.css — /rediseno-web/ como experiencia de scroll cinematografica.
   Patrones de la referencia (hero kinetico, vitals en verde, marquee, sistema)
   adaptados a la marca abismo de vidrio. Namespace rw-. */

.rw-page {
  --rw-abismo:#04050b; --rw-ink:#04070f; --rw-azure:#1e7fe0; --rw-aqua:#8cecff;
  --rw-ice:#eafbff; --rw-gold:#F2B705; --rw-green:#4ade80;
  --rw-mute:rgba(234,251,255,.68); --rw-dim:rgba(234,251,255,.42);
  --rw-border:rgba(255,255,255,.14);
  --rw-glass:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  --rw-glass-solid:rgba(10,19,38,.55);
  --rw-mono:ui-monospace,Menlo,Consolas,monospace;
  background:var(--rw-abismo);
}

/* sin efectos de scroll: el contenido esta siempre visible */

/* ── secciones base ── */
.rw-sec { position:relative; padding:clamp(4rem,9vw,7.5rem) 0; overflow:hidden; }
.rw-sec .container { position:relative; z-index:1; }
.rw-glow { position:absolute; inset:0; z-index:0; pointer-events:none; }

.rw-h2 { margin:0 0 .8rem; font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.04; letter-spacing:-.02em;
  font-weight:800; color:#fff; }
.rw-h2 em { font-style:normal; background:linear-gradient(100deg,#fff 40%,var(--rw-aqua));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rw-lead { margin:0; max-width:62ch; font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.6; color:var(--rw-mute); }
.rw-head--center { text-align:center; }
.rw-head--center .rw-lead { margin-inline:auto; }

/* ── HERO ── */
.rw-hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  padding:clamp(5rem,10vh,7rem) 0 clamp(3rem,7vh,5rem); }
.rw-hero .liquid-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.rw-hero__scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(4,5,11,.55) 0%,rgba(4,5,11,.25) 40%,var(--rw-abismo) 100%); }
.rw-hero .container { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center; }
.rw-display { margin:0 0 .4rem; font-weight:800; text-transform:uppercase; line-height:.92; letter-spacing:-.03em;
  font-size:clamp(2.6rem,7vw,5.6rem); }
.rw-display b { display:block; font-weight:800;
  background:linear-gradient(100deg,#fff 30%,var(--rw-aqua) 85%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rw-display i { display:block; font-style:normal; color:transparent;
  -webkit-text-stroke:1.5px rgba(140,236,255,.4); opacity:.75; }
.rw-hero h1 { margin:.6rem 0 0; font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:700; color:var(--rw-ice); }
.rw-hero__sub { margin:.9rem 0 0; max-width:56ch; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.6; color:var(--rw-mute); }
.rw-hero__cta { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }

/* mock de navegador con vitals */
.rw-browser { border-radius:16px; overflow:hidden; border:1px solid var(--rw-border);
  background:var(--rw-glass-solid); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14); }
.rw-browser__bar { display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem;
  background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08); }
.rw-browser__bar i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22); flex:none; }
.rw-browser__bar em { margin-left:.55rem; font-style:normal; font-family:var(--rw-mono); font-size:.74rem; color:var(--rw-mute); }
.rw-browser__body { padding:clamp(1rem,2vw,1.5rem); display:grid; gap:1rem; }
.rw-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.rw-tags span { font-family:var(--rw-mono); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rw-aqua); padding:.3rem .7rem; border-radius:999px; border:1px solid rgba(140,236,255,.3);
  background:rgba(140,236,255,.06); }
.rw-pills { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.rw-pill { border-radius:12px; padding:.8rem .9rem; background:rgba(255,255,255,.04);
  border:1px solid rgba(74,222,128,.22); }
.rw-pill b { display:block; font-size:clamp(1.3rem,2vw,1.7rem); font-weight:800; color:var(--rw-green);
  text-shadow:0 0 18px rgba(74,222,128,.35); }
.rw-pill span { font-family:var(--rw-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rw-dim); }

/* ── MARQUEE ── */
.rw-marquee { position:relative; padding:1.1rem 0; border-block:1px solid rgba(255,255,255,.07);
  overflow:hidden; background:rgba(255,255,255,.02); }
.rw-marquee__track { display:flex; align-items:center; gap:2.2rem; width:max-content;
  animation:rwMarquee 36s linear infinite; will-change:transform; }
.rw-marquee__track span { font-family:var(--rw-mono); font-size:.82rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rw-mute); white-space:nowrap; }
.rw-marquee__track i { font-style:normal; color:var(--rw-gold); font-size:.7rem; }
@keyframes rwMarquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }

/* ── SEÑALES ── */
.rw-signals { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.2rem); margin-top:clamp(1.6rem,3vw,2.6rem); }
.rw-signal { border-radius:16px; padding:clamp(1rem,1.8vw,1.4rem);
  background:var(--rw-glass); border:1px solid var(--rw-border); }
.rw-signal h3 { margin:0 0 .4rem; font-size:1.02rem; font-weight:800; color:#fff; }
.rw-signal p { margin:0; font-size:.92rem; line-height:1.55; color:var(--rw-mute); }

/* ── VITALS ── */
.rw-vitals { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.6vw,1.2rem); margin-top:clamp(1.8rem,3.4vw,2.8rem); }
.rw-vital { border-radius:18px; padding:clamp(1.1rem,2vw,1.6rem); text-align:left;
  background:var(--rw-glass-solid); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(74,222,128,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.rw-vital__value { margin:0; font-size:clamp(2.1rem,3.6vw,3rem); font-weight:800; letter-spacing:-.02em;
  color:var(--rw-green); text-shadow:0 0 24px rgba(74,222,128,.35); }
.rw-vital__name { margin:.15rem 0 0; font-family:var(--rw-mono); font-size:.8rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.rw-vital__meta { margin:.5rem 0 0; font-family:var(--rw-mono); font-size:.7rem; color:var(--rw-dim); }
.rw-vital__d { margin:.55rem 0 0; font-size:.86rem; line-height:1.5; color:var(--rw-mute); }
.rw-magic { margin:clamp(1.8rem,3.4vw,2.8rem) auto 0; max-width:820px; border-radius:18px;
  padding:clamp(1.2rem,2.2vw,1.8rem); background:linear-gradient(165deg,rgba(11,26,58,.7),rgba(4,7,15,.85));
  border:1px solid rgba(140,236,255,.16); }
.rw-magic h3 { margin:0 0 .5rem; font-size:1.15rem; font-weight:800; color:#fff; }
.rw-magic p { margin:0; font-size:.98rem; line-height:1.62; color:var(--rw-mute); }
.rw-magic b { color:var(--rw-ice); font-weight:700; }

/* ── ANTES / DESPUÉS ── */
.rw-compare { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.2vw,1.8rem); margin-top:clamp(1.8rem,3.4vw,2.8rem); }
.rw-cmp__label { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--rw-mono);
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.7rem; }
.rw-cmp--before .rw-cmp__label { color:rgba(255,255,255,.55); }
.rw-cmp--after .rw-cmp__label { color:var(--rw-green); }
.rw-cmp--before .rw-browser { filter:saturate(.4) brightness(.82); }
.rw-skel { display:grid; gap:.55rem; }
.rw-skel i { display:block; height:12px; border-radius:6px; background:rgba(255,255,255,.08); }
.rw-skel i:nth-child(1) { width:55%; height:22px; }
.rw-skel i:nth-child(2) { width:85%; }
.rw-skel i:nth-child(3) { width:70%; }
.rw-cmp--after .rw-skel i { background:linear-gradient(90deg,rgba(30,127,224,.4),rgba(140,236,255,.25)); }
.rw-cmp--after .rw-skel i:nth-child(1) { background:linear-gradient(100deg,var(--rw-azure),var(--rw-aqua)); }
.rw-cmp__list { margin:.9rem 0 0; padding:0; list-style:none; display:grid; gap:.45rem; }
.rw-cmp__list li { display:flex; align-items:baseline; gap:.55rem; font-size:.92rem; line-height:1.5; color:var(--rw-mute); }
.rw-cmp__list li::before { font-family:var(--rw-mono); font-size:.8rem; flex:none; }
.rw-cmp--before .rw-cmp__list li::before { content:"✕"; color:rgba(255,120,120,.75); }
.rw-cmp--after .rw-cmp__list li::before { content:"✓"; color:var(--rw-green); }
.rw-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.2rem); margin-top:clamp(1.8rem,3vw,2.4rem); }
.rw-step { border-radius:16px; padding:clamp(1rem,1.8vw,1.4rem); background:var(--rw-glass); border:1px solid var(--rw-border); }
.rw-step__n { font-family:var(--rw-mono); font-size:.72rem; color:var(--rw-aqua); display:block; margin-bottom:.45rem; }
.rw-step h3 { margin:0 0 .35rem; font-size:1rem; font-weight:800; color:#fff; }
.rw-step p { margin:0; font-size:.9rem; line-height:1.55; color:var(--rw-mute); }

/* ── SISTEMA ── */
.rw-system { display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.8rem,1.5vw,1.1rem); margin-top:clamp(1.8rem,3.4vw,2.8rem); }
.rw-sys { border-radius:18px; padding:clamp(1rem,1.8vw,1.4rem); background:var(--rw-glass-solid);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--rw-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1); display:flex; flex-direction:column; gap:.7rem; }
.rw-sys--type { grid-column:span 2; }
.rw-sys--pal { grid-column:span 2; }
.rw-sys--comp { grid-column:span 2; }
.rw-sys--grid { grid-column:span 3; }
.rw-sys--extra { grid-column:span 3; }
.rw-sys__label { font-family:var(--rw-mono); font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rw-dim); }
.rw-sys__label b { color:var(--rw-aqua); font-weight:700; }
.rw-sys__aa { font-size:clamp(3rem,5vw,4.4rem); font-weight:800; line-height:1; color:#fff; letter-spacing:-.03em; }
.rw-sys__type-d { font-size:.82rem; color:var(--rw-mute); line-height:1.5; }
.rw-sys__type-d code { font-family:var(--rw-mono); color:var(--rw-aqua); font-size:.78rem; }
.rw-swatches { display:grid; gap:.45rem; }
.rw-swatch { display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:var(--rw-mute); }
.rw-swatch i { width:26px; height:26px; border-radius:8px; flex:none; border:1px solid rgba(255,255,255,.18); }
.rw-swatch code { font-family:var(--rw-mono); font-size:.72rem; color:var(--rw-dim); margin-left:auto; }
.rw-sys__row { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.rw-mini-card { border-radius:12px; padding:.6rem .8rem; background:var(--rw-glass); border:1px solid var(--rw-border);
  font-size:.78rem; color:var(--rw-mute); }
.rw-devices { display:flex; align-items:flex-end; gap:.7rem; height:86px; }
.rw-devices i { border-radius:8px 8px 0 0; background:linear-gradient(180deg,rgba(30,127,224,.5),rgba(30,127,224,.08));
  border:1px solid rgba(140,236,255,.25); border-bottom:none; }
.rw-devices i:nth-child(1) { width:52%; height:100%; }
.rw-devices i:nth-child(2) { width:30%; height:74%; }
.rw-devices i:nth-child(3) { width:18%; height:56%; }
.rw-sys__foot { font-size:.82rem; color:var(--rw-mute); line-height:1.5; }

/* ── OBJECIONES ── */
.rw-objs { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.2rem); margin-top:clamp(1.6rem,3vw,2.6rem); }
.rw-obj { border-radius:18px; padding:clamp(1.1rem,2vw,1.6rem); background:var(--rw-glass); border:1px solid var(--rw-border); }
.rw-obj h3 { margin:0 0 .45rem; font-size:1.05rem; font-weight:800; color:var(--rw-gold); }
.rw-obj p { margin:0; font-size:.94rem; line-height:1.58; color:var(--rw-mute); }

/* ── CTA FINAL ── */
.rw-closer { text-align:center; }
.rw-closer .rw-hero__cta { justify-content:center; margin-top:1.6rem; }

/* ── glows por seccion (degradados, sin costuras) ── */
.rw-glow--vitals { background:radial-gradient(46% 42% at 50% 24%, rgba(74,222,128,.07), transparent 62%); }
.rw-glow--compare { background:radial-gradient(46% 40% at 50% 30%, rgba(30,127,224,.12), transparent 62%); }
.rw-glow--system { background:radial-gradient(44% 40% at 50% 28%, rgba(242,183,5,.07), transparent 60%); }
.rw-glow--closer { background:radial-gradient(50% 58% at 50% 100%, rgba(30,127,224,.28), rgba(140,236,255,.1) 42%, transparent 70%); }

/* ── fondos con textura en secciones con mucho texto (funden al abismo) ── */
.rw-sec--senales::before, .rw-sec--sistema::before, .rw-sec--humo::before, .rw-sec--faq::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
.rw-sec--senales::before {
  background:linear-gradient(180deg,#04050b 0%,rgba(4,5,11,0) 16%,rgba(4,5,11,0) 84%,#04050b 100%),
    linear-gradient(180deg,rgba(4,5,11,.87),rgba(4,5,11,.9)), url(/assets/liquid/bg-trabajos.webp) center/cover no-repeat;
  opacity:.55; }
/* sistema: gradiente ambar animado (animated-gradient.js) en vez del still del matraz */
.rw-sec--sistema .rw-grad { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.32; }
.rw-sec--sistema::before {
  z-index:1;
  background:linear-gradient(180deg,#04050b 0%,rgba(4,5,11,0) 16%,rgba(4,5,11,0) 84%,#04050b 100%),
    linear-gradient(90deg,rgba(4,7,15,.9) 30%,rgba(4,7,15,.4) 100%);
  opacity:.6; }
.rw-sec--humo::before {
  background:linear-gradient(180deg,#04050b 0%,rgba(4,5,11,0) 16%,rgba(4,5,11,0) 84%,#04050b 100%),
    linear-gradient(180deg,rgba(4,5,11,.82),rgba(4,5,11,.88)), url(/assets/liquid/bg-fundador.webp) center/cover no-repeat;
  opacity:.6; }
.rw-sec--faq::before {
  background:linear-gradient(180deg,#04050b 0%,rgba(4,5,11,0) 16%,rgba(4,5,11,0) 84%,#04050b 100%),
    linear-gradient(180deg,rgba(4,5,11,.88),rgba(4,5,11,.92)), url(/assets/liquid/bg-hero.webp) center/cover no-repeat;
  opacity:.5; }
/* olas de canvas del CTA final (wavy-cta.js) */
.rw-closer .rw-waves { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.rw-closer .container { position:relative; z-index:1; }

/* ── responsive ── */
@media (max-width: 980px) {
  .rw-hero .container { grid-template-columns:1fr; }
  .rw-hero__mock { max-width:520px; }
  .rw-vitals { grid-template-columns:repeat(2,1fr); }
  .rw-system { grid-template-columns:repeat(2,1fr); }
  .rw-sys--type, .rw-sys--pal, .rw-sys--comp, .rw-sys--grid, .rw-sys--extra { grid-column:span 1; }
  .rw-sys--grid, .rw-sys--extra { grid-column:span 2; }
}
@media (max-width: 760px) {
  .rw-signals, .rw-objs, .rw-steps { grid-template-columns:1fr; }
  .rw-compare { grid-template-columns:1fr; }
  .rw-vitals { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .rw-vitals { grid-template-columns:1fr; }
  .rw-system { grid-template-columns:1fr; }
  .rw-sys--grid, .rw-sys--extra { grid-column:span 1; }
  .rw-pills { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-marquee__track { animation:none; }
  .rw-page .dws-reveal { opacity:1; transform:none; transition:none; }
}