:root{--v:#1a7a30;--v2:#399b53;--n:#0A0A0A;--b:#FFFFFF;--gl:#D1D5DB;--a:#F59E0B;--br:rgba(57,155,83,0.18);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--n);color:var(--b);font-family:'Space Mono',monospace;overflow-x:hidden;}






.loading{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
.loading-text{font-size:0.75rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,0.65);}
.loading-bar{width:160px;height:1px;background:rgba(255,255,255,.08);overflow:hidden;}
.loading-fill{height:100%;background:var(--v2);animation:ld 1.5s ease-in-out infinite;}
@keyframes ld{0%{width:0;transform:translateX(0);}50%{width:60%;}100%{width:0;transform:translateX(160px);}}
.art-wrap{max-width:740px;margin:0 auto;padding:120px 48px 80px;}
.art-back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,0.65);margin-bottom:40px;transition:color .3s;}
.art-back:hover{color:var(--a);}
.art-cat{font-size:0.75rem;letter-spacing:.25em;text-transform:uppercase;color:var(--a);display:block;margin-bottom:16px;}
.art-title{font-family:'DM Serif Display',serif;font-size:clamp(2rem,5vw,3.4rem);font-weight:400;line-height:1.05;margin-bottom:20px;}
.art-excerpt{font-size:0.75rem;line-height:1.85;color:rgba(255,255,255,0.65);margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.07);font-style:italic;}
.art-body{font-size:0.75rem;line-height:1.9;color:rgba(255,255,255,0.75);}
.art-body p{margin-bottom:24px;}
.art-body h3{font-family:'DM Serif Display',serif;font-size:1.3rem;font-weight:400;color:var(--b);margin:40px 0 16px;}
.art-body ul{padding-left:0;list-style:none;margin-bottom:24px;display:flex;flex-direction:column;gap:10px;}
.art-body ul li{padding-left:20px;position:relative;font-size:0.75rem;line-height:1.7;color:rgba(255,255,255,0.65);}
.art-body ul li::before{content:'--';position:absolute;left:0;color:var(--v2);font-weight:700;}
.art-intro{font-family:'DM Serif Display',serif;font-size:1.15rem;font-weight:400;line-height:1.6;color:rgba(255,255,255,0.9);margin-bottom:32px;padding-left:20px;border-left:2px solid var(--v2);}
.art-cierre{font-size:0.75rem;line-height:1.85;color:var(--a);margin-top:40px;padding-top:24px;border-top:1px solid rgba(57,155,83,.2);font-style:italic;}
.art-footer{margin-top:60px;padding-top:40px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.art-footer-cat{font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,0.65);}
.btn-back{background:transparent;border:1px solid rgba(57,155,83,.35);color:var(--b);padding:12px 24px;font-family:'Space Mono',monospace;font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:border-color .3s,color .3s;}
.btn-back:hover{border-color:var(--a);color:var(--a);}
.art-related{max-width:740px;margin:0 auto;padding:0 48px 80px;}
.rel-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.rel-n{font-family:'DM Serif Display',cursive;font-size:0.85rem;color:var(--a);}
.rel-line{flex:1;height:1px;background:var(--br);}
.rel-tag{font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,0.65);}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.rel-card{background:#111;border:1px solid rgba(255,255,255,.06);padding:22px;text-decoration:none;color:var(--b);transition:border-color .3s,background .3s;}
.rel-card:hover{border-color:var(--br);background:rgba(57,155,83,.03);}
.rel-cat{font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--a);display:block;margin-bottom:7px;}
.rel-title{font-family:'DM Serif Display',serif;font-size:0.95rem;font-weight:400;line-height:1.35;margin-bottom:6px;}
.rel-ex{font-size:0.75rem;line-height:1.65;color:rgba(255,255,255,0.65);}
.err{min-height:80vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:48px;}
.err h2{font-family:'DM Serif Display',serif;font-size:2rem;color:rgba(255,255,255,0.65);}
.err p{font-size:0.75rem;color:rgba(255,255,255,0.65);letter-spacing:.1em;}
footer{border-top:1px solid rgba(255,255,255,.05);padding:24px 48px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
footer p{font-size:0.75rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,0.65);}
@media(max-width:768px){.art-wrap,.art-related{padding:100px 20px 60px;}.rel-grid{grid-template-columns:1fr;}footer{padding:20px;flex-direction:column;}}
  @media(max-width:480px){
    
    .art-wrap,.art-related{padding:90px 16px 48px;}
    .art-title{font-size:clamp(1.6rem,8vw,2.4rem);}
  }

