/* ============================================
DEVENIR — Sistema de Diseño
Neumorphic Modernism · Digital Parchment
============================================ */

/* ---------- Google Fonts ---------- */
@import
url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ============================================
1. TOKENS: Variables CSS globales
============================================ */
:root {
/* Surface */
--surface: #f7f9ff;
--surface-dim: #d7dae0;
--surface-bright: #f7f9ff;
--surface-lowest: #ffffff;
--surface-low: #f1f4fa;
--surface-container: #ebeef4;
--surface-high: #e5e8ee;
--surface-highest: #dfe3e8;

/* Content */
--on-surface: #181c20;
--on-surface-variant: #43474d;
--inverse-surface: #2d3135;
--inverse-on-surface: #eef1f7;

/* Outline */
--outline: #73777e;
--outline-variant: #c3c7ce;

/* Primary */
--primary: #082d4a;
--primary-container: #244361;
--on-primary: #ffffff;
--on-primary-container: #92b0d3;
--inverse-primary: #abc9ed;
--primary-fixed: #d0e4ff;
--primary-fixed-dim: #abc9ed;

/* Secondary */
--secondary: #505f76;
--secondary-container: #d0e1fb;
--on-secondary: #ffffff;
--on-secondary-container: #54647a;

/* Tertiary / Accent cyan */
--tertiary: #002f3c;
--tertiary-container: #004759;
--on-tertiary: #ffffff;
--accent: #0891B2; /* cyan accent */
--on-tertiary-container: #0891B2;

/* Error */
--error: #ba1a1a;
--error-container: #ffdad6;
--on-error: #ffffff;
--on-error-container: #93000a;

/* Background */
--bg: #f7f9ff;
--on-bg: #181c20;

/* Neumorphic Shadows */
--shadow-dark: #D1D9E6;
--shadow-light: #FFFFFF;

/* ---------- Shadows ---------- */
--neu-extruded: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
--neu-carved: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
--neu-active: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
--neu-header: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);

/* ---------- Typography ---------- */
--font-serif: 'Source Serif 4', Georgia, serif;
--font-ui: 'Inter', system-ui, sans-serif;

/* ---------- Border Radius ---------- */
--radius-xs: 0.25rem; /* 4px */
--radius-sm: 0.5rem; /* 8px */
--radius-md: 0.75rem; /* 12px */
--radius-lg: 1rem; /* 16px */
--radius-xl: 1.5rem; /* 24px */
--radius-full: 9999px;

/* ---------- Spacing ---------- */
--space-xs: 4px;
--space-sm: 12px;
--space-md: 24px;
--space-lg: 48px;
--space-xl: 80px;
--gutter: 24px;
--max-w: 1200px;
--content-w: 720px;

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

/* ============================================
19. DARK MODE — Overrides neumórficos
============================================ */

/* Base dark theme */
[data-theme="dark"],
html.dark {
/* Surface invertido */
--surface: #1e2228;
--surface-dim: #15181d;
--surface-bright: #2a2f38;
--surface-lowest: #252a31;
--surface-low: #232830;
--surface-container: #2a2f38;
--surface-high: #323842;
--surface-highest: #3a404c;

/* Content invertido */
--on-surface: #e8ecf1;
--on-surface-variant: #a8adb5;
--inverse-surface: #e8ecf1;
--inverse-on-surface: #1e2228;

/* Outline más suave */
--outline: #6b7280;
--outline-variant: #444a54;

/* Primary ajustado para contraste */
--primary: #abc9ed;
--primary-container: #244361;
--on-primary: #181c20;
--on-primary-container: #d0e4ff;
--inverse-primary: #082d4a;
--primary-fixed: #244361;
--primary-fixed-dim: #082d4a;

/* Secondary */
--secondary: #a8b3c7;
--secondary-container: #3a4555;
--on-secondary: #1e2228;
--on-secondary-container: #c8d4e8;

/* Tertiary / Accent */
--tertiary: #6fd4e6;
--tertiary-container: #004759;
--on-tertiary: #001f26;
--accent: #22d3ee; /* cyan brillante */
--on-tertiary-container: #6fd4e6;

/* Error */
--error: #ffb4ab;
--error-container: #93000a;
--on-error: #690005;
--on-error-container: #ffdad6;

/* Background */
--bg: #15181d;
--on-bg: #e8ecf1;

/* 🔥 Neumorphic Shadows INVERTIDOS para dark mode */
--shadow-dark: #15181d; /* más oscuro que el fondo */
--shadow-light: #3a3f4b; /* más claro que el fondo */

/* Sombras neumórficas recalculadas */
--neu-extruded: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
--neu-carved: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
--neu-active: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
--neu-header: 0 4px 12px rgba(0,0,0,0.4);

/* Ajustes de gradientes para mejor contraste */
--gradient-brand-dark: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
}

