/* =====================================================================
   PÁGINA «TODOS NUESTROS PROYECTOS» (proyectos.html · v15)
   Solo la carga proyectos.html, encima de css/estilos.css (variables,
   menú, .etiqueta, .btn, .py-cta y pie). No afecta a index.html.
   Animaciones solo con transform/opacity y respetan movimiento reducido.
   ===================================================================== */
.pp-pagina{background:var(--negro)}
.pp-pagina .nav{background:linear-gradient(180deg,rgba(5,11,21,.88),rgba(5,11,21,.55) 60%,rgba(5,11,21,0));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.pp{position:relative;isolation:isolate;overflow:hidden;padding:clamp(120px,17vh,190px) var(--pad) clamp(90px,13vh,170px)}
.pp-fondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pp-halo{position:absolute;left:50%;top:-18vh;width:min(1400px,120vw);aspect-ratio:2/1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(40,175,164,.20),rgba(36,95,155,.10) 55%,transparent);animation:pp-respira 9s ease-in-out infinite}
.pp-halo--b{top:auto;bottom:-25vh;width:min(1100px,110vw);background:radial-gradient(closest-side,rgba(36,95,155,.18),transparent);animation-delay:-4.5s}
.pp-rejilla{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 45% at 50% 8%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 45% at 50% 8%,#000,transparent 75%)}
@keyframes pp-respira{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}

/* cabecera */
.pp-cab{max-width:900px;margin:0 auto clamp(56px,8vh,110px);text-align:center;display:flex;flex-direction:column;align-items:center}
.pp-volver{display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(26px,4vh,44px);padding:11px 20px;border-radius:99px;font-size:15px;font-weight:600;color:#dff3f6;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(150,235,230,.28),0 10px 30px -12px rgba(40,175,164,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .25s,box-shadow .25s,transform .25s}
.pp-volver:hover{background:rgba(40,175,164,.16);box-shadow:inset 0 0 0 1px rgba(150,235,230,.55),0 14px 36px -12px rgba(40,175,164,.7);transform:translateX(-3px)}
.pp-volver:focus-visible{outline:2px solid var(--turquesa-claro);outline-offset:3px}
.pp-h1{margin:0;font-size:clamp(42px,5.6vw,150px);line-height:.98;font-weight:800;letter-spacing:-.045em;text-wrap:balance;text-shadow:0 10px 60px rgba(0,0,0,.55)}
.pp-entradilla{margin:24px 0 0;max-width:34em;font-size:clamp(16px,1.2vw,26px);line-height:1.55;color:var(--texto-suave)}

/* rejilla: 2 grandes + 3 + 2 */
.pp-rejilla-tarjetas{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,2vw,40px);max-width:1560px;margin:0 auto}
.pp-tarjeta{grid-column:span 2;position:relative;display:flex;flex-direction:column;border-radius:26px;padding:clamp(10px,.8vw,16px);
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 70px -40px rgba(0,0,0,.9);
  transition:box-shadow .45s}
.pp-tarjeta:nth-child(1),.pp-tarjeta:nth-child(2),.pp-tarjeta:nth-child(6),.pp-tarjeta:nth-child(7){grid-column:span 3}
.pp-tarjeta::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(80% 60% at 50% 0%,rgba(40,175,164,.18),transparent 70%)}
.pp-tarjeta:hover{box-shadow:inset 0 0 0 1px rgba(95,227,214,.38),0 40px 80px -36px rgba(40,175,164,.5)}
.pp-tarjeta:hover::before{opacity:1}
.pp-marco{position:relative;border-radius:18px;overflow:hidden;background:#07101c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pp-barra{display:flex;gap:6px;padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.pp-barra i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.pp-barra i:first-child{background:rgba(95,227,214,.7)}
.pp-foto{position:relative;aspect-ratio:16/10;overflow:hidden}
.pp-foto img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.01);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pp-foto::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(5,11,21,.55))}
.pp-tarjeta:hover .pp-foto img{transform:scale(1.06)}
.pp-info{position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(20px,1.8vw,34px) clamp(12px,1.2vw,22px) clamp(12px,1vw,18px)}
.pp-num{position:absolute;right:clamp(12px,1.2vw,22px);top:clamp(18px,1.6vw,30px);font-size:clamp(13px,.85vw,18px);font-weight:700;letter-spacing:.2em;color:rgba(95,227,214,.55)}
.pp-linea{margin:0 0 8px;font-size:clamp(12px,.8vw,16px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--turquesa-claro)}
.pp-tit{margin:0 0 10px;font-size:clamp(22px,1.7vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.pp-txt{margin:0 0 clamp(20px,1.8vw,30px);color:var(--texto-suave);font-size:clamp(15px,1vw,21px);line-height:1.55;flex:1}
.pp-btn{gap:10px;padding:14px 22px;font-size:clamp(15px,.95vw,20px)}
.pp-btn span{display:inline-block;transition:transform .3s}
.pp-btn:hover span{transform:translate(2px,-2px)}

/* cierre */
.pp-cierre{max-width:820px;margin:clamp(80px,12vh,160px) auto 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.pp-cierre__h{margin:0;font-size:clamp(32px,3.6vw,100px);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.pp-cierre p{margin:16px 0 clamp(28px,4vh,44px);color:var(--texto-suave);font-size:clamp(16px,1.15vw,24px)}
.pp-cta:hover .py-cta__flecha{transform:translateX(4px)}

/* entradas: cabecera al cargar, tarjetas al aparecer (solo si hay JS) */
.pp-entra{animation:sube .9s calc(.15s + var(--i) * .1s) cubic-bezier(.2,.8,.2,1) backwards}
.js .pp-anim{opacity:0;transform:translateY(46px) scale(.98);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1),box-shadow .45s;transition-delay:calc(var(--i,0) % 3 * .1s)}
.js .pp-anim.visto{opacity:1;transform:none}

@media (max-width:1100px){
  .pp-rejilla-tarjetas{grid-template-columns:repeat(2,1fr)}
  .pp-tarjeta,.pp-tarjeta:nth-child(n){grid-column:span 1}
  .pp-tarjeta:nth-child(7){grid-column:1 / -1;justify-self:center;width:calc(50% - clamp(18px,2vw,40px) / 2)}
}
@media (max-width:700px){
  .pp{padding-top:112px}
  .pp-rejilla-tarjetas{grid-template-columns:1fr;gap:20px}
  .pp-tarjeta:nth-child(7){width:auto;justify-self:stretch}
  .pp-tarjeta{border-radius:22px}
  .pp-volver{font-size:14px;padding:10px 18px}
  .pp-h1{font-size:clamp(38px,11vw,56px)}
  .pp-btn{width:100%;justify-content:center}
  .js .pp-anim{transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){
  .pp-halo,.pp-entra{animation:none!important}
  .js .pp-anim{opacity:1!important;transform:none!important;transition:none!important}
  .pp-foto img,.pp-volver,.pp-btn span{transition:none!important}
}