:root{
  color-scheme: light;
  --bg:#ffffff;
  --fg:#111111;
  --muted:rgba(0,0,0,.72);
  --hair:rgba(0,0,0,.12);
  --hover:rgba(0,0,0,.035);
  --max:980px;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.6;
}

a{color:inherit;text-underline-offset:3px}
a:hover{background:var(--hover)}
*{box-sizing:border-box}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 18px 44px;
}

/* Header “Atomo-like” */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:13px;
}

.lang{display:flex;align-items:center}
.lang a{text-decoration:none}
.lang .on{text-decoration:underline;text-underline-offset:3px}
.lang .off{opacity:.75}
.dot{margin:0 8px;opacity:.6}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:flex-end;
  font-size:14px;
}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:3px}

.brand{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  text-decoration:none;
}
.brand b{font-weight:700;letter-spacing:.2px}
.brand span{font-size:12px;opacity:.7}

.rule{border:0;border-top:1px solid var(--hair);margin:14px 0}

/* Headings */
.kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0 0 10px}
h1{font-family:var(--serif);font-size:42px;line-height:1.06;margin:0 0 10px}
.lede{font-size:15px;opacity:.82;margin:0 0 14px;max-width:72ch}
.section-title{font-size:16px;margin:18px 0 10px}
.small{font-size:12px;opacity:.72}

/* Home layout */
.home-grid{
  display:block;
}
.card{
  border:1px solid var(--hair);
  border-radius:18px;
  background:#fff;
  padding:16px 16px 14px;
}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;
  text-decoration:none;font-size:13px;
  border:1px solid rgba(0,0,0,.18);
  background:#111;color:#fff;
}
.btn.ghost{background:transparent;color:var(--fg)}
.btn:hover{opacity:.94}

.toc{border-top:1px solid var(--hair);margin-top:12px;padding-top:12px}
.toc .t{font-size:13px;opacity:.85;margin-bottom:8px}
.toc ul{margin:0;padding-left:18px}
.toc li{margin:6px 0}

.panel{border:1px solid var(--hair);border-radius:18px;padding:14px 14px 12px}
.panel h2{margin:0 0 10px;font-size:16px;font-family:var(--sans)}
.list{margin:0;padding-left:18px}
.li{margin:10px 0}
.li a{display:block;text-decoration:none;padding:10px;border-radius:12px}
.li a:hover{background:var(--hover)}
.meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;opacity:.75;margin-bottom:6px}
.title{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.25}
.deck{margin-top:6px;font-size:15px;line-height:1.65;opacity:.88;max-width:72ch}

.tags{display:flex;flex-wrap:wrap;gap:0;line-height:1.7}
.tags a{text-decoration:underline;text-underline-offset:3px}
.sep{opacity:.6;user-select:none;white-space:pre}

/* Search */
.search{display:flex;gap:12px;align-items:center;margin-top:12px}
.search form{display:flex;gap:8px;align-items:center;flex:1}
.search input{
  flex:1;border:1px solid rgba(0,0,0,.28);
  border-radius:10px;padding:10px 12px;font-size:14px;
  background:#fff;color:#111;
}
.search input::placeholder{color:rgba(0,0,0,.55)}
.search button{
  border:1px solid rgba(0,0,0,.28);
  background:#111;color:#fff;
  border-radius:10px;padding:10px 12px;font-size:14px;cursor:pointer;
}
.search button:hover{opacity:.92}

/* Article detail typography */
.article{max-width:78ch}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;opacity:.75;margin-bottom:10px}
.article h1{font-size:42px}
.article .deck{font-size:16px;line-height:1.6;opacity:.86;margin:0 0 18px}
.prose{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.78;
}
.prose p{margin:0 0 18px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose h2{margin:34px 0 12px;font-size:24px;line-height:1.25}
.prose h3{margin:26px 0 10px;font-size:20px;line-height:1.3}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:8px 0}
.prose blockquote{margin:22px 0;padding:2px 0 2px 16px;border-left:3px solid rgba(0,0,0,.18)}
.prose code{font-family:var(--mono);font-size:.92em}
.prose pre{margin:18px 0;padding:14px;border:1px solid var(--hair);border-radius:12px;overflow:auto}
.prose hr{border:0;border-top:1px solid var(--hair);margin:26px 0}

/* Footer */
.footer{margin-top:22px;padding-top:14px;border-top:1px solid var(--hair);font-size:12px;opacity:.75;display:flex;flex-wrap:wrap;gap:0;align-items:center}

@media (max-width:920px){
  .home-grid{grid-template-columns:1fr}
  h1{font-size:36px}
  .prose{font-size:18px;line-height:1.75}
}

