/* ============ SUCESIÓN — Sistema compartido entre páginas internas ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--bronce);color:var(--marfil)}

:root{
  --negro:#0A0A0A;
  --marfil:#F2EFE9;
  --marfil-2:#EAE5DA;
  --bronce:#8C6F44;
  --bronce-claro:#A88656;
  --bronce-luz:#E8D4A8;
  --plomo:#2B2B2B;
  --plomo-2:#4A4A48;
  --linea:rgba(10,10,10,.14);
  --linea-clara:rgba(242,239,233,.16);
  --serif:'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gutter:32px;
  --max:1320px;
}

body{
  background:var(--marfil);
  color:var(--negro);
  font-family:var(--sans);
  font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
}

.eyebrow{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--plomo-2)}
.serif{font-family:var(--serif);font-weight:400}

/* ============ Nav ============ */
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  padding:22px var(--gutter);color:var(--negro);
  background:rgba(242,239,233,.94);
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:0 1px 0 var(--linea);
  transition:background .35s ease, color .35s ease, padding .35s ease, box-shadow .35s ease, top .35s ease;
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:22px;letter-spacing:.14em;font-weight:400}
.brand-mark{display:inline-flex;flex-direction:column;gap:3px;align-items:flex-start}
.brand-mark span{display:block;width:11px;height:2px;background:currentColor;border-radius:1px}
.brand-mark span:nth-child(2){width:16px;margin-left:4px}
.brand-mark span:nth-child(3){width:22px;margin-left:9px}

.brand-logo{height:22px;width:auto;display:block}
.brand-word{text-transform:uppercase;letter-spacing:.22em;font-size:16px;font-family:var(--sans);font-weight:500}
.menu{display:flex;gap:36px;justify-self:center;font-size:13px;font-weight:400;letter-spacing:.01em}
.menu a{position:relative;padding:6px 0;opacity:.92;transition:opacity .2s}
.menu a:hover, .menu a.active{opacity:1}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bronce);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1)}
.cta-header{padding:11px 20px;background:var(--bronce);color:var(--marfil);font-size:13px;font-weight:500;border:1px solid var(--bronce);transition:background .3s ease}
.cta-header:hover{background:var(--bronce-claro);border-color:var(--bronce-claro)}
.menu-mobile{display:none;padding:8px}
.menu-mobile svg{width:24px;height:24px}

/* ============ HERO INTERIOR (portada de sección editorial) ============ */
.interior-hero{
  padding:180px var(--gutter) 100px;
  background:var(--marfil);
  border-bottom:1px solid var(--linea);
  position:relative;
}
.interior-hero-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:auto 1fr;
  gap:80px;align-items:end;
}
.section-mark{
  display:flex;flex-direction:column;gap:10px;
  align-items:flex-start;
  padding-right:56px;
  border-right:1px solid var(--linea);
  min-width:180px;
}
.section-mark .roman{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:88px;line-height:.9;color:var(--bronce);
  letter-spacing:-.02em;
}
.section-mark .label{
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--plomo-2);font-weight:500;
  margin-top:4px;
}
.section-mark .rule{width:32px;height:1px;background:var(--bronce);margin-top:16px}

.hero-body{max-width:820px}
.hero-body .crumbs{
  display:flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--plomo-2);font-weight:500;
  margin-bottom:32px;
}
.hero-body .crumbs a{color:var(--bronce);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
.hero-body .crumbs a:hover{border-color:var(--bronce)}
.hero-body .crumbs .sep{color:rgba(10,10,10,.28)}

.hero-body h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(48px,6.6vw,100px);
  line-height:.98;letter-spacing:-.028em;
  color:var(--negro);text-wrap:balance;
  margin-bottom:36px;
}
.hero-body h1 em{font-style:italic;color:var(--bronce);font-weight:300}

.hero-body .dek{
  font-family:var(--serif);
  font-size:clamp(19px, 1.9vw, 26px);
  line-height:1.45;letter-spacing:-.008em;
  color:var(--plomo);
  font-weight:400;
  max-width:680px;
  margin-bottom:44px;
  text-wrap:pretty;
}
.hero-body .dek em{font-style:italic;color:var(--bronce-claro)}

