/* ==========================================================================
   CENTEOTL — MODERN AMBIENT MESH & HI-FI GLASSMORPHISM (INDEX UPGRADE)
   Arquitectura de ultra-rendimiento (GPU acelerada, 60/120 FPS, contain: paint)
   ========================================================================== */

/* ─── 1. BOTÓN DE CAMBIO DE IDIOMA EN NAVEGACIÓN TOAST ───────────────────── */

nav.main-nav.toast-nav .lang-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 9999px !important;
  background: var(--bg-surface-elevated, rgba(20, 28, 22, 0.85)) !important;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)) !important;
  color: var(--text-primary, #ffffff) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  z-index: 100001 !important;
  position: relative !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

nav.main-nav.toast-nav .lang-toggle-btn svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--apple-green-400, #bef264) !important;
  transition: transform 0.3s ease !important;
}

nav.main-nav.toast-nav .lang-toggle-btn:hover {
  background: var(--apple-green-50, rgba(132, 204, 22, 0.15)) !important;
  border-color: var(--apple-green-500, #84cc16) !important;
  color: var(--apple-green-400, #bef264) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 18px var(--apple-green-glow, rgba(132, 204, 22, 0.25)) !important;
}

nav.main-nav.toast-nav .lang-toggle-btn:hover svg {
  transform: rotate(25deg);
}

nav.main-nav.toast-nav .lang-toggle-btn:active {
  transform: scale(0.97) !important;
}

@media (max-width: 640px) {
  nav.main-nav.toast-nav .lang-toggle-btn {
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 0.72rem !important;
    gap: 4px !important;
  }
}

@media (max-width: 390px) {
  nav.main-nav.toast-nav .lang-toggle-btn {
    padding: 0 6px !important;
  }
  nav.main-nav.toast-nav .lang-toggle-btn svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* Opción de idioma en el menú desplegable */
nav.main-nav.toast-nav .list-items-lang a {
  border-color: rgba(132, 204, 22, 0.25) !important;
  background: rgba(132, 204, 22, 0.06) !important;
}

nav.main-nav.toast-nav .list-items-lang a::after {
  content: '🌐' !important;
  font-size: 1rem !important;
}

/* ─── 2. SECCIÓN DE SERVICIOS — AMBIENT MESH & CARDS DE CRISTAL ─────────── */

.services-section {
  position: relative !important;
  padding: clamp(80px, 9vw, 130px) clamp(20px, 4vw, 40px) !important;
  background-color: var(--bg-body, #080b08) !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(132, 204, 22, 0.28) !important;
  
  /* Malla ambiental de alta definición */
  background-image: 
    radial-gradient(ellipse 75% 45% at 50% -5%, rgba(132, 204, 22, 0.12), transparent 70%),
    radial-gradient(circle at 12% 85%, rgba(16, 185, 129, 0.08), transparent 45%),
    radial-gradient(circle at 88% 30%, rgba(132, 204, 22, 0.06), transparent 50%),
    radial-gradient(rgba(132, 204, 22, 0.1) 1.2px, transparent 1.2px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 38px 38px !important;
}

[data-theme="light"] .services-section {
  background-color: #f1f7f1 !important;
  border-top: 1px solid rgba(101, 163, 13, 0.32) !important;
  background-image: 
    radial-gradient(ellipse 75% 48% at 50% -5%, rgba(101, 163, 13, 0.22), transparent 70%),
    radial-gradient(circle at 12% 85%, rgba(22, 163, 74, 0.16), transparent 48%),
    radial-gradient(circle at 88% 30%, rgba(132, 204, 22, 0.18), transparent 50%),
    radial-gradient(rgba(77, 124, 15, 0.22) 1.5px, transparent 1.5px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px !important;
}

/* Divisor de transición luminosa superior */
.services-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 950px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(132, 204, 22, 0.55) 50%, transparent 100%);
  pointer-events: none;
}

[data-theme="light"] .services-section::before {
  background: linear-gradient(90deg, transparent 0%, rgba(101, 163, 13, 0.75) 50%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(101, 163, 13, 0.4) !important;
}

.services-container {
  max-width: 1260px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.services-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  gap: clamp(20px, 2.5vw, 32px) !important;
}

/* Tarjeta Glassmorphism Hi-Fi de Servicios */
.service-card {
  position: relative !important;
  background: rgba(18, 25, 20, 0.62) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(132, 204, 22, 0.22) !important;
  border-radius: 24px !important;
  padding: clamp(30px, 3.5vw, 42px) clamp(22px, 2.5vw, 30px) !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  
  box-shadow: 0 16px 38px -8px rgba(0, 0, 0, 0.45),
              inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background-color 0.3s ease !important;
}

[data-theme="light"] .service-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(101, 163, 13, 0.32) !important;
  box-shadow: 0 14px 34px -4px rgba(15, 35, 18, 0.09),
              0 2px 10px rgba(101, 163, 13, 0.08),
              inset 0 1px 2px #ffffff !important;
}

.service-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: var(--apple-green-500, #84cc16) !important;
  background: rgba(23, 34, 26, 0.82) !important;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.6),
              0 0 28px rgba(132, 204, 22, 0.22),
              inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
}

[data-theme="light"] .service-card:hover {
  background: #ffffff !important;
  border-color: var(--apple-green-600, #65a30d) !important;
  box-shadow: 0 24px 48px -6px rgba(15, 35, 18, 0.16),
              0 0 24px rgba(101, 163, 13, 0.25) !important;
}

/* Lente de Vidrio para el Icono de Servicio */
.service-card-icon {
  width: 60px !important;
  height: 60px !important;
  background: linear-gradient(135deg, rgba(132, 204, 22, 0.16), rgba(74, 222, 128, 0.06)) !important;
  border: 1px solid rgba(132, 204, 22, 0.35) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  border-radius: 18px !important;
  margin-bottom: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease,
              border-color 0.3s ease !important;
}

.service-card:hover .service-card-icon {
  transform: scale(1.1) rotate(4deg) !important;
  background: linear-gradient(135deg, rgba(132, 204, 22, 0.28), rgba(74, 222, 128, 0.14)) !important;
  border-color: var(--apple-green-400, #bef264) !important;
  box-shadow: 0 0 22px var(--apple-green-glow) !important;
}

.service-card-icon svg {
  width: 28px !important;
  height: 28px !important;
  color: var(--apple-green-400, #bef264) !important;
  transition: color 0.3s ease !important;
}

[data-theme="light"] .service-card-icon svg {
  color: var(--apple-green-600, #65a30d) !important;
}

.service-card h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.3px !important;
}

.service-card p {
  font-size: 0.93rem !important;
  line-height: 1.75 !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

/* ─── 3. SECCIÓN DE NOTICIAS — AMBIENT MESH & NEWS CARDS CRISTAL ────────── */

.news-section {
  position: relative !important;
  padding: clamp(80px, 9vw, 130px) clamp(20px, 4vw, 40px) !important;
  background-color: var(--bg-surface, #101612) !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(132, 204, 22, 0.28) !important;
  
  background-image: 
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(132, 204, 22, 0.08), transparent 65%),
    radial-gradient(circle at 92% 50%, rgba(16, 185, 129, 0.07), transparent 45%),
    radial-gradient(circle at 8% 30%, rgba(132, 204, 22, 0.05), transparent 45%),
    radial-gradient(rgba(132, 204, 22, 0.08) 1.2px, transparent 1.2px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 38px 38px !important;
}

/* Divisor superior de transición luminosa en noticias */
.news-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 950px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(132, 204, 22, 0.5) 50%, transparent 100%);
  pointer-events: none;
}

[data-theme="light"] .news-section {
  background-color: #ffffff !important;
  border-top: 1px solid rgba(101, 163, 13, 0.28) !important;
  background-image: 
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(16, 185, 129, 0.18), transparent 65%),
    radial-gradient(circle at 92% 50%, rgba(132, 204, 22, 0.16), transparent 45%),
    radial-gradient(circle at 8% 30%, rgba(77, 124, 15, 0.14), transparent 45%),
    radial-gradient(rgba(101, 163, 13, 0.18) 1.5px, transparent 1.5px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px !important;
}

[data-theme="light"] .news-section::before {
  background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.75) 50%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4) !important;
}

.news-container-main {
  max-width: 1260px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.index-news-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  gap: clamp(22px, 2.5vw, 32px) !important;
}

/* Tarjeta Glassmorphism de Noticias */
.news-card {
  position: relative !important;
  background: rgba(18, 25, 20, 0.62) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(132, 204, 22, 0.22) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 16px 38px -8px rgba(0, 0, 0, 0.45),
              inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

[data-theme="light"] .news-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(101, 163, 13, 0.3) !important;
  box-shadow: 0 14px 34px -4px rgba(15, 35, 18, 0.09), inset 0 1px 1px #ffffff !important;
}

.news-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: var(--apple-green-500, #84cc16) !important;
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.6),
              0 0 28px rgba(132, 204, 22, 0.22) !important;
}

[data-theme="light"] .news-card:hover {
  background: #ffffff !important;
  border-color: var(--apple-green-600, #65a30d) !important;
  box-shadow: 0 24px 48px -6px rgba(15, 35, 18, 0.16), 0 0 24px rgba(101, 163, 13, 0.25) !important;
}

.news-card-img {
  height: 215px !important;
  position: relative !important;
  overflow: hidden !important;
}

.news-card-img::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, transparent 35%, rgba(10, 14, 11, 0.75) 100%) !important;
}

.news-card-content {
  padding: 26px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.news-card-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  background: rgba(132, 204, 22, 0.12) !important;
  border: 1px solid rgba(132, 204, 22, 0.35) !important;
  color: var(--apple-green-400, #bef264) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  align-self: flex-start !important;
}

.news-card-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

.news-card-desc {
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
  color: var(--text-muted) !important;
}

.loading-news {
  background: rgba(18, 25, 20, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px dashed rgba(132, 204, 22, 0.3) !important;
  border-radius: 18px !important;
  padding: 45px 20px !important;
  color: var(--apple-green-400) !important;
  font-weight: 700 !important;
}

/* ─── 4. SECCIÓN SOBRE NOSOTROS — CAJA EDITORIAL GLASSMORPHISM ─────────── */

.about-section {
  position: relative !important;
  padding: clamp(80px, 9vw, 130px) clamp(20px, 4vw, 40px) !important;
  background-color: var(--bg-body, #080b08) !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(132, 204, 22, 0.28) !important;
  
  background-image: 
    radial-gradient(circle at 85% 35%, rgba(132, 204, 22, 0.1), transparent 55%),
    radial-gradient(circle at 15% 75%, rgba(16, 185, 129, 0.08), transparent 50%),
    radial-gradient(rgba(132, 204, 22, 0.1) 1.2px, transparent 1.2px) !important;
  background-size: 100% 100%, 100% 100%, 38px 38px !important;
}

/* Divisor superior de transición luminosa en nosotros */
.about-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 950px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(132, 204, 22, 0.5) 50%, transparent 100%);
  pointer-events: none;
}

[data-theme="light"] .about-section {
  background-color: #ecf4ec !important;
  border-top: 1px solid rgba(101, 163, 13, 0.32) !important;
  background-image: 
    radial-gradient(circle at 85% 35%, rgba(132, 204, 22, 0.22), transparent 55%),
    radial-gradient(circle at 15% 75%, rgba(16, 185, 129, 0.18), transparent 50%),
    radial-gradient(rgba(77, 124, 15, 0.2) 1.5px, transparent 1.5px) !important;
  background-size: 100% 100%, 100% 100%, 32px 32px !important;
}

[data-theme="light"] .about-section::before {
  background: linear-gradient(90deg, transparent 0%, rgba(101, 163, 13, 0.75) 50%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(101, 163, 13, 0.4) !important;
}

.about-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(36px, 5vw, 64px) !important;
  
  background: rgba(18, 25, 20, 0.6) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  border: 1px solid rgba(132, 204, 22, 0.25) !important;
  border-radius: 32px !important;
  padding: clamp(36px, 5vw, 64px) !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.55),
              0 0 35px rgba(132, 204, 22, 0.12),
              inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
}

[data-theme="light"] .about-container {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1.5px solid rgba(101, 163, 13, 0.35) !important;
  box-shadow: 0 24px 58px -10px rgba(15, 35, 18, 0.12),
              inset 0 1px 2px #ffffff !important;
}

.about-content {
  flex: 1.1 !important;
  text-align: left !important;
}

.about-content .section-title {
  text-align: left !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
}

.about-content p {
  color: var(--text-secondary, #cbd5e1) !important;
  font-size: 0.98rem !important;
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}

.about-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 32px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, var(--apple-green-600, #65a30d), var(--apple-green-500, #84cc16)) !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.4px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(101, 163, 13, 0.35) !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.about-cta:hover {
  background: linear-gradient(135deg, var(--apple-green-500, #84cc16), var(--apple-green-400, #bef264)) !important;
  color: #080b08 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 30px var(--apple-green-glow) !important;
}

.about-image {
  flex: 0.9 !important;
  position: relative !important;
}

.about-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5) !important;
  object-fit: cover !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

.about-image:hover img {
  transform: scale(1.025) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 28px var(--apple-green-glow) !important;
}

@media (max-width: 991px) {
  .about-container {
    flex-direction: column !important;
    text-align: center !important;
    padding: 32px 24px !important;
  }
  .about-content,
  .about-content .section-title {
    text-align: center !important;
  }
  .about-image {
    max-width: 100% !important;
  }
}

/* ─── 5. FOOTER GLASSMORPHISM ────────────────────────────────────────────── */

.main-footer {
  position: relative !important;
  background: linear-gradient(180deg, rgba(14, 20, 16, 0.96) 0%, rgba(8, 11, 8, 0.99) 100%) !important;
  border-top: 1px solid rgba(132, 204, 22, 0.3) !important;
  box-shadow: 0 -12px 42px rgba(0, 0, 0, 0.5) !important;
  padding: 70px 24px 0 !important;
}

[data-theme="light"] .main-footer {
  background: linear-gradient(180deg, #101c13 0%, #080f0a 100%) !important;
  border-top: 2px solid rgba(101, 163, 13, 0.45) !important;
  color: #f8faf8 !important;
}

.main-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(85vw, 750px);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--apple-green-400) 50%, transparent 100%);
  box-shadow: 0 0 14px var(--apple-green-glow);
}

.social-icons a {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(132, 204, 22, 0.22) !important;
  backdrop-filter: blur(8px) !important;
}

.social-icons a:hover {
  background: rgba(132, 204, 22, 0.2) !important;
  border-color: var(--apple-green-400) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 0 16px var(--apple-green-glow) !important;
}

/* ─── 6. PLATAFORMA — AMBIENT MESH & GLASSMORPHISM HI-FI ─────────────────── */

.platform-body {
  background-color: #080b08 !important;
  background-image: 
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(132, 204, 22, 0.12), transparent 60%),
    radial-gradient(circle at 10% 40%, rgba(16, 185, 129, 0.08), transparent 50%),
    radial-gradient(rgba(132, 204, 22, 0.1) 1.2px, transparent 1.2px) !important;
  background-size: 100% 100%, 100% 100%, 38px 38px !important;
  color: var(--text-primary) !important;
  min-height: 100vh !important;
}

[data-theme="light"] .platform-body {
  background-color: #f0f6f0 !important;
  background-image: 
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(101, 163, 13, 0.18), transparent 60%),
    radial-gradient(circle at 10% 40%, rgba(22, 163, 74, 0.14), transparent 50%),
    radial-gradient(rgba(77, 124, 15, 0.2) 1.5px, transparent 1.5px) !important;
  background-size: 100% 100%, 100% 100%, 32px 32px !important;
}

