:root {
  /* Official Palette - Softened & Premium */
  --hok-navy: #39527B;
  --hok-navy-rgb: 57, 82, 123;

  --hok-accent: #72D6EE;
  --hok-accent-rgb: 114, 214, 238;

  --hok-mint: #D4E8E9;
  --hok-mint-rgb: 212, 232, 233;

  --hok-bg: #F8F7FB;
  --hok-bg-rgb: 248, 247, 251;

  --hok-lilac: #79738D;
  --hok-lilac-rgb: 121, 115, 141;

  --hok-lilac-soft: #DCD8EE;
  --hok-lilac-soft-rgb: 220, 216, 238;

  --hok-warm: #E9D6CE;
  --hok-warm-rgb: 233, 214, 206;

  --hok-green: #429089;
  --hok-green-rgb: 66, 144, 137;

  --hok-blue-soft: #92BBF8;
  --hok-blue-soft-rgb: 146, 187, 248;

  --hok-blue-strong: #3A74C2;
  --hok-blue-strong-rgb: 58, 116, 194;

  --hok-text: #2D3748; /* Slightly softer than #1f2937 */
  --hok-text-rgb: 45, 55, 72;
}

/* Base Styles */
body {
  background-color: var(--hok-bg);
  color: var(--hok-text);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Global Navigation Pattern */
header.sticky {
  background-color: var(--hok-navy);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-link:hover {
  color: var(--hok-accent) !important;
}

/* 
   Shared Design Patterns (Utility Classes) 
   These can be applied to existing elements to homogenize them.
*/

.th-heading-styled {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.th-card {
  background-color: #ffffff;
  border-width: 1px;
  border-color: rgba(var(--hok-navy-rgb), 0.08);
  box-shadow: 0 10px 30px rgba(var(--hok-navy-rgb), 0.08);
  border-radius: 1.5rem; /* 24px */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.th-card-hover:hover {
  box-shadow: 0 16px 36px rgba(var(--hok-navy-rgb), 0.14);
  transform: translateY(-4px);
}

.th-btn-primary {
  background-color: var(--hok-accent);
  color: var(--hok-navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  border-radius: 0.75rem;
}

.th-btn-primary:hover {
  background-color: #ffffff;
  box-shadow: 0 10px 20px rgba(var(--hok-accent-rgb), 0.2);
}

.th-btn-secondary {
  background-color: var(--hok-lilac);
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  border-radius: 0.75rem;
}

.th-btn-secondary:hover {
  background-color: var(--hok-green);
  box-shadow: 0 10px 20px rgba(var(--hok-green-rgb), 0.2);
}

/* Softening Global Backgrounds */
section.bg-hok-dark, .bg-primary-navy, .hero-gradient {
  background: linear-gradient(135deg, var(--hok-navy) 0%, var(--hok-lilac) 100%) !important;
  position: relative;
  overflow: hidden;
}

section.bg-hok-dark::after, .bg-primary-navy::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(circle at 70% 20%, rgba(var(--hok-accent-rgb), 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Global Button Homogenization 
   Targets most common button patterns to ensure they follow the soft "Home" style.
*/
button[class*="bg-accent-blue"], a[class*="bg-accent-blue"],
button[class*="bg-primary"], a[class*="bg-primary"],
a[href="contacto.html"]:not(.nav-link) {
  background-color: var(--hok-accent) !important;
  color: var(--hok-navy) !important;
  border-radius: 0.75rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(var(--hok-accent-rgb), 0.25) !important;
  border: none !important;
}

button[class*="bg-accent-blue"]:hover, a[class*="bg-accent-blue"]:hover,
button[class*="bg-primary"]:hover, a[class*="bg-primary"]:hover,
a[href="contacto.html"]:not(.nav-link):hover {
  background-color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--hok-accent-rgb), 0.3) !important;
}

/* Secondary/Alternative Buttons */
button[class*="bg-hok-navy"], a[class*="bg-hok-navy"],
button[class*="bg-hok-dark"], a[class*="bg-hok-dark"] {
  border-radius: 0.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Global Card Homogenization 
   Softens existing cards across pages (Metodología, Nosotros, etc.)
*/
[class*="card"], [class*="pillar-card"] {
  border-radius: 1.5rem !important;
}

/* Headings Homogenization */
.heading-styled, .hero-title, .heading-style, [class*="poppins-title"] {
  font-family: 'Poppins', sans-serif !important;
  text-transform: uppercase !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Global Transition */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, 
              transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.3s ease, opacity 0.3s ease;
}