.contact-form-wrapper{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);padding:3rem 2rem;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.1);max-width:700px;margin:2rem auto} .contact-form-header{text-align:center;margin-bottom:2rem} .contact-form-header h2{color:var(--color-secondary);font-size:2rem;margin-bottom:0.5rem} .contact-form-header .subtitle{color:#666;font-size:1.1rem;margin-bottom:1rem} .contact-form-header .benefits{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-top:1.5rem;font-size:0.9rem;color:var(--color-primary)} .contact-form-header .benefits span{display:flex;align-items:center;gap:0.5rem} #contact-form{background:white;padding:2.5rem;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.05)} .form-group{margin-bottom:1.5rem;position:relative} .form-group label{display:block;font-weight:600;color:var(--color-secondary);margin-bottom:0.5rem;font-size:0.95rem} .form-group label .required{color:#e74c3c;margin-left:3px} .form-group label .optional{color:#95a5a6;font-weight:400;font-size:0.85rem;margin-left:5px} .form-group input[type="text"],.form-group input[type="email"],.form-group input[type="tel"],.form-group input[type="number"],.form-group input[type="file"],.form-group select,.form-group textarea{width:100%;padding:0.9rem 1rem;border:2px solid #e0e0e0;border-radius:6px;font-size:1rem;font-family:inherit;transition:all 0.3s ease;background:#fafafa} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary);background:white;box-shadow:0 0 0 3px rgba(134,188,37,0.1)} .form-group textarea{min-height:120px;resize:vertical} .form-group.success input,.form-group.success select,.form-group.success textarea{border-color:#27ae60;background:#f0fff4} .form-group.success::after{content:'✓';position:absolute;right:15px;top:42px;color:#27ae60;font-weight:bold;font-size:1.2rem} .form-group.error input,.form-group.error select,.form-group.error textarea{border-color:#e74c3c;background:#fff5f5} .error-message{display:block;color:#e74c3c;font-size:0.85rem;margin-top:0.4rem;font-weight:500} #toggle-optional{background:transparent;border:2px dashed #5a8c1a;color:#4a7515;padding:0.8rem 1.5rem;border-radius:6px;cursor:pointer;font-weight:700;transition:all 0.3s ease;width:100%;text-align:left;margin:1.5rem 0;display:flex;align-items:center;gap:0.5rem} #toggle-optional:hover{background:#5a8c1a;color:white;border-style:solid} #optional-fields{max-height:0;overflow:hidden;transition:max-height 0.4s ease,opacity 0.4s ease;opacity:0} #optional-fields.visible{max-height:1000px;opacity:1;margin-bottom:1.5rem} .file-input-wrapper{position:relative} .file-input-wrapper input[type="file"]{opacity:0;position:absolute;z-index:-1} .file-input-label{display:inline-block;padding:0.9rem 1.5rem;background:var(--color-light);border:2px dashed #ccc;border-radius:6px;cursor:pointer;transition:all 0.3s ease;width:100%;text-align:center} .file-input-label:hover{border-color:var(--color-primary);background:#f0f8e6} #file-preview{margin-top:0.5rem;font-size:0.9rem} #file-preview .success{color:#27ae60} #file-preview .error{color:#e74c3c} .consent-group{margin:2rem 0;padding:1.5rem;background:#fff9e6;border-left:4px solid #ffc107;border-radius:6px} .consent-group label{display:flex;align-items:flex-start;gap:0.8rem;cursor:pointer;font-weight:400} .consent-group input[type="checkbox"]{margin-top:4px;width:20px;height:20px;cursor:pointer;flex-shrink:0} .consent-group a{color:var(--color-primary);text-decoration:underline} .honeypot{position:absolute;left:-9999px;opacity:0;pointer-events:none} .submit-btn{background:linear-gradient(135deg,var(--color-primary) 0%,#6fa01e 100%);color:white;border:none;padding:1.2rem 3rem;font-size:1.1rem;font-weight:700;border-radius:8px;cursor:pointer;transition:all 0.3s ease;width:100%;box-shadow:0 4px 15px rgba(134,188,37,0.3)} .submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(134,188,37,0.4)} .submit-btn:active{transform:translateY(0)} .submit-btn:disabled{background:#95a5a6;cursor:not-allowed;transform:none;box-shadow:none} .spinner{display:inline-block;width:16px;height:16px;border:3px solid rgba(255,255,255,0.3);border-radius:50%;border-top-color:white;animation:spin 0.8s linear infinite} @keyframes spin{to{transform:rotate(360deg)} } .form-message{padding:1.2rem 1.5rem;border-radius:8px;margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem;animation:slideDown 0.4s ease} .form-message.success{background:#d4edda;border:2px solid #28a745;color:#155724} .form-message.error{background:#f8d7da;border:2px solid #dc3545;color:#721c24} .form-message .icon{font-size:1.5rem;font-weight:bold} .form-message.fade-out{animation:fadeOut 0.5s ease forwards} @keyframes slideDown{from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeOut{to{opacity:0;transform:translateY(-10px)} } .floating-contact{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:15px;z-index:999} .floating-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.8rem;box-shadow:0 4px 15px rgba(0,0,0,0.3);transition:all 0.3s ease;text-decoration:none;position:relative} .floating-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,0.4)} .floating-btn.whatsapp{background:#25D366} .floating-btn.phone{background:var(--color-primary)} .floating-btn::before{content:attr(data-tooltip);position:absolute;right:70px;background:rgba(0,0,0,0.8);color:white;padding:8px 12px;border-radius:6px;white-space:nowrap;font-size:0.9rem;opacity:0;pointer-events:none;transition:opacity 0.3s ease} .floating-btn:hover::before{opacity:1} @media (max-width:768px){.contact-form-wrapper{padding:2rem 1rem} #contact-form{padding:1.5rem} .contact-form-header h2{font-size:1.6rem} .contact-form-header .benefits{flex-direction:column;gap:0.8rem} .submit-btn{padding:1rem 2rem;font-size:1rem} .floating-contact{right:15px;bottom:15px} .floating-btn{width:55px;height:55px;font-size:1.5rem} .floating-btn::before{display:none} } input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 30px white inset !important;-webkit-text-fill-color:var(--color-secondary) !important}