﻿:root{
  --prisma-mobile-nav-height:74px;
  --prisma-mobile-gold:#ffcc00;
  --prisma-mobile-bg:#000;
  --olair-orange:#f16226;
  --olair-green:#03ad44;
  --olair-blue:#444dff;
  --olair-lilac:#c266ff;
  --olair-cream:#fff9e1;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color-scheme:dark;
}

body{
  touch-action:manipulation;
}

button,
input,
select,
textarea{
  font:inherit;
}

.prisma-mobile-nav{
  box-sizing:border-box;
  position:relative;
  z-index:3;
  grid-column:1/-1;
  justify-self:center;
  display:grid;
  grid-template-columns:repeat(3, auto);
  gap:8px;
  padding:7px;
  margin:10px auto 0;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.26), transparent);
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}

.prisma-mobile-nav *,
.prisma-mobile-nav *::before,
.prisma-mobile-nav *::after{
  box-sizing:border-box;
}

.prisma-mobile-nav a,
.prisma-mobile-nav button{
  min-width:0;
  min-height:38px;
  display:inline-grid;
  grid-auto-flow:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--prisma-mobile-gold);
  text-decoration:none;
  text-transform:uppercase;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
}

.prisma-mobile-nav svg{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
}

.prisma-mobile-nav .is-current{
  background:transparent;
  color:var(--prisma-mobile-gold);
}

@media(max-width:760px){
  :root{
    --prisma-mobile-nav-height:78px;
  }

  html,
  body{
    width:100%;
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  body.prisma-mobile-ready{
    height:auto !important;
    min-height:100dvh !important;
    overflow-y:scroll !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(var(--prisma-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  body,
  .page,
  .main,
  .tela01{
    min-height:100dvh;
  }

  .page,
  .main,
  .tela01,
  main{
    max-width:100vw;
  }

  .page{
    width:calc(100% - 28px) !important;
    max-width:980px !important;
  }

  .main,
  main{
    padding-left:max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right:max(16px, env(safe-area-inset-right, 0px)) !important;
  }

  header,
  nav,
  footer,
  .footer-prisma{
    max-width:100%;
  }

  nav{
    gap:12px !important;
  }

  h1,
  .marca{
    max-width:100%;
    letter-spacing:.08em !important;
    line-height:1.05 !important;
    overflow-wrap:break-word;
    text-align:center;
  }

  h1{
    font-size:2.35rem !important;
  }

  .marca{
    font-size:2.8rem !important;
  }

  p,
  label,
  .sub,
  .subtitulo,
  .frases-viva,
  .slogan-solo,
  .sap-frase{
    overflow-wrap:break-word;
  }

  input,
  textarea,
  select{
    min-height:48px;
    font-size:16px !important;
  }

  button,
  .btn,
  .btn-sync,
  .btn-vincular,
  .btn-navegar,
  .btn-main,
  .btn-sec{
    min-height:48px;
    max-width:100%;
    white-space:normal;
  }

  .btn,
  .btn-sync,
  .btn-vincular,
  .btn-navegar{
    width:100%;
  }

  .teia{
    width:min(330px, 86vw) !important;
    height:min(330px, 86vw) !important;
  }

  .mandala-wrap{
    width:min(340px, 82vw) !important;
  }

  .container-frases{
    margin-bottom:42px !important;
  }

  .frases-viva{
    font-size:1.35rem !important;
    line-height:1.45 !important;
  }

  .status-sensorial{
    font-size:1.25rem !important;
    letter-spacing:.12em !important;
  }

  footer,
  .footer-prisma{
    grid-template-columns:1fr !important;
    flex-direction:column !important;
    gap:14px !important;
    text-align:center !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  footer *,
  .footer-prisma *{
    text-align:center !important;
  }

  .card-prisma13,
  .card-yoga{
    width:min(100%, 430px) !important;
    padding:22px !important;
  }

  .timer{
    font-size:2.4rem !important;
  }

  .prisma-mobile-nav{
    left:10px !important;
    right:auto !important;
    top:auto;
    bottom:0;
    width:min(368px, calc(100vw - 20px)) !important;
    max-width:min(368px, calc(100vw - 20px)) !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:6px !important;
    overflow-x:hidden;
    min-height:var(--prisma-mobile-nav-height);
    padding:8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    background:linear-gradient(90deg, transparent, rgba(0,0,0,.30), transparent);
    border-top:0;
    box-shadow:none;
    backdrop-filter:none;
  }

  .prisma-mobile-nav a,
  .prisma-mobile-nav button{
    width:100%;
    min-width:0;
    min-height:52px;
    display:grid;
    place-items:center;
    gap:3px;
    border-radius:8px;
    font-size:.56rem !important;
    letter-spacing:.05em !important;
    padding:0 8px;
    overflow:hidden;
    white-space:normal;
  }

  .prisma-mobile-nav svg{
    width:20px;
    height:20px;
  }

  .prisma-mobile-nav span{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
}

@media(max-width:380px){
  h1{
    font-size:2rem !important;
  }

  .marca{
    font-size:2.35rem !important;
  }

  .prisma-mobile-nav a,
  .prisma-mobile-nav button{
    font-size:.56rem;
    letter-spacing:.04em;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}
