/* ==========================================================================
   FICHA TÉCNICA / CATÁLOGO TÉCNICO ARQUITECTÓNICO SUIZO (TEMA CLARO COMPLETO)
   La Casa de las Tejas SAS - Cubiertas en Panel Sándwich Standing Seam
   Paleta: Azul Marino Ejecutivo (#0B192C) + Naranja Industrial (#EA580C) + Fondo Blanco Técnico (#F8FAFC)
   ========================================================================== */


:root {
  --navy: #0B192C;
  --navy-light: #1E293B;
  --orange: #D5900D;
  --brand-gold: #D5900D;
  --brand-gold-dark: #825104;
  --brand-gold-mid: #DC9604;
  --brand-gold-light: #F3C85A;
  --orange-accent: #F3C85A;
  --orange-light: #FEF9C3;
  --slate-body: #334155;
  --slate-muted: #64748B;
  --border-light: #E2E8F0;
  --border-card: #CBD5E1;
  --bg-main: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-subtle: #F1F5F9;
  
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   1. BASE & TYPOGRAPHY EN TEMA CLARO
   ========================================================================== */
.light-theme {
  background-color: var(--bg-main) !important;
  color: var(--navy) !important;
  font-family: var(--font-body) !important;
}

.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme h4,
.light-theme .font-heading,
.light-theme .font-display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em !important;
  color: var(--navy);
}

.light-theme p {
  color: var(--slate-body) !important;
}

.light-theme strong {
  color: var(--navy) !important;
}

/* Reemplazo de texto blanco a marino en tema claro */
.light-theme .text-white {
  color: var(--navy) !important;
}

.light-theme .text-slate-100,
.light-theme .text-slate-200,
.light-theme .text-slate-300 {
  color: var(--slate-body) !important;
}

.light-theme .text-slate-400 {
  color: var(--slate-muted) !important;
}

.light-theme .text-slate-500 {
  color: #94A3B8 !important;
}

.light-theme .text-slate-700 {
  color: var(--slate-body) !important;
}

/* Degradado corporativo de alto contraste para titulares */
.light-theme .bg-gradient-to-r.from-amber-400,
.light-theme .hero-h1-gold {
  background-image: linear-gradient(135deg, #B47608 0%, #D5900D 35%, #DC9604 70%, #825104 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   2. HEADER FLOTANTE EN TEMA CLARO (CRISTAL BLANCO ULTRA-NÍTIDO)
   ========================================================================== */
.light-theme header,
.light-theme #main-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Cinta de anuncios superior */
.light-theme header > div:first-child {
  background: #F1F5F9 !important;
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--slate-body) !important;
}

.light-theme header > div:first-child span,
.light-theme header > div:first-child a {
  color: var(--slate-body) !important;
}

.light-theme header > div:first-child a:hover {
  color: var(--orange) !important;
}

/* Enlaces de navegación desktop */
.light-theme header nav a {
  color: #1E293B !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.light-theme header nav a:hover {
  color: var(--orange) !important;
}

/* Cajón móvil y navegación en Tema Claro */
.light-theme #mobile-nav {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 20px 45px -10px rgba(11, 25, 44, 0.15) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.light-theme .mobile-nav-link {
  color: #1E293B !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.light-theme .mobile-nav-link:hover {
  background: #F1F5F9 !important;
  color: var(--orange) !important;
}

.light-theme #mobile-menu-toggle {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0B192C !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.light-theme #mobile-menu-toggle:hover {
  background: #F8FAFC !important;
  border-color: var(--orange) !important;
  color: var(--orange) !important;
}

.light-theme .theme-nav-pill {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0B192C !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.light-theme .theme-nav-pill:hover {
  background: #F8FAFC !important;
  border-color: var(--orange) !important;
  color: var(--orange) !important;
}

/* ==========================================================================
   3. SECCIONES Y FONDOS EN TEMA CLARO — ESPACIADO Y RESPIRACIÓN ARQUITECTÓNICA
   ========================================================================== */
.light-theme section:not(#hero-section) {
  padding-top: clamp(80px, 9vw, 130px) !important;
  padding-bottom: clamp(80px, 9vw, 130px) !important;
  position: relative !important;
}
.light-theme #hero-section {
  padding-top: 0 !important;
  position: relative !important;
}

