/**
 * Estilos específicos para a página de Contato
 * @version 1.0.0 - Movo o css inline para um arquivo separado
 */
.contact-hero{ background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-blue) 100%); color: var(--white); padding: var(--spacing-xxl) 0; position: relative; overflow: hidden;} .contact-hero::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat; animation: float 20s ease-in-out infinite;} .contact-hero-content{ text-align: center; position: relative; z-index: 2; animation: fadeInUp 1s ease-out;} .contact-hero-title{ margin-bottom: var(--spacing-lg);} .contact-hero-title-main{ display: block; font-size: 3rem; font-weight: 700; margin-bottom: var(--spacing-sm); background: linear-gradient(45deg, #ffffff, #f0f8ff); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.2;} .contact-hero-subtitle{ display: block; font-size: 1.2rem; font-weight: 300; opacity: 0.9; max-width: 600px; margin: 0 auto; line-height: 1.6;} .contact-hero-badges{ display: flex; justify-content: center; gap: var(--spacing-md); flex-wrap: wrap; margin-top: var(--spacing-lg);} .contact-badge{ display: inline-flex; align-items: center; gap: var(--spacing-xs); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: var(--spacing-sm) var(--spacing-md); border-radius: 25px; font-size: 0.9rem; font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.2); transition: all var(--transition-normal);} .contact-badge:hover{ background: rgba(255, 255, 255, 0.25); transform: translateY(-2px);} .contact-badge svg{ width: 16px; height: 16px; fill: currentColor;} .contact-content-section{ padding: var(--spacing-xxl) 0;} .section-title-modern{ font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, var(--primary-green), var(--primary-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; margin-bottom: var(--spacing-xxl); position: relative;} .section-title-modern::after{ content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, var(--primary-green), var(--primary-blue)); border-radius: 2px;} .contact-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-bottom: var(--spacing-xxl);} .contact-card{ background: var(--white); padding: var(--spacing-xl); border-radius: var(--border-radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; transition: all var(--transition-normal); text-align: center;} .contact-card::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-green), var(--primary-blue));} .contact-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);} .contact-card-icon{ display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary-green), var(--primary-blue)); border-radius: 50%; margin: 0 auto var(--spacing-lg); color: var(--white); transition: all var(--transition-normal);} .contact-card:hover .contact-card-icon{ transform: scale(1.1) rotate(5deg);} .contact-card h3{ font-size: 1.5rem; color: var(--dark-gray); margin-bottom: var(--spacing-md); font-weight: 600;} .contact-card p{ color: var(--medium-gray); line-height: 1.6; margin-bottom: var(--spacing-lg);} .contact-action{ display: inline-flex; align-items: center; gap: var(--spacing-sm); background: linear-gradient(135deg, var(--primary-green), var(--primary-blue)); color: var(--white); padding: var(--spacing-md) var(--spacing-lg); border-radius: 25px; text-decoration: none; font-weight: 500; transition: all var(--transition-normal); border: none; cursor: pointer; font-size: 1rem;} .contact-action:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 166, 81, 0.3); color: var(--white);} .contact-action svg{ width: 16px; height: 16px; fill: currentColor;} .contact-info-section{ background:linear-gradient(135deg,var(--light-gray) 0%,var(--off-white) 100%); padding: var(--spacing-xl); border-radius: var(--border-radius-lg); border: 1px solid rgba(0, 166, 81, 0.1); margin-bottom: var(--spacing-xxl);} .contact-info-content{ text-align: center; max-width: 800px; margin: 0 auto;} .contact-info-content h2{ font-size: 2rem; color: var(--dark-gray); margin-bottom: var(--spacing-lg); font-weight: 600;} .contact-info-content p{ font-size: 1.1rem; line-height: 1.7; color: var(--dark-gray); margin-bottom: var(--spacing-md);} .contact-info-content p:last-child{ margin-bottom: 0;} .contact-form-section{ margin: var(--spacing-xxl) 0; background:linear-gradient(135deg,var(--light-gray) 0%,var(--off-white) 100%); border-radius: var(--border-radius-lg); border: 1px solid rgba(0, 166, 81, 0.1); padding: var(--spacing-xxl);} .contact-form-container{ max-width: 800px; margin: 0 auto; background: var(--white); border-radius: var(--border-radius-lg); padding: var(--spacing-xxl); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden;} .contact-form-container::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-green), var(--primary-blue));} .contact-form-title{ text-align: center; font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, var(--primary-green), var(--primary-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--spacing-lg);} .contact-form-subtitle{ text-align: center; color: var(--medium-gray); margin-bottom: var(--spacing-xxl); font-size: 1.1rem; line-height: 1.6;} .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg);} .form-group{ margin-bottom: var(--spacing-lg);} .form-label{ display: block; margin-bottom: var(--spacing-xs); color: var(--dark-gray); font-weight: 600; font-size: 0.9rem;} .form-control{ width: 100%; padding: var(--spacing-md); border: 2px solid var(--light-gray); border-radius: var(--border-radius-sm); font-size: 1rem; transition: all var(--transition-normal); background-color: var(--white); font-family: inherit;} .form-control:focus{ outline: none; border-color: var(--primary-green); box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1);} .form-control.error{ border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;} .form-control.valid{ border-color: var(--success) !important;} .form-control.valid:focus{ box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1) !important;} .form-group textarea{ min-height: 120px; resize: vertical;} .error-message{ color: var(--danger); font-size: 0.875rem; margin-top: var(--spacing-xs); display: none; transition: all var(--transition-fast); opacity: 0; transform: translateY(-5px);} .error-message:not(:empty){ display: block; opacity: 1; transform: translateY(0);} .recaptcha-container{ margin-bottom: var(--spacing-lg); display: flex; justify-content: center;} .recaptcha-error{ color: var(--danger); font-size: 0.875rem; text-align: center; margin-top: var(--spacing-xs); display: none;} .btn-submit{ width: 100%; padding: var(--spacing-md); font-size: 1.1rem; font-weight: 600; background: linear-gradient(135deg, var(--primary-green), var(--primary-blue)); color: var(--white); border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: all var(--transition-normal);} .btn-submit:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 166, 81, 0.3);} .btn-submit:disabled{ background: var(--light-gray); color: var(--medium-gray); cursor: not-allowed; transform: none;} .success-message{ display: none; background: linear-gradient(135deg, #d4edda, #c3e6cb); color: #155724; padding: var(--spacing-lg); border-radius: var(--border-radius-sm); margin-top: var(--spacing-lg); border: 1px solid #c3e6cb; text-align: center;} .success-message strong{ display: block; margin-bottom: var(--spacing-xs); font-size: 1.1rem;} @media (max-width: 992px){ .contact-hero-title-main{ font-size: 2.5rem;} .section-title-modern{ font-size: 2rem;} .contact-cards{ grid-template-columns: 1fr; gap: var(--spacing-lg);} .form-row{ grid-template-columns: 1fr; gap: var(--spacing-md);}} @media (max-width: 768px){ .contact-hero{ padding: var(--spacing-xl) 0;} .contact-hero-title-main{ font-size: 2rem;} .contact-hero-subtitle{ font-size: 1rem;} .contact-hero-badges{ gap: var(--spacing-sm);} .contact-badge{ font-size: 0.8rem; padding: var(--spacing-xs) var(--spacing-sm);} .contact-card-icon{ width: 60px; height: 60px;} .contact-card h3{ font-size: 1.3rem;} .contact-info-content h2{ font-size: 1.6rem;} .contact-form-container{ padding: var(--spacing-lg);} .contact-form-section{ padding: var(--spacing-lg);} .recaptcha-container{ transform: scale(0.77); transform-origin: center;}} @media (max-width: 576px){ .contact-content-section{ padding: var(--spacing-xl) 0;} .contact-hero-title-main{ font-size: 1.8rem;} .section-title-modern{ font-size: 1.8rem;} .contact-card{ padding: var(--spacing-lg);} .contact-info-content{ padding: var(--spacing-md);} .contact-form-title{ font-size: 1.6rem;}}