/*
Theme Name: Monitor Garage
Theme URI: https://monitorgarage.com
Author: Monitor Garage
Author URI: https://monitorgarage.com
Description: Tema WordPress para Monitor Garage - Blog de tecnología, reviews y noticias
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monitorgarage
Tags: blog, responsive, custom-colors, custom-logo, technology, reviews
*/

/* ==========================================================================
   1. ANIMACIONES Y TRANSICIONES
   ========================================================================== */

/* Transiciones suaves para elementos interactivos.
   Limitadas a elementos donde realmente aplican (no en SVG, <path>, scrollbars, etc.) */
a, button, input, select, textarea,
.btn, [class*="btn-"],
[role="button"],
.post-card, .mg-cat-card, .mg-cat-action, .mg-cat-chip,
.theme-toggle, .nav-link, .menu a, .primary-nav a {
  transition: color .2s ease-out, background-color .2s ease-out,
              border-color .2s ease-out, transform .2s ease-out,
              box-shadow .2s ease-out;
}

/* Animación de entrada para contenido */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Aplicar animaciones a elementos principales.
   .site-content combina la animación de entrada, la transición entre páginas
   y el background-attachment para evitar parpadeo en esquinas redondeadas. */
.site-content {
  animation: fadeInUp .4s ease-out;
  transition: opacity .2s ease-out, transform .2s ease-out;
  background-attachment: local;
  will-change: opacity, transform;
}

.post-card {
  animation: fadeInUp .3s ease-out;
}

/* Staggered animation usando :nth-child para evitar 6 reglas separadas */
.post-card:nth-child(n) { animation-delay: calc(.05s * var(--i, 1)); }
.post-card:nth-child(1) { --i: 1; }
.post-card:nth-child(2) { --i: 2; }
.post-card:nth-child(3) { --i: 3; }
.post-card:nth-child(4) { --i: 4; }
.post-card:nth-child(5) { --i: 5; }
.post-card:nth-child(6) { --i: 6; }

/* Animación para el header */
.desktop-header {
  animation: slideInLeft .3s ease-out;
}

.mobile-header {
  animation: slideInRight .3s ease-out;
}

/* ==========================================================================
   TRANSICIONES ENTRE PÁGINAS
   ========================================================================== */

/* Estado de carga para evitar mostrar fondo del header */
.site-content.loading {
  opacity: .7;
  transform: translateY(10px);
}

/* Overlay sutil durante transición de página */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.3);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease-out;
  pointer-events: none;
}

.page-transition-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modo oscuro para overlay */
body.dark-theme .page-transition-overlay {
  background: rgba(0,0,0,.3);
}

/* Animación de entrada más suave para nuevo contenido */
.site-content.page-loaded {
  animation: fadeInUp .4s ease-out;
}

/* ==========================================================================
   LOADING STATES Y SPINNERS
   ========================================================================== */

/* Spinner principal */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* Reglas comunes a todos los spinners (animación giratoria circular) */
.loading-spinner,
.btn-loading::after,
.loading-overlay .spinner,
.posts-loading .spinner {
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
}

/* Spinner para formularios */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
}

/* Spinner para botones */
.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-overlay .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,.3);
  border-top-color: var(--color-coffee-400);
}

/* Loading para posts */
.posts-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.posts-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-coffee-200);
  border-top-color: var(--color-coffee-600);
}

/* Skeleton loading para cards */
.skeleton-card {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: .5rem;
  height: 200px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Modo oscuro para loading */
body.dark-theme .skeleton-card {
  background: linear-gradient(90deg, #404040 25%, #505050 50%, #404040 75%);
  background-size: 200% 100%;
}

body.dark-theme .loading-overlay {
  background: rgba(0,0,0,.8);
}

body.dark-theme .posts-loading .spinner {
  border-color: #404040;
  border-top-color: var(--color-coffee-400);
}

/* ==========================================================================
   BREADCRUMBS - NAVEGACIÓN DE MIGAS DE PAN
   ========================================================================== */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1rem 0 2rem;
  padding: .75rem 1rem;
  background: var(--color-coffee-50);
  border-radius: .5rem;
  border: 1px solid var(--color-coffee-200);
  font-size: .875rem;
  color: var(--color-coffee-600);
}

.breadcrumbs a {
  color: var(--color-coffee-600);
  text-decoration: none;
  transition: color .3s ease;
}

.breadcrumbs a:hover {
  color: var(--color-coffee-800);
  text-decoration: underline;
}

.breadcrumbs .separator {
  color: var(--color-coffee-400);
  margin: 0 .25rem;
}

.breadcrumbs .current {
  color: var(--color-coffee-800);
  font-weight: 500;
}

/* Iconos para breadcrumbs */
.breadcrumbs .home-icon::before {
  content: "🏠";
  margin-right: .25rem;
}

.breadcrumbs .category-icon::before {
  content: "📁";
  margin-right: .25rem;
}

.breadcrumbs .post-icon::before {
  content: "📄";
  margin-right: .25rem;
}

/* Responsive breadcrumbs */
@media (max-width: 768px) {
  .breadcrumbs {
    font-size: .75rem;
    padding: .5rem .75rem;
    margin: .5rem 0 1rem;
    flex-wrap: wrap;
  }
  
  .breadcrumbs .separator {
    margin: 0 .125rem;
  }
}

/* Modo oscuro breadcrumbs */
body.dark-theme .breadcrumbs {
  background: var(--dark-bg-secondary);
  border-color: #404040;
  color: var(--dark-text-secondary);
}

/* ==========================================================================
   2. VARIABLES Y CONFIGURACIÓN BASE
   ========================================================================== */

/* Variables CSS - Paleta de colores y configuración */
:root {
  /* Paleta de colores Coffee */
  --color-coffee-50: #fcf8ee;
  --color-coffee-100: #ebe7de;
  --color-coffee-200: #ead59d;
  --color-coffee-300: #dfbb6a;
  --color-coffee-400: #d7a648;
  --color-coffee-500: #ce8a32;
  --color-coffee-600: #b66b29;
  --color-coffee-700: #975026;
  --color-coffee-800: #7c3f24;
  --color-coffee-900: #5e311e;
  --color-coffee-950: #3a1a0e;
  
  /* Colores modo oscuro */
  --dark-bg-primary: #0f0f0f;
  --dark-bg-secondary: #1a1a1a;
  --dark-text-primary: #f5f5f5;
  --dark-text-secondary: #d1d5db;
  --accent: #ce8a32;
}

/* ==========================================================================
   2. ESTILOS BASE Y TIPOGRAFÍA
   ========================================================================== */

/* Estilos base del body */
body {
  font-family: "Outfit", sans-serif;
  color: var(--dark-bg-primary);
  background: var(--color-coffee-100);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ==========================================================================
   3. MODO OSCURO
   ========================================================================== */

/* Estilos base para modo oscuro */
.dark-theme body {
  color: var(--dark-text-primary);
  background: var(--dark-bg-primary);
}

/* Header modo oscuro */
.dark-theme .site-header, 
.dark-theme .site-footer { 
  background: linear-gradient(135deg, #000000 23%, #272727 100%); 
  color: var(--dark-text-primary);
  margin-top: auto;
  flex-shrink: 0;
}

.dark-theme .desktop-header { 
  background: url('assets/bg_darks.webp') center/cover no-repeat;
}

.dark-theme .desktop-header::before {
  background: linear-gradient(to bottom right, rgba(0,0,0,.2) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.6) 100%);
}

.dark-theme .desktop-header::after {
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(0,0,0,.1) 100%);
}

/* Header móvil en modo oscuro */
.dark-theme .mobile-header {
  background: linear-gradient(180deg, #000000 0%, #1a1a1a 50%, #2d2d2d 100%);
}

.dark-theme .mobile-header.sticky {
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

/* Navegación modo oscuro */

.dark-theme .primary-nav .menu a:hover, 
.dark-theme .primary-nav .menu .current-menu-item > a { 
  background: #262626; 
  color: var(--dark-text-primary); 
}

/* Contenido modo oscuro */
.dark-theme .post-card { 
  background: #171717; 
  border-color: #262626; 
}

/* ==========================================================================
   4. LAYOUT PRINCIPAL Y CONTENEDORES
   ========================================================================== */

/* Contenedor principal */
.container { 
  width: min(1200px, 92%); 
  margin-inline: auto; 
}

/* Nota: la regla legacy de .site-content de aquí se ha eliminado.
   El layout final está definido en la sección "FASE 7" más abajo,
   que sobrescribe completamente con !important. */

/* ==========================================================================
   5. HEADER DESKTOP
   ========================================================================== */

/* Header principal (legacy) */
.site-header { 
  background: url('assets/bg_home.webp') center/cover no-repeat; 
  min-height: 250px; 
  display: flex; 
  align-items: center; 
  width: 100vw; 
  margin-left: calc(-50vw + 50%); 
  margin-top: 0; 
}

/* Header desktop con overlays */
.desktop-header {
  background: url('assets/bg_home.webp') center/cover no-repeat;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 0;
  position: relative;
  padding: 2rem 0;
}

/* Overlays del header desktop */
.desktop-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom right, rgba(0,0,0,.4) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.8) 100%);
  pointer-events: none;
}

.desktop-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, transparent 0%, transparent 50%, rgba(0,0,0,.2) 100%);
  pointer-events: none;
}

/* ==========================================================================
   6. SISTEMA DE GRID DEL HEADER
   ========================================================================== */

/* Contenedor interno del header con grid */
.header-inner { 
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  width: min(1200px, 92%);
  margin: 0 auto;
  gap: 2rem;
  position: relative;
  z-index: 10;
  height: 100%;
  min-height: 200px;
}

/* Columnas separadoras */
.header-spacer {
  /* Columnas separadoras vacías - se usan para espaciado en grid */
  display: block;
}

/* Logo del header */
.header-logo { 
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-self: start;
  margin-right: 3rem;
}

.site-brand { 
  display: inline-block; 
  text-decoration: none; 
  color: inherit; 
  transition: opacity .3s ease;
}

.site-brand:hover {
  opacity: .8;
}

.custom-logo-link img { 
  max-height: 130px; 
  width: auto; 
  display: block; 
  transition: transform .3s ease;
}

.custom-logo-link:hover img {
  transform: scale(1.05);
}

.site-title { 
  font-size: 2.25rem; 
  font-weight: 700; 
  text-transform: uppercase; 
  color: #fff; 
}

/* Navegación principal */
.primary-nav { 
  grid-column: 3;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 1rem; 
  max-width: 600px;
  justify-self: center;
}

.primary-nav .menu a:hover, 
.primary-nav .menu .current-menu-item > a { 
  background: var(--accent); 
  color: #fff; 
}

/* Controles del header (buscador y toggle) */
.header-controls {
  grid-column: 4;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: end;
}

/* ==========================================================================
   7. BUSCADOR
   ========================================================================== */

/* Contenedor del buscador */

.search-input {
  background-color: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 25px;
  padding: 8px 16px;
  color: white;
  font-size: 14px;
  width: 200px;
  transition: all .3s ease;
  backdrop-filter: blur(10px);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-coffee-400);
  background-color: rgba(255,255,255,.2);
  box-shadow: 0 0 0 2px rgba(139,69,19,.3);
}

.search-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all .3s ease;
}

/* ==========================================================================
   8. TOGGLE DE TEMA
   ========================================================================== */

/* Botón toggle de tema */
.theme-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.theme-toggle .sun-icon {
  display: block;
}

.theme-toggle .moon-icon {
  display: none;
}

body.dark-theme .theme-toggle .sun-icon {
  display: none;
}

body.dark-theme .theme-toggle .moon-icon {
  display: block;
}

/* ==========================================================================
   9. HERO SECTION
   ========================================================================== */

/* Sección hero principal */
.hero { 
  position: relative; 
  padding: 1rem 0 1rem; 
  overflow: hidden;
}

.hero-bg { 
  position: absolute; 
  inset: 0; 
  background: transparent; 
}

.hero-overlay { 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
}

/* Títulos del hero */
.site-heading { 
  font-size: clamp(2rem, 5vw, 3.5rem); 
  font-weight: 900; 
  text-transform: uppercase; 
  margin: 0 0 .5rem; 
}

.site-subtitle { 
  color: var(--color-coffee-700); 
  margin: 0 0 .5rem; 
}

.site-intro { 
  color: var(--dark-bg-primary) ; 
  max-width: 60ch; 
}

/* ==========================================================================
   10. GRID DE POSTS
   ========================================================================== */

/* Sección de posts más recientes */
.latest-posts { 
  padding: .25rem 0 3rem; 
  background: #fff; 
}

.posts-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1.5rem; 
}

/* Tarjetas de posts */
.post-card { 
  background: #fff; 
  border-radius: .5rem; 
  overflow: hidden; 
  border: 1px solid #e4e4e7; 
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); 
}

.post-link { 
  display: block; 
  text-decoration: none; 
  color: inherit; 
}

.post-thumb { 
  width: 100%; 
  height: 200px; 
  overflow: hidden; 
}

.post-thumb img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

.post-content { 
  padding: 1rem; 
}

.post-title { 
  font-size: 1rem; 
  font-weight: 700; 
  margin: 0 0 .75rem; 
  color: var(--dark-bg-primary) ; 
  line-height: 1.3; 
}

.post-title a { 
  color: inherit; 
  text-decoration: none; 
}

.post-meta { 
  margin-bottom: .75rem; 
}

.post-date { 
  font-size: .75rem; 
  color: var(--color-coffee-600); 
  margin-bottom: .5rem; 
  display: block; 
}

.post-date span { 
  color: var(--color-coffee-500); 
}

.post-categories { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .25rem; 
  margin-bottom: .75rem; 
}

.post-categories a { 
  background: var(--color-coffee-600); 
  color: var(--color-coffee-100); 
  padding: .125rem .5rem; 
  border-radius: .75rem; 
  text-decoration: none; 
  font-size: .75rem; 
  display: inline-block; 
}

.post-excerpt { 
  color: var(--dark-bg-primary); 
  line-height: 1.5; 
  font-size: .875rem; 
  margin-bottom: .75rem; 
  display: block; 
}

.post-excerpt p { 
  margin: 0; 
}

.post-read-more { 
  display: inline-block; 
  color: var(--color-coffee-900); 
  font-weight: 600; 
  text-decoration: none; 
  font-size: .875rem; 
  margin-top: .5rem; 
}

/* ==========================================================================
   11. PÁGINA INDIVIDUAL DE POST
   ========================================================================== */

/* Estilos para posts individuales */
.single-post { 
  margin-bottom: 3rem; 
}

.post-header { 
  margin-bottom: 2rem; 
}

.post-header .entry-title { 
  font-size: 2.5rem; 
  font-weight: 900; 
  margin-bottom: 1rem; 
}

.post-header .entry-meta { 
  display: flex; 
  gap: 1rem; 
  align-items: center; 
  margin-bottom: 1.5rem; 
}

.post-header .post-date { 
  color: var(--color-coffee-600); 
  font-size: .875rem; 
}

.post-header .post-categories a { 
  background: var(--color-coffee-600); 
  color: var(--color-coffee-100); 
  padding: .25rem .75rem; 
  border-radius: .75rem; 
  text-decoration: none; 
  font-size: .75rem; 
}

/* Imagen destacada */
.post-featured-image { 
  margin-bottom: 2rem; 
  border-radius: .75rem; 
  overflow: hidden; 
}

.post-featured-image img { 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* Contenido del post */
.entry-content { 
  font-size: 1.125rem; 
  line-height: 1.7; 
  color: var(--color-bg-primary);
  margin-bottom: 2rem;
}

.entry-content p { 
  margin-bottom: 1.5rem; 
}

.entry-content h2, 
.entry-content h3, 
.entry-content h4 { 
  color: var(--dark-bg-primary) ; 
  margin: 2rem 0 1rem; 
  font-weight: 700; 
}

.entry-content a { 
  color: var(--color-coffee-600); 
  text-decoration: underline; 
}

.entry-content a:hover { 
  color: var(--color-coffee-700); 
}

.entry-content ul, 
.entry-content ol { 
  margin: 1rem 0; 
  padding-left: 2rem; 
}

.entry-content li { 
  margin-bottom: .5rem; 
}

.entry-content blockquote { 
  border-left: 4px solid var(--color-coffee-400); 
  padding-left: 1.5rem; 
  margin: 2rem 0; 
  font-style: italic; 
  color: var(--color-coffee-700); 
}

/* Footer del post */
.entry-footer { 
  /*border-top: 1px solid var(--color-coffee-200); */
  padding-top: 1.5rem; 
  margin-top: 2rem; 
}

.post-tags { 
  display: flex; 
  align-items: center; 
  gap: .5rem; 
}

.tags-label { 
  font-weight: 600; 
  color: var(--color-coffee-700); 
}

.post-tags a { 
  background: var(--color-coffee-200); 
  color: var(--color-coffee-800); 
  padding: .25rem .75rem; 
  border-radius: .5rem; 
  text-decoration: none; 
  font-size: .875rem; 
}

.post-tags a:hover { 
  background: var(--color-coffee-300); 
}

/* Navegación entre posts */
.post-navigation { 
  display: flex; 
  justify-content: space-between; 
  margin: 3rem 0; 
  padding: 1.5rem 0; 
  border-top: 1px solid var(--color-coffee-200); 
  border-bottom: 1px solid var(--color-coffee-200); 
}

.post-navigation a { 
  color: var(--color-coffee-600); 
  text-decoration: none; 
  font-weight: 600; 
  padding: .75rem 1.5rem; 
  border-radius: .5rem; 
  background: var(--color-coffee-100); 
  transition: all .2s ease; 
}

.post-navigation a:hover { 
  background: var(--color-coffee-200); 
  color: var(--color-coffee-800); 
}

/* ==========================================================================
   12. ICONOS SOCIALES
   ========================================================================== */

/* Contenedor de iconos sociales */
.social-icons { 
  display: flex; 
  justify-content: center; 
  gap: 1rem; 
  margin: 2rem 0; 
  padding: 1.5rem 0; 
}

.social-icons a { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 32px; 
  height: 32px; 
  background: var(--color-coffee-100); 
  color: var(--color-coffee-600); 
  border-radius: 50%; 
  text-decoration: none; 
  transition: all .3s ease; 
  transform: scale(1);
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--color-coffee-200);
}

.social-icons a:hover { 
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  color: white;
  border-color: var(--color-coffee-600);
  transform: scale(1.1);
}

/* Colores específicos para cada red social */
/*.social-icons .youtube:hover { 
  background-color: #ff0000 !important; 
  border-color: #ff0000 !important; 
}

.social-icons .twitter:hover { 
  background-color: #000000 !important; 
  border-color: #000000 !important; 
}

.social-icons .instagram:hover { 
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important; 
  border-color: #bc1888 !important; 
}

.social-icons .twitch:hover { 
  background-color: #9146ff !important; 
  border-color: #9146ff !important; 
}

.social-icons .discord:hover { 
  background-color: #5865f2 !important; 
  border-color: #5865f2 !important; 
}

.social-icons .telegram:hover { 
  background-color: #0088cc !important; 
  border-color: #0088cc !important; 
}

/* ==========================================================================
   13. PÁGINA 404
   ========================================================================== */

/* Sección principal 404 */
.error-404-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 3rem 0;
  background: linear-gradient(135deg, var(--color-coffee-50) 0%, var(--color-coffee-100) 100%);
}

/* Site content en página 404 - mismo gradiente que la sección */
body.error404 .site-content {
  background: linear-gradient(135deg, var(--color-coffee-50) 0%, var(--color-coffee-100) 100%) !important;
}

.error-404-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Visual 404 */
.error-404-visual {
  position: relative;
  margin-bottom: 1rem;
}

.error-404-number {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900;
  color: var(--color-coffee-300);
  margin-bottom: 1rem;
  transform: scale(1);
  transition: transform .3s ease;
}

.error-404-visual:hover .error-404-number {
  transform: scale(1.1);
}

.error-404-emoji {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  font-size: 3rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Mensaje principal */
.error-404-message {
  max-width: 600px;
  margin: 0 auto;
}

.error-404-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-coffee-800);
  margin-bottom: 1rem;
}

.error-404-description {
  font-size: 1.125rem;
  color: var(--color-coffee-600);
  line-height: 1.6;
  margin: 0;
}

/* Botones de acción */
.error-404-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.error-404-btn {
  display: inline-block;
  padding: .75rem 2rem;
  border-radius: .5rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s ease;
  transform: scale(1);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
}

.error-404-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
}

.error-404-btn-primary {
  background: var(--color-coffee-600);
  color: white;
}

.error-404-btn-primary:hover {
  background: var(--color-coffee-700);
  color: white;
}

.error-404-btn-secondary {
  background: var(--color-coffee-100);
  color: var(--color-coffee-800);
  border: 2px solid var(--color-coffee-300);
}

.error-404-btn-secondary:hover {
  background: var(--color-coffee-200);
  color: var(--color-coffee-800);
}

/* Enlaces rápidos */
.error-404-links {
  background: var(--color-coffee-50);
  border: 1px solid var(--color-coffee-200);
  border-radius: .75rem;
  padding: 1.5rem;
  max-width: 600px;
  width: 100%;
}

.error-404-links-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-coffee-800);
  margin-bottom: 1rem;
}

.error-404-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
}

.error-404-link {
  color: var(--color-coffee-600);
  text-decoration: none;
  padding: .5rem;
  border-radius: .5rem;
  transition: all .2s ease;
  font-size: .875rem;
}

.error-404-link:hover {
  color: var(--color-coffee-800);
  background: var(--color-coffee-100);
}

/* Formulario de búsqueda */
.error-404-search {
  max-width: 500px;
  width: 100%;
}

.error-404-search-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-coffee-700);
  margin-bottom: 1rem;
}

.error-404-search .search-form {
  display: flex;
  gap: .5rem;
  align-items: center;
  background: rgba(255,255,255,.9);
  border-radius: 2rem;
  padding: .5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  transition: all .3s ease;
}

.error-404-search .search-form:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  transform: translateY(-1px);
}

.error-404-search input[type="search"],
.error-404-search input[type="text"] {
  flex: 1;
  padding: .75rem 1rem;
  border: none;
  border-radius: 1.5rem;
  font-size: 1rem;
  background: transparent;
  color: var(--color-coffee-800);
  outline: none;
  width: 100%;
}

.error-404-search input[type="search"]::placeholder,
.error-404-search input[type="text"]::placeholder {
  color: var(--color-coffee-400);
}

.error-404-search input[type="search"]:focus,
.error-404-search input[type="text"]:focus {
  background: rgba(255,255,255,.5);
}

.error-404-search input[type="submit"],
.error-404-search button[type="submit"] {
  background: var(--color-coffee-600);
  color: white;
  border: none;
  padding: .75rem 1.5rem;
  border-radius: 1.5rem;
  cursor: pointer;
  font-weight: 600;
  transition: all .3s ease;
  display: flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  min-width: auto;
}

.error-404-search input[type="submit"]:hover,
.error-404-search button[type="submit"]:hover {
  background: var(--color-coffee-700);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
}

.error-404-search input[type="submit"] svg,
.error-404-search button[type="submit"] svg {
  width: 18px;
  height: 18px;
}

/* Responsive 404 */
@media (min-width: 640px) {
  .error-404-actions {
    flex-direction: row;
    gap: 1.5rem;
  }
  
  .error-404-links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .error-404-section {
    padding: 4rem 0;
  }
  
  .error-404-content {
    gap: 2.5rem;
  }
}

/* Modo oscuro 404 */
body.dark-theme .error-404-section {
  background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-primary) 100%);
}

body.dark-theme.error404 .site-content {
  background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-primary) 100%) !important;
}

body.dark-theme .error-404-number {
  color: var(--color-coffee-400);
}

body.dark-theme .error-404-links {
  background: var(--dark-bg-secondary);
  border-color: #404040;
}

body.dark-theme .error-404-link:hover {
  color: var(--dark-text-primary);
  background: #404040;
}

body.dark-theme .error-404-search .search-form {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1);
}

body.dark-theme .error-404-search input[type="search"],
body.dark-theme .error-404-search input[type="text"] {
  background: transparent;
  color: var(--dark-text-primary);
}

body.dark-theme .error-404-search input[type="search"]::placeholder,
body.dark-theme .error-404-search input[type="text"]::placeholder {
  color: rgba(255,255,255,.5);
}

body.dark-theme .error-404-search input[type="search"]:focus,
body.dark-theme .error-404-search input[type="text"]:focus {
  background: rgba(255,255,255,.1);
}

body.dark-theme .error-404-search input[type="submit"],
body.dark-theme .error-404-search button[type="submit"] {
  background: var(--color-coffee-600);
}

body.dark-theme .error-404-search input[type="submit"]:hover,
body.dark-theme .error-404-search button[type="submit"]:hover {
  background: var(--color-coffee-500);
}

/* ==========================================================================
   14. PAGINACIÓN
   ========================================================================== */