/* Ajustes específicos para elementos en dark mode */
[data-theme="dark"] .featured-card__image::after {
background: linear-gradient(to top, rgba(30,34,40,.9) 0%, transparent 60%);
}

[data-theme="dark"] .article-card--wide .card-thumb img {
filter: grayscale(10%) brightness(0.95);
}

[data-theme="dark"] .article-card--wide:hover .card-thumb img {
filter: grayscale(0%) brightness(1);
}

/* Transición suave entre temas */
*, *::before, *::after {
transition: background-color var(--transition-base),
color var(--transition-base),
box-shadow var(--transition-base),
border-color var(--transition-base);
}

/* Evitar transición en scroll/transform para rendimiento */
img, .icon, .fade-in {
transition: none !important;
}

/* ============================================
2. RESET & BASE
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
font-family: var(--font-serif);
background-color: var(--bg);
color: var(--on-surface);
min-height: 100vh;
/* Selection highlight */
}

::selection {
background: var(--accent);
color: #fff;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea { font-family: var(--font-ui); }

/* ============================================
3. UTILIDADES NEUMÓRFICAS (clases reutilizables)
============================================ */

/* Superficies */
.neu-extruded { box-shadow: var(--neu-extruded); }
.neu-carved { box-shadow: var(--neu-carved); }

/* Hover/Active para botones e interactivos */
.neu-btn {
box-shadow: var(--neu-extruded);
background: var(--surface);
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.neu-btn:hover { box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light); }
.neu-btn:active { box-shadow: var(--neu-active); transform: scale(0.98); }

/* Input neumórfico */
.neu-input {
box-shadow: var(--neu-carved);
background: var(--surface);
border: none;
outline: none;
transition: box-shadow var(--transition-fast);
}
.neu-input:focus { box-shadow: var(--neu-active), 0 0 0 2px var(--accent); }

/* ============================================
4. TIPOGRAFÍA
============================================ */
.text-display { font-family: var(--font-serif); font-size: 48px; font-weight: 700; line-height: 56px; letter-spacing:
-0.02em; }
.text-headline { font-family: var(--font-serif); font-size: 32px; font-weight: 600; line-height: 40px; }
.text-body-lg { font-family: var(--font-serif); font-size: 18px; font-weight: 400; line-height: 32px; }
.text-body-md { font-family: var(--font-serif); font-size: 16px; font-weight: 400; line-height: 28px; }
.text-label-lg { font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing:
0.01em; }
.text-label-md { font-family: var(--font-ui); font-size: 12px; font-weight: 500; line-height: 16px; }
.text-btn { font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 20px; }

/* Color helpers */
.c-primary { color: var(--primary); }
.c-secondary { color: var(--secondary); }
.c-accent { color: var(--accent); }
.c-on-surface { color: var(--on-surface); }
.c-muted { color: var(--on-surface-variant); }

/* ============================================
5. LAYOUT HELPERS
============================================ */
.container {
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
}

.content-col {
max-width: var(--content-w);
margin-inline: auto;
}

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-sm { display: flex; align-items: center; gap: var(--space-sm); }
.flex-gap-md { display: flex; align-items: center; gap: var(--space-md); }

/* ============================================
6. GRADIENTE DE MARCA
============================================ */
.gradient-brand { background: linear-gradient(90deg, var(--accent) 0%, var(--primary-container) 100%); }
.gradient-text {
background: linear-gradient(90deg, var(--accent), var(--primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

/* ============================================
7. HEADER / NAV
============================================ */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--surface);
}

.site-header .inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
gap: var(--space-md);
}

.brand {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--primary);
flex-shrink: 0;
}

