/* ===== Proyectos Hub – Markekint ===== */
:root{
    /* usa las variables que ya tienes en style.css */
    /* --blue-light, --blue-dark, --white, etc. */
  }
  
  /* Hero */
  #projects-hero{
    min-height: clamp(260px, 52vh, 420px);
    display: grid;
    place-items: center;
    text-align: center;
    background:
      linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
      url("../img/banner_marketing.png") center/cover no-repeat;
  }
  
  /* Filtros / búsqueda */
  .filter-bar .input-group{
    border-radius: 14px;
  }
  .filter-bar .input-group .form-control:focus{
    box-shadow: none;
  }
  .filter-pill{
    background: #fff;
    color: #0a2540;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 999px;
    padding: .5rem 1rem;
    margin: .25rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  .filter-pill:hover{
    transform: translateY(-1px);
  }
  .filter-pill.active{
    background: var(--blue-dark);
    color: #fff;
    border-color: transparent;
  }
  
  /* Cards */
  .project-card{
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
  }
  .project-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,.12);
  }
  .project-card .thumb{
    width: 100%;
    height: clamp(200px, 22vw, 260px);
    object-fit: cover;
    display: block;
  }
  .project-card .content{
    padding: 14px 16px;
  }
  .project-card .title{
    margin: 0 0 .35rem;
    font-weight: 800;
    color: #0a2540;
  }
  .project-card .desc{
    color: #6c757d;
    margin: 0 0 .75rem;
    min-height: 2.75rem; /* 2 líneas aprox */
  }
  .badge-soft{
    background: rgba(0,178,226,.12);
    color: var(--blue-dark);
    border: 1px solid rgba(0,178,226,.25);
    border-radius: 999px;
    font-weight: 600;
  }
  
  /* Botones dentro de la card */
  .project-card .actions .btn{
    border-radius: 999px;
  }
  .project-card .actions .btn-preview{
    background: rgba(0,0,0,.75);
    color: #fff;
  }
  .project-card .actions .btn-preview:hover{
    background: rgba(0,0,0,.85);
  }
  
  /* Overlay play/zoom (opcional) */
  .project-card .overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.15));
    opacity: 0;
    transition: opacity .25s ease;
    display: grid;
    place-items: center;
  }
  .project-card:hover .overlay{ opacity: 1; }
  
  /* Accesibilidad foco */
  .project-card a:focus-visible{
    outline: 3px solid var(--blue-light);
    outline-offset: 3px;
  }
  
  /* Responsive */
  @media (max-width: 575.98px){
    .project-card .thumb{
      height: 180px;
    }
  }