@charset "utf-8";

/* ALTERAÇÃO: arquivo criado. Estilos usados SÓ na página planos.html */

.banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), black), url(../img/fotos-box/imagem-nova-04.jpg);
}

.planos article {
    text-align: center;
    padding: 20px 0 30px 0;
    position: relative;   /* referência para posicionar a etiqueta "Mais escolhido" */
    overflow: visible;    /* deixa a etiqueta aparecer para fora do card */
    /* ALTERAÇÃO: cada card ocupa 28% da largura, então cabem 3 por linha.
       flex-grow: 0 impede o card de esticar: nas seções com 1 card só (Hiit e Plano Alpha)
       ele fica do mesmo tamanho dos cards do Cross Training, centralizado pelo .grade do style.css */
    flex-grow: 0;
    flex-basis: 28%;
}
/* ALTERAÇÃO: o h3 dos planos perdeu a borda, que fazia o título parecer um botão */
.planos article h3 {
    font-size: 36px;
    margin: 10px 0 0 0;
}
/* ALTERAÇÃO: "#planos" virou ".planos" em todo o arquivo, porque agora são 3 seções de planos com a mesma classe.
   ALTERAÇÃO: as regras do preço (.preco e .preco small) foram apagadas, porque os donos pediram para não mostrar os valores */
.planos ul {
    list-style: none;
    padding: 0 20px;
    margin-bottom: 30px;
}
.planos li {
    padding: 8px 0;
    border-bottom: 1px solid #333; /* linha separando os itens */
}

/* ALTERAÇÃO: plano em destaque, com borda amarela e um pouco maior que os outros */
.destaque {
    border: 2px solid #FFC300;
    transform: scale(1.05); /* scale(1.05) = 5% maior */
}
.destaque:hover {
    transform: scale(1.05) translateY(-5px); /* mantém o tamanho maior também no hover */
}
.etiqueta {
    position: absolute;
    top: -15px;            /* sobe a etiqueta para ficar em cima da borda do card */
    left: 50%;
    transform: translateX(-50%); /* volta metade da própria largura, ficando centralizada */
    background-color: #FFC300;
    color: black;
    font-family: "Bebas Neue", sans-serif;
    font-size: 18px;
    padding: 4px 20px;
    border-radius: 20px;
    white-space: nowrap;   /* não deixa o texto quebrar em duas linhas */
}

/* Perguntas frequentes */
#duvidas {
    padding: 100px 15%;
}
#duvidas details {
    background-color: #1c1c1c;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 20px;
}
#duvidas summary {
    font-size: 22px;
    cursor: pointer;
}
/* [open] = quando o details está aberto, a pergunta fica amarela */
#duvidas details[open] summary {
    color: #FFC300;
}
#duvidas details p {
    color: gray;
    font-size: 18px;
}

/* ALTERAÇÃO: no tablet cabem só 2 cards por linha */
@media screen and (max-width: 900px) {
    .planos article {
        flex-basis: 40%;
    }
}

@media screen and (max-width: 600px) {
    /* ALTERAÇÃO: no celular, um card por linha. Precisa repetir aqui porque o ".planos article"
       lá de cima é mais forte que o ".card" do style.css */
    .planos article {
        flex-basis: 100%;
    }
    .destaque, .destaque:hover {
        transform: none; /* no celular os cards ficam um embaixo do outro, então não precisa aumentar */
    }
    #duvidas {
        padding: 60px 5%;
    }
}