/* ==========================================================
   HERRAMIENTAS DE ESTUDIO UNIVERSITARIO — Programa PRI
   Hoja compartida por todas las páginas /herramientas*
   ========================================================== */

:root{
  --h-din:#1f9aab;  --h-din-soft:rgba(31,154,171,.14);
  --h-est:#d97706;  --h-est-soft:rgba(217,119,6,.14);
  --h-con:#7c6cf0;  --h-con-soft:rgba(124,108,240,.14);
  --h-ana:#22a06b;  --h-ana-soft:rgba(34,160,107,.14);
  --h-fondo:#05111f;
  --h-panel:#0a1e32;
  --h-panel-2:#071828;
  --h-borde:rgba(255,255,255,.08);
  --h-texto:#e8f0f8;
  --h-texto-2:#a8c4d8;
  --h-texto-3:#7a9ab8;
}

body.pri-herramientas{ background:var(--h-fondo); color:var(--h-texto); }

/* ── HERO ───────────────────────────────────────────────── */
.hh-hero{
  background:linear-gradient(135deg,#021226 0%,#0a2440 60%,#0d3558 100%);
  padding:7rem 1.5rem 2.6rem;
  border-bottom:2px solid rgba(255,94,0,.25);
  text-align:center;
}
.hh-hero .hh-eyebrow{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:#FF5E00; margin-bottom:.7rem;
}
.hh-hero h1{
  font-family:'Montserrat',sans-serif; font-weight:900;
  font-size:clamp(1.9rem,5vw,3.2rem); color:#fff; margin:0 0 .7rem; line-height:1.05;
  letter-spacing:-1px; text-wrap:balance;
}
.hh-hero h1 span{ color:#FF5E00; }
.hh-hero p{ font-size:1.02rem; color:var(--h-texto-2); max-width:640px; margin:0 auto; }

/* ── MIGAS ──────────────────────────────────────────────── */
.hh-migas{
  max-width:1180px; margin:0 auto; padding:1rem 1.5rem .2rem;
  font-family:'Montserrat',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.06em; color:var(--h-texto-3);
}
.hh-migas a{ color:var(--h-texto-3); text-decoration:none; }
.hh-migas a:hover{ color:#FF5E00; }
.hh-migas span{ color:var(--h-texto-2); }

/* ── LAYOUT ─────────────────────────────────────────────── */
.hh-main{ max-width:1180px; margin:0 auto; padding:1.6rem 1.5rem 4rem; }
.hh-seccion{ margin-bottom:2.6rem; }
.hh-seccion > h2{
  font-family:'Montserrat',sans-serif; font-weight:900; font-size:1rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--h-texto-2);
  margin:0 0 1rem; padding-bottom:.55rem; border-bottom:1px solid var(--h-borde);
}

.hh-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.hh-grid-2{ display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:1rem; }

/* ── TARJETA ────────────────────────────────────────────── */
.hh-card{
  position:relative; display:flex; flex-direction:column; gap:.55rem;
  background:var(--h-panel); border:1.5px solid var(--h-borde); border-radius:10px;
  padding:1.35rem 1.15rem 1.15rem; overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.hh-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--h-texto-3); }
.hh-card[data-color="din"]::before{ background:var(--h-din); }
.hh-card[data-color="est"]::before{ background:var(--h-est); }
.hh-card[data-color="con"]::before{ background:var(--h-con); }
.hh-card[data-color="ana"]::before{ background:var(--h-ana); }

a.hh-card:hover{ transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,.5); }
a.hh-card[data-color="din"]:hover{ border-color:var(--h-din); }
a.hh-card[data-color="est"]:hover{ border-color:var(--h-est); }
a.hh-card[data-color="con"]:hover{ border-color:var(--h-con); }
a.hh-card[data-color="ana"]:hover{ border-color:var(--h-ana); }
a.hh-card:focus-visible{ outline:2px solid #FF5E00; outline-offset:3px; }

.hh-card.is-pronto{ opacity:.62; }
.hh-card.is-pronto:hover{ transform:none; box-shadow:none; }

.hh-card h3{
  font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.06rem;
  letter-spacing:-.3px; text-transform:none; color:#fff; margin:0;
}
.hh-card p{ font-size:.9rem; color:var(--h-texto-2); margin:0; line-height:1.5; }
.hh-card .hh-meta{
  font-family:'Montserrat',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--h-texto-3);
}

