/* Reset e configurações básicas */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



:root {

  --primary-color: #064169;

  --secondary-color: #064169;

  --accent-color: #222;

  --background-color: #f7f7f7;

  --white: #ffffff;

  --gray-light: #f0f2f5;

  --gray-medium: #e7eaed;

  --gray-border: #cfd8e3;

  --text-color: #222;

  --text-light: #666;

  --success-color: #28a745;

  --error-color: #dc3545;

  

  --font-family: 'Montserrat', Arial, sans-serif;

  --border-radius: 8px;

  --border-radius-lg: 16px;

  --shadow-sm: 0 2px 8px rgba(24,60,92,0.07);

  --shadow-md: 0 2px 12px rgba(24,60,92,0.09);

  --transition: all 0.3s ease;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: var(--font-family);

  background: var(--background-color);

  color: var(--text-color);

  line-height: 1.6;

  overflow-x: hidden;

}



.icon {

  color: var(--primary-color);

}



/* Container */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

  width: 100%;

}



/* Header */

header {

  background: #f7f7f7;

  padding: 24px 0;

  top: 0;

  z-index: 100;

}



.header-content {

  display: flex;

  justify-content: flex-start;

  align-items: center;

}



.logo {

  width: auto;

  height: auto;

  min-height: 40px;

  max-height: 60px;

  object-fit: contain;

  transition: var(--transition);

}



/* Main */

main {

  margin-top: 32px;

}



/* Hero Section */

.hero {

  display: flex;

  flex-wrap: wrap;

  gap: 48px;

  justify-content: space-between;

  align-items: flex-start;

  margin-bottom: 48px;

}



.hero-info {

  margin-top: 50px;

  flex: 1.2;

  min-width: 300px;

  max-width: 100%;

}



.hero-info h1 {

  color: var(--primary-color);

  font-size: clamp(28.8px, 4vw, 40px);

  font-weight: 700;

  margin-bottom: 8px;

  line-height: 1.2;

}



.hero-info h2 {

  font-size: clamp(17.6px, 3vw, 22.4px);

  color: var(--secondary-color);

  font-weight: 600;

  margin-bottom: 20px;

  line-height: 1.3;

}



.hero-info p {

  font-size: clamp(15.2px, 2.5vw, 17.6px);

  margin-bottom: 24px;

  line-height: 1.6;

  color: var(--text-light);

}



.evento-info {

  list-style: none;

  margin: 0 0 24px 0;

}



.evento-info li {

  font-size: clamp(15.2px, 2.5vw, 16.8px);

  margin-bottom: 16px;

  display: flex;

  align-items: flex-start;

  gap: 16px;

  color: var(--text-color);

}



.evento-info li:last-child {

  margin-bottom: 0;

}



.evento-info .icon {

  font-size: 1.8em;

  min-width: 32px;

  color: var(--primary-color);

  margin-top: 2px;

}



.evento-info strong {

  font-weight: 600;

  color: var(--text-color);

}



.equipamentos {

  display: flex;

  gap: 24px;

  margin-top: 24px;

  flex-wrap: wrap;

  justify-content: flex-start;

}



.equipamento-item {

  text-align: center;

  flex: 1;

  min-width: 120px;

  max-width: 150px;

}



.equipamento-item img {

  width: 100%;

  height: auto;

  transition: var(--transition);

  aspect-ratio: 1;

  object-fit: cover;

}



.equipamento-item span {

  display: block;

  margin-top: 8px;

  font-size: 14.4px;

  font-weight: 600;

  color: var(--primary-color);

}



.equipamentos-image {

  margin-top: 24px;

  text-align: left;

}



.equipamentos-image img {

  width: 100%;

  max-width: 600px;

  height: auto;

}



/* Formulário */

.formulario {

  flex: 1;

  background: var(--gray-light);

  border-radius: var(--border-radius-lg);

  padding: 32px;

  box-shadow: var(--shadow-md);

  min-width: 320px;

  max-width: 400px;

  top: 120px;

}



.formulario h3 {

  font-size: clamp(17.6px, 3vw, 20px);

  margin-bottom: 24px;

  font-weight: 700;

  color: var(--text-color);

  text-align: left;

  line-height: 1.3;

}



