/* ===================================
   PEGASUS THEMIS - PROFESSIONAL UI V3
   Executive Hybrid System - Fortune 500 Standards
   =================================== */

/* 
   FILOSOFÍA DE DISEÑO V3:
   - Como el Rolex del diseño web legal
   - 95% Blanco Premium (confianza/claridad) 
   - 5% Negro Ejecutivo (autoridad/anclaje)
   - Toques Dorados (exclusividad calibrada)
   
   Autoridad que se siente, no que se proclama.
*/

/* === CSS VARIABLES V3 (Executive Design Tokens) === */
:root {
  /* === SISTEMA DUAL HÍBRIDO === */
  
  /* Negro Ejecutivo (Navegación/Footer) */
  --noir-supreme: #0A0B0F;          /* Negro casi absoluto - autoridad máxima */
  --charcoal-elite: #1A1B1F;        /* Carbón para contraste sutil */
  --smoke-luxury: #2E2F35;          /* Humo para hover states */
  
  /* Blancos Premium (Contenido) */
  --white-premium: #FAFBFC;         /* 98% blanco - más cálido que puro */
  --white-paper: #FFFFFF;           /* Blanco puro solo para cards premium */
  --pearl-soft: #F7F8FA;            /* Perla para fondos alternantes */
  
  /* Dorados Calibrados (Del Logo Oficial) */
  --gold-signature: #C5A572;        /* Dorado firma - extraído del logo */
  --gold-accent: #D4B896;           /* Dorado acento - más cálido */
  --gold-hover: #E6CCA8;            /* Dorado hover - más brillante */
  
  /* Plateados del Pegaso */
  --silver-text: #94A3B8;           /* Texto secundario refinado */
  --silver-nav: #E2E8F0;            /* Navegación - alto contraste */
  --silver-border: #E2E8F0;         /* Bordes sutiles */
  --silver-hover: #CBD5E1;          /* Estados hover */
  
  /* Azules Corporativos (Herencia V2) */
  --blue-trust: #1E40AF;            /* Azul confianza */
  --blue-refined: #2A5298;          /* Azul refinado para gradientes */
  --blue-link: #2563EB;             /* Enlaces en contenido */
  --blue-pale: #EEF2FF;             /* Fondos muy sutiles */
  
  /* Colores Funcionales */
  --green-success: #10B981;
  --red-error: #EF4444;
  --amber-warning: #F59E0B;
  --blue-info: #3B82F6;
  
  /* Jerarquía de Texto V3 */
  --text-primary: #1F2937;          /* Texto principal oscuro */
  --text-secondary: #6B7280;        /* Texto secundario */
  --text-muted: #9CA3AF;            /* Texto mutado */
  --text-inverse: #FFFFFF;          /* Texto sobre fondos oscuros */
  
  /* Capas de Fondo V3 */
  --bg-primary: #FAFBFC;            /* Fondo principal premium */
  --bg-secondary: #F7F8FA;          /* Fondo secundario perla */
  --bg-accent: #F8FAFE;             /* Fondo de acento */
  --bg-card: #FFFFFF;               /* Fondo para cards premium */
  --bg-dark: #0A0B0F;               /* Fondo oscuro ejecutivo */
  
  /* Sombras Calibradas Fortune 500 */
  --shadow-subtle: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-soft: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-medium: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-strong: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-float: 0 12px 48px rgba(0,0,0,0.16);
  --shadow-gold: 0 4px 24px rgba(197,165,114,0.15);
  
  /* Espaciado Áureo Calibrado - Elegancia Práctica */
  --space-micro: 4px;               /* 4px - base */
  --space-xs: 6px;                  /* 6px - micro áureo */
  --space-sm: 10px;                 /* 10px - áureo suave */
  --space-md: 16px;                 /* 16px - legibilidad */
  --space-lg: 26px;                 /* 26px - áureo funcional */
  --space-xl: 42px;                 /* 42px - áureo controlado */
  --space-xxl: 68px;                /* 68px - áureo elegante */
  --space-massive: 110px;           /* 110px - áureo majestuoso */
  --space-hero: 178px;              /* 178px - áureo épico */
  
  /* Transiciones Executive */
  --transition-micro: 150ms ease-in-out;
  --transition-standard: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-emphasis: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-page: 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Layout Executive */
  --container-width: 1280px;        /* Más amplio para luxury */
  --nav-height: 72px;
  
  /* Typography Executive */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* === RESET & BASE V3 === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.618; /* Golden ratio */
  color: var(--noir-supreme);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

/* === TYPOGRAPHY SYSTEM V3 === */

/* Executive Authority Headings */
.h1-expert-declaration,
.h1-executive {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--noir-supreme);
  margin-bottom: var(--space-lg);
  text-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.h1-executive .gold-emphasis {
  color: var(--gold-signature);
  position: relative;
  display: inline-block;
}

.h1-executive .gold-emphasis::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    var(--gold-signature) 0%, 
    var(--gold-accent) 50%, 
    var(--gold-signature) 100%);
  border-radius: 2px;
}

