/*
Theme Name: La Escena
Theme URI: https://revistaentrelineas.cl
Author: seolab.cl + Claude
Description: Rediseño editorial monocromo "La Escena" (Propuesta A) para Revista Entre Líneas. Tema independiente basado en la dirección visual del cliente. No modifica el tema actual.
Version: 0.10.3
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: la-escena
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#1A1A1A;
  --gray-strong:#555555;
  --gray:#AAAAAA;
  --cream:#EAEAE6;
  --white:#FFFFFF;
  --display:'Playfair Display','Times New Roman',serif;
  --body:'Newsreader',Georgia,serif;
  --ui:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --pad:clamp(20px,5vw,64px);

  /* Fixed "always dark" panels (footer, manifiesto, featured plan) —
     these keep the same values in both light and dark themes. */
  --panel:#1A1A1A;
  --panel-fg:#EDEDE7;
  --panel-muted:#AAAAAA;
  --panel-muted2:#8A8A8A;
  --panel-line:#555555;
  --panel-features:#CFCFC9;

  /* "Negative of the page" — the featured pricing card. Dark in light
     mode, light in dark mode (see the dark-theme block). */
  --invert-bg:#1A1A1A;
  --invert-fg:#EAEAE6;
  --invert-muted:#AAAAAA;
  --invert-line:#555555;
  --invert-features:#CFCFC9;
  --invert-cta-bg:#EAEAE6;
  --invert-cta-fg:#1A1A1A;

  /* Reading-text scale, driven by the S / M / L control. */
  --tscale:1;

  /* Chrome de la cabecera. En claro coincide con la tinta del texto; en
     oscuro NO puede usar --ink, que allí es casi blanco: una regla de 1px a
     todo el ancho bajo la cabecera deslumbra. Los valores oscuros salen del
     documento "Tema oscuro & Control" del handoff. */
  --chrome-line:#1A1A1A;   /* regla a todo el ancho (bajo la cabecera) */
  --chrome-box:#1A1A1A;    /* borde de cajas pequeñas (control, hamburguesa) */
  --chrome-box-bg:rgba(255,255,255,0.92);
  --chrome-box-shadow:0 6px 22px rgba(26,26,26,0.10);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;               /* never allow horizontal scroll/overflow */
}
::selection{background:var(--ink);color:var(--cream);}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* ============================================================
   HELPERS
   ============================================================ */
.label{
  font-family:var(--ui);font-size:11px;font-weight:600;
  letter-spacing:0.24em;text-transform:uppercase;color:var(--gray-strong);
}
.label--mute{color:var(--gray);}
.rule{border-top:1px solid var(--ink);}
.hairline{border-top:1px solid var(--gray);}

/* Buttons */
.btn,.btn-outline,.link-underline{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ui);font-size:11.5px;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;text-decoration:none;
  transition:background .25s,color .25s,border-color .2s;cursor:pointer;
}
.btn{background:var(--ink);color:var(--cream);padding:15px 26px;border:1px solid var(--ink);}
.btn:hover{background:transparent;color:var(--ink);}
.btn-outline{background:transparent;color:var(--ink);padding:15px 26px;border:1px solid var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--cream);}
.link-underline{border-bottom:1px solid var(--ink);padding-bottom:4px;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:16px var(--pad);
  background:rgba(234,234,230,0.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--chrome-line);
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);
}
/* Isotipo del cliente (SVG en línea): el cuadrado toma currentColor y las
   tres barras son huecos, así que el glifo es el fondo real de la página.
   Se adapta solo a claro/oscuro — no hace falta invertir. */
.brand__mark{
  display:block;width:26px;height:26px;flex:none;
}
.brand__word{
  font-family:var(--ui);font-weight:700;font-size:15px;letter-spacing:0.34em;
}
.main-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex-wrap:wrap;}
.main-nav a{
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s;
}
.main-nav a:hover{border-bottom-color:var(--ink);}
.main-nav .btn{font-size:11px;padding:11px 20px;color:var(--cream);}
.main-nav .btn:hover{color:var(--ink);}

/* "Escríbenos" — disclosure con panel (sin página propia) */
.nav-drop{position:relative;}
.nav-drop__btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--ink);
  background:transparent;border:0;padding:0 0 2px;cursor:pointer;
  border-bottom:1px solid transparent;transition:.2s;
}
.nav-drop__btn:hover{border-bottom-color:var(--ink);}
.nav-drop__btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.nav-drop__caret{font-size:9px;line-height:1;transition:transform .2s;}
.nav-drop__btn[aria-expanded="true"] .nav-drop__caret{transform:rotate(180deg);}
/* El ancho lo manda el contenido: el correo es una palabra que no se puede
   partir, así que con width:max-content el panel crece con el tamaño de
   texto (A/A/A) en vez de cortarlo. El párrafo se limita con max-width para
   que no estire el panel a lo ancho de toda la frase. */