.input-group {

  margin-bottom: 20px;

}



.formulario input {

  width: 100%;

  padding: 14px 16px;

  border-radius: var(--border-radius);

  border: 2px solid var(--gray-border);

  font-size: clamp(15.2px, 2.5vw, 16px);

  transition: var(--transition);

  background: var(--white);

}



.formulario input:focus {

  outline: none;

  border-color: var(--primary-color);

  box-shadow: 0 0 0 3px rgba(24, 60, 92, 0.1);

}



.formulario input.error {

  border-color: var(--error-color);

}



.error-message {

  display: block;

  color: var(--error-color);

  font-size: 13.6px;

  margin-top: 4px;

  min-height: 20px;

}



.checkbox-group {

  margin: 20px 0;

}



.checkbox-container {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  cursor: pointer;

  font-size: 14.4px;

  line-height: 1.4;

}



.checkbox-container input[type="checkbox"] {

  width: auto;

  margin: 0;

}



.checkmark {

  width: 18px;

  height: 18px;

  border: 2px solid var(--gray-border);

  border-radius: 3px;

  position: relative;

  flex-shrink: 0;

  margin-top: 2px;

}



.checkbox-container input:checked + .checkmark {

  background: var(--primary-color);

  border-color: var(--primary-color);

}



.checkbox-container input:checked + .checkmark::after {

  content: '✓';

  position: absolute;

  left: 2px;

  top: -2px;

  color: white;

  font-size: 12px;

  font-weight: bold;

}



.checkbox-text a {

  color: var(--primary-color);

  text-decoration: none;

}



.checkbox-text a:hover {

  text-decoration: underline;

}



.btn-submit {

  width: 100%;

  padding: 16px 0;

  border-radius: var(--border-radius);

  background: var(--primary-color);

  color: var(--white);

  font-weight: 700;

  font-size: clamp(16px, 3vw, 17.6px);

  border: none;

  cursor: pointer;

  transition: var(--transition);

  position: relative;

  overflow: hidden;

}



