@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");

:root {
  --navy: #324053;
  --navy-deep: #253141;
  --green: #b1cd47;
  --green-soft: #eff5d9;
  --white: #ffffff;
  --surface: #f6f7f5;
  --muted: #687176;
  --border: #e5e8e5;
  --ink: #263340;
  --container: 1240px;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(50, 64, 83, 0.1);
  --shadow-sm: 0 8px 24px rgba(50, 64, 83, 0.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
  margin: 0; 
  color: var(--ink); 
  background: var(--white); 
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
  -webkit-font-smoothing: antialiased; 
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
p { line-height: 1.72; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }

.modern-container { 
  width: min(calc(100% - 48px), var(--container)); 
  margin-inline: auto; 
}
.section { padding: 90px 0; }
h1, h2, h3, h4 { margin: 0; font-family: "Manrope", sans-serif; letter-spacing: -0.03em; }

/* ========================================================
   SISTEMA DE ANIMACIONES DE ENTRADA Y SCROLL REVEAL (TODO EL SITIO)
   ======================================================== */
.main-content {
  animation: pageFadeIn 0.35s ease-out forwards;
}

@keyframes pageFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroMediaIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.975);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes eyebrowIn {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-fade-up {
  animation: heroFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animaciones de Entrada Específicas para Encabezados de TODAS las páginas */
.eyebrow,
.srv-compact-header__eyebrow,
.exp-compact-header__eyebrow,
.regional-eyebrow,
.team-header-eyebrow {
  animation: eyebrowIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.hero-copy h1,
.company-hero-copy h1,
.interior-copy h1,
.srv-compact-header__title,
.exp-compact-header__title,
.team-header-copy h1,
.pub-header h1,
.doc-header h1 {
  animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.hero-copy > p,
.company-hero-copy p,
.interior-copy p,
.srv-compact-header__desc,
.exp-compact-header__desc,
.team-header-copy p,
.pub-header p,
.doc-header p {
  animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.hero-actions,
.company-hero-buttons,
.services-control-panel,
.inst-search-wrapper,
.country-pills {
  animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both;
}

.hero-media,
.company-hero-media,
.company-workshop-photo {
  animation: heroMediaIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}

/* Scroll reveal suave para secciones, bloques y tarjetas */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Escalonado armónico para elementos dentro de grillas de cualquier página */
.stats-grid > .stat-item:nth-child(1), .company-stats-grid > .company-stat-card:nth-child(1) { transition-delay: 0.05s; }
.stats-grid > .stat-item:nth-child(2), .company-stats-grid > .company-stat-card:nth-child(2) { transition-delay: 0.10s; }
.stats-grid > .stat-item:nth-child(3), .company-stats-grid > .company-stat-card:nth-child(3) { transition-delay: 0.15s; }
.stats-grid > .stat-item:nth-child(4), .company-stats-grid > .company-stat-card:nth-child(4) { transition-delay: 0.20s; }

.services-grid > .service-card:nth-child(1), .services-grid--enhanced > .srv-card:nth-child(1), .exp-projects-grid > .exp-card:nth-child(1), .documents-grid > .doc-card:nth-child(1), .pub-grid > .pub-card:nth-child(1), .company-pillars-grid > .company-pillar-card:nth-child(1), .team-grid > .team-card:nth-child(1) { transition-delay: 0.05s; }
.services-grid > .service-card:nth-child(2), .services-grid--enhanced > .srv-card:nth-child(2), .exp-projects-grid > .exp-card:nth-child(2), .documents-grid > .doc-card:nth-child(2), .pub-grid > .pub-card:nth-child(2), .company-pillars-grid > .company-pillar-card:nth-child(2), .team-grid > .team-card:nth-child(2) { transition-delay: 0.10s; }
.services-grid > .service-card:nth-child(3), .services-grid--enhanced > .srv-card:nth-child(3), .exp-projects-grid > .exp-card:nth-child(3), .documents-grid > .doc-card:nth-child(3), .pub-grid > .pub-card:nth-child(3), .company-pillars-grid > .company-pillar-card:nth-child(3), .team-grid > .team-card:nth-child(3) { transition-delay: 0.15s; }
.services-grid > .service-card:nth-child(4), .services-grid--enhanced > .srv-card:nth-child(4), .exp-projects-grid > .exp-card:nth-child(4), .documents-grid > .doc-card:nth-child(4), .pub-grid > .pub-card:nth-child(4), .company-pillars-grid > .company-pillar-card:nth-child(4), .team-grid > .team-card:nth-child(4) { transition-delay: 0.20s; }
.services-grid > .service-card:nth-child(5), .services-grid--enhanced > .srv-card:nth-child(5), .exp-projects-grid > .exp-card:nth-child(5), .documents-grid > .doc-card:nth-child(5), .pub-grid > .pub-card:nth-child(5), .team-grid > .team-card:nth-child(5) { transition-delay: 0.25s; }
.services-grid > .service-card:nth-child(6), .services-grid--enhanced > .srv-card:nth-child(6), .exp-projects-grid > .exp-card:nth-child(6), .documents-grid > .doc-card:nth-child(6), .pub-grid > .pub-card:nth-child(6), .team-grid > .team-card:nth-child(6) { transition-delay: 0.30s; }

/* Microinteracciones refinadas en botones y tarjetas de todo el sitio */
.srv-card, .exp-card, .doc-card, .pub-card, .team-card, .company-pillar-card, .company-stat-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.srv-card:hover, .exp-card:hover, .doc-card:hover, .pub-card:hover, .team-card:hover, .company-pillar-card:hover {
  transform: translateY(-5px);
}

.button, .btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.button:hover, .btn:hover {
  transform: translateY(-2px);
}
.button:active, .btn:active {
  transform: scale(0.97);
}

/* Animaciones fluidas habilitadas */

/* ========================================================
   HEADER MODERNO STICKY CON DESENFOQUE
   ======================================================== */
.site-header { 
  position: sticky; 
  top: 0; 
  z-index: 1000; 
  height: 84px; 
  background: rgba(255,255,255,.96); 
  border-bottom: 1px solid rgba(229,232,229,.8); 
  backdrop-filter: blur(16px); 
  -webkit-backdrop-filter: blur(16px);
  transition: all .3s ease;
}

.header-inner { 
  width: min(calc(100% - 48px), 1360px); 
  height: 100%; 
  margin: auto; 
  display: flex; 
  align-items: center; 
  gap: 24px; 
}

.brand { 
  display: flex;
  align-items: center;
  height: 60px; 
  padding: 0; 
  border: 0; 
  background: transparent; 
  cursor: pointer; 
  flex: none; 
}

.brand img { 
  height: 52px; 
  width: auto; 
  object-fit: contain; 
}

.site-nav { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: clamp(10px, 1.3vw, 22px); 
  margin-left: auto; 
  list-style: none;
  padding: 0;
  margin-block: 0;
}

.site-nav a, 
.site-nav .nav-dropdown-btn { 
  border: 0; 
  background: transparent; 
  padding: 30px 2px 26px; 
  font-size: 10px; 
  font-weight: 700; 
  letter-spacing: .07em; 
  text-transform: uppercase;
  white-space: nowrap; 
  cursor: pointer; 
  position: relative; 
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: color .2s ease;
}

.site-nav a:hover, 
.site-nav .nav-dropdown-btn:hover {
  color: #1a2430;
}

.site-nav a::after, 
.site-nav .nav-dropdown-btn::after { 
  content: ""; 
  position: absolute; 
  left: 0; 
  right: 100%; 
  bottom: 21px; 
  height: 2px; 
  background: var(--green); 
  transition: right .22s ease; 
}

.site-nav a:hover::after, 
.site-nav a.active::after, 
.site-nav .nav-dropdown-btn:hover::after,
.nav-dropdown.active > .nav-dropdown-btn::after { 
  right: 0; 
}

.nav-dropdown { 
  position: relative; 
}

.dropdown-menu-box { 
  display: none;
  position: absolute; 
  top: 70px; 
  left: -15px; 
  min-width: 200px; 
  padding: 8px; 
  background: #ffffff; 
  box-shadow: 0 16px 40px rgba(32,44,57,.12); 
  border: 1px solid rgba(229,232,229,.9); 
  border-radius: 12px; 
  z-index: 100;
}

.nav-dropdown:hover .dropdown-menu-box {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

.dropdown-menu-box a { 
  display: block; 
  width: 100%; 
  padding: 10px 14px; 
  text-align: left; 
  font-size: 12px; 
  font-weight: 600;
  border-radius: 8px; 
  color: var(--navy);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.dropdown-menu-box a:hover,
.dropdown-menu-box a.sub-active { 
  background: var(--surface); 
  color: #728b18;
}

.dropdown-menu-box a::after {
  display: none !important;
}

.mobile-nav-contact {
  display: none;
}

.language-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
}

.language-switch-btn:hover {
  background: #ffffff;
  border-color: #cfd4d2;
  transform: translateY(-1px);
}

.language-switch-btn .active-lang {
  color: var(--navy);
  font-weight: 800;
}

.language-switch-btn .lang-sep {
  color: #a1a7a8;
  margin: 0 1px;
}

.language-switch-btn .inactive-lang {
  color: #a1a7a8;
  font-weight: 600;
}

.header-actions { 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  margin-left: 10px; 
}

.social-mini { 
  display: none; 
  align-items: center; 
  gap: 8px; 
  color: var(--muted); 
}

.social-mini a { 
  width: 26px; 
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--navy);
  font-size: 12px;
  transition: background .2s, color .2s;
}

.social-mini a:hover {
  background: var(--green-soft);
  color: #5c7410;
}

.lang-switch { 
  padding: 6px 10px; 
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--navy); 
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.contact-button { 
  height: 42px; 
  padding: 0 18px; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0; 
  border-radius: 9px; 
  background: var(--navy); 
  color: white !important; 
  font-size: 11px; 
  font-weight: 800; 
  letter-spacing: .06em; 
  cursor: pointer; 
  transition: transform .2s ease, background .2s ease; 
}

.contact-button:hover { 
  background: var(--navy-deep); 
  transform: translateY(-2px); 
}

.menu-toggle { 
  display: none; 
  border: 0; 
  background: transparent; 
  padding: 8px; 
  cursor: pointer;
}

/* ========================================================
   BOTONES Y ELEMENTOS DE ESTILO
   ======================================================== */
.eyebrow { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  color: #728b18; 
  font-size: 11px; 
  font-weight: 800; 
  letter-spacing: .16em; 
  line-height: 1.4; 
  text-transform: uppercase;
}

.eyebrow::before { 
  content: ""; 
  width: 26px; 
  height: 2px; 
  background: var(--green); 
  flex: none; 
}

.button { 
  min-height: 48px; 
  padding: 0 24px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  border: 1px solid transparent; 
  border-radius: 10px; 
  font-size: 11px; 
  font-weight: 800; 
  letter-spacing: .065em; 
  cursor: pointer; 
  transition: transform .2s, background .2s, border .2s, box-shadow .2s; 
}

.button:hover { 
  transform: translateY(-2px); 
}

.button--primary { 
  background: var(--navy); 
  color: white !important; 
}

.button--primary:hover { 
  background: var(--navy-deep); 
  box-shadow: 0 8px 20px rgba(50,64,83,.2);
}

.button--secondary { 
  background: transparent; 
  color: var(--navy) !important; 
  border-color: #cfd4d2; 
}

.button--secondary:hover { 
  border-color: var(--navy); 
  background: rgba(50,64,83,.04);
}

.button--light { 
  background: var(--green); 
  color: var(--navy-deep) !important; 
}

.button--light:hover { 
  background: #bddb4c; 
  box-shadow: 0 8px 20px rgba(177,205,71,.3);
}

/* ========================================================
   HERO BANNER MODERNO
   ======================================================== */
.hero { 
  min-height: auto; 
  display: flex; 
  align-items: center; 
  background: var(--surface); 
  position: relative; 
  overflow: hidden; 
  padding: 16px 0 24px;
}

.hero-grid { 
  display: grid; 
  grid-template-columns: 0.95fr 1.15fr; 
  align-items: center; 
  gap: 38px; 
  position: relative; 
  z-index: 2; 
  padding-block: 20px 28px; 
  max-width: 1320px;
  width: min(calc(100% - 36px), 1320px);
}

.hero-copy h1 { 
  max-width: 600px; 
  margin: 14px 0 16px; 
  color: var(--navy); 
  font-size: clamp(32px, 3.2vw, 48px); 
  font-weight: 700; 
  line-height: 1.15; 
}

.hero-copy h1 em { 
  color: #91ad27; 
  font-style: normal; 
}

.hero-copy > p { 
  max-width: 580px; 
  margin: 0 0 24px; 
  color: var(--muted); 
  font-size: 15.5px; 
  line-height: 1.65;
}

.hero-actions { 
  display: flex; 
  gap: 14px; 
  flex-wrap: wrap; 
}

.hero-media { 
  position: relative; 
  height: 560px; 
  border-radius: 28px; 
  overflow: hidden; 
  box-shadow: 0 22px 60px rgba(39,52,69,.16); 
}
  overflow: hidden; 
  box-shadow: 0 22px 60px rgba(39,52,69,.16); 
}

.hero-media > img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.hero-media::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(180deg, transparent 50%, rgba(31,44,58,.55)); 
}

.image-caption { 
  position: absolute; 
  z-index: 2; 
  left: 24px; 
  bottom: 22px; 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  color: white; 
}

.image-caption span { 
  width: 36px; 
  height: 36px; 
  display: grid; 
  place-items: center; 
  border: 1px solid rgba(255,255,255,.4); 
  border-radius: 50%; 
  font-size: 11px; 
}

.image-caption p { 
  margin: 0; 
  font-family: "Manrope"; 
  font-weight: 600; 
}

.hero-stamp { 
  position: absolute; 
  z-index: 3; 
  right: 20px; 
  top: 20px; 
  width: 80px; 
  height: 80px; 
  background: var(--green); 
  border-radius: 50%; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  color: var(--navy); 
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.hero-stamp strong { 
  font: 800 22px "Manrope"; 
  line-height: 1; 
}

.hero-stamp span { 
  font-size: 9px; 
  text-transform: uppercase; 
  font-weight: 700;
}

/* ========================================================
   HERO INTERACTIVE SLIDER (AESTHETIC CORPORATE CAROUSEL)
   ======================================================== */
.hero-media.hero-slider-container {
  position: relative;
  height: clamp(520px, 46vw, 580px);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(25, 34, 43, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  user-select: none;
}

.hero-media.hero-slider-container::after {
  display: none !important;
}

.hero-slides-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.85s;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 6.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide.active .hero-slide-img {
  transform: scale(1);
}

.hero-slider-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: 
    linear-gradient(180deg, rgba(20, 28, 36, 0.35) 0%, transparent 25%, transparent 75%, rgba(20, 28, 36, 0.45) 100%);
}

.hero-stamp.hero-stamp--floating {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 6;
  pointer-events: auto;
  margin: 0;
  width: 76px;
  height: 76px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-stamp.hero-stamp--floating:hover {
  transform: scale(1.05) rotate(3deg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Floating bottom minimalist controls (solo imagen y controles limpios) */
.hero-slider-footer-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(23, 32, 42, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  padding: 6px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.hero-slider-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 8;
  overflow: hidden;
}

.hero-slider-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #728b18, #b1cd47);
  transition: width 0.1s linear;
}

.hero-slider-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
}

.hero-slider-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.hero-slider-dot.active {
  width: 24px;
  border-radius: 100px;
  background: #b1cd47;
  box-shadow: 0 0 10px rgba(177, 205, 71, 0.55);
}

.hero-slider-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 0.25s ease;
}

.hero-slider-btn:hover {
  background: #b1cd47;
  border-color: #b1cd47;
  color: #19222b;
  transform: scale(1.08);
}

.hero-slider-btn:active {
  transform: scale(0.96);
}

@media (max-width: 768px) {
  .hero-media.hero-slider-container {
    height: 420px;
    border-radius: 20px;
  }
  .hero-stamp.hero-stamp--floating {
    width: 64px;
    height: 64px;
    top: 14px;
    right: 14px;
  }
  .hero-stamp.hero-stamp--floating strong {
    font-size: 18px;
  }
  .hero-slider-footer-controls {
    bottom: 14px;
    padding: 5px 10px;
  }
}
  .hero-slider-topbar .hero-stamp strong {
    font-size: 18px;
  }
  .hero-slider-bottom {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px 16px;
    border-radius: 16px;
  }
  .hero-slider-heading {
    font-size: 14px;
  }
  .hero-slider-subheading {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-media.hero-slider-container {
    height: 360px;
  }
  .hero-slider-pill {
    padding: 6px 12px;
  }
  .hero-slider-pill-text {
    font-size: 10px;
  }
}

.hero-shape,
.hero-shape--one,
.hero-shape--two { 
  display: none !important; 
}

/* ========================================================
   ESTADÍSTICAS CORPORATIVAS
   ======================================================== */
.stats-banner { 
  background: var(--navy); 
  color: white; 
}

.stats-grid { 
  min-height: 120px; 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  align-items: center; 
}

.stat-item { 
  display: flex; 
  align-items: center; 
  gap: 15px; 
  min-height: 60px; 
  padding: 0 26px; 
  border-right: 1px solid rgba(255,255,255,.16); 
}

.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { border: 0; }
.stat-item strong { 
  font: 700 clamp(30px,2.8vw,42px) "Manrope"; 
  color: var(--green); 
  letter-spacing: -.05em; 
}
.stat-item span { 
  max-width: 125px; 
  color: #d7dce0; 
  font-size: 12px; 
  line-height: 1.4; 
}

/* ========================================================
   SECCIONES Y TARJETAS DINÁMICAS (SERVICIOS, BLOG, NOTICIAS)
   ======================================================== */
.section-heading {
  margin-bottom: 35px;
}

.section-heading h2 { 
  max-width: 720px; 
  margin: 14px 0 10px; 
  color: var(--navy); 
  font-size: clamp(30px, 3vw, 40px); 
  line-height: 1.15; 
}

.section-heading > p { 
  max-width: 700px; 
  margin: 0; 
  color: var(--muted); 
  font-size: 15px; 
}

.services-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 18px; 
}

.service-card { 
  min-height: 220px; 
  padding: 26px; 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  background: white; 
  border: 1px solid var(--border); 
  border-radius: 16px; 
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; 
  overflow: hidden; 
}

.service-card:hover { 
  transform: translateY(-4px); 
  box-shadow: var(--shadow); 
  border-color: transparent; 
}

.icon-box { 
  width: 48px; 
  height: 48px; 
  display: grid; 
  place-items: center; 
  background: var(--green-soft); 
  border-radius: 12px; 
  color: #789218; 
  font-size: 20px;
}

.service-card h3 { 
  margin: 20px 0 10px; 
  color: var(--navy); 
  font-size: 17px; 
  line-height: 1.35; 
}

.service-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 15px;
}

.card-link { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  margin-top: auto; 
  color: #789218; 
  font-size: 11px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: .06em; 
}

/* ========================================================
   EDITORIAL: ARTÍCULO DESTACADO + BLOG (Exacto a Referencia)
   ======================================================== */
.news-layout { 
  display: grid; 
  grid-template-columns: 1.45fr 1fr; 
  gap: 28px; 
  align-items: stretch;
}

.featured-news { 
  background: white; 
  border: 1px solid var(--border); 
  border-radius: 20px; 
  overflow: hidden; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  height: 100%;
  box-shadow: 0 10px 30px rgba(37, 49, 65, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.featured-news:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.news-image { 
  position: relative; 
  height: 100%;
  min-height: 380px; 
  overflow: hidden; 
  background: #eef2f6;
}

.news-image img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block;
  transition: transform .45s ease; 
}

.featured-news:hover .news-image img { 
  transform: scale(1.04); 
}

.date-badge { 
  position: absolute; 
  left: 20px; 
  top: 20px; 
  min-width: 54px; 
  padding: 10px 14px;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  background: var(--green); 
  border-radius: 12px; 
  color: #1e360e; 
  box-shadow: 0 4px 14px rgba(177, 205, 71, 0.4);
  line-height: 1;
  z-index: 2;
}

.date-badge strong { 
  font: 800 24px "Manrope", sans-serif; 
  line-height: 1; 
  display: block;
}

.date-badge span { 
  font-size: 10.5px; 
  font-weight: 800; 
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-top: 4px;
}

.news-copy { 
  padding: 34px 32px 30px; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between;
}

.content-tag { 
  color: #8da429; 
  font-size: 11.5px; 
  font-weight: 800; 
  letter-spacing: .14em; 
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

.news-copy h3 { 
  margin: 0 0 16px; 
  color: #1e2d3d; 
  font-size: 17.5px; 
  line-height: 1.34; 
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.news-copy p { 
  margin: 0 0 24px; 
  color: #556270; 
  font-size: 13.5px; 
  line-height: 1.65;
}

.clean-news-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: #1e2d3d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: all 0.22s ease;
}

.clean-news-link .arrow {
  font-size: 16px;
  transition: transform 0.22s ease;
}

.clean-news-link:hover {
  color: #0284c7;
}

.clean-news-link:hover .arrow {
  transform: translateX(4px);
}

/* Tarjeta de Blog idéntica en tamaño y estética a la foto */
.blog-card-modern { 
  padding: 32px 32px 28px; 
  background: #2a3a4c; 
  border-radius: 20px; 
  color: white; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: 0 10px 30px rgba(37, 49, 65, 0.08);
  box-sizing: border-box;
}

.blog-card-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  padding-bottom: 16px; 
  border-bottom: 1px solid rgba(255,255,255,.14); 
  margin-bottom: 6px;
}

.blog-card-header .blog-badge { 
  color: #b1cd47; 
  font: 800 13.5px "Manrope", sans-serif; 
  letter-spacing: .12em; 
  text-transform: uppercase;
}

.blog-card-header .blog-subtext { 
  color: #8fa0b2; 
  font-size: 12.5px; 
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}

.blog-card-header .blog-subtext:hover { 
  color: #ffffff; 
}

.blog-rows-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
}

.blog-row-item { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 16px; 
  padding: 16px 0; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
  text-decoration: none; 
  color: inherit; 
  transition: all 0.2s ease;
}

.blog-row-item:last-child { 
  border-bottom: 0; 
}

.blog-row-idx { 
  color: #8da429; 
  font-size: 12px; 
  font-weight: 800; 
  min-width: 24px; 
}

.blog-row-info { 
  flex: 1; 
}

.blog-row-info time { 
  display: block; 
  font-size: 11px; 
  color: #8fa0b2; 
  margin-bottom: 4px; 
  font-weight: 500; 
}

.blog-row-info h4 { 
  font-size: 14.5px; 
  font-weight: 600; 
  color: #ffffff; 
  line-height: 1.35; 
  margin: 0; 
  transition: color 0.2s ease; 
}

.blog-row-arrow { 
  color: #ffffff; 
  font-size: 16px; 
  opacity: 0.65; 
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease; 
}

.blog-row-item:hover .blog-row-arrow { 
  transform: translateX(4px); 
  opacity: 1; 
  color: #b1cd47; 
}

.blog-row-item:hover .blog-row-info h4 { 
  color: #e3f2a7; 
}

/* ========================================================
   MULTIMEDIA: PODCAST & VIDEOS
   ======================================================== */
.podcast-card { 
  min-height: 340px; 
  position: relative; 
  display: grid; 
  grid-template-columns: .9fr 1.1fr; 
  align-items: center; 
  background: #e8eddf; 
  border-radius: 22px; 
  overflow: hidden; 
}

.podcast-video-box { 
  height: 100%;
  min-height: 320px;
  background: #000;
}

.podcast-video-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.podcast-copy { 
  padding: 40px 50px; 
}

.podcast-copy h3 { 
  margin: 14px 0 12px; 
  color: var(--navy); 
  font-size: 26px; 
  line-height: 1.25; 
}

.podcast-copy p { 
  color: var(--muted); 
  font-size: 14px;
}

/* ========================================================
   CTA BANNER & FOOTER MODERNO
   ======================================================== */
.final-cta { 
  padding: 65px 0; 
  position: relative; 
  background: var(--navy); 
  color: white; 
  overflow: hidden; 
}

.final-cta .modern-container { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 40px; 
  position: relative; 
  z-index: 2; 
}

.final-cta span { 
  color: var(--green); 
  font-size: 11px; 
  letter-spacing: .15em; 
  font-weight: 800; 
  text-transform: uppercase;
}

.final-cta h2 { 
  max-width: 800px; 
  margin-top: 10px; 
  font-size: clamp(26px, 2.8vw, 38px); 
  line-height: 1.2; 
}

footer { 
  padding: 70px 0 0; 
  background: var(--navy-deep); 
  color: #bec6cc; 
}

.footer-grid { 
  display: grid; 
  grid-template-columns: 1.5fr .8fr 1fr 1fr; 
  gap: 50px; 
  padding-bottom: 50px; 
}

.footer-brand img { 
  width: 160px; 
  max-height: 70px; 
  object-fit: contain; 
}

.footer-brand p { 
  max-width: 320px; 
  font-size: 13px; 
  line-height: 1.6;
  margin: 16px 0 12px;
}

.footer-brand a { 
  color: var(--green); 
  font-weight: 600; 
  font-size: 13px;
}

.footer-grid h4 { 
  margin: 0 0 18px; 
  color: white; 
  font-size: 12px; 
  letter-spacing: .12em; 
  text-transform: uppercase;
}

.footer-links { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.footer-links li { 
  margin-bottom: 10px; 
}

.footer-links a { 
  color: #bec6cc; 
  font-size: 13px; 
}

.footer-links a:hover { 
  color: white; 
}

.footer-socials { 
  display: flex; 
  gap: 12px; 
  margin-top: 18px; 
}

.footer-socials a { 
  width: 32px; 
  height: 32px; 
  display: grid; 
  place-items: center; 
  border-radius: 50%; 
  background: rgba(255,255,255,.08); 
  color: white; 
  font-size: 13px;
  transition: background .2s;
}

.footer-socials a:hover { 
  background: var(--green); 
  color: var(--navy-deep);
}

.footer-bottom { 
  min-height: 60px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border-top: 1px solid rgba(255,255,255,.1); 
  font-size: 11px; 
  color: #909ba2;
}

/* ========================================================
   SECCIÓN: PRESENCIA REGIONAL & MAPA INTERACTIVO
   ======================================================== */
.regional-section {
  padding: 55px 0 35px;
  background: #fbfdfa;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.regional-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}

.regional-content {
  display: flex;
  flex-direction: column;
}

.regional-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8da429;
  margin-bottom: 16px;
}

.regional-eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2.5px;
  background: #8da429;
  border-radius: 2px;
}

.regional-title {
  font-size: clamp(30px, 3.8vw, 42px);
  font-weight: 800;
  line-height: 1.16;
  color: #1e2d3d;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.regional-desc {
  font-size: 15.5px;
  line-height: 1.76;
  color: #4b5866;
  margin-bottom: 26px;
  text-align: justify;
}

.country-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.country-pill {
  border: 1.5px solid #dce2e6;
  background: #ffffff;
  color: #3b4b59;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.country-pill:hover {
  border-color: #9ab438;
  background: #f7faf0;
  color: #21330d;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(177, 205, 71, 0.2);
}

.country-pill.active {
  background: #b1cd47;
  border-color: #9ab438;
  color: #18300a;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(177, 205, 71, 0.45);
  transform: translateY(-1px);
}

.country-pill.reset-pill {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #64748b;
}

.country-pill.reset-pill:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.regional-consultants {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #334155;
  font-size: 14px;
  padding: 12px 0 0;
  border-top: 1px solid #eef2f5;
  margin-top: 4px;
}

.regional-consultants svg {
  color: #8da429;
  flex-shrink: 0;
}

/* Columna del Mapa */
.regional-map-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(37, 49, 65, 0.08);
  position: relative;
  background-image: radial-gradient(#d5dfe8 1.2px, transparent 1.2px);
  background-size: 20px 20px;
}

.map-controls-box {
  position: absolute;
  right: 22px;
  top: 22px;
  z-index: 10;
  display: flex;
  gap: 6px;
}

.map-ctrl-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.map-ctrl-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.map-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid #edf2f7;
  margin-top: 12px;
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.dot-bolivia {
  background: #b1cd47;
  box-shadow: 0 0 0 3px rgba(177, 205, 71, 0.25);
}

.legend-dot.dot-regional {
  background: #204b73;
}

#servicios {
  padding-top: 55px;
}

/* ========================================================
   SECCIÓN: ALIANZAS Y ORGANISMOS COOPERANTES (MARQUEE)
   ======================================================== */
.partners-section {
  padding: 85px 0 75px;
  background: #fbfdfa;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.partners-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 42px;
}

.partners-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8da429;
  margin-bottom: 12px;
}

.partners-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: #8da429;
  border-radius: 2px;
}

