/*
============================================================================
🧭 BAQUEANO ECOSYSTEM — MASTER ULTRA-FUTURISTIC STYLESHEET (styles.css)
============================================================================

🎯 1. POR QUÉ (WHY / PROPÓSITO):
- Consolidar el sistema de diseño visual de vanguardia para el portal web oficial
  de Baqueano Nicaragua, uniendo la herencia ecoturística y comunitaria con una
  estética hiper-tecnológica, cinematográfica y futurista.
- Eliminar dependencias frágiles de imports externos y asegurar una carga instantánea
  a 60fps con efectos de glassmorphism, HUDs tácticos, radares satelitales y
  animaciones fluidas tanto en escritorio como en dispositivos móviles.
- Cumplir estrictamente la paleta oficial (#165D6F Petróleo Teal, #F65E01 Naranja Fuego,
  #F4E6C1 Arena Pinolera, #0F172A Noche Profunda) con contraste WCAG AAA.

⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
- Arquitectura CSS3 pura con aceleración por GPU (transform3d, will-change, backdrop-filter).
- Mallas de gradientes atmosféricos cyber-nature con orbes de luz ambiental interactivos.
- Tarjetas holográficas con micro-bordes luminosos, biseles angulados y efectos 3D.
- Rejillas CSS Grid fluidas con auto-fit y breakpoints ergonómicos (Mobile, Tablet, Desktop, UltraWide).
- Modales tácticos flotantes de alta fidelidad para Emergencias SOS y Descarga de APK.

📦 3. QUÉ (WHAT / COMPONENTES EXPUESTOS):
- Tokens globales de diseño y paleta cromática oficial.
- Barra de navegación flotante tipo HUD con efecto glassmorphism.
- Hero cinematográfico interactivo con simulador de smartphone Android en 3D.
- Módulos especializados: Destinos, Historia, Ambiental, Gastronomía, Música, Aliados 3D, Calculadora y Ops Center.
- Modales tácticos SOS 24/7 con radar GPS y portal de distribución de APK verificada.
============================================================================
*/

@import url('css/theme-master.css');
@import url('css/responsive-ecosystem.css');
@import url('css/mobile-first-core.css');

/* ==========================================================================
   VIEW TRANSITIONS API (Cross-Document Navigation Fluida & Progresiva)
   ========================================================================== */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ==========================================================================
   1. VARIABLES & DESIGN TOKENS
   ========================================================================== */
:root {
  /* Paleta Oficial Baqueano */
  --petroleo-teal: #165D6F;
  --petroleo-light: #227B91;
  --petroleo-glow: #2DD4BF;
  --petroleo-dark: #0A2F38;

  --terracotta: #F65E01;
  --terracotta-light: #FF7B26;
  --terracotta-glow: #FFA05C;
  --terracotta-dark: #B34400;

  --arena-pinolera: #F4E6C1;
  --arena-light: #FFF9ED;
  --arena-dark: #DFCE9F;

  --oro-noble: #D4AF37;
  --oro-light: #F6E27A;

  --bg-space: #070B14;
  --bg-dark: #0A0F1D;
  --bg-surface: #0F172A;
  --bg-card: rgba(15, 23, 42, 0.75);
  --bg-card-hover: rgba(22, 93, 111, 0.25);
  --bg-glass: rgba(15, 23, 42, 0.65);
  --bg-glass-strong: rgba(10, 15, 29, 0.88);

  --verde-selva: #4A7A5A;
  --verde-neon: #8DBF9A;
  --cyan-cyber: #06B6D4;
  --azul-sat: #38BDF8;
  --rojo-alerta: #EF4444;
  --rojo-glow: #FF3344;

  /* Tipografías */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', 'Space Grotesk', sans-serif;
  --font-tech: 'Space Grotesk', 'JetBrains Mono', monospace;

  /* Textos y Bordes */
  --text-primary: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-muted: #94A3B8;
  --text-cream: #F4E6C1;
  --text-light: #CBD5E1;

  --border-subtle: rgba(244, 230, 193, 0.12);
  --border-glow: rgba(246, 94, 1, 0.35);
  --border-teal: rgba(45, 212, 191, 0.3);
  --border-cyan: rgba(6, 182, 212, 0.3);

  /* Gradientes Oficiales */
  --grad-sunset: linear-gradient(135deg, #F65E01 0%, #FF7B26 50%, #F4E6C1 100%);
  --grad-volcano: linear-gradient(180deg, #0A2F38 0%, #165D6F 45%, #0A0F1D 100%);
  --grad-cyber: linear-gradient(135deg, #165D6F 0%, #06B6D4 50%, #4A7A5A 100%);
  --grad-glass: linear-gradient(135deg, rgba(22, 93, 111, 0.2) 0%, rgba(15, 23, 42, 0.7) 100%);
  --grad-gold: linear-gradient(135deg, #D4AF37 0%, #F4E6C1 100%);
  --grad-card-border: linear-gradient(135deg, rgba(246, 94, 1, 0.5), rgba(22, 93, 111, 0.2), rgba(244, 230, 193, 0.2));

  /* Sombras y Resplandores */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
  --shadow-glow-terracotta: 0 0 25px rgba(246, 94, 1, 0.45);
  --shadow-glow-teal: 0 0 25px rgba(22, 93, 111, 0.5);
  --shadow-glow-cyan: 0 0 25px rgba(6, 182, 212, 0.4);
  --shadow-glow-green: 0 0 25px rgba(16, 185, 129, 0.45);

  /* Transiciones */
  --trans-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-space);
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-space);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Fondo Atmosférico Futurista */
body::before {
  content: '';
  position: fixed;
  top: -10vw;
  left: -10vw;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 93, 111, 0.35) 0%, rgba(6, 182, 212, 0.1) 50%, transparent 75%);
  filter: blur(120px);
  z-index: -2;
  pointer-events: none;
  animation: orb-float 20s infinite alternate ease-in-out;
}

body::after {
  content: '';
  position: fixed;
  bottom: -15vw;
  right: -10vw;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 94, 1, 0.25) 0%, rgba(212, 175, 55, 0.08) 50%, transparent 75%);
  filter: blur(140px);
  z-index: -2;
  pointer-events: none;
  animation: orb-float-reverse 25s infinite alternate ease-in-out;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--trans-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}

.container {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.5vw, 2.5rem);
}

.page-wrapper {
  padding-top: 5.5rem;
  padding-bottom: 5rem;
  min-height: 85vh;
}

/* ==========================================================================
   3. TIPOGRAFÍA Y JERARQUÍA
   ========================================================================== */
h1, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

/* ==========================================================================
   ESTÁNDAR VISUAL DE TITULARES H2 — SÓLIDOS, NÍTIDOS Y DE ALTO CONTRASTE
   ========================================================================== */
h2 {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-primary, #0B253A);
  position: relative;
  display: block;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  text-shadow: none;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  animation: none;
}

/* ==========================================================================
   TITULARES INSTITUCIONALES — BLANCO PURO DE ALTA LEGIBILIDAD (#FFFFFF)
   Garantiza máxima legibilidad sobre fondos fotográficos y panoramas.
   ========================================================================== */
h2.section-headline,
h2.culture-title,
.section-headline,
.culture-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.85) !important;
  animation: none !important;
}

h2.section-headline::after,
h2.culture-title::after {
  display: none !important;
}

/* ==========================================================================
   KINETIC TYPOGRAPHY — LETRAS EN MOVIMIENTO ANIMADAS (ESTILO MOTION GRAPHICS)
   ========================================================================== */
h1 {
  position: relative;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(22, 93, 111, 0.35);
  animation: kineticTitleEntrance 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

h1:hover .kinetic-char {
  animation-duration: 2.2s;
  color: #2DD4BF;
  text-shadow: 0 0 20px rgba(45, 212, 191, 0.6);
}

.kinetic-word {
  display: inline-block;
  white-space: nowrap;
}

.kinetic-char {
  display: inline-block;
  transform-origin: bottom center;
  animation: kineticCharFloat 5s ease-in-out infinite alternate;
  animation-delay: calc(var(--char-index, 0) * 0.045s);
  will-change: transform, filter, opacity;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.kinetic-char:hover {
  transform: translateY(-6px) scale(1.14) rotate(-2deg) !important;
  color: #F65E01 !important;
  text-shadow: 0 0 25px rgba(246, 94, 1, 0.8) !important;
}

@keyframes kineticTitleEntrance {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    filter: blur(8px);
    letter-spacing: 0.08em;
  }
  60% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: -0.02em;
  }
}

@keyframes kineticCharFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-3.5px) rotate(0.4deg);
  }
  50% {
    transform: translateY(1.5px) rotate(-0.3deg);
  }
  75% {
    transform: translateY(-2px) rotate(0.2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes kineticShimmerSweep {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.highlight-sunset {
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.highlight-teal {
  background: linear-gradient(135deg, #2DD4BF 0%, #165D6F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.highlight-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.text-tech {
  font-family: var(--font-tech);
}

/* ==========================================================================
   4. NAVEGACIÓN INSTITUCIONAL HUD INTERACTIVA & DINÁMICA
   ========================================================================== */
.main-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050 !important;
  padding: 0.85rem 0;
  background: rgba(10, 15, 29, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* Luz ambiental dinámica que sigue al cursor en el navbar */
.main-navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(450px circle at var(--nav-mouse-x, 50%) var(--nav-mouse-y, 50%), rgba(246, 94, 1, 0.08), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.main-navbar:hover::before {
  opacity: 1;
}

/* Borde inferior con filamento de luz animado */
.main-navbar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(22, 93, 111, 0.3) 20%, 
    rgba(246, 94, 1, 0.8) 50%, 
    rgba(22, 93, 111, 0.3) 80%, 
    transparent 100%);
  opacity: 0.35;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.main-navbar.scrolled {
  padding: 0.55rem 0;
  background: rgba(7, 11, 20, 0.95);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 20px rgba(22, 93, 111, 0.25);
  border-bottom: 1px solid rgba(246, 94, 1, 0.35);
}

.main-navbar.scrolled::after {
  opacity: 0.85;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.5rem, 1.2vw, 1.25rem);
  position: relative;
  z-index: 1;
}

/* LOGO DE MARCA CON MICROINTERACCIONES 3D */
.brand-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-box:hover {
  transform: translateY(-1px) scale(1.02);
}

.brand-logo-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(246, 94, 1, 0.45);
  border: 1px solid rgba(244, 230, 193, 0.35);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

.brand-box:hover .brand-logo-img {
  transform: rotate(6deg) scale(1.1);
  box-shadow: 0 0 25px rgba(246, 94, 1, 0.8), 0 0 10px rgba(22, 93, 111, 0.6);
  border-color: rgba(246, 94, 1, 0.8);
}

.brand-text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  user-select: none;
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.1rem, 1.25vw, 1.35rem);
  letter-spacing: 1.5px;
  color: #FFFFFF;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.brand-box:hover .brand-title {
  text-shadow: 0 0 12px rgba(244, 230, 193, 0.6);
}

.brand-tagline {
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--terracotta-light);
  line-height: 1.2;
  white-space: nowrap;
  transition: letter-spacing 0.3s ease, color 0.3s ease;
}

.brand-box:hover .brand-tagline {
  letter-spacing: 3.5px;
  color: var(--arena-pinolera);
}

/* MENÚ DE ENLACES CON GLIDING PILL INDICATOR DINÁMICO */
.nav-links-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.25vw, 0.3rem);
  background: rgba(15, 23, 42, 0.7);
  padding: 0.3rem clamp(0.3rem, 0.45vw, 0.55rem);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.25);
  flex-shrink: 1;
  min-width: 0;
}

/* Píldora indicadora deslizante con física de resorte */
.nav-pill-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(246, 94, 1, 0.95) 0%, rgba(22, 93, 111, 0.95) 100%);
  box-shadow: 0 0 18px rgba(246, 94, 1, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1),
              width 0.32s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.2s ease;
  will-change: transform, width, opacity;
}

.nav-links-menu.has-indicator .nav-pill-indicator {
  opacity: 1;
}

.nav-links-menu a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem clamp(0.48rem, 0.68vw, 0.85rem);
  font-size: clamp(0.76rem, 0.82vw, 0.86rem);
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 9999px;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  user-select: none;
}

.nav-links-menu a .nav-item-content {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.nav-links-menu a .nav-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-links-menu a .nav-icon {
  font-size: 0.88rem;
  color: var(--terracotta-light);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.25s ease,
              filter 0.25s ease;
}

.nav-links-menu a .nav-text-group {
  display: inline-flex;
  align-items: center;
}

.nav-links-menu a .nav-label {
  font-family: var(--font-tech);
  letter-spacing: 0.3px;
}

/* En modo horizontal desktop ocultamos sublabels y flechas */
.nav-links-menu a .nav-sublabel,
.nav-links-menu a .nav-right-wrap {
  display: none;
}

.nav-links-menu a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.nav-links-menu a:hover .nav-icon {
  transform: scale(1.22) rotate(6deg);
  color: var(--arena-pinolera);
  filter: drop-shadow(0 0 6px rgba(246, 94, 1, 0.7));
}

/* Fallback si no hay JS */
.nav-links-menu:not(.has-indicator) a.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, rgba(246, 94, 1, 0.92) 0%, rgba(22, 93, 111, 0.92) 100%);
  box-shadow: 0 0 15px rgba(246, 94, 1, 0.45);
}

.nav-links-menu.has-indicator a.active .nav-icon,
.nav-links-menu.has-indicator a.hovered .nav-icon {
  color: #FFFFFF;
  filter: drop-shadow(0 0 6px rgba(244, 230, 193, 0.8));
}

.nav-links-menu.has-indicator a.active,
.nav-links-menu.has-indicator a.hovered {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* BOTONES DE ACCIÓN DERECHA */
.nav-actions-right {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.65vw, 0.75rem);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  white-space: nowrap;
}

/* BOTÓN SOS CON BALIZA RADAR EN VIVO */
.sos-quick-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.52rem 1.15rem;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #FF6B6B;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  border-radius: 9999px;
  cursor: pointer;
  overflow: visible;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

/* Onda expansiva de baliza radar */
.sos-quick-btn::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 9999px;
  border: 1.5px solid rgba(239, 68, 68, 0.8);
  animation: radarBeaconPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes radarBeaconPing {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.3, 1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.3, 1.6);
    opacity: 0;
  }
}

.sos-quick-btn i {
  transition: transform 0.25s ease;
}

.sos-quick-btn:hover {
  background: var(--rojo-alerta);
  color: #FFFFFF;
  border-color: #EF4444;
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.8), 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px) scale(1.03);
}

.sos-quick-btn:hover i {
  animation: radarIconShake 0.6s ease infinite;
}

@keyframes radarIconShake {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-8deg); }
  75% { transform: scale(1.15) rotate(8deg); }
}

/* BOTÓN DESCARGA APK CON SHIMMER LÍQUIDO */
.btn-nav-download {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  background: var(--grad-sunset);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.84rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow-terracotta);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease;
}

/* Shimmer de luz líquida */
.btn-nav-download::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transform: rotate(25deg);
  animation: navCtaSweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes navCtaSweep {
  0%, 70% {
    left: -60%;
  }
  100% {
    left: 140%;
  }
}

.btn-nav-download:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 25px rgba(246, 94, 1, 0.7), 0 0 15px rgba(244, 230, 193, 0.4);
}

.btn-nav-download:active,
.sos-quick-btn:active {
  transform: translateY(0) scale(0.97);
}

/* EFECTO RIPPLE AL HACER CLIC EN BOTONES DE NAVEGACIÓN */
.nav-click-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: navRippleEffect 0.6s linear;
  pointer-events: none;
}

@keyframes navRippleEffect {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* BOTÓN HAMBURGUESA MÓVIL ANIMADO */
.mobile-nav-toggle {
  display: none;
  background: rgba(22, 93, 111, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease;
}

.mobile-nav-toggle:hover {
  background: rgba(246, 94, 1, 0.4);
  border-color: rgba(246, 94, 1, 0.6);
  transform: scale(1.05);
}

/* Contenedor de acciones derecha del navbar */
.nav-actions-right {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 0.6vw, 0.75rem);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   5. BOTONES DE ACCIÓN & ESTILOS HUD
   ========================================================================== */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.95rem 2rem;
  background: var(--grad-sunset);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(246, 94, 1, 0.45);
  transition: var(--trans-smooth);
  position: relative;
  overflow: hidden;
}

.btn-hero-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-hero-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 40px rgba(246, 94, 1, 0.7);
}

.btn-hero-primary:hover::after {
  transform: translateX(100%);
}

.btn-hero-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.8rem;
  background: rgba(22, 93, 111, 0.2);
  border: 1px solid rgba(244, 230, 193, 0.25);
  color: var(--arena-pinolera);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: var(--trans-smooth);
}

.btn-hero-glass:hover {
  background: rgba(34, 123, 145, 0.4);
  border-color: var(--arena-pinolera);
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(22, 93, 111, 0.5);
}

.btn-admin-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  background: rgba(22, 93, 111, 0.35);
  border: 1px solid var(--border-teal);
  color: var(--arena-pinolera);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--trans-fast);
}

.btn-admin-action:hover {
  background: var(--petroleo-teal);
  color: #FFFFFF;
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.4);
}

/* ==========================================================================
   6. HERO SECTION & SMARTPHONE SIMULATOR
   ========================================================================== */
.hero-section-pro {
  padding: 3rem 0 5rem;
  position: relative;
}

.hero-grid-2col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 1.1rem;
  background: rgba(22, 93, 111, 0.25);
  border: 1px solid rgba(45, 212, 191, 0.4);
  color: var(--petroleo-glow);
  border-radius: 9999px;
  font-size: 0.82rem;
  font-family: var(--font-tech);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 1.5rem;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--verde-neon);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--verde-neon);
  animation: pulse-ring 2s infinite;
}

.hero-headline {
  font-size: 3.25rem;
  letter-spacing: -0.5px;
  line-height: 1.12;
  margin-bottom: 1.4rem;
}

.hero-subtext {
  font-size: 1.12rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 620px;
}

.hero-cta-bar {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}

/* SMARTPHONE MOCKUP 3D */
.hero-visual-col {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.phone-frame-wrap {
  position: relative;
  width: 320px;
  perspective: 1200px;
}

.phone-frame-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 105%;
  background: radial-gradient(circle, rgba(246, 94, 1, 0.35) 0%, rgba(22, 93, 111, 0.25) 40%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
  border-radius: 50px;
}

.phone-hardware {
  width: 100%;
  background: #0D1527;
  border: 3px solid rgba(244, 230, 193, 0.25);
  border-radius: 42px;
  padding: 12px 10px;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(22, 93, 111, 0.45),
    inset 0 0 15px rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease;
}

.phone-hardware:hover {
  transform: translateY(-8px) rotateY(-4deg) rotateX(4deg);
}

.phone-notch {
  width: 100px;
  height: 18px;
  background: #000000;
  margin: 0 auto 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-lens {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #111e38;
  border: 1px solid #227B91;
}

.phone-screen {
  background: #0A0F1D;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 1rem 0.2rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-tech);
}

.phone-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.phone-app-logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: #FFFFFF;
}

.phone-app-bell {
  color: var(--terracotta-light);
  font-size: 0.85rem;
}

.phone-body-scroll {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 380px;
  overflow-y: hidden;
}

.phone-hero-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 140px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.phone-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.65rem;
  background: linear-gradient(0deg, rgba(7, 11, 20, 0.95) 0%, transparent 100%);
}

.phone-hero-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: var(--terracotta);
  color: #FFFFFF;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.phone-hero-title {
  font-weight: 800;
  font-size: 0.9rem;
  color: #FFFFFF;
}

.phone-hero-subtitle {
  font-size: 0.7rem;
  color: var(--arena-pinolera);
}

.phone-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.phone-mini-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(22, 93, 111, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.5rem 0.65rem;
}

.phone-mini-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.phone-mini-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(246, 94, 1, 0.25);
  color: var(--terracotta-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.phone-mini-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #FFFFFF;
}

.phone-mini-meta {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.phone-mini-price {
  font-family: var(--font-tech);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--verde-neon);
}

.phone-bottom-dock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.5rem 0.25rem;
  background: rgba(10, 15, 29, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dock-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.dock-tab.active {
  color: var(--terracotta-light);
}

.dock-tab i {
  font-size: 0.85rem;
}

/* ==========================================================================
   7. LOS 5 IMPACTOS DEL PROYECTO (HEX-GRID & CARDS)
   ========================================================================== */
.impacts-section-pro {
  padding: 6rem 0;
  position: relative;
}

.section-lead-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 4rem;
}

.badge-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  background: rgba(246, 94, 1, 0.15);
  border: 1px solid var(--border-glow);
  color: var(--terracotta-light);
  border-radius: 9999px;
  font-size: 0.8rem;
  font-family: var(--font-tech);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.2rem;
}