/* Contenedor de paginación */
.pagination,
.navigation,
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin: 3rem 0;
  padding: 0;
  list-style: none;
}

/* Enlaces de paginación */
.page-numbers,
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.2rem;
  padding: .5rem .75rem;
  background: var(--color-coffee-50);
  color: var(--color-coffee-700);
  text-decoration: none;
  border-radius: .5rem;
  font-weight: 500;
  font-size: .875rem;
  transition: all .3s ease;
  border: 1px solid var(--color-coffee-200);
}

/* Hover de enlaces */
.page-numbers:hover,
.nav-links a:hover {
  background: var(--color-coffee-100);
  color: var(--color-coffee-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
}

/* Página actual */
.page-numbers.current,
.nav-links .current {
  background: var(--color-coffee-600);
  color: white;
  border-color: var(--color-coffee-600);
  font-weight: 600;
}

/* Puntos suspensivos */
.page-numbers.dots,
.nav-links .dots {
  background: transparent;
  border: none;
  color: var(--color-coffee-400);
  cursor: default;
}

.page-numbers.dots:hover,
.nav-links .dots:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

/* Navegación anterior/siguiente */
.nav-previous,
.nav-next {
  margin: 0 1rem;
}

.nav-previous a,
.nav-next a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  background: var(--color-coffee-600);
  color: white;
  border-radius: .75rem;
  font-weight: 600;
  transition: all .3s ease;
  min-width: auto;
  height: auto;
  border: none;
}

.nav-previous a:hover,
.nav-next a:hover {
  background: var(--color-coffee-700);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
}

/* Iconos de navegación */
.nav-previous a::before {
  content: "←";
  font-size: 1rem;
}

.nav-next a::after {
  content: "→";
  font-size: 1rem;
}

/* Responsive paginación */
@media (max-width: 768px) {
  .pagination,
  .navigation,
  .nav-links {
    gap: .25rem;
    margin: 2rem 0;
  }
  
  .page-numbers,
  .nav-links a,
  .nav-links span {
    min-width: 2rem;
    height: 2rem;
    padding: .25rem .5rem;
    font-size: .75rem;
  }
  
  /* Navegación de posts móvil - Usa estilos de paginación unificados */
  .post-navigation {
    margin: 2rem 0;
  }
  
  /* Los estilos de .pagination, .navigation, .nav-links ya se aplican automáticamente */
}

/* Modo oscuro paginación */
body.dark-theme .page-numbers,
body.dark-theme .nav-links a,
body.dark-theme .nav-links span {
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
  border-color: #404040;
}

body.dark-theme .page-numbers:hover,
body.dark-theme .nav-links a:hover {
  background: #404040;
  color: var(--dark-text-primary);
}

body.dark-theme .page-numbers.current,
body.dark-theme .nav-links .current {
  background: var(--color-coffee-600);
  color: white;
  border-color: var(--color-coffee-600);
}

body.dark-theme .page-numbers.dots,
body.dark-theme .nav-links .dots {
  background: transparent;
  color: var(--dark-text-secondary);
}

body.dark-theme .nav-previous a,
body.dark-theme .nav-next a {
  background: var(--color-coffee-600);
  color: white;
}

body.dark-theme .nav-previous a:hover,
body.dark-theme .nav-next a:hover {
  background: var(--color-coffee-500);
}

/* Los estilos de modo oscuro para .page-numbers, .nav-links ya se aplican automáticamente */

/* ==========================================================================
   15. PÁGINA DE BÚSQUEDA
   ========================================================================== */

/* Header de búsqueda */
.search-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem 0;
}

.search-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--color-coffee-900);
}

.search-title span {
  color: var(--color-coffee-600);
  font-style: italic;
}

.search-subtitle {
  color: var(--color-coffee-700);
  font-size: 1.1rem;
  margin: 0;
}

/* Sin resultados */
.no-results {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--color-coffee-50);
  border-radius: 1rem;
  margin: 2rem 0;
}

.no-results-message {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-coffee-800);
  margin-bottom: 1rem;
}

.no-results-suggestion {
  color: var(--color-coffee-600);
  font-size: 1rem;
  margin: 0;
}

/* Resultados de búsqueda */
.search-results .post-title a {
  position: relative;
}

.search-results .post-excerpt {
  position: relative;
}

/* ==========================================================================
   14. COMENTARIOS
   ========================================================================== */

/* Área de comentarios */
.comments-area { 
  margin-top: 3rem; 
}

.comments-title { 
  font-size: 1.5rem; 
  font-weight: 700; 
  margin-bottom: 1.5rem; 
  color: var(--color-coffee-900); 
}

.comment-list { 
  list-style: none; 
  padding: 0; 
}

.comment { 
  margin-bottom: 2rem; 
  padding: 1.5rem; 
  background: var(--color-coffee-50); 
  border-radius: .5rem; 
}

.comment-author { 
  font-weight: 600; 
  color: var(--color-coffee-800); 
}

.comment-meta { 
  font-size: .875rem; 
  color: var(--color-coffee-600); 
  margin-bottom: .5rem; 
}

.comment-content { 
  margin-top: 1rem; 
  line-height: 1.6; 
}

.comment-reply-link { 
  display: inline-block; 
  margin-top: 1rem; 
  color: var(--color-coffee-600); 
  text-decoration: none; 
  font-size: .875rem; 
  font-weight: 600; 
}

.comment-reply-link:hover { 
  color: var(--color-coffee-700); 
}

/* Formulario de comentarios */
.comment-form { 
  margin-top: 2rem; 
}

.comment-form label { 
  display: block; 
  margin-bottom: .5rem; 
  font-weight: 600; 
  color: var(--color-coffee-800); 
}

.comment-form input, 
.comment-form textarea { 
  width: 100%; 
  padding: .75rem; 
  border: 1px solid var(--color-coffee-200); 
  border-radius: .5rem; 
  margin-bottom: 1rem; 
  font-family: inherit; 
}

.comment-form input:focus, 
.comment-form textarea:focus { 
  outline: none; 
  border-color: var(--color-coffee-400); 
  box-shadow: 0 0 0 2px rgba(206,138,50,.1); 
}

.comment-form .submit { 
  background: var(--color-coffee-600); 
  color: #fff; 
  border: none; 
  padding: .75rem 1.5rem; 
  border-radius: .5rem; 
  cursor: pointer; 
  font-weight: 600; 
  transition: background-color .2s ease; 
}

.comment-form .submit:hover { 
  background: var(--color-coffee-700); 
}

/* ==========================================================================
   16. BOTÓN SCROLL TO TOP
   ========================================================================== */

