body { background-color: red !important; } /* Container principal */ .benefits-final-grid { font-family: 'Poppins', sans-serif; max-width: 1000px; /* largura máxima em desktop */ width: 95%; /* ocupa quase toda a largura em mobile */ margin: 40px auto; padding: 20px; background-color: #000; border-radius: 16px; color: #fff; /* Grelha responsiva */ display: grid; grid-template-columns: 1fr; /* mobile: 1 coluna */ gap: 20px; } /* Desktop: 2 colunas */ @media (min-width: 768px) { .benefits-final-grid { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } } /* Título */ .benefits-final-grid h2 { font-size: clamp(1.4em, 3vw, 2.2em); /* escala fluida */ margin-bottom: 30px; color: #adff6e; /* mantém o verde original */ text-align: center; white-space: nowrap; } /* Cartões */ .benefit-card { background-color: #111; border-radius: 10px; padding: 18px 22px; transition: background 0.3s ease; cursor: pointer; } .benefit-card:hover { background-color: #1a1a1a; box-shadow: 0 0 12px rgba(173,255,110,0.15); /* feedback visual */ } /* Cabeçalho do cartão */ .benefit-top { display: flex; align-items: center; justify-content: space-between; } .arrow { color: #adff6e; font-size: 1.2em; margin-right: 10px; } .text { flex-grow: 1; font-size: clamp(1em, 2.5vw, 1.2em); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plus { color: #adff6e; font-size: 1.2em; margin-left: 10px; transition: transform 0.3s ease; } .benefit-card.active .plus { transform: rotate(45deg); } /* Texto expandido */ .benefit-info { margin-top: 10px; font-size: 0.95em; color: #ccc; line-height: 1.4; display: none; } .benefit-card.active .benefit-info { display: block; }