h1 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; }  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; }  .sticky-cta { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } @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; } .sticky-cta { position: static; margin: 20px 0; } }
