/* PORTFOLIO + PROYECTOS: efectos (tinte por marca, grilla con ritmo, vista lista, cursor, transición tarjeta→proyecto) */
.f-portfolio main,.f-portfolio footer{position:relative;z-index:1}
.tinte{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(70vw 55vw at 80% 20%,color-mix(in srgb,var(--tc,#0b75f4) 58%,transparent),transparent 65%),radial-gradient(60vw 45vw at 10% 85%,color-mix(in srgb,var(--tc,#0b75f4) 36%,transparent),transparent 65%)}
.tinte.on{opacity:1}
.filtros{align-items:center}.filtros .vista{display:flex;gap:10px;margin-left:auto}
/* tarjetas: número, categoría y título sobre la imagen (sin caja de vidrio repetida) */
.pj .et{left:0;right:0;bottom:0;max-width:none;padding:70px 24px 22px;border:0;border-radius:0;background:linear-gradient(transparent,rgba(0,0,0,.66));backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}
.pj h3{font-size:clamp(26px,3vw,44px)}.pj p{opacity:.92}
.pj .n,.pj .k{position:absolute;top:16px;z-index:3;padding:6px 14px 7px;border-radius:99px;font:900 italic 13px/1 var(--fh);background:rgba(255,255,255,.74);color:#06214d;border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pj .n{left:16px}.pj .k{right:16px;text-transform:uppercase;letter-spacing:.06em}
.pj .alt{position:absolute;inset:0;opacity:0;transition:opacity .55s,scale .8s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.pj:hover .alt{opacity:1}}
/* grilla con ritmo: una tarjeta alta + dos apiladas, al revés, y un banner */
@media(min-width:761px){
 .pjs{grid-auto-rows:clamp(58px,6.1vw,88px)}
 .pjs:not(.f):not(.lista) .pj:nth-child(1){grid-area:1/1/7/4}
 .pjs:not(.f):not(.lista) .pj:nth-child(2){grid-area:1/4/4/7}
 .pjs:not(.f):not(.lista) .pj:nth-child(3){grid-area:4/4/7/7}
 .pjs:not(.f):not(.lista) .pj:nth-child(4){grid-area:7/1/10/4}
 .pjs:not(.f):not(.lista) .pj:nth-child(5){grid-area:10/1/13/4}
 .pjs:not(.f):not(.lista) .pj:nth-child(6){grid-area:7/4/13/7}
 .pjs:not(.f):not(.lista) .pj:nth-child(7){grid-area:13/1/17/7}
 .pjs.f .pj{grid-row:span 4}
}
/* vista lista: nombres gigantes; la imagen sigue al cursor */
.pjs.lista{display:block;border-top:1px solid rgba(255,255,255,.28)}
.pjs.lista .pj{display:flex;align-items:baseline;gap:clamp(14px,3vw,40px);border-radius:0;background:none;overflow:visible;border-bottom:1px solid rgba(255,255,255,.28);padding:clamp(14px,2.2vw,28px) 0;transform:none!important;box-shadow:none!important;transition:opacity .3s}
.pjs.lista .pj::after{display:none}
.pjs.lista .pj>img{display:none}
.pjs.lista .pj .n,.pjs.lista .pj .k{position:static;padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;font-size:clamp(13px,1.2vw,16px)}
.pjs.lista .pj .k{order:3}
.pjs.lista .pj .et{position:static;flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0;background:none}
.pjs.lista .pj h3{font-size:clamp(44px,9vw,138px);line-height:.95;transition:translate .4s cubic-bezier(.2,.8,.2,1)}
.pjs.lista .pj:hover h3{translate:18px 0}
.pjs.lista .pj p{font-size:clamp(13px,1.2vw,17px);max-width:26ch;text-align:right}
.pjs.lista .pj>*{transition:opacity .3s}
.pjs.lista:has(.pj:hover) .pj:not(:hover)>*{opacity:.28}
@media(max-width:760px){.pjs.lista .pj{flex-wrap:wrap}.pjs.lista .pj .et{flex-basis:100%;order:5}.pjs.lista .pj h3{font-size:clamp(40px,13vw,72px)}.pjs.lista .pj p{text-align:left}}
.lv{position:fixed;left:0;top:0;width:clamp(240px,24vw,360px);aspect-ratio:4/3;z-index:30;pointer-events:none;border-radius:20px;overflow:hidden;opacity:0;scale:.7;transition:opacity .25s,scale .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.lv.on{opacity:1;scale:1}.lv img{width:100%;height:100%;object-fit:cover;display:block}
/* cursor propio */
/* transición tarjeta → proyecto */
.qpj{position:fixed;z-index:41;pointer-events:none;background-size:cover;background-repeat:no-repeat;overflow:hidden}
/* páginas de proyecto */
.lt{display:inline-block;animation:lt 1s cubic-bezier(.16,.9,.2,1) calc(.75s + var(--i)*.05s) both}
@keyframes lt{from{opacity:0;translate:0 70%;rotate:7deg}to{opacity:1;translate:0 0;rotate:0deg}}
.px{transform:scale(1.1);will-change:transform}
.js .pr-gal figure.rv{rotate:-1.6deg;scale:.94;translate:0 60px;transition:opacity .9s,translate 1.1s cubic-bezier(.16,.9,.2,1),rotate 1.1s cubic-bezier(.16,.9,.2,1),scale 1.1s cubic-bezier(.16,.9,.2,1)}
.js .pr-gal figure.rv:nth-of-type(even){rotate:1.6deg}
.js .pr-gal figure.rv.in{rotate:0deg;scale:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.px{transform:none}.lt{animation:none}.js .pr-gal figure.rv{rotate:0deg;scale:1}}

/* marca del proyecto como título */
.pr-t .logo{display:block;height:auto;max-width:100%;animation:logo 1s cubic-bezier(.16,.9,.2,1) .75s both}
.pr-t .logo.t{width:clamp(140px,26vw,300px)}.pr-t .logo.m{width:clamp(200px,40vw,480px)}.pr-t .logo.w{width:clamp(260px,56vw,680px)}
.f-f1 .pr-t .logo{filter:brightness(0) invert(1)}
@keyframes logo{from{opacity:0;scale:.82;rotate:-5deg}to{opacity:1;scale:1;rotate:0deg}}
@media(prefers-reduced-motion:reduce){.pr-t .logo{animation:none}}
.pr-h .pr-t{text-align:center}
.pr-t .logo{margin-inline:auto}
.pr-h:has(.logo) .lead{margin-inline:auto;text-align:center}

/* filtros desplegables en celu + botones de vista como íconos */
.fdrop{position:relative}.fd-btn{align-items:center;gap:10px}
.fd-btn svg{width:14px;height:14px;transition:rotate .3s}.fd-btn[aria-expanded=true] svg{rotate:180deg}
.fd-list{display:flex;gap:10px;flex-wrap:wrap}
.vista .chip{width:46px;height:46px;padding:0;display:grid;place-items:center}.vista svg{width:20px;height:20px}
.fd-btn{display:inline-flex}
.fd-list{position:absolute;left:0;top:calc(100% + 10px);z-index:20;min-width:220px;flex-direction:column;flex-wrap:nowrap;gap:6px;padding:10px;border-radius:26px;border:1px solid rgba(255,255,255,.28);background:rgba(8,16,36,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 20px 40px rgba(0,0,0,.5);opacity:0;visibility:hidden;translate:0 -8px;transition:opacity .25s,translate .3s,visibility .25s}
.fd-btn[aria-expanded=true]+.fd-list{opacity:1;visibility:visible;translate:0 0}
.fd-list .chip{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left}
.fd-list .ct{font-style:normal;font-size:12px;min-width:22px;padding:3px 0 4px;border-radius:99px;text-align:center;background:rgba(255,255,255,.16)}
.fd-list .chip[aria-pressed=true] .ct{background:rgba(8,71,163,.14)}
.filtros{flex-wrap:nowrap;gap:12px}
/* textos de las portadas: todos del mismo lado (abajo a la derecha) */
.pj .et{text-align:right}
.pjs.lista .pj .et{text-align:left}
/* lista: título y debajo su texto, los dos alineados a la izquierda */
.pjs.lista .pj .et{display:block;text-align:left}
.pjs.lista .pj p{max-width:none;margin:clamp(6px,.8vw,12px) 0 0;text-align:left}

/* proyectos: primero título y descripción; la seguidilla de imágenes (portada incluida) va después */
.pr-h+.pr-info{margin-top:clamp(26px,4vw,48px)}
.pr-info~.pr-portada{margin-top:clamp(14px,2vw,26px)}

/* proyectos: decisiones de diseño y cierre con llamado específico */
.pr-proc{margin-top:clamp(14px,2vw,26px);padding:clamp(20px,2.6vw,32px);border-radius:28px;background:rgba(255,255,255,.13);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.42);box-shadow:0 20px 50px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.45)}
.pr-proc h2{font-size:clamp(22px,2.3vw,32px);margin-bottom:clamp(14px,2vw,22px)}
.pr-proc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(16px,2.4vw,32px);counter-reset:p}
.pr-proc li{counter-increment:p;padding-top:14px;border-top:1px solid rgba(255,255,255,.4)}
.pr-proc li::before{content:"0" counter(p);display:block;font:900 italic 13px var(--fh);opacity:.8;margin-bottom:6px}
.pr-proc li b{display:block;font:900 italic clamp(18px,1.7vw,22px)/1.15 var(--fh);margin-bottom:8px}
.pr-proc li p{margin:0;font-size:clamp(15px,1.25vw,17px);line-height:1.5}
.pr-proc~.pr-portada{margin-top:clamp(14px,2vw,26px)}
.pr-cta h2{max-width:20ch;font-size:clamp(28px,4.4vw,58px)}

/* Desplegables de proyecto (Sobre el proyecto / Decisiones de diseño): cerrados por defecto */
.pr-info{align-items:start}
.pr-det>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;-webkit-tap-highlight-color:transparent}
.pr-det>summary::-webkit-details-marker{display:none}
.pr-det>summary h2{margin:0!important}
.pr-det>summary::after{content:"";flex:none;width:11px;height:11px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pr-det[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.pr-det>summary:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:8px}
.pr-det[open]>summary{margin-bottom:clamp(14px,2vw,22px)}
.pr-det[open]>:not(summary){animation:prdet .35s ease both}
@keyframes prdet{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pr-det[open]>:not(summary){animation:none}.pr-det>summary::after{transition:none}}

/* Los tres bloques van apilados a todo el ancho: "Sobre el proyecto", "Decisiones de diseño" y, abajo,
   "Qué incluye" con todas sus etiquetas en una sola línea (en pantallas angostas pasan a la línea siguiente). */
.pr-info{grid-template-columns:1fr;align-items:start}
.pr-info>.pr-proc{margin-top:0}
.pr-info .pr-inc{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(16px,2.2vw,30px);padding-block:clamp(16px,1.9vw,24px)}
.pr-info .pr-inc h2{margin:0;flex:none}
.pr-inc .pr-tags{flex:1 1 auto;min-width:0;margin:0}
@media(min-width:1100px){.pr-inc .pr-tags{flex-wrap:nowrap}.pr-inc .pr-tags li{white-space:nowrap}}

/* el filtro oculta con [hidden]; la vista lista le pone display:flex a .pj y lo pisaba, por eso no filtraba */
.pjs .pj[hidden],.pjs.lista .pj[hidden]{display:none!important}
.pjs.lista .pj:last-child:not([hidden]){border-bottom:1px solid rgba(255,255,255,.28)}