.nav-drop__panel{
  position:absolute;top:calc(100% + 14px);right:0;z-index:31;
  width:max-content;
  max-width:min(440px,calc(100vw - 2 * var(--pad)));
  padding:20px 22px;
  background:var(--cream);border:1px solid var(--ink);
}
.nav-drop__panel[hidden]{display:none;}
/* Letras está a la izquierda del menú: su panel crece hacia la derecha */
.nav-drop--left .nav-drop__panel{left:0;right:auto;}
/* Panel de solo enlaces (Letras): lista vertical, sin el ancho de párrafo */
.nav-drop__panel--links{padding:12px 0;width:auto;}
.main-nav .nav-drop__link{
  display:block;padding:9px 24px;
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;white-space:nowrap;border-bottom:0;padding-bottom:9px;
  transition:background .15s;
}
.main-nav .nav-drop__link:hover{background:var(--white);border-bottom:0;}
.nav-drop__text{
  font-family:var(--body);font-size:calc(15px * var(--tscale));line-height:1.55;
  color:var(--ink);margin:0;text-transform:none;letter-spacing:0;max-width:30ch;
}
/* el enlace vive dentro de .main-nav: hay que ganarle a `.main-nav a`
   (mayúsculas + tracking + 11px), que rompía el correo a media palabra */
.main-nav .nav-drop__mail{
  display:inline-block;margin-top:8px;
  font-family:var(--ui);font-size:calc(13px * var(--tscale));font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:1px;
  /* break-word y no anywhere: anywhere también encoge el ancho intrínseco,
     que era justo lo que partía el correo aunque hubiera sitio */
  overflow-wrap:break-word;
}
.main-nav .nav-drop__mail:hover{opacity:.65;border-bottom-color:var(--ink);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:90vh;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(30px,5vw,64px);gap:clamp(36px,6vh,72px);
}
.hero-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.hero-row--top{animation:rise .8s both;}
.hero-meta{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--gray-strong);}
.hero-meta--mute{font-weight:500;letter-spacing:0.2em;color:var(--gray);}
.hero-main{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(24px,4vw,72px);}
.hero-title{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(76px,16vw,240px);line-height:0.8;letter-spacing:-0.025em;
  animation:rise .9s .05s both;
}
.hero-lead{flex:1;min-width:300px;max-width:560px;animation:rise .9s .18s both;}
.hero-lead p{margin:0;font-family:var(--body);font-weight:400;font-size:clamp(21px,2.3vw,31px);line-height:1.4;}
.hero-cta{display:flex;flex-wrap:wrap;gap:20px;margin-top:36px;align-items:center;}
.hero-foot{border-top:1px solid var(--gray);padding-top:18px;animation:rise .9s .28s both;}

/* ============================================================
   SECCIONES (index list)
   ============================================================ */
.sections{padding:clamp(44px,7vw,110px) var(--pad);border-top:1px solid var(--ink);}
.sections-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(28px,4vw,56px);}
.sections-head h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(36px,5.5vw,78px);line-height:1;letter-spacing:-0.015em;}
.sections-head .intro{font-family:var(--body);font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--gray-strong);max-width:30ch;}
.section-row{
  display:grid;grid-template-columns:clamp(58px,7vw,110px) 1fr auto;
  gap:clamp(16px,3vw,44px);align-items:center;
  padding:clamp(24px,3.4vw,44px) clamp(8px,1.5vw,20px);
  border-top:1px solid var(--gray);text-decoration:none;color:var(--ink);transition:background .3s;
}
.section-row:last-child{border-bottom:1px solid var(--gray);}
.section-row:hover{background:var(--white);}
.section-row .num{font-family:var(--display);font-size:clamp(30px,4.5vw,64px);font-weight:400;color:var(--gray);line-height:1;}
.section-row .name{font-family:var(--display);font-size:clamp(28px,4vw,52px);font-weight:500;line-height:1;letter-spacing:-0.01em;margin-bottom:12px;}
.section-row .desc{font-family:var(--body);font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--gray-strong);max-width:52ch;}
.section-row .arrow{font-family:var(--ui);font-size:22px;color:var(--ink);}

/* ============================================================
   ARTICLE LIST (index / archive)
   ============================================================ */
