/* =========================================
   RESET BÁSICO
========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000 url(../img/bg-riandutra.jpg) top center no-repeat;
  background-size: 1920px auto;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  /* background-attachment: fixed; */
}

h1, h2, h3, h4, .title, .hero__title, .training__title, .realtraining__title, .offer__title {
  font-family: 'Passion One', cursive;
}

a.cta_primary {
  width: auto;
  display: inline-block;
  background: #FF003A;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 800;
  height: 72px;
  line-height: 72px;
  padding: 0 40px;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.2s ease;
}
a.cta_primary:hover {
  transform: scale(1.04,1.04);
}
.cta_primary__subtext {
  font-size: 12px;
  font-weight: normal;
}

.section_base {
  padding: 64px 0;
  border-top: 4px solid rgba(47,47,47,0.56);
}

h2 {
  font-size: 56px;
  line-height: 90%;
  margin-bottom: 24px;
  font-weight: bold;
  color: #fff;
}
h2.h2--size2 {
  font-size: 40px;
}
h2.h2--special1 {
  font-size: 72px;
  line-height: 90%;
  color: #FF003A;
}

.u-color-white { color: #fff }
.u-color-red { color: #FF003A }
.u-note {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

.u-pill-classes {
  background: rgba(255,255,255,0.12);
  display: inline-block;
  font-size: 12px;
  border-radius: 40px;
  padding: 4px 12px;
  font-weight: 500;
  vertical-align: middle;
}
.u-pill-classes-color {
  display: inline-block;
  font-size: 12px;
  border-radius: 40px;
  padding: 4px 12px;
  font-weight: 500;
  vertical-align: middle;
  border: 1px solid #FF003A;
  color: #FF003A;
}



/* =========================================
   TOPBAR
========================================= */
.topbar {
  position: relative;
  background: #FF8000;
  border-bottom: 1px solid ##FF8000;
  text-align: center;
  color: #000;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
}
.topbar--default {
  background: none;
  color: #fff;
  border-bottom: 1px solid #666666;
}
.topbar__brand {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  left: 16px;
}
.topbar__brand {}
.topbar__brand__logo {
  height: 24px;
}
.topbar__brand__title {
  font-size: 12px;
  margin-left: 8px;
}

/* =========================================
   HERO
========================================= */
.hero {
  padding-top: 96px;
  padding-bottom: 64px;
}
.hero__content {}
.hero__title {
  font-size: 112px;
  line-height: 80%;
  color: #FF003A;
}
.hero__subtitle {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 40px;
}
.hero__subtitle__highlight {
  position: relative;
}
.hero__subtitle__highlight:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 10px;
  width: 100%;
  background: #FF003A;
  mix-blend-mode: plus-lighter;
}
.hero__pricing {
  font-size: 16px;
}
.hero__pricing__price-current {
  font-weight: 800;
}
.hero__pricing__price-old {
  text-decoration: line-through;
}
.hero__pricing__price-discount {
  opacity: 0.48;
}

/* =========================================
   INSIGHT
========================================= */
.insight {
  text-align: center;
  font-size: 40px;
  line-height: 120%;
  margin-bottom: 64px;
  cursor: default;
  pointer-events: none;
}
.text-blur-terror {
  animation: terrorBlur 3s infinite;
}

@keyframes terrorBlur {
  0%   { filter: blur(0px); }
  25%  { filter: blur(4px); }
  28%  { filter: blur(2px); }
  40%  { filter: blur(0px); }
  55%  { filter: blur(2px); }
  60%  { filter: blur(4px); }
  75%  { filter: blur(2px); }
  100% { filter: blur(4px); }
}



/* =========================================
   TRAINING
========================================= */
.training {}
.training__left {}
.training__left__sticky {
  position: sticky;
  top: 88px;
}
.training__right {}
.training__title {}
.training__subtitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
}
.training__card {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 24px 16px 64px;
  margin-bottom: 32px;
  position: relative;
}
.training__card::before {
  content: "🧠";
  position: absolute;
  top: 50%;
  left: 18px;
  margin-top: -20px;
  font-size: 24px;
  width: 56px;
  height: 56px;
}
.training__button {}
.training__pricing {}
.training__pricing__price-current {}
.training__pricing__price-old {}
.training__pricing__price-discount {}

.training__accordion {}
.training__module {
  border: 0;
  background: none;
}
.training__module-title,
.training__module-title[aria-expanded=true] {
  font-size: 24px;
  font-weight: 700;
  background: none;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,0.32);
}
.training__module-title:hover {
  background: rgba(255,255,255,0.1);
}
.training__module-title[aria-expanded=true] {
  border-bottom: 0;
}
.training__module-title:after {
  filter: brightness(0) invert(1);
}
.training__module-list {
  padding: 0;
  margin: -12px 0 0 0;
}
.training__module-list li {
  color: #fff;
  list-style: none;
  font-size: 16px;
  font-weight: 300;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.training__module-list li strong {
  font-weight: bold;
}

/* =========================================
   AUDIENCE
========================================= */
.audience {}
.audience__title {}
.audience__items {}
.audience__item {}

/* =========================================
   REALTRAINING
========================================= */
.realtraining {}
.realtraining__left {}
.realtraining__right {}
.realtraining__title {}
.realtraining__left__cta {
  padding-top: 24px;
}
.realtraining__subtitle {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 24px;
}
.realtraining__text {
  font-size: 18px;
}

/* =========================================
   ABOUT
========================================= */
.about {}
.about__title {}
.about__content {}
.about__profile {}
.about__photo {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 64px;
  margin-bottom: 24px;
}
.about__social {
  font-size: 18px;
  margin-bottom: 12px;
}
.about__bio {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}
.about__textblock {
  font-size: 16px;
  font-weight: 300;
  line-height: 170%;
}
.about__textblock strong {
  font-weight: 700;
}

/* =========================================
   BONUS
========================================= */
.bonus {}
.bonus__title {}
.bonus__subtitle {}
.bonus__grid {}

.bonus-card {
  background: #181818;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 20px;
}
.bonus-card__tag {
  border: 1px solid #fff;
  display: inline-block;
  cursor: #fff;
  font-size: 11px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 4px 8px;
  margin-bottom: 12px;
}
.bonus-card__tag--economy {
  border-color: #22C2B6;
  color: #22C2B6;
}
.bonus-card__tag--ai {
  border-color: #EB34FF;
  color: #EB34FF;
}
.bonus-card__tag--marketing {
  border-color: #FFBB34;
  color: #FFBB34;
}
.bonus-card__tag--design {
  border-color: #2DB0FB;
  color: #2DB0FB;
}
.bonus-card__title {
  font-size: 22px;
  letter-spacing: 0.2px;
  line-height: 120%;
  font-weight: normal;
  margin-bottom: 12px;
}
.bonus-card__title--secret {
  filter: blur(6px);
  opacity: 0.72;
}

/* =========================================
   OFFER
========================================= */
.offer {
  text-align: center;
}
.offer__alert {
  color: #FF003A;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 32px;
}
.offer__alert-icon {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 2px;
  background: url(../img/icon-loading.svg) center no-repeat;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.offer__alert-text {}
.offer__title {}
.offer__pricing {}
.offer__price-old {
  font-size: 40px;
  text-decoration: line-through;
  margin-right: 24px;
  opacity: 0.56;
}
.offer__price-current {
  font-size: 56px;
  font-weight: 800;
}
.offer__button {}
.offer__payments {}

/* =========================================
   FAQ
========================================= */
.faq {}
.faq a {
  color: #fff;
  text-decoration: none;
}
.faq a:hover {
  text-decoration: underline;
}
.faq__title {}
.faq__group {
  margin-bottom: 40px;
}
.faq__group-title {
  font-size: 20px;
  font-weight: 800;
  padding: 12px 0;
  border-bottom: 1px solid #FF003A;
  margin-bottom: 8px;
}
.faq__accordion {
  background: none;
  color: #fff;
}
.faq__item {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.faq__question,
.faq__question[aria-expanded=true] {
  color: rgba(255,255,255,0.8);
  font-weight: 700;
  background: none;
  box-shadow: none;
  padding: 12px 0;
  cursor: pointer;
}
.faq__question:hover {
  background: rgba(255,255,255,0.1);
}
.faq__question:after {
  filter: brightness(0) invert(1);
}
.faq__answer {
  font-size: 14px;
  color: rgba(255,255,255,0.56);
  padding: 0 0 32px 0;
}


/* =========================================
   FOOTER
========================================= */
.footer {
  border-top: 4px solid rgba(47,47,47,0.56);
  padding: 24px 0;
}
.footer a {
  color: #fff;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}
.footer__brand {
}
.footer__brand {}
.footer__brand__logo {
  height: 24px;
}
.footer__brand__title {
  font-size: 12px;
  margin-left: 8px;
}
.footer__tagline {
  margin-top: 8px;
  font-size: 12px;
}
.footer__right {
  font-size: 14px;
}

/* =========================================
   UTILITÁRIOS
========================================= */
.u-color-red {}
.u-note {}





/* MOBILE */
@media (max-width: 767px) {

  body {
    background: #000 url(../img/bg-riandutra-mobile.jpg) top center no-repeat;
    background-size: 100% auto;
  }

  .section_base {
    padding: 32px 0;
    border-top: 4px solid rgba(47,47,47,0.56);
  }

  h2 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 16px;
  }
  h2.h2--size2 {
    font-size: 32px;
  }
  h2.h2--special1 {
    font-size: 40px;
    color: #FF003A;
  }

  /* =========================================
     TOPBAR
  ========================================= */
  .topbar {
    height: auto;
    line-height: normal;
    font-size: 12px;
    padding: 8px 0;
  }
  .topbar__brand {
    left: 12px;
  }
  .topbar__brand__title {
    display: none;
  }

  /* =========================================
     HERO
  ========================================= */
  .hero {
    padding-top: 280px;
    padding-bottom: 32px;
    text-align: center;
  }
  .hero__content {}
  .hero__title {
    font-size: 64px;
  }
  .hero__subtitle {
    font-size: 18px;
    margin-bottom: 32px;
  }
  .hero__subtitle__highlight:after {
    height: 6px;
  }


  /* =========================================
     INSIGHT
  ========================================= */
  .insight {
    font-size: 24px;
    margin-top: 16px;
  }


  /* =========================================
     TRAINING
  ========================================= */

  .training__left__sticky {
    position: inherit;
    top: auto;
  }
  .training__subtitle {
    font-size: 16px;
    text-align: center;
  }
  .training__cta {
    text-align: center;
    margin-bottom: 32px;
  }
  .training__card {
    margin-bottom: 24px;
    font-size: 12px;
    line-height: 150%;
    padding: 16px 24px 16px 56px;
  }
  .training__card::before {
    margin-top: -12px;
    font-size: 20px;
    width: 48px;
    height: 48px;
  }

  .training__module-title,
  .training__module-title[aria-expanded=true] {
    font-size: 18px;
  }
  .training__module-list {
    padding: 0;
    margin: -12px 0 0 0;
  }
  .training__module-list li {
    font-size: 14px;
    padding: 6px 0;
  }


  /* =========================================
     AUDIENCE
  ========================================= */
  .audience {}
  .audience__title {}
  .audience__items {}
  .audience__item {
    text-align: center;
  }


  /* =========================================
     REALTRAINING
  ========================================= */
  .realtraining {
    text-align: center;
  }
  .realtraining__subtitle {
    font-size: 18px;
    margin-top: 12px;
    margin-bottom: 24px;
  }
  .realtraining__text {
    font-size: 14px;
    max-width: 80%;
    margin: auto;
  }


  /* =========================================
     ABOUT
  ========================================= */
  .about__profile {
    text-align: center;
    margin-bottom: 24px;
  }
  .about__photo {
    width: 88px;
    height: 88px;
    margin-bottom: 8px;
  }
  .about__social {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .about__bio {
    font-size: 11px;
    color: rgba(255,255,255,0.72);
  }
  .about__textblock {
    font-size: 13px;
    line-height: 150%;
  }



  /* =========================================
     BONUS
  ========================================= */

  .bonus-card {
    padding: 12px;
    margin-bottom: 20px;
  }
  .bonus-card__tag {
    font-size: 9px;
    border-radius: 6px;
    padding: 2px 6px;
    margin-bottom: 8px;
  }
  .bonus-card__title {
    font-size: 16px;
  }


  /* =========================================
     FAQ
  ========================================= */
  .faq__group {
    margin-bottom: 32px;
  }
  .faq__group-title {
    font-size: 18px;
  }
  .faq__question {
    font-size: 14px;
  }
  .faq__answer {
    font-size: 12px;
    line-height: 140%;
  }


  /* =========================================
     FOOTER
  ========================================= */
  .footer {
    text-align: center;
  }
  .footer__right {
    margin-top: 16px;
  }

}







/* */