/* ═══════════════════════════════════════════════════════════
   TIENDA — capa oscura (unifica con la web de Winston)
   Se carga DESPUÉS del CSS original, así que sobrescribe.
   Objetivo: oscuro, profesional y enfocado a VENDER.
   ═══════════════════════════════════════════════════════════ */

:root {
  --t-fondo:     #05070d;
  --t-fondo-2:   #0a0e18;
  --t-panel:     rgba(18, 24, 38, .78);
  --t-borde:     rgba(120, 160, 220, .16);
  --t-borde-vivo:rgba(120, 170, 255, .42);
  --t-texto:     #eaf0f8;
  --t-dim:       #9fb0c8;
  --t-suave:     #6f8098;
  --t-azul:      #4d9dff;
  --t-azul-cl:   #8fc4ff;
  --t-oro:       #ffc857;
  --t-verde:     #4ade80;
}

/* ── FONDO ──────────────────────────────────────────────────────────────── */
html, body {
  background: var(--t-fondo) !important;
  color: var(--t-texto) !important;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(77,157,255,.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 20%, rgba(178,140,255,.09), transparent 65%),
    var(--t-fondo);
}
/* rejilla sutil, igual que la web de Winston */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(120,170,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 20%, transparent 75%);
}

/* ── TIPOGRAFÍA ─────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px;
}
h1, h2, h3, .titulo { color: var(--t-texto) !important; }
p { color: var(--t-dim); }

/* el titular grande del hero: mas impacto */
header h1, .hero h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  line-height: 1.08 !important;
}

/* ── TARJETAS Y PANELES ─────────────────────────────────────────────────── */
.card, .plan, .bloque, .panel, section > div[class*="card"] {
  background: var(--t-panel) !important;
  border: 1px solid var(--t-borde) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px);
  color: var(--t-texto) !important;
}
.card:hover, .plan:hover {
  border-color: var(--t-borde-vivo) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.45) !important;
  transform: translateY(-3px);
  transition: .3s;
}

/* ── PRECIOS: que se vean MUCHO ─────────────────────────────────────────── */
.precio, .plan .precio {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
  color: var(--t-texto) !important;
}
.precio .oro, .plan .precio .oro {
  color: var(--t-oro) !important;
  background: none !important;
  -webkit-text-fill-color: var(--t-oro) !important;
}
.precio .orig, .orig {
  color: var(--t-suave) !important;
  text-decoration: line-through;
  font-size: 1rem !important;
}
.dto {
  background: rgba(255,200,87,.14) !important;
  color: var(--t-oro) !important;
  border: 1px solid rgba(255,200,87,.32) !important;
  border-radius: 999px; padding: .12rem .55rem;
  font-size: .72rem !important; font-weight: 700;
}

/* ── BOTONES DE COMPRA: que destaquen ───────────────────────────────────── */
.buybtn {
  background: linear-gradient(135deg, var(--t-azul), #b28cff) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 1rem 1.5rem !important;
  font-size: .95rem !important;
  box-shadow: 0 10px 30px rgba(77,157,255,.35) !important;
  transition: transform .2s, box-shadow .2s !important;
  cursor: pointer;
  width: 100%;
}
.buybtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(77,157,255,.5) !important;
}

/* ── ETIQUETAS ──────────────────────────────────────────────────────────── */
.etiqueta, .plan .etiqueta {
  background: rgba(77,157,255,.12) !important;
  color: var(--t-azul-cl) !important;
  border: 1px solid rgba(77,157,255,.3) !important;
  font-size: .66rem !important;
  letter-spacing: .08em !important;
}
.etiqueta.cry { background: rgba(255,200,87,.12) !important; color: var(--t-oro) !important;
                border-color: rgba(255,200,87,.3) !important; }
.etiqueta.dig { background: rgba(178,140,255,.12) !important; color: #c9a9ff !important;
                border-color: rgba(178,140,255,.3) !important; }

/* ── PLAN DESTACADO ─────────────────────────────────────────────────────── */
.plan.destacado {
  border-color: rgba(255,200,87,.45) !important;
  background: linear-gradient(165deg, rgba(255,200,87,.055), var(--t-panel)) !important;
  box-shadow: 0 0 0 1px rgba(255,200,87,.12), 0 24px 60px rgba(0,0,0,.5) !important;
}

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

/* ── ENLACES ────────────────────────────────────────────────────────────── */
a { color: var(--t-azul-cl); }
a:hover { color: #fff; }

/* ── NAV / CABECERA ─────────────────────────────────────────────────────── */
header, .top, nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(120,160,220,.1);
}
.nombre-marca, .logo-txt { color: var(--t-texto) !important; }

/* ── SECCIONES: mas aire y titulos con mas fuerza ───────────────────────── */
h2.seccion {
  font-family: 'Inter', sans-serif !important;
  font-weight: 750 !important;
  letter-spacing: -.03em !important;
  font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
  color: var(--t-texto) !important;
}
.seccion-sub { color: var(--t-dim) !important; font-size: 1rem !important; }

