/* ===== Visual "Asfalto" =====
   Cores do Dá Pé? (fixas) + uma cor da marca da moto (--marca), usada só em detalhes.
   O app.js troca --marca quando a pessoa escolhe outra moto. */
:root {
  --petroleo: #0E4A5A;   /* azul-petróleo, a cor do logo */
  --petroleo-2: #3F7480;
  --limao: #B8E62E;
  --fundo: #EEF3F4;
  --cartao: #FFFFFF;
  --campo: #F5F9F9;
  --borda: #D3DFE1;
  --linha: #E1EAEC;
  --texto: #0B2D36;
  --suave: #46636B;
  --ok: #1A7F3C;
  --ok-fundo: #E5F5EA;
  --atencao: #A34B00;
  --atencao-fundo: #FFF1E0;
  --ruim: #B42318;
  --ruim-fundo: #FDECEA;
  --marca: #CC0000;
}

* { box-sizing: border-box; }

/* Garante que elementos com o atributo "hidden" fiquem escondidos,
   mesmo quando outra regra diz "display: flex" */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.5;
}

.largura { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ----- Simulador: celular = um embaixo do outro ----- */
.simulador { display: flex; flex-direction: column; gap: 18px; }

/* Computador: desenho à esquerda, seus dados à direita (como no Cycle-Ergo) */
@media (min-width: 900px) {
  .simulador {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "resultado dados";
    align-items: start;
    margin-top: -84px;
  }
  .simulador .coluna { grid-area: dados; position: sticky; top: 16px; }
  .simulador .dados { margin-top: 0; }
  .simulador .resultado {
    grid-area: resultado;
    grid-template-columns: 1fr;
    box-shadow: 0 10px 30px rgba(15, 27, 45, 0.12);
  }
  .simulador #desenho { max-height: 480px; }
}

/* ----- Topo escuro ----- */
.topo { background: var(--petroleo); color: #FFFFFF; padding: 20px 0 100px; }
/* Logo: "MOTOS" com a mesma largura de "Dá Pé"; o "?" com a altura das duas linhas */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-textos { display: inline-flex; flex-direction: column; justify-content: space-between; height: 60px; }
.logo-texto { font-weight: 700; font-size: 48px; letter-spacing: -1.5px; line-height: 44px; height: 44px; }
.logo-motos {
  display: flex; justify-content: space-between;
  font-weight: 600; font-size: 14px; line-height: 14px; height: 14px; color: #C4DCE0;
}
.logo-icone {
  width: 60px; height: 60px; border-radius: 14px;
  background: var(--limao); color: var(--petroleo);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 46px; line-height: 1;
}
.topo h1 { margin: 18px 0 6px; font-size: 34px; line-height: 1.1; letter-spacing: -1px; }
.limao { color: var(--limao); }
.topo p { margin: 0; color: #C4DCE0; }

/* ----- Cartões ----- */
main { display: flex; flex-direction: column; gap: 18px; }
.cartao {
  background: var(--cartao);
  border-radius: 16px;
  padding: 16px;
}
h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.5px; }
.suave { color: var(--suave); }
a { color: var(--petroleo); font-weight: 600; }

/* ----- Seus dados (o cartão "flutua" sobre o topo) ----- */
.dados {
  margin-top: -84px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(11, 45, 54, 0.12);
}
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--suave); }
.campo input, .campo select {
  min-height: 50px;
  width: 100%;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  background: var(--campo);
  color: var(--texto);
  font: 600 16px "Space Grotesk", sans-serif;
}
.campo-moto { box-shadow: inset 4px 0 0 var(--marca); }
/* Marca em cima; modelo (mais largo) e ano lado a lado embaixo */
.grade-moto { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.campo-marca { grid-column: 1 / -1; }
.grade-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grade-campos .campo { justify-content: flex-end; } /* se um rótulo quebrar em 2 linhas, as caixas continuam alinhadas */
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--suave); }
.checkbox input { width: 20px; height: 20px; }
.linha-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.alternador { display: flex; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.alternador button {
  min-height: 40px; padding: 0 16px; border: 0; cursor: pointer;
  background: var(--cartao); color: var(--suave);
  font: 600 14px "Space Grotesk", sans-serif;
}
.alternador button[aria-pressed="true"] { background: var(--petroleo); color: #FFFFFF; }

.coluna { display: flex; flex-direction: column; gap: 18px; }

/* ----- Imagem da moto ----- */
.foto { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.foto svg, .foto img { display: block; width: 100%; height: auto; border-radius: 10px; }
.foto figcaption { font-size: 12px; color: var(--suave); }
.foto .nome-moto { font-weight: 700; font-size: 16px; color: var(--texto); }
.s-marca { fill: var(--marca); }
.s-marca-linha { fill: none; stroke: var(--marca); }

/* ----- Resultado ----- */
.resultado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.palco { background: var(--petroleo); border-radius: 12px; padding: 8px; }
#desenho { display: block; width: 100%; max-height: 440px; }
.resumo { display: flex; flex-direction: column; gap: 10px; }
.linha-veredito { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.veredito { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.veredito.ok { color: var(--ok); }
.veredito.atencao { color: var(--atencao); }
.veredito.ruim { color: var(--ruim); }
.selo { padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.selo.ruim { background: var(--ruim-fundo); color: var(--ruim); }
#detalhe { margin: 0; font-size: 15px; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.numeros div { border: 1px solid var(--linha); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; }
.aviso-descalco { margin: 0; font-size: 13px; color: var(--suave); }
.numeros span { font-size: 12px; color: var(--suave); }
.numeros strong { font-size: 17px; }

/* ----- Ficha ----- */
.ficha { border-top: 4px solid var(--marca); display: flex; flex-direction: column; gap: 12px; }
.ficha .marca-tipo { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--suave); }
.ficha h2 { margin: 0; font-size: 26px; }
.ficha dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; font-weight: 600; }
.ficha p { margin: 0; }
.curiosidade { background: var(--petroleo); color: #FFFFFF; border-radius: 12px; padding: 14px; }
.curiosidade strong { color: var(--limao); }
.fipe { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--linha); border-radius: 12px; padding: 14px; }
.fipe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fipe li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.fipe li strong { white-space: nowrap; }
.fontes { font-size: 13px; color: var(--suave); word-break: break-all; }
.fontes a { font-weight: 400; }

/* ----- Recomendações ----- */
#lista-recomendacoes { padding: 0; margin: 0; list-style: none; display: grid; gap: 8px; }
#lista-recomendacoes button {
  width: 100%;
  min-height: 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 14px;
  font: inherit; text-align: left; color: var(--texto);
  background: var(--cartao);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
#lista-recomendacoes button:hover { border-color: var(--borda); }
#lista-recomendacoes .selecionada { border-color: var(--petroleo); box-shadow: inset 4px 0 0 var(--marca); }
#lista-recomendacoes .situacao { display: block; font-size: 13px; font-weight: 600; }
#lista-recomendacoes .ok .situacao { color: var(--ok); }
#lista-recomendacoes .atencao .situacao { color: var(--atencao); }
#lista-recomendacoes .ruim .situacao { color: var(--ruim); }
#lista-recomendacoes small { color: var(--suave); white-space: nowrap; font-size: 13px; }
.ver-mais {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  font: inherit; font-weight: 600; color: var(--petroleo);
  background: transparent;
  border: 2px solid var(--petroleo);
  border-radius: 12px;
  cursor: pointer;
}
.ver-mais:hover { background: var(--petroleo); color: #FFFFFF; }
.ver-mais[hidden] { display: none; }

.info h2 { font-size: 18px; margin-top: 8px; }
.info p { margin: 0 0 8px; color: var(--suave); }

footer { color: var(--suave); font-size: 12px; padding-top: 8px; padding-bottom: 32px; }

/* ----- Celular ----- */
@media (max-width: 720px) {
  .resultado { grid-template-columns: 1fr; }
}