/* Altitud Portfolio v5 */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root{
  --ap-bg:#080810;--ap-surface:#0d0d1c;--ap-surface2:#12122a;
  --ap-border:rgba(255,255,255,.07);--ap-border2:rgba(255,255,255,.11);
  --ap-blue:#1a6ef5;--ap-glow:rgba(26,110,245,.38);--ap-soft:#60a5fa;
  --ap-white:#fff;--ap-muted:#6b7280;--ap-muted2:#9ca3af;
  --ap-display:'Syne',sans-serif;--ap-body:'DM Sans',sans-serif;--ap-r:20px;

  /* Colors per categoria */
  --c-redes:#e11d74;--c-redes-bg:rgba(225,29,116,.13);--c-redes-glow:rgba(225,29,116,.3);
  --c-web:#7c3aed;--c-web-bg:rgba(124,58,237,.13);--c-web-glow:rgba(124,58,237,.3);
  --c-seo:#059669;--c-seo-bg:rgba(5,150,105,.13);--c-seo-glow:rgba(5,150,105,.3);
  --c-sem:#d97706;--c-sem-bg:rgba(217,119,6,.13);--c-sem-glow:rgba(217,119,6,.3);
  --c-diseno:#0891b2;--c-diseno-bg:rgba(8,145,178,.13);--c-diseno-glow:rgba(8,145,178,.3);
  --c-ia:#8b5cf6;--c-ia-bg:rgba(139,92,246,.13);--c-ia-glow:rgba(139,92,246,.3);
}

.altitud-portfolio{
  background:var(--ap-bg);font-family:var(--ap-body);
  padding:90px 20px 110px;position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);box-sizing:border-box;
}
/* Ambient glows */
.altitud-portfolio::before{content:'';position:absolute;top:-200px;right:-200px;width:640px;height:640px;background:radial-gradient(circle,rgba(26,110,245,.15) 0%,transparent 68%);pointer-events:none;}
.altitud-portfolio::after{content:'';position:absolute;bottom:-120px;left:-120px;width:420px;height:420px;background:radial-gradient(circle,rgba(139,92,246,.09) 0%,transparent 68%);pointer-events:none;}
.ap-wrap{max-width:1280px;margin:0 auto;position:relative;z-index:1;}

/* HEADER */
.ap-head{text-align:center;margin-bottom:56px;}
.ap-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ap-soft);margin-bottom:18px;}
.ap-eyebrow span{display:block;width:30px;height:1px;background:var(--ap-soft);opacity:.55;}
.ap-h1{font-family:var(--ap-display);font-size:clamp(2.1rem,5vw,3.8rem);font-weight:800;color:var(--ap-white);line-height:1.06;margin-bottom:14px;}
.ap-h1 em{font-style:normal;background:linear-gradient(120deg,#1a6ef5,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ap-sub{font-size:15.5px;color:var(--ap-muted2);max-width:500px;margin:0 auto;line-height:1.68;}

/* FILTROS */
.ap-filters-wrap{margin-bottom:20px;}
.ap-filter-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:12px;text-align:center;}
.ap-filter-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}

.ap-btn{
  background:transparent;border:1px solid var(--ap-border2);
  color:var(--ap-muted2);padding:9px 20px;border-radius:100px;
  font-family:var(--ap-body);font-size:13px;font-weight:500;cursor:pointer;
  transition:all .22s ease;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
}
.ap-btn:hover{border-color:rgba(26,110,245,.45);color:var(--ap-white);background:rgba(26,110,245,.08);}
.ap-btn .ap-btn-icon{font-size:15px;line-height:1;}

