/* Calibro Ingeniería — portfolio: grilla, tarjetas, filtros y lightbox */
/* Portfolio */
  .portfolio{ background: #fff; }
  .pf-filters{
    display:flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 36px;
  }
  .pf-chip{
    border: 1px solid var(--c-line);
    background: #fff;
    color: var(--c-text);
    padding: 9px 18px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all .15s ease;
  }
  .pf-chip:hover{ border-color: var(--c-ink); }
  .pf-chip.active{
    background: var(--c-ink); color:#fff; border-color: var(--c-ink);
  }
  .pf-chip .count{
    opacity: .55; margin-left: 6px; font-weight: 500;
  }
  .pf-grid{
    display:grid;
    grid-template-columns: repeat(var(--pf-cols, 3), minmax(0, 1fr));
    gap: 24px;
  }
  .pf-card{
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--c-line);
    cursor: zoom-in;
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex; flex-direction: column;
    min-width: 0;
  }
  .pf-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: #d6d6de; }
  .pf-thumb{
    position: relative;
    aspect-ratio: 1/1;
    background: #f2f3f5;
    overflow: hidden;
  }
  .pf-thumb img{
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform .35s ease;
  }
  .pf-card:hover .pf-thumb img{ transform: scale(1.05); }
  .pf-zoom{
    position: absolute; right: 10px; bottom: 10px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(14,14,16,.72); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; opacity: 0; transition: opacity .2s ease;
  }
  .pf-card:hover .pf-zoom{ opacity: 1; }
  .pf-body{
    min-width: 0;
    padding: 16px 18px 20px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
  }
  .pf-tag{
    display: inline-block;
    background: var(--c-red); color:#fff;
    font-family: var(--font-display); font-weight:700;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 3px;
    align-self: flex-start;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .pf-tag.area-FACTIBILIDAD{ background:#1e62a8; }
  .pf-tag.area-AUTOMOTRIZ{ background:#d83037; }
  .pf-tag.area-METALMECANICA{ background:#0e0e10; }
  .pf-tag.area-SIDERURGIA{ background:#6b2c2c; }
  .pf-tag.area-ACEITERAS{ background:#b8861a; }
  .pf-tag.area-AGRO-INDUSTRIAL{ background:#1f7a3a; }
  .pf-card h3{
    font-size: 15px; font-weight: 600; line-height: 1.35;
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* Lightbox */
  .pf-lb{
    position: fixed; inset: 0; z-index: 100;
    background: rgba(8,9,12,.94);
    display: flex; align-items: center; justify-content: center;
    padding: 4vh 6vw;
  }
  .pf-lb img{
    max-width: 100%; max-height: 78vh;
    object-fit: contain;
    background: #fff; border-radius: 6px;
  }
  .pf-lb-cap{
    position: absolute; left: 0; right: 0; bottom: 26px;
    text-align: center; color: #fff;
    font-family: var(--font-display); font-size: 15px; font-weight: 600;
    padding: 0 20px;
  }
  .pf-lb-cap small{ display:block; font-weight:400; opacity:.6; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; }
  .pf-lb-btn{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff;
    border: 0; cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
  }
  .pf-lb-btn:hover{ background: rgba(255,255,255,.24); }
  .pf-lb-prev{ left: 18px; }
  .pf-lb-next{ right: 18px; }
  .pf-lb-close{
    position: absolute; top: 18px; right: 18px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer;
    font-size: 18px; display:flex; align-items:center; justify-content:center;
  }
  .pf-lb-close:hover{ background: rgba(255,255,255,.24); }
  .pf-more{
    display: flex; justify-content: center; margin-top: 40px;
  }
  .pf-more button{
    background: #fff; border: 1.5px solid var(--c-ink); color: var(--c-ink);
    padding: 13px 32px; border-radius: var(--radius);
    font-family: var(--font-display); font-weight: 600; font-size: 14px;
    cursor: pointer; transition: all .15s ease;
  }
  .pf-more button:hover{ background: var(--c-ink); color: #fff; }
  .pf-empty{
    grid-column: 1/-1;
    padding: 60px 20px; text-align: center;
    color: var(--c-muted); font-size: 15px;
    border: 1px dashed var(--c-line); border-radius: var(--radius-lg);
  }

  @media (max-width: 980px){
    .pf-grid{ --pf-cols: 2 !important; }
  }
  @media (max-width: 600px){
    .pf-grid{ --pf-cols: 1 !important; gap: 18px; }
    .pf-card{ flex-direction: row; align-items: stretch; }
    .pf-thumb{ flex: 0 0 132px; aspect-ratio: 1/1; }
    .pf-body{ padding: 14px 16px; justify-content: center; }
    .pf-card h3{ font-size: 15px; }
    .pf-zoom{ display: none; }
    .pf-chip{ font-size: 12px; padding: 8px 14px; }
    .pf-lb{ padding: 3vh 4vw; }
    .pf-lb-prev{ left: 6px; }
    .pf-lb-next{ right: 6px; }
    .pf-lb-btn{ width: 40px; height: 40px; }
  }