/* ═══════════════════════════════════════════════════════════════
   BAJAWISP — Stylesheet compartido
   Usado por: index.html, aviso-de-privacidad.html
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */
:root {
  --ink:    #050d18;
  --ink2:   #0a1628;
  --card:   #0f1e34;
  --card2:  #152540;
  --border: rgba(56,189,248,0.10);
  --border2:rgba(56,189,248,0.22);
  --blue:   #0ea5e9;
  --blue2:  #38bdf8;
  --teal:   #14b8a6;
  --teal2:  #2dd4bf;
  --amber:  #f59e0b;
  --red:    #ef4444;
  --violet: #8b5cf6;
  --green:  #22c55e;
  --text:   #cbd5e1;
  --muted:  #64748b;
  --white:  #f1f5f9;
  --r: 10px;
}

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  background: var(--ink);
  color: var(--text);
  font-family: 'Noto Sans Display', 'Open Sans', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}
::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-track { background: var(--ink) }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 4px }

/* dot grid background */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(56,189,248,0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none; z-index: 0;
}

/* ─────────────────────────────────────────
   LOGIN MODAL
───────────────────────────────────────── */
#login-modal {
  position: fixed; inset: 0;
  z-index: 600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,13,24,0.92);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
#login-modal.open { opacity: 1; visibility: visible }

.lm-box {
  width: 100%; max-width: 400px;
  padding: 0 20px;
  animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popIn {
  from { opacity:0; transform:scale(.92) translateY(20px) }
  to   { opacity:1; transform:none }
}
.lm-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 36px;
  position: relative; overflow: hidden;
}
.lm-card::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--blue2));
}
.lm-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.lm-logo-icon { width:34px; height:34px }
.lm-logo-name { font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; color: #fff; }
.lm-logo-name em { font-style:normal; color: var(--blue2) }
.lm-card h2 { font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:5px }
.lm-card p  { font-size:.82rem; color:var(--muted); margin-bottom:24px; line-height:1.55 }
.lm-close {
  position: absolute; top:16px; right:16px;
  background: none; border: 1px solid var(--border);
  border-radius: 6px; width:28px; height:28px;
  font-size:.85rem; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all .2s;
}
.lm-close:hover { border-color:var(--red); color:var(--red) }
.lm-field { margin-bottom:14px }
.lm-field label {
  display:block; font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.lm-field input {
  width:100%; background: var(--ink2);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 11px 14px;
  font-family:'Noto Sans Display',sans-serif;
  font-size:.88rem; color:var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.lm-field input:focus {
  outline:none; border-color:var(--blue);
  box-shadow: 0 0 0 3px rgba(14,165,233,.12);
}
.lm-field input::placeholder { color: var(--muted) }
.lm-btn {
  width:100%; background: var(--blue); color:#fff; border:none;
  border-radius:8px; padding:12px;
  font-family:'Noto Sans Display',sans-serif;
  font-size:.9rem; font-weight:700; letter-spacing:.03em;
  cursor:pointer; transition:all .2s; margin-top:4px;
}
.lm-btn:hover { background:#0284c7; transform:translateY(-1px); box-shadow:0 8px 22px rgba(14,165,233,.3) }
.lm-error {
  display:none;
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25);
  color:#f87171; font-size:.78rem;
  padding:9px 13px; border-radius:6px; margin-top:10px; text-align:center;
}
.lm-error.show { display:block }

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
nav {
  position: sticky; top:0; z-index:100;
  background: rgba(5,13,24,.90);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  display: flex; align-items:center; justify-content:space-between;
  height: 64px;
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none }
.brand-icon { width:36px; height:36px }
.brand-name { font-size:1.2rem; font-weight:700; letter-spacing:.05em; color:#fff; }
.brand-name em { font-style:normal; color:var(--blue2) }

.nav-links { display:flex; gap:2px; list-style:none }
.nav-links a {
  display:block; padding:7px 13px;
  font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; border-radius:6px;
  transition: all .2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--blue2); background:rgba(14,165,233,.08); }
.nav-links a.internet-link { color: var(--teal2); }
.nav-links a.internet-link:hover { background: rgba(20,184,166,.08); color:var(--teal2); }

.nav-right { display:flex; align-items:center; gap:10px }
.nav-user  { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted) }
.nav-avatar {
  width:30px; height:30px; border-radius:50%;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:#fff;
}
.nav-user-info { display:none }
.nav-user-info.visible { display:block }
.btn-logout {
  display:none; background:none; border:1px solid var(--border);
  border-radius:6px; padding:5px 11px;
  font-family:'Noto Sans Display',sans-serif;
  font-size:.72rem; color:var(--muted); cursor:pointer; transition:all .2s;
}
.btn-logout.visible { display:block }
.btn-logout:hover { border-color:var(--red); color:var(--red) }
.menu-btn {
  display:none; background:none; border:1px solid var(--border);
  border-radius:6px; padding:7px 10px; cursor:pointer; color:var(--text); font-size:1rem;
}
.mobile-nav {
  display:none; position:sticky; top:64px; z-index:99;
  background:rgba(5,13,24,.97); border-bottom:1px solid var(--border);
  padding:12px 20px;
}
.mobile-nav.open { display:block }
.mobile-nav a {
  display:block; padding:11px 0; font-size:.88rem; font-weight:600;
  color:var(--muted); text-decoration:none; border-bottom:1px solid var(--border);
}
.mobile-nav a:last-child { border-bottom:none }
.mobile-nav a:hover { color:var(--blue2) }
.mobile-nav a.internet-link { color:var(--teal2) }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
#inicio {
  min-height: calc(100vh - 64px);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 60px;
  padding: 80px 60px;
  max-width: 1280px; margin: 0 auto;
  position: relative; z-index: 1;
}
.hero-glow {
  position:absolute; border-radius:50%;
  filter:blur(130px); pointer-events:none;
}
.hg1 { width:520px; height:520px; background:rgba(14,165,233,.07); top:-100px; right:-60px; animation:float 9s ease-in-out infinite }
.hg2 { width:320px; height:320px; background:rgba(20,184,166,.05); bottom:-80px; left:-80px; animation:float 12s ease-in-out infinite reverse }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-22px)} }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.7rem; font-weight:600;
  color:var(--teal2); border:1px solid rgba(45,212,191,.3);
  padding:5px 14px; border-radius:100px; margin-bottom:22px;
}
.hero-eyebrow::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--teal2); animation:blink 1.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.hero-h1 {
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  font-weight:700; color:#fff; line-height:1.1;
  letter-spacing:-.03em; margin-bottom:20px;
}
.hero-h1 mark { background:none; -webkit-text-stroke:1.5px var(--blue2); color:transparent; }
.hero-p { font-size:.98rem; color:var(--muted); line-height:1.78; margin-bottom:34px; max-width:500px; }
.hero-ctas { display:flex; gap:13px; flex-wrap:wrap }