.hero-meta{
  display:flex;gap:36px;flex-wrap:wrap;
  padding-top:28px;
  border-top:1px solid var(--linea);
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--plomo-2);font-weight:500;
}
.hero-meta .item{display:flex;flex-direction:column;gap:6px}
.hero-meta .item b{
  font-family:var(--serif);font-style:italic;
  font-weight:400;font-size:15px;
  color:var(--negro);letter-spacing:.01em;
  text-transform:none;
}

/* ============ ENSAYO ============ */
.ensayo{
  padding:100px var(--gutter);
  background:var(--marfil);
}
.ensayo-inner{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:180px 1fr;
  gap:64px;
  align-items:flex-start;
}
.ensayo-toc{
  position:sticky;top:130px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--plomo-2);font-weight:500;
}
.ensayo-toc .toc-label{margin-bottom:16px;color:var(--bronce)}
.ensayo-toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ensayo-toc a{
  display:flex;align-items:baseline;gap:10px;
  padding:6px 0;
  border-bottom:1px solid var(--linea);
  color:var(--plomo-2);
  transition:color .2s, border-color .2s;
}
.ensayo-toc a:hover{color:var(--negro);border-color:var(--bronce)}
.ensayo-toc a b{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:14px;color:var(--bronce);letter-spacing:.02em;text-transform:none;
  min-width:22px;
}
.ensayo-toc a span{font-size:10.5px;letter-spacing:.18em}

.ensayo-body{
  max-width:720px;
}
.seccion{
  padding-bottom:80px;
  border-bottom:1px solid var(--linea);
  margin-bottom:80px;
}
.seccion:last-child{border-bottom:0;margin-bottom:0}
.seccion .sec-num{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:56px;color:var(--bronce);line-height:1;
  margin-bottom:12px;letter-spacing:-.01em;
}
.seccion h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,3.8vw,52px);
  line-height:1.08;letter-spacing:-.02em;
  color:var(--negro);
  margin-bottom:40px;
  text-wrap:balance;
}
.seccion h2 em{font-style:italic;color:var(--bronce);font-weight:300}

.seccion p{
  font-family:var(--serif);
  font-size:20px;line-height:1.6;
  color:var(--plomo);letter-spacing:-.005em;
  margin-bottom:22px;
  font-weight:400;
  text-wrap:pretty;
}
.seccion p:last-child{margin-bottom:0}
.seccion p em{font-style:italic;color:var(--negro)}
.seccion p strong{font-weight:500;color:var(--negro)}
.seccion p a{color:var(--bronce);border-bottom:1px solid var(--bronce);padding-bottom:1px;transition:color .2s}
.seccion p a:hover{color:var(--negro);border-bottom-color:var(--negro)}

/* Capitular al inicio de cada sección */
.seccion.dropcap p:first-of-type::first-letter{
  font-family:var(--serif);
  font-style:italic;font-weight:300;
  font-size:76px;line-height:.85;
  color:var(--bronce);
  float:left;
  padding:8px 14px 0 0;
}

.seccion h3{
  font-family:var(--serif);
  font-weight:500;font-size:24px;
  line-height:1.25;letter-spacing:-.005em;
  color:var(--negro);
  margin:36px 0 14px;
}

.seccion ol.paso-list,
.seccion ul.paso-list{
  list-style:none;padding:0;margin:32px 0 24px;
  display:flex;flex-direction:column;
}
.seccion ol.paso-list li,
.seccion ul.paso-list li{
  display:grid;grid-template-columns:56px 1fr;gap:20px;
  padding:22px 0;
  border-top:1px solid var(--linea);
  align-items:baseline;
  font-family:var(--serif);
  font-size:19px;line-height:1.55;color:var(--plomo);
}
.seccion ol.paso-list li:last-child,
.seccion ul.paso-list li:last-child{border-bottom:1px solid var(--linea)}
.seccion ol.paso-list li b,
.seccion ul.paso-list li b{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:22px;color:var(--bronce);letter-spacing:.02em;
}
.seccion ol.paso-list li strong,
.seccion ul.paso-list li strong{
  display:block;
  font-weight:500;color:var(--negro);
  margin-bottom:4px;
  font-style:normal;
}

