/* ============================================
   belgodere.com — estilos v3
   Paleta: off-white + navy + warm orange
   Más respiración, menos cream, más limpio.
   ============================================ */
:root{
  --bg:#F7F8FA;
  --bg-soft:#FFFFFF;
  --bg-alt:#ECEEF2;
  --bg-deep:#10233F;
  --bg-deep-soft:#1D3557;
  --ink:#1B1F2E;
  --ink-soft:#5A6172;
  --ink-faint:#9BA1B0;
  --accent:#D8762B;
  --accent-deep:#B85F1F;
  --accent-pale:#FBE9D6;
  --accent-red:#B43A2F;
  --paper-shadow:rgba(16,35,63,0.06);
  --rule:rgba(27,31,46,0.08);
  --rule-strong:rgba(27,31,46,0.16);
  --max:1200px;
  --max-text:680px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent-deep);text-decoration:none;transition:all .2s}
a:hover{color:var(--accent)}

h1,h2,h3,h4,h5{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ink);letter-spacing:-0.02em;line-height:1.12}
h1{font-size:clamp(40px,6vw,80px);font-weight:700}
h2{font-size:clamp(28px,3.4vw,42px);font-weight:600}
h3{font-size:clamp(22px,2.2vw,28px);font-weight:600}
h4{font-size:18px;font-weight:600;letter-spacing:0}
em{font-style:italic;color:var(--accent-deep)}

img{max-width:100%;height:auto;display:block}

/* MASTHEAD */
.kicker{
  font-family:'Fraunces',serif;font-style:italic;font-size:11px;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.18em;
  text-align:center;padding:8px 0;background:var(--bg-soft);
  border-bottom:1px solid var(--rule);
}
.masthead{
  border-bottom:1px solid var(--rule-strong);padding:14px 0 12px;
  background:rgba(247,248,250,.94);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50;
}
.masthead-inner{
  max-width:var(--max);margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-main{font-family:'Fraunces',serif;font-weight:700;font-size:28px;letter-spacing:-.01em}
.brand-sub{font-family:'Fraunces',serif;font-style:italic;font-size:12px;color:var(--ink-soft);margin-top:3px;letter-spacing:.04em}
.brand a{color:var(--ink)}
.brand a:hover{color:var(--accent-deep)}

nav.primary{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
nav.primary a{
  color:var(--ink);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;padding:6px 0;position:relative;
}
nav.primary a:hover{color:var(--accent-deep)}
nav.primary a.active{color:var(--accent-deep)}
nav.primary a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
}

/* HERO */
.hero{
  max-width:var(--max);margin:0 auto;padding:80px 32px 70px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:70px;align-items:center;
}
.hero-text h1{margin-bottom:12px}
.hero-text h1 .name-secondary{
  display:block;font-family:'Fraunces',serif;font-style:italic;
  font-weight:400;font-size:.32em;color:var(--ink-soft);margin-top:8px;letter-spacing:0;
}
.hero-tagline{
  font-family:'Fraunces',serif;font-size:24px;font-weight:500;font-style:italic;
  color:var(--accent-deep);margin:24px 0 30px;line-height:1.4;max-width:540px;
}
.hero-tagline em{color:var(--ink)}
.hero-intro{font-size:17px;color:var(--ink-soft);max-width:540px;line-height:1.7}
.hero-intro strong{color:var(--ink);font-weight:600}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 28px;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.06em;border:none;cursor:pointer;transition:all .2s;border-radius:0;
  text-transform:uppercase;
}
.btn-primary{background:var(--bg-deep);color:var(--bg-soft)}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg-soft)}

.portrait-wrap{position:relative;display:flex;justify-content:center}
.portrait-img{
  width:100%;max-width:380px;height:auto;
  filter:drop-shadow(0 22px 50px var(--paper-shadow));
}
.portrait-tag{
  position:absolute;bottom:16px;right:0;background:var(--bg-soft);
  padding:8px 16px;
  font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--accent-deep);
  border:1px solid var(--rule-strong);
}

/* MANIFIESTO */
.manifiesto{
  max-width:920px;margin:60px auto 90px;padding:60px 48px;
  text-align:center;background:var(--bg-soft);position:relative;
  border-top:3px double var(--rule-strong);border-bottom:3px double var(--rule-strong);
}
.manifiesto-mark{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--bg-soft);padding:6px 18px;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}
.manifiesto p{
  font-family:'Fraunces',serif;font-size:clamp(20px,2.4vw,28px);
  font-weight:500;line-height:1.45;color:var(--ink);
}
.manifiesto p em{color:var(--accent-deep)}