.section-headline {
  font-size: 2.6rem;
  margin-bottom: 1.1rem;
  color: #FFFFFF;
}

.section-subtext {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.75;
}

.impacts-hex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* ============================================================================
 * 🔄 INFINITE MOVING DYNAMIC GALLERY / MARQUEE (IMPACTOS BAQUEANO)
 * ============================================================================ */
.impacts-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1.5rem 0 2.5rem;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.impacts-marquee-track {
  display: flex;
  gap: 1.75rem;
  width: max-content;
  animation: infiniteImpactScroll 40s linear infinite;
  will-change: transform;
}

.impacts-marquee-track:hover,
.impacts-marquee-track.is-paused {
  animation-play-state: paused;
}

.impacts-marquee-track .impact-hex-card {
  flex: 0 0 clamp(320px, 32vw, 410px);
  width: clamp(320px, 32vw, 410px);
  margin: 0;
  user-select: none;
}

@keyframes infiniteImpactScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 0.875rem));
  }
}

.impacts-marquee-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.marquee-control-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--arena-pinolera, #F4E6C1);
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
  font-family: var(--font-tech);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  backdrop-filter: blur(12px);
}

.marquee-control-btn:hover {
  background: rgba(246, 94, 1, 0.2);
  border-color: #F65E01;
  color: #FFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(246, 94, 1, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .impacts-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}

.impact-hex-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: var(--trans-smooth);
  position: relative;
  overflow: hidden;
}

.impact-hex-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-sunset);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.impact-hex-card:hover {
  transform: translateY(-8px);
  border-color: rgba(246, 94, 1, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(246, 94, 1, 0.2);
}

.impact-hex-card:hover::before {
  opacity: 1;
}

.impact-number-tag {
  font-family: var(--font-tech);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--petroleo-glow);
  letter-spacing: 1.5px;
  margin-bottom: 1rem;
}

.impact-icon-circle {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(22, 93, 111, 0.3);
  border: 1px solid rgba(45, 212, 191, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--terracotta-light);
  margin-bottom: 1.5rem;
  transition: var(--trans-smooth);
}

.impact-hex-card:hover .impact-icon-circle {
  background: var(--grad-sunset);
  color: #FFFFFF;
  transform: scale(1.1) rotate(6deg);
  box-shadow: 0 0 20px rgba(246, 94, 1, 0.5);
}

.impact-card-title {
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
  color: #FFFFFF;
}

.impact-card-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.impact-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.impact-check-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--arena-pinolera);
}

.impact-check-list li i {
  color: var(--verde-neon);
  font-size: 0.8rem;
}

/* ==========================================================================
   8. CATÁLOGO DE DESTINOS & SHOWCASE MODULAR
   ========================================================================== */
.destinations-section-pro {
  padding: 6rem 0;
  position: relative;
  background-color: #060c18;
  background-image: 
    linear-gradient(180deg, rgba(8, 14, 26, 0.48) 0%, rgba(5, 8, 17, 0.18) 45%, rgba(5, 8, 17, 0.65) 100%),
    url('assets/images/footer1.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-top: 1px solid rgba(246, 94, 1, 0.35);
  border-bottom: 1px solid rgba(22, 93, 111, 0.35);
}

.destinations-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.dest-card-pro {
  border-radius: 24px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: var(--trans-smooth);
  display: flex;
  flex-direction: column;
}

.dest-card-pro:hover {
  transform: translateY(-8px);
  border-color: rgba(45, 212, 191, 0.5);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(22, 93, 111, 0.4);
}

.dest-card-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.dest-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.dest-card-pro:hover .dest-card-img-wrap img {
  transform: scale(1.08);
}

.dest-badge-corner {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.35rem 0.85rem;
  background: rgba(10, 15, 29, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-family: var(--font-tech);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--terracotta-light);
  text-transform: uppercase;
}

.dest-body-pro {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dest-location-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-family: var(--font-tech);
  color: var(--petroleo-glow);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.dest-name-title {
  font-size: 1.25rem;
  margin-bottom: 0.65rem;
  color: #FFFFFF;
}

.dest-description-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.dest-footer-strip {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dest-rating-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--arena-pinolera);
  font-weight: 700;
  font-size: 0.88rem;
  transition: var(--trans-fast);
}

.dest-card-pro:hover .dest-rating-gold {
  color: var(--terracotta-light);
  transform: translateX(5px);
}

/* ==========================================================================
   9. PORTAL DE DESCARGA DIRECTA DE APK
   ========================================================================== */
.download-section-hero {
  padding: 5rem 0;
  position: relative;
}

.download-portal-card {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.92) 0%, rgba(22, 93, 111, 0.35) 100%);
  border: 1px solid rgba(246, 94, 1, 0.4);
  border-radius: 32px;
  padding: 4rem 2.5rem;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(246, 94, 1, 0.25);
  position: relative;
  overflow: hidden;
}

.download-portal-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 250px;
  background: radial-gradient(circle, rgba(246, 94, 1, 0.3) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.apk-icon-center {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 22px;
  background: #0D1527;
  border: 2px solid rgba(244, 230, 193, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(246, 94, 1, 0.5);
  overflow: hidden;
}

.apk-icon-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.download-portal-title {
  font-size: 2.4rem;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.download-specs-bar {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 2rem 0 2.5rem;
}

.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 1rem;
  background: rgba(10, 15, 29, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  font-family: var(--font-tech);
  font-size: 0.8rem;
  color: var(--arena-pinolera);
}

.download-cta-double {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* ==========================================================================
   10. TARJETAS 3D FLIP CARD (COOPERATIVAS & ALOJAMIENTOS)
   ========================================================================== */
.flip-card-3d-wrap {
  perspective: 1000px;
  height: 380px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card-3d-wrap:hover .flip-card-inner,
.flip-card-3d-wrap.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.flip-card-front {
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  flex-direction: column;
}

.flip-card-back {
  background: linear-gradient(145deg, #0D1B2A 0%, #165D6F 100%);
  transform: rotateY(180deg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-color: rgba(45, 212, 191, 0.4);
}

/* ==========================================================================
   11. CALCULADORA DE RETORNO RURAL CAMPESINO (ROI)
   ========================================================================== */
.roi-calculator-box {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 2.5rem;
  backdrop-filter: blur(20px);
}

.calculator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.range-slider-wrap {
  margin: 1.5rem 0;
}

.range-slider-label {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-secondary);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--terracotta);
  cursor: pointer;
}

.roi-results-card {
  background: rgba(10, 15, 29, 0.9);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.15);
}

.roi-big-number {
  font-size: 3rem;
  font-family: var(--font-tech);
  font-weight: 900;
  color: var(--verde-neon);
  margin: 0.5rem 0;
}

/* ==========================================================================
   12. REPRODUCTOR DE MÚSICA FOLCLÓRICA
   ========================================================================== */
.folklore-player-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(246, 94, 1, 0.35);
  border-radius: 24px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.eq-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 35px;
}

.eq-bar {
  width: 4px;
  background: var(--terracotta-light);
  border-radius: 2px;
  animation: eq-bounce 1s infinite alternate ease-in-out;
}

.eq-bar:nth-child(1) { height: 60%; animation-delay: 0.1s; }
.eq-bar:nth-child(2) { height: 90%; animation-delay: 0.3s; }
.eq-bar:nth-child(3) { height: 40%; animation-delay: 0.2s; }
.eq-bar:nth-child(4) { height: 100%; animation-delay: 0.4s; }
.eq-bar:nth-child(5) { height: 75%; animation-delay: 0.15s; }

/* ==========================================================================
   13. MODALES HUD (SOS 24/7 & DESCARGA APK)
   ========================================================================== */
.modal-backdrop-pro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(7, 11, 20, 0.88);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1.5rem;
}

.modal-backdrop-pro.active {
  display: flex;
  animation: modal-fade-in 0.3s ease-out;
}

.modal-dialog-hud {
  background: #0B1323;
  border: 1px solid rgba(246, 94, 1, 0.4);
  border-radius: 28px;
  width: 100%;
  max-width: 580px;
  padding: 2.5rem;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 40px rgba(246, 94, 1, 0.25);
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: var(--trans-fast);
}

.modal-close-btn:hover {
  background: var(--rojo-alerta);
  color: #FFFFFF;
}

.gps-radar-hud {
  background: rgba(10, 15, 29, 0.85);
  border: 1px dashed rgba(45, 212, 191, 0.4);
  border-radius: 16px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  text-align: center;
}

.gps-coords-display {
  font-family: var(--font-tech);
  font-size: 1.15rem;
  color: var(--verde-neon);
  font-weight: 800;
  letter-spacing: 1px;
}

.emergency-phone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.emergency-phone-card {
  background: rgba(22, 93, 111, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1rem 0.5rem;
  text-align: center;
  transition: var(--trans-smooth);
}

.emergency-phone-card:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--rojo-alerta);
  transform: translateY(-3px);
}

/* ==========================================================================
   14. FOOTER INSTITUCIONAL ULTRA-FUTURISTA & HUD INTERACTIVO
   ========================================================================== */
/* ==========================================================================
   🧭 FOOTER INSTITUCIONAL — PANORAMA OFICIAL NICARAGUA & HUD DE ALTA GAMA
   --------------------------------------------------------------------------
   🎯 1. POR QUÉ (WHY / PROPÓSITO):
   - Enmarcar el pie de página de todo el ecosistema web Baqueano en la riqueza
     paisajística y soberanía de Nicaragua: volcanes sagrados, Lago Cocibolca,
     el Guardabarranco nacional, el café maduro y los petroglifos ancestrales.
   
   ⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
   - Fondo panorámico oficial 'footer-nicaragua-panorama.png' con gradiente
     semitransparente superior para garantizar máximo contraste y legibilidad.
   - Posicionamiento cover centrado en la base con acento en borde naranja (#F65E01).
   - Rejilla táctica HUD atenuada (opacity: 0.22) para permitir apreciar el arte.
   ========================================================================== */
.site-footer-pro {
  position: relative;
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(8, 14, 26, 0.18) 0%, rgba(5, 8, 17, 0.02) 40%, rgba(5, 8, 17, 0.32) 100%),
    url('assets/images/footer.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  border-top: 1px solid rgba(246, 94, 1, 0.45);
  padding: 4rem 0 2rem;
  overflow: hidden;
  z-index: 10;
}

/* Micro rejilla holográfica de fondo */
.site-footer-pro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(22, 93, 111, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 93, 111, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
  pointer-events: none;
  opacity: 0.12;
}

/* Luz ambiental reactiva que sigue al cursor */
.site-footer-pro::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(550px circle at var(--footer-mouse-x, 50%) var(--footer-mouse-y, 50%), rgba(246, 94, 1, 0.08), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.site-footer-pro:hover::after {
  opacity: 1;
}

/* Filamento de luz láser animado en el borde superior */
.footer-laser-scan {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(22, 93, 111, 0.8) 15%, 
    #F65E01 50%, 
    #F4E6C1 55%, 
    #F65E01 60%, 
    rgba(22, 93, 111, 0.8) 85%, 
    transparent 100%);
  background-size: 200% 100%;
  animation: footerLaserSweep 5s linear infinite;
  box-shadow: 0 0 15px rgba(246, 94, 1, 0.8), 0 0 30px rgba(22, 93, 111, 0.5);
  z-index: 3;
  pointer-events: none;
}

@keyframes footerLaserSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* CINTA HUD DE TELEMETRÍA SUPERIOR */
.footer-telemetry-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(22, 93, 111, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 2.5rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 2;
}

.hud-stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-tech);
  font-size: 0.76rem;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.hud-beacon-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4A7A5A;
  box-shadow: 0 0 10px #4A7A5A, 0 0 20px #4A7A5A;
  animation: hudLedPulse 1.8s ease-in-out infinite;
}

@keyframes hudLedPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.hud-label {
  color: var(--arena-dark);
  font-weight: 700;
  text-transform: uppercase;
}

.hud-val {
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: 0.8px;
}

/* COLUMNAS EN REJILLA RESPONSIVA CON TARJETAS GLASSMORPHIC */
.footer-columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.75rem;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 2;
}

.footer-col-brand,
.footer-col-links,
.footer-col-contact,
.footer-col-emergency,
.footer-col-badges {
  background: rgba(8, 14, 26, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1.4rem;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.footer-col-brand:hover,
.footer-col-links:hover,
.footer-col-contact:hover,
.footer-col-emergency:hover,
.footer-col-badges:hover {
  transform: translateY(-4px);
  border-color: rgba(246, 94, 1, 0.4);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(22, 93, 111, 0.25);
}

/* ENCABEZADOS DE COLUMNA CON CÓDIGO TÁCTICO CYBER */
.footer-col-header,
.footer-col-title {
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  color: var(--arena-pinolera);
  margin-bottom: 1.1rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col-header::before {
  content: '//';
  color: var(--terracotta);
  font-weight: 900;
}

.footer-col-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--grad-sunset);
  box-shadow: 0 0 8px rgba(246, 94, 1, 0.8);
}

.footer-bio-text {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* LISTA DE ENLACES CON MICRO-HOVER DINÁMICO */
.footer-link-list,
.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
}

.footer-link-list li a,
.footer-links-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.25s ease,
              background 0.25s ease,
              padding-left 0.25s ease;
  position: relative;
}

.footer-link-list li a::before {
  content: '›';
  color: var(--terracotta);
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.footer-link-list li a:hover,
.footer-links-list a:hover {
  color: #FFFFFF;
  background: rgba(22, 93, 111, 0.3);
  padding-left: 0.75rem;
  transform: translateX(4px);
  text-shadow: 0 0 8px rgba(244, 230, 193, 0.5);
}

.footer-link-list li a:hover::before {
  transform: translateX(2px);
  color: var(--arena-pinolera);
}

/* LÍNEAS DE AUXILIO SOS COMO BOTONES TÁCTICOS */
.footer-col-emergency {
  gap: 0.5rem;
}

.emergency-line-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--terracotta);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.45rem;
  cursor: pointer;
  user-select: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