.partners-title {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.22;
  color: #1e2d3d;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.partners-subtitle {
  font-size: 15px;
  line-height: 1.68;
  color: #64748b;
  margin: 0;
}

.partners-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.partner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* Contenedor del Carrusel Infinito */
.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
}

.marquee-track--left {
  animation: marqueeScrollLeft 50s linear infinite;
}

.marquee-track--right {
  animation: marqueeScrollRight 55s linear infinite;
  margin-top: 18px;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeScrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeScrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Tarjeta individual de organización con Hover Interactivo de Vanguardia */
.partner-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1.5px solid #e7ecf0;
  border-radius: 18px;
  padding: 12px 18px;
  min-width: 240px;
  height: 72px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1;
}

/* Destello de luz que recorre la tarjeta en hover */
.partner-card::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 50%;
  height: 220%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  opacity: 0;
  pointer-events: none;
  transition: none;
  z-index: 5;
}

.partner-card:hover::before {
  opacity: 1;
  left: 150%;
  transition: all 0.75s ease-out;
}

/* Enfoque Spotlight: Atenúa las tarjetas alrededor para dar máximo protagonismo */
.marquee-track:hover .partner-card {
  opacity: 0.55;
  filter: grayscale(40%);
  transform: scale(0.97);
}

/* La tarjeta sobre la que está el mouse se ilumina y flota con resalte verde Gerenssa */
.marquee-track .partner-card:hover {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
  transform: translateY(-8px) scale(1.06) !important;
  border-color: #b1cd47 !important;
  box-shadow: 0 16px 36px rgba(30, 45, 61, 0.16), 0 0 0 3px rgba(177, 205, 71, 0.35) !important;
  background: #ffffff !important;
  z-index: 20;
}

