/* ==========================================================
   ATHENAS BILLING
========================================================== */

.athenas-plans-page{

    max-width:1500px;

    margin:80px auto;

    padding:0 20px;

}

.athenas-plans{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:30px;

    flex-wrap:wrap;

}

.athenas-plans-header{

    text-align:center;

    margin-bottom:70px;

}

.athenas-plans-header h1{

    font-size:52px;

    font-weight:800;

    color:#273469;

    margin-bottom:20px;

    line-height:1.2;

}

.athenas-plans-header p{

    max-width:760px;

    margin:auto;

    font-size:20px;

    color:#64748B;

    line-height:1.8;

}

/* ==========================================================
   GRID
========================================================== */

.athenas-plans{

    display:grid;

    grid-template-columns:minmax(340px,1fr) minmax(340px,1fr) minmax(340px,1fr);

    gap:4px;

    align-items:stretch;

}

/*==========================================================
CARD
==========================================================*/

.athenas-plan-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:22px;

    padding:40px;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    transition:.25s;

    height:100%;

}

.athenas-plan-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 55px rgba(0,0,0,.10);

}

.athenas-plan-card.featured{

    border:2px solid #6C72F5;

}

/* ==========================================================
   BADGE
========================================================== */

.athenas-badge{

    position:absolute;

    top:-16px;

    left:40px;

    background:#6C72F5;

    color:#fff;

    padding:10px 18px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

}

/*==========================================================
TÍTULO DOS CARDS
==========================================================*/

.athenas-plan-title{

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    font-weight:800;

    color:#273469;

    text-align:center;

    margin-bottom:18px;

}

/*==========================================================
PREÇO
==========================================================*/

.athenas-price{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:4px;

    height:75px;

    margin-bottom:30px;

    color:#273469;

    font-weight:800;

    line-height:1;

}

.athenas-price .currency{

    font-size:24px;

    margin-bottom:8px;

}

.athenas-price{

    font-size:50px;

}

.athenas-price .period{

    font-size:18px;

    color:#64748B;

    margin-bottom:6px;

    white-space:nowrap;

}

/*==========================================================
ECONOMIA
==========================================================*/

.athenas-saving{

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#16A34A;

    font-size:15px;

    margin-bottom:20px;

    line-height:1.5;

}

/*==========================================================
LISTA
==========================================================*/

.athenas-plan-card ul{

    flex:1;

    list-style:none;

    padding:0;

    margin:0;

}

.athenas-plan-card li{

    font-size:17px;

    line-height:2;

    color:#475569;

}

/* ==========================================================
   BOTÕES
========================================================== */

.athenas-button-primary{

    display:block;

    margin-top:40px;

    background:#6C72F5;

    color:#fff;

    text-align:center;

    padding:18px;

    border-radius:14px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.25s;

}

.athenas-button-primary:hover{

    background:#575DE8;

    color:#fff;

    transform:translateY(-2px);

}

.athenas-button-disabled{

    width:100%;

    margin-top:40px;

    background:#CBD5E1;

    color:#475569;

    border:none;

    padding:18px;

    border-radius:14px;

    font-size:17px;

    font-weight:700;

    cursor:not-allowed;

}

/* ==========================================================
   TEXTO DE SEGURANÇA
========================================================== */

.athenas-secure{

    margin-top:18px;

    text-align:center;

    font-size:14px;

    color:#64748B;

}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media(max-width:1100px){

    .athenas-plans{

        grid-template-columns:1fr;

    }

    .athenas-plans-header h1{

        font-size:40px;

    }

    .athenas-price{

        font-size:50px;

    }

}

/* ==========================================================
   PLANO ANUAL
========================================================== */

.athenas-plan-card.annual{

    border:2px solid #16A34A;

}

.athenas-badge.annual{

    background:#16A34A;

}

.athenas-button-primary.annual{

    background:#16A34A;

}

.athenas-button-primary.annual:hover{

    background:#15803D;

}

.athenas-saving{

    margin-top:-10px;

    margin-bottom:28px;

    color:#16A34A;

    font-size:16px;

    line-height:1.7;

}

/* Todos os cards com a mesma altura */

.athenas-plans{

    align-items:stretch;

}

.athenas-plan-card ul{

    flex:1;

}

/* Botões sempre alinhados embaixo */

.athenas-button-primary,
.athenas-button-disabled{

    margin-top:auto;

}

.athenas-secure{

    margin-top:15px;

    text-align:center;

}

/*==========================================================
LABELS DOS PLANOS
==========================================================*/

.athenas-plan-labels{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    margin-bottom:18px;

    text-align:center;

}

.athenas-plan-labels div{

    font-size:13px;

    font-weight:800;

    letter-spacing:.6px;

    text-transform:uppercase;

}

.athenas-plan-labels .popular{

    color:#6C72F5;

}

.athenas-plan-labels .annual{

    color:#16A34A;

}