/* =====================================================================
   MATEO BEVACQUA — Sistema de diseño
   Dirección: Aurora oscuro + estructura/forma/animaciones tipo SaaS
   (referencia: tradesyncer.com). Vibrante, glassmorphism, vivo.
   ===================================================================== */

:root {
  /* Acompaña al <meta name="color-scheme"> del HTML: barras de scroll,
     campos y menus del navegador en oscuro, sin un destello claro. */
  color-scheme: dark;
  /* Base oscura */
  --bg:        #05070f;
  --bg-2:      #080c18;
  --panel:     #0b1120;

  /* Aurora / acentos vivos */
  --accent:    #5b8dff;   /* azul eléctrico */
  --accent-2:  #38bdf8;   /* cian */
  --accent-3:  #7c5cff;   /* violeta (solo aurora) */
  --grad:      linear-gradient(135deg, #5b8dff 0%, #38bdf8 100%);
  --grad-vivid:linear-gradient(120deg, #7c5cff 0%, #5b8dff 45%, #38bdf8 100%);
  --grad-text: linear-gradient(180deg, #ffffff 0%, #c3d0ee 70%, #8aa0d4 100%);

  /* Texto */
  --text:      #f2f5fc;
  --dim:       #d3dbeb;
  --mute:      #a3aec7;

  /* Cristal / líneas */
  --glass:     rgba(255, 255, 255, 0.045);
  --glass-2:   rgba(255, 255, 255, 0.07);
  --line:      rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.15);
  --glow:      rgba(77, 124, 255, 0.35);

  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --maxw: 1180px;
  --r:    16px;
  --r-sm: 12px;
  --r-lg: 28px;

  /* ESCALA DE ESPACIADO
     Todas las separaciones verticales salen de acá. Antes cada bloque
     tenía su margen escrito a mano (30px, 28px, 26px, 22px, 64px...) y
     el resultado era que dos elementos parecidos quedaban a distancias
     distintas sin ningún motivo. Con la escala, la página tiene un ritmo
     parejo: si algo hay que separar más o menos, se sube o se baja un
     escalón, nunca un número inventado. */
  --sp-1: 12px;   /* pegado: una nota y lo que la genera */
  --sp-2: 20px;   /* elementos que van juntos */
  --sp-3: 32px;   /* separación normal entre partes */
  --sp-4: 48px;   /* bloques distintos */
  --sp-5: 64px;   /* respiro grande */

  --shadow:    0 24px 70px -28px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 50px 130px -34px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 20px 60px -20px var(--glow);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.2s;
  --t: 0.45s;
  --t-slow: 0.9s;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-padding-top: 92px; }

/* ===== Scrollbar acorde a la estética (oscuro + degradé azul/violeta) ===== */
html { scrollbar-width: thin; scrollbar-color: rgba(91,141,255,0.55) rgba(255,255,255,0.04); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7c5cff, #5b8dff 50%, #38bdf8); border-radius: 10px; border: 3px solid #05070f; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8f72ff, #6f9bff 50%, #4cc6ff); border: 3px solid #05070f; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* compensa el header fijo para que los anclas (#por-que, #camino, etc.) caigan alineados con el titulo de cada seccion */
section[id], [id] { scroll-margin-top: 92px; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
  overscroll-behavior-x: none;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: rgba(91, 141, 255, 0.35); color: #fff; }

/* ---------- Fondo Aurora animado ---------- */
.aurora { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.aurora .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; mix-blend-mode: screen; }
.blob.b1 { width: 56vw; height: 56vw; top: -16vw; left: 46vw;
  background: radial-gradient(circle, #4d7cff, transparent 68%); animation: float1 24s var(--ease) infinite alternate; }
.blob.b2 { width: 50vw; height: 50vw; top: 24vh; left: -14vw;
  background: radial-gradient(circle, #7c5cff, transparent 68%); animation: float2 30s var(--ease) infinite alternate; }
.blob.b3 { width: 44vw; height: 44vw; bottom: -16vw; right: -8vw;
  background: radial-gradient(circle, #38bdf8, transparent 68%); animation: float3 27s var(--ease) infinite alternate; }
.blob.b4 { width: 36vw; height: 36vw; top: 44vh; left: 40vw;
  background: radial-gradient(circle, #2f56c9, transparent 70%); animation: float1 33s var(--ease) infinite alternate; }
@keyframes float1 { to { transform: translate(-12vw, 12vh) scale(1.18); } }
@keyframes float2 { to { transform: translate(12vw, -10vh) scale(1.12); } }
@keyframes float3 { to { transform: translate(-10vw, -10vh) scale(1.22); } }

body::before { content: ""; position: fixed; inset: 0; z-index: -2;
  background: radial-gradient(120% 70% at 50% -10%, rgba(91,141,255,0.18), transparent 55%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; opacity: 0.4;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(circle at 50% 18%, #000, transparent 70%);
          mask-image: radial-gradient(circle at 50% 18%, #000, transparent 70%); }

/* grano sutil para dar textura (vida) */
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.scroll-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200;
  background: var(--grad-vivid); box-shadow: 0 0 14px var(--glow); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 26px; }
section { position: relative; padding-block: clamp(38px, 4.4vw, 68px); }
.center { text-align: center; margin-inline: auto; }

.pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px;
  border: 1px solid var(--line-2); border-radius: 100px; background: var(--glass);
  font-size: 0.78rem; color: #f5c45e; backdrop-filter: blur(8px); }
.pill .dot { display: none; }
@keyframes pulse { 50% { opacity: 0.4; transform: scale(0.8); } }

/* Rotulo de seccion: pastilla con color, no un gris que nadie ve */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans);
  font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em; text-transform: none;
  color: #9dc4ff; margin-bottom: 20px; padding: 7px 18px; border-radius: 100px;
  border: 1px solid rgba(91,141,255,0.35); background: rgba(91,141,255,0.12); }
/* Sin adornos: solo el texto dentro de la pastilla. */
.eyebrow::before { content: none; }

h1, h2, h3 { line-height: 1.07; font-weight: 600; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.7rem, 6.6vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.3vw, 3.3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.02em; }

.grad-text { background: var(--grad-text); background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s var(--ease) infinite; }
.accent-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes shimmer { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }

.section-head { max-width: 680px; margin-bottom: 30px; }

/* Botones del nav: compactos (no enormes) */
.nav-links .btn-nav { padding: 9px 18px; font-size: 0.86rem; }
/* El texto del botón primario debe ser OSCURO (el degradé es claro) → legible.
   .nav-links a pisaba el color, por eso se veía casi blanco. */
.nav-links a.btn-primary { color: #04122e; }

/* "Empezar ahora" aterriza arrancando JUSTO en "La mentoría" (el título queda
   pegado bajo el nav, sin mostrar nada de la sección anterior). */
#mentorias { scroll-margin-top: 20px; padding-top: 6px; }
#mentorias .section-head { margin-bottom: 18px; padding-top: 8px; }
#planes { scroll-margin-top: 20px; }
.section-head.center { margin-inline: auto; }
.section-head p { color: var(--dim); margin-top: 18px; font-size: 1.06rem; }
.lead { color: var(--dim); font-size: 1.16rem; }

/* ---------- Botones ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--r-sm); border: 1px solid transparent; font-weight: 500;
  font-size: 0.95rem; cursor: pointer; overflow: hidden; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t), background var(--t-fast), border-color var(--t-fast); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn::after { content: ""; position: absolute; top: 0; left: -130%; width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); transition: left 0.75s var(--ease); }
.btn:hover::after { left: 140%; }
.btn-primary { background: var(--grad); color: #04122e; font-weight: 600;
  box-shadow: 0 10px 32px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 46px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,0.55); }
.btn-ghost { background: var(--glass); border-color: var(--line-2); color: var(--text); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: var(--glass-2); border-color: var(--accent); transform: translateY(-2px); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ---------- Navbar ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: all var(--t) var(--ease);
  border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(5, 7, 15, 0.72); backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--line); }
.nav-inner { max-width: var(--maxw); margin-inline: auto; padding: 16px 26px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; }
.brand .mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  overflow: hidden; box-shadow: 0 6px 20px -8px var(--glow); }
.brand .mark img { width: 100%; height: 100%; }
.brand small { display: block; font-size: 0.62rem; color: var(--mute); font-family: var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--dim); font-size: 0.9rem; transition: color var(--t-fast); position: relative; }
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--grad); transition: width var(--t) var(--ease); }
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 4px 0; transition: var(--t-fast); }

/* ---------- Hero (centrado, tipo SaaS) ---------- */
.hero { padding-top: 150px; padding-bottom: 70px; text-align: center; }
.hero .pill { margin-bottom: var(--sp-3); }
.hero h1 { margin: 0 auto var(--sp-2); max-width: 16ch; line-height: 1.12; padding-bottom: 0.1em; }
.hero .lead { max-width: 620px; margin: 0 auto var(--sp-3); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
/* El tilde va DENTRO del texto, no al lado.
   ANTES era una fila flexible (tilde | texto). En el celular el texto pasa
   a dos lineas, y el tilde quedaba centrado verticalmente contra todo el
   bloque: flotando solo a la izquierda, despegado de la frase. Ahora es
   parte del renglon, asi que siempre queda pegado a la primera palabra y
   acompana al texto centrado. */
.hero-note { margin-top: var(--sp-3); font-size: 0.84rem; color: var(--mute);
  text-align: center; max-width: 30rem; margin-inline: auto; line-height: 1.55; }
/* `display: inline` es OBLIGATORIO acá: mas arriba hay una regla general
   (img, svg, canvas { display: block }) que hacia que el tilde ocupara su
   propio renglon y se pegara al borde izquierdo, separado de la frase. */
.hero-note svg { display: inline; color: var(--accent-2); vertical-align: -0.18em; margin-right: 6px; }

/* Preview grande (mock del producto) */
.hero-preview { margin-top: var(--sp-4); perspective: 1600px; }
.preview { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(13,19,36,0.85), rgba(5,7,15,0.85)); box-shadow: var(--shadow-lg);
  overflow: hidden; backdrop-filter: blur(8px); transform: rotateX(7deg); transform-origin: center top;
  transition: transform var(--t-slow) var(--ease); }
.hero-preview.in .preview { transform: rotateX(0deg); }
.preview::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(91,141,255,0.5), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.preview .glow { position: absolute; top: -40%; left: 50%; width: 70%; height: 80%; transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow), transparent 65%); filter: blur(30px); pointer-events: none; }

/* ---------- Mock UI (panel del generador / dashboard) ---------- */
.mock { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; min-height: 360px; position: relative; z-index: 1; }
.mock-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.72rem; color: var(--mute); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3a5e; }
.mock-bar i:nth-child(1){ background:#ff5f57;} .mock-bar i:nth-child(2){ background:#febc2e;} .mock-bar i:nth-child(3){ background:#28c840;}
.mock-bar span { margin-left: auto; }
.mock-left { padding: 22px; border-right: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--glass); font-size: 0.84rem; }
.mock-row .lbl { color: var(--dim); display: flex; align-items: center; gap: 9px; }
.mock-row .lbl b { color: var(--text); font-weight: 500; }
.toggle { width: 38px; height: 22px; border-radius: 100px; background: rgba(255,255,255,0.1); position: relative; flex: none; }
.toggle.on { background: var(--grad); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: var(--t); }
.toggle.on::after { left: 19px; }
.chip { font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 9px; }
.mock-right { padding: 22px; position: relative; }
.mock-chart { height: 100%; min-height: 260px; display: flex; align-items: flex-end; gap: 6px; padding-bottom: 26px; position: relative; }
.candle { width: 9px; border-radius: 2px; position: relative; opacity: 0; transform: translateY(14px);
  animation: candleIn 0.5s var(--ease) forwards; }
.candle.up { background: linear-gradient(180deg, #3ddc97, #1f9e6b); }
.candle.down { background: linear-gradient(180deg, #ff6b6b, #c93f3f); }
.candle::before { content: ""; position: absolute; left: 50%; top: -8px; bottom: -8px; width: 1px; transform: translateX(-50%); background: inherit; opacity: 0.5; }
@keyframes candleIn { to { opacity: 0.95; transform: none; } }
.mock-marker { position: absolute; font-size: 0.7rem; font-family: var(--font-mono); padding: 2px 7px; border-radius: 6px; }
.mock-marker.buy { background: rgba(61,220,151,0.16); color: #6ff0b6; border: 1px solid rgba(61,220,151,0.4); }
.mock-comment { position: absolute; top: 16px; left: 16px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); line-height: 1.7; }
.mock-comment b { color: var(--accent-2); }

/* ---------- Marquee de tecnologías (en movimiento) ---------- */
.marquee { overflow: hidden; padding-block: 34px; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: flex; align-items: center; gap: 56px; font-family: var(--font-mono); font-size: 0.95rem;
  color: var(--mute); letter-spacing: 0.04em; white-space: nowrap; }
.marquee-item b { color: var(--dim); font-weight: 500; transition: color var(--t); }
.marquee-item b:hover { color: var(--accent-2); }
.marquee-item .sep { color: var(--accent); opacity: 0.5; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Features ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.feature-card { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass);
  padding: 32px; backdrop-filter: blur(8px); overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t); }
.feature-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.feature-card .icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 22px;
  color: #04122e; background: var(--grad); box-shadow: 0 10px 26px -10px var(--glow); }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { color: var(--dim); font-size: 0.95rem; }

/* ---------- Showcase (secciones alternadas) ---------- */
.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.showcase-grid.reverse .showcase-text { order: 2; }
.showcase-text .eyebrow { margin-bottom: 16px; }
.showcase-text h2 { margin-bottom: 18px; }
.showcase-text p { color: var(--dim); font-size: 1.04rem; }
.showcase-list { display: grid; gap: 14px; margin-top: 26px; }
.showcase-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--dim); font-size: 0.96rem; }
.showcase-list svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 8px; background: var(--grad); color: #04122e; box-shadow: 0 6px 14px -6px var(--glow); }
.showcase-visual { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, rgba(13,19,36,0.8), rgba(5,7,15,0.8)); box-shadow: var(--shadow); }
.next-step { display: flex; gap: 14px; align-items: center; margin-top: 24px; padding: 16px 18px; border: 1px solid var(--line-2);
  border-radius: 14px; background: linear-gradient(160deg, rgba(56,189,248,0.09), rgba(91,141,255,0.04)); }
.next-step .ns-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #04122e; background: var(--grad); box-shadow: 0 8px 20px -8px var(--glow); }
.next-step p { color: var(--dim); font-size: 0.95rem; line-height: 1.55; }
.sqx-logo { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; }
.sqx-logo svg { filter: drop-shadow(0 8px 18px rgba(91,141,255,0.35)); }
.sqx-word { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; color: var(--dim); white-space: nowrap; text-transform: none; }
.sqx-word i { font-style: normal; color: var(--accent-2); margin-left: 2px; }

/* Ventana de agendar llamada */
.book-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.book-modal.open { display: block; }
.book-backdrop { position: absolute; inset: 0; background: rgba(4,7,15,0.7); backdrop-filter: blur(6px); }
.book-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, 94vw); height: min(720px, 90vh); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(14,21,38,0.99), rgba(8,12,24,0.99)); border: 1px solid var(--line-2);
  border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.6); }
.book-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 0.98rem; }
.book-head-r { display: flex; align-items: center; gap: 12px; flex: none; }
.book-ext { font-size: 0.8rem; font-weight: 600; color: var(--accent-2); text-decoration: none; white-space: nowrap; }
.book-ext:hover { text-decoration: underline; }
.book-close { background: var(--glass); border: 1px solid var(--line-2); color: var(--dim); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 0.9rem; flex: none; }
.book-close:hover { color: var(--text); border-color: var(--accent); }
.book-body { flex: 1; background: #fff; }
.book-body iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Apartado: acompañamiento personalizado */
.path-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.path-card { padding: 26px 24px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--glass); transition: transform var(--t), border-color var(--t); }
.path-card:hover { border-color: rgba(91,141,255,0.42); }
.path-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #04122e; background: var(--grad); box-shadow: 0 8px 22px -8px var(--glow); margin-bottom: 16px; }
.path-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.path-card p { color: var(--dim); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 820px) { .path-cards { grid-template-columns: 1fr; } }

/* ---------- Planes ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--glass); padding: 34px 30px; backdrop-filter: blur(8px);
  transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t); }
.plan:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.plan.featured { background: linear-gradient(180deg, rgba(91,141,255,0.1), var(--glass)); border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-glow); position: relative; }
.plan .tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 13px; margin-bottom: 22px; }
.plan .featured-tag { background: var(--grad); color: #04122e; border-color: transparent; font-weight: 600; }
.plan .duration { font-size: 3rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.plan .duration small { font-size: 1rem; color: var(--mute); font-weight: 400; }
.plan h3 { margin: 14px 0 6px; }
.plan .plan-desc { color: var(--dim); font-size: 0.93rem; margin-bottom: 22px; }
.plan ul { display: grid; gap: 12px; margin-bottom: 28px; }
.plan li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem; color: var(--dim); }
.plan li svg { flex: none; margin-top: 3px; color: var(--accent-2); }
.plan .btn { margin-top: auto; }

/* ---------- Filosofía ---------- */
.philosophy { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(160deg, rgba(91,141,255,0.12), rgba(124,92,255,0.06) 60%, rgba(5,7,15,0.3));
  padding: clamp(40px, 6vw, 78px); }
.philosophy h2 { max-width: 800px; }
.philosophy .promise { margin-top: 32px; display: grid; gap: 18px; max-width: 760px; }
.promise-item { display: flex; gap: 15px; align-items: flex-start; }
.promise-item .badge { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; }
.promise-item.no .badge { background: rgba(255,107,107,0.14); color: #ff9a9a; border: 1px solid rgba(255,107,107,0.3); }
.promise-item.yes .badge { background: rgba(56,189,248,0.14); color: var(--accent-2); border: 1px solid rgba(56,189,248,0.3); }
.promise-item p { color: var(--text); font-size: 1.04rem; }

/* ---------- Tabla comparativa de niveles ---------- */
.ptable-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.ptable { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; min-width: 820px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--glass); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
/* Cada fila es un contenedor lógico (display:contents) → renglón parejo + hover por fila */
.pt-row { display: contents; }
.pt-row > div { padding: 16px 22px; display: flex; align-items: center; min-height: 66px;
  border-bottom: 1px solid rgba(255,255,255,0.055); transition: background-image 0.18s var(--ease); }
.pt-row:not(.pt-headrow):not(.pt-footrow):hover > div { background-image: linear-gradient(rgba(255,255,255,0.035), rgba(255,255,255,0.035)); }
.pt-footrow > div { border-bottom: 0; }
/* La columna de caracteristicas va centrada, igual que las tres columnas de
   niveles. Antes iba pegada a la izquierda y las notas largas (como la de la
   plantilla guiada) quedaban colgando de un lado mientras todo lo demas
   estaba centrado. */
.pt-feat { flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.pt-name { color: var(--text); font-size: 0.95rem; font-weight: 500; line-height: 1.35; }
.pt-note { color: var(--mute); font-size: 0.79rem; line-height: 1.35; }
.pt-cell { justify-content: center; }
.col1 { background: rgba(56,189,248,0.05); }
.col2 { background: rgba(124,92,255,0.06); }
.col3 { background: rgba(245,196,94,0.06); }
.pt-corner { font-weight: 700; font-size: 1.05rem; color: var(--mute); letter-spacing: 0.01em; }
.pt-headrow > div { padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-2); }
.pt-head { flex-direction: column; align-items: flex-start; gap: 7px; }
.pt-head .ph-name { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.pt-head .ph-sub { font-size: 0.78rem; color: var(--mute); font-family: var(--font-mono); }
.pt-h1 { border-top: 3px solid #38bdf8; } .pt-h1 .ph-name { color: #67e8f9; }
.pt-h2 { border-top: 3px solid #a78bfa; } .pt-h2 .ph-name { color: #a78bfa; }
.pt-h3 { border-top: 3px solid #f5c45e; } .pt-h3 .ph-name { color: #f5c45e; }
/* Marcas alineadas: mismo tamaño para ✓, cantidad y guion → columnas parejas */
.pt-yes, .pt-num, .pt-no { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.col1 .pt-yes { background: linear-gradient(135deg,#38bdf8,#67e8f9); color: #04222e; }
.col2 .pt-yes { background: linear-gradient(135deg,#5b8dff,#7c5cff); color: #fff; }
.col3 .pt-yes { background: linear-gradient(135deg,#f5c45e,#f59e0b); color: #3a2600; }
.pt-no { color: var(--mute); opacity: 0.35; font-size: 1rem; }
.pt-num { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; }
.col1 .pt-num { color: #67e8f9; background: rgba(56,189,248,0.14); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.3); }
.col2 .pt-num { color: #c4b5fd; background: rgba(167,139,250,0.15); box-shadow: inset 0 0 0 1px rgba(167,139,250,0.32); }
.col3 .pt-num { color: #f5c45e; background: rgba(245,196,94,0.13); box-shadow: inset 0 0 0 1px rgba(245,196,94,0.3); }
/* Total de llamadas en los 2 meses: pastilla clara con letra negra (legible) */
.pt-stack { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pt-freq { font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; }
.col1 .pt-freq { color: #67e8f9; } .col2 .pt-freq { color: #c4b5fd; } .col3 .pt-freq { color: #f5c45e; }
.col1 .pt-total { background: linear-gradient(135deg,#38bdf8,#67e8f9); }
.pt-total, .pc-total { display: inline-block; font-family: var(--font-mono); font-weight: 800;
  font-size: 0.68rem; letter-spacing: 0.01em; padding: 3px 9px; border-radius: 100px; white-space: nowrap; color: #05070f; background: #e9eefb; }
.col2 .pt-total { background: linear-gradient(135deg,#a78bfa,#c4b5fd); }
.col3 .pt-total { background: linear-gradient(135deg,#f5c45e,#fcd98a); }
.plan-card.l1 .pc-total { background: linear-gradient(135deg,#38bdf8,#67e8f9); }
.plan-card.l2 .pc-total { background: linear-gradient(135deg,#a78bfa,#c4b5fd); }
.plan-card.l3 .pc-total { background: linear-gradient(135deg,#f5c45e,#fcd98a); }

.pt-foot { padding: 22px 16px !important; justify-content: center; }
.pt-foot .btn { width: 100%; }
.col1.pt-foot .btn { background: linear-gradient(135deg,#38bdf8,#67e8f9); color: #04222e; }
.col2.pt-foot .btn { background: linear-gradient(135deg,#5b8dff,#7c5cff); color: #fff; }
.col3.pt-foot .btn { background: linear-gradient(135deg,#f5c45e,#f59e0b); color: #3a2600; }

/* Duración de la mentoría, resaltada (badge) */
.ph-dur, .pc-dur { display: inline-block; font-weight: 700; font-size: 0.74rem; color: #04231a;
  background: linear-gradient(135deg,#3ddc97,#22c55e); padding: 3px 11px; border-radius: 100px; margin-top: 3px; box-shadow: 0 4px 12px rgba(61,220,151,0.28); }

/* Tarjetas de planes (versión mobile, un solo scroll vertical) */
.plan-cards { display: none; }
.plan-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(8px); padding: 22px 20px; }
.plan-card.l1 { border-top: 3px solid #38bdf8; }
.plan-card.l2 { border-top: 3px solid #a78bfa; }
.plan-card.l3 { border-top: 3px solid #f5c45e; }
.pc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.pc-name { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.plan-card.l1 .pc-name { color: #67e8f9; }
.plan-card.l2 .pc-name { color: #a78bfa; }
.plan-card.l3 .pc-name { color: #f5c45e; }
.pc-sub { font-size: 0.86rem; color: var(--mute); }
.pc-incl { font-size: 0.84rem; color: var(--dim); font-weight: 600; margin-bottom: 10px; }
/* Renglones suaves: una línea por cosa incluida, separador tenue, valor a la derecha */
.plan-card .pc-list { list-style: none; display: block; margin: 0 0 18px; }
.plan-card .pc-list li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center;
  column-gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.055); }
.plan-card .pc-list li:last-child { border-bottom: 0; }
.plan-card .pc-mk { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.plan-card.l1 .pc-mk { background: rgba(56,189,248,0.15); color: #67e8f9; box-shadow: inset 0 0 0 1px rgba(56,189,248,0.3); }
.plan-card.l2 .pc-mk { background: rgba(167,139,250,0.16); color: #c4b5fd; box-shadow: inset 0 0 0 1px rgba(167,139,250,0.32); }
.plan-card.l3 .pc-mk { background: rgba(245,196,94,0.14); color: #f5c45e; box-shadow: inset 0 0 0 1px rgba(245,196,94,0.3); }
.plan-card .pc-txt { display: flex; flex-direction: column; gap: 2px; font-size: 0.93rem; color: var(--text); font-weight: 500; line-height: 1.35; }
.plan-card .pc-n { font-style: normal; font-size: 0.78rem; color: var(--mute); font-weight: 400; line-height: 1.35; }
.plan-card .pc-q { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px; display: grid; place-items: center; }
.plan-card.l1 .pc-q { color: #67e8f9; background: rgba(56,189,248,0.14); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.3); }
.plan-card.l2 .pc-q { color: #c4b5fd; background: rgba(167,139,250,0.15); box-shadow: inset 0 0 0 1px rgba(167,139,250,0.32); }
.plan-card.l3 .pc-q { color: #f5c45e; background: rgba(245,196,94,0.13); box-shadow: inset 0 0 0 1px rgba(245,196,94,0.3); }
.plan-card .pc-list li b { color: var(--text); }
.plan-card .btn { width: 100%; }
@media (max-width: 760px) {
  .ptable-wrap { display: none; }
  .plan-cards { display: grid; gap: 16px; }
}
@media (max-width: 420px) {
  .plan-card { padding: 20px 16px; }
  .plan-card .pc-list li { column-gap: 10px; }
  .plan-card .pc-txt { font-size: 0.9rem; }
}

/* ---------- Escalera de niveles (hero) ---------- */
.ladder-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(10px); padding: 30px; box-shadow: var(--shadow-lg); }
.ladder-title { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 20px; text-align: center; }
.ladder { display: grid; gap: 16px; }
.lad { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(255,255,255,0.025); transition: transform var(--t) var(--ease); }
.lad:hover { border-color: var(--line-2); }
.lad .lad-num { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; flex: none; }
.lad b { display: block; font-size: 1.05rem; margin-bottom: 3px; }
.lad span { color: var(--dim); font-size: 0.92rem; }
.lad.s1 { border-left: 3px solid #38bdf8; } .lad.s1 .lad-num { background: linear-gradient(135deg,#38bdf8,#67e8f9); color: #04222e; }
.lad.s2 { border-left: 3px solid #a78bfa; margin-left: 26px; } .lad.s2 .lad-num { background: linear-gradient(135deg,#5b8dff,#7c5cff); color: #fff; }
.lad.s3 { border-left: 3px solid #f5c45e; margin-left: 52px; } .lad.s3 .lad-num { background: linear-gradient(135deg,#f5c45e,#f59e0b); color: #3a2600; }
.lad.s3 b { color: #f5c45e; }
@media (max-width: 560px) { .lad.s2, .lad.s3 { margin-left: 0; } }
.road-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Tarjeta explicativa para principiantes (hero) */
/* Primer del hero: glosario término → definición (limpio, sin emojis) */
.primer { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(13,19,36,0.6), rgba(5,7,15,0.35)); backdrop-filter: blur(12px); padding: 26px 30px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.primer::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--grad); opacity: 0.9; }
.primer-eyebrow { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--accent-2); margin-bottom: 10px; }
.primer-row { display: block; padding: 15px 0; border-top: 1px solid var(--line); }
.primer-row:first-of-type { border-top: 0; padding-top: 4px; }
.primer-k { display: block; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 5px; }
.primer-row p { color: var(--dim); font-size: 0.95rem; line-height: 1.6; }
/* Progresión de color psicológica: confianza → claridad → valor → recompensa (compra) */
.primer-row:nth-of-type(1) .primer-k { color: #6ea2ff; }
.primer-row:nth-of-type(2) .primer-k { color: #38bdf8; }
.primer-row:nth-of-type(3) .primer-k { color: #f5c45e; }
.primer-row:nth-of-type(4) .primer-k { color: #3ddc97; }
.primer-row.hl p { color: var(--text); }
@media (max-width: 560px) { .primer { padding: 22px; } }

/* Diccionario: qué configura el robot, explicado */
.gloss { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.gloss-item { border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); backdrop-filter: blur(6px); padding: 22px; transition: transform var(--t) var(--ease), border-color var(--t); }
.gloss-item:hover { border-color: var(--line-2); }
.gloss-item .gi-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #04122e; background: var(--grad); margin-bottom: 14px; }
.gloss-item b { display: block; font-size: 1.04rem; margin-bottom: 6px; color: var(--text); }
.gloss-item span { color: var(--dim); font-size: 0.93rem; line-height: 1.5; }
@media (max-width: 880px) { .gloss { grid-template-columns: 1fr; } }

/* Equipo de robots (visual, en vez de gráfico abstracto) */
.robots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.robot-card { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,0.025); padding: 24px 18px; text-align: center; transition: transform var(--t) var(--ease), border-color var(--t); }
.robot-card:hover { border-color: var(--line-2); }
.robot-card .rc-emoji { font-size: 2.4rem; line-height: 1; display: inline-block; animation: floaty 4s var(--ease) infinite; }
.robot-card:nth-child(2) .rc-emoji { animation-delay: 0.5s; } .robot-card:nth-child(3) .rc-emoji { animation-delay: 1s; } .robot-card:nth-child(4) .rc-emoji { animation-delay: 1.5s; }
.robot-card b { display: block; margin-top: 12px; font-size: 1.02rem; }
.robot-card .rc-task { color: var(--dim); font-size: 0.88rem; margin-top: 2px; }
.robot-card .rc-status { margin-top: 12px; font-size: 0.74rem; font-family: var(--font-mono); color: var(--accent-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 4px 11px; display: inline-block; }
@media (max-width: 760px) { .robots-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Roadmap animado 0% → 100% ---------- */
.rmh { position: relative; margin-top: 46px; }
.rmh-track { position: absolute; top: 27px; left: 10%; right: 10%; height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.rmh-fill { position: absolute; inset: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg,#38bdf8,#a78bfa,#f5c45e,#3ddc97); box-shadow: 0 0 14px var(--glow); animation: rmhfill 3.4s var(--ease) forwards; }
@keyframes rmhfill { to { width: 100%; } }
.rmh-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.rmh-step { text-align: center; }
.rmh-dot { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; background: var(--panel); border: 2px solid var(--line-2); color: var(--dim); position: relative; z-index: 1; overflow: hidden; animation: rmhpulse 2.8s ease-out infinite; }
/* relleno "líquido" que sube por dentro hasta el % del círculo */
.rmh-dot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--c, var(--accent-2)); opacity: 0.42; }
@keyframes rmpulse { 0% { transform: scale(0.85); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes rmhpulse { 0% { box-shadow: 0 0 0 0 var(--c, var(--accent-2)); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes rmhfill25 { 0%, 100% { height: 0; } 28%, 82% { height: 25%; } }
@keyframes rmhfill50 { 0%, 100% { height: 0; } 28%, 82% { height: 50%; } }
@keyframes rmhfill75 { 0%, 100% { height: 0; } 28%, 82% { height: 75%; } }
@keyframes rmhfill100 { 0%, 100% { height: 0; } 28%, 82% { height: 100%; } }
.rmh-label b { display: block; font-size: 1rem; margin-bottom: 4px; }
.rmh-label span { color: var(--dim); font-size: 0.86rem; }
.rmh-step.c1 .rmh-dot { --c: #38bdf8; border-color: #38bdf8; color: #67e8f9; }
.rmh-step.c2 .rmh-dot { --c: #a78bfa; border-color: #7c8dff; color: #a78bfa; }
.rmh-step.c3 .rmh-dot { --c: #b9a6fc; border-color: #a78bfa; color: #c4b5fd; }
.rmh-step.c4 .rmh-dot { --c: #f5c45e; border-color: #f5c45e; color: #f5c45e; }
.rmh-step.c5 .rmh-dot { --c: #3ddc97; border-color: #3ddc97; color: #6ff0b6; }
/* El relleno arranca SOLO cuando la sección entra en pantalla (.rmh.in),
   así se ve cómo se van llenando uno tras otro. */
.rmh.in .rmh-step.c2 .rmh-dot::after { animation: rmhfill25 4.5s var(--ease) infinite 0.3s; }
.rmh.in .rmh-step.c3 .rmh-dot::after { animation: rmhfill50 4.5s var(--ease) infinite 0.6s; }
.rmh.in .rmh-step.c4 .rmh-dot::after { animation: rmhfill75 4.5s var(--ease) infinite 0.9s; }
.rmh.in .rmh-step.c5 .rmh-dot::after { animation: rmhfill100 4.5s var(--ease) infinite 1.2s; }
.rmh-step.c2 .rmh-dot { animation-delay: .4s; }
.rmh-step.c3 .rmh-dot { animation-delay: .8s; }
.rmh-step.c4 .rmh-dot { animation-delay: 1.2s; }
.rmh-step.c5 .rmh-dot { animation-delay: 1.6s; }
.rmh-step.c5 .rmh-label b { color: #6ff0b6; }
@media (max-width: 820px) { .rmh-steps { grid-template-columns: repeat(1, 1fr); gap: 22px; text-align: left; } .rmh-track { display: none; }
  .rmh-step { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 16px; } .rmh-dot { margin: 0; } }

/* ===== Mapa conceptual (línea de tiempo vertical animada) ===== */
.roadmap { position: relative; max-width: 860px; margin: 64px auto 0; }
.rm-line { position: absolute; left: 28px; top: 20px; bottom: 44px; width: 3px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,0.08); }
.rm-line i { position: absolute; left: 0; right: 0; top: 0; height: 200%; background: linear-gradient(180deg, #38bdf8, #7c5cff, #f5c45e, #3ddc97, #38bdf8); animation: rmflow 5s linear infinite; }
@keyframes rmflow { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.rm-stage { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 20px; padding-bottom: 30px; }
.rm-stage:last-child { padding-bottom: 0; }
.rm-node { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; color: #04122e; background: var(--grad); position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--bg), 0 8px 22px rgba(56,189,248,0.32); }
.rm-node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(56,189,248,0.45); animation: rmpulse 2.8s ease-out infinite; }
.rm-card { border: 1px solid var(--line); border-radius: 18px; background: var(--glass); backdrop-filter: blur(10px); padding: 22px 24px; transition: transform var(--t) var(--ease), border-color var(--t); }
.rm-card:hover { border-color: var(--line-2); }
.rm-phase { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: #9dc4ff; }
.rm-card h3 { font-size: 1.22rem; margin: 8px 0 8px; letter-spacing: -0.01em; }
.rm-card > p { color: var(--dim); font-size: 0.94rem; line-height: 1.6; }
.rm-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.rm-list li { position: relative; padding-left: 24px; font-size: 0.92rem; color: var(--dim); line-height: 1.5; }
.rm-list li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 9px; height: 9px; border-radius: 3px; background: var(--grad); }
.rm-mateo { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.rm-mateo .rm-av { width: 32px; height: 32px; border-radius: 50%; background: var(--grad-vivid); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; font-size: 0.88rem; box-shadow: 0 0 16px rgba(124,92,255,0.4); }
.rm-mateo p { font-size: 0.88rem; color: var(--mute); margin: 0; }
.rm-mateo b { color: var(--accent-2); }
.rm-stage.final .rm-node { background: linear-gradient(135deg,#3ddc97,#22c55e); color: #04231a; box-shadow: 0 0 0 6px var(--bg), 0 0 28px rgba(61,220,151,0.5); }
.rm-stage.final .rm-node::after { border-color: rgba(61,220,151,0.5); }
.rm-stage.final .rm-card { border-color: rgba(61,220,151,0.35); background: linear-gradient(180deg, rgba(61,220,151,0.08), var(--glass)); }
.rm-stage.final .rm-phase { color: #6ff0b6; }
@media (max-width: 560px) { .rm-line { left: 23px; } .rm-stage { grid-template-columns: 48px 1fr; gap: 14px; } .rm-node { width: 48px; height: 48px; font-size: 0.8rem; } .rm-card { padding: 18px; } }

/* Psicología — lista editorial (sin cajas) */
.psy-list { display: grid; gap: 24px; align-content: center; }
.psy-item { display: flex; gap: 18px; align-items: flex-start; }
.psy-item .pi-num { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: #04122e; background: var(--grad); box-shadow: 0 8px 20px -8px var(--glow); }
.psy-item b { display: block; font-size: 1.06rem; margin-bottom: 4px; }
.psy-item span { color: var(--dim); font-size: 0.95rem; line-height: 1.55; }

/* Narrativa tipo historia (sin cubos) */
.story-flow { max-width: 740px; margin: 26px auto 0; }
.story-flow p { font-size: 1.16rem; line-height: 1.75; color: var(--dim); margin-bottom: 18px; }
.story-flow p:first-child { font-size: 1.4rem; color: var(--text); font-weight: 600; line-height: 1.4; }
.story-flow p:last-child { margin-bottom: 0; }
.story-flow b { color: var(--text); }
.story-flow .hl { color: var(--accent-2); font-weight: 600; }

/* ===== Escena animada: el robot cobra vida (generador) ===== */
.robot-scene { max-width: 600px; margin: 30px auto 0; }
.robot-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.rs-bot { transform-box: fill-box; transform-origin: center; animation: rsBob 3.2s ease-in-out infinite; }
@keyframes rsBob { 50% { transform: translateY(-12px); } }
.rs-eye { transform-box: fill-box; transform-origin: center; animation: rsBlink 4.2s infinite; }
@keyframes rsBlink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.rs-ant { transform-box: fill-box; transform-origin: center; animation: rsAnt 1.6s ease-in-out infinite; }
@keyframes rsAnt { 50% { opacity: 0.35; transform: scale(0.6); } }
.rs-arm-l { transform-box: fill-box; transform-origin: 50% 0%; animation: rsWaveL 2.6s ease-in-out infinite; }
.rs-arm-r { transform-box: fill-box; transform-origin: 50% 0%; animation: rsWaveR 2.6s ease-in-out infinite; }
@keyframes rsWaveL { 50% { transform: rotate(-20deg); } }
@keyframes rsWaveR { 50% { transform: rotate(20deg); } }
.rs-chip { transform-box: fill-box; transform-origin: center; animation: rsFloat 3.4s ease-in-out infinite; }
@keyframes rsFloat { 50% { transform: translateY(-9px); } }
.rs-listo { transform-box: fill-box; transform-origin: center; animation: rsListo 3.6s ease-in-out infinite; }
@keyframes rsListo { 0%, 30% { transform: scale(0); opacity: 0; } 46% { transform: scale(1.18); opacity: 1; } 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.rs-cd { transform-box: fill-box; transform-origin: bottom; animation: rsCd 2.2s ease-in-out infinite; }
@keyframes rsCd { 0% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0.25); } }
/* El robot anima SIEMPRE (también en desktop con "reducir movimiento" del sistema). */

/* Contraste de números grandes (1 vs Millones) */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 44px; }
.vs-side { text-align: center; padding: 26px 20px; }
.vs-label { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--text); }
.vs-num { font-size: clamp(3.2rem, 10vw, 6.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; margin: 12px 0; }
.vs-side.a .vs-num { color: var(--mute); }
.vs-side.b .vs-num { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs-sub { display: block; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; margin: 2px 0 12px; }
.vs-side.a .vs-sub { color: var(--mute); }
.vs-side.b .vs-sub { color: var(--accent-2); }
.vs-desc { color: var(--dim); font-size: 0.96rem; max-width: 300px; margin: 0 auto; display: block; line-height: 1.5; }
.vs-side.a .vs-desc { color: var(--mute); }
.vs-mid { font-family: var(--font-mono); font-weight: 700; color: var(--accent-2); font-size: 1.05rem; border: 1px solid var(--line-2);
  border-radius: 50%; width: 58px; height: 58px; display: grid; place-items: center; background: var(--glass); }
@media (max-width: 720px) { .vs { grid-template-columns: 1fr; gap: 12px; } .vs-mid { margin: 0 auto; } }

/* ---------- Herramienta: opciones → robot listo ---------- */
.tool-demo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 26px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(8px); padding: 30px; box-shadow: var(--shadow); }
.td-title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.td-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,0.025); margin-bottom: 10px; font-size: 0.96rem; color: var(--dim); }
.td-pill { font-size: 0.86rem; color: var(--accent-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 13px; white-space: nowrap; }
.td-pill.td-on { background: var(--grad); color: #04122e; border-color: transparent; font-weight: 600; }
.td-arrow { font-size: 2.2rem; color: var(--accent); }
.td-result { text-align: center; display: grid; gap: 7px; justify-items: center; padding: 26px 20px; border: 1px solid rgba(56,189,248,0.3); border-radius: var(--r); background: linear-gradient(180deg, rgba(56,189,248,0.09), var(--glass)); }
.td-robot { font-size: 3.2rem; line-height: 1; }
.td-result b { font-size: 1.25rem; }
.td-result > span { color: var(--dim); font-size: 0.92rem; }
.td-badge { font-family: var(--font-mono); font-size: 0.78rem; color: #6ff0b6; border: 1px solid rgba(61,220,151,0.4); border-radius: 100px; padding: 5px 13px; margin-top: 6px; }
@media (max-width: 760px) { .tool-demo { grid-template-columns: 1fr; } .td-arrow { transform: rotate(90deg); justify-self: center; } }

/* ---------- Movimiento continuo automático ---------- */
.feature-card .icon { animation: floaty 5s var(--ease) infinite; }
.feature-card:nth-child(2) .icon { animation-delay: 0.5s; }
.feature-card:nth-child(3) .icon { animation-delay: 1s; }
.td-robot { animation: tdbounce 2.4s ease-in-out infinite; }
@keyframes tdbounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.td-arrow { animation: tdarrow 1.5s ease-in-out infinite; }
@keyframes tdarrow { 50% { transform: translateX(8px); } }
.tool-demo .td-pill.td-on { animation: tdglow 2.2s ease-in-out infinite; }
@keyframes tdglow { 50% { box-shadow: 0 0 20px var(--glow); } }
.td-badge { animation: tdbadge 2.2s ease-in-out infinite; }
@keyframes tdbadge { 50% { box-shadow: 0 0 18px rgba(61,220,151,0.5); } }
.td-result { animation: tdfloat 4s var(--ease) infinite; }
@keyframes tdfloat { 50% { transform: translateY(-6px); } }
/* aurora del fondo más visible */
.aurora .blob { opacity: 0.62; }

/* ---------- Callout (IA / clientes) ---------- */
.callout { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(91,141,255,0.13), rgba(124,92,255,0.06) 55%, rgba(5,7,15,0.3)); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow); }
.callout .c-icon { width: 66px; height: 66px; border-radius: 19px; display: grid; place-items: center; color: #04122e; background: var(--grad); box-shadow: 0 14px 34px -12px var(--glow); flex: none; }
.callout h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 10px; }
.callout p { color: var(--dim); font-size: 1.02rem; max-width: 800px; line-height: 1.6; }
.callout .c-points { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.callout .c-points span { display: flex; gap: 9px; align-items: center; font-size: 0.9rem; color: var(--dim); }
.callout .c-points svg { width: 22px; height: 22px; padding: 3px; border-radius: 7px; background: linear-gradient(135deg,#3ddc97,#22c55e); color: #04231a; flex: none; }
@media (max-width: 720px) { .callout { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--glass); overflow: hidden; transition: border-color var(--t); }
.faq-item.open { border-color: var(--line-2); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 1.02rem; font-weight: 500; color: var(--text); }
.faq-q .ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 7px; color: var(--accent-2); transition: transform var(--t) var(--ease); }
.faq-item.open .faq-q .ico { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t) var(--ease); }
.faq-a p { padding: 0 22px 22px; color: var(--dim); font-size: 0.96rem; }

/* ---------- CTA / Footer ---------- */
.cta-band { text-align: center; border: 1px solid var(--line-2); border-radius: var(--r-lg); position: relative; overflow: hidden;
  padding: clamp(48px, 7vw, 88px); background: linear-gradient(160deg, rgba(91,141,255,0.16), rgba(124,92,255,0.08), rgba(5,7,15,0.4)); }
.cta-band .glow { position: absolute; top: -50%; left: 50%; width: 60%; height: 100%; transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow), transparent 60%); filter: blur(40px); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band p { color: var(--dim); max-width: 540px; margin: 0 auto 32px; }
.cta-band .hero-cta { justify-content: center; }

.footer { padding-block: 60px 44px; margin-top: 30px; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.footer p { color: var(--mute); font-size: 0.86rem; max-width: 360px; margin-top: 16px; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a { color: var(--dim); font-size: 0.88rem; transition: color var(--t-fast); }
.footer-links a:hover { color: var(--text); }
.footer-legal { margin-top: 40px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; color: var(--mute); font-size: 0.78rem; font-family: var(--font-mono); }

/* ---------- Animaciones de movimiento continuo ---------- */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes borderspin { to { --angle: 360deg; } }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* Borde con degradado giratorio para la tarjeta destacada */
.plan.featured { background: linear-gradient(180deg, rgba(91,141,255,0.1), var(--glass)); position: relative; border: 1px solid transparent; box-shadow: var(--shadow-glow); }
.plan.featured::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; padding: 1.5px;
  background: conic-gradient(from var(--angle), transparent 30%, var(--accent), var(--accent-2), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borderspin 6s linear infinite; }
.feature-card .icon { animation: floaty 5s var(--ease) infinite; }
.feature-card:nth-child(2) .icon { animation-delay: 0.6s; }
.feature-card:nth-child(3) .icon { animation-delay: 1.2s; }
.feature-card:nth-child(5) .icon { animation-delay: 0.9s; }

/* ---------- Comparación manual vs robots ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.compare-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); padding: 34px; backdrop-filter: blur(8px); }
.compare-card.good { border-color: rgba(56,189,248,0.32); background: linear-gradient(180deg, rgba(56,189,248,0.08), var(--glass)); box-shadow: var(--shadow-glow); }
.compare-card .tagm { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.compare-card h3 { margin: 8px 0 22px; }
.pc-list { display: grid; gap: 14px; }
.pc-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; color: var(--dim); }
.pc-list li .mk { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; margin-top: 1px; }
.pc-list li.con .mk { background: rgba(255,107,107,0.14); color: #ff9a9a; border: 1px solid rgba(255,107,107,0.3); }
.pc-list li.pro .mk { background: rgba(61,220,151,0.16); color: #6ff0b6; border: 1px solid rgba(61,220,151,0.35); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 42px; }
.stat { border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); padding: 28px 22px; text-align: center; backdrop-filter: blur(8px); transition: transform var(--t) var(--ease), border-color var(--t); }
.stat:hover { border-color: var(--line-2); }
.stat b { display: block; font-size: 2.3rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--dim); font-size: 0.88rem; margin-top: 8px; display: block; }

/* ---------- Portfolio de robots (diversificación) ---------- */
.portfolio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bot-card { border: 1px solid var(--line); border-radius: 13px; background: var(--glass); padding: 16px 16px 12px;
  display: grid; gap: 11px; backdrop-filter: blur(6px); transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t); }
.bot-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.bot-head { display: flex; align-items: center; justify-content: space-between; }
.bot-head .sym { font-weight: 600; font-size: 0.92rem; }
.bot-head .tf { font-family: var(--font-mono); font-size: 0.68rem; color: var(--mute); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
.bot-spark { height: 36px; }
.bot-foot { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; }
.bot-foot .st { display: flex; align-items: center; gap: 7px; color: var(--dim); }
.bot-foot .st .d { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px #3ddc97; animation: pulse 2.2s ease-in-out infinite; }
.bot-foot .strat { color: var(--mute); }

/* ---------- Ventana de código completa ---------- */
.code-window { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(11,17,32,0.92), rgba(5,7,15,0.92)); font-family: var(--font-mono); }
.code-window .cw-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 0.72rem; color: var(--mute); }
.code-window .cw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3a5e; }
.code-window .cw-bar i:nth-child(1){background:#ff5f57;} .code-window .cw-bar i:nth-child(2){background:#febc2e;} .code-window .cw-bar i:nth-child(3){background:#28c840;}
.code-window .cw-bar span { margin-left: auto; }
.code-window pre { margin: 0; padding: 18px 18px; font-size: 0.76rem; line-height: 1.8; overflow-x: auto; color: var(--dim);
  max-height: 460px; }
.code-window .k { color: #7cc3ff; } .code-window .s { color: #8ee6b4; } .code-window .c { color: var(--mute); font-style: italic; }
.code-window .n { color: #c7d2f0; } .code-window .f { color: #b9a7ff; } .code-window .t { color: #ffd391; }

/* ===================================================================
   Demo animado de la plataforma con cursor macOS autónomo
   =================================================================== */
.app-window { position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(13,19,36,0.94), rgba(5,7,15,0.94));
  box-shadow: var(--shadow-lg); backdrop-filter: blur(10px);
  transform: perspective(1700px) rotateX(8deg); transform-origin: center top;
  transition: transform 1.1s var(--ease); }
.hero-preview.in .app-window { transform: perspective(1700px) rotateX(0deg); }
.app-window::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; z-index: 4; pointer-events: none;
  background: linear-gradient(155deg, rgba(91,141,255,0.7), transparent 32%, transparent 66%, rgba(56,189,248,0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.aw-glow { position: absolute; top: -34%; left: 50%; width: 72%; height: 70%; transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow), transparent 64%); filter: blur(46px); pointer-events: none; z-index: 0; }

.aw-bar { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); position: relative; z-index: 1; }
.aw-bar .lights { display: flex; gap: 8px; }
.aw-bar .lights i { width: 11px; height: 11px; border-radius: 50%; }
.aw-bar .lights i:nth-child(1){background:#ff5f57;} .aw-bar .lights i:nth-child(2){background:#febc2e;} .aw-bar .lights i:nth-child(3){background:#28c840;}
.aw-title { font-family: var(--font-mono); font-size: 0.74rem; color: var(--mute); }
.aw-tab { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 11px; background: var(--glass); }

.aw-body { display: grid; grid-template-columns: 1fr 1.18fr; position: relative; z-index: 1; min-height: 366px; }
.aw-panel { padding: 22px; border-right: 1px solid var(--line); display: grid; gap: 11px; align-content: start; }
.demo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--glass); font-size: 0.86rem; transition: border-color var(--t), background var(--t); }
.demo-row.touch { border-color: var(--accent); background: rgba(91,141,255,0.09); }
.demo-row .lbl { color: var(--dim); }
.demo-row .chip { font-family: var(--font-mono); font-size: 0.73rem; color: var(--mute); border: 1px solid var(--line-2);
  border-radius: 7px; padding: 3px 10px; min-width: 86px; text-align: center; transition: all var(--t); }
.demo-row .chip.set { color: #04122e; background: var(--grad); border-color: transparent; font-weight: 600; }
.demo-row .toggle { width: 40px; height: 23px; border-radius: 100px; background: rgba(255,255,255,0.12); position: relative; flex: none; transition: background var(--t); }
.demo-row .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left var(--t) var(--ease); }
.demo-row .toggle.on { background: var(--grad); } .demo-row .toggle.on::after { left: 20px; }
.aw-generate { margin-top: 10px; padding: 13px; border: 0; border-radius: 11px; background: var(--grad); color: #04122e;
  font-weight: 600; font-family: inherit; font-size: 0.9rem; cursor: default; position: relative; overflow: hidden;
  box-shadow: 0 12px 28px -10px var(--glow); transition: transform 0.15s var(--ease); }
.aw-generate.press { transform: scale(0.96); }

.aw-output { display: grid; grid-template-rows: 0.85fr 1.15fr; }
.aw-chart { position: relative; padding: 16px 16px 22px; display: flex; align-items: flex-end; gap: 5px; border-bottom: 1px solid var(--line); }
.aw-chart .candle { width: 8px; border-radius: 2px; opacity: 0; transform: translateY(14px); }
.aw-chart .candle.show { animation: candleIn 0.45s var(--ease) forwards; }
.aw-chart .candle.up { background: linear-gradient(180deg,#3ddc97,#1f9e6b); } .aw-chart .candle.down { background: linear-gradient(180deg,#ff6b6b,#c93f3f); }
.aw-marker { position: absolute; font-family: var(--font-mono); font-size: 0.66rem; padding: 2px 7px; border-radius: 6px;
  background: rgba(61,220,151,0.18); color: #6ff0b6; border: 1px solid rgba(61,220,151,0.45); opacity: 0; transform: translateY(4px); transition: all var(--t); }
.aw-marker.show { opacity: 1; transform: none; }
.aw-code { margin: 0; padding: 16px 18px; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.75; color: var(--dim); overflow: hidden; white-space: pre-wrap; }
.aw-code .k{color:#7cc3ff;} .aw-code .c{color:var(--mute);font-style:italic;} .aw-code .n{color:#c7d2f0;} .aw-code .s{color:#8ee6b4;} .aw-code .f{color:#b9a7ff;} .aw-code .t{color:#ffd391;}
.aw-caret { display: inline-block; width: 7px; background: var(--accent-2); animation: blink 1s steps(1) infinite; color: transparent; }
@keyframes blink { 50% { opacity: 0; } }

/* Cursor macOS falso */
.fake-cursor { position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55)); will-change: transform;
  transition: transform 0.72s cubic-bezier(0.5, 0, 0.2, 1); }
.fake-cursor .ring { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent-2); opacity: 0; }
.fake-cursor.click .ring { animation: clickring 0.55s var(--ease); }
@keyframes clickring { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .fake-cursor { display: none !important; } .app-window { transform: none; } }
@media (max-width: 720px) { .fake-cursor { display: none; } .aw-body { grid-template-columns: 1fr; } .aw-panel { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ===== Sección Mi camino (historia, pasos numerados) ===== */
.story-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; }
.story-step { position: relative; padding: 24px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); backdrop-filter: blur(8px); }
.story-step .ss-n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grad); color: #04122e; font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; box-shadow: 0 8px 20px -8px var(--glow); }
.story-step b { display: block; font-size: 1.02rem; margin-bottom: 6px; letter-spacing: -0.01em; }
.story-step p { color: var(--dim); font-size: 0.88rem; line-height: 1.6; }
.story-step:not(:last-child)::after { content: "→"; position: absolute; top: 36px; right: -12px; color: var(--mute); font-size: 1.1rem; z-index: 2; }
@media (max-width: 820px) { .story-steps { grid-template-columns: 1fr 1fr; } .story-step:not(:last-child)::after { display: none; } }
@media (max-width: 480px) { .story-steps { grid-template-columns: 1fr; } }

/* ===== Sección Transparencia / Compromiso ===== */
.honesty { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 920px; margin: 0 auto; }
.hon-item { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); backdrop-filter: blur(8px); }
.hon-item.no { border-color: rgba(255,110,110,0.2); }
.hon-item.yes { border-color: rgba(61,220,151,0.3); background: linear-gradient(180deg, rgba(61,220,151,0.07), var(--glass)); }
.hon-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; margin-top: 2px; }
.hon-item.no .hon-ic { background: rgba(255,90,90,0.14); color: #ff9a9a; }
.hon-item.yes .hon-ic { background: rgba(61,220,151,0.16); color: #6ff0b6; }
.hon-item b { display: block; font-size: 1.04rem; margin-bottom: 5px; }
.hon-item.yes b { color: #6ff0b6; }
.hon-item p { color: var(--dim); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 680px) { .honesty { grid-template-columns: 1fr; } }

/* "0 chances reales" (lado perdedor de la sección capacitado) en rojo */
#capacitado .vs-side.a .vs-num,
#capacitado .vs-side.a .vs-sub { color: #ff6b6b; }

/* ===== Sección Sin humo (NO / SÍ) ===== */
.no-si { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 0 auto; }
.ns-col { border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; background: var(--glass); backdrop-filter: blur(8px); }
.ns-col.no { border-color: rgba(255,110,110,0.22); background: linear-gradient(180deg, rgba(255,90,90,0.055), var(--glass)); }
.ns-col.si { border-color: rgba(61,220,151,0.26); background: linear-gradient(180deg, rgba(61,220,151,0.06), var(--glass)); }
.ns-tag { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; margin-bottom: 18px; }
.ns-col.no .ns-tag { color: #ff9a9a; }
.ns-col.si .ns-tag { color: #6ff0b6; }
.ns-col ul { list-style: none; display: grid; gap: 13px; }
.ns-col li { position: relative; padding-left: 32px; font-size: 0.96rem; color: var(--dim); line-height: 1.5; }
.ns-col li::before { position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; }
.ns-col.no li::before { content: "✕"; background: rgba(255,90,90,0.14); color: #ff9a9a; }
.ns-col.si li::before { content: "✓"; background: rgba(61,220,151,0.16); color: #6ff0b6; }
@media (max-width: 680px) { .no-si { grid-template-columns: 1fr; } }

/* ===== Borde NEÓN animado: una luz recorre todo el perímetro en bucle ===== */
@property --neon-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.hon-item, .ns-col, .compare-card { position: relative; isolation: isolate; }
.hon-item.no,  .ns-col.no,  .compare-card      { --neon-c: #ff5a5a; --neon-h: #ffe2e2; }
.hon-item.yes, .ns-col.si,  .compare-card.good { --neon-c: #3ddc97; --neon-h: #d8ffec; }
.hon-item::before, .ns-col::before, .compare-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.7px;
  background: conic-gradient(from var(--neon-angle),
    transparent 0deg, transparent 8deg,
    var(--neon-c) 45deg, var(--neon-h) 110deg, var(--neon-c) 170deg,
    transparent 205deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 3;
  filter: drop-shadow(0 0 4px var(--neon-c));
  animation: neon-run 4.5s linear infinite;
}
.ns-col.si::before, .hon-item.yes::before, .compare-card.good::before { animation-duration: 5.2s; }
@keyframes neon-run { to { --neon-angle: 360deg; } }

/* ===== Demo del panel de progreso (puntuación + curva) ===== */
.dash-demo { grid-template-columns: 0.92fr 1.08fr; min-height: 330px; }
.dd-left { padding: 24px; border-right: 1px solid var(--line); display: grid; gap: 18px; align-content: start; }
.dd-right { padding: 24px; display: grid; gap: 12px; align-content: start; }
.dd-score { display: flex; align-items: center; gap: 16px; }
.dd-ring { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative;
  background: conic-gradient(var(--accent-2) calc(var(--p) * 1%), rgba(255,255,255,0.08) 0); }
.dd-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #0a0f1e; }
.dd-ring b { position: relative; font-family: var(--font-mono); font-weight: 700; font-size: 1.25rem; color: var(--text); }
.dd-score-txt b { display: block; font-size: 1.02rem; }
.dd-score-txt span { font-size: 0.82rem; color: var(--mute); }
.dd-checks { display: grid; gap: 9px; }
.dd-chk { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass); font-size: 0.86rem; color: var(--mute); }
.dd-chk .m { font-family: var(--font-mono); font-size: 0.74rem; }
.dd-chk.done { color: var(--text); } .dd-chk.done .m { color: #6ff0b6; }
.dd-chk.prog { color: var(--dim); } .dd-chk.prog .m { color: var(--accent-2); }
.dd-prog { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line); }
.dd-prog-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.86rem; color: var(--dim); }
.dd-prog-top b { font-size: 1.05rem; color: var(--text); }
.dd-bar { height: 8px; border-radius: 100px; background: rgba(255,255,255,0.08); overflow: hidden; }
.dd-bar i { display: block; height: 100%; border-radius: 100px; background: var(--grad); box-shadow: 0 0 12px var(--glow); }
.dd-prog-sub { font-size: 0.78rem; color: var(--mute); }
.dd-rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dd-head { font-family: var(--font-sans); font-weight: 600; font-size: 0.92rem; color: var(--dim); }
.dd-now { font-weight: 700; font-size: 1.45rem; color: #67e8f9; line-height: 1; }
.dd-now i { font-style: normal; font-size: 0.78rem; color: var(--mute); font-weight: 600; }
.dd-plot { display: flex; gap: 10px; align-items: stretch; }
.dd-yax { display: flex; flex-direction: column; justify-content: space-between; height: 154px; font-size: 0.66rem; color: var(--mute); text-align: right; flex: none; }
.dd-chart { flex: 1; height: 154px; display: block; }
.dd-chart .grid { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.dd-chart .area { fill: url(#ddgrad); opacity: 0; animation: ddArea 1s ease forwards 0.7s; }
.dd-chart .line { fill: none; stroke: #5b8dff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: ddDraw 1.7s var(--ease) forwards; filter: drop-shadow(0 4px 10px rgba(91,141,255,0.4)); }
.dd-chart .pt { fill: #38bdf8; opacity: 0; animation: ddPt 0.35s ease forwards; }
@keyframes ddDraw { to { stroke-dashoffset: 0; } }
@keyframes ddArea { to { opacity: 1; } }
@keyframes ddPt { to { opacity: 1; } }
.dd-axis { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 0.7rem; color: var(--mute); }
.dd-cap { font-size: 0.86rem; color: var(--dim); line-height: 1.5; }
.dd-cap b { color: var(--text); }
.dd-note { display: flex; gap: 9px; align-items: center; font-size: 0.86rem; color: var(--mute); border-top: 1px solid var(--line); padding-top: 13px; margin-top: 4px; }
.dd-note svg { color: #6ff0b6; flex: none; }
.dd-note b { color: var(--accent-2); }
@media (max-width: 720px) { .dash-demo { grid-template-columns: 1fr; } .dd-left { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ===== Demo de ofertas (tomar / agregar / entregar) ===== */
/* La ventana de ofertas es SOLO una foto fija: sin cursor ni animación, no responde a clics. */
#offersDemo { pointer-events: none; user-select: none; }
#offersCursor { display: none; }
.od-body { grid-template-columns: 1fr 1fr; min-height: 380px; }
.od-head { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.od-offer, .od-client { border: 1px solid var(--line); border-radius: 13px; background: var(--glass); padding: 14px; display: grid; gap: 10px; position: relative; transition: opacity .5s var(--ease), transform .5s var(--ease), border-color var(--t); }
.od-offer.taken { border-color: rgba(61,220,151,0.4); }
.od-offer.taken .od-name, .od-offer.taken .od-cli b, .od-offer.taken .od-cli span, .od-offer.taken .od-pay { opacity: 0.5; }
.od-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.od-cli { display: flex; align-items: center; gap: 9px; }
.od-av { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #06101f !important; opacity: 1 !important; font-weight: 800; font-size: 0.72rem; display: grid; place-items: center; flex: none; }
.od-offer.taken .od-av, .od-offer.taken .od-cli .od-av { color: #06101f !important; opacity: 1 !important; }
.od-cli b { display: block; font-size: 0.82rem; }
.od-cli span { font-size: 0.68rem; color: var(--mute); font-family: var(--font-mono); }
.od-pay { font-family: var(--font-mono); font-weight: 800; font-size: 1rem; color: #052e18; background: linear-gradient(135deg,#1fe084,#0fb863); padding: 5px 11px; border-radius: 9px; box-shadow: 0 4px 14px rgba(25,217,120,0.3); }
.od-name { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.od-acts { display: flex; gap: 8px; }
.od-btn { flex: 1; border: 0; border-radius: 9px; padding: 9px; font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: default; transition: transform .14s var(--ease), filter .14s; }
.od-btn.acc { background: linear-gradient(135deg,#1fe084,#0fb863); color: #052e18; }
.od-btn.rej { background: transparent; border: 1px solid rgba(255,120,120,0.45); color: #ff9a9a; }
.od-btn.send { background: var(--grad); color: #04122e; width: 100%; }
.od-btn.press { transform: scale(0.94); filter: brightness(1.1); }
.od-taken { display: none; align-items: center; gap: 6px; justify-content: center; font-size: 0.78rem; font-weight: 600; color: #6ff0b6; font-family: var(--font-mono); }
.od-offer.taken .od-acts { display: none; }
.od-offer.taken .od-taken { display: flex; }
.od-pay.sm { font-size: 0.8rem; padding: 3px 8px; border-radius: 7px; box-shadow: none; }
.od-av.sm { width: 28px; height: 28px; font-size: 0.64rem; }
/* Resumen "para cobrar" + contador */
.od-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(25,217,120,0.28); background: linear-gradient(135deg, rgba(25,217,120,0.12), rgba(56,189,248,0.06)); }
.od-sum-l { display: block; font-size: 0.68rem; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.od-sum-v { font-family: var(--font-mono); font-weight: 800; font-size: 1.5rem; color: #2ce98c; line-height: 1.1; text-shadow: 0 0 20px rgba(25,217,120,0.35); }
.od-count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--dim); border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 11px; transition: color var(--t); }
/* Filas compactas de clientes ya entregados */
.od-mini { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--glass); }
.od-mini-i { flex: 1; min-width: 0; }
.od-mini-i b { display: block; font-size: 0.8rem; }
.od-mini-i span { font-size: 0.68rem; color: var(--mute); }
.od-pill { font-family: var(--font-mono); font-size: 0.66rem; padding: 4px 9px; border-radius: 100px; white-space: nowrap; }
.od-pill.ok { background: rgba(25,217,120,0.14); color: #6ff0b6; }
.od-pill.rev { background: rgba(255,160,70,0.16); color: #ffae6b; }
.od-client { opacity: 0; transform: translateY(10px); }
.od-client.show { opacity: 1; transform: none; }
.od-state { font-family: var(--font-mono); font-size: 0.74rem; padding: 6px 11px; border-radius: 100px; align-self: start; background: rgba(255,200,80,0.14); color: #ffce6b; }
.od-state.review { background: rgba(255,160,70,0.16); color: #ffae6b; }
.od-deliver { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid var(--line); transition: opacity .4s; }
.od-deliver.hide { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.od-file { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--dim); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; }
.od-file svg { color: var(--accent-2); }
@media (max-width: 720px) { .od-body { grid-template-columns: 1fr; } }

/* ---------- Explorador de niveles (pestañas interactivas) ---------- */
.levels { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--glass);
  backdrop-filter: blur(12px); overflow: hidden; box-shadow: var(--shadow); }
.levels-tabs { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.ltab { background: none; border: 0; padding: 24px 26px; text-align: left; cursor: pointer; color: var(--dim);
  transition: background var(--t) var(--ease); position: relative; }
.ltab + .ltab::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--line); }
.ltab b { display: block; font-size: 1.1rem; color: var(--text); font-weight: 600; letter-spacing: -0.02em; }
.ltab span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--mute); }
.ltab:hover { background: rgba(255,255,255,0.03); }
.ltab.active b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tab-ind { position: absolute; bottom: 0; left: 0; height: 2px; width: 33.333%; background: var(--grad);
  box-shadow: 0 0 14px var(--glow); transition: transform var(--t) var(--ease); }
.lpanel { display: none; grid-template-columns: 1.05fr 1fr; gap: 44px; padding: 40px; }
.lpanel.active { display: grid; animation: panelIn 0.55s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.lpanel .tag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 13px; margin-bottom: 18px; }
.lpanel h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 14px; }
.lpanel .lead2 { color: var(--dim); font-size: 1.02rem; }
.goal { margin-top: 22px; padding: 16px 18px; border: 1px solid rgba(56,189,248,0.3); border-radius: 13px;
  background: rgba(56,189,248,0.07); font-size: 0.94rem; color: var(--dim); display: flex; gap: 10px; align-items: center; }
.goal svg { flex: none; color: var(--accent-2); }
.goal b { color: var(--accent-2); }
.lpanel .btn { margin-top: 26px; }
.lpanel-modules h5 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-bottom: 20px; }
.mod-list { display: grid; gap: 16px; }
.mod-list li { display: flex; gap: 14px; align-items: flex-start; }
.mod-list .mi { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; color: #04122e; background: var(--grad);
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; box-shadow: 0 6px 16px -8px var(--glow); }
.mod-list b { display: block; font-weight: 600; margin-bottom: 2px; font-size: 0.96rem; }
.mod-list span { color: var(--dim); font-size: 0.88rem; }
.mod-list.inc li { align-items: center; }
.mod-list.inc .mi { width: 24px; height: 24px; border-radius: 7px; }
/* Precio del plan */
.lpanel .price { font-size: 3.1rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 2px 0 12px;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Aparición escalonada de la lista (vivo) */
.lpanel.active .mod-list li { opacity: 0; animation: panelIn 0.5s var(--ease) forwards; }
.lpanel.active .mod-list li:nth-child(1){animation-delay:.04s} .lpanel.active .mod-list li:nth-child(2){animation-delay:.09s}
.lpanel.active .mod-list li:nth-child(3){animation-delay:.14s} .lpanel.active .mod-list li:nth-child(4){animation-delay:.19s}
.lpanel.active .mod-list li:nth-child(5){animation-delay:.24s} .lpanel.active .mod-list li:nth-child(6){animation-delay:.29s}
.lpanel.active .mod-list li:nth-child(7){animation-delay:.34s} .lpanel.active .mod-list li:nth-child(8){animation-delay:.39s}
.lpanel.active .mod-list li:nth-child(9){animation-delay:.44s} .lpanel.active .mod-list li:nth-child(10){animation-delay:.49s}
.lpanel.active .mod-list li:nth-child(11){animation-delay:.54s} .lpanel.active .mod-list li:nth-child(12){animation-delay:.59s}

/* ===== Color distinto por nivel ===== */
/* Nivel 1 — cian · Nivel 2 — violeta/azul · Nivel 3 — dorado (premium) */
.lpanel[data-level="1"] .price { background: linear-gradient(135deg,#38bdf8,#67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lpanel[data-level="2"] .price { background: linear-gradient(135deg,#7c8dff,#a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lpanel[data-level="3"] .price { background: linear-gradient(135deg,#f5c45e,#f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lpanel[data-level="1"] .tag { color: #67e8f9; border-color: rgba(56,189,248,0.4); }
.lpanel[data-level="2"] .tag { color: #a78bfa; border-color: rgba(124,92,255,0.4); }
.lpanel[data-level="3"] .tag { color: #f5c45e; border-color: rgba(245,196,94,0.4); }

.lpanel[data-level="1"] .mod-list .mi { background: linear-gradient(135deg,#38bdf8,#22d3ee); color: #042a33; }
.lpanel[data-level="2"] .mod-list .mi { background: linear-gradient(135deg,#5b8dff,#7c5cff); color: #0a1030; }
.lpanel[data-level="3"] .mod-list .mi { background: linear-gradient(135deg,#f5c45e,#f59e0b); color: #3a2600; }

.lpanel[data-level="1"] .goal { border-color: rgba(56,189,248,0.35); background: rgba(56,189,248,0.07); }
.lpanel[data-level="1"] .goal b, .lpanel[data-level="1"] .goal svg { color: #67e8f9; }
.lpanel[data-level="2"] .goal { border-color: rgba(124,92,255,0.35); background: rgba(124,92,255,0.07); }
.lpanel[data-level="2"] .goal b, .lpanel[data-level="2"] .goal svg { color: #a78bfa; }
.lpanel[data-level="3"] .goal { border-color: rgba(245,196,94,0.35); background: rgba(245,196,94,0.07); }
.lpanel[data-level="3"] .goal b, .lpanel[data-level="3"] .goal svg { color: #f5c45e; }

.lpanel[data-level="1"] .btn-primary { background: linear-gradient(135deg,#38bdf8,#22d3ee); color: #042a33; }
.lpanel[data-level="2"] .btn-primary { background: linear-gradient(135deg,#5b8dff,#7c5cff); color: #fff; }
.lpanel[data-level="3"] .btn-primary { background: linear-gradient(135deg,#f5c45e,#f59e0b); color: #3a2600; }

/* Etiquetas de pestaña SIEMPRE con su color (las 3 visibles a la vez) */
.ltab[data-level="1"] b { color: #38bdf8; }
.ltab[data-level="2"] b { color: #a78bfa; }
.ltab[data-level="3"] b { color: #f5c45e; }
.ltab[data-level="1"].active { background: rgba(56,189,248,0.09); }
.ltab[data-level="2"].active { background: rgba(124,92,255,0.10); }
.ltab[data-level="3"].active { background: rgba(245,196,94,0.10); }
.ltab[data-level="1"].active b { background: linear-gradient(135deg,#38bdf8,#67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ltab[data-level="2"].active b { background: linear-gradient(135deg,#7c8dff,#a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ltab[data-level="3"].active b { background: linear-gradient(135deg,#f5c45e,#f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Acento de color en el panel activo según el nivel */
.lpanel.active { position: relative; }
.lpanel.active::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.lpanel[data-level="1"].active::before { background: linear-gradient(90deg,#38bdf8,#67e8f9); }
.lpanel[data-level="2"].active::before { background: linear-gradient(90deg,#7c8dff,#a78bfa); }
.lpanel[data-level="3"].active::before { background: linear-gradient(90deg,#f5c45e,#f59e0b); }

/* ---------- Flujo "Cómo funciona" (premium) ---------- */
.flow { position: relative; margin: 52px 0 46px; }
.flow-line { position: absolute; top: 42px; left: 10%; right: 10%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #7c5cff, #5b8dff, #38bdf8); opacity: 0.32; }
.flow-line::after { content: ""; position: absolute; top: -2px; left: 0; width: 120px; height: 7px; border-radius: 7px;
  background: linear-gradient(90deg, transparent, #fff, transparent); filter: blur(1px); box-shadow: 0 0 18px var(--accent-2);
  animation: travel 5s var(--ease) infinite; }
.flow-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.fstep { text-align: center; position: relative; z-index: 1; }
.fstep .ico { width: 86px; height: 86px; margin: 0 auto 18px; border-radius: 26px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(13,19,36,0.94), rgba(5,7,15,0.94)); border: 1px solid var(--line-2);
  color: var(--accent-2); position: relative; box-shadow: var(--shadow); animation: floaty 5s var(--ease) infinite; }
.fstep:nth-child(2) .ico{animation-delay:.4s} .fstep:nth-child(3) .ico{animation-delay:.8s} .fstep:nth-child(4) .ico{animation-delay:1.2s} .fstep:nth-child(5) .ico{animation-delay:1.6s}
.fstep .ico::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(160deg, var(--accent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fstep .ico .num { position: absolute; top: -9px; right: -9px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad); color: #04122e; font-weight: 700; font-size: 0.84rem; display: grid; place-items: center; box-shadow: 0 6px 16px -6px var(--glow); }
.fstep h4 { font-size: 1.12rem; margin-bottom: 7px; }
.fstep p { color: var(--dim); font-size: 0.92rem; }
.fstep:hover .ico { transform: translateY(-6px) scale(1.04); }
.fstep .ico { transition: transform var(--t) var(--ease), box-shadow var(--t); }

/* 4 pasos · un color por proceso */
.flow-steps { grid-template-columns: repeat(4, 1fr); }
.flow-line { left: 12%; right: 12%; }
.fstep:nth-child(1) .ico { color: #38bdf8; }
.fstep:nth-child(1) .ico .num { background: linear-gradient(135deg,#38bdf8,#67e8f9); }
.fstep:nth-child(1) .ico::before { background: linear-gradient(160deg,#38bdf8,transparent 60%); }
.fstep:nth-child(2) .ico { color: #7c8dff; }
.fstep:nth-child(2) .ico .num { background: linear-gradient(135deg,#5b8dff,#7c5cff); }
.fstep:nth-child(2) .ico::before { background: linear-gradient(160deg,#7c8dff,transparent 60%); }
.fstep:nth-child(4) .ico { color: #3ddc97; }
.fstep:nth-child(4) .ico .num { background: linear-gradient(135deg,#3ddc97,#22c55e); color: #04231a; }
.fstep:nth-child(4) .ico::before { background: linear-gradient(160deg,#3ddc97,transparent 60%); }

/* Paso "objetivo" destacado (dorado, con pulso premium) */
.goalstep { position: relative; }
.goalstep .step-flag { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: #3a2600;
  background: linear-gradient(135deg,#f5c45e,#f59e0b); border-radius: 100px; padding: 5px 12px;
  box-shadow: 0 8px 20px -8px rgba(245,196,94,0.55); }
.goalstep .ico { color: #f5c45e; box-shadow: 0 0 42px -6px rgba(245,196,94,0.5), var(--shadow); animation: goalpulse 2.6s ease-in-out infinite; }
.goalstep .ico .num { background: linear-gradient(135deg,#f5c45e,#f59e0b); color: #3a2600; }
.goalstep .ico::before { background: linear-gradient(160deg,#f5c45e,transparent 55%); }
.goalstep h4 { color: #f5c45e; }
@keyframes goalpulse { 50% { box-shadow: 0 0 60px -2px rgba(245,196,94,0.7), var(--shadow); transform: scale(1.03); } }

/* Gráfico de evolución */
.growth { border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(13,19,36,0.7), rgba(5,7,15,0.55)); backdrop-filter: blur(8px); padding: 26px 30px 22px; overflow: hidden; }
.growth-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.growth-head h3 { font-size: 1.18rem; }
.growth-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 12px; }
.growth-chart svg { width: 100%; height: auto; display: block; }
.growth-axis { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.growth-axis span { font-family: var(--font-mono); font-size: 0.74rem; color: var(--mute); text-align: center; }

@media (max-width: 820px) {
  .flow-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .flow-line { display: none; }
  .growth-axis { grid-template-columns: repeat(4, 1fr); }
  .growth-axis span { font-size: 0.64rem; }
}

/* ---------- Camino (journey) con movimiento ---------- */
.journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin: 58px 0 50px; }
.journey-line { position: absolute; top: 35px; left: 9%; right: 9%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0.28; }
.journey-line::after { content: ""; position: absolute; top: -1px; left: 0; width: 130px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--accent-2), #fff, var(--accent-2), transparent); filter: blur(0.5px);
  box-shadow: 0 0 14px var(--accent-2); animation: travel 4.5s var(--ease) infinite; }
@keyframes travel { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; }
  100% { transform: translateX(calc(100% - 130px)); opacity: 0; } }
.jstep { text-align: center; position: relative; z-index: 1; }
.jnode { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 20px; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; color: var(--accent-2);
  background: var(--panel); border: 1px solid var(--line-2); position: relative; backdrop-filter: blur(8px);
  animation: floaty 5s var(--ease) infinite; }
.jstep:nth-child(2) .jnode { animation-delay: .4s; } .jstep:nth-child(3) .jnode { animation-delay: .8s; } .jstep:nth-child(4) .jnode { animation-delay: 1.2s; }
.jnode::before { content: ""; position: absolute; inset: -7px; border-radius: 26px; border: 1px solid var(--accent); opacity: 0; animation: ring 3s ease-out infinite; }
.jstep:nth-child(2) .jnode::before { animation-delay: .75s; } .jstep:nth-child(3) .jnode::before { animation-delay: 1.5s; } .jstep:nth-child(4) .jnode::before { animation-delay: 2.25s; }
@keyframes ring { 0% { transform: scale(0.92); opacity: 0.7; } 100% { transform: scale(1.32); opacity: 0; } }
.jstep.dest .jnode { background: var(--grad); color: #04122e; box-shadow: 0 0 46px var(--glow); border-color: transparent; }
.jstep .lbl { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: 7px; }
.jstep h4 { font-size: 1.02rem; margin-bottom: 6px; font-weight: 600; }
.jstep p { color: var(--dim); font-size: 0.87rem; }

/* Salidas / outcomes */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.outcome { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass);
  padding: 32px; backdrop-filter: blur(8px); overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t); }
.outcome::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px 180px at 50% 0%, var(--glow), transparent 70%); opacity: 0; transition: opacity var(--t); }
.outcome:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.outcome:hover::before { opacity: 1; }
.outcome .icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px; color: #04122e; background: var(--grad); box-shadow: 0 10px 26px -10px var(--glow); }
.outcome h3 { font-size: 1.18rem; margin-bottom: 9px; }
.outcome p { color: var(--dim); font-size: 0.94rem; }

/* ---------- Revelado ---------- */
.reveal { opacity: 0; transform: translateY(34px); filter: blur(8px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  /* No congelamos las animaciones de marca (robot, curva de aprendizaje, etc.):
     se ven igual aunque el sistema pida menos movimiento. Solo garantizamos que
     el contenido que aparece animado quede SIEMPRE visible. */
  .reveal { opacity: 1; transform: none; filter: none; }
  .dd-chart .line { stroke-dashoffset: 0; }
  .dd-chart .area, .dd-chart .pt { opacity: 1; }
  .rs-listo, .rs-cd { opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .portfolio { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }

  /* ---------- EL MENÚ DESPLEGADO ----------
     Todo centrado y del mismo ancho: las secciones alineadas con
     "Empezar ahora" y "Acceso alumnos".

     Antes esto se armaba con estilos escritos a mano desde el
     JavaScript, con `align-items: stretch`. Las secciones quedaban
     pegadas a la izquierda y los botones ocupaban todo el ancho: dos
     alineaciones distintas en la misma lista, y se veía torcido. */
  .nav-links.abierto {
    display: flex; position: absolute; top: 100%; right: 16px; left: 16px;
    flex-direction: column; align-items: stretch; text-align: center;
    gap: 12px; padding: 18px;
    background: rgba(5,7,15,0.96); border: 1px solid var(--line);
    border-radius: 16px; backdrop-filter: blur(16px);
  }
  /* Cada nombre ocupa toda la fila, así el área que se toca es la fila
     entera y no solo las letras. */
  .nav-links.abierto a { display: block; width: 100%; padding: 10px 12px; }
  .nav-links.abierto a:not(.btn)::after { display: none; }
  .nav-links.abierto .btn-nav { justify-content: center; padding: 12px 18px; }
  .grid-3, .grid-2, .plans { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .showcase-grid { grid-template-columns: 1fr; gap: 36px; }
  .showcase-grid.reverse .showcase-text { order: 0; }
  .mock { grid-template-columns: 1fr; } .mock-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .footer-legal { flex-direction: column; }
}

/* ---------- Ventanita de la historia (arriba del hero) ---------- */
.story-video { display: flex; align-items: center; gap: 26px; max-width: 780px;
  margin: 0 auto 38px; padding: 20px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--glass); backdrop-filter: blur(10px); box-shadow: var(--shadow);
  text-align: left; position: relative; }
.story-video::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  pointer-events: none; background: linear-gradient(140deg, rgba(91,141,255,0.55), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }

/* Portada: botón con la miniatura + play. Ancho cómodo para que, al abrirse,
   el reproductor de YouTube tenga lugar y no apile su título sobre el video. */
.sv-frame { flex: none; width: 330px; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; display: block;
  position: relative; transition: box-shadow var(--t), border-color var(--t); }
/* La miniatura se muestra tal cual, sin filtros ni zoom: igual que en YouTube. */
.sv-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-frame:hover { border-color: var(--line-2); }
/* Botón de play igual al de YouTube (rojo, rectángulo redondeado) */
.sv-btn { position: absolute; inset: 0; margin: auto; width: 62px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; background: rgba(33,33,33,0.8);
  transition: background var(--t); }
.sv-frame:hover .sv-btn, .sv-frame:focus-visible .sv-btn { background: #f00; }
.sv-iframe { flex: none; width: 330px; aspect-ratio: 16 / 9; border: 0; border-radius: 12px;
  background: #000; display: block; }

.sv-text { min-width: 0; }
.sv-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 10px; }
.sv-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.18); animation: pulse 2.4s ease-in-out infinite; }
.story-video h2 { font-size: 1.06rem; font-weight: 600; line-height: 1.42; letter-spacing: -0.01em;
  margin: 0 0 8px; color: var(--text); }
.story-video p { font-size: 0.9rem; color: var(--dim); margin: 0; line-height: 1.5; }

@media (max-width: 760px) {
  .story-video { flex-direction: column; gap: 16px; text-align: center; max-width: 460px;
    padding: 16px; margin-bottom: 30px; }
  .sv-frame, .sv-iframe { width: 100%; }
  .sv-tag { justify-content: center; }
  .story-video h2 { font-size: 1rem; }
}

/* ---------- Logos de las IA (ChatGPT + Claude) en el callout ---------- */
/* Las dos tarjetas orbitan uma alrededor de la otra, sin parar: una pasa por
   delante mientras la otra pasa por detras, y vuelven a cruzarse. Es UNA sola
   animacion; la segunda tarjeta la corre con medio ciclo de diferencia, asi el
   movimiento nunca se corta ni se desincroniza. */
.ai-logos { flex: none; position: relative; width: 100px; height: 72px; }
.ai-card { position: absolute; top: 3px; left: 0; width: 64px; height: 64px;
  border-radius: 18px; display: grid; place-items: center; background: #fff;
  box-shadow: 0 14px 32px -12px rgba(0,0,0,0.75); will-change: transform;
  animation: aiOrbita 6s linear infinite; }
.ai-card.claude { color: #D97757; animation-delay: 0s; }
.ai-card.gpt    { color: #000;    animation-delay: -3s; }   /* medio ciclo atras */

@keyframes aiOrbita {
  0%   { transform: translate(0, 0)        scale(1)    rotate(-7deg); z-index: 3; }
  12%  { transform: translate(9px, 3px)    scale(0.99) rotate(-4deg); z-index: 3; }
  25%  { transform: translate(18px, 5px)   scale(0.96) rotate(0deg);  z-index: 3; }
  38%  { transform: translate(27px, 3px)   scale(0.92) rotate(4deg);  z-index: 3; }
  50%  { transform: translate(36px, 0)     scale(0.88) rotate(7deg);  z-index: 1; }
  62%  { transform: translate(27px, -3px)  scale(0.90) rotate(4deg);  z-index: 1; }
  75%  { transform: translate(18px, -5px)  scale(0.93) rotate(0deg);  z-index: 1; }
  88%  { transform: translate(9px, -3px)   scale(0.97) rotate(-4deg); z-index: 1; }
  100% { transform: translate(0, 0)        scale(1)    rotate(-7deg); z-index: 3; }
}

/* Se frena solo si apuntás a las tarjetas, para poder mirarlas.
   ANTES decia `.callout:hover`, o sea TODO el bloque: en la computadora
   bastaba con dejar el cursor apoyado en cualquier parte del recuadro para
   que se congelaran, y parecia que la animacion no funcionaba. En el celular
   no pasaba porque no hay mouse. */
.ai-logos:hover .ai-card { animation-play-state: paused; }
/* Si el visitante pidio menos movimiento, se quedan quietas. */
@media (prefers-reduced-motion: reduce) {
  .ai-card { animation: none; }
  .ai-card.gpt { transform: translateX(36px) rotate(7deg) scale(0.9); z-index: 1; }
  .ai-card.claude { transform: rotate(-7deg); z-index: 3; }
}
@media (max-width: 620px) {
  .ai-logos { width: 92px; height: 64px; }
  .ai-card { width: 56px; height: 56px; border-radius: 15px; }
  .ai-card svg { width: 22px; height: 22px; }
}

/* ---------- Sin mentoría vs Con mentoría ---------- */
.mystory { max-width: 820px; margin: 0 auto 34px; }
.ms-quote { position: relative; padding: 28px 30px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: blur(8px);
  border-left: 3px solid var(--accent); }
.ms-quote svg { color: var(--accent); opacity: 0.5; margin-bottom: 10px; }
.ms-quote p { font-size: 1.06rem; line-height: 1.68; color: var(--dim); margin: 0; }
.ms-quote b { color: var(--text); }
.ms-firma { display: block; margin-top: 14px; font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--mute); }
.ms-cierre { text-align: center; margin: 22px auto 0; max-width: 660px;
  font-size: 1rem; color: var(--dim); line-height: 1.6; }
.ms-cierre b { color: var(--text); }

.vs-table { display: grid; grid-template-columns: 0.85fr 1.1fr 1.1fr;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
  background: var(--glass); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.vs-table > div { padding: 17px 20px; border-bottom: 1px solid rgba(255,255,255,0.055);
  font-size: 0.93rem; line-height: 1.55; }
.vs-table > div:nth-last-child(-n+3) { border-bottom: 0; }
.vs-head { font-weight: 600; font-size: 0.95rem !important; display: flex;
  align-items: center; gap: 9px; flex-wrap: wrap;
  padding-top: 20px !important; padding-bottom: 20px !important;
  border-bottom: 1px solid var(--line-2) !important; }
.vs-h0 { color: var(--mute); }
.vs-h1 { border-top: 3px solid rgba(255,107,107,0.7); background: rgba(255,107,107,0.05); }
.vs-h2 { border-top: 3px solid #3ddc97; background: rgba(61,220,151,0.06); }
.vs-tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 100px; }
.vs-tag.no { background: rgba(255,107,107,0.16); color: #ff9a9a; }
.vs-tag.si { background: rgba(61,220,151,0.18); color: #6ff0b6; }
.vs-k { font-weight: 600; color: var(--text); }
.vs-a { color: var(--dim); background: rgba(255,107,107,0.04); }
.vs-b { color: var(--dim); background: rgba(61,220,151,0.05); }
.vs-b b { color: var(--text); }
.vs-a::before, .vs-b::before { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 9px; vertical-align: middle; }
.vs-a::before { background: #ff6b6b; }
.vs-b::before { background: #3ddc97; }

.vs-final { max-width: 780px; margin: 26px auto 0; padding: 20px 24px; border-radius: var(--r);
  border: 1px solid rgba(56,189,248,0.22); background: rgba(56,189,248,0.06); }
.vs-final p { margin: 0; font-size: 0.98rem; line-height: 1.65; color: var(--dim); }
.vs-final b { color: var(--text); }

@media (max-width: 820px) {
  .vs-table { grid-template-columns: 1fr; border-radius: var(--r); }
  .vs-table .vs-h0 { display: none; }
  .vs-head { border-top: 0 !important; }
  .vs-k { background: rgba(255,255,255,0.04); font-size: 0.86rem !important;
    text-transform: uppercase; letter-spacing: 0.06em; padding-top: 20px !important; }
  .vs-h1, .vs-h2 { justify-content: center; }
  .ms-quote { padding: 24px 22px; }
  .ms-quote p { font-size: 1rem; }
}

/* ---------- Los tres caminos posibles ---------- */
/* Encabezado interno: grande y con lineas a los costados, no un gris perdido */
.cam3-titulo { display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 40px 0 22px; font-size: 1.24rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text); text-align: center; }
.cam3-titulo::before, .cam3-titulo::after { content: ""; height: 1px; flex: 1; max-width: 90px;
  background: linear-gradient(90deg, transparent, rgba(91,141,255,0.6)); }
.cam3-titulo::after { background: linear-gradient(90deg, rgba(91,141,255,0.6), transparent); }
.cam3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.cam { position: relative; padding: 26px 22px 24px; border-radius: var(--r); text-align: center;
  border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: blur(8px);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.cam:hover { transform: translateY(-4px); border-color: rgba(91,141,255,0.45); }
.cam-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  margin-bottom: 14px; color: var(--accent-2); background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.25); }
.cam b { display: block; font-size: 1.06rem; letter-spacing: -0.015em; margin-bottom: 8px; }
.cam span:not(.cam-ico):not(.cam-chip) { font-size: 0.89rem; line-height: 1.55; color: var(--dim); }

/* El tercero, el que combina los dos anteriores */
.cam.destacado { border-color: rgba(91,141,255,0.5);
  background: linear-gradient(165deg, rgba(91,141,255,0.14), rgba(124,92,255,0.05));
  box-shadow: 0 22px 54px -30px var(--glow); }
.cam.destacado .cam-ico { color: #04122e; background: var(--grad); border-color: transparent;
  box-shadow: 0 12px 28px -12px var(--glow); }
.cam-chip { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 100px; white-space: nowrap;
  background: var(--grad); color: #04122e; font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }

.cam3-pie { text-align: center; max-width: 680px; margin: 24px auto 0; color: var(--dim);
  font-size: 1rem; line-height: 1.6; }
.cam3-pie b { color: var(--text); }

@media (max-width: 860px) {
  .cam3 { grid-template-columns: 1fr; }
  .cam.destacado { margin-top: 12px; }
}

/* Las dos flechas del camino combinado giran sin parar: el bucle se ve */
.cam-loop { animation: camGira 7s linear infinite; transform-origin: 50% 50%; }
@keyframes camGira { to { transform: rotate(360deg); } }
.cam.destacado:hover .cam-loop { animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) { .cam-loop { animation: none; } }

/* =====================================================================
   STORY SCROLL · la página se va contando mientras bajás
   ===================================================================== */

/* --- Títulos: cada palabra entra por su cuenta --- */
/* El título entra entero: se desvanece hacia arriba sin que el texto se toque.
   ANTES se partía en palabras y se animaba una por una; eso rompía los
   títulos que llevan una parte en color (pegaba palabras y dejaba el punto
   final suelto). Un efecto no vale un texto mal escrito. */
.titulo-anim { opacity: 0; transform: translateY(0.42em); filter: blur(7px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); }
.titulo-anim.in { opacity: 1; transform: none; filter: none; }

/* --- Grillas: las tarjetas se encienden de a una --- */
.cascada .casc-item { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(5px);
  transition: opacity 0.66s var(--ease-out), transform 0.66s var(--ease-out), filter 0.66s var(--ease-out); }
.cascada.in .casc-item { opacity: 1; transform: none; filter: none; }

/* Las filas de la tabla comparativa entran desde su lado */
.vs-table.cascada .casc-item { transform: translateY(18px); filter: none; }
.vs-table.cascada .vs-a { transform: translate(-14px, 10px); }
.vs-table.cascada .vs-b { transform: translate(14px, 10px); }
.vs-table.cascada.in .casc-item { transform: none; }

/* Los pasos de la historia entran desde la izquierda, como una línea de tiempo */
.story-steps.cascada .casc-item { transform: translateX(-24px); }
.story-steps.cascada.in .casc-item { transform: none; }

/* Si el sistema pide menos movimiento, se muestra todo sin animar */
.sin-anim .reveal,
.sin-anim .titulo-anim,
.sin-anim .cascada .casc-item { opacity: 1 !important; transform: none !important; filter: none !important; }

/* Etiqueta para las capturas de la plataforma: son ilustrativas, no datos reales */
.es-demo { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 100px;
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; vertical-align: middle;
  color: #ffce6b; background: rgba(255,200,80,0.14); border: 1px solid rgba(255,200,80,0.3); }

/* ---------- Qué pasa en la llamada ---------- */
.llamada { display: flex; align-items: flex-start; gap: 16px; max-width: 720px;
  margin: 26px auto 0; padding: 20px 24px; border-radius: var(--r);
  border: 1px solid rgba(91,141,255,0.3); background: rgba(91,141,255,0.08); }
.llamada-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; color: #04122e; background: var(--grad);
  box-shadow: 0 10px 24px -10px var(--glow); }
.llamada b { display: block; font-size: 1.02rem; margin-bottom: 5px; }
.llamada p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--dim); }
@media (max-width: 560px) { .llamada { flex-direction: column; gap: 12px; padding: 18px 20px; } }

/* ---------- Ingreso de alumnos dentro de la web ---------- */
.acceso-modal { position: fixed; inset: 0; z-index: 900; display: none; place-items: center;
  padding: 24px; background:
    radial-gradient(60% 55% at 50% 12%, rgba(91,141,255,0.20), transparent 70%),
    radial-gradient(50% 45% at 82% 88%, rgba(124,92,255,0.16), transparent 70%),
    rgba(3, 5, 12, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: accesoFondo 0.35s var(--ease); }
.acceso-modal.on { display: grid; }
@keyframes accesoFondo { from { opacity: 0; } }

.acceso-card { position: relative; width: 100%; max-width: 430px; padding: 40px 36px 30px;
  border-radius: var(--r-lg); overflow: hidden; text-align: left;
  background: linear-gradient(168deg, rgba(18,26,48,0.96), rgba(8,12,24,0.98));
  box-shadow: 0 50px 120px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.06);
  animation: accesoEntra 0.42s var(--ease); }
@keyframes accesoEntra { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.acceso-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.3px; pointer-events: none;
  background: linear-gradient(150deg, rgba(91,141,255,0.85), rgba(56,189,248,0.35) 32%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.acceso-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 220px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,141,255,0.5), transparent 68%); filter: blur(30px); }
.acceso-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--mute); cursor: pointer; transition: all var(--t); z-index: 2; }
.acceso-close:hover { background: rgba(255,255,255,0.07); border-color: var(--line);
  color: var(--text); transform: rotate(90deg); }
.acceso-top { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.acceso-mark { flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px -10px var(--glow); }
/* El sello del acceso. Antes era una pastillita celeste que pasaba
   desapercibida; ahora se lee de entrada: mayusculas, letra ancha y el fondo
   fuerte de la marca. Es lo primero que tiene que quedar claro al abrir el
   modal: esto no es para cualquiera. */
.acceso-sello { display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 17px; border-radius: 100px; background: var(--grad); color: #04122e;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase;
  box-shadow: 0 10px 26px -10px var(--glow); white-space: nowrap; }
.acceso-sello svg { flex: none; opacity: 0.85; }

@media (max-width: 380px) {
  .acceso-sello { font-size: 0.68rem; letter-spacing: 0.12em; padding: 8px 13px; }
}
.acceso-title { position: relative; font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.03em;
  margin-bottom: 10px; background: var(--grad-text); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.acceso-sub { position: relative; color: var(--dim); font-size: 0.95rem; line-height: 1.6;
  margin-bottom: 26px; }
.acceso-sub b { color: var(--text); font-weight: 600; }
.acceso-field { position: relative; display: flex; align-items: center; }
.acceso-ico { position: absolute; left: 16px; color: var(--mute); pointer-events: none;
  transition: color var(--t); }
.acceso-field input { width: 100%; padding: 15px 16px 15px 44px; font-size: 0.98rem;
  color: var(--text); border-radius: 13px; border: 1px solid var(--line-2);
  background: rgba(0,0,0,0.35); transition: border-color var(--t), box-shadow var(--t), background var(--t); }
.acceso-field input::placeholder { color: #6f7c99; }
.acceso-field input:focus { outline: 0; border-color: var(--accent);
  background: rgba(0,0,0,0.5); box-shadow: 0 0 0 4px rgba(91,141,255,0.16); }
.acceso-field:focus-within .acceso-ico { color: var(--accent-2); }
.acceso-btn { width: 100%; margin-top: 12px; padding: 15px 20px; border: 0; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
  font-family: inherit; font-size: 0.98rem; font-weight: 600; color: #04122e;
  background: var(--grad); box-shadow: 0 14px 32px -12px var(--glow);
  transition: transform var(--t), box-shadow var(--t), filter var(--t); }
.acceso-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -12px var(--glow); filter: brightness(1.06); }
.acceso-btn:active { transform: translateY(0); }
.acceso-btn:disabled { opacity: 0.75; cursor: default; transform: none; }
.acceso-btn-ico { transition: transform var(--t); }
.acceso-btn:hover .acceso-btn-ico { transform: translateX(3px); }
.acceso-btn.cargando .acceso-btn-ico { display: none; }
.acceso-btn.cargando::after { content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(4,18,46,0.35); border-top-color: #04122e; animation: accesoGira 0.7s linear infinite; }
@keyframes accesoGira { to { transform: rotate(360deg); } }
.acceso-msg { margin-top: 14px; font-size: 0.88rem; line-height: 1.5; min-height: 20px;
  color: var(--dim); text-align: center; }
.acceso-msg.ok { color: var(--accent-2); }
.acceso-msg.err { color: #ff9a9a; }
.acceso-pie { display: flex; align-items: flex-start; gap: 9px; margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line); font-size: 0.8rem; line-height: 1.5; color: var(--mute); }
.acceso-pie svg { flex: none; margin-top: 2px; color: var(--accent-2); opacity: 0.8; }
@media (max-width: 480px) {
  .acceso-card { padding: 34px 24px 26px; }
  .acceso-title { font-size: 1.4rem; }
}

/* =====================================================================
   RENDIMIENTO — que la web vaya fluida en celular

   La pagina tiene mas de 40 animaciones en bucle. El navegador las
   recalculaba TODAS en cada cuadro, tambien las de secciones que el
   visitante no estaba mirando. Sumado a los 30 desenfoques en vivo
   (backdrop-filter) sobre un fondo que se mueve, el resultado era
   scroll trabado y bateria que se va.

   Acá se corrige en tres frentes: congelar lo que no se ve, hacer que
   el fondo cueste barato, y apagar en el celular lo que ahi no se nota
   pero es lo mas caro de dibujar.
   ===================================================================== */

/* --- 1. Lo que no se ve, no se anima -------------------------------
   La seccion queda EN PAUSA, no reiniciada: al volver sigue donde estaba. */
.dormida,
.dormida *,
.pausa-total * { animation-play-state: paused !important; }

/* --- 2. El fondo aurora, barato -------------------------------------
   Las manchas son circulos enormes con desenfoque de 90px. Animarles la
   ESCALA obliga al navegador a volver a calcular todo ese desenfoque en
   cada cuadro. Moviendolas solamente (sin escalar) el trabajo lo hace la
   placa de video y practicamente no cuesta nada. Se ve igual. */
.aurora .blob { will-change: transform; transform: translateZ(0); }
@keyframes float1 { to { transform: translate3d(-12vw, 12vh, 0); } }
@keyframes float2 { to { transform: translate3d(12vw, -10vh, 0); } }
@keyframes float3 { to { transform: translate3d(-10vw, -10vh, 0); } }

/* --- 3. En celular, lo mas caro se apaga ---------------------------- */
@media (max-width: 820px) {
  /* El desenfoque en vivo es lo mas caro que existe en CSS y en un celular
     casi no se percibe. Se cambia por un fondo solido del mismo color: se
     ve practicamente igual y el scroll pasa a ser fluido. */
  .nav, .primer, .plan-card, .rm-card, .stat, .story-step, .ns-col,
  .hon-item, .gloss-item, .compare-card, .ladder-card, .btn-ghost,
  .cam, .acceso-card, .app-window {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Las manchas del fondo: menos desenfoque y sin mezcla de color.
     Son las dos operaciones que mas trabajo le dan a un telefono. */
  .aurora .blob { filter: blur(60px); mix-blend-mode: normal; opacity: 0.4; }
  /* Dos manchas alcanzan para el efecto; cuatro es gasto puro. */
  .blob.b3, .blob.b4 { display: none; }
}

/* --- 4. Si el visitante pidio menos movimiento, no se anima nada ----- */
@media (prefers-reduced-motion: reduce) {
  .aurora .blob { animation: none !important; }
}

/* ---------- Agenda pausada ----------
   Cuando el sistema de agendas no funciona, los botones quedan visibles
   pero apagados. Peor que no poder agendar es agendar y que no ande. */
.agenda-off { opacity: 0.45; cursor: not-allowed !important; filter: grayscale(0.7);
  pointer-events: none; }
.agenda-aviso { max-width: 32rem; margin: var(--sp-2) auto 0; text-align: center;
  padding: 11px 16px; border-radius: 12px; font-size: 0.86rem; line-height: 1.5;
  color: #ffce9b; border: 1px solid rgba(255,160,70,0.32);
  background: rgba(255,160,70,0.09); }