/*
Theme Name:   AgeValed
Description:  Child theme — Ink & Electric. Senior Dev · DevOps · Product Owner.
Template:     generatepress
Version:      2.0.0
Text Domain:  agevaled-child
*/

/* ============================================================
   VARIABLES — PALETA INK & ELECTRIC
   ============================================================ */

:root {
  --av-bg:           #f5f7ff;
  --av-surf:         #ffffff;
  --av-surf2:        #eef2ff;
  --av-accent:       #2563eb;
  --av-accent-hover: #1d4ed8;
  --av-accent-dim:   rgba(37,99,235,0.09);
  --av-accent-text:  #1d4ed8;
  --av-text:         #12131a;
  --av-sub:          #4b5563;
  --av-muted:        #9ca3af;
  --av-border:       rgba(37,99,235,0.13);
  --av-tag-bg:       #dbeafe;
  --av-tag-text:     #1d4ed8;
  --av-code-bg:      #1a1c28;
  --av-code-text:    #82b4ff;
  --av-code-comment: #5a6480;
  --av-logo-base:    #12131a;
  --av-logo-accent:  #2563eb;
  --av-font-head:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --av-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --av-font-code:    'JetBrains Mono', 'Fira Code', monospace;
  --av-radius-sm:    6px;
  --av-radius-md:    10px;
  --av-radius-lg:    14px;
  --av-transition:   150ms ease;
}

[data-theme="dark"] {
  --av-bg:           #12131a;
  --av-surf:         #1a1c28;
  --av-surf2:        #1e2035;
  --av-accent:       #4f8ef7;
  --av-accent-hover: #6ba3f9;
  --av-accent-dim:   rgba(79,142,247,0.13);
  --av-accent-text:  #82b4ff;
  --av-text:         #dde3f0;
  --av-sub:          #7a849a;
  --av-muted:        #4a5270;
  --av-border:       rgba(79,142,247,0.15);
  --av-tag-bg:       rgba(79,142,247,0.12);
  --av-tag-text:     #82b4ff;
  --av-logo-base:    #ffffff;
  --av-logo-accent:  #4f8ef7;
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: var(--av-bg) !important;
  color: var(--av-text) !important;
  font-family: var(--av-font-body) !important;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--av-transition), color var(--av-transition);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--av-accent); text-decoration: none; transition: color var(--av-transition); }
a:hover { color: var(--av-accent-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--av-font-head) !important;
  color: var(--av-text) !important;
  line-height: 1.25;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

p { color: var(--av-sub); margin-bottom: 1.25rem; }
strong { font-weight: 600; color: var(--av-text); }

blockquote {
  border-left: 3px solid var(--av-accent);
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  background: var(--av-accent-dim);
  border-radius: 0 var(--av-radius-md) var(--av-radius-md) 0;
  font-style: italic;
  color: var(--av-sub);
}
blockquote p { margin: 0; }
hr { border: none; border-top: 1px solid var(--av-border); margin: 2rem 0; }

/* ============================================================
   LAYOUT — ELIMINAR MÁRGENES LATERALES GRISES
   ============================================================ */

.site, #page { background: var(--av-bg) !important; }

.site-content, #content, .content-area, #primary {
  background: var(--av-bg) !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-main, #main {
  background: transparent !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.inside-article {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.grid-container {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  width: 100% !important;
}

/* Eliminar sidebar */
.widget-area, #right-sidebar, #left-sidebar, .sidebar { display: none !important; }

/* ============================================================
   TOP BAR — ocultar
   ============================================================ */

.top-bar, #top-bar, .site-top-bar { display: none !important; }

/* ============================================================
   HEADER
   ============================================================ */

.site-header, #site-header {
  background-color: var(--av-surf) !important;
  border-bottom: 1px solid var(--av-border) !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  transition: background-color var(--av-transition) !important;
}

.inside-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 60px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  width: 100% !important;
}

.site-branding { flex-shrink: 0 !important; }