.emergency-line-item:nth-child(2) { border-left-color: #EF4444; }
.emergency-line-item:nth-child(3) { border-left-color: #F65E01; }
.emergency-line-item:nth-child(4) { border-left-color: #3B82F6; }
.emergency-line-item:nth-child(5) { border-left-color: #4A7A5A; }

.emergency-line-item i {
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
  color: var(--arena-pinolera);
  transition: transform 0.25s ease, color 0.25s ease;
}

.emergency-line-item strong {
  color: var(--terracotta-light);
  font-family: var(--font-tech);
  font-weight: 800;
  letter-spacing: 0.5px;
  transition: color 0.25s ease;
}

.emergency-line-item:hover {
  transform: translateX(6px) scale(1.02);
  background: rgba(22, 93, 111, 0.35);
  border-color: rgba(246, 94, 1, 0.6);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(246, 94, 1, 0.3);
}

.emergency-line-item:hover i {
  transform: scale(1.2) rotate(6deg);
  color: #FFFFFF;
}

.emergency-line-item:hover strong {
  color: #FFFFFF;
  text-shadow: 0 0 8px rgba(246, 94, 1, 0.8);
}

/* BARRA INFERIOR CYBERNETIC HUD */
.footer-bottom-bar {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  position: relative;
  z-index: 2;
}

.footer-bottom-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(22, 93, 111, 0.4);
  border-radius: 9999px;
  color: var(--arena-pinolera);
  text-decoration: none;
  font-family: var(--font-tech);
  font-size: 0.78rem;
  font-weight: 700;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              color 0.25s ease;
}

.footer-bottom-bar a:hover {
  transform: translateY(-2px) scale(1.05);
  background: var(--grad-sunset);
  border-color: rgba(244, 230, 193, 0.6);
  color: #FFFFFF;
}

/* ============================================================================
   ESTILOS DEL FOOTER INSTITUCIONAL COMPLETO & PROFESIONAL
   ============================================================================ */

/* Tarjeta en Footer: Red de Anfitriones & Comercio Justo */
.footer-biz-register-card {
  position: relative;
  z-index: 2;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(22, 93, 111, 0.45);
  border-radius: 20px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 16px 45px rgba(0, 0, 0, 0.6), 0 0 35px rgba(22, 93, 111, 0.2);
  padding: 2.5rem 2.8rem;
  margin-bottom: 2.75rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.footer-biz-register-card:hover {
  border-color: rgba(246, 94, 1, 0.5);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 20px 55px rgba(0, 0, 0, 0.7), 0 0 45px rgba(246, 94, 1, 0.22);
}

.footer-biz-header-wrap {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.footer-biz-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  color: var(--arena-pinolera);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  position: relative;
}

.footer-biz-tag::before {
  content: '//';
  color: var(--terracotta);
  font-weight: 900;
}

.footer-biz-tag::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 2px;
  background: var(--grad-sunset);
  box-shadow: 0 0 10px rgba(246, 94, 1, 0.85);
}

.footer-biz-title {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 2.1rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0.8rem auto 0.7rem auto;
  letter-spacing: -0.5px;
}

.footer-biz-subtitle {
  font-size: 0.98rem;
  color: var(--arena-pinolera, #F4E6C1);
  line-height: 1.6;
  margin: 0 auto 1.6rem auto;
  max-width: 760px;
  opacity: 0.9;
}

.footer-biz-benefits-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  background: rgba(22, 93, 111, 0.16);
  border: 1px solid rgba(22, 93, 111, 0.35);
  border-radius: 14px;
  padding: 1rem 1.4rem;
  text-align: left;
}

.footer-biz-benefit-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85rem;
  color: #FFFFFF;
}

.footer-biz-benefit-item i {
  font-size: 1.15rem;
  color: var(--terracotta, #F65E01);
  flex-shrink: 0;
}

.biz-trigger-wrap {
  margin-top: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.biz-btn-toggle {
  font-size: 1.08rem;
  padding: 1.2rem 2.8rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(246, 94, 1, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(246, 94, 1, 0.6);
}

.biz-btn-toggle:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 42px rgba(246, 94, 1, 0.6);
}

.biz-btn-toggle .btn-arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.biz-btn-toggle.is-open {
  background: linear-gradient(135deg, #165D6F 0%, #0F172A 100%);
  border-color: rgba(45, 212, 191, 0.5);
  box-shadow: 0 10px 25px rgba(22, 93, 111, 0.4);
}

.biz-btn-toggle.is-open .btn-arrow {
  transform: rotate(90deg);
}

.biz-form-collapse {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, margin-top 0.45s ease;
  margin-top: 0;
  pointer-events: none;
}

.biz-form-collapse.is-expanded {
  max-height: 5000px;
  opacity: 1;
  margin-top: 2.5rem;
  overflow: visible;
  pointer-events: auto;
}

.biz-form-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(22, 93, 111, 0.22);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 14px;
  padding: 1rem 1.4rem;
  margin-bottom: 2rem;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.biz-form-header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.biz-btn-close-form {
  background: rgba(15, 23, 42, 0.65);
  color: var(--arena-pinolera, #F4E6C1);
  border: 1px solid rgba(244, 230, 193, 0.25);
  padding: 0.45rem 1rem;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s ease;
}

.biz-btn-close-form:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #EF4444;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.biz-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
}

.biz-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.biz-col-full {
  grid-column: 1 / -1;
}

.biz-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--arena-pinolera, #F4E6C1);
  font-size: 0.88rem;
  font-weight: 600;
}

.biz-label i {
  color: var(--petroleo-glow, #2DD4BF);
  font-size: 0.9rem;
}

.biz-label .req {
  color: #EF4444;
  font-weight: 800;
}

.biz-char-counter {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted, #94A3B8);
  font-family: var(--font-tech, monospace);
}

.biz-input,
.biz-select,
.biz-textarea {
  width: 100%;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(244, 230, 193, 0.2);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-sizing: border-box;
}

.biz-input:focus,
.biz-select:focus,
.biz-textarea:focus {
  outline: none;
  border-color: var(--terracotta, #F65E01);
  box-shadow: 0 0 0 3px rgba(246, 94, 1, 0.25);
  background: rgba(15, 23, 42, 0.95);
}

.biz-input::placeholder,
.biz-textarea::placeholder {
  color: rgba(244, 230, 193, 0.4);
}

.biz-textarea {
  min-height: 100px;
  resize: vertical;
}

.biz-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F4E6C1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.5rem;
}

.biz-select option {
  background: #0F172A;
  color: #FFFFFF;
}

.biz-input.has-error,
.biz-select.has-error,
.biz-textarea.has-error {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.biz-error-msg {
  color: #EF4444;
  font-size: 0.78rem;
  font-weight: 500;
  min-height: 1rem;
}

.biz-file-dropzone {
  position: relative;
  border: 2px dashed rgba(22, 93, 111, 0.5);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  background: rgba(15, 23, 42, 0.5);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.biz-file-dropzone:hover {
  border-color: var(--terracotta, #F65E01);
  background: rgba(15, 23, 42, 0.75);
}

.biz-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.biz-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--arena-pinolera, #F4E6C1);
  pointer-events: none;
}

.biz-upload-placeholder i {
  font-size: 2rem;
  color: var(--terracotta, #F65E01);
}

.biz-photo-preview {
  display: none;
  position: relative;
  max-width: 280px;
  margin: 0 auto;
}

.biz-photo-preview img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--petroleo-glow, #2DD4BF);
}

.biz-btn-remove-photo {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #EF4444;
  color: #FFFFFF;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.biz-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.biz-checkbox-label input[type="checkbox"] {
  display: none;
}

.biz-checkbox-custom {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid rgba(244, 230, 193, 0.4);
  border-radius: 5px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: rgba(15, 23, 42, 0.8);
}

.biz-checkbox-label input[type="checkbox"]:checked + .biz-checkbox-custom {
  background: var(--terracotta, #F65E01);
  border-color: var(--terracotta, #F65E01);
}

.biz-checkbox-label input[type="checkbox"]:checked + .biz-checkbox-custom::after {
  content: '✓';
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 900;
}

.biz-checkbox-text {
  color: var(--arena-pinolera, #F4E6C1);
  font-size: 0.9rem;
  line-height: 1.5;
}

.biz-submit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.biz-btn-submit {
  background: linear-gradient(135deg, var(--terracotta, #F65E01) 0%, #D84E00 100%);
  color: #FFFFFF;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  padding: 1.15rem 2.8rem;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(246, 94, 1, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.biz-btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(246, 94, 1, 0.55);
  filter: brightness(1.05);
}

.biz-btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.biz-security-note {
  font-size: 0.82rem;
  color: var(--arena-pinolera, #F4E6C1);
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.biz-security-note i {
  color: var(--petroleo-glow, #2DD4BF);
}

@media (max-width: 992px) {
  .footer-biz-benefits-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-biz-register-card {
    padding: 1.8rem 1.2rem;
    border-radius: 16px;
  }
  .footer-biz-title {
    font-size: 1.55rem;
  }
  .footer-biz-benefits-strip {
    grid-template-columns: 1fr;
    padding: 0.85rem;
  }
  .biz-form-grid {
    grid-template-columns: 1fr;
  }
  .biz-btn-submit {
    width: 100%;
    justify-content: center;
  }
}

/* Franja Superior: Boletín & Redes Oficiales */
.footer-top-utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1.8rem 2.2rem;
  background: radial-gradient(circle at 12% 20%, rgba(22, 93, 111, 0.45) 0%, transparent 60%),
              radial-gradient(circle at 88% 80%, rgba(246, 94, 1, 0.3) 0%, transparent 60%),
              rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(244, 230, 193, 0.2);
  border-radius: 22px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-bottom: 2.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}

.footer-top-utility-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(246, 94, 1, 0.8), rgba(244, 230, 193, 0.8), rgba(22, 93, 111, 0.8), transparent);
  pointer-events: none;
}

.footer-newsletter-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 560px;
  flex: 1;
  min-width: 290px;
}

.footer-newsletter-title {
  font-family: var(--font-tech);
  font-size: 0.98rem;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  letter-spacing: 0.6px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.footer-newsletter-title i {
  color: var(--terracotta);
  font-size: 1.15rem;
  filter: drop-shadow(0 0 8px rgba(246, 94, 1, 0.6));
}

.footer-newsletter-desc {
  font-size: 0.84rem;
  color: rgba(244, 230, 193, 0.88);
  line-height: 1.5;
  margin: 0;
}

.footer-newsletter-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  background: rgba(10, 15, 29, 0.85);
  border: 1.5px solid rgba(244, 230, 193, 0.22);
  border-radius: 9999px;
  padding: 5px 6px 5px 14px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.footer-newsletter-form:focus-within {
  border-color: var(--terracotta);
  box-shadow: 0 0 16px rgba(246, 94, 1, 0.45), inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.footer-newsletter-input {
  flex: 1;
  padding: 0.55rem 0.6rem;
  border-radius: 0;
  border: none;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--font-main);
  font-size: 0.88rem;
  font-weight: 500;
  outline: none;
}

.footer-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.84rem;
}

.footer-newsletter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  background: linear-gradient(135deg, #F65E01 0%, #D45000 100%);
  color: #FFFFFF;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(246, 94, 1, 0.45);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              background 0.22s ease;
}

.footer-newsletter-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 22px rgba(246, 94, 1, 0.7);
  background: linear-gradient(135deg, #FF7315 0%, #F65E01 100%);
}

.footer-newsletter-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Redes Sociales Oficiales */
.footer-social-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
}

.footer-social-label {
  font-family: var(--font-tech);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--arena-pinolera);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-social-label i {
  color: var(--terracotta);
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.footer-social-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(244, 230, 193, 0.2);
  color: var(--arena-pinolera);
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: all 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.footer-social-btn:hover {
  transform: translateY(-4px) scale(1.14);
  color: #FFFFFF;
  border-color: var(--terracotta);
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--petroleo) 100%);
  box-shadow: 0 8px 22px rgba(246, 94, 1, 0.55);
}

.footer-social-btn[title="Facebook Oficial"]:hover {
  background: #1877F2;
  border-color: #1877F2;
  box-shadow: 0 8px 22px rgba(24, 119, 242, 0.6);
}

.footer-social-btn[title="Instagram Oficial"]:hover {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
  border-color: #DD2A7B;
  box-shadow: 0 8px 22px rgba(221, 42, 123, 0.6);
}

.footer-social-btn[title="X (Twitter) Oficial"]:hover {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.3);
}

.footer-social-btn[title="YouTube Documentales"]:hover {
  background: #FF0000;
  border-color: #FF0000;
  box-shadow: 0 8px 22px rgba(255, 0, 0, 0.6);
}

.footer-social-btn[title="TikTok Oficial"]:hover {
  background: #000000;
  border-color: #00F2FE;
  box-shadow: 0 8px 22px rgba(0, 242, 254, 0.5);
}

.footer-social-btn[title="LinkedIn Institucional"]:hover {
  background: #0A66C2;
  border-color: #0A66C2;
  box-shadow: 0 8px 22px rgba(10, 102, 194, 0.6);
}

.footer-social-btn[title="Canal WhatsApp Baqueano"]:hover {
  background: #25D366;
  border-color: #25D366;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.6);
}

/* Sellos de Confianza y Soberanía */
.footer-trust-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.footer-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  background: rgba(22, 93, 111, 0.25);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 6px;
  font-family: var(--font-tech);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--petroleo-glow);
  letter-spacing: 0.5px;
}

/* Datos de Contacto Directo */
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.footer-contact-item i {
  font-size: 0.95rem;
  color: var(--terracotta);
  margin-top: 0.15rem;
  width: 16px;
  text-align: center;
}

.footer-contact-item a {
  color: var(--arena-pinolera);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-item a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

/* Bloque Legal Stack */
.footer-legal-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  padding: 1rem 0;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  color: var(--text-muted);
}

.footer-legal-stack a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-stack a:hover {
  color: var(--arena-pinolera);
  text-decoration: underline;
}

.footer-legal-stack span.separator {
  color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
  .footer-top-utility-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .footer-social-section {
    align-items: flex-start;
  }
}

/* ==========================================================================
   15. ANIMACIONES KEYFRAMES
   ========================================================================== */
@keyframes orb-float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vw, 6vh) scale(1.15); }
}

@keyframes orb-float-reverse {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-6vw, -8vh) scale(1.2); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 255, 157, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 157, 0); }
}

@keyframes pulse-sos-border {
  0%, 100% { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); }
  50% { border-color: rgba(239, 68, 68, 1); box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }
}

@keyframes eq-bounce {
  0% { height: 20%; }
  100% { height: 100%; }
}

@keyframes modal-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   16. MEDIA QUERIES RESPONSIVAS MULTI-DISPOSITIVO (TV 40"+, 4K, LAPTOP, TABLET, MÓVIL)
   ========================================================================== */

/* --- PANTALLAS GRANDES Y TELEVISORES (40"+, 4K, 1440p, Ultrawide: min-width: 1800px) --- */
@media (min-width: 1800px) {
  .container {
    max-width: 1840px;
    padding: 0 3rem;
  }

  .hero-headline {
    font-size: clamp(3.2rem, 3.8vw, 4.4rem);
  }

  .hero-subtext {
    font-size: 1.25rem;
    max-width: 760px;
  }

  .destinations-showcase-grid {
    gap: 2.5rem;
  }

  .impact-hex-card {
    padding: 2.5rem;
  }

  .brand-title {
    font-size: 1.45rem;
  }

  .nav-links-menu a {
    font-size: 0.95rem;
    padding: 0.5rem 1.1rem;
  }
}

/* --- COMPUTADORAS Y LAPTOPS ESTÁNDAR (1201px a 1400px) --- */
@media (max-width: 1400px) and (min-width: 1201px) {
  .nav-inner {
    gap: 0.6rem;
  }

  .brand-title {
    font-size: 1.15rem;
  }

  .brand-tagline {
    font-size: 0.65rem;
    letter-spacing: 2px;
  }

  .nav-links-menu {
    padding: 0.25rem 0.35rem;
    gap: 0.15rem;
  }

  .nav-links-menu a {
    padding: 0.38rem 0.6rem;
    font-size: 0.78rem;
  }

  .sos-quick-btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.76rem;
  }

  .btn-nav-download {
    padding: 0.48rem 0.95rem;
    font-size: 0.78rem;
  }
}

/* --- TABLETS, NETBOOKS Y VENTANAS COMPACTAS (≤ 1200px) --- */
@media (max-width: 1200px) {
  .nav-links-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 1rem;
    right: 1rem;
    background: rgba(10, 15, 29, 0.97);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(246, 94, 1, 0.35);
    border-radius: 20px;
    padding: 1.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(22, 93, 111, 0.3);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px) scale(0.98);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-links-menu.mobile-open {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .nav-links-menu.mobile-open a {
    padding: 0.7rem 1rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    text-decoration: none;
  }

  .nav-links-menu.mobile-open a .nav-item-content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .nav-links-menu.mobile-open a .nav-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(22, 93, 111, 0.35);
    border: 1px solid rgba(246, 94, 1, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.28s ease;
  }

  .nav-links-menu.mobile-open a .nav-icon-box .nav-icon {
    font-size: 1.05rem;
    color: var(--terracotta-light);
    transition: all 0.25s ease;
  }

  .nav-links-menu.mobile-open a .nav-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
  }

  .nav-links-menu.mobile-open a .nav-label {
    font-family: var(--font-tech);
    font-weight: 800;
    font-size: 0.92rem;
    color: #FFFFFF;
    letter-spacing: 0.5px;
  }

  .nav-links-menu.mobile-open a .nav-sublabel {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.2;
    transition: color 0.25s ease;
  }

  .nav-links-menu.mobile-open a .nav-right-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-links-menu.mobile-open a .nav-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    background: rgba(246, 94, 1, 0.2);
    border: 1px solid rgba(246, 94, 1, 0.4);
    border-radius: 9999px;
    font-family: var(--font-tech);
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--terracotta-light);
  }

  .nav-links-menu.mobile-open a .nav-item-badge.live {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    color: #4A7A5A;
  }

  .nav-links-menu.mobile-open a .nav-arrow {
    display: inline-flex;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
  }

  .nav-links-menu.mobile-open a:hover,
  .nav-links-menu.mobile-open a.active {
    background: linear-gradient(135deg, rgba(22, 93, 111, 0.55) 0%, rgba(246, 94, 1, 0.45) 100%);
    border-color: rgba(246, 94, 1, 0.75);
    color: #FFFFFF;
    transform: translateX(8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(246, 94, 1, 0.35);
  }

  .nav-links-menu.mobile-open a:hover .nav-icon-box,
  .nav-links-menu.mobile-open a.active .nav-icon-box {
    background: var(--terracotta);
    border-color: var(--arena-pinolera);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 12px rgba(246, 94, 1, 0.6);
  }

  .nav-links-menu.mobile-open a:hover .nav-icon-box .nav-icon,
  .nav-links-menu.mobile-open a.active .nav-icon-box .nav-icon {
    color: #FFFFFF;
  }

  .nav-links-menu.mobile-open a:hover .nav-sublabel,
  .nav-links-menu.mobile-open a.active .nav-sublabel {
    color: var(--arena-pinolera);
  }

  .nav-links-menu.mobile-open a:hover .nav-arrow,
  .nav-links-menu.mobile-open a.active .nav-arrow {
    transform: translateX(4px);
    color: #FFFFFF;
  }

  .nav-links-menu.mobile-open .nav-pill-indicator {
    display: none !important;
  }

  .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .hero-grid-2col {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }

  .hero-content-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-subtext {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-bar {
    justify-content: center;
  }

  .impacts-hex-grid,
  .destinations-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-columns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- DISPOSITIVOS MÓVILES (≤ 768px) --- */
@media (max-width: 768px) {
  .hero-headline {
    font-size: clamp(2rem, 6.5vw, 2.6rem);
  }

  .hero-cta-bar {
    flex-direction: column;
    width: 100%;
    gap: 0.85rem;
  }

  .btn-hero-primary,
  .btn-hero-glass {
    width: 100%;
    justify-content: center;
  }

  .impacts-hex-grid,
  .destinations-showcase-grid {
    grid-template-columns: 1fr;
  }

  .calculator-grid {
    grid-template-columns: 1fr;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr;
  }

  .sos-quick-btn {
    padding: 0.42rem 0.75rem;
    font-size: 0.74rem;
  }

  .btn-nav-download {
    padding: 0.45rem 0.85rem;
    font-size: 0.76rem;
  }
}

/* --- SMARTPHONES COMPACTOS (≤ 480px) --- */
@media (max-width: 480px) {
  .nav-inner {
    gap: 0.4rem;
  }

  .brand-box {
    gap: 0.5rem;
  }

  .brand-logo-img {
    width: 36px;
    height: 36px;
  }

  .brand-title {
    font-size: 1.05rem;
    letter-spacing: 1px;
  }

  .brand-tagline {
    font-size: 0.58rem;
    letter-spacing: 1.5px;
  }

  .sos-quick-btn {
    padding: 0.38rem 0.6rem;
    font-size: 0.7rem;
  }

  .btn-nav-download {
    padding: 0.4rem 0.75rem;
    font-size: 0.72rem;
  }

  .mobile-nav-toggle {
    padding: 0.45rem 0.65rem;
    font-size: 1rem;
  }
}


/* ==========================================================================
   MODULAR SUBSYSTEMS INCLUDED DIRECTLY
   ========================================================================== */


/* --- MODULE: colors.css --- */
/*
============================================================================
🧭 BAQUEANO NICARAGUA — MÓDULO DE COLORIMETRÍA & GRADIENTES (COLORS.CSS)
============================================================================

🎯 1. POR QUÉ (WHY / PROPÓSITO):
- Definir la identidad cromática oficial de Baqueano Nicaragua, inspirada en
  la geografía volcánica, arcilla de San Juan de Oriente y la arena pinolera.
- Proveer una fuente única de verdad para paletas, contrastes WCAG AAA y
  sombras resplandecientes en modo oscuro sin valores dispersos.

⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
- Variables CSS3 (:root) sincronizadas con lib/core/theme/app_colors.dart y app_gradients.dart.
- Tonos semánticos: Petróleo Teal, Terracota Fuego, Arena Pinolera, Noche y Verde Selva.

📦 3. QUÉ (WHAT / TOKENS EXPUESTOS):
- --petroleo-teal, --terracotta, --arena-pinolera, --bg-dark, --grad-sunset, --grad-volcano.
============================================================================
*/

:root {
  /* --- PALETA OFICIAL BAQUEANO (Alineada con AppColors) --- */
  --petroleo-teal: #165D6F;
  --petroleo-light: #227B91;
  --petroleo-dark: #0C3843;

  --terracotta: #F65E01;
  --terracotta-light: #FF7B26;
  --terracotta-dark: #BF4800;

  --arena-pinolera: #F4E6C1;
  --arena-light: #FCF6E8;
  --arena-dark: #E5D2A0;

  --oro-noble: #D4AF37;
  --oro-light: #F4E6C1;

  --bg-dark: #0F172A;
  --bg-darker: #080D1A;
  --bg-surface: #132438;
  --bg-card: rgba(22, 93, 111, 0.16);
  --bg-card-hover: rgba(34, 123, 145, 0.28);

  --verde-selva: #2E7D32;
  --verde-neon: #4A7A5A;
  --rojo-alerta: #EF4444;
  --azul-info: #38BDF8;

  /* --- TEXTO Y BORDES --- */
  --text-primary: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-muted: #94A3B8;
  --text-cream: #F4E6C1;

  --border-subtle: rgba(244, 230, 193, 0.12);
  --border-glow: rgba(246, 94, 1, 0.35);
  --border-teal: rgba(34, 123, 145, 0.35);

  /* --- GRADIENTES ATMOSFÉRICOS OFICIALES --- */
  --grad-sunset: linear-gradient(135deg, #F65E01 0%, #FF7B26 50%, #F4E6C1 100%);
  --grad-volcano: linear-gradient(180deg, #0C3843 0%, #165D6F 45%, #0F172A 100%);
  --grad-glass: linear-gradient(135deg, rgba(34, 123, 145, 0.22) 0%, rgba(22, 93, 111, 0.08) 100%);
  --grad-gold: linear-gradient(135deg, #D4AF37 0%, #F4E6C1 100%);
  --grad-surface: linear-gradient(180deg, #132438 0%, #0F172A 100%);
  --grad-admin: linear-gradient(180deg, rgba(12, 56, 67, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);

  /* --- SOMBRAS Y RESPLANDORES --- */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow-terracotta: 0 8px 30px rgba(246, 94, 1, 0.35);
  --shadow-glow-teal: 0 8px 30px rgba(22, 93, 111, 0.4);
  --shadow-glow-gold: 0 8px 24px rgba(212, 175, 55, 0.3);

  /* --- TRANSICIONES --- */
  --trans-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* --- MODULE: typography.css --- */
/*
============================================================================
🧭 BAQUEANO NICARAGUA — MÓDULO DE TIPOGRAFÍA & JERARQUÍA (TYPOGRAPHY.CSS)
============================================================================

🎯 1. POR QUÉ (WHY / PROPÓSITO):
- Establecer una jerarquía tipográfica legible, contundente y moderna que
  refleje la fuerza de la geografía nicaragüense y la accesibilidad para el explorador.
- Evitar fuentes predeterminadas del navegador y garantizar consistencia con la app móvil.

⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
- Familias oficiales: Montserrat (encabezados display), Space Grotesk (datos técnicos y badges),
  e Inter (cuerpo de texto y legibilidad general).
- Escala tipográfica fluida y contrastes óptimos.

📦 3. QUÉ (WHAT / CLASES & TOKENS):
- --font-sans, --font-display, --font-tech.
- .text-gradient-fire, .section-headline, .section-subtext, .badge-section-pill.
============================================================================
*/

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', sans-serif;
  --font-tech: 'Space Grotesk', sans-serif;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p {
  color: var(--text-muted);
}

.text-gradient-fire {
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-lead-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

.badge-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(246, 94, 1, 0.15);
  border: 1px solid var(--border-glow);
  color: var(--terracotta-light);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-family: var(--font-tech);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.section-headline {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.section-subtext {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
}


/* --- MODULE: layout.css --- */
/*
============================================================================
🧭 BAQUEANO NICARAGUA — MÓDULO DE ESTRUCTURA & MAQUETACIÓN (LAYOUT.CSS)
============================================================================

🎯 1. POR QUÉ (WHY / PROPÓSITO):
- Definir el armazón responsivo, la barra de navegación institucional con
  enlaces a todas las páginas y el pie de página común con líneas de emergencia.
- Garantizar que la navegación entre páginas separadas sea consistente, fluida y ergonómica.

⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
- Flexbox y CSS Grid responsivo con SafeAreas y desenfoque Glassmorphism.
- Navbar fijado con backdrop-filter y sombras dinámicas al scroll.

📦 3. QUÉ (WHAT / SELECTORES EXPUESTOS):
- .main-navbar, .nav-inner, .brand-box, .nav-links-menu, .container, .site-footer-pro.
============================================================================
*/

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-dark);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: -20%;
  left: -10%;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 93, 111, 0.35) 0%, transparent 70%);
  filter: blur(100px);
  z-index: -2;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 94, 1, 0.18) 0%, transparent 70%);
  filter: blur(120px);
  z-index: -2;
  pointer-events: none;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--trans-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.5vw, 2.5rem);
}

.page-wrapper {
  padding-top: 6rem;
  padding-bottom: 5rem;
  min-height: 80vh;
}

/* ==========================================================================
   BARRA DE NAVEGACIÓN INSTITUCIONAL (GESTIONADA EN SECCIÓN 4 DE ESTILOS)
   ========================================================================== */
/* Los estilos interactivos, baliza SOS y gliding pill se consolidan en la sección 4 */

/* ==========================================================================
   FOOTER INSTITUCIONAL COMPARTIDO (GESTIONADO EN SECCIÓN 14)
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-columns-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 680px) {
  .footer-columns-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .footer-telemetry-hud {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}


/* --- MODULE: components.css --- */
/*
============================================================================
🧭 BAQUEANO NICARAGUA — MÓDULO DE COMPONENTES DE INTERFAZ (COMPONENTS.CSS)
============================================================================

🎯 1. POR QUÉ (WHY / PROPÓSITO):
- Definir los bloques de construcción reutilizables de la interfaz de usuario:
  botones Sunset, tarjetas Glassmorphism, modales de auxilio SOS y APK,
  simulador de smartphone y tablas de datos.
- Mantener consistencia visual y técnica en todas las páginas del ecosistema.

⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
- Clases modulares independientes con aceleración por GPU.
- Estándar libre de advertencias y efectos hápticos visuales.

📦 3. QUÉ (WHAT / COMPONENTES EXPUESTOS):
- .btn-hero-primary, .btn-hero-glass, .sos-quick-btn, .modal-backdrop-pro, .phone-hardware.
============================================================================
*/

/* BOTONES OFICIALES */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.8rem;
  background: var(--grad-sunset);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 14px;
  border: none;
  box-shadow: var(--shadow-glow-terracotta);
  cursor: pointer;
  transition: var(--trans-smooth);
}

.btn-hero-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 35px rgba(246, 94, 1, 0.6);
}

.btn-hero-glass {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.6rem;
  background: rgba(22, 93, 111, 0.25);
  border: 1px solid var(--border-subtle);
  color: var(--arena-pinolera);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  transition: var(--trans-smooth);
}

.btn-hero-glass:hover {
  background: rgba(34, 123, 145, 0.35);
  border-color: var(--arena-pinolera);
  transform: translateY(-2px);
}

.btn-admin-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  background: rgba(22, 93, 111, 0.35);
  border: 1px solid var(--border-teal);
  color: var(--arena-pinolera);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--trans-fast);
}

