@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,200;1,9..144,300;1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --bg-0:#0a0a0a; --bg-1:#0d0d0d; --bg-2:#121212; --bg-3:#1a1a1a;
  --font-size-base:14px; --line-height-base:1.6; --letter-spacing-body:0.01em;
  --gold:#c9aa72; --gold-light:#e8c89a; --gold-dark:#9a7d4a; --gold-deep:#8a6f3e;
  --gold-dim:rgba(201,170,114,0.08); --gold-border:rgba(201,170,114,0.22);
  --gold-strong:rgba(201,170,114,0.35); --gold-glow:rgba(201,170,114,0.4);
  --text-0:#ede9e0; --text-1:#958f84; --text-2:#7a766f; --text-3:#514d47;
  --border-0:rgba(255,255,255,0.04); --border-1:rgba(255,255,255,0.06);
  --border-2:rgba(255,255,255,0.08); --border-3:rgba(255,255,255,0.13);
  --green:#4acc9a; --blue:#7aabf5; --red:#f07a7a; --amber:#e8a84a;
  --whatsapp:#25D366; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px;
}

* { box-sizing: border-box; }
html, body {
  background-color: #0b0b0b !important;
  color: #ede9e0;
  min-height: 100vh;
}
body {
  margin:0; font-family:'DM Sans',sans-serif;
  font-size:var(--font-size-base); line-height:var(--line-height-base); letter-spacing:var(--letter-spacing-body);
  background:var(--bg-0); color:var(--text-0);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset !important;
  -webkit-text-fill-color: #ede9e0 !important;
  caret-color: #ede9e0;
  border-color: rgba(255,255,255,0.13) !important;
  transition: background-color 5000s ease-in-out 0s;
}

@keyframes auraFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(20px) scale(1.05)} }
@keyframes rise { 0%{transform:translateY(700px);opacity:0} 10%{opacity:.5} 90%{opacity:.3} 100%{transform:translateY(-50px);opacity:0} }
@keyframes shimmer { 0%{left:-100%} 50%,100%{left:100%} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes ringPulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.8);opacity:0} }
@keyframes revealNcm { 0%{opacity:0;letter-spacing:20px;filter:blur(8px)} 100%{opacity:1;letter-spacing:2px;filter:blur(0)} }
@keyframes fillBar { from{width:0} }
@keyframes barRise { from{transform:scaleY(0)} }
@keyframes radarSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Efectos de fondo */
.aura { position:absolute; pointer-events:none; animation:auraFloat 10s ease-in-out infinite; }
.aura-gold { background:radial-gradient(circle,rgba(201,170,114,0.10) 0%,transparent 60%); }
.aura-blue { background:radial-gradient(circle,rgba(122,171,245,0.06) 0%,transparent 55%); animation-duration:12s; animation-direction:reverse; }
.particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.particle { position:absolute; width:1.5px; height:1.5px; background:var(--gold); border-radius:50%; opacity:0; animation:rise 14s linear infinite; }

/* Tipografía */
.eyebrow {
  font-family:'Fraunces',serif; font-style:italic;
  font-size:11px; color:var(--gold); letter-spacing:1.5px; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before { content:''; width:14px; height:0.5px; background:var(--gold); }

.section-h {
  font-family:'Fraunces',serif; font-style:italic;
  font-size:10px; color:var(--gold); letter-spacing:1.8px; text-transform:uppercase;
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.section-h::before { content:''; width:14px; height:0.5px; background:var(--gold); }
.section-h::after { content:''; flex:1; height:0.5px; background:linear-gradient(90deg,rgba(201,170,114,0.3),transparent); }

/* Cards */
.card {
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.005));
  border:0.5px solid var(--border-1); border-radius:var(--r-xl);
  padding:20px; position:relative; overflow:hidden;
}
.card-featured {
  background:linear-gradient(135deg,rgba(201,170,114,0.06),rgba(255,255,255,0.01));
  border-color:var(--gold-border);
}
.card-featured::before {
  content:''; position:absolute; top:-50px; right:-50px;
  width:140px; height:140px;
  background:radial-gradient(circle,rgba(201,170,114,0.12),transparent 70%);
  pointer-events:none;
}
.card-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.card-link { font-size:11px; color:var(--text-2); text-decoration:none; cursor:pointer; }
.card-link:hover { color:var(--gold); }