.site-title, .site-title a, .main-title {
  font-family: var(--av-font-head) !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  color: var(--av-logo-base) !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
.site-title a:hover { opacity: 0.85; color: var(--av-logo-base) !important; }
.site-description { display: none !important; }

/* Nav */
.nav-primary, .main-navigation, .main-navigation .inside-navigation {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

.main-navigation ul {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0.25rem !important;
  align-items: center !important;
}

.main-navigation ul li a,
.main-navigation ul > li > a {
  font-family: var(--av-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--av-sub) !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: var(--av-radius-sm) !important;
  text-decoration: none !important;
  transition: color var(--av-transition), background-color var(--av-transition) !important;
  display: block !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  color: var(--av-accent) !important;
  background: var(--av-accent-dim) !important;
}

.main-navigation .sub-menu {
  background: var(--av-surf) !important;
  border: 1px solid var(--av-border) !important;
  border-radius: var(--av-radius-md) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
  padding: 0.375rem !important;
}

.menu-toggle, button.menu-toggle { display: none !important; }

.generate-inside-navigation-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  margin-left: 0.5rem !important;
}

/* Avatar AV */
.av-nav-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--av-accent-dim);
  border: 1.5px solid var(--av-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700;
  color: var(--av-accent-text);
  text-decoration: none; flex-shrink: 0;
  transition: opacity var(--av-transition);
}
.av-nav-avatar:hover { opacity: 0.8; color: var(--av-accent-text); }

/* Dark mode toggle */
.av-theme-toggle {
  background: none;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--av-sub);
  transition: all var(--av-transition); flex-shrink: 0;
}
.av-theme-toggle:hover { border-color: var(--av-accent); color: var(--av-accent); background: var(--av-accent-dim); }
.av-theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.av-theme-toggle .icon-sun { display: none; }
.av-theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .av-theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .av-theme-toggle .icon-moon { display: none; }

/* Mobile toggle */
.av-mobile-toggle {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm); cursor: pointer;
  color: var(--av-sub); margin-left: 0.5rem;
}
.av-mobile-toggle:hover { border-color: var(--av-accent); color: var(--av-accent); background: var(--av-accent-dim); }
.av-mobile-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb-trail, #breadcrumbs, .rank-math-breadcrumb, .yoast-breadcrumbs {
  background: var(--av-surf2) !important;
  border-bottom: 1px solid var(--av-border) !important;
  padding: 0.5rem 0 !important;
  font-size: 0.8125rem !important;
  color: var(--av-muted) !important;
  width: 100% !important;
  margin: 0 !important;
}
.breadcrumb-trail .wrap,
.breadcrumb-trail .grid-container,
.rank-math-breadcrumb p {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}
.breadcrumb-trail a, .rank-math-breadcrumb a { color: var(--av-sub) !important; text-decoration: none !important; }
.breadcrumb-trail a:hover, .rank-math-breadcrumb a:hover { color: var(--av-accent) !important; }
.breadcrumb-trail .sep { color: var(--av-muted); margin: 0 0.375rem; }
.breadcrumb-trail .trail-end { color: var(--av-accent); }

/* ============================================================
   HOME — POSTS LOOP
   ============================================================ */

.home .site-main, .blog .site-main {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 2rem 1.5rem !important;
}

.home article, .blog article, .archive article {
  background: var(--av-surf) !important;
  border: 1px solid var(--av-border) !important;
  border-radius: var(--av-radius-lg) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  transition: border-color var(--av-transition) !important;
  box-shadow: none !important;
}
.home article:hover, .blog article:hover { border-color: var(--av-accent) !important; }

.home .entry-title, .blog .entry-title { font-size: 1.25rem !important; margin: 0.5rem 0 0.75rem !important; }
.home .entry-title a, .blog .entry-title a { color: var(--av-text) !important; }
.home .entry-title a:hover, .blog .entry-title a:hover { color: var(--av-accent) !important; }
.home .entry-meta, .blog .entry-meta { font-size: 0.8125rem !important; color: var(--av-muted) !important; }
.home .entry-meta a, .blog .entry-meta a { color: var(--av-accent) !important; }
.home .entry-summary p, .blog .entry-summary p { color: var(--av-sub) !important; font-size: 0.9375rem !important; line-height: 1.65 !important; }
.home .cat-links a, .blog .cat-links a {
  font-size: 0.75rem !important; font-weight: 700 !important;
  letter-spacing: 0.07em !important; text-transform: uppercase !important;
  color: var(--av-accent) !important; text-decoration: none !important;
}
.home .more-link, .blog .more-link {
  display: inline-block; margin-top: 0.75rem;
  font-size: 0.875rem; font-weight: 500; color: var(--av-accent);
}

