@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Merriweather:wght@400;700&display=swap');

:root{
  --bg:#f7f7f8;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --primary:#111827;
  --primary-2:#0f172a;
  --accent:#2563eb;
  --danger:#dc2626;
  --success:#16a34a;
  --shadow: 0 10px 24px rgba(15,23,42,.06);
  --radius: 14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height:100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247,247,248,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.progress{
  height: 3px;
  width: 0;
  background: var(--accent);
}
.header{
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap: 10px;
  text-decoration:none;
  color: var(--primary);
}
.brand .name{font-weight: 900; letter-spacing: .02em}
.brand .tag{color: var(--muted); font-size: .92rem}
.brand-ia{
  display: inline;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  vertical-align: baseline;
  box-shadow: none;
}
.brand-ia .brand-i{
  font-family: Merriweather, Georgia, serif;
  font-style: italic;
  font-weight: 700;
}
.brand-ia .brand-a{
  margin-left: .04em;
}

.search{
  flex: 1;
  display:flex;
  justify-content:center;
}
.search input{
  width: min(560px, 100%);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  background: #fff;
  outline: none;
  font-size: .95rem;
}
.actions{display:flex; gap:10px; align-items:center}
.btn{
  appearance:none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--primary);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 700;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.btn:hover{border-color:#cbd5e1; background:#fcfcfc}
.btn-primary{background: var(--accent); border-color: var(--accent); color: #fff}
.btn-primary:hover{filter: brightness(.98)}

.shell{
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 16px 56px;
  display:grid;
  grid-template-columns: 240px 1fr 260px;
  gap: 16px;
}

@media (max-width: 1100px){
  .shell{grid-template-columns: 1fr;}
  .sidebar, .rightbar{display:none;}
  .search{justify-content:flex-end}
}

.sidebar, .rightbar{
  position: sticky;
  top: 64px;
  align-self: start;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

/* Ads (optional) */
.ad-wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 16px 0;
}
.ad-box{
  padding: 14px;
}
.ad-box .ad-kicker{
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ad-box .ad-title{
  margin-top: 8px;
  font-weight: 900;
  line-height: 1.35;
  color: var(--primary);
}
.ad-box .ad-desc{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
}
.ad-box a{
  text-decoration: none;
  color: inherit;
  display: block;
}
.prose .ad-inline{
  margin: 18px 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.nav h3{
  font-size: .78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.nav a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--primary);
  text-decoration:none;
  font-weight: 700;
}
.nav a:hover{background:#f8fafc}
.nav a.active{background:#eff6ff; border:1px solid #dbeafe}

/* Reading column */
.hero{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.hero h1{
  font-family: Merriweather, Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  letter-spacing: -0.2px;
}
.hero p{margin-top:10px; color: var(--muted); max-width: 75ch; line-height:1.6}

.feed{margin-top: 12px; display:grid; gap: 10px;}
.article-card{
  display:block;
  text-decoration:none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.article-card:hover{border-color:#cbd5e1}
.article-card .kicker{color: var(--muted); font-size:.86rem}
.article-card h2{
  font-family: Merriweather, Georgia, serif;
  font-size: 1.18rem;
  margin-top: 6px;
}
.article-card p{margin-top: 8px; color: var(--muted); line-height:1.55; max-width: 80ch}
.article-card .meta{margin-top: 10px; color: var(--muted); font-size:.86rem}

/* Home: Featured + Actualidad */
.home-sections{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
}
@media (max-width: 1100px){
  .home-sections{grid-template-columns: 1fr;}
}

.home-feature{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.home-feature a{display:block; text-decoration:none; color: inherit;}
.home-feature .kicker{color: var(--muted); font-size:.86rem}
.home-feature h2{
  font-family: Merriweather, Georgia, serif;
  font-size: 1.6rem;
  margin-top: 8px;
  letter-spacing: -0.2px;
}
.home-feature p{margin-top: 10px; color: var(--muted); line-height:1.6; max-width: 80ch}
.home-feature .meta{margin-top: 12px; color: var(--muted); font-size:.86rem}

.home-latest .item{padding: 10px 10px; border-radius: 12px; text-decoration:none; color: inherit; display:block;}
.home-latest .item:hover{background:#f8fafc}
.home-latest .title{font-weight: 900; line-height:1.35}
.home-latest .meta{margin-top: 4px; color: var(--muted); font-size:.86rem}

/* Article page */
.article-shell{
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 16px 56px;
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr) 240px;
  gap: 16px;
}
@media (max-width: 1100px){
  .article-shell{grid-template-columns: 1fr;}
  .toc, .sidebar{display:none;}
}

.article{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 82ch;
  margin: 0 auto;
}
.news-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: .74rem;
}
.article h1{
  margin-top: 10px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(2.15rem, 3.8vw, 3rem);
  letter-spacing: -0.6px;
  line-height: 1.02;
  font-weight: 900;
}
.article .subtitle{
  margin-top: 12px;
  color: #334155;
  line-height: 1.55;
  max-width: 80ch;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.02rem;
}

.news-meta{margin-top: 14px;}
.author{display:flex; align-items:center; gap: 12px;}
.avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex: 0 0 auto;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.avatar .initials{font-weight: 900; color: #0f172a; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
.author-lines{display:flex; flex-direction:column; gap: 2px; min-width: 0;}
.author-name{font-weight: 900; color: var(--primary); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
.article .byline{color: var(--muted); font-size: .92rem; display:flex; gap:10px; flex-wrap:wrap}

.hero-media{
  margin-top: 16px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: #f8fafc;
}
.hero-media img{width:100%; display:block; height:auto;}
.hero-media figcaption{
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.prose{
  margin-top: 18px;
  font-family: Merriweather, Georgia, serif;
  font-size: clamp(1.06rem, 0.45vw + 1rem, 1.14rem);
  line-height: 1.8;
  color: var(--text);
  max-width: 72ch; /* key readability constraint */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.prose p{margin: 14px 0}
.prose > p:first-of-type::first-letter{
  float:left;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 3.6em;
  line-height: .9;
  padding-right: 10px;
  padding-top: 6px;
  color: var(--primary);
}
.prose h2, .prose h3{
  margin-top: 22px;
  margin-bottom: 10px;
  line-height: 1.25;
  scroll-margin-top: 86px;
}
.prose h2{font-size:1.4rem}
.prose h3{font-size:1.18rem}
.prose ul{margin: 10px 0 10px 22px}
.prose li{margin: 6px 0}
.prose blockquote{
  margin: 16px 0;
  padding: 14px 16px;
  border-left: 4px solid var(--accent);
  background: #f8fafc;
  color: #0f172a;
  font-style: italic;
  font-size: 1.08em;
}
.prose mark{background: #fff3bf}

.toc h3{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); margin-bottom: 10px;}
.toc a{display:block; padding: 8px 10px; border-radius: 12px; text-decoration:none; color: var(--primary); font-weight: 700; font-size:.92rem}
.toc a:hover{background:#f8fafc}
.toc a.indent{padding-left: 18px; font-weight: 600; color: #334155}

.toolbar-row{margin-top: 18px; display:flex; gap:10px; flex-wrap:wrap}

.clap{
  display:flex;
  align-items:center;
  gap:10px;
  border: 1px solid var(--border);
  background:#fff;
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 800;
}
.clap .count{color: var(--muted); font-weight: 800}

.float-menu{
  position: fixed;
  z-index: 30;
  display:none;
  background: #0f172a;
  color: #fff;
  border: 1px solid rgba(229,231,235,.16);
  border-radius: 999px;
  padding: 8px 10px;
  gap: 8px;
  align-items:center;
}
.float-menu button{
  appearance:none;
  background: transparent;
  border: 0;
  color: #fff;
  cursor:pointer;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
}
.float-menu button:hover{background: rgba(255,255,255,.10)}

.newsletter{margin-top: 18px; border-top:1px solid var(--border); padding-top: 14px}
.newsletter h3{font-size: 1rem}
.newsletter p{color: var(--muted); margin-top: 6px; line-height:1.6; font-size:.95rem; max-width: 75ch}
.newsletter form{margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap}
.newsletter input{
  flex:1;
  min-width: 240px;
  border:1px solid var(--border);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: .95rem;
}
.newsletter .hint{margin-top: 8px; font-size:.86rem; color: var(--muted)}
.newsletter .error{color: var(--danger); font-weight: 700}

.small-muted{color: var(--muted); font-size:.9rem; line-height:1.5}

/* Article: prioritize reading over chrome */
body[data-page="article"] .header{padding-top: 10px; padding-bottom: 10px;}

@media (min-width: 1101px) and (max-width: 1180px){
  body[data-page="article"] .article-shell{grid-template-columns: minmax(0, 1fr) 240px;}
  body[data-page="article"] .article-shell .sidebar{display:none;}
}

/* On mobile we must collapse back to a single column.
   This rule comes AFTER the 1180px rule to avoid leaving an empty 240px track
   when the TOC is hidden, which was squeezing the article into a narrow strip. */
@media (max-width: 1100px){
  body[data-page="article"] .article-shell{grid-template-columns: 1fr !important; display:block;}
  body[data-page="article"] .article-shell .rightbar{display:none;}
}

/* Defensive mobile fallback: apply even if body[data-page] is missing
   (e.g. clean-URL routing, stale HTML, or future pages). */
@media (max-width: 1100px){
  .article-shell{display:block !important;}
  .article-shell .sidebar,
  .article-shell .rightbar{display:none !important;}
  .article{max-width: 100%; width: 100%; margin-left: 0; margin-right: 0;}
}

@media (max-width: 820px){
  .header{flex-wrap: wrap;}
  .brand .tag{display:none;}
  .search{order: 3; width: 100%; justify-content: stretch;}
  .actions{order: 2; width: 100%; justify-content: flex-end; flex-wrap: wrap;}
  .search input{width: 100%;}
}

@media (max-width: 640px){
  .article{padding: 18px;}
  .prose{line-height: 1.75;}
}

@media (max-width: 480px){
  .article h1{font-size: clamp(1.75rem, 8vw, 2.35rem); line-height: 1.06;}
}

/* Touch-device fallback: some mobile browsers can present a wide layout viewport
   (e.g. “desktop site”), which prevents max-width breakpoints from triggering.
   This ensures the UI still collapses to a single column on phones/tablets. */
@media (hover: none) and (pointer: coarse){
  .shell{grid-template-columns: 1fr;}
  .sidebar, .rightbar{display:none;}
  .home-sections{grid-template-columns: 1fr;}

  .article-shell{display:block !important;}
  .article-shell .sidebar,
  .article-shell .rightbar{display:none !important;}
  .article{max-width: 100%; width: 100%; margin-left: 0; margin-right: 0;}

  .header{flex-wrap: wrap;}
  .brand .tag{display:none;}
  .search{order: 3; width: 100%; justify-content: stretch;}
  .actions{order: 2; width: 100%; justify-content: flex-end; flex-wrap: wrap;}
  .search input{width: 100%;}
}