/* Car Club landing — Conceito C · Duplo
   Cores: Carvão #2A2A2E · Âmbar #F2A819 · Branco #FFFFFF · Cinza #6B6B70
   Regra de marca: nunca cortar logótipos (object-fit: contain + padding). */

:root {
  --cc-carvao: #2A2A2E;
  --cc-ambar: #F2A819;
  --cc-branco: #FFFFFF;
  --cc-cinza: #6B6B70;
  --cc-cinza-claro: #f6f6f7;
  --cc-borda: #ececef;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--cc-carvao);
  background: var(--cc-branco);
  line-height: 1.55;
}

/* ——— Logótipos: nunca crop ——— */
.logo-img,
img.logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  /* padding generoso para o lockup completo ficar visível */
  padding: 0.35rem 0.5rem;
}

.navbar .logo-img {
  height: 52px;
  width: auto;
  max-width: 220px;
  padding: 0.25rem 0.4rem;
}

.footer-logo .logo-img {
  height: 44px;
  width: auto;
  max-width: 200px;
  opacity: 0.95;
  padding: 0.25rem 0.4rem;
}

.brand-showcase .logo-img {
  max-width: min(420px, 100%);
  height: auto;
  padding: 1rem 1.25rem;
  margin-inline: auto;
}

/* ——— Navbar ——— */
.cc-navbar {
  background: var(--cc-carvao);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.cc-navbar .nav-link {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  font-weight: 500;
}

.cc-navbar .nav-link:hover,
.cc-navbar .nav-link:focus {
  color: var(--cc-ambar);
}

.cc-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}

.cc-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ——— Botões ——— */
.btn-cc {
  background: var(--cc-ambar);
  color: var(--cc-carvao);
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.35rem;
}

.btn-cc:hover,
.btn-cc:focus {
  background: #ffb82e;
  color: var(--cc-carvao);
  filter: brightness(1.03);
}

.btn-cc-ghost {
  background: transparent;
  color: var(--cc-branco);
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 0.7rem 1.35rem;
}

.btn-cc-ghost:hover,
.btn-cc-ghost:focus {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cc-branco);
  border-color: var(--cc-ambar);
}

.btn-cc-outline {
  background: transparent;
  color: var(--cc-carvao);
  font-weight: 600;
  border: 1px solid var(--cc-carvao);
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
}

.btn-cc-outline:hover,
.btn-cc-outline:focus {
  background: var(--cc-carvao);
  color: var(--cc-branco);
}

/* ——— Hero ——— */
.cc-hero {
  background: linear-gradient(135deg, var(--cc-carvao) 0%, #1a1a1d 55%, #3a3010 100%);
  color: var(--cc-branco);
  padding: 4.25rem 0 3.75rem;
}

.cc-hero h1 {
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1.15;
  max-width: 18ch;
  margin-bottom: 0.85rem;
}

.cc-hero .lead {
  color: #c8c8cc;
  max-width: 42ch;
  font-size: 1.05rem;
}

.cc-accent {
  color: var(--cc-ambar);
}

/* ——— Secções ——— */
.cc-section {
  padding: 3.25rem 0;
}

.cc-section h2 {
  font-size: 1.55rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.cc-section .section-lead {
  color: var(--cc-cinza);
  max-width: 52ch;
  margin-bottom: 1.75rem;
}

.cc-muted {
  background: var(--cc-cinza-claro);
}

/* ——— Cards categorias ——— */
.cc-cat-card {
  display: block;
  height: 100%;
  border: 1px solid var(--cc-borda);
  border-radius: 12px;
  padding: 1.15rem 1.2rem;
  background: #fafafa;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cc-cat-card:hover,
.cc-cat-card:focus {
  border-color: var(--cc-ambar);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(42, 42, 46, 0.08);
  color: inherit;
}

.cc-cat-card .n {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cc-ambar);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cc-cat-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.35rem 0 0.4rem;
}

.cc-cat-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cc-cinza);
}

.cc-cat-card .go {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cc-carvao);
}

.cc-cat-card:hover .go {
  color: var(--cc-ambar);
}

/* ——— Nota / proposta ——— */
.cc-note {
  background: #fff8e8;
  border-left: 4px solid var(--cc-ambar);
  padding: 1rem 1.2rem;
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
}

/* ——— CTA banda ——— */
.cc-cta-band {
  background: var(--cc-carvao);
  color: var(--cc-branco);
  padding: 2.75rem 0;
}

.cc-cta-band p {
  color: #c8c8cc;
  margin-bottom: 0;
}

/* ——— Contacto ——— */
.cc-contact a {
  color: var(--cc-carvao);
  font-weight: 600;
  text-decoration: none;
}

.cc-contact a:hover {
  color: var(--cc-ambar);
}

/* ——— Footer ——— */
.cc-footer {
  background: var(--cc-carvao);
  color: #b0b0b4;
  padding: 2rem 0;
  font-size: 0.9rem;
}

.cc-footer a {
  color: #d0d0d4;
  text-decoration: none;
}

.cc-footer a:hover {
  color: var(--cc-ambar);
}

/* ——— Utilitários ——— */
.text-cinza {
  color: var(--cc-cinza);
}

@media (max-width: 575.98px) {
  .cc-hero {
    padding: 3rem 0 2.75rem;
  }

  .navbar .logo-img {
    height: 44px;
    max-width: 180px;
  }
}