/* ============================================================
   mi-styles.css — Mercado Inteligente | Full Design System
   ============================================================ */

/* ─── Variables ─────────────────────────────────────────── */
:root {
  --bg:        #04040A;
  --surface:   #07070F;
  --surface-2: #0C0C1A;
  --border:    rgba(255,255,255,0.07);
  --border-a:  rgba(48, 233, 98,0.22);

  --acc:       #30E962;
  --acc-rgb:   48, 233, 98;
  --acc-dim:   rgba(48, 233, 98,0.09);

  --text:      #E4E4F2;
  --text-b:    #9494B0;
  --text-c:    #44445A;

  --fp: 'Press Start 2P', monospace;        /* acentos pixel (HUD) */
  --fd: 'Bungee', 'Archivo Black', sans-serif;  /* títulos grandes — blocky arcade tipo "ELEGÍ TU PERSONAJE" */
  --ft: 'Poppins', sans-serif;               /* UI / botones / nav — igual que el logo */
  --fb: 'Poppins', sans-serif;               /* cuerpo de texto */

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse 80% 55% at 12% -5%,  rgba(48,233,98,.10), transparent 60%),
    radial-gradient(ellipse 70% 55% at 100% 22%, rgba(40,162,219,.08), transparent 55%),
    radial-gradient(ellipse 90% 65% at 50% 108%, rgba(42,77,212,.09), transparent 62%),
    radial-gradient(ellipse 60% 50% at 85% 80%,  rgba(48,233,98,.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--fb);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}
canvas { display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ─── Scanlines overlay ─────────────────────────────────── */
#scanlines {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.035) 3px, rgba(0,0,0,0.035) 4px
  );
}

/* ─── Utils ─────────────────────────────────────────────── */
.px { font-family: var(--fp); font-size: 8px; color: var(--acc); letter-spacing: .2em; line-height: 2; }
.px.xs { font-size: 7px; }
.acc { color: var(--acc); }
em { font-style: normal; color: var(--acc); }

/* ─── Reveal ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ─── Navigation ─────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 64px;
  transition: padding .4s var(--ease), background .4s, border-color .4s;
}
#nav.scrolled {
  padding: 16px 64px;
  background: rgba(4,4,10,.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.nav-logo-img { height: 150px; width: auto; display: block; transition: height .4s var(--ease); }
#nav.scrolled .nav-logo-img { height: 104px; }
.nav-logo-wordmark { display: flex; flex-direction: column; gap: 1px; line-height: 1; }
.nav-logo-w1 {
  font-family: var(--fb); font-size: 13px; font-weight: 500;
  color: var(--text); letter-spacing: .01em;
}
.nav-logo-w2 {
  font-family: var(--fb); font-size: 13px; font-weight: 700;
  color: var(--text); letter-spacing: .01em;
}
.nav-links { display: flex; gap: 48px; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-links a {
  font-size: 15px; font-weight: 600; letter-spacing: .1em;
  color: var(--text-b); text-transform: uppercase;
  transition: color .3s;
}
.nav-links a:hover { color: var(--text); }
.nav-btn {
  font-family: var(--ft); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--acc); padding: 11px 28px;
  border: 1px solid var(--border-a);
  transition: background .3s, box-shadow .3s;
}
.nav-btn:hover { background: var(--acc-dim); box-shadow: 0 0 24px rgba(var(--acc-rgb),.15); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ft); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 16px 38px; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-fill { background: var(--acc); color: #000; }
.btn-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .55s var(--ease);
}
.btn-fill:hover::after { transform: translateX(110%); }
.btn-fill:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(var(--acc-rgb),.35), 0 4px 16px rgba(var(--acc-rgb),.2);
}
.btn-outline {
  color: var(--text); border: 1px solid rgba(255,255,255,.18);
}
.btn-outline:hover {
  border-color: var(--border-a); color: var(--acc); background: var(--acc-dim);
}

/* ─── HERO ───────────────────────────────────────────────── */
#hero {
  position: relative; width: 100vw; height: 100vh; min-height: 700px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding-top: 150px; /* deja el contenido por debajo del nav (logo grande) */
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(4,4,10,.7) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center; max-width: 1040px; width: 100%; padding: 0 32px;
}
.hero-badge {
  display: inline-flex; align-items: center;
  padding: 8px 22px; border: 1px solid var(--border-a);
  margin-bottom: 56px; position: relative;
  animation: fadeUp .9s var(--ease) .2s both;
}
.hero-badge::before, .hero-badge::after {
  content: ''; position: absolute;
  width: 8px; height: 8px; background: var(--acc); top: -4px;
}
.hero-badge::before { left: -4px; }
.hero-badge::after  { right: -4px; }
.hero-title {
  margin-bottom: 36px;
  animation: fadeUp .9s var(--ease) .4s both;
}
.hero-line {
  display: block;
  font-family: var(--fd);
  font-size: clamp(46px, 8vw, 98px);
  font-weight: 900; line-height: .98;
  letter-spacing: -.025em; text-transform: uppercase;
  color: var(--text);
}
.hero-line.acc {
  color: var(--acc);
  text-shadow: 0 0 80px rgba(var(--acc-rgb),.45), 0 0 160px rgba(var(--acc-rgb),.12);
}
/* Tri-color de marca en el hero */
.hero-line.acc-y {
  color: #FFCE00;
  text-shadow: 0 0 80px rgba(255,206,0,.42), 0 0 160px rgba(255,206,0,.12);
}
.hero-line.acc-b {
  color: #2E86E0;
  text-shadow: 0 0 80px rgba(46,134,224,.45), 0 0 160px rgba(46,134,224,.14);
}
.hero-sub {
  font-size: 16px; line-height: 1.85; color: var(--text-b);
  margin-bottom: 60px; letter-spacing: .01em;
  animation: fadeUp .9s var(--ease) .6s both;
}
.hero-actions {
  display: flex; justify-content: center; gap: 16px;
  animation: fadeUp .9s var(--ease) .8s both;
}
.hero-scroll {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 2; animation: fadeUp .9s var(--ease) 1.2s both;
}
.scroll-bar {
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, transparent, var(--acc));
  animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: .3; transform: scaleY(.5); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Section base ───────────────────────────────────────── */