/* CTAs */
.cta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border-radius:var(--r-md); font-size:12px; cursor:pointer;
  transition:all .25s; background:rgba(255,255,255,0.02);
  border:0.5px solid var(--border-2); color:var(--text-0);
  font-family:inherit; text-decoration:none;
}
.cta:hover { border-color:var(--gold-strong); background:rgba(201,170,114,0.04); }
.cta-primary {
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);
  color:#1a1200; font-weight:500;
  box-shadow:0 4px 24px rgba(201,170,114,0.2);
  border-color:transparent; position:relative; overflow:hidden;
}
.cta-primary::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  animation:shimmer 3s ease-in-out infinite;
}
.cta-primary > * { position:relative; z-index:2; }

/* Status */
.status-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--green); box-shadow:0 0 6px var(--green);
  animation:pulse 2s infinite; display:inline-block;
}

/* Footer terminal */
.foot-terminal {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 28px; border-top:0.5px solid var(--border-0);
  background:rgba(0,0,0,0.3);
  font-family:'DM Mono',monospace; font-size:10px; color:var(--text-3);
}
.foot-terminal-l { display:flex; gap:18px; }
.foot-terminal-l b { color:var(--text-2); font-weight:400; }
.foot-terminal-l b.ok { color:var(--green); }
.foot-terminal-r { font-family:'Fraunces',serif; font-style:italic; color:var(--text-2); }

/* Nav top (compartido) */
.dx-top {
  position:relative; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 28px; border-bottom:0.5px solid var(--border-0);
}
.dx-brand { display:flex; align-items:center; gap:11px; }
.dx-logo { width:34px; height:34px; filter:drop-shadow(0 0 14px var(--gold-glow)); }
.dx-logo svg { width:100%; height:100%; }
.dx-name { font-family:'Fraunces',serif; font-size:17px; color:var(--text-0); letter-spacing:.2px; }
.dx-name span { color:var(--gold); font-style:italic; }
.dx-nav {
  display:flex; gap:4px; padding:3px;
  background:rgba(255,255,255,0.02); border:0.5px solid var(--border-1); border-radius:var(--r-sm);
}
.dx-nav a {
  padding:6px 14px; font-size:12px; color:var(--text-2);
  text-decoration:none; border-radius:6px;
  display:flex; align-items:center; gap:6px; cursor:pointer;
}
.dx-nav a:hover { color:var(--text-0); }
.dx-nav a.active { background:var(--gold-dim); color:var(--gold); border:0.5px solid var(--gold-border); }
.dx-nav a .ic { font-family:'Fraunces',serif; font-style:italic; font-size:11px; }
.dx-topr { display:flex; align-items:center; gap:14px; }
.dx-search {
  display:flex; align-items:center; gap:8px; padding:7px 12px;
  background:rgba(255,255,255,0.02); border:0.5px solid var(--border-1); border-radius:var(--r-sm);
  font-size:11px; color:var(--text-2); cursor:pointer; font-family:inherit;
}
.dx-search .kbd {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:14px; padding:0 4px;
  background:rgba(255,255,255,0.05); border-radius:3px;
  font-size:9px; color:var(--text-3); font-family:'DM Mono',monospace;
}
.dx-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#1a1200; font-weight:500; border:1px solid var(--gold-strong);
}

@media (max-width:980px) {
  .dx-nav { display:none; }
  .dx-top { padding:14px 16px; }
}

/* ── Micro-interacciones globales ── */

.card {
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  border-color: rgba(201,170,114,0.18);
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.card-featured:hover {
  border-color: rgba(201,170,114,0.4);
  box-shadow: 0 8px 32px rgba(201,170,114,0.08);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(201,170,114,0.3);
}

.dx-nav a {
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,204,154,0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(74,204,154,0); }
}
.status-dot { animation: pulse 2s infinite, statusPulse 2s infinite; }

@keyframes progressFill { from { width: 0; } }
.cap-bar-fill { animation: progressFill 1.2s cubic-bezier(.4,0,.2,1) forwards; }

.foot-terminal {
  animation: fadeInUp .6s ease both;
  animation-delay: .3s;
  opacity: 0;
  animation-fill-mode: forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ringAppear {
  from { stroke-dashoffset: 376.99; opacity: 0; }
}
#plan-ring-fill { animation: ringAppear 1.4s cubic-bezier(.4,0,.2,1) forwards; }

/* ── Touch targets 44x44px ── */
.action-icon-btn { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; padding:8px; cursor:pointer; border-radius:8px; transition:background .15s; }
.action-icon-btn:hover { background:rgba(255,255,255,0.06); }
.action-icon-btn:active { background:rgba(255,255,255,0.10); }

/* ── Autofill dark theme ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow:0 0 0px 1000px #1a1a1a inset !important;
  -webkit-text-fill-color:#ede9e0 !important;
  caret-color:#ede9e0;
  border-color:rgba(255,255,255,0.13) !important;
  transition:background-color 5000s ease-in-out 0s;
}