@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&family=Fira+Code:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   DESIGN SYSTEM - HUMANIST & SOCIAL DESIGN (PLUS JAKARTA SANS)
   ========================================================================== */
:root {
  /* Fonts */
  --font-primary: 'Space Grotesk', 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accessible: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'Fira Code', 'Share Tech Mono', 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, monospace;
  
  /* Typography Scale */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.625rem;    /* 26px */
  --font-size-xxl: 2.125rem;   /* 34px */
  --font-size-display: clamp(2rem, 5.5vw, 3.75rem); /* 32px-60px */

  /* Spacing Scale */
  --spacing-xs: 0.5rem;        /* 8px */
  --spacing-sm: 1rem;          /* 16px */
  --spacing-md: 1.5rem;        /* 24px */
  --spacing-lg: 2rem;          /* 32px */
  --spacing-xl: 2.5rem;        /* 40px */
  --spacing-xxl: 5rem;         /* 80px */
  
  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --container-width: 1040px;

  /* ==========================================================================
     DESIGN SYSTEM - SPACE/SCI-FI HUD PALETTE (WCAG 2.1 AA COMPLIANT)
     ========================================================================== */
  
  --bg-primary: #0A0E17;      /* Obsidian Space Black Base */
  --bg-secondary: #101524;    /* Sub-Space Navy panels */
  --bg-header: rgba(10, 14, 23, 0.93); /* Obsidian Space Black Translucent */
  --text-primary: #FFFFFF;    /* Solar White */
  --text-secondary: #8C9CB2;  /* Telemetry Gray */
  --text-muted: #53647C;      /* Luminous Steel Blue muted text */
  
  --accent-color: #00B8E6;    /* Electric Cyan */
  --accent-secondary: #0080E0; /* Cosmic Blue (Core) */
  --accent-light: rgba(0, 184, 230, 0.08); /* Electric Cyan Tint */
  --accent-success: #00FF66;  /* Telemetry Green */
  --accent-hazard: #FF3B30;   /* Warning Red */
  
  --accent-color-rgb: 0, 184, 230;
  --accent-secondary-rgb: 0, 128, 224;
  --accent-success-rgb: 0, 255, 102;
  --text-primary-rgb: 255, 255, 255;
  
  --border-color: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.15);
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-colored: 0 10px 20px -5px rgba(0, 0, 0, 0.5);

  /* === DESTAQUE LAYER v2.0 — Navy + Cyan extensions === */
  --color-void-warm:    #0B1121;   /* Deep navy — secciones destacadas */
  --color-amber:        #00B8E6;   /* Redirigido: usa accent-color para iconos cálidos */
  --color-earth:        #0A4A6E;   /* Navy mid — badge proyectos físicos */
  --color-cream:        #A8C4D8;   /* Cyan apagado — texto destacado en secciones navy */
  --color-warm-border:  rgba(0, 184, 230, 0.12);  /* Cyan borde muy sutil */
  --color-amber-rgb:    0, 184, 230;  /* Redirigido a cyan */

  /* === TEXT v2.0 === */
  --text-display:       #F2F4F6;
  --text-body:          #D0D8E4;
  /* === RADIUS v2.0 === */
  --radius-pill:        100px;
  --radius-photo:       10px;
  /* === FONT v2.0 === */
  --font-display:       'Fraunces', Georgia, serif;
  /* === SHADOWS v2.0 === */
  --shadow-bento-hover: 0 20px 40px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.20);
  /* === TRANSITIONS v2.0 === */
  --transition-bento: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                      box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                      border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --spotlight-color: rgba(255, 255, 255, 0.07);
}


/* Dark Mode - Space/Sci-Fi HUD Palette (Obsidian Warm Slate background, electric cyan accent) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0A0E17;
    --bg-secondary: #101524;
    --bg-header: rgba(10, 14, 23, 0.93);
    --text-primary: #FFFFFF;
    --text-secondary: #8C9CB2;
    --text-muted: #53647C;
    
    --accent-color: #00B8E6;
    --accent-secondary: #0080E0;
    --accent-light: rgba(0, 184, 230, 0.08);
    --accent-success: #00FF66;
    --accent-hazard: #FF3B30;
    
    --accent-color-rgb: 0, 184, 230;
    --accent-secondary-rgb: 0, 128, 224;
    --accent-success-rgb: 0, 255, 102;
    --text-primary-rgb: 255, 255, 255;
    
    --border-color: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.15);
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-colored: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
    --spotlight-color: rgba(255, 255, 255, 0.07);
  }
}

:root.dark-mode {
  --bg-primary: #0A0E17;
  --bg-secondary: #101524;
  --bg-header: rgba(10, 14, 23, 0.93);
  --text-primary: #FFFFFF;
  --text-secondary: #8C9CB2;
  --text-muted: #53647C;
  
  --accent-color: #00B8E6;
  --accent-secondary: #0080E0;
  --accent-light: rgba(0, 184, 230, 0.08);
  --accent-success: #00FF66;
  --accent-hazard: #FF3B30;
  
  --accent-color-rgb: 0, 184, 230;
  --accent-secondary-rgb: 0, 128, 224;
  --accent-success-rgb: 0, 255, 102;
  --text-primary-rgb: 255, 255, 255;
  
  --border-color: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.15);
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-colored: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
  --spotlight-color: rgba(255, 255, 255, 0.07);
}

:root.light-mode {
  --bg-primary:         #FAF8F5;   /* Warm cream/alabaster background */
  --bg-secondary:       #F2ECE4;   /* Warm secondary panel */
  --bg-header:          rgba(250, 248, 245, 0.93);
  --color-void-warm:    #EBE4DA;   /* Warm section highlight */
  --accent-color:       #005F73;   /* Deep Teal (WCAG 2.1 AA Compliant contrast ratio > 4.5:1) */
  --accent-secondary:   #007D80;
  --accent-light:       rgba(0, 95, 115, 0.06);
  --accent-success:     #1A7A3C;
  --accent-hazard:      #CC2200;
  --color-amber:        #005F73;   /* = accent in light mode */
  --color-earth:        #1A5C7A;
  --color-cream:        #2C4A5E;
  --color-warm-border:  rgba(0, 95, 115, 0.12);
  --text-display:       #1A1D20;   /* Deep charcoal instead of black */
  --text-primary:       #1A1D20;
  --text-body:          #2A2E33;
  --text-secondary:     #4A5059;
  --text-muted:         #7A828A;
  --border-color:       rgba(0, 0, 0, 0.05);  /* Glassmorphic border for light mode */
  --border-hover:       rgba(0, 0, 0, 0.12);
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md:          0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg:          0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-colored:     0 10px 20px -5px rgba(0, 0, 0, 0.1);
  --shadow-bento-hover: 0 12px 32px rgba(0,0,0,0.06), 0 4px 8px rgba(0,95,115,0.05);
  --accent-color-rgb:   0, 95, 115;
  --text-primary-rgb:   26, 29, 32;
  --color-amber-rgb:    0, 95, 115;
  --spotlight-color:    rgba(0, 0, 0, 0.04);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-accessible);
  font-size: var(--font-size-base);
  line-height: 1.6;
  padding: 0 var(--spacing-md);
  transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

h1, .hero h1, .projects-hero h1, .project-header h1, .section-title, .metodo-quote, .about-bio h2, .contact-title {
  font-family: var(--font-display) !important;
}

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

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

/* Focus outline for accessibility */
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   LAYOUTS
   ========================================================================== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  width: 100%;
}

.container,
.entry-content .container,
#main-content .container {
  padding-left: var(--spacing-md) !important;
  padding-right: var(--spacing-md) !important;
}

.section-padding {
  padding: var(--spacing-xxl) 0;
}

@media (max-width: 768px) {
  .section-padding {
    padding: var(--spacing-xl) 0;
  }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-xl);
}

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

.logo {
  font-weight: 700;
  font-size: var(--font-size-lg);
  letter-spacing: -0.5px;
  color: var(--accent-color);
}

.nav-links {
  display: flex;
  gap: var(--spacing-sm);
}

.nav-link {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
}

.nav-link:hover {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

.nav-link.active {
  color: var(--accent-color);
  background-color: var(--accent-light);
}

/* Hamburger Menu Button — hidden on desktop, shown on mobile via @media */
.mobile-menu-btn {
  display: none; /* Hidden by default; @media (max-width:640px) sets display:flex */
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: 1px solid var(--border-color);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
}

.mobile-menu-btn:hover {
  background-color: var(--bg-secondary);
  border-color: var(--border-hover);
}

.mobile-menu-btn span {
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: var(--transition-smooth);
  display: block;
}

/* Animated X state when menu is open */
.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

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

/* ==========================================================================
   HERO / PROPOSIÓN DE VALOR — TWO-COLUMN EXECUTIVE LAYOUT
   ========================================================================== */
.hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 64px) 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -8%;
  width: 550px; height: 550px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--accent-color-rgb), 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Two-column grid: text left, KPI dashboard right */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--spacing-xxl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-text {
  display: flex;
  flex-direction: column;
}

/* Small uppercase position indicator above H1 */
/* Eyebrow pill tag */
.hero-position-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-color);
  background: var(--accent-light);
  border: 1px solid rgba(var(--accent-color-rgb), 0.25);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: var(--spacing-md);
}
.hero-position-tag::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent-color);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

/* KPIs 2x2 inside right column */
.hero-kpis .dashboard-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