/* Banner de Bienvenida en Plataforma */
.welcome-banner {
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 16px 38px -8px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

[data-theme="light"] .welcome-banner {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 55%, #22c55e 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 18px 40px -6px rgba(22, 163, 74, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .welcome-banner {
  background: linear-gradient(135deg, rgba(20, 46, 24, 0.92) 0%, rgba(12, 26, 14, 0.96) 100%) !important;
  border: 1px solid var(--apple-green-border) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), 0 0 24px var(--apple-green-glow) !important;
}

/* Tarjetas del Dashboard en Plataforma */
.dash-card {
  position: relative !important;
  border-radius: 22px !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background-color 0.3s ease !important;
}

[data-theme="light"] .dash-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(101, 163, 13, 0.32) !important;
  border-left: 5px solid var(--apple-green-600, #65a30d) !important;
  box-shadow: 0 12px 32px -6px rgba(15, 35, 18, 0.1), inset 0 1px 1px #ffffff !important;
}

[data-theme="light"] .dash-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  background: #ffffff !important;
  border-color: var(--apple-green-600) !important;
  border-left-color: var(--apple-green-600) !important;
  box-shadow: 0 20px 42px -6px rgba(15, 35, 18, 0.16), 0 0 22px rgba(101, 163, 13, 0.22) !important;
}

