/* ============================================================
   CHOZI BLOG — Design System
   Built on Chozi.com brand: #0EA5E9 primary, #0B1120 dark
   Mobile-first, semantic HTML, WP-ready architecture
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Brand palette (Chozi) */
  --blue: #0EA5E9;
  --blue-600: #0284C7;
  --blue-700: #0369A1;
  --blue-50: #F0F9FF;
  --blue-100: #E0F2FE;

  --dark: #0B1120;
  --dark-soft: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white: #FFFFFF;

  --green: #10B981;
  --red: #EF4444;
  --amber: #F59E0B;

  /* Surface tokens */
  --bg: var(--white);
  --bg-soft: var(--slate-50);
  --bg-muted: var(--slate-100);
  --text: var(--dark);
  --text-soft: var(--slate-600);
  --text-muted: var(--slate-500);
  --border: var(--slate-200);
  --border-soft: var(--slate-100);

  /* Typography */
  --font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;

  /* Type scale (modular, 1.250 minor third) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --sh-lg: 0 12px 24px rgba(15, 23, 42, 0.08);
  --sh-xl: 0 24px 48px rgba(15, 23, 42, 0.12);

  /* Layout */
  --container: 1240px;
  --container-narrow: 760px;
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
}

/* Dark mode */
[data-theme="dark"] {
  --bg: #0B1120;
  --bg-soft: #111827;
  --bg-muted: #1E293B;
  --text: #F8FAFC;
  --text-soft: #CBD5E1;
  --text-muted: #94A3B8;
  --border: #1E293B;
  --border-soft: #111827;
  --blue-50: rgba(14, 165, 233, 0.08);
  --blue-100: rgba(14, 165, 233, 0.15);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: var(--blue); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--blue-600); }
ul, ol { padding-left: 1.25rem; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.02em;
}
p { margin: 0 0 var(--sp-4); color: var(--text-soft); }
hr { border: 0; height: 1px; background: var(--border); margin: var(--sp-12) 0; }

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.section { padding: var(--sp-16) 0; }
.section-soft { background: var(--bg-soft); }

@media (max-width: 768px) {
  .section { padding: var(--sp-12) 0; }
  .container, .container-narrow { padding: 0 var(--sp-4); }
}

/* ============================================================
   HEADER — Chozi brand bar (#0EA5E9)
   ============================================================ */
.chozi-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blue);
  height: var(--header-h);
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(7, 89, 133, 0.15);
}
.chozi-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.chozi-nav { display: flex; align-items: center; gap: var(--sp-2); }
.chozi-menu-toggle {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--white);
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.chozi-menu-toggle:hover { background: rgba(255, 255, 255, 0.15); }
.chozi-nav-links { display: flex; gap: var(--sp-2); margin-left: var(--sp-2); }
.chozi-nav-links a {
  color: var(--white);
  padding: var(--sp-2) var(--sp-4);
  font-weight: 500;
  font-size: var(--fs-base);
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.chozi-nav-links a:hover,
.chozi-nav-links a.active { background: rgba(255, 255, 255, 0.18); color: var(--white); }

.chozi-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--white);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.chozi-logo svg { width: 28px; height: 28px; }

.chozi-actions { display: flex; align-items: center; gap: var(--sp-2); }
.chozi-lang {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--white);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.chozi-lang:hover { background: rgba(255, 255, 255, 0.15); }
.chozi-lang svg { width: 18px; height: 18px; }

.chozi-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--white);
  border: 1.5px solid var(--white);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: var(--fs-sm);
  background: transparent;
  transition: all var(--t-fast) var(--ease);
}
.chozi-btn-outline:hover { background: rgba(255, 255, 255, 0.15); color: var(--white); }
.chozi-btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  background: var(--white);
  color: var(--blue);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: all var(--t-fast) var(--ease);
}
.chozi-btn-solid:hover { background: rgba(255, 255, 255, 0.92); color: var(--blue-600); }

@media (max-width: 980px) {
  .chozi-nav-links { display: none; }
  .chozi-actions .chozi-btn-outline,
  .chozi-actions .chozi-btn-solid:not(.keep) { display: none; }
}
@media (max-width: 640px) {
  .chozi-logo { font-size: 1.25rem; }
  .chozi-lang span { display: none; }
}

/* ============================================================
   SUB-NAV — Blog categories
   ============================================================ */
