/*
================================================================================
  Unified Stylesheet for elprompt.co
================================================================================
  This file follows a semantic, component-based CSS architecture. It centralizes
  design tokens and defines reusable classes for layout, components, and utilities,
  drastically cleaning up the HTML. All code comments are in English for best
  practices.

  TABLE OF CONTENTS
  -----------------
  1. DESIGN TOKENS (:root)
  2. BASE & RESET STYLES
  3. LAYOUT & GRID
  4. COMPONENTS
  5. UTILITY CLASSES
  6. PAGE-SPECIFIC STYLES
  7. BLOG PAGE ENHANCEMENTS
  8. BLOG INDEX PAGE
================================================================================
*/

/* 1. DESIGN TOKENS (:root)
-------------------------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #6a00f4;
  --color-primary-dark: #581c87;
  --color-accent: #fbbf24;
  --color-dark-bg: #0f002b;
  --color-light-bg: #eceaff;
  --color-page-bg: #f2f2f2;

  --color-text-light: #ffffff;
  --color-text-dark: #111827;
  --color-text-body: #374151;
  --color-text-muted: #7a7a7a;
  --color-border: #e5e7eb;

  /* Typography */
  --font-family-base: "Inter", sans-serif;
  --font-size-base: 1rem; /* 16px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing & Sizing */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2.5rem; /* 40px */
  --spacing-xxl: 4rem; /* 64px */

  /* Borders & Radii */
  --border-radius-md: 0.5rem; /* 8px */
  --border-radius-lg: 0.75rem; /* 12px */
  --border-width: 1px;

  /* Shadows & Transitions */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --transition-base: all 0.3s ease-in-out;
}

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

html,
body {
  scroll-behavior: smooth;
  /* ADDED: Global safeguard against overflow is still a good practice */
  overflow-x: hidden;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-page-bg);
  color: var(--color-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessible focus outline */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--border-radius-md);
}

/* 3. LAYOUT & GRID
-------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.section {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
}

/* 4. COMPONENTS
-------------------------------------------------------------- */

/* Header */
.header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--border-width) solid var(--color-border);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem; /* 80px */
}
.header__brand {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
}
.header__nav {
  display: none;
}
@media (min-width: 768px) {
  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }
}
.header__mobile-toggle {
  display: block;
}
@media (min-width: 768px) {
  .header__mobile-toggle {
    display: none;
  }
}

/* Mobile Navigation */
.mobile-nav {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-lg);
  border-top: var(--border-width) solid var(--color-border);
}
.mobile-nav__link {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: var(--transition-base);
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
  background-color: var(--color-light-bg);
  color: var(--color-primary);
}
.mobile-nav__link.is-active {
  background-color: var(--color-light-bg);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
.mobile-nav__cta {
  display: block;
  width: 100%;
  margin-top: var(--spacing-md);
}

/* Navigation Link */
.nav-link {
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  transition: var(--transition-base);
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-primary);
  background-color: var(--color-light-bg);
}
.nav-link.is-active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Button */
.btn {
  display: inline-block;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  border-radius: var(--border-radius-lg);
  padding: 0.875rem 1.75rem; /* 14px 28px */
  text-align: center;
  border: 2px solid transparent;
  transition: var(--transition-base);
  cursor: pointer;
}
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  box-shadow: var(--shadow-lg);
}
.btn--primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-text-dark);
}
.btn--accent:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn--outline:hover {
  background-color: var(--color-light-bg);
  border-color: var(--color-light-bg);
}

/* Card */
/* Card */
.card {
  background-color: var(--color-text-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-xl);
  transition: var(--transition-base);
  max-width: 100%;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}
