/* Motor de redes EGA — un motor, dos temas (variables por clase en <body>) */
* { box-sizing: border-box; }
body.tema-misterio {
  --fondo: #f4f1ea; --panel: #ffffff; --texto: #1c1a17; --suave: #6f6a61;
  --barra: #111111; --barra-texto: #f5f2ec; --acento: #d92323; --acento-osc: #a51212;
  --borde: #ddd6c9; --radio: 10px; --sombra: 0 2px 10px rgba(20,10,0,.12);
}
body.tema-tv {
  --fondo: #eaf4ff; --panel: #ffffff; --texto: #12315e; --suave: #5a78a8;
  --barra: #1256c9; --barra-texto: #ffffff; --acento: #ffb800; --acento-osc: #e09c00;
  --borde: #c9def8; --radio: 18px; --sombra: 0 3px 14px rgba(18,86,201,.15);
}
html { background: var(--fondo); }
body { margin: 0; font-family: "Segoe UI", system-ui, Arial, sans-serif; background: var(--fondo); color: var(--texto); }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; padding: 8px 18px; background: var(--barra); color: var(--barra-texto); box-shadow: var(--sombra); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--barra-texto); }
.marca img { width: 44px; height: 44px; border-radius: 10px; }
.marca-nombre { font-size: 1.45rem; font-weight: 800; letter-spacing: .5px; }
.marca-nombre em { font-style: normal; color: var(--acento); }
body.tema-tv .marca-nombre em { color: var(--acento); }
.menu { display: flex; gap: 4px; flex-wrap: wrap; }
.menu a { color: var(--barra-texto); text-decoration: none; font-weight: 600; padding: 7px 11px; border-radius: 8px; }
.menu a:hover { background: rgba(255,255,255,.16); }
.buscador { display: flex; flex: 1; min-width: 180px; max-width: 430px; }
.buscador input { flex: 1; padding: 9px 14px; border: none; border-radius: 999px 0 0 999px; font-size: .95rem; }
.buscador button { border: none; background: var(--acento); color: #141414; padding: 0 16px; border-radius: 0 999px 999px 0; cursor: pointer; font-size: 1rem; }
body.tema-misterio .buscador button { color: #fff; }
.cuenta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cuenta a { color: var(--barra-texto); text-decoration: none; font-weight: 600; }
.nick { font-weight: 700; }

/* Botones */
.btn { display: inline-block; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  font-weight: 700; border: none; cursor: pointer; font-size: .95rem; }
.btn-fuerte { background: var(--acento); color: #141414 !important; }
body.tema-misterio .btn-fuerte { color: #fff !important; }
.btn-fuerte:hover { background: var(--acento-osc); }
.btn-suave { background: rgba(127,127,127,.16); color: var(--texto) !important; }
.barra .btn-suave { color: var(--barra-texto) !important; }
.btn.ancho { width: 100%; text-align: center; }

/* Layout 3 columnas */
.layout { display: grid; grid-template-columns: 250px minmax(0,1fr) 300px; gap: 18px;
  max-width: 1420px; margin: 18px auto; padding: 0 14px; align-items: start; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px; margin-bottom: 18px; box-shadow: var(--sombra); }
.tarjeta h3 { margin-top: 0; text-transform: uppercase; font-size: .82rem; letter-spacing: 1.1px; color: var(--acento-osc); }
body.tema-misterio .tarjeta h3 { color: var(--acento); }
.ecosistema ul, .tendencias ul { list-style: none; margin: 0; padding: 0; }
.ecosistema li a, .tendencias li a { display: block; padding: 8px 10px; border-radius: 8px;
  color: var(--texto); text-decoration: none; font-weight: 600; }
.ecosistema li a:hover, .tendencias li a:hover { background: rgba(127,127,127,.12); }
.ecosistema li a.activo { background: var(--acento); color: #fff; }
body.tema-tv .ecosistema li a.activo { color: #12315e; }
.bienvenida p { color: var(--suave); }
.puntos { padding-left: 18px; color: var(--suave); }
.puntos li { margin-bottom: 7px; }

/* Centro */
.titulo-pagina { font-size: 1.8rem; margin: 4px 0 14px; }
.titulo-seccion { font-size: 1.25rem; margin: 26px 0 12px; }
.intro { color: var(--suave); }
.pantalla { background: #000; border-radius: var(--radio); padding: 14px; box-shadow: var(--sombra); }
.pantalla-marco { position: relative; }
.pantalla video { width: 100%; max-height: 62vh; display: block; border-radius: 6px; background: #000; }
.pantalla-rotulo { position: absolute; top: 10px; left: 10px; background: var(--acento); color: #fff;
  font-weight: 800; padding: 4px 12px; border-radius: 999px; font-size: .85rem; }
body.tema-tv .pantalla-rotulo { color: #12315e; }
.pantalla-titulo { color: #fff; margin: 12px 2px 4px; font-size: 1.35rem; }
.pantalla-titulo a { color: #fff; text-decoration: none; }
.pantalla-desc { color: #cfd6dd; margin: 2px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.tarjeta-video { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra); padding-bottom: 10px; }
.tarjeta-video a { color: var(--texto); text-decoration: none; }
.tarjeta-video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.tarjeta-video.vertical img { aspect-ratio: 4/5; }
.programa img { aspect-ratio: 3/4; }
.tarjeta-video h3 { margin: 10px 12px 4px; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--texto); }
.tarjeta-video p { margin: 0 12px; color: var(--suave); font-size: .9rem; }
.tarjeta-video .play, .tarjeta-video a { position: relative; }
.tarjeta-video a .play { position: absolute; right: 10px; bottom: 10px; background: var(--acento); color: #fff;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; }
body.tema-tv .tarjeta-video a .play { color: #12315e; }
.sin-portada { aspect-ratio: 16/9; background: #222; color: #fff; display: grid; place-items: center; font-size: 2rem; }
.reels-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.reel video { width: 100%; aspect-ratio: 9/16; max-height: 70vh; background: #000; border-radius: var(--radio); }
.reel h3 a { color: var(--texto); text-decoration: none; }
.reel p { color: var(--suave); }

/* Foro e historias */
.cifras, .cifras-grandes { color: var(--suave); font-weight: 600; }
.cifras-grandes { font-size: 1.05rem; }
.lista-temas, .lista-gente { list-style: none; padding: 0; }
.lista-temas li, .lista-gente li { background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 9px; box-shadow: var(--sombra); }
.lista-temas a { color: var(--texto); font-weight: 700; text-decoration: none; }
.lista-temas small, .lista-gente small { color: var(--suave); display: block; }
.mensaje { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--sombra); }
.mensaje.original { border-left: 5px solid var(--acento); }
.mensaje header small { color: var(--suave); }
.historias-lista blockquote, .historias-mini blockquote { background: var(--panel); border-left: 5px solid var(--acento);
  border-radius: var(--radio); margin: 0 0 12px; padding: 12px 16px; box-shadow: var(--sombra); }
.historias-mini small, .historias-lista small { color: var(--suave); display: block; margin-top: 5px; }
.miga { color: var(--suave); }
.miga a { color: var(--acento-osc); }

/* Formularios */
.form-caja form { display: grid; gap: 11px; }
.form-caja input, .form-caja textarea, .registro-caja input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--borde); border-radius: 9px;
  font-size: .98rem; font-family: inherit; background: #fff; }
.form-caja label { display: grid; gap: 5px; font-weight: 600; }
.form-caja.angosta { max-width: 480px; }
.registro-caja form { display: grid; gap: 10px; }
.error { background: #ffe3e3; color: #8f1010; border: 1px solid #f0b4b4; padding: 10px 13px; border-radius: 9px; }
.chico { font-size: .88rem; }
.gris { color: var(--suave); }
.rapido { color: var(--suave); margin-top: -6px; }
.nick-grande { font-size: 1.15rem; font-weight: 800; }

.pie { text-align: center; color: var(--suave); padding: 26px 12px 34px; }

/* Responsivo */
@media (max-width: 1080px) {
  .layout { grid-template-columns: 210px minmax(0,1fr); }
  .col-der { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .col-der { grid-template-columns: 1fr; }
  .barra { gap: 10px; }
}

/* Tienda */
.meta-libro { color: var(--suave); font-size: .88rem; margin: 4px 0; }
.precio { font-size: 1.25rem; font-weight: 800; margin: 6px 0 10px; }
.precio-grande { font-size: 1.8rem; font-weight: 800; margin: 12px 0; }
.aviso-cobro { background: var(--panel); border: 2px dashed var(--acento); border-radius: var(--radio);
  padding: 14px 18px; margin: 16px 0; box-shadow: var(--sombra); }
.aviso-compra-ok { background: var(--panel); border: 2px solid var(--acento); border-radius: var(--radio);
  padding: 14px 18px; margin: 16px 0; box-shadow: var(--sombra); }
.aviso-compra-ok .btn { margin: 6px 8px 0 0; }
.ficha-libro { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.ficha-portada img { width: 260px; max-width: 100%; border-radius: var(--radio); box-shadow: var(--sombra); }
.ficha-datos { flex: 1; min-width: 260px; }
.ficha-datos .btn { margin-bottom: 10px; }
#paypal-botones { max-width: 420px; margin-top: 8px; }
.producto-card h3 a { color: inherit; text-decoration: none; }
.producto-card h3 a:hover { color: var(--acento); }