/* ═══════════════════════════════════════════════════════════
   LANDING DE VENTAS — capa épica (distinta a la de Winston)
   
   Winston-ia usa:  aurora azul/violeta + cerebros de nodos + rejilla
   La landing usa:  MALLAS DE LUZ DORADA + haz diagonal + focos cálidos
   
   Misma familia visual (oscuro) pero IDENTIDAD PROPIA: más "tienda
   premium" que "producto tecnológico". Dorado en vez de violeta.
   ═══════════════════════════════════════════════════════════ */

:root {
  --v-fondo:    #07080f;
  --v-panel:    rgba(20, 22, 34, .82);
  --v-borde:    rgba(220, 180, 100, .16);
  --v-borde-on: rgba(255, 200, 87, .45);
  --v-texto:    #f4f1ea;
  --v-dim:      #a8a496;
  --v-suave:    #6e6b60;
  --v-oro:      #ffc857;
  --v-oro-cl:   #ffdf9e;
  --v-azul:     #4d9dff;
  --v-verde:    #4ade80;
}

/* ── FONDO PROPIO: malla de luz dorada ─────────────────────────────────── */
html, body { background: var(--v-fondo) !important; }

body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%, rgba(255,200,87,.10), transparent 62%),
    radial-gradient(ellipse 65% 45% at 92% 8%, rgba(255,150,60,.07), transparent 60%),
    radial-gradient(ellipse 70% 50% at 8% 92%, rgba(77,157,255,.06), transparent 62%),
    var(--v-fondo);
}

/* malla diagonal (distinta de la rejilla cuadrada de Winston) */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(58deg,
      rgba(255,200,87,.05) 0px, rgba(255,200,87,.05) 1px,
      transparent 1px, transparent 74px),
    repeating-linear-gradient(-58deg,
      rgba(255,200,87,.035) 0px, rgba(255,200,87,.035) 1px,
      transparent 1px, transparent 74px);
  mask-image: radial-gradient(ellipse 95% 80% at 50% 20%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 20%, #000 10%, transparent 72%);
}

/* ── HAZ DE LUZ en el hero ─────────────────────────────────────────────── */
#heroLuz {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
#heroLuz canvas { width: 100%; height: 100%; display: block; }

/* ── TIPOGRAFÍA: más "tienda premium" ──────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--v-texto) !important;
}
h1, h2, h3 { color: var(--v-texto) !important; }

/* el titular: mismo peso que Winston pero con aire distinto */
header h1, .hero h1, h1.titular {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1.05 !important;
  font-size: clamp(2.1rem, 5vw, 3.6rem) !important;
}

/* ── PANELES: cristal dorado ───────────────────────────────────────────── */
.card, .plan, .bloque {
  background: var(--v-panel) !important;
  border: 1px solid var(--v-borde) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px);
  color: var(--v-texto) !important;
  transition: .3s;
}
.card:hover, .plan:hover {
  border-color: var(--v-borde-on) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,200,87,.1) !important;
  transform: translateY(-4px);
}

/* ── PRECIOS: el protagonista ──────────────────────────────────────────── */
.precio, .plan .precio {
  font-size: 2.7rem !important; font-weight: 800 !important;
  letter-spacing: -.045em !important; color: var(--v-texto) !important;
}
.precio .oro, .plan .precio .oro {
  color: var(--v-oro) !important; background: none !important;
  -webkit-text-fill-color: var(--v-oro) !important;
  text-shadow: 0 0 26px rgba(255,200,87,.3);
}
.precio .orig, .orig { color: var(--v-suave) !important; text-decoration: line-through; font-size: 1rem !important; }
.dto {
  background: rgba(255,200,87,.14) !important; color: var(--v-oro) !important;
  border: 1px solid rgba(255,200,87,.34) !important;
  border-radius: 999px; padding: .12rem .55rem;
  font-size: .72rem !important; font-weight: 700;
}

/* ── BOTONES: dorados, de tienda ───────────────────────────────────────── */
.buybtn {
  background: linear-gradient(135deg, #ffc857, #ff9f43) !important;
  border: 0 !important; color: #241a00 !important;
  font-weight: 800 !important; border-radius: 999px !important;
  padding: 1rem 1.5rem !important; font-size: .95rem !important;
  box-shadow: 0 10px 30px rgba(255,170,60,.32) !important;
  transition: transform .2s, box-shadow .2s !important;
  cursor: pointer; width: 100%;
}
.buybtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 15px 42px rgba(255,170,60,.48) !important;
}

