/* =============================================
   GSTUDIO — HOME (diseño "órbita")
   Tokens y componentes base: sistema Nocturne.
   ============================================= */

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-2: #a7a1db;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

html, body { margin: 0; overflow-x: clip; background: var(--color-bg); color: var(--color-text); }
body#gstudio-home { font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; }
#gstudio-home *, #gstudio-home *::before, #gstudio-home *::after { box-sizing: border-box; }
#gstudio-home h1, #gstudio-home h2, #gstudio-home h3, #gstudio-home h4, #gstudio-home h5, #gstudio-home h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
#gstudio-home p { margin: 0 0 var(--space-3); }
#gstudio-home a { color: var(--color-accent); text-underline-offset: 3px; text-decoration: none; }
#gstudio-home a:hover { color: var(--color-accent-300); }
#gstudio-home img { display: block; max-width: 100%; }
#gstudio-home :focus { outline: none; }
#gstudio-home :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#gstudio-home ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* — cards / tags — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }

/* ══════════════════════════════════════════════════════════════════════
   Comportamiento de la página (rieles de servicio, órbita, cielo, mar)
   ══════════════════════════════════════════════════════════════════════ */
[data-svc] { display: none; }
@media (min-width: 760px) { [data-rail] { border-right: 1px solid var(--color-divider); padding-right: var(--space-3); } }
[data-tab] {
  cursor: pointer; border: 0; background: transparent; font-family: var(--font-body);
  text-align: left; width: 100%; padding: 11px 13px; border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--color-text) 60%, transparent); font-size: 14px;
  display: flex; align-items: center; gap: 10px; transition: background .18s ease, color .18s ease;
}
[data-tab]:hover { background: var(--color-neutral-900); color: var(--color-text); }
[data-tab] i { font-style: normal; font-size: 11px; letter-spacing: .08em; color: var(--color-accent-400); }
[data-active="1"] [data-svc="1"] { display: block; } [data-active="1"] [data-tab="1"] { background: var(--color-accent-900); color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-accent); }
[data-active="2"] [data-svc="2"] { display: block; } [data-active="2"] [data-tab="2"] { background: var(--color-accent-900); color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-accent); }
[data-active="3"] [data-svc="3"] { display: block; } [data-active="3"] [data-tab="3"] { background: var(--color-accent-900); color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-accent); }
[data-active="4"] [data-svc="4"] { display: block; } [data-active="4"] [data-tab="4"] { background: var(--color-accent-900); color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-accent); }
[data-active="5"] [data-svc="5"] { display: block; } [data-active="5"] [data-tab="5"] { background: var(--color-accent-900); color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-accent); }
[data-active="6"] [data-svc="6"] { display: block; } [data-active="6"] [data-tab="6"] { background: var(--color-accent-900); color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-accent); }
[data-active="7"] [data-svc="7"] { display: block; } [data-active="7"] [data-tab="7"] { background: var(--color-accent-900); color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-accent); }
[data-active="8"] [data-svc="8"] { display: block; } [data-active="8"] [data-tab="8"] { background: var(--color-accent-900); color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-accent); }
.svc-more { display: inline-flex; margin-top: var(--space-6); font-size: 13.5px; }

