/* ============================================================
   DESIGN SYSTEM — IAHUB UNNE
   Palette: French Blue #3D3E91 | Sandy Brown #FC9E4F
            Dark Cyan #0E9594    | Stormy Teal #127475
            Bright Snow #F7F7F7
   ============================================================ */
:root {
  --color-primary:      #3D3E91;
  --color-primary-dark: #2e2f78;
  --color-accent:       #FC9E4F;
  --color-accent-dark:  #e08a38;
  --color-link:         #0E9594;
  --color-link-hover:   #127475;
  --color-bg:           #FFFFFF;
  --color-surface-alt:  #F7F7F7;
  --color-surface-dark: #127475;
  --color-text:         #1a1a2e;
  --color-text-muted:   #5a5b7a;
  --color-border:       #d8d9e8;
  --color-success:      #0E9594;
  --color-white:        #FFFFFF;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-300: 300;
  --font-400: 400;
  --font-500: 500;
  --font-700: 700;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  --max-w: 1280px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 3px rgba(61,62,145,.08), 0 1px 6px rgba(61,62,145,.06);
  --shadow-md: 0 4px 16px rgba(61,62,145,.12), 0 2px 8px rgba(61,62,145,.08);
  --shadow-hover: 0 8px 24px rgba(61,62,145,.16), 0 4px 12px rgba(61,62,145,.10);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: var(--text-base); }
body {
  font-family: var(--font-family);
  font-weight: var(--font-400);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ============================================================
   UTILITY
   ============================================================ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  background: #1a1a2e;
  color: rgba(255,255,255,.7);
  font-size: var(--text-xs);
  padding: 6px 0;
}
.topbar__inner { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
.topbar a { color: rgba(255,255,255,.7); transition: color 200ms; }
.topbar a:hover { color: var(--color-white); }
.topbar__sep { opacity: .3; }

/* ============================================================
   HEADER STICKY
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-primary);
  box-shadow: 0 2px 12px rgba(61,62,145,.3);
}
.header__inner { display: flex; align-items: center; gap: var(--sp-2); height: 64px; }

/* Logo */
.header__logo { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; text-decoration: none; }
.header__logo img { height: 38px; width: auto; }
.header__logo-text {
  color: var(--color-white);
  font-size: var(--text-lg);
  font-weight: var(--font-700);
  letter-spacing: .5px;
  white-space: nowrap;
}
.header__logo-text span { color: var(--color-accent); }

/* Nav */
.header__nav { flex: 1; display: flex; align-items: center; gap: 0; margin-left: var(--sp-3); }
.nav__item { position: relative; }
.nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.85);
  font-size: var(--text-sm);
  font-weight: var(--font-400);
  padding: 0 var(--sp-2);
  height: 64px;
  transition: color 200ms, background 200ms;
  white-space: nowrap;
  position: relative;
}
.nav__link::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0; left: var(--sp-2); right: var(--sp-2);
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
}
.nav__link:hover { color: var(--color-white); background: rgba(255,255,255,.06); }
.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); }
.nav__link.active { color: var(--color-white); }
.nav__chevron {
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms;
}

/* Megamenu */
.nav__item:hover .megamenu { display: grid; }
.megamenu {
  display: none;
  position: absolute;
  top: 64px; left: 0;
  min-width: 680px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3);
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  z-index: 100;
}
.megamenu__group h4 { font-size: var(--text-xs); font-weight: var(--font-700); text-transform: uppercase; letter-spacing: .8px; color: var(--color-text-muted); margin-bottom: var(--sp-1); }
.megamenu__group a { display: block; color: var(--color-text); font-size: var(--text-sm); padding: 4px 0; transition: color 200ms; }
.megamenu__group a:hover { color: var(--color-primary); }

/* Search */
.header__search { position: relative; flex-shrink: 0; }
.header__search input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-size: var(--text-sm);
  padding: 7px 36px 7px 12px;
  width: 220px;
  transition: background 200ms, border-color 200ms;
}
.header__search input::placeholder { color: rgba(255,255,255,.5); }
.header__search input:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); }
.header__search-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.7); background: none; border: none; padding: 0; display: flex; align-items: center; }
.header__search-btn:hover { color: var(--color-white); }