/* Buttons */
.btn-prim {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue); color:#fff; border:none;
  font-family:'Noto Sans Display',sans-serif;
  font-size:.87rem; font-weight:700; letter-spacing:.03em;
  padding:13px 26px; border-radius:8px;
  text-decoration:none; cursor:pointer; transition:all .2s;
}
.btn-prim:hover { background:#0284c7; transform:translateY(-2px); box-shadow:0 12px 28px rgba(14,165,233,.3) }
.btn-sec {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--text); border:1px solid var(--border2);
  font-family:'Noto Sans Display',sans-serif;
  font-size:.87rem; font-weight:600;
  padding:13px 26px; border-radius:8px;
  text-decoration:none; cursor:pointer; transition:all .2s;
}
.btn-sec:hover { border-color:var(--blue2); color:var(--blue2) }
.btn-internet {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(20,184,166,.1); color:var(--teal2);
  border:1px solid rgba(20,184,166,.3);
  font-family:'Noto Sans Display',sans-serif;
  font-size:.87rem; font-weight:700; letter-spacing:.03em;
  padding:13px 26px; border-radius:8px;
  text-decoration:none; cursor:pointer; transition:all .2s;
}
.btn-internet:hover { background:rgba(20,184,166,.18); transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,184,166,.2); }

/* Pillars */
.pillars { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:40px; }
.pillar {
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:14px;
  display:flex; align-items:center; gap:11px;
  text-decoration:none; transition:all .25s;
}
.pillar:hover { border-color:var(--border2); background:var(--card2) }
.pillar-dot {
  width:34px; height:34px; flex-shrink:0; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.pd-b { background:rgba(14,165,233,.12) }
.pd-t { background:rgba(20,184,166,.12) }
.pd-a { background:rgba(245,158,11,.10) }
.pd-p { background:rgba(139,92,246,.10) }
.pd-v { background:rgba(139,92,246,.12) }
.pd-s { background:rgba(34,197,94,.10) }
.pillar-text strong { display:block; font-size:.82rem; font-weight:700; color:#fff }
.pillar-text span   { font-size:.72rem; color:var(--muted) }

/* Hero network card */
.hero-visual { position:relative }
.net-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px; }
.net-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.nm { border-radius:8px; padding:10px; text-align:center; border:1px solid var(--border); }
.nm-val { font-size:.95rem; font-weight:500; display:block; }
.nm-lbl { font-size:.58rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:2px }
.c-b { background:rgba(14,165,233,.06); } .c-b .nm-val { color:var(--blue2) }
.c-t { background:rgba(20,184,166,.06); } .c-t .nm-val { color:var(--teal2) }
.c-a { background:rgba(245,158,11,.06); } .c-a .nm-val { color:var(--amber) }
.c-p { background:rgba(139,92,246,.06); } .c-p .nm-val { color:#a78bfa }

/* ─────────────────────────────────────────
   SECTION COMMONS
───────────────────────────────────────── */
section { padding: 90px 40px; position:relative; z-index:1 }
.inner { max-width:1200px; margin:0 auto }
.alt { background:var(--ink2) }
.s-tag {
  font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue2);
  margin-bottom:10px; display:block;
}
.s-title { font-size:clamp(1.7rem,2.6vw,2.3rem); font-weight:700; color:#fff; letter-spacing:-.02em; margin-bottom:14px; }
.s-desc  { font-size:.94rem; color:var(--muted); line-height:1.78; max-width:580px; margin-bottom:50px; }

/* fade-in on scroll */
.fi { opacity:0; transform:translateY(18px); transition:opacity .55s ease,transform .55s ease }
.fi.in { opacity:1; transform:none }

/* ─────────────────────────────────────────
   SOFTWARE / ERP / CRM
───────────────────────────────────────── */
#software {
  background: linear-gradient(135deg, rgba(139,92,246,.04), rgba(14,165,233,.03));
  border-bottom: 1px solid rgba(139,92,246,.12);
}

#software .sw-layout {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start;
}

/* Feature list */
.sw-features { display:flex; flex-direction:column; gap:13px; }
.sw-feat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 22px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: all .25s; position: relative; overflow: hidden;
}
.sw-feat::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--violet); opacity:0; transition:opacity .25s;
}
.sw-feat:hover { border-color:var(--border2); transform:translateX(4px) }
.sw-feat:hover::before { opacity:1 }
.sw-feat-icon {
  width:42px; height:42px; flex-shrink:0; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.sw-ic-v { background:rgba(139,92,246,.12) }
.sw-ic-b { background:rgba(14,165,233,.12) }
.sw-ic-t { background:rgba(20,184,166,.12) }
.sw-ic-a { background:rgba(245,158,11,.10) }
.sw-ic-g { background:rgba(34,197,94,.10) }
.sw-feat h4  { font-size:.92rem; font-weight:700; color:#fff; margin-bottom:5px }
.sw-feat p   { font-size:.79rem; color:var(--muted); line-height:1.58 }
.sw-feat-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px }
.swt {
  font-size:.6rem; font-weight:600;
  color:var(--violet); background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.18); padding:2px 7px; border-radius:4px;
}