.hero h1 {
  font-size: var(--font-size-display);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.hero h1 span.highlight {
  color: var(--accent-color);
}

.hero p.executive-summary {
  font-size: clamp(var(--font-size-base), 2.2vw, var(--font-size-md));
  color: var(--text-secondary);
  max-width: 540px;
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 0;
}

/* Hero CTA buttons */
.hero-ctas {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-color);
  color: #020306;
  font-weight: 700;
  font-size: var(--font-size-sm);
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent-color);
  letter-spacing: 0.2px;
  transition: var(--transition-smooth);
}
.cta-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: var(--shadow-colored);
}
.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-hover);
  letter-spacing: 0.2px;
  transition: var(--transition-smooth);
}
.cta-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: var(--accent-light);
  transform: translateY(-2px);
}

/* Scroll hint indicator */
.scroll-hint {
  margin-top: var(--spacing-xl);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: left;
  user-select: none;
  animation: bounce-down 2.5s ease-in-out 3;
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* Hero entrance animations */
@media (prefers-reduced-motion: no-preference) {
  .hero-position-tag {
    animation: fadeSlideUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.05s;
  }
  .hero h1 {
    animation: fadeSlideUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.15s;
  }
  .hero p.executive-summary {
    animation: fadeSlideUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.28s;
  }
  .hero-ctas {
    animation: fadeSlideUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.4s;
  }
  .hero-kpis {
    animation: fadeSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.2s;
  }
  @keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ==========================================================================
   DASHBOARD DE IMPACTO SOCIAL Y NEGOCIO
   ========================================================================== */
.dashboard {
  margin: 0 auto var(--spacing-lg) auto;
  max-width: var(--container-width);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

.metric-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--accent-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-smooth);
}

.metric-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-md);
}

.metric-num {
  font-size: clamp(var(--font-size-xxl), 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-color);
  margin-bottom: var(--spacing-xs);
  letter-spacing: -1px;
}

.metric-label {
  font-size: var(--font-size-xs);
  color: var(--text-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.metric-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

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

@media (max-width: 480px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PROJECTS PAGE HERO (intro compacto sin grid de dos columnas)
   ========================================================================== */
.projects-hero {
  padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 48px) 0;
  position: relative;
  overflow: hidden;
}

.projects-hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -8%;
  width: 500px; height: 500px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--accent-color-rgb), 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.projects-hero h1 {
  font-size: var(--font-size-display);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  position: relative;
  z-index: 1;
}

.projects-hero h1 span.highlight {
  color: var(--accent-color);
}

.projects-hero p.executive-summary {
  font-size: clamp(var(--font-size-base), 2.2vw, var(--font-size-md));
  color: var(--text-secondary);
  max-width: 620px;
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .projects-hero h1 {
    font-size: var(--font-size-xxl);
    letter-spacing: -1px;
  }
  .projects-hero p.executive-summary {
    font-size: var(--font-size-base);
  }
}

/* ==========================================================================
   CASOS DE ESTUDIO - RETÍCULA HUMANISTA
   ========================================================================== */
.projects-section {
  max-width: var(--container-width);
  margin: 0 auto;
}

.projects-section h2, .section-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.projects-section h2::after,
.section-title::after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-color) 0%, transparent 100%);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.bento-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition-bento);
}

@media (min-width: 851px) {
  .bento-card.full-width {
    grid-column: span 2;
    flex-direction: row;
  }
  .bento-card.full-width .bento-img-container {
    width: 50%;
    height: auto;
    border-bottom: none;
    border-right: 1px solid var(--border-color);
  }
  .bento-card.full-width .bento-content {
    width: 50%;
    justify-content: center;
  }
}

.bento-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-bento-hover);
}

.bento-img-container {
  height: 280px;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.bento-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.bento-card:hover .bento-img-container img {
  transform: scale(1.03);
}

.bento-badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background-color: var(--accent-color);
  border: none;
  color: #ffffff;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.bento-content {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.bento-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--spacing-xs);
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.bento-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  flex-grow: 1;
}

.bento-impact {
  margin-bottom: var(--spacing-md);
  padding: 10px 14px;
  background-color: var(--accent-light);
  border-left: 3px solid var(--accent-color);
  border-radius: 4px;
}

.bento-impact-tag {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-color);
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 2px;
}

.bento-impact-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: 0;
  line-height: 1.4;
}

.bento-action {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--accent-color);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.bento-action span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bento-card:hover .bento-action span {
  transform: translateX(8px);
}

@media (max-width: 850px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PILARES DE LIDERAZGO SOCIAL
   ========================================================================== */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.pillar-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: var(--transition-smooth);
}

.pillar-card:hover {
  border-color: var(--border-hover);
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-md);
}

.pillar-icon {
  font-size: 24px;
  margin-bottom: var(--spacing-sm);
  width: 48px;
  height: 48px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.pillar-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EOI FRAMEWORK - CASOS DE ESTUDIO
   ========================================================================== */
.project-header {
  padding: 60px 0 var(--spacing-xl) 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 60px;
}

.project-header h1 {
  font-size: var(--font-size-xxl);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.project-summary-intro {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  max-width: 820px;
  line-height: 1.5;
}

.project-quick-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}


.spec-item {
  border-left: 2px solid var(--accent-light);
  padding-left: var(--spacing-sm);
}

.spec-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}

.spec-val {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .project-quick-specs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* EOI Two-Column Grid */
.eoi-layout {
  display: grid;
  grid-template-columns: 2.8fr 7.2fr;
  gap: 56px;
  margin-bottom: var(--spacing-xxl);
  max-width: var(--container-width);
  margin: 0 auto;
}

.eoi-sidebar {
  position: sticky;
  top: 110px;
  height: fit-content;
}

.eoi-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 2px solid var(--border-color);
  padding-left: 20px;
}

.eoi-nav-item {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 12px 6px 18px;
  position: relative;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color 0.3s ease, background-color 0.3s ease, padding-left 0.3s ease;
}
.eoi-nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 0;
  background: var(--accent-color);
  border-radius: 2px;
  transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.eoi-nav-item:hover {
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
  padding-left: 20px;
}
.eoi-nav-item.active {
  color: var(--accent-color);
  background-color: var(--accent-light);
  padding-left: 20px;
}
.eoi-nav-item.active::before { height: 60%; }

.eoi-sidebar-metrics {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.eoi-sidebar-metrics h4 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-weight: 700;
}

.sidebar-metric {
  margin-bottom: var(--spacing-sm);
}

.sidebar-metric:last-child {
  margin-bottom: 0;
}

.sidebar-metric-num {
  font-size: var(--font-size-xl);
  color: var(--accent-color);
  font-weight: 700;
}

.sidebar-metric-num.alt {
  color: var(--accent-success);
}

.sidebar-metric-num.muted {
  color: var(--text-primary);
}

.sidebar-metric-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

.eoi-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxl);
}

.eoi-section, .eoi-content h2, .eoi-content .wp-block-heading {
  scroll-margin-top: 120px;
}

.eoi-section-tag {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}

.eoi-section h2, .eoi-content h2, .eoi-content .wp-block-heading {
  font-size: var(--font-size-xl) !important;
  font-weight: 700 !important;
  margin-bottom: var(--spacing-sm) !important;
  color: var(--text-primary) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
}

.eoi-section p, .eoi-content p, .eoi-content .wp-block-paragraph {
  font-size: var(--font-size-base) !important;
  color: var(--text-secondary) !important;
  margin-bottom: var(--spacing-sm) !important;
  line-height: 1.65 !important;
}

.eoi-section p strong, .eoi-content p strong, .eoi-content .wp-block-paragraph strong {
  color: var(--text-primary) !important;
}


/* Lists and Lists Items Inside Content */
.eoi-content ul {
  margin-bottom: 24px;
  list-style: none;
}

.eoi-content ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.eoi-content ul li::before {
  content: "•";
  color: var(--accent-color);
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

/* Image blocks inside project */
.media-container {
  margin: var(--spacing-lg) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.media-container img {
  width: 100%;
  height: auto;
  display: block;
}

.media-caption {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.process-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.process-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-primary);
}

.process-label {
  padding: 10px 14px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 850px) {
  .eoi-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Sidebar becomes horizontal scroll nav on tablet */
  .eoi-sidebar {
    display: block;
    position: static;
    height: auto;
  }
  .eoi-sidebar-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    border-left: none;
    border-bottom: 2px solid var(--border-color);
    padding: 0 0 var(--spacing-sm) 0;
    gap: var(--spacing-xs);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .eoi-sidebar-nav::-webkit-scrollbar { display: none; }
  .eoi-nav-item {
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
  }
  .eoi-sidebar-metrics { display: none; }
  .process-gallery {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ABOUT & FILOSOFÍA DE LIDERAZGO
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 3.2fr 6.8fr;
  gap: 56px;
  max-width: var(--container-width);
  margin: 0 auto;
}

.about-avatar {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  height: fit-content;
}

.about-bio h2 {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: var(--spacing-md);
}

.about-bio p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
}

/* Timeline Layout */
.timeline-section {
  max-width: var(--container-width);
  margin: var(--spacing-xxl) auto;
}

.timeline {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-lg);
}

.timeline-item {
  display: grid;
  grid-template-columns: 2fr 8fr;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-years {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-muted);
}

.timeline-details h3 {
  font-size: var(--font-size-md);
  font-weight: 700;
  margin-bottom: 4px;
}

