@font-face { font-family: 'PP Mori'; src: url('/fonts/PPMori-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/fonts/PPMori-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/fonts/PPMori-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/fonts/PPMori-SemiboldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/fonts/PPMori-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/fonts/PPMori-BlackItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/fonts/PPMori-Extralight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Mori'; src: url('/fonts/PPMori-ExtralightItalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
/*
Theme Name: Cada Idea
Theme URI: https://cadaidea.com
Author: Diego
Description: Haz que cada idea simplifique todo. Tema editorial moderno, limpio y totalmente compatible con el editor de bloques Gutenberg.
Version: 1.5.9
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anthropic-blog
Tags: blog, gutenberg, custom-colors, custom-logo, custom-menu, featured-images, sticky-post, threaded-comments, translation-ready
*/

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  /* Colors - defaults (overridable via plugin) */
  --color-primary: #0b1b2b;
  --color-primary-dark: #081420;
  --color-secondary: #fdce61;
  --color-accent: #1ddc1d;
  
  --color-bg: #f7f6f3;
  --color-bg-white: #FFFFFF;
  --color-bg-two: #FFF8EB;
  --color-bg-dark: #1A1A1A;
  --color-bg-card: #FFFFFF;
  
  --color-text: #0b1b2b;
  --color-text-muted: #5c6b7a;
  --color-text-light: #999999;
  --color-text-white: #FFFFFF;
  
  --color-border: #d3d4dc;
  --color-border-dark: #333333;
  
  /* Category colors */
  --color-cat-1: #7B9E6B; /* green */
  --color-cat-2: #D97B4B; /* orange */
  --color-cat-3: #4B7BD9; /* blue */
  --color-cat-4: #9B7BD9; /* purple */
  --color-cat-5: #D94B7B; /* pink */
  --color-cat-6: #7BD9C4; /* teal */

  /* Typography */
  --font-heading: 'PP Mori', 'Georgia', serif;
  --font-body: 'PP Mori', 'Georgia', serif;
  --font-ui: 'PP Mori', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --container-max: 1280px;
  --content-max: 760px;
  --sidebar-width: 300px;
  --header-height: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.13);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--font-heading); line-height: 1.25; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
}

.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;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: box-shadow var(--transition-base);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-xl);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo img {
  height: 36px;
  width: auto;
}

.site-logo .logo-text {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

/* Navigation */
.main-navigation {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu > li > a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  display: block;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-menu > li > a:hover {
  background: rgba(0,0,0,0.06);
  color: var(--color-primary);
}

.nav-menu > li.current-menu-item > a {
  background: var(--color-bg-two);
  color: var(--color-primary);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.btn-header-login {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}
.btn-header-login:hover { background: rgba(0,0,0,0.06); }

.btn-header-cta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: white;
  background: var(--color-text);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn-header-cta:hover {
  background: var(--color-primary);
  transform: translateY(-1px);
}

/* Mobile toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition-base);
}
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0; bottom: 0;
  background: var(--color-bg);
  z-index: 999;
  overflow-y: auto;
  padding: var(--space-xl);
  transform: translateX(100%);
  transition: transform var(--transition-base);
}
.mobile-menu.open { transform: translateX(0); }

.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-menu > li > a {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-md) 0;
  display: block;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
}
.mobile-nav-menu > li > a:hover { color: var(--color-primary); }

.mobile-menu-footer {
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================================
   HERO / FEATURED SECTION
   ============================================ */
.hero-blog {
  padding: var(--space-3xl) 0 var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.hero-blog-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.hero-blog-text .blog-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.hero-blog-text .blog-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
}

.hero-blog-title {
  font-size: var(--text-6xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.hero-blog-title span { color: var(--color-primary); }

.hero-blog-desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 480px;
}

.hero-blog-image {
  position: relative;
}
.hero-blog-image img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Category pills hero */
.hero-categories {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

.category-pill {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px var(--space-md);
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  color: var(--pill-text, #1D1F2A);
  background: var(--pill-bg, #FFF3EB);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
}
.category-pill:hover {
  color: var(--pill-hover-text, #FFFFFF);
  background: var(--pill-hover-bg, #1D1F2A);
  border-color: transparent;
}
.category-pill.active {
  color: var(--pill-active-text, #FFFFFF);
  background: var(--pill-active-bg, #1D1F2A);
  border-color: transparent;
}

/* ============================================
   LATEST POSTS SCROLL BANNER
   ============================================ */
.posts-ticker {
  background: var(--color-text);
  padding: var(--space-sm) 0;
  overflow: hidden;
}

.posts-ticker-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  white-space: nowrap;
  animation: ticker 30s linear infinite;
}

.posts-ticker-inner:hover { animation-play-state: paused; }

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
}

.ticker-item a {
  color: white;
  transition: color var(--transition-fast);
}
.ticker-item a:hover { color: var(--color-primary); }

.ticker-sep {
  color: var(--color-primary);
  font-size: var(--text-lg);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================
   BLOG GRID - HOME
   ============================================ */
.blog-section {
  padding: var(--space-3xl) 0;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border);
}

.section-title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.section-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: gap var(--transition-fast);
}
.section-link:hover { gap: var(--space-md); }
.section-link::after { content: '→'; }

/* Filter & Search Bar */
.posts-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.search-posts-form {
  position: relative;
  flex: 1;
  max-width: 300px;
}

.search-posts-form input {
  width: 100%;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 2.5rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-white);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-fast);
}
.search-posts-form input:focus { border-color: var(--color-primary); }

.search-posts-form .search-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
  font-size: 14px;
}

.view-toggle {
  display: flex;
  gap: var(--space-xs);
}
.view-btn {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  transition: all var(--transition-fast);
}
.view-btn.active, .view-btn:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* Posts grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.posts-grid.list-view {
  grid-template-columns: 1fr;
}

.posts-grid.list-view .post-card {
  display: flex;
  flex-direction: row;
  gap: var(--space-xl);
}

.posts-grid.list-view .post-card-thumbnail {
  width: 240px;
  flex-shrink: 0;
  aspect-ratio: 16/9;
}

/* Post Card */
.post-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.post-card-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.post-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.post-card:hover .post-card-thumbnail img { transform: scale(1.05); }

.post-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.post-card-body {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.post-card-category {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.cat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.post-card-date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.post-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.post-card:hover .post-card-title { color: var(--color-primary); }

.post-card-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: var(--space-lg);
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.post-card-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.author-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-border);
}

.author-name-sm {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.post-read-more {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition-fast);
}
.post-read-more:hover { gap: var(--space-sm); }
.post-read-more::after { content: '→'; }

/* Featured Post (large) */
.post-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.post-card-featured .post-card-thumbnail {
  aspect-ratio: auto;
  height: 100%;
}

.post-card-featured .post-card-title {
  font-size: var(--text-3xl);
}

.post-card-featured .post-card-body {
  padding: var(--space-2xl);
  justify-content: center;
}

/* Load More */
.load-more-wrap {
  text-align: center;
  padding: var(--space-3xl) 0 var(--space-xl);
}

.btn-load-more {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  display: inline-block;
}
.btn-load-more:hover {
  background: var(--color-text);
  color: white;
  transform: translateY(-2px);
}

/* ============================================
   SIDEBAR FILTERS (CATEGORY PAGE)
   ============================================ */
.archive-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-3xl);
  padding: var(--space-2xl) 0;
  align-items: start;
}

.archive-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
}

.filter-group {
  margin-bottom: var(--space-2xl);
}

.filter-group-title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.filter-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  color: var(--color-text);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.filter-select:focus { border-color: var(--color-primary); }

/* Archive header */
.archive-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.archive-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.archive-breadcrumb a { color: var(--color-text-muted); }
.archive-breadcrumb a:hover { color: var(--color-primary); }
.archive-breadcrumb .sep { color: var(--color-border); }

.archive-title {
  font-size: var(--text-5xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.archive-description {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 640px;
}

/* ============================================
   SINGLE POST / ARTICLE
   (layout defined in share-sidebar-fixed section below)
   ============================================ */

.article-header {
  padding: var(--space-3xl) 0 var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2xl);
}

.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.article-breadcrumb a { color: var(--color-primary); }
.article-breadcrumb .sep { opacity: 0.4; }

.article-categories {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.cat-tag {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-bg-two);
  color: var(--color-primary);
}

.article-title {
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xl);
}

.article-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.article-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  background: var(--color-border);
}

.author-info-inline .author-name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  display: block;
}

