/* =======================
   Paleta y escala
   ======================= */
:root{
  --blue-700: #1B396A;
  --blue-600: #2B4F8C;
  --blue-050: #F7FAFF;
  --gray-700: #334155;
  --gray-500: #64748B;
  --gray-300: #CBD5E1;
  --white:    #FFFFFF;

  --f-base: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3.5rem;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(27,57,106,.12);
}

/* Reset */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; font-family:var(--f-base); color:var(--gray-700); background:var(--blue-050); }
img{ max-width:100%; display:block }
a{ color:var(--blue-700); text-decoration:none }
h1,h2,h3{ line-height:1.2; margin:0 0 var(--space-2); color:var(--blue-700) }
p{ margin:0 0 var(--space-3) }
.muted{ color:var(--gray-500) }

/* Layout */
.section{ padding: var(--space-6) 0 }
.section--alt{ background:#fff }
.wrap{ width:min(1120px, 92vw); margin-inline:auto }
.grid-2{ display:grid; gap:var(--space-4); grid-template-columns: repeat(2, minmax(0,1fr)) }
.grid-4{ display:grid; gap:var(--space-3); grid-template-columns: repeat(4, minmax(0,1fr)) }
@media (max-width: 960px){
  .grid-2, .grid-4{ grid-template-columns: 1fr }
}

/* Nav */
.nav{
  position: sticky; top:0; z-index:40;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-300);
  display:grid; grid-template-columns: 1fr auto auto; align-items:center;
}
.nav .logo--bd{ height:44px }
.nav .logo--itp{ height:30px }
.nav .logo--tecnm{ height:34px }
.nav__brand{ display:flex; align-items:center; gap:var(--space-2); padding:.7rem 1rem }
.nav__brand strong{ font-weight:800; color:var(--blue-700) }
.nav__brand span{ font-size:.85rem; color:var(--gray-500) }
.nav__links{ display:flex; gap:1rem; align-items:center }
.nav__links a{ padding:.6rem .4rem; border-radius:8px; color:var(--gray-700) }
.nav__links a:hover{ background: var(--blue-050) }
.nav__logos{ display:flex; align-items:center; gap:.6rem; padding-right:1rem }
@media (max-width: 960px){
  .nav{ grid-template-columns: 1fr auto; gap:.6rem }
  .nav__links{ display:none }
  .nav .logo--bd{ height:38px } .nav .logo--itp{ height:26px } .nav .logo--tecnm{ height:30px }
}

