/* GIEZI — estilos del portal. Paleta de marca "startup": indigo/violeta
   electrico para el chrome; el verde/amarillo/rojo se reserva para el
   semaforo de riesgo en los mapas, no se usa como color de marca. */
:root {
  --tinta: #171a26;          /* texto principal */
  --gris: #626b7e;           /* texto secundario */
  --linea: #e6e8f0;          /* bordes suaves */
  --fondo: #f6f7fb;          /* fondo de pagina (frio) */
  --marca: #1b1f3b;          /* indigo profundo: barra, titulos */
  --marca-2: #3a2f8f;        /* pareja del degradado */
  --acento: #5b53e6;         /* indigo/violeta vivo: enlaces, activos */
  --acento-suave: #eef0fe;   /* fondo tenue del acento */
  --f-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;  /* titulos */
  --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif;          /* cuerpo */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-body);
  line-height: 1.55;
}
h1, h2, h3, .logo, .nav-link, .esc-btn {
  font-family: var(--f-head);
}

/* --- Barra superior --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: linear-gradient(100deg, var(--marca) 0%, var(--marca-2) 100%);
  color: #eef1fb;
  padding: 12px 24px;
}
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; }
.logo-rayo { flex: none; color: #fff; }  /* el rayo hereda currentColor */
.logo {
  font-size: 22px; font-weight: 800; letter-spacing: .08em; color: #fff;
  line-height: 1;
}
.marca-sub {
  font-size: 12px; color: #a9c1e0; align-self: center;
  padding-left: 11px; margin-left: 3px; border-left: 1px solid rgba(255,255,255,.22);
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-link {
  color: #c8d6ea; text-decoration: none; font-size: 14px;
  padding: 6px 12px; border-radius: 7px;
}
.nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-link.activo { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }

/* --- Paginas de panel (iframe a pantalla) --- */
body.panel { display: flex; flex-direction: column; height: 100vh; }
.panel-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lienzo { flex: 1; width: 100%; border: 0; }
.conmutador {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--linea);
}
.conmutador-label { font-size: 13px; color: var(--gris); }
.explica {
  margin: 0; padding: 12px 24px; background: var(--acento-suave);
  border-bottom: 1px solid var(--linea); color: #35407a;
  font-size: 13px; line-height: 1.5;
}
.explica b { color: var(--marca); }
.esc-btn {
  font: inherit; font-size: 13px; cursor: pointer;
  background: #fff; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 8px; padding: 6px 14px;
}
.esc-btn:hover { border-color: var(--acento); color: var(--acento); }
.esc-btn.activo { background: var(--marca); color: #fff; border-color: var(--marca); }

/* --- Portada --- */
.portada { max-width: 980px; margin: 0 auto; padding: 40px 24px 64px; }
/* Hero como banner nocturno: el satelite (assets/satelite.svg) de fondo con una
   capa indigo oscura encima para que el texto claro se lea. */
.hero {
  position: relative;
  padding: 46px 40px;
  border-radius: 18px;
  color: #eef1fb;
  background:
    linear-gradient(115deg, rgba(13,15,34,.88) 0%, rgba(27,25,66,.72) 55%, rgba(58,47,143,.55) 100%),
    #0d0f22 url("satelite.svg") center/cover no-repeat;
  box-shadow: 0 16px 44px rgba(13,16,36,.28);
  overflow: hidden;
}
.hero h1 { font-size: 33px; line-height: 1.18; margin: 0 0 12px; color: #fff; }
.hero-sub { font-size: 16px; color: #d6dbf4; margin: 0 0 18px; max-width: 760px; }
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px; padding: 5px 11px; font-size: 12px; color: #e7ebfb;
  backdrop-filter: blur(2px);
}
.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin: 36px 0;
}
.tarjeta {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linea); border-radius: 14px;
  padding: 22px 22px 18px; text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tarjeta:hover {
  transform: translateY(-2px); border-color: #c7c9ec;
  box-shadow: 0 8px 24px rgba(91,83,230,.14);
}
.tarjeta h3 { margin: 0 0 8px; font-size: 18px; color: var(--acento); }
.tarjeta p { margin: 0 0 16px; font-size: 14px; color: var(--gris); flex: 1; }
.tarjeta-pie { font-size: 12px; color: #98a1ab; }
.nota-honesta {
  background: linear-gradient(135deg, var(--marca) 0%, var(--marca-2) 100%);
  color: #eef1fb; border: 0; border-radius: 16px;
  padding: 26px 28px; margin: 8px 0 28px;
  box-shadow: 0 10px 30px rgba(27,31,59,.18);
}
.nota-honesta h2 { margin: 0 0 12px; font-size: 19px; color: #fff; }
.nota-honesta p { margin: 0 0 10px; font-size: 14px; color: #d6dbf4; }
.nota-honesta p:last-child { margin-bottom: 0; }
.nota-honesta b { color: #fff; }
.pie { color: var(--gris); font-size: 12px; border-top: 1px solid var(--linea); padding-top: 16px; }

@media (max-width: 640px) {
  .hero h1 { font-size: 26px; }
  .marca-sub { display: none; }
}