/* ══════════════════════════════════════════════════════
   article.css — Estilos de artículo tipo "NASA brief"
   Tokens: navy #16255F · red #E4032E · paper #F4F6FA
   Fuentes: Fraunces (serif) + Barlow (sans)
   ══════════════════════════════════════════════════════ */

:root{
  --art-navy:#16255F;
  --art-red:#E4032E;
  --art-paper:#F4F6FA;
}

/* ── Hero (full-bleed) ── */
.art-hero{position:relative;min-height:420px;display:flex;align-items:flex-end;overflow:hidden;background:var(--art-navy)}
.art-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art-hero__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,37,95,.88) 0%,rgba(22,37,95,.45) 60%,rgba(22,37,95,.2) 100%)}
.art-hero__body{position:relative;z-index:2;padding:48px clamp(22px,5vw,64px) 40px;max-width:820px}
.art-hero .tag{display:inline-block;background:var(--art-red);color:#fff;font-family:'Barlow',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:5px 14px;border-radius:4px;margin-bottom:16px}
.art-hero h1{font-family:'Fraunces',serif;font-size:clamp(28px,4.5vw,48px);font-weight:800;line-height:1.12;color:#fff;margin:0 0 16px}
.art-hero__meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:'Barlow',sans-serif;font-size:13px;color:rgba(255,255,255,.75);font-weight:500}
.art-hero__meta span::before{content:"·";margin-right:8px;opacity:.5}
.art-hero__meta span:first-child::before{display:none}

/* ── Article body (centered reading column inside .wrap) ── */
.article{max-width:72ch;margin:0 auto;padding:48px 0 60px;font-family:'Barlow',sans-serif;font-size:17px;line-height:1.78;color:#23272F}
.article h2{font-family:'Fraunces',serif;font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--art-navy);margin:48px 0 16px;line-height:1.2}
.article h3{font-family:'Fraunces',serif;font-size:clamp(18px,2.4vw,23px);font-weight:700;color:var(--art-navy);margin:36px 0 12px;line-height:1.25}
.article p{margin:0 0 20px}
.article a{color:var(--art-red);text-decoration:underline;text-underline-offset:3px}
.article a:hover{color:var(--art-navy)}
.article strong,.article b{font-weight:700;color:var(--art-navy)}
.article em{font-style:italic}

/* ── Dropcap ── */
.article .dropcap::first-letter{float:left;font-family:'Fraunces',serif;font-size:3.6em;line-height:.82;font-weight:800;color:var(--art-red);margin:4px 12px 0 0;padding:0}

/* ── Mark / highlight (party red underline, NOT yellow) ── */
.article mark{background:linear-gradient(180deg,transparent 60%,rgba(228,3,46,.22) 0);color:inherit;font-weight:600;padding:0 .06em;border-radius:2px}

/* ── Box / callout ── */
.article .box{background:var(--art-paper);border:1px solid #e3e7f1;border-left:5px solid var(--art-red);border-radius:12px;padding:20px 24px;margin:28px 0}
.article .box__label{display:block;margin-bottom:6px;color:var(--art-red);font-family:'Barlow',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ── Stat circle ── */
.article .stat{display:flex;align-items:center;gap:18px;margin:28px 0;padding:24px 28px;background:var(--art-navy);border-radius:14px;color:#fff}
.article .stat__num{flex-shrink:0;width:72px;height:72px;border-radius:50%;background:var(--art-red);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:26px;font-weight:800;line-height:1}
.article .stat__num .red{color:var(--art-red)}

/* ── Steps (ordered) ── */
.article .steps{list-style:none;counter-reset:step;padding:0;margin:28px 0}
.article .steps li{counter-increment:step;display:flex;gap:16px;align-items:flex-start;margin-bottom:18px;padding:16px 20px;background:var(--art-paper);border-radius:12px;font-size:16px;line-height:1.55}
.article .steps li::before{content:counter(step);flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--art-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:800;font-size:15px}

/* ── Dots (unordered) ── */
.article .dots{list-style:none;padding:0;margin:28px 0}
.article .dots li{position:relative;padding:8px 0 8px 28px;margin-bottom:6px;font-size:16px;line-height:1.6}
.article .dots li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:10px;border-radius:50%;background:var(--art-red)}

/* ── Blockquote ── */
.article blockquote.quote{position:relative;margin:36px 0;padding:28px 28px 28px 32px;border-left:5px solid var(--art-red);background:var(--art-paper);border-radius:0 12px 12px 0;font-family:'Fraunces',serif;font-size:20px;font-style:italic;line-height:1.55;color:var(--art-navy)}
.article blockquote.quote::before{content:"\201C";position:absolute;top:-8px;left:12px;font-size:54px;font-family:'Fraunces',serif;color:var(--art-red);line-height:1;opacity:.35}

/* ── Lead text ── */
.article .lead{font-size:20px;line-height:1.7;color:#555;font-weight:400;margin-bottom:28px}

/* ── Eyebrow ── */
.article .eyebrow{display:inline-block;font-family:'Barlow',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--art-red);margin-bottom:8px}

/* ── Inline red ── */
.article .inline{color:var(--art-red);font-weight:600}

/* ── Engagement bar (inside .article) ── */
.faq{margin-top:48px;padding-top:32px;border-top:1px solid #e3e7f1}
.faq h3{margin-top:28px}
/* ── Neon engage bar ── */
.engage{margin-top:40px;padding-top:28px;border-top:none}
.engage__bar{padding:20px;background:linear-gradient(180deg,#0c1636,#0a1330);border:1px solid rgba(79,139,255,.25);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.engage__react{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.engage__btn{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow',sans-serif;font-weight:800;cursor:pointer;transition:.18s;text-decoration:none;line-height:1;border:2px solid}
.engage__btn svg{width:19px;height:19px;fill:currentColor;flex-shrink:0}
.engage__btn .ic{display:inline-flex;align-items:center}
.engage__btn .ic svg{width:18px;height:18px;fill:currentColor}
.engage__btn--heart{font-size:18px;padding:14px 30px;border-radius:14px;color:#ff7a84;border-color:#e30613;background:rgba(255,255,255,.02);box-shadow:0 0 18px rgba(227,6,19,.45),inset 0 0 12px rgba(227,6,19,.15);text-shadow:0 0 10px rgba(255,43,58,.6)}
.engage__btn--heart:hover{background:#e30613;color:#fff;box-shadow:0 0 28px rgba(255,43,58,.8)}
.engage__btn--heart.active{background:#e30613;color:#fff;box-shadow:0 0 28px rgba(255,43,58,.8);opacity:.85;cursor:default}
.engage__btn--like{font-size:18px;padding:14px 30px;border-radius:14px;color:#8fb2ff;border-color:#2f6bff;background:rgba(255,255,255,.02);box-shadow:0 0 18px rgba(47,107,255,.45),inset 0 0 12px rgba(47,107,255,.15);text-shadow:0 0 10px rgba(77,139,255,.6)}
.engage__btn--like:hover{background:#2f6bff;color:#fff;box-shadow:0 0 28px rgba(77,139,255,.8)}
.engage__btn--like.active{background:#2f6bff;color:#fff;box-shadow:0 0 28px rgba(77,139,255,.8);opacity:.85;cursor:default}
.engage__share{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;border-top:1px solid rgba(79,139,255,.18);padding-top:16px}
.engage__share .engage__btn{font-size:14px;font-weight:700;padding:11px 18px;border-radius:11px;color:#eaf0ff;border:1.5px solid rgba(159,176,216,.35);background:rgba(255,255,255,.02)}
.engage__share .engage__btn:hover{border-color:#00c2ff;box-shadow:0 0 16px rgba(0,194,255,.35);color:#fff}
.engage__share .engage__btn--wa svg{color:#25d366}
.engage__share .engage__btn--fb svg{color:#1877f2}
.engage__share .engage__btn--tw svg{color:#fff}
.engage__share .engage__btn--li svg{color:#0a66c2}
.engage__share .engage__btn--copy svg{color:#9fb0d8}
.engage__toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#0a1330;color:#eaf0ff;padding:10px 22px;border-radius:10px;font-size:14px;font-weight:600;font-family:'Barlow',sans-serif;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;border:1px solid rgba(79,139,255,.3);box-shadow:0 0 16px rgba(47,107,255,.3)}
.engage__toast.show{opacity:1}

/* ── Box variants ── */
.article .box--navy{background:var(--art-navy);color:#fff;border:0;border-left:0}
.article .box--navy .box__label{color:var(--art-red)}
.article .box--info{background:#E8ECF7;border-left-color:var(--art-navy)}
.article .box--info .box__label{color:var(--art-navy)}
.article .box--warn{background:#FDECEF;border-left-color:var(--art-red)}
.article .box--warn .box__label{color:var(--art-red)}

/* ── Highlight (centered pull quote) ── */
.article .highlight{background:var(--art-paper);color:var(--art-navy);font-family:'Fraunces',serif;font-size:22px;line-height:1.35;text-align:center;padding:26px;border-radius:14px;margin:30px 0}

/* ── Key figures (mini stat cards) ── */
.article .keyfig{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0}
.article .keyfig > div{flex:1;min-width:150px;background:var(--art-navy);color:#fff;border-radius:12px;padding:18px}
.article .keyfig .n{font-family:'Fraunces',serif;font-size:30px;color:var(--art-red);line-height:1}
.article .keyfig .l{font-size:13px;opacity:.85;margin-top:4px}

/* ── Back link ── */
.art-back{margin-top:24px}
.art-back a{color:var(--art-red);font-weight:600;font-family:'Barlow',sans-serif;text-decoration:none}
.art-back a:hover{text-decoration:underline}

/* ── Comparison table ── */
.article .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0;border:1px solid #e4e8f0;border-radius:12px}
.article table.cmp{width:100%;border-collapse:collapse;font-family:Barlow,sans-serif;font-size:15px;min-width:680px}
.article table.cmp thead th{background:var(--art-navy);color:#fff;text-align:left;padding:12px 14px;font-weight:600;font-size:13px;line-height:1.3}
.article table.cmp thead th.win{background:var(--art-red)}
.article table.cmp tbody th{background:var(--art-paper);color:var(--art-navy);text-align:left;font-weight:600;padding:12px 14px;white-space:nowrap;font-size:13px}
.article table.cmp td{padding:12px 14px;border-top:1px solid #e4e8f0;vertical-align:top;color:#1a2340;text-align:left}
.article table.cmp td.win{background:rgba(228,3,46,.06);box-shadow:inset 3px 0 0 var(--art-red);font-weight:600}
.article table.cmp tbody tr:nth-child(even) td:not(.win){background:#fbfcfe}

/* ── CTA plan button ── */
.article a.cta-plan{display:inline-flex;align-items:center;gap:10px;background:var(--art-red);color:#fff;font-weight:700;font-size:16px;padding:15px 28px;border-radius:10px;text-decoration:none;box-shadow:0 10px 24px -10px rgba(228,3,46,.55);margin:10px 0}
.article a.cta-plan:hover{background:#c00227;color:#fff}

/* ── Video CTA button ── */
.article .video-cta{display:inline-flex;align-items:center;gap:10px;background:var(--art-red);color:#fff;font-family:'Barlow',sans-serif;font-size:16px;font-weight:600;padding:14px 28px;border:none;border-radius:14px;cursor:pointer;box-shadow:0 8px 24px -8px rgba(228,3,46,.45);transition:transform .2s,box-shadow .2s;margin:24px 0;line-height:1}
.article .video-cta:hover{transform:scale(1.04);box-shadow:0 12px 28px -8px rgba(228,3,46,.55)}
.article .video-cta:active{transform:scale(.98)}
.article .video-cta__ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:rgba(255,255,255,.2);border-radius:50%}
.article .video-cta__ic::before{content:"";display:block;width:0;height:0;border-style:solid;border-width:6px 0 6px 11px;border-color:transparent transparent transparent #fff;margin-left:2px}

/* ── Video modal ── */
.video-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(15,23,42,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center}
.video-modal.open{display:flex;animation:vm-fade .25s ease}
@keyframes vm-fade{from{opacity:0}to{opacity:1}}
.video-modal__wrap{position:relative;aspect-ratio:9/16;max-height:88vh;width:auto;height:88vh}
.video-modal__box{width:100%;height:100%;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.video-modal__box iframe{display:block;width:100%;height:100%;border:0;border-radius:18px}
.video-modal__close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:none;background:#fff;color:var(--art-navy,#16255F);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:1;transition:transform .15s}
.video-modal__close:hover{transform:scale(1.1)}

/* ── Responsive ── */
@media(max-width:700px){
  .art-hero{min-height:320px}
  .art-hero__body{padding:32px 18px 28px}
  .article{padding:32px 0 40px}
  .article .stat{flex-direction:column;text-align:center}
  .engage__react .engage__btn{flex:1;justify-content:center;padding:14px 12px}
  .engage__share{gap:8px}
  .engage__share .engage__btn{flex:1;justify-content:center;padding:10px 12px;font-size:13px}
  .video-modal__wrap{width:94vw;height:auto;max-height:92vh}
}