.sec { position: relative; }
.sec-inner { max-width: 1440px; margin: 0 auto; padding: 88px 64px; }
.sec-head { text-align: center; margin-bottom: 52px; }
.sec-head .px { display: block; margin-bottom: 24px; }
.sec-title {
  font-family: var(--fd);
  font-size: clamp(36px, 5.5vw, 76px);
  font-weight: 900; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.02em;
  margin-bottom: 20px;
}
.sec-sub {
  font-size: 16px; line-height: 1.85; color: var(--text-b);
  max-width: 560px; margin: 0 auto;
}

/* ─── Characters grid ────────────────────────────────────── */
#especialistas {
  position: relative;
  background: var(--bg);
}
#especialistas::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(48, 233, 98,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 233, 98,.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 78%);
}
#especialistas .sec-inner { position: relative; z-index: 1; }

.chars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  perspective: 1800px;
}

/* ─── Character card ─────────────────────────────────────── */
.char-card {
  position: relative;
  aspect-ratio: 3/4;
  background: #060610;
  overflow: hidden;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  transition: transform .45s var(--ease), box-shadow .45s;
  transform-style: preserve-3d;
  --cc: var(--acc); --cr: 48, 233, 98;
}
.char-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 32px 80px rgba(var(--cr), .22), 0 0 0 1px rgba(var(--cr), .35);
}

/* Image — recorte transparente que "flota" como sticker 3D */
.char-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  padding: 8% 8% 0 8%;
  z-index: 1;
  transition: transform .55s var(--ease), filter .5s;
  filter: saturate(.95) brightness(.95) drop-shadow(0 16px 18px rgba(0,0,0,.55));
  will-change: transform;
  transform-style: preserve-3d;
}
/* Respiración suave cuando NO hay hover (en hover toma el control el JS) */
.char-card:not(:hover) .char-img {
  animation: charIdle var(--idle-dur, 6.5s) ease-in-out var(--idle-delay, 0s) infinite;
}
/* Combina flotación (translateY) + balanceo (rotate) + respiración (scale).
   Cada card recibe --idle-dur / --idle-delay / --sway / --rise random por JS,
   así ninguno se mueve igual y parece natural. */
