/* Estabiliza el logo del header y evita el salto */
.site-header .custom-logo,
header .custom-logo,
.custom-logo {
  width: auto;
  height: 64px;
  max-width: 220px;
  object-fit: contain;
}

/* Reserva el alto del header para que el contenido no salte */
.site-header,
header.site-header {
  min-height: 88px;
}

@media (max-width: 767px) {
  .site-header .custom-logo,
  header .custom-logo,
  .custom-logo {
    height: 48px;
    max-width: 170px;
  }

  .site-header,
  header.site-header {
    min-height: 68px;
  }
}
/* =========================================================
   1. DESIGN TOKENS GLOBALES (B2B & ESG)
   ========================================================= */
:root {
  --ts-brand-dark: #04101A;
  --ts-brand-blue: #0A4A70;
  --ts-brand-accent: #38bdf8;
  --ts-brand-issn: #751747;
  --ts-surface-100: #ffffff;
  --ts-surface-200: #f8fafc;
  --ts-surface-300: #f1f5f9;
  --ts-text-heading: #0f172a;
  --ts-text-body: #334155;
  --ts-text-muted: #64748b;
  --ts-border: rgba(10, 74, 112, 0.12);
}

/* =========================================================
   2. OPTIMIZACIONES SEO Y CLS (INDEPENDENT PUBLISHER 2)
   ========================================================= */
.site-header { margin-top: 0 !important; padding-top: 1rem !important; padding-bottom: 1rem !important; min-height: 120px !important; contain: layout style; }
.custom-logo-link img, .custom-logo { display: block !important; margin: 0 auto !important; height: auto !important; max-height: 110px !important; width: auto !important; }
.site-info { display: none !important; }
article .entry-content p { text-align: justify; }

/* Menú Principal */
.main-navigation .nav-menu a, .main-navigation .menu-item a { color: #9c9c9c !important; font-weight: 600; transition: color 0.2s ease; }
.main-navigation .nav-menu a:hover, .main-navigation .menu-item a:hover { color: var(--ts-brand-blue) !important; }

/* =========================================================
   3. BLINDAJE CONTRA EL TEMA (SOLO PARA LA ZONA TS)
   ========================================================= */
.ts-wp-landing {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--ts-text-body) !important;
  line-height: 1.6 !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 20px 0 !important;
}

.ts-wp-landing * { box-sizing: border-box !important; }

/* Forzar imágenes para que no exploten a 100% */
.ts-wp-landing img {
  max-width: 100% !important; height: auto !important; margin: 0 !important;
  padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  display: inline-block !important;
}

.ts-wp-landing h1, .ts-wp-landing h2, .ts-wp-landing h3, .ts-wp-landing h4 { color: var(--ts-text-heading) !important; font-weight: 800 !important; margin-bottom: 16px !important; border: none !important; }
.ts-wp-landing p { font-size: 1.1rem !important; color: var(--ts-text-body) !important; margin: 0 0 16px 0 !important; line-height: 1.6 !important; text-align: left !important; }
.ts-wp-landing a { text-decoration: none !important; box-shadow: none !important; transition: all 0.2s ease; }

/* =========================================================
   4. ESTRUCTURAS, GRIDS Y HERO
   ========================================================= */
.ts-section { margin-bottom: 80px !important; }
.ts-grid-2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; align-items: stretch !important; }