/* Desktop nav links */
.nav-links { display: none; gap: var(--space-md); }
.nav-links a {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--secondary);
transition: color var(--transition-fast);
padding-bottom: 2px;
}
.nav-links a:hover { color: var(--primary); }
.nav-links a.is-active { color: var(--primary); border-bottom: 2px solid var(--primary); }

/* Search bar */
.search-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px var(--space-sm);
border-radius: var(--radius-full);
}
.search-bar input {
background: transparent;
border: none;
outline: none;
font-family: var(--font-ui);
font-size: 12px;
color: var(--on-surface);
width: 140px;
}
.search-bar input::placeholder { color: var(--secondary); }

/* Header icon buttons */
.icon-btn {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
flex-shrink: 0;
}

/* Avatar */
.avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
overflow: hidden;
border: 2px solid var(--surface);
flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================
8. CHIPS / TABS DE CATEGORÍA
============================================ */
.chip-row {
display: flex;
gap: var(--space-sm);
overflow-x: auto;
padding-bottom: var(--space-sm);
scrollbar-width: none;
-ms-overflow-style: none;
margin-bottom: var(--space-lg);
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
padding: 8px var(--space-md);
border-radius: var(--radius-full);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
transition: color var(--transition-fast), transform var(--transition-fast);
color: var(--secondary);
}
.chip:hover { color: var(--primary); transform: translateY(-1px); }
.chip.is-active { box-shadow: var(--neu-carved); color: var(--accent); }

/* ============================================
9. ARTÍCULO DESTACADO
============================================ */
.featured-card {
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: var(--space-xl);
position: relative;
box-shadow: var(--neu-extruded);
}

.featured-card__image {
height: 280px;
position: relative;
overflow: hidden;
}

.featured-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.featured-card:hover .featured-card__image img { transform: scale(1.04); }

.featured-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8,45,74,.85) 0%, transparent 60%);
}

.featured-card__overlay {
position: absolute;
bottom: var(--space-md);
left: var(--space-md);
right: var(--space-md);
z-index: 1;
}

.featured-badge {
display: inline-block;
padding: 3px 10px;
border-radius: var(--radius-xs);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
margin-bottom: var(--space-sm);
}

.featured-card__title {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
color: #fff;
}

.featured-card__body {
padding: var(--space-md);
background: var(--surface);
}

.featured-card__excerpt {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.7;
color: var(--secondary);
margin-bottom: var(--space-md);
}

.featured-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
}

/* Progress bar */
.progress-track {
height: 6px;
border-radius: var(--radius-full);
overflow: hidden;
box-shadow: var(--neu-carved);
background: var(--surface-low);
}
.progress-fill {
height: 100%;
border-radius: var(--radius-full);
transition: width 1s ease;
}

/* Absolute progress en featured card */
.featured-progress {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 120px;
z-index: 2;
}

/* ============================================
10. CARDS DE ARTÍCULO
============================================ */
.articles-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}

.article-card {
border-radius: var(--radius-lg);
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
box-shadow: var(--neu-extruded);
background: var(--surface);
transition: transform var(--transition-base);
}
.article-card:hover { transform: translateY(-4px); }

.article-card__tag {
display: inline-block;
padding: 3px var(--space-sm);
border-radius: var(--radius-xs);
background: var(--surface-low);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
color: var(--accent);
letter-spacing: 0.01em;
}

.article-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}

.article-card__title {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--primary);
}

.article-card__excerpt {
font-family: var(--font-serif);
font-size: 14px;
line-height: 1.6;
color: var(--secondary);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.article-card__footer {
margin-top: auto;
padding-top: var(--space-sm);
display: flex;
align-items: center;
justify-content: space-between;
}

/* Card horizontal con imagen (span 2 cols) */
.article-card--wide .card-inner {
display: flex;
gap: var(--space-md);
}

.article-card--wide .card-thumb {
width: 120px;
height: 120px;
border-radius: var(--radius-md);
overflow: hidden;
flex-shrink: 0;
box-shadow: var(--neu-carved);
}
.article-card--wide .card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(30%);
opacity: 0.9;
transition: filter var(--transition-base), opacity var(--transition-base);
}
.article-card--wide:hover .card-thumb img { filter: grayscale(0); opacity: 1; }

.article-card--wide .card-content {
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}

