/* ============================================================
       VARIÁVEIS — Paleta do projeto
       ============================================================ */
    :root {
      --c1: #332e1d;
      --c2: #5ac7aa;
      --c3: #9adcb9;
      --c4: #fafcd3;
      --c5: #efeba9;
      --bg: #1a1810;
      --bg2: #252117;
      --border: rgba(90, 199, 170, 0.15);
      --border-hover: rgba(90, 199, 170, 0.4);
      --error: #f87171;
      --error-bg: rgba(248, 113, 113, 0.08);
      --font-display: 'Syne', sans-serif;
      --font-body: 'DM Sans', sans-serif;
      --radius: 0.875rem;
      --radius-sm: 0.5rem;
      --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ============================================================
       RESET & BASE
       ============================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-body);
      background-color: var(--bg);
      color: var(--c4);
      min-height: 100vh;
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* ============================================================
       FUNDO — grade sutil + gradiente radial
       ============================================================ */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      /* Camada 1: O grid de linhas (opcional) | Camada 2: Sua imagem background.png */
      background-image: 
        linear-gradient(rgba(90,199,170,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90,199,170,0.03) 1px, transparent 1px),
        url('../background.png');
      
      /* Ajusta o tamanho: Grid fixo em 48px e Imagem cobrindo a tela toda */
      background-size: 48px 48px, 48px 48px, cover;
      background-position: center;
      background-repeat: repeat, repeat, no-repeat;
      background-attachment: fixed;
      
      /* OPACIDADE BAIXA: 0.1 equivale a 10% de visibilidade. 
         Ajuste conforme sua preferência para não atrapalhar a leitura. */
      opacity: 0.12; 
      
      pointer-events: none;
      z-index: 0;
    }

    body::after {
      content: '';
      position: fixed;
      top: -30%;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 600px;
      background: radial-gradient(ellipse at center, rgba(90, 199, 170, 0.07) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

    /* ============================================================
       HEADER
       ============================================================ */
    .header {
      position: relative;
      z-index: 10;
      padding: 1.25rem 2rem;
      border-bottom: 1px solid var(--border);
      background: rgba(26, 24, 16, 0.8);
      backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      animation: slideDown 0.5s ease both;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
    }

    .logo-icon {
        width: 2.5rem; /* Ajuste o tamanho se necessário */
        height: 2.5rem;
        background: transparent !important; /* Removemos o gradiente para destacar sua logo */
        border-radius: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; /* Garante que a imagem não saia da borda */
        flex-shrink: 0;
    }
    
    /* Estilo específico para a imagem da logo */
    .img-logo-header {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Faz a imagem caber sem cortar ou esticar */
    }

    .logo-text {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--c4);
      letter-spacing: -0.02em;
    }

    .logo-text span {
      color: var(--c2);
    }

    /* Steps indicator */
    .steps {
      display: flex;
      align-items: center;
      gap: 0;
    }

    .step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
    }

    .step-circle {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 0.8rem;
      font-weight: 700;
      border: 2px solid var(--c2);
      background: var(--c2);
      color: var(--bg);
    }

    .step.inactive .step-circle {
      background: transparent;
      border-color: rgba(90, 199, 170, 0.3);
      color: rgba(250, 252, 211, 0.4);
    }

    .step-label {
      font-size: 0.7rem;
      font-weight: 500;
      color: var(--c2);
      letter-spacing: 0.02em;
    }

    .step.inactive .step-label {
      color: rgba(250, 252, 211, 0.35);
    }

    .step-line {
      width: 3rem;
      height: 1px;
      background: rgba(90, 199, 170, 0.2);
      margin-bottom: 1.1rem;
    }

    /* ============================================================
       HERO
       ============================================================ */
    .hero {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 4rem 2rem 2.5rem;
      animation: fadeUp 0.6s 0.1s ease both;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.375rem 1rem;
      background: rgba(90, 199, 170, 0.08);
      border: 1px solid rgba(90, 199, 170, 0.25);
      border-radius: 2rem;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--c3);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
    }

    .hero-badge i {
      font-size: 0.7rem;
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: var(--c4);
      margin-bottom: 1rem;
    }

    .hero h1 span {
      color: var(--c2);
    }

    .hero p {
      font-size: 1.0625rem;
      color: rgba(250, 252, 211, 0.55);
      max-width: 480px;
      margin: 0 auto 2.5rem;
      font-weight: 300;
    }

    /* ============================================================
       VAGAS COUNTER
       ============================================================ */
    .slots-card {
      display: inline-flex;
      align-items: center;
      gap: 1.5rem;
      padding: 1rem 2rem;
      background: rgba(51, 46, 29, 0.6);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      backdrop-filter: blur(8px);
    }

    .slots-number {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 800;
      color: var(--c2);
      line-height: 1;
    }

    .slots-number span {
      font-size: 1.1rem;
      color: rgba(250, 252, 211, 0.4);
      font-weight: 400;
    }

    .slots-label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(250, 252, 211, 0.4);
      margin-top: 0.15rem;
    }

    .slots-divider {
      width: 1px;
      height: 2.5rem;
      background: var(--border);
    }

    .slots-progress-wrap {
      flex: 1;
      min-width: 120px;
    }

    .slots-progress-label {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: rgba(250, 252, 211, 0.4);
      margin-bottom: 0.4rem;
    }

    .slots-bar {
      height: 4px;
      background: rgba(90, 199, 170, 0.12);
      border-radius: 2px;
      overflow: hidden;
    }

    .slots-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--c2), var(--c3));
      border-radius: 2px;
      width: 5%;
      transition: width 1s ease;
    }

    /* ============================================================
       LAYOUT PRINCIPAL
       ============================================================ */
    .main {
      position: relative;
      z-index: 1;
      max-width: 1080px;
      margin: 0 auto;
      padding: 2rem 2rem 5rem;
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 2rem;
      align-items: start;
    }

    /* ============================================================
       CARD DO FORMULÁRIO
       ============================================================ */
    .form-card {
      background: rgba(37, 33, 23, 0.7);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2rem;
      backdrop-filter: blur(12px);
      animation: fadeUp 0.6s 0.2s ease both;
    }

    .form-card-title {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--c4);
      margin-bottom: 0.375rem;
      letter-spacing: -0.02em;
    }

    .form-card-subtitle {
      font-size: 0.875rem;
      color: rgba(250, 252, 211, 0.4);
      margin-bottom: 1.75rem;
      font-weight: 300;
    }
      
    /* Estilo para o Card de Inscrições Encerradas */
    .sold-out-card {
      display: none; /* Escondido por padrão */
      text-align: center;
      padding: 3rem 2rem;
      background: rgba(37, 33, 23, 0.8);
      border: 1px solid var(--error);
      border-radius: var(--radius);
      backdrop-filter: blur(12px);
      animation: fadeUp 0.6s ease both;
    }

    .sold-out-icon {
      font-size: 4rem;
      color: var(--error);
      margin-bottom: 1.5rem;
    }

    .sold-out-title {
      font-family: var(--font-display);
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--c4);
      margin-bottom: 1rem;
    }

    .sold-out-text {
      color: rgba(250, 252, 211, 0.6);
      margin-bottom: 2rem;
      line-height: 1.6;
    }

    /* ============================================================
       FORM GRID
       ============================================================ */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.125rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .form-group.full {
      grid-column: 1 / -1;
    }

    .form-label {
      font-size: 0.8125rem;
      font-weight: 500;
      color: rgba(250, 252, 211, 0.7);
      display: flex;
      align-items: center;
      gap: 0.4rem;
      letter-spacing: 0.01em;
    }

    .form-label i {
      color: var(--c2);
      font-size: 0.75rem;
    }

    .form-label .required {
      color: var(--c2);
      margin-left: 0.1rem;
    }

    .input-wrap {
      position: relative;
    }

    .form-input {
      width: 100%;
      padding: 0.75rem 1rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--c4);
      font-size: 0.9375rem;
      font-family: var(--font-body);
      font-weight: 400;
      outline: none;
      transition:
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition);
      -webkit-appearance: none;
    }

    .form-input::placeholder {
      color: rgba(250, 252, 211, 0.2);
    }

    .form-input:focus {
      border-color: var(--c2);
      background: rgba(90, 199, 170, 0.04);
      box-shadow: 0 0 0 3px rgba(90, 199, 170, 0.1);
    }

    .form-input.has-error {
      border-color: var(--error);
      background: var(--error-bg);
    }

    .form-input.has-error:focus {
      box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
    }

    /* Ícone de status dentro do input */
    .input-icon {
      position: absolute;
      right: 0.875rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.8rem;
      pointer-events: none;
      transition: opacity var(--transition);
      opacity: 0;
    }

    .input-icon.valid {
      color: var(--c2);
    }

    .input-icon.invalid {
      color: var(--error);
    }

    .input-icon.show {
      opacity: 1;
    }

    /* Hint */
    .form-hint {
      font-size: 0.75rem;
      color: rgba(250, 252, 211, 0.3);
      font-weight: 300;
    }

    /* Mensagem de erro por campo */
    .field-error {
      font-size: 0.75rem;
      color: var(--error);
      display: flex;
      align-items: center;
      gap: 0.35rem;
      min-height: 1rem;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.2s, transform 0.2s;
    }

    .field-error.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================================
       SEPARADOR
       ============================================================ */
    .form-divider {
      grid-column: 1 / -1;
      height: 1px;
      background: var(--border);
      margin: 0.25rem 0;
    }

    /* ============================================================
       ALERTA GLOBAL
       ============================================================ */
    .alert {
      grid-column: 1 / -1;
      padding: 0.875rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      display: flex;
      align-items: flex-start;
      gap: 0.625rem;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity 0.3s, max-height 0.3s;
    }

    .alert.show {
      opacity: 1;
      max-height: 120px;
    }

    .alert-error {
      background: rgba(248, 113, 113, 0.08);
      border: 1px solid rgba(248, 113, 113, 0.25);
      color: #fca5a5;
    }

    .alert-success {
      background: rgba(90, 199, 170, 0.08);
      border: 1px solid rgba(90, 199, 170, 0.25);
      color: var(--c3);
    }

    .alert i {
      flex-shrink: 0;
      margin-top: 0.1rem;
    }

    /* ============================================================
       BOTÃO SUBMIT
       ============================================================ */
    .btn-submit {
      grid-column: 1 / -1;
      width: 100%;
      padding: 1rem 1.5rem;
      background: linear-gradient(135deg, var(--c2) 0%, var(--c3) 100%);
      border: none;
      border-radius: var(--radius-sm);
      color: var(--bg);
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;
      transition:
        opacity var(--transition),
        transform 0.1s ease,
        box-shadow var(--transition);
      position: relative;
      overflow: hidden;
      margin-top: 0.25rem;
    }

    .btn-submit::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
      opacity: 0;
      transition: opacity var(--transition);
    }

    .btn-submit:hover::before {
      opacity: 1;
    }

    .btn-submit:hover {
      box-shadow: 0 8px 28px rgba(90, 199, 170, 0.3);
    }

    .btn-submit:active {
      transform: scale(0.99);
    }

    .btn-submit:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none;
    }

    .btn-submit .spinner {
      width: 1.125rem;
      height: 1.125rem;
      border: 2px solid rgba(26, 24, 16, 0.3);
      border-top-color: var(--bg);
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
      display: none;
      flex-shrink: 0;
    }

    .btn-submit.loading .spinner {
      display: block;
    }

    .btn-submit.loading .btn-text {
      opacity: 0.7;
    }

    /* ============================================================
       SIDEBAR
       ============================================================ */
    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 1.125rem;
      animation: fadeUp 0.6s 0.3s ease both;
    }

    .info-card {
      background: rgba(37, 33, 23, 0.7);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.375rem 1.5rem;
      backdrop-filter: blur(12px);
    }

    .info-card-title {
      font-family: var(--font-display);
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--c4);
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }

    .info-card-title i {
      color: var(--c2);
    }

    /* Taxa */
    .fee-display {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 0.875rem 1rem;
      background: rgba(90, 199, 170, 0.06);
      border: 1px solid rgba(90, 199, 170, 0.15);
      border-radius: var(--radius-sm);
      margin-bottom: 1rem;
    }

    .fee-label {
      font-size: 0.8rem;
      color: rgba(250, 252, 211, 0.5);
      font-weight: 400;
    }

    .fee-value {
      font-family: var(--font-display);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--c2);
      letter-spacing: -0.02em;
    }

    /* Lista de benefícios */
    .benefit-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
    }

    .benefit-item {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 0.825rem;
      color: rgba(250, 252, 211, 0.55);
      font-weight: 300;
    }

    .benefit-item i {
      color: var(--c2);
      font-size: 0.75rem;
      flex-shrink: 0;
      width: 14px;
      text-align: center;
    }

    /* Métodos de pagamento */
    .payment-methods {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
    }

    .payment-method-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      transition: border-color var(--transition), background var(--transition);
    }

    .payment-method-item:hover {
      border-color: var(--border-hover);
      background: rgba(90, 199, 170, 0.04);
    }

    .payment-method-icon {
      width: 2rem;
      height: 2rem;
      border-radius: 0.4rem;
      background: rgba(90, 199, 170, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--c2);
      font-size: 0.875rem;
      flex-shrink: 0;
    }

    .payment-method-info strong {
      display: block;
      font-size: 0.825rem;
      font-weight: 600;
      color: var(--c4);
      font-family: var(--font-display);
    }

    .payment-method-info small {
      font-size: 0.725rem;
      color: rgba(250, 252, 211, 0.35);
      font-weight: 300;
    }

    /* Segurança */
    .security-badges {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 0.875rem;
    }

    .badge {
      padding: 0.3rem 0.75rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      border-radius: 2rem;
      font-size: 0.72rem;
      color: rgba(250, 252, 211, 0.5);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .badge i {
      color: var(--c2);
      font-size: 0.65rem;
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    .footer {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 1.5rem 2rem;
      border-top: 1px solid var(--border);
      font-size: 0.8rem;
      color: rgba(250, 252, 211, 0.25);
      font-weight: 300;
    }

    /* ============================================================
       ANIMAÇÕES
       ============================================================ */
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

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

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(16px);
      }

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

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    /* ============================================================
       RESPONSIVO
       ============================================================ */
    @media (max-width: 768px) {
      .header {
        padding: 1rem 1.25rem;
      }

      .steps {
        display: none;
      }

      .hero {
        padding: 2.5rem 1.25rem 1.5rem;
      }

      .slots-card {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
      }

      .slots-divider {
        width: 80%;
        height: 1px;
      }

      .main {
        grid-template-columns: 1fr;
        padding: 1.25rem 1.25rem 4rem;
        gap: 1.25rem;
      }

      .sidebar {
        order: -1;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }

      .form-group.full {
        grid-column: 1;
      }

      .btn-submit {
        grid-column: 1;
      }

      .alert {
        grid-column: 1;
      }

      .form-divider {
        grid-column: 1;
      }
    }

    @media (max-width: 400px) {
      .form-card {
        padding: 1.5rem 1.25rem;
      }
    }