.author-info-inline .article-date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
}

.article-read-time {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.article-read-time::before { content: '·'; }

/* Article hero image */
.article-hero-image {
  margin: 0 0 var(--space-3xl);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.article-hero-image img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}

/* Quick facts box */
.quick-facts-box {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.quick-facts-title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-xl);
}

.quick-fact dt {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.quick-fact dd {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

/* Article content */
.article-content {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--color-text);
}

.article-content h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--space-3xl) 0 var(--space-lg);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.article-content h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: var(--space-2xl) 0 var(--space-md);
}

.article-content p {
  margin-bottom: var(--space-xl);
}

.article-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}
.article-content a:hover { text-decoration-color: var(--color-primary); }

.article-content blockquote {
  margin: var(--space-2xl) 0;
  padding: var(--space-xl) var(--space-2xl);
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  font-size: var(--text-xl);
}

.article-content ul, .article-content ol {
  list-style: disc;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.article-content ol { list-style: decimal; }

.article-content li {
  margin-bottom: var(--space-sm);
}

.article-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(0,0,0,0.07);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.article-content pre {
  background: var(--color-text);
  color: #e5e5e5;
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-xl);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.article-content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.article-content img {
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
}

/* Article sidebar */
.article-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.sidebar-widget {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.sidebar-widget-title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

/* Table of contents */
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.toc-list a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: block;
  padding: var(--space-xs) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-border);
  transition: all var(--transition-fast);
  line-height: 1.5;
}

.toc-list a:hover,
.toc-list a.active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  padding-left: var(--space-lg);
}

/* Share widget */
.share-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.share-btn {
  flex: 1;
  min-width: 80px;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.share-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg);
}

/* Related posts */
.related-posts-section {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--color-border);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* ============================================
   AUTHOR PAGE
   ============================================ */
.author-page-layout {
  padding: var(--space-3xl) 0;
}

.author-profile-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3xl);
}

.author-profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-border);
}

.author-profile-name {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.author-profile-bio {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: var(--space-lg);
}

.author-social-links {
  display: flex;
  gap: var(--space-sm);
}

.author-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 14px;
  transition: all var(--transition-fast);
}
.author-social-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg);
}

.author-posts-count {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.author-posts-count strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Author posts grid - 2 columns */
.author-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

/* Pagination */
.posts-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-3xl) 0 var(--space-xl);
}

.page-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1.5px solid transparent;
  transition: all var(--transition-fast);
}
.page-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.page-btn.active {
  background: var(--color-text);
  color: white;
  border-color: var(--color-text);
}
.page-btn-arrow {
  font-size: var(--text-lg);
  color: var(--color-text);
}

/* ============================================
   NEWSLETTER SECTION
   ============================================ */

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  margin: var(--space-2xl) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.cta-banner-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.cta-banner-text {
  flex: 1;
}