.h2-professional-insight,
.h2-section {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--noir-supreme);
  margin-bottom: var(--space-md);
  position: relative;
  padding-bottom: var(--space-md);
}

.h2-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, 
    var(--gold-signature) 0%, 
    transparent 100%);
  border-radius: 2px;
}

/* Fortune 500 Rule: Títulos centrados sin líneas desbalanceadas */
.h2-section.text-center::after {
  display: none;
}

.h3-practical-guidance,
.h3-subsection {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--noir-supreme);
  margin: var(--space-xl) 0 var(--space-lg);
  position: relative;
  padding-bottom: var(--space-xs);
}

.h3-subsection::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 50%;
  background: linear-gradient(90deg, 
    var(--gold-signature) 0%, 
    var(--gold-accent) 35%, 
    transparent 100%);
  border-radius: 1px;
}

.h4-detail-emphasis {
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.33;
  color: var(--noir-supreme);
  margin: var(--space-lg) 0 var(--space-md);
  position: relative;
  padding-bottom: 4px;
}

.h4-detail-emphasis::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1.5px;
  width: 30%;
  background: linear-gradient(90deg, 
    var(--gold-signature) 0%, 
    var(--gold-accent) 30%, 
    transparent 100%);
  border-radius: 1px;
}

/* Content Voice Styles V3 */
.body-authoritative {
  font-size: 1.375rem;            /* 22px - Lead paragraph premium */
  line-height: 1.618;             /* Áureo puro - armonía visual (35.6px) */
  letter-spacing: -0.01em;        /* Subtle tightening para elegancia */
  color: var(--text-primary);
  font-weight: 400;
  margin-bottom: var(--space-xl); /* 42px - separación áurea destacada */
  text-align: justify;
  text-justify: inter-word;
}

.body-conversational {
  font-size: 1.125rem;
  line-height: 1.618;             /* Áureo - fluidez natural */
  letter-spacing: 0px;
  color: var(--text-primary);
  margin-bottom: var(--space-md);  /* 16px - legibilidad */
  text-align: justify;
  text-justify: inter-word;
}

.body-standard,
.body-text {
  font-size: 1.125rem;            /* 18px - legibilidad premium */
  line-height: 1.618;             /* Áureo puro - armonía perfecta (29.1px) */
  letter-spacing: 0px;
  color: var(--text-primary);
  margin-bottom: var(--space-md);  /* 16px - no interrumpir lectura */
  text-align: justify;
  text-justify: inter-word;
}

.body-supporting,
.body-text-small {
  font-size: 1rem;                /* 16px - calibrado áureo */
  line-height: 1.618;             /* Áureo coherente (25.9px) */
  letter-spacing: 0px;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  text-align: justify;
  text-justify: inter-word;
}