.blog-subnav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  z-index: 99;
}
.blog-subnav .container {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 56px;
  overflow-x: auto;
  scrollbar-width: none;
}
.blog-subnav .container::-webkit-scrollbar { display: none; }
.subnav-brand {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text);
  white-space: nowrap;
}
.subnav-brand .subnav-blog-tag {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-left: var(--sp-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.subnav-links {
  display: flex;
  gap: var(--sp-1);
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.subnav-links a {
  display: inline-flex;
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-soft);
  font-weight: 500;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
}
.subnav-links a:hover { background: var(--bg-muted); color: var(--text); }
.subnav-links a.active { background: var(--blue-50); color: var(--blue); }

.subnav-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-muted);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  min-width: 240px;
}
.subnav-search input {
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  flex: 1;
  color: var(--text);
  font-size: var(--fs-sm);
}
.subnav-search svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.theme-toggle {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  color: var(--text-soft);
  transition: all var(--t-fast) var(--ease);
}
.theme-toggle:hover { background: var(--bg-muted); color: var(--text); }

@media (max-width: 768px) {
  .subnav-search { display: none; }
}

/* ============================================================
   HERO — Blog homepage
   ============================================================ */
.blog-hero {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  padding: var(--sp-16) 0 var(--sp-12);
}
.blog-hero h1 {
  font-size: clamp(2rem, 5vw, var(--fs-5xl));
  max-width: 800px;
  margin: 0 auto var(--sp-4);
  text-align: center;
  letter-spacing: -0.03em;
}
.blog-hero .lead {
  max-width: 640px;
  margin: 0 auto var(--sp-8);
  text-align: center;
  font-size: var(--fs-md);
  color: var(--text-soft);
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}
.hero-stat {
  text-align: center;
}
.hero-stat-num {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
}
.hero-stat-lbl {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ============================================================
   FEATURED POST — Editorial split
   ============================================================ */
.featured-post {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  background: var(--bg);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--border-soft);
}
.featured-img {
  position: relative;
  height: 100%;
  min-height: 420px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  overflow: hidden;
}
.featured-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.featured-img .featured-badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background: var(--white);
  color: var(--dark);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--sh-md);
}
.featured-content { padding: var(--sp-10) var(--sp-10) var(--sp-10) 0; }
.featured-content .pill { margin-bottom: var(--sp-4); }
.featured-content h2 {
  font-size: clamp(1.5rem, 3vw, var(--fs-3xl));
  margin-bottom: var(--sp-4);
  line-height: 1.15;
}
.featured-content h2 a { color: var(--text); }
.featured-content h2 a:hover { color: var(--blue); }
.featured-content .excerpt {
  font-size: var(--fs-md);
  color: var(--text-soft);
  margin-bottom: var(--sp-6);
  line-height: 1.6;
}
.featured-meta {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}
.featured-meta .author-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-sm);
}

@media (max-width: 980px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-img { min-height: 280px; }
  .featured-content { padding: var(--sp-6); }
}

/* ============================================================
   PILLS / TAGS
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 12px;
  background: var(--blue-50);
  color: var(--blue);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-pill);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pill-tag {
  background: var(--blue-100);
  color: var(--blue-700);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.pill-zone { background: rgba(16, 185, 129, 0.1); color: var(--green); }
.pill-expat { background: rgba(245, 158, 11, 0.1); color: #B45309; }
.pill-legal { background: rgba(99, 102, 241, 0.1); color: #4F46E5; }
.pill-market { background: rgba(236, 72, 153, 0.1); color: #BE185D; }

[data-theme="dark"] .pill-zone { color: #34D399; }
[data-theme="dark"] .pill-expat { color: #FCD34D; }
[data-theme="dark"] .pill-legal { color: #A5B4FC; }
[data-theme="dark"] .pill-market { color: #F472B6; }

/* ============================================================
   POST GRID
   ============================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-10);
}
.post-card {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-xl);
  border-color: var(--blue-100);
}
.post-card-img {
  aspect-ratio: 16 / 10;
  background: var(--bg-muted);
  overflow: hidden;
  position: relative;
}
.post-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.post-card:hover .post-card-img img { transform: scale(1.04); }
.post-card-img .reading-time {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-3);
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.post-card-body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.post-card-body .pill { align-self: flex-start; margin-bottom: var(--sp-3); }
.post-card-body h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}
.post-card-body h3 a { color: var(--text); }
.post-card-body h3 a:hover { color: var(--blue); }
.post-card-body .excerpt {
  color: var(--text-soft);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.post-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: auto;
}
.post-card-meta .dot { width: 3px; height: 3px; background: var(--text-muted); border-radius: 50%; }

/* ============================================================
   POST GRID + SIDEBAR LAYOUT
   ============================================================ */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-12);
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; gap: var(--sp-10); }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar { position: sticky; top: calc(var(--header-h) + 80px); }
.sidebar-block {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.sidebar-block h4 {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sidebar-block h4 svg { width: 18px; height: 18px; color: var(--blue); }
.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.sidebar-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.sidebar-list li:first-child { padding-top: 0; }
.sidebar-list .num {
  width: 24px; height: 24px;
  flex-shrink: 0;
  background: var(--blue-50);
  color: var(--blue);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-xs);
}
.sidebar-list a {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  display: block;
}
.sidebar-list a:hover { color: var(--blue); }
.sidebar-list .meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-cloud a {
  display: inline-flex;
  padding: 6px 12px;
  background: var(--bg-muted);
  color: var(--text-soft);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: all var(--t-fast) var(--ease);
}
.tag-cloud a:hover { background: var(--blue); color: var(--white); }

/* Newsletter CTA */
.newsletter-cta {
  background: linear-gradient(135deg, var(--dark) 0%, var(--blue-700) 100%);
  color: var(--white);
  border: 0;
  padding: var(--sp-6);
}
.newsletter-cta h4 { color: var(--white); }
.newsletter-cta p { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-sm); }
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.newsletter-form input {
  padding: var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  color: var(--white);
  font: inherit;
  font-size: var(--fs-sm);
  outline: none;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter-form input:focus { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); }
