/* =======================================================================
   IDENTIDAD VISUAL DEL MARKETPLACE = la de la academia.
   Misma paleta (rojo -> naranja -> dorado sobre #05060c), mismas tipografias
   (Manrope para titulos y Space Grotesk para texto) y misma cabecera de
   cristal. Los nombres antiguos (--oro, --azul...) se conservan porque los
   usan las paginas; ahora apuntan a los colores de la academia.
   Fuente de verdad de la identidad: `web/public-site/styles.css`.
   ======================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");

:root{
  /* --- paleta de la academia --- */
  --bg:#05060c; --linea:#ffffff1c; --acento:#ff3d2e; --acento2:#ff7a18; --acento3:#ffb800;
  --titulo:"Manrope","Segoe UI",sans-serif; --texto-fuente:"Space Grotesk","Segoe UI",sans-serif;
  /* --- nombres del marketplace (apuntan a la paleta de arriba) --- */
  --fondo:var(--bg); --fondo2:#0a0d18; --panel:#0c0f1c; --panel2:#151b2c;
  --borde:var(--linea); --borde2:#ffffff2e;
  --oro:var(--acento2); --oro2:var(--acento3);
  --azul:#3d8bfd; --verde:#2bffa0; --rojo:#ff4d6d;
  --texto:#f4f6ff; --gris:#9aa5c5; --gris2:#7a86a8;
  --radio:16px; --radio-s:10px; --sombra:0 18px 40px #00000066;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 12% -12%, #ff3d2e14 0%, transparent 62%),
    radial-gradient(900px 480px at 92% -6%, #ffb80010 0%, transparent 58%),
    var(--fondo);
  color:var(--texto); font-family:var(--texto-fuente); line-height:1.55;
  min-height:100vh;
}
h1,h2,h3,.marca-txt{font-family:var(--titulo);letter-spacing:.2px}
h1{font-weight:800}
a{color:var(--oro); text-decoration:none}
a:hover{text-decoration:underline}
.contenedor{max-width:1760px;margin:0 auto;padding:0 clamp(16px,2.2vw,44px)}
.oculto{display:none !important}

