/* ============================ 06 · PROYECTOS ============================ */
#proyectos .pr-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,60px)}
#proyectos .pr-cab .cab{margin-bottom:0}
#proyectos .pr-filtros{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line)}
#proyectos .pr-filtros button{min-height:40px;padding:0 18px;border-radius:999px;font-size:.82rem;color:var(--mist);transition:color .4s var(--ease),background-color .5s var(--ease)}
#proyectos .pr-filtros button[aria-pressed="true"]{background:var(--white);color:var(--void);font-weight:500}
#proyectos .pr-filtros button:not([aria-pressed="true"]):hover{color:var(--white)}

#proyectos .pr-rejilla{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
#proyectos .pr-item{grid-column:span 4;transition:opacity .6s var(--ease)}
#proyectos .pr-item.medio{grid-column:span 6}
@media (max-width:1100px) and (min-width:861px){ #proyectos .pr-item{grid-column:span 6} }
#proyectos .pr-item.grande{grid-column:span 12}
#proyectos .pr-item.oculto{display:none}

#proyectos .pr-tarj{position:relative;height:100%;display:flex;flex-direction:column;border-radius:var(--r-xl);padding:clamp(22px,3vw,34px);background:linear-gradient(170deg,var(--graphite),var(--carbon));border:1px solid var(--line);overflow:hidden;outline:none;
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .8s var(--ease),border-color .6s var(--ease),box-shadow .8s var(--ease)}
#proyectos .pr-tarj:hover,#proyectos .pr-tarj:focus-within{--ty:-8px;border-color:var(--line-2);box-shadow:0 60px 110px -60px rgba(0,0,0,.95)}
#proyectos .pr-item.grande .pr-tarj{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}

/* dispositivo */
#proyectos .pr-disp{position:relative;perspective:1400px}
#proyectos .pr-disp-in{transform:rotateY(-9deg) rotateX(4deg);transform-style:preserve-3d;transition:transform 1.2s var(--ease)}
#proyectos .pr-tarj:hover .pr-disp-in{transform:rotateY(-3deg) rotateX(1deg) translateZ(20px)}
#proyectos .pr-pant{position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size}

/* mini sitio con colores y titular reales */
#proyectos .pr-mini{font-size:1.7cqw;position:absolute;inset:0;display:flex;flex-direction:column;background:var(--mf);color:var(--mt)}
#proyectos .pr-mini-nav{display:flex;align-items:center;gap:.9em;padding:.9em 1.4em;position:relative;z-index:2}
#proyectos .pr-mini-nav b{font-family:var(--display);font-size:1.05em;font-weight:700;color:var(--ma);margin-right:auto;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
#proyectos .pr-mini-nav s{width:2.2em;height:.34em;border-radius:.2em;background:currentColor;opacity:.3;text-decoration:none}
#proyectos .pr-mini-nav em{font-style:normal;font-size:.8em;font-weight:700;padding:.35em .9em;border-radius:1em;background:var(--ma);color:var(--mf)}
#proyectos .pr-mini-cuerpo{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:1.2em;padding:.6em 1.4em 1.4em;min-height:0}
#proyectos .pr-mini-cuerpo.sin-img{grid-template-columns:1fr}
#proyectos .pr-mini-txt{align-self:center}
#proyectos .pr-mini-txt h4{font-family:var(--display);font-size:2em;line-height:1.05;letter-spacing:-.03em;color:inherit;font-weight:700;max-width:14ch}
#proyectos .pr-mini-txt i{display:block;width:5em;height:.38em;border-radius:.2em;background:var(--ma);margin-top:1em}
#proyectos .pr-mini-txt u{display:block;height:.34em;width:80%;border-radius:.2em;background:currentColor;opacity:.2;margin-top:.7em;text-decoration:none}
#proyectos .pr-mini-img{border-radius:.7em;overflow:hidden;min-height:0;position:relative}
#proyectos .pr-mini-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s var(--ease)}
#proyectos .pr-tarj:hover .pr-mini-img img{transform:scale(1.05)}

/* información */
#proyectos .pr-info{margin-top:24px;display:flex;flex-direction:column;flex:1}
#proyectos .pr-item.grande .pr-info{margin-top:0}
#proyectos .pr-chips{display:flex;flex-wrap:wrap;gap:8px}
#proyectos .pr-info h3{font-size:clamp(1.2rem,2vw,1.55rem);margin-top:16px}
#proyectos .pr-item.grande .pr-info h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
#proyectos .pr-giro{font-size:.84rem;color:var(--mist-2);margin-top:6px}
#proyectos .pr-desc{font-size:.92rem;color:var(--mist);margin-top:14px;line-height:1.7}
#proyectos .pr-etq-in{display:flex;flex-wrap:wrap;gap:6px}
#proyectos .pr-etq{margin-top:16px}
#proyectos .pr-etq span{font-size:.7rem;color:var(--mist-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
#proyectos .pr-accion{margin-top:auto;padding-top:22px}
#proyectos .pr-accion .btn svg{transition:transform .5s var(--ease)}
#proyectos .pr-accion .btn:hover svg{transform:translate(2px,-2px)}