/* CTAs */
.header__ctas { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.btn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--font-500); padding: 8px 18px; border-radius: var(--radius-sm); transition: background 150ms, color 150ms, border-color 150ms; line-height: 1; }
.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.btn--ghost { border: 1px solid rgba(255,255,255,.4); color: var(--color-white); }
.btn--ghost:hover { border-color: var(--color-white); background: rgba(255,255,255,.08); color: var(--color-white); }
.btn--primary { background: var(--color-accent); color: var(--color-text); border: 1px solid var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-text); }
.btn--link { color: var(--color-link); font-weight: var(--font-500); padding: 0; position: relative; }
.btn--link::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms; }
.btn--link:hover::after { transform: scaleX(1); }
.btn--link:hover { color: var(--color-link-hover); }

/* Mobile */
.header__hamburger { display: none; flex-direction: column; gap: 5px; padding: var(--sp-1); background: none; border: none; }
.header__hamburger span { display: block; width: 22px; height: 2px; background: var(--color-white); border-radius: 2px; transition: transform 300ms, opacity 300ms; }

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e 0%, #3D3E91 60%, #127475 100%);
  min-height: 500px;
}
.hero > .container { overflow: hidden; }
.hero__track { display: flex; transition: transform 600ms cubic-bezier(.4,0,.2,1); will-change: transform; }
.hero__slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 500px;
  padding: var(--sp-6) 0;
}
.hero__slide-content { padding: 0 var(--sp-6); }
.hero__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-700);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
  background: rgba(252,158,79,.1);
  border: 1px solid rgba(252,158,79,.3);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: var(--sp-2);
}
.hero__title { font-size: var(--text-3xl); font-weight: var(--font-300); color: var(--color-white); line-height: 1.15; margin-bottom: var(--sp-2); }
.hero__title strong { font-weight: var(--font-700); color: var(--color-accent); }
.hero__desc { font-size: var(--text-md); color: rgba(255,255,255,.8); margin-bottom: var(--sp-3); line-height: 1.6; }
.hero__link { color: var(--color-accent); font-size: var(--text-base); font-weight: var(--font-500); display: inline-flex; align-items: center; gap: 6px; }
.hero__link:hover { color: var(--color-accent-dark); }
.hero__link svg { transition: transform 200ms; }
.hero__link:hover svg { transform: translateX(4px); }
.hero__slide-image { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; padding-right: var(--sp-6); }
.hero__slide-image img { width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,.3); }

/* Carousel controls */
.hero__controls {
  position: absolute;
  bottom: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  z-index: 10;
}
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); border: none; transition: background 200ms, transform 200ms; padding: 0; }
.hero__dot.active { background: var(--color-accent); transform: scale(1.4); }
.hero__prev, .hero__next {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--color-white);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms;
}
.hero__prev:hover, .hero__next:hover { background: rgba(252,158,79,.4); border-color: var(--color-accent); }

/* ============================================================
   SECTION COMMON
   ============================================================ */
.section { padding: var(--sp-6) 0; }
.section--alt { background: var(--color-surface-alt); }
.section--dark { background: var(--color-primary); color: var(--color-white); }
.section__header { margin-bottom: var(--sp-4); }
.section__eyebrow { font-size: var(--text-xs); font-weight: var(--font-700); text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); margin-bottom: var(--sp-1); }
.section__title { font-size: var(--text-2xl); font-weight: var(--font-300); line-height: 1.2; color: inherit; }
.section__title--dark { color: var(--color-text); }
.section__subtitle { font-size: var(--text-base); color: var(--color-text-muted); margin-top: var(--sp-1); }

/* ============================================================
   TABS
   ============================================================ */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-size: var(--text-sm);
  font-weight: var(--font-500);
  color: var(--color-text-muted);
  padding: var(--sp-1) var(--sp-2);
  border: none;
  background: none;
  position: relative;
  white-space: nowrap;
  transition: color 200ms;
  cursor: pointer;
}
.tab::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transition: transform 200ms cubic-bezier(.4,0,.2,1); }
.tab.active { color: var(--color-primary); font-weight: var(--font-700); }
.tab.active::after { transform: scaleX(1); }
.tab:hover { color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   CARD GRID — Herramientas
   ============================================================ */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--color-primary); }