.newsletter-form button {
  padding: var(--sp-3);
  background: var(--blue);
  color: var(--white);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background var(--t-fast) var(--ease);
}
.newsletter-form button:hover { background: var(--blue-600); }

/* Property CTA */
.property-cta {
  background: var(--bg);
  border: 2px solid var(--blue);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.property-cta::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: var(--blue-50);
  border-radius: 50%;
  z-index: 0;
}
.property-cta > * { position: relative; z-index: 1; }
.property-cta h4 svg { color: var(--blue); }
.property-cta .price {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue);
  margin-bottom: var(--sp-1);
  letter-spacing: -0.02em;
}
.property-cta .location {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.property-cta .property-img {
  aspect-ratio: 16/10;
  background: var(--bg-muted);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
.property-cta .property-features {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.property-cta .feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--blue-50);
  color: var(--blue);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.property-cta .cta-btn {
  display: block;
  width: 100%;
  padding: var(--sp-3);
  background: var(--blue);
  color: var(--white);
  text-align: center;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background var(--t-fast) var(--ease);
}
.property-cta .cta-btn:hover { background: var(--blue-600); color: var(--white); }

/* ============================================================
   POST PAGE
   ============================================================ */
.reading-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  height: 3px;
  background: var(--blue);
  width: 0%;
  z-index: 98;
  transition: width 50ms linear;
}

.post-header {
  padding: var(--sp-12) 0 var(--sp-8);
  border-bottom: 1px solid var(--border-soft);
}
.post-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.post-breadcrumb a { color: var(--text-muted); }
.post-breadcrumb a:hover { color: var(--blue); }
.post-breadcrumb .sep { color: var(--slate-300); }

.post-header .pill { margin-bottom: var(--sp-4); }
.post-header h1 {
  font-size: clamp(1.875rem, 4.5vw, var(--fs-4xl));
  max-width: 880px;
  line-height: 1.15;
  margin-bottom: var(--sp-5);
}
.post-header .post-lead {
  font-size: var(--fs-lg);
  color: var(--text-soft);
  max-width: 760px;
  line-height: 1.55;
  margin-bottom: var(--sp-8);
}
.post-header-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.author-block {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.author-block .author-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-base);
}
.author-block .author-name {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-sm);
  display: block;
}
.author-block .author-role {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.post-header-meta .meta-dots {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-left: auto;
}
.post-header-meta .meta-dots .dot { width: 3px; height: 3px; background: var(--text-muted); border-radius: 50%; }

.post-hero-img {
  margin: var(--sp-10) 0 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 21/9;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
}
.post-hero-img img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ============================================================
   POST CONTENT TYPOGRAPHY
   ============================================================ */
.post-body {
  padding: var(--sp-12) 0;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 720px;
}
.post-body > p,
.post-body > ul,
.post-body > ol,
.post-body > blockquote,
.post-body > h2,
.post-body > h3,
.post-body > h4,
.post-body > figure,
.post-body > .callout,
.post-body > .data-table,
.post-body > hr {
  margin-bottom: var(--sp-5);
}
.post-body h2 {
  font-size: clamp(1.5rem, 2.5vw, var(--fs-2xl));
  margin-top: var(--sp-12);
  scroll-margin-top: calc(var(--header-h) + 80px);
}
.post-body h3 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-10);
  scroll-margin-top: calc(var(--header-h) + 80px);
}
.post-body h4 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-8);
}
.post-body p { color: var(--text-soft); font-size: var(--fs-md); }
.post-body a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.post-body a:hover { color: var(--blue-700); }
.post-body strong { color: var(--text); font-weight: 700; }
.post-body ul, .post-body ol { padding-left: 1.5rem; }
.post-body li { margin-bottom: var(--sp-2); }
.post-body li::marker { color: var(--blue); }
.post-body blockquote {
  border-left: 4px solid var(--blue);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-8) 0;
  background: var(--blue-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--text);
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body figure { margin: var(--sp-8) 0; }
.post-body figure img { border-radius: var(--r-md); }
.post-body figcaption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--sp-3);
  font-style: italic;
}

