/* ===========================================================
   JC Perícias — Variação 2 (Forense Técnico / Dark)
   Reset + tipografia base + responsivo
   =========================================================== */
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
input, select, textarea, button { font: inherit; color: inherit; }
::placeholder { opacity: 0.45; }
html { scroll-behavior: smooth; }
body { background: #0B0F14; }
img { max-width: 100%; }

/* ---- Responsivo ---- */
@media (max-width: 980px) {
  h1 { font-size: 44px !important; }
  .rgrid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}
@media (max-width: 720px) {
  .site-nav { flex-wrap: wrap !important; gap: 16px; }
  .site-nav nav { flex-wrap: wrap !important; gap: 16px 18px !important; }
  section > div { padding-left: 22px !important; padding-right: 22px !important; }
  .site-nav { padding-left: 22px !important; padding-right: 22px !important; }
  footer > div { padding-left: 22px !important; padding-right: 22px !important; flex-direction: column; gap: 12px; }
  h1 { font-size: 34px !important; }
  .rgrid { grid-template-columns: 1fr !important; }
  section[id] > div { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* Linhas de "especialidades": número + título lado a lado, alinhados à esquerda;
   descrição e tag abaixo. Sobrepõe a regra genérica .rgrid em telas estreitas. */
@media (max-width: 980px) {
  #servicos .rgrid { grid-template-columns: 56px 1fr !important; gap: 6px 18px !important; }
  #servicos .rgrid > :nth-child(1) { grid-column: 1; grid-row: 1; }
  #servicos .rgrid > :nth-child(2) { grid-column: 2; grid-row: 1; }
  #servicos .rgrid > :nth-child(3) { grid-column: 2; grid-row: 2; }
  #servicos .rgrid > :nth-child(4) { grid-column: 2; grid-row: 3; text-align: left !important; padding-top: 6px !important; }
}


/* ---- Estados de interação (hover / focus) ---- */
/* hover */
.hv1:hover{color: #5CC8B8;}
.hv2:hover{color: #5CC8B8;}
.hv3:hover{color: #5CC8B8;}
.hv4:hover{color: #5CC8B8;}
.hv5:hover{color: #5CC8B8;}
.hv6:hover{background: #7FDACB;}
.hv7:hover{background: #7FDACB;}
.hv8:hover{border-color: #5CC8B8; color: #5CC8B8;}
.hv9:hover{background: #0D1219;}
.hv10:hover{background: #0D1219;}
.hv11:hover{background: #0D1219;}
.hv12:hover{background: #0D1219;}
.hv13:hover{background: #0D1219;}
.hv14:hover{background: #0D1219;}
.hv15:hover{background: #0D1219;}
.hv16:hover{background: #0D1219;}
.hv17:hover{background: #0D1219;}
.hv18:hover{border-color: #2E4A45;}
.hv19:hover{border-color: #2E4A45;}
.hv20:hover{border-color: #2E4A45;}
.hv21:hover{background: #11161D;}
.hv22:hover{background: #11161D;}
.hv23:hover{background: #11161D;}
.hv24:hover{background: #7FDACB;}

/* focus */
.fc1:focus{border-color: #5CC8B8;}
.fc2:focus{border-color: #5CC8B8;}
.fc3:focus{border-color: #5CC8B8;}
.fc4:focus{border-color: #5CC8B8;}