/* On state per categoria */
.ap-btn.on[data-val="all"]            {background:var(--ap-blue);border-color:var(--ap-blue);color:#fff;box-shadow:0 0 22px var(--ap-glow);}
.ap-btn.on[data-val="Redes Sociales"] {background:var(--c-redes);border-color:var(--c-redes);color:#fff;box-shadow:0 0 22px var(--c-redes-glow);}
.ap-btn.on[data-val="Web"]            {background:var(--c-web);border-color:var(--c-web);color:#fff;box-shadow:0 0 22px var(--c-web-glow);}
.ap-btn.on[data-val="SEO"]            {background:var(--c-seo);border-color:var(--c-seo);color:#fff;box-shadow:0 0 22px var(--c-seo-glow);}
.ap-btn.on[data-val="SEM"]            {background:var(--c-sem);border-color:var(--c-sem);color:#fff;box-shadow:0 0 22px var(--c-sem-glow);}
.ap-btn.on[data-val="Diseño Gráfico"] {background:var(--c-diseno);border-color:var(--c-diseno);color:#fff;box-shadow:0 0 22px var(--c-diseno-glow);}
.ap-btn.on[data-val="Inteligencia Artificial"]{background:var(--c-ia);border-color:var(--c-ia);color:#fff;box-shadow:0 0 22px var(--c-ia-glow);}

/* CONTADOR */
.ap-count{text-align:center;font-size:12px;color:var(--ap-muted);margin:16px 0 36px;letter-spacing:.04em;}
.ap-count strong{color:var(--ap-soft);}

/* GRID */
.ap-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

/* CARD */
.ap-card{
  border-radius:var(--ap-r);overflow:hidden;cursor:pointer;
  border:1px solid var(--ap-border);background:var(--ap-surface);
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .28s;
  animation:apIn .42s ease both;
}
.ap-card:hover{transform:translateY(-8px);box-shadow:0 32px 72px rgba(0,0,0,.6),0 0 0 1px rgba(26,110,245,.25);border-color:rgba(26,110,245,.22);}
@keyframes apIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* MEDIA — ratio 16:9 */
.ap-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#06060f;}
.ap-media .ap-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.25,.46,.45,.94);z-index:1;}
.ap-card:hover .ap-media .ap-img{transform:scale(1.07);}
.ap-thumb-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block;transition:transform .55s;}
.ap-card:hover .ap-thumb-canvas{transform:scale(1.07);}
.ap-media .ap-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s;z-index:2;pointer-events:none;}
.ap-card:hover .ap-media .ap-vid{opacity:1;}

/* Overlay gradient */
.ap-media::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,16,.92) 0%,rgba(8,8,16,.35) 45%,rgba(8,8,16,.08) 100%);
}

/* Fons placeholder */
.ap-no-media{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a2e,#2d1b69);display:flex;align-items:center;justify-content:center;font-size:56px;z-index:1;}

/* Play badge */
.ap-play-badge{position:absolute;top:14px;right:14px;z-index:6;width:32px;height:32px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);}
.ap-play-badge svg{width:11px;height:11px;fill:white;margin-left:2px;}

/* Badge SERVICI — color per categoria */
.ap-svc-badge{
  position:absolute;top:14px;left:14px;z-index:6;
  color:white;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 13px;border-radius:100px;
  display:inline-flex;align-items:center;gap:5px;
}
.ap-svc-badge[data-svc="Redes Sociales"] {background:var(--c-redes);box-shadow:0 2px 12px var(--c-redes-glow);}
.ap-svc-badge[data-svc="Web"]            {background:var(--c-web);box-shadow:0 2px 12px var(--c-web-glow);}
.ap-svc-badge[data-svc="SEO"]            {background:var(--c-seo);box-shadow:0 2px 12px var(--c-seo-glow);}
.ap-svc-badge[data-svc="SEM"]            {background:var(--c-sem);box-shadow:0 2px 12px var(--c-sem-glow);}
.ap-svc-badge[data-svc="Diseño Gráfico"] {background:var(--c-diseno);box-shadow:0 2px 12px var(--c-diseno-glow);}
.ap-svc-badge[data-svc="Inteligencia Artificial"]{background:var(--c-ia);box-shadow:0 2px 12px var(--c-ia-glow);}