.timeline-company {
  font-size: var(--font-size-xs);
  color: var(--accent-color);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline-company.alt {
  color: var(--accent-success);
}

.timeline-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-xs);
}

.timeline-bullets {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-xs);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-bullets li {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  position: relative;
  padding-left: 14px;
  line-height: 1.5;
}

.timeline-bullets li::before {
  content: "•";
  color: var(--accent-color);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Credentials & Recognitions Grid (About page) */
.credentials-section {
  border-top: 1px solid var(--border-color);
  margin-top: var(--spacing-xl);
}

.credentials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxl);
}

.credentials-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.credentials-list li {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-sm);
}

.credentials-list li:last-child {
  border-bottom: none;
}

/* Logo with SVG monogram */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
  transition: var(--transition-smooth);
}
.logo-mark {
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
}
.logo:hover .logo-mark {
  transform: rotate(-6deg) scale(1.05);
}
.logo-text {
  color: var(--text-primary);
  transition: var(--transition-smooth);
}
.logo:hover .logo-text {
  color: var(--accent-color);
}

.credentials-list li strong {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
}

.credentials-list li span {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Responsive credentials layout */
@media (max-width: 768px) {
  .credentials-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-container {
  max-width: 680px;
  margin: var(--spacing-xxl) auto;
  text-align: center;
}

.contact-title {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.5px;
  margin-bottom: var(--spacing-sm);
}

.contact-desc {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xl);
  line-height: 1.55;
}

.contact-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 380px;
  margin: 0 auto;
}

.contact-btn {
  display: block;
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition-smooth);
}

.contact-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-primary);
  transform: translateY(-1px);
}

.contact-btn.primary {
  background: var(--accent-color);
  color: #FFFFFF;
  border-color: var(--accent-color);
  font-size: var(--font-size-base);
  padding: 18px var(--spacing-sm);
  border-radius: var(--radius-md);
}

.contact-btn.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 28px rgba(var(--accent-color-rgb), 0.35);
  transform: translateY(-2px);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-xl) 0;
  margin-top: var(--spacing-xxl);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-width);
  margin: 0 auto;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: var(--spacing-md);
}

@media (max-width: 580px) {
  .footer-container {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* ==========================================================================
   CREATIVE ARCHIVE / EXPLORACIONES SECUNDARIAS
   ========================================================================== */
.archive-section {
  max-width: var(--container-width);
  margin: var(--spacing-xxl) auto;
}

.archive-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
}

.archive-row {
  display: grid;
  grid-template-columns: 1fr 3.5fr 3fr 1.5fr;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

.archive-row.header-row {
  font-weight: 700;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--border-color);
  padding: var(--spacing-xs) var(--spacing-xs);
}

.archive-row:not(.header-row):hover {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding-left: var(--spacing-md);
  border-bottom-color: transparent;
}

.archive-col {
  font-size: var(--font-size-sm);
}

.archive-col.year {
  font-weight: 700;
  color: var(--text-muted);
}

.archive-col.title {
  font-weight: 700;
  color: var(--text-primary);
}

.archive-col.medium {
  color: var(--text-secondary);
}

.archive-col.link {
  justify-self: end;
  font-weight: 700;
  color: var(--accent-color);
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  .archive-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }
  .archive-row.header-row {
    display: none;
  }
  .archive-row:not(.header-row):hover {
    padding-left: 0;
    background-color: transparent;
  }
  .archive-col.link {
    justify-self: start;
    margin-top: 4px;
  }
}

/* ==========================================================================
   NUEVOS MÓDULOS DE GALERÍAS Y VIDEOS (INTEGRACIÓN WORDPRESS)
   ========================================================================== */
.gallery-module {
  margin: var(--spacing-lg) 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.gallery-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  transition: var(--transition-smooth);
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.gallery-item:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.gallery-item:hover img {
  transform: scale(1.02);
}

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

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* Video Incrustado Responsivo (YouTube/Vimeo) */
.video-module {
  margin: var(--spacing-lg) 0;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Relación de Aspecto 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   INTERRUPTOR MODO CLARO/OSCURO (THEME TOGGLE BUTTON)
   ========================================================================== */
.theme-toggle-btn {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

/* ==========================================================================
   LIGHTBOX MÓDULO & CONTROL DE PROTECCIÓN DE IMÁGENES
   ========================================================================== */
img {
  user-select: none;
  -webkit-user-drag: none;
}

/* Permitir clics para lightbox solo en estas imágenes */
.gallery-item img, .media-container img, .project-hero-image {
  cursor: zoom-in;
}

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--text-primary-rgb), 0.96);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  backdrop-filter: blur(8px);
}

.lightbox-overlay.active {
  display: flex;
  opacity: 1;
}

.lightbox-wrapper {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  pointer-events: none; /* Bloquea el guardado directo de la imagen */
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-protect-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: transparent; /* Capa fantasma que bloquea clicks derechos/arrastre */
}

.lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  color: #FAF9F5;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.lightbox-close:hover {
  background: rgba(255,255,255,0.2);
}

/* ==========================================================================
   IMÁGENES HÉROE DE PROYECTO (HERO IMAGES)
   ========================================================================== */
.project-hero-image {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-top: var(--spacing-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-smooth);
}

.project-hero-image:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: 0 20px 40px rgba(var(--text-primary-rgb), 0.08);
}

/* ==========================================================================
   ESTILO DE AVATAR (SOBRE MÍ)
   ========================================================================== */
.avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xxl);
  font-weight: 700;
  margin: 0 auto 20px auto;
  box-shadow: 0 0 0 4px var(--bg-primary), 0 0 0 8px var(--accent-light), var(--shadow-colored);
  user-select: none;
  transition: var(--transition-smooth);
}
.avatar-circle:hover {
  transform: scale(1.05);
}

:root.dark-mode .avatar-circle {
  box-shadow: 0 0 0 4px var(--bg-primary), 0 0 0 8px var(--accent-light), 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   COMPONENT CLASSES (MIGRATED FROM INLINE STYLES FOR WORDPRESS COHERENCE)
   ========================================================================== */

/* "Now" Section (Home) */
.now-section {
  background-color: var(--color-void-warm);
  border-top: 1px solid var(--color-warm-border);
  border-bottom: 1px solid var(--color-warm-border);
  padding: var(--spacing-xxl) var(--spacing-md);
  margin: var(--spacing-xxl) 0;
}

.now-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.now-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-warm-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  transition: var(--transition-smooth);
}

.now-card:hover {
  border-color: rgba(245,166,35,0.4);
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}

.now-card-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-warm-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
  color: var(--color-amber);
}

.now-card-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-display);
  letter-spacing: -0.2px;
  margin-bottom: var(--spacing-xs);
}

.now-card-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.now-cta {
  text-align: center;
  margin-top: var(--spacing-xl);
}

/* About / Biography Columns */
.about-profile-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
  height: fit-content;
}

