/* monmenjar.com — landing bàsica */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:max(1.5rem,env(safe-area-inset-top)) 1.5rem max(1.5rem,env(safe-area-inset-bottom));
  background:#fff;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#0f2b31;
}

main{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

picture{display:contents}

.logo{
  display:block;
  width:min(86vw,520px);
  height:auto;
  animation:rise .8s cubic-bezier(.22,.9,.28,1) both;
}

.rule{
  width:min(60vw,180px);
  height:2px;
  margin-top:clamp(2rem,5vh,3rem);
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#0098b0,transparent);
  opacity:.5;
  animation:rise .8s .18s cubic-bezier(.22,.9,.28,1) both;
}


@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .logo,.rule{animation:none}
}

@media (min-width:1200px){
  .logo{width:min(60vw,600px)}
}