/* SECCIONES */
.section{max-width:var(--max);margin:0 auto;padding:80px 32px}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--rule-strong);padding-bottom:18px;margin-bottom:44px;
  flex-wrap:wrap;gap:14px;
}
.section-head h2{margin:0}
.section-head .meta{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--ink-soft)}
.section-head a.see-all{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--accent-deep);text-transform:uppercase;
}

/* ENSAYOS — sobrio y limpio (white) */
.essays-band{background:var(--bg-soft);padding:20px 0 0}
.essays-band .section{padding:60px 32px 80px}
.essays{display:grid;grid-template-columns:repeat(2,1fr);gap:36px}
.essay{
  display:flex;flex-direction:column;gap:14px;
  background:var(--bg-soft);overflow:hidden;
  border:1px solid var(--rule-strong);transition:all .25s;
}
.essay:hover{box-shadow:0 18px 40px var(--paper-shadow);border-color:var(--accent)}
.essay-thumb{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-deep);
}
.essay-thumb svg{width:100%;height:100%;display:block}
.essay-body{padding:28px;display:flex;flex-direction:column;gap:14px;flex-grow:1}
.essay-cat{
  display:inline-block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  color:var(--accent-deep);letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent-pale);padding:5px 12px;align-self:flex-start;
}
.essay h3{font-size:24px;line-height:1.2;font-weight:600}
.essay h3 a{color:var(--ink)}
.essay h3 a:hover{color:var(--accent-deep)}
.essay-excerpt{font-size:15.5px;color:var(--ink-soft);flex-grow:1;line-height:1.65}
.essay-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:'Inter',sans-serif;font-size:12px;color:var(--ink-soft);
}
.essay-byline strong{color:var(--ink);font-weight:600}

/* SHARE */
.share{display:flex;gap:6px;align-items:center}
.share a{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink-soft);border:1px solid var(--rule-strong);transition:all .2s;
}
.share a:hover{background:var(--ink);color:var(--bg-soft);border-color:var(--ink)}
.share svg{width:13px;height:13px;fill:currentColor}

/* LABORATORIO — sección oscura, más juguetona */
.visual-band{padding:90px 0}
.visual-band.dark{background:var(--bg-deep);color:var(--bg-soft)}
.visual-band.dark .section-head{border-color:rgba(255,255,255,.18)}
.visual-band.dark .section-head h2{color:var(--bg-soft)}
.visual-band.dark .section-head .meta{color:var(--accent-pale)}
.visual-band.dark .section-head a.see-all{color:var(--accent-pale)}
.visual-band.dark .section-head a.see-all:hover{color:var(--accent)}
.visual-intro{
  max-width:680px;margin-bottom:54px;
  font-family:'Fraunces',serif;font-style:italic;font-size:19px;line-height:1.55;
}
.visual-band.dark .visual-intro{color:var(--accent-pale)}
.visual-band.light{background:var(--bg-alt)}
.visual-band.light .visual-intro{color:var(--ink-soft)}

.visual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.vcard{
  display:flex;flex-direction:column;background:var(--bg-soft);overflow:hidden;
  transition:all .25s;border:1px solid var(--rule);color:var(--ink);
}
.vcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.vcard a{color:inherit}

/* THUMBNAIL CON CROP — muestra solo el top de la infografía */
.vcard-img{
  aspect-ratio:5/4;background:var(--bg-alt);display:block;
  position:relative;overflow:hidden;
}
.vcard-img img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;
}
.vcard-img-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bg-alt),var(--accent-pale));
  font-family:'Fraunces',serif;font-style:italic;font-size:13px;color:var(--ink-soft);
  text-align:center;padding:30px;
}
.vcard-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex-grow:1}
.vcard-tag{
  display:inline-block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  color:var(--accent-deep);letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:10px;
}
.vcard-title{font-family:'Fraunces',serif;font-size:21px;font-weight:600;color:var(--ink);line-height:1.2;margin-bottom:10px}
.vcard-desc{font-size:14.5px;color:var(--ink-soft);line-height:1.55;flex-grow:1;margin-bottom:14px}
.vcard-cta{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--accent-deep);text-transform:uppercase;
}

