@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');
/* ==========================================================================
   AVANSIS BCDR | CHILE DATTO SOLUTION
   Theme: Google Material 3 Modern Light Design (#F8FAFC)
   Accents: Google Sapphire Blue (#2563EB) & Datto Emerald (#059669)
   High-Contrast Crisp Surfaces, Dark Readable Typography & Elevation Shadows
   Full Mobile Responsive (<480px, <768px, <1024px, <1200px) & Touch Optimized
   ========================================================================== */

:root {
  /* Page Background - Google Modern Soft Slate System (#F8FAFC) */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-input: #ffffff;

  /* Header Design Tokens */
  --header-bg: #0f172a;
  --header-border: #1e293b;
  --header-height-desktop: 60px;
  --header-height-mobile: 56px;

  /* Google Color System */
  --brand-blue: #2563eb;
  --brand-blue-hover: #1d4ed8;
  --brand-emerald: #059669;
  --brand-emerald-hover: #047857;

  --lime-accent: #2563eb;
  --lime-dark-text: #ffffff;
  --label-inactive: #cbd5e1;
  --label-hover-bg: rgba(255, 255, 255, 0.1);
  --label-hover-color: #ffffff;

  --border-color: #cbd5e1;
  --border-highlight: #94a3b8;

  /* High-Contrast Black & Dark Slate Typography */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;

  /* Status Badges */
  --status-danger: #dc2626;
  --status-danger-bg: #fef2f2;
  --status-warning: #d97706;
  --status-warning-bg: #fffbeb;
  --status-info: #0284c7;
  --status-info-bg: #f0f9ff;
  --status-success: #059669;
  --status-success-bg: #ecfdf5;

  --datto-cyan: #0284c7;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radius & Google Elevation Shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --card-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  --card-shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.14);
}

/* Global Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

svg {
  max-width: 100%;
  height: auto;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  background-image: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.04) 0%, transparent 60%);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.drawer-open,
body.modal-open {
  overflow: hidden !important;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

p, span, li, label, td, th {
  color: inherit;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
}

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

:focus-visible {
  outline: 2px solid var(--brand-blue) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   Header Navigation (#0F172A Deep Navy Surface)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  height: var(--header-height-desktop);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-container {
  max-width: 1440px;
  width: 100%;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-logo-mark {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #2563eb, #059669);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo-mark svg {
  width: 18px !important;
  height: 18px !important;
  fill: #ffffff;
}

.brand-wordmark {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff !important;
}

.brand-chip-chile {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.header-divider {
  width: 1px;
  height: 20px;
  background-color: var(--header-border);
  margin: 0 8px;
}

.header-nav {
  display: flex;
  align-items: center;
}

.nav-item-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-link-btn,
.nav-dropdown-trigger {
  font-size: 13px;
  font-weight: 600;
  color: var(--label-inactive) !important;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
}

.nav-link-btn:hover,
.nav-dropdown-trigger:hover {
  background-color: var(--label-hover-bg);
  color: #ffffff !important;
}

.active-nav-item,
.nav-link-btn[aria-current="page"],
.nav-dropdown-trigger[aria-current="page"] {
  background-color: var(--brand-blue) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

/* --------------------------------------------------------------------------
   Header Dropdown Menu System (Cumplimiento, Herramientas BCP, Mercado)
   -------------------------------------------------------------------------- */
.nav-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.18);
  padding: 6px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown-menu[hidden] {
  display: none !important;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a !important;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: all 0.15s ease;
  min-height: 40px;
}

.nav-dropdown-item:hover {
  background-color: #f1f5f9;
  color: var(--brand-blue) !important;
}

.nav-dropdown-item.active-nav-item,
.nav-dropdown-item[aria-current="page"] {
  background-color: var(--brand-blue) !important;
  color: #ffffff !important;
}

.dropdown-item-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.header-right-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-trigger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--header-border);
  color: var(--label-inactive) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  min-height: 36px;
}

