:root {
  --bg-deep: #14171d;
  --bg-deep-2: #1b1f27;
  --panel: #232833;
  --line: rgba(255, 255, 255, 0.08);
  --text: #eef1f6;
  --text-dim: #9aa3b2;
  --accent: #29b6ea;
  --focus: #ffd166;
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- Fondo estelar ---------- */

#estrellas {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.55) 0, transparent 60%),
    radial-gradient(1px 1px at 70% 65%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,.45) 0, transparent 60%),
    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 92% 75%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 30% 50%, rgba(255,255,255,.35) 0, transparent 60%),
    linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-deep-2) 100%);
  background-repeat: repeat;
}

/* ---------- Encabezado ---------- */

header.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 8px;
  text-align: center;
}

header.top h1 {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

header.top p {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* ---------- Vista: Sistema solar ---------- */

#vista-sistema {
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(88vw, 900px);
  max-height: 92vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbita {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* Este círculo es solo la línea guía — es una caja invisible mucho más
     grande que su borde, y como los anillos exteriores se dibujan después
     (encima) de los interiores, sin esto se "robaban" el clic de todos los
     planetas de los anillos de más adentro. Lo dejamos sin clic aquí y se
     lo devolvemos solo a cada planeta abajo. */
  pointer-events: none;
}

/* El núcleo (Simplyfive/Kon+) no lleva línea guía circular */
.orbita-nucleo {
  border: none;
}

@media (prefers-reduced-motion: no-preference) {
  .orbita-giro {
    animation: girar linear infinite;
  }
}

@keyframes girar {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.planeta {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tam, 64px);
  height: var(--tam, 64px);
  transform: translate(-50%, -50%) rotate(var(--ang, 0deg)) translate(var(--radio, 100px)) rotate(calc(-1 * var(--ang, 0deg)));
  pointer-events: none; /* el div en sí no es clicable, solo el botón de adentro */
}

.orbita-giro .planeta {
  animation: contragirar linear infinite;
  animation-duration: inherit;
}

@keyframes contragirar {
  from { transform: translate(-50%, -50%) rotate(var(--ang, 0deg)) translate(var(--radio, 100px)) rotate(calc(-1 * var(--ang, 0deg))) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(var(--ang, 0deg)) translate(var(--radio, 100px)) rotate(calc(-1 * var(--ang, 0deg))) rotate(-360deg); }
}

/* Anillo decorativo tipo "8" de Simplyfive/Kon+: más grande que el planeta
   para que las dos mitades se toquen entre sí, y rotado para que el punto
   de cada uno apunte hacia el otro (--rot lo pone JS por empresa). */
.planeta-arco {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 175%;
  height: 175%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  pointer-events: none;
  z-index: 0;
}

.planeta-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease;
}

/* El logo se muestra tal cual es, completo, sin recortarlo ni forzarlo
   a una forma circular — solo se coloca en su posición. */
.planeta-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Solo cuando falta el archivo del logo mostramos un círculo de color +
   las iniciales, para que se note cuál falta por cargar. */
.planeta-btn.sin-logo {
  border-radius: 50%;
  background: #d9dde3;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.planeta-btn.sin-logo:not(:hover):not(:focus-visible) {
  box-shadow:
    0 0 0 4px var(--pcolor, var(--accent)),
    0 6px 18px rgba(0,0,0,.45);
}

.planeta-btn:hover,
.planeta-btn:focus-visible {
  transform: scale(1.14);
  z-index: 5;
}
.planeta-btn.sin-logo:hover,
.planeta-btn.sin-logo:focus-visible {
  box-shadow:
    0 0 0 4px var(--pcolor, var(--accent)),
    0 0 22px 2px var(--pcolor, var(--accent)),
    0 6px 18px rgba(0,0,0,.5);
}

.planeta-inicial {
  font-weight: 700;
  color: #3a3f47;
  font-size: 1.1rem;
  letter-spacing: .02em;
}

.planeta-etiqueta {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 130px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(10, 12, 16, 0.85);
  border: 1px solid var(--pcolor, var(--accent));
  padding: 4px 9px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  z-index: 40;
  transition: opacity .15s ease;
}

.planeta:hover,
.planeta:has(.planeta-btn:focus-visible) {
  z-index: 50;
}

.planeta:hover .planeta-etiqueta,
.planeta-btn:focus-visible + .planeta-etiqueta {
  opacity: 1;
}

/* ---------- Vista: Detalle de empresa ---------- */

#vista-detalle {
  position: relative;
  z-index: 1;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.detalle-tarjeta {
  display: grid;
  grid-template-columns: minmax(220px, 420px) minmax(220px, 380px);
  align-items: center;
  gap: 32px 48px;
  max-width: 940px;
  width: 100%;
}

.detalle-planeta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.detalle-planeta {
  width: min(46vw, 440px);
  height: min(46vw, 440px);
  border-radius: 50%;
  background: none;
 /* box-shadow:
    0 0 0 10px var(--pcolor, var(--accent)),
    0 20px 60px rgba(0,0,0,.5);*/
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sin fondo circular de por medio: solo el logo, tal como es. */
.detalle-planeta img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Solo si falta el logo mostramos un círculo de color con las iniciales. */
.detalle-planeta.sin-logo {
  background: #d9dde3;
}

.detalle-planeta .planeta-inicial {
  font-size: 4rem;
}

.detalle-etiqueta {
  background: var(--pcolor, var(--accent));
  color: #0b0f14;
  font-weight: 600;
  font-size: .95rem;
  padding: 10px 18px;
  border-radius: 6px;
  text-align: center;
  max-width: 320px;
}

.detalle-acciones {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.boton-accion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--pcolor, var(--accent));
  color: #ffffff;
  font-weight: 600;
  font-size: 1.05rem;
  border: none;
  border-radius: 999px 8px 8px 999px;
  padding: 18px 28px;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}

.boton-accion:hover,
.boton-accion:focus-visible {
  filter: brightness(1.12);
  transform: translateX(4px);
}

.boton-regresar {
  align-self: flex-end;
  background: var(--pcolor, var(--accent));
  color: #ffffff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
}

.boton-regresar:hover,
.boton-regresar:focus-visible {
  filter: brightness(1.12);
}

@media (max-width: 720px) {
  .detalle-tarjeta {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .boton-regresar { align-self: center; }
}

/* ---------- Vista: Presentación (el PDF "disfrazado" de página del sitio) ---------- */

#vista-presentacion {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: #f5f6f8;
  color: #1a1d24;
  display: none;
}

#vista-presentacion.activa { display: block; }

.presentacion-barra {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e4e6ea;
}

.presentacion-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: #1a1d24;
}

.presentacion-marca img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 50%;
}

.presentacion-regresar {
  border: 1px solid #d7dae0;
  background: #fff;
  color: #1a1d24;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 600;
}

.presentacion-regresar:hover,
.presentacion-regresar:focus-visible {
  background: #f0f2f5;
}

.presentacion-paginas {
  max-width: 980px;
  margin: 28px auto 80px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.presentacion-paginas canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 26px rgba(20, 23, 29, 0.12);
  background: #fff;
}

.presentacion-cargando {
  text-align: center;
  color: #6b7280;
  padding: 60px 0;
}

/* ---------- Utilidades ---------- */

.oculto { display: none !important; }