/* Callout boxes */
.callout {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  margin: var(--sp-8) 0;
}
.callout-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-base);
}
.callout-title svg { width: 20px; height: 20px; color: var(--blue); }
.callout p:last-child { margin-bottom: 0; }
.callout-warning { border-left-color: var(--amber); }
.callout-warning .callout-title svg { color: var(--amber); }
.callout-tip { border-left-color: var(--green); }
.callout-tip .callout-title svg { color: var(--green); }

/* Data tables */
.data-table {
  overflow-x: auto;
  margin: var(--sp-8) 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.data-table th {
  background: var(--bg-soft);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-soft);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: var(--bg-soft); }

/* Key fact box */
.key-fact {
  background: linear-gradient(135deg, var(--blue-50) 0%, rgba(14, 165, 233, 0.05) 100%);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-8);
  margin: var(--sp-8) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  border: 1px solid var(--blue-100);
}
.key-fact .number {
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.key-fact .desc {
  font-size: var(--fs-base);
  color: var(--text);
  margin: 0;
}
@media (max-width: 540px) {
  .key-fact { flex-direction: column; align-items: flex-start; gap: var(--sp-2); text-align: left; }
}

/* Share bar */
.share-bar {
  position: sticky;
  top: calc(var(--header-h) + 80px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-self: flex-start;
}
.share-bar a {
  width: 40px; height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  transition: all var(--t-fast) var(--ease);
}
.share-bar a:hover { background: var(--blue); color: var(--white); border-color: var(--blue); transform: translateY(-2px); }

.post-layout {
  display: grid;
  grid-template-columns: 60px 1fr 320px;
  gap: var(--sp-10);
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .post-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .share-bar { flex-direction: row; position: static; }
}

/* ============================================================
   TOC
   ============================================================ */
.toc {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
}
.toc-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.toc-title svg { width: 18px; height: 18px; color: var(--blue); }
.toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.toc li {
  counter-increment: toc;
  margin-bottom: var(--sp-2);
}
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue);
  margin-right: var(--sp-2);
}
.toc a {
  color: var(--text-soft);
  line-height: 1.4;
  transition: color var(--t-fast) var(--ease);
  font-size: var(--fs-sm);
}
.toc a:hover, .toc a.active { color: var(--blue); }

/* ============================================================
   RELATED POSTS
   ============================================================ */
.related-section {
  background: var(--bg-soft);
  padding: var(--sp-16) 0;
  margin-top: var(--sp-12);
}
.related-section h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
}
.related-section .lead {
  color: var(--text-soft);
  margin-bottom: var(--sp-10);
}

/* ============================================================
   AUTHOR PAGE
   ============================================================ */
