/* En móvil las páginas de servicio se desplazan con el documento (como la portada), para que Safari deje ver la
   página tras su barra inferior. Safari tiñe la muesca y la barra con el color del elemento fijo de ancho completo que
   toca ese borde: arriba lo hace .site-notch (un div real escrito en el HTML justo tras <body>: ni los pseudoelementos ni un div añadido después por script cuentan) y abajo no puede haber
   capas fijas a pantalla completa. */
.site-scrollport{display:contents}
.site-notch{display:none}
@media(max-width:600px){
 /* overflow visible en html y body, como en Zagal: con overflow-x:clip Safari vuelve a tapar abajo y a dejar ver arriba. */
 html:has(body.service-social-compact){height:auto;overflow:visible;background:var(--ink,#e7dcee);overscroll-behavior:none}
 html body.service-social-compact{height:auto;overflow:visible;margin:0;padding-top:calc(env(safe-area-inset-top,0px) + 8px);overscroll-behavior:none;background:var(--ink,#e7dcee)}
 html body.service-social-compact::before{display:none!important;content:none!important}
 .site-notch{display:block;position:fixed;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 8px);background:var(--ink,#e7dcee);z-index:99}
 html{scroll-padding-top:64px}
 html body.service-social-compact .site-menu{top:env(safe-area-inset-top,0px);transform:translateX(-50%);transition:none}
 html body.service-social-compact .site-menu::before,
 html body.service-social-compact .site-menu::after{top:8px}
 html:has(.lightbox.open){overflow:hidden}
 html body.service-social-compact .web-hero-veil{display:none!important}
 /* El hero fijo se queda debajo de la muesca (antes lo hacía el contenedor de scroll) y con fondo opaco del color de
    la página: un sticky transparente que llega a la muesca hace que Safari deje ver el contenido en ella. */
 html body.service-social-compact main>:is(.page-hero,section.hero){background-color:var(--ink,#e7dcee)!important}
 /* Pegado justo debajo de la muesca, sin hueco entre ambos (como en Zagal). */
 html body.service-social-compact:not(.wa-page) main>:is(.page-hero,section.hero){top:calc(env(safe-area-inset-top,0px) + 8px)}
 /* Sombra corta y pegada al botón: una más amplia se ve cortada por la barra de Safari. */
 html body.service-social-compact .llcw-toggle{box-shadow:0 3px 8px rgba(20,16,30,.22)}
 .site-scrollport :is([id],input,textarea,button){scroll-margin-top:64px}
}
/* Keep the contact introduction in its grid row on narrow screens. */
/* La galería cerrada se oculta del todo (no solo con opacidad 0): una capa fija a pantalla completa, aunque sea invisible, hace que Safari deje ver el contenido en la muesca. */
.lightbox:not(.open){visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
@media(max-width:800px){body.info-page.contacto-page .contact-left-top{display:block}}