/* ============================================================
   DISEÑOS.CSS — Sistema de 5 DISEÑOS COMPLETOS (identidades)
   CimaTech · Línea "Lúmina" (public-optica2)
   ------------------------------------------------------------
   Cada diseño es OTRA PÁGINA: su propia PALETA (clara/oscura,
   cálida/fría), su ORIENTACIÓN (una es vertical), sus íconos y
   su estructura. Se activa con  html[data-diseno="dX"]  que pone
   el JS desde Firestore (config.diseno).

   COLOR:
   Cada diseño trae su paleta completa (aquí, en CSS). Esa es la
   base. Si el cliente además afina colores en el admin, esos
   ajustes se aplican por encima (JS inline) solo cuando marca
   "colores personalizados". Así el DISEÑO define el color, y el
   afinado es opcional.

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

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');


/* ════════════════════════════════════════════════════════════════
   DISEÑO 1 — "EDITORIAL ORO"   (OSCURO · cálido-neutro)
   Serif de autor, dorado champagne sobre negro cálido, líneas finas,
   mucho aire. Elegante, tipo revista de moda. Nav horizontal.
   ════════════════════════════════════════════════════════════════ */
html[data-diseno="d1"]{
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Outfit', system-ui, sans-serif;
  --font-mono:'Outfit', system-ui, sans-serif;
  --radio-card:4px; --radio-btn:2px;
  /* Paleta — dorado / negro cálido */
  --color-primary:#c9a25e; --color-secondary:#b8915a; --color-accent:#d9b878;
  --color-bg-sitio:#0c0b0a; --color-footer-bg:#080706; --color-header-bg:rgba(12,11,10,0.72);
  --acento-rgb:201,162,94; --primario-rgb:201,162,94; --tarjeta-rgb:22,20,17;
  --blanco:#f5f0e8; --blanco-suave:#ece5d8; --gris-claro:#c8bfb0; --gris-medio:#8f877a;
  --celeste:#b8915a; --celeste-claro:#d9b878; --turquesa:#d9b878; --acento-oro:#c9a25e;
  --color-text-primary:#f5f0e8; --color-text-subtitle:#a89f92; --texto-tenue:rgba(245,240,232,0.62);
  --color-btn-primary-txt:#0c0b0a;
  --azul-profundo:#0c0b0a; --azul-marino:#141210; --azul-medio:#1d1a16;
  --grad-hero:radial-gradient(ellipse 90% 70% at 70% 25%,#1d1a16 0%,#0c0b0a 60%);
  --grad-cristal:linear-gradient(135deg,#c9a25e 0%,#d9b878 100%);
}
html[data-diseno="d1"] .producto-img-wrap{ aspect-ratio:4/3; }


/* ════════════════════════════════════════════════════════════════
   DISEÑO 2 — "MINIMAL MARFIL"  (CLARO · frío)
   Blanco marfil, azul pizarra frío, sans redonda (Manrope), botones
   píldora, tarjetas planas, mucho espacio en blanco. Sereno, moderno.
   ════════════════════════════════════════════════════════════════ */
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;
  /* Paleta — marfil claro / azul frío */
  --color-primary:#33455e; --color-secondary:#54657d; --color-accent:#4c7cf0;
  --color-bg-sitio:#f5f6f8; --color-footer-bg:#12161d; --color-header-bg:rgba(245,246,248,0.82);
  --acento-rgb:76,124,240; --primario-rgb:31,40,54; --tarjeta-rgb:255,255,255;
  --blanco:#12161d; --blanco-suave:#222a35; --gris-claro:#3c4552; --gris-medio:#7c8794;
  --celeste:#4c7cf0; --celeste-claro:#4c7cf0; --turquesa:#4c7cf0; --acento-oro:#4c7cf0;
  --color-text-primary:#12161d; --color-text-subtitle:#5c6672; --texto-tenue:rgba(18,22,29,0.64);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#f5f6f8; --azul-marino:#ffffff; --azul-medio:#eceef2;
  --grad-hero:linear-gradient(165deg,#ffffff 0%,#f5f6f8 55%,#eaedf2 100%);
  --grad-cristal:linear-gradient(135deg,#4c7cf0 0%,#6f96f5 100%);
  --sombra-card:0 10px 40px rgba(30,45,80,0.10);
  --sombra-hover:0 20px 60px rgba(30,45,80,0.16);
  --borde-cristal:1px solid rgba(76,124,240,0.14);
  --borde-glow:1px solid rgba(76,124,240,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"] .header-inner{ height:82px; }
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"] .hero-title .highlight{ font-style:normal; font-weight:800; }
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;
}
/* Tarjetas planas y aireadas */
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"] .card::before,
html[data-diseno="d2"] .condicion-card::before{ display:none; }
html[data-diseno="d2"] .producto-body{ padding:26px 24px 28px; }
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; }
/* Íconos de categoría en círculo suave */
html[data-diseno="d2"] .condicion-icon,
html[data-diseno="d2"] .servicio-icon-wrap{
  width:64px; height:64px; border-radius:50%; background:rgba(76,124,240,0.10);
  display:flex; align-items:center; justify-content:center;
}
html[data-diseno="d2"] .seccion{ padding:120px 24px; }
html[data-diseno="d2"] .grid-productos,
html[data-diseno="d2"] .condicion-grid{ gap:36px; }
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"] .admin-nav-item.activo{ border-left:none; background:rgba(76,124,240,0.12); }
html[data-diseno="d2"] .aj-tab{ border-radius:40px !important; }
html[data-diseno="d2"] .tabla th{ text-transform:none; letter-spacing:0.2px; }


/* ════════════════════════════════════════════════════════════════
   DISEÑO 3 — "BOUTIQUE CORAL"  (CLARO · cálido vibrante)
   Crema cálida, coral/naranja vibrante, Poppins redonda, tarjetas
   muy redondeadas con borde, promos grandes. E-commerce alegre.
   ════════════════════════════════════════════════════════════════ */
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;
  /* Paleta — crema cálida / coral */
  --color-primary:#f2612f; --color-secondary:#f7864f; --color-accent:#f2612f;
  --color-bg-sitio:#fef6f0; --color-footer-bg:#2a140c; --color-header-bg:rgba(254,246,240,0.86);
  --acento-rgb:242,97,47; --primario-rgb:42,20,12; --tarjeta-rgb:255,255,255;
  --blanco:#2a140c; --blanco-suave:#3d221a; --gris-claro:#5a3d33; --gris-medio:#977a6e;
  --celeste:#f7864f; --celeste-claro:#f2612f; --turquesa:#f2612f; --acento-oro:#f2612f;
  --color-text-primary:#2a140c; --color-text-subtitle:#836055; --texto-tenue:rgba(42,20,12,0.64);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#fef6f0; --azul-marino:#ffffff; --azul-medio:#f8e8df;
  --grad-hero:linear-gradient(160deg,#fff8f3 0%,#fef1e8 55%,#fbe2d5 100%);
  --grad-cristal:linear-gradient(135deg,#f2612f 0%,#f7864f 100%);
  --grad-promo:linear-gradient(135deg,#f2612f,#e0356a);
  --sombra-card:0 14px 38px rgba(120,50,20,0.16);
  --sombra-hover:0 26px 60px rgba(120,50,20,0.24);
  --borde-cristal:1.5px solid rgba(242,97,47,0.20);
  --borde-glow:2px solid rgba(242,97,47,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(242,97,47,0.35); background:rgba(242,97,47,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"] .hero-title .highlight{ font-style:normal; font-weight:800; }
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,50,20,0.25); }
/* Íconos en chip redondeado cálido */
html[data-diseno="d3"] .condicion-icon,
html[data-diseno="d3"] .servicio-icon-wrap{
  width:66px; height:66px; border-radius:18px; background:rgba(242,97,47,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"] .form-label{ text-transform:none; font-weight:600; }
html[data-diseno="d3"] .admin-nav-item{ margin:3px 12px; border-radius:14px; border-left:none; font-weight:600; }
html[data-diseno="d3"] .admin-nav-item.activo{ border-left:none; }
html[data-diseno="d3"] .aj-tab{ border-radius:40px !important; font-weight:600; }
html[data-diseno="d3"] .tabla th{ text-transform:none; }


/* ════════════════════════════════════════════════════════════════
   DISEÑO 4 — "CLÍNICO AZUL"  (CLARO · frío profesional)
   Blanco clínico + azul confianza, IBM Plex Sans, esquinas rectas,
   botones sólidos rectangulares, secciones en cajas. Óptica médica.
   ════════════════════════════════════════════════════════════════ */
html[data-diseno="d4"]{
  --font-display:'IBM Plex Sans', system-ui, sans-serif;
  --font-body:'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:'IBM Plex Sans', system-ui, sans-serif;
  --radio-card:3px; --radio-btn:3px;
  /* Paleta — blanco clínico / azul */
  --color-primary:#1560b0; --color-secondary:#2e7bc9; --color-accent:#1aa0cf;
  --color-bg-sitio:#f2f6fb; --color-footer-bg:#0c2036; --color-header-bg:rgba(242,246,251,0.9);
  --acento-rgb:21,96,176; --primario-rgb:12,32,54; --tarjeta-rgb:255,255,255;
  --blanco:#0c2036; --blanco-suave:#1a3350; --gris-claro:#33455c; --gris-medio:#6b7f93;
  --celeste:#1aa0cf; --celeste-claro:#1aa0cf; --turquesa:#1aa0cf; --acento-oro:#1560b0;
  --color-text-primary:#0c2036; --color-text-subtitle:#5a6f84; --texto-tenue:rgba(12,32,54,0.64);
  --color-btn-primary-txt:#ffffff;
  --azul-profundo:#f2f6fb; --azul-marino:#ffffff; --azul-medio:#e6eef7;
  --grad-hero:linear-gradient(160deg,#ffffff 0%,#f2f6fb 55%,#e4eef8 100%);
  --grad-cristal:linear-gradient(135deg,#1560b0 0%,#1aa0cf 100%);
  --sombra-card:0 6px 22px rgba(20,60,110,0.12);
  --sombra-hover:0 12px 32px rgba(20,60,110,0.20);
  --borde-cristal:1px solid rgba(21,96,176,0.22);
  --borde-glow:1px solid rgba(21,96,176,0.4);
}
html[data-diseno="d4"] .bg-particles{ display:none !important; }
html[data-diseno="d4"] #header{ border-bottom-width:2px; }
html[data-diseno="d4"] .header-inner{ height:70px; }
html[data-diseno="d4"] .nav-link{ text-transform:uppercase; letter-spacing:0.6px; font-size:0.82rem; font-weight:600; border-radius:0; }
html[data-diseno="d4"] .nav-link::after{ height:3px; bottom:0; left:13px; }
html[data-diseno="d4"] .hero-title{ font-weight:700; letter-spacing:-0.5px; }
html[data-diseno="d4"] .hero-title .highlight{ font-style:normal; font-weight:700; }
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{
  border-radius:3px !important; text-transform:uppercase !important;
  letter-spacing:0.6px !important; font-weight:600 !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(-4px); }
html[data-diseno="d4"] .card::before,
html[data-diseno="d4"] .condicion-card::before{ height:3px; opacity:1; }
html[data-diseno="d4"] .producto-nombre{ font-weight:600; letter-spacing:-0.2px; }
html[data-diseno="d4"] .producto-precio{ font-weight:700; }
html[data-diseno="d4"] .producto-img-wrap{ aspect-ratio:4/3; border-bottom:1px solid rgba(21,96,176,0.14); }
/* Íconos en cuadro con borde (ficha clínica) */
html[data-diseno="d4"] .condicion-icon,
html[data-diseno="d4"] .servicio-icon-wrap{
  width:60px; height:60px; border-radius:3px; border:1px solid rgba(21,96,176,0.28);
  display:flex; align-items:center; justify-content:center; background:rgba(21,96,176,0.05);
}
html[data-diseno="d4"] .form-input,
html[data-diseno="d4"] .form-select{ border-radius:3px; }
html[data-diseno="d4"] .form-label{ text-transform:uppercase; letter-spacing:0.6px; font-weight:600; }
html[data-diseno="d4"] .admin-sidebar{ border-right-width:2px; }
html[data-diseno="d4"] .admin-nav-item{ border-left-width:4px; border-radius:0; text-transform:uppercase; letter-spacing:0.4px; font-size:0.82rem; }
html[data-diseno="d4"] .aj-tab{ border-radius:3px !important; text-transform:uppercase; letter-spacing:0.5px; }
html[data-diseno="d4"] .tabla th{ letter-spacing:0.6px; border-bottom:2px solid rgba(21,96,176,0.3); }
html[data-diseno="d4"] .tabla-wrap{ border-radius:3px; }


/* ════════════════════════════════════════════════════════════════
   DISEÑO 5 — "TECH NOCHE"  (OSCURO · frío · NAV VERTICAL)
   Casi negro azulado, neón violeta+cian, Space Grotesk, tarjetas
   glass. En escritorio la navegación es una BARRA LATERAL VERTICAL
   (no la barra horizontal de arriba). Estilo app moderna.
   ════════════════════════════════════════════════════════════════ */
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;
  /* Paleta — noche azulada / neón */
  --color-primary:#7c6bff; --color-secondary:#6f8cff; --color-accent:#22e0d0;
  --color-bg-sitio:#0a0e17; --color-footer-bg:#070a11; --color-header-bg:rgba(12,17,28,0.72);
  --acento-rgb:34,224,208; --primario-rgb:124,107,255; --tarjeta-rgb:18,24,38;
  --blanco:#eaf0ff; --blanco-suave:#d6def0; --gris-claro:#aeb8cf; --gris-medio:#7a869e;
  --celeste:#6f8cff; --celeste-claro:#22e0d0; --turquesa:#22e0d0; --acento-oro:#22e0d0;
  --color-text-primary:#eaf0ff; --color-text-subtitle:#9aa6be; --texto-tenue:rgba(234,240,255,0.62);
  --color-btn-primary-txt:#0a0e17;
  --azul-profundo:#0a0e17; --azul-marino:#121826; --azul-medio:#182034;
  --grad-hero:radial-gradient(ellipse 90% 70% at 75% 20%,#151d33 0%,#0a0e17 60%);
  --grad-cristal:linear-gradient(135deg,#7c6bff 0%,#22e0d0 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,224,208,0.16);
  --borde-glow:1px solid rgba(34,224,208,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"] .hero-title .highlight{ font-style:normal; font-weight:700; }
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,224,208,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"] .hero-subtitle,
html[data-diseno="d5"] .tienda0-kicker,
html[data-diseno="d5"] .serv-kicker,
html[data-diseno="d5"] .nos-kicker{ font-family:var(--font-mono); }
html[data-diseno="d5"] .condicion-icon,
html[data-diseno="d5"] .servicio-icon-wrap{
  width:62px; height:62px; border-radius:14px; background:rgba(34,224,208,0.10);
  border:1px solid rgba(34,224,208,0.22);
  display:flex; align-items:center; justify-content:center;
}
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"] .admin-nav-item.activo{ border-left:none; background:rgba(34,224,208,0.14); }
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; }

/* ── NAVEGACIÓN 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,224,208,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"] .logo-wrap{ margin-bottom:6px; }
  html[data-diseno="d5"] .nav-links{
    flex-direction:column; align-items:flex-start; justify-content: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; }
  /* Empujar el contenido a la derecha para dejar el riel */
  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; }
}
/* En móvil vuelve a barra superior normal (no romper el menú hamburguesa) */
@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,224,208,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 #panelAdmin trae su propia paleta azul fija (en estilos.css)
   con especificidad de ID. Para que el admin también cambie con el
   diseño, aquí lo re-skineamos con MAYOR especificidad
   (html[data-diseno] #panelAdmin). Se mantiene OSCURO en todos (el
   back-office está construido para fondo oscuro → legibilidad segura),
   pero adopta el ACENTO de cada diseño. La tipografía y las formas ya
   cambian por los tokens de cada html[data-diseno].
   ════════════════════════════════════════════════════════════════ */

/* D1 — Oro sobre carbón */
html[data-diseno="d1"] #panelAdmin{
  --color-bg-sitio:#100e0c; --azul-profundo:#100e0c; --azul-marino:#181512; --azul-medio:#211d18;
  --tarjeta-rgb:26,23,19; --acento-rgb:201,162,94; --primario-rgb:201,162,94;
  --celeste-claro:#d9b878; --celeste:#b8915a; --turquesa:#d9b878; --acento-oro:#c9a25e;
  --color-primary:#c9a25e; --color-accent:#d9b878;
  --grad-cristal:linear-gradient(135deg,#c9a25e 0%,#d9b878 100%);
  --sombra-glow:0 0 24px rgba(201,162,94,0.4); --borde-glow:1px solid rgba(201,162,94,0.5);
  --borde-cristal:1px solid rgba(201,162,94,0.25);
  --color-header-bg:rgba(16,14,12,0.95);
  background:#100e0c !important;
}
/* D2 — Azul frío sobre pizarra */
html[data-diseno="d2"] #panelAdmin{
  --color-bg-sitio:#0f141c; --azul-profundo:#0f141c; --azul-marino:#161d28; --azul-medio:#1d2635;
  --tarjeta-rgb:22,28,38; --acento-rgb:76,124,240; --primario-rgb:76,124,240;
  --celeste-claro:#6f96f5; --celeste:#4c7cf0; --turquesa:#4c7cf0; --acento-oro:#4c7cf0;
  --color-primary:#4c7cf0; --color-accent:#6f96f5;
  --grad-cristal:linear-gradient(135deg,#33455e 0%,#4c7cf0 100%);
  --sombra-glow:0 0 24px rgba(76,124,240,0.4); --borde-glow:1px solid rgba(76,124,240,0.5);
  --borde-cristal:1px solid rgba(76,124,240,0.25);
  --color-header-bg:rgba(15,20,28,0.95);
  background:#0f141c !important;
}
/* D3 — Coral sobre marrón cálido */
html[data-diseno="d3"] #panelAdmin{
  --color-bg-sitio:#17100c; --azul-profundo:#17100c; --azul-marino:#221812; --azul-medio:#2c1f17;
  --tarjeta-rgb:34,24,18; --acento-rgb:242,97,47; --primario-rgb:242,97,47;
  --celeste-claro:#f7864f; --celeste:#f7864f; --turquesa:#f2612f; --acento-oro:#f2612f;
  --color-primary:#f2612f; --color-accent:#f7864f;
  --grad-cristal:linear-gradient(135deg,#f2612f 0%,#f7864f 100%);
  --sombra-glow:0 0 24px rgba(242,97,47,0.4); --borde-glow:1px solid rgba(242,97,47,0.5);
  --borde-cristal:1px solid rgba(242,97,47,0.25);
  --color-header-bg:rgba(23,16,12,0.95);
  background:#17100c !important;
}
/* D4 — Azul clínico sobre navy */
html[data-diseno="d4"] #panelAdmin{
  --color-bg-sitio:#0b1b2e; --azul-profundo:#0b1b2e; --azul-marino:#102337; --azul-medio:#153048;
  --tarjeta-rgb:16,40,64; --acento-rgb:26,160,207; --primario-rgb:21,96,176;
  --celeste-claro:#4fc3e8; --celeste:#2e7bc9; --turquesa:#1aa0cf; --acento-oro:#1aa0cf;
  --color-primary:#1560b0; --color-accent:#1aa0cf;
  --grad-cristal:linear-gradient(135deg,#1560b0 0%,#1aa0cf 100%);
  --sombra-glow:0 0 24px rgba(26,160,207,0.4); --borde-glow:1px solid rgba(26,160,207,0.5);
  --borde-cristal:1px solid rgba(26,160,207,0.25);
  --color-header-bg:rgba(11,27,46,0.95);
  background:#0b1b2e !important;
}
/* D5 — Neón sobre noche */
html[data-diseno="d5"] #panelAdmin{
  --color-bg-sitio:#0a0e17; --azul-profundo:#0a0e17; --azul-marino:#121826; --azul-medio:#182034;
  --tarjeta-rgb:18,24,38; --acento-rgb:34,224,208; --primario-rgb:124,107,255;
  --celeste-claro:#22e0d0; --celeste:#6f8cff; --turquesa:#22e0d0; --acento-oro:#22e0d0;
  --color-primary:#7c6bff; --color-accent:#22e0d0;
  --grad-cristal:linear-gradient(135deg,#7c6bff 0%,#22e0d0 100%);
  --sombra-glow:0 0 24px rgba(34,224,208,0.4); --borde-glow:1px solid rgba(34,224,208,0.5);
  --borde-cristal:1px solid rgba(34,224,208,0.22);
  --color-header-bg:rgba(10,14,23,0.95);
  background:#0a0e17 !important;
}


/* ════════════════════════════════════════════════════════════════
   FIX MÓVIL — evitar recorte del hero en pantallas pequeñas
   El bloque del hero (contenido + estadísticas + visual) podía superar
   el ancho de la pantalla y, como body tiene overflow-x:hidden, se veía
   "cortado". Estas reglas SOLO aplican en móvil; no cambian el diseño
   de escritorio. Van sin acotar a un diseño para cubrir los 5.
   ════════════════════════════════════════════════════════════════ */
@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; }
  /* Estadísticas: que envuelvan y no fuercen ancho */
  .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; }
}