/* Portafolio — maquetas y piezas de proyecto */
.proj-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px);}
.proj-num{font:600 13px var(--disp);letter-spacing:.2em;color:var(--orange);margin-bottom:18px;display:block;}
.photo{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line2);aspect-ratio:4/3;background:#0b0a08;}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.photo:hover img{transform:scale(1.05);}
.photo figcaption{position:absolute;left:14px;bottom:12px;font:600 11px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 8px rgba(0,0,0,.7);}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(28px,4vw,48px);}
.mosaic .photo{aspect-ratio:1/1;border-radius:18px;}
.mosaic .photo:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
.prod-status{display:inline-block;margin-left:10px;vertical-align:middle;font:600 10.5px var(--disp);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line2);color:var(--mist);border-radius:999px;padding:3px 9px;}
.prod-status.on{color:var(--orange);border-color:rgba(255,106,26,.5);}
.proto-wrap{margin-top:clamp(40px,6vw,80px);}
.proto-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px;}
.proto-frame iframe{height:min(860px,86vh);}
.proto-open{display:inline-flex;margin-top:14px;font:600 14px var(--disp);color:var(--orange);}
.proto-open:hover{text-decoration:underline;}
.media-row{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center;margin-top:clamp(40px,6vw,80px);}

/* maqueta: tablero de embudo */
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:20px;border:1px solid var(--line2);border-radius:22px;background:rgba(15,13,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.board .col{display:flex;flex-direction:column;gap:9px;min-width:0;}
.board .col h6{font:600 10.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);padding-bottom:8px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board .tk{height:54px;border-radius:10px;border:1px solid var(--line);background:rgba(248,244,237,.04);padding:9px 10px;display:flex;flex-direction:column;gap:7px;}
.board .tk i{display:block;height:6px;border-radius:3px;background:rgba(248,244,237,.28);}
.board .tk i:last-child{width:58%;background:rgba(248,244,237,.14);}
.board .tk.hot{border-color:rgba(255,106,26,.6);background:rgba(255,106,26,.1);animation:tkMove 6s var(--ease) infinite;}
.board .tk.hot i{background:rgba(255,106,26,.7);}
@keyframes tkMove{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.board-cap{display:flex;justify-content:space-between;margin-top:12px;font:500 12px var(--disp);color:var(--mist);}

/* maqueta: línea de tiempo + mensaje de WhatsApp */
.timeline{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;padding:34px 8px 10px;position:relative;margin-bottom:26px;}
.timeline::before{content:"";position:absolute;left:0;right:0;bottom:46px;height:1px;background:var(--line2);}
.timeline .d{position:relative;text-align:center;font:600 12px var(--disp);color:var(--mist);flex:1;}
.timeline .d::before{content:"";display:block;width:11px;height:11px;border-radius:50%;margin:0 auto 12px;background:var(--carbon);border:2px solid var(--line2);position:relative;z-index:1;}
.timeline .d.on{color:var(--paper);}
.timeline .d.on::before{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 6px rgba(255,106,26,.18);animation:ping 2.4s infinite;}
.wa-card{max-width:440px;border:1px solid var(--line2);border-radius:22px;overflow:hidden;background:rgba(15,13,10,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.wa-card .top{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);font:600 14px var(--disp);}
.wa-card .top i{width:30px;height:30px;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:var(--carbon);font:700 13px var(--disp);font-style:normal;}
.wa-card .top small{display:block;font:500 11px var(--body);color:var(--mist);}
.wa-card .body{padding:18px 16px;display:flex;flex-direction:column;gap:9px;}
.bub{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.45;}
.bub.in{background:rgba(248,244,237,.09);border-top-left-radius:4px;}
.bub.out{background:var(--orange);color:var(--carbon);align-self:flex-end;border-top-right-radius:4px;font-weight:600;}
.bub small{display:block;font-size:10.5px;opacity:.6;margin-top:4px;}
.ilus{font:500 12px var(--disp);color:var(--mist);margin-top:14px;display:block;}

/* maqueta: puntaje de anuncio */
.score-card{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;padding:26px;border:1px solid var(--line2);border-radius:22px;background:rgba(15,13,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.gauge{position:relative;width:150px;height:150px;border-radius:50%;
  background:conic-gradient(var(--orange) calc(var(--v,82)*1%),rgba(248,244,237,.1) 0);display:grid;place-items:center;}
.gauge::before{content:"";position:absolute;inset:12px;border-radius:50%;background:#16130e;}
.gauge b{position:relative;font:700 44px var(--disp);letter-spacing:-.04em;}
.gauge b small{font-size:14px;color:var(--mist);font-weight:500;}
.meter{display:flex;flex-direction:column;gap:13px;}
.meter div{display:grid;grid-template-columns:100px 1fr 30px;gap:12px;align-items:center;font:500 13px var(--disp);color:rgba(248,244,237,.8);}
.meter i{height:5px;border-radius:3px;background:rgba(248,244,237,.1);overflow:hidden;position:relative;}
.meter i::after{content:"";position:absolute;inset:0;width:var(--w,50%);background:linear-gradient(90deg,var(--brasa),var(--orange));border-radius:3px;transform-origin:left;animation:fillIn 1.6s var(--ease) both;}
@keyframes fillIn{from{transform:scaleX(0)}}
.meter span{text-align:right;color:var(--mist);font-size:12px;}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.posts img{border-radius:16px;border:1px solid var(--line2);width:100%;height:auto;}

@media(max-width:1040px){
  .proj-head{grid-template-columns:1fr;}
  .media-row{grid-template-columns:1fr;}
  .score-card{grid-template-columns:1fr;justify-items:start;}
  .board{grid-template-columns:repeat(3,1fr);}
  .board .col:nth-child(n+4){display:none;}
}
@media(max-width:620px){
  .mosaic{grid-template-columns:1fr 1fr;}
  .posts{grid-template-columns:1fr 1fr;}
  .meter div{grid-template-columns:84px 1fr 28px;}
}