.card__icon { width: 48px; height: 48px; object-fit: contain; margin-bottom: 4px; }
.card__title { font-size: var(--text-base); font-weight: var(--font-700); color: var(--color-text); }
.card__desc { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; line-height: 1.5; }
.card__tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ============================================================
   BLOCK CARDS — Iniciativas/secciones con imagen o icono
   ============================================================ */
.blocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.block-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(61,62,145,.10), 0 1px 6px rgba(61,62,145,.06);
  border: 2px solid transparent;
  border-top: 4px solid var(--block-color, #3D3E91);
  display: flex;
  flex-direction: column;
  transition:
    transform 280ms cubic-bezier(.34,1.56,.64,1),
    box-shadow 280ms ease,
    border-color 280ms ease;
  position: relative;
}
.block-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 12px 40px rgba(61,62,145,.18),
    0 4px 16px rgba(61,62,145,.12),
    0 0 0 2px var(--block-color, #3D3E91);
  border-color: var(--block-color, #3D3E91);
}
.block-card__media {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--block-color, #3D3E91), #1a1a2e);
  flex-shrink: 0;
}
.block-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
  display: block;
}
.block-card:hover .block-card__media img {
  transform: scale(1.06);
}
.block-card__icon-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}
.block-card__body {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.block-card__subtitle {
  font-size: var(--text-xs);
  font-weight: var(--font-700);
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--block-color, #3D3E91);
  margin-bottom: 2px;
}
.block-card__title {
  font-size: var(--text-md);
  font-weight: var(--font-700);
  color: var(--color-text);
  line-height: 1.3;
}
.block-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
}
.block-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: var(--font-700);
  color: var(--block-color, #3D3E91);
  transition: gap 200ms, opacity 200ms;
  align-self: flex-start;
}
.block-card__link:hover { gap: 9px; opacity: .8; color: var(--block-color, #3D3E91); }
.block-card__accent-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--block-color, #3D3E91), transparent);
  opacity: 0;
  transition: opacity 280ms;
}
.block-card:hover .block-card__accent-bar { opacity: 1; }
.tool-chip {
  font-size: var(--text-xs);
  font-weight: var(--font-500);
  background: rgba(14,149,148,.08);
  color: var(--color-link);
  border: 1px solid rgba(14,149,148,.2);
  border-radius: 12px;
  padding: 3px 10px;
  white-space: nowrap;
  transition: background 150ms;
}
.tool-chip:hover { background: rgba(14,149,148,.15); }

/* ============================================================
   MOOC / CURSOS
   ============================================================ */
.mooc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.mooc-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms, box-shadow 200ms;
  display: flex;
  flex-direction: column;
}
.mooc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.mooc-card__img { width: 100%; height: 180px; object-fit: cover; }
.mooc-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.mooc-card__tag { font-size: var(--text-xs); font-weight: var(--font-700); text-transform: uppercase; letter-spacing: .8px; color: var(--color-accent); }
.mooc-card__title { font-size: var(--text-md); font-weight: var(--font-700); color: var(--color-text); line-height: 1.3; }
.mooc-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; line-height: 1.5; }
.mooc-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-1); }

/* ============================================================
   VIDEO GRID — Nanoencuentros
   ============================================================ */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.video-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: #000;
  position: relative;
  transition: transform 200ms, box-shadow 200ms;
  cursor: pointer;
}
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.video-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .85; transition: opacity 200ms; }
.video-card:hover img { opacity: .7; }
.video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-card__play svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); transition: transform 200ms; }
.video-card:hover .video-card__play svg { transform: scale(1.1); }
.video-card__title { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: var(--color-white); font-size: var(--text-sm); font-weight: var(--font-500); padding: var(--sp-4) var(--sp-2) var(--sp-1); }

/* ============================================================
   NEWS SECTION
   ============================================================ */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.news-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms, box-shadow 200ms;
  display: flex;
  flex-direction: column;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.news-card__img { width: 100%; height: 180px; object-fit: cover; }
.news-card__img-placeholder { width: 100%; height: 180px; background: linear-gradient(135deg, var(--color-primary), var(--color-link)); display: flex; align-items: center; justify-content: center; }
.news-card__img-placeholder svg { opacity: .4; }
.news-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.news-card__date { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .6px; }
.news-card__title { font-size: var(--text-base); font-weight: var(--font-700); color: var(--color-text); line-height: 1.3; }
.news-card__summary { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; line-height: 1.5; }
.news-card__footer { margin-top: auto; padding-top: var(--sp-1); }
.news-card__link { font-size: var(--text-sm); font-weight: var(--font-500); color: var(--color-link); display: inline-flex; align-items: center; gap: 4px; }
.news-card__link:hover { color: var(--color-link-hover); }

