h1 { color: #1a365d; font-size: 2.5rem; margin-bottom: 30px; text-align: center; } h2 { color: #2d3748; font-size: 2rem; margin: 40px 0 20px; border-left: 4px solid #4299e1; padding-left: 20px; } h3 { color: #4a5568; font-size: 1.5rem; margin: 30px 0 15px; } h4 { color: #718096; font-size: 1.2rem; margin: 20px 0 10px; } p { margin-bottom: 15px; text-align: justify; } .image-container { display: flex; justify-content: center; margin: 40px 0; } .illustration-placeholder { width: 600px; height: 400px; border-radius: 15px; background-color: #f0f0f0; border: 2px dashed #cbd5e0; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #718096; text-align: center; padding: 20px; } .cta-button { display: block; width: 300px; margin: 30px auto; padding: 15px 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 50px; text-align: center; font-weight: bold; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .info-box { background: #e6fffa; border-left: 4px solid #38b2ac; padding: 20px; margin: 30px 0; border-radius: 5px; } .warning-box { background: #fffaf0; border-left: 4px solid #ed8936; padding: 20px; margin: 30px 0; border-radius: 5px; } .checklist { background: #f7fafc; padding: 25px; border-radius: 10px; margin: 30px 0; } .checklist ul { list-style: none; margin: 15px 0; } .checklist li { margin: 10px 0; padding-left: 30px; position: relative; } .checklist li:before { content: "✓"; position: absolute; left: 0; color: #48bb78; font-weight: bold; font-size: 1.2rem; } table { width: 100%; border-collapse: collapse; margin: 30px 0; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } th, td { padding: 15px; text-align: left; border-bottom: 1px solid #e2e8f0; } th { background: #4299e1; color: white; font-weight: bold; } tr:hover { background: #f7fafc; } .step-by-step { counter-reset: step-counter; } .step { margin: 25px 0; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); counter-increment: step-counter; position: relative; padding-left: 80px; } .step:before { content: counter(step-counter); position: absolute; left: 20px; top: 20px; background: #4299e1; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; } .highlight { background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%); padding: 2px 8px; border-radius: 4px; font-weight: bold; } @media (max-width: 768px) { .container { padding: 15px; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .illustration-placeholder { width: 100%; max-width: 400px; height: 250px; } .cta-button { width: 90%; } .step { padding-left: 20px; } .step:before { position: relative; margin-bottom: 10px; } }