.light-theme section.bg-white {
  background-color: #FFFFFF !important;
  border-bottom: 1.5px solid #E2E8F0 !important;
}

.light-theme section.bg-slate-100 {
  background-color: #EEF2F6 !important;
  border-bottom: 1.5px solid #CBD5E1 !important;
}

.light-theme .py-20,
.light-theme .py-24,
.light-theme .py-28,
.light-theme .py-32,
.light-theme .py-36,
.light-theme .py-40 {
  padding-top: clamp(80px, 9vw, 130px) !important;
  padding-bottom: clamp(80px, 9vw, 130px) !important;
}

.light-theme .mb-10,
.light-theme .mb-12,
.light-theme .mb-14,
.light-theme .mb-16,
.light-theme .mb-20,
.light-theme .mb-24 {
  margin-bottom: clamp(48px, 6vw, 84px) !important;
}

.light-theme .mt-10,
.light-theme .mt-12,
.light-theme .mt-14,
.light-theme .mt-16,
.light-theme .mt-20,
.light-theme .mt-24 {
  margin-top: clamp(48px, 6vw, 84px) !important;
}

.light-theme .bg-brand-dark,
.light-theme .bg-slate-950,
.light-theme .bg-slate-900 {
  background-color: var(--bg-main) !important;
  color: var(--navy) !important;
}

.light-theme .bg-slate-800 {
  background-color: var(--bg-card-subtle) !important;
  color: var(--navy) !important;
}

.light-theme .bg-slate-800\/80,
.light-theme .bg-slate-800\/90 {
  background-color: var(--bg-card-subtle) !important;
}

/* Cuadrícula arquitectónica milimétrica ultra-sutil (Blueprint) */
.light-theme .bg-blueprint {
  background-color: var(--bg-main) !important;
  background-image: 
    linear-gradient(rgba(226, 232, 240, 0.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.8) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

.light-theme .bg-blueprint-fine {
  background-image: 
    linear-gradient(rgba(226, 232, 240, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.55) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
}

.light-theme .border-slate-800,
.light-theme .border-slate-700 {
  border-color: var(--border-light) !important;
}

/* ==========================================================================
   4. TARJETAS Y PANELES (METAL-CARD, GLASS-PANEL)
   ========================================================================== */
.light-theme .metal-card,
.light-theme .glass-panel {
  background: #FFFFFF !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 4px 20px -2px rgba(11, 25, 44, 0.04) !important;
  color: var(--navy) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.light-theme .metal-card:hover {
  border-color: rgba(234, 88, 12, 0.45) !important;
  box-shadow: 0 16px 36px -6px rgba(11, 25, 44, 0.08), 0 0 0 1px rgba(234, 88, 12, 0.12) inset !important;
  transform: translateY(-2px) !important;
}

.light-theme section.bg-white .metal-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
.light-theme section.bg-white .metal-card:hover {
  background: #FFFFFF !important;
  border-color: rgba(234, 88, 12, 0.45) !important;
  box-shadow: 0 16px 36px -6px rgba(11, 25, 44, 0.09) !important;
  transform: translateY(-3px) !important;
}

.light-theme section.bg-slate-100 .metal-card {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06) !important;
}
.light-theme section.bg-slate-100 .metal-card:hover {
  border-color: rgba(234, 88, 12, 0.45) !important;
  box-shadow: 0 16px 36px -6px rgba(11, 25, 44, 0.12) !important;
  transform: translateY(-3px) !important;
}

.light-theme .metal-card span.font-mono {
  color: var(--navy) !important;
}

.light-theme .metal-card p {
  color: var(--slate-muted) !important;
}

/* Sub-tarjetas internas */
.light-theme .bg-slate-950\/70,
.light-theme .bg-slate-950\/80,
.light-theme .bg-slate-950\/90,
.light-theme .bg-slate-900\/90,
.light-theme .bg-slate-900\/70,
.light-theme .bg-slate-900\/60,
.light-theme .bg-slate-900\/50,
.light-theme .bg-slate-900\/40 {
  background-color: var(--bg-card-subtle) !important;
  border-color: var(--border-light) !important;
}

.light-theme .bg-gradient-to-br.from-slate-900 {
  background: #FFFFFF !important;
  border-color: var(--border-light) !important;
}

/* Contenedores de fotos/diagramas en galería */
.light-theme .metal-card .bg-slate-950 {
  background-color: var(--bg-card-subtle) !important;
}

/* ==========================================================================
   5. COTIZADOR RÁPIDO HERO (#micro-cotizador)
   ========================================================================== */
.light-theme #micro-cotizador {
  background: transparent !important;
}

.light-theme #micro-cotizador .glass-panel {
  background: #FFFFFF !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: 0 16px 40px -6px rgba(11, 25, 44, 0.08) !important;
}

.light-theme #micro-cotizador h2 {
  color: var(--navy) !important;
}