.partner-card-logo {
  max-height: 44px;
  max-width: 75px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(30%);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.partner-card:hover .partner-card-logo {
  filter: grayscale(0%);
  transform: scale(1.12);
}

.partner-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  flex: 1;
}

.partner-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e2d3d;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  transition: color 0.25s ease;
}

.partner-card:hover .partner-card-name {
  color: #0b1a28;
}

.partner-card-sub {
  font-size: 10px;
  font-weight: 700;
  color: #8da429;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.75;
  transform: translateY(2px);
  transition: all 0.25s ease;
}

.partner-card:hover .partner-card-sub {
  opacity: 1;
  transform: translateY(0);
}

.partner-card-fallback {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f1f6d7;
  color: #455a0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  transition: all 0.3s ease;
}

.partner-card:hover .partner-card-fallback {
  background: #b1cd47;
  color: #1a330a;
  transform: scale(1.08) rotate(-4deg);
}

/* Micro-botón interactivo con flecha externa que brota en hover */
.partner-card-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6) translate(-6px, 6px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.partner-card:hover .partner-card-arrow {
  opacity: 1;
  transform: scale(1) translate(0, 0);
  background: #b1cd47;
  color: #1a330a;
  box-shadow: 0 4px 10px rgba(177, 205, 71, 0.4);
}

/* ========================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ======================================================== */
@media (min-width: 1200px) {
  .social-mini { display: flex; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .regional-grid { grid-template-columns: 1fr; gap: 36px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .news-layout { grid-template-columns: 1fr; }
  .podcast-card { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .site-header {
    height: 74px;
  }
  .brand {
    height: 52px;
  }
  .brand img {
    height: 44px;
  }
  .site-nav { 
    display: none; 
    position: fixed; 
    top: 74px; 
    left: 0; 
    right: 0; 
    background: #ffffff; 
    flex-direction: column; 
    align-items: stretch; 
    padding: 18px 24px 30px; 
    box-shadow: 0 20px 40px rgba(24,33,44,.15); 
    border-bottom: 1px solid var(--border);
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    z-index: 999;
  }
  .site-nav.open { 
    display: flex; 
    animation: fadeIn .2s ease-out;
  }
  .site-nav a, 
  .site-nav .nav-dropdown-btn { 
    width: 100%; 
    padding: 13px 0; 
    font-size: 11.5px; 
    text-align: left;
    justify-content: space-between;
    border-bottom: 1px solid rgba(229,232,229,.6);
  }
  .site-nav a::after, 
  .site-nav .nav-dropdown-btn::after { 
    display: none !important; 
  }
  .dropdown-menu-box { 
    position: static; 
    box-shadow: none; 
    border: 0; 
    padding: 4px 0 10px 16px; 
    background: #f8faf9;
    border-radius: 8px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .nav-dropdown.open-mobile .dropdown-menu-box {
    display: block;
  }
  .dropdown-menu-box a {
    padding: 8px 10px;
    font-size: 12px;
    border-bottom: none;
  }
  .mobile-nav-contact {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 13px !important;
    background: var(--navy);
    color: white !important;
    border-radius: 9px;
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    border: 0 !important;
  }
  .menu-toggle { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: 0; 
    background: transparent; 
    color: var(--navy);
    cursor: pointer;
    padding: 6px;
  }
  .contact-button { 
    display: none; 
  }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2) { border-right: 0; }
  .stat-item { padding: 12px 18px; }
  .featured-news { grid-template-columns: 1fr; }
  .news-image { min-height: 280px; }
  .final-cta .modern-container { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 580px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .services-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}


/* ========================================================
   PÁGINA QUIÉNES SOMOS (REDESIGN & ADAPTIVE ARCHITECTURE)
   ======================================================== */
.company-hero {
  background: var(--surface);
  padding: clamp(48px, 6vw, 76px) 0 clamp(40px, 5vw, 60px);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.company-hero::after {
  display: none !important;
  content: none !important;
}

.company-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(30px, 4vw, 65px);
  position: relative;
  z-index: 2;
}

.company-hero-copy h1 {
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.08;
  margin: 18px 0 20px;
  letter-spacing: -0.03em;
}

.company-hero-copy p {
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 640px;
}

.company-hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.company-hero-media {
  position: relative;
  height: clamp(320px, 36vw, 450px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(39, 52, 69, 0.16);
  border: 1px solid rgba(229, 232, 229, 0.8);
}

.company-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.company-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 33, 44, 0.05) 0%, rgba(24, 33, 44, 0.35) 100%);
  pointer-events: none;
}

.company-badge-top {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  z-index: 3;
}

.company-badge-bottom {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(37, 49, 65, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 16px;
  border-radius: 12px;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 3;
  max-width: calc(100% - 40px);
}

.company-badge-bottom strong {
  display: block;
  font-size: 13px;
  color: #c9e25a;
  letter-spacing: 0.02em;
}

.company-badge-bottom span {
  display: block;
  font-size: 11px;
  color: #bec7cd;
  margin-top: 2px;
}

/* Indicadores / Métricas Rápidas */
.company-stats-section {
  padding: 0 0 20px;
  margin-top: -36px;
  position: relative;
  z-index: 10;
}

.company-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.company-stat-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px;
  box-shadow: 0 12px 30px rgba(32, 44, 57, 0.06);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.company-stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
}

.company-stat-card strong {
  display: block;
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 800;
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  line-height: 1.1;
}

.company-stat-card strong em {
  font-style: normal;
  color: #7b951b;
}

.company-stat-card span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 5px;
  line-height: 1.35;
}

/* Bloques Editoriales Numerados */
.company-editorial-wrap {
  padding: clamp(30px, 4vw, 60px) 0;
}

.company-block-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(36px, 4.5vw, 55px) 0;
  border-bottom: 1px solid var(--border);
}

.company-block-item:first-child {
  padding-top: 0;
}

.company-block-num {
  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}

.company-block-body {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(24px, 4vw, 55px);
  align-items: start;
}

.company-block-title h2 {
  font-size: clamp(22px, 2.2vw, 29px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.company-block-title small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #7b951b;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.company-block-content p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 18px;
}

.company-block-content p:last-child {
  margin-bottom: 0;
}

.company-quote {
  border-left: 3px solid var(--green);
  padding: 6px 0 6px 20px;
  margin: 0 0 20px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.6;
  font-style: italic;
  background: linear-gradient(90deg, rgba(239, 245, 217, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 0 10px 10px 0;
}

/* Country chips */
.country-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  transition: all 0.2s ease;
}

.country-chip:hover {
  background: #ffffff;
  border-color: #7b951b;
  color: #5c7410;
  transform: translateY(-1px);
}

/* Etiquetas conceptuales */
.concept-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.concept-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  background: #ffffff;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.concept-tag-item svg {
  color: #7b951b;
}

.concept-tag-item:hover {
  border-color: var(--green);
  background: var(--green-soft);
  color: #4b600a;
}

/* Pilares Corporativos */
.company-pillars-section {
  background: var(--surface);
  padding: clamp(50px, 6vw, 85px) 0;
  border-top: 1px solid var(--border);
}

.company-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.company-pillar-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 26px;
  box-shadow: 0 10px 28px rgba(32, 44, 57, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}

.company-pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(32, 44, 57, 0.1);
  border-color: var(--green);
}

.company-pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--green-soft);
  color: #5c7410;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.company-pillar-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.company-pillar-card p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
}

