/* ============================================
   TOKENS — HIGH CONTRAST DARK
   ============================================ */
:root{
  /* ── Fondos ── */
  --bg:       #0A0A0F;
  --bg-deep:  #050508;
  --surface-1:#12121A;
  --surface-2:#181825;
  --surface-3:#222233;
  --surface-elevated: rgba(18,18,26,0.96);

  /* ── Bordes — bien visibles ── */
  --border:        rgba(255,255,255,0.20);
  --border-mid:    rgba(255,255,255,0.30);
  --border-strong: rgba(255,255,255,0.50);

  /* ── Texto — BLANCO PURO ── */
  --text:       #FFFFFF;
  --text-bright:#FFFFFF;
  --text-dim:   #FFFFFF;
  --text-muted: #E0E0FF;

  /* ── Violeta ── */
  --violet:          #9D7CFF;
  --violet-deep:     #6D42FF;
  --violet-bright:   #BDADFF;
  --violet-glow:     rgba(157,124,255,0.85);
  --violet-glow-soft:rgba(157,124,255,0.40);

  /* ── Cyan ── */
  --cyan:          #00E5FF;
  --cyan-deep:     #00B8D4;
  --cyan-bright:   #80F3FF;
  --cyan-glow:     rgba(0,229,255,0.80);
  --cyan-glow-soft:rgba(0,229,255,0.35);

  /* ── Lima — neón ── */
  --lime:          #BFFF00;
  --lime-glow:     rgba(191,255,0,0.75);
  --lime-glow-soft:rgba(191,255,0,0.30);

  /* ── Ámbar ── */
  --amber:          #FFC400;
  --amber-glow:     rgba(255,196,0,0.75);
  --amber-glow-soft:rgba(255,196,0,0.30);

  /* ── Rosa ── */
  --rose:          #FF2D55;
  --rose-glow:     rgba(255,45,85,0.70);
  --rose-glow-soft:rgba(255,45,85,0.25);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-glass: 0 1px 0 rgba(255,255,255,0.20) inset, 0 0 0 1px rgba(255,255,255,0.15), 0 30px 60px rgba(0,0,0,0.7);
  --shadow-glow-violet: 0 0 40px var(--violet-glow-soft), 0 0 80px rgba(157,124,255,0.25);
  --shadow-glow-cyan:   0 0 40px var(--cyan-glow-soft),   0 0 80px rgba(0,229,255,0.25);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  font-weight: 600;
}