.card__icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  border-radius: var(--border-radius-md);
  background-color: var(--color-light-bg);
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}
.card__title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-sm);
}
.card--blog {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.card--blog img {
  width: 100%;
  height: 224px;
  object-fit: cover;
}
.card__content {
  padding: var(--spacing-lg);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.card__tag {
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

/* =========================================================
   Card Excerpt — full text, theme-aware, accessible style
   ========================================================= */
.card__excerpt {
  color: var(--color-text-muted); /* tono secundario */
  font-family: var(--font-family-base);
  font-size: 0.9375rem; /* ~15px, ligeramente menor al cuerpo */
  font-weight: var(--font-weight-normal);
  line-height: 1.7;
  margin-top: var(--spacing-md); /* mt-3 → 1rem */
  overflow: visible;              /* ✅ mostrar texto completo */
  display: block;                 /* ✅ quitar el contenedor de clamp */
  -webkit-line-clamp: unset;      /* ✅ desactivar limitador */
  -webkit-box-orient: unset;      /* ✅ desactivar orientación */
  text-overflow: unset;           /* ✅ eliminar puntos suspensivos */
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* Hover: mejora la legibilidad sin perder jerarquía */
.card:hover .card__excerpt {
  color: var(--color-text-body);
  opacity: 0.95;
}

/* Featured post variant — más espaciamiento, tono sutil */
.featured-post .card__excerpt {
  color: var(--color-text-body);
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.8;
  margin-top: var(--spacing-sm);
}



/* Form Elements */
.form-input {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}
.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-light-bg);
  outline: none;
}
.form-input::placeholder {
  color: var(--color-text-muted);
}

/* Fix: ensure CTA register form inputs show text correctly */
#cta-register .form-input,
#cta-register input,
#cta-register textarea {
  color: #1f2937 !important; /* gris oscuro elegante */
}

#cta-register .form-input::placeholder,
#cta-register input::placeholder,
#cta-register textarea::placeholder {
  color: #9ca3af !important; /* gris claro */
}

#cta-register label,
#cta-register .entry__label {
  color: #1f2937 !important;
}


/* FAQ Accordion (CSS-only) */
.faq-accordion details {
  background-color: var(--color-text-light);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-lg);
  transition: var(--transition-base);
}
.faq-accordion details:hover {
  border-color: var(--color-light-bg);
  box-shadow: var(--shadow-lg);
}
.faq-accordion summary {
  padding: var(--spacing-lg);
  font-weight: var(--font-weight-medium);
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none; /* Remove default marker */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition-base);
}
.faq-accordion summary::-webkit-details-marker {
  display: none; /* Hide for Safari */
}
.faq-accordion summary:hover {
  color: var(--color-primary);
}
.faq-accordion summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--color-primary);
  transition: transform 0.3s ease;
}
.faq-accordion details[open] summary {
  color: var(--color-primary);
}
.faq-accordion details[open] summary::after {
  transform: rotate(45deg);
}
.faq-accordion .faq-answer {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  border-top: var(--border-width) solid var(--color-border);
}

/* Footer */
.footer {
  background-color: var(--color-text-dark);
  color: var(--color-text-light);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

/* 5. UTILITY CLASSES
-------------------------------------------------------------- */
.text-primary {
  color: var(--color-primary);
}
.text-accent {
  color: var(--color-accent);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-light {
  color: var(--color-text-light);
}
.text-body {
  color: var(--color-text-body);
}
.bg-primary {
  background-color: var(--color-primary);
}
.bg-light {
  background-color: var(--color-light-bg);
}
.text-balance {
  text-wrap: balance;
}

/* For screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 6. PAGE-SPECIFIC STYLES
-------------------------------------------------------------- */

/* Home: Hero Gradient */
.hero-gradient {
  position: relative;
  overflow: hidden;
  background-color: var(--color-dark-bg);
}
.hero-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 20% 30%,
      hsla(263, 98%, 48%, 0.3) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      hsla(263, 98%, 48%, 0.2) 0%,
      transparent 40%
    );
  animation: pulse-gradient 15s ease-in-out infinite;
  z-index: 1;
}
@keyframes pulse-gradient {
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}
.hero-content {
  position: relative;
  z-index: 2;
}

/* Blog: Reading Progress Bar */
#progressBarContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 100;
}
#progressBar {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
}

/* Blog: Article Content Typography */
.article-content {
  padding: var(--spacing-lg);
}
@media (min-width: 640px) {
  .article-content {
    padding: var(--spacing-xl);
  }
}
.article-content > p:first-of-type::first-letter {
  font-size: 4.5rem;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-primary);
  float: left;
  line-height: 0.8;
  margin-right: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}