.author-hero {
  padding: var(--sp-16) 0 var(--sp-8);
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
}
.author-hero-content {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  max-width: 880px;
}
.author-hero .author-avatar-xl {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-3xl);
  flex-shrink: 0;
  box-shadow: var(--sh-lg);
}
.author-hero h1 { font-size: clamp(1.75rem, 4vw, var(--fs-3xl)); }
.author-hero .role {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--blue);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.author-hero .bio { font-size: var(--fs-md); color: var(--text-soft); margin-bottom: var(--sp-6); }
.author-stats {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.author-stat {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.author-stat strong { color: var(--text); font-weight: 700; font-size: var(--fs-base); display: block; }

@media (max-width: 640px) {
  .author-hero-content { flex-direction: column; align-items: center; text-align: center; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.chozi-footer {
  background: var(--dark);
  color: var(--slate-300);
  padding: var(--sp-16) 0 var(--sp-8);
  margin-top: var(--sp-12);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-12);
}
.footer-brand .chozi-logo { color: var(--white); position: static; transform: none; }
.footer-brand p { color: var(--slate-400); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.footer-col h5 {
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--sp-2); }
.footer-col a {
  color: var(--slate-300);
  font-size: var(--fs-sm);
  transition: color var(--t-fast) var(--ease);
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fs-sm);
  color: var(--slate-400);
}
.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--slate-300);
  transition: all var(--t-fast) var(--ease);
}
.footer-social a:hover { background: var(--blue); color: var(--white); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; gap: var(--sp-4); text-align: center; }
}

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.category-hero {
  padding: var(--sp-12) 0 var(--sp-8);
  background: var(--bg-soft);
}
.category-hero h1 {
  font-size: clamp(2rem, 4vw, var(--fs-3xl));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.category-hero p {
  font-size: var(--fs-md);
  max-width: 680px;
  margin-bottom: 0;
}
.category-filters {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-6) 0;
  flex-wrap: wrap;
}
.category-filters .filter-pill {
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.category-filters .filter-pill:hover { border-color: var(--blue); color: var(--blue); }
.category-filters .filter-pill.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* ============================================================
   LANG TOGGLE STATES
   ============================================================ */
[data-lang="en"] [lang="es"] { display: none; }
[data-lang="es"] [lang="en"] { display: none; }

/* ============================================================
   UTIL
   ============================================================ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* No-image placeholder gradient (Chozi style) */
.gradient-bg {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 50%, var(--dark) 100%);
  position: relative;
}
.gradient-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15) 0%, transparent 60%);
}
.gradient-bg-2 {
  background: linear-gradient(135deg, #FB923C 0%, #EF4444 50%, var(--dark) 100%);
}
.gradient-bg-3 {
  background: linear-gradient(135deg, var(--green) 0%, #047857 50%, var(--dark) 100%);
}
.gradient-bg-4 {
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, var(--dark) 100%);
}

/* Selection color */
::selection { background: var(--blue); color: var(--white); }

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ==========================================================
   AUTHOR PAGE — extended styles
   ========================================================== */
.author-hero-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-8) 0 var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
}
.author-hero-avatar .author-avatar-xl {
  width: 140px;
  height: 140px;
  font-size: 56px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  letter-spacing: -2px;
  box-shadow: 0 12px 32px rgba(14, 165, 233, 0.35);
}
.author-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.author-hero h1 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  margin: 0 0 var(--sp-2);
  font-weight: 800;
  letter-spacing: -1.5px;
}
.author-role-large {
  font-size: var(--fs-lg);
  color: var(--text-soft);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}
.author-bio {
  font-size: var(--fs-md);
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: var(--sp-5);
  max-width: 60ch;
}
.author-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.author-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}
.author-social a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}

.author-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--border-soft);
}
.author-stats .stat-card {
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
}
.author-stats .stat-number {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
  margin-bottom: var(--sp-2);
  letter-spacing: -1.5px;
}
.author-stats .stat-label {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  font-weight: 500;
}

.author-specialties {
  padding: var(--sp-8) 0;
}
.author-specialties h3 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-4);
  font-weight: 700;
}
.specialty-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Other authors grid (used in author.html) */
.authors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.author-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  align-items: flex-start;
}
.author-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.author-card-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-lg);
}
.author-card-body h4 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-md);
  font-weight: 700;
}
.author-card-role {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--blue);
  font-weight: 500;
}
.author-card-bio {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.55;
}
.author-card-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
}

/* Section head helper (used across listing pages) */
.section-head {
  margin-bottom: var(--sp-8);
  text-align: center;
}
.section-head h2 {
  font-size: clamp(1.5rem, 3vw, var(--fs-2xl));
  margin: 0 0 var(--sp-2);
  font-weight: 800;
  letter-spacing: -1px;
}
.section-head .section-sub {
  color: var(--text-soft);
  font-size: var(--fs-md);
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .author-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .author-bio { margin-left: auto; margin-right: auto; }
  .author-social { justify-content: center; }
  .author-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   WORDPRESS-SPECIFIC EXTENSIONS
   Estilos añadidos para elementos que no existían en el HTML estático
   pero sí en el theme WP (grids, sidebar posts, paginación).
   ========================================================== */

/* Layout principal: grid posts + sidebar */
.posts-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-10);
  align-items: start;
}
@media (max-width: 1024px) {
  .posts-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .posts-layout > * { min-width: 0; }
}
.posts-main { min-width: 0; }

/* Mini-post list (top posts en sidebar) */
.mini-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: minipost;
}
.mini-post-list li {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.mini-post-list li:last-child { border-bottom: none; }
.mini-post-list a {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color 0.15s ease;
}
.mini-post-list a:hover { color: var(--blue); }
.mini-post-num {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--blue);
  min-width: 24px;
  line-height: 1;
  letter-spacing: -1px;
}
.mini-post-title {
  line-height: 1.4;
  font-weight: 500;
}

/* WP paginación */
.pagination-wrap,
.wp-pagenavi,
.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: var(--sp-8) 0 var(--sp-4);
  flex-wrap: wrap;
}
.pagination-wrap a,
.pagination-wrap span,
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-sm);
  transition: all 0.15s ease;
  background: var(--bg);
}
.pagination-wrap a:hover,
.nav-links .page-numbers:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.pagination-wrap .current,
.nav-links .page-numbers.current {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.pagination-wrap .dots,
.nav-links .page-numbers.dots {
  border: none;
  background: transparent;
}

/* Footer legal links */
.footer-legal {
  display: flex;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-legal a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-xs);
  transition: color 0.15s ease;
}
.footer-legal a:hover { color: var(--text); }