/* Read CTA link */
.read-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--primary);
transition: color var(--transition-fast), gap var(--transition-fast);
}
.read-link:hover { color: var(--accent); gap: 8px; }

/* Bookmark btn */
.bookmark-btn {
padding: var(--space-sm);
border-radius: var(--radius-full);
color: var(--accent);
transition: color var(--transition-fast);
}
.bookmark-btn:hover { color: var(--primary); }

/* ============================================
11. SIDEBAR
============================================ */
.sidebar {
display: none;
flex-direction: column;
width: 240px;
flex-shrink: 0;
gap: var(--space-lg);
}

.sidebar-profile {
border-radius: var(--radius-xl);
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
box-shadow: var(--neu-extruded);
background: var(--surface);
}

.sidebar-profile__name {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 600;
color: var(--primary);
}
.sidebar-profile__role {
font-family: var(--font-ui);
font-size: 12px;
color: var(--secondary);
}

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }

.sidebar-nav a {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm);
border-radius: var(--radius-md);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
color: var(--secondary);
transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-nav a:hover { background: var(--surface-low); color: var(--primary); }
.sidebar-nav a.is-active { box-shadow: var(--neu-carved); color: var(--primary); font-weight: 700; }

.sidebar-footer {
margin-top: auto;
border-top: 1px solid rgba(115,119,126,.15);
padding-top: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.sidebar-footer a {
font-family: var(--font-ui);
font-size: 12px;
color: var(--secondary);
display: flex;
align-items: center;
gap: 8px;
transition: color var(--transition-fast);
}
.sidebar-footer a:hover { color: var(--primary); }

/* ============================================
12. BOTÓN "CARGAR MÁS"
============================================ */
.load-more-wrapper { margin-top: var(--space-xl); display: flex; justify-content: center; }

.load-more-btn {
padding: var(--space-sm) var(--space-xl);
border-radius: var(--radius-full);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--primary);
display: flex;
align-items: center;
gap: var(--space-sm);
transition: color var(--transition-fast);
}
.load-more-btn:hover { color: var(--accent); }

/* Spinner animation */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 3s linear infinite; }

/* ============================================
13. FOOTER
============================================ */
.site-footer {
margin-top: var(--space-xl);
border-top: 1px solid rgba(195,199,206,.3);
background: var(--surface);
}
.site-footer .inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
padding-block: var(--space-lg);
text-align: center;
}
.site-footer__brand {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--primary);
}
.site-footer__copy {
font-family: var(--font-serif);
font-size: 14px;
color: var(--secondary);
}
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.site-footer__links a {
font-family: var(--font-serif);
font-size: 14px;
color: var(--secondary);
transition: color var(--transition-fast);
}
.site-footer__links a:hover { color: var(--primary); }

/* ============================================
14. NAV MÓVIL (Bottom bar)
============================================ */
.mobile-nav {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--surface);
box-shadow: 0 -6px 12px var(--shadow-dark);
padding: var(--space-sm) var(--space-md);
z-index: 50;
}

.mobile-nav a {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--secondary);
font-family: var(--font-ui);
font-size: 10px;
transition: color var(--transition-fast);
}
.mobile-nav a.is-active { color: var(--accent); }
.mobile-nav a:hover { color: var(--primary); }

/* ============================================
15. MATERIAL SYMBOLS helper
============================================ */
.icon {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
user-select: none;
}
.icon--sm { font-size: 18px; }
.icon--lg { font-size: 28px; }
.icon--xl { font-size: 32px; }

/* Filled variant */
.icon--fill { font-variation-settings: 'FILL' 1; }

/* ============================================
16. MISCELÁNEOS
============================================ */
.dot-separator {
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--outline-variant);
vertical-align: middle;
margin-inline: 6px;
}

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

/* ============================================
17. RESPONSIVE
============================================ */

