/* ==========================================================================
   ProBase Trading · Layout común (cabecera + pie de página)
   Todas las clases llevan el prefijo pb- para no chocar con el CSS de cada página.
   ========================================================================== */
:root{
  --pb-ink:#0A1426;--pb-panel:#0F1E38;--pb-line:#1B3056;--pb-line-2:#27426D;
  --pb-text:#F2F4F7;--pb-muted:#93A3BA;--pb-dim:#62758F;--pb-cobalt:#0552FC;--pb-acc:#6E9BFF;
  --pb-font:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --pb-mono:"IBM Plex Mono",ui-monospace,monospace;
  --pb-wrap:1200px;--pb-hd-h:68px;
}

/* Bilingüe: <span data-l="es"> / <span data-l="en"> */
html[lang="es"] [data-l="en"],html[lang="en"] [data-l="es"]{display:none!important}

.pb-wrap{max-width:var(--pb-wrap);margin:0 auto;padding-inline:20px;box-sizing:border-box}
.pb-hd,.pb-hd *,.pb-ft,.pb-ft *{box-sizing:border-box}
.pb-hd a,.pb-ft a{text-decoration:none}

/* ---------- Botones ---------- */
.pb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 13.5px/1 var(--pb-font);padding:10px 16px;border-radius:10px;border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:transform .15s,background .15s}
.pb-btn:hover{transform:translateY(-1px)}
.pb-btn--primary{background:var(--pb-cobalt);color:#fff!important;box-shadow:0 10px 30px -10px rgba(5,82,252,.75)}
.pb-btn--primary:hover{background:#0A3FC4}
.pb-btn--ghost{background:transparent;color:var(--pb-text)!important;border-color:rgba(148,170,210,.3)}
.pb-btn--ghost:hover{background:rgba(242,244,247,.06)}
.pb-btn--block{width:100%;margin-top:14px;padding:14px 18px;font-size:15px}
.pb-hd :focus-visible,.pb-ft :focus-visible{outline:2px solid var(--pb-cobalt);outline-offset:3px;border-radius:6px}

/* ---------- Cabecera ---------- */
.pb-hd{position:sticky;top:0;z-index:60;margin:0;padding:0;background:rgba(6,10,18,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--pb-line);font-family:var(--pb-font);color:var(--pb-text);transition:box-shadow .2s}
.pb-hd.is-scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.pb-hd-in{display:flex;align-items:center;gap:14px;height:var(--pb-hd-h)}
.pb-logo{display:inline-flex;align-items:center;gap:8px;color:#fff;flex:none}
.pb-mark{display:block;flex:none;width:26px;height:26px;color:#fff}
.pb-logo .tb-word{font-size:17.5px}
.pb-badge{font:600 10.5px/1 var(--pb-mono);letter-spacing:.12em;text-transform:uppercase;color:#8FB0FF;border:1px solid rgba(110,155,255,.35);background:rgba(5,82,252,.12);border-radius:999px;padding:5px 9px;white-space:nowrap}

.pb-links{display:flex;align-items:center;gap:clamp(10px,1.3vw,22px);margin-left:auto;font-size:14px}
.pb-links>a,.pb-dd-t{color:var(--pb-muted);white-space:nowrap;transition:color .15s}
.pb-links>a:hover,.pb-dd-t:hover,.pb-dd-t.is-active{color:var(--pb-text)}

.pb-dd{position:relative}
.pb-dd-t{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font:inherit;color:var(--pb-muted)}
.pb-dd-t svg{width:11px;height:11px;transition:transform .2s}
.pb-dd.on .pb-dd-t svg,.pb-dd:hover .pb-dd-t svg{transform:rotate(180deg)}
.pb-dd-p{position:absolute;top:calc(100% + 16px);right:-40px;width:340px;padding:8px;border-radius:16px;background:rgba(9,16,31,.98);border:1px solid rgba(148,170,210,.18);box-shadow:0 24px 60px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .18s,transform .18s;z-index:80}
.pb-dd-p::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.pb-dd:hover .pb-dd-p,.pb-dd:focus-within .pb-dd-p,.pb-dd.on .pb-dd-p{opacity:1;pointer-events:auto;transform:none}
.pb-dd-p a{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:11px;color:#E6ECF5}
.pb-dd-p a:hover,.pb-dd-p a:focus-visible,.pb-dd-p a[aria-current="page"]{background:rgba(5,82,252,.14);outline:none}
.pb-dd-p i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(5,82,252,.14);border:1px solid rgba(110,155,255,.28);color:#8FB0FF;font-style:normal}
.pb-dd-p i svg{width:18px;height:18px}
.pb-dd-p b{display:block;font-size:14px;font-weight:600;line-height:1.25;color:#E6ECF5}
.pb-dd-p div>span{display:block;font-size:12.5px;color:var(--pb-muted);line-height:1.4;margin-top:2px}
.pb-dd-p hr{border:0;height:1px;background:rgba(148,170,210,.14);margin:6px 8px}

.pb-cta{display:flex;align-items:center;gap:10px;flex:none}
.pb-hd .lang.pb-lang{all:unset;display:inline-flex;align-items:center;gap:2px;font:500 12px/1 var(--pb-mono);color:var(--pb-dim)}
.pb-hd .pb-lang i{font-style:normal;color:var(--pb-dim)}
.pb-hd .pb-lang button{all:unset;cursor:pointer;padding:6px 3px;font:500 12px/1 var(--pb-mono);letter-spacing:.04em;color:var(--pb-dim)}
.pb-hd .pb-lang button:hover{color:var(--pb-text)}
.pb-hd .pb-lang button[aria-pressed="true"]{color:var(--pb-text);font-weight:700}
.pb-tool{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--pb-muted);padding:7px 10px;border:1px solid var(--pb-line-2);border-radius:9px}
.pb-tool:hover{color:var(--pb-text)}

.pb-burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid rgba(148,170,210,.25);background:rgba(255,255,255,.04);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.pb-burger span{display:block;width:18px;height:2px;border-radius:2px;background:#E6ECF5;transition:transform .2s,opacity .2s}
.pb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pb-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.pb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.pb-sheet{display:none}
.pb-sheet-h{font:500 11px var(--pb-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pb-dim);padding:18px 6px 4px}

@media (max-width:1140px){
  .pb-links{display:none}
  .pb-cta{margin-left:auto}
  .pb-burger{display:inline-flex}
  .pb-sheet{display:grid;position:absolute;left:0;right:0;top:100%;padding:8px 16px 18px;background:rgba(7,11,20,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(148,170,210,.14);max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .3s ease,opacity .2s}
  .pb-sheet.on{max-height:calc(100vh - var(--pb-hd-h));overflow:auto;opacity:1;pointer-events:auto}
  .pb-sheet a:not(.pb-btn){display:block;padding:13px 6px;border-bottom:1px solid rgba(148,170,210,.1);color:#E6ECF5;font-size:16px}
  .pb-sheet a[aria-current="page"]{color:#8FB0FF}
}
@media (max-width:640px){
  .pb-cta>.pb-btn,.pb-badge,.pb-tool{display:none}
  .pb-logo .tb-word{font-size:15.5px}
  .pb-mark{width:22px;height:22px}
}
@media (min-width:1141px) and (max-width:1260px){
  .pb-links a[href$="#track"]{display:none}
}

/* ---------- Pie de página ---------- */
.pb-ft{margin:0;padding:56px 0 36px;border-top:1px solid #1d2638;background:#0B0F17;font-family:var(--pb-font);color:var(--pb-muted);font-size:14px;line-height:1.6}
.pb-ft-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}
.pb-ft-brand p{margin:14px 0 10px;max-width:36ch;color:var(--pb-muted);font-size:14px}
.pb-ft-mail{color:#8FB0FF;font-size:13.5px}
.pb-ft-mail:hover{color:#fff}
.pb-ft h4{margin:0 0 14px;font:500 11px var(--pb-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pb-dim)}
.pb-ft ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pb-ft li{margin:0;padding:0}
.pb-ft ul a{color:var(--pb-muted)}
.pb-ft ul a:hover{color:var(--pb-text)}
.pb-ft-legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--pb-line);display:grid;gap:10px}
.pb-ft-legal p{margin:0;font-size:12.5px;line-height:1.65;color:var(--pb-dim)}
.pb-ft-legal b{color:var(--pb-muted)}
.pb-ft-copy{color:var(--pb-dim)}
@media (max-width:900px){
  .pb-ft-grid{grid-template-columns:1fr 1fr}
  .pb-ft-brand{grid-column:1/-1}
}
@media (max-width:420px){
  .pb-ft-grid{grid-template-columns:1fr}
}

/* ---------- Impresión ---------- */
@media print{
  .pb-hd,.pb-sheet{display:none!important}
  .pb-ft{background:none;border:0;padding:16px 0 0}
  .pb-ft-grid{display:none}
}

/* ---------- Volver al inicio (páginas internas) ---------- */
.pb-back{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;border:1px solid var(--pb-line-2);color:var(--pb-text)!important;font-size:13px;font-weight:500;white-space:nowrap;transition:background .15s,border-color .15s}
.pb-back:hover{background:rgba(110,155,255,.1);border-color:rgba(110,155,255,.45)}
.pb-back svg{width:13px;height:13px;flex:none}
.pb-sheet .pb-sheet-home{color:#8FB0FF!important;font-weight:600}
@media (max-width:640px){ .pb-back{padding:7px 9px} .pb-back-l{display:none} }
@media (max-width:360px){ .pb-back{display:none} }

/* ---------- Páginas internas: Producto ▾ + Empresa ▾ ---------- */
.pb-hd--inner .pb-links{gap:24px}
.pb-dd--list .pb-dd-p{width:300px;right:auto;left:-20px}
.pb-dd--list .pb-dd-p a{grid-template-columns:1fr;padding:9px 12px}
.pb-dd--list .pb-dd-p b{font-size:13.5px}
@media (max-width:640px){
  .pb-back{gap:0}
  .pb-back [data-l]{display:none!important}
}
@media (max-width:380px){
  .pb-hd-in{gap:8px}
  .pb-logo .tb-word{font-size:14px}
  .pb-mark{width:20px;height:20px}
  .pb-cta{gap:6px}
  .pb-burger{width:36px;height:36px}
}

@media (max-width:900px){ .pb-tool{display:none} }


/* ===== Menú lateral móvil (hamburguesa azul) ===== */
@media (max-width:1140px){
  .pb-burger{background:linear-gradient(135deg,#3D7BFF,#0552FC)!important;border:0!important;box-shadow:0 10px 22px -10px rgba(5,82,252,.95),inset 0 1px 0 rgba(255,255,255,.2)!important;width:42px!important;height:42px!important;border-radius:11px!important}
  .pb-burger span{background:#fff!important}
  .pb-sheet{display:grid!important;position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;width:min(330px,86vw)!important;height:100%!important;height:100dvh!important;max-height:none!important;
    align-content:start;padding:14px 18px calc(24px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(180deg,#0A1020,#070B14)!important;border:0!important;border-right:1px solid rgba(148,170,210,.16)!important;
    overflow-y:auto!important;opacity:1!important;pointer-events:auto!important;transform:translateX(-104%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s!important;z-index:1001!important;box-shadow:30px 0 60px -30px rgba(0,0,0,.9)}
  .pb-sheet.on{transform:none;visibility:visible}
  .pb-sheet{font-family:var(--pb-font);color:var(--pb-text)}.pb-sheet a{text-decoration:none!important}
  .pb-sheet-top .pb-logo{display:inline-flex!important;padding:0!important;border:0!important}
  .pb-sheet .pb-btn--block{margin-top:12px}
  .pb-sheet-top{display:flex;align-items:center;gap:10px;padding:4px 2px 14px;margin-bottom:6px;border-bottom:1px solid rgba(148,170,210,.12)}
  .pb-sheet-top .pb-logo{display:flex;align-items:center;gap:9px;pointer-events:none}
  .pb-sheet-x{margin-left:auto;width:38px;height:38px;border-radius:10px;border:1px solid rgba(148,170,210,.25);background:transparent;color:#C9D4E5;display:grid;place-items:center;cursor:pointer}
  .pb-scrim{position:fixed;inset:0;z-index:1000;background:rgba(2,5,12,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s}
  .pb-scrim.on{opacity:1;pointer-events:auto}
  html.pb-nav-open,html.pb-nav-open body{overflow:hidden}
}
@media (min-width:1141px){.pb-scrim,.pb-sheet-top{display:none}}