.kbd-badge {
  font-size: 10px;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--label-inactive) !important;
  font-family: var(--font-mono);
}

.chip-datto-partner {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff !important;
  background: rgba(5, 150, 105, 0.2);
  border: 1px solid rgba(5, 150, 105, 0.4);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.chip-datto-partner::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10b981;
}

.user-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--header-border);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.hamburger-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  border-radius: var(--radius-sm);
}

.hamburger-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile Drawer Overlay */
.mobile-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.mobile-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background-color: var(--header-bg);
  border-left: 1px solid var(--header-border);
  z-index: 2001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 20px;
  overflow-y: auto;
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--header-border);
  margin-bottom: 20px;
}

.drawer-close-btn {
  width: 40px;
  height: 40px;
  color: var(--label-inactive) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.drawer-nav-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drawer-link-btn {
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff !important;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  min-height: 44px;
}

.drawer-link-btn:hover,
.drawer-link-btn[aria-current="page"] {
  background-color: var(--brand-blue);
  color: #ffffff !important;
}

.drawer-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-group-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 14px;
}

.drawer-item-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #cbd5e1;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: all 0.15s ease;
  min-height: 44px;
}

.drawer-item-btn:hover,
.drawer-item-btn[aria-current="page"] {
  background-color: var(--brand-blue);
  color: #ffffff !important;
}

.drawer-item-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   Dual View Toggle Switch (Executive CEO vs Technical CTO Mode)
   -------------------------------------------------------------------------- */