[data-theme="dark"] .dash-card {
  background: rgba(18, 25, 20, 0.68) !important;
  border: 1px solid rgba(132, 204, 22, 0.25) !important;
  border-left: 5px solid var(--apple-green-500) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .dash-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  background: rgba(24, 34, 27, 0.85) !important;
  border-color: var(--apple-green-400) !important;
  box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.65), 0 0 26px var(--apple-green-glow) !important;
}

/* Bloques de formularios y secciones de Plataforma */
[data-theme="light"] .form-section-block,
[data-theme="light"] .predio-card,
[data-theme="light"] .profile-card,
[data-theme="light"] .info-block,
[data-theme="light"] .profile-block-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(101, 163, 13, 0.3) !important;
  border-left: 5px solid var(--apple-green-600) !important;
  box-shadow: 0 10px 28px -6px rgba(15, 35, 18, 0.08) !important;
  border-radius: 18px !important;
}

/* ─── 8. MODALES CENTEOTL MODERNOS (GLASSMORPHISM DE ALTO CONTRASTE) ────────── */

/* Overlay con desenfoque de campo profundo */
.modal-overlay,
.modal-overlay.centeotl-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  backdrop-filter: blur(14px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  animation: centeotlFadeOverlay 0.25s ease-out;
}

@keyframes centeotlFadeOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .modal-overlay.centeotl-overlay {
  background: rgba(3, 8, 4, 0.82) !important;
}

