:root{
  --cobrizo: #c46a2b;
  --marron:  #3c190a;   /* mismo color que la barra */
  --marron-borde: #5a2a14;
  --copper: var(--cobrizo);
  --copper-2: #d5793a; /* hover */
}

/* Layout: footer pegado abajo */
.layout{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* fondo con el tono marrón y viñeteado sutil para dar profundidad */
  background:
    radial-gradient(1200px 600px at 25% 10%, rgba(0,0,0,.22), transparent 60%),
    radial-gradient(900px 700px at 85% 85%, rgba(0,0,0,.30), transparent 70%),
    var(--marron);
  color: #fff;
  padding-top: 64px; /* espacio para navbar fija */
}
main{ flex: 1; padding: 2rem 1rem; }

/* NAVBAR */
.navbar{
  background: linear-gradient(to bottom, rgba(60,25,10,.97), rgba(60,25,10,.90));
  border-bottom: 1px solid var(--marron-borde);
  backdrop-filter: blur(3px);
}
.brand-logo{ width: 42px; height: 42px; object-fit: cover; border-radius: .5rem; }
.navbar-brand{ color: var(--cobrizo) !important; font-weight: 700; letter-spacing: .3px; }

/* Links + activo */
.navbar .nav-link{ color:#f5f5f5 !important; position: relative; }
.navbar .nav-link::after{
  content:""; position:absolute; left:0; bottom:.2rem; height:2px; width:0;
  background: var(--cobrizo); transition: width .25s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{ width:100%; }
.navbar .nav-link.active{ color: var(--cobrizo) !important; }

/* Tarjeta del hero / contenedor general vistoso */
.hero-card{
  width: min(900px, 92%);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 1rem;
  background: rgba(44,20,10,.60);
  border: 1px solid var(--marron-borde);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-card h1{ font-weight: 800; }
.hero-card .lead{ color:#e9e3df; }

/* Botones */
.btn-cobrizo{
  background: var(--cobrizo);
  border-color: var(--cobrizo);
  color: #1b0c05;
}
.btn-cobrizo:hover{ background: #d5793a; border-color:#d5793a; color:#1b0c05; }

/* Footer fijado al borde inferior por el flex del layout */
.site-footer{
  background: rgba(60,25,10,.95);
  border-top: 1px solid var(--marron-borde);
  color:#cfc7c3;
}