/* Páginas web: transición del hero al portfolio (sustituye en esta página a service-transition.css).
   Al cargar, el vídeo llega hasta el borde inferior. Al bajar, el portfolio sube como una tarjeta con las esquinas de
   arriba redondeadas, el hero se encoge (hasta el 86 %) y una capa a toda la pantalla lo funde en el color de la página.
   web-hero-transition.js solo escribe tamaño (--s), opacidad (--o, --sh) y visibilidad: nada que obligue a recolocar
   la página en cada fotograma. */
html body.service-social-compact .service-content{position:relative;z-index:2;margin-top:0;padding-top:0;background:transparent;border-radius:0;isolation:isolate}
html body.service-social-compact .service-content>section:first-child{border-radius:32px;padding:48px!important;box-sizing:border-box;opacity:1!important;filter:none!important}
html body.service-social-compact .service-content>section:not(:first-child){transform:scale(var(--entry-scale,1));transform-origin:50% 0}
html body.service-social-compact main>.page-hero{border-radius:24px!important;overflow:hidden!important;transform-origin:50% 0}
html.web-transition body.service-social-compact main>.page-hero{position:sticky;top:12px;z-index:0;will-change:transform;transform:scale(var(--s,1));height:auto!important;min-height:calc(100svh - 12px)!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
/* La tarjeta es algo más estrecha que el hero para que sus esquinas se recorten sobre el vídeo también en pantallas anchas. */
html body.web-page .service-content>.web-portfolio:first-child{left:auto;transform:none!important;margin-inline:auto;width:calc((100% - 24px) * .9);max-width:none;border-radius:48px 48px 0 0!important;background:var(--ink,#e7dcee)!important;box-shadow:none!important;overflow:visible!important}
/* El carrusel ocupa todo el ancho de la pantalla: las miniaturas laterales se cortan en el borde de la pantalla, no en el de la tarjeta. */
html body.web-page .service-content>.web-portfolio:first-child .web-portfolio-slider{overflow:hidden;width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:0!important}
/* Mientras se ve el hero, el carrusel se recorta al ancho de la tarjeta para que las miniaturas laterales no queden colgando
   sobre el vídeo (solo por la derecha: al entrar no hay ninguna a la izquierda y ahí está el aviso «Desliza»); cuando el hero ha desaparecido (clase hero-gone), se abre hasta los bordes de la pantalla. Es una sola
   transición al cruzar ese punto, no un cambio en cada fotograma del scroll. */
html.web-transition body.web-page .service-content>.web-portfolio:first-child .web-portfolio-slider{clip-path:inset(0 calc(5vw + 11px) 0 0);transition:clip-path .7s cubic-bezier(.22,.68,0,1)}
html.web-transition.hero-gone body.web-page .service-content>.web-portfolio:first-child .web-portfolio-slider{clip-path:inset(0 0)}
/* Sombra solo sobre el borde superior, para que no se vea dónde acaba la tarjeta; se apaga al llegar arriba. */
html.web-transition body.web-page .service-content>.web-portfolio:first-child::after{content:"";position:absolute;left:0;right:0;top:-48px;height:48px;border-radius:48px 48px 0 0;background:linear-gradient(to top,rgba(32,16,45,.3),rgba(32,16,45,0));opacity:var(--sh,1);pointer-events:none;will-change:opacity;-webkit-mask:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.web-hero-veil{display:none}
html.web-transition .web-hero-veil{display:block;position:fixed;inset:0;z-index:1;background:var(--ink,#e7dcee);opacity:var(--o,0);pointer-events:none;will-change:opacity}
@media(max-width:800px){
 html body.service-social-compact .service-content>section:first-child{padding:28px 22px!important;border-radius:24px}
 html body.web-page .service-content>.web-portfolio:first-child{width:calc((100% - 24px) * .94);border-radius:32px 32px 0 0!important}
 html.web-transition body.web-page .service-content>.web-portfolio:first-child::after{border-radius:32px 32px 0 0}
 html.web-transition body.web-page .service-content>.web-portfolio:first-child .web-portfolio-slider{clip-path:inset(0 calc(3vw + 8px) 0 0)}
}
@media(prefers-reduced-motion:reduce){html body.service-social-compact .service-content>section{transform:none!important}}