/* ==========================================================================
   ProBase Trading · Capa de diseño institucional
   Se carga después del CSS de cada página: unifica tipografía, filetes,
   marcos de producto y botones en todo el sitio.

   Sistema tipográfico
   · Hanken Grotesk  → titulares (grotesca suiza, compacta, de banca privada)
   · Instrument Serif → palabras de acento en titulares (cursiva editorial)
   · IBM Plex Sans   → textos y navegación (diseñada para entornos financieros)
   · IBM Plex Mono   → cifras, etiquetas y datos de mercado
   · Poppins         → sólo el logotipo
   ========================================================================== */
html:root{
  --display:"Hanken Grotesk","IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --pb-font:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --pb-mono:"IBM Plex Mono",ui-monospace,monospace;
  /* acentos */
  --ib-steel:158,186,240;      /* filete frío */
  --ib-blue:61,123,255;        /* filete cobalto */
  --ib-silver:linear-gradient(92deg,#F4F7FF 0%,#C9D8FF 30%,#8FB0FF 62%,#3D7BFF 100%);
}

/* ---------- Tipografía ---------- */
body{font-family:var(--body);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);font-feature-settings:"ss01","kern"}
h1{font-weight:600!important;letter-spacing:-.035em!important;line-height:1.04!important}
h2{font-weight:600!important;letter-spacing:-.03em!important}
h3{font-weight:600;letter-spacing:-.015em}
p,li,dd,summary{font-family:var(--body)}
b,strong{font-weight:600}