.light-theme #micro-cotizador p {
  color: var(--slate-body) !important;
}

.light-theme #micro-cotizador label {
  color: #475569 !important;
}

.light-theme #micro-cotizador input,
.light-theme #micro-cotizador select {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-card) !important;
  color: var(--navy) !important;
}

/* ==========================================================================
   6. VISOR 3D SHOWROOM EN TEMA CLARO
   ========================================================================== */
.light-theme #webgl-canvas-container {
  background-color: var(--bg-main) !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: 0 16px 40px -8px rgba(11, 25, 44, 0.08) !important;
  border-radius: 16px !important;
}

/* Contenedor relativo del visor */
.light-theme #showroom-3d .relative.w-full.rounded-2xl {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-card) !important;
}

/* HUD Superior e Inferior del Visor 3D */
.light-theme #showroom-3d .absolute.top-4 > div,
.light-theme #showroom-3d .absolute.bottom-4 > div,
.light-theme #hud-mode-title {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--border-card) !important;
  color: var(--navy) !important;
  box-shadow: 0 4px 14px rgba(11, 25, 44, 0.06) !important;
}

.light-theme .btn-assembly-mode,
.light-theme .btn-cam-view,
.light-theme #btn-autorotate,
.light-theme #btn-wireframe {
  background: #FFFFFF !important;
  border: 1px solid var(--border-light) !important;
  color: var(--navy) !important;
  transition: all 0.2s ease !important;
}

.light-theme .btn-assembly-mode:hover,
.light-theme .btn-cam-view:hover,
.light-theme #btn-autorotate:hover,
.light-theme #btn-wireframe:hover {
  background: var(--bg-card-subtle) !important;
  color: var(--orange) !important;
  border-color: var(--orange) !important;
}

.light-theme .btn-assembly-mode.active,
.light-theme .btn-cam-view.active {
  background: linear-gradient(135deg, #F3C85A 0%, #D5900D 50%, #B47608 100%) !important;
  color: #070F1E !important;
  font-weight: 800 !important;
  border-color: #D5900D !important;
  box-shadow: 0 4px 14px rgba(213, 144, 13, 0.35) !important;
}

/* Pines numéricos flotantes del Visor 3D */
.light-theme .hotspot-pin {
  background: linear-gradient(135deg, #F3C85A 0%, #D5900D 50%, #B47608 100%) !important;
  color: #070F1E !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 4px 14px rgba(213, 144, 13, 0.45) !important;
}

/* Tarjeta flotante interactiva de Hotspot */
.light-theme #viewer-info-card,
.light-theme #hotspot-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid var(--border-card) !important;
  color: var(--navy) !important;
  box-shadow: 0 24px 50px -10px rgba(11, 25, 44, 0.16) !important;
}

.light-theme #viewer-info-card h4,
.light-theme #hotspot-card h4 {
  color: var(--navy) !important;
}