/* Imagen secundaria de taller / campo */
.company-workshop-photo {
  margin-top: 24px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border);
}

.company-workshop-photo img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  display: block;
}

/* ========================================================
   RESPONSIVE DESIGN BREAKPOINTS PARA QUIÉNES SOMOS
   ======================================================== */
@media (max-width: 1024px) {
  .company-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .company-hero-media {
    height: 360px;
  }
  .company-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .company-block-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .company-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .company-block-item {
    grid-template-columns: 50px 1fr;
    gap: 16px;
    padding: 32px 0;
  }
  .company-block-num {
    font-size: 28px;
  }
  .company-quote {
    font-size: 16.5px;
  }
}

@media (max-width: 580px) {
  .company-hero {
    padding: 40px 0 45px;
  }
  .company-hero-media {
    height: 270px;
    border-radius: 14px;
  }
  .company-hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  .company-hero-buttons .button {
    width: 100%;
  }
  .company-stats-section {
    margin-top: -20px;
  }
  .company-stats-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .company-stat-card {
    padding: 16px 14px;
  }
  .company-block-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .company-block-num {
    display: inline-block;
    width: fit-content;
    padding: 4px 10px;
    background: var(--green-soft);
    border-radius: 6px;
    font-size: 18px;
  }
  .company-pillars-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .company-badge-top {
    font-size: 9.5px;
    padding: 6px 10px;
  }
  .company-badge-bottom {
    padding: 8px 12px;
    left: 12px;
    bottom: 12px;
  }
}


/* ========================================================
   SECCIÓN EQUIPO DE TRABAJO (REDISEÑO PERFECCIONADO Y PROPORCIONADO)
   ======================================================== */
.team-header-section {
  background: var(--surface);
  padding: clamp(45px, 5vw, 65px) 0 clamp(25px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.team-header-section::after {
  display: none !important;
  content: none !important;
}

.team-header-copy {
  max-width: 820px;
  position: relative;
  z-index: 2;
}

.team-header-copy h1 {
  margin: 16px 0 14px;
  color: var(--navy);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.team-header-copy p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.6;
  max-width: 680px;
}

.team-content-section {
  background: var(--surface);
  padding: clamp(35px, 4vw, 55px) 0 clamp(50px, 6vw, 80px);
}

.team-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 30px);
}

/* Tarjeta de Miembro */
.team-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 4px 16px rgba(32, 44, 57, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

/* Efecto Rayo de Luz (Shimmer) */
.team-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.team-card:hover::before {
  opacity: 1;
  left: 140%;
  transition: all 0.75s ease-out;
}

.team-card:hover {
  transform: translateY(-8px);
  border-color: #b1cd47;
  box-shadow: 0 24px 50px rgba(32, 44, 57, 0.12), 0 0 0 1px rgba(177, 205, 71, 0.35);
}

/* Contenedor Fotográfico: Proporcionado para retratos sin cortes de barbilla ni frente */
.team-photo {
  width: 100%;
  height: clamp(300px, 24vw, 360px);
  position: relative;
  background: #e9ece8;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cuando tiene foto: Limpio, nítido y sin superposiciones sobre la cara */
.team-photo--has-image {
  background: #2a3848;
}

.team-photo--has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

/* Sombra gradual inferior de la foto para transición suave */
.team-photo--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 72%, rgba(20, 28, 38, 0.28) 100%);
  pointer-events: none;
}

/* Pastilla flotante interactiva sobre la foto (Glassmorphism) */
.team-photo-pill {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translate(-50%, 8px);
  opacity: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(229, 232, 229, 0.9);
  border-radius: 100px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.team-card:hover .team-photo-pill {
  opacity: 1;
  transform: translate(-50%, 0);
}

.team-photo-pill svg {
  color: #7b951b;
  transition: transform 0.25s ease;
}

.team-card:hover .team-photo-pill svg {
  transform: translateX(3px);
}

/* Cuando NO tiene foto (Placeholder con monograma e insignia de la referencia) */
.team-photo--placeholder {
  background: linear-gradient(145deg, #dfe5e1, #f0f2ef);
  color: rgba(50, 64, 83, 0.32);
}

.team-photo--placeholder::before {
  display: none !important;
  content: none !important;
}

.team-initials {
  position: relative;
  z-index: 2;
  font: 800 42px "Manrope", sans-serif;
  letter-spacing: -0.05em;
  color: var(--navy);
  line-height: 1;
}

.team-placeholder-tag {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
}

.team-card--1 .team-photo--placeholder,
.team-card--5 .team-photo--placeholder {
  background: linear-gradient(145deg, #e8eadf, #f7f8f2);
}

.team-card--2 .team-photo--placeholder,
.team-card--6 .team-photo--placeholder {
  background: linear-gradient(145deg, #dce3e6, #f2f4f5);
}

/* Información del Miembro */
.team-info {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #ffffff;
  position: relative;
}

.team-info-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.team-info h3 {
  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  line-height: 1.22;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}

.team-card:hover .team-info h3 {
  color: #141f2b;
}

.team-action-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--navy);
  flex-shrink: 0;
  border: 1px solid var(--border);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card:hover .team-action-icon {
  background: var(--green);
  border-color: var(--green);
  color: #1a2530;
  transform: translate(2px, -2px) scale(1.08);
}

.team-info p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
}

/* Línea de acento inferior en hover */
.team-card-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #b1cd47, #d4e86e);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card:hover .team-card-line {
  width: 100%;
}

/* Responsividad Tablet y Móvil */
@media (max-width: 980px) {
  .team-full-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .team-photo {
    height: 320px;
  }
}

@media (max-width: 620px) {
  .team-full-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .team-photo {
    height: 340px;
  }
  .team-header-section {
    padding: 35px 0 25px;
  }
  .team-info {
    padding: 20px 18px 22px;
  }
  .team-info h3 {
    font-size: 18px;
  }
}

/* ========================================================
   VISTA DE PERFIL INDIVIDUAL (SHOW DE PERSONAL)
   ======================================================== */
.profile-view-wrap {
  padding: 40px 0 70px;
  background: var(--surface);
}

.profile-card-modern {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 16px 45px rgba(32, 44, 57, 0.06);
  padding: clamp(26px, 4vw, 50px);
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}

.profile-photo-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-photo-frame {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(32, 44, 57, 0.1);
  border: 1px solid var(--border);
  background: var(--surface);
}

.profile-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.profile-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: all 0.2s ease;
}

.profile-back-btn:hover {
  background: var(--surface);
  border-color: var(--navy);
  transform: translateX(-3px);
}

.profile-info-col h1 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 10px;
}

.profile-role-pill {
  display: inline-block;
  padding: 7px 14px;
  background: var(--green-soft);
  color: #4b600a;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 24px;
}

.profile-bio-text {
  font-size: 15.5px;
  color: #3b464f;
  line-height: 1.8;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.profile-bio-text p {
  margin-bottom: 18px;
}

/* Breakpoints para perfil y tarjetas */
@media (max-width: 900px) {
  .profile-card-modern {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .profile-photo-frame {
    max-width: 320px;
    margin: 0 auto;
  }
  .team-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .team-grid-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .team-card-photo-wrap {
    height: 270px;
  }
  .profile-card-modern {
    padding: 20px 18px;
    border-radius: 14px;
  }
  .profile-photo-frame {
    max-width: 100%;
  }
}

/* ========================================================
   ENCABEZADO COMPACTO DE SERVICIOS (ALTA EFICIENCIA, SIN ESPACIOS VACÍOS)
   ======================================================== */
.srv-compact-header {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 22px 0 16px;
  position: relative;
}

.srv-compact-header__ledger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.srv-compact-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #728b18;
}

.srv-compact-header__badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #728b18;
}

.srv-compact-header__territory {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.srv-compact-header__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.srv-compact-header__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
  white-space: nowrap;
}

.srv-compact-header__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 760px;
  margin: 0;
  flex: 1;
}

.srv-compact-header__specs {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.srv-compact-spec {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--navy);
  border-right: 1px solid var(--border);
  text-align: center;
}

.srv-compact-spec:last-child {
  border-right: none;
}

.srv-compact-spec strong {
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #728b18;
  line-height: 1;
}

.srv-compact-spec span {
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Reducir espacio superior de la sección de servicios */
.srv-section-compact {
  padding-top: 24px !important;
  padding-bottom: 70px !important;
}

@media (max-width: 900px) {
  .srv-compact-header__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .srv-compact-header__desc {
    max-width: 100%;
  }
  .srv-compact-header__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .srv-compact-spec {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    justify-content: flex-start;
  }
  .srv-compact-spec:nth-child(2) {
    border-right: none;
  }
  .srv-compact-spec:nth-child(3),
  .srv-compact-spec:nth-child(4) {
    border-bottom: none;
  }
}

@media (max-width: 540px) {
  .srv-compact-header {
    padding: 14px 0 12px;
  }
  .srv-compact-header__ledger {
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-size: 10px;
  }
  .srv-compact-header__territory {
    display: none;
  }
  .srv-compact-header__title {
    font-size: 22px;
  }
  .srv-compact-header__desc {
    font-size: 13px;
    line-height: 1.45;
  }
  .srv-compact-header__specs {
    grid-template-columns: 1fr 1fr;
  }
  .srv-compact-spec {
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border);
    justify-content: flex-start;
    padding: 6px 10px;
  }
  .srv-compact-spec:nth-child(2),
  .srv-compact-spec:nth-child(4) {
    border-right: none !important;
  }
  .srv-compact-spec:nth-child(3),
  .srv-compact-spec:nth-child(4) {
    border-bottom: none;
  }
  .srv-compact-spec strong {
    font-size: 13px;
  }
  .srv-compact-spec span {
    font-size: 9.5px;
  }
}

/* ========================================================
   EXPERIENCIA INSTITUCIONAL (DOSSIERS & CATÁLOGO EJECUTIVO)
   ======================================================== */
.exp-controls-wrapper {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exp-filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(50, 64, 83, 0.2) transparent;
  -webkit-overflow-scrolling: touch;
}

.exp-filter-scroll::-webkit-scrollbar {
  height: 4px;
}

.exp-filter-scroll::-webkit-scrollbar-thumb {
  background: rgba(50, 64, 83, 0.2);
  border-radius: 4px;
}

.exp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border);
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s ease;
  cursor: pointer;
}

.exp-pill:hover {
  background: var(--surface);
  border-color: #728b18;
  color: #728b18;
}

.exp-pill.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.exp-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 100px;
  background: rgba(50, 64, 83, 0.08);
  color: var(--navy);
}

.exp-pill.is-active .exp-pill__count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

/* Resumen de Estado de Filtros */
.exp-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

.exp-status-bar strong {
  color: var(--navy);
}

.exp-clear-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #728b18;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}

/* Grilla de Dossiers de Proyectos */
.exp-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.exp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  border-left: 3px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.exp-card:hover {
  border-color: rgba(50, 64, 83, 0.18);
  border-left-color: #728b18;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(50, 64, 83, 0.07);
}

.exp-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.exp-card__client {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f5e5;
  color: #556e0a;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exp-card__date {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.exp-card__title {
  font-family: "Manrope", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}

.exp-card__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 16px;
  flex: 1;
}

.exp-card__desc p {
  margin: 0;
}

.exp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
  flex-wrap: wrap;
}

.exp-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--navy);
}

.exp-card__tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.exp-card__tag {
  background: var(--surface);
  border: 1px solid rgba(50, 64, 83, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}

.exp-load-more-wrap {
  text-align: center;
  margin-top: 24px;
}

.exp-empty-state {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.exp-empty-state__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-bottom: 16px;
}

.exp-empty-state__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.exp-empty-state__desc {
  font-size: 14px;
  color: var(--muted);
  max-width: 460px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .exp-projects-grid {
    grid-template-columns: 1fr;
  }
  .exp-card {
    padding: 18px 16px;
  }
  .exp-card__client {
    max-width: 100%;
  }
}

/* ========================================================
   ENCABEZADO CARACTERÍSTICO: BIBLIOTECA & REPOSITORIO DIGITAL
   ======================================================== */
.bib-compact-header {
  background: #fdfdfc;
  border-bottom: 1px solid var(--border);
  padding: 22px 0 16px;
  position: relative;
}

.bib-compact-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #728b18 0%, #324053 100%);
}

.bib-compact-header__ledger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bib-compact-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #556e0a;
}

.bib-compact-header__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #f0f5e5;
  color: #556e0a;
}

.bib-oa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f4f7ed;
  border: 1px solid #dbe6c4;
  color: #4a6308;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

