/* ============================================================
   MIGA LAB — theme-glass.css
   Skin oscuro "Abismo de vidrio" (liquid glass) sobre site.css.
   Carga DESPUÉS de site.css, así gana en la cascada. No cambia
   contenido, solo diseño. Reversible quitando este link.
============================================================ */

:root {
  /* Paleta Abismo de vidrio */
  --abismo:   #04050b;
  --abismo-2: #081026;
  --panel:    #0a1326;   /* superficie sólida oscura para cards que no pueden ser translúcidas */
  --ocean:    #134d93;
  --azure:    #1e7fe0;
  --aqua:     #8cecff;
  --ice:      #eafbff;
  --ice-mute: rgba(234, 251, 255, 0.74);
  --ice-dim:  rgba(234, 251, 255, 0.55);
  --ice-faint:rgba(234, 251, 255, 0.40);

  /* Vidrio */
  --glass-fill:   linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  --glass-fill-2: linear-gradient(135deg, rgba(140,236,255,.12), rgba(30,127,224,.03));
  --glass-solid:  rgba(10, 19, 38, 0.55);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-hi:     inset 0 1px 0 rgba(255,255,255,.30);
  --glass-shadow: 0 12px 44px rgba(0,0,0,.45);
  --glass-blur:   blur(16px) saturate(150%);

  /* Reasignamos los tokens de texto sobre oscuro (uso único, seguro) */
  --on-dark:      #eafbff;
  --on-dark-soft: rgba(234, 251, 255, 0.74);
  --on-dark-mute: rgba(234, 251, 255, 0.6);
  --on-dark-line: rgba(255, 255, 255, 0.09);
  --slate:        rgba(234, 251, 255, 0.6);
  --slate-2:      rgba(234, 251, 255, 0.5);
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  background: var(--abismo) !important;
  color: var(--ice) !important;
}
/* Halo ambiental fijo detrás de todo el sitio.
   Ojo: site.css usa body::before para el grano de ruido (opacity .045,
   mix-blend multiply). Como esta regla carga después gana, pero hay que
   resetear opacity y blend o hereda los del grano y no se ve. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 1 !important; mix-blend-mode: normal !important;
  background:
    radial-gradient(70% 55% at 78% 8%, rgba(30,127,224,.16), transparent 60%),
    radial-gradient(60% 50% at 12% 100%, rgba(19,77,147,.18), transparent 62%),
    var(--abismo);
}
::selection { background: rgba(140,236,255,.28); color: #fff; }

h1, h2, h3, h4, h5 { color: var(--ice); }
em { color: var(--aqua); }
.eyebrow { color: var(--aqua) !important; text-shadow: none !important; }

/* Utilidad vidrio */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}