.hh-badge{
  align-self:flex-start; font-family:'Montserrat',sans-serif; font-size:.64rem;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.24rem .6rem; border-radius:20px; border:1px solid currentColor;
}
.hh-badge.listo{ color:#37d39b; background:rgba(55,211,155,.1); }
.hh-badge.pronto{ color:var(--h-texto-3); background:rgba(255,255,255,.04); }

/* ── LISTA DE DESCARGAS ─────────────────────────────────── */
.hh-lista{ display:flex; flex-direction:column; gap:.55rem; }
.hh-item{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.5rem 1rem; align-items:center;
  background:var(--h-panel); border:1.5px solid var(--h-borde); border-radius:9px;
  padding:.85rem 1rem; text-decoration:none; color:inherit;
  transition:border-color .18s, background .18s, transform .18s;
}
.hh-item:hover{ border-color:var(--h-din); background:#0c2440; transform:translateX(3px); }
.hh-item:focus-visible{ outline:2px solid #FF5E00; outline-offset:3px; }
.hh-item .hh-num{
  font-family:'IBM Plex Mono','Courier New',monospace; font-size:.78rem; font-weight:600;
  color:var(--h-din); background:var(--h-din-soft); border-radius:5px; padding:.28rem .5rem;
  min-width:2.6rem; text-align:center;
}
.hh-item .hh-txt strong{
  display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.95rem;
  color:#fff; margin-bottom:.12rem;
}
.hh-item .hh-txt span{ font-size:.85rem; color:var(--h-texto-2); }
.hh-item .hh-pdf{
  font-family:'Montserrat',sans-serif; font-size:.68rem; font-weight:800;
  letter-spacing:.08em; color:var(--h-texto-3); white-space:nowrap;
}
.hh-item:hover .hh-pdf{ color:#FF5E00; }
@media (max-width:560px){
  .hh-item{ grid-template-columns:auto minmax(0,1fr); }
  .hh-item .hh-pdf{ grid-column:2; }
}

/* ── BLOQUE DESTACADO (simulador) ───────────────────────── */
.hh-destacado{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1.4rem;
  align-items:center; background:linear-gradient(135deg,#071c30 0%,#0b2b46 100%);
  border:1.5px solid var(--h-din); border-radius:12px; padding:1.6rem 1.5rem;
}
@media (max-width:760px){ .hh-destacado{ grid-template-columns:1fr; } }
.hh-destacado h3{
  font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.3rem; color:#fff;
  margin:0 0 .55rem; text-transform:none; letter-spacing:-.4px;
}
.hh-destacado p{ color:var(--h-texto-2); margin:0 0 1rem; font-size:.95rem; }
.hh-btn{
  display:inline-block; background:#FF5E00; color:#fff; text-decoration:none;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; padding:.72rem 1.35rem; border-radius:6px;
  transition:box-shadow .2s, transform .15s;
}
.hh-btn:hover{ box-shadow:3px 3px 0 var(--oro-sol,#FFD700); transform:translateY(-1px); }
.hh-btn.secundario{ background:transparent; color:var(--h-texto); border:1.5px solid var(--h-borde); }
.hh-btn.secundario:hover{ border-color:#FF5E00; color:#fff; box-shadow:none; }
.hh-acciones{ display:flex; flex-wrap:wrap; gap:.6rem; }

.hh-mini{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem;
  font-family:'Montserrat',sans-serif;
}
.hh-mini div{
  background:rgba(255,255,255,.04); border:1px solid var(--h-borde);
  border-radius:8px; padding:.6rem .7rem;
}
.hh-mini b{ display:block; font-size:1.25rem; font-weight:900; color:#fff; line-height:1.1; }
.hh-mini span{ font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--h-texto-3); }

/* ── NOTA ───────────────────────────────────────────────── */
.hh-nota{
  border-left:3px solid #FF5E00; background:rgba(255,94,0,.06);
  padding:.9rem 1.1rem; border-radius:0 8px 8px 0; color:var(--h-texto-2);
  font-size:.92rem; margin-top:1.4rem;
}
.hh-nota b{ color:#fff; }

/* ── PIE ────────────────────────────────────────────────── */
.hh-pie{
  border-top:1px solid var(--h-borde); margin-top:2.5rem; padding:1.5rem;
  text-align:center; color:var(--h-texto-3); font-size:.85rem;
}
.hh-pie a{ color:var(--h-texto-2); }

/* --- párrafo introductorio dentro de una sección de herramientas --- */
.hh-seccion > .hh-intro{
  color:var(--h-texto-2);
  font-size:.92rem;
  line-height:1.65;
  max-width:70ch;
  margin:-.4rem 0 1.1rem;
}