/* ERP mockup */
.erp-mock {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  position: sticky; top: 80px;
}
.erp-topbar {
  background: var(--ink2); padding: 11px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.erp-wd-wrap { display:flex; gap:5px }
.erp-wd { width:9px; height:9px; border-radius:50% }
.erp-wd1{background:#ef4444} .erp-wd2{background:#f59e0b} .erp-wd3{background:#22c55e}
.erp-url {
  flex:1; background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:5px; padding:4px 10px;
  font-size:.65rem; color:var(--muted);
}
.erp-inner { display:flex; height:360px; }

/* Sidebar */
.erp-sidebar {
  width: 54px; background: rgba(10,22,40,.8);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0; gap: 6px;
}
.erp-sb-item {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; cursor: pointer; transition: all .2s;
  color: var(--muted);
}
.erp-sb-item.active { background: rgba(139,92,246,.15); color: #a78bfa; }
.erp-sb-item:hover  { background: rgba(255,255,255,.05); color: var(--text); }

/* Main content */
.erp-main { flex: 1; overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.erp-header { display:flex; justify-content:space-between; align-items:center; }
.erp-title { font-size:.72rem; font-weight:700; color:#fff; }
.erp-badge {
  font-size:.58rem; font-weight:600; padding:2px 8px; border-radius:100px;
  background:rgba(139,92,246,.12); color:#a78bfa; border:1px solid rgba(139,92,246,.2);
}

/* KPI row */
.erp-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.erp-kpi {
  background: var(--ink2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 10px;
}
.erp-kpi-val { font-size:.88rem; font-weight:700; display:block; }
.erp-kpi-lbl { font-size:.56rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:1px }
.kv-v { color:#a78bfa } .kv-b { color:var(--blue2) } .kv-t { color:var(--teal2) } .kv-a { color:var(--amber) }

/* Chart area */
.erp-chart-wrap {
  background: var(--ink2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.erp-chart-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.erp-chart-ttl { font-size:.65rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.erp-chart-pills { display:flex; gap:4px; }
.erp-pill {
  font-size:.55rem; padding:2px 7px; border-radius:100px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--muted);
  transition:all .2s;
}
.erp-pill.sel { background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.3); color:#a78bfa; }

.erp-chart { height: 68px; display:flex; align-items:flex-end; gap:4px; }
.erp-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.erp-bar {
  width:100%; border-radius:3px 3px 0 0;
  background: linear-gradient(180deg, rgba(139,92,246,.7), rgba(139,92,246,.3));
  transition: height .6s cubic-bezier(.34,1.56,.64,1);
  min-height: 4px;
}
.erp-bar.accent { background: linear-gradient(180deg, rgba(14,165,233,.8), rgba(14,165,233,.3)); }
.erp-bar-lbl { font-size:.52rem; color:var(--muted); }

/* Table */
.erp-table-wrap {
  background: var(--ink2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; flex:1;
}
.erp-table-hdr {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.erp-th { font-size:.56rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.erp-row {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.03);
  align-items: center; transition: background .15s;
}
.erp-row:last-child { border-bottom:none }
.erp-row:hover { background:rgba(255,255,255,.03) }
.erp-td-name { font-size:.68rem; color:#fff; font-weight:600; }
.erp-td-sub  { font-size:.58rem; color:var(--muted); }
.erp-td      { font-size:.65rem; color:var(--text); }
.erp-status {
  display:inline-block; font-size:.55rem; padding:2px 7px; border-radius:100px; font-weight:600;
}
.es-ok   { background:rgba(34,197,94,.1);  color:#4ade80; border:1px solid rgba(34,197,94,.2) }
.es-pend { background:rgba(245,158,11,.1); color:#fbbf24; border:1px solid rgba(245,158,11,.2) }
.es-new  { background:rgba(14,165,233,.1); color:var(--blue2); border:1px solid rgba(14,165,233,.2) }

/* ─────────────────────────────────────────
   INTERNET SECTION
───────────────────────────────────────── */
#internet {
  background: linear-gradient(135deg, rgba(20,184,166,.05), rgba(14,165,233,.04));
  border-top: 1px solid rgba(45,212,191,.15);
  border-bottom: 1px solid rgba(45,212,191,.15);
}
.internet-gate {
  text-align:center; padding: 60px 20px;
  background:var(--card); border:1px solid rgba(45,212,191,.2);
  border-radius:16px; position:relative; overflow:hidden;
}
.internet-gate::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 0%, rgba(20,184,166,.08), transparent 60%);
  pointer-events:none;
}
.gate-icon  { font-size:2.8rem; margin-bottom:16px }
.gate-title { font-size:1.3rem; font-weight:700; color:#fff; margin-bottom:10px }
.gate-desc  { font-size:.88rem; color:var(--muted); line-height:1.7; max-width:440px; margin:0 auto 28px }
#internet-content { display:none }
#internet-content.unlocked { display:block; animation:fadeUp .5s ease both }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.int-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.int-card {
  background:var(--card); border:1px solid rgba(45,212,191,.15);
  border-radius:12px; padding:26px; transition:all .25s;
}
.int-card:hover { border-color:rgba(45,212,191,.35); transform:translateY(-4px) }
.int-card-icon {
  width:44px; height:44px; background:rgba(20,184,166,.1);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; margin-bottom:18px;
}
.int-card h4 { font-size:.93rem; font-weight:700; color:#fff; margin-bottom:8px }
.int-card p  { font-size:.8rem; color:var(--muted); line-height:1.58 }
.int-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px }
.tag {
  font-size:.62rem; font-weight:600;
  color:var(--teal2); background:rgba(45,212,191,.08);
  border:1px solid rgba(45,212,191,.18); padding:2px 8px; border-radius:4px;
}
.int-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.int-user   { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); }
.int-avatar {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color:#fff;
}

/* ─────────────────────────────────────────
   REDES & SERVIDORES
───────────────────────────────────────── */
#redes .two-col { display:grid; grid-template-columns:1.1fr 1fr; gap:52px; align-items:start; }
.feat-stack { display:flex; flex-direction:column; gap:14px }
.feat {
  display:flex; gap:15px;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:22px; transition:all .25s;
  position:relative; overflow:hidden;
}
.feat::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--blue); opacity:0; transition:opacity .25s;
}
.feat:hover { border-color:var(--border2); transform:translateX(4px) }
.feat:hover::before { opacity:1 }
.feat-icon {
  width:40px; height:40px; flex-shrink:0;
  background:rgba(14,165,233,.1); border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.feat h4  { font-size:.91rem; font-weight:700; color:#fff; margin-bottom:5px }
.feat p   { font-size:.78rem; color:var(--muted); line-height:1.55 }
.feat-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px }
.ft {
  font-size:.6rem; font-weight:600;
  color:var(--blue2); background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.16); padding:2px 7px; border-radius:4px;
}
/* NOC Dashboard */
.srv-dash {
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:24px; position:sticky; top:80px;
}
.dash-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px }
.dash-ttl { font-size:.72rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase }
.live-pill { display:flex; align-items:center; gap:5px; font-size:.62rem; color:#4ade80; }
.live-dot  { width:6px; height:6px; border-radius:50%; background:#4ade80; animation:blink 1.2s infinite; }
.srv-list  { display:flex; flex-direction:column; gap:10px }
.srv {
  background:var(--ink2); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px;
}
.srv-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.srv-name { font-size:.74rem; color:#fff }
.badge    { font-size:.6rem; padding:2px 8px; border-radius:100px; }
.ok   { background:rgba(74,222,128,.1);  color:#4ade80;  border:1px solid rgba(74,222,128,.2) }
.warn { background:rgba(251,191,36,.1);  color:#fbbf24;  border:1px solid rgba(251,191,36,.2) }
.bar-row { display:flex; align-items:center; gap:7px; margin-bottom:5px }
.bar-lbl { font-size:.6rem; color:var(--muted); width:30px; flex-shrink:0 }
.bar-trk { flex:1; height:4px; background:rgba(255,255,255,.05); border-radius:2px; overflow:hidden }
.bar-fil { height:100%; border-radius:2px }
.bar-val { font-size:.6rem; color:var(--muted); width:26px; text-align:right; flex-shrink:0 }
.bb { background:var(--blue) } .bt { background:var(--teal) } .ba { background:var(--amber) }
.net-metrics-sm { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.ms { background:var(--ink2); border:1px solid var(--border); border-radius:8px; padding:10px; text-align:center }
.ms-val { font-size:1.1rem; font-weight:500; color:var(--blue); display:block }
.ms-lbl { font-size:.58rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em }

/* ─────────────────────────────────────────
   HOTSPOT
───────────────────────────────────────── */
#hotspot .hot-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:52px; align-items:start; }
.hot-stack { display:flex; flex-direction:column; gap:13px }
.hot-item {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:20px 22px;
  display:flex; gap:15px; align-items:flex-start; transition:all .25s;
}
.hot-item:hover { border-color:var(--border2); background:var(--card2) }
.hot-num {
  font-size:.68rem; font-weight:700;
  color:var(--teal2); background:rgba(45,212,191,.08);
  border:1px solid rgba(45,212,191,.2);
  padding:3px 9px; border-radius:4px; flex-shrink:0; margin-top:2px;
}
.hot-item h4 { font-size:.9rem; font-weight:700; color:#fff; margin-bottom:5px }
.hot-item p  { font-size:.78rem; color:var(--muted); line-height:1.55 }
.portal-mock { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.pm-bar {
  background:var(--ink2); padding:11px 15px;
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--border);
}
.wd-wrap { display:flex; gap:5px }
.wd { width:9px; height:9px; border-radius:50% }
.wd1{background:#ef4444} .wd2{background:#f59e0b} .wd3{background:#22c55e}
.pm-url {
  flex:1; background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:5px; padding:4px 10px; font-size:.65rem; color:var(--muted);
}
.pm-body  { padding:26px; text-align:center }
.pm-hotel { font-size:1.1rem; font-weight:700; color:#fff; letter-spacing:.08em; margin-bottom:3px }
.pm-hotel span { color:var(--blue2) }
.pm-sub   { font-size:.68rem; color:var(--muted); margin-bottom:20px }
.pm-plans { display:flex; gap:8px; justify-content:center; margin-bottom:18px }
.pc {
  background:var(--ink2); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px; min-width:84px; cursor:pointer; transition:all .2s;
}
.pc.sel  { border-color:var(--blue); background:rgba(14,165,233,.08) }
.pc .speed{ font-size:.95rem; font-weight:500; color:#fff }
.pc .dur  { font-size:.62rem; color:var(--muted); margin-top:2px }
.pc .price{ font-size:.75rem; color:var(--teal2); font-weight:700; margin-top:4px }
.pc.sel .speed { color:var(--blue2) }
.pm-btn {
  width:100%; background:var(--blue); color:#fff; border:none;
  border-radius:8px; padding:10px;
  font-family:'Noto Sans Display',sans-serif; font-size:.84rem; font-weight:700; cursor:pointer;
}
.pm-note { font-size:.65rem; color:var(--muted); margin-top:8px }

/* ─────────────────────────────────────────
   TELEFONÍA IP
───────────────────────────────────────── */
#voip .voip-layout { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.voip-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.vf {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:20px; transition:all .25s;
}
.vf:hover { border-color:var(--border2); background:var(--card2) }
.vf-icon { font-size:1.3rem; margin-bottom:10px }
.vf h4 { font-size:.86rem; font-weight:700; color:#fff; margin-bottom:5px }
.vf p  { font-size:.76rem; color:var(--muted); line-height:1.52 }
.phone-ui { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.ph-head {
  background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(20,184,166,.09));
  padding:18px 22px; border-bottom:1px solid var(--border);
}
.ph-tag { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px }
.ph-num { font-size:1.5rem; font-weight:500; color:#fff; letter-spacing:.04em }
.ph-ext { font-size:.68rem; color:var(--blue2); margin-top:2px }
.ph-body { padding:18px 22px }
.log-lbl { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px }
.call-log { display:flex; flex-direction:column; gap:7px }
.call {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; background:var(--ink2);
  border:1px solid var(--border); border-radius:8px;
}
.call-ic   { font-size:.85rem }
.call-name { font-size:.75rem; color:#fff; flex:1 }
.call-tm   { font-size:.62rem; color:var(--muted) }
.call-dur  { font-size:.62rem; color:var(--teal2) }
.voip-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.vs { background:var(--ink2); border:1px solid var(--border); border-radius:8px; padding:10px; text-align:center }
.vs-val { font-size:1rem; font-weight:500; color:var(--blue2); display:block }
.vs-lbl { font-size:.58rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:2px }

/* ─────────────────────────────────────────
   DOMINIOS
───────────────────────────────────────── */
#dominios .dom-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:52px; align-items:start; }
.dom-search-box { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:28px; }
.dom-box-title { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:18px }
.dom-bar { display:flex; gap:0; margin-bottom:18px }
.dom-input {
  flex:1; background:var(--ink2); border:1px solid var(--border);
  border-radius:8px 0 0 8px; padding:11px 15px;
  font-family:'Noto Sans Display',sans-serif; font-size:.88rem; color:var(--text);
}
.dom-input:focus { outline:none; border-color:var(--blue) }
.dom-go {
  background:var(--blue); color:#fff; border:none;
  border-radius:0 8px 8px 0; padding:11px 18px;
  font-family:'Noto Sans Display',sans-serif; font-weight:700; font-size:.84rem; cursor:pointer; transition:background .2s;
}
.dom-go:hover { background:#0284c7 }
.dom-results { display:flex; flex-direction:column; gap:7px }
.dom-row {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--ink2); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px;
}
.dom-name  { font-size:.8rem; color:#fff }
.dom-ext   { color:var(--blue2) }
.avail     { font-size:.7rem; font-weight:700; color:#4ade80 }
.taken     { font-size:.7rem; font-weight:700; color:#f87171 }
.dom-price { font-size:.75rem; color:var(--teal2) }
.dom-quote {
  font-size:.72rem; font-weight:600;
  color: var(--teal2); background: rgba(45,212,191,.08);
  border: 1px solid rgba(45,212,191,.2);
  padding: 3px 10px; border-radius: 4px;
  text-decoration: none; transition: all .2s; white-space: nowrap;
}
.dom-quote:hover { background: rgba(45,212,191,.16); border-color: rgba(45,212,191,.4); }
.dom-services { display:flex; flex-direction:column; gap:12px }
.ds {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:18px 20px; transition:all .25s;
}
.ds:hover { border-color:var(--border2) }
.ds-top { display:flex; align-items:center; gap:10px; margin-bottom:7px }
.ds-ic  { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.ds h4  { font-size:.88rem; font-weight:700; color:#fff }
.ds p   { font-size:.78rem; color:var(--muted); line-height:1.55 }
.ic-b { background:rgba(14,165,233,.1) }
.ic-t { background:rgba(20,184,166,.1) }
.ic-a { background:rgba(245,158,11,.1) }
.ic-p { background:rgba(139,92,246,.1) }
.ic-g { background:rgba(34,197,94,.1)  }

/* ─────────────────────────────────────────
   SERVICIOS ADICIONALES
───────────────────────────────────────── */
#adicionales .add-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.add-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; transition:all .25s;
}
.add-card:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,.3) }
.add-head { padding:22px 22px 0; display:flex; gap:13px; align-items:flex-start }
.add-ic   { width:42px; height:42px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.add-card h3      { font-size:.92rem; font-weight:700; color:#fff; margin-bottom:5px }
.add-card>div>p   { font-size:.78rem; color:var(--muted); line-height:1.55 }
.add-list         { list-style:none; border-top:1px solid var(--border); padding:12px 22px; margin-top:14px; }
.add-list li      { font-size:.75rem; color:var(--muted); padding:4px 0 4px 13px; position:relative; }
.add-list li::before { content:'›'; position:absolute; left:0; color:var(--blue2) }

/* ─────────────────────────────────────────
   CTA
───────────────────────────────────────── */
#cta {
  background:linear-gradient(135deg,rgba(14,165,233,.07),rgba(20,184,166,.05));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:80px 40px; text-align:center;
}
#cta h2  { font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:700; color:#fff; margin-bottom:13px }
#cta p   { font-size:.93rem; color:var(--muted); max-width:510px; margin:0 auto 30px; line-height:1.75 }
.cta-btns { display:flex; gap:13px; justify-content:center; flex-wrap:wrap }

/* ─────────────────────────────────────────
   CONTACTO
───────────────────────────────────────── */
#contacto .cont-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:52px; }
.cont-info h3 { font-size:.98rem; font-weight:700; color:#fff; margin-bottom:20px }
.cdet { display:flex; gap:13px; margin-bottom:16px; align-items:flex-start }
.cdet-ic {
  width:37px; height:37px; flex-shrink:0;
  background:rgba(14,165,233,.08); border:1px solid rgba(14,165,233,.18);
  border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.cdet small  { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:2px }
.cdet strong { font-size:.86rem; color:#fff }
.cont-form { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:34px; }
.cont-form h3 { font-size:.98rem; font-weight:700; color:#fff; margin-bottom:22px }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.fg { margin-bottom:12px }
.fg label {
  display:block; font-size:.67rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.fg input,.fg select,.fg textarea {
  width:100%; background:var(--ink2); border:1px solid var(--border);
  border-radius:7px; padding:10px 14px;
  font-family:'Noto Sans Display',sans-serif; font-size:.87rem; color:var(--text); transition:border-color .2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus { outline:none; border-color:var(--blue) }
.fg select option { background:var(--card) }
.fg textarea { resize:vertical; min-height:85px }
.form-err {
  display:none; font-size:.7rem; color:#f87171;
  margin-top:5px; padding:4px 8px;
  background:rgba(239,68,68,.08);
  border-left:2px solid rgba(239,68,68,.4); border-radius:0 4px 4px 0;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
  background:var(--ink2); border-top:1px solid var(--border);
  padding:50px 40px 26px;
}
.foot-inner { max-width:1200px; margin:0 auto }
.foot-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:44px; padding-bottom:34px; border-bottom:1px solid var(--border);
}
.foot-brand p { font-size:.8rem; color:var(--muted); line-height:1.7; margin:13px 0 16px }
.foot-soc { display:flex; gap:7px }
.fsoc {
  width:31px; height:31px; background:var(--card); border:1px solid var(--border);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:var(--muted); text-decoration:none; transition:all .2s;
}
.fsoc:hover { border-color:var(--blue2); color:var(--blue2) }
.foot-col h4 {
  font-size:.67rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:13px;
}
.foot-col a {
  display:block; font-size:.8rem; color:var(--muted);
  text-decoration:none; padding:4px 0; transition:color .2s;
}
.foot-col a:hover      { color:var(--blue2) }
.foot-col a.teal:hover { color:var(--teal2) }
.foot-bot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:20px; font-size:.74rem; color:var(--muted); flex-wrap:wrap; gap:6px;
}
.foot-bot a { color:var(--muted); text-decoration:none }
.foot-bot a:hover { color:var(--blue2) }

/* ─────────────────────────────────────────
   AVISO DE PRIVACIDAD (página separada)
───────────────────────────────────────── */
.nav-back {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.8rem; color:var(--muted); text-decoration:none;
  border:1px solid var(--border); border-radius:6px; padding:6px 13px; transition:all .2s;
}
.nav-back:hover { border-color:var(--border2); color:var(--blue2) }
.ap-hero  { position:relative; z-index:1; max-width:860px; margin:0 auto; padding:64px 40px 0; }
.ap-tag   { font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue2); margin-bottom:10px; display:block; }
.ap-title { font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; color:#fff; letter-spacing:-.02em; margin-bottom:10px; }
.ap-meta  { font-size:.82rem; color:var(--muted); margin-bottom:48px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.ap-meta strong { color:var(--text) }
.ap-body  { position:relative; z-index:1; max-width:860px; margin:0 auto; padding:0 40px 80px; }
.ap-section {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:28px 32px; margin-bottom:16px; transition:border-color .25s;
}
.ap-section:hover    { border-color:var(--border2) }
.ap-section-num      { font-size:.65rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal2); margin-bottom:8px; display:block; }
.ap-section h2       { font-size:.96rem; font-weight:700; color:#fff; margin-bottom:14px; }
.ap-section p        { font-size:.875rem; color:var(--text); line-height:1.82; }
.ap-section ol       { margin:10px 0 0 18px; }
.ap-section ol li    { font-size:.875rem; color:var(--text); line-height:1.82; margin-bottom:5px; }
.ap-link             { color:var(--blue2); text-decoration:none; border-bottom:1px solid rgba(56,189,248,.25); transition:border-color .2s; }
.ap-link:hover       { border-color:var(--blue2) }
.ap-email-btn {
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  background:rgba(14,165,233,.08); border:1px solid rgba(14,165,233,.2);
  color:var(--blue2); border-radius:7px; padding:9px 16px; font-size:.82rem; text-decoration:none; transition:all .2s;
}
.ap-email-btn:hover  { background:rgba(14,165,233,.15); border-color:rgba(14,165,233,.4); }
.ap-footer           { background:var(--ink2); border-top:1px solid var(--border); padding:28px 40px; text-align:center; position:relative; z-index:1; }
.ap-footer p         { font-size:.78rem; color:var(--muted) }
.ap-footer a         { color:var(--muted); text-decoration:none }
.ap-footer a:hover   { color:var(--blue2) }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media(max-width:1024px){
  nav { padding:0 20px }
  .nav-links  { display:none }
  .menu-btn   { display:block }
  #inicio     { grid-template-columns:1fr; padding:60px 24px 100px; min-height:auto }
  .pillars    { display:none }
  .hero-visual{ order:-1 }
  #software .sw-layout,
  #redes .two-col, #hotspot .hot-grid,
  #voip .voip-layout, #dominios .dom-layout,
  #contacto .cont-grid { grid-template-columns:1fr }
  .srv-dash   { position:static }
  .erp-mock   { position:static }
  .add-grid   { grid-template-columns:1fr 1fr }
  .foot-top   { grid-template-columns:1fr 1fr }
  section     { padding:64px 20px }
  .ap-hero, .ap-body { padding-left:16px; padding-right:16px }
}
@media(max-width:640px){
  .voip-grid  { grid-template-columns:1fr }
  .add-grid   { grid-template-columns:1fr }
  .pm-plans   { flex-wrap:wrap }
  .f-row      { grid-template-columns:1fr }
  .foot-top   { grid-template-columns:1fr }
  .hero-ctas  { flex-direction:column }
  .btn-prim,.btn-sec,.btn-internet { width:100%; justify-content:center }
  .erp-kpis   { grid-template-columns:repeat(2,1fr) }
  .erp-inner  { height:auto; flex-direction:column }
  .erp-sidebar{ width:100%; flex-direction:row; height:44px; padding:0 10px; }
  .ap-section { padding:20px }
  nav         { padding:0 16px }
}

/* ─────────────────────────────────────────
   TEMA DÍA (6:00 – 19:59 hora local)
   Se activa con body.theme-day
───────────────────────────────────────── */
body.theme-day {
  --ink:    #f0f4f8;
  --ink2:   #e2e8f0;
  --card:   #ffffff;
  --card2:  #f8fafc;
  --border: rgba(14,165,233,0.15);
  --border2:rgba(14,165,233,0.35);
  --text:   #1e293b;
  --muted:  #64748b;
  --white:  #0f172a;
  background: var(--ink);
  color: var(--text);
}

/* Dot grid más sutil en día */
body.theme-day::before {
  background-image: radial-gradient(rgba(14,165,233,0.10) 1px, transparent 1px);
}

/* Nav día */
body.theme-day nav {
  background: rgba(240,244,248,.95);
  border-bottom-color: rgba(14,165,233,.2);
}

/* Hero glows más visibles en día */
body.theme-day .hg1 { background: rgba(14,165,233,.10); }
body.theme-day .hg2 { background: rgba(20,184,166,.08); }

/* Cards día */
body.theme-day .feat,
body.theme-day .hot-item,
body.theme-day .vf,
body.theme-day .ds,
body.theme-day .add-card,
body.theme-day .int-card,
body.theme-day .sw-feat,
body.theme-day .lm-card,
body.theme-day .cont-form,
body.theme-day .dom-search-box,
body.theme-day .net-card,
body.theme-day .srv-dash,
body.theme-day .erp-mock,
body.theme-day .portal-mock,
body.theme-day .phone-ui {
  background: #ffffff;
  border-color: rgba(14,165,233,.18);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

body.theme-day .srv,
body.theme-day .ms,
body.theme-day .vs,
body.theme-day .call,
body.theme-day .nm,
body.theme-day .pc,
body.theme-day .erp-kpi,
body.theme-day .erp-chart-wrap,
body.theme-day .erp-table-wrap,
body.theme-day .erp-row,
body.theme-day .erp-sidebar,
body.theme-day .erp-topbar,
body.theme-day .pm-bar {
  background: #f1f5f9;
  border-color: rgba(14,165,233,.15);
}

body.theme-day .erp-main,
body.theme-day .lm-field input,
body.theme-day .dom-input,
body.theme-day .fg input,
body.theme-day .fg select,
body.theme-day .fg textarea {
  background: #f8fafc;
  border-color: rgba(14,165,233,.2);
  color: #1e293b;
}

/* Textos en día */
body.theme-day .srv-name,
body.theme-day .call-name,
body.theme-day .erp-td-name,
body.theme-day .pm-hotel,
body.theme-day .ph-num,
body.theme-day .erp-title,
body.theme-day h1, body.theme-day h2,
body.theme-day h3, body.theme-day h4,
body.theme-day .feat h4, body.theme-day .vf h4,
body.theme-day .hot-item h4, body.theme-day .ds h4,
body.theme-day .add-card h3, body.theme-day .int-card h4,
body.theme-day .sw-feat h4, body.theme-day .cont-form h3,
body.theme-day .cont-info h3, body.theme-day .dom-box-title,
body.theme-day .hero-h1, body.theme-day .s-title,
body.theme-day .lm-card h2, body.theme-day .gate-title,
body.theme-day .ap-title, body.theme-day .ap-section h2 {
  color: #0f172a;
}

/* Sección alt en día */
body.theme-day .alt { background: #e8eef5; }

/* Internet section día */
body.theme-day #internet {
  background: linear-gradient(135deg, rgba(20,184,166,.06), rgba(14,165,233,.05));
}
body.theme-day .internet-gate {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* Software section día */
body.theme-day #software {
  background: linear-gradient(135deg, rgba(139,92,246,.05), rgba(14,165,233,.04));
}

/* CTA día */
body.theme-day #cta {
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(20,184,166,.06));
}

/* Footer día */
body.theme-day footer { background: #e2e8f0; }
body.theme-day .ap-footer { background: #e2e8f0; }

/* Scrollbar día */
body.theme-day::-webkit-scrollbar-track { background: #f0f4f8; }

/* Mobile nav día */
body.theme-day .mobile-nav {
  background: rgba(240,244,248,.98);
  border-bottom-color: rgba(14,165,233,.2);
}

/* Indicador tema */
#theme-indicator {
  position: fixed; bottom: 18px; right: 18px; z-index: 500;
  display: flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 100px; padding: 7px 14px 7px 10px;
  font-size: .72rem; color: var(--muted);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  cursor: pointer; transition: all .3s;
  user-select: none;
}
#theme-indicator:hover { border-color: var(--blue); color: var(--blue2); }
#theme-indicator .ti-icon { font-size: 1rem; }

/* ─────────────────────────────────────────
   TEMA DÍA — correcciones de contraste
───────────────────────────────────────── */

/* Textos generales */
body.theme-day { color: #1e293b; }
body.theme-day p, body.theme-day li,
body.theme-day span, body.theme-day small,
body.theme-day label, body.theme-day td { color: #334155; }

/* Textos muted */
body.theme-day .hero-p,
body.theme-day .s-desc,
body.theme-day .feat p,
body.theme-day .hot-item p,
body.theme-day .vf p,
body.theme-day .ds p,
body.theme-day .add-card > div > p,
body.theme-day .int-card p,
body.theme-day .sw-feat p,
body.theme-day .gate-desc,
body.theme-day .pm-sub,
body.theme-day .pm-note,
body.theme-day .ph-tag,
body.theme-day .log-lbl,
body.theme-day .bar-lbl,
body.theme-day .bar-val,
body.theme-day .ms-lbl,
body.theme-day .vs-lbl,
body.theme-day .nm-lbl,
body.theme-day .dash-ttl,
body.theme-day .erp-kpi-lbl,
body.theme-day .erp-th,
body.theme-day .erp-td-sub,
body.theme-day .erp-bar-lbl,
body.theme-day .erp-chart-ttl,
body.theme-day .foot-brand p,
body.theme-day .cdet small,
body.theme-day .ap-meta,
body.theme-day .ap-section p,
body.theme-day .ap-section ol li,
body.theme-day .ap-footer p,
body.theme-day .foot-bot { color: #64748b; }

/* Textos blancos que se pierden en día */
body.theme-day .srv-name,
body.theme-day .call-name,
body.theme-day .erp-td-name,
body.theme-day .erp-title,
body.theme-day .dom-name,
body.theme-day .pm-hotel,
body.theme-day .ph-num,
body.theme-day .pc .speed,
body.theme-day .pc.sel .speed,
body.theme-day .hot-num,
body.theme-day .nm-val,
body.theme-day .ms-val,
body.theme-day .vs-val,
body.theme-day .erp-kpi-val,
body.theme-day .erp-td,
body.theme-day .live-pill,
body.theme-day .dash-hdr,
body.theme-day .badge,
body.theme-day .cdet strong,
body.theme-day .nav-links a,
body.theme-day .mobile-nav a,
body.theme-day .foot-col a,
body.theme-day .foot-bot a { color: #1e293b; }

/* Nav links hover en día */
body.theme-day .nav-links a:hover,
body.theme-day .nav-links a.active { color: var(--blue); background: rgba(14,165,233,.10); }
body.theme-day .nav-links a.internet-link { color: var(--teal); }
body.theme-day .mobile-nav a:hover { color: var(--blue); }
body.theme-day .foot-col a:hover   { color: var(--blue); }

/* Brand name */
body.theme-day .brand-name { color: #0f172a; }

/* Inputs y selects */
body.theme-day .lm-field input,
body.theme-day .dom-input,
body.theme-day .fg input,
body.theme-day .fg select,
body.theme-day .fg textarea { color: #1e293b; }
body.theme-day .fg select option { background: #ffffff; color: #1e293b; }

/* ── SVG del net-card — líneas y nodos ── */
body.theme-day .net-card { background: #ffffff; }

/* Fondo de los nodos SVG */
body.theme-day .net-card svg rect[fill="rgba(10,22,40,0.95)"] { fill: #f1f5f9; }

/* Líneas de la grilla */
body.theme-day .net-card line[stroke="rgba(56,189,248,0.05)"] { stroke: rgba(14,165,233,.15); }

/* Textos dentro del SVG */
body.theme-day .net-card text[fill="#64748b"] { fill: #94a3b8; }

/* Líneas de conexión más visibles en día */
body.theme-day .net-card line[stroke="rgba(14,165,233,0.22)"] { stroke: rgba(14,165,233,.5); }
body.theme-day .net-card line[stroke="rgba(20,184,166,0.22)"] { stroke: rgba(20,184,166,.5); }
body.theme-day .net-card line[stroke="rgba(245,158,11,0.18)"] { stroke: rgba(245,158,11,.45); }
body.theme-day .net-card line[stroke="rgba(139,92,246,0.18)"] { stroke: rgba(139,92,246,.45); }

/* ── Dominios — disponibilidad ── */
body.theme-day .dom-row { background: #f8fafc; border-color: rgba(14,165,233,.15); }
body.theme-day .dom-name { color: #1e293b; }
body.theme-day .dom-ext  { color: var(--blue); }
body.theme-day .avail    { color: #16a34a; }
body.theme-day .taken    { color: #dc2626; }
body.theme-day .dom-price { color: var(--teal); }
body.theme-day .dom-quote {
  color: var(--teal);
  background: rgba(20,184,166,.08);
  border-color: rgba(20,184,166,.3);
}

/* ── Tags y pills ── */
body.theme-day .ft  { color: var(--blue);   background: rgba(14,165,233,.08);  border-color: rgba(14,165,233,.2); }
body.theme-day .swt { color: #7c3aed;       background: rgba(139,92,246,.08);  border-color: rgba(139,92,246,.2); }
body.theme-day .tag { color: var(--teal);   background: rgba(20,184,166,.08);  border-color: rgba(20,184,166,.2); }
body.theme-day .erp-badge { color: #7c3aed; background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.2); }
body.theme-day .erp-pill  { color: #64748b; background: rgba(0,0,0,.04);       border-color: rgba(0,0,0,.1); }
body.theme-day .erp-pill.sel { color: #7c3aed; background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.3); }

/* ── Status badges ── */
body.theme-day .ok   { background:rgba(22,163,74,.10);  color:#16a34a; border-color:rgba(22,163,74,.25) }
body.theme-day .warn { background:rgba(217,119,6,.10);  color:#d97706; border-color:rgba(217,119,6,.25) }
body.theme-day .es-ok   { background:rgba(22,163,74,.10);  color:#16a34a; border-color:rgba(22,163,74,.2) }
body.theme-day .es-pend { background:rgba(217,119,6,.10);  color:#d97706; border-color:rgba(217,119,6,.2) }
body.theme-day .es-new  { background:rgba(14,165,233,.10); color:var(--blue); border-color:rgba(14,165,233,.2) }

/* ── Hero mark (texto outline) ── */
body.theme-day .hero-h1 mark { -webkit-text-stroke-color: var(--blue); }

/* ── Eyebrow y s-tag ── */
body.theme-day .hero-eyebrow { color: var(--teal); border-color: rgba(20,184,166,.4); }
body.theme-day .hero-eyebrow::before { background: var(--teal); }
body.theme-day .s-tag { color: var(--blue); }

/* ── Pillar text ── */
body.theme-day .pillar { background: #ffffff; border-color: rgba(14,165,233,.18); }
body.theme-day .pillar:hover { background: #f1f5f9; }
body.theme-day .pillar-text strong { color: #0f172a; }
body.theme-day .pillar-text span   { color: #64748b; }

/* ── Internet gate ── */
body.theme-day .gate-title { color: #0f172a; }
body.theme-day .internet-gate::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(20,184,166,.10), transparent 60%);
}

/* ── CTA ── */
body.theme-day #cta h2 { color: #0f172a; }
body.theme-day #cta p  { color: #475569; }

/* ── ERP sidebar ── */
body.theme-day .erp-sb-item        { color: #94a3b8; }
body.theme-day .erp-sb-item.active { background: rgba(139,92,246,.12); color: #7c3aed; }
body.theme-day .erp-sb-item:hover  { background: rgba(0,0,0,.05); color: #334155; }

/* ── ERP chart bars ── */
body.theme-day .erp-bar { background: linear-gradient(180deg, rgba(139,92,246,.65), rgba(139,92,246,.25)); }
body.theme-day .erp-bar.accent { background: linear-gradient(180deg, rgba(14,165,233,.75), rgba(14,165,233,.25)); }

/* ── PH head gradient ── */
body.theme-day .ph-head {
  background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(20,184,166,.08));
}

/* ── Btn secundario ── */
body.theme-day .btn-sec { color: #334155; border-color: rgba(14,165,233,.35); }
body.theme-day .btn-sec:hover { color: var(--blue); border-color: var(--blue); }

/* ── Aviso de privacidad ── */
body.theme-day .ap-section { background: #ffffff; border-color: rgba(14,165,233,.18); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
body.theme-day .ap-section-num { color: var(--teal); }
body.theme-day .ap-section h2  { color: #0f172a; }
body.theme-day .ap-link { color: var(--blue); border-bottom-color: rgba(14,165,233,.3); }
body.theme-day .ap-email-btn { color: var(--blue); }

/* ── Indicador flotante ── */
body.theme-day #theme-indicator { background: #ffffff; border-color: rgba(14,165,233,.3); }
body.theme-day #theme-indicator:hover { border-color: var(--blue); color: var(--blue); }

/* Solo el srv-dash y erp-mock son sticky en desktop */
@media (max-width: 1024px) {
  .srv-dash,
  .erp-mock,
  .phone-ui {
    position: static !important;
  }
}

/* overflow:hidden en estos contenedores
   interrumpe el scroll nativo en Chrome/Safari móvil.
   clip hace lo mismo visualmente sin romper el scroll. */
.portal-mock,
.phone-ui,
.add-card {
  overflow: clip !important;
}

/* El hot-grid y dom-layout no deben crear
   contexto de apilamiento que atrape el scroll */
#hotspot .hot-grid,
#dominios .dom-layout {
  overflow: visible;
}

/* ─────────────────────────────────────────
   STICKY — columnas visuales por sección
   Requiere align-self:start en el elemento
   sticky y que el padre tenga align-items:start
───────────────────────────────────────── */

/* Redes — NOC a la derecha */
.srv-dash          { position: sticky; top: 80px; align-self: start; }

/* Software — ERP a la derecha */
.erp-mock          { position: sticky; top: 80px; align-self: start; }

/* Hotspot — portal a la derecha */
#hotspot .portal-mock  { position: sticky; top: 80px; align-self: start; }
#hotspot .hot-stack    { align-self: stretch; }

/* VoIP — teléfono a la derecha */
#voip .phone-ui        { position: sticky; top: 80px; align-self: start; }
#voip .voip-grid       { align-self: stretch; }

/* Dominios — buscador a la IZQUIERDA, servicios a la derecha
   Aquí el sticky va en los servicios (columna derecha) NO en el buscador */
#dominios .dom-search-box  { position: sticky; top: 80px; align-self: start; }
#dominios .dom-services    { align-self: stretch; }

/* Móvil — sin sticky */
@media (max-width: 1024px) {
  .srv-dash,
  .erp-mock,
  #hotspot .portal-mock,
  #voip    .phone-ui,
  #dominios .dom-search-box { position: static; }
}