@keyframes charIdle {
  0%, 100% { transform: translateY(0)              rotate(calc(var(--sway, .9deg) * -1)) scale(1); }
  50%      { transform: translateY(var(--rise, -9px)) rotate(var(--sway, .9deg))            scale(1.02); }
}
.char-card:hover .char-img {
  z-index: 4; /* salta por encima del overlay oscuro, debajo del HUD (z5) */
  filter: saturate(1.12) brightness(1.06)
          drop-shadow(0 26px 26px rgba(0,0,0,.6))
          drop-shadow(0 0 30px rgba(var(--cr), .45));
}

/* Performance (5ª card, PA-005): su arte viene enmarcado más chico y bajo
   que el resto (el aro de megáfono ocupa el tercio superior). Lo agrandamos
   y lo subimos un toque para que el muñeco quede parejo con los demás. */
.chars-grid .char-card:nth-child(5) .char-img {
  height: 118%;
  top: auto;
  bottom: 2%;
  padding: 0 4%;
  object-position: center bottom;
}

/* Bottom color bloom — "stage lighting" */
.char-light {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(var(--cr), .22) 0%, transparent 65%);
  transition: opacity .4s;
  opacity: .7;
}
.char-card:hover .char-light { opacity: 1; }

/* Dark gradient overlay */
.char-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(
    to top,
    rgba(4,4,10,1)    0%,
    rgba(4,4,10,.78)  34%,
    rgba(4,4,10,.14)  60%,
    transparent       100%
  );
  transition: background .4s;
}
.char-card:hover .char-overlay {
  background: linear-gradient(
    to top,
    rgba(4,4,10,1)    0%,
    rgba(4,4,10,.82)  38%,
    rgba(4,4,10,.22)  62%,
    transparent       100%
  );
}

/* Scan line sweep on hover */
.char-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1.5px; z-index: 9; pointer-events: none;
  background: linear-gradient(to right, transparent 0%, rgba(var(--cr),.9) 50%, transparent 100%);
  opacity: 0;
}
.char-card:hover .char-scan {
  animation: cardScan 1s ease-in-out forwards;
}
@keyframes cardScan {
  0%   { top: 0%;   opacity: 1; }
  80%  { opacity: .8; }
  100% { top: 100%; opacity: 0; }
}

/* Corner brackets */
.char-corners { position: absolute; inset: 10px; z-index: 10; pointer-events: none; }
.char-corners span {
  position: absolute; width: 18px; height: 18px;
  opacity: 0;
  transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.char-corners span:nth-child(1) { top:0; left:0;
  border-top:1.5px solid var(--cc); border-left:1.5px solid var(--cc);
  transform: translate(-6px,-6px); }
.char-corners span:nth-child(2) { top:0; right:0;
  border-top:1.5px solid var(--cc); border-right:1.5px solid var(--cc);
  transform: translate(6px,-6px); }
.char-corners span:nth-child(3) { bottom:0; left:0;
  border-bottom:1.5px solid var(--cc); border-left:1.5px solid var(--cc);
  transform: translate(-6px,6px); }
.char-corners span:nth-child(4) { bottom:0; right:0;
  border-bottom:1.5px solid var(--cc); border-right:1.5px solid var(--cc);
  transform: translate(6px,6px); box-shadow: 3px 3px 10px var(--cc); }
.char-card:hover .char-corners span {
  opacity: 1; transform: translate(0,0);
}

/* Top HUD */
.char-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 12px 14px; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  background: linear-gradient(to bottom, rgba(4,4,10,.7) 0%, transparent 100%);
}
.char-code { font-family: var(--fp); font-size: 6.5px; color: var(--cc); opacity: .7; line-height: 1.8; }
.char-badge-lbl {
  font-family: var(--fp); font-size: 5.5px; letter-spacing: .06em;
  padding: 4px 7px;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(var(--cr), .4);
  color: var(--cc); line-height: 1.6;
}

/* Bottom HUD */
.char-bot {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 14px; z-index: 5;
  background: linear-gradient(to top, rgba(4,4,10,.95) 0%, rgba(4,4,10,.78) 45%, rgba(4,4,10,.25) 78%, transparent 100%);
}