.article-content h1,
.article-content h2,
.article-content h3 {
  text-wrap: balance;
}
.article-content h2 {
  font-size: 1.875rem;
  font-weight: var(--font-weight-bold);
  margin: var(--spacing-xl) 0 var(--spacing-md);
}
.article-content h3 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}
.article-content p {
  line-height: 1.75;
  margin-bottom: var(--spacing-lg);
}
.article-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}
.article-content a:hover {
  color: var(--color-primary-dark);
}
.article-content ul,
.article-content ol {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.article-content li {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-sm);
}
.article-content blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  font-style: italic;
  color: var(--color-text-muted);
}
.article-content pre {
  background-color: var(--color-text-dark);
  color: var(--color-text-light);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  overflow-x: auto;
  margin-bottom: var(--spacing-lg);
}
.article-content code:not(pre > code) {
  background-color: var(--color-light-bg);
  color: var(--color-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 4px;
  font-size: 0.9em;
}

/* Consolidated mobile fixes */
@media (max-width: 640px) {
  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  main > .container > div > header h1 {
    font-size: 2rem;
    line-height: 1.25;
  }

  .article-content > p:first-of-type::first-letter {
    font-size: 3.25rem;
    line-height: 0.75;
    margin-right: var(--spacing-sm);
  }
}

/* 7. BLOG PAGE ENHANCEMENTS
-------------------------------------------------------------- */

.category-link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  text-decoration: none;
}
.category-link:hover {
  text-decoration: underline;
}

/* Author Box Component */
.author-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background-color: var(--color-light-bg);
  border-radius: var(--border-radius-lg);
  margin-top: var(--spacing-xxl);
}
@media (min-width: 640px) {
  .author-box {
    flex-direction: row;
    text-align: left;
    gap: var(--spacing-xl);
  }
}
.author-box__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  flex-shrink: 0;
}
.author-box__details {
  display: flex;
  flex-direction: column;
}
.author-box__title {
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.author-box__name {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin-top: var(--spacing-xs);
}
.author-box__bio {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
  max-width: 65ch;
}
.author-box__socials {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  justify-content: center;
}
@media (min-width: 640px) {
  .author-box__socials {
    justify-content: flex-start;
  }
}
.social-link {
  color: var(--color-text-muted);
  transition: var(--transition-base);
}
.social-link:hover {
  color: var(--color-primary);
  transform: scale(1.1);
}
.social-link svg {
  width: 24px;
  height: 24px;
}

/* Sidebar & Widgets */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: 7rem; /* header height + some margin */
  }
}

.widget {
  background-color: var(--color-text-light);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
}

.widget__title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-light-bg);
}

.widget-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  counter-reset: popular-posts-counter;
}

.widget-list li {
  counter-increment: popular-posts-counter;
  border-bottom: 1px solid var(--color-border);
}
.widget-list li:last-child {
  border-bottom: none;
}

.widget-list__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-xs);
  color: var(--color-text-body);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: var(--transition-base);
  position: relative;
}

.widget-list__link::before {
  content: "0" counter(popular-posts-counter);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  color: var(--color-primary);
  background-color: var(--color-light-bg);
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: var(--transition-base);
}

.widget-list__link::after {
  content: "→";
  position: absolute;
  right: var(--spacing-xs);
  font-size: 1.5rem;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-10px);
  transition: var(--transition-base);
}

.widget-list__link:hover {
  background-color: var(--color-light-bg);
  color: var(--color-primary);
  transform: translateX(4px);
}
.widget-list__link:hover::before {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}
.widget-list__link:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-lg);
  border-top: var(--border-width) solid var(--color-border);
}

.tag-list__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin-right: var(--spacing-sm);
}

