/* Tipografía base */
:root {
  --bg: #0d0d0f;
  --fg: #ffffff;
  --muted: #aaaaaa;
  --accent: #ff3b30;
  --orbit-size: min(86vmin, 900px);
  --core-size: min(28vmin, 300px);
  --item-size: clamp(78px, 11.5vmin, 132px);
  --core-offset-y: -10vmin; /* desplaza el centro un poco más hacia arriba */
  --tagline-offset-y: -22vmin;
  --spin-duration: 40s; /* velocidad base de la órbita */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 800px at 70% 10%, #17181b, var(--bg));
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  overflow: hidden; /* evita el salto por scroll */
  overscroll-behavior: none;
}

.canvas {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0 1.5rem;
  position: relative;
}

.whatsapp-fab {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index: 4;
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  gap: 8px;
  text-decoration: none;
}
.wa-circle {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display: grid; place-items: center;
}
.wa-circle svg { width: 36px; height: 36px; }
.wa-label { color: #111; font-weight: 900; letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0,0,0,.15); }
.whatsapp-fab:hover .wa-circle { filter: brightness(1.05); transform: translateY(-1px); }

/* Se removió el logo lateral del home */
.left-logo {
  position: absolute;
  left: clamp(8px, 3vw, 32px);
  top: clamp(8px, 3vw, 24px);
  z-index: 4;
}

.left-logo img {
  height: clamp(160px, 26vmin, 360px);
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.core {
  position: absolute;
  width: var(--core-size);
  height: var(--core-size);
  display: grid;
  place-items: center;
  z-index: 2;
  inset: 0;
  margin: auto;
  transform: translateY(var(--core-offset-y));
}

.core img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
}

/* Marcas de agua del home */
.home-page .bg-watermarks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.home-page .bg-watermarks .wm {
  position: absolute;
  opacity: .10;
  filter: blur(0px) drop-shadow(0 16px 40px rgba(0,0,0,.35));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.home-page .bg-watermarks .w3, .home-page .bg-watermarks .w4 { opacity: .07; }

.home-page .bg-watermarks .w1 {
  top: 6vh; left: 4vw; width: 26vmax; height: 26vmax;
  background-image: url('./Personajes/BluePollo.png');
  transform: rotate(-6deg);
}
.home-page .bg-watermarks .w2 {
  bottom: 8vh; right: 6vw; width: 28vmax; height: 28vmax;
  background-image: url('./Personajes/Cajas.gif');
  transform: rotate(8deg);
}
.home-page .bg-watermarks .w3 {
  top: 8vh; right: 6vw; width: 11vmax; height: 11vmax;
  background-image: url('./Vectores/Pieza-Plug-9.jpg');
  opacity: .06;
  transform: rotate(4deg);
}
.home-page .bg-watermarks .w4 {
  bottom: 8vh; left: 6vw; width: 10vmax; height: 10vmax;
  background-image: url('./Vectores/2ndFloorV2.jpg');
  opacity: .06;
  transform: rotate(-3deg);
}

.orbit {
  position: absolute;
  width: var(--orbit-size);
  height: var(--orbit-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: spin var(--spin-duration) linear infinite;
  inset: 0;
  margin: auto;
  transform-style: preserve-3d;
}

.orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
  pointer-events: none;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.orbit-item {
  --total: 8;
  --angle: calc(var(--i) * (360deg / var(--total)));
  --angle-offset: 0deg;
  --radius-multiplier: 1;
  position: absolute;
  width: var(--item-size);
  height: var(--item-size);
  transform: rotate(calc(var(--angle) + var(--angle-offset))) translate(calc((var(--orbit-size) / 2.0) * var(--radius-multiplier))) rotate(calc(-1 * (var(--angle) + var(--angle-offset))));
  text-decoration: none;
  color: var(--fg);
  transition: transform .25s ease, filter .25s ease;
}

/* Colores por servicio en el home */
.service-animaciones .icon { background: linear-gradient(135deg, #1a1b1f, #121317); }
.service-apps .icon { background: linear-gradient(135deg, #11161f, #0e1116); }
.service-clientes .icon { background: linear-gradient(135deg, #161411, #0f0e0c); }
.service-desarrollos .icon { background: linear-gradient(135deg, #141913, #0e130f); }
.service-personajes .icon { background: linear-gradient(135deg, #171217, #100d10); }
.service-planos .icon { background: linear-gradient(135deg, #121416, #0c0e10); }
.service-vectores .icon { background: linear-gradient(135deg, #141416, #0e0e10); }
.service-hosting .icon { background: linear-gradient(135deg, #10161b, #0b0f14); }

/* Desfase angular para separar Hosting de Animaciones */
.service-hosting { --angle-offset: 0deg; --radius-multiplier: 1; }

@media (max-width: 720px) {
  .service-hosting { --angle-offset: 0deg; --radius-multiplier: 1; }
}

.orbit-item .content {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.orbit-item img, .orbit-item .icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #111217;
  border-radius: 14px;
  /* Marco tipo sticker cómic */
  border: 8px solid #ffffff;
  outline: 3px solid #000;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.orbit-item .icon svg {
  width: 64%;
  height: 64%;
  color: #f0f0f0;
}

.orbit-item .label {
  position: absolute;
  bottom: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: clamp(12px, 2.2vmin, 16px);
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

/* Interacción: bajar velocidad al pasar el mouse por la órbita o ítems */
/* Sin efectos de mouse: velocidad constante */

.orbit-item:hover img, .orbit-item:hover .icon,
.orbit-item:focus-visible img, .orbit-item:focus-visible .icon {
  transform: scale(1.04) rotate(0deg);
  box-shadow: 0 26px 60px rgba(0,0,0,.65);
  filter: brightness(1.04) saturate(1.05);
}

.orbit-item:hover,
.orbit-item:focus-visible {
  transform: rotate(calc(var(--angle) + var(--angle-offset))) translate(calc(((var(--orbit-size) / 1.95)) * var(--radius-multiplier))) rotate(calc(-1 * (var(--angle) + var(--angle-offset))));
}

/* Secciones destino */
.section {
  max-width: 1100px;
  margin: 6rem auto 2rem;
  padding: 0 1.5rem;
}

.section h2 {
  margin: 0 0 .5rem;
  font-size: clamp(24px, 4.2vmin, 40px);
}

.section p {
  color: var(--muted);
  max-width: 70ch;
}

/* Responsivo */
@media (max-width: 920px) {
  :root {
    --orbit-size: min(92vmin, 760px);
    --core-size: min(32vmin, 280px);
  }
}

@media (max-width: 640px) {
  :root {
    --orbit-size: min(92vmin, 600px);
    --core-size: min(38vmin, 240px);
    --item-size: clamp(72px, 16vmin, 120px);
  }
  .orbit-item .label { bottom: -1rem; }
}

/* Fallback cuando no hay imagen */
.fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.45);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg);
}

.chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
  color: #fff;
  margin: 0 4px;
}
.chip.design { background: #ff3b30; }
.chip.anim { background: #246bff; }
.chip.mas { background: #00c27a; }

/* Tagline flotante */
/* tagline removida del home */

.tagline p {
  margin: 0;
  color: var(--muted);
}

.accent { color: #e54d2e; }

@keyframes float {
  0%, 100% { transform: translate(-50%, calc(var(--tagline-offset-y) - 2px)); }
  50% { transform: translate(-50%, calc(var(--tagline-offset-y) + 2px)); }
}

/* Parallax leve controlado por variables --rx/--ry */
.core { transform: translateY(var(--core-offset-y)); }

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .orbit { animation: none; }
  .tagline h1 { animation: none; }
}