/* ImpulsArte v2.0.0 — Portafolio real de servicios / página pública exclusivamente */
.references-section { padding-block: 100px 110px; background: #fff; }
.references-section .portfolio-shell { display: block; }
.portfolio-intro { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(255px,.72fr); gap: clamp(32px,5vw,80px); align-items:end; margin-bottom:48px; }
.portfolio-intro .kicker { margin:0 0 20px; }
.portfolio-intro h2 { max-width:780px; margin:0 0 22px; letter-spacing:-.045em; font-size:clamp(2.3rem,4.3vw,4.1rem); line-height:1.06; color:#171a2b; }
.portfolio-lead { margin:0; max-width:650px; font-size:1.075rem; line-height:1.75; color:#5e6578; }
.portfolio-summary { display:grid; grid-template-columns:1fr 1fr; column-gap:22px; row-gap:23px; border-left:1px solid #e5e6ef; padding-left:38px; }
.portfolio-summary>div { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.portfolio-summary strong { font-size:clamp(2rem,3vw,2.8rem); font-weight:750; letter-spacing:-.065em; line-height:1; color:#6253dd; }
.portfolio-summary span { color:#657086; font-size:.875rem; font-weight:650; line-height:1.3; }
.portfolio-toolbar { border-top:1px solid #e9e9f1; padding-top:28px; }
.portfolio-toolbar-label { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 20px; margin-bottom:20px; }
.portfolio-eyebrow { color:#5f50d4; font-size:.75rem; font-weight:800; letter-spacing:.11em; }
.portfolio-toolbar-label p { margin:0; color:#6b7182; font-size:.95rem; }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; align-items:center; }
.portfolio-filter-input { position:absolute !important; clip-path:inset(50%); overflow:hidden; white-space:nowrap; width:1px; height:1px; opacity:0; }
.portfolio-filter-label { border-radius:999px; border:1px solid #e1e2ec; background:#f8f8fc; color:#4e566a; padding:11px 17px; font-size:.91rem; font-weight:650; line-height:1.2; cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; user-select:none; }
.portfolio-filter-label:hover { background:#efecff; border-color:#cfc8f7; }
.portfolio-filter-input:checked + .portfolio-filter-label { background:#6253da; color:#fff; border-color:#6253da; box-shadow:0 4px 15px #6253da20; }
.portfolio-filter-input:focus-visible + .portfolio-filter-label { outline:3px solid #4635cf; outline-offset:3px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; align-items:stretch; }
.portfolio-case { display:flex; flex-direction:column; min-width:0; min-height:294px; padding:27px 25px 22px; border:1px solid #e5e7f0; background:#fff; border-radius:19px; transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease; }
.portfolio-case:hover { border-color:#d0caf2; box-shadow:0 14px 36px #2d245d0b; transform:translateY(-2px); }
.portfolio-case-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:27px; }
.portfolio-monogram { display:grid; place-items:center; width:46px;height:46px;flex-shrink:0; background:#f0edff; color:#5f4fc9; border:1px solid #e3defa; border-radius:13px; font-size:.9rem; font-weight:850; letter-spacing:-.025em; }
.portfolio-area { font-size:.8rem; font-weight:650; text-align:right; color:#7d8495; line-height:1.35; }
.portfolio-case h3 { margin:0 0 17px; color:#202337; font-size:clamp(1.3rem,1.7vw,1.6rem); line-height:1.22; font-weight:780; letter-spacing:-.028em; }
.portfolio-deliverables { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:23px; }
.portfolio-deliverables span { display:inline-flex; align-items:center; border:1px solid #e7e8f1; border-radius:7px; background:#f7f8fc; padding:6px 9px; color:#535d72; font-size:.83rem; font-weight:550; line-height:1.42; }
.portfolio-case-bottom { padding-top:15px; margin-top:auto; border-top:1px solid #ececf3; }
.portfolio-link { display:inline-flex; align-items:center; gap:6px; color:#5c4bd2; text-decoration:none; font-size:.91rem; font-weight:750; }
.portfolio-link:hover { text-decoration:underline; text-underline-offset:3px; }
.portfolio-link:focus-visible { outline:2px solid #5d48df; outline-offset:4px; border-radius:3px; }
.portfolio-link span { font-size:1.05rem; }
.portfolio-project-type { font-size:.79rem; color:#9ba1ad; font-weight:650; }
/* Cada categoría usa CSS: filtros interactivos sin dependencias de JS */
.portfolio-toolbar:has(#portfolio-filter-web:checked) .portfolio-case:not([data-categories~="web"]),
.portfolio-toolbar:has(#portfolio-filter-apps:checked) .portfolio-case:not([data-categories~="apps"]),
.portfolio-toolbar:has(#portfolio-filter-social:checked) .portfolio-case:not([data-categories~="social"]),
.portfolio-toolbar:has(#portfolio-filter-editorial:checked) .portfolio-case:not([data-categories~="editorial"]),
.portfolio-toolbar:has(#portfolio-filter-audiovisual:checked) .portfolio-case:not([data-categories~="audiovisual"]) { display:none; }
.portfolio-capabilities { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center; margin-top:45px; padding:34px 38px; background:#f7f6ff; border:1px solid #e8e4fa; border-radius:20px; }
.portfolio-capabilities h3 { margin:13px 0 10px; color:#29263e; font-size:clamp(1.35rem,2.2vw,1.85rem); line-height:1.2; letter-spacing:-.025em; font-weight:760; }
.portfolio-capabilities p { max-width:560px; font-size:.95rem; line-height:1.65; color:#67667e; margin:0; }
.portfolio-capability-list { display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-end; }
.portfolio-capability-list span { padding:12px 14px; font-size:.87rem; line-height:1.3; font-weight:680; background:#fff; color:#51468b; border:1px solid #ded8f4; border-radius:11px; }
.portfolio-cta { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:35px; border-top:1px solid #e8eaf2; padding-top:35px; }
.portfolio-cta>div { display:flex; flex-direction:column; gap:7px; }
.portfolio-cta strong { color:#20263c; font-size:1.18rem; font-weight:780; }
.portfolio-cta span { color:#687184; font-size:.94rem; line-height:1.4; }
.portfolio-cta a { flex-shrink:0; color:#fff; background:#6353dc; padding:14px 20px; font-weight:730; text-decoration:none; font-size:.91rem; border-radius:10px; transition:background .2s; }
.portfolio-cta a:hover { background:#4d3cc3; }
.portfolio-cta a span { color:inherit; }
@media (max-width:980px) {
  .portfolio-intro { grid-template-columns:1fr; gap:22px; }
  .portfolio-summary { display:flex; gap:35px; border-left:0; border-top:1px solid #ebecf4; padding:20px 0 0; }
  .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-capabilities { grid-template-columns:1fr; gap:20px; }
  .portfolio-capability-list { justify-content:flex-start; }
}
@media (max-width:650px) {
  .references-section { padding-block:70px 80px; }
  .portfolio-intro { margin-bottom:32px; }
  .portfolio-intro h2 { font-size:clamp(2rem,9.1vw,2.85rem); margin-bottom:17px; }
  .portfolio-lead { font-size:.98rem; line-height:1.67; }
  .portfolio-summary { justify-content:space-between; gap:13px; }
  .portfolio-summary strong { font-size:1.9rem; }
  .portfolio-summary span { font-size:.76rem; }
  .portfolio-toolbar-label { align-items:flex-start; }
  .portfolio-filters { gap:7px; margin-bottom:20px; }
  .portfolio-filter-label { padding:10px 13px; font-size:.82rem; }
  .portfolio-grid { grid-template-columns:1fr; gap:12px; }
  .portfolio-case { min-height:0; padding:23px 22px; }
  .portfolio-case-header { margin-bottom:20px; }
  .portfolio-case h3 { font-size:1.42rem; }
  .portfolio-deliverables span { font-size:.81rem; }
  .portfolio-capabilities { margin-top:27px; padding:25px 22px; }
  .portfolio-cta { display:grid; grid-template-columns:1fr; padding-top:26px; margin-top:28px; }
  .portfolio-cta a { text-align:center; justify-self:stretch; }
}
@media (prefers-reduced-motion:reduce) {.portfolio-case,.portfolio-filter-label { transition:none; } .portfolio-case:hover { transform:none; }}