/* ===== Home más “Atomo” (menos cajas) ===== */

/* Quita el look de tarjeta */
.card,
.panel{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:0 !important;
}

/* Separadores finos entre bloques */
.card{ padding-bottom:16px !important; border-bottom:1px solid var(--hair) !important; }
.panel{ padding-top:16px !important; border-top:1px solid var(--hair) !important; }

/* “Últimos textos” como lista editorial (sin recuadros) */
.list{ padding-left:0 !important; margin:0 !important; list-style:none !important; }
.li{ margin:0 !important; padding:14px 0 !important; border-top:1px solid var(--hair) !important; }
.li:first-child{ border-top:0 !important; }
.li a{ padding:0 !important; border-radius:0 !important; }
.li a:hover{ background:transparent !important; text-decoration:underline; }

/* Títulos más “magazine” */
.title{ font-size:22px !important; line-height:1.2 !important; }
.deck{ font-size:15px !important; }

/* Botones más discretos */
.btnrow{ margin:12px 0 12px !important; }
.btn{ border-radius:10px !important; }

:root{
  --cream:#f5eee6;
  --ink:#151515;
  --hair:rgba(0,0,0,.16);
  --accent:#cfa27b;
}

body{
  background:var(--cream);
  color:var(--ink);
}

.a-wrap{max-width:1120px;margin:0 auto;padding:18px 22px 44px}
.a-head__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.a-lang{font-size:12px;letter-spacing:.14em}
.a-lang__on{text-decoration:underline;text-underline-offset:3px}
.a-lang__off{opacity:.7;text-decoration:none}
.a-title{text-align:center}
.a-title__brand{text-decoration:none;font-family: Georgia, "Times New Roman", Times, serif;font-size:34px;letter-spacing:.08em}
.a-ingresa{justify-self:end;text-decoration:none;border:1px solid var(--accent);padding:6px 10px;font-size:12px;letter-spacing:.18em}
.a-menu{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:12px;letter-spacing:.14em}
.a-menu__a{text-decoration:none}
.a-bar{opacity:.55}

.a-hero{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
  padding:24px 0 10px;
}
.a-hero__img{display:block;text-decoration:none}
.a-hero__img img{width:100%;height:auto;display:block;max-width:420px;margin:0 auto}
.a-hero__card{
  display:block;
  text-decoration:none;
  background:var(--accent);
  color:#fff;
  padding:28px 26px;
  min-height:420px;
}
.a-hero__lines{display:flex;gap:14px;margin-bottom:18px}
.a-hero__lines span{display:block;width:64px;height:2px;background:rgba(255,255,255,.65)}
.a-hero__h1{font-family: Georgia, "Times New Roman", Times, serif;font-size:38px;line-height:1.05;margin:0 0 14px}
.a-hero__p{margin:0;max-width:46ch;opacity:.95;font-size:15px;line-height:1.55}
.a-hero__rule{height:1px;background:rgba(255,255,255,.6);margin:22px 0}
.a-hero__by{font-size:11px;letter-spacing:.24em;opacity:.95}

.a-section{margin-top:28px}
.a-section__row{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.a-section__h2{font-family: Georgia, "Times New Roman", Times, serif;font-size:34px;margin:0}
.a-section__rule{flex:0 0 140px;height:2px;background:var(--ink);opacity:.8}

.a-list{list-style:none;padding:0;margin:0}
.a-li{padding:14px 0;border-top:1px solid var(--hair)}
.a-li__a{text-decoration:none;display:block}
.a-li__meta{font-size:12px;letter-spacing:.08em;opacity:.7;margin-bottom:6px}
.a-li__t{font-family: Georgia, "Times New Roman", Times, serif;font-size:24px;line-height:1.2}
.a-li__d{margin-top:6px;opacity:.8;max-width:70ch}

.a-topics{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);font-size:12px;letter-spacing:.08em}
.a-topics__t{opacity:.7;margin-right:10px}
.a-topics__a{text-decoration:none}
.a-topics__a:hover{text-decoration:underline;text-underline-offset:3px}

.a-foot{margin-top:28px;padding-top:14px;border-top:1px solid var(--hair);font-size:12px;opacity:.7}

@media (max-width: 900px){
  .a-hero{grid-template-columns:1fr}
  .a-hero__card{min-height:auto}
}

/* 1) Menú más “aireado” y centrado */
.a-menu{ margin-top:18px !important; gap:22px !important; }
.a-menu__a{ opacity:.9; }
.a-menu__a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* 2) Hero: bajar un poco la tarjeta para que “respire” */
.a-hero{ padding-top:34px !important; }

/* 3) “Artículos destacados”: línea más larga (como Atomo) */
.a-section__rule{ flex:1 !important; max-width:260px !important; }