.profile-card-header {
  padding: var(--spacing-xl);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.profile-card-name {
  font-size: var(--font-size-md);
  font-weight: 700;
  margin-bottom: 4px;
}

.profile-card-role {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.profile-card-body {
  padding: var(--spacing-md);
}

.profile-card-section-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
}

.specialties-list {
  list-style: none;
  font-size: var(--font-size-sm); /* Aumentado de xs (12px) a sm (14px) para mejor legibilidad */
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.specialties-list li {
  position: relative;
  padding-left: 14px;
  line-height: 1.5;
}

.specialties-list li::before {
  content: "•";
  color: var(--accent-color);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

.bio-pillars-container {
  margin-top: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.bio-pillar-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.bio-pillar-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: 0;
  line-height: 1.6;
}

/* FAQ Component (Contact) */
.faq-container {
  margin-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-xl);
  text-align: left;
}

.faq-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.faq-item-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.faq-item-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Case Study Category Tag */
.project-category-tag {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-color);
  letter-spacing: 2px;
  display: block;
  margin-bottom: var(--spacing-xs);
}

.process-item-text {
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.gallery-module-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.gallery-module-intro {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.gallery-item-title {
  padding: 12px;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: 600;
}

.video-module-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.video-module-intro {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

/* Bento card overrides for conceptual inactive elements */
.bento-card-inactive {
  cursor: default;
}

.bento-action-inactive {
  color: var(--text-muted) !important;
}

/* Error / Construction Page (404.html) */
.error-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

.error-card {
  max-width: 600px;
}

.error-title {
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-xxl));
  margin-bottom: var(--spacing-md);
}

.error-text {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: var(--spacing-xl);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS & BREAKPOINTS (TABLET & MOBILE)
   ========================================================================== */

/* Breakpoint 1: Tablets (max-width: 1024px) */
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  
  .about-grid, .eoi-layout {
    gap: var(--spacing-lg);
  }
}

/* Breakpoint 2: Large Mobile & Small Tablets (max-width: 768px) */
@media (max-width: 768px) {
  /* Hero: single column */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  .hero-kpis { display: none; } /* KPIs are in the copy on mobile */
  
  .hero {
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
  }
  
  .hero h1 {
    letter-spacing: -1px;
  }

  .dashboard {
    margin: var(--spacing-sm) auto var(--spacing-xl) auto;
  }

  .bento-grid {
    gap: var(--spacing-md);
  }
  
  .bento-img-container {
    height: 240px; /* Reducir altura de imagen en Bento */
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .timeline-section, .archive-section {
    margin: var(--spacing-xl) auto;
  }
  
  .project-header {
    padding: var(--spacing-lg) 0 var(--spacing-sm) 0;
    margin-bottom: var(--spacing-lg);
  }

  .project-hero-image {
    height: 260px; /* Adaptar imagen hero en móviles */
    margin-top: var(--spacing-md);
  }
  
  .eoi-layout {
    gap: var(--spacing-lg);
  }
  
  .eoi-content {
    gap: var(--spacing-xl);
  }
}

/* Breakpoint 3: Mobile Devices (max-width: 640px) — Hamburger Menu */
@media (max-width: 640px) {
  body {
    padding: 0 var(--spacing-sm);
  }

  header {
    padding: var(--spacing-xs) 0;
    margin-bottom: var(--spacing-md);
    position: relative; /* Needed for absolute dropdown */
  }

  /* Keep nav-container as horizontal flex (logo + hamburger) */
  header .nav-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Dashboard: 2-col even on small screens */
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-sm);
  }
  .metric-num { font-size: var(--font-size-xl); }

  /* Now-grid: stack vertically en mobile */
  .now-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  .now-card { min-width: unset; }
  
  .logo {
    font-size: var(--font-size-base);
  }

  /* Hamburger menu button — shown only on mobile */
  .mobile-menu-btn {
    display: flex;
  }
  
  /* Nav links — hidden by default, absolute dropdown when .open */
  .nav-links {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--spacing-sm));
    right: calc(-1 * var(--spacing-sm));
    background-color: var(--bg-header);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-md);
    flex-direction: column;
    gap: 4px;
    z-index: 99;
    pointer-events: none;
  }
  
  .nav-links.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-link {
    font-size: var(--font-size-sm);
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-sm);
    width: 100%;
    text-align: left;
  }

  .theme-toggle-btn {
    align-self: flex-start;
  }

  /* Hero: single column on mobile */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

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

  .hero-ctas {
    flex-direction: column;
  }

  .cta-primary, .cta-secondary {
    justify-content: center;
  }

  .bento-content {
    padding: var(--spacing-md);
  }
  
  .bento-title {
    font-size: var(--font-size-md);
  }

  .pillar-card {
    padding: var(--spacing-md);
  }

  .profile-card-header {
    padding: var(--spacing-lg);
  }

  .profile-card-body {
    padding: var(--spacing-sm);
  }

  .bio-pillars-container {
    margin-top: var(--spacing-lg);
    gap: var(--spacing-md);
  }
  
  .contact-container {
    margin: var(--spacing-lg) auto;
  }
  
  .contact-desc {
    margin-bottom: var(--spacing-lg);
  }

  .contact-options {
    width: 100%;
    max-width: 100%;
  }

  .faq-container {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
  }
  
  .faq-list {
    gap: var(--spacing-md);
  }

  /* Reducir tamaño de lightbox en móviles */
  .lightbox-close {
    top: -42px;
    font-size: var(--font-size-xs);
    padding: 6px 12px;
  }
}

/* ==========================================================================
   MINIMALIST PROJECT LAYOUT (LEVEL 2: SECONDARY CASES)
   ========================================================================== */
.minimal-project-layout {
  max-width: var(--container-width); /* Standardized grid width (1040px) */
  margin: var(--spacing-xxl) auto;
  padding: 0 var(--spacing-md);
  width: 100%;
}

.minimal-project-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  max-width: 720px; /* Constrained reading width centered in container */
  margin-left: auto;
  margin-right: auto;
}

.minimal-project-header h1 {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.minimal-project-meta {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-wrap: wrap;
}

.minimal-project-meta span::after {
  content: "  •";
  margin-left: var(--spacing-xs);
  color: var(--border-color);
}

.minimal-project-meta span:last-child::after {
  content: "";
}

.minimal-project-content {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px; /* Constrained text width for reading ergonomics */
  margin: 0 auto;
}

.minimal-project-content h2 {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.minimal-project-content p {
  margin-bottom: var(--spacing-md);
}

.minimal-project-impact-box {
  background-color: var(--accent-light);
  border-left: 4px solid var(--accent-color);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  margin: var(--spacing-xl) 0;
}

.minimal-project-impact-box h3 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-color);
  margin-bottom: 6px;
  font-weight: 700;
}

.minimal-project-impact-box p {
  margin-bottom: 0;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .minimal-project-layout {
    margin: var(--spacing-xl) auto;
  }
  .minimal-project-header h1 {
    font-size: var(--font-size-xl);
  }
}

/* ==========================================================================
   BACK LINK & RELATED PROJECTS SYSTEM
   ========================================================================== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  transition: var(--transition-smooth);
}

.back-link:hover {
  color: var(--accent-color);
}

.back-link span {
  transition: var(--transition-smooth);
  display: inline-block;
}

.back-link:hover span {
  transform: translateX(-4px);
}

.related-projects-section {
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-xxl);
  width: 100%;
}

.related-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.related-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.related-card:hover {
  border-color: var(--border-hover);
  background-color: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.related-card-tag {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-color);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.related-card-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.related-card-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
  flex-grow: 1;
}

.related-card-action {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--accent-color);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

.related-card-action span {
  transition: var(--transition-smooth);
}

.related-card:hover .related-card-action span {
  transform: translateX(4px);
}

/* ==========================================================================
   MÉTODO / MANIFIESTO QUOTE SECTION
   ========================================================================== */
.metodo-section {
  background-color: var(--color-void-warm);
  border-top: 1px solid var(--color-warm-border);
  border-bottom: 1px solid var(--color-warm-border);
  padding: var(--spacing-xxl) var(--spacing-md);
  margin: var(--spacing-xxl) 0;
}
.metodo-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--color-cream);
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
  padding: 1.5rem 2.5rem;
  border-left: 3px solid var(--color-amber);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.metodo-quote.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Eliminar el pseudo-elemento de comilla grande decorativa anterior */
.metodo-quote::before {
  content: none;
}

/* ==========================================================================
   SKIP LINK — WCAG 2.4.1 Bypass Blocks
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-sm);
  background: var(--accent-color);
  color: var(--bg-primary);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--font-size-sm);
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus { top: var(--spacing-sm); }

/* ==========================================================================
   AVAILABILITY BAR — Contact page
   ========================================================================== */
.availability-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-light);
  border: 1px solid rgba(var(--accent-color-rgb), 0.2);
  border-radius: 100px;
  padding: 8px 18px;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}
.availability-indicator {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.availability-indicator.available {
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: pulse-available 2s infinite;
}
@keyframes pulse-available {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.08); }
}
.availability-text strong { color: var(--accent-color); }
.availability-text { color: var(--text-secondary); }

/* ==========================================================================
   READING PROGRESS BAR — Project pages only
   ========================================================================== */
/* ==========================================================================
   READING PROGRESS BAR — Project pages only
   ========================================================================== */
.reading-progress {
  position: absolute;
  bottom: -2px; /* Aligns exactly on the bottom border of the sticky header */
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-color), var(--accent-success));
  z-index: 1000;
  width: 0%;
  transition: width 0.1s linear;
}

/* Fallback if progress bar is appended to body instead of header */
body > .reading-progress {
  position: fixed;
  top: 0;
}


/* ==========================================================================
   SCROLL REVEAL ANIMATIONS (ACCESIBLE & CON FALLBACK SIN JS)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }
  html.js-ready .reveal.visible { opacity: 1; transform: translateY(0); }

  html.js-ready .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }
  html.js-ready .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
  html.js-ready .reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
  html.js-ready .reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
  html.js-ready .reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
  html.js-ready .reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }
}

/* Logo micro-hover (now handled above with .logo-mark) */
/* .logo { transition: var(--transition-smooth); } */
/* .logo:hover { color: var(--text-primary); letter-spacing: -0.8px; } */

/* Nav active: stronger weight */
.nav-link.active {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent-color);
}

/* Section title: gradient fade line */
.projects-section h2::after, .section-title::after {
  background: linear-gradient(90deg, var(--border-color) 0%, transparent 100%);
}

/* ==========================================================================
   CDO EXECUTIVE MODULES (FRICTION LOGGER, BOM, PIVOT, BLUEPRINT)
   ========================================================================== */