.bib-compact-header__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bib-compact-header__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bib-compact-header__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
  white-space: nowrap;
}

.bib-tag-rep {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.bib-compact-header__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 760px;
  margin: 0;
  flex: 1;
}

/* Franja de Métricas Característica de Repositorio Digital */
.bib-specs {
  display: flex;
  align-items: center;
  background: #fbfbf9;
  border: 1px solid rgba(50, 64, 83, 0.12);
  border-radius: 6px;
  overflow: hidden;
}

.bib-spec {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--navy);
  border-right: 1px solid rgba(50, 64, 83, 0.1);
  text-align: center;
}

.bib-spec:last-child {
  border-right: none;
}

.bib-spec strong {
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bib-spec .pdf-pill {
  background: #feebe8;
  color: #c93b27;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.bib-spec span.bib-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 900px) {
  .bib-compact-header__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .bib-compact-header__desc {
    max-width: 100%;
  }
  .bib-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .bib-spec {
    border-right: 1px solid rgba(50, 64, 83, 0.1);
    border-bottom: 1px solid rgba(50, 64, 83, 0.1);
    padding: 10px 12px;
    justify-content: flex-start;
  }
  .bib-spec:nth-child(2) {
    border-right: none;
  }
  .bib-spec:nth-child(3),
  .bib-spec:nth-child(4) {
    border-bottom: none;
  }
}

@media (max-width: 540px) {
  .bib-compact-header {
    padding: 14px 0 12px;
  }
  .bib-compact-header__ledger {
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-size: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .bib-compact-header__title {
    font-size: 22px;
  }
  .bib-compact-header__desc {
    font-size: 13px;
    line-height: 1.45;
  }
  .bib-specs {
    grid-template-columns: 1fr 1fr;
  }
  .bib-spec {
    border-right: 1px solid rgba(50, 64, 83, 0.1) !important;
    border-bottom: 1px solid rgba(50, 64, 83, 0.1);
    justify-content: flex-start;
    padding: 6px 10px;
  }
  .bib-spec:nth-child(2),
  .bib-spec:nth-child(4) {
    border-right: none !important;
  }
  .bib-spec:nth-child(3),
  .bib-spec:nth-child(4) {
    border-bottom: none;
  }
  .bib-spec strong {
    font-size: 13px;
  }
  .bib-spec span.bib-lbl {
    font-size: 9.5px;
  }
}




/* ========================================================
   ARQUITECTURA INSTITUCIONAL BESPOKE (NO PLANTILLA IA)
   ESTÁNDAR EDITORIAL Y DIRECTIVAS PARA GERENSSA
   ======================================================== */

/* 1. MASTHEAD INSTITUCIONAL ARQUITECTÓNICO */
.inst-masthead {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.inst-masthead__ledger {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #647d0e;
}

.inst-masthead__ledger-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.inst-masthead__body {
  padding: clamp(40px, 4.5vw, 64px) 0 clamp(32px, 3.5vw, 48px);
}

.inst-masthead__title {
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.inst-masthead__desc {
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.72;
  color: var(--muted);
  max-width: 820px;
  margin: 0 0 28px;
}

.inst-masthead__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* 2. FRANJA DE ESPECIFICACIONES TÉCNICAS (HORIZONTAL INTEGRADA) */
.inst-specs-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.inst-spec-item {
  padding: 20px 24px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inst-spec-item:last-child {
  border-right: none;
}

.inst-spec-value {
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inst-spec-value .spec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #728b18;
  display: inline-block;
}

.inst-spec-label {
  font-size: 11px;
  font-weight: 700;
  color: #6c787e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

/* 3. BARRA DE CONTROL ARQUITECTÓNICA Y NAVEGADOR DE EJES */
.practice-control-bar {
  position: sticky;
  top: 84px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(50, 64, 83, 0.04);
}

.practice-control-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.practice-axes-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.practice-axes-nav::-webkit-scrollbar {
  display: none;
}

.practice-nav-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.practice-nav-tab:hover {
  background: var(--surface);
  border-color: var(--border);
}

.practice-nav-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.practice-nav-tab .tab-badge {
  background: var(--green-soft);
  color: #647d0e;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

.practice-nav-tab.active .tab-badge {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

/* Herramientas derechas: Búsqueda y Selector de Vista */
.practice-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.inst-search-box {
  position: relative;
  width: 280px;
}

.inst-search-box input {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--navy);
  background: var(--surface);
  transition: all 0.2s ease;
}

.inst-search-box input:focus {
  outline: none;
  background: var(--white);
  border-color: #8da429;
  box-shadow: 0 0 0 3px rgba(177, 205, 71, 0.15);
}

.inst-search-box .search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #728b18;
  pointer-events: none;
}

.inst-search-box .clear-ico {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
}

/* Selector de Vistas: Dossier vs Matriz */
.inst-view-switcher {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 3px;
  gap: 2px;
}

.view-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.view-btn:hover {
  color: var(--navy);
}

.view-btn.active {
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 4. VISTA DOSSIER POR EJES ESTRATÉGICOS */
.axis-section {
  margin-bottom: 54px;
}

.axis-section.hidden {
  display: none;
}

.axis-header {
  border-left: 4px solid #728b18;
  padding: 4px 0 4px 18px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}

.axis-code {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #728b18;
  margin-bottom: 4px;
}

.axis-title {
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
  margin: 0;
}

.axis-desc {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
  max-width: 780px;
}

.axis-count {
  font-size: 11.5px;
  font-weight: 700;
  color: #647d0e;
  background: var(--green-soft);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Grilla de Fichas de Práctica dentro del Eje */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Ficha Técnica de Práctica Profesional */
.practice-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
}

.practice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(50, 64, 83, 0.08);
  border-color: rgba(114, 139, 24, 0.45);
}

.practice-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #2a3746;
  overflow: hidden;
}

.practice-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.practice-card:hover .practice-card__img {
  transform: scale(1.05);
}

.practice-card__code {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(26, 37, 50, 0.88);
  backdrop-filter: blur(6px);
  color: #d6e897;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 5px;
}

.practice-card__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.practice-card__title {
  font-family: "Manrope", sans-serif;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  margin: 0 0 10px;
}

.practice-card__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.practice-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
}

.practice-tag {
  background: #f4f6f3;
  color: #4b585e;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid #e1e7e0;
}

.practice-card__actions {
  padding: 14px 20px;
  background: #fafbfa;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.practice-card__action-link {
  color: #647d0e;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease, color 0.2s ease;
}

.practice-card__action-link:hover {
  color: var(--navy);
  gap: 9px;
}

.practice-card__action-btn {
  background: transparent;
  border: 1px solid #d5dbd7;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.practice-card__action-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* 5. VISTA MATRIZ TÉCNICA (TABLA DE REGISTRO INSTITUCIONAL) */
.inst-matrix-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(50, 64, 83, 0.04);
}

.inst-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.inst-matrix-table th {
  background: var(--surface);
  padding: 16px 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 2px solid var(--border);
}

.inst-matrix-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  vertical-align: middle;
}

.inst-matrix-table tr:hover td {
  background: #fbfcfb;
}

.matrix-code-badge {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  color: #647d0e;
  background: var(--green-soft);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* 6. VISTA ARCHIVÍSTICA PARA BIBLIOTECA */
.inst-archive-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.inst-archive-table th {
  background: var(--surface);
  padding: 14px 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 2px solid var(--border);
}

.inst-archive-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}

.inst-archive-table tr:hover td {
  background: #fafbfa;
}

/* 7. ADAPTABILIDAD RESPONSIVA PARA TODAS LAS RESOLUCIONES */
@media (max-width: 1100px) {
  .practice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .inst-specs-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .inst-spec-item:nth-child(2) {
    border-right: none;
  }
  .inst-spec-item:nth-child(1),
  .inst-spec-item:nth-child(2) {
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 768px) {
  .practice-grid {
    grid-template-columns: 1fr;
  }
  .practice-control-bar {
    top: 70px;
  }
  .practice-control-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .practice-tools {
    justify-content: space-between;
  }
  .inst-search-box {
    width: 100%;
  }
  .inst-specs-bar {
    grid-template-columns: 1fr 1fr;
  }
  .inst-matrix-wrap {
    overflow-x: auto;
  }
  .inst-matrix-table {
    min-width: 700px;
  }
  .inst-archive-table {
    min-width: 700px;
  }
}

@media (max-width: 540px) {
  .inst-specs-bar {
    grid-template-columns: 1fr;
  }
  .inst-spec-item {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
  }
  .axis-header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Panel de Control y Filtros */
.services-control-panel {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.services-search-wrapper {
  position: relative;
  width: 100%;
}

.services-search-wrapper .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #8da429;
  pointer-events: none;
}

.services-search-input {
  width: 100%;
  height: 54px;
  padding: 0 46px 0 50px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: 14px;
  color: var(--navy);
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(50, 64, 83, 0.03);
}

.services-search-input:focus {
  outline: none;
  border-color: #8da429;
  box-shadow: 0 0 0 4px rgba(177, 205, 71, 0.2);
}

.services-search-input::placeholder {
  color: #9ba5a8;
}

.search-clear-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: #eef2eb;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.search-clear-btn:hover {
  background: #dde5d7;
}

/* Píldoras de Filtro Temático */
.services-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.srv-filter-pill {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.srv-filter-pill:hover {
  border-color: #8da429;
  background: rgba(177, 205, 71, 0.08);
}

.srv-filter-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white) !important;
}

.srv-filter-pill span {
  display: inline-block;
  background: var(--green-soft);
  color: #647d0e;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 100px;
  transition: all 0.2s ease;
}

.srv-filter-pill.active span {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.services-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 4px;
}

/* Grilla de Servicios Mejorada */
.services-grid--enhanced {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Tarjeta de Servicio Moderna */
.srv-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  box-shadow: 0 6px 20px rgba(50, 64, 83, 0.04);
  position: relative;
}

.srv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(50, 64, 83, 0.12);
  border-color: rgba(177, 205, 71, 0.55);
}

/* Área de Imagen Superior */
.srv-card__media {
  position: relative;
  height: 195px;
  overflow: hidden;
  background: #e9ece8;
}

.srv-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.srv-card:hover .srv-card__img {
  transform: scale(1.06);
}

.srv-card__category {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(37, 49, 65, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e5f2b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
}

.srv-card__number {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Cuerpo de la Tarjeta */
.srv-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.srv-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.srv-card__icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green-soft);
  color: #728b18;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease;
}

.srv-card:hover .srv-card__icon-box {
  transform: scale(1.06);
  background: #e3efbe;
}

.srv-card__title {
  font-family: "Manrope", sans-serif;
  font-size: 18.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.32;
  margin: 0;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}

.srv-card:hover .srv-card__title {
  color: #202b38;
}

.srv-card__desc {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.62;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Etiquetas de capacidades clave */
.srv-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.srv-tag {
  background: #f2f5f1;
  color: #4f5a60;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  line-height: 1.4;
  border: 1px solid #e2e7e0;
}

/* Pie de Tarjeta y Enlaces de Acción */
.srv-card__footer {
  padding: 15px 24px;
  background: #fafbfa;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.srv-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #647d0e;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: gap 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.srv-card__link:hover {
  color: var(--navy);
  gap: 11px;
}

.srv-card__info-btn {
  background: transparent;
  border: 1px solid #d8deda;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.srv-card__info-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* Estado Vacío de Búsqueda */
.services-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border: 1.5px dashed var(--border);
  border-radius: 18px;
}

.services-empty-state h3 {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 8px;
}

.services-empty-state p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 18px;
}

/* Modal de Alcance Técnico */
.srv-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(30, 41, 54, 0.76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease-out;
}

.srv-modal-overlay.active {
  display: flex !important;
}

.srv-modal-dialog {
  background: var(--white);
  width: min(100%, 720px);
  max-height: 90vh;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(20, 28, 38, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: fadeInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.srv-modal-header {
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
}

.srv-modal-close {
  background: #e6eae7;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.srv-modal-close:hover {
  background: var(--navy);
  color: var(--white);
}

.srv-modal-body {
  padding: 28px;
  overflow-y: auto;
}

.srv-modal-media {
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 22px;
}

.srv-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.srv-modal-text {
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.7;
}

.srv-modal-text ul {
  padding-left: 20px;
  margin: 14px 0;
}

.srv-modal-text li {
  margin-bottom: 8px;
  color: #3d4a52;
}

.srv-modal-footer {
  padding: 18px 28px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* Banner de Consulta Corporativo */
.services-cta-banner {
  margin-top: 60px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  border-radius: 20px;
  padding: clamp(36px, 4vw, 50px);
  color: var(--white);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: 0 20px 48px rgba(37, 49, 65, 0.16);
}

.services-cta-banner::after {
  display: none !important;
  content: none !important;
}

.services-cta-copy {
  max-width: 650px;
  position: relative;
  z-index: 2;
}

.services-cta-copy h2 {
  font-size: clamp(24px, 2.5vw, 32px);
  color: var(--white);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.services-cta-copy p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.services-cta-actions {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .services-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .services-grid--enhanced {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .services-grid--enhanced {
    grid-template-columns: 1fr;
  }
  .metrics-grid-card {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .services-cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .srv-modal-dialog {
    max-height: 95vh;
  }
  .srv-modal-media {
    height: 180px;
  }
}

/* ========================================================
   REDESIGN PROFESIONAL: BIBLIOTECA & DOCUMENTOS (GERENSSA)
   ======================================================== */
/* Compatibilidad y alias con el nuevo estándar institucional */
.library-hero {
  display: none;
}

/* Grilla de Documentos */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tarjeta de Documento Moderna */
.doc-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  box-shadow: 0 4px 16px rgba(50, 64, 83, 0.04);
  position: relative;
}

.doc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(50, 64, 83, 0.11);
  border-color: rgba(177, 205, 71, 0.6);
}

.doc-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.doc-card__icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--green-soft);
  color: #728b18;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease;
}

.doc-card:hover .doc-card__icon-box {
  transform: scale(1.06);
  background: #e3efbe;
}

.doc-card__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.doc-card__badge-cat {
  background: var(--surface);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.doc-card__badge-pdf {
  background: #feebe8;
  color: #c93b27;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.doc-card__title {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.36;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
  transition: color 0.2s ease;
}

.doc-card:hover .doc-card__title {
  color: #1e293b;
}

.doc-card__desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-card__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.doc-card__view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #647d0e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: gap 0.2s ease, color 0.2s ease;
}

.doc-card__view-btn:hover {
  color: var(--navy);
  gap: 10px;
}

.doc-card__download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.doc-card__download-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ========================================================
   VISTA DE DOCUMENTO INDIVIDUAL (SHOW)
   ======================================================== */
.doc-show-wrap {
  padding: 30px 0 70px;
}

.modern-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 24px;
}

.modern-breadcrumb a {
  color: #728b18;
  font-weight: 600;
}

.modern-breadcrumb a:hover {
  color: var(--navy);
}

.modern-breadcrumb .sep {
  color: #b9c1be;
  font-size: 11px;
}

.modern-breadcrumb .current {
  color: var(--navy);
  font-weight: 700;
  max-width: 450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================================
   VISTA DE DOCUMENTO TÉCNICO INDIVIDUAL (DOSSIER & VISOR)
   ======================================================== */
.doc-show-wrap {
  padding: 24px 0 70px;
}

.doc-back-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.doc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #728b18;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.doc-back-link:hover {
  color: var(--navy);
  transform: translateX(-3px);
}

.doc-dossier-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(50, 64, 83, 0.04);
}

.doc-dossier-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.doc-dossier-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.doc-badge-pill {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 4px;
}

.doc-badge-pill--cat {
  background: var(--surface);
  color: var(--navy);
  border: 1px solid var(--border);
}

.doc-badge-pill--pdf {
  background: #feebe8;
  color: #c93b27;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.doc-badge-pill--custody {
  background: #f0f5e5;
  color: #556e0a;
}

.doc-dossier-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}

.doc-dossier-abstract {
  background: #fbfbf9;
  border-left: 3px solid #728b18;
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.doc-dossier-abstract__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #728b18;
  margin-bottom: 4px;
}

.doc-dossier-abstract__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Ficha Técnica Rápida en Línea */
.doc-factsheet-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 0;
  margin-bottom: 16px;
  border-top: 1px solid rgba(50, 64, 83, 0.07);
  border-bottom: 1px solid rgba(50, 64, 83, 0.07);
  font-size: 12px;
  color: var(--muted);
}