/* Logo */
.ap-logo{position:absolute;bottom:14px;left:14px;z-index:6;width:52px;height:52px;background:white;border-radius:13px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.18);}
.ap-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.ap-logo--init{padding:8px;}
.ap-logo .ap-initials{font-family:var(--ap-display);font-size:12px;font-weight:800;color:#0a0a14;line-height:1;text-align:center;}

/* Client name + localització */
.ap-client-name{position:absolute;bottom:20px;right:14px;z-index:6;font-family:var(--ap-display);font-size:14px;font-weight:700;color:var(--ap-white);text-align:right;text-shadow:0 2px 12px rgba(0,0,0,.8);max-width:58%;line-height:1.2;}
.ap-loc-badge{position:absolute;bottom:72px;right:14px;z-index:6;font-size:10px;font-weight:600;color:rgba(255,255,255,.78);background:rgba(8,8,16,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);padding:3px 10px;border-radius:100px;}

/* BODY CARD — més minimalista */
.ap-body{padding:16px 20px 18px;}
.ap-title{font-family:var(--ap-display);font-size:15px;font-weight:700;color:var(--ap-white);margin-bottom:5px;line-height:1.3;}
.ap-desc{font-size:12.5px;color:var(--ap-muted2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;}
.ap-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);}
.ap-cta{font-size:12px;font-weight:600;color:var(--ap-soft);display:flex;align-items:center;gap:5px;transition:gap .2s;}
.ap-card:hover .ap-cta{gap:9px;}
.ap-cta svg{width:13px;height:13px;}
.ap-year{font-size:12px;color:rgba(255,255,255,.18);}