/* News modal */
.news-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--sp-2); }
.news-modal-backdrop.hidden { display: none; }
.news-modal { background: white; border-radius: var(--radius-lg); max-width: 700px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.news-modal__header { padding: var(--sp-3); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.news-modal__title { font-size: var(--text-xl); font-weight: var(--font-700); color: var(--color-primary); line-height: 1.3; }
.news-modal__close { font-size: 24px; cursor: pointer; color: var(--color-text-muted); background: none; border: none; flex-shrink: 0; line-height: 1; padding: 2px; }
.news-modal__close:hover { color: var(--color-text); }
.news-modal__img { width: 100%; max-height: 300px; object-fit: cover; }
.news-modal__body { padding: var(--sp-3); }
.news-modal__date { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.news-modal__content { font-size: var(--text-base); line-height: 1.7; color: var(--color-text); }
.news-modal__content p { margin-bottom: var(--sp-2); }

/* ============================================================
   MAPA — Red de colaboradores
   ============================================================ */
.map-section { background: #0F1923; }
.map-section .section__title { color: var(--color-white); }
.map-section .section__eyebrow { color: var(--color-accent); }
.map-tabs { border-bottom-color: rgba(255,255,255,.15); }
.map-tabs .tab { color: rgba(255,255,255,.5); }
.map-tabs .tab.active, .map-tabs .tab:hover { color: var(--color-white); }
.map-tabs .tab::after { background: var(--color-accent); }
.map-container { position: relative; width: 100%; min-height: 360px; background: #162132; border-radius: var(--radius-lg); padding: var(--sp-3); display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-3); }
.map-svg-wrap { display: flex; align-items: center; justify-content: center; }
.map-svg-wrap svg { width: 100%; max-width: 600px; height: auto; }
.map-sidebar h4 { font-size: var(--text-sm); font-weight: var(--font-700); color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .8px; margin-bottom: var(--sp-1); }
.map-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-2); }
.map-list li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: var(--text-sm); }
.map-list li::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }

/* ============================================================
   LINKS / DIRECTORIOS
   ============================================================ */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
.dir-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  text-align: center;
  transition: background 200ms, transform 200ms, border-color 200ms;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
}
.dir-card:hover { background: rgba(252,158,79,.12); border-color: rgba(252,158,79,.4); transform: translateY(-2px); }
.dir-card__icon { font-size: 2rem; }
.dir-card__name { font-size: var(--text-md); font-weight: var(--font-700); color: var(--color-accent); }
.dir-card__desc { font-size: var(--text-sm); color: rgba(255,255,255,.7); }

/* ============================================================
   LOGO CLIENTS GRID
   ============================================================ */
.logos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); align-items: center; }
.logo-client {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 200ms, background 200ms;
  min-height: 80px;
}
.logo-client:hover { border-color: var(--color-accent); background: var(--color-white); }
.logo-client img { max-height: 48px; width: auto; filter: grayscale(100%) opacity(.6); transition: filter 200ms; object-fit: contain; }
.logo-client:hover img { filter: grayscale(0%) opacity(1); }
.logo-client-text { font-size: var(--text-sm); font-weight: var(--font-700); color: var(--color-text-muted); text-align: center; }

/* ============================================================
   FEEDBACK WIDGET
   ============================================================ */
