/* ============================================
   THE OPTIMIZER — POST BASE STYLES
   Hereda variables de styles.css cargado antes
============================================ */

/* Restore native cursor in blog posts.
   styles.css applies `*{cursor:none}` globally for the home's
   custom cursor (driven by app.js which we don't load here),
   so without this override the cursor disappears in posts. */
*,*::before,*::after{cursor:auto !important}
a,button,[role="button"],summary,label{cursor:pointer !important}

/* RESET POST CONTAINER */
.post-wrap{min-height:100vh;background:var(--black);color:var(--white);font-family:var(--font-mono);position:relative;overflow-x:hidden}

/* TOP BAR */
.post-topbar{padding:25px 50px;border-bottom:1px solid var(--g800);display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,0.6);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}
.post-topbar-brand{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:4px;color:var(--green);text-shadow:0 0 8px var(--green-glow);text-decoration:none;text-transform:uppercase}
.post-topbar-brand i{font-style:normal;color:var(--g500);font-weight:400}
.post-topbar-back{font-family:var(--font-mono);font-size:12px;color:var(--g400);text-decoration:none;letter-spacing:2px;transition:color .25s}
.post-topbar-back:hover{color:var(--green)}

/* HERO */
.post-hero{padding:80px 50px 60px;max-width:880px;margin:0 auto;border-bottom:1px solid var(--g800)}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--green);text-shadow:0 0 6px var(--green-glow);text-transform:uppercase;margin-bottom:25px}
.post-meta span{padding:4px 10px;border:1px solid rgba(0,255,65,0.3);background:rgba(0,255,65,0.04)}
.post-meta .meta-plain{padding:4px 0;border:none;background:none;color:var(--g400);text-shadow:none}
.post-h1{font-family:var(--font-display);font-size:clamp(32px,5vw,56px);font-weight:900;line-height:1.1;letter-spacing:-1.5px;color:var(--white);text-wrap:balance;margin-bottom:25px}
.post-h1 .accent{color:var(--green);text-shadow:0 0 25px var(--green-glow),0 0 60px rgba(0,255,65,0.2)}
.post-deck{font-family:var(--font-mono);font-size:18px;line-height:1.7;color:var(--g300);max-width:720px;text-wrap:pretty}
.post-deck strong{color:var(--white)}

/* TOC (table of contents) */
.post-toc{max-width:880px;margin:50px auto 0;padding:25px 30px;background:var(--g900);border:1px solid var(--g800);position:relative}
.post-toc::before{content:'> CONTENIDO';position:absolute;top:-10px;left:20px;padding:0 10px;background:var(--black);font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--green);text-shadow:0 0 6px var(--green-glow)}
.post-toc ol{list-style:none;counter-reset:toc-counter;display:grid;grid-template-columns:1fr 1fr;gap:8px 30px;padding:0}
.post-toc li{counter-increment:toc-counter;padding:6px 0;font-family:var(--font-mono);font-size:13px;line-height:1.4}
.post-toc li::before{content:counter(toc-counter,decimal-leading-zero) ". ";color:var(--green);font-weight:700}
.post-toc a{color:var(--g300);text-decoration:none;transition:color .25s}
.post-toc a:hover{color:var(--green)}

/* CONTENT */
.post-content{max-width:740px;margin:0 auto;padding:60px 30px 40px}
.post-content h2{font-family:var(--font-display);font-size:clamp(26px,3.5vw,40px);font-weight:900;color:var(--white);line-height:1.2;letter-spacing:-0.8px;margin:60px 0 24px;padding-top:30px;border-top:1px dashed var(--g700);scroll-margin-top:80px}
.post-content h2:first-child{border-top:none;padding-top:0;margin-top:0}
.post-content h2::before{content:'> ';color:var(--green);font-family:var(--font-mono);text-shadow:0 0 8px var(--green-glow);font-weight:400}
.post-content h3{font-family:var(--font-display);font-size:clamp(20px,2.5vw,26px);font-weight:800;color:var(--white);margin:40px 0 16px;line-height:1.3}
.post-content h4{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--green);text-shadow:0 0 6px var(--green-glow);letter-spacing:2px;text-transform:uppercase;margin:30px 0 14px}
.post-content p{font-family:var(--font-mono);font-size:16px;line-height:1.85;color:var(--g300);margin-bottom:20px;text-wrap:pretty}
.post-content p strong{color:var(--white);font-weight:700}
.post-content p em{color:var(--green);font-style:normal;text-shadow:0 0 4px var(--green-glow)}
.post-content a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(0,255,65,0.3);transition:border-color .25s}
.post-content a:hover{border-bottom-color:var(--green)}
.post-content ul,.post-content ol{margin:0 0 24px 0;padding-left:0;list-style:none}
.post-content li{font-family:var(--font-mono);font-size:16px;line-height:1.75;color:var(--g300);padding-left:28px;position:relative;margin-bottom:10px}
.post-content ul li::before{content:'▸';position:absolute;left:0;top:0;color:var(--green);font-weight:700;text-shadow:0 0 6px var(--green-glow)}
.post-content ol{counter-reset:item-counter}
.post-content ol li{counter-increment:item-counter}
.post-content ol li::before{content:counter(item-counter,decimal-leading-zero);position:absolute;left:0;top:0;color:var(--green);font-family:var(--font-mono);font-weight:700;text-shadow:0 0 6px var(--green-glow);font-size:13px}