.btn-admin-action:hover {
  background: var(--petroleo-teal);
  color: #FFFFFF;
}

.btn-broadcast-alert {
  background: var(--grad-sunset);
  color: #FFFFFF;
  border: none;
  box-shadow: var(--shadow-glow-terracotta);
}

.btn-nav-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: var(--grad-sunset);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: 9999px;
  border: none;
  box-shadow: var(--shadow-glow-terracotta);
  cursor: pointer;
  transition: var(--trans-smooth);
}

.btn-nav-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(246, 94, 1, 0.5);
}

/* BOTÓN DE EMERGENCIA SOS EN SENDERO */
.sos-quick-btn {
  background: var(--rojo-alerta);
  color: #FFFFFF;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
  animation: pulseSos 2s infinite;
}

@keyframes pulseSos {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* MODALES OFICIALES (GLASSMORPHISM) */
.modal-backdrop-pro {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: var(--trans-smooth);
}

.modal-backdrop-pro.active {
  opacity: 1;
  visibility: visible;
}

.modal-card-dialog {
  background: var(--grad-admin);
  border: 2px solid var(--border-glow);
  border-radius: 32px;
  width: 100%;
  max-width: 580px;
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: scale(0.94);
  transition: var(--trans-bounce);
}

.modal-backdrop-pro.active .modal-card-dialog {
  transform: scale(1);
}

/* 🎯 POR QUÉ: (1) el modal "Registrar mi negocio" se abre con .is-open, pero
      solo .active lo mostraba: el botón parecía no funcionar. (2) Cerrado, su
      formulario forzaba visibility:visible (index.css) y, como capa fija e
      invisible, se quedaba con los clics del centro de la pantalla: enlaces
      del footer, tarjetas y botones de la portada "no respondían".
   ⚙️ CÓMO: .is-open equivale a .active; con el modal cerrado ningún
      descendiente es visible ni recibe eventos.
   📦 QUÉ: modales .modal-backdrop-pro coherentes en todo el sitio. */
.modal-backdrop-pro.is-open { opacity: 1; visibility: visible; }
.modal-backdrop-pro.is-open .modal-card-dialog { transform: scale(1); }
.modal-backdrop-pro:not(.active):not(.is-open) { pointer-events: none; }
.modal-backdrop-pro:not(.active):not(.is-open) * { visibility: hidden !important; pointer-events: none !important; }

.modal-close-x {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #FFFFFF;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--trans-fast);
}

.modal-close-x:hover {
  background: var(--terracotta);
}

.sos-modal-dialog {
  background: #0F172A;
  border: 2px solid var(--rojo-alerta);
  border-radius: 28px;
  padding: 2.5rem;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 20px 50px rgba(239, 68, 68, 0.35);
  position: relative;
}

.sos-lines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.sos-phone-card {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 14px;
  padding: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #FFFFFF;
  text-decoration: none;
  transition: var(--trans-fast);
}

.sos-phone-card:hover {
  background: var(--rojo-alerta);
  transform: translateY(-2px);
}

/* SIMULADOR DE SMARTPHONE */
.phone-mockup-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.phone-glow-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, rgba(246, 94, 1, 0.25) 0%, rgba(22, 93, 111, 0.2) 60%, transparent 80%);
  filter: blur(60px);
  z-index: 0;
}

.phone-hardware {
  position: relative;
  z-index: 1;
  width: 320px;
  height: 640px;
  background: #020617;
  border-radius: 46px;
  padding: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), inset 0 0 0 2px rgba(244, 230, 193, 0.2);
  border: 4px solid #1E293B;
}

.phone-notch-island {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 20px;
  background: #0F172A;
  border-radius: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.notch-camera {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1E293B;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--grad-volcano);
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.phone-status-bar {
  padding: 1.4rem 1.2rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.phone-app-header {
  padding: 0.4rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.phone-app-logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: #FFFFFF;
}

.phone-app-bell {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--arena-pinolera);
}

.phone-body-scroll {
  flex: 1;
  padding: 0.8rem 1.1rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.phone-body-scroll::-webkit-scrollbar { display: none; }

.phone-hero-card {
  position: relative;
  height: 175px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.phone-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(15, 23, 42, 0.95) 100%);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.phone-hero-badge {
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 800;
  background: var(--terracotta);
  color: #FFFFFF;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.phone-hero-title {
  font-size: 1.05rem;
  color: #FFFFFF;
  font-weight: 800;
}

.phone-hero-subtitle {
  font-size: 0.68rem;
  color: var(--arena-pinolera);
}

.phone-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.phone-mini-card {
  background: rgba(22, 93, 111, 0.25);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(8px);
}

.phone-mini-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.phone-mini-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--grad-sunset);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.8rem;
}

.phone-mini-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #FFFFFF;
}

.phone-mini-meta {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.phone-mini-price {
  font-family: var(--font-tech);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--arena-pinolera);
}

.phone-bottom-dock {
  background: rgba(12, 56, 67, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
  padding: 0.6rem 0.8rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.dock-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--text-muted);
  font-size: 0.65rem;
}

.dock-tab.active {
  color: var(--terracotta-light);
}

.dock-tab i {
  font-size: 1rem;
}


/* --- MODULE: modules.css --- */
/*
============================================================================
🧭 BAQUEANO ECOSYSTEM — MÓDULOS DE ESTILO ESPECIALIZADOS (modules.css)
============================================================================

🎯 1. POR QUÉ (WHY / PROPÓSITO):
- Proporcionar estilos visuales específicos y componentes de interfaz dedicados
  para cada una de las experiencias del ecosistema Baqueano (Catálogo de Destinos,
  Línea de Tiempo Histórica, Decálogo y Denuncias Ambientales, Gastronomía Ancestral,
  Reproductor Folclórico 1-Toque, Tarjetas 3D 180° de Aliados, Calculadora de Retorno
  Rural Campesino, Pasaporte Ético y Baqueano Ops Center en tiempo real).
- Garantizar que cada módulo mantenga la identidad estética oficial de Baqueano:
  Petróleo Teal (#165D6F), Naranja Fuego (#F65E01), Arena Pinolera (#F4E6C1) y
  Noche Profunda (#0F172A) con efectos de glassmorphism y microinteracciones fluidas.

⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
- Se organiza en bloques modulares CSS3 aislados con selectores semánticos.
- Implementa transformaciones 3D con perspective: 1000px y preserve-3d para
  las tarjetas giratorias de cooperativas y alojamientos comunitarios.
- Aplica CSS Grid dinámico con breakpoints fluidos para móviles, tablets y escritorios.
- Se integra sin colisiones a través del archivo central styles.css mediante @import.

📦 3. QUÉ (WHAT / ENTREGABLES & FUNCIONALIDAD):
- Clases para Los 5 Impactos Comunitarios.
- Clases para el Catálogo de Destinos Protegidos con filtrado dinámico.
- Clases para la Línea de Tiempo de 7 Periodos Históricos y Explorador de 17 Territorios.
- Clases para el Decálogo Verde y Formulario de Denuncias con Georreferenciación.
- Clases para la Vitrina de Gastronomía Ancestral y Milpa Pinolera.
- Clases para el Centro de Música Folclórica con ecualizador visual.
- Clases para las Tarjetas 3D Flip Card de Cooperativas Locales.
- Clases para la Calculadora de Retorno Campesino vs Plataformas Foráneas.
- Clases para el Asistente Baqueano AI y Chatbot Comunitario.
- Clases para el Panel Administrativo en Tiempo Real (Baqueano Ops Center).
============================================================================
*/

/* --- LOS 5 IMPACTOS DEL PROYECTO BAQUEANO --- */
.impacts-section-pro {
  padding: 6rem 0;
  position: relative;
}

.section-lead-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 4rem;
}

.badge-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  background: rgba(246, 94, 1, 0.15);
  border: 1px solid var(--border-glow);
  color: var(--terracotta-light);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-family: var(--font-tech);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.section-headline {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #FFFFFF;
}

.section-subtext {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.impacts-hex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.impact-hex-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 2.2rem 1.8rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: var(--trans-smooth);
  position: relative;
  overflow: hidden;
}

.impact-hex-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-sunset);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.impact-hex-card:hover {
  transform: translateY(-8px);
  background: var(--bg-card-hover);
  border-color: var(--border-teal);
  box-shadow: var(--shadow-glow-teal);
}

.impact-hex-card:hover::before {
  opacity: 1;
}

.impact-number-tag {
  font-family: var(--font-tech);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--arena-pinolera);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.impact-icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(22, 93, 111, 0.4);
  border: 1px solid var(--border-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--terracotta-light);
  margin-bottom: 1.4rem;
}

.impact-card-title {
  font-size: 1.35rem;
  margin-bottom: 0.8rem;
  color: #FFFFFF;
}

.impact-card-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
  color: var(--text-secondary);
}

.impact-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.2rem;
}

.impact-check-list li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.impact-check-list li i {
  color: var(--verde-neon);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* --- CATÁLOGO DE DESTINOS PROTEGIDOS & ESTADÍAS CON VIDEO CINEMATOGRÁFICO --- */
.destinations-section-pro {
  padding: 2rem 0 6rem;
  position: relative;
}

.destinations-video-hero {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 72vh, 800px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid rgba(246, 94, 1, 0.35);
  box-shadow: none;
  background: #070B14;
  padding-top: clamp(90px, 13vh, 130px);
  padding-bottom: clamp(36px, 5vh, 60px);
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0) scale(1.002);
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  filter: brightness(0.9) saturate(1.18) contrast(1.05);
}

.video-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(7, 11, 20, 0.16) 0%, rgba(7, 11, 20, 0.32) 52%, rgba(7, 11, 20, 0.76) 100%),
              linear-gradient(90deg, rgba(7, 11, 20, 0.28), transparent 34%, transparent 70%, rgba(7, 11, 20, 0.2));
  z-index: 1;
}

.video-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ), linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.03)
  );
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.08;
}

@media (min-width: 1920px) {
  .destinations-video-hero {
    min-height: clamp(680px, 72vh, 900px);
  }

  .hero-bg-video {
    filter: brightness(0.94) saturate(1.2) contrast(1.05);
  }
}

@media (max-width: 768px) {
  .destinations-video-hero {
    min-height: clamp(480px, 70svh, 620px);
    border-radius: 0;
    padding-top: clamp(80px, 12vh, 100px);
    padding-bottom: 1.75rem;
  }
}

.hero-video-content {
  position: relative;
  z-index: 3;
  padding: 3.5rem 1.5rem;
  text-align: center;
  width: 100%;
}

.hero-video-content .section-headline {
  font-size: 2.8rem;
  color: #FFFFFF;
  margin-bottom: 1rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

.hero-video-content .section-subtext {
  max-width: 820px;
  margin: 0 auto 2rem;
  color: #F4E6C1;
  font-size: 1.05rem;
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* BUSCADOR TÁCTICO INTEGRADO */
.dest-search-bar-wrap {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(246, 94, 1, 0.5);
  border-radius: 9999px;
  padding: 0.4rem 0.6rem 0.4rem 1.25rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(246, 94, 1, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dest-search-bar-wrap:focus-within {
  border-color: #F65E01;
  box-shadow: 0 8px 35px rgba(246, 94, 1, 0.55), 0 0 25px rgba(22, 93, 111, 0.6);
  transform: translateY(-2px);
}

.dest-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 0.5rem 0.5rem;
}

.dest-search-input::placeholder {
  color: rgba(244, 230, 193, 0.6);
}

.search-icon {
  color: var(--terracotta-light);
  font-size: 1.1rem;
}

.dest-search-btn {
  background: rgba(22, 93, 111, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--arena-pinolera);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dest-search-btn:hover {
  background: var(--terracotta);
  color: #FFFFFF;
}

/* ============================================================================
   SUITE DE NAVEGACIÓN Y FILTRADO POR CATEGORÍAS & SUBMENÚS (DESTINOS)
   ============================================================================
   🎯 POR QUÉ:
   - Reemplazar la barra plana de 15 píldoras dispersas por una jerarquía
     ordenada en dos niveles (Categorías Madre y Subcategorías Tácticas).
   - Optimizar la experiencia táctil y de navegación en televisores de 40"+,
     computadoras, tablets y celulares con accesos rápidos y dropdowns.
   
   ⚙️ CÓMO:
   - Menú de macro-categorías tipo pill-dock con Glassmorphism (blur 20px).
   - Los catálogos internos permanecen ocultos y alimentan un único panel ancho.
   - Tira dinámica de submenú (active-submenu-strip) que muestra opciones hijas
     sin superponer un segundo menú sobre el contenido ni duplicar controles.
   - Paleta oficial: #165D6F Petróleo Teal, #F65E01 Terracota, #F4E6C1 Arena Pinolera.
   
   📦 QUÉ:
   - Selectores: .dest-category-nav-suite, .macro-category-bar, .macro-nav-btn,
     .macro-dropdown-wrapper, .macro-submenu-dropdown, .sub-cat-btn,
     .active-submenu-strip, .strip-buttons-container, .strip-label-tag.
   ============================================================================ */

.dest-category-nav-suite {
  margin-bottom: 2.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  z-index: 10;
}

/* Barra Principal de Macro-Categorías */
.macro-category-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: rgba(10, 15, 29, 0.75);
  padding: 0.65rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid rgba(244, 230, 193, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

/* Botón Macro Principal */
.macro-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.35rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.75);
  color: var(--text-secondary);
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  user-select: none;
}

.macro-nav-btn .macro-icon {
  font-size: 1rem;
  color: var(--terracotta-light);
  transition: transform 0.25s ease, color 0.25s ease;
}

.macro-nav-btn .sub-chevron {
  font-size: 0.72rem;
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

.macro-nav-btn:hover {
  border-color: rgba(246, 94, 1, 0.5);
  background: rgba(22, 93, 111, 0.35);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(246, 94, 1, 0.25);
}

.macro-nav-btn:hover .macro-icon {
  transform: scale(1.15);
  color: var(--arena-pinolera);
}

.macro-nav-btn.active {
  background: linear-gradient(135deg, rgba(246, 94, 1, 0.95) 0%, rgba(22, 93, 111, 0.95) 100%);
  color: #FFFFFF;
  border-color: rgba(244, 230, 193, 0.6);
  box-shadow: 0 4px 20px rgba(246, 94, 1, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.macro-nav-btn.active .macro-icon {
  color: #FFFFFF;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.macro-nav-btn.active .sub-chevron {
  color: #FFFFFF;
}

/* Wrapper Dropdown */
.macro-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.macro-dropdown-wrapper.open .macro-nav-btn .sub-chevron,
.macro-dropdown-wrapper:hover .macro-nav-btn .sub-chevron {
  transform: rotate(180deg);
}

/*
 * Catálogo interno de subcategorías.
 * POR QUÉ: su contenido también se replica en .active-submenu-strip; mostrar ambas
 * superficies provocaba el menú duplicado y parcialmente tapado de la interfaz.
 * CÓMO: permanece fuera del flujo visual, mientras JavaScript sigue consultando sus
 * botones para construir el panel ancho, accesible y responsivo.
 * QUÉ: fuente DOM no interactiva para los filtros de cada macro-categoría.
 */
.macro-submenu-dropdown {
  display: none;
}

.submenu-header-title {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--arena-pinolera);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.submenu-header-title i {
  color: var(--terracotta);
}

.submenu-items-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.submenu-items-grid .sub-cat-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
}

.sub-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.75);
  color: var(--text-secondary);
  font-family: var(--font-tech);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.22s ease;
  user-select: none;
}

.sub-cat-btn i {
  font-size: 0.92rem;
  color: var(--terracotta-light);
  width: 18px;
  text-align: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.sub-cat-btn:hover {
  background: rgba(22, 93, 111, 0.5);
  border-color: rgba(246, 94, 1, 0.6);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(246, 94, 1, 0.25);
}

.sub-cat-btn:hover i {
  transform: scale(1.18);
  color: var(--arena-pinolera);
}

.sub-cat-btn.active {
  background: linear-gradient(135deg, rgba(246, 94, 1, 0.9) 0%, rgba(22, 93, 111, 0.95) 100%);
  color: #FFFFFF;
  border-color: rgba(244, 230, 193, 0.6);
  box-shadow: 0 4px 16px rgba(246, 94, 1, 0.45);
}

.sub-cat-btn.active i {
  color: #FFFFFF;
}

/* Panel Desplegable de Subcategorías (Se Esconde Automáticamente tras la Selección) */
.active-submenu-strip {
  display: flex;
  flex-direction: column;
  background: rgba(10, 15, 29, 0.92);
  padding: 0.85rem 1.4rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(246, 94, 1, 0.35);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  animation: stripSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(22, 93, 111, 0.25);
  margin-top: 0.85rem;
  width: 100%;
}

@keyframes stripSlideDown {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.strip-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.strip-label-tag {
  font-family: var(--font-tech);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--arena-pinolera);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.strip-label-tag i {
  color: var(--terracotta);
}

.strip-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.strip-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #EF4444;
  color: #FFFFFF;
  transform: scale(1.1) rotate(90deg);
}

.strip-buttons-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  width: 100%;
}

/* Indicador de Filtro Activo (Feedback Inmediato al Esconderse el Submenú) */
.active-filter-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.4rem 1.1rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(246, 94, 1, 0.35);
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: indicatorFadeIn 0.25s ease-out;
  margin-top: 0.75rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

@keyframes indicatorFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.indicator-label {
  font-family: var(--font-tech);
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.indicator-label i {
  color: var(--terracotta);
}

.indicator-name {
  font-family: var(--font-tech);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--arena-pinolera);
}

.indicator-count {
  font-family: var(--font-tech);
  font-size: 0.76rem;
  font-weight: 700;
  color: #4A7A5A;
  background: rgba(16, 185, 129, 0.15);
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
}

.indicator-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.65rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 9999px;
  color: #FCA5A5;
  font-family: var(--font-tech);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.indicator-clear-btn:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: #EF4444;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Responsividad para móviles y tablets */
@media (max-width: 900px) {
  .macro-category-bar {
    border-radius: 20px;
    padding: 0.6rem;
    gap: 0.45rem;
  }
  .macro-nav-btn {
    padding: 0.52rem 0.95rem;
    font-size: 0.8rem;
  }
}

/* BARRA DE FILTROS POR CATEGORÍA COMPATIBLE */
.filter-pills-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 0.5rem 0.5rem 1.25rem;
  gap: 0.65rem;
  margin-bottom: 3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--terracotta) rgba(15, 23, 42, 0.6);
}

.filter-pills-bar::-webkit-scrollbar {
  height: 6px;
}

.filter-pills-bar::-webkit-scrollbar-thumb {
  background: var(--terracotta);
  border-radius: 9999px;
}

.cat-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.75);
  color: var(--text-secondary);
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              color 0.25s ease;
}

.cat-filter-btn i {
  font-size: 0.95rem;
  color: var(--terracotta-light);
  transition: transform 0.25s ease, color 0.25s ease;
}

.cat-filter-btn:hover {
  border-color: rgba(246, 94, 1, 0.5);
  color: #FFFFFF;
  transform: translateY(-2px);
  background: rgba(22, 93, 111, 0.35);
}

