/* =========================
   GeekSteam.mx — styles.css
   Versión CLARA / COLORIDA (FIX RADIAL + RESPONSIVE)
   ========================= */

/* ===== Paleta basada en el logo ===== */
:root{
  --bg-main: #f7f8fc;
  --bg-soft: #ffffff;
  --bg-card: #f1f3ff;

  --green: #6bbf8e;
  --green-soft: #e9f6ef;

  --purple: #7b5fcf;
  --purple-soft: #efeaff;

  --pink: #f5a3c7;
  --yellow: #ffd36a;

  --text-main: #2b2b2b;
  --text-muted: #5f6c7b;

  --border: #e1e5f2;

  --shadow-soft: 0 8px 20px rgba(0,0,0,.08);
  --shadow-card: 0 12px 30px rgba(0,0,0,.12);

  --radius: 18px;
  --topbar-h: 78px;
}

/* ===== Reset ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color:var(--text-main);
  background:
    radial-gradient(900px 600px at 20% 10%, #f0f4ff, transparent 60%),
    radial-gradient(900px 600px at 80% 20%, #eafaf1, transparent 60%),
    var(--bg-main);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ===== Topbar ===== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background: var(--bg-soft);
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  color:var(--purple);
}
.brand-badge{
  width:36px;
  height:36px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--green), var(--purple));
  color:white;
  display:grid;
  place-items:center;
  font-weight:900;
}
.brand small{
  display:block;
  font-size:.75rem;
  font-weight:600;
  color:var(--text-muted);
}

.topbar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ===== Botones ===== */
.btn{
  padding:10px 14px;
  border-radius:14px;
  border:2px solid transparent;
  background: var(--purple-soft);
  color:var(--purple);
  font-weight:800;
  cursor:pointer;
  transition: .2s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{
  background: var(--purple);
  color:white;
}

.btn.primary{
  background: var(--green);
  color:white;
}
.btn.primary:hover{
  background:#56a87b;
}

/* ===== Layout ===== */
main{ padding-top:var(--topbar-h); }

.wrap{
  width:min(1120px, 92vw);
  margin:30px auto;
  display:grid;
  gap:20px;
}

/* ===== Hero ===== */
.hero-title h1{
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin:0;
  color:var(--purple);
}
.hero-title p{
  max-width:70ch;
  margin-top:10px;
  color:var(--text-muted);
  font-weight:600;
}

/* ===== Orbital Card ===== */
.orbital{
  background: var(--bg-soft);
  border-radius:24px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.orbital-inner{
  padding:30px 20px;
}

/* =========================================================
   FIX PRINCIPAL: ORBIT-STAGE SIEMPRE CUADRADO + CENTRO REAL
   ========================================================= */
.orbit-stage{
  --size: min(680px, 92vw);
  width: var(--size);
  height: var(--size);
  margin: 0 auto;
  position: relative;

  display: grid;
  place-items: center;

  aspect-ratio: 1 / 1; /* 🔥 clave para círculo perfecto */
  isolation: isolate;
}

/* ===== Anillo ===== */
.orbit-ring{
  position:absolute;
  inset: 6%;
  border-radius:50%;
  border:2px dashed var(--purple);
  opacity:.35;
  pointer-events:none;
  z-index: 0;
  animation: floatRing 10s ease-in-out infinite;
}

@keyframes floatRing{
  0%{ transform:rotate(0deg); }
  50%{ transform:rotate(2deg); }
  100%{ transform:rotate(0deg); }
}

/* =========================================================
   FIX: LOGO CENTRADO ABSOLUTO (NO EMPUJA EL LAYOUT)
   ========================================================= */
.center-logo{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index: 2;

  width: min(320px, 58vw);
  aspect-ratio: 1/1;

  background:white;
  border-radius:26px;
  border:3px solid var(--purple-soft);
  box-shadow: var(--shadow-card);
  display:grid;
  place-items:center;
  padding:14px;
}

/* ===== Orbit Items ===== */
.orbit-item{
  position:absolute;
  top:50%;
  left:50%;
  z-index: 3;

  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(var(--radius))
    rotate(calc(var(--angle) * -1));

  width: min(260px, 80vw);
}

/* ===== Chip ===== */
.chip{
  width: 100%;
  background: var(--bg-card);
  border-radius:18px;
  padding:14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  box-shadow: var(--shadow-soft);
  border:2px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease;
}

.chip:hover{
  border-color: var(--green);
  transform: translateY(-3px);
}

.chip .icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--pink), var(--yellow));
  display:grid;
  place-items:center;
  font-weight:900;
  color:#5b3b00;
  flex: 0 0 auto;
}

.chip h3{
  margin:0;
  font-size:1rem;
  color:var(--purple);
}
.chip p{
  margin-top:4px;
  font-size:.85rem;
  color:var(--text-muted);
}

/* ===== Dropdown Asesorías ===== */
.dropdown{
  display:none;
  position:absolute;
  top: calc(100% + 8px);
  left:0;
  background:white;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding:10px;
  z-index:40;
  width: min(340px, 82vw);
}

.orbit-item[data-key="asesorias"] .chip:hover .dropdown,
.orbit-item[data-key="asesorias"] .chip:focus-within .dropdown{
  display:block;
}

.dropdown a{
  padding:10px;
  display:block;
  border-radius:12px;
  font-weight:700;
  color:var(--purple);
}
.dropdown a:hover{
  background: var(--purple-soft);
}

/* ===== Sections ===== */
.sections{
  width:min(1120px, 92vw);
  margin:40px auto;
  display:grid;
  gap:20px;
}

.section{
  background:white;
  border-radius:20px;
  padding:24px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.section h2{
  color:var(--purple);
  margin:0;
}
.section p{
  color:var(--text-muted);
  margin-top:10px;
  font-weight:600;
}

/* ===== WhatsApp Floating (PRO) ===== */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
  background:#25d366;
  color:white;
  padding:12px 14px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  cursor:pointer;
  transition: transform .18s ease, filter .18s ease;
}

.whatsapp-float:hover{
  transform: translateY(-3px);
  filter: brightness(1.02);
}

.waIcon{
  width:40px;
  height:40px;
  border-radius:14px;
  background: rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  font-size:18px;
}

.waText strong{
  display:block;
  line-height:1.1;
  letter-spacing:.2px;
}

.waText small{
  display:block;
  opacity:.95;
  font-weight:700;
  margin-top:2px;
}

/* =========================================================
   RESPONSIVE: EN MÓVIL, MENU RADIAL -> LISTA
   (evita desfase y mejora usabilidad)
   ========================================================= */
@media (max-width: 900px){
  .orbit-ring{ display:none; }

  .orbit-stage{
    width: min(620px, 92vw);
    height: auto;
    aspect-ratio: auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding: 8px 0 0;
  }

  .center-logo{
    position: static;
    transform: none;
    margin: 0 auto 6px;
    width: min(320px, 78vw);
  }

  .orbit-item{
    position: static;
    transform: none;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }

  .chip{
    width:100%;
  }

  /* dropdown en móvil */
  .dropdown{
    position: static;
    width: 100%;
    margin-top: 10px;
  }

  /* WhatsApp */
  .whatsapp-float{ right:14px; bottom:14px; }
}

/* En móvil pequeño, ocultar subtítulo del WhatsApp */
@media (max-width: 640px){
  .waText small{ display:none; }
}