.light-theme #viewer-info-card p,
.light-theme #viewer-info-card #info-card-desc,
.light-theme #hotspot-card p {
  color: var(--slate-body) !important;
}

.light-theme #info-card-close {
  background: var(--bg-card-subtle) !important;
  color: var(--slate-muted) !important;
  border: 1px solid var(--border-light) !important;
}

.light-theme #info-card-close:hover {
  background: var(--border-light) !important;
  color: var(--navy) !important;
}

/* Panel de control de despiece (Slider y pasos) */
.light-theme #showroom-3d .mt-4.rounded-xl {
  background: #FFFFFF !important;
  border: 1px solid var(--border-light) !important;
}

.light-theme .btn-step-tour {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--slate-body) !important;
  transition: all 0.2s ease !important;
}

.light-theme .btn-step-tour:hover {
  background: var(--orange-light) !important;
  color: var(--orange) !important;
  border-color: var(--orange) !important;
}

.light-theme .btn-step-tour.active {
  background: linear-gradient(135deg, #F3C85A 0%, #D5900D 50%, #B47608 100%) !important;
  color: #070F1E !important;
  font-weight: 800 !important;
  border-color: #D5900D !important;
}

/* Selector de Núcleo (PUR vs EPS) y Espesor */
.light-theme #btn-3d-pur,
.light-theme #btn-3d-eps,
.light-theme .btn-thickness {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--navy) !important;
  transition: all 0.2s ease !important;
}

.light-theme #btn-3d-pur:hover,
.light-theme #btn-3d-eps:hover,
.light-theme .btn-thickness:hover {
  background: #FFFFFF !important;
  border-color: var(--orange) !important;
  color: var(--orange) !important;
}

.light-theme #btn-3d-pur.active,
.light-theme #btn-3d-eps.active,
.light-theme .btn-thickness.active {
  background: linear-gradient(135deg, #F3C85A 0%, #D5900D 50%, #B47608 100%) !important;
  border-color: #D5900D !important;
  color: #070F1E !important;
  font-weight: 800 !important;
}

.light-theme #btn-3d-pur.active *,
.light-theme #btn-3d-eps.active *,
.light-theme .btn-thickness.active * {
  color: #FFFFFF !important;
}

/* Lista de Partes del Sistema (Columna Derecha) */
.light-theme .hotspot-list-item {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--slate-body) !important;
}

.light-theme .hotspot-list-item .hotspot-title {
  color: var(--navy) !important;
}

.light-theme .hotspot-list-item:hover {
  background: #FFFFFF !important;
  border-color: var(--orange) !important;
}

.light-theme .hotspot-list-item.active {
  background: var(--orange-light) !important;
  border-color: var(--orange) !important;
}

.light-theme .hotspot-list-item.active .hotspot-title {
  color: var(--orange) !important;
}

.light-theme .hotspot-badge {
  background: #FFFFFF !important;
  border: 1px solid var(--border-card) !important;
  color: var(--navy) !important;
}

/* ==========================================================================
   7. FORMULARIOS, INPUTS Y CONTROLES DESLIZANTES
   ========================================================================== */
.light-theme input[type="text"],
.light-theme input[type="number"],
.light-theme select {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-card) !important;
  color: var(--navy) !important;
}

.light-theme input[type="text"]:focus,
.light-theme input[type="number"]:focus,
.light-theme select:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
  outline: none !important;
}

.light-theme input::placeholder {
  color: var(--slate-muted) !important;
}

.light-theme input[type="range"] {
  accent-color: var(--orange) !important;
}

/* Botones preset en calculadoras */
.light-theme .btn-mod-area-tag,
.light-theme .btn-area-preset,
.light-theme button[onclick*="hero-quote-form"] {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--slate-body) !important;
  font-weight: 600 !important;
}

.light-theme .btn-mod-area-tag:hover,
.light-theme .btn-area-preset:hover,
.light-theme button[onclick*="hero-quote-form"]:hover {
  background: var(--orange-light) !important;
  color: var(--orange) !important;
  border-color: var(--orange) !important;
}

