/* ===== /proyectos/ · efecto propio «El expediente de obra»: cada obra es una ficha; al cambiar de foto, la anterior se
   va en lamas que giran como una persiana vertical y deja ver la nueva ===== */
.exp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.4rem,3.4vw,3rem);align-items:center;margin-top:clamp(2rem,4vw,3rem);padding:clamp(1rem,2vw,1.4rem);border-radius:22px;background:var(--grafito);border:1px solid var(--linea)}
.exp+.exp{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.exp:nth-of-type(even) .exp-ver{order:2}
.exp-ver{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#111;perspective:1200px}
.exp-ver>img,.exp-ver>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.exp-lamas{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.exp-lamas.on{visibility:visible}
.exp-lamas i{position:absolute;top:0;bottom:0;left:calc(var(--k) * 100% / 7);width:calc(100% / 7 + 1px);overflow:hidden;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.6,.05,.3,1);transition-delay:calc(var(--k) * 55ms)}
.exp-lamas i::after{content:"";position:absolute;inset:0;background:#05070a;opacity:0;transition:opacity .7s;transition-delay:inherit}
.exp-lamas img{position:absolute;top:0;height:100%;width:var(--w,700px);max-width:none;left:calc(var(--k) * var(--w,700px) / -7);object-fit:cover}
.exp-lamas.gira i{transform:rotateY(88deg)}
.exp-lamas.gira i::after{opacity:.55}
.exp-n{position:absolute;right:12px;top:12px;z-index:2;padding:.42rem .65rem;border-radius:8px;background:rgba(10,12,15,.78);font:700 .66rem/1 var(--f-ui);letter-spacing:.16em;color:var(--texto-2)}
.exp-ver .tag{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:8px;background:rgba(10,12,15,.78);font:700 .66rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#9BE4FF}
.exp-ver .tag i{width:7px;height:7px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px rgba(255,77,61,.25)}
.exp-k{font:600 .7rem/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--naranja)}
.exp-t{margin-top:.6rem;font:900 clamp(1.7rem,2.8vw,2.5rem)/.98 var(--f-display);text-transform:uppercase}
.exp-d{margin-top:.8rem;color:var(--texto-2);max-width:52ch}
.exp dl{display:grid;gap:.5rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--linea);font-size:.92rem}
.exp dl div{display:flex;justify-content:space-between;gap:1rem}
.exp dt{color:var(--texto-3)}
.exp dd{color:var(--texto);text-align:right}
.exp-th{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.1rem}
.exp-th button{position:relative;width:64px;height:64px;padding:0;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#111;cursor:pointer;opacity:.6;transition:opacity .3s,border-color .3s}
.exp-th button img{width:100%;height:100%;object-fit:cover;display:block}
.exp-th button[aria-selected="true"]{opacity:1;border-color:var(--naranja)}
.exp-th button:hover{opacity:1}
.exp-th button:focus-visible{outline:2px solid var(--cielo);outline-offset:2px}

/* --- telas de la obra (idea de Edgar, 2026-10-21): la muestra de cerca, su ficha y dónde quedó instalada --- */
.exp-telas{grid-column:1/-1;order:3;padding-top:clamp(1.1rem,2vw,1.4rem);border-top:1px solid var(--linea)}
.exp-telas-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem}
.exp-telas-nota{font-size:.82rem;color:var(--texto-3)}
.exp-telas-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem);margin-top:1rem}
.tela{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(.9rem,1.6vw,1.3rem);align-items:center;margin:0;padding:clamp(.75rem,1.3vw,.95rem);border-radius:16px;background:var(--grafito-2);border:1px solid var(--linea)}
.tela-m{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;border-radius:12px;overflow:hidden;background:#111;cursor:zoom-in}
.tela-m img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:var(--zx,50%) var(--zy,50%);transition:transform .45s var(--ease)}
.tela-m[aria-pressed="true"]{cursor:zoom-out}
.tela-m[aria-pressed="true"] img{transform:scale(2.6)}
.tela-m:focus-visible{outline:2px solid var(--cielo);outline-offset:3px}
.tela-z{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .62rem;border-radius:8px;background:rgba(10,12,15,.78);font:700 .62rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--texto);transition:opacity .3s}
.tela-z svg{width:14px;height:14px}
.tela-m[aria-pressed="true"] .tela-z{opacity:0}
.tela-l{font:600 .68rem/1.2 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:#9BE4FF}
.tela-c{margin-top:.35rem;font:900 clamp(1.5rem,2.2vw,2rem)/.95 var(--f-display);text-transform:uppercase}
.exp .tela dl{gap:.42rem;margin-top:.8rem;padding-top:.8rem;font-size:.84rem}
.tela-ver{display:inline-flex;align-items:center;gap:.5rem;margin-top:.85rem;padding:.45rem 0;border:0;background:none;font:700 .72rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);cursor:pointer}
.tela-ver .arr{width:16px;height:16px}
.tela-ver:hover .arr{transform:translateX(4px)}
.tela-ver:focus-visible{outline:2px solid var(--cielo);outline-offset:3px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.tela-m:hover img{transform:scale(2.6)}.tela-m:hover .tela-z{opacity:0}}
/* obra con una sola tela: la tarjeta va a todo lo ancho y la ficha en dos columnas */
.exp-telas-g--1{grid-template-columns:1fr}
.exp-telas-g--1 .tela{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(1.2rem,2.4vw,2rem)}
@media (min-width:1000px){.exp-telas-g--1 .tela dl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.2rem,3vw,2.4rem)}}

/* --- cotiza tu proyecto --- */
.cot-pasos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:1.6rem;counter-reset:cp}
.cot-pasos li{padding:1.1rem 1.15rem;border-radius:14px;background:var(--grafito);border:1px solid var(--linea)}
.cot-pasos li::before{counter-increment:cp;content:"0" counter(cp);display:block;font:600 .74rem/1 var(--f-ui);letter-spacing:.14em;color:var(--naranja)}
.cot-pasos b{display:block;margin-top:.6rem;font:800 1.15rem/1.05 var(--f-display);text-transform:uppercase}
.cot-pasos span{display:block;margin-top:.35rem;color:var(--texto-2);font-size:.92rem}

@media (max-width:900px){
  .exp{grid-template-columns:1fr}
  .exp:nth-of-type(even) .exp-ver{order:0}
  .exp-telas-g{grid-template-columns:1fr}
  .cot-pasos{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){.cot-pasos{grid-template-columns:1fr}.exp-th button{width:56px;height:56px}}
@media (min-width:901px) and (max-width:1100px),(max-width:680px){.tela{grid-template-columns:1fr}.tela-m{aspect-ratio:16/10}}
@media (max-width:680px){.exp-telas-g--1 .tela{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.exp-lamas{display:none}}