.cta-banner-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.cta-banner-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.cta-banner-btn {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  color: white;
  background: var(--color-text);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: all var(--transition-base);
}
.cta-banner-btn:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--footer-bg, #FFF3EB);
  color: var(--footer-text, #1D1F2A);
  border-top: 1px solid var(--footer-border, #E8E8E8);
}

/* ── LAYOUT PRINCIPAL: Logo | Widgets | Social ── */
.footer-main {
  display: grid;
  grid-template-columns: 220px repeat(var(--footer-cols, 4), 1fr) auto;
  gap: 3rem;
  align-items: start;
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--footer-border, #E8E8E8);
}

/* Columna marca */
.footer-brand-col {}
.footer-brand-col .custom-logo { max-height: 36px; width: auto; display: block; margin-bottom: .875rem; }
.footer-brand-col .custom-logo-link { display: inline-block; margin-bottom: .875rem; }
.footer-brand-name {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--footer-text, #1D1F2A);
  text-decoration: none;
  display: block;
  margin-bottom: .875rem;
  letter-spacing: -.02em;
}
.footer-brand-desc {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--footer-text, #1D1F2A) 55%, transparent);
  line-height: 1.65;
  margin: 0;
}

/* Columnas de widgets */
.footer-widget-col {}
.footer-col-title {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--footer-text, #1D1F2A);
  margin: 0 0 1.125rem;
}

/* Widget list items (menus de categorías, links, etc.) */
.footer-widget-col ul { list-style: none; margin: 0; padding: 0; }
.footer-widget-col ul li { margin-bottom: .5rem; }
.footer-widget-col ul li a,
.footer-widget-col a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--footer-link, #1D1F2A) 70%, transparent);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: block;
  padding: .125rem 0;
}
.footer-widget-col ul li a:hover,
.footer-widget-col a:hover { color: var(--footer-link-hover, #418FDE); }

/* Widget paragraph */
.footer-widget-col p {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--footer-text, #1D1F2A) 55%, transparent);
  margin: 0 0 .5rem;
}

/* Íconos sociales — círculos negros como Dailymotion */
.footer-social-col {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-start;
  padding-top: 0;
  max-width: 160px;
}
.footer-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--footer-icon-bg, #1D1F2A);
  color: var(--footer-icon-color, #fff) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  text-decoration: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}
.footer-social-icon:hover { opacity: .8; transform: scale(1.08); }

/* ── BARRA INFERIOR ── */
.footer-bottom-bar {
  background: var(--footer-bg, #FFF3EB);
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1.25rem 0;
}
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
}
.footer-bottom-links a {
  font-family: var(--font-ui);
  font-size: .78rem;
  color: color-mix(in srgb, var(--footer-link, #1D1F2A) 55%, transparent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-bottom-links a:hover { color: var(--footer-link-hover, #418FDE); }
.footer-bottom-copy,
.footer-bottom-credit {
  font-family: var(--font-ui);
  font-size: .78rem;
  color: color-mix(in srgb, var(--footer-text, #1D1F2A) 45%, transparent);
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-social-col { max-width: none; flex-direction: row; }
}
@media (max-width: 640px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 0 1.5rem;
  }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: .5rem; }
  .footer-bottom-links { justify-content: center; }
  .footer-social-col { max-width: none; }
}

/* ============================================
   GUTENBERG BLOCK OVERRIDES
   ============================================ */
.wp-block-group.has-background { border-radius: var(--radius-lg); }

.wp-block-quote {
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-xl) var(--space-2xl);
  margin: var(--space-2xl) 0;
}

.wp-block-pullquote {
  text-align: center;
  border-top: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding: var(--space-2xl) 0;
}

.wp-block-image img { border-radius: var(--radius-lg); }

.wp-block-separator.is-style-wide {
  border-color: var(--color-border);
}

.wp-block-button__link {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-md) var(--space-xl) !important;
  background: var(--color-primary) !important;
}

.wp-block-cover {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.wp-block-table {
  border-collapse: collapse;
  width: 100%;
}

.wp-block-table td,
.wp-block-table th {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
}

.wp-block-table thead th {
  background: var(--color-bg);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
}

/* ============================================
   READING PROGRESS BAR
   ============================================ */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-primary);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .hero-blog-inner {
    grid-template-columns: 1fr;
  }
  
  .hero-blog-image { display: none; }
  
  .hero-blog-title { font-size: var(--text-5xl); }
  
  .archive-layout {
    grid-template-columns: 1fr;
  }

  /* v1.5.7 — en móvil mostramos el contenido principal ANTES de la sidebar.
     El orden DOM es sidebar→main, lo cambiamos visualmente con order. */
  .archive-layout > main { order: 1; }
  .archive-sidebar {
    order: 2;
    position: static;
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
    margin-top: var(--space-2xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-border);
  }
  
  .filter-group { flex: 1; min-width: 180px; margin-bottom: 0; }
  
  .newsletter-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }

  .main-navigation { display: none; }
  .header-actions .btn-header-login { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu { display: block; }
  
  .hero-blog-title { font-size: var(--text-4xl); }
  
  .posts-grid {
    grid-template-columns: 1fr;
  }
  
  .posts-grid:not(.list-view) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .post-card-featured {
    grid-template-columns: 1fr;
  }
  .post-card-featured .post-card-thumbnail {
    aspect-ratio: 16/9;
    height: auto;
  }
  
  .related-posts-grid {
    grid-template-columns: 1fr;
  }
  
  .author-profile-card {
    grid-template-columns: 1fr;
  }
  
  .author-posts-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
  
  .footer-brand { grid-column: 1 / -1; }
  
  .article-title { font-size: var(--text-3xl); }
  
  .newsletter-form-row { flex-direction: column; }
  
  .cta-banner { flex-direction: column; text-align: center; }
  
  .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}

@media (max-width: 480px) {
  .posts-grid:not(.list-view) {
    grid-template-columns: 1fr;
  }
  
  .hero-blog-title { font-size: var(--text-3xl); }
  
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-facts-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: white;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  z-index: 10000;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .site-header,
  .site-footer,
  .article-sidebar,
  .newsletter-section,
  .related-posts-section,
  .reading-progress-bar {
    display: none !important;
  }
  
  .single-post-layout {
    display: block;
    padding: 0;
  }
  
  .article-content { font-size: 12pt; }
}

/* ============================================
   SEGUNDO MENÚ DE PÁGINAS (header)
   ============================================ */
.nav-pages-menu {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-pages-menu > li > a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  display: block;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-pages-menu > li > a:hover {
  background: rgba(0,0,0,0.05);
  color: var(--color-text);
}
.nav-pages-menu > li.current-menu-item > a,
.nav-pages-menu > li.current_page_item > a {
  color: var(--color-primary);
}

/* Separador visual entre menú blog y menú páginas */
.header-nav-divider {
  width: 1px;
  height: 18px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* ============================================
   SEARCH POPUP (live search)
   ============================================ */
.search-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.search-popup-overlay.open { opacity: 1; pointer-events: all; }

.search-popup {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: min(680px, calc(100vw - 2rem));
  background: var(--color-bg-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(0,0,0,0.16);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
  overflow: hidden;
}
.search-popup.open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.search-popup-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.search-popup-icon { color: var(--color-text-muted); flex-shrink: 0; }

.search-popup-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  color: var(--color-text);
  background: transparent;
}
.search-popup-input::placeholder { color: var(--color-text-light); }

.search-popup-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; cursor: pointer; border: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.search-popup-close:hover { background: var(--color-text); color: white; }

.search-popup-results { max-height: 420px; overflow-y: auto; padding: var(--space-sm) 0; }

.search-result-item {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.search-result-item:hover { background: rgba(0,0,0,0.04); }

.search-result-thumb {
  width: 56px; height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover; flex-shrink: 0;
  background: var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}

.search-result-title {
  font-family: var(--font-ui);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text); display: block; margin-bottom: 2px;
}
.search-result-title mark {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary); border-radius: 2px;
}
.search-result-meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs); color: var(--color-text-light);
}

.search-popup-empty, .search-popup-loading {
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.search-btn-header {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer; flex-shrink: 0;
  transition: all var(--transition-fast);
}
.search-btn-header:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg);
}

/* ============================================
   ARTICLE LINK HOVER — subrayado animado + negrita
   ============================================ */
.article-content a {
  position: relative;
  color: var(--color-primary);
  text-decoration: none;
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 1px;
  transition: background-size var(--transition-base), font-weight 0s;
}
.article-content a:hover {
  font-weight: 700;
  background-size: 100% 2px;
}

/* ============================================
   MOBILE SHARE BAR
   ============================================ */
.mobile-share-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  padding: var(--space-md) var(--space-xl) calc(var(--space-md) + env(safe-area-inset-bottom));
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
  transform: translateY(100%);
  transition: transform var(--transition-base);
}
.mobile-share-bar.visible { transform: translateY(0); }

.mobile-share-bar-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-md);
  max-width: var(--container-max); margin: 0 auto;
}