/* 1. Friction Logger (SaaS) */
.friction-logger {
  margin: var(--spacing-xl) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.friction-box {
  background-color: rgba(var(--text-primary-rgb), 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
}

.friction-box.solution {
  background-color: var(--accent-light);
  border-color: rgba(var(--accent-color-rgb), 0.25);
}

.friction-box-tag {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  color: var(--text-muted);
}

.friction-box.solution .friction-box-tag {
  color: var(--accent-color);
}

.friction-box-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.friction-box-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friction-box-list li {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  position: relative;
  padding-left: 14px;
}

.friction-box-list li::before {
  content: "•";
  color: var(--text-muted);
  position: absolute;
  left: 0;
  top: 0;
}

.friction-box.solution .friction-box-list li::before {
  color: var(--accent-color);
}

/* 2. BOM / CAPEX Tracker (IoT/Hardware) */
.bom-tracker-container {
  margin: var(--spacing-lg) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.bom-tracker-header {
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.bom-tracker-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
}

.bom-tracker-table-wrapper {
  overflow-x: auto;
}

.bom-tracker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  text-align: left;
}

.bom-tracker-table th, .bom-tracker-table td {
  padding: 12px var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.bom-tracker-table th {
  background-color: rgba(var(--text-primary-rgb), 0.02);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

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

.bom-tracker-table td.num {
  font-family: monospace;
  font-weight: 600;
  text-align: right;
}

.bom-tracker-table td.saving {
  color: var(--accent-color);
  font-weight: 700;
  text-align: right;
}

/* 3. Engineering Pivot Block (Cerámica) */
.pivot-block {
  margin: var(--spacing-xl) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.pivot-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--bg-primary);
}

.pivot-card.before {
  border-left: 4px solid #D9534F; /* Soft warning red */
}

.pivot-card.after {
  border-left: 4px solid var(--accent-color); /* Success green */
  background-color: var(--accent-light);
}

.pivot-card-badge {
  align-self: flex-start;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pivot-card.before .pivot-card-badge {
  background-color: rgba(217, 83, 79, 0.15);
  color: #C9302C;
}

.pivot-card.after .pivot-card-badge {
  background-color: rgba(var(--accent-color-rgb), 0.15);
  color: var(--accent-color);
}

.pivot-card-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.pivot-card-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 4. Service Blueprint (Service Design/Care) */
.service-blueprint {
  margin: var(--spacing-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
}

.blueprint-row {
  display: grid;
  grid-template-columns: 2.2fr 7.8fr;
  border-bottom: 1px solid var(--border-color);
}

.blueprint-row:last-child {
  border-bottom: none;
}

.blueprint-label {
  background-color: rgba(var(--text-primary-rgb), 0.03);
  padding: var(--spacing-md);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blueprint-label-tag {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-color);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.blueprint-label-name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.blueprint-flow {
  padding: var(--spacing-md);
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  align-items: center;
}

.blueprint-step {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-width: 160px;
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.4;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.blueprint-step strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.blueprint-arrow {
  color: var(--text-muted);
  font-weight: 700;
  user-select: none;
}

/* Responsividad para bloques executivos */
@media (max-width: 768px) {
  .friction-logger, .pivot-block {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .blueprint-row {
    grid-template-columns: 1fr;
  }

  .blueprint-label {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* ==========================================================================
   DESIGN SYSTEM DOCUMENTATION (ONLY FOR design-system.html)
   ========================================================================== */
.ds-container {
  max-width: var(--container-width);
  margin: 0 auto var(--spacing-xxl) auto;
  padding: 0 var(--spacing-md);
  width: 100%;
}

.ds-header {
  border-bottom: 1px solid var(--border-color);
  padding: 40px 0 var(--spacing-lg) 0;
  margin-bottom: var(--spacing-xl);
}

.ds-header h1 {
  font-size: var(--font-size-display);
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: var(--spacing-xs);
  letter-spacing: -1.5px;
}

.ds-header p {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.ds-section {
  margin-bottom: var(--spacing-xxl);
}

.ds-section h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-xs);
}

.ds-intro-text {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  max-width: 800px;
}

/* Colors swatches grid */
.swatches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.swatch-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.swatch-color {
  height: 120px;
  width: 100%;
}

.swatch-info {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.swatch-name {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.swatch-var {
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--accent-color);
}

.swatch-value {
  font-family: monospace;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Typography showcase table */
.typography-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
}

.typography-table th, .typography-table td {
  padding: 12px var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.typography-table th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Spacing scale */
.spacing-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--border-color);
}

.spacing-name {
  width: 180px;
  font-family: monospace;
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.spacing-value {
  width: 100px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.spacing-visual {
  flex-grow: 1;
  background-color: var(--accent-light);
  height: 24px;
  border-radius: var(--radius-sm);
}

/* Tokens summary table for shadow/borders */
.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.token-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.token-card-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
  font-family: monospace;
}

.token-card-preview {
  height: 80px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ==========================================================================
   ACCESIBILIDAD — REDUCED MOTION (WCAG 2.1 SC 2.3.3)
   Desactiva todas las animaciones para usuarios que las hayan desactivado
   en su sistema operativo (prefers-reduced-motion: reduce)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   TIPOGRAFÍA ACCESIBLE — Inclusive Sans para case studies de accesibilidad
   Aplicar clase .accessible-reading al contenedor del caso Aura SaaS
   ========================================================================== */
.accessible-reading,
.accessible-reading p,
.accessible-reading li {
  font-family: var(--font-accessible);
}

/* ==========================================================================
   HEAD OF DESIGN — ROUND 2 FIXES
   ========================================================================== */

/* R-02: Activar --accent-secondary (azul de marca) en la UI */
/* Pillar card 2: azul para diferenciar "Cultura & Equipos" */
.pillar-card:nth-child(2) .pillar-icon {
  background: rgba(var(--accent-secondary-rgb), 0.08);
  border-color: rgba(var(--accent-secondary-rgb), 0.2);
}
.pillar-card:nth-child(2) .pillar-icon svg {
  stroke: var(--accent-secondary);
}
/* Metric card 3 (Patentes & Premios): azul de marca como diferenciador */
.metric-card:nth-child(3) {
  border-top-color: var(--accent-secondary);
}
.metric-card:nth-child(3) .metric-num {
  color: var(--accent-secondary);
}
/* Bento cards hardware: badge azul de marca para distinguir de digital */
.bento-card.hardware .bento-badge {
  background-color: var(--accent-secondary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* R-06: Nav active — un solo señal visual (underline únicamente, sin background) */
.nav-link.active {
  color: var(--accent-color);
  background-color: transparent;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent-color);
}

/* FALLBACK SIN JS: Scroll reveal — garantizar visibilidad si JS no carga.
   La clase .no-js en <html> se añade via noscript + JS.
   Si JS no corre en absoluto, sobrescribimos opacity:0 con :not(.js-ready) */
html:not(.js-ready) .reveal,
html:not(.js-ready) .reveal-stagger > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Lazy loading hint — Las imágenes .bento-img-container img deben tener
   loading="lazy" en HTML. Ver redline R-07 del Head of Design. */

/* Theme toggle mejorado (tamaño consistente) */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   CONTACT PAGE — 3-WAY ENGAGEMENT PATHS
   ========================================================================== */
.contact-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin: var(--spacing-xl) 0;
}

.contact-path-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.contact-path-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-color);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.contact-path-card:nth-child(2)::before {
  background: var(--accent-secondary);
}

.contact-path-card:nth-child(3)::before {
  background: var(--accent-success);
}

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

.contact-path-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(var(--accent-color-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-xs);
  color: var(--accent-color);
}

.contact-path-card:nth-child(2) .contact-path-icon {
  background: rgba(var(--accent-secondary-rgb), 0.08);
  color: var(--accent-secondary);
}

.contact-path-card:nth-child(3) .contact-path-icon {
  background: rgba(var(--accent-success-rgb), 0.08);
  color: var(--accent-success);
}

.contact-path-label {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.contact-path-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  flex-grow: 1;
  margin: 0;
}

.contact-path-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--accent-color);
  text-decoration: none;
  margin-top: var(--spacing-xs);
  transition: gap 0.2s ease;
}

.contact-path-card:nth-child(2) .contact-path-cta {
  color: var(--accent-secondary);
}

.contact-path-card:nth-child(3) .contact-path-cta {
  color: var(--accent-success);
}

.contact-path-cta:hover {
  gap: 8px;
}

@media (max-width: 768px) {
  .contact-paths {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SPACE-TECH HUD / STARSHIP COCKPIT EXTENSIONS
   ========================================================================== */

/* HUD Panels & Containers */
.hud-panel {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: var(--spacing-md);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hud-panel:hover {
  border-color: var(--accent-color);
  box-shadow: var(--shadow-colored);
}

/* Notched corners container style utility using CSS clip-path */
.hud-notched {
  clip-path: polygon(
    0 0, 
    calc(100% - 15px) 0, 
    100% 15px, 
    100% 100%, 
    15px 100%, 
    0 calc(100% - 15px)
  );
}

/* Monospace telemetry typography classes */
.metric-num, .sidebar-metric-num, .bom-tracker-table td.num {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Pulse indicator dots */
.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background-color: var(--accent-success);
  box-shadow: 0 0 6px var(--accent-success);
}
.status-indicator-dot.hazard {
  background-color: var(--accent-hazard);
  box-shadow: 0 0 6px var(--accent-hazard);
}

/* Inline code tag — usado en friction-box y otros módulos */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--accent-light);
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-color-rgb), 0.2);
  border-radius: 3px;
  padding: 1px 5px;
}


/* ==========================================================================
   COMPONENTES v2.0 — PRECISION HUMANISM
   ========================================================================== */

/* --- BENTO BADGE COLORS por tipo de proyecto --- */
.bento-card.digital .bento-badge  { background: var(--accent-color);   color: #020306; }  /* cyan */
.bento-card.hardware .bento-badge { background: var(--accent-secondary); color: #FFFFFF; } /* azul */
.bento-card.social .bento-badge   { background: var(--accent-success);  color: #020306; } /* verde */

/* --- AVATAR HUMAN --- */
.avatar-human {
  width: 120px; height: 120px;
  border-radius: var(--radius-photo);
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: var(--transition-smooth);
  position: relative; flex-shrink: 0;
  margin: 0 auto var(--spacing-sm) auto; /* Centrar avatar */
}
.avatar-human img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s ease; }
.avatar-human:hover img { filter: grayscale(20%) brightness(1.05); }
.avatar-human:hover { border-color: var(--accent-color); box-shadow: 0 0 0 2px var(--accent-color), var(--shadow-md); }
.avatar-human-initials {
  width: 100%; height: 100%;
  background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 2rem; font-weight: 700;
  color: var(--accent-color); letter-spacing: -1px;
}
@media (max-width: 768px) {
  .avatar-human { width: 80px; height: 80px; }
  .avatar-human-initials { font-size: 1.5rem; }
}

/* --- TRUST BAR --- */
.trust-bar { padding: var(--spacing-xl) 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.trust-bar-label { text-align: center; font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: var(--spacing-md); }
.trust-bar-logos { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.trust-bar-badge {
  font-size: var(--font-size-sm); font-weight: 700; color: var(--text-muted);
  padding: 6px 14px; border: 1px solid var(--border-color);
  border-radius: var(--radius-pill); transition: var(--transition-smooth); white-space: nowrap;
}
.trust-bar-badge:hover { color: var(--accent-color); border-color: var(--border-hover); background: var(--accent-light); }

/* --- TESTIMONIAL CARDS --- */
.testimonials-section {
  background-color: var(--color-void-warm);
  border-top: 1px solid var(--color-warm-border);
  padding: var(--spacing-xxl) 0;
}
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-top: var(--spacing-lg); }
.testimonial-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
  border-left: 2px solid var(--accent-color); border-radius: var(--radius-sm);
  padding: var(--spacing-lg); display: flex; flex-direction: column;
  gap: var(--spacing-md); transition: var(--transition-smooth);
}
.testimonial-card:hover { border-left-color: var(--accent-color); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.testimonial-quote {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--font-size-md); line-height: 1.55; color: var(--text-secondary); flex-grow: 1;
}
.testimonial-quote::before { content: '\201C'; }
.testimonial-quote::after  { content: '\201D'; }
.testimonial-attribution { display: flex; align-items: center; gap: var(--spacing-sm); border-top: 1px solid var(--border-color); padding-top: var(--spacing-sm); }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs); font-weight: 700; color: var(--text-secondary); font-family: var(--font-mono);
}
.testimonial-name { font-size: var(--font-size-sm); font-weight: 700; color: var(--text-display); }
.testimonial-role { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 2px; }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* --- CTA DESTAQUE (reemplaza cta-warm) --- */
.cta-warm {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-secondary); color: #FFFFFF;
  border: 2px solid var(--accent-secondary); padding: 14px 26px;
  border-radius: var(--radius-sm); font-weight: 700; font-size: var(--font-size-sm);
  text-decoration: none; transition: var(--transition-smooth);
}
.cta-warm:hover {
  background: var(--accent-color); border-color: var(--accent-color);
  color: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-colored);
}

/* --- NOW SECTION: ver reglas en línea ~1747 (ya consolidadas) --- */

/* --- PILLAR CARD ICON HOVER --- */
.pillar-card:hover .pillar-icon { border-color: var(--border-hover); background-color: var(--accent-light); }
.pillar-card:hover .pillar-icon svg { stroke: var(--accent-color); }

/* --- LOGO HOVER ANIMADO --- */
.logo-mark { transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }

/* --- prefers-reduced-motion: respetar --- */
@media (prefers-reduced-motion: reduce) {
  .metodo-quote { opacity: 1; transform: none; transition: none; }
  .bento-card:hover { transform: none; }
  .cta-warm:hover, .cta-primary:hover, .cta-secondary:hover { transform: none; }
  .now-card:hover { transform: none; }
}

/* --- MOBILE now-grid responsive (complementa las reglas de arriba) --- */
@media (max-width: 768px) {
  .now-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   WORDPRESS GUTENBERG BLOCK OVERRIDES
   Neutraliza estilos por defecto de Gutenberg que interfieren con el diseño
   ========================================================================== */

/* 1. Elimina el margen inferior que Gutenberg añade a cada bloque */
.wp-block-html,
.wp-block-group,
.wp-block-shortcode {
  margin-bottom: 0 !important;
  max-width: none !important;
}

/* 2. Elimina el max-width y centering que el editor añade a los wrappers internos */
.entry-content,
.page-content,
.post-content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Restablece el espaciado de los bloques en cadena (--wp--style--block-gap) */
.is-layout-flow > * + *,
.is-layout-flex > * + * {
  margin-block-start: 0 !important;
}

/* 4. Evita que .wp-block-html envuelva en un <figure> con márgenes de figura */
figure.wp-block-html {
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. Neutraliza restricción de ancho en alineaciones de Gutenberg */
.wp-block[data-align="wide"],
.wp-block[data-align="full"] {
  max-width: none !important;
}

/* 6. Corrige el espaciado entre bloques consecutivos wp:html */
.wp-block-html + .wp-block-html,
.wp-block-html + .wp-block-group,
.wp-block-group + .wp-block-html {
  margin-top: 0 !important;
}

/* 7. El editor de WordPress puede añadir padding a body.wp-admin — sólo en frontend */
body:not(.wp-admin) #main-content {
  padding: 0;
}

/* ==========================================================================
   CORRECCIÓN DEFINITIVA DE BOTONES
   Usa valores hardcoded (no variables) para máxima compatibilidad.
   Aplica incluso si WordPress deregistra las variables CSS.
   ========================================================================== */

/* --- .cta-primary: botón sólido azul --- */
a.cta-primary,
.hero-ctas > a.cta-primary,
#main-content a.cta-primary,
.wp-block-html a.cta-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background-color: #006B99 !important; /* Light mode: accent */
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 14px 26px !important;
  border-radius: 8px !important;
  border: 2px solid #006B99 !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

:root.dark-mode a.cta-primary,
:root.dark-mode .hero-ctas > a.cta-primary,
:root.dark-mode #main-content a.cta-primary {
  background-color: #00D2FF !important;
  border-color: #00D2FF !important;
  color: #020306 !important;
}

@media (prefers-color-scheme: dark) {
  a.cta-primary,
  .hero-ctas > a.cta-primary,
  #main-content a.cta-primary {
    background-color: #00D2FF !important;
    border-color: #00D2FF !important;
    color: #020306 !important;
  }
}

/* --- .cta-secondary: botón con borde --- */
a.cta-secondary,
.hero-ctas > a.cta-secondary,
#main-content a.cta-secondary,
.wp-block-html a.cta-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 14px 26px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border-hover) !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

a.cta-secondary:hover,
.hero-ctas > a.cta-secondary:hover,
#main-content a.cta-secondary:hover,
.wp-block-html a.cta-secondary:hover {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
  background-color: var(--accent-light) !important;
  transform: translateY(-2px) !important;
}

/* .hero-ctas flex container */
.hero-ctas,
#main-content .hero-ctas,
.wp-block-html .hero-ctas {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  align-items: center !important;
  width: 100% !important;
}

/* Botones de contacto */
a.contact-btn,
.contact-options > a,
.contact-options > a.contact-btn,
#main-content .contact-options > a,
.contact-options .wp-block-button a.wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: var(--font-size-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: var(--spacing-sm) 20px !important;
  transition: var(--transition-smooth) !important;
}

a.contact-btn:hover,
.contact-options > a:hover,
.contact-options > a.contact-btn:hover,
#main-content .contact-options > a:hover,
.contact-options .wp-block-button a.wp-block-button__link:hover {
  border-color: var(--border-hover) !important;
  background: var(--bg-primary) !important;
  transform: translateY(-1px) !important;
}

a.contact-btn.primary,
#main-content a.contact-btn.primary,
.contact-options .wp-block-button.is-style-cta-primary a.wp-block-button__link {
  background: var(--accent-color) !important;
  color: #FFFFFF !important;
  border-color: var(--accent-color) !important;
  font-size: var(--font-size-base) !important;
  padding: 18px 32px !important;
  border-radius: var(--radius-md) !important;
}

a.contact-btn.primary:hover,
#main-content a.contact-btn.primary:hover,
.contact-options .wp-block-button.is-style-cta-primary a.wp-block-button__link:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 12px 28px rgba(var(--accent-color-rgb), 0.35) !important;
  transform: translateY(-2px) !important;
}

.contact-options,
#main-content .contact-options,
.wp-block-html .contact-options {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  align-items: center !important;
}

/* Link cta-warm */
a.cta-warm,
.now-cta > a,
.now-cta > a.cta-warm,
#main-content a.cta-warm {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* ==========================================================================
   WORDPRESS NATIVE BLOCK OVERRIDES (Gutenberg Grid Layout Fixes)
   ========================================================================== */

/* Asegurar que las columnas del grid ignoren flexbox de WP y usen CSS Grid */
.wp-block-columns.hero-grid, .hero-grid,
.wp-block-columns.dashboard-grid, .dashboard-grid,
.wp-block-columns.about-grid, .about-grid,
.wp-block-columns.pillars-grid, .pillars-grid,
.wp-block-columns.now-grid, .now-grid,
.wp-block-columns.testimonials-grid, .testimonials-grid,
.wp-block-columns.timeline-item-grid, .timeline-item-grid,
.wp-block-columns.contact-paths, .contact-paths {
  display: grid !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Reset de márgenes y anchos por defecto que inyecta WP en sus columnas hijas */
.wp-block-columns.hero-grid > .wp-block-column, .hero-grid > .wp-block-column, .hero-grid > div,
.wp-block-columns.dashboard-grid > .wp-block-column, .dashboard-grid > .wp-block-column, .dashboard-grid > div,
.wp-block-columns.about-grid > .wp-block-column, .about-grid > .wp-block-column, .about-grid > div,
.wp-block-columns.pillars-grid > .wp-block-column, .pillars-grid > .wp-block-column, .pillars-grid > div,
.wp-block-columns.now-grid > .wp-block-column, .now-grid > .wp-block-column, .now-grid > div,
.wp-block-columns.testimonials-grid > .wp-block-column, .testimonials-grid > .wp-block-column, .testimonials-grid > div,
.wp-block-columns.timeline-item-grid > .wp-block-column, .timeline-item-grid > .wp-block-column, .timeline-item-grid > div,
.wp-block-columns.contact-paths > .wp-block-column, .contact-paths > .wp-block-column, .contact-paths > div {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  flex-basis: auto !important;
}

/* 1. Hero Grid (2 columnas) */
.wp-block-columns.hero-grid, .hero-grid {
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: var(--spacing-xxl) !important;
  align-items: center !important;
}

/* 2. Dashboard KPIs (2x2) */
.hero-kpis .wp-block-columns.dashboard-grid, .hero-kpis .dashboard-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--spacing-sm) !important;
}

/* Dashboard general (auto-ajustable, soporta de 1 a 5 elementos en una sola fila en desktop) */
.wp-block-columns.dashboard-grid, .dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: var(--spacing-md) !important;
}