.doc-factsheet-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.doc-factsheet-item strong {
  color: var(--navy);
  font-weight: 700;
}

.doc-dossier-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.doc-dossier-actions .button {
  padding: 10px 20px;
  font-size: 11.5px;
  min-height: 40px;
}

/* Marco del Lector de Documento Integrado */
.doc-reader-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(50, 64, 83, 0.07);
  margin-bottom: 40px;
}

.doc-reader-toolbar {
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.doc-reader-toolbar__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.doc-reader-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.doc-reader-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.doc-reader-toolbar__btn:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.doc-reader-iframe {
  width: 100%;
  height: clamp(600px, 80vh, 900px);
  border: none;
  display: block;
  background: #525659;
}

@media (max-width: 768px) {
  .doc-dossier-card {
    padding: 20px 16px;
  }
  .doc-factsheet-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .doc-dossier-actions {
    flex-direction: column;
    width: 100%;
  }
  .doc-dossier-actions .button {
    width: 100%;
    justify-content: center;
  }
  .doc-reader-iframe {
    height: 520px;
  }
}

/* Breakpoints para Biblioteca en Tablet y Celular */
@media (max-width: 1024px) {
  .library-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .documents-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 680px) {
  .documents-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .doc-card {
    padding: 20px;
  }
  .doc-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .doc-card__view-btn {
    justify-content: center;
  }
  .doc-card__download-btn {
    justify-content: center;
  }
  .modern-breadcrumb .current {
    max-width: 180px;
  }
  .doc-action-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .doc-action-bar .button {
    width: 100%;
    justify-content: center;
  }
  .pdf-viewer-object {
    height: 480px;
  }
}

/* ========================================================
   OPORTUNIDADES LABORALES & RED DE EXPERTOS (ESTÁNDAR BESPOKE)
   ======================================================== */
.opp-compact-header {
  background: #fdfdfc;
  border-bottom: 1px solid var(--border);
  padding: 22px 0 16px;
  position: relative;
}

.opp-compact-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #728b18 0%, #324053 100%);
}

.opp-compact-header__ledger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.opp-compact-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #556e0a;
}

.opp-compact-header__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #f0f5e5;
  color: #556e0a;
}

.opp-roster-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f4f7ed;
  border: 1px solid #dbe6c4;
  color: #4a6308;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

.opp-compact-header__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.opp-compact-header__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.opp-compact-header__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
  white-space: nowrap;
}

.opp-tag-rep {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.opp-compact-header__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 760px;
  margin: 0;
  flex: 1;
}

/* Franja de Métricas de Oportunidades */
.opp-specs {
  display: flex;
  align-items: center;
  background: #fbfbf9;
  border: 1px solid rgba(50, 64, 83, 0.12);
  border-radius: 6px;
  overflow: hidden;
}

.opp-spec {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--navy);
  border-right: 1px solid rgba(50, 64, 83, 0.1);
  text-align: center;
}

.opp-spec:last-child {
  border-right: none;
}

.opp-spec strong {
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.opp-spec span.opp-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Banner de Convocatoria a Roster de Consultores GERENSSA */
.opp-roster-dossier {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid #728b18;
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 32px;
  box-shadow: 0 4px 16px rgba(50, 64, 83, 0.04);
}

.opp-roster-dossier__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.opp-roster-dossier__tag {
  background: #f0f5e5;
  color: #556e0a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}

.opp-roster-dossier__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 10px;
}

.opp-roster-dossier__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 960px;
  margin-bottom: 22px;
}

.opp-roster-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px 0;
  margin-bottom: 20px;
  border-top: 1px solid rgba(50, 64, 83, 0.08);
  border-bottom: 1px solid rgba(50, 64, 83, 0.08);
}

.opp-roster-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.opp-roster-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: #728b18;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.opp-roster-step__content h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
}

.opp-roster-step__content p {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

.opp-roster-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   CONVOCATORIAS & PORTALES DE OPORTUNIDADES (GERENSSA MODERN)
   ========================================================================== */

/* Bloque de Convocatorias Vigentes de GERENSSA */
.opp-announcements-block {
  margin-bottom: 36px;
}

.opp-announcements-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.opp-announcement-card {
  background: var(--white);
  border: 1px solid rgba(114, 139, 24, 0.28);
  border-left: 5px solid #728b18;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 4px 18px rgba(25, 34, 43, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  position: relative;
}

.opp-announcement-card:hover {
  transform: translateY(-4px);
  border-color: #b1cd47;
  border-left-color: #728b18;
  box-shadow: 0 16px 36px rgba(25, 34, 43, 0.08);
}

.opp-announcement-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.opp-announcement-card__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.opp-announcement-card__logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.opp-announcement-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4b6208;
  background: #f0f5e5;
  border: 1px solid rgba(114, 139, 24, 0.25);
  padding: 4px 10px;
  border-radius: 20px;
}

.opp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #728b18;
  box-shadow: 0 0 0 rgba(114, 139, 24, 0.7);
  animation: oppPulse 2s infinite ease-in-out;
}

@keyframes oppPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(114, 139, 24, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(114, 139, 24, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(114, 139, 24, 0);
  }
}

.opp-announcement-card__date {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.opp-announcement-card__title {
  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  margin: 0 0 10px;
  transition: color 0.25s ease;
}

.opp-announcement-card:hover .opp-announcement-card__title {
  color: #728b18;
}

.opp-announcement-card__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 20px;
}

.opp-announcement-card__body p {
  margin: 0 0 8px;
}

.opp-announcement-card__body p:last-child {
  margin-bottom: 0;
}

.opp-announcement-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(25, 34, 43, 0.06);
}

.opp-announcement-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.opp-announcement-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(114, 139, 24, 0.35);
}

.opp-announcement-btn svg {
  transition: transform 0.25s ease;
}

.opp-announcement-btn:hover svg {
  transform: translateX(4px);
}

/* Grilla de Portales Multilaterales */
.opp-portals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
  margin-top: 22px;
  margin-bottom: 40px;
}

.opp-portal-card {
  background: var(--white);
  border: 1px solid rgba(25, 34, 43, 0.08);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(25, 34, 43, 0.03);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.opp-portal-card:hover {
  transform: translateY(-5px);
  border-color: rgba(177, 205, 71, 0.55);
  box-shadow: 0 16px 36px rgba(25, 34, 43, 0.09);
}

.opp-portal-card__content {
  display: flex;
  flex-direction: column;
}

.opp-portal-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  min-height: 48px;
}

.opp-portal-card__logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  max-width: 170px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid rgba(25, 34, 43, 0.08);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(25, 34, 43, 0.03);
  transition: all 0.25s ease;
}

.opp-portal-card:hover .opp-portal-card__logo-wrap {
  border-color: rgba(114, 139, 24, 0.35);
  box-shadow: 0 4px 12px rgba(114, 139, 24, 0.12);
  transform: scale(1.02);
}