.btn-submit:hover:not(:disabled) {

  background: var(--secondary-color);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



.btn-submit:disabled {

  opacity: 0.7;

  cursor: not-allowed;

}



.btn-loading {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

}



.spinner {

  width: 16px;

  height: 16px;

  border: 2px solid transparent;

  border-top: 2px solid currentColor;

  border-radius: 50%;

  animation: spin 1s linear infinite;

}



.form-info {

  text-align: center;

  margin-top: 16px;

  color: var(--text-light);

}



.form-info small {

  font-size: 13.6px;

}



/* Certificado Section */

.certificado {

  display: flex;

  align-items: center;

  gap: 48px;

  margin-bottom: 48px;

  flex-wrap: wrap;

}



.certificado-info {

  flex: 1.2;

  min-width: 300px;

}



.certificado-info h2 {

  color: var(--primary-color);

  font-size: clamp(20.8px, 3.5vw, 25.6px);

  font-weight: 700;

  margin-bottom: 16px;

  line-height: 1.3;

}



.certificado-info p {

  font-size: clamp(15.2px, 2.5vw, 16.8px);

  margin-bottom: 20px;

  color: var(--text-light);

  line-height: 1.6;

}



.certificado-features {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.feature {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 15.2px;

}



.feature-icon {

  width: 24px;

  height: 24px;

  background: var(--success-color);

  color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12.8px;

  font-weight: bold;

  flex-shrink: 0;

}



.certificado-imagem {

  flex: 1;

  min-width: 300px;

  text-align: center;

}



.certificado-imagem img {

  width: 100%;

  max-width: 400px;

  border-radius: 12px;

  box-shadow: var(--shadow-md);

  background: var(--white);

  transition: var(--transition);

}



.certificado-imagem img:hover {

  transform: scale(1.02);

}



/* Participar Section */

.participar {

  background: var(--primary-color);

  color: var(--white);

  padding: 48px 0;

  margin-bottom: 0;

}



.participar-content {

  display: flex;

  gap: 48px;

  align-items: flex-start;

  flex-wrap: wrap;

	color:#fff

}



.participar-info {

  flex: 1;

  min-width: 300px;

  margin-bottom: 24px;

}



.participar-info h2 {

  font-size: clamp(20.8px, 3vw, 24px);

  margin-bottom: 16px;

  line-height: 1.3;

}



.participar-info .destaque {

  font-size: clamp(16px, 2.5vw, 17.6px);

  font-weight: 400;

  margin-bottom: 24px;

}



.btn-inscrever {

  text-align: center;

  display: inline-block;

  background: var(--accent-color);

  color: var(--white);

  font-weight: 600;

  border-radius: 30px;

  padding: 14px 32px;

  font-size: clamp(16px, 3vw, 17.6px);

  text-decoration: none;

  transition: var(--transition);

  box-shadow: var(--shadow-sm);

}



.btn-inscrever:hover {

  background: var(--secondary-color);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



.participar-beneficios {

  flex: 1.5;

  min-width: 300px;

}



.beneficio {

  display: flex;

  gap: 20px;

  margin-bottom: 24px;

  align-items: flex-start;

}



.beneficio-icon {

  font-size: 32px;

  min-width: 50px;

  text-align: center;

}



.beneficio-content h4 {

  font-size: clamp(16px, 2.5vw, 17.6px);

  font-weight: 700;

  margin-bottom: 8px;

}



.beneficio-content p {

  font-size: clamp(14.4px, 2.5vw, 16px);

  line-height: 1.5;

  opacity: 0.9;

}



/* Especialistas Section */

.especialistas {

  padding: 64px 0;

  margin-bottom: 15px;

  margin-top: 15px;

  text-align: center;

}



.especialistas h2 {

  text-align: center;

  font-size: clamp(24px, 3.5vw, 28.8px);

  color: var(--primary-color);

  font-weight: 700;

  margin-bottom: 48px;

}



.cards {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

}



.card {

  background: var(--white);

  border: 1px solid var(--gray-border);

  border-radius: 16px;

  padding: 32px;

  max-width: 400px;

  width: 100%;

  box-shadow: var(--shadow-sm);

  text-align: center;

  transition: var(--transition);

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-md);

}



.card-image {

  margin-bottom: 24px;

}



.card img {

  width: 300px;

  height: 240px;

  object-fit: cover;

  background: var(--gray-medium);

  transition: var(--transition);

}



.card-content h3 {

  text-align: left;

  color: var(--primary-color);

  font-size: clamp(20.8px, 3vw, 24px);

  margin-bottom: 8px;

  font-weight: 700;

}



.cargo {

  color: var(--text-light);

  font-size: 12.8px;

  font-weight: 500;

  margin-bottom: 16px;

}



.card-content p {

  font-size: clamp(14.4px, 2.5vw, 16px);

  color: var(--text-light);

  line-height: 1.6;

  text-align: left;

}



/* CTA Final Section */

.cta-final {

  background: var(--accent-color);

  padding: 48px 0;

  text-align: center;

}



.cta-content h2 {

  color: var(--white);

  font-size: clamp(20.8px, 3vw, 25.6px);

  font-weight: 700;

  margin-bottom: 12px;

}



.cta-content p {

  color: var(--white);

  font-size: clamp(16px, 2.5vw, 17.6px);

  margin-bottom: 24px;

  opacity: 0.9;

}



.btn-final {

  background: var(--white);

  color: var(--primary-color);

  border-radius: 30px;

  padding: 18px 40px;

  font-size: clamp(17.6px, 3vw, 19.2px);

  font-weight: 700;

  text-decoration: none;

  box-shadow: var(--shadow-md);

  transition: var(--transition);

  display: inline-block;

}



.btn-final:hover {

  background: var(--primary-color);

  color: var(--white);

  transform: translateY(-3px);

  box-shadow: 0 8px 25px rgba(0,0,0,0.2);

}



/* Footer */

footer {

  background: var(--primary-color);

  padding: 32px 0 20px;

  text-align: center;

}



.footer-content {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 16px;

}



.logo-footer {

  height: 32px;

  max-width: 200px;

  object-fit: contain;

}



footer p {

  color: var(--white);

  font-size: 14.4px;

  opacity: 0.8;

}



.footer-links {

  display: flex;

  gap: 24px;

  flex-wrap: wrap;

  justify-content: center;

}



.footer-links a {

  color: var(--white);

  text-decoration: none;

  font-size: 14.4px;

  opacity: 0.8;

  transition: var(--transition);

}



.footer-links a:hover {

  opacity: 1;

  text-decoration: underline;

}



/* Back to Top Button */

.back-to-top {

  position: fixed;

  bottom: 20px;

  right: 20px;

  width: 50px;

  height: 50px;

  background: var(--primary-color);

  color: var(--white);

  border: none;

  border-radius: 50%;

  cursor: pointer;

  font-size: 19.2px;

  font-weight: bold;

  box-shadow: var(--shadow-md);

  transition: var(--transition);

  opacity: 0;

  visibility: hidden;

  z-index: 1000;

}



.back-to-top.visible {

  opacity: 1;

  visibility: visible;

}



.back-to-top:hover {

  background: var(--secondary-color);

  transform: translateY(-3px);

}



/* Modal */

.modal {

  display: none;

  position: fixed;

  z-index: 10000;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0,0,0,0.5);

  animation: fadeIn 0.3s ease;

}



.modal-content {

  background-color: var(--white);

  margin: 10% auto;

  border-radius: var(--border-radius-lg);

  box-shadow: var(--shadow-md);

  width: 90%;

  max-width: 500px;

  animation: slideIn 0.3s ease;

}



.modal-header {

  padding: 24px 24px 16px;

  border-bottom: 1px solid var(--gray-border);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.modal-header h3 {

  color: var(--primary-color);

  font-size: 20.8px;

  font-weight: 700;

}



.modal-close {

  background: none;

  border: none;

  font-size: 24px;

  cursor: pointer;

  color: var(--text-light);

  padding: 0;

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.modal-body {

  padding: 24px;

}



.modal-body p {

  margin-bottom: 12px;

  line-height: 1.6;

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



@keyframes slideIn {

  from { transform: translateY(-50px); opacity: 0; }

  to { transform: translateY(0); opacity: 1; }

}



/* Media Queries */

@media (max-width: 1024px) {

  .container {

    padding: 0 20px;

  }

  

  .hero {

    gap: 32px;

  }

  

  .formulario {

    position: static;

  }

}



@media (max-width: 768px) {

  .hero, .certificado, .participar-content {

    flex-direction: column;

    gap: 32px;

  }

  

  .hero-info, .certificado-info, .participar-info, .certificado-imagem {

    min-width: 100%;

  }

  

  .formulario {

    max-width: 100%;

    min-width: 100%;

    padding: 24px 20px;

  }

  

  .cards {

    flex-direction: column;

    align-items: center;

  }

  

  .card {

    max-width: 100%;

  }

  

  .equipamentos-image img {

    max-width: 100%;

  }

  

  .beneficio {

    gap: 16px;

  }

  

  .beneficio-icon {

    font-size: 1.5rem;

    min-width: 40px;

  }

}



@media (max-width: 480px) {

  .container {

    padding: 0 16px;

  }

  

  .formulario {

    padding: 20px 16px;

    border-radius: 12px;

  }

  

  .equipamentos-image {

    margin-top: 16px;

  }

  

  .logo {

    max-height: 60px;

  }

  

  .btn-inscrever, .btn-final {

    padding: 12px 24px;

  }

  

  .footer-links {

    gap: 16px;

  }

  

  .footer-links a {

    font-size: 13.6px;

  }

  

  .modal-content {

    margin: 20% auto;

    width: 95%;

  }

  

  .modal-header, .modal-body {

    padding: 20px;

  }

}



/* Print Styles */

@media print {

  .formulario, .btn-inscrever, .btn-final, .back-to-top {

    display: none;

  }

  

  body {

    background: white;

  }

  

  .participar {

    background: white;

    color: black;

  }

}



/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  * {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

  

  html {

    scroll-behavior: auto;

  }

}



/* High contrast mode */

@media (prefers-contrast: high) {

  :root {

    --primary-color: #000;

    --secondary-color: #000;

    --text-color: #000;

    --background-color: #fff;

  }

}



/* Focus styles for accessibility */

button:focus,

input:focus,

a:focus {

  outline: 2px solid var(--primary-color);

  outline-offset: 2px;

}



/* Smooth scrolling for anchor links */

html {

  scroll-padding-top: 100px;

}