[data-theme="light"] .modal-overlay,
[data-theme="light"] .modal-overlay.centeotl-overlay {
  background: rgba(12, 24, 15, 0.52) !important;
}

/* Tarjeta Principal de Modal (Centeotl Glass Card) */
.modal-content.centeotl-modal-card,
#modal-atencion .modal-content {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  contain: layout paint !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  animation: centeotlModalPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .modal-content.centeotl-modal-card,
[data-theme="dark"] #modal-atencion .modal-content {
  background: rgba(13, 22, 16, 0.94) !important;
  border: 1.5px solid rgba(132, 204, 22, 0.42) !important;
  color: #f3f4f6 !important;
  box-shadow: 0 25px 65px -8px rgba(0, 0, 0, 0.88),
              0 0 35px rgba(132, 204, 22, 0.22),
              inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
}

[data-theme="light"] .modal-content.centeotl-modal-card,
[data-theme="light"] #modal-atencion .modal-content {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1.5px solid rgba(101, 163, 13, 0.38) !important;
  color: #111827 !important;
  box-shadow: 0 24px 60px -10px rgba(15, 35, 18, 0.22),
              0 0 30px rgba(101, 163, 13, 0.16),
              inset 0 1px 2px #ffffff !important;
}

/* Header estilizado */
.centeotl-modal-header,
#modal-atencion .modal-header {
  position: relative !important;
  padding: 24px 60px 20px 28px !important;
  border-bottom: 1px solid rgba(132, 204, 22, 0.22) !important;
}

