:root{
  --container: 680px;
  --text: #1b1b1b;
  --font-arial: "arial";
  --font-lilita: "Lilita One", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
   --box-radius: 14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background: url("../images/background/main-bg.png") center top / cover repeat;
}

.container{
  width: min(var(--container), 100% - 32px);
  margin-inline:auto;
  position:relative;
}

.slice{ position:relative; }


.top-style{
  position:absolute;
  inset:0 0 auto 0;
  width:100%;
  height:auto;
  z-index:1;
  pointer-events:none;
}

.slice--top{ padding: clamp(72px, 10vw, 110px) 0 20px; }

.stage{
  position:relative;
  min-height: clamp(280px, 36vw, 420px);
  z-index:2;
}

.stage img{ display:block; max-width:100%; height:auto; }

.stage__trevo{
  position:absolute;
  left: 0;
  top: 0;
  width: clamp(260px, 45vw, 420px);
}

.stage__sucos{
  position:absolute;
  right: 0;
  top: clamp(40px, 6vw, 72px);
  width: clamp(220px, 35%, 420px);
}

.slice--mid{ padding: 8px 0 64px; }

.award-card{
  position:relative;
  margin-top: clamp(60px, 10vw, 120px);
}

.award-card__box{
  width:100%;
  display:block;
}


.award-card__box{ position: relative; z-index:20; display:block; width:100%; height:auto; }
.award-card__content{ z-index:30; }

.award-card__content{
  position: absolute;
   inset: 28% 16% 9% 16%;

  overflow: auto; 
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;

  padding: 14px 16px;
  border-radius: var(--box-radius);
  background: transparent;

  color:#222;
  line-height:1.45;
  font-size: clamp(.55rem, 1vw, 0.75rem);
  font-family: var(--font-arial);
}

.award-card__content::-webkit-scrollbar{ width: 8px; }
.award-card__content::-webkit-scrollbar-track{ background:#f1f1f1; border-radius:8px; }
.award-card__content::-webkit-scrollbar-thumb{ background:#c5c5c5; border-radius:8px; }


.award-card__banner{
  position:absolute;
  left:50%;
  top: 0;
  transform: translate(-50%, -46%);
  width: clamp(260px, 78%, 880px);
  z-index:3;
}

.award-card{ position: relative; }
.award-card__banner{ position: absolute; left:50%; top:0; transform: translate(-50%, -46%); z-index: 40; }
.award-card__box{ position: relative; z-index: 20; }

.award-card__selo{
  position: absolute;
  right: 3.5%;
  top: -15%;
  width: clamp(50px, 9vw, 76px);
  z-index: 10;
  pointer-events: none;
}
@media (max-width: 900px){
  .award-card__selo{
    right: 3%;
    top: -14%;
  }
}
@media (max-width: 700px){
  .award-card__selo{
    right: 3%;
    top: -12%;
  }
}
@media (max-width: 570px){
  .award-card__selo{
    right: 3%;
    top: -12%;
  }
}
@media (max-width: 450px){
  .award-card__selo{
    right: -1%;
    top: -17%;
  }
}
@media (max-width: 360px){
  .award-card__selo{
    right: -2%;
    top: -16%;
    width: clamp(42px, 11vw, 60px);
  }
}


.store-bottom{
  margin-top: clamp(22px, 5vw, 38px);
  text-align:center;
}

.store-note{
  color:#ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  font-weight:200;
  line-height:1.35;
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  margin: 0 0 18px;
  font-family: var(--font-lilita);;
}
.store-note .highlight{ color:#5d2a6f; }

.frisco-logo{
  width: clamp(120px, 22vw, 200px);
  height:auto;
  margin-inline:auto;
  display:block;
}

@media (max-width: 700px){
  .stage{ 
    min-height: 200px;
  }

  .stage__trevo{
    left: min(16px, -2vw);
    top: 0;
    width: clamp(200px, 54vw, 360px);
    transform: none;
    z-index: 1;
  }

  .stage__sucos{
    right: min(16px, -2vw);
    top: clamp(8px, 2vw, 18px);
    width: clamp(140px, 38vw, 280px);
    transform: none;
    z-index: 2;
  }

  .award-card{
    margin-top: clamp(48px, 18vw, 120px);
  }
}

@media (max-width: 380px){
  .stage__trevo{ width: 55vw; }
  .stage__sucos{ width: 40vw; top: 10px; }
}

@media (max-width: 550px){
  .slice--mid{
    margin-top: -5%;
  }
}
@media (max-width: 490px){
  .slice--mid{
    margin-top: -12%;
  }
}
@media (max-width: 390px){
  .slice--mid{
    margin-top: -20%;
  }
}
@media (min-width: 850px){
  .slice--mid{
    margin-top: -5%;
  }
}
@media (min-width: 1200px){
  .top-style {
    width: 60%;
}
}
@media (min-width: 1088px) {
    .slice--mid {
        margin-top: -10%;
    }
}
@media (min-width: 1720px) {
    .slice--mid {
        margin-top: -6%;
    }
}


.award-card__content ol,
.award-card__content ul {
  margin: 0;
  padding-left: 18px;
}

.award-card__content li {
  margin: 0;
  padding: 0;
}

.award-card__content h2{
  font-size: clamp(9px, 1vw, 13px);
}