/* MOBILE NAV HAMBURGER */
.ham { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; z-index:300; border:none; background:transparent; }
.ham span { display:block; width:22px; height:1.5px; background:var(--b,#fff); transition:transform .3s, opacity .3s; }



.mob-menu {
  display:none; position:fixed; inset:0; z-index:250;
  background:rgba(10,10,10,.97); backdrop-filter:blur(20px);
  flex-direction:column; align-items:center; justify-content:center; gap:0;
  opacity:0; transform:translateY(-8px); transition:opacity .3s, transform .3s;
pointer-events:none;}
.mob-menu.open { opacity:1; transform:translateY(0); pointer-events:auto;}
.mob-menu a {
  font-family:'Space Mono',monospace; font-size:1rem; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(255,255,255,0.65); text-decoration:none;
  padding:20px 0; width:100%; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .25s, background .25s;
}
.mob-menu a:first-child { border-top:1px solid rgba(255,255,255,.06); }

.mob-menu a.on { color:#fff; }
@media(max-width:768px) {
  .ham { display:flex; }
  .nl, .nt { display:none !important; }
  .mob-menu { display:flex; pointer-events:none; }
  .mob-menu.open { pointer-events:all; }
}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:20px 48px;display:flex;justify-content:space-between;align-items:center;transition:background .4s;}
nav.on{background:rgba(10,10,10,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(57,155,83,.18);}
.n-logo{font-family:'DM Serif Display',serif;font-size:1rem;font-weight:900;letter-spacing:.15em;color:#fff;text-decoration:none;text-transform:uppercase;}
.n-logo .d{color:#399b53;}
.n-links{display:flex;gap:28px;align-items:center;}
.n-links a{font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,0.65);text-decoration:none;transition:color .3s;}
.n-links a:hover,.n-links a.on{color:#F59E0B;}
.n-tag{font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,0.65);}
/* HAMBURGER */
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;border:none;background:transparent;z-index:300;}
.ham span{display:block;width:22px;height:1.5px;background:#fff;transition:transform .3s,opacity .3s;}
.ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.ham.open span:nth-child(2){opacity:0;}
.ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mob-menu{display:none;position:fixed;inset:0;z-index:250;background:rgba(10,10,10,.97);backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s;pointer-events:none;}
.mob-menu.open{opacity:1;transform:translateY(0);pointer-events:all;}
.mob-menu a{font-family:'Space Mono',monospace;font-size:1rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,0.65);text-decoration:none;padding:20px 0;width:100%;text-align:center;border-bottom:1px solid rgba(255,255,255,.06);transition:color .25s;}
.mob-menu a:first-child{border-top:1px solid rgba(255,255,255,.06);}
.mob-menu a:hover,.mob-menu a.on{color:#F59E0B;}
@media(max-width:768px){
  nav{padding:16px 20px;}
  .ham{display:flex;}
  .n-links,.n-tag{display:none!important;}
  .mob-menu{display:flex;}
}


.art-practica{margin:56px 0 0;border:1px solid rgba(57,155,83,.32);background:rgba(57,155,83,.05);padding:30px 26px;}
.art-practica__k{display:block;font-family:'DM Serif Display',cursive;font-size:1.05rem;color:var(--a);margin-bottom:12px;}
.art-practica__t{font-family:'DM Serif Display',serif;font-size:clamp(1.2rem,3.4vw,1.7rem);line-height:1.3;color:#fff;margin:0 0 22px;}
.art-practica__b{display:inline-flex;align-items:center;gap:10px;background:var(--v);color:#fff;text-decoration:none;padding:14px 26px;font-family:'Space Mono',monospace;font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;transition:background .3s,transform .3s;}
.art-practica__b:hover{background:var(--v2);transform:translateY(-2px);}
@media(max-width:600px){.art-practica{padding:24px 18px;}.art-practica__b{width:100%;justify-content:center;}}

/* === build: lectura larga, migas, pilares === */
.progress-bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--v2);z-index:1001;transition:width .1s linear}
.crumbs{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.65);margin-bottom:28px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{color:rgba(255,255,255,0.65);text-decoration:none}.crumbs a:hover{color:var(--a)}
.crumbs b{color:rgba(255,255,255,0.65);font-weight:400}
.art-min{margin-left:16px;color:rgba(255,255,255,0.65)}
.art-meta{font-size:0.75rem;letter-spacing:.06em;color:rgba(255,255,255,0.65);margin:-16px 0 36px}
.art-body{font-size:0.92rem;line-height:1.85}
.art-body p{margin-bottom:22px}
.art-body h2{font-family:'DM Serif Display',serif;font-size:clamp(1.4rem,3.2vw,1.75rem);font-weight:400;color:var(--b);margin:48px 0 16px;line-height:1.2}
.art-body h3{font-size:1.15rem;margin:32px 0 12px}
.art-body ul li,.art-body ol li{font-size:0.88rem;line-height:1.75}
.art-body ol{margin:0 0 24px 1.2em;display:flex;flex-direction:column;gap:10px;color:rgba(255,255,255,0.72)}
.art-body ol li::marker{color:var(--v2);font-weight:700}
.art-body a,.guia-body a{color:var(--a);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(245,158,11,.4)}
.art-body a:hover,.guia-body a:hover{text-decoration-color:var(--a)}
.art-body strong{color:var(--b)}
.art-nota{font-size:0.75rem!important;color:rgba(255,255,255,0.65);font-style:italic;border-left:2px solid var(--br);padding-left:14px}
.art-footer-cat{text-decoration:none}
.art-footer-cat:hover{color:var(--a)}
.art-related.wide{max-width:1040px}
.art-related.wide .rel-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.rel-card:hover{border-color:var(--br)}
.tema-otros{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:0.75rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,0.65)}
.tema-chip{border:1px solid var(--br);padding:10px 14px;color:var(--b);text-decoration:none}
.tema-chip:hover{border-color:var(--a);color:var(--a)}
@media(max-width:600px){.rel-grid{grid-template-columns:1fr!important}.art-body,.guia-body{font-size:0.95rem}.art-min{display:block;margin:6px 0 0}}

/* === build: páginas de resultado del diagnóstico === */
.pat-head{border:1px solid var(--br);background:linear-gradient(180deg,rgba(26,122,48,.09),transparent);padding:32px;margin-bottom:34px}
.pat-kicker{font-size:0.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--a);display:block;margin-bottom:14px}
.pat-nombre{font-family:'DM Serif Display',serif;font-size:clamp(2.2rem,7vw,3.6rem);line-height:1;display:block;color:#fff}
.pat-lead{font-size:0.86rem;line-height:1.8;color:rgba(255,255,255,0.65);margin-top:16px;font-style:italic}
.pat-share{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btno{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--b);padding:15px 28px;font-family:'Space Mono',monospace;font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .3s,color .3s}
.btno:hover{border-color:var(--a);color:var(--a)}
.pat-share .btno{border-color:var(--br)}
.copy-ok{font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--v2)}
.pat-h1{font-size:clamp(1.5rem,4vw,2.2rem)!important;margin-bottom:28px}
.rec-link{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--br);background:#111;padding:22px;text-decoration:none;color:#fff;margin:36px 0;transition:border-color .3s}
.rec-link:hover{border-color:var(--a)}
.rec-cat{font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--a);display:block;margin-bottom:7px}
.rec-tit{font-family:'DM Serif Display',serif;font-size:1.05rem;line-height:1.3}
.rec-arr{color:var(--v2);font-size:1.1rem}
.pat-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px}
.pat-chip{background:#111;border:1px solid rgba(255,255,255,.06);padding:22px;text-decoration:none;color:#fff;transition:border-color .3s}
.pat-chip:hover{border-color:var(--a)}
.pat-chip__n{font-family:'DM Serif Display',serif;font-size:1.15rem;display:block;margin-bottom:8px}
.pat-chip__d{font-size:0.75rem;line-height:1.6;color:rgba(255,255,255,0.65)}
@media(max-width:600px){.pat-head{padding:24px 20px}}

/* fix: el CSS base fija TODO <nav>; las migas de pan son un <nav> y heredaban position:fixed */
nav.crumbs{position:static;top:auto;left:auto;right:auto;z-index:auto;padding:0;justify-content:flex-start;transition:none}
.pat-nombre__s{display:block;font-size:clamp(1rem,2.6vw,1.45rem);line-height:1.25;color:rgba(255,255,255,0.72);margin-top:10px}