/* ============================================================
   SINGLE POST
   ============================================================ */

.single .site-main {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 2rem 1.5rem 3rem !important;
  background: transparent !important;
}

.single article, .single .hentry {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.single .post-thumbnail { width: 100% !important; border-radius: var(--av-radius-lg) !important; margin-bottom: 1.75rem !important; overflow: hidden !important; }
.single .post-thumbnail img { width: 100% !important; height: auto !important; border-radius: var(--av-radius-lg) !important; display: block !important; }

.single .cat-links { display: block !important; margin-bottom: 0.625rem !important; }
.single .cat-links a {
  font-size: 0.75rem !important; font-weight: 700 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: var(--av-accent) !important; text-decoration: none !important;
}

.single .entry-title {
  font-size: 2rem !important; font-weight: 700 !important;
  line-height: 1.25 !important; color: var(--av-text) !important;
  margin: 0 0 1rem !important;
}
.single .entry-title a { color: var(--av-text) !important; text-decoration: none !important; }

.single .entry-meta {
  padding-left: 5px !important;
  font-size: 0.875rem !important; color: var(--av-muted) !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid var(--av-border) !important;
  margin-bottom: 1.75rem !important;
}
.single .entry-meta a { color: var(--av-accent) !important; }

.single .entry-content { color: var(--av-sub) !important; font-size: 1rem !important; line-height: 1.75 !important; }
.single .entry-content h2 { font-size: 1.375rem !important; color: var(--av-text) !important; margin-top: 2.5rem !important; }
.single .entry-content h3 { font-size: 1.125rem !important; color: var(--av-text) !important; margin-top: 2rem !important; }
.single .entry-content p { color: var(--av-sub) !important; }
.single .entry-content a { color: var(--av-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
.single .entry-content a:hover { color: var(--av-accent-hover) !important; }
.single .entry-content img { border-radius: var(--av-radius-md); max-width: 100%; }
.single .entry-content ul, .single .entry-content ol { padding-left: 1.5rem; margin-bottom: 1.375rem; color: var(--av-sub); }
.single .entry-content li { margin-bottom: 0.375rem; }

.single .entry-footer {
  margin-top: 2.5rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid var(--av-border) !important;
  font-size: 0.875rem !important;
  color: var(--av-muted) !important;
}
.single .entry-footer a { color: var(--av-accent) !important; }

/* Post nav */
.post-navigation {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--av-border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.post-navigation .nav-previous, .post-navigation .nav-next {
  background: var(--av-surf); border: 1px solid var(--av-border);
  border-radius: var(--av-radius-md); padding: 1rem 1.25rem;
  transition: border-color var(--av-transition);
}
.post-navigation .nav-previous:hover, .post-navigation .nav-next:hover { border-color: var(--av-accent); }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { color: var(--av-text) !important; font-weight: 500; }
.post-navigation .nav-subtitle { font-size: 0.75rem; color: var(--av-muted); display: block; margin-bottom: 0.25rem; }

/* ============================================================
   CÓDIGO
   ============================================================ */

code, kbd {
  font-family: var(--av-font-code);
  font-size: 0.875em;
  background: var(--av-surf2);
  color: var(--av-accent);
  padding: 0.1em 0.45em;
  border-radius: 4px;
  border: 1px solid var(--av-border);
}

pre {
  background: var(--av-code-bg) !important;
  border-radius: var(--av-radius-md);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border-left: 3px solid var(--av-accent);
  position: relative;
}
pre code {
  font-family: var(--av-font-code);
  font-size: 0.875rem;
  line-height: 1.7;
  background: none; color: var(--av-code-text);
  padding: 0; border: none; border-radius: 0;
}

.av-copy-btn {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--av-radius-sm);
  padding: 0.25rem 0.625rem;
  font-family: var(--av-font-code); font-size: 0.6875rem;
  color: var(--av-code-comment); cursor: pointer;
  transition: all var(--av-transition);
}
.av-copy-btn:hover { color: var(--av-code-text); border-color: rgba(255,255,255,0.3); }
.av-copy-btn.copied { color: #4ade80; }

/* ============================================================
   TAGS / BADGES
   ============================================================ */

.av-tag, .post-tags a, .entry-footer .tags-links a {
  display: inline-block;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  background: var(--av-tag-bg); color: var(--av-tag-text);
  text-decoration: none !important;
  transition: opacity var(--av-transition);
  margin: 0.125rem;
}
.av-tag:hover, .post-tags a:hover, .entry-footer .tags-links a:hover { opacity: 0.8; color: var(--av-tag-text); }

/* ============================================================
   COMENTARIOS
   ============================================================ */

#comments { max-width: 760px; margin: 0 auto; padding: 0 1.5rem 2rem; }
.comment-reply-title, .comments-title { color: var(--av-text) !important; font-size: 1.25rem !important; }
.comment-form label { color: var(--av-sub) !important; font-size: 0.875rem !important; }
.comment-form input, .comment-form textarea {
  background: var(--av-surf) !important;
  border: 1px solid var(--av-border) !important;
  border-radius: var(--av-radius-sm) !important;
  color: var(--av-text) !important;
  padding: 0.625rem 0.875rem !important;
  width: 100% !important;
  font-family: var(--av-font-body) !important;
  font-size: 0.9375rem !important;
  transition: border-color var(--av-transition) !important;
}
.comment-form input:focus, .comment-form textarea:focus { outline: none !important; border-color: var(--av-accent) !important; }
.comment-form .submit, .comment-form input[type="submit"] {
  background: var(--av-accent) !important; color: #fff !important;
  border: none !important; padding: 0.625rem 1.5rem !important;
  border-radius: var(--av-radius-sm) !important; font-weight: 600 !important;
  cursor: pointer !important; font-size: 0.9375rem !important;
  width: auto !important; transition: background-color var(--av-transition) !important;
}
.comment-form .submit:hover, .comment-form input[type="submit"]:hover { background: var(--av-accent-hover) !important; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer, #colophon {
  background: var(--av-surf) !important;
  border-top: 1px solid var(--av-border) !important;
  padding: 1.5rem 0 !important;
  margin-top: 3rem !important;
  transition: background-color var(--av-transition) !important;
}

/* Ocultar "Built with GeneratePress" */
.site-info, .copyright, a[href*="generatepress.com"] { display: none !important; }

.av-footer-brand { font-family: var(--av-font-head); font-size: 1rem; font-weight: 700; color: var(--av-logo-accent); }
.av-footer-tagline { font-size: 0.75rem; color: var(--av-muted); margin-top: 0.25rem; }
.av-footer-links { display: flex; gap: 1.25rem; }
.av-footer-links a { font-size: 0.8125rem; color: var(--av-sub); text-decoration: none; transition: color var(--av-transition); }
.av-footer-links a:hover { color: var(--av-accent); }

/* ============================================================
   DARK MODE — overrides globales
   ============================================================ */

[data-theme="dark"] .site,
[data-theme="dark"] #page,
[data-theme="dark"] body { background-color: var(--av-bg) !important; }

[data-theme="dark"] .site-content,
[data-theme="dark"] #content,
[data-theme="dark"] .site-main,
[data-theme="dark"] #main,
[data-theme="dark"] main { background-color: var(--av-bg) !important; }

[data-theme="dark"] .site-header, [data-theme="dark"] #site-header {
  background-color: var(--av-surf) !important;
  border-bottom-color: var(--av-border) !important;
}
[data-theme="dark"] .site-footer, [data-theme="dark"] #colophon {
  background-color: var(--av-surf) !important;
  border-top-color: var(--av-border) !important;
}
[data-theme="dark"] .site-title a { color: var(--av-logo-base) !important; }
[data-theme="dark"] .main-navigation ul li a { color: var(--av-sub) !important; }
[data-theme="dark"] .main-navigation ul li a:hover,
[data-theme="dark"] .main-navigation ul li.current-menu-item > a { color: var(--av-accent) !important; background: var(--av-accent-dim) !important; }
[data-theme="dark"] .main-navigation .sub-menu { background: var(--av-surf) !important; border-color: var(--av-border) !important; }
[data-theme="dark"] article, [data-theme="dark"] .hentry { background: transparent !important; }
[data-theme="dark"] .home article, [data-theme="dark"] .blog article { background: var(--av-surf) !important; border-color: var(--av-border) !important; }
[data-theme="dark"] .inside-article { background: transparent !important; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--av-text) !important; }
[data-theme="dark"] p { color: var(--av-sub) !important; }
[data-theme="dark"] .entry-content { color: var(--av-sub) !important; }
[data-theme="dark"] code, [data-theme="dark"] kbd { background: var(--av-surf2) !important; border-color: var(--av-border) !important; color: var(--av-accent) !important; }
[data-theme="dark"] .comment-form input, [data-theme="dark"] .comment-form textarea { background: var(--av-surf2) !important; border-color: var(--av-border) !important; color: var(--av-text) !important; }
[data-theme="dark"] .breadcrumb-trail, [data-theme="dark"] #breadcrumbs { background: var(--av-surf2) !important; border-bottom-color: var(--av-border) !important; }
[data-theme="dark"] .post-navigation .nav-previous, [data-theme="dark"] .post-navigation .nav-next { background: var(--av-surf) !important; border-color: var(--av-border) !important; }

/* ============================================================
   PAGINACIÓN
   ============================================================ */

.pagination, .nav-links { display: flex; justify-content: center; gap: 0.375rem; margin: 2rem 0; flex-wrap: wrap; }
.page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 0.5rem;
  border-radius: var(--av-radius-sm);
  font-size: 0.875rem; color: var(--av-sub);
  border: 1px solid var(--av-border); text-decoration: none;
  transition: all var(--av-transition);
}
.page-numbers:hover, .page-numbers.current { background: var(--av-accent-dim); border-color: var(--av-accent); color: var(--av-accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .main-navigation ul { display: none !important; }
  .av-mobile-toggle { display: flex !important; }
  .main-navigation ul.toggled-on {
    display: flex !important; flex-direction: column !important;
    position: absolute !important; top: 60px !important;
    left: 0 !important; right: 0 !important;
    background: var(--av-surf) !important;
    border-bottom: 1px solid var(--av-border) !important;
    padding: 0.75rem 1rem !important; z-index: 99 !important;
  }
  .single .entry-title { font-size: 1.5rem !important; }
  .post-navigation { grid-template-columns: 1fr; }
}

@media (min-width: 769px) {
  .av-mobile-toggle { display: none !important; }
}

/* ============================================================
   FIX HOME — márgenes laterales y card width
   ============================================================ */

/* El home usa .page-template-default o .home body class */
/* El card del post en el loop de GP tiene esta estructura */

.home .site-content > .grid-container,
.blog .site-content > .grid-container,
.home #content > .grid-container,
.blog #content > .grid-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Forzar que el loop ocupe todo el ancho disponible */
.home #primary,
.blog #primary,
.home .content-area,
.blog .content-area {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.home .site-main,
.blog .site-main {
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 2rem 1.5rem !important;
}

/* GP pone width fijo en .page con layout de 1 columna */
body.home.page,
body.blog.page,
body.home,
body.blog {
  --gp-content-width: 100%;
}

/* Título del post en home — NO azul, usar color de texto */
.home .entry-title a,
.blog .entry-title a {
  color: var(--av-text) !important;
  text-decoration: none !important;
}
.home .entry-title a:hover,
.blog .entry-title a:hover {
  color: var(--av-accent) !important;
}

/* ============================================================
   FIX HEADER DARK MODE — fondo y logo visibles
   ============================================================ */

/* GP a veces no aplica el background al wrapper exterior */
[data-theme="dark"] .site-header,
[data-theme="dark"] #site-header,
[data-theme="dark"] .site-header.has-sticky,
[data-theme="dark"] header.site-header {
  background-color: #1a1c28 !important;
  border-bottom: 1px solid rgba(79,142,247,0.15) !important;
}

/* Logo invisible en dark mode */
[data-theme="dark"] .site-title,
[data-theme="dark"] .site-title a,
[data-theme="dark"] .main-title,
[data-theme="dark"] .main-title a {
  color: #ffffff !important;
}

/* Punto separador del nav en dark mode (GP a veces usa un bullet) */
[data-theme="dark"] .main-navigation {
  color: var(--av-sub) !important;
}

/* ============================================================
   FIX HOME CARD — layout más ancho, sin el box angosto de GP
   ============================================================ */

/* GP en layout "content only" (sin sidebar) centra el contenido
   con max-width del container. Forzar full width del main */
.home.page .site-main,
.home .site-main {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Los articles del loop en home */
.home article.type-post,
.blog article.type-post {
  width: 100% !important;
  max-width: 100% !important;
}


/* ============================================================
   FIX FRONT-PAGE — hero y cards del home custom template
   ============================================================ */

/* Título del hero — no azul */
.av-hero .post-title a,
.av-hero h2 a,
.av-hero .entry-title a {
  color: var(--av-text) !important;
  text-decoration: none !important;
}
.av-hero .post-title a:hover,
.av-hero h2 a:hover {
  color: var(--av-accent) !important;
}

/* Avatar AV en el hero */
.av-author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--av-accent-dim);
  border: 1.5px solid var(--av-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--av-accent-text);
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 0.375rem;
}

/* Hero container */
.av-hero {
  background: var(--av-surf);
  border: 1px solid var(--av-border);
  border-radius: 14px;
  padding: 2rem;
  margin: 2rem 0 1.5rem;
  transition: border-color var(--av-transition);
}
.av-hero:hover { border-color: var(--av-accent); }

.av-hero-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.av-hero .post-title,
.av-hero h2,
.av-hero .entry-title {
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  color: var(--av-text) !important;
  line-height: 1.3 !important;
  margin: 0 0 0.75rem !important;
}

.av-hero-excerpt {
  font-size: 0.9375rem;
  color: var(--av-sub);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.av-hero-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.av-author-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.av-author-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--av-sub);
}