/* Pull-quote editorial */
blockquote.pull{
  margin:56px 0;
  padding:0 0 0 32px;
  border-left:1px solid var(--bronce);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(24px, 2.6vw, 34px);
  line-height:1.25;letter-spacing:-.015em;
  color:var(--negro);
  text-wrap:balance;
}
blockquote.pull cite{
  display:block;
  margin-top:20px;
  font-style:normal;
  font-family:var(--sans);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--plomo-2);font-weight:500;
}

/* Bandera de sección oscura (rompe el ritmo del ensayo) */
.seccion.oscura{
  background:#141210;color:var(--marfil);
  margin:0 calc(-1 * var(--gutter));
  padding:80px var(--gutter);
  border-color:rgba(242,239,233,.14);
}
.seccion.oscura h2{color:var(--marfil)}
.seccion.oscura h2 em{color:var(--bronce-luz)}
.seccion.oscura p{color:rgba(242,239,233,.86)}
.seccion.oscura p em{color:var(--marfil)}
.seccion.oscura .sec-num{color:var(--bronce-luz)}
.seccion.oscura blockquote.pull{border-left-color:var(--bronce-luz);color:var(--marfil)}
.seccion.oscura .paso-list li div{color:rgba(242,239,233,.86)}
.seccion.oscura .paso-list li strong{color:var(--marfil)}
.seccion.oscura .paso-list li b{color:var(--bronce-luz)}
.seccion.oscura h3{color:var(--marfil)}
.seccion.oscura a{color:var(--bronce-luz)}

/* ============ BLOQUE COLOFÓN + BRIEF ============ */
.pie-ensayo{
  padding:80px var(--gutter) 20px;
  background:var(--marfil-2);
  border-top:1px solid var(--linea);
}
.pie-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.2fr 1fr;gap:64px;
  align-items:start;
}
.colofon-block .eyebrow{margin-bottom:14px;color:var(--bronce)}
.colofon-block h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(28px,3vw,42px);
  line-height:1.1;letter-spacing:-.015em;
  color:var(--negro);
  margin-bottom:24px;
  text-wrap:balance;
}
.colofon-block h3 em{font-style:italic;color:var(--bronce)}
.colofon-block p{
  font-family:var(--serif);
  font-size:19px;line-height:1.55;
  color:var(--plomo);
  margin-bottom:28px;
  max-width:520px;
}
.cta-primary{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 28px;background:var(--bronce);color:var(--marfil);
  font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--bronce);transition:all .4s cubic-bezier(.2,.7,.2,1);
}
.cta-primary:hover{background:transparent;color:var(--negro);border-color:var(--negro)}
.cta-primary::after{content:"→";font-size:16px}

.brief-photo{
  background:#141210;
  border:1px solid rgba(232,212,168,.22);
  overflow:hidden;
}
.brief-photo img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/9;object-fit:cover;
}
.brief-photo.ar-4-3 img{aspect-ratio:4/3}
.brief-photo-caption{
  padding:18px 22px;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid rgba(232,212,168,.14);
}
.brief-photo-title{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:17px;color:var(--marfil);
}
.brief-photo-tag{
  font-family:'ui-monospace', 'SF Mono', Menlo, Monaco, monospace;
  font-size:10px;letter-spacing:.04em;color:rgba(242,239,233,.5);
  white-space:nowrap;
}

