/* ===========================================================
   Alejandro Miranda — Forward Deployed Engineer
   Design system: white hero · black body · Apple blue accent
   =========================================================== */
:root{
  --white:#FFFFFF;
  --snow:#F5F5F7;
  --black:#000000;
  --card:#141416;
  --card-2:#1B1B1E;
  --ink:#1D1D1F;
  --gray:#86868B;
  --gray-dark:#6E6E73;
  --text-dim:#A1A1A6;
  --blue:#0071E3;
  --blue-hover:#0077ED;
  --hair-l:rgba(29,29,31,.1);
  --hair-d:rgba(255,255,255,.12);
  --font:'Schibsted Grotesk',-apple-system,'SF Pro Display',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.4,0,.2,1);
  --maxw:1180px;
  --readw:720px;
  --r:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);color:#F5F5F7;
  font-family:var(--font);font-size:16px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--blue);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--blue);z-index:400}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:52px;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid rgba(29,29,31,.06);
  transition:background .5s var(--ease),border-color .5s;
}
.nav-inner{max-width:1024px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.nav-brand{font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:8px;transition:color .5s}
.nav-brand .mark{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:12.5px;font-weight:500;color:rgba(29,29,31,.75);transition:color .3s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{color:#fff!important;background:var(--blue);padding:7px 15px;border-radius:99px;font-size:12.5px;font-weight:600;transition:background .25s,transform .25s var(--ease)}
.nav-cta:hover{background:var(--blue-hover);transform:scale(1.04)}
.nav.dark{background:rgba(0,0,0,.72);border-bottom-color:rgba(255,255,255,.08)}
.nav.dark .nav-brand{color:#F5F5F7}
.nav.dark .nav-links a{color:rgba(245,245,247,.75)}
.nav.dark .nav-links a:hover{color:#fff}
@media(max-width:780px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- buttons ---------- */
.btn{font-family:var(--font);font-weight:600;font-size:15.5px;padding:15px 30px;border-radius:99px;display:inline-flex;align-items:center;gap:9px;transition:background .3s,transform .35s var(--ease),box-shadow .35s;cursor:pointer;border:none}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-hover);transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(0,113,227,.55)}
.btn-blue svg{transition:transform .3s var(--ease)}
.btn-blue:hover svg{transform:translateX(4px)}
.link-blue{color:var(--blue);font-size:15.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.link-blue:hover{text-decoration:underline}

/* ---------- shared section chrome ---------- */
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(96px,11vw,150px) clamp(22px,4.5vw,60px)}
.kicker{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.5}
h2{font-weight:800;letter-spacing:-.028em;line-height:1.08;font-size:clamp(1.9rem,4.2vw,3.2rem);max-width:24ch;margin-top:20px;color:#F5F5F7}
h2 .dim{color:var(--gray-dark)}
.lead{color:var(--text-dim);font-size:clamp(1rem,1.3vw,1.15rem);max-width:58ch;margin-top:20px}
.lead strong{color:#F5F5F7;font-weight:600}
.hairline{border-top:1px solid var(--hair-d)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---------- stack ticker ---------- */
.stack{border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d);padding:34px 0;overflow:hidden;background:var(--black)}
.ticker{display:flex;width:max-content;animation:ticker 32s linear infinite}
.stack:hover .ticker{animation-play-state:paused}
.ticker span{font-weight:700;font-size:15px;color:#F5F5F7;letter-spacing:-.01em;display:flex;align-items:center;white-space:nowrap;padding:0 32px;position:relative}
.ticker span::after{content:"";position:absolute;right:-3px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
@keyframes ticker{to{transform:translateX(-50%)}}
.stack-note{max-width:var(--maxw);margin:22px auto 0;padding:0 clamp(22px,4.5vw,60px);font-size:14px;color:var(--gray)}
.stack-note b{color:#F5F5F7;font-weight:700}

/* ---------- CTA ---------- */
.contacto{background:var(--black);text-align:center}
.contacto .kicker{justify-content:center}
.contacto h2{margin:20px auto 0;max-width:20ch}
.contacto .lead{margin:20px auto 0;max-width:46ch}
.contacto .btn{margin-top:36px}
.contact-lines{margin-top:40px;display:flex;justify-content:center;gap:36px;flex-wrap:wrap}
.contact-lines a{font-size:14.5px;font-weight:600;color:var(--gray);display:flex;align-items:center;gap:9px;transition:color .25s}
.contact-lines a:hover{color:#fff}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair-d)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:38px clamp(22px,4.5vw,60px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
footer .sig{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:8px;color:#F5F5F7}
footer .sig .mark{width:7px;height:7px;border-radius:50%;background:var(--blue)}
footer small{color:var(--gray);font-size:12.5px}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap}
.footer-nav a{font-size:12.5px;color:var(--gray);transition:color .25s}
.footer-nav a:hover{color:#F5F5F7}

/* ===========================================================
   BLOG
   =========================================================== */

/* --- blog masthead (white, like hero) --- */
.blog-head{background:var(--white);color:var(--ink);position:relative;overflow:hidden}
.blog-head .wash{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.7}
.blog-head .wash-a{width:600px;height:600px;background:radial-gradient(circle,#EAF2FB,transparent 65%);top:-20%;left:-10%}
.blog-head .wash-b{width:520px;height:520px;background:radial-gradient(circle,#F3F2F7,transparent 65%);top:10%;right:-12%}
.blog-head .inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:130px clamp(22px,4.5vw,60px) 70px}
.blog-head .eyebrow{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
.blog-head h1{font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:clamp(2.2rem,4.8vw,3.6rem);margin:18px 0 0;color:var(--ink);max-width:20ch}
.blog-head h1 .dim{color:var(--gray)}
.blog-head p.sub{max-width:60ch;margin:22px 0 0;color:var(--gray-dark);font-size:clamp(1rem,1.3vw,1.15rem)}

/* --- post grid --- */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
.post-card{
  display:block;border-radius:var(--r);padding:clamp(28px,3vw,38px);
  background:var(--card);border:1px solid rgba(255,255,255,.06);
  transition:transform .5s var(--ease),background .5s,border-color .5s;
}
.post-card:hover{transform:translateY(-8px);background:var(--card-2);border-color:rgba(255,255,255,.14)}
.post-card .tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.post-card h3{font-weight:800;letter-spacing:-.022em;font-size:1.3rem;line-height:1.22;margin:16px 0 10px;color:#F5F5F7}
.post-card p{color:var(--gray);font-size:.95rem;line-height:1.6}
.post-card .meta{margin-top:20px;font-size:12.5px;color:var(--gray-dark);display:flex;gap:14px;flex-wrap:wrap}
.post-card .go{margin-top:18px;color:var(--blue);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
@media(max-width:820px){.post-grid{grid-template-columns:1fr}}

/* --- article --- */
.article-head{background:var(--white);color:var(--ink);position:relative;overflow:hidden}
.article-head .wash{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.75}
.article-head .wash-a{width:620px;height:620px;background:radial-gradient(circle,#EAF2FB,transparent 65%);top:-24%;left:-12%}
.article-head .wash-b{width:520px;height:520px;background:radial-gradient(circle,#F3F2F7,transparent 65%);top:6%;right:-14%}
.article-head .inner{position:relative;z-index:2;max-width:var(--readw);margin:0 auto;padding:126px clamp(22px,4.5vw,40px) 60px}
.crumbs{font-size:12.5px;color:var(--gray);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--blue);font-weight:600}
.crumbs a:hover{text-decoration:underline}
.article-head h1{font-weight:800;letter-spacing:-.032em;line-height:1.06;font-size:clamp(2rem,4.4vw,3.2rem);margin:20px 0 0;color:var(--ink)}
.article-head .standfirst{margin-top:22px;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;color:var(--gray-dark)}
.byline{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair-l);display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--gray)}
.byline .who{color:var(--ink);font-weight:700}
.byline .dot{width:4px;height:4px;border-radius:50%;background:var(--gray);opacity:.5}

/* --- TL;DR answer box (AEO extraction target) --- */
.tldr{
  max-width:var(--readw);margin:0 auto;
  background:var(--card);border:1px solid rgba(0,113,227,.3);border-left:3px solid var(--blue);
  border-radius:16px;padding:26px 28px;
}
.tldr h2{font-size:12px!important;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 12px;max-width:none}
.tldr p{color:#F5F5F7;font-size:1.05rem;line-height:1.62;margin:0}

/* --- article body --- */
.article-body{max-width:var(--readw);margin:0 auto;padding:clamp(50px,6vw,72px) clamp(22px,4.5vw,40px) 40px}
.article-body > * + *{margin-top:22px}
.article-body h2{
  font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.026em;line-height:1.2;
  color:#F5F5F7;max-width:none;margin-top:58px;padding-top:8px;scroll-margin-top:70px;
}
.article-body h3{
  font-size:clamp(1.12rem,1.7vw,1.32rem);font-weight:700;letter-spacing:-.018em;line-height:1.3;
  color:#F5F5F7;margin-top:38px;scroll-margin-top:70px;
}
.article-body p{color:var(--text-dim);font-size:1.05rem;line-height:1.75}
.article-body p strong,.article-body li strong{color:#F5F5F7;font-weight:700}
.article-body a{color:var(--blue);font-weight:600}
.article-body a:hover{text-decoration:underline}
.article-body ul,.article-body ol{padding-left:22px;color:var(--text-dim)}
.article-body li{margin-bottom:11px;font-size:1.05rem;line-height:1.7}
.article-body li::marker{color:var(--blue)}
.article-body hr{border:none;border-top:1px solid var(--hair-d);margin:52px 0}

/* numbered steps */
.steps-ol{list-style:none;padding-left:0;counter-reset:step}
.steps-ol > li{
  counter-increment:step;position:relative;padding-left:46px;margin-bottom:26px;
}
.steps-ol > li::before{
  content:counter(step);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
.steps-ol > li > strong:first-child{display:block;color:#F5F5F7;font-size:1.08rem;margin-bottom:5px}

/* code */
.article-body code{
  font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.09);
  padding:2px 6px;border-radius:5px;color:#F5F5F7;
}
.article-body pre{
  background:var(--card);border:1px solid var(--hair-d);border-radius:14px;
  padding:20px 22px;overflow-x:auto;font-family:var(--mono);font-size:.86rem;line-height:1.65;
}
.article-body pre code{background:none;padding:0;font-size:inherit;color:#D8D8DC}
.code-label{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);
  margin-bottom:-12px;display:block;
}

/* tables */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid var(--hair-d)}
.article-body table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.article-body th{
  text-align:left;padding:14px 18px;background:rgba(255,255,255,.05);
  color:#F5F5F7;font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--hair-d);
}
.article-body td{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--text-dim);vertical-align:top}
.article-body tr:last-child td{border-bottom:none}
.article-body td strong{color:#F5F5F7}

/* callouts */
.note,.warn{
  border-radius:16px;padding:20px 24px;font-size:.99rem;line-height:1.65;
  display:flex;gap:14px;align-items:flex-start;
}
.note{background:rgba(0,113,227,.08);border:1px solid rgba(0,113,227,.24);color:#E8E8EA}
.warn{background:rgba(255,159,10,.08);border:1px solid rgba(255,159,10,.26);color:#E8E8EA}
.note strong,.warn strong{color:#fff;font-weight:700}
.note .ic,.warn .ic{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px;font-size:13px;font-weight:800}
.note .ic{background:var(--blue);color:#fff}
.warn .ic{background:#FF9F0A;color:#1D1D1F}

/* FAQ */
.faq{max-width:var(--readw);margin:0 auto;padding:0 clamp(22px,4.5vw,40px) 20px}
.faq-item{border-top:1px solid var(--hair-d);padding:26px 0}
.faq-item:last-child{border-bottom:1px solid var(--hair-d)}
.faq-item h3{font-size:1.1rem;font-weight:700;color:#F5F5F7;letter-spacing:-.015em;margin:0 0 10px}
.faq-item p{color:var(--text-dim);font-size:1.02rem;line-height:1.7;margin:0}

/* author box + next steps */
.author-box{
  max-width:var(--readw);margin:0 auto;
  background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);
  padding:clamp(28px,3vw,38px);
}
.author-box .who{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.author-box h3{font-weight:800;font-size:1.3rem;letter-spacing:-.02em;color:#F5F5F7;margin:14px 0 12px}
.author-box p{color:var(--text-dim);font-size:1rem;line-height:1.7}
.author-box .btn{margin-top:24px}

.related{max-width:var(--readw);margin:0 auto;padding:0 clamp(22px,4.5vw,40px)}
.related h2{font-size:1.3rem;max-width:none;margin-bottom:20px}
.related-list{display:grid;gap:12px}
.related-list a{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;
  padding:20px 24px;transition:background .4s,border-color .4s,transform .4s var(--ease);
}
.related-list a:hover{background:var(--card-2);border-color:rgba(255,255,255,.14);transform:translateX(4px)}
.related-list .t{font-weight:700;color:#F5F5F7;font-size:1rem;letter-spacing:-.015em}
.related-list .arrow{color:var(--blue);flex-shrink:0}

/* updated stamp */
.updated{
  max-width:var(--readw);margin:0 auto;padding:0 clamp(22px,4.5vw,40px);
  font-size:12.5px;color:var(--gray-dark);
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;transition-duration:.01s!important;animation-iteration-count:1!important}
  .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}