.av-read-time {
  font-size: 0.8125rem;
  color: var(--av-muted);
}

.av-tag-group {
  margin-left: auto;
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* Grid de posts */
.av-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.av-post-card {
  background: var(--av-surf);
  border: 1px solid var(--av-border);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  transition: border-color var(--av-transition);
  text-decoration: none !important;
}
.av-post-card:hover { border-color: var(--av-accent); }

.av-cat-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--av-accent);
  text-decoration: none;
  margin-bottom: 0.5rem;
  display: block;
}

.av-post-card-title {
  font-family: var(--av-font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--av-text) !important;
  line-height: 1.4;
  margin: 0 0 0.5rem;
  flex: 1;
  text-decoration: none !important;
}

.av-post-card-meta {
  font-size: 0.8125rem;
  color: var(--av-muted);
  margin-top: 0.75rem;
}

.av-post-card-tags {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 0.625rem;
}

/* Cards secundarias con barra lateral */
.av-posts-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.av-post-card-accent {
  background: var(--av-surf2);
  border: 1px solid var(--av-border);
  border-radius: 10px;
  padding: 1.125rem 1.25rem;
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  transition: border-color var(--av-transition);
  text-decoration: none !important;
}
.av-post-card-accent:hover { border-color: var(--av-accent); }