.light-theme .btn-area-preset.active {
  background: var(--orange) !important;
  color: #FFFFFF !important;
  border-color: var(--orange) !important;
}

/* ==========================================================================
   8. TABLAS TÉCNICAS Y ESPECIFICACIONES DIMENSIONALES
   ========================================================================== */
.light-theme table {
  background: #FFFFFF !important;
  border: 1px solid var(--border-light) !important;
}

.light-theme thead th {
  background: var(--bg-card-subtle) !important;
  color: var(--navy) !important;
  font-family: var(--font-display) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.light-theme tbody tr {
  border-bottom: 1px solid var(--border-light) !important;
}

.light-theme tbody td {
  color: var(--slate-body) !important;
}

.light-theme tbody td.font-bold {
  color: var(--navy) !important;
}

/* ==========================================================================
   9. ACORDEÓN FAQ DE INGENIERÍA
   ========================================================================== */
.light-theme .accordion-item {
  background: #FFFFFF !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 2px 10px rgba(11, 25, 44, 0.03) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-theme .accordion-item.active {
  border-color: #D5900D !important;
  box-shadow: 0 8px 24px -4px rgba(213, 144, 13, 0.18),
              0 2px 6px rgba(213, 144, 13, 0.08) !important;
}

.light-theme .accordion-header {
  color: var(--navy) !important;
}

.light-theme .accordion-header:hover {
  color: var(--orange) !important;
}

.light-theme .accordion-content {
  color: var(--slate-body) !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              padding 0.3s ease,
              border 0.2s ease !important;
}

.light-theme .accordion-item.active .accordion-content {
  max-height: 500px !important;
  opacity: 1 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 1.25rem !important;
  border-top: 1px solid #F1F5F9 !important;
}

.light-theme .accordion-item.active .accordion-icon {
  transform: rotate(180deg) !important;
  color: #D5900D !important;
}

/* ==========================================================================
   10. FILTROS DE PORTAFOLIO DE OBRAS
   ========================================================================== */
.light-theme .portfolio-tab-btn {
  background: var(--bg-card-subtle) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--slate-body) !important;
}

.light-theme .portfolio-tab-btn:hover {
  background: #FFFFFF !important;
  color: var(--orange) !important;
  border-color: var(--orange) !important;
}

.light-theme .portfolio-tab-btn.active {
  background: linear-gradient(135deg, #F3C85A 0%, #D5900D 50%, #B47608 100%) !important;
  color: #070F1E !important;
  font-weight: 800 !important;
  border-color: #D5900D !important;
}

/* ==========================================================================
   11. BOTONES POLIGONALES CON CHAFLÁN & EFECTO SHINE
   ========================================================================== */
.btn-chamfer-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #F3C85A 0%, #D5900D 50%, #B47608 100%);
  color: #070F1E !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 28px;
  text-decoration: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 0 10px 25px -4px rgba(234, 88, 12, 0.38);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.btn-chamfer-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  animation: shine 4.5s infinite;
}

@keyframes shine {
  0%, 60% {
    left: -120%;
  }
  100% {
    left: 200%;
  }
}

.btn-chamfer-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(234, 88, 12, 0.48);
}

