/* ============================================================
   DISEÑOS.CSS — Sistema de 5 DISEÑOS + TEMAS DE COLOR
   CimaTech · Tienda Virtual (public-tienda)
   ------------------------------------------------------------
   DOS EJES INDEPENDIENTES:
   • DISEÑO  = estructura (fuentes, formas, layout, navbar).  html[data-diseno="dX"]
   • TEMA    = color (paleta completa). Se aplica por JS inline y
              MANDA sobre el color del diseño. 'auto' = color del diseño.

   Enfocado a VENTA DE ARTÍCULOS EN GENERAL (moda, tecnología,
   belleza, hogar…), no a óptica.

   SEGURIDAD: no se toca ningún ID del "cerebro" (gridProductos,
   carrito, panelAdmin, etc.). Solo estilo/estructura.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Manrope:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');


/* ════════════════════════════════════════════════════════════════
   DISEÑO 1 — "ESCAPARATE"  (moda · elegante · claro cálido)
   Display serif, marfil cálido, líneas finas, mucho aire. Boutique
   de moda / marcas / accesorios.
   ════════════════════════════════════════════════════════════════ */
html[data-diseno="d1"]{
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'Inter', system-ui, sans-serif;
  --radio-card:6px; --radio-btn:3px;
  --color-primary:#2a2440; --color-secondary:#6b5d4f; --color-accent:#a6784f;
  --color-bg-sitio:#f6f3ee; --color-footer-bg:#201c26; --color-header-bg:rgba(246,243,238,0.85);
  --acento-rgb:166,120,79; --primario-rgb:42,36,64; --tarjeta-rgb:255,255,255;
  --blanco:#201c26; --blanco-suave:#322c3d; --gris-claro:#4e4757; --gris-medio:#8a8291;
  --celeste:#6b5d4f; --celeste-claro:#a6784f; --turquesa:#a6784f; --acento-oro:#a6784f;
  --color-text-primary:#201c26; --color-text-subtitle:#6f6878; --texto-tenue:rgba(32,28,38,0.64);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#f6f3ee; --azul-marino:#ffffff; --azul-medio:#efe9e0;
  --grad-hero:linear-gradient(160deg,#faf8f4 0%,#f6f3ee 55%,#efe6da 100%);
  --grad-cristal:linear-gradient(135deg,#2a2440 0%,#a6784f 100%);
  --sombra-card:0 12px 40px rgba(60,50,40,0.10);
  --sombra-hover:0 24px 60px rgba(60,50,40,0.16);
  --borde-cristal:1px solid rgba(166,120,79,0.18);
}
html[data-diseno="d1"] .hero-title{ letter-spacing:-0.5px; }
html[data-diseno="d1"] .producto-img-wrap{ aspect-ratio:4/3; }


/* ════════════════════════════════════════════════════════════════
   DISEÑO 2 — "MINIMAL"  (tecnología · limpio · claro frío)
   Sans geométrica (Manrope), botones píldora, tarjetas planas,
   mucho aire. Gadgets, tecnología, cosas modernas.
   ════════════════════════════════════════════════════════════════ */
html[data-diseno="d2"]{
  --font-display:'Manrope', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif;
  --font-mono:'Manrope', system-ui, sans-serif;
  --radio-card:20px; --radio-btn:40px;
  --color-primary:#2b3444; --color-secondary:#4a5568; --color-accent:#3b82f6;
  --color-bg-sitio:#f6f7f9; --color-footer-bg:#14171c; --color-header-bg:rgba(246,247,249,0.82);
  --acento-rgb:59,130,246; --primario-rgb:20,23,28; --tarjeta-rgb:255,255,255;
  --blanco:#14171c; --blanco-suave:#262b33; --gris-claro:#3d4450; --gris-medio:#7c8593;
  --celeste:#3b82f6; --celeste-claro:#3b82f6; --turquesa:#3b82f6; --acento-oro:#3b82f6;
  --color-text-primary:#14171c; --color-text-subtitle:#5b6472; --texto-tenue:rgba(20,23,28,0.64);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#f6f7f9; --azul-marino:#ffffff; --azul-medio:#edeff2;
  --grad-hero:linear-gradient(165deg,#ffffff 0%,#f6f7f9 55%,#eceef2 100%);
  --grad-cristal:linear-gradient(135deg,#3b82f6 0%,#60a5fa 100%);
  --sombra-card:0 10px 40px rgba(20,40,80,0.10);
  --sombra-hover:0 20px 60px rgba(20,40,80,0.16);
  --borde-cristal:1px solid rgba(59,130,246,0.12);
  --borde-glow:1px solid rgba(59,130,246,0.28);
}
html[data-diseno="d2"] .bg-grid,
html[data-diseno="d2"] .bg-particles,
html[data-diseno="d2"] #hero::before{ display:none !important; }
html[data-diseno="d2"] .nav-link{ text-transform:none; letter-spacing:0; font-weight:600; }
html[data-diseno="d2"] .nav-link::after{ display:none; }
html[data-diseno="d2"] .hero-title{ font-weight:800; letter-spacing:-2px; }
html[data-diseno="d2"] .btn-tienda-nav,
html[data-diseno="d2"] .hero-btns .btn,
html[data-diseno="d2"] .btn-primary,
html[data-diseno="d2"] .btn-secondary,
html[data-diseno="d2"] .btn{
  text-transform:none !important; letter-spacing:0.2px !important;
  border-radius:40px !important; font-weight:600 !important;
}
html[data-diseno="d2"] .producto-card,
html[data-diseno="d2"] .condicion-card,
html[data-diseno="d2"] .card{ border:none; box-shadow:var(--sombra-card); }
html[data-diseno="d2"] .producto-body{ padding:24px; }
html[data-diseno="d2"] .producto-nombre{ font-weight:700; letter-spacing:-0.5px; }
html[data-diseno="d2"] .producto-img-wrap{ aspect-ratio:1/1; background:#f2f4f7; }
html[data-diseno="d2"] .condicion-icon,
html[data-diseno="d2"] .servicio-icon-wrap{
  width:64px; height:64px; border-radius:50%; background:rgba(59,130,246,0.10);
  display:flex; align-items:center; justify-content:center;
}
html[data-diseno="d2"] .seccion{ padding:110px 24px; }
html[data-diseno="d2"] .grid-productos,
html[data-diseno="d2"] .condicion-grid{ gap:34px; }
html[data-diseno="d2"] .form-input,
html[data-diseno="d2"] .form-select{ border-radius:14px; }
html[data-diseno="d2"] .form-label{ text-transform:none; letter-spacing:0.2px; font-weight:600; }
html[data-diseno="d2"] .admin-nav-item{ margin:2px 12px; border-radius:12px; border-left:none; font-weight:600; }
html[data-diseno="d2"] .aj-tab{ border-radius:40px !important; }


/* ════════════════════════════════════════════════════════════════
   DISEÑO 3 — "BOUTIQUE VIBRANTE"  (variado · alegre · claro cálido)
   Poppins redonda, tarjetas muy redondeadas con borde, promos
   grandes. Belleza, hogar, catálogo variado.
   ════════════════════════════════════════════════════════════════ */
html[data-diseno="d3"]{
  --font-display:'Poppins', system-ui, sans-serif;
  --font-body:'Poppins', system-ui, sans-serif;
  --font-mono:'Poppins', system-ui, sans-serif;
  --radio-card:22px; --radio-btn:14px;
  --color-primary:#ec4276; --color-secondary:#f76b95; --color-accent:#ec4276;
  --color-bg-sitio:#fff5f7; --color-footer-bg:#2a0f1c; --color-header-bg:rgba(255,245,247,0.86);
  --acento-rgb:236,66,118; --primario-rgb:42,15,28; --tarjeta-rgb:255,255,255;
  --blanco:#2a0f1c; --blanco-suave:#3d1a2a; --gris-claro:#5a3342; --gris-medio:#9a7180;
  --celeste:#f76b95; --celeste-claro:#ec4276; --turquesa:#ec4276; --acento-oro:#ec4276;
  --color-text-primary:#2a0f1c; --color-text-subtitle:#855564; --texto-tenue:rgba(42,15,28,0.64);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#fff5f7; --azul-marino:#ffffff; --azul-medio:#fbe7ec;
  --grad-hero:linear-gradient(160deg,#fff8fa 0%,#fff1f4 55%,#ffe3ea 100%);
  --grad-cristal:linear-gradient(135deg,#ec4276 0%,#f76b95 100%);
  --grad-promo:linear-gradient(135deg,#ec4276,#ff7a1a);
  --sombra-card:0 14px 38px rgba(120,30,60,0.16);
  --sombra-hover:0 26px 60px rgba(120,30,60,0.24);
  --borde-cristal:1.5px solid rgba(236,66,118,0.20);
  --borde-glow:2px solid rgba(236,66,118,0.4);
}
html[data-diseno="d3"] .nav-link{ border:1.5px solid transparent; border-radius:40px; padding:9px 16px; font-weight:600; }
html[data-diseno="d3"] .nav-link:hover,
html[data-diseno="d3"] .nav-link.active{ border-color:rgba(236,66,118,0.35); background:rgba(236,66,118,0.08); }
html[data-diseno="d3"] .nav-link::after{ display:none; }
html[data-diseno="d3"] .hero-title{ font-weight:800; letter-spacing:-1.5px; }
html[data-diseno="d3"] .btn-tienda-nav,
html[data-diseno="d3"] .hero-btns .btn,
html[data-diseno="d3"] .btn-primary,
html[data-diseno="d3"] .btn-secondary,
html[data-diseno="d3"] .btn{
  text-transform:none !important; letter-spacing:0.3px !important;
  border-radius:14px !important; font-weight:700 !important;
}
html[data-diseno="d3"] .producto-card,
html[data-diseno="d3"] .condicion-card,
html[data-diseno="d3"] .card{ border-width:1.5px; box-shadow:var(--sombra-card); }
html[data-diseno="d3"] .producto-card:hover{ transform:translateY(-10px) scale(1.01); }
html[data-diseno="d3"] .producto-img-wrap{ aspect-ratio:1/1; }
html[data-diseno="d3"] .producto-nombre{ font-weight:700; }
html[data-diseno="d3"] .producto-precio{ font-weight:800; }
html[data-diseno="d3"] .badge-promo{ font-size:0.9rem; padding:8px 18px; font-weight:700; box-shadow:0 8px 22px rgba(120,30,60,0.25); }
html[data-diseno="d3"] .condicion-icon,
html[data-diseno="d3"] .servicio-icon-wrap{
  width:66px; height:66px; border-radius:18px; background:rgba(236,66,118,0.12);
  display:flex; align-items:center; justify-content:center;
}
html[data-diseno="d3"] .form-input,
html[data-diseno="d3"] .form-select{ border-radius:16px; border-width:1.5px; }
html[data-diseno="d3"] .admin-nav-item{ margin:3px 12px; border-radius:14px; border-left:none; font-weight:600; }
html[data-diseno="d3"] .aj-tab{ border-radius:40px !important; font-weight:600; }


/* ════════════════════════════════════════════════════════════════
   DISEÑO 4 — "MARKETPLACE"  (catálogo grande · estructurado · claro)
   Estilo tipo Mercado Libre / Amazon: azul + naranja, grilla densa,
   tarjetas con borde, precios protagonistas. Para catálogos amplios.
   ════════════════════════════════════════════════════════════════ */
html[data-diseno="d4"]{
  --font-display:'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'Inter', system-ui, sans-serif;
  --radio-card:8px; --radio-btn:6px;
  --color-primary:#2563eb; --color-secondary:#1d4ed8; --color-accent:#ff7a1a;
  --color-bg-sitio:#eef1f6; --color-footer-bg:#101826; --color-header-bg:rgba(255,255,255,0.95);
  --acento-rgb:255,122,26; --primario-rgb:37,99,235; --tarjeta-rgb:255,255,255;
  --blanco:#16202c; --blanco-suave:#26303c; --gris-claro:#3d4854; --gris-medio:#6b7684;
  --celeste:#2563eb; --celeste-claro:#2f80ed; --turquesa:#ff7a1a; --acento-oro:#ff7a1a;
  --color-text-primary:#16202c; --color-text-subtitle:#5a6674; --texto-tenue:rgba(22,32,44,0.64);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#eef1f6; --azul-marino:#ffffff; --azul-medio:#e2e7ef;
  --grad-hero:linear-gradient(160deg,#ffffff 0%,#eef1f6 60%,#e2e8f2 100%);
  --grad-cristal:linear-gradient(135deg,#2563eb 0%,#2f80ed 100%);
  --sombra-card:0 4px 16px rgba(20,50,110,0.10);
  --sombra-hover:0 10px 28px rgba(20,50,110,0.18);
  --borde-cristal:1px solid rgba(37,99,235,0.18);
}
html[data-diseno="d4"] .bg-particles{ display:none !important; }
html[data-diseno="d4"] #header{ border-bottom-width:2px; }
html[data-diseno="d4"] .nav-link{ text-transform:none; font-weight:600; font-size:0.9rem; }
html[data-diseno="d4"] .btn-tienda-nav,
html[data-diseno="d4"] .hero-btns .btn,
html[data-diseno="d4"] .btn-primary,
html[data-diseno="d4"] .btn-secondary,
html[data-diseno="d4"] .btn{ text-transform:none !important; letter-spacing:0.2px !important; border-radius:6px !important; font-weight:700 !important; }
/* Grilla más DENSA (más productos por fila, tipo marketplace) */
html[data-diseno="d4"] .grid-productos{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important; gap:16px !important; }
html[data-diseno="d4"] .producto-card,
html[data-diseno="d4"] .condicion-card,
html[data-diseno="d4"] .card{ border-width:1px; box-shadow:var(--sombra-card); }
html[data-diseno="d4"] .producto-card:hover{ transform:translateY(-3px); box-shadow:var(--sombra-hover); }
html[data-diseno="d4"] .producto-body{ padding:14px 16px 18px; }
html[data-diseno="d4"] .producto-nombre{ font-size:1.05rem; font-weight:600; letter-spacing:-0.2px; }
html[data-diseno="d4"] .producto-precio{ font-weight:800; color:var(--color-accent); }
html[data-diseno="d4"] .producto-img-wrap{ aspect-ratio:1/1; border-bottom:1px solid rgba(37,99,235,0.10); }
html[data-diseno="d4"] .condicion-icon,
html[data-diseno="d4"] .servicio-icon-wrap{
  width:58px; height:58px; border-radius:8px; border:1px solid rgba(37,99,235,0.22);
  display:flex; align-items:center; justify-content:center; background:rgba(37,99,235,0.05);
}
html[data-diseno="d4"] .form-input,
html[data-diseno="d4"] .form-select{ border-radius:6px; }
html[data-diseno="d4"] .admin-nav-item{ border-radius:6px; margin:2px 12px; border-left:none; font-weight:600; }
html[data-diseno="d4"] .aj-tab{ border-radius:6px !important; }
html[data-diseno="d4"] .tabla-wrap{ border-radius:6px; }


/* ════════════════════════════════════════════════════════════════
   DISEÑO 5 — "TECH"  (electrónica/gaming · oscuro · NAV VERTICAL)
   Casi negro azulado, neón cian/violeta, Space Grotesk, tarjetas
   glass. En escritorio el menú es una BARRA LATERAL VERTICAL.
   ════════════════════════════════════════════════════════════════ */
html[data-diseno="d5"]{
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;
  --radio-card:16px; --radio-btn:12px;
  --color-primary:#7c6bff; --color-secondary:#6f8cff; --color-accent:#22d3ee;
  --color-bg-sitio:#0b0f1a; --color-footer-bg:#070a12; --color-header-bg:rgba(13,18,30,0.72);
  --acento-rgb:34,211,238; --primario-rgb:124,107,255; --tarjeta-rgb:18,24,38;
  --blanco:#e9edf6; --blanco-suave:#d3daea; --gris-claro:#aab4cb; --gris-medio:#78859c;
  --celeste:#6f8cff; --celeste-claro:#22d3ee; --turquesa:#22d3ee; --acento-oro:#22d3ee;
  --color-text-primary:#e9edf6; --color-text-subtitle:#97a2b8; --texto-tenue:rgba(233,237,246,0.62);
  --color-btn-primary-txt:#071018;
  --azul-profundo:#0b0f1a; --azul-marino:#121826; --azul-medio:#18203a;
  --grad-hero:radial-gradient(ellipse 90% 70% at 75% 20%,#141d33 0%,#0b0f1a 60%);
  --grad-cristal:linear-gradient(135deg,#7c6bff 0%,#22d3ee 100%);
  --sombra-card:0 16px 46px rgba(0,0,0,0.4);
  --sombra-hover:0 28px 70px rgba(0,0,0,0.55);
  --borde-cristal:1px solid rgba(34,211,238,0.16);
  --borde-glow:1px solid rgba(34,211,238,0.4);
}
html[data-diseno="d5"] .nav-link{ border-radius:10px; font-weight:500; }
html[data-diseno="d5"] .nav-link::after{ display:none; }
html[data-diseno="d5"] .hero-title{ font-weight:700; letter-spacing:-1.5px; }
html[data-diseno="d5"] .btn-tienda-nav,
html[data-diseno="d5"] .hero-btns .btn,
html[data-diseno="d5"] .btn-primary,
html[data-diseno="d5"] .btn-secondary,
html[data-diseno="d5"] .btn{ text-transform:none !important; letter-spacing:0.3px !important; border-radius:12px !important; font-weight:600 !important; }
html[data-diseno="d5"] .producto-card,
html[data-diseno="d5"] .condicion-card,
html[data-diseno="d5"] .card{
  background:var(--grad-card); backdrop-filter:blur(10px);
  border:1px solid rgba(34,211,238,0.16); box-shadow:var(--sombra-card);
}
html[data-diseno="d5"] .producto-nombre{ letter-spacing:-0.4px; }
html[data-diseno="d5"] .producto-marca{ font-family:var(--font-mono); letter-spacing:1.5px; }
html[data-diseno="d5"] .producto-img-wrap{ aspect-ratio:1/1; }
html[data-diseno="d5"] .form-input,
html[data-diseno="d5"] .form-select{ border-radius:12px; }
html[data-diseno="d5"] .form-label{ font-family:var(--font-mono); text-transform:none; letter-spacing:0.4px; }
html[data-diseno="d5"] .admin-sidebar{ backdrop-filter:blur(22px); }
html[data-diseno="d5"] .admin-nav-item{ margin:2px 12px; border-radius:12px; border-left:none; }
html[data-diseno="d5"] .aj-tab{ border-radius:12px !important; }
html[data-diseno="d5"] .tabla th{ font-family:var(--font-mono); letter-spacing:0.4px; }
/* NAV VERTICAL (solo escritorio) */
@media (min-width:1025px){
  html[data-diseno="d5"] #header{
    top:0; bottom:0; left:0; right:auto; width:236px; height:100vh;
    border-bottom:none; border-right:1px solid rgba(34,211,238,0.16);
  }
  html[data-diseno="d5"] .header-inner{
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    height:100%; max-width:none; gap:26px; padding:30px 22px;
  }
  html[data-diseno="d5"] .nav-links{ flex-direction:column; align-items:flex-start; gap:6px; width:100%; flex:none; }
  html[data-diseno="d5"] .nav-link{ width:100%; padding:11px 14px; }
  html[data-diseno="d5"] .header-acciones{ flex-direction:column; align-items:stretch; width:100%; margin-top:auto; gap:10px; }
  html[data-diseno="d5"] .btn-tienda-nav{ width:100%; justify-content:center; }
  html[data-diseno="d5"] #hero,
  html[data-diseno="d5"] .seccion,
  html[data-diseno="d5"] #footer,
  html[data-diseno="d5"] .wave-divider{ margin-left:236px; }
  html[data-diseno="d5"] #hero{ padding-top:40px; }
}
@media (max-width:1024px){
  html[data-diseno="d5"] #header{ top:0; left:0; right:0; bottom:auto; width:100%; height:auto; border-right:none; border-bottom:1px solid rgba(34,211,238,0.16); }
  html[data-diseno="d5"] #hero,
  html[data-diseno="d5"] .seccion,
  html[data-diseno="d5"] #footer{ margin-left:0; }
}


/* ════════════════════════════════════════════════════════════════
   ADMIN POR DISEÑO — el panel se mantiene OSCURO (legibilidad) pero
   adopta el ACENTO de cada diseño. Mayor especificidad que #panelAdmin.
   ════════════════════════════════════════════════════════════════ */
html[data-diseno="d1"] #panelAdmin{
  --color-bg-sitio:#1a161f; --azul-profundo:#1a161f; --azul-marino:#231e2a; --azul-medio:#2c2634;
  --tarjeta-rgb:35,30,42; --acento-rgb:166,120,79; --primario-rgb:166,120,79;
  --celeste-claro:#c39a6d; --turquesa:#a6784f; --acento-oro:#a6784f; --color-primary:#a6784f; --color-accent:#c39a6d;
  --grad-cristal:linear-gradient(135deg,#a6784f 0%,#c39a6d 100%);
  --sombra-glow:0 0 24px rgba(166,120,79,0.4); --borde-glow:1px solid rgba(166,120,79,0.5); --borde-cristal:1px solid rgba(166,120,79,0.25);
  --color-header-bg:rgba(26,22,31,0.95); background:#1a161f !important;
}
html[data-diseno="d2"] #panelAdmin{
  --color-bg-sitio:#0f1420; --azul-profundo:#0f1420; --azul-marino:#161d2b; --azul-medio:#1d2740;
  --tarjeta-rgb:22,29,43; --acento-rgb:59,130,246; --primario-rgb:59,130,246;
  --celeste-claro:#60a5fa; --turquesa:#3b82f6; --acento-oro:#3b82f6; --color-primary:#3b82f6; --color-accent:#60a5fa;
  --grad-cristal:linear-gradient(135deg,#2b3444 0%,#3b82f6 100%);
  --sombra-glow:0 0 24px rgba(59,130,246,0.4); --borde-glow:1px solid rgba(59,130,246,0.5); --borde-cristal:1px solid rgba(59,130,246,0.25);
  --color-header-bg:rgba(15,20,32,0.95); background:#0f1420 !important;
}
html[data-diseno="d3"] #panelAdmin{
  --color-bg-sitio:#1c0f16; --azul-profundo:#1c0f16; --azul-marino:#26141d; --azul-medio:#301826;
  --tarjeta-rgb:38,20,29; --acento-rgb:236,66,118; --primario-rgb:236,66,118;
  --celeste-claro:#f76b95; --turquesa:#ec4276; --acento-oro:#ec4276; --color-primary:#ec4276; --color-accent:#f76b95;
  --grad-cristal:linear-gradient(135deg,#ec4276 0%,#f76b95 100%);
  --sombra-glow:0 0 24px rgba(236,66,118,0.4); --borde-glow:1px solid rgba(236,66,118,0.5); --borde-cristal:1px solid rgba(236,66,118,0.25);
  --color-header-bg:rgba(28,15,22,0.95); background:#1c0f16 !important;
}
html[data-diseno="d4"] #panelAdmin{
  --color-bg-sitio:#0d1526; --azul-profundo:#0d1526; --azul-marino:#121d33; --azul-medio:#182643;
  --tarjeta-rgb:18,29,51; --acento-rgb:255,122,26; --primario-rgb:47,128,237;
  --celeste-claro:#2f80ed; --turquesa:#ff7a1a; --acento-oro:#ff7a1a; --color-primary:#2f80ed; --color-accent:#ff7a1a;
  --grad-cristal:linear-gradient(135deg,#2563eb 0%,#2f80ed 100%);
  --sombra-glow:0 0 24px rgba(255,122,26,0.4); --borde-glow:1px solid rgba(47,128,237,0.5); --borde-cristal:1px solid rgba(47,128,237,0.25);
  --color-header-bg:rgba(13,21,38,0.95); background:#0d1526 !important;
}
html[data-diseno="d5"] #panelAdmin{
  --color-bg-sitio:#0b0f1a; --azul-profundo:#0b0f1a; --azul-marino:#121826; --azul-medio:#18203a;
  --tarjeta-rgb:18,24,38; --acento-rgb:34,211,238; --primario-rgb:124,107,255;
  --celeste-claro:#22d3ee; --turquesa:#22d3ee; --acento-oro:#22d3ee; --color-primary:#7c6bff; --color-accent:#22d3ee;
  --grad-cristal:linear-gradient(135deg,#7c6bff 0%,#22d3ee 100%);
  --sombra-glow:0 0 24px rgba(34,211,238,0.4); --borde-glow:1px solid rgba(34,211,238,0.5); --borde-cristal:1px solid rgba(34,211,238,0.22);
  --color-header-bg:rgba(11,15,26,0.95); background:#0b0f1a !important;
}


/* ════════════════════════════════════════════════════════════════
   FIX MÓVIL — evitar recorte del hero en pantallas pequeñas (todos
   los diseños). Solo aplica en móvil; no cambia el escritorio.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  #hero{ overflow:hidden; }
  .hero-content{ max-width:100% !important; width:100% !important; padding-left:20px !important; padding-right:20px !important; }
  .hero-content > div:first-child{ max-width:100%; }
  .hero-title{ overflow-wrap:break-word; word-break:break-word; }
  .hero-desc{ max-width:100% !important; }
  .hero-btns{ width:100%; justify-content:center; }
  .hero-visual{ max-width:100% !important; width:100% !important; overflow:hidden; }
  .hero-hud-frame{ max-width:100% !important; }
  .hero-stats{ width:100% !important; flex-wrap:wrap !important; justify-content:center; gap:12px 20px !important; }
  .stat-item{ padding:6px 12px !important; margin-right:0 !important; }
  .stat-item:not(:last-child)::after{ display:none !important; }
}