.opp-portal-card__logo {
  max-height: 34px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(10%);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.opp-portal-card:hover .opp-portal-card__logo {
  filter: grayscale(0%);
  transform: scale(1.03);
}

.opp-portal-card__badge {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(114, 139, 24, 0.08);
  color: #556c0e;
  border: 1px solid rgba(114, 139, 24, 0.24);
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.opp-portal-card:hover .opp-portal-card__badge {
  background: #728b18;
  color: #ffffff;
  border-color: #728b18;
}

.opp-portal-card__type {
  font-size: 10px;
  font-weight: 800;
  color: #728b18;
  background: rgba(114, 139, 24, 0.09);
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.opp-portal-card__title {
  font-family: "Manrope", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.38;
  margin: 6px 0 6px;
  letter-spacing: -0.015em;
  transition: color 0.25s ease;
}

.opp-portal-card:hover .opp-portal-card__title {
  color: #728b18;
}

.opp-portal-card__subtitle {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 16px;
  display: block;
}

.opp-portal-card__footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(25, 34, 43, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opp-portal-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid rgba(25, 34, 43, 0.09);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.opp-portal-card:hover .opp-portal-card__btn {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(25, 34, 43, 0.16);
}

.opp-portal-card:hover .opp-portal-card__btn svg {
  stroke: var(--white);
  transform: translateX(4px);
}

.opp-portal-card__btn svg {
  stroke: currentColor;
  transition: transform 0.25s ease;
}

.opp-portal-card__alt-link {
  text-align: right;
  font-size: 11.5px;
}

.opp-portal-card__alt-link a {
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.opp-portal-card__alt-link a:hover {
  color: #728b18;
}

/* ==========================================================================
   MEJORAS GLOBALES DE HOVER Y TÍTULOS EN TODAS LAS PÁGINAS
   ========================================================================== */

/* 1. Títulos de Cards de Servicios */
.srv-card:hover .srv-card__title,
.service-card:hover h3,
.service-card:hover .service-card__title {
  color: #728b18 !important;
}

.srv-card__icon-box {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, color 0.3s ease;
}

.srv-card:hover .srv-card__icon-box {
  transform: scale(1.08) rotate(3deg);
  background: #e3efbe !important;
  color: #556e0a !important;
}

.srv-card:hover .srv-card__link svg {
  transform: translateX(4px);
}

/* 2. Tarjetas de Experiencias / Proyectos */
.exp-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, border-left-color 0.3s ease;
}

.exp-card:hover {
  transform: translateY(-5px);
  border-color: rgba(177, 205, 71, 0.45);
  border-left: 4px solid #728b18 !important;
  box-shadow: 0 16px 36px rgba(25, 34, 43, 0.08);
}

.exp-card__title {
  transition: color 0.25s ease;
}

.exp-card:hover .exp-card__title {
  color: #728b18 !important;
}

.exp-card:hover .exp-card__client {
  background: #e3efbe;
  color: #4b6208;
  transform: scale(1.02);
}

.exp-card__link svg {
  transition: transform 0.25s ease;
}

.exp-card:hover .exp-card__link svg {
  transform: translateX(4px);
}

/* 3. Tarjetas de Documentos */
.doc-card:hover .doc-card__title {
  color: #728b18 !important;
}

.doc-card:hover .doc-card__icon-box {
  transform: scale(1.1) rotate(4deg);
  background: #e3efbe !important;
}

.doc-card:hover .doc-card__view-btn svg,
.doc-card:hover .doc-card__download-btn svg {
  transform: translateY(-2px);
}

.doc-card__view-btn svg,
.doc-card__download-btn svg {
  transition: transform 0.25s ease;
}

/* 4. Tarjetas de Publicaciones Multimedia */
.pub-card:hover .pub-card__title {
  color: #728b18 !important;
}

.pub-card:hover .pub-card__play-icon {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 0 20px rgba(196, 48, 43, 0.5);
}

/* 5. Tarjetas de Quiénes Somos (Pilares y Estadísticas) */
.company-pillar-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.company-pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(177, 205, 71, 0.65);
  box-shadow: 0 16px 36px rgba(25, 34, 43, 0.08);
}

.company-pillar-card:hover .company-pillar-card__icon,
.company-pillar-card:hover .pillar-icon-box {
  transform: scale(1.1) rotate(5deg);
  background: #e3efbe !important;
  color: #556e0a !important;
}

.company-pillar-card__title {
  transition: color 0.25s ease;
}

.company-pillar-card:hover .company-pillar-card__title {
  color: #728b18;
}

.company-stat-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.company-stat-card:hover {
  transform: translateY(-4px);
  border-color: #b1cd47;
  box-shadow: 0 12px 28px rgba(114, 139, 24, 0.12);
}

/* 6. Tarjetas de Equipo Directivo y Consultores */
.team-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  border-color: rgba(177, 205, 71, 0.5);
  box-shadow: 0 18px 40px rgba(25, 34, 43, 0.1);
}

.team-card__photo img,
.team-card__img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card:hover .team-card__photo img,
.team-card:hover .team-card__img {
  transform: scale(1.05);
}

.team-card__name {
  transition: color 0.25s ease;
}

.team-card:hover .team-card__name {
  color: #728b18;
}

/* 7. Botones Globales Refinados */
.button--primary,
.btn-primary {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}

.button--primary:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(114, 139, 24, 0.32);
}

.button--secondary,
.btn-secondary {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease;
}

.button--secondary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: #728b18;
  color: #728b18;
  box-shadow: 0 6px 18px rgba(25, 34, 43, 0.08);
}

/* 8. Filtros y Chips */
.exp-filter-chip,
.doc-filter-chip,
.filter-btn,
.services-cat-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-filter-chip:hover,
.doc-filter-chip:hover,
.filter-btn:hover,
.services-cat-btn:hover {
  transform: translateY(-2px);
  border-color: #b1cd47;
  color: #556e0a;
}


@media (max-width: 900px) {
  .opp-compact-header__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .opp-compact-header__desc {
    max-width: 100%;
  }
  .opp-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .opp-spec {
    border-right: 1px solid rgba(50, 64, 83, 0.1);
    border-bottom: 1px solid rgba(50, 64, 83, 0.1);
    padding: 10px 12px;
    justify-content: flex-start;
  }
  .opp-spec:nth-child(2) {
    border-right: none;
  }
  .opp-spec:nth-child(3),
  .opp-spec:nth-child(4) {
    border-bottom: none;
  }
  .opp-roster-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .opp-portals-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 540px) {
  .opp-compact-header {
    padding: 14px 0 12px;
  }
  .opp-compact-header__ledger {
    margin-bottom: 8px;
    padding-bottom: 6px;
    font-size: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .opp-compact-header__title {
    font-size: 22px;
  }
  .opp-compact-header__desc {
    font-size: 13px;
    line-height: 1.45;
  }
  .opp-specs {
    grid-template-columns: 1fr 1fr;
  }
  .opp-spec {
    border-right: 1px solid rgba(50, 64, 83, 0.1) !important;
    border-bottom: 1px solid rgba(50, 64, 83, 0.1);
    justify-content: flex-start;
    padding: 6px 10px;
  }
  .opp-spec:nth-child(2),
  .opp-spec:nth-child(4) {
    border-right: none !important;
  }
  .opp-spec:nth-child(3),
  .opp-spec:nth-child(4) {
    border-bottom: none;
  }
  .opp-roster-dossier {
    padding: 20px 16px;
  }
  .opp-roster-actions {
    flex-direction: column;
    width: 100%;
  }
  .opp-roster-actions .button {
    width: 100%;
    justify-content: center;
  }
  .opp-portals-grid {
    grid-template-columns: 1fr;
  }
}



/* ==========================================================================
   BLOG INSTITUCIONAL · COMPACT HEADER (ESTÁNDAR GERENSSA)
   ========================================================================== */
.blog-compact-header {
  background: #fdfdfc;
  border-bottom: 1px solid var(--border);
  padding: 22px 0 16px;
  position: relative;
}

.blog-compact-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #728b18 0%, #324053 100%);
}

.blog-compact-header__ledger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-compact-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #556e0a;
}

.blog-compact-header__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #f0f5e5;
  color: #556e0a;
}

.blog-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f4f7ed;
  border: 1px solid #dbe6c4;
  color: #4a6308;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

.blog-compact-header__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.blog-compact-header__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-compact-header__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
  white-space: nowrap;
}

.blog-tag-rep {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.blog-compact-header__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 760px;
  margin: 0;
  flex: 1;
}

.blog-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.12);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.blog-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-right: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 12px;
}

.blog-spec:last-child {
  border-right: none;
}

.blog-spec strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: 13px;
  letter-spacing: -0.01em;
}

.blog-lbl {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* ==========================================================================
   PUBLICACIONES & MULTIMEDIA · COMPACT HEADER (ESTÁNDAR GERENSSA)
   ========================================================================== */
.pub-compact-header {
  background: #fdfdfc;
  border-bottom: 1px solid var(--border);
  padding: 22px 0 16px;
  position: relative;
}

.pub-compact-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #e52d27 0%, #728b18 50%, #324053 100%);
}

.pub-compact-header__ledger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pub-compact-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #324053;
}

.pub-compact-header__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #fdf0ee;
  color: #c4302b;
}

.pub-yt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff5f5;
  border: 1px solid #ffd0cf;
  color: #c4302b;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

.pub-compact-header__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pub-compact-header__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pub-compact-header__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
  white-space: nowrap;
}

.pub-tag-rep {
  background: #fdf0ee;
  border: 1px solid #fed2ce;
  color: #c4302b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.pub-compact-header__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 760px;
  margin: 0;
  flex: 1;
}

.pub-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.12);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.pub-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-right: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 12px;
}

.pub-spec:last-child {
  border-right: none;
}

.pub-spec strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: 13px;
  letter-spacing: -0.01em;
}

.pub-lbl {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* ==========================================================================
   PUBLICACIONES & MULTIMEDIA · VISTA COMPLETA (CARDS, SPOTLIGHT, MODAL)
   ========================================================================== */
.pub-section {
  padding: 36px 0 60px;
  background: #f7f9fa;
  min-height: 60vh;
}

/* Spotlight Card (Video Destacado Principal) */
.pub-spotlight {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.12);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(50, 64, 83, 0.06);
  margin-bottom: 32px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pub-spotlight:hover {
  box-shadow: 0 10px 28px rgba(50, 64, 83, 0.1);
}

.pub-spotlight__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111a24;
  overflow: hidden;
  cursor: pointer;
}

.pub-spotlight__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.92);
}

.pub-spotlight__media:hover .pub-spotlight__img {
  transform: scale(1.03);
  filter: brightness(0.85);
}

.pub-spotlight__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4302b;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  pointer-events: none;
}

.pub-spotlight__media:hover .pub-spotlight__play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  background: #c4302b;
  color: #ffffff;
}

.pub-spotlight__body {
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pub-spotlight__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pub-pill-featured {
  background: #fdf0ee;
  border: 1px solid #ffd4d1;
  color: #c4302b;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.pub-spotlight__title {
  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.pub-spotlight__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 22px;
}

.pub-spotlight__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Toolbar & Filters */
.pub-toolbar {
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.1);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(50, 64, 83, 0.03);
}

.pub-search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 420px;
}

.pub-search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #728b18;
  pointer-events: none;
}

.pub-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  background: #f8fafc;
  border: 1px solid rgba(50, 64, 83, 0.14);
  border-radius: 6px;
  font-size: 13px;
  color: var(--navy);
  font-family: inherit;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.pub-search-input:focus {
  outline: none;
  background: #ffffff;
  border-color: #728b18;
  box-shadow: 0 0 0 3px rgba(114, 139, 24, 0.12);
}

.pub-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pub-pill-btn {
  border: 1px solid rgba(50, 64, 83, 0.12);
  background: #ffffff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pub-pill-btn:hover {
  background: #f2f5ea;
  border-color: #c4d79b;
  color: #4a6308;
}

.pub-pill-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.pub-count-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Video Grid */
.pub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Video Card */
.pub-card {
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.1);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 12px rgba(50, 64, 83, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.pub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(50, 64, 83, 0.09);
  border-color: rgba(114, 139, 24, 0.35);
}

.pub-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0f1722;
  overflow: hidden;
  cursor: pointer;
}

.pub-card__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
  filter: brightness(0.94);
}

.pub-card:hover .pub-card__thumbnail {
  transform: scale(1.05);
  filter: brightness(0.85);
}

.pub-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}

.pub-card__top-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.pub-card__hd-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.pub-card__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #c4302b;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.pub-card:hover .pub-card__play-icon {
  transform: translate(-50%, -50%) scale(1.12);
  background: #c4302b;
  color: #ffffff;
}

.pub-card__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pub-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.pub-card__title {
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s ease;
}

.pub-card:hover .pub-card__title {
  color: #728b18;
}

.pub-card__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(50, 64, 83, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pub-btn-play {
  background: #f2f5ea;
  color: #4a6308;
  border: 1px solid #d9e6c0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.pub-btn-play:hover {
  background: #728b18;
  border-color: #728b18;
  color: #ffffff;
}

.pub-btn-yt {
  color: #c4302b;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.pub-btn-yt:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Lightbox Modal */
.pub-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 21, 31, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.pub-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.pub-modal-dialog {
  background: #111a24;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 860px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s ease;
}

.pub-modal-backdrop.is-open .pub-modal-dialog {
  transform: translateY(0) scale(1);
}

.pub-modal-header {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pub-modal-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pub-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.pub-modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.pub-modal-player-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000000;
  width: 100%;
}

.pub-modal-player-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pub-modal-footer {
  padding: 12px 20px;
  background: #0c131a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.pub-modal-footer a {
  color: #ffffff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.pub-modal-footer a:hover {
  color: #c4302b;
}

/* Responsiveness */
@media (max-width: 1024px) {
  .pub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pub-spotlight {
    grid-template-columns: 1fr;
  }
  .pub-spotlight__body {
    padding: 24px;
  }
  .pub-specs,
  .blog-specs {
    grid-template-columns: repeat(2, 1fr);
  }
  .pub-spec,
  .blog-spec {
    border-bottom: 1px solid rgba(50, 64, 83, 0.08);
  }
  .pub-spec:nth-child(2),
  .blog-spec:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .pub-compact-header__row,
  .blog-compact-header__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .pub-compact-header__desc,
  .blog-compact-header__desc {
    max-width: 100%;
  }
  .pub-grid {
    grid-template-columns: 1fr;
  }
  .pub-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .pub-search-box {
    max-width: 100%;
  }
  .pub-filter-pills {
    overflow-x: auto;
    padding-bottom: 4px;
    flex-wrap: nowrap;
  }
}

@media (max-width: 480px) {
  .pub-compact-header,
  .blog-compact-header {
    padding: 16px 0 14px;
  }
  .pub-compact-header__ledger,
  .blog-compact-header__ledger {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 10px;
  }
  .pub-specs,
  .blog-specs {
    grid-template-columns: 1fr 1fr;
  }
  .pub-spec,
  .blog-spec {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ==========================================================================
   INFORMACIÓN DE CONTACTO · COMPACT HEADER & LAYOUT EJECUTIVO (BLUEPRINT)
   ========================================================================== */
.cnt-compact-header {
  background: #fdfdfc;
  border-bottom: 1px solid var(--border);
  padding: 22px 0 16px;
  position: relative;
}

.cnt-compact-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #728b18 0%, #324053 100%);
}

.cnt-compact-header__ledger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cnt-compact-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #556e0a;
}

.cnt-compact-header__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #f0f5e5;
  color: #556e0a;
}

.cnt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f4f7ed;
  border: 1px solid #dbe6c4;
  color: #4a6308;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

.cnt-compact-header__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cnt-compact-header__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cnt-compact-header__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
  white-space: nowrap;
}

