/* ═══════════════════════════════════════════════════════════════════════════ AIMA · assets/aima-portafolio.css — EL PORTAFOLIO, EN ESTÉTICA AIMA ─────────────────────────────────────────────────────────────────────────── 17/10/2026 · Bratney: «arregla los bugs (dentro de cada vídeo hay partes donde no deja bajar y se bloquea), mejora la estética para que sea lo más fácil de entender y lo más visual —dibujos, motion graphics, AMI disfrazada haciendo algo—, en todos los cuadrados, en reels y en toda la parte del portafolio. Los iconos no se tocan». Va la ÚLTIMA del de portafolio.html (después de aima-estetica.css), así que gana por orden a las reglas de la página con la misma fuerza. Las escenas las dibuja assets/aima-portafolio-escenas.js (clases pe-*). Índice 1 · Las escenas: lienzo y movimiento 2 · Los cuadrados (baldosas) 3 · La publicación abierta (el arreglo del scroll y la cara nueva) 4 · Las historias destacadas (con vídeo) 5 · Los reels 6 · La portada, el perfil y las demás vistas 7 · El cerrojo del fondo con una capa abierta 8 · Quietud ⚫ 19/10/2026 · 3ª versión. Bratney: «no me quites lo de los colores; solo quería que mejoraras por dentro las cosas, que lo entienda un niño de 6 años». Los colores del portafolio vuelven a ser los de siempre (las portadas de color, el dorado, la caja oscura de la publicación); esta hoja solo pone lo de dentro (las escenas y los rótulos), la letra y los arreglos. ⚫ 19/10/2026 · 4ª versión. Las historias vuelven a ir por capítulos (una raya cada uno, las de la página) y el botón se llena cuando el vídeo acaba en el precio (.al-final). Y entran las apps multiplataforma: su escena del código que se escribe (.pe-linea) y sus tres cuadrados, con su escena cada uno. ⚫ 19/10/2026 (noche) · 5ª versión. «No me gusta el diseño de retrato y detalle macro… y hay mucho lag: no quiero nada de lag». El retrato y el macro, rehechos (.pe-r*, .pe-m*). Sin lag: las escenas van en capas (.pe-lienzo, .pe-b, .pe-c), ninguna animación de escena usa steps(), y lo que se repintaba en cada fotograma —el movimiento de las portadas de color, el punto verde del chat, el aro rayado de los destacados en obras— se queda quieto o se mueve sin repintar (al final). ═══════════════════════════════════════════════════════════════════════════ */ :root{ --pf-tinta:#0B0B0D; --pf-hueso:#F2F2F0; --pf-grafito:#3A3A3C; --pf-t2:#56565C; --pf-t3:#86868B; --pf-rojo:#C1272D; --pf-rojo-claro:#EC5A60; --pf-raya:rgba(11,11,13,.1); --pf-anton:'Anton','AIMA Anton','Impact','Arial Narrow Bold',sans-serif; --pf-corm:'Cormorant Garamond','AIMA Cormorant','Iowan Old Style','Times New Roman',serif; --pf-mont:'Montserrat','Helvetica Neue',Arial,sans-serif; --pf-facet:polygon(10% 16%,92% 0%,100% 55%,96% 92%,0% 96%); --pf-ease:cubic-bezier(.22,1,.36,1); } /* ═══════════════════════════════════════════════════════════════════════════ 1 · LAS ESCENAS ═══════════════════════════════════════════════════════════════════════════ */ .pe-escena{position:absolute;inset:0;overflow:hidden;background:#F2F2F0; display:grid;place-items:center} .pe-escena.oscura{background:#141416} .pe-svg{width:100%;height:100%;display:block;overflow:visible} .pe-svg *{transform-box:view-box} /* 19/10/2026 · SIN LAG: la escena es un escenario de 160 × 128 (escalado entero y centrado desde aima-portafolio-escenas.js) con lo quieto en (pe-b) y cada cosa que se mueve en su capa (pe-c), que la mueve la tarjeta gráfica sin repintar. Ver «LO QUE SE MUEVE, EN SU PROPIA CAPA» en el .js. */ div.pe-svg{position:relative} .pe-lienzo{position:absolute;inset:0;margin:auto;width:160px;height:128px;transform-origin:50% 50%;shape-rendering:crispEdges;pointer-events:none} .pe-lienzo .pe-b,.pe-lienzo .pe-c,.pe-lienzo .pe-g{position:absolute;display:block;overflow:visible;margin:0;padding:0;border:0} .pe-lienzo .pe-g{left:0;top:0;width:0;height:0;transform-origin:0 0} /* la ventana del «antes y después»: la de dentro hace el camino contrario */ .pe-tirador-contra{animation:pe-tirador-contra 6.4s ease-in-out infinite} @keyframes pe-tirador-contra{0%,8%{transform:translateX(-104px)}46%,58%{transform:translateX(-34px)}96%,100%{transform:translateX(-104px)}} /* 19/10/2026 · SIN LAG: ninguna animación de las escenas usa steps(). Safari no le pasa a la tarjeta gráfica una animación con steps() y la mueve fotograma a fotograma en el hilo principal. Los saltos (el parpadeo, el piloto, la película…) son los mismos: mantener el valor y cambiarlo en una décima de punto (unos milisegundos). */ /* AMI: un saltito de un píxel y su parpadeo */ .pe-ami{animation:pe-bota 2.2s linear infinite} .pe-ami-b{animation-delay:-1.1s} @keyframes pe-bota{0%,49.9%{transform:translateY(0)}50%,100%{transform:translateY(-1px)}} .pe-ami .pojo{animation:pe-parpa 5.2s linear infinite} @keyframes pe-parpa{0%,94.4%{opacity:1}94.5%,97.4%{opacity:0}97.5%,100%{opacity:1}} .pe-ami.pe-respira{animation:pe-respira 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%} .pe-ami.pe-respira .pojo{opacity:0;animation:none} @keyframes pe-respira{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}} .pe-ami.pe-ami-vuela{animation:pe-aletea 1.4s ease-in-out infinite} @keyframes pe-aletea{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} .pe-ami.pe-asoma{animation:pe-asoma 6s var(--pf-ease) infinite} @keyframes pe-asoma{0%,12%{transform:translateY(8px)}22%,78%{transform:translateY(0)}90%,100%{transform:translateY(8px)}} /* señales */ .pe-rec{animation:pe-rec 1.4s linear infinite} @keyframes pe-rec{0%,55.9%{opacity:1}56%,100%{opacity:.12}} .pe-titila{animation:pe-titila 3s linear infinite} @keyframes pe-titila{0%,64.9%{opacity:.9}65%,69.9%{opacity:.575}70%,74.9%{opacity:.25}75%,79.9%{opacity:.575}80%,100%{opacity:.9}} .pe-chispa{animation:pe-chispa 2.6s var(--pf-ease) infinite;transform-box:fill-box;transform-origin:center} @keyframes pe-chispa{0%,55%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.25)}85%,100%{opacity:0;transform:scale(.6)}} .pe-haz{animation:pe-haz 4.4s ease-in-out infinite} @keyframes pe-haz{0%,100%{opacity:1}45%{opacity:.45}52%{opacity:1}} .pe-luz{animation:pe-haz 5s ease-in-out infinite} /* rodaje */ .pe-claqueta{animation:pe-claqueta 4.2s var(--pf-ease) infinite;transform-box:fill-box;transform-origin:0% 100%} @keyframes pe-claqueta{0%,58%{transform:rotate(-24deg)}64%{transform:rotate(0)}68%{transform:rotate(-5deg)}72%,100%{transform:rotate(0)}} .pe-enfoca{animation:pe-enfoca 4.2s var(--pf-ease) infinite;transform-box:fill-box;transform-origin:center} @keyframes pe-enfoca{0%{opacity:0;transform:scale(1.25)}14%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(1)}} /* reel */ .pe-progreso{animation:pe-progreso 6s linear infinite;transform-box:fill-box;transform-origin:0 50%} @keyframes pe-progreso{from{transform:scaleX(0)}to{transform:scaleX(1)}} .pe-late{animation:pe-late 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center} @keyframes pe-late{0%,100%{transform:scale(1)}20%{transform:scale(1.35)}40%{transform:scale(1)}} .pe-sube{animation:pe-sube 3.6s var(--pf-ease) infinite;animation-delay:calc(var(--i,0) * -1.2s);opacity:0} @keyframes pe-sube{0%{opacity:0;transform:translateY(10px)}15%{opacity:1}70%{opacity:1;transform:translateY(-16px)}100%{opacity:0;transform:translateY(-26px)}} .pe-humo{animation:pe-humo 2.4s ease-in-out infinite} @keyframes pe-humo{0%{opacity:0;transform:translateY(3px)}40%{opacity:.85}100%{opacity:0;transform:translateY(-6px)}} /* entrevista */ .pe-onda{animation:pe-onda .9s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center} @keyframes pe-onda{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}} /* dron */ .pe-vuela,.pe-vuela-haz{animation:pe-vuela 7s ease-in-out infinite} @keyframes pe-vuela{0%,100%{transform:translate(0,0)}25%{transform:translate(-18px,4px)}50%{transform:translate(0,-3px)}75%{transform:translate(18px,4px)}} .pe-helice{animation:pe-helice .16s linear infinite} .pe-helice-b{animation-delay:-.08s} @keyframes pe-helice{0%,49.5%{opacity:1}50%,100%{opacity:0}} /* spot */ .pe-pelicula{animation:pe-pelicula 1.2s linear infinite} @keyframes pe-pelicula{0%,14.24%{transform:translateX(0px)}14.29%,28.52%{transform:translateX(-1px)}28.57%,42.81%{transform:translateX(-2px)}42.86%,57.09%{transform:translateX(-3px)}57.14%,71.38%{transform:translateX(-4px)}71.43%,85.66%{transform:translateX(-5px)}85.71%,99.95%{transform:translateX(-6px)}100%{transform:translateX(-6px)}} .pe-anuncio{animation:pe-anuncio 3.2s linear infinite} @keyframes pe-anuncio{0%,46.9%{opacity:1}47%,49.9%{opacity:.2}50%,100%{opacity:1}} .pe-foco{animation:pe-foco 5.6s ease-in-out infinite} .pe-foco-b{animation-delay:-2.8s} @keyframes pe-foco{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}} /* web */ .pe-escribe{animation:pe-escribe 6.4s linear infinite} /* 19/10/2026 · el código que se escribe, línea a línea (apps) */ .pe-linea{opacity:0;animation:pe-linea 6.4s linear infinite;animation-delay:calc(var(--i,0) * .42s)} @keyframes pe-linea{0%,1.9%{opacity:0}2%,87.9%{opacity:1}88%,100%{opacity:0}} .pe-escribe-b{animation-name:pe-escribe-b} @keyframes pe-escribe{0%,2.09%{transform:scaleX(0)}2.14%,4.24%{transform:scaleX(0.07)}4.29%,6.38%{transform:scaleX(0.14)}6.43%,8.52%{transform:scaleX(0.21)}8.57%,10.66%{transform:scaleX(0.29)}10.71%,12.81%{transform:scaleX(0.36)}12.86%,14.95%{transform:scaleX(0.43)}15%,17.09%{transform:scaleX(0.5)}17.14%,19.24%{transform:scaleX(0.57)}19.29%,21.38%{transform:scaleX(0.64)}21.43%,23.52%{transform:scaleX(0.71)}23.57%,25.66%{transform:scaleX(0.79)}25.71%,27.81%{transform:scaleX(0.86)}27.86%,29.95%{transform:scaleX(0.93)}30%,100%{transform:scaleX(1)}} @keyframes pe-escribe-b{0%,29.95%{transform:scaleX(0)}30%,31.74%{transform:scaleX(0)}31.79%,33.52%{transform:scaleX(0.07)}33.57%,35.31%{transform:scaleX(0.14)}35.36%,37.09%{transform:scaleX(0.21)}37.14%,38.88%{transform:scaleX(0.29)}38.93%,40.66%{transform:scaleX(0.36)}40.71%,42.45%{transform:scaleX(0.43)}42.5%,44.24%{transform:scaleX(0.5)}44.29%,46.02%{transform:scaleX(0.57)}46.07%,47.81%{transform:scaleX(0.64)}47.86%,49.59%{transform:scaleX(0.71)}49.64%,51.38%{transform:scaleX(0.79)}51.43%,53.16%{transform:scaleX(0.86)}53.21%,54.95%{transform:scaleX(0.93)}55%,100%{transform:scaleX(1)}} .pe-cursor-web{animation:pe-cursor-web 6.4s var(--pf-ease) infinite} @keyframes pe-cursor-web{0%,20%{transform:translate(0,0)}40%,60%{transform:translate(-62px,-24px)}80%,100%{transform:translate(0,0)}} .pe-monta{opacity:0;animation:pe-monta 8s var(--pf-ease) infinite;animation-delay:calc(var(--i,0) * .42s)} @keyframes pe-monta{0%{opacity:0;transform:translate(-6px,6px)}6%{opacity:1;transform:none}80%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}} .pe-cursor{animation:pe-cursor 6s var(--pf-ease) infinite} @keyframes pe-cursor{0%,8%{transform:translate(132px,124px)}40%{transform:translate(44px,86px)}46%{transform:translate(44px,87px)}50%{transform:translate(44px,86px)}72%{transform:translate(70px,104px)}100%{transform:translate(132px,124px)}} .pe-boton{animation:pe-boton 6s linear infinite} @keyframes pe-boton{0%,45.9%{transform:translateY(0)}46%,50.9%{transform:translateY(1px)}51%,100%{transform:translateY(0)}} .pe-pop{animation:pe-pop 6s var(--pf-ease) infinite;transform-box:fill-box;transform-origin:50% 100%} @keyframes pe-pop{0%,48%{opacity:0;transform:scale(.6)}56%{opacity:1;transform:scale(1.04)}60%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}} /* tecnología e IA */ .pe-ticket{animation:pe-ticket 6s var(--pf-ease) infinite} @keyframes pe-ticket{0%,30%{opacity:0;transform:translate(-8px,0)}36%{opacity:1;transform:translate(0,0)}52%{opacity:1;transform:translate(34px,0)}58%,100%{opacity:0;transform:translate(46px,-4px) scale(.7)}} .pe-celda{opacity:0;animation:pe-celda 6s linear infinite;animation-delay:calc(var(--i,0) * .18s)} @keyframes pe-celda{0%,57.9%{opacity:0}58%,93.9%{opacity:1}94%,100%{opacity:0}} .pe-cinta{animation:pe-cinta .9s linear infinite} @keyframes pe-cinta{0%,24.95%{transform:translateX(0px)}25%,49.95%{transform:translateX(2px)}50%,74.95%{transform:translateX(4px)}75%,99.95%{transform:translateX(6px)}100%{transform:translateX(6px)}} .pe-llega{opacity:0;animation:pe-llega 8s var(--pf-ease) infinite;animation-delay:calc(var(--i,0) * .9s)} @keyframes pe-llega{0%{opacity:0;transform:translateY(5px)}5%{opacity:1;transform:none}82%{opacity:1}90%,100%{opacity:0}} .pe-zz{opacity:0;animation:pe-zz 3.2s ease-out infinite;animation-delay:calc(var(--i,0) * 1.6s)} @keyframes pe-zz{0%{opacity:0;transform:translate(0,6px)}25%{opacity:1}100%{opacity:0;transform:translate(6px,-12px)}} .pe-imprime{animation:pe-imprime 7s var(--pf-ease) infinite} @keyframes pe-imprime{0%{transform:translateY(46px)}32%,90%{transform:translateY(0)}100%{transform:translateY(46px)}} .pe-sello{opacity:0;animation:pe-sello 7s var(--pf-ease) infinite;transform-box:fill-box;transform-origin:center} @keyframes pe-sello{0%,36%{opacity:0;transform:scale(1.9) rotate(-8deg)}42%{opacity:1;transform:scale(1) rotate(-8deg)}86%{opacity:1;transform:scale(1) rotate(-8deg)}94%,100%{opacity:0;transform:scale(1) rotate(-8deg)}} .pe-sobre{opacity:0;animation:pe-sobre 7s var(--pf-ease) infinite} @keyframes pe-sobre{0%,48%{opacity:0;transform:translate(-20px,10px)}54%{opacity:1;transform:translate(0,0)}82%{opacity:1;transform:translate(22px,-26px)}90%,100%{opacity:0;transform:translate(30px,-34px)}} /* marca */ .pe-tirador,.pe-tirador-mascara{animation:pe-tirador 6.4s ease-in-out infinite} @keyframes pe-tirador{0%,8%{transform:translateX(104px)}46%,58%{transform:translateX(34px)}96%,100%{transform:translateX(104px)}} .pe-palanca{animation:pe-palanca 6s var(--pf-ease) infinite} @keyframes pe-palanca{0%,30%{transform:rotate(-28deg)}38%,60%{transform:rotate(22deg)}70%,100%{transform:rotate(-28deg)}} .pe-trazo{opacity:0;animation:pe-trazo 8s var(--pf-ease) infinite;animation-delay:calc(var(--i,0) * .55s)} @keyframes pe-trazo{0%{opacity:0;transform:translateY(4px)}8%{opacity:1;transform:none}84%{opacity:1}92%,100%{opacity:0}} .pe-muestra{opacity:0;animation:pe-muestra 8s var(--pf-ease) infinite;animation-delay:calc(.9s + var(--i,0) * .2s)} @keyframes pe-muestra{0%{opacity:0;transform:translateY(-10px)}8%{opacity:1;transform:none}84%{opacity:1}92%,100%{opacity:0}} .pe-icono{opacity:0;animation:pe-icono 8s var(--pf-ease) infinite;animation-delay:calc(var(--i,0) * .32s);transform-box:fill-box;transform-origin:center} @keyframes pe-icono{0%{opacity:0;transform:scale(.4)}7%{opacity:1;transform:scale(1.08)}10%{transform:scale(1)}84%{opacity:1}92%,100%{opacity:0}} .pe-latido-r{animation:pe-late 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center} /* foto */ .pe-flash{opacity:0;animation:pe-flash 4.2s linear infinite;pointer-events:none} .pe-flash-b{animation-delay:-2s} @keyframes pe-flash{0%,62.9%{opacity:0}63%,64.9%{opacity:.85}65%,66.9%{opacity:.4}67%,100%{opacity:0}} .pe-polaroid{animation:pe-polaroid 7s var(--pf-ease) infinite} @keyframes pe-polaroid{0%,10%{transform:translateY(34px)}26%,90%{transform:translateY(0)}100%{transform:translateY(34px)}} .pe-revela{animation:pe-revela 7s ease-in infinite} @keyframes pe-revela{0%,26%{opacity:0}60%,90%{opacity:1}100%{opacity:0}} /* 19/10/2026 · RETRATO (rehecho): las cuatro luces se encienden de una en una (1, 2, 3, 4) y el plató sale de la penumbra; luego se encuadra la cara y salta el flash. 8 s */ .pe-r1,.pe-r2,.pe-r3,.pe-r4{opacity:0;animation:pe-r1 8s linear infinite} .pe-r2{animation-name:pe-r2}.pe-r3{animation-name:pe-r3}.pe-r4{animation-name:pe-r4} @keyframes pe-r1{0%,9%{opacity:0}10%,90%{opacity:1}92%,100%{opacity:0}} @keyframes pe-r2{0%,19%{opacity:0}20%,90%{opacity:1}92%,100%{opacity:0}} @keyframes pe-r3{0%,29%{opacity:0}30%,90%{opacity:1}92%,100%{opacity:0}} @keyframes pe-r4{0%,39%{opacity:0}40%,90%{opacity:1}92%,100%{opacity:0}} .pe-r-sombra{animation:pe-r-sombra 8s linear infinite} @keyframes pe-r-sombra{0%,9%{opacity:1}10%,19%{opacity:.64}20%,29%{opacity:.38}30%,39%{opacity:.16}40%,90%{opacity:0}92%,100%{opacity:1}} .pe-r-encuadre{opacity:0;animation:pe-r-encuadre 8s var(--pf-ease) infinite;transform-box:fill-box;transform-origin:center} @keyframes pe-r-encuadre{0%,46%{opacity:0;transform:scale(1.25)}52%{opacity:1;transform:scale(1)}88%{opacity:1;transform:scale(1)}91%,100%{opacity:0;transform:scale(1)}} .pe-r-flash{opacity:0;animation:pe-r-flash 8s linear infinite;pointer-events:none} @keyframes pe-r-flash{0%,57.9%{opacity:0}58%,59.9%{opacity:.85}60%,61.9%{opacity:.35}62%,100%{opacity:0}} /* 19/10/2026 · MACRO (rehecho): la burbuja del objetivo sale del anillo, llega desenfocada, enfoca de golpe (1:1) con sus destellos, salta el flash y se cierra. 7,2 s */ .pe-m-burbuja{animation:pe-m-burbuja 7.2s var(--pf-ease) infinite;transform-box:fill-box;transform-origin:30% 100%} @keyframes pe-m-burbuja{0%,6%{opacity:0;transform:scale(.25)}14%{opacity:1;transform:scale(1.05)}18%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.25)}} .pe-m-borroso{animation:pe-m-borroso 7.2s linear infinite} @keyframes pe-m-borroso{0%,31.9%{opacity:1}32%,100%{opacity:0}} .pe-m-nitido,.pe-m-etiqueta{opacity:0;animation:pe-m-nitido 7.2s linear infinite} @keyframes pe-m-nitido{0%,31.9%{opacity:0}32%,88.9%{opacity:1}89%,100%{opacity:0}} .pe-m-encuadre{opacity:0;animation:pe-m-encuadre 7.2s var(--pf-ease) infinite;transform-box:fill-box;transform-origin:center} @keyframes pe-m-encuadre{0%,22%{opacity:0;transform:scale(1.3)}30%{opacity:1;transform:scale(1)}40%{opacity:1;transform:scale(1)}46%,100%{opacity:0;transform:scale(1)}} .pe-m-flash{opacity:0;animation:pe-m-flash 7.2s linear infinite;pointer-events:none} @keyframes pe-m-flash{0%,61.9%{opacity:0}62%,63.9%{opacity:.8}64%,65.9%{opacity:.3}66%,100%{opacity:0}} /* servicios */ .pe-barra{animation:pe-barra 6s var(--pf-ease) infinite;animation-delay:calc(var(--i,0) * .14s);transform-box:fill-box;transform-origin:50% 100%} @keyframes pe-barra{0%{transform:scaleY(0)}18%,86%{transform:scaleY(1)}100%{transform:scaleY(0)}} /* lo que no se ve, quieto */ .pe-quieta *{animation-play-state:paused !important} /* ═══════════════════════════════════════════════════════════════════════════ 2 · LOS CUADRADOS ─────────────────────────────────────────────────────────────────────────── ⚫ 19/10/2026 · Bratney: «no me quites lo de los colores; los colores de portada ya eran los que quería». Cada cuadrado vuelve a su portada de siempre —arte(): el degradado de su color, sus aros y su grano— y la escena va ENCIMA, sin cielo ni pared propios. Lo que mejora es lo de dentro: el dibujo y el rótulo, que dicen qué es. El icono de la esquina, el de siempre. ═══════════════════════════════════════════════════════════════════════════ */ .baldosa.con-escena{container-type:inline-size} .pe-escena.sobre-portada{position:absolute;inset:0;z-index:1;background:none;display:block;overflow:visible} .baldosa.con-escena .pe-escena .pe-svg{height:80%} /* el rótulo: la categoría arriba; abajo, qué va ahí y su frase, en blanco sobre la sombra de siempre (la de la nota de antes) */ .pf-chip{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:7px; font:600 9px/1 var(--pf-mont);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.92); background:rgba(11,11,13,.42);padding:6px 9px 6px 8px;border-radius:999px; box-shadow:0 0 0 1px rgba(255,255,255,.16)} .pf-chip i{width:8px;height:7px;background:#fff;clip-path:var(--pf-facet);flex:none} .pf-pie{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:30px 12px 11px; display:grid;gap:3px;text-align:left;pointer-events:none; background:linear-gradient(transparent,rgba(11,11,13,.5) 42%,rgba(11,11,13,.8))} .pf-pie b{font:400 clamp(15px,7.2cqi,26px)/1 var(--pf-anton);text-transform:uppercase;letter-spacing:.012em; color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.3); /* sitio arriba para las tildes de las mayúsculas (CONEXIÓN, DESPUÉS): con interlínea 1 y overflow:hidden (lo pide el «…») se cortaban */ padding-top:.2em;margin-top:-.2em} .pf-pie span{font:italic 500 clamp(12px,5cqi,17px)/1.15 var(--pf-corm);color:rgba(255,255,255,.8); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:.1em;margin-bottom:-.1em} /* el estado: «Próximamente» en blanco suave; «Publicado», en su pastilla roja */ .pf-estado{position:absolute;top:10px;right:38px;z-index:3;display:inline-flex;align-items:center;gap:6px; font:600 8.5px/1 var(--pf-mont);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72); text-shadow:0 1px 3px rgba(0,0,0,.45)} .pf-estado.publicado{color:#fff;background:var(--pf-rojo);padding:5px 8px;border-radius:999px;top:9px;text-shadow:none} /* la baldosa grande: más aire. Solo cuando de verdad es grande: en un móvil estrecho la «grande» vuelve a ser un cuadrado más (span 1), y con este aire su rótulo quedaba 10 px más alto que el de sus vecinas de fila */ @container (min-width:261px){ .baldosa.grande.con-escena .pf-pie{padding:40px 18px 16px} .baldosa.grande.con-escena .pf-chip{top:14px;left:14px} /* su icono es mayor (24 px): el «Próximamente» se aparta para no rozarlo */ .baldosa.grande.con-escena .pf-estado{top:15px;right:46px} } /* la nota de antes («Hueco reservado») sobra: el rótulo ya dice qué es */ .baldosa.con-escena .nota{display:none} /* Cuadrados pequeños (el móvil a tres columnas): fuera lo que no cabe */ @container (max-width:200px){ .pf-chip,.pf-estado{display:none} .pf-pie{padding:22px 7px 6px;gap:1px} .pf-pie b{font-size:11.5px;letter-spacing:.02em} .pf-pie span{display:none} /* la escena baja y se arrima a la izquierda: la esquina del icono (el de siempre, sin tocar) queda libre y no pisa la hoja, la pizarra ni el foco */ .baldosa.con-escena .pe-escena .pe-svg{width:92%;height:66%;margin:16% auto 0 0} } @container (min-width:201px) and (max-width:260px){ .pf-estado{display:none} } /* La estirada —la que tapa el hueco de la última fila— es apaisada: en el móvil, una tira de dos o tres cuadrados de ancho y uno de alto. Ahí el rótulo no cabe en el suelo sin pisar el dibujo, así que se reparten la tira: el rótulo a la izquierda y la escena a la derecha, a todo su alto. (El alto de la estirada lo fija cuadraRejilla() en píxeles a la vez que le pone la clase: por eso aquí se puede medir sin que la caja se hunda.) */ .baldosa.con-escena.estirada{container-type:size} @container (max-height:220px){ .baldosa.con-escena .pe-escena .pe-svg{width:56%;height:calc(100% - 12px);margin-left:auto} .pf-pie{top:0;right:auto;width:52%;align-content:center;padding:28px 0 14px 12px;gap:3px; background:linear-gradient(90deg,rgba(11,11,13,.55),rgba(11,11,13,.3) 70%,transparent)} .pf-pie b{font-size:clamp(14px,16cqh,26px);line-height:1.02;white-space:normal} .pf-pie span{font-size:clamp(11px,11cqh,16px);white-space:normal} .pf-estado{display:none} } @container (max-height:220px) and (max-width:300px){ .pf-pie span{display:none} } /* 🟠 LA REJILLA SE HABÍA SEPARADO SOLA. ami-escenas.css (la hoja de los dioramas de productos) lleva una regla `.rejilla{gap:18–26px}` para SUS tarjetas, y como se carga después del CSS de esta página, le ganaba a la rejilla del portafolio: en el móvil quedaban 18 px entre cuadrado y cuadrado, y 26 en el ordenador. Aquí se vuelve a un mosaico. */ #rejilla,#rejBuscar,#rejGuardado{gap:4px} #rejilla .baldosa,#rejBuscar .baldosa,#rejGuardado .baldosa{border-radius:6px} @media (min-width:900px){ #rejilla,#rejBuscar,#rejGuardado{gap:8px} #rejilla .baldosa,#rejBuscar .baldosa,#rejGuardado .baldosa{border-radius:14px} } /* la nota de debajo de la rejilla, en la letra elegante (sus colores, los de siempre) */ .rej-nota{font:italic 500 16px/1.5 var(--pf-corm)} .rej-nota b{font:400 18px var(--pf-anton);letter-spacing:.02em;font-style:normal} /* ═══════════════════════════════════════════════════════════════════════════ 3 · LA PUBLICACIÓN ABIERTA ─────────────────────────────────────────────────────────────────────────── 🔴 EL ARREGLO DEL «NO DEJA BAJAR». La caja es una rejilla de dos columnas y no decía cuánto mide su fila: la fila crecía hasta lo que medía la columna de la derecha entera (963 px en un portátil) y la caja la cortaba a su alto (638). La columna con scroll medía lo mismo que su contenido, así que no tenía nada que bajar, y la rueda movía la página de detrás. Botones «Ver este trabajo» y «Hablar con AIMA», cortados por abajo. Con la fila en minmax(0,1fr) la columna mide lo que mide la caja y baja por dentro. En el móvil ya lo tenía (44svh + el resto) y por eso allí sí bajaba. ⚫ 19/10/2026 · Los colores, los de siempre: la caja oscura con sus toques dorados. A la izquierda, la portada de la obra con su escena en grande. ═══════════════════════════════════════════════════════════════════════════ */ .po-caja{grid-template-rows:minmax(0,1fr)} .po-caja > *{min-height:0} .po-scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch} #post{overscroll-behavior:contain} @media (min-width:861px){ /* alto fijo de caja: la columna siempre tiene dónde bajar y la caja no cambia de tamaño al pasar de una obra corta a una larga */ .po-caja{height:100%;max-height:880px;width:min(1120px,100%);border-radius:22px; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)} } @media (max-width:860px){ .po-caja{grid-template-rows:38svh minmax(0,1fr)} } /* la cara de la izquierda: la portada de la obra y su escena, en grande */ .po-media .pe-escena.sobre-portada{display:grid;place-items:center;padding:7% 5% 11%} .po-media .pe-escena .pe-svg{width:100%;height:100%;max-height:100%} .po-aviso-escena{position:absolute;left:16px;top:16px;z-index:4;display:inline-flex;align-items:center;gap:8px; font:600 10px/1 var(--pf-mont);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.92); background:rgba(11,11,13,.44);padding:8px 12px 8px 10px;border-radius:999px;box-shadow:0 0 0 1px rgba(255,255,255,.16)} .po-aviso-escena i{width:9px;height:8px;background:#fff;clip-path:var(--pf-facet)} /* la columna de la derecha: la de siempre, con lo de dentro más claro */ .po-scroll{padding:22px 22px 26px} .po-ceja{display:flex;align-items:center;gap:9px;font:600 10px/1.2 var(--pf-mont);letter-spacing:.26em; text-transform:uppercase;color:rgba(255,255,255,.52)} .po-ceja i{width:9px;height:8px;background:var(--gold);clip-path:var(--pf-facet);flex:none} .po-titular{margin-top:12px;font:400 clamp(28px,2.7vw,40px)/1.02 var(--pf-anton);text-transform:uppercase; letter-spacing:.012em;text-wrap:balance} .po-lema{margin-top:10px;font:500 clamp(19px,1.75vw,22px)/1.3 var(--pf-corm);color:rgba(255,255,255,.84);text-wrap:balance} .po-lema em{font-style:italic;color:var(--gold)} /* los tres pasos de un hueco */ .po-pasos{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px} .po-paso{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start; padding:13px 14px 13px 12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03)} .po-paso u{font:600 22px/1 var(--pf-corm);color:var(--gold);text-decoration:none; font-variant-numeric:lining-nums;padding-top:1px} .po-paso b{display:block;font:700 13px/1.3 var(--pf-mont);color:#fff} .po-paso p{margin-top:4px;font:400 12.8px/1.62 var(--pf-mont);color:rgba(255,255,255,.66)} /* ═══════════════════════════════════════════════════════════════════════════ 4 · LAS HISTORIAS DESTACADAS ═══════════════════════════════════════════════════════════════════════════ */ /* arriba, una sombra para que las rayas y la cabecera se lean encima del vídeo */ .hs-marco::after{content:"";position:absolute;left:0;right:0;top:0;height:132px;z-index:7;pointer-events:none; background:linear-gradient(rgba(6,6,8,.62),transparent)} /* el vídeo ocupa el marco entero; arriba quedan las rayas y la cabecera */ .hs-video{position:absolute;inset:0;z-index:3;display:none;background:#0B0B0D} #historias.en-video .hs-video{display:block} /* entero, sin recortar: el logo y los rótulos del vídeo van pegados a los lados, y en un móvil estrecho «cover» se los comía. El fondo es el mismo negro del vídeo: no se ven las franjas. */ .hs-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block} #historias.en-video .hs-cuerpo,#historias.en-video .hs-ami{display:none} #historias.en-video .hs-zona{bottom:110px} /* ⚫ 19/10/2026 · 4ª versión: una raya por capítulo, las de siempre de la página (cada capítulo es una historia). Ya no hay raya larga con puntos. */ /* mientras carga, un latido arriba */ #historias.cargando .hs-barras::after{content:"";position:absolute;right:0;top:8px;width:9px;height:8px; background:#fff;clip-path:var(--pf-facet);animation:pe-rec 1s steps(1) infinite} /* el altavoz */ .hs-son{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-left:auto; background:rgba(255,255,255,.12);transition:background .25s var(--pf-ease)} .hs-son:not([hidden]) + .hs-x{margin-left:4px} .hs-son:hover{background:rgba(255,255,255,.22)} .hs-son svg{width:17px;height:17px} .hs-son.mudo{box-shadow:0 0 0 1.5px rgba(255,255,255,.6)} /* la cabecera: el nombre del capítulo en la letra de la casa */ .hs-top .quien{font:700 12.5px/1.3 var(--pf-mont)} .hs-top .quien small{font:500 10.5px var(--pf-mont);letter-spacing:.04em} /* la ficha: sus colores de siempre (la ceja dorada, el botón blanco); la letra, la de la casa */ .hs-cuerpo h3{font-family:var(--pf-anton)} .hs-cuerpo .precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:14px; font:400 clamp(26px,6.6vw,34px)/1 var(--pf-anton);letter-spacing:.01em} .hs-cuerpo .precio small{margin:0;font:500 11.5px var(--pf-mont);letter-spacing:.02em} .hs-cuerpo li{font:400 13px/1.5 var(--pf-mont)} .hs-cuerpo li b{width:9px;height:8px;margin-top:6px;background:var(--gold);clip-path:var(--pf-facet);flex:0 0 9px} /* mientras corre el vídeo, el botón no tapa: se queda en hueco. Cuando el vídeo acaba en el precio (.al-final), vuelve a ser el botón lleno de siempre */ #historias.en-video:not(.al-final) .hs-cta{background:rgba(11,11,13,.62);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)} .hs-obra{font-family:var(--pf-mont)} .hs-obra i{border-radius:0;clip-path:var(--pf-facet);width:8px} /* el círculo del perfil que trae vídeo: su marca de «play» (el aro, el de siempre) */ .dest.con-video .in::after{content:"";position:absolute;right:13%;bottom:12%;z-index:3;width:13px;height:12px; background:#0B0B0D;clip-path:var(--pf-facet);box-shadow:none} .dest.con-video .ring{position:relative} .dest.con-video .ring::after{content:"";position:absolute;right:17%;bottom:16%;z-index:4;width:0;height:0; border-left:5px solid #fff;border-top:3px solid transparent;border-bottom:3px solid transparent} /* ═══════════════════════════════════════════════════════════════════════════ 5 · LOS REELS Cada reel con su portada de color (la de siempre) y su escena encima. ═══════════════════════════════════════════════════════════════════════════ */ .reel .pe-escena.sobre-portada{display:grid;place-items:center;padding:14% 6% 34%} .reel .pe-escena .pe-svg{width:100%;height:100%} .reel .txt .qn{font:700 12.5px var(--pf-mont)} .reel .txt .qn em{margin-left:2px;padding:4px 8px;border-radius:999px;font:600 8.5px/1 var(--pf-mont);font-style:normal; letter-spacing:.22em;text-transform:uppercase;color:rgba(242,242,240,.85);background:rgba(242,242,240,.12)} .reel .txt h3{font-family:var(--pf-anton)} .reel .txt .re-lema{margin-top:6px;font:italic 500 clamp(17px,4.4vw,21px)/1.25 var(--pf-corm);color:rgba(242,242,240,.86);max-width:30ch} .reel .txt p:not(.re-lema):not(.hs-obra){font-family:var(--pf-mont)} .reel .rail small{font:600 10.5px var(--pf-mont)} .reel .rail .re-son.mudo svg{opacity:.85} .reel .rail a.re-ir{display:grid;justify-items:center;gap:5px;color:#fff} .reel video{background:#0B0B0D} @media (max-width:899.98px){ /* en el móvil el texto del reel ocupa el tercio de abajo: el dibujo se centra en lo que queda libre ENCIMA, no detrás de las letras */ .reel .pe-escena.sobre-portada{padding:8% 0 196px} html.en-reels .reel .pe-escena.sobre-portada{padding-bottom:calc(var(--tab-h) + 196px + env(safe-area-inset-bottom))} /* y el vídeo de un pack se ve entero —el logo y los rótulos van pegados a los bordes— y ENCIMA del texto, nunca debajo: así sus subtítulos no se pisan con el título del reel, tampoco en un móvil bajo (iPhone SE) */ .reel.con-video{background:#0B0B0D} .reel.con-video>video{object-fit:contain;object-position:50% 0;height:calc(100% - 172px)} html.en-reels .reel.con-video>video{height:calc(100% - var(--tab-h) - 172px - env(safe-area-inset-bottom))} .reel.con-video .velo{background:linear-gradient(transparent 66%,rgba(6,6,8,.92) 82%)} } @media (min-width:900px){ .reel>.arte .pe-escena.sobre-portada{padding:6% 8%} .reel>.rail a.re-ir{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:99px; background:rgba(242,242,240,.07);border:1px solid rgba(242,242,240,.12)} .reel>.rail a.re-ir:hover{background:rgba(242,242,240,.14)} .reel>.txt .re-lema{font-size:22px} /* el vídeo vertical de un pack no se recorta: se enseña entero, como en la historia */ .reel.con-video>video{object-fit:contain} } /* ═══════════════════════════════════════════════════════════════════════════ 6 · LA PORTADA, EL PERFIL Y LAS DEMÁS VISTAS ═══════════════════════════════════════════════════════════════════════════ */ /* la frase de debajo del titular: la letra elegante, con su clave en cursiva roja. ⚫ 19/10/2026 · Bratney: «no me la apiles, usa más los lados». Era una columna de 30 caracteres (cinco renglones en el centro); ahora va a lo ancho del titular y se queda en tres renglones en el ordenador. */ .rv-in > p.rv-lema{margin:clamp(20px,3vh,30px) auto 0;max-width:min(66ch,94%); font:500 clamp(20px,2.1vw,28px)/1.36 var(--pf-corm);letter-spacing:.003em;color:rgba(242,242,240,.86);text-wrap:balance} .rv-in > p.rv-lema em{font-style:italic;font-weight:600;color:var(--pf-rojo-claro)} /* en el ordenador, una frase por renglón; en el móvil, corrida */ .rv-in > p.rv-lema .rv-salto{display:none} @media (min-width:900px){ .rv-in > p.rv-lema .rv-salto{display:inline} } @media (max-width:600px){ .rv-in > p.rv-lema{max-width:none;font-size:clamp(19px,5.2vw,22px)} } .rv-baja{font-family:var(--pf-mont);letter-spacing:.26em} .rv-tiras .cinta{font-family:var(--pf-mont);letter-spacing:.26em} /* el aura que respira detrás del perfil, con sus colores de siempre (rojo y oro). Solo en el móvil se dibuja más pequeña: como respira encogiéndose (scale .92–.95), en una pantalla estrecha los bordes de su caja quedaban a la vista —una mancha de canto recto encima de Buscar y Guardado—. */ @media (max-width:600px){ #social::before{background: radial-gradient(32% 30% at 34% 34%,rgba(193,39,45,.20),transparent), radial-gradient(28% 22% at 70% 26%,rgba(201,162,75,.20),transparent), radial-gradient(46% 22% at 52% 76%,rgba(11,11,13,.06),transparent)} } /* el perfil: el punto de las plazas es la faceta de la casa (su color, el de siempre) */ .p-plaza b{width:8px;height:7px;border-radius:0;clip-path:var(--pf-facet)} .dest span{font-family:var(--pf-mont);font-weight:500} .pest button span{font-family:var(--pf-mont)} .fi-cita blockquote{font-family:var(--pf-corm)} /* ═══════════════════════════════════════════════════════════════════════════ 7 · EL CERROJO DEL FONDO CON UNA CAPA ABIERTA El telón (portafolio.html) pone html.pf-cerrojo mientras haya una capa: la página de detrás no se mueve ni con la rueda ni con el dedo. ═══════════════════════════════════════════════════════════════════════════ */ html.pf-cerrojo{overflow:hidden} /* 🔴 EN EL MÓVIL LA CABECERA TAPABA LA CAPA. Por debajo de 600 px
va en position:fixed (el cerrojo de la página) y eso lo convierte en su propio piso: la publicación, las historias y el veredicto viven dentro de
, así que su z-index solo contaba DENTRO de él, y la cabecera del sitio (130) y la barra de abajo (140) quedaban por encima. Se veía la cabecera encima de la publicación y, debajo de ella, la cruz de cerrar: no había forma de salir más que con el botón de atrás. Con una capa abierta,
sube por encima de las dos. */ @media (max-width:600px){ html.pf-cerrojo main{overflow:hidden;z-index:300} } #historias,#veredicto,#valorar{overscroll-behavior:contain} .va-caja,.vd-caja{overscroll-behavior:contain} /* ═══════════════════════════════════════════════════════════════════════════ 8 · QUIETUD ═══════════════════════════════════════════════════════════════════════════ */ /* quieto, cada escena se queda en su fotografía «final»: lo que aparece durante la animación, a la vista; el destello del flash, apagado */ @media (prefers-reduced-motion:reduce){ .pe-escena *,.pe-escena *::before,.pe-escena *::after{animation:none !important} .pe-monta,.pe-trazo,.pe-muestra,.pe-icono,.pe-celda,.pe-llega,.pe-sube,.pe-zz,.pe-sello,.pe-revela, .pe-r1,.pe-r2,.pe-r3,.pe-r4,.pe-m-nitido,.pe-m-etiqueta{opacity:1 !important} .pe-flash,.pe-r-flash,.pe-m-flash,.pe-r-sombra,.pe-m-borroso{opacity:0 !important} } html[data-mov="poco"] .pe-escena *,html[data-mov="poco"] .pe-escena *::before, html[data-mov="poco"] .pe-escena *::after{animation:none !important} html[data-mov="poco"] .pe-monta,html[data-mov="poco"] .pe-trazo,html[data-mov="poco"] .pe-muestra, html[data-mov="poco"] .pe-icono,html[data-mov="poco"] .pe-celda,html[data-mov="poco"] .pe-llega, html[data-mov="poco"] .pe-sube,html[data-mov="poco"] .pe-zz,html[data-mov="poco"] .pe-sello, html[data-mov="poco"] .pe-revela,html[data-mov="poco"] .pe-r1,html[data-mov="poco"] .pe-r2, html[data-mov="poco"] .pe-r3,html[data-mov="poco"] .pe-r4,html[data-mov="poco"] .pe-m-nitido, html[data-mov="poco"] .pe-m-etiqueta{opacity:1 !important} html[data-mov="poco"] .pe-flash,html[data-mov="poco"] .pe-r-flash,html[data-mov="poco"] .pe-m-flash, html[data-mov="poco"] .pe-r-sombra,html[data-mov="poco"] .pe-m-borroso{opacity:0 !important} /* ── 19/10/2026 · SIN LAG: LO QUE SE REPINTABA EN CADA FOTOGRAMA ─────────────── Bratney: «hay mucho lag, no quiero nada de lag». Medido en el banco (móvil, CPU ×4): la rejilla iba a 10–14 fotogramas por segundo. Además de las escenas en capas (ver «LO QUE SE MUEVE, EN SU PROPIA CAPA» en aima-portafolio-escenas.js): · Debajo de cada escena, la portada de color se queda QUIETA. El grano (con su mezcla «overlay»), los aros y el barrido de luz se movían en todos los cuadrados a la vez, y el barrido (background-position) obligaba a repintar el cuadrado entero en cada fotograma. Se ve igual —el mismo color, los mismos aros, el mismo grano—, solo que no se mueve: el movimiento lo pone la escena. · El puntito verde «en línea» del chat de AMI latía con una sombra (box-shadow), que se repinta en cada fotograma: ahora late igual, con transform y opacidad. · El aro rayado de los destacados en obras corría con background-position: ahora corre la misma cinta, movida por la tarjeta gráfica. */ /* (con la fuerza justa para ganar a las reglas de la página: la de los aros es .arte .aro.b, y la del chat va en un