/* Atmospheric Background */
.ambient{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(157,124,255,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,229,255,0.15) 0%, transparent 60%),
    var(--bg);
}
.stars{
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 12%,  rgba(255,255,255,0.7),  transparent),
    radial-gradient(1px 1px at 22% 50%, rgba(255,255,255,0.5),  transparent),
    radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,0.5),  transparent),
    radial-gradient(1px 1px at 58% 15%, rgba(255,255,255,0.7),  transparent),
    radial-gradient(1px 1px at 72% 35%, rgba(255,255,255,0.6),  transparent),
    radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,0.5),  transparent),
    radial-gradient(2px 2px at 38% 88%, rgba(157,124,255,0.4), transparent),
    radial-gradient(2px 2px at 65% 28%, rgba(0,229,255,0.35),  transparent);
  opacity: 0.9;
}
.aurora-1,
.aurora-2{
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.aurora-1{
  top: -15%;
  left: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--violet) 0%, transparent 65%);
  opacity: 0.45;
  animation: drift-a 22s ease-in-out infinite alternate;
}
.aurora-2{
  top: 45%;
  right: -10%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 65%);
  opacity: 0.35;
  animation: drift-b 28s ease-in-out infinite alternate;
}
@keyframes drift-a{
  0%{transform: translate(0,0) scale(1)}
  100%{transform: translate(6vw,4vh) scale(1.15)}
}
@keyframes drift-b{
  0%{transform: translate(0,0) scale(1)}
  100%{transform: translate(-5vw,-4vh) scale(1.1)}
}
@keyframes twinkle{
  0%,100%{opacity: 0.9}
  50%{opacity: 0.5}
}
/* Grain — reduced for vivid colors */
body::after{
  content:'';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ============================================
   SELECTS / DROPDOWNS — siempre oscuros
   (evita la lista nativa en blanco en móvil/iOS)
   ============================================ */
:root{ color-scheme: dark; }
select{ color-scheme: dark; }
select option,
select optgroup{
  background: #12121A;
  color: #FFFFFF;
}
/* Firefox/Chrome: opción resaltada */
select option:checked,
select option:hover{
  background: #232333;
  color: #FFFFFF;
}

/* ============================================
   APP SHELL
   ============================================ */
.app{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 16px;
  background: linear-gradient(180deg, #0F0F1A 0%, #08080F 100%);
  border-right: 1px solid var(--border-mid);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.sidebar::after{
  content:'';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 40%;
  background: linear-gradient(180deg, transparent, var(--violet-glow-soft), transparent);
}

.sb-logo{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 28px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text-bright);
}
.sb-logo-mark{
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 15px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 4px 16px var(--violet-glow),
    0 0 24px var(--violet-glow-soft);
  position: relative;
}
.sb-logo-mark::before{
  content:'';
  position: absolute;
  inset: 1px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
}

/* User card in sidebar */
.sb-user{
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.sb-user::before{
  content:'';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 100%;
  background: radial-gradient(circle, var(--violet-glow-soft) 0%, transparent 60%);
  filter: blur(30px);
  pointer-events: none;
}
.sb-user-top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.sb-avatar{
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 4px 12px var(--violet-glow);
}
.sb-avatar::before{
  content:'';
  position: absolute;
  inset: 1px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
}
.sb-avatar-status{
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--surface-1);
  box-shadow: 0 0 8px var(--lime);
}
.sb-user-info{flex: 1; min-width: 0}
.sb-user-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-user-role{
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sb-user-rank{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.sb-user-rank-label{
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sb-user-rank-value{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px !important;
  font-weight: 900;
  color: var(--amber);
  letter-spacing: 0.2em;
}

/* Nav */
.sb-section{
  font-size: 10px;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 8px 12px;
  margin-top: 8px;
}
.sb-nav{display: flex; flex-direction: column; gap: 2px}
.sb-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  position: relative;
}
.sb-item:hover{
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
.sb-item.active{
  background: linear-gradient(90deg, rgba(167,139,255,0.22) 0%, rgba(167,139,255,0.08) 100%);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 0 20px rgba(167,139,255,0.12);
}
.sb-item.active::before{
  content:'';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--violet-bright), var(--cyan-bright));
  box-shadow: 0 0 8px var(--violet-glow);
}
.sb-item svg{width: 18px; height: 18px; flex-shrink: 0}
.sb-item.active svg{color: var(--violet-bright); filter: drop-shadow(0 0 8px var(--violet-glow))}
.sb-item-label{flex: 1; letter-spacing: -0.005em}
.sb-badge{
  font-size: 10px;
  font-family: 'Geist Mono', monospace;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(167,139,255,0.28);
  color: #D4C0FF;
  border: 1px solid rgba(167,139,255,0.55);
  font-weight: 700;
  box-shadow: 0 0 12px var(--violet-glow-soft);
}

.sb-divider{
  height: 1px;
  background: var(--border);
  margin: 16px 8px;
}

/* Upgrade card at bottom */
.sb-promo{
  margin-top: auto;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(170,255,68,0.14) 0%, rgba(170,255,68,0.04) 100%),
    rgba(24,24,24,0.85);
  border: 1px solid rgba(170,255,68,0.36);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 0 24px var(--lime-glow-soft);
}
.sb-promo::before{
  content:'';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow: 0 0 12px var(--lime-glow-soft);
}
.sb-promo-title{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.sb-promo-text{
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 12px;
}
.sb-promo-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lime);
  text-decoration: none;
  font-weight: 500;
  transition: gap 0.2s;
}
.sb-promo-btn:hover{gap: 10px}
.sb-promo-btn svg{width: 12px; height: 12px}

/* ============================================
   MAIN
   ============================================ */
.main{padding: 0 32px 40px; min-width: 0}

/* Top bar */
.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 9;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(17,17,22,0.95) 80%, transparent 100%);
  backdrop-filter: blur(16px);
}
.breadcrumb{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-family: 'Geist Mono', monospace;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.breadcrumb .sep{color: var(--text-muted); opacity: 0.4}
.breadcrumb .current{color: var(--text-bright)}

.topbar-actions{display: flex; align-items: center; gap: 10px}
.search-wrap{
  position: relative;
}
.search-wrap svg{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}
.search{
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-mid);
  color: var(--text);
  padding: 9px 14px 9px 34px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  width: 240px;
  transition: all 0.2s;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.search::placeholder{color: var(--text-muted)}
.search:focus{
  outline: none;
  border-color: var(--violet);
  background: rgba(167,139,255,0.10);
  box-shadow: 0 0 0 3px var(--violet-glow-soft), 0 1px 0 rgba(255,255,255,0.08) inset;
}

.icon-btn{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-mid);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.icon-btn:hover{
  background: rgba(255,255,255,0.06);
  color: var(--text-bright);
  border-color: var(--border-strong);
}
.icon-btn svg{width: 16px; height: 16px}
.icon-btn .notif-dot{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px var(--rose);
}

/* ============================================
   WELCOME
   ============================================ */
.welcome{
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.welcome-date{
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.welcome-date .pulse{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{opacity: 1}
  50%{opacity: 0.4}
}
.welcome h1{
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 10px;
  color: var(--text-bright);
  overflow: visible;
  white-space: nowrap;
}
.welcome h1 em{
  font-style: italic;
  display: inline-block;
  padding: 0 0.08em 0.05em;
  background: linear-gradient(110deg, var(--violet-bright), var(--cyan-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.welcome p{color: var(--text-dim); font-size: 15px; max-width: 520px}
.welcome p strong{color: var(--violet-bright); font-weight: 500}

.btn-primary{
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(220,220,230,0.95) 100%);
  color: var(--bg-deep);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s;
  font-family: inherit;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 28px rgba(255,255,255,0.1),
    0 0 40px var(--violet-glow-soft);
}
.btn-primary:hover{transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset, 0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 40px rgba(255,255,255,0.15), 0 0 60px var(--violet-glow)}
.btn-primary svg{width: 14px; height: 14px}

/* ============================================
   KPI GRID
   ============================================ */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 520px)  { .kpi-grid { grid-template-columns: 1fr } }
.kpi{
  padding: 22px;
  border: 1px solid var(--border-mid);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 40px rgba(0,0,0,0.3);
}
.kpi:hover{transform: translateY(-2px); border-color: var(--border-strong)}
.kpi::before{
  content:'';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  opacity: 0.6;
}
.kpi.violet::before{background: linear-gradient(90deg, transparent, var(--violet-bright), transparent); box-shadow: 0 0 12px var(--violet)}
.kpi.cyan::before{background: linear-gradient(90deg, transparent, var(--cyan-bright), transparent); box-shadow: 0 0 12px var(--cyan)}
.kpi.lime::before{background: linear-gradient(90deg, transparent, var(--lime), transparent); box-shadow: 0 0 12px var(--lime)}
.kpi.amber::before{background: linear-gradient(90deg, transparent, var(--amber), transparent); box-shadow: 0 0 12px var(--amber)}

.kpi-aura{
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 100%;
  filter: blur(50px);
  opacity: 0.6;
  pointer-events: none;
}
.kpi.violet .kpi-aura{background: radial-gradient(circle, var(--violet) 0%, transparent 60%)}
.kpi.cyan .kpi-aura{background: radial-gradient(circle, var(--cyan) 0%, transparent 60%)}
.kpi.lime .kpi-aura{background: radial-gradient(circle, var(--lime) 0%, transparent 60%)}
.kpi.amber .kpi-aura{background: radial-gradient(circle, var(--amber) 0%, transparent 60%)}

.kpi-inner{position: relative; z-index: 1}
.kpi-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}
.kpi-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}
.kpi.violet .kpi-icon{background: rgba(167,139,255,0.24); border-color: rgba(167,139,255,0.55); color: var(--violet-bright); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 0 20px var(--violet-glow-soft)}
.kpi.cyan .kpi-icon{background: rgba(64,216,255,0.22); border-color: rgba(64,216,255,0.55); color: var(--cyan-bright); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 0 20px var(--cyan-glow-soft)}
.kpi.lime .kpi-icon{background: rgba(170,255,68,0.20); border-color: rgba(170,255,68,0.50); color: var(--lime); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 0 20px var(--lime-glow-soft)}
.kpi.amber .kpi-icon{background: rgba(255,208,64,0.22); border-color: rgba(255,208,64,0.52); color: var(--amber); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 0 20px var(--amber-glow-soft)}
.kpi-icon svg{width: 18px; height: 18px}

.kpi-spark{opacity: 0.7}

.kpi-label{
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
  color: #B0B0CC;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 600;
}
.kpi-value{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--text-bright);
}
.kpi-value .u{font-size: 18px; color: var(--text-muted); font-weight: 500}
.kpi.violet .kpi-value{text-shadow: 0 0 20px var(--violet-glow-soft)}
.kpi.cyan .kpi-value{text-shadow: 0 0 20px var(--cyan-glow-soft)}
.kpi.lime .kpi-value{text-shadow: 0 0 20px var(--lime-glow-soft)}
.kpi.amber .kpi-value{text-shadow: 0 0 20px var(--amber-glow-soft)}

.kpi-delta{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.04em;
}
.kpi-delta.up{color: var(--lime)}
.kpi-delta.down{color: var(--rose)}
.kpi-delta svg{width: 10px; height: 10px}

/* ============================================
   MAIN GRID
   ============================================ */
.main-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

.card{
  background: var(--surface-1);
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 40px 80px rgba(0,0,0,0.6);
}
.card::before{
  content:'';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.card-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.card-title{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.card-sub{
  font-size: 13px;
  color: #FFFFFF;
  opacity: 0.9;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.card-action{
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.card-action:hover{color: var(--violet-bright)}
.card-action svg{width: 12px; height: 12px}

/* ============================================
   PROJECT FEED
   ============================================ */
.projects{display: flex; flex-direction: column; gap: 10px}
.project-row{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-mid);
  border-radius: 16px;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.project-row:hover{
  background: rgba(167,139,255,0.12);
  border-color: rgba(167,139,255,0.40);
  transform: translateX(4px);
}
.project-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  position: relative;
}
.project-icon::before{
  content:'';
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
}
.project-icon.v-violet{background: linear-gradient(135deg, var(--violet), var(--violet-deep)); box-shadow: 0 4px 12px var(--violet-glow-soft)}
.project-icon.v-cyan{background: linear-gradient(135deg, var(--cyan), var(--cyan-deep)); box-shadow: 0 4px 12px var(--cyan-glow-soft)}
.project-icon.v-lime{background: linear-gradient(135deg, var(--lime), #7EB84A); box-shadow: 0 4px 12px var(--lime-glow-soft)}
.project-icon.v-amber{background: linear-gradient(135deg, var(--amber), #C48A1E); box-shadow: 0 4px 12px var(--amber-glow-soft)}
.project-icon.v-rose{background: linear-gradient(135deg, var(--rose), #C4385A); box-shadow: 0 4px 12px var(--rose-glow-soft)}

.project-main{flex: 1; min-width: 0}
.project-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.project-desc{
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.project-desc .tag{
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #FFFFFF;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}
.project-desc .dot{color: var(--text-muted)}

.project-meta{
  text-align: right;
  flex-shrink: 0;
}
.project-budget{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--lime);
  letter-spacing: -0.01em;
  text-shadow: 0 0 10px var(--lime-glow-soft);
}
.project-time{
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.project-arrow{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: all 0.2s;
}
.project-row:hover .project-arrow{
  background: var(--violet);
  border-color: var(--violet);
  color: white;
  transform: translateX(2px);
  box-shadow: 0 0 16px var(--violet-glow);
}
.project-arrow svg{width: 14px; height: 14px}

/* ============================================
   LEADERBOARD
   ============================================ */
.leaderboard{display: flex; flex-direction: column; gap: 8px}
.rank-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-mid);
  transition: all 0.3s;
}
.rank-row.top-1{
  background: linear-gradient(90deg, rgba(255,208,64,0.22) 0%, rgba(255,208,64,0.04) 100%);
  border-color: rgba(255,208,64,0.50);
  box-shadow: 0 0 24px var(--amber-glow-soft);
}
.rank-row.top-2{
  background: linear-gradient(90deg, rgba(220,220,240,0.14) 0%, rgba(220,220,240,0.02) 100%);
  border-color: rgba(220,220,240,0.36);
}
.rank-row.top-3{
  background: linear-gradient(90deg, rgba(210,140,60,0.16) 0%, rgba(210,140,60,0.02) 100%);
  border-color: rgba(210,140,60,0.38);
}
.rank-row.me{
  background: linear-gradient(90deg, rgba(167,139,255,0.22) 0%, rgba(167,139,255,0.04) 100%);
  border-color: rgba(167,139,255,0.50);
  box-shadow: 0 0 24px var(--violet-glow-soft);
  position: relative;
}
.rank-row.me::before{
  content:'TÚ';
  position: absolute;
  right: 12px;
  top: -7px;
  font-size: 9px;
  font-family: 'Geist Mono', monospace;
  background: var(--violet);
  color: white;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  box-shadow: 0 0 12px var(--violet-glow);
}

.rank-position{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  flex-shrink: 0;
}
.rank-row.top-1 .rank-position{
  background: linear-gradient(135deg, var(--amber), #C48A1E);
  color: white;
  border-color: transparent;
  box-shadow: 0 0 12px var(--amber-glow);
}
.rank-row.top-2 .rank-position{
  background: linear-gradient(135deg, #D0D0D8, #8A8A92);
  color: white;
  border-color: transparent;
}
.rank-row.top-3 .rank-position{
  background: linear-gradient(135deg, #CD7F32, #8B4513);
  color: white;
  border-color: transparent;
}
.rank-row.me .rank-position{
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: white;
  border-color: transparent;
  box-shadow: 0 0 12px var(--violet-glow);
}

.rank-avatar{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}
.rank-name{
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.rank-points{
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--amber);
  font-weight: 700;
  text-shadow: 0 0 10px var(--amber-glow-soft);
}
.rank-row.me .rank-points{color: var(--violet-bright)}

/* ============================================
   ACTIVITY CHART
   ============================================ */
.activity-wrap{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.chart-tabs{
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.chart-tab{
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #B0B0D0;
  cursor: pointer;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 7px;
  transition: all 0.2s;
}
.chart-tab.active{
  background: rgba(167,139,255,0.20);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 0 14px rgba(167,139,255,0.25);
}

.chart-area{
  position: relative;
  margin-top: 20px;
  width: 100%;
  height: 220px;
}
.chart-svg{
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Earnings card (secondary in activity row) */
.earnings-card{
  background: linear-gradient(180deg, rgba(170,255,68,0.12) 0%, rgba(170,255,68,0.02) 100%);
  border-color: rgba(170,255,68,0.36);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.earnings-card::before{
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow: 0 0 12px var(--lime);
}
.earnings-big{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 16px 0 8px;
  color: var(--lime);
  text-shadow: 0 0 30px var(--lime-glow);
}
.earnings-big .c{color: var(--text-muted); font-size: 28px; font-weight: 500}
.earnings-delta{color: var(--lime); font-size: 12px; font-family: 'Geist Mono', monospace}
.earnings-breakdown{
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.breakdown-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.breakdown-row .l{color: var(--text-dim); font-family: 'Geist Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px}
.breakdown-row .v{color: var(--text-bright); font-weight: 500}

/* ============================================
   APPLICATIONS TABLE
   ============================================ */
.apps-table{width: 100%; border-collapse: collapse}
.apps-table th{
  text-align: left;
  padding: 12px 16px;
  font-size: 10px;
  font-family: 'Geist Mono', monospace;
  color: #A8A8C8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.apps-table td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.apps-table tr{transition: background 0.2s}
.apps-table tbody tr:hover{background: rgba(167,139,255,0.08)}
.apps-table tr:last-child td{border-bottom: none}

.client-cell{
  display: flex;
  align-items: center;
  gap: 10px;
}
.client-avatar{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.client-name{font-weight: 500; color: var(--text-bright); font-size: 13px}
.client-sub{font-size: 11px; color: var(--text-muted); font-family: 'Geist Mono', monospace; letter-spacing: 0.04em}

/* Status pills — inspired by reference */
.status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
}
.status::before{
  content:'';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.status.postulado{background: rgba(255,208,64,0.18); color: #FFE066; border-color: rgba(255,208,64,0.50)}
.status.seleccionado{background: rgba(167,139,255,0.20); color: #D4C0FF; border-color: rgba(167,139,255,0.55); box-shadow: 0 0 16px var(--violet-glow-soft)}
.status.progreso{background: rgba(64,216,255,0.18); color: #B8F4FF; border-color: rgba(64,216,255,0.50)}
.status.revision{background: rgba(255,208,64,0.18); color: #FFE066; border-color: rgba(255,208,64,0.50)}
.status.entregado{background: rgba(170,255,68,0.18); color: #CCFF88; border-color: rgba(170,255,68,0.50); box-shadow: 0 0 16px var(--lime-glow-soft)}
.status.rechazado{background: rgba(255,90,126,0.18); color: #FF8CAA; border-color: rgba(255,90,126,0.45)}

.td-right{text-align: right}
.td-muted{color: var(--text-muted); font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.04em}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px){
  .kpi-grid{grid-template-columns: repeat(2, 1fr)}
  .main-grid, .activity-wrap{grid-template-columns: 1fr}
}
@media (max-width: 900px){
  .app{grid-template-columns: 1fr}
  /* Sidebar oculto por defecto, JS lo convierte en drawer */
  .sidebar:not(.mobile-sidebar){display: none}
  .main{padding: 0 16px 40px}
  .topbar{padding-left: 64px !important}  /* espacio para el botón hamburger */
  .welcome{flex-direction: column; align-items: flex-start; gap: 20px}
  .welcome h1{font-size: 32px}
  .search{width: 140px}
  .topbar-actions{gap: 6px}
  .breadcrumb{font-size: .8rem}

  /* ── Drawer móvil (menú lateral) — opaco y por encima de todo ── */
  .sidebar.mobile-sidebar{
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh; height: 100dvh;
    width: 280px; max-width: 85vw;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
    background: #0d0d12 !important;   /* totalmente opaco */
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 4px 0 40px rgba(0,0,0,.6);
    transform: translateX(-100%);
    transition: transform .25s ease;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .sidebar.mobile-sidebar.open{ transform: translateX(0); }

  #mobileMenuBackdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    /* z-index: 99998 !important; */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  #mobileMenuBtn{ z-index: 99990 !important; }
  #mobileMenuClose{ z-index: 5; }
}
@media (max-width: 600px){
  .main{padding: 0 12px 30px}
  .topbar{padding: 14px 16px 14px 60px !important}
}



/* ============================================
   NAV (landing page)
   ============================================ */
.nav{
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(17, 17, 22, 0.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.nav::after{
  content:'';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet-glow-soft), var(--cyan-glow-soft), transparent);
}
/* ── Mobile nav toggle (+ / ×) ─────────────────────────── */
.nav-mobile-btn{
  display:none;
  width:36px; height:36px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-bright);
  font-size:22px; font-weight:300; line-height:1;
  transition:background .18s, transform .25s;
  font-family:'Geist',sans-serif;
  flex-shrink:0;
}
.nav-mobile-btn:hover{background:rgba(255,255,255,.1)}
/* × state when menu is open */
.nav.open .nav-mobile-btn{transform:rotate(45deg)}
.logo{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.logo-mark{
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  color: white;
  font-weight: 700;
  font-size: 17px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 8px 24px var(--violet-glow),
    0 0 40px var(--violet-glow-soft);
  position: relative;
}
.logo-mark::before{
  content:'';
  position: absolute;
  inset: 1px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%, transparent 100%);
}
.logo-name{color: var(--text-bright)}
.nav-links{
  display: flex;
  gap: 32px;
  font-size: 14px;
  color: var(--text-dim);
}
.nav-links a{
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover{color: var(--text-bright)}
.nav-cta{
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 10px 25px var(--violet-glow-soft);
  border: none;
}
.nav-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 15px 35px var(--violet-glow);
}

/* ============================================
   LAYOUT
   ============================================ */
.container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

/* ============================================
   HERO
   ============================================ */
.hero{
  padding: 100px 0 60px;
  position: relative;
  text-align: center;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  margin-bottom: 36px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.3);
}
.eyebrow .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime), 0 0 24px var(--lime-glow);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{opacity: 1; transform: scale(1)}
  50%{opacity: 0.5; transform: scale(0.85)}
}

.hero-title{
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(44px, 8vw, 96px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-bright);
}
.hero-title .gradient{
  background: linear-gradient(110deg, var(--violet-bright) 0%, var(--cyan-bright) 50%, var(--violet-bright) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  animation: gradient-shift 6s ease infinite;
  filter: drop-shadow(0 0 30px var(--violet-glow-soft));
}
@keyframes gradient-shift{
  0%,100%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
}

.hero-sub{
  font-size: 18px;
  color: var(--text-dim);
  max-width: 580px;
  line-height: 1.55;
  margin: 0 auto 44px;
}

.hero-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 80px;
  flex-wrap: wrap;
}
.btn-primary{
  padding: 15px 32px;
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan-deep) 100%);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s var(--ease);
  font-family: inherit;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 15px 35px var(--violet-glow),
    0 0 50px var(--violet-glow-soft);
}
.btn-primary:hover{
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 25px 50px var(--violet-glow),
    0 0 80px var(--violet-glow-soft);
}
.btn-primary svg{width:14px;height:14px;transition: transform 0.3s}
.btn-primary:hover svg{transform: translateX(3px)}

.btn-secondary{
  padding: 14px 24px;
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.28);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s;
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 24px rgba(0,0,0,0.3);
}
.btn-secondary:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-1px);
}

/* Hero data strip */
.hero-data{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 0;
  border-top: 1px solid var(--border-mid);
  border-bottom: 1px solid var(--border-mid);
  position: relative;
}
.hero-data::before,
.hero-data::after{
  content:'';
  position: absolute;
  left: 20%;
  right: 20%;
  height: 1px;
}
.hero-data::before{
  top: -1px;
  background: linear-gradient(90deg, transparent, var(--violet-glow), transparent);
}
.hero-data::after{
  bottom: -1px;
  background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent);
}
.hero-data-item{
  text-align: center;
  border-right: 1px solid var(--border);
  padding: 0 20px;
}
.hero-data-item:last-child{border-right: none}
.hero-data-value{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--text-bright);
}
.hero-data-value .u{font-size: 22px; color: var(--text-muted); font-weight: 500}
.hero-data-label{
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-data-value.v-violet{
  color: var(--violet-bright);
  text-shadow: 0 0 20px var(--violet-glow);
}
.hero-data-value.v-cyan{
  color: var(--cyan-bright);
  text-shadow: 0 0 20px var(--cyan-glow);
}
.hero-data-value.v-lime{
  color: var(--lime);
  text-shadow: 0 0 20px var(--lime-glow);
}
.hero-data-value.v-amber{
  color: var(--amber);
  text-shadow: 0 0 20px var(--amber-glow);
}

/* ============================================
   SECTION HEAD
   ============================================ */
.section{padding: 120px 0; position: relative}
.section-head{text-align: center; margin-bottom: 80px}
.section-tag{
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 20px;
  padding: 6px 14px;
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.section-title{
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 20px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-bright);
}
.section-title em{
  font-style: italic;
  background: linear-gradient(110deg, var(--violet-bright), var(--cyan-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px var(--violet-glow-soft));
}
.section-lead{
  font-size: 17px;
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ============================================
   FEATURE CARDS
   ============================================ */
.features{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feat-card{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  min-height: 440px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 50%, transparent 100%),
    var(--surface-1);
  border: 1px solid var(--border-mid);
  overflow: hidden;
  transition: all 0.5s var(--ease);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 40px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04);
}
.feat-card:hover{
  transform: translateY(-6px);
  border-color: var(--border-strong);
}

/* Glossy reflection */
.feat-card::after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Aura inside each card */
.feat-aura{
  position: absolute;
  top: 30%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.6s, transform 0.8s var(--ease);
  animation: aura-breathe 6s ease-in-out infinite;
}
.feat-card:hover .feat-aura{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}
@keyframes aura-breathe{
  0%,100%{opacity: 0.6}
  50%{opacity: 0.85}
}
.feat-card.violet .feat-aura{background: radial-gradient(circle, var(--violet) 0%, transparent 60%)}
.feat-card.cyan .feat-aura{background: radial-gradient(circle, var(--cyan) 0%, transparent 60%)}
.feat-card.lime .feat-aura{background: radial-gradient(circle, var(--lime) 0%, transparent 60%)}

/* Top border glow line */
.feat-card::before{
  content:'';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  z-index: 2;
  opacity: 0.8;
}
.feat-card.violet::before{
  background: linear-gradient(90deg, transparent, var(--violet-bright), transparent);
  box-shadow: 0 0 20px var(--violet);
}
.feat-card.cyan::before{
  background: linear-gradient(90deg, transparent, var(--cyan-bright), transparent);
  box-shadow: 0 0 20px var(--cyan);
}
.feat-card.lime::before{
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow: 0 0 20px var(--lime);
}

.feat-content{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.feat-icon-wrap{
  width: 104px;
  height: 104px;
  margin: 20px auto 52px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat-icon-bg{
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  transform: rotate(45deg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset,
    0 20px 40px rgba(0,0,0,0.4);
}
.feat-card.violet .feat-icon-bg{
  background: linear-gradient(135deg, rgba(167,139,255,0.30) 0%, rgba(167,139,255,0.06) 100%);
  border-color: rgba(167,139,255,0.55);
  box-shadow:
    0 1px 0 rgba(212,192,255,0.35) inset,
    0 0 50px var(--violet-glow),
    0 0 90px var(--violet-glow-soft),
    inset 0 0 30px rgba(167,139,255,0.15);
}
.feat-card.cyan .feat-icon-bg{
  background: linear-gradient(135deg, rgba(64,216,255,0.28) 0%, rgba(64,216,255,0.04) 100%);
  border-color: rgba(64,216,255,0.55);
  box-shadow:
    0 1px 0 rgba(184,244,255,0.35) inset,
    0 0 50px var(--cyan-glow),
    0 0 90px var(--cyan-glow-soft),
    inset 0 0 30px rgba(64,216,255,0.14);
}
.feat-card.lime .feat-icon-bg{
  background: linear-gradient(135deg, rgba(170,255,68,0.26) 0%, rgba(170,255,68,0.04) 100%);
  border-color: rgba(170,255,68,0.52);
  box-shadow:
    0 1px 0 rgba(204,255,136,0.35) inset,
    0 0 50px var(--lime-glow),
    0 0 90px var(--lime-glow-soft),
    inset 0 0 30px rgba(170,255,68,0.12);
}
.feat-icon{
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.feat-card.violet .feat-icon{color: var(--violet-bright); filter: drop-shadow(0 0 12px var(--violet-glow))}
.feat-card.cyan .feat-icon{color: var(--cyan-bright); filter: drop-shadow(0 0 12px var(--cyan-glow))}
.feat-card.lime .feat-icon{color: var(--lime); filter: drop-shadow(0 0 12px var(--lime-glow))}

.feat-title{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 12px;
  color: var(--text-bright);
}
.feat-sub{
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.55;
}

.feat-meta{
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.feat-card.violet .feat-meta strong{color: var(--violet-bright); text-shadow: 0 0 10px var(--violet-glow-soft)}
.feat-card.cyan .feat-meta strong{color: var(--cyan-bright); text-shadow: 0 0 10px var(--cyan-glow-soft)}
.feat-card.lime .feat-meta strong{color: var(--lime); text-shadow: 0 0 10px var(--lime-glow-soft)}

/* ============================================
   ORBITAL PROCESS
   ============================================ */
.process-section{padding: 140px 0; position: relative}
.process-split{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: center;
}
.process-intro h2{
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
  margin-top: 20px;
  color: var(--text-bright);
}
.process-intro h2 em{
  font-style: italic;
  background: linear-gradient(110deg, var(--cyan-bright), var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px var(--cyan-glow-soft));
}
.process-intro p{
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
}
.process-checklist{display: flex; flex-direction: column; gap: 14px}
.process-check{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-dim);
}
.process-check svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  filter: drop-shadow(0 0 8px currentColor);
}

/* Orbital diagram */
.orbital{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 560px;
  margin: 0 auto;
}
.orbital-svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.orbital-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 112px;
  height: 112px;
  border-radius: 28px;
  /* background: linear-gradient(135deg, var(--violet) 0%, var(--cyan-deep) 100%); */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: white;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 0 60px var(--violet-glow),
    0 0 120px rgba(95,212,244,0.3),
    0 20px 60px rgba(0,0,0,0.6);
  z-index: 3;
}
.orbital-center::before{
  content:'';
  position: absolute;
  inset: 1px;
  border-radius: 27px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%, transparent 100%);
}
/* Lens flare rings around center */
.orbital-center::after{
  content:'';
  position: absolute;
  inset: -12px;
  border-radius: 40px;
  border: 1px solid rgba(139,116,255,0.2);
  animation: center-pulse 3s ease-in-out infinite;
}
@keyframes center-pulse{
  0%,100%{transform: scale(1); opacity: 0.6; border-color: rgba(139,116,255,0.3)}
  50%{transform: scale(1.15); opacity: 0.1; border-color: rgba(95,212,244,0.3)}
}

/* Orbital cards */
.orb-card{
  position: absolute;
  width: 190px;
  padding: 16px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%),
    rgba(24,24,24,0.92);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  backdrop-filter: blur(24px);
  transition: transform 0.4s var(--ease);
  z-index: 2;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 40px rgba(0,0,0,0.6);
}
.orb-card-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.orb-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.orb-dot.violet{background: var(--violet-bright); box-shadow: 0 0 16px var(--violet), 0 0 32px var(--violet-glow-soft)}
.orb-dot.cyan{background: var(--cyan-bright); box-shadow: 0 0 16px var(--cyan), 0 0 32px var(--cyan-glow-soft)}
.orb-dot.lime{background: var(--lime); box-shadow: 0 0 16px var(--lime), 0 0 32px var(--lime-glow-soft)}
.orb-dot.amber{background: var(--amber); box-shadow: 0 0 16px var(--amber), 0 0 32px var(--amber-glow)}
.orb-num{
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.orb-title{
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  color: var(--text-bright);
}
.orb-desc{font-size: 12px; color: var(--text-dim); line-height: 1.45}

.orb-pos-1{top: 0; left: 50%; transform: translate(-50%, 0)}
.orb-pos-2{top: 50%; right: 0; transform: translate(0, -50%)}
.orb-pos-3{bottom: 0; left: 50%; transform: translate(-50%, 0)}
.orb-pos-4{top: 50%; left: 0; transform: translate(0, -50%)}
.orb-pos-1:hover{transform: translate(-50%, -4px) scale(1.04)}
.orb-pos-2:hover{transform: translate(4px, -50%) scale(1.04)}
.orb-pos-3:hover{transform: translate(-50%, 4px) scale(1.04)}
.orb-pos-4:hover{transform: translate(-4px, -50%) scale(1.04)}

/* ============================================
   EDITORS
   ============================================ */
.editors-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px}
.editor-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.005) 100%),
    var(--surface-1);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 40px rgba(0,0,0,0.4);
}
.editor-card:hover{
  border-color: var(--border-strong);
  transform: translateY(-4px);
}
.editor-card::before{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  opacity: 0;
  transition: opacity 0.3s;
}
.editor-card:nth-child(1)::before{background: linear-gradient(90deg, transparent, var(--violet-bright), transparent); box-shadow: 0 0 20px var(--violet)}
.editor-card:nth-child(2)::before{background: linear-gradient(90deg, transparent, var(--cyan-bright), transparent); box-shadow: 0 0 20px var(--cyan)}
.editor-card:nth-child(3)::before{background: linear-gradient(90deg, transparent, var(--lime), transparent); box-shadow: 0 0 20px var(--lime)}
.editor-card:hover::before{opacity: 1}

.editor-head{display: flex; align-items: center; gap: 14px; margin-bottom: 20px}
.editor-avatar{
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
  position: relative;
}
.editor-avatar::before{
  content:'';
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
}
.editor-avatar.violet{
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 8px 24px var(--violet-glow), 0 0 40px var(--violet-glow-soft);
}
.editor-avatar.cyan{
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 8px 24px var(--cyan-glow), 0 0 40px var(--cyan-glow-soft);
}
.editor-avatar.lime{
  background: linear-gradient(135deg, var(--lime) 0%, #7EB84A 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 8px 24px var(--lime-glow), 0 0 40px var(--lime-glow-soft);
}
.editor-info h4{font-size: 15px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.01em; color: var(--text-bright)}
.editor-info p{font-size: 11px; color: var(--text-muted); font-family: 'Geist Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase}
.editor-badge{
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(170,255,68,0.18);
  color: #CCFF88;
  border: 1px solid rgba(170,255,68,0.45);
  box-shadow: 0 0 14px var(--lime-glow-soft);
}
.editor-skills{display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px}
.skill-pill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  color: #E2E2F2;
  font-weight: 600;
}
.editor-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.mini-stat-label{
  font-size: 10px;
  font-family: 'Geist Mono', monospace;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.mini-stat-val{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}
.editor-card:nth-child(1) .mini-stat-val .accent{color: var(--violet-bright); text-shadow: 0 0 10px var(--violet-glow-soft)}
.editor-card:nth-child(2) .mini-stat-val .accent{color: var(--cyan-bright); text-shadow: 0 0 10px var(--cyan-glow-soft)}
.editor-card:nth-child(3) .mini-stat-val .accent{color: var(--lime); text-shadow: 0 0 10px var(--lime-glow-soft)}

/* ============================================
   FORM
   ============================================ */
.form-section{padding: 140px 0; position: relative}
.form-wrap{display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start}
.form-info{position: sticky; top: 100px}
.form-info h2{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  margin-top: 20px;
  color: var(--text-bright);
}
.form-info h2 em{
  font-style: italic;
  background: linear-gradient(110deg, var(--violet-bright), var(--cyan-bright), var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px var(--violet-glow-soft));
}
.form-info p{color: var(--text-dim); margin-bottom: 32px; line-height: 1.6; font-size: 16px}
.assurance{display: flex; flex-direction: column; gap: 14px; padding-top: 32px; border-top: 1px solid var(--border-mid)}
.assurance-item{display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-dim)}
.assurance-item svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  filter: drop-shadow(0 0 8px currentColor);
}
.assurance-item:nth-child(1) svg{color: var(--violet-bright)}
.assurance-item:nth-child(2) svg{color: var(--cyan-bright)}
.assurance-item:nth-child(3) svg{color: var(--lime)}
.assurance-item:nth-child(4) svg{color: var(--amber)}

.form-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%),
    rgba(20,20,28,0.92);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 36px;
  backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 40px 100px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.06);
}
.form-card::before{
  content:'';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet-bright) 30%, var(--cyan-bright) 70%, transparent);
  box-shadow: 0 0 20px var(--violet-glow-soft);
}
.form-aura{
  position: absolute;
  top: -40%;
  right: -30%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, var(--violet-glow) 0%, transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.4;
}

.progress{display: flex; align-items: center; gap: 10px; margin-bottom: 36px; position: relative; z-index: 1}
.progress-step{display: flex; align-items: center; gap: 10px}
.progress-dot{
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: 'Geist Mono', monospace;
  color: var(--text-muted);
  transition: all 0.3s;
  flex-shrink: 0;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.progress-step.active .progress-dot{
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan-deep) 100%);
  color: white;
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 0 30px var(--violet-glow),
    0 0 60px var(--violet-glow-soft);
}
.progress-step.done .progress-dot{
  background: rgba(170,255,68,0.22);
  border-color: var(--lime);
  color: #CCFF88;
  box-shadow: 0 0 24px var(--lime-glow-soft);
  font-weight: 700;
}
.progress-label{
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.progress-step.active .progress-label{color: var(--text-bright)}
.progress-line{flex: 1; height: 1px; background: var(--border); min-width: 10px}
.progress-step.done ~ .progress-line{background: var(--lime); box-shadow: 0 0 8px var(--lime-glow-soft)}

.panel{display: none; position: relative; z-index: 1}
.panel.active{display: block; animation: slideUp 0.4s var(--ease)}
@keyframes slideUp{
  from{opacity: 0; transform: translateY(10px)}
  to{opacity: 1; transform: translateY(0)}
}
.panel-head{margin-bottom: 28px}
.panel-head h3{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--text-bright);
}
.panel-head p{font-size: 13px; color: var(--text-dim)}

.field{margin-bottom: 20px}
.field-row{display: grid; grid-template-columns: 1fr 1fr; gap: 14px}
.field label{
  display: block;
  font-size: 11px;
  color: #C0C0E0;
  margin-bottom: 8px;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.field input,
.field textarea,
.field select{
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-mid);
  color: var(--text-bright);
  padding: 13px 15px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  transition: all 0.2s;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.field input::placeholder,
.field textarea::placeholder{color: var(--text-muted)}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline: none;
  border-color: var(--violet);
  background: rgba(167,139,255,0.08);
  box-shadow:
    0 0 0 3px var(--violet-glow-soft),
    0 0 30px var(--violet-glow-soft),
    0 1px 0 rgba(255,255,255,0.08) inset;
}
.field textarea{resize: vertical; min-height: 96px; line-height: 1.5}

.category-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px}
.cat-pill{
  padding: 14px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.cat-pill::before{
  content:'';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, var(--violet-glow) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.cat-pill:hover{border-color: var(--border-strong)}
.cat-pill.selected{
  background: rgba(167,139,255,0.18);
  border-color: var(--violet);
  box-shadow: 0 0 30px var(--violet-glow-soft), 0 1px 0 rgba(255,255,255,0.10) inset;
}
.cat-pill.selected::before{opacity: 1}
.cat-pill strong{font-size: 13px; font-weight: 600; position: relative; z-index: 1; color: var(--text-bright)}
.cat-pill span{font-size: 11px; color: var(--text-muted); font-family: 'Geist Mono', monospace; position: relative; z-index: 1}
.cat-pill.selected strong{color: var(--violet-bright); text-shadow: 0 0 10px var(--violet-glow-soft)}

.form-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-mid);
}
.btn-back{
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-dim);
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.btn-back:hover{border-color: var(--border-strong); color: var(--text-bright)}
.btn-next{
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan-deep) 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 8px 24px var(--violet-glow),
    0 0 40px var(--violet-glow-soft);
}
.btn-next:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 16px 40px var(--violet-glow),
    0 0 80px var(--violet-glow-soft);
}

.success{display: none; text-align: center; padding: 40px 20px; position: relative; z-index: 1}
.success.active{display: block; animation: slideUp 0.5s var(--ease)}
.success-icon{
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--lime) 0%, #7EB84A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  color: white;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 0 60px var(--lime-glow),
    0 0 120px var(--lime-glow-soft);
}
.success h3{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--text-bright);
}
.success h3 em{
  font-style: italic;
  background: linear-gradient(110deg, var(--cyan-bright), var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.success p{color: var(--text-dim); max-width: 360px; margin: 0 auto}

/* ============================================
   FOOTER
   ============================================ */
.footer{padding: 80px 0 40px; border-top: 1px solid var(--border-mid); margin-top: 60px; position: relative; z-index: 1}
.footer-grid{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px}
.footer-brand p{color: var(--text-dim); font-size: 14px; margin-top: 16px; line-height: 1.6; max-width: 320px}
.footer-col h5{
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.footer-col ul{list-style: none}
.footer-col li{margin-bottom: 10px}
.footer-col a{color: var(--text-dim); font-size: 14px; text-decoration: none; transition: color 0.2s}
.footer-col a:hover{color: var(--text-bright)}
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================
   VIDEO CAROUSEL
   ============================================ */
.cases-section{padding: 140px 0; position: relative; overflow: hidden}
.cases-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 40px;
}
.cases-head-left{max-width: 640px}
.cases-head-left .section-tag{margin-bottom: 20px}
.cases-head h2{
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
  color: var(--text-bright);
}
.cases-head h2 em{
  font-style: italic;
  background: linear-gradient(110deg, var(--violet-bright), var(--cyan-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px var(--violet-glow-soft));
}
.cases-head p{color: var(--text-dim); font-size: 16px; line-height: 1.6}

.cases-nav{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.nav-btn{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-mid);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(20px);
  transition: all 0.3s var(--ease);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 10px 30px rgba(0,0,0,0.4);
}
.nav-btn:hover{
  background: rgba(167,139,255,0.18);
  border-color: var(--violet);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 10px 30px rgba(0,0,0,0.4),
    0 0 30px var(--violet-glow-soft);
}
.nav-btn:disabled{opacity: 0.3; cursor: not-allowed}
.nav-btn svg{width: 20px; height: 20px}

.carousel-wrap{
  position: relative;
  margin: 0 -40px;
  padding: 0 40px;
}
.carousel{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel::-webkit-scrollbar{display: none}

.video-card{
  flex: 0 0 300px;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  border: 1px solid var(--border-mid);
  transition: all 0.5s var(--ease);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 80px rgba(0,0,0,0.6);
}
.video-card:hover{
  transform: translateY(-6px) scale(1.02);
  border-color: var(--border-strong);
}

/* Gradient backgrounds by variant */
.video-card.v-violet{
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%),
    linear-gradient(135deg, #A78BFF 0%, #7C5CF5 40%, #1A0F3D 100%);
}
.video-card.v-cyan{
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%),
    linear-gradient(135deg, #40D8FF 0%, #1AA8CC 40%, #0A2A3A 100%);
}
.video-card.v-lime{
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%),
    linear-gradient(135deg, #AAFF44 0%, #66CC00 40%, #1A2D0A 100%);
}
.video-card.v-amber{
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%),
    linear-gradient(135deg, #F5C24E 0%, #C48A1E 40%, #3D2A0A 100%);
}
.video-card.v-rose{
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%),
    linear-gradient(135deg, #F27D8B 0%, #C4385A 40%, #3D0A1C 100%);
}
.video-card.v-mix{
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%),
    linear-gradient(135deg, #8B74FF 0%, #F27D8B 50%, #1A0F3D 100%);
}

/* Simulated video texture overlay */
.video-card::before{
  content:'';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}

/* Ken burns subtle movement */
.video-card::after{
  content:'';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.3) 0%, transparent 60%);
  animation: ken-burns 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ken-burns{
  0%{transform: scale(1) translate(0,0)}
  100%{transform: scale(1.08) translate(-2%, 2%)}
}

/* Card content layout */
.video-inner{
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.video-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.video-badge{
  padding: 5px 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(16px);
  border-radius: 999px;
  font-size: 10px;
  font-family: 'Geist Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
}
.video-duration{
  padding: 5px 10px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(16px);
  border-radius: 6px;
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
  color: white;
  font-weight: 500;
}

/* Caption overlay (simulates video caption) */
.video-caption{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: white;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  padding: 0 24px;
  font-style: italic;
  pointer-events: none;
  width: 100%;
}
.video-caption .accent{
  background: linear-gradient(110deg, #FFD700, #FFA500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.video-caption .underline{
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* Play button */
.video-play{
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--ease);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 10px 30px rgba(0,0,0,0.5);
}
.video-card:hover .video-play{
  background: rgba(255,255,255,0.95);
  transform: translateX(-50%) scale(1.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 20px 50px rgba(0,0,0,0.5),
    0 0 40px rgba(255,255,255,0.3);
}
.video-play svg{
  width: 20px;
  height: 20px;
  color: white;
  margin-left: 2px;
  transition: color 0.3s;
}
.video-card:hover .video-play svg{color: #000}

.video-bottom{
  position: relative;
  z-index: 2;
}
.video-client{
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.video-title{
  font-family: 'Instrument Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: white;
  margin-bottom: 12px;
  line-height: 1.2;
}
.video-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.video-views{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: white;
  font-weight: 500;
}
.video-views svg{width: 14px; height: 14px; opacity: 0.8}
.video-editor{
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.04em;
}
.video-editor strong{color: white; font-weight: 500}

/* Dots indicator */
.carousel-dots{
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 36px;
}
.carousel-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  padding: 0;
}
.carousel-dot.active{
  width: 24px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--violet-bright), var(--cyan-bright));
  box-shadow: 0 0 12px var(--violet-glow-soft);
}

/* Fade edges */
.carousel-wrap::before,
.carousel-wrap::after{
  content:'';
  position: absolute;
  top: 0;
  bottom: 20px;
  width: 80px;
  pointer-events: none;
  z-index: 5;
}
.carousel-wrap::before{
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.carousel-wrap::after{
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Pantallas medianas (1440 → 1100px): ajustar gap del formulario */
@media (max-width: 1200px){
  .form-wrap{gap: 48px}
  .form-section{padding: 100px 0}
  .form-info h2{font-size: 42px}
}
@media (max-width: 1060px){
  .form-wrap{gap: 32px}
  .form-section{padding: 80px 0}
  .form-info h2{font-size: 36px}
  .form-card{min-width: 0}  /* evita overflow en grid */
}
@media (max-width: 960px){
  .process-split{grid-template-columns: 1fr; gap: 60px}
  .form-wrap{grid-template-columns: 1fr; gap: 40px}
  .form-info{position: static}
}
@media (max-width: 900px){
  .nav{padding: 16px 20px; flex-wrap:wrap; gap:0}
  .nav-mobile-btn{display:flex}
  .nav-links{
    display: none;
    width:100%; order:10;
    flex-direction:column; gap:0;
    border-top:1px solid rgba(255,255,255,.07);
    padding:8px 0; margin-top:8px;
  }
  .nav-links a{
    padding:12px 4px; font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .nav-links a:last-child{border-bottom:none}
  .nav.open .nav-links{display:flex}
  .nav-hide-mobile{display:none !important}
  .container{padding: 0 20px}
  .hero-data{grid-template-columns: repeat(2, 1fr); gap: 0}
  .hero-data-item{border-right: none; border-bottom: 1px solid var(--border); padding: 16px 20px}
  .hero-data-item:nth-child(odd){border-right: 1px solid var(--border)}
  .hero-data-item:nth-last-child(-n+2){border-bottom: none}
  .features{grid-template-columns: 1fr; gap: 16px}
  .feat-card{min-height: auto}
  .editors-grid{grid-template-columns: 1fr}
  .field-row{grid-template-columns: 1fr}
  .category-grid{grid-template-columns: 1fr 1fr}
  .footer-grid{grid-template-columns: 1fr 1fr; gap: 32px}
  .footer-brand{grid-column: 1/-1}
  .section, .process-section, .form-section{padding: 72px 0}
  .hero{padding: 40px 0 20px}
  .orbital{max-width: 400px}
  .orb-card{width: 140px; padding: 12px 14px}
  .orb-title{font-size: 13px}
  .orb-desc{font-size: 11px}
  .cases-head{flex-direction: column; align-items: flex-start}
  .video-card{flex: 0 0 260px}
  .video-caption{font-size: 22px}
}

/* ── Orbital grid en móvil ─────────────────────────────────
   3×3 grid: cards en las 4 esquinas, logo en la celda central
   ─────────────────────────────────────────────────────────── */
@media (max-width: 600px){
  .orbital{
    display: grid;
    grid-template-columns: 1fr clamp(60px,20vw,80px) 1fr;
    grid-template-rows:    1fr clamp(60px,20vw,80px) 1fr;
    gap: 8px;
    aspect-ratio: unset;
    max-width: 100%;
    position: static;        /* ya no necesita relative */
  }
  .orbital-svg{ display: none }
  /* Centro — celda 2,2 del grid, sin posición absoluta */
  .orbital-center{
    grid-column: 2; grid-row: 2;
    position: static;
    transform: none;
    width: clamp(60px,20vw,80px); height: clamp(60px,20vw,80px);
    border-radius: 16px;
    align-self: center; justify-self: center;
  }
  .orbital-center::after{ display: none } /* sin anillo pulsante */
  /* Cards — posición estática en sus esquinas del grid */
  .orb-card{
    position: static;
    transform: none !important;
    width: 100%;
    padding: 14px 12px;
  }
  .orb-pos-1{ grid-column:1; grid-row:1 }   /* 01 Brief    — top-left  */
  .orb-pos-2{ grid-column:3; grid-row:1 }   /* 02 Match    — top-right */
  .orb-pos-4{ grid-column:1; grid-row:3 }   /* 04 Trabajo  — bot-left  */
  .orb-pos-3{ grid-column:3; grid-row:3 }   /* 03 Contacto — bot-right */

  /* Override any inline-style or higher-specificity absolute positioning */
  .process-section .orbital {
    position: static !important;
    max-width: 100% !important;
    aspect-ratio: unset !important;
    display: grid !important;
    grid-template-columns: 1fr clamp(60px,20vw,80px) 1fr !important;
    grid-template-rows: 1fr clamp(60px,20vw,80px) 1fr !important;
    gap: 8px !important;
  }
  .process-section .orbital-svg { display: none !important }
  .process-section .orbital-center {
    grid-column: 2 !important; grid-row: 2 !important;
    position: static !important;
    transform: none !important;
    width: clamp(60px,20vw,80px) !important;
    height: clamp(60px,20vw,80px) !important;
    border-radius: 16px !important;
    align-self: center !important; justify-self: center !important;
  }
  .process-section .orb-card {
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }
  .process-section .orb-card.orb-pos-1 {
    grid-column: 1 !important; grid-row: 1 !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
  }
  .process-section .orb-card.orb-pos-2 {
    grid-column: 3 !important; grid-row: 1 !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
  }
  .process-section .orb-card.orb-pos-3 {
    grid-column: 3 !important; grid-row: 3 !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
  }
  .process-section .orb-card.orb-pos-4 {
    grid-column: 1 !important; grid-row: 3 !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
  }

}

/* ══════════════════════════════════════════════════════════════
   Phone Country Picker — shared between index.php & solicitar.php
   ══════════════════════════════════════════════════════════════ */
.phone-wrap{
  display:flex; position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px; overflow:visible;
  transition:border-color .18s;
}
.phone-wrap:focus-within{border-color:rgba(139,116,255,.4)}
.phone-flag-btn{
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:0 12px; background:transparent; border:none;
  border-right:1px solid rgba(255,255,255,.09);
  color:var(--text); cursor:pointer; white-space:nowrap;
  font-size:.88rem; font-family:'Geist',sans-serif;
  min-width:88px; align-self:stretch;
}
.phone-flag-btn:hover{background:rgba(255,255,255,.04)}
.phone-flag-btn #phoneFlagEmoji{font-size:1.1rem;line-height:1;display:flex;align-items:center}
.phone-flag-btn #phoneDialCode{font-size:.82rem;font-weight:600;color:var(--text-dim);line-height:1}
.phone-wrap input[type="tel"]{
  flex:1; background:transparent; border:none !important;
  border-radius:0 12px 12px 0 !important;
  padding:12px 14px; font-size:.9rem;
  color:var(--text); font-family:'Geist',sans-serif; outline:none;
}
.phone-wrap input[type="tel"]::placeholder{color:var(--text-muted)}
.phone-dropdown{
  display:none; position:absolute; top:calc(100% + 4px); left:0;
  width:300px; max-height:320px;
  background:#13131a; border:1px solid rgba(255,255,255,.1);
  border-radius:14px; z-index:200;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  overflow:hidden; flex-direction:column;
}
.phone-dropdown.open{display:flex}
.phone-search-wrap{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.phone-search-input{
  width:100%; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); border-radius:8px;
  padding:8px 12px; color:var(--text); font-size:.83rem;
  font-family:'Geist',sans-serif; outline:none;
}
.phone-search-input:focus{border-color:rgba(139,116,255,.3)}
.phone-country-list{overflow-y:auto;flex:1}
.phone-country-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; cursor:pointer; transition:background .12s;
  font-size:.83rem; font-family:'Geist',sans-serif; color:var(--text-dim);
}
.phone-country-item:hover{background:rgba(255,255,255,.05)}
.phone-country-item.selected{background:rgba(139,116,255,.1);color:var(--violet-bright)}
.phone-country-flag{font-size:1.1rem;flex-shrink:0}
.phone-country-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-country-code{font-family:'Geist Mono',monospace;font-size:.75rem;color:var(--text-muted);flex-shrink:0}





    /* --- Grid --- */
    .video-grid {
      display: flex;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      margin: 0 auto;
    }

    .video-card {
      border-radius: 24px;
      overflow: hidden;
      background: #000;
    }

    .video-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 9/16;
      background: #000;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .vimeo-player { width: 100%; height: 100%; pointer-events: none; }
    .vimeo-player iframe { width: 100%; height: 100%; border: none; }

    /* --- Botón Central --- */
    .play-button-central {
      position: absolute;
      width: 75px; height: 75px;
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      border: 1px solid var(--glass-border);
      border-radius: 50%;
      z-index: 25;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.4s ease;
    }

    .play-button-central::before {
      content: '';
      border-left: 18px solid white;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
      margin-left: 5px;
    }

    .video-wrapper.is-playing .play-button-central::before {
      content: ''; width: 6px; height: 20px;
      border-left: 5px solid white; border-right: 5px solid white;
      border-top: 0; border-bottom: 0; margin-left: 0;
    }

    .video-wrapper.is-playing .play-button-central { opacity: 0; }
    .video-wrapper:hover .play-button-central { opacity: 1 !important; }

    /* --- Controles Footer --- */
    .custom-controls {
      position: absolute;
      bottom: 20px; left: 15px; right: 15px;
      z-index: 30;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .video-wrapper:hover .custom-controls { opacity: 1; }

    .progress-container {
      width: 100%; height: 3px;
      background: rgba(255,255,255,0.2);
      border-radius: 10px;
      margin-bottom: 15px;
    }
    .progress-fill {
      height: 100%; width: 0%;
      background: var(--primary-color);
      box-shadow: 0 0 10px var(--primary-glow);
    }

    .control-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

    .control-btn {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      color: white;
      width: 38px; height: 38px;
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }

    .time-display { font-family: monospace; font-size: 12px; }

    .volume-wrap { display: flex; align-items: center; gap: 5px; }
    input[type=range] { accent-color: var(--primary-color); width: 50px; }

    /* --- POPUP --- */
    .popup-overlay {
      display: none; position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.95); z-index: 1000;
      backdrop-filter: blur(20px); justify-content: center; align-items: center;
    }
    .popup-overlay.active { display: flex; }

    .popup-content {
      position: relative;
      width: 100%; max-width: 450px;
      background: #000; border-radius: 30px;
      box-shadow: 0 0 80px var(--primary-glow); overflow: hidden;
    }

    .popup-close {
      position: absolute; top: 15px; right: 15px;
      z-index: 110; color: white; background: rgba(0,0,0,0.5);
      border: none; width: 35px; height: 35px; border-radius: 50%; cursor: pointer;
    }
    .video-card.ocultar {
    visibility: hidden;
    margin-right: -321px;
}