.av-post-accent-bar {
  width: 3px;
  min-height: 48px;
  background: var(--av-accent);
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Section label */
.av-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-muted);
  margin-bottom: 1rem;
  display: block;
}

/* Container del front-page — full width sin márgenes grises */
.page-template-front-page .site-main,
.page-template .site-main,
body.page .site-main {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  width: 100% !important;
}

/* Forzar que el fondo de la página no sea gris */
body.page,
body.home {
  background-color: var(--av-bg) !important;
}

/* Header — borde inferior visible */
.site-header {
  border-bottom: 1px solid var(--av-border) !important;
}

/* Dark mode — hero y cards */
[data-theme="dark"] .av-hero {
  background: var(--av-surf) !important;
  border-color: var(--av-border) !important;
}
[data-theme="dark"] .av-post-card {
  background: var(--av-surf) !important;
  border-color: var(--av-border) !important;
}
[data-theme="dark"] .av-post-card-accent {
  background: var(--av-surf2) !important;
  border-color: var(--av-border) !important;
}

@media (max-width: 900px) {
  .av-posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .av-posts-grid { grid-template-columns: 1fr; }
  .av-posts-secondary { grid-template-columns: 1fr; }
  .av-hero { padding: 1.25rem; }
  .av-hero .post-title, .av-hero h2 { font-size: 1.25rem !important; }
}

