/* ==========================================================================
   NEURAL CLOUD SERVICES - SISTEMA DE DISEÑO (DEEP NEURAL SURFACE 2026)
   ========================================================================== */

:root {
  --color-void: #051424;
  --color-surface-lowest: #010f1f;
  --color-surface-low: #0d1c2d;
  --color-surface: #122131;
  --color-surface-high: #1c2b3c;
  --color-surface-highest: #273647;
  
  --color-primary: #00d2ff;
  --color-primary-glow: rgba(0, 210, 255, 0.35);
  --color-secondary: #6366f1;
  --color-secondary-glow: rgba(99, 102, 241, 0.35);
  --color-tertiary: #10b981;
  --color-tertiary-glow: rgba(16, 185, 129, 0.35);

  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   MATERIAL SYMBOLS & ICONS SPECIFICATION
   ========================================================================== */
.material-symbols-outlined,
.material-icons {
  font-family: 'Material Symbols Outlined', 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  vertical-align: middle;
  user-select: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  background-color: var(--color-void);
  color: #d4e4fa;
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface-lowest);
}
::-webkit-scrollbar-thumb {
  background: var(--color-surface-highest);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(13, 28, 45, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-header {
  background: rgba(1, 15, 31, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Neural Glows */
.neural-glow-cyan {
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.25);
}
.neural-glow-cyan:hover {
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.5);
}

.neural-glow-emerald {
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.2);
}

/* ==========================================================================
   GLASSMORPHISM SYSTEM (UNIVERSAL FROSTED GLASS FOR CARDS & PANELS)
   ========================================================================== */
.glass-panel,
.neural-card,
.card-glass {
  background: rgba(18, 33, 49, 0.65) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-subtle,
.card-subtle {
  background: rgba(13, 28, 45, 0.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Ensure all Tailwind surface containers receive automatic frosted glassmorphism */
.bg-surface-container {
  background-color: rgba(18, 33, 49, 0.65) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bg-surface-container-low {
  background-color: rgba(13, 28, 45, 0.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bg-surface-container-high {
  background-color: rgba(28, 43, 60, 0.65) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bg-surface-container-lowest {
  background-color: rgba(1, 15, 31, 0.7) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.neural-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.neural-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 210, 255, 0.35);
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.7), 0 0 24px -4px rgba(0, 210, 255, 0.2);
}

/* Background video container */
#video-bg-container video {
  will-change: contents;
  transform: translateZ(0);
}

/* Animated gradient text */
.gradient-text-neural {
  background: linear-gradient(135deg, #00d2ff 0%, #a5e7ff 50%, #c0c1ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-emerald {
  background: linear-gradient(135deg, #10b981 0%, #6ffbbe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pulse badge ring */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.animate-pulse-ring {
  animation: pulse-ring 2.5s infinite ease-in-out;
}

/* Range input custom style */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #1c2b3c;
  border-radius: 9999px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00d2ff;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
  transition: transform 0.15s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* ==========================================================================
   DETAILS / FAQ ACCORDION STYLING
   ========================================================================== */
details summary::-webkit-details-marker,
details summary::marker {
  display: none !important;
}

details summary {
  list-style: none !important;
}

details[open] {
  border-color: rgba(0, 210, 255, 0.35) !important;
  background: rgba(18, 33, 49, 0.85) !important;
}

/* ==========================================================================
   LIGHT MODE — html.light overrides (WCAG AAA High-Contrast)
   ========================================================================== */
html.light {
  --color-void: #f8fafc;
  --color-surface-lowest: #ffffff;
  --color-surface-low: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-high: #e2e8f0;
  --color-surface-highest: #cbd5e1;
  --color-primary: #0284c7;
  --color-primary-glow: rgba(2, 132, 199, 0.2);
  --color-secondary: #4338ca;
  --color-tertiary: #047857;
  color-scheme: light;
}

html.light body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light ::selection {
  background-color: #bae6fd !important;
  color: #0369a1 !important;
}

html.light ::-webkit-scrollbar-track { background: #f1f5f9; }
html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
html.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 1. Header & Navigation */
html.light .glass-header {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Nav Menu Bar (between Logo and Flags) */
html.light header nav,
html.light .bg-surface-container-low\/70 {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

html.light header nav a {
  color: #334155 !important;
  font-weight: 500 !important;
}

html.light header nav a:hover {
  background-color: #ffffff !important;
  color: #0284c7 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

html.light header nav a:hover span:not(.font-mono) {
  color: #0284c7 !important;
}

/* "3 Soluciones" badge inside "Unidades de Negocio" */
html.light header nav a span.font-mono {
  background-color: #d1fae5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

html.light header nav a:hover span.font-mono {
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
  border-color: #bae6fd !important;
}


/* 2. Cards & Elevated Panels */
html.light .glass-panel,
html.light .neural-card,
html.light .card-glass {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
}

html.light .neural-card:hover {
  border-color: #0284c7 !important;
  box-shadow: 0 12px 30px -4px rgba(2, 132, 199, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04) !important;
}

html.light .glass-panel-subtle,
html.light .card-subtle {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

/* 3. Surface Containers */
html.light .bg-surface-container-lowest {
  background-color: #ffffff !important;
}
html.light .bg-surface-container-lowest\/60,
html.light .bg-surface-container-lowest\/80 {
  background-color: rgba(255, 255, 255, 0.95) !important;
}
html.light .bg-surface-container-low,
html.light .bg-surface-container-low\/60 {
  background-color: #f1f5f9 !important;
}
html.light .bg-surface-container,
html.light .bg-surface-container\/60,
html.light .bg-surface-container\/80 {
  background-color: #ffffff !important;
}
html.light .bg-surface-container-high,
html.light .bg-surface-container-high\/80 {
  background-color: #f1f5f9 !important;
}
html.light .bg-surface-container-highest {
  background-color: #e2e8f0 !important;
}

/* 4. High-Contrast Typography Overrides (WCAG AAA) */
html.light .text-white {
  color: #0f172a !important;
}
html.light .text-on-surface {
  color: #1e293b !important;
}
html.light .text-on-surface-variant {
  color: #475569 !important;
}

/* Primary Accents (Cyan/Sky) -> Deep Ocean Sky Blue #0369a1 */
html.light .text-primary,
html.light .text-primary-fixed,
html.light .text-primary-fixed-dim,
html.light .text-primary-container,
html.light .text-\[\#00d2ff\],
html.light .text-\[\#b6ebff\],
html.light .text-\[\#a5e7ff\] {
  color: #0369a1 !important;
}

/* Secondary Accents (Lavender/Purple) -> Deep Royal Indigo #4338ca */
html.light .text-secondary,
html.light .text-secondary-fixed,
html.light .text-secondary-container,
html.light .text-\[\#c0c1ff\],
html.light .text-\[\#6366f1\] {
  color: #4338ca !important;
}

/* Tertiary Accents (Neon Green/Mint) -> Deep Forest Emerald #047857 */
html.light .text-tertiary,
html.light .text-tertiary-fixed,
html.light .text-tertiary-fixed-dim,
html.light .text-tertiary-container,
html.light .text-\[\#6ffbbe\],
html.light .text-\[\#4edea3\],
html.light .text-\[\#10b981\] {
  color: #047857 !important;
}

/* Muted / Surface text */
html.light .text-\[\#94a3b8\],
html.light .text-\[\#94A3B8\] {
  color: #475569 !important;
}
html.light .text-\[\#d4e4fa\] {
  color: #0f172a !important;
}

/* 5. Hardcoded Backgrounds & Video Overlay */
html.light .bg-\[\#051424\] {
  background-color: #f8fafc !important;
}
html.light .bg-\[\#051424\]\/60,
html.light .bg-\[\#051424\]\/50 {
  background-color: rgba(248, 250, 252, 0.85) !important;
}
html.light #video-bg-container > div {
  background: rgba(248, 250, 252, 0.88) !important;
}

/* 6. Badges and Pill Tags */
html.light .bg-primary-container\/10,
html.light .bg-primary-container\/15,
html.light .bg-primary-container\/20 {
  background-color: #e0f2fe !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

html.light .bg-secondary-container\/20,
html.light .bg-secondary\/10,
html.light .bg-secondary\/15,
html.light .bg-secondary\/20 {
  background-color: #e0e7ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

html.light .bg-tertiary\/10,
html.light .bg-tertiary\/15,
html.light .bg-tertiary\/20,
html.light .bg-tertiary-container\/15 {
  background-color: #d1fae5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

/* Trust bar pills & tags */
html.light .rounded-full.bg-surface-container\/60 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

/* 7. Interactive Buttons, Tabs & Calculators */
html.light .tab-btn {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
html.light .tab-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light .tab-btn.active {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
}

/* Calculator & Routing buttons */
html.light .bg-\[\#0d1c2d\] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light .bg-\[\#1c2b3c\] {
  background-color: #e0f2fe !important;
  border-color: #0284c7 !important;
}
html.light .border-\[\#00d2ff\]\/30,
html.light .border-\[\#00d2ff\]\/40 {
  border-color: rgba(2, 132, 199, 0.4) !important;
}

html.light .calc-org-btn,
html.light .calc-ch-btn,
html.light .routing-btn {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
html.light .calc-org-btn:hover,
html.light .calc-ch-btn:hover,
html.light .routing-btn:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html.light .calc-org-btn.bg-\[\#1c2b3c\],
html.light .calc-ch-btn.bg-\[\#1c2b3c\],
html.light .routing-btn.bg-\[\#1c2b3c\] {
  background-color: #e0f2fe !important;
  border-color: #0284c7 !important;
}
html.light .calc-org-btn.bg-\[\#1c2b3c\] div,
html.light .calc-ch-btn.bg-\[\#1c2b3c\] div,
html.light .routing-btn.bg-\[\#1c2b3c\] div {
  color: #0369a1 !important;
}

/* Sliders */
html.light input[type=range] {
  background: #cbd5e1 !important;
}
html.light input[type=range]::-webkit-slider-thumb {
  background: #0284c7 !important;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.4) !important;
}

/* 8. Vibrant Action CTA Buttons */
html.light a.bg-gradient-to-r:not(header a),
html.light button.bg-gradient-to-r,
html.light .bg-gradient-to-r.from-primary-container:not(header a) {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4338ca 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px 0 rgba(2, 132, 199, 0.35) !important;
}
html.light a.bg-gradient-to-r:not(header a):hover,
html.light button.bg-gradient-to-r:hover,
html.light .bg-gradient-to-r.from-primary-container:not(header a):hover {
  box-shadow: 0 6px 20px 0 rgba(2, 132, 199, 0.5) !important;
}
html.light a.bg-gradient-to-r:not(header a) span,
html.light button.bg-gradient-to-r span,
html.light .bg-gradient-to-r.from-primary-container:not(header a) span {
  color: #ffffff !important;
}
html.light .text-background {
  color: #0f172a !important;
}

/* Header CTA Button (Solicitar Diagnóstico / Request Free Diagnosis) */
html.light header a[href="#contacto"],
html.light header a.bg-gradient-to-r {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4338ca 100%) !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.25) !important;
}
html.light header a[href="#contacto"]:hover,
html.light header a.bg-gradient-to-r:hover {
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.5) !important;
}
html.light header a[href="#contacto"] .bg-surface-container-lowest,
html.light header a.bg-gradient-to-r .bg-surface-container-lowest {
  background-color: #ffffff !important;
  transition: all 0.25s ease !important;
}
html.light header a[href="#contacto"] .bg-surface-container-lowest span,
html.light header a.bg-gradient-to-r .bg-surface-container-lowest span {
  color: #0284c7 !important;
  font-weight: 600 !important;
}
html.light header a[href="#contacto"]:hover .bg-surface-container-lowest,
html.light header a.bg-gradient-to-r:hover .bg-surface-container-lowest {
  background-color: transparent !important;
}
html.light header a[href="#contacto"]:hover .bg-surface-container-lowest span,
html.light header a.bg-gradient-to-r:hover .bg-surface-container-lowest span {
  color: #ffffff !important;
}

/* Nota de Transparencia Técnica (Calculadora & FAQ Disclaimers) */
html.light .text-primary-fixed\/80,
html.light [data-i18n="calc_disclaimer_72h"] {
  color: #0369a1 !important;
  font-weight: 500 !important;
}
html.light .text-on-surface-variant\/80 {
  color: #475569 !important;
}
html.light [data-i18n="calc_note_title"] {
  color: #0f172a !important;
  font-weight: 700 !important;
}
html.light [data-i18n="calc_note_text"] {
  color: #334155 !important;
}
html.light .mt-8.pt-6 a.bg-surface-container {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html.light .mt-8.pt-6 a.bg-surface-container:hover {
  background-color: #ffffff !important;
  border-color: #94a3b8 !important;
}


/* 9. Form Inputs */
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="tel"],
html.light textarea,
html.light select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
  color: #64748b !important;
}
html.light input:focus,
html.light textarea:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* 10. Borders & Dividers */
html.light .border-white\/5,
html.light .border-white\/10,
html.light .border-white\/15,
html.light .border-white\/20,
html.light .border-white\/30 {
  border-color: #e2e8f0 !important;
}

/* 11. FAQ Accordions */
html.light details {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
html.light details[open] {
  background-color: #f8fafc !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 16px -2px rgba(2, 132, 199, 0.1) !important;
}
html.light details summary {
  color: #0f172a !important;
}
html.light details p {
  color: #334155 !important;
}

/* 12. Gradient Text */
html.light .gradient-text-neural {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 40%, #4338ca 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html.light .gradient-text-emerald {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 13. Mobile Menu */
html.light #mobile-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}
html.light #mobile-menu a {
  color: #1e293b !important;
}
html.light #mobile-menu a:hover {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}

/* 14. Footer */
html.light footer {
  background: #f1f5f9 !important;
  border-top: 1px solid #e2e8f0 !important;
}
html.light footer .border-t,
html.light footer .border-b {
  border-color: #e2e8f0 !important;
}

/* 15. Hover utilities & Special Elements for Light Mode */
html.light .hover\:text-white:hover {
  color: #0f172a !important;
}
html.light .hover\:text-primary-container:hover {
  color: #0284c7 !important;
}
html.light .hover\:bg-surface-container:hover {
  background-color: #f1f5f9 !important;
}
html.light .hover\:bg-surface-container-high:hover {
  background-color: #e2e8f0 !important;
}
html.light .hover\:bg-surface-container-highest:hover {
  background-color: #cbd5e1 !important;
}

/* Error States */
html.light .text-error {
  color: #dc2626 !important;
}
html.light .bg-error\/80 {
  background-color: #ef4444 !important;
}

/* Pillar Action Buttons in Light Mode */
html.light a.bg-tertiary,
html.light .bg-tertiary.text-background {
  background-color: #047857 !important;
  color: #ffffff !important;
}
html.light a.bg-tertiary:hover {
  background-color: #065f46 !important;
  color: #ffffff !important;
}
html.light a.bg-tertiary span,
html.light .bg-tertiary.text-background span {
  color: #ffffff !important;
}

html.light a.hover\:bg-primary-container:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}
html.light a.hover\:bg-primary-container:hover span {
  color: #ffffff !important;
}

html.light a.hover\:bg-secondary:hover {
  background-color: #4338ca !important;
  color: #ffffff !important;
}
html.light a.hover\:bg-secondary:hover span {
  color: #ffffff !important;
}


/* Language/Theme toggle styling */
.lang-toggle-btn {
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.lang-toggle-btn:hover { background: rgba(255,255,255,0.08); transform: scale(1.1); }
.lang-toggle-btn.active { background: rgba(0,210,255,0.12); border-color: rgba(0,210,255,0.35); }
html.light .lang-toggle-btn:hover { background: rgba(0,0,0,0.06); }
html.light .lang-toggle-btn.active { background: rgba(2,132,199,0.12); border-color: rgba(2,132,199,0.35); }

.theme-toggle-btn {
  padding: 6px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.theme-toggle-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #00d2ff;
  transform: scale(1.1);
}
html.light .theme-toggle-btn {
  border-color: rgba(0,0,0,0.12);
  color: #475569;
}
html.light .theme-toggle-btn:hover {
  background: rgba(0,0,0,0.06);
  color: #0284c7;
}