/* =========================================================
   VELVETX AGENCY — Capa de refinamiento premium
   Se carga al final y solo ajusta color, jerarquía, espaciado y sombras.
   No cambia estructura, textos ni funcionalidades.

   Paleta oficial
   Fucsia VelvetX  #EC008C  · CTA, palabras destacadas, detalles de marca
   Turquesa     #20C9D2  · acento secundario (iconos, indicadores)
   Azul noche   #172033  · títulos, texto, bloques de contraste
   Blanco       #FFFFFF  · base de la interfaz
   Rosa suave   #FFF4FA  · separación de secciones
   Gris claro   #F5F6F8  · cards y áreas secundarias
   ========================================================= */
:root {
  --fucsia: #EC008C;
  --fucsia-soft: #EC008C;
  --pink: #EC008C;
  --pink-2: #EC008C;
  --cyan: #20C9D2;
  --purple: #20C9D2;
  --navy: #172033;
  --ink: #172033;
  --ink-soft: rgba(23, 32, 51, .66);
  --muted: rgba(23, 32, 51, .62);
  --rosa: #FFF4FA;
  --gris: #F5F6F8;
  --bg: #FFFFFF;
  --bg-soft: #FFF4FA;
  --line: rgba(23, 32, 51, .08);
  --line-strong: rgba(23, 32, 51, .14);
  --grad: #EC008C;
  --grad-band: #172033;
  --radius: 24px;
  --shadow: 0 1px 2px rgba(23, 32, 51, .04), 0 12px 32px -18px rgba(23, 32, 51, .14);
  --shadow-hover: 0 1px 2px rgba(23, 32, 51, .04), 0 22px 48px -24px rgba(23, 32, 51, .20);
  --shadow-cta: 0 10px 24px -12px rgba(236, 0, 140, .45);
}

