/* Blog Trading Plus — hereda los tokens de marca (marca/oficial/tokens.css).
   Archivo externo a propósito: 16 páginas lo comparten y el navegador lo cachea una vez. */
:root{
  --teal:#14BDCB; --teal-deep:#0E9AA6; --teal-glow:rgba(20,189,203,.16);
  --ink:#15171A; --carbon:#1A1C20; --carbon-2:#22262B;
  --slate:#4B4F58; --slate-2:#69727D;
  --off:#F5F6F7; --line:#E4E7EA; --white:#FFFFFF;
  --d-line:rgba(255,255,255,.08); --d-line-2:rgba(255,255,255,.14);
  --txt-d:rgba(255,255,255,.86); --txt-d2:rgba(255,255,255,.62); --txt-d3:rgba(255,255,255,.52);
  --disp:'Space Grotesk',-apple-system,sans-serif; --body:'Inter',-apple-system,sans-serif;
  --maxw:1180px; --r:16px; --ease:cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--off);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
@media(min-width:720px){.wrap{padding:0 2rem}}

/* nav — mismo componente del home */
.nav{position:sticky;top:0;z-index:100;background:rgba(21,23,26,.86);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--d-line)}
/* padding-block, NO el atajo `padding`: con `1rem 0` se pisa el margen lateral de .wrap
   y el logo queda pegado al borde de la pantalla en móvil */
.nav-in{display:flex;align-items:center;justify-content:space-between;padding-block:1rem;gap:1rem}
.logo-img{height:28px;width:auto;display:block}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nav-links a{font-size:.82rem;color:var(--txt-d2);font-weight:500;transition:.25s}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff}
.nav-cta{font-family:var(--disp);font-weight:600;font-size:.8rem;color:var(--ink)!important;background:var(--teal);padding:.55rem 1rem;border-radius:999px;white-space:nowrap}
.nav-cta:hover{background:#fff}
.nav-links a:focus-visible,.cta-btn:focus-visible,.vid-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none}}