.char-name {
  font-family: var(--fp); font-size: 8px; color: var(--text);
  margin-bottom: 6px; line-height: 1.55;
}
.char-role {
  font-size: 11px; font-weight: 600; color: var(--cc);
  letter-spacing: .03em; margin-bottom: 12px;
  text-shadow: 0 0 14px rgba(var(--cr),.5);
}

/* Power bar */
.char-power {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.char-power-lbl, .char-power-num {
  font-family: var(--fp); font-size: 6px;
  color: var(--cc); opacity: .65; white-space: nowrap;
}
.char-power-track {
  flex: 1; height: 2px; background: rgba(255,255,255,.07); overflow: hidden;
}
.char-power-fill {
  height: 100%; background: var(--cc);
  box-shadow: 0 0 8px var(--cc);
  transition: width 1.2s var(--ease);
}

/* CTA button */
.char-cta-btn {
  display: block; width: 100%;
  font-family: var(--ft); font-size: 8.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: #000; background: var(--cc); padding: 9px;
  text-align: center; border: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .35s var(--ease), box-shadow .3s;
}
.char-card:hover .char-cta-btn { opacity: 1; transform: none; }
.char-cta-btn:hover { box-shadow: 0 0 20px rgba(var(--cr),.5); }

/* Placeholder (no image) */
.char-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  overflow: hidden;
}
.char-ph-glyph {
  font-family: var(--fd); font-size: 76px; font-weight: 900;
  color: var(--cc); opacity: .1; line-height: 1; user-select: none;
}
.char-ph-lock { font-family: var(--fp); font-size: 7px; color: var(--cc); opacity: .3; letter-spacing: .18em; }
.char-placeholder::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(var(--cr),.035) 50%, transparent 100%);
  animation: phScan 5s ease-in-out infinite;
}
@keyframes phScan { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }

/* ─── MODAL ──────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 800;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal.open { display: flex; }

.modal-bg {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(4,4,10,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.modal-panel {
  position: relative; z-index: 1; width: 100%;
  max-width: 1120px; max-height: calc(100vh - 40px);
  background: var(--surface); overflow: hidden;
  animation: modalIn .5s var(--ease) both;
  /* char color vars set by JS */
  --cc: var(--acc); --cr: 48, 233, 98;
}
.modal-panel::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(var(--cr),.22); pointer-events: none; z-index: 10;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(28px); }
  to   { opacity: 1; transform: none; }
}

.modal-x {
  position: absolute; top: 16px; right: 16px; z-index: 20;
  font-family: var(--fp); font-size: 7px; letter-spacing: .14em;
  color: var(--text-b); padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(4,4,10,.8);
  transition: color .3s, border-color .3s; cursor: pointer;
}
.modal-x:hover { color: var(--acc); border-color: var(--border-a); }

.modal-grid {
  display: grid; grid-template-columns: 400px 1fr;
  height: min(80vh, 740px);
}
.modal-l { position: relative; background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(var(--cr),.16) 0%, #000 62%); overflow: hidden; perspective: 1100px; }
.modal-img { width: 100%; height: 100%; transition: transform .25s var(--ease); transform-style: preserve-3d; will-change: transform; }
.modal-img img {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 30px 38px rgba(0,0,0,.6)) drop-shadow(0 0 42px rgba(var(--cr),.28));
  animation: charIdle 6.5s ease-in-out infinite;
}
.modal-img-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
}
.modal-img-ph-g {
  font-family: var(--fd); font-size: 88px; font-weight: 900;
  color: var(--cc); opacity: .1; line-height: 1;
}
.modal-img-ph-t { font-family: var(--fp); font-size: 8px; color: var(--cc); opacity: .35; letter-spacing: .2em; }

.modal-stats {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 24px;
  background: linear-gradient(to top, rgba(0,0,0,.98) 0%, transparent 100%);
}
.stat-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.stat-row:last-child { margin-bottom: 0; }
.stat-lbl { font-family: var(--fp); font-size: 7px; color: var(--text-c); width: 76px; flex-shrink: 0; }
.stat-track { flex: 1; height: 2px; background: rgba(255,255,255,.06); position: relative; overflow: visible; }
.stat-fill {
  height: 100%; background: var(--cc);
  box-shadow: 0 0 10px var(--cc);
  width: 0; transition: width 1.3s var(--ease);
  position: relative;
}
.stat-fill::after {
  content: ''; position: absolute; right: -3px; top: -4px;
  width: 10px; height: 10px; background: var(--cc);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 8px var(--cc);
}
.stat-val { font-family: var(--fp); font-size: 7px; color: var(--cc); width: 28px; text-align: right; flex-shrink: 0; }