.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background: var(--color-coffee-600);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all .3s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.scroll-to-top:hover {
  background: var(--color-coffee-700);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Modo oscuro para scroll to top */
.dark-theme .scroll-to-top {
  background: var(--dark-accent);
  color: white;
}

.dark-theme .scroll-to-top:hover {
  background: var(--color-coffee-600);
}

/* Responsive */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ==========================================================================
   16.5. BY IMARTZ - RESPONSIVE
   ========================================================================== */

/* Ocultar "by Imartz" en móviles y tablets */
@media (max-width: 1024px) {
  .by-imartz {
    display: none !important;
  }
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

/* Email de contacto en footer */
.footer-contact-email {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1rem;
  gap: .5rem;
}

.footer-email-icon {
  flex-shrink: 0;
  color: var(--color-coffee-600);
  transition: all .3s ease;
  margin-bottom: .25rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 8px;
  background: transparent;
}

.footer-email-link {
  color: #c8b7ad;
  text-decoration: none;
  font-weight: 400;
  font-size: .675rem;
  transition: color .2s ease;
}

.footer-email-link:hover {
  color: var(--color-coffee-100);
}

.footer-contact-email:hover .footer-email-icon {
  color: white;
  background: var(--color-coffee-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Modo oscuro para email de contacto */

.dark-theme .footer-contact-email:hover .footer-email-icon {
  color: white;
  background: var(--dark-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* Footer principal */
.site-footer { 
  background: linear-gradient(135deg, #353535 0%, #272727 100%); 
  padding: 1.5rem 0; 
  color: #fff; 
  width: 100vw; 
  margin-left: calc(-50vw + 50%);
  margin-top: auto;
  flex-shrink: 0;
  animation: fadeIn .4s ease-out;
}

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

.footer-copy { 
  color: #fff; 
  font-size: .875rem; 
}

.footer-nav .menu { 
  list-style: none; 
  display: flex; 
  gap: 1.5rem; 
  margin: 0; 
  padding: 0; 
}

.footer-nav .menu a { 
  color: #fff; 
  text-decoration: none; 
  opacity: .8; 
  font-size: .875rem; 
  transition: opacity .2s ease; 
}

.footer-nav .menu a:hover { 
  opacity: 1; 
}

/* Footer móvil */
.mobile-footer {
  display: block;
  background: var(--color-coffee-900);
  padding: 1.5rem 0;
}

.desktop-footer {
  display: none;
  background: var(--color-coffee-900);
  padding: 5rem 0;
}

/* Estilos del footer móvil */
.footer-social {
  text-align: center;
  margin-bottom: 1.5rem;
}

.footer-social-title {
  color: #fff;
  font-weight: 600;
  font-size: .875rem;
  margin-bottom: .75rem;
}

.footer-social-icons .social-icon-footer {
  width: 36px;
  height: 36px;
}

.footer-social-icons .social-icon-footer svg,
.footer-social-icons .social-icon-footer img {
  width: 18px;
  height: 18px;
}

.footer-links {
  text-align: center;
  margin-bottom: 1rem;
}

.footer-link {
  color: var(--color-coffee-900);
  transition: color .2s ease;
  font-size: .875rem;
  text-decoration: none;
}

.footer-link:hover {
  color: #fff;
}

.footer-copyright {
  text-align: center;
}

.footer-copyright p {
  color: var(--color-coffee-100);
  font-size: .75rem;
  margin: 0;
}

/* Estilos del footer desktop */

.footer-box {
  text-align: center;
}

.footer-box-title {
  color: var(--color-coffee-400);
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.footer-box-content {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  font-size: 1rem;
  color: var(--color-coffee-100);
}

.footer-box-content p {
  margin: 0;
}

.footer-box-link {
  color: #dfb9a8;
  transition: color .2s ease;
  text-decoration: none;
}

.footer-box-link:hover {
  color: #fff;
}

/* Iconos sociales del footer */
.social-icon-footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #BF5E08;
  transition: all .3s ease;
  border-radius: 50%;
  background-color: rgba(238,207,174,.48);
  text-decoration: none;
}

.social-icon-footer:hover {
  color: #ffffff;
  background: var(--color-coffee-200);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(191,94,8,.3);
}

.social-icon-footer svg {
  width: 20px;
  height: 20px;
}

.social-icon-footer img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: filter .3s ease;
}

.social-icon-footer:hover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

/* Colores específicos para iconos del footer */
.social-icon-footer.youtube:hover {
  background-color: #ff0000 !important;
  color: #ffffff !important;
}

.social-icon-footer.instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #ffffff !important;
}

.social-icon-footer.tiktok:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.social-icon-footer.twitch:hover {
  background-color: #9146ff !important;
  color: #ffffff !important;
}

.social-icon-footer.discord:hover {
  background-color: #5865f2 !important;
  color: #ffffff !important;
}

.social-icon-footer.telegram:hover {
  background-color: #0088cc !important;
  color: #ffffff !important;
}

/* ==========================================================================
   16. HEADER MÓVIL
   ========================================================================== */

/* Transición suave para el padding del body cuando el header se fija */
body {
  transition: padding-top .3s ease;
}

/* Header móvil principal */
.mobile-header {
  display: none;
  background: linear-gradient(180deg, #000000 0%, var(--color-coffee-900) 100%);
  position: relative;
  z-index: 50;
  transition: all .3s ease;
}

/* Header móvil cuando está "pegado" */
.mobile-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.mobile-header-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 .75rem;
}

.mobile-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

/* Logo móvil */
.mobile-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity .3s ease;
}

.mobile-logo:hover {
  opacity: .8;
}

.mobile-logo-img {
  height: 3.5rem;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.mobile-logo-text {
  min-width: 0;
  flex: 1;
}

.mobile-logo-title {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-logo-subtitle {
  color: var(--color-coffee-400);
  font-size: 1rem;
  padding-left: .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Controles móviles */
.mobile-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.mobile-theme-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  padding: .5rem;
  border-radius: 50%;
  transition: all .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

.mobile-theme-toggle .sun-icon {
  display: block;
}

.mobile-theme-toggle .moon-icon {
  display: none;
}

body.dark-theme .mobile-theme-toggle .sun-icon {
  display: none;
}

body.dark-theme .mobile-theme-toggle .moon-icon {
  display: block;
}

/* Botón menú hamburguesa */
.mobile-menu-button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  gap: .25rem;
  transition: color .3s ease;
}

.mobile-menu-button:hover {
  color: var(--color-coffee-400);
}

.hamburger-line {
  display: block;
  width: 1.5rem;
  height: .125rem;
  background-color: currentColor;
  transition: all .3s ease;
}

.mobile-menu-button.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(.375rem, .375rem);
}

.mobile-menu-button.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-button.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(.375rem, -0.375rem);
}

/* Menú móvil desplegable */
.mobile-menu {
  display: none;
  background: var(--color-coffee-900);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1rem 0;
}

.mobile-menu.active {
  display: block;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.mobile-nav-list li {
  margin: 0;
}

.mobile-nav-list a {
  display: block;
  padding: .75rem 1rem;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  font-size: .875rem;
  transition: all .2s ease;
  border-radius: .5rem;
}

.mobile-nav-list a:hover,
.mobile-nav-list .current-menu-item > a {
  background: var(--color-coffee-600);
  color: #fff;
}

/* Buscador móvil */
.mobile-search {
  margin-top: 1rem;
  padding: 0 1rem;
}

.mobile-search-form {
  display: flex;
  align-items: center;
  position: relative;
}

.mobile-search-input {
  flex: 1;
  background-color: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 1.5rem;
  padding: .5rem 1rem;
  color: #fff;
  font-size: .875rem;
  transition: all .3s ease;
  backdrop-filter: blur(10px);
}

.mobile-search-input::placeholder {
  color: rgba(255,255,255,.7);
}

.mobile-search-input:focus {
  outline: none;
  border-color: var(--color-coffee-400);
  background-color: rgba(255,255,255,.2);
  box-shadow: 0 0 0 2px rgba(139,69,19,.3);
}

.mobile-search-button {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  padding: .25rem;
  border-radius: 50%;
  transition: all .3s ease;
}

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

/* Breakpoint: 1200px */
@media (max-width: 1200px) {
  .header-inner {
    gap: 1.5rem;
    grid-template-columns: .5fr auto 1fr auto .5fr;
  }
  .primary-nav {
    max-width: 500px;
  }
  .custom-logo-link img {
    max-height: 85px;
  }
  .site-title {
    font-size: 1.9rem;
  }
}

/* Breakpoint: 992px */
@media (max-width: 992px) {
  .header-inner {
    gap: 1rem;
    grid-template-columns: .25fr auto 1fr auto .25fr;
  }
  .primary-nav {
    max-width: 400px;
  }
  .primary-nav .menu {
    gap: .1rem;
  }
  .primary-nav .menu a {
    padding: .4rem .5rem;
    font-size: .9rem;
  }
  .custom-logo-link img {
    max-height: 70px;
  }
  .site-title {
    font-size: 1.6rem;
  }
  .header-controls {
    gap: .75rem;
  }
  .search-input {
    width: 150px;
  }
}

/* Breakpoint: 768px - Móvil */
@media (max-width: 768px) {
  /* Mostrar header móvil, ocultar desktop */
  .mobile-header {
    display: block;
  }
  
  .desktop-header {
    display: none;
  }
  
  /* Layout móvil */
  .container {
    width: 95%;
  }
  
  /* Site content mobile adjustments */
  .site-content {
    margin-top: -1rem;
    padding: 1.5rem 0 2rem;
    border-radius: 1rem;
    max-width: 100%;
  }
  
  /* Hero section mobile */
  .hero {
    padding: 1rem 0 1rem;
  }
  
  .site-heading {
    font-size: 1.75rem;
    margin-bottom: .5rem;
  }
  
  .site-subtitle {
    font-size: 1rem;
    margin-bottom: .5rem;
  }
  
  .site-intro {
    font-size: .875rem;
    max-width: 100%;
  }
  
  /* Posts grid mobile */
  .posts-grid { 
    grid-template-columns: 1fr; 
    gap: 1rem;
  }
  
  .post-card {
    border-radius: .75rem;
    overflow: hidden;
  }
  
  .post-thumb {
    height: 180px;
  }
  
  .post-content {
    padding: 1rem;
  }
  
  .post-title {
    font-size: 1.125rem;
    line-height: 1.3;
    margin-bottom: .5rem;
  }
  
  .post-meta {
    margin-bottom: .5rem;
  }
  
  .post-date {
    font-size: .75rem;
    margin-bottom: .25rem;
  }
  
  .post-categories {
    margin-bottom: .5rem;
  }
  
  .post-categories a {
    font-size: .75rem;
    padding: .125rem .375rem;
  }
  
  .post-excerpt {
    font-size: .875rem;
    line-height: 1.4;
    margin-bottom: .5rem;
  }
  
  .post-read-more {
    font-size: .875rem;
  }
  
  /* Single post mobile */
  .post-header .entry-title { 
    font-size: 1.75rem; 
    line-height: 1.2;
    margin-bottom: .75rem;
  }
  
  .entry-content { 
    font-size: 1rem; 
    line-height: 1.6;
  }
  
  .entry-content p {
    margin-bottom: 1rem;
  }
  
  .entry-content h2, 
  .entry-content h3, 
  .entry-content h4 { 
    font-size: 1.25rem;
    margin: 1.5rem 0 .75rem; 
  }
  
  .post-navigation { 
    flex-direction: column; 
    gap: 1rem; 
    margin: 2rem 0;
    padding: 1rem 0;
  }
  
  .post-navigation a { 
    text-align: center; 
    padding: .75rem 1rem;
    font-size: .875rem;
  }
  
  /* Comments mobile */
  .comments-area {
    margin-top: 2rem;
  }
  
  .comments-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .comment {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .comment-form input,
  .comment-form textarea {
    padding: .75rem;
    font-size: 1rem;
  }
  
  /* Social icons mobile */
  .social-icons {
    gap: .75rem;
    margin: 1.5rem 0;
  }
  
  .social-icons a {
    width: 36px;
    height: 36px;
  }
  
  /* Search page mobile */
  .search-header {
    margin-bottom: 2rem;
    padding: 1.5rem 0;
  }
  
  .search-title {
    font-size: 1.75rem;
    margin-bottom: .5rem;
  }
  
  .search-subtitle {
    font-size: 1rem;
  }
  
  .no-results {
    padding: 2rem 1rem;
    margin: 1.5rem 0;
  }
  
  .no-results-message {
    font-size: 1.25rem;
    margin-bottom: .75rem;
  }
  
  .no-results-suggestion {
    font-size: .875rem;
  }
  
  /* Touch-friendly interactions */
  .post-card,
  .mobile-nav-list a,
  .mobile-search-button,
  .mobile-theme-toggle,
  .mobile-menu-button {
    -webkit-tap-highlight-color: rgba(0,0,0,.1);
  }
  
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
  }
  
  /* Better touch targets */
  .mobile-nav-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  .mobile-search-button,
  .mobile-theme-toggle,
  .mobile-menu-button {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Improved readability */
  .entry-content {
    word-wrap: break-word;
    hyphens: auto;
  }
  
  /* Better spacing for touch */
  .post-card {
    margin-bottom: 1rem;
  }
  
  /* Optimize images for mobile */
  .post-thumb img {
    object-fit: cover;
    object-position: center;
  }
  
  /* Better form inputs */
  .mobile-search-input,
  .comment-form input,
  .comment-form textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    border-radius: .5rem;
  }
  
  /* Loading states */
  .post-card {
    transition: transform .2s ease, box-shadow .2s ease;
  }
  
  .post-card:active {
    transform: scale(.98);
  }
}

/* Breakpoint: 640px - Footer responsive */
@media (max-width: 640px) {
  .mobile-footer {
    display: block;
    padding: 1.5rem 0;
  }
  
  .desktop-footer {
    display: none;
  }
  
  .footer-social {
    margin-bottom: 1rem;
  }
  
  .footer-social-title {
    font-size: .875rem;
    margin-bottom: .75rem;
  }
  
  .footer-social-icons {
    gap: .5rem;
  }
  
  .footer-links {
    margin-bottom: .75rem;
  }
  
  .footer-link {
    font-size: .875rem;
    margin: 0 .5rem;
  }
  
  .footer-copyright p {
    font-size: .75rem;
  }
  
  .social-icon-footer {
    width: 36px;
    height: 36px;
  }
  
  .social-icon-footer svg {
    width: 18px;
    height: 18px;
  }
}

/* Breakpoint: 641px+ - Footer desktop */
@media (min-width: 641px) {
  .mobile-footer {
    display: none;
  }
  
  .desktop-footer {
    display: block;
  }
}

/* ==========================================================================
   18. MODO OSCURO - ELEMENTOS ESPECÍFICOS
   ========================================================================== */

/* Búsqueda modo oscuro */
body.dark-theme .search-input {
  background-color: rgba(0,0,0,.3);
  border-color: rgba(255,255,255,.2);
  color: var(--text-primary);
}

body.dark-theme .search-input::placeholder {
  color: rgba(255,255,255,.5);
}

body.dark-theme .search-input:focus {
  background-color: rgba(0,0,0,.5);
  border-color: var(--dark-accent);
}

/* Página de búsqueda modo oscuro */

body.dark-theme .no-results {
  background: var(--dark-bg-secondary);
}

/* Footer modo oscuro */
body.dark-theme .social-icon-footer {
  color: #ffffff;
  background-color: rgba(255,255,255,.1);
}

body.dark-theme .social-icon-footer:hover {
  color: #BF5E08;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(255,255,255,.3);
}

body.dark-theme .social-icon-footer img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

body.dark-theme .social-icon-footer:hover img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

/* Colores específicos para iconos del footer en modo oscuro.
   Nota: solo YouTube necesita un override (negro en dark vs rojo en light).
   Los demás (instagram, tiktok, twitch, discord, telegram) usan los mismos
   colores corporativos que en light, así que se heredan de las reglas
   .social-icon-footer.X:hover sin necesidad de duplicar. */
body.dark-theme .social-icon-footer.youtube:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Contenido modo oscuro */
body.dark-theme .site-content {
  background: linear-gradient(135deg, #353535 0%, #272727 100%) !important;
}

body.dark-theme main {
  background: linear-gradient(135deg, #353535 0%, #272727 100%);
}

body.dark-theme .post-card {
  background: #262626;
  border-color: #404040;
}

body.dark-theme .post-tags a {
  color: var(--dark-accent);
  background: #404040;
}

body.dark-theme .post-tags a:hover {
  background: var(--dark-accent);
  color: #171717;
}

body.dark-theme .latest-posts {
  background: linear-gradient(135deg, #353535 0%, #272727 100%) !important;
}

body.dark-theme .post-card {
  background: #262626 !important;
}

/* ==========================================================================
   19. UTILIDADES Y CLASES AUXILIARES
   ========================================================================== */

/* Accesibilidad */
.skip-link { 
  position: absolute; 
  left: -9999px; 
  top: auto; 
  width: 1px; 
  height: 1px; 
  overflow: hidden; 
}

.skip-link:focus { 
  position: static; 
  width: auto; 
  height: auto; 
  padding: .5rem .75rem; 
  background: #000; 
  color: #fff; 
  border-radius: .25rem; 
}

.screen-reader-text { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0, 0, 0, 0); 
  border: 0; 
}

/* Efectos visuales */
.gradient-text {
  background: linear-gradient(135deg, #f3ce17 0%, #d9a806 50%, #cf6d04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hover-lift {
  transition: transform .3s ease, box-shadow .3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,.1);
}

/* Icono de café */
.coffee-icon { 
  width: 5rem; 
  height: 5rem; 
  background: center/contain no-repeat url('../assets/coffee.svg'); 
  display: block; 
  margin-inline: auto; 
}

/* Firma by Imartz */
.by-imartz { 
  display: inline-flex; 
  opacity: .9; 
}

/* Badge by Imartz fijo */
.site-header { 
  position: relative; 
}

.by-imartz {
  left: 1.25rem;
  bottom: -0.9rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(151,78,13,.47);
  border: 1px solid rgb(255,255,255);
  padding: .35rem .55rem;
  border-radius: .75rem;
  backdrop-filter: blur(6px);
  transform: rotate(-30deg);
  transform-origin: left bottom;
  margin: -1rem -1rem .1rem -0.9rem;
}

.by-imartz-logo { 
  width: 18px; 
  height: 18px; 
  display: inline-block; 
}

.by-imartz-text { 
  font-size: .8rem; 
  color: #fff; 
  letter-spacing: .02em; 
  white-space: nowrap; 
}

/* Responsive del badge by Imartz */
@media (max-width: 768px) {
  .by-imartz { 
    left: .75rem; 
    bottom: -0.65rem; 
    padding: .3rem .5rem; 
  }
}

/* (La regla .site-content { position: relative } estaba aquí, pero ya está
   cubierta por la Fase 8 más abajo con position: relative !important.) */

@media (max-width: 768px) {
  .by-imartz { 
    top: -0.7rem; 
    left: -0.7rem; 
    padding: .3rem .5rem; 
  }
}

/* ==========================================================================
   20. MONITOR GARAGE - BASE ESTABLE DE LAYOUTS
   ========================================================================== */

:root {
  --mg-site-max: 1180px;
  --mg-site-gutter: 48px;
  --mg-site-width: min(var(--mg-site-max), calc(100vw - var(--mg-site-gutter)));
  --mg-content-overlap: -3rem;
  --mg-layout-radius: 2rem;
}

.header-inner,
.mg-header-inner {
  width: var(--mg-site-width) !important;
}

/* Nota: la regla .site-content de la Fase 7 se ha eliminado.
   La Fase 8 (más abajo) la sobrescribe completamente con todas sus
   propiedades en !important. */

.single-post .site-content .container,
.page:not(.page-template-template-tools-full):not(.post-template-template-tools-full) .site-content .container,
.archive .site-content .container,
.category .site-content .container,
.search .site-content .container,
.error404 .site-content .container {
  width: min(1080px, 92%) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.archive-header {
  margin-bottom: 2rem;
}

.archive-title {
  margin-top: 0;
}

html body.page-template-template-tools-full,
html body.post-template-template-tools-full,
html body.home,
html body.front-page {
  overflow-x: hidden;
}

html body.page-template-template-tools-full main.site-content,
html body.post-template-template-tools-full main.site-content,
html body.page-template-template-tools-full #content.site-content,
html body.post-template-template-tools-full #content.site-content,
html body.home main.site-content,
html body.home #content.site-content,
html body.front-page main.site-content,
html body.front-page #content.site-content {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin-top: var(--mg-content-overlap) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 0 3rem !important;
  overflow: visible !important;
  animation: none !important;
}

html body.page-template-template-tools-full main.site-content > .by-imartz,
html body.post-template-template-tools-full main.site-content > .by-imartz,
html body.page-template-template-tools-full #content.site-content > .by-imartz,
html body.post-template-template-tools-full #content.site-content > .by-imartz,
html body.home main.site-content > .by-imartz,
html body.home #content.site-content > .by-imartz,
html body.front-page main.site-content > .by-imartz,
html body.front-page #content.site-content > .by-imartz {
  display: none !important;
}

html body.page-template-template-tools-full .mg-tool-page,
html body.post-template-template-tools-full .mg-tool-page,
html body.home .mg-front-page,
html body.front-page .mg-front-page,
html body.page-template-template-tools-full .mg-tool-content,
html body.post-template-template-tools-full .mg-tool-content,
html body.home .mg-tool-content,
html body.front-page .mg-tool-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body.page-template-template-tools-full .mg-tool-content > p:empty,
html body.post-template-template-tools-full .mg-tool-content > p:empty,
html body.home .mg-tool-content > p:empty,
html body.front-page .mg-tool-content > p:empty {
  display: none !important;
}

html body.page-template-template-tools-full .mg-tool-content > *:first-child,
html body.post-template-template-tools-full .mg-tool-content > *:first-child,
html body.home .mg-tool-content > *:first-child,
html body.front-page .mg-tool-content > *:first-child {
  margin-top: 0 !important;
  /* Importante: no forzar padding-top: 0 aquí.
     Las herramientas usan su padding interno para que el kicker no quede pegado al borde superior. */
}

html body.home .mg-home,
html body.front-page .mg-home,
html body.page-template-template-tools-full .mg-home,
html body.post-template-template-tools-full .mg-home,
html body.page-template-template-tools-full .mg-about,
html body.post-template-template-tools-full .mg-about,
html body.page-template-template-tools-full .mg-ranking-wrap,
html body.post-template-template-tools-full .mg-ranking-wrap,
html body.page-template-template-tools-full .mg-ranking,
html body.post-template-template-tools-full .mg-ranking,
html body.page-template-template-tools-full .ranking-monitores,
html body.post-template-template-tools-full .ranking-monitores,
html body.page-template-template-tools-full .mg-cmp-wrap,
html body.post-template-template-tools-full .mg-cmp-wrap,
html body.page-template-template-tools-full .mg-comparator-wrap,
html body.post-template-template-tools-full .mg-comparator-wrap,
html body.page-template-template-tools-full .mg-comparador-wrap,
html body.post-template-template-tools-full .mg-comparador-wrap,
html body.page-template-template-tools-full .mg-rec-wrap,
html body.post-template-template-tools-full .mg-rec-wrap,
html body.page-template-template-tools-full .mg-recommender-wrap,
html body.post-template-template-tools-full .mg-recommender-wrap,
html body.page-template-template-tools-full .mg-recomendador-wrap,
html body.post-template-template-tools-full .mg-recomendador-wrap,
html body.page-template-template-tools-full .mg-ppi-wrap,
html body.post-template-template-tools-full .mg-ppi-wrap,
html body.page-template-template-tools-full .mg-ppi,
html body.post-template-template-tools-full .mg-ppi,
html body.page-template-template-tools-full .mg-ppi-tool,
html body.post-template-template-tools-full .mg-ppi-tool,
html body.page-template-template-tools-full .mg-size-sim,
html body.post-template-template-tools-full .mg-size-sim,
html body.page-template-template-tools-full .mg-size-wrap,
html body.post-template-template-tools-full .mg-size-wrap,
html body.page-template-template-tools-full .mg-sim-wrap,
html body.post-template-template-tools-full .mg-sim-wrap,
html body.page-template-template-tools-full .mg-simulator-wrap,
html body.post-template-template-tools-full .mg-simulator-wrap,
html body.page-template-template-tools-full .mg-sizesim-wrap,
html body.post-template-template-tools-full .mg-sizesim-wrap,
html body.page-template-template-tools-full .mg-glossary-wrap,
html body.post-template-template-tools-full .mg-glossary-wrap,
html body.page-template-template-tools-full .mg-glossary,
html body.post-template-template-tools-full .mg-glossary,
html body.page-template-template-tools-full .mg-glosario-wrap,
html body.post-template-template-tools-full .mg-glosario-wrap,
html body.page-template-template-tools-full .mg-glosario,
html body.post-template-template-tools-full .mg-glosario,
html body.page-template-template-tools-full .mg-distance-wrap,
html body.post-template-template-tools-full .mg-distance-wrap,
html body.page-template-template-tools-full .mg-distance,
html body.post-template-template-tools-full .mg-distance,
html body.page-template-template-tools-full .mg-viewing-distance-wrap,
html body.post-template-template-tools-full .mg-viewing-distance-wrap,
html body.page-template-template-tools-full .mg-bandwidth-wrap,
html body.post-template-template-tools-full .mg-bandwidth-wrap,
html body.page-template-template-tools-full .mg-bandwidth,
html body.post-template-template-tools-full .mg-bandwidth,
html body.page-template-template-tools-full .mg-bw-wrap,
html body.post-template-template-tools-full .mg-bw-wrap {
  max-width: var(--mg-site-max) !important;
  width: var(--mg-site-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.home .mg-home-shell,
html body.front-page .mg-home-shell,
html body.page-template-template-tools-full .mg-home-shell,
html body.post-template-template-tools-full .mg-home-shell,
html body.page-template-template-tools-full .mg-about-shell,
html body.post-template-template-tools-full .mg-about-shell,
html body.page-template-template-tools-full .mg-ranking-shell,
html body.post-template-template-tools-full .mg-ranking-shell,
html body.page-template-template-tools-full .mg-cmp-shell,
html body.post-template-template-tools-full .mg-cmp-shell,
html body.page-template-template-tools-full .mg-rec-shell,
html body.post-template-template-tools-full .mg-rec-shell,
html body.page-template-template-tools-full .mg-ppi-shell,
html body.post-template-template-tools-full .mg-ppi-shell,
html body.page-template-template-tools-full .mg-size-shell,
html body.post-template-template-tools-full .mg-size-shell,
html body.page-template-template-tools-full .mg-glossary-shell,
html body.post-template-template-tools-full .mg-glossary-shell,
html body.page-template-template-tools-full .mg-distance-shell,
html body.post-template-template-tools-full .mg-distance-shell,
html body.page-template-template-tools-full .mg-bandwidth-shell,
html body.post-template-template-tools-full .mg-bandwidth-shell {
  margin-top: 0 !important;
}

html body.dark-theme.page-template-template-tools-full main.site-content,
html body.dark-theme.post-template-template-tools-full main.site-content,
html body.dark-theme.page-template-template-tools-full #content.site-content,
html body.dark-theme.post-template-template-tools-full #content.site-content,
html body.dark-theme.home main.site-content,
html body.dark-theme.home #content.site-content,
html body.dark-theme.front-page main.site-content,
html body.dark-theme.front-page #content.site-content,
html body.dark-theme.page-template-template-tools-full main,
html body.dark-theme.post-template-template-tools-full main,
html body.dark-theme.home main,
html body.dark-theme.front-page main {
  background: transparent !important;
  background-color: transparent !important;
}

@media (max-width: 768px) {
  :root {
    --mg-site-gutter: 24px;
    --mg-content-overlap: -1.4rem;
    --mg-layout-radius: 1.25rem;
  }

  .site-content {
    width: var(--mg-site-width) !important;
  }

  html body.page-template-template-tools-full main.site-content,
html body.post-template-template-tools-full main.site-content,
html body.page-template-template-tools-full #content.site-content,
html body.post-template-template-tools-full #content.site-content,
html body.home main.site-content,
html body.home #content.site-content,
html body.front-page main.site-content,
html body.front-page #content.site-content {
    padding-bottom: 2rem !important;
  }
}

@media (max-width: 480px) {
  :root {
    --mg-site-gutter: 18px;
  }
}

/* ========================================================================== 
   21. MONITOR GARAGE - SISTEMA FINAL LIMPIO 2026
   Header, dropdown herramientas, herramientas/home y footer integrados.
   Base limpia: sustituye todos los parches V2-V15 anteriores.
   ========================================================================== */

:root {
  --mg-site-max: 1120px;
  --mg-site-gutter: 40px;
  --mg-site-width: min(var(--mg-site-max), calc(100vw - var(--mg-site-gutter)));
  --mg-content-overlap: -3.1rem;
  --mg-radius-main: 2rem;
  --mg-gold: #ffc21d;
  --mg-gold-2: #e3a713;
  --mg-blue: #1d96f3;
  --mg-cream: #f5efe2;
  --mg-body-light: #ebe7de;
  --mg-dark: #08090a;
  --mg-dark-2: #121314;
  --mg-text: #121212;
  --mg-muted: #5f6063;
}

html,
body {
  overflow-x: hidden;
}

body {
  background: var(--mg-body-light);
}

body.dark-theme,
.dark-theme body {
  background: #050607;
  color: #f4f4f5;
}

/* --------------------------------------------------------------------------
   Contenedor principal y plantillas de herramientas
   -------------------------------------------------------------------------- */

.site-content {
  position: relative !important;
  z-index: 50 !important;
  max-width: var(--mg-site-max) !important;
  width: var(--mg-site-width) !important;
  margin: var(--mg-content-overlap) auto 2rem !important;
  padding: 2rem 0 3rem !important;
  border-radius: var(--mg-radius-main) !important;
  background: #fff !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  animation: fadeInUp .38s ease-out both;
}

.site-content .container {
  width: min(1080px, 92%) !important;
  max-width: 1080px !important;
  margin-inline: auto !important;
}

body.dark-theme .site-content,
.dark-theme .site-content {
  background: #111315 !important;
  color: #f4f4f5;
}

body.page-template-template-tools-full main.site-content,
body.post-template-template-tools-full main.site-content,
body.page-template-template-tools-full #content.site-content,
body.post-template-template-tools-full #content.site-content,
body.home main.site-content,
body.home #content.site-content,
body.front-page main.site-content,
body.front-page #content.site-content {
  max-width: none !important;
  width: 100% !important;
  margin: var(--mg-content-overlap) 0 0 !important;
  padding: 0 0 3rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.page-template-template-tools-full main.site-content > .by-imartz,
body.post-template-template-tools-full main.site-content > .by-imartz,
body.page-template-template-tools-full #content.site-content > .by-imartz,
body.post-template-template-tools-full #content.site-content > .by-imartz,
body.home main.site-content > .by-imartz,
body.home #content.site-content > .by-imartz,
body.front-page main.site-content > .by-imartz,
body.front-page #content.site-content > .by-imartz {
  display: none !important;
}

body.home .mg-home,
body.front-page .mg-home,
body.page-template-template-tools-full .mg-home,
body.post-template-template-tools-full .mg-home,
body.page-template-template-tools-full .mg-about,
body.post-template-template-tools-full .mg-about,
body.page-template-template-tools-full .mg-ranking-wrap,
body.post-template-template-tools-full .mg-ranking-wrap,
body.page-template-template-tools-full .mg-ranking,
body.post-template-template-tools-full .mg-ranking,
body.page-template-template-tools-full .ranking-monitores,
body.post-template-template-tools-full .ranking-monitores,
body.page-template-template-tools-full .mg-cmp-wrap,
body.post-template-template-tools-full .mg-cmp-wrap,
body.page-template-template-tools-full .mg-comparator-wrap,
body.post-template-template-tools-full .mg-comparator-wrap,
body.page-template-template-tools-full .mg-comparador-wrap,
body.post-template-template-tools-full .mg-comparador-wrap,
body.page-template-template-tools-full .mg-rec-wrap,
body.post-template-template-tools-full .mg-rec-wrap,
body.page-template-template-tools-full .mg-recommender-wrap,
body.post-template-template-tools-full .mg-recommender-wrap,
body.page-template-template-tools-full .mg-recomendador-wrap,
body.post-template-template-tools-full .mg-recomendador-wrap,
body.page-template-template-tools-full .mg-ppi-wrap,
body.post-template-template-tools-full .mg-ppi-wrap,
body.page-template-template-tools-full .mg-ppi,
body.post-template-template-tools-full .mg-ppi,
body.page-template-template-tools-full .mg-ppi-tool,
body.post-template-template-tools-full .mg-ppi-tool,
body.page-template-template-tools-full .mg-size-sim,
body.post-template-template-tools-full .mg-size-sim,
body.page-template-template-tools-full .mg-size-wrap,
body.post-template-template-tools-full .mg-size-wrap,
body.page-template-template-tools-full .mg-sim-wrap,
body.post-template-template-tools-full .mg-sim-wrap,
body.page-template-template-tools-full .mg-simulator-wrap,
body.post-template-template-tools-full .mg-simulator-wrap,
body.page-template-template-tools-full .mg-sizesim-wrap,
body.post-template-template-tools-full .mg-sizesim-wrap,
body.page-template-template-tools-full .mg-gloss-wrap,
body.post-template-template-tools-full .mg-gloss-wrap,
body.page-template-template-tools-full .mg-glossary-wrap,
body.post-template-template-tools-full .mg-glossary-wrap,
body.page-template-template-tools-full .mg-glossary,
body.post-template-template-tools-full .mg-glossary,
body.page-template-template-tools-full .mg-glosario-wrap,
body.post-template-template-tools-full .mg-glosario-wrap,
body.page-template-template-tools-full .mg-glosario,
body.post-template-template-tools-full .mg-glosario,
body.page-template-template-tools-full .mg-distance-wrap,
body.post-template-template-tools-full .mg-distance-wrap,
body.page-template-template-tools-full .mg-distance,
body.post-template-template-tools-full .mg-distance,
body.page-template-template-tools-full .mg-viewing-distance-wrap,
body.post-template-template-tools-full .mg-viewing-distance-wrap,
body.page-template-template-tools-full .mg-bandwidth-wrap,
body.post-template-template-tools-full .mg-bandwidth-wrap,
body.page-template-template-tools-full .mg-bandwidth,
body.post-template-template-tools-full .mg-bandwidth,
body.page-template-template-tools-full .mg-bw-wrap,
body.post-template-template-tools-full .mg-bw-wrap,
body.page-template-template-tools-full .imz-monitor-summary-layout-tool,
body.post-template-template-tools-full .imz-monitor-summary-layout-tool {
  width: var(--mg-site-width) !important;
  max-width: var(--mg-site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.home .mg-home-shell,
body.front-page .mg-home-shell,
body.page-template-template-tools-full .mg-home-shell,
body.post-template-template-tools-full .mg-home-shell,
body.page-template-template-tools-full .mg-about-shell,
body.post-template-template-tools-full .mg-about-shell,
body.page-template-template-tools-full .mg-ranking-shell,
body.post-template-template-tools-full .mg-ranking-shell,
body.page-template-template-tools-full .mg-cmp-shell,
body.post-template-template-tools-full .mg-cmp-shell,
body.page-template-template-tools-full .mg-rec-shell,
body.post-template-template-tools-full .mg-rec-shell,
body.page-template-template-tools-full .mg-ppi-shell,
body.post-template-template-tools-full .mg-ppi-shell,
body.page-template-template-tools-full .mg-size-shell,
body.post-template-template-tools-full .mg-size-shell,
body.page-template-template-tools-full .mg-glossary-shell,
body.post-template-template-tools-full .mg-glossary-shell,
body.page-template-template-tools-full .mg-distance-shell,
body.post-template-template-tools-full .mg-distance-shell,
body.page-template-template-tools-full .mg-bandwidth-shell,
body.post-template-template-tools-full .mg-bandwidth-shell {
  margin-top: 0 !important;
}

.mg-tool-page,
.mg-tool-content,
.mg-home,
.mg-home-shell,
.imz-monitor-summary,
.entry-content {
  position: relative;
  z-index: 55;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Header desktop final
   -------------------------------------------------------------------------- */

.site-header {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.desktop-header.mg-site-header,
.desktop-header {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
  overflow: visible !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100vw !important;
  min-height: 320px !important;
  margin-left: calc(-50vw + 50%) !important;
  padding: 64px 0 82px !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 80% 5%, rgba(123,52,19,.38), transparent 45%),
    linear-gradient(135deg, #211217 0%, #3a1715 48%, #793519 100%) !important;
  animation: none !important;
}

body.dark-theme .desktop-header.mg-site-header,
body.dark-theme .desktop-header,
.dark-theme .desktop-header.mg-site-header,
.dark-theme .desktop-header {
  background:
    radial-gradient(circle at 80% 0%, rgba(101,83,36,.12), transparent 45%),
    linear-gradient(135deg, #050607 0%, #101214 55%, #15110a 100%) !important;
}

.desktop-header::before,
.desktop-header::after {
  display: none !important;
}

.mg-header-inner {
  position: relative !important;
  z-index: 300 !important;
  width: var(--mg-site-width) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 18px 22px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 22px !important;
  overflow: visible !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,229,190,.18) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    linear-gradient(135deg, rgba(82,48,46,.74), rgba(121,56,34,.64)) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

body.dark-theme .mg-header-inner,
.dark-theme .mg-header-inner {
  border-color: rgba(255,255,255,.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    linear-gradient(135deg, rgba(29,31,33,.82), rgba(20,19,17,.74)) !important;
  box-shadow:
    0 20px 54px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.mg-header-brand {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  display: flex;
  align-items: center;
  margin: 0;
  min-width: 0;
}

.mg-header-brand .custom-logo-link,
.mg-header-brand .site-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.mg-header-brand .custom-logo,
.mg-header-brand .custom-logo-link img {
  display: block;
  width: auto;
  max-height: 72px !important;
  object-fit: contain;
  transform: none !important;
}

.mg-header-center {
  grid-column: 2;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.primary-nav {
  width: 100%;
  max-width: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.primary-nav .menu {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}

.primary-nav .menu li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.primary-nav .menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
  outline: 0;
  transform: none !important;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  overflow: hidden;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.primary-nav .menu a::before,
.primary-nav .menu a::after {
  display: none !important;
  content: none !important;
}

.primary-nav .menu a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.08) !important;
  padding: 0 13px !important;
  transform: none !important;
  box-shadow: none !important;
}

.primary-nav .menu .current-menu-item > a,
.primary-nav .menu .current_page_item > a,
.primary-nav .menu .current-menu-ancestor > a {
  color: #17120a !important;
  background: linear-gradient(135deg, #ffd354 0%, #ffc21d 56%, #e6a611 100%) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(119,70,0,.18),
    0 2px 7px rgba(0,0,0,.14) !important;
}

.primary-nav .menu .current-menu-item > a:hover,
.primary-nav .menu .current_page_item > a:hover,
.primary-nav .menu .current-menu-ancestor > a:hover {
  padding: 0 13px !important;
  transform: none !important;
}

.mg-header-actions {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  position: relative;
  z-index: 400;
  overflow: visible;
}

.mg-tools-menu {
  position: relative;
  z-index: 10000;
  overflow: visible;
  display: flex;
  align-items: center;
}

.mg-tools-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  height: 46px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  color: #ffe09a !important;
  background: rgba(255,195,29,.08) !important;
  border: 1px solid rgba(255,195,29,.30) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.mg-tools-trigger::after {
  content: '∨';
  font-size: .78em;
  opacity: .92;
  margin-left: .25rem;
}

.mg-tools-trigger:hover,
.mg-tools-menu:hover .mg-tools-trigger,
.mg-tools-menu:focus-within .mg-tools-trigger {
  color: #fff2c6 !important;
  background: rgba(255,195,29,.13) !important;
  border-color: rgba(255,214,95,.48) !important;
}

.search-container {
  position: relative;
  flex: 0 0 150px;
  width: 150px;
}

.search-form {
  display: flex;
  align-items: center;
  width: 100%;
}

.search-input {
  width: 100%;
  height: 46px;
  min-height: 46px;
  box-sizing: border-box;
  border-radius: 999px;
  padding: 0 42px 0 18px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.search-input::placeholder {
  color: rgba(255,255,255,.62);
}

.search-input:focus {
  outline: 0;
  border-color: rgba(255,195,29,.42);
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 3px rgba(255,195,29,.10);
}

.search-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.74);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.search-button:hover {
  color: #ffe09a;
  background: transparent;
}

.search-button svg {
  width: 22px;
  height: 22px;
}

.theme-toggle {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  min-height: 46px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

.theme-toggle:hover {
  color: #ffe09a;
  background: rgba(255,195,29,.09);
  border-color: rgba(255,195,29,.30);
}

/* Dropdown herramientas: capa superior sin romper el solape del contenido */
.mg-tools-dropdown {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 999999 !important;
  width: min(350px, calc(100vw - 40px)) !important;
  max-height: min(520px, calc(100vh - 160px)) !important;
  padding: 20px 18px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255,250,238,.985), rgba(244,235,215,.965)) !important;
  border: 1px solid rgba(116,83,45,.14) !important;
  box-shadow: 0 24px 78px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.mg-tools-dropdown::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.dark-theme .mg-tools-dropdown,
.dark-theme .mg-tools-dropdown {
  background: linear-gradient(135deg, rgba(18,19,20,.985), rgba(13,13,12,.975)) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 24px 78px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.mg-tools-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -18px;
  right: -18px;
  height: 18px;
  z-index: 999998;
  pointer-events: auto;
}

.mg-tools-menu:hover .mg-tools-dropdown,
.mg-tools-menu:focus-within .mg-tools-dropdown,
.mg-tools-dropdown:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.mg-tools-dropdown-head {
  padding: 2px 4px 14px;
  border-bottom: 1px solid rgba(68,48,27,.13);
  margin-bottom: 14px;
}

body.dark-theme .mg-tools-dropdown-head,
.dark-theme .mg-tools-dropdown-head {
  border-bottom-color: rgba(255,255,255,.10);
}

.mg-tools-dropdown-title {
  display: block;
  color: #1f1710;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: .4rem;
}

.mg-tools-dropdown-sub {
  display: block;
  color: rgba(31,23,16,.58);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}

body.dark-theme .mg-tools-dropdown-title,
.dark-theme .mg-tools-dropdown-title {
  color: #fff3d4;
}

body.dark-theme .mg-tools-dropdown-sub,
.dark-theme .mg-tools-dropdown-sub {
  color: rgba(255,255,255,.56);
}

.mg-tools-nav .menu,
.mg-tools-fallback {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mg-tools-nav .menu li,
.mg-tools-fallback li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mg-tools-dropdown a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  color: #1f1710 !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(83,61,31,.10) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.mg-tools-dropdown a::before {
  content: '';
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: radial-gradient(circle, var(--mg-gold) 0 18%, rgba(255,195,29,.18) 20% 100%);
}

.mg-tools-dropdown a:hover {
  color: #111 !important;
  background: rgba(255,195,29,.18) !important;
  border-color: rgba(255,195,29,.55) !important;
  box-shadow: 0 6px 16px rgba(218,148,0,.14) !important;
  transform: none !important;
}

body.dark-theme .mg-tools-dropdown a,
.dark-theme .mg-tools-dropdown a {
  color: rgba(255,255,255,.90) !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.08) !important;
}

body.dark-theme .mg-tools-dropdown a:hover,
.dark-theme .mg-tools-dropdown a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,195,29,.28) !important;
}

/* --------------------------------------------------------------------------
   Footer final
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 80% 0%, rgba(111,64,27,.25), transparent 42%),
    linear-gradient(135deg, #2a120b 0%, #5e2f1d 55%, #2a120b 100%) !important;
  padding: 68px 0 !important;
  color: #fff;
}

body.dark-theme .site-footer,
.dark-theme .site-footer {
  background:
    radial-gradient(circle at 80% 0%, rgba(96,78,36,.12), transparent 42%),
    linear-gradient(135deg, #050607 0%, #111315 58%, #070707 100%) !important;
}

.mobile-footer {
  display: none;
}

.desktop-footer {
  display: block;
}

.site-footer .container {
  width: var(--mg-site-width) !important;
  max-width: var(--mg-site-max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

.footer-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 34px 38px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr) minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
  overflow: hidden !important;
  border-radius: 28px;
  border: 1px solid rgba(255,222,154,.14);
  background: rgba(34,17,11,.38);
  box-shadow: 0 28px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Alinear el contenido de cada columna verticalmente para que los títulos
   queden a la misma altura aunque el contenido difiera. */
.footer-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.footer-box-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100%;
  color: rgba(255,241,217,.78);
  gap: .7rem;
}

body.dark-theme .footer-grid,
.dark-theme .footer-grid {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  box-shadow: 0 28px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
}

.footer-box,
.footer-box-content,
.footer-social-icons,
.footer-contact-email {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.footer-box-title {
  color: var(--mg-gold) !important;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.footer-box-link,
.footer-email-link {
  color: rgba(255,241,217,.78) !important;
  text-decoration: none !important;
}

.footer-box-link:hover,
.footer-email-link:hover {
  color: #fff !important;
}

.footer-contact-email {
  width: fit-content !important;
  margin-inline: auto !important;
  flex-direction: row !important;
  gap: .55rem !important;
  padding: .58rem .9rem !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,238,202,.13) !important;
}

.footer-email-icon {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--mg-gold) !important;
  background: transparent !important;
}

.footer-social-icons {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.social-icon-footer {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  color: #fff8e8 !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,238,202,.14) !important;
  box-shadow: none !important;
}

.social-icon-footer:hover {
  color: #24160a !important;
  background: var(--mg-gold) !important;
  border-color: rgba(255,255,255,.22) !important;
  transform: translateY(-2px) !important;
}

/* --------------------------------------------------------------------------
   Responsive final
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root {
    --mg-site-gutter: 34px;
  }

  .desktop-header {
    padding-top: 58px !important;
    padding-bottom: 72px !important;
  }

  .mg-header-inner {
    grid-template-columns: 90px minmax(0, 1fr) auto !important;
    gap: 16px !important;
    padding: 16px 18px !important;
  }

  .mg-header-brand .custom-logo,
  .mg-header-brand .custom-logo-link img {
    max-height: 60px !important;
  }

  .primary-nav .menu {
    gap: 6px;
  }

  .primary-nav .menu a {
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
    font-size: .74rem;
  }

  .primary-nav .menu a:hover,
  .primary-nav .menu .current-menu-item > a,
  .primary-nav .menu .current_page_item > a,
  .primary-nav .menu .current-menu-ancestor > a {
    padding: 0 9px !important;
  }

  .mg-tools-trigger,
  .search-input,
  .theme-toggle {
    height: 42px;
    min-height: 42px;
  }

  .mg-tools-trigger {
    padding: 0 15px;
    font-size: .8rem;
  }

  .search-container {
    width: 126px;
    flex-basis: 126px;
  }

  .theme-toggle {
    width: 42px;
    flex-basis: 42px;
  }
}

@media (max-width: 1024px) {
  :root {
    --mg-site-gutter: 26px;
    --mg-content-overlap: -1.25rem;
    --mg-radius-main: 1.4rem;
  }

  .desktop-header {
    display: none !important;
  }

  .mobile-header {
    display: block !important;
  }

  .site-content {
    margin-top: var(--mg-content-overlap) !important;
  }

  .desktop-footer {
    display: none !important;
  }

  .mobile-footer {
    display: block !important;
  }

  .site-footer {
    padding: 44px 0 !important;
  }

  .site-footer .container {
    width: var(--mg-site-width) !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 30px 24px !important;
    gap: 24px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --mg-site-gutter: 18px;
  }

  .site-content {
    padding: 1.4rem 0 2rem !important;
  }

  .site-footer {
    padding: 36px 0 !important;
  }

  .footer-grid {
    padding: 26px 18px !important;
    border-radius: 22px !important;
  }

  .footer-box-title {
    font-size: 1.1rem !important;
  }
}
/* ==========================================================================
   MONITOR GARAGE - SOCIAL ICONS DARK MODE FIX
   Corrige colores raros en hover de redes sociales en modo oscuro
   ========================================================================== */

/* Base consistente en modo oscuro */
html body.dark-theme .site-footer .social-icon-footer {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
}

/* SVGs en blanco/crema, sin heredar colores raros */
html body.dark-theme .site-footer .social-icon-footer svg,
html body.dark-theme .site-footer .social-icon-footer svg path,
html body.dark-theme .site-footer .social-icon-footer svg rect,
html body.dark-theme .site-footer .social-icon-footer svg circle,
html body.dark-theme .site-footer .social-icon-footer svg polygon {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Hover común elegante para todas las redes */
html body.dark-theme .site-footer .social-icon-footer:hover {
  background: rgba(255,195,29,.16) !important;
  border-color: rgba(255,195,29,.42) !important;
  color: #ffd45a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.26) !important;
}

/* Anula colores de marca antiguos en dark mode */
html body.dark-theme .site-footer .social-icon-footer.youtube:hover,
html body.dark-theme .site-footer .social-icon-footer.tiktok:hover,
html body.dark-theme .site-footer .social-icon-footer.instagram:hover,
html body.dark-theme .site-footer .social-icon-footer.twitch:hover,
html body.dark-theme .site-footer .social-icon-footer.discord:hover,
html body.dark-theme .site-footer .social-icon-footer.telegram:hover {
  background: rgba(255,195,29,.16) !important;
  border-color: rgba(255,195,29,.42) !important;
  color: #ffd45a !important;
}

/* Si algún icono es imagen en vez de SVG */
html body.dark-theme .site-footer .social-icon-footer img {
  filter: brightness(0) invert(1) opacity(.88) !important;
}

html body.dark-theme .site-footer .social-icon-footer:hover img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(74%) saturate(678%) hue-rotate(354deg) brightness(103%) contrast(98%) !important;
}

/* ========================================================================== 
   MONITOR GARAGE - Sistema global de badges V10
   Objetivo: una misma familia visual para home, ficha, ranking, comparador,
   recomendador y futuras herramientas. Se puede pegar al final de style.css.
   ========================================================================== */

/* Base reutilizable nueva para futuras herramientas */
.mg-badge,
.mg-badge-tech,
.mg-badge-info,
.mg-badge-warning {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 26px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: #f1f1f1 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
}

/* Base puente para badges ya existentes en shortcodes */
.mg-home-badge-tech,
.imz-monitor-summary .imz-ms-tech-badge,
.mg-ranking-tech-badge,
.mg-cmp-tech-badge,
.mg-rec-tech-badge {
  border-color: rgba(255,255,255,.13) !important;
}

/* Mini LED - familia dorada */
.mg-badge-tech--mini-led,
.mg-badge-tech--mini-led-va,
.mg-badge-tech--mini-led-ips,
.mg-badge-tech--mini-led-hva,
.mg-badge-tech--qd-mini-led-va,
.mg-badge-tech--qd-mini-led-ips,
.mg-badge-tech--qd-mini-led-hva,
.mg-home-badge-mini-led,
.mg-home-badge-mini-led-va,
.mg-home-badge-mini-led-ips,
.mg-home-badge-mini-led-hva,
.mg-home-badge-qd-mini-led-va,
.mg-home-badge-qd-mini-led-ips,
.mg-home-badge-qd-mini-led-hva,
.imz-monitor-summary .imz-ms-tech-badge-mini-led,
.imz-monitor-summary .imz-ms-tech-badge-mini-led-va,
.imz-monitor-summary .imz-ms-tech-badge-mini-led-ips,
.imz-monitor-summary .imz-ms-tech-badge-mini-led-hva,
.imz-monitor-summary .imz-ms-tech-badge-qd-mini-led-va,
.imz-monitor-summary .imz-ms-tech-badge-qd-mini-led-ips,
.imz-monitor-summary .imz-ms-tech-badge-qd-mini-led-hva {
  color: #ffe08a !important;
  border-color: rgba(255,212,71,.28) !important;
}

.mg-badge-tech--mini-led,
.mg-home-badge-mini-led,
.imz-monitor-summary .imz-ms-tech-badge-mini-led { background: linear-gradient(135deg, #3a2c0d 0%, #211908 52%, #151309 100%) !important; }
.mg-badge-tech--mini-led-va,
.mg-home-badge-mini-led-va,
.imz-monitor-summary .imz-ms-tech-badge-mini-led-va { background: linear-gradient(135deg, #3a2a0f 0%, #251b0a 52%, #161207 100%) !important; }
.mg-badge-tech--mini-led-ips,
.mg-home-badge-mini-led-ips,
.imz-monitor-summary .imz-ms-tech-badge-mini-led-ips { background: linear-gradient(135deg, #3a3012 0%, #241e0c 52%, #151207 100%) !important; }
.mg-badge-tech--mini-led-hva,
.mg-home-badge-mini-led-hva,
.imz-monitor-summary .imz-ms-tech-badge-mini-led-hva { background: linear-gradient(135deg, #342b10 0%, #211c0b 52%, #141109 100%) !important; }
.mg-badge-tech--qd-mini-led-va,
.mg-home-badge-qd-mini-led-va,
.imz-monitor-summary .imz-ms-tech-badge-qd-mini-led-va { background: linear-gradient(135deg, #46330d 0%, #2a1f08 52%, #171205 100%) !important; color: #ffe59e !important; }
.mg-badge-tech--qd-mini-led-ips,
.mg-home-badge-qd-mini-led-ips,
.imz-monitor-summary .imz-ms-tech-badge-qd-mini-led-ips { background: linear-gradient(135deg, #44360f 0%, #291f09 52%, #171205 100%) !important; color: #ffe59e !important; }
.mg-badge-tech--qd-mini-led-hva,
.mg-home-badge-qd-mini-led-hva,
.imz-monitor-summary .imz-ms-tech-badge-qd-mini-led-hva { background: linear-gradient(135deg, #3d310f 0%, #261f0a 52%, #161207 100%) !important; color: #ffe59e !important; }

/* OLED */
.mg-badge-tech--woled,
.mg-home-badge-woled,
.imz-monitor-summary .imz-ms-tech-badge-woled {
  background: linear-gradient(135deg, #3a3d42 0%, #2a2d31 48%, #1f2226 100%) !important;
  border-color: rgba(255,255,255,.13) !important;
  color: #f5f5f5 !important;
}

.mg-badge-tech--qd-oled,
.mg-home-badge-qd-oled,
.imz-monitor-summary .imz-ms-tech-badge-qd-oled {
  background: linear-gradient(135deg, #463446 0%, #2e2432 50%, #1d1b22 100%) !important;
  border-color: rgba(255,120,220,.22) !important;
  color: #ffd7f4 !important;
}

.mg-badge-tech--tandem-woled,
.mg-home-badge-tandem-woled,
.imz-monitor-summary .imz-ms-tech-badge-tandem-woled {
  background: linear-gradient(135deg, #292c31 0%, #202226 50%, #151719 100%) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}

.mg-badge-tech--tandem-qd-oled,
.mg-home-badge-tandem-qd-oled,
.imz-monitor-summary .imz-ms-tech-badge-tandem-qd-oled {
  background: linear-gradient(135deg, #342c36 0%, #27222b 50%, #18171d 100%) !important;
  border-color: rgba(230,140,220,.18) !important;
  color: #f3ddeb !important;
}

/* LCD */
.mg-badge-tech--ips,
.mg-home-badge-ips,
.imz-monitor-summary .imz-ms-tech-badge-ips {
  background: linear-gradient(135deg, #17345f 0%, #10243f 52%, #0c1728 100%) !important;
  border-color: rgba(96,165,250,.28) !important;
  color: #9fd0ff !important;
}

.mg-badge-tech--fast-ips,
.mg-home-badge-fast-ips,
.imz-monitor-summary .imz-ms-tech-badge-fast-ips {
  background: linear-gradient(135deg, #123d5d 0%, #0f2f45 52%, #0b1b28 100%) !important;
  border-color: rgba(45,212,191,.25) !important;
  color: #8ee8dd !important;
}

.mg-badge-tech--va,
.mg-home-badge-va,
.imz-monitor-summary .imz-ms-tech-badge-va {
  background: linear-gradient(135deg, #26324a 0%, #1a2235 52%, #101625 100%) !important;
  border-color: rgba(129,140,248,.23) !important;
  color: #c3c8ff !important;
}

.mg-badge-tech--hva,
.mg-home-badge-hva,
.imz-monitor-summary .imz-ms-tech-badge-hva {
  background: linear-gradient(135deg, #27384c 0%, #1b2938 52%, #111a24 100%) !important;
  border-color: rgba(56,189,248,.22) !important;
  color: #b4e7ff !important;
}

.mg-badge-tech--tn,
.mg-home-badge-tn,
.imz-monitor-summary .imz-ms-tech-badge-tn {
  background: linear-gradient(135deg, #3c3325 0%, #2b241b 52%, #18140f 100%) !important;
  border-color: rgba(251,146,60,.22) !important;
  color: #ffd0a3 !important;
}

.mg-badge-tech--generic,
.mg-home-badge-generic,
.imz-monitor-summary .imz-ms-tech-badge-generic {
  background: linear-gradient(135deg, #33353a 0%, #24262b 52%, #17191d 100%) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f1f1f1 !important;
}

/* Badges secundarios reutilizables */
.mg-badge-info--ultrawide,
.mg-home-badge-format,
.imz-monitor-summary .imz-ms-info-badge-ultrawide {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
  box-shadow: 0 8px 18px rgba(55,48,163,.08) !important;
}

.mg-badge-warning--recortado,
.mg-home-badge-cut,
.imz-monitor-summary .imz-ms-warning-badge-recortado {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #9f1239 !important;
  box-shadow: 0 8px 18px rgba(159,18,57,.08) !important;
}

.mg-badge-info--gsync-pulsar,
.mg-home-badge-pulsar,
.imz-monitor-summary .imz-ms-info-badge-gsync-pulsar {
  background: #ecfdf5 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
  box-shadow: 0 8px 18px rgba(22,101,52,.08) !important;
}

.mg-badge-info--dual-mode,
.mg-home-badge-dual,
.imz-monitor-summary .imz-ms-info-badge-dual-mode {
 background: #f5f3ff !important;
  border-color: #c4b5fd !important;
  color: #5b21b6 !important;
  box-shadow: 0 8px 18px rgba(91,33,182,.08) !important;
}

html.dark-theme .mg-badge-info--ultrawide,
body.dark-theme .mg-badge-info--ultrawide,
html.dark-theme .mg-home-badge-format,
body.dark-theme .mg-home-badge-format,
html.dark-theme .imz-monitor-summary .imz-ms-info-badge-ultrawide,
body.dark-theme .imz-monitor-summary .imz-ms-info-badge-ultrawide {
  background: rgba(59,130,246,.16) !important;
  border-color: rgba(129,140,248,.38) !important;
  color: #bfdbfe !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.13) !important;
}

html.dark-theme .mg-badge-warning--recortado,
body.dark-theme .mg-badge-warning--recortado,
html.dark-theme .mg-home-badge-cut,
body.dark-theme .mg-home-badge-cut,
html.dark-theme .imz-monitor-summary .imz-ms-warning-badge-recortado,
body.dark-theme .imz-monitor-summary .imz-ms-warning-badge-recortado {
  background: rgba(127,29,29,.36) !important;
  border-color: rgba(248,113,113,.36) !important;
  color: #fecaca !important;
  box-shadow: 0 10px 22px rgba(127,29,29,.18) !important;
}

html.dark-theme .mg-badge-info--gsync-pulsar,
body.dark-theme .mg-badge-info--gsync-pulsar,
html.dark-theme .mg-home-badge-pulsar,
body.dark-theme .mg-home-badge-pulsar,
html.dark-theme .imz-monitor-summary .imz-ms-info-badge-gsync-pulsar,
body.dark-theme .imz-monitor-summary .imz-ms-info-badge-gsync-pulsar {
  background: rgba(22,163,74,.18) !important;
  border-color: rgba(74,222,128,.38) !important;
  color: #bbf7d0 !important;
}

html.dark-theme .mg-badge-info--dual-mode,
body.dark-theme .mg-badge-info--dual-mode,
html.dark-theme .mg-home-badge-dual,
body.dark-theme .mg-home-badge-dual,
html.dark-theme .imz-monitor-summary .imz-ms-info-badge-dual-mode,
body.dark-theme .imz-monitor-summary .imz-ms-info-badge-dual-mode {
  background: rgba(124,58,237,.18) !important;
  border-color: rgba(167,139,250,.38) !important;
  color: #ddd6fe !important;
  box-shadow: 0 10px 22px rgba(124,58,237,.14) !important;
}

/* ========================================================================== 
   MONITOR GARAGE - Sistema global de badges V11
   Complemento para helpers PHP globales.
   Pegar al final de style.css si no se usa el CSS V11 completo.
   ========================================================================== */

.mg-badge .mg-badge__line,
.mg-badge .mg-home-badge-line,
.mg-home-badge .mg-badge__line,
.mg-home-badge .mg-home-badge-line {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  line-height: 1 !important;
}

.mg-badge strong,
.mg-home-badge strong,
.mg-badge .mg-badge__line strong,
.mg-home-badge .mg-home-badge-line strong {
  display: inline-flex !important;
  align-items: center !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
}

.mg-badge em,
.mg-home-badge em,
.mg-badge .mg-badge__line em,
.mg-home-badge .mg-home-badge-line em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 900 !important;
  opacity: .78 !important;
  letter-spacing: -0.01em !important;
}

.mg-badge em::before,
.mg-home-badge em::before {
  content: "·";
  margin-right: 8px;
  opacity: .55;
}

.mg-badge-tech--oled,
.mg-home-badge-oled {
  background: linear-gradient(135deg, #3d3442 0%, #2b2530 50%, #1c1a21 100%) !important;
  border-color: rgba(210,150,255,.18) !important;
  color: #f1e5ff !important;
}

@media (max-width: 700px) {
  .mg-badge .mg-badge__line,
  .mg-badge .mg-home-badge-line,
  .mg-home-badge .mg-badge__line,
  .mg-home-badge .mg-home-badge-line {
    flex-wrap: wrap !important;
  }
}

/* ========================================================================== 
   FASE 7 - CSS PERSONALIZADO INTEGRADO EN EL TEMA
   Monitor Garage / IMartz
   Objetivo: mover al style.css del tema los estilos estructurales que antes
   vivían en CSS adicional de WordPress. Mantiene compatibilidad con clases
   antiguas y con el sistema global de badges mg-badge*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1. Imágenes dentro de artículos
   -------------------------------------------------------------------------- */

.single-post .entry-content img,
.single-post .entry-content figure img {
  max-width: 100% !important;
  height: auto !important;
}

.single-post .entry-content figure {
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   7.2. CTAs generales IMartz / afiliados
   -------------------------------------------------------------------------- */

.imartz-combined-cta a {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

.imartz-combined-cta a:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}

.imartz-combined-cta a:active {
  transform: translateY(0) scale(.98) !important;
}

/* --------------------------------------------------------------------------
   7.3. Embed responsive YouTube
   -------------------------------------------------------------------------- */

.imartz-video-embed {
  position: relative;
  width: 100%;
  height: 0;
  margin: 32px 0;
  padding-bottom: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

.imartz-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   7.4. Ficha monitor [monitor] - Variables y base
   -------------------------------------------------------------------------- */

.imz-monitor-summary {
  --imz-bg-main: linear-gradient(180deg, #ffffff 0%, #f4f1ea 100%);
  --imz-bg-glow: radial-gradient(circle at top right, rgba(218,148,0,.16), transparent 35%);
  --imz-bg-card: rgba(0,0,0,.035);
  --imz-bg-inner: rgba(255,255,255,.82);
  --imz-bg-score: linear-gradient(180deg, #ffffff 0%, #f3efe7 100%);
  --imz-border: rgba(0,0,0,.09);
  --imz-border-soft: rgba(0,0,0,.08);
  --imz-border-inner: rgba(0,0,0,.06);
  --imz-text-main: #151515;
  --imz-text-soft: #373737;
  --imz-text-muted: #686868;
  --imz-text-note: #707070;
  --imz-accent: #d18b00;
  --imz-accent-strong: #ffd447;
  --imz-buy-bg: linear-gradient(90deg, rgba(218,148,0,.18), rgba(218,148,0,.07));
  --imz-buy-border: rgba(218,148,0,.28);
  --imz-details-bg: rgba(37,99,235,.055);
  --imz-details-border: rgba(37,99,235,.22);
  --imz-details-accent: #2563eb;
  --imz-shadow: 0 18px 45px rgba(0,0,0,.10);
  margin: 34px 0;
  padding: 26px;
  border-radius: 24px;
  background: var(--imz-bg-glow), var(--imz-bg-main) !important;
  border: 1px solid var(--imz-border) !important;
  color: var(--imz-text-main) !important;
  box-shadow: var(--imz-shadow) !important;
  overflow: hidden;
}

html.dark-theme .imz-monitor-summary,
body.dark-theme .imz-monitor-summary {
  --imz-bg-main: linear-gradient(180deg, #161616 0%, #101010 100%);
  --imz-bg-glow: radial-gradient(circle at top right, rgba(255,196,0,.13), transparent 34%);
  --imz-bg-card: rgba(255,255,255,.045);
  --imz-bg-inner: rgba(0,0,0,.16);
  --imz-bg-score: linear-gradient(180deg, #232323 0%, #171717 100%);
  --imz-border: rgba(255,255,255,.08);
  --imz-border-soft: rgba(255,255,255,.075);
  --imz-border-inner: rgba(255,255,255,.055);
  --imz-text-main: #ffffff;
  --imz-text-soft: #d2d2d2;
  --imz-text-muted: #a8a8a8;
  --imz-text-note: #9d9d9d;
  --imz-accent: #ffd447;
  --imz-accent-strong: #ffd447;
  --imz-buy-bg: linear-gradient(90deg, rgba(255,212,71,.13), rgba(255,212,71,.045));
  --imz-buy-border: rgba(255,212,71,.24);
  --imz-details-bg: rgba(37,99,235,.10);
  --imz-details-border: rgba(96,165,250,.30);
  --imz-details-accent: #60a5fa;
  --imz-shadow: 0 18px 45px rgba(0,0,0,.24);
}

.imz-monitor-summary * {
  box-sizing: border-box;
}

html:not(.dark-theme) body:not(.dark-theme) .imz-monitor-summary {
  background: var(--imz-bg-glow), var(--imz-bg-main) !important;
  border-color: var(--imz-border) !important;
  color: var(--imz-text-main) !important;
  box-shadow: var(--imz-shadow) !important;
}

/* --------------------------------------------------------------------------
   7.5. Ficha monitor - Header, título, nota y specs
   -------------------------------------------------------------------------- */

.imz-ms-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: start;
  margin-bottom: 26px;
}

.imz-ms-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 24px !important;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--imz-bg-card) !important;
  border: 1px solid var(--imz-border-soft) !important;
  color: var(--imz-text-muted) !important;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.imz-ms-title-row,
.imz-monitor-summary .imz-ms-title-row-image {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 6px !important;
  margin-bottom: 18px !important;
}

.imz-ms-title {
  margin: 0 !important;
  color: var(--imz-text-main) !important;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.03;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.imz-ms-subtitle {
  margin: 0;
  max-width: 900px;
  color: var(--imz-text-soft) !important;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 650;
}

.imz-ms-score {
  width: 150px;
  min-height: 150px;
  padding: 14px;
  border-radius: 24px;
  background: var(--imz-bg-score) !important;
  border: 1px solid var(--imz-border-soft) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow:
    0 14px 34px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.imz-ms-score-number {
  color: var(--imz-text-main) !important;
  font-size: 50px;
  line-height: .95;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.imz-ms-score-number span {
  color: var(--imz-text-muted) !important;
  font-size: 23px;
  letter-spacing: -0.03em;
}

.imz-ms-score-price {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(218,148,0,.26);
  color: var(--imz-accent) !important;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 950;
}

.imz-ms-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.imz-ms-spec {
  padding: 15px 16px;
  border-radius: 18px;
  background: var(--imz-bg-card) !important;
  border: 1px solid var(--imz-border-soft) !important;
}

.imz-ms-spec-label {
  display: block;
  margin-bottom: 7px;
  color: var(--imz-text-muted) !important;
  font-size: 12px;
  font-weight: 850;
}

.imz-ms-spec-value {
  display: block;
  color: var(--imz-text-main) !important;
  font-size: 22px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.035em;
}

/* --------------------------------------------------------------------------
   7.6. Ficha monitor con imagen compacta
   -------------------------------------------------------------------------- */

.imz-monitor-summary.imz-monitor-summary-has-image {
  padding: 24px;
}

.imz-monitor-summary .imz-ms-image-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 20px;
  align-items: start;
  margin-bottom: 14px;
}

.imz-monitor-summary .imz-ms-image-head-copy {
  min-width: 0;
}

.imz-monitor-summary .imz-ms-image-head-copy .imz-ms-kicker {
  margin-bottom: 18px !important;
}

.imz-monitor-summary .imz-ms-score-image-card {
  margin-left: auto;
  flex-shrink: 0;
}

.imz-monitor-summary.imz-monitor-summary-has-image .imz-ms-score-image-card .imz-ms-score-number {
  font-size: 50px;
}

.imz-monitor-summary.imz-monitor-summary-has-image .imz-ms-score-image-card .imz-ms-score-number span {
  font-size: 23px;
}

.imz-monitor-summary.imz-monitor-summary-has-image .imz-ms-score-image-card .imz-ms-score-price {
  max-width: 116px;
}

.imz-monitor-summary .imz-ms-image-compact-head {
  margin-bottom: 14px;
}

.imz-monitor-summary .imz-ms-title-row-image {
  gap: 12px !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

.imz-monitor-summary .imz-ms-title-row-image .imz-ms-title {
  margin: 0 !important;
  font-size: clamp(30px, 3.35vw, 39px);
  line-height: 1.02;
}

.imz-monitor-summary .imz-ms-title-row-image .imz-ms-tech-badge,
.imz-monitor-summary .imz-ms-title-row-image .mg-badge-tech {
  flex: 0 1 auto !important;
  transform: translateY(1px) !important;
}

.imz-monitor-summary .imz-ms-subtitle-image {
  max-width: 1040px;
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.45;
}

.imz-monitor-summary .imz-ms-image-compact-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: stretch;
  margin: 16px 0 18px;
}

.imz-monitor-summary .imz-ms-media-compact {
  min-width: 0;
}

.imz-monitor-summary .imz-ms-media-link {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  color: inherit !important;
  text-decoration: none !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.14),
    0 0 38px rgba(218,148,0,.10),
    0 0 0 1px rgba(255,255,255,.10);
  isolation: isolate;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.imz-monitor-summary .imz-ms-media-link::before {
  content: "";
  position: absolute;
  inset: auto 8% -18px 8%;
  z-index: -1;
  height: 46px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 50%, rgba(37,99,235,.28), transparent 46%),
    radial-gradient(circle at 72% 50%, rgba(245,158,11,.34), transparent 48%);
  opacity: .46;
  filter: blur(18px);
  transition: opacity .18s ease;
}

.imz-monitor-summary .imz-ms-media-link:hover {
  transform: translateY(-2px) scale(1.006);
  filter: brightness(1.025);
  box-shadow:
    0 24px 54px rgba(0,0,0,.18),
    0 0 50px rgba(218,148,0,.14),
    0 0 0 1px rgba(218,148,0,.18);
}

.imz-monitor-summary .imz-ms-media-link:hover::before {
  opacity: .78;
}

.imz-monitor-summary .imz-ms-product-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

.imz-monitor-summary .imz-ms-media-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  color: #fff !important;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.imz-monitor-summary .imz-ms-media-link:hover .imz-ms-media-hint {
  opacity: 1;
  transform: translateY(0);
}

.imz-monitor-summary .imz-ms-specs-card-compact {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  padding: 18px;
  border-radius: 20px;
  background: var(--imz-bg-card) !important;
  border: 1px solid var(--imz-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.imz-monitor-summary .imz-ms-specs-card-title {
  margin-bottom: 12px;
  color: var(--imz-text-muted) !important;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.imz-monitor-summary .imz-ms-specs-card-list {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.imz-monitor-summary .imz-ms-spec-row {
  display: grid;
  grid-template-columns: minmax(90px, .72fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 9px 10px;
  border-radius: 13px;
  background: var(--imz-bg-inner) !important;
  border: 1px solid var(--imz-border-inner) !important;
}

.imz-monitor-summary .imz-ms-spec-row .imz-ms-spec-label {
  display: block;
  margin: 0 !important;
  color: var(--imz-text-muted) !important;
  font-size: 11.5px;
  line-height: 1.1;
  font-weight: 850;
}

.imz-monitor-summary .imz-ms-spec-row .imz-ms-spec-value {
  display: block;
  color: var(--imz-text-main) !important;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.035em;
  text-align: right;
}

html.dark-theme .imz-monitor-summary .imz-ms-media-link,
body.dark-theme .imz-monitor-summary .imz-ms-media-link {
  box-shadow:
    0 18px 42px rgba(0,0,0,.32),
    0 0 42px rgba(255,212,71,.10),
    0 0 0 1px rgba(255,255,255,.08);
}

/* --------------------------------------------------------------------------
   7.7. Ficha monitor - Compra, botones, veredicto y CTAs
   -------------------------------------------------------------------------- */

.imz-ms-buybox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin: 18px 0 20px;
  padding: 17px;
  border-radius: 20px;
  background: var(--imz-buy-bg) !important;
  border: 1px solid var(--imz-buy-border) !important;
}

.imz-ms-buybox-title {
  margin-bottom: 4px;
  color: var(--imz-text-main) !important;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.imz-ms-buybox-text {
  color: var(--imz-text-soft) !important;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}

.imz-ms-buy-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.imz-ms-buy-buttons-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.imz-ms-buy-button,
.imz-ms-review-button,
.imz-ms-full-review-button,
.imz-ms-video-review-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.imz-ms-buy-button:hover,
.imz-ms-review-button:hover,
.imz-ms-full-review-button:hover,
.imz-ms-video-review-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}

.imz-ms-buy-button:active,
.imz-ms-review-button:active,
.imz-ms-full-review-button:active,
.imz-ms-video-review-button:active {
  transform: translateY(0) scale(.98);
}

.imz-store-amazon { background: #ffd447 !important; color: #111 !important; box-shadow: 0 10px 22px rgba(0,0,0,.20); }
.imz-store-aliexpress { background: #ff4f00 !important; color: #fff !important; box-shadow: 0 10px 22px rgba(0,0,0,.20); }
.imz-store-pccomponentes { background: #ff8a00 !important; color: #111 !important; box-shadow: 0 10px 22px rgba(0,0,0,.20); }
.imz-store-mediamarkt { background: #e30613 !important; color: #fff !important; box-shadow: 0 10px 22px rgba(0,0,0,.20); }

.imz-ms-review-button {
  background: rgba(255,255,255,.12) !important;
  color: var(--imz-text-main) !important;
  border: 1px solid var(--imz-border-soft) !important;
}

.imz-ms-full-review-button {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.25);
}

.imz-ms-video-review-button {
  background: rgba(255,255,255,.92) !important;
  color: #111 !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

.imz-ms-verdict-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.imz-ms-verdict-card {
  padding: 18px;
  border-radius: 20px;
  background: var(--imz-bg-card) !important;
  border: 1px solid var(--imz-border-soft) !important;
}

.imz-ms-verdict-card h4 {
  margin: 0 0 12px;
  color: var(--imz-text-main) !important;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.imz-ms-verdict-card ul {
  margin: 0;
  padding-left: 18px;
}

.imz-ms-verdict-card li {
  margin-bottom: 7px;
  color: var(--imz-text-soft) !important;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.imz-ms-verdict-card li:last-child {
  margin-bottom: 0;
}

.imz-ms-full-review-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 16px 17px;
  border-radius: 20px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.22);
}

.imz-ms-full-review-cta strong {
  display: block;
  margin-bottom: 4px;
  color: var(--imz-text-main) !important;
  font-size: 15px;
  font-weight: 950;
}

.imz-ms-full-review-cta span {
  display: block;
  color: var(--imz-text-soft) !important;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.imz-ms-top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   7.8. Ficha monitor - Datos completos, tabs y pills
   -------------------------------------------------------------------------- */

.imz-ms-details {
  margin-top: 16px;
  border-radius: 20px;
  background: var(--imz-details-bg) !important;
  border: 1px solid var(--imz-details-border) !important;
  overflow: hidden;
}

.imz-ms-details summary {
  cursor: pointer;
  padding: 15px 18px !important;
  color: var(--imz-text-main) !important;
  font-size: 14px;
  font-weight: 950;
  list-style: none;
}

.imz-ms-details summary::-webkit-details-marker {
  display: none;
}

.imz-ms-details summary::after {
  content: "+";
  float: right;
  color: var(--imz-details-accent) !important;
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
}

.imz-ms-details[open] summary {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.imz-ms-details[open] summary::after {
  content: "–";
}

.imz-ms-details-inner {
  padding: 10px 12px 12px !important;
}

.imz-monitor-summary .imz-ms-details-tabs .imz-ms-details-inner {
  padding: 12px !important;
}

.imz-ms-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.imz-ms-category {
  padding: 16px !important;
  border-radius: 18px !important;
  background: var(--imz-bg-card) !important;
  border: 1px solid var(--imz-border-soft) !important;
}

.imz-ms-category-wide {
  grid-column: 1 / -1;
}

.imz-ms-category-title {
  margin: 0 0 12px !important;
  color: var(--imz-text-main) !important;
  font-size: 15px !important;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.imz-ms-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px !important;
}

.imz-ms-data {
  padding: 11px 12px !important;
  border-radius: 13px !important;
  background: var(--imz-bg-inner) !important;
  border: 1px solid var(--imz-border-inner) !important;
}

.imz-ms-data-label {
  display: block;
  margin-bottom: 5px !important;
  color: var(--imz-text-muted) !important;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

.imz-ms-data-value {
  display: block;
  color: var(--imz-text-main) !important;
  font-size: 16px !important;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.025em;
}

.imz-ms-data-extra {
  display: block;
  margin-top: 5px;
  color: var(--imz-text-note) !important;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 650;
}

.imz-monitor-summary .imz-ms-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 9px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,212,71,.10), rgba(37,99,235,.055)), var(--imz-bg-card) !important;
  border: 1px solid rgba(255,212,71,.16) !important;
}

.imz-monitor-summary .imz-ms-tab {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--imz-border-soft) !important;
  border-radius: 999px;
  background: var(--imz-bg-inner) !important;
  color: var(--imz-text-muted) !important;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.imz-monitor-summary .imz-ms-tab:hover {
  transform: translateY(-1px);
  color: var(--imz-text-main) !important;
  border-color: rgba(255,212,71,.26) !important;
  filter: brightness(1.03);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.imz-monitor-summary .imz-ms-tab.is-active {
  background: linear-gradient(135deg, #ffd447, #e6a900) !important;
  border-color: rgba(255,212,71,.44) !important;
  color: #111 !important;
  box-shadow: 0 12px 28px rgba(218,148,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}

.imz-monitor-summary .imz-ms-tab-panel {
  display: none;
  padding: 16px !important;
  border-radius: 18px !important;
  background: var(--imz-bg-card) !important;
  border: 1px solid var(--imz-border-soft) !important;
  animation: imzMsTabIn .22s ease both;
}

.imz-monitor-summary .imz-ms-tab-panel.is-active {
  display: block;
}

@keyframes imzMsTabIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.imz-monitor-summary .imz-ms-details-tabs .imz-ms-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.imz-ms-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 72px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.imz-ms-good { background: rgba(52,211,153,.14) !important; color: #047857 !important; border: 1px solid rgba(52,211,153,.25) !important; }
.imz-ms-ok { background: rgba(250,204,21,.13) !important; color: #a16207 !important; border: 1px solid rgba(250,204,21,.24) !important; }
.imz-ms-bad { background: rgba(248,113,113,.13) !important; color: #c24141 !important; border: 1px solid rgba(248,113,113,.25) !important; }
.imz-ms-neutral { background: rgba(148,163,184,.13) !important; color: #475569 !important; border: 1px solid rgba(148,163,184,.22) !important; }

html.dark-theme .imz-ms-good, body.dark-theme .imz-ms-good { color: #8ff0bd !important; }
html.dark-theme .imz-ms-ok, body.dark-theme .imz-ms-ok { color: #fde047 !important; }
html.dark-theme .imz-ms-bad, body.dark-theme .imz-ms-bad { color: #fca5a5 !important; }
html.dark-theme .imz-ms-neutral, body.dark-theme .imz-ms-neutral { color: #cbd5e1 !important; }

.imz-ms-note {
  margin-top: 16px;
  color: var(--imz-text-note) !important;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 550;
}

/* --------------------------------------------------------------------------
   7.9. Ranking - ajustes finos globalizados
   -------------------------------------------------------------------------- */

.mg-ranking-wrap .mg-ranking-control select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 40px !important;
  background-color: var(--mg-bg-inner) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23a8a8a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 14px 14px !important;
}

.mg-ranking-wrap .mg-ranking-control select::-ms-expand {
  display: none !important;
}

.mg-ranking-wrap .mg-ranking-advanced {
  background: rgba(255,212,71,.045) !important;
  border-color: rgba(255,212,71,.14) !important;
}

html.dark-theme .mg-ranking-wrap .mg-ranking-advanced,
body.dark-theme .mg-ranking-wrap .mg-ranking-advanced {
  background: rgba(255,212,71,.055) !important;
  border-color: rgba(255,212,71,.16) !important;
}

.mg-ranking-wrap .mg-ranking-advanced summary,
.mg-ranking-wrap .mg-ranking-details summary {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.mg-ranking-wrap .mg-ranking-advanced summary::after,
.mg-ranking-wrap .mg-ranking-details summary::after {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: auto !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  transform: translateY(0) !important;
}

.mg-ranking-wrap .mg-ranking-advanced summary::after {
  color: var(--mg-accent) !important;
}

.mg-ranking-wrap .mg-ranking-details summary::after {
  color: var(--mg-blue) !important;
}

/* --------------------------------------------------------------------------
   7.10. Responsive ficha / CSS integrado
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .imz-ms-categories { grid-template-columns: 1fr; }
  .imz-ms-category-wide { grid-column: auto; }
}

@media (max-width: 900px) {
  .imz-monitor-summary .imz-ms-image-compact-body { grid-template-columns: 1fr; }
  .imz-monitor-summary .imz-ms-specs-card-compact { aspect-ratio: auto; }
}

@media (max-width: 800px) {
  .imz-ms-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imz-ms-category-grid { grid-template-columns: 1fr; }
  .imz-ms-verdict-grid { grid-template-columns: 1fr; }
  .imz-ms-full-review-cta { grid-template-columns: 1fr; }
  .imz-ms-top-actions { width: 100%; justify-content: stretch; }
  .imz-ms-full-review-button,
  .imz-ms-video-review-button { width: 100%; }
  .imz-monitor-summary .imz-ms-image-head-grid { grid-template-columns: 1fr; gap: 14px; }
  .imz-monitor-summary .imz-ms-score-image-card { margin-left: 0; }
  .imz-monitor-summary .imz-ms-details-tabs .imz-ms-category-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  html:not(.dark-theme) body:not(.dark-theme) .imz-monitor-summary,
  html:not(.dark-theme) body:not(.dark-theme) .imz-monitor-summary * {
    color-scheme: light !important;
  }

  .imz-monitor-summary {
    margin: 28px 0;
    padding: 18px;
    border-radius: 20px;
  }

  .imz-monitor-summary.imz-monitor-summary-has-image {
    padding: 18px;
  }

  .imz-ms-header {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 22px;
  }

  .imz-ms-kicker { margin-bottom: 18px !important; }

  .imz-ms-title-row,
  .imz-monitor-summary .imz-ms-title-row-image {
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 4px !important;
    margin-bottom: 14px !important;
  }

  .imz-ms-title { font-size: clamp(28px, 9vw, 38px); }
  .imz-monitor-summary .imz-ms-title-row-image .imz-ms-title { width: 100%; }
  .imz-ms-subtitle { font-size: 15px; }

  .imz-monitor-summary .imz-ms-tech-badge,
  .imz-monitor-summary .mg-badge-tech {
    transform: none !important;
  }

  .imz-ms-score,
  .imz-monitor-summary.imz-monitor-summary-has-image .imz-ms-score-image-card {
    width: 100%;
    min-height: auto;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    border-radius: 18px;
  }

  .imz-ms-score-number,
  .imz-monitor-summary.imz-monitor-summary-has-image .imz-ms-score-image-card .imz-ms-score-number {
    font-size: 42px;
  }

  .imz-ms-score-price,
  .imz-monitor-summary.imz-monitor-summary-has-image .imz-ms-score-image-card .imz-ms-score-price {
    margin-top: 0;
    padding-top: 0;
    padding-left: 12px;
    border-top: 0;
    border-left: 1px solid rgba(218,148,0,.26);
    max-width: 150px;
    text-align: right;
  }

  .imz-ms-buybox { grid-template-columns: 1fr; }
  .imz-ms-buy-actions,
  .imz-ms-buy-buttons-row { width: 100%; align-items: stretch; justify-content: stretch; }
  .imz-ms-buy-button,
  .imz-ms-review-button { width: 100%; }

  .imz-monitor-summary .imz-ms-media-hint { opacity: 1; transform: none; }

  .mg-ranking-wrap .mg-ranking-control select {
    background-position: right 14px center !important;
    padding-right: 38px !important;
  }

  .mg-ranking-wrap .mg-ranking-advanced summary,
  .mg-ranking-wrap .mg-ranking-details summary {
    min-height: 46px !important;
  }
}

@media (max-width: 520px) {
  .imz-ms-specs { grid-template-columns: 1fr; }

  .imz-ms-score,
  .imz-monitor-summary.imz-monitor-summary-has-image .imz-ms-score-image-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .imz-ms-score-price,
  .imz-monitor-summary.imz-monitor-summary-has-image .imz-ms-score-image-card .imz-ms-score-price {
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid rgba(218,148,0,.26);
    max-width: none;
    text-align: left;
  }

  .imz-monitor-summary .imz-ms-specs-card-compact { padding: 14px; }

  .imz-monitor-summary .imz-ms-spec-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 4px;
  }

  .imz-monitor-summary .imz-ms-spec-row .imz-ms-spec-value {
    text-align: left;
  }
}

/* ========================================================================== 
   FIN FASE 7
   ========================================================================== */

/* ==========================================================================
   FASE 8 - Sistema global de cabeceras para herramientas Monitor Garage
   ========================================================================== */

@keyframes mgToolEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.992);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.mg-tool-shell {
  animation: mgToolEnter .46s cubic-bezier(.2,.75,.25,1) both;
}

.mg-tool-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  padding-top: 4px;
  margin-bottom: 26px;
}

.mg-tool-head-main {
  min-width: 0;
}

.mg-tool-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.62);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}

.mg-tool-title {
  margin: 0;
  color: #151515;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: .98;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.mg-tool-subtitle {
  max-width: 960px;
  margin: 14px 0 0;
  color: rgba(21,21,21,.78);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 650;
}

.mg-tool-stat {
  min-width: 120px;
  min-height: 88px;
  padding: 16px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(37,99,235,.12), rgba(255,212,71,.055)),
    rgba(0,0,0,.035);
  border: 1px solid rgba(96,165,250,.18);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}

.mg-tool-stat span {
  color: rgba(21,21,21,.58);
  font-size: 12px;
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.mg-tool-stat strong {
  display: inline-block;
  margin-top: 6px;
  font-size: 42px;
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.mg-tool-body {
  min-width: 0;
}

html.dark-theme .mg-tool-kicker,
body.dark-theme .mg-tool-kicker {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.09);
  color: rgba(255,255,255,.64);
}

html.dark-theme .mg-tool-title,
body.dark-theme .mg-tool-title {
  color: #ffffff;
}

html.dark-theme .mg-tool-subtitle,
body.dark-theme .mg-tool-subtitle {
  color: rgba(255,255,255,.76);
}

html.dark-theme .mg-tool-stat,
body.dark-theme .mg-tool-stat {
  background:
    linear-gradient(135deg, rgba(37,99,235,.18), rgba(255,212,71,.08)),
    rgba(255,255,255,.045);
  border-color: rgba(96,165,250,.24);
}

html.dark-theme .mg-tool-stat span,
body.dark-theme .mg-tool-stat span {
  color: rgba(255,255,255,.64);
}

@media (max-width: 900px) {
  .mg-tool-head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 22px;
  }

  .mg-tool-stat {
    width: 100%;
    min-height: auto;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 600px) {
  .mg-tool-kicker {
    margin-bottom: 15px;
    white-space: normal;
  }

  .mg-tool-title {
    font-size: clamp(30px, 10vw, 42px);
  }

  .mg-tool-subtitle {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-tool-shell {
    animation: none !important;
  }
}

/* ========================================================================== 
   FASE 8.1.1 - Corrección de aire superior en herramientas
   ========================================================================== */

html body.page-template-template-tools-full .mg-tool-content > .mg-tool-shell:first-child,
html body.post-template-template-tools-full .mg-tool-content > .mg-tool-shell:first-child,
html body.home .mg-tool-content > .mg-tool-shell:first-child,
html body.front-page .mg-tool-content > .mg-tool-shell:first-child {
  padding-top: 36px !important;
}

@media (max-width: 700px) {
  html body.page-template-template-tools-full .mg-tool-content > .mg-tool-shell:first-child,
html body.post-template-template-tools-full .mg-tool-content > .mg-tool-shell:first-child,
html body.home .mg-tool-content > .mg-tool-shell:first-child,
html body.front-page .mg-tool-content > .mg-tool-shell:first-child {
    padding-top: 22px !important;
  }
}

/* ========================================================================== 
   FIN FASE 8.1
   ========================================================================== */
/* ==========================================================================
   MONITOR GARAGE - Animación global de páginas y herramientas
   ========================================================================== */

@keyframes mgPageEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.994);
    filter: blur(1.5px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Páginas normales, posts, archivos, búsqueda, 404 */
body:not(.page-template-template-tools-full):not(.post-template-template-tools-full) .site-content {
  animation: mgPageEnter .42s cubic-bezier(.2, .75, .25, 1) both;
}

/* En plantilla de herramientas, .site-content es técnico/transparente:
   animamos el primer bloque real de la herramienta. */
body.page-template-template-tools-full .mg-tool-content > :is(
  .mg-tool-shell,
  .mg-home,
  .mg-about,
  .mg-ranking-wrap,
  .mg-ranking,
  .ranking-monitores,
  .mg-cmp-wrap,
  .mg-comparator-wrap,
  .mg-comparador-wrap,
  .mg-rec-wrap,
  .mg-recommender-wrap,
  .mg-recomendador-wrap,
  .mg-ppi-wrap,
  .mg-ppi,
  .mg-ppi-tool,
  .mg-size-v5,
  .mg-size-v6,
  .mg-size-v7,
  .mg-size-v8,
  .mg-size-sim,
  .mg-size-wrap,
  .mg-sim-wrap,
  .mg-simulator-wrap,
  .mg-sizesim-wrap,
  .mg-gloss-wrap,
  .mg-glossary-wrap,
  .mg-glossary,
  .mg-glosario-wrap,
  .mg-glosario,
  .mg-distance-wrap,
  .mg-distance,
  .mg-viewing-distance-wrap,
  .mg-bandwidth-wrap,
  .mg-bandwidth,
  .mg-bw-wrap,
  .imz-monitor-summary-layout-tool
):first-child,
body.post-template-template-tools-full .mg-tool-content > :is(
  .mg-tool-shell,
  .mg-home,
  .mg-about,
  .mg-ranking-wrap,
  .mg-ranking,
  .ranking-monitores,
  .mg-cmp-wrap,
  .mg-comparator-wrap,
  .mg-comparador-wrap,
  .mg-rec-wrap,
  .mg-recommender-wrap,
  .mg-recomendador-wrap,
  .mg-ppi-wrap,
  .mg-ppi,
  .mg-ppi-tool,
  .mg-size-v5,
  .mg-size-v6,
  .mg-size-v7,
  .mg-size-v8,
  .mg-size-sim,
  .mg-size-wrap,
  .mg-sim-wrap,
  .mg-simulator-wrap,
  .mg-sizesim-wrap,
  .mg-gloss-wrap,
  .mg-glossary-wrap,
  .mg-glossary,
  .mg-glosario-wrap,
  .mg-glosario,
  .mg-distance-wrap,
  .mg-distance,
  .mg-viewing-distance-wrap,
  .mg-bandwidth-wrap,
  .mg-bandwidth,
  .mg-bw-wrap,
  .imz-monitor-summary-layout-tool
):first-child {
  animation: mgPageEnter .46s cubic-bezier(.2, .75, .25, 1) both;
  will-change: opacity, transform, filter;
}

/* Fallback por si WordPress mete un nodo o párrafo vacío antes del shortcode */
body.page-template-template-tools-full .mg-tool-content :is(
  .mg-tool-shell,
  .mg-home,
  .mg-about,
  .mg-ranking-wrap,
  .mg-ranking,
  .ranking-monitores,
  .mg-cmp-wrap,
  .mg-comparator-wrap,
  .mg-comparador-wrap,
  .mg-rec-wrap,
  .mg-recommender-wrap,
  .mg-recomendador-wrap,
  .mg-ppi-wrap,
  .mg-ppi,
  .mg-ppi-tool,
  .mg-size-v5,
  .mg-size-v6,
  .mg-size-v7,
  .mg-size-v8,
  .mg-size-sim,
  .mg-size-wrap,
  .mg-sim-wrap,
  .mg-simulator-wrap,
  .mg-sizesim-wrap,
  .mg-gloss-wrap,
  .mg-glossary-wrap,
  .mg-glossary,
  .mg-glosario-wrap,
  .mg-glosario,
  .mg-distance-wrap,
  .mg-distance,
  .mg-viewing-distance-wrap,
  .mg-bandwidth-wrap,
  .mg-bandwidth,
  .mg-bw-wrap,
  .imz-monitor-summary-layout-tool
):first-of-type,
body.post-template-template-tools-full .mg-tool-content :is(
  .mg-tool-shell,
  .mg-home,
  .mg-about,
  .mg-ranking-wrap,
  .mg-ranking,
  .ranking-monitores,
  .mg-cmp-wrap,
  .mg-comparator-wrap,
  .mg-comparador-wrap,
  .mg-rec-wrap,
  .mg-recommender-wrap,
  .mg-recomendador-wrap,
  .mg-ppi-wrap,
  .mg-ppi,
  .mg-ppi-tool,
  .mg-size-v5,
  .mg-size-v6,
  .mg-size-v7,
  .mg-size-v8,
  .mg-size-sim,
  .mg-size-wrap,
  .mg-sim-wrap,
  .mg-simulator-wrap,
  .mg-sizesim-wrap,
  .mg-gloss-wrap,
  .mg-glossary-wrap,
  .mg-glossary,
  .mg-glosario-wrap,
  .mg-glosario,
  .mg-distance-wrap,
  .mg-distance,
  .mg-viewing-distance-wrap,
  .mg-bandwidth-wrap,
  .mg-bandwidth,
  .mg-bw-wrap,
  .imz-monitor-summary-layout-tool
):first-of-type {
  animation: mgPageEnter .46s cubic-bezier(.2, .75, .25, 1) both;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  body:not(.page-template-template-tools-full):not(.post-template-template-tools-full) .site-content,
body.page-template-template-tools-full .mg-tool-content > :is(
    .mg-tool-shell,
    .mg-home,
    .mg-about,
    .mg-ranking-wrap,
    .mg-ranking,
    .ranking-monitores,
    .mg-cmp-wrap,
    .mg-comparator-wrap,
    .mg-comparador-wrap,
    .mg-rec-wrap,
    .mg-recommender-wrap,
    .mg-recomendador-wrap,
    .mg-ppi-wrap,
    .mg-ppi,
    .mg-ppi-tool,
    .mg-size-v5,
    .mg-size-v6,
    .mg-size-v7,
    .mg-size-v8,
    .mg-size-sim,
    .mg-size-wrap,
    .mg-sim-wrap,
    .mg-simulator-wrap,
    .mg-sizesim-wrap,
    .mg-gloss-wrap,
    .mg-glossary-wrap,
    .mg-glossary,
    .mg-glosario-wrap,
    .mg-glosario,
    .mg-distance-wrap,
    .mg-distance,
    .mg-viewing-distance-wrap,
    .mg-bandwidth-wrap,
    .mg-bandwidth,
    .mg-bw-wrap,
    .imz-monitor-summary-layout-tool
  ):first-child,
body.post-template-template-tools-full .mg-tool-content > :is(
    .mg-tool-shell,
    .mg-home,
    .mg-about,
    .mg-ranking-wrap,
    .mg-ranking,
    .ranking-monitores,
    .mg-cmp-wrap,
    .mg-comparator-wrap,
    .mg-comparador-wrap,
    .mg-rec-wrap,
    .mg-recommender-wrap,
    .mg-recomendador-wrap,
    .mg-ppi-wrap,
    .mg-ppi,
    .mg-ppi-tool,
    .mg-size-v5,
    .mg-size-v6,
    .mg-size-v7,
    .mg-size-v8,
    .mg-size-sim,
    .mg-size-wrap,
    .mg-sim-wrap,
    .mg-simulator-wrap,
    .mg-sizesim-wrap,
    .mg-gloss-wrap,
    .mg-glossary-wrap,
    .mg-glossary,
    .mg-glosario-wrap,
    .mg-glosario,
    .mg-distance-wrap,
    .mg-distance,
    .mg-viewing-distance-wrap,
    .mg-bandwidth-wrap,
    .mg-bandwidth,
    .mg-bw-wrap,
    .imz-monitor-summary-layout-tool
  ):first-child,
body.page-template-template-tools-full .mg-tool-content :is(
    .mg-tool-shell,
    .mg-home,
    .mg-about,
    .mg-ranking-wrap,
    .mg-ranking,
    .ranking-monitores,
    .mg-cmp-wrap,
    .mg-comparator-wrap,
    .mg-comparador-wrap,
    .mg-rec-wrap,
    .mg-recommender-wrap,
    .mg-recomendador-wrap,
    .mg-ppi-wrap,
    .mg-ppi,
    .mg-ppi-tool,
    .mg-size-v5,
    .mg-size-v6,
    .mg-size-v8,
    .mg-size-sim,
    .mg-size-wrap,
    .mg-sim-wrap,
    .mg-simulator-wrap,
    .mg-sizesim-wrap,
    .mg-gloss-wrap,
    .mg-glossary-wrap,
    .mg-glossary,
    .mg-glosario-wrap,
    .mg-glosario,
    .mg-distance-wrap,
    .mg-distance,
    .mg-viewing-distance-wrap,
    .mg-bandwidth-wrap,
    .mg-bandwidth,
    .mg-bw-wrap,
    .imz-monitor-summary-layout-tool
  ):first-of-type,
body.post-template-template-tools-full .mg-tool-content :is(
    .mg-tool-shell,
    .mg-home,
    .mg-about,
    .mg-ranking-wrap,
    .mg-ranking,
    .ranking-monitores,
    .mg-cmp-wrap,
    .mg-comparator-wrap,
    .mg-comparador-wrap,
    .mg-rec-wrap,
    .mg-recommender-wrap,
    .mg-recomendador-wrap,
    .mg-ppi-wrap,
    .mg-ppi,
    .mg-ppi-tool,
    .mg-size-v5,
    .mg-size-v6,
    .mg-size-v8,
    .mg-size-sim,
    .mg-size-wrap,
    .mg-sim-wrap,
    .mg-simulator-wrap,
    .mg-sizesim-wrap,
    .mg-gloss-wrap,
    .mg-glossary-wrap,
    .mg-glossary,
    .mg-glosario-wrap,
    .mg-glosario,
    .mg-distance-wrap,
    .mg-distance,
    .mg-viewing-distance-wrap,
    .mg-bandwidth-wrap,
    .mg-bandwidth,
    .mg-bw-wrap,
    .imz-monitor-summary-layout-tool
  ):first-of-type {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
/* ==========================================================================
   MONITOR GARAGE - Category archive V1
   File: category.php + this CSS block in style.css
   ========================================================================== */

.mg-cat-page {
  width: min(1120px, 92vw);
  margin: clamp(70px, 9vw, 118px) auto 72px;
  padding: 0;
  color: #151515;
}

.mg-cat-archive {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3.2vw, 42px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 10%, rgba(37,99,235,.10), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(255,212,71,.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7f2e7 100%);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 24px 70px rgba(15,23,42,.12);
  animation: mgPageEnter .46s cubic-bezier(.2, .75, .25, 1) both;
}

.mg-cat-archive::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.68), transparent 36%, rgba(255,212,71,.08)),
    radial-gradient(circle at 50% 100%, rgba(218,148,0,.08), transparent 46%);
  opacity: .9;
}

.mg-cat-archive > * {
  position: relative;
  z-index: 1;
}

.mg-cat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  margin-bottom: 26px;
}

.mg-cat-kicker {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.mg-cat-title {
  max-width: 780px;
  margin: 0;
  color: #111111;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: .98;
  font-weight: 850;
  letter-spacing: -.04em;
}

.mg-cat-subtitle {
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(15,23,42,.72);
  font-size: clamp(15.5px, 1.55vw, 18px);
  line-height: 1.48;
  font-weight: 750;
}

.mg-cat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.mg-cat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

.mg-cat-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.mg-cat-action-primary {
  background: linear-gradient(135deg, #ffd447, #f2b600);
  color: #111 !important;
  box-shadow: 0 14px 26px rgba(218,148,0,.22);
}

.mg-cat-action-blue {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(37,99,235,.24);
}

.mg-cat-action-ghost {
  background: rgba(255,255,255,.82);
  color: #141414 !important;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}

.mg-cat-stat {
  display: grid;
  place-items: center;
  min-width: 150px;
  min-height: 128px;
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,245,249,.82));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 18px 40px rgba(15,23,42,.08);
  text-align: center;
}

.mg-cat-stat strong {
  display: block;
  color: #111;
  font-size: clamp(42px, 5vw, 60px);
  line-height: .85;
  font-weight: 950;
  letter-spacing: -.07em;
}

.mg-cat-stat span {
  display: block;
  max-width: 120px;
  margin-top: 10px;
  color: rgba(15,23,42,.58);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mg-cat-shortcuts {
  margin: 0 0 22px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}

.mg-cat-shortcuts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.mg-cat-shortcuts-head span {
  color: rgba(15,23,42,.62);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.mg-cat-shortcuts-head em {
  color: rgba(15,23,42,.54);
  font-size: 12.5px;
  line-height: 1.3;
  font-style: normal;
  font-weight: 750;
}

.mg-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mg-cat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,23,42,.08);
  color: #242424;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15,23,42,.045);
}

.mg-cat-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 16px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  border: 1px solid rgba(15,23,42,.075);
}

.mg-cat-section-bar h2 {
  margin: 0;
  color: #151515;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.mg-cat-section-bar span {
  color: #d18b00;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.mg-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.mg-cat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 16px 40px rgba(15,23,42,.09);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mg-cat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(218,148,0,.22);
  box-shadow: 0 24px 56px rgba(15,23,42,.14);
}

.mg-cat-card-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e8e1d5;
  color: inherit !important;
  text-decoration: none !important;
}

.mg-cat-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .25s ease, filter .25s ease;
}

.mg-cat-card:hover .mg-cat-card-media img {
  transform: scale(1.025);
  filter: brightness(1.035);
}

.mg-cat-card-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 25% 25%, rgba(37,99,235,.12), transparent 38%),
    linear-gradient(135deg, #f7f2e7, #e8edf7);
  color: rgba(15,23,42,.52);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mg-cat-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.mg-cat-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.mg-cat-card-meta time {
  color: #c17618;
  font-size: 12.5px;
  font-weight: 800;
}

.mg-cat-card-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(193,103,24,.12);
  border: 1px solid rgba(193,103,24,.18);
  color: #a35214 !important;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  text-decoration: none !important;
}

.mg-cat-card-title {
  margin: 0 0 12px;
  color: #111;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.045em;
}

.mg-cat-card-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.mg-cat-card-excerpt {
  margin: 0 0 18px;
  color: rgba(15,23,42,.72);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 650;
}

.mg-cat-card-link {
  margin-top: auto;
  width: fit-content;
  color: #82431f !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
  text-decoration: none !important;
}

.mg-cat-card-link:hover {
  color: #d18b00 !important;
}

.mg-cat-pagination {
  margin-top: 28px;
}

.mg-cat-pagination .navigation,
.mg-cat-pagination .pagination,
.mg-cat-pagination .nav-links {
  margin: 0;
}

.mg-cat-empty {
  padding: 28px;
  border-radius: 22px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,23,42,.08);
}

.mg-cat-empty h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.mg-cat-empty p {
  margin: 0;
  color: rgba(15,23,42,.68);
  font-weight: 700;
}

/* Accent variants */
.mg-cat-accent-blue .mg-cat-section-bar span,
.mg-cat-accent-blue .mg-cat-card-link:hover { color: #2563eb !important; }
.mg-cat-accent-red .mg-cat-section-bar span,
.mg-cat-accent-red .mg-cat-card-link:hover { color: #dc2626 !important; }
.mg-cat-accent-violet .mg-cat-section-bar span,
.mg-cat-accent-violet .mg-cat-card-link:hover { color: #7c3aed !important; }

.mg-cat-accent-blue .mg-cat-action-primary {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  color: #fff !important;
}

.mg-cat-accent-red .mg-cat-action-primary {
  background: linear-gradient(135deg, #fb7185, #dc2626);
  color: #fff !important;
}

.mg-cat-accent-violet .mg-cat-action-primary {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff !important;
}

/* Dark mode */
html.dark-theme .mg-cat-page,
body.dark-theme .mg-cat-page {
  color: #f5f5f5;
}

html.dark-theme .mg-cat-archive,
body.dark-theme .mg-cat-archive {
  background:
    radial-gradient(circle at 12% 10%, rgba(37,99,235,.11), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(255,212,71,.12), transparent 34%),
    linear-gradient(180deg, #171717 0%, #111111 100%);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}

html.dark-theme .mg-cat-kicker,
body.dark-theme .mg-cat-kicker,
html.dark-theme .mg-cat-shortcuts,
body.dark-theme .mg-cat-shortcuts,
html.dark-theme .mg-cat-section-bar,
body.dark-theme .mg-cat-section-bar,
html.dark-theme .mg-cat-card,
body.dark-theme .mg-cat-card,
html.dark-theme .mg-cat-empty,
body.dark-theme .mg-cat-empty {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.08);
}

html.dark-theme .mg-cat-title,
body.dark-theme .mg-cat-title,
html.dark-theme .mg-cat-section-bar h2,
body.dark-theme .mg-cat-section-bar h2,
html.dark-theme .mg-cat-card-title,
body.dark-theme .mg-cat-card-title,
html.dark-theme .mg-cat-empty h2,
body.dark-theme .mg-cat-empty h2 {
  color: #fff;
}

html.dark-theme .mg-cat-subtitle,
body.dark-theme .mg-cat-subtitle,
html.dark-theme .mg-cat-shortcuts-head em,
body.dark-theme .mg-cat-shortcuts-head em,
html.dark-theme .mg-cat-card-excerpt,
body.dark-theme .mg-cat-card-excerpt,
html.dark-theme .mg-cat-empty p,
body.dark-theme .mg-cat-empty p {
  color: rgba(255,255,255,.72);
}

html.dark-theme .mg-cat-kicker,
body.dark-theme .mg-cat-kicker,
html.dark-theme .mg-cat-shortcuts-head span,
body.dark-theme .mg-cat-shortcuts-head span {
  color: rgba(255,255,255,.62);
}

html.dark-theme .mg-cat-stat,
body.dark-theme .mg-cat-stat {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border-color: rgba(255,255,255,.09);
}

html.dark-theme .mg-cat-stat strong,
body.dark-theme .mg-cat-stat strong {
  color: #fff;
}

html.dark-theme .mg-cat-stat span,
body.dark-theme .mg-cat-stat span {
  color: rgba(255,255,255,.62);
}

html.dark-theme .mg-cat-chip,
body.dark-theme .mg-cat-chip,
html.dark-theme .mg-cat-action-ghost,
body.dark-theme .mg-cat-action-ghost {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.09);
  color: #f5f5f5 !important;
}

html.dark-theme .mg-cat-card-pill,
body.dark-theme .mg-cat-card-pill {
  background: rgba(255,212,71,.12);
  border-color: rgba(255,212,71,.22);
  color: #fde68a !important;
}

@media (max-width: 860px) {
  .mg-cat-page {
    width: min(94vw, 760px);
    margin-top: 48px;
  }

  .mg-cat-hero {
    grid-template-columns: 1fr;
  }

  .mg-cat-stat {
    width: 100%;
    min-height: 0;
    grid-template-columns: auto 1fr;
    place-items: center start;
    gap: 12px;
    text-align: left;
  }

  .mg-cat-stat strong {
    font-size: 44px;
  }

  .mg-cat-stat span {
    max-width: none;
    margin-top: 0;
  }

  .mg-cat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .mg-cat-archive {
    padding: 20px;
    border-radius: 22px;
  }

  .mg-cat-title {
    font-size: clamp(34px, 12vw, 46px);
  }

  .mg-cat-actions {
    flex-direction: column;
  }

  .mg-cat-action {
    width: 100%;
  }

  .mg-cat-section-bar {
    align-items: flex-start;
    flex-direction: column;
    border-radius: 18px;
  }

  .mg-cat-card-body {
    padding: 17px;
  }
}

/* ==========================================================================
   BUTTONS HEADER & MOBILE - HOVER STATE CONSOLIDADO
   --------------------------------------------------------------------------
   Estado :hover común a botones de search, theme-toggle (desktop y mobile).
   ========================================================================== */

.search-button:hover,
.theme-toggle:hover,
.mobile-theme-toggle:hover,
.mobile-search-button:hover {
  color: var(--color-coffee-400);
  background-color: rgba(255,255,255,.1);
}

/* ==========================================================================
   DARK MODE - COLORES DE TEXTO CONSOLIDADOS
   --------------------------------------------------------------------------
   Las múltiples reglas individuales que aplicaban estos colores se han
   unificado aquí. Si hay que sobreescribir algún color en dark mode,
   añadir la regla específica DESPUÉS de este bloque.
   ========================================================================== */

body.dark-theme .breadcrumbs a:hover,
body.dark-theme .breadcrumbs .current,
body.dark-theme .error-404-title,
body.dark-theme .error-404-links-title,
.dark-theme .footer-email-link,
body.dark-theme .search-title,
body.dark-theme .no-results-message,
body.dark-theme .footer-link:hover,
body.dark-theme .footer-box-content,
body.dark-theme .footer-box-link:hover,
body.dark-theme .post-title a,
body.dark-theme .post-read-more:hover,
body.dark-theme .entry-title,
body.dark-theme .entry-content,
body.dark-theme .entry-content p,
body.dark-theme .entry-content h1,
body.dark-theme .entry-content h2,
body.dark-theme .entry-content h3,
body.dark-theme .entry-content h4,
body.dark-theme .entry-content h5,
body.dark-theme .entry-content h6,
body.dark-theme .entry-content a:hover {
  color: var(--dark-text-primary);
}

body.dark-theme .breadcrumbs a,
body.dark-theme .breadcrumbs .separator,
.dark-theme .primary-nav .menu a,
.dark-theme .site-subtitle,
.dark-theme .site-intro,
.dark-theme .footer-nav .menu a,
body.dark-theme .error-404-description,
body.dark-theme .error-404-link,
body.dark-theme .error-404-search-title,
body.dark-theme .search-subtitle,
body.dark-theme .no-results-suggestion,
body.dark-theme .footer-link,
body.dark-theme .footer-copyright p,
body.dark-theme .footer-box-link,
body.dark-theme .post-date,
body.dark-theme .post-excerpt,
body.dark-theme .entry-meta {
  color: var(--dark-text-secondary);
}

.dark-theme .footer-email-icon,
.dark-theme .footer-email-link:hover,
body.dark-theme .search-title span,
body.dark-theme .footer-box-title,
body.dark-theme .post-title a:hover,
body.dark-theme .post-categories a,
body.dark-theme .post-read-more,
body.dark-theme .entry-content a {
  color: var(--dark-accent);
}

/* ==========================================================================
   MONITOR GARAGE - Categorías: ajustes finales consolidados
   --------------------------------------------------------------------------
   Bloque único que reemplaza todos los parches iterativos anteriores.
   Cubre: layout, ancho editorial, hero compacto, dark mode (sin "pico" en
   esquinas) y botones fijos por categoría.
   ========================================================================== */

/* --- 1. Contenedor de página: anula el wrapper antiguo de WordPress ------- */
body.category .site-content {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: -170px !important;
  margin-bottom: 0 !important;
  padding: 0 0 82px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

body.category .site-content > .container {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

/* Ocultar etiqueta antigua "by IMartz" solo en categorías */
body.category .by-imartz,
body.category .by-imartz-badge,
body.category .imartz-corner-badge {
  display: none !important;
}

/* --- 2. Wrapper editorial (.mg-cat-page): mismo ancho que el header ------- */
body.category .mg-cat-page {
  width: min(1120px, calc(100% - 48px));
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  box-sizing: border-box;
}

/* --- 3. Panel principal (.mg-cat-archive): ocupa el 100% del wrapper ------ */
body.category .mg-cat-archive {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 30px;
  box-sizing: border-box;
  box-shadow: 0 30px 70px rgba(0,0,0,.12);
}

/* Padding interno cuenta dentro del ancho */
body.category .mg-cat-archive,
body.category .mg-cat-archive *,
body.category .mg-cat-archive::before,
body.category .mg-cat-archive::after {
  box-sizing: border-box;
}

/* --- 4. Hero compacto ------------------------------------------------------ */
body.category .mg-cat-hero {
  padding-top: 4px;
  padding-bottom: 24px;
  overflow: visible;
}

body.category .mg-cat-hero-inner {
  min-height: 210px;
  align-items: flex-start;
  overflow: visible;
}

/* Subir bloque izquierdo */
body.category .mg-cat-copy,
body.category .mg-cat-hero-copy,
body.category .mg-cat-main,
body.category .mg-cat-hero-inner > div:first-child {
  padding-top: 0;
  transform: translateY(-50px);
}

/* Acompañar contador */
body.category .mg-cat-stat {
  align-self: flex-start;
  margin-top: 0;
  transform: translateY(-8px);
}

/* Ritmo interno */
body.category .mg-cat-kicker      { margin-bottom: 14px; }
body.category .mg-cat-title       { margin-bottom: 12px; }
body.category .mg-cat-subtitle    { margin-top: 0; margin-bottom: 16px; }
body.category .mg-cat-actions     { margin-top: 14px; }
body.category .mg-cat-shortcuts,
body.category .mg-cat-tools       { margin-top: 12px; }
body.category .mg-cat-section-bar,
body.category .mg-cat-section-head { margin-top: 14px; }

/* --- 5. Botones fijos en todas las categorías (también con accent-*) ----- */

/* Botón 1: primario, siempre amarillo */
body.category .mg-cat-action-primary,
body.category .mg-cat-accent-blue   .mg-cat-action-primary,
body.category .mg-cat-accent-red    .mg-cat-action-primary,
body.category .mg-cat-accent-violet .mg-cat-action-primary {
  background: linear-gradient(135deg, #ffd447, #f2b600) !important;
  color: #111 !important;
  border: 1px solid rgba(218,148,0,.22) !important;
  box-shadow: 0 14px 26px rgba(218,148,0,.22) !important;
}

/* Botón 2: comparar, siempre azul */
body.category .mg-cat-action-blue {
  background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
  color: #fff !important;
  border: 1px solid rgba(37,99,235,.24) !important;
  box-shadow: 0 14px 28px rgba(37,99,235,.24) !important;
}

/* Botón 3: ghost claro */
body.category .mg-cat-action-ghost {
  background: rgba(255,255,255,.86) !important;
  color: #141414 !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.06) !important;
}

/* Hover común a todos */
body.category .mg-cat-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.035);
}

/* --- 6. Dark mode: panel limpio y sin "pico" en esquinas ----------------- */

/* Capas externas siempre transparentes (evita rectángulos detrás del panel) */
html.dark-theme body.category .site-content,
body.dark-theme body.category .site-content,
html.dark-theme body.category .site-content > .container,
body.dark-theme body.category .site-content > .container,
html.dark-theme body.category .mg-cat-page,
body.dark-theme body.category .mg-cat-page,
html.dark-theme body.category .mg-cat-shell,
body.dark-theme body.category .mg-cat-shell,
html.dark-theme body.category .mg-cat-hero,
body.dark-theme body.category .mg-cat-hero,
html.dark-theme body.category .mg-cat-hero-inner,
body.dark-theme body.category .mg-cat-hero-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Capas internas no heredan border-radius */
html.dark-theme body.category .mg-cat-shell,
body.dark-theme body.category .mg-cat-shell,
html.dark-theme body.category .mg-cat-hero,
body.dark-theme body.category .mg-cat-hero,
html.dark-theme body.category .mg-cat-hero-inner,
body.dark-theme body.category .mg-cat-hero-inner {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Panel oscuro: única capa que pinta. Borde simulado por inset shadow para
   evitar artefactos en esquinas; clip-path corrige el "pico" en Chrome. */
html.dark-theme body.category .mg-cat-archive,
body.dark-theme body.category .mg-cat-archive {
  border: 0 !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(96,165,250,.06), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(245,158,11,.09), transparent 34%),
    linear-gradient(90deg, #2a2f38 0%, #151a21 34%, #101318 58%, #17140d 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 24px 70px rgba(0,0,0,.34) !important;
  clip-path: inset(1px 0 0 1px round 29px);
  -webkit-clip-path: inset(1px 0 0 1px round 29px);
  background-clip: padding-box;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Apagar pseudo-elementos del panel en dark (provocaban el "pico") */
html.dark-theme body.category .mg-cat-archive::before,
body.dark-theme body.category .mg-cat-archive::before,
html.dark-theme body.category .mg-cat-archive::after,
body.dark-theme body.category .mg-cat-archive::after {
  content: none !important;
  display: none !important;
}

/* Botones en dark mode (mantienen la jerarquía visual) */
html.dark-theme body.category .mg-cat-action-primary,
body.dark-theme body.category .mg-cat-action-primary,
html.dark-theme body.category .mg-cat-accent-blue   .mg-cat-action-primary,
body.dark-theme body.category .mg-cat-accent-blue   .mg-cat-action-primary,
html.dark-theme body.category .mg-cat-accent-red    .mg-cat-action-primary,
body.dark-theme body.category .mg-cat-accent-red    .mg-cat-action-primary,
html.dark-theme body.category .mg-cat-accent-violet .mg-cat-action-primary,
body.dark-theme body.category .mg-cat-accent-violet .mg-cat-action-primary {
  border-color: rgba(255,212,71,.28) !important;
  box-shadow: 0 14px 28px rgba(255,212,71,.16) !important;
}

html.dark-theme body.category .mg-cat-action-blue,
body.dark-theme body.category .mg-cat-action-blue {
  border-color: rgba(96,165,250,.28) !important;
  box-shadow: 0 14px 28px rgba(37,99,235,.22) !important;
}

html.dark-theme body.category .mg-cat-action-ghost,
body.dark-theme body.category .mg-cat-action-ghost {
  background: rgba(255,255,255,.07) !important;
  color: #f5f5f5 !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.16) !important;
}

/* --- 7. Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  body.category .site-content {
    margin-top: -92px !important;
    padding-bottom: 56px !important;
  }

  body.category .mg-cat-page {
    width: min(100% - 28px, 760px);
    max-width: 760px;
  }

  body.category .mg-cat-archive {
    border-radius: 24px;
  }

  body.category .mg-cat-hero {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* Dark: actualizar clip-path al nuevo radio */
  html.dark-theme body.category .mg-cat-archive,
  body.dark-theme body.category .mg-cat-archive {
    clip-path: inset(1px 0 0 1px round 23px);
    -webkit-clip-path: inset(1px 0 0 1px round 23px);
  }

  /* Quitar transforms del hero en tablet/móvil */
  body.category .mg-cat-copy,
  body.category .mg-cat-hero-copy,
  body.category .mg-cat-main,
  body.category .mg-cat-hero-inner > div:first-child,
  body.category .mg-cat-stat {
    transform: none;
  }

  body.category .mg-cat-stat {
    margin-top: 18px;
  }
}

@media (max-width: 640px) {
  body.category .site-content {
    margin-top: -54px !important;
    padding-bottom: 44px !important;
  }

  body.category .mg-cat-archive {
    border-radius: 20px;
  }

  body.category .mg-cat-hero {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  /* Dark: clip-path para móvil */
  html.dark-theme body.category .mg-cat-archive,
  body.dark-theme body.category .mg-cat-archive {
    clip-path: inset(1px 0 0 1px round 19px);
    -webkit-clip-path: inset(1px 0 0 1px round 19px);
  }
}

@media (max-width: 560px) {
  body.category .mg-cat-page {
    width: min(100% - 18px, 760px);
  }
}
/* ============================================================
   ANIMACIÓN DEL LOGO AL HACER HOVER
   Pega esto al final de tu style.css
   ============================================================ */

/* === Logo desktop === */
.mg-header-brand .custom-logo-link,
.mg-header-brand .site-brand {
  display: inline-block;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1),
    filter 0.45s ease;
  transform-origin: center center;
  will-change: transform, filter;
}

.mg-header-brand .custom-logo-link:hover,
.mg-header-brand .site-brand:hover,
.mg-header-brand .custom-logo-link:focus-visible,
.mg-header-brand .site-brand:focus-visible {
  transform: scale(1.06);
  filter:
    drop-shadow(0 6px 14px rgba(255, 194, 29, 0.35))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15))
    brightness(1.05);
}

.mg-header-brand .custom-logo-link:active,
.mg-header-brand .site-brand:active {
  transform: scale(1.02);
  transition-duration: 0.15s;
}

/* === Logo móvil === */
.mobile-logo {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1),
    filter 0.45s ease;
  transform-origin: center center;
  will-change: transform, filter;
}

.mobile-logo:hover,
.mobile-logo:focus-visible {
  transform: scale(1.04);
  filter:
    drop-shadow(0 4px 10px rgba(255, 194, 29, 0.3))
    brightness(1.05);
}

.mobile-logo:active {
  transform: scale(1.01);
  transition-duration: 0.15s;
}

/* === Modo oscuro: ajustamos el brillo dorado para que destaque más === */
body.dark-theme .mg-header-brand .custom-logo-link:hover,
body.dark-theme .mg-header-brand .site-brand:hover,
body.dark-theme .mg-header-brand .custom-logo-link:focus-visible,
body.dark-theme .mg-header-brand .site-brand:focus-visible,
body.dark-theme .mobile-logo:hover,
body.dark-theme .mobile-logo:focus-visible {
  filter:
    drop-shadow(0 6px 16px rgba(255, 194, 29, 0.5))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))
    brightness(1.08);
}

/* === Accesibilidad: respeta a usuarios que prefieren menos movimiento === */
@media (prefers-reduced-motion: reduce) {
  .mg-header-brand .custom-logo-link,
  .mg-header-brand .site-brand,
  .mobile-logo {
    transition: filter 0.3s ease;
  }

  .mg-header-brand .custom-logo-link:hover,
  .mg-header-brand .site-brand:hover,
  .mobile-logo:hover {
    transform: none;
  }
}

/* ========================================================================== 
   MONITOR GARAGE - MOBILE HEADER + MENU FIX V1.0
   Fecha: 2026-05-08
   Objetivo: eliminar solapes/repetición visual en móvil, rehacer menú hamburguesa
   y asegurar que todo el contenido arranca debajo del header móvil.
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --mg-site-gutter: 18px !important;
    --mg-content-overlap: 0px !important;
    --mg-mobile-header-height: 88px;
    --mg-mobile-radius: 24px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-top: 0 !important;
    background: var(--mg-body-light) !important;
  }

  body.dark-theme,
  .dark-theme body {
    background: #050607 !important;
  }

  /* En móvil solo debe existir el header móvil. El header desktop no debe ocupar
     espacio ni aparecer como bloque repetido dentro de la portada. */
  header.desktop-header,
  .desktop-header,
  .desktop-header.mg-site-header,
  .mg-site-header.desktop-header,
  .desktop-header .mg-header-inner,
  .desktop-header .mg-header-brand,
  .desktop-header .mg-header-center,
  .desktop-header .mg-header-actions {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Header móvil estable: sticky en lugar de fixed. Así queda siempre por encima
     visualmente, pero sigue ocupando su sitio y no se come el contenido. */
  .mobile-header,
  .mobile-header.sticky {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: var(--mg-mobile-header-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999900 !important;
    overflow: visible !important;
    isolation: isolate !important;
    animation: none !important;
    transform: none !important;
    background:
      radial-gradient(circle at 76% -18%, rgba(255,195,29,.18), transparent 42%),
      linear-gradient(180deg, rgba(20,22,24,.98) 0%, rgba(9,10,11,.98) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(16px) saturate(116%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(116%) !important;
  }

  body.admin-bar .mobile-header,
  body.admin-bar .mobile-header.sticky {
    top: 32px !important;
  }

  .mobile-header-inner {
    width: var(--mg-site-width) !important;
    max-width: var(--mg-site-max) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
  }

  .mobile-header-content {
    min-height: var(--mg-mobile-header-height) !important;
    padding: 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  .mobile-logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 116px) !important;
    gap: 10px !important;
    color: #fff !important;
    transform: none !important;
  }

  .mobile-logo-img {
    height: 58px !important;
    max-width: 68px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    flex: 0 0 auto !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
  }

  .mobile-logo-text {
    display: block !important;
    min-width: 0 !important;
  }

  .mobile-logo-title {
    font-size: 1.08rem !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    font-weight: 950 !important;
    color: #fff !important;
  }

  .mobile-logo-subtitle {
    padding-left: 0 !important;
    margin-top: 2px !important;
    font-size: 1.02rem !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    color: var(--mg-gold) !important;
  }

  .mobile-controls {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .mobile-theme-toggle,
  .mobile-menu-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    transform: none !important;
  }

  .mobile-theme-toggle:hover,
  .mobile-menu-button:hover,
  .mobile-menu-button.active,
  .mobile-menu-button[aria-expanded="true"] {
    color: #ffe7a3 !important;
    background: rgba(255,195,29,.12) !important;
    border-color: rgba(255,195,29,.34) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .mobile-theme-toggle svg {
    width: 19px !important;
    height: 19px !important;
  }

  .mobile-menu-button {
    gap: 5px !important;
  }

  .hamburger-line {
    width: 22px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  .mobile-menu-button.active .hamburger-line:nth-child(1),
  .mobile-menu-button[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }

  .mobile-menu-button.active .hamburger-line:nth-child(2),
  .mobile-menu-button[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-menu-button.active .hamburger-line:nth-child(3),
  .mobile-menu-button[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
  }

  /* Menú hamburguesa rediseñado como panel premium. Se abre sobre el contenido,
     no empuja ni rompe la portada. */
  .mobile-menu {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;
    width: var(--mg-site-width) !important;
    max-width: var(--mg-site-max) !important;
    max-height: calc(100dvh - var(--mg-mobile-header-height) - 28px) !important;
    transform: translate(-50%, 8px) scale(.985) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999920 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: 0 !important;
    background: transparent !important;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease !important;
  }

  .mobile-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
  }

  .mobile-menu::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: rgba(0,0,0,.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }

  .mobile-menu.active::before {
    opacity: 1;
  }

  .mobile-nav {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    max-height: inherit !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border-radius: var(--mg-mobile-radius) !important;
    border: 1px solid rgba(255,225,174,.14) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255,195,29,.16), transparent 36%),
      linear-gradient(135deg, rgba(50,30,22,.985), rgba(18,19,20,.985)) !important;
    box-shadow: 0 24px 78px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter: blur(18px) saturate(116%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(116%) !important;
  }

  .mobile-nav::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-nav-list,
  .mg-mobile-tools-nav .menu,
  .mg-mobile-tools-fallback {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-nav-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .mobile-nav-list li,
  .mg-mobile-tools-nav .menu li,
  .mg-mobile-tools-fallback li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-nav-list a {
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    color: rgba(255,255,255,.92) !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    text-decoration: none !important;
    font-size: .94rem !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    text-transform: uppercase !important;
    line-height: 1.05 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .mobile-nav-list a:hover,
  .mobile-nav-list .current-menu-item > a,
  .mobile-nav-list .current_page_item > a,
  .mobile-nav-list .current-menu-ancestor > a {
    color: #17120a !important;
    background: linear-gradient(135deg, #ffd354 0%, #ffc21d 56%, #e6a611 100%) !important;
    border-color: rgba(255,255,255,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 10px 20px rgba(0,0,0,.18) !important;
  }

  .mg-mobile-tools {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }

  .mg-mobile-tools-title {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin: 0 0 10px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    color: rgba(255,235,190,.82) !important;
    background: rgba(255,195,29,.08) !important;
    border: 1px solid rgba(255,195,29,.18) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  .mg-mobile-tools-nav .menu,
  .mg-mobile-tools-fallback {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .mg-mobile-tools-nav .menu a,
  .mg-mobile-tools-fallback a {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 10px 11px !important;
    border-radius: 15px !important;
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    text-decoration: none !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .mg-mobile-tools-nav .menu a::before,
  .mg-mobile-tools-fallback a::before {
    content: '' !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 7px !important;
    background: radial-gradient(circle, var(--mg-gold) 0 22%, rgba(255,195,29,.18) 25% 100%) !important;
    box-shadow: 0 0 0 1px rgba(255,195,29,.18) inset !important;
  }

  .mg-mobile-tools-nav .menu a:hover,
  .mg-mobile-tools-fallback a:hover {
    color: #fff7d9 !important;
    background: rgba(255,195,29,.115) !important;
    border-color: rgba(255,195,29,.28) !important;
  }

  .mobile-search {
    margin: 16px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }

  .mobile-search-form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .mobile-search-input {
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 48px 0 16px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(255,255,255,.065) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  .mobile-search-input::placeholder {
    color: rgba(255,255,255,.58) !important;
  }

  .mobile-search-input:focus {
    outline: 0 !important;
    border-color: rgba(255,195,29,.36) !important;
    background: rgba(255,255,255,.085) !important;
    box-shadow: 0 0 0 3px rgba(255,195,29,.10) !important;
  }

  .mobile-search-button {
    right: 14px !important;
    color: rgba(255,255,255,.76) !important;
    background: transparent !important;
    transform: translateY(-50%) !important;
  }

  .mobile-search-button:hover {
    color: var(--mg-gold) !important;
  }

  /* Todo el contenido queda debajo del header. Se anula el solape negativo que
     funcionaba en desktop, pero en móvil rompe portadas, categorías y entradas. */
  main.site-content,
  #content.site-content,
  .site-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    padding-top: 18px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.page-template-template-tools-full main.site-content,
  body.post-template-template-tools-full main.site-content,
  body.page-template-template-tools-full #content.site-content,
  body.post-template-template-tools-full #content.site-content,
  body.home main.site-content,
  body.home #content.site-content,
  body.front-page main.site-content,
  body.front-page #content.site-content {
    margin-top: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 2rem !important;
    background: transparent !important;
  }

  .site-content .container,
  .single-post .site-content .container,
  .page:not(.page-template-template-tools-full):not(.post-template-template-tools-full) .site-content .container,
  .archive .site-content .container,
  .category .site-content .container,
  .search .site-content .container,
  .error404 .site-content .container {
    width: var(--mg-site-width) !important;
    max-width: var(--mg-site-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .mg-tool-page,
  .mg-front-page,
  .mg-tool-content,
  .mg-cat-page,
  .mg-cat-archive,
  .single-post,
  .post-header,
  .entry-content,
  .mg-home,
  .mg-home-shell {
    position: relative !important;
    z-index: 10 !important;
  }

  .mg-tool-page,
  .mg-front-page,
  .mg-cat-page {
    padding-top: 0 !important;
  }

  body.home .mg-home,
  body.front-page .mg-home,
  body.page-template-template-tools-full .mg-home,
  body.post-template-template-tools-full .mg-home,
  body.page-template-template-tools-full .mg-about,
  body.post-template-template-tools-full .mg-about,
  body.page-template-template-tools-full .mg-ranking-wrap,
  body.post-template-template-tools-full .mg-ranking-wrap,
  body.page-template-template-tools-full .mg-ranking,
  body.post-template-template-tools-full .mg-ranking,
  body.page-template-template-tools-full .ranking-monitores,
  body.post-template-template-tools-full .ranking-monitores,
  body.page-template-template-tools-full .mg-cmp-wrap,
  body.post-template-template-tools-full .mg-cmp-wrap,
  body.page-template-template-tools-full .mg-comparator-wrap,
  body.post-template-template-tools-full .mg-comparator-wrap,
  body.page-template-template-tools-full .mg-comparador-wrap,
  body.post-template-template-tools-full .mg-comparador-wrap,
  body.page-template-template-tools-full .mg-rec-wrap,
  body.post-template-template-tools-full .mg-rec-wrap,
  body.page-template-template-tools-full .mg-recommender-wrap,
  body.post-template-template-tools-full .mg-recommender-wrap,
  body.page-template-template-tools-full .mg-recomendador-wrap,
  body.post-template-template-tools-full .mg-recomendador-wrap,
  body.page-template-template-tools-full .mg-ppi-wrap,
  body.post-template-template-tools-full .mg-ppi-wrap,
  body.page-template-template-tools-full .mg-ppi,
  body.post-template-template-tools-full .mg-ppi,
  body.page-template-template-tools-full .mg-ppi-tool,
  body.post-template-template-tools-full .mg-ppi-tool,
  body.page-template-template-tools-full .mg-size-sim,
  body.post-template-template-tools-full .mg-size-sim,
  body.page-template-template-tools-full .mg-size-wrap,
  body.post-template-template-tools-full .mg-size-wrap,
  body.page-template-template-tools-full .mg-sim-wrap,
  body.post-template-template-tools-full .mg-sim-wrap,
  body.page-template-template-tools-full .mg-simulator-wrap,
  body.post-template-template-tools-full .mg-simulator-wrap,
  body.page-template-template-tools-full .mg-sizesim-wrap,
  body.post-template-template-tools-full .mg-sizesim-wrap,
  body.page-template-template-tools-full .mg-gloss-wrap,
  body.post-template-template-tools-full .mg-gloss-wrap,
  body.page-template-template-tools-full .mg-glossary-wrap,
  body.post-template-template-tools-full .mg-glossary-wrap,
  body.page-template-template-tools-full .mg-glossary,
  body.post-template-template-tools-full .mg-glossary,
  body.page-template-template-tools-full .mg-glosario-wrap,
  body.post-template-template-tools-full .mg-glosario-wrap,
  body.page-template-template-tools-full .mg-glosario,
  body.post-template-template-tools-full .mg-glosario,
  body.page-template-template-tools-full .mg-distance-wrap,
  body.post-template-template-tools-full .mg-distance-wrap,
  body.page-template-template-tools-full .mg-distance,
  body.post-template-template-tools-full .mg-distance,
  body.page-template-template-tools-full .mg-viewing-distance-wrap,
  body.post-template-template-tools-full .mg-viewing-distance-wrap,
  body.page-template-template-tools-full .mg-bandwidth-wrap,
  body.post-template-template-tools-full .mg-bandwidth-wrap,
  body.page-template-template-tools-full .mg-bandwidth,
  body.post-template-template-tools-full .mg-bandwidth,
  body.page-template-template-tools-full .mg-bw-wrap,
  body.post-template-template-tools-full .mg-bw-wrap,
  body.page-template-template-tools-full .imz-monitor-summary-layout-tool,
  body.post-template-template-tools-full .imz-monitor-summary-layout-tool {
    width: var(--mg-site-width) !important;
    max-width: var(--mg-site-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Evita que portadas/categorías con heroes grandes queden visualmente
     cortadas por el header. */
  .mg-cat-hero,
  .mg-home-hero,
  .mg-home-hero-card,
  .mg-tool-content > *:first-child {
    margin-top: 0 !important;
  }

  /* Categorías y grids: prevenir desbordes horizontales de títulos/botones. */
  .mg-cat-hero,
  .mg-cat-actions,
  .mg-cat-grid,
  .posts-grid,
  .entry-content,
  .post-header {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  img,
  iframe,
  video,
  embed,
  object {
    max-width: 100% !important;
  }
}

@media (max-width: 782px) {
  body.admin-bar .mobile-header,
  body.admin-bar .mobile-header.sticky {
    top: 46px !important;
  }
}

@media (max-width: 560px) {
  :root {
    --mg-site-gutter: 16px !important;
    --mg-mobile-header-height: 82px;
  }

  .mobile-header-content {
    min-height: var(--mg-mobile-header-height) !important;
    padding: 12px 0 !important;
  }

  .mobile-logo-img {
    height: 54px !important;
    max-width: 62px !important;
  }

  .mobile-logo-title {
    font-size: .98rem !important;
  }

  .mobile-logo-subtitle {
    font-size: .94rem !important;
  }

  .mobile-theme-toggle,
  .mobile-menu-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .mobile-nav {
    padding: 12px !important;
    border-radius: 21px !important;
  }

  .mobile-nav-list a {
    min-height: 50px !important;
    padding: 0 14px !important;
    font-size: .88rem !important;
  }

  .mg-mobile-tools-nav .menu,
  .mg-mobile-tools-fallback {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 380px) {
  .mobile-logo-img {
    height: 48px !important;
    max-width: 56px !important;
  }

  .mobile-logo-title {
    font-size: .9rem !important;
  }

  .mobile-logo-subtitle {
    font-size: .86rem !important;
  }

  .mobile-controls {
    gap: 8px !important;
  }

  .mobile-theme-toggle,
  .mobile-menu-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}
/* ========================================================================== 
   MONITOR GARAGE - MOBILE HEADER/FOOTER FIX V2.0
   Fecha: 2026-05-08
   Objetivo: header móvil fijo arriba, light/dark real, contenido siempre debajo
   y footer legible en modo claro/oscuro.
   Pegar al final de style.css.
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --mg-mobile-header-height: 88px;
    --mg-mobile-header-admin-offset: 0px;
    --mg-site-gutter: 18px !important;
    --mg-site-width: min(var(--mg-site-max), calc(100vw - var(--mg-site-gutter)));
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-top: var(--mg-mobile-header-height) !important;
    background: var(--mg-body-light) !important;
    transition: background-color .2s ease, color .2s ease !important;
  }

  body.dark-theme,
  .dark-theme body {
    background: #050607 !important;
    color: #f4f4f5 !important;
  }

  body.admin-bar {
    --mg-mobile-header-admin-offset: 32px;
  }

  header.desktop-header,
  .desktop-header,
  .desktop-header.mg-site-header,
  .mg-site-header.desktop-header,
  .desktop-header .mg-header-inner,
  .desktop-header .mg-header-brand,
  .desktop-header .mg-header-center,
  .desktop-header .mg-header-actions {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Header móvil fijo. Ocupa visualmente la parte superior y el body recibe
     padding-top, así ningún contenido queda por encima ni debajo de forma rara. */
  .mobile-header,
  .mobile-header.sticky {
    display: block !important;
    position: fixed !important;
    top: var(--mg-mobile-header-admin-offset) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: var(--mg-mobile-header-height) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999900 !important;
    overflow: visible !important;
    isolation: isolate !important;
    animation: none !important;
    transform: none !important;
    border-bottom: 1px solid rgba(255,229,190,.18) !important;
    background:
      radial-gradient(circle at 80% -18%, rgba(255,195,29,.23), transparent 43%),
      linear-gradient(135deg, rgba(58,28,20,.98) 0%, rgba(96,45,26,.98) 58%, rgba(42,19,13,.98) 100%) !important;
    box-shadow: 0 14px 38px rgba(67,32,12,.24), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter: blur(16px) saturate(116%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(116%) !important;
  }

  body.dark-theme .mobile-header,
  body.dark-theme .mobile-header.sticky,
  .dark-theme .mobile-header,
  .dark-theme .mobile-header.sticky {
    border-bottom-color: rgba(255,255,255,.09) !important;
    background:
      radial-gradient(circle at 76% -18%, rgba(255,195,29,.14), transparent 42%),
      linear-gradient(180deg, rgba(20,22,24,.985) 0%, rgba(7,8,9,.985) 100%) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  .mobile-header-inner {
    width: var(--mg-site-width) !important;
    max-width: var(--mg-site-max) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
  }

  .mobile-header-content {
    min-height: var(--mg-mobile-header-height) !important;
    padding: 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  .mobile-logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 116px) !important;
    gap: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: none !important;
  }

  .mobile-logo-img {
    height: 58px !important;
    max-width: 68px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    flex: 0 0 auto !important;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
  }

  .mobile-logo-title {
    font-size: 1.08rem !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    font-weight: 950 !important;
    color: #fff !important;
  }

  .mobile-logo-subtitle {
    padding-left: 0 !important;
    margin-top: 2px !important;
    font-size: 1.02rem !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    color: var(--mg-gold) !important;
  }

  .mobile-controls {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .mobile-theme-toggle,
  .mobile-menu-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    color: #fff6dc !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,229,190,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.12) !important;
    transform: none !important;
  }

  body.dark-theme .mobile-theme-toggle,
  body.dark-theme .mobile-menu-button,
  .dark-theme .mobile-theme-toggle,
  .dark-theme .mobile-menu-button {
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.075) !important;
    border-color: rgba(255,255,255,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  .mobile-theme-toggle:hover,
  .mobile-menu-button:hover,
  .mobile-menu-button.active,
  .mobile-menu-button[aria-expanded="true"] {
    color: #17120a !important;
    background: linear-gradient(135deg, #ffd354, #ffc21d) !important;
    border-color: rgba(255,255,255,.28) !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  body.dark-theme .mobile-theme-toggle:hover,
  body.dark-theme .mobile-menu-button:hover,
  body.dark-theme .mobile-menu-button.active,
  body.dark-theme .mobile-menu-button[aria-expanded="true"],
  .dark-theme .mobile-theme-toggle:hover,
  .dark-theme .mobile-menu-button:hover,
  .dark-theme .mobile-menu-button.active,
  .dark-theme .mobile-menu-button[aria-expanded="true"] {
    color: #ffe7a3 !important;
    background: rgba(255,195,29,.12) !important;
    border-color: rgba(255,195,29,.34) !important;
  }

  .mobile-theme-toggle svg {
    width: 19px !important;
    height: 19px !important;
  }

  .mobile-theme-toggle .sun-icon,
  body:not(.dark-theme) .mobile-theme-toggle .sun-icon {
    display: block !important;
  }

  .mobile-theme-toggle .moon-icon,
  body:not(.dark-theme) .mobile-theme-toggle .moon-icon {
    display: none !important;
  }

  body.dark-theme .mobile-theme-toggle .sun-icon {
    display: none !important;
  }

  body.dark-theme .mobile-theme-toggle .moon-icon {
    display: block !important;
  }

  .mobile-menu-button {
    gap: 5px !important;
  }

  .hamburger-line {
    width: 22px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  .mobile-menu-button.active .hamburger-line:nth-child(1),
  .mobile-menu-button[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }

  .mobile-menu-button.active .hamburger-line:nth-child(2),
  .mobile-menu-button[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-menu-button.active .hamburger-line:nth-child(3),
  .mobile-menu-button[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
  }

  .mobile-menu {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    right: auto !important;
    width: var(--mg-site-width) !important;
    max-width: var(--mg-site-max) !important;
    max-height: calc(100dvh - var(--mg-mobile-header-height) - var(--mg-mobile-header-admin-offset) - 28px) !important;
    transform: translate(-50%, 8px) scale(.985) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999920 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: 0 !important;
    background: transparent !important;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease !important;
  }

  .mobile-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
  }

  .mobile-nav {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    max-height: inherit !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,225,174,.16) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255,195,29,.16), transparent 36%),
      linear-gradient(135deg, rgba(70,36,25,.988), rgba(30,19,15,.988)) !important;
    box-shadow: 0 24px 78px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter: blur(18px) saturate(116%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(116%) !important;
  }

  body.dark-theme .mobile-nav,
  .dark-theme .mobile-nav {
    border-color: rgba(255,225,174,.12) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(255,195,29,.12), transparent 36%),
      linear-gradient(135deg, rgba(42,28,22,.985), rgba(13,14,15,.985)) !important;
  }

  .mobile-nav::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-nav-list,
  .mg-mobile-tools-nav .menu,
  .mg-mobile-tools-fallback {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-nav-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .mobile-nav-list li,
  .mg-mobile-tools-nav .menu li,
  .mg-mobile-tools-fallback li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-nav-list a {
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    color: rgba(255,255,255,.94) !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    text-decoration: none !important;
    font-size: .94rem !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    text-transform: uppercase !important;
    line-height: 1.05 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .mobile-nav-list a:hover,
  .mobile-nav-list .current-menu-item > a,
  .mobile-nav-list .current_page_item > a,
  .mobile-nav-list .current-menu-ancestor > a {
    color: #17120a !important;
    background: linear-gradient(135deg, #ffd354 0%, #ffc21d 56%, #e6a611 100%) !important;
    border-color: rgba(255,255,255,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 10px 20px rgba(0,0,0,.18) !important;
  }

  .mg-mobile-tools {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }

  .mg-mobile-tools-title {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin: 0 0 10px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    color: rgba(255,235,190,.90) !important;
    background: rgba(255,195,29,.10) !important;
    border: 1px solid rgba(255,195,29,.22) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  .mg-mobile-tools-nav .menu,
  .mg-mobile-tools-fallback {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .mg-mobile-tools-nav .menu a,
  .mg-mobile-tools-fallback a {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 10px 11px !important;
    border-radius: 15px !important;
    color: rgba(255,255,255,.89) !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    text-decoration: none !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .mg-mobile-tools-nav .menu a::before,
  .mg-mobile-tools-fallback a::before {
    content: '' !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 7px !important;
    background: radial-gradient(circle, var(--mg-gold) 0 22%, rgba(255,195,29,.18) 25% 100%) !important;
    box-shadow: 0 0 0 1px rgba(255,195,29,.18) inset !important;
  }

  .mg-mobile-tools-nav .menu a:hover,
  .mg-mobile-tools-fallback a:hover {
    color: #fff7d9 !important;
    background: rgba(255,195,29,.115) !important;
    border-color: rgba(255,195,29,.28) !important;
  }

  .mobile-search {
    margin: 16px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }

  .mobile-search-form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .mobile-search-input {
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 48px 0 16px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  .mobile-search-input::placeholder {
    color: rgba(255,255,255,.62) !important;
  }

  .mobile-search-input:focus {
    outline: 0 !important;
    border-color: rgba(255,195,29,.40) !important;
    background: rgba(255,255,255,.09) !important;
    box-shadow: 0 0 0 3px rgba(255,195,29,.10) !important;
  }

  .mobile-search-button {
    right: 14px !important;
    color: rgba(255,255,255,.80) !important;
    background: transparent !important;
    transform: translateY(-50%) !important;
  }

  .mobile-search-button:hover {
    color: var(--mg-gold) !important;
  }

  main.site-content,
  #content.site-content,
  .site-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    padding-top: 18px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.page-template-template-tools-full main.site-content,
  body.post-template-template-tools-full main.site-content,
  body.page-template-template-tools-full #content.site-content,
  body.post-template-template-tools-full #content.site-content,
  body.home main.site-content,
  body.home #content.site-content,
  body.front-page main.site-content,
  body.front-page #content.site-content {
    margin-top: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 2rem !important;
    background: transparent !important;
  }

  .site-content .container,
  .single-post .site-content .container,
  .page:not(.page-template-template-tools-full):not(.post-template-template-tools-full) .site-content .container,
  .archive .site-content .container,
  .category .site-content .container,
  .search .site-content .container,
  .error404 .site-content .container {
    width: var(--mg-site-width) !important;
    max-width: var(--mg-site-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .mg-tool-page,
  .mg-front-page,
  .mg-tool-content,
  .mg-cat-page,
  .mg-cat-archive,
  .single-post,
  .post-header,
  .entry-content,
  .mg-home,
  .mg-home-shell {
    position: relative !important;
    z-index: 10 !important;
  }

  .mg-cat-hero,
  .mg-home-hero,
  .mg-home-hero-card,
  .mg-tool-content > *:first-child {
    margin-top: 0 !important;
  }

  img,
  iframe,
  video,
  embed,
  object {
    max-width: 100% !important;
  }

  /* Footer móvil: contraste correcto en light/dark. En light sigue siendo premium
     y cálido, pero los enlaces ya no quedan marrón sobre marrón. */
  .site-footer.mobile-footer,
  .mobile-footer {
    display: block !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 42px 0 36px !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(255,195,29,.16), transparent 42%),
      linear-gradient(135deg, #37160d 0%, #74381e 56%, #2d120b 100%) !important;
    border-top: 1px solid rgba(255,222,154,.16) !important;
  }

  body.dark-theme .site-footer.mobile-footer,
  body.dark-theme .mobile-footer,
  .dark-theme .site-footer.mobile-footer,
  .dark-theme .mobile-footer {
    color: #f4f4f5 !important;
    background:
      radial-gradient(circle at 80% 0%, rgba(96,78,36,.12), transparent 42%),
      linear-gradient(135deg, #050607 0%, #111315 58%, #070707 100%) !important;
    border-top-color: rgba(255,255,255,.08) !important;
  }

  .mobile-footer .container {
    width: var(--mg-site-width) !important;
    max-width: var(--mg-site-max) !important;
    padding: 0 !important;
  }

  .footer-social-title,
  .mobile-footer .footer-social-title {
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
  }

  .mobile-footer .footer-social-icons {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .mobile-footer .social-icon-footer {
    color: #fff !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .mobile-footer .social-icon-footer:hover {
    color: #17120a !important;
    background: var(--mg-gold) !important;
    border-color: rgba(255,195,29,.55) !important;
    transform: translateY(-2px) !important;
  }

  .footer-links,
  .mobile-footer .footer-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 9px 14px !important;
    margin: 18px auto 20px !important;
    max-width: 92% !important;
  }

  .footer-link,
  .mobile-footer .footer-link,
  body.dark-theme .footer-link,
  body.dark-theme .mobile-footer .footer-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    color: rgba(255,255,255,.80) !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    text-decoration: none !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  .footer-link:hover,
  .mobile-footer .footer-link:hover,
  body.dark-theme .footer-link:hover,
  body.dark-theme .mobile-footer .footer-link:hover {
    color: #fff7d9 !important;
    background: rgba(255,195,29,.12) !important;
    border-color: rgba(255,195,29,.24) !important;
  }

  .footer-copyright p,
  .mobile-footer .footer-copyright p,
  body.dark-theme .footer-copyright p,
  body.dark-theme .mobile-footer .footer-copyright p {
    color: rgba(255,255,255,.82) !important;
    font-size: .82rem !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
  }

  .desktop-footer {
    display: none !important;
  }

  .scroll-to-top {
    z-index: 999800 !important;
    bottom: 20px !important;
    right: 18px !important;
    color: #17120a !important;
    background: linear-gradient(135deg, #ffd354, #e69f14) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.22) !important;
  }
}

@media (max-width: 782px) {
  body.admin-bar {
    --mg-mobile-header-admin-offset: 46px;
  }
}

@media (max-width: 560px) {
  :root {
    --mg-mobile-header-height: 82px;
    --mg-site-gutter: 16px !important;
  }

  .mobile-header-content {
    min-height: var(--mg-mobile-header-height) !important;
    padding: 12px 0 !important;
  }

  .mobile-logo-img {
    height: 54px !important;
    max-width: 62px !important;
  }

  .mobile-logo-title {
    font-size: .98rem !important;
  }

  .mobile-logo-subtitle {
    font-size: .94rem !important;
  }

  .mobile-theme-toggle,
  .mobile-menu-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .mobile-nav {
    padding: 12px !important;
    border-radius: 21px !important;
  }

  .mobile-nav-list a {
    min-height: 50px !important;
    padding: 0 14px !important;
    font-size: .88rem !important;
  }

  .mg-mobile-tools-nav .menu,
  .mg-mobile-tools-fallback {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 380px) {
  .mobile-logo-img {
    height: 48px !important;
    max-width: 56px !important;
  }

  .mobile-logo-title {
    font-size: .9rem !important;
  }

  .mobile-logo-subtitle {
    font-size: .86rem !important;
  }

  .mobile-controls {
    gap: 8px !important;
  }

  .mobile-theme-toggle,
  .mobile-menu-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}


/* ========================================================================== 
   MONITOR GARAGE - MOBILE ADMIN BAR / STICKY HEADER FIX V3.0
   Objetivo: en móvil, si la barra superior de WordPress desaparece al hacer
   scroll, el header sube hasta arriba de forma fluida y no deja contenido
   visible por encima.
   Pegar al final de style.css si no sustituyes el archivo completo.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Valor de seguridad: en tablets/admin bar suele ser 32px. El JS lo actualiza
     en tiempo real según la parte visible de la barra de WordPress. */
  body.admin-bar {
    --mg-mobile-admin-current-offset: 32px;
    --mg-mobile-header-admin-offset: var(--mg-mobile-admin-current-offset) !important;
  }

  .mobile-header,
  .mobile-header.sticky {
    top: var(--mg-mobile-header-admin-offset, 0px) !important;
    transition:
      top .22s cubic-bezier(.2,.8,.2,1),
      background .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      backdrop-filter .22s ease !important;
    will-change: top, box-shadow, background !important;
  }

  /* Estado cuando ya estás haciendo scroll: un pelín más compacto y moderno,
     pero sin cambiar el layout de la página ni crear saltos raros. */
  body.mg-mobile-scrolled .mobile-header,
  body.mg-mobile-scrolled .mobile-header.sticky {
    box-shadow: 0 16px 42px rgba(45,21,8,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  }

  body.dark-theme.mg-mobile-scrolled .mobile-header,
  body.dark-theme.mg-mobile-scrolled .mobile-header.sticky,
  .dark-theme body.mg-mobile-scrolled .mobile-header,
  .dark-theme body.mg-mobile-scrolled .mobile-header.sticky {
    box-shadow: 0 16px 42px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  body.mg-mobile-scrolled .mobile-header-content {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body.mg-mobile-scrolled .mobile-logo-img {
    transform: scale(.94) !important;
    transform-origin: left center !important;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .22s ease !important;
  }

  body.mg-mobile-scrolled .mobile-theme-toggle,
  body.mg-mobile-scrolled .mobile-menu-button {
    transform: scale(.96) !important;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease !important;
  }

  /* Cuando el menú móvil está abierto no compactamos los botones para evitar
     que la X baile visualmente. */
  body.mg-mobile-menu-open .mobile-theme-toggle,
  body.mg-mobile-menu-open .mobile-menu-button,
  body.mg-mobile-menu-open .mobile-logo-img {
    transform: none !important;
  }
}

@media (max-width: 782px) {
  body.admin-bar {
    --mg-mobile-admin-current-offset: 46px;
    --mg-mobile-header-admin-offset: var(--mg-mobile-admin-current-offset) !important;
  }
}


/* ========================================================================== 
   MONITOR GARAGE - MOBILE HEADER PIN FIX V4.0
   Corrige el caso real en móvil logueado: la barra de WordPress desaparece
   al hacer scroll y el header debe subir hasta top: 0. Este bloque va al
   final para ganar a reglas antiguas con body.admin-bar .mobile-header.
   ========================================================================== */

@media (max-width: 1024px) {
  :root,
  body {
    --mg-mobile-admin-current-offset: 0px;
    --mg-mobile-header-admin-offset: var(--mg-mobile-admin-current-offset, 0px) !important;
  }

  .mobile-header,
  .mobile-header.sticky,
  body.admin-bar .mobile-header,
  body.admin-bar .mobile-header.sticky,
  html body.admin-bar .mobile-header,
  html body.admin-bar .mobile-header.sticky {
    position: fixed !important;
    top: var(--mg-mobile-admin-current-offset, 0px) !important;
    transform: none !important;
    transition:
      top .18s cubic-bezier(.2,.8,.2,1),
      background-color .18s ease,
      box-shadow .18s ease,
      border-color .18s ease !important;
    will-change: top !important;
  }

  body:not(.admin-bar) .mobile-header,
  body:not(.admin-bar) .mobile-header.sticky,
  body.mg-mobile-adminbar-hidden .mobile-header,
  body.mg-mobile-adminbar-hidden .mobile-header.sticky,
  html body.admin-bar.mg-mobile-adminbar-hidden .mobile-header,
  html body.admin-bar.mg-mobile-adminbar-hidden .mobile-header.sticky {
    top: 0px !important;
  }

  /* Quita la animación/encogido del logo que no gustaba. */
  .mobile-logo,
  .mobile-logo-img,
  body.mg-mobile-scrolled .mobile-logo,
  body.mg-mobile-scrolled .mobile-logo-img,
  body.mg-mobile-menu-open .mobile-logo,
  body.mg-mobile-menu-open .mobile-logo-img {
    transform: none !important;
  }

  body.mg-mobile-scrolled .mobile-header-content {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  body.mg-mobile-scrolled .mobile-theme-toggle,
  body.mg-mobile-scrolled .mobile-menu-button,
  body.mg-mobile-menu-open .mobile-theme-toggle,
  body.mg-mobile-menu-open .mobile-menu-button {
    transform: none !important;
  }
}

@media (max-width: 782px) {
  body.admin-bar,
  html body.admin-bar {
    --mg-mobile-header-admin-offset: var(--mg-mobile-admin-current-offset, 0px) !important;
  }

  body.admin-bar .mobile-header,
  body.admin-bar .mobile-header.sticky,
  html body.admin-bar .mobile-header,
  html body.admin-bar .mobile-header.sticky {
    top: var(--mg-mobile-admin-current-offset, 0px) !important;
  }
}

/* ========================================================================== 
   MONITOR GARAGE - DESKTOP TOGGLE + PAGINATION POLISH V5.0
   Objetivo: conservar el arreglo móvil, recuperar el botón claro/oscuro en
   desktop y rehacer la paginación para que case con la estética Monitor Garage.
   Pegar al final de style.css si no sustituyes el archivo completo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Paginación de categorías / archivos
   -------------------------------------------------------------------------- */
.mg-cat-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 34px !important;
}

.mg-cat-pagination .navigation,
.mg-cat-pagination .pagination,
.mg-cat-pagination .nav-links {
  margin: 0 !important;
}

.mg-cat-pagination .nav-links {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(116,83,45,.13) !important;
  box-shadow: 0 14px 36px rgba(80,54,25,.10), inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.mg-cat-pagination .page-numbers,
.mg-cat-pagination .nav-links a,
.mg-cat-pagination .nav-links span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  border: 1px solid rgba(116,83,45,.13) !important;
  background: rgba(255,255,255,.54) !important;
  color: rgba(41,28,19,.78) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  transform: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.mg-cat-pagination .page-numbers:hover,
.mg-cat-pagination .nav-links a:hover {
  background: rgba(255,244,218,.92) !important;
  border-color: rgba(213,143,25,.34) !important;
  color: #4f2c13 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(124,75,24,.13) !important;
}

.mg-cat-pagination .page-numbers.current,
.mg-cat-pagination .nav-links .current {
  color: #231406 !important;
  background: linear-gradient(135deg, #ffd35a 0%, #ffc21d 58%, #df8b18 100%) !important;
  border-color: rgba(255,255,255,.36) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 8px 20px rgba(202,120,20,.22) !important;
}

.mg-cat-pagination .next,
.mg-cat-pagination .prev {
  min-width: auto !important;
  padding-inline: 18px !important;
}

.mg-cat-pagination .page-numbers.dots,
.mg-cat-pagination .nav-links .dots {
  min-width: 24px !important;
  padding: 0 6px !important;
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(41,28,19,.45) !important;
  box-shadow: none !important;
}

.mg-cat-pagination .page-numbers.dots:hover,
.mg-cat-pagination .nav-links .dots:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.dark-theme .mg-cat-pagination .nav-links,
html.dark-theme body .mg-cat-pagination .nav-links,
.dark-theme .mg-cat-pagination .nav-links {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body.dark-theme .mg-cat-pagination .page-numbers,
body.dark-theme .mg-cat-pagination .nav-links a,
body.dark-theme .mg-cat-pagination .nav-links span,
html.dark-theme body .mg-cat-pagination .page-numbers,
html.dark-theme body .mg-cat-pagination .nav-links a,
html.dark-theme body .mg-cat-pagination .nav-links span,
.dark-theme .mg-cat-pagination .page-numbers,
.dark-theme .mg-cat-pagination .nav-links a,
.dark-theme .mg-cat-pagination .nav-links span {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,250,239,.86) !important;
}

body.dark-theme .mg-cat-pagination .page-numbers:hover,
body.dark-theme .mg-cat-pagination .nav-links a:hover,
html.dark-theme body .mg-cat-pagination .page-numbers:hover,
html.dark-theme body .mg-cat-pagination .nav-links a:hover,
.dark-theme .mg-cat-pagination .page-numbers:hover,
.dark-theme .mg-cat-pagination .nav-links a:hover {
  background: rgba(255,195,29,.12) !important;
  border-color: rgba(255,195,29,.32) !important;
  color: #ffe6a3 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.24) !important;
}

body.dark-theme .mg-cat-pagination .page-numbers.current,
body.dark-theme .mg-cat-pagination .nav-links .current,
html.dark-theme body .mg-cat-pagination .page-numbers.current,
html.dark-theme body .mg-cat-pagination .nav-links .current,
.dark-theme .mg-cat-pagination .page-numbers.current,
.dark-theme .mg-cat-pagination .nav-links .current {
  color: #261404 !important;
  background: linear-gradient(135deg, #ffd35a 0%, #ffc21d 58%, #c77722 100%) !important;
  border-color: rgba(255,227,143,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 8px 22px rgba(199,119,34,.28) !important;
}

body.dark-theme .mg-cat-pagination .page-numbers.dots,
body.dark-theme .mg-cat-pagination .nav-links .dots,
html.dark-theme body .mg-cat-pagination .page-numbers.dots,
html.dark-theme body .mg-cat-pagination .nav-links .dots,
.dark-theme .mg-cat-pagination .page-numbers.dots,
.dark-theme .mg-cat-pagination .nav-links .dots {
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255,255,255,.42) !important;
}

@media (max-width: 640px) {
  .mg-cat-pagination {
    margin-top: 26px !important;
  }

  .mg-cat-pagination .nav-links {
    gap: 6px !important;
    padding: 7px !important;
    max-width: 100% !important;
    border-radius: 22px !important;
  }

  .mg-cat-pagination .page-numbers,
  .mg-cat-pagination .nav-links a,
  .mg-cat-pagination .nav-links span {
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-inline: 11px !important;
    font-size: .84rem !important;
  }

  .mg-cat-pagination .next,
  .mg-cat-pagination .prev {
    width: 100% !important;
    margin-top: 2px !important;
  }
}

/* --------------------------------------------------------------------------
   2) Botón claro/oscuro desktop: asegura capa clicable y estado visual correcto
   -------------------------------------------------------------------------- */
.mg-header-actions .theme-toggle,
#theme-toggle.theme-toggle {
  position: relative !important;
  z-index: 10050 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#theme-toggle.theme-toggle svg,
#mobile-theme-toggle.mobile-theme-toggle svg {
  pointer-events: none !important;
}

html:not(.dark-theme) body:not(.dark-theme) #theme-toggle .sun-icon,
html:not(.dark-theme) body:not(.dark-theme) #mobile-theme-toggle .sun-icon {
  display: block !important;
}

html:not(.dark-theme) body:not(.dark-theme) #theme-toggle .moon-icon,
html:not(.dark-theme) body:not(.dark-theme) #mobile-theme-toggle .moon-icon {
  display: none !important;
}

html.dark-theme body #theme-toggle .sun-icon,
body.dark-theme #theme-toggle .sun-icon,
html.dark-theme body #mobile-theme-toggle .sun-icon,
body.dark-theme #mobile-theme-toggle .sun-icon {
  display: none !important;
}

html.dark-theme body #theme-toggle .moon-icon,
body.dark-theme #theme-toggle .moon-icon,
html.dark-theme body #mobile-theme-toggle .moon-icon,
body.dark-theme #mobile-theme-toggle .moon-icon {
  display: block !important;
}
/* ============================================================
   FIX: hueco entre contenido y footer en plantilla
   "Herramienta / Full Width" (páginas y entradas)
   ============================================================ */

html body.page-template-template-tools-full,
html body.post-template-template-tools-full {
  margin-bottom: 0 !important;
}

html body.page-template-template-tools-full main#content.site-content,
html body.page-template-template-tools-full main.site-content,
html body.post-template-template-tools-full main#content.site-content,
html body.post-template-template-tools-full main.site-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* ============================================================
   FIX: descendentes (g, y, p) cortados en el logo móvil
   ============================================================ */

.mobile-logo-title {
  line-height: 1.05 !important;
}

.mobile-logo-subtitle {
  line-height: 1.1 !important;
  padding-bottom: 0.12em;
}

.mobile-logo,
.mobile-logo-text {
  overflow: visible !important;
}
/* ============================================================
   FIX: respiración en móvil entre header y contenido
   en plantilla full-width (incluye home si la usa)
   ============================================================ */

@media (max-width: 1024px) {
  body.page-template-template-tools-full main#content > .mg-tool-page,
  body.post-template-template-tools-full main#content > .mg-tool-page,
  body.page-template-template-tools-full main.site-content > .mg-tool-page,
  body.post-template-template-tools-full main.site-content > .mg-tool-page,
  body.home main#content > .mg-tool-page,
  body.home main.site-content > .mg-tool-page {
    padding-top: 1.5rem !important;
  }
}

@media (max-width: 640px) {
  body.page-template-template-tools-full main#content > .mg-tool-page,
  body.post-template-template-tools-full main#content > .mg-tool-page,
  body.page-template-template-tools-full main.site-content > .mg-tool-page,
  body.post-template-template-tools-full main.site-content > .mg-tool-page,
  body.home main#content > .mg-tool-page,
  body.home main.site-content > .mg-tool-page {
    padding-top: 1.25rem !important;
  }
}
/* ============================================================
   FIX: ajustar respiración superior en categorías móvil
   para que case con home y plantilla full-width
   ============================================================ */

@media (max-width: 1024px) {
  body.archive.category .mg-cat-page,
  body.archive.category .mg-cat-archive,
  body.archive.category .mg-cat-hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}