/* ───────────────────────────────────────────────────────────────────────────
   home.css — complementos da home de calculadoras.rioclaro.com.br
   Carregado DEPOIS de site.css (o design system do Site Rio Claro V3).
   site.css é cópia fiel do V3 e NÃO deve ser editado — toda customização da
   home vive aqui. Usa os tokens do V3 (--petroleum, --turquoise, etc.).
   ─────────────────────────────────────────────────────────────────────────── */

/* Banner de consentimento de cookies (LGPD / Consent Mode v2).
   Injetado por app.js em todas as páginas (.consent-banner / .consent-actions).
   Portado do styles.css das calculadoras, com os tokens reescritos para o V3. */
.consent-banner {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  z-index: 600;
  display: grid;
  gap: .85rem;
  padding: 1rem 1.15rem;
  background: var(--petroleum);
  color: rgba(255, 255, 255, .9);
  border-radius: 1.1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.consent-banner p { margin: 0; font-size: .9rem; line-height: 1.5; }
.consent-banner a { color: var(--turquoise); font-weight: 700; }
.consent-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.consent-banner .btn { min-height: 40px; }
.consent-banner .btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: none;
}
.consent-banner .btn-ghost:hover { border-color: var(--turquoise); color: var(--turquoise); }
@media (min-width: 720px) {
  .consent-banner { left: auto; right: 1rem; bottom: 1rem; max-width: 430px; }
}

/* Grids dos blocos exclusivos da home (não existem no calculadoras.html do V3):
   "Por que usar" (4 colunas) e "Conteúdo Rio Claro" (2 colunas).
   Reaproveitam o componente .calc-card do V3. */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; position: relative; z-index: 1; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; position: relative; z-index: 1; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

/* Cards de feature ("Por que usar"): reaproveitam .calc-card mas não são
   clicáveis — neutraliza o hover de card-link. */
.feature-card { cursor: default; }
.feature-card:hover { transform: none; box-shadow: var(--shadow-card); }
.feature-card:hover::before { transform: none; }

/* Cartões é um comparador (não um simulador): o CTA do card usa o mesmo .go. */