/* WP block content spacing */
.post-body .wp-block-image,
.post-body .wp-block-embed,
.post-body figure {
  margin: var(--sp-8) 0;
}
.post-body figure img { border-radius: var(--r-md); }
.post-body figure figcaption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--sp-2);
  font-style: italic;
}

/* WP comments basic (por si se activan luego) */
.comment-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) 0;
}
.comment-list li {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border-soft);
}

/* WP alignments */
.alignleft { float: left; margin: 0 var(--sp-5) var(--sp-3) 0; }
.alignright { float: right; margin: 0 0 var(--sp-3) var(--sp-5); }
.aligncenter { display: block; margin: var(--sp-5) auto; }
.alignwide { max-width: 900px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }

/* Screen reader utility */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ==========================================================
   LOGO — soporte para imagen (PNG/SVG subido) además del SVG inline
   ========================================================== */
.chozi-logo-img {
  display: block;
  width: auto;
  max-width: 220px;          /* logo Chozi ratio 3.66:1 → a 40px alto ocupa ~146px */
  height: 32px;              /* sobrescrito inline desde el Customizer */
  object-fit: contain;
  object-position: left center;
}

/* Opción "forzar blanco": útil si el logo es oscuro y el fondo del header es azul */
.chozi-logo-img.is-inverted {
  filter: brightness(0) invert(1);
}

/* Cuando hay imagen, el texto "chozi" no se renderiza; si se usa el fallback SVG sí */
.chozi-logo-text {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

/* El logo del header está centrado en absoluto: garantizamos que la imagen no lo rompa */
.chozi-header .chozi-logo { line-height: 0; }
.chozi-header .chozi-logo-img { max-height: 40px; }

/* Footer: el logo va alineado a la izquierda, no centrado */
.footer-brand .chozi-logo { line-height: 0; display: inline-flex; }
.footer-brand .chozi-logo-img { max-height: 40px; }

/* Móvil: reducir un poco el logo para no comerse el header */
@media (max-width: 640px) {
  .chozi-header .chozi-logo-img { height: 26px !important; max-width: 130px; }
}

/* ==========================================================
   CARRUSEL DE PROPIEDADES DESTACADAS
   ========================================================== */
.property-carousel { position: relative; }

.property-carousel .carousel-track {
  position: relative;
  display: grid;
}

/* Todos los slides ocupan la misma celda del grid → altura = la del más alto */
.property-carousel .carousel-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
  pointer-events: none;
}
.property-carousel .carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.property-carousel.no-animation .carousel-slide { transition: none; }

/* Título de la propiedad */
.property-carousel .property-title {
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin: var(--sp-2) 0 var(--sp-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

/* Sufijo /mes en alquileres */
.property-carousel .price-period {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  margin-left: 2px;
}

/* La imagen es un enlace */
.property-carousel a.property-img {
  display: block;
  overflow: hidden;
  position: relative;
}
.property-carousel a.property-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.property-carousel a.property-img:hover img { transform: scale(1.04); }

/* Navegación */
.property-carousel .carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
}

.property-carousel .carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.property-carousel .carousel-arrow:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.property-carousel .carousel-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-wrap: wrap;
}
.property-carousel .carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.property-carousel .carousel-dot:hover { background: var(--text-muted); }
.property-carousel .carousel-dot.is-active {
  background: var(--blue);
  width: 20px;
  border-radius: 4px;
}

/* Dark mode */
[data-theme="dark"] .property-carousel .carousel-arrow { border-color: var(--border); }
[data-theme="dark"] .property-carousel .carousel-dot { background: var(--border); }

/* ==========================================================================
   CAPA MÓVIL · Revisión completa
   Sobrescribe reglas anteriores. Debe ir al final del archivo.
   ========================================================================== */