.feedback-bar { background: var(--color-surface-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--sp-2) 0; }
.feedback-bar__inner { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.feedback-bar p { font-size: var(--text-sm); color: var(--color-text-muted); }
.feedback-btn { font-size: var(--text-sm); font-weight: var(--font-500); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 20px; background: var(--color-white); color: var(--color-text); transition: background 150ms, border-color 150ms; }
.feedback-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: white; }
.feedback-btn.voted { background: var(--color-accent); border-color: var(--color-accent); color: white; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #1a1a2e; color: rgba(255,255,255,.75); }
.footer__top { padding: var(--sp-6) 0 var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.08); }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
footer h4 { font-size: var(--text-sm); font-weight: var(--font-700); color: var(--color-white); text-transform: uppercase; letter-spacing: .8px; margin-bottom: var(--sp-2); }
footer ul { display: flex; flex-direction: column; gap: var(--sp-1); }
footer li a { color: rgba(255,255,255,.6); font-size: var(--text-sm); transition: color 200ms; }
footer li a:hover { color: var(--color-accent); }
.footer__bottom { padding: var(--sp-3) 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }
.footer__legal { font-size: var(--text-xs); color: rgba(255,255,255,.4); }
.footer__social { display: flex; gap: var(--sp-1); align-items: center; }
.footer__social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); transition: background 200ms; }
.footer__social a:hover { background: rgba(252,158,79,.3); }
.footer__social img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.footer__logos { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.footer__logos img { height: 32px; width: auto; filter: brightness(0) invert(.65); transition: filter 200ms; }
.footer__logos img:hover { filter: brightness(0) invert(1); }

/* Logo IAHUB SVG en footer */
.footer__iahub-logo { display: flex; align-items: center; gap: 8px; }
.footer__iahub-logo span { color: rgba(255,255,255,.7); font-size: var(--text-base); font-weight: var(--font-700); }
.footer__iahub-logo em { color: var(--color-accent); font-style: normal; }

/* ============================================================
   HELP DESK BANNER
   ============================================================ */
.helpdesk { background: var(--color-primary); padding: var(--sp-4) 0; }
.helpdesk__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.helpdesk__item { display: flex; align-items: flex-start; gap: var(--sp-2); }
.helpdesk__icon { width: 40px; height: 40px; flex-shrink: 0; filter: brightness(0) invert(1); opacity: .8; }
.helpdesk__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .8px; color: var(--color-accent); font-weight: var(--font-700); }
.helpdesk__value { font-size: var(--text-sm); color: var(--color-white); margin-top: 2px; }
.helpdesk__sub { font-size: var(--text-xs); color: rgba(255,255,255,.5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .header__nav { display: none; }
  .header__hamburger { display: flex; }
  .hero__slide { grid-template-columns: 1fr; }
  .hero__slide-image { display: none; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .map-container { grid-template-columns: 1fr; }
  .map-sidebar { display: none; }
  .helpdesk__inner { grid-template-columns: 1fr; gap: var(--sp-2); }
}
@media (max-width: 768px) {
  .topbar__inner { justify-content: center; }
  .header__search { display: none; }
  .hero__title { font-size: var(--text-2xl); }
  .section { padding: var(--sp-4) 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .footer__bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .mooc-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.mobile-nav-open .header__nav {
  display: flex; flex-direction: column;
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
  background: var(--color-primary);
  overflow-y: auto; z-index: 999; padding: var(--sp-2);
}
.mobile-nav-open .nav__link { height: auto; padding: var(--sp-2); border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-nav-open .nav__item { width: 100%; }
.mobile-nav-open .megamenu { display: none !important; }

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link { position: absolute; transform: translateY(-100%); background: var(--color-accent); color: var(--color-text); padding: 8px 16px; font-weight: var(--font-700); z-index: 9999; transition: transform 200ms; }
.skip-link:focus { transform: translateY(0); }

.badge-wip { display: inline-flex; align-items: center; gap: 6px; background: rgba(252,158,79,.12); color: var(--color-accent); border: 1px solid rgba(252,158,79,.3); border-radius: 12px; font-size: var(--text-xs); font-weight: var(--font-700); padding: 4px 12px; text-transform: uppercase; letter-spacing: .6px; }

/* ============================================================
   REPOSITORIO — PÁGINA DEDICADA
   ============================================================ */
.repo-page-hero { background: linear-gradient(135deg, var(--color-primary) 0%, #2e2f78 100%); padding: 56px 0 48px; }
.repo-page-hero__inner { max-width: 640px; }
.repo-page-hero__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; color: #fff; line-height: 1.2; margin: 8px 0 16px; }
.repo-page-hero__subtitle { font-size: 1.05rem; color: rgba(255,255,255,.75); line-height: 1.6; }

/* Filtros */
.repo-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
.repo-filter { background: none; border: 1px solid var(--color-border); border-radius: 20px; padding: 6px 16px; font-size: var(--text-sm); cursor: pointer; color: var(--color-text-muted); transition: all 150ms; }
.repo-filter.active, .repo-filter:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.repo-count { margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--color-text-muted); text-align: right; }

/* Grilla de libros — proporción A4 */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: var(--sp-6) var(--sp-5);
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
}
.doc-card-wrap { perspective: 900px; }

/* Ficha libro */
.doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 210 / 297;           /* A4 exacto */
  background: #fefdf7;               /* papel levemente cálido */
  border: 4px solid var(--color-primary);
  border-left: 12px solid var(--color-primary-dark); /* lomo */
  border-radius: 2px 6px 6px 2px;
  /* sombra escalonada simula grosor del libro */
  box-shadow:
    5px 5px 0 0 rgba(61,62,145,.35),
    8px 8px 0 0 rgba(61,62,145,.15),
    0 12px 32px rgba(0,0,0,.14);
  transition: transform 300ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 300ms ease;
  will-change: transform;
}
.doc-card:hover {
  box-shadow:
    7px 7px 0 0 rgba(61,62,145,.35),
    12px 12px 0 0 rgba(61,62,145,.15),
    0 24px 48px rgba(0,0,0,.18);
}

/* Cara — overflow aquí, no en .doc-card */
.doc-card__face {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 14px 10px;
  overflow: hidden;
  background: linear-gradient(170deg, rgba(61,62,145,.07) 0%, transparent 50%);
}

/* Líneas decorativas tipo página */
.doc-card__face::after {
  content: '';
  position: absolute;
  bottom: 52px; left: 12px; right: 6px;
  height: 1px;
  background: rgba(61,62,145,.10);
  pointer-events: none;
}

/* Badge categoría */
.doc-card__cat {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--color-accent);
  margin-bottom: 10px;
  align-self: flex-start;
}

/* Ícono PDF */
.doc-card__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  justify-content: center;
  color: var(--color-primary);
}
.doc-card__pdf-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #c0392b;
  background: rgba(192,57,43,.08);
  border: 1.5px solid rgba(192,57,43,.3);
  border-radius: 3px;
  padding: 1px 7px;
}

/* Texto */
.doc-card__body { margin-top: 10px; }
.doc-card__title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.doc-card__desc {
  font-size: .69rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Botón descargar */
.doc-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  background: var(--color-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-decoration: none;
  border-top: 3px solid var(--color-primary-dark);
  transition: background 150ms, letter-spacing 150ms;
  flex-shrink: 0;
  border-radius: 0 0 3px 0;
}
.doc-card__btn:hover {
  background: var(--color-accent);
  border-top-color: var(--color-accent-dark);
  letter-spacing: .9px;
  color: #fff;
}

/* Estado vacío */
.repo-empty { text-align: center; padding: var(--sp-8) 0; color: var(--color-text-muted); }
.repo-empty svg { opacity: .25; margin: 0 auto var(--sp-3); display: block; }
.repo-empty h2 { font-size: 1.4rem; color: var(--color-text); margin-bottom: 8px; }

@media (max-width: 600px) {
  .doc-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
}

/* ============================================================
   REPOSITORIO
.repo-category { margin-bottom: var(--sp-5); }
.repo-category__title { font-size: var(--text-base); font-weight: var(--font-700); color: var(--color-primary); margin-bottom: var(--sp-3); padding-bottom: var(--sp-1); border-bottom: 2px solid var(--color-accent); display: inline-block; }
.repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.repo-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: box-shadow 200ms, border-color 200ms, transform 150ms; }
.repo-card:hover { box-shadow: 0 4px 18px rgba(61,62,145,.12); border-color: var(--color-primary); transform: translateY(-2px); }
.repo-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.repo-card__icon { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(61,62,145,.08); border-radius: var(--radius-md); color: var(--color-primary); flex-shrink: 0; }
.repo-card__badge { position: absolute; bottom: -6px; right: -6px; background: #e74c3c; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: .5px; }
.repo-card__body { flex: 1; }
.repo-card__title { font-size: var(--text-sm); font-weight: var(--font-600); color: var(--color-text); line-height: 1.35; margin-bottom: 4px; }
.repo-card__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.repo-card__action { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--font-600); color: var(--color-primary); margin-top: auto; }
.repo-card:hover .repo-card__action { color: var(--color-accent); }
@media (max-width: 600px) { .repo-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } }