/* ============================================================
   VAROLO PERÍCIAS — CSS Principal
   assets/css/style.css
   Mobile First | Premium Dark + Gold
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Outfit:wght@300;400;500;600&display=swap');

/* --- Variáveis --- */
:root {
  --ouro:         #C9A84C;
  --ouro-claro:   #E2C97E;
  --ouro-escuro:  #9A7A30;
  --preto:        #0A0A0F;
  --fundo:        #0D0D18;
  --fundo-card:   #13131F;
  --fundo-input:  #1A1A2A;
  --borda:        #2A2A3A;
  --borda-ouro:   rgba(201,168,76,0.35);
  --branco:       #F4F1EB;
  --cinza:        #8A8A9A;
  --cinza-claro:  #C0BFCA;
  --verde:        #4CAF82;
  --erro:         #E05C5C;

  --fonte-titulo: 'Cormorant Garamond', Georgia, serif;
  --fonte-corpo:  'Outfit', sans-serif;

  --raio:         12px;
  --raio-btn:     8px;
  --sombra:       0 4px 24px rgba(0,0,0,0.4);
  --sombra-ouro:  0 0 24px rgba(201,168,76,0.15);

  --transicao:    all 0.25s ease;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fonte-corpo);
  background-color: var(--fundo);
  color: var(--branco);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: var(--ouro); text-decoration: none; }
a:hover { color: var(--ouro-claro); }

/* --- Textura de fundo --- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(201,168,76,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(201,168,76,0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   CABEÇALHO / LOGO
   ============================================================ */

.cabecalho {
  text-align: center;
  padding: 40px 20px 28px;
}

.cabecalho .logo {
  max-height: 64px;
  margin: 0 auto 20px;
}

.cabecalho .logo-placeholder {
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--ouro);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.cabecalho .subtitulo {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cinza);
  font-weight: 400;
}

.divisor-ouro {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
  margin: 16px auto;
}

/* ============================================================
   BARRA DE PROGRESSO
   ============================================================ */

.progresso-wrap {
  padding: 0 20px 24px;
  max-width: 560px;
  margin: 0 auto;
}

.progresso-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--cinza);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.progresso-barra {
  height: 3px;
  background: var(--borda);
  border-radius: 2px;
  overflow: hidden;
}

.progresso-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro));
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ============================================================
   CARDS DE TELA
   ============================================================ */

.tela {
  display: none;
  animation: fadeIn 0.35s ease;
}
.tela.ativa { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CARD PRINCIPAL
   ============================================================ */

.card {
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 28px 24px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}

.card-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--branco);
  line-height: 1.25;
  margin-bottom: 6px;
}

.card-subtitulo {
  font-size: 0.78rem;
  color: var(--ouro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}

.card-texto {
  font-size: 0.9rem;
  color: var(--cinza-claro);
  line-height: 1.75;
}

.card-texto p + p { margin-top: 12px; }

/* ============================================================
   BOTÕES
   ============================================================ */

.btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: var(--raio-btn);
  font-family: var(--fonte-corpo);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transicao);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.btn-primario {
  background: linear-gradient(135deg, var(--ouro-escuro), var(--ouro));
  color: var(--preto);
  box-shadow: 0 4px 16px rgba(201,168,76,0.25);
}
.btn-primario:hover, .btn-primario:active {
  background: linear-gradient(135deg, var(--ouro), var(--ouro-claro));
  box-shadow: 0 6px 24px rgba(201,168,76,0.4);
  transform: translateY(-1px);
}
.btn-primario:active { transform: translateY(0); }

.btn-secundario {
  background: transparent;
  color: var(--cinza);
  border: 1px solid var(--borda);
  margin-top: 10px;
}
.btn-secundario:hover {
  border-color: var(--borda-ouro);
  color: var(--branco);
}