.wrap{padding:clamp(36px,5vw,80px) var(--pad);}
.page-head{margin-bottom:clamp(28px,4vw,56px);}
.page-head h1{margin:12px 0 0;font-family:var(--display);font-weight:500;font-size:clamp(36px,5.5vw,72px);line-height:1;letter-spacing:-0.015em;}
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(24px,3vw,48px);}
.article-card{border-top:1px solid var(--ink);padding-top:16px;text-decoration:none;color:var(--ink);display:block;}
.article-card .kicker{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray-strong);}
.article-card .title{font-family:var(--display);font-size:26px;font-weight:500;line-height:1.12;letter-spacing:-0.01em;margin:14px 0 12px;transition:opacity .2s;}
.article-card:hover .title{opacity:.62;}
.article-card .byline{font-family:var(--ui);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray);}

/* Pagination */
.pagination{margin-top:clamp(40px,6vw,80px);display:flex;gap:16px;flex-wrap:wrap;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;}
.pagination a,.pagination .current{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;}
.pagination .current{color:var(--gray);border-color:var(--gray);}

/* ============================================================
   SINGLE (reading template)
   ============================================================ */
.article{padding:clamp(40px,6vw,96px) var(--pad);}
.article-header{max-width:64ch;margin:0 auto clamp(32px,4vw,56px);text-align:center;}
.article-header .kicker{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--gray-strong);}
.article-header h1{margin:18px 0 20px;font-family:var(--display);font-weight:500;font-size:clamp(34px,5vw,68px);line-height:1.05;letter-spacing:-0.015em;}
.article-header .meta{font-family:var(--ui);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gray);}
.article-body{max-width:66ch;margin:0 auto;font-family:var(--body);font-size:19px;line-height:1.7;}
.article-body p{margin:0 0 1.4em;}
.article-body h2,.article-body h3{font-family:var(--display);font-weight:500;letter-spacing:-0.01em;line-height:1.15;margin:1.8em 0 .5em;}
.article-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gray);}
.article-body blockquote{margin:1.6em 0;padding-left:24px;border-left:2px solid var(--ink);font-style:italic;color:var(--gray-strong);}
.article-body img{margin:1.6em auto;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--panel);color:var(--panel-fg);padding:clamp(52px,8vw,120px) var(--pad);}
.site-footer .manifesto{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(30px,4.6vw,66px);line-height:1.12;letter-spacing:-0.015em;max-width:22ch;}
.site-footer .manifesto-sub{margin:22px 0 0;font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(22px,3vw,40px);line-height:1.2;color:var(--panel-muted);max-width:24ch;}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;margin-top:clamp(48px,7vw,96px);padding-top:28px;border-top:1px solid var(--panel-line);}
.footer-bottom .brand{color:var(--panel-fg);}
.footer-bottom .place{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--panel-muted);margin-top:10px;}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.footer-links .row{display:flex;flex-wrap:wrap;gap:24px;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;}
.footer-links a{color:var(--panel-fg);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s;}
.footer-links a:hover{border-bottom-color:var(--panel-fg);}
.footer-links .email{font-family:var(--body);font-size:clamp(18px,2vw,26px);color:var(--panel-fg);text-decoration:none;border-bottom:1px solid var(--panel-line);padding-bottom:3px;}

/* ============================================================
   SECTION HEADERS (Revista / Actividades / Editorial / Mecenazgo)
   ============================================================ */
.le-head{padding:clamp(40px,6vw,88px) var(--pad) clamp(28px,4vw,52px);}
.le-head .kicker{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:0.26em;text-transform:uppercase;color:var(--gray-strong);margin-bottom:clamp(18px,2.5vw,30px);}
.le-head h1{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(46px,8vw,120px);line-height:0.96;letter-spacing:-0.02em;}

/* ============================================================
   GENERIC EDITORIAL ROW (events, marketplace)
   ============================================================ */
.le-list{padding:0 var(--pad) clamp(60px,8vw,110px);}
.le-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,44px);
  padding:clamp(28px,3.6vw,50px) clamp(6px,1vw,16px);
  border-top:1px solid var(--gray);text-decoration:none;color:var(--ink);transition:background .3s;
}
.le-list .le-row:last-child{border-bottom:1px solid var(--gray);}
.le-row:hover{background:var(--white);}
.le-row__lead{flex:0 0 auto;width:clamp(110px,14vw,170px);}
.le-row__lead .big{font-family:var(--display);font-size:clamp(30px,3.4vw,48px);font-weight:500;line-height:0.95;}
.le-row__lead .sub{font-family:var(--ui);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gray);margin-top:8px;}
.le-row__num{flex:0 0 auto;width:clamp(46px,6vw,90px);font-family:var(--display);font-size:clamp(28px,3.4vw,56px);font-weight:400;color:var(--gray);line-height:1;}
.le-row__main{flex:1 1 320px;min-width:220px;}
.le-row__main .kicker{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--gray-strong);}
.le-row__main .title{font-family:var(--display);font-size:clamp(24px,2.6vw,38px);font-weight:500;line-height:1.1;letter-spacing:-0.01em;margin:10px 0;}
.le-row__main .place{font-family:var(--body);font-size:clamp(15px,1.3vw,18px);color:var(--gray-strong);}
.le-row__aside{flex:0 0 auto;margin-left:auto;text-align:right;}
.le-row__price{font-family:var(--display);font-size:clamp(24px,2.4vw,34px);font-weight:500;}
.le-row__price small{font-size:0.5em;color:var(--gray);}
.btn-box{display:inline-block;margin-top:14px;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:11px 20px;transition:background .25s,color .25s;}
.le-row:hover .btn-box{background:var(--ink);color:var(--cream);}
.link-inline{display:inline-block;margin-top:12px;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;text-decoration:none;}