.body-text-large {
  font-size: 1.25rem;             /* 20px - Premium áureo (siguiente en progresión) */
  line-height: 1.618;             /* Áureo puro - coherencia total (32.4px) */
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  text-align: justify;
  text-justify: inter-word;
}

.hero-subtitle {
  font-size: 1.25rem;
  line-height: 1.618;
  color: var(--silver-text);
  max-width: 720px;
  margin-bottom: var(--space-xl);
  text-align: left;
}

.evidence-text {
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-primary);
  background: rgba(197,165,114,0.05);
  border-radius: 8px;
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  border-left: 3px solid var(--gold-signature);
}

.caption-metadata {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* === NAVIGATION SYSTEM V3 (Negro Ejecutivo) === */

.nav-professional,
.nav-hybrid,
.nav-executive {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--nav-height);
  background: var(--noir-supreme);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 1000;
  transition: var(--transition-standard);
}

.nav-professional.scrolled,
.nav-hybrid.scrolled,
.nav-executive.scrolled {
  height: 64px;
  box-shadow: var(--shadow-strong);
}

.nav-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-professional,
.logo-hybrid,
.logo-executive {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gold-signature);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: var(--transition-standard);
}

.logo-professional:hover,
.logo-hybrid:hover,
.logo-executive:hover {
  color: var(--gold-hover);
  text-shadow: 0 0 20px rgba(197,165,114,0.5);
  text-decoration: none;
}

.logo-professional img,
.logo-hybrid img,
.logo-executive img {
  height: 40px;
  width: auto;
  transition: transform 0.3s ease;
}

.logo-professional:hover img,
.logo-hybrid:hover img,
.logo-executive:hover img {
  transform: scale(1.05);
}

.logo-professional .logo-text,
.logo-hybrid .logo-text,
.logo-executive .logo-text {
  color: var(--white-premium);
  transition: color 0.3s ease;
}

.logo-professional:hover .logo-text,
.logo-hybrid:hover .logo-text,
.logo-executive:hover .logo-text {
  color: var(--gold-signature);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--silver-nav);
  margin: 2px 0;
  transition: 0.3s;
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -5px);
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--silver-nav);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--white-premium);
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-signature);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* === BUTTON SYSTEM V3 === */

/* Primary Authority Button */
.btn-authority,
.btn-primary-gold,
.btn-executive-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: var(--noir-supreme);
  color: var(--white-premium);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--noir-supreme);
  border-radius: 6px;
  transition: var(--transition-standard);
  cursor: pointer;
  min-height: 48px;
  position: relative;
  overflow: hidden;
}

.btn-authority::before,
.btn-primary-gold::before,
.btn-executive-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    var(--gold-signature), 
    transparent);
  transition: left 0.5s ease;
}

.btn-authority:hover,
.btn-primary-gold:hover,
.btn-executive-primary:hover {
  background: var(--charcoal-elite);
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
  color: var(--white-premium);
  text-decoration: none;
}

.btn-authority:hover::before,
.btn-primary-gold:hover::before,
.btn-executive-primary:hover::before {
  left: 100%;
}

.btn-authority:active,
.btn-primary-gold:active,
.btn-executive-primary:active {
  transform: translateY(0);
  transition: var(--transition-micro);
}

/* Secondary Consultation Button */
.btn-consultation,
.btn-secondary-outline,
.btn-executive-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: transparent;
  color: var(--noir-supreme);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid var(--silver-border);
  border-radius: 6px;
  transition: var(--transition-standard);
  cursor: pointer;
  min-height: 48px;
}

.btn-consultation:hover,
.btn-secondary-outline:hover,
.btn-executive-secondary:hover {
  border-color: var(--gold-signature);
  color: var(--gold-signature);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
  text-decoration: none;
}

/* Resource Access Button */
.btn-resource {
  background: var(--blue-pale);
  color: var(--blue-trust);
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-standard);
  cursor: pointer;
  min-height: 44px;
}

.btn-resource:hover {
  background: var(--blue-trust);
  color: var(--text-inverse);
  transform: translateY(-2px);
  text-decoration: none;
}