/* 3. About Grid (Sidebar + Contenido) */
.wp-block-columns.about-grid, .about-grid {
  grid-template-columns: 3.2fr 6.8fr !important;
  gap: 56px !important;
  align-items: start !important;
}

/* 4. Pillars Grid (3 columnas) */
.wp-block-columns.pillars-grid, .pillars-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--spacing-md) !important;
}

/* 5. Now Grid (3 columnas) */
.wp-block-columns.now-grid, .now-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--spacing-lg) !important;
}

/* 6. Testimonials Grid (3 columnas) */
.wp-block-columns.testimonials-grid, .testimonials-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--spacing-lg) !important;
}

/* 7. Timeline Item Grid */
.wp-block-columns.timeline-item-grid, .timeline-item-grid {
  grid-template-columns: 120px 1fr !important;
  gap: var(--spacing-md) !important;
}

/* 8. Contact Paths (3 columnas) */
.wp-block-columns.contact-paths, .contact-paths {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--spacing-md) !important;
}


/* ==========================================================================
   RESPONSIVE LAYOUT FIXES FOR NATIVE GRIDS
   ========================================================================== */
@media (max-width: 1024px) {
  .wp-block-columns.about-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-xl) !important;
  }
}

@media (max-width: 768px) {
  .wp-block-columns.hero-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-xl) !important;
  }
  .wp-block-columns.pillars-grid,
  .wp-block-columns.now-grid,
  .wp-block-columns.testimonials-grid,
  .wp-block-columns.contact-paths {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-md) !important;
  }
  .hero-kpis .wp-block-columns.dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .hero-kpis .wp-block-columns.dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   ESTILOS DE BOTONES NATIVOS DE WP (BLOCK STYLES EN GUTENBERG)
   ========================================================================== */

