/* Geral */
:root {
  /* Definição de Cores */
  --cor-primaria: #ed6a64;
  --cor-secundaria: #fbe7e5;
  --cor-terciaria: #225268;
  --cor-quaternaria: #e1e8ee;
  --cor-quinaria: #f3c3bd;
  --cor-sextanaria: #fae6e4;

  --font-family-roboto: "Roboto Regular", sans-serif;
  --font-family-sourceSerifPro: "SourceSerif", sans-serif;
}

.botoes-planos {
  gap: 20px;
}

.btn-academia {
  font-size: 15px;
  line-height: 1.2rem;
  font-family: var(--font-family-roboto);
}

.btn-anual {
  background: linear-gradient(90deg, #225268 0%, #5DB0D5 100%);
  box-shadow: 0px 3px 3px 0px #0000001A;
  box-shadow: 0px 3px 7.5px 0px #FFFFFF26 inset;
}

.btn-anual:hover{
  filter:saturate(130%) brightness(110%);
  background: linear-gradient(90deg, #225268 0%, #5DB0D5 100%);
}

.btn-vitalicio {
  background: linear-gradient(90deg, #ED6A64 0%, #FF8580 100%);
  box-shadow: 0px 3px 3px 0px #0000001A;
  box-shadow: 0px 3px 7.5px 0px #FFFFFF26 inset;
}

#btn-vitalicio-5 {
  background: linear-gradient(90deg, #a72922 0%, #FF8580 100%);
}

main .conteudo .topo img.logo-anual-vitalicio {
  width: 250px;
  max-width: 100%;
}

@media (max-width: 767px) {
  #header-anual .btn-anual,
  #header-anual .btn-vitalicio {
    width: 100%;
  }

  main .conteudo .topo img.logo-anual-vitalicio {
    width: 150px;
  }
}

/* Benefícios planos: Anual e Vitalício */
.comparison-section{
    background:#245872;
    padding:90px 0;
}

.comparison-title{
  font-family:var(--font-family-sourceSerifPro);
  font-weight: 600;
  font-size: 32px;
  line-height: 120%;
  text-align: center;
  line-height: 1.2em;
  color: #FFFFFF;
  margin-bottom:60px;
}

.comparison-box{
    background:#faf8f8;
    border-radius:35px;
    padding:55px;
}

.header-plan{
    border-radius:18px;
    text-align:center;
    padding:25px;
    font-size:34px;
    font-weight:bold;
    color:#fff;
    transition:.35s;
}

.comparison-header > div {
    display: flex;
}

.header-plan {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-plan p {
  margin: 0;
  font-family: var(--font-family-sourceSerifPro);
  font-weight: 700;
  font-size: 26px;
  text-align: center;
  text-transform: uppercase;
}

.header-plan.annual {
  background: #225268;
}

.header-plan.annual p {
  color: #FFFFFF;
}

.header-plan.lifetime{
    background:#f7c4bd;
    color:#ef625b;
}

.feature{
    border-radius:18px;
    min-height:74px;
    display:flex;
    align-items:center;
    padding:25px 30px;
    transition:.35s;
  }
  
.feature p {
    margin: 0;
    font-family: var(--font-family-sourceSerifPro);
    font-weight:600;
    color:#28516b;
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
}

.value{
    border-radius:18px;
    min-height:74px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    transition:.35s;
}

.value.annual{
    background:#dce5ed;
    color:#0dc9a0;
}

.value.lifetime{
    background:#f8dfdc;
    color:#ef6d64;
}

.value.text {
  font-size:14px;
  font-weight:500;
}

.text p {
  margin: 0;
}

.annual-text{
    color:#28516b;
    background:#dce5ed;
}

.lifetime-text{
    color:#ef6d64;
    background:#f8dfdc;
}

.comparison-item{
    margin-top:16px;
    transition:.35s;
}

/* ======== HOVER ========= */

.comparison-item:hover{
    transform:translateY(-3px);
}

.comparison-item:hover .feature{
    background:#ffffff;
    color:#1a4961;
    box-shadow:
    0 10px 25px rgba(0,0,0,.10);
}

.comparison-item:hover .annual{
    background:#b7d4e7;
    color:#00c98c;
}

.comparison-item:hover .lifetime{
    background:#ffd7d1;
    color:#ff4d43;
}

.comparison-item:hover .annual-text{
    background:#b7d4e7;
}

.comparison-item:hover .lifetime-text{
    background:#ffd7d1;
}

/* BOTÕES */

.btn-plan{
    display:flex;
    gap: 10px;
    padding: 10px 15px;
    justify-content:center;
    align-items:center;
    height:72px;
    border-radius:18px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition: all 0.6s ease-in-out;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    font-family: var(--font-family-roboto);
}

.btn-annual{
  background: linear-gradient(90deg, #225268 0%, #5DB0D5 100%);
  box-shadow: 0px 3px 3px 0px #0000001A;
  box-shadow: 0px 3px 7.5px 0px #FFFFFF26 inset;
}

.btn-life{
  background: linear-gradient(90deg, #ED6A64 0%, #FF8580 100%);
  box-shadow: 0px 3px 3px 0px #0000001A;
  box-shadow: 0px 3px 7.5px 0px #FFFFFF26 inset;
}

.btn-plan:hover{
    transform: scale(1.03);
    color:#fff;
    filter:saturate(130%) brightness(110%);
    box-shadow:
    0 18px 35px rgba(0,0,0,.22);
}

.btn-plan:hover img {
  transform: translate(4px, -4px);
}

/* MOBILE */

@media(max-width:991px){
    .comparison-section{
        padding:60px 15px;
    }

    .comparison-title{
        font-size:34px;
        margin-bottom:35px;
    }

    .comparison-box{
        padding:18px;
        border-radius:25px;
    }

    .header-plan p {
      font-size: 14px;
    }

    .feature {
        padding: 10px;
    }

    .feature p{
        font-size:14px;
        padding: 0;
    }

    .value{
        font-size:20px;
    }

    .value.text{
        font-size:15px;
        text-align:center;
        padding:10px;
    }

    .btn-plan{
        margin-top:15px;
        font-size:18px;
        height:62px;
    }
}

@media(max-width: 600px){
    .header-plan p {
      font-size: 13px;
    }

    .feature p,
    .text p {
        font-size: 13px;
    }

    .comparison-header .col-4,
    .comparison-item .col-4 {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
}


/* Cursos Academia */
.cursos_conteudo span {
  font-family: var(--font-family-roboto);
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: #225268;
}