@layer scene{.panel{--e:clamp(0, var(--t,.5) / .35, 1);--in:calc(1 - (1 - var(--e)) * (1 - var(--e)) * (1 - var(--e)));--out:clamp(0, (var(--t,.5) - .7) / .3, 1);--s:clamp(0, (var(--t,.5) - .2) / .3, 1);--a:calc(var(--in) * (1 - var(--out)));transform:perspective(900px) translateY(calc(var(--out) * -6vh)) rotateX(calc((1 - var(--in)) * 8deg)) rotateY(calc((1 - var(--in)) * -28deg + var(--out) * 24deg)) scale(calc(.72 + .28 * var(--in) - .1 * var(--out)));opacity:var(--a);position:relative}.capa.on .panel{will-change:transform}.capa.on .panel,.capa.saliendo .panel{animation:6s ease-in-out infinite alternate panel-float}@keyframes panel-float{0%{translate:0 -4px}to{translate:0 4px}}.panel[data-kind=photo],.panel[data-kind=logos]>picture,.panel-nombre{isolation:isolate;border-radius:18px;position:relative;overflow:hidden}.panel[data-kind=photo]:before,.panel[data-kind=logos]>picture:before,.panel-nombre:before{content:"";z-index:2;border:1px solid color-mix(in srgb, var(--texto) 18%, transparent);border-radius:inherit;pointer-events:none;position:absolute;inset:0}.panel[data-kind=photo]:after,.panel[data-kind=logos]>picture:after,.panel-nombre:after{content:"";z-index:1;transform:translateX(calc((var(--s) * 2 - 1) * 100%));pointer-events:none;background:linear-gradient(105deg,#0000 30%,#ffffff40 50%,#0000 70%);position:absolute;inset:0}.panel[data-kind=photo]{aspect-ratio:2/3;width:min(56vw,300px)}.panel[data-kind=photo] picture,.panel[data-kind=photo] img{width:100%;height:100%;display:block}.panel[data-kind=photo] img{object-fit:cover}.panel[data-kind=logos]{aspect-ratio:16/9;gap:12px;width:min(80vw,360px);display:flex}.panel[data-kind=logos]>picture,.panel-nombre{background:color-mix(in srgb, #fff 92%, var(--fondo));flex:1 1 0;min-width:0;display:block}.panel[data-kind=logos] img{object-fit:contain;mix-blend-mode:multiply;width:76%;height:64%;position:absolute;top:18%;left:12%}.panel-nombre{color:var(--fondo);letter-spacing:-.035em;white-space:nowrap;place-items:center;padding:0 12%;font-family:Satoshi,system-ui,sans-serif;font-size:clamp(22px,6.4vw,30px);font-weight:700;line-height:1;display:grid}.panel-raya{display:none}@media (min-width:768px){.panel[data-kind=photo]{width:280px}.panel[data-kind=logos]{gap:16px;width:420px}.panel-nombre{font-size:34px}}.estatico .capa .panel{opacity:1;will-change:auto;animation:none;transform:translate(0,0)}.estatico .panel :after,.estatico .panel:after{display:none}@media (prefers-reduced-motion:reduce){.panel,.capa.on .panel,.capa.saliendo .panel{opacity:1;will-change:auto;animation:none;transform:translate(0,0)}.panel :after,.panel:after{display:none}}}
