/* =========================================
   ESTILO DA PÁGINA DE PLANOS (SaaS)
   ========================================= */
:root {
    --vinho: #360a03;
    --black: #0a0a0a;
    --dark-grey: #1b1b1b;
    --accent-red-border: #ac0f0f;
    --accent-red-shadow: rgba(194, 9, 9, 0.55);
    --accent-red-hover: #c70000;
    --red-premium: #ce1111; 
    --accent-gold: #FFBA42;
    --text-white: #ffffff;
}

/* =========================================
   NAVBAR
   ========================================= */
.saas-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    width: 100%;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 1px;
}
.logo-container img { height: 40px; filter: drop-shadow(0 0 5px var(--red-premium)); }

.title{
    font-family: Orbitron, sans-serif;
}

.btn-login-nav {
    background: rgba(255,0,0,0.1); /* Fundo avermelhado sutil */
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(5px);
    border: 1px solid var(--red-premium); /* Borda Vermelha */
    transition: 0.3s;
}
.btn-login-nav:hover { 
    background: var(--red-premium); 
    box-shadow: 0 0 15px var(--red-glow);
}

/* =========================================
   PLANOS & PREÇOS (FINAL: ALUNO + COACH)
   ========================================= */

body.saas-body {
    background: radial-gradient(circle at 50% -20%, #2a2a2a 0%, #0a0a0a 80%);
    min-height: 100vh;
}

/* Header Ajustado */
.planos-header {
    text-align: center;
    padding: 130px 20px 40px 20px;
    position: relative; z-index: 2;
}

.hero-title { font-size: 2.5rem; font-family: 'Orbitron', sans-serif; font-weight: 700; text-transform: uppercase; color: #fff; }
.text-gold { color: var(--accent-gold); text-shadow: 0 0 15px rgba(255, 186, 66, 0.4); }
.hero-sub { color: #ccc; font-size: 1rem; }

.pricing-section { padding-bottom: 100px; position: relative; z-index: 2; }

.pricing-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    justify-content: center;
    padding: 0 15px;
}

/* --- CARD GENÉRICO --- */
.plan-card {
    background: #161616; 
    border-radius: 20px;
    width: 100%;
    max-width: 360px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    transition: transform 0.3s ease;
    display: flex; flex-direction: column;
    overflow: visible; 
}

/* Header do Card */
.card-header {
    padding: 30px;
    text-align: center;
    border-bottom: 2px solid #222;
    background: #1a1a1a;
    border-radius: 20px 20px 0 0;
}

.plan-name {
    font-size: 1.1rem; font-weight: 900; letter-spacing: 1px;
    text-transform: uppercase; display: block; margin-bottom: 5px; color: #fff;
    font-family: 'Orbitron', sans-serif;
}

.plan-price {
    display: flex; justify-content: center; align-items: flex-start;
    line-height: 1; margin: 15px 0;
}
.currency { font-size: 1.2rem; font-weight: 600; margin-top: 5px; color: #888; }
.amount { font-size: 3.5rem; font-weight: 800; color: #fff; font-family: 'Roboto', sans-serif; }
.cents { font-size: 1.2rem; font-weight: 600; margin-top: 5px; color: #fff; }
.per-student { 
    font-size: 0.9rem; color: #aaa; 
    align-self: center; margin-left: 5px; 
    font-weight: normal; 
}

.plan-desc { font-size: 0.85rem; color: #999; min-height: 40px; }

/* Body do Card */
.card-body { padding: 30px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }

.feature-list { list-style: none; padding: 0; margin: 0 0 30px 0; }
.feature-list li {
    padding: 10px 0; color: #ddd; font-size: 0.9rem;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px dashed #333;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li i { font-size: 1rem; width: 25px; text-align: center; }


/* --- ESTILO: ALUNO BASIC --- */
.plan-card.basic { border: 2px solid #333; }
.plan-card.basic:hover { border-color: #555; transform: translateY(-5px); }
.plan-card.basic .plan-name { color: #ccc; }
.plan-card.basic .feature-list li.disabled { color: #444; text-decoration: line-through; }

.btn-plan-basic {
    display: block; width: 100%; padding: 15px; text-align: center;
    background: #222; border: 1px solid #444; border-radius: 10px;
    color: #fff; text-decoration: none; font-weight: 700;
    text-transform: uppercase; font-size: 0.9rem; transition: 0.3s;
}
.btn-plan-basic:hover { background: #333; border-color: #666; }


/* --- ESTILO: ALUNO PRO (GOLD) --- */
.plan-card.pro {
    background: linear-gradient(#161616, #161616) padding-box,
                linear-gradient(45deg, var(--accent-gold), var(--accent-red-border)) border-box;
    border: 3px solid transparent;
    transform: scale(1.03);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 20px rgba(255, 186, 66, 0.2);
    z-index: 5;
}
.plan-card.pro:hover { transform: scale(1.05); box-shadow: 0 40px 80px rgba(0,0,0,0.9), 0 0 30px rgba(255, 186, 66, 0.3); }

/* Badge */
.badge-popular {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(90deg, var(--accent-red-border), #ff4d4d);
    color: #fff; padding: 8px 25px; border-radius: 30px;
    font-size: 0.8rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 1px; box-shadow: 0 5px 15px rgba(206, 17, 17, 0.5);
    z-index: 10; white-space: nowrap;
}

.plan-card.pro .card-header { background: radial-gradient(circle at top, rgba(255, 186, 66, 0.15), #161616); border-bottom: 2px solid rgba(255, 186, 66, 0.3); }
.plan-card.pro .plan-name {
    background: linear-gradient(to bottom, #fff, var(--accent-gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.plan-card.pro .amount, .plan-card.pro .currency, .plan-card.pro .cents { color: var(--accent-gold); text-shadow: 0 0 20px rgba(255,186,66,0.4); }
.plan-card.pro .feature-list li.highlight { color: #fff; font-weight: 500; }
.plan-card.pro .feature-list li i { color: var(--accent-gold); }

.btn-plan-pro {
    display: block; width: 100%; padding: 18px; text-align: center;
    background: linear-gradient(135deg, var(--accent-gold) 0%, #b8860b 100%);
    border-radius: 10px; color: #000; text-decoration: none;
    font-weight: 900; font-size: 1rem; text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3); transition: 0.3s;
}
.btn-plan-pro:hover { filter: brightness(1.15); box-shadow: 0 0 30px rgba(212, 175, 55, 0.6); }


/* --- ESTILO: COACH (BLUE/CYAN) --- */
/* Cria um destaque diferente para separar público B2B */
.plan-card.coach {
    border: 2px solid #00a8ff;
    box-shadow: 0 10px 30px rgba(0, 168, 255, 0.15);
}
.plan-card.coach:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 168, 255, 0.3); }

.plan-card.coach .card-header {
    background: radial-gradient(circle at top, rgba(0, 168, 255, 0.15), #161616);
    border-bottom: 2px solid rgba(0, 168, 255, 0.3);
}
.plan-card.coach .plan-name { color: #00a8ff; }
.plan-card.coach .amount, .plan-card.coach .currency, .plan-card.coach .cents { color: #00a8ff; text-shadow: 0 0 15px rgba(0, 168, 255, 0.4); }
.plan-card.coach .feature-list li.highlight { color: #fff; font-weight: 500; }
.plan-card.coach .feature-list li i { color: #00a8ff; }

.btn-plan-coach {
    display: block; width: 100%; padding: 15px; text-align: center;
    background: transparent; border: 2px solid #00a8ff;
    border-radius: 10px; color: #00a8ff; text-decoration: none;
    font-weight: 700; font-size: 0.9rem; text-transform: uppercase;
    transition: 0.3s;
}
.btn-plan-coach:hover { background: #00a8ff; color: #000; box-shadow: 0 0 20px rgba(0, 168, 255, 0.5); }


/* --- FAQ / GARANTIA --- */
.faq-section { margin-top: 40px; text-align: center; }
.guarantee-seal {
    max-width: 600px; margin: 0 auto;
    background: linear-gradient(90deg, #1a1a1a, #222);
    border-left: 5px solid var(--accent-gold);
    padding: 30px; border-radius: 10px;
    display: flex; align-items: center; gap: 20px; text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.guarantee-seal i { font-size: 2.5rem; color: var(--accent-gold); }
.guarantee-seal h3 { color: #fff; margin: 0; font-size: 1.2rem; text-transform: uppercase; font-weight: 800; }
.guarantee-seal p { color: #aaa; margin: 5px 0 0 0; }


/* =========================================================
   RESPONSIVIDADE (Ajustes Críticos para Mobile)
   ========================================================= */

/* Desktop: 3 Colunas lado a lado */
@media (min-width: 1100px) {
    .pricing-grid {
        flex-direction: row; /* Lado a lado */
        align-items: center; 
        justify-content: center;
        gap: 20px;
        max-width: 1200px; margin: 0 auto;
    }
    
    .plan-card { max-width: 320px; }
    .plan-card.pro { transform: scale(1.1); z-index: 10; max-width: 340px; }
    .plan-card.pro:hover { transform: scale(1.12); }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1099px) {
    .pricing-grid {
        flex-direction: row;
        flex-wrap: wrap; 
        justify-content: center;
    }
    .plan-card.pro { margin: 20px 0; }
}

/* --- MOBILE PEQUENO (Abaixo de 380px - Ex: iPhone SE) --- */
@media (max-width: 380px) {
    
    /* Reduz título para não quebrar */
    .hero-title { font-size: 1.8rem; }
    
    /* Compacta o card internamente */
    .card-header { padding: 20px 10px; }
    .card-body { padding: 20px 15px; }
    
    /* Diminui fonte do preço */
    .amount { font-size: 2.5rem; }
    .currency, .cents { font-size: 1rem; }
    
    /* Ajusta lista */
    .feature-list li { font-size: 0.8rem; gap: 8px; }
    .feature-list li i { font-size: 0.9rem; width: 18px; }
    
    /* Botões menores */
    .btn-plan-basic, .btn-plan-pro, .btn-plan-coach { padding: 12px; font-size: 0.85rem; }
    
    /* Badge menor */
    .badge-popular { font-size: 0.7rem; padding: 6px 15px; min-width: auto; width: 80%; }
    
    .guarantee-seal { flex-direction: column; text-align: center; padding: 20px; }
}