.modal-r {
  padding: 50px 44px;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 30px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--cr),.6) rgba(255,255,255,.05);
}
.modal-r::-webkit-scrollbar { width: 8px; }
.modal-r::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.modal-r::-webkit-scrollbar-thumb { background: rgba(var(--cr),.5); border-radius: 4px; }
.modal-r::-webkit-scrollbar-thumb:hover { background: rgba(var(--cr),.8); }

.m-code { font-family: var(--fp); font-size: 7px; color: var(--cc); opacity: .6; margin-bottom: 10px; }
.m-name { font-family: var(--fp); font-size: 14px; line-height: 1.55; color: var(--text); margin-bottom: 6px; }
.m-role { font-size: 14px; font-weight: 600; color: var(--cc); letter-spacing: .04em; }
.m-bio {
  font-size: 14px; line-height: 1.9; color: var(--text-b);
  border-left: 2px solid var(--cc); padding-left: 20px;
}
.m-sec-lbl { font-family: var(--fp); font-size: 7px; color: var(--text-c); letter-spacing: .18em; margin-bottom: 14px; }
.m-list { display: flex; flex-direction: column; gap: 10px; }
.m-item { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.65; color: var(--text-b); }
.m-item::before { content: '▸'; color: var(--cc); flex-shrink: 0; margin-top: 1px; }
.m-item.bad::before { content: '✕'; color: #FF3D6B; }
.m-cta { padding-top: 6px; }

/* ─── Squad / Network ────────────────────────────────────── */
#escuadron { background: radial-gradient(ellipse 70% 50% at 50% 55%, rgba(var(--acc-rgb),.03) 0%, transparent 70%); }
/* ─── Escuadrón 3D — ecosistema orbital ──────────────────── */
.squad3d {
  max-width: 1340px; margin: 0 auto;
  height: 660px; position: relative;
  perspective: 1950px;
  cursor: grab; user-select: none;
}
.squad3d:active { cursor: grabbing; }
.squad-stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-14deg);
}
/* Plano orbital (elipse que marca la órbita) */
.squad-plane {
  position: absolute; top: 50%; left: 50%;
  width: 860px; height: 860px; margin: -430px 0 0 -430px;
  border-radius: 50%;
  border: 1px solid rgba(var(--acc-rgb), .14);
  transform: translateZ(0) rotateX(90deg);
  box-shadow: 0 0 60px rgba(var(--acc-rgb), .05) inset;
}
.squad-plane-2 {
  width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-color: rgba(var(--acc-rgb), .1);
}
/* Núcleo central */
.squad-core {
  position: absolute; top: 50%; left: 50%;
  width: 148px; height: 148px; margin: -74px 0 0 -74px;
  transform-style: preserve-3d;
  display: flex; align-items: center; justify-content: center;
}
.squad-core-glow {
  position: absolute; inset: -40px;
  background: radial-gradient(circle, rgba(var(--acc-rgb),.35) 0%, transparent 70%);
  animation: corePulse 3.4s ease-in-out infinite;
}
@keyframes corePulse { 0%,100%{ opacity:.55; transform:scale(.92) } 50%{ opacity:1; transform:scale(1.08) } }
.squad-core-cube {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 108px; height: 108px;
  background: rgba(4,4,10,.7);
  border: 1px solid rgba(var(--acc-rgb), .4);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 0 48px rgba(var(--acc-rgb), .28);
  animation: coreFloat 5s ease-in-out infinite;
}
.squad-core-cube svg { width: 72px !important; height: 78px !important; }
@keyframes coreFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.squad-core-lbl {
  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
  font-family: var(--fp); font-size: 7.5px; color: var(--acc);
  letter-spacing: .18em; white-space: nowrap; opacity: .8;
}
.squad-ring {
  position: absolute; top: 50%; left: 50%;
  width: 186px; height: 186px; margin: -93px 0 0 -93px;
  border: 1px solid rgba(var(--acc-rgb), .3);
  border-radius: 50%;
  border-top-color: transparent; border-bottom-color: transparent;
  animation: ringSpin 6s linear infinite;
}
.squad-ring-b {
  width: 136px; height: 136px; margin: -68px 0 0 -68px;
  border-left-color: transparent; border-right-color: transparent;
  animation: ringSpin 4s linear infinite reverse;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
/* Órbita (rotada por JS) */
.squad-orbit {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
/* Nodo de especialista */
.squad-node {
  position: absolute; top: 0; left: 0;
  width: 196px; height: 248px; margin: -132px 0 0 -98px;
  transform-style: preserve-3d;
  cursor: pointer;
}
.squad-node-inner {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  transition: filter .3s;
}
.squad-node-img {
  width: 176px; height: 196px; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.6));
  transition: transform .3s var(--ease), filter .3s;
}
.squad-node-disc {
  position: absolute; bottom: 34px; left: 50%; width: 96px; height: 26px;
  margin-left: -48px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--ncr),.5) 0%, transparent 70%);
  filter: blur(2px); transition: opacity .3s; opacity: .5;
}
.squad-node-name {
  font-family: var(--fp); font-size: 6.5px; letter-spacing: .04em;
  color: var(--text); margin-top: 4px; white-space: nowrap;
  padding: 4px 8px; background: rgba(4,4,10,.7);
  border: 1px solid rgba(var(--ncr), .45);
}
.squad-node-role {
  font-family: var(--fb); font-size: 9px; color: rgb(var(--ncr));
  margin-top: 4px; opacity: 0; transition: opacity .3s; white-space: nowrap;
}
.squad-node:hover .squad-node-img { transform: scale(1.12) translateY(-6px); filter: drop-shadow(0 22px 22px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(var(--ncr),.6)); }
.squad-node:hover .squad-node-role { opacity: 1; }
.squad-node:hover .squad-node-disc { opacity: 1; }
.squad-hint { text-align: center; margin-top: 24px; opacity: .55; }

