.metrics-grid { display: grid; gap: 16px; }
.metrics-card { background:#fff; border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.08); padding:20px; }
@media (min-width: 992px) {
  .metrics-grid { grid-template-columns: repeat(12, 1fr); }
  .metrics-card { grid-column: 1 / -1; }
  .metrics-card.is-half { grid-column: span 6; }
  .metrics-card.is-full { grid-column: 1 / -1; }
}
.theme-dark .metrics-card { background: #262b28; }
.bar-chart { display: grid; grid-auto-rows: 24px; gap: 8px; }
.bar {
  display: flex; align-items: center; gap: 8px;
}
.bar .bar-fill { height: 8px; background: var(--brand); border-radius: 4px; }
.bar .bar-label { width: 120px; color: #555; }
.theme-dark .bar .bar-label { color: #c9c9c9; }
/* Paleta Maderas Murillo - Caoba y Resina */
:root {
  --brand: #8B4513;
  --accent: #20B2AA;
  --accent-strong: #1A8A83;
  --text: #2C1810;
  --muted: #6B5B52;
  --surface: #FFFFFF;
  --surface-2: #FFF8F0;
  --border: #E8DDD0;
  --wood-light: #D4A574;

  --dark-bg: #1A0F0A;
  --dark-surface: #2C1810;
  --dark-card: #3D2415;
  --dark-text: #F5E6D3;
  --dark-muted: #C9B8A3;
  --dark-border: #4D3421;
  --dark-accent: #20B2AA;
  --dark-accent-strong: #2DD4CA;
  
  /* Fuentes Tipográficas */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-headings: 'Montserrat', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'Lora', Georgia, serif;
}

/* ==========================================
   TIPOGRAFÍA - MADERAS MURILLO
   ========================================== */

/* Fuente base del cuerpo - FORZAR SOBRE BOOTSTRAP */
body {
  font-family: var(--font-body) !important;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
}

/* Aplicar Lora solo a elementos de texto, NO a iconos */
body p,
body li,
body div:not(.material-icons),
body span:not(.material-icons),
body a:not(.material-icons) {
  font-family: var(--font-body);
}

body.maderasmurillo-bg {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  color: var(--text);
}

/* Títulos principales - Playfair Display - FORZAR */
h1, 
.hero-title, 
.display-title,
h1 *,
.kensington {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

h1 {
  font-size: clamp(32px, 5vw, 48px);
}

/* Subtítulos y encabezados - Montserrat - FORZAR */
h2, h3, h4, h5, h6,
.section-title,
.card-title,
.navbar-brand,
.navbar-brand *,
.btn,
.nav-link,
h2 *, h3 *, h4 *, h5 *, h6 * {
  font-family: var(--font-headings) !important;
  font-weight: 600 !important;
  line-height: 1.3;
}

h2 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
}

h3 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
}

h4 {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 600;
}

h5 {
  font-size: 18px;
  font-weight: 600;
}

h6 {
  font-size: 16px;
  font-weight: 600;
}

/* Párrafos y contenido - Lora - FORZAR */
p, li, 
.card-text, 
.lead, 
blockquote {
  font-family: var(--font-body) !important;
}

/* NO aplicar a iconos Material Icons */
.material-icons,
i.material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 1em;
}

.lead {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

/* ==========================================
   HEADER GLASSMORPHISM PROFESIONAL
   ========================================== */

.jm-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(30px) saturate(220%) brightness(1.05);
  -webkit-backdrop-filter: blur(30px) saturate(220%) brightness(1.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.8),
    0 1px 1px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.theme-dark .jm-nav {
  background: rgba(28, 16, 10, 0.50) !important;
  backdrop-filter: blur(30px) saturate(220%) brightness(1.1);
  -webkit-backdrop-filter: blur(30px) saturate(220%) brightness(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2),
    0 1px 1px rgba(255, 255, 255, 0.15);
}

/* Hero scrolled - un poco más sólido pero manteniendo transparencia */
.jm-nav.scrolled {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(35px) saturate(220%) brightness(1.05);
  -webkit-backdrop-filter: blur(35px) saturate(220%) brightness(1.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.theme-dark .jm-nav.scrolled {
  background: rgba(28, 16, 10, 0.70) !important;
  backdrop-filter: blur(35px) saturate(220%) brightness(1.1);
  -webkit-backdrop-filter: blur(35px) saturate(220%) brightness(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.75);
}

/* Navegación */
.nav-link {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Botones */
.btn {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
}

/* Etiquetas y badges - FORZAR */
.badge, .glass-chip {
  font-family: var(--font-headings) !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* Botones específicos - FORZAR */
.btn,
button {
  font-family: var(--font-headings) !important;
  font-weight: 600 !important;
}

/* Dark mode */
.theme-dark body.maderasmurillo-bg {
  background: linear-gradient(180deg, var(--dark-surface), var(--dark-bg));
  color: var(--dark-text);
}
.theme-dark .jm-footer,
.theme-dark .jm-nav .brand-logo,
.theme-dark .glide-title { color: var(--dark-text); }

/* ==========================================
   SOLUCIÓN ULTRA-AGRESIVA PARA LOGO EN MODO OSCURO
   ========================================== */

/* 1. Desactivar TODOS los filtros globales que puedan afectar imágenes */
.theme-dark img {
  /* Resetear cualquier filtro global primero */
}

/* 2. Protección específica SOLO para IMÁGENES del logo - NO AFECTA TEXTO */
.theme-dark .brand-logo-img,
.theme-dark .navbar-brand img,
.theme-dark img[src*="lodo"],
.theme-dark img[src*="logo"],
.theme-dark .navbar img[src] {
  /* Filtros explícitos con valores por defecto - SOLO PARA IMÁGENES */
  filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg) invert(0) grayscale(0) sepia(0) blur(0px) !important;
  -webkit-filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg) invert(0) grayscale(0) sepia(0) blur(0px) !important;
  
  /* Opacidad y visibilidad */
  opacity: 1 !important;
  visibility: visible !important;
  
  /* Fondos */
  background: transparent !important;
  background-color: transparent !important;
  
  /* Mezcla de colores */
  mix-blend-mode: normal !important;
  
  /* Transformaciones - SOLO para imágenes */
  transform: none !important;
  
  /* Máscaras y clips */
  mask: none !important;
  clip-path: none !important;
  
  /* NO tocar text-shadow, NO tocar color, NO tocar all */
}

/* Asegurar que el logo mantenga su apariencia original Y TAMAÑO CONTROLADO */
.brand-logo-img {
  max-height: 40px !important;
  height: 40px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Tamaño del logo en diferentes resoluciones */
@media (max-width: 768px) {
  .brand-logo-img {
    max-height: 35px !important;
    height: 35px !important;
    max-width: 120px !important;
  }
}

@media (max-width: 480px) {
  .brand-logo-img {
    max-height: 30px !important;
    height: 30px !important;
    max-width: 100px !important;
  }
}

.theme-dark .brand-logo-img {
  /* Forzar que mantenga su apariencia original */
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
  mix-blend-mode: normal !important;
}

/* Protección adicional para el logo específico */
.theme-dark img[src="img/lodo esteban2.png"],
.theme-dark img[src*="lodo esteban2.png"],
.theme-dark .navbar-brand img[src="img/lodo esteban2.png"],
.theme-dark .brand-logo-img[src="img/lodo esteban2.png"] {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
  -o-filter: none !important;
  /* Forzar que no se aplique ningún filtro */
  filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg) invert(0) !important;
  -webkit-filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg) invert(0) !important;
}

/* Solución alternativa: crear una clase específica para el logo */
.logo-protected {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
  -o-filter: none !important;
}

.theme-dark .logo-protected {
  filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg) invert(0) !important;
  -webkit-filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg) invert(0) !important;
}
.theme-dark .glide-card,
.theme-dark .admin-card { background: var(--dark-card); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.theme-dark .glide-chip { background: #1F2937; color: var(--dark-text); border-color: var(--dark-border); }
.theme-dark .glide-meta { color: var(--dark-text); }
.theme-dark .empty-state { color: var(--dark-text); }
.theme-dark .btn { background: var(--dark-accent) !important; color: #000 !important; }

.kensington {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.5px;
}

/* Tipografía: escala editorial moderna */
html { font-size: 100%; }
body { font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); margin: 0 0 0.6em; line-height: 1.2; }
h1 { font-size: clamp(2.25rem, 2vw + 1.5rem, 2.5rem); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 1.4vw + 1.1rem, 2rem); font-weight: 700; letter-spacing: -0.005em; }
h3 { font-size: clamp(1.375rem, 1vw + 0.9rem, 1.5rem); font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.125rem; font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; }
small, .subtitle { font-size: 0.875rem; color: var(--muted); }
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 { color: var(--dark-text); }
.theme-dark small, .theme-dark .subtitle { color: var(--dark-muted); }
/* Escalas para pantallas muy grandes (TVs 4K/8K) */
@media (min-width: 1920px) {
  body { font-size: 18px; }
  h1 { font-size: clamp(2.6rem, 1.2vw + 1.5rem, 3.2rem); }
  h2 { font-size: clamp(2rem, 1vw + 1.2rem, 2.4rem); }
}
@media (min-width: 2560px) {
  body { font-size: 20px; }
  h1 { font-size: clamp(2.8rem, 1vw + 1.8rem, 3.6rem); }
  h2 { font-size: clamp(2.2rem, 0.9vw + 1.4rem, 2.8rem); }
}

/* Estilos de navegación adicionales (glassmorphism definido arriba) */
.jm-nav .container {
  padding-left: 24px;
  padding-right: 24px;
}

.jm-nav .navbar-nav {
  gap: 8px;
}

.jm-nav .nav-link {
  padding: 10px 16px;
}

/* Clase is-scrolled (alias de scrolled) */
.jm-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(35px) saturate(220%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(35px) saturate(220%) brightness(1.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
.theme-dark .jm-nav.is-scrolled { 
  background: rgba(28, 16, 10, 0.70) !important;
  backdrop-filter: blur(35px) saturate(220%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(35px) saturate(220%) brightness(1.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.75) !important;
}
.nav-switch { margin-top: 14px; }
/* Icon toggle for theme */
.theme-toggle-btn { border: 1px solid var(--border); border-radius: 12px; width: 46px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); cursor: pointer; }
.theme-toggle-btn i { font-size: 18px; }
.theme-dark .theme-toggle-btn { background: #0f0f0f; border-color: #333; }
@media (min-width: 1600px) {
  .theme-toggle-btn { width: 52px; height: 36px; }
  .theme-toggle-btn i { font-size: 22px; }
}
@media (max-width: 360px) {
  .theme-toggle-btn { width: 40px; height: 30px; }
  .theme-toggle-btn i { font-size: 16px; }
}
/* Bootstrap navbar toggler visible over gradient backgrounds */
.navbar-light .navbar-toggler { border-color: var(--border); }
.navbar-light .navbar-toggler-icon { background-image: none; width: 24px; height: 2px; background: var(--text); box-shadow: 0 6px 0 var(--text), 0 -6px 0 var(--text); }

.jm-footer {
  background: var(--surface);
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* Footer links con mejor visibilidad */
.jm-footer a {
  color: var(--accent);
  text-decoration: none;
  transition: all 0.3s ease;
}

.jm-footer a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.jm-footer h6 {
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 1rem;
  font-family: 'Montserrat', sans-serif;
}

.jm-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jm-footer .footer-links li {
  margin-bottom: 0.5rem;
}

.jm-footer .footer-links a {
  color: var(--accent);
  font-weight: 500;
}

.jm-footer .footer-links a:hover {
  color: var(--brand);
  padding-left: 5px;
}

/* Mejorar visibilidad del texto general del footer */
.jm-footer p {
  color: var(--accent);
  opacity: 1;
  font-weight: 500;
}

.jm-footer .material-icons {
  color: var(--accent);
  vertical-align: middle;
  margin-right: 8px;
}

.jm-footer h5 {
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 1rem;
  font-family: 'Playfair Display', serif;
}

/* ==========================================
   LOGO FUSIONADO - SÍMBOLO MODERNO
   ========================================== */

.logo-fusionado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0px;
  line-height: 1;
  padding: 2px 0;
  max-width: 140px;
  min-width: 140px;
}

.logo-fusion-container {
  position: relative;
  height: 22px;
  width: 140px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.fusion-word {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0px;
  text-transform: uppercase;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 140px;
}

/* Muebles - Aparece y desaparece */
.fusion-muebles {
  color: #1A9B8E; /* Turquesa más sólido y oscuro */
  opacity: 0;
  transform: translateY(-50%) translateX(0) scale(1);
  text-shadow: 
    2px 2px 6px rgba(26, 155, 142, 0.8),
    0 0 20px rgba(26, 155, 142, 0.7),
    0 0 35px rgba(26, 155, 142, 0.5),
    1px 1px 2px rgba(0, 0, 0, 0.3);
  animation: fadeInOut 6s ease-in-out infinite;
  z-index: 2;
  font-weight: 700;
  -webkit-text-stroke: 0.5px rgba(26, 155, 142, 0.4);
}

/* Maderas - Aparece y desaparece alternadamente */
.fusion-maderas {
  color: #000000;
  opacity: 0;
  transform: translateY(-50%) translateX(0) scale(1);
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(32, 178, 170, 0.15);
  animation: fadeInOut 6s ease-in-out infinite;
  animation-delay: 3s;
  z-index: 2;
}

/* Animación de fade in/out profesional */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-10px) scale(0.95);
  }
  10% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
  40% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
  50% {
    opacity: 0;
    transform: translateY(-50%) translateX(10px) scale(0.95);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(-10px) scale(0.95);
  }
}

/* Apellido Murillo */
.fusion-apellido {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--brand);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2px;
  display: block;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  animation: apellidoGlow 3s ease-in-out infinite;
  padding-left: 2px;
}

@keyframes apellidoGlow {
  0%, 100% {
    opacity: 0.9;
    text-shadow: 
      1px 1px 2px rgba(0, 0, 0, 0.1),
      0 0 8px rgba(32, 178, 170, 0.2);
  }
  50% {
    opacity: 1;
    text-shadow: 
      1px 1px 2px rgba(0, 0, 0, 0.1),
      0 0 20px rgba(32, 178, 170, 0.5);
  }
}

/* Modo oscuro - Mismo efecto fade in/out pero con colores claros */
.theme-dark .fusion-muebles {
  color: #F0F0F0 !important; /* Blanco sólido */
  text-shadow: 
    2px 2px 6px rgba(255, 255, 255, 0.9),
    0 0 25px rgba(255, 255, 255, 0.7),
    0 0 40px rgba(255, 255, 255, 0.5),
    1px 1px 3px rgba(0, 0, 0, 0.4) !important;
  font-weight: 700 !important;
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.3) !important;
}

.theme-dark .fusion-maderas {
  color: #2DD4CA !important;
  text-shadow: 
    2px 2px 5px rgba(45, 212, 202, 0.8),
    0 0 25px rgba(45, 212, 202, 0.6),
    0 0 45px rgba(32, 178, 170, 0.4) !important;
}

.theme-dark .fusion-apellido {
  color: #FFFFFF !important;
  text-shadow: 
    1px 1px 3px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(255, 255, 255, 0.4),
    0 0 22px rgba(45, 212, 202, 0.3) !important;
}

/* Dropdown menu mejorado */
.dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 10px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
}

.dropdown-item {
  padding: 10px 20px;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-item:hover {
  background: linear-gradient(90deg, rgba(32, 178, 170, 0.1), rgba(139, 69, 19, 0.05));
  color: var(--brand);
  padding-left: 25px;
}

.dropdown-item .material-icons {
  color: var(--accent);
}

.dropdown-item:hover .material-icons {
  color: var(--brand);
}

.theme-dark .dropdown-menu {
  background: rgba(30, 20, 15, 0.98);
  border-color: var(--dark-accent);
}

.theme-dark .dropdown-item {
  color: var(--dark-text);
}

.theme-dark .dropdown-item:hover {
  background: linear-gradient(90deg, rgba(32, 178, 170, 0.2), rgba(139, 69, 19, 0.1));
  color: var(--dark-accent);
}

.theme-dark .dropdown-item .material-icons {
  color: var(--dark-accent);
}

/* Responsive */
@media (max-width: 992px) {
  .logo-fusionado {
    max-width: 120px;
    min-width: 120px;
  }
  
  .logo-fusion-container {
    width: 120px;
    height: 20px;
  }
  
  .fusion-word {
    font-size: 1rem;
    max-width: 120px;
  }
  
  .fusion-apellido {
    font-size: 0.7rem;
  }
}

@media (max-width: 768px) {
  .logo-fusionado {
    max-width: 100px;
    min-width: 100px;
  }
  
  .logo-fusion-container {
    width: 100px;
    height: 18px;
  }
  
  .fusion-word {
    font-size: 0.9rem;
    max-width: 100px;
  }
  
  .fusion-apellido {
    font-size: 0.65rem;
    letter-spacing: 1px;
  }
}

@media (max-width: 576px) {
  .logo-fusionado {
    display: none;
  }
}

/* ==========================================
   HERO IMAGE ANCHO COMPLETO - TODAS LAS PÁGINAS
   ========================================== */

.page-hero {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.7), rgba(32, 178, 170, 0.6));
  z-index: 1;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0px,
      transparent 2px,
      transparent 4px
    );
  z-index: 2;
  pointer-events: none;
}

