:root{
  --brand-main: #c3902b;   /* dorado */
  --brand-alt1: #902bc3;   /* púrpura */
  --brand-alt2: #2bc390;   /* verde agua */
  --text-main: #000;       /* texto general negro */
  --bg-dark: #f0e0c0;      /* fondo oscuro neutro */
}

/* LAYOUT BASE - Simplified and fixed */
html, body {
  background: var(--bg-dark);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Simplified body layout - no complex grid */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body {
  font-size: 1.1rem !important;
}
p {
  font-size: 1.1rem !important;
}

/* Header stays at top */
header, .brand-header {
  flex-shrink: 0;
}

/* Main content grows to fill space */
main {
  flex: 1;
  padding: 0.5rem 0 1rem 0; /* Reduced top padding from 1rem to 0.5rem */
  min-height: 0;
}

/* Footer stays at bottom */
footer, .site-footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* Fix first child margin issues */
main > *:first-child { 
  margin-top: 0 !important; 
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  main {
    padding: 0.25rem 0 1rem 0;
  }
  
  /* Ensure container has proper spacing */
  main .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Fix any problematic margins */
  /* Reduce space between navbar and breadcrumb */

  .breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
  }
  
  .card {
    margin-top: 0 !important;
  }
}

/* UTILIDADES */

.logo-standard { height: 60px; object-fit: contain; }
.logo-wide { height: 45px; max-width: 180px; object-fit: contain; }


.text-brand-purple {
  color: #902bc3 !important;
  font-weight: bold;
}

.custom-box{
  background: var(--bg-dark);
  color: #000;
}

.center7 {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* HEADER */
.brand-header{
  background: var(--brand-main);
  color: #fff;
  padding: .5rem 0;
}

.brand-header .brand-link{ 
  color: #fff; 
}

.brand-logo{ 
  width: 42px; 
}

.site-title{
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}

/* Navbar - stable and responsive */
.navbar {
  min-height: 56px;
  padding: .5rem 1rem;
  background: #f0e3c7 !important;
}

/* Prevent menu wrapping */
.navbar-nav {
  flex-wrap: nowrap;
}

.navbar .nav-link {
  white-space: nowrap;
  color: #000 !important;
  font-weight: 750;
}

.navbar .nav-link:hover,
.navbar .nav-link.active{
  color: var(--brand-alt2) !important;
}

.navbar .nav-link.active::after{
  background: var(--brand-alt2);
}

/* BOTONES */
.btn-brand{
  --bs-btn-bg: var(--brand-main);
  --bs-btn-border-color: var(--brand-main);
  --bs-btn-hover-bg: var(--brand-alt1);
  --bs-btn-hover-border-color: var(--brand-alt1);
  --bs-btn-color: #fff;
}

/* FOOTER */
.site-footer{
  background: var(--brand-main) !important;
  color: #fff;
  padding: 1rem 0;
}

.site-footer .footer-link{
  color: var(--brand-alt2);
}

.site-footer .footer-link:hover{
  color: #fff;
}

/* TARJETAS DE PERSONAS */
.card-person {
  height: 100%;
  min-height: 340px;
  display: flex;
  flex-direction: column;
}

.card-person .card-img-container {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.card-person img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-name{
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: .25rem;
}

/* Person photo styling */
.person-photo{
  position: relative;
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.person-photo > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-person{
  position: relative;
  z-index: 0;
}

.site-footer{
  position: relative;
  z-index: 1;
}

/* Enhanced mobile responsiveness */
@media (max-width: 576px) {
  main {
    padding: 1.25rem 0;
  }
  
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .row.g-4 { 
    --bs-gutter-y: 1rem;
  }
  
  /* Ensure navbar doesn't cause issues */
  .navbar {
    padding: .5rem;
  }
  
  .navbar-nav {
    width: 100%;
  }
}