/* Sección «Creaciones publicadas» (cartelera de afiches). Movida desde hub.css en la v1.3.0. */
/* ── Cartelera de proyectos (opción F): afiches sobre el muro. Por defecto un carril con desplazamiento nativo; en escritorio con mouse
   se fija y corre de lado con el scroll, y además se toma con el mouse y se lanza con inercia (hub-proyectos.js pone .fija) ── */
.cartelera{position:relative;scroll-padding-left:8vw;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;background:#E6D5C3;color:#1F3A3D}
/* Fondo CLARO con dos texturas propias, distintas a las oscuras del inicio: nubes y grano (claro-2) y salpicadura + rayones (claro-3). La primera, ya compuesta sobre el crema */
.cart-pista{background:url(../../cart-salpicadura.webp) center/cover no-repeat,url(../../cart-textura.webp) center/cover no-repeat,#E6D5C3}
.cartelera::-webkit-scrollbar{display:none}
/* Modo fijo SIN pin de ScrollTrigger (el pin usa position:fixed y el navegador lo cuenta como salto de diseño, CLS 1,4): la sección es un contenedor alto
   y su marco es sticky. Mientras se recorre el contenedor, el marco se queda quieto y el scroll solo gobierna el avance del carril. */
.cartelera.fija{overflow:visible;scroll-snap-type:none;height:var(--cart-alto,100vh)}
.cartelera.fija .cart-marco{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center}
.cart-pista{position:relative;display:flex;gap:clamp(20px,3vw,40px);padding:clamp(64px,9vh,96px) 8vw clamp(56px,8vh,80px);width:max-content;align-items:center;-webkit-user-select:none;user-select:none}
.cartelera.fija .cart-pista{cursor:grab}
.cartelera.fija.arrastrando .cart-pista{cursor:grabbing}
.cart-intro{flex:none;width:min(440px,80vw);scroll-snap-align:start}
.cart-intro h2{font:600 clamp(40px,5.2vw,76px)/.98 var(--hu-serif);margin:0 0 16px;color:#1F3A3D}
.cart-intro h2:focus{outline:none}   /* el título recibe el foco al bajar desde la tarjeta: no es interactivo, no lleva contorno */
.cart-intro p{margin:0;color:#455957;font-size:18px}
.cart-intro .cart-pista-uso{margin-top:14px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cart-lista{display:flex;gap:clamp(20px,3vw,40px);list-style:none;margin:0;padding:0;align-items:stretch}
.afiche{flex:none;width:min(360px,78vw);position:relative;scroll-snap-align:center;display:flex;perspective:900px}   /* el giro del afiche lo pone GSAP en este <li>; la inclinación holográfica va en .af-cuerpo */
.af-cuerpo{position:relative;display:flex;width:100%;border-radius:6px;overflow:hidden;transform-style:preserve-3d;transition:transform 1.05s var(--hu-curva-firma,ease-out),box-shadow 1.05s var(--hu-curva-firma,ease-out)}   /* al SALIR el puntero la tarjeta vuelve despacio (1,05 s = el triple de los 0,35 s de antes); al entrar y seguirlo, .holo-on la hace ágil */
.afiche.claro .af-cuerpo{background:#E6D5C3;color:#1F3A3D}
.afiche.oscuro .af-cuerpo{background:#1F3A3D;color:#E6D5C3;border:1px solid #3B5F63;box-shadow:0 14px 30px rgba(31,58,61,.28)}
.oscuro .af-b{color:#E8927A}
/* La textura de marca también en el papel del afiche, debajo del contenido; la clara solo se pide en reposo (como en la hoja) */
.af-cuerpo::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2}
.papel-listo .afiche.claro .af-cuerpo::before{background:url(../../papel-claro.webp) center/cover}
.papel-listo .afiche.oscuro .af-cuerpo::before{background:url(../../fondo-textura.webp) center/cover;opacity:.3}
.af-link,.en-desarrollo{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;color:inherit;text-decoration:none;padding-bottom:26px}
.en-desarrollo{padding:0 0 26px}
.af-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;-webkit-user-drag:none;margin-bottom:8px}
.af-vacia{background:#1F3A3D;box-shadow:inset 0 0 0 1px #3B5F63}
.af-estado,.af-t,.af-b,.af-x,.af-ver{margin-left:24px;margin-right:24px}
.af-estado{align-self:flex-start;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid currentColor}
.claro .af-estado{color:#455957}
.af-t{font:600 34px/1 var(--hu-serif);margin-top:2px;margin-bottom:0}
.af-b{font-size:17px;font-weight:600;margin-top:0;margin-bottom:0}
.claro .af-b{color:#8C2F24}
.af-x{font-size:16px;margin-top:0;margin-bottom:0}
.af-ver{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-top:auto;padding-top:8px}
.af-ver svg{width:16px;height:16px}
.af-link:focus-visible{outline-offset:-4px}
.cart-progreso{display:none}
.cartelera.fija .cart-pista{background:none}
.cartelera.fija .cart-marco{background:url(../../cart-textura.webp) center/cover no-repeat,#E6D5C3}
/* Las salpicaduras van en su propia capa para poder flotar suavemente (no responden al mouse); solo existe en el modo de escritorio */
.cart-polvo{display:none}
.cartelera.fija .cart-polvo{display:block;position:absolute;inset:-4%;pointer-events:none;background:url(../../cart-salpicadura.webp) center/cover no-repeat}
.cartelera.fija .cart-pista{position:relative;z-index:1}
.cartelera.fija .cart-progreso{display:block;position:absolute;left:8vw;right:8vw;bottom:22px;height:3px;background:rgba(31,58,61,.22);border-radius:2px;overflow:hidden}
.cart-progreso i{display:block;height:100%;background:#8C2F24;transform-origin:left;transform:scaleX(0)}
html.sin-js .cartelera{overflow:visible}
html.sin-js .cart-pista{flex-direction:column;align-items:stretch;width:auto;padding:56px clamp(16px,5vw,32px)}
html.sin-js .cart-lista{flex-direction:column}
html.sin-js .afiche{width:100%}
/* ── Efecto Card System (holo-card-system, el mismo de Eukinapp): la tarjeta se inclina en 3D hacia el puntero y un holograma rainbow con brillo la recorre.
   Técnica de simeydotme (color-dodge sobre bandas de color); las variables --mx/--my/--hyp las mueve hub-proyectos.js. Solo con mouse: en táctil y con
   «reducir movimiento» no hay inclinación (con reducir queda el brillo, sin movimiento de la tarjeta). ── */
.holo-glare,.holo-foil{position:absolute;inset:0;border-radius:6px;pointer-events:none;opacity:0;transition:opacity 1.05s ease}
.holo-on .holo-glare,.holo-on .holo-foil{transition:opacity .3s ease}
.holo-glare{z-index:4;mix-blend-mode:overlay;opacity:calc(var(--fx-o,0) * .275);background-image:radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,50%),hsla(0,0%,100%,.8) 10%,hsla(0,0%,100%,.5) 20%,rgba(0,0,0,.45) 90%)}
.holo-foil{z-index:3;mix-blend-mode:color-dodge;--space:5%;--angle:133deg;opacity:calc(var(--fx-o,0) * .25);filter:brightness(calc((var(--hyp,0) * .3) + .55)) contrast(2.2) saturate(1.2);
  background-image:repeating-linear-gradient(0deg,#ff7773 calc(var(--space)*1),#ffed5f calc(var(--space)*2),#a8ff5f calc(var(--space)*3),#83fff7 calc(var(--space)*4),#7894ff calc(var(--space)*5),#d875ff calc(var(--space)*6),#ff7773 calc(var(--space)*7)),
    repeating-linear-gradient(var(--angle),#0e152e 0%,#8fa3a3 3.8%,#8fc1c1 4.5%,#8fa3a3 5.2%,#0e152e 10%,#0e152e 12%),
    radial-gradient(farthest-corner circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.7) 10%,rgba(120,120,120,.3) 40%,#000 90%);
  background-blend-mode:hue,hard-light,exclusion;background-size:200% 700%,300%,200%;
  background-position:0% var(--posy,50%),var(--posx,50%) var(--posy,50%),var(--posx,50%) var(--posy,50%)}
.af-cuerpo.holo-on{transition:transform .18s ease-out,box-shadow .3s ease-out;box-shadow:0 24px 44px rgba(31,58,61,.42)}
html.sin-js .holo-glare,html.sin-js .holo-foil{display:none}

/* Sobre el botón «Abrir …»: al pasar el mouse (o enfocar con teclado) se dibuja una cápsula a su alrededor y la flecha avanza */
.af-ver{border-radius:999px;padding:8px 14px;margin-left:10px;margin-right:auto;border:1.5px solid transparent;transition:background-color .35s var(--hu-curva-firma,ease-out),border-color .35s var(--hu-curva-firma,ease-out),color .35s var(--hu-curva-firma,ease-out)}
.af-ver svg{transition:transform .35s var(--hu-curva-firma,ease-out)}
.af-link:hover .af-ver,.af-link:focus-visible .af-ver{background:#E6D5C3;border-color:#E6D5C3;color:#1F3A3D}
.af-link:hover .af-ver svg,.af-link:focus-visible .af-ver svg{transform:translateX(5px)}
/* Teléfono: los afiches se ordenan en columna, uno bajo otro, en vez de un carril horizontal que se pierde de lado */
@media (max-width:760px){.cart-intro .cart-pista-uso{display:none}.cartelera{overflow:visible;scroll-snap-type:none}.cart-pista{flex-direction:column;align-items:stretch;width:auto;padding:56px clamp(16px,5vw,32px)}.cart-intro{width:auto}.cart-lista{flex-direction:column;align-items:center;gap:32px}.afiche{width:min(400px,100%)}}