/* ============================================================
   AUTHOR PAGE
   ============================================================ */

/* Header del autor */
.av-author-header {
  background: var(--av-surf);
  border-bottom: 1px solid var(--av-border);
  padding: 2.5rem 0;
}

.av-author-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Perfil */
.av-author-profile {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex: 1;
  min-width: 280px;
}

.av-author-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--av-accent-dim);
  border: 2px solid var(--av-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--av-accent-text);
  flex-shrink: 0;
}

.av-author-info { flex: 1; }

.av-author-name {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--av-text) !important;
  margin: 0 0 0.25rem !important;
  line-height: 1.2 !important;
}

.av-author-role {
  font-size: 0.875rem;
  color: var(--av-accent);
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.av-author-bio {
  font-size: 0.9375rem;
  color: var(--av-sub);
  line-height: 1.65;
  margin: 0 0 1rem;
  max-width: 540px;
}

.av-author-links {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.av-author-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--av-sub);
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  padding: 0.35rem 0.75rem;
  text-decoration: none;
  transition: all var(--av-transition);
}

.av-author-link:hover {
  border-color: var(--av-accent);
  color: var(--av-accent);
  background: var(--av-accent-dim);
}

.av-author-link svg { color: var(--av-accent); flex-shrink: 0; }

/* Stats */
.av-author-stats {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-lg);
  align-self: center;
}