/* === CARD SYSTEM V3 === */

/* Case Study Cards - Premium Editorial */
.card-case-study,
.card-premium,
.card-executive {
  background: var(--bg-card);
  border: 1px solid var(--silver-border);
  border-radius: 12px;
  padding: var(--space-xl);               /* 42px - áureo premium para contenido importante */
  transition: var(--transition-standard);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  margin-bottom: var(--space-lg);         /* 26px - separación áurea funcional */
}

.card-case-study::before,
.card-premium::before,
.card-executive::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--noir-supreme);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.card-case-study:hover::before,
.card-premium:hover::before,
.card-executive:hover::before {
  transform: scaleX(1);
}

.card-case-study:hover,
.card-premium:hover,
.card-executive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
  border-color: var(--gold-signature);
}

.card-case-study h3,
.card-premium h3,
.card-executive h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--noir-supreme);
  margin-bottom: 0.75rem;
}

.card-case-study p,
.card-premium p,
.card-executive p {
  font-size: 1rem;
  line-height: 1.618;
  color: var(--silver-text);
  text-align: justify;
  text-justify: inter-word;
}

/* Methodology Cards */
.card-methodology {
  background: var(--bg-card);
  border-radius: 12px;
  padding: var(--space-lg);
  box-shadow: var(--shadow-medium);
  border: 1px solid rgba(197,165,114,0.1);
  transition: var(--transition-standard);
}

.card-methodology:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
  border-color: rgba(197,165,114,0.3);
}

/* Product Cards */
.card-product {
  background: var(--bg-card);
  border-radius: 12px;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-medium);
  transition: var(--transition-standard);
  border: 1px solid rgba(197,165,114,0.08);
  position: relative;
}

.card-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
  border-color: rgba(197,165,114,0.15);
}

.card-product::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(197,165,114,0.02) 0%, rgba(212,184,150,0.02) 100%);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: var(--transition-standard);
}

.card-product:hover::after {
  opacity: 1;
}

/* === LAYOUT SYSTEM V3 === */

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: var(--space-massive) 0;
}

.section-hero {
  padding: var(--space-hero) 0 var(--space-massive);
}

.section-alt,
.section-pearl {
  background: var(--bg-secondary);
}

.section-accent {
  background: var(--bg-accent);
}

.section-dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
}

.section-white {
  background: var(--bg-primary);
  padding: var(--space-xxl) 0;
}

/* === HERO SECTION V3 === */

.hero-authority,
.hero-hybrid {
  min-height: 100vh;
  padding: calc(72px + 4rem) 2rem 4rem;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

/* Patrón sutil de fondo dorado */
.hero-hybrid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, var(--gold-signature) 0%, transparent 0.5%),
    radial-gradient(circle at 75% 75%, var(--gold-signature) 0%, transparent 0.5%);
  background-size: 80px 80px;
  opacity: 0.02;
  pointer-events: none;
}

.hero-content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-xxl) 0;
  position: relative;
  z-index: 1;
}

/* === SPECIAL COMPONENTS V3 === */

/* CTA Sections - Conversion Optimization V3 */
.cta-professional {
  background: linear-gradient(135deg, var(--noir-supreme) 0%, var(--charcoal-elite) 100%);
  color: var(--text-inverse);
  padding: var(--space-lg);
  border-radius: 12px;
  text-align: center;
  margin: var(--space-xl) 0;
  position: relative;
}

.cta-professional h3 {
  color: var(--text-inverse);
  margin-bottom: var(--space-md);
}

.cta-professional p {
  opacity: 0.95;
  margin-bottom: var(--space-lg);
  font-size: 1.125rem;
}

/* Quote System Premium */
.quote-authority,
.quote-premium {
  position: relative;
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-xl) 0;
  border-left: 3px solid var(--gold-signature);
  background: var(--pearl-soft);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--charcoal-elite);
  border-radius: 0 8px 8px 0;
}