/* ============================================================
   REVISTA (featured essay + secondary grid)
   ============================================================ */
.revista-topbar{padding:clamp(40px,6vw,84px) var(--pad) clamp(20px,2.5vw,32px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;}
.revista-topbar .a{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:0.26em;text-transform:uppercase;color:var(--gray-strong);}
.revista-topbar .b{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--gray);}
.feature{padding:0 var(--pad) clamp(44px,6vw,84px);}
.feature__inner{border-top:1px solid var(--ink);padding-top:clamp(24px,3vw,44px);}
.feature__label{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--gray-strong);margin-bottom:clamp(16px,2vw,26px);}
.feature__grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(28px,4vw,64px);align-items:start;}
.feature__grid h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,4.6vw,72px);line-height:1.02;letter-spacing:-0.015em;max-width:16ch;}
.feature__grid .lead{margin:clamp(20px,3vw,32px) 0 0;font-family:var(--body);font-size:clamp(18px,1.6vw,23px);line-height:1.55;max-width:58ch;}
.feature__cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:clamp(24px,3vw,36px);}
.feature__cta .meta{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--gray-strong);}
.feature__media{aspect-ratio:4/5;border:1px solid var(--gray);background:repeating-linear-gradient(135deg,#e6e6e1,#e6e6e1 9px,#deded7 9px,#deded7 10px);display:flex;align-items:flex-end;padding:16px;}
.feature__media span{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:#8a8a83;}
.also{padding:0 var(--pad) clamp(60px,8vw,110px);}
.also__label{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--gray);margin-bottom:clamp(18px,2vw,28px);}
.also__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(24px,3vw,44px);}

/* ============================================================
   MECENAZGO (intro + pricing plans)
   ============================================================ */
.mecenazgo-intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;border-top:1px solid var(--gray);margin:0 var(--pad);padding-top:clamp(22px,3vw,34px);}
.mecenazgo-intro p{margin:0;font-family:var(--body);font-size:clamp(18px,1.9vw,26px);line-height:1.5;max-width:52ch;}
.plans{padding:clamp(30px,4vw,52px) var(--pad) clamp(60px,8vw,110px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(18px,2vw,26px);align-items:stretch;}
.plan{border:1px solid var(--ink);padding:clamp(28px,2.6vw,40px);display:flex;flex-direction:column;background:var(--cream);}
.plan__name{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--gray-strong);}
.plan__price{font-family:var(--display);font-size:clamp(38px,3.6vw,54px);font-weight:500;letter-spacing:-0.015em;line-height:1;margin:16px 0 6px;}
.plan__cadence{font-family:var(--ui);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gray);}
.plan__divider{border-top:1px solid var(--gray);margin:clamp(22px,3vw,30px) 0 clamp(18px,2.4vw,24px);}
.plan__features{font-family:var(--body);font-size:16px;line-height:1.65;color:var(--gray-strong);display:flex;flex-direction:column;gap:12px;flex:1;}
.plan__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(26px,3vw,36px);font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:15px 20px;text-decoration:none;transition:background .25s,color .25s;}
.plan__cta:hover{background:var(--ink);color:var(--cream);}
.plan--dark{background:var(--invert-bg);color:var(--invert-fg);}
.plan--dark .plan__name{color:var(--invert-muted);}
.plan--dark .plan__price{color:var(--invert-fg);}
.plan--dark .plan__divider{border-top-color:var(--invert-line);}
.plan--dark .plan__features{color:var(--invert-features);}
.plan--dark .plan__cta{background:var(--invert-cta-bg);color:var(--invert-cta-fg);border-color:var(--invert-cta-bg);}
.plan--dark .plan__cta:hover{opacity:.82;background:var(--invert-cta-bg);color:var(--invert-cta-fg);}

/* ============================================================
   MANIFIESTO (dark statement page)
   ============================================================ */