.dual-perspective-wrapper {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.75rem;
  margin-bottom: 2rem;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.view-mode-selector {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid #cbd5e1;
}

.view-mode-btn {
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  min-height: 40px;
}

.view-mode-btn:hover {
  color: #0f172a !important;
}

.view-mode-btn.active {
  background: #ffffff;
  color: var(--brand-blue) !important;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* --------------------------------------------------------------------------
   Main Content Layout & Google Light Card Styling (Black Text Enforced)
   -------------------------------------------------------------------------- */
main.main-content {
  flex: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.hero-section {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  box-shadow: var(--card-shadow);
}

.hero-title {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.15;
  color: #0f172a !important;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: #334155 !important;
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

.btn-primary {
  background-color: var(--brand-blue);
  color: #ffffff !important;
  font-weight: 700;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: background-color 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  min-height: 44px;
}

.btn-primary:hover {
  background-color: var(--brand-blue-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #ffffff;
  color: #0f172a !important;
  border: 1.5px solid var(--border-color);
  font-weight: 700;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  min-height: 44px;
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

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

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

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--card-shadow);
  color: #334155 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card h3 {
  color: #0f172a !important;
}

.card p {
  color: #334155 !important;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.tool-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--card-shadow);
  color: #334155 !important;
}

.tool-box h3, .tool-box label {
  color: #0f172a !important;
}

.directory-table {
  width: 100%;
  border-collapse: collapse;
}

.directory-table th {
  padding: 0.85rem 1rem;
  background: #f1f5f9;
  color: #0f172a !important;
  font-weight: 700;
  border-bottom: 2px solid #cbd5e1;
  text-align: left;
}

.directory-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  color: #334155 !important;
}

/* --------------------------------------------------------------------------
   Chile Risk Map 16-Region Full View (Google Light Styling)
   -------------------------------------------------------------------------- */
.map-container-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.5rem;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.region-sidebar {
  background: #f8fafc;
  border-right: 1.5px solid #cbd5e1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.region-search {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a !important;
  font-size: 0.88rem;
  min-height: 42px;
}

.region-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 640px;
  padding-right: 2px;
}

.region-item {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
}

.region-item:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.region-item.active {
  background: #eff6ff;
  border-color: var(--brand-blue);
  color: var(--brand-blue) !important;
  font-weight: 700;
}

.region-risk-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.risk-high { background: var(--status-danger-bg); color: var(--status-danger) !important; border: 1px solid #fecaca; }
.risk-med { background: var(--status-warning-bg); color: var(--status-warning) !important; border: 1px solid #fde68a; }
.risk-low { background: var(--status-success-bg); color: var(--status-success) !important; border: 1px solid #a7f3d0; }

.map-main-display {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.chile-map-svg-wrapper {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.chile-regions-full-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  width: 100%;
}

.map-region-card-btn {
  text-align: left;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  cursor: pointer;
  color: #0f172a !important;
  transition: all 0.2s ease;
}

.map-region-card-btn:hover {
  background: #f8fafc;
  border-color: var(--brand-blue);
}

.map-region-card-btn.active {
  background: #eff6ff !important;
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.15);
}

.hazard-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.hazard-info-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  padding: 1.1rem;
  border-radius: var(--radius-sm);
}

.hazard-info-title {
  font-size: 0.8rem;
  color: #475569 !important;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.hazard-info-value {
  font-size: 0.92rem;
  color: #0f172a !important;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   BCP Wizard & Showcase Styles
   -------------------------------------------------------------------------- */
.wizard-steps {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.step-item {
  flex: 1;
  min-width: 140px;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: #334155 !important;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  min-height: 42px;
}

.step-item.active {
  background: var(--brand-blue);
  color: #ffffff !important;
  border-color: var(--brand-blue);
  font-weight: 700;
}

.step-item.completed {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669 !important;
}

.plan-preview-box {
  background: #ffffff;
  color: #0f172a !important;
  padding: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1);
}

.dashboard-showcase-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--card-shadow);
}

.showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.showcase-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f172a !important;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.showcase-chip {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: #eff6ff;
  color: var(--brand-blue) !important;
  border: 1px solid #bfdbfe;
  text-transform: uppercase;
}

.showcase-img-container {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #ffffff;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.showcase-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.showcase-zoom-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #0f172a;
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 6px;
}

.showcase-details-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.showcase-detail-pill {
  font-size: 0.82rem;
  color: #334155 !important;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

/* Lightbox Modal */
.image-lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.image-lightbox-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content-box {
  position: relative;
  max-width: 1200px;
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
  background: #ffffff;
}

.lightbox-caption {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #ffffff !important;
  font-weight: 600;
}

.lightbox-close-btn {
  position: absolute;
  top: -45px;
  right: 0;
  color: #ffffff !important;
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer */
.site-footer {
  background-color: #0f172a;
  color: #ffffff !important;
  padding: 3rem 2rem;
  margin-top: 4rem;
}

.footer-content {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE MEDIA QUERIES (MOBILE, TABLET & TOUCH OPTIMIZATION)
   ========================================================================== */

/* Laptop & Small Desktop (< 1200px) */
@media (max-width: 1200px) {
  .header-container {
    padding: 0 16px;
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet Landscape & Medium Displays (< 1024px) */
@media (max-width: 1024px) {
  .header-nav {
    display: none; /* Mobile Drawer takes over */
  }
  .hamburger-btn {
    display: flex !important;
  }
  .search-trigger-btn span {
    display: none;
  }
  .hero-section {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
  }
  .hero-title {
    font-size: 2.2rem;
  }
  .chile-regions-full-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .map-container-layout {
    grid-template-columns: 1fr;
  }
  .region-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .region-list {
    max-height: 240px;
  }
}

/* Tablet Portrait & Large Phones (< 768px) */
@media (max-width: 768px) {
  main.main-content {
    padding: 1rem;
  }

  .dual-perspective-wrapper {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    gap: 0.85rem;
  }
  .view-mode-selector {
    width: 100%;
    flex-direction: column;
    gap: 6px;
  }
  .view-mode-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem;
  }

  .grid-3, .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .hero-title {
    font-size: 1.85rem;
  }
  .hero-subtitle {
    font-size: 0.98rem;
  }
  .btn-primary, .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .showcase-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .wizard-steps {
    flex-direction: column;
    gap: 0.4rem;
  }
  .step-item {
    width: 100%;
    text-align: left;
  }

  .form-factor-filter-btn {
    flex: 1 1 calc(50% - 0.5rem);
    text-align: center;
  }

  .hazard-details-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding: 2rem 1rem;
  }
  .footer-content {
    flex-direction: column;
    gap: 2rem;
  }
}

/* Mobile Devices (< 480px) */
@media (max-width: 480px) {
  .brand-wordmark {
    font-size: 13px;
  }
  .brand-chip-chile {
    font-size: 10px;
    padding: 1px 5px;
  }
  .chip-datto-partner {
    display: none; /* Hide non-essential badge on ultra-small screens */
  }
  .form-factor-filter-btn {
    flex: 1 1 100%;
  }
  .chile-regions-full-grid {
    grid-template-columns: 1fr;
  }
  .lightbox-content-box {
    padding: 0 10px;
  }
  .lightbox-close-btn {
    top: -38px;
    right: 5px;
  }
}

/* Avansis visual system adapted to the BCDR palette. Presentation only. */
:root{--font-family:Inter,Arial,Helvetica,sans-serif;--font-heading:Inter,Arial,Helvetica,sans-serif;--font-mono:'IBM Plex Mono',Consolas,monospace;--radius-sm:2px;--radius-md:2px;--radius-lg:2px;--card-shadow:none;--card-shadow-hover:none;--border-color:#e2e8f0;--header-height-desktop:82px;--header-height-mobile:76px}
body{background-image:none;font-size:16px;line-height:1.6}button,input,select,textarea{font-family:var(--font-family)}h1,h2,h3,h4{font-weight:400!important}h2{line-height:1.08!important;letter-spacing:-.055em}h3{line-height:1.22!important;letter-spacing:-.04em}p{line-height:1.8!important}
.site-header{background:rgba(248,250,252,.94);border-color:var(--border-color);backdrop-filter:blur(20px)}.header-container,.footer-content{max-width:1320px;width:calc(100% - 80px);padding-inline:0}.header-container{gap:24px}.header-container .brand-block img{height:48px!important;max-height:48px!important}.header-divider{background:var(--border-color)}.nav-item-list{gap:14px}.nav-link-btn,.nav-dropdown-trigger{color:#334155!important;font-weight:400;padding:10px 8px}.nav-link-btn:hover,.nav-dropdown-trigger:hover{background:#f1f5f9;color:#2563eb!important}.nav-link-btn[aria-current="page"],.nav-dropdown-trigger[aria-current="page"]{background:transparent!important;color:#2563eb!important;font-weight:500!important;border-radius:0!important;box-shadow:inset 0 -1px #2563eb}.nav-dropdown-menu{padding:10px;border-radius:2px;box-shadow:0 20px 50px #0f172a12}.nav-dropdown-item{font-weight:400;padding:13px 12px}.brand-chip-chile{font:10px/1.4 var(--font-mono)!important;color:#0284c7!important;background:#f0f9ff!important;border-color:#cbd5e1!important;border-radius:999px!important}.chip-datto-partner{font:10px/1.4 var(--font-mono);color:#047857!important;background:#ecfdf5;border-color:#a7f3d0;padding:7px 11px}.hamburger-btn{color:#0f172a!important;border:1px solid #cbd5e1;border-radius:999px}.mobile-drawer{background:#f8fafc;border-color:#cbd5e1}.drawer-header,.drawer-group{border-color:#e2e8f0}.drawer-close-btn,.drawer-link-btn,.drawer-item-btn{color:#334155!important;font-weight:400}.drawer-group-title{color:#475569;font:10px/1.5 var(--font-mono);letter-spacing:.08em}.drawer-link-btn[aria-current="page"],.drawer-item-btn[aria-current="page"],.drawer-item-btn:hover{color:white!important}
main.main-content{width:min(1320px,calc(100% - 80px));max-width:1320px;padding:0}.tab-pane{padding-block:90px 40px}#tab-home{padding-top:0}.tab-pane>h2,.tab-pane>div:first-child>h2{font-size:clamp(38px,4.1vw,64px)!important;max-width:1000px;margin-bottom:24px!important}.tab-pane>div:first-child:has(>h2),.tab-pane>h2+p{margin-bottom:58px!important}.tab-pane>div:first-child>p{max-width:780px;font-size:15px!important}
.btn-primary,.btn-secondary{min-height:48px;border-radius:999px!important;padding:13px 21px!important;font-size:13px!important;font-weight:500!important;box-shadow:none;line-height:1.5;transition:background .2s,transform .2s}.btn-primary{border:1px solid transparent}.btn-secondary{background:transparent;border-width:1px}.btn-secondary:hover{background:#f1f5f9;transform:translateY(-2px)}.card,.tool-box,.dashboard-showcase-card,.dual-perspective-wrapper,.plan-preview-box{border-radius:2px;box-shadow:none!important;padding:34px}.card:hover{transform:none;box-shadow:none;border-color:#94a3b8}.main-content :is(div,section,article)[style*="border-radius"]{border-radius:2px!important}.main-content :is(div,section,article)[style*="box-shadow"]{box-shadow:none!important}.main-content :is(div,section,article)[style*="border-top: 4px"]{border-top-width:1px!important}.main-content :is(h3,h4)[style]{font-weight:400!important}.main-content h3{font-size:25px!important}.main-content h4{font-size:20px!important}.showcase-chip,.showcase-detail-pill,.region-risk-tag{font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.03em;border-radius:999px}.showcase-chip{padding:6px 11px;margin-bottom:18px!important}.showcase-title{font-weight:400;letter-spacing:-.04em}.grid-2,.grid-3{gap:24px}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea{min-width:0;max-width:100%;min-height:49px;border-radius:0!important;border-width:1px!important;padding:12px 14px!important;font:13px/1.5 var(--font-family)!important}input[type="range"]{accent-color:#2563eb}label{font-family:var(--font-mono);font-size:11px!important;font-weight:400!important;line-height:1.7}.directory-table th{font:11px/1.6 var(--font-mono);padding:18px;border-bottom-width:1px}.directory-table td{padding:18px;font-size:13px}.form-factor-filter-btn,.step-item,.view-mode-btn{font-size:12px!important;font-weight:500!important;border-radius:999px!important;min-height:44px}.view-mode-selector{border-radius:999px}.region-item,.map-region-card-btn,.hazard-info-card,.map-container-layout,.chile-map-svg-wrapper{border-radius:2px;box-shadow:none;border-width:1px}.region-item,.map-region-card-btn{font-weight:400}.hazard-info-title{font:10px/1.5 var(--font-mono);letter-spacing:.05em}.map-region-card-btn.active{box-shadow:none}.showcase-img-container{padding:28px;border-radius:2px}.showcase-zoom-overlay{font:10px/1.5 var(--font-mono)}.main-content :is(div,section,article){min-width:0}
/* Split hero and section rhythm match the latest Avansis reference. */
#tab-home>section{margin-bottom:0!important;border:0;border-bottom:1px solid #e2e8f0;border-radius:0!important;padding:120px 0!important;background:transparent;box-shadow:none!important}#tab-home>section:first-child{min-height:calc(100vh - 82px);display:flex;align-items:center;padding-block:90px 110px!important;background:radial-gradient(ellipse at 80% 45%,#eff6ff 0,transparent 56%)}#tab-home>section:first-child>div{width:100%;grid-template-columns:1.12fr .88fr!important;gap:82px!important}#tab-home h1{font-size:clamp(56px,5.25vw,80px)!important;line-height:.99!important;letter-spacing:-.074em!important;font-weight:400!important;margin-bottom:34px!important}#tab-home>section:first-child>div>div:first-child>p{max-width:500px!important;font-size:17px!important;line-height:1.75!important;color:#475569!important;margin-bottom:34px!important}.x-pill-badge{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font:10px/1.6 var(--font-mono);letter-spacing:.04em;color:#475569;margin-bottom:28px!important}.x-badge-new{border:1px solid #cbd5e1;border-radius:999px;padding:5px 10px;color:#2563eb}.x-badge-text{flex:1;min-width:180px}
#tab-home>section:first-child>div>div:last-child{height:auto!important;min-height:430px;background:#0f172a!important;border:1px solid #334155;padding:34px!important;border-radius:2px!important;box-shadow:0 38px 90px #0f172a20!important;gap:40px}#tab-home>section:first-child>div>div:last-child>div:first-child>span{font:10px/1.6 var(--font-mono)!important;font-weight:400!important;display:inline-block}#tab-home>section:first-child>div>div:last-child>div:first-child>div:first-of-type{font-size:clamp(44px,4.8vw,70px)!important;font-weight:400!important;letter-spacing:-.055em;margin-top:30px!important}#tab-home>section:first-child>div>div:last-child>div:first-child>div:last-child{font-size:15px!important;font-weight:400!important;margin-top:12px}#tab-home>section:first-child>div>div:last-child>div:last-child{font:11px/1.8 var(--font-mono);padding-top:26px!important;gap:14px!important}
#tab-home h2{font-size:clamp(38px,4.1vw,64px)!important;max-width:900px;margin-bottom:24px!important}#tab-home>section:not(:first-child)>div:first-child{margin-bottom:58px!important}#tab-home>section:nth-child(2)>div:first-child>p{font-size:15px!important;max-width:640px;color:#475569!important}#tab-home>section:nth-child(2)>div:last-child{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;border-block:1px solid #cbd5e1}#tab-home>section:nth-child(2) .x-card{padding:36px 26px!important;border-left:1px solid #cbd5e1}#tab-home>section:nth-child(2) .x-card:first-child{border-left:0}#tab-home>section:nth-child(2) .x-card>div:first-child{margin-bottom:52px!important}#tab-home>section:nth-child(2) .x-card p{font-size:13px!important;margin-top:18px}
#tab-home>section:nth-child(3)>div:last-child{gap:0!important;border:1px solid #cbd5e1}#tab-home>section:nth-child(3)>div:last-child>div{padding:36px!important;border:0!important;border-left:1px solid #cbd5e1!important;background:#f1f5f9!important}#tab-home>section:nth-child(3)>div:last-child>div:first-child{border-left:0!important;background:#0f172a!important}#tab-home>section:nth-child(3)>div:last-child>div:first-child :is(div,h3,p){color:#fff!important}#tab-home>section:nth-child(3)>div:last-child>div>div{font:10px/1.7 var(--font-mono)!important;margin-bottom:46px!important;letter-spacing:.04em}#tab-home>section:nth-child(3) h3{margin-bottom:22px!important}#tab-home>section:nth-child(3) p{font-size:13px!important}
#tab-home>section:last-child{background:#0f172a!important;color:#fff;padding:64px!important;margin-top:60px}#tab-home>section:last-child :is(h3,p,span){color:#fff!important}#tab-home>section:last-child h3{font-size:36px!important;max-width:760px;margin-block:22px!important}#tab-home>section:last-child>div{margin:0!important}
.site-footer{background:#f8fafc;color:#334155!important;padding:60px 0 32px;margin-top:80px;border-top:1px solid #e2e8f0}.footer-content{gap:50px}.site-footer [style*="color:"]{color:#475569!important}.site-footer p{font-size:13px!important}.footer-content>div:last-child{font-family:var(--font-mono);font-size:10px;gap:48px!important}.footer-content>div:last-child>div>div:first-child{font-size:10px!important;letter-spacing:.06em;font-weight:400!important;padding-bottom:16px;border-bottom:1px solid #cbd5e1}.footer-content>div:last-child>div>div:last-child{font-size:10px!important;line-height:1.9}
@media(max-width:1200px){.nav-item-list{gap:4px}#tab-home>section:first-child>div{gap:40px!important}#tab-home h1{font-size:60px!important}#tab-home>section:nth-child(2)>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))!important}#tab-home>section:nth-child(2) .x-card:nth-child(3){border-left:0}#tab-home>section:nth-child(2) .x-card:nth-child(n+3){border-top:1px solid #cbd5e1}}
@media(max-width:1024px){main.main-content,.header-container,.footer-content{width:calc(100% - 48px)}#tab-home h1{font-size:52px!important}#tab-home>section:first-child>div{gap:28px!important}#tab-home>section:first-child>div>div:last-child{padding:24px!important}#tab-home>section{padding-block:90px!important}.tab-pane{padding-top:70px}#tab-contact>.grid-3{grid-template-columns:1fr}}
@media(max-width:767px){main.main-content,.header-container,.footer-content{width:calc(100% - 36px)}main.main-content{padding:0}.site-header{height:76px}.header-container{gap:12px}.header-container .brand-block img{height:36px!important;max-height:36px!important}.header-divider{display:none}.header-right-cluster{gap:8px}.chip-datto-partner{font-size:8px;padding:6px}.tab-pane{padding-block:60px 20px}#tab-home>section:first-child{min-height:auto;padding-block:70px!important}#tab-home>section:first-child>div{grid-template-columns:1fr!important;gap:50px!important}#tab-home h1{font-size:clamp(44px,10.5vw,68px)!important}#tab-home>section{padding-block:78px!important}#tab-home h2,.tab-pane>h2,.tab-pane>div:first-child>h2{font-size:38px!important}#tab-home>section:not(:first-child)>div:first-child{margin-bottom:38px!important}#tab-home>section:nth-child(2)>div:last-child,#tab-home>section:nth-child(3)>div:last-child{grid-template-columns:1fr!important}#tab-home>section:nth-child(2) .x-card{border-left:0;border-top:1px solid #cbd5e1;padding:28px!important}#tab-home>section:nth-child(2) .x-card:first-child{border-top:0}#tab-home>section:nth-child(3)>div:last-child>div{border-left:0!important;border-top:1px solid #cbd5e1!important;padding:28px!important}#tab-home>section:last-child{padding:34px 24px!important}#tab-home>section:last-child h3{font-size:30px!important}.main-content [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}.card,.tool-box,.dashboard-showcase-card,.plan-preview-box{padding:24px!important}.main-content h3{font-size:23px!important}.main-content .btn-primary,.main-content .btn-secondary{white-space:normal;overflow-wrap:anywhere}.main-content :is(p,h1,h2,h3,h4){overflow-wrap:break-word}.main-content div:has(>table){overflow-x:auto}.directory-table{min-width:620px}.showcase-img-container{padding:15px;flex-direction:column}.showcase-zoom-overlay{position:static;margin-top:12px}.footer-content{gap:38px}.footer-content>div:last-child{flex-wrap:wrap;gap:32px!important}.view-mode-selector{border-radius:2px}}
@media(max-width:380px){.header-container .brand-block{gap:6px!important}.header-container .brand-block img{height:30px!important;max-height:30px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Preserve legibility on the dark call-to-action panel. */
#tab-home>section:last-child .btn-secondary { color:#fff!important; border-color:#94a3b8!important; }
#tab-home>section:last-child .btn-secondary:hover { background:#1e293b; }
@media(max-width:1024px) {
  .map-main-display { min-width:0; }
  .chile-regions-full-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .map-region-card-btn { overflow-wrap:anywhere; min-width:0; }
}
@media(max-width:480px) { .chile-regions-full-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:767px) {
  #tab-contact .card>div:has(>.btn-primary) { flex-wrap:wrap; }
  #tab-contact .card>div>.btn-primary { flex:1 1 200px!important; }
  #tab-contact .btn-secondary[title] { flex:0 0 48px; width:48px; }
}