/* ── MODAL DE PAGO ──────────────────────────────────────────────────────── */
.modal { background: rgba(0,0,0,.75) !important; backdrop-filter: blur(6px); }
.modal-caja {
  background: #12161c !important;
  border: 1px solid var(--t-borde-vivo) !important;
  border-radius: 20px !important;
  color: var(--t-texto) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.7) !important;
}
.modal-caja h3 { color: var(--t-texto) !important; }
.precio-modal { color: var(--t-oro) !important; font-weight: 800 !important; }
.modal-caja input {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid var(--t-borde) !important;
  color: var(--t-texto) !important;
  border-radius: 10px !important;
  padding: .8rem 1rem !important;
}
.modal-caja input:focus { outline: none; border-color: var(--t-borde-vivo) !important; }
.cancelar {
  background: rgba(120,170,255,.08) !important;
  border: 1px solid var(--t-borde-vivo) !important;
  color: var(--t-texto) !important;
  border-radius: 999px !important;
  padding: 1rem 1.4rem !important;
  cursor: pointer;
}
.ok { color: var(--t-verde) !important; }

/* ── CHAT ───────────────────────────────────────────────────────────────── */
.chat, .ventana-chat {
  background: var(--t-panel) !important;
  border: 1px solid var(--t-borde) !important;
  border-radius: 18px !important;
}
.chip {
  background: rgba(120,170,255,.09) !important;
  border: 1px solid var(--t-borde-vivo) !important;
  color: var(--t-dim) !important;
  border-radius: 999px !important;
}
.chip:hover { background: rgba(120,170,255,.18) !important; color: var(--t-texto) !important; }

/* ── BANNER DE TIENDA ───────────────────────────────────────────────────── */
.banner {
  background: linear-gradient(140deg, rgba(77,157,255,.1), rgba(178,140,255,.05)) !important;
  border: 1px dashed var(--t-borde-vivo) !important;
  border-radius: 22px !important;
}
.banner h3 { color: var(--t-texto) !important; }
.banner p { color: var(--t-dim) !important; }
.banner a {
  background: linear-gradient(135deg, var(--t-azul), #b28cff) !important;
  box-shadow: 0 10px 28px rgba(77,157,255,.34) !important;
}

/* ── APARECER AL HACER SCROLL ───────────────────────────────────────────── */
/* OJO: si el JS falla, las secciones se quedan VISIBLES (nunca web en blanco) */
.revelar-t { opacity: 1; transform: none; }
body.js-tienda .revelar-t {
  opacity: 0; transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1);
}
body.js-tienda .revelar-t.visto { opacity: 1; transform: translateY(0); }

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

/* ═══ ARREGLOS detectados al REVISAR CON CAPTURAS (28-09-2026) ═══
   El chat y el formulario tenian fondo BLANCO y rompian la estetica oscura.
   El logo "WINSTON" tampoco se leia. Todo esto se vio en las capturas. */

/* logo de la cabecera */
.nombre-marca, .marca-txt, header b, header strong, header .marca, header span {
  color: var(--t-texto) !important;
}

/* ── CHAT de productos: fondo oscuro ── */
.chat, .ventana-chat, .chat-caja, .chat-box, [class*="chat"] > div {
  background: var(--t-panel) !important;
  color: var(--t-texto) !important;
}
.chat .msg, .chat .mensaje, .chat .burbuja, [class*="chat"] p {
  color: var(--t-texto) !important;
}
.chat input, .chat textarea {
  background: rgba(0,0,0,.4) !important;
  border: 1px solid var(--t-borde) !important;
  color: var(--t-texto) !important;
}
/* cualquier bloque blanco suelto dentro del chat */
.chat [style*="background:#fff"], .chat [style*="background: white"],
.chat [style*="background:#ffffff"] {
  background: rgba(0,0,0,.3) !important;
  color: var(--t-texto) !important;
}

/* ── FORMULARIO de prueba gratis: fondo oscuro ── */
.form, .formulario, form, .lead, [class*="form"] {
  background: var(--t-panel) !important;
  border: 1px solid var(--t-borde) !important;
  border-radius: 18px !important;
  color: var(--t-texto) !important;
}
form input, form textarea, form select,
.form input, .formulario input {
  background: rgba(0,0,0,.4) !important;
  border: 1px solid var(--t-borde) !important;
  color: var(--t-texto) !important;
  border-radius: 10px !important;
}
form input::placeholder, form textarea::placeholder { color: var(--t-suave) !important; }
form label, .form label { color: var(--t-dim) !important; }
form button, .form button, form .btn, form [type="submit"] {
  background: linear-gradient(135deg, var(--t-azul), #b28cff) !important;
  border: 0 !important; color: #fff !important;
  border-radius: 999px !important; font-weight: 700 !important;
  padding: 1rem 1.6rem !important; cursor: pointer;
}

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

/* ── TARJETAS DE AFILIADOS: iconos y textos ── */
.card h3, .card .titulo { color: var(--t-texto) !important; }
.card p, .card .desc { color: var(--t-dim) !important; }
.card .etiqueta { opacity: 1 !important; }
.card img, .card svg { filter: brightness(1.15); }

/* ── DESCRIPCIONES de los productos/planes ── */
.desc, .plan .desc, .card .desc { color: var(--t-dim) !important; }

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

/* ── TEXTO oscuro suelto: que se lea ── */
[style*="color:#000"], [style*="color: #000"],
[style*="color:#1"], [style*="color:#2"], [style*="color:#3"] {
  color: var(--t-texto) !important;
}