/* ---------- cabecera (barra de cristal, como la academia) ---------- */
header.mkt{
  position:sticky;top:10px;z-index:50;margin:14px clamp(8px,1.6vw,26px) 0;
  border:1px solid #ffffff24;border-radius:1rem;
  background:#090b14c9;backdrop-filter:blur(18px);box-shadow:0 12px 45px #00000090;
}
header.mkt .barra{display:flex;align-items:center;gap:18px;padding:12px clamp(12px,1.4vw,22px)}
.marca{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--texto)}
.marca:hover{text-decoration:none}
.marca .logo{width:54px;height:54px;flex:none;filter:drop-shadow(0 0 18px #ff4a2566);transition:transform .3s ease}
.marca:hover .logo{transform:scale(1.06) rotate(-3deg)}
.marca-txt{font-size:1.34rem;font-weight:800;letter-spacing:.05em;line-height:1.12}
.marca-txt b{color:var(--oro);font-weight:800}
.marca-txt small{display:block;font-family:var(--texto-fuente);font-weight:500;font-size:12.8px;
  letter-spacing:.02em;color:var(--gris);text-transform:none;margin-top:2px}
nav.menu{display:flex;gap:18px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav.menu a:not(.btn){color:var(--gris);font-size:14px}
nav.menu a:not(.btn):hover{color:var(--texto);text-decoration:none}
/* Acciones de la cabecera (entrar / crear cuenta, o mi cuenta / salir): botones separados */
nav.menu [data-sesion]{display:flex;align-items:center;gap:12px;margin-left:4px}
@media (max-width:560px){
  /* En movil la marca y el menu van en filas distintas y los botones nunca desbordan */
  header.mkt .barra{flex-wrap:wrap;gap:10px}
  nav.menu{width:100%;margin-left:0;gap:12px;font-size:13px}
  nav.menu [data-sesion]{margin-left:auto;flex-wrap:wrap;gap:8px}
  .marca .logo{width:44px;height:44px}
  .marca-txt{font-size:1.08rem}
  .marca-txt small{font-size:11.5px}
}

/* ---------- botones (mismo degradado y radio que la academia) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1px solid var(--borde2);background:#ffffff12;color:var(--texto);
  padding:11px 20px;border-radius:.75rem;font-size:14px;font-weight:700;
  font-family:var(--texto-fuente);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,border-color .18s ease;
}
.btn:hover{border-color:var(--oro);transform:translateY(-2px);text-decoration:none}
.btn.principal{
  background:linear-gradient(120deg,var(--acento) 0%,var(--oro) 60%,var(--oro2) 130%);
  color:#fff;border:none;box-shadow:0 8px 30px #ff471f66, inset 0 1px 0 #ffffff40;
}
.btn.principal:hover{box-shadow:0 12px 42px #ff471f8c, inset 0 1px 0 #ffffff40;filter:brightness(1.05)}
.btn.fantasma{background:transparent}
.btn.mini{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn.peligro{border-color:#ff4d6d55;background:#2a1119;color:#ffb3c0}
.btn.ok{border-color:#175c44;background:#0e2a22;color:#8ff0cb}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- tarjetas y formularios ---------- */
.tarjeta{background:linear-gradient(180deg,#10142480,#0c0f1c);border:1px solid var(--borde);
  border-radius:var(--radio);padding:22px;box-shadow:var(--sombra)}
.tarjeta.simple{box-shadow:none}
.grid{display:grid;gap:18px}
/* Rejillas adaptativas: en pantallas anchas se llenan las columnas que quepan
   (catalogo de herramientas, pasos, configuracion del panel...). */
.grid.tres{grid-template-columns:repeat(auto-fit,minmax(325px,1fr))}
.grid.dos{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
label.campo{display:block;margin:12px 0 6px;font-size:13px;color:var(--gris)}
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:var(--radio-s);border:1px solid var(--borde);
  background:#0e1220;color:var(--texto);font-size:14px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--oro)}
.fila{display:flex;gap:12px;flex-wrap:wrap}
.fila>*{flex:1 1 180px}
.aviso{padding:12px 14px;border-radius:var(--radio-s);font-size:13.5px;margin:12px 0;border:1px solid}
.aviso.info{background:#0f1b33;border-color:#26406e;color:#cfe0ff}
.aviso.ok{background:#0e2a22;border-color:#175c44;color:#9ff0cd}
.aviso.error{background:#2a1119;border-color:#5c2233;color:#ffb3c0}
.aviso.warn{background:#2a2211;border-color:#5c4a17;color:#ffe0a3}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,5.5vw,86px) 0 clamp(28px,3.5vw,52px);text-align:center}
.hero h1{font-size:clamp(30px,3.6vw,54px);line-height:1.12;margin:0 0 14px;letter-spacing:-.5px}
.hero h1 span{background:linear-gradient(120deg,var(--oro),var(--oro2));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero p{color:var(--gris);max-width:900px;margin:0 auto 26px;font-size:clamp(15.5px,1.15vw,18px)}
/* Botones del hero: ancho natural y mas grandes, como los de la academia (.btn-xl). */
.acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.acciones .btn{flex:0 1 auto;padding:1rem 1.9rem;font-size:1.02rem;border-radius:.9rem;letter-spacing:.02em}
.pastillas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ---------- filtro del catalogo (Todas / Índices sintéticos / Forex / Oro) ---------- */
.filtros{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
/* Botones SIN seleccionar: bien legibles (antes quedaban apagados con el gris de la paleta). */
.filtro{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--texto-fuente);
  font-size:14px;font-weight:600;color:#e6ebfa;background:#ffffff1c;border:1px solid #ffffff42;
  border-radius:999px;padding:9px 18px;box-shadow:inset 0 1px 0 #ffffff26, 0 2px 10px #00000045;
  transition:transform .15s ease,border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease;
}
.filtro:hover{border-color:var(--oro);color:#fff;background:#ffffff28;transform:translateY(-2px)}
.filtro .n{font-size:11.5px;font-weight:700;color:#f0f3fc;background:#ffffff30;border-radius:999px;padding:1px 8px}
.filtro.activo{
  background:linear-gradient(120deg,var(--acento) 0%,var(--oro) 60%,var(--oro2) 130%);color:#fff;border-color:transparent;
  box-shadow:0 8px 26px #ff471f5c, inset 0 1px 0 #ffffff40;
}
.filtro.activo .n{color:#fff;background:#ffffff38}
/* ---------- BOTONES PROPIOS de los dos servicios (Replicador y Copy) ---------- */
.filtro-sep{width:1px;height:26px;background:#ffffff30;border-radius:1px;margin:0 4px}
.filtro.servicio{
  border-color:#d4af6a8c;background:linear-gradient(120deg,#d4af6a26,#3d8bfd1c);
  box-shadow:inset 0 1px 0 #ffffff2e, 0 3px 14px #00000055;
}
.filtro.servicio:hover{border-color:var(--oro);background:linear-gradient(120deg,#d4af6a3d,#3d8bfd2e)}
.filtro.servicio.copy{border-color:#3d8bfd8c;background:linear-gradient(120deg,#3d8bfd26,#ff5d8f1f)}
.filtro.servicio.copy:hover{border-color:#3d8bfd;background:linear-gradient(120deg,#3d8bfd3d,#ff5d8f2e)}
.filtro.servicio.activo{background:linear-gradient(120deg,var(--acento) 0%,var(--oro) 60%,var(--oro2) 130%);border-color:transparent}
@media (max-width:560px){
  .filtro{font-size:13px;padding:8px 14px}
  .filtro-sep{display:none}
}
.pastilla{border:1px solid var(--borde);background:#0e1220;border-radius:999px;padding:6px 14px;
  font-size:12.5px;color:var(--gris)}

/* ---------- pagos aceptados (tarjetas 3D con el logo de cada pasarela) ---------- */
.pagos-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));perspective:1000px}
.pago3d{
  position:relative;display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;overflow:hidden;
  background:linear-gradient(165deg,#242c48 0%,#151b2e 45%,#0a0e19 100%);
  border:1px solid #ffffff30;
  box-shadow:0 16px 30px #000000a6, 0 2px 0 #ffffff2b inset, 0 -3px 0 #00000080 inset, 0 0 0 1px #00000059;
  transform:rotateX(7deg);transform-style:preserve-3d;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
/* filo superior con brillo (da el volumen 3D) */
.pago3d::before{
  content:"";position:absolute;left:1px;right:1px;top:1px;height:45%;pointer-events:none;
  border-radius:15px 15px 60% 60% / 15px 15px 24px 24px;
  background:linear-gradient(180deg,#ffffff26 0%,#ffffff05 65%,#ffffff00 100%);
}
/* halo del color de la marca detras del logo */
.pago3d::after{
  content:"";position:absolute;left:-40px;top:50%;width:130px;height:130px;transform:translateY(-50%);
  border-radius:50%;background:radial-gradient(circle,var(--marca,#ff7a18) 0%,transparent 62%);
  opacity:.20;pointer-events:none;filter:blur(4px);
}
/* Modo escaparate: metodos PREVISTOS (aun sin cobro): mismo diseno, un poco mas apagados y con etiqueta */
.pago3d.previsto{opacity:.82;border-style:dashed}
.pago3d.previsto::after{opacity:.10}
.pago-tag{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--gris2);
  border:1px solid #ffffff2e;border-radius:999px;padding:1px 6px;margin-left:4px;vertical-align:middle}

.pago3d:hover{transform:rotateX(0) translateY(-6px) scale(1.02);border-color:var(--marca,#ff7a18);
  box-shadow:0 24px 44px #000000b3, 0 2px 0 #ffffff33 inset, 0 -3px 0 #00000080 inset}
.pago3d img{width:46px;height:46px;object-fit:contain;flex:none;position:relative;z-index:1;
  filter:drop-shadow(0 8px 14px #00000099)}
.pago-simbolo{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:#ffffff14;border:1px solid #ffffff24;font-weight:800;font-size:20px;color:var(--marca,#ff7a18)}
.pago-txt{position:relative;z-index:1}
.pago-txt b{display:block;font-family:var(--titulo);font-size:15px;letter-spacing:.2px}
.pago-txt small{display:block;color:var(--gris2);font-size:12.2px;margin-top:2px}
/* Logos de wordmark (Mollie) un poco mas anchos y sin caja, para que se vean homogeneos */
.pago3d[data-marca="mollie"] img{width:58px;height:34px;filter:drop-shadow(0 6px 12px #00000099)
  drop-shadow(0 0 10px #ffffff33)}
@media (max-width:560px){
  .pagos-grid{grid-template-columns:1fr 1fr;gap:12px}
  .pago3d{padding:13px 14px;gap:10px;transform:none}
  .pago3d img{width:38px;height:38px}
  .pago-txt b{font-size:13.5px}
  .pago-txt small{font-size:11.5px}
}

/* ---------- herramientas ---------- */
.herr{display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.herr .cabecera{display:flex;gap:14px;align-items:flex-start;padding-right:92px}
.herr .icono{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;
  background:#0e1220;border:1px solid var(--borde)}
.herr h3{margin:0;font-size:18px}
.herr .resumen{color:var(--gris);font-size:13.5px;margin:6px 0 0}
.herr .precio{margin-top:auto;display:flex;align-items:baseline;gap:8px}
.herr .precio b{font-size:26px;color:var(--oro)}
.herr .precio s{color:var(--gris2);font-size:14px}
/* El catalogo usa auto-FILL: al filtrar por un servicio (una sola ficha) la tarjeta conserva
   el ancho normal del catalogo en vez de estirarse a todo el ancho de la pantalla. */
#catalogo.grid.tres{grid-template-columns:repeat(auto-fill,minmax(325px,1fr))}
/* Tarjetas de los dos SERVICIOS (Replicador y Copy): «Como funciona» + mentores. */
.herr.servicio{border-color:#d4af6a5c}
.herr.servicio.copy{border-color:#3d8bfd5c}
.herr .como{border-top:1px dashed #ffffff21;padding-top:11px;margin-top:2px}
.herr .como b{display:block;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--oro);
  margin-bottom:7px}
.herr.servicio.copy .como b{color:#9cc2ff}
.herr .como ol{margin:0 0 0 17px;padding:0;color:var(--gris);font-size:12.5px;line-height:1.55}
.herr .como li{margin-bottom:4px}
.herr .como .mentores{margin:9px 0 0;font-size:12.5px;color:var(--gris)}
.herr .como .mentores b{display:inline;text-transform:none;letter-spacing:0;font-size:12.5px;
  color:var(--texto);margin:0}
.etiqueta{position:absolute;top:14px;right:14px;font-size:11px;padding:4px 10px;border-radius:999px;
  background:#2a1a10;border:1px solid #7a4322;color:#ffcfa3}
.planes{display:grid;gap:12px;margin-top:8px}
.plan{border:1px solid var(--borde);border-radius:var(--radio-s);padding:14px;background:#0e1220;
  display:flex;flex-direction:column;gap:8px}
.plan.destacado{border-color:var(--oro);box-shadow:0 0 0 1px #ff7a1833 inset}
.plan .linea{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plan b{font-size:20px}
.plan ul{margin:6px 0 0 18px;padding:0;color:var(--gris);font-size:12.5px}

/* ---------- tablas ---------- */
table.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
table.tabla th,table.tabla td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--borde)}
table.tabla th{color:var(--gris);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
table.tabla tr:hover td{background:#ffffff08}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;border:1px solid}
.b-activa{background:#0e2a22;border-color:#175c44;color:#8ff0cb}
.b-pendiente{background:#2a2211;border-color:#5c4a17;color:#ffe0a3}
.b-vencida,.b-rechazado,.b-bloqueado,.b-revocada{background:#2a1119;border-color:#5c2233;color:#ffb3c0}
.b-suspendida,.b-cancelada{background:#1a1f2e;border-color:#3a4257;color:#c3cbdd}

/* ---------- pasos / faq ---------- */
.paso{display:flex;gap:14px;align-items:flex-start}
.paso .num{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;
  background:#0e1220;border:1px solid var(--borde);color:var(--oro);flex:none}
details.pregunta{border:1px solid var(--borde);border-radius:var(--radio-s);background:#0e1220;padding:14px 16px}
details.pregunta summary{cursor:pointer;font-weight:600}
details.pregunta p{color:var(--gris);font-size:14px}

/* ---------- cuenta / admin ---------- */
.layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(18px,1.8vw,30px);align-items:start;padding:26px 0}
.lateral{position:sticky;top:104px;display:flex;flex-direction:column;gap:6px}
.lateral button{
  text-align:left;padding:11px 14px;border-radius:var(--radio-s);border:1px solid transparent;
  background:transparent;color:var(--gris);cursor:pointer;font-size:14px;font-family:inherit;
}
.lateral button:hover{background:#ffffff08;color:var(--texto)}
.lateral button.activo{background:var(--panel2);border-color:var(--borde2);color:var(--texto);font-weight:600}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px}
.kpi .caja{background:#0e1220;border:1px solid var(--borde);border-radius:var(--radio-s);padding:16px}
.kpi .caja small{color:var(--gris);font-size:12px;display:block}
.kpi .caja b{font-size:24px;display:block;margin-top:6px}
footer.mkt{border-top:1px solid var(--borde);margin-top:50px;padding:26px 0;color:var(--gris2);font-size:13px}
.codigo{font-family:Consolas,monospace;background:#0e1220;border:1px solid var(--borde);
  padding:2px 8px;border-radius:6px;font-size:12.5px;word-break:break-all}
.modal-fondo{position:fixed;inset:0;background:#04060ccc;display:grid;place-items:center;z-index:100;padding:20px}
.modal{max-width:760px;width:100%;max-height:88vh;overflow:auto}

/* ---------------------------------------------------- ventanas emergentes propias
   Las usan MKT.modal / MKT.confirmar / MKT.pedirTexto: mismo estilo que la web
   (nada de alert/confirm/prompt del navegador). */
.mkt-modal-fondo{position:fixed;inset:0;background:#04060cd9;backdrop-filter:blur(3px);
  display:grid;place-items:center;z-index:300;padding:20px}
.mkt-modal{max-width:520px;width:100%;background:var(--panel);border:1px solid var(--borde);
  border-radius:16px;box-shadow:0 24px 60px #000000b3;overflow:hidden}
.mkt-modal-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--borde);font-size:15px}
.mkt-modal-cab b{font-family:Manrope,system-ui,sans-serif}
.mkt-modal-x{background:none;border:0;color:var(--gris);font-size:15px;cursor:pointer;
  padding:4px 7px;border-radius:8px;line-height:1}
.mkt-modal-x:hover{color:#fff;background:#ffffff14}
.mkt-modal-cuerpo{padding:16px 18px;font-size:14px;line-height:1.55}
.mkt-modal-cuerpo p{margin:0 0 10px}
.mkt-modal-cuerpo p:last-child{margin-bottom:0}
.mkt-modal-pie{display:flex;justify-content:flex-end;gap:10px;padding:13px 18px;
  border-top:1px solid var(--borde);background:#ffffff08}
.mkt-modal input{width:100%}
.tabs-gestion{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
/* Mismo aspecto que los filtros del catalogo y los botones del sitio (nada de pastillas rojas sueltas). */
.tabs-gestion a{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--texto-fuente);font-size:14px;font-weight:600;
  color:#e6ebfa;background:#ffffff1c;border:1px solid #ffffff42;border-radius:999px;padding:9px 18px;
  box-shadow:inset 0 1px 0 #ffffff26, 0 2px 10px #00000045;
  transition:transform .15s ease,border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease;
}
.tabs-gestion a:hover{border-color:var(--oro);color:#fff;background:#ffffff28;transform:translateY(-2px)}
.tabs-gestion a.on{
  background:linear-gradient(120deg,var(--acento) 0%,var(--oro) 60%,var(--oro2) 130%);color:#fff;
  border-color:transparent;box-shadow:0 8px 26px #ff471f5c, inset 0 1px 0 #ffffff40;
}
@media (max-width:560px){.tabs-gestion a{font-size:13px;padding:8px 14px}}
.tarjeta-rol{display:flex;flex-direction:column;gap:8px}
.tarjeta-rol .ico{font-size:26px}
.tarjeta-rol .sub{color:var(--gris);font-size:12.5px}
@media (max-width:1100px){
  /* En pantallas medianas el lateral pasa arriba y el contenido ocupa todo el ancho */
  .layout{grid-template-columns:1fr}
  .lateral{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px}
}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .lateral{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .hero h1{font-size:30px}
  nav.menu{font-size:13px}
}