@media (max-width: 720px) {
  .squad3d { height: 520px; perspective: 1000px; }
  .squad-plane { width: 440px; height: 440px; margin: -220px 0 0 -220px; }
  .squad-plane-2 { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
  .squad-node { width: 132px; height: 168px; margin: -90px 0 0 -66px; }
  .squad-node-img { width: 116px; height: 130px; }
}

/* ─── Botón flotante WhatsApp (3D) ───────────────────────── */
.wa-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 8000;
  width: 64px; height: 64px; perspective: 520px;
  -webkit-tap-highlight-color: transparent;
}
.wa-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: #25D366; z-index: 1;
  animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.95); opacity: 0; } }
.wa-btn {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(145deg, #2BE070 0%, #25D366 45%, #128C7E 100%);
  box-shadow: 0 12px 26px rgba(37,211,102,.45), 0 4px 10px rgba(0,0,0,.35), inset 0 2px 5px rgba(255,255,255,.4);
  transform-style: preserve-3d;
  transition: transform .25s var(--ease), box-shadow .3s;
  animation: waFloat 3.6s ease-in-out infinite;
}
.wa-btn svg { width: 36px; height: 36px; transform: translateZ(20px); filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
@keyframes waFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.wa-float:hover .wa-btn { box-shadow: 0 18px 36px rgba(37,211,102,.62), 0 0 0 4px rgba(37,211,102,.18); }
@media (max-width: 720px) {
  .wa-float { right: 18px; bottom: 18px; width: 56px; height: 56px; }
  .wa-btn svg { width: 30px; height: 30px; }
}

/* ─── Methodology ────────────────────────────────────────── */
.method-track { max-width: 800px; margin: 0 auto; }
.method-step {
  display: grid; grid-template-columns: 72px 1fr; gap: 44px;
  margin-bottom: 68px; position: relative;
  opacity: 0; transform: translateX(-28px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.method-step.visible { opacity: 1; transform: none; }
.method-step:last-child { margin-bottom: 0; }
.method-l { display: flex; flex-direction: column; align-items: center; }
.method-num-box {
  width: 64px; height: 64px; flex-shrink: 0;
  border: 1px solid var(--border-a);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); position: relative; z-index: 2;
}
.method-num { font-family: var(--fp); font-size: 10px; color: var(--acc); }
.method-vline {
  width: 1px; flex: 1; margin-top: -1px;
  background: linear-gradient(to bottom, var(--border-a) 0%, transparent 100%);
  min-height: 60px;
}
.method-step:last-child .method-vline { display: none; }
.method-r { padding-top: 12px; }
.method-sub { font-family: var(--fp); font-size: 7px; color: var(--acc); letter-spacing: .14em; margin-bottom: 10px; }
.method-title { font-family: var(--fd); font-size: 34px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 14px; }
.method-desc { font-size: 15px; line-height: 1.9; color: var(--text-b); max-width: 540px; }

/* ─── Contact ────────────────────────────────────────────── */
#contacto {
  min-height: auto;
  padding: 72px 0 96px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
#contact-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; pointer-events: none; }
.contact-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 30%, rgba(4,4,10,.75) 100%);
}
.contact-inner { position: relative; z-index: 2; text-align: center; padding: 0 32px; max-width: 900px; }
.contact-inner .px { display: block; margin-bottom: 44px; }
.contact-title {
  font-family: var(--fd);
  font-size: clamp(30px, 5vw, 72px);
  font-weight: 900; line-height: 1.15;
  text-transform: uppercase; letter-spacing: -.02em;
  margin-bottom: 68px;
}
.contact-actions { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* ─── Datos de contacto ──────────────────────────────────── */
.contact-details {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 56px;
}
.contact-row {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--fb); font-size: 15px; color: var(--text-b);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.contact-row svg { width: 18px; height: 18px; color: var(--acc); flex-shrink: 0; }
.contact-row:hover { color: var(--text); transform: translateY(-2px); }

/* ─── Redes sociales ─────────────────────────────────────── */
.contact-social {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  margin-top: 56px;
}
.contact-social-lbl {
  font-family: var(--fp); font-size: 8px; color: var(--acc);
  letter-spacing: .22em; opacity: .8;
}
.social-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.social-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; color: var(--text);
  border: 1px solid var(--border-a);
  background: rgba(48, 233, 98,.03);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: transform .35s var(--ease), color .3s, background .3s, box-shadow .3s;
}
.social-ico svg { width: 24px; height: 24px; }
.social-ico:hover {
  color: var(--acc); background: var(--acc-dim);
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 14px 30px rgba(var(--acc-rgb),.25), 0 0 0 1px rgba(var(--acc-rgb),.5);
}

/* ─── Mobile menu ────────────────────────────────────────── */
.menu-btn {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; cursor: pointer;
}
.menu-btn span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: all .3s; }
.mob-nav {
  display: none; position: fixed; inset: 0; z-index: 190;
  background: rgba(4,4,10,.97); backdrop-filter: blur(16px);
  flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  padding-top: 80px;
}
.mob-nav.open { display: flex; }
.mob-nav a { font-family: var(--ft); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-b); transition: color .3s; }
.mob-nav a:hover { color: var(--acc); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1400px) {
  .chars-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1200px) {
  .modal-grid { grid-template-columns: 340px 1fr; }
}
@media (max-width: 960px) {
  #nav { padding: 16px 32px; }
  #nav.scrolled { padding: 14px 32px; }
  .nav-links { display: none; }
  .menu-btn { display: flex; }
  .sec-inner { padding: 100px 32px; }
  .chars-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-panel { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .modal-grid { grid-template-columns: 1fr; height: auto; min-height: min-content; }
  .modal-l { height: 340px; flex-shrink: 0; }
  .modal-r { padding: 32px 28px 48px; overflow: visible; }
  .modal-x { position: fixed; }
  .method-title { font-size: 26px; }
}
@media (max-width: 600px) {
  .sec-inner { padding: 80px 20px; }
  .chars-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-sub br { display: none; }
  .contact-title br { display: none; }
  .method-step { grid-template-columns: 54px 1fr; gap: 24px; }
  .method-num-box { width: 50px; height: 50px; }
  .method-title { font-size: 22px; }
}