.btn-chamfer-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF;
  color: var(--navy) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 26px;
  text-decoration: none;
  border: 1px solid var(--border-card);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-chamfer-secondary:hover {
  background: var(--bg-card-subtle);
  border-color: var(--navy);
  color: var(--navy) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   12. BOTONES CON TEXTO BLANCO PERMANENTE
   ========================================================================== */
.light-theme .btn-chamfer-primary,
.light-theme .bg-brand-whatsapp,
.light-theme .bg-brand-whatsappHover,
.light-theme .bg-emerald-600,
.light-theme .bg-emerald-500,
.light-theme .bg-orange-600,
.light-theme .bg-orange-500,
.light-theme .btn-assembly-mode.active,
.light-theme .btn-cam-view.active,
.light-theme .btn-step-tour.active,
.light-theme .btn-thickness.active,
.light-theme .portfolio-tab-btn.active,
.light-theme .btn-area-preset.active {
  color: #FFFFFF !important;
}

.light-theme .bg-brand-whatsapp,
.light-theme .bg-brand-whatsapp * {
  color: #0F172A !important;
}

/* ==========================================================================
   13. CTA FINAL DE COTIZACIÓN Y FOOTER (TEMA CLARO ARQUITECTÓNICO)
   ========================================================================== */
.light-theme .cta-final-section,
.light-theme .cta-band,
.light-theme #cta-final {
  background: #EEF2F6 !important;
  color: var(--navy) !important;
  border-top: 1px solid var(--border-light) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.light-theme .cta-final-section h2,
.light-theme .cta-final-section h3,
.light-theme .cta-final-section strong,
.light-theme .cta-band h2,
.light-theme .cta-band strong,
.light-theme #cta-final h2,
.light-theme #cta-final strong {
  color: var(--navy) !important;
}

.light-theme .cta-final-section p,
.light-theme .cta-band p,
.light-theme #cta-final p {
  color: var(--slate-body) !important;
}

.light-theme .cta-final-section .glass-panel {
  background: #FFFFFF !important;
  border: 1px solid var(--border-card) !important;
  box-shadow: 0 10px 30px -4px rgba(11, 25, 44, 0.06) !important;
}

.light-theme footer {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border-top: 1px solid #CBD5E1 !important;
}

.light-theme footer h3,
.light-theme footer h4 {
  color: var(--navy) !important;
}

.light-theme footer a {
  color: #334155 !important;
}

.light-theme footer a:hover {
  color: var(--orange) !important;
}

.light-theme footer p,
.light-theme footer span {
  color: #475569 !important;
}

.light-theme .bg-slate-100 {
  background-color: #F1F5F9 !important;
}

/* ==========================================================================
   INTERRUPTOR / SWITCH SUTIL DE TEMA (CLARO / OSCURO) EN TEMA CLARO
   ========================================================================== */
.light-theme .theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border-radius: 9999px;
  text-decoration: none;
  background: #F1F5F9 !important;
  border: 1px solid var(--border-light) !important;
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

.light-theme .theme-switch:hover {
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
}

.light-theme .theme-switch .theme-switch-track {
  width: 26px;
  height: 15px;
  border-radius: 9999px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.5px;
  background: #CBD5E1 !important;
  border: 1px solid #94A3B8 !important;
}

.light-theme .theme-switch .theme-switch-thumb {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: var(--orange) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.light-theme .theme-switch [data-lucide="moon"],
.light-theme .theme-switch svg.lucide-moon {
  color: #94A3B8 !important;
}

.light-theme .theme-switch:hover [data-lucide="moon"],
.light-theme .theme-switch:hover svg.lucide-moon {
  color: #64748B !important;
}

.light-theme .theme-switch [data-lucide="sun"],
.light-theme .theme-switch svg.lucide-sun {
  color: var(--orange) !important;
}

/* ==========================================================================
   COOKIE BANNER & LEGAL MODAL EN TEMA CLARO (SWISS MONOGRAPH)
   ========================================================================== */
#cookie-consent-banner {
  position: fixed !important;
  z-index: 999999 !important;
}

#legal-modal {
  position: fixed !important;
  z-index: 1000000 !important;
}

.light-theme #cookie-consent-banner .cookie-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 20px 45px -10px rgba(11, 25, 44, 0.18), 0 0 0 1px rgba(213, 144, 13, 0.2) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.light-theme #cookie-consent-banner .cookie-title {
  color: #0B192C !important;
  font-weight: 800 !important;
  font-family: var(--font-display) !important;
}

.light-theme #cookie-consent-banner .cookie-desc {
  color: #334155 !important;
  font-weight: 500 !important;
}

.light-theme #cookie-consent-banner .cookie-btn-ghost {
  color: #64748B !important;
}
.light-theme #cookie-consent-banner .cookie-btn-ghost:hover {
  color: #0B192C !important;
  background: #F1F5F9 !important;
}