/* Palabras de acento: cursiva editorial con degradé plateado → cobalto */
.hero h1 em,.sn-head h2 span,.pt-head h2 em,.final .fz h2 span,
body:not(.pb-page--home) h1 em,body:not(.pb-page--home) h2 em{
  font-family:var(--serif)!important;font-style:italic!important;font-weight:400!important;
  letter-spacing:-.005em!important;font-size:1.1em;line-height:.9;padding:0 .08em 0 .02em;
  background:var(--ib-silver)!important;-webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important
}
.theme-light h2 em,.theme-white h2 em,.theme-light h2 span,.theme-white h2 span{background:linear-gradient(92deg,#0A1F3E 0%,#1454F0 70%,#3D7BFF 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}

/* Cifras: mono tabular */
.stat b,.big20 b,.gp-stats b,.pt-kpis strong,.spec b{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
table,.tab-ui,.t2-c,.dash{font-variant-numeric:tabular-nums}

/* Etiquetas superiores: filete en lugar de punto */
.eyebrow{font-family:var(--mono)!important;font-weight:500!important;letter-spacing:.18em!important;gap:12px!important}
.eyebrow::before{width:26px!important;height:1px!important;border-radius:0!important;background:linear-gradient(90deg,transparent,currentColor)!important;box-shadow:none!important}
.kick{font-family:var(--mono)!important;font-weight:500!important;letter-spacing:.18em!important;display:inline-flex;align-items:center;gap:12px}
.kick::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,currentColor);flex:none}

/* ---------- Filetes institucionales en tarjetas ----------
   Borde de 1px en degradé (luz arriba a la izquierda, se apaga al centro,
   reflejo cobalto abajo a la derecha) + brillo fino en el canto superior. */
:is(
  body:not(.pb-page--home) .card,
  .stat,.node,.step,.col,body:not(.pb-page--home) .addon,.cc,button.wc,.key,.dash,.hero-card,.big20,body:not(.pb-page--home) .price,.jr,.spec,.perm,.mem,
  body:not(.pb-page--home) p.note,body:not(.pb-page--home) details,
  .sn-tg,.b2b-box,.brk,.pb-page--home .card,.fz-c,.gp-stats>div,
  .chip,.tm-card,.plan,.theme-white details,.theme-light details
){position:relative;border-color:transparent!important}
:is(
  body:not(.pb-page--home) .card,
  .stat,.node,.step,.col,body:not(.pb-page--home) .addon,.cc,button.wc,.key,.dash,.hero-card,.big20,body:not(.pb-page--home) .price,.jr,.spec,.perm,.mem,
  body:not(.pb-page--home) p.note,body:not(.pb-page--home) details,
  .sn-tg,.b2b-box,.brk,.pb-page--home .card,.fz-c,.gp-stats>div,
  .chip,.tm-card,.plan,.theme-white details,.theme-light details
)::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  --c:var(--ib-c,var(--ib-steel));--a:var(--ib-a,var(--ib-blue));--k:var(--ib-k,1);
  background:
    linear-gradient(90deg,transparent 8%,rgba(255,255,255,calc(.42*var(--k))) 50%,transparent 92%) top/100% 1px no-repeat,
    linear-gradient(158deg,rgba(var(--c),calc(.55*var(--k))) 0%,rgba(var(--c),calc(.16*var(--k))) 22%,rgba(var(--c),calc(.07*var(--k))) 50%,rgba(var(--a),calc(.22*var(--k))) 78%,rgba(var(--a),calc(.5*var(--k))) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:filter .3s ease
}
:is(body:not(.pb-page--home) .card,.stat,.node,.step,.col,.cc,button.wc,.key,.chip,.tm-card,.plan,.fz-c,.pb-page--home .card,details):hover::after{filter:brightness(1.6)}

/* Profundidad sobria en tarjetas oscuras */
:is(body:not(.pb-page--home) .card,.stat,.node,.step,.col,body:not(.pb-page--home) .addon,.cc,button.wc,.key,.hero-card,.big20,body:not(.pb-page--home) .price,.jr,.spec,.mem,.dash,body:not(.pb-page--home) details){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 30px 60px -40px rgba(0,0,0,.85)
}

/* Tonos por estado (mantienen su significado) */
:is(.card.bad,.card.isnt-c,.key.r,.box.w){--ib-c:255,92,92;--ib-a:255,92,92}
:is(.card.good,.card.is,.key.g){--ib-c:80,224,120;--ib-a:63,224,90}
:is(.key.a,.pb-page--about p.note){--ib-c:240,203,107;--ib-a:240,203,107}
:is(.card.feat,.col.pb,.node.core,.hero-card,.big20,.price,.plan.main,.fz-c.good){--ib-c:190,210,255;--ib-a:61,123,255;--ib-k:1.45}
/* Secciones claras: filete grafito → cobalto */
:is(.theme-light,.theme-white,.strip){--ib-c:120,140,180;--ib-a:5,82,252;--ib-k:1.15}
:is(.theme-light,.theme-white,.strip) :is(.chip,.tm-card,.plan,details)::after{background:
  linear-gradient(158deg,rgba(var(--c),.55) 0%,rgba(var(--c),.22) 30%,rgba(var(--c),.16) 60%,rgba(var(--a),.45) 100%)}
.plan.main{--ib-c:5,82,252!important}
.plan.main::after{background:linear-gradient(158deg,#7FA4FF 0%,#0552FC 40%,#0A1F3E 75%,#3D7BFF 100%)!important}

/* ---------- Marcos de producto ----------
   Sin líneas externas: bisel fino en degradé, luz en el canto superior
   y un halo cobalto bajo la pieza, como un monitor en una mesa de operaciones. */
.mk-shot{background:linear-gradient(165deg,rgba(236,242,255,.75) 0%,rgba(122,160,255,.45) 16%,rgba(20,36,70,.7) 45%,rgba(30,60,120,.55) 75%,rgba(160,190,255,.6) 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 70px 120px -60px rgba(5,40,140,.55),0 30px 60px -40px rgba(0,0,0,.6)!important}
.mk-shot::after{content:"";position:absolute;left:8%;right:8%;bottom:-34px;height:60px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(61,123,255,.38),rgba(61,123,255,0) 70%);filter:blur(10px)}
.theme-light .mk-shot,.theme-white .mk-shot{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 60px 100px -55px rgba(10,31,62,.55),0 20px 40px -30px rgba(10,31,62,.35)!important}
.theme-light .mk-shot::after,.theme-white .mk-shot::after{background:radial-gradient(50% 50% at 50% 50%,rgba(5,82,252,.22),rgba(5,82,252,0) 70%)}
.shot{position:relative;border-color:rgba(122,160,255,.3)!important;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}

/* Fotografías: filete fino, sin escuadras */
.pic{border-color:transparent!important;box-shadow:0 0 0 1px rgba(122,160,255,.2),0 50px 100px -45px rgba(0,0,0,.85)!important}

/* Calculadora y calendario: misma altura */
@media (min-width:761px){
  .rk-duo{align-items:stretch!important}
  .rk-duo .shot-sc{aspect-ratio:2480/1968;overflow:hidden!important}
  .rk-duo .shot-sc img{width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover;object-position:top center}
}

/* ---------- Sección "mesa institucional": texto fuera de la foto ---------- */
@media (min-width:901px){
  .pic-group{display:grid!important;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);aspect-ratio:auto!important;min-height:0!important;
    background:linear-gradient(135deg,#0B1730 0%,#081022 55%,#060B18 100%)!important}
  .pic-group .pic-img{position:relative!important;inset:auto!important;grid-column:2;grid-row:1;width:100%;height:100%!important;min-height:440px;object-fit:cover;object-position:62% center!important;filter:saturate(.8) contrast(1.06)}
  .pic-group .pic-ph{display:none!important}
  .pic-group .pic-shade{grid-column:2;grid-row:1;position:relative!important;inset:auto!important;height:auto!important;aspect-ratio:auto!important;
    background:linear-gradient(90deg,#081022 0%,rgba(8,16,34,.55) 14%,rgba(8,16,34,0) 34%),linear-gradient(0deg,rgba(6,10,26,.45),transparent 40%)!important}
  .pic-group .gp-copy{grid-column:1;grid-row:1;position:relative!important;left:auto!important;top:auto!important;transform:none!important;max-width:none!important;
    align-self:center;padding:clamp(36px,4.4vw,64px) clamp(28px,3.6vw,56px)!important;border-right:1px solid transparent;
    background:linear-gradient(180deg,transparent,rgba(122,160,255,.4) 30%,rgba(122,160,255,.4) 70%,transparent) 100% 0/1px 100% no-repeat}
  .pic-group .gp-copy h2{font-size:clamp(28px,2.9vw,40px)}
}
@media (max-width:900px){
  .pic-group .gp-copy{padding-top:28px!important}
}

/* ---------- Botones ---------- */
.theme-blue .btn-primary,.theme-blue .btn.p{background:linear-gradient(180deg,#FFFFFF 0%,#EEF3FF 100%)!important;color:#0442D0!important;
  box-shadow:inset 0 -1px 0 rgba(10,31,62,.12),0 0 0 1px rgba(255,255,255,.6),0 14px 30px -14px rgba(0,0,0,.55)!important}
:is(.btn-primary,.btn.p,.pb-btn--primary):not(.theme-blue *){
  background:linear-gradient(180deg,#2C6CFF 0%,#0552FC 52%,#0446DA 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(5,82,252,.55),0 14px 32px -14px rgba(5,82,252,.85)!important;
  font-family:var(--body);font-weight:600;letter-spacing:.005em
}
:is(.btn-primary,.btn.p,.pb-btn--primary):not(.theme-blue *):hover{background:linear-gradient(180deg,#3B78FF 0%,#0A58FF 52%,#044BE8 100%)!important}
.btn-ghost,.btn:not(.p):not(.btn-primary):not(.btn-gold){font-family:var(--body);font-weight:600}

/* ---------- Cabecera y pie ---------- */
.pb-hd{background:linear-gradient(180deg,rgba(6,10,18,.92),rgba(6,10,18,.78))!important;border-bottom-color:transparent!important}
.pb-hd::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(122,160,255,.18) 18%,rgba(160,190,255,.55) 50%,rgba(122,160,255,.18) 82%,transparent 100%)}
.pb-links,.pb-dd-p b,.pb-sheet a{font-family:var(--body)}
.pb-links{letter-spacing:.005em}
.pb-dd-p{border-color:transparent!important;background:linear-gradient(180deg,rgba(12,20,38,.98),rgba(8,14,28,.98))!important}
.pb-dd-p::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(190,210,255,.45),rgba(122,160,255,.08) 40%,rgba(61,123,255,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pb-ft{border-top-color:transparent!important;position:relative}
.pb-ft::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(160,190,255,.45) 50%,transparent)}
.pb-ft h4{font-family:var(--mono);letter-spacing:.18em}
.pb-ft-legal{border-top-color:transparent!important;background:linear-gradient(90deg,rgba(122,160,255,.3),rgba(122,160,255,.06) 60%,transparent) top/100% 1px no-repeat}

/* ---------- Teléfono y pantallas pequeñas ---------- */

@media (max-width:760px){
}
@media (prefers-reduced-motion:reduce){*::after{transition:none!important}}
@media print{.mk-shot::after,.pb-hd::after{display:none}}