/* ─── MODAL ─── */
.ap-overlay{display:none;position:fixed;inset:0;background:rgba(4,4,12,.94);backdrop-filter:blur(16px);z-index:999999;align-items:center;justify-content:center;padding:20px;}
.ap-overlay.ap-open{display:flex;animation:apFade .22s ease;}
@keyframes apFade{from{opacity:0}to{opacity:1}}
.ap-modal{width:min(1180px,96vw);height:min(720px,90vh);background:#0b0b1e;border:1px solid rgba(255,255,255,.09);border-radius:26px;display:grid;grid-template-columns:420px 1fr;overflow:hidden;animation:apPop .38s cubic-bezier(.34,1.56,.64,1);}
@keyframes apPop{from{opacity:0;transform:scale(.92) translateY(26px)}to{opacity:1;transform:scale(1) translateY(0)}}

.ap-m-info{display:flex;flex-direction:column;padding:38px 36px 34px;overflow-y:auto;border-right:1px solid rgba(255,255,255,.06);}
.ap-m-info::-webkit-scrollbar{width:3px;}
.ap-m-info::-webkit-scrollbar-thumb{background:rgba(26,110,245,.35);border-radius:3px;}

.ap-m-top{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.ap-m-logo{width:64px;height:64px;background:white;border-radius:15px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;box-shadow:0 6px 26px rgba(0,0,0,.45);}
.ap-m-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.ap-m-logo .ap-initials{font-family:var(--ap-display);font-size:17px;font-weight:800;color:#0a0a14;padding:6px;}
.ap-m-client{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ap-soft);margin-bottom:7px;}

/* Tag de servei en modal — color per categoria */
.ap-m-svc-tag{display:inline-flex;align-items:center;gap:5px;color:white;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;border-radius:100px;}
.ap-m-svc-tag[data-svc="Redes Sociales"] {background:var(--c-redes);box-shadow:0 2px 14px var(--c-redes-glow);}
.ap-m-svc-tag[data-svc="Web"]            {background:var(--c-web);box-shadow:0 2px 14px var(--c-web-glow);}
.ap-m-svc-tag[data-svc="SEO"]            {background:var(--c-seo);box-shadow:0 2px 14px var(--c-seo-glow);}
.ap-m-svc-tag[data-svc="SEM"]            {background:var(--c-sem);box-shadow:0 2px 14px var(--c-sem-glow);}
.ap-m-svc-tag[data-svc="Diseño Gráfico"] {background:var(--c-diseno);box-shadow:0 2px 14px var(--c-diseno-glow);}
.ap-m-svc-tag[data-svc="Inteligencia Artificial"]{background:var(--c-ia);box-shadow:0 2px 14px var(--c-ia-glow);}

.ap-m-title{font-family:var(--ap-display);font-size:clamp(18px,2.2vw,25px);font-weight:800;color:var(--ap-white);line-height:1.18;margin-bottom:12px;}
.ap-m-desc{font-size:14px;color:var(--ap-muted2);line-height:1.74;margin-bottom:22px;flex:1;}
.ap-m-location{margin-bottom:18px;}
.ap-m-loc{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ap-muted2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);padding:5px 14px;border-radius:100px;}
.ap-m-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.26);margin-bottom:8px;}
.ap-m-svcs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;}
.ap-m-svc-item{font-size:11px;font-weight:600;padding:5px 13px;border-radius:100px;}
/* Colors dels tags de serveis al modal */
.ap-m-svc-item[data-svc="Redes Sociales"]{background:var(--c-redes-bg);border:1px solid var(--c-redes);color:#f472b6;}
.ap-m-svc-item[data-svc="Web"]           {background:var(--c-web-bg);border:1px solid var(--c-web);color:#c4b5fd;}
.ap-m-svc-item[data-svc="SEO"]           {background:var(--c-seo-bg);border:1px solid var(--c-seo);color:#6ee7b7;}
.ap-m-svc-item[data-svc="SEM"]           {background:var(--c-sem-bg);border:1px solid var(--c-sem);color:#fcd34d;}
.ap-m-svc-item[data-svc="Diseño Gráfico"]{background:var(--c-diseno-bg);border:1px solid var(--c-diseno);color:#67e8f9;}
.ap-m-svc-item[data-svc="Inteligencia Artificial"]{background:var(--c-ia-bg);border:1px solid var(--c-ia);color:#c4b5fd;}

.ap-m-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));border:1px solid rgba(255,255,255,.07);border-radius:15px;overflow:hidden;background:rgba(255,255,255,.02);margin-top:auto;}
.ap-m-stat{padding:14px 10px;text-align:center;border-right:1px solid rgba(255,255,255,.06);}
.ap-m-stat:last-child{border-right:none;}
.ap-m-val{font-family:var(--ap-display);font-size:21px;font-weight:800;background:linear-gradient(120deg,#1a6ef5,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:4px;}
.ap-m-lbl{font-size:10px;color:var(--ap-muted);font-weight:500;text-transform:uppercase;letter-spacing:.07em;}

/* Relacionats */
.ap-m-related{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.ap-rel-card{display:grid;grid-template-columns:68px 1fr;gap:10px;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:9px 12px;cursor:pointer;transition:all .22s;}
.ap-rel-card:hover{background:rgba(26,110,245,.1);border-color:rgba(26,110,245,.3);transform:translateX(4px);}
.ap-rel-thumb{width:68px;height:44px;border-radius:7px;overflow:hidden;background:#1a1a2e;display:flex;align-items:center;justify-content:center;}
.ap-rel-thumb img{width:100%;height:100%;object-fit:cover;}
.ap-rel-vid-icon,.ap-rel-placeholder{font-size:18px;color:rgba(255,255,255,.4);}
.ap-rel-svc{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:100px;margin-bottom:3px;display:inline-block;color:white;}
.ap-rel-svc[data-svc="Redes Sociales"]{background:var(--c-redes);}
.ap-rel-svc[data-svc="Web"]{background:var(--c-web);}
.ap-rel-svc[data-svc="SEO"]{background:var(--c-seo);}
.ap-rel-svc[data-svc="SEM"]{background:var(--c-sem);}
.ap-rel-svc[data-svc="Diseño Gráfico"]{background:var(--c-diseno);}
.ap-rel-svc[data-svc="Inteligencia Artificial"]{background:var(--c-ia);}
.ap-rel-title{font-family:var(--ap-display);font-size:12px;font-weight:700;color:var(--ap-white);line-height:1.3;}

/* PANEL MEDIA */
.ap-m-media{position:relative;overflow:hidden;background:#05050e;display:flex;flex-direction:column;}
.ap-m-main-media,.ap-m-media>img,.ap-m-media>video{flex:1;width:100%;object-fit:cover;display:block;min-height:0;}
.ap-m-placeholder{flex:1;display:flex;align-items:center;justify-content:center;font-size:100px;background:linear-gradient(135deg,#1a1a2e,#2d1b69);}
.ap-m-close{position:absolute;top:14px;right:14px;z-index:20;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.68);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:17px;color:white;cursor:pointer;transition:background .2s,border-color .2s;}
.ap-m-close:hover{background:rgba(26,110,245,.55);border-color:#1a6ef5;}

/* CARRUSEL */
.ap-m-carousel-wrap{position:relative;flex-shrink:0;height:200px;border-top:1px solid rgba(255,255,255,.08);background:#000;overflow:hidden;}
.ap-m-carousel{width:100%;height:100%;overflow:hidden;}
.ap-m-carousel-track{display:flex;height:100%;transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform;}
.ap-car-slide{flex:0 0 100%;height:100%;position:relative;}
.ap-car-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.ap-car-slide::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.18) 0%,transparent 15%,transparent 85%,rgba(0,0,0,.18) 100%);pointer-events:none;z-index:1;}
.ap-car-arrow{position:absolute;top:50%;z-index:10;transform:translateY(-50%);width:44px;height:44px;background:rgba(13,13,28,.7);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:50%;color:white;font-size:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .22s,border-color .22s,transform .22s;box-shadow:0 4px 20px rgba(0,0,0,.4);}
.ap-car-arrow:hover{background:var(--ap-blue);border-color:var(--ap-blue);transform:translateY(-50%) scale(1.08);box-shadow:0 0 20px var(--ap-glow);}
.ap-car-arrow--prev{left:16px;}.ap-car-arrow--next{right:16px;}
.ap-car-arrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ap-car-counter{position:absolute;top:12px;right:16px;z-index:10;font-family:var(--ap-display);font-size:12px;font-weight:700;color:rgba(255,255,255,.8);background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);padding:4px 12px;border-radius:100px;letter-spacing:.04em;}
.ap-m-carousel-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:10;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);padding:6px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.08);}
.ap-car-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);border:none;cursor:pointer;padding:0;transition:all .25s;}
.ap-car-dot.on{background:white;transform:scale(1.25);box-shadow:0 0 6px rgba(255,255,255,.5);}
.ap-car-label{position:absolute;top:12px;left:16px;z-index:10;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);background:rgba(0,0,0,.45);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);padding:4px 10px;border-radius:100px;}

/* RESPONSIVE */
@media(max-width:860px){
  .ap-modal{grid-template-columns:1fr;grid-template-rows:44vh 1fr;width:100vw;height:100dvh;border-radius:0;}
  .ap-m-media{order:0;}.ap-m-info{order:1;border-right:none;border-top:1px solid rgba(255,255,255,.06);padding:22px 18px 28px;}
}
@media(max-width:1024px){.ap-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.ap-grid{grid-template-columns:1fr;}}

/* ── Ratio per servei ── */
.ap-media[data-svc="Redes Sociales"]          { aspect-ratio: 9/16; }
.ap-media[data-svc="Web"]                     { aspect-ratio: 16/9; }
.ap-media[data-svc="SEO"]                     { aspect-ratio: 4/3;  }
.ap-media[data-svc="SEM"]                     { aspect-ratio: 4/3;  }
.ap-media[data-svc="Diseño Gráfico"]          { aspect-ratio: 4/3;  }
.ap-media[data-svc="Inteligencia Artificial"] { aspect-ratio: 4/3;  }