.cat-filter-btn:hover i {
  transform: scale(1.15);
  color: var(--arena-pinolera);
}

.cat-filter-btn.active {
  background: linear-gradient(135deg, rgba(246, 94, 1, 0.95) 0%, rgba(22, 93, 111, 0.95) 100%);
  color: #FFFFFF;
  border-color: rgba(244, 230, 193, 0.6);
  box-shadow: 0 4px 18px rgba(246, 94, 1, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.cat-filter-btn.active i {
  color: #FFFFFF;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* GRID DE DESTINOS Y TARJETAS HOLOGRÁFICAS */
.destinations-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.dest-card-pro {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(10, 47, 56, 0.95) 100%);
  border: 1px solid rgba(244, 230, 193, 0.15);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  height: 100%;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Mantiene alineados los bloques internos aunque cambie la longitud del texto. */
.dest-card-pro .dest-body-pro {
  display: grid;
  grid-template-rows: auto auto minmax(5.25rem, auto) auto auto auto auto;
  align-content: start;
  height: 100%;
}

.dest-card-pro .dest-card-action-bar,
.dest-card-pro .dest-footer-strip {
  margin-top: auto;
}

.dest-card-pro:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(246, 94, 1, 0.6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(246, 94, 1, 0.35);
}

.dest-card-img-wrap {
  position: relative;
  height: 235px;
  overflow: hidden;
}

.dest-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dest-card-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.dest-card-pro:hover .dest-card-img {
  transform: scale(1.09);
}

.dest-floating-actions {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 5;
}

/* Botón Me Gusta: Píldora Glassmorphic con Contador */
.btn-floating-like {
  height: 34px;
  min-width: 54px;
  padding: 0 0.65rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(244, 230, 193, 0.25);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-tech, 'Space Grotesk', sans-serif);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-floating-like i {
  font-size: 0.85rem;
  color: #F87171;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
}

.btn-floating-like .like-number {
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.btn-floating-like:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(239, 68, 68, 0.65);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(239, 68, 68, 0.35);
}

.btn-floating-like:hover i {
  transform: scale(1.22);
}

.btn-floating-like.active {
  background: rgba(239, 68, 68, 0.25);
  border-color: #EF4444;
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

.btn-floating-like.active i {
  color: #EF4444;
}

/* Botón Favorito / Guardar: Círculo Glassmorphic */
.btn-floating-fav {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(244, 230, 193, 0.25);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  padding: 0;
}

.btn-floating-fav i {
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-floating-fav:hover {
  background: rgba(246, 94, 1, 0.25);
  border-color: var(--naranja-fuego, #F65E01);
  color: var(--arena-pinolera, #F4E6C1);
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(246, 94, 1, 0.4);
}

.btn-floating-fav:hover i {
  transform: scale(1.2);
}

.btn-floating-fav.active {
  background: var(--naranja-fuego, #F65E01);
  border-color: var(--naranja-fuego, #F65E01);
  color: #FFFFFF;
  box-shadow: 0 0 18px rgba(246, 94, 1, 0.6);
}

.dest-badge-corner {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(246, 94, 1, 0.4);
  color: var(--arena-pinolera);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  font-family: var(--font-tech);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 5;
}

.dest-price-badge {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  background: linear-gradient(135deg, rgba(22, 93, 111, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 230, 193, 0.3);
  color: var(--arena-pinolera);
  font-size: 0.8rem;
  font-weight: 800;
  font-family: var(--font-tech);
  padding: 0.35rem 0.8rem;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

.dest-body-pro {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dest-location-tag {
  font-size: 0.78rem;
  color: var(--terracotta-light);
  font-weight: 800;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-tech);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dest-name-title {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
  color: #FFFFFF;
  line-height: 1.3;
  font-family: var(--font-display);
  font-weight: 800;
}

.dest-description-text {
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
  flex: 1;
  color: var(--text-secondary);
}

.dest-host-details-box {
  background: rgba(10, 20, 35, 0.75);
  border: 1px solid rgba(22, 93, 111, 0.5);
  border-radius: 16px;
  padding: 0.95rem 1.1rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) inset;
}

.dest-host-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.dest-host-row i {
  color: var(--terracotta);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(246, 94, 1, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.dest-host-row strong {
  color: #FFFFFF;
}

.dest-host-row a {
  color: var(--arena-pinolera);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s;
}

.dest-host-row a:hover {
  color: var(--terracotta-light);
  text-decoration: underline;
}

.dest-real-price-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(22, 93, 111, 0.35) 0%, rgba(16, 185, 129, 0.15) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.15rem;
  font-size: 0.84rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.dest-price-breakdown {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px dashed rgba(244, 230, 193, 0.25);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 1.1rem;
  font-size: 0.77rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.dest-price-breakdown i {
  color: var(--oro-noble);
  font-size: 0.85rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.dest-price-breakdown strong {
  color: var(--arena-pinolera);
  font-weight: 700;
}

.dest-card-action-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: auto;
  margin-bottom: 0.9rem;
}

.dest-footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(244, 230, 193, 0.1);
  font-size: 0.78rem;
}

.dest-rating-gold {
  color: var(--oro-noble);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dest-coop-name {
  color: var(--arena-pinolera);
  font-family: var(--font-tech);
  font-size: 0.75rem;
  opacity: 0.85;
}

@media (max-width: 1024px) {
  .destinations-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .destinations-showcase-grid {
    grid-template-columns: 1fr;
  }
  .hero-video-content .section-headline {
    font-size: 2.1rem;
  }
}

/* --- CALCULADORA RURAL DE RETORNO (ROI) --- */
.calculator-section-pro {
  padding: 6rem 0;
}

.calc-panel-box {
  background: var(--grad-admin);
  border: 1px solid var(--border-teal);
  border-radius: 32px;
  padding: 3.5rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
}

.calc-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.slider-group-pro {
  margin-bottom: 1.8rem;
}

.slider-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.slider-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
}

.slider-display-badge {
  font-family: var(--font-tech);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--arena-pinolera);
  background: rgba(22, 93, 111, 0.4);
  padding: 0.2rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border-teal);
}

.slider-range-input {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #1E293B;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.slider-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--grad-sunset);
  box-shadow: var(--shadow-glow-terracotta);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.slider-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.calc-summary-comparison {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.comp-card-ota {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 20px;
  padding: 1.6rem;
}

.comp-card-baqueano {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 20px;
  padding: 1.6rem;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
}

.comp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.comp-title {
  font-size: 1.05rem;
  font-weight: 800;
}

.comp-pill-loss {
  background: rgba(239, 68, 68, 0.2);
  color: #F87171;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
}

.comp-pill-win {
  background: rgba(16, 185, 129, 0.2);
  color: #8DBF9A;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
}

.comp-figure-big {
  font-family: var(--font-tech);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}

.comp-figure-big.danger {
  color: #EF4444;
}

.comp-figure-big.success {
  color: #4A7A5A;
}

.comp-annual-banner {
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  font-size: 0.92rem;
  color: var(--arena-pinolera);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* --- CAMPAÑA AMBIENTAL & DENUNCIAS CIUDADANAS --- */
.environmental-section-pro {
  padding: 6rem 0;
  position: relative;
}

.decalogo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-bottom: 3.5rem;
}

.decalogo-item {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 16px;
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.decalogo-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--verde-selva);
  color: #FFFFFF;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.decalogo-text h5 {
  font-size: 1rem;
  color: #FFFFFF;
  margin-bottom: 0.3rem;
}

.decalogo-text p {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.denuncia-form-card {
  background: var(--grad-admin);
  border: 1px solid var(--border-teal);
  border-radius: 28px;
  padding: 3rem;
  box-shadow: var(--shadow-lg);
}

.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-group-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group-field label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--arena-pinolera);
}

.form-control-input,
.form-control-textarea,
.form-control-select {
  width: 100%;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  outline: none;
  transition: var(--trans-fast);
}

.form-control-input:focus,
.form-control-textarea:focus,
.form-control-select:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 15px rgba(246, 94, 1, 0.3);
}

.form-control-textarea {
  resize: vertical;
  min-height: 110px;
}

/* --- HISTORIA DE MI PAÍS (NICARAGUA) --- */
.history-section-pro {
  padding: 6rem 0;
  background: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
}

.timeline-periods-flow {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  margin: 3rem 0 5rem;
}

.timeline-periods-flow::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  width: 3px;
  background: var(--grad-gold);
  border-radius: 2px;
}

.timeline-period-card {
  position: relative;
  padding-left: 65px;
}

.timeline-period-badge {
  position: absolute;
  left: 8px;
  top: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--oro-noble);
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: var(--shadow-glow-gold);
}

.timeline-content-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 1.8rem 2.2rem;
  backdrop-filter: blur(14px);
  transition: var(--trans-smooth);
}

.timeline-content-box:hover {
  border-color: var(--oro-noble);
  transform: translateX(6px);
}

.timeline-era-tag {
  font-size: 0.78rem;
  font-family: var(--font-tech);
  color: var(--oro-noble);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.territories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin: 2.5rem 0;
}

.territory-pill-card {
  background: rgba(19, 36, 56, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.2rem;
  cursor: pointer;
  transition: var(--trans-smooth);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
}

.territory-pill-card:hover,
.territory-pill-card.active {
  background: var(--petroleo-teal);
  border-color: var(--arena-pinolera);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-teal);
}

.territory-pill-card h5 {
  font-size: 1rem;
  color: #FFFFFF;
  margin-bottom: 0.2rem;
}

.territory-pill-card span {
  font-size: 0.78rem;
  color: var(--arena-pinolera);
}

/* --- GASTRONOMÍA ANCESTRAL DEL MAÍZ --- */
.gastronomy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.gastro-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  overflow: hidden;
  transition: var(--trans-smooth);
}

.gastro-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-glow-terracotta);
}

.gastro-img-wrap {
  height: 200px;
  overflow: hidden;
}

.gastro-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gastro-card:hover .gastro-img {
  transform: scale(1.08);
}

.gastro-body {
  padding: 1.4rem;
}

.gastro-title {
  font-size: 1.2rem;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}

.gastro-ingredients {
  font-size: 0.85rem;
  color: var(--arena-pinolera);
  font-style: italic;
  margin-bottom: 0.8rem;
}

/* --- REPRODUCTOR FOLCLÓRICO MULTIMEDIA --- */
.music-player-panel {
  background: linear-gradient(135deg, rgba(22, 93, 111, 0.4) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid var(--border-teal);
  border-radius: 28px;
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  margin: 3.5rem 0;
}

.music-tracks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}

.track-btn-card {
  background: rgba(19, 36, 56, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: var(--trans-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.track-btn-card:hover,
.track-btn-card.playing {
  background: var(--terracotta);
  border-color: var(--arena-pinolera);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow-terracotta);
}

.track-icon-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #FFFFFF;
}

.track-btn-card.playing .track-icon-play i {
  animation: pulseGreen 1.2s infinite;
}

.track-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
}

.track-author {
  font-size: 0.72rem;
  color: var(--arena-pinolera);
}

/* --- TARJETAS 3D DE COOPERATIVAS & ALOJAMIENTOS (FLIP CARDS 180°) --- */
.allies-section-pro {
  padding: 6rem 0;
}

.allies-3d-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
}

.flip-card-3d {
  background-color: transparent;
  width: 100%;
  height: 380px;
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card-3d:hover .flip-card-inner,
.flip-card-3d.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.flip-card-front {
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
}

.flip-front-img-wrap {
  height: 220px;
  overflow: hidden;
}

.flip-front-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flip-front-body {
  padding: 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flip-front-title {
  font-size: 1.25rem;
  color: #FFFFFF;
}

.flip-hint {
  font-size: 0.78rem;
  color: var(--terracotta-light);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.flip-card-back {
  background: var(--grad-admin);
  border-color: var(--border-glow);
  transform: rotateY(180deg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  box-shadow: var(--shadow-glow-terracotta);
}

.flip-back-title {
  font-size: 1.3rem;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}

.flip-back-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.flip-back-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.btn-flip-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  transition: var(--trans-fast);
}

.btn-flip-wa {
  background: #25D366;
  color: #FFFFFF;
}

.btn-flip-call {
  background: rgba(22, 93, 111, 0.5);
  border: 1px solid var(--border-teal);
  color: #FFFFFF;
}

/* --- ASISTENTE BAQUEANO AI --- */
.ai-assistant-panel {
  background: var(--grad-admin);
  border: 1px solid var(--border-teal);
  border-radius: 28px;
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  margin: 4rem 0;
}

.ai-chat-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 1.5rem;
  min-height: 240px;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.ai-bubble-msg {
  padding: 0.9rem 1.2rem;
  border-radius: 16px;
  font-size: 0.92rem;
  max-width: 80%;
  line-height: 1.5;
}

.ai-bubble-bot {
  background: rgba(22, 93, 111, 0.4);
  border: 1px solid var(--border-teal);
  color: var(--text-primary);
  align-self: flex-start;
}

.ai-bubble-user {
  background: var(--terracotta);
  color: #FFFFFF;
  align-self: flex-end;
}

.ai-presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.ai-preset-chip {
  background: rgba(19, 36, 56, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  color: var(--arena-pinolera);
  cursor: pointer;
  transition: var(--trans-fast);
}

.ai-preset-chip:hover {
  background: var(--petroleo-teal);
  color: #FFFFFF;
}

/* --- PASAPORTE DEL EXPLORADOR --- */
.passport-card-wrap {
  background: linear-gradient(135deg, #132438 0%, #0F172A 100%);
  border: 2px solid var(--oro-noble);
  border-radius: 28px;
  padding: 3rem;
  box-shadow: var(--shadow-glow-gold);
  margin: 3.5rem 0;
}

.passport-stamps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.passport-stamp-badge {
  background: rgba(15, 23, 42, 0.8);
  border: 2px dashed var(--oro-noble);
  border-radius: 20px;
  padding: 1.4rem 1rem;
  text-align: center;
  transition: var(--trans-smooth);
}

.passport-stamp-badge:hover {
  transform: scale(1.05) rotate(2deg);
  border-style: solid;
}

.stamp-icon {
  font-size: 2rem;
  color: var(--oro-noble);
  margin-bottom: 0.6rem;
}

.stamp-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #FFFFFF;
}

.stamp-status {
  font-size: 0.68rem;
  color: var(--verde-neon);
  font-family: var(--font-tech);
}

/* --- MOTOR FINANCIERO BIMONEDA & RÉGIMEN FISCAL (LEY 306) --- */
.checkout-preview-panel {
  background: var(--grad-admin);
  border: 1px solid var(--border-teal);
  border-radius: 24px;
  padding: 2.5rem;
  margin-top: 2rem;
}

.tax-regime-toggle {
  display: flex;
  gap: 1rem;
  margin: 1.2rem 0;
}

.regime-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.6);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--trans-fast);
}

.regime-btn.active {
  background: var(--petroleo-teal);
  color: #FFFFFF;
  border-color: var(--petroleo-light);
}

.checkout-receipt-ticket {
  background: #020617;
  border: 1px dashed var(--border-teal);
  border-radius: 16px;
  padding: 1.8rem;
  font-family: var(--font-tech);
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
  color: var(--text-secondary);
}

.receipt-row.total-row {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.8rem;
  margin-top: 0.8rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--arena-pinolera);
}

/* --- VISTA ADMINISTRATIVA (BAQUEANO OPS CENTER) --- */
.admin-hub-view {
  padding-bottom: 6rem;
}

.admin-header-bar {
  background: var(--grad-admin);
  border: 1px solid var(--border-teal);
  border-radius: 24px;
  padding: 2rem 2.5rem;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
}

.admin-title-col h2 {
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.admin-badge-live {
  font-size: 0.72rem;
  font-family: var(--font-tech);
  background: rgba(16, 185, 129, 0.2);
  color: #8DBF9A;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-badge-live .pulse-green-small {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4A7A5A;
  animation: pulseGreen 1.5s infinite;
}

.admin-actions-col {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-admin-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  background: rgba(22, 93, 111, 0.35);
  border: 1px solid var(--border-teal);
  color: var(--arena-pinolera);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--trans-fast);
}

.btn-admin-action:hover {
  background: var(--petroleo-teal);
  color: #FFFFFF;
}

.btn-broadcast-alert {
  background: var(--grad-sunset);
  color: #FFFFFF;
  border: none;
  box-shadow: var(--shadow-glow-terracotta);
}

.kpi-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
  transition: var(--trans-smooth);
}

.kpi-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-teal);
  box-shadow: var(--shadow-md);
}

.kpi-icon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.kpi-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.kpi-icon-app { background: rgba(56, 189, 248, 0.15); color: var(--azul-info); }
.kpi-icon-web { background: rgba(246, 94, 1, 0.15); color: var(--terracotta-light); }
.kpi-icon-money { background: rgba(16, 185, 129, 0.15); color: var(--verde-neon); }
.kpi-icon-gps { background: rgba(212, 175, 55, 0.15); color: var(--oro-noble); }

.kpi-trend {
  font-family: var(--font-tech);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--verde-neon);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.kpi-value-big {
  font-family: var(--font-tech);
  font-size: 2.2rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}

.kpi-label-muted {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.dash-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.dash-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.dash-panel-title {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.activity-chart-wrapper {
  padding: 1rem 0 0.5rem;
}

.chart-bars-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 220px;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  gap: 1rem;
}

.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 0.6rem;
}

.bars-pair {
  width: 100%;
  max-width: 44px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
}

.bar-col {
  flex: 1;
  border-radius: 6px 6px 0 0;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.bar-col.app {
  background: var(--azul-info);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.bar-col.web {
  background: var(--terracotta);
  box-shadow: 0 0 12px rgba(246, 94, 1, 0.4);
}

.bar-col:hover::after {
  content: attr(data-val);
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-family: var(--font-tech);
  color: #FFFFFF;
  background: #020617;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.chart-day-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-tech);
  font-weight: 600;
}

.chart-legend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.2rem;
  font-size: 0.82rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot.app { background: var(--azul-info); }
.legend-dot.web { background: var(--terracotta); }

.firebase-services-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.firebase-service-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-meta-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.service-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(244, 230, 193, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--arena-pinolera);
}

.service-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFFFFF;
}

.service-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.service-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-family: var(--font-tech);
  font-weight: 800;
}

.service-status-pill.online {
  background: rgba(16, 185, 129, 0.15);
  color: #8DBF9A;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.routes-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

.admin-table th {
  padding: 0.9rem 1.2rem;
  font-family: var(--font-tech);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
}

.admin-table td {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(244, 230, 193, 0.06);
}

.admin-table tr:hover {
  background: rgba(22, 93, 111, 0.1);
}

.table-dest-name {
  font-weight: 700;
  color: #FFFFFF;
}

.status-badge-table {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-tech);
}

.status-badge-table.active {
  background: rgba(16, 185, 129, 0.15);
  color: #8DBF9A;
}

.status-badge-table.warning {
  background: rgba(246, 94, 1, 0.2);
  color: #FB923C;
}

.feed-stream-box {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 0.4rem;
}

.feed-event-item {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: fadeInEvent 0.4s ease;
}

@keyframes fadeInEvent {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.feed-event-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--terracotta-light);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.feed-event-content {
  flex: 1;
}

.feed-event-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #FFFFFF;
}

.feed-event-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* --- RESPONSIVIDAD PARA MÓDULOS --- */
@media (max-width: 1024px) {
  .impacts-hex-grid,
  .destinations-showcase-grid,
  .calc-grid-inner,
  .dashboard-main-grid,
  .kpi-metrics-grid {
    grid-template-columns: 1fr;
  }

  .decalogo-grid,
  .form-grid-2col,
  .gastronomy-grid,
  .allies-3d-grid {
    grid-template-columns: 1fr 1fr;
  }

  .territories-grid,
  .music-tracks-grid,
  .passport-stamps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .decalogo-grid,
  .form-grid-2col,
  .gastronomy-grid,
  .allies-3d-grid,
  .territories-grid,
  .music-tracks-grid,
  .passport-stamps-grid {
    grid-template-columns: 1fr;
  }

  .calc-panel-box,
  .denuncia-form-card,
  .passport-card-wrap,
  .admin-header-bar,
  .dash-panel {
    padding: 1.5rem;
  }

  .admin-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
}

/* ==========================================================================
   🔐 PORTAL DE AUTENTICACIÓN & CONTROL DE ROLES (RBAC)
   ========================================================================== */
.admin-login-wrapper {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.admin-login-card {
  background: var(--grad-admin);
  border: 2px solid var(--border-glow);
  border-radius: 32px;
  width: 100%;
  max-width: 520px;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg), 0 0 50px rgba(22, 93, 111, 0.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
}

.admin-login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad-sunset);
}

.login-header-box {
  text-align: center;
  margin-bottom: 2rem;
}

.login-icon-circle {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  box-shadow: var(--shadow-glow-terracotta);
}