[data-theme="dark"] .centeotl-modal-header,
[data-theme="dark"] #modal-atencion .modal-header {
  background: linear-gradient(135deg, rgba(20, 38, 25, 0.95) 0%, rgba(9, 17, 11, 0.98) 100%) !important;
  color: #ffffff !important;
}

[data-theme="light"] .centeotl-modal-header,
[data-theme="light"] #modal-atencion .modal-header {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
  color: #ffffff !important;
}

/* Cuerpo del modal con fondo translúcido y scroll elegante */
.centeotl-modal-body,
#modal-atencion .modal-body {
  background: transparent !important;
  padding: 24px 28px !important;
  overflow-y: auto !important;
}

[data-theme="dark"] .centeotl-modal-body,
[data-theme="dark"] #modal-atencion .modal-body {
  color: #e5e7eb !important;
}

[data-theme="light"] .centeotl-modal-body,
[data-theme="light"] #modal-atencion .modal-body {
  color: #1f2937 !important;
}

/* Botón cerrar unificado y táctil */
.centeotl-modal-close,
#modal-atencion .close-modal {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: all 0.25s ease !important;
  z-index: 100 !important;
}

.centeotl-modal-close:hover,
#modal-atencion .close-modal:hover {
  background: var(--apple-green-500, #84cc16) !important;
  color: #0c120e !important;
  transform: rotate(90deg) scale(1.1) !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px var(--apple-green-glow) !important;
}