/* cabecera de post */
.post-head{background:linear-gradient(180deg,var(--carbon) 0%,var(--ink) 100%);color:#fff;padding:3.5rem 0 3rem}
.slabel{font-family:var(--disp);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
.post-head h1{font-family:var(--disp);font-size:clamp(1.7rem,4.6vw,2.8rem);line-height:1.14;font-weight:700;letter-spacing:-.025em;margin-bottom:1.2rem;max-width:24ch}
.post-meta{font-size:.82rem;color:var(--txt-d2);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.post-meta b{color:var(--txt-d);font-weight:500}
.post-portada{max-width:var(--maxw);margin:-2rem auto 0;padding:0 1.5rem}
.post-portada img{width:100%;border-radius:var(--r);display:block;box-shadow:0 24px 48px -24px rgba(0,0,0,.4)}
@media(min-width:720px){.post-portada{padding:0 2rem}}

/* cuerpo */
.post-body{max-width:720px;margin:0 auto;padding:3rem 1.5rem 1rem}
@media(min-width:720px){.post-body{padding:3.5rem 2rem 1rem}}
.post-body p{font-size:1.02rem;color:#2A2E34;margin-bottom:1.35rem}
.post-body h2{font-family:var(--disp);font-size:clamp(1.3rem,3vw,1.7rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:2.5rem 0 1rem;color:var(--ink)}
.post-body h3{font-family:var(--disp);font-size:1.15rem;font-weight:600;margin:2rem 0 .8rem;color:var(--ink)}
.post-body h4{font-family:var(--disp);font-size:1.02rem;font-weight:600;margin:1.6rem 0 .7rem;color:var(--ink)}
.post-body ul,.post-body ol{margin:0 0 1.35rem 1.2rem}
.post-body li{margin-bottom:.6rem;color:#2A2E34}
.post-body img{border-radius:12px;margin:1.5rem 0;display:block}
.post-body a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:2px}
.post-body a:hover{color:var(--ink)}
.post-body strong,.post-body b{font-weight:600;color:var(--ink)}
.post-body em,.post-body i{font-style:italic}
.post-body blockquote{border-left:3px solid var(--teal);padding-left:1.2rem;margin:1.8rem 0;color:var(--slate);font-style:italic}
.post-body iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;margin:1.5rem 0}
/* tablas heredadas del sitio viejo: scrollean dentro de su caja, nunca desbordan la página */
.post-body table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:1.5rem 0;font-size:.92rem}
.post-body td,.post-body th{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}

/* fachada de video dentro de un post */
.vid{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--ink);margin:1.8rem 0}
.vid img,.vid iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;margin:0;border-radius:0}
.vid-btn{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vid-btn::before{content:"";position:absolute;inset:0;background:rgba(21,23,26,.35)}
.vid-play{position:relative;width:64px;height:64px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px -8px rgba(0,0,0,.5);transition:.25s var(--ease)}
.vid-btn:hover .vid-play{transform:scale(1.08)}
.vid-play svg{width:24px;height:24px;margin-left:3px;fill:var(--ink)}

/* índice */
.blog-head{background:linear-gradient(180deg,var(--carbon) 0%,var(--ink) 100%);color:#fff;padding:4rem 0 3.5rem}
.blog-head h1{font-family:var(--disp);font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin-bottom:1rem}
.blog-head h1 .tl{color:var(--teal)}
.blog-head p{color:var(--txt-d2);max-width:56ch}
.cards{display:grid;grid-template-columns:1fr;gap:1.4rem;padding:3rem 0}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.3s var(--ease)}
.card:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(20,189,203,.4)}
.card:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.card-img{aspect-ratio:16/10;background:var(--carbon-2);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-in{padding:1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card-date{font-family:var(--disp);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep)}
.card h2{font-family:var(--disp);font-size:1.04rem;font-weight:600;line-height:1.32;letter-spacing:-.01em}
.card-autor{font-size:.78rem;color:var(--slate-2);margin-top:auto;padding-top:.5rem}

/* CTA + footer */
.cta{background:linear-gradient(135deg,var(--teal-deep),var(--teal));color:var(--ink);border-radius:20px;padding:2.4rem 1.6rem;text-align:center;margin:3rem auto;max-width:720px;position:relative;overflow:hidden}
.cta::after{content:"+";position:absolute;font-family:var(--disp);font-weight:700;font-size:16rem;color:rgba(0,0,0,.06);right:-1.5rem;top:-4.5rem;line-height:1}
.cta h2{font-family:var(--disp);font-size:clamp(1.3rem,3.4vw,1.9rem);font-weight:700;letter-spacing:-.025em;margin-bottom:.7rem;position:relative}
.cta p{color:rgba(0,0,0,.7);max-width:46ch;margin:0 auto 1.5rem;font-size:.95rem;position:relative}
.cta-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);font-weight:600;font-size:.92rem;background:var(--ink);color:#fff;padding:.85rem 1.6rem;border-radius:999px;position:relative;transition:.25s var(--ease)}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(0,0,0,.4)}
@media(min-width:720px){.cta{padding:3rem 2.5rem}}
footer{background:var(--ink);color:var(--txt-d3);padding:3rem 0 2rem;border-top:1px solid var(--d-line)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;margin-bottom:2rem}
.foot-tag{font-size:.84rem;color:var(--txt-d2);max-width:300px;margin-top:.8rem;line-height:1.6}
.foot-cols{display:flex;gap:2.5rem;flex-wrap:wrap}
.foot-col h5{font-family:var(--disp);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--txt-d3);margin-bottom:.9rem}
.foot-col a{display:block;font-size:.84rem;color:var(--txt-d2);margin-bottom:.5rem;transition:.2s}
.foot-col a:hover{color:var(--teal)}
.foot-bot{border-top:1px solid var(--d-line);padding-top:1.5rem;font-size:.74rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}