.login-icon-circle img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.login-title {
  font-size: 1.75rem;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}

.login-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.login-role-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: rgba(15, 23, 42, 0.6);
  padding: 0.35rem;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
}

.role-select-btn {
  flex: 1;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--trans-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.role-select-btn:hover {
  color: #FFFFFF;
}

.role-select-btn.active {
  background: var(--petroleo-teal);
  color: #FFFFFF;
  box-shadow: var(--shadow-glow-teal);
}

.login-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.login-input-group label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--arena-pinolera);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-wrap i {
  position: absolute;
  left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.login-input-wrap .form-control-input {
  padding-left: 2.8rem;
}

.login-feedback-alert {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.82rem;
  margin-bottom: 1.2rem;
  display: none;
  align-items: center;
  gap: 0.6rem;
}

.login-feedback-alert.error {
  display: flex;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #F87171;
}

.login-feedback-alert.success {
  display: flex;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #8DBF9A;
}

/* Barra de Sesión de Usuario Activo en Dashboard */
.user-session-bar {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 0.75rem 1.4rem;
  margin-bottom: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.user-profile-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.user-avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-sunset);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 800;
  font-family: var(--font-tech);
  box-shadow: var(--shadow-glow-terracotta);
}

.user-name-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF;
}

.user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-family: var(--font-tech);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-role-badge.admin {
  background: rgba(246, 94, 1, 0.2);
  color: var(--terracotta-light);
  border: 1px solid var(--border-glow);
}

.user-role-badge.auditor {
  background: rgba(212, 175, 55, 0.2);
  color: var(--oro-noble);
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.user-role-badge.user {
  background: rgba(56, 189, 248, 0.15);
  color: var(--azul-info);
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #F87171;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--trans-fast);
}

.btn-logout:hover {
  background: var(--rojo-alerta);
  color: #FFFFFF;
}

/* ============================================================================
   🗺️ ESTILOS DEL MOTOR CARTOGRÁFICO INTERACTIVO BAQUEANO (baqueano-map)
   ============================================================================ */
.map-section-wrapper {
  margin-top: 4rem;
  border: 1px solid rgba(246, 94, 1, 0.35);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background: #0F172A;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(22, 93, 111, 0.25);
}

.map-header-bar {
  background: rgba(15, 23, 42, 0.95);
  padding: 1.1rem 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10;
  position: relative;
}

.map-header-title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 800;
  color: #FFFFFF;
  font-size: 1.05rem;
  font-family: var(--font-display);
}

.map-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4A7A5A;
  box-shadow: 0 0 10px #4A7A5A;
  animation: pulseDotLive 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes pulseDotLive {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  50% { transform: scale(1.15); opacity: 0.85; box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.map-source-badge {
  font-size: 0.8rem;
  color: var(--arena-pinolera);
  font-family: var(--font-tech);
  background: rgba(22, 93, 111, 0.4);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(246, 94, 1, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.map-source-badge.firestore {
  color: #8DBF9A;
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.12);
}

#baqueanoInteractiveMap {
  height: 560px;
  width: 100%;
  background:
    linear-gradient(135deg, rgba(244, 230, 193, 0.12), rgba(22, 93, 111, 0.24)),
    #E7E3D8;
  position: relative;
  z-index: 1;
}

#baqueanoInteractiveMap.is-loading::before {
  content: 'Cargando mapa territorial...';
  position: absolute;
  inset: 0;
  z-index: 650;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(22, 93, 111, 0.72));
  color: #FFFFFF;
  font-family: var(--font-tech);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

#baqueanoInteractiveMap .leaflet-tile-pane {
  filter: saturate(1.12) contrast(1.02) brightness(1.04);
}

#baqueanoInteractiveMap .leaflet-container,
#baqueanoInteractiveMap .leaflet-pane,
#baqueanoInteractiveMap .leaflet-tile-container,
#baqueanoInteractiveMap .leaflet-tile {
  background: transparent;
}

/* OVERLAY DE CONTROLES FLOTANTES */
.baqueano-map-controls-overlay {
  background: rgba(15, 23, 42, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10;
  position: relative;
}

.map-ctrl-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.map-ctrl-label {
  font-size: 0.76rem;
  font-family: var(--font-tech);
  font-weight: 800;
  color: var(--arena-pinolera);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.map-layer-btn,
.map-region-btn,
.map-category-btn {
  background: rgba(22, 93, 111, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.map-layer-btn:hover,
.map-region-btn:hover,
.map-category-btn:hover {
  background: rgba(246, 94, 1, 0.25);
  color: #FFFFFF;
  border-color: rgba(246, 94, 1, 0.5);
  transform: translateY(-1px);
}

.map-layer-btn.active,
.map-region-btn.active,
.map-category-btn.active {
  background: linear-gradient(135deg, #F65E01, #165D6F);
  color: #FFFFFF;
  border-color: rgba(244, 230, 193, 0.7);
  box-shadow: 0 4px 14px rgba(246, 94, 1, 0.4);
}

/* MARCADORES PERSONALIZADOS (PINS) */
.baqueano-custom-leaflet-pin {
  background: transparent !important;
  border: none !important;
}

.baqueano-map-pin-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transform: translateY(-8px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.baqueano-map-pin-wrap:hover {
  transform: translateY(-14px) scale(1.18);
  z-index: 1000 !important;
}

.baqueano-map-pin-body {
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pin-color, #F65E01);
  border: 2px solid #FFFFFF;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 14px var(--pin-color, #F65E01);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.baqueano-map-pin-body i {
  transform: rotate(45deg);
  font-size: 0.85rem;
}

.baqueano-map-pin-pulse {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pin-color, #F65E01);
  opacity: 0.35;
  animation: pinPulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes pinPulse {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.baqueano-map-pin-rating {
  position: absolute;
  top: -12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(244, 230, 193, 0.4);
  color: var(--arena-pinolera);
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.68rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.baqueano-map-pin-rating i {
  color: #F59E0B;
}

/* POPUPS ENRIQUECIDOS */
.baqueano-leaflet-popup .leaflet-popup-content-wrapper {
  background: rgba(15, 23, 42, 0.97) !important;
  border: 1px solid rgba(246, 94, 1, 0.45) !important;
  border-radius: 18px !important;
  color: #FFFFFF !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(22, 93, 111, 0.3) !important;
  padding: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.baqueano-leaflet-popup .leaflet-popup-tip {
  background: rgba(15, 23, 42, 0.97) !important;
  border: 1px solid rgba(246, 94, 1, 0.45) !important;
}

.baqueano-leaflet-popup .leaflet-popup-content {
  margin: 0 !important;
  width: 300px !important;
}

.map-popup-card {
  display: flex;
  flex-direction: column;
}

.map-popup-image {
  height: 130px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 18px 18px 0 0;
}

.map-popup-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, transparent 60%);
}

.map-popup-cat {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.68rem;
  color: #FFFFFF;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  text-transform: uppercase;
}

.map-popup-price-tag {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.8rem;
  color: #FFFFFF;
  background: rgba(22, 93, 111, 0.9);
  border: 1px solid rgba(244, 230, 193, 0.4);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  z-index: 2;
}

.map-popup-content-body {
  padding: 1rem 1.1rem;
}

.map-popup-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.35rem;
  line-height: 1.25;
}

.map-popup-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  font-family: var(--font-tech);
}

.map-popup-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.map-popup-coop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--arena-pinolera);
  margin-bottom: 0.85rem;
  background: rgba(22, 93, 111, 0.2);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(22, 93, 111, 0.3);
}

.map-popup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.map-btn-route,
.map-btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.map-btn-route {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.map-btn-route:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #FFFFFF;
}

.map-btn-book {
  background: linear-gradient(135deg, #F65E01, #D95300);
  border: 1px solid rgba(244, 230, 193, 0.4);
  color: #FFFFFF;
}

.map-btn-book:hover {
  box-shadow: 0 4px 14px rgba(246, 94, 1, 0.5);
  transform: translateY(-1px);
}

/* ============================================================================
   🗺️ ESTILOS DEL EXPLORADOR TERRITORIAL DEPARTAMENTAL (17 TERRITORIOS)
   ============================================================================ */
.territory-showcase-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(246, 94, 1, 0.35);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.7), 0 0 35px rgba(22, 93, 111, 0.25);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.territory-showcase-hero {
  position: relative;
  min-height: 240px;
  padding: 2.5rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.territory-showcase-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.65);
  transform: scale(1.02);
  transition: transform 0.8s ease;
}

.territory-showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 10%, rgba(15, 23, 42, 0.6) 60%, rgba(15, 23, 42, 0.3) 100%);
}

.territory-showcase-headline {
  position: relative;
  z-index: 2;
}

.territory-showcase-body {
  padding: 2.5rem;
}

.territory-info-block {
  background: rgba(19, 36, 56, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 1.6rem 1.8rem;
}

.territory-block-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.territory-block-title i {
  font-size: 1.15rem;
  color: var(--terracotta);
}

.territory-block-title h4 {
  font-size: 1.15rem;
  color: #FFFFFF;
  margin: 0;
  font-weight: 800;
}

.territory-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.t-gastro-mini-list,
.t-places-mini-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.t-mini-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(22, 93, 111, 0.3);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: all 0.2s ease;
}

.t-mini-card:hover {
  border-color: var(--terracotta);
  background: rgba(246, 94, 1, 0.08);
  transform: translateX(4px);
}

.t-activities-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.t-act-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
  color: #FFFFFF;
  line-height: 1.4;
}

.territory-3col-logistics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.t-log-card {
  background: rgba(19, 36, 56, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 1.3rem;
}

.t-log-card h6 {
  font-size: 0.88rem;
  color: var(--arena-pinolera);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  font-family: var(--font-tech);
}

.t-log-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.territory-action-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 860px) {
  .territory-2col-grid,
  .t-activities-checklist,
  .territory-3col-logistics {
    grid-template-columns: 1fr;
  }
  .territory-showcase-body {
    padding: 1.5rem;
  }
}

/* ============================================================================
   🌿 ESTILOS DEL DECÁLOGO VERDE INTERACTIVO & GAMIFICACIÓN DE CUSTODIA
   ============================================================================ */
.decalogo-interactive-wrapper {
  margin-top: 3.5rem;
}

.decalogo-header-center {
  text-align: center;
  margin-bottom: 2.5rem;
}

.decalogo-main-title {
  font-size: 2.2rem;
  font-family: var(--font-display);
  font-weight: 900;
  color: #FFFFFF;
  margin-bottom: 0.6rem;
}

/* DASHBOARD DE PROGRESO DE COMPROMISO */
.decalogo-dashboard-panel {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 24px;
  padding: 1.6rem 2rem;
  max-width: 860px;
  margin: 0 auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(16, 185, 129, 0.15);
}

.decalogo-progress-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  font-family: var(--font-tech);
}

.decalogo-stats-label {
  font-size: 0.95rem;
  color: var(--arena-pinolera);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.decalogo-percent-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #8DBF9A;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 0.85rem;
}

.decalogo-progress-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}

.decalogo-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4A7A5A, #8DBF9A);
  border-radius: 9999px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.decalogo-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.decalogo-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.decalogo-pill-btn {
  background: rgba(22, 93, 111, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-family: var(--font-tech);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.decalogo-pill-btn:hover {
  background: rgba(16, 185, 129, 0.2);
  color: #FFFFFF;
  border-color: rgba(16, 185, 129, 0.4);
}

.decalogo-pill-btn.active {
  background: linear-gradient(135deg, #4A7A5A, #165D6F);
  color: #FFFFFF;
  border-color: rgba(244, 230, 193, 0.7);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.decalogo-sign-all-btn {
  background: rgba(246, 94, 1, 0.2);
  border: 1px solid rgba(246, 94, 1, 0.4);
  color: var(--terracotta-light);
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.decalogo-sign-all-btn:hover {
  background: var(--terracotta);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(246, 94, 1, 0.4);
}

/* GRID DE TARJETAS 3D */
.decalogo-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.decalogo-interactive-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  transform-style: preserve-3d;
}

.decalogo-interactive-card:hover {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.2);
}

.decalogo-interactive-card.committed {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.2);
}

.decalogo-interactive-card.committed .decalogo-num-badge {
  background: linear-gradient(135deg, #4A7A5A, #4A7A5A);
  box-shadow: 0 0 12px #4A7A5A;
}

.decalogo-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.decalogo-num-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(22, 93, 111, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-family: var(--font-tech);
  font-weight: 900;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.decalogo-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(22, 93, 111, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta-light);
  font-size: 1.1rem;
}

.decalogo-check-toggle {
  background: transparent;
  border: none;
  font-size: 1.35rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  padding: 0;
}

.decalogo-check-toggle:hover {
  transform: scale(1.2);
  color: #4A7A5A;
}

.decalogo-check-toggle.checked {
  color: #4A7A5A;
  animation: checkPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes checkPop {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.decalogo-card-body {
  flex: 1;
}

.decalogo-rule-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}

.decalogo-rule-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.9rem;
}

.decalogo-tip-box {
  background: rgba(15, 23, 42, 0.65);
  border-left: 3px solid #F59E0B;
  border-radius: 0 10px 10px 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.78rem;
  color: var(--arena-pinolera);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.45;
}

/* MODAL DE CERTIFICACIÓN DE GUARDIÁN */
.guardian-modal-dialog {
  background: rgba(15, 23, 42, 0.97);
  border: 1px solid rgba(16, 185, 129, 0.5);
  border-radius: 28px;
  padding: 2.8rem;
  max-width: 540px;
  width: 90%;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 45px rgba(16, 185, 129, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.guardian-badge-icon {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4A7A5A, #4A7A5A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.6);
  animation: pulseDotLive 2s infinite;
}

.guardian-certificate-card {
  background: rgba(19, 36, 56, 0.7);
  border: 1px dashed rgba(16, 185, 129, 0.45);
  border-radius: 18px;
  padding: 1.5rem;
}

.guardian-cert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.75rem;
}

@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .decalogo-cards-grid {
    grid-template-columns: 1fr;
  }
  .decalogo-controls-row {
    flex-direction: column;
    align-items: stretch;
  }
}





/* ========================================================================== 
   NAVEGACI?N PROFESIONAL BAQUEANO ? CAPA DE REFINAMIENTO 2026
   ?? POR QU?: asegurar legibilidad, jerarqu?a y acceso visible sin solapamientos.
   ?? C?MO: reorganiza la barra compartida con grid, controles compactos y drawer.
   ?? QU?: escritorio, laptop, tablet, m?vil, megamen? y estados de interacci?n.
   ========================================================================== */
.main-navbar {
  min-height: 76px;
  padding: 0;
  background: rgba(6, 16, 24, 0.96);
  border-bottom: 1px solid rgba(244, 230, 193, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.38);
}

.main-navbar .nav-inner {
  min-height: 76px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: clamp(1rem, 2vw, 2rem);
}

.main-navbar .brand-box {
  min-width: 175px;
}

.main-navbar .brand-logo-img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 3px;
  box-sizing: border-box;
  box-shadow: 0 0 15px rgba(246, 94, 1, 0.45);
  border: 1px solid rgba(244, 230, 193, 0.35);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

.main-navbar .brand-title {
  font-size: 1.08rem;
  letter-spacing: 0.12em;
}

.main-navbar .brand-tagline {
  margin-top: 4px;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
}

.main-navbar .nav-links-menu {
  justify-self: center;
  width: auto;
  max-width: 100%;
  min-height: 48px;
  padding: 5px;
  gap: 2px;
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(244, 230, 193, 0.12);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.22);
}

.main-navbar .nav-links-menu > a,
.main-navbar .nav-dropdown-trigger {
  min-height: 38px;
  padding: 0 0.78rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 750;
}

.main-navbar .nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  cursor: pointer;
}

.main-navbar .nav-links-menu .nav-icon {
  color: #F4E6C1;
  opacity: 0.84;
}

.main-navbar .nav-links-menu > a:hover,
.main-navbar .nav-dropdown-trigger:hover,
.main-navbar .nav-dropdown.is-open .nav-dropdown-trigger {
  color: #fff;
  border-color: rgba(246, 94, 1, 0.34);
  background: rgba(246, 94, 1, 0.1);
  transform: none;
}

.main-navbar .nav-links-menu > a.active {
  color: #fff;
  background: linear-gradient(135deg, #F65E01, #c94700);
  box-shadow: 0 6px 18px rgba(246, 94, 1, 0.3);
}

.main-navbar .nav-pill-indicator {
  display: none;
}

.main-navbar .nav-actions-right {
  gap: 0.55rem;
}

.main-navbar .sos-quick-btn {
  min-height: 40px;
  padding: 0 0.9rem;
  color: #fff;
  background: #dc3545;
  border-color: #ff6b76;
  box-shadow: 0 8px 22px rgba(220, 53, 69, 0.22);
}

.main-navbar .sos-quick-btn::before {
  animation-duration: 3.2s;
}

.main-navbar .nav-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(244, 230, 193, 0.2);
  border-radius: 12px;
  background: rgba(22, 93, 111, 0.25);
  backdrop-filter: blur(12px);
  color: #F4E6C1;
  text-decoration: none;
  transition: all 0.25s ease;
}

.main-navbar .nav-profile-btn:hover {
  background: rgba(246, 94, 1, 0.25);
  border-color: #F65E01;
  transform: translateY(-1px);
  color: #fff;
}

.main-navbar .nav-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(246, 94, 1, 0.25);
  border: 1px solid rgba(246, 94, 1, 0.5);
  overflow: hidden;
  color: #F4E6C1;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.main-navbar .nav-profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-navbar .nav-profile-info {
  display: flex;
  flex-direction: column;
}

.main-navbar .nav-profile-name { font-size: 0.78rem; font-weight: 600; }
.main-navbar .nav-profile-role { font-size: 0.62rem; color: rgba(244, 230, 193, 0.65); }

.main-navbar .nav-dropdown { position: relative; }
.main-navbar .nav-dropdown-menu {
  top: calc(100% + 14px);
  left: 50%;
  width: min(420px, calc(100vw - 32px));
  transform: translate(-50%, 10px);
  padding: 14px;
  border: 1px solid rgba(244, 230, 193, 0.14);
  border-radius: 18px;
  background: rgba(7, 17, 27, 0.985);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62);
}
.main-navbar .nav-dropdown.is-open .nav-dropdown-menu {
  transform: translate(-50%, 0);
}

@media (max-width: 1360px) {
  .main-navbar .nav-inner { gap: 0.65rem; }
  .main-navbar .brand-box { min-width: auto; }
  .main-navbar .brand-text { display: none; }
  .main-navbar .nav-links-menu > a,
  .main-navbar .nav-dropdown-trigger { padding-inline: 0.58rem; font-size: 0.72rem; }
  .main-navbar .nav-profile-role { display: none; }
}

/* --- SOLO OCULTAR MENÚ EN MÓVIL PEQUEÑO (≤ 768px) --- */
@media (max-width: 768px) {
  .main-navbar .nav-inner { display: flex; min-height: 68px; }
  .main-navbar .brand-text { display: flex; }
  .main-navbar .nav-links-menu {
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    width: auto;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    padding: 12px;
    border-radius: 18px;
  }
  .main-navbar .nav-links-menu.mobile-open > a,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-trigger {
    width: 100%;
    min-height: 54px;
    padding: 0.65rem 0.8rem;
  }
}

/* ========================================================================== 
   SUBMEN? TERRITORIAL ? POSICIONAMIENTO Y ACABADO DE ALTA GAMA
   ?? POR QU?: el m?dulo layout.css no se carga en las p?ginas HTML heredadas.
   ?? C?MO: define el estado cerrado/abierto fuera del flujo y tarjetas accesibles.
   ?? QU?: disparador, panel flotante, cabecera, opciones, insignias y m?vil.
   ========================================================================== */
.main-navbar .nav-dropdown {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

.main-navbar .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 1300;
  display: grid;
  gap: 7px;
  width: 390px;
  min-width: 390px;
  padding: 12px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transform-origin: top left;
  border: 1px solid rgba(244, 230, 193, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(22, 93, 111, 0.34), transparent 48%),
    linear-gradient(145deg, rgba(10, 25, 35, 0.99), rgba(5, 12, 21, 0.99));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  transition: opacity 180ms ease, visibility 180ms ease, transform 220ms cubic-bezier(.16,1,.3,1);
}

.main-navbar .nav-dropdown:hover .nav-dropdown-menu,
.main-navbar .nav-dropdown:focus-within .nav-dropdown-menu,
.main-navbar .nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.main-navbar .mega-menu-header {
  display: grid;
  grid-template-columns: 34px max-content 1fr;
  align-items: center;
  gap: 10px;
  padding: 4px 5px 11px;
  color: #F4E6C1;
}

.main-navbar .mega-menu-header-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #F65E01, #165D6F);
}

.main-navbar .mega-menu-header-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.main-navbar .mega-menu-header-line { height: 1px; background: rgba(244, 230, 193, 0.15); }