.cnt-tag-rep {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.cnt-compact-header__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 760px;
  margin: 0;
  flex: 1;
}

.cnt-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.12);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.cnt-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-right: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 12px;
}

.cnt-spec:last-child {
  border-right: none;
}

.cnt-spec strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: 13px;
  letter-spacing: -0.01em;
}

.cnt-lbl {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* ==========================================================================
   SECCIÓN DE CONTACTO: GRID 2 COLUMNAS (SIDEBAR OSCURO + MAPA + FORMULARIO)
   ========================================================================== */
.cnt-section {
  padding: 44px 0 70px;
  background: #f5f6f8;
  min-height: 65vh;
}

.cnt-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  align-items: start;
}

/* Columna Izquierda: Tarjeta Corporativa Oscura */
.cnt-sidebar {
  background: #283545;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px 26px;
  box-shadow: 0 10px 32px rgba(40, 53, 69, 0.12);
  color: #ffffff;
}

.cnt-sidebar__head {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cnt-sidebar__title {
  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.cnt-sidebar__address {
  font-size: 12.5px;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 14px;
}

.cnt-sidebar__email-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9ec737;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s;
}

.cnt-sidebar__email-link:hover {
  color: #bbf049;
  text-decoration: underline;
}

.cnt-sidebar__list {
  display: flex;
  flex-direction: column;
}

.cnt-dossier {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cnt-dossier:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.cnt-eyebrow {
  display: block;
  color: #a4cc3b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}

.cnt-name {
  font-family: "Manrope", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.cnt-link-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cnt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 12.5px;
  text-decoration: none;
  transition: color 0.18s ease;
}

.cnt-link svg {
  color: #9ec737;
  flex-shrink: 0;
}

.cnt-link:hover {
  color: #ffffff;
}

.cnt-address-sm {
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
  margin: 8px 0 0;
}

/* Columna Derecha: Stack Mapa + Formulario */
.cnt-main {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Tarjeta del Mapa */
.cnt-map-card {
  position: relative;
  height: 250px;
  background: #e2e8f0;
  border: 1px solid rgba(50, 64, 83, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(50, 64, 83, 0.04);
}

.cnt-map-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: contrast(1.02);
}

.cnt-map-pill {
  position: absolute;
  top: 18px;
  right: 22px;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 100px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  z-index: 2;
  font-size: 12.5px;
  border: 1px solid rgba(50, 64, 83, 0.08);
}

.cnt-map-pill__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid #728b18;
  background: #ffffff;
}

.cnt-map-pill strong {
  color: #1c2734;
  font-weight: 800;
}

.cnt-map-pill span {
  color: #64748b;
  font-weight: 500;
}

/* Tarjeta del Formulario */
.cnt-form-card {
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.1);
  border-radius: 16px;
  padding: 38px 42px;
  box-shadow: 0 6px 24px rgba(50, 64, 83, 0.05);
}

.cnt-form-title {
  font-family: "Manrope", sans-serif;
  font-size: 23px;
  font-weight: 800;
  color: #1c2734;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.cnt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

.cnt-field {
  display: flex;
  flex-direction: column;
}

.cnt-field.full {
  grid-column: 1 / -1;
}

.cnt-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748b;
  margin-bottom: 7px;
}

.cnt-input,
.cnt-select,
.cnt-textarea {
  width: 100%;
  background: #f8fafc;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  height: 44px;
  padding: 0 14px;
  font-size: 13.5px;
  color: #1e293b;
  font-family: inherit;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.cnt-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23324053' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
  padding-right: 38px;
}

.cnt-textarea {
  height: 110px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}

.cnt-input:focus,
.cnt-select:focus,
.cnt-textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: #728b18;
  box-shadow: 0 0 0 3px rgba(114, 139, 24, 0.14);
}

.cnt-input::placeholder,
.cnt-textarea::placeholder {
  color: #94a3b8;
  font-size: 13px;
}

.cnt-btn-submit {
  margin-top: 6px;
  background: #283545;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 13px 28px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.2s, transform 0.18s, box-shadow 0.2s;
}

.cnt-btn-submit:hover {
  background: #1a2533;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(40, 53, 69, 0.22);
}

/* Responsividad Contacto */
@media (max-width: 1024px) {
  .cnt-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cnt-specs {
    grid-template-columns: repeat(2, 1fr);
  }
  .cnt-spec {
    border-bottom: 1px solid rgba(50, 64, 83, 0.08);
  }
  .cnt-spec:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .cnt-compact-header__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cnt-compact-header__desc {
    max-width: 100%;
  }
  .cnt-form-card {
    padding: 28px 22px;
  }
  .cnt-sidebar {
    padding: 26px 20px;
  }
  .cnt-map-pill {
    top: 12px;
    right: 12px;
    font-size: 11px;
    padding: 6px 12px;
  }
}

@media (max-width: 580px) {
  .cnt-compact-header {
    padding: 16px 0 14px;
  }
  .cnt-compact-header__ledger {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 10px;
  }
  .cnt-specs {
    grid-template-columns: 1fr 1fr;
  }
  .cnt-spec {
    padding: 6px 10px;
    font-size: 11px;
  }
  .cnt-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cnt-btn-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   BLOG ARTÍCULO / SHOW VIEW · EXPERIENCIA EDITORIAL EJECUTIVA
   ========================================================================== */
.blog-article-section {
  padding: 24px 0 70px;
  background: #fdfdfd;
  min-height: 70vh;
}

/* Barra Superior de Navegación del Artículo */
.blog-article-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(50, 64, 83, 0.08);
  font-size: 12.5px;
}

.blog-article-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  flex-wrap: wrap;
}

.blog-article-breadcrumbs a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s;
}

.blog-article-breadcrumbs a:hover {
  color: #728b18;
}

.blog-article-breadcrumbs .sep {
  color: #cbd5e1;
  font-size: 11px;
}

.blog-article-breadcrumbs .current {
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

.blog-article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #556e0a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  background: #f2f6ea;
  border: 1px solid #d8e5be;
  transition: all 0.18s ease;
}

.blog-article-back-link:hover {
  background: #728b18;
  color: #ffffff;
  border-color: #728b18;
}

/* Cabecera Editorial del Artículo */
.blog-post-header {
  margin-bottom: 30px;
}

.blog-post-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f2f6ea;
  border: 1px solid #d8e5be;
  color: #4a6308;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.blog-post-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  color: #1e293b;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}

.blog-post-meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid rgba(50, 64, 83, 0.09);
  border-radius: 8px;
  font-size: 12.5px;
}

.blog-post-meta-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.blog-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-weight: 600;
}

.blog-meta-item svg {
  color: #728b18;
  flex-shrink: 0;
}

.blog-meta-author strong {
  color: #1e293b;
}

.blog-post-meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.12);
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
}

.blog-share-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: rgba(50, 64, 83, 0.25);
}

/* Layout Grid 2 Columnas (Artículo + Sidebar) */
.blog-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
}

/* Columna Principal */
.blog-article-main {
  min-width: 0;
}

/* Lead Box / Resumen Destacado */
.blog-lead-box {
  background: #f8fafc;
  border-left: 3.5px solid #728b18;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.65;
  color: #334155;
  font-weight: 500;
}

/* Imagen Principal */
.blog-article-image-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(50, 64, 83, 0.1);
  box-shadow: 0 6px 20px rgba(50, 64, 83, 0.05);
  margin-bottom: 32px;
  background: #0f1722;
}

.blog-article-image-wrap img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* Tipografía Editorial del Cuerpo del Artículo */
.blog-article-prose {
  font-size: 16.5px;
  line-height: 1.85;
  color: #334155;
}

.blog-article-prose p {
  margin-bottom: 24px;
}

.blog-article-prose h2,
.blog-article-prose h3,
.blog-article-prose h4 {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: #1e293b;
  margin-top: 36px;
  margin-bottom: 16px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.blog-article-prose h2 {
  font-size: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(50, 64, 83, 0.08);
}

.blog-article-prose h3 {
  font-size: 20px;
}

.blog-article-prose blockquote {
  border-left: 3.5px solid #728b18;
  background: #f8fafc;
  padding: 18px 24px;
  margin: 28px 0;
  font-style: italic;
  color: #1e293b;
  border-radius: 0 8px 8px 0;
}

.blog-article-prose blockquote p:last-child {
  margin-bottom: 0;
}

.blog-article-prose ul,
.blog-article-prose ol {
  padding-left: 24px;
  margin-bottom: 24px;
}

.blog-article-prose li {
  margin-bottom: 8px;
}

.blog-article-prose a {
  color: #556e0a;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s;
}

.blog-article-prose a:hover {
  color: #728b18;
}

.blog-article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px auto;
  display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.blog-article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14.5px;
}

.blog-article-prose table th,
.blog-article-prose table td {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
}

.blog-article-prose table th {
  background: #f1f5f9;
  font-weight: 700;
  color: #1e293b;
}

/* Tags del Artículo */
.blog-tags-wrap {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(50, 64, 83, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-tags-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.blog-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5ea;
  border: 1px solid #d8e5be;
  color: #4a6308;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.18s ease;
}

.blog-tag-pill:hover {
  background: #728b18;
  color: #ffffff;
  border-color: #728b18;
}

/* Dossier de Autor al Pie */
.blog-author-dossier {
  margin-top: 36px;
  background: #f8fafc;
  border: 1px solid rgba(50, 64, 83, 0.1);
  border-radius: 10px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.blog-author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(50, 64, 83, 0.2);
}

.blog-author-info h4 {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 4px;
}

.blog-author-info p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Navegación Anterior / Siguiente */
.blog-article-nav-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(50, 64, 83, 0.1);
}

.blog-nav-card {
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.1);
  border-radius: 8px;
  padding: 16px 18px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.blog-nav-card:hover {
  border-color: #728b18;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(50, 64, 83, 0.06);
}

.blog-nav-card__direction {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #728b18;
  margin-bottom: 6px;
}

.blog-nav-card__title {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Columna Lateral (Sidebar) */
.blog-article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-sidebar-widget {
  background: #ffffff;
  border: 1px solid rgba(50, 64, 83, 0.1);
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 4px 14px rgba(50, 64, 83, 0.03);
}

.blog-widget-title {
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-widget-title svg {
  color: #728b18;
}

/* Lista de Artículos Populares */
.blog-popular-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-popular-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.blog-popular-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog-popular-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #1e293b;
}

.blog-popular-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.blog-popular-title {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s;
}

.blog-popular-title:hover {
  color: #728b18;
}

.blog-popular-date {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

/* Nube de Tags en Sidebar */
.blog-sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.blog-sidebar-tag-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.18s ease;
}

.blog-sidebar-tag-link:hover {
  background: #728b18;
  color: #ffffff;
  border-color: #728b18;
}

.blog-sidebar-tag-count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 100px;
}

.blog-sidebar-tag-link:hover .blog-sidebar-tag-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Tarjeta CTA de Consultoría */
.blog-cta-widget {
  background: #283545;
  border-radius: 10px;
  padding: 24px 22px;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(40, 53, 69, 0.12);
}

.blog-cta-widget h4 {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #ffffff;
}

.blog-cta-widget p {
  font-size: 12.5px;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 18px;
}

.blog-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #728b18;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.blog-cta-btn:hover {
  background: #5d7311;
}

/* Responsividad para Blog Show */
@media (max-width: 1024px) {
  .blog-article-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 640px) {
  .blog-post-title {
    font-size: 24px;
  }
  .blog-post-meta-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .blog-article-nav-cards {
    grid-template-columns: 1fr;
  }
  .blog-author-dossier {
    flex-direction: column;
    align-items: flex-start;
  }
}