/* ===== Hero slider: líneas clickeables ===== */
.a-hero__card{ position:relative; }
.a-hero__hit{ position:absolute; inset:0; z-index:3; display:block; }

.a-hero__lines,
.a-hero__h1,
.a-hero__p,
.a-hero__rule,
.a-hero__by{ position:relative; z-index:2; }

.a-hero__lines{ display:flex; gap:14px; margin-bottom:18px; }

.a-dotbtn{
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
}
.a-dotbtn span{
  display:block;
  width:64px;
  height:2px;
  background:rgba(255,255,255,.55);
}
.a-dotbtn.is-on span{
  background:rgba(255,255,255,.9);
}
.a-dotbtn:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:4px;
}

.a-hero__card{ position:relative; cursor:pointer; }
.a-dotbtn{ background:transparent; border:0; padding:0; margin:0; cursor:pointer; }
.a-dotbtn span{ display:block; width:64px; height:2px; background:rgba(255,255,255,.55); }
.a-dotbtn.is-on span{ background:rgba(255,255,255,.9); }
.a-dotbtn:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:4px; }

/* slider: asegurar clicks */
#heroDots{ position:relative; z-index:5; }
#heroDots button{ pointer-events:auto; }
#heroCard{ position:relative; }
#heroCard *{ pointer-events:auto; } /* evita “nada” si hay reglas raras */

/* slider: asegurar que nada tape los botones */
#heroDots{ position:relative; z-index:9999; }
#heroDots button{ pointer-events:auto; }

/* HERO lines: área clic grande (evita “me lleva al artículo”) */
#heroDots{ gap:14px; }
#heroDots .a-dotbtn{
  padding:14px 0;            /* agranda alto clickeable */
  width:74px;                /* agranda ancho clickeable */
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#heroDots .a-dotbtn span{
  width:64px;
}

/* Hacer las “líneas” fáciles de clickear (área grande) */
.a-dotbtn{
  width: 84px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.a-dotbtn span{
  width: 64px;
  height: 2px;
}

/* ===== Hero slider: agrandar área clickeable de las líneas ===== */
#heroDots .a-dotbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 0;   /* área clickeable */
  width:72px;       /* ancho de la línea */
}
#heroDots .a-dotbtn span{
  pointer-events:none;
}

/* HERO: imagen con el mismo alto que la tarjeta beige */
.a-hero{ 
  align-items: stretch !important; /* iguala alturas en la grilla */
}

.a-hero__img{
  display:block;
  height:100%;
  max-width:420px;   /* mantiene el “aire” tipo Átomo */
  margin:0 auto;
}

.a-hero__img img{
  width:100%;
  height:100%;       /* clave: iguala el alto */
  object-fit:cover;  /* recorta sin deformar */
  display:block;
}

.a-hero__card{
  height:100%;
}

/* ===========================
   Lectura “revista” (artículo)
   =========================== */

.a-article{
  max-width: 880px;
  margin: 34px auto 64px;
  padding: 0 18px;
}

.a-article__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .72;
  margin: 10px 0 14px;
}

.a-article__h1{
  margin: 0;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.a-article__deck{
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.45;
  max-width: 70ch;
  opacity: .9;
}

.a-article__hero{
  margin: 18px 0 18px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.35);
  overflow: hidden;
}

.a-article__hero img{
  width: 100%;
  height: 360px;
  display:block;
  object-fit: cover;
}

.a-prose{
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.72;
  max-width: 72ch;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

.a-prose h2{
  margin: 32px 0 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.a-prose blockquote{
  margin: 18px 0;
  padding: 10px 14px;
  border-left: 3px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.4);
  opacity: .95;
}

.a-prose hr{
  border:0;
  border-top:1px solid rgba(0,0,0,.14);
  margin: 26px 0;
}

/* ===========================
   “Número / Issue” para PDF
   =========================== */

.a-issue{
  max-width: 980px;
  margin: 26px auto 64px;
  padding: 0 18px;
}

.a-issue__head{
  margin: 18px 0 18px;
  border-bottom: 1px solid rgba(0,0,0,.14);
  padding-bottom: 14px;
}

.a-issue__k{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .72;
}

.a-issue__title{
  margin: 8px 0 0;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
}

.a-issue__period{
  margin: 8px 0 0;
  opacity: .78;
}

.issue-article{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.12);
}

@media print{
  body{ background:#fff !important; }
  .a-head, .a-foot, .a-menu, .a-ingresa, .a-lang{ display:none !important; }
  a{ text-decoration:none !important; }
  .issue-article{ break-before: page; }
  .a-article__hero img{ height: 300px; }
}