@keyframes orbit-cw { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes orbit-ccw { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes boom-flash { 0% { opacity: 0; transform: scale(.2); } 12% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes boom-ring { 0% { opacity: .9; transform: scale(.15); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes boom-shard { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(220deg); } }
@keyframes ufo-fall { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(40px,190px) rotate(150deg); } }
@keyframes ufo-fly { 0% { transform: translate3d(-16vw,0,0) rotate(-7deg); opacity: 0; } 6% { opacity: 1; } 18% { transform: translate3d(24vw,34px,0) rotate(3deg); } 30% { transform: translate3d(46vw,6px,0) rotate(-2deg); } 38% { transform: translate3d(56vw,14px,0) rotate(0deg); } 46% { transform: translate3d(56vw,14px,0) rotate(0deg); } 62% { transform: translate3d(78vw,-16px,0) rotate(4deg); } 92% { opacity: 1; } 100% { transform: translate3d(118vw,-42px,0) rotate(8deg); opacity: 0; } }
@keyframes ufo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ufo-beam { 0%, 32% { opacity: 0; transform: scaleY(.4); } 40%, 46% { opacity: .85; transform: scaleY(1); } 54%, 100% { opacity: 0; transform: scaleY(.4); } }
@keyframes ufo-lamp { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes shoot { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(18deg); } 4% { opacity: .9; } 26% { opacity: 0; } 100% { opacity: 0; transform: translate3d(128vw,42vh,0) rotate(18deg); } }
@keyframes sphere-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

[data-ring] { animation: orbit-cw 72s linear infinite; }
[data-ring="inner"] { animation-name: orbit-ccw; animation-duration: 52s; }
[data-counter] { animation: orbit-ccw 72s linear infinite; }
[data-ring="inner"] [data-counter] { animation-name: orbit-cw; animation-duration: 52s; }
[data-speed="slow"] [data-ring] { animation-duration: 140s; }
[data-speed="slow"] [data-ring="inner"] { animation-duration: 100s; }
[data-speed="slow"] [data-counter] { animation-duration: 140s; }
[data-speed="slow"] [data-ring="inner"] [data-counter] { animation-duration: 100s; }
[data-speed="fast"] [data-ring] { animation-duration: 32s; }
[data-speed="fast"] [data-ring="inner"] { animation-duration: 22s; }
[data-speed="fast"] [data-counter] { animation-duration: 32s; }
[data-speed="fast"] [data-ring="inner"] [data-counter] { animation-duration: 22s; }
@container (max-width: 430px) { [data-counter] span { font-size: 9.5px !important; line-height: 1.15 !important; } [data-counter] svg { display: none; } }
[data-ring] * { pointer-events: none; }
[data-planet] { pointer-events: auto; background-image: radial-gradient(circle at 34% 28%, var(--color-accent-700), var(--color-accent-900) 76%); box-shadow: var(--shadow-md); transition: transform .22s ease, box-shadow .22s ease, background-image .22s ease; }
[data-planet]:hover, [data-planet]:focus-visible { transform: scale(1.09); background-image: radial-gradient(circle at 34% 28%, var(--color-accent-600), var(--color-accent-800) 78%); box-shadow: var(--shadow-lg), 0 0 38px -6px var(--color-accent-600); }
[data-tip] { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility .18s; pointer-events: none; z-index: 5; }
[data-planet]:hover [data-tip], [data-planet]:focus-visible [data-tip] { opacity: 1; visibility: visible; transform: translateY(0); }
[data-ring]:has([data-planet]:hover) { animation-play-state: paused; }
[data-ring]:has([data-planet]:hover) [data-counter] { animation-play-state: paused; }
[data-ring] > div:has([data-planet]:hover),
[data-ring] > div:has([data-planet]:focus-visible) { z-index: 20; }
[data-ufo-lane][data-dead] [data-ufo] { animation-play-state: paused; }
[data-ufo-lane][data-dead] [data-ufo-bob] { animation: ufo-fall 1.5s ease-in forwards; }
[data-ufo-lane][data-dead] [data-ufo-beam] { display: none; }
[data-ufo] { animation: ufo-fly 26s cubic-bezier(.42,0,.58,1) 5s infinite; }
[data-ufo-bob] { animation: ufo-bob 2.6s ease-in-out infinite; }
[data-ufo-beam] { transform-origin: top center; animation: ufo-beam 26s linear 5s infinite; }
[data-ufo-lamp] { animation: ufo-lamp 1.4s ease-in-out infinite; }
[data-speed="slow"] [data-ufo], [data-speed="slow"] [data-ufo-beam] { animation-duration: 40s; }
[data-speed="fast"] [data-ufo], [data-speed="fast"] [data-ufo-beam] { animation-duration: 16s; }
[data-anim="off"] [data-ufo-lane] { display: none; }
[data-anim="off"] [data-shoot] { animation: none; }
[data-shoot] { animation: shoot 14s linear infinite; }
[data-anim="off"] [data-shoot] { animation: none; }
[data-sun] { animation: sphere-spin 26s linear infinite; }
[data-speed="slow"] [data-sun] { animation-duration: 52s; }
[data-speed="fast"] [data-sun] { animation-duration: 13s; }
[data-anim="off"] [data-ring], [data-anim="off"] [data-counter], [data-anim="off"] [data-sun] { animation: none; }
@media (prefers-reduced-motion: reduce) {
  [data-ring], [data-counter], [data-sun], [data-shoot] { animation: none; }
  [data-ufo-lane] { display: none; }
}

/* — chat mock (reemplaza el placeholder de captura) — */
.gs-chat { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px,2.6vw,26px); height: 100%; justify-content: center; }
.gs-chat__bubble { max-width: 82%; padding: 10px 14px; border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.5; }
.gs-chat__bubble--in { align-self: flex-start; background: var(--color-neutral-800); color: var(--color-text); border-bottom-left-radius: 3px; }
.gs-chat__bubble--out { align-self: flex-end; background: var(--color-accent-800); color: var(--color-accent-100); border-bottom-right-radius: 3px; }
.gs-chat__meta { align-self: flex-end; font-size: 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* — header — */
.gs-header { position: relative; z-index: 4; max-width: 1200px; margin: 0 auto; padding: 22px clamp(20px,4vw,44px); display: flex; align-items: center; gap: 16px; }
.gs-header__brand { font-family: var(--font-heading); font-weight: 500; font-size: 18px; letter-spacing: -.015em; }
.gs-header__brand span { color: var(--color-accent); }
.gs-nav { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: clamp(12px,2vw,26px); font-size: 13.5px; }
.gs-nav a:not(.btn) { color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.gs-nav a:not(.btn):hover { color: var(--color-text); }
.gs-burger { display: none; }
@media (max-width: 700px) {
  .gs-nav { display: none; }
  .gs-burger { display: inline-flex; margin-left: auto; }
}
.gs-burger {
  width: 40px; height: 40px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  cursor: pointer; color: var(--color-text);
}
.gs-burger span, .gs-burger span::before, .gs-burger span::after {
  content: ''; display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; transition: transform .2s ease, opacity .2s ease;
}
.gs-burger span::before { position: absolute; top: -5px; }
.gs-burger span::after { position: absolute; top: 5px; }
.gs-mobile { display: none; position: relative; z-index: 4; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px,4vw,44px) 18px; flex-direction: column; gap: 4px; }
.gs-mobile.open { display: flex; }
.gs-mobile a { padding: 10px 6px; font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 78%, transparent); border-bottom: 1px solid var(--color-divider); }
.gs-mobile a:last-child { border-bottom: none; }

/* — footer legal row — */
.gs-footer-legal {
  position: relative; z-index: 2; max-width: 1200px; margin: 0 auto;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  padding: 16px clamp(20px,4vw,44px) 22px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.gs-footer-legal__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.gs-footer-legal__links a { color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.gs-footer-legal__links a:hover { color: var(--color-text); }

/* — botón flotante de WhatsApp — */
.gs-wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 999;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px 14px 16px; border-radius: var(--radius-full);
  background: #25D366; color: #0b1a12; font-weight: 700; font-size: .9375rem;
  box-shadow: 0 8px 28px rgba(37,211,102,.35), 0 2px 8px rgba(0,0,0,.3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gs-wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.3); color: #0b1a12; }
.gs-wa-float__label { white-space: nowrap; }
@media (max-width: 600px) {
  .gs-wa-float { right: 16px; bottom: 16px; padding: 14px; }
  .gs-wa-float__label { display: none; }
}

/* — banner de cookies — */
.gs-cookie-banner {
  position: fixed; left: 24px; bottom: 24px; z-index: 998; max-width: 460px;
  display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.gs-cookie-banner[hidden] { display: none; }
.gs-cookie-banner__text { font-size: 13px; color: color-mix(in srgb, var(--color-text) 68%, transparent); line-height: 1.6; }
.gs-cookie-banner .btn { flex-shrink: 0; padding: 9px 18px; font-size: 13.5px; }
@media (max-width: 720px) {
  .gs-cookie-banner { left: 12px; right: 12px; bottom: 92px; max-width: none; flex-direction: column; align-items: stretch; gap: 12px; }
  .gs-cookie-banner .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-wa-float, .gs-cookie-banner { transition: none; }
}