:root {
  --pj-azul:        #215387; /* azul institucional unificado (antes #1e3a6e / #1F4E85 en dos :root distintos) */
  --pj-azul-med:    #2d5fa6;
  --pj-amarillo:    #f5c400;
  --pj-blanco:      #ffffff;
  --pj-gris:        #f8f9fa;
  --pj-azul-boton:  #2F6DB5;  /* botón destacado del menú */
  --pj-azul-oscuro: #14365F;  /* sombra del hero */
  --pj-celeste:     #8CCBF5; /* título del hero, borde superior del footer y link del footer */
}

/* Card base */
.pj-card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.pj-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(30,58,110,.18);
}

/* Card header azul */
.pj-card-header {
  background-color: var(--pj-azul);
  color: var(--pj-blanco);
  padding: .75rem 1rem;
  font-weight: 600;
}

/* Imagen de card */
.pj-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Badge estado actividad */
.badge-proximo    { background-color: var(--pj-azul-med); color: #fff; }
.badge-en-curso   { background-color: #198754; color: #fff; }
.badge-finalizado { background-color: #6c757d; color: #fff; }

/* Botón PJ */
.btn-pj {
  background-color: var(--pj-azul);
  color: var(--pj-blanco);
  border: none;
  border-radius: 6px;
}
.btn-pj:hover {
  background-color: var(--pj-azul-med);
  color: var(--pj-blanco);
}

/* Acento amarillo */
.pj-accent        { color: var(--pj-amarillo); }
.pj-border-accent { border-left: 4px solid var(--pj-amarillo); }

/* Text clamp 2 líneas */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Repositorio card horizontal */
.repo-card-icon {
  font-size: 2rem;
  color: var(--pj-azul);
  min-width: 2.5rem;
  text-align: center;
}

body{ font-family:"Ubuntu", system-ui, sans-serif; }

/* ---------- Barra superior ---------- */
.navbar-pj{
  background:var(--pj-azul);
  padding:.9rem 0;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.navbar-pj .navbar-brand{ color:#fff; font-weight:700; font-size:1.35rem; line-height:1.1; }
.navbar-pj .navbar-brand small{ display:block; font-size:.7rem; font-weight:400; letter-spacing:.08em; opacity:.8; }
.navbar-pj .nav-link{
  color:#fff; text-transform:uppercase; font-size:1rem; font-weight:500;
  padding:.5rem .8rem !important;
}
.navbar-pj .nav-link:hover{ color:var(--pj-celeste); }
.btn-pj-menu{
  background:var(--pj-azul-boton); color:#fff; text-transform:uppercase;
  font-weight:500; border-radius:4px; padding:.55rem 1.2rem;
}
.btn-pj-menu:hover{ background:#3b7fcc; color:#fff; }
.btn-pj-outline{
  color:#fff; border:1px solid rgba(255,255,255,.6); text-transform:uppercase;
  font-weight:500; border-radius:4px; padding:.55rem 1.1rem;
}
.btn-pj-outline:hover{ background:rgba(255,255,255,.1); color:#fff; }

/* ---------- Hero ---------- */
/* Imagen fija (ex carrousel, feature #34). Selectores adaptados de
   `.hero-pj .carousel-item` (Bootstrap carousel) a `.hero-pj .hero-media`,
   un único contenedor sin slides. Se conserva el mismo efecto visual:
   grayscale + tinte azul multiply + degradado. */
.hero-pj{ position:relative; height:calc(100vh - 76px); min-height:520px; overflow:hidden; }
.hero-pj .hero-media{ position:relative; height:100%; }

.hero-pj .hero-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(100%) contrast(1.05);
}
/* Tinte azul sobre la foto */
.hero-pj .hero-media::before{
  content:""; position:absolute; inset:0;
  background:#2B5F9A; mix-blend-mode:multiply; opacity:.75; z-index:1;
}
/* Degradado para que el texto de la izquierda se lea bien */
.hero-pj .hero-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(20,54,95,.9) 0%, rgba(20,54,95,.55) 45%, rgba(20,54,95,0) 80%);
}

.hero-pj .hero-texto{
  position:absolute; z-index:2; top:50%; transform:translateY(-40%);
  left:0; right:0;
}
.hero-pj .hero-titulo{
  color:var(--pj-celeste); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem, 4vw, 3rem); margin-bottom:2rem;
}
.hero-pj .hero-sub{
  color:#fff; font-weight:700; font-size:clamp(1.6rem, 3vw, 2.3rem); margin-bottom:.8rem;
}
.hero-pj .hero-bajada{
  color:var(--pj-celeste); font-size:1.15rem; max-width:40ch; margin-bottom:2rem;
}
.btn-hero{
  background:#fff; color:var(--pj-azul-oscuro); font-weight:700;
  padding:.9rem 1.8rem; border-radius:12px; font-size:1.1rem;
}
.btn-hero:hover{ background:var(--pj-celeste); color:var(--pj-azul-oscuro); }

@media (max-width:767.98px){
  .hero-pj{ height:80vh; }
  .hero-pj .hero-media::after{
    background:linear-gradient(0deg, rgba(20,54,95,.95) 0%, rgba(20,54,95,.4) 70%);
  }
  .hero-pj .hero-texto{ top:auto; bottom:3rem; transform:none; }
}

/* ---------- Pie de página ---------- */
.footer-pj{
  background:var(--pj-azul);
  color:#fff;
  border-top:3px solid var(--pj-celeste);
}
.footer-pj small{ opacity:.75; }
/* No puede ser var(--pj-azul): desde que --pj-azul pasó a #215387 es
   exactamente el mismo color que el fondo de .footer-pj, y el link quedaría
   invisible. Se usa --pj-celeste (#8CCBF5), que ya es el borde superior del
   footer: contraste 4.52:1 sobre #215387, por encima del mínimo WCAG AA
   (4.5:1) para texto normal. */
.footer-pj a{ color:var(--pj-celeste); text-decoration:none; }
.footer-pj a:hover{ text-decoration:underline; }