/* Tablet → 768px */
@media (min-width: 768px) {
.featured-card__image { height: 320px; }
.featured-card__title { font-size: 28px; }

.articles-grid { grid-template-columns: 1fr 1fr; }
.article-card--wide { grid-column: span 2; }

.nav-links { display: flex; }
.search-bar { display: flex; }
.mobile-nav { display: none; }

.site-footer .inner {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}

/* Desktop → 1024px */
@media (min-width: 1024px) {
.sidebar { display: flex; }

.brand { font-size: 32px; }

.featured-card__title { font-size: 32px; }

/* Main layout: sidebar + content */
.main-layout {
display: flex;
flex-direction: row;
gap: var(--space-xl);
}

.main-content { flex: 1; min-width: 0; }
}

/* Oculta en mobile */
@media (max-width: 767px) {
.hide-mobile { display: none !important; }
.search-bar { display: none; }

/* padding de contenido para no solapar con bottom nav */
main { padding-bottom: 80px; }

.text-display { font-size: 32px; line-height: 40px; }
.text-headline { font-size: 26px; line-height: 34px; }

.article-card--wide .card-inner { flex-direction: row; }
.article-card--wide .card-thumb { width: 96px; height: 96px; }
}

/* ============================================
18. VISTA DE ARTÍCULO — Componentes nuevos
============================================ */

/* ── Contenedor de lectura centrado ── */
.reading-layout {
max-width: var(--content-w); /* 720px */
margin-inline: auto;
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
}

/* ── Breadcrumb / back link ── */
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: var(--secondary);
margin-bottom: var(--space-lg);
transition: color var(--transition-fast), gap var(--transition-fast);
}
.back-link:hover { color: var(--accent); gap: 10px; }

/* ── Cabecera del artículo ── */
.article-header { text-align: center; margin-bottom: var(--space-lg); }

.article-category-badge {
display: inline-block;
padding: 4px var(--space-md);
border-radius: var(--radius-full);
box-shadow: var(--neu-carved);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: var(--space-md);
}

.article-title {
font-family: var(--font-serif);
font-size: clamp(28px, 5vw, 52px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--primary);
margin-bottom: var(--space-md);
}

.article-subtitle {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
line-height: 1.7;
color: var(--secondary);
margin-bottom: var(--space-lg);
max-width: 560px;
margin-inline: auto;
}

/* ── Meta del autor ── */
.article-meta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
}

.article-meta__avatar {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
overflow: hidden;
box-shadow: var(--neu-extruded);
flex-shrink: 0;
}
.article-meta__avatar img { width: 100%; height: 100%; object-fit: cover; }

.article-meta__name {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 700;
color: var(--primary);
display: block;
}
.article-meta__info {
font-family: var(--font-ui);
font-size: 12px;
color: var(--secondary);
display: block;
margin-top: 2px;
}

/* ── Hero image ── */
.article-hero {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--neu-extruded);
padding: 12px;
background: var(--surface);
margin-bottom: var(--space-xl);
}
.article-hero img {
width: 100%;
height: clamp(220px, 40vw, 480px);
object-fit: cover;
border-radius: calc(var(--radius-xl) - 6px);
display: block;
}

/* ── Cuerpo del artículo (tipografía editorial) ── */
.article-body {
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.85;
color: var(--on-surface);
}

.article-body p { margin-bottom: var(--space-md); }

.article-body h2 {
font-family: var(--font-serif);
font-size: clamp(20px, 3vw, 28px);
font-weight: 600;
line-height: 1.3;
color: var(--primary);
margin-top: var(--space-lg);
margin-bottom: var(--space-sm);
}

.article-body h3 {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 600;
color: var(--primary);
margin-top: var(--space-md);
margin-bottom: var(--space-sm);
}

/* Blockquote */
.article-body blockquote,
.article-blockquote {
margin: var(--space-lg) 0;
padding: var(--space-md) var(--space-lg);
border-left: 4px solid var(--accent);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
box-shadow: var(--neu-extruded);
font-style: italic;
font-size: 19px;
line-height: 1.7;
color: var(--primary);
}

/* Galería incrustada */
.article-gallery {
margin: var(--space-lg) calc(-1 * var(--space-md));
padding: var(--space-lg) var(--space-md);
background: var(--surface-low);
border-radius: var(--radius-xl);
box-shadow: var(--neu-carved);
}

.article-gallery__title {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--primary);
text-align: center;
margin-bottom: var(--space-md);
}

.article-gallery__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}

.gallery-item {
border-radius: var(--radius-lg);
padding: 10px;
background: var(--surface);
box-shadow: var(--neu-extruded);
cursor: zoom-in;
transition: transform var(--transition-base);
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: calc(var(--radius-lg) - 4px);
}
.gallery-item figcaption {
margin-top: var(--space-sm);
padding-inline: 4px;
font-family: var(--font-ui);
font-size: 11px;
color: var(--secondary);
}