.quote-authority::before,
.quote-premium::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 80px;
  color: var(--gold-signature);
  opacity: 0.2;
  font-family: Georgia, serif;
}

/* Badge Premium */
.badge-gold {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: var(--gold-signature);
  color: var(--noir-supreme);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* Divider Executive */
.divider-gold {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, 
    var(--gold-signature) 0%, 
    var(--gold-accent) 50%, 
    transparent 100%);
  margin: var(--space-xl) auto;
  border-radius: 2px;
}

/* Metrics Display */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.metric-item {
  text-align: center;
  padding: var(--space-lg);
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: var(--shadow-medium);
  transition: var(--transition-standard);
}

.metric-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
}

.metric-value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold-signature);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.metric-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* === FOOTER V3 (Negro Ejecutivo) === */

.footer-hybrid,
.footer-premium {
  background: var(--noir-supreme);
  color: var(--silver-text);
  padding: var(--space-xl) 0;
  margin-top: var(--space-hero);
}

.footer-content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-sm);
}

.footer-logo img {
  height: 48px;
}

.footer-logo span {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white-premium);
}

.footer-description {
  color: var(--silver-text);
  line-height: 1.618;
}

.footer-column h4 {
  color: var(--white-premium);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-links a {
  color: var(--silver-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--gold-signature);
}

.footer-bottom {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-lg) 2rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
}

.footer-copyright {
  color: var(--silver-text);
  font-size: 0.875rem;
}

.footer-legal {
  display: flex;
  gap: var(--space-lg);
}

.footer-legal a {
  color: var(--silver-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.footer-legal a:hover {
  color: var(--gold-signature);
}

/* === GRID SYSTEM V3 === */

.grid {
  display: grid;
  gap: var(--space-xl);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-xl);
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

/* === INPUT SYSTEM V3 === */

.input-professional {
  height: 56px;
  border-radius: 8px;
  border: 1.5px solid var(--silver-border);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 0 var(--space-md);
  font-size: 1rem;
  font-family: var(--font-primary);
  transition: var(--transition-standard);
  width: 100%;
}

.input-professional:focus {
  outline: none;
  border-color: var(--gold-signature);
  box-shadow: 0 0 0 3px rgba(197,165,114,0.1);
}

.input-professional::placeholder {
  color: var(--text-muted);
}

/* === ARTICLE CONTENT SYSTEM V3 === */

.article-body {
  max-width: 800px;
  margin: 0 auto;
}

.article-section {
  margin-bottom: var(--space-xxl);    /* 68px - áureo elegante para separar secciones */
}

/* Headlines with Proportional Gradients V3 */
.h2-section-title {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--noir-supreme);
  margin: var(--space-xxl) 0 var(--space-xl);    /* 68px arriba, 42px abajo - progresión áurea */
  position: relative;
  padding-bottom: var(--space-sm);
}

.h2-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 75%;
  background: linear-gradient(90deg, 
    var(--gold-signature) 0%, 
    var(--gold-accent) 40%, 
    transparent 100%);
  border-radius: 2px;
}

/* Professional Highlight Boxes V3 */
.highlight-box {
  background: var(--bg-accent);
  border-radius: 8px;
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  border-left: 4px solid var(--gold-signature);
  position: relative;
}

.highlight-box.warning {
  background: #fef3c7;
  border-left-color: var(--amber-warning);
}

.highlight-box.info {
  background: #eff6ff;
  border-left-color: var(--blue-info);
}

.highlight-box.success {
  background: #f0fdf4;
  border-left-color: var(--green-success);
}

/* Professional Lists V3 */
.styled-list {
  margin: var(--space-md) 0;
  padding-left: var(--space-lg);
}

.styled-list li {
  margin-bottom: var(--space-sm);
  line-height: 1.6;
  color: var(--text-primary);
}

.styled-list li strong {
  color: var(--noir-supreme);
}

/* Professional Step Process V3 */
.process-steps {
  margin: var(--space-xl) 0;
}