.page-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 40px 20px;
}

.page-hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 255, 255, 0.2);
  color: white;
}

.page-hero-content p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.95);
}

/* Ajuste para que el contenido no quede debajo del header fijo */
body {
  padding-top: 76px;
}

/* Hero específicos por página */
.page-hero.hero-contact {
  background-image: linear-gradient(135deg, rgba(139, 69, 19, 0.85), rgba(32, 178, 170, 0.75)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%238B4513" width="1200" height="400"/></svg>');
}

.page-hero.hero-services {
  background-image: linear-gradient(135deg, rgba(32, 178, 170, 0.85), rgba(139, 69, 19, 0.75)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%2320B2AA" width="1200" height="400"/></svg>');
}

.page-hero.hero-gallery {
  background-image: linear-gradient(135deg, rgba(212, 165, 116, 0.85), rgba(32, 178, 170, 0.75)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%23D4A574" width="1200" height="400"/></svg>');
}

.page-hero.hero-videos {
  background-image: linear-gradient(135deg, rgba(139, 69, 19, 0.85), rgba(26, 138, 131, 0.75)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%238B4513" width="1200" height="400"/></svg>');
}

.page-hero.hero-about {
  background-image: linear-gradient(135deg, rgba(32, 178, 170, 0.85), rgba(212, 165, 116, 0.75)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%2320B2AA" width="1200" height="400"/></svg>');
}

.page-hero.hero-faq {
  background-image: linear-gradient(135deg, rgba(139, 69, 19, 0.8), rgba(32, 178, 170, 0.8)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%238B4513" width="1200" height="400"/></svg>');
}

/* Responsive hero */
@media (max-width: 768px) {
  .page-hero {
    height: 300px;
  }
  
  body {
    padding-top: 68px;
  }
}

/* Footer layout helpers */
.footer-meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.footer-social { margin-left:auto; display:flex; gap:8px; align-items:center; }
.v-middle { vertical-align: middle; }
.toast-root { position: fixed; bottom: 0; right: 0; padding: 1rem; z-index: 1080; }
/* Admin toolbar and pager */
.admin-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:8px; }
/* Dark mode ya definido arriba en HEADER GLASSMORPHISM */
.theme-dark .sidenav { background: #222726; }
.theme-dark .sidenav a { color: #eaeaea; }
.theme-dark .jm-footer { background: #121517; color: var(--dark-text); border-top-color: rgba(255,255,255,.08); }

.theme-dark .jm-footer a {
  color: var(--dark-accent);
}

.theme-dark .jm-footer a:hover {
  color: #20B2AA;
}

.theme-dark .jm-footer h6 {
  color: var(--dark-accent);
}

.theme-dark .jm-footer .footer-links a {
  color: var(--dark-accent);
}

.theme-dark .jm-footer .footer-links a:hover {
  color: #20B2AA;
}

.theme-dark .jm-footer p {
  color: var(--dark-accent);
  opacity: 1;
  font-weight: 500;
}

.theme-dark .jm-footer .material-icons {
  color: var(--dark-accent);
}

.theme-dark .jm-footer h5 {
  color: var(--dark-accent);
}

/* Sidenav móvil */
.sidenav { background: #ffffff; }
.sidenav a { color: var(--brand); }
.sidenav a:hover { background: rgba(0,0,0,.04); }
.sidenav a.has-items i.material-icons { color: var(--accent-strong); }
.theme-dark .sidenav a.has-items i.material-icons { color: var(--dark-accent-strong); }

/* Botones por defecto: color de marca */
.btn { background: var(--brand) !important; color: #fff !important; }
.btn-flat { color: var(--brand) !important; }
.btn:hover { filter: brightness(0.98); }

/* Enlaces y estados de foco/hover */
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus { color: var(--accent-strong); text-decoration: underline; }
.jm-nav a { color: var(--brand); }
.jm-nav a:hover, .jm-nav a:focus { color: var(--accent-strong); }
.jm-nav a.has-items i.material-icons { color: var(--accent-strong); transition: color .2s ease; }
.jm-nav .navbar-brand img { display:inline-block; height:36px; width:auto; }
.theme-dark a { color: var(--dark-text); }
.theme-dark a:hover, .theme-dark a:focus { color: var(--dark-accent-strong); }
.theme-dark .jm-nav a { color: var(--dark-text); }
.theme-dark .jm-nav a:hover, .theme-dark .jm-nav a:focus { color: var(--dark-accent-strong); }
.theme-dark .jm-nav a.has-items i.material-icons { color: var(--dark-accent-strong); }
/* Logo invertido en modo oscuro */
/* Logo protegido - no invertir */

/* Texto secundario */
.text-muted { color: #666; }
.theme-dark .text-muted { color: #bdbdbd; }
/* Ajuste de Materialize para modo oscuro */
.theme-dark .grey-text { color: var(--dark-text) !important; }
/* Formularios y listas en modo oscuro */
.theme-dark .input-field label { color: var(--dark-text) !important; }
.theme-dark .input-field input,
.theme-dark .input-field textarea,
.theme-dark .input-field select { color: var(--dark-text) !important; caret-color: var(--dark-text); }
.theme-dark .input-field input::placeholder,
.theme-dark .input-field textarea::placeholder { color: var(--dark-text) !important; }
.theme-dark .input-field input:focus + label,
.theme-dark .input-field textarea:focus + label { color: var(--dark-accent) !important; }
.theme-dark .collection { border-color: var(--dark-border); background: transparent; }
.theme-dark .collection .collection-item { background: var(--dark-card); color: var(--dark-text); border-bottom-color: var(--dark-border); }
.theme-dark .modal .modal-content { background: var(--dark-card); color: var(--dark-text); }
.theme-dark .badge { background: var(--dark-accent); color: #111; }
.theme-dark .btn-flat { color: var(--dark-text) !important; }
.theme-dark .collection .secondary-content i { color: var(--dark-text); }

/* Variantes en modal de edición */
.variant-list { display: grid; gap: 8px; }
.variant-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; align-items: center; }
.variant-row input { height: 2.4rem; }

/* Forzar texto blanco en modo oscuro (base) */
.theme-dark,
.theme-dark p,
.theme-dark li,
.theme-dark span,
.theme-dark a,
.theme-dark label,
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6 { color: var(--dark-text); }
.theme-dark .table, .theme-dark .table th, .theme-dark .table td { color: var(--dark-text); }
.theme-dark input, .theme-dark textarea, .theme-dark select { color: var(--dark-text); background: #0c0c0c; border-color: var(--dark-border); }
.theme-dark .form-control, .theme-dark .form-select { color: var(--dark-text); background: #0c0c0c; border-color: var(--dark-border); }
.theme-dark .input-group-text { background:#000; color:#fff; border-color:#333; }
.theme-dark .nav-link, .theme-dark .navbar, .theme-dark .footer, .theme-dark .jm-footer { color: var(--dark-text); }
.theme-dark .admin-card.widget-card { color: var(--dark-text); }

/* Excepciones intencionales */
.theme-dark .btn,
.theme-dark .btn:hover,
.theme-dark .btn:focus {
  color: #fff !important;
  background: #000 !important;
  border-color: #000 !important;
}
.theme-dark .btn-dark { color: #fff !important; background: #000 !important; border-color: #000 !important; }
.theme-dark .btn-outline-dark { color: #fff !important; background: #000 !important; border-color: #444 !important; }
.theme-dark .btn-outline-danger { color: #fff !important; background: #000 !important; border-color: #000 !important; }
.theme-dark .btn-flat { color: #fff !important; background: #000 !important; }

/* Refuerzo de colores para modo oscuro: todo texto visible en blanco y líneas claras */
.theme-dark * { text-shadow: none; }
.theme-dark .text-muted,
.theme-dark .grey-text,
.theme-dark .nav-link,
.theme-dark .nav-link:hover,
.theme-dark .nav-link:focus,
.theme-dark .navbar,
.theme-dark .navbar a,
.theme-dark .page-footer,
.theme-dark .jm-footer,
.theme-dark .accordion-button,
.theme-dark .accordion-body,
.theme-dark .modal-content,
.theme-dark .collection .collection-item,
.theme-dark .badge,
.theme-dark .material-icons,
.theme-dark .widget-title,
.theme-dark .widget-sub,
.theme-dark .admin-card,
.theme-dark .admin-card * {
  color: var(--dark-text) !important;
}
.theme-dark ::placeholder { color: var(--dark-text) !important; opacity: .8; }
.theme-dark input, .theme-dark textarea, .theme-dark select, .theme-dark .form-control, .theme-dark .form-select {
  color: var(--dark-text); background: #0c0c0c; border-color: var(--dark-border);
}
.theme-dark hr, .theme-dark .table, .theme-dark .table th, .theme-dark .table td,
.theme-dark .border, .theme-dark .list-group, .theme-dark .collection, .theme-dark .modal-content,
.theme-dark .admin-card, .theme-dark .jm-footer, .theme-dark .jm-nav, .theme-dark .widget-card {
  border-color: #ffffff33 !important;
}

/* Tablas y tarjetas a fondo negro para productos, pedidos y checkout */
.theme-dark .admin-card,
.theme-dark .widget-card,
.theme-dark .table,
.theme-dark .table > :not(caption) > * > * {
  background-color: #000 !important;
  color: #fff !important;
}

/* Tarjetas tipo glide */
.glide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
@media (max-width: 480px) {
  .glide-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
}
@media (max-width: 360px) {
  .glide-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

.glide-card {
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  border: 1px solid var(--border);
  box-shadow: 0 8px 26px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.glide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  border-color: #00000010;
}
.glide-card.is-compact {
  display: grid;
  grid-template-columns: 120px 1fr;
}
.glide-card.is-compact .glide-media { aspect-ratio: auto; height: 100%; min-height: 120px; }
.glide-card.is-compact .glide-content { padding: 10px 12px; }
.glide-card .glide-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--brand), var(--accent));
}
.glide-card .glide-media { position: relative; overflow: hidden; }
.glide-card .glide-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: #fff; }
.theme-dark .glide-card .glide-media img { background: #000; }

/* Thumbnails y previsualizaciones consistentes */
.variant-row img, #edit-images-preview img, #create-images-preview img { object-fit: cover; width: 80px; height: 80px; }

/* Ajuste de relación para que la imagen abarque bien el área de tarjeta sin recortar */
@media (min-width: 992px) {
  .glide-card .glide-media { aspect-ratio: 1 / 1; }
}
.media-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: var(--muted); }
.media-placeholder i { font-size: 42px; opacity: .5; }
.modal.bottom-sheet { max-height: 70%; }
.glide-card .glide-content {
  padding: 14px 16px 16px;
}
.glide-title {
  font-weight: 700;
  margin: 0 0 6px;
}
.glide-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #5a5a5a;
  flex-wrap: wrap;
}
.glide-meta .right { margin-left: auto; display: inline-flex; gap: 8px; }
.glide-chip {
  background: var(--surface-2);
  color: var(--brand);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  border: 1px solid var(--border);
}

/* Formularios admin */
.admin-card {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  padding: 16px;
}
.admin-layout { display: grid; grid-template-columns: 72px 1fr; gap: 20px; }
.admin-rail { background: var(--surface); border-right: 1px solid var(--border); border-radius: 14px; padding: 8px 0; display:flex; flex-direction:column; align-items:center; gap:8px; position: sticky; top: 72px; height: calc(100vh - 96px); }
.admin-rail .rail-item { width: 48px; height:48px; border-radius: 12px; display:flex; align-items:center; justify-content:center; color: var(--brand); }
.admin-rail .rail-item.active, .admin-rail .rail-item:hover { background: #f1f1f1; }
.theme-dark .admin-rail { background: var(--dark-card); border-color: var(--dark-border); }
.theme-dark .admin-rail .rail-item.active, .theme-dark .admin-rail .rail-item:hover { background: #1F2937; }
.admin-main { display: block; }
.admin-content { margin-top: 8px; }
.admin-section[data-section="products"] .admin-card.widget-card { padding: 22px; }
.admin-topbar { display:flex; gap:12px; align-items:center; margin-bottom: 12px; }
/* tabs removidos */
.widget-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 12px; }
.widget-card { background:#fff; border-radius: 14px; border: 1px solid var(--border); padding: 18px; box-shadow: 0 8px 28px rgba(0,0,0,.08); min-height: 140px; }
.widget-card.widget-accent { background: linear-gradient(180deg, #f7f7f7, #ffffff); }
.widget-card.widget-wide { grid-column: span 2; min-height: 180px; }
.widget-card.widget-full { grid-column: 1 / -1; min-height: 180px; }
.widget-title { font-weight:600; font-size: 1.05rem; color: #444; margin-bottom: 10px; }
.widget-kpi { font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.widget-sub { color:#6b7280; font-size: .9rem; }
.widget-toolbar { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.widget-toolbar .title { display:flex; align-items:center; gap:6px; font-weight: 700; }
.widget-toolbar .title i { color: var(--brand); }
.spark { width:100%; height: 120px; display:block; }
.donut { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background: conic-gradient(#111 0 120deg, #555 120deg 240deg, #999 240deg 360deg); position: relative; max-width: 360px; margin-inline: auto; }
.donut:after { content: ""; position:absolute; inset: 18% 18%; background: #fff; border-radius: 50%; }
.donut-legend { display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
.donut-legend span { display:inline-flex; align-items:center; gap:6px; color:#555; }
.donut-legend span i { display:inline-block; width:10px; height:10px; border-radius:50%; }
.theme-dark .widget-card { background: var(--dark-card); border-color: var(--dark-border); }
.theme-dark .widget-title { color: var(--dark-text); }
.theme-dark .donut:after { background: var(--dark-card); }

/* Ampliar tarjetas de secciones */
.admin-card.widget-card { padding: 18px; border-radius: 14px; }
.admin-auth-wrap { display:flex; justify-content:center; padding: 24px 0; }
.admin-auth-wrap { display:flex; justify-content:center; align-items:center; padding: 24px 0; min-height: 65vh; }
.auth-card { max-width: 720px; width:100%; border-radius: 16px; border:1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 0; overflow:hidden; background:#fff; }
.auth-card .auth-header { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); background: linear-gradient(180deg, #fafafa, #f4f4f4); }
.auth-card .auth-header .auth-icon { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#111; color:#fff; }
.auth-card .auth-body { padding:20px; }
.auth-card .form-label { font-weight:600; margin-bottom:6px; }
.auth-card .btn { width:100%; padding:.65rem 1rem; }
.auth-card small { color:#666; }
.auth-card .form-control { padding: 12px 14px; border-radius: 10px; }
.auth-card .form-check-input { border-radius: 6px; }
.auth-card a { color: inherit; }
.auth-card .subtitle { color:#666; }
.theme-dark .auth-card { background:#000; border-color:#333; box-shadow: 0 10px 30px rgba(255,255,255,.06); }
.theme-dark .auth-card .auth-header { background: linear-gradient(180deg, #0e0e0e, #000); border-color:#333; }
.theme-dark .auth-card small { color:#bbb; }
.theme-dark .auth-card .subtitle { color:#bbb; }
.theme-dark .auth-card .form-control { background:#0c0c0c; color:#fff; border-color:#333; }
.theme-dark .auth-card .form-control::placeholder { color:#bbb; }
.auth-header { display:flex; align-items:center; gap:12px; margin-bottom: 12px; }
.auth-icon { width:44px; height:44px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:#111; color:#fff; }
.theme-dark .auth-icon { background:#fff; color:#000; }

/* Uniformar tarjetas de secciones al estilo de widgets */
.admin-card.widget-card h6 { margin: 0 0 8px; }
.admin-card.widget-card .admin-actions { margin-top: 8px; }
.admin-card.widget-card .table { margin-bottom: 0; }
.admin-card.widget-card .input-field input,
.admin-card.widget-card .input-field textarea,
.admin-card.widget-card .input-field select { background: #fff; }
.theme-dark .admin-card.widget-card .input-field input,
.theme-dark .admin-card.widget-card .input-field textarea,
.theme-dark .admin-card.widget-card .input-field select { background: #0c0c0c; color: var(--dark-text); }
.admin-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.admin-tile {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  transition: box-shadow .2s ease, transform .2s ease;
  cursor: pointer;
}
.admin-tile:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); }
.admin-tile i { color: var(--brand); }
.theme-dark .admin-tile { background: var(--dark-card); border-color: var(--dark-border); }
.theme-dark .admin-tile i { color: var(--dark-accent); }
.admin-tile.active { outline: 2px solid var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.admin-sidebar .admin-dashboard { grid-template-columns: 1fr; }
.admin-sidebar .admin-card { position: sticky; top: 72px; }
.admin-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.category-list .chip {
  margin-right: 8px;
  margin-bottom: 8px;
}

.empty-state {
  text-align: center;
  color: #666;
  padding: 32px 0;
}
.qr-container { padding: 16px; }
.jm-no-mt { margin-top: 0 !important; }
.jm-mt-sm { margin-top: 12px !important; }
.jm-no-mb { margin-bottom: 0 !important; }

/* Miniaturas de carrito */
.cart-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; margin-right: 8px; vertical-align: middle; }
.cart-thumb-icon { width: 42px; height: 42px; display:inline-flex; align-items:center; justify-content:center; border-radius: 8px; margin-right:8px; background: var(--surface-2); color: var(--muted); }
.theme-dark .cart-thumb-icon { background: #1F2937; color: var(--dark-muted); }

/* Galería de detalle */
.theme-dark #detail-main-img { background: #000; }

/* Visibilidad de vistas controlada por router */
.view { display: none; }
.view.is-visible { display: block; }

/* Separación del header en vistas principales */
#view-store, #view-product, #view-cart { padding-top: 18px; }
@media (min-width: 992px) {
  #view-store, #view-product, #view-cart { padding-top: 28px; }
}

/* Badge del carrito: color marca */
#cart-badge { background-color: var(--brand); }
#cart-badge-mobile { background-color: var(--brand); }
.cart-link { position: relative; display: inline-flex; align-items: center; }
.cart-link #cart-badge,
.cart-link #cart-badge-mobile {
  position: absolute;
  top: -6px;
  right: -8px;
  transform: none;
}


/* ==========================================
   HERO SIMPLE - SIN EFECTOS AERO
   ========================================== */

.aero-hero {
  position: relative;
  width: 100vw;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 80px;
  margin: -76px 0 60px calc(-50vw + 50%);
  background: linear-gradient(135deg, #8B4513 0%, #5d3a1a 50%, #2C1810 100%);
  background-attachment: fixed;
}

.aero-hero .hero-bg {
  display: none;
}

.glass-card {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  padding: 50px 60px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.5);
}

.glass-card h1 {
  margin-bottom: 20px;
}

.glass-card .lead {
  margin-bottom: 24px;
  line-height: 1.6;
}

.glass-chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  margin-right: 8px;
}

.badge-row {
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.cta-row .btn {
  padding: 14px 32px;
  font-size: 17px;
  border-radius: 12px;
}

.floating {
  animation: float-simple 3s ease-in-out infinite;
}

@keyframes float-simple {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Responsive */
/* Hero de la tienda */
.hero-store {
  background-image: linear-gradient(135deg, rgba(32, 178, 170, 0.9), rgba(139, 69, 19, 0.85)) !important;
}

@media (max-width: 768px) {
  .aero-hero {
    min-height: 55vh;
    padding: 100px 20px 60px;
    margin: -68px 0 40px calc(-50vw + 50%);
  }
  
  .glass-card {
    padding: 40px 30px;
  }
  
  .jm-nav {
    padding: 12px 0;
  }
  
  .jm-nav .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .cta-row .btn {
    padding: 12px 24px;
    font-size: 16px;
  }
}

@media (min-width: 1400px) {
  .glass-card {
    padding: 60px 80px;
  }
  
  .jm-nav {
    padding: 20px 0;
  }
}

/* Modo oscuro */
.theme-dark .glass-card {
  background: rgba(44, 24, 16, 0.95);
  color: var(--dark-text);
}

.theme-dark .glass-chip {
  background: var(--dark-accent);
}

/* Admin panel polish: proporciones, espaciados y tablas */
.widget-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.widget-card { border-radius: 16px; padding: 22px; }
.widget-title { font-weight: 700; margin-bottom: 8px; }
.widget-kpi { font-size: 2.6rem; font-weight: 800; }
.widget-sub { color: #666; }
.theme-dark .widget-sub { color: #bbb; }
.admin-card.widget-card { padding: 22px; border-radius: 16px; }
.admin-card.widget-card .widget-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; }
.admin-card.widget-card .admin-actions { display:flex; gap:12px; flex-wrap:wrap; }
.admin-card.widget-card .table th { font-weight: 600; }
.admin-card.widget-card .table thead th { position: sticky; top: 0; z-index: 1; background: #fff; }
.theme-dark .admin-card.widget-card .table thead th { background: #000; }

/* Variantes mejoradas */
.variant-list { gap: 10px; }
.variant-row { grid-template-columns: 1.4fr 0.8fr 0.8fr auto; gap: 10px; }
.variant-row input { height: auto; padding: 10px 12px; border-radius: 10px; }
.theme-dark .variant-row input { background:#0c0c0c; color:#fff; border-color:#333; }