.manifiesto{background:var(--panel);color:var(--panel-fg);min-height:calc(100vh - 61px);display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,9vw,150px) var(--pad);border-bottom:1px solid var(--panel-line);}
.manifiesto__meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:clamp(40px,6vw,80px);}
.manifiesto__meta .a{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:var(--panel-muted);}
.manifiesto__meta .b{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:var(--panel-muted2);}
.manifiesto__body{display:flex;flex-direction:column;gap:clamp(22px,3.2vw,44px);width:100%;max-width:960px;}
.manifiesto__body .stmt{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,5.2vw,80px);line-height:1.02;letter-spacing:-0.02em;}
.manifiesto__body .sub{margin:0;font-family:var(--body);font-style:italic;font-weight:400;font-size:clamp(19px,2.2vw,30px);line-height:1.35;color:var(--panel-muted);max-width:34ch;}
.manifiesto__body .final{margin:clamp(6px,1vw,16px) 0 0;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(30px,4.6vw,68px);line-height:1.05;letter-spacing:-0.015em;color:var(--panel-fg);}

/* ============================================================
   POST CARDS (real content with featured images)
   ============================================================ */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(24px,3vw,44px);}
.post-card{display:block;text-decoration:none;color:var(--ink);border-top:1px solid var(--ink);padding-top:16px;}
.post-card__media{aspect-ratio:3/2;overflow:hidden;margin-bottom:16px;background:#deded7;}
.post-card__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);transition:filter .45s,transform .6s;display:block;}
.post-card:hover .post-card__media img{filter:grayscale(0);transform:scale(1.03);}
.post-card__kicker{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray-strong);}
.post-card__title{font-family:var(--display);font-size:clamp(23px,2vw,29px);font-weight:500;line-height:1.12;letter-spacing:-0.01em;margin:12px 0 12px;transition:opacity .2s;}
.post-card:hover .post-card__title{opacity:.62;}
.post-card__excerpt{font-family:var(--body);font-size:16px;line-height:1.5;color:var(--gray-strong);margin-bottom:12px;}
.post-card__meta{font-family:var(--ui);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gray);}

/* Real featured image inside the Revista feature (portrait) */
.feature__media.is-img{padding:0;overflow:hidden;background:#deded7;}
.feature__media.is-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);transition:filter .45s;}
.feature__inner:hover .feature__media.is-img img{filter:grayscale(0);}

/* Featured image on the single article */
.article-media{max-width:900px;margin:0 auto clamp(30px,4vw,52px);overflow:hidden;}
.article-media img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.03);transition:filter .5s;}
.article-media:hover img{filter:grayscale(0);}

/* ============================================================
   HOME — latest from the archive
   ============================================================ */
.latest{padding:clamp(44px,7vw,110px) var(--pad);border-top:1px solid var(--ink);}
.latest__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(28px,4vw,56px);}
.latest__head h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(36px,5.5vw,78px);line-height:1;letter-spacing:-0.015em;}
.latest__foot{margin-top:clamp(36px,5vw,64px);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .feature__grid{grid-template-columns:1fr;}
  .feature__media{max-width:360px;}
}

/* ============================================================
   ACCESSIBILITY — WCAG AA text contrast
   #AAAAAA text on the cream background is only ~1.9:1 (fails).
   Muted text on LIGHT surfaces uses --gray-mute (~4.8:1 on cream).
   #AAAAAA stays for hairlines/dividers (decorative) and for muted
   text on DARK surfaces, where it already passes.
   ============================================================ */
