/* ==========================================================================
   M. MANAÍRA - DESIGN SYSTEM INSPIRADO NO PADRÃO TESLA
   Princípios: Subtração Radical, Precisão Geométrica, 4px Radius, Transições 0.33s
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis & Tokens (Paleta Oficial)
   -------------------------------------------------------------------------- */
:root {
  --color-brick: #8F3617;
  --color-brick-dark: #732A11;
  --color-brick-light: #A84420;

  --color-moss: #384334;
  --color-moss-dark: #273024;
  --color-moss-light: #4B5A46;

  --color-limestone: #F5EFEB;
  --color-limestone-card: #EFE7E0;
  --color-limestone-border: #E2D7CD;

  --color-taupe-light: #B8A798;
  --color-taupe-dark: #5E645A;

  --color-ochre: #F2CB46;

  --color-carbon: #171A20;
  --color-carbon-text: #393C41;
  --color-carbon-muted: #5C5E62;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & Tipografia Universal
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-limestone);
  color: var(--color-carbon);
  line-height: 1.45;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. Transições Universais (Padrão Tesla 0.33s)
   -------------------------------------------------------------------------- */
a, button, input, select {
  transition: background-color 0.33s cubic-bezier(0.5, 0, 0, 0.75),
              border-color 0.33s cubic-bezier(0.5, 0, 0, 0.75),
              color 0.33s cubic-bezier(0.5, 0, 0, 0.75),
              opacity 0.33s cubic-bezier(0.5, 0, 0, 0.75);
}

/* Pulso do CTA principal da hero */
.btn-pulsar {
  animation: pulsar 1.5s infinite;
  transition: background-color 0.3s ease;
}

@keyframes pulsar {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(143, 54, 23, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(143, 54, 23, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(143, 54, 23, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-pulsar {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   4. Inputs & Componentes de Formulário
   -------------------------------------------------------------------------- */
.tesla-input {
  border-radius: 4px !important;
  border: 1px solid var(--color-limestone-border) !important;
  background-color: #FFFFFF !important;
  color: var(--color-carbon) !important;
  font-size: 14px !important;
}

.tesla-input:focus {
  border-color: var(--color-brick) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--color-brick) inset !important;
}

.tesla-input::placeholder {
  color: #8E8E8E !important;
}