/* en escritorio la info extra aparece al hover como capa de vidrio */
@media (hover:hover) and (min-width:861px){
  #proyectos .pr-item:not(.grande) .pr-desc,#proyectos .pr-item:not(.grande) .pr-etq{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .35s var(--ease),opacity .25s var(--ease),margin-top .35s var(--ease)}
  #proyectos .pr-item:not(.grande) .pr-desc>*,#proyectos .pr-item:not(.grande) .pr-etq>*{min-height:0;overflow:hidden}
  #proyectos .pr-item:not(.grande) .pr-tarj:hover .pr-desc,#proyectos .pr-item:not(.grande) .pr-tarj:focus-within .pr-desc{grid-template-rows:1fr;opacity:1;margin-top:14px}
  #proyectos .pr-item:not(.grande) .pr-tarj:hover .pr-etq,#proyectos .pr-item:not(.grande) .pr-tarj:focus-within .pr-etq{grid-template-rows:1fr;opacity:1;margin-top:16px}
}

#proyectos .pr-desliza{display:none}
#proyectos .pr-cta{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-top:36px;padding:22px 26px;border-radius:var(--r-lg);border:1px solid var(--line)}
#proyectos .pr-cta p{color:var(--mist);font-size:.95rem}

/* celular y tablet: carrusel horizontal propio (el scroll lateral vive dentro de la rejilla, no en la página) */
@media (max-width:860px){
  #proyectos .pr-rejilla{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 18px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  #proyectos .pr-rejilla::-webkit-scrollbar{display:none}
  #proyectos .pr-item,#proyectos .pr-item.grande{flex:0 0 min(84%,420px);scroll-snap-align:start}
  .js #proyectos .pr-item.rv{opacity:1;transform:none}
  #proyectos .pr-item.grande .pr-tarj{display:flex;align-items:stretch}
  #proyectos .pr-disp-in,#proyectos .pr-tarj:hover .pr-disp-in{transform:none}
  #proyectos .pr-tarj{transform:none!important;padding:18px}
  #proyectos .pr-item.grande .pr-info,#proyectos .pr-info{margin-top:18px}
  #proyectos .pr-info h3,#proyectos .pr-item.grande .pr-info h3{font-size:1.2rem;margin-top:12px}
  #proyectos .pr-desc{font-size:.86rem;margin-top:10px}
  #proyectos .pr-etq{display:none}
  #proyectos .pr-desliza{display:block;font-size:.76rem;color:var(--mist-2);letter-spacing:.04em;margin-top:2px}
  #proyectos .pr-desliza span{display:inline-block;animation:pr-empuja 1.8s var(--ease) infinite}
  #proyectos .pr-cta{margin-top:26px}
}
@keyframes pr-empuja{0%,100%{transform:none}50%{transform:translateX(5px)}}
@media (max-width:520px){
  #proyectos .pr-filtros{width:100%}
  #proyectos .pr-filtros button{flex:1;padding:0 8px}
  #proyectos .pr-mini{font-size:2.3cqw}
  #proyectos .pr-mini-cuerpo{grid-template-columns:1fr 1fr}
  #proyectos .pr-cta{padding:22px 20px}
  #proyectos .pr-cta .btn{width:100%}
}
/* (movimiento reducido: desactivado a pedido del dueño) */

/* ================= v8 · proyecto destacado y tarjetas ================= */
#proyectos .pr-destacado{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;
  margin-bottom:clamp(64px,8vw,110px)}
#proyectos .pd-equipo{position:relative;perspective:1800px}
#proyectos .pd-ventana{position:relative;border-radius:16px;overflow:hidden;background:#0A0E18;border:1px solid var(--line-2);
  box-shadow:0 70px 120px -60px rgba(0,0,0,.95),0 0 80px -40px rgba(46,123,255,.55),inset 0 1px 0 rgba(255,255,255,.06);
  transform:rotateY(-6deg) rotateX(3deg);transform-origin:60% 50%;transition:transform 1.4s var(--ease)}