.process-step {
  margin-bottom: var(--space-xl);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

/* Removed process-step::before - using manual .step-number instead */

.process-step-content {
  flex: 1;
  margin-top: 2px;
}

.process-step h4 {
  color: var(--noir-supreme);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  line-height: 1.3;
}

.process-step p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-primary);
  text-align: justify;
  text-justify: inter-word;
}

.process-step.critical::before {
  background: linear-gradient(135deg, var(--amber-warning) 0%, #f59e0b 100%);
}

/* Use Cases Grid V3 */
.use-cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
}

.use-case-recommended {
  background: #f0fdf4;
  border: 2px solid #16a34a;
  border-radius: 12px;
  padding: var(--space-lg);
  position: relative;
}

.use-case-prohibited {
  background: #fef2f2;
  border: 2px solid #dc2626;
  border-radius: 12px;
  padding: var(--space-lg);
  position: relative;
}

/* === UTILITY CLASSES V3 === */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }
.text-navy { color: var(--noir-supreme); }
.text-gold { color: var(--gold-signature); }

/* === RESPONSIVE V3 === */

@media (max-width: 768px) {
  :root {
    --space-hero: 8rem;
    --space-massive: 4rem;
  }
  
  .nav-toggle {
    display: flex;
  }
  
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(10, 11, 15, 0.98);
    backdrop-filter: blur(12px);
    flex-direction: column;
    gap: 0;
    box-shadow: var(--shadow-float);
    border-top: 1px solid rgba(197,165,114,0.2);
    display: none;
  }
  
  .nav-links.active {
    display: flex;
  }
  
  .nav-link {
    padding: var(--space-md) 2rem;
    border-bottom: 1px solid rgba(197,165,114,0.1);
    width: 100%;
    text-align: left;
  }
  
  .nav-link:last-child {
    border-bottom: none;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-hybrid h1,
  .h1-executive {
    font-size: 2.25rem;
  }
  
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  .use-cases-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .btn-authority,
  .btn-consultation,
  .btn-primary-gold,
  .btn-secondary-outline {
    width: 100%;
    justify-content: center;
    font-size: 0.875rem;
    padding: 0.875rem 1.5rem;
    margin: 0.5rem 0;
  }
}

/* === ANIMATIONS & INTERACTIONS V3 === */

.reveal-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-emphasis);
}

.reveal-fade.revealed {
  opacity: 1;
  transform: translateY(0);
}

.btn-hero-dynamic {
  position: relative;
  overflow: hidden;
  transition: var(--transition-standard);
}

.btn-hero-dynamic::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.btn-hero-dynamic:hover::before {
  width: 300px;
  height: 300px;
}

/* === DARK MODE SUPPORT V3 === */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0A0B0F;
    --bg-secondary: #1A1B1F;
    --bg-accent: #2E2F35;
    --bg-card: #1A1B1F;
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
  }
}

/* ===================================
   ARTICLE SYSTEM V3 - Fortune 500 Standards
   =================================== */

/* === ARTICLE LAYOUT COMPONENTS === */

/* Article-specific hero override - disable full height in articles */
body:has(.article-main) .hero-hybrid {
  min-height: auto;
  padding: calc(72px + 2rem) 2rem 2rem;
}

.article-main {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xxl);
}

.article-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--silver-border);
}

.article-nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: color var(--transition-standard);
}

.article-nav-link:hover {
  color: var(--gold-signature);
  text-decoration: none;
}

.article-lead {
  margin-bottom: var(--space-xl);
}

/* === ARTICLE META SYSTEM === */

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.article-meta .divider {
  width: 1px;
  height: 14px;
  background: var(--silver-border);
}

.article-meta .author {
  font-weight: 500;
  color: var(--text-primary);
}

/* === ALERT SYSTEM V3 === */

.alert-box {
  border-radius: 12px;
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  border-left: 4px solid;
  position: relative;
  box-shadow: var(--shadow-subtle);
}

.alert-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
}