.av-stat {
  text-align: center;
}

.av-stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--av-text);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.av-stat-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-muted);
}

/* Posts section */
.av-author-posts {
  padding: 2.5rem 0;
}

.av-author-posts-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Grid de posts del autor — 2 columnas */
.av-author-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.av-post-card-excerpt {
  font-size: 0.875rem;
  color: var(--av-sub);
  line-height: 1.6;
  margin: 0.375rem 0 0;
  flex: 1;
}

/* Paginación */
.av-pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* Dark mode */
[data-theme="dark"] .av-author-header {
  background: var(--av-surf) !important;
  border-bottom-color: var(--av-border) !important;
}

[data-theme="dark"] .av-author-stats {
  background: var(--av-surf2) !important;
  border-color: var(--av-border) !important;
}

[data-theme="dark"] .av-author-link {
  background: var(--av-surf2);
  border-color: var(--av-border);
}

[data-theme="dark"] .av-author-link:hover {
  background: var(--av-accent-dim);
  border-color: var(--av-accent);
  color: var(--av-accent);
}

/* Responsive */
@media (max-width: 768px) {
  .av-author-header-inner { flex-direction: column; }
  .av-author-stats { width: 100%; justify-content: space-around; }
  .av-author-grid { grid-template-columns: 1fr; }
  .av-author-name { font-size: 1.25rem !important; }
}

/* ============================================================
   FOOTER — 3 columnas
   ============================================================ */

.site-footer,
#colophon {
  background: var(--av-surf) !important;
  border-top: 1px solid var(--av-border) !important;
  margin-top: 4rem !important;
  padding: 3rem 0 2rem !important;
  transition: background-color var(--av-transition) !important;
}

/* Ocultar el copyright default de GP */
.site-info,
.copyright,
a[href*="generatepress.com"] {
  display: none !important;
}

.av-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
  align-items: flex-start;
}

/* Columna genérica */
.av-footer-col-title {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-muted);
  margin-bottom: 1rem;
}

/* Col 1 — Logo */
.av-footer-logo {
  font-family: var(--av-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--av-text);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.625rem;
  transition: opacity var(--av-transition);
}
.av-footer-logo:hover { opacity: 0.8; color: var(--av-text); }

.av-logo-a,
.av-logo-v {
  color: var(--av-logo-accent);
}

.av-footer-tagline {
  font-size: 0.8125rem;
  color: var(--av-sub);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.av-footer-copy {
  font-size: 0.75rem;
  color: var(--av-muted);
  margin: 0;
}

/* Col 2 — Nav */
.av-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.av-footer-nav a {
  font-size: 0.875rem;
  color: var(--av-sub);
  text-decoration: none;
  transition: color var(--av-transition);
}
.av-footer-nav a:hover { color: var(--av-accent); }

/* Col 3 — Social */
.av-footer-social {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.av-footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--av-sub);
  text-decoration: none;
  transition: color var(--av-transition);
}
.av-footer-social-link:hover { color: var(--av-accent); }
.av-footer-social-link svg { flex-shrink: 0; }

/* Dark mode */
[data-theme="dark"] .site-footer,
[data-theme="dark"] #colophon {
  background: var(--av-surf) !important;
  border-top-color: var(--av-border) !important;
}

[data-theme="dark"] .av-footer-logo { color: var(--av-text); }

/* Responsive */
@media (max-width: 768px) {
  .av-footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}