/* Hero */
.hero{ background:#fff; border-block: 1px solid var(--gray-300) }
.hero .wrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-5); align-items:center }
.hero__text h1{ font-size: clamp(1.6rem, 2.2vw + 1rem, 2.4rem) }
.lead{ font-size:1.05rem }
.stats{ display:grid; gap:var(--space-3); grid-template-columns: repeat(2, minmax(220px,1fr)) }
.stat{ background: linear-gradient(180deg,#ffffff,#F3F7FF); border:1px solid var(--gray-300); border-radius:var(--radius); padding:var(--space-4); box-shadow:var(--shadow) }
.stat__value{ font-weight:900; font-size:2rem; color:var(--blue-700); margin-bottom:.25rem }
.stat__label{ color:var(--gray-700) }
.stat em{ color:var(--gray-500); font-style:normal }

/* Cards */
.card{ background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius); padding:var(--space-5); box-shadow:var(--shadow) }
.card--header-slim{ padding:var(--space-4) }
.eyebrow{ margin-top: .3rem; margin-bottom:.4rem; color:var(--blue-600); font-size:1.05rem }

/* Card partida (imagen + texto) */
.card--split{
  display:grid; gap:var(--space-4);
  grid-template-columns: 1fr 1.15fr; align-items:center;
}
.card--reverse{ grid-template-columns: 1.15fr 1fr }
.card--reverse .figure-polaroid{ order:1 } /* imagen a la izquierda en conclusión */
.card--reverse .content{ order:2 }
@media (max-width: 960px){
  .card--split, .card--reverse{ grid-template-columns: 1fr }
}

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; border-radius:12px; border:1px solid transparent;
  padding:.9rem 1.1rem; font-weight:700; cursor:pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn .icon{ width:18px; height:18px; fill: currentColor }
.btn--primary{ background: linear-gradient(135deg, #5AA2FF, var(--blue-700)); color:#fff; box-shadow:0 8px 22px rgba(27,57,106,.25) }
.btn--primary:hover{ transform: translateY(-1px) }
.btn--outline{ background:#fff; color:var(--blue-700); border-color: var(--blue-700) }
.btn--outline:hover{ background:#F0F6FF }

/* Media grande */
.media{
  margin: var(--space-4) 0 var(--space-5);
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--gray-300);
  background:#fff;
  box-shadow: var(--shadow);
}
.media figcaption{ padding:.6rem .9rem; background:#FAFBFE; border-top:1px solid var(--gray-300) }

/* Polaroid */
.figure-polaroid{
  position:relative; background:#fff; border:1px solid var(--gray-300);
  border-radius:14px; padding:.75rem; box-shadow:0 10px 26px rgba(27,57,106,.15); overflow:hidden;
}
.figure-polaroid img{ border-radius:12px }
.figure-polaroid::before{
  content:""; position:absolute; inset:10px -8px -10px -8px; border-radius:14px;
  background:#F4F7FF; z-index:-1; transform:rotate(-1.5deg); border:1px solid #E6ECF7;
}
.figure-polaroid .clip{
  position:absolute; top:6px; right:10px; width:26px; height:50px;
  border:2px solid #9aa7c2; border-radius:10px 10px 8px 8px; background:linear-gradient(#ffffffaa,#ffffff00);
}
.figure-polaroid figcaption{ margin-top:.5rem; font-size:.9rem }

/* Meters */
.meter__head{ font-weight:700; margin-bottom:.35rem }
.meter__bar{ height:12px; background:#EDF2FF; border-radius:999px; overflow:hidden; position:relative }
.meter__bar span{ display:block; width:0; height:100%; background: linear-gradient(90deg, #6CB6FF, var(--blue-600)); }
.meter__bar::after{ content: attr(data-value) '%'; position:absolute; right:.5rem; top:-1.6rem; color:var(--gray-500); font-size:.9rem }

/* Footer */
.footer{ background:#fff; border-top:1px solid var(--gray-300) }
.wrap--footer{ padding:1.2rem 0 }

/* ===== NAV más grande (desktop) ===== */
@media (min-width: 961px){
  .nav{
    padding-block: 1rem;                    /* ↑ alto total */
    border-bottom: 2px solid var(--gray-300);
    box-shadow: 0 6px 16px rgba(27,57,106,.08);
  }

  .nav__brand{ padding: 0 1.25rem }
  .nav__logos{ padding-right: 1.25rem }
  .nav__links{ gap: 2rem }                  /* más separación entre links */

  .nav__links a{
    font-size: 1.05rem;                     /* texto más grande */
    padding: .8rem .6rem;
  }

  /* Logos más grandes */
  .nav .logo--bd{    height: 64px; }        /* antes 44px */
  .nav .logo--itp{   height: 44px; }        /* antes 30px */
  .nav .logo--tecnm{ height: 52px; }        /* antes 34px */

  /* Texto de marca más grande */
  .nav__brand strong{ font-size: 1.35rem; line-height: 1; }
  .nav__brand span{   font-size: 1rem;     color: var(--gray-500); }
}

/* En móvil mantenemos tamaños equilibrados */
@media (max-width: 960px){
  .nav{ padding-block: .6rem }
  .nav .logo--bd{    height: 38px; }
  .nav .logo--itp{   height: 26px; }
  .nav .logo--tecnm{ height: 30px; }
}
/* ===== ITP + TecNM + texto a la IZQUIERDA | bd-logo a la DERECHA ===== */
.nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Contenedor izquierdo: logos ITP/TecNM + texto */
.nav__left{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
}

/* Logos ITP y TecNM */
.nav__logos{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav__logos img{
  height: 38px;
}

/* Texto “Biblioteca Digital ITP • TecNM” */
.nav__text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.nav__text strong{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--blue-700);
  line-height: 1.1;
}

.nav__text span{
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.1;
}

/* bd-logo a la derecha */
.nav__brand{
  padding-right: 1rem;
}

.nav__brand img{
  height: 64px;
}

/* Responsive */
@media (max-width: 960px){
  .nav{
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .nav__left{
    flex-wrap: wrap;
    padding-left: .7rem;
  }

  .nav__text{
    margin-top: .25rem;
  }

  .nav__brand{
    padding-right: .7rem;
    margin-top: .5rem;
  }

  .nav__brand img{
    height: 48px;
  }
}