:root{ --gray-mute:#666660; }
.label--mute,
.hero-meta--mute,
.article-card .byline,
.article-header .meta,
.section-row .num,
.le-row__lead .sub,
.le-row__num,
.le-row__price small,
.revista-topbar .b,
.also__label,
.plan__cadence,
.post-card__meta,
.pagination .current{ color:var(--gray-mute); }
/* placeholder helper sits on the striped box — needs a stronger gray */
.feature__media span{ color:var(--gray-strong); }
.pagination .current{ border-color:var(--gray-mute); }
/* featured card cadence follows the inverted palette */
.plan--dark .plan__cadence{ color:var(--invert-muted); }
/* manifiesto sub-label: #8A8A8A ~5.0:1 on the dark panel */
.manifiesto__meta .b{ color:var(--panel-muted2); }
@media (max-width:640px){
  .main-nav{gap:12px;}
  .section-row{grid-template-columns:auto 1fr;}
  .section-row .arrow{display:none;}
}

/* ============================================================
   READING TEXT SIZE  (control: S / M / L -> html[data-textsize])
   Scales body/reading copy only; display headings stay fixed.
   ============================================================ */
html[data-textsize="s"]{ --tscale:0.9; }
html[data-textsize="l"]{ --tscale:1.18; }
.article-body{ font-size:calc(19px * var(--tscale)); }
.post-card__excerpt,
.plan__features{ font-size:calc(16px * var(--tscale)); }
.feature__grid .lead{ font-size:calc(clamp(18px,1.6vw,23px) * var(--tscale)); }
.section-row .desc{ font-size:calc(clamp(16px,1.5vw,20px) * var(--tscale)); }
.mecenazgo-intro p{ font-size:calc(clamp(18px,1.9vw,26px) * var(--tscale)); }
.hero-lead p{ font-size:calc(clamp(21px,2.3vw,31px) * var(--tscale)); }
.le-row__main .place{ font-size:calc(clamp(15px,1.3vw,18px) * var(--tscale)); }

/* ============================================================
   DARK THEME  (html[data-theme="dark"])
   Only the PAGE tokens flip; --panel* stay dark in both themes.
   Contrast on the dark page bg (#14140F):
     text #ECECE6 ~15:1 · secondary #BEBEB6 ~9:1 · muted #A0A099 ~7:1
   ============================================================ */
[data-theme="dark"]{
  --cream:#121212;        /* page background */
  --ink:#ECEAE3;          /* primary text 15.6:1 */
  --gray:#333330;         /* hairlines / dividers on the page */
  --gray-strong:#A8A8A2;  /* secondary text 7.8:1 */
  --gray-mute:#8C8C86;    /* muted text 5.5:1 */
  --white:#1E1E1C;        /* hover / card surface */
  /* "always dark" panels blend with the page, separated by a hairline */
  --panel:#121212; --panel-fg:#ECEAE3; --panel-muted:#8C8C86; --panel-muted2:#8C8C86;
  --panel-line:#333330; --panel-features:#A8A8A2;
  /* featured pricing card inverts to light — the negative of the page */
  --invert-bg:#ECEAE3; --invert-fg:#1A1A1A; --invert-muted:#555555; --invert-line:#CFCEC7;
  --invert-features:#555555; --invert-cta-bg:#1A1A1A; --invert-cta-fg:#ECEAE3;
  /* chrome apagado: la regla se funde con el fondo, la caja se lee como objeto */
  --chrome-line:#333330; --chrome-box:#4A4A46;
  --chrome-box-bg:rgba(18,18,18,0.9);
  --chrome-box-shadow:0 8px 26px rgba(0,0,0,0.5);
}
[data-theme="dark"] .site-header{ background:rgba(18,18,18,0.9); }
[data-theme="dark"] .site-footer{ border-top:1px solid var(--panel-line); }
[data-theme="dark"] .article-body a{ text-decoration-color:var(--gray-strong); }
/* keep monochrome photos from glaring on the dark page */
[data-theme="dark"] .post-card__media img,
[data-theme="dark"] .article-media img,
[data-theme="dark"] .feature__media.is-img img{ filter:grayscale(1) contrast(1.03) brightness(0.82); }
[data-theme="dark"] .post-card:hover .post-card__media img,
[data-theme="dark"] .article-media:hover img,
[data-theme="dark"] .feature__inner:hover .feature__media.is-img img{ filter:grayscale(0) brightness(0.9); }

/* ============================================================
   READING CONTROLS  (in the header, right of "Ser mecenas")
   Three Playfair "A" (active = full ink + underline) · divider · theme
   toggle showing its destination (☾ Oscuro / ☀ Claro).
   ============================================================ */
.site-header__right{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;}
/* Medidas exactas del documento "Tema oscuro & Control" del handoff:
   esquinas de 7px, fondo translúcido con blur y sombra propia — la píldora
   se lee como un objeto flotante sobre la cabecera, no como parte de ella. */
.la-controls{
  display:inline-flex;align-items:stretch;
  background:var(--chrome-box-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--chrome-box);
  border-radius:7px;overflow:hidden;
  box-shadow:var(--chrome-box-shadow);
}
.la-controls__group{display:flex;align-items:center;gap:4px;padding:9px 12px;}
.la-ctrl{
  font-family:var(--display);font-weight:400;color:var(--gray-mute);background:transparent;border:0;cursor:pointer;
  line-height:1;padding:2px 5px;border-bottom:2px solid transparent;transition:color .2s;
}
.la-ctrl--a1{font-size:13px;} .la-ctrl--a2{font-size:17px;} .la-ctrl--a3{font-size:22px;}
.la-ctrl:hover{color:var(--ink);}
.la-ctrl[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink);}
.la-controls__sep{width:1px;background:var(--chrome-box);}
.la-toggle{
  display:inline-flex;align-items:center;gap:9px;padding:0 18px;
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:0;cursor:pointer;transition:opacity .2s;
}
.la-toggle__icon{font-size:15px;line-height:1;}
.la-toggle:hover{opacity:0.6;}
.la-ctrl:focus-visible,.la-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
@media (max-width:640px){
  .la-toggle{padding:0 10px;}
  .la-toggle__label{display:none;}
}