/* Estilo para los títulos de sección en los pasos y formularios */
.prod-wizard-step-title,
.prod-step-header,
#form-atencion h4 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

[data-theme="dark"] .prod-wizard-step-title,
[data-theme="dark"] .prod-step-header,
[data-theme="dark"] #form-atencion h4 {
  color: var(--apple-green-400, #bef264) !important;
  border-bottom-color: rgba(132, 204, 22, 0.25) !important;
}

[data-theme="light"] .prod-wizard-step-title,
[data-theme="light"] .prod-step-header,
[data-theme="light"] #form-atencion h4 {
  color: var(--apple-green-600, #65a30d) !important;
  border-bottom-color: rgba(101, 163, 13, 0.25) !important;
}

/* Nicho cards del Wizard de Producción (Step 1) */
.niche-card {
  cursor: pointer;
  display: block;
}

.niche-card input[type="radio"] {
  display: none;
}

.niche-box {
  border-radius: 18px !important;
  padding: 16px 10px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.niche-box .niche-icon {
  font-size: 2rem !important;
  margin-bottom: 4px !important;
}

[data-theme="dark"] .niche-box {
  background: rgba(20, 32, 23, 0.75) !important;
  border: 1.5px solid rgba(132, 204, 22, 0.25) !important;
  color: #e5e7eb !important;
}

[data-theme="dark"] .niche-card:hover .niche-box,
[data-theme="dark"] .niche-card input[type="radio"]:checked + .niche-box {
  background: rgba(30, 52, 35, 0.95) !important;
  border-color: var(--apple-green-400, #bef264) !important;
  box-shadow: 0 0 20px var(--apple-green-glow) !important;
  color: #ffffff !important;
  transform: translateY(-4px) !important;
}

[data-theme="light"] .niche-box {
  background: rgba(246, 249, 245, 0.92) !important;
  border: 1.5px solid rgba(101, 163, 13, 0.25) !important;
  color: #1f2937 !important;
}

[data-theme="light"] .niche-card:hover .niche-box,
[data-theme="light"] .niche-card input[type="radio"]:checked + .niche-box {
  background: #ffffff !important;
  border-color: var(--apple-green-600, #65a30d) !important;
  box-shadow: 0 10px 24px -4px rgba(101, 163, 13, 0.25) !important;
  color: #15803d !important;
  transform: translateY(-4px) !important;
}

/* Inputs, Selects y Textareas dentro de modales */
.modal-body .input-group input,
.modal-body .input-group select,
.modal-body textarea,
.styled-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 0.92rem !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

[data-theme="dark"] .modal-body .input-group input,
[data-theme="dark"] .modal-body .input-group select,
[data-theme="dark"] .modal-body textarea,
[data-theme="dark"] .styled-textarea {
  background: rgba(20, 31, 23, 0.85) !important;
  border: 1.5px solid rgba(132, 204, 22, 0.3) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .modal-body .input-group input:focus,
[data-theme="dark"] .modal-body .input-group select:focus,
[data-theme="dark"] .modal-body textarea:focus,
[data-theme="dark"] .styled-textarea:focus {
  border-color: var(--apple-green-400, #bef264) !important;
  box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.25) !important;
  outline: none !important;
}

[data-theme="light"] .modal-body .input-group input,
[data-theme="light"] .modal-body .input-group select,
[data-theme="light"] .modal-body textarea,
[data-theme="light"] .styled-textarea {
  background: #ffffff !important;
  border: 1.5px solid rgba(101, 163, 13, 0.32) !important;
  color: #0f172a !important;
}

[data-theme="light"] .modal-body .input-group input:focus,
[data-theme="light"] .modal-body .input-group select:focus,
[data-theme="light"] .modal-body textarea:focus,
[data-theme="light"] .styled-textarea:focus {
  border-color: var(--apple-green-600, #65a30d) !important;
  box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.2) !important;
  outline: none !important;
}

/* Contenedores de secciones dinámicas */
#dynamic-fields-container {
  border-radius: 16px !important;
  padding: 20px !important;
  margin-top: 20px !important;
  transition: background 0.3s ease !important;
}

[data-theme="dark"] #dynamic-fields-container {
  background: rgba(18, 28, 21, 0.75) !important;
  border: 1px solid rgba(132, 204, 22, 0.2) !important;
}

[data-theme="light"] #dynamic-fields-container {
  background: rgba(246, 249, 245, 0.95) !important;
  border: 1.5px solid rgba(101, 163, 13, 0.22) !important;
}

/* Cuadro de Recomendación Técnica (Paso 3) */
.prod-recom-box {
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}

[data-theme="dark"] .prod-recom-box {
  background: rgba(18, 40, 24, 0.85) !important;
  border-left: 5px solid var(--apple-green-400, #bef264) !important;
  color: #d1fae5 !important;
}

[data-theme="light"] .prod-recom-box {
  background: rgba(236, 253, 240, 0.96) !important;
  border-left: 5px solid #16a34a !important;
  color: #14532d !important;
}

/* Caja de Confirmación de Atención al Ciudadano */
.atencion-confirm-box {
  border-radius: 14px !important;
  padding: 20px !important;
  display: inline-block !important;
  margin: 20px 0 !important;
}

[data-theme="dark"] .atencion-confirm-box {
  background: rgba(20, 38, 26, 0.88) !important;
  color: #bef264 !important;
  border: 1px solid rgba(132, 204, 22, 0.35) !important;
}

[data-theme="light"] .atencion-confirm-box {
  background: #e8f5e9 !important;
  color: #155724 !important;
  border: 1px solid rgba(40, 167, 69, 0.3) !important;
}

/* ─── 9. OPTIMIZACIÓN DE ALTO RENDIMIENTO PARA DISPOSITIVOS MÓVILES (GPU-SAVER) ─── */
@media (max-width: 768px) {
  /* Eliminar contención o recortes que fragmentan tiles de GPU en scroll móvil */
  .services-section,
  .news-section,
  .about-section {
    contain: none !important;
    overflow: hidden !important;
  }

  /* Reducir la sobrecarga de shaders: mallas procedurales ligeras de 1 solo paso */
  .services-section {
    background-image: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(132, 204, 22, 0.08), transparent 70%) !important;
    background-size: 100% 100% !important;
  }
  [data-theme="light"] .services-section {
    background-image: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(101, 163, 13, 0.12), transparent 70%) !important;
    background-size: 100% 100% !important;
  }

  .news-section {
    background-image: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(16, 185, 129, 0.06), transparent 70%) !important;
    background-size: 100% 100% !important;
  }
  [data-theme="light"] .news-section {
    background-image: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(16, 185, 129, 0.1), transparent 70%) !important;
    background-size: 100% 100% !important;
  }

  .about-section {
    background-image: radial-gradient(circle at 85% 30%, rgba(132, 204, 22, 0.07), transparent 60%) !important;
    background-size: 100% 100% !important;
  }
  [data-theme="light"] .about-section {
    background-image: radial-gradient(circle at 85% 30%, rgba(101, 163, 13, 0.1), transparent 60%) !important;
    background-size: 100% 100% !important;
  }

  /* Desactivar backdrop-filter pesado en tarjetas repetitivas para evitar caídas de tiles */
  .service-card,
  .news-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    background: rgba(18, 25, 20, 0.96) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  }

  [data-theme="light"] .service-card,
  [data-theme="light"] .news-card {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 16px rgba(15, 35, 18, 0.08) !important;
  }

  .about-container {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(18, 25, 20, 0.96) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
  }

  [data-theme="light"] .about-container {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 6px 20px rgba(15, 35, 18, 0.08) !important;
  }

  .loading-news {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(18, 25, 20, 0.9) !important;
  }

  .dash-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
  }

  /* Plataforma en móvil: fondo ligero de una sola pasada y sin blur en tarjetas */
  .platform-body {
    background-image: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(132, 204, 22, 0.08), transparent 70%) !important;
    background-size: 100% 100% !important;
  }
  [data-theme="light"] .platform-body {
    background-image: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(101, 163, 13, 0.12), transparent 70%) !important;
    background-size: 100% 100% !important;
  }

  .welcome-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .dash-card,
  .profile-block-card,
  .news-item,
  .predio-card,
  .form-section-block,
  .info-block,
  .sanitary-dashboard-card,
  .sanitary-timeline-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    contain: none !important;
  }
}