/* Professional Alert Labels - Fortune 500 Standard */
.alert-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.alert-critical-label {
  background: var(--red-error);
  color: var(--white-paper);
}

.alert-urgent-label {
  background: var(--amber-warning);
  color: var(--noir-supreme);
}

.alert-info-label {
  background: var(--blue-info);
  color: var(--white-paper);
}

.alert-recommendation-label {
  background: var(--gold-signature);
  color: var(--noir-supreme);
}

.alert-critical {
  background: #fef2f2;
  border-left-color: #dc2626;
  color: #991b1b;
}

.alert-critical .alert-title {
  color: #dc2626;
}

.alert-warning {
  background: #fef3c7;
  border-left-color: var(--amber-warning);
  color: #92400e;
}

.alert-warning .alert-title {
  color: var(--amber-warning);
}

.alert-info {
  background: #eff6ff;
  border-left-color: var(--blue-info);
  color: #1e40af;
}

.alert-info .alert-title {
  color: var(--blue-info);
}

.alert-success {
  background: #f0fdf4;
  border-left-color: var(--green-success);
  color: #166534;
}

.alert-success .alert-title {
  color: var(--green-success);
}

/* === COMPLIANCE MATRIX SYSTEM === */

.compliance-matrix {
  background: var(--bg-card);
  border: 1px solid var(--silver-border);
  border-radius: 12px;
  padding: 0;
  margin: var(--space-xl) 0;
  overflow: hidden;
  box-shadow: var(--shadow-medium);
}

.compliance-header {
  background: linear-gradient(135deg, var(--noir-supreme) 0%, var(--charcoal-elite) 100%);
  color: var(--text-inverse);
  padding: var(--space-lg);
  text-align: center;
}

.compliance-title {
  color: var(--text-inverse);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.compliance-subtitle {
  color: var(--silver-nav);
  font-size: 0.875rem;
  margin: 0;
  opacity: 0.9;
}

.compliance-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
}

.compliance-table th,
.compliance-table td {
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--silver-border);
  vertical-align: top;
}

.compliance-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--noir-supreme);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compliance-table td {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.compliance-table tr:last-child td {
  border-bottom: none;
}

.compliance-table tr:hover {
  background: var(--bg-accent);
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 12px;
  white-space: nowrap;
}

.status-risk {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.status-partial {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fed7aa;
}

.status-compliant {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* === PREMIUM LISTS === */

.premium-list {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0;
}

.premium-list li {
  position: relative;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
  line-height: 1.6;
  color: var(--text-primary);
}

.premium-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--gold-signature);
  font-weight: bold;
  font-size: 1.25rem;
}

.premium-list li strong {
  color: var(--noir-supreme);
  font-weight: 600;
}

/* === QUOTES SYSTEM === */

.executive-quote {
  background: var(--pearl-soft);
  border-left: 4px solid var(--gold-signature);
  border-radius: 0 8px 8px 0;
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  position: relative;
  font-style: italic;
}

.quote-author {
  display: block;
  margin-top: var(--space-md);
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-align: right;
  font-style: normal;
}

/* === CODE BLOCKS === */

.code-block {
  background: var(--noir-supreme);
  color: var(--text-inverse);
  padding: var(--space-lg);
  border-radius: 8px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: var(--space-xl) 0;
  white-space: pre-line;
  overflow-x: auto;
  box-shadow: var(--shadow-medium);
}

/* === PROCESS SYSTEM ENHANCED === */

.process-container {
  background: var(--bg-card);
  border: 1px solid var(--silver-border);
  border-radius: 12px;
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-medium);
}

.process-title {
  color: var(--noir-supreme);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-lg);
  text-align: center;
  position: relative;
  padding-bottom: var(--space-md);
}

.process-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--gold-signature);
}

.step-number {
  width: var(--space-xl);
  height: var(--space-xl);
  background: linear-gradient(135deg, var(--noir-supreme) 0%, var(--charcoal-elite) 100%);
  color: var(--text-inverse);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: var(--shadow-medium);
  flex-shrink: 0;
}

