/* ============================================================
   TECNOLOAR — Sistema de diseño compartido (corporativo + tienda)
   Sobrio y tecnológico: fondo azul-negro, acento naranja de marca,
   acento azul de la "T" del logo. Sin degradados ni emojis.
   ============================================================ */
:root{
  --bg:#07090f;
  --surface:#0d111a;
  --surface2:#141926;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --accent:#ff9a1f;        /* naranja de marca */
  --accent2:#ff9a1f;       /* alias: compatibilidad con código anterior */
  --accent-hover:#ffb04d;
  --blue:#3b82f6;          /* azul de la T del logo */
  --text:#e8ecf3;
  --muted:#8a93a6;
  --success:#34d399;
  --danger:#f87171;
  --radius:10px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head:'Space Grotesk','Inter',system-ui,sans-serif;
  --max:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
::selection{background:rgba(255,154,31,.3)}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#2a3144;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Cabecera ---------- */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:8px 24px;text-align:center;font-size:.78rem;color:var(--muted);letter-spacing:.01em}
.topbar strong{color:var(--text);font-weight:600}
header{position:sticky;top:0;z-index:100;background:rgba(7,9,15,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.header-inner{max-width:var(--max);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:28px}
.logo img{height:38px;display:block}
.nav{display:flex;gap:4px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:500;padding:8px 12px;border-radius:8px;transition:.15s}
.nav a:hover,.nav a.active{color:var(--text);background:rgba(255,255,255,.05)}
.header-actions{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ---------- Botones ---------- */
.btn,.btn-wa,.btn-cart,.btn-primary,.btn-secondary,.btn-add,.btn-add-big,.btn-checkout,.btn-pri,.btn-sec,.btn-ml{font-family:var(--font);font-weight:600;border-radius:var(--radius);cursor:pointer;transition:.15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent}
.btn{padding:12px 22px;font-size:.92rem}
.btn-solid{background:var(--accent);color:#0a0a0a}
.btn-solid:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-wa{background:transparent;color:var(--text);border-color:var(--border-strong);padding:9px 16px;font-size:.84rem}
.btn-wa:hover{border-color:#25d366;color:#25d366}
.btn-wa svg{color:#25d366}

/* ---------- Pie ---------- */
footer{background:var(--surface);border-top:1px solid var(--border);color:var(--muted);font-size:.86rem}
.footer-inner{max-width:var(--max);margin:0 auto;padding:48px 24px 28px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.footer-inner img{height:36px;margin-bottom:14px}
.footer-inner h4{font-family:var(--font-head);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:14px;font-weight:600}
.footer-inner a{display:block;color:var(--muted);text-decoration:none;padding:4px 0;transition:.15s}
.footer-inner a:hover{color:var(--accent)}
.footer-inner p{max-width:320px;line-height:1.65}
.footer-bottom{max-width:var(--max);margin:0 auto;padding:18px 24px;border-top:1px solid var(--border);font-size:.78rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media(max-width:900px){.nav{display:none}.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.header-inner{gap:12px;padding:0 16px}.footer-inner{grid-template-columns:1fr}.btn-wa span{display:none}}