/**
 * Allfone - Landing Page de Captura de Leads
 * Ficheiro: aderir.css
 */

:root {
    --af-purple-dark: #120626;
    --af-purple-light: #6200ea;
    --af-purple-hover: #4b0082;
    --af-purple-text: #a27bff;
    --af-bg-light: #fafafa;
    --af-text-dark: #333333;
    --af-text-muted: #666666;
    --af-border-color: #dddddd;
}

/* Container Geral da Página */
.af-landing-wrapper {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    color: var(--af-text-dark) !important;
    width: 100% !important;
    position: relative !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

.af-landing-wrapper * {
    box-sizing: border-box !important;
}






/* ==========================================================================
   1. HERO SECTION (TOPO ESCURO)
   ========================================================================== */
/* 1. ESTILO BASE DO HERO (Comum a ambas as páginas) */
.af-hero-section {
    background-size: cover;
    color: #ffffff;
    padding: 60px 20px;
    /*width: 100%;*/
    display: block;
    clear: both;
}

/* 2. IMAGEM PARA A PÁGINA DE PARTICULARES (/aderir) */
.af-hero-section {
    background: linear-gradient(90deg, #0e0526 30%, rgba(14, 5, 38, 0.8) 60%, transparent 100%),
                url('images/living-room.jpg') no-repeat right center / cover; /* Adicionado / cover */
}

/* 3. IMAGEM PARA A PÁGINA DE EMPRESAS (/aderir-empresa) */
.af-landing-wrapper:has(input[name="nome_empresa"]) .af-hero-section {
    background: linear-gradient(90deg, #0e0526 30%, rgba(14, 5, 38, 0.8) 60%, transparent 100%),
                url('images/team-office-allfone.jpg') no-repeat right center / cover; /* Adicionado / cover */
}



.af-hero-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.af-hero-text {
    flex: 1 !important;
    min-width: 320px !important;
    text-align: left !important;
}

.af-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 6px 15px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
}

.af-hero-text h1 {
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
}

.af-hero-text h1 span {
    color: var(--af-purple-text) !important;
}

.af-hero-text p {
    font-size: 1.1rem !important;
    color: #dddddd !important;
    margin-bottom: 40px !important;
    line-height: 1.6 !important;
}

.af-hero-features {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.af-feat-item {
    font-size: 0.9rem !important;
    color: #eeeeee !important;
}

/* ==========================================================================
   2. FORMULÁRIO DE CAPTURA (CAIXA BRANCA)
   ========================================================================== */
.af-form-box {
    flex: 0 0 400px !important;
    background: #ffffff !important;
    color: var(--af-text-dark) !important;
    border-radius: 8px !important;
    padding: 30px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    z-index: 10 !important;
}

.af-form-box h3 {
    text-align: center !important;
    font-size: 1.4rem !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    color: #111111 !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.af-input-group {
    margin-bottom: 12px !important;
}

.af-input-group input, 
.af-input-group select, 
.af-input-group textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid var(--af-border-color) !important;
    border-radius: 4px !important;
    font-size: 0.95rem !important;
    background-color: #ffffff !important;
    color: var(--af-text-dark) !important;
    outline: none !important;
}

.af-input-group input:focus, 
.af-input-group select:focus, 
.af-input-group textarea:focus {
    border-color: var(--af-purple-light) !important;
}

.af-btn-submit {
    width: 100% !important;
    background: var(--af-purple-light) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: background 0.2s ease !important;
}

.af-btn-submit:hover {
    background: var(--af-purple-hover) !important;
}

.af-form-footer {
    text-align: center !important;
    font-size: 0.75rem !important;
    color: var(--af-text-muted) !important;
    margin-top: 15px !important;
}

/* ==========================================================================
   2.1. LOGOS
   ========================================================================== */
/* Estilo Base da Secção de Operadoras */
.af-section-desc {
    font-size: 0.95rem !important;
    color: var(--af-text-muted) !important;
    margin-bottom: 40px !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.af-logo-container {
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px 6px 0 0 !important;
    margin: -25px -25px 20px -25px !important;
}

/* Cores de fundo específicas dos blocos (Mockup) */
.af-brand-meo .af-logo-container {
    background-color: #005670 ; /* Azul escuro MEO */
}

.af-brand-nos .af-logo-container {
    background-color: #1c1c24 !important; /* Preto/Cinza muito escuro NOS */
}

.af-brand-vodafone .af-logo-container {
    background-color: #e60000 !important; /* Vermelho Vodafone */
}

.af-operator-logo {
    max-height: 45px !important;
    max-width: 80% !important;
    object-fit: contain !important;

    /* Força os logótipos escuros a ficarem 100% brancos */
    filter: brightness(0) invert(1) !important;
}

/* Links/Botões inferiores personalizados com setas */
.af-btn-operator {
    display: inline-block !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    margin-top: 10px !important;
}

.af-brand-meo .af-btn-operator { color: #0082a6 !important; }
.af-brand-nos .af-btn-operator { color: #1c1c24 !important; }
.af-brand-vodafone .af-btn-operator { color: #e60000 !important; }

.af-btn-operator:hover {
    text-decoration: underline !important;
    opacity: 0.8 !important;
}





/* ==========================================================================
   3. SECÇÕES DE CONTEÚDO (INFERIOR)
   ========================================================================== */
.af-section {
    padding: 60px 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.af-section h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    color: var(--af-text-dark) !important;
}

/* Grelha de 5 colunas - O que analisamos */
.af-grid-5 {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
}

.af-card-analysis {
    padding: 20px !important;
    background: #ffffff !important;
    text-align: center !important;
}

.af-card-analysis div {
    font-size: 2rem !important;
    margin-bottom: 10px !important;
}

.af-card-analysis h4 {
    margin: 15px 0 10px 0 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--af-text-dark) !important;
}

.af-card-analysis p {
    font-size: 0.85rem !important;
    color: var(--af-text-muted) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Secção de Operadoras */
.af-bg-light {
    background: var(--af-bg-light) !important;
    width: 100% !important;
}

.af-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-top: 30px !important;
}

.af-operator-card {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 6px !important;
    padding: 25px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
}

.af-operator-logo {
    height: 45px !important;
    margin-bottom: 20px !important;
    object-fit: contain !important;
}

.af-operator-tags {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    font-size: 0.85rem !important;
    color: #555555 !important;
    margin-bottom: 15px !important;
}

/* Linha Cronológica - Como funciona */
.af-steps {
    display: flex !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-top: 40px !important;
}

.af-step-item {
    flex: 1 !important;
    text-align: left !important;
    display: flex !important;
    gap: 15px !important;
}

.af-step-number {
    background: var(--af-purple-light) !important;
    color: #ffffff !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   4. BANNER CTA FINAL
   ========================================================================== */
.af-cta-banner {
    background: linear-gradient(135deg, #4b0082 0%, #251052 100%) !important;
    color: #ffffff !important;
    padding: 40px !important;
    border-radius: 8px !important;
    margin: 40px auto !important;
    max-width: 1200px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    text-align: left !important;
}

.af-cta-banner h4 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 1.2rem !important;
    color: #ffffff !important;
}

.af-banner-btn-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.af-btn-white {
    background: #ffffff !important;
    color: var(--af-purple-hover) !important;
    padding: 12px 25px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    display: inline-block !important;
    transition: opacity 0.2s ease !important;
}

.af-btn-white:hover {
    opacity: 0.9 !important;
}

/* ==========================================================================
   5. RESPONSIVIDADE (MEDIA QUERIES)
   ========================================================================== */
@media(max-width: 950px) {
    .af-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media(max-width: 850px) { 
    .af-hero-container { 
        flex-direction: column !important; 
    }
    .af-form-box { 
        flex: 1 1 100% !important; 
        width: 90% !important; 
    } 
    .af-hero-text { 
        text-align: center !important; 
    }
    .af-hero-features { 
        grid-template-columns: 1fr !important; 
    }
    .af-grid-3, .af-cta-banner {
        grid-template-columns: 1fr !important;
    }
    .af-steps {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .af-cta-banner {
        text-align: center !important;
    }
}

/*      Alteração Final     */
/*correção de margens em telemóvel 20-10-2026*/
@media (max-width: 767px) {
    /* Afasta o conteúdo das bordas do telemóvel */
    .af-landing-wrapper {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* Permite que o bloco roxo do topo continue a ir de ponta a ponta */
    .af-hero-section {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}