.main-navbar .nav-dropdown-item {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px !important;
  min-height: 58px;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.035) !important;
  transform: none !important;
}

.main-navbar .nav-dropdown-item:hover,
.main-navbar .nav-dropdown-item:focus-visible {
  border-color: rgba(246, 94, 1, 0.46) !important;
  background: linear-gradient(100deg, rgba(246, 94, 1, 0.14), rgba(22, 93, 111, 0.2)) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.main-navbar .nav-dd-icon-box {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(105, 210, 200, 0.2);
  border-radius: 10px;
  color: #F4E6C1;
  background: rgba(22, 93, 111, 0.24);
}
.main-navbar .nav-dd-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.main-navbar .nav-dd-title { font-size: 0.8rem; font-weight: 800; color: #fff; }
.main-navbar .nav-dd-desc { overflow: hidden; font-size: 0.68rem; color: rgba(255,255,255,.5); text-overflow: ellipsis; white-space: nowrap; }
.main-navbar .nav-dd-badge { border-radius: 999px; padding: 3px 7px; color: #6EE7B7; background: rgba(16,185,129,.12); font-size: .64rem; font-weight: 800; }
.main-navbar .mega-menu-footer { display: flex; justify-content: center; gap: 5px; padding-top: 4px; }
.main-navbar .mega-menu-footer-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(244,230,193,.3); }

@media (max-width: 768px) {
  .main-navbar .nav-dropdown { display: block; width: 100%; }
  .main-navbar .nav-dropdown-menu {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    max-height: 0;
    margin: 0;
    padding-block: 0;
    opacity: 0;
    transform: none;
    border-width: 0;
  }
  .main-navbar .nav-dropdown.is-open .nav-dropdown-menu,
  .main-navbar .nav-dropdown:focus-within .nav-dropdown-menu {
    max-height: 430px;
    margin-top: 8px;
    padding-block: 12px;
    border-width: 1px;
  }
}

@media (max-width: 600px) {
  .main-navbar .nav-dropdown-item { min-height: 54px; }
  .main-navbar .nav-dd-desc { white-space: normal; }
}

/* ========================================================================== 
   NAVEGACI?N VISIBLE EN LAPTOP Y TABLET HORIZONTAL
   ?? POR QU?: evitar ocultar opciones esenciales detr?s del bot?n hamburguesa.
   ?? C?MO: recupera el modo horizontal entre 901 y 1200 px y compacta controles.
   ?? QU?: men? completo visible, acciones claras y submen? flotante alineado.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1200px) {
  .main-navbar .nav-inner {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) max-content;
    gap: 8px;
    min-height: 72px;
  }

  .main-navbar .brand-box {
    min-width: 44px;
  }

  .main-navbar .brand-text,
  .main-navbar .brand-logo-halo,
  .main-navbar .brand-accent-bar {
    display: none;
  }

  .main-navbar .nav-links-menu {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: 46px;
    max-height: none;
    padding: 4px;
    gap: 0;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    border-color: rgba(244, 230, 193, 0.12);
    border-radius: 14px;
  }

  .main-navbar .nav-links-menu > a,
  .main-navbar .nav-links-menu.mobile-open > a,
  .main-navbar .nav-dropdown-trigger,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-trigger {
    width: auto;
    min-height: 36px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.68rem;
  }

  .main-navbar .nav-links-menu .nav-icon-box {
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
  }

  .main-navbar .nav-dropdown {
    position: relative;
    display: inline-flex;
    width: auto;
    align-self: stretch;
  }

  .main-navbar .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 360px;
    min-width: 360px;
    max-height: none;
    margin: 0;
    padding: 12px;
    overflow: hidden;
    transform: translateY(10px) scale(0.98);
    border-width: 1px;
  }

  .main-navbar .nav-dropdown.is-open .nav-dropdown-menu,
  .main-navbar .nav-dropdown:hover .nav-dropdown-menu,
  .main-navbar .nav-dropdown:focus-within .nav-dropdown-menu {
    max-height: none;
    margin: 0;
    padding: 12px;
    transform: translateY(0) scale(1);
  }
}

/* ========================================================================== 
   PROCEDENCIA DE DATOS DEL OPS CENTER
   🎯 POR QUÉ: impedir que cifras de referencia se interpreten como producción.
   ⚙️ CÓMO: un estado global cambia entre demostración y Firestore verificado.
   📦 QUÉ: banner accesible, insignia de entorno y variantes responsivas.
   ========================================================================== */
.ops-data-provenance {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  margin: 0 1rem 1rem;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.82));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}

.ops-data-provenance.is-live {
  border-color: rgba(16, 185, 129, 0.34);
  background: linear-gradient(110deg, rgba(16, 185, 129, 0.11), rgba(15, 23, 42, 0.82));
}

.ops-data-provenance-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  color: #F4E6C1;
  background: rgba(245, 158, 11, 0.16);
}

.ops-data-provenance.is-live .ops-data-provenance-icon {
  color: #6EE7B7;
  background: rgba(16, 185, 129, 0.14);
}