.btn-whatsapp {
  background: linear-gradient(135deg, #1a7a4a, #25D366);
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,211,102,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-whatsapp:hover {
  box-shadow: 0 6px 24px rgba(37,211,102,0.35);
  transform: translateY(-1px);
}

.btn + .btn { margin-top: 10px; }

/* ============================================================
   FORMULÁRIO / INPUTS
   ============================================================ */

.grupo-campo {
  margin-bottom: 16px;
}

.grupo-campo label {
  display: block;
  font-size: 0.78rem;
  color: var(--cinza);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
}

.grupo-campo input,
.grupo-campo select,
.grupo-campo textarea {
  width: 100%;
  background: var(--fundo-input);
  border: 1px solid var(--borda);
  border-radius: var(--raio-btn);
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  padding: 14px 16px;
  transition: var(--transicao);
  -webkit-appearance: none;
  appearance: none;
}

.grupo-campo input:focus,
.grupo-campo select:focus,
.grupo-campo textarea:focus {
  outline: none;
  border-color: var(--ouro);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

.grupo-campo input::placeholder { color: var(--cinza); opacity: 0.6; }

.campo-erro { border-color: var(--erro) !important; }
.msg-erro {
  font-size: 0.76rem;
  color: var(--erro);
  margin-top: 5px;
  display: none;
}
.msg-erro.visivel { display: block; }

/* ============================================================
   OPÇÕES DE SELEÇÃO (radio/checkbox visuais)
   ============================================================ */

.opcoes-grid {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.opcoes-grid.duas-colunas {
  grid-template-columns: 1fr 1fr;
}

.opcao-item {
  position: relative;
}

.opcao-item input[type="radio"],
.opcao-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.opcao-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--fundo-input);
  border: 1px solid var(--borda);
  border-radius: var(--raio-btn);
  cursor: pointer;
  transition: var(--transicao);
  font-size: 0.88rem;
  color: var(--cinza-claro);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

.opcao-label:hover {
  border-color: var(--borda-ouro);
  color: var(--branco);
}

.opcao-item input:checked + .opcao-label {
  border-color: var(--ouro);
  background: rgba(201,168,76,0.08);
  color: var(--branco);
  box-shadow: var(--sombra-ouro);
}

.opcao-icone {
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
}

.opcao-texto strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 0.9rem;
}

.opcao-texto small {
  font-size: 0.76rem;
  color: var(--cinza);
  line-height: 1.4;
}

/* ============================================================
   CARDS DE SERVIÇO (Etapa 1)
   ============================================================ */

.servicos-grid {
  display: grid;
  gap: 10px;
}

.servico-card {
  position: relative;
}

.servico-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.servico-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--fundo-input);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: var(--transicao);
  -webkit-tap-highlight-color: transparent;
}

.servico-label:hover {
  border-color: var(--borda-ouro);
  background: rgba(201,168,76,0.04);
}

.servico-card input:checked + .servico-label {
  border-color: var(--ouro);
  background: rgba(201,168,76,0.08);
  box-shadow: var(--sombra-ouro);
}

.servico-icone {
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,168,76,0.08);
  border-radius: 10px;
  flex-shrink: 0;
}

.servico-info { flex: 1; }

.servico-nome {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--branco);
  margin-bottom: 3px;
}

.servico-exemplos {
  font-size: 0.75rem;
  color: var(--cinza);
  line-height: 1.4;
}

.servico-seta {
  color: var(--ouro);
  font-size: 1rem;
  opacity: 0.6;
}

/* ============================================================
   TELA DE RESULTADO
   ============================================================ */

.resultado-destaque {
  text-align: center;
  padding: 24px 0 16px;
}

.resultado-icone {
  font-size: 3rem;
  margin-bottom: 12px;
}

.resultado-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--branco);
  margin-bottom: 6px;
}

.resultado-protocolo {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--cinza);
  text-transform: uppercase;
}

.resultado-box {
  background: rgba(201,168,76,0.06);
  border: 1px solid var(--borda-ouro);
  border-radius: var(--raio);
  padding: 20px;
  margin: 20px 0;
}

.resultado-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 12px;
}

.resultado-linha:last-child { border-bottom: none; }

.resultado-chave {
  font-size: 0.76rem;
  color: var(--cinza);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.resultado-valor {
  font-size: 0.9rem;
  color: var(--branco);
  text-align: right;
  font-weight: 500;
}

.resultado-valor.destaque-ouro {
  color: var(--ouro);
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
}

.resultado-obs {
  font-size: 0.82rem;
  color: var(--cinza-claro);
  line-height: 1.7;
  margin: 16px 0;
  padding: 16px;
  background: var(--fundo-input);
  border-radius: var(--raio-btn);
  border-left: 3px solid var(--ouro);
}

.aviso-revisao {
  font-size: 0.76rem;
  color: var(--cinza);
  text-align: center;
  padding: 12px;
  border: 1px dashed var(--borda);
  border-radius: var(--raio-btn);
  margin-bottom: 20px;
}

/* ============================================================
   LOADING / SPINNER
   ============================================================ */

.loading-wrap {
  text-align: center;
  padding: 40px 20px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--borda);
  border-top-color: var(--ouro);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

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

.loading-texto {
  font-size: 0.85rem;
  color: var(--cinza);
  animation: pulso 1.5s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape {
  text-align: center;
  padding: 32px 20px 40px;
  font-size: 0.72rem;
  color: var(--cinza);
  line-height: 1.8;
}

.rodape .ouro { color: var(--ouro); }

/* ============================================================
   UTILITÁRIOS
   ============================================================ */

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-ouro { color: var(--ouro); }
.text-cinza { color: var(--cinza); }
.oculto { display: none !important; }

/* ============================================================
   CABEÇALHO MINI (fluxos internos)
   ============================================================ */

.cabecalho-mini {
  text-align: center;
  padding: 20px 20px 8px;
}

.logo-placeholder-mini {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ouro);
  letter-spacing: 0.08em;
}

/* ============================================================
   RESPONSIVO — telas maiores
   ============================================================ */

@media (min-width: 600px) {
  .cabecalho { padding: 52px 20px 32px; }
  .card { padding: 36px 32px; }
  .card-titulo { font-size: 1.75rem; }
}