/* ── Divisor de sección ── */
.article-divider {
border: none;
border-top: 1px solid rgba(195,199,206,.4);
margin: var(--space-lg) 0;
}

/* ── Sección de reacciones ── */
.reactions-section {
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid rgba(195,199,206,.35);
text-align: center;
}

.reactions-title {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--secondary);
margin-bottom: var(--space-md);
}

.reactions-row {
display: flex;
justify-content: center;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}

.reaction-btn {
width: 64px;
height: 64px;
border-radius: var(--radius-lg);
box-shadow: var(--neu-extruded);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
background: var(--surface);
}
.reaction-btn:hover { transform: translateY(-3px); }
.reaction-btn:active { box-shadow: var(--neu-active); transform: scale(0.95); }

.reaction-btn__emoji { font-size: 22px; line-height: 1; transition: transform var(--transition-fast); }
.reaction-btn:hover .reaction-btn__emoji { transform: scale(1.25); }

.reaction-btn__label {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--secondary);
}

/* Contador de reacciones activo */
.reaction-btn.is-active {
box-shadow: var(--neu-carved);
color: var(--accent);
}
.reaction-btn.is-active .reaction-btn__label { color: var(--accent); }

/* ── Caja de comentarios ── */
.comment-box {
border-radius: var(--radius-xl);
padding: var(--space-lg);
box-shadow: var(--neu-extruded);
background: var(--surface);
}

.comment-box__label {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-bottom: var(--space-sm);
display: block;
}

.comment-textarea-wrap {
border-radius: var(--radius-lg);
padding: var(--space-sm);
box-shadow: var(--neu-carved);
background: var(--surface-lowest);
margin-bottom: var(--space-md);
transition: box-shadow var(--transition-fast);
}
.comment-textarea-wrap:focus-within {
box-shadow: var(--neu-active), 0 0 0 2px var(--accent);
}

.comment-textarea-wrap textarea {
width: 100%;
background: transparent;
border: none;
outline: none;
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.7;
color: var(--on-surface);
resize: none;
}
.comment-textarea-wrap textarea::placeholder { color: var(--outline-variant); }

.comment-actions {
display: flex;
align-items: center;
justify-content: space-between;
}

.comment-tools { display: flex; gap: 8px; }

.comment-tool-btn {
padding: 8px;
border-radius: var(--radius-md);
box-shadow: var(--neu-extruded);
color: var(--secondary);
background: var(--surface);
transition: color var(--transition-fast);
}
.comment-tool-btn:hover { color: var(--accent); }

.comment-submit-btn {
padding: 10px var(--space-lg);
border-radius: var(--radius-md);
background: var(--primary);
color: #fff;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
box-shadow: var(--neu-extruded);
transition: background var(--transition-fast), transform var(--transition-fast);
}
.comment-submit-btn:hover { background: var(--primary-container); }
.comment-submit-btn:active { transform: scale(0.97); }

/* ── Panel "Compartir" ── */
.share-panel {
display: flex;
flex-direction: column;
gap: var(--space-sm);
min-width: 160px;
}
.share-panel__title {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--secondary);
}
.share-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
}
.share-btn {
padding: var(--space-sm);
border-radius: var(--radius-md);
box-shadow: var(--neu-extruded);
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary);
transition: color var(--transition-fast), transform var(--transition-fast);
}
.share-btn:hover { color: var(--accent); transform: translateY(-2px); }
.share-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ── Layout interno del comment-box en desktop ── */
.comment-box__inner {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}

/* ── Barra de progreso de lectura (top de página) ── */
.reading-progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
z-index: 100;
transition: width .1s linear;
}

/* ── Artículos relacionados ── */
.related-section {
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid rgba(195,199,206,.35);
}

.related-title {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--secondary);
margin-bottom: var(--space-md);
}

.related-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}

.related-card {
display: flex;
gap: var(--space-sm);
padding: var(--space-sm);
border-radius: var(--radius-lg);
box-shadow: var(--neu-extruded);
background: var(--surface);
transition: transform var(--transition-base);
}
.related-card:hover { transform: translateY(-3px); }

