/* =========================================================
⚙️ SEÇÃO: COMO FUNCIONA (Versão Otimizada)
========================================================= */



.comofunciona-section {
    margin: 60px 0px; 
    background: #9cd8da;
    padding: 60px 20px;
    text-align: center;
    
    /* === ALTERAÇÃO DA FONTE ===
       Aplicando Roboto a toda a seção (título e parágrafos)
    */
    font-family: 'Roboto', sans-serif;
}

.comofunciona-title {
    font-size: 2rem;
    
    /* === ALTERAÇÃO DE ACESSIBILIDADE ===
       Cor escura para garantir contraste com o fundo #9cd8da.
       Isso só funciona se você REMOVER 'text-white' do HTML.
    */
    color: #2a5b5d; /* Um azul-petróleo escuro e legível */
    
    font-weight: 700; /* Dando peso ao título */
    margin-bottom: 50px;
}

.comofunciona-container {
    max-width: 1100px;
    margin: 0 auto;
}

.comofunciona-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 30px;
    justify-content: center;
    align-items: stretch; 
}

.step {
    background: #fff; border-radius: 20px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    padding: 40px 25px; transition: all 0.3s ease; 
    
    /* === ALTERAÇÃO DE ACESSIBILIDADE ===
       Removido 'cursor: pointer;' (o card não é um link).
    */
    
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    height: 100%; position: relative;
}

.step:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 10px 30px rgba(244, 10, 69, 0.25); 
}

.step::before { /* Numeração */
    content: attr(data-step); position: absolute; top: 15px; left: 15px;
    background: #f40a45; color: #fff; font-weight: 700; font-size: 1rem;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.step-icon {
    width: 70px; height: 70px; margin: 0 auto 25px; border-radius: 50%;
    background: #f40a45; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.8rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.step:hover .step-icon { 
    transform: scale(1.08); 
    box-shadow: 0 10px 25px rgba(244, 10, 69, 0.35); 
}

.step p {
    font-size: 1rem; 
    color: #555; 
    line-height: 1.6; 
    font-weight: 400; /* Peso Regular para o corpo do texto */
    text-align: center; 
    flex-grow: 1; 
    margin-top: 10px;
}

/* Estilo para os títulos (Ex: "Escolha e Assine") */
.step p strong {
    font-weight: 700; /* Peso Bold */
    color: #333;
    display: block; 
    margin-bottom: 8px;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .comofunciona-section { padding: 50px 15px; margin: 40px 0; }
    .comofunciona-title { font-size: 1.8rem; margin-bottom: 40px; }
    .comofunciona-steps { gap: 20px; }
    .step { padding: 30px 20px; }
    .step-icon { width: 60px; height: 60px; font-size: 1.6rem; margin-bottom: 20px; }
    .step p { font-size: 0.95rem; }
    .step::before { width: 25px; height: 25px; font-size: 0.9rem; top: 10px; left: 10px; }
}