#proyectos .pr-destacado:hover .pd-ventana{transform:rotateY(-2deg) rotateX(1deg) translateY(-4px)}
#proyectos .pd-barra{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(4,7,14,.9);border-bottom:1px solid var(--line)}
#proyectos .pd-barra i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
#proyectos .pd-barra span{margin-left:10px;flex:1;min-width:0;padding:4px 12px;border-radius:7px;background:rgba(255,255,255,.06);font-size:.7rem;color:var(--mist);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#proyectos .pd-pant{position:relative;aspect-ratio:16/10;overflow:hidden;background:#07090F}
#proyectos .pd-pant video{width:100%;height:100%;object-fit:cover;display:block}
/* recorrido lento por la captura real del sitio */
#proyectos .pd-recorre{position:absolute;left:0;top:0;width:100%;height:auto;animation:pd-recorre 16s cubic-bezier(.45,0,.2,1) infinite alternate}
@keyframes pd-recorre{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(calc(-100% + 62.5cqw))}}
#proyectos .pd-pant{container-type:inline-size}
#proyectos .pd-reflejo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 44%,transparent 58%)}
#proyectos .pd-sombra{height:40px;margin:-6px 8% 0;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.85),transparent 70%),radial-gradient(60% 80% at 50% 0%,rgba(46,123,255,.3),transparent 70%);filter:blur(8px)}

#proyectos .pd-info h3{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-top:18px}
#proyectos .pd-titular{font-family:var(--display);font-size:1.02rem;color:var(--silver);margin-top:10px;letter-spacing:-.01em}
#proyectos .pd-desc{color:var(--mist);margin-top:16px;font-size:.98rem;line-height:1.7;max-width:46ch}
#proyectos .pd-etq{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
#proyectos .pd-etq li{font-size:.72rem;color:var(--mist);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px}
#proyectos .pd-accion,#proyectos .pr-accion{display:flex;flex-wrap:wrap;gap:10px}
#proyectos .pd-accion{margin-top:28px}

#proyectos .pr-subt{font-size:1.05rem;color:var(--silver);font-weight:500;letter-spacing:.02em}
#proyectos .pr-cab{align-items:center}
/* tarjetas: hover lento y elegante */
#proyectos .pr-tarj{transition:transform 1s var(--ease),border-color .8s var(--ease),box-shadow 1s var(--ease)}
#proyectos .pr-tarj:hover{box-shadow:0 60px 110px -60px rgba(0,0,0,.95),0 0 60px -30px rgba(46,123,255,.35)}
#proyectos .pr-giro{color:var(--accent);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}

@media (max-width:980px){
  #proyectos .pr-destacado{grid-template-columns:1fr}
  #proyectos .pd-ventana,#proyectos .pr-destacado:hover .pd-ventana{transform:none}
}
@media (max-width:560px){
  #proyectos .pd-accion .btn,#proyectos .pr-accion .btn{flex:1 1 100%}
  #proyectos .pd-barra span{font-size:.62rem}
}
/* (movimiento reducido: desactivado a pedido del dueño) */

/* v9: celular con la grabación real del sitio, encima del navegador */
#proyectos .pd-cel{position:absolute;right:-3%;bottom:-9%;width:clamp(96px,23%,190px);z-index:3;padding:6px;border-radius:26px;
  background:linear-gradient(160deg,#30343C,#0C0D10 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 60px -24px rgba(0,0,0,.95),0 0 50px -14px rgba(46,123,255,.6);
  transition:transform 1s var(--ease)}
#proyectos .pd-cel-pant{position:relative;aspect-ratio:432/848;border-radius:20px;overflow:hidden;background:#07122A}
#proyectos .pd-cel-pant::before{content:"";position:absolute;left:50%;top:6px;width:30%;height:9px;border-radius:9px;background:#000;transform:translateX(-50%);z-index:2}
#proyectos .pd-cel video{width:100%;height:100%;object-fit:cover;display:block}
/* el teléfono siempre derecho: sin giro ni perspectiva accidental */
#proyectos .pr-destacado:hover .pd-cel{transform:translateY(-8px)}
@media (max-width:560px){
  #proyectos .pd-cel{right:-2%;bottom:-12%;width:30%;padding:4px;border-radius:18px}
  #proyectos .pd-cel-pant{border-radius:14px}
  #proyectos .pd-cel-pant::before{height:6px;top:4px}
}

/* ---------- proyecto con prioridad visual (MR. TEMPO) ---------- */
#proyectos .pr-estrella .pr-tarj{position:relative;border-color:rgba(198,161,91,.35);
  box-shadow:0 60px 120px -70px rgba(0,0,0,.95),0 0 90px -40px rgba(198,161,91,.55)}
#proyectos .pr-estrella .pr-tarj::after{content:;position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);background-size:260% 100%;background-position:0 0;
  animation:pr-estrella 9s var(--ease) infinite}
@keyframes pr-estrella{0%,55%{background-position:0 0}85%,100%{background-position:100% 0}}
#proyectos .pr-estrella .pr-disp{transform:scale(1.02)}
#proyectos .pr-estrella .pr-info h3{letter-spacing:.01em}
@media (hover:hover){ #proyectos .pr-estrella .pr-tarj:hover{box-shadow:0 70px 130px -70px rgba(0,0,0,.95),0 0 110px -30px rgba(198,161,91,.75)} }