.related-card__thumb {
width: 72px;
height: 72px;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--neu-carved);
flex-shrink: 0;
}
.related-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.related-card__body { display: flex; flex-direction: column; justify-content: center; gap: 4px; }

.related-card__tag {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}

.related-card__title {
font-family: var(--font-serif);
font-size: 14px;
font-weight: 600;
color: var(--primary);
line-height: 1.35;
}

.related-card__meta {
font-family: var(--font-ui);
font-size: 11px;
color: var(--secondary);
}

/* ── Responsive para artículo ── */
@media (min-width: 768px) {
.article-gallery__grid { grid-template-columns: 1fr 1fr; }
.related-grid { grid-template-columns: 1fr 1fr 1fr; }
.comment-box__inner { flex-direction: row; align-items: flex-start; }
.share-panel { min-width: 180px; }
}

@media (max-width: 767px) {
.article-gallery {
margin-inline: calc(-1 * var(--space-sm));
padding-inline: var(--space-sm);
}
.comment-box { padding: var(--space-md); }
}

/* ============================================
   19. DARK MODE — Overrides neumórficos
   ============================================ */

/* Base dark theme */
[data-theme="dark"],
html.dark {
  /* Surface invertido */
  --surface:                  #1e2228;
  --surface-dim:              #15181d;
  --surface-bright:           #2a2f38;
  --surface-lowest:           #252a31;
  --surface-low:              #232830;
  --surface-container:        #2a2f38;
  --surface-high:             #323842;
  --surface-highest:          #3a404c;

  /* Content invertido */
  --on-surface:               #e8ecf1;
  --on-surface-variant:       #a8adb5;
  --inverse-surface:          #e8ecf1;
  --inverse-on-surface:       #1e2228;

  /* Outline más suave */
  --outline:                  #6b7280;
  --outline-variant:          #444a54;

  /* Primary ajustado para contraste */
  --primary:                  #abc9ed;
  --primary-container:        #244361;
  --on-primary:               #181c20;
  --on-primary-container:     #d0e4ff;
  --inverse-primary:          #082d4a;
  --primary-fixed:            #244361;
  --primary-fixed-dim:        #082d4a;

  /* Secondary */
  --secondary:                #a8b3c7;
  --secondary-container:      #3a4555;
  --on-secondary:             #1e2228;
  --on-secondary-container:   #c8d4e8;

  /* Tertiary / Accent */
  --tertiary:                 #6fd4e6;
  --tertiary-container:       #004759;
  --on-tertiary:              #001f26;
  --accent:                   #22d3ee;          /* cyan brillante */
  --on-tertiary-container:    #6fd4e6;

  /* Error */
  --error:                    #ffb4ab;
  --error-container:          #93000a;
  --on-error:                 #690005;
  --on-error-container:       #ffdad6;

  /* Background */
  --bg:                       #15181d;
  --on-bg:                    #e8ecf1;

  /*  Neumorphic Shadows INVERTIDOS para dark mode */
  --shadow-dark:              #15181d;          /* más oscuro que el fondo */
  --shadow-light:             #3a3f4b;          /* más claro que el fondo */

  /* Sombras neumórficas recalculadas */
  --neu-extruded:  4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
  --neu-carved:    inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  --neu-active:    inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
  --neu-header:    0 4px 12px rgba(0,0,0,0.4);

  /* Ajustes de gradientes para mejor contraste */
  --gradient-brand-dark: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
}

/* Ajustes específicos para elementos en dark mode */
[data-theme="dark"] .featured-card__image::after {
  background: linear-gradient(to top, rgba(30,34,40,.9) 0%, transparent 60%);
}

[data-theme="dark"] .article-card--wide .card-thumb img {
  filter: grayscale(10%) brightness(0.95);
}

[data-theme="dark"] .article-card--wide:hover .card-thumb img {
  filter: grayscale(0%) brightness(1);
}

/* Transición suave entre temas */
*, *::before, *::after {
  transition: background-color var(--transition-base), 
              color var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

/* Evitar transición en scroll/transform para rendimiento */
img, .icon, .fade-in {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Indicador de tema en el toggle (opcional) */
.js-theme-toggle::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.js-theme-toggle:hover::after {
  opacity: 1;
}