/* ============================================================
   MOBILE NAVIGATION  (hamburger + dropdown panel)
   ============================================================ */
.nav-toggle{display:none;}
@media (max-width:860px){
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--chrome-box);color:var(--ink);cursor:pointer;
    font-size:16px;line-height:1;padding:9px 13px;
  }
  .nav-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
  .site-header__right{
    display:none;
    position:absolute;top:100%;left:0;right:0;z-index:29;
    flex-direction:column;align-items:flex-start;gap:22px;
    padding:22px var(--pad) 28px;
    background:var(--cream);border-bottom:1px solid var(--chrome-line);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  .site-header.is-open .site-header__right{display:flex;}
  .main-nav{flex-direction:column;align-items:flex-start;gap:18px;width:100%;}
  .main-nav a{font-size:13px;}
  .main-nav .btn{align-self:flex-start;font-size:12px;}
  /* dentro del panel móvil el desplegable fluye en la columna */
  .nav-drop{width:100%;}
  .nav-drop__btn{font-size:13px;}
  .nav-drop__panel{position:static;width:100%;margin-top:14px;}
  .la-controls{align-self:flex-start;}
  .la-toggle__label{display:inline;}
}

/* ============================================================
   MOBILE LAYOUT REFINEMENTS
   Stack the hero, tame oversized display type, keep media in bounds.
   ============================================================ */
@media (max-width:760px){
  .hero{min-height:auto;padding:clamp(28px,7vw,64px) var(--pad);gap:clamp(28px,7vh,72px);}
  .hero-main{flex-direction:column;align-items:flex-start;gap:22px;}
  .hero-title{font-size:clamp(52px,15vw,120px);}
  .hero-lead{flex:1 1 auto;min-width:0;max-width:100%;}
  .hero-lead p{font-size:calc(clamp(19px,5.2vw,24px) * var(--tscale));}
  .hero-cta{flex-direction:column;align-items:flex-start;gap:14px;}

  .le-head h1{font-size:clamp(38px,11vw,120px);}
  .article-header h1{font-size:clamp(30px,8vw,68px);}
  .article-header,.article-body,.article-media{max-width:100%;}

  h1,h2,.hero-title,.le-head h1,.article-header h1,.post-card__title,.section-row .name{
    overflow-wrap:break-word;word-break:break-word;
  }
}

/* ============================================================
   RESTRUCTURA 2026 — filtro de género, ediciones, video, umbral
   ============================================================ */

/* Descripción de sección + filtro por género (archivos de tema) */
.page-head__desc{margin:16px 0 0;font-family:var(--body);font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:var(--gray-strong);max-width:60ch;}
.tax-filter{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 clamp(28px,4vw,48px);padding-bottom:clamp(18px,2vw,24px);border-bottom:1px solid var(--gray);}
.tax-filter__item{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--gray-mute);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:4px;transition:color .2s,border-color .2s;}
.tax-filter__item:hover{color:var(--ink);}
.tax-filter__item.is-active{color:var(--ink);border-bottom-color:var(--ink);}

/* Responsive 16:9 embed (Canal, Manifiesto) */
.embed-16x9{position:relative;width:100%;aspect-ratio:16/9;background:var(--panel);overflow:hidden;border:1px solid var(--gray);}
.embed-16x9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.embed-placeholder{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--panel-muted);font-family:var(--ui);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;padding:24px;}

/* Related posts under an article */
.related{border-top:1px solid var(--ink);padding-top:clamp(36px,5vw,64px);margin-top:clamp(24px,4vw,56px);}

/* Ediciones Completas — cover cards (portrait) */
.post-card--cover .post-card__media{aspect-ratio:3/4;}
.edicion__action{margin-top:12px;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;display:inline-block;}
.post-card--cover:hover .edicion__action{opacity:.6;}

/* Canal — video grid */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(24px,3vw,44px);}
.video-card__title{margin-top:14px;font-family:var(--display);font-size:clamp(20px,1.8vw,24px);font-weight:500;line-height:1.18;letter-spacing:-0.01em;}

/* Manifiesto video + El Umbral form */
.manifiesto-video .label{display:block;margin-bottom:20px;}
.manifiesto-video .embed-16x9{max-width:1000px;}
.canal-link{margin:0 0 30px;}
.canal-link a{
  font-family:var(--ui);font-size:calc(12px * var(--tscale));font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;
}
.canal-link a:hover{opacity:.6;}