.light-theme #cookie-consent-banner .cookie-btn-sec {
  background: #F8FAFC !important;
  color: #1E293B !important;
  border: 1px solid #CBD5E1 !important;
}
.light-theme #cookie-consent-banner .cookie-btn-sec:hover {
  background: #E2E8F0 !important;
  color: #0B192C !important;
}

.light-theme #cookie-consent-banner .cookie-btn-primary {
  background: linear-gradient(135deg, #F3C85A 0%, #D5900D 50%, #B47608 100%) !important;
  color: #070F1E !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(213, 144, 13, 0.35) !important;
}

.light-theme #cookie-consent-banner .cookie-close {
  color: #64748B !important;
}
.light-theme #cookie-consent-banner .cookie-close:hover {
  color: #0B192C !important;
  background: #F1F5F9 !important;
}

.light-theme #legal-modal .legal-modal-panel {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

.light-theme #legal-modal h3 {
  color: #0F172A !important;
  font-family: var(--font-display) !important;
}

.light-theme #legal-modal p,
.light-theme #legal-modal li {
  color: #334155 !important;
}

/* Zero Horizontal Overflow & Viewport Lock */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative;
}

#main-header, #top-announcement-bar, #nav-dock-wrapper, #main-navbar, #main-nav-inner {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

@media (max-width: 639px) {
  #top-announcement-bar .theme-corner-btn {
    display: none !important;
  }
  #top-announcement-bar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    white-space: nowrap !important;
    overflow-x: hidden !important;
  }
  #main-nav-inner {
    height: 60px !important;
  }
  #wa-fab {
    width: 46px !important;
    height: 46px !important;
    bottom: 16px !important;
    right: 16px !important;
  }
  
  /* Calculator Mobile Polish: Strictly 1 Column on Mobile screens (<640px) */
  #calc-subview-summary > div.grid,
  #calc-subview-fasteners > div.grid,
  .calc-metric-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* 3D Canvas Touch Action: Completely eliminates OrbitControls touchstart Intervention Warning */
#webgl-canvas-container,
#webgl-canvas-container canvas,
#hero-cad-canvas-container,
#hero-cad-canvas-container canvas {
  touch-action: none !important;
}

/* ==========================================================================
   PROMINENT LOGO & HEADER ACTION POLISH (LIGHT & DARK PARITY)
   ========================================================================== */
#main-nav-inner {
  height: 68px !important;
}
@media (min-width: 640px) {
  #main-nav-inner {
    height: 80px !important;
  }
}
@media (min-width: 1024px) {
  #main-nav-inner {
    height: 94px !important;
  }
}

/* Explicit Header Spacer: Total clearance of Ribbon + Nav to prevent overlapping Hero H1 */
#header-spacer {
  height: 114px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}
@media (min-width: 640px) {
  #header-spacer {
    height: 132px !important;
  }
}
@media (min-width: 1024px) {
  #header-spacer {
    height: 156px !important;
  }
}

/* Prominent, High-Visibility Brand Logo */
#nav-logo {
  height: 48px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 6px rgba(11, 25, 44, 0.22)) contrast(1.08) brightness(0.96) !important;
  transition: all 0.25s ease-in-out !important;
}
@media (min-width: 640px) {
  #nav-logo {
    height: 60px !important;
    max-width: 290px !important;
  }
}
@media (min-width: 1024px) {
  #nav-logo {
    height: 74px !important;
    max-width: 360px !important;
  }
}

/* Header WhatsApp Button Polish: Clean White Icon & Typography */
.btn-whatsapp-header {
  background: linear-gradient(135deg, #28D169 0%, #20BA5A 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px -2px rgba(37, 211, 102, 0.45) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-whatsapp-header:hover {
  background: linear-gradient(135deg, #2FE073 0%, #1DA851 100%) !important;
  box-shadow: 0 6px 20px -2px rgba(37, 211, 102, 0.6) !important;
  transform: translateY(-1px) scale(1.02) !important;
}
.btn-whatsapp-header svg {
  fill: #FFFFFF !important;
}