/* Botón nativo de WordPress: Contenedor global */
.wp-block-button {
  margin: 0 !important;
}

/* --- Estilo 1: CTA Principal (.is-style-cta-primary / .cta-primary) --- */
.wp-block-button.is-style-cta-primary .wp-block-button__link,
.wp-block-button.cta-primary .wp-block-button__link,
.wp-block-button.cta-primary a,
.wp-block-button.is-style-fill.cta-primary .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background-color: #006B99 !important; /* Light mode */
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 14px 26px !important;
  border-radius: 8px !important;
  border: 2px solid #006B99 !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  transition: var(--transition-smooth) !important;
}

.wp-block-button.is-style-cta-primary .wp-block-button__link:hover,
.wp-block-button.cta-primary .wp-block-button__link:hover,
.wp-block-button.cta-primary a:hover,
.wp-block-button.is-style-fill.cta-primary .wp-block-button__link:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-colored) !important;
}

:root.dark-mode .wp-block-button.is-style-cta-primary .wp-block-button__link,
:root.dark-mode .wp-block-button.cta-primary .wp-block-button__link,
:root.dark-mode .wp-block-button.cta-primary a,
:root.dark-mode .wp-block-button.is-style-fill.cta-primary .wp-block-button__link {
  background-color: #00D2FF !important;
  border-color: #00D2FF !important;
  color: #020306 !important;
}

@media (prefers-color-scheme: dark) {
  .wp-block-button.is-style-cta-primary .wp-block-button__link,
  .wp-block-button.cta-primary .wp-block-button__link,
  .wp-block-button.cta-primary a,
  .wp-block-button.is-style-fill.cta-primary .wp-block-button__link {
    background-color: #00D2FF !important;
    border-color: #00D2FF !important;
    color: #020306 !important;
  }
}

/* --- Estilo 2: CTA Secundario (.is-style-cta-secondary / .cta-secondary) --- */
.wp-block-button.is-style-cta-secondary .wp-block-button__link,
.wp-block-button.cta-secondary .wp-block-button__link,
.wp-block-button.cta-secondary a,
.wp-block-button.is-style-outline.cta-secondary .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background-color: transparent !important;
  color: #0D1E2C !important; /* Light mode */
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 14px 26px !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(0, 107, 153, 0.45) !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  transition: var(--transition-smooth) !important;
}

.wp-block-button.is-style-cta-secondary .wp-block-button__link:hover,
.wp-block-button.cta-secondary .wp-block-button__link:hover,
.wp-block-button.cta-secondary a:hover,
.wp-block-button.is-style-outline.cta-secondary .wp-block-button__link:hover {
  border-color: #006B99 !important;
  color: #006B99 !important;
  background-color: rgba(0, 107, 153, 0.08) !important;
  transform: translateY(-2px) !important;
}

:root.dark-mode .wp-block-button.is-style-cta-secondary .wp-block-button__link,
:root.dark-mode .wp-block-button.cta-secondary .wp-block-button__link,
:root.dark-mode .wp-block-button.cta-secondary a,
:root.dark-mode .wp-block-button.is-style-outline.cta-secondary .wp-block-button__link {
  color: #ffffff !important;
  border-color: rgba(0, 210, 255, 0.40) !important;
}
:root.dark-mode .wp-block-button.is-style-cta-secondary .wp-block-button__link:hover,
:root.dark-mode .wp-block-button.cta-secondary .wp-block-button__link:hover,
:root.dark-mode .wp-block-button.cta-secondary a:hover,
:root.dark-mode .wp-block-button.is-style-outline.cta-secondary .wp-block-button__link:hover {
  border-color: #00D2FF !important;
  color: #00D2FF !important;
  background-color: rgba(0, 210, 255, 0.08) !important;
}

@media (prefers-color-scheme: dark) {
  .wp-block-button.is-style-cta-secondary .wp-block-button__link,
  .wp-block-button.cta-secondary .wp-block-button__link,
  .wp-block-button.cta-secondary a,
  .wp-block-button.is-style-outline.cta-secondary .wp-block-button__link {
    color: #ffffff !important;
    border-color: rgba(0, 210, 255, 0.40) !important;
  }
  .wp-block-button.is-style-cta-secondary .wp-block-button__link:hover,
  .wp-block-button.cta-secondary .wp-block-button__link:hover,
  .wp-block-button.cta-secondary a:hover,
  .wp-block-button.is-style-outline.cta-secondary .wp-block-button__link:hover {
    border-color: #00D2FF !important;
    color: #00D2FF !important;
    background-color: rgba(0, 210, 255, 0.08) !important;
  }
}

/* --- Estilo 3: CTA Cálido (.is-style-cta-warm / .cta-warm) --- */
.wp-block-button.is-style-cta-warm .wp-block-button__link,
.wp-block-button.cta-warm .wp-block-button__link,
.wp-block-button.cta-warm a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: var(--accent-secondary) !important;
  border: 2px solid var(--accent-secondary) !important;
  color: #FFFFFF !important;
  padding: 14px 26px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  font-size: var(--font-size-sm) !important;
  text-decoration: none !important;
  transition: var(--transition-smooth) !important;
}

.wp-block-button.is-style-cta-warm .wp-block-button__link:hover,
.wp-block-button.cta-warm .wp-block-button__link:hover,
.wp-block-button.cta-warm a:hover {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--bg-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-colored) !important;
}


/* ==========================================================================
   FSE NAVIGATION COMPATIBILITY
   Garantiza que el bloque nativo wp:navigation de WordPress FSE
   se renderice idéntico al menú de navegación clásico del tema.
   ========================================================================== */

/* Contenedor principal del bloque de navegación nativo */
.wp-block-navigation.nav-links {
  display: flex !important;
}

/* Forzar que el <ul> nativo se comporte como flex container en desktop */
.wp-block-navigation.nav-links .wp-block-navigation__container {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--spacing-sm) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

/* Quitar bullets nativos de list items */
.wp-block-navigation.nav-links .wp-block-navigation-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Estilos para los links dinámicos de navegación en desktop */
.wp-block-navigation.nav-links .wp-block-navigation-item__content {
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  font-size: var(--font-size-sm) !important;
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition-smooth) !important;
  text-decoration: none !important;
}

.wp-block-navigation.nav-links .wp-block-navigation-item__content:hover {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
}

