/* 1) Importar Tailwind */
@import "tailwindcss";

/* ===== Colores base ===== */
:root {
  --color-brand: #1D6B89;
  --color-brand-dark: #145a76;
  --color-brand-light: #2a8fb5;
  --color-graphite: #616263;
  --color-graphite-300: #a7a9ab;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, .08);
  --font-inter: "Inter", system-ui, sans-serif;
}

/* ===== Header (base) ===== */
#mainHeader {
  --header-bg: rgba(255, 255, 255, .9);
  --header-border: #1D6B89;
  background-color: var(--header-bg);
  border-color: var(--header-border);
}

/* ===== Estado abierto ===== */
#mainHeader.header-open {
  --header-bg: var(--color-brand);
  --header-border: var(--color-brand-dark);
}

/* ===== Estilos globales ===== */
.header-title { color: var(--color-graphite); }
.nav-link {
  color: var(--color-graphite);
  font-weight: 600;
  transition: color .2s;
}
.nav-link:hover { color: var(--color-brand); }

.cta-btn {
  background: var(--color-brand);
  color: #fff;
  box-shadow: var(--shadow-soft);
  font-weight: 600;
}
.cta-btn:hover { background: var(--color-brand-dark); }

.menu-btn { border-color: var(--color-graphite-300); }

/* ===== Menú móvil ===== */
#mobilePanel {
  background: linear-gradient(180deg, var(--color-brand) 0%, var(--color-brand-dark) 100%);
  box-shadow: 0 16px 32px rgba(0,0,0,0.2);
}
#mobilePanel .mobile-link {
  font-weight: 600;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  transition: color .2s ease, transform .2s ease;
}
#mobilePanel .mobile-link:hover {
  color: #e7f5ff;
  transform: translateX(4px);
}

/* ===== Overlay ===== */
#mobileOverlay.show {
  backdrop-filter: blur(3px);
  background: rgba(0,0,0,.25);
}

/* ===== Transiciones ===== */
#mobilePanel.show {
  transform: scaleY(1);
  opacity: 1;
}