.mobile-share-title {
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted); flex-shrink: 0;
}

.mobile-share-btns {
  display: flex; gap: var(--space-sm);
  flex: 1; justify-content: flex-end; overflow-x: auto;
}

.mobile-share-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px var(--space-md);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted); white-space: nowrap;
  transition: all var(--transition-fast); text-decoration: none;
  background: transparent; cursor: pointer;
}
.mobile-share-btn:hover, .mobile-share-btn:active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg);
}
.mobile-share-btn.copied { border-color: #22c55e; color: #22c55e; }

@media (max-width: 768px) {
  .mobile-share-bar { display: block; }
  .single-post-layout { padding-bottom: 80px; }
}

/* ============================================
   SHARE BUTTONS SIDEBAR — grid 3 columnas
   ============================================ */
.share-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-sm);
}
.share-btn:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.share-btn {
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted); text-align: center;
  transition: all var(--transition-fast);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; background: transparent; cursor: pointer;
}
.share-btn .share-icon { font-size: 1rem; line-height: 1; }
.share-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg);
}
.share-btn.copied { border-color: #22c55e; color: #22c55e; }

/* ============================================
   PÁGINA ESTÁTICA (About, Contact, etc.)
   Sin sidebar, contenido centrado
   ============================================ */
.page-layout {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
}
.page-layout .article-title { font-size: var(--text-5xl); margin-bottom: var(--space-2xl); }
.page-layout .article-content { font-size: var(--text-lg); }

@media (max-width: 768px) {
  .page-layout { padding: var(--space-2xl) var(--space-md); }
  .page-layout .article-title { font-size: var(--text-3xl); }
}

/* ============================================
   FOOTER REDISEÑADO — estilo Telefónica/moderno
   ============================================ */

/* Fila superior: marca izquierda, social+CTA derecha */
.footer-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding: var(--space-3xl) 0 var(--space-2xl);
  border-bottom: 1px solid var(--footer-border, #2E3140);
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--footer-link, #fff);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.footer-brand img { max-height: 40px; width: auto; margin-bottom: var(--space-md); }

.footer-brand .footer-brand-desc {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent);
  line-height: 1.7;
  max-width: 320px;
  margin: var(--space-sm) 0 0;
}

.footer-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-lg);
  flex-shrink: 0;
}

/* Redes sociales con Font Awesome */
.footer-social {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-social-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.footer-social-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg-two);
  transform: translateY(-2px);
}

/* Botón CTA footer */
.footer-cta-btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--footer-link, #fff);
  border: 2px solid rgba(255,255,255,0.5);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-base);
}
.footer-cta-btn:hover {
  background: white;
  color: var(--color-text);
  border-color: var(--footer-link, #fff);
}

/* Fila de menús de navegación */
.footer-nav-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--footer-border, #2E3140);
}

/* Fila legal */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl) 0;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent);
}
.footer-bottom a { color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent); text-decoration: none; }
.footer-bottom a:hover { color: var(--footer-link-hover, #418FDE); }

.footer-bottom-links {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  align-items: center;
}
.footer-bottom-links a {
  position: relative;
  padding: 0 var(--space-lg) 0 0;
}
.footer-bottom-links a:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: 0;
  color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent);
}

/* Responsive footer */
@media (max-width: 1024px) {
  .footer-nav-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .footer-top-row { flex-direction: column; gap: var(--space-xl); }
  .footer-top-right { align-items: flex-start; }
  .footer-social { justify-content: flex-start; }
  .footer-nav-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}
@media (max-width: 480px) {
  .footer-nav-row { grid-template-columns: 1fr; }
}

/* ============================================
   SHARE BUTTONS CON FONT AWESOME
   ============================================ */
.share-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-sm);
}

/* Botón que ocupa fila completa si es el único en su fila */
.share-btn:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.share-btn:last-child:nth-child(3n+2) { grid-column: span 2; }

.share-btn {
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}
.share-btn i { font-size: 1.1rem; line-height: 1; }
.share-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg);
}
.share-btn.copied { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.06); }