.umbral-form iframe{display:block;width:100%;border:0;background:var(--white);}
.umbral-fallback{
  margin:18px 0 0;font-family:var(--ui);font-size:calc(13px * var(--tscale));
  color:var(--gray-strong);
}
.umbral-fallback a{color:var(--ink);border-bottom:1px solid var(--ink);text-decoration:none;}

/* ============================================================
   EL LIBRO — frontispicio invertido + reseña
   Diseño 1c del handoff. Dos decisiones lo sostienen en pantallas
   anchas: la banda invertida sangra hasta los bordes a propósito,
   pero su contenido se detiene en --libro-max y se centra; y la
   reseña conserva su medida de lectura en vez de estirarse. Nada
   elástico queda suelto, que era el fallo del layout anterior.
   ============================================================ */
.libro{--libro-max:1240px;}

/* --- Banda invertida (portada + título + compra) --- */
.libro__frontis{
  background:var(--invert-bg);color:var(--invert-fg);
  padding:clamp(40px,5vw,86px) var(--pad);
}
.libro__frontis-inner{
  max-width:var(--libro-max);margin:0 auto;
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(30px,4.5vw,80px);align-items:center;
}
.libro__cover img{width:100%;height:auto;border:1px solid var(--invert-line);}
.libro__cover-empty{
  aspect-ratio:3/4;border:1px solid var(--invert-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:20px;text-align:center;
}
.libro__cover-label{
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--invert-muted);
}
.libro__cover-note{
  font-family:var(--body);font-size:14px;line-height:1.5;color:var(--invert-muted);
}
.libro__kicker{
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--invert-muted);
}
.libro__title{
  margin:18px 0 0;font-family:var(--display);font-weight:500;
  font-size:calc(clamp(38px,4.4vw,68px) * var(--tscale));
  line-height:1;letter-spacing:-0.015em;max-width:20ch;
}
.libro__author{
  margin-top:18px;font-family:var(--ui);font-size:calc(12px * var(--tscale));
  font-weight:500;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--invert-muted);
}
.libro__ficha{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(20px,3vw,44px);
  margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--invert-line);
}
.libro__price{
  font-family:var(--display);font-size:calc(42px * var(--tscale));
  font-weight:500;line-height:1;
}
.libro__price-cur{font-size:0.44em;color:var(--invert-muted);}
.libro__format{
  margin-top:8px;font-family:var(--ui);font-size:calc(10.5px * var(--tscale));
  font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--invert-muted);
}
.libro__cta{
  display:inline-block;
  background:var(--invert-cta-bg);color:var(--invert-cta-fg);
  border:1px solid var(--invert-cta-bg);
  font-family:var(--ui);font-size:calc(11.5px * var(--tscale));font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;padding:17px 34px;
  text-decoration:none;transition:opacity .25s;
}
.libro__cta:hover{opacity:.82;}
/* Todavía sin enlace: un bloque que se explica, no un botón roto.
   Deshace la caja alta y el tracking del botón — aquí dentro hay una frase
   corriente, no una etiqueta; la etiqueta los recupera por su cuenta. */
.libro__cta--pending{
  background:transparent;border:1px solid var(--invert-line);
  padding:15px 24px;max-width:36ch;
  font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:400;
}
.libro__cta--pending:hover{opacity:1;}
.libro__cta-label{
  display:block;font-family:var(--ui);font-size:calc(11.5px * var(--tscale));
  font-weight:600;letter-spacing:0.2em;text-transform:uppercase;line-height:1.35;
  color:var(--invert-muted);
}
.libro__cta-note{
  display:block;margin-top:8px;font-family:var(--body);
  font-size:calc(14px * var(--tscale));line-height:1.5;color:var(--invert-muted);
}
.libro__note{
  margin:20px 0 0;font-family:var(--body);font-size:calc(14.5px * var(--tscale));
  line-height:1.6;color:var(--invert-muted);max-width:62ch;
}

/* --- Reseña, ya sobre el fondo de la página --- */
.libro__resena{
  max-width:var(--libro-max);margin:0 auto;
  padding:clamp(40px,5vw,84px) var(--pad) clamp(56px,6vw,100px);
}
/* gana a .article-body, que centra su medida: aquí va alineada a la izquierda */
.libro__body{max-width:66ch;margin:0;}
.libro__body-label{
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--gray-strong);
  padding-bottom:18px;border-bottom:1px solid var(--gray);margin-bottom:26px;
}

@media (max-width:860px){
  .libro__frontis-inner{grid-template-columns:1fr;gap:clamp(24px,5vw,40px);}
  .libro__cover{max-width:260px;}
  .libro__title{max-width:none;}
}