/* PÁGINA INDIVIDUAL DE LAB / PACONOMICS */
.piece-page{max-width:980px;margin:0 auto;padding:70px 32px 50px}
.piece-head{text-align:center;margin-bottom:60px;padding-bottom:50px;border-bottom:1px solid var(--rule-strong)}
.piece-cat{
  display:inline-block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  color:var(--accent-deep);letter-spacing:.18em;text-transform:uppercase;
  background:var(--accent-pale);padding:6px 16px;margin-bottom:24px;
}
.piece-page h1{font-size:clamp(32px,4.4vw,52px);margin-bottom:24px;letter-spacing:-.02em}
.piece-subtitle{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--ink-soft);max-width:680px;margin:0 auto;line-height:1.45}
.piece-infografia{margin:0 auto 70px;max-width:920px;background:var(--bg-soft);padding:30px;border:1px solid var(--rule-strong)}
.piece-infografia img{width:100%;height:auto;display:block}
.piece-infografia-placeholder{
  width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bg-alt),var(--accent-pale));
  font-family:'Fraunces',serif;font-style:italic;color:var(--ink-soft);text-align:center;padding:60px;
}
.piece-body{max-width:680px;margin:0 auto}
.piece-body p{font-size:17.5px;line-height:1.78;margin-bottom:22px}
.piece-body p.lead::first-letter{
  font-family:'Fraunces',serif;font-weight:700;font-size:4em;float:left;line-height:.85;margin:8px 12px 0 0;color:var(--accent);
}
.piece-body h2{font-family:'Fraunces',serif;font-size:26px;font-weight:600;margin:44px 0 16px}
.piece-body h3{font-family:'Fraunces',serif;font-size:21px;font-weight:600;margin:30px 0 12px;color:var(--ink)}
.piece-body ul,.piece-body ol{margin:0 0 22px 26px;font-size:16.5px;line-height:1.7}
.piece-body li{margin-bottom:8px}
.piece-body blockquote{
  margin:30px 0;padding:24px 30px;background:var(--accent-pale);
  border-left:4px solid var(--accent);
  font-family:'Fraunces',serif;font-style:italic;font-size:18px;line-height:1.55;
}
.piece-body strong{font-weight:600}
.piece-body em{font-style:italic;color:var(--accent-deep)}
.callout{
  margin:30px 0;padding:24px 28px;background:var(--bg-deep);color:var(--bg-soft);
}
.callout-tag{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.callout p{color:var(--bg-soft);font-size:17px;margin:0;line-height:1.55}
.callout em{color:var(--accent-pale)}

.piece-foot{
  margin-top:70px;padding-top:50px;border-top:1px solid var(--rule-strong);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
}
.piece-share-block{display:flex;gap:16px;align-items:center}
.piece-share-label{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--ink-soft)}
.piece-share-block .share a{width:36px;height:36px}
.piece-share-block .share svg{width:15px;height:15px}

/* SOBRE MÍ preview en home */
.sobre-preview{
  display:grid;grid-template-columns:.9fr 1.6fr;gap:60px;align-items:center;margin-top:30px;
}
.sobre-foto{display:flex;justify-content:center}
.sobre-foto img{width:100%;max-width:300px;filter:drop-shadow(0 18px 40px var(--paper-shadow))}
.sobre-content h2{font-size:34px;margin-bottom:8px}
.sobre-content .nombre-formal{
  font-family:'Fraunces',serif;font-style:italic;font-size:15px;
  color:var(--ink-soft);margin-bottom:24px;
}
.sobre-content p{font-size:17px;color:var(--ink);margin-bottom:18px;max-width:580px;line-height:1.7}
.path-cta{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent-deep);text-transform:uppercase}

/* PÁGINA SOBRE MÍ */
.sobre-page{max-width:var(--max-text);margin:0 auto;padding:70px 32px 90px}
.sobre-hero{text-align:center;margin-bottom:60px}
.sobre-hero img{max-width:300px;height:auto;margin:0 auto 24px;display:block;filter:drop-shadow(0 18px 40px var(--paper-shadow))}
.sobre-hero h1{font-size:clamp(32px,4vw,46px);margin-bottom:8px}
.sobre-hero .nombre-formal{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--ink-soft);margin-top:6px}
.sobre-page p{font-size:17.5px;line-height:1.75;margin-bottom:22px;color:var(--ink)}
.sobre-page p.lead::first-letter{
  font-family:'Fraunces',serif;font-weight:700;font-size:4em;float:left;line-height:.85;margin:6px 10px 0 0;color:var(--accent);
}
.sobre-page h2{font-size:28px;margin:50px 0 18px;font-weight:600}
.facts{margin:40px 0;padding:36px 32px;background:var(--bg-soft);border-left:4px solid var(--accent);border:1px solid var(--rule)}
.fact{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.fact:last-child{border-bottom:none}
.fact-key{
  flex:0 0 200px;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;
  color:var(--accent-deep);letter-spacing:.12em;text-transform:uppercase;padding-top:5px;
}
.fact-val{flex:1;font-family:'Fraunces',serif;font-size:17px;color:var(--ink);line-height:1.5}

/* PÁGINA DE ENSAYO */
.essay-page{max-width:var(--max-text);margin:0 auto;padding:70px 32px 50px}
.essay-page-head{text-align:center;margin-bottom:60px;padding-bottom:50px;border-bottom:1px solid var(--rule-strong)}
.essay-page-cat{
  display:inline-block;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;
  color:var(--accent-deep);letter-spacing:.18em;text-transform:uppercase;
  background:var(--accent-pale);padding:5px 14px;margin-bottom:24px;
}
.essay-page h1{font-size:clamp(34px,4.4vw,52px);margin-bottom:24px;letter-spacing:-.02em;font-weight:700}
.essay-page-byline{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--ink-soft)}
.essay-page-byline strong{color:var(--ink);font-weight:600;font-style:normal}
.essay-page-byline .sep{color:var(--ink-faint);margin:0 10px}