/* QUOTE / CALLOUT */
.post-content blockquote{margin:35px 0;padding:25px 30px;border-left:3px solid var(--green);background:rgba(0,255,65,0.04);font-family:var(--font-display);font-size:21px;font-weight:700;line-height:1.4;color:var(--white);letter-spacing:-0.3px}
.post-content blockquote p{font-family:inherit;font-size:inherit;color:inherit;margin:0;line-height:inherit}
.post-content .callout{margin:30px 0;padding:25px 30px;border:1px solid var(--g800);background:var(--g900);position:relative}
.post-content .callout::before{content:attr(data-label);position:absolute;top:-9px;left:20px;padding:0 10px;background:var(--black);font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--green);text-shadow:0 0 6px var(--green-glow)}
.post-content .callout p:last-child{margin-bottom:0}

/* TABLE */
.post-content table{width:100%;border-collapse:collapse;margin:30px 0;font-family:var(--font-mono);font-size:14px}
.post-content th,.post-content td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--g800)}
.post-content th{font-weight:700;color:var(--green);text-shadow:0 0 6px var(--green-glow);text-transform:uppercase;font-size:11px;letter-spacing:2px;border-bottom:2px solid var(--green)}
.post-content td{color:var(--g300)}

/* CODE */
.post-content code{font-family:var(--font-mono);font-size:14px;background:var(--g900);border:1px solid var(--g800);padding:2px 8px;color:var(--green);text-shadow:0 0 4px var(--green-glow)}

/* CTA POST */
.post-cta{max-width:880px;margin:80px auto 0;padding:60px 50px;background:linear-gradient(135deg,rgba(0,255,65,0.05) 0%,var(--g900) 100%);border:1px solid var(--green);text-align:center}
.post-cta h3{font-family:var(--font-display);font-size:clamp(24px,3.5vw,38px);font-weight:900;color:var(--white);line-height:1.2;letter-spacing:-0.5px;margin-bottom:18px;text-wrap:balance}
.post-cta h3 .accent{color:var(--green);text-shadow:0 0 20px var(--green-glow)}
.post-cta p{font-family:var(--font-mono);font-size:16px;line-height:1.7;color:var(--g300);max-width:560px;margin:0 auto 30px}
.post-cta .btn-main{display:inline-block;padding:18px 38px;background:var(--green);color:#000;font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;text-decoration:none;transition:all .3s;border:none}
.post-cta .btn-main:hover{box-shadow:0 0 25px var(--green-glow);transform:translateY(-2px)}

/* FOOTER POST */
.post-footer{padding:50px 30px;border-top:1px solid var(--g800);text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--g500);letter-spacing:1px;margin-top:60px}
.post-footer a{color:var(--green);text-decoration:none}
.post-footer-related{max-width:880px;margin:0 auto 40px;text-align:left}
.post-footer-related h4{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--g400);margin-bottom:18px;text-transform:uppercase}
.post-footer-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.post-footer-related-card{padding:20px;border:1px solid var(--g800);background:var(--g900);text-decoration:none;display:block;transition:all .3s}
.post-footer-related-card:hover{border-color:var(--green);transform:translateY(-2px)}
.post-footer-related-card .ftr-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--green);text-shadow:0 0 6px var(--green-glow);margin-bottom:8px}
.post-footer-related-card h5{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--white);line-height:1.3}

/* SCANLINES BG (subtle) */
.post-wrap::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,255,65,0.012) 2px,rgba(0,255,65,0.012) 3px);pointer-events:none;z-index:1}
.post-topbar,.post-hero,.post-content,.post-cta,.post-footer{position:relative;z-index:2}

/* RESPONSIVE */
@media(max-width:768px){
  .post-topbar{padding:18px 20px}
  .post-topbar-brand{font-size:11px;letter-spacing:2px}
  .post-topbar-back{font-size:10px}
  .post-hero{padding:50px 20px 40px}
  .post-deck{font-size:16px}
  .post-toc{margin:30px 20px 0}
  .post-toc ol{grid-template-columns:1fr;gap:4px}
  .post-content{padding:40px 20px}
  .post-content p,.post-content li{font-size:15px;line-height:1.75}
  .post-content blockquote{padding:18px 20px;font-size:17px}
  .post-content .callout{padding:18px 20px}
  .post-content table{font-size:12px}
  .post-content th,.post-content td{padding:10px 12px}
  .post-cta{margin:50px 20px 0;padding:35px 25px}
  .post-footer{padding:35px 20px}
  .post-footer-related{margin:0 20px 30px}
  .post-footer-related-grid{grid-template-columns:1fr}
}