/* ══ PLANOS ══════════════════════════════════════════════════════════ */

.planos-pg {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 20px 60px;
}

/* ── Hero ── */
.planos-hero {
    text-align: center;
    margin-bottom: 48px;
}

.planos-hero h1 {
    font-size: 32px;
    font-weight: 800;
    color: #0d2654;
    margin-bottom: 12px;
    line-height: 1.2;
}

.planos-hero p {
    font-size: 17px;
    color: #4a5568;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Cards grid ── */
.planos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* ── Card base ── */
.plano-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 2px 20px rgba(0,40,100,.08);
    border: 2px solid #e2e8f0;
    position: relative;
    transition: transform .2s, box-shadow .2s;
}

.plano-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,40,100,.12);
}

/* ── Card Básico ── */
.plano-card.plano-basico {
    border-color: #0891b2;
    background: linear-gradient(160deg, #0e7490 0%, #0891b2 100%);
    color: #fff;
}

.plano-card.plano-basico .plano-nome     { color: #fff; }
.plano-card.plano-basico .plano-subtitulo { color: rgba(255,255,255,.7); }
.plano-card.plano-basico .plano-preco-wrap { border-bottom-color: rgba(255,255,255,.15); }
.plano-card.plano-basico .plano-cifrao   { color: rgba(255,255,255,.8); }
.plano-card.plano-basico .plano-valor    { color: #fff; }
.plano-card.plano-basico .plano-periodo  { color: rgba(255,255,255,.65); }
.plano-card.plano-basico .plano-features li { color: rgba(255,255,255,.9); }
.plano-card.plano-basico .plano-features .feat-icon.ok {
    background: rgba(255,255,255,.2);
    color: #6ee7b7;
}

/* ── Card Pro destacado ── */
.plano-card.plano-pro {
    border-color: #0055a4;
    background: linear-gradient(160deg, #0d2654 0%, #0055a4 100%);
    color: #fff;
}

/* ── Tag "Mais popular" ── */
.plano-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 99px;
    white-space: nowrap;
    letter-spacing: .3px;
}

/* ── Cabeçalho do card ── */
.plano-nome {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
    color: #0d2654;
}

.plano-card.plano-pro .plano-nome { color: #fff; }

.plano-subtitulo {
    font-size: 13px;
    color: #6b7a8d;
    margin-bottom: 24px;
}

.plano-card.plano-pro .plano-subtitulo { color: rgba(255,255,255,.7); }

/* ── Preço ── */
.plano-preco-wrap {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}

.plano-card.plano-pro .plano-preco-wrap { border-bottom-color: rgba(255,255,255,.15); }

.plano-cifrao {
    font-size: 18px;
    font-weight: 700;
    color: #4a5568;
    line-height: 1;
    padding-bottom: 4px;
}

.plano-card.plano-pro .plano-cifrao { color: rgba(255,255,255,.8); }

.plano-valor {
    font-size: 42px;
    font-weight: 900;
    color: #0d2654;
    line-height: 1;
}

.plano-card.plano-pro .plano-valor { color: #fff; }

.plano-periodo {
    font-size: 14px;
    color: #6b7a8d;
    padding-bottom: 6px;
}

.plano-card.plano-pro .plano-periodo { color: rgba(255,255,255,.65); }

/* ── Lista de recursos ── */
.plano-features {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.plano-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #2d3748;
    line-height: 1.4;
}

.plano-card.plano-pro .plano-features li { color: rgba(255,255,255,.9); }

.plano-features .feat-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}

.plano-features .feat-icon.ok {
    background: #dcfce7;
    color: #16a34a;
}

.plano-card.plano-pro .plano-features .feat-icon.ok {
    background: rgba(255,255,255,.2);
    color: #86efac;
}

.plano-features .feat-icon.no {
    background: #f1f5f9;
    color: #94a3b8;
}

.plano-features strong {
    font-weight: 700;
}

/* ── Botão CTA ── */
.btn-plano {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background .15s, transform .1s;
    text-decoration: none;
}

.btn-plano-gratis {
    background: #f0f4fa;
    color: #0d2654;
    border: 2px solid #e2e8f0;
}

.btn-plano-gratis:hover { background: #e2e8f0; }

.btn-plano-basico {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
    opacity: .92;
}

.btn-plano-basico:hover { opacity: 1; }

.btn-plano-pro {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    opacity: .92;
}

.btn-plano-pro:hover { opacity: 1; }

/* ── Nota rodapé ── */
.planos-nota {
    text-align: center;
    margin-top: 32px;
    font-size: 13px;
    color: #6b7a8d;
}

.planos-nota a { color: #0055a4; }

/* ── FAQ / aviso de limite ── */
.planos-aviso {
    background: #fff8e7;
    border: 1.5px solid #fcd34d;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #92400e;
}

.planos-aviso i { font-size: 20px; color: #d97706; flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .planos-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .planos-hero h1 { font-size: 24px; }
    .planos-grid     { grid-template-columns: 1fr; }
    .plano-card      { padding: 28px 22px; }
    .plano-valor     { font-size: 36px; }
}