/* ─── 10. ADAPTABILIDAD RESPONSIVA INTEGRAL PARA MÓVILES (<= 640px / <= 320px) ─── */
@media (max-width: 640px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .services-section,
  .news-section,
  .about-section {
    padding: clamp(55px, 8vw, 85px) clamp(12px, 3.5vw, 20px) !important;
  }

  .services-grid,
  .index-news-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .services-container,
  .news-container-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .service-card,
  .news-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .news-section .section-title,
  .services-section .section-title,
  .about-content .section-title {
    font-size: clamp(1.45rem, 5.5vw, 2.1rem) !important;
    overflow-wrap: break-word !important;
  }

  .news-card-content {
    padding: 20px 16px !important;
  }

  .about-container {
    padding: 24px 16px !important;
    border-radius: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .about-cta {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 0.88rem !important;
    box-sizing: border-box !important;
  }

  .main-footer {
    padding: 50px 16px 0 !important;
  }

  .footer-credits {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 360px) {
  .services-section,
  .news-section,
  .about-section {
    padding: 48px 10px !important;
  }

  .service-card {
    padding: 22px 14px !important;
    border-radius: 18px !important;
  }

  .news-card {
    border-radius: 18px !important;
  }

  .news-card-img {
    height: 180px !important;
  }

  .news-card-content {
    padding: 16px 12px !important;
  }

  .news-card-title {
    font-size: 1.05rem !important;
  }

  .about-container {
    padding: 20px 12px !important;
    border-radius: 16px !important;
  }

  .about-content .section-title {
    font-size: 1.35rem !important;
  }

  .hero-editorial-title {
    font-size: 1.65rem !important;
  }

  .hero-editorial-btn {
    padding: 12px 22px !important;
    font-size: 0.88rem !important;
  }
}