.ts-hero-badges { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; margin-bottom: 24px !important; }
.ts-badge {
  display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px !important;
  background: var(--ts-surface-100) !important; border: 1px solid var(--ts-border) !important;
  border-radius: 99px !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.05em !important;
  color: var(--ts-brand-blue) !important; text-transform: uppercase !important;
}
.ts-badge.issn { background: var(--ts-brand-issn) !important; color: #fff !important; border: none !important; }
.ts-badge.issn svg { fill: #fff !important; }

.ts-hero h1 { font-size: clamp(2.2rem, 4vw, 3.8rem) !important; line-height: 1.1 !important; letter-spacing: -0.04em !important; }
.ts-hero h1 span { color: var(--ts-brand-blue) !important; }
.ts-hero p.lead { font-size: 1.25rem !important; color: var(--ts-text-muted) !important; max-width: 800px !important; }

.ts-hero-definition {
  background: var(--ts-surface-100) !important; padding: 32px !important; border-left: 4px solid var(--ts-brand-accent) !important;
  border-radius: 0 16px 16px 0 !important; margin-top: 40px !important; box-shadow: 0 4px 12px rgba(4,16,26,0.04) !important;
}

/* =========================================================
   5. COMPONENTES: TARJETAS Y AUTORÍA
   ========================================================= */
.ts-card {
  background: var(--ts-surface-100) !important; border: 1px solid var(--ts-border) !important;
  border-radius: 16px !important; padding: 32px !important;
  box-shadow: 0 4px 12px rgba(4,16,26,0.04) !important;
  display: flex !important; flex-direction: column !important; justify-content: center !important;
}

.ts-author-label { font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--ts-brand-accent) !important; font-weight: 800 !important; display: block !important; margin-bottom: 8px !important; }
.ts-author-name { font-size: 1.6rem !important; color: var(--ts-brand-dark) !important; font-weight: 800 !important; margin: 0 0 4px 0 !important; }
.ts-author-role { font-size: 1rem !important; color: var(--ts-text-muted) !important; margin: 0 0 16px 0 !important; }
.ts-orcid { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: monospace !important; font-size: 0.85rem !important; color: #059669 !important; background: #d1fae5 !important; padding: 6px 12px !important; border-radius: 8px !important; font-weight: 600 !important; width: fit-content !important; }

.ts-records-card { background: var(--ts-brand-dark) !important; border-radius: 20px !important; padding: 32px !important; color: var(--ts-surface-100) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.ts-record-item { display: flex !important; align-items: center !important; gap: 16px !important; margin-bottom: 16px !important; }
.ts-record-item:last-child { margin-bottom: 0 !important; }
.ts-record-item a { color: #fff !important; font-weight: 600 !important; font-size: 1rem !important; display: flex !important; align-items: center !important; }
.ts-record-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; background: rgba(255,255,255,0.1) !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* =========================================================
   6. RED Y ALIANZAS (LOGOS EN 2 FILAS)
   ========================================================= */
.ts-network-box { background: var(--ts-surface-100) !important; border: 1px solid var(--ts-border) !important; border-radius: 24px !important; padding: 40px !important; box-shadow: 0 4px 12px rgba(4,16,26,0.04) !important; }
.ts-network-title { font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--ts-brand-blue) !important; font-weight: 800 !important; margin-bottom: 24px !important; border-bottom: 1px solid var(--ts-surface-300) !important; padding-bottom: 12px !important;}

/* Avatares */
.ts-avatars-flex { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 24px !important; margin-bottom: 40px !important; }
.ts-colab-profile { display: flex !important; align-items: center !important; gap: 12px !important; width: calc(33.33% - 16px) !important; min-width: 200px !important; }
.ts-colab-profile img { width: 56px !important; height: 56px !important; min-width: 56px !important; max-width: 56px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid var(--ts-surface-200) !important; }
.ts-colab-info { display: flex !important; flex-direction: column !important; }
.ts-colab-name { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--ts-text-heading) !important; margin: 0 !important; }
.ts-colab-org { font-size: 0.8rem !important; color: var(--ts-text-muted) !important; margin: 0 !important; }

/* Logos Alianzas - Forzados a 2 Filas Centradas */
.ts-logos-flex { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    gap: 32px !important; 
}
.ts-alliance-logo { 
    height: auto !important; 
    max-height: 55px !important;
    width: auto !important;
    /* Limitamos el tamaño para que quepan 3 arriba y 2 abajo automáticamente */
    flex: 0 1 calc(33.33% - 32px) !important; 
    max-width: 180px !important;
    min-width: 120px !important;
    object-fit: contain !important; 
    filter: grayscale(100%) opacity(0.6) !important; 
    transition: all 0.3s ease !important; 
}
.ts-alliance-logo:hover { 
    filter: grayscale(0%) opacity(1) !important; 
    transform: scale(1.05) !important; 
}

/* =========================================================
   7. PAPERS ACADÉMICOS Y DARK BOX B2B
   ========================================================= */
.ts-pub-card {
  background: var(--ts-surface-100) !important; border: 1px solid var(--ts-border) !important;
  border-radius: 12px !important; padding: 24px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important;
}
.ts-pub-card:hover { border-color: var(--ts-brand-accent) !important; box-shadow: 0 10px 20px rgba(4,16,26,0.06) !important; transform: translateY(-3px) !important;}
.ts-pub-tag { display: inline-block !important; font-size: 0.75rem !important; font-weight: 800 !important; text-transform: uppercase !important; background: #e0f2fe !important; color: #0369a1 !important; padding: 6px 10px !important; border-radius: 6px !important; margin-bottom: 16px !important; width: fit-content !important; }
.ts-pub-title { font-size: 1.05rem !important; color: var(--ts-text-heading) !important; font-weight: 700 !important; line-height: 1.4 !important; margin: 0 0 16px 0 !important; }
.ts-pub-doi { font-family: monospace !important; font-size: 0.8rem !important; color: var(--ts-text-muted) !important; display: flex !important; align-items: center !important; gap: 8px !important; }

.ts-dark-box { background: var(--ts-brand-dark) !important; border-radius: 24px !important; padding: 48px 32px !important; margin-bottom: 60px !important; }
.ts-dark-box h2, .ts-dark-box h3 { color: var(--ts-surface-100) !important; }
.ts-dark-box p { color: #94a3b8 !important; }
.ts-dark-card { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 16px !important; padding: 32px !important; }
.ts-btn-primary { display: inline-block !important; background: var(--ts-surface-100) !important; color: var(--ts-brand-blue) !important; padding: 12px 28px !important; border-radius: 8px !important; font-weight: 800 !important; margin-top: 16px !important;}

/* Forzar Grid del Dark Box B2B (Fila 1 ancha, Fila 2 dividida) */
.ts-dark-box .ts-grid-2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
.ts-dark-box .ts-grid-2 > div:nth-child(1) { grid-column: 1 / -1 !important; }
.ts-dark-box .ts-grid-2 > div:nth-child(2), .ts-dark-box .ts-grid-2 > div:nth-child(3) { grid-column: auto !important; }

/* =========================================================
   8. TABS (PESTAÑAS)
   ========================================================= */
.ts-tabs-container { background: var(--ts-surface-100) !important; border: 1px solid var(--ts-border) !important; border-radius: 20px !important; overflow: hidden !important; }
.ts-tabs-header { display: flex !important; border-bottom: 1px solid var(--ts-border) !important; background: var(--ts-surface-200) !important; flex-wrap: wrap !important;}
.ts-tab-btn { flex: 1 !important; min-width: 150px !important; padding: 16px 20px !important; background: none !important; border: none !important; border-bottom: 2px solid transparent !important; font-size: 0.95rem !important; font-weight: 700 !important; color: var(--ts-text-muted) !important; cursor: pointer !important; text-align: center !important; margin: 0 !important; }
.ts-tab-btn.active { color: var(--ts-brand-blue) !important; border-bottom-color: var(--ts-brand-blue) !important; background: var(--ts-surface-100) !important; }
.ts-tab-content { padding: 32px !important; display: none !important; }
.ts-tab-content.active { display: block !important; }
.ts-tab-content ul { padding-left: 20px !important; margin: 0 !important; }
.ts-tab-content li { margin-bottom: 12px !important; font-size: 1rem !important; }

/* =========================================================
   9. ANIMACIONES Y RESPONSIVE OVERRIDE
   ========================================================= */
.ts-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.ts-reveal.active { opacity: 1; transform: translateY(0); }

@media (max-width: 800px) {
  .ts-grid-2 { grid-template-columns: 1fr !important; }
  .ts-dark-box .ts-grid-2 { grid-template-columns: repeat(2, 1fr) !important; } /* Mantiene las 2 col B2B en tablet */
  .ts-colab-profile { width: 100% !important; }
  .ts-alliance-logo { flex: 0 1 calc(50% - 20px) !important; max-height: 45px !important; } /* Logos a 2x2 en móvil */
}
@media (max-width: 500px) {
  .ts-dark-box .ts-grid-2 { grid-template-columns: 1fr !important; } /* 1 col en móviles muy pequeños */
}