.step-content h4 {
  color: var(--noir-supreme);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  line-height: 1.3;
}

/* === PREMIUM LIST COMPARISON SYSTEM === */

.premium-list-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.premium-list-item {
  border: 1px solid var(--silver-border);
  border-radius: 12px;
  padding: var(--space-lg);
  position: relative;
  background: var(--bg-card);
}

.premium-list-item h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--noir-supreme);
  margin: 0 0 var(--space-sm) 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.premium-list-item .status-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 0.75rem;
}

.premium-recommended {
  border-left: 4px solid var(--green-success);
}

.premium-restricted {
  border-left: 4px solid var(--red-error);
}

/* === PROCESS STEPS MANUAL (SIN NUMERACIÓN) === */

.process-steps-manual {
  margin: var(--space-xl) 0;
}

.process-step-manual {
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--silver-border);
  border-radius: 8px;
  background: var(--bg-card);
}

.process-step-manual h4 {
  color: var(--noir-supreme);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  line-height: 1.3;
}

/* === ARTICLE FOOTER COMPONENTS === */

.article-cta {
  background: linear-gradient(135deg, var(--noir-supreme) 0%, var(--charcoal-elite) 100%);
  color: var(--text-inverse);
  padding: var(--space-xxl);
  border-radius: 16px;
  text-align: center;
  margin: var(--space-xxl) 0;
  position: relative;
  overflow: hidden;
}

.article-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23C5A572" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.cta-title {
  color: var(--text-inverse);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.cta-subtitle {
  color: var(--silver-nav);
  font-size: 1.25rem;
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
  opacity: 0.95;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  background: var(--gold-signature);
  color: var(--noir-supreme);
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  border-radius: 8px;
  transition: var(--transition-standard);
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-medium);
}

.cta-button:hover {
  background: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
  color: var(--noir-supreme);
  text-decoration: none;
}

.article-footer {
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--silver-border);
}

/* === RELATED ARTICLES === */

.related-articles-section {
  background: var(--bg-secondary);
  padding: var(--space-xxl) 0;
  border-top: 1px solid var(--silver-border);
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--noir-supreme);
  margin-bottom: var(--space-xl);
  position: relative;
  padding-bottom: var(--space-md);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-signature) 0%, transparent 100%);
  border-radius: 2px;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.article-card {
  background: var(--bg-card);
  border: 1px solid var(--silver-border);
  border-radius: 12px;
  padding: var(--space-lg);
  transition: var(--transition-standard);
  box-shadow: var(--shadow-medium);
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
  border-color: var(--gold-signature);
}

.article-card-title {
  margin-bottom: var(--space-md);
}

.article-card-link {
  color: var(--noir-supreme);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
}

.article-card-link:hover {
  color: var(--gold-signature);
  text-decoration: none;
}

.article-card-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* === ADDITIONAL COMPONENTS === */

.resources-section {
  margin-top: var(--space-xl);
}

.disclaimer-box {
  background: var(--bg-secondary);
  border: 1px solid var(--silver-border);
  border-radius: 8px;
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}

.disclaimer-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.external-link {
  color: var(--blue-link);
  text-decoration: none;
}

.external-link:hover {
  color: var(--blue-trust);
  text-decoration: underline;
}

.internal-link {
  color: var(--gold-signature);
  text-decoration: none;
}

.internal-link:hover {
  color: var(--gold-hover);
  text-decoration: underline;
}

/* === PRINT STYLES V3 === */

@media print {
  .nav-professional,
  .nav-hybrid,
  .btn-authority,
  .btn-consultation,
  .btn-resource {
    display: none;
  }
  
  .hero-hybrid,
  .cta-professional {
    background: transparent;
    color: var(--text-primary);
  }
  
  .card-case-study,
  .card-methodology,
  .card-premium {
    box-shadow: none;
    border: 1px solid var(--silver-border);
  }
}