/* ============================================================
   FITINTRADE — ESTILOS COMPARTIDOS DEL BLOG
   Este archivo da el diseño a TODOS los artículos.
   Cámbialo aquí una vez y se aplica a todos.
   ============================================================ */
:root{
  --bg:#0A0A0A; --bg-alt:#0E0E0E; --surface:#161616; --surface-2:#1C1C1C;
  --line:rgba(255,255,255,0.08); --green:#00C896; --green-dk:#00A77E;
  --green-soft:rgba(0,200,150,0.10);
  --ink:#F5F5F7; --muted:#A1A1A6; --soft:#6E6E73;
  --maxw:1080px; --read:720px; --radius:18px; --pad-x:22px;
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
      font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.read{ max-width:var(--read); margin-inline:auto; }

.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:16px;
      padding:13px 26px; border-radius:980px; border:1px solid transparent; cursor:pointer;
      transition:transform .15s, background-color .15s, border-color .15s, color .15s; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--green); color:#04140F; }
.btn-primary:hover{ background:var(--green-dk); }
.btn-ghost{ background:rgba(255,255,255,0.08); color:var(--ink); }
.btn-ghost:hover{ background:rgba(255,255,255,0.14); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:8px; }

/* Cabecera */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(10,10,10,0.7);
              backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo{ display:inline-flex; align-items:center; gap:10px; }
.logo-icon{ height:30px; width:auto; display:block; }
.logo-word{ font-weight:800; font-size:21px; letter-spacing:1px; color:var(--ink); line-height:1; }
.logo-word .in{ color:var(--green); }
.footer-logo .logo-icon{ height:28px; }
.footer-logo .logo-word{ font-size:20px; }
.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-right .back{ font-size:15px; font-weight:500; color:var(--muted); }
.nav-right .back:hover{ color:var(--ink); }
.nav-right .btn{ padding:9px 20px; font-size:15px; }

/* Artículo */
.article{ padding:48px 0 72px; }
.article-cat{ display:inline-block; font-weight:700; font-size:13px; letter-spacing:1.5px;
              text-transform:uppercase; color:var(--green); margin:0 0 16px; }
.article h1{ font-weight:800; font-size:clamp(30px,5vw,48px); line-height:1.12;
             letter-spacing:-1px; margin:0 0 18px; }
.article-meta{ color:var(--soft); font-size:14px; margin:0 0 32px; }
.article-meta strong{ color:var(--muted); font-weight:600; }

/* Imagen de portada del artículo (con marca de agua de respaldo si no hay foto) */
.article-cover{ position:relative; margin:0 auto 36px; max-width:var(--read);
                border-radius:16px; overflow:hidden; aspect-ratio:16/8;
                background:linear-gradient(160deg,#141414,#1c1c1c); border:1px solid var(--line); }
.cover-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                 font-weight:800; font-size:30px; letter-spacing:1px; color:rgba(255,255,255,0.10); }
.cover-fallback b{ color:rgba(0,200,150,0.45); font-weight:800; }
.article-cover img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }

.article-body p{ color:#D6D6D8; margin:0 0 20px; }
.article-body h2{ font-weight:800; font-size:clamp(22px,3vw,28px); letter-spacing:-0.5px; margin:40px 0 14px; }
.article-body h3{ font-weight:700; font-size:19px; margin:28px 0 10px; }
.article-body strong{ color:var(--ink); font-weight:600; }
.article-body ul{ margin:0 0 20px; padding-left:0; list-style:none; }
.article-body ul li{ position:relative; padding-left:26px; margin-bottom:10px; color:#D6D6D8; }
.article-body ul li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
                             border-radius:2px; background:var(--green); }
.article-body blockquote{ margin:28px 0; padding:4px 0 4px 20px; border-left:3px solid var(--green);
                          color:var(--ink); font-size:20px; font-weight:600; line-height:1.4; }

/* Imagen dentro del texto (si la foto no existe, la figura se oculta sola) */
.article-img{ margin:28px 0; }
.article-img img{ width:100%; border-radius:14px; background:#141414; border:1px solid var(--line); }
.article-img figcaption{ color:var(--soft); font-size:13px; margin-top:8px; text-align:center; }

/* Puente a la app (se coloca EN MITAD del artículo, donde más engancha) */
.app-plug{ margin:32px 0; display:flex; flex-wrap:wrap; align-items:center; gap:16px;
           background:var(--green-soft); border:1px solid rgba(0,200,150,0.30);
           border-radius:16px; padding:20px 22px; }
.app-plug p{ margin:0; flex:1 1 240px; color:var(--ink); font-weight:600; font-size:16px; line-height:1.4; }
.app-plug .btn{ flex:0 0 auto; white-space:nowrap; }

/* Bloque CTA (embudo) */
.post-cta{ margin:48px auto 0; max-width:var(--read);
           background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; }
.post-cta h3{ font-weight:800; font-size:22px; letter-spacing:-0.4px; margin:0 0 10px; }
.post-cta p{ color:var(--muted); margin:0 0 20px; }
.post-cta .row{ display:flex; flex-wrap:wrap; gap:12px; }

/* Caja de autor */
.author{ display:flex; gap:16px; align-items:center; max-width:var(--read);
         margin:32px auto 0; padding:20px; background:var(--bg-alt);
         border:1px solid var(--line); border-radius:var(--radius); }
.author img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.author .name{ font-weight:700; }
.author .role{ color:var(--muted); font-size:14px; margin-top:2px; }
.post-note{ max-width:var(--read); margin:28px auto 0; font-size:13px; color:var(--soft); }

/* Pie */
.site-footer{ background:var(--bg-alt); border-top:1px solid var(--line); padding:48px 0 40px; margin-top:64px; }
.footer-top{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
             padding-bottom:28px; border-bottom:1px solid var(--line); }
.footer-logo{ font-weight:800; font-size:20px; letter-spacing:-0.5px; display:inline-flex; align-items:center; }
.footer-logo .in{ color:var(--green); }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
                  color:var(--muted); display:flex; align-items:center; justify-content:center;
                  transition:color .15s, border-color .15s; }
.footer-social a:hover{ color:var(--green); border-color:var(--green); }
.footer-social svg{ width:20px; height:20px; }
.footer-legal{ margin:24px 0 0; color:var(--soft); font-size:12.5px; line-height:1.6; max-width:78ch; }
.footer-copy{ margin:16px 0 0; color:var(--soft); font-size:12.5px; }

@media (max-width:620px){ .nav-right .back{ display:none; } }