/* Botones: al pasar el mouse se llenan de terracota desde abajo, con el borde en zigzag (como las cenefas de la marca). */
.tti-liq{position:relative!important;overflow:hidden!important;isolation:isolate}
.tti-liq::before{content:"";position:absolute;z-index:-1;left:-6%;width:112%;top:101%;height:calc(100% + 20px);background:var(--tti-liq,#B3684A);pointer-events:none;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V5L5 0l5 5 5-5 5 5V10Z'/%3E%3C/svg%3E") 0 0/20px 10px repeat-x,linear-gradient(#000,#000) 0 9px/100% 100% no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V5L5 0l5 5 5-5 5 5V10Z'/%3E%3C/svg%3E") 0 0/20px 10px repeat-x,linear-gradient(#000,#000) 0 9px/100% 100% no-repeat;
 transition:top .8s cubic-bezier(.3,.7,.2,1)}
.tti-liq:hover::before,.tti-liq:focus-visible::before{top:-12px;animation:tti-ola 1.1s linear infinite}
@keyframes tti-ola{to{-webkit-mask-position:20px 0,0 9px;mask-position:20px 0,0 9px}}
/* el fondo propio del botón no cambia al pasar el mouse: lo cambia el líquido */
.tti-liq:hover,.tti-liq:focus{background-color:var(--tti-base,transparent)!important}
.tti-liq{transition:color .3s ease .15s,border-color .3s ease .1s}
@media (prefers-reduced-motion:reduce){.tti-liq::before{transition:none;animation:none!important}}

/* con el fondo terracota el texto (y los iconos) pasan a color claro */
.tti-liq:hover,.tti-liq:focus,.tti-liq:focus-visible,.tti-liq:hover *,.tti-liq:focus *{color:#F2EDE7!important}
.tti-liq:hover svg,.tti-liq:focus svg{stroke:currentColor}