/* Estado activo del link de navegación */
.wp-block-navigation.nav-links .current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation.nav-links .current-menu-ancestor .wp-block-navigation-item__content,
.wp-block-navigation.nav-links .current_page_item .wp-block-navigation-item__content {
  color: var(--accent-color) !important;
  background-color: var(--accent-light) !important;
}

/* Adaptación responsive para el menú móvil FSE */
@media (max-width: 768px) {
  /* Ocultar botones y overlays nativos que inyecta WP por defecto para móviles */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    display: none !important;
  }
  
  /* El bloque de navegación se convierte en el dropdown absoluto controlado por JS */
  .wp-block-navigation.nav-links {
    display: flex !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s !important;
    position: absolute !important;
    top: 100% !important;
    left: calc(-1 * var(--spacing-sm)) !important;
    right: calc(-1 * var(--spacing-sm)) !important;
    background-color: var(--bg-header) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    z-index: 99 !important;
    pointer-events: none !important;
  }
  
  .wp-block-navigation.nav-links.open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  
  .wp-block-navigation.nav-links .wp-block-navigation__container {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 4px !important;
  }
  
  .wp-block-navigation.nav-links .wp-block-navigation-item__content {
    width: 100% !important;
    text-align: left !important;
    display: block !important;
    padding: 10px var(--spacing-sm) !important;
  }
}

/* ==========================================================================
   RESET COMPLETO DE INTERFERENCIAS DE GUTENBERG
   Anula todas las interferencias de márgenes, anchos máximos y fuentes de WP
   para asegurar que las páginas rendericen EXACTAMENTE como el HTML estático.
   ========================================================================== */

/* 1. Reset del contenedor del editor de WordPress en frontend */
.entry-content,
.post-content,
.page-content,
.entry-content-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Anular el límite de ancho de bloque que inyecta WP (pero respetando .container) */
.entry-content > *:not(.container):not(p):not(.wp-block-paragraph),
.entry-content .wp-block-group:not(.container),
.entry-content .wp-block-columns:not(.container),
#main-content > *:not(.container):not(p):not(.wp-block-paragraph),
#main-content .wp-block-group:not(.container),
#main-content .wp-block-columns:not(.container) {
  max-width: none !important;
}

/* Forzar que las clases .container conserven su ancho máximo y centrado original */
.container,
.entry-content .container,
#main-content .container {
  max-width: var(--container-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* 3. Reset de márgenes verticales por defecto entre bloques directos (Solo en Home para evitar romper páginas internas) */
.home .entry-content > *,
.home #main-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* Resetear paddings y gaps que Gutenberg inyecta dinámicamente en los bloques de grupo en Home */
.home div.wp-block-group:not(.now-section):not(.metodo-section):not(.section-padding),
.home .entry-content .wp-block-group:not(.now-section):not(.metodo-section):not(.section-padding),
.home #main-content .wp-block-group:not(.now-section):not(.metodo-section):not(.section-padding) {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3b. Soporte para Bento Grid en loops de consulta nativos de WordPress */
.wp-block-post-template.bento-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--spacing-lg) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wp-block-post-template.bento-grid > li {
  margin: 0 !important;
  padding: 0 !important;
}

.wp-block-post-template.bento-grid > li:has(.full-width) {
  grid-column: span 2 !important;
}

/* 3c. Corrección de espaciado y gaps en EOI Layout (Gutenberg flattening) */
.eoi-content {
  display: block !important;
}

.eoi-content > * {
  margin-top: 0 !important;
  margin-bottom: var(--spacing-lg) !important;
}

.eoi-content > *:last-child {
  margin-bottom: 0 !important;
}

.eoi-content h2, .eoi-content .wp-block-heading {
  margin-top: var(--spacing-xxl) !important;
  margin-bottom: var(--spacing-md) !important;
}

.eoi-content h2:first-child,
.eoi-content .wp-block-heading:first-child,
.eoi-content > :first-child {
  margin-top: 0 !important;
}


/* 4. Forzar herencia de tipografía correcta en todos los bloques nativos */
.entry-content,
.entry-content p,
.entry-content a,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content ul,
.entry-content ol,
.entry-content li,
.entry-content span,
.entry-content blockquote,
.entry-content blockquote p,
.entry-content cite,
.entry-content div,
#main-content,
#main-content p,
#main-content a,
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6,
#main-content ul,
#main-content ol,
#main-content li,
#main-content span,
#main-content blockquote,
#main-content blockquote p,
#main-content cite,
#main-content div {
  font-family: var(--font-primary) !important;
}

.accessible-reading,
.accessible-reading p,
.accessible-reading li {
  font-family: var(--font-accessible) !important;
}

.entry-content code,
.entry-content pre,
.entry-content .font-mono,
.entry-content .wp-block-code,
#main-content code,
#main-content pre,
#main-content .font-mono,
#main-content .wp-block-code {
  font-family: var(--font-mono) !important;
}

/* 5. Asegurar comportamiento full-width de las secciones destacadas en WP */
.entry-content .metodo-section,
.entry-content .now-section,
#main-content .metodo-section,
#main-content .now-section {
  width: auto !important;
  margin-left: calc(-1 * var(--spacing-md)) !important;
  margin-right: calc(-1 * var(--spacing-md)) !important;
}

@media (max-width: 768px) {
  .entry-content .metodo-section,
  .entry-content .now-section,
  #main-content .metodo-section,
  #main-content .now-section {
    margin-left: calc(-1 * var(--spacing-sm)) !important;
    margin-right: calc(-1 * var(--spacing-sm)) !important;
  }
}

/* 6. Corregir espaciados y gaps en listas y párrafos dentro de bloques */
.entry-content p,
#main-content p {
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

.entry-content p:last-child,
#main-content p:last-child {
  margin-bottom: 0 !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6 {
  margin-bottom: 1rem !important;
}

/* 7. Alineaciones de columnas en Gutenberg */
.wp-block-columns {
  margin-bottom: 0 !important;
}

.wp-block-column {
  margin-bottom: 0 !important;
}

/* Evitar que .wp-block-html envuelva en un <figure> con márgenes */
.wp-block-html,
figure.wp-block-html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}





/* ==========================================================================
   ESTILOS PARA MÓDULOS MULTIMEDIA DE PROYECTOS
   Asegura un renderizado de alta fidelidad HUD y premium en los casos de estudio.
   ========================================================================== */

/* Contenedores de Imágenes */
.project-media-grid,
.project-media-full {
  margin: var(--spacing-lg) 0 !important;
  width: 100% !important;
}

.project-media-grid img,
.project-media-full img {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-color) !important;
  transition: var(--transition-smooth) !important;
  box-shadow: var(--shadow-sm) !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

.project-media-grid img:hover,
.project-media-full img:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-colored) !important;
  transform: translateY(-2px);
}

/* Captions técnicos */
.caption-text {
  font-size: var(--font-size-xs) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
  margin-top: 8px !important;
  margin-bottom: var(--spacing-md) !important;
  text-align: left !important;
  line-height: 1.5 !important;
  letter-spacing: 0.2px !important;
}

/* Cajas de Insights y Testimonios de Research */
.project-insight-box {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-left: 4px solid var(--accent-color) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  margin: var(--spacing-lg) 0 !important;
  transition: var(--transition-smooth) !important;
}

.project-insight-box:hover {
  border-color: var(--border-hover) !important;
  background-color: var(--bg-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.insight-title {
  font-size: var(--font-size-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--accent-color) !important;
  margin-bottom: 8px !important;
  font-weight: 700 !important;
}

.insight-quote {
  font-size: clamp(var(--font-size-sm), 2vw, var(--font-size-md)) !important;
  font-style: italic !important;
  color: var(--text-primary) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Videos de Prototipo Responsivos */
.project-video-wrapper {
  margin: var(--spacing-lg) 0 !important;
  width: 100% !important;
}

.project-video-wrapper video {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
  width: 100% !important;
  background-color: #020306 !important;
}

.project-video-wrapper video:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Evitar que el header fijo cubra los encabezados al saltar desde el índice lateral */
.eoi-content h2,
.eoi-content h3,
#main-content h2,
#main-content h3 {
  scroll-margin-top: 100px !important;
}

/* ==========================================================================
   NUEVOS ESTILOS DE ACCESIBILIDAD, UI Y UX E.O.I.
   ========================================================================== */

/* Clean Metadata Block */
.project-metadata-clean {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.project-metadata-clean .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}

.project-metadata-clean .meta-label {
  color: var(--accent-color);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
}

/* Executive Impact Card */
.executive-impact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.executive-impact-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--border-color);
}

.impact-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.impact-title {
  font-size: var(--font-size-xs) !important;
  font-family: var(--font-mono) !important;
  color: var(--accent-color) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.impact-text {
  font-size: var(--font-size-base) !important;
  color: var(--text-primary) !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .executive-impact-card {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  .executive-impact-card::after {
    display: none;
  }
}

/* Bento card spotlight effect styling */
.bento-card {
  position: relative;
  overflow: hidden;
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    var(--spotlight-color),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.bento-card:hover::before {
  opacity: 1;
}

/* Reading Progress Bar Custom Styling */
.reading-progress {
  height: 3px;
  background: linear-gradient(to right, var(--accent-secondary), var(--accent-color));
  box-shadow: 0 0 8px var(--accent-color);
  border-radius: 0 2px 2px 0;
  transition: width 0.1s ease;
}