/* ---------- TABLET Y MÓVIL (≤ 900px) ---------- */
@media (max-width: 900px) {

  :root { --header-h: 60px; }

  .container { padding: 0 var(--sp-4); }

  /* --- HEADER: el logo deja de ser absoluto para no solaparse --- */
  .chozi-header .container {
    gap: var(--sp-3);
    position: relative;
  }
  .chozi-logo {
    position: static;
    left: auto;
    transform: none;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
  .chozi-nav { flex: 0 0 auto; }
  .chozi-actions { flex: 0 0 auto; gap: var(--sp-1); }

  .chozi-header .chozi-logo-img { height: 30px !important; max-width: 120px; }

  /* El selector de idioma pasa a icono, sin texto */
  .chozi-lang { padding: var(--sp-2); }
  .chozi-lang span { display: none; }

  .chozi-btn-solid.keep {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
    white-space: nowrap;
  }

  /* --- SUBNAV: dos filas para que quepa todo --- */
  .blog-subnav .container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "search toggle"
      "links  links";
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    height: auto;
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-2);
    overflow: visible;
  }
  .subnav-brand { display: none; }          /* redundante: el logo ya está arriba */
  .subnav-search { grid-area: search; width: 100%; max-width: none; }
  .subnav-tools  { grid-area: toggle; }



  /* Tira de categorías con scroll horizontal y degradado que avisa */
  .subnav-links {
    grid-area: links;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    gap: var(--sp-1);
    margin: 0 calc(var(--sp-4) * -1);
    padding: 0 var(--sp-4) var(--sp-1);
    flex: none;
    mask-image: linear-gradient(to right, transparent 0, #000 var(--sp-4), #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sp-4), #000 calc(100% - 28px), transparent 100%);
  }
  .subnav-links::-webkit-scrollbar { display: none; }
  .subnav-links li { flex: 0 0 auto; scroll-snap-align: start; }
  .subnav-links a { padding: var(--sp-2) var(--sp-3); }

  /* --- HERO --- */
  .blog-hero { padding: var(--sp-8) 0 var(--sp-6); }
  .blog-hero h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .blog-hero .lead { font-size: var(--fs-base); }

  /* --- FEATURED POST: apilado --- */
  .featured-post { grid-template-columns: 1fr; }
  .featured-img { min-height: 220px; aspect-ratio: 16 / 10; }
  .featured-content { padding: var(--sp-5); }
  .featured-content h2 { font-size: clamp(1.25rem, 5.5vw, 1.6rem); }

  /* --- GRID DE POSTS: una columna --- */
  .posts-grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  /* --- POST INDIVIDUAL --- */
  .post-header h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.2; }
  .post-header .post-lead { font-size: var(--fs-base); }
  .post-hero-img { aspect-ratio: 16 / 10; border-radius: var(--r-md); }

  .post-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--sp-8) !important;
  }
  /* Sin esto, el contenido ancho (tablas) estira la columna del grid */
  .post-layout > * { min-width: 0; }
  .post-body, .share-bar, .sidebar { min-width: 0; max-width: 100%; }

  /* La barra de compartir pasa de vertical fija a horizontal en flujo */
  .share-bar {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: var(--sp-5);
  }

  /* El índice deja de ser sticky y se vuelve plegable */
  .toc { position: static; max-height: none; }

  /* Sidebar: deja de ser sticky y va debajo del contenido */
  .sidebar { position: static; top: auto; }

  /* --- CUERPO DEL POST: tipografía y elementos --- */
  .post-body { font-size: 1.0625rem; }
  .post-body h2 { font-size: clamp(1.3rem, 5.5vw, 1.6rem); margin-top: var(--sp-8); }
  .post-body h3 { font-size: clamp(1.1rem, 4.5vw, 1.25rem); }

  .key-fact { padding: var(--sp-5); }
  .key-fact .number { font-size: clamp(2rem, 9vw, 2.75rem); }

  .callout { padding: var(--sp-4); }

  /* Tablas: scroll horizontal con aviso visual */
  .data-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    position: relative;
    /* degradado que avisa de que la tabla sigue a la derecha */
    background-image: linear-gradient(to left, rgba(0,0,0,.045), transparent 40px);
  }
  .data-table table { min-width: 480px; font-size: var(--fs-sm); }
  .data-table th, .data-table td { padding: var(--sp-2) var(--sp-3); }

  blockquote { padding-left: var(--sp-4); font-size: var(--fs-base); }

  /* --- ARCHIVOS Y CATEGORÍAS --- */
  .category-hero { padding: var(--sp-8) 0 var(--sp-6); }
  .category-hero h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); }

  .category-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(var(--sp-4) * -1) var(--sp-6);
    padding: 0 var(--sp-4) var(--sp-2);
  }
  .category-filters::-webkit-scrollbar { display: none; }
  .category-filters .filter-pill { flex: 0 0 auto; }

  /* --- AUTOR --- */
  .author-hero-avatar .author-avatar-xl { width: 96px; height: 96px; font-size: 38px; }
  .author-hero h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .authors-grid { grid-template-columns: 1fr; }

  /* --- CARRUSEL --- */
  .property-carousel .carousel-nav { gap: var(--sp-1); }
  .property-carousel .carousel-dot { width: 6px; height: 6px; }
  .property-carousel .carousel-dot.is-active { width: 16px; }

  /* --- RELACIONADOS Y FOOTER --- */
  .related-section { padding: var(--sp-8) 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
}