/* Colores propios por red en hover */
.share-btn[data-network="facebook"]:hover   { border-color:#1877f2; color:#1877f2; background:rgba(24,119,242,.06); }
.share-btn[data-network="twitter"]:hover    { border-color:#000; color:#000; background:rgba(0,0,0,.04); }
.share-btn[data-network="whatsapp"]:hover   { border-color:#25d366; color:#25d366; background:rgba(37,211,102,.06); }
.share-btn[data-network="linkedin"]:hover   { border-color:#0a66c2; color:#0a66c2; background:rgba(10,102,194,.06); }
.share-btn[data-network="telegram"]:hover   { border-color:#0088cc; color:#0088cc; background:rgba(0,136,204,.06); }
.share-btn[data-network="reddit"]:hover     { border-color:#ff4500; color:#ff4500; background:rgba(255,69,0,.06); }

/* Mobile share bar */
.mobile-share-btn i { font-size: 0.85rem; }

/* ============================================
   HEADER PÁGINAS — diferenciador visual sutil
   ============================================ */
.site-header--pages .nav-menu > li > a {
  font-size: var(--text-sm);
}
/* Indicador activo en header de páginas */
.site-header--pages .nav-menu > li.current-menu-item > a,
.site-header--pages .nav-menu > li.current_page_item > a {
  color: var(--color-primary);
  background: var(--color-bg);
}

/* ============================================
   HEADER ARTÍCULO (estilo HBR)
   ============================================ */
.site-header--article {
  height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
}

.header-article-inner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-lg);
  height: 100%;
}

.header-article-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.header-article-logo img { height: 36px; width: auto; }
.header-article-logo .site-logo { gap: var(--space-sm); }

.header-article-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
  overflow: hidden;
  padding: 0 var(--space-lg);
  border-left: 1px solid var(--color-border);
  margin-left: var(--space-md);
}

.header-article-cat {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.header-article-cat:hover { color: var(--color-primary); }

.header-article-sep {
  color: var(--color-border);
  font-size: var(--text-lg);
  flex-shrink: 0;
  font-weight: 300;
}

.header-article-title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide breadcrumb on small screens */
@media (max-width: 768px) {
  .header-article-breadcrumb { display: none; }
}

/* ============================================
   v1.5.7 — menú de Readers en header de artículo
   El menú lo inyecta el plugin Cada Idea PRO en theme_location 'readers-menu'.
   Se muestra como botones compactos junto a las acciones.
   ============================================ */
.readers-menu-article {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.readers-menu-article li { list-style: none; }
.readers-menu-article a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.readers-menu-article a:hover {
  background: rgba(0,0,0,.04);
  color: var(--color-primary);
}
@media (max-width: 768px) {
  /* En móvil ocultamos el menú de readers en el header (queda accesible en el mobile-menu) */
  .readers-menu-article { display: none; }
}

/* ============================================
   COMPARTIR FIJO IZQUIERDA
   position:fixed anclado al borde izquierdo del artículo
   con 50px de separación, nunca encima del texto.
   ============================================ */

/* Layout artículo: vuelve a 2 columnas (contenido + sidebar)
   La barra share va FUERA del flow, posición fija */
.single-post-layout {
  display: grid;
  grid-template-columns: var(--content-max) 1fr;
  grid-template-areas: "main aside";
  gap: var(--space-4xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  align-items: start;
}

.article-main  { grid-area: main; min-width: 0; }
.article-sidebar { grid-area: aside; }

/* Barra share: fixed, se posiciona 50px a la izquierda
   del borde izquierdo del contenido del artículo.
   Usamos CSS custom property --article-left que JS calcula. */
.share-sidebar-fixed {
  position: fixed;
  left: calc(50% - var(--content-max) / 2 - 90px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.share-fixed-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.share-fixed-btn:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: scale(1.08);
}

.share-fixed-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  margin-top: var(--space-xs);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

/* Color por red en hover */
.share-fixed-btn[data-network="facebook"]:hover  { border-color:#1877f2; color:#1877f2; }
.share-fixed-btn[data-network="twitter"]:hover   { border-color:#000; color:#000; }
.share-fixed-btn[data-network="whatsapp"]:hover  { border-color:#25d366; color:#25d366; }
.share-fixed-btn[data-network="linkedin"]:hover  { border-color:#0a66c2; color:#0a66c2; }
.share-fixed-btn[data-network="telegram"]:hover  { border-color:#0088cc; color:#0088cc; }
.share-fixed-btn[data-network="reddit"]:hover    { border-color:#ff4500; color:#ff4500; }
.share-fixed-btn.copied                          { border-color:#22c55e; color:#22c55e; }
.share-fixed-btn[data-network="pdf"]:hover       { border-color:#e11d48; color:#e11d48; }

/* Ocultar si no hay suficiente espacio (< 1280px) */
@media (max-width: 1280px) {
  .share-sidebar-fixed { display: none; }
}

@media (max-width: 1024px) {
  .single-post-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
    padding: var(--space-xl) var(--space-md);
  }
  .article-sidebar { display: none; }
}

/* ============================================
   FOOTER NUEVO — top-row + nav-row
   ============================================ */
.footer-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding: var(--space-3xl) 0 var(--space-2xl);
  border-bottom: 1px solid var(--footer-border, #2E3140);
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--footer-link, #fff);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}
.footer-brand img { max-height: 40px; width: auto; margin-bottom: var(--space-md); filter: brightness(0) invert(1); }
.footer-brand .footer-brand-desc {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent);
  line-height: 1.7;
  max-width: 300px;
  margin: var(--space-sm) 0 0;
}

.footer-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-lg);
  flex-shrink: 0;
}

.footer-social {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-social-link {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.footer-social-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg-two);
  transform: translateY(-2px);
}

.footer-cta-btn {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--footer-link, #fff);
  border: 2px solid rgba(255,255,255,0.4);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-base);
}
.footer-cta-btn:hover { background: white; color: var(--color-text); border-color: var(--footer-link, #fff); }

.footer-nav-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--footer-border, #2E3140);
}

/* Widget items inside footer */
.footer-widget-item { margin-bottom: var(--space-md); }
.footer-widget-item-title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent);
  margin-bottom: var(--space-sm);
}
.footer-widget-item a,
.footer-widget-item p { font-size: var(--text-sm); color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent); }
.footer-widget-item a { text-decoration: none; display: block; padding: 2px 0; transition: color var(--transition-fast); }
.footer-widget-item a:hover { color: var(--footer-link, #fff); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl) 0;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent);
}
.footer-bottom a { color: color-mix(in srgb, var(--footer-text, #fff) 60%, transparent); text-decoration: none; transition: color var(--transition-fast); }
.footer-bottom a:hover { color: var(--footer-link-hover, #418FDE); }

.footer-bottom-links {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  align-items: center;
}
.footer-bottom-links a {
  padding: 0 var(--space-md);
  border-right: 1px solid rgba(255,255,255,0.15);
  line-height: 1;
}
.footer-bottom-links a:last-child { border-right: none; }

@media (max-width: 1024px) { .footer-nav-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) {
  .footer-top-row { flex-direction: column; gap: var(--space-xl); }
  .footer-top-right { align-items: flex-start; }
  .footer-social { justify-content: flex-start; }
  .footer-nav-row { grid-template-columns: repeat(2,1fr); gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}
@media (max-width: 480px) { .footer-nav-row { grid-template-columns: 1fr; } }

/* ============================================
   SHARE BUTTONS SIDEBAR con FA
   ============================================ */
.share-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-sm);
}
.share-btn:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.share-btn:last-child:nth-child(3n+2) { grid-column: span 2; }
.share-btn {
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted); text-align: center;
  transition: all var(--transition-fast);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; background: transparent; cursor: pointer;
}
.share-btn i { font-size: 1.1rem; }
.share-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-bg); }
.share-btn.copied { border-color:#22c55e; color:#22c55e; background:rgba(34,197,94,0.06); }
.share-btn[data-network="facebook"]:hover  { border-color:#1877f2;color:#1877f2;background:rgba(24,119,242,.05); }
.share-btn[data-network="twitter"]:hover   { border-color:#000;color:#000;background:rgba(0,0,0,.03); }
.share-btn[data-network="whatsapp"]:hover  { border-color:#25d366;color:#25d366;background:rgba(37,211,102,.05); }
.share-btn[data-network="linkedin"]:hover  { border-color:#0a66c2;color:#0a66c2;background:rgba(10,102,194,.05); }
.share-btn[data-network="telegram"]:hover  { border-color:#0088cc;color:#0088cc;background:rgba(0,136,204,.05); }
.share-btn[data-network="reddit"]:hover    { border-color:#ff4500;color:#ff4500;background:rgba(255,69,0,.05); }

/* Header páginas */
.site-header--pages .nav-menu > li.current-menu-item > a,
.site-header--pages .nav-menu > li.current_page_item > a {
  color: var(--color-primary);
  background: var(--color-bg);
}

/* ============================================
   v1.3.0 — NUEVO ARTICLE HEADER (estilo HubSpot)
   Breadcrumb ancho completo + grid título/imagen
   ============================================ */

/* Breadcrumb — ancho total del artículo */
.article-header {
  padding: var(--space-2xl) 0 0;
  margin-bottom: var(--space-2xl);
}

.article-breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  /* Sin borde aquí — ahora es solo navegación */
}

.article-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.article-breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}
.article-breadcrumb .sep {
  color: var(--color-border);
  font-size: var(--text-base);
  font-weight: 300;
}

/* Grid: título+meta izq / imagen der */
.article-header-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-3xl);
  align-items: center;
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2xl);
}

.article-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Categorías */
.article-categories { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.cat-tag {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px var(--space-sm);
  border-radius: var(--radius-full);
  background: rgba(244,119,45,0.1);
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.cat-tag:hover { background: rgba(244,119,45,0.2); }

/* Título */
.article-title {
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin: 0;
}

/* Byline completo */
.article-byline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.article-byline-avatar {
  flex-shrink: 0;
}
.article-byline-avatar .author-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.article-byline-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.article-byline-top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.article-byline-label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article-byline-name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.article-byline-name:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}

/* Redes sociales del autor en el byline */
.article-author-social {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.article-author-social:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(244,119,45,0.08);
}

.article-byline-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.article-byline-sep { opacity: 0.4; }

.article-read-time-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
}
.article-read-time-inline i { font-size: 0.85rem; }

/* Imagen en el header */
.article-header-right { flex-shrink: 0; }
.article-header-thumb {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* Responsive header */
@media (max-width: 900px) {
  .article-header-grid {
    grid-template-columns: 1fr;
  }
  .article-header-right {
    order: -1;
  }
  .article-header-thumb {
    height: 220px;
  }
  .article-title { font-size: var(--text-3xl); }
}

@media (max-width: 600px) {
  .article-title { font-size: var(--text-2xl); }
  .article-header-thumb { height: 180px; }
}

/* ============================================
   v1.3.0 — COLORES SECUNDARIO Y ACENTO
   ============================================ */

/* Botón secundario */
.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-weight: 700;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover { opacity: 0.9; transform: translateY(-1px); }

/* Fondo secundario */
.bg-two { background: var(--color-bg-two); }

/* Validaciones / alertas */
.alert-success, .wpcf7-mail-sent-ok {
  background: rgba(29,220,29,0.1);
  border: 1.5px solid var(--color-accent);
  color: #0a7a0a;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}
.alert-error, .wpcf7-mail-sent-ng, .wpcf7-validation-errors {
  background: rgba(244,119,45,0.08);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

/* Ticker y newsletter con nuevo fondo */
.posts-ticker { background: var(--color-text); }
.newsletter-section { background: var(--color-text); }

/* ============================================
   v1.4.0 — ARTICLE HEADER WRAP (ancho completo)
   ============================================ */
.article-header-wrap {
  background: var(--color-bg-white);
  padding: var(--space-2xl) 0 var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

/* Breadcrumb dentro del wrap */
.article-header-wrap .article-breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
  padding: 0;
  border: none;
}
.article-header-wrap .article-breadcrumb a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.article-header-wrap .article-breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}
.article-header-wrap .article-breadcrumb .sep {
  color: var(--color-border);
  font-size: var(--text-base);
}

/* Grid ancho completo */
.article-header-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-3xl);
  align-items: center;
}

.article-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Categorías */
.article-categories { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.cat-tag {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px var(--space-md);
  border-radius: var(--radius-full);
  background: rgba(244,119,45,0.1);
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.cat-tag:hover { background: rgba(244,119,45,0.2); }

/* Título grande */
.article-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin: 0;
}

/* Byline */
.article-byline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.article-byline-avatar { flex-shrink: 0; }
.article-byline-avatar .author-avatar {
  width: 48px !important; height: 48px !important;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--color-border);
  display: block;
}
.article-byline-info { display: flex; flex-direction: column; gap: 4px; }
.article-byline-top {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
}
.article-byline-label {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted);
}
.article-byline-name {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700;
  color: var(--color-text); text-decoration: underline;
  text-decoration-color: transparent; text-underline-offset: 2px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.article-byline-name:hover { color: var(--color-primary); text-decoration-color: var(--color-primary); }
.article-author-social {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: 0.65rem; text-decoration: none;
  transition: all var(--transition-fast);
}
.article-author-social:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(244,119,45,0.08); }
.article-byline-bottom {
  display: flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted);
  flex-wrap: wrap;
}
.article-byline-sep { opacity: 0.4; }
.article-read-time-inline { display: flex; align-items: center; gap: 4px; }
.article-read-time-inline i { font-size: 0.85rem; }

/* Imagen header */
.article-header-right { flex-shrink: 0; }
.article-header-thumb {
  width: 100%; height: 300px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  display: block;
}

/* Responsive header */
@media (max-width: 960px) {
  .article-header-grid { grid-template-columns: 1fr; }
  .article-header-right { order: -1; }
  .article-header-thumb { height: 220px; }
  .article-title { font-size: clamp(1.75rem, 5vw, 2.5rem); }
}

/* Tags y bio */
.article-tags {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
}
.article-tags-label {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted);
}
.author-bio-box {
  margin-top: var(--space-3xl);
  padding: var(--space-xl);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-lg); align-items: start;
}
.author-bio-avatar { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; }
.author-bio-name {
  font-family: var(--font-ui); font-size: var(--text-base); font-weight: 700;
  color: var(--color-text); display: block; margin-bottom: var(--space-sm); text-decoration: none;
}
.author-bio-name:hover { color: var(--color-primary); }
.author-bio-text { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; line-height: 1.7; }

/* Sidebar related list */
.sidebar-related-list { display: flex; flex-direction: column; gap: var(--space-md); }
.sidebar-related-item { display: flex; gap: var(--space-md); text-decoration: none; align-items: flex-start; }
.sidebar-related-thumb { width: 72px; height: 52px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; }
.sidebar-related-title { font-family: var(--font-ui); font-size: .8rem; font-weight: 600; line-height: 1.4; color: var(--color-text); transition: color var(--transition-fast); }
.sidebar-related-item:hover .sidebar-related-title { color: var(--color-primary); }

/* cat-tag override to remove the old rgba hardcoded */
.cat-tag { background: rgba(244,119,45,0.1); color: var(--color-primary); }

/* ============================================
   v1.4.1 — FIX espacio grande entre header
   y contenido del artículo
   ============================================ */

/* El wrap tiene su propio padding-bottom,
   el layout no necesita padding-top */
.article-header-wrap {
  padding: var(--space-xl) 0 var(--space-2xl);
  margin-bottom: 0;
}

/* El grid del header ya tiene border-bottom,
   no necesita margin-bottom extra */
.article-header-wrap .article-header-grid {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* El single-post-layout empieza sin padding-top extra */
.single-post-layout {
  padding-top: var(--space-xl) !important;
}

/* Neutralizar los padding/margin duplicados de versiones anteriores */
.article-header { padding: 0; margin-bottom: 0; border-bottom: none; }

/* El breadcrumb dentro del wrap: espaciado compacto */
.article-header-wrap .article-breadcrumb {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
}

/* ============================================
   v1.5.2 — SHARE PANEL + FIXES
   ============================================ */

/* Mobile share bar — solo visible en mobile, fondo transparente */
.mobile-share-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  padding: var(--space-sm) var(--space-xl) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: transparent;
  border-top: none;
  box-shadow: none;
  transition: transform var(--transition-base);
}
@media (max-width: 768px) {
  .mobile-share-bar { display: flex; align-items: center; justify-content: center; }
  .single-post-layout { padding-bottom: 72px; }
}

/* Botón disparador */
.mobile-share-trigger {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--color-bg-white, #fff);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: .5rem 1.25rem;
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.1);
  transition: all .15s;
}
.mobile-share-trigger:hover,
.mobile-share-trigger:active { border-color: var(--color-primary); color: var(--color-primary); }

/* Panel slide-up */
.mobile-share-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-bg-white, #fff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,.12);
  z-index: 9000;
  padding: 1rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.mobile-share-panel.open { transform: translateY(0); }
.mobile-share-panel-bar {
  width: 40px; height: 4px; border-radius: 4px;
  background: var(--color-border); margin: 0 auto .875rem;
}
.mobile-share-panel-title {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-muted); text-align: center; margin-bottom: 1.25rem;
}
.mobile-share-panel-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
}
.mobile-share-panel-btn {
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
  background: none; border: none; cursor: pointer;
  padding: .625rem .5rem; border-radius: 10px;
  text-decoration: none; transition: background .15s;
}
.mobile-share-panel-btn:hover,
.mobile-share-panel-btn:active { background: var(--color-bg); }
.mobile-share-panel-btn i { font-size: 1.35rem; color: var(--color-text-muted); }
.mobile-share-panel-btn span {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 600;
  color: var(--color-text-muted);
}
/* Network colors */
.mobile-share-panel-btn[data-network="facebook"] i { color: #1877f2; }
.mobile-share-panel-btn[data-network="twitter"]  i { color: #000; }
.mobile-share-panel-btn[data-network="whatsapp"] i { color: #25d366; }
.mobile-share-panel-btn[data-network="telegram"] i { color: #0088cc; }
.mobile-share-panel-btn[data-network="linkedin"] i { color: #0a66c2; }
.mobile-share-panel-btn[data-network="reddit"]   i { color: #ff4500; }

/* Overlay */
.mobile-share-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 8999; display: none;
}
.mobile-share-overlay.open { display: block; }

/* ============================================================
   v1.5.5 — POPUP DAILYMOTION + FOOTER VARS + LABELED FIELDS
   ============================================================ */

/* Popup overlay */
.cir-popup-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 8999;
}
.cir-popup-overlay.open { display: block; }

/* Popup wrapper */
.cir-popup-wrap {
  display: none; position: fixed; inset: 0;
  z-index: 9000; align-items: center; justify-content: center; padding: 1rem;
}
.cir-popup-wrap.open { display: flex; }

/* Box */
.cir-popup-box {
  position: relative; background: #fff;
  border-radius: 12px; width: 100%; max-width: 460px;
  max-height: 95vh; overflow-y: auto;
  padding: 2.25rem 2rem 1.75rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

/* Close button */
.cir-popup-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 28px; height: 28px; border-radius: 50%;
  background: #f3f3f3; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: #666; transition: background .15s;
}
.cir-popup-close:hover { background: #e0e0e0; }

/* Title */
.cir-popup-title {
  font-family: var(--font-ui); font-size: 1.25rem; font-weight: 800;
  color: var(--color-text); text-align: center;
  margin: 0 0 1.5rem; letter-spacing: -.02em;
}

/* Tabs — Dailymotion style: text + underline */
.cir-popup-tabs {
  display: flex; justify-content: center; gap: 2rem;
  border-bottom: 1.5px solid #eee; margin-bottom: 1.5rem;
}
.cir-popup-tab {
  background: none; border: none; padding: .5rem 0;
  font-family: var(--font-ui); font-size: .925rem; font-weight: 600;
  color: #aaa; cursor: pointer; margin-bottom: -1.5px;
  border-bottom: 2px solid transparent; transition: all .15s;
}
.cir-popup-tab.is-active { color: var(--color-text); border-bottom-color: var(--color-text); }
.cir-popup-tab:hover { color: var(--color-text); }

/* Labeled fields — label above input */
.cir-field-labeled { display: flex; flex-direction: column; gap: .35rem; }
.cir-field-labeled label {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  color: var(--color-text);
}
.cir-field-labeled input {
  border: 1.5px solid #ddd; border-radius: 8px;
  padding: .75rem 1rem; font-size: .9rem;
  transition: border-color .15s;
  background: #fff;
}
.cir-field-labeled input:focus { outline: none; border-color: var(--color-text); }
.cir-field-labeled .cir-username-wrap { border: 1.5px solid #ddd; border-radius: 8px; }
.cir-field-labeled .cir-username-wrap:focus-within { border-color: var(--color-text); }
.cir-field-labeled .cir-username-wrap input { border: none !important; padding: .75rem .5rem; }

/* Forgot link */
.cir-popup-forgot { text-align: right; margin-bottom: .875rem; }

/* Auth button */
.cir-btn-auth {
  background: #e8e8e8 !important; color: var(--color-text) !important;
  border: none !important; border-radius: 8px !important;
  font-size: .95rem !important; font-weight: 700 !important;
  padding: .875rem 1.5rem !important; transition: background .15s !important;
}
.cir-btn-auth:hover { background: #d4d4d4 !important; }

/* Legal text */
.cir-popup-legal {
  font-size: .72rem; color: #aaa; text-align: center; margin-top: 1rem;
}
.cir-popup-legal a { color: var(--color-primary); }

/* ── LOGIN/REGISTER PAGE: fullscreen sin header/footer ── */
body.cir-blank-page #site-header,
body.cir-blank-page .site-footer,
body.cir-blank-page .newsletter-section,
body.cir-blank-page #mobile-menu,
body.cir-blank-page .reading-progress-bar { display: none !important; }

body.cir-blank-page #main-content { padding-top: 0 !important; }
body.cir-blank-page { background: #000; }
[aria-hidden="true"]:not(.clic-hero-article__bg) { display: none !important; }
.mobile-menu.active { display: block !important; }
.auth-popup[aria-hidden="false"], .search-popup[aria-hidden="false"] { display: block !important; }
.auth-popup-overlay[aria-hidden="false"], .search-popup-overlay[aria-hidden="false"] { display: block !important; }
.digest-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 12px; width: calc(100% - 32px); max-width: 460px; padding: 2rem; box-shadow: 0 25px 60px rgba(0,0,0,.25); z-index: 99999; }
.digest-popup-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 99998; }
.digest-popup-close { position: absolute; top: .75rem; right: .75rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; }
.digest-row { display: flex; gap: .75rem; }
.digest-row .cir-field { flex: 1; }
.clic-article-layout--right { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 40px; align-items: start; }
.clic-article-aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 1.5rem; }
.clic-aside-block { padding-bottom: 1rem; border-bottom: 1px solid var(--clic-border, #e4e7ec); }
.clic-aside-block:last-child { border-bottom: none; }
.clic-toc-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.clic-toc-list a { font-size: .85rem; color: var(--clic-ink, #0b1b2b); text-decoration: none; }
.clic-toc-list a:hover { color: var(--clic-accent, #1f5bff); }
.clic-aside-newsletter form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.clic-aside-newsletter input { padding: .5rem; border: 1px solid var(--clic-border, #e4e7ec); border-radius: 2px; }
.clic-tags a { text-decoration: none; }
@media (max-width: 900px) {
  .clic-article-layout--right { grid-template-columns: 1fr; }
  .clic-article-aside { position: static; }
}

.clic-mobile-menu { position: fixed; inset: 0; background: #0b1b2b; z-index: 100000; overflow-y: auto; }
.clic-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; }
.clic-mobile-menu__head img { filter: brightness(0) invert(1); }
.clic-mobile-menu__head button { background: none; border: none; color: #fff; font-size: 1.75rem; cursor: pointer; line-height: 1; }
.clic-mobile-menu__list { list-style: none; margin: 0; padding: 0 1.5rem; }
.clic-mobile-menu__list li { border-bottom: 1px solid rgba(255,255,255,.12); }
.clic-mobile-menu__list a { display: block; padding: 1.1rem 0; color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.clic-mobile-menu__foot { border-top: 1px solid rgba(255,255,255,.12); margin-top: 1rem; padding: 1rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.clic-mobile-menu__foot a, .clic-mobile-menu__foot button { color: #fff; background: none; border: none; text-align: left; font-size: 1rem; text-decoration: none; cursor: pointer; padding: 0; font-family: inherit; }
.clic-mobile-menu { position: fixed; top: 0; left: 0; width: 320px; max-width: 88vw; height: auto; max-height: 90vh; background: #0b1b2b; z-index: 100000; overflow-y: auto; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
.clic-header__inner--lead { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.clic-header__inner--lead .clic-brand { flex-shrink: 0; }
.clic-header__inner--lead .clic-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.clic-header__inner--lead .clic-nav__menu { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; white-space: nowrap; }
.clic-header__inner--lead .clic-nav__menu a { color: var(--clic-ink,#0b1b2b); text-decoration: none; font-weight: 600; font-size: .95rem; }
.clic-header__inner--lead .clic-nav__menu a:hover { color: var(--clic-accent,#1f5bff); }
.clic-header__inner--lead .clic-header__actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.clic-header__inner--lead .clic-btn { white-space: nowrap; }
.clic-brand__link { display: flex; align-items: center; gap: .5rem; margin-right: 1rem; }
.clic-menu-toggle { margin-right: .75rem; }
.clic-header__actions .clic-btn { margin-left: .5rem; }
.clic-header .clic-header__inner--lead { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; position: static !important; width: 100%; }
.clic-header .clic-brand, .clic-header .clic-brand__link { position: static !important; flex: 0 0 auto !important; }
.clic-header .clic-nav { position: static !important; flex: 1 1 auto !important; display: flex !important; justify-content: center !important; min-width: 0; }
.clic-header .clic-nav__menu { position: static !important; display: flex !important; }
.clic-header .clic-nav__menu li { position: static !important; }
.clic-header .clic-header__actions { position: static !important; flex: 0 0 auto !important; display: flex !important; align-items: center; }
.clic-header .clic-search-toggle, .clic-header .clic-menu-toggle { position: static !important; }
.search-result-item { display: block; padding: .6rem 1rem; text-decoration: none; color: var(--clic-ink,#0b1b2b); border-bottom: 1px solid var(--clic-border,#e4e7ec); }
.search-result-item:hover { background: var(--clic-surface,#f7f6f3); }
.search-result-type { font-size: .7rem; text-transform: uppercase; color: var(--clic-accent,#1f5bff); font-weight: 700; margin-right: .5rem; }
@media (max-width: 900px) {
  .clic-header .clic-header__inner--lead { justify-content: space-between; }
  .clic-header .clic-menu-toggle { order: 3; display: inline-flex !important; }
  .clic-header .clic-brand { order: 1; }
  .clic-header .clic-nav { display: none !important; }
  .clic-header .clic-header__actions { order: 2; margin-left: auto; gap: .5rem; }
}
.clic-menu-toggle { display: inline-flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 42px; height: 42px; background: none; border: none; cursor: pointer; }
.clic-menu-toggle .hbg-line { display: block; width: 22px; height: 2px; background: var(--clic-ink,#0b1b2b); transition: transform .25s, opacity .25s; }
.clic-menu-toggle.is-open .hbg-line:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.clic-menu-toggle.is-open .hbg-line:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
.clic-mobile-menu { position: fixed !important; top: 0; left: 0; width: 100% !important; max-width: 100% !important; height: 100vh; max-height: 100vh; background: #0b1b2b; z-index: 100000; overflow-y: auto; transform: translateY(-100%); transition: transform .3s ease; }
.clic-mobile-menu.is-open { transform: translateY(0); }
#mobile-menu.clic-mobile-menu { background: #0b1b2b !important; color: #fff !important; }
#mobile-menu .clic-mobile-menu__list a { color: #fff !important; }
#mobile-menu-close { color: #fff !important; background: none !important; border: none !important; }
.clic-nav__menu { flex-wrap: nowrap; overflow: hidden; }
.clic-nav__more { position: relative; list-style: none; flex-shrink: 0; }
.clic-nav__more > a { color: var(--clic-ink,#0b1b2b); text-decoration: none; font-weight: 700; padding: 0 .25rem; }
.clic-nav__more-list { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--clic-border,#e4e7ec); box-shadow: 0 8px 24px rgba(0,0,0,.08); min-width: 180px; list-style: none; margin: 0; padding: .5rem 0; z-index: 400; }
.clic-nav__more-list.is-open { display: block; }
.clic-nav__more-list li a { display: block; padding: .5rem 1rem; color: var(--clic-ink,#0b1b2b); text-decoration: none; font-weight: 600; white-space: nowrap; }
.clic-nav__more-list li a:hover { color: var(--clic-accent,#1f5bff); }
.clic-nav { overflow: visible !important; }
.clic-nav__menu { overflow: visible !important; }
.clic-nav__more-list { z-index: 9999 !important; }.clic-header .clic-nav__menu li.clic-nav__more { position: relative !important; }