.essay-body-content p{font-size:18px;line-height:1.78;margin-bottom:24px;color:var(--ink)}
.essay-body-content p.lead::first-letter{
  font-family:'Fraunces',serif;font-weight:700;font-size:4.4em;float:left;line-height:.85;margin:8px 12px 0 0;color:var(--accent);
}
.essay-body-content h2{font-family:'Fraunces',serif;font-size:28px;font-weight:600;margin:50px 0 20px}
.essay-body-content h3{font-family:'Fraunces',serif;font-size:21px;font-weight:600;margin:34px 0 14px}
.essay-body-content ul,.essay-body-content ol{margin:0 0 24px 26px;font-size:17px;line-height:1.75}
.essay-body-content li{margin-bottom:10px}
.essay-body-content blockquote{
  margin:30px 0;padding:24px 30px;background:var(--accent-pale);border-left:4px solid var(--accent);
  font-family:'Fraunces',serif;font-style:italic;font-size:18px;line-height:1.55;
}
.essay-body-content strong{font-weight:600}
.essay-body-content em{font-style:italic;color:var(--accent-deep)}

.essay-page-foot{
  margin-top:70px;padding-top:50px;border-top:1px solid var(--rule-strong);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
}

/* MÁS contenido */
.more-band{background:var(--bg-alt);padding:80px 0;margin-top:70px}
.more-inner{max-width:var(--max);margin:0 auto;padding:0 32px}
.more-band h3{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:30px}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}

/* 404 */
.error-page{
  min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 32px;
}
.error-page .num{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(80px,15vw,160px);color:var(--accent);line-height:.9;margin-bottom:20px}
.error-page h1{font-size:clamp(28px,3.2vw,40px);margin-bottom:14px}
.error-page p{font-size:17px;color:var(--ink-soft);max-width:480px;margin-bottom:30px;line-height:1.6}

/* FOOTER */
footer{background:var(--bg-deep);color:var(--bg-soft);margin-top:0;padding:70px 0 30px}
.foot-inner{max-width:var(--max);margin:0 auto;padding:0 32px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand{font-family:'Fraunces',serif;font-size:34px;font-weight:700;margin-bottom:10px}
.foot-tagline{font-family:'Fraunces',serif;font-style:italic;color:rgba(255,255,255,.74);font-size:15px;max-width:340px;line-height:1.5}
.foot-col h4{color:var(--bg-soft);font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:8px}
.foot-col a{color:rgba(255,255,255,.74);font-size:14px}
.foot-col a:hover{color:var(--accent)}
.foot-names{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.10);font-family:'Fraunces',serif;font-style:italic;font-size:13px;color:rgba(255,255,255,.65);line-height:1.7}
.foot-names strong{color:var(--bg-soft);font-style:normal;font-weight:600}
.foot-legal{display:flex;justify-content:space-between;align-items:center;margin-top:28px;font-size:12px;color:rgba(255,255,255,.55);flex-wrap:wrap;gap:14px;font-family:'Inter',sans-serif}
.foot-legal a{color:rgba(255,255,255,.65)}

/* RESPONSIVE */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding:50px 24px;gap:30px}
  .essays,.visual-grid,.more-grid{grid-template-columns:1fr}
  .sobre-preview{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .fact{flex-direction:column;gap:4px}
  .fact-key{flex:none}
  nav.primary{display:none}
  .section{padding:60px 24px}
  .essays-band .section{padding:50px 24px 60px}
}
@media (max-width:560px){
  .foot-top{grid-template-columns:1fr}
}