.brief-card{
  background:#141210;color:var(--marfil);
  padding:36px 32px 32px;
  position:relative;
  border:1px solid rgba(232,212,168,.22);
}
.brief-card .marker{
  position:absolute;top:20px;right:20px;
  display:inline-flex;align-items:center;gap:8px;
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bronce-luz);font-weight:600;
}
.brief-card .marker .dot{width:6px;height:6px;border-radius:50%;background:var(--bronce-luz);animation:blink 2.2s ease-in-out infinite}
.brief-card .brief-eyebrow{
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--bronce-luz);font-weight:600;margin-bottom:20px;
}
.brief-card h4{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:30px;line-height:1.15;
  margin-bottom:8px;letter-spacing:-.01em;
  color:var(--marfil);
}
.brief-card .brief-sub{
  font-size:12px;letter-spacing:.02em;
  color:rgba(242,239,233,.55);margin-bottom:28px;
  font-family:var(--serif);font-style:italic;
}
.brief-card .brief-label{
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bronce-luz);font-weight:600;
  margin-bottom:14px;
  padding-top:20px;
  border-top:1px solid rgba(232,212,168,.22);
}
.brief-card .brief-body{
  font-size:14.5px;line-height:1.65;
  color:rgba(242,239,233,.85);
  font-weight:300;
  margin-bottom:20px;
}
.brief-card .brief-meta{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:20px;
  border-top:1px solid rgba(232,212,168,.14);
  font-family:'ui-monospace', 'SF Mono', Menlo, Monaco, monospace;
  font-size:11px;color:rgba(242,239,233,.5);
  letter-spacing:.04em;
}

/* Navegación entre páginas (adyacente) */
.pag-nav{
  padding:60px var(--gutter);
  background:var(--marfil);
  border-top:1px solid var(--linea);
}
.pag-nav-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
}
.pag-nav a{
  display:block;
  padding:32px 0;
  border-top:1px solid var(--linea);
  transition:border-color .3s;
}
.pag-nav a:hover{border-top-color:var(--bronce)}
.pag-nav a.next{text-align:right}
.pag-nav a .dir{
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--plomo-2);font-weight:500;
  margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.pag-nav a.next .dir{justify-content:flex-end}
.pag-nav a .title{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(24px,2.4vw,32px);line-height:1.15;
  color:var(--negro);
  letter-spacing:-.01em;
  transition:color .2s;
}
.pag-nav a:hover .title{color:var(--bronce)}

/* Footer compacto */
footer.foot-min{
  background:var(--negro);color:rgba(242,239,233,.55);
  padding:56px var(--gutter);
}
footer.foot-min .fm-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
footer.foot-min .fm-inner a{color:rgba(232,212,168,.75);border-bottom:1px solid rgba(232,212,168,.35);padding-bottom:2px}
footer.foot-min .fm-inner a:hover{color:#F2EFE9;border-color:#F2EFE9}

@media (max-width:1100px){
  .ensayo-inner{grid-template-columns:1fr;gap:40px}
  .ensayo-toc{position:static;padding-bottom:24px;border-bottom:1px solid var(--linea)}
  .ensayo-toc ol{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
}
@media (max-width:1024px){
  :root{--gutter:24px}
  .menu{gap:24px;font-size:12px}
  .interior-hero-inner{grid-template-columns:1fr;gap:36px}
  .section-mark{flex-direction:row;align-items:center;gap:24px;padding-right:0;padding-bottom:24px;border-right:0;border-bottom:1px solid var(--linea);width:100%}
  .section-mark .rule{margin-top:0}
  .pie-inner{grid-template-columns:1fr;gap:40px}
}
@media (max-width:720px){
  :root{--gutter:20px}
  .menu{display:none}
  .menu-mobile{display:block}
  .nav{grid-template-columns:1fr auto auto;gap:12px}
  .cta-header{padding:10px 14px;font-size:12px}
  .interior-hero{padding:150px var(--gutter) 72px}
  .hero-body h1{font-size:44px}
  .hero-body .dek{font-size:17px}
  .hero-meta{gap:20px}
  .section-mark .roman{font-size:56px}
  .ensayo{padding:64px var(--gutter)}
  .seccion p, .seccion ol.paso-list li, .seccion ul.paso-list li{font-size:17px}
  .seccion .sec-num{font-size:42px}
  .seccion h2{font-size:30px}
  .seccion.dropcap p:first-of-type::first-letter{font-size:56px}
  blockquote.pull{padding-left:20px;font-size:22px}
  .brief-card{padding:26px 22px}
  .brief-card h4{font-size:24px}
  .pag-nav-inner{grid-template-columns:1fr;gap:0}
  .pag-nav a.next{text-align:left}
  .pag-nav a.next .dir{justify-content:flex-start}
}