/* ── Header (vidrio oscuro) ────────────────────────────────── */
.site-header {
  background: rgba(6, 10, 20, 0.55) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Header oculto arriba del todo, entra al primer scroll (la clase is-shown la pone extras.js).
   fixed y z-index con !important para ganarle al body.dw-page > * de las landings.
   Solo desliza, sin fade: con opacity < 1 Chromium apaga el backdrop-filter
   y el vidrio se perderia durante la entrada. */
.site-header--overlay {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 60 !important;
  transform: translateY(-102%);
  transition: transform .5s cubic-bezier(.22,.9,.28,1);
}
.site-header--overlay.is-shown { transform: none; }
/* Variante fija (landings): mismo header pero siempre visible */
.site-header--overlay.site-header--fixed { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header--overlay { transition: none; }
}
/* ── Header V1 · diseño del prototipo hero-liquido ──
   Wordmark tipográfico blanco espaciado (sin isologo), links en
   mayúsculas apagados que se encienden, CTA píldora en el MISMO
   dorado que el "Pedí tu presupuesto" del hero (hereda .btn--gold). */
.brand { color: #fff !important; }
.brand--word {
  font-weight: 800; letter-spacing: .16em; font-size: 17px;
  color: #fff !important; text-decoration: none;
}
.site-nav a { color: rgba(255,255,255,.55) !important; font-size: 15px; font-weight: 600; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff !important; }
#site-nav-menu a { text-transform: uppercase; letter-spacing: 0.05em; }
.site-header .btn--gold {
  border-radius: 999px; font-weight: 800; font-size: 14px;
  padding: 0.62rem 1.15rem;
}
/* la tinta oscura del boton debe ganarle al color de .site-nav a */
.site-header .site-nav a.btn--gold,
.site-header .site-nav a.btn--gold:hover { color: #1a1400 !important; }
.site-nav__toggle-bar { background: #fff !important; }
.site-nav__toggle:hover { background: rgba(255,255,255,.1) !important; }

/* ── Botones sobre oscuro ──────────────────────────────────── */
.btn--gold { color: #1a1400 !important; }
.btn--ghost {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: rgba(255,255,255,.7) !important; background: rgba(255,255,255,.08) !important; }

/* ════════════════════════════════════════════════════════════
   HERO líquido
════════════════════════════════════════════════════════════ */
.hero {
  background: var(--abismo) !important;
  color: var(--ice) !important;
  border-bottom: none !important;
  min-height: 100svh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 0 !important;
}
.hero .liquid-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
/* Overlays del prototipo v1: glow a la derecha, oscurecido a la
   izquierda para el copy, sombra arriba y empalme abajo */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 66% 42%, rgba(140,236,255,.16), transparent 46%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.18) 45%, transparent 72%);
}
.hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,4,11,.7), transparent 220px),
    linear-gradient(0deg, rgba(4,5,11,.85), transparent 180px);
}
.hero.no-webgl .liquid-canvas { display: none !important; }
.hero.no-webgl {
  background:
    radial-gradient(120% 90% at 30% 92%, #134d93 0%, transparent 55%),
    radial-gradient(90% 80% at 72% 40%, rgba(140,236,255,.35) 0%, transparent 50%),
    var(--abismo) !important;
}
.hero__inner {
  position: relative; z-index: 5;
  text-align: left;
  align-items: flex-start;
  width: 100%;
  max-width: var(--container); margin: 0 auto;
  padding: clamp(5rem, 9vw, 7rem) var(--gutter) clamp(3rem, 7vw, 5rem);
  transform: none;
}
.hero__copy { max-width: 1000px; }
.hero__headline {
  font-family: 'Paytone One', var(--ff-display), system-ui, sans-serif !important;
  font-weight: 400 !important;                 /* Paytone One solo trae 400 */
  font-variation-settings: normal !important;  /* pisa los ejes de la Jakarta variable */
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 40px rgba(0,0,0,.35) !important;
  font-size: clamp(2.2rem, 6vw, 4.4rem) !important;
  line-height: 1.04 !important; letter-spacing: 0 !important;
  max-width: none; margin-inline: 0;
}
.hero__lead {
  color: rgba(255,255,255,.82) !important; text-shadow: 0 1px 12px rgba(0,0,0,.5) !important;
  max-width: 560px; margin-inline: 0;
  font-size: clamp(1.02rem, 1.6vw, 1.28rem); margin-top: 1.7rem;
}
.hero__cta { margin-top: 2.4rem; justify-content: flex-start; }
.hero__trust { margin: 2.2rem 0 0; font-size: 13px; color: rgba(255,255,255,.55); font-weight: 600; }

/* Cada sección ocupa la pantalla completa y centra su contenido.
   El hero queda excluido porque ya descuenta el header en su propio alto. */
main.home > section:not(.hero) {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   Secciones · neutralizamos fondos claros, dejamos ver el abismo
════════════════════════════════════════════════════════════ */
.showcase, .dw, .oneprice, .planfinder, .founder {
  background: transparent !important;
  color: var(--ice) !important;
}
.showcase__title, .dw__title, .founder__title, .planfinder__title,
.oneprice__title, .closer__title { color: #fff !important; }
.showcase__sub, .dw__sub, .founder__lead, .planfinder__sub,
.oneprice__sub, .closer__sub { color: var(--ice-mute) !important; }
.showcase__title em, .founder__title em, .planfinder__title em { color: var(--aqua) !important; }

/* Trabajos · el escenario del carrusel a vidrio abismo */
.tcar__stage {
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(30,127,224,.20) 0%, transparent 55%),
    linear-gradient(160deg, #071026 0%, #04070f 100%) !important;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}
.tslide__vid { background: #04070f !important; }
.tslide__vid--wait { background: linear-gradient(160deg, #0b1a3a, #04070f) !important; border-color: rgba(140,236,255,.3) !important; }
.tslide__cap span { color: rgba(234,251,255,.85) !important; }
/* La captura de la web del cliente queda blanca (es su sitio real), no la tocamos */

/* Fundador · a vidrio abismo */
.founder { background: transparent !important; }
.founder__video { background: linear-gradient(160deg, #0b1a3a, #071026) !important; }
.founder__lead, .founder__text .eyebrow { color: var(--ice-mute) !important; }
.founder__text .eyebrow { color: var(--aqua) !important; }

/* Planfinder · el orbe retintado a azure/abismo */
.orb {
  background: radial-gradient(120% 100% at 50% 8%, #123a75 0%, #0a1f45 45%, #04070f 100%) !important;
}
.orb__neb--a { background: radial-gradient(circle, #1e7fe0, transparent 68%) !important; }
.orb__neb--b { background: radial-gradient(circle, #8cecff, transparent 66%) !important; }

/* Cierre · gradient a abismo */
.closer {
  background: linear-gradient(180deg, transparent 0%, rgba(8,16,38,.6) 40%, var(--abismo) 100%) !important;
}

/* ── Cards / superficies genéricas a vidrio ────────────────── */
.pf__plan, .qcard, .qcard--wide, .dw-cols__box, .dw-step, .card, .oneprice__card {
  background: var(--glass-solid) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-hi) !important;
  color: var(--ice) !important;
}
.pf__plan::before { display: none !important; }
.dw-step__t { color: #fff !important; }
.dw-step__d { color: var(--ice-mute) !important; }

/* ── Planfinder widget · textos ya en on-dark (lima→hielo por token) */
.pf__estimate { background: linear-gradient(180deg, rgba(242,183,5,0.14) 0%, rgba(242,183,5,0.04) 100%) !important; }

/* ── Footer · abismo vidrio ────────────────────────────────── */
.site-footer {
  /* sin costura con la sección de cierre: arranca transparente (continúa el
     abismo de arriba), entra a una banda tenue y cierra en abismo. Sin border. */
  background: linear-gradient(180deg, transparent 0%, rgba(7,16,38,.55) 34%, var(--abismo) 100%) !important;
  border-top: none !important;
  color: var(--ice-mute) !important;
}
.footer-col a { color: var(--ice) !important; }
.footer-col a:hover { color: var(--aqua) !important; }
.footer-legal { border-top-color: rgba(255,255,255,.1) !important; }

/* ── Splash mobile · pantalla de carga breve (la inyecta extras.js) ── */
.m-splash {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; padding: 2rem; text-align: center;
  background:
    radial-gradient(80% 60% at 85% 8%, rgba(30,127,224,.3), transparent 55%),
    radial-gradient(80% 70% at 10% 100%, rgba(19,77,147,.4), transparent 60%),
    #04050b;
  color: #eafbff;
  opacity: 1; transition: opacity .55s ease;
}
.m-splash.is-out { opacity: 0; pointer-events: none; }
.m-splash__mark { font-weight: 800; letter-spacing: .2em; font-size: 19px; color: #fff; }
.m-splash__dots { display: flex; gap: .55rem; }
.m-splash__dots i { width: 9px; height: 9px; border-radius: 50%; background: #8cecff;
  box-shadow: 0 0 10px rgba(140,236,255,.8); animation: splashDot 1s ease-in-out infinite; }
.m-splash__dots i:nth-child(2) { animation-delay: .16s; }
.m-splash__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes splashDot { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-7px); opacity: 1; } }
.m-splash__msg { margin: 0; font-size: 1.02rem; line-height: 1.55; color: rgba(234,251,255,.8); max-width: 30ch; }
.m-splash__msg b { color: #fff; }

/* ── Home mobile: termina en el CTA, sin footer (pedido del fundador;
   en desktop y en el resto de las paginas el footer sigue) ── */
@media (max-width: 820px) {
  main.home ~ .site-footer { display: none; }
}

/* Footer compacto en mobile: las columnas Servicios/Estudio duplican el header,
   quedan la marca, los contactos en fila y las legales */
@media (max-width: 720px) {
  .footer-main { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.3rem; }
  .footer-logo__img { height: 42px; }
  .footer-nav { display: flex; justify-content: center; }
  .footer-col:nth-child(1), .footer-col:nth-child(2) { display: none; }
  .footer-col__title { display: none; }
  .footer-col ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
  .footer-legal { flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
  .footer-legal__links { justify-content: center; gap: .9rem 1.1rem; }
}

/* ── Sticky / WhatsApp flotante ────────────────────────────── */
.sticky-cta {
  background: var(--glass-solid) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--ice) !important;
}
.sticky-cta:hover { background: var(--gold) !important; color: #1a1400 !important; }

/* ── Nav móvil desplegable a oscuro ────────────────────────── */
@media (max-width: 560px) {
  .site-nav ul {
    background: rgba(6,10,20,.94) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  .site-nav a:not(.btn) { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
}

/* ── Tarjetas "Elegí tu camino" (dw-card) a vidrio ─────────── */
.dw-card {
  background: var(--glass-solid) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-hi) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.dw-card:hover { border-color: rgba(140,236,255,.4) !important; }
.dw-card__t { color: #fff !important; }
.dw-card__d { color: var(--ice-mute) !important; }
.dw-card li { color: var(--ice) !important; }

/* ── Hero de páginas internas (dw-hero, centrado) + líquido ── */
.dw-hero {
  position: relative; overflow: hidden;
  background: var(--abismo) !important;
  min-height: min(74vh, 660px);
  display: flex; flex-direction: column; justify-content: center;
}
.dw-hero .liquid-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
.dw-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(78% 72% at 50% 34%, rgba(4,5,11,.28), rgba(4,5,11,.78));
}
.dw-hero > .container { position: relative; z-index: 5; }
.dw-hero.no-webgl .liquid-canvas { display: none !important; }
.dw-hero.no-webgl {
  background:
    radial-gradient(110% 90% at 50% 100%, #134d93 0%, transparent 55%),
    var(--abismo) !important;
}
.dw-hero__h1 {
  color: #fff !important;
  background: linear-gradient(100deg, #fff 52%, var(--aqua));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dw-hero__sub { color: var(--ice-mute) !important; }
.dw-breadcrumb, .dw-breadcrumb a { color: var(--ice-dim) !important; }
.dw-breadcrumb a:hover { color: var(--aqua) !important; }

/* ── Banner de consentimiento (inyectado por consent.js) ───── */
.consent-banner {
  background: rgba(6, 10, 20, 0.92) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,.1) !important;
  color: var(--ice-mute) !important;
}
.consent-banner__title { color: #fff !important; }
.consent-banner__text { color: var(--ice-mute) !important; }
.consent-banner__text a { color: var(--aqua) !important; }
.consent-banner__btn--accept { background: var(--gold) !important; color: #1a1400 !important; }
.consent-banner__btn--reject {
  background: rgba(255,255,255,.08) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.consent-banner__btn--prefs { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) !important; }
.consent-banner__prefs { border-top-color: rgba(255,255,255,.12) !important; }
.consent-opt { background: rgba(255,255,255,.05) !important; }
.consent-opt__name { color: #fff !important; }
.consent-opt__desc { color: var(--ice-mute) !important; }
.consent-banner__btn--save { background: var(--gold) !important; color: #1a1400 !important; }

/* ── Páginas legales (legal.css tiene su propio claro) ─────── */
.legal-page { background: var(--abismo) !important; color: var(--ice) !important; }
.legal__kicker { color: var(--aqua) !important; }
.legal__title { color: #fff !important; }
.legal__meta { color: var(--ice-dim) !important; }
.legal__header { border-bottom-color: rgba(255,255,255,.12) !important; }
.legal__section h2 { color: #fff !important; }
.legal__section p, .legal__list li { color: var(--ice-mute) !important; }
.legal__section a, .legal__section a:hover, .legal__footer nav a:hover { color: var(--aqua) !important; }
.legal__section--note {
  background: rgba(242,183,5,.10) !important;
  border-left-color: var(--gold) !important;
}
.legal__section--note p { color: var(--ice) !important; }
.legal__footer { background: transparent !important; border-top-color: rgba(255,255,255,.1) !important; }
.legal__footer p, .legal__footer nav a { color: var(--ice-mute) !important; }

/* ── Landings desarrollo-web / rediseno-web ───────────────────
   Estas páginas usan estilos .dw-* pensados para fondo claro.
   Sobre el abismo oscuro subimos contraste y las llevamos al
   mismo lenguaje liquid glass del resto del sitio. ───────────── */
.dw-breadcrumb { color: var(--ice-dim) !important; }
.dw-breadcrumb a { color: var(--ice-mute) !important; }
.dw-breadcrumb a:hover { color: var(--aqua) !important; }

.dw__title { color: var(--ice) !important; }
.dw__title em { color: var(--aqua) !important; -webkit-text-fill-color: var(--aqua); }
.dw__lead { color: var(--ice-mute) !important; }
.dw-hero__sub { color: var(--ice-mute) !important; }

/* Tarjetas (grillas y pasos) como glass real, con blur, filo aqua y elevación al hover */
.dw-card, .dw-step {
  background: var(--glass-fill) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-hi) !important;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease !important;
}
.dw-card:hover, .dw-step:hover {
  transform: translateY(-4px);
  background: var(--glass-fill-2) !important;
  border-color: rgba(140, 236, 255, .45) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,.5), var(--glass-hi) !important;
}
.dw-card__t, .dw-step__t { color: #fff !important; }
.dw-card__d, .dw-step__d { color: var(--ice-mute) !important; }
.dw-card li { color: var(--ice) !important; }
.dw-card li::before { color: var(--aqua) !important; }
.dw-step__n { color: var(--aqua) !important; }
@media (prefers-reduced-motion: reduce) {
  .dw-card, .dw-step { transition: none !important; }
  .dw-card:hover, .dw-step:hover { transform: none; }
}

/* Columnas comparativas: glass + texto claro (venían en índigo) */
.dw-cols__box {
  background: var(--glass-fill) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
}
.dw-cols__t { color: #fff !important; }
.dw-cols li { color: var(--ice-mute) !important; }
.dw-cols--yes li::before { color: var(--aqua) !important; }
.dw-cols--no li::before { color: var(--ice-dim) !important; }

/* FAQ de las landings: texto claro (venía en índigo) */
.dw-faq details { border-bottom-color: rgba(255,255,255,.12) !important; }
.dw-faq summary { color: #fff !important; }
.dw-faq summary::after { color: var(--aqua) !important; }
.dw-faq p { color: var(--ice-mute) !important; }

/* ── Sin rótulos en todo el sitio (eyebrows / kickers) ─────────── */
.eyebrow, .kicker, .dw__kicker { display: none !important; }

/* ── Landings: fondo aurora líquida que deriva (distinto del canvas del hero) ── */
body.dw-page { background: var(--abismo) !important; }
body.dw-page::before {
  content: ""; position: fixed; inset: -25vmax; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38vmax 34vmax at 12% 16%, rgba(30,127,224,.22), transparent 60%),
    radial-gradient(34vmax 32vmax at 88% 26%, rgba(140,236,255,.15), transparent 62%),
    radial-gradient(44vmax 40vmax at 58% 98%, rgba(30,127,224,.16), transparent 60%);
  filter: blur(30px) saturate(135%);
  animation: dwAurora 26s ease-in-out infinite alternate;
}
@keyframes dwAurora {
  0%   { transform: translate3d(-3%,-2%,0) scale(1); }
  50%  { transform: translate3d(3%,3%,0)  scale(1.08); }
  100% { transform: translate3d(-2%,4%,0) scale(1.04); }
}
body.dw-page > * { position: relative; z-index: 1; }
body.dw-page section.dw { background: transparent !important; }
@media (prefers-reduced-motion: reduce) { body.dw-page::before { animation: none; } }

/* ════════════════════════════════════════════════════════════
   LANDINGS v2 · más UX/UI dentro del abismo liquid glass
   Solo aplica a body.dw-page (desarrollo-web / rediseno-web).
   CSS puro, no toca contenido ni SEO. Reversible.
════════════════════════════════════════════════════════════ */

/* Ritmo entre secciones · glow ambiental que alterna frío/cálido */
body.dw-page .dw { position: relative; }
body.dw-page .dw > .container { position: relative; z-index: 1; }
body.dw-page .dw--ink::before,
body.dw-page .dw--gold::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
body.dw-page .dw--ink::before {
  background: radial-gradient(58% 46% at 50% 0%, rgba(30,127,224,.13), transparent 62%);
}
body.dw-page .dw--gold::before {
  background: radial-gradient(58% 46% at 50% 0%, rgba(242,183,5,.09), transparent 60%);
}

/* Firma de sección · nodo de laboratorio sobre cada título */
body.dw-page .dw__head { position: relative; }
body.dw-page .dw__head::before {
  content: ""; display: block; width: 36px; height: 2px; margin: 0 auto 1.15rem;
  background: linear-gradient(90deg, transparent, var(--aqua), transparent);
  box-shadow: 0 0 12px rgba(140,236,255,.7); border-radius: 2px;
}

/* Tarjetas y pasos · filo aqua superior que enciende al hover */
body.dw-page .dw-card,
body.dw-page .dw-step { position: relative; overflow: hidden; }
body.dw-page .dw-card::before,
body.dw-page .dw-step::before {
  content: ""; position: absolute; left: 1.3rem; right: 1.3rem; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(140,236,255,.6), transparent);
  opacity: .3; transition: opacity .28s ease;
}
body.dw-page .dw-card:hover::before,
body.dw-page .dw-step:hover::before { opacity: 1; }
body.dw-page .dw-card li::before { color: var(--aqua) !important; }

/* Pasos del proceso · el número como nodo de la línea (lab pipeline) */
body.dw-page .dw-step { padding-top: 1.6rem; }
body.dw-page .dw-step__n {
  font-family: ui-monospace, Menlo, monospace; font-size: 1rem; font-weight: 700;
  letter-spacing: .12em; color: var(--aqua) !important;
  display: inline-flex; align-items: center; gap: .5rem;
}
body.dw-page .dw-step__n::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--aqua); box-shadow: 0 0 12px var(--aqua); flex: none;
}

/* Columnas comparativas · filo de color que las diferencia (sí = aqua, no = tenue) */
body.dw-page .dw-cols__box { position: relative; overflow: hidden; padding-left: 1.7rem; }
body.dw-page .dw-cols__box::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
body.dw-page .dw-cols__box:has(.dw-cols--yes)::before {
  background: linear-gradient(180deg, var(--aqua), transparent);
  box-shadow: 0 0 14px rgba(140,236,255,.5);
}
body.dw-page .dw-cols__box:has(.dw-cols--no)::before {
  background: linear-gradient(180deg, rgba(234,251,255,.32), transparent);
}
body.dw-page .dw-cols--yes li::before { color: var(--aqua) !important; }
body.dw-page .dw-cols--no li::before { color: var(--ice-dim) !important; }

/* FAQ · filas de vidrio con marcador aqua, se resalta al abrir */
body.dw-page .dw-faq details {
  border: 1px solid var(--glass-border); border-radius: 14px;
  margin-bottom: .7rem; padding: 1rem 1.25rem;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color .25s ease, background .25s ease;
}
body.dw-page .dw-faq details:hover { border-color: rgba(140,236,255,.32); }
body.dw-page .dw-faq details[open] { border-color: rgba(140,236,255,.42); background: var(--glass-fill-2); }
body.dw-page .dw-faq summary { align-items: center; }
body.dw-page .dw-faq summary::after {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(140,236,255,.35); background: rgba(140,236,255,.08);
  color: var(--aqua) !important; font-weight: 700; line-height: 1; flex: none;
  transition: background .2s ease;
}
body.dw-page .dw-faq details[open] summary::after { background: rgba(140,236,255,.2); }

/* CTA final · panel consola de vidrio que cierra la página con fuerza */
body.dw-page .dw-cta .container {
  max-width: 840px; margin-inline: auto; position: relative; overflow: hidden;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 26px;
  padding: clamp(2.2rem, 5vw, 3.6rem);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}
body.dw-page .dw-cta .container::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--aqua), transparent); opacity: .75;
}
body.dw-page .dw-cta .container::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 0%, rgba(140,236,255,.1), transparent 60%);
}
body.dw-page .dw-cta .dw__head,
body.dw-page .dw-cta .dw-hero__cta { position: relative; z-index: 1; }

/* Hero landing · fundido inferior hacia el abismo para coser con la página */
body.dw-page .dw-hero::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--abismo));
}

@media (prefers-reduced-motion: reduce) {
  body.dw-page .dw-card::before, body.dw-page .dw-step::before,
  body.dw-page .dw-faq details, body.dw-page .dw-faq summary::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   FIX 3 · legibilidad del RESULTADO del planfinder sobre el abismo
   Los tokens --indigo/--indigo-2/--teal eran para fondo claro y en
   oscuro quedan azul ilegible. Van a hielo/cian con acento dorado.
   El planfinder solo vive en la home, dentro de .sec--consola. ════ */
.sec--consola .pf__plan-name { color: #fff !important; }
.sec--consola .pf__plan-name svg,
.sec--consola .pf__plan-items svg { color: var(--aqua) !important; }
.sec--consola .pf__plan-kind { color: var(--aqua) !important; }
.sec--consola .pf__plan-price { color: #fff !important; }
.sec--consola .pf__plan-tag { color: var(--gold) !important; }
.sec--consola .pf__plan-blurb { color: var(--ice-mute) !important; }
.sec--consola .pf__plan-items li { color: var(--ice-mute) !important; }
.sec--consola .pf__result-sub { color: var(--ice-mute) !important; }
.sec--consola .pf__estimate-label,
.sec--consola .pf__estimate-note { color: var(--ice-mute) !important; }
.sec--consola .pf__estimate-amount { color: #fff !important; }
.sec--consola .pf__fineprint p { color: var(--ice-mute) !important; }
.sec--consola .pf__fineprint p strong { color: #fff !important; }
/* orbe · acentos lima (fuera de paleta) a cian, textos a hielo */
.sec--consola .orb__core-label { color: rgba(140,236,255,.92) !important; }
.sec--consola .orb__plans { color: var(--ice-mute) !important; }
.sec--consola .orb__plans b { color: var(--aqua) !important; }
.sec--consola .orb__sub,
.sec--consola .orb__hint,
.sec--consola .orb__card-d { color: var(--ice-mute) !important; }
.sec--consola .node__label { color: #fff !important; }

/* ════════════════════════════════════════════════════════════
   FIX 5 · fondo por sección · SOLO rediseno-web (body.dw-rediseno)
   desarrollo-web se rehace aparte, no se toca. Cada sección respira
   distinto, con textura y profundidad dentro del abismo liquid glass.
   Anula el fondo transparente plano y monótono. ══════════════════ */
body.dw-rediseno main > section.dw { position: relative; isolation: isolate; overflow: hidden; }
body.dw-rediseno main > section.dw > .container { position: relative; z-index: 2; }
body.dw-rediseno main > section.dw::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8;
}

/* mood A · pozo azure arriba + grilla de laboratorio */
body.dw-rediseno main > section.dw:nth-of-type(4n+2) {
  background: radial-gradient(120% 90% at 50% -12%, rgba(19,77,147,.30), transparent 56%), var(--abismo) !important;
}
body.dw-rediseno main > section.dw:nth-of-type(4n+2)::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(140,236,255,.06) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(90deg, rgba(140,236,255,.06) 0 1px, transparent 1px 50px);
  -webkit-mask-image: radial-gradient(120% 75% at 50% 0%, #000 18%, transparent 76%);
  mask-image: radial-gradient(120% 75% at 50% 0%, #000 18%, transparent 76%);
}

/* mood B · resplandor cian abajo-derecha + trama de puntos */
body.dw-rediseno main > section.dw:nth-of-type(4n+3) {
  background: radial-gradient(88% 82% at 85% 112%, rgba(30,127,224,.26), transparent 58%), #04060e !important;
}
body.dw-rediseno main > section.dw:nth-of-type(4n+3)::after {
  background-image: radial-gradient(rgba(140,236,255,.16) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(92% 82% at 82% 100%, #000 8%, transparent 70%);
  mask-image: radial-gradient(92% 82% at 82% 100%, #000 8%, transparent 70%);
}

/* mood C · pozo azure abajo-centro + ticks de medición */
body.dw-rediseno main > section.dw:nth-of-type(4n) {
  background: radial-gradient(120% 90% at 50% 112%, rgba(19,77,147,.26), transparent 56%), var(--abismo) !important;
}
body.dw-rediseno main > section.dw:nth-of-type(4n)::after {
  inset: auto 0 0 0; height: 130px; opacity: .5;
  background-image: repeating-linear-gradient(90deg, rgba(140,236,255,.16) 0 1px, transparent 1px 120px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
  mask-image: linear-gradient(180deg, transparent, #000);
}

/* mood D · atmósfera lateral fría + grilla suave */
body.dw-rediseno main > section.dw:nth-of-type(4n+1) {
  background: radial-gradient(84% 96% at 12% 24%, rgba(30,127,224,.22), transparent 60%), radial-gradient(70% 80% at 92% 88%, rgba(140,236,255,.07), transparent 60%), #05060d !important;
}
body.dw-rediseno main > section.dw:nth-of-type(4n+1)::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(140,236,255,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(140,236,255,.05) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(80% 90% at 20% 40%, #000 12%, transparent 72%);
  mask-image: radial-gradient(80% 90% at 20% 40%, #000 12%, transparent 72%);
}

/* el CTA final mantiene su panel de vidrio por encima de la textura */
body.dw-rediseno .dw-cta .container { z-index: 2; }

/* ════════════════════════════════════════════════════════════
   FIX 6 · flotante de WhatsApp fixed · SOLO rediseno-web.
   body.dw-page > * le forzaba position:relative y z-index:1, y el float
   se rompía. Le devolvemos fixed y su z-index alto. desarrollo-web
   lo resuelve su propia reconstrucción. ══════════════════════════ */
/* body.dw-page > * los vuelve position:relative; acá se los devuelve al viewport (ambas landings) */
body.dw-page > .wa-sticky { position: fixed !important; z-index: 9998 !important; }
body.dw-page > .sticky-cta { position: fixed !important; z-index: 60 !important; }