body { color: var(--ink); background: #FFFFFF; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #FFF4FA; color: #EC008C; }

/* ---------- Botones ---------- */
.btn { letter-spacing: .4px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn-primary:hover { background: #EC008C; color: #FFFFFF; }
.btn-primary { box-shadow: var(--shadow-cta); }
.btn-primary:hover { box-shadow: 0 14px 30px -12px rgba(236, 0, 140, .55); }
.btn-ghost, .btn-ghost.btn-hero { background: #FFFFFF; color: #172033; border: 1.5px solid var(--line-strong); }
.btn-ghost:hover, .btn-ghost.btn-hero:hover { background: #FFFFFF; color: #172033; border-color: #172033; }
.btn-outline { background: #FFFFFF; color: #172033; border: 1.5px solid var(--line-strong); }
.btn-outline:hover { border-color: #172033; color: #172033; }
.btn-dark { background: #172033; color: #FFFFFF; }
.btn-dark:hover { box-shadow: 0 12px 26px -14px rgba(23, 32, 51, .5); }
.btn-gold { background: #EC008C; color: #FFFFFF; box-shadow: var(--shadow-cta); }
.btn-gold:hover { box-shadow: 0 14px 30px -12px rgba(236, 0, 140, .55); }

/* ---------- Header ---------- */
.site-header { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s; }
.site-header.scrolled { box-shadow: 0 8px 24px -20px rgba(23, 32, 51, .25); border-bottom-color: var(--line); }
.brand-sub { color: #172033; }
.nav a { color: rgba(23, 32, 51, .68); font-weight: 500; transition: color .2s; }
.nav a:hover { color: #172033; opacity: 1; }
.nav a.active { color: #172033; font-weight: 600; }
.nav a.active::after { left: 50%; right: auto; width: 18px; height: 2px; bottom: -6px; transform: translateX(-50%); background: #EC008C; }
.btn-login-header { color: #172033; background: transparent; border: 1.5px solid var(--line-strong); }
.btn-login-header:hover { color: #172033; border-color: #172033; box-shadow: none; }
.menu-toggle { color: #172033; }
.menu-toggle span { background: #172033; }
.mobile-nav { background: #FFFFFF; }
.mobile-nav a, .mobile-nav .link-login { color: #172033; border-bottom-color: var(--line); }
.link-login { color: #172033; }

/* ---------- Hero ---------- */
.hero { background: radial-gradient(900px 600px at 100% 0%, #FFF4FA 0%, rgba(255, 244, 250, 0) 65%), #FFFFFF; }
.hero-eyebrow { color: rgba(23, 32, 51, .55); font-size: 13px; font-weight: 600; letter-spacing: 6px; }
.ht-script { text-shadow: none; }
.ht-con { color: #172033; }
.ht-melo { color: #172033; background: none; }
.hero-lead { color: #172033; font-weight: 400; letter-spacing: -.2px; }
.hero-lead strong { color: #172033; font-weight: 700; }
.hero-note { color: var(--muted); font-size: 18px; line-height: 1.5; }
.hero-actions { margin-bottom: 40px; }
.btn-hero { font-size: 16px; padding: 18px 36px; letter-spacing: .6px; }

.hero-features { gap: 40px; margin-bottom: 28px; }
.hero-features li { font-size: 15px; color: #172033; font-weight: 500; }
.hf-icon { width: 46px; height: 46px; background: #F5F6F8; color: #20C9D2; box-shadow: none; }
.hf-icon svg { width: 22px; height: 22px; }

.hero-tagline { border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.hero-tagline::before, .hero-tagline::after { background: var(--line-strong); opacity: 1; }
.hero-tagline strong { color: #172033; font-weight: 600; }

.hc-label { color: rgba(23, 32, 51, .5); font-weight: 700; font-size: 11px; }
.hc-track li { color: #172033; font-weight: 500; font-size: 14px; border-color: var(--line); background: #FFFFFF; }
.hc-track li img { box-shadow: 0 0 0 1px var(--line); }

.hv-stage::before {
  background:
    radial-gradient(55% 50% at 55% 45%, rgba(236, 0, 140, .10), transparent 70%),
    radial-gradient(40% 40% at 85% 20%, rgba(32, 201, 210, .08), transparent 70%);
  filter: blur(50px); animation: none;
}
@keyframes hvLive {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(236, 0, 140, 0); }
  50%      { transform: scale(1.015); box-shadow: 0 0 14px 2px rgba(236, 0, 140, .18); }
}

/* ---------- Secciones ---------- */
.section { padding: 112px 0; }
.section-soft { background: #FFF4FA; }
#plataformas.section-soft { background: #F5F6F8; }
.section-head { margin-bottom: 60px; }
.kicker { color: #EC008C; font-size: 12px; font-weight: 700; letter-spacing: 3px; margin-bottom: 16px; }
.kicker-light { color: #EC008C; opacity: 1; }
.section-title { color: #172033; font-weight: 800; letter-spacing: -1.5px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; }
.section-lead { color: var(--ink-soft); font-size: 17px; line-height: 1.7; max-width: 620px; margin-inline: auto; }
.grad-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #EC008C; }

/* ---------- Qué es / Capacitación ---------- */
.training-card { background: #FFFFFF; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 32px; padding: 28px; }
.training-copy h3 { color: #172033; font-weight: 700; letter-spacing: -.5px; }
.training-copy p { color: var(--ink-soft); }
.training-video-wrap, .training-video { background: #172033; }
.video-cover::after { background: linear-gradient(180deg, transparent 50%, rgba(23, 32, 51, .55)); }
.video-play { width: 76px; height: 76px; background: #FFFFFF; color: #EC008C; box-shadow: 0 0 0 8px rgba(255, 255, 255, .22), 0 16px 32px -14px rgba(23, 32, 51, .5); animation: none; }
.video-cover:hover .video-play { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, .28), 0 16px 32px -14px rgba(23, 32, 51, .5); }
.video-label { font-weight: 600; font-size: 16px; }

.check-list li { color: #172033; font-weight: 500; }
.check-list li::before { background: rgba(32, 201, 210, .14); color: #20C9D2; font-weight: 800; }

/* ---------- Carrusel de apps ---------- */
.apps-title { color: #172033; font-weight: 700; letter-spacing: -.5px; }
.app-phone { background: #172033; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .10), 0 24px 44px -26px rgba(23, 32, 51, .45); }
.app-phone::before, .app-phone::after { background: #172033; }
.app-phone::after { box-shadow: 0 30px 0 #172033; }
.app-ribbon { box-shadow: 0 6px 14px -8px rgba(236, 0, 140, .5); }
.app-logo-text { color: #172033; }
.app-screen-fallback { color: #172033; }
.apps-arrow { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; color: #172033; border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.apps-arrow:hover { transform: translateY(-50%); border-color: #172033; }
.apps-arrow svg { width: 18px; height: 18px; }
.apps-dots button { background: rgba(23, 32, 51, .14); }
.apps-dots button[aria-selected="true"] { background: #EC008C; transform: none; width: 22px; border-radius: 999px; }
.apps-track:focus-visible { box-shadow: 0 0 0 2px rgba(23, 32, 51, .18); }

/* ---------- Beneficios ---------- */
.benefit-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; padding: 40px 32px; box-shadow: none; }
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--line); }
.benefit-card h3 { color: #172033; font-weight: 700; letter-spacing: -.3px; }
.benefit-card p { color: var(--ink-soft); }
.benefit-num { width: 48px; height: 48px; border-radius: 14px; background: #FFF4FA; color: #EC008C; font-size: 20px; font-weight: 800; }
.benefit-card-featured { background: #172033; border-color: #172033; color: #FFFFFF; }
.benefit-card-featured h3 { color: #FFFFFF; }
.benefit-card-featured p { color: rgba(255, 255, 255, .72); }
.benefit-card-featured .benefit-num { background: #EC008C; color: #FFFFFF; }

/* ---------- Testimonios ---------- */
.testimonial { background: #F5F6F8; border: 1px solid transparent; border-radius: 24px; padding: 32px; }
.testimonial p { color: #172033; opacity: .82; line-height: 1.7; }
.quote-mark { color: #20C9D2; }
.t-author strong { color: #172033; }
.t-author small { color: var(--muted); font-weight: 600; }
.avatar { background: #172033; color: #FFFFFF; font-weight: 700; }
.avatar-cyan { background: #20C9D2; }
.track-btn { background: #FFFFFF; color: #172033; border: 1px solid var(--line-strong); }
.track-btn:hover { background: #172033; color: #FFFFFF; border-color: #172033; }

/* ---------- Contadores ---------- */
.stats-band { background: #172033; color: #FFFFFF; padding: 84px 0; }
.stat-num { color: #FFFFFF; font-weight: 800; letter-spacing: -1px; }
.stat-label { color: rgba(255, 255, 255, .6); opacity: 1; font-weight: 600; font-size: 12px; }
.stat:first-child .stat-label::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #20C9D2; margin-right: 8px; vertical-align: middle; }
.stat-copy h3 { color: #FFFFFF; font-weight: 700; }
.stat-copy p { color: rgba(255, 255, 255, .7); opacity: 1; }

/* ---------- Binance ---------- */
.binance-card { background: #F5F6F8; color: #172033; border: 1px solid var(--line); border-radius: 32px; padding: 48px; }
.binance-badge { background: #172033; border-radius: 22px; }
.binance-badge svg path { fill: #FFFFFF; }
.binance-copy h2 { color: #172033; font-weight: 800; letter-spacing: -1px; }
.binance-copy h2 span { color: #EC008C; text-decoration: none; }
.binance-copy p { color: var(--ink-soft); }
.binance-card .btn-ghost-light { background: #FFFFFF; color: #172033; border: 1.5px solid var(--line-strong); }
.binance-card .btn-ghost-light:hover { border-color: #172033; color: #172033; }

/* ---------- Plataformas ---------- */
.platform-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.platform-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.platform-top { background: #FFFFFF !important; color: #172033; padding: 32px 28px 8px; }
.platform-top .p-tag { color: #EC008C; opacity: 1; font-weight: 700; }
.platform-top h3 { color: #172033; font-weight: 800; letter-spacing: -.5px; }
.platform-top .p-official { background: #FFF4FA; color: #EC008C; font-weight: 700; }
.platform-body > p { color: var(--ink-soft); }
.p-meta { border-top: 1px solid var(--line); }
.p-row-label { color: rgba(23, 32, 51, .5); }
.chip { background: #F5F6F8; color: #172033; font-weight: 600; }
.p-android { color: #172033; font-weight: 700; }
.p-dot { color: #20C9D2; }
.p-goal { background: #F5F6F8; }
.p-goal strong { color: #172033; }
.p-goal small { color: rgba(23, 32, 51, .5); }
.p-goal .p-money { color: #EC008C; font-weight: 800; }

/* ---------- Pasos ---------- */
.steps li { background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; padding: 32px 28px; transition: border-color .25s, box-shadow .25s; }
.steps li:hover { border-color: var(--line); box-shadow: var(--shadow-hover); }
.step-n { font-size: 40px; font-weight: 800; -webkit-text-stroke: 1.2px #20C9D2; }
.steps h3 { color: #172033; font-weight: 700; }
.steps p { color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-list { gap: 12px; }
.faq-list details { background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; transition: box-shadow .25s; }
.faq-list details[open] { box-shadow: var(--shadow); }
.faq-list summary { color: #172033; font-weight: 600; font-size: 17px; }
.faq-list summary::after { color: #EC008C; font-weight: 400; }
.faq-list details p { color: var(--ink-soft); }

/* ---------- Postulación ---------- */
.apply-card { background: #FFF4FA; color: #172033; border-radius: 36px; padding: 56px; }
.apply-copy h2 { color: #172033; font-weight: 800; letter-spacing: -1px; }
.apply-copy .script { color: #EC008C; }
.apply-copy p { color: var(--ink-soft); opacity: 1; }
.apply-list li { color: #172033; font-weight: 500; }
.apply-list li::before { background: #FFFFFF; color: #EC008C; box-shadow: 0 0 0 1px rgba(236, 0, 140, .18); }
.apply-img { border: 5px solid #FFFFFF; box-shadow: var(--shadow); }
.apply-form { background: #FFFFFF; border: 1px solid var(--line); box-shadow: var(--shadow); }
.apply-form h3 { color: #172033; font-weight: 800; letter-spacing: -.5px; }
.apply-form label, .modal-box label { color: #172033; font-weight: 600; }
.apply-form input, .apply-form select, .modal-box input {
  color: #172033; background: #F5F6F8; border: 1.5px solid transparent;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.apply-form input::placeholder, .modal-box input::placeholder { color: rgba(23, 32, 51, .4); }
.apply-form input:focus, .apply-form select:focus, .modal-box input:focus {
  background: #FFFFFF; border-color: #EC008C; box-shadow: 0 0 0 4px rgba(236, 0, 140, .08);
}
.apply-form label.check { color: var(--ink-soft); font-weight: 500; }
.form-feedback.success { color: #172033; }

/* ---------- Footer ---------- */
.site-footer { background: #172033; color: rgba(255, 255, 255, .66); }
.footer-grid h4 { color: #FFFFFF; font-weight: 600; letter-spacing: 2.5px; font-size: 12px; }
.footer-grid a { color: rgba(255, 255, 255, .66); }
.footer-grid a:hover { color: #FFFFFF; text-decoration: none; }
.footer-grid .brand-footer { display: inline-flex; flex-direction: column; align-items: flex-start; margin-bottom: 0; }
.brand-footer .brand-script, .brand-footer .brand-heart { color: #EC008C; }
.brand-footer .brand-sub { color: #FFFFFF; }
.footer-tag { color: rgba(255, 255, 255, .5); font-weight: 600; }
.footer-bottom { border-top-color: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .45); }

/* ---------- WhatsApp y modal ---------- */
.wa-float { background: #20C9D2; box-shadow: 0 10px 24px -10px rgba(23, 32, 51, .35); }
.modal { background: rgba(23, 32, 51, .45); backdrop-filter: blur(6px); }
.modal-box { box-shadow: 0 30px 80px -30px rgba(23, 32, 51, .45); }
.modal-box h3 { color: #172033; font-weight: 800; }
.modal-box > p { color: var(--ink-soft); }
.modal-close { color: rgba(23, 32, 51, .5); }

/* ---------- Detalle de app (app.html) ---------- */
.ad-title { color: #172033; font-weight: 800; }
.ad-resumen { color: #172033; font-weight: 500; }
.ad-desc { color: var(--ink-soft); opacity: 1; }
.ad-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; }
.ad-card h3 { color: #172033; font-weight: 700; }
.ad-card p, .ad-list li { color: var(--ink-soft); }
.ad-list li::before { background: rgba(32, 201, 210, .14); color: #20C9D2; }
.ad-dl dt { color: rgba(23, 32, 51, .5); opacity: 1; }
.ad-dl dd { color: #172033; }
.ad-level { color: #172033; }
.ad-other { background: #FFFFFF; border: 1px solid var(--line); color: #172033; }
.ad-other:hover { box-shadow: var(--shadow-hover); }
.ad-other span:not(.app-ribbon) { color: var(--ink-soft); }
.ad-other em { color: #EC008C; }
.ad-cta { background: #172033; border-radius: 32px; padding: 64px 32px; }
.ad-cta h2 { color: #FFFFFF; font-weight: 800; letter-spacing: -.5px; }
.ad-cta p { color: rgba(255, 255, 255, .7); opacity: 1; }
.ad-notfound p { color: var(--ink-soft); }

/* ---------- Guía Binance (binance.html) ---------- */
.bn-num { background: #FFF4FA; color: #EC008C; font-weight: 700; }
.bn-text h3 { color: #172033; font-weight: 700; }
.bn-text p { color: var(--ink-soft); }
.bn-text a { color: #EC008C; }
.bn-safety { background: #F5F6F8; border: 1px solid transparent; }
.bn-safety h2 { color: #172033; font-weight: 800; }
.bn-note { color: rgba(23, 32, 51, .55); opacity: 1; }

/* ---------- Sobre VelvetX (sobre-velvetx.html) ---------- */
.ab-motto { color: rgba(23, 32, 51, .55); font-weight: 600; }
.ab-value { background: #FFFFFF; border: 1px solid var(--line); }
.ab-value h3 { color: #172033; font-weight: 700; }
.ab-value p { color: var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .section { padding: 80px 0; }
  .apply-card { padding: 32px 20px; }
  .binance-card { padding: 36px 24px; }
}
@media (max-width: 640px) {
  .hero-features { gap: 14px; }
  .hero-note { font-size: 16px; }
}

/* =========================================================
   Paneles (panel.html y admin.html)
   ========================================================= */
html:has(.dash-page) { background: #F5F6F8; }
.dash-page { background: #F5F6F8; }
.dash-header, .app-top { background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.app-side { background: #FFFFFF; border-right: 1px solid var(--line); }
.dash-card, .post, .cap-card, .db-kpi, .fin-card { border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(23, 32, 51, .03), 0 10px 28px -22px rgba(23, 32, 51, .18); }
.dash-title h1, .app-title h1, .admin-head h2, .db-meta-head h2 { color: #172033; font-weight: 800; letter-spacing: -.5px; }
.dash-label, .ag-wd { color: rgba(23, 32, 51, .5); opacity: 1; }
.app-title p, .admin-head p, .team-count, .modal-hint, .conv-title small, .app-hello small, .dash-sub, .dash-kpis span { color: rgba(23, 32, 51, .6); opacity: 1; }

/* Navegación lateral y pestañas: activo suave, sin bloques fucsia */
.app-nav a { color: rgba(23, 32, 51, .72); }
.app-nav a:hover { background: #F5F6F8; color: #172033; }
.app-nav a.active { background: #FFF4FA; color: #EC008C; font-weight: 700; }
.app-role { background: #FFF4FA; color: #EC008C; }
.app-menu-btn span { background: #172033; }
.app-tabs, .dash-tabs { background: #F5F6F8; border-color: transparent; }
.app-tabs button, .dash-tabs a { color: rgba(23, 32, 51, .66); }
.app-tabs button[aria-selected="true"], .dash-tabs a[aria-selected="true"] { background: #FFFFFF; color: #172033; box-shadow: 0 1px 2px rgba(23, 32, 51, .06), 0 4px 12px -6px rgba(23, 32, 51, .18); }
.app-scrim { background: rgba(23, 32, 51, .35); }

/* Bloques destacados: azul noche en lugar de fucsia sólido */
.dash-level, .db-kpi-main, .fin-main { background: #172033; border-color: #172033; color: #FFFFFF; }
.dash-level .dash-label, .db-kpi-main *, .fin-main * { color: inherit; }
.dash-status { background: rgba(32, 201, 210, .14); color: #172033; }
.dash-status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #20C9D2; margin-right: 7px; vertical-align: middle; }

/* Gráficos e indicadores */
.db-bar { background: #F5F6F8; }
.db-bar span { background: #EC008C; }
.db-bar-v { background: rgba(23, 32, 51, .12); }
.db-col.is-today .db-bar-v { background: #EC008C; }
.db-rank { background: #F5F6F8; }
.lv-current { background: #FFF4FA; }
.tx-tipo { background: #F5F6F8; }
.tx-retiro { background: #FFF4FA; color: #EC008C; }

/* Mensajería */
.chat-list { background: #F5F6F8; }
.msg-otro { border-color: var(--line); }
.conv:hover, .admin-item:hover { background: #F5F6F8; }
.conv.is-active, .admin-item.is-active { background: #FFF4FA; border-color: rgba(236, 0, 140, .16); }
.conv-avatar { background: #172033; }

/* Comunidad y capacitaciones */
.post-like.is-on { color: #EC008C; }
.post-like:hover, .post-ccount:hover { background: #F5F6F8; }
.post-img { background: #F5F6F8; }
.cap-thumb, .cap-player, .cap-frame { background: #172033; }

/* Agenda y perfil */
.ag-cell.is-sel { background: #FFF4FA; }
.ag-dot { background: #EC008C; }
.pf-avatar { border-color: #FFFFFF; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(23, 32, 51, .35); background: #172033; }

/* Formularios del panel */
.app-page-shell .modal-box input, .app-page-shell .modal-box select, .app-page-shell .modal-box textarea,
.admin-form input, .admin-form select, .admin-form textarea, .admin-page .modal-box input, .admin-page .modal-box select {
  border-color: var(--line-strong);
}
.dash-page input:focus, .dash-page select:focus, .dash-page textarea:focus {
  border-color: #EC008C !important; box-shadow: 0 0 0 4px rgba(236, 0, 140, .08);
}
.dash-error, .af-error { color: #EC008C; }