/* ============================================================ tema-pymes-claro.css Tema híbrido del mundo PYME: nav/footer oscuros (marca joeDEV) + contenido claro (legibilidad y confianza tipo Amazon/Play Store). Se activa agregando la clase .claro al (ver script inline en cada página). ?tema=oscuro lo desactiva para comparar. ============================================================ */ html.claro{ --bg:#faf9f6; --bg2:#ffffff; --bg3:#f3f1ec; --text:#1d1c17; --muted:#6f6a5e; --glass:rgba(108,99,255,0.06); --glass-b:rgba(108,99,255,0.22); } /* textura de ruido más tenue sobre fondo claro */ html.claro body::before{opacity:.12} /* chrome oscuro: nav y footer conservan la identidad de marca */ html.claro nav{ --text:#f0eeff;--muted:#9a95b0; background:rgba(7,7,16,0.95)!important; border-bottom:1px solid rgba(108,99,255,0.2)!important; } html.claro footer{ --text:#f0eeff;--muted:#9a95b0; --glass:rgba(108,99,255,0.07);--glass-b:rgba(108,99,255,0.18); background:#0a0a14!important;border-top:none!important; } /* tarjetas y superficies del contenido → blancas con borde suave. Scopeado a main para no tocar el chrome oscuro. */ html.claro main [class*="card"], html.claro main [class*="-box"], html.claro main [class*="item"], html.claro main details, html.claro main .tool, html.claro main .tool-card{ background:linear-gradient(160deg,#fff6ee,#f4faf8); border-color:#efe6db; } html.claro main [class*="card"]:hover{ border-color:rgba(255,106,0,0.4); box-shadow:0 16px 40px rgba(216,90,48,0.10); } /* previews / thumbnails con fondo neutro claro */ html.claro main [class*="preview"], html.claro main [class*="thumb"]{ background:#f1efe9; }