/* ── ETIQUETAS ─────────────────────────────────────────────────────────── */
.etiqueta, .plan .etiqueta {
  background: rgba(255,200,87,.12) !important;
  color: var(--v-oro) !important;
  border: 1px solid rgba(255,200,87,.3) !important;
  font-size: .66rem !important; letter-spacing: .08em !important;
}

/* ── PLAN DESTACADO: borde dorado fuerte ───────────────────────────────── */
.plan.destacado {
  border-color: rgba(255,200,87,.55) !important;
  background: linear-gradient(165deg, rgba(255,200,87,.07), var(--v-panel)) !important;
  box-shadow: 0 0 0 1px rgba(255,200,87,.16), 0 28px 70px rgba(0,0,0,.55) !important;
}

/* ── PRUEBAS ───────────────────────────────────────────────────────────── */
.prueba {
  background: rgba(74,222,128,.06) !important;
  border: 1px solid rgba(74,222,128,.22) !important;
  color: var(--v-texto) !important; border-radius: 12px !important;
}
.prueba b { color: var(--v-verde) !important; }
.fine { color: var(--v-dim) !important; }

/* ── CHAT y FORMULARIO oscuros ─────────────────────────────────────────── */
.chat, .ventana-chat, .chat-caja, [class*="chat"] > div,
.form, .formulario, form, .lead {
  background: var(--v-panel) !important;
  border: 1px solid var(--v-borde) !important;
  color: var(--v-texto) !important;
}
.chat p, .chat .msg, .chat .mensaje, .chat .burbuja { color: var(--v-texto) !important; }
.chat input, .chat textarea, form input, form textarea, form select {
  background: rgba(0,0,0,.42) !important;
  border: 1px solid var(--v-borde) !important;
  color: var(--v-texto) !important; border-radius: 10px !important;
}
::placeholder { color: var(--v-suave) !important; }
form label, .form label { color: var(--v-dim) !important; }
form button, .form button, form [type="submit"] {
  background: linear-gradient(135deg, #ffc857, #ff9f43) !important;
  border: 0 !important; color: #241a00 !important;
  border-radius: 999px !important; font-weight: 800 !important;
  padding: 1rem 1.6rem !important; cursor: pointer;
}

/* ── LISTAS con checks ─────────────────────────────────────────────────── */
.plan-lista, .lista { list-style: none !important; padding-left: 0 !important; }
.plan-lista li, .lista li {
  color: var(--v-dim) !important; padding-left: 1.5rem !important; position: relative;
}
.plan-lista li::before, .lista li::before {
  content: '✓' !important; position: absolute !important; left: 0 !important;
  color: var(--v-verde) !important; font-weight: 700 !important;
}
.plan-lista li b, .lista li b { color: var(--v-texto) !important; }

/* ── MODAL ─────────────────────────────────────────────────────────────── */
.modal { background: rgba(0,0,0,.78) !important; backdrop-filter: blur(7px); }
.modal-caja {
  background: #14161e !important;
  border: 1px solid var(--v-borde-on) !important;
  border-radius: 20px !important; color: var(--v-texto) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.75) !important;
}
.modal-caja h3 { color: var(--v-texto) !important; }
.precio-modal { color: var(--v-oro) !important; font-weight: 800 !important; }
.cancelar {
  background: rgba(255,200,87,.08) !important;
  border: 1px solid var(--v-borde) !important;
  color: var(--v-texto) !important; border-radius: 999px !important;
  padding: 1rem 1.4rem !important; cursor: pointer;
}

/* ── APARICIÓN AL SCROLL ───────────────────────────────────────────────── */
/* con red de seguridad: si el JS falla, se ve todo */
.revelar-t { opacity: 1; transform: none; }
body.js-tienda .revelar-t {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
body.js-tienda .revelar-t.visto { opacity: 1; transform: translateY(0); }

/* ── CUALQUIER fondo blanco que se cuele ───────────────────────────────── */
[style*="background:#fff"], [style*="background: #fff"],
[style*="background:#ffffff"], [style*="background-color:white"] {
  background: var(--v-panel) !important; color: var(--v-texto) !important;
}
[style*="color:#000"], [style*="color: #000"] { color: var(--v-texto) !important; }

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .precio, .plan .precio { font-size: 2.2rem !important; }
}