.tag-item {
  display: inline-block;
  background-color: var(--color-light-bg);
  color: var(--color-primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: var(--transition-base);
}
.tag-item:hover {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.related-posts__title {
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--spacing-md);
}

/* =========================================================
   Featured Post — Neutral Tags Style
   ========================================================= */
.featured-post__tags a {
  display: inline-block;
  background-color: var(--color-surface, #f3f4f6);
  color: var(--color-text-dark, #1f2937);
  padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 0.75rem);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  text-decoration: none;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.featured-post__tags a:hover {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  transform: translateY(-1px);
}

/* Optional: subtle border for better contrast */
.featured-post__tags a {
  border: 1px solid
    color-mix(in srgb, var(--color-border, #e5e7eb) 80%, transparent);
}



/* =========================================================
   Card Tags — lightweight neutral variant
   ========================================================= */
.card__tags a {
  display: inline-block;
  font-size: 0.75rem; /* text-xs */
  background-color: var(--color-surface-alt, #f3f4f6); /* bg-gray-100 */
  color: var(--color-text-dark, #1f2937);
  padding: 0.25rem 0.5rem; /* px-2 py-1 */
  border-radius: 0.375rem; /* rounded */
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
}

.card__tags a:hover {
  background-color: color-mix(
    in srgb,
    var(--color-surface-alt, #f3f4f6) 60%,
    var(--color-border, #d1d5db)
  );
  color: var(--color-primary, #6d28d9); /* slight brand touch */
  transform: translateY(-1px);
}

/* Optional subtle border for structure */
.card__tags a {
  border: 1px solid
    color-mix(in srgb, var(--color-border, #e5e7eb) 60%, transparent);
}



/* 8. BLOG INDEX PAGE
-------------------------------------------------------------- */

.blog-hero {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-dark-bg);
  border-bottom: 4px solid var(--color-primary);
}

.featured-post {
  display: grid;
  gap: var(--spacing-xl);
  align-items: center;
}
@media (min-width: 768px) {
  .featured-post {
    grid-template-columns: repeat(2, 1fr);
  }
}

.featured-post__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
}

.featured-post__title {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}
.featured-post__title a {
  color: var(--color-text-dark);
  text-decoration: none;
  transition: var(--transition-base);
}
.featured-post__title a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.featured-post__meta {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-lg);
  font-weight: var(--font-weight-medium);
}

.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-xxl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.pagination__link {
  display: inline-block;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  border-radius: var(--border-radius-lg);
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--color-border);
  color: var(--color-text-body);
  transition: var(--transition-base);
}

.pagination__link:hover {
  background-color: var(--color-light-bg);
  color: var(--color-primary);
  border-color: var(--color-light-bg);
}

.pagination__link.disabled {
  color: var(--color-text-muted);
  background-color: var(--color-page-bg);
  cursor: not-allowed;
  opacity: 0.6;
}
.pagination__link.disabled:hover {
  background-color: var(--color-page-bg);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* ADDED: The definitive structural fix for the blog post layout */
@media (max-width: 1023px) {
  /* This targets all screens smaller than 'lg' (1024px) */
  /* Find the grid container specifically inside the main content of a post */
  main .container.grid {
    display: block; /* Force it to stop being a grid */
  }
}

/*
================================================================================
  9. REUSABLE COMPONENTS (ADDITION)
================================================================================
*/

/* Code Snippet Component */
.code-snippet {
  background-color: var(--color-text-dark);
  color: var(--color-text-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-lg);
}

.code-snippet__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(
    --color-dark-bg
  ); /* A slightly lighter dark for contrast */
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid #374151; /* A subtle separator */
}

.code-snippet__filename {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.code-snippet__button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-text-body);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-base);
}

.code-snippet__button:hover {
  color: var(--color-text-light);
  border-color: var(--color-text-muted);
}

.code-snippet pre {
  margin: 0;
  padding: var(--spacing-lg);
  overflow-x: auto;
}

.code-snippet code {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Utility to hide icons */
.code-snippet .hidden {
  display: none;
}

/* =========================================================
   TAGS PAGE — Adapted to root palette system
   ========================================================= */

.tag-section {
  margin-bottom: 5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  position: relative;
}

.tag-section__header {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(
        --color-primary-light,
        color-mix(in srgb, var(--color-primary) 80%, white 20%)
      )
      100%
  );
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: var(--shadow-md);
  display: inline-block;
  margin-bottom: 2rem;
}

.tag-section__letter {
  color: var(--color-on-primary, #fff);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px
    color-mix(in srgb, var(--color-text-dark) 20%, transparent);
}

/* Optional: sticky headers for long pages */
@media (min-width: 768px) {
  .tag-section__header {
    position: sticky;
    top: var(--header-height, 5rem);
    z-index: 10;
  }
}

.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.tag-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.75rem);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--color-text-dark);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.tag-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.tag-card__title {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
}

.tag-card__count {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* =========================================================
   CATEGORIES PAGE — Compact layout with palette integration
   ========================================================= */

.category-featured {
  scroll-margin-top: 4rem;
}

.category-featured img {
  border-radius: var(--radius-lg, 0.75rem);
  object-fit: cover;
}

.category-featured h2 {
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
  color: var(--color-primary);
}

.category-featured ul li {
  font-size: 0.95rem;
  line-height: 1.5;
}

.category-featured ul li a {
  color: var(--color-text-dark);
  transition: color var(--transition-fast);
}

.category-featured ul li a:hover {
  color: var(--color-primary);
}

.category-featured ul li p {
  color: var(--color-muted);
  margin-top: 0.2rem;
}

.category-featured:nth-child(even) {
  direction: rtl;
}

.category-featured:nth-child(even) > div {
  direction: ltr;
}

/* tighter section rhythm */
.category-featured + .category-featured {
  margin-top: 1rem;
  padding-top: 1rem;
}

/* line-clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Inline tag/category links — improved visibility === */

.article-content a.tag-inline,
.article-content a.category-inline {
  color: color-mix(
    in srgb,
    var(--color-text-dark) 75%,
    var(--color-accent) 25%
  );
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid
    color-mix(in srgb, var(--color-accent) 40%, transparent);
  padding-bottom: 0.05em;
  border-radius: 0.15em;
  transition: color 0.25s ease, border-color 0.25s ease,
    background-color 0.25s ease;
}

/* Hover: realce visible con fondo translúcido y ligero cambio de tono */
.article-content a.tag-inline:hover,
.article-content a.category-inline:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Focus/active: mantiene accesibilidad con contorno visible */
.article-content a.tag-inline:focus-visible,
.article-content a.category-inline:focus-visible {
  outline: 2px solid
    color-mix(in srgb, var(--color-accent) 60%, var(--color-primary) 40%);
  outline-offset: 3px;
}

/* Dark mode refinement */


.article-content a.tag-inline:hover::after,
.article-content a.category-inline:hover::after {
  content: " ↗";
  font-size: 0.8em;
  color: var(--color-accent);
}

/* =========================================================
   Author Box — Correct link behavior (stable on hover)
   ========================================================= */
.author-box__name a {
  all: unset;
  display: inline-block;
  cursor: pointer;
  color: var(--color-text-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  line-height: 1.3;
  padding-bottom: 0.05rem;
  transition: border-color 0.25s ease, color 0.25s ease;
}

/* --- Explicitly override any global link hovers --- */
.author-box__name a:hover,
.author-box__name a:active,
.author-box__name a:focus {
  color: var(--color-text-dark); /* Keep same text color */
  background: transparent !important; /* No background */
  border-bottom-color: var(--color-primary); /* Accent underline */
  text-decoration: none !important; /* Prevent global underline */
  box-shadow: none !important;
  filter: none !important;
}

/* --- Focus-visible for accessibility --- */
.author-box__name a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}



/* =========================================================
   Cleanup: Replaced Inline Classes from main.js
   ========================================================= */

/* Card image (instead of w-full h-56 object-cover) */
.card__image {
  width: 100%;
  height: 14rem; /* 224px */
  object-fit: cover;
  border-radius: var(--border-radius-lg);
  transition: var(--transition-base);
}

/* Grid layout for blog cards */
.blog-grid {
  display: grid;
  gap: var(--spacing-lg);
}
@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Pagination container */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-lg);
}

/* Author tag hover underline */
.tag-item:hover {
  text-decoration: underline;
}

/* Blog card hover refinement */
.card--blog:hover {
  box-shadow: var(--shadow-xl);
  transition: var(--transition-base);
}

/* Optional: button spacing helper */
.btn--spaced {
  margin-top: var(--spacing-lg);
}


/* =========================================================
   Explore Buttons — Editorial Minimal Style (root-based)
   ========================================================= */

.explore-wrapper {
  text-align: center;
  margin-top: var(--spacing-xl);
}

.explore-title {
  font-size: 2rem;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
}

.explore-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
}

.explore-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.explore-btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: 9999px;
  background: var(--color-text-light); /* blanco */
  border: var(--border-width) solid var(--color-border);
  color: var(--color-text-dark);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  font-size: 1rem;
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.explore-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Mobile refinement */
@media (max-width: 640px) {
  .explore-buttons {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .explore-btn {
    width: 100%;
  }
}