.ops-data-provenance-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.ops-data-provenance-copy strong { font-family: var(--font-tech); font-size: 0.72rem; letter-spacing: 0.08em; color: #FBBF24; }
.ops-data-provenance.is-live .ops-data-provenance-copy strong { color: #6EE7B7; }
.ops-data-provenance-copy span { font-size: 0.72rem; line-height: 1.45; color: rgba(255, 255, 255, 0.56); }
.ops-data-provenance-badge {
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-tech);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.ops-data-provenance-badge.demo { color: #FBBF24; background: rgba(245, 158, 11, 0.1); }
.ops-data-provenance-badge.live { color: #6EE7B7; background: rgba(16, 185, 129, 0.1); }

@media (max-width: 640px) {
  .ops-data-provenance { grid-template-columns: 36px 1fr; margin-inline: 0.65rem; }
  .ops-data-provenance-icon { width: 36px; height: 36px; }
  .ops-data-provenance-badge { grid-column: 1 / -1; justify-self: start; }
}

/* ========================================================================== 
   CONTACTO INSTITUCIONAL A TODO LO ANCHO
   ?? POR QU?: convertir una tarjeta estrecha en un cierre institucional visible.
   ?? C?MO: ocupa la fila completa y distribuye los canales en m?dulos adaptables.
   ?? QU?: correo, enlace directo, sede y horario con jerarqu?a y accesibilidad.
   ========================================================================== */
.site-footer-pro .footer-columns-grid {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * ELIMINACIÓN DE TARJETAS SUPERIORES DEL FOOTER
 * 🎯 POR QUÉ: la identidad repetida y el listado de módulos ocupaban una fila
 * completa sin aportar una acción necesaria al cierre de cada página.
 * ⚙️ CÓMO: se retiran del renderizado las dos columnas compartidas en todas
 * las vistas y se conserva el contacto institucional en una sola columna fluida.
 * 📦 QUÉ: elimina visualmente .footer-col-brand y .footer-col-links de los
 * pies de página, tanto en escritorio como en tablet y móvil.
 */
.site-footer-pro .footer-col-brand,
.site-footer-pro .footer-col-links {
  display: none;
}

/*
 * ESTADO OPERATIVO DEL FOOTER CANÓNICO
 * 🎯 POR QUÉ: todas las páginas necesitan el mismo cierre visual que index.html.
 * ⚙️ CÓMO: usa una fila flexible y un distintivo compartido sin estilos embebidos.
 * 📦 QUÉ: telemetría activa y accesos finales adaptables a cualquier viewport.
 */
.site-footer-pro .footer-status-row,
.site-footer-pro .index-inline-044 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 850px) {
  .site-footer-pro .footer-columns-grid {
    grid-template-columns: 1fr;
  }
}

.site-footer-pro .footer-link-list {
  column-count: 2;
  column-gap: 2rem;
}

@media (max-width: 640px) {
  .site-footer-pro .footer-link-list {
    column-count: 1;
  }
}

.site-footer-pro .footer-col-contact {
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  min-height: 230px;
  padding: clamp(1.8rem, 3vw, 2.8rem);
  overflow: hidden;
  border: 1px solid rgba(246, 94, 1, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 5% 0%, rgba(246, 94, 1, 0.05), transparent 34%),
    radial-gradient(circle at 95% 100%, rgba(22, 93, 111, 0.06), transparent 38%),
    rgba(8, 14, 26, 0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.site-footer-pro .footer-col-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    linear-gradient(rgba(244, 230, 193, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 230, 193, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(90deg, #000, transparent 85%);
}

.site-footer-pro .footer-col-contact::after {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  width: min(620px, 70%);
  height: 190px;
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 94, 1, 0.15), transparent 68%);
  filter: blur(18px);
}

.site-footer-pro .footer-col-contact .footer-col-header {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 0 auto 2rem;
  padding: 0 2.2rem 1rem;
  color: #F4E6C1;
  font-size: clamp(0.88rem, 1.2vw, 1.08rem);
  letter-spacing: 0.2em;
  text-align: center;
  text-shadow: 0 0 24px rgba(246, 94, 1, 0.28);
}

.site-footer-pro .footer-col-contact .footer-col-header::before {
  content: '//';
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin-right: 0.7rem;
  color: #F65E01;
  background: none;
  box-shadow: none;
}

.site-footer-pro .footer-col-contact .footer-col-header::after {
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(246, 94, 1, 0.85), #F4E6C1, rgba(246, 94, 1, 0.85), transparent);
  box-shadow: 0 0 14px rgba(246, 94, 1, 0.5);
}

.site-footer-pro .footer-col-contact .footer-contact-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.2rem);
  width: min(1100px, 100%);
  margin: 0 auto;
}

.site-footer-pro .footer-col-contact .footer-contact-item {
  min-height: 108px;
  justify-content: flex-start;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(246, 94, 1, 0.18);
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(8, 14, 26, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.site-footer-pro .footer-col-contact .footer-contact-item:hover {
  transform: translateY(-6px);
  border-color: rgba(246, 94, 1, 0.4);
  background: linear-gradient(135deg, rgba(246, 94, 1, 0.09), rgba(22, 93, 111, 0.13));
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28), 0 0 28px rgba(246, 94, 1, 0.08);
}

.site-footer-pro .footer-col-contact .footer-contact-item > i {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(246, 94, 1, 0.24);
  border-radius: 14px;
  color: #F65E01;
  background: rgba(246, 94, 1, 0.1);
  box-shadow: 0 8px 24px rgba(246, 94, 1, 0.09);
  transition: transform 220ms ease, box-shadow 220ms ease, color 220ms ease;
}

.site-footer-pro .footer-col-contact .footer-contact-item:hover > i {
  transform: scale(1.08) rotate(-4deg);
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(246, 94, 1, 0.28);
}

.site-footer-pro .footer-col-contact .footer-contact-item span:first-child {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-footer-pro .footer-col-contact .footer-contact-item a,
.site-footer-pro .footer-col-contact .footer-contact-item div > span:last-child {
  color: #F4E6C1;
  font-size: 0.82rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
  .site-footer-pro .footer-col-contact .footer-contact-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .site-footer-pro .footer-col-contact .footer-contact-list { grid-template-columns: 1fr; width: min(520px, 100%); }
  .site-footer-pro .footer-col-contact .footer-contact-item { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .site-footer-pro .footer-col-contact { padding: 1.15rem; border-radius: 17px; }
  .site-footer-pro .footer-col-contact .footer-contact-list { grid-template-columns: 1fr; }
.site-footer-pro .footer-col-contact .footer-contact-item { min-height: 76px; }
}

/* ============================================================================
   NAVEGACIÓN ADAPTABLE — TABLET, PORTÁTIL, MÓVIL Y PANTALLA GRANDE
   🎯 POR QUÉ: el menú horizontal completo se comprimía en portátiles y tablets,
      haciendo difíciles de leer y pulsar sus opciones principales.
   ⚙️ CÓMO: una capa final autoritativa usa drawer centrado, altura dinámica,
      objetivos táctiles de 48 px y zonas seguras compatibles con iOS/iPadOS.
   📦 QUÉ: drawer lateral estable desde teléfonos hasta pantallas desktop/TV.
   ============================================================================ */
@media (max-width: 960px) {
  .main-navbar .nav-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 72px;
    gap: 12px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .main-navbar .nav-actions-right,
  .main-navbar .nav-right-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .main-navbar .nav-separator {
    display: none !important;
  }

  .main-navbar .nav-profile-btn {
    display: inline-flex !important;
    min-height: 46px;
    padding: 6px 11px;
  }

  .main-navbar .brand-text {
    display: flex;
    min-width: 0;
  }

  .main-navbar .mobile-nav-toggle {
    display: inline-flex !important;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 230, 193, 0.24);
    border-radius: 14px;
    color: #F4E6C1;
    background: linear-gradient(145deg, rgba(22, 93, 111, 0.58), rgba(15, 23, 42, 0.98));
  }

  .main-navbar .nav-links-menu,
  .main-navbar .nav-links-menu.mobile-open {
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 1600;
    display: flex;
    width: min(390px, 88vw);
    max-width: 88vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border: 0;
    border-right: 1px solid rgba(244, 230, 193, 0.2);
    border-radius: 0 24px 24px 0;
    background: linear-gradient(155deg, rgba(9, 28, 39, 0.99), rgba(5, 12, 21, 0.995));
    box-shadow: 28px 0 70px rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    transform: translateX(-105%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .main-navbar .nav-links-menu.mobile-open {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .main-navbar .nav-links-menu.mobile-open > a,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-trigger {
    width: 100%;
    min-height: 58px;
    padding: 9px 12px;
    border-radius: 14px;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dropdown,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-menu {
    width: 100%;
    min-width: 0;
  }

  .main-navbar .nav-drawer-header {
    display: flex;
    min-height: 64px;
    margin-bottom: 8px;
    padding: 4px 2px 14px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(244, 230, 193, 0.15);
  }

  .main-navbar .nav-drawer-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #fff;
    letter-spacing: 0.1em;
  }

  .main-navbar .nav-drawer-identity small {
    color: #F65E01;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .main-navbar .nav-drawer-close {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 230, 193, 0.22);
    border-radius: 14px;
    color: #F4E6C1;
    background: rgba(15, 23, 42, 0.86);
    cursor: pointer;
  }
}

/*
 * 🎯 POR QUÉ: separar visualmente el panel del contenido y evitar pulsaciones accidentales.
 * ⚙️ CÓMO: una capa global acompaña al drawer y el cuerpo bloquea su desplazamiento.
 * 📦 QUÉ: cierre por toque exterior, transición suave y contexto visual conservado.
 */
.nav-drawer-backdrop {
  display: none;
}

@media (min-width: 10000px) {
  .nav-drawer-header { display: none; }
}

@media (max-width: 9999px) {
  body.nav-drawer-open {
    overflow: hidden;
  }

  .nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    /* El navbar crea un contexto z-index 1000; el fondo debe quedar debajo
       para no cubrir el drawer que vive dentro de esa barra. */
    z-index: 999;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(2, 8, 15, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms ease, visibility 260ms ease;
  }

  body.nav-drawer-open .nav-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (hover: none) and (pointer: coarse) {
  .main-navbar .nav-links-menu.mobile-open > a:hover,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-trigger:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .main-navbar .brand-title { font-size: 0.96rem; }
  .main-navbar .brand-tagline { font-size: 0.54rem; }
  .main-navbar .sos-quick-btn { min-width: 96px; min-height: 44px; padding-inline: 10px; }
  .main-navbar .nav-profile-btn,
  .main-navbar .nav-separator { display: none !important; }
}

@media (max-width: 480px) {
  .main-navbar .brand-text { display: none; }
}

/* ========================================================================== */
/* NAVEGACIÓN ULTRACOMPACTA — PRIORIDAD AL MENÚ Y AL AUXILIO                  */
/* 🎯 POR QUÉ: evitar que los accesos secundarios desplacen el botón drawer.  */
/* ⚙️ CÓMO: reduce identidad y rótulos, conservando búsqueda, SOS y menú.      */
/* 📦 QUÉ: barra superior íntegra entre 320 px y 680 px.                       */
/* ========================================================================== */
@media (max-width: 680px) {
  .main-navbar .brand-text,
  .main-navbar .theme-btn-label { display: none !important; }
  .main-navbar .nav-inner { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: 10px; gap: 7px; }
  .main-navbar .nav-actions-right { gap: 6px; }
  .main-navbar .nav-theme-btn,
  .main-navbar .nav-search-btn,
  .main-navbar .mobile-nav-toggle { width: 42px; height: 42px; min-width: 42px; flex-basis: 42px; padding: 0; }
  .main-navbar .sos-quick-btn { min-width: 82px; min-height: 42px; padding-inline: 9px; font-size: 0.7rem; }
}

@media (max-width: 390px) {
  .main-navbar .nav-theme-btn { display: none !important; }
  .main-navbar .sos-quick-btn { min-width: 44px; width: 44px; padding: 0; }
  .main-navbar .sos-quick-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 1600px) {
  .main-navbar .nav-inner,
  .site-footer-pro > .container {
    width: min(92vw, 1760px);
    max-width: 1760px;
  }
}

/* ========================================================================== */
/* NAVEGACIÓN PÚBLICA — LENGUAJE VISUAL DEL CENTRO DE OPERACIONES            */
/* 🎯 POR QUÉ: dar al drawer público la jerarquía, confianza y lectura rápida */
/*    del centro operativo sin confundirlo con herramientas administrativas.  */
/* ⚙️ CÓMO: cabecera de producto, filas compactas, riel activo, estados y pie */
/*    informativo usando únicamente composición y animaciones aceleradas.      */
/* 📦 QUÉ: acabado compartido, accesible y responsivo para navegación lateral. */
/* ========================================================================== */
@media (max-width: 9999px) {
  .main-navbar .nav-links-menu,
  .main-navbar .nav-links-menu.mobile-open {
    width: min(390px, 92vw);
    max-width: 92vw;
    padding: 0 14px max(18px, env(safe-area-inset-bottom));
    gap: 2px;
    border-right: 1px solid rgba(244, 230, 193, 0.18) !important;
    border-radius: 0;
    background:
      radial-gradient(circle at 12% 0%, rgba(22, 93, 111, 0.42), transparent 45%),
      linear-gradient(180deg, #071520 0%, #0a1b2c 50%, #060e18 100%) !important;
    box-shadow: 28px 0 85px rgba(0, 0, 0, 0.9) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 230, 193, 0.22) transparent;
  }

  .main-navbar .nav-drawer-header {
    position: sticky;
    z-index: 4;
    top: 0;
    min-height: 80px;
    margin: 0 -14px 10px;
    padding: max(16px, env(safe-area-inset-top)) 18px 16px;
    justify-content: flex-start;
    gap: 12px;
    border-bottom: 1px solid rgba(244, 230, 193, 0.16);
    background: rgba(7, 21, 32, 0.98);
    backdrop-filter: blur(18px);
  }

  .main-navbar .nav-drawer-brand-mark {
    width: 46px;
    height: 46px;
    display: grid;
    flex: 0 0 46px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(244, 230, 193, 0.25);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(22, 93, 111, 0.8), rgba(15, 23, 42, 0.98));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255,255,255,0.1);
  }

  .main-navbar .nav-drawer-brand-mark img { width: 40px; height: 40px; object-fit: contain; }
  .main-navbar .nav-drawer-identity { flex: 1; gap: 2px; min-width: 0; }
  .main-navbar .nav-drawer-kicker { color: #F65E01; font-size: 0.64rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
  .main-navbar .nav-drawer-identity strong { color: #ffffff; font-size: 1.12rem; font-weight: 900; letter-spacing: 0.12em; }
  .main-navbar .nav-drawer-identity small { display: flex; align-items: center; gap: 6px; color: #CBD5E1; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: none; }
  .main-navbar .nav-drawer-identity small i { width: 7px; height: 7px; border-radius: 50%; background: #48d6a0; box-shadow: 0 0 10px rgba(72,214,160,0.85); }

  .main-navbar .nav-drawer-close {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 230, 193, 0.22);
    border-radius: 12px;
    color: #F4E6C1;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 200ms ease;
  }

  .main-navbar .nav-drawer-close:hover {
    background: #F65E01;
    border-color: #F65E01;
    color: #ffffff;
    transform: rotate(90deg);
  }

  /* ==========================================================================
     🧭 BAQUEANO ECOSYSTEM — NAVEGACIÓN LATERAL Y SUBMENÚS ACORDEÓN
     🎯 1. POR QUÉ:
     - Eliminar el solapamiento de tarjetas flotantes que cubrían y hacían
       ilegible el resto de opciones en el menú lateral.
     - Brindar un despliegue natural en bloque (in-flow) que expanda las
       opciones territoriales sin colisionar con los grupos inferiores.
     - Garantizar que el selector flotante de colores no obstruya el pie del drawer.
     ⚙️ 2. CÓMO:
     - position: static / relative en el submenú dentro del drawer para
       fluir de manera orgánica en el documento.
     - Sangría armónica con guía visual en naranja terracota (#F65E01),
       tarjetas compactas y micro-interacciones a 60fps.
     - Rotación de chevrón a 180° y transición suave de altura/opacidad.
     📦 3. QUÉ:
     - Reglas autoritativas para .nav-dropdown, .nav-dropdown-menu,
       .nav-dropdown-item y cabeceras de grupo dentro de .mobile-open.
     ========================================================================== */

  .main-navbar .nav-links-menu.mobile-open > a,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-trigger {
    position: relative;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    margin-bottom: 3px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.65);
    color: #ffffff !important;
    box-shadow: none;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, color 200ms ease;
  }

  .main-navbar .nav-links-menu.mobile-open > a:hover,
  .main-navbar .nav-links-menu.mobile-open > a.active,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-trigger:hover,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown.is-open > .nav-dropdown-trigger {
    color: #ffffff !important;
    border-color: rgba(246, 94, 1, 0.45);
    background: linear-gradient(90deg, rgba(22, 93, 111, 0.42), rgba(246, 94, 1, 0.18));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
    transform: translateX(3px);
  }

  .main-navbar .nav-links-menu.mobile-open > a.active::before,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown.is-open > .nav-dropdown-trigger::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #F65E01;
    box-shadow: 0 0 12px rgba(246, 94, 1, 0.7);
  }

  /* Encabezados de grupo en el drawer */
  .main-navbar .nav-ops-group-title {
    display: flex;
    width: 100%;
    min-height: 42px;
    margin: 10px 0 5px;
    padding: 8px 12px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(244, 230, 193, 0.16);
    border-radius: 12px;
    color: #ffffff;
    background: rgba(22, 93, 111, 0.28);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
  }

  .main-navbar .nav-ops-group-title .nav-ops-group-number {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(246, 94, 1, 0.45);
    border-radius: 7px;
    color: #F65E01;
    background: rgba(246, 94, 1, 0.2);
    font-size: 0.62rem;
    font-weight: 850;
  }

  .main-navbar .nav-ops-group-title b { min-width: 0; flex: 1; font: inherit; color: #ffffff !important; }
  .main-navbar .nav-ops-group-title small { color: #CBD5E1; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; text-transform: none; }
  .main-navbar .nav-ops-group-title > i { color: #F65E01; font-size: 0.72rem; transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease; }
  .main-navbar .nav-ops-group-title:hover,
  .main-navbar .nav-ops-group-title.is-expanded {
    border-color: rgba(246, 94, 1, 0.45);
    color: #ffffff;
    background: linear-gradient(90deg, rgba(22, 93, 111, 0.38), rgba(246, 94, 1, 0.18));
  }
  .main-navbar .nav-ops-group-title.is-expanded > i { color: #F65E01; transform: rotate(180deg); }
  .main-navbar .nav-links-menu.mobile-open > .nav-ops-item-collapsed { display: none !important; }

  /* Iconos y textos de navegación principal */
  .main-navbar .nav-links-menu.mobile-open :is(a,.nav-dropdown-trigger) .nav-item-content {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
  }

  .main-navbar .nav-links-menu.mobile-open :is(a,.nav-dropdown-trigger) .nav-icon-box {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 230, 193, 0.2);
    border-radius: 10px;
    background: rgba(22, 93, 111, 0.35);
    transition: all 200ms ease;
  }

  .main-navbar .nav-links-menu.mobile-open :is(a,.nav-dropdown-trigger) .nav-icon-box .nav-icon {
    color: #F4E6C1;
    font-size: 0.95rem;
    transition: color 200ms ease;
  }

  .main-navbar .nav-links-menu.mobile-open :is(a,.nav-dropdown-trigger):hover .nav-icon-box,
  .main-navbar .nav-links-menu.mobile-open > a.active .nav-icon-box,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown.is-open > .nav-dropdown-trigger .nav-icon-box {
    border-color: #F65E01;
    background: rgba(246, 94, 1, 0.25);
  }

  .main-navbar .nav-links-menu.mobile-open :is(a,.nav-dropdown-trigger):hover .nav-icon-box .nav-icon,
  .main-navbar .nav-links-menu.mobile-open > a.active .nav-icon-box .nav-icon,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown.is-open > .nav-dropdown-trigger .nav-icon-box .nav-icon {
    color: #ffffff;
  }

  .main-navbar .nav-links-menu.mobile-open :is(a,.nav-dropdown-trigger) .nav-label {
    font-size: 0.88rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.02em;
    color: #ffffff !important;
  }
  .main-navbar .nav-links-menu.mobile-open :is(a,.nav-dropdown-trigger) .nav-sublabel {
    margin-top: 2px;
    color: #A0B4C3;
    font-size: 0.65rem;
  }

  /* SUBMENÚ ANIDADO EN FLUJO TIPO ACORDEÓN (SIN SOLAPAMIENTO) */
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-caret {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    color: #CBD5E1 !important;
    font-size: 0.8rem !important;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dropdown.is-open > .nav-dropdown-trigger .nav-dropdown-caret {
    transform: rotate(180deg) !important;
    color: #F65E01 !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 220ms ease,
                visibility 220ms ease,
                margin 240ms ease,
                padding 240ms ease !important;
  }

  /* Impedir que :hover o :focus-within abra el submenú de forma no deseada en el drawer */
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown:not(.is-open):hover .nav-dropdown-menu,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown:not(.is-open):focus-within .nav-dropdown-menu {
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
  }

  /* Estado abierto: se expande orgánicamente en el flujo vertical */
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown.is-open > .nav-dropdown-menu {
    max-height: 480px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
    margin: 5px 0 8px 14px !important;
    padding: 5px 0 5px 12px !important;
    border-left: 2px solid #F65E01 !important;
    border-radius: 0 !important;
  }

  /* Cabecera del submenú dentro del drawer (limpia y sutil) */
  .main-navbar .nav-links-menu.mobile-open .mega-menu-header {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 3px 6px 7px !important;
    color: #F65E01 !important;
    border: none !important;
  }

  .main-navbar .nav-links-menu.mobile-open .mega-menu-header-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0.7rem !important;
    border-radius: 6px !important;
    background: rgba(246, 94, 1, 0.22) !important;
    color: #F65E01 !important;
  }

  .main-navbar .nav-links-menu.mobile-open .mega-menu-header-title {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #F4E6C1 !important;
  }

  .main-navbar .nav-links-menu.mobile-open .mega-menu-header-line {
    display: none !important;
  }

  /* Tarjetas de opciones secundarias dentro del submenú */
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    margin-bottom: 3px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(244, 230, 193, 0.1) !important;
    background: rgba(10, 20, 32, 0.85) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: none !important;
    transition: all 200ms ease !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-item:hover,
  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-item:focus-visible {
    border-color: #F65E01 !important;
    background: linear-gradient(90deg, rgba(22, 93, 111, 0.4), rgba(246, 94, 1, 0.25)) !important;
    transform: translateX(3px) !important;
    color: #ffffff !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dd-icon-box {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    border: 1px solid rgba(246, 94, 1, 0.4) !important;
    background: rgba(246, 94, 1, 0.18) !important;
    color: #F4E6C1 !important;
    font-size: 0.8rem !important;
    transition: all 200ms ease !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dropdown-item:hover .nav-dd-icon-box {
    background: #F65E01 !important;
    border-color: #F65E01 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(246, 94, 1, 0.6) !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dd-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dd-title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dd-desc {
    font-size: 0.68rem !important;
    color: #CBD5E1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  .main-navbar .nav-links-menu.mobile-open .nav-dd-badge {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: rgba(16, 185, 129, 0.25) !important;
    color: #6EE7B7 !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
  }

  /* Pie del drawer lateral */
  .main-navbar .nav-drawer-footer {
    display: flex;
    min-height: 66px;
    margin-top: auto;
    margin-bottom: 8px;
    padding: 12px 14px;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(244, 230, 193, 0.18);
    border-radius: 14px;
    background: rgba(22, 93, 111, 0.28);
  }

  .main-navbar .nav-drawer-footer > span { display: grid; grid-template-columns: 22px 1fr; flex: 1; align-items: center; gap: 4px; }
  .main-navbar .nav-drawer-footer > span > i { grid-row: 1 / 3; color: #48d6a0; font-size: 1.15rem; }
  .main-navbar .nav-drawer-footer b { color: #ffffff; font-size: 0.78rem; font-weight: 750; }
  .main-navbar .nav-drawer-footer small { color: #CBD5E1; font-size: 0.66rem; }
  .main-navbar .nav-drawer-footer > a {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(246, 94, 1, 0.45);
    border-radius: 10px;
    color: #ffffff;
    background: #F65E01;
    font-size: 0.95rem;
    transition: all 200ms ease;
  }
  .main-navbar .nav-drawer-footer > a:hover {
    background: #ff7b29;
    border-color: #ff7b29;
    transform: scale(1.08);
  }

  .main-navbar .nav-links-menu.mobile-open .nav-right-wrap { margin-left: auto; }
  .main-navbar .nav-links-menu.mobile-open .nav-arrow { color: #CBD5E1; font-size: 0.72rem; }
  .main-navbar .nav-links-menu.mobile-open .nav-item-badge { padding: 3px 7px; font-size: 0.58rem; letter-spacing: 0.04em; }
}

@media (min-width: 10000px) {
  .main-navbar .nav-drawer-brand-mark,
  .main-navbar .nav-drawer-footer,
  .main-navbar .nav-ops-group-title { display: none; }
}

/* Ocultar elementos redundantes fuera del menú principal en escritorio */
@media (min-width: 10000px) {
  .mobile-nav-toggle,
  .main-navbar .mobile-nav-toggle,
  .nav-profile-btn,
  .main-navbar .nav-profile-btn,
  .nav-separator,
  .main-navbar .nav-separator {
    display: none !important;
  }
}
/*
 * POR QUÉ: mantener legibles y consistentes los documentos legales extensos.
 * CÓMO: metadatos, listas y avisos usan la paleta oficial y rejillas adaptables.
 * QUÉ: presentación compartida para privacidad, aviso legal, cookies y términos.
 */
.legal-document-meta { display:flex; flex-wrap:wrap; gap:.65rem 1.25rem; margin:1.25rem 0 2rem; padding:1rem 1.25rem; border:1px solid rgba(244,230,193,.18); border-radius:14px; background:rgba(15,23,42,.55); color:#F4E6C1; font-size:.82rem; }
.legal-document-intro { margin-bottom:1.5rem; color:var(--text-muted); line-height:1.7; }
.legal-article-content { min-width:0; }
.legal-article-content p { line-height:1.7; }
.legal-article-content ul { margin:.8rem 0 1rem; padding-left:1.25rem; color:var(--text-muted); }
.legal-article-content li { margin:.4rem 0; line-height:1.55; }
.legal-review-note { margin:2rem 0; padding:1.15rem 1.3rem; border-left:4px solid #F65E01; border-radius:0 14px 14px 0; background:rgba(246,94,1,.1); color:#F4E6C1; line-height:1.6; }

/* ==========================================================================
   🎯 POR QUÉ: Evitar filas incompletas y tarjetas excesivamente anchas en tablet.
   ⚙️ CÓMO: Breakpoints finales específicos, con prioridad por orden CSS.
   📦 QUÉ: 3 columnas en escritorio/tablet horizontal, 2 en tablet vertical
      y 1 en móvil, conservando ancho y altura uniformes por fila.
   ========================================================================== */
@media (min-width: 900px) {
  .destinations-showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 681px) and (max-width: 899px) {
  .destinations-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .destinations-showcase-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* REGLAS AUTORITATIVAS DE NAVEGACIÓN Y SELECTOR DE TEMA */
.main-navbar .mobile-nav-toggle,
#mobileNavToggle {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1002 !important;
}

.main-navbar .nav-theme-btn,
#navThemeSwitcherBtn {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1002 !important;
}

@media (max-width: 9999px) {
  .main-navbar #navLinksMenu.mobile-open,
  .main-navbar .nav-links-menu.mobile-open {
    display: flex !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10060 !important;
  }

  body.nav-drawer-open .nav-drawer-backdrop {
    z-index: 10040 !important;
  }

  /* Ocultar botón flotante de temas cuando el drawer esté activo */
  body.nav-drawer-open #baqFloatingThemeBtn,
  body.nav-drawer-open .baq-theme-float-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(24px) scale(0.85) !important;
    transition: opacity 0.2s ease, transform 0.22s ease, visibility 0.2s ease !important;
  }
}

/* ==========================================================================
   🧭 PIE DE PÁGINA INSTITUCIONAL DE ALTA GAMA (DESKTOP COMPACTO: 250px - 310px)
   🎯 1. POR QUÉ (WHY / PROPÓSITO):
   - Reducir la huella vertical del pie institucional (.site-footer-pro) en
     pantallas de escritorio al rango estricto entre 250px y 310px.
   - Brindar un cierre visual panorámico, nítido y balanceado sin scroll excesivo,
     preservando la accesibilidad táctica de telemetría GPS, canales de contacto y
     enlaces regulatorios del ecoturismo soberano campesino de Nicaragua.
   ⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
   - Media query autoritativo para escritorio (min-width: 992px) con altura acotada
     entre 250px y 310px (altura objetivo exacta: 280px).
   - Centrado vertical simétrico con display flex en .site-footer-pro y contenedor.
   - Optimización de escala espacial:
     * Cinta HUD de telemetría compacta en píldora con micro-LED pulsante.
     * Tarjeta de contacto con distribución horizontal de 3 nodos (correo, whatsapp, sede).
     * Enlaces legales en una sola línea sutil con separadores terracota.
     * Barra de derechos y telemetría en línea sin desbordes.
   📦 3. QUÉ (WHAT / ENTREGABLES & SELECTORES):
   - .site-footer-pro: Contenedor con altura delimitada [250px, 310px], padding reducido.
   - .site-footer-pro > .container: Caja flex vertical ajustada.
   - .footer-telemetry-hud: Altura compacta (~28px) y márgenes reducidos.
   - .footer-columns-grid & .footer-col-contact: Altura optimizada (~80px).
   - .footer-contact-item: Altura 44px con iconos escalados a 30px.
   - .footer-legal-stack & .footer-bottom-bar: Tipografía y espaciado condensado.
   ========================================================================== */
@media (min-width: 992px) {
  .site-footer-pro {
    height: auto !important;
    min-height: 250px !important;
    max-height: 310px !important;
    padding: 0.5rem 0 0.75rem 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .site-footer-pro > .container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    gap: 0.25rem !important;
  }

  /* Cinta HUD de Telemetría Superior */
  .site-footer-pro .footer-telemetry-hud {
    margin-bottom: 0.25rem !important;
    padding: 0.2rem 0.85rem !important;
    border-radius: 9999px !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(22, 93, 111, 0.3) !important;
  }

  .site-footer-pro .hud-stat-item {
    font-size: clamp(0.64rem, 0.72vw, 0.72rem) !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
  }

  .site-footer-pro .hud-beacon-led {
    width: 6px !important;
    height: 6px !important;
  }

  /* Grid de Columnas y Tarjeta de Contacto */
  .site-footer-pro .footer-columns-grid {
    margin-bottom: 0.25rem !important;
    gap: 0.35rem !important;
  }

  .site-footer-pro .footer-col-contact {
    min-height: auto !important;
    height: auto !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 12px !important;
    background: rgba(8, 14, 26, 0.16) !important;
    border: 1px solid rgba(246, 94, 1, 0.2) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  }

  .site-footer-pro .footer-col-contact::after {
    top: -30px !important;
    height: 80px !important;
    opacity: 0.45 !important;
  }

  .site-footer-pro .footer-col-contact .footer-col-header {
    font-size: 0.71rem !important;
    letter-spacing: 0.14em !important;
    margin: 0 auto 0.25rem !important;
    padding: 0 1rem 0.15rem !important;
    text-shadow: 0 0 16px rgba(246, 94, 1, 0.3) !important;
  }

  .site-footer-pro .footer-col-contact .footer-contact-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .site-footer-pro .footer-col-contact .footer-contact-item {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0.25rem 0.6rem !important;
    gap: 0.5rem !important;
    border-radius: 9px !important;
    background: rgba(8, 14, 26, 0.22) !important;
    border: 1px solid rgba(246, 94, 1, 0.16) !important;
  }

  .site-footer-pro .footer-col-contact .footer-contact-item:hover {
    transform: translateY(-2px) !important;
  }

  .site-footer-pro .footer-col-contact .footer-contact-item > i {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    font-size: 0.78rem !important;
    border-radius: 7px !important;
  }

  .site-footer-pro .footer-col-contact .footer-contact-item span:first-child {
    font-size: 0.6rem !important;
    letter-spacing: 0.03em !important;
    line-height: 1 !important;
  }

  .site-footer-pro .footer-col-contact .footer-contact-item a,
  .site-footer-pro .footer-col-contact .footer-contact-item div > span:last-child {
    font-size: 0.73rem !important;
    line-height: 1.15 !important;
  }

  /* Pila de Enlaces Legales */
  .site-footer-pro .footer-legal-stack {
    margin-top: 0.1rem !important;
    margin-bottom: 0.1rem !important;
    padding: 0.1rem 0 !important;
    gap: 0.45rem !important;
    font-size: 0.69rem !important;
    line-height: 1.2 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .site-footer-pro .footer-legal-stack a {
    font-size: 0.69rem !important;
    color: var(--text-muted) !important;
  }

  .site-footer-pro .footer-legal-stack .separator {
    color: rgba(246, 94, 1, 0.4) !important;
    font-size: 0.68rem !important;
  }

  /* Barra de Copyright Centrada (Botones Removidos) */
  .site-footer-pro .footer-bottom-bar {
    margin-top: 0.15rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.35rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }

  .site-footer-pro .footer-bottom-bar > div:first-child,
  .site-footer-pro .footer-copyright-text {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    white-space: normal !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .site-footer-pro .footer-status-row,
  .site-footer-pro .index-inline-044 {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ============================================================================
   🧭 METADATOS DE PROCEDENCIA Y VERIFICACIÓN EN FICHAS (.dest-provenance-bar)
   🎯 Transparencia metodológica y rigor de datos para jurado de competencia.
   ============================================================================ */
.dest-provenance-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.35rem 0.65rem !important;
  padding: 0.4rem 0.7rem !important;
  margin-top: 0.65rem !important;
  background: rgba(2, 6, 23, 0.72) !important;
  border-top: 1px dashed rgba(244, 230, 193, 0.22) !important;
  border-radius: 8px !important;
  font-size: 0.68rem !important;
  line-height: 1.3 !important;
}

.dest-provenance-bar .prov-status {
  color: #2DD4BF !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.dest-provenance-bar .prov-source {
  color: #F4E6C1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.dest-provenance-bar .prov-date {
  color: #94A3B8 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

/* ============================================================================
   BAQUEANO — SUPERFICIE CLARA GLOBAL
   ============================================================================
   POR QUÉ: Mantener una base visual luminosa y uniforme mientras cada sección
   conserva sus acentos institucionales y su jerarquía editorial.
   CÓMO: Fija el lienzo raíz en blanco, neutraliza fondos heredados del tema
   oscuro y conserva las tarjetas y bloques con identidad propia.
   QUÉ: Fondo blanco adaptable para todas las páginas públicas del portal.
   ============================================================================ */
:root {
  color-scheme: light;
  --baqueano-page-background: #ffffff;
  --baqueano-page-foreground: #0f172a;
}

html,
body,
body[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--baqueano-page-background) !important;
  color: var(--baqueano-page-foreground);
}

body::before,
body::after {
  background-color: transparent;
}
/*
============================================================================
BAQUEANO — LÍMITE FINAL DEL FOOTER Y MODALES GLOBALES
============================================================================
POR QUÉ:
- Los paneles auxiliares no deben convertirse en contenido visible después del
  footer; el pie institucional debe cerrar visualmente cada página.

CÓMO:
- Todo modal heredado permanece fuera del flujo cuando está cerrado.
- Solo los estados explícitos de apertura crean una capa fija sobre la página.
- La regla es global para proteger páginas antiguas con estilos incompletos.

QUÉ:
- Ocultamiento seguro del SOS cerrado y presentación accesible al abrirlo.
============================================================================
*/
.exact-modal-backdrop[aria-hidden="true"],
.exact-modal-backdrop:not(.is-open):not(.active):not(.open) {
  display: none !important;
}

.exact-modal-backdrop.is-open,
.exact-modal-backdrop.active,
.exact-modal-backdrop.open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  overflow-y: auto !important;
  background: rgba(15, 23, 42, .78) !important;
  backdrop-filter: blur(10px);
}
/*
 * 🎯 POR QUÉ: mantener la navegación superior enfocada y sin búsqueda redundante.
 * ⚙️ CÓMO: oculta defensivamente variantes heredadas antes de que el inyector las retire.
 * 📦 QUÉ: barra global sin botón de lupa en escritorio y móvil.
 */
.global-search,
.navbar-search-btn { display: none !important; }