/* ---------- MÓVIL ESTRECHO (≤ 560px) ---------- */
@media (max-width: 560px) {

  .container { padding: 0 var(--sp-3); }

  /* Header mínimo: menú + logo + Property */
  .chozi-header .chozi-logo-img { height: 26px !important; max-width: 104px; }
  .chozi-header .chozi-lang { display: none; }   /* en el header no cabe; se traslada al subnav */

  /* Aquí sí aparece el del subnav, para que nunca falte la opción */
  .subnav-tools .chozi-lang-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-soft);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
  }
  .subnav-tools .chozi-lang-mobile:hover { background: var(--bg-muted); color: var(--text); }
  .subnav-tools .chozi-lang-mobile svg { width: 19px; height: 19px; }
  .subnav-tools .chozi-lang-mobile span { display: none; }
  .chozi-menu-toggle { width: 36px; height: 36px; }
  .chozi-btn-solid.keep { padding: 6px var(--sp-3); }
  .chozi-btn-solid.keep svg { width: 14px; height: 14px; }

  /* Un poco más de aire vertical en el subnav */
  .blog-subnav .container { gap: var(--sp-2); }
  .subnav-search input { font-size: var(--fs-sm); }

  /* Objetivos táctiles de 44px mínimo (WCAG 2.5.5) */
  .subnav-links a,
  .category-filters .filter-pill,
  .share-bar a,
  .pagination-wrap a,
  .nav-links .page-numbers {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .post-body { font-size: 1rem; }
  .post-body ul, .post-body ol { padding-left: var(--sp-5); }

  .data-table table { min-width: 420px; font-size: var(--fs-xs); }

  .key-fact { padding: var(--sp-4); }
  .featured-content { padding: var(--sp-4); }
  .post-card-body { padding: var(--sp-4); }

  .sidebar-block { padding: var(--sp-4); }

  /* Footer a una columna */
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer-social { justify-content: flex-start; }

  /* Autor */
  .author-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .author-stats .stat-card { padding: var(--sp-4) var(--sp-2); }
  .author-social { flex-direction: column; align-items: stretch; }
  .author-social a { justify-content: center; }
}

/* ---------- Evitar desbordes horizontales en cualquier tamaño ---------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .post-body img,
  .post-body iframe,
  .post-body video,
  .post-body pre { max-width: 100%; }
  .post-body pre { overflow-x: auto; }
  .post-body table { max-width: 100%; }
  /* Palabras largas (URLs) no rompen el layout */
  .post-body p, .post-body li, .post-card-body h3, .post-header h1 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ---------- Contenedor de herramientas del subnav ---------- */
.subnav-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 0 0 auto;
}
.chozi-lang-mobile { display: none; }   /* en escritorio el selector vive en el header */


/* ---------- Objetivos táctiles (WCAG 2.5.5) ---------- */
@media (max-width: 900px) {
  /* El logo es un enlace: necesita altura pulsable aunque la imagen sea baja */
  .chozi-header .chozi-logo {
    min-height: 44px;
    align-items: center;
  }

  /* Botón Property */
  .chozi-btn-solid.keep {
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
  }

  /* Flechas del carrusel */
  .property-carousel .carousel-arrow {
    width: 38px;
    height: 38px;
  }

  /* Los puntos del carrusel necesitan área pulsable mayor que su tamaño visual */
  .property-carousel .carousel-dot {
    position: relative;
  }
  .property-carousel .carousel-dot::after {
    content: '';
    position: absolute;
    inset: -11px -5px;
  }

  /* Iconos del subnav */
  .subnav-tools .theme-toggle,
  .subnav-tools .chozi-lang-mobile {
    width: 40px;
    height: 40px;
  }

  /* Menú hamburguesa */
  .chozi-menu-toggle { min-width: 40px; min-height: 40px; }
}

@media (max-width: 560px) {
  .chozi-btn-solid.keep { min-height: 38px; padding: 8px var(--sp-3); }
  .chozi-menu-toggle { width: 38px; height: 38px; }
}

/* ---------- Objetivos táctiles · complementos ---------- */
@media (max-width: 1024px) {
  /* Logo del footer: también es un enlace pulsable */
  .footer-brand .chozi-logo { min-height: 44px; align-items: center; }

  /* Selector de idioma del header en tablet */
  .chozi-header .chozi-lang { min-height: 40px; min-width: 40px; }

  /* Iconos sociales del footer */
